/* ===========================================================
   ESPECIAS LA FAMA — design system
   Bold & bright. Saturated red + gold/ochre. Cream paper.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  /* brand */
  --red:        #E11B22;
  --red-deep:   #B0121A;
  --red-ink:    #6E0B12;
  --gold:       #E6A52C;
  --gold-deep:  #C67E22;
  --ochre:      #A85C1E;

  /* neutrals (warm) */
  --paper:      #FBF3E7;
  --paper-2:    #F4E7D3;
  --cream:      #FFFBF5;
  --ink:        #2A1712;
  --ink-soft:   #5C463C;
  --line:       #E7D5Bd;

  --white:      #ffffff;

  /* type */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans:    'Archivo', system-ui, sans-serif;

  /* layout */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 22px;
  --radius-sm: 12px;

  --shadow-sm: 0 2px 8px rgba(110,11,18,.06);
  --shadow:    0 18px 50px -22px rgba(110,11,18,.35);
  --shadow-red:0 22px 50px -20px rgba(225,27,34,.55);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
button, [role="button"], a[href], select, summary, label[for]{ cursor:pointer; }
::selection{ background:var(--gold); color:var(--ink); }

/* ---------- layout helpers ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(56px,8vw,120px); }
.section--tight{ padding-block:clamp(36px,5vw,64px); }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }

/* ---------- typography ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.02em; margin:0; color:var(--ink); }
.display{ font-size:clamp(2.7rem, 7.2vw, 6.2rem); line-height:.95; letter-spacing:-.035em; }
.h-xl{ font-size:clamp(2.1rem, 4.6vw, 3.9rem); }
.h-lg{ font-size:clamp(1.7rem, 3.2vw, 2.7rem); }
.h-md{ font-size:clamp(1.35rem, 2.2vw, 1.8rem); }
p{ margin:0 0 1em; text-wrap:pretty; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.32rem); color:var(--ink-soft); line-height:1.55; }
.muted{ color:var(--ink-soft); }

/* eyebrow / label */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:700;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); display:inline-block; }
.eyebrow--center::before{ display:none; }
.eyebrow.on-red{ color:#ffe9c7; }
.eyebrow.on-red::before{ background:#ffe9c7; }

.script{ font-family:var(--display); font-style:italic; font-weight:600; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--red); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-weight:700; font-size:1rem; letter-spacing:.01em;
  padding:.92em 1.6em; border-radius:999px; border:2px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--red{ background:var(--red); color:#fff; box-shadow:var(--shadow-red); }
.btn--red:hover{ background:var(--red-deep); }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-deep); color:#fff; }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--white{ background:#fff; color:var(--red); }
.btn--white:hover{ background:#fff; color:var(--red-deep); }
.btn--outline-white{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn--outline-white:hover{ background:#fff; color:var(--red); border-color:#fff; }
.btn--lg{ padding:1.08em 2em; font-size:1.08rem; }
.btn--sm{ padding:.62em 1.1em; font-size:.9rem; }
.btn .arr{ transition:transform .2s ease; }
.btn:hover .arr{ transform:translateX(3px); }

/* ---------- tags / chips ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); background:rgba(225,27,34,.09);
  padding:.4em .8em; border-radius:999px;
}
.tag--gold{ color:var(--ochre); background:rgba(230,165,44,.16); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,243,231,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar{
  background:var(--ink); color:#f4e7d3;
  font-size:.82rem; letter-spacing:.02em;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; padding-block:6px; }
.topbar a{ color:#f4e7d3; opacity:.85; }
.topbar a:hover{ opacity:1; color:var(--gold); }
.topbar-left{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.topbar-left .ti{ display:inline-flex; align-items:center; gap:.5em; }
.topbar-left svg{ width:14px; height:14px; color:var(--gold); }
.topbar-tag{ display:none; }
@media(min-width:760px){ .topbar-tag{ display:inline; opacity:.6; } }

.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:74px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:46px; height:auto; filter:drop-shadow(0 3px 6px rgba(110,11,18,.25)); }
.brand-name{ display:flex; flex-direction:column; line-height:1; }
.brand-name .b1{ font-family:var(--display); font-weight:800; font-size:1.32rem; color:var(--red); letter-spacing:-.02em; }
.brand-name .b2{ font-family:var(--sans); font-weight:600; font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  font-weight:600; font-size:.96rem; color:var(--ink); padding:.5em .8em; border-radius:999px;
  position:relative; transition:color .15s, background .15s;
}
.nav a:hover{ color:var(--red); }
.nav a.active{ color:var(--red); }
.nav a.active::after{
  content:""; position:absolute; left:.8em; right:.8em; bottom:.18em; height:2px; background:var(--gold); border-radius:2px;
}
.nav-actions{ display:flex; align-items:center; gap:12px; }

.lang{ display:inline-flex; align-items:center; gap:2px; }
.lang button{
  border:0; background:transparent; padding:.3em .4em; font-weight:700; font-size:.88rem; color:var(--ink-soft); letter-spacing:.06em; cursor:pointer; transition:color .15s;
}
.lang button:hover{ color:var(--red); }
.lang button.on{ color:var(--red); }
.lang-sep{ color:var(--line); font-weight:400; user-select:none; }

.burger{ display:none; border:0; background:transparent; padding:8px; }
.burger span{ display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; margin:4px 0; transition:.25s; }

@media(max-width:900px){
  .nav, .nav-actions .btn{ display:none; }
  .burger{ display:block; }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:100; visibility:hidden; pointer-events:none;
}
.drawer.open{ visibility:visible; pointer-events:auto; }
.drawer-scrim{ position:absolute; inset:0; background:rgba(42,23,18,.5); opacity:0; transition:.25s; }
.drawer.open .drawer-scrim{ opacity:1; }
.drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw,340px);
  background:var(--paper); padding:24px; transform:translateX(100%); transition:.28s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow);
}
.drawer.open .drawer-panel{ transform:none; }
.drawer-panel a{ font-family:var(--display); font-weight:700; font-size:1.4rem; padding:.5em 0; border-bottom:1px solid var(--line); }
.drawer-close{ align-self:flex-end; border:0; background:transparent; font-size:1.6rem; color:var(--ink); margin-bottom:8px; }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--paper); overflow:hidden; }
.hero-spices{ position:absolute; inset:0; z-index:0; opacity:.5;
  background:
    radial-gradient(34% 40% at 88% 12%, rgba(230,165,44,.5), transparent 70%),
    radial-gradient(40% 46% at 6% 88%, rgba(225,27,34,.22), transparent 70%);
}

/* paprika texture blob used as decorative imagery backing */
.spice-field{
  background:
    radial-gradient(circle at 20% 30%, #f0a35a 0 14%, transparent 16%),
    radial-gradient(circle at 70% 22%, #d8431f 0 10%, transparent 12%),
    radial-gradient(circle at 82% 70%, #e8862a 0 16%, transparent 18%),
    radial-gradient(circle at 38% 78%, #b3141a 0 12%, transparent 14%),
    linear-gradient(135deg,#e35a22,#b0121a);
}

/* ---------- generic surfaces ---------- */
.band-red{ background:var(--red); color:#fff; }
.band-red h1,.band-red h2,.band-red h3{ color:#fff; }
.band-ink{ background:var(--ink); color:#f4e7d3; }
.band-ink h1,.band-ink h2,.band-ink h3{ color:#fff; }
.band-cream{ background:var(--cream); }
.band-paper2{ background:var(--paper-2); }

/* big rounded promo band (echo of original) */
.promo{
  border-radius:var(--radius); background:var(--red); color:#fff;
  padding:clamp(36px,5vw,64px) var(--gut); text-align:center; box-shadow:var(--shadow-red);
  position:relative; overflow:hidden;
}
.promo::after{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background:radial-gradient(60% 120% at 100% 0,#fff,transparent 55%);
}
.promo h2{ color:#fff; position:relative; }

/* ---------- cards ---------- */
.card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .25s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

.grid{ display:grid; gap:clamp(18px,2.4vw,30px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:960px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* product card */
.prod-card{ display:flex; flex-direction:column; }
.prod-card .ph{ aspect-ratio:4/3; width:100%; }
.prod-card .body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.prod-card .cat{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.prod-card h3{ font-size:1.4rem; }
.prod-card .formats{ color:var(--ink-soft); font-size:.96rem; }
.prod-card .row{ margin-top:auto; padding-top:12px; display:flex; gap:10px; align-items:center; }

/* category teaser */
.cat-card{ position:relative; display:flex; flex-direction:column; }
.cat-card .ph, .cat-card img{ width:100%; height:220px; object-fit:cover; aspect-ratio:auto; }
.cat-card .body{ padding:22px; }
.cat-card h3{ font-size:1.7rem; margin-bottom:.25em; }

/* image placeholder slot styling (image-slot or .ph) */
image-slot, .ph{
  display:block; border-radius:0; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(176,18,26,.07) 0 10px, rgba(230,165,44,.09) 10px 20px),
    var(--paper-2);
  position:relative;
}
.ph{ width:100%; height:100%; }
.ph-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.72rem; letter-spacing:.06em;
  color:var(--ochre); padding:14px; text-transform:uppercase;
}
.ph--rounded{ border-radius:var(--radius); }

/* feature/value icons */
.feat{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.feat .ic{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; background:rgba(225,27,34,.1); color:var(--red); }
.feat .ic svg{ width:28px; height:28px; }
.feat h4{ font-size:1.05rem; }
.feat p{ font-size:.92rem; color:var(--ink-soft); margin:0; }

/* stat */
.stat .n{ font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; color:#fff; }
.stat .l{ font-size:.92rem; color:#ffe9c7; margin-top:6px; }

/* marquee */
.marquee{ overflow:hidden; border-block:2px solid var(--ink); background:var(--gold); }
.marquee-track{ display:flex; gap:0; white-space:nowrap; animation:marq 26s linear infinite; }
.marquee-track span{ font-family:var(--display); font-weight:800; font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); padding:14px 26px; display:inline-flex; align-items:center; gap:26px; }
.marquee-track span::after{ content:"✦"; color:var(--red); font-size:1rem; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-weight:700; font-size:.86rem; color:var(--ink); letter-spacing:.01em; }
.field .req{ color:var(--red); }
.input, .select, .textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--cream); border:1.6px solid var(--line); border-radius:12px;
  padding:.82em 1em; width:100%; transition:border-color .15s, box-shadow .15s; appearance:none;
}
.input:focus,.select:focus,.textarea:focus{ outline:0; border-color:var(--red); box-shadow:0 0 0 4px rgba(225,27,34,.12); }
.textarea{ min-height:120px; resize:vertical; }
.select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A85C1E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.82rem; color:var(--ink-soft); }

/* buy band (reusable “¿Quieres comprar?”) */
.buy{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.buy::before{ content:""; position:absolute; right:-10%; top:-30%; width:50%; height:160%; background:radial-gradient(circle,rgba(225,27,34,.5),transparent 70%); }
.buy::after{ content:""; position:absolute; left:-8%; bottom:-40%; width:40%; height:140%; background:radial-gradient(circle,rgba(230,165,44,.32),transparent 70%); }
.buy .container{ position:relative; z-index:1; }
.buy-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,72px); align-items:center; }
@media(max-width:900px){ .buy-grid{ grid-template-columns:1fr; } }
.buy h2{ color:#fff; }
.buy .lead{ color:#e9d8c5; }
.buy .form-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:clamp(22px,3vw,32px); backdrop-filter:blur(4px); }
.buy .field label{ color:#f4e7d3; }
.buy .input,.buy .select,.buy .textarea{ background:rgba(255,255,255,.95); border-color:transparent; }
.buy .form-note{ color:#cdbcae; }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:120; display:none; }
.modal.open{ display:block; }
.modal-scrim{ position:absolute; inset:0; background:rgba(42,23,18,.6); backdrop-filter:blur(3px); }
.modal-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,92vw); max-height:90vh; overflow:auto;
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
  animation:pop .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{ from{ opacity:0; transform:translate(-50%,-46%) scale(.96);} }
.modal-head{ background:var(--red); color:#fff; padding:22px 26px; border-radius:var(--radius) var(--radius) 0 0; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.modal-head h3{ color:#fff; font-size:1.5rem; }
.modal-head .sub{ font-size:.86rem; color:#ffe1c2; margin-top:2px; }
.modal-close{ border:0; background:rgba(255,255,255,.18); color:#fff; width:34px; height:34px; border-radius:999px; font-size:1.2rem; flex:none; line-height:1; }
.modal-close:hover{ background:rgba(255,255,255,.32); }
.modal-body{ padding:26px; }
.modal .prod-chip{ display:flex; align-items:center; gap:14px; background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:20px; }
.modal .prod-chip .sw{ width:46px; height:46px; border-radius:10px; flex:none; }
.modal .prod-chip b{ font-size:1.02rem; }
.modal .prod-chip span{ font-size:.84rem; color:var(--ink-soft); }

.form-success{ text-align:center; padding:18px 6px; }
.form-success .check{ width:64px; height:64px; border-radius:999px; background:rgba(34,160,90,.14); color:#1f9d55; display:grid; place-items:center; margin:0 auto 14px; }
.form-success .check svg{ width:34px; height:34px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#e9d8c5; }
.footer-main{ padding-block:clamp(48px,6vw,80px); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:40px; }
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h5{ font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; }
.footer-grid a{ color:#e9d8c5; opacity:.86; display:inline-block; padding:4px 0; font-size:.96rem; }
.footer-grid a:hover{ opacity:1; color:var(--gold); }
.f-brand img{ width:64px; margin-bottom:14px; }
.f-brand .b1{ font-family:var(--display); font-weight:800; font-size:1.5rem; color:#fff; }
.f-brand p{ color:#cdbcae; font-size:.95rem; max-width:30ch; }
.foot-contact div{ margin-bottom:12px; }
.foot-contact .k{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }
.social{ display:flex; gap:10px; margin-top:6px; }
.social a{ width:38px; height:38px; border-radius:999px; background:rgba(255,255,255,.08); display:grid; place-items:center; opacity:1; }
.social a:hover{ background:var(--red); }
.social svg{ width:18px; height:18px; }
.eu-strip{ border-top:1px solid rgba(255,255,255,.1); padding-block:20px; }
.eu-strip .container{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between; }
.eu-note{ font-size:.74rem; color:#b8a797; max-width:62ch; line-height:1.4; }
.eu-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.eu-badge{ font-size:.62rem; font-weight:700; letter-spacing:.06em; color:#cdbcae; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:8px; text-transform:uppercase; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom .container{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between; padding-block:18px; }
.footer-bottom a{ color:#b8a797; font-size:.84rem; }
.footer-bottom a:hover{ color:var(--gold); }
.footer-bottom .copy{ color:#9c8b7d; font-size:.84rem; }

/* ---------- misc utility ---------- */
.divider-dot{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--gold); }
.divider-dot::before,.divider-dot::after{ content:""; height:2px; width:48px; background:var(--line); }
.rotate-stamp{ transform:rotate(-7deg); }
.maxw-prose{ max-width:62ch; }
.hidden{ display:none !important; }
.fade-up{ opacity:0; transform:translateY(22px); }
.fade-up.is-visible{ opacity:1; transform:none; transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
@media(prefers-reduced-motion:reduce){ .fade-up{ opacity:1 !important; transform:none !important; } }

/* ---------- hero (home) ---------- */
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; padding-block:clamp(48px,7vw,96px); }
@media(max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-copy .display{ margin:.22em 0 .3em; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero-trust{ display:flex; gap:24px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.hero-trust .t .n{ font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--red); line-height:1; }
.hero-trust .t .l{ font-size:.82rem; color:var(--ink-soft); }
.hero-art{ position:relative; }
.hero-art .frame{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; }
.hero-art image-slot{ width:100%; height:100%; }
.hero-stamp{ position:absolute; width:128px; height:auto; bottom:-26px; left:-26px; filter:drop-shadow(0 10px 22px rgba(110,11,18,.4)); }
@media(max-width:920px){ .hero-stamp{ width:96px; bottom:-18px; left:8px; } }
.hero-burst{ position:absolute; z-index:-1; width:120%; height:120%; top:-10%; right:-18%; border-radius:50%; opacity:.18; filter:blur(8px); }

/* section heading helper */
.sec-head{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; margin-bottom:clamp(30px,4vw,52px); }
.sec-head.left{ align-items:flex-start; text-align:left; }
.sec-head p{ max-width:54ch; margin:0; }

/* split layout */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.split.narrow{ grid-template-columns:1.1fr .9fr; }
@media(max-width:860px){ .split,.split.narrow{ grid-template-columns:1fr; } }
.split .media{ position:relative; }
.split .media image-slot,.split .media .ph{ width:100%; aspect-ratio:4/5; border-radius:var(--radius); }
.split .media.wide image-slot,.split .media.wide .ph{ aspect-ratio:4/3; }

/* heritage label frame (vintage) */
.label-frame{ border:8px solid var(--gold); border-radius:14px; background:var(--cream); padding:8px; box-shadow:var(--shadow); }
.label-frame image-slot,.label-frame .ph{ aspect-ratio:9/16; border-radius:6px; }

/* ---------- inner page head ---------- */
.page-head{ position:relative; padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,44px); text-align:center; background:var(--paper); overflow:hidden; }
.page-head .display, .page-head h1{ font-size:clamp(2.6rem,6vw,4.6rem); }
.page-head .lead{ margin-inline:auto; max-width:58ch; }
.page-head .crumbs{ justify-content:center; margin-bottom:18px; }

/* category row */
.cat-row{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.cat-row .media image-slot,.cat-row .media .ph{ width:100%; aspect-ratio:5/8; border-radius:var(--radius); }
.cat-row:nth-child(even) .media{ order:2; }
@media(max-width:820px){ .cat-row{ grid-template-columns:1fr; } .cat-row:nth-child(even) .media{ order:0; } }
.cat-row .num{ font-family:var(--display); font-weight:800; font-size:1rem; color:var(--gold-deep); letter-spacing:.1em; }

/* product detail */
.product-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:start; }
@media(max-width:860px){ .product-grid{ grid-template-columns:1fr; } }
.gallery-main image-slot,.gallery-main .ph{ width:100%; aspect-ratio:1/1; border-radius:var(--radius); }
.thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.thumbs image-slot,.thumbs .ph{ width:100%; aspect-ratio:1/1; border-radius:12px; cursor:pointer; border:2px solid transparent; }
.prod-info .price-note{ display:inline-flex; align-items:center; gap:8px; background:rgba(230,165,44,.16); color:var(--ochre); font-weight:700; font-size:.86rem; padding:.5em .9em; border-radius:999px; }
.spec-list{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.spec-list li{ display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); }
.spec-list li .k{ color:var(--ink-soft); font-weight:600; }
.spec-list li .v{ font-weight:700; text-align:right; }
.format-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.format-chip{ border:1.6px solid var(--line); border-radius:12px; padding:.6em 1em; font-weight:700; background:var(--cream); white-space:nowrap; }

/* breadcrumb */
.crumbs{ display:flex; gap:8px; align-items:center; font-size:.86rem; color:var(--ink-soft); flex-wrap:wrap; }
.crumbs a:hover{ color:var(--red); }
.crumbs .sep{ color:var(--gold); }