/* ==========================================================================
   GLYRA — Home layout
   The storefront layout: announcement bar, centred-logo header with mega
   menu, image-only banner slider, routine tabs, carousels, value sets,
   coming-soon, loved-this-month, trust badges.
   Palette is Glyra's own (sage / ivory / gold).
   ========================================================================== */

:root{
  --g-sage:#5F6E4F; --g-sage-dk:#3F4A34; --g-sage-lt:#A8B594;
  --g-wash:#E4E9DC; --g-mist:#F0F3EB;
  --g-ivory:#FAF6EF; --g-ivory-dp:#F1EBDD;
  --g-gold:#C39A5B; --g-gold-wash:#F2E6D2;
  --g-blush:#E7C3B4; --g-blush-wash:#F7E8E2;
  --g-ink:#22241F; --g-muted:#6B6A5F; --g-line:rgba(34,36,31,.12);
  --g-wrap:1360px; --g-pad:clamp(16px,4vw,48px);
}

[hidden]{display:none !important}
body{background:#fff;overflow-x:hidden}

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.announce-bar{
  background:var(--g-sage);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:9px var(--g-pad);
}
.ann-viewport{overflow:hidden;max-width:520px;width:100%}
.announce-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);animation:none}
.announce-track span{
  flex:0 0 100%;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  font-size:.75rem;letter-spacing:1.6px;text-transform:uppercase;
}
.ann-arrow{font-size:20px;line-height:1;opacity:.7;color:#fff;background:none;border:0;cursor:pointer;padding:0 4px}
.ann-arrow:hover{opacity:1}

/* ==========================================================================
   HEADER
   ========================================================================== */
.navbar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--g-line);box-shadow:none}
.navbar-inner{
  max-width:var(--g-wrap);margin:0 auto;padding:0 var(--g-pad);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:20px;min-height:86px;
}
.navbar .logo{grid-column:2;justify-self:center}
/* The logo is white lettering on a #303030 plate. contrast(5) snaps the plate
   to pure black and the lettering to pure white; invert(1) then flips that to
   black type on a white plate, which disappears into the white header. */
.navbar .logo-img{height:30px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links:first-child{grid-column:1;justify-self:start}
.nav-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:26px}
.nav-item{position:static}
.nav-link{
  font-size:.75rem;letter-spacing:2px;text-transform:uppercase;
  padding:32px 0;display:block;position:relative;color:var(--g-ink);
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:24px;width:100%;height:1px;
  background:var(--g-sage);transform:scaleX(0);transform-origin:right;
  transition:transform .3s ease;
}
.nav-item:hover .nav-link::after{transform:scaleX(1);transform-origin:left}
.nav-actions{display:flex;align-items:center;gap:6px}
.nav-actions .icon-btn{width:44px;height:44px;border-radius:0;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--g-ink)}
.nav-actions .icon-btn svg{width:20px;height:20px}
.nav-toggle{display:none !important}

/* the panel sits at translateY(-100%), so its bottom edge lands exactly on
   y=0 and can bleed over the sticky header — keep it out of paint until open */
.mobile-nav{visibility:hidden;pointer-events:none}
.mobile-nav.is-open{visibility:visible;pointer-events:auto}
.mobile-nav-links a{
  font-size:1.125rem !important;
  letter-spacing:2px;text-transform:uppercase;
}

/* mega menu */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--g-line);
  box-shadow:0 20px 40px rgba(34,36,31,.07);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:70;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{
  max-width:var(--g-wrap);margin:0 auto;padding:40px var(--g-pad) 46px;
  display:grid;grid-template-columns:repeat(3,1fr) 260px;gap:40px;
}
.mega-col h4{
  font-size:.6875rem;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--g-muted);margin-bottom:16px;padding-bottom:10px;
  border-bottom:1px solid var(--g-line);font-weight:600;
}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col li a{display:block;padding:6px 0;font-size:.875rem;color:var(--g-ink);transition:padding-left .2s,color .2s}
.mega-col li a:hover{padding-left:8px;color:var(--g-sage)}
.is-soon>a,.is-soon-link{color:var(--g-muted) !important}
.soon-pill{
  display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 8px;
  border-radius:20px;background:var(--g-wash);color:var(--g-sage-dk);
  font-size:.5625rem;letter-spacing:1.4px;text-transform:uppercase;line-height:1.8;
}
.mega-promo-img{aspect-ratio:1;background:var(--g-mist);display:grid;place-items:center;margin-bottom:14px;padding:14%}
.mega-promo-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mega-promo p{font-size:.8125rem;margin:0 0 12px}

/* ==========================================================================
   BANNER — image only
   ========================================================================== */
.banner{position:relative;overflow:hidden;background:var(--g-mist)}
/* align-items:flex-start is load-bearing: the flex default (stretch) let the
   tallest slide set the height for all of them, so a square image made the
   whole banner square and every slide rendered a different size. */
