/*
Theme Name: Alure
Theme URI: https://example.com/
Author: You
Author URI: https://example.com/
Description: Alure — a simple, elegant jewelry storefront (static homepage).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
License: GPLv2 or later
Text Domain: alure
*/

/* =========================
   Alure v4 — full stylesheet
   ========================= */

/* Tokens & base */
:root{
  --bg:#fff; --bg-soft:#f3f1f1; --ink:#111; --muted:#6d6d6d; --line:#e8e6e6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Arial,sans-serif}
img{max-width:100%;display:block}
.container{width:min(1140px,92%);margin-inline:auto}
h1,h2,h3,h4,.logo{font-family:'Instrument Serif', Georgia, serif; font-weight:400}

/* Brittany (optional) – put file at /wp-content/themes/alure/assets/fonts/Brittany.ttf */
@font-face{
  font-family:'Brittany';
  src:url('assets/fonts/Brittany.ttf') format('truetype');
  font-display:swap;
}
.brittany{font-family:'Brittany','Instrument Serif',cursive}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.header-split{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:12px 0; position:relative;
}
.logo{font-size:32px;text-decoration:none;color:var(--ink);line-height:1}
.nav-left,.nav-right{display:flex;gap:22px;align-items:center}
.nav-left a,.nav-right a{position:relative;text-decoration:none;color:var(--ink);font-weight:700;padding:6px 0}
.nav-left a.u::after,.nav-right a.u::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#000;transform:scaleX(0);transform-origin:left center;transition:transform .25s ease;
}
.nav-left a.u:hover::after,.nav-right a.u:hover::after{transform:scaleX(1)}

.right-wrap{display:flex;justify-content:flex-end;align-items:center;gap:16px}
.lang{display:flex;align-items:center;gap:8px}
.lang.mobile{gap:10px;margin-top:10px}
.lang .sep{opacity:.5}
.lang-btn{border:0;background:transparent;font-weight:800;cursor:pointer;padding:6px 8px;border-radius:8px}
.lang-btn.active{background:var(--bg-soft)}

