/* ============================================================
   RALEA EMPIRE — Brand stylesheet
   Palette: deep purple (royalty/cozy), soft white, minimal gold/blush
   Fonts: display = geometric rounded sans | script = warm handwritten
          body = clean readable sans
   Mobile-first. Accessible contrast.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&family=Caveat:wght@500;600;700&display=swap');

:root{
  --purple:#2E1A47;          /* brand deep purple */
  --purple-700:#3B2359;
  --purple-900:#241238;
  --purple-tint:#F3EFF8;     /* very light lilac for soft blocks */
  --soft-white:#FBFAF7;      /* warm soft white background */
  --white:#FFFFFF;
  --ink:#2A2233;             /* body text, near-black purple */
  --ink-soft:#5C5470;
  --gold:#C7A76B;            /* metallic grey-gold accent (minimal) */
  --gold-deep:#846625;       /* TEXT gold: clears 4.5:1 on soft-white/white */
  --gold-mid:#A9863F;        /* mid gold for rules/borders (non-text) */
  --blush:#E9CFC7;           /* warm blush accent (minimal) */
  --line:#E7E2EC;
  --line-strong:#D8D0E0;
  --ok:#1E7A4C;

  /* --- Redesign: geometry, elevation, rhythm ------------------- */
  --radius:20px;
  --radius-sm:12px;
  --radius-lg:28px;
  /* Layered elevation: each level = contact + ambient shadow pair.
     Restraint over decoration — depth reads as material, not garnish. */
  --e1:0 1px 2px rgba(46,26,71,.05), 0 3px 10px rgba(46,26,71,.05);
  --e2:0 2px 4px rgba(46,26,71,.05), 0 10px 26px rgba(46,26,71,.09);
  --e3:0 4px 8px rgba(46,26,71,.06), 0 20px 48px rgba(46,26,71,.15);
  --shadow:var(--e2);
  --shadow-hover:var(--e3);
  /* 8pt spacing scale — rhythm comes from a shared unit, not ad-hoc values */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px; --s7:80px;
  /* Optical type scale (display uses tighter tracking + leading) */
  --track-display:-.028em;
  --track-label:.12em;
  --maxw:1180px;
  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-script:'Caveat','Segoe Script',cursive;
}

*,*::before,*::after{box-sizing:border-box}
figure{margin:0}
html{scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;
  background:#241238;min-height:100%;
  overscroll-behavior-x:none;
  scrollbar-width:thin;scrollbar-color:var(--purple-700) transparent}
html,body{overflow-x:hidden;max-width:100%;width:100%;margin:0;padding:0;border:0;min-width:0}
body{
  margin:0;background:var(--soft-white);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple);text-decoration:none}
