/*
Theme Name: Chapter Gifting
Theme URI: https://chaptergifting.in
Author: Chapter Gifting
Description: Custom premium theme for Chapter Gifting — personalisation & corporate gifting house
Version: 2.0
*/

/* ═══════════════════════════════════════
   FONTS & VARIABLES
═══════════════════════════════════════ */
/* Fonts are now loaded via <link rel="preload"> in header.php.
   The old @import was removed because it forced the browser to
   download style.css FIRST, then discover the fonts, then download
   them — a serial waterfall that delayed first paint on mobile. */

:root{
  --ink: #15140F;
  --ink-soft: #1A1810;
  --ink-panel: #211F17;
  --cream-text: #F1E9D8;
  --paper-dim: #E7DDC7;
  --gold: #B98B4E;
  --gold-soft: #D7B77E;
  --line: rgba(241,233,216,0.12);
  --paper-bg: #F3EBDA;
  --paper-ink: #1D1B14;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream-text);
  font-family:'Newsreader', serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces', serif; font-weight:600; line-height:1.1; margin:0;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-soft);
}

/* ═══════════════════════════════════════
   TRUST TICKER
═══════════════════════════════════════ */
.cg-ticker-wrap{
  background:var(--gold);
  overflow:hidden;
  padding:11px 0;
  white-space:nowrap;
  position:relative;
}
.cg-ticker-track{
  display:inline-flex;
  animation:cg-scroll 30s linear infinite;
}
.cg-ticker-track span{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:500;
  padding:0 36px;
  white-space:nowrap;
}
@keyframes cg-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ═══════════════════════════════════════
   HEADER & NAVIGATION
═══════════════════════════════════════ */
.cg-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 48px;
  position:relative;
  z-index:100;
}
.cg-logo{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  font-size:20px;
  color:var(--cream-text);
}
.cg-nav-desktop{display:flex;}
.cg-nav-desktop ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  align-items:center;
  gap:34px;
}
.cg-nav-desktop > ul > li > a{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-dim);
  padding:8px 0;
  position:relative;
  transition:color .2s ease;
}
.cg-nav-desktop > ul > li > a:hover{color:var(--gold-soft);}
.cg-nav-desktop li{position:relative; padding-bottom:14px; margin-bottom:-14px;}

/* dropdown panels */
.cg-nav-desktop li ul{
  display:block; /* was inheriting display:flex from .cg-nav-desktop ul above, which laid the submenu out sideways instead of stacked */
  list-style:none;
  margin:0; padding:10px 0;
  position:absolute;
  top:calc(100% + 14px);
  left:0;
  min-width:230px;
  background:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 20px 44px rgba(0,0,0,0.45);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:200;
}
.cg-nav-desktop li:hover > ul{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.cg-nav-desktop li li{position:relative;}
.cg-nav-desktop li li ul{
  top:-11px;
  left:calc(100% + 6px);
}
.cg-nav-desktop li a{
  display:block;
  padding:10px 22px;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:none;
  font-family:'IBM Plex Mono', monospace;
  color:var(--paper-dim);
  transition:background .15s ease, color .15s ease, padding-left .15s ease;
  white-space:nowrap;
}
.cg-nav-desktop li li a{font-size:12.5px;}
.cg-nav-desktop li a:hover{
  background:rgba(185,139,78,0.1);
  color:var(--gold-soft);
  padding-left:26px;
}
.cg-nav-desktop li:has(ul) > a::after{
  content:'⌄';
  display:inline-block;
  margin-left:6px;
  font-size:10px;
  opacity:.6;
}
.cg-nav-desktop li li:has(ul) > a::after{
  content:'›';
  float:right;
  margin-left:0;
}

.cg-bag{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.05em;
  color:var(--paper-dim);
  border:1px solid var(--line);
  padding:9px 18px;
  border-radius:2px;
  transition:border-color .2s ease, color .2s ease;
}
.cg-bag:hover{border-color:var(--gold); color:var(--gold-soft);}

/* mobile toggle */
.cg-mobile-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
}
.cg-mobile-toggle span{width:24px; height:2px; background:var(--cream-text); display:block; transition:.2s;}

/* mobile menu panel */
.cg-mobile-panel{
  position:fixed;
  top:0; right:0;
  width:min(320px, 85vw);
  height:100vh;
  background:var(--ink-soft);
  border-left:1px solid var(--line);
  z-index:1000;
  padding:90px 28px 40px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.cg-mobile-panel.open{transform:translateX(0);}
.cg-mobile-panel ul{list-style:none; margin:0; padding:0;}
.cg-mobile-panel > ul > li{border-bottom:1px solid var(--line);}
.cg-mobile-panel a{
  display:block;
  padding:15px 0;
  color:var(--cream-text);
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.cg-mobile-panel li{position:relative;}
.cg-mobile-panel .cg-msub-toggle{
  position:absolute; right:0; top:9px;
  background:none; border:none;
  color:var(--gold-soft); font-size:20px;
  width:34px; height:34px;
  transition:transform .2s ease;
}
.cg-mobile-panel .cg-msub-toggle.open-icon{transform:rotate(45deg);}
.cg-mobile-panel ul ul{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding-left:14px;
  border-left:1px solid rgba(185,139,78,0.3);
}
.cg-mobile-panel ul ul.mopen{max-height:600px;}
.cg-mobile-panel ul ul a{
  font-size:12px;
  text-transform:none;
  opacity:.8;
  padding:11px 0;
}
.cg-mobile-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  z-index:999;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.cg-mobile-overlay.open{opacity:1; visibility:visible;}

@media(max-width:900px){
  .cg-nav-desktop{display:none;}
  .cg-mobile-toggle{display:flex;}
  .cg-header{padding:22px 22px;}
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero{
  position:relative;
  padding:70px 48px 90px;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:center;
  overflow:hidden;
}
.hero.has-video{
  grid-template-columns:1fr;
  min-height:640px;
  padding:70px 48px;
  align-items:flex-end;
}
.hero.has-video .reveal{max-width:640px;}
.hero-video-bg{position:absolute; inset:0; z-index:0;}
.hero-video-bg video{width:100%; height:100%; object-fit:cover;}
.hero-video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(29,27,20,0.55) 0%, rgba(29,27,20,0.35) 40%, rgba(29,27,20,0.92) 100%);
}
.hero.has-video .reveal, .hero.has-video .hero-glow{position:relative; z-index:1;}
.hero-glow{
  position:absolute;
  top:-20%; right:-10%;
  width:60%; height:140%;
  background:radial-gradient(closest-side, rgba(185,139,78,0.16), transparent 70%);
  pointer-events:none;
  animation:cg-glow-pulse 8s ease-in-out infinite;
  z-index:0;
}
@keyframes cg-glow-pulse{
  0%, 100%{opacity:.7; transform:scale(1);}
  50%{opacity:1; transform:scale(1.08);}
}
.hero > .reveal{position:relative; z-index:1;}
.hero h1{
  font-size:clamp(38px, 5.2vw, 66px);
  margin-top:16px;
  color:var(--cream-text);
}
.hero h1 em{font-style:italic; color:var(--gold-soft); font-weight:500;}
.hero p{
  margin-top:22px;
  color:var(--paper-dim);
  font-size:18px;
  max-width:46ch;
  line-height:1.65;
}
.hero-cta{margin-top:34px; display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.btn-primary{
  background:var(--gold);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:15px 30px;
  border-radius:2px;
  transition:background .2s ease, transform .2s ease;
}
.btn-primary:hover{background:var(--gold-soft); transform:translateY(-2px);}
.btn-ghost{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-dim);
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.btn-ghost:hover{color:var(--gold-soft); border-color:var(--gold-soft);}
.hero-img{display:flex; justify-content:center; align-items:center;}
.hero-img img{
  width:100%;
  max-width:440px;
  height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr; padding:50px 22px 60px; text-align:center;}
  .hero p{margin-left:auto; margin-right:auto;}
  .hero-cta{justify-content:center;}
  .hero-img{margin-top:36px;}
  .hero-img img{max-width:260px;}
  .hero.has-video{min-height:520px; padding:50px 22px; text-align:left;}
  .hero.has-video .hero-cta{justify-content:flex-start;}
}

/* ═══════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════ */
.cg-stats-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  padding:44px 48px;
  background:var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cg-stat{text-align:center;}
.cg-stat-num, .cg-stat-suffix, .cg-stat-static{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(28px, 3.4vw, 44px);
  color:var(--gold-soft);
  font-weight:600;
}
.cg-stat p{
  margin-top:8px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cream-text);
  opacity:.7;
}
@media(max-width:700px){
  .cg-stats-strip{grid-template-columns:repeat(2, 1fr); padding:34px 22px; gap:28px;}
}

/* ═══════════════════════════════════════
   GALLERY STRIP
═══════════════════════════════════════ */
.cg-gallery-section{padding:80px 48px; background:var(--ink-panel);}
.cg-gallery-track{display:flex; gap:22px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory;}
.cg-gallery-item{
  flex:0 0 300px;
  height:380px;
  border-radius:3px;
  overflow:hidden;
  background:#fff;
  scroll-snap-align:start;
  /* opacity:0 removed here for the same reason as .reveal above: gallery
     photos must not depend on JavaScript to become visible. */
  transition:opacity .7s ease, transform .7s ease;
}
.cg-gallery-item.cg-in-view{opacity:1; transform:translateY(0);}
.cg-gallery-item img{width:100%; height:100%; object-fit:cover;}
@media(max-width:900px){
  .cg-gallery-section{padding:50px 22px;}
  .cg-gallery-item{flex:0 0 260px; height:320px;}
}

/* ═══════════════════════════════════════
   SECTION HEAD (reused)
═══════════════════════════════════════ */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  padding-bottom:28px;
  margin-bottom:44px;
  border-bottom:1px solid var(--line);
}
.section-head h2{font-size:clamp(28px, 3.2vw, 42px); margin-top:10px; color:var(--cream-text);}
.section-head > p{color:var(--paper-dim); opacity:.75; max-width:34ch; font-size:15px; text-align:right;}
@media(max-width:700px){
  .section-head{flex-direction:column; align-items:flex-start; gap:14px; text-align:left;}
  .section-head > p{text-align:left;}
}

/* ═══════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════ */
.how-it-works{padding:90px 48px; background:var(--ink);}
.hiw-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:36px;}
.hiw-card{
  border:1px solid var(--line);
  border-radius:3px;
  padding:36px 30px;
  position:relative;
  transition:border-color .25s ease, transform .25s ease;
}
.hiw-card:hover{border-color:rgba(185,139,78,0.4); transform:translateY(-4px);}
.hiw-num{
  font-family:'Fraunces', serif;
  font-size:44px;
  color:var(--gold);
  opacity:.35;
  display:block;
  margin-bottom:14px;
}
.hiw-card h3{font-size:20px; color:var(--cream-text); margin-bottom:12px;}
.hiw-card p{color:var(--paper-dim); opacity:.72; font-size:14.5px; line-height:1.7;}
@media(max-width:900px){
  .how-it-works{padding:60px 22px;}
  .hiw-grid{grid-template-columns:1fr; gap:22px;}
}

/* ═══════════════════════════════════════
   CHAPTERS
═══════════════════════════════════════ */
.chapters-section{padding:90px 48px; background:var(--ink);}
.chapters{display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.chapter-card{
  padding:40px 34px;
  border-right:1px solid var(--line);
  transition:background .25s ease;
}
.chapter-card:last-child{border-right:none;}
.chapter-card:hover{background:rgba(185,139,78,0.04);}
.chapter-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-soft);
}
.chapter-card h3{font-size:22px; margin:12px 0 14px; color:var(--cream-text);}
.chapter-card p{color:var(--paper-dim); opacity:.75; font-size:14.5px; line-height:1.7; margin-bottom:22px;}
.chapter-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-soft);
  transition:gap .2s ease;
}
.chapter-link:hover{gap:14px;}
.chapter-link svg{width:16px; height:16px;}
@media(max-width:900px){
  .chapters-section{padding:60px 22px;}
  .chapters{grid-template-columns:1fr;}
  .chapter-card{border-right:none; border-bottom:1px solid var(--line);}
  .chapter-card:last-child{border-bottom:none;}
}

/* ═══════════════════════════════════════
   FEATURED PRODUCTS (paper panel)
═══════════════════════════════════════ */
.paper-panel{background:var(--paper-bg); color:var(--paper-ink); padding:90px 48px;}
.paper-panel .eyebrow{color:var(--gold);}
.paper-panel .section-head{border-color:rgba(29,27,20,0.15);}
.paper-panel .section-head h2{color:var(--paper-ink);}
.paper-panel .section-head > p{color:var(--paper-ink); opacity:.65;}

/* Dark variant of the same products section — used for Bestsellers since it now
   sits directly under the dark Hero/Stats and needs to flow, not clash. */
.cg-shop-dark{background:var(--ink); color:var(--cream-text); padding:90px 48px;}
.cg-shop-dark .eyebrow{color:var(--gold);}
.cg-shop-dark .section-head{border-color:var(--line);}
.cg-shop-dark .section-head h2{color:var(--cream-text);}
.cg-shop-dark .section-head > p{color:var(--paper-dim); opacity:.75;}
.cg-shop-dark .product{background:var(--ink-panel); border:1px solid var(--line);}
.cg-shop-dark .product:hover{box-shadow:0 20px 40px rgba(0,0,0,0.45);}
.cg-shop-dark .product-img{background:var(--ink-soft);}
.cg-shop-dark .product-body h4{color:var(--cream-text);}
.cg-shop-dark .add-btn{border-color:var(--line); color:var(--cream-text);}
.cg-shop-dark .product:hover .add-btn{background:var(--gold); color:var(--ink); border-color:var(--gold);}
@media(max-width:900px){
  .cg-shop-dark{padding:60px 22px;}
}

/* SCOPED 09 Sep 2026 — these were bare `.products` / `.product` rules.
   They are the homepage's own markup (front-page.php: <div class="products">),
   but WooCommerce uses the SAME class names: its related-products block is
   <section class="related products"> holding <li class="product"> items.
   So the bare rules leaked onto every shop page and did two things:
     1. turned the related-products SECTION into a 4-column grid, squeezing
        its <ul> into a quarter of the width — the real reason related
        products looked cramped with tiny images;
     2. painted background:#fff onto product cards on a dark theme.
   Scoping them to the homepage section fixes both at the source.
   `background:#fff` is dropped here because .cg-shop-dark .product above
   already sets the correct dark panel colour. */
.cg-shop-dark .products{display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;}
.cg-shop-dark .product{
  border-radius:3px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cg-shop-dark .product:hover{transform:translateY(-6px);}
.cg-shop-dark .product-img{position:relative; height:220px; background:var(--ink-soft);}
.cg-shop-dark .product-img img{width:100%; height:100%; object-fit:cover;}
.product-tag{
  position:absolute; top:12px; left:12px;
  background:var(--ink); color:var(--gold-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px;
  z-index:2;
}
.product-body{padding:18px 20px 22px;}
.product-body h4{font-size:16px; color:var(--paper-ink); font-family:'Fraunces', serif; margin-bottom:10px;}
.cg-shop-dark .price-row{display:flex; justify-content:space-between; align-items:center;}
/* SCOPED — bare .price collided with WooCommerce's own .price element. */
.cg-shop-dark .price{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--gold);}
.cg-shop-dark .price ins{text-decoration:none;}
.cg-shop-dark .price del{opacity:.5; margin-right:6px;}
.add-btn{
  width:30px; height:30px;
  border:1px solid rgba(29,27,20,0.2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.cg-shop-dark .product:hover .add-btn{background:var(--ink); color:var(--gold-soft); border-color:var(--ink);}
.cg-shop-cta{text-align:center; margin-top:44px;}
@media(max-width:900px){
  .paper-panel{padding:60px 22px;}
  .cg-shop-dark .products{grid-template-columns:repeat(2, 1fr); gap:18px;}
}
@media(max-width:500px){
  .cg-shop-dark .products{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════
   QUOTE
═══════════════════════════════════════ */
.quote{padding:100px 48px; text-align:center; max-width:900px; margin:0 auto;}
.quote blockquote{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:clamp(22px, 3vw, 34px);
  color:var(--cream-text);
  line-height:1.4;
  margin:0;
}
.quote cite{
  display:block;
  margin-top:24px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-soft);
  font-style:normal;
}
@media(max-width:700px){.quote{padding:70px 22px;}}

/* ═══════════════════════════════════════
   TRUSTED BY
═══════════════════════════════════════ */
.trusted-section{padding:0 48px 100px;}
.trusted-grid{
  border:1px solid var(--line);
  padding:44px;
  display:flex;
  flex-wrap:wrap;
  gap:36px;
  justify-content:space-between;
  align-items:center;
}
.trusted-item{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper-dim);
  opacity:.6;
  transition:opacity .2s ease;
}
.trusted-item:hover{opacity:1;}
@media(max-width:700px){
  .trusted-section{padding:0 22px 60px;}
  .trusted-grid{padding:28px; justify-content:center;}
}

/* Trusted-by logos — circle frame + brand name (uploaded via wp-admin) */
.trusted-item{display:flex; flex-direction:column; align-items:center; gap:10px; opacity:1;}
.trusted-logo-circle{
  width:88px; height:88px;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1px solid var(--line);
  filter:grayscale(1);
  opacity:.65;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}
.trusted-logo-circle img{width:100%; height:100%; object-fit:contain; padding:14px;}
.trusted-logo:hover .trusted-logo-circle{filter:grayscale(0); opacity:1; transform:translateY(-3px);}
.trusted-logo-name{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper-dim);
  opacity:.7;
  text-align:center;
}

/* Google reviews badge */
.cg-google-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--gold-soft);
  border:1px solid var(--line);
  padding:9px 16px;
  border-radius:2px;
  transition:border-color .2s ease, background .2s ease;
}
.cg-google-badge:hover{border-color:var(--gold-soft); background:rgba(185,139,78,0.08);}

/* ═══════════════════════════════════════
   GOOGLE REVIEWS SECTION
═══════════════════════════════════════ */
.cg-reviews-section{
  background:var(--ink);
  padding:80px 48px 90px;
  border-top:1px solid var(--line);
}
.cg-reviews-inner{max-width:1200px; margin:0 auto;}
.cg-reviews-head{margin-bottom:40px;}
.cg-reviews-head .eyebrow{color:var(--gold); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px;}
.cg-reviews-head h2{font-family:'Fraunces', serif; font-size:clamp(26px,3vw,38px); color:var(--cream-text); margin:0;}
@media(max-width:768px){
  .cg-reviews-section{padding:60px 20px 70px;}
}

/* ═══════════════════════════════════════
   TESTIMONIALS (old — kept for safety)
═══════════════════════════════════════ */
.cg-testimonials{padding:80px 0 90px;}
.cg-carousel{position:relative; padding:20px 0;}
.cg-carousel-track{
  display:flex;
  align-items:center;
  gap:0;
  padding:40px calc(50% - 160px);
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.cg-carousel-track::-webkit-scrollbar{display:none;}
.cg-carousel-card{
  flex:0 0 320px;
  margin:0 14px;
  background:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px 24px;
  text-align:center;
  opacity:.45;
  transform:scale(.82);
  transition:opacity .4s ease, transform .4s ease;
  scroll-snap-align:center;
}
.cg-carousel-track{scroll-snap-type:x mandatory;}
.cg-carousel-card.is-active{
  opacity:1;
  transform:scale(1.06);
  border-color:rgba(185,139,78,0.45);
  box-shadow:0 24px 50px rgba(0,0,0,0.4);
}
.cg-carousel-media{
  width:76px; height:76px;
  border-radius:50%;
  overflow:hidden;
  margin:0 auto 18px;
  background:var(--ink);
  border:2px solid var(--line);
}
.cg-carousel-card.is-active .cg-carousel-media{border-color:var(--gold-soft);}
.cg-carousel-media img, .cg-carousel-media video{width:100%; height:100%; object-fit:cover;}
.cg-carousel-initial{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif;
  font-size:26px;
  color:var(--gold-soft);
}
.cg-carousel-card blockquote{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:15.5px;
  color:var(--cream-text);
  line-height:1.55;
  margin:0;
}
.cg-carousel-card cite{
  display:block;
  margin-top:16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-soft);
  font-style:normal;
}
.cg-carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:24px;}
.cg-carousel-dots span{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--line);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.cg-carousel-dots span.is-active{background:var(--gold-soft); transform:scale(1.3);}
@media(max-width:700px){
  .cg-carousel-track{padding:30px 30px;}
  .cg-carousel-card{flex-basis:260px; margin:0 10px;}
}

