/* Defaults are fully visible. JS only enhances nonessential presentation. */
.notice > .wrap{align-items:center}
.notice > .wrap > span{min-width:0}
.cfc-motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:104px;min-height:44px;padding:8px 10px;border:1px solid var(--control-border);background:transparent;color:var(--text);font-size:12px;white-space:nowrap;flex-shrink:0}
.cfc-motion-toggle:disabled{opacity:1;cursor:default;color:var(--muted)}
/* Inner-page header: the control sits next to search + theme, so it drops its
   word label on narrow screens to keep the header row from overflowing. */
@media(max-width:1023px){.header .cfc-motion-toggle{min-width:44px;padding:8px 8px}.header .cfc-motion-toggle .mt-label{display:none}}
.choice-row{position:relative}
.cfc-choice-marker{display:none;position:absolute;pointer-events:none;border:2px solid var(--link);border-radius:7px;transform-origin:top left;box-sizing:border-box}
.product.cfc-selected{border-top:2px solid var(--link);padding-top:23px}
:root[data-cfc-motion=on] .cfc-choice-marker{display:block}
:root[data-cfc-motion=on] .hero-media{clip-path:inset(0 round calc(4px + var(--cfc-morph-progress,0)*56px) 4px calc(4px + var(--cfc-morph-progress,0)*56px) 4px)}
:root[data-cfc-motion=on] .hero-media > img{transform:scale(calc(1 + var(--cfc-morph-progress,0)*.035))}
:root[data-cfc-motion=on] .product-image img{transition:transform 240ms cubic-bezier(.22,.8,.22,1)}
:root[data-cfc-motion=on] .topics .arrow{transition:transform 200ms cubic-bezier(.22,.8,.22,1)}
:root[data-cfc-motion=on] .topics a:focus-visible .arrow{transform:translateX(5px)}
/* Inner pages (blog, article, search, collection cards). */
:root[data-cfc-motion=on] .post-card img,:root[data-cfc-motion=on] .pdp-thumb img{transition:transform 320ms cubic-bezier(.22,.8,.22,1)}
:root[data-cfc-motion=on] .post-card h3 a{transition:color 180ms cubic-bezier(.22,.8,.22,1)}
:root[data-cfc-motion=on] .post-card a.post-thumb:focus-visible img{transform:scale(1.04)}
@media(hover:hover) and (pointer:fine){
  :root[data-cfc-motion=on] .product-image:hover img{transform:translateY(-4px) scale(1.02)}
  :root[data-cfc-motion=on] .topics a:hover .arrow{transform:translateX(5px)}
  :root[data-cfc-motion=on] .post-card:hover img,:root[data-cfc-motion=on] .pdp-thumb:hover img{transform:scale(1.04)}
}
:root[data-cfc-motion=off]{scroll-behavior:auto}
:root[data-cfc-motion=off] .btn,:root[data-cfc-motion=off] .video-button>img{transition:none}
@media(prefers-reduced-motion:reduce){
  :root[data-cfc-motion] .hero-media{clip-path:none}
  :root[data-cfc-motion] .hero-media>img,:root[data-cfc-motion] .product-image img,:root[data-cfc-motion] .topics .arrow,:root[data-cfc-motion] .post-card img,:root[data-cfc-motion] .pdp-thumb img{transform:none!important;transition:none!important}
  :root[data-cfc-motion] .cfc-choice-marker{display:none}
}