a:hover{color:var(--purple-700)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--purple);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem);font-weight:800;letter-spacing:var(--track-display);line-height:1.06}
h2{font-size:clamp(1.55rem,3.6vw,2.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.14}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.script{font-family:var(--font-script);font-weight:600;color:var(--purple-700);
  font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.2}
.script svg{display:inline-block;vertical-align:-2px;width:18px;height:18px;max-width:18px;max-height:18px;
  margin-left:6px;color:var(--gold);flex:0 0 auto}
.eyebrow{font-family:var(--font-script);color:var(--gold-deep);font-weight:600;font-size:1.3rem;
  display:block;margin-bottom:.2rem}
/* Long-form copy: a measure cap keeps line length in the comfortable
   reading range on wide screens (avoids full-width 110-char lines). */
.measure{max-width:62ch}
.lede{font-size:1.08rem;color:var(--ink-soft);line-height:1.7}
.muted{color:var(--ink-soft)}
.center{text-align:center}
/* Centered long paragraphs hurt readability: keep them centered only for
   short intro blurbs, and let multi-line body copy sit left. */
.center p,.section-head p{text-align:left;max-width:58ch;margin-inline:auto}
.section-head.center .script,.cta-band .script{text-align:center}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
/* Grid/flex children default to min-width:auto, so an unbreakable token
   (a long e-mail address) pushes the whole page wider than the viewport.
   Let tracks shrink, and let long words break instead of forcing scroll. */
.grid-products>*,.contact-grid>*,.pd-grid>*,.cols>*,.footer-grid>*{min-width:0}
p,li,h1,h2,h3,h4,span,dd,dt,address,a{overflow-wrap:break-word;word-break:break-word}
section{padding:clamp(48px,7vw,88px) 0}
/* Page intro blocks sit closer to the header so value is visible sooner —
   generous negative space, but not at the cost of pushing content off-screen. */
.page-head{padding:clamp(34px,4.5vw,54px) 0 clamp(22px,3vw,32px)}
.page-head+.section-tight,.section-tight{padding-top:clamp(20px,3vw,32px)}
/* First intro block on inner pages: tighter top, so products/forms reach the fold */
.page-head-intro{padding-top:clamp(28px,3.6vw,44px)!important}
.skip-link{position:absolute;left:-999px;top:0;background:var(--purple);color:#fff;padding:12px 18px;z-index:1000;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Custom scrollbar for WebKit browsers (matches Firefox scrollbar-width) */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(46,26,71,.28);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(46,26,71,.5)}

/* Cross-browser interactive tap response (eliminates 300ms mobile tap delay) */
button,.btn,.chip,.opt,.cart-btn,.nav-toggle,.qty button{touch-action:manipulation}

/* Firefox button focus outline reset */
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border:0;padding:0}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease,background .2s ease,color .2s ease,border-color .2s ease;
  text-align:center;letter-spacing:.005em;
}
.btn:active{transform:scale(.97)!important}
.chip:active{transform:scale(.96)!important}
.opt:active{transform:scale(.96)!important}
.cart-btn:active{transform:scale(.93)!important}
.btn-primary{background:var(--purple);color:#fff;box-shadow:var(--e1)}
.btn-primary:hover{background:var(--purple-700);color:#fff;transform:translateY(-2px);box-shadow:var(--e3)}
.btn-gold{background:var(--gold);color:#3a2c12;box-shadow:0 2px 4px rgba(169,134,63,.18),0 8px 22px rgba(169,134,63,.22)}
.btn-gold:hover{background:#b8975c;color:#3a2c12;transform:translateY(-2px);box-shadow:0 4px 8px rgba(169,134,63,.22),0 16px 34px rgba(169,134,63,.3)}
.btn-outline{background:transparent;color:var(--purple);border-color:var(--line-strong)}
.btn-outline:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-outline:hover{background:var(--purple);color:#fff;border-color:var(--purple);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--purple);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--purple)}
.btn-glass{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.btn-glass:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btn-block{width:100%}
.btn-lg{padding:17px 34px;font-size:1.05rem}
.btn-sm{padding:9px 16px;font-size:.9rem}
/* On dark surfaces the outline button must invert for contrast */
.btn-onDark{border-color:rgba(255,255,255,.72);color:#fff;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-onDark:hover{background:#fff;color:var(--purple);border-color:#fff}
/* Guarantee touch targets meet the 44px minimum on small screens */
@media(max-width:600px){.btn{min-height:48px}}

/* ---------------- Header ---------------- */
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:200;background:var(--purple);color:#fff;
  box-shadow:0 4px 22px rgba(46,26,71,.25);
  width:100%;margin-inline:0;
  padding-left:constant(safe-area-inset-left);padding-left:env(safe-area-inset-left);
  padding-right:constant(safe-area-inset-right);padding-right:env(safe-area-inset-right)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin:0 auto;padding:12px 20px}
.brand{flex:0 0 auto}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.header-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.cart-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;color:#fff;border-radius:50%;transition:background .2s ease}
.cart-btn:hover{background:rgba(255,255,255,.12)}
.cart-btn svg{width:22px;height:22px}
.cart-count{position:absolute;top:2px;right:2px;background:var(--gold);color:#2b2109;
  font-family:var(--font-display);font-weight:700;font-size:.70rem;border-radius:999px;
  min-width:19px;height:19px;display:grid;place-items:center;padding:0 4px;line-height:1}
.nav-cart-item{display:none}
@media(max-width:900px){
  .nav-cart-item{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;padding:10px 14px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:999px;margin-top:10px}
  .nav-cart-item svg{width:18px;height:18px;color:var(--gold)}
  .cart-count-pill{background:var(--gold);color:#2b2109;font-size:.72rem;font-weight:700;border-radius:999px;padding:2px 7px}
}
/* LOGO RALEA — PNG lutsinar (header) */
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand .brand-logo{display:block;height:64px;width:auto;max-width:240px;object-fit:contain}
.brand-text{line-height:1}
.brand-wordmark{font-family:var(--font-display);font-weight:800;font-size:1.6rem;
  letter-spacing:.14em;color:#fff}
.brand-tagline{font-family:var(--font-script);font-weight:600;font-size:1.05rem;
  color:var(--blush);display:block;margin-top:-2px}

.nav{display:flex;align-items:center;gap:30px}
.nav a{color:#EFE9F5;font-family:var(--font-display);font-weight:500;font-size:.97rem;
  position:relative;padding:6px 2px;transition:color .2s ease}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
/* Active cue: a real gold rule under the item, not a faint underline */
.nav a[aria-current="page"]::after{content:"";position:absolute;left:2px;right:2px;bottom:-2px;
  height:2px;border-radius:2px;background:var(--gold)}
@media(min-width:901px){.nav a::after{content:"";position:absolute;left:2px;right:2px;bottom:-2px;
  height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.nav a:hover::after{transform:scaleX(1)}}
.cart-link{position:relative}
.cart-count{position:absolute;top:-9px;right:-14px;background:var(--gold);color:#2b2109;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;border-radius:999px;
  min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px}

.nav-toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2.5px;background:#fff;border-radius:2px;transition:.25s}
@media(max-width:900px){
  .header-actions{margin-left:auto}
  .nav{position:fixed;inset:0 0 0 auto;width:min(82vw,320px);background:var(--purple-900);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    padding:96px 26px;gap:22px;transform:translateX(100%);transition:transform .3s ease;
    box-shadow:-10px 0 40px rgba(0,0,0,.3)}
  .nav.open{transform:translateX(0)}
  .nav a{font-size:1.15rem}
  .nav-toggle{display:inline-flex;z-index:300}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .brand .brand-logo{height:52px}
}
@media(min-width:901px){.nav-toggle{display:none}}

/* ---------------- Hero ----------------
   Full-bleed photography (the work itself is the interface) with a
   controlled gradient scrim so the headline always clears contrast,
   whatever the photo behind it. Geometry echoes laser-cut negative space. */
.hero{background:var(--purple-900);color:#fff;padding:0;position:relative;overflow:hidden;isolation:isolate;width:100%;margin-inline:0}
.hero-grid{display:grid;gap:0;grid-template-columns:1fr;position:relative;min-height:clamp(520px,72vh,720px)}
.hero-copy{padding:clamp(48px,7vw,84px) clamp(20px,4vw,60px);position:relative;z-index:2;
  max-width:660px;margin-inline:auto;width:100%;display:flex;flex-direction:column;justify-content:center}
.hero-copy h1{color:#fff;text-wrap:balance;margin-bottom:.55em}
.hero-copy .script{color:var(--blush);font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:.1rem}
.hero-copy p{color:#F4F0F9;font-size:1.06rem;max-width:50ch;line-height:1.72;
  text-shadow:0 1px 2px rgba(24,10,38,.35)}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--purple-900)}
.hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  /* Slightly desaturated + deepened so text always wins the contrast fight */
  filter:saturate(.92) contrast(1.03) brightness(.86)}
/* Scrim: opaque behind the copy, clearing to reveal the work on the right. */
.hero-media::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(36,18,56,.96) 0%,
    rgba(36,18,56,.90) 34%,
    rgba(36,18,56,.66) 60%,
    rgba(36,18,56,.28) 100%)}
@media(min-width:900px){
  .hero{
    height:calc(100vh - 76px);
    min-height:560px;
    max-height:880px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.08fr 1fr;
    height:100%;
    width:100%;
    min-height:0;
    align-items:center;
  }
  .hero-media{
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:var(--purple-900);
  }
  .hero-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  .hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(36,18,56,0) 65%,rgba(36,18,56,.75) 100%);
    pointer-events:none;
  }
  .hero-copy{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(20px,3.5vh,44px) clamp(28px,3.5vw,56px);
    max-width:660px;
    margin-inline:0;
    box-sizing:border-box;
  }
  .hero-copy h1{
    font-size:clamp(1.85rem,2.5vw,2.7rem);
    line-height:1.15;
    letter-spacing:-.025em;
    margin:0 0 clamp(10px,1.6vh,16px);
    text-wrap:balance;
  }
  .hero-copy p{
    font-size:clamp(.92rem,1.05vw,1.02rem);
    line-height:1.55;
    margin:0 0 clamp(12px,2vh,20px);
    color:#EDE5F5;
    max-width:50ch;
  }
  .hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 clamp(16px,2.4vh,24px);
  }
  .hero-cta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    margin:0;
  }
  .hero-cta .btn{
    padding:12px 24px;
    font-size:.95rem;
    min-height:44px;
    border-radius:999px;
  }
}
@media(max-width:899px){
  /* Portrait/mobile: stack the scrim so copy sits on a solid field */
  .hero-media::after{background:linear-gradient(180deg,
    rgba(36,18,56,.94) 0%,
    rgba(36,18,56,.88) 46%,
    rgba(36,18,56,.72) 74%,
    rgba(36,18,56,.55) 100%)}
  .hero-copy{padding-block:56px 64px}
}
/* Short phones (e.g. iPhone SE, 568px tall) — the default hero is tall enough
   to push the primary CTA below the fold. Compress the vertical rhythm so the
   headline, support copy and both buttons all land in the first viewport. */
@media(max-width:899px) and (max-height:720px){
  .hero-grid{min-height:auto}
  .hero-copy{padding-block:34px 38px}
  .hero-copy h1{font-size:clamp(1.72rem,7.2vw,2.3rem);margin-bottom:.4em}
  .hero-copy .script{font-size:clamp(1.3rem,4.4vw,1.7rem);margin-bottom:0}
  .hero-copy p{font-size:.98rem;line-height:1.55}
  .hero-badges{margin:12px 0 16px;gap:6px 8px}
  .hero-badges li{font-size:12.5px;padding:3px 9px}
  .hero-cta{gap:8px}
  .hero-cta .btn{padding:10px 16px;font-size:.88rem}
}
/* Very short + narrow (iPhone SE class): trim further still. */
@media(max-width:899px) and (max-height:600px){
  .hero-copy{padding-block:18px 20px}
  .hero-copy h1{font-size:1.54rem;margin-bottom:.3em}
  .hero-copy p{font-size:.9rem;line-height:1.46}
  .hero-copy p{font-size:.94rem;line-height:1.5}
  .hero-badges{margin:10px 0 12px;gap:5px 6px}
  .hero-badges li{font-size:12px;padding:2px 8px}
  .hero-cta .btn{padding:9px 14px;font-size:.85rem}
}
/* Feature badges: clean, subtle glass chips (compact & refined) */
.hero-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 20px;padding:0;list-style:none}
.hero-badges li{display:inline-flex;align-items:center;gap:6px;color:#EDE6F4;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  padding:4px 11px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--font-display);font-weight:500;font-size:12.5px;letter-spacing:.01em;
  white-space:nowrap;line-height:1.2}
.hero-badges svg{width:13px;height:13px;flex:0 0 auto;color:var(--gold);stroke-width:1.8}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hero-cta .btn{flex:0 0 auto;min-height:44px;padding:12px 24px;font-size:.95rem;border-radius:999px}
@media(max-width:420px){
  .hero-badges{gap:6px 6px;margin:12px 0 16px}
  .hero-badges li{padding:3px 10px;font-size:12.5px;gap:5px}
  .hero-badges svg{width:12px;height:12px}
  .hero-cta{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
  .hero-cta .btn{flex:1 1 130px;min-height:44px;padding:11px 14px;font-size:.88rem;text-align:center;justify-content:center}
}

/* ---------------- Section headers ----------------
   Centered intro, but copy stays in a readable measure and left-aligned
   once it wraps (centered multi-line paragraphs are hard to track back). */
.section-head{max-width:720px;margin:0 auto clamp(30px,4vw,46px);text-align:center}
.section-head h2{margin-bottom:.45rem;text-wrap:balance}
.section-head .eyebrow{margin-bottom:.35rem}
.section-head p{color:var(--ink-soft);text-align:left;max-width:58ch;margin-inline:auto;line-height:1.7}
.section-head .script{display:block;margin-bottom:.15rem}

/* ---------------- Value strip ---------------- */
.values{background:var(--purple-tint)}
/* Bento Grid for Values (Taste-Skill asymmetric rhythm) */
.values-grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.value-card{background:#fff;border-radius:var(--radius);padding:28px 24px;box-shadow:var(--e1);
  border:1px solid rgba(46,26,71,.08);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease;
  display:flex;flex-direction:column;justify-content:flex-start;position:relative}
.value-card:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:rgba(199,167,107,.4)}
.value-card:active{transform:scale(0.99)}
.value-card .ico{width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,var(--purple) 0%,var(--purple-700) 100%);
  display:grid;place-items:center;margin-bottom:14px;color:var(--gold)}