/* ═══════════════════════════════════════
   WHATSAPP FLOATING BUTTON
═══════════════════════════════════════ */
.wa-float{
  position:fixed;
  bottom:26px; right:26px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:10px;
  background:#25D366;
  color:#fff;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:15px 22px 15px 17px;
  border-radius:50px;
  box-shadow:0 6px 24px rgba(37,211,102,0.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(37,211,102,0.5);}
.wa-float svg{width:20px; height:20px; flex-shrink:0;}
@media(max-width:600px){
  .wa-float span{display:none;}
  .wa-float{padding:16px; border-radius:50%;}
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.cg-footer{
  border-top:1px solid var(--line);
  padding:70px 48px 30px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:44px;
}
.footer-brand .cg-logo{font-size:19px;}
.footer-brand p{color:var(--paper-dim); opacity:.7; font-size:14px; margin-top:16px; line-height:1.7; max-width:32ch;}
.footer-col h5{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:18px;
}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.footer-col a{
  color:var(--paper-dim);
  opacity:.75;
  font-size:14px;
  transition:opacity .2s ease, color .2s ease;
}
.footer-col a:hover{opacity:1; color:var(--gold-soft);}
.footer-bottom{
  max-width:none;
  margin-top:50px;
  padding:24px 48px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.05em;
  color:var(--paper-dim);
  opacity:.5;
}
@media(max-width:900px){
  .cg-footer{grid-template-columns:1fr 1fr; padding:50px 22px 20px; gap:32px;}
  .footer-bottom{padding:20px 22px; flex-direction:column;}
}
@media(max-width:500px){
  .cg-footer{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════
   SCROLL REVEAL (generic)
═══════════════════════════════════════ */
/* FIXED 09 Sep 2026 — this rule used to be
     .reveal{opacity:0; transform:translateY(24px); ...}
   which meant every .reveal element — including the entire hero, its
   headline, buttons and photograph — started INVISIBLE and only became
   visible once JavaScript ran. If a script failed, was blocked, or was
   slow on a weak connection, a visitor got a blank hero. Search engines
   and link previews saw the same nothing.
   The fade-in now lives on .cg-anim, which js/main.js adds only when it
   knows it can also remove it. With no JS the page simply renders. */
.reveal{transition:opacity .7s ease, transform .7s ease;}
.reveal.cg-in-view{opacity:1; transform:translateY(0);}

/* ═══════════════════════════════════════
   WOOCOMMERCE PAGES (shop, single product, cart, checkout)
═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   SHOP PAGE — FULL PREMIUM REBUILD
═══════════════════════════════════════ */

/* Hero banner at top of shop */
.shop-hero{
  padding:80px 60px 60px;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
.shop-hero .eyebrow{color:var(--gold); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px;}
.shop-hero h1{
  font-family:'Fraunces', serif;
  font-size:clamp(40px, 5vw, 68px);
  color:var(--cream-text);
  line-height:1.1;
  margin:0 0 16px;
}
.shop-hero p{color:var(--paper-dim); font-size:18px; max-width:520px; line-height:1.6; margin:0;}

/* Main shop wrapper */
.shop-wrap{
  padding:48px 60px 100px;
  background:var(--ink);
  max-width:1400px;
  margin:0 auto;
}

/* Result count + sort bar */
.woocommerce-result-count{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--paper-dim);
  letter-spacing:.04em;
}
.woocommerce-ordering select{
  background:var(--ink-panel);
  border:1px solid var(--line);
  color:var(--cream-text);
  padding:10px 16px;
  border-radius:6px;
  font-size:13px;
  font-family:'IBM Plex Mono', monospace;
}
.woocommerce-result-count,
.woocommerce-ordering{margin-bottom:32px;}

/* Product grid — 3 columns desktop, breathing room */
.shop-wrap ul.products,
.related.products ul.products,
.up-sells.products,
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:36px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
}

/* Product card */
.shop-wrap ul.products li.product,
.related.products ul.products li.product,
.up-sells.products li.product,
.woocommerce ul.products li.product{
  background:var(--ink-panel) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease !important;
  width:auto !important;
  float:none !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
.shop-wrap ul.products li.product:hover,
.related.products ul.products li.product:hover,
.woocommerce ul.products li.product:hover{
  border-color:rgba(185,139,78,0.55) !important;
  transform:translateY(-6px) !important;
  box-shadow:0 24px 48px rgba(0,0,0,0.4) !important;
}

/* Product image — taller, square-ish, fills card top cleanly */
.shop-wrap ul.products li.product a img,
.related.products ul.products li.product a img,
.woocommerce ul.products li.product a img{
  width:100% !important;
  height:300px !important;
  object-fit:cover !important;
  display:block !important;
  max-width:none !important;
  transition:transform .5s ease !important;
}
.shop-wrap ul.products li.product:hover a img,
.woocommerce ul.products li.product:hover a img{
  transform:scale(1.04) !important;
}

/* Product title */
.shop-wrap ul.products li.product h2,
.shop-wrap ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product h2,
.related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Fraunces', serif !important;
  font-size:19px !important;
  line-height:1.4 !important;
  padding:20px 22px 8px !important;
  margin:0 !important;
  color:var(--cream-text) !important;
  flex:1;
}

/* Price */
.shop-wrap ul.products li.product .price,
.related.products ul.products li.product .price,
.woocommerce ul.products li.product .price{
  padding:0 22px 8px !important;
  color:var(--gold) !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:18px !important;
  font-weight:600 !important;
  display:flex !important;
  align-items:baseline !important;
  gap:10px !important;
}
.shop-wrap ul.products li.product .price del,
.related.products ul.products li.product .price del,
.woocommerce ul.products li.product .price del{
  opacity:.45 !important;
  font-size:13px !important;
  font-weight:400 !important;
}
.shop-wrap ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins{
  text-decoration:none !important;
}

/* Add to cart / Select Options button */
.shop-wrap ul.products li.product .button,
.related.products ul.products li.product .button,
.woocommerce ul.products li.product .button{
  display:block !important;
  margin:12px 22px 22px !important;
  padding:14px 20px !important;
  background:transparent !important;
  border:1px solid rgba(185,139,78,0.55) !important;
  color:var(--gold) !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:13px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-align:center !important;
  border-radius:8px !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease !important;
  cursor:pointer !important;
}
.shop-wrap ul.products li.product .button:hover,
.related.products ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover{
  background:var(--gold) !important;
  color:var(--ink) !important;
  border-color:var(--gold) !important;
}

/* Sale badge */
.woocommerce span.onsale,
.shop-wrap .onsale{
  background:var(--gold) !important;
  color:var(--ink) !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:11px !important;
  font-weight:700 !important;
  border-radius:6px !important;
  padding:5px 10px !important;
  min-height:auto !important;
  min-width:auto !important;
  line-height:1.4 !important;
}

/* Related / Upsell sections */
.related.products,
.up-sells.products{
  padding:70px 60px 90px !important;
  background:var(--ink) !important;
  overflow:hidden !important;
}
.related.products > h2,
.up-sells.products > h2{
  font-family:'Fraunces', serif !important;
  font-size:clamp(26px, 3vw, 38px) !important;
  color:var(--cream-text) !important;
  margin-bottom:36px !important;
  margin-top:0 !important;
}

/* Force grid on related/upsell — kill WooCommerce float layout */
/* CORRECTED 09 Sep 2026 — this base rule said repeat(2, 1fr). The
   Phase 1 override only fixed widths above 1025px, which left a dead
   zone: between 601px and 768px nothing overrode this, so the grid
   still rendered two very wide cards. Setting the base to 4 and
   stepping DOWN with media queries removes the gap entirely. */
.related.products ul.products,
.up-sells ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:22px !important;
  float:none !important;
  clear:both !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
.related.products ul.products::before,
.related.products ul.products::after,
.up-sells ul.products::before,
.up-sells ul.products::after{
  display:none !important;
}
.related.products ul.products li.product,
.up-sells ul.products li.product{
  float:none !important;
  clear:none !important;
  width:100% !important;
  margin:0 !important;
}

/* Tablet */
@media(max-width:1024px){
  .shop-wrap{padding:40px 36px 80px;}
  .shop-hero{padding:60px 36px 48px;}
  .shop-wrap ul.products,
  .woocommerce ul.products{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:24px !important;
  }
}
/* Mobile */
@media(max-width:600px){
  .shop-wrap{padding:24px 16px 60px;}
  .shop-hero{padding:40px 16px 36px;}
  .shop-wrap ul.products,
  .woocommerce ul.products{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:14px !important;
  }
  .related.products,
  .up-sells.products{padding:40px 16px 60px !important;}
  .related.products ul.products,
  .up-sells ul.products{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:12px !important;
  }
  .shop-wrap ul.products li.product a img,
  .woocommerce ul.products li.product a img,
  .related.products ul.products li.product a img,
  .up-sells ul.products li.product a img{height:160px !important;}
  .shop-wrap ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:15px !important;
    padding:14px 14px 6px !important;
  }
  .shop-wrap ul.products li.product .price,
  .woocommerce ul.products li.product .price{
    font-size:15px !important;
    padding:0 14px 6px !important;
  }
  .shop-wrap ul.products li.product .button,
  .woocommerce ul.products li.product .button{
    margin:10px 14px 16px !important;
    padding:12px 14px !important;
    font-size:11px !important;
  }
}

.woocommerce-cart table.cart, .woocommerce-checkout table.cart{background:var(--ink-panel) !important; border:1px solid var(--line) !important; color:var(--paper-dim) !important;}
.woocommerce-cart table.cart th, .woocommerce-cart table.cart td{border-color:var(--line) !important; color:var(--paper-dim) !important;}
.woocommerce-cart table.cart th{font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; color:var(--gold-soft) !important;}
.woocommerce-cart .product-name a{font-family:'Fraunces', serif; color:var(--cream-text) !important; font-size:17px;}
.woocommerce-cart .quantity input{background:var(--ink-soft) !important; border:1px solid var(--line) !important; color:var(--cream-text) !important;}
.woocommerce-cart .cart-collaterals, .cart_totals{background:var(--ink-panel) !important; border:1px solid var(--line) !important; padding:28px !important; color:var(--paper-dim) !important;}
.cart_totals h2{font-family:'Fraunces', serif !important; color:var(--cream-text) !important;}
.cart_totals table{background:transparent !important;}
.cart_totals table th, .cart_totals table td{border-color:var(--line) !important; color:var(--paper-dim) !important;}
.wc-proceed-to-checkout .checkout-button, .woocommerce-cart .button, .woocommerce a.remove{
  background:var(--gold) !important; color:var(--ink) !important; font-family:'IBM Plex Mono', monospace !important;
  font-size:12px !important; letter-spacing:.06em !important; text-transform:uppercase !important; border-radius:2px !important; border:none !important;
}
.woocommerce a.remove{background:transparent !important; color:var(--paper-dim) !important; font-size:20px !important;}
.woocommerce-checkout #payment, .woocommerce-checkout .woocommerce-checkout-review-order-table{background:var(--ink-panel) !important; border:1px solid var(--line) !important; color:var(--paper-dim) !important;}
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea{background:var(--ink-soft) !important; border:1px solid var(--line) !important; color:var(--cream-text) !important;}
.woocommerce-checkout label{color:var(--gold-soft) !important;}

/* ═══════════════════════════════════════
   CART PAGE — MOBILE REDESIGN
   Photo-first, less text, attractive coupon
═══════════════════════════════════════ */
@media(max-width:768px){

  /* Each cart item — photo left, details right */
  .woocommerce-cart table.shop_table{
    border:none !important;
    width:100% !important;
  }
  .woocommerce-cart table.shop_table thead{display:none !important;}
  .woocommerce-cart table.shop_table tbody tr{
    display:grid !important;
    grid-template-columns:110px 1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:0 14px !important;
    background:var(--ink-panel) !important;
    border:1px solid var(--line) !important;
    border-radius:16px !important;
    padding:16px !important;
    margin-bottom:14px !important;
    position:relative !important;
  }

  /* Photo — big, square, left column spanning all rows */
  .woocommerce-cart td.product-thumbnail{
    grid-column:1 !important;
    grid-row:1 / 4 !important;
    width:110px !important;
  }
  .woocommerce-cart td.product-thumbnail img{
    width:110px !important;
    height:110px !important;
    object-fit:cover !important;
    border-radius:12px !important;
    border:2px solid var(--gold) !important;
    display:block !important;
  }

  /* Product name */
  .woocommerce-cart td.product-name{
    grid-column:2 !important;
    grid-row:1 !important;
    padding:0 !important;
  }
  .woocommerce-cart td.product-name a{
    font-size:15px !important;
    line-height:1.4 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .woocommerce-cart td.product-name dl,
  .woocommerce-cart td.product-name .variation{
    font-size:12px !important;
    color:var(--paper-dim) !important;
    margin-top:4px !important;
  }

  /* Price row */
  .woocommerce-cart td.product-price{
    grid-column:2 !important;
    grid-row:2 !important;
    padding:6px 0 0 !important;
    font-size:13px !important;
    color:var(--paper-dim) !important;
    text-decoration:line-through !important;
  }
  .woocommerce-cart td.product-subtotal{
    display:none !important;
  }

  /* Quantity — inline compact */
  .woocommerce-cart td.product-quantity{
    grid-column:2 !important;
    grid-row:3 !important;
    padding:8px 0 0 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  .woocommerce-cart td.product-quantity .quantity input.qty{
    width:52px !important;
    height:36px !important;
    font-size:15px !important;
    text-align:center !important;
    background:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:8px !important;
    color:var(--cream-text) !important;
  }

  /* Remove button — top right corner */
  .woocommerce-cart td.product-remove{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    grid-column:unset !important;
    padding:0 !important;
  }
  .woocommerce-cart td.product-remove a.remove{
    width:28px !important;
    height:28px !important;
    line-height:28px !important;
    font-size:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    border:1px solid var(--line) !important;
    color:var(--paper-dim) !important;
    background:transparent !important;
  }

  /* Update cart button — hide, auto update is better UX */
  .woocommerce-cart .actions .button[name="update_cart"]{
    display:none !important;
  }

  /* ── COUPON SECTION — attractive dashed gold box ── */
  .woocommerce-cart .coupon{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    background:var(--ink-panel) !important;
    border:2px dashed rgba(185,139,78,0.5) !important;
    border-radius:14px !important;
    padding:18px 16px !important;
    margin:20px 0 !important;
    position:relative !important;
  }
  .woocommerce-cart .coupon::before{
    content:"🎁" !important;
    font-size:24px !important;
    flex-shrink:0 !important;
  }
  .woocommerce-cart .coupon label{
    display:none !important;
  }
  .woocommerce-cart .coupon #coupon_code{
    flex:1 !important;
    height:44px !important;
    background:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:8px !important;
    color:var(--cream-text) !important;
    font-size:14px !important;
    padding:0 14px !important;
    font-family:'IBM Plex Mono', monospace !important;
    letter-spacing:.04em !important;
  }
  .woocommerce-cart .coupon #coupon_code::placeholder{
    content:"Enter coupon code" !important;
    color:var(--paper-dim) !important;
    opacity:.6 !important;
  }
  .woocommerce-cart .coupon .button{
    height:44px !important;
    padding:0 20px !important;
    font-size:12px !important;
    background:var(--gold) !important;
    color:var(--ink) !important;
    border-radius:8px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    flex-shrink:0 !important;
  }

  /* Cart totals box */
  .woocommerce-cart .cart_totals{
    border-radius:16px !important;
    padding:20px !important;
    margin-top:16px !important;
    margin-bottom:100px !important;
  }
  .woocommerce-cart .cart_totals h2{
    font-size:20px !important;
    margin-bottom:16px !important;
  }
  .woocommerce-cart .cart_totals table th,
  .woocommerce-cart .cart_totals table td{
    font-size:14px !important;
    padding:12px 0 !important;
  }

  /* Checkout button — full width, big, gold */
  .woocommerce-cart .wc-proceed-to-checkout{
    padding:0 !important;
  }
  .woocommerce-cart .checkout-button{
    display:block !important;
    width:100% !important;
    height:54px !important;
    line-height:54px !important;
    text-align:center !important;
    font-size:15px !important;
    font-weight:700 !important;
    border-radius:12px !important;
    margin-top:16px !important;
  }
}

@media(max-width:900px){
  .shop-hero, .shop-wrap{padding-left:22px; padding-right:22px;}
  .shop-wrap ul.products{grid-template-columns:repeat(2, 1fr); gap:18px;}
}
@media(max-width:500px){
  .shop-wrap ul.products{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════
   SINGLE PRODUCT PAGE — FULL REBUILD
═══════════════════════════════════════ */

/* Outer wrapper — DO NOT override grid, WooCommerce handles layout */
.woocommerce div.product{
  padding:50px 60px 40px;
  background:var(--ink);
  max-width:1300px;
  margin:0 auto;
}

/* Product title */
.woocommerce div.product .product_title{
  font-family:'Fraunces', serif !important;
  font-size:clamp(26px, 3vw, 40px) !important;
  color:var(--cream-text) !important;
  line-height:1.2 !important;
  margin-bottom:14px !important;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--gold) !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:26px !important;
  font-weight:700 !important;
  display:flex !important;
  align-items:baseline !important;
  gap:12px !important;
  margin:0 0 20px !important;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del{
  opacity:.45 !important;
  font-size:16px !important;
  font-weight:400 !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins{
  text-decoration:none !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--paper-dim) !important;
  font-size:16px !important;
  line-height:1.8 !important;
  margin-bottom:24px !important;
  border-top:1px solid var(--line);
  padding-top:20px !important;
}

/* Gallery image — proper size */
.woocommerce div.product div.images{
  border-radius:10px;
  overflow:visible;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
  border-radius:10px !important;
  width:100% !important;
  height:auto !important;
}

/* Thumbnails */
.woocommerce div.product div.images .flex-control-thumbs{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:14px !important;
  padding:0 !important;
  list-style:none !important;
}
.woocommerce div.product div.images .flex-control-thumbs li{
  width:70px !important;
  flex-shrink:0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs img{
  border-radius:6px !important;
  border:2px solid var(--line) !important;
  opacity:.6 !important;
  transition:opacity .2s ease, border-color .2s ease !important;
  width:70px !important;
  height:70px !important;
  object-fit:cover !important;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover{
  opacity:1 !important;
  border-color:var(--gold) !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image{cursor:zoom-in;}

/* Quantity input */
.woocommerce div.product form.cart .qty{
  background:var(--ink-panel) !important;
  border:1px solid var(--line) !important;
  color:var(--cream-text) !important;
  border-radius:8px !important;
  padding:14px 18px !important;
  font-size:18px !important;
  width:80px !important;
  text-align:center !important;
  height:auto !important;
}

/* Add to Cart button */
.woocommerce div.product form.cart .single_add_to_cart_button{
  background:var(--gold) !important;
  color:var(--ink) !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  padding:16px 32px !important;
  border-radius:10px !important;
  border:none !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
  cursor:pointer !important;
  flex:1 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 14px 32px rgba(185,139,78,0.45) !important;
}

/* Other WC buttons — keep styled but not too large */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button{
  background:var(--gold) !important;
  color:var(--ink) !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:12px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  padding:12px 24px !important;
  border-radius:8px !important;
  border:none !important;
}

/* form.cart row */
.woocommerce div.product form.cart{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin-bottom:28px !important;
}

/* YITH engraving fields */
[class*="yith-wapo"]{
  background:var(--ink-panel) !important;
  color:var(--paper-dim) !important;
  border-color:var(--line) !important;
  border-radius:8px !important;
  margin-bottom:20px !important;
}
[class*="yith-wapo"] input[type="text"],
[class*="yith-wapo"] textarea{
  background:var(--ink-soft) !important;
  color:var(--cream-text) !important;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  padding:12px 16px !important;
  font-size:16px !important;
  width:100% !important;
}
[class*="yith-wapo"] input[type="text"]:focus,
[class*="yith-wapo"] textarea:focus{
  border-color:var(--gold) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(185,139,78,0.15) !important;
}
[class*="yith-wapo"] label{
  color:var(--gold) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  margin-bottom:8px !important;
  display:block !important;
}

/* Trust badges */
.cg-trust-badges{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:12px !important;
  margin-top:28px !important;
  padding-top:24px !important;
  border-top:1px solid var(--line) !important;
}
.cg-trust-badge{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:10px !important;
  padding:18px 10px !important;
  background:rgba(185,139,78,0.06) !important;
  border:1px solid rgba(185,139,78,0.3) !important;
  border-radius:10px !important;
  transition:background .2s ease, border-color .2s ease, transform .2s ease !important;
}
.cg-trust-badge:hover{
  background:rgba(185,139,78,0.12) !important;
  border-color:var(--gold) !important;
  transform:translateY(-3px) !important;
}
.cg-trust-icon{font-size:28px !important; line-height:1 !important;}
.cg-trust-label{
  font-family:'IBM Plex Mono', monospace !important;
  font-size:11.5px !important;
  letter-spacing:.03em !important;
  color:var(--cream-text) !important;
  font-weight:600 !important;
  line-height:1.4 !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs{background:var(--ink); padding:40px 0;}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  background:transparent; border-bottom:1px solid var(--line); padding:0; margin:0 0 28px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent !important; border:none !important;
  border-bottom:2px solid transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:var(--paper-dim); letter-spacing:.06em; text-transform:uppercase;
  padding:12px 20px; display:block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--gold) !important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--gold) !important;}
.woocommerce div.product .woocommerce-tabs .panel{background:var(--ink); color:var(--paper-dim); font-size:16px; line-height:1.8;}
.woocommerce div.product .woocommerce-tabs .panel h2{font-family:'Fraunces', serif; font-size:clamp(20px,2.5vw,28px); color:var(--cream-text); margin-bottom:16px;}

/* Sticky mobile bar */
.cg-sticky-bar{
  position:fixed; left:0; right:0; bottom:0;
  z-index:9990;
  background:var(--ink-panel);
  border-top:1px solid var(--line);
  padding:14px 20px;
  display:none;
  align-items:center; justify-content:space-between; gap:16px;
  transform:translateY(100%);
  transition:transform .3s ease;
  box-shadow:0 -10px 30px rgba(0,0,0,0.4);
}
.cg-sticky-bar.show{display:flex; transform:translateY(0);}
.cg-sticky-info{display:flex; flex-direction:column; overflow:hidden;}
.cg-sticky-title{
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:var(--paper-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;
}
.cg-sticky-price{color:var(--gold); font-family:'IBM Plex Mono', monospace; font-size:16px; font-weight:700; margin-top:2px;}
.cg-sticky-btn{white-space:nowrap; flex-shrink:0;}
@media(min-width:901px){.cg-sticky-bar{display:none !important;}}

/* PhotoSwipe */
.pswp__bg{background:#0f0e0b !important;}
.pswp__caption{background:rgba(29,27,20,0.9) !important;}

@media(max-width:900px){
  .woocommerce div.product{padding:30px 20px 20px;}
  .cg-trust-badges{grid-template-columns:1fr !important; gap:10px !important;}
  .cg-trust-badge{flex-direction:row !important; text-align:left !important; padding:14px 16px !important;}
  .cg-trust-icon{font-size:22px !important;}
  .woocommerce div.product form.cart{flex-wrap:wrap !important;}
  .woocommerce div.product form.cart .single_add_to_cart_button{width:100% !important;}
}

/* Product title */
.woocommerce div.product .product_title{
  font-family:'Fraunces', serif;
  font-size:clamp(26px, 3.2vw, 42px);
  color:var(--cream-text);
  line-height:1.2;
  margin-bottom:16px;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--gold) !important;
  font-family:'IBM Plex Mono', monospace;
  font-size:28px !important;
  font-weight:700;
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 20px;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del{
  opacity:.45;
  font-size:17px !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins{
  text-decoration:none !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--paper-dim);
  font-size:16px;
  line-height:1.8;
  margin-bottom:24px;
  border-top:1px solid var(--line);
  padding-top:20px;
}

/* Gallery — full width in its column */
.woocommerce div.product div.images{
  border-radius:10px;
  overflow:hidden;
  grid-column:1;
  grid-row:1 / 3;
}
.woocommerce div.product div.images img{
  border-radius:10px;
  width:100% !important;
}

/* Thumbnails */
.woocommerce div.product div.images .flex-control-thumbs{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  padding:0;
  list-style:none;
}
.woocommerce div.product div.images .flex-control-thumbs li{
  width:72px !important;
  flex-shrink:0;
}
.woocommerce div.product div.images .flex-control-thumbs img{
  border-radius:6px;
  border:2px solid var(--line);
  opacity:.6;
  transition:opacity .2s ease, border-color .2s ease;
  width:72px !important;
  height:72px !important;
  object-fit:cover !important;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover{
  opacity:1;
  border-color:var(--gold);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image{cursor:zoom-in;}

/* Summary column */
.woocommerce div.product div.summary{
  grid-column:2;
  padding:0;
}

/* Quantity input */
.woocommerce div.product form.cart .qty{
  background:var(--ink-panel) !important;
  border:1px solid var(--line) !important;
  color:var(--cream-text) !important;
  border-radius:8px;
  padding:14px 18px;
  font-size:18px;
  width:80px;
  text-align:center;
}

/* Add to Cart button — the most important button on site */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button{
  background:var(--gold) !important;
  color:var(--ink) !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  padding:18px 36px !important;
  border-radius:10px !important;
  border:none !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
  cursor:pointer !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 14px 32px rgba(185,139,78,0.45) !important;
}

/* form.cart row — qty + button side by side */
.woocommerce div.product form.cart{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
}
.woocommerce div.product form.cart .qty{flex-shrink:0;}
.woocommerce div.product form.cart .single_add_to_cart_button{flex:1;}

/* YITH add-ons (engraving fields) */
[class*="yith-wapo"]{
  background:var(--ink-panel) !important;
  color:var(--paper-dim) !important;
  border-color:var(--line) !important;
  border-radius:8px !important;
  margin-bottom:20px !important;
}
[class*="yith-wapo"] input[type="text"],
[class*="yith-wapo"] textarea{
  background:var(--ink-soft) !important;
  color:var(--cream-text) !important;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  padding:12px 16px !important;
  font-size:16px !important;
  width:100% !important;
}
[class*="yith-wapo"] input[type="text"]:focus,
[class*="yith-wapo"] textarea:focus{
  border-color:var(--gold) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(185,139,78,0.15) !important;
}
[class*="yith-wapo"] label{
  color:var(--gold) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  margin-bottom:8px !important;
  display:block !important;
}

/* Trust badges after Add to Cart */
.cg-trust-badges{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.cg-trust-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:18px 10px;
  background:rgba(185,139,78,0.06);
  border:1px solid rgba(185,139,78,0.3);
  border-radius:10px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.cg-trust-badge:hover{
  background:rgba(185,139,78,0.12);
  border-color:var(--gold);
  transform:translateY(-3px);
}
.cg-trust-icon{font-size:28px; line-height:1;}
.cg-trust-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--cream-text);
  font-weight:600;
  line-height:1.4;
}

/* Tabs section */
.woocommerce div.product .woocommerce-tabs{
  background:var(--ink);
  padding:50px 60px;
  border-top:1px solid var(--line);
  grid-column:1 / -1;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  background:transparent;
  border-bottom:1px solid var(--line);
  padding:0; margin:0 0 32px;
  display:flex; gap:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent !important;
  border:none !important;
  border-bottom:2px solid transparent !important;
  margin:0; padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--paper-dim);
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:14px 24px;
  display:block;
  transition:color .2s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom-color:var(--gold) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--gold) !important;
}
.woocommerce div.product .woocommerce-tabs .panel{
  background:var(--ink);
  color:var(--paper-dim);
  font-size:16px;
  line-height:1.8;
}
.woocommerce div.product .woocommerce-tabs .panel h2{
  font-family:'Fraunces', serif;
  font-size:clamp(22px, 2.5vw, 30px);
  color:var(--cream-text);
  margin-bottom:20px;
}

/* Sticky mobile add-to-cart bar — sits above bottom tab bar */
.cg-sticky-bar{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:9990;
  background:var(--ink-panel);
  border-top:1px solid var(--line);
  padding:14px 20px;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  transform:translateY(100%);
  transition:transform .3s ease;
  box-shadow:0 -10px 30px rgba(0,0,0,0.4);
}
.cg-sticky-bar.show{display:flex; transform:translateY(0);}
.cg-sticky-info{display:flex; flex-direction:column; overflow:hidden;}
.cg-sticky-title{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--paper-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:180px;
}
.cg-sticky-price{
  color:var(--gold);
  font-family:'IBM Plex Mono', monospace;
  font-size:16px;
  font-weight:700;
  margin-top:2px;
}
.cg-sticky-btn{white-space:nowrap; flex-shrink:0;}

/* PhotoSwipe lightbox */
.pswp__bg{background:#0f0e0b !important;}
.pswp__caption{background:rgba(29,27,20,0.9) !important;}

/* Tablet */
@media(max-width:900px){
  .woocommerce div.product{
    grid-template-columns:1fr;
    gap:36px;
    padding:36px 24px 30px;
  }
  .woocommerce div.product div.images{grid-row:auto;}
  .woocommerce div.product .woocommerce-tabs{padding:40px 24px;}
  .cg-trust-badges{grid-template-columns:1fr; gap:10px;}
  .cg-trust-badge{flex-direction:row; text-align:left; padding:14px 16px;}
  .cg-trust-icon{font-size:22px;}
  .cg-sticky-bar{display:flex;}
  @media(min-width:901px){.cg-sticky-bar{display:none !important;}}
}
@media(max-width:600px){
  .woocommerce div.product{padding:24px 16px 20px;}
  .woocommerce div.product .woocommerce-tabs{padding:30px 16px;}
  .woocommerce div.product form.cart{flex-direction:column; align-items:stretch;}
  .woocommerce div.product form.cart .qty{width:100%;}
}

/* ═══════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════ */
.page-hero{padding:70px 48px 40px; max-width:680px;}
.page-hero h1{font-size:clamp(34px,4.6vw,58px); margin-top:12px;}
.page-hero p{margin-top:18px; color:var(--paper-dim); font-size:17px;}
.contact-section{padding:10px 48px 90px;}
.contact-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:44px; align-items:start;}
.contact-left{display:flex; flex-direction:column; gap:22px;}
.contact-card{border:1px solid var(--line); padding:26px 28px; border-radius:3px;}
.contact-card-icon{font-size:20px; margin-bottom:10px;}
.contact-card h3{font-family:'Fraunces', serif; font-size:18px; margin-bottom:8px;}
.contact-card p{color:var(--paper-dim); font-size:14px; margin-bottom:14px;}
.contact-detail{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.06em; color:var(--gold-soft);}
.btn-whatsapp{
  display:inline-flex; align-items:center; gap:9px;
  background:#25D366; color:#fff;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 22px; border-radius:2px; transition:background .2s ease, transform .2s ease;
}
.btn-whatsapp:hover{background:#1ebe5d; transform:translateY(-2px);}
.contact-right{border:1px solid var(--line); padding:36px; border-radius:3px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:7px;}
.form-group input, .form-group select, .form-group textarea{
  width:100%; background:var(--ink-soft); border:1px solid var(--line); color:var(--cream-text);
  font-family:'Newsreader', serif; font-size:16px; padding:12px 14px; border-radius:2px; outline:none; box-sizing:border-box;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--gold);}
.btn-wa-submit{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); color:var(--ink);
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:15px 28px; border-radius:2px; margin-top:6px; transition:background .2s ease;
}
.btn-wa-submit:hover{background:var(--gold-soft);}
@media(max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-section{padding:10px 22px 70px;}
  .page-hero{padding:50px 22px 30px;}
  .contact-right{padding:26px 20px;}
}

/* ═══════════════════════════════════════
   OUR STORY PAGE
═══════════════════════════════════════ */
.story-origin{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:20px 48px 80px;}
.story-origin-text h2{font-size:clamp(26px,3.2vw,42px); margin:12px 0 18px;}
.story-origin-text p{color:var(--paper-dim); font-size:16px; line-height:1.75; margin-bottom:14px;}
.story-origin-img img{width:100%; border-radius:3px; object-fit:cover; max-height:540px;}
.story-stats{background:var(--ink-panel); padding:64px 48px; display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-item{text-align:center;}
.stat-num{font-family:'Fraunces', serif; font-size:clamp(32px,3.6vw,50px); color:var(--gold-soft); display:block;}
.stat-label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); opacity:.7; margin-top:8px; display:block;}
.story-vp{padding:80px 48px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.story-vp-img img{width:100%; border-radius:3px; object-fit:cover; max-height:560px; filter:drop-shadow(0 18px 40px rgba(0,0,0,0.45));}
.story-vp-text h2{font-size:clamp(24px,2.8vw,38px); margin:12px 0 18px;}
.story-vp-text p{color:var(--paper-dim); font-size:16px; line-height:1.75; margin-bottom:14px;}
.vp-badge{display:inline-flex; align-items:center; gap:11px; border:1px solid rgba(185,139,78,0.4); padding:13px 18px; border-radius:2px; margin-top:10px;}
.vp-badge-text{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft); line-height:1.5;}
.story-trusted{padding:64px 48px; background:var(--ink-panel);}
.story-trusted h2{font-size:clamp(24px,2.8vw,36px); margin-bottom:36px;}
.trusted-cat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.trusted-cat-item{border:1px solid var(--line); padding:22px 24px; border-radius:3px;}
.trusted-cat-icon{font-size:19px; margin-bottom:9px;}
.trusted-cat-item h4{font-family:'Fraunces', serif; font-size:17px; margin-bottom:5px;}
.trusted-cat-item p{color:var(--paper-dim); opacity:.7; font-size:13.5px;}
.story-store{padding:74px 48px; text-align:center; border-top:1px solid var(--line);}
.story-store h2{font-size:clamp(26px,3.2vw,44px); margin:10px 0 14px;}
.story-store p{color:var(--paper-dim); font-size:16px; max-width:46ch; margin:0 auto 28px;}
.store-badge{display:inline-block; background:rgba(185,139,78,0.1); border:1px solid rgba(185,139,78,0.35); color:var(--gold-soft); font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:13px 26px; border-radius:2px;}
.story-cta{padding:74px 48px; display:flex; flex-direction:column; align-items:center; gap:18px; background:var(--ink-panel);}
.story-cta h2{font-size:clamp(24px,2.8vw,38px); text-align:center;}
.story-cta p{color:var(--paper-dim); opacity:.8; font-size:16px; text-align:center; max-width:42ch;}
.btn-wa-large{
  display:inline-flex; align-items:center; gap:11px;
  background:#25D366; color:#fff;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:17px 32px; border-radius:2px; margin-top:6px; transition:background .2s ease;
}
.btn-wa-large:hover{background:#1ebe5d;}
@media(max-width:860px){
  .story-origin{grid-template-columns:1fr; gap:36px; padding:20px 22px 60px;}
  .story-stats{grid-template-columns:repeat(2, 1fr); padding:44px 22px;}
  .story-vp{grid-template-columns:1fr; gap:36px; padding:50px 22px;}
  .story-trusted{padding:50px 22px;}
  .trusted-cat-grid{grid-template-columns:1fr;}
  .story-store{padding:50px 22px;}
  .story-cta{padding:50px 22px;}
}

/* ═══════════════════════════════════════
   HAMPER BUILDER
═══════════════════════════════════════ */
.hb-hero{padding:60px 48px 36px;}
.hb-hero h1{font-size:clamp(30px,4.2vw,52px); margin-top:12px;}
.hb-hero p{color:var(--paper-dim); opacity:.8; font-size:15.5px; margin-top:14px; max-width:52ch;}
.hb-wrap{padding:18px 48px 60px; display:flex; gap:44px; align-items:flex-start;}
.hb-main{flex:1 1 620px; display:flex; flex-direction:column; gap:50px;}
.hb-summary{flex:0 0 290px; position:sticky; top:20px; border:1px solid var(--line); border-radius:3px; padding:26px; background:var(--ink-panel);}
.hb-step-label{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:9px; margin-bottom:5px;}
.hb-step-label .num{width:23px; height:23px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10.5px; flex-shrink:0;}
.hb-step-title{font-family:'Fraunces', serif; font-size:20px; margin-bottom:5px;}
.hb-step-sub{color:var(--paper-dim); opacity:.65; font-size:13.5px; margin-bottom:18px;}
.hb-box-note{background:rgba(185,139,78,0.1); border:1px solid rgba(185,139,78,0.35); border-radius:2px; padding:13px 17px; margin-bottom:18px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--gold-soft); display:none;}
.hb-box-note.show{display:block;}
.hb-options{display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:15px;}
.hb-option{border:1px solid var(--line); border-radius:3px; padding:14px; cursor:pointer; transition:border-color .2s ease, background .2s ease, opacity .2s ease; background:var(--ink-soft);}
.hb-option:hover{border-color:rgba(185,139,78,0.5);}
.hb-option.selected{border-color:var(--gold); background:rgba(185,139,78,0.08);}
.hb-option.disabled{opacity:.35; cursor:not-allowed; pointer-events:none;}
.hb-option img{width:100%; height:88px; object-fit:cover; border-radius:2px; margin-bottom:9px; background:#fff;}
.hb-option-name{font-family:'Fraunces', serif; font-size:13.5px; color:var(--cream-text); margin-bottom:4px; line-height:1.3;}
.hb-option-price{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--gold-soft);}
.hb-option-check{display:inline-block; width:12px; height:12px; border:1px solid var(--line); border-radius:50%; margin-right:6px; vertical-align:middle;}
.hb-option.selected .hb-option-check{background:var(--gold); border-color:var(--gold);}
.hb-option-cap{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--paper-dim); opacity:.55; display:block; margin-top:4px;}
.hb-summary h3{font-family:'Fraunces', serif; font-size:18px; margin-bottom:4px;}
.hb-summary-count{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--gold-soft); margin-bottom:16px; display:block;}
.hb-summary-line{display:flex; justify-content:space-between; font-size:12.5px; color:var(--paper-dim); padding:7px 0; border-bottom:1px solid var(--line); gap:10px;}
.hb-summary-line span:first-child{flex:1;}
.hb-summary-empty{color:var(--paper-dim); opacity:.5; font-size:12.5px; font-style:italic; padding:10px 0;}
.hb-total{display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.hb-total-label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft);}
.hb-total-amount{font-family:'Fraunces', serif; font-size:24px; color:var(--cream-text);}
.hb-order-btn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; background:#25D366; color:#fff; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:15px; border-radius:2px; margin-top:18px; transition:background .2s ease;}
.hb-order-btn:hover{background:#1ebe5d;}
.hb-order-btn.hb-disabled{background:#3a3a30; color:#888; pointer-events:none;}
@media(max-width:860px){
  .hb-hero, .hb-wrap{padding-left:22px; padding-right:22px;}
  .hb-wrap{flex-direction:column;}
  .hb-summary{position:static; width:100%;}
}
/* ═══════════════════════════════════════════════════════════════════════════
   HAMPER BUILDER — PHASE 1 ADDITIONS
   Append this entire block to the END of style.css
   (after the existing .hb- section — do not delete anything)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Progress bar — extended to 5 steps ─────────────────────────────────── */
.hb-progress-wrap{
  padding:0 48px 30px;
  max-width:860px;
}
.hb-progress-track{
  height:3px;
  background:var(--line);
  border-radius:2px;
  margin-bottom:16px;
  overflow:hidden;
}
.hb-progress-fill{
  height:100%;
  background:var(--gold);
  border-radius:2px;
  transition:width .4s ease;
  width:0%;
}
.hb-progress-labels{
  display:flex;
  justify-content:space-between;
  gap:6px;
}
.hb-progress-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  cursor:pointer;
  flex:1;
  text-align:center;
}
.hb-progress-dot{
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--paper-dim);
  background:var(--ink-soft);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.hb-prog-text{
  font-family:'IBM Plex Mono', monospace;
  font-size:9.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper-dim);
  opacity:.5;
  transition:opacity .25s ease, color .25s ease;
}
.hb-progress-label.active .hb-progress-dot{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
}
.hb-progress-label.active .hb-prog-text{
  opacity:1;
  color:var(--gold-soft);
}
.hb-progress-label.done .hb-progress-dot{
  background:rgba(185,139,78,0.25);
  border-color:var(--gold);
  color:var(--gold-soft);
}
.hb-progress-label.done .hb-prog-text{ opacity:.7; color:var(--gold-soft); }

@media(max-width:600px){
  .hb-progress-wrap{ padding:0 22px 24px; }
  .hb-prog-text{ display:none; }
  .hb-progress-dot{ width:22px; height:22px; font-size:9px; }
}

/* ── Gamified nudge bar ───────────────────────────────────────────────────── */
.hb-nudge-bar{
  margin:0 48px 20px;
  padding:13px 20px;
  background:rgba(185,139,78,0.1);
  border:1px solid rgba(185,139,78,0.3);
  border-radius:3px;
  animation:hb-nudge-in .4s ease;
}
@keyframes hb-nudge-in{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}
.hb-nudge-text{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--gold-soft);
}
@media(max-width:860px){ .hb-nudge-bar{ margin:0 22px 16px; } }

