/* ==========================================================================
   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)}
/* style.css lays .product-card-visual.is-bundle out as two half-width
   images; cards now stack their shots instead (see .pcard-shot in
   layout.css), so that rule has nothing left to match. */
.product-card-visual .pcard-shot{position:absolute;inset:0;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)}

/* ==========================================================================
   PRODUCT PAGE — gallery
   style.css sizes .spotlight-duo img at 48% wide / 88% tall because that block
   was built for two bottles side by side. A single square photo landed in that
   narrow slot and `cover` sliced it in half. Square tile, square photo, no crop.
   ========================================================================== */
/* The frame itself is the square tile. style.css gave it aspect-ratio 1/1.05
   and a radial gradient; as a flex parent it was also squashing the child, so
   setting the ratio on the inner block alone did nothing. */
.product-page .spotlight-visual{
  aspect-ratio:1;
  display:block;
  padding:0;
  border-radius:0;
  background:var(--t-sage-mist);
  overflow:hidden;
}
.product-page .spotlight-duo{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  align-items:stretch;
  gap:0;
  overflow:hidden;
}
.product-page .spotlight-duo img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;
}
.product-page .spotlight-duo:hover img{transform:none}

/* Thumbnails sit under the square tile, not inside it — .spotlight-visual
   clips its overflow, so anything placed in there was cut off. */
