/* ==========================================================================
   GLYRA — Theme layer
   Applies the clean/editorial storefront design on top of style.css.
   Loaded AFTER style.css, so it only overrides presentation — no HTML,
   JS, data or API changes. Every data-c hook keeps working, so the admin
   Customize page still drives all copy.

   Palette is Glyra's own: sage #5F6E4F, ivory #FAF6EF, gold #C39A5B.
   ========================================================================== */

:root{
  /* tinted blocks used behind product tiles + banners */
  --t-sage:        #5F6E4F;
  --t-sage-dk:     #3F4A34;
  --t-sage-lt:     #A8B594;
  --t-sage-wash:   #E4E9DC;
  --t-sage-mist:   #F0F3EB;
  --t-ivory:       #FAF6EF;
  --t-ivory-dp:    #F1EBDD;
  --t-gold:        #C39A5B;
  --t-gold-wash:   #F2E6D2;
  --t-blush:       #E7C3B4;
  --t-blush-wash:  #F7E8E2;
  --t-ink:         #22241F;

  /* the design's button signature */
  --t-track:       3px;
}

/* ==========================================================================
   BUTTONS — square, uppercase, wide tracking
   ========================================================================== */
.btn,
.btn-primary,
.btn-outline,
.btn-light{
  border-radius:0 !important;
  text-transform:uppercase;
  letter-spacing:var(--t-track);
  font-size:.8125rem;
  font-weight:500;
  padding:14px 28px;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-primary{
  background:var(--t-sage);
  color:#fff;
  border:1px solid var(--t-sage);
}
.btn-primary:hover{background:var(--t-sage-dk);border-color:var(--t-sage-dk)}
.btn-outline{
  background:transparent;
  color:var(--t-ink);
  border:1px solid var(--t-ink);
}
.btn-outline:hover{background:var(--t-ink);color:var(--t-ivory)}
.btn svg{width:16px;height:16px}

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.announce-bar{
  background:var(--t-sage);
  color:#fff;
  padding:9px 0;
  font-size:.75rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.announce-bar .announce-track span{opacity:.95}

/* ==========================================================================
   HEADER — centred wordmark, square feel
   ========================================================================== */
.navbar{
  background:#fff;
  border-bottom:1px solid rgba(34,36,31,.1);
  box-shadow:none;
}
.navbar-inner{
  display:grid;
  /* minmax(0,1fr) so the side tracks stay equal and the wordmark sits
     dead-centre even when the nav list is wider than the actions */
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:20px;
  min-height:84px;
}
.navbar .logo{grid-column:2;justify-self:center}
.navbar .logo-img{height:34px}
.nav-links{grid-column:1;justify-self:start;gap:26px}
.nav-link{
  font-size:.75rem;
  letter-spacing:2px;
  text-transform:uppercase;
  position:relative;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:-6px;
  width:100%;height:1px;background:var(--t-sage);
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s ease;
}
.nav-link:hover::after{transform:scaleX(1);transform-origin:left}
.nav-actions{grid-column:3;justify-self:end;gap:6px}
.nav-actions .icon-btn{width:44px;height:44px;border-radius:0}
.nav-actions .icon-btn svg{width:20px;height:20px}

/* ==========================================================================
   HERO — pure banner, no overlaid copy
   ========================================================================== */
/* index.html carries these rules in an inline <style> block, which wins on
   cascade order — hence !important here. The banner is now the whole hero:
   no overlaid copy, so nothing needs a readability scrim. */
.hero-photo .hero-copy,
.hero-photo .hero-photo-inner{display:none !important}

.hero.hero-photo{
  min-height:0 !important;
  padding:0 !important;
  display:block !important;
  background:var(--t-sage-mist);
  position:relative;
  overflow:hidden;
}
.hero-photo .hero-photo-pic{display:block !important;width:100%}
.hero-photo .hero-photo-img{
  position:static !important;
  inset:auto !important;
  display:block;
  width:100%;
  height:clamp(320px,42vw,560px) !important;
  object-fit:cover;
  /* --focus-x/--focus-y are set from the admin Banner page — keep them */
  object-position:var(--focus-x,50%) var(--focus-y,50%);
}
.hero-photo::before,
.hero-photo::after{display:none !important}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-section{
  background:var(--t-sage-wash);
  padding:15px 0;
  border-top:0;border-bottom:0;
}
.marquee-track span{
  font-size:.8125rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--t-sage-dk);
  font-family:var(--font-display);
}
.marquee-track span::after{
  content:"✦";
  margin:0 26px;
  opacity:.45;
  letter-spacing:0;
}

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */
.section-title{
  text-transform:uppercase;
  letter-spacing:3.5px;
  font-weight:400;
}
.section-title .italic,
.section-title em{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  text-transform:lowercase;
  letter-spacing:0;
  color:var(--t-sage);
}
.eyebrow{
  letter-spacing:4px;
  text-transform:uppercase;
  font-size:.6875rem;
  color:var(--t-sage);
}
.section-sub{color:var(--color-text-muted)}

/* ==========================================================================
   PRODUCT CARDS — tinted square tiles
   ========================================================================== */
/* class names come from the catalog.js renderer — cards are built at runtime
   from the admin's product data, so this is styling only. */
.product-card{
  border-radius:0 !important;
  background:transparent;
  box-shadow:none !important;
  overflow:visible;
  border:0;
  position:relative;
}

/* square tinted tile behind the bottle, rotating through the brand washes */
.product-card-visual{
  border-radius:0 !important;
  background:var(--t-sage-mist);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  margin-bottom:14px;
}
.product-card:nth-child(3n+2) .product-card-visual{background:var(--t-gold-wash)}
.product-card:nth-child(3n+3) .product-card-visual{background:var(--t-blush-wash)}

/* square product PHOTOS, not cut-outs — fill the tile, no padding, no blend */
.product-card-visual img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.product-card:hover .product-card-visual img{transform:scale(1.04)}
.product-card-visual.is-bundle{display:grid;grid-template-columns:1fr 1fr;place-items:stretch}
.product-card-visual.is-bundle img{width:100%;height:100%;object-fit:cover}

/* badge — square, top-left, like the design's product flags */
.product-card-tag{
  position:absolute;top:12px;left:12px;z-index:3;
  border-radius:0 !important;
  background:#fff;
  color:var(--t-ink);
  font-size:.625rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
  padding:5px 10px;
  font-weight:500;
}
.product-card-tag.tag-new{background:var(--t-sage);color:#fff}
.product-card-tag.tag-sale{background:var(--t-gold);color:#fff}

/* quick-add reveals on hover, centred over the tile */
.product-card-quick{
  position:absolute;left:50%;top:calc(50% - 40px);
  transform:translate(-50%,10px);
  opacity:0;z-index:4;
  width:46px;height:46px;
  border-radius:0;
  background:var(--t-ink);
  color:#fff;
  display:grid;place-items:center;
  transition:opacity .25s ease,transform .25s ease,background .25s ease;
}
.product-card:hover .product-card-quick{opacity:1;transform:translate(-50%,0)}
.product-card-quick:hover{background:var(--t-sage)}
.product-card-quick svg{width:19px;height:19px}

.product-card-link{display:block}
.product-card-link h3,
.product-card-meta h3{
  font-size:1rem;
  letter-spacing:.5px;
  margin:0 0 4px;
  font-weight:400;
}
.product-card-meta{
  font-size:.6875rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--color-text-muted);
  line-height:1.55;
}
.product-price{
  display:inline-block;
  font-size:.875rem;
  letter-spacing:.5px;
  margin-top:8px;
  color:var(--t-ink);
}
.price-compare{color:var(--color-text-muted);margin-left:6px}
.product-rating{
  font-size:.6875rem;
  letter-spacing:1px;
  color:var(--t-gold);
}
.product-rating svg{width:12px;height:12px;vertical-align:-1px;margin-right:3px}

.product-card-buy{
  border-radius:0 !important;
  background:var(--t-sage);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:var(--t-track);
  font-size:.6875rem;
  padding:12px 18px;
  margin-top:12px;
}
.product-card-buy:hover{background:var(--t-sage-dk)}

/* ==========================================================================
   BANDS — alternate ivory / sage wash instead of rounded cards
   ========================================================================== */
.philosophy,
.testimonials{background:var(--t-ivory-dp)}
.ingredients{background:var(--t-sage-dk)}
.promo-banner{background:var(--t-sage-wash)}

.philosophy-card,
.testi-card,
.ing-card,
.collection-card,
.blog-card{border-radius:0}

.testi-card{background:#fff;box-shadow:none;border:1px solid rgba(34,36,31,.08)}
.testi-avatar{border-radius:50%;background:var(--t-sage);color:#fff}

/* ==========================================================================
   NEWSLETTER + FOOTER
   ========================================================================== */
.newsletter{background:var(--t-sage-mist)}
.newsletter input{border-radius:0;border:1px solid rgba(34,36,31,.18)}
.newsletter button{border-radius:0}

.footer{background:var(--t-ivory-dp);color:var(--t-ink)}
.footer a{color:var(--t-ink)}
.footer a:hover{color:var(--t-sage)}
.footer h4,
.footer .footer-col h4{
  font-size:.6875rem;
  letter-spacing:2.4px;
  text-transform:uppercase;
}
.footer-bottom{border-top:1px solid rgba(34,36,31,.12);font-size:.75rem}

/* ==========================================================================
   TRUST BADGES (ingredients band tiles)
   ========================================================================== */
.ing-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(247,242,231,.14);
}
.ing-card h3{
  font-size:.8125rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--color-text-inverse);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .navbar-inner{grid-template-columns:auto 1fr auto;min-height:68px}
  .nav-links{display:none}
  .navbar .logo{grid-column:2;justify-self:center}
  .nav-actions{grid-column:3}
  .navbar .logo-img{height:28px}
}

@media (max-width:600px){
  .hero-photo-img{height:clamp(260px,72vw,420px)}
  .btn,.btn-primary,.btn-outline{padding:14px 22px;font-size:.75rem;letter-spacing:2px}
  .marquee-track span{font-size:.75rem;letter-spacing:3px}
  .marquee-track span::after{margin:0 16px}
}

@media (prefers-reduced-motion:reduce){
  .product-card:hover img{transform:none}
}