/* ── Step nav buttons ────────────────────────────────────────────────────── */
.hb-step-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:32px;
  padding-top:22px;
  border-top:1px solid var(--line);
  gap:14px;
  flex-wrap:wrap;
}
.hb-btn-next{
  background:var(--gold);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:14px 26px;
  border:none;
  border-radius:2px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.hb-btn-next:hover{ background:var(--gold-soft); transform:translateY(-2px); }
.hb-btn-back{
  background:transparent;
  color:var(--paper-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:14px 22px;
  border:1px solid var(--line);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.hb-btn-back:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

/* ── Step 4: Card style thumbnails ───────────────────────────────────────── */
.hb-card-style-label{
  margin-bottom:12px;
  display:block;
}
.hb-card-styles{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:14px;
  margin-bottom:6px;
}
.hb-card-style-opt{
  border-radius:6px;
  padding:18px 14px 14px;
  cursor:pointer;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.hb-card-style-opt:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.35); }
.hb-card-style-opt.selected{ box-shadow:0 0 0 2px var(--gold), 0 12px 28px rgba(0,0,0,0.35); }
.hb-card-style-opt img{
  width:100%; height:70px;
  object-fit:cover; border-radius:4px;
  margin-bottom:10px;
  display:block;
}
.hb-card-style-preview-text{
  display:block;
  font-size:34px;
  margin-bottom:8px;
  line-height:1;
}
.hb-card-style-name{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.hb-card-style-price{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
}

/* ── Font picker buttons ─────────────────────────────────────────────────── */
.hb-font-opts{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.hb-font-btn{
  padding:10px 18px;
  background:var(--ink-soft);
  border:1px solid var(--line);
  color:var(--paper-dim);
  border-radius:2px;
  font-size:14px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.hb-font-btn:hover{ border-color:rgba(185,139,78,0.5); color:var(--cream-text); }
.hb-font-btn.selected{
  border-color:var(--gold);
  color:var(--gold-soft);
  background:rgba(185,139,78,0.1);
}

/* ── Message textarea ────────────────────────────────────────────────────── */
.hb-msg-section{ margin-top:6px; }
.hb-msg-textarea{
  width:100%;
  background:var(--ink-soft);
  border:1px solid var(--line);
  color:var(--cream-text);
  font-family:'Newsreader', serif;
  font-size:16px;
  padding:16px 18px;
  border-radius:3px;
  resize:vertical;
  min-height:110px;
  outline:none;
  box-sizing:border-box;
  transition:border-color .2s ease;
  line-height:1.6;
}
.hb-msg-textarea:focus{ border-color:var(--gold); }
.hb-msg-textarea::placeholder{ color:var(--paper-dim); opacity:.45; font-style:italic; }
.hb-msg-count{
  text-align:right;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--paper-dim);
  opacity:.5;
  margin-top:6px;
}

/* ── Card live preview ───────────────────────────────────────────────────── */
.hb-card-preview-wrap{
  display:flex;
  justify-content:center;
  margin:16px 0 8px;
}
.hb-card-preview{
  width:100%;
  max-width:420px;
  perspective:800px;
}
.hb-card-preview-inner{
  border-radius:6px;
  padding:32px 36px;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
  transition:background .35s ease, color .35s ease, border .35s ease, font-family .35s ease;
}
.hb-card-brand{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.55;
}
.hb-card-msg{
  font-size:17px;
  line-height:1.6;
  flex:1;
  transition:font-family .25s ease;
  white-space:pre-wrap;
  word-break:break-word;
}
.hb-card-footer{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:.08em;
  opacity:.5;
  text-align:right;
}

/* ── Step 5: Review grid ─────────────────────────────────────────────────── */
.hb-review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
  margin-bottom:22px;
}
.hb-review-card{
  background:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:4px;
  padding:20px 18px;
}
.hb-review-card-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.hb-review-icon{ font-size:18px; }
.hb-review-card-head strong{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold-soft);
}
.hb-review-lines{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.hb-review-lines li{
  font-size:13px;
  color:var(--paper-dim);
  line-height:1.45;
}
.hb-review-total-card{
  grid-column:1/-1;
  background:rgba(185,139,78,0.07);
  border:1px solid rgba(185,139,78,0.35);
  border-radius:4px;
  padding:22px 24px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.hb-review-total-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-soft);
  flex:1;
}
.hb-review-total-amount{
  font-family:'Fraunces', serif;
  font-size:30px;
  color:var(--cream-text);
}
.hb-review-total-note{
  width:100%;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--paper-dim);
  opacity:.5;
  letter-spacing:.03em;
}

/* ── Share for approval row ─────────────────────────────────────────────── */
.hb-share-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:var(--ink-panel);
  border:1px solid var(--line);
  border-radius:3px;
  padding:18px 20px;
  flex-wrap:wrap;
}
.hb-share-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  background:#25D366;
  color:#fff;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:12px 20px;
  border:none;
  border-radius:2px;
  cursor:pointer;
  transition:background .2s ease;
}
.hb-share-btn:hover{ background:#1ebe5d; }
.hb-share-hint{
  font-family:'Newsreader', serif;
  font-style:italic;
  font-size:13.5px;
  color:var(--paper-dim);
  opacity:.7;
  line-height:1.55;
}

@media(max-width:600px){
  .hb-review-grid{ grid-template-columns:1fr; }
  .hb-card-preview-inner{ padding:24px 22px; }
  .hb-card-styles{ grid-template-columns:repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PRESET HAMPERS — append to END of style.css
   ═══════════════════════════════════════════════════════════════════════════ */
.hb-preset-section{
  padding:36px 48px 8px;
}
.hb-preset-title{
  font-family:'Fraunces', serif;
  font-size:22px;
  color:var(--cream-text);
  margin-top:8px;
  margin-bottom:20px;
}
.hb-preset-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
}
.hb-preset-card{
  flex:0 0 240px;
  background:var(--ink-panel);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
  position:relative;
  scroll-snap-align:start;
  transition:border-color .25s ease, transform .25s ease;
}
.hb-preset-card:hover{ border-color:rgba(185,139,78,0.45); transform:translateY(-4px); }
.hb-preset-badge{
  position:absolute; top:10px; left:10px;
  background:var(--gold); color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:2px;
  z-index:2;
}
.hb-preset-card img{ width:100%; height:140px; object-fit:cover; background:#fff; }
.hb-preset-body{ padding:16px 16px 18px; }
.hb-preset-body h4{ font-family:'Fraunces', serif; font-size:16px; color:var(--cream-text); margin-bottom:6px; }
.hb-preset-body p{ color:var(--paper-dim); opacity:.75; font-size:12.5px; line-height:1.5; margin-bottom:10px; }
.hb-preset-count{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--gold-soft);
  opacity:.8;
  margin-bottom:12px;
}
.hb-preset-use-btn{
  width:100%;
  background:transparent;
  border:1px solid rgba(185,139,78,0.5);
  color:var(--gold-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:10px; border-radius:2px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.hb-preset-use-btn:hover{ background:var(--gold); color:var(--ink); }

@media(max-width:600px){
  .hb-preset-section{ padding:26px 22px 4px; }
  .hb-preset-card{ flex:0 0 200px; }
}
/* ═══════════════════════════════════════
   CART MOBILE — FINAL OVERRIDE
   Kills WooCommerce core plugin CSS that injects
   "Product:", "Price:", "Quantity:" labels via ::before,
   and forces the grid layout to actually apply.
   Placed at end of file = wins cascade over WC's own CSS.
═══════════════════════════════════════ */
@media(max-width:768px){
  html body.woocommerce-cart table.shop_table_responsive tr td::before,
  html body.woocommerce-cart table.shop_table tr td::before,
  html body.woocommerce-cart table.cart tr td::before{
    content:none !important;
    display:none !important;
  }

  html body.woocommerce-cart table.shop_table_responsive,
  html body.woocommerce-cart table.shop_table,
  html body.woocommerce-cart table.cart{
    border:none !important;
  }

  /* SCOPED 09 Sep 2026 — was `tbody tr`, which also matched the final
     row of the cart table. That row is not a product: it holds the
     coupon box and the update button. Turning it into a 110px|1fr card
     grid crushed the coupon into the narrow photo column and left the
     wide column empty. Adding WooCommerce's real line-item class here
     fixes the cause; nothing downstream has to fight it any more. */
  html body.woocommerce-cart table.shop_table_responsive tbody tr.woocommerce-cart-form__cart-item,
  html body.woocommerce-cart table.shop_table tbody tr.woocommerce-cart-form__cart-item,
  html body.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item{
    display:grid !important;
    grid-template-columns:110px 1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:0 14px !important;
    background:var(--ink-panel) !important;
    border:1px solid var(--line) !important;
    border-radius:16px !important;
    padding:16px !important;
    margin-bottom:14px !important;
    position:relative !important;
  }

  html body.woocommerce-cart table.shop_table_responsive td.product-thumbnail,
  html body.woocommerce-cart table.shop_table td.product-thumbnail{
    display:block !important;
    grid-column:1 !important;
    grid-row:1 / 4 !important;
    width:110px !important;
    padding:0 !important;
  }
  html body.woocommerce-cart table.shop_table_responsive td.product-thumbnail img,
  html body.woocommerce-cart table.shop_table td.product-thumbnail img{
    display:block !important;
    width:110px !important;
    height:110px !important;
    object-fit:cover !important;
    border-radius:12px !important;
    border:2px solid var(--gold) !important;
  }

  html body.woocommerce-cart table.shop_table_responsive td.product-name,
  html body.woocommerce-cart table.shop_table td.product-name{
    display:block !important;
    grid-column:2 !important;
    grid-row:1 !important;
    padding:0 !important;
    text-align:left !important;
  }
  html body.woocommerce-cart table.shop_table_responsive td.product-name a,
  html body.woocommerce-cart table.shop_table td.product-name a{
    font-size:15px !important;
    color:var(--cream-text) !important;
  }
  html body.woocommerce-cart td.product-name dl.variation{
    font-size:12px !important;
    color:var(--paper-dim) !important;
  }

  html body.woocommerce-cart table.shop_table_responsive td.product-price,
  html body.woocommerce-cart table.shop_table td.product-price{
    display:block !important;
    grid-column:2 !important;
    grid-row:2 !important;
    padding:6px 0 0 !important;
    text-align:left !important;
    font-size:13px !important;
    color:var(--paper-dim) !important;
  }
  html body.woocommerce-cart table.shop_table_responsive td.product-subtotal,
  html body.woocommerce-cart table.shop_table td.product-subtotal{
    display:none !important;
  }

  html body.woocommerce-cart table.shop_table_responsive td.product-quantity,
  html body.woocommerce-cart table.shop_table td.product-quantity{
    display:flex !important;
    grid-column:2 !important;
    grid-row:3 !important;
    padding:8px 0 0 !important;
    align-items:center !important;
    text-align:left !important;
  }
  html body.woocommerce-cart td.product-quantity .qty{
    width:52px !important;
    height:36px !important;
    text-align:center !important;
    background:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:8px !important;
    color:var(--cream-text) !important;
  }

  html body.woocommerce-cart table.shop_table_responsive td.product-remove,
  html body.woocommerce-cart table.shop_table td.product-remove{
    display:block !important;
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    grid-column:unset !important;
    width:auto !important;
    padding:0 !important;
  }
  html body.woocommerce-cart td.product-remove a.remove{
    width:28px !important;
    height:28px !important;
    line-height:28px !important;
    font-size:18px !important;
    border-radius:50% !important;
    border:1px solid var(--line) !important;
    color:var(--paper-dim) !important;
    background:transparent !important;
  }
}

/* ═══════════════════════════════════════
   CART — COUPON + TOTALS FINAL REDESIGN
   (appended last = wins over WooCommerce core CSS)
═══════════════════════════════════════ */
@media(max-width:768px){

  /* ── COUPON — stacked, full-width, no squish ── */
  html body.woocommerce-cart .cart-collaterals .coupon,
  html body.woocommerce-cart .woocommerce-cart-form .coupon{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    background:var(--ink-panel) !important;
    border:2px dashed rgba(185,139,78,0.5) !important;
    border-radius:14px !important;
    padding:20px 18px !important;
    margin:16px 0 !important;
    width:auto !important;
  }
  html body.woocommerce-cart .coupon::before{
    content:"🎁 Have a coupon code?" !important;
    display:block !important;
    font-size:14px !important;
    font-weight:600 !important;
    color:var(--gold) !important;
    font-family:'IBM Plex Mono', monospace !important;
    margin-bottom:2px !important;
  }
  html body.woocommerce-cart .coupon label{
    display:none !important;
  }
  html body.woocommerce-cart .coupon #coupon_code{
    display:block !important;
    width:100% !important;
    height:46px !important;
    background:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:8px !important;
    color:var(--cream-text) !important;
    font-size:14px !important;
    padding:0 14px !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }
  html body.woocommerce-cart .coupon .button{
    display:block !important;
    width:100% !important;
    height:46px !important;
    line-height:46px !important;
    padding:0 !important;
    background:var(--gold) !important;
    color:var(--ink) !important;
    border-radius:8px !important;
    font-weight:700 !important;
    font-size:13px !important;
    text-align:center !important;
    margin:0 !important;
  }

  /* ── CART TOTALS — cleaner hierarchy ── */
  html body.woocommerce-cart .cart_totals{
    background:var(--ink-panel) !important;
    border:1px solid var(--line) !important;
    border-radius:16px !important;
    padding:22px !important;
    margin-top:16px !important;
    margin-bottom:100px !important;
  }
  html body.woocommerce-cart .cart_totals h2{
    font-size:19px !important;
    margin-bottom:14px !important;
    padding-bottom:14px !important;
    border-bottom:1px solid var(--line) !important;
  }
  html body.woocommerce-cart .cart_totals table{
    width:100% !important;
  }
  html body.woocommerce-cart .cart_totals table tr{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    border-bottom:1px solid var(--line) !important;
    padding:12px 0 !important;
  }
  html body.woocommerce-cart .cart_totals table tr:last-child{
    border-bottom:none !important;
  }
  html body.woocommerce-cart .cart_totals table th,
  html body.woocommerce-cart .cart_totals table td{
    border:none !important;
    padding:0 !important;
    font-size:14px !important;
    text-align:left !important;
  }
  /* Shipping row destination text */
  html body.woocommerce-cart .cart_totals table td{
    text-align:right !important;
    color:var(--cream-text) !important;
  }
  html body.woocommerce-cart .cart_totals .shipping-calculator-button{
    color:var(--gold) !important;
    font-size:12px !important;
  }
  /* Order Total row — make it stand out */
  html body.woocommerce-cart .cart_totals .order-total th,
  html body.woocommerce-cart .cart_totals .order-total td{
    font-size:20px !important;
    font-weight:700 !important;
    color:var(--gold) !important;
  }
}

/* ═══════════════════════════════════════
   CART — WIDTH + BUTTON WRAP FIX
   (final pass — appended last for max priority)
═══════════════════════════════════════ */
@media(max-width:768px){

  /* Coupon box was shrinking to content width — force full width */
  html body.woocommerce-cart .cart-collaterals,
  html body.woocommerce-cart .woocommerce-cart-form,
  html body.woocommerce-cart .woocommerce-cart-form__contents{
    width:100% !important;
    max-width:100% !important;
  }
  html body.woocommerce-cart .cart-collaterals .coupon,
  html body.woocommerce-cart .woocommerce-cart-form .coupon{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  html body.woocommerce-cart .coupon::before{
    white-space:normal !important;
    line-height:1.4 !important;
  }

  /* Checkout button — never wrap, always full width, one line */
  html body.woocommerce-cart .wc-proceed-to-checkout{
    width:100% !important;
    padding:0 !important;
  }
  html body.woocommerce-cart .wc-proceed-to-checkout .checkout-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:52px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    font-size:14px !important;
    padding:0 12px !important;
    box-sizing:border-box !important;
  }

  /* Cart totals box — full width too */
  html body.woocommerce-cart .cart_totals{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Shipping address text — tighter, less line-wrap chaos */
  html body.woocommerce-cart .woocommerce-shipping-destination{
    font-size:13px !important;
    line-height:1.5 !important;
  }

  /* Offer tab — never overlap the checkout button area */
  .cg-offer-tab{
    bottom:170px !important;
  }
}

/* ═══════════════════════════════════════
   CART — COUPON FLOAT BUG (root cause found)
   WooCommerce core CSS floats .coupon at 48% width
   to sit beside the Update Cart button. Never killed
   float before — that's why box stayed half-width.
═══════════════════════════════════════ */
@media(max-width:768px){
  html body.woocommerce-cart form.woocommerce-cart-form .coupon,
  html body.woocommerce-cart .coupon{
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }
  /* Hide the Update Cart button on mobile — cart auto-recalculates on qty change is cleaner UX, and this button was likely floating beside coupon causing the squeeze */
  html body.woocommerce-cart form.woocommerce-cart-form > button[name="update_cart"]{
    display:none !important;
  }
  /* Ensure the whole cart form and its direct children never float/shrink */
  html body.woocommerce-cart form.woocommerce-cart-form{
    display:block !important;
    width:100% !important;
  }
  html body.woocommerce-cart form.woocommerce-cart-form > *{
    float:none !important;
  }
}

/* ═══════════════════════════════════════
   CART — COUPON WIDTH, ATTEMPT 3
   Covers flex-basis/flex-grow in case the parent
   uses a flex 2-column desktop layout instead of float,
   which the earlier float:none fix wouldn't touch.
═══════════════════════════════════════ */
@media(max-width:768px){
  html body.woocommerce-cart .woocommerce,
  html body.woocommerce-cart .woocommerce > *,
  html body.woocommerce-cart form.woocommerce-cart-form{
    display:block !important;
    flex-direction:column !important;
  }
  html body.woocommerce-cart form.woocommerce-cart-form,
  html body.woocommerce-cart .coupon{
    flex:1 1 100% !important;
    flex-basis:100% !important;
    flex-grow:1 !important;
    flex-shrink:1 !important;
    -webkit-box-flex:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:100% !important;
  }
}

/* ═══════════════════════════════════════
   CG-COUPON-BOX — fresh custom markup
   (from woocommerce/cart/coupon.php override)
   No legacy WooCommerce class conflicts — 100% ours.
═══════════════════════════════════════ */
.cg-coupon-box{
  display:block;
  width:100%;
  box-sizing:border-box;
  background:var(--ink-panel);
  border:2px dashed rgba(185,139,78,0.5);
  border-radius:14px;
  padding:20px 18px;
  margin:20px 0;
}
.cg-coupon-heading{
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  font-weight:600;
  color:var(--gold);
  margin-bottom:14px;
}
.cg-coupon-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}
/* ENLARGED 09 Sep 2026 — the input was a thin 48px bar sitting under a
   much taller Apply button, so the field people actually have to type
   into looked like the smaller, secondary element. Now it is the
   biggest thing in the box. */
.cg-coupon-input{
  flex:1;
  min-width:0;
  height:58px;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--cream-text);
  font-size:16px;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:0 18px;
  box-sizing:border-box;
}
.cg-coupon-input::placeholder{
  color:var(--paper-dim);
  opacity:.6;
}
.cg-coupon-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(185,139,78,0.15);
}
.cg-coupon-btn{
  flex-shrink:0;
  height:48px;
  padding:0 24px;
  background:var(--gold);
  color:var(--ink);
  border:none;
  border-radius:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}
.cg-coupon-btn:hover{
  background:var(--gold-soft);
}
@media(max-width:480px){
  .cg-coupon-box{padding:22px 16px;}
  .cg-coupon-row{flex-direction:column; gap:12px;}
  .cg-coupon-input{height:60px; font-size:17px;}
  /* Apply is the smaller of the two now — the input leads. */
  .cg-coupon-btn{width:100%; height:50px;}
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE EXPERIENCE PACK — 09 Sep 2026
   Everything below was added in the Day-1 mobile pass.
   It is appended at the end on purpose: later rules win in CSS, so
   these fixes override anything above without editing old code.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. SCROLL ANIMATIONS (replaces the removed AOS library) ──
   .cg-anim is added by JavaScript only. So if JS fails, no element
   is ever left invisible — the content simply shows. */
.cg-anim{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.cg-anim.cg-in-view{
  opacity:1;
  transform:none;
  will-change:auto;
}
@media(prefers-reduced-motion: reduce){
  .cg-anim, .reveal, .cg-gallery-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ── 2. BODY SCROLL LOCK WHILE MENU IS OPEN ──
   position:fixed is the only method that reliably stops iOS Safari
   from scrolling the page behind an open panel. */
body.cg-menu-open{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}

/* ── 3. MOBILE MENU: CLOSE BUTTON ── */
.cg-mobile-close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(241,233,216,0.06);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--cream-text);
  cursor:pointer;
  padding:0;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.cg-mobile-close svg{width:20px; height:20px;}
.cg-mobile-close:active{transform:scale(.92);}
.cg-mobile-close:hover{background:rgba(185,139,78,0.18); color:var(--gold-soft);}

/* Hamburger morphs into an X so the button's state is obvious */
.cg-mobile-toggle span{transform-origin:center; transition:transform .25s ease, opacity .2s ease;}
.cg-mobile-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.cg-mobile-toggle.is-open span:nth-child(2){opacity:0;}
.cg-mobile-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── 4. MOBILE MENU: PANEL POLISH ── */
.cg-mobile-panel{
  padding-top:78px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
  height:100dvh;                 /* dvh ignores the mobile browser bar */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;   /* stops scroll "chaining" to the page */
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
}
.cg-mobile-panel a{
  min-height:48px;               /* comfortable thumb target */
  display:flex;
  align-items:center;
}
.cg-mobile-panel a:active{color:var(--gold-soft);}
.cg-mobile-panel .cg-msub-toggle{
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.cg-mobile-panel .cg-msub-toggle.open-icon{transform:translateY(-50%) rotate(45deg);}
.cg-mobile-panel ul ul.mopen{max-height:900px;}

.cg-mobile-panel-foot{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.cg-mpanel-wa{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#25D366;
  color:#08130b !important;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px !important;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:10px;
  padding:14px 16px !important;
  min-height:50px;
}
.cg-mobile-panel-foot p{
  margin:14px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--paper-dim);
  opacity:.55;
  text-align:center;
}

/* ── 5. BOTTOM TAB BAR — full styling ──
   NOTE: this bar had NO CSS anywhere in the theme files. If any
   bottom-tab rules are still sitting in Appearance → Customise →
   Additional CSS, delete them: Additional CSS loads last and would
   silently override everything below. */
.cg-bottom-tabs{
  display:none;                  /* desktop: hidden, turned on at ≤900px */
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:900;
  background:rgba(26,24,16,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);   /* clears the iPhone home bar */
  box-shadow:0 -6px 26px rgba(0,0,0,.4);
}
@media(max-width:900px){
  .cg-bottom-tabs{display:flex; align-items:stretch;}
}
.cg-tab-item{
  position:relative;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:9px 2px 8px;
  min-height:58px;
  color:var(--paper-dim);
  text-decoration:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:9.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s ease, transform .12s ease;
}
.cg-tab-item svg{width:21px; height:21px; display:block;}
.cg-tab-item span{opacity:.72; line-height:1;}

/* Raised gold circle for the centre "Hamper" tab */
.cg-tab-center{margin-top:-16px;}
.cg-tab-center-icon{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  opacity:1 !important;
  box-shadow:0 5px 16px rgba(185,139,78,.4);
  transition:box-shadow .2s ease;
}
.cg-tab-center-icon svg{width:23px; height:23px;}

.cg-tab-badge{
  position:absolute;
  top:4px;
  right:calc(50% - 20px);
  min-width:17px; height:17px;
  padding:0 4px;
  border-radius:9px;
  background:var(--gold);
  color:var(--ink);
  font-size:9.5px;
  font-weight:700;
  line-height:17px;
  text-align:center;
  opacity:1 !important;
}
.cg-tab-item.is-current{color:var(--gold-soft);}
.cg-tab-item.is-current svg{stroke:var(--gold-soft);}
.cg-tab-item.is-current span:not(.cg-tab-badge):not(.cg-tab-center-icon){opacity:1;}
/* small gold dot marking the current tab */
.cg-tab-item.is-current::before{
  content:'';
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
}
.cg-tab-item.cg-tab-center.is-current::before{display:none;}
.cg-tab-item.cg-tab-center.is-current .cg-tab-center-icon{
  box-shadow:0 0 0 3px rgba(185,139,78,.35);
}
.cg-tab-item:active{transform:scale(.94);}

/* Page content must not hide behind the fixed bar */
@media(max-width:900px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
}

/* ── 6. FLOATING WHATSAPP: HIDE ON MOBILE ──
   The bottom bar already has a Chat tab. Two WhatsApp buttons on one
   small screen just covered up product images. */
@media(max-width:900px){
  .wa-float{display:none !important;}
}

/* ── 7. GLOBAL MOBILE TAP-TARGET + READABILITY FLOOR ── */
@media(max-width:600px){
  /* iOS zooms the page in when a focused input is under 16px */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="password"],
  textarea, select{
    font-size:16px !important;
  }
  .button, button, .btn-primary, .btn-ghost,
  .single_add_to_cart_button, .checkout-button{
    min-height:48px;
  }
  /* Nothing should ever force a sideways scroll.
     clip (not hidden) is used deliberately: overflow:hidden turns the
     element into a scroll container and silently kills position:sticky
     on everything inside it — which would break the hamper builder's
     sticky price summary. clip contains the overflow without that side
     effect. The hidden line is only a fallback for old browsers. */
  body{overflow-x:hidden; overflow-x:clip; max-width:100%;}
  img, video{max-width:100%; height:auto;}
}

/* ── 8. STICKY ADD-TO-CART vs BOTTOM TAB BAR ──
   Both were pinned to bottom:0. The add-to-cart bar has z-index 9990,
   so on every product page it sat directly on top of the tab bar and
   hid it completely. Lifting it clear of the tabs keeps both usable. */
@media(max-width:900px){
  .cg-sticky-bar{
    bottom:calc(58px + env(safe-area-inset-bottom)) !important;
    box-shadow:0 -8px 22px rgba(0,0,0,.45);
  }
  /* Product pages need room for BOTH bars stacked up */
  body.single-product{
    padding-bottom:calc(140px + env(safe-area-inset-bottom));
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 1 — REPAIR PASS · 09 Sep 2026
   Cart · Checkout · Related products · Image ratios
   Appended last on purpose so these rules win the cascade.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. CART: stop the card-grid leaking onto the actions row ──
   THE BUG: the mobile block above turns EVERY `tbody tr` into a
   110px|1fr card grid. But WooCommerce's cart table ends with a row
   that is not a product at all — it holds the coupon box and the
   update button. That row became a grid too, so the coupon was
   crushed into the 110px photo column and the 1fr column sat empty.
   That is the cut-off coupon and the empty right-hand gutter.
   FIX: reset every row, then re-apply the card grid ONLY to rows
   carrying WooCommerce's real line-item class. */
@media(max-width:768px){

  /* With the grid rule above now scoped to real line items, this row is
     an ordinary full-width table row again. These rules only make sure
     nothing inherited from the card styling narrows it. */
  html body.woocommerce-cart table.shop_table tbody tr:not(.woocommerce-cart-form__cart-item){
    display:table-row !important;
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    margin:0 !important;
  }
  html body.woocommerce-cart table.shop_table td.actions{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    border:none !important;
    text-align:left !important;
  }
  html body.woocommerce-cart .cg-coupon-box{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* The card showed the unit price struck through while the line total
     was hidden — so the only number visible looked cancelled. Show the
     price plainly and bring the line total back on the right. */
  html body.woocommerce-cart table.shop_table td.product-price{
    text-decoration:none !important;
    color:var(--paper-dim) !important;
  }
  html body.woocommerce-cart table.shop_table_responsive td.product-subtotal,
  html body.woocommerce-cart table.shop_table td.product-subtotal{
    display:block !important;
    grid-column:2 !important;
    grid-row:3 !important;
    padding:8px 0 0 !important;
    text-align:right !important;
    align-self:center !important;
    font-family:'IBM Plex Mono', monospace !important;
    font-size:16px !important;
    font-weight:600 !important;
    color:var(--gold) !important;
  }
  html body.woocommerce-cart table.shop_table td.product-quantity{
    justify-self:start !important;
  }

  /* The product title runs under the absolutely-positioned remove (×)
     button in the card's top-right corner. Reserve room for it. */
  html body.woocommerce-cart table.shop_table td.product-name{
    padding-right:34px !important;
  }

  /* A sticky checkout button was tried here and removed: because it sits
     inside the totals card, scrolling parked it directly on top of the
     Total row. A plain full-width button below the total is shorter to
     reach and never hides the number the shopper is checking. */
  .woocommerce-cart .wc-proceed-to-checkout{
    position:static !important;
    padding:0 !important;
    margin:18px 0 0 !important;
  }
  .woocommerce-cart .checkout-button{margin-top:0 !important;}
}

/* Update-cart button is hidden everywhere (quantity now auto-saves via
   js/main.js), so hide it in CSS rather than with runtime inline styles. */
.woocommerce-cart .actions .button[name="update_cart"],
.woocommerce-cart button[name="update_cart"]{display:none !important;}

/* ── 2. CHECKOUT: collapse WooCommerce's two-column float ──
   THE BUG: WooCommerce wraps billing and shipping in `.col2-set`,
   a legacy float layout that never collapses on its own. On a phone
   the address fields kept their desktop widths and ran off-screen.
   There was no col2-set rule anywhere in this theme, so nothing was
   stopping it. */
@media(max-width:768px){
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout #customer_details,
  .woocommerce .col2-set{
    display:block !important;
    width:100% !important;
  }
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2,
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2{
    width:100% !important;
    float:none !important;
    padding:0 !important;
    margin:0 0 28px !important;
  }
  /* Every field full width — including the first/last name pair that
     WooCommerce normally floats side by side at 47% each. */
  .woocommerce-checkout .form-row,
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last,
  .woocommerce-checkout .form-row-wide{
    width:100% !important;
    float:none !important;
    padding:0 !important;
    margin:0 0 16px !important;
    clear:both !important;
  }
  .woocommerce-checkout input.input-text,
  .woocommerce-checkout textarea,
  .woocommerce-checkout select,
  .woocommerce-checkout .select2-container{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .woocommerce-checkout input.input-text,
  .woocommerce-checkout textarea{
    min-height:50px !important;
    padding:12px 14px !important;
    border-radius:8px !important;
  }
  .woocommerce-checkout label{
    display:block !important;
    margin-bottom:6px !important;
    font-family:'IBM Plex Mono', monospace !important;
    font-size:11px !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
  }
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading{
    width:100% !important;
    float:none !important;
    margin-top:24px !important;
  }
  .woocommerce-checkout table.shop_table{width:100% !important;}
  .woocommerce-checkout #place_order{
    width:100% !important;
    min-height:54px !important;
    font-size:15px !important;
    border-radius:12px !important;
  }
  /* Select2 dropdowns (State / Country) overflow by default */
  .woocommerce-checkout .select2-container .select2-selection--single{
    height:50px !important;
    display:flex !important;
    align-items:center !important;
    background:var(--ink-soft) !important;
    border:1px solid var(--line) !important;
    border-radius:8px !important;
  }
  .woocommerce-checkout .select2-selection__rendered{
    color:var(--cream-text) !important;
    padding-left:12px !important;
  }
}

/* ── 3. RELATED PRODUCTS: four columns, not two ──
   THE BUG: the grid was `repeat(2, 1fr)` across a nearly full-width
   section, making each card ~600px wide while the image stayed locked
   at height:300px. A portrait product photo got cropped into a wide
   letterbox strip, and the 19px title sprawled beneath it. That is the
   "small image, very long title" problem exactly. */
@media(max-width:1024px){
  .related.products ul.products,
  .up-sells ul.products{
    grid-template-columns:repeat(3, 1fr) !important;
    gap:20px !important;
  }
}
@media(max-width:768px){
  .related.products ul.products,
  .up-sells ul.products{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:14px !important;
  }
}

/* ── 4. IMAGE RATIO BOXES (replaces every fixed pixel height) ──
   A fixed `height:300px` crops differently at every card width. An
   aspect-ratio box keeps the same 4:5 portrait crop at any size, and
   because the browser knows the shape before the file arrives, the
   layout no longer jumps as images load. */
/* CORRECTED 09 Sep 2026 — the first version used aspect-ratio 4/5 with
   object-fit:cover, copying what the competitors do. That was wrong for
   THIS catalogue: Chapter Gifting's product photos are square-ish shots
   on a white background, so a 4:5 portrait crop sliced the top and
   bottom off every product. Square + contain instead: the whole product
   is always visible, never cut, and every tile is the same size. The
   white tile matches the photos' own background so it reads as one
   clean object rather than a picture floating on a dark card. */
.shop-wrap ul.products li.product a img,
.related.products ul.products li.product a img,
.up-sells ul.products li.product a img,
.woocommerce ul.products li.product a img{
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
  width:100% !important;
  background:#fff !important;
  padding:0 !important;
}

/* Title clamped to two lines so one long product name can never
   stretch a card taller than the others in its row. */
.shop-wrap ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product .woocommerce-loop-product__title,
.up-sells ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.shop-wrap ul.products li.product h2,
.related.products ul.products li.product h2,
.woocommerce ul.products li.product h2{
  /* CORRECTED AGAIN 09 Sep 2026. The previous note here was wrong: the
     loop <h2> is NOT a direct child of the flex li.product — WooCommerce
     wraps image + title + price in an <a class="woocommerce-LoopProduct-link">.
     So the h2 is a plain block child and -webkit-line-clamp works fine,
     ellipsis included.
     The real bug was the fixed height: with the global *{box-sizing:border-box}
     rule, height:2.8em INCLUDED the 20px of vertical padding, leaving barely
     one line of text and slicing the second line in half.
     Line-clamp counts lines instead of guessing pixels, so padding can
     never eat into the text again. */
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  line-height:1.4 !important;
  /* content-box is the load-bearing line. The theme sets
     *{box-sizing:border-box} globally, so an em-based height silently
     INCLUDES this element's 20px of padding — which is what sliced the
     second line in half and let a stray line bleed over the price.
     content-box makes 2.8em mean exactly two lines of text, padding
     added outside it. min and max are equal so the box cannot grow. */
  box-sizing:content-box !important;
  height:auto !important;
  min-height:2.8em !important;
  max-height:2.8em !important;
  overflow:hidden !important;
  flex:0 0 auto !important;
}

/* Related-products heading and padding tightened to match */
@media(max-width:1024px){
  .related.products,
  .up-sells.products{padding:52px 36px 64px !important;}
}

/* Smaller type inside related cards — they are secondary to the
   product being viewed and should not compete with it. */
.related.products ul.products li.product .woocommerce-loop-product__title,
.up-sells ul.products li.product .woocommerce-loop-product__title{
  font-size:15px !important;
  padding:14px 16px 6px !important;
}
.related.products ul.products li.product .price,
.up-sells ul.products li.product .price{
  font-size:15px !important;
  padding:0 16px 6px !important;
}
.related.products ul.products li.product .button,
.up-sells ul.products li.product .button{
  margin:10px 16px 16px !important;
  padding:11px 14px !important;
  font-size:11px !important;
}

/* Any image WordPress renders inside a ratio box must fill it */
li.product a img, .cg-gallery-item img{display:block;}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 — IMAGE-LED HOMEPAGE · 09 Sep 2026
   Category photo tiles + swipeable product rails.
═══════════════════════════════════════════════════════════════════ */

/* ── Shared section header (heading left, "View all" right) ── */
.cg-rail-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding-bottom:15px;
  margin-bottom:28px;
}
.cg-rail-head h2{
  font-family:'Fraunces', serif;
  font-size:clamp(23px, 2.6vw, 34px);
  font-weight:500;
  color:var(--cream-text);
  margin:0;
  line-height:1.15;
}
.cg-rail-more{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
  text-decoration:none;
  transition:color .2s ease;
}
.cg-rail-more:hover{color:var(--gold-soft);}
/* The bestsellers section reuses .section-head; keep its new link aligned */
.section-head .cg-rail-more{align-self:center;}

/* ── CATEGORY TILES ── */
.cg-cat-tiles-section{
  background:var(--ink);
  padding:66px 48px 60px;
  border-top:1px solid var(--line);
}
.cg-cat-tiles{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:20px;
}
.cg-cat-tile{
  display:flex;
  flex-direction:column;
  gap:11px;
  text-decoration:none;
}
.cg-cat-media{
  display:block;
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:14px;
  overflow:hidden;
  background:var(--ink-panel);
  border:1px solid var(--line);
  transition:border-color .3s ease, transform .3s ease;
}
.cg-cat-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.cg-cat-tile:hover .cg-cat-media{
  border-color:rgba(185,139,78,.6);
  transform:translateY(-4px);
}
.cg-cat-tile:hover .cg-cat-media img{transform:scale(1.07);}

/* Shown until a category photo is uploaded, so the row is never broken */
.cg-cat-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fraunces', serif;
  font-size:40px;
  color:var(--gold);
  opacity:.4;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(185,139,78,.14), transparent 70%),
    var(--ink-soft);
}
.cg-cat-label{display:flex; flex-direction:column; gap:3px;}
.cg-cat-name{
  font-family:'Fraunces', serif;
  font-size:15px;
  line-height:1.3;
  color:var(--cream-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cg-cat-count{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--paper-dim);
  opacity:.55;
}

/* ── PRODUCT RAILS ── */
.cg-rail-section{
  background:var(--ink);
  padding:56px 48px 60px;
  border-top:1px solid var(--line);
}
.cg-rail{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  /* Without scroll-padding the snapport ignores the container's own
     padding, so the browser scrolls the first card flush to the screen
     edge and the left gutter appears to vanish. */
  scroll-padding-left:48px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  padding-bottom:12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(185,139,78,.45) transparent;
}
.cg-rail::-webkit-scrollbar{height:5px;}
.cg-rail::-webkit-scrollbar-track{background:rgba(241,233,216,.06); border-radius:3px;}
.cg-rail::-webkit-scrollbar-thumb{background:rgba(185,139,78,.45); border-radius:3px;}

.cg-rail-card{
  flex:0 0 228px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:var(--ink-panel);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cg-rail-card:hover{
  border-color:rgba(185,139,78,.55);
  transform:translateY(-5px);
  box-shadow:0 18px 36px rgba(0,0,0,.4);
}
.cg-rail-media{
  position:relative;
  display:block;
  aspect-ratio:1 / 1;
  background:#fff;
  overflow:hidden;
}
/* contain, not cover — same reason as the product cards: these are
   white-background product shots and cropping cuts the product itself */
.cg-rail-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.cg-rail-badge{
  position:absolute;
  top:10px; left:10px;
  background:var(--gold);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  padding:4px 8px;
  border-radius:4px;
}
/* The two-line clamp lives on an INNER span, not here. A flex item gets
   "blockified" by the browser: display:-webkit-box becomes flow-root and
   -webkit-line-clamp silently stops working, letting a third line spill
   over the price. The inner span is not a flex item, so it clamps. */
.cg-rail-title{
  padding:14px 14px 6px;
  flex:0 0 auto;
}
.cg-rail-title > span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:'Fraunces', serif;
  font-size:14.5px;
  line-height:1.35;
  color:var(--cream-text);
  /* A fixed height (not min-height) is what actually guarantees two
     lines. Where -webkit-line-clamp applies you also get an ellipsis;
     where the browser blockifies it away, this height still clips
     cleanly so a long name can never run over the price. */
  height:2.7em;
}
.cg-rail-price{
  padding:0 14px 16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:15px;
  font-weight:600;
  color:var(--gold);
  margin-top:auto;
}
.cg-rail-price del{opacity:.45; font-size:12px; margin-right:6px; font-weight:400;}
.cg-rail-price ins{text-decoration:none;}

/* ── Tablet ── */
@media(max-width:1100px){
  .cg-cat-tiles{grid-template-columns:repeat(4, 1fr); gap:16px;}
  .cg-cat-tiles-section,
  .cg-rail-section{padding-left:36px; padding-right:36px;}
}

/* ── Mobile: tiles become a swipe rail too, so six categories fit in the
      height that two stacked rows would otherwise eat ── */
@media(max-width:900px){
  .cg-cat-tiles-section{padding:44px 0 40px;}
  .cg-rail-section{padding:40px 0 44px;}
  .cg-rail-head{
    margin:0 22px 20px;
    padding-bottom:12px;
  }
  .cg-cat-tiles{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-padding-left:22px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    padding:0 22px 8px;
    scrollbar-width:none;
  }
  .cg-cat-tiles::-webkit-scrollbar{display:none;}
  .cg-cat-tile{
    flex:0 0 128px;
    scroll-snap-align:start;
  }
  .cg-cat-name{font-size:13.5px;}

  .cg-rail{
    padding:0 22px 12px;
    scroll-padding-left:22px;
    scrollbar-width:none;
  }
  .cg-rail::-webkit-scrollbar{display:none;}
  .cg-rail-card{flex:0 0 162px;}
  .cg-rail-title{font-size:13px; padding:11px 11px 5px;}
  .cg-rail-price{font-size:13.5px; padding:0 11px 13px;}
  /* Touch devices have no hover; the lift just causes jitter on tap */
  .cg-rail-card:hover, .cg-cat-tile:hover .cg-cat-media{transform:none;}
}

@media(max-width:480px){
  .cg-cat-tile{flex:0 0 116px;}
  .cg-rail-card{flex:0 0 150px;}
}


/* ═══════════════════════════════════════════════════════════════════
   PRODUCT CARD AUDIT FIXES · 09 Sep 2026
   Found by measuring the rendered card at 1440 / 820 / 390px rather
   than by eye. Each item below is a defect the audit reported.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Narrow cards need three lines, not two ──
   At 390px a two-up grid gives each card ~150px of text width, so a name
   like "Luxury Black Metal Ballpoint Pen with Magnetic Stand" needs more
   lines than the same name on a wide desktop card. Line count now follows
   card width instead of being one fixed number everywhere. */
@media(max-width:768px){
  .shop-wrap ul.products li.product h2,
  .shop-wrap ul.products li.product .woocommerce-loop-product__title,
  .related.products ul.products li.product h2,
  .related.products ul.products li.product .woocommerce-loop-product__title,
  .up-sells ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    -webkit-line-clamp:3 !important;
    box-sizing:content-box !important;
    min-height:4.2em !important;
    max-height:4.2em !important;
    font-size:14px !important;
    padding:12px 13px 6px !important;
  }
}

/* ── 2. "Add to cart" was 42px tall — under the 44px touch minimum, and
      the label wrapped onto two lines inside narrow cards ── */
.shop-wrap ul.products li.product .button,
.related.products ul.products li.product .button,
.up-sells ul.products li.product .button,
.woocommerce ul.products li.product .button{
  min-height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
@media(max-width:768px){
  .shop-wrap ul.products li.product .button,
  .related.products ul.products li.product .button,
  .up-sells ul.products li.product .button,
  .woocommerce ul.products li.product .button{
    /* smaller type + tighter tracking so "Add to cart" fits on one line */
    font-size:11px !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;
    padding:12px 8px !important;
    margin:10px 13px 14px !important;
  }
}

/* ── 3. The discount badge had NO styling in this theme at all ──
   Like the bottom tab bar earlier, its CSS was living in Customizer >
   Additional CSS, where it had been given a red pill — the only red
   anywhere on an ink-and-gold site. Styled here in brand colours and
   positioned over the photo instead of sitting in the text flow.
   DELETE any .cg-discount-badge rules still in Additional CSS. */
.shop-wrap ul.products li.product,
.related.products ul.products li.product,
.up-sells ul.products li.product,
.woocommerce ul.products li.product{
  position:relative !important;
}
.cg-discount-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  background:var(--gold);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  padding:5px 9px;
  border-radius:5px;
  line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  pointer-events:none;
}
@media(max-width:768px){
  .cg-discount-badge{top:9px; left:9px; font-size:9.5px; padding:4px 7px;}
}

/* ── 4. Price row: keep it on one line in narrow cards ── */
@media(max-width:768px){
  .shop-wrap ul.products li.product .price,
  .related.products ul.products li.product .price,
  .up-sells ul.products li.product .price,
  .woocommerce ul.products li.product .price{
    font-size:14.5px !important;
    padding:0 13px 6px !important;
    gap:6px !important;
    flex-wrap:wrap !important;
  }
  .shop-wrap ul.products li.product .price del,
  .related.products ul.products li.product .price del,
  .woocommerce ul.products li.product .price del{font-size:11.5px !important;}
}

/* ── 5. The <a> wrapper must stretch so every card's price and button
      line up along the bottom, whatever the title length ── */
.shop-wrap ul.products li.product > a.woocommerce-LoopProduct-link,
.related.products ul.products li.product > a.woocommerce-LoopProduct-link,
.up-sells ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  text-decoration:none !important;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link .price{
  margin-top:auto !important;
}

/* ── 6. THE SLIVER BUG ──
   Even with a correct 3-line height, a thin slice of the FOURTH line was
   still visible behind the price. Reason: overflow:hidden clips at the
   PADDING box, not the content box. The title's 6px of bottom padding
   therefore acted as a 6px window onto the next line.
   Fix: no bottom padding on the title at all — the gap it was providing
   is moved onto the price instead, so the clip lands exactly where the
   third line ends. */
.shop-wrap ul.products li.product h2,
.shop-wrap ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product h2,
.related.products ul.products li.product .woocommerce-loop-product__title,
.up-sells ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding-bottom:0 !important;
}
.shop-wrap ul.products li.product .price,
.related.products ul.products li.product .price,
.up-sells ul.products li.product .price,
.woocommerce ul.products li.product .price{
  padding-top:10px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 3 — MOBILE HERO, COMPOSED SEPARATELY · 09 Sep 2026
   The desktop hero is a two-column grid: words on the left, photograph
   on the right. Two columns cannot survive a 390px screen — squeezing
   them is what made the phone version feel broken.
   Below 900px the same markup is re-composed into a different design:
   the picture becomes a full-bleed background, a scrim rises from the
   bottom, and the words sit in the lower third where a thumb rests.
   No markup change — the desktop layout is untouched.
═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){

  .hero{
    display:block;
    position:relative;
    /* 78vh, not 100vh: the next section peeks in and invites the scroll.
       svh (small viewport height) keeps it stable when the mobile browser
       bar hides and shows — vh alone makes the hero jump. */
    min-height:78svh;
    min-height:78vh;
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }

  /* The photograph stops being a column and becomes the background */
  .hero .hero-img{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    margin:0;
    padding:0;
  }
  .hero .hero-img img{
    width:100% !important;
    height:100% !important;
    /* An earlier mobile rule caps this image at max-width:260px — it was
       written when the photo was still a small column item. Left in place
       it silently shrinks the new full-bleed background to a 260px stamp. */
    max-width:none !important;
    object-fit:cover;
    object-position:center 38%;
    display:block;
  }

  /* Scrim: transparent at the top so the product stays visible, opaque at
     the bottom so the type always has contrast to sit on. */
  .hero .hero-img::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
      180deg,
      rgba(21,20,15,.30) 0%,
      rgba(21,20,15,.20) 32%,
      rgba(21,20,15,.82) 72%,
      rgba(21,20,15,.97) 100%
    );
  }

  .hero.has-video{min-height:80svh; min-height:80vh; padding:0;}
  .hero.has-video .reveal{max-width:none;}
  .hero-video-overlay{
    background:linear-gradient(
      180deg,
      rgba(21,20,15,.32) 0%,
      rgba(21,20,15,.22) 34%,
      rgba(21,20,15,.84) 74%,
      rgba(21,20,15,.97) 100%
    );
  }

  /* The words, in the lower third.
     :not(.hero-img) matters — the image wrapper ALSO carries the .reveal
     class, so an unqualified .hero > .reveal rule lands on it too and
     overrides its position:absolute, collapsing the full-bleed background
     back into a small inline picture. */
  .hero > .reveal:not(.hero-img){
    position:relative;
    z-index:2;
    padding:0 22px 42px;
    width:100%;
  }
  .hero .eyebrow{
    font-size:9.5px;
    letter-spacing:.16em;
    margin-bottom:12px;
    color:var(--gold-soft);
  }
  .hero h1{
    font-size:clamp(34px, 10.5vw, 46px);
    line-height:1.02;
    margin-top:0;
    letter-spacing:-.02em;
    text-wrap:balance;
    text-shadow:0 2px 24px rgba(0,0,0,.5);
  }
  /* On a small screen the supporting paragraph costs a third of the
     first screen and says what the headline already says. Hidden here,
     untouched on desktop. */
  .hero > .reveal:not(.hero-img) > p{display:none;}

  .hero-cta{
    margin-top:24px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:14px;
    align-items:center;
  }
  .hero-cta .btn-primary{
    padding:17px 20px;
    border-radius:12px;
    font-size:12.5px;
    text-align:center;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 24px rgba(185,139,78,.28);
  }
  .hero-cta .btn-ghost{
    border-bottom:none;
    color:var(--cream-text);
    font-size:11px;
    padding:16px 4px;
    white-space:nowrap;
    opacity:.85;
  }

  /* The ambient glow is a desktop flourish; on a phone it only costs
     paint time over an already-busy photograph. */
  .hero-glow{display:none;}
}