.pgallery-thumbs{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;
}
.pgallery-thumb{
  width:72px;height:72px;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--t-line,rgba(34,36,31,.14));background:var(--t-sage-mist);
  transition:border-color .2s,opacity .2s;opacity:.75;
}
.pgallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pgallery-thumb:hover{opacity:1}
.pgallery-thumb.is-active{opacity:1;border-color:var(--g-ink,#22241f);border-width:2px}
@media (max-width:760px){
  .pgallery-thumb{width:58px;height:58px}
}

/* ==========================================================================
   MAKE A PAIR — this product + one suggestion, bought together
   ========================================================================== */
.pair{margin-top:64px}
.pair-row{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid rgba(34,36,31,.12);padding:20px;background:#fff;
}
.pair-item{
  display:flex;align-items:center;gap:14px;flex:1 1 220px;min-width:0;
  color:inherit;text-decoration:none;
}
.pair-thumb{
  flex:0 0 78px;width:78px;height:78px;overflow:hidden;background:var(--t-sage-mist);
}
.pair-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pair-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.pair-text strong{font-weight:500;font-size:.9375rem;line-height:1.3}
.pair-text span{font-size:.8125rem;color:var(--g-muted,#6b6f66)}
.pair-item:hover .pair-text strong{text-decoration:underline}
.pair-plus{font-size:1.5rem;color:var(--g-muted,#6b6f66);flex:0 0 auto}
.pair-total{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  flex:0 0 auto;padding-left:18px;border-left:1px solid rgba(34,36,31,.12);
}
.pair-total-label{
  font-size:.625rem;letter-spacing:2px;text-transform:uppercase;color:var(--g-muted,#6b6f66);
}
.pair-total-price{font-size:1.125rem}
@media (max-width:760px){
  .pair-row{flex-direction:column;align-items:stretch;gap:14px}
  /* flex-basis is the HEIGHT once the row turns into a column, so the 220px
     basis above was stretching each item into a 220px-tall block */
  .pair-item{flex:0 0 auto}
  .pair-plus{align-self:center;line-height:1}
  .pair-total{
    padding-left:0;padding-top:16px;border-left:0;
    border-top:1px solid rgba(34,36,31,.12);align-items:stretch;
  }
  .pair-total .btn{width:100%}
}

.related{margin-top:64px}

/* ==========================================================================
   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}
}

/* ==========================================================================
   ORDER TRACKING (order-confirmation.html)
   ========================================================================== */
.track-placed{
  font-size:.75rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);margin-top:6px;
}

/* the journey, one dot per stage */
.track-steps{
  list-style:none;margin:32px 0 0;padding:0;
  display:flex;gap:0;counter-reset:none;
}
.track-step{
  flex:1;position:relative;text-align:center;padding-top:26px;
  font-size:.6875rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);
}
/* the rail behind the dots — drawn per step so it stops at both ends */
.track-step::before{
  content:"";position:absolute;top:8px;left:0;right:50%;height:2px;
  background:rgba(34,36,31,.12);
}
.track-step:first-child::before{display:none}
.track-step::after{
  content:"";position:absolute;top:8px;left:50%;right:0;height:2px;
  background:rgba(34,36,31,.12);
}
.track-step:last-child::after{display:none}
.track-step.is-done::before,
.track-step.is-done::after,
.track-step.is-now::before{background:var(--g-sage,#7a8b6f)}
.track-dot{
  position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;z-index:1;
  background:#fff;box-shadow:0 0 0 2px rgba(34,36,31,.18);
}
.track-step.is-done .track-dot{background:var(--g-sage,#7a8b6f);box-shadow:0 0 0 2px var(--g-sage,#7a8b6f)}
.track-step.is-now .track-dot{
  background:var(--g-ink,#22241f);box-shadow:0 0 0 3px rgba(34,36,31,.18);
}
.track-step.is-done,
.track-step.is-now{color:var(--g-ink,#22241f)}

/* courier + consignment number */
.track-parcel{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  margin-top:28px;padding:16px 20px;
  border:1px solid rgba(34,36,31,.12);background:#fff;
}
.track-parcel > div{display:flex;flex-direction:column;gap:4px}
.track-parcel span{
  font-size:.625rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);
}
.track-parcel strong{font-weight:500;font-size:.9375rem;letter-spacing:.5px}
.track-parcel .btn{margin-left:auto}

/* the lookup form shown when the page is opened without an order number */
.track-form{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  max-width:460px;margin:0 auto;
}
.track-form input{
  flex:1 1 220px;padding:14px 16px;font:inherit;
  border:1px solid rgba(34,36,31,.2);background:#fff;color:inherit;
}
.track-form input:focus{outline:2px solid var(--g-sage,#7a8b6f);outline-offset:-1px}

.cart-summary-note{
  font-size:.75rem;color:var(--g-muted,#6b6f66);margin-top:8px;
}

@media (max-width:600px){
  .track-steps{flex-direction:column;gap:0;margin-top:24px}
  /* stacked: the rail runs down the left instead of across */
  .track-step{
    flex:none;text-align:left;padding:0 0 22px 30px;min-height:34px;
  }
  .track-step::before{top:0;bottom:50%;left:5px;right:auto;width:2px;height:auto}
  .track-step::after{top:50%;bottom:0;left:5px;right:auto;width:2px;height:auto}
  .track-dot{top:2px;left:0;transform:none}
  .track-parcel{gap:14px}
  .track-parcel .btn{margin-left:0;width:100%}
}

/* .section-sub caps its width at ~45ch but has no auto margins, so inside a
   centred page header it hugged the left edge. */
.confirmation-page .page-header .section-sub{margin-left:auto;margin-right:auto}

/* The footer's Subscribe link is a 22px-tall text button — under the 44px
   minimum for a thumb. Padding grows the hit area without changing how the
   underlined label looks. */
.footer-subscribe-form button{
  padding:11px 0 13px;
  border-bottom:0;
  position:relative;
}
.footer-subscribe-form button::after{
  content:"";position:absolute;left:0;right:0;bottom:11px;
  height:1.5px;background:currentColor;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumbs{padding:22px 0 0}
.crumbs{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  gap:8px;font-size:.6875rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);
}
.crumbs li{display:flex;align-items:center;gap:8px}
/* the separator belongs to the item that follows it, so the last crumb
   never trails a stray arrow */
.crumbs li + li::before{content:"\203A";color:rgba(34,36,31,.35)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--g-ink,#22241f);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--g-ink,#22241f)}
@media (max-width:600px){
  .breadcrumbs{padding-top:16px}
  .crumbs{font-size:.625rem;letter-spacing:1.2px;gap:6px}
  .crumbs li{gap:6px}
}

/* ==========================================================================
   SHOP BAR — filters + sort on collection pages
   ========================================================================== */
.shopbar{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 28px;
  justify-content:space-between;
  padding:20px 0;margin-bottom:8px;
  border-top:1px solid rgba(34,36,31,.12);
  border-bottom:1px solid rgba(34,36,31,.12);
}
.shopbar-groups{display:flex;flex-wrap:wrap;gap:18px 28px;flex:1 1 auto;min-width:0}
.shopbar-group{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.shopbar-label{
  font-size:.625rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);margin-right:2px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 14px;cursor:pointer;font:inherit;font-size:.75rem;letter-spacing:.6px;
  background:#fff;color:var(--g-ink,#22241f);
  border:1px solid rgba(34,36,31,.18);
  transition:background .2s,border-color .2s,color .2s;
}
.chip:hover{border-color:var(--t-ink)}
.chip.is-on{background:var(--t-sage);border-color:var(--t-sage);color:#fff}

.shopbar-end{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.shopbar-sort{display:flex;align-items:center;gap:8px}
.shopbar-sort select{
  font:inherit;font-size:.75rem;padding:8px 10px;
  background:#fff;color:inherit;border:1px solid rgba(34,36,31,.18);
}
.shopbar-clear{
  background:none;border:0;cursor:pointer;font:inherit;
  font-size:.6875rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);text-decoration:underline;padding:8px 0;
}
.shopbar-clear:hover{color:var(--t-ink)}
.shopbar-count{
  font-size:.6875rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);margin:16px 0 4px;
}
@media (max-width:760px){
  .shopbar{flex-direction:column;gap:16px}
  /* 37px was under the 44px minimum for a thumb */
  .chip{padding:12px 16px}
  .shopbar-sort select{padding:12px 10px}
  .shopbar-groups{gap:14px}
  .shopbar-group{align-items:flex-start;flex-direction:column;gap:6px}
  .shopbar-end{width:100%;justify-content:space-between}
  .shopbar-sort select{flex:1}
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON (built by js/site-config.js)
   ========================================================================== */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:90;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  transition:transform .2s ease,box-shadow .2s ease;
}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:scale(1.06);box-shadow:0 6px 20px rgba(0,0,0,.28)}
.wa-float:focus-visible{outline:3px solid var(--t-ink);outline-offset:3px}
/* the toast slides up from bottom-centre — keep it clear of the button */
@media (max-width:520px){
  .wa-float{width:50px;height:50px;right:14px;bottom:14px}
  .wa-float svg{width:27px;height:27px}
}
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none}
  .wa-float:hover{transform:none}
}

/* ==========================================================================
   PHONE VERIFICATION (checkout) + ADDRESS EDIT (tracking page)
   ========================================================================== */
.otp-box{
  margin-top:18px;padding:18px 20px;
  border:1px solid rgba(34,36,31,.14);background:var(--t-sage-mist);
}
.otp-box h4{margin:0 0 6px;font-size:.9375rem;font-weight:500}
.otp-lead{font-size:.8125rem;line-height:1.55;color:var(--g-muted,#6b6f66);margin:0 0 14px}
.otp-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.otp-row input{
  flex:0 1 160px;padding:12px 14px;font:inherit;letter-spacing:4px;text-align:center;
  border:1px solid rgba(34,36,31,.2);background:#fff;color:inherit;
}
.otp-row input:focus{outline:2px solid var(--t-sage);outline-offset:-1px}
.otp-msg{font-size:.8125rem;margin:10px 0 0;color:#B4483A;min-height:1px}
.otp-msg.is-ok{color:var(--t-sage-dk)}
.otp-dry{
  font-size:.75rem;margin:10px 0 0;padding:8px 12px;
  background:#fff;border:1px dashed var(--t-gold);color:var(--t-ink);
}

.addr-edit{margin-top:10px}
.addr-edit-toggle{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:.6875rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--t-sage);text-decoration:underline;
}
.addr-edit-form{display:none;margin-top:12px}
.addr-edit-form.is-open{display:block}
.addr-edit-form label{
  display:block;font-size:.625rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);margin:10px 0 4px;
}
.addr-edit-form input,
.addr-edit-form textarea{
  width:100%;padding:11px 13px;font:inherit;
  border:1px solid rgba(34,36,31,.2);background:#fff;color:inherit;
}
.addr-edit-form .addr-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.addr-msg{font-size:.8125rem;margin:10px 0 0;color:#B4483A}
.addr-msg.is-ok{color:var(--t-sage-dk)}

@media (max-width:520px){
  .otp-row .btn{width:100%}
  .otp-row input{flex:1 1 100%}
}

/* ==========================================================================
   PAYMENT PROOF — transaction ID + screenshot (checkout and tracking page)
   ========================================================================== */
.proof-fields,
.proof-form{
  margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(34,36,31,.14);
}
.proof-lead{font-size:.8125rem;line-height:1.55;margin:0 0 12px;color:var(--g-muted,#6b6f66)}
.proof-fields label,
.proof-form label{
  display:block;font-size:.625rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);margin:12px 0 5px;
}
.proof-optional{text-transform:none;letter-spacing:.3px;opacity:.75}
.proof-fields input[type="text"],
.proof-form input[type="text"]{
  width:100%;padding:11px 13px;font:inherit;
  border:1px solid rgba(34,36,31,.2);background:#fff;color:inherit;
}
.proof-fields input[type="file"],
.proof-form input[type="file"]{
  width:100%;font:inherit;font-size:.8125rem;padding:10px 0;
}
.proof-hint{font-size:.75rem;color:var(--g-muted,#6b6f66);margin:6px 0 0;line-height:1.5}
.proof-form button{margin-top:16px}
.proof-msg{font-size:.8125rem;margin:10px 0 0;color:#B4483A}
.proof-msg.is-ok{color:var(--t-sage-dk,#3F4A34)}

/* what has already been sent for this order */
.proof-sent{
  margin-top:16px;padding:12px 14px;
  background:#fff;border:1px solid rgba(34,36,31,.14);
}
.proof-sent-label{
  display:block;font-size:.625rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--g-muted,#6b6f66);margin-bottom:6px;
}
.proof-sent p{font-size:.8125rem;margin:2px 0}

/* "Free delivery" perk badge on the online-payment option */
.pay-option__perk{
  /* the body is a flex column, so an inline-block still stretches to the
     full cross-axis width without this */
  align-self:flex-start;width:fit-content;
  display:inline-block;margin-top:6px;padding:3px 9px;
  font-size:.625rem;letter-spacing:1.6px;text-transform:uppercase;
  background:var(--t-sage,#5F6E4F);color:#fff;
}

/* 43px was one pixel short of a comfortable tap target */
.footer-subscribe-form button{padding:12px 0 14px}

/* Star rating buttons were 21x26 — too small to hit reliably with a thumb.
   Padding grows the button without changing how big the star looks. */
.review-star-input{gap:2px}
.review-star-input button{
  min-width:44px;min-height:44px;
  display:grid;place-items:center;
  padding:0;cursor:pointer;
}

/* the sort dropdown was one pixel short */
.shopbar-sort select{min-height:44px}

/* "Change address" was an 18px-tall text link — padded out to a real target */
.addr-edit-toggle{padding:13px 0;min-height:44px}
.footer-subscribe-form input{padding:0.75rem 0}