/* Five storefront designs. Each one rebuilds the layout (navigation, hero, grids, rhythm), not just the colours:
   maison    quiet luxury      — cinematic full-bleed hero, centred masthead, borderless product plates
   gallery   museum catalogue  — fixed side index, numbered sections, staggered masonry
   journey   immersive night   — floating bottom dock, giant gradient type, horizontal rails
   boutique  easy shopping     — search-first two-row header, dense 5-up grid, product first
   zine      handmade scrapbook — polaroids, tape, handwriting, tilted collage
   All rules use native CSS nesting; data-theme is set on <html> by theme.js. */

:root{--dbh:44px}

/* ---------- design picker bar ---------- */
.design-bar{position:sticky;top:0;z-index:55;min-height:var(--dbh);display:flex;align-items:center;justify-content:center;gap:16px;background:#17120E;color:#F3E9DC;font-family:'DM Sans',-apple-system,'Segoe UI',Arial,sans-serif;font-size:.74rem;padding:0 14px;
  margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));border-bottom:1px solid rgba(243,233,220,.14);overflow:hidden}
.db-label{letter-spacing:.1em;text-transform:uppercase;color:#C9B795;white-space:nowrap}
.db-opts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%;min-width:0;flex:0 1 auto}
.db-opts::-webkit-scrollbar{display:none}
.db-opts button,.db-share{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:30px;border:1px solid rgba(243,233,220,.28);color:#F3E9DC;font-size:.76rem;white-space:nowrap;cursor:pointer;background:transparent;font-family:inherit;transition:background .2s,color .2s,border-color .2s}
.db-opts button:hover,.db-share:hover{border-color:#F3E9DC}
.db-opts button.active{background:#F3E9DC;color:#17120E;border-color:#F3E9DC;font-weight:700}
.db-opts i{width:14px;height:14px;flex:none;border:1px solid rgba(0,0,0,.3)}
[data-theme-pick="maison"] i{background:linear-gradient(135deg,#F8F4EC 50%,#8C6A2B 50%);border-radius:50%}
[data-theme-pick="gallery"] i{background:linear-gradient(90deg,#161616 30%,#EEECE7 30%);border-radius:2px}
[data-theme-pick="journey"] i{background:linear-gradient(135deg,#0B1020,#7C5CFF 55%,#FF7AC8);border-radius:50%;border-color:rgba(243,233,220,.5)}
[data-theme-pick="boutique"] i{background:linear-gradient(135deg,#FFFFFF 50%,#1F5C4A 50%);border-radius:5px}
[data-theme-pick="zine"] i{background:linear-gradient(135deg,#E9E0CC 50%,#D4452B 50%);border-radius:2px;transform:rotate(-8deg)}
.db-concept{color:#C9B795;font-style:italic;white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.db-share{border-style:dashed;color:#C9B795}
@media (max-width:1180px){.db-concept{display:none}}
@media (max-width:820px){.db-label,.db-share{display:none}.design-bar{justify-content:flex-start}.db-opts button{padding:6px 11px}}
@media print{.design-bar{display:none}}
html[data-switcher="1"] header.site{top:calc(env(safe-area-inset-top,0px) + var(--dbh))}
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease!important}

/* ---------- shared by every design ---------- */
html[data-theme] :is(.showcase,.vote-box,.newsletter,.promo-modal,.drop-banner){background:var(--panel);color:var(--panel-fg)}
html[data-theme] :is(.showcase-copy h2,.vote-box h3,.newsletter h2,.promo-body h3,.drop-banner h2,.promo-close){color:var(--panel-fg)}
html[data-theme] :is(.showcase,.vote-box,.newsletter,.promo-body,.drop-banner) .eyebrow{color:var(--gold-bright)}
html[data-theme] :is(.showcase,.newsletter,.drop-banner,.promo-modal) .btn-gold{background:var(--gold-bright);color:var(--on-bright)}
html[data-theme] :is(.btn-gold,.count-badge,.pbadge.new){color:var(--on-gold)}
html[data-theme] .btn-gold:hover{color:var(--on-bright)}
html[data-theme] .vote-options .sb-opt.active{color:var(--on-bright)}
html[data-theme] .announce-track{color:var(--announce-fg,#E9DEC8)}
html[data-theme] .hero-copy h1,html[data-theme] .section-head h2{font-style:normal}

/* =====================================================================
   1 · MAISON — quiet luxury
   ===================================================================== */
html[data-theme="maison"]{
  --bg:#F8F4EC;--surface:#FFFFFF;--surface-2:#EFE8DA;--surface-3:#E4DAC6;
  --ink:#1A1612;--ink-soft:#554C41;--ink-faint:#766C5F;
  --gold:#8C6A2B;--gold-bright:#D1AE63;--gold-wash:#F0E6D0;
  --line:rgba(26,22,18,.13);--line-strong:rgba(26,22,18,.32);
  --shadow:0 30px 60px -34px rgba(26,22,18,.4);--shadow-sm:0 12px 26px -18px rgba(26,22,18,.35);
  --radius:0;--radius-lg:0;
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;--font-body:'Jost','DM Sans',-apple-system,'Segoe UI',Arial,sans-serif;
  --panel:#1A1612;--panel-fg:#F8F4EC;--on-gold:#FFFFFF;--on-bright:#1A1612;--announce-fg:#E9DEC8;--hh:92px;

  & .announce{background:var(--ink);padding:10px 0;letter-spacing:.2em;font-size:.66rem}
  & header.site{background:var(--bg);transition:background .35s ease,border-color .35s ease,color .35s ease}
  & .nav-row{display:grid;grid-template-columns:1fr auto 1fr;height:var(--hh);padding:0}
  & .navlinks{order:1;justify-self:start;gap:26px}
  & .navlinks a{white-space:nowrap}
  & #view-home .hero-collage{transform:none!important}
  & .brand{order:2;justify-self:center;font-size:1.55rem;letter-spacing:.3em;text-transform:uppercase;font-weight:400;padding-left:.3em}
  & .brand .mark{display:none}
  & .brand-the{font-size:.5em;letter-spacing:.4em;vertical-align:.5em;margin-right:.4em}
  & .nav-actions{order:3;justify-self:end}
  & .navlinks>a,& .nav-drop>a{font-size:.7rem;letter-spacing:.24em}
  & .nav-dropmenu{color:var(--ink)}
  & .btn-icon{border-color:transparent}
  & .btn{border-radius:0;letter-spacing:.24em;font-weight:400;padding:16px 38px;font-size:.7rem}
  & .btn-primary{background:var(--ink);color:#fff}
  & .btn-primary:hover{background:var(--gold);color:#fff;transform:none;box-shadow:none}
  & .btn-ghost{border-color:var(--ink)}
  & .eyebrow{letter-spacing:.38em;font-size:.66rem;color:var(--gold)}
  & .lang-switch{border:none}
  /* cinematic opening: image under a transparent masthead */
  & #view-home .hero{max-width:none;width:100vw;margin:calc(-1 * var(--hh)) 0 0 calc(50% - 50vw);padding:0;position:relative;height:min(100vh,900px);min-height:620px;overflow:hidden;background:#1A1612}
  & #view-home .hero-top{position:absolute;inset:0;display:block}
  & #view-home .hero-collage{position:absolute;inset:0;display:block;margin:0}
  & #view-home .hero-collage .big{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
  & #view-home .hero-collage .big img{object-position:50% 22%}
  & #view-home .hero-collage .small,& #view-home .hero-collage .sticky-note{display:none}
  & #view-home .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,10,6,.5) 0%,rgba(14,10,6,0) 28%,rgba(14,10,6,.12) 55%,rgba(14,10,6,.68) 100%)}
  & #view-home .hero-copy{position:absolute;z-index:2;left:0;right:0;bottom:9%;text-align:center;padding:0 24px;color:#fff}
  & #view-home .hero-copy h1{color:#fff;font-style:italic;font-weight:400;font-size:clamp(3rem,8vw,7rem);line-height:.98;letter-spacing:.01em}
  & #view-home .hero-copy .eyebrow{color:#fff;opacity:.9}
  & #view-home .hero-copy .lead{color:rgba(255,255,255,.88);margin:18px auto 0;max-width:46ch;font-size:1rem}
  & #view-home .hero-actions{justify-content:center}
  & #view-home .hero-copy .btn-primary{background:#fff;color:var(--ink)}
  & #view-home .hero-copy .btn-primary:hover{background:var(--gold-bright);color:var(--ink)}
  & #view-home .hero-link{color:#fff}
  &:not(.scrolled) body:has(#view-home:not([hidden])) header.site{background:transparent;border-bottom-color:transparent;color:#fff}
  &:not(.scrolled) body:has(#view-home:not([hidden])) header.site :is(.btn-icon,.lang-switch){border-color:rgba(255,255,255,.45)}
  &:not(.scrolled) body:has(#view-home:not([hidden])) header.site .lang-btn{color:#fff}
  &:not(.scrolled) body:has(#view-home:not([hidden])) header.site .lang-btn.active{background:#fff;color:var(--ink)}
  &:not(.scrolled) body:has(#view-home:not([hidden])) header.site .navlinks>a:hover{color:#fff;border-color:#fff}
  & .section{padding:92px 0}
  & .section-head{flex-direction:column;align-items:center;text-align:center;margin-bottom:54px;gap:10px}
  & .section-head h2{font-weight:400;font-style:italic;font-size:clamp(2.2rem,4.4vw,3.6rem)}
  & .section-head>p{margin:0 auto}
  & .section-head::after{content:"";order:3;width:54px;height:1px;background:var(--gold);margin-top:10px}
  & .section-head .hero-link{order:4;margin-top:6px;letter-spacing:.2em;text-transform:uppercase;font-size:.68rem;text-decoration:none;border-bottom:1px solid currentColor}
  /* borderless product plates */
  & .product-grid{grid-template-columns:repeat(3,1fr);gap:56px 34px}
  & .pcard{background:transparent;border:none;box-shadow:none}
  & .pcard:hover{transform:none;box-shadow:none}
  & .pimg{aspect-ratio:4/5;background:var(--surface-2)}
  & .pbody{align-items:center;text-align:center;padding:20px 0 0;gap:6px}
  & .pcard h4{font-size:1.5rem;font-weight:400;font-style:italic}
  & .pcat{letter-spacing:.26em;font-size:.62rem}
  & .pprice{margin-top:2px}
  & .pquick{left:0;right:0;bottom:0;border-radius:0;text-align:center;padding:14px;background:rgba(248,244,236,.94);letter-spacing:.22em}
  & .pbadge{background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:0;letter-spacing:.2em;padding:4px 8px}
  & .pbadge.sale{background:var(--critical);border-color:var(--critical);color:#fff}
  & .pbadge.soldout{background:var(--ink);color:#fff}
  & .pwish{background:transparent;box-shadow:none}
  & .step-card{border:none;background:none}
  & .step-card:hover{transform:none;box-shadow:none}
  & .step-card .si{aspect-ratio:3/4}
  & .step-card .sc{text-align:center;padding:22px 10px 0}
  & .step-card h3{font-size:1.9rem;font-style:italic;font-weight:400}
  & .steps3{gap:34px}
  & .chapters{gap:10px}
  & .chapter-card{aspect-ratio:2/3}
  & .filter-chip{border-radius:0;letter-spacing:.2em;font-size:.66rem}
  & .filter-chip.active,& .filter-chip:hover{background:var(--ink);color:#fff}
  & .showcase,& .vote-box,& .newsletter,& .drop-banner{border-radius:0}
  & .newsletter{padding:80px 40px}
  & footer.site{background:var(--panel);color:var(--panel-fg);border-top:none;margin-top:80px}
  & footer.site :is(.foot-brand p,.foot-col a,.foot-col h5,.foot-bottom){color:#BFB5A4}
  & footer.site .foot-col a:hover{color:var(--gold-bright)}
  & footer.site .brand{color:#fff}
  & footer.site .foot-bottom{border-color:rgba(255,255,255,.16)}
  & footer.site .pay-badge{background:transparent;border-color:rgba(255,255,255,.3);color:#BFB5A4}
  @media (max-width:860px){
    & .nav-row{display:flex;height:72px}
    & .brand{margin:0 auto;font-size:1.15rem;letter-spacing:.22em;padding-left:.22em}
    & .brand-the{display:none}
    & {--hh:72px}
    & #view-home .hero{height:86vh;min-height:520px}
    & .product-grid{grid-template-columns:repeat(2,1fr);gap:34px 14px}
    & .pcard h4{font-size:1.15rem}
    & .section{padding:60px 0}
    & .btn-icon{border-color:var(--line-strong)}
  }
  @media (max-width:520px){
    & .brand{font-size:.92rem;letter-spacing:.12em;padding-left:.12em}
    & .nav-row{gap:6px}
    & .nav-actions{gap:4px}
    & .nav-actions .btn-icon,& .hamburger{width:34px;height:34px}
  }
}

/* =====================================================================
   2 · GALLERY — museum catalogue with a fixed side index
   ===================================================================== */
html[data-theme="gallery"]{
  --bg:#EEECE7;--surface:#FAF9F6;--surface-2:#E3E0D8;--surface-3:#D6D2C7;
  --ink:#161616;--ink-soft:#43433F;--ink-faint:#64645F;
  --gold:#A8472A;--gold-bright:#E0875F;--gold-wash:#F3DDD2;
  --line:rgba(22,22,22,.16);--line-strong:rgba(22,22,22,.55);
  --shadow:none;--shadow-sm:none;--radius:0;--radius-lg:0;
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;--font-body:'Inter','DM Sans',-apple-system,'Segoe UI',Arial,sans-serif;--font-script:'Playfair Display',Georgia,serif;
  --panel:#161616;--panel-fg:#EEECE7;--on-gold:#FFFFFF;--on-bright:#161616;--announce-fg:#EEECE7;--side:264px;--pad:48px;

  & body{counter-reset:sec}
  & .announce{background:#161616;letter-spacing:.14em}
  & .brand{font-style:italic;font-weight:400;font-size:1.5rem;line-height:1.1;white-space:normal}
  & .brand .mark{display:none}
  & .btn{border-radius:0;font-weight:500;letter-spacing:.14em;font-size:.7rem}
  & .btn-primary{background:var(--ink);color:#fff}
  & .btn-primary:hover{background:var(--gold);color:#fff;transform:none;box-shadow:none}
  & .btn-ghost{border-color:var(--ink)}
  & .eyebrow{letter-spacing:.18em;color:var(--gold)}
  & .hero{padding:56px 0 70px}
  & .hero-top{grid-template-columns:5fr 7fr;gap:70px;align-items:start}
  & .hero-copy{padding-top:70px}
  & .hero-copy::before{content:"N° 01 · 2026";display:block;font-size:.7rem;letter-spacing:.22em;color:var(--ink-faint);margin-bottom:34px;padding-bottom:12px;border-bottom:1px solid var(--line-strong)}
  & .hero-copy h1{font-weight:400;font-size:clamp(2.8rem,4.8vw,4.6rem);line-height:1.02;letter-spacing:-.01em}
  & .hero-copy .lead{font-size:1rem;max-width:34ch}
  & .hero-collage{grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
  & .hero-collage .big{grid-row:auto;aspect-ratio:3/4;box-shadow:none}
  & .hero-collage .small{aspect-ratio:3/4;box-shadow:none}
  & .hero-collage .small:nth-child(3){margin-top:64px}
  & .hero-collage .small:nth-child(4){margin-top:128px}
  & .hero-collage .sticky-note{display:none}
  & #view-home .section-head{counter-increment:sec}
  & #view-home .section-head .eyebrow::before{content:counter(sec,decimal-leading-zero) "  —  "}
  & .section-head{border-top:1px solid var(--line-strong);padding-top:18px;align-items:baseline}
  & .section-head h2{font-weight:400;font-style:italic;font-size:clamp(2rem,3.6vw,3rem)}
  & .section{padding:70px 0}
  /* staggered masonry */
  & .product-grid{display:block;column-count:3;column-gap:34px}
  & .pcard{break-inside:avoid;margin-bottom:46px;background:transparent;border:none;box-shadow:none;display:flex}
  & .pcard:hover{transform:none;box-shadow:none}
  & .pimg{aspect-ratio:4/5;background:var(--surface-2)}
  & .pcard:nth-child(3n+2) .pimg{aspect-ratio:1/1}
  & .pcard:nth-child(3n) .pimg{aspect-ratio:3/4}
  & .pbody{padding:14px 0 0;gap:5px;border-top:1px solid var(--line-strong);margin-top:12px}
  & .pcard h4{font-size:1.2rem;font-style:italic;font-weight:400}
  & .pcat{font-size:.64rem;letter-spacing:.18em}
  & .pprice{font-size:.92rem}
  & .pbadge{background:var(--gold);color:#fff;border-radius:0;letter-spacing:.14em}
  & .pbadge.soldout{background:var(--ink)}
  & .pquick{left:0;right:0;bottom:0;border-radius:0;text-align:center;background:var(--ink);color:#fff;padding:13px}
  & .pwish{border-radius:0;box-shadow:none;background:var(--bg)}
  & .step-card{border:none;background:none;border-top:1px solid var(--line-strong)}
  & .step-card:hover{transform:none;box-shadow:none}
  & .step-card .num{font-size:.8rem;letter-spacing:.2em;font-style:normal}
  & .step-card h3{font-style:italic;font-weight:400}
  & .step-card .sc{padding:16px 0}
  & .step-card .si{aspect-ratio:1/1}
  & .chapter-card{aspect-ratio:3/4}
  & .filter-chip{border-radius:0;letter-spacing:.14em;font-size:.66rem;border-color:var(--ink)}
  & .filter-chip.active,& .filter-chip:hover{background:var(--ink);color:#fff}
  & .showcase,& .vote-box,& .newsletter,& .drop-banner{border-radius:0}
  & .lang-switch{border-radius:0;border-color:var(--ink)}
  & footer.site{background:var(--bg);border-top:1px solid var(--line-strong);margin-top:30px}
  @media (min-width:1000px){
    & body{padding-left:calc(var(--side) + var(--pad));padding-right:var(--pad)}
    & .announce{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
    & .design-bar{margin-left:calc(-1 * (var(--side) + var(--pad)));margin-right:calc(-1 * var(--pad))}
    & footer.site{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
    & header.site{position:fixed;left:0;bottom:0;width:var(--side);border-bottom:none;border-right:1px solid var(--line-strong);background:var(--bg);overflow-y:auto;padding:34px 30px}
    & body::before{display:none}
    & .nav-row{flex-direction:column;align-items:flex-start;justify-content:flex-start;height:100%;padding:0;gap:44px}
    & .hamburger{display:none}
    & .navlinks{flex-direction:column;align-items:flex-start;gap:14px;width:100%}
    & .navlinks>a,& .nav-drop>a{font-family:var(--font-display);font-size:1.45rem;font-style:italic;text-transform:none;letter-spacing:0;border-bottom:none;padding:0}
    & .navlinks>a:hover,& .navlinks>a.active,& .nav-drop>a:hover{color:var(--gold)}
    & .nav-drop{width:100%}
    & .nav-drop .care{display:none}
    & .nav-dropmenu{position:static;opacity:1;pointer-events:auto;transform:none;border:none;box-shadow:none;background:none;padding:8px 0 0 2px;min-width:0}
    & .nav-dropmenu::before{display:none}
    & .nav-dropmenu a{padding:4px 0;font-size:.66rem;letter-spacing:.18em;color:var(--ink-soft)}
    & .nav-dropmenu a:hover{background:none;color:var(--gold)}
    & .nav-actions{margin-top:auto;flex-wrap:wrap;gap:8px}
    & .nav-actions .lang-switch{display:flex}
    & .btn-icon{border-radius:0}
    & .hero-copy{padding-top:70px}
  }
  @media (max-width:999px){
    & .product-grid{column-count:2;column-gap:14px}
    & .hero-top{grid-template-columns:1fr;gap:34px}
    & .hero-copy{padding-top:0}
    & .hero-collage .small:nth-child(3){margin-top:30px}
    & .hero-collage .small:nth-child(4){margin-top:60px}
    & .nav-row{padding:14px 0}
    & .brand .mark{display:flex}
  }
}

/* =====================================================================
   3 · JOURNEY — immersive night, floating dock, giant type, rails
   ===================================================================== */
html[data-theme="journey"]{
  --bg:#0B1020;--surface:#151B35;--surface-2:#10162B;--surface-3:#1D2547;
  --ink:#F1EEFF;--ink-soft:#C3BEE0;--ink-faint:#9690BC;
  --gold:#FFC46B;--gold-bright:#FFD89A;--gold-wash:rgba(255,196,107,.12);
  --line:rgba(241,238,255,.12);--line-strong:rgba(241,238,255,.3);
  --good:#6EE7A8;--info:#8EC5FF;--critical:#FF8A8A;--good-wash:rgba(110,231,168,.12);--info-wash:rgba(142,197,255,.12);--critical-wash:rgba(255,138,138,.14);
  --shadow:0 30px 60px -30px rgba(0,0,0,.8);--shadow-sm:0 14px 30px -16px rgba(0,0,0,.7);
  --radius:14px;--radius-lg:28px;
  --font-display:'Bricolage Grotesque','DM Sans',-apple-system,'Segoe UI',Arial,sans-serif;--font-body:'DM Sans',-apple-system,'Segoe UI',Arial,sans-serif;
  --panel:rgba(255,255,255,.06);--panel-fg:#F1EEFF;--on-gold:#1B1330;--on-bright:#1B1330;--announce-fg:#1B1330;
  color-scheme:dark;

  & body{background:radial-gradient(900px 620px at 12% -8%,rgba(124,92,255,.38),transparent 62%),radial-gradient(800px 600px at 92% 6%,rgba(255,122,200,.22),transparent 60%),radial-gradient(900px 700px at 50% 110%,rgba(255,196,107,.12),transparent 60%),var(--bg);background-attachment:fixed;padding-bottom:104px;scroll-behavior:smooth}
  & body::before{display:none}
  & ::selection{color:#1B1330}
  & .announce{background:linear-gradient(90deg,#FFC46B,#FF9DD6,#A99BFF)}
  & .announce-track{font-weight:700}
  /* floating dock navigation */
  & header.site{position:fixed;top:auto;bottom:max(14px,env(safe-area-inset-bottom,0px));left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100% - 20px);border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(16,22,43,.74);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 24px 60px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);z-index:50}
  &[data-switcher="1"] header.site{top:auto}
  & .nav-row{padding:9px 14px;gap:14px;max-width:none}
  & .brand{font-weight:800;letter-spacing:-.03em;font-size:1.05rem;padding-right:10px;margin-right:4px;border-right:1px solid rgba(255,255,255,.16)}
  & .brand .mark{background:linear-gradient(135deg,#FFC46B,#FF7AC8)}
  & .brand .mark svg path{fill:#1B1330}
  & .navlinks{gap:6px}
  & .navlinks>a,& .nav-drop>a{padding:9px 16px;border:none;border-radius:999px;font-size:.78rem;letter-spacing:.04em;text-transform:none;font-weight:600}
  & .navlinks>a:hover,& .navlinks>a.active,& .nav-drop>a:hover,& .nav-drop>a.active{background:rgba(255,255,255,.1);color:var(--ink)}
  & .nav-dropmenu{top:auto;bottom:calc(100% + 18px);background:rgba(16,22,43,.92);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.16);border-radius:22px}
  & .nav-dropmenu::before{top:auto;bottom:-18px}
  & .nav-dropmenu a{text-transform:none;letter-spacing:0;font-size:.9rem;border-radius:12px}
  & .nav-dropmenu a:hover{background:rgba(255,255,255,.1)}
  & .btn-icon{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
  & .lang-switch{border-color:rgba(255,255,255,.18)}
  & .btn{border-radius:999px;letter-spacing:.04em;text-transform:none;font-size:.92rem;font-weight:700;padding:14px 30px}
  & .btn-primary{background:linear-gradient(100deg,#FFC46B,#FF8FD0);color:#1B1330}
  & .btn-primary:hover{background:linear-gradient(100deg,#FFD89A,#FFA8DC);color:#1B1330;box-shadow:0 0 40px rgba(255,150,210,.4)}
  & .btn-ghost{border-color:rgba(255,255,255,.3)}
  & .eyebrow{text-transform:uppercase;letter-spacing:.2em;color:var(--gold)}
  & #toastHost{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  /* hero: centred, enormous, floating pictures */
  & .hero{min-height:calc(100vh - 150px);display:flex;align-items:center;padding:30px 0 40px}
  & .hero-top{display:block;position:relative;width:100%;text-align:center}
  & .hero-copy{position:relative;z-index:2}
  & .hero-copy h1{font-size:clamp(3.6rem,12vw,10rem);font-weight:800;letter-spacing:-.06em;line-height:.88;background:linear-gradient(100deg,#FFC46B 0%,#FF8FD0 48%,#9C8BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
  & .hero-copy .lead{margin:26px auto 0;max-width:46ch;font-size:1.1rem}
  & .hero-actions{justify-content:center}
  & .hero-collage{position:absolute;inset:-30px 0;display:block;pointer-events:none;z-index:0}
  & .hero-collage>*{position:absolute}
  & .hero-collage .sticky-note{display:none}
  & .hero-collage .big{width:min(21vw,290px);left:1%;top:8%;aspect-ratio:3/4;transform:rotate(-9deg);animation:jr-drift 9s ease-in-out infinite;border:1px solid rgba(255,255,255,.2)}
  & .hero-collage .small:nth-child(3){width:min(15vw,210px);right:3%;top:3%;transform:rotate(9deg);animation:jr-drift 11s ease-in-out -3s infinite}
  & .hero-collage .small:nth-child(4){width:min(14vw,200px);right:11%;bottom:0;transform:rotate(-6deg);animation:jr-drift 10s ease-in-out -6s infinite}
  @keyframes jr-drift{0%,100%{translate:0 0}50%{translate:0 -16px}}
  /* giant section heads, rails instead of grids */
  & .section{padding:84px 0}
  & .section-head h2{font-size:clamp(2.4rem,6.4vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:.95}
  & .section-head>p{color:var(--ink-soft)}
  & #homeGrid.product-grid,& .chapters{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;margin-right:-16px;padding-right:16px}
  & #homeGrid .pcard{flex:0 0 min(310px,78vw);scroll-snap-align:start}
  & .chapter-card{flex:0 0 min(250px,62vw);scroll-snap-align:start;aspect-ratio:3/4}
  & .product-grid{gap:20px}
  & .pcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
  & .pcard:hover{transform:translateY(-8px);border-color:rgba(255,196,107,.6);box-shadow:0 30px 60px -28px rgba(255,150,210,.45)}
  & .pimg{margin:10px 10px 0;border-radius:20px}
  & .pbody{padding:16px 18px 20px}
  & .pcard h4{font-weight:700;letter-spacing:-.02em;font-size:1.12rem}
  & .pbadge{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.25)}
  & .pbadge.sale{background:var(--critical);color:#1B1330}
  & .pbadge.new{background:var(--gold);color:#1B1330}
  & .pwish{background:rgba(16,22,43,.7);color:#fff}
  & .pquick{background:var(--gold);color:#1B1330}
  & .steps3{grid-template-columns:1fr;gap:0}
  & .step-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);align-items:center;gap:30px;background:none;border:none;border-top:1px solid var(--line-strong);border-radius:0;padding:34px 0}
  & .step-card:last-child{border-bottom:1px solid var(--line-strong)}
  & .step-card:hover{transform:none;box-shadow:none;padding-left:18px}
  & .step-card{transition:padding .4s ease}
  & .step-card .si{order:2;border-radius:24px;aspect-ratio:4/3}
  & .step-card .sc{order:1;padding:0}
  & .step-card .num{display:block;font-size:clamp(4rem,10vw,8rem);line-height:.9;font-style:normal;font-weight:800;color:transparent;-webkit-text-stroke:1.5px var(--gold);letter-spacing:-.05em}
  & .step-card h3{font-size:clamp(1.6rem,3.6vw,2.8rem);font-weight:700;letter-spacing:-.03em;margin-top:10px}
  & .showcase,& .vote-box,& .newsletter,& .drop-banner{border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);border-radius:36px}
  & .filter-chip{border-color:rgba(255,255,255,.25)}
  & .filter-chip.active,& .filter-chip:hover{background:var(--gold);color:#1B1330;border-color:var(--gold)}
  & .sb-opt.active,& .lang-btn.active{background:var(--gold);color:#1B1330;border-color:var(--gold)}
  & .toast{background:var(--gold);color:#1B1330}
  & footer.site{background:transparent;border-top:1px solid var(--line);padding-bottom:20px}
  @media (max-width:900px){
    & .hero-collage{opacity:.32}
    & .hero-collage .big{width:34vw}
    & .hero-collage .small:nth-child(3){width:26vw}
    & .hero-collage .small:nth-child(4){width:24vw}
    & .step-card{grid-template-columns:1fr}
    & .step-card .si{order:0;aspect-ratio:16/9}
    & .nav-row{padding:8px 10px;gap:8px}
    & .brand{padding-right:0;margin-right:0;border-right:none}
    & .brand>span:last-child{display:none}
  }
}

/* =====================================================================
   4 · BOUTIQUE — easy shopping: search-first header, dense grid, products first
   ===================================================================== */
html[data-theme="boutique"]{
  --bg:#FAFAF7;--surface:#FFFFFF;--surface-2:#F0F0EA;--surface-3:#E4E4DB;
  --ink:#1B1B19;--ink-soft:#4A4A45;--ink-faint:#6A6A63;
  --gold:#1F5C4A;--gold-bright:#86D9B8;--gold-wash:#E1F0E8;
  --line:rgba(27,27,25,.12);--line-strong:rgba(27,27,25,.28);
  --critical:#D6452D;--critical-wash:#FBE5E0;
  --shadow:0 18px 40px -24px rgba(27,27,25,.4);--shadow-sm:0 8px 20px -14px rgba(27,27,25,.35);
  --radius:10px;--radius-lg:16px;
  --font-display:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;--font-body:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --panel:#123A2E;--panel-fg:#FFFFFF;--on-gold:#FFFFFF;--on-bright:#0B2A20;--announce-fg:#FFFFFF;

  & .announce{background:var(--gold);font-weight:600;letter-spacing:.04em}
  & header.site{background:#fff;box-shadow:0 1px 0 var(--line)}
  & .nav-row{flex-wrap:wrap;gap:12px 18px;padding:14px 0 0}
  & .brand{order:1;font-size:1.45rem;font-weight:800;letter-spacing:-.045em}
  & .brand .mark{background:var(--gold)}
  & .nav-actions{display:contents}
  & #openSearch{order:2;flex:1 1 280px;max-width:560px;margin:0 auto;width:auto;height:46px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface-2);justify-content:flex-start;padding:0 18px;gap:10px;transform:none}
  & #openSearch::after{content:attr(aria-label) "…";color:var(--ink-faint);font-size:.92rem}
  & .lang-switch{order:3}
  & #openWish{order:4}
  & #openCart{order:5}
  & .navlinks{order:6;flex:0 0 100%;justify-content:center;gap:38px;border-top:1px solid var(--line);padding:2px 0}
  & .navlinks>a,& .nav-drop>a{font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:none;padding:12px 0}
  & .btn-icon{border-color:var(--line-strong)}
  & .btn{border-radius:999px;letter-spacing:.02em;text-transform:none;font-size:.9rem;font-weight:700;padding:13px 26px}
  & .btn-primary{background:var(--gold);color:#fff}
  & .btn-primary:hover{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
  & .btn-ghost{border-color:var(--ink)}
  & .eyebrow{letter-spacing:.1em;font-weight:700;color:var(--gold)}
  /* product-first home */
  & #view-home{display:flex;flex-direction:column}
  & #view-home>*{order:10;width:100%}
  & #view-home>.hero{order:1}
  & #view-home>#dropBanner{order:2}
  & #view-home>:nth-child(5){order:3}
  & #view-home>:nth-child(4){order:4}
  & #view-home>:nth-child(6){order:5}
  & #view-home>:nth-child(3){order:6}
  & .hero{padding:20px 0 4px}
  & .hero-top{grid-template-columns:5fr 7fr;gap:14px;align-items:stretch;min-height:460px}
  & .hero-copy{background:var(--panel);color:#fff;border-radius:24px;padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
  & .hero-copy h1{color:#fff;font-weight:800;letter-spacing:-.05em;line-height:.98;font-size:clamp(2.4rem,4.4vw,3.9rem)}
  & .hero-copy .eyebrow{color:var(--gold-bright)}
  & .hero-copy .lead{color:rgba(255,255,255,.85);max-width:34ch}
  & .hero-copy .btn-primary{background:#fff;color:var(--panel)}
  & .hero-copy .btn-primary:hover{background:var(--gold-bright);color:var(--on-bright)}
  & .hero-link{color:#fff}
  & .hero-collage{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
  & .hero-collage .big{grid-row:span 2;aspect-ratio:auto;border-radius:24px;box-shadow:none}
  & .hero-collage .small{aspect-ratio:auto;border-radius:24px;box-shadow:none}
  & .hero-collage .sticky-note{background:var(--gold-bright);color:var(--on-bright);font-family:var(--font-body);font-weight:800;font-size:.78rem;border-radius:999px;transform:none;padding:8px 14px}
  & .section{padding:42px 0}
  & .section-head{margin-bottom:20px;align-items:center}
  & .section-head h2{font-weight:800;letter-spacing:-.04em;font-size:clamp(1.5rem,2.6vw,2.1rem)}
  & .section-head>p{font-size:.9rem}
  & .product-grid{grid-template-columns:repeat(5,1fr);gap:14px;margin-top:6px}
  & .pcard{border-radius:16px;background:#fff}
  & .pcard:hover{transform:translateY(-4px)}
  & .pimg{background:#F4F4EE}
  & .pbody{padding:12px 14px 14px;gap:5px}
  & .pcard h4{font-size:.96rem;font-weight:700;letter-spacing:-.01em}
  & .pcat{font-size:.62rem}
  & .pprice{font-weight:700;font-size:1.02rem}
  & .pquick{display:none}
  & .pbadge{background:var(--critical);color:#fff;border-radius:6px;font-weight:700;letter-spacing:.03em}
  & .pbadge.new{background:var(--gold)}
  & .pbadge.soldout{background:var(--ink)}
  & .steps3{gap:14px}
  & .step-card{display:flex;align-items:stretch;border-radius:16px}
  & .step-card .si{flex:0 0 40%;aspect-ratio:auto}
  & .step-card .sc{padding:18px;display:flex;flex-direction:column;justify-content:center}
  & .step-card .num{font-style:normal;font-weight:800;font-size:.8rem;color:var(--gold)}
  & .step-card h3{font-size:1.1rem;font-weight:800;letter-spacing:-.02em}
  & .step-card p{font-size:.82rem}
  & .chapters{gap:12px}
  & .chapter-card{border-radius:16px}
  & .filter-chip{border-radius:999px;font-weight:600;text-transform:none;letter-spacing:0;font-size:.82rem}
  & .filter-chip.active,& .filter-chip:hover{background:var(--gold);border-color:var(--gold);color:#fff}
  & .shop-tools{position:sticky;top:calc(var(--bh,150px) + var(--dbh));z-index:20;background:rgba(250,250,247,.94);backdrop-filter:blur(8px);padding:10px 0;margin-top:-10px}
  & .piece-info{position:sticky;top:calc(var(--bh,150px) + var(--dbh) + 10px);align-self:start}
  & .showcase,& .vote-box,& .newsletter,& .drop-banner{border-radius:24px}
  & .newsletter{padding:44px 30px}
  & footer.site{background:var(--surface-2);margin-top:30px}
  @media (max-width:1200px){& .product-grid{grid-template-columns:repeat(4,1fr)}}
  @media (max-width:980px){& .product-grid{grid-template-columns:repeat(3,1fr)}& .hero-top{grid-template-columns:1fr;min-height:0}& .hero-collage{min-height:300px}& .hero-copy{padding:34px 26px}}
  @media (max-width:860px){
    & .nav-row{flex-wrap:nowrap;padding:12px 0;gap:10px}
    & .brand{flex:1}
    & #openSearch{flex:none;order:2;width:38px;height:38px;border-radius:50%;padding:0;justify-content:center;margin:0;background:none}
    & #openSearch::after{display:none}
    & #openWish{order:3}
    & #openCart{order:4}
    & .piece-info,& .shop-tools{position:static}
    & .step-card .si{flex:0 0 34%}
  }
  @media (max-width:760px){& .product-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
  @media (max-width:520px){
    & .brand{font-size:1.12rem;gap:7px;min-width:0}
    & .brand .mark{width:26px;height:26px}
    & .nav-row{gap:6px}
    & .hamburger,& .nav-actions .btn-icon{width:34px;height:34px}
  }
}

/* =====================================================================
   5 · ZINE — handmade scrapbook: polaroids, tape, handwriting
   ===================================================================== */
html[data-theme="zine"]{
  --bg:#E9E0CC;--surface:#FFFDF6;--surface-2:#F3EBD8;--surface-3:#E2D7BC;
  --ink:#2A2118;--ink-soft:#5B4C3B;--ink-faint:#74644F;
  --gold:#B8341C;--gold-bright:#FFD23F;--gold-wash:#FBE7B0;
  --line:rgba(42,33,24,.2);--line-strong:#2A2118;
  --shadow:0 14px 26px -14px rgba(42,33,24,.55);--shadow-sm:0 8px 16px -10px rgba(42,33,24,.5);
  --radius:4px;--radius-lg:4px;
  --font-display:'Caveat','Segoe Script',cursive;--font-body:'DM Sans',-apple-system,'Segoe UI',Arial,sans-serif;--font-script:'Caveat','Segoe Script',cursive;--font-type:'Special Elite','Courier New',monospace;
  --panel:#2A2118;--panel-fg:#FFF8E8;--on-gold:#FFFFFF;--on-bright:#2A2118;--announce-fg:#FFD23F;

  & body{background-image:linear-gradient(rgba(42,33,24,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(42,33,24,.06) 1px,transparent 1px);background-size:30px 30px;background-attachment:fixed}
  & h1,& h2,& h3{font-weight:700}
  & .announce{background:var(--ink);font-family:var(--font-type);letter-spacing:.04em;text-transform:none;font-size:.82rem}
  & header.site{position:relative;top:0;background:transparent;border-bottom:2px dashed var(--line-strong);backdrop-filter:none}
  &[data-switcher="1"] header.site{top:0}
  & body::before{background:transparent}
  & .nav-row{position:relative;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:14px 0 16px}
  & .hamburger{position:absolute;left:0;top:16px}
  & .brand{order:1;flex:0 0 100%;justify-content:center;font-size:2.8rem;font-weight:700;letter-spacing:0;line-height:1;transform:rotate(-1.5deg)}
  & .brand .mark{display:none}
  & .brand>span{border-bottom:4px solid var(--gold-bright);padding:0 6px}
  & .navlinks{order:2;gap:12px;flex-wrap:wrap;justify-content:center}
  & .navlinks>a,& .nav-drop>a{background:var(--surface);border:2px solid var(--ink);padding:6px 14px;border-radius:4px;font-family:var(--font-type);font-size:.86rem;letter-spacing:0;text-transform:none;box-shadow:3px 3px 0 var(--ink);transition:transform .2s,background .2s}
  & .navlinks>*:nth-child(odd)>a,& .navlinks>a:nth-child(odd){transform:rotate(-1.6deg)}
  & .navlinks>*:nth-child(even)>a,& .navlinks>a:nth-child(even){transform:rotate(1.4deg)}
  & .navlinks>a:hover,& .navlinks>a.active,& .nav-drop>a:hover,& .nav-drop>a.active{background:var(--gold-bright);color:var(--ink);transform:rotate(0) translateY(-2px);border-color:var(--ink)}
  & .nav-dropmenu{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--font-type);top:calc(100% + 10px)}
  & .nav-dropmenu a{font-family:var(--font-type);text-transform:none;letter-spacing:0;font-size:.86rem}
  & .nav-dropmenu a:hover{background:var(--gold-bright)}
  & .nav-actions{position:absolute;right:0;top:16px}
  & .btn-icon{border:2px solid var(--ink);background:var(--surface);box-shadow:2px 2px 0 var(--ink)}
  & .btn-icon:hover{background:var(--gold-bright);color:var(--ink);border-color:var(--ink)}
  & .count-badge{background:var(--gold);color:#fff}
  & .btn{border:2px solid var(--ink);border-radius:4px;font-family:var(--font-type);text-transform:none;letter-spacing:.01em;font-size:.98rem;font-weight:400;box-shadow:4px 4px 0 var(--ink);background:var(--surface);color:var(--ink);padding:13px 24px;transition:transform .15s,box-shadow .15s,background .2s}
  & .btn:hover{transform:translate(-2px,-2px) rotate(-.6deg);box-shadow:6px 6px 0 var(--ink)}
  & .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
  & .btn-primary{background:var(--gold);color:#fff}
  & .btn-primary:hover{background:var(--ink);color:var(--gold-bright)}
  & .btn-ghost{background:var(--surface)}
  & .btn-ghost:hover{background:var(--gold-bright);color:var(--ink)}
  & .btn-gold{background:var(--gold-bright);color:var(--ink)}
  & .eyebrow{font-family:var(--font-type);text-transform:none;letter-spacing:.02em;font-size:.88rem;background:var(--gold-bright);color:var(--ink);padding:3px 10px;display:inline-block;transform:rotate(-1.5deg)}
  & .hero{padding:44px 0 80px}
  & .hero-top{grid-template-columns:1fr 1fr;gap:40px}
  & .hero-copy h1{font-size:clamp(4rem,10vw,8rem);line-height:.82;transform:rotate(-2.5deg);color:var(--ink);font-weight:700}
  & .hero-copy h1::after{content:"";display:block;height:14px;width:70%;margin-top:10px;background:repeating-linear-gradient(90deg,var(--gold) 0 14px,transparent 14px 22px);opacity:.9;transform:skewX(-20deg)}
  & .hero-copy .eyebrow{margin-bottom:20px}
  & .hero-copy .lead{font-family:var(--font-type);font-size:1.05rem;color:var(--ink);max-width:34ch;transform:rotate(-.6deg)}
  & .hero-collage{display:block;height:min(600px,62vw);position:relative}
  & .hero-collage .big,& .hero-collage .small{position:absolute;aspect-ratio:auto;overflow:visible;background:#fff;padding:10px 10px 46px;box-shadow:var(--shadow);border-radius:2px}
  & .hero-collage .big img,& .hero-collage .small img{height:100%;border-radius:0}
  & .hero-collage .big{width:60%;height:78%;left:0;top:4%;transform:rotate(-4deg);grid-row:auto}
  & .hero-collage .small:nth-child(3){width:40%;height:42%;right:0;top:0;transform:rotate(6deg)}
  & .hero-collage .small:nth-child(4){width:38%;height:40%;right:6%;bottom:0;transform:rotate(-3deg)}
  & .hero-collage .big::before,& .hero-collage .small:nth-child(3)::before{content:"";position:absolute;top:-16px;left:50%;width:96px;height:28px;margin-left:-48px;background:rgba(255,210,63,.78);transform:rotate(-4deg);box-shadow:0 2px 4px rgba(0,0,0,.12);z-index:3}
  & .hero-collage .small:nth-child(4)::before{content:"";position:absolute;top:-14px;left:20px;width:80px;height:26px;background:rgba(255,154,203,.75);transform:rotate(5deg);z-index:3}
  & .hero-collage:hover .big img{transform:none}
  & .sticky-note{background:var(--gold-bright);border-radius:2px;color:var(--ink);box-shadow:3px 5px 0 rgba(42,33,24,.25);font-size:1.3rem;font-weight:700}
  & .sticky-note.n2{background:#FF9ACB}
  & .section-head h2{font-size:clamp(2.6rem,5vw,4.2rem);line-height:.95;text-decoration:underline wavy var(--gold);text-decoration-thickness:3px;text-underline-offset:10px;transform:rotate(-1deg)}
  & .section-head>p{font-family:var(--font-type);font-size:.92rem;color:var(--ink)}
  & .section-head .hero-link{font-family:var(--font-type)}
  & .product-grid{gap:34px 26px}
  & .pcard{background:#fff;border:none;padding:12px 12px 16px;border-radius:2px;box-shadow:var(--shadow);transform:rotate(-1.4deg);position:relative;overflow:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
  & .pcard:nth-child(4n+2){transform:rotate(1.2deg)}
  & .pcard:nth-child(4n+3){transform:rotate(-.7deg)}
  & .pcard:nth-child(4n){transform:rotate(1.8deg)}
  & .pcard::before{content:"";position:absolute;top:-12px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(255,210,63,.75);transform:rotate(-3deg);z-index:3;box-shadow:0 1px 3px rgba(0,0,0,.12)}
  & .pcard:nth-child(3n+2)::before{background:rgba(255,154,203,.75);transform:rotate(4deg)}
  & .pcard:nth-child(3n)::before{background:rgba(146,208,255,.75)}
  & .pcard:hover{transform:rotate(0) translateY(-8px) scale(1.03);z-index:5;box-shadow:0 26px 40px -18px rgba(42,33,24,.6)}
  & .pimg{background:var(--surface-2)}
  & .pbody{padding:14px 4px 0}
  & .pcard h4{font-size:1.7rem;line-height:1;font-weight:700}
  & .pcat{font-family:var(--font-type);text-transform:none;letter-spacing:0;font-size:.78rem}
  & .pprice{font-family:var(--font-type);font-size:1.05rem}
  & .pbadge{font-family:var(--font-type);background:var(--gold);color:#fff;border-radius:2px;transform:rotate(-4deg);text-transform:none;letter-spacing:0;font-size:.74rem;padding:4px 9px}
  & .pbadge.new{background:var(--gold-bright);color:var(--ink)}
  & .pbadge.soldout{background:var(--ink)}
  & .pwish{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
  & .pquick{font-family:var(--font-type);text-transform:none;letter-spacing:0;border-radius:2px;border:2px solid var(--ink);background:var(--gold-bright);font-size:.78rem}
  & .step-card{background:#fff;border:none;box-shadow:var(--shadow);border-radius:2px;padding:12px 12px 8px;position:relative;transform:rotate(-1.2deg)}
  & .step-card:nth-child(2){transform:rotate(1.4deg)}
  & .step-card:nth-child(3){transform:rotate(-.6deg)}
  & .step-card:hover{transform:rotate(0) translateY(-6px)}
  & .step-card::before{content:"";position:absolute;top:-12px;left:50%;width:76px;height:22px;margin-left:-38px;background:rgba(255,210,63,.75);transform:rotate(-3deg);z-index:3}
  & .step-card .num{font-style:normal;font-size:2.6rem;color:var(--gold);font-weight:700;line-height:1}
  & .step-card h3{font-size:1.9rem;line-height:1}
  & .step-card p{font-family:var(--font-type);font-size:.84rem}
  & .chapters{gap:22px}
  & .chapter-card{border:10px solid #fff;border-bottom-width:30px;border-radius:2px;box-shadow:var(--shadow);aspect-ratio:3/4;transform:rotate(-1.5deg)}
  & .chapter-card:nth-child(even){transform:rotate(1.6deg)}
  & .chapter-card:hover{transform:rotate(0) translateY(-6px)}
  & .chapter-card h4{font-size:1.5rem}
  & .stylebar,& .contact-side,& .success-card,& .os-panel,& .rev-card,& .rev-summary,& .rev-form,& .engrave-box,& .gift-box,& .pay-option{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--surface)}
  & .piece-main,& .sb-preview{border:10px solid #fff;border-bottom-width:10px;box-shadow:var(--shadow)}
  & .filter-chip,& .sb-opt{font-family:var(--font-type);text-transform:none;letter-spacing:0;font-size:.88rem;border:2px solid var(--ink);border-radius:4px;background:var(--surface)}
  & .filter-chip.active,& .filter-chip:hover,& .sb-opt.active{background:var(--gold);color:#fff;border-color:var(--ink)}
  & .vote-options .sb-opt{background:transparent;color:#fff;border-color:#fff}
  & .showcase,& .vote-box,& .newsletter,& .drop-banner{border:3px dashed var(--gold-bright);border-radius:4px}
  & .newsletter,& .vote-box{transform:rotate(-.5deg)}
  & input,& select,& textarea{border:2px solid var(--ink);border-radius:4px;background:var(--surface)}
  & .lang-switch{border:2px solid var(--ink);border-radius:4px;background:var(--surface)}
  & .lang-btn{font-family:var(--font-type)}
  & .lang-btn.active{background:var(--ink);color:var(--gold-bright)}
  & .toast{font-family:var(--font-type);background:var(--ink);color:var(--gold-bright);border-radius:4px}
  & .drawer{border-left:3px solid var(--ink)}
  & .drawer.left{border-left:none;border-right:3px solid var(--ink)}
  & .modal,& .search-panel{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
  & footer.site{background:var(--surface-3);border-top:3px dashed var(--ink)}
  & .foot-col h5{font-family:var(--font-type);text-transform:none;letter-spacing:0;font-size:.9rem}
  & .pay-badge{font-family:var(--font-type);border:2px solid var(--ink);border-radius:2px}
  @media (max-width:900px){
    & .hero-top{grid-template-columns:1fr}
    & .hero-collage{height:min(520px,110vw);margin-top:10px}
    & .brand{font-size:2.1rem}
    & .nav-row{padding-top:58px}
    & .hamburger,& .nav-actions{top:10px}
  }
  @media (max-width:860px){
    & .navlinks{display:none}
    & .brand{flex:0 0 100%;order:1;margin-top:2px}
  }
}

/* ---------- mobile product boxes: one consistent rhythm in every design ---------- */
@media (max-width:760px){
  html[data-theme] .product-grid{gap:14px}
  html[data-theme] .pcard{min-width:0}
  html[data-theme] .pbody{gap:6px}
  html[data-theme] .pcard h4{line-height:1.15}
  html[data-theme] .pcard select{height:40px;padding:0 10px;font-size:.8rem}
  html[data-theme] .pcard .btn{height:42px;padding:0 8px;font-size:.68rem;letter-spacing:.08em;white-space:normal;line-height:1.1}
  html[data-theme] .pprice{margin-top:auto;padding-top:4px}
  html[data-theme="maison"] .product-grid{gap:34px 14px}
  html[data-theme="maison"] .pbody{padding:14px 2px 0}
  html[data-theme="gallery"] .product-grid{display:grid;grid-template-columns:repeat(2,1fr);column-count:auto;gap:30px 14px}
  html[data-theme="gallery"] .pcard{margin-bottom:0}
  html[data-theme="gallery"] .pcard .pimg,html[data-theme="gallery"] .pcard:nth-child(n) .pimg{aspect-ratio:4/5}
  html[data-theme="gallery"] .pbody{padding:12px 0 0;margin-top:10px}
  html[data-theme="journey"] .pimg{margin:8px 8px 0;border-radius:16px}
  html[data-theme="journey"] .pbody{padding:12px 12px 14px}
  html[data-theme="journey"] .pcard h4{font-size:1rem}
  html[data-theme="boutique"] .pbody{padding:10px 10px 12px}
  html[data-theme="zine"] .product-grid{gap:30px 16px}
  html[data-theme="zine"] .pcard{padding:8px 8px 12px;transform:rotate(-.8deg)}
  html[data-theme="zine"] .pcard:nth-child(even){transform:rotate(.8deg)}
  html[data-theme="zine"] .pcard::before{width:54px;height:18px;margin-left:-27px;top:-10px}
  html[data-theme="zine"] .pbody{padding:10px 2px 0}
  html[data-theme="zine"] .pcard h4{font-size:1.35rem}
}
@media (max-width:360px){
  html[data-theme] .product-grid{gap:10px}
  html[data-theme] .pcard h4{font-size:.9rem}
}