/* Very small phones: give the headline room by tightening everything else */
@media(max-width:380px){
  .hero > .reveal:not(.hero-img){padding:0 18px 34px;}
  .hero h1{font-size:32px;}
  .hero-cta{grid-template-columns:1fr; gap:10px;}
  .hero-cta .btn-ghost{text-align:center; padding:10px 4px;}
}

/* Landscape phones are short — a 78vh hero would fill the whole screen */
@media(max-width:900px) and (orientation:landscape){
  .hero, .hero.has-video{min-height:auto; padding-top:70px;}
  .hero > .reveal:not(.hero-img){padding-bottom:28px;}
  .hero h1{font-size:30px;}
}


/* ═══════════════════════════════════════════════════════════════════
   COMPACT PRODUCT CARD · 09 Sep 2026
   Measured before this change: a 152px-wide card was 332px tall — a
   2.18 height-to-width ratio — and the text block under the photo was
   182px, LARGER than the 150px photo itself. The picture was the
   smaller half of a product tile. Everything below trims that block.
═══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── The single biggest offender: the price was wrapping ──
     flex-wrap:wrap put the struck-out price on one line and the sale
     price on the next, which is the large empty gap visible mid-card.
     They belong on one line. */
  .shop-wrap ul.products li.product .price,
  .related.products ul.products li.product .price,
  .up-sells ul.products li.product .price,
  .woocommerce ul.products li.product .price{
    flex-wrap:nowrap !important;
    align-items:baseline !important;
    gap:7px !important;
    padding:7px 12px 4px !important;
    font-size:15px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
  .shop-wrap ul.products li.product .price del,
  .related.products ul.products li.product .price del,
  .woocommerce ul.products li.product .price del{
    font-size:11px !important;
  }

  /* ── Reserve two lines, allow three ──
     It was pinned at three lines for every card, so a short name like
     "Personalised Wooden Keychain" still reserved a blank third line.
     Now short names take two and only long ones grow. */
  .shop-wrap ul.products li.product h2,
  .shop-wrap ul.products li.product .woocommerce-loop-product__title,
  .related.products ul.products li.product h2,
  .related.products ul.products li.product .woocommerce-loop-product__title,
  .up-sells ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:13.5px !important;
    line-height:1.32 !important;
    min-height:2.64em !important;   /* 2 lines */
    max-height:3.96em !important;   /* 3 lines */
    padding:10px 12px 0 !important;
  }

  /* ── Button: keep the 46px touch target, lose the fat margins ── */
  .shop-wrap ul.products li.product .button,
  .related.products ul.products li.product .button,
  .up-sells ul.products li.product .button,
  .woocommerce ul.products li.product .button{
    margin:8px 12px 10px !important;
    min-height:44px !important;
    padding:10px 8px !important;
  }

  /* ── Anything a plugin appends under the card (the per-card
        "Free shipping" line) gets tight spacing rather than its own
        generous block ── */
  .woocommerce ul.products li.product > *:last-child:not(.button):not(a){
    margin-top:0 !important;
    padding:0 12px 10px !important;
    font-size:10.5px !important;
    line-height:1.3 !important;
  }
}

