/* =====================================================================
   EERA FASHION HOUSE — couture atelier stylesheet
   Palette: royal purple · antique gold · ivory · rose accent
   Type:    Playfair Display (display) × Jost (sans)
   ===================================================================== */

:root{
  /* Royal purple family (primary brand) */
  --wine:#5C0B24; --wine-deep:#2A0410; --wine-800:#470D22;
  --plum:#8A1E3F; --lav:#D9A9C6;
  /* Antique gold */
  --gold:#C8A24E; --gold-soft:#E0C68E; --gold-pale:#F2E4C0;
  /* Warm ivory / cream backgrounds */
  --ivory:#F8F1EA; --ivory-2:#EFE2D7; --cream:#FDFAF6;
  /* Neutrals, shifted very slightly purple */
  --ink:#2B1119; --ink-soft:#5A3F47; --muted:#96828A;
  /* Accents */
  --rose:#B4728F; --teal:#3E5C86; --green:#4E7D52;
  --line:#E6D6C9; --line-soft:#F2E7DD;
  --radius:14px; --radius-lg:24px; --radius-sm:9px;
  --shadow-sm:0 4px 14px rgba(44,6,18,.08);
  --shadow:0 18px 44px rgba(44,6,18,.14);
  --shadow-lg:0 34px 80px rgba(34,4,14,.24);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--gold-pale);color:var(--wine-deep)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0;color:var(--ink)}

/* ---------- shared bits ---------- */
.page{display:block}
.section{max-width:var(--maxw);margin:0 auto;padding:78px 24px}
.center{text-align:center}
.eyebrow{
  display:inline-block;font-family:var(--sans);font-weight:500;font-size:12px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
.eyebrow-light{color:var(--gold-soft)}
.section-title{font-size:clamp(29px,4.2vw,46px);letter-spacing:.005em;margin-top:8px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px}
.section-head.center{flex-direction:column;align-items:center;text-align:center;gap:6px}
.seam{display:inline-block;width:58px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin-bottom:18px;position:relative}
.section-head.center .seam::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border:1px solid var(--gold);transform:translate(-50%,-50%) rotate(45deg)}
.link-more{font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--wine);border-bottom:1px solid transparent;transition:border-color .25s;white-space:nowrap}
.link-more:hover{border-color:var(--wine)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--wine);--fg:#fff;--bd:var(--wine);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;padding:14px 30px;border-radius:40px;border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s;
  box-shadow:0 8px 22px rgba(92,11,36,.22);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(92,11,36,.32)}
.btn:active{transform:translateY(0)}
.btn-gold{--bg:linear-gradient(120deg,var(--gold-soft),var(--gold));--fg:var(--wine-deep);--bd:transparent;box-shadow:0 10px 26px rgba(200,162,78,.34)}
.btn-gold:hover{box-shadow:0 16px 34px rgba(200,162,78,.44)}
.btn-outline{--bg:transparent;--fg:var(--wine);--bd:var(--wine);box-shadow:none}
.btn-outline:hover{--bg:var(--wine);--fg:#fff}
.btn-primary{--bg:var(--wine);--fg:#fff}
.btn-wa{--bg:#25D366;--fg:#0a3d20;--bd:transparent;box-shadow:0 10px 24px rgba(37,211,102,.3)}
.btn-wa:hover{box-shadow:0 16px 32px rgba(37,211,102,.42)}
.btn-lg{padding:16px 38px;font-size:15px}

/* ---------- announcement ---------- */
.announce{background:var(--wine-deep);color:var(--gold-pale);text-align:center;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;font-weight:400}
.announce span{opacity:.94}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(252,247,242,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);transition:box-shadow .3s,background .3s}
.nav.is-stuck{box-shadow:0 6px 24px rgba(46,6,17,.10);background:rgba(252,247,242,.95)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:76px;display:flex;align-items:center;gap:20px}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:0;padding:8px;order:-1}
.nav-burger span{display:block;height:1.6px;width:100%;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .25s}
.nav-burger.is-open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand-img{height:50px;width:auto;max-width:230px;object-fit:contain;display:block}
.brand-mark-img{height:46px;width:auto;max-width:60px;object-fit:contain;display:block}
.brand-mark{
  width:44px;height:44px;flex:none;color:transparent;font-size:0;
  background:url('../../uploads/site/logo.svg') center/contain no-repeat;
}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:.02em;color:var(--wine);}
.brand-sub{font-family:var(--sans);font-weight:400;font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-top:4px}

.menu{display:flex;align-items:center;gap:34px}
.menu>a,.menu-drop>a{position:relative;font-size:13.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:6px 0;transition:color .25s;display:inline-flex;align-items:center;gap:6px}
.menu>a:hover,.menu-drop>a:hover,.menu .is-active{color:var(--wine)}
.menu>a::after,.menu-drop>a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.menu>a:hover::after,.menu-drop>a:hover::after,.menu .is-active::after{width:100%}
.caret{width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .3s}
.menu-drop{position:relative}
.menu-drop:hover .caret{transform:rotate(-135deg);margin-top:2px}
.drop-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:210px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s var(--ease);margin-top:14px}
.menu-drop:hover .drop-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-panel::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--cream);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.drop-panel a{display:block;padding:10px 14px;border-radius:8px;font-size:14px;letter-spacing:.02em;color:var(--ink-soft);text-transform:none;transition:background .2s,color .2s}
.drop-panel a:hover{background:var(--ivory-2);color:var(--wine)}

.nav-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid transparent;background:none;color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.icon-btn:hover{background:var(--ivory-2);color:var(--wine)}
.icon-btn.wa:hover{color:#128C4B}

form.nav-search{max-height:0;overflow:hidden;transition:max-height .38s var(--ease),padding .38s var(--ease);border-top:1px solid transparent;display:flex;gap:10px;align-items:center;padding:0 24px}
form.nav-search.is-open{max-height:120px;padding:14px 24px 18px;border-top-color:var(--line-soft)}
form.nav-search input{flex:1;border:1px solid var(--line);background:var(--cream);border-radius:40px;padding:12px 20px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;transition:border-color .25s}
form.nav-search input:focus{border-color:var(--gold)}
form.nav-search button{border:0;background:var(--wine);color:#fff;border-radius:40px;padding:12px 24px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}

/* ---------- hero (couture, layered purple + gold) ---------- */
.hero{
  position:relative;min-height:clamp(600px,90vh,880px);
  display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  overflow:hidden;isolation:isolate;
  background:
    var(--hero,none) center/cover no-repeat,
    radial-gradient(130% 100% at 50% -10%, #7A1A3A 0%, transparent 55%),
    linear-gradient(160deg,#440A20 0%,#2A0410 55%,#1B0207 100%);
}
/* layered scrims: depth + text legibility */
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(30,3,12,.44) 0%,rgba(30,3,12,.18) 40%,rgba(28,3,11,.80) 100%),
    radial-gradient(95% 75% at 50% 46%,transparent 38%,rgba(24,2,9,.55) 100%);
}
/* subtle gold vignette frame (matches the logo card) */
.hero::before{content:"";position:absolute;inset:22px;z-index:2;pointer-events:none;
  border:1px solid rgba(216,178,110,.30);border-radius:8px;
  box-shadow:inset 0 0 60px rgba(216,178,110,.06);
}
/* floating gold + lavender glows */
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(circle at 15% 28%,rgba(216,178,110,.20),transparent 22%),
    radial-gradient(circle at 85% 70%,rgba(217,169,198,.18),transparent 24%);
  animation:heroGlow 12s ease-in-out infinite alternate}
@keyframes heroGlow{from{opacity:.55;transform:translateY(0)}to{opacity:1;transform:translateY(-14px)}}

.hero-content{position:relative;z-index:3;max-width:880px;padding:44px 26px}
.hero-orn{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:22px;color:var(--gold-soft)}
.hero-orn::before,.hero-orn::after{content:"";height:1px;width:clamp(30px,7vw,66px);background:linear-gradient(90deg,transparent,var(--gold-soft))}
.hero-orn::after{background:linear-gradient(90deg,var(--gold-soft),transparent)}
.hero-orn span{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap}
.hero-content .hero-orn{opacity:0;transform:translateY(20px);animation:heroUp .95s var(--ease) .12s forwards}
.hero-title{color:#fff;font-size:clamp(44px,7.6vw,92px);font-weight:600;line-height:1.03;letter-spacing:.004em;text-shadow:0 6px 42px rgba(0,0,0,.38)}
.hero-title em{font-style:italic;color:var(--gold-soft)}
.hero-title b{font-weight:600;color:var(--gold-soft)}
.hero-sub{max-width:580px;margin:24px auto 36px;font-size:clamp(15px,1.6vw,18.5px);color:rgba(255,255,255,.9);font-weight:300;line-height:1.75}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-ghost-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55);box-shadow:none;backdrop-filter:blur(2px)}
.btn-ghost-light:hover{--bg:rgba(255,255,255,.14);--bd:#fff;box-shadow:none}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;width:24px;height:38px;border:1.5px solid rgba(255,255,255,.5);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scroll-hint span{width:3px;height:8px;border-radius:3px;background:var(--gold-soft);animation:scroll 1.8s var(--ease) infinite}
@keyframes scroll{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}80%{opacity:0;transform:translateY(9px)}100%{opacity:0}}