.banner-track{
  display:flex;
  align-items:flex-start;
  transition:transform .7s cubic-bezier(.45,0,.15,1);
}
/* ONE fixed banner box for every slide, whatever the artwork's own ratio is.
   The ratio matches hero-banner.jpg (1920x1086) so that one shows uncropped;
   other images fill the same box via cover, keeping the size consistent. */
.banner-slide{
  flex:0 0 100%;
  aspect-ratio:1920/1086;
  background:var(--g-mist);
  overflow:hidden;
}
.banner-slide img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  /* --focus-x/--focus-y come from the admin Banner page */
  object-position:var(--focus-x,50%) var(--focus-y,50%);
}
.banner-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.8);font-size:24px;line-height:1;
  display:grid;place-items:center;color:var(--g-ink);
}
.banner-nav:hover{background:#fff}
.banner-prev{left:14px}
.banner-next{right:14px}
.banner-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.banner-dots button{width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;background:rgba(34,36,31,.3);transition:.2s}
.banner-dots button.is-active{background:var(--g-ink);width:22px;border-radius:4px}

/* ==========================================================================
   STARS BAND
   ========================================================================== */
.stars-band{position:relative;max-width:var(--g-wrap);margin:0 auto;padding:74px var(--g-pad);text-align:center}
.stars-text{font-size:clamp(24px,4vw,50px);line-height:1.25;max-width:820px;margin:0 auto;font-weight:400}
.stars-text em{font-family:Georgia,serif;font-style:italic;color:var(--g-sage)}
.star{
  position:absolute;width:40px;height:40px;background:var(--g-sage-lt);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:tw 4s ease-in-out infinite;
}
.star-a{background:var(--g-sage-lt);left:6%;top:22%}
.star-b{background:var(--g-gold);left:14%;bottom:18%;width:26px;height:26px;animation-delay:.6s}
.star-c{background:var(--g-blush);left:3%;bottom:36%;width:20px;height:20px;animation-delay:1.2s}
.star-d{background:var(--g-gold);right:6%;top:18%;width:32px;height:32px;animation-delay:.3s}
.star-e{background:var(--g-sage-lt);right:14%;bottom:16%;width:24px;height:24px;animation-delay:.9s}
.star-f{background:var(--g-blush);right:3%;bottom:38%;width:18px;height:18px;animation-delay:1.5s}
@keyframes tw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(12deg)}}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{max-width:var(--g-wrap);margin:0 auto;padding:66px var(--g-pad)}
.sec-title{
  text-align:center;font-size:clamp(22px,3vw,34px);
  letter-spacing:4px;text-transform:uppercase;margin:0 0 32px;font-weight:400;
}
.sec-title em{font-family:Georgia,serif;font-style:italic;text-transform:lowercase;letter-spacing:0;color:var(--g-sage)}
.sec-title-script{font-family:Georgia,serif;font-style:italic;text-transform:lowercase;letter-spacing:0;color:var(--g-sage);font-size:clamp(28px,4vw,44px)}
.sec-eyebrow{text-align:center;font-size:.75rem;letter-spacing:4px;text-transform:uppercase;color:var(--g-muted);margin:0 0 8px}