/* ── A loading photo should read as an empty tile, not a broken one ──
   Product images are painted onto white because object-fit:contain needs
   a surface. Before the file arrives the browser paints its own grey
   box, which looks like a failure. Setting the surface white up front
   means a slow image looks like an empty frame that then fills in. */
.shop-wrap ul.products li.product a img,
.related.products ul.products li.product a img,
.up-sells ul.products li.product a img,
.woocommerce ul.products li.product a img,
.cg-rail-media img{
  background-color:#fff !important;
  color:transparent;
}
.cg-shop-dark .product-img{
  background:var(--ink-soft);
  overflow:hidden;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 3 — QUICK ADD ON MOBILE CARDS · 09 Sep 2026
   On a 152px-wide card the full-width "ADD TO CART" bar costs 62px of
   height for a control almost nobody reads — and it is what kept the
   tile so tall. Turned into a gold circle in the card's top-right
   corner instead: same WooCommerce link, same AJAX behaviour, zero
   vertical space. The whole card stays tappable for the product page.
   This is the pattern every large mobile store uses, and it is the
   "quick add from the grid" item from the roadmap.
═══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .shop-wrap ul.products li.product .button,
  .related.products ul.products li.product .button,
  .up-sells ul.products li.product .button,
  .woocommerce ul.products li.product .button{
    position:absolute !important;
    top:9px !important;
    right:9px !important;
    z-index:4 !important;
    /* 44px is the accepted minimum for a touch target */
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
    background:var(--gold) !important;
    border:none !important;
    box-shadow:0 3px 12px rgba(0,0,0,.4) !important;
    /* hide the words without hiding the control from screen readers */
    font-size:0 !important;
    letter-spacing:0 !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .shop-wrap ul.products li.product .button::after,
  .related.products ul.products li.product .button::after,
  .up-sells ul.products li.product .button::after,
  .woocommerce ul.products li.product .button::after{
    content:'+';
    font-family:'IBM Plex Mono', monospace;
    font-size:22px;
    font-weight:400;
    line-height:1;
    color:var(--ink);
    margin-top:-2px;
  }
  /* WooCommerce swaps in "View cart" / a spinner after an AJAX add —
     keep those circular too rather than letting the text burst out. */
  .woocommerce ul.products li.product .added_to_cart{
    position:absolute !important;
    top:9px !important;
    right:59px !important;
    z-index:4 !important;
    width:44px !important;
    height:44px !important;
    border-radius:50% !important;
    background:var(--ink-panel) !important;
    border:1px solid var(--gold) !important;
    font-size:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .woocommerce ul.products li.product .added_to_cart::after{
    content:'✓';
    font-size:16px;
    color:var(--gold);
    line-height:1;
  }
  /* The discount badge sits top-LEFT so the two never collide */
  .cg-discount-badge{right:auto;}

  /* With the button gone from the flow, close the gap it left behind */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
  .related.products ul.products li.product > a.woocommerce-LoopProduct-link{
    padding-bottom:8px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SHARE BUTTON — product page, top-right (09 Sep 2026)
═══════════════════════════════════════════════════════════════════ */
.woocommerce div.product .summary,
.woocommerce div.product .entry-summary{position:relative;}

.cg-share{
  position:absolute;
  top:0;
  right:0;
  z-index:6;
}
.cg-share-btn{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:10px 15px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--paper-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cg-share-btn svg{width:16px; height:16px; flex:0 0 auto;}
.cg-share-btn:hover,
.cg-share-btn[aria-expanded="true"]{
  border-color:var(--gold);
  color:var(--gold-soft);
  background:rgba(185,139,78,.09);
}

/* THE FIX (09 Sep 2026): the rule below sets display:flex, and an author
   display rule BEATS the browser's own [hidden]{display:none}. So the menu
   ignored its hidden attribute and sat open from page load — which is why
   it stayed visible while Chrome's own share dialog opened on top of it.
   This line has to come first and win. */
.cg-share-menu[hidden]{display:none !important;}

.cg-share-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:196px;
  padding:6px;
  background:var(--ink-panel);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cg-share-item{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:44px;
  padding:11px 13px;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--cream-text);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.04em;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.cg-share-item:hover{background:rgba(185,139,78,.14); color:var(--gold-soft);}
.cg-share-ico{display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 auto; color:var(--gold);}
.cg-share-ico svg{width:17px; height:17px;}
.cg-share-item.is-copied{color:var(--gold); background:rgba(185,139,78,.16);}

@media(max-width:768px){
  /* On a phone the native share sheet opens instead of this menu, so the
     button only needs to be an icon — the word costs width the product
     title needs. */
  .cg-share-btn{
    min-width:44px;
    padding:10px;
    justify-content:center;
    border-radius:50%;
  }
  .cg-share-word{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  /* Keep the product title clear of the button */
  .woocommerce div.product .summary > h1.product_title,
  .woocommerce div.product .entry-summary > h1.product_title{
    padding-right:56px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 3 — PRODUCT PAGE, MOBILE COMPOSITION · 09 Sep 2026
   The single-product page had exactly one mobile rule (a padding
   change). Everything else was the desktop layout at a smaller size.
   Below 768px it is composed as its own screen: the photograph runs
   edge to edge, thumbnails become a swipe strip rather than stacking
   into rows, and the buying information is ordered by what a shopper
   needs first — name, price, then the engraving field.
═══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  .woocommerce div.product{
    padding:0 0 30px !important;
  }

  /* ── Gallery: full-bleed ──
     It sat inside the page's side padding, so the product photo — the
     one thing a gifting customer actually judges — was the smallest it
     could be. Now it uses the whole screen width. */
  .woocommerce div.product div.images{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 4px !important;
    float:none !important;
    border-radius:0 !important;
  }
  .woocommerce div.product div.images .woocommerce-product-gallery__image img{
    border-radius:0 !important;
    width:100% !important;
    aspect-ratio:1 / 1 !important;
    object-fit:contain !important;
    background:#fff !important;
  }

  /* ── Thumbnails: one swipeable row, not a stacked block ──
     flex-wrap:wrap turned five thumbnails into two rows that pushed the
     price further down the screen. */
  .woocommerce div.product div.images .flex-control-thumbs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain !important;
    scroll-padding-left:20px !important;
    gap:8px !important;
    margin:12px 0 0 !important;
    padding:0 20px 4px !important;
    scrollbar-width:none !important;
  }
  .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar{display:none;}
  .woocommerce div.product div.images .flex-control-thumbs li{
    width:58px !important;
    flex:0 0 58px !important;
  }
  .woocommerce div.product div.images .flex-control-thumbs img{
    width:58px !important;
    height:58px !important;
    border-radius:8px !important;
    background:#fff !important;
    object-fit:contain !important;
  }

  /* ── Summary block ── */
  .woocommerce div.product .summary,
  .woocommerce div.product .entry-summary{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    margin:18px 0 0 !important;
    padding:0 20px !important;
  }
  .woocommerce div.product .product_title{
    font-size:23px !important;
    line-height:1.22 !important;
    margin:0 0 12px !important;
    padding-right:56px !important;   /* clear of the share button */
  }
  /* Price is the decision point — make it the loudest thing here */
  .woocommerce div.product p.price,
  .woocommerce div.product span.price{
    font-size:26px !important;
    display:flex !important;
    align-items:baseline !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin:0 0 16px !important;
  }
  .woocommerce div.product p.price del,
  .woocommerce div.product span.price del{font-size:15px !important;}

  .woocommerce div.product .woocommerce-product-details__short-description{
    font-size:15px !important;
    line-height:1.6 !important;
  }
  .woocommerce div.product .woocommerce-product-details__short-description h2,
  .woocommerce div.product .woocommerce-product-details__short-description h3{
    font-size:20px !important;
    line-height:1.25 !important;
  }

  /* ── The share button sits at the summary's top-right; the summary
        now has side padding, so pull it back to the edge ── */
  .cg-share{top:0 !important; right:20px !important;}

  /* ── Add-to-cart form ── */
  .woocommerce div.product form.cart{margin-top:20px !important;}
  .woocommerce div.product form.cart .qty{
    min-height:50px !important;
    font-size:16px !important;   /* stops iOS zooming on focus */
  }
  /* Quantity and the buy button share one row. They were stacking, which
     cost ~70px of height and left the qty box floating on its own line.
     :not(.variations_form) keeps variable products on WooCommerce's own
     layout, where the form also holds the attribute dropdowns. */
  .woocommerce div.product form.cart:not(.variations_form){
    display:flex !important;
    /* flex-direction and wrap must be stated. An earlier rule already set
       this form to column, and declaring only display:flex leaves that
       column direction in place — the two controls kept stacking. */
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  .woocommerce div.product form.cart:not(.variations_form) .quantity{
    flex:0 0 92px !important;
    margin:0 !important;
  }
  .woocommerce div.product form.cart:not(.variations_form) .quantity .qty{
    width:100% !important;
    height:100% !important;
    text-align:center !important;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button{
    flex:1 1 auto !important;
    width:100% !important;
    min-height:54px !important;
    font-size:14px !important;
    border-radius:12px !important;
    margin:0 !important;
  }

  /* ── Tabs / description / reviews ── */
  .woocommerce div.product .woocommerce-tabs{padding:0 20px !important;}
  .woocommerce div.product .woocommerce-tabs ul.tabs{
    display:flex !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
    scrollbar-width:none !important;
    padding:0 !important;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none;}

  /* Both fixed bars (sticky add-to-cart + tab bar) need clearance */
  body.single-product{
    padding-bottom:calc(150px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── The YITH engraving field, on every screen ──
   This is the long-standing white patch on a dark page: the plugin ships
   its own light-theme styles. Each rule below repaints one piece of it. */
[class*="yith-wapo"],
[class*="yith-wapo"] > div,
.yith-wapo-addon,
.yith-wapo-block{
  background:transparent !important;
  border-color:var(--line) !important;
  color:var(--paper-dim) !important;
}
[class*="yith-wapo"] input[type="text"],
[class*="yith-wapo"] input[type="number"],
[class*="yith-wapo"] textarea,
[class*="yith-wapo"] select{
  background:var(--ink-soft) !important;
  border:1px solid var(--line) !important;
  color:var(--cream-text) !important;
  border-radius:10px !important;
  min-height:50px !important;
  font-size:16px !important;
  padding:12px 14px !important;
  width:100% !important;
  box-sizing:border-box !important;
}
[class*="yith-wapo"] input::placeholder,
[class*="yith-wapo"] textarea::placeholder{color:var(--paper-dim); opacity:.5;}
[class*="yith-wapo"] .yith-wapo-addon-title,
[class*="yith-wapo"] h3,
[class*="yith-wapo"] label{color:var(--gold-soft) !important;}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 4 — OCCASION / FESTIVAL PAGE + SEASONAL RIBBON · 09 Sep 2026
═══════════════════════════════════════════════════════════════════ */

/* ── Seasonal ribbon (one Customizer switch) ── */
.cg-season-ribbon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 20px;
  background:linear-gradient(90deg, #8a6329 0%, var(--gold) 50%, #8a6329 100%);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  position:relative;
  z-index:20;
}
a.cg-season-ribbon:hover{filter:brightness(1.07);}
.cg-season-spark{opacity:.75;}
.cg-season-go{transition:transform .2s ease;}
a.cg-season-ribbon:hover .cg-season-go{transform:translateX(3px);}
@media(max-width:600px){
  .cg-season-ribbon{font-size:10px; padding:9px 14px; letter-spacing:.05em;}
  .cg-season-spark{display:none;}
}

/* ── Occasion hero ── */
.cg-occ-hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:520px;
  padding:80px 48px;
  background:var(--ink);
  overflow:hidden;
}
.cg-occ-hero-bg{position:absolute; inset:0; z-index:0;}
.cg-occ-hero-bg img{width:100%; height:100%; object-fit:cover; display:block;}
/* Scrim reads from the left, where the words sit, so the right side of the
   photograph stays clean — that is why the field notes ask for empty space
   on the left of the image. */
.cg-occ-hero-bg::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(21,20,15,.95) 0%,
    rgba(21,20,15,.80) 38%,
    rgba(21,20,15,.30) 72%,
    rgba(21,20,15,.15) 100%);
}
.cg-occ-hero-inner{position:relative; z-index:1; max-width:620px;}

.cg-occ-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 16px;
}
.cg-occ-title{
  font-family:'Fraunces', serif;
  font-size:clamp(38px, 5.4vw, 68px);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--cream-text);
  margin:0;
  text-wrap:balance;
  text-shadow:0 2px 28px rgba(0,0,0,.45);
}
.cg-occ-tagline{
  font-family:'Newsreader', Georgia, serif;
  font-size:18px;
  line-height:1.6;
  color:var(--paper-dim);
  max-width:46ch;
  margin:20px 0 0;
}

/* ── Countdown ── */
.cg-occ-countdown{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin-top:26px;
  padding:11px 18px;
  border:1px solid rgba(185,139,78,.45);
  border-radius:999px;
  background:rgba(185,139,78,.10);
}
.cg-occ-count-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:24px;
  font-weight:700;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.cg-occ-count-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--paper-dim);
}

.cg-occ-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:30px;}
.cg-occ-cta .btn-primary{border-radius:10px; padding:16px 28px;}
.cg-occ-wa{
  display:inline-flex;
  align-items:center;
  min-height:52px;
  padding:0 24px;
  border:1px solid rgba(37,211,102,.55);
  border-radius:10px;
  background:rgba(37,211,102,.10);
  color:#7ee2a8;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.cg-occ-wa:hover{background:#25D366; color:#08130b; border-color:#25D366;}
.cg-occ-note{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.05em;
  color:var(--paper-dim);
  opacity:.7;
  margin:18px 0 0;
}

/* ── Body copy the page itself carries ── */
.cg-occ-body{
  max-width:70ch;
  margin:0 auto;
  padding:56px 48px 0;
  font-family:'Newsreader', Georgia, serif;
  font-size:17px;
  line-height:1.75;
  color:var(--paper-dim);
}
.cg-occ-body h2, .cg-occ-body h3{
  font-family:'Fraunces', serif;
  color:var(--cream-text);
  line-height:1.2;
  margin:32px 0 12px;
}

/* ── Product picks ── */
.cg-occ-picks{
  padding:60px 48px 20px;
  background:var(--ink);
  scroll-margin-top:20px;
}

/* ── Corporate / bulk band ── */
.cg-occ-bulk{
  padding:70px 48px 90px;
  background:var(--ink);
  border-top:1px solid var(--line);
}
.cg-occ-bulk-inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  padding:48px 34px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(185,139,78,.13), transparent 68%),
    var(--ink-panel);
}
.cg-occ-bulk-inner h2{
  font-family:'Fraunces', serif;
  font-size:clamp(26px, 3.2vw, 38px);
  font-weight:500;
  color:var(--cream-text);
  margin:0 0 14px;
  line-height:1.15;
}
.cg-occ-bulk-inner p{
  font-family:'Newsreader', Georgia, serif;
  font-size:17px;
  line-height:1.65;
  color:var(--paper-dim);
  max-width:54ch;
  margin:0 auto 26px;
}
.cg-occ-bulk-inner .btn-primary{border-radius:10px; padding:16px 30px;}
.cg-occ-bulk-note{
  font-family:'IBM Plex Mono', monospace !important;
  font-size:11px !important;
  letter-spacing:.05em;
  opacity:.6;
  margin:20px auto 0 !important;
}

/* ── Tablet ── */
@media(max-width:1024px){
  .cg-occ-hero{padding:70px 36px; min-height:460px;}
  .cg-occ-picks, .cg-occ-bulk, .cg-occ-body{padding-left:36px; padding-right:36px;}
}

/* ── Mobile: the hero re-composes bottom-up, like the homepage hero ── */
@media(max-width:768px){
  .cg-occ-hero{
    min-height:68svh;
    min-height:68vh;
    padding:0;
    align-items:flex-end;
  }
  .cg-occ-hero-bg::after{
    /* vertical scrim on a phone — the words move under the picture */
    background:linear-gradient(180deg,
      rgba(21,20,15,.35) 0%,
      rgba(21,20,15,.25) 30%,
      rgba(21,20,15,.86) 72%,
      rgba(21,20,15,.97) 100%);
  }
  .cg-occ-hero-inner{
    max-width:none;
    width:100%;
    padding:0 22px 36px;
  }
  .cg-occ-title{font-size:clamp(32px, 9.5vw, 44px);}
  .cg-occ-tagline{font-size:15.5px; margin-top:14px;}
  .cg-occ-countdown{margin-top:20px; padding:9px 15px;}
  .cg-occ-count-num{font-size:20px;}
  .cg-occ-count-label{font-size:10px;}
  .cg-occ-cta{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:22px;
  }
  .cg-occ-cta .btn-primary,
  .cg-occ-wa{
    width:100%;
    justify-content:center;
    text-align:center;
    min-height:52px;
    display:flex;
    align-items:center;
  }
  .cg-occ-picks{padding:44px 20px 10px;}
  .cg-occ-body{padding:40px 22px 0; font-size:16px;}
  .cg-occ-bulk{padding:44px 20px 60px;}
  .cg-occ-bulk-inner{padding:34px 22px; border-radius:16px;}
  .cg-occ-bulk-inner p{font-size:15.5px;}
  .cg-occ-bulk-inner .btn-primary{width:100%; display:block;}
}

/* The occasion page asks WooCommerce for a 4-column loop, so the CSS grid
   has to agree — the shared .woocommerce ul.products rule is 3 columns and
   was leaving one card per row hanging off the edge. */
@media(min-width:1025px){
  .cg-occ-picks ul.products{
    grid-template-columns:repeat(4, 1fr) !important;
    gap:24px !important;
  }
}
@media(min-width:769px) and (max-width:1024px){
  .cg-occ-picks ul.products{grid-template-columns:repeat(3, 1fr) !important;}
}
@media(max-width:768px){
  .cg-occ-picks ul.products{grid-template-columns:repeat(2, 1fr) !important; gap:14px !important;}
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 5 — FILTERS, DELIVERY PROMISE, PROOF PROMISE · 10 Sep 2026
═══════════════════════════════════════════════════════════════════ */

/* ── Filter bar ── */
.cg-filters{
  margin:0 0 30px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
}
.cg-filters-toggle{
  display:none;   /* desktop shows the filters open; mobile gets the button */
  align-items:center;
  gap:9px;
  position:relative;
  min-height:46px;
  padding:11px 20px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--cream-text);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cg-filters-toggle svg{width:17px; height:17px;}
.cg-filters-toggle[aria-expanded="true"]{border-color:var(--gold); color:var(--gold-soft);}
.cg-filters-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
  margin-left:2px;
}

.cg-filters-body{display:flex; flex-direction:column; gap:14px;}

.cg-filter-group{
  display:grid;
  grid-template-columns:104px 1fr;
  gap:6px 16px;
  align-items:start;
}
.cg-filter-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-soft);
  padding-top:9px;
}
.cg-filter-chips{display:flex; flex-wrap:wrap; gap:8px;}
.cg-filter-chip{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--paper-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:.04em;
  text-decoration:none;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cg-filter-chip:hover{border-color:rgba(185,139,78,.6); color:var(--gold-soft);}
.cg-filter-chip.is-on{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  font-weight:600;
}
/* A selected chip removes itself when tapped again — show that it will */
.cg-filter-chip.is-on::after{
  content:'×';
  margin-left:7px;
  font-size:14px;
  line-height:1;
  opacity:.65;
}
.cg-filter-clear{
  align-self:flex-start;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:3px;
  margin-top:2px;
}

@media(max-width:768px){
  .cg-filters{margin-bottom:22px; padding-bottom:16px;}
  .cg-filters-toggle{display:inline-flex;}
  /* Collapsed by default on a phone — filters must not push the products
     below the fold, which would defeat the point of having them. */
  .cg-filters-body{display:none; margin-top:16px;}
  .cg-filters.is-open .cg-filters-body{display:flex;}
  .cg-filter-group{grid-template-columns:1fr; gap:7px;}
  .cg-filter-label{padding-top:0;}
  .cg-filter-chip{min-height:38px; font-size:12px;}
}

/* ── Delivery promise ── */
.cg-delivery{
  display:flex;
  align-items:center;
  gap:13px;
  margin:20px 0 4px;
  padding:14px 16px;
  border:1px solid rgba(185,139,78,.4);
  border-radius:12px;
  background:rgba(185,139,78,.08);
}
.cg-delivery-ico{
  flex:0 0 auto;
  display:flex;
  color:var(--gold);
}
.cg-delivery-ico svg{width:24px; height:24px;}
.cg-delivery-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cg-delivery-window{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.cg-delivery-window b{color:var(--gold); font-variant-numeric:tabular-nums;}
.cg-delivery-date{
  font-family:'Fraunces', serif;
  font-size:16px;
  color:var(--cream-text);
  line-height:1.3;
}
.cg-delivery-date b{color:var(--gold-soft); font-weight:600;}

/* ── Proof promise ── */
.cg-proof{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:18px 0 0;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--ink-panel);
  font-family:'Newsreader', Georgia, serif;
  font-size:14.5px;
  line-height:1.55;
  color:var(--paper-dim);
}
.cg-proof b{
  display:block;
  font-family:'Fraunces', serif;
  font-size:15.5px;
  font-weight:600;
  color:var(--cream-text);
  margin-bottom:3px;
}
.cg-proof-ico{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(155,190,134,.14);
  color:#9BBE86;
  margin-top:1px;
}
.cg-proof-ico svg{width:15px; height:15px;}

@media(max-width:768px){
  .cg-delivery{margin:16px 0 4px; padding:12px 14px; gap:11px;}
  .cg-delivery-ico svg{width:21px; height:21px;}
  .cg-delivery-date{font-size:15px;}
  .cg-proof{padding:13px 14px; font-size:13.5px;}
  .cg-proof b{font-size:14.5px;}
}


/* ═══════════════════════════════════════════════════════════════════
   VARIABLE PRODUCTS — PILLS INSTEAD OF DROPDOWNS · 10 Sep 2026
   The real <select> stays in the form (hidden) so WooCommerce's own
   price/stock/image logic keeps working; these pills only drive it.
═══════════════════════════════════════════════════════════════════ */

/* Hidden, not removed — and not display:none either, because a
   display:none form control can be skipped by some validation paths.
   This keeps it in the layout tree but invisible and untabbable. */
.cg-var-select-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.woocommerce div.product form.cart .variations{
  width:100% !important;
  margin:0 0 20px !important;
  border:none !important;
  background:transparent !important;
}
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{
  display:block !important;
  width:100% !important;
  border:none !important;
  padding:0 !important;
  background:transparent !important;
  text-align:left !important;
}
.woocommerce div.product form.cart .variations th.label{margin-bottom:9px !important;}
.woocommerce div.product form.cart .variations td.value{margin-bottom:18px !important;}
.woocommerce div.product form.cart .variations label{
  font-family:'IBM Plex Mono', monospace !important;
  font-size:11px !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  color:var(--gold-soft) !important;
  margin:0 !important;
}

.cg-var-pills{display:flex; flex-wrap:wrap; gap:9px;}
.cg-var-pill{
  min-height:46px;
  padding:11px 20px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--cream-text);
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cg-var-pill:hover:not(.is-off){border-color:rgba(185,139,78,.65); color:var(--gold-soft);}
.cg-var-pill.is-on{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  font-weight:600;
}
/* A combination WooCommerce says does not exist. Struck through rather
   than hidden, so the shopper can see the option is real but currently
   unavailable — hiding it makes the row look inconsistent between taps. */
.cg-var-pill.is-off{
  opacity:.35;
  cursor:not-allowed;
  text-decoration:line-through;
  border-style:dashed;
}

/* WooCommerce's own "Clear" link */
.woocommerce div.product form.cart .reset_variations{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:10px;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* The price / stock block WooCommerce injects once a variation is chosen */
.woocommerce div.product .woocommerce-variation{
  margin:0 0 16px !important;
}
/* WooCommerce's variation blocks inherit padding from the theme's own
   .price rules, which left the price indented away from the pills above
   it. Zero them so the whole buy column shares one left edge. */
.woocommerce div.product .woocommerce-variation,
.woocommerce div.product .woocommerce-variation-price,
.woocommerce div.product .woocommerce-variation-availability,
.woocommerce div.product .woocommerce-variation-description{
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
}
.woocommerce div.product .woocommerce-variation-price .price{
  padding:0 !important;
  margin:0 !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:24px !important;
  font-weight:600 !important;
  color:var(--gold) !important;
  display:flex !important;
  align-items:baseline !important;
  gap:9px !important;
}
.woocommerce div.product .woocommerce-variation-price .price del{
  font-size:14px !important;
  opacity:.45 !important;
  font-weight:400 !important;
}
.woocommerce div.product .woocommerce-variation-price .price ins{text-decoration:none !important;}
.woocommerce div.product .woocommerce-variation-availability p{
  font-family:'IBM Plex Mono', monospace !important;
  font-size:11.5px !important;
  letter-spacing:.05em !important;
  color:var(--paper-dim) !important;
  margin:6px 0 0 !important;
}
.woocommerce div.product .woocommerce-variation-description p{
  font-family:'Newsreader', Georgia, serif !important;
  font-size:14.5px !important;
  color:var(--paper-dim) !important;
}

/* Until a variation is picked, WooCommerce disables Add to cart —
   make that visible instead of leaving a live-looking dead button. */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled{
  opacity:.4 !important;
  cursor:not-allowed !important;
}

/* Variable products keep WooCommerce's own stacked layout on mobile
   (the earlier :not(.variations_form) rule), so give the buy row its
   own treatment here. */
@media(max-width:768px){
  .woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart{
    display:flex !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  .woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .quantity{
    flex:0 0 92px !important;
    margin:0 !important;
  }
  .woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .quantity .qty{
    width:100% !important;
    height:100% !important;
    text-align:center !important;
  }
  .woocommerce div.product form.variations_form .single_add_to_cart_button{
    flex:1 1 auto !important;
    margin:0 !important;
  }
  .cg-var-pill{min-height:44px; padding:10px 16px; font-size:12.5px;}
  .cg-var-pills{gap:8px;}
}

/* An older rule sets EVERY form.cart to flex. A variable product's form
   also carries .cart, so its <table class="variations"> and the price
   block below it became side-by-side flex items — which is why the price
   sat ~37px in from the pills. Variable products want WooCommerce's own
   block flow; only the buy row inside it is laid out as a flex row. */
.woocommerce div.product form.cart.variations_form{
  display:block !important;
}
.woocommerce div.product form.cart.variations_form .single_variation_wrap{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}
/* ═══════════════════════════════════════════════════════════════════
   PHASE 5b — SIDEWAYS SWIPE FIX (v2, iOS Safari) · 11 Sep 2026
   Appended last so these rules win the cascade.

   WHY v1 DID NOT WORK
   v1 put `overflow-x:clip` on <html>. Chrome honours that; Safari does
   NOT reliably honour `overflow:clip` on the ROOT element, and because
   `clip` was written after `hidden` in the same rule it replaced the
   working value with one Safari ignores. So on the iPhone nothing
   changed. On this page the only anti-overflow rule that was ever live
   was `body{overflow-x:hidden}` — and body-only is exactly the case
   iOS Safari has always ignored, which is why the page panned on the
   phone but measured perfectly clean in a desktop browser.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. THE PAGE MUST NEVER PAN SIDEWAYS ──
   Plain `hidden`, on BOTH html and body, at every width. This is the
   combination iOS Safari actually obeys. `width:100%` and
   `position:relative` are part of the same long-standing WebKit recipe:
   without them Safari can still hand the page a scrollable width.

   Note on position:sticky — putting overflow on html/body does NOT
   break it, because the overflow propagates to the viewport and the
   viewport stays the scroll container. (What breaks sticky is
   overflow:hidden on a wrapper in the MIDDLE of the page — there we
   still use `clip`, see section 3.) */
html{
  overflow-x:hidden;
  width:100%;
}
body{
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  position:relative;
}

/* Kills the horizontal rubber-band drag as well, so even if something
   new overflows in future the page itself never moves sideways.
   Vertical scrolling is untouched. */
html, body{
  overscroll-behavior-x:none;
}

/* ── 2. LEGACY iOS PROPERTY THAT CONFUSES THE ROOT SCROLLER ──
   `-webkit-overflow-scrolling:touch` is set on <html> in Customizer >
   Additional CSS. It has done nothing since iOS 13 (momentum scrolling
   is the default now) but on the root element it can still create its
   own scrolling context and fight the rule above. Neutralised here so
   the Customizer copy can stay where it is. */
html{
  -webkit-overflow-scrolling:auto;
}

/* ── 3. MARQUEES AND RAILS STAY INSIDE THE SCREEN ──
   These are legitimately wide: the ticker track is ~2070px and the
   trusted-logo track ~2240px, because the logo loop is printed twice so
   the animation can repeat seamlessly. Each is clipped by its own
   wrapper. `clip` — not `hidden` — because these sit mid-page and
   `hidden` there would turn them into scroll containers and kill
   position:sticky inside them.
   Only the two marquee wrappers are clipped. Sections such as the hero,
   the reviews band and the marketplace badges are deliberately LEFT
   ALONE: they carry glows and pulsing box-shadows that spill outside
   their box on purpose, and clipping them would visibly cut that off. */
.cg-ticker-wrap,
.cg-trusted-marquee{
  max-width:100%;
  overflow-x:clip;
}
.cg-trusted-track,
.cg-ticker-track{
  width:max-content;
  max-width:none;
}

/* A swipe inside a rail scrolls the rail and stops at its edge, instead
   of handing the gesture on to the page. */
.cg-gallery-track,
.cg-gallery-carousel,
.cg-rail-track,
.cg-rail-scroller,
.cg-filter-chips,
.flex-control-thumbs,
.woocommerce-tabs ul.tabs{
  max-width:100%;
  overscroll-behavior-x:contain;
}

/* ── 4. NOTHING MAY BE WIDER THAN THE SCREEN ──
   Media and embeds are the usual accidental offenders — a stray iframe,
   the Elfsight reviews widget, a video with an intrinsic width. */
img, video, iframe, embed, object, svg, table{
  max-width:100%;
}

/* ── 5. 100vw IS WIDER THAN THE SCREEN WHEN A SCROLLBAR EXISTS ──
   Additional CSS sets `max-width:100vw` on the related-products block.
   100vw counts the scrollbar, so on desktop that is ~15px wider than
   the actual content box and is a classic source of a few pixels of
   sideways drift. 100% is what was meant. */
.related.products,
.up-sells.products{
  max-width:100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   OCCASION HERO WITHOUT A PHOTOGRAPH · 11 Sep 2026
   An occasion page used to need a hero image before it looked like
   anything — with none set, .cg-occ-hero rendered as a tall empty black
   band. That made the photo a blocker for launching the page at all.
   `.no-photo` swaps in a designed panel so the page is finished on day
   one; adding the image later removes the class automatically and
   nothing else changes.
═══════════════════════════════════════════════════════════════════ */

.cg-occ-hero.no-photo{
  background:
    radial-gradient(85% 110% at 80% 8%, rgba(185,139,78,.34) 0%, rgba(185,139,78,.10) 45%, rgba(185,139,78,0) 72%),
    radial-gradient(70% 80% at 4% 96%, rgba(185,139,78,.14) 0%, rgba(185,139,78,0) 60%),
    var(--ink);
}

/* A slow diagonal weave, drawn in CSS — no image file, nothing to load.
   Kept faint on purpose: it should read as texture behind the words, not
   as a pattern competing with them. */
.cg-occ-hero.no-photo .cg-occ-hero-art{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.9;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(185,139,78,.085) 0 1px,
      transparent 1px 13px),
    repeating-linear-gradient(-45deg,
      rgba(185,139,78,.06) 0 1px,
      transparent 1px 19px);
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%);
          mask-image:radial-gradient(120% 100% at 100% 0%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%);
}

/* A hairline of gold down the edge of the words, echoing the video hero. */
.cg-occ-hero.no-photo .cg-occ-hero-inner{
  padding-left:26px;
  border-left:1px solid rgba(185,139,78,.38);
}

@media (max-width:900px){
  /* On a phone the photo hero drops its words to the bottom third. With
     no photo there is nothing to sit under, so the panel goes back to a
     normal top-aligned block — otherwise the text floated in a large
     empty space. */
  .cg-occ-hero.no-photo{
    min-height:auto;
    align-items:flex-start;
    padding:60px 22px 44px;
  }
  .cg-occ-hero.no-photo .cg-occ-hero-inner{
    padding-left:18px;
  }
  .cg-occ-hero.no-photo .cg-occ-hero-art{
    -webkit-mask-image:radial-gradient(140% 80% at 100% 0%, #000 0%, transparent 80%);
            mask-image:radial-gradient(140% 80% at 100% 0%, #000 0%, transparent 80%);
  }
}

/* The picks grid reuses the homepage's .cg-shop-dark card styling, so it
   only needs its own outer spacing. */
.cg-occ-picks{padding-top:16px;}
.cg-occ-picks .section-head p{margin-top:8px;}

/* ═══════════════════════════════════════════════════════════════════
   FESTIVE CORNER RIBBON · 11 Sep 2026
   A diagonal gold ribbon that animates into the top corner of the home
   page, with a few sparkles, linking to the occasion page.

   Built from nothing but CSS — no image, no icon font, no JavaScript —
   so it costs one anchor tag and adds no requests. The typeface is
   Fraunces, already loaded for headings.

   POSITION: the top-right corner OF THE HERO, not of the viewport.
   A viewport-fixed corner ribbon was measured sitting directly on top of
   the Bag button and the hamburger — both primary navigation. The hero is
   already position:relative with overflow:hidden, so anchoring the ribbon
   there clips the band's ends neatly on its corner and keeps the header
   completely clear. The left corner is not an option at any width: the
   logo is there, and the fixed OFFER tab runs down that edge.
═══════════════════════════════════════════════════════════════════ */

.cg-festive-corner{
  position:absolute;
  top:0;
  right:0;
  width:186px;
  height:186px;
  z-index:9994;          /* under the mobile menu panel/overlay (9995+) */
  overflow:hidden;
  pointer-events:none;   /* only the band itself is clickable */
  text-decoration:none;
}

/* The band. Rotated 45°, it crosses the corner; the extra width keeps
   both ends off-screen so no cut edge is ever visible. */
.cg-festive-band{
  position:absolute;
  top:34px;
  right:-58px;
  width:240px;
  pointer-events:auto;
  display:block;
  padding:9px 0;
  text-align:center;
  transform:rotate(45deg);
  background:linear-gradient(135deg, #d8ac68 0%, var(--gold) 45%, #a97f3f 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  /* animate in from off the corner */
  animation:cg-corner-in .85s cubic-bezier(.2,.9,.25,1) .35s both;
}

.cg-festive-word{
  font-family:'Fraunces', Georgia, serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.06em;
  color:#1a1710;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

@keyframes cg-corner-in{
  from{ opacity:0; transform:rotate(45deg) translate(48px, -48px); }
  to  { opacity:1; transform:rotate(45deg) translate(0, 0); }
}

/* A slow shine crossing the band every few seconds. */
.cg-festive-band::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,.5) 50%,
    transparent 62%, transparent 100%);
  transform:translateX(-110%);
  animation:cg-corner-shine 5.5s ease-in-out 1.6s infinite;
}
@keyframes cg-corner-shine{
  0%   { transform:translateX(-110%); }
  38%  { transform:translateX(110%); }
  100% { transform:translateX(110%); }
}

/* ── SPARKLES ──
   Four-pointed stars drawn with a CSS gradient mask, twinkling out of
   phase. Kept small and few — this should feel like a glint, not glitter. */
.cg-festive-spark{
  position:absolute;
  width:12px;
  height:12px;
  background:
    radial-gradient(closest-side, rgba(255,240,205,.95), rgba(255,214,140,.25) 60%, transparent 72%);
  opacity:0;
  animation:cg-spark 3.6s ease-in-out infinite;
}
.cg-festive-spark::before,
.cg-festive-spark::after{
  content:'';
  position:absolute;
  inset:0;
  background:#fff4dc;
}
/* the two crossed needles that make it read as a star */
.cg-festive-spark::before{
  -webkit-mask-image:linear-gradient(to bottom, transparent 44%, #000 50%, transparent 56%);
          mask-image:linear-gradient(to bottom, transparent 44%, #000 50%, transparent 56%);
}
.cg-festive-spark::after{
  -webkit-mask-image:linear-gradient(to right, transparent 44%, #000 50%, transparent 56%);
          mask-image:linear-gradient(to right, transparent 44%, #000 50%, transparent 56%);
}

@keyframes cg-spark{
  0%, 100% { opacity:0;   transform:scale(.4) rotate(0deg); }
  45%      { opacity:0;   transform:scale(.4) rotate(0deg); }
  60%      { opacity:.95; transform:scale(1)  rotate(35deg); }
  75%      { opacity:0;   transform:scale(.5) rotate(70deg); }
}

.cg-festive-spark-1{ top:22px;  right:18px;  animation-delay:1.2s; }
.cg-festive-spark-2{ top:62px;  right:82px;  animation-delay:2.4s; width:9px;  height:9px; }
.cg-festive-spark-3{ top:104px; right:26px;  animation-delay:3.1s; width:14px; height:14px; }
.cg-festive-spark-4{ top:14px;  right:104px; animation-delay:1.9s; width:8px;  height:8px; }

/* Hover / tap feedback */
.cg-festive-corner:hover .cg-festive-band{
  filter:brightness(1.08);
}
.cg-festive-corner:active .cg-festive-band{
  filter:brightness(.95);
}

/* ── PHONE ──
   Smaller, and pulled in so it clears the hamburger button rather than
   sitting on top of it. */
@media (max-width:768px){
  .cg-festive-corner{ width:132px; height:132px; }
  .cg-festive-band{
    top:22px;
    right:-46px;
    width:172px;
    padding:7px 0;
  }
  .cg-festive-word{ font-size:12px; letter-spacing:.05em; }
  .cg-festive-spark-1{ top:14px; right:12px; }
  .cg-festive-spark-2{ top:44px; right:60px; }
  .cg-festive-spark-3{ top:74px; right:18px; }
  .cg-festive-spark-4{ display:none; }
}

/* Anyone who has asked their device to reduce motion gets the ribbon
   without the entrance, the shine or the twinkle. */
@media (prefers-reduced-motion: reduce){
  .cg-festive-band{ animation:none; }
  .cg-festive-band::after{ animation:none; opacity:0; }
  .cg-festive-spark{ animation:none; opacity:.7; transform:scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   GIFT FINDER · 11 Sep 2026
   Designed phone-first: one question per row, chips that are comfortably
   tappable, and the answer button pinned at the end of the block rather
   than floating over the page.
═══════════════════════════════════════════════════════════════════ */

.cg-gf{
  padding:72px 22px;
  background:
    radial-gradient(90% 70% at 86% 0%, rgba(185,139,78,.12) 0%, rgba(185,139,78,0) 62%),
    var(--ink-panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cg-gf-inner{max-width:760px; margin:0 auto;}

.cg-gf-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 10px;
}
.cg-gf-title{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(26px, 6vw, 38px);
  line-height:1.15;
  color:var(--cream-text);
  margin:0 0 8px;
}
.cg-gf-sub{
  color:var(--paper-dim);
  font-size:15px;
  margin:0 0 30px;
}

.cg-gf-q{
  padding:18px 0;
  border-top:1px solid var(--line);
}
.cg-gf-q:first-of-type{border-top:none;}

.cg-gf-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
  margin-bottom:12px;
}

.cg-gf-opts{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.cg-gf-opt{
  appearance:none;
  -webkit-appearance:none;
  min-height:44px;              /* never below the touch minimum */
  padding:9px 17px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--cream-text);
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.cg-gf-opt:hover:not(:disabled){ border-color:var(--gold-soft); }

.cg-gf-opt.is-on{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  font-weight:600;
}

/* An option that would return nothing is shown, but plainly unavailable —
   more useful than hiding it, because it tells you what you do not stock
   in this combination. */
.cg-gf-opt:disabled{
  opacity:.3;
  cursor:not-allowed;
  text-decoration:line-through;
}

.cg-gf-go{
  display:inline-block;
  margin-top:26px;
  border-radius:10px;
  padding:16px 30px;
}
.cg-gf-count{ font-variant-numeric:tabular-nums; }

.cg-gf-none{
  margin-top:26px;
  color:var(--paper-dim);
  font-size:14px;
}

@media (min-width:768px){
  .cg-gf{padding:88px 48px;}
  .cg-gf-opt{font-size:13.5px;}
}

@media (prefers-reduced-motion: reduce){
  .cg-gf-opt{transition:none;}
}

/* ── THE SHEET ──
   On a phone it rises from the bottom and can be swiped/tapped away; on a
   desktop it is a centred panel. Either way the page behind it stops
   scrolling while it is open. */
.cg-gf-overlay{
  position:fixed;
  inset:0;
  z-index:10000;              /* above the mobile menu (9996) and tab bar (9997) */
  background:rgba(0,0,0,.62);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  transition:opacity .24s ease;
}
.cg-gf-overlay.is-open{opacity:1;}

/* An author `display:flex` BEATS the browser's own [hidden]{display:none},
   so without this the overlay stays laid out while hidden and swallows every
   tap on the page behind it. Exactly the bug the share menu had. */
.cg-gf-overlay[hidden]{display:none !important;}

.cg-gf-sheet{
  position:relative;
  width:100%;
  max-height:88svh;
  max-height:88vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;   /* scrolling inside it never drags the page */
  background:var(--ink-panel);
  border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;
  transform:translateY(22px);
  transition:transform .26s cubic-bezier(.2,.9,.25,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.cg-gf-overlay.is-open .cg-gf-sheet{transform:translateY(0);}

/* the grab handle that tells a thumb this is a sheet */
.cg-gf-sheet::before{
  content:'';
  position:sticky;
  top:10px;
  display:block;
  width:42px;
  height:4px;
  margin:10px auto 0;
  border-radius:99px;
  background:var(--line);
}

.cg-gf-close{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--ink);
  color:var(--paper-dim);
  cursor:pointer;
  z-index:2;
}
.cg-gf-close:hover{color:var(--gold); border-color:var(--gold);}

.cg-gf--sheet{
  background:transparent;
  border:none;
  padding:18px 20px 34px;
}

/* ── THE SHOP-PAGE BUTTON ──
   This is the phone's main way in. Full width, sits directly above the
   filter bar, and reads as a question rather than a label. */
.cg-gf-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:56px;
  margin:0 0 14px;
  padding:13px 18px;
  border:1px solid rgba(185,139,78,.42);
  border-radius:12px;
  background:linear-gradient(100deg, rgba(185,139,78,.14), rgba(185,139,78,.05));
  cursor:pointer;
  text-align:left;
  transition:border-color .2s ease, background .2s ease;
}
.cg-gf-trigger:hover{border-color:var(--gold); background:rgba(185,139,78,.18);}
.cg-gf-trigger-q{
  font-family:'Newsreader', Georgia, serif;
  font-size:16px;
  color:var(--cream-text);
}
.cg-gf-trigger-a{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}

/* ── THE FLOATING BUTTON — DESKTOP ONLY ──
   Hidden below 900px on purpose. A phone already carries the bottom tab
   bar, the OFFER tab and the sticky add-to-cart bar; this would be the
   fourth floating thing and they would start covering each other.
   On desktop it sits above the WhatsApp bubble with a clear gap. */
.cg-gf-fab{display:none;}

@media (min-width:901px){
  .cg-gf-fab{
    position:fixed;
    right:24px;
    bottom:104px;              /* clears the WhatsApp bubble beneath it */
    z-index:9993;
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:0 20px;
    border:1px solid rgba(185,139,78,.5);
    border-radius:999px;
    background:var(--ink-panel);
    color:var(--cream-text);
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:.04em;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,.45);
    transition:transform .2s ease, border-color .2s ease, background .2s ease;
  }
  .cg-gf-fab:hover{
    transform:translateY(-2px);
    border-color:var(--gold);
    background:var(--gold);
    color:var(--ink);
  }
  .cg-gf-fab svg{flex-shrink:0;}

  /* on a wide screen the sheet becomes a centred panel */
  .cg-gf-overlay{align-items:center;}
  .cg-gf-sheet{
    max-width:640px;
    border-radius:18px;
    border:1px solid var(--line);
    max-height:82vh;
  }
  .cg-gf-sheet::before{display:none;}
  .cg-gf-trigger{width:auto; min-width:360px;}
}

@media (prefers-reduced-motion: reduce){
  .cg-gf-overlay, .cg-gf-sheet, .cg-gf-fab{transition:none;}
  .cg-gf-sheet{transform:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   ENGRAVING BOX · 12 Sep 2026
   Sits inside the add-to-cart form on a product page. Phone-first: the
   input is 16px so iOS does not zoom the page when it is focused, every
   control clears 44px, and the lettering chips wrap instead of scrolling.
═══════════════════════════════════════════════════════════════════ */

.cg-engrave{
  margin:22px 0 4px;
  padding:18px;
  border:1px solid rgba(185,139,78,.32);
  border-radius:14px;
  background:linear-gradient(160deg, rgba(185,139,78,.08), rgba(185,139,78,.02));
}

.cg-engrave-label{
  display:block;
  font-family:'Fraunces', Georgia, serif;
  font-size:18px;
  color:var(--cream-text);
  margin-bottom:12px;
}

.cg-engrave-field{position:relative;}

.cg-engrave input[type="text"]#cg_engrave_text{
  width:100%;
  height:54px;
  padding:0 68px 0 16px;         /* room for the counter */
  box-sizing:border-box;
  background:var(--ink) !important;
  color:var(--cream-text) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  font-family:'IBM Plex Mono', monospace;
  font-size:16px !important;     /* below 16px iOS zooms the whole page in */
  letter-spacing:.02em;
}
.cg-engrave input[type="text"]#cg_engrave_text:focus{
  outline:none !important;
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(185,139,78,.16) !important;
}
.cg-engrave input[type="text"]#cg_engrave_text::placeholder{
  color:var(--paper-dim);
  opacity:.55;
}

.cg-engrave-count{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--paper-dim);
  opacity:.7;
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}

.cg-engrave-sub{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
  margin:18px 0 10px;
}

.cg-engrave-fonts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cg-engrave-font{
  min-height:44px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--cream-text);
  font-size:15px;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.cg-engrave-font:hover{border-color:var(--gold-soft);}
.cg-engrave-font.is-on{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
}

/* ── THE PLATE ──
   A warm panel that reads as material without pretending to be a
   photograph of the actual product. The note under it says as much. */
.cg-engrave-plate{
  margin-top:16px;
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 20px;
  border-radius:12px;
  border:1px solid rgba(185,139,78,.28);
  background:
    linear-gradient(100deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.18) 100%),
    repeating-linear-gradient(92deg,
      rgba(120,85,45,.16) 0 2px,
      rgba(120,85,45,0) 2px 7px),
    linear-gradient(160deg, #4a3823, #2b2015);
  overflow:hidden;
}

.cg-engrave-preview{
  display:block;
  max-width:100%;
  text-align:center;
  line-height:1.25;
  color:#f0dfbe;
  /* burnt into the surface rather than printed on it */
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 -1px 0 rgba(255,226,175,.14);
  word-break:break-word;
  transition:font-size .15s ease;
}
.cg-engrave-preview.is-placeholder{
  color:rgba(240,223,190,.34);
}

.cg-engrave-plate-note,
.cg-engrave-note{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--paper-dim);
  opacity:.72;
  margin:8px 0 0;
}
.cg-engrave-note{margin-top:14px;}

/* ── MAKING ROOM INSIDE form.cart ──
   The theme lays form.cart out as `display:flex !important` with no wrap, so
   quantity and Add to cart sit on one row. Dropping this block in there got
   it squeezed into a narrow column — the whole box rendered about 150px
   wide. The form has to be allowed to wrap, and the box has to take a full
   row of its own and sit above the two controls.

   Scoped with :has() so products WITHOUT an engraving box keep the exact
   one-row layout they have today. */
.woocommerce div.product form.cart:has(.cg-engrave){
  flex-wrap:wrap !important;
}
.woocommerce div.product form.cart .cg-engrave{
  flex:0 0 100% !important;
  width:100% !important;
  order:-1;                 /* above quantity and the button */
  box-sizing:border-box;
}
/* Fallback for browsers without :has() — the box still gets its own row. */
.woocommerce div.product form.cart .cg-engrave{
  min-width:100%;
}

@media (min-width:768px){
  .cg-engrave{padding:22px;}
  .cg-engrave-plate{min-height:120px;}
}

@media (prefers-reduced-motion: reduce){
  .cg-engrave-font,
  .cg-engrave-preview{transition:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   MOCKUP STUDIO — FRONT END · 12 Sep 2026
   Phone-first. On a phone the studio is full screen with the photograph
   on top and the controls below; on a laptop the two sit side by side.
═══════════════════════════════════════════════════════════════════ */

/* ── THE BADGE ── */
.cg-mk-launch{margin:20px 0 6px; width:100%;}

.cg-mk-badge{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:58px;
  padding:14px 18px;
  border:1px solid rgba(185,139,78,.55);
  border-radius:12px;
  background:linear-gradient(100deg, rgba(185,139,78,.20), rgba(185,139,78,.06));
  color:var(--cream-text);
  cursor:pointer;
  text-align:left;
  position:relative;
  overflow:hidden;
  transition:border-color .2s ease, background .2s ease;
}
.cg-mk-badge:hover{border-color:var(--gold); background:rgba(185,139,78,.24);}

/* the shine that crosses it every few seconds */
.cg-mk-badge::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    transparent 0%, transparent 40%,
    rgba(255,255,255,.16) 50%,
    transparent 60%, transparent 100%);
  transform:translateX(-110%);
  animation:cg-mk-shine 5s ease-in-out 1.2s infinite;
  pointer-events:none;
}
@keyframes cg-mk-shine{
  0%{transform:translateX(-110%);} 40%{transform:translateX(110%);} 100%{transform:translateX(110%);}
}

.cg-mk-badge-star{
  color:var(--gold);
  font-size:17px;
  animation:cg-mk-twinkle 2.4s ease-in-out infinite;
}
@keyframes cg-mk-twinkle{
  0%,100%{opacity:.55; transform:scale(.9) rotate(0deg);}
  50%    {opacity:1;   transform:scale(1.15) rotate(25deg);}
}
.cg-mk-badge-text{
  flex:1;
  font-family:'Fraunces', Georgia, serif;
  font-size:17px;
}
.cg-mk-badge-go{color:var(--gold); font-size:16px;}

/* what replaces the badge once a design is made */
.cg-mk-chosen{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--ink-panel);
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  line-height:1.7;
  color:var(--paper-dim);
}
.cg-mk-chosen strong{color:var(--cream-text);}
.cg-mk-chosen-edit{
  display:inline-block;
  margin-top:8px;
  min-height:38px;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--gold);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  cursor:pointer;
}
.cg-mk-chosen-edit:hover{border-color:var(--gold);}

/* ── THE STUDIO ── */
.cg-mkm{
  position:fixed;
  inset:0;
  z-index:10001;
  background:rgba(0,0,0,.78);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  transition:opacity .24s ease;
}
.cg-mkm.is-open{opacity:1;}
/* an author display rule beats [hidden] — without this the closed studio
   still covers the page and eats every tap */
.cg-mkm[hidden]{display:none !important;}

.cg-mkm-panel{
  width:100%;
  max-height:94svh;
  max-height:94vh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;
  overflow:hidden;
  transform:translateY(24px);
  transition:transform .26s cubic-bezier(.2,.9,.25,1);
}
.cg-mkm.is-open .cg-mkm-panel{transform:translateY(0);}

.cg-mkm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.cg-mkm-title{
  font-family:'Fraunces', Georgia, serif;
  font-size:17px;
  color:var(--cream-text);
}
.cg-mkm-close{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%;
  background:transparent; color:var(--paper-dim); cursor:pointer;
  flex-shrink:0;
}
.cg-mkm-close:hover{color:var(--gold); border-color:var(--gold);}

.cg-mkm-body{
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* ── the photograph ── */
.cg-mkm-left{padding:16px 16px 4px;}

.cg-mkm-tabs{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.cg-mkm-tab{
  min-height:40px;
  padding:7px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--paper-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  cursor:pointer;
}
.cg-mkm-tab.is-on{background:var(--gold); border-color:var(--gold); color:var(--ink);}

.cg-mkm-stage{
  position:relative;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background:var(--ink-panel);
}
.cg-mkm-stage img{display:block; width:100%; height:auto;}

.cg-mkm-area{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(185,139,78,.75);
  border-radius:2px;
  overflow:visible;          /* so an overflowing name is visibly too big */
}
.cg-mkm-area.is-over{
  border-color:#e06a5c;
  background:rgba(224,106,92,.10);
}

.cg-mkm-text{
  display:block;
  white-space:nowrap;
  line-height:1;
  color:#2a1c0d;
  text-shadow:0 1px 0 rgba(255,255,255,.18);
  pointer-events:none;
}

.cg-mkm-hint{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--paper-dim);
  opacity:.7;
  margin:8px 0 0;
}

/* ── the controls ── */
.cg-mkm-side{padding:14px 16px 26px;}

.cg-mkm-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
  margin:16px 0 8px;
}
.cg-mkm-side > .cg-mkm-label:first-child{margin-top:0;}

#cgMkInput{
  width:100%;
  height:52px;
  box-sizing:border-box;
  padding:0 16px;
  background:var(--ink-panel) !important;
  color:var(--cream-text) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  font-family:'IBM Plex Mono', monospace;
  font-size:16px !important;      /* stops iOS zooming the page */
}
#cgMkInput:focus{
  outline:none !important;
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(185,139,78,.16) !important;
}

.cg-mkm-groups{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.cg-mkm-group{
  min-height:40px;
  padding:7px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--paper-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:.05em;
  cursor:pointer;
}
.cg-mkm-group.is-on{border-color:var(--gold); color:var(--gold);}

.cg-mkm-fonts{display:flex; gap:8px; flex-wrap:wrap;}
.cg-mkm-font{
  min-height:46px;
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  color:var(--cream-text);
  font-size:17px;
  line-height:1.2;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.cg-mkm-font:hover{border-color:var(--gold-soft);}
.cg-mkm-font.is-on{background:var(--gold); border-color:var(--gold); color:var(--ink);}

.cg-mkm-sizerow{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.cg-mkm-mm{
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}

#cgMkSize{
  width:100%;
  height:44px;                 /* a comfortable thumb target */
  accent-color:var(--gold);
  background:transparent;
}

.cg-mkm-fit{
  min-height:44px;
  margin-top:4px;
  padding:9px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--cream-text);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  cursor:pointer;
}
.cg-mkm-fit:hover{border-color:var(--gold); color:var(--gold);}

.cg-mkm-warn{
  margin:14px 0 0;
  padding:11px 14px;
  border:1px solid rgba(224,106,92,.5);
  border-radius:10px;
  background:rgba(224,106,92,.10);
  color:#f0b7ae;
  font-size:13.5px;
  line-height:1.5;
}

.cg-mkm-done{
  display:block;
  width:100%;
  margin-top:18px;
  border-radius:10px;
  padding:16px 20px;
  text-align:center;
  cursor:pointer;
  border:none;
}

.cg-mkm-foot{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--paper-dim);
  opacity:.72;
  margin:12px 0 0;
  line-height:1.6;
}

/* ── laptop: photograph and controls side by side ── */
@media (min-width:901px){
  .cg-mkm{align-items:center;}
  .cg-mkm-panel{
    max-width:1000px;
    border-radius:18px;
    border:1px solid var(--line);
    max-height:88vh;
  }
  .cg-mkm-body{flex-direction:row;}
  .cg-mkm-left{flex:1 1 55%; padding:22px; min-width:0;}
  .cg-mkm-side{
    flex:1 1 45%;
    padding:22px;
    border-left:1px solid var(--line);
    overflow-y:auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .cg-mkm, .cg-mkm-panel, .cg-mk-badge{transition:none;}
  .cg-mkm-panel{transform:none;}
  .cg-mk-badge::after, .cg-mk-badge-star{animation:none;}
}

/* ── colour of the marking ──
   A dark name drawn on a black pen is a picture of something we cannot make,
   so the customer picks the ink. Swatch plus name: a dot alone is unreadable
   for anyone who cannot separate the two metallics. */
.cg-mkm-inks{display:flex; gap:8px; flex-wrap:wrap;}
.cg-mkm-ink{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:7px 14px 7px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--paper-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.cg-mkm-ink:hover{border-color:var(--gold-soft);}
.cg-mkm-ink.is-on{border-color:var(--gold); color:var(--cream-text);}
.cg-mkm-ink-dot{
  width:20px; height:20px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.35);
  flex-shrink:0;
}

/* ── the way out ── */
.cg-mkm-ask{
  margin:14px 0 0;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--ink-panel);
  font-size:13.5px;
  line-height:1.6;
  color:var(--paper-dim);
}
.cg-mkm-ask a{color:var(--gold); text-decoration:underline; text-underline-offset:3px;}
.cg-mkm-ask a:hover{color:var(--gold-soft);}

/* the lettering itself is coloured from JS, so the old fixed colour and its
   light-only shadow must not fight it */
.cg-mkm-text{transform-origin:center center;}

/* ═══════════════════════════════════════════════════════════════════
   COMMISSIONED PORTRAIT BOX · 12 Sep 2026
   Sits inside the add-to-cart form on a commission product. Phone-first:
   every control clears 44px, inputs are 16px so iOS does not zoom the
   page, and the thumbnails wrap instead of scrolling sideways.
═══════════════════════════════════════════════════════════════════ */

.cg-comm{
  margin:22px 0 4px;
  padding:18px;
  border:1px solid rgba(185,139,78,.34);
  border-radius:14px;
  background:linear-gradient(160deg, rgba(185,139,78,.09), rgba(185,139,78,.02));
}

.cg-comm-title{
  display:block;
  font-family:'Fraunces', Georgia, serif;
  font-size:19px;
  color:var(--cream-text);
}
.cg-comm-note{
  margin:6px 0 14px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--paper-dim);
}

/* ── choosing a file ── */
.cg-comm-pick{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:56px;
  padding:14px 18px;
  border:1px dashed rgba(185,139,78,.6);
  border-radius:12px;
  background:rgba(185,139,78,.07);
  color:var(--cream-text);
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
  letter-spacing:.03em;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.cg-comm-pick:hover{border-color:var(--gold); background:rgba(185,139,78,.14);}
.cg-comm-pick-plus{
  font-size:20px;
  line-height:1;
  color:var(--gold);
  font-family:system-ui, sans-serif;
}
.cg-comm-pick[hidden]{display:none !important;}

.cg-comm-limit{
  margin:8px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--paper-dim);
  opacity:.72;
}
.cg-comm-limit[hidden]{display:none !important;}

/* ── the photographs chosen so far ── */
.cg-comm-list{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0;}
.cg-comm-list:empty{margin:0;}

.cg-comm-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--ink-panel);
}
.cg-comm-item.is-done{border-color:rgba(185,139,78,.45);}
.cg-comm-item.is-bad{border-color:rgba(224,106,92,.55);}