.hamb{display:none;position:absolute;right:0;top:10px;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer}
.hamb span{width:22px;height:2px;background:#111}

.nav-mobile{
  display:none;
  position:fixed;inset:60px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
  flex-direction:column;gap:12px;padding:14px 16px;z-index:40;
  transform:translateY(-6px);opacity:0;transition:transform .22s ease, opacity .22s ease;
}
.nav-mobile.open{display:flex;transform:translateY(0);opacity:1}

@media (max-width:920px){
  .nav-left,.nav-right,.lang{display:none}
  .hamb{display:flex}
}

/* ===== Hero ===== */
.hero{padding:40px 0 14px;border-bottom:1px solid var(--line)}
.hero-wrap{display:grid;gap:10px}
.hero-media{position:relative}
.hero-media img{width:100%;border-radius:16px;aspect-ratio:16/9;object-fit:cover}
.overlay{position:absolute;inset:0;display:grid;place-items:center}
.overlay h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35);text-align:center;font-size:clamp(28px,6vw,64px);line-height:1.02}
.overlay em{font-style:italic}
.kicker{color:#222;margin:8px 0 0;font-size:20px}

/* ===== Product rows ===== */
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:6px 0 14px;scroll-snap-type:x mandatory;align-items:stretch}
.hscroll::-webkit-scrollbar{height:8px}
.hscroll::-webkit-scrollbar-thumb{background:#d9d7d7;border-radius:8px}

.card{
  flex:0 0 280px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.card .media{background:#fafafa;overflow:hidden}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .35s ease}
.card:hover img{transform:scale(1.035)}
/* Ensure buttons align perfectly across all cards (1,9,10 etc.) */
.card .body{display:flex;flex-direction:column;gap:8px;padding:12px;min-height:180px;padding-bottom:16px}
.card .title{
  font-family:'Instrument Serif', Georgia, serif;font-size:18px;letter-spacing:.1px;line-height:1.2;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-clamp:2;-webkit-line-clamp:2;
}
.card .price{margin:4px 0 2px;font-family:'Instrument Serif', Georgia, serif;font-size:19px;font-weight:400}
.card .meta{color:var(--muted);font-size:13px}
.view-btn{margin-top:auto}
.view-btn,.btn-brittany{
  padding:10px 16px;border-radius:999px;border:1px solid #111;background:#111;color:#fff;cursor:pointer;font-weight:700;
  font-family:'Brittany','Instrument Serif',cursive;
}

/* Show 3–4 cards on phones */
.hscroll.compact{ --cards-per-view: 3; }
.hscroll.compact .card{ flex:0 0 calc((100% - 11px)/var(--cards-per-view)); max-width:360px; }
@media (min-width:560px){ .hscroll.compact{ --cards-per-view: 4; } }
@media (min-width:920px){ .hscroll.compact .card{ flex:0 0 280px; } }

/* ===== Story ===== */
.section{padding:42px 0}
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.story-media img{border-radius:16px;aspect-ratio:16/9;object-fit:cover}
.story-copy h3{margin:0 0 6px;font-size:clamp(22px,3.4vw,34px)}
.link{color:#111;text-decoration:none;border-bottom:1px solid #111;padding-bottom:2px}

/* ===== Newsletter ===== */
.news{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.news-ref{max-width:860px;margin-inline:auto;text-align:center;display:grid;gap:14px}
.news-ref .caps{letter-spacing:.14em;font-weight:800}
.news-line{display:grid;grid-template-columns:1fr auto;gap:0;align-items:end;max-width:720px;margin:0 auto}
.news-line input{border:0;border-bottom:1px solid #222;padding:12px 0;font-size:18px;background:transparent;outline:none}
.btn-black{background:#1f1f1f;color:#fff;border:0;padding:16px 24px;font-weight:800}
.btn-black:hover{filter:brightness(0.92)}

/* ===== FAQ ===== */
.faq .center{text-align:center;margin-bottom:16px}
.accordion{display:grid;gap:10px}
.item{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.item summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;position:relative}
.item summary::-webkit-details-marker{display:none}
.item summary::after{content:'+';position:absolute;right:16px;top:12px;font-weight:800}
.item[open] summary::after{content:'–'}
.item .content{padding:0 16px 14px 16px;color:var(--muted);line-height:1.7}

/* ===== Contact ===== */
.contact-wrap{max-width:760px;margin-inline:auto}
.contact .center{text-align:center}
.contact-form{display:grid;gap:12px}
.contact-form input,.contact-form textarea{padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line);padding:26px 0}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px;align-items:center}
.foot-links{display:flex;gap:14px}
.foot-links a{color:var(--ink);text-decoration:none}

/* ===== Drawer ===== */
.drawer{position:fixed;inset:0;pointer-events:none;z-index:90}
.drawer.open{pointer-events:auto}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.40);opacity:0;transition:opacity .3s ease;z-index:1}
.drawer.open .drawer-backdrop{opacity:1}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(480px,92vw);background:#fff;border-left:1px solid var(--line);
  box-shadow:-10px 0 28px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .3s ease;z-index:2;overflow-y:auto
}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:20px;line-height:0}
.drawer-media{padding:18px 18px 8px}
.drawer-media img{width:100%;border-radius:12px;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line)}
.drawer-body{display:grid;gap:10px;padding:6px 18px 24px}
.d-title{margin:0;font-family:'Instrument Serif', Georgia, serif;font-size:24px}
.d-sub{color:var(--muted);font-size:14px}
.d-price{font-family:'Instrument Serif', Georgia, serif;font-size:22px}
.d-desc{color:#333;line-height:1.6}
.add-btn{margin-top:8px}

/* Mobile: bottom sheet */
@media (max-width:640px){
  .drawer-panel{top:auto;right:0;left:0;bottom:0;height:70vh;width:100%;border-left:none;border-top:1px solid var(--line);border-radius:16px 16px 0 0;transform:translateY(100%)}
  .drawer.open .drawer-panel{transform:translateY(0)}
}

/* Motion */
@media (prefers-reduced-motion:no-preference){
  .drawer-backdrop{transition-duration:.3s}
  .drawer-panel{transition-duration:.3s}
}

/* Lock background scroll */
body.no-scroll{overflow:hidden}

/* Misc responsive */
@media (max-width:920px){
  .story-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}



/* Improve off-screen performance for many cards */
.card {
  content-visibility: auto;           /* browser skips rendering offscreen */
  contain-intrinsic-size: 1px 360px;  /* reserve space to avoid jumps */
}

/* Hardware-accelerate animated panels */
.drawer-panel { will-change: transform; }
.overlay h1    { will-change: opacity, transform; }

/* When WP admin bar is visible, keep sticky header stable */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Prevent background page from rubber-banding when drawer is open */
body.no-scroll { overscroll-behavior: none; }


/* ===== Fix: restore card size & square images like before ===== */

/* show 3 on small phones, 4 on larger phones; fixed 280px on desktop */
.hscroll.compact{ --cards-per-view: 3; }
.hscroll.compact .card{
  flex: 0 0 calc((100% - 11px)/var(--cards-per-view));
  max-width: 360px;
}
@media (min-width:560px){ .hscroll.compact{ --cards-per-view: 4; } }
@media (min-width:920px){ .hscroll.compact .card{ flex: 0 0 280px; } }

/* keep product media perfectly square */
.card .media{ aspect-ratio: 1 / 1; }
.card .media img{
  width:100%; height:100%;
  object-fit:cover;
  aspect-ratio: 1 / 1;
}


/* ===========================
   PATCH: mobile menu, topbar, headings, and button alignment
   =========================== */

/* Top black banner */
.topbar{position:sticky;top:0;z-index:60;background:#111;color:#fff}
.topbar-inner{display:flex;justify-content:center;align-items:center;height:30px}
.topbar .brittany{font-size:16px;letter-spacing:.3px}

/* Keep the sticky header flush under the black banner */
.site-header{position:sticky;top:30px;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
body.admin-bar .topbar{top:32px}
@media (max-width:782px){ body.admin-bar .topbar{top:46px} }

/* Mobile menu styling */
.nav-mobile{
  display:none; position:fixed; inset:calc(30px + 60px) 0 auto 0; /* under topbar + header */
  background:#fff; border-bottom:1px solid var(--line);
  flex-direction:column; gap:6px; padding:12px 16px; z-index:70;
  transform:translateY(-8px); opacity:0; transition:transform .22s ease, opacity .22s ease;
}
.nav-mobile a{padding:10px 2px; font-weight:700; text-decoration:none; color:#111}
.nav-mobile .lang{display:flex; gap:10px; margin-top:8px}
.nav-mobile.open{display:flex; transform:translateY(0); opacity:1}
.hamb{display:none}
@media (max-width:920px){ .hamb{display:flex}}

/* Make sure there’s no “transparent” gap behind the header while scrolling */
body{background:#fff}

/* Headings consistency (FAQ / Contact / Newsletter) */
.section h3.center,
.section .news-ref .caps{
  font-family:'Instrument Serif', Georgia, serif;
  font-size:clamp(22px,3.4vw,28px);
  letter-spacing:.02em;
}
.news-ref .caps{font-weight:800}

/* Newsletter: slightly larger on phones */
.news-line input{font-size:18px}
@media (max-width:560px){
  .news-ref .caps{font-size:22px}
}

/* Show language buttons on phones */
.lang.mobile{display:flex}
@media (min-width:921px){ .lang.mobile{display:none} }

/* Product cards: ensure all buttons line up on phones */
.card .title{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:2; line-clamp:2;
  min-height:2.6em;   /* reserve space for 2 lines */
}
.card .body{min-height:190px; display:flex; flex-direction:column}
.view-btn{margin-top:auto}

@media (max-width:560px){
  /* phone: slightly smaller body to match compact layout */
  .card .body{min-height:180px}
}

/* Ensure compact, square cards (if something overrode earlier rules) */
.hscroll.compact{ --cards-per-view:3 }
.hscroll.compact .card{
  flex:0 0 calc((100% - 11px)/var(--cards-per-view));
  max-width:360px;
}
@media (min-width:560px){ .hscroll.compact{ --cards-per-view:4 } }
@media (min-width:920px){ .hscroll.compact .card{ flex:0 0 280px } }

.card .media{ aspect-ratio:1/1 }
.card .media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1 }

/* Smoothness & no rubber-band while drawer is open */
.drawer-panel{will-change:transform}
body.no-scroll{overflow:hidden; overscroll-behavior:none}


/* ===== FIX: keep top banner + header fixed while scrolling ===== */
:root{
  --adminbar-h: 0px;   /* WP admin bar offset (auto below) */
  --topbar-h:   30px;  /* height of the black banner */
  --header-h:   60px;  /* height of the white header */
}

/* When the WP admin bar is visible, reserve its height */
body.admin-bar{ --adminbar-h:32px; }
@media (max-width:782px){ body.admin-bar{ --adminbar-h:46px; } }

/* Always fixed at top */
.topbar{
  position: fixed;
  top: var(--adminbar-h);
  left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 1000;
  background: #111; color:#fff;
}
.site-header{
  position: fixed;
  top: calc(var(--adminbar-h) + var(--topbar-h));
  left: 0; right: 0;
  height: var(--header-h);
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* Push the page down so content isn't hidden under the fixed bars */
body{
  padding-top: calc(var(--adminbar-h) + var(--topbar-h) + var(--header-h));
  background:#fff; /* avoid any see-through gap while scrolling */
}

/* Mobile menu must open below the fixed bars */
.nav-mobile{
  position: fixed;
  top: calc(var(--adminbar-h) + var(--topbar-h) + var(--header-h));
  left: 0; right: 0;
  z-index: 998;
}

/* ===== FORCE banner + header to stay fixed (override anything above) ===== */
:root{
  --fixed-offset: 90px;  /* fallback; JS will set the exact value */
}

.topbar{
  position: fixed !important;
  top: var(--adminbar-h,0px) !important;
  left: 0; right: 0;
  z-index: 1000;
}

.site-header{
  position: fixed !important;
  top: calc(var(--adminbar-h,0px) + (var(--topbar-h,30px))) !important;
  left: 0; right: 0;
  z-index: 999;
  background:#fff;
  border-bottom:1px solid var(--line);
}

/* Push content down by the combined fixed heights (JS updates --fixed-offset) */
body{ padding-top: var(--fixed-offset); background:#fff; }

/* Mobile menu must open right under the fixed bars */
.nav-mobile{
  position: fixed !important;
  top: var(--fixed-offset) !important;
  left: 0; right: 0;
  z-index: 998;
}

/* Make header area visually solid while scrolling */
.header-split{ background:#fff; }


/* === FINAL OVERRIDE: keep top banner + header fixed, everywhere === */
:root{
  --adminbar-h: 0px;
  --topbar-h:   30px;   /* black banner height */
  --header-h:   60px;   /* white header height */
  --fixed-offset: calc(var(--adminbar-h) + var(--topbar-h) + var(--header-h));
}

/* If WP admin bar is shown, lift everything */
body.admin-bar{ --adminbar-h:32px; }
@media (max-width:782px){ body.admin-bar{ --adminbar-h:46px; } }

/* Guard: fixed can break if any ancestor has transform; make sure root wrappers don't */
html, body{ transform: none !important; }

/* Force the banner + header to fixed (wins over any previous sticky rules) */
.topbar{
  position: fixed !important;
  top: var(--adminbar-h) !important;
  left: 0 !important; right: 0 !important;
  height: var(--topbar-h) !important;
  z-index: 1000 !important;
  background:#111 !important; color:#fff !important;
}
.site-header{
  position: fixed !important;
  top: calc(var(--adminbar-h) + var(--topbar-h)) !important;
  left: 0 !important; right: 0 !important;
  height: var(--header-h) !important;
  z-index: 999 !important;
  background:#fff !important;
  border-bottom:1px solid var(--line) !important;
}

/* Push page content below the fixed bars */
body{
  padding-top: var(--fixed-offset) !important;
  background:#fff;
}

/* Mobile menu must open right under the fixed bars */
.nav-mobile{
  position: fixed !important;
  top: var(--fixed-offset) !important;
  left: 0 !important; right: 0 !important;
  z-index: 998 !important;
}

/* Make header area visually solid while scrolling */
.header-split{ background:#fff !important; }
/* --- FINAL HARD OVERRIDE: stop any sticky and force fixed --- */
.topbar,
.site-header {
  position: fixed !important;
  inset: auto 0 auto 0 !important; /* reset weird insets */
}

.topbar {
  top: 0 !important;
  z-index: 100000 !important;
  background: #111 !important;
  color: #fff !important;
  height: 30px !important;
}

.site-header {
  top: 30px !important; /* sits under the black banner */
  z-index: 99999 !important;
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
}

/* push page below the fixed bars (no JS dependency) */
body {
  padding-top: 90px !important; /* 30 (banner) + ~60 (header) */
}

/* mobile menu opens right under header */
.nav-mobile {
  position: fixed !important;
  top: 90px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99998 !important;
}

/* if WP admin bar exists, add its height */
#wpadminbar { position: fixed; } /* ensure it’s fixed too */
body.admin-bar { padding-top: calc(90px + 32px) !important; }
@media (max-width:782px){
  body.admin-bar { padding-top: calc(90px + 46px) !important; }
}

/* Remove top banner + reflow header/menu */
:root{
  --topbar-h: 0px;
  --header-h: 60px;                 /* adjust if your header is taller */
  --fixed-offset: calc(var(--adminbar-h,0px) + var(--header-h));
}

.topbar{ display:none !important; height:0 !important; }

.site-header{
  position: fixed !important;
  top: var(--adminbar-h,0px) !important;
  left: 0; right: 0;
}

body{ padding-top: var(--fixed-offset) !important; }

.nav-mobile{
  position: fixed !important;
  top: var(--fixed-offset) !important;
  left: 0; right: 0;
}

/* Admin bar padding (WP logged-in) */
body.admin-bar{ --adminbar-h:32px; }
@media (max-width:782px){ body.admin-bar{ --adminbar-h:46px; } }


/* Drawer above header (fix X being covered) */
.site-header{ z-index: 1000 !important; }
.drawer{ z-index: 3000 !important; }
.drawer-panel{ z-index: 3001 !important; }
.drawer-close{ z-index: 3002 !important; }

/* Drawer actions */
.actions{
  display:flex; gap:10px; margin-top:10px;
}
.btn-checkout, .btn-wa{
  flex:1; padding:14px 18px; border-radius:999px; font-weight:800; cursor:pointer; text-align:center;
}
.btn-checkout{
  background:#111; color:#fff; border:1px solid #111;
}
.btn-checkout:hover{ filter:brightness(.92); }
.btn-wa{
  background:#25D366; color:#fff; border:1px solid #1fb255; text-decoration:none;
}
.btn-wa:hover{ filter:brightness(.95); }




/* ===========================
   ALURE – QUICK PATCH (append at end of style.css)
   =========================== */

/* 1) Drawer always above header + visible X */
.drawer{ z-index: 2000 !important; }
.drawer-backdrop{ z-index: 2001 !important; }
.drawer-panel{ z-index: 2002 !important; will-change: transform; }
.drawer-close{
  position: sticky; top: 8px; right: 12px;
  z-index: 2003 !important;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line); background:#fff;
}

/* 2) Card buttons line up on every phone (1,9,10 etc.) */
.card .title{
  display: -webkit-box; -webkit-box-orient: vertical;
  overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2;
  min-height: 2.6em;
}
.card .body{ min-height: 180px; display: flex; flex-direction: column; }
.view-btn{ margin-top: auto; }

/* 3) Compact horizontal rows on mobile (3–4 per view) */
.hscroll.compact{ --cards-per-view: 3; }
.hscroll.compact .card{
  flex: 0 0 calc((100% - 11px)/var(--cards-per-view));
  max-width: 360px;
}
@media (min-width:560px){ .hscroll.compact{ --cards-per-view: 4; } }
@media (min-width:920px){ .hscroll.compact .card{ flex: 0 0 280px; } }

/* 4) Make product images perfectly square again */
.card .media{ aspect-ratio: 1 / 1; }
.card .media img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:1/1;
}

/* 5) Show language buttons on phones (top right in mobile menu) */
.lang.mobile{ display:flex !important; gap:10px; }
@media (min-width:921px){ .lang.mobile{ display:none !important; } }

/* 6) Same heading look for FAQ / Contact / Newsletter */
.section h3.center,
.news .caps{
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(22px, 3.4vw, 28px);
  letter-spacing: .02em;
}

/* 7) Newsletter input a bit larger on phones */
.news-line input{ font-size: 18px; }

/* 8) Keep header visually above page, but below drawer */
.site-header{ z-index: 1000 !important; }

/* 9) Prevent body scroll bounce when drawer open */
body.no-scroll{ overflow: hidden; overscroll-behavior: none; }

/* 10) Small polish for the two buttons after “Add to cart” */
.actions.two{ display:flex; gap:10px; }
.btn-checkout,.btn-wa{
  flex:1; padding:14px 18px; border-radius:999px;
  color:#fff; font-weight:800; text-align:center; cursor:pointer;
  border:1px solid #111; background:#111;
}
.btn-wa{ background:#25D366; border-color:#25D366; }

.drawer{ z-index: 2000 !important; }
.drawer-backdrop{ z-index: 2001 !important; }
.drawer-panel{ z-index: 2002 !important; will-change: transform; }
.drawer-close{ z-index: 2003 !important; }


/* === Drawer buttons visibility logic (enforce) === */
#drawerActions { display: none !important; }
#drawerActions.show { display: flex !important; gap: 10px; }

/* Ensure drawer always above header and X clickable */
.drawer{ z-index: 2000 !important; }
.drawer-backdrop{ z-index: 2001 !important; }
.drawer-panel{ z-index: 2002 !important; }
.drawer-close{ z-index: 2003 !important; }

/* Keep drawer close button above sticky header */
.drawer-close { z-index: 2001 !important; position: sticky; top: 10px; }
.drawer.open .drawer-panel { z-index: 2000; }


/* ================================
   PRODUCT PAGE + POPUP POLISH (mobile-first)
   ================================ */

/* 2.1 — Buttons in popup & checkout: use Inter, not Brittany */
.drawer .btn,
.drawer .add-btn,
.drawer .order-actions .btn,
.page-product .btn {
  font-family: Inter, system-ui, Arial, sans-serif !important;
  font-weight: 800;
  letter-spacing: .02em;
}

/* 2.2 — WhatsApp button color (popup + product page) */
.drawer .btn-wa,
.page-product .btn-wa {
  background: #10b981;           /* emerald-500 */
  border-color: #0ea170;
}
.drawer .btn-wa:hover,
.page-product .btn-wa:hover {
  filter: brightness(0.95);
}

/* 2.3 — Popup: ensure close button is always clickable above header */
.drawer-close { z-index: 3; }

/* 2.4 — Reduce extra gap below header on product page */
.page-product .container { padding-top: 10px; } /* subtle */
@media (max-width: 640px){
  .page-product .container { padding-top: 6px; }
}

/* 2.5 — Language pills on product page (small, top-right, neat) */
.page-product .prod-lang {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin: 4px 0 10px;
}
.page-product .prod-lang .lang-btn {
  border: 1px solid var(--line);
  background: #fff;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.page-product .prod-lang .lang-btn.active {
  background: var(--bg-soft);
}

/* 2.6 — Product page layout: make checkout full width on phones */
.page-product .product-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
}
@media (max-width: 900px){
  .page-product .product-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Keep image nice on phones */
.page-product .product-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 480px){
  .page-product .product-card {
    grid-template-columns: 100px 1fr;
    gap: 10px;
  }
}
.page-product .product-card .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}

/* Title + meta spacing */
.page-product .product-title { margin: 0 0 6px; }
.page-product .product-sub   { color: var(--muted); font-size: 14px; }
.page-product .product-price { font-family:'Instrument Serif', Georgia, serif; font-size: 20px; }

/* 2.7 — Product action buttons order and stacking on phones */
.page-product .order-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
@media (max-width: 900px){
  .page-product .order-actions {
    flex-direction: column;
  }
}
.page-product .order-actions .btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 999px;
}

/* 2.8 — Checkout form block: full width, nice spacing on phones */
.page-product .checkout-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}
@media (max-width: 900px){
  .page-product .checkout-box {
    padding: 12px;
  }
}
.page-product .checkout-box h4 {
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: .02em;
}
.page-product .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px){
  .page-product .form-grid { grid-template-columns: 1fr; }
}
.page-product .form-grid .wide { grid-column: 1 / -1; }
.page-product input,
.page-product textarea,
.page-product select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}
.page-product textarea{ min-height: 88px; resize: vertical; }

/* 2.9 — “You may also like” row: tidy spacing */
.page-product .upsell {
  margin-top: 18px;
}
.page-product .upsell h5 {
  margin: 0 0 10px;
  font-size: 16px;
}
.page-product .upsell .hscroll { padding-bottom: 6px; }

/* 2.10 — Drawer secondary action row alignment on phones */
@media (max-width: 640px){
  .drawer .order-actions {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  .drawer .order-actions .btn { width: 100%; }
}

/* 2.11 — Slightly smaller top banner/header gap on phones (global) */
@media (max-width: 640px){
  :root { --topbar-h: 24px; --header-h: 56px; }
}

/* === MOBILE FIX: make checkout full width under the product === */
@media (max-width: 900px){
  /* 1) Collapse the two columns into one */
  .page-product .product-grid{
    display:grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* 2) Force the checkout box to span the full row */
  .page-product .product-grid > .checkout-box{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  /* 3) Make form fields breathe and use full width */
  .page-product .checkout-box .form-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .page-product .checkout-box input,
  .page-product .checkout-box textarea,
  .page-product .checkout-box select{
    width: 100% !important;
  }

  /* 4) Put actions (Checkout / WhatsApp) as a full-width block under the product */
  .page-product .order-actions{
    display:flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .page-product .order-actions .btn{
    width: 100% !important;
    border-radius: 999px;
    padding: 14px 16px;
    font-weight: 800;
  }

  /* 5) Green WhatsApp button */
  .page-product .order-actions .btn-wa{
    background: #10b981 !important;
    border-color: #0ea170 !important;
    color: #fff !important;
  }

  /* 6) Tighten top spacing a bit on mobile */
  .page-product .container{ padding-top: 6px !important; }
}
/* LAST RESORT: kill any fixed width on the checkout box */
.page-product .checkout-box{
  width: 100% !important;
  max-width: none !important;
}


/* ==== NUCLEAR MOBILE FIX: product checkout full-width underneath ==== */
@media (max-width: 900px){

  /* 1) Whatever the layout wrapper is, make it a single column */
  .page-product .container > .product-grid,
  .page-product .container > .grid,
  .page-product .container > .row,
  .page-product .container > .wrap,
  .page-product .container > .content,
  .page-product .container > *:where([class*="grid"], [class*="row"], [class*="cols"]){
    display: block !important;
  }

  /* 2) Every direct child becomes full width and stacked */
  .page-product .container > * > *{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    float: none !important;
    clear: both !important;
  }

  /* 3) The checkout box specifically */
  .page-product .checkout-box{
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  /* 4) Actions (Checkout / WhatsApp) stacked and full width */
  .page-product .order-actions{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .page-product .order-actions .btn{
    width: 100% !important;
    border-radius: 999px;
    padding: 14px 16px;
    font-weight: 800;
    font-family: Inter, system-ui, Arial, sans-serif !important; /* not Brittany */
  }
  .page-product .order-actions .btn-wa{
    background: #10b981 !important;  /* green */
    border-color: #0ea170 !important;
    color: #fff !important;
  }

  /* 5) Tighten top space on the page */
  .page-product .container{ padding-top: 6px !important; }
}

/* LAST RESORT – if anything still constrains width on mobile */
@media (max-width:900px){
  .page-product *[style*="width"],
  .page-product *[class*="col"],
  .page-product aside,
  .page-product .sidebar,
  .page-product .summary {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ======================================
   (REPLACEMENT) Product page overrides
   ====================================== */

/* remove old debug outlines */
body.page-product,
body.page-template-page-product { outline: none !important; }

/* ===== Mobile stack helper (<=900px) ===== */
@media (max-width:900px){
  /* collapse any rows/grids into one column */
  body.page-template-page-product .container,
  body.page-template-page-product .container > *,
  body.page-product .container,
  body.page-product .container > *{
    display:block !important;
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* full-width controls/buttons */
  body.page-template-page-product .actions,
  body.page-template-page-product .order-actions,
  body.page-product             .actions,
  body.page-product             .order-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:100% !important;
  }
  body.page-template-page-product .actions .btn,
  body.page-template-page-product .order-actions .btn,
  body.page-product             .actions .btn,
  body.page-product             .order-actions .btn,
  body.page-template-page-product button[type="submit"],
  body.page-product             button[type="submit"]{
    width:100% !important;
    padding:14px 16px !important;
    border-radius:999px !important;
    font-family: Inter, system-ui, Arial, sans-serif !important;
    font-weight:800 !important;
  }

  /* WhatsApp green */
  body.page-template-page-product .btn-wa,
  body.page-product             .btn-wa{
    background:#10b981 !important;
    border-color:#0ea170 !important;
    color:#fff !important;
  }
}

/* ===== ALURE — Product page (single column, no left image) ===== */

/* 1) make layout one column everywhere */
.page-product .product-grid,
.page-template-page-product .product-grid{
  display:block !important;        /* ignore old grid/columns */
}

/* 2) turn summary card into a simple block and hide the thumbnail */
.page-product .product-card,
.page-template-page-product .product-card{
  display:block !important;
}
.page-product .product-card .thumb,
.page-template-page-product .product-card .thumb{
  display:none !important;         /* remove the image */
}

/* 3) buttons full-width & stacked */
.page-product .order-actions,
.page-template-page-product .order-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  width:100% !important;
}
.page-product .order-actions .btn,
.page-template-page-product .order-actions .btn{
  width:100% !important;
  padding:14px 16px;
  border-radius:999px;
  font-weight:800;
  font-family:Inter, system-ui, Arial, sans-serif !important; /* not Brittany */
}

/* 4) WhatsApp button green (desktop + mobile) */
.page-product .order-actions .btn-wa,
.page-template-page-product .order-actions .btn-wa{
  background:#10b981 !important;
  border-color:#0ea170 !important;
  color:#fff !important;
}

/* 5) checkout takes full width directly under the summary */
.page-product .checkout-box,
.page-template-page-product .checkout-box{
  width:100% !important;
  max-width:100% !important;
  margin-top:14px !important;
  grid-column:auto !important;
}

/* 6) form fields single column */
.page-product .form-grid,
.page-template-page-product .form-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
}

/* 7) slightly reduce top space on phones */
@media (max-width:640px){
  .page-product .container,
  .page-template-page-product .container{ padding-top:6px !important; }
}

/* ===== ALURE — FINAL MOBILE FIX (header/menu/lang/checkout) ===== */

/* ———  A) GLOBAL FIXED HEADER  ——— */
:root{
  --header-h: 60px;
  --adminbar-h: 0px;
}
body.admin-bar{ --adminbar-h:32px; }
@media (max-width:782px){ body.admin-bar{ --adminbar-h:46px; } }

.site-header{
  position: fixed !important;
  top: var(--adminbar-h) !important;
  left: 0; right: 0;
  height: var(--header-h);
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index: 1000 !important;
}
body{
  padding-top: calc(var(--adminbar-h) + var(--header-h)) !important;
}

/* ———  B) HAMBURGER THAT NEVER HIDES + TURNS INTO “×” WHEN OPEN  ——— */
.hamb{
  position: fixed !important;          /* keep on screen, above menu */
  top: calc(var(--adminbar-h) + 14px) !important;
  right: 16px !important;
  z-index: 1101 !important;
  display: flex !important;
}
.hamb[aria-expanded="true"] span{ opacity:0; }
.hamb[aria-expanded="true"]::after{
  content: "×";
  position: absolute; right: 0; top: -6px;
  font-size: 28px; line-height: 1;
}

/* ———  C) MOBILE MENU: OPENS UNDER HEADER, CLOSES OVER PAGE  ——— */
.nav-mobile{
  position: fixed !important;
  top: calc(var(--adminbar-h) + var(--header-h)) !important;
  left: 0; right: 0;
  background:#fff;
  border-bottom:1px solid var(--line);
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  z-index: 1100 !important;            /* below the hamb, above page */
}
.nav-mobile.open{ display:flex; }

/* Close menu when tapping a link (visual hint) */
.nav-mobile a{ padding:10px 2px; font-weight:700; color:#111; text-decoration:none; }

/* ———  D) LANG PILLS: ALWAYS IN HEADER (remove from slide menu) ——— */
.lang{ display:flex !important; gap:8px; }
.lang.mobile{ display:none !important; } /* hide the copy inside .nav-mobile */
.lang-btn{
  border:1px solid var(--line);
  background:#fff;
  padding:6px 10px;
  border-radius: 999px;
  font-weight:800;
}
.lang-btn.active{ background:var(--bg-soft); }

/* ———  E) DRAWER ABOVE HEADER ——— */
.drawer{ z-index: 2000 !important; }
.drawer-panel{ z-index: 2001 !important; }
.drawer-close{ z-index: 2002 !important; }

/* ———  F) PRODUCT PAGE ON PHONES: image → text → FULL-WIDTH CHECKOUT ——— */
@media (max-width: 900px){
  .page-product .product-grid{
    display:block !important;
  }
  .page-product .order-actions{
    display:flex !important; flex-direction:column !important; gap:10px !important; width:100% !important;
  }
  .page-product .order-actions .btn{
    width:100% !important; border-radius:999px; padding:14px 16px; font-weight:800;
    font-family: Inter, system-ui, Arial, sans-serif !important;
  }
  .page-product .order-actions .btn-wa{
    background:#10b981 !important; border-color:#0ea170 !important; color:#fff !important;
  }
  .page-product .checkout-box{
    width:100% !important; max-width:100% !important; margin-top:14px !important;
  }
  .page-product .form-grid{ grid-template-columns:1fr !important; gap:10px !important; }
}

/* ===== GLOBAL HEADER CLEANUP ===== */
/* Hide hamburger on desktop */
@media (min-width: 921px){
  .hamb{ display:none !important; }
}

/* On phones: hide the left/right nav labels ("Collection / Bespoke / Journal / Contact")
   so only the centered logo + the hamburger show. */
@media (max-width: 920px){
  .nav-left, .nav-right{ display:none !important; }
}
/* ===== ALURE — HEADER VISIBILITY TWEAKS & DESKTOP CLEANUP ===== */

/* Phones & tablets: hide the left/right nav links inside the fixed header */
@media (max-width: 920px){
  .nav-left, .nav-right { display: none !important; }
  .hamb { display: flex !important; }              /* burger visible on mobile */
}

/* Desktop: show full nav and hide the burger */
@media (min-width: 921px){
  .nav-left, .nav-right { display: flex !important; }
  .hamb { display: none !important; }              /* no 3-line menu on desktop */
}

/* Make sure nothing sits above the logo on mobile (kills that "Collection Bespoke" row) */
.header-split { grid-template-columns: 1fr auto 1fr; align-items: center; }