@font-face{ font-family:'Poppins'; font-style:normal; font-weight:200; font-display:swap; src:url('../fonts/poppins-200.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/poppins-300.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-600.woff2') format('woff2'); }
/* SPLENDERY logo wordmark — ADAM.CG PRO (drop the file into assets/fonts/) */
@font-face{ font-family:'ADAM.CG PRO'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/adamcgpro.otf') format('opentype'); }

:root{
  --ivory:#EDE9E3; --nude:#E7D7C9; --rose:#D4B2A7; --rose-deep:#B98F81;
  --ink:#1A1613; --taupe:#8A7B70; --warm-white:#F7F4EF;
  --ground:#FFFFFF; --surface:var(--warm-white); --surface-2:var(--nude);
  --text:var(--ink); --muted:var(--taupe); --accent:var(--rose); --accent-deep:var(--rose-deep);
  --hair:rgba(26,22,19,0.14); --hair-soft:rgba(26,22,19,0.07); --bar:#1A1613; --bar-text:#EDE9E3;
  /* Brand type system — Primary: Futura PT (geometric sans). Secondary: Source Sans Pro (body). */
  --sans:'Futura PT',Futura,'Century Gothic','Poppins','Segoe UI',Roboto,sans-serif;
  --body:'Source Sans Pro','Futura PT',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Futura PT',Futura,'Century Gothic','Poppins',sans-serif;
  --logo:'ADAM.CG PRO','Futura PT',Futura,'Century Gothic',sans-serif;
}
*{ box-sizing:border-box; }
html{ overflow-x:clip; }
body{ margin:0; background:var(--ground); color:var(--text); font-family:var(--sans); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* announcement */
.announce{ background:var(--bar); color:var(--bar-text); overflow:hidden; height:38px; display:flex; align-items:center; }
.announce .track{ white-space:nowrap; will-change:transform; }
.announce span{ display:inline-block; padding:0 40px; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; }
@media (prefers-reduced-motion:no-preference){ .announce .track{ animation:marquee 36s linear infinite; } @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} } }

/* header — logo left, inline nav, search bar, icons right (Oh Polly style) */
header.site{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,0.68); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); border-bottom:1px solid var(--hair-soft); }
@media (prefers-color-scheme:dark){ header.site{ background:rgba(21,18,16,0.7); } }
:root[data-theme="dark"] header.site{ background:rgba(21,18,16,0.7); }
.bar{ display:flex; align-items:center; gap:26px; padding:18px 32px; }
.iconbtn{ background:none; border:none; color:var(--text); cursor:pointer; font-family:var(--sans); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; display:flex; align-items:center; gap:7px; padding:0; }
.iconbtn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.3; }
.menuBtn{ display:none; flex:0 0 auto; }
.brand{ font-family:var(--logo); font-weight:400; font-size:23px; letter-spacing:0.01em; padding-left:0.02em; white-space:nowrap; flex:0 0 auto; }
nav.main{ flex:0 1 auto; }
nav.main ul{ list-style:none; margin:0; padding:0; display:flex; gap:20px; }
nav.main a{ font-size:11.5px; letter-spacing:0.03em; text-transform:uppercase; padding-bottom:3px; border-bottom:1px solid transparent; white-space:nowrap; }
nav.main a:hover{ border-color:var(--accent-deep); }
nav.main a.sale{ color:var(--accent-deep); }
.searchbar{ flex:0 1 340px; min-width:120px; max-width:340px; margin-left:auto; display:flex; align-items:center; gap:10px; border:1px solid var(--hair); border-radius:2px; padding:10px 15px; color:var(--muted); cursor:text; background:rgba(255,255,255,0.35); }
.searchbar svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.3; flex:0 0 auto; }
.searchbar input{ border:none; background:none; font-family:var(--sans); font-size:12.5px; color:var(--text); width:100%; cursor:text; letter-spacing:0.01em; }
.searchbar input:focus{ outline:none; }
.right{ display:flex; align-items:center; gap:15px; flex:0 0 auto; }
.lang{ display:flex; gap:6px; align-items:center; font-size:11px; letter-spacing:0.03em; }
.lang button{ background:none; border:none; color:var(--muted); cursor:pointer; font-family:var(--sans); font-size:11px; letter-spacing:0.03em; padding:2px; }
.lang button.on{ color:var(--text); border-bottom:1px solid var(--accent-deep); }
.curr{ display:none; }
/* narrower desktop: tighten so nav + search + icons never overflow */
@media (max-width:1320px){
  .bar{ gap:16px; padding:18px 22px; }
  nav.main ul{ gap:13px; }
  nav.main a{ font-size:11px; letter-spacing:0.01em; }
  .searchbar{ min-width:120px; max-width:300px; }
  .right{ gap:12px; }
}
@media (max-width:1080px){ nav.main{ display:none; } .menuBtn{ display:flex; } }
@media (max-width:640px){
  /* Oh Polly minimalist mobile header: [menu heart] · LOGO · [account bag] */
  .bar{ gap:12px; padding:14px 15px; }
  .searchbar, .lang, .curr{ display:none; }
  .right{ display:contents; }
  .menuBtn{ order:0; }
  .bar [aria-label="Wishlist"]{ order:1; }
  .brand{ order:2; margin:0 auto; font-size:19px; }
  .bar [aria-label="Account"]{ order:3; }
  .bar [aria-label="Bag"]{ order:4; }
}