.cg-comm-thumb{
  display:block;
  width:52px; height:52px;
  border-radius:7px;
  background:#1c1a15 center/cover no-repeat;
  flex-shrink:0;
}
.cg-comm-state{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--paper-dim);
  font-variant-numeric:tabular-nums;
}
.cg-comm-item.is-bad .cg-comm-state{color:#f0b7ae;}

.cg-comm-del{
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--paper-dim);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
}
.cg-comm-del:hover{color:var(--gold); border-color:var(--gold);}

/* ── what we tell them when something is wrong ── */
.cg-comm-msg{
  margin:12px 0 0;
  padding:11px 14px;
  border:1px solid rgba(185,139,78,.4);
  border-radius:10px;
  background:rgba(185,139,78,.08);
  color:var(--cream-text);
  font-size:13.5px;
  line-height:1.55;
}
.cg-comm-msg.is-bad{
  border-color:rgba(224,106,92,.5);
  background:rgba(224,106,92,.10);
  color:#f0b7ae;
}
/* an author display rule would otherwise beat [hidden] and leave the
   message permanently on screen — this has bitten this theme before */
.cg-comm-msg[hidden]{display:none !important;}

/* ── the two optional fields ── */
.cg-comm-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
  margin:20px 0 8px;
}
.cg-comm-label span{opacity:.6; letter-spacing:.06em;}