/* ---------- categories ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;background:var(--ivory-2);box-shadow:var(--shadow-sm)}
.cat-card.cat-wide{grid-column:span 2;aspect-ratio:auto}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cat-card:hover img{transform:scale(1.06)}
.cat-noimg{width:100%;height:100%;background:linear-gradient(140deg,var(--wine),var(--wine-deep))}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(34,4,14,.74));transition:background .4s}
.cat-card:hover .cat-overlay{background:linear-gradient(180deg,rgba(34,4,14,.18) 20%,rgba(34,4,14,.8))}
.cat-label{position:absolute;left:0;right:0;bottom:0;padding:26px;color:#fff;font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:600;display:flex;flex-direction:column;gap:6px;z-index:2}
.cat-label i{font-family:var(--sans);font-style:normal;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease)}
.cat-card:hover .cat-label i{opacity:1;transform:translateY(0)}

/* ---------- product grid & cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
.card{display:block;background:var(--cream);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s;box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ivory-2);margin:0}
.card-img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .5s}
.card-img-hover{position:absolute;inset:0;opacity:0}
.card:hover .card-img{transform:scale(1.05)}
.card:hover .card-img-hover{opacity:1}
.card-noimg{display:grid;place-items:center;font-family:var(--serif);letter-spacing:.3em;color:var(--gold-soft);background:linear-gradient(140deg,var(--wine),var(--wine-deep));color:#ECD199}
.card-tag{position:absolute;top:14px;left:14px;z-index:3;background:var(--rose);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:30px}
.card-view{position:absolute;left:50%;bottom:16px;transform:translate(-50%,14px);z-index:3;background:rgba(255,253,251,.94);color:var(--wine);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:9px 22px;border-radius:30px;opacity:0;transition:opacity .35s,transform .35s var(--ease);backdrop-filter:blur(4px)}
.card:hover .card-view{opacity:1;transform:translate(-50%,0)}
.card-body{padding:18px 18px 22px;text-align:center}
.card-cat{font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.card-name{font-size:19px;font-weight:600;margin:7px 0 10px;line-height:1.25;color:var(--ink)}
.card-price{display:flex;align-items:baseline;justify-content:center;gap:10px}
.card-price .now{font-family:var(--sans);font-weight:500;font-size:16px;color:var(--wine)}
.card-price .was{font-size:13.5px;color:var(--muted);text-decoration:line-through}

/* ---------- about teaser ---------- */
.about-teaser{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.about-media img{width:100%;height:100%;object-fit:cover}
.about-fallback{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(140deg,var(--wine),var(--wine-deep))}
.about-fallback span{font-family:var(--serif);font-size:120px;color:var(--gold-soft);opacity:.6}
.about-fallback.tall{aspect-ratio:3/4}
.about-copy .section-title{margin:10px 0 18px}
.about-copy p{color:var(--ink-soft);margin:0 0 16px;font-size:16px;line-height:1.8}
.about-copy .btn{margin-top:10px}

/* ---------- trust strip ---------- */
.trust{background:var(--wine);color:#fff}
.trust-inner{max-width:var(--maxw);margin:0 auto;padding:34px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust-item{display:flex;align-items:center;gap:14px;color:#fff}
.trust-item svg{color:var(--gold-soft);flex:none}
.trust-item b{display:block;font-family:var(--serif);font-size:17px;font-weight:600}
.trust-item span{font-size:12.5px;color:rgba(255,255,255,.72);letter-spacing:.02em}

/* ---------- instagram ---------- */
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:36px}
.insta-cell{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--ivory-2)}
.insta-cell img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.insta-cell:hover img{transform:scale(1.08)}
.insta-ig{position:absolute;inset:0;display:grid;place-items:center;background:rgba(92,11,36,.5);opacity:0;transition:opacity .3s}
.insta-cell:hover .insta-ig{opacity:1}

/* ---------- footer ---------- */
.foot{background:var(--wine-deep);color:#fff;padding-top:66px}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px 46px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.foot-mark{width:52px;height:52px;border-radius:12px;background:rgba(255,255,255,.06) url('../../uploads/site/logo.svg') center/64% no-repeat;border:1px solid rgba(222,190,130,.3);margin-bottom:16px}
.foot-brand h3{color:#fff;font-size:24px;margin-bottom:10px}
.foot-brand p{color:rgba(255,255,255,.62);font-size:14px;max-width:300px;line-height:1.7;margin:0 0 20px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);transition:background .25s,color .25s,border-color .25s}
.foot-social a:hover{background:var(--gold);color:var(--wine-deep);border-color:var(--gold)}
.foot-col h4{color:var(--gold-soft);font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.foot-col a,.foot-addr{display:block;color:rgba(255,255,255,.68);font-size:14px;margin-bottom:11px;transition:color .25s}
.foot-col a:hover{color:#fff}
.foot-addr{color:rgba(255,255,255,.5);line-height:1.6}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);padding:22px 24px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.5);letter-spacing:.04em}

/* ---------- floating whatsapp ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.45);transition:transform .3s var(--ease),box-shadow .3s;animation:waPulse 2.6s infinite}
.wa-float:hover{transform:scale(1.08)}
@keyframes waPulse{0%{box-shadow:0 12px 30px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.35)}70%{box-shadow:0 12px 30px rgba(37,211,102,.45),0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 12px 30px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,0)}}

/* ---------- shop ---------- */
.shop-hero{max-width:var(--maxw);margin:0 auto;padding:56px 24px 20px;text-align:center}
.shop-title{font-size:clamp(34px,5vw,54px);margin-top:8px}
.shop-note{color:var(--muted);margin-top:12px;font-size:15px}
.shop-filters{max-width:var(--maxw);margin:0 auto;padding:6px 24px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{padding:9px 20px;border-radius:40px;border:1px solid var(--line);background:var(--cream);font-size:13px;letter-spacing:.04em;color:var(--ink-soft);transition:all .25s}
.chip:hover{border-color:var(--gold);color:var(--wine)}
.chip.is-on{background:var(--wine);border-color:var(--wine);color:#fff}
.shop-list{padding-top:34px}
.result-count{text-align:center;color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 30px}

/* ---------- empty states ---------- */
.empty{text-align:center;padding:70px 20px;max-width:460px;margin:0 auto}
.empty-mark{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:36px;color:var(--gold);background:var(--ivory-2);border:1px solid var(--line)}
.empty h3{font-size:26px;margin-bottom:10px}
.empty p{color:var(--muted);margin:0 0 24px}

/* ---------- breadcrumbs ---------- */
.crumbs{max-width:var(--maxw);margin:0 auto;padding:22px 24px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--wine)}
.crumbs i{font-style:normal;opacity:.5}
.crumbs span{color:var(--ink)}

/* ---------- product page ---------- */
.pv{max-width:var(--maxw);margin:0 auto;padding:30px 24px 60px;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.pv-gallery{position:sticky;top:96px}
.pv-stage{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;background:var(--ivory-2);box-shadow:var(--shadow)}
.pv-stage img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.pv-noimg{width:100%;height:100%;display:grid;place-items:center;font-family:var(--serif);letter-spacing:.3em;color:#ECD199;background:linear-gradient(140deg,var(--wine),var(--wine-deep))}
.pv-badge{position:absolute;top:16px;left:16px;background:var(--rose);color:#fff;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:30px}
.pv-thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.pv-thumb{width:74px;height:96px;border-radius:10px;overflow:hidden;border:1.5px solid transparent;background:var(--ivory-2);padding:0;transition:border-color .25s,transform .25s}
.pv-thumb img{width:100%;height:100%;object-fit:cover}
.pv-thumb:hover{transform:translateY(-2px)}
.pv-thumb.is-on{border-color:var(--gold)}
.pv-videowrap{margin-top:16px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.pv-video{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.pv-video-link{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;color:var(--wine);font-weight:500;border:1px solid var(--line);border-radius:40px}

.pv-info{padding-top:6px}
.pv-name{font-size:clamp(30px,3.4vw,44px);margin:8px 0 12px;line-height:1.1}
.pv-code{font-size:13px;letter-spacing:.04em;color:var(--muted);margin-bottom:20px}
.pv-code b{color:var(--ink);font-weight:600;letter-spacing:.08em}
.pv-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pv-price .now{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--wine)}
.pv-price .was{font-size:18px;color:var(--muted);text-decoration:line-through}
.pv-price .off{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);background:rgba(180,114,143,.12);padding:5px 11px;border-radius:30px}
.pv-tax{font-size:13px;color:var(--muted);margin:8px 0 0}
.pv-short{font-size:16.5px;color:var(--ink-soft);line-height:1.7;margin:22px 0 0;padding-top:22px;border-top:1px solid var(--line-soft)}
.pv-block{margin-top:26px}
.pv-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.pv-label span{color:var(--wine);font-weight:600}
.pv-swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatch{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:none;padding:4px;transition:border-color .25s,transform .2s}
.swatch span{display:block;width:100%;height:100%;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatch:hover{transform:translateY(-2px)}
.swatch.is-on{border-color:var(--gold)}
.swatch.is-on span{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 2px var(--cream)}

.pv-buyrow{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:40px;background:var(--cream);overflow:hidden}
.qty button{width:46px;height:52px;border:0;background:none;font-size:20px;color:var(--wine);display:grid;place-items:center;transition:background .2s}
.qty button:hover{background:var(--ivory-2)}
.qty input{width:44px;height:52px;border:0;background:none;text-align:center;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--ink);outline:none}
.pv-order{flex:1;min-width:180px;height:52px;padding:0 26px}
.pv-wa{margin-top:14px;width:100%}

.pv-meta{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.pv-meta div{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:14px}
.pv-meta svg{color:var(--gold)}
.pv-desc{margin-top:24px;border-top:1px solid var(--line-soft);padding-top:8px}
.pv-desc summary{cursor:pointer;list-style:none;padding:14px 0;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.pv-desc summary::-webkit-details-marker{display:none}
.pv-desc summary::after{content:"+";font-family:var(--sans);font-size:22px;color:var(--gold);transition:transform .3s}
.pv-desc[open] summary::after{content:"–"}
.pv-desc p{color:var(--ink-soft);line-height:1.8;margin:0 0 14px;font-size:15.5px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal.is-open{opacity:1;visibility:visible}
.modal-backdrop{position:absolute;inset:0;background:rgba(36,4,14,.55);backdrop-filter:blur(4px)}
.modal-card{position:relative;z-index:2;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--cream);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:34px;transform:translateY(20px) scale(.98);transition:transform .35s var(--ease)}
.modal.is-open .modal-card{transform:translateY(0) scale(1)}
.modal-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border:0;border-radius:50%;background:var(--ivory-2);color:var(--ink-soft);font-size:22px;line-height:1;display:grid;place-items:center;transition:background .2s,color .2s}
.modal-x:hover{background:var(--wine);color:#fff}
.modal-head{margin-bottom:22px}
.modal-head h3{font-size:26px;margin:6px 0 6px}
.modal-sum{color:var(--wine);font-weight:500;font-size:14.5px;letter-spacing:.02em}

.order-form label,.contact-form label{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;font-weight:500}
.order-form input,.order-form textarea,.contact-form input,.contact-form textarea{
  width:100%;margin-top:7px;border:1px solid var(--line);background:var(--cream);border-radius:10px;
  padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s;text-transform:none;letter-spacing:normal;
}
.order-form input:focus,.order-form textarea:focus,.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,78,.14)}
.order-form textarea,.contact-form textarea{resize:vertical}
.of-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.of-row-3{grid-template-columns:1fr 1fr 1fr}
.opt{text-transform:none;letter-spacing:normal;color:var(--muted);font-weight:400}
.of-submit{width:100%;margin-top:8px}
.of-fine{font-size:12px;color:var(--muted);text-align:center;margin:14px 0 0;line-height:1.6;text-transform:none;letter-spacing:normal}

/* ---------- order confirmation ---------- */
.confirm{display:flex;justify-content:center}
.confirm-card{max-width:560px;width:100%;text-align:center;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:46px 38px;box-shadow:var(--shadow)}
.confirm-tick{margin:0 auto 18px;width:64px;height:64px;display:grid;place-items:center}
.confirm-title{font-size:34px;margin:8px 0 10px}
.confirm-num{color:var(--muted);font-size:14px;margin:0 0 26px}
.confirm-num b{color:var(--wine);letter-spacing:.06em}
.confirm-sum{display:flex;gap:18px;align-items:center;text-align:left;background:var(--ivory-2);border-radius:var(--radius);padding:16px;margin-bottom:26px}
.confirm-sum img{width:78px;height:100px;object-fit:cover;border-radius:10px;flex:none}
.confirm-sum h3{font-size:19px;margin-bottom:5px}
.confirm-sum p{color:var(--muted);font-size:13px;margin:0}
.confirm-total{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--wine);margin-top:8px}
.confirm-msg{color:var(--ink-soft);line-height:1.7;margin:0 0 26px;font-size:15px}
.confirm-card .btn-wa{margin-bottom:18px}

/* ---------- page hero (about / contact) ---------- */
.page-hero{max-width:820px;margin:0 auto;padding:66px 24px 8px;text-align:center}
.page-hero-title{font-size:clamp(36px,5.4vw,58px);margin-top:10px}
.page-hero-sub{color:var(--muted);margin-top:14px;font-size:16px}

/* ---------- about full ---------- */
.about-full{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.about-full-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.about-full-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.about-full-copy p{color:var(--ink-soft);font-size:17px;line-height:1.85;margin:0 0 20px}
.about-full-copy p:first-child::first-letter{font-family:var(--serif);font-size:62px;float:left;line-height:.8;padding:6px 12px 0 0;color:var(--wine)}
.values{background:var(--ivory-2)}
.values-inner{max-width:var(--maxw);margin:0 auto;padding:66px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.value-num{font-family:var(--serif);font-size:36px;color:var(--gold);display:block;margin-bottom:12px}
.value h3{font-size:22px;margin-bottom:10px}
.value p{color:var(--ink-soft);line-height:1.75;font-size:15px;margin:0}
.cta-band{text-align:center}
.cta-band-inner{background:linear-gradient(135deg,var(--wine),var(--wine-deep));border-radius:var(--radius-lg);padding:64px 32px;color:#fff;box-shadow:var(--shadow)}
.cta-band-inner h2{color:#fff;font-size:clamp(28px,3.6vw,40px);margin-bottom:12px}
.cta-band-inner p{color:rgba(255,255,255,.72);margin:0 0 28px}

/* ---------- contact ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-info .section-title{margin:8px 0 14px}
.contact-lead{color:var(--ink-soft);line-height:1.7;margin:0 0 26px;font-size:16px}
.contact-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.contact-row{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);transition:border-color .25s,transform .25s}
.contact-row:hover{border-color:var(--gold);transform:translateX(3px)}
.contact-ic{width:44px;height:44px;border-radius:50%;background:var(--ivory-2);color:var(--wine);display:grid;place-items:center;flex:none}
.contact-row small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.contact-row b{font-size:15.5px;color:var(--ink);font-weight:600}
.contact-ig{color:var(--muted);margin-top:22px;font-size:15px}
.contact-ig a{color:var(--wine);font-weight:500;border-bottom:1px solid transparent;transition:border-color .2s}
.contact-ig a:hover{border-color:var(--wine)}
.contact-form-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-sm)}
.cf-title{font-size:26px;margin-bottom:22px}
.cf-error{background:rgba(180,114,143,.1);border:1px solid rgba(180,114,143,.28);color:#8A3560;padding:12px 15px;border-radius:10px;font-size:14px;margin-bottom:18px}
.contact-sent{text-align:center;padding:20px 6px}
.contact-sent h3{font-size:26px;margin:6px 0 10px}
.contact-sent p{color:var(--ink-soft);margin:0 0 22px}

/* ---------- reveal animation ---------- */
.reveal{opacity:1;transform:none}
.js-on .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-on .reveal.in{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
  .about-teaser,.about-full,.contact-wrap{grid-template-columns:1fr;gap:34px}
  .pv{grid-template-columns:1fr;gap:34px}
  .pv-gallery{position:static}
}
@media (max-width:820px){
  .section{padding:56px 20px}
  .menu,.nav-actions .icon-btn:not(.wa){display:none}
  .nav-burger{display:flex}
  .nav-inner{height:66px;gap:12px}
  .brand{margin-right:0}
  /* mobile drawer */
  .menu{position:fixed;inset:0 0 0 auto;top:0;width:min(320px,86vw);height:100vh;background:var(--cream);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:96px 30px 40px;box-shadow:var(--shadow-lg);transform:translateX(105%);transition:transform .4s var(--ease);display:flex;z-index:65;overflow-y:auto}
  .menu.is-open{transform:translateX(0)}
  .menu>a,.menu-drop{width:100%;border-bottom:1px solid var(--line-soft)}
  .menu>a{padding:18px 0;font-size:15px}
  .menu-drop>a{padding:18px 0;font-size:15px;width:100%}
  .menu>a::after,.menu-drop>a::after{display:none}
  .caret{margin-left:auto}
  .drop-panel{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:none;padding:0 0 14px 12px;margin:0;min-width:0}
  .drop-panel::before{display:none}
  .drop-panel a{padding:10px 0;color:var(--muted)}
  .cat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .cat-card.cat-wide{grid-column:span 2}
  .trust-inner{grid-template-columns:1fr 1fr;gap:22px 16px}
  .foot-inner{grid-template-columns:1fr 1fr;gap:32px 24px}
}
@media (max-width:520px){
  .product-grid{grid-template-columns:1fr 1fr;gap:16px 12px}
  .card-body{padding:14px 12px 18px}
  .card-name{font-size:16px}
  .insta-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .cat-grid{grid-template-columns:1fr}
  .cat-card,.cat-card.cat-wide{grid-column:auto;aspect-ratio:4/5}
  .of-row,.of-row-3{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr;gap:30px}
  .trust-inner{grid-template-columns:1fr}
  .modal-card,.contact-form-card,.confirm-card{padding:26px 20px}
  .pv-buyrow{flex-direction:column}
  .qty{width:100%;justify-content:space-between}
  .qty input{flex:1}
  .pv-order{width:100%}
  .hero{min-height:78vh}
  .wa-float{width:52px;height:52px;right:16px;bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* =====================================================================
   COUPON FIELD + ORDER TOTALS (order modal)
   ===================================================================== */
.of-coupon{margin:4px 0 2px}
.of-coupon-row{display:flex;gap:8px}
.of-coupon-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.of-coupon-row input::placeholder{letter-spacing:normal;text-transform:none;font-weight:400}
.of-coupon-row .btn{white-space:nowrap;padding:0 18px}
.of-coupon-msg{margin:8px 2px 0;font-size:13px;font-weight:500}
.of-coupon-msg.is-ok{color:var(--green)}
.of-coupon-msg.is-err{color:var(--rose)}
.of-totals{margin:14px 0 4px;padding:14px 16px;background:var(--ivory);border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
.ot-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-soft);padding:3px 0}
.ot-row.ot-disc{color:var(--green)}
.ot-row.ot-total{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink);font-family:var(--serif);font-size:20px;font-weight:600}
.ot-row.ot-total span:last-child{font-weight:700}

/* discount lines on the order-confirmation screen */
.confirm-lines{display:flex;justify-content:space-between;gap:24px;font-size:14px;color:var(--ink-soft);margin:2px 0}
.confirm-lines.confirm-disc{color:var(--green)}

/* =====================================================================
   POPUP ADS
   ===================================================================== */
.ep-backdrop{position:fixed;inset:0;background:rgba(36,4,14,.48);backdrop-filter:blur(2px);opacity:0;transition:opacity .28s var(--ease);z-index:1200}
.ep-backdrop.is-open{opacity:1}
.eera-popup{position:fixed;z-index:1210;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.eera-popup.is-open{opacity:1;pointer-events:auto}
.ep-card{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.ep-x{position:absolute;top:10px;right:12px;z-index:3;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.82);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.ep-x:hover{background:#fff}
.ep-media{height:172px;background:var(--ivory-2) center/cover no-repeat}
.ep-text{padding:22px 24px 26px}
.ep-title{font-family:var(--serif);font-size:24px;line-height:1.15;color:var(--wine);font-weight:600;margin-bottom:8px}
.ep-body{font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.ep-code{display:flex;align-items:stretch;gap:0;margin:16px 0 4px;border:1.5px dashed var(--gold);border-radius:10px;overflow:hidden}
.ep-code-val{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;letter-spacing:.14em;font-size:18px;color:var(--wine);background:var(--gold-pale);padding:11px 14px}
.ep-copy{border:0;background:var(--wine);color:#fff;font:600 13px/1 var(--sans);letter-spacing:.04em;padding:0 18px;cursor:pointer;transition:background .2s}
.ep-copy:hover{background:var(--wine-deep)}
.ep-cta{margin-top:16px;width:100%;justify-content:center}

/* centered modal sizes */
.eera-popup.ep-small,.eera-popup.ep-medium,.eera-popup.ep-large{
  top:50%;left:50%;transform:translate(-50%,-46%) scale(.96);width:92vw
}
.eera-popup.ep-small.is-open,.eera-popup.ep-medium.is-open,.eera-popup.ep-large.is-open{transform:translate(-50%,-50%) scale(1)}
.eera-popup.ep-small{max-width:360px}
.eera-popup.ep-medium{max-width:470px}
.eera-popup.ep-large{max-width:640px}
.eera-popup.ep-large .ep-media{height:210px}
.eera-popup.ep-small .ep-media{height:140px}

/* corner card */
.eera-popup.ep-corner{width:320px;max-width:calc(100vw - 32px);transform:translateY(18px)}
.eera-popup.ep-corner.is-open{transform:translateY(0)}
.eera-popup.ep-corner.ep-pos-bottom-right{right:22px;bottom:22px}
.eera-popup.ep-corner.ep-pos-bottom-left{left:22px;bottom:22px}
.eera-popup.ep-corner .ep-media{height:132px}
.eera-popup.ep-corner .ep-text{padding:16px 18px 20px}
.eera-popup.ep-corner .ep-title{font-size:20px}

/* full-width bar */
.eera-popup.ep-bar{left:0;right:0;width:100%;transform:translateY(-100%)}
.eera-popup.ep-bar.ep-pos-top{top:0}
.eera-popup.ep-bar:not(.ep-pos-top){bottom:0;transform:translateY(100%)}
.eera-popup.ep-bar.is-open{transform:translateY(0)}
.eera-popup.ep-bar .ep-card{width:100%;border-radius:0;border-left:0;border-right:0;box-shadow:var(--shadow)}
.eera-popup.ep-bar .ep-media{display:none}
.eera-popup.ep-bar .ep-inner{padding:0}
.eera-popup.ep-bar .ep-text{display:flex;align-items:center;justify-content:center;gap:14px 22px;flex-wrap:wrap;padding:14px 52px 14px 22px;text-align:center}
.eera-popup.ep-bar .ep-title{margin:0;font-size:20px}
.eera-popup.ep-bar .ep-body{margin:0}
.eera-popup.ep-bar .ep-code{margin:0}
.eera-popup.ep-bar .ep-cta{margin:0;width:auto}

@media (max-width:520px){
  .eera-popup.ep-bar .ep-text{padding-right:44px}
  .ep-title{font-size:22px}
}

/* =====================================================================
   PREMIUM POLISH + MOTION  (royal-purple refresh)
   ===================================================================== */

/* smoother base rendering */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--wine);color:var(--gold-pale)}

/* --- scroll reveal (JS adds .in) --- */
/* (reveal base handled earlier, gated behind .js-on so content is always visible without JS) */
.js-on .reveal{transform:translateY(26px)}
/* staggered children */
.js-on .reveal[data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal[data-stagger].in>*{opacity:1;transform:none}
.reveal[data-stagger].in>*:nth-child(1){transition-delay:.05s}
.reveal[data-stagger].in>*:nth-child(2){transition-delay:.14s}
.reveal[data-stagger].in>*:nth-child(3){transition-delay:.23s}
.reveal[data-stagger].in>*:nth-child(4){transition-delay:.32s}
.reveal[data-stagger].in>*:nth-child(5){transition-delay:.41s}
.reveal[data-stagger].in>*:nth-child(6){transition-delay:.50s}
.reveal[data-stagger].in>*:nth-child(7){transition-delay:.59s}
.reveal[data-stagger].in>*:nth-child(8){transition-delay:.68s}

/* --- hero: staggered entrance + gentle float on the art --- */
.hero-content .eyebrow,.hero-content .hero-title,.hero-content .hero-sub,.hero-content .hero-cta,.hero-content .btn,
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-sub,.hero-copy .hero-cta,
.hero-inner .eyebrow,.hero-inner h1,.hero-inner .hero-sub,.hero-inner .hero-cta{
  opacity:0;transform:translateY(20px);animation:heroUp .95s var(--ease) forwards
}
.hero-content .eyebrow,.hero-copy .eyebrow,.hero-inner .eyebrow{animation-delay:.15s}
.hero-content .hero-title,.hero-copy h1,.hero-inner h1{animation-delay:.30s}
.hero-content .hero-sub,.hero-copy .hero-sub,.hero-inner .hero-sub{animation-delay:.48s}
.hero-content .hero-cta,.hero-content .btn,.hero-copy .hero-cta,.hero-inner .hero-cta{animation-delay:.64s}
@keyframes heroUp{to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-media,.hero-art,.hero-visual{animation:floaty 9s ease-in-out infinite}

/* headings: a touch more couture */
.section-title,.hero-content .hero-title,.hero-copy h1,.hero-inner h1{letter-spacing:-.005em}
h1,h2,h3{font-feature-settings:"liga" 1}

/* --- buttons: brass sweep on primary --- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::before,.btn-gold::before,.btn-wa::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%);
  transform:translateX(-120%);transition:transform .6s var(--ease)
}
.btn-primary:hover::before,.btn-gold:hover::before,.btn-wa:hover::before{transform:translateX(120%)}
.btn:hover{box-shadow:0 16px 34px rgba(34,4,14,.28)}
.btn-outline{position:relative;z-index:0}
.btn-outline::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--wine);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.btn-outline:hover{color:#fff;border-color:var(--wine)}
.btn-outline:hover::after{transform:scaleX(1)}

/* --- product & category cards: deeper lift + image glow --- */
.card{will-change:transform}
.card:hover{box-shadow:var(--shadow-lg)}
.card-media,.cat-card{position:relative}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(32,4,13,.12));opacity:0;transition:opacity .5s;pointer-events:none}
.card:hover .card-media::after{opacity:1}

/* --- links: elegant underline slide --- */
.link-more{position:relative;border-bottom:none!important}
.link-more::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.link-more:hover::after{transform:scaleX(1);transform-origin:left}

/* --- sticky nav feels lighter, tightens on scroll --- */
.nav.is-stuck{box-shadow:0 10px 30px rgba(46,6,17,.10);background:rgba(252,248,244,.9)}
.nav.is-stuck .nav-inner{padding-top:10px;padding-bottom:10px}
.nav-inner{transition:padding .35s var(--ease)}

/* --- thin decorative divider used between sections --- */
.divider-leaf{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px auto 0;color:var(--gold)}
.divider-leaf::before,.divider-leaf::after{content:"";height:1px;width:52px;background:linear-gradient(90deg,transparent,var(--gold))}
.divider-leaf::after{background:linear-gradient(90deg,var(--gold),transparent)}

/* --- image lazy fade-in --- */
img{transition:opacity .5s var(--ease)}
img[loading]{opacity:1}

/* --- footer: richer deep-purple + subtle top sheen --- */
.foot{position:relative}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);opacity:.4}

/* --- popup entrance easing already handled; add a soft pop --- */
.eera-popup.ep-small.is-open,.eera-popup.ep-medium.is-open,.eera-popup.ep-large.is-open{animation:popPop .5s var(--ease)}
@keyframes popPop{0%{transform:translate(-50%,-50%) scale(.92)}60%{transform:translate(-50%,-50%) scale(1.015)}100%{transform:translate(-50%,-50%) scale(1)}}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testimonials{background:linear-gradient(180deg,var(--ivory),var(--cream))}
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:var(--maxw);margin:44px auto 0}
.tst-card{margin:0;background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:34px 30px;box-shadow:var(--shadow-sm);position:relative;transition:transform .5s var(--ease),box-shadow .5s;display:flex;flex-direction:column}
.tst-card::before{content:"\201C";position:absolute;top:14px;right:26px;font-family:var(--serif);font-size:80px;line-height:1;color:var(--gold);opacity:.18}
.tst-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tst-stars{color:var(--gold);letter-spacing:3px;font-size:15px;margin-bottom:14px}
.tst-quote{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink);font-style:italic;margin:0 0 22px;flex:1}
.tst-by{display:flex;align-items:center;gap:13px;margin-top:auto}
.tst-ava{width:46px;height:46px;border-radius:50%;background:var(--ivory-2) center/cover no-repeat;flex:none;border:1px solid var(--line)}
.tst-ava-mono{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:20px;color:#fff;background:var(--wine);border:0}
.tst-meta{display:flex;flex-direction:column;line-height:1.3}
.tst-meta b{font-weight:600;color:var(--ink);font-size:15px}
.tst-meta i{font-style:normal;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.tst-grid{grid-template-columns:1fr;gap:18px}}

/* =====================================================================
   2-COLUMN "SPLIT" PROMO POPUP (image left, content right)
   applies to large modals that have an image — matches the reference
   ===================================================================== */
@media (min-width:720px){
  .eera-popup.ep-large{max-width:860px}
  .eera-popup.ep-large .ep-inner{display:flex;align-items:stretch}
  .eera-popup.ep-large .ep-media{height:auto;flex:1 1 50%;min-height:420px;border-radius:0}
  .eera-popup.ep-large .ep-text{flex:1 1 50%;display:flex;flex-direction:column;justify-content:center;padding:44px 44px 46px;text-align:center}
  .eera-popup.ep-large .ep-title{font-size:38px;line-height:1.05}
  .eera-popup.ep-large .ep-body{font-size:16px;max-width:34ch;margin-left:auto;margin-right:auto}
  .eera-popup.ep-large .ep-code{max-width:320px;margin-left:auto;margin-right:auto}
  .eera-popup.ep-large .ep-cta{max-width:320px;margin-left:auto;margin-right:auto}
}

/* =====================================================================
   EXTRA SMOOTHNESS (zaro-style)
   ===================================================================== */
/* soft page-load fade */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
main{animation:pageIn .6s var(--ease)}
/* longer, silkier hovers on imagery */
.card-img,.cat-card img,.insta-cell img{transition:transform 1.1s var(--ease),opacity .6s}
.card:hover .card-img{transform:scale(1.06)}
/* gentle lift on insta cells */
.insta-cell{overflow:hidden;transition:transform .5s var(--ease)}
.insta-cell:hover{transform:translateY(-3px)}
/* refined focus ring */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--wine);outline-offset:2px;border-radius:4px}

/* =====================================================================
   REFERENCE REDESIGN — dark royal-purple atelier homepage
   (dark nav + top bar · split hero · feature strip · exquisite range ·
    about w/ badges · testimonial carousel · newsletter · footer)
   Appended last so these rules win.
   ===================================================================== */

/* ---- shared ornament (gold line · petal · line) ---- */
.orn-leaf{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 20px;color:var(--gold)}
.orn-leaf i{display:block;width:clamp(34px,7vw,54px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.orn-leaf i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.orn-leaf b{position:relative;width:22px;height:13px;display:block}
.orn-leaf b::before,.orn-leaf b::after{content:"";position:absolute;bottom:0;left:50%;width:9px;height:13px;background:var(--gold)}
.orn-leaf b::before{border-radius:100% 0 60% 0;transform:translateX(-100%) rotate(-6deg)}
.orn-leaf b::after{border-radius:0 100% 0 60%;transform:translateX(0) rotate(6deg)}
.section-title.light{color:#fff}

/* ---- TOP UTILITY BAR ---- */
.top-bar{background:#280410;color:rgba(255,234,241,.72);font-size:12px;letter-spacing:.02em}
.top-bar-inner{max-width:var(--maxw);margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.top-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.top-item{display:inline-flex;align-items:center;gap:6px;color:rgba(255,234,241,.72);transition:color .2s}
a.top-item:hover{color:var(--gold-soft)}
.top-item svg{color:var(--gold-soft)}
.top-sep{width:1px;height:14px;background:rgba(255,255,255,.14)}
.top-mid{color:var(--gold-soft);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:500}
.top-right{display:flex;align-items:center;gap:8px}
.top-right a{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.14);color:rgba(255,234,241,.8);transition:all .2s}
.top-right a:hover{background:var(--gold);border-color:var(--gold);color:#2E0611}

/* ---- MAIN NAV (dark override) ---- */
.nav{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#470D22,#3C0718);border-bottom:1px solid rgba(200,162,78,.22);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 6px 30px rgba(26,3,10,.28)}
.nav.is-stuck{background:linear-gradient(180deg,#430A1F,#33071A);box-shadow:0 10px 34px rgba(26,3,10,.4)}
.nav.is-stuck .top-bar{display:none}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:74px;display:flex;align-items:center;gap:20px}
.nav-burger span{background:#fff}
.brand-name{color:#fff;font-size:26px;letter-spacing:.06em}
.brand-sub{color:var(--gold-soft);font-size:10px;letter-spacing:.42em}
.brand-mark{width:44px;height:44px;background:url('../../uploads/site/logo.svg') center/contain no-repeat}
.menu{display:flex;align-items:center;gap:30px}
.menu>a{color:rgba(255,236,242,.82);font-size:13px;font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.menu>a::after{background:var(--gold)}
.menu>a:hover,.menu .is-active{color:#fff}
.menu .is-active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:6px}
.icon-btn{width:40px;height:40px;color:rgba(255,236,242,.86);border:1px solid transparent}
.icon-btn:hover{background:rgba(255,255,255,.08);color:var(--gold-soft)}
.icon-btn.cart{position:relative}
.cart-badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--gold);color:#2E0611;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
form.nav-search{background:#33071A}
form.nav-search input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
form.nav-search input::placeholder{color:rgba(255,236,242,.5)}
form.nav-search button{background:var(--gold);color:#2E0611}

/* ---- SPLIT HERO ---- */
.hero-split{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 78% 20%,#5C0B24 0%,transparent 52%),
             linear-gradient(160deg,#4A0E23 0%,#330618 60%,#260410 100%)}
.hs-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 12% 82%,rgba(200,162,78,.12),transparent 24%),
    radial-gradient(circle at 90% 88%,rgba(217,169,198,.14),transparent 26%)}
.hs-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:64px 24px 76px;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;min-height:clamp(520px,74vh,760px)}
.hs-copy{max-width:560px}
.hs-eyebrow{display:inline-block;font-weight:500;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
.hs-title{margin:0;line-height:.94}
.hs-title-lg{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(56px,9vw,104px);color:#fff;letter-spacing:.01em;text-shadow:0 6px 40px rgba(0,0,0,.35)}
.hs-title-sub{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.8vw,34px);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-soft);margin-top:6px;padding-left:6px}
.hs-copy .orn-leaf{margin:20px 0 18px}
.hs-tagline{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.3vw,26px);color:#F7EDE3;margin:0 0 16px}
.hs-desc{font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.82);font-weight:300;max-width:440px;margin:0 0 30px}
.btn-arrow{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}

.hs-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:420px}
.hs-arch{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(420px,90%);height:88%;
  border-radius:50% 50% 0 0/60% 60% 0 0;border:1.5px solid rgba(200,162,78,.4);
  background:radial-gradient(120% 100% at 50% 100%,rgba(200,162,78,.10),transparent 70%);z-index:0}
.hs-img{position:relative;z-index:1;width:min(430px,94%);aspect-ratio:3/3.6;object-fit:cover;
  border-radius:230px 230px 18px 18px;box-shadow:0 30px 70px rgba(20,2,7,.5)}
.hs-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  background:linear-gradient(160deg,#5C0B24,#310618);border:1px solid rgba(200,162,78,.35)}
.hs-ph-mark{width:88px;height:88px;background:url('../../uploads/site/logo.svg') center/contain no-repeat;opacity:.95}
.hs-ph-name{font-family:var(--serif);font-size:30px;color:#fff;letter-spacing:.04em}
.hs-ph-note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);opacity:.85}

/* ---- FEATURE STRIP ---- */
.features{background:#310618;border-top:1px solid rgba(200,162,78,.16);border-bottom:1px solid rgba(200,162,78,.16)}
.features-inner{max-width:var(--maxw);margin:0 auto;padding:34px 24px;display:grid;grid-template-columns:repeat(4,1fr)}
.feature{text-align:center;padding:6px 22px;position:relative}
.feature+.feature::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:rgba(200,162,78,.22)}
.feature-ic{display:inline-grid;place-items:center;color:var(--gold-soft);margin-bottom:12px}
.feature b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:#fff;letter-spacing:.04em;margin-bottom:4px}
.feature span{font-size:12.5px;color:rgba(255,236,242,.6);letter-spacing:.02em}

/* ---- EXQUISITE RANGE (collections) ---- */
.exq{background:var(--ivory)}
.exq-head{margin-bottom:44px}
.exq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.exq-card{display:block;position:relative;border-radius:18px;overflow:hidden;background:var(--cream);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s}
.exq-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.exq-media{aspect-ratio:3/3.4;overflow:hidden;background:var(--ivory-2)}
.exq-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.exq-card:hover .exq-media img{transform:scale(1.07)}
.exq-noimg{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(150deg,var(--wine),var(--wine-deep))}
.exq-noimg span{font-family:var(--serif);font-size:64px;color:var(--gold-soft);opacity:.7}
.exq-label{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-radius:12px;background:linear-gradient(180deg,rgba(67,10,31,.92),rgba(46,6,17,.96));
  border:1px solid rgba(200,162,78,.4);backdrop-filter:blur(4px);box-shadow:0 12px 28px rgba(26,3,10,.35)}
.exq-label-txt b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:#fff;line-height:1.1}
.exq-label-txt i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.03em;color:var(--gold-soft);margin-top:3px}
.exq-arrow{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(200,162,78,.16);color:var(--gold-soft);transition:all .3s var(--ease)}
.exq-card:hover .exq-arrow{background:var(--gold);color:#2E0611;transform:translateX(2px)}

/* ---- ABOUT (dark, badges) ---- */
.about2{color:#fff;background:radial-gradient(110% 90% at 15% 20%,#4C0F25 0%,transparent 55%),linear-gradient(160deg,#3C0718,#2A0410)}
.about2-inner{max-width:var(--maxw);margin:0 auto;padding:76px 24px;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.about2-media{border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(20,2,7,.5);border:1px solid rgba(200,162,78,.28)}
.about2-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.1;display:block}
.about2-ph{aspect-ratio:4/3.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(150deg,#5C0B24,#310618)}
.about2-ph-name{font-family:var(--serif);font-size:30px;color:#fff}
.about2-ph-note{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft)}
.about2-copy .eyebrow-light{color:var(--gold-soft)}
.about2-copy .section-title{margin:8px 0 18px}
.about2-copy p{color:rgba(255,255,255,.8);line-height:1.85;font-size:15.5px;margin:0 0 16px;font-weight:300}
.about2-badges{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 28px}
.badge2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:16px 18px;min-width:118px;
  border:1px solid rgba(200,162,78,.3);border-radius:12px;background:rgba(255,255,255,.04)}
.badge2-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#2E0611;background:linear-gradient(120deg,var(--gold-soft),var(--gold));margin-bottom:5px}
.badge2 b{font-family:var(--serif);font-size:15.5px;color:#fff;font-weight:600}
.badge2 small{font-size:12px;color:var(--gold-soft);letter-spacing:.04em}

/* ---- TESTIMONIAL CAROUSEL ---- */
.tst2{position:relative;max-width:860px;margin:44px auto 0;display:flex;align-items:center;gap:14px}
.tst2-viewport{overflow:hidden;flex:1;border-radius:20px}
.tst2-track{display:flex;transition:transform .5s var(--ease)}
.tst2-slide{flex:0 0 100%;margin:0;box-sizing:border-box;text-align:center;padding:44px 40px 40px;position:relative;
  background:var(--cream);border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--shadow-sm)}
.tst2-mark{display:block;font-family:var(--serif);font-size:66px;line-height:.6;color:var(--gold);opacity:.5;margin-bottom:8px}
.tst2-quote{font-family:var(--serif);font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--ink);font-style:italic;margin:0 auto 24px;max-width:44ch}
.tst2-by{display:flex;flex-direction:column;align-items:center;gap:8px}
.tst2-ava{width:56px;height:56px;border-radius:50%;background:var(--ivory-2) center/cover no-repeat;border:2px solid var(--gold-soft)}
.tst2-ava-mono{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:24px;color:#fff;background:var(--wine);border-color:var(--gold-soft)}
.tst2-meta{display:flex;flex-direction:column;align-items:center;gap:2px}
.tst2-meta b{font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:600}
.tst2-stars{color:var(--gold);letter-spacing:3px;font-size:14px}
.tst2-meta i{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tst2-arrow{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--cream);color:var(--wine);display:grid;place-items:center;cursor:pointer;transition:all .25s;box-shadow:var(--shadow-sm)}
.tst2-arrow:hover{background:var(--wine);color:#fff;border-color:var(--wine)}
.tst2-dots{position:absolute;left:0;right:0;bottom:-30px;display:flex;justify-content:center;gap:8px}
.tst2-dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:all .25s}
.tst2-dots button.is-on{background:var(--gold);width:22px;border-radius:5px}

/* ---- NEWSLETTER BAR ---- */
.news{background:linear-gradient(120deg,#430A1F,#2E0611)}
.news-inner{max-width:var(--maxw);margin:0 auto;padding:26px 24px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.news-text{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);color:#fff}
.news-ic{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--gold-soft);border:1px solid rgba(200,162,78,.35)}
.news-form{display:flex;gap:10px;flex:1;min-width:280px;max-width:460px}
.news-form input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);border-radius:40px;padding:13px 20px;color:#fff;font-family:var(--sans);font-size:15px;outline:none}
.news-form input::placeholder{color:rgba(255,236,242,.55)}
.news-form input:focus{border-color:var(--gold)}
.news-form .btn{white-space:nowrap}

/* ---- FOOTER (reference) ---- */
.site-foot{background:linear-gradient(180deg,#2E0611,#1F0208);color:#fff;position:relative}
.site-foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);opacity:.5}
.foot-grid{max-width:var(--maxw);margin:0 auto;padding:60px 24px 44px;display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.3fr;gap:40px}
.foot-logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-mark{width:50px;height:50px;flex:none;background:url('../../uploads/site/logo.svg') center/contain no-repeat}
.foot-logo-text b{display:block;font-family:var(--serif);font-size:24px;color:#fff;letter-spacing:.05em;line-height:1}
.foot-logo-text small{display:block;font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-soft);margin-top:4px}
.foot-tag{color:rgba(255,236,242,.6);font-size:14px;line-height:1.7;max-width:300px;margin:0 0 20px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);color:rgba(255,236,242,.8);transition:all .25s}
.foot-social a:hover{background:var(--gold);border-color:var(--gold);color:#2E0611}
.foot-col2 h4,.foot-contact-col h4{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 18px}
.foot-col2 a{display:block;color:rgba(255,236,242,.66);font-size:14px;margin-bottom:11px;transition:color .2s;position:relative;padding-left:0}
.foot-col2 a:hover{color:#fff;padding-left:6px}
.foot-crow{display:flex;gap:11px;align-items:flex-start;color:rgba(255,236,242,.66);font-size:13.5px;line-height:1.55;margin-bottom:14px}
.foot-crow a{color:rgba(255,236,242,.66);transition:color .2s}
.foot-crow a:hover{color:#fff}
.foot-crow-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--gold-soft);background:rgba(200,162,78,.12);margin-top:1px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1)}
.foot-bottom-inner{max-width:var(--maxw);margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,236,242,.5)}
.foot-legal a{color:rgba(255,236,242,.5);transition:color .2s}
.foot-legal a:hover{color:var(--gold-soft)}
.foot-legal em{font-style:normal;opacity:.5;margin:0 6px}

/* ---- RESPONSIVE (reference redesign) ---- */
@media (max-width:1024px){
  .hs-inner{grid-template-columns:1fr;gap:30px;text-align:center;padding-top:48px}
  .hs-copy{max-width:none;margin:0 auto}
  .hs-copy .orn-leaf,.hs-desc{margin-left:auto;margin-right:auto}
  .hs-visual{min-height:340px}
  .exq-grid{grid-template-columns:repeat(2,1fr)}
  .about2-inner{grid-template-columns:1fr;gap:34px}
  .features-inner{grid-template-columns:repeat(2,1fr);gap:24px 0}
  .feature:nth-child(2)::before{display:none}
}
@media (max-width:820px){
  .top-bar-inner{padding:7px 18px}
  .top-mid{display:none}
  .nav-inner{height:64px}
  /* dark mobile drawer */
  .menu{position:fixed;inset:0 0 0 auto;top:0;width:min(320px,86vw);height:100vh;background:linear-gradient(180deg,#430A1F,#280410);flex-direction:column;align-items:flex-start;gap:0;padding:90px 30px 40px;transform:translateX(105%);transition:transform .4s var(--ease);z-index:65;overflow-y:auto;box-shadow:var(--shadow-lg)}
  .menu.is-open{transform:translateX(0)}
  .menu>a{width:100%;padding:17px 0;font-size:15px;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,236,242,.85)}
  .menu>a::after{display:none}
  .nav-actions .icon-btn.cart,.nav-actions .icon-btn:nth-child(2){display:none}
}
@media (max-width:560px){
  .exq-grid{grid-template-columns:1fr;gap:16px}
  .features-inner{grid-template-columns:1fr;gap:20px 0}
  .feature::before{display:none!important}
  .hs-title-lg{font-size:clamp(48px,16vw,72px)}
  .about2-badges{gap:10px}
  .badge2{min-width:0;flex:1;padding:14px 8px}
  .news-inner{flex-direction:column;align-items:stretch;text-align:center}
  .news-text{justify-content:center}
  .news-form{max-width:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .foot-brand-col{grid-column:1/-1}
  .foot-bottom-inner{flex-direction:column;text-align:center}
}

/* =====================================================================
   ROUND 3 — beige header · services/categories split · polish · a11y responsive
   Appended last (wins).
   ===================================================================== */

/* ---------- HEADER: warm beige theme (light nav, purple text) ---------- */
.announce{background:#F3E9DA;color:var(--wine);border-bottom:1px solid var(--line-soft)}
.announce span{color:var(--wine);font-weight:500}

.top-bar{background:#F4EADF;color:var(--ink-soft);border-bottom:1px solid rgba(92,11,36,.10)}
.top-item{color:var(--ink-soft)}
a.top-item:hover{color:var(--wine)}
.top-item svg{color:var(--gold)}
.top-sep{background:rgba(92,11,36,.20)}
.top-mid{color:var(--wine)}
.top-right a{border-color:rgba(92,11,36,.22);color:var(--wine)}
.top-right a:hover{background:var(--wine);border-color:var(--wine);color:#fff}

.nav{background:#F9F2EB;border-bottom:1px solid var(--line);box-shadow:0 4px 22px rgba(92,11,36,.06);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.is-stuck{background:rgba(249,242,235,.94);box-shadow:0 8px 26px rgba(92,11,36,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav-burger span{background:var(--wine)}
.brand-name{color:var(--wine)}
.brand-sub{color:var(--gold)}
.menu>a{color:var(--ink-soft)}
.menu>a:hover,.menu .is-active{color:var(--wine)}
.menu>a::after{background:var(--gold)}
.icon-btn{color:var(--wine)}
.icon-btn:hover{background:rgba(92,11,36,.08);color:var(--wine)}
.cart-badge{background:var(--wine);color:#fff}
form.nav-search{background:#F4EADF;border-top:1px solid var(--line)}
form.nav-search input{background:#fff;border-color:var(--line);color:var(--ink)}
form.nav-search input::placeholder{color:var(--muted)}
form.nav-search button{background:var(--wine);color:#fff}
form.nav-search button:hover{background:var(--wine-deep)}

/* ---------- section intro line (professional polish) ---------- */
.section-intro{max-width:560px;margin:6px auto 0;color:var(--ink-soft);font-size:15.5px;line-height:1.7}
.exq-head .eyebrow{color:var(--gold)}
.exq .section-title,.cats .section-title,.tst2 .section-title{color:var(--ink)}

/* keep the services band + category band visually distinct */
.exq{background:var(--ivory)}
.cats{background:var(--cream);border-top:1px solid var(--line-soft)}

/* ---------- BROWSE BY CATEGORY — circular tiles (distinct from service cards) ---------- */
.cats-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 44px;max-width:960px;margin:44px auto 0}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:15px;text-decoration:none;width:150px}
.cat-tile-img{position:relative;width:150px;height:150px;border-radius:50%;overflow:hidden;border:2px solid var(--gold-soft);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s}
.cat-tile-img::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 4px rgba(253,250,246,.7);pointer-events:none}
.cat-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cat-tile:hover .cat-tile-img{transform:translateY(-5px);box-shadow:0 18px 36px rgba(92,11,36,.22)}
.cat-tile:hover .cat-tile-img img{transform:scale(1.09)}
.cat-tile-name{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);text-align:center;line-height:1.25;transition:color .2s}
.cat-tile:hover .cat-tile-name{color:var(--wine)}

/* ---------- POLISH: buttons, cards, rhythm ---------- */
.btn-outline{border:1.5px solid var(--wine);color:var(--wine);background:transparent}
.btn-outline:hover{background:var(--wine);color:#fff}
.exq-card{box-shadow:0 10px 30px rgba(92,11,36,.08)}
.exq-card:hover{box-shadow:0 22px 46px rgba(92,11,36,.16)}
.section{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}

/* =====================================================================
   RESPONSIVE — phones, tablets, large screens
   ===================================================================== */

/* large desktop cap */
@media (min-width:1500px){ .nav-inner,.hs-inner,.features-inner,.about2-inner,.foot-grid,.top-bar-inner{max-width:1360px} }

/* small desktop / large tablet: tighten the nav so 6 links + icons fit */
@media (max-width:1120px){
  .menu{gap:20px}
  .nav-inner{gap:14px;padding:0 18px}
  .menu>a{font-size:12px;letter-spacing:.10em}
  .brand-name{font-size:23px}
}

/* tablet */
@media (max-width:1024px){
  .exq-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .hs-inner{grid-template-columns:1fr;gap:26px;text-align:center;padding:52px 22px 64px}
  .hs-copy{max-width:640px;margin:0 auto}
  .hs-copy .orn-leaf,.hs-desc{margin-left:auto;margin-right:auto}
  .hs-visual{min-height:360px;order:-1}
  .hs-img{width:min(340px,82%)}
  .about2-inner{grid-template-columns:1fr;gap:32px}
  .about2-media{max-width:560px}
  .features-inner{grid-template-columns:repeat(4,1fr)}
}

/* small tablet / large phone: nav collapses to drawer */
@media (max-width:860px){
  .top-mid{display:none}
  .nav-inner{height:64px}
  /* beige mobile drawer */
  .menu{position:fixed;inset:0 0 0 auto;top:0;width:min(330px,88vw);height:100vh;height:100dvh;
    background:#F9F2EB;flex-direction:column;align-items:flex-start;gap:0;padding:88px 28px 40px;
    transform:translateX(105%);transition:transform .4s var(--ease);z-index:65;overflow-y:auto;box-shadow:var(--shadow-lg)}
  .menu.is-open{transform:translateX(0)}
  .menu>a{width:100%;padding:16px 0;font-size:15px;letter-spacing:.06em;border-bottom:1px solid var(--line-soft);color:var(--ink-soft)}
  .menu>a::after{display:none}
  .features-inner{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .feature:nth-child(2)::before{display:none}
}

/* phone */
@media (max-width:600px){
  .top-bar-inner{padding:7px 14px;font-size:11px}
  .top-left{gap:8px}
  .nav-inner{padding:0 14px}
  .brand-name{font-size:21px}
  .brand-sub{letter-spacing:.34em;font-size:9px}
  .nav-actions{gap:2px}
  .nav-actions .icon-btn.cart,.nav-actions .icon-btn:nth-child(2){display:none}
  .hs-title-lg{font-size:clamp(46px,15vw,66px)}
  .hs-title-sub{font-size:clamp(16px,4.6vw,24px);letter-spacing:.26em}
  .hs-img{width:min(300px,84%)}
  .exq-grid{grid-template-columns:1fr;gap:16px;max-width:420px;margin-left:auto;margin-right:auto}
  .features-inner{grid-template-columns:1fr;gap:22px 0}
  .feature::before{display:none!important}
  .cats-grid{gap:24px 26px}
  .cat-tile,.cat-tile-img{width:124px}
  .cat-tile-img{height:124px}
  .cat-tile-name{font-size:15.5px}
  .about2-badges{gap:10px}
  .badge2{min-width:0;flex:1;padding:14px 6px}
  .badge2 b{font-size:14px}
  .news-inner{flex-direction:column;align-items:stretch;text-align:center;gap:16px}
  .news-text{justify-content:center;text-align:center}
  .news-form{max-width:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px 20px;padding:48px 20px 36px}
  .foot-brand-col{grid-column:1/-1}
  .foot-bottom-inner{flex-direction:column;text-align:center;gap:8px}
  .tst2-slide{padding:36px 22px 34px}
  .tst2-arrow{width:40px;height:40px}
}

/* very small phones */
@media (max-width:380px){
  .cat-tile,.cat-tile-img{width:104px}
  .cat-tile-img{height:104px}
  .foot-grid{grid-template-columns:1fr}
}

/* larger tap targets + no accidental horizontal scroll on touch */
@media (hover:none){
  .icon-btn,.top-right a,.foot-social a{min-width:40px;min-height:40px}
}
/* overflow-x:hidden on html/body kills position:sticky — use clip instead */
html,body{max-width:100%;overflow-x:clip}

/* =====================================================================
   ROUND 4 — PREMIUM BOUTIQUE POLISH
   sticky header · luxe signature-service cards · arch category tiles ·
   refined testimonials · overall couture feel · full responsive
   Appended last so these rules win.
   ===================================================================== */

/* ---------- 1) HEADER — always pinned, luxe glass on scroll ---------- */
.nav{position:sticky;top:0;z-index:120}
@supports not (overflow-x:clip){
  /* older browsers: fall back to fixed header + spacer added via JS class */
  html,body{overflow-x:hidden}
}
.nav.is-stuck{background:rgba(251,245,239,.92);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 10px 34px rgba(67,10,31,.14)}
.nav.is-stuck .top-bar{display:none}
.nav.is-stuck .nav-inner{height:62px}
.nav-inner{transition:height .35s var(--ease)}

/* ---------- 2) SECTION RHYTHM & TYPOGRAPHY (premium feel) ---------- */
.section{padding-top:clamp(64px,9vw,110px);padding-bottom:clamp(64px,9vw,110px)}
.eyebrow{font-size:11.5px;letter-spacing:.4em;font-weight:500}
.section-title{font-weight:600;letter-spacing:.01em;font-size:clamp(30px,4.4vw,46px)}
.exq-head{margin-bottom:clamp(40px,6vw,60px)}
.section-intro{font-weight:300;color:var(--ink-soft);letter-spacing:.01em}

/* ---------- 3) SIGNATURE SERVICES — editorial couture cards ---------- */
.exq{background:
  radial-gradient(70% 46% at 50% 0%,rgba(200,162,78,.07),transparent 70%),
  var(--ivory)}
.exq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,28px);max-width:var(--maxw);margin:0 auto}
.exq-card{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--wine-deep);
  box-shadow:0 14px 34px rgba(67,10,31,.12);transition:transform .55s var(--ease),box-shadow .55s var(--ease);
  cursor:default;pointer-events:none} /* static showcase — not a link anymore */
.exq-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(67,10,31,.24)}
/* fine gold hairline frame inside the card */
.exq-card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(224,198,142,.38);border-radius:11px;z-index:3;pointer-events:none;
  transition:inset .5s var(--ease),border-color .5s}
.exq-card:hover::before{inset:7px;border-color:rgba(224,198,142,.65)}
.exq-media{aspect-ratio:3/3.9;overflow:hidden;background:#2E0611}
.exq-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.04);
  transition:transform 1.2s var(--ease),filter .6s}
.exq-card:hover .exq-media img{transform:scale(1.08);filter:saturate(1.12)}
/* cinematic bottom veil so text always reads */
.exq-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,3,10,0) 42%,rgba(30,3,12,.42) 72%,rgba(26,3,10,.86) 100%)}
.exq-card{isolation:isolate}
.exq-media{position:relative}
/* label — clean type on the veil, no boxed pill */
.exq-label{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:22px 22px 20px;background:none;border:0;backdrop-filter:none;box-shadow:none;border-radius:0}
.exq-label-txt b{display:block;font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);font-weight:600;color:#fff;line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.45)}
.exq-label-txt i{display:flex;align-items:center;gap:8px;font-style:normal;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-soft);margin-top:7px}
.exq-label-txt i::before{content:"";width:22px;height:1px;background:var(--gold-soft);opacity:.8}
/* hide the arrow chip — cards are static now */
.exq-arrow{display:none}

/* ---------- 4) BROWSE BY CATEGORY — Mughal-arch boutique tiles ---------- */
.cats{background:
  radial-gradient(60% 40% at 50% 100%,rgba(92,11,36,.05),transparent 70%),
  var(--cream);
  border-top:1px solid var(--line-soft)}
.cats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,36px);
  max-width:1040px;margin:clamp(40px,6vw,56px) auto 0;justify-items:center}
.cat-tile{width:100%;max-width:225px;display:flex;flex-direction:column;align-items:center;gap:18px;text-decoration:none}
.cat-tile-img{position:relative;width:100%;aspect-ratio:3/3.8;height:auto;border-radius:999px 999px 14px 14px;overflow:hidden;
  border:1px solid rgba(200,162,78,.55);box-shadow:0 14px 30px rgba(67,10,31,.10);background:var(--ivory-2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
/* inner gold keyline echoing the arch */
.cat-tile-img::after{content:"";position:absolute;inset:7px;border:1px solid rgba(253,250,246,.85);
  border-radius:999px 999px 9px 9px;box-shadow:none;pointer-events:none;z-index:2}
/* soft plum veil at the base */
.cat-tile-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(42,5,17,0) 62%,rgba(42,5,17,.30) 100%);opacity:.9;transition:opacity .4s}
.cat-tile-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.cat-tile:hover .cat-tile-img{transform:translateY(-7px);box-shadow:0 26px 52px rgba(92,11,36,.24);border-color:var(--gold)}
.cat-tile:hover .cat-tile-img img{transform:scale(1.08)}
.cat-tile:hover .cat-tile-img::before{opacity:.55}
.cat-tile-name{font-family:var(--serif);font-size:clamp(17px,1.6vw,19.5px);font-weight:600;color:var(--ink);text-align:center;line-height:1.25;
  display:flex;flex-direction:column;align-items:center;gap:7px;transition:color .25s}
.cat-tile-name::after{content:"";width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)}
.cat-tile:hover .cat-tile-name{color:var(--wine)}
.cat-tile:hover .cat-tile-name::after{width:44px}
.cats .btn-outline{padding:14px 34px;letter-spacing:.16em;font-size:12.5px}

/* ---------- 5) TESTIMONIALS — centered, boutique salon feel ---------- */
.tst2.section{padding-top:clamp(64px,9vw,110px)}
section.tst2{background:
  radial-gradient(58% 42% at 50% 0%,rgba(200,162,78,.08),transparent 70%),
  linear-gradient(180deg,var(--ivory),var(--cream))}
div.tst2{position:relative;max-width:820px;margin:0 auto;padding:0 0 46px;display:flex;align-items:stretch;gap:18px}
.tst2-viewport{overflow:hidden;flex:1;border-radius:22px}
.tst2-slide{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:340px;padding:clamp(36px,5vw,54px) clamp(24px,5vw,56px);
  background:var(--cream);border:1px solid rgba(200,162,78,.32);border-radius:22px;
  box-shadow:0 18px 44px rgba(67,10,31,.09);position:relative}
/* inner hairline for the couture frame */
.tst2-slide::before{content:"";position:absolute;inset:9px;border:1px solid rgba(200,162,78,.18);border-radius:16px;pointer-events:none}
.tst2-mark{font-size:58px;line-height:.55;color:var(--gold);opacity:.65;margin-bottom:16px}
.tst2-quote{font-size:clamp(17px,2vw,21px);max-width:46ch;margin:0 auto 26px;color:var(--ink)}
.tst2-ava{width:64px;height:64px;border:2px solid var(--gold);box-shadow:0 0 0 5px rgba(200,162,78,.14)}
.tst2-meta{gap:4px}
.tst2-meta b{font-size:17px}
.tst2-stars{letter-spacing:4px}
.tst2-meta i{color:var(--muted);letter-spacing:.14em}
/* arrows: gold-ring style, vertically centered */
.tst2-arrow{align-self:center;width:48px;height:48px;border:1px solid rgba(200,162,78,.6);background:var(--cream);color:var(--wine);
  box-shadow:0 8px 20px rgba(67,10,31,.10)}
.tst2-arrow:hover{background:var(--wine);border-color:var(--wine);color:#fff;transform:scale(1.05)}
.tst2-dots{bottom:6px}
.tst2-dots button{background:rgba(200,162,78,.35)}
.tst2-dots button.is-on{background:var(--gold)}

/* ---------- 6) HERO / GLOBAL PREMIUM TOUCHES ---------- */
.btn{letter-spacing:.12em}
.btn-gold{box-shadow:0 12px 28px rgba(200,162,78,.32)}
.btn-gold:hover{box-shadow:0 18px 38px rgba(200,162,78,.42);transform:translateY(-2px)}
.features .feature b{letter-spacing:.05em}
.news{border-top:1px solid rgba(200,162,78,.25)}

/* ---------- 7) RESPONSIVE — all devices ---------- */
@media (max-width:1024px){
  .exq-grid{grid-template-columns:repeat(2,1fr);max-width:640px}
  .cats-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;gap:26px 22px}
}
@media (max-width:860px){
  .nav.is-stuck .nav-inner{height:58px}
  div.tst2{gap:0;padding-bottom:52px}
  .tst2-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px}
  .tst2-prev{left:6px}
  .tst2-next{right:6px}
  .tst2-arrow:hover{transform:translateY(-50%) scale(1.05)}
  .tst2-slide{min-height:300px;padding:40px 54px 38px}
}
@media (max-width:600px){
  .exq-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
  .exq-media{aspect-ratio:3/3.4}
  .cats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding:0 4px}
  .cat-tile{max-width:180px;gap:13px}
  .cat-tile-name{font-size:16px}
  .tst2-slide{padding:36px 44px 34px;min-height:280px}
  .tst2-quote{font-size:16.5px}
  .tst2-arrow{width:38px;height:38px}
  .tst2-prev{left:2px}.tst2-next{right:2px}
}
@media (max-width:380px){
  .cats-grid{grid-template-columns:1fr;max-width:220px}
  .cat-tile{max-width:none}
}

/* =====================================================================
   EERA FASHION HOUSE — THEME v5 "MAGNOLIA VELVET"
   Matched to the round emblem logo:
     deep burgundy velvet · thin antique gold rings · pearl dots
     magnolia bloom (lilac / orchid) · olive leaves · ivory serif
   This layer is loaded LAST and owns the whole look of the site.
   ===================================================================== */

:root{
  /* --- burgundy velvet (primary) --- */
  --wine:#5C0B24;          /* brand burgundy — sampled from the logo */
  --wine-700:#6E1130;
  --wine-800:#450818;
  --wine-deep:#2A0410;     /* near-black burgundy for dark sections */
  --wine-ink:#1C020A;
  --plum:#8A1E3F;

  /* --- magnolia bloom (secondary accent) --- */
  --magnolia:#E9BFDD;
  --magnolia-2:#D3A0C9;
  --magnolia-deep:#B0759F;
  --lav:#D9A9C6;
  --rose:#B4728F;

  /* --- olive leaf --- */
  --olive:#6E7C31;
  --olive-deep:#4F5C22;
  --green:#6E7C31;

  /* --- antique gold + pearl --- */
  --gold:#C9A24E;
  --gold-bright:#E7C87E;
  --gold-soft:#E0C68E;
  --gold-pale:#F3E6C4;
  --pearl:#F0DFD2;
  --pearl-2:#E3CDBC;

  /* --- ivory paper --- */
  --ivory:#FBF5EF;
  --ivory-2:#F4E9E0;
  --cream:#FEFBF8;

  /* --- ink --- */
  --ink:#2B1119;
  --ink-soft:#5E434B;
  --muted:#95818A;
  --line:#E9D9CC;
  --line-soft:#F3E8DE;

  --radius:14px; --radius-lg:26px; --radius-sm:10px;
  --shadow-sm:0 4px 16px rgba(44,6,18,.07);
  --shadow:0 18px 46px rgba(44,6,18,.13);
  --shadow-lg:0 36px 90px rgba(30,3,12,.26);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px;
}

/* overflow-x:clip (not hidden) so the sticky header keeps working */
html,body{max-width:100%;overflow-x:clip}
body{background:var(--ivory);color:var(--ink)}
::selection{background:var(--gold-pale);color:var(--wine-deep)}

/* =====================  shared ornaments  ===================== */
.eyebrow{color:var(--gold);letter-spacing:.3em}
.eyebrow-light{color:var(--gold-soft)}
.section-title{color:var(--wine)}
.section-title.light{color:#fff}
.section{max-width:var(--maxw)}

/* gold hairline + pearl dot divider (from the logo's pearl arcs) */
.orn-leaf{display:inline-flex;align-items:center;gap:10px;margin:14px 0 6px}
.orn-leaf i{display:block;width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.orn-leaf i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.orn-leaf b{
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff,var(--pearl) 45%,var(--pearl-2));
  box-shadow:0 0 0 1px rgba(201,162,78,.55);
}
.orn-leaf.orn-dark i{background:linear-gradient(90deg,transparent,var(--gold))}
.orn-leaf.orn-dark i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}

/* pearl arc — decorative, echoes the two bead arcs on the emblem */
.pearl-arc{position:absolute;pointer-events:none;display:block}
.pearl-arc span{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff,#F4E4D8 45%,#D9BCA8);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* =====================  buttons  ===================== */
.btn{
  border-radius:999px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;font-size:12.5px;
}
.btn-gold{
  background:linear-gradient(135deg,#D9B463 0%,#C9A24E 42%,#B0873A 100%);
  color:#2A0410;border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 30px rgba(154,116,38,.28);
}
.btn-gold:hover{
  background:linear-gradient(135deg,#E7C87E 0%,#D3AC58 45%,#BC9340 100%);
  box-shadow:0 16px 38px rgba(154,116,38,.36);transform:translateY(-2px)
}
.btn-outline{border:1px solid var(--gold);color:var(--wine);background:transparent}
.btn-outline:hover{background:var(--wine);border-color:var(--wine);color:#fff}
.btn-lg{padding:16px 34px;font-size:13px}
.btn-arrow{transition:transform .35s var(--ease);display:inline-block}
.btn:hover .btn-arrow{transform:translateX(5px)}

/* =====================  announcement + top bar  ===================== */
.announce{
  background:linear-gradient(90deg,var(--wine-deep),var(--wine) 50%,var(--wine-deep));
  color:var(--gold-pale);border-bottom:1px solid rgba(201,162,78,.3);
  font-size:12.5px;letter-spacing:.1em;
}
.announce span{color:var(--gold-pale)}

.top-bar{background:var(--wine-deep);border-bottom:1px solid rgba(201,162,78,.22)}
.top-bar-inner{color:rgba(243,230,196,.82)}
.top-item,.top-bar a{color:rgba(243,230,196,.82)}
.top-item:hover,.top-bar a:hover{color:var(--gold-bright)}
.top-mid{color:var(--gold-soft);font-style:italic;letter-spacing:.16em}
.top-sep{background:rgba(201,162,78,.35)}

/* =====================  main nav — ivory + gold hairline  ===================== */
.nav{
  background:rgba(251,245,239,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(201,162,78,.28), 0 10px 30px rgba(44,6,18,.05);
}
.nav.is-stuck{
  background:rgba(251,245,239,.93);
  box-shadow:0 1px 0 rgba(201,162,78,.34), 0 12px 34px rgba(44,6,18,.10);
}

/* brand: the real round emblem */
.brand{gap:14px;align-items:center}
.brand-mark{
  width:58px;height:58px;flex:none;border-radius:50%;
  background:url('../img/logo-mark.png') center/contain no-repeat !important;
  filter:drop-shadow(0 6px 16px rgba(92,11,36,.28));
  transition:transform .5s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.04)}
.brand-mark-img{
  height:58px;width:58px;flex:none;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(92,11,36,.26));
  transition:transform .5s var(--ease);
}
.brand:hover .brand-mark-img{transform:rotate(-6deg) scale(1.04)}
/* admin-uploaded full logo */
.brand-img{height:58px;width:auto;max-width:230px;object-fit:contain;display:block}
.nav.is-stuck .brand-img{height:46px}
.brand-name{
  font-family:var(--serif);font-weight:600;font-size:26px;color:var(--wine);
  letter-spacing:.01em;
}
.brand-sub{
  font-size:9px;letter-spacing:.44em;color:var(--gold);
  text-transform:uppercase;margin-top:5px;
}
.nav.is-stuck .brand-mark,.nav.is-stuck .brand-mark-img{width:46px;height:46px}

.menu>a{color:var(--ink-soft);font-size:13px;letter-spacing:.15em}
.menu>a:hover,.menu .is-active{color:var(--wine)}
.menu>a::after{background:linear-gradient(90deg,var(--gold),var(--gold-bright));height:1.5px}

.nav-actions .icon-btn{color:var(--wine);border:1px solid transparent;border-radius:50%}
.nav-actions .icon-btn:hover{background:rgba(92,11,36,.07);color:var(--wine);border-color:rgba(201,162,78,.5)}
.cart-badge{background:var(--gold);color:#2A0410}

form.nav-search{background:var(--ivory-2);border-top:1px solid var(--line)}
form.nav-search input{background:#fff;border:1px solid var(--line);color:var(--ink)}
form.nav-search input:focus{border-color:var(--gold);outline:none}
form.nav-search button{background:var(--wine);color:#fff;border:0}

/* =====================  HERO — velvet + arch  ===================== */
.hero-split{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(138,30,63,.55) 0%, transparent 60%),
    radial-gradient(90% 80% at 88% 100%, rgba(176,117,159,.30) 0%, transparent 62%),
    linear-gradient(160deg,#450818 0%, #5C0B24 38%, #2A0410 100%);
  color:#fff;padding:clamp(64px,8vw,110px) 0 clamp(70px,8vw,120px);
}
.hero-split .hs-bg{
  position:absolute;inset:0;z-index:-2;
  background:radial-gradient(circle at 78% 18%, rgba(233,191,221,.14), transparent 46%);
}
/* faint emblem watermark, parked in the empty gutter under the copy */
.hero-split .hs-bg::after{
  content:"";position:absolute;left:-9%;bottom:-30%;width:440px;height:440px;
  background:url('../img/logo-mark.png') center/contain no-repeat;
  opacity:.13;filter:saturate(.4);
}
/* thin double gold frame like the emblem's rings */
.hero-split::before{
  content:"";position:absolute;z-index:-1;inset:22px;border:1px solid rgba(201,162,78,.34);
  border-radius:6px;pointer-events:none;
}
.hero-split::after{
  content:"";position:absolute;z-index:-1;inset:30px;border:1px solid rgba(201,162,78,.16);
  border-radius:4px;pointer-events:none;
}
.hs-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,5vw,54px);
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,72px);align-items:center;
}
.hs-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-soft);
}
.hs-eyebrow::before{content:"";width:38px;height:1px;background:var(--gold)}
.hs-title{margin:16px 0 0;line-height:.94;color:#fff}
.hs-title-lg{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(56px,9.4vw,124px);letter-spacing:-.015em;color:#fff;
  text-shadow:0 18px 46px rgba(0,0,0,.4);
}
.hs-title-sub{
  display:block;margin-top:12px;font-family:var(--sans);font-weight:300;
  font-size:clamp(12px,1.5vw,17px);letter-spacing:.58em;text-transform:uppercase;
  color:var(--gold-soft);
}
.hs-tagline{
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,27px);
  color:var(--magnolia);margin:6px 0 12px;
}
.hs-desc{color:rgba(255,236,242,.76);max-width:50ch;font-weight:300;font-size:16px;line-height:1.75}
.hs-copy .btn{margin-top:22px}

/* visual: arch + gold rings + pearls */
.hs-visual{position:relative;display:flex;justify-content:center}
.hs-arch{
  position:absolute;inset:auto;width:min(100%,470px);aspect-ratio:.79;
  border-radius:999px 999px 26px 26px;
  border:1px solid rgba(201,162,78,.55);
  transform:translate(14px,-14px);
}
.hs-img{
  position:relative;width:min(100%,470px);aspect-ratio:.79;object-fit:cover;
  border-radius:999px 999px 26px 26px;
  box-shadow:0 40px 90px rgba(0,0,0,.45);
  border:1px solid rgba(201,162,78,.34);
}
/* soft gold halo behind the arch instead of a second emblem — keeps the hero clean */
.hs-visual::after{
  content:"";position:absolute;right:-6%;bottom:-8%;width:230px;height:230px;z-index:-1;
  border-radius:50%;background:radial-gradient(circle,rgba(201,162,78,.28),transparent 68%);
  pointer-events:none;
}
.scroll-hint span{background:var(--gold)}

.hs-ph-mark{background:url('../img/logo-mark.png') center/contain no-repeat !important;opacity:1}

/* =====================  GOLD MARQUEE RIBBON  ===================== */
.ribbon{
  margin-top:clamp(46px,6vw,74px);
  background:linear-gradient(90deg,#B0873A,#E7C87E 22%,#C9A24E 50%,#E7C87E 78%,#B0873A);
  color:#2A0410;overflow:hidden;position:relative;
  border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(0,0,0,.14);
}
.ribbon-track{display:flex;width:max-content;animation:ribbonSlide 34s linear infinite}
.ribbon-track span{
  display:inline-flex;align-items:center;gap:20px;padding:13px 0;
  font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;
}
.ribbon-track span i{font-style:normal;padding:0 22px;opacity:.55}
@keyframes ribbonSlide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ribbon:hover .ribbon-track{animation-play-state:paused}

/* =====================  FEATURE STRIP (floating card)  ===================== */
.features{background:transparent;margin-top:-1px;padding:0}
.features-inner{
  max-width:var(--maxw);width:calc(100% - 40px);margin:-46px auto 0;position:relative;z-index:3;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:34px 20px;
}
.feature{
  text-align:center;padding:6px 18px;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.feature+.feature::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line),transparent);
}
.feature .feature-ic{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  color:var(--wine);background:var(--ivory-2);
  border:1px solid rgba(201,162,78,.5);margin-bottom:0;
  transition:transform .45s var(--ease),background .45s,color .45s,border-color .45s;
}
.feature .feature-ic svg{stroke:currentColor}
.feature:hover .feature-ic{background:var(--wine);color:var(--gold-bright);border-color:var(--gold);transform:translateY(-5px)}
.feature b{font-family:var(--serif);font-size:17.5px;font-weight:600;color:var(--wine);letter-spacing:.02em}
.feature span:last-child{font-size:13px;color:var(--ink-soft);letter-spacing:.02em}

/* =====================  SECTION HEADS  ===================== */
.exq-head{margin-bottom:46px}
.section-intro{max-width:64ch;margin:14px auto 0;color:var(--ink-soft);font-weight:300}

/* =====================  WHAT WE DO — service cards  ===================== */
.exq{background:var(--ivory)}
.exq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.exq-card{
  position:relative;border-radius:20px;overflow:hidden;background:var(--wine-deep);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.exq-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.exq-media{aspect-ratio:3/3.9;overflow:hidden;position:relative}
.exq-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.exq-card:hover .exq-media img{transform:scale(1.08)}
.exq-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(42,4,16,.86) 100%);
}
.exq-card::before{
  content:"";position:absolute;inset:12px;border:1px solid rgba(243,230,196,.32);
  border-radius:12px;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s
}
.exq-card:hover::before{opacity:1}
.exq-label{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 20px 22px;color:#fff;
}
.exq-label-txt b{display:block;font-family:var(--serif);font-size:20px;font-weight:600}
.exq-label-txt i{display:block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);font-style:normal;margin-top:5px}
.exq-arrow{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid !important;place-items:center;
  border:1px solid rgba(201,162,78,.6);color:var(--gold-bright);
  transition:background .4s,color .4s,transform .4s
}
.exq-card:hover .exq-arrow{background:var(--gold);color:#2A0410;transform:translateX(3px)}

/* =====================================================================
   BROWSE BY CATEGORY — brand new "couture panels" design
   Desktop : expanding editorial panels (hover to open)
   Mobile  : snap-scrolling tall cards
   ===================================================================== */
.collections{
  position:relative;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(138,30,63,.5), transparent 65%),
    linear-gradient(180deg,#2A0410 0%,#450818 52%,#2A0410 100%);
  color:#fff;padding:clamp(66px,8vw,104px) 0;overflow:hidden;
}
.collections::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;
  background:url('../img/logo-mark.png') no-repeat 112% 50%/380px;
  filter:saturate(.3);
}
.collections-inner{max-width:1340px;margin:0 auto;padding:0 clamp(18px,4vw,40px);position:relative;z-index:2}
.collections .section-title{color:#fff}
.collections .eyebrow{color:var(--gold-soft)}
.collections .section-intro{color:rgba(255,236,242,.72)}

.colx{display:flex;gap:14px;height:min(560px,72vh)}
.colx-item{
  position:relative;flex:1 1 0;min-width:0;border-radius:22px;overflow:hidden;
  border:1px solid rgba(201,162,78,.36);
  transition:flex .8s var(--ease), border-color .5s;
  isolation:isolate;display:block;
}
.colx-item img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  color:transparent;font-size:0;
  transform:scale(1.06);transition:transform 1.3s var(--ease),filter .7s;
  filter:saturate(.72) brightness(.62);
}
.colx-item::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(42,4,16,.16) 0%,rgba(42,4,16,.5) 46%,rgba(28,2,10,.94) 100%);
  transition:opacity .6s;
}
.colx-item:hover,.colx-item.is-open{flex:2.9 1 0;border-color:var(--gold)}
.colx-item:hover img,.colx-item.is-open img{filter:saturate(1) brightness(.8);transform:scale(1)}

.colx-num{
  position:absolute;top:20px;left:20px;z-index:3;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(201,162,78,.7);background:rgba(28,2,10,.42);
  backdrop-filter:blur(4px);
  font-size:11px;letter-spacing:.08em;color:var(--gold-bright);font-weight:600;
}
.colx-body{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:24px 20px 26px;
  display:flex;flex-direction:column;gap:10px;
}
.colx-item:not(:hover):not(.is-open) .colx-body{align-items:center;padding-left:8px;padding-right:8px}
.colx-item:not(:hover):not(.is-open) .colx-name{align-self:center}
.colx-name{
  font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(18px,1.55vw,24px);line-height:1.1;
  writing-mode:vertical-rl;transform:rotate(180deg);
  align-self:flex-start;white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
  transition:none;
}
.colx-item:hover .colx-name,.colx-item.is-open .colx-name{writing-mode:horizontal-tb;transform:none}
.colx-meta{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);
  opacity:0;transform:translateY(10px);transition:opacity .45s .1s,transform .45s .1s;
}
.colx-cta{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:11px 22px;border-radius:999px;border:1px solid var(--gold);
  color:var(--gold-bright);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateY(12px);transition:opacity .5s .16s,transform .5s .16s,background .35s,color .35s;
  white-space:nowrap;
}
.colx-item:hover .colx-meta,.colx-item.is-open .colx-meta,
.colx-item:hover .colx-cta,.colx-item.is-open .colx-cta{opacity:1;transform:none}
.colx-cta:hover{background:var(--gold);color:#2A0410}
/* thin inner gold frame on the open panel */
.colx-item::before{
  content:"";position:absolute;inset:12px;z-index:2;border:1px solid rgba(243,230,196,.3);
  border-radius:14px;opacity:0;transition:opacity .5s;pointer-events:none;
}
.colx-item:hover::before,.colx-item.is-open::before{opacity:1}

.collections-foot{display:flex;justify-content:center;margin-top:44px}
.collections .btn-outline{border-color:var(--gold);color:var(--gold-bright)}
.collections .btn-outline:hover{background:var(--gold);border-color:var(--gold);color:#2A0410}

/* mobile: snap carousel */
@media (max-width:900px){
  .colx{
    height:auto;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:12px;gap:14px;-webkit-overflow-scrolling:touch;
  }
  .colx::-webkit-scrollbar{height:4px}
  .colx::-webkit-scrollbar-thumb{background:rgba(201,162,78,.55);border-radius:4px}
  .colx-item,.colx-item:hover,.colx-item.is-open{flex:0 0 78%;height:430px;scroll-snap-align:start}
  .colx-item.is-open{border-color:var(--gold)}
  .colx-item img{filter:saturate(1) brightness(.72);transform:scale(1)}
  .colx-name{writing-mode:horizontal-tb;transform:none;white-space:normal}
  .colx-meta,.colx-cta{opacity:1;transform:none}
  .colx-item::before{opacity:1}
  /* keep every mobile card left-aligned, open or not */
  .colx-item .colx-body,.colx-item:not(:hover):not(.is-open) .colx-body{
    align-items:flex-start;padding-left:22px;padding-right:22px
  }
  .colx-item .colx-name,.colx-item:not(:hover):not(.is-open) .colx-name{align-self:flex-start}
  .collections::before{background-size:280px;opacity:.16}
}

/* =====================================================================
   BESPOKE PROCESS band
   ===================================================================== */
.craft{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.craft-inner{max-width:var(--maxw);margin:0 auto;padding:clamp(58px,7vw,92px) 24px}
.craft-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
.craft-step{position:relative;padding:30px 24px 28px;background:#fff;border:1px solid var(--line);border-radius:18px;transition:transform .5s var(--ease),box-shadow .5s}
.craft-step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.craft-step b{display:block;font-family:var(--serif);font-size:19px;color:var(--wine);margin:16px 0 8px}
.craft-step p{margin:0;font-size:14.5px;color:var(--ink-soft);font-weight:300;line-height:1.7}
.craft-num{
  display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#E7C87E,#C9A24E);color:#2A0410;
  font-family:var(--serif);font-size:18px;font-weight:700;
  box-shadow:0 10px 24px rgba(154,116,38,.26);
}
.craft-step::after{
  content:"";position:absolute;left:24px;right:24px;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity .4s
}
.craft-step:hover::after{opacity:1}

/* =====================  ABOUT (dark)  ===================== */
.about2{
  background:
    radial-gradient(90% 80% at 88% 12%, rgba(176,117,159,.24), transparent 60%),
    linear-gradient(150deg,#450818,#2A0410 70%);
  color:#fff;position:relative;overflow:hidden;
}
.about2::before{
  content:"";position:absolute;inset:26px;border:1px solid rgba(201,162,78,.2);border-radius:8px;pointer-events:none
}
.about2-copy p{color:rgba(255,236,242,.76);font-weight:300}
.about2-media img{border-radius:22px;border:1px solid rgba(201,162,78,.4);box-shadow:0 34px 80px rgba(0,0,0,.42)}
.badge2{background:rgba(255,255,255,.05);border:1px solid rgba(201,162,78,.34);border-radius:14px}
.badge2 .badge2-ic{color:#2A0410;background:linear-gradient(120deg,var(--gold-soft),var(--gold));box-shadow:0 8px 20px rgba(154,116,38,.28)}
.badge2 b{color:#fff}
.badge2 small{color:var(--gold-soft)}

/* =====================  TESTIMONIALS  ===================== */
.tst2-slide{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}
.tst2-mark{color:var(--gold);opacity:.5}
.tst2-quote{color:var(--ink);font-family:var(--serif);font-style:italic}
.tst2-stars{color:var(--gold)}
.tst2-ava{border:2px solid var(--gold-soft)}
.tst2-arrow{background:#fff;border:1px solid var(--line);color:var(--wine)}
.tst2-arrow:hover{background:var(--wine);color:var(--gold-bright);border-color:var(--wine)}
.tst2-dots button.is-on{background:var(--gold)}

/* =====================  NEWSLETTER  ===================== */
.news{
  background:linear-gradient(120deg,#5C0B24,#8A1E3F 55%,#5C0B24);
  border-top:1px solid rgba(201,162,78,.34);border-bottom:1px solid rgba(201,162,78,.34);
}
.news-inner{color:#fff}
.news-ic{color:var(--gold-bright)}
.news-form input{
  background:rgba(255,255,255,.09);border:1px solid rgba(243,230,196,.34);color:#fff;border-radius:999px
}
.news-form input::placeholder{color:rgba(255,236,242,.6)}
.news-form input:focus{border-color:var(--gold);outline:none}

/* =====================  FOOTER  ===================== */
/* footer emblem = the real logo */
.foot-mark{
  width:52px;height:52px;flex:none;border-radius:50%;border:0 !important;
  background:url('../img/logo-mark.png') center/contain no-repeat !important;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));
}
.foot-logo-text b{font-family:var(--serif);color:#fff}
.foot-logo-text small{color:var(--gold-soft);letter-spacing:.4em}
.foot-tag{color:var(--magnolia);font-family:var(--serif);font-style:italic}
.foot-social a{border:1px solid rgba(201,162,78,.4);color:var(--gold-soft)}
.foot-social a:hover{background:var(--gold);color:#2A0410;border-color:var(--gold)}
.foot-crow-ic{color:var(--gold)}
.site-foot{
  background:linear-gradient(180deg,#2A0410,#1C020A);
  border-top:1px solid rgba(201,162,78,.3);color:rgba(255,236,242,.72);
}
.site-foot h4{color:#fff;letter-spacing:.18em}
.site-foot a{color:rgba(255,236,242,.72)}
.site-foot a:hover{color:var(--gold-bright)}
.footer,footer.footer{
  background:linear-gradient(180deg,#2A0410,#1C020A);
  border-top:1px solid rgba(201,162,78,.3);color:rgba(255,236,242,.72);
}
.footer h4,.footer h3,.footer .foot-title{color:#fff}
.footer a{color:rgba(255,236,242,.72)}
.footer a:hover{color:var(--gold-bright)}
.footer .brand-name{color:#fff}
.footer .brand-sub{color:var(--gold-soft)}
.footer-bottom,.foot-bottom{border-top:1px solid rgba(201,162,78,.2);color:rgba(255,236,242,.55)}

/* =====================  SHOP / PRODUCT / GENERIC  ===================== */
.page-hero,.shop-hero{
  background:
    radial-gradient(90% 100% at 20% 0%, rgba(138,30,63,.5), transparent 62%),
    linear-gradient(150deg,#450818,#2A0410);
  color:#fff;border-bottom:1px solid rgba(201,162,78,.3);
}
.page-hero .eyebrow,.shop-hero .eyebrow{color:var(--gold-soft)}
.page-hero-title,.shop-title{color:#fff}
.page-hero-sub,.shop-note{color:rgba(255,236,242,.74)}

.chip{border:1px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:999px}
.chip:hover{border-color:var(--gold);color:var(--wine)}
.chip.is-on{background:var(--wine);border-color:var(--wine);color:#fff}

.product-card,.card{border:1px solid var(--line);border-radius:18px;background:#fff}
.product-card:hover{box-shadow:var(--shadow);transform:translateY(-6px)}
.product-name,.product-card h3{color:var(--wine)}
.price,.product-price{color:var(--wine)}
.badge,.tag{background:var(--gold);color:#2A0410}

.empty-mark{
  background:var(--wine);color:var(--gold-pale);border:1px solid var(--gold);
  font-family:var(--serif)
}
.value-num{color:var(--gold)}
.cta-band-inner{
  background:linear-gradient(135deg,#5C0B24,#2A0410);color:#fff;
  border:1px solid rgba(201,162,78,.34);border-radius:var(--radius-lg)
}
.cta-band-inner h2{color:#fff}
.cta-band-inner p{color:rgba(255,236,242,.75)}

.wa-float{background:#25D366}

/* =====================  RESPONSIVE  ===================== */
@media (max-width:1080px){
  .exq-grid{grid-template-columns:repeat(2,1fr)}
  .craft-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:940px){
  .hs-inner{grid-template-columns:1fr;text-align:center}
  .hs-eyebrow{justify-content:center}
  .hs-eyebrow::before{display:none}
  .hs-desc{margin-left:auto;margin-right:auto}
  .hs-copy .orn-leaf{justify-content:center}
  .hs-visual{margin-top:34px}
  .hs-visual::after{width:150px;height:150px}
  .features-inner{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:-30px}
  .feature+.feature::before{display:none}
  .feature:nth-child(n+3){border-top:1px solid var(--line-soft);padding-top:22px;margin-top:6px}
}
@media (max-width:860px){
  /* drawer is off-canvas when closed — keep it out of the layout box entirely */
  .menu{visibility:hidden;background:var(--ivory)}
  .menu.is-open{visibility:visible}
  .menu>a{color:var(--ink-soft);border-bottom:1px solid var(--line-soft)}
  .menu>a:hover,.menu .is-active{color:var(--wine)}
}
@media (max-width:720px){
  .hero-split::before{inset:12px}
  .hero-split::after{inset:18px}
  .brand-mark,.brand-mark-img{width:46px;height:46px}
  .brand-name{font-size:21px}
  .brand-sub{font-size:8px;letter-spacing:.34em}
  .ribbon-track span{font-size:10.5px;letter-spacing:.26em}
  .craft-grid{grid-template-columns:1fr}
  .features-inner{padding:24px 12px}
}
@media (max-width:420px){
  .exq-grid{grid-template-columns:1fr}
  .hs-title-lg{font-size:clamp(46px,15vw,62px)}
}

/* =====================  MOTION SAFETY  ===================== */
@media (prefers-reduced-motion:reduce){
  .ribbon-track{animation:none}
  .colx-item,.colx-item img{transition:none}
  *{scroll-behavior:auto}
}

/* =====================================================================
   THEME v6 — FULL-SCREEN HERO SLIDER + TWO-IMAGE CATEGORY PANELS
   Tuned for deep-red / burgundy product photography: the bands behind
   the imagery go near-black so red artwork separates instead of
   blending into the page.
   ===================================================================== */

/* ---------------------------------------------------------------
   1) HERO — full-viewport slider
   --------------------------------------------------------------- */
.hslider{
  position:relative;isolation:isolate;overflow:hidden;
  /* JS refines this to exactly "viewport minus the header"; this is the fallback */
  height:calc(100svh - 150px);min-height:540px;max-height:1040px;
  background:#1C020A;color:#fff;
}
.hslider.is-single{min-height:500px}
.hsl-track{position:absolute;inset:0}

.hsl-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.hsl-slide.is-on{opacity:1;visibility:visible;z-index:2}

.hsl-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  color:transparent;font-size:0;
  transform:scale(1.08);transition:transform 8s linear;
}
.hsl-slide.is-on .hsl-img{transform:scale(1)}

/* burgundy scrim — keeps text legible over any photo, red ones included */
.hsl-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,2,7,.90) 0%,rgba(28,2,10,.70) 38%,rgba(28,2,10,.24) 68%,rgba(28,2,10,.42) 100%),
    linear-gradient(180deg,rgba(20,2,7,.55) 0%,transparent 26%,transparent 58%,rgba(20,2,7,.72) 100%);
}
.hsl-center .hsl-scrim{
  background:
    radial-gradient(120% 90% at 50% 50%,rgba(20,2,7,.36) 0%,rgba(20,2,7,.82) 100%),
    linear-gradient(180deg,rgba(20,2,7,.5) 0%,transparent 30%,transparent 60%,rgba(20,2,7,.7) 100%);
}
.hsl-right .hsl-scrim{
  background:
    linear-gradient(270deg,rgba(20,2,7,.90) 0%,rgba(28,2,10,.70) 38%,rgba(28,2,10,.24) 68%,rgba(28,2,10,.42) 100%),
    linear-gradient(180deg,rgba(20,2,7,.55) 0%,transparent 26%,transparent 58%,rgba(20,2,7,.72) 100%);
}

/* thin double gold frame, like the emblem's rings */
.hslider::before{
  content:"";position:absolute;z-index:6;inset:22px;pointer-events:none;
  border:1px solid rgba(201,162,78,.34);border-radius:6px;
}
.hslider::after{
  content:"";position:absolute;z-index:6;inset:30px;pointer-events:none;
  border:1px solid rgba(201,162,78,.14);border-radius:4px;
}

.hsl-inner{
  position:relative;z-index:3;height:100%;
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(30px,6vw,64px);
  display:flex;align-items:center;
}
.hsl-center .hsl-inner{justify-content:center;text-align:center}
.hsl-right .hsl-inner{justify-content:flex-end;text-align:right}
.hsl-copy{max-width:640px}
.hsl-center .hsl-copy .orn-leaf,.hsl-center .hsl-copy{margin-left:auto;margin-right:auto}
.hsl-right .hsl-copy .orn-leaf{justify-content:flex-end}

/* staggered entrance on the active slide */
.hsl-copy>*{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hsl-slide.is-on .hsl-copy>*{opacity:1;transform:none}
.hsl-slide.is-on .hsl-copy>*:nth-child(1){transition-delay:.20s}
.hsl-slide.is-on .hsl-copy>*:nth-child(2){transition-delay:.32s}
.hsl-slide.is-on .hsl-copy>*:nth-child(3){transition-delay:.42s}
.hsl-slide.is-on .hsl-copy>*:nth-child(4){transition-delay:.50s}
.hsl-slide.is-on .hsl-copy>*:nth-child(5){transition-delay:.58s}
.hsl-slide.is-on .hsl-copy>*:nth-child(6){transition-delay:.66s}

.hsl-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-soft);
}
.hsl-eyebrow::before{content:"";width:40px;height:1px;background:var(--gold)}
.hsl-center .hsl-eyebrow::before,.hsl-right .hsl-eyebrow::before{display:none}
.hsl-title{margin:18px 0 0;line-height:.94;color:#fff}
.hsl-title-lg{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(50px,8vw,112px);letter-spacing:-.015em;color:#fff;
  text-shadow:0 20px 54px rgba(0,0,0,.5);
}
.hsl-title-sub{
  display:block;margin-top:14px;font-family:var(--sans);font-weight:300;
  font-size:clamp(12px,1.4vw,17px);letter-spacing:.56em;text-transform:uppercase;color:var(--gold-soft);
}
.hsl-tagline{
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.3vw,28px);
  color:var(--magnolia);margin:6px 0 12px;
}
.hsl-desc{
  color:rgba(255,236,242,.8);max-width:50ch;font-weight:300;font-size:16px;line-height:1.75;margin:0 0 4px;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.hsl-center .hsl-desc{margin-left:auto;margin-right:auto}
.hsl-right .hsl-desc{margin-left:auto}
.hsl-copy .btn{margin-top:24px}

/* controls */
.hsl-arrow{
  position:absolute;z-index:7;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(20,2,7,.34);border:1px solid rgba(201,162,78,.5);color:var(--gold-bright);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .3s,color .3s,transform .3s,border-color .3s;
}
.hsl-arrow:hover{background:var(--gold);color:#1C020A;border-color:var(--gold)}
.hsl-prev{left:clamp(14px,3vw,40px)}
.hsl-next{right:clamp(14px,3vw,40px)}
.hsl-prev:hover{transform:translateY(-50%) translateX(-3px)}
.hsl-next:hover{transform:translateY(-50%) translateX(3px)}

.hsl-dots{
  position:absolute;z-index:7;left:0;right:0;bottom:clamp(30px,5vh,54px);
  display:flex;justify-content:center;gap:12px;
}
.hsl-dot{
  width:34px;height:20px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;
}
.hsl-dot i{
  display:block;width:28px;height:2px;background:rgba(255,236,242,.34);
  transition:background .35s,transform .35s;
}
.hsl-dot:hover i{background:var(--gold-soft)}
.hsl-dot.is-on i{background:var(--gold);transform:scaleY(2)}

.hsl-count{
  position:absolute;z-index:7;left:clamp(24px,4vw,56px);bottom:clamp(30px,5vh,54px);
  display:flex;align-items:baseline;gap:6px;font-family:var(--serif);
  color:var(--gold-soft);letter-spacing:.06em;
}
.hsl-count b{font-size:26px;color:#fff}
.hsl-count span{opacity:.5}
.hsl-count i{font-style:normal;font-size:14px;opacity:.75}

.hslider .scroll-hint{position:absolute;z-index:7;left:50%;transform:translateX(-50%);bottom:0}

/* the trust card sits below the full-screen slider, not overlapping it */
.features.features-below{padding:0}
.features.features-below .features-inner{margin-top:clamp(30px,4vw,48px)}

/* ---------------------------------------------------------------
   2) COLLECTIONS BAND — near-black so red artwork separates
   --------------------------------------------------------------- */
.collections{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(92,11,36,.55), transparent 62%),
    linear-gradient(180deg,#170208 0%,#1F030C 46%,#120106 100%);
}
.collections::before{opacity:.07;background-size:340px}
.collections .colx{gap:18px}

.colx-item{
  border:1px solid rgba(201,162,78,.30);
  background:#120106;
  box-shadow:0 22px 60px rgba(0,0,0,.45);
}
.colx-item:hover,.colx-item.is-open{
  border-color:var(--gold);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(201,162,78,.28);
}

/* two images per panel: closed one fades out, open one fades in */
.colx-item .colx-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  color:transparent;font-size:0;
  transition:opacity .75s var(--ease),transform 1.3s var(--ease),filter .7s;
}
.colx-item .colx-img-closed{opacity:1}
.colx-item .colx-img-open{opacity:0}
.colx-item:hover .colx-img-open,.colx-item.is-open .colx-img-open{opacity:1}
.colx-item:has(.colx-img-open):hover .colx-img-closed,
.colx-item:has(.colx-img-open).is-open .colx-img-closed{opacity:0}

/* red photos need less crushing than the generic treatment */
.colx-item img{filter:saturate(.9) brightness(.68);transform:scale(1.04)}
.colx-item:hover img,.colx-item.is-open img{filter:saturate(1.02) brightness(.94);transform:scale(1)}

/* keep the caption readable over a busy red photo */
.colx-item::after{
  background:linear-gradient(180deg,rgba(18,1,6,.10) 0%,rgba(18,1,6,.38) 42%,rgba(12,1,4,.93) 100%);
}
.colx-name{text-shadow:0 3px 18px rgba(0,0,0,.75)}
.colx-num{background:rgba(18,1,6,.5)}

/* ---------------------------------------------------------------
   3) RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:940px){
  .hslider{height:calc(100svh - 124px);min-height:500px}
  .hsl-copy{max-width:none}
  .hsl-slide,.hsl-slide.hsl-right,.hsl-slide.hsl-left{text-align:center}
  .hsl-inner{justify-content:center;text-align:center}
  .hsl-copy .orn-leaf{justify-content:center}
  .hsl-eyebrow::before{display:none}
  .hsl-desc{margin-left:auto;margin-right:auto}
  .hsl-slide .hsl-scrim{
    background:
      linear-gradient(180deg,rgba(20,2,7,.62) 0%,rgba(20,2,7,.42) 40%,rgba(16,1,6,.88) 100%);
  }
  .hsl-arrow{width:44px;height:44px}
  .hsl-count{display:none}
  .features.features-below .features-inner{margin-top:28px}
}
@media (max-width:720px){
  .hslider::before{inset:12px}
  .hslider::after{inset:18px}
  .hsl-prev{left:8px}
  .hsl-next{right:8px}
  .hsl-arrow{width:40px;height:40px}
  .hsl-dots{bottom:22px}
}

@media (prefers-reduced-motion:reduce){
  .hsl-img,.hsl-slide,.hsl-copy>*{transition:none}
  .hsl-slide.is-on .hsl-img{transform:none}
}

/* =====================================================================
   THEME v7 — TYPOGRAPHY REWORK + FULLY THEMED BURGUNDY HEADER
   Cormorant Garamond (display) x Manrope (text).
   Loaded last, so this is the authority on type and on the header.
   ===================================================================== */

:root{
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --nav-h:78px;
}

/* ---------------------------------------------------------------
   1) TYPE SCALE
   Cormorant is a light, high-contrast face — it needs a bit more
   size and weight than Playfair did, and Manrope needs looser
   line-height and less tracking than Jost.
   --------------------------------------------------------------- */
body{
  font-family:var(--sans);
  font-size:16.5px;line-height:1.78;font-weight:400;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
p{margin:0 0 1.05em}

h1,h2,h3,h4,.section-title,.hsl-title,.brand-name{
  font-family:var(--serif);font-weight:600;letter-spacing:.004em;
}
h1,h2,h3,h4{line-height:1.14}

.section-title{
  font-size:clamp(34px,5vw,58px);font-weight:600;line-height:1.06;letter-spacing:0;
}
.section-intro{
  font-size:16.5px;line-height:1.8;font-weight:400;color:var(--ink-soft);
  max-width:60ch;
}
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
}

/* buttons: Manrope reads better a touch larger with less tracking */
.btn{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.1em;
}
.btn-lg{font-size:13px;letter-spacing:.11em;padding:17px 36px}

/* ---------------------------------------------------------------
   2) HEADER — burgundy velvet, matching the emblem
   --------------------------------------------------------------- */
.announce{
  background:linear-gradient(90deg,#1C020A,#5C0B24 50%,#1C020A);
  color:var(--gold-pale);border-bottom:1px solid rgba(201,162,78,.26);
  font-size:12px;font-weight:500;letter-spacing:.08em;padding:10px 16px;
}
.announce span{color:var(--gold-pale)}

.top-bar{
  background:#170208;border-bottom:1px solid rgba(201,162,78,.16);
}
.top-bar-inner,.top-item,.top-bar a{color:rgba(243,230,196,.74);font-size:12.5px;letter-spacing:.03em}
.top-item:hover,.top-bar a:hover{color:var(--gold-bright)}
.top-mid{
  font-family:var(--serif);font-style:italic;font-size:15px;
  letter-spacing:.06em;color:var(--gold-soft);text-transform:none;
}
.top-sep{background:rgba(201,162,78,.3)}

.nav{
  position:sticky;top:0;z-index:120;
  background:linear-gradient(180deg,#3D0616 0%,#2A0410 100%);
  border-bottom:1px solid rgba(201,162,78,.3);
  box-shadow:0 12px 40px rgba(20,2,7,.34);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav.is-stuck{
  background:rgba(30,3,12,.94);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 rgba(201,162,78,.28), 0 16px 44px rgba(20,2,7,.5);
}
.nav-inner{height:var(--nav-h);transition:height .32s var(--ease)}
.nav.is-stuck .nav-inner{height:64px}

/* brand — works for both the uploaded lockup and the emblem + wordmark */
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-img{
  height:56px;width:auto;max-width:min(300px,42vw);object-fit:contain;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));
  transition:height .32s var(--ease);
}
.nav.is-stuck .brand-img{height:46px}
.brand-mark-img,.brand-mark{
  width:56px;height:56px;flex:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
.nav.is-stuck .brand-mark-img,.nav.is-stuck .brand-mark{width:46px;height:46px}
.brand-name{
  font-family:var(--serif);font-size:30px;font-weight:600;color:#fff;letter-spacing:.01em;
}
.brand-sub{
  font-family:var(--sans);font-size:8.5px;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold-soft);margin-top:5px;
}

/* menu */
.menu{gap:clamp(18px,2.2vw,34px)}
.menu>a{
  font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,236,242,.8);
}
.menu>a:hover,.menu .is-active{color:#fff}
.menu>a::after{background:linear-gradient(90deg,var(--gold),var(--gold-bright));height:1.5px}

/* icons */
.nav-actions .icon-btn{
  width:40px;height:40px;border-radius:50%;
  color:rgba(255,236,242,.86);border:1px solid transparent;
}
.nav-actions .icon-btn:hover{
  background:rgba(201,162,78,.14);color:var(--gold-bright);border-color:rgba(201,162,78,.42);
}
.cart-badge{background:var(--gold);color:#1C020A;font-weight:700}

/* burger */
.nav-burger span{background:var(--gold-soft)}

/* search drawer */
form.nav-search{background:#1C020A;border-top:1px solid rgba(201,162,78,.2)}
form.nav-search input{
  background:rgba(255,255,255,.06);border:1px solid rgba(201,162,78,.34);color:#fff;
  font-family:var(--sans);
}
form.nav-search input::placeholder{color:rgba(255,236,242,.5)}
form.nav-search input:focus{border-color:var(--gold);outline:none}
form.nav-search button{background:var(--gold);color:#1C020A;border:0;font-weight:600}

/* the hero now sits under a dark header — no light seam between them */
.hslider{border-top:0}

/* ---------------------------------------------------------------
   3) BODY COPY IN THE DARK BANDS
   --------------------------------------------------------------- */
.hsl-eyebrow,.hs-eyebrow{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.3em}
.hsl-title-lg{font-size:clamp(56px,9vw,128px);font-weight:600;letter-spacing:-.005em}
.hsl-title-sub{font-family:var(--sans);font-weight:600;font-size:clamp(11px,1.2vw,14px);letter-spacing:.46em}
.hsl-tagline{font-size:clamp(22px,2.6vw,34px);font-weight:400}
.hsl-desc{font-size:16.5px;line-height:1.8;font-weight:400;color:rgba(255,236,242,.84)}

.feature b{font-family:var(--serif);font-size:22px;font-weight:600}
.feature span:last-child{font-size:13.5px;font-weight:400}

.exq-label-txt b{font-family:var(--serif);font-size:clamp(22px,2vw,27px);font-weight:600}
.exq-label-txt i{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.2em}

.colx-name{font-family:var(--serif);font-size:clamp(21px,1.8vw,29px);font-weight:600}
.colx-meta{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em}
.colx-cta{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em}
.colx-num{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.04em}

.craft-step b{font-family:var(--serif);font-size:23px;font-weight:600}
.craft-step p{font-size:15.5px;line-height:1.8}
.craft-num{font-family:var(--serif);font-size:21px;font-weight:700}

.tst2-quote{font-size:clamp(20px,2.2vw,26px);line-height:1.5;font-weight:400}
.tst2-meta b{font-family:var(--serif);font-size:19px;font-weight:600}
.tst2-meta i{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em}

.news-text{font-family:var(--serif);font-size:clamp(19px,2vw,25px);font-weight:600}
.news-form input{font-family:var(--sans);font-size:14.5px}

.ribbon-track span{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.28em}

.site-foot h4,.footer h4{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);
}
.site-foot a,.footer a{font-size:14.5px}
.foot-logo-text b{font-family:var(--serif);font-size:26px;font-weight:600}
.foot-logo-text small{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.4em}
.foot-tag{font-family:var(--serif);font-style:italic;font-size:17px}

.shop-title,.page-hero-title{font-size:clamp(36px,5vw,58px);font-weight:600}
.product-name,.product-card h3{font-family:var(--serif);font-size:20px;font-weight:600}
.price,.product-price{font-family:var(--sans);font-weight:700;letter-spacing:.01em}
.chip{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.06em}

/* ---------------------------------------------------------------
   4) MOBILE DRAWER — dark, matching the header
   --------------------------------------------------------------- */
@media (max-width:860px){
  .nav-inner{height:66px}
  .nav.is-stuck .nav-inner{height:60px}
  .brand-img{height:44px;max-width:52vw}
  .brand-mark-img,.brand-mark,.nav.is-stuck .brand-mark-img,.nav.is-stuck .brand-mark{width:44px;height:44px}
  .brand-name{font-size:24px}
  .brand-sub{font-size:7.5px;letter-spacing:.34em}

  .menu{
    background:linear-gradient(180deg,#3D0616,#1C020A);
    border-left:1px solid rgba(201,162,78,.28);
  }
  .menu>a{
    color:rgba(255,236,242,.86);font-size:14px;letter-spacing:.1em;
    border-bottom:1px solid rgba(201,162,78,.16);
  }
  .menu>a:hover,.menu .is-active{color:var(--gold-bright)}
  .top-mid{display:none}
}
@media (max-width:520px){
  .announce{font-size:11px;letter-spacing:.04em}
  .top-bar-inner,.top-item,.top-bar a{font-size:11.5px}
}

/* the slider has dots + a counter already — the scroll pill just collided with them */
.hslider .scroll-hint{display:none}

/* =====================================================================
   THEME v8 — LIGHTER
   The site had four dark bands stacked up (hero, collections, about,
   footer) and read as one long dark page. This layer keeps the burgundy
   identity but moves the weight onto warm ivory: only the hero, the
   newsletter stripe and the footer stay dark now.
   ===================================================================== */

:root{
  --ivory:#FDF8F3;
  --ivory-2:#F6EBE2;
  --cream:#FFFDFB;
  --blush:#F8EDE6;
  --line:#EADCD0;
  --line-soft:#F4EBE3;
  /* gold is too pale for text on a light background — use this for those */
  --gold-ink:#A87D2E;
  --ink-soft:#5C4048;
}

body{background:var(--ivory)}

/* eyebrows / small gold text sitting on light bands */
.eyebrow{color:var(--gold-ink)}
.section-intro{color:var(--ink-soft)}

/* ---------------------------------------------------------------
   1) HERO — same photography, lighter scrim so images actually show
   --------------------------------------------------------------- */
.hsl-scrim{
  background:
    linear-gradient(90deg,rgba(24,3,10,.80) 0%,rgba(32,4,12,.54) 40%,rgba(32,4,12,.10) 70%,rgba(32,4,12,.26) 100%),
    linear-gradient(180deg,rgba(24,3,10,.40) 0%,transparent 26%,transparent 62%,rgba(24,3,10,.58) 100%);
}
.hsl-center .hsl-scrim{
  background:
    radial-gradient(120% 90% at 50% 50%,rgba(24,3,10,.24) 0%,rgba(24,3,10,.70) 100%),
    linear-gradient(180deg,rgba(24,3,10,.38) 0%,transparent 32%,transparent 64%,rgba(24,3,10,.58) 100%);
}
.hsl-right .hsl-scrim{
  background:
    linear-gradient(270deg,rgba(24,3,10,.80) 0%,rgba(32,4,12,.54) 40%,rgba(32,4,12,.10) 70%,rgba(32,4,12,.26) 100%),
    linear-gradient(180deg,rgba(24,3,10,.40) 0%,transparent 26%,transparent 62%,rgba(24,3,10,.58) 100%);
}

/* ---------------------------------------------------------------
   2) SIGNATURE SERVICES — lighter paper behind the cards
   --------------------------------------------------------------- */
.exq{
  background:
    radial-gradient(70% 46% at 50% 0%,rgba(201,162,78,.10),transparent 70%),
    var(--ivory);
}
.exq-card{box-shadow:0 16px 40px rgba(92,11,36,.10)}
.exq-card:hover{box-shadow:0 30px 62px rgba(92,11,36,.20)}

/* ---------------------------------------------------------------
   3) BROWSE BY CATEGORY — was near-black, now a warm ivory band.
   Deep-red artwork still separates because each panel now sits on
   light paper inside a gold hairline instead of on a dark field.
   --------------------------------------------------------------- */
.collections{
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(201,162,78,.14), transparent 62%),
    linear-gradient(180deg,#FDF8F3 0%,#F5E7DD 52%,#FDF8F3 100%);
  color:var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.collections::before{opacity:.05;filter:none}
.collections .section-title{color:var(--wine)}
.collections .eyebrow{color:var(--gold-ink)}
.collections .section-intro{color:var(--ink-soft)}

.colx-item{
  /* burgundy fallback, not white — so a category with no image yet still
     shows readable white text instead of white-on-white */
  background:linear-gradient(180deg,#6E1130,#3B0715);
  border:1px solid rgba(201,162,78,.42);
  box-shadow:0 14px 38px rgba(92,11,36,.12);
}
.colx-item:hover,.colx-item.is-open{
  border-color:var(--gold);
  box-shadow:0 28px 68px rgba(92,11,36,.24), 0 0 0 1px rgba(201,162,78,.35);
}
/* photos stay bright — no more heavy dimming */
.colx-item img{filter:saturate(1) brightness(.9);transform:scale(1.03)}
.colx-item:hover img,.colx-item.is-open img{filter:saturate(1.04) brightness(1);transform:scale(1)}
/* just enough veil at the base to keep the caption readable */
.colx-item::after{
  background:linear-gradient(180deg,rgba(18,1,6,0) 44%,rgba(18,1,6,.30) 66%,rgba(14,1,5,.88) 100%);
}
.colx-num{
  background:rgba(255,253,251,.9);border-color:rgba(201,162,78,.75);color:var(--wine);
  backdrop-filter:blur(3px);
}
.colx-item::before{border-color:rgba(255,255,255,.35)}
.collections .btn-outline{border-color:var(--gold-ink);color:var(--wine)}
.collections .btn-outline:hover{background:var(--wine);border-color:var(--wine);color:#fff}

@media (max-width:900px){
  .colx-item img{filter:saturate(1) brightness(.92)}
}

/* ---------------------------------------------------------------
   4) THE BESPOKE PROCESS — brighter paper
   --------------------------------------------------------------- */
.craft{background:var(--cream)}
.craft-step{background:#fff;border-color:var(--line)}

/* ---------------------------------------------------------------
   5) ABOUT — flipped from a dark band to warm ivory
   --------------------------------------------------------------- */
.about2{
  background:
    radial-gradient(90% 80% at 88% 12%, rgba(233,191,221,.28), transparent 62%),
    linear-gradient(150deg,#FDF8F3 0%,#F5E7DD 100%);
  color:var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.about2::before{border-color:rgba(201,162,78,.34)}
.about2 .eyebrow,.about2 .eyebrow-light{color:var(--gold-ink)}
.about2 .section-title,.about2 .section-title.light{color:var(--wine)}
.about2-copy p{color:var(--ink-soft)}
.about2-media img{
  border:1px solid rgba(201,162,78,.42);
  box-shadow:0 26px 62px rgba(92,11,36,.18);
}
.badge2{background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px rgba(92,11,36,.07)}
.badge2 b{color:var(--wine)}
.badge2 small{color:var(--muted)}
.badge2 .badge2-ic{color:#2A0410;background:linear-gradient(120deg,var(--gold-soft),var(--gold))}

/* ---------------------------------------------------------------
   6) TESTIMONIALS
   --------------------------------------------------------------- */
.tst2-wrap{background:var(--ivory)}
.tst2-slide{background:#fff;border-color:var(--line);box-shadow:0 16px 44px rgba(92,11,36,.09)}
.tst2-arrow{background:#fff;border-color:var(--line);color:var(--wine)}

/* ---------------------------------------------------------------
   7) NEWSLETTER + FOOTER — the two deliberate dark notes.
   Footer lifted off near-black so it reads burgundy, not a void.
   --------------------------------------------------------------- */
.news{
  background:linear-gradient(120deg,#5C0B24,#8A1E3F 52%,#5C0B24);
  border-top:1px solid rgba(201,162,78,.4);
  border-bottom:1px solid rgba(201,162,78,.4);
}
.site-foot,.footer,footer.footer{
  background:linear-gradient(180deg,#5A0A22 0%,#42061A 55%,#33040F 100%);
  border-top:1px solid rgba(201,162,78,.34);
  color:rgba(255,238,244,.8);
}
.site-foot a,.footer a{color:rgba(255,238,244,.8)}
.site-foot a:hover,.footer a:hover{color:var(--gold-bright)}
.foot-bottom,.footer-bottom{border-top:1px solid rgba(201,162,78,.24);color:rgba(255,238,244,.62)}

/* ---------------------------------------------------------------
   8) INNER PAGES — shop / about / contact banners lightened too
   --------------------------------------------------------------- */
.page-hero,.shop-hero{
  background:
    radial-gradient(100% 100% at 20% 0%, rgba(138,30,63,.55), transparent 62%),
    linear-gradient(150deg,#5C0B24,#3B0715);
}
.shop-list,.about-full,.values,.section{background:transparent}
.values{background:var(--cream)}
.chip{background:#fff;border-color:var(--line)}
.product-card,.card{background:#fff;border-color:var(--line);box-shadow:0 10px 28px rgba(92,11,36,.07)}
.product-card:hover{box-shadow:0 24px 54px rgba(92,11,36,.16)}

/* =====================================================================
   THEME v9 — BIG LOGO · NO HERO FRAME · BRIGHTER SLIDE IMAGERY
   ===================================================================== */

:root{--nav-h:100px}

/* ---------------------------------------------------------------
   1) BRAND — the wordmark gets real presence
   --------------------------------------------------------------- */
.nav-inner{height:var(--nav-h)}
.nav.is-stuck .nav-inner{height:76px}

.brand{gap:12px}
.brand-img{
  height:84px;width:auto;max-width:min(360px,46vw);object-fit:contain;display:block;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.42));
  transition:height .32s var(--ease);
}
.nav.is-stuck .brand-img{height:62px}
.brand-mark-img,.brand-mark{width:76px;height:76px}
.nav.is-stuck .brand-mark-img,.nav.is-stuck .brand-mark{width:58px;height:58px}
.brand-name{font-size:34px}

/* footer emblem grows to match */
.foot-mark{width:64px;height:64px}

@media (max-width:1180px){
  .brand-img{height:72px}
  .menu{gap:clamp(14px,1.8vw,26px)}
  .menu>a{font-size:12px;letter-spacing:.12em}
}
@media (max-width:860px){
  :root{--nav-h:80px}
  .nav-inner{height:var(--nav-h)}
  .nav.is-stuck .nav-inner{height:68px}
  .brand-img{height:62px;max-width:56vw}
  .nav.is-stuck .brand-img{height:52px}
  .brand-mark-img,.brand-mark,
  .nav.is-stuck .brand-mark-img,.nav.is-stuck .brand-mark{width:56px;height:56px}
  .brand-name{font-size:26px}
}
@media (max-width:420px){
  .brand-img{height:54px;max-width:58vw}
}

/* ---------------------------------------------------------------
   2) HERO — no frame, and stop dimming the photography
   --------------------------------------------------------------- */
.hslider::before,.hslider::after{display:none}

/* only as much veil as the text actually needs: a soft wash on the
   copy side and a light foot, nothing across the middle of the photo */
.hsl-scrim{
  background:
    linear-gradient(90deg,rgba(24,3,10,.66) 0%,rgba(28,4,12,.34) 34%,rgba(28,4,12,0) 60%),
    linear-gradient(180deg,rgba(24,3,10,.30) 0%,transparent 22%,transparent 72%,rgba(24,3,10,.44) 100%);
}
.hsl-center .hsl-scrim{
  background:
    radial-gradient(120% 90% at 50% 55%,rgba(24,3,10,.10) 0%,rgba(24,3,10,.52) 100%),
    linear-gradient(180deg,rgba(24,3,10,.30) 0%,transparent 26%,transparent 70%,rgba(24,3,10,.46) 100%);
}
.hsl-right .hsl-scrim{
  background:
    linear-gradient(270deg,rgba(24,3,10,.66) 0%,rgba(28,4,12,.34) 34%,rgba(28,4,12,0) 60%),
    linear-gradient(180deg,rgba(24,3,10,.30) 0%,transparent 22%,transparent 72%,rgba(24,3,10,.44) 100%);
}
/* the photo itself is never filtered — what you upload is what shows */
.hsl-img{filter:none}

/* text keeps its own shadow so it reads even over a bright photo */
.hsl-title-lg{text-shadow:0 4px 12px rgba(20,2,7,.55),0 20px 54px rgba(20,2,7,.5)}
.hsl-tagline,.hsl-desc,.hsl-eyebrow,.hsl-title-sub{text-shadow:0 2px 10px rgba(20,2,7,.6)}

/* a slide with no image yet: burgundy velvet with the emblem, not a black box */
.hsl-noimg{
  background:
    radial-gradient(110% 90% at 18% 12%, rgba(138,30,63,.7) 0%, transparent 60%),
    radial-gradient(90% 80% at 86% 96%, rgba(176,117,159,.34) 0%, transparent 62%),
    linear-gradient(150deg,#5C0B24 0%,#3B0715 48%,#22030D 100%);
}
.hsl-noimg::after{
  content:"";position:absolute;right:-4%;bottom:-10%;width:min(46vw,540px);aspect-ratio:1;
  background:url('../img/logo-mark.png') center/contain no-repeat;opacity:.14;z-index:0;
}
.hsl-noimg .hsl-scrim{background:linear-gradient(180deg,rgba(24,3,10,.24) 0%,transparent 40%,rgba(24,3,10,.34) 100%)}

/* ---------------------------------------------------------------
   3) CATEGORY PANELS — full-strength imagery here too
   --------------------------------------------------------------- */
.colx-item img{filter:none;transform:scale(1.03)}
.colx-item:hover img,.colx-item.is-open img{filter:none;transform:scale(1)}
.colx-item::after{
  background:linear-gradient(180deg,rgba(18,1,6,0) 48%,rgba(18,1,6,.26) 68%,rgba(14,1,5,.86) 100%);
}

/* service cards likewise */
.exq-media img{filter:none}
.exq-card:hover .exq-media img{filter:none}

/* =====================================================================
   THEME v10 — ONE BURGUNDY EVERYWHERE
   Every dark surface on the site now uses the newsletter band's colour:
   #580F24 at the edges, #7F1B37 through the middle. The near-blacks
   (#1C020A / #2A0410 / #170208 / #120106) are gone — nothing on the
   site is darker than this burgundy any more.
   ===================================================================== */

:root{
  --wine:#5C0B24;
  --wine-edge:#580F24;   /* the band's edge colour */
  --wine-mid:#7F1B37;    /* the band's centre colour */
  --wine-700:#6E1130;
  --wine-800:#4E0C20;
  --wine-deep:#4A0A1E;   /* was near-black — now still burgundy */
  --wine-ink:#3E0817;
  --plum:#8A1E3F;
}

/* the signature band, reused as a mixin-by-hand across the site */
.announce,
.news,
.page-hero,.shop-hero,
.cta-band-inner{
  background:linear-gradient(120deg,#580F24 0%,#7F1B37 52%,#580F24 100%);
}

/* ---------------------------------------------------------------
   1) HEADER
   --------------------------------------------------------------- */
.announce{
  color:var(--gold-pale);border-bottom:1px solid rgba(201,162,78,.3);
}
.top-bar{
  background:#4E0C20;border-bottom:1px solid rgba(201,162,78,.22);
}
.nav{
  background:linear-gradient(120deg,#580F24 0%,#7F1B37 52%,#580F24 100%);
  border-bottom:1px solid rgba(201,162,78,.34);
  box-shadow:0 12px 40px rgba(62,8,23,.32);
}
.nav.is-stuck{
  background:rgba(88,15,36,.95);
  box-shadow:0 1px 0 rgba(201,162,78,.32), 0 16px 44px rgba(62,8,23,.42);
}
form.nav-search{background:#4E0C20;border-top:1px solid rgba(201,162,78,.24)}
form.nav-search button{background:var(--gold);color:#4A0A1E}
.cart-badge{background:var(--gold);color:#4A0A1E}

/* ---------------------------------------------------------------
   2) HERO
   --------------------------------------------------------------- */
.hslider{background:linear-gradient(120deg,#580F24,#7F1B37 52%,#580F24)}
.hsl-noimg{
  background:
    radial-gradient(110% 90% at 18% 12%, rgba(160,45,80,.55) 0%, transparent 60%),
    radial-gradient(90% 80% at 86% 96%, rgba(233,191,221,.20) 0%, transparent 62%),
    linear-gradient(120deg,#580F24 0%,#7F1B37 52%,#580F24 100%);
}
/* scrims tinted burgundy instead of black, so bright photos stay warm */
.hsl-scrim{
  background:
    linear-gradient(90deg,rgba(62,8,23,.68) 0%,rgba(72,10,28,.36) 34%,rgba(72,10,28,0) 60%),
    linear-gradient(180deg,rgba(62,8,23,.30) 0%,transparent 22%,transparent 72%,rgba(62,8,23,.46) 100%);
}
.hsl-center .hsl-scrim{
  background:
    radial-gradient(120% 90% at 50% 55%,rgba(62,8,23,.10) 0%,rgba(62,8,23,.54) 100%),
    linear-gradient(180deg,rgba(62,8,23,.30) 0%,transparent 26%,transparent 70%,rgba(62,8,23,.48) 100%);
}
.hsl-right .hsl-scrim{
  background:
    linear-gradient(270deg,rgba(62,8,23,.68) 0%,rgba(72,10,28,.36) 34%,rgba(72,10,28,0) 60%),
    linear-gradient(180deg,rgba(62,8,23,.30) 0%,transparent 22%,transparent 72%,rgba(62,8,23,.46) 100%);
}
.hsl-noimg .hsl-scrim{background:linear-gradient(180deg,rgba(62,8,23,.20) 0%,transparent 42%,rgba(62,8,23,.30) 100%)}
.hsl-title-lg{text-shadow:0 4px 12px rgba(62,8,23,.6),0 20px 54px rgba(62,8,23,.5)}
.hsl-tagline,.hsl-desc,.hsl-eyebrow,.hsl-title-sub{text-shadow:0 2px 10px rgba(62,8,23,.62)}
.hsl-arrow{background:rgba(62,8,23,.34);border-color:rgba(201,162,78,.55)}
.hsl-arrow:hover{background:var(--gold);color:#4A0A1E}
.hsl-count b{color:#fff}

/* ---------------------------------------------------------------
   3) CARDS OVER PHOTOGRAPHY
   --------------------------------------------------------------- */
.exq-card{background:linear-gradient(180deg,#7F1B37,#580F24)}
.exq-media{background:#5C0B24}
.exq-media::after{
  background:linear-gradient(180deg,transparent 40%,rgba(78,12,32,.62) 72%,rgba(62,8,23,.92) 100%);
}
.exq-arrow{border-color:rgba(201,162,78,.62)}
.exq-card:hover .exq-arrow{background:var(--gold);color:#4A0A1E}

.colx-item{background:linear-gradient(180deg,#7F1B37,#580F24)}
.colx-item::after{
  background:linear-gradient(180deg,rgba(62,8,23,0) 46%,rgba(62,8,23,.34) 68%,rgba(58,7,21,.90) 100%);
}
.colx-name{text-shadow:0 3px 18px rgba(62,8,23,.8)}
.colx-cta:hover{background:var(--gold);color:#4A0A1E}

/* ---------------------------------------------------------------
   4) FOOTER — same burgundy, a shade deeper so it reads as a base
   --------------------------------------------------------------- */
.site-foot,.footer,footer.footer{
  background:linear-gradient(180deg,#7F1B37 0%,#5C0B24 46%,#4A0A1E 100%);
  border-top:1px solid rgba(201,162,78,.4);
  color:rgba(255,238,244,.82);
}
.foot-bottom,.footer-bottom{border-top:1px solid rgba(201,162,78,.26);color:rgba(255,238,244,.66)}

/* ---------------------------------------------------------------
   5) EVERYTHING ELSE THAT WAS NEAR-BLACK
   --------------------------------------------------------------- */
.btn-gold{color:#4A0A1E}
.btn-gold:hover{color:#4A0A1E}
.ribbon{color:#4A0A1E}
.empty-mark{background:var(--wine);color:var(--gold-pale)}
.chip.is-on{background:var(--wine);border-color:var(--wine);color:#fff}
.badge2 .badge2-ic,.badge,.tag{color:#4A0A1E}
.colx-num{color:var(--wine)}
.tst2-arrow:hover{background:var(--wine);color:#fff;border-color:var(--wine)}
.wa-float{color:#fff}
::selection{background:var(--gold-pale);color:#4A0A1E}

/* shadows across the light sections warmed to the same hue */
:root{
  --shadow-sm:0 4px 16px rgba(88,15,36,.08);
  --shadow:0 18px 46px rgba(88,15,36,.14);
  --shadow-lg:0 36px 90px rgba(78,12,32,.26);
}

/* =====================================================================
   THEME v11 — RUNNING BAR SITS DIRECTLY UNDER THE HERO
   The top announcement strip is gone; this replaces it.
   ===================================================================== */

.ribbon{
  margin-top:0;
  background:linear-gradient(90deg,#A87D2E 0%,#E7C87E 20%,#C9A24E 50%,#E7C87E 80%,#A87D2E 100%);
  border-top:1px solid rgba(255,255,255,.3);
  border-bottom:1px solid rgba(74,10,30,.28);
  box-shadow:0 10px 30px rgba(88,15,36,.18);
}
.ribbon-track span{padding:15px 0;font-size:12.5px;letter-spacing:.2em}
.ribbon-track span i{padding:0 26px;opacity:.5}

/* the trust card no longer needs to clear a top strip */
.features.features-below .features-inner{margin-top:clamp(34px,4.5vw,52px)}

/* header starts at the utility bar now that the announce strip is gone */
.top-bar{border-top:0}

@media (max-width:720px){
  .ribbon-track span{padding:12px 0;font-size:11px;letter-spacing:.16em}
  .ribbon-track span i{padding:0 16px}
}

/* =====================================================================
   THEME v12 — STOP THE HEADER FLICKER
   The stuck header used to snap the utility bar away with display:none
   and shrink the nav at the same time. That changed the sticky header's
   height right at the trigger point, the page re-flowed back across it,
   and the bar strobed. Now: the nav never changes height, and the
   utility bar collapses smoothly instead of vanishing.
   ===================================================================== */

.top-bar{
  max-height:64px;overflow:hidden;
  transition:max-height .34s var(--ease),opacity .24s linear,border-color .24s linear;
}
.nav.is-stuck .top-bar{
  display:block;          /* overrides the old display:none */
  max-height:0;opacity:0;border-bottom-color:transparent;pointer-events:none;
}

/* nav height and logo size are now constant — no reflow when it sticks */
.nav-inner,
.nav.is-stuck .nav-inner{height:var(--nav-h)}
.brand-img,
.nav.is-stuck .brand-img{height:84px}
.brand-mark-img,.brand-mark,
.nav.is-stuck .brand-mark-img,.nav.is-stuck .brand-mark{width:76px;height:76px}

/* only the surface changes on scroll */
.nav{transition:background .3s linear,box-shadow .3s linear}

@media (max-width:1180px){
  .brand-img,.nav.is-stuck .brand-img{height:72px}
}
@media (max-width:860px){
  .nav-inner,.nav.is-stuck .nav-inner{height:var(--nav-h)}
  .brand-img,.nav.is-stuck .brand-img{height:62px}
  .brand-mark-img,.brand-mark,
  .nav.is-stuck .brand-mark-img,.nav.is-stuck .brand-mark{width:56px;height:56px}
}
@media (max-width:420px){
  .brand-img,.nav.is-stuck .brand-img{height:54px}
}

/* =====================================================================
   THEME v13 — SHOWCASE BAND
   A single full-bleed photo directly under the About section. No text,
   no overlay, no caption — just the picture, edge to edge.
   ===================================================================== */

.showcase{
  position:relative;display:block;width:100%;overflow:hidden;
  height:clamp(300px,40vw,620px);
  background:linear-gradient(120deg,#580F24,#7F1B37 52%,#580F24);
  border-top:1px solid rgba(201,162,78,.34);
  border-bottom:1px solid rgba(201,162,78,.34);
}
.showcase img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;color:transparent;font-size:0;
  transform:scale(1.04);
  transition:transform 9s var(--ease);
}
.showcase:hover img{transform:scale(1)}

@media (max-width:900px){
  .showcase{height:clamp(240px,52vw,420px)}
}
@media (max-width:520px){
  .showcase{height:clamp(200px,58vw,300px)}
}
@media (prefers-reduced-motion:reduce){
  .showcase img{transform:none;transition:none}
}

/* =====================================================================
   THEME v14 — ROYAL TYPE · SHORTER HERO · EDGE-ALIGNED SLIDE COPY
   Bodoni Moda (display) x Cinzel (caps/labels) x Manrope (text).
   Bodoni is the fashion-house didone — high contrast, regal at size.
   Cinzel is Roman capital lettering, used only for the small uppercase
   pieces where it carries the royal feel without shouting.
   ===================================================================== */

:root{
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --caps:'Cinzel',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

body{font-family:var(--sans);font-size:16px;line-height:1.78}

/* Bodoni is optically sized — let the browser thin the hairlines down at
   small sizes and open them up at display sizes. */
h1,h2,h3,h4,.section-title,.hsl-title,.brand-name,
.hsl-title-lg,.hsl-tagline,.tst2-quote,.feature b,.exq-label-txt b,
.colx-name,.craft-step b,.craft-num,.tst2-meta b,.news-text,
.foot-logo-text b,.product-name,.shop-title,.page-hero-title{
  font-optical-sizing:auto;
}

h1,h2,h3,h4,.section-title,.hsl-title,.brand-name{
  font-family:var(--serif);font-weight:600;letter-spacing:0;
}
.section-title{font-size:clamp(32px,4.6vw,54px);font-weight:600;line-height:1.08}

/* the small uppercase pieces carry the royal note */
.eyebrow,.hsl-eyebrow,.hs-eyebrow,
.menu>a,.btn,.colx-meta,.colx-cta,.exq-label-txt i,
.site-foot h4,.footer h4,.chip,.top-mid,.ribbon-track span,
.hsl-title-sub,.brand-sub,.tst2-meta i,.foot-logo-text small{
  font-family:var(--caps);font-weight:600;
}
.eyebrow{font-size:11.5px;letter-spacing:.24em}
.menu>a{font-size:13px;letter-spacing:.13em;font-weight:500}
.btn{font-size:12.5px;letter-spacing:.13em;font-weight:600}
.btn-lg{font-size:13.5px;letter-spacing:.14em}
.top-mid{font-style:normal;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.ribbon-track span{font-size:12px;letter-spacing:.2em}
.site-foot h4,.footer h4{font-size:12px;letter-spacing:.16em}
.brand-sub{font-size:9px;letter-spacing:.34em}
.hsl-title-sub{font-size:clamp(11px,1.2vw,15px);letter-spacing:.4em}
.colx-meta{font-size:11px;letter-spacing:.18em}
.colx-cta{font-size:11.5px;letter-spacing:.14em}
.chip{font-size:12.5px;letter-spacing:.08em;font-weight:600}

/* Bodoni's hairlines need size — keep it off anything small */
.hsl-title-lg{font-size:clamp(52px,8.4vw,116px);font-weight:600;letter-spacing:-.005em}
.hsl-tagline{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,2.4vw,30px)}
.hsl-desc,.section-intro,.craft-step p,.about2-copy p,.feature span:last-child{font-family:var(--sans)}
.tst2-quote{font-family:var(--serif);font-style:italic;font-weight:400}
.feature b,.exq-label-txt b,.colx-name,.craft-step b,.tst2-meta b,
.news-text,.foot-logo-text b,.product-name,.shop-title,.page-hero-title{font-family:var(--serif);font-weight:600}
.craft-num{font-family:var(--serif);font-weight:700}
.brand-name{font-size:32px;font-weight:600}

/* ---------------------------------------------------------------
   HERO — copy pushed out toward the edge on left/right slides
   --------------------------------------------------------------- */
.hsl-inner{
  max-width:1680px;
  padding:0 clamp(22px,5vw,110px);
}
.hsl-center .hsl-inner{max-width:var(--maxw)}
.hsl-copy{max-width:620px}
.hsl-left .hsl-copy{margin-right:auto}
.hsl-right .hsl-copy{margin-left:auto}

/* the scrim follows the copy out to the edge too */
.hsl-left .hsl-scrim{
  background:
    linear-gradient(90deg,rgba(62,8,23,.70) 0%,rgba(72,10,28,.32) 40%,rgba(72,10,28,0) 62%),
    linear-gradient(180deg,rgba(62,8,23,.28) 0%,transparent 22%,transparent 74%,rgba(62,8,23,.44) 100%);
}

/* ---------------------------------------------------------------
   NOTHING MAY EXCEED THE VIEWPORT
   --------------------------------------------------------------- */
/* NOTE: no width:100% here. On a browser with classic (non-overlay)
   scrollbars, width:100% on html resolves against the viewport *including*
   the scrollbar, which makes the document a scrollbar's width too wide and
   leaves a bare strip down the right-hand edge. max-width alone is correct. */
html,body{max-width:100%;overflow-x:clip}
body{width:auto}
.hslider,.ribbon,.showcase,.collections,.about2,.craft,.news,
.site-foot,.footer,.nav,.top-bar,.features,.exq,.tst2-wrap,
.page-hero,.shop-hero{width:100%;max-width:100%}
img,svg,video{max-width:100%}

/* the off-canvas drawer must not stretch the page on small screens */
@media (max-width:860px){
  .menu{max-width:min(330px,86vw);right:0;left:auto}
  .menu:not(.is-open){visibility:hidden}
}

/* ---------------------------------------------------------------
   SMALL PHONES (320–380)
   --------------------------------------------------------------- */
@media (max-width:400px){
  body{font-size:15.5px}
  .section{padding-left:18px;padding-right:18px}
  .hsl-inner{padding:0 20px}
  .hsl-title-lg{font-size:clamp(38px,12vw,52px)}
  .hsl-tagline{font-size:19px}
  .hsl-desc{font-size:15px}
  .btn{font-size:11.5px;letter-spacing:.1em;padding:13px 22px}
  .btn-lg{font-size:12px;padding:14px 24px}
  .hsl-arrow{width:36px;height:36px}
  .hsl-prev{left:6px}
  .hsl-next{right:6px}
  .features-inner{width:calc(100% - 28px);padding:20px 10px}
  .feature b{font-size:18px}
  .section-title{font-size:clamp(26px,8.5vw,34px)}
  .craft-step{padding:24px 18px}
  .tst2-slide{padding:32px 20px 28px}
  .news-inner{padding-left:18px;padding-right:18px}
  form.nav-search input,form.nav-search button{font-size:13px}
}

/* =====================================================================
   THEME v15 — SLIDER CONTROLS OUT OF THE COPY
   Now that left/right slides push their text out to the edge, the
   vertically-centred arrows were sitting on top of it. They move to the
   bottom-right corner, paired with the dots and the counter.
   ===================================================================== */

.hsl-arrow{
  top:auto;bottom:clamp(22px,3.6vh,46px);transform:none;
  width:46px;height:46px;
}
.hsl-prev{left:auto;right:calc(clamp(22px,4vw,56px) + 58px)}
.hsl-next{right:clamp(22px,4vw,56px)}
.hsl-prev:hover{transform:translateX(-3px)}
.hsl-next:hover{transform:translateX(3px)}

.hsl-dots{bottom:clamp(34px,4.4vh,56px)}
.hsl-count{bottom:clamp(32px,4.2vh,54px)}

@media (max-width:720px){
  .hsl-arrow{width:40px;height:40px;bottom:18px}
  .hsl-prev{right:calc(16px + 50px);left:auto}
  .hsl-next{right:16px}
  .hsl-dots{bottom:28px;justify-content:flex-start;padding-left:20px}
  .hsl-count{display:none}
}

/* =====================================================================
   THEME v16 — SMALLER TYPE · SHORTER HERO · COPY HARD TO THE EDGE
   ===================================================================== */

/* ---------------------------------------------------------------
   1) The hero really is edge-to-edge. Belt and braces, because a
   stray offset here shows up as a bare strip beside the image.
   --------------------------------------------------------------- */
main.page{width:auto;max-width:100%;margin:0;padding:0;overflow-x:clip}
.hslider{
  width:100%;max-width:100%;margin:0;padding:0;border:0;border-radius:0;
  left:0;right:0;
}
.hsl-track,.hsl-slide{left:0;right:0;width:100%}
.hsl-img{width:100%;height:100%;min-width:100%;object-fit:cover}
.hslider .hsl-scrim{left:0;right:0;width:100%}

/* ---------------------------------------------------------------
   2) Global type scale, one notch down
   --------------------------------------------------------------- */
body{font-size:15.5px;line-height:1.75}
.section-title{font-size:clamp(28px,3.6vw,44px);line-height:1.1}
.section-intro{font-size:15px;line-height:1.75;max-width:58ch}
.eyebrow{font-size:10.5px;letter-spacing:.22em}
.btn{font-size:11.5px;letter-spacing:.12em;padding:14px 26px}
.btn-lg{font-size:12px;letter-spacing:.13em;padding:15px 30px}
.menu>a{font-size:12px;letter-spacing:.12em}
.ribbon-track span{font-size:11px;letter-spacing:.18em}
.ribbon-track span i{padding:0 22px}

.feature b{font-size:19px}
.feature span:last-child{font-size:12.5px}
.exq-label-txt b{font-size:clamp(18px,1.6vw,22px)}
.exq-label-txt i{font-size:9.5px;letter-spacing:.18em}
.colx-name{font-size:clamp(18px,1.5vw,24px)}
.colx-meta{font-size:10px;letter-spacing:.16em}
.colx-cta{font-size:10.5px;letter-spacing:.12em;padding:10px 18px}
.craft-step b{font-size:19px}
.craft-step p{font-size:14px;line-height:1.75}
.craft-num{width:42px;height:42px;font-size:18px}
.tst2-quote{font-size:clamp(17px,1.8vw,22px);line-height:1.55}
.tst2-meta b{font-size:16px}
.news-text{font-size:clamp(17px,1.7vw,21px)}
.site-foot a,.footer a{font-size:13.5px}
.site-foot h4,.footer h4{font-size:11px;letter-spacing:.14em}
.foot-logo-text b{font-size:22px}
.foot-tag{font-size:15px}
.brand-name{font-size:28px}
.product-name,.product-card h3{font-size:18px}
.shop-title,.page-hero-title{font-size:clamp(30px,4vw,46px)}

/* ---------------------------------------------------------------
   3) Hero copy — smaller, and pushed hard to whichever edge
   --------------------------------------------------------------- */
.hsl-inner{max-width:1780px;padding:0 clamp(18px,3.2vw,64px)}
.hsl-center .hsl-inner{max-width:1100px}
.hsl-copy{max-width:520px}

.hsl-eyebrow{font-size:10px;letter-spacing:.26em}
.hsl-eyebrow::before{width:28px}
.hsl-title{margin-top:14px}
.hsl-title-lg{font-size:clamp(40px,5.6vw,82px);line-height:.96}
.hsl-title-sub{font-size:clamp(10px,.95vw,13px);letter-spacing:.34em;margin-top:10px}
.hsl-tagline{font-size:clamp(17px,1.75vw,24px);margin:4px 0 10px}
.hsl-desc{font-size:14.5px;line-height:1.7;max-width:44ch}
.hsl-copy .btn{margin-top:18px}
.hsl-copy .orn-leaf{margin:10px 0 4px}
.hsl-copy .orn-leaf i{width:40px}

@media (min-width:1500px){
  .hsl-inner{padding:0 clamp(48px,4.5vw,96px)}
  .hsl-copy{max-width:560px}
}

/* ---------------------------------------------------------------
   4) Phones
   --------------------------------------------------------------- */
@media (max-width:720px){
  .hsl-inner{padding:0 22px}
  .hsl-copy{max-width:none}
  .hsl-title-lg{font-size:clamp(34px,10vw,50px)}
  .hsl-tagline{font-size:17px}
  .hsl-desc{font-size:14px;max-width:38ch}
  .section-title{font-size:clamp(25px,7vw,32px)}
  .section-intro{font-size:14.5px}
}
@media (max-width:400px){
  body{font-size:15px}
  .hsl-title-lg{font-size:clamp(30px,10.5vw,42px)}
  .hsl-desc{font-size:13.5px}
  .btn,.btn-lg{font-size:11px;padding:12px 20px}
}

/* =====================================================================
   THEME v17 — HERO FILLS THE PAGE · SHORTER SHOWCASE · BIGGER SERVICE CARDS
   ===================================================================== */

/* ---------------------------------------------------------------
   1) HERO — no empty band under the picture
   The JS sizes it to the full space under the header (capped 760px).
   A slide whose image fails to load now falls back to the burgundy
   panel instead of leaving a broken icon and a bare gap.
   --------------------------------------------------------------- */
.hslider{height:calc(100svh - 150px);min-height:340px;max-height:760px}
@media (max-width:720px){
  .hslider{height:calc(100svh - 120px);max-height:640px}
}
.hsl-img{opacity:1;transition:opacity .4s linear,transform 8s linear}
.hsl-img:not([src]),.hsl-img[src=""]{display:none}

/* ---------------------------------------------------------------
   2) SHOWCASE BAND below About — shorter
   --------------------------------------------------------------- */
.showcase{height:clamp(220px,26vw,420px)}
@media (max-width:900px){.showcase{height:clamp(180px,34vw,300px)}}
@media (max-width:520px){.showcase{height:clamp(160px,44vw,230px)}}

/* ---------------------------------------------------------------
   3) "WHAT WE DO — OUR SIGNATURE SERVICES" — bigger cards
   --------------------------------------------------------------- */
.exq{max-width:none;padding-left:0;padding-right:0}
.exq .exq-head{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding:0 24px}
.exq-grid{
  max-width:1480px;margin:0 auto;padding:0 clamp(18px,3vw,40px);
  grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);
}
.exq-media{aspect-ratio:3/4.15}
.exq-card{border-radius:20px}
.exq-card::before{inset:12px;border-radius:13px}
.exq-label{padding:24px 24px 26px}
.exq-label-txt b{font-size:clamp(20px,1.75vw,26px)}
.exq-label-txt i{font-size:10.5px;letter-spacing:.2em}
.exq-arrow{width:42px;height:42px}

@media (max-width:1080px){
  .exq-grid{grid-template-columns:repeat(2,1fr);max-width:940px}
  .exq-media{aspect-ratio:3/3.9}
}
@media (max-width:560px){
  .exq-grid{grid-template-columns:1fr;max-width:460px}
  .exq-media{aspect-ratio:3/3.6}
}

/* =====================================================================
   ROUND — SIGNATURE CARDS ARROW REMOVED · PINK POPUP ADS ·
   FULL RESPONSIVE PASS (all devices)
   Loaded last, so these rules are the authority.
   ===================================================================== */

/* ---------- 1) "What We Do" cards: arrow chip removed ---------- */
.exq-arrow{display:none !important}
.exq-label{justify-content:flex-start}
.exq-label-txt{min-width:0}
.exq-label-txt b,.exq-label-txt i{display:block;overflow:hidden;text-overflow:ellipsis}

/* ---------- 2) POPUP ADS — pink edition ----------
   The burgundy/purple + gold treatment is replaced with the house
   magnolia-pink family. Scoped to .eera-popup/.ep-* so the rest of
   the site keeps its burgundy identity. */
:root{
  --pink:#D6467E;          /* primary pink (titles, buttons)   */
  --pink-deep:#B02D62;     /* hover / pressed                  */
  --pink-ink:#8A1F4C;      /* dark pink text                   */
  --pink-soft:#F6A8C9;     /* borders, accents                 */
  --pink-pale:#FDE7F1;     /* coupon fill, tints               */
  --pink-blush:#FFF6FA;    /* card background                  */
}
.ep-backdrop{background:rgba(138,31,76,.42)}
.ep-card{background:var(--pink-blush);border-color:var(--pink-soft)}
.ep-x{background:rgba(255,255,255,.9);color:var(--pink-ink)}
.ep-x:hover{background:var(--pink-pale)}
.ep-media{background-color:var(--pink-pale)}
.ep-title{color:var(--pink)}
.ep-body{color:#7A4B60}
.ep-code{border-color:var(--pink)}
.ep-code-val{background:var(--pink-pale);color:var(--pink-ink)}
.ep-copy{background:var(--pink)}
.ep-copy:hover{background:var(--pink-deep)}
.eera-popup .btn,.eera-popup .btn-primary,.eera-popup .ep-cta{
  --bg:linear-gradient(120deg,#E4629A,var(--pink));--fg:#fff;--bd:transparent;
  box-shadow:0 10px 26px rgba(214,70,126,.36);
}
.eera-popup .btn:hover{box-shadow:0 16px 34px rgba(214,70,126,.48)}
.eera-popup.ep-bar .ep-card{background:linear-gradient(90deg,#C43A70,var(--pink) 55%,#E4629A);border-color:transparent}
.eera-popup.ep-bar .ep-title{color:#fff}
.eera-popup.ep-bar .ep-body{color:#FFE3EF}
.eera-popup.ep-bar .ep-x{background:rgba(255,255,255,.22);color:#fff}
.eera-popup.ep-bar .ep-x:hover{background:rgba(255,255,255,.36)}
.eera-popup.ep-bar .ep-code{border-color:rgba(255,255,255,.75)}
.eera-popup.ep-bar .ep-code-val{background:rgba(255,255,255,.16);color:#fff}
.eera-popup.ep-bar .ep-copy{background:#fff;color:var(--pink-ink)}
.eera-popup.ep-bar .btn{--bg:#fff;--fg:var(--pink-ink);box-shadow:none}

/* popup sizing on phones: modals never taller than the screen */
@media (max-width:520px){
  .eera-popup.ep-small,.eera-popup.ep-medium,.eera-popup.ep-large{max-width:calc(100vw - 28px)}
  .eera-popup .ep-card{max-height:calc(100svh - 56px);overflow:auto;-webkit-overflow-scrolling:touch}
  .eera-popup.ep-large .ep-media{height:160px}
  .eera-popup.ep-corner{width:min(300px,calc(100vw - 28px))}
  .eera-popup.ep-corner.ep-pos-bottom-right{right:14px;bottom:84px} /* clear the WhatsApp float */
  .eera-popup.ep-corner.ep-pos-bottom-left{left:14px;bottom:84px}
}

/* ---------- 3) RESPONSIVE PASS ---------- */
/* never allow sideways scroll from decorative pieces */
html,body{max-width:100%;overflow-x:clip}

/* WhatsApp float vs hero-slider arrows: on phones the float sits over
   the next arrow. Lift the arrows clear of it. */
@media (max-width:600px){
  .hsl-arrow{top:auto;bottom:70px;transform:none}
  .hsl-prev{left:14px}
  .hsl-next{right:78px} /* leaves room for the 52px float + gap */
  .hsl-prev:hover,.hsl-next:hover{transform:none}
  .hsl-dots{bottom:26px;right:auto}
  .wa-float{bottom:14px;right:14px}
}
@media (max-width:380px){
  .hsl-arrow{width:36px;height:36px}
  .hsl-next{right:70px}
}

/* category panels: show a peek of the next card so the carousel is
   obviously swipeable, and give it breathing room */
@media (max-width:900px){
  .collections .colx{scroll-padding-left:16px;padding-right:10vw}
  .colx-item,.colx-item:hover,.colx-item.is-open{flex:0 0 min(78%,320px)}
}
@media (max-width:520px){
  .colx-item,.colx-item:hover,.colx-item.is-open{flex:0 0 82%;height:400px}
}

/* order modal + forms on small screens */
@media (max-width:600px){
  .modal-card{width:calc(100vw - 24px);max-height:calc(100svh - 40px);overflow:auto;-webkit-overflow-scrolling:touch}
  .of-row,.of-row-3{grid-template-columns:1fr}
  .of-coupon-row{flex-wrap:wrap}
  .of-coupon-row .btn{width:100%}
}
/* inputs: 16px stops iOS zoom-on-focus */
@media (max-width:600px){
  input,select,textarea{font-size:16px}
}

/* product page */
@media (max-width:900px){
  .pv{grid-template-columns:1fr;gap:26px}
  .pv-buyrow{flex-wrap:wrap}
  .pv-order{flex:1 1 100%}
}
@media (max-width:420px){
  .pv-name{font-size:26px}
  .pv-thumbs button{width:56px;height:66px}
}

/* footer + newsletter tighten on small phones */
@media (max-width:400px){
  .news-inner{padding-left:16px;padding-right:16px}
  .foot-grid{gap:26px}
}

/* very small phones (<=340px) */
@media (max-width:340px){
  .section{padding-left:14px;padding-right:14px}
  .btn{padding:12px 20px;font-size:12.5px}
  .section-title{font-size:24px}
  .feature b{font-size:15px}
}

/* short landscape phones: keep the hero usable */
@media (max-height:480px) and (orientation:landscape){
  .hslider{height:auto;min-height:100svh}
  .hsl-dots{bottom:10px}
}

/* larger tap targets on touch devices */
@media (hover:none){
  .hsl-arrow,.ep-x{min-width:44px;min-height:44px}
  .chip{padding:10px 18px}
}