/* full-width search bar below the header (mobile) — identical to Oh Polly */
.msearch{ display:none; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px; background:none; border:none; border-top:1px solid var(--hair-soft); cursor:pointer; font-family:var(--sans); text-align:left; }
.msearch .ms-tx{ font-size:12.5px; letter-spacing:0.01em; color:var(--muted); display:flex; align-items:baseline; min-width:0; white-space:nowrap; }
.msearch .ms-sug{ font-weight:500; color:var(--text); }
.msearch .ms-caret{ display:inline-block; width:1px; height:0.95em; background:var(--text); margin-left:2px; align-self:center; animation:ms-blink 1s step-end infinite; }
@keyframes ms-blink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .msearch .ms-caret{ animation:none; } }
.msearch > svg{ width:18px; height:18px; stroke:var(--text); fill:none; stroke-width:1.4; flex:0 0 auto; }
@media (max-width:640px){ .msearch{ display:flex; } }
header.site.over:not(.scrolled) .msearch{ display:none; }

/* hero */
.hero{ position:relative; height:min(84vh,780px); display:flex; align-items:flex-end; justify-content:center; text-align:center; overflow:hidden; background:#c9b5a8; }
.hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,22,19,0.42) 0%, transparent 24%, transparent 52%, rgba(26,22,19,0.58) 100%); }
.hero .inner{ position:relative; z-index:2; padding:0 24px 72px; color:#fff; }
.hero .k{ font-size:11px; letter-spacing:0.10em; text-transform:uppercase; }
.hero h1{ font-weight:200; font-size:clamp(34px,6.4vw,74px); letter-spacing:0.04em; margin:16px 0 8px; text-wrap:balance; }
.hero .sub{ font-family:var(--serif); font-style:italic; font-size:clamp(15px,2vw,21px); margin-bottom:30px; }

/* buttons */
.btn{ display:inline-block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:15px 42px; border:1px solid #fff; color:#fff; background:transparent; cursor:pointer; }
.btn:hover{ background:#fff; color:var(--ink); }
.btn.dark{ border-color:var(--ink); color:var(--ink); }
.btn.dark:hover{ background:var(--ink); color:var(--ivory); }

/* section scaffold */
section{ padding:clamp(52px,7vw,88px) 0; }
.wrap{ max-width:1320px; margin:0 auto; padding:0 28px; }
.shead{ text-align:center; margin-bottom:40px; }
.shead .k{ font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent-deep); }
.shead h2{ font-weight:300; font-size:clamp(22px,3vw,32px); letter-spacing:0.02em; margin:12px 0 0; text-wrap:balance; }
.shead .link{ display:inline-block; margin-top:14px; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; border-bottom:1px solid var(--accent-deep); padding-bottom:2px; color:var(--muted); }

/* category tiles */
/* Full-bleed at every size: the grid sits outside .wrap, so it already spans the viewport
   and needs no negative margins or 100vw (which would overflow by the scrollbar width). */
.cats{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; }
@media (max-width:900px){ .cats{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .cats{ grid-template-columns:repeat(2,1fr); } }
.cat{ position:relative; display:block; }
.cat .imgwrap{ aspect-ratio:3/4; overflow:hidden; position:relative; }
.cat img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.cat:hover img{ transform:scale(1.05); }
/* Oh Polly style: label overlaid on image bottom over a soft gradient */
.cat .imgwrap::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 52%, rgba(26,22,19,0.55)); pointer-events:none; z-index:1; }
.cat .lbl{ position:absolute; left:0; right:0; bottom:16px; z-index:2; text-align:center; color:#fff; font-size:12px; letter-spacing:0.07em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,0.35); }

/* product grid + card */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px 16px; }
@media (max-width:1000px){ .grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .grid{ grid-template-columns:repeat(2,1fr); gap:18px 12px; } }
/* homepage product grids: full-viewport bleed edge-to-edge at every width (Oh Polly) */
.wrap > .grid{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); gap:28px 2px; }
.wrap > .grid .card > :not(.imgwrap){ padding-left:12px; padding-right:12px; }
@media (max-width:720px){
  .wrap > .grid{ gap:26px 2px; }
  .wrap > .grid .card > :not(.imgwrap){ padding-left:10px; padding-right:10px; }
}
.card{ position:relative; }
.card .imgwrap{ position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--surface-2); }
.card-link{ display:block; height:100%; }
.card-track{ display:flex; width:100%; height:100%; transition:transform .35s cubic-bezier(.4,0,.2,1); touch-action:pan-y; }
.card-track img{ width:100%; height:100%; flex:0 0 100%; object-fit:cover; -webkit-user-drag:none; user-select:none; }
.card-dots{ position:absolute; bottom:9px; left:0; right:0; display:flex; gap:5px; justify-content:center; z-index:3; pointer-events:none; }
.card-dots i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.55); box-shadow:0 0 2px rgba(0,0,0,0.2); }
.card-dots i.on{ background:#fff; }
.card .tag{ position:absolute; top:10px; left:10px; z-index:3; background:var(--ink); color:var(--ivory); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; padding:5px 9px; }
.card .heart{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; z-index:3; cursor:pointer; }
.card .heart svg{ width:15px; height:15px; stroke:var(--ink); fill:none; stroke-width:1.4; }
/* hover fade-in to the 2nd product photo (desktop / hover devices only) */
.card .hoverimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:1; pointer-events:none; }
@media (hover:hover){
  .card .hoverimg{ transition:opacity .55s ease; }
  .card:hover .hoverimg{ opacity:1; }
}
.card .quick{ position:absolute; left:10px; right:10px; bottom:10px; z-index:3; background:rgba(255,255,255,0.95); color:var(--ink); text-align:center; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; padding:11px; opacity:0; transform:translateY(6px); transition:opacity .22s,transform .22s; cursor:pointer; }
.card:hover .quick{ opacity:1; transform:translateY(0); }
.card .swatches{ display:flex; gap:5px; margin:12px 0 0; }
.card .swatches i{ width:12px; height:12px; border-radius:50%; border:1px solid var(--hair); }
.card .nm{ display:block; margin:9px 0 0; font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; }
.card a.nm:hover{ color:var(--accent-deep); }
.card .desc{ color:var(--muted); font-size:12.5px; margin:4px 0 0; }
.card .row{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.card .price{ font-size:13px; }
.card .stars{ font-size:10px; color:var(--accent-deep); letter-spacing:1px; }
.card .plus{ font-size:10px; color:var(--muted); letter-spacing:0.03em; margin-top:3px; }

/* editorial split */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.split .media{ overflow:hidden; min-height:420px; }
.split .media img{ width:100%; height:100%; object-fit:cover; }
.split .copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,6vw,80px); background:var(--surface); }
.split .copy .k{ font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent-deep); }
.split .copy h3{ font-weight:200; font-size:clamp(26px,3.6vw,42px); letter-spacing:0.02em; margin:16px 0 18px; }
.split .copy p{ color:var(--muted); max-width:46ch; margin:0 0 28px; }