.cg-comm input[type="text"]#cg_comm_words,
.cg-comm textarea#cg_comm_notes{
  width:100%;
  box-sizing:border-box;
  padding:14px 16px;
  background:var(--ink) !important;
  color:var(--cream-text) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  font-family:'IBM Plex Mono', monospace;
  font-size:16px !important;      /* below 16px iOS zooms the whole page in */
  line-height:1.5;
}
.cg-comm input[type="text"]#cg_comm_words{height:54px; padding-top:0; padding-bottom:0;}
.cg-comm textarea#cg_comm_notes{resize:vertical; min-height:92px;}
.cg-comm input#cg_comm_words:focus,
.cg-comm textarea#cg_comm_notes:focus{
  outline:none !important;
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(185,139,78,.16) !important;
}
.cg-comm ::placeholder{color:var(--paper-dim); opacity:.5;}

/* ── the promise ── */
.cg-comm-promise{
  list-style:none;
  margin:20px 0 0;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--ink-panel);
}
.cg-comm-promise li{
  position:relative;
  padding-left:22px;
  margin:0 0 8px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--paper-dim);
}
.cg-comm-promise li:last-child{margin-bottom:0;}
.cg-comm-promise li::before{
  content:'✓';
  position:absolute;
  left:0; top:0;
  color:var(--gold);
  font-size:12px;
}