.value-card .ico svg{width:22px;height:22px;stroke-width:1.7}
.value-card h3{margin-bottom:.4rem;font-size:1.14rem}
.value-card p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.6}

.value-card:nth-child(1){grid-column:span 7}
.value-card:nth-child(2){grid-column:span 5}
.value-card:nth-child(3){grid-column:span 5}
.value-card:nth-child(4){grid-column:span 7}

@media(max-width:840px){
  .values-grid{grid-template-columns:1fr;gap:14px}
  .value-card:nth-child(n){grid-column:span 1}
}

/* ---------------- Product grid ---------------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:32px;padding:0;list-style:none}
.chip{font-family:var(--font-display);font-weight:600;font-size:.92rem;border:1.5px solid var(--line-strong);
  background:#fff;color:var(--purple);border-radius:999px;padding:10px 20px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease;min-height:44px;
  display:inline-flex;align-items:center}
.chip:hover{border-color:var(--purple);transform:translateY(-1px)}
.chip.active{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:var(--e1)}

.grid-products{padding-bottom:8px;display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--e1);
  display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .25s ease;
  border:1px solid rgba(46,26,71,.08)}
.card:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:rgba(199,167,107,.4)}
.card-media{position:relative;aspect-ratio:4/5;background:var(--purple-tint);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-media img{transform:scale(1.04)}
/* Slight deepening keeps image weight even across mixed photography */
.card-media::after{content:"";position:absolute;inset:0;background:rgba(46,26,71,.05);pointer-events:none}
.badge{position:absolute;top:14px;left:14px;background:var(--gold);color:#3a2c12;
  font-family:var(--font-display);font-weight:600;font-size:.72rem;padding:5px 11px;border-radius:999px;letter-spacing:.02em;
  z-index:2;box-shadow:0 2px 6px rgba(58,44,18,.18)}
