/* ============================================================================
   Strawberry for Beauty — premium catalogue.
   Category archives (.sfb-cat) and single product pages (.sfb-prod).

   Everything is scoped under .sfb-page, exactly as the homepage body is, so the
   two read as one site: same tokens, same .sfb-sec / .sfb-head / .sfb-hair
   shell, same .col-item card, same .rv reveal, same .sfb-band close.

   The tokens are RE-DECLARED here rather than imported from hall-home.css on
   purpose. That sheet loads only on the front page and, at its line 82, replaces
   the theme header — loading it here would delete the global chrome from every
   product page. This file must never hide .sfb-nav.

   #DE2227 is the only accent. Animation is transform/opacity only.
   ========================================================================== */

/* The dark page has to reach the edges of the document, or a short archive
   (one product) leaves white below the fold where the body shows through. */
body.sfb-catalog { background: #06060A; }

.sfb-page {
  --void:#06060A; --panel:#0D0C11; --line:#221F28; --cream:#F0EAE6;
  --mute:#948D96; --dim:#635C68; --red:#DE2227;
  --f-display:var(--sfb-cairo);
  --f-body:var(--sfb-cairo);
  --f-tick:var(--sfb-cairo);
  position:relative;background:var(--void);color:var(--cream);font-family:var(--sfb-cairo);
}
.sfb-page *,.sfb-page *::before,.sfb-page *::after{box-sizing:border-box}
.sfb-page img{max-width:100%;height:auto}
.sfb-page a{color:inherit}
.sfb-page :focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- editorial ticker: the same seam the homepage uses ---------- */
.tickerbar{
  position:relative;overflow:hidden;border-block-end:1px solid var(--line);
  background:linear-gradient(180deg,rgba(222,34,39,.07),transparent);
  padding:15px 0;user-select:none;
}
.tickerbar .run{display:flex;width:max-content;animation:sfbcatrun 34s linear infinite}
.tickerbar .run span{
  display:inline-flex;align-items:center;gap:26px;padding-inline-end:26px;
  font-family:var(--sfb-cairo);font-size:11px;font-weight:500;letter-spacing:.34em;
  color:#7C757F;white-space:nowrap;
}
.tickerbar .run b{color:var(--red);font-weight:500}
.tickerbar .run i{width:4px;height:4px;border-radius:50%;background:var(--red);opacity:.75;font-style:normal}
@keyframes sfbcatrun{to{transform:translateX(50%)}}

/* ---------- section shell (identical to the homepage's) ---------- */
.sfb-sec{position:relative;max-width:1240px;margin:0 auto;padding:clamp(72px,10vw,140px) clamp(20px,5vw,52px)}
.sfb-head{max-width:620px}
.sfb-head .tick,.sfb-page .tick{
  display:block;font-family:var(--sfb-cairo);font-size:10px;font-weight:500;
  letter-spacing:.42em;color:var(--red);margin-bottom:15px;
}
.sfb-head h2{margin:0;font-family:var(--sfb-cairo);font-weight:600;font-size:clamp(25px,3.2vw,39px);line-height:1.4;color:#fff}
.sfb-head p{margin:16px 0 0;font-size:14px;line-height:2;color:#A29BA3;font-weight:300;max-width:50ch}
.sfb-hair{width:42px;height:2px;background:var(--red);box-shadow:0 0 14px rgba(222,34,39,.6);margin-top:20px}

/* ---------- buttons ---------- */
.sfb-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;
  border-radius:2px;border:1px solid transparent;font-family:var(--sfb-cairo);font-size:13px;
  font-weight:700;text-decoration:none;cursor:pointer;transition:.3s ease;white-space:nowrap;
}
.sfb-page .btn-primary{background:var(--red);color:#fff}
.sfb-page .btn-primary:hover{background:#c31b20;box-shadow:0 14px 40px -12px rgba(222,34,39,.95)}
.sfb-page .btn-ghost{border-color:var(--line);color:var(--cream);background:rgba(255,255,255,.02)}
.sfb-page .btn-ghost:hover{border-color:var(--red)}

/* ---------- scroll reveal ----------
   Deliberately NOT `.rv { opacity:0 }`. Hiding from the stylesheet means a
   script that never runs leaves the page permanently blank — the exact failure
   that emptied the burger menu (PROGRESS.md, 2026-08-24). catalog.js adds
   `.armed` itself, and only to elements already below the fold, so it can
   always undo what it did. No script → nothing hidden. */
.sfb-page .rv.armed{opacity:0;transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--rv,0s)}
.sfb-page .rv.armed.in{opacity:1;transform:none}

/* ---------- product card — byte-for-byte the homepage's .col-item ---------- */
.col-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
.col-item{
  position:relative;display:flex;flex-direction:column;background:var(--void);
  box-shadow:0 0 0 1px var(--line);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:background .45s ease;
}
.col-item::before{
  content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:2;
}
.col-item:hover,.col-item:focus-visible{background:#0C0B10}
.col-item:hover::before,.col-item:focus-visible::before{transform:scaleX(1)}
.col-item .shot{
  position:relative;aspect-ratio:1;display:grid;place-items:center;padding:14%;
  background:radial-gradient(circle at 50% 62%,rgba(222,34,39,.13),transparent 68%);
}
.col-item .shot img{
  max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.7));
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.col-item:hover .shot img{transform:translateY(-6px) scale(1.03)}
.col-item .tag3d,.prod-stage .tag3d{
  position:absolute;top:12px;inset-inline-end:12px;font-family:var(--sfb-cairo);font-size:8.5px;
  font-weight:700;letter-spacing:.18em;color:var(--red);border:1px solid rgba(222,34,39,.4);
  border-radius:999px;padding:4px 8px;background:rgba(6,6,10,.7);z-index:2;
}
.col-item .meta{padding:16px 18px 20px;border-top:1px solid var(--line)}
.col-item .cat{display:block;font-family:var(--sfb-cairo);font-size:8.5px;letter-spacing:.26em;color:var(--dim)}
.col-item h3{margin:8px 0 0;font-family:var(--sfb-cairo);font-weight:500;font-size:14px;line-height:1.6;color:#fff}
.col-item .money{display:block;margin-top:11px;font-family:var(--sfb-cairo);font-size:13.5px;color:var(--cream)}
.col-item .money del{color:var(--dim);font-size:11px;margin-inline-start:7px}
.col-item .money ins{text-decoration:none}
.col-empty{padding:44px 0;color:var(--dim);font-size:13.5px}

/* ---------- closing band ---------- */
.sfb-band{
  position:relative;text-align:center;padding:clamp(80px,11vw,150px) 24px;
  border-top:1px solid var(--line);
  background:radial-gradient(ellipse 52% 130% at 50% 100%,rgba(222,34,39,.22),transparent 66%);
}
.sfb-band h2{margin:0 auto;max-width:20ch;font-family:var(--sfb-cairo);font-weight:600;font-size:clamp(26px,3.6vw,44px);line-height:1.42;color:#fff}
.sfb-band p{margin:18px auto 0;max-width:44ch;font-size:14px;line-height:2;color:#A29BA3;font-weight:300}
.sfb-band .row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ---------- breadcrumbs, shared by both page types ---------- */
.cat-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--sfb-cairo);font-size:10.5px;letter-spacing:.14em;color:var(--dim);
}
.cat-crumbs a{color:var(--mute);text-decoration:none;transition:color .3s ease}
.cat-crumbs a:hover{color:var(--red)}
.cat-crumbs [aria-current="page"]{color:var(--cream)}


/* ============================================================================
   CATEGORY ARCHIVE  ·  .sfb-cat
   ========================================================================== */

.sfb-cat .cat-head{
  position:relative;border-block-end:1px solid var(--line);
  padding:clamp(46px,7vw,86px) clamp(20px,5vw,52px) clamp(34px,5vw,58px);
  background:radial-gradient(ellipse 60% 150% at 50% 0%,rgba(222,34,39,.16),transparent 68%);
}
.sfb-cat .cat-head__in{max-width:1240px;margin:0 auto}
.sfb-cat .cat-head .tick{margin-top:26px}
.sfb-cat .cat-title{
  margin:0;font-family:var(--sfb-cairo);font-weight:600;
  font-size:clamp(28px,4.4vw,52px);line-height:1.32;color:#fff;
}
.sfb-cat .cat-desc{margin-top:22px;max-width:56ch;font-size:14px;line-height:2;color:#A29BA3;font-weight:300}
.sfb-cat .cat-desc p{margin:0 0 12px}
.sfb-cat .cat-count{
  display:flex;align-items:center;gap:10px;
  margin:24px 0 0;font-family:var(--sfb-cairo);font-size:11px;letter-spacing:.22em;color:var(--dim);
}
.sfb-cat .cat-count .n{
  font-size:13px;letter-spacing:.1em;color:var(--cream);
  padding-inline-start:10px;border-inline-start:1px solid var(--line);
}
.sfb-cat .cat-sec{padding-top:clamp(40px,6vw,68px)}

/* chips — the homepage's .col-filter, as links because these are real archives */
.cat-chips{display:flex;gap:6px;margin:0 0 34px;padding:0;list-style:none;flex-wrap:wrap}
.cat-chips a{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:9px 16px;
  border:1px solid var(--line);border-radius:999px;text-decoration:none;
  font-family:var(--sfb-cairo);font-size:12px;color:var(--mute);transition:.28s ease;
}
.cat-chips a:hover{color:var(--cream);border-color:#3A343E}
.cat-chips a[aria-current="page"]{background:var(--red);border-color:var(--red);color:#fff}
.cat-chips .n{font-family:var(--sfb-cairo);font-size:9.5px;letter-spacing:.1em;opacity:.72}

/* pagination */
.cat-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:48px}
.cat-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;
  padding:0 13px;border:1px solid var(--line);border-radius:2px;text-decoration:none;
  font-family:var(--sfb-cairo);font-size:12.5px;color:var(--mute);transition:.28s ease;
}
.cat-pager .page-numbers:hover{color:var(--cream);border-color:#3A343E}
.cat-pager .page-numbers.current{background:var(--red);border-color:var(--red);color:#fff}


/* ============================================================================
   SINGLE PRODUCT  ·  .sfb-prod
   ========================================================================== */

.sfb-prod .prod-top{
  max-width:1240px;margin:0 auto;
  padding:clamp(28px,4vw,46px) clamp(20px,5vw,52px) clamp(52px,7vw,88px);
}
.sfb-prod .prod-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,70px);
  align-items:start;margin-top:clamp(26px,4vw,46px);
}

/* ---------- gallery ---------- */
.prod-stage{
  position:relative;margin:0;aspect-ratio:1;display:grid;place-items:center;padding:9%;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 62%,rgba(222,34,39,.15),transparent 68%),var(--panel);
}
.prod-stage .prod-shot{
  max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.72));
  /* Only opacity moves during a swap — never width/height. */
  transition:opacity .32s ease;
}
.prod-stage.swapping .prod-shot{opacity:0}
.prod-badge{
  position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  font-family:var(--sfb-cairo);font-size:8.5px;font-weight:700;letter-spacing:.2em;
  background:var(--red);color:#fff;border-radius:999px;padding:5px 11px;
}
.prod-thumbs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-top:6px;
}
.prod-thumb{
  position:relative;padding:8%;aspect-ratio:1;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:0;
  display:grid;place-items:center;transition:border-color .28s ease,opacity .28s ease;opacity:.62;
}
.prod-thumb img{max-height:100%;width:auto;object-fit:contain}
.prod-thumb:hover{opacity:1;border-color:#3A343E}
.prod-thumb[aria-selected="true"]{opacity:1;border-color:var(--red)}

/* ---------- buy box ---------- */
.sfb-prod .prod-buy{position:sticky;top:calc(var(--sfb-nav-h,76px) + 22px)}
.sfb-prod .prod-title{
  margin:0;font-family:var(--sfb-cairo);font-weight:600;
  font-size:clamp(22px,2.9vw,35px);line-height:1.45;color:#fff;
}
.sfb-prod .prod-price{
  margin-top:26px;font-family:var(--sfb-cairo);font-size:clamp(22px,2.6vw,31px);color:#fff;
}
.sfb-prod .prod-price del{color:var(--dim);font-size:.56em;margin-inline-start:11px;font-weight:400}
.sfb-prod .prod-price ins{text-decoration:none;color:var(--red)}
.sfb-prod .prod-price .woocommerce-Price-currencySymbol{font-size:.6em;margin-inline-start:5px;color:var(--mute)}

.prod-stock{
  display:flex;align-items:center;gap:9px;margin:14px 0 0;
  font-family:var(--sfb-cairo);font-size:11px;letter-spacing:.16em;
}
.prod-stock .dot{width:7px;height:7px;border-radius:50%;flex:none}
.prod-stock.in{color:#8FBF9A}
.prod-stock.in .dot{background:#8FBF9A;box-shadow:0 0 10px rgba(143,191,154,.7)}
.prod-stock.out{color:var(--dim)}
.prod-stock.out .dot{background:var(--dim)}

.prod-short{margin-top:24px;font-size:14px;line-height:2.05;color:#A29BA3;font-weight:300}
.prod-short p{margin:0 0 12px}
.prod-short ul,.prod-short ol{margin:0 0 12px;padding-inline-start:20px}
.prod-short li{margin:0 0 7px}
.prod-short strong,.prod-short b{color:var(--cream);font-weight:700}

/* ---------- add to cart (classic form, repainted) ---------- */
.prod-cart{margin-top:30px}
.prod-cart form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:0}
.prod-cart .quantity{display:flex;align-items:stretch}
.prod-cart .quantity input[type="number"],
.prod-cart .qty{
  width:82px;height:52px;text-align:center;
  background:var(--panel);color:var(--cream);
  border:1px solid var(--line);border-radius:2px;
  font-family:var(--sfb-cairo);font-size:15px;
  -moz-appearance:textfield;appearance:textfield;
}
.prod-cart .quantity input[type="number"]::-webkit-outer-spin-button,
.prod-cart .quantity input[type="number"]::-webkit-inner-spin-button{opacity:.35}
.prod-cart .quantity label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.prod-cart button.single_add_to_cart_button,
.prod-cart .single_add_to_cart_button{
  flex:1 1 240px;min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 30px;
  background:var(--red);color:#fff;border:1px solid var(--red);border-radius:2px;
  font-family:var(--sfb-cairo);font-size:14px;font-weight:700;cursor:pointer;
  transition:background .3s ease,box-shadow .3s ease;
}
.prod-cart button.single_add_to_cart_button:hover{
  background:#c31b20;box-shadow:0 14px 40px -12px rgba(222,34,39,.95);
}
.prod-cart button.single_add_to_cart_button.disabled,
.prod-cart button.single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.prod-cart .stock.out-of-stock{
  margin:0;font-family:var(--sfb-cairo);font-size:12px;letter-spacing:.14em;color:var(--dim);
}
/* Variable products: the attribute table, if one ever appears. */
.prod-cart table.variations{width:100%;border-collapse:collapse;margin:0 0 14px}
.prod-cart table.variations th,.prod-cart table.variations td{padding:7px 0;text-align:start;vertical-align:middle}
.prod-cart table.variations label{font-size:13px;color:var(--mute)}
.prod-cart table.variations select{
  width:100%;min-height:46px;padding:0 12px;background:var(--panel);color:var(--cream);
  border:1px solid var(--line);border-radius:2px;font-family:var(--sfb-cairo);font-size:13px;
}

/* ---------- trust row ---------- */
.prod-trust{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.prod-trust__list{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none}
.prod-trust__list a{
  font-size:12.5px;color:var(--mute);text-decoration:none;
  border-block-end:1px solid transparent;transition:color .3s ease,border-color .3s ease;
}
.prod-trust__list a:hover{color:var(--cream);border-block-end-color:var(--red)}
.prod-pay{margin-top:20px}
.prod-pay__lbl{
  display:block;font-family:var(--sfb-cairo);font-size:9px;letter-spacing:.28em;color:var(--dim);margin-bottom:11px;
}
.prod-pay ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.prod-pay li{
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;
  border:1px solid var(--line);border-radius:2px;color:var(--mute);font-size:11px;
}
.prod-pay .sfb-pay__i{width:26px;height:16px;flex:none;color:var(--mute)}

/* ---------- notices ----------
   WooCommerce emits TWO shapes depending on version and context: the classic
   .woocommerce-message list item, and the block .wc-block-components-notice-banner
   that wc_print_notices() actually produced on this install when a product was
   added to the cart. Both are painted, because which one arrives is not ours to
   decide — and an unstyled banner on this palette is black text on a black page,
   i.e. a confirmation the customer never sees. */
.prod-notices:empty,.cat-notices:empty{display:none}
.prod-notices .woocommerce-notices-wrapper:empty,
.cat-notices .woocommerce-notices-wrapper:empty{display:none}

.prod-notices .woocommerce-message,.prod-notices .woocommerce-error,.prod-notices .woocommerce-info,
.cat-notices .woocommerce-message,.cat-notices .woocommerce-error,.cat-notices .woocommerce-info,
.prod-notices .wc-block-components-notice-banner,
.cat-notices .wc-block-components-notice-banner{
  display:flex;align-items:flex-start;gap:11px;
  list-style:none;margin:0 0 14px;padding:14px 18px;
  background:var(--panel);border:1px solid var(--line);border-inline-start:2px solid var(--red);
  border-radius:0;
  font-family:var(--sfb-cairo);font-size:13px;line-height:1.8;color:var(--cream);
}
.prod-notices .wc-block-components-notice-banner.is-success,
.cat-notices .wc-block-components-notice-banner.is-success{border-inline-start-color:#8FBF9A}
.prod-notices .wc-block-components-notice-banner > svg,
.cat-notices .wc-block-components-notice-banner > svg{
  /* The banner ships its glyph with no fill, so it inherits black — invisible
     here until currentColor is forced onto it. */
  width:19px;height:19px;flex:none;margin-top:2px;fill:currentColor;
}
.prod-notices .wc-block-components-notice-banner.is-success > svg,
.cat-notices .wc-block-components-notice-banner.is-success > svg{fill:#8FBF9A}
.prod-notices .wc-block-components-notice-banner__content,
.cat-notices .wc-block-components-notice-banner__content{flex:1 1 auto;min-inline-size:0}
.prod-notices a,.cat-notices a{color:var(--red)}
.prod-notices .button,.cat-notices .button,
.prod-notices .wc-forward,.cat-notices .wc-forward{
  display:inline-flex;align-items:center;justify-content:center;
  margin-inline-start:14px;padding:8px 16px;
  background:var(--red);color:#fff;border:1px solid var(--red);border-radius:2px;
  font-size:12px;font-weight:700;text-decoration:none;transition:.3s ease;
}
.prod-notices .button:hover,.cat-notices .button:hover,
.prod-notices .wc-forward:hover,.cat-notices .wc-forward:hover{background:#c31b20;color:#fff}

/* ---------- the 3D band ---------- */
.prod-3d{
  position:relative;border-block:1px solid var(--line);
  padding:clamp(56px,8vw,104px) clamp(20px,5vw,52px);
  background:radial-gradient(ellipse 46% 130% at 50% 100%,rgba(222,34,39,.2),transparent 66%),var(--panel);
  text-align:center;
}
.prod-3d__in{max-width:640px;margin:0 auto}
.prod-3d__in .tick{margin-bottom:15px}
.prod-3d h2{margin:0;font-family:var(--sfb-cairo);font-weight:600;font-size:clamp(24px,3.2vw,38px);line-height:1.4;color:#fff}
.prod-3d .sfb-hair{margin-inline:auto}
.prod-3d p{margin:20px auto 30px;max-width:46ch;font-size:14px;line-height:2;color:#A29BA3;font-weight:300}

/* ---------- the description (client copy — layout only, never content) ---- */
.prod-desc__body{
  margin-top:34px;max-width:78ch;font-size:14.5px;line-height:2.1;color:#A29BA3;font-weight:300;
}
.prod-desc__body > *:first-child{margin-top:0}
.prod-desc__body p{margin:0 0 16px}
.prod-desc__body h1,.prod-desc__body h2,.prod-desc__body h3,
.prod-desc__body h4,.prod-desc__body h5,.prod-desc__body h6{
  font-family:var(--sfb-cairo);font-weight:600;color:#fff;line-height:1.5;margin:34px 0 12px;
}
.prod-desc__body h1,.prod-desc__body h2{font-size:22px}
.prod-desc__body h3{font-size:18px}
.prod-desc__body h4,.prod-desc__body h5,.prod-desc__body h6{font-size:15.5px}
.prod-desc__body ul,.prod-desc__body ol{margin:0 0 18px;padding-inline-start:22px}
.prod-desc__body li{margin:0 0 9px}
.prod-desc__body li::marker{color:var(--red)}
.prod-desc__body strong,.prod-desc__body b{color:var(--cream);font-weight:700}
.prod-desc__body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prod-desc__body img{border:1px solid var(--line)}
.prod-desc__body blockquote{
  margin:22px 0;padding:16px 22px;border-inline-start:2px solid var(--red);background:var(--panel);
}
.prod-desc__body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:13.5px}
.prod-desc__body th,.prod-desc__body td{padding:11px 14px;border:1px solid var(--line);text-align:start}
.prod-desc__body th{background:var(--panel);color:var(--cream);font-weight:700}
.prod-desc__body iframe,.prod-desc__body video{max-width:100%}

/* ---------- reviews: WooCommerce's own markup, dark palette ----------
   assets/reviews.css is dequeued on this template (see catalog/loader.php);
   these rules replace it rather than fight it. */
.prod-reviews__body{margin-top:34px;max-width:820px}
.sfb-prod #reviews{font-size:14px;line-height:1.95;color:#A29BA3}
.sfb-prod #reviews h2,.sfb-prod #reviews h3{
  font-family:var(--sfb-cairo);font-weight:600;color:#fff;font-size:19px;line-height:1.5;margin:0 0 16px;
}
.sfb-prod .sfb-review-hello,.sfb-prod .woocommerce-noreviews{
  margin:0 0 22px;padding:16px 20px;background:var(--panel);
  border:1px solid var(--line);border-inline-start:2px solid var(--red);
  font-size:13.5px;line-height:1.95;color:var(--cream);
}
.sfb-prod .commentlist{list-style:none;margin:0 0 30px;padding:0}
.sfb-prod .commentlist .review{padding:20px 0;border-block-end:1px solid var(--line)}
.sfb-prod .comment_container{display:flex;gap:16px;align-items:flex-start}
.sfb-prod .commentlist .avatar{width:44px;height:44px;border-radius:50%;flex:none}
.sfb-prod .comment-text{flex:1 1 auto;min-inline-size:0}
.sfb-prod .woocommerce-review__author{font-family:var(--sfb-cairo);color:#fff;font-weight:600}
.sfb-prod .woocommerce-review__published-date{font-family:var(--sfb-cairo);font-size:10.5px;color:var(--dim)}
.sfb-prod .description{color:#A29BA3}
.sfb-prod .star-rating span::before,.sfb-prod p.stars a::before{color:var(--red)}
.sfb-prod .comment-form-rating label{display:block;font-size:12.5px;color:var(--mute);margin-bottom:8px}
.sfb-prod p.stars{display:flex;gap:6px}
.sfb-prod #review_form_wrapper{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.sfb-prod .comment-form label{display:block;font-size:12.5px;color:var(--mute);margin-bottom:7px}
.sfb-prod .comment-form input[type="text"],
.sfb-prod .comment-form input[type="email"],
.sfb-prod .comment-form textarea{
  width:100%;padding:12px 14px;background:var(--panel);color:var(--cream);
  border:1px solid var(--line);border-radius:2px;font-family:var(--sfb-cairo);font-size:13.5px;
}
.sfb-prod .comment-form textarea{min-height:130px;line-height:1.9;resize:vertical}
.sfb-prod .comment-form p{margin:0 0 16px}
.sfb-prod .comment-form .submit{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 30px;
  background:var(--red);color:#fff;border:1px solid var(--red);border-radius:2px;
  font-family:var(--sfb-cairo);font-size:13.5px;font-weight:700;cursor:pointer;transition:.3s ease;
}
.sfb-prod .comment-form .submit:hover{background:#c31b20;box-shadow:0 14px 40px -12px rgba(222,34,39,.95)}
.sfb-prod .comment-form-cookies-consent label{display:inline;margin-inline-start:8px}

/* ============================================================================
   RESPONSIVE
   The viewport meta comes from header.php, once — without it none of this
   fires and the phone renders at 980px. See CLAUDE.md.
   ========================================================================== */

@media (max-width:1100px){
  .col-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  .sfb-sec{padding:clamp(52px,11vw,80px) 20px}
  .sfb-head h2{font-size:22px;line-height:1.5}
  .tickerbar{padding:12px 0}
  .tickerbar .run span{font-size:9.5px;letter-spacing:.26em;gap:18px;padding-inline-end:18px}

  .col-grid{grid-template-columns:repeat(2,1fr)}

  .sfb-cat .cat-head{padding:34px 20px 30px}
  .sfb-cat .cat-title{font-size:clamp(23px,6.4vw,30px)}

  /* One column, gallery first: on a phone the picture is the pitch. */
  .sfb-prod .prod-grid{grid-template-columns:1fr;gap:30px}
  .sfb-prod .prod-buy{position:static}
  .sfb-prod .prod-top{padding:22px 20px 44px}
  .prod-stage{padding:7%}
  .prod-thumbs{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}

  .prod-cart form.cart{gap:8px}
  .prod-cart button.single_add_to_cart_button{flex:1 1 100%}
}

@media (max-width:520px){
  .col-grid{grid-template-columns:1fr}
  .sfb-band h2{font-size:23px}
  .prod-3d{padding:44px 20px}
}

/* Reduced motion: the reveal resolves instantly and the ticker stops.
   Nothing here is load-bearing, so removing it costs the page nothing. */
@media (prefers-reduced-motion:reduce){
  .sfb-page .rv.armed{opacity:1;transform:none;transition:none}
  .tickerbar .run{animation:none}
  .sfb-page *{transition-duration:.01ms !important}
}