/* ============================================================
   VEREKET — shared styles (loaded by every page)
   Tokens, base, header/nav, footer, cart drawer, buttons.
   Page-specific CSS stays in each page's own <style>.
   ============================================================ */

:root{
  --cream:#F3EFE6;
  --dune:#E7DFCE;
  --amber-cream:#F6F5F1;
  --charcoal:#24221C;
  --charcoal-rgb:36,34,28;
  --charcoal-soft:#3A372E;
  --charcoal-muted:#6B6657;
  --moss:#4F5A3E;
  --moss-dark:#3C4530;
  --taupe:#8C8571;
  --taupe-light:#A9A290;
  --taupe-pale:#B5AE9A;
  --hairline:rgba(var(--charcoal-rgb),0.14);
  --hairline-light:rgba(250,248,242,0.28);
  --serif:'Crimson Text', Georgia, serif;
  --logo-font:'Arsenal SC', 'Crimson Text', Georgia, serif;
  --sans:'Pontano Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw:1220px;
  /* Soft studio backdrop behind product photos while they load */
  --photo-backdrop:
    radial-gradient(ellipse 60% 22% at 50% 84%, rgba(var(--charcoal-rgb),0.16) 0%, rgba(var(--charcoal-rgb),0) 100%),
    radial-gradient(ellipse 120% 90% at 50% 40%, var(--dune) 55%, rgba(var(--charcoal-rgb),0.08) 100%);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:#fff;
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;}
p, li{font-family:var(--serif);}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px;}
/* ---------- Header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 25px;
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.site-header .logo{
  font-family:var(--logo-font);
  font-weight:400;
  font-style:normal;
  font-size:1.3rem;
  line-height:1;
  letter-spacing:0.06em;
  text-decoration:none;
}
.nav-links{
  display:flex;align-items:center;gap:34px;
}
.nav-links a,.menu-toggle{
  text-decoration:none;
  font-size:0.85rem;
  line-height:1;
  color:var(--charcoal-soft);
  position:relative;
  padding-bottom:2px;
}
.nav-links a::after,.menu-toggle::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--moss);transform:scaleX(0);transform-origin:right;
  transition:transform .25s ease;
}
@media (hover:hover){
  .nav-links a:hover::after,.menu-toggle:hover::after{transform:scaleX(1);transform-origin:left;}
}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.header-actions{
  display:flex;align-items:center;gap:18px;
  font-size:0.8rem;
  line-height:1;
  color:var(--charcoal-soft);
}
.header-actions span{
  padding-left:18px;border-left:1px solid var(--hairline);
}
.header-actions span:first-of-type{padding-left:0;border-left:none;}
.menu-toggle{display:none;appearance:none;background:none;border:0;border-radius:0;margin:0;padding:0 0 2px;font-family:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;}
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:0.88rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:14px 34px;
  border-radius:2px;
  text-decoration:none;
  border:1px solid currentColor;
  transition:background .2s ease, color .2s ease;
  cursor:pointer;
}
.btn-dark{color:var(--charcoal);background:none;}
@media (hover:hover){
  .btn-dark:hover{background:var(--charcoal);color:var(--cream);}
}
/* ---------- Footer ----------
   Three-column layout (.footer-brand, .footer-contact, .footer-site) are
   flat siblings of .footer-top — a CSS grid on desktop, a wrapping flex
   row on mobile (see the two breakpoints below). No wrapper element is
   needed since both layouts read the same flat DOM order. */
footer{
  color:var(--taupe);
  padding:80px 0 6px;
}
.footer-top{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;row-gap:8px;column-gap:48px;
  padding-bottom:56px;
}
.footer-logo{font-family:var(--logo-font);font-weight:400;font-style:normal;font-size:1.9rem;letter-spacing:0.06em;}
.footer-brand{grid-column:1;grid-row:1;}
.footer-tagline{
  grid-column:2;grid-row:2;
  margin-top:69px;color:var(--taupe);font-weight:400;font-family:var(--sans);text-transform:uppercase;font-size:0.9315rem;max-width:none;white-space:nowrap;
}
.footer-subtagline{
  grid-column:2;grid-row:3;
  margin-top:6px;color:var(--taupe);font-weight:400;font-size:0.78rem;max-width:340px;
}
.footer-disclaimer{
  grid-column:2 / -1;grid-row:4;
  margin-top:90px;color:var(--taupe);font-style:italic;font-size:0.68rem;line-height:1.4;max-width:480px;
}
.footer-col h3{
  font-family:var(--sans);font-size:0.646rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--taupe);margin-bottom:18px;
}
.footer-col a, .footer-col p{
  display:block;color:var(--taupe);
  text-decoration:none;
  font-family:var(--serif);
  font-size:0.8272rem;
  line-height:1.15;
  margin-bottom:6px;
}
@media (hover:hover){
  .footer-col a:hover{text-decoration:underline;}
}
.footer-bottom{
  display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;
  padding-top:12px;font-size:0.8rem;color:rgba(var(--charcoal-rgb),0.55);
}
@media (max-width:900px){
  .nav-links{display:none;}
  .menu-toggle{display:inline-block;}
  .site-header.nav-open .nav-links{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;right:0;
    background:#fff;
    border-top:1px solid var(--hairline);
    box-shadow:0 12px 24px rgba(36,34,28,0.1);
    padding:20px 25px;
    gap:16px;
  }
  /* .footer-brand takes the full row; .footer-contact/.footer-site wrap
     onto the row below as a pair (row-gap 55px, column-gap 85px). */
  .footer-top{display:flex;flex-wrap:wrap;gap:55px 85px;padding-bottom:6px;}
  .footer-brand{flex:1 1 100%;}
  .footer-contact, .footer-site{margin-top:5px;}
  /* Tagline moves after Contact/Site (order:3 = last) and gets its own
     full-width row; text formatting itself now matches desktop. */
  .footer-tagline{order:3;flex:1 1 100%;margin-top:38px;white-space:normal;}
  /* Sits right under .footer-tagline: the flex row-gap (55px) is
     cancelled back down to a tight 8px paragraph-style spacing. */
  .footer-subtagline{
    order:4;
    flex:1 1 100%;
    margin-top:-47px;
    max-width:310px;
  }
  .footer-disclaimer{order:5;flex:1 1 100%;margin-top:31px;max-width:480px;}
}
@media (min-width:901px){
  /* Nudge the brand block and the Contact/Site columns further right
     than the grid's own tracks place them, while keeping the gap
     between Contact and Site the same (both shift by a fixed amount). */
  .footer-brand{margin-left:-90px;}
  .footer-top{padding-bottom:0;}
  .footer-tagline, .footer-subtagline, .footer-disclaimer, .footer-contact{margin-left:150px;}
  .footer-site{margin-left:50px;}
  /* .wrap is centered with max-width:var(--maxw), so on wide screens
     there's extra auto-margin outside it beyond its own padding. This
     cancels just that extra gap so the copyright line's right edge
     tracks the real viewport edge instead of .wrap's inner edge. */
  .footer-bottom{margin-right:calc(-1 * max(0px, (100vw - var(--maxw)) / 2));}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}
