/* perf.css — smooth scrolling on mid/low-end phones (perf pass a2c21839). Loaded after theme.css; look unchanged. */
/* 1. sticky header: no live backdrop blur while scrolling (re-blurs the page under it every frame) — near-opaque fill instead */
.hdr.is-scrolled{ -webkit-backdrop-filter:none; backdrop-filter:none; background:color-mix(in srgb, var(--bg) 96%, transparent); }
/* 2. hero progress line: compositor-only (was a width animation = layout + paint every frame, forever) */
.hero__dot::after{ right:3px; width:auto; transform:scaleX(0); transform-origin:left center; will-change:auto; }
.hero__dot.is-on::after{ animation:dotfillx var(--dur, 6s) linear forwards; }
@keyframes dotfillx{ to{ transform:scaleX(1); } }
.hero__dots{ filter:none; }
.hero__dot::before,.hero__dot::after{ box-shadow:0 1px 2px rgba(0,0,0,.3); }
.hero.is-off .hero__dot.is-on::after{ animation-play-state:paused; }
/* 3. marquees: transform-only already; stop them when off screen */
.mq.is-off .mq__belt, .ann.is-off .ann__belt{ animation-play-state:paused; }
/* 4. video cards: solid chips instead of backdrop blur over playing video */
.vcard__play{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,255,255,.9); }
.vcard__exp{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(0,0,0,.38); }
.sticky-atc{ -webkit-backdrop-filter:none; backdrop-filter:none; background:color-mix(in srgb, var(--bg) 97%, transparent); }
/* 5. word-reveal spans: no permanent compositor layer per word */
.w > span{ will-change:auto; }
/* 6. below-the-fold home sections: skip rendering until near the screen */
#home > .section:nth-child(n+4){ content-visibility:auto; contain-intrinsic-size:auto 640px; }
@media (prefers-reduced-motion:reduce){ .mq__belt,.ann__belt{ animation-play-state:paused; } }

/* reveal footer on phones */
html.has-parallax .ftr{ transform:translateZ(0); }
@media (max-width:959px){ html.has-parallax .site{ box-shadow:none; } }

/* collection "About" text + FAQs under the grid (SEO content pass) */
.cintro{ max-width:780px; margin:64px 0 8px; }
.cintro .h2{ font-size:clamp(26px, 3.2vw, 38px); }
.cintro__body{ color:var(--muted); margin:14px 0 22px; line-height:1.65; }
.cintro__body p + p{ margin-top:12px; }
.cintro__body a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.cintro .acc__body p{ color:var(--muted); line-height:1.6; }

/* back-in-stock form + reviews (competitor pass) — built from the theme's own pills/buttons */
.restock{ margin:14px 0 6px; padding:16px; border:1px solid var(--border); border-radius:14px; }
.restock__t{ font-size:14px; margin-bottom:10px; }
.restock__row{ display:flex; gap:8px; }
.restock__row .field-pill{ flex:1; min-width:0; }
.restock__msg, .rv__msg{ font-size:13.5px; margin-top:8px; }
.restock__msg.ok, .rv__msg.ok{ color:#2f7a3a; } .restock__msg.err{ color:#b3261e; }
.rv__list{ list-style:none; padding:0 !important; margin:0 0 18px; }
.rv__item{ padding:12px 0; border-bottom:1px solid var(--border); }
.rv__item p{ margin-top:6px; }
.rv__stars{ color:#c9932d; letter-spacing:2px; }
.rv__by{ font-size:13px; color:var(--muted); }
.rv__v{ color:#2f7a3a; font-weight:600; }
.rv__form{ display:grid; gap:10px; margin-top:6px; }
.rv__h{ font-weight:600; }
.rv__small{ font-size:12.5px; color:var(--muted); }
.rv__two{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rv__form textarea.field-pill{ border-radius:16px; resize:vertical; min-height:96px; padding-top:12px; }
.rv__rate{ border:0; padding:0; margin:0; display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; }
.rv__rate input{ position:absolute; opacity:0; width:1px; height:1px; }
.rv__rate label{ font-size:28px; line-height:1; color:#d9d2c5; cursor:pointer; }
.rv__rate input:checked ~ label, .rv__rate label:hover, .rv__rate label:hover ~ label{ color:#c9932d; }
.rv__rate input:focus-visible + label{ outline:2px solid currentColor; outline-offset:2px; }