/* ── MAKING ROOM INSIDE form.cart ──
   The theme lays form.cart out as `display:flex !important` with no wrap, so
   quantity and Add to cart share one row. A block dropped in there without
   this gets squeezed into a ~150px column. Scoped with :has() so products
   WITHOUT a commission box keep the exact layout they have today. */
.woocommerce div.product form.cart:has(.cg-comm){
  flex-wrap:wrap !important;
}
.woocommerce div.product form.cart .cg-comm{
  flex:0 0 100% !important;
  width:100% !important;
  min-width:100%;          /* fallback where :has() is missing */
  order:-1;                /* above quantity and the button */
  box-sizing:border-box;
}

@media (min-width:768px){
  .cg-comm{padding:22px;}
  .cg-comm-thumb{width:60px; height:60px;}
}

@media (prefers-reduced-motion: reduce){
  .cg-comm-pick{transition:none;}
}

/* a photograph that will do, but only just — said plainly rather than hidden */
.cg-comm-item.is-soft{border-color:rgba(185,139,78,.5);}
.cg-comm-item.is-soft .cg-comm-state{color:var(--gold-soft, #d8b382);}

/* ── the live burn-sketch preview ──
   Sits under the uploaded photo. The canvas keeps the mockup's own shape, so
   it is never letterboxed into a fixed rectangle. */
.cg-comm-preview{margin-top:20px;}
.cg-comm-preview[hidden]{display:none !important;}

.cg-comm-canvas-wrap{
  position:relative;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--ink-panel);
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cg-comm-canvas-wrap canvas{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}
.cg-comm-working{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(16,15,12,.72);
  color:var(--cream-text);
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:.08em;
}
.cg-comm-working[hidden]{display:none !important;}

.cg-comm-styles{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.cg-comm-style{
  flex:1 1 150px;
  min-height:56px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  color:var(--paper-dim);
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.cg-comm-style b{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  font-weight:500;
  color:var(--cream-text);
  margin-bottom:2px;
}
.cg-comm-style span{font-size:11.5px; line-height:1.4; display:block;}
.cg-comm-style:hover{border-color:var(--gold-soft);}
.cg-comm-style.is-on{border-color:var(--gold);}
.cg-comm-style.is-on b{color:var(--gold);}

.cg-comm-fineprint{
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--paper-dim);
  opacity:.85;
}

/* ── what we ask them to send ── */
.cg-comm-asks{
  list-style:none;
  margin:8px 0 14px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.cg-comm-asks li{
  position:relative;
  padding-left:20px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--paper-dim);
}
.cg-comm-asks li::before{
  content:'·';
  position:absolute;
  left:6px; top:-1px;
  color:var(--gold);
  font-size:18px;
  line-height:1.3;
}

/* ── the receipt, once a photo is safely with us ── */
.cg-comm-thanks{
  margin:14px 0 0;
  padding:13px 15px;
  border:1px solid rgba(185,139,78,.42);
  border-radius:10px;
  background:rgba(185,139,78,.09);
  font-size:13.5px;
  line-height:1.6;
  color:var(--paper-dim);
}
.cg-comm-thanks strong{display:block; color:var(--cream-text); margin-bottom:2px;}
.cg-comm-thanks[hidden]{display:none !important;}

/* ═══════════════════════════════════════════════════════════════════
   THE BURN SKETCH PAGE · 14 Sep 2026
   Phone-first throughout. The moving strip blurs only its two
   neighbours, and stops whenever it is off screen or touched.
═══════════════════════════════════════════════════════════════════ */

.cg-burn-page{display:block;}
.cg-burn-sec{
  padding:44px 18px 0;
  max-width:1120px;
  margin:0 auto;
}
.cg-burn-sec h2{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(23px,5.2vw,32px);
  line-height:1.18;
  color:var(--cream-text);
  margin:0 0 6px;
  text-wrap:balance;
}
.cg-burn-lead{
  margin:0 0 20px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--paper-dim);
  max-width:56ch;
}

/* ── the top ── */
.cg-burn-hero{position:relative; overflow:hidden;}
.cg-burn-hero-media{position:relative; line-height:0;}
.cg-burn-hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,8,.30) 0%, rgba(10,10,8,.10) 38%, var(--ink) 100%);
}
.cg-burn-hero-img{width:100%; height:auto; display:block; object-fit:cover;}
.cg-burn-hero-text{
  position:relative;
  margin-top:-70px;
  padding:0 18px 6px;
  max-width:1120px;
  margin-left:auto; margin-right:auto;
}
.cg-burn-hero.no-photo .cg-burn-hero-text{margin-top:0; padding-top:56px;}
.cg-burn-eyebrow{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.cg-burn-hero-text h1{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(28px,7vw,52px);
  line-height:1.08;
  color:var(--cream-text);
  margin:0;
  text-wrap:balance;
}
.cg-burn-hero-text p{
  margin:14px 0 0;
  font-size:15.5px;
  line-height:1.7;
  color:var(--paper-dim);
  max-width:52ch;
}

.cg-burn-words{font-size:15.5px; line-height:1.75; color:var(--paper-dim);}
.cg-burn-words p{max-width:60ch;}

/* ── the gallery ── */
/* ── the band of finished work ──
   A scroll container, not a CSS animation, so dragging it works. */
.cg-band{
  margin:18px -18px 0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.cg-band::-webkit-scrollbar{display:none;}
.cg-band:active{cursor:grabbing;}

.cg-band-track{
  display:flex;
  gap:12px;
  padding:0 18px;
  width:max-content;
}
.cg-band figure{
  margin:0;
  flex:0 0 auto;
  width:clamp(150px, 42vw, 240px);
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-panel);
  border:1px solid var(--line);
}
.cg-band img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
}

/* ── the moving strip ── */
.cg-burn-people-sec{padding-bottom:6px;}
.cg-cf{
  position:relative;
  /* the box is sized FROM the photograph, not guessed at — a fixed height
     cropped the bottom off every picture on a phone */
  --cf-w:min(56vw,300px);
  height:calc(var(--cf-w) * 1.3333 + 78px);
  padding-bottom:30px;      /* room for the dots, below the photographs */
  margin-top:20px;
  outline:none;
  /* the neighbours run past the screen edge by design; without this they
     widen the page instead of sliding off it */
  overflow:hidden;
}
.cg-cf:focus-visible{outline:2px solid var(--gold); outline-offset:6px; border-radius:12px;}
.cg-cf-glow{
  position:absolute;
  left:50%; top:50%;
  width:min(78vw,520px); height:min(78vw,520px);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(185,139,78,.30), rgba(185,139,78,.07) 58%, transparent 72%);
  pointer-events:none;
}
.cg-cf-stage{position:absolute; inset:0 0 30px; z-index:1;}
.cg-cf-item{
  position:absolute;
  left:50%; top:46%;
  margin:0;
  width:var(--cf-w);
  transform:translate(-50%,-50%);
  /* quick, because the strip now moves every second */
  transition:transform .42s cubic-bezier(.22,.85,.28,1), filter .42s ease, opacity .42s ease;
  will-change:transform;
}
.cg-cf-item img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(185,139,78,.28);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.cg-cf-item.is-near{filter:blur(4px) saturate(.85); opacity:.5;}
.cg-cf-item.is-on{filter:none; opacity:1;}
.cg-cf-item figcaption{
  margin-top:12px;
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  line-height:1.5;
  color:var(--paper-dim);
  opacity:0;
  transition:opacity .3s ease;
}
.cg-cf-item.is-on figcaption{opacity:1; color:var(--cream-text);}

.cg-cf-dots{
  position:absolute;
  left:0; right:0; bottom:4px;
  z-index:6;                /* a photograph's caption used to sit on top of
                               these and swallow every tap */
  display:flex;
  justify-content:center;
  gap:7px;
}
.cg-cf-dot{
  width:7px; height:7px;
  padding:0;
  position:relative;
  border:0;
  border-radius:50%;
  background:var(--line);
  cursor:pointer;
  transition:background .25s ease, width .25s ease;
}
.cg-cf-dot.is-on{background:var(--gold); width:20px; border-radius:4px;}
/* the dot itself is small; the thing a thumb hits is not */
.cg-cf-dot::after{content:''; position:absolute; inset:-16px -7px;}

/* ── the sizes ── */
.cg-burn-sizes{--cg-plank:250px;}
@media(min-width:760px){.cg-burn-sizes{--cg-plank:390px;}}
.cg-burn-size-scroll{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:10px;
  margin:0 -18px;
}
.cg-burn-size-row{
  display:flex;
  align-items:flex-end;
  gap:14px;
  padding:0 18px 0;
  width:max-content;
  /* the ground they stand on */
  background:linear-gradient(transparent calc(100% - 31px), rgba(185,139,78,.20) calc(100% - 31px), transparent calc(100% - 30px));
}
.cg-burn-size-hint{
  margin:10px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--paper-dim);
  opacity:.7;
}
@media(min-width:900px){.cg-burn-size-hint{display:none;}}
.cg-burn-size-item{
  margin:0;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-decoration:none;
  color:inherit;
}
a.cg-burn-size-item .cg-burn-plank{transition:transform .2s ease, box-shadow .2s ease;}
a.cg-burn-size-item:hover .cg-burn-plank{transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(185,139,78,.6), 0 16px 26px rgba(0,0,0,.5);}
a.cg-burn-size-item:hover strong{color:var(--gold);}
a.cg-burn-size-item:focus-visible{outline:2px solid var(--gold); outline-offset:6px; border-radius:6px;}

/* Each plank is drawn, not photographed: the real grain as a background at one
   fixed scale across every piece, so the wood looks like the same wood whether
   the board is four inches or twenty-four. */
.cg-burn-plank{
  display:block;
  border-radius:3px;
  background-color:#e8c19b;
  background-image:var(--cg-wood, none);
  /* the whole photograph on EVERY plank, just smaller each time. A fixed
     grain scale showed the big ones the picture and the small ones a
     zoomed-in patch of nothing. */
  background-size:cover;
  background-position:center;
  box-shadow:
    inset 0 0 0 1px rgba(120,84,46,.22),
    0 10px 20px rgba(0,0,0,.42);
}
.cg-burn-plank.no-wood{
  background-image:
    repeating-linear-gradient(92deg,
      rgba(150,104,58,.13) 0 1px,
      rgba(150,104,58,0) 1px 6px),
    repeating-linear-gradient(88deg,
      rgba(120,80,40,.09) 0 2px,
      rgba(120,80,40,0) 2px 17px),
    linear-gradient(100deg,#f0cdab,#e0b288 58%,#ead0b0);
}
/* the edge of the board, so it reads as a solid thing and not a swatch */
.cg-burn-size-row figure{position:relative;}
.cg-burn-plank::after{content:'';}
.cg-burn-size-cap{
  display:block;
  margin-top:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  line-height:1.5;
  color:var(--paper-dim);
}
.cg-burn-size-cap strong{
  display:block;
  color:var(--cream-text);
  font-size:12.5px;
  white-space:nowrap;       /* "5 x 4" must never break across two lines */
  transition:color .2s ease;
}
.cg-burn-size-cap span{display:block;}
.cg-burn-size-cap em{display:block; font-style:normal; color:var(--gold); margin-top:2px;}

/* ── how it works ── */
.cg-burn-steps{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  counter-reset:none;
}
.cg-burn-steps li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.cg-burn-steps li:last-child{border-bottom:0;}
.cg-burn-steps .n{
  flex:0 0 30px;
  height:30px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
}
.cg-burn-steps .t{font-size:14.5px; line-height:1.6; color:var(--paper-dim);}
.cg-burn-steps .t strong{display:block; color:var(--cream-text); margin-bottom:2px;}
@media(min-width:760px){
  .cg-burn-steps{flex-direction:row; gap:22px;}
  .cg-burn-steps li{flex:1; border-bottom:0; flex-direction:column; padding:0;}
}

/* ── the way in ── */
.cg-burn-cta{
  padding:48px 18px 64px;
  text-align:center;
  max-width:1120px;
  margin:0 auto;
}
.cg-burn-cta-btn{
  display:inline-block;
  min-height:56px;
  padding:17px 40px;
  border-radius:999px;
  background:var(--gold);
  color:var(--ink) !important;   /* the theme's link colour is gold too, and
                                    gold on gold left the button blank */
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--gold);
  transition:background .2s ease, color .2s ease;
}
.cg-burn-cta-btn:hover{background:transparent; color:var(--gold) !important;}
.cg-burn-cta p{
  margin:18px 0 0;
  font-size:13px;
  line-height:1.7;
  color:var(--paper-dim);
}
.cg-burn-cta a{color:var(--gold);}

@media (prefers-reduced-motion: reduce){
  .cg-cf-item{transition:none;}
  .cg-cf-item.is-near{filter:none; opacity:.35;}
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE BANNER · 15 Sep 2026
   One picture across the top of an ordinary page, below the navigation.
   Same treatment as the burn sketch opening, so the site reads as one.
═══════════════════════════════════════════════════════════════════ */

.cg-banner{position:relative; overflow:hidden;}
.cg-banner-media{position:relative; line-height:0;}
.cg-banner-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,8,.34) 0%, rgba(10,10,8,.12) 40%, var(--ink) 100%);
}
.cg-banner-media img{
  display:block;
  width:100%;
  height:clamp(190px, 46vw, 380px);
  object-fit:cover;
}
.cg-banner.is-tall .cg-banner-media img{height:clamp(260px, 64vw, 540px);}

.cg-banner-text{
  position:relative;
  margin:-66px auto 0;
  padding:0 18px 4px;
  max-width:1120px;
}
.cg-banner-text h1{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(26px,6.4vw,46px);
  line-height:1.1;
  color:var(--cream-text);
  margin:0;
  text-wrap:balance;
}
.cg-banner-text p{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.65;
  color:var(--paper-dim);
  max-width:54ch;
}

/* ═══════════════════════════════════════════════════════════════════
   THE OPENING SCREEN · 15 Sep 2026
   Everything here is drawn, not downloaded. A picture or a film fades
   in behind only once it has really arrived; until then — or for ever,
   if it never does — the screen is already finished.
═══════════════════════════════════════════════════════════════════ */

.cg-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--ink);
  padding:clamp(52px, 13vw, 104px) 18px clamp(44px, 10vw, 84px);
}

/* ── what is always there ── */

/* the grain: two sets of hairlines at a shallow angle. Costs nothing to
   fetch and gives the black ground the warmth a photograph would have. */
.cg-hero-grain{
  position:absolute; inset:0; z-index:-2;
  pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(97deg,
      rgba(185,139,78,.055) 0 1px,
      rgba(185,139,78,0) 1px 9px),
    repeating-linear-gradient(93deg,
      rgba(185,139,78,.035) 0 2px,
      rgba(185,139,78,0) 2px 23px);
}

.cg-hero-glow{
  position:absolute; z-index:-2;
  right:-22%; top:-34%;
  width:min(128vw, 900px);
  height:min(128vw, 900px);
  pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(185,139,78,.30),
    rgba(185,139,78,.10) 46%,
    transparent 72%);
}

/* ── the optional layers behind ── */
.cg-hero-media,
.cg-hero-video{
  position:absolute; inset:0; z-index:-3;
  opacity:0;
  transition:opacity .9s ease;
}
.cg-hero-media img,
video.cg-hero-video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--cg-hero-focus, center);
  display:block;
}
/* the still shows as soon as it decodes; the film waits to be asked */
.cg-hero-media{opacity:.42;}
.cg-hero.has-video .cg-hero-media{opacity:0;}
.cg-hero.has-video .cg-hero-video{opacity:.40;}

/* a scrim so the words never fight whatever is behind them */
.cg-hero::after{
  content:'';
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,
      rgba(16,15,12,.62) 0%,
      rgba(16,15,12,.34) 42%,
      var(--ink) 100%);
}

/* ── the words ── */
.cg-hero-inner{
  position:relative;
  max-width:1120px;
  margin:0 auto;
}

.cg-hero-eyebrow{
  margin:0 0 16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  max-width:34ch;
  line-height:1.6;
}

.cg-hero-title{
  margin:0;
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:clamp(34px, 9.2vw, 68px);
  line-height:1.03;
  letter-spacing:-.015em;
  color:var(--cream-text);
  text-wrap:balance;
}
.cg-hero-title span{display:block;}
.cg-hero-title em{
  display:block;
  font-style:italic;
  color:var(--gold);
}

.cg-hero-text{
  margin:20px 0 0;
  font-size:clamp(15px, 3.6vw, 17.5px);
  line-height:1.72;
  color:var(--paper-dim);
  max-width:46ch;
}

/* ── the two ways in ── */
.cg-hero-cta{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:28px;
}
.cg-hero-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:16px 30px;
  border-radius:999px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--gold);
  transition:background .2s ease, color .2s ease;
}
.cg-hero-btn.is-solid{background:var(--gold); color:var(--ink) !important;}
.cg-hero-btn.is-solid:hover{background:transparent; color:var(--gold) !important;}
.cg-hero-btn.is-ghost{background:transparent; color:var(--gold) !important;}
.cg-hero-btn.is-ghost:hover{background:rgba(185,139,78,.14);}
.cg-hero-btn:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}

/* ── the quiet proof ── */
.cg-hero-trust{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin:30px 0 0;
  padding:22px 0 0;
  border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--paper-dim);
}
.cg-hero-trust strong{color:var(--cream-text); font-weight:500;}

@media (min-width:760px){
  .cg-hero-cta{flex-direction:row; gap:12px;}
  .cg-hero-btn{min-width:210px;}
  .cg-hero-eyebrow{max-width:none;}
  .cg-hero-trust{gap:8px 32px;}
}

@media (prefers-reduced-motion: reduce){
  .cg-hero-media, .cg-hero-video{transition:none;}
}
/* ============ Ganpati Giveaway popup ============ */
/* [hidden] must beat any author display rule on this element — this exact
   bug (an author "display:flex" rule beating the [hidden] UA rule) has
   bitten the share menu and the gift-finder overlay before. Guard it here
   the same way from the start. */
.cg-gv-overlay[hidden] { display: none !important; }

.cg-gv-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(10, 8, 6, 0.72);
}

.cg-gv-sheet {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 88vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--cg-paper-cream, #f6efe1);
	color: var(--cg-ink-black, #14110d);
	border-radius: 20px 20px 0 0;
	padding: 28px 22px 26px;
	box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
}

@media (min-width: 640px) {
	.cg-gv-overlay { align-items: center; }
	.cg-gv-sheet { border-radius: 16px; margin-bottom: 0; }
}

.cg-gv-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}

.cg-gv-intro h3 {
	margin: 4px 0 10px;
	font-size: 1.35rem;
}

.cg-gv-intro p,
.cg-gv-success p {
	margin: 0 0 16px;
	line-height: 1.5;
}

.cg-gv-btn {
	display: inline-block;
	width: 100%;
	text-align: center;
	background: var(--cg-gold, #b8873a);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 14px 18px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	text-decoration: none;
}

.cg-gv-form label {
	display: block;
	margin-bottom: 14px;
	font-size: 0.9rem;
}

.cg-gv-form input[type="text"],
.cg-gv-form input[type="file"] {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 11px 12px;
	font-size: 16px; /* prevents iOS auto-zoom on focus */
	border: 1px solid rgba(20,17,13,0.25);
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
}

.cg-gv-error {
	color: #b3261e;
	font-size: 0.88rem;
	margin: -6px 0 12px;
}

.cg-gv-locked-notice {
	background: rgba(184,135,58,0.12);
	border: 1px solid var(--cg-gold, #b8873a);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 0.92rem;
	margin: 14px 0;
}

/* Persistent reopen tab — the safety net when the popup is missed or closed.
   Same [hidden] guard as the overlay: an author display rule beats the UA
   [hidden] rule, so it must be declared explicitly here. */
.cg-gv-tab[hidden] { display: none !important; }

.cg-gv-tab {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9990;
	display: block;
	background: var(--cg-gold, #b8873a);
	color: #fff;
	border: none;
	border-radius: 0 10px 10px 0;
	padding: 12px 10px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	writing-mode: vertical-rl;
	box-shadow: 2px 2px 12px rgba(0,0,0,0.3);
}

@media (max-width: 640px) {
	/* On phones the left edge already carries the OFFER tab, so sit below it. */
	.cg-gv-tab { top: auto; bottom: 150px; transform: none; }
}