/* promo banners */
.promos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:720px){ .promos{ grid-template-columns:1fr; } }
.promo{ position:relative; aspect-ratio:16/7; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.promo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.promo .inner{ position:relative; z-index:2; color:#fff; }
.promo h4{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,3.4vw,38px); margin:0 0 6px; }
.promo p{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; margin:0 0 16px; }
.promo::after{ content:""; position:absolute; inset:0; background:rgba(26,22,19,0.34); z-index:1; }

/* social */
.social{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
@media (max-width:900px){ .social{ grid-template-columns:repeat(3,1fr);} }
.social .tile{ aspect-ratio:1; overflow:hidden; position:relative; }
.social .tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.social .tile:hover img{ transform:scale(1.06); }

/* newsletter */
.news{ background:var(--surface-2); text-align:center; }
.news h3{ font-weight:300; font-size:clamp(20px,2.6vw,28px); letter-spacing:0.02em; margin:0 0 10px; }
.news p{ color:var(--muted); margin:0 auto 24px; max-width:46ch; font-size:14px; }
.news form{ display:flex; max-width:440px; margin:0 auto; border:1px solid var(--ink); }
.news input{ flex:1; border:none; background:transparent; padding:14px 16px; font-family:var(--sans); font-size:13px; color:var(--text); }
.news input:focus{ outline:2px solid var(--accent-deep); outline-offset:-2px; }
.news button{ background:var(--ink); color:var(--ivory); border:none; padding:0 26px; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; cursor:pointer; }

/* footer — light, centred, logo on top (Oh Polly style) */
footer.site{ background:var(--ground); color:var(--text); border-top:1px solid var(--hair-soft); padding:64px 0 34px; text-align:center; }
footer .fbrand{ display:inline-block; font-family:var(--logo); font-weight:400; font-size:27px; letter-spacing:0.01em; color:var(--text); margin-bottom:52px; }
footer.site .cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
footer h5{ display:none; }                       /* desktop columns are unlabelled, like the reference */
footer ul{ list-style:none; padding:0; margin:0; }
footer li{ margin-bottom:16px; }
footer li a{ color:var(--text); font-size:14px; opacity:0.85; transition:opacity .18s; }
footer li a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

footer .fnews{ margin:56px auto 0; max-width:620px; }
footer .fnews p{ margin:0 0 20px; font-size:14px; line-height:1.6; color:var(--muted); }
footer .fnews-form{ display:flex; justify-content:center; gap:0; flex-wrap:wrap; }
footer .fnews-form input{ flex:1 1 320px; min-width:0; border:1px solid var(--hair); border-right:none; background:var(--ground);
  font-family:var(--sans); font-size:13.5px; color:var(--text); padding:15px 18px; }
footer .fnews-form input:focus{ outline:none; border-color:var(--ink); }
footer .fnews-form button{ flex:0 0 auto; background:var(--ink); color:var(--ivory); border:1px solid var(--ink);
  font-family:var(--sans); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; padding:0 34px; cursor:pointer; }
footer .fnews-form button:hover{ opacity:0.9; }
footer .fnews-ok{ margin-top:12px; font-size:13px; color:var(--accent-deep); min-height:18px; }

footer .socialrow{ display:flex; justify-content:center; gap:26px; margin:44px 0 0; }
footer .socialrow a{ color:var(--text); opacity:0.8; transition:opacity .18s, transform .18s; }
footer .socialrow a:hover{ opacity:1; transform:translateY(-2px); }
footer .socialrow svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

footer .fbot{ border-top:1px solid var(--hair-soft); margin-top:44px; padding-top:24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:11.5px; }
footer .pays{ display:flex; gap:7px; flex-wrap:wrap; }
footer .pays svg{ height:22px; width:auto; display:block; border-radius:3px; box-shadow:0 0 0 1px var(--hair-soft); }

@media (max-width:820px){ footer.site .cols{ grid-template-columns:1fr 1fr; gap:28px; text-align:left; } }

/* mobile: single-column collapsible accordion (headings come back as the toggles) */
@media (max-width:620px){
  footer.site{ padding:40px 0 26px; text-align:left; }
  footer .fbrand{ display:block; text-align:center; margin-bottom:30px; }
  footer.site .cols{ grid-template-columns:1fr; gap:0; }
  footer h5{ display:flex; align-items:center; justify-content:space-between; margin:0; padding:18px 2px; cursor:pointer;
    font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text); }
  footer.site .cols > .fcol{ border-top:1px solid var(--hair-soft); }
  footer h5::after{ content:"+"; font-size:18px; font-weight:300; color:var(--muted); line-height:1; }
  footer .fcol.open h5::after{ content:"\2013"; }
  footer .fcol ul{ overflow:hidden; max-height:0; transition:max-height .32s ease; }
  footer .fcol.open ul{ max-height:400px; }
  footer .fcol ul li:last-child{ margin-bottom:20px; }
  footer .fnews{ margin-top:34px; text-align:center; }
  footer .fnews-form input{ flex:1 1 100%; border-right:1px solid var(--hair); }
  footer .fnews-form button{ flex:1 1 100%; padding:15px; margin-top:8px; }
  footer .socialrow{ margin-top:32px; }
  footer .fbot{ flex-direction:column; align-items:center; text-align:center; gap:16px; margin-top:30px; }
}

/* ---- cookie consent bar ---- */
.cookiebar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:95; max-width:760px; margin:0 auto;
  background:var(--ground); border:1px solid var(--hair); box-shadow:0 18px 44px rgba(26,22,19,0.18);
  padding:20px 22px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1); }