.badge.hot{background:var(--blush);color:#6b3b2c}
.badge.new{background:#fff;color:var(--purple);border:1.5px solid var(--line-strong)}
.card-body{padding:20px;display:flex;flex-direction:column;flex:1;gap:.4rem}
/* Real hierarchy: tiny tracked label vs. larger, heavier title */
.card-cat{font-size:.78rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--gold-deep);font-family:var(--font-display);font-weight:600}
.card h3{font-size:1.12rem;margin:0;letter-spacing:-.015em;line-height:1.28}
.card .note{font-size:.94rem;color:var(--ink-soft);margin:0;line-height:1.6}
.card .price{font-family:var(--font-display);font-weight:700;font-size:1.28rem;color:var(--purple);
  margin-top:auto;padding-top:12px;letter-spacing:-.02em;
  border-top:1px solid var(--line)}
.card-actions{display:flex;gap:8px;margin-top:12px}

/* ---------------- Portfolio ---------------- */
.portfolio-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
@media(min-width:1020px){
  .portfolio-grid{grid-template-columns:repeat(3,1fr);gap:28px}
}
@media(max-width:720px){
  .portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
}
@media(max-width:480px){
  .portfolio-grid{grid-template-columns:1fr;gap:16px}
}
.pf-item{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--purple-900);
  aspect-ratio:1;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.pf-item:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.pf-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,opacity .3s}
