/* ==========================================================================
   Intentlook Heritage — storefront styles
   Ivory paper, espresso ink, antique gold. Arch-framed imagery.
   ========================================================================== */

:root{
  --ivory:#F7F1E8;
  --paper:#FFFCF7;
  --sand:#EFE5D6;
  --ink:#2A1D16;
  --ink-2:#4A3A30;
  --muted:#8A7868;
  --line:#E4D6C2;
  --gold:#A9823F;
  --gold-2:#CFAF72;
  --maroon:#7A2E25;
  --espresso:#22160F;
  --ok:#3F6B4E;

  --serif:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius:14px;
  --shadow:0 18px 40px -22px rgba(42,29,22,.35);
  --head-h:74px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 12px); }
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:50px; padding:0 26px; border-radius:999px; border:1px solid transparent;
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.btn svg{ width:16px; height:16px; transition:transform .25s; }
.btn:hover svg{ transform:translateX(3px); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--maroon); }
.btn-line{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-line:hover{ background:var(--ink); color:var(--paper); }
.btn-gold{ background:var(--gold-2); color:var(--espresso); }
.btn-gold:hover{ background:var(--paper); }

/* ---------- eyebrow / section heads ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.eyebrow .rule{ width:36px; height:1px; background:currentColor; }
.sec-head{ text-align:center; margin-bottom:40px; }
.sec-kicker{ font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.sec-head h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(34px,4.2vw,50px); line-height:1.05;
  margin:8px 0 14px; letter-spacing:-.01em;
}
.sec-orn{ display:flex; align-items:center; justify-content:center; gap:12px; color:var(--gold); }
.sec-orn span{ width:56px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-2)); }
.sec-orn span:last-child{ background:linear-gradient(90deg,var(--gold-2),transparent); }
.sec-orn i{ font-style:normal; font-size:10px; }

/* ---------- announcement marquee ---------- */
.announce{ background:var(--maroon); color:#F6E7D8; overflow:hidden; font-size:12.5px; letter-spacing:.06em; }
.announce-track{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
.announce-set{ display:flex; align-items:center; gap:22px; padding:9px 11px; white-space:nowrap; }
.announce-set i{ font-style:normal; font-size:8px; color:var(--gold-2); }
.announce:hover .announce-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(247,241,232,.88); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.site-head.scrolled{ border-bottom-color:var(--line); box-shadow:0 10px 30px -24px rgba(42,29,22,.5); }
.head-bar{ height:var(--head-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.head-nav{ display:flex; gap:28px; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.head-nav a{ position:relative; padding:6px 0; }
.head-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .3s; }
.head-nav a:hover::after{ right:0; }
.brand a{ display:flex; align-items:center; gap:10px; }
.brand .mark{ width:38px; height:38px; object-fit:contain; }
.brand .word{ font-family:var(--serif); font-size:27px; font-weight:600; letter-spacing:.01em; }
.brand .custom-logo{ max-height:46px; width:auto; }
.head-icons{ display:flex; justify-content:flex-end; gap:6px; }
.hic{
  position:relative; width:42px; height:42px; border-radius:50%; border:0; background:transparent;
  display:grid; place-items:center; transition:background .2s;
}
.hic:hover{ background:var(--sand); }
.hic svg{ width:21px; height:21px; }
.hic .count{
  position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--maroon); color:#fff; font-size:10.5px; font-weight:700; line-height:18px; text-align:center;
}
.hic .count:empty, .hic .count[data-zero="1"]{ display:none; }
.hic-wish.on{ color:var(--maroon); }
.hic-wish.on svg{ fill:currentColor; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:56px 0 72px; }
.hero::before{
  content:""; position:absolute; inset:auto -10% -40% 35%; height:120%;
  background:radial-gradient(closest-side, rgba(207,175,114,.28), transparent 70%); pointer-events:none;
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(46px,6.4vw,88px); line-height:.98;
  letter-spacing:-.02em; margin:18px 0 20px;
}
.hero h1 em{ display:block; font-style:italic; font-weight:500; color:var(--maroon); }
.lede{ font-size:17px; color:var(--ink-2); max-width:440px; margin:0 0 30px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }

.hero-art{ position:relative; height:560px; }
.arch{
  overflow:hidden; background:var(--sand);
  border-radius:999px 999px 18px 18px;
}
.arch img{ width:100%; height:100%; object-fit:cover; }
.arch-main{
  position:absolute; right:40px; top:0; width:min(400px,78%); height:540px;
  box-shadow:var(--shadow); outline:1px solid var(--gold-2); outline-offset:10px;
}
.hero-mini{
  position:absolute; width:150px; height:150px; border-radius:50%; overflow:hidden;
  border:6px solid var(--paper); box-shadow:var(--shadow); background:var(--sand);
}
.hero-mini img{ width:100%; height:100%; object-fit:cover; }
.hero-mini-1{ left:0; top:70px; }
.hero-mini-2{ left:40px; bottom:40px; width:120px; height:120px; }
.hero-ornament{ position:absolute; right:-6px; top:-14px; width:96px; color:var(--gold-2); animation:spin 40s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- promise strip ---------- */
.promise{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.promise-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.promise-item{ display:flex; align-items:center; gap:14px; padding:24px 18px; }
.promise-item + .promise-item{ border-left:1px solid var(--line); }
.promise-item svg{ width:30px; height:30px; flex:none; color:var(--gold); }
.promise-item b{ display:block; font-size:14px; font-weight:700; }
.promise-item span{ display:block; font-size:12.5px; color:var(--muted); }

/* ---------- category arches ---------- */
.cats{ padding:84px 0 40px; }
/* Desktop: every collection visible, centred, wrapping when there are many. */
.cat-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:26px 20px; padding:6px 0 18px;
}
.cat-row .cat-item{ width:128px; }
.cat-item{ display:flex; flex-direction:column; justify-content:flex-start; align-self:start; scroll-snap-align:start; text-align:center; background:none; border:0; padding:0; }
.cat-item .arch{
  display:block; aspect-ratio:3/4; border:1px solid var(--line); position:relative;
  transition:transform .35s, box-shadow .35s;
}
.cat-item .arch::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg,transparent 55%,rgba(34,22,15,.35));
}
.cat-item img{ transition:transform .6s; }
.cat-item:hover .arch{ transform:translateY(-6px); box-shadow:var(--shadow); }
.cat-item:hover img{ transform:scale(1.06); }
.cat-item.active .arch{ outline:2px solid var(--gold); outline-offset:4px; }
.cat-name{ display:block; font-family:var(--serif); font-size:21px; font-weight:600; margin-top:14px; line-height:1.15; }
.cat-count{ display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

/* ---------- shop ---------- */
.shop{ padding:24px 0 88px; }
/* Desktop: every category chip visible (wrapping, centred), with the count
   and sort on their own row underneath. Mobile turns this back into one
   sticky, swipeable row (see the 860px breakpoint). */
.shop-bar{
  position:relative; z-index:20;
  display:flex; flex-direction:column; align-items:stretch; gap:16px;
  padding:0 0 14px; margin-bottom:26px; border-bottom:1px solid var(--line);
}
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:2px; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; height:38px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--paper);
  font-size:13px; font-weight:600; white-space:nowrap; transition:all .2s;
}
.chip:hover{ border-color:var(--ink); }
.chip.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip .n{ opacity:.55; font-weight:500; margin-left:4px; }
.chip.wish-chip.active{ background:var(--maroon); border-color:var(--maroon); }
.shop-tools{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.shop-count{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.sort select{
  height:38px; border-radius:999px; border:1px solid var(--line); background:var(--paper);
  padding:0 34px 0 14px; font:600 13px var(--sans); color:var(--ink); appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1D16' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
}

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px; }
.empty-msg{ grid-column:1/-1; text-align:center; padding:60px 0; color:var(--muted); font-family:var(--serif); font-size:24px; }
.more{ display:flex; justify-content:center; margin-top:44px; }
.more[hidden]{ display:none; }

/* product card */
.card{ display:flex; flex-direction:column; animation:rise .5s both; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } }
.card-media{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--sand); cursor:zoom-in;
}
.card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s, transform .8s; }
.card-media .alt{ opacity:0; }
.card:hover .card-media .alt{ opacity:1; }
.card.picked .card-media .alt{ display:none; }
.card:hover .card-media img{ transform:scale(1.04); }
.badge{
  position:absolute; left:12px; top:12px; z-index:2; padding:5px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
}
.badge-sale{ background:var(--maroon); color:#fff; }
.badge-oos{ background:rgba(34,22,15,.78); color:#fff; }
.heart{
  position:absolute; right:12px; top:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:0;
  background:rgba(255,252,247,.92); display:grid; place-items:center; transition:transform .2s, color .2s;
}
.heart svg{ width:18px; height:18px; }
.heart:hover{ transform:scale(1.08); }
.heart.on{ color:var(--maroon); }
.heart.on svg{ fill:currentColor; }
.quick{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2; height:40px; border:0; border-radius:999px;
  background:rgba(255,252,247,.94); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:all .3s;
}
.card:hover .quick{ opacity:1; transform:none; }
.card.is-oos .card-media img{ filter:grayscale(.5); opacity:.75; }

.card-body{ padding:14px 2px 0; display:flex; flex-direction:column; flex:1; }
.card-cat{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.card-name{
  font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.2; margin:4px 0 8px;
  text-align:left; background:none; border:0; padding:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-name:hover{ color:var(--maroon); }
.price{ display:flex; align-items:baseline; gap:10px; }
.price .now{ font-weight:700; font-size:16px; }
.price .old{ font-size:13px; color:var(--muted); text-decoration:line-through; }
.price .off{ font-size:11.5px; font-weight:700; color:var(--maroon); }
.swatches{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.swatch{
  width:30px; height:30px; padding:0; border-radius:50%; overflow:hidden; border:1px solid var(--line); background:var(--sand);
  outline:1.5px solid transparent; outline-offset:2px; transition:outline-color .2s;
}
.swatch img{ width:100%; height:100%; object-fit:cover; }
.swatch.active{ outline-color:var(--ink); }
.card-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto; padding-top:14px; }
.card-actions button{
  height:42px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition:all .2s;
}
.btn-cart{ border:1px solid var(--ink); background:transparent; }
.btn-cart:hover{ background:var(--sand); }
.btn-buy{ border:1px solid var(--ink); background:var(--ink); color:var(--paper); }
.btn-buy:hover{ background:var(--maroon); border-color:var(--maroon); }
.card-actions button:disabled{ opacity:.45; cursor:not-allowed; background:transparent; color:var(--ink); }
/* BusinessAssi's script.js hides every .sa-add-init button once that piece is
   in its cart (class "hidden" + inline display:none), expecting its own qty
   stepper to take the place — we don't render one, so keep ours visible. */
.card-actions button, .card-actions button.hidden{ display:inline-flex !important; visibility:visible !important; }

/* "In your cart" — the piece is already in the cart */
.badge-incart{
  top:auto; bottom:12px; gap:5px; align-items:center;
  background:var(--gold-2); color:var(--espresso); box-shadow:0 6px 16px -8px rgba(34,22,15,.6);
}
.badge-incart:not([hidden]){ display:inline-flex; }
.badge-incart svg{ width:12px; height:12px; }
.card.in-cart .card-media{ box-shadow:0 0 0 2px var(--gold-2); }
.card-actions .ic-done{ display:none; width:16px; height:16px; flex:none; }
.btn-cart.is-in-cart{ background:var(--sand); border-color:var(--gold); color:var(--ink); }
.btn-cart.is-in-cart:hover{ background:var(--gold-2); }
.btn-cart.is-in-cart .ic-done{ display:block; }

/* ---------- promo ---------- */
.promo{ padding:20px 0 96px; }
.promo-inner{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:56px;
  background:var(--espresso); color:#F3E6D6; border-radius:28px; padding:56px 64px; overflow:hidden; position:relative;
}
.promo-inner::after{
  content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%;
  border:1px solid rgba(207,175,114,.25); box-shadow:0 0 0 40px rgba(207,175,114,.04), 0 0 0 80px rgba(207,175,114,.03);
}
.promo-art{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:end; }
.promo-art .arch{ aspect-ratio:3/5; outline:1px solid rgba(207,175,114,.45); outline-offset:6px; }
.promo-art .arch:nth-child(2){ aspect-ratio:3/6; }
.promo-copy h2{ font-family:var(--serif); font-weight:600; font-size:clamp(36px,4.4vw,56px); line-height:1.02; margin:16px 0; color:#FFF6EA; }
.promo-copy p{ color:#CDBBA8; max-width:420px; margin:0 0 28px; }
.promo .eyebrow{ color:var(--gold-2); }

/* ---------- order (BusinessAssi checkout lives here) ---------- */
.order{ padding:0 0 96px; }
.order-body{ background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:32px; }

/* BusinessAssi checkout widget: the order section already gives it a card,
   so drop its own outer box and hide its storefront grid (our grid
   replaces it). */
body .sa-storefront-header,
body .sa-sf-blocks-wrap,
body .sa-pc-wrapper .sa-pc-grid,
body .sa-pc-wrapper .sa-sf-cart-trigger,
body .sa-inpage-variation-section{ display:none !important; }
body .sa-storefront-container,
body .sa-pc-wrapper{ margin:0 !important; padding:0 !important; height:0 !important; overflow:hidden !important; }
body .sa-cart-drawer, body .sa-checkout-modal{ height:auto !important; overflow:visible !important; }
/* On phones BusinessAssi makes .sa-wrapper full-bleed (100vw + negative
   margins), which pushes it out of our card — keep it inside. */
#order .sa-wrapper{
  width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; background:transparent !important;
}

/* BusinessAssi's own sticky "Place Order" bar on phones (appended to <body>,
   shown while the checkout is on screen) is not used — the checkout's own
   Place Order button and the theme's bottom bar cover it. */
html body .sa-mobile-sticky-checkout-wrap,
html body .sa-mobile-sticky-checkout-wrap.sa-show-sticky-checkout{ display:none !important; }
body .sa-progress-bar-fill{ background:var(--gold) !important; }
/* Theme colours on the checkout. The widget's Elementor Style tab writes its
   own colours (orange by default) as `.elementor-N .elementor-element-X
   .sa-…{… !important}`, so these are anchored on the #order section id to
   outrank them whatever is picked there. */
#order{ --sa-font:"Manrope", "Anek Bangla", system-ui, sans-serif; }
#order .sa-btn,
#order .sa-mobile-btn,
#order .sa-main-submit-btn{
  background:var(--ink) !important; border-color:var(--ink) !important; color:var(--paper) !important; border-radius:999px !important;
  box-shadow:none !important;
}
#order .sa-btn:hover,
#order .sa-mobile-btn:hover,
#order .sa-main-submit-btn:hover{ background:var(--maroon) !important; border-color:var(--maroon) !important; }
#order .sa-pc-btn:not(.sa-rec-add-btn):not(.added-to-cart),
#order .sa-qty-btn{ background-color:var(--maroon) !important; border-color:var(--maroon) !important; }
#order .sa-rec-add-btn:not(.added-to-cart){
  background-color:rgba(122,46,37,.08) !important; color:var(--maroon) !important; border-color:rgba(122,46,37,.3) !important;
}
#order .sa-rec-add-btn:not(.added-to-cart):hover{ background-color:rgba(122,46,37,.16) !important; }
#order .sa-rec-add-btn:not(.added-to-cart) svg{ stroke:var(--maroon) !important; }
#order .sa-delivery-box.active{
  border-color:var(--gold) !important; background-color:rgba(169,130,63,.08) !important;
  box-shadow:0 8px 20px -14px rgba(169,130,63,.8) !important;
}
#order .sa-delivery-box.active .sa-delivery-icon{ background-color:var(--gold) !important; }
#order .sa-delivery-text strong{ color:var(--ink) !important; }
#order .sa-delivery-box.active .sa-delivery-text strong{ color:var(--maroon) !important; }
#order .sa-prod-td b,
#order .sa-sale-price,
#order .sa-total{ color:var(--maroon) !important; }
#order .sa-input:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(169,130,63,.15) !important; }
/* BusinessAssi's script also writes the orange inline (e.g. the "× 1" qty
   in the order summary). */
#order [style*="f97316" i]{ color:var(--maroon) !important; }
#order .sa-hero-var-box:hover{ border-color:var(--gold) !important; }
#order .sa-hero-var-box.selected{
  border-color:var(--gold) !important; box-shadow:0 0 0 1px var(--gold) !important; background-color:rgba(169,130,63,.06) !important;
}

/* ---------- footer ---------- */
.site-foot{ background:var(--espresso); color:#CDBBA8; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px; padding-top:64px; padding-bottom:48px; }
.site-foot .brand .word{ color:#FFF6EA; }
.foot-brand p{ max-width:360px; margin:16px 0 20px; font-size:14px; }
.foot-social{ display:flex; gap:10px; }
.foot-social .ic{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(207,175,114,.35); display:grid; place-items:center; color:var(--gold-2);
  transition:all .2s;
}
.foot-social .ic:hover{ background:var(--gold-2); color:var(--espresso); }
.foot-col h4{ font-family:var(--serif); font-size:22px; font-weight:600; color:#FFF6EA; margin:4px 0 14px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px; }
.foot-col a:hover, .foot-col button:hover{ color:var(--gold-2); }
.foot-col button{ background:none; border:0; padding:0; text-align:left; }
.foot-bottom{ border-top:1px solid rgba(207,175,114,.18); font-size:12.5px; }
.foot-bottom-inner{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:18px; padding-bottom:18px; padding-right:84px; }
.foot-bottom a{ color:var(--gold-2); }

/* ---------- floating ---------- */
.top-btn, .wa-float{
  position:fixed; right:20px; z-index:60; width:48px; height:48px; border-radius:50%; border:0;
  display:grid; place-items:center; box-shadow:var(--shadow); transition:opacity .3s, transform .3s;
}
.top-btn{ bottom:20px; background:var(--ink); color:var(--paper); opacity:0; pointer-events:none; transform:translateY(10px); }
.top-btn.show{ opacity:1; pointer-events:auto; transform:none; }
.top-btn svg{ width:20px; height:20px; }
.wa-float{ bottom:80px; background:#25D366; color:#fff; }
.wa-float svg{ width:26px; height:26px; }

.toast{
  position:fixed; left:50%; bottom:24px; z-index:120; transform:translate(-50%,20px); opacity:0; pointer-events:none;
  width:max-content; max-width:min(460px, calc(100vw - 32px)); transition:opacity .3s, transform .3s;
}
.toast.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast-simple{
  background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:999px; font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow); text-align:center;
}
.toast-card{
  display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px;
  background:var(--ink); color:var(--paper); border-radius:18px; box-shadow:0 22px 50px -20px rgba(34,22,15,.7);
  border:1px solid rgba(207,175,114,.35);
}
.toast-tick{
  flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-2); color:var(--espresso);
}
.toast-tick svg{ width:16px; height:16px; }
.toast-img{ flex:none; width:46px; height:46px; border-radius:12px; object-fit:cover; }
.toast-txt{ flex:1; min-width:0; line-height:1.3; }
.toast-txt b{ display:block; font-size:14px; font-weight:700; }
.toast-txt span{ display:block; font-size:12.5px; color:#CDBBA8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast-act{
  flex:none; height:38px; padding:0 16px; border:0; border-radius:999px;
  background:var(--gold-2); color:var(--espresso); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.toast-act:hover{ background:var(--paper); }

/* ---------- search overlay ---------- */
.search-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(34,22,15,.45); backdrop-filter:blur(4px);
  display:flex; justify-content:center; align-items:flex-start; padding:80px 16px 16px;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.search-overlay.show{ opacity:1; pointer-events:auto; }
.search-box{ width:100%; max-width:640px; background:var(--paper); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.search-field{ display:flex; align-items:center; gap:12px; padding:0 14px 0 20px; border-bottom:1px solid var(--line); }
.search-field > svg{ width:20px; height:20px; color:var(--muted); flex:none; }
.search-field input{ flex:1; height:60px; border:0; background:none; font:500 17px var(--sans); color:var(--ink); outline:none; }
.search-close{ width:40px; height:40px; border:0; border-radius:50%; background:none; display:grid; place-items:center; }
.search-close svg{ width:18px; height:18px; }
.search-results{ max-height:60vh; overflow-y:auto; padding:8px; }
.search-results:empty{ display:none; }
.sr-item{ width:100%; display:flex; align-items:center; gap:14px; padding:8px; border:0; background:none; border-radius:12px; text-align:left; }
.sr-item:hover, .sr-item:focus{ background:var(--sand); outline:none; }
.sr-item img{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex:none; }
.sr-item b{ display:block; font-weight:600; font-size:14px; }
.sr-item span{ font-size:12.5px; color:var(--muted); }
.sr-empty{ padding:24px; text-align:center; color:var(--muted); }

/* ---------- quick view ---------- */
.qv{
  position:fixed; inset:0; z-index:110; background:rgba(34,22,15,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.qv.show{ opacity:1; pointer-events:auto; }
.qv-box{
  position:relative; width:100%; max-width:960px; max-height:calc(100vh - 40px); overflow:auto;
  background:var(--paper); border-radius:24px; display:grid; grid-template-columns:1.1fr 1fr;
}
.qv-close{
  position:absolute; right:14px; top:14px; z-index:3; width:40px; height:40px; border-radius:50%; border:0;
  background:var(--ivory); display:grid; place-items:center;
}
.qv-close svg{ width:18px; height:18px; }
.qv-media{ position:relative; background:var(--sand); min-height:420px; }
.qv-media > img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.qv-nav{
  position:absolute; top:50%; z-index:2; width:40px; height:40px; margin-top:-20px; border-radius:50%; border:0;
  background:rgba(255,252,247,.92); display:grid; place-items:center;
}
.qv-nav svg{ width:18px; height:18px; }
.qv-prev{ left:12px; } .qv-next{ right:12px; }
.qv-info{ padding:40px 36px; display:flex; flex-direction:column; }
.qv-info h3{ font-family:var(--serif); font-size:32px; font-weight:600; line-height:1.1; margin:6px 0 12px; }
.qv-info .price .now{ font-size:22px; }
.qv-stock{ font-size:13px; font-weight:600; margin-top:10px; color:var(--ok); }
.qv-stock.out{ color:var(--maroon); }
.qv-stock.incart{ color:var(--gold); }
.qv-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 4px; }
.qv-thumbs button{ width:58px; height:58px; padding:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); outline:2px solid transparent; outline-offset:2px; }
.qv-thumbs button.active{ outline-color:var(--ink); }
.qv-thumbs img{ width:100%; height:100%; object-fit:cover; }
.qv-info .card-actions{ padding-top:24px; }
.qv-info .card-actions button{ height:50px; }
.qv-link{ margin-top:16px; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; color:var(--muted); }

/* ---------- inner pages / WooCommerce ---------- */
.page-main{ padding:56px 0 96px; }
.entry{ background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:40px; }
.entry-title{ font-family:var(--serif); font-size:44px; font-weight:600; margin:0 0 20px; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button{
  background:var(--ink) !important; color:var(--paper) !important; border-radius:999px !important; padding:12px 22px !important;
}
.woocommerce input.input-text, .woocommerce select, .woocommerce textarea{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff;
}
.wc-main .woocommerce-breadcrumb{ font-size:12.5px; color:var(--muted); margin:0 0 22px; }
.wc-main .woocommerce-breadcrumb a{ color:var(--ink-2); }
.woocommerce div.product div.images img{ border-radius:var(--radius); }
.woocommerce div.product .product_title{ font-family:var(--serif); font-weight:600; font-size:clamp(32px,4vw,46px); line-height:1.08; margin:0 0 14px; }
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce ul.products li.product .price{ color:var(--maroon); font-weight:700; font-size:20px; }
.woocommerce span.onsale{ background:var(--maroon); min-height:auto; min-width:auto; line-height:1; padding:7px 11px; border-radius:999px; font-size:11.5px; }
.woocommerce div.product form.cart .quantity .qty{ height:46px; border:1px solid var(--line); border-radius:999px; background:var(--paper); }
.woocommerce div.product form.cart .button{ height:46px; }
.woocommerce div.product .product_meta{ font-size:13px; color:var(--muted); margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:var(--paper); border-color:var(--line); border-radius:12px 12px 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ background:var(--ivory); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--serif); font-size:20px; font-weight:600; }
.woocommerce ul.products li.product a img{ border-radius:var(--radius); }
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce-products-header__title{ font-family:var(--serif); font-weight:600; font-size:34px; }
.woocommerce-message, .woocommerce-info{ border-top-color:var(--gold); background:var(--paper); }
.woocommerce-message::before, .woocommerce-info::before{ color:var(--gold); }

/* ---------- shared bits used by mobile + desktop ---------- */
.menu-btn{ display:none; }
.card-actions .ic{ display:none; width:19px; height:19px; flex:none; }
.card-actions button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.qv-actions .card-actions{ padding-top:24px; }
.qv-actions .card-actions button{ height:50px; }

/* drawer (mobile menu) */
.drawer-backdrop{
  position:fixed; inset:0; z-index:90; background:rgba(34,22,15,.5); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.drawer-backdrop.show{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; bottom:0; left:0; z-index:95; width:min(86vw,360px);
  background:var(--ivory); display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(-102%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:20px 0 60px -30px rgba(34,22,15,.6);
}
.drawer.show{ transform:none; }
.drawer::before{
  content:""; position:absolute; inset:10px; border:1px solid var(--line); border-radius:18px; pointer-events:none;
}
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 22px 10px 26px; }
.drawer-head .brand .word{ font-size:24px; }
.drawer-nav{ display:flex; flex-direction:column; margin:6px 22px 16px; border-top:1px solid var(--line); }
.drawer-nav a{
  display:flex; align-items:center; gap:14px; padding:11px 2px;
  border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  transition:color .2s;
}
.drawer-nav a::after{ content:"→"; font-size:14px; letter-spacing:0; color:var(--gold); transition:transform .2s; }
.drawer-nav a:hover, .drawer-nav a:active{ color:var(--maroon); }
.drawer-nav a:hover::after{ transform:translateX(3px); }
.drawer-nav .dn-t{ flex:1; }
.dn-ic{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--gold-2); color:var(--gold);
}
.dn-ic svg{ width:16px; height:16px; }
.drawer-label{
  padding:8px 26px 10px; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.drawer-cats{ display:grid; gap:4px; padding:0 18px; }
.drawer-cat{
  display:flex; align-items:center; gap:14px; width:100%; padding:8px; border:0; border-radius:14px;
  background:none; text-align:left; transition:background .2s;
}
.drawer-cat:active, .drawer-cat:hover{ background:var(--sand); }
.drawer-cat-img{ width:46px; height:52px; flex:none; overflow:hidden; border-radius:999px 999px 8px 8px; background:var(--sand); border:1px solid var(--line); }
.drawer-cat-img img{ width:100%; height:100%; object-fit:cover; }
.drawer-cat-name{ flex:1; font-weight:600; font-size:15px; }
.drawer-cat-n{ font-size:12px; color:var(--muted); min-width:26px; height:22px; line-height:22px; text-align:center; border-radius:11px; background:var(--paper); border:1px solid var(--line); }
.drawer-foot{ margin-top:auto; padding:22px 26px 30px; }
.drawer-foot .foot-social .ic{ color:var(--ink); border-color:var(--line); }
.drawer-foot p{ margin:14px 0 0; font-size:12.5px; color:var(--muted); }

/* bottom app bar (mobile) */
.m-nav{ display:none; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid{ grid-template-columns:repeat(3,1fr); }
  .hero-art{ height:480px; }
  .arch-main{ height:460px; }
}

@media (max-width:860px){
  :root{ --head-h:60px; --nav-h:64px; }
  body{ padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .wrap{ padding:0 18px; }

  /* header: menu · logo · search/bag */
  .announce{ font-size:11px; letter-spacing:.08em; }
  .announce-set{ padding:7px 10px; gap:18px; }
  .head-nav{ display:none; }
  .menu-btn{ display:grid; }
  .head-bar{ grid-template-columns:42px 1fr auto; gap:6px; }
  .brand{ display:flex; justify-content:center; }
  .brand .mark{ width:30px; height:30px; }
  .brand .word{ font-size:22px; }
  .head-icons{ gap:0; }
  /* wishlist + bag live in the bottom app bar on mobile */
  .hic-wish, .hic-cart{ display:none; }
  .hic{ width:40px; height:40px; }
  .hic svg{ width:20px; height:20px; }

  /* hero: photo first, centred copy */
  .hero{ padding:18px 0 40px; }
  .hero::before{ inset:-10% -30% auto -30%; height:70%; }
  .hero-grid{ display:flex; flex-direction:column-reverse; gap:30px; }
  .hero-art{ height:400px; width:100%; max-width:360px; margin:0 auto; }
  .arch-main{ left:50%; right:auto; transform:translateX(-50%); width:72%; height:380px; outline-offset:8px; }
  .hero-mini{ width:96px; height:96px; border-width:4px; left:0; top:44px; }
  .hero-mini-2{ display:none; }
  .hero-ornament{ width:70px; right:4px; top:-6px; }
  .hero-copy{ text-align:center; }
  .hero .eyebrow{ justify-content:center; font-size:11px; }
  .hero .eyebrow::after{ content:""; width:36px; height:1px; background:currentColor; }
  .hero h1{ font-size:clamp(44px,12.5vw,58px); margin:12px 0 14px; }
  .lede{ font-size:15.5px; margin:0 auto 24px; max-width:320px; }
  .hero-cta{ justify-content:center; }
  .hero-cta .btn-solid{ width:100%; max-width:340px; height:54px; }
  .hero-cta .btn-line{ display:none; }

  /* promise: compact 2×2 tiles */
  .promise{ background:transparent; border:0; padding:0 18px; }
  .promise-grid{
    grid-template-columns:1fr 1fr; gap:10px; padding:0;
  }
  .promise-item{
    flex-direction:column; text-align:center; gap:8px; padding:16px 10px;
    background:var(--paper); border:1px solid var(--line) !important; border-radius:16px;
  }
  .promise-item svg{ width:26px; height:26px; }
  .promise-item b{ font-size:13px; }
  .promise-item span{ font-size:11.5px; }

  /* section heads */
  .sec-head{ margin-bottom:24px; }
  .sec-kicker{ font-size:10.5px; }
  .sec-head h2{ font-size:36px; margin:6px 0 10px; }

  /* categories: peeking carousel */
  .cats{ padding:52px 0 18px; }
  .cats .wrap{ padding:0; }
  .cats .sec-head{ padding:0 18px; }
  .cat-row{
    display:grid; grid-auto-flow:column; grid-auto-columns:31%; gap:12px; justify-content:start;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 18px 12px; scroll-padding:0 18px;
  }
  .cat-row .cat-item{ width:auto; }
  .cat-name{ font-size:16px; margin-top:10px; }
  .cat-count{ font-size:10px; }

  /* shop */
  .shop{ padding:36px 0 56px; }
  .shop-bar{
    position:sticky; top:var(--head-h);
    background:rgba(247,241,232,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    gap:8px; padding:10px 18px; margin-bottom:18px; margin-left:-18px; margin-right:-18px;
  }
  .chips{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin:0 -18px; padding:2px 18px; gap:6px; }
  .chip{ height:34px; padding:0 14px; font-size:12.5px; }
  .shop-tools{ justify-content:space-between; }
  .shop-count{ font-size:11.5px; letter-spacing:.04em; }
  .sort select{ height:32px; font-size:12px; }

  .grid{ grid-template-columns:repeat(2,1fr); gap:24px 12px; }
  .card-media{ border-radius:14px 14px 14px 14px; }
  .badge{ left:8px; top:8px; padding:4px 8px; font-size:10px; }
  .heart{ right:8px; top:8px; width:32px; height:32px; }
  .heart svg{ width:16px; height:16px; }
  .quick{ display:none; }
  .card-body{ padding-top:10px; }
  .card-cat{ font-size:9.5px; letter-spacing:.14em; }
  .card-name{ font-size:17px; margin:3px 0 4px; }
  .price{ gap:6px; flex-wrap:wrap; }
  .price .now{ font-size:15px; }
  .price .old{ font-size:12px; }
  .price .off{ display:none; }
  .swatches{ gap:5px; margin-top:8px; }
  .swatch{ width:24px; height:24px; }
  .card-actions{ grid-template-columns:40px 1fr; gap:6px; padding-top:10px; }
  .card-actions button{ height:40px; font-size:11px; letter-spacing:.08em; }
  .card-actions .btn-cart{ width:40px; padding:0; border-radius:50%; }
  .card-actions .btn-cart .t{ display:none; }
  .card-actions .btn-cart .ic{ display:block; }
  .card-actions .btn-cart.is-in-cart .ic{ display:none; }
  .card-actions .btn-cart.is-in-cart .ic-done{ width:19px; height:19px; }
  .card-actions .btn-cart.is-in-cart{ background:var(--gold-2); border-color:var(--gold-2); color:var(--espresso); }
  .badge-incart{ top:auto; bottom:8px; font-size:10px; padding:4px 8px; }
  .more{ margin-top:30px; }
  .more .btn{ width:100%; }

  /* promo */
  .promo{ padding:8px 0 56px; }
  .promo-inner{ grid-template-columns:1fr; padding:30px 22px 32px; gap:28px; border-radius:24px; text-align:center; }
  .promo-art{ gap:10px; padding:0 6px; }
  .promo .eyebrow{ justify-content:center; }
  .promo .eyebrow::after{ content:""; width:36px; height:1px; background:currentColor; }
  .promo-copy h2{ font-size:36px; }
  .promo-copy p{ margin:0 auto 22px; font-size:14px; }
  .promo-copy .btn{ width:100%; }

  .order{ padding-bottom:56px; }
  /* BusinessAssi's checkout brings its own white cards and was laid out for
     the full phone width — give it that instead of nesting it in ours. */
  .order-body{ padding:0; border:0; background:transparent; border-radius:0; }
  #order .elementor-widget-wrap,
  #order .elementor-element-populated{ padding:0 !important; }
  #order .elementor-container{ max-width:none !important; }

  /* footer */
  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px 20px; padding-top:44px; padding-bottom:30px; }
  .foot-brand{ grid-column:1/-1; text-align:center; }
  .foot-brand .brand{ justify-content:center; }
  .foot-brand p{ margin:12px auto 16px; }
  .foot-social{ justify-content:center; }
  .foot-col h4{ font-size:19px; }
  .foot-col ul{ font-size:13px; }
  .foot-bottom-inner{ flex-direction:column; align-items:center; text-align:center; gap:4px; padding-right:18px; font-size:11.5px; }

  /* floating buttons sit above the app bar */
  .top-btn{ right:14px; bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); width:42px; height:42px; }
  .wa-float{ right:14px; bottom:calc(var(--nav-h) + 66px + env(safe-area-inset-bottom)); width:46px; height:46px; }
  .toast{ bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); width:calc(100vw - 24px); max-width:none; }
  .toast-card{ gap:10px; }
  .toast-img{ width:40px; height:40px; }
  .toast-act{ height:34px; padding:0 12px; font-size:11px; }

  /* bottom app bar */
  .m-nav{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,252,247,.94); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
    border-top:1px solid var(--line); box-shadow:0 -10px 30px -22px rgba(42,29,22,.5);
  }
  .m-nav-item{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:0; padding:0; color:var(--ink-2);
    font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  }
  .m-nav-item svg{ width:22px; height:22px; }
  .m-nav-item:active{ color:var(--maroon); }
  .m-nav-item.on{ color:var(--maroon); }
  .m-nav-item.on svg{ fill:currentColor; }
  .m-nav-item .count{
    position:absolute; top:8px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 4px; border-radius:9px;
    background:var(--maroon); color:#fff; font-size:10px; font-weight:700; font-style:normal; line-height:17px; text-align:center;
  }
  .m-nav-item .count[data-zero="1"]{ display:none; }

  /* quick view → bottom sheet */
  .qv{ align-items:flex-end; padding:0; }
  .qv-box{
    grid-template-columns:1fr; max-width:none; max-height:92vh; border-radius:26px 26px 0 0;
    transform:translateY(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .qv.show .qv-box{ transform:none; }
  .qv-box::before{
    content:""; position:absolute; top:9px; left:50%; z-index:4; width:44px; height:5px; margin-left:-22px;
    border-radius:3px; background:rgba(255,252,247,.85);
  }
  .qv-media{ min-height:0; aspect-ratio:1/1; }
  .qv-close{ right:12px; top:14px; width:36px; height:36px; background:rgba(255,252,247,.92); }
  .qv-info{ padding:20px 20px 0; }
  .qv-info h3{ font-size:27px; }
  .qv-thumbs{ margin:16px 0 0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .qv-thumbs button{ flex:none; width:52px; height:52px; }
  .qv-link{ margin-top:12px; }
  .qv-actions{
    position:sticky; bottom:0; margin:16px -20px 0; padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,252,247,.96); border-top:1px solid var(--line);
  }
  .qv-actions .card-actions{ grid-template-columns:50px 1fr; padding-top:0; }
  .qv-actions .card-actions .btn-cart{ width:50px; }

  /* search → full screen */
  .search-overlay{ padding:0; background:var(--ivory); }
  .search-box{ max-width:none; height:100%; border-radius:0; box-shadow:none; background:var(--ivory); display:flex; flex-direction:column; }
  .search-field{ padding:6px 8px 6px 18px; background:var(--paper); }
  .search-results{ max-height:none; flex:1; padding:10px; }
}

@media (max-width:380px){
  .brand .word{ font-size:20px; }
  .hero-art{ height:360px; }
  .arch-main{ height:340px; }
  .card-name{ font-size:15.5px; }
  .card-actions button{ font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