.cookiebar.show{ opacity:1; transform:translateY(0); }
.cookiebar .cb-tx{ flex:1 1 320px; min-width:0; }
.cookiebar .cb-tx b{ display:block; font-weight:500; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; margin-bottom:6px; }
.cookiebar .cb-tx p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--muted); }
.cookiebar .cb-tx a{ color:var(--accent-deep); border-bottom:1px solid var(--accent-deep); }
.cookiebar .cb-btns{ display:flex; gap:10px; flex:0 0 auto; }
.cookiebar button{ font-family:var(--sans); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:13px 22px; cursor:pointer; border:1px solid var(--ink); white-space:nowrap; }
/* equal prominence: rejecting must be as easy as accepting */
.cookiebar .cb-reject{ background:none; color:var(--ink); }
.cookiebar .cb-reject:hover{ background:var(--surface); }
.cookiebar .cb-accept{ background:var(--ink); color:var(--ivory); }
.cookiebar .cb-accept:hover{ opacity:0.9; }
@media (max-width:600px){
  .cookiebar{ left:0; right:0; bottom:0; padding:18px 16px; gap:14px; border-left:none; border-right:none; border-bottom:none; }
  .cookiebar .cb-btns{ width:100%; }
  .cookiebar .cb-btns button{ flex:1 1 0; padding:13px 10px; letter-spacing:0.04em; }
}
@media (prefers-reduced-motion:reduce){ .cookiebar{ transition:none; } }