.pf-item:hover img{transform:scale(1.06);opacity:.85}
.pf-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 18px 16px;color:#fff;
  background:linear-gradient(to top,rgba(24,10,38,.92) 0%,rgba(24,10,38,.65) 55%,transparent 100%);
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.3;pointer-events:none}
.pf-cap small{display:block;font-family:var(--font-body);font-weight:400;opacity:.9;font-size:.82rem;margin-top:3px;color:#EDE6F4}

/* ---------------- Editorial / about split ---------------- */
.split{display:grid;gap:36px;align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:56px}.split.rev .split-media{order:2}}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.frame-soft{background:var(--purple-tint);border-radius:var(--radius);padding:26px}

/* ---------------- Steps (custom process) ---------------- */
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative}
.step::before{counter-increment:step;content:counter(step);font-family:var(--font-display);font-weight:800;
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--purple);color:#fff;margin-bottom:14px}
.step h3{margin-bottom:.3rem}
.step p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ---------------- Forms ---------------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,36px);box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--font-display);font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--purple)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:1rem;background:var(--soft-white);color:var(--ink);
  box-sizing:border-box}
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C5470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field select::-ms-expand{display:none}
input[type="date"]{font-family:inherit;color:inherit}
.field input::-webkit-input-placeholder,.field textarea::-webkit-input-placeholder{color:#6B637B;opacity:1}
.field input::-moz-placeholder,.field textarea::-moz-placeholder{color:#6B637B;opacity:1}
.field input:-ms-input-placeholder,.field textarea:-ms-input-placeholder{color:#6B637B;opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple);background:#fff;
  box-shadow:0 0 0 3px rgba(46,26,71,.12)}
.field input::placeholder,.field textarea::placeholder{color:#6B637B;opacity:1}
.field textarea{min-height:120px;resize:vertical}
.grid-2{display:grid;gap:16px}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}
.form-note{font-size:.85rem;color:var(--ink-soft);margin-top:12px}
.form-ok{background:#E9F6EF;border:1px solid #B7E0C8;color:#1E5F3D;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:18px}

/* (Mobile cart table override moved after base cart rules) */

/* ---------------- Contact ---------------- */
.contact-grid{display:grid;gap:36px}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list .ci{width:42px;height:42px;border-radius:12px;background:var(--purple-tint);display:grid;place-items:center;flex:0 0 auto;font-size:1.15rem}
.map-embed{border:0;width:100%;height:280px;border-radius:var(--radius);box-shadow:var(--shadow)}
.social-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ---------------- Cart / checkout ---------------- */
.cart-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.cart-table th,.cart-table td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-table th{font-family:var(--font-display);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--purple);background:var(--purple-tint)}
.cart-prod{display:flex;gap:12px;align-items:center}
.cart-prod img{width:62px;height:62px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{background:#fff;border:0;width:44px;height:44px;font-size:1.15rem;cursor:pointer;color:var(--purple)}
.qty button:hover{background:var(--purple-tint)}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0
}
input[type="number"],.qty input{
  -webkit-appearance:none;-moz-appearance:textfield;appearance:textfield
}
.qty input{width:48px;height:44px;text-align:center;border:0;font-family:var(--font-display);font-weight:600;font-size:1rem}
.summary{background:var(--purple-tint);border-radius:var(--radius);padding:24px}
.summary-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.98rem}
.summary-row.total{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--purple);
  border-top:1.5px solid var(--line);padding-top:14px;margin-top:6px}
.empty-cart{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.empty-cart .big{font-size:3rem;margin-bottom:10px}

/* ---------------- Mobile Cart Card Layout (< 720px) ----------------
   Replaces rigid 5-column desktop table with stacked cards. Prevents horizontal
   scrolling on mobile and ensures product thumbnails are properly proportioned. */
@media(max-width:720px){
  .cart-table{display:block;width:100%;background:transparent;box-shadow:none;border-radius:0;border:0}
  .cart-table thead{display:none}
  .cart-table tbody{display:flex;flex-direction:column;gap:14px;width:100%}
  .cart-table tr{display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto;gap:12px 14px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--e1);padding:14px;position:relative;width:100%}
  .cart-table td{border:0;padding:0;display:block}
  .cart-table td::before{content:none!important}
  
  /* Top product row: thumbnail + title & options */
  .cart-table td[data-label="Produk"]{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;padding-right:36px}
  .cart-prod{display:flex;gap:12px;align-items:flex-start;flex:1;min-width:0}
  .cart-prod img{width:76px;height:76px;object-fit:cover;border-radius:8px;flex:0 0 76px;background:var(--purple-tint)}
  .cart-prod strong{font-size:.95rem;line-height:1.3;display:block;color:var(--purple)}
  .cart-prod small{font-size:.82rem;color:var(--ink-soft);display:block;margin-top:3px}
  
  /* Unit price hidden on compact mobile card (line total displayed below) */
  .cart-table td[data-label="Harga"]{display:none}
  
  /* Bottom row: Stepper left */
  .cart-table td[data-label="Kuantiti"]{grid-column:1/2;display:flex;align-items:center}
  .cart-table .qty{border-radius:999px;border:1.5px solid var(--line)}
  .cart-table .qty button{width:36px;height:36px;font-size:1rem}
  .cart-table .qty input{width:38px;height:36px;font-size:.92rem}
  
  /* Bottom row: Line total right */
  .cart-table td[data-label="Jumlah"]{grid-column:2/3;display:flex;align-items:center;justify-content:flex-end;
    font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--purple)}
  
  /* Delete button in top-right corner of card */
  .cart-table td[data-label=""]{position:absolute;top:12px;right:12px;display:block;padding:0}
  .cart-table td[data-label=""] .btn{background:rgba(200,60,60,.08);color:#A82323;border:1px solid rgba(200,60,60,.2);
    padding:4px 10px;font-size:.82rem;border-radius:6px;min-height:auto}
  .cart-table td[data-label=""] .btn:hover{background:#A82323;color:#fff}
  
  /* Full-width order summary */
  .summary{width:100%!important;max-width:100%!important;margin:20px 0 0!important;padding:20px 16px!important;box-sizing:border-box}
}

/* ---------------- Product detail ---------------- */
.pd-grid{display:grid;gap:36px}
@media(min-width:880px){.pd-grid{grid-template-columns:1fr 1fr;gap:56px}}
.pd-media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.pd-price{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--purple);margin:.2em 0}
.breadcrumb{font-size:.88rem;color:var(--ink-soft);margin-bottom:20px}
.breadcrumb a{color:var(--ink-soft)}
.opt-group{margin:18px 0}
.opt-group .label{font-family:var(--font-display);font-weight:600;font-size:.9rem;margin-bottom:8px;color:var(--purple)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;cursor:pointer;font-family:var(--font-body);font-size:.92rem;color:var(--ink)}
.opt:hover{border-color:var(--purple)}
.opt.active{border-color:var(--purple);background:var(--purple);color:#fff}

/* ---------------- CTA band ----------------
   Layered depth: a warm geometric wash over the purple ties the block back
   to the product (precision-cut pattern) instead of a flat colour fill. */
.cta-band{background:linear-gradient(135deg,#1C0E2B 0%,#2E1A47 60%,#241238 100%);
  color:#fff;border-radius:var(--radius-lg);padding:clamp(40px,5.5vw,68px) 24px;
  text-align:center;position:relative;overflow:hidden;box-shadow:var(--e3);
  border:1px solid rgba(199,167,107,.22)}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 12% 0%,rgba(199,167,107,.16) 0%,rgba(199,167,107,0) 60%),
    radial-gradient(50% 70% at 92% 100%,rgba(233,207,199,.13) 0%,rgba(233,207,199,0) 62%);
  /* faint geometric grid = laser-cut negative space reference */
  -webkit-mask-image:none}