/* tabs */
.tabs{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:34px}
.tab{
  padding:12px 26px;font-size:.8125rem;letter-spacing:2.5px;text-transform:uppercase;
  border:1px solid var(--g-line);background:#fff;cursor:pointer;color:var(--g-ink);
  transition:background .22s,border-color .22s,color .22s;
}
.tab:hover{border-color:var(--g-ink)}
.tab.is-active{background:var(--g-sage);border-color:var(--g-sage);color:#fff}

/* carousel */
.carousel{position:relative}
.car-rail{
  display:flex;gap:22px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 2px 26px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.car-rail::-webkit-scrollbar{display:none}
.car-nav{
  position:absolute;top:34%;z-index:4;width:40px;height:40px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;box-shadow:0 3px 14px rgba(34,36,31,.16);
  font-size:22px;line-height:1;display:grid;place-items:center;color:var(--g-ink);
  transition:transform .2s;
}
.car-nav:hover{transform:scale(1.08)}
.car-prev{left:-14px}
.car-next{right:-14px}
.rail-empty{
  flex:1;text-align:center;padding:48px 0;color:var(--g-muted);
  font-size:.8125rem;letter-spacing:2px;text-transform:uppercase;
}

/* ==========================================================================
   PRODUCT CARD (rendered by home.js from GlyraCatalog)
   ========================================================================== */
.pcard{flex:0 0 clamp(230px,23vw,290px);scroll-snap-align:start;display:flex;flex-direction:column;position:relative}
/* product shots are square PHOTOS with their own background, not cut-outs —
   so they fill the tile edge to edge. No padding and no multiply blend:
   both made the photo read as a smaller box pasted inside the tile. */
.pcard-media{
  position:relative;aspect-ratio:1;background:var(--g-mist);
  display:grid;place-items:center;overflow:hidden;margin-bottom:14px;
}
.pcard:nth-child(3n+2) .pcard-media{background:var(--g-gold-wash)}
.pcard:nth-child(3n+3) .pcard-media{background:var(--g-blush-wash)}
.pcard-media img{
  width:100%;height:100%;
  object-fit:cover;           /* square photo in a square tile = no crop */
  transition:transform .5s ease;
}
.pcard:hover .pcard-media img{transform:scale(1.04)}
/* bundles show both bottles, centred and filling the tile */
.pcard-media.is-bundle{display:grid;grid-template-columns:1fr 1fr;gap:0;place-items:stretch}
.pcard-media.is-bundle img{width:100%;height:100%;object-fit:cover}
.pcard-badge{
  position:absolute;top:12px;left:12px;z-index:3;background:#fff;color:var(--g-ink);
  padding:5px 10px;font-size:.625rem;letter-spacing:1.6px;text-transform:uppercase;
}
.pcard-badge.is-new{background:var(--g-sage);color:#fff}
.pcard-badge.is-sale{background:var(--g-gold);color:#fff}
.pcard-buy{
  position:absolute;left:50%;bottom:14px;transform:translate(-50%,14px);
  opacity:0;z-index:3;transition:opacity .25s,transform .25s;
  background:var(--g-ink);color:#fff;border:0;cursor:pointer;
  padding:11px 20px;font-size:.6875rem;letter-spacing:2px;text-transform:uppercase;
}
.pcard:hover .pcard-buy{opacity:1;transform:translate(-50%,0)}
.pcard-buy:hover{background:var(--g-sage)}
.pcard-name{font-size:1rem;letter-spacing:.5px;margin:0 0 4px;font-weight:400;color:var(--g-ink)}
.pcard-sub{font-size:.6875rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--g-muted);margin:0 0 10px;min-height:30px;line-height:1.45}
.pcard-price{font-size:.875rem;margin-bottom:12px;color:var(--g-ink)}
.pcard-price s{color:var(--g-muted);margin-left:6px}
.pcard-cta{
  margin-top:auto;align-self:flex-start;background:var(--g-sage);color:#fff;
  border:0;cursor:pointer;padding:12px 20px;
  font-size:.6875rem;letter-spacing:2px;text-transform:uppercase;
}
.pcard-cta:hover{background:var(--g-sage-dk)}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-section{background:var(--g-wash);padding:16px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;gap:26px;animation:mq 32s linear infinite}
.marquee-section:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-size:.8125rem;letter-spacing:4px;text-transform:uppercase;color:var(--g-sage-dk)}
.marquee-track span::after{content:"·";margin-left:26px;opacity:.4}
@keyframes mq{to{transform:translateX(-50%)}}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews{background:var(--g-ivory);max-width:none}
.reviews .carousel{max-width:var(--g-wrap);margin:0 auto}
.review{flex:0 0 clamp(260px,27vw,340px);scroll-snap-align:start;background:#fff;padding:28px 26px 30px;display:flex;flex-direction:column;border:1px solid var(--g-line)}
.review-prod{font-size:.6875rem;letter-spacing:2px;text-transform:uppercase;color:var(--g-sage);margin:0 0 10px}
.review-stars{color:var(--g-gold);letter-spacing:3px;margin-bottom:12px;font-size:.875rem}
.review-text{font-size:.875rem;line-height:1.7;margin:0 0 18px;flex:1;color:var(--g-ink)}
.review-who{font-size:.75rem;letter-spacing:2px;text-transform:uppercase;color:var(--g-muted);margin:0}

/* ==========================================================================
   VALUE SETS
   ========================================================================== */
/* auto-fit + centred so the row still reads well when there are
   fewer bundles than columns */
/* full-width promo banner — the image is shown whole (height follows its own
   ratio), so any artwork dropped in here fits without being cropped */
.promo{display:block;background:var(--g-mist)}
.promo-link{display:block;line-height:0}
.promo-link img{display:block;width:100%;height:auto}

/* ==========================================================================
   COMING SOON
   ========================================================================== */
.soon{background:var(--g-ivory);max-width:none}
.soon>*{max-width:var(--g-wrap);margin-left:auto;margin-right:auto}
.soon-intro{text-align:center;max-width:560px;margin:-16px auto 38px;font-size:.9375rem;line-height:1.8;color:var(--g-muted)}
.soon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:900px}
.soon-card{background:#fff;padding:0 0 30px;display:flex;flex-direction:column;text-align:center;border:1px solid var(--g-line)}
.soon-media{position:relative;aspect-ratio:16/10;display:grid;place-items:center;margin-bottom:22px}
.sw-sage{background:var(--g-mist)}
.sw-gold{background:var(--g-gold-wash)}
.soon-mark{font-family:Georgia,serif;font-style:italic;font-size:1.75rem;color:var(--g-sage);opacity:.55}
.soon-badge{position:absolute;top:12px;left:12px;background:var(--g-ink);color:#fff;padding:5px 10px;font-size:.625rem;letter-spacing:1.6px;text-transform:uppercase}
.soon-card h3{font-size:1.375rem;letter-spacing:.5px;margin:0 26px 6px;font-weight:400}
.soon-sub{font-size:.65rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--g-sage);margin:0 26px 14px}
.soon-copy{font-size:.875rem;line-height:1.75;color:var(--g-muted);margin:0 26px 22px;flex:1}
.soon-card .btn{align-self:center}
.soon-form{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:38px}
.soon-form input{width:min(330px,100%);padding:13px 16px;border:1px solid var(--g-line);background:#fff;font:inherit;font-size:.875rem}
.soon-form input:focus{outline:0;border-color:var(--g-sage)}
.soon-msg{text-align:center;margin:14px 0 0;font-size:.8125rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--g-sage)}
.btn.is-done{background:var(--g-wash) !important;border-color:var(--g-wash) !important;color:var(--g-sage-dk) !important;cursor:default}

/* ==========================================================================
   LOVED THIS MONTH
   ========================================================================== */
.loved{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.loved-media{background:var(--g-wash);display:grid;place-items:center;min-height:clamp(340px,40vw,520px);overflow:hidden}
.loved-media img{width:100%;height:100%;object-fit:cover}
.loved-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,80px)}
.loved-body .sec-eyebrow{text-align:left;margin-bottom:14px}
.loved-name{font-size:clamp(24px,3.2vw,38px);margin:0 0 10px;font-weight:400}
.loved-tag{font-size:.6875rem;letter-spacing:2.6px;text-transform:uppercase;color:var(--g-muted);margin:0 0 20px}
.loved-copy{font-size:.9375rem;line-height:1.75;margin:0 0 22px;max-width:480px;color:var(--g-ink)}
.loved-price{font-size:1.25rem;margin-bottom:24px}
.loved-body .btn{align-self:flex-start}

/* ==========================================================================
   TRUST BADGES
   ========================================================================== */
.badges{max-width:var(--g-wrap);margin:0 auto;padding:56px var(--g-pad);display:grid;grid-template-columns:repeat(6,1fr);gap:22px;text-align:center}
.badge-ic{
  display:grid;place-items:center;
  width:62px;height:62px;margin:0 auto 12px;
  border-radius:50%;background:var(--g-wash);color:var(--g-sage-dk);
}
.badge-ic svg{width:24px;height:24px}
.badge p{margin:0;font-size:.65rem;letter-spacing:2px;text-transform:uppercase;line-height:1.5;color:var(--g-ink)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--g-ivory-dp);color:var(--g-ink);padding-top:60px}
.footer a{color:var(--g-ink)}
.footer a:hover{color:var(--g-sage)}
/* footer sits on ivory, so the same inversion applies */
.footer .logo-img{height:26px}
.footer h5{font-size:.6875rem;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:16px}
.footer-bottom{border-top:1px solid var(--g-line);font-size:.75rem;color:var(--g-muted)}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,90px);
  background:var(--g-ink);color:#fff;padding:13px 24px;
  font-size:.8125rem;letter-spacing:1.6px;text-transform:uppercase;
  z-index:120;opacity:0;transition:transform .3s,opacity .3s;pointer-events:none;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1240px){ .nav-links-end{display:none} }

@media (max-width:980px){
  .navbar-inner{grid-template-columns:auto 1fr auto;min-height:70px}
  .nav-links:first-child{display:none}
  .nav-toggle{display:grid !important}
  .navbar .logo-img{height:28px}
  .soon-grid{grid-template-columns:1fr;gap:26px}
  .soon-form input{width:100%}
  .loved{grid-template-columns:1fr}
  .loved-body{text-align:center}
  .loved-body .sec-eyebrow{text-align:center}
  .loved-body .btn{align-self:center}
  .loved-copy{margin-left:auto;margin-right:auto}
  .banner-nav{display:none}
  .badges{grid-template-columns:repeat(3,1fr);gap:30px}
  .car-prev{left:-6px}
  .car-next{right:-6px}
}

@media (max-width:600px){
  .star-c,.star-f{display:none}
  .badges{grid-template-columns:repeat(2,1fr)}
  .sec{padding:46px var(--g-pad)}
  .pcard{flex:0 0 74vw}
  .review{flex:0 0 82vw}
  .ann-arrow{display:none}
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tab{padding:14px 10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}