/* ---- generic content page (page.html) ---- */
.page{ max-width:820px; margin:0 auto; padding:30px 28px 80px; }
.page h1{ font-weight:200; font-size:clamp(26px,4vw,38px); letter-spacing:0.03em; margin:6px 0 26px; }
.pg-body{ font-size:15px; line-height:1.75; color:var(--text); }
.pg-body p{ margin:0 0 16px; }
.pg-body h3{ font-weight:500; font-size:15px; letter-spacing:0.02em; text-transform:uppercase; margin:30px 0 12px; }
.pg-body ul{ margin:0 0 18px; padding-left:20px; }
.pg-body li{ margin:0 0 8px; }
.pg-body a{ color:var(--accent-deep); border-bottom:1px solid var(--accent-deep); }
.pg-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0 26px; }
.pg-card{ background:var(--surface); border:1px solid var(--hair-soft); padding:18px; text-align:center; }
.pg-card b{ display:block; font-weight:500; letter-spacing:0.02em; font-size:14px; }
.pg-card p{ margin:6px 0 0; color:var(--muted); font-size:13px; }
.pg-form{ display:flex; flex-direction:column; gap:12px; max-width:460px; margin-top:8px; }
.pg-form input, .pg-form textarea{ border:1px solid var(--hair); background:var(--ground); color:var(--text); font-family:var(--sans); font-size:14px; padding:13px 14px; }
.pg-form input:focus, .pg-form textarea:focus{ outline:none; border-color:var(--accent-deep); }
.pg-form button{ align-self:flex-start; background:var(--ink); color:var(--ivory); border:none; font-family:var(--sans); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:14px 34px; cursor:pointer; }
.pg-form button:hover{ opacity:0.9; }
.pg-form-ok, .pg-track-out{ font-size:14px; color:var(--accent-deep); }
/* ---- Track My Order result ---- */
.tk{ border:1px solid var(--hair); padding:22px; margin-top:20px; }
.tk-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:20px; }
.tk-head b{ font-weight:500; font-size:15px; letter-spacing:0.02em; }
.tk-total{ font-size:15px; }
.tk-badge{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; }
.tk-cancel{ background:var(--surface); color:#a84b4b; }
.tk-steps{ list-style:none; display:flex; margin:0 0 4px; padding:0; counter-reset:s; }
.tk-steps li{ flex:1; position:relative; text-align:center; font-size:11.5px; color:var(--muted); padding-top:26px; }
.tk-steps li i{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:13px; height:13px; border-radius:50%;
  background:var(--ground); border:1.5px solid var(--hair); z-index:2; }
/* connector line between the dots */
.tk-steps li::before{ content:""; position:absolute; top:6px; left:-50%; width:100%; height:1.5px; background:var(--hair); z-index:1; }
.tk-steps li:first-child::before{ display:none; }
.tk-steps li.on{ color:var(--text); }
.tk-steps li.on i{ background:var(--accent-deep); border-color:var(--accent-deep); }
.tk-steps li.on::before{ background:var(--accent-deep); }
.tk-track{ background:var(--surface); padding:14px 16px; margin:20px 0 0; font-size:13px; }
.tk-track span{ display:block; color:var(--muted); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:4px; }
.tk-track em{ font-style:normal; color:var(--muted); }
.tk-items{ list-style:none; padding:0; margin:18px 0 0; }
.tk-items li{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:7px 0; border-bottom:1px solid var(--hair-soft); }
.tk-items li span{ color:var(--muted); white-space:nowrap; }
.tk-note{ color:var(--muted); font-size:12.5px; margin:16px 0 0; }
.tk-warn{ color:#a84b4b; }
.tk-wait{ color:var(--muted); font-size:13px; }
@media (max-width:520px){ .tk-steps li{ font-size:10.5px; } .tk{ padding:16px; } }

.pg-tablewrap{ overflow-x:auto; }
.pg-table{ width:100%; border-collapse:collapse; font-size:14px; }
.pg-table th, .pg-table td{ border:1px solid var(--hair-soft); padding:12px 14px; text-align:center; }
.pg-table th{ background:var(--surface); font-weight:500; letter-spacing:0.01em; text-transform:uppercase; font-size:12px; }
.pg-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
.pg-gallery img{ width:100%; aspect-ratio:1; object-fit:cover; }
@media(max-width:600px){ .pg-gallery{ grid-template-columns:repeat(2,1fr);} }
.pg-pays{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.pg-pays svg{ height:30px; width:auto; border-radius:4px; box-shadow:0 0 0 1px var(--hair-soft); }

/* ---- wishlist heart state + badge ---- */
.card .heart{ transition:transform .15s; }
.card .heart:active{ transform:scale(0.85); }
.card .heart.saved svg{ fill:var(--rose-deep); stroke:var(--rose-deep); }
.bar .right button[aria-label="Wishlist"]{ position:relative; }
.wcount{ position:absolute; top:-5px; right:-8px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--rose-deep); color:#fff; font-size:9px; line-height:15px; text-align:center; display:none; }

/* ---- search overlay ---- */
.so-scrim{ position:fixed; inset:0; background:rgba(26,22,19,0.34); z-index:89; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.so-scrim.open{ opacity:1; visibility:visible; }
/* fade-DOWN entrance: fades in while easing downward from just above */
.search-overlay{ position:fixed; inset:0 0 auto 0; background:var(--ground); z-index:90; max-height:100vh; overflow-y:auto; box-shadow:0 24px 48px rgba(26,22,19,0.16); opacity:0; visibility:hidden; transform:translateY(-16px); transition:opacity .3s ease, transform .38s cubic-bezier(.4,0,.2,1), visibility .3s; }
.search-overlay.open{ opacity:1; visibility:visible; transform:translateY(0); }
.so-bar{ display:flex; align-items:center; gap:14px; max-width:1000px; margin:0 auto; padding:24px 28px; border-bottom:1px solid var(--hair-soft); color:var(--muted); }
.so-bar input{ flex:1; min-width:0; border:none; background:none; font-family:var(--sans); font-size:19px; font-weight:300; color:var(--text); letter-spacing:0.01em; }
.so-bar input:focus{ outline:none; }
.so-x{ background:none; border:none; font-size:26px; color:var(--text); cursor:pointer; line-height:1; flex:0 0 auto; }
.so-body{ max-width:1200px; margin:0 auto; }

/* default panel (Oh Polly) */
.so-sec{ padding:22px 28px; border-bottom:1px solid var(--hair-soft); }
.so-sec-h{ font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); margin-bottom:15px; }
.so-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.so-tag{ background:var(--surface); border:none; color:var(--text); font-family:var(--sans); font-size:13px; letter-spacing:0.01em; padding:9px 16px; cursor:pointer; transition:background .18s; }
.so-tag:hover{ background:var(--nude); }
.so-colls{ display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; scrollbar-width:thin; }
.so-coll{ flex:0 0 auto; width:190px; }
.so-coll img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--surface); transition:opacity .3s; }
.so-coll:hover img{ opacity:0.9; }
.so-coll span{ display:block; text-align:center; background:var(--nude); color:var(--ink); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; padding:12px; }
.so-links{ display:flex; flex-wrap:wrap; gap:22px; }
.so-links a{ color:var(--text); font-size:13.5px; border-bottom:1px solid transparent; padding-bottom:2px; }
.so-links a:hover{ border-color:var(--accent-deep); }

.so-results-wrap{ padding:24px 28px 44px; }
.so-hint{ color:var(--muted); font-size:14px; text-align:center; padding:36px 0; }
.so-grid{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .so-grid{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:600px){
  .so-grid{ grid-template-columns:repeat(2,1fr);}
  .so-bar input{ font-size:16px; }
  .so-bar{ padding:18px 18px; }
  .so-sec{ padding:18px 18px; }
  .so-coll{ width:150px; }
  .so-results-wrap{ padding:18px 18px 40px; }
}

/* ---- auth / account page ---- */
.auth{ max-width:420px; margin:0 auto; padding:54px 28px 90px; }
.auth h1{ font-weight:300; font-size:28px; letter-spacing:0.03em; text-align:center; margin:0 0 6px; }
.auth .sub{ text-align:center; color:var(--muted); font-size:12px; letter-spacing:0.01em; margin:0 0 30px; }
.auth .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.auth label{ font-size:11px; letter-spacing:0.03em; text-transform:uppercase; color:var(--muted); }
.auth input{ border:1px solid var(--hair); background:var(--ground); color:var(--text); font-family:var(--sans); font-size:14px; padding:12px 14px; }
.auth input:focus{ outline:2px solid var(--accent-deep); outline-offset:-2px; }
.auth button.primary{ width:100%; background:var(--ink); color:var(--ivory); border:none; padding:15px; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; cursor:pointer; margin-top:8px; }
.auth button.primary:hover{ opacity:.88; }
.auth .toggle-link{ display:block; text-align:center; margin-top:20px; font-size:12px; color:var(--muted); text-decoration:underline; cursor:pointer; background:none; border:none; width:100%; font-family:var(--sans); }
.auth .demoNote{ display:none; }   /* accounts are live now — no demo disclaimer */
.acct-msg{ text-align:center; font-size:13px; line-height:1.5; margin-top:14px; min-height:18px; color:var(--accent-deep); }

/* order history cards on the account page */
.ao{ border:1px solid var(--hair-soft); padding:16px 18px; margin-bottom:12px; }
.ao:last-child{ margin-bottom:0; }
.ao-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ao-top b{ font-weight:500; font-size:14px; letter-spacing:0.01em; }
.ao-top span{ font-size:14px; }
.ao-meta{ color:var(--muted); font-size:12.5px; margin-top:5px; }
.ao-status{ color:var(--text); }
.ao-warn{ color:#a84b4b; margin-left:6px; }
.ao-track{ background:var(--surface); padding:9px 12px; margin-top:10px; font-size:12.5px; }
.ao-items{ list-style:none; padding:0; margin:12px 0 0; }
.ao-items li{ display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--text); padding:5px 0; border-bottom:1px solid var(--hair-soft); }
.ao-items li:last-child{ border-bottom:none; }
.ao-items li span{ color:var(--muted); white-space:nowrap; }
.acct-dash{ max-width:680px; margin:0 auto; padding:54px 28px 90px; }
.acct-dash .hello{ text-align:center; margin-bottom:8px; }
.acct-dash .hello .k{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-deep); }
.acct-dash .hello h1{ font-weight:300; font-size:30px; letter-spacing:0.02em; margin:10px 0 0; }
.acct-dash .email{ text-align:center; color:var(--muted); font-size:13px; margin:6px 0 30px; }
.acct-row{ display:flex; gap:16px; flex-wrap:wrap; }
.acct-card{ flex:1; min-width:200px; border:1px solid var(--hair-soft); padding:24px; }
.acct-card h3{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 10px; }
.acct-card p{ color:var(--muted); font-size:14px; margin:0; }
.acct-card a{ text-decoration:underline; }
.acct-logout{ display:block; margin:34px auto 0; background:none; border:1px solid var(--hair); color:var(--text); font-family:var(--sans); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:13px 28px; cursor:pointer; }

/* ---- drawer language footer ---- */
.nd-foot{ border-top:1px solid var(--hair-soft); padding:20px 24px; display:flex; align-items:center; justify-content:space-between; }
.nd-flabel{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.nd-lang{ display:flex; gap:4px; }
.nd-lang button{ background:none; border:1px solid var(--hair); color:var(--muted); font-family:var(--sans); font-size:12px; letter-spacing:0.03em; padding:7px 14px; cursor:pointer; }
.nd-lang button.on{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }

/* ---- mobile header + nav ---- */
@media (max-width:860px){
  nav.main{ display:none; }
}
@media (max-width:640px){
  .bar{ padding:13px 14px; grid-template-columns:1fr auto 1fr; }
  .bar .left, .bar .right{ gap:15px; }
  .bar .lang, .bar .curr{ display:none; }
  .brand{ font-size:18px; letter-spacing:0.05em; padding-left:0.16em; }
  .iconbtn svg{ width:21px; height:21px; }
}

/* sold-out badge on card */
.card .quick.soldout{ opacity:1; transform:none; background:rgba(26,22,19,0.82); color:#fff; cursor:default; letter-spacing:0.06em; }

/* ---- homepage: header overlays the hero (transparent → frosted on scroll) ---- */
header.site.over:not(.scrolled):not(:hover){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; }
header.site.over:not(.scrolled):not(:hover) .brand,
header.site.over:not(.scrolled):not(:hover) .iconbtn,
header.site.over:not(.scrolled):not(:hover) .lang button.on{ color:#fff; }
header.site.over:not(.scrolled):not(:hover) nav.main a{ color:rgba(255,255,255,0.92); }
header.site.over:not(.scrolled):not(:hover) nav.main a.sale{ color:#fff; }
header.site.over:not(.scrolled):not(:hover) .iconbtn svg,
header.site.over:not(.scrolled):not(:hover) .searchbar svg{ stroke:#fff; }
header.site.over:not(.scrolled):not(:hover) .lang button{ color:rgba(255,255,255,0.7); }
header.site.over:not(.scrolled):not(:hover) .lang button.on{ border-color:#fff; }
header.site.over:not(.scrolled):not(:hover) .searchbar{ border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.14); color:rgba(255,255,255,0.85); }
header.site.over:not(.scrolled):not(:hover) .searchbar input{ color:#fff; }
header.site.over:not(.scrolled):not(:hover) .searchbar input::placeholder{ color:rgba(255,255,255,0.72); }
header.site.over{ transition:background .3s ease, backdrop-filter .3s ease; }

/* ---- smooth page transitions ---- */
@keyframes spl-pagein{ from{ opacity:0 } to{ opacity:1 } }
body{ animation:spl-pagein .4s ease; }
body.leaving{ opacity:0; transition:opacity .22s ease; }
@media (prefers-reduced-motion:reduce){ body{ animation:none; } body.leaving{ transition:none; opacity:1; } }

/* ---- SUMMER SALE: was/now pricing ---- */
.card .tag.sale{ background:var(--accent-deep, #B98F81); color:#fff; font-weight:500; letter-spacing:0.08em; }
.price.sale{ color:var(--accent-deep, #B98F81); }
.was{ margin-left:7px; font-size:12px; color:var(--muted); text-decoration:line-through; }
.info .was{ font-size:16px; margin-left:10px; }