.cta-band::after{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 0%,transparent 100%);
          mask-image:radial-gradient(70% 70% at 50% 50%,#000 0%,transparent 100%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band p{color:#EDE7F5;max-width:56ch;margin-inline:auto;line-height:1.7}
.cta-band .script{color:var(--blush)}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--purple-900);color:#D9D2E4;padding:clamp(40px,6vw,64px) 0 26px;margin-top:20px}
.footer-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.site-footer h4{color:#fff;font-size:1rem;letter-spacing:.03em;margin-bottom:14px}
.site-footer a{color:#D9D2E4}
.site-footer a:hover{color:#fff}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.95rem}
.footer-brand .brand-wordmark{color:#fff}
.footer-logo{display:block;height:auto;width:185px;max-width:100%;margin-bottom:16px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------- Icons ----------------
   All UI icons are inline SVG stroked with currentColor, so they inherit
   the surrounding type colour and never depend on emoji font support. */
.ico svg,.ci svg,.value-card .ico svg{width:22px;height:22px;stroke-width:1.7}
.contact-list .ci{width:44px;height:44px;border-radius:14px;color:var(--purple);
  background:linear-gradient(150deg,var(--purple-tint) 0%,#EAE3F3 100%)}
.contact-list .ci svg{width:20px;height:20px}
/* Icon-only social links (footer): fixed square targets.
   Scoped to .social-icons so it can't squeeze text-bearing .btn social links
   (on the contact page) down to 44px and make their labels overlap. */
.social-icons a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;background:#fff;border:1px solid var(--line);
  color:var(--purple);box-shadow:var(--e1);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.social-icons a:hover{transform:translateY(-3px);box-shadow:var(--e2);background:var(--purple);color:#fff}
.social-icons a svg{width:20px;height:20px}
/* Text-bearing social links (contact page): same depth, auto width, no overlap */
.social-row a{white-space:nowrap;gap:8px}
.social-row a svg{width:18px;height:18px;flex:none}
.social-row a:hover{transform:translateY(-2px);box-shadow:var(--e1)}
.wa-float svg{width:26px;height:26px}
.trust-row svg{width:18px;height:18px;color:var(--gold-deep)}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;align-items:center;
  margin:18px 0 0;padding:0;list-style:none;font-size:.92rem;color:var(--ink-soft)}
.trust-row li{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:500}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.85rem;color:#B9B0C9}

/* ---------------- WhatsApp float ----------------
   Sits inside the brand palette instead of a raw third-party green, and
   uses the brand's gold ring so it reads as "ours", not an unmanaged widget.
   Green is retained as a small dot so the affordance stays recognisable. */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:250;background:var(--purple);color:#fff;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(46,26,71,.28),0 12px 30px rgba(46,26,71,.34);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  border:1.5px solid rgba(199,167,107,.55)}
.wa-float::after{content:"";position:absolute;top:7px;right:7px;width:10px;height:10px;border-radius:50%;
  background:#25D366;box-shadow:0 0 0 2px var(--purple)}
.wa-float:hover{transform:scale(1.08);color:#fff;background:var(--purple-700);
  box-shadow:0 4px 10px rgba(46,26,71,.32),0 16px 38px rgba(46,26,71,.4)}
.wa-float:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------------- Toast ---------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);
  background:var(--purple);color:#fff;padding:13px 22px;border-radius:999px;z-index:400;
  font-family:var(--font-display);font-weight:600;font-size:.94rem;box-shadow:var(--shadow-hover);
  transition:transform .3s ease;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------------- Helpers ---------------- */
/* Admin/development notes: hidden from visitors by default.
   Tambah class "show" (cth: class="tag-note show") untuk melihatnya semasa membina laman.
   Selepas anda lengkapkan butiran sebenar, anda boleh padam blok ini terus. */
.tag-note{display:none;background:#FFF7E8;border:1px dashed var(--gold);border-radius:var(--radius-sm);
  padding:12px 16px;font-size:.88rem;color:#6a5417}
.tag-note.show,.tag-note:hover{display:block}
.promo-banner{background:var(--gold);color:#3a2c12;text-align:center;font-family:var(--font-display);
  font-weight:600;font-size:.92rem;padding:9px 16px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------- Sticky buy bar (mobile) ----------------
   The description used to sit between the price and the add-to-cart button,
   burying the primary action below the fold on a phone. The CTA block is now
   pinned to the bottom of the viewport (position:fixed — a sticky child cannot
   rise above its own column, which is taller than the screen), so buying is
   always one tap away. main gets matching bottom padding so nothing is hidden
   behind the bar, and the WhatsApp float is nudged above it. */
@media(max-width:760px){
  .pd-grid .card-actions{position:fixed;left:0;right:0;bottom:0;z-index:300;
    background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    padding:10px 16px calc(10px + constant(safe-area-inset-bottom));
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(46,26,71,.12);
    display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:0}
  .pd-grid .card-actions .btn{width:100%;justify-content:center;padding:13px 18px;
    font-size:.95rem;white-space:nowrap}
  .pd-grid .card-actions .btn-outline{border:0;background:transparent;color:var(--purple);
    text-decoration:underline;text-underline-offset:3px;padding:13px 10px;width:auto;font-size:.92rem;
    white-space:normal;text-align:center;line-height:1.25;min-width:0}
  .pd-desc{margin-top:28px}
  body.pd-page{padding-bottom:118px}
  /* keep the floating WhatsApp button clear of the fixed buy bar */
  body.pd-page .wa-float{bottom:122px}
}
/* On the narrowest phones the two-column bar squeezes the secondary link out
   of the viewport; stack the actions instead. */
@media(max-width:380px){
  .pd-grid .card-actions{grid-template-columns:1fr;gap:4px}
  .pd-grid .card-actions .btn{font-size:.92rem}
  .pd-grid .card-actions .btn-outline{font-size:.86rem;padding:8px 10px}
  body.pd-page{padding-bottom:150px}
  body.pd-page .wa-float{bottom:158px}
}

/* ---------------- Mobile comfort ----------------
   Small screens get a legibility floor rather than scaled-down desktop type,
   and full-size touch targets. */
@media(max-width:560px){
  .card-cat{font-size:.8rem}
  .badge{font-size:.75rem;padding:5px 12px}
  .qty button{width:46px;height:46px}
  .qty input{width:50px;height:46px;font-size:1.05rem}
  .btn{padding:14px 22px}
  .wrap{padding:0 16px}
  main{padding-bottom:24px}
}
@media(pointer:coarse){
  .nav a{padding:12px 4px}
  .chip{padding:11px 18px}
}

/* ============================================================
   MOBILE HERO — must stay LAST (source order beats earlier blocks)
   The hero photo is landscape (900x703); in a tall portrait column
   object-fit:cover crops ~72% of its width away, which reads as a
   stretched/squeezed photo. On phones we stack it at a natural ratio.
   ============================================================ */
@media(max-width:899px){
  .hero-grid{min-height:auto}
  .hero-media{position:relative;inset:auto;width:100%;height:auto;
    aspect-ratio:16/9;max-height:220px;overflow:hidden}
  .hero-media img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 42%}
  .hero-media::after{background:linear-gradient(180deg,
    rgba(36,18,56,.34) 0%,
    rgba(36,18,56,.06) 46%,
    rgba(36,18,56,.58) 100%)}
  .hero-copy{position:relative;z-index:2;background:var(--purple-900);padding-block:24px 28px}
  .hero-copy h1{font-size:clamp(1.48rem,5.6vw,1.95rem);margin-bottom:.35em}
  .hero-copy p{font-size:.92rem;line-height:1.5}
}
@media(max-width:899px) and (max-height:760px){
  .hero-media{aspect-ratio:21/9;max-height:160px}
  .hero-copy{padding-block:16px 20px}
  .hero-copy h1{font-size:1.45rem;margin-bottom:.3em}
  .hero-copy p{font-size:.88rem;line-height:1.45}
}
@media(max-width:899px) and (max-height:600px){
  .hero-media{aspect-ratio:26/9;max-height:100px}
  .hero-copy{padding-block:10px 12px}
  .hero-copy h1{font-size:1.32rem;margin-bottom:.25em}
  .hero-copy p{font-size:.84rem;line-height:1.4}
  .hero-badges{margin:8px 0 10px;gap:4px 6px}
  .hero-cta .btn{padding:8px 12px;font-size:.82rem;min-height:38px}
}

/* Image sizing rules. Keep photos proportionate; crop only framed editorial media. */
/* hero-grid clamp placed inside min-width:900px */
.card-media{aspect-ratio:4/5}
.card-media img{object-fit:cover;object-position:center}
.pf-item{aspect-ratio:1}
.pf-item img{object-fit:cover;object-position:center}
.split-media{min-width:0;overflow:hidden;border-radius:var(--radius)}
.split-media img{height:auto;aspect-ratio:auto;object-fit:contain}
.pd-media{min-width:0;overflow:hidden;border-radius:var(--radius);background:var(--purple-tint);display:flex;align-items:center;justify-content:center}
.pd-media img{width:100%;height:auto;max-height:min(75vh,720px);object-fit:contain}
@media(min-width:900px){
  .hero-media img{object-position:center}
}
@media(max-width:899px){
  .hero-grid{min-height:auto}
  .hero-media{aspect-ratio:4/3}
  .card-media{aspect-ratio:1/1}
  .pf-item{aspect-ratio:1}
  .pd-media{max-height:52vh;aspect-ratio:1/1;width:100%}
  .pd-media img{width:100%;height:100%;max-height:52vh;object-fit:contain;padding:8px}
}
@media(max-width:380px){
  .card-media{aspect-ratio:4/5}
}