/* Brand hero — scoped to .brand-hero only */
.brand-hero{position:relative;margin:0 0 var(--pad-d);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.brand-hero__scene{position:relative;margin:0;width:100%;aspect-ratio:16/9;min-height:0;background:var(--paper)}
.brand-hero__scene img{width:100%;height:100%;object-fit:cover;display:block}
.brand-hero__overlay{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:14px;max-width:min(560px,58%);padding:40px 44px;background:linear-gradient(to right,rgba(31,42,48,.82),rgba(31,42,48,.55) 62%,rgba(31,42,48,0));color:#fff}
.brand-hero__eyebrow{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#f0c9b4;font-weight:600}
.brand-hero h1{margin:0;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.12;color:#fff}
.brand-hero__lede{margin:0;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.88);max-width:42ch}
.brand-hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.brand-hero__btn{display:inline-block;font-size:.88rem;font-weight:600;padding:11px 20px;border-radius:999px;border:1px solid transparent;text-align:center;transition:background .15s,color .15s,border-color .15s}
.brand-hero__btn--primary{background:var(--accent);color:#fff}
.brand-hero__btn--primary:hover{background:#a8461f;color:#fff}
.brand-hero__btn--ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55)}
.brand-hero__btn--ghost:hover{background:rgba(255,255,255,.22);color:#fff;border-color:#fff}
.brand-hero__caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 18px;font-size:.78rem;line-height:1.4;color:#fff;background:linear-gradient(to top,rgba(31,42,48,.82),rgba(31,42,48,0))}
.brand-hero__card{position:absolute;right:24px;bottom:24px;width:min(320px,42%);background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(31,42,48,.18)}
.brand-hero__product{display:flex;gap:14px;align-items:center;padding:12px;border-radius:var(--radius);color:var(--ink)}
.brand-hero__product:hover{color:var(--ink)}
.brand-hero__product:hover .brand-hero__product-name{color:var(--accent)}
.brand-hero__product-media{flex:0 0 84px;width:84px;height:104px;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.brand-hero__product-media img{width:100%;height:100%;object-fit:contain}
.brand-hero__product-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand-hero__product-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--accent)}
.brand-hero__product-name{font-size:.9rem;font-weight:600;line-height:1.3;transition:color .15s}
.brand-hero__product-desc{font-size:.78rem;color:var(--muted);line-height:1.4}
.brand-hero__product-sku{font-size:.68rem;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media (max-width:960px){
  .brand-hero__scene{aspect-ratio:4/3}
  .brand-hero__overlay{max-width:70%;padding:30px 28px;background:linear-gradient(to right,rgba(31,42,48,.84),rgba(31,42,48,.5) 70%,rgba(31,42,48,0))}
  .brand-hero__card{position:static;width:auto;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
  .brand-hero__product{padding:16px 20px}
}
@media (max-width:760px){
  .brand-hero{margin-bottom:var(--pad-m)}
  .brand-hero__scene{aspect-ratio:3/4}
  .brand-hero__overlay{max-width:none;justify-content:flex-end;padding:24px 18px 56px;background:linear-gradient(to top,rgba(31,42,48,.88),rgba(31,42,48,.45) 55%,rgba(31,42,48,.05))}
  .brand-hero__lede{font-size:.92rem}
  .brand-hero__actions{flex-direction:column;align-items:stretch}
  .brand-hero__btn{width:100%}
  .brand-hero__caption{font-size:.72rem;padding:12px 14px}
  .brand-hero__product{align-items:flex-start;padding:14px 16px}
  .brand-hero__product-media{flex-basis:72px;width:72px;height:90px}
}
@media (max-width:420px){
  .brand-hero__scene{aspect-ratio:1/1}
  .brand-hero__overlay{padding:20px 14px 50px}
  .brand-hero__product{flex-direction:column;align-items:stretch}
  .brand-hero__product-media{width:100%;height:120px}
}
/* Siprolla isolated visual QA fix 2026-11-12. */
/* ============================================================
   Additive overrides — loaded after existing theme CSS
   1) Hero text contrast at all widths <=960px (incl. top of overlay)
   2) Desktop nav button: keep "Shop by Type" on one line
   3) Desktop/tablet nav: reserve content width so nav never
      overlaps the search field
   4) Small screens (<=420px): taller hero scene so the eyebrow
      and all hero content fit without clipping
   ============================================================ */

/* ---------- 1) Hero text contrast (<=960px) ---------- */
/* Single background linear-gradient only (no background-color, no
   separate background-image). Every stop uses rgba(31,42,48,alpha)
   with alpha in the .74–.80 range, so the photo stays considerably
   more visible than with the previous stacked layers. Against pure
   white, .74 already yields 6.28:1 for white text. Layout, sizing,
   card, links and breakpoints are untouched. */
@media (max-width: 960px) {
  .brand-hero__overlay {
    background: linear-gradient(
      to right,
      rgba(31, 42, 48, .80),
      rgba(31, 42, 48, .76) 60%,
      rgba(31, 42, 48, .74)
    );
  }
  .brand-hero__lede {
    color: #ffffff;
  }
}

@media (max-width: 760px) {
  .brand-hero__overlay {
    background: linear-gradient(
      to top,
      rgba(31, 42, 48, .80),
      rgba(31, 42, 48, .77) 55%,
      rgba(31, 42, 48, .74)
    );
  }
}

@media (max-width: 420px) {
  .brand-hero__overlay {
    background: linear-gradient(
      to top,
      rgba(31, 42, 48, .80),
      rgba(31, 42, 48, .77) 55%,
      rgba(31, 42, 48, .74)
    );
  }
}

/* ---------- 4) Small screens: taller hero scene ---------- */
/* At <=420px the original square scene is too short and clips the
   eyebrow above the top of the overlay. A 10/11 aspect ratio gives
   enough scene height for the eyebrow, heading, lede, buttons and
   caption without clipping or overlap. Image, copy, links and
   controls are unchanged. */
@media (max-width: 420px) {
  .brand-hero__scene {
    aspect-ratio: 10 / 11;
  }
}

/* QA: maintain small eyebrow contrast against bright images. */
@media (max-width: 960px) { .brand-hero__eyebrow { color: #ffe0ce; } }