/* ---------- Cart drawer (visual style ported from the old homepage) ---------- */
#drawer-overlay, #drawer{
  font-family: "Helvetica Neue", Arial, sans-serif;
}
#drawer-overlay, #drawer *{
  box-sizing:border-box;
}
#drawer-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.3);
  z-index:300;
}
#drawer-overlay.open{ display:block; }
#drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:414px;
  max-width:90vw;
  background:#ffffff;
  z-index:301;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s ease;
}
#drawer.open{ transform:translateX(0); }
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 24px;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.drawer-head p{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0;
  font-family:inherit;
}
.drawer-close{
  all:unset;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.drawer-body{
  flex:1;
  /* Without this, a flex child's default min-height:auto stops it
     from shrinking below its own content size — so instead of
     scrolling internally, it just grows past #drawer's fixed-height
     box (top:0/bottom:0) and overflow-y:auto never gets a chance to
     kick in. */
  min-height:0;
  overflow-y:auto;
  padding:20px 24px;
}
.state-msg{
  font-size:12px;
  color:rgba(33,31,27,.5);
  padding:40px 0;
  font-family:inherit;
}
.line-item{
  position:relative;
  display:flex;
  gap:12px;
  padding:18px 28px 18px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  min-height:146px;
}
.line-item img{
  width:75px;
  object-fit:cover;
  flex:none;
  /* No explicit height — stretches to fill the row's full
     non-padding height (146 - 18 - 18 = 110px) via the flex
     container's default align-items:stretch, so the photo always
     extends edge-to-edge vertically regardless of the row height. */
}
.line-item .meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.line-item .meta h4{
  font-size:12.5px;
  font-weight:500;
  margin:0 0 4px;
  font-family:inherit;
}
.line-item .meta .qty{
  font-size:11px;
  color:rgba(33,31,27,.5);
  font-family:inherit;
}
.line-bottom-group{
  /* Pushes this whole group (limit message + qty row) down to the
     bottom of the card as one unit, away from the product name/
     variant text above — margin-top:auto on line-bottom-row alone
     wouldn't move the message with it, since the message would be
     a separate sibling with no auto margin of its own. */
  margin-top:auto;
}
.line-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.qty-stepper{
  display:flex;
  align-items:center;
  gap:10px;
}
.line-subtotal{
  font-size:11px;
  color:rgba(33,31,27,.45);
}
.qty-btn{
  all:unset;
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:rgba(33,31,27,.6);
  cursor:pointer;
  border-radius:2px;
  transition:background .15s, color .15s;
  line-height:1;
}
@media (hover:hover){
  .qty-btn:hover{ background:rgba(0,0,0,.08); color:#211f1b; }
}
.qty-value{
  font-size:12px;
  min-width:16px;
  text-align:center;
}
.line-item .remove{
  all:unset;
  box-sizing:border-box;
  position:absolute;
  top:12px;
  right:0;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(33,31,27,.4);
  cursor:pointer;
  border-radius:2px;
}
.remove-icon{
  width:12px;
  height:12px;
  display:block;
}
.line-limit-msg{
  font-size:10px;
  line-height:1.2;
  color:#b3261e;
  margin-bottom:6px;
  font-family:var(--sans);
  /* Always in the flow (never display:none), so this box's height
     is reserved whether or not a message is currently showing —
     toggling .show just switches visibility, which never changes
     layout or shifts the qty stepper below it. */
  visibility:hidden;
}
.line-limit-msg.show{
  visibility:visible;
}
.drawer-foot{
  padding:20px 24px;
  border-top:1px solid rgba(0,0,0,.1);
}
.drawer-foot .subtotal{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:14px;
  font-family:inherit;
}
.checkout-btn{
  all:unset;
  box-sizing:border-box;
  display:block;
  width:100%;
  text-align:center;
  background:#211f1b;
  color:#fff;
  padding:13px 0;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.shop-card{display:flex;flex-direction:column;}