/* ============================================================
   COUNTRY SQUIRE — HERO PROTOTYPE (building -> zoom -> interior)
   ============================================================ */

.cs-proto {
  margin: 0;
  background: var(--cs-charcoal);
  color: var(--cs-cream);
  overflow-x: hidden;
}

/* Prototype canvas: suppress global Elementor popups / announcement bars
   that get injected site-wide via JS so they don't cover the hero. */
.cs-proto .elementor-popup-modal,
.cs-proto .dialog-widget,
.cs-proto .dialog-type-lightbox,
.cs-proto .elementor-location-popup,
.cs-proto div[id^="elementor-popup-modal-"],
.cs-proto .woocommerce-store-notice,
.cs-proto.woocommerce-demo-store .woocommerce-store-notice { display: none !important; }

.cs-hero {
  position: relative;
  width: 100%;
  height: 100dvh;          /* never h-screen (iOS jump) */
  overflow: hidden;
}

.cs-hero__stage { position: absolute; inset: 0; }

/* Exterior building image — the thing we zoom into */
.cs-hero__img {
  position: absolute;
  inset: -2%;              /* slight bleed so edges never show on scale */
  background-size: cover;
  background-position: center 50%;
  transform-origin: 51% 63%;   /* aim the zoom at the claymation front door */
  width: 104%; height: 104%;
  object-fit: cover; object-position: center 50%;
  will-change: transform;
}

/* Vignette that deepens as we push in */
.cs-hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 95% at 51% 63%, transparent 28%, rgba(20,18,15,.45) 72%, rgba(20,18,15,.92) 100%),
    linear-gradient(to top, rgba(20,18,15,.6) 0%, transparent 42%);
  opacity: .55;
  will-change: opacity;
}

/* Interior reveal layer — Jon David at the tobacco bar */
.cs-hero__interior {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  background: #100B08;
  will-change: opacity, transform;
}
.cs-hero__interior-img,
.cs-hero__interior-video {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: 44% 50%;       /* establishing push-in toward Jon David */
  background-size: cover;
  background-position: 50% 38%;
}
.cs-hero__interior-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(16,11,8,.9) 0%, rgba(16,11,8,.25) 42%, transparent 68%),
    radial-gradient(75% 60% at 78% 28%, rgba(184,137,63,.14), transparent 60%);
}
.cs-hero__interior-inner {
  position: absolute;
  left: clamp(1.25rem, 5vw, 5rem);
  bottom: clamp(2rem, 8vh, 6rem);
  max-width: min(92vw, 640px);
  z-index: 2;
}
.cs-hero__interior-title {
  font-size: var(--cs-step-4);
  line-height: .95;
  color: var(--cs-cream);
  margin: .18em 0 .55em;
}

/* Exterior content, bottom-left (asymmetric, not centered) */
.cs-hero__exterior-content {
  position: absolute;
  left: clamp(1.25rem, 5vw, 5rem);
  bottom: clamp(2rem, 8vh, 6rem);
  max-width: min(92vw, 760px);
  z-index: 3;
  will-change: opacity, transform;
}
.cs-hero__title {
  font-size: var(--cs-step-4);
  font-weight: 600;
  line-height: .92;
  margin: .22em 0 .42em;
  color: var(--cs-cream);
  text-shadow: 0 2px 30px rgba(20,18,15,.35);
}
.cs-sub {
  font-family: var(--cs-font-body);
  font-size: var(--cs-step-1);
  font-weight: 300;
  color: rgba(244,237,225,.82);
  max-width: 40ch;
  margin: 0;
}

/* Eyebrows */
.cs-eyebrow {
  font-family: var(--cs-font-body);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 500;
  color: var(--cs-stone);
  margin: 0;
}
.cs-eyebrow--gold { color: var(--cs-gold); }
.cs-note { font-family: var(--cs-font-body); color: var(--cs-stone); font-size: .9rem; margin-top: .2rem; }

/* Scroll cue */
.cs-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--cs-font-body);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: .66rem;
  color: rgba(244,237,225,.7);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.cs-scrollcue span {
  width: 1px; height: 46px;
  background: linear-gradient(var(--cs-gold), transparent);
  animation: cs-cue 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cs-cue { 0%,100%{ transform: scaleY(.4); opacity:.5 } 50%{ transform: scaleY(1); opacity:1 } }

/* Film grain — fixed, pointer-events-none (no scroll repaints) */
.cs-grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reduced-motion / fallback: show a clean static hero, no pin */
.cs-hero.is-static .cs-hero__img { transform: scale(1.04); }
.cs-hero.is-static .cs-hero__veil { opacity: .55; }

@media (max-width: 768px) {
  .cs-hero__title { font-size: clamp(2.6rem, 13vw, 4rem); }
}

/* ============================================================
   REAL-PAGE INTEGRATION (homepage: hero + sections in theme chrome)
   ============================================================ */
/* Full-bleed sections break out of GeneratePress' container */
.cs-has-hero .cs-hero,
.cs-has-hero .cs-band,
.cs-has-hero .cs-shop {
  position: relative;
  left: 50%; right: 50%;
  width: 100vw;
  margin-left: -50vw; margin-right: -50vw;
}
.cs-has-hero .entry-content > *:first-child { margin-top: 0; }
.cs-has-hero .entry-content { margin: 0; }
/* Kill global Elementor popups + Woo demo-store notice on the new home */
.cs-has-hero .elementor-popup-modal,
.cs-has-hero .dialog-widget,
.cs-has-hero .dialog-type-lightbox,
.cs-has-hero div[id^="elementor-popup-modal-"] { display: none !important; }

/* --- Bands (intro + CTA) --- */
.cs-band { padding: clamp(4rem, 12vh, 9rem) 1.5rem; text-align: center; }
.cs-band__inner { max-width: 760px; margin: 0 auto; }
.cs-band--dark { background: var(--cs-charcoal); color: var(--cs-cream); }
.cs-band--gold { background: linear-gradient(160deg, var(--cs-gold) 0%, #9c7232 100%); color: #1a1613; }
.cs-band__title { font-size: var(--cs-step-3); margin: .25em 0 .4em; }
.cs-band__sub { margin: 0 auto 2rem; max-width: 54ch; font-family: var(--cs-font-body); font-size: var(--cs-step-1); font-weight: 300; }
.cs-band--dark .cs-band__sub { color: rgba(244,237,225,.82); }

/* --- Button --- */
.cs-btn { display: inline-block; background: var(--cs-gold); color: #1a1613; font-family: var(--cs-font-body); font-weight: 600; letter-spacing: .01em; padding: .95rem 1.7rem; border-radius: 7px; text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.cs-btn:hover { background: var(--cs-gold-2); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(184,137,63,.6); }
.cs-btn--dark { background: #1a1613; color: var(--cs-cream); }
.cs-btn--dark:hover { background: #000; }

/* --- Shop section (large + in charge products) --- */
.cs-shop { background: var(--cs-cream); color: var(--cs-ink); padding: clamp(4rem, 10vh, 8rem) clamp(1.25rem, 5vw, 5rem); }
.cs-shop__head { max-width: var(--cs-maxw); margin: 0 auto 2.5rem; }
.cs-shop__head .cs-display { font-size: var(--cs-step-3); margin: .15em 0 0; }
.cs-shop .woocommerce, .cs-shop ul.products { max-width: var(--cs-maxw); margin-left: auto; margin-right: auto; }
.cs-shop ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.cs-shop ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; text-align: left; }
.cs-shop ul.products li.product a img { border-radius: 12px; margin: 0 0 1rem; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; box-shadow: 0 18px 36px -22px rgba(26,22,19,.5); }
.cs-shop ul.products li.product .woocommerce-loop-product__title { font-family: var(--cs-font-body); font-weight: 500; font-size: 1.02rem; color: var(--cs-ink); padding: 0 0 .25rem; }
.cs-shop ul.products li.product .price { color: var(--cs-ink); font-family: var(--cs-font-body); font-weight: 600; }
.cs-shop ul.products li.product .button { display: inline-block; margin-top: .65rem; background: var(--cs-charcoal); color: var(--cs-cream); border-radius: 6px; padding: .55rem 1rem; font-family: var(--cs-font-body); font-size: .85rem; }
.cs-shop ul.products li.product .button:hover { background: var(--cs-gold); color: #1a1613; }
@media (max-width: 900px) { .cs-shop ul.products { grid-template-columns: repeat(2, 1fr); } }

/* Screenshot helper: cap hero height when pin is disabled */
.cs-flat .cs-hero { height: 680px; }

/* ============================================================
   SITE HEADER (solid bar above the hero) — replaces Elementor header
   ============================================================ */
.cs-has-hero header.elementor-location-header,
.cs-has-hero .elementor-location-header { display: none !important; }

.cs-siteheader { background: var(--cs-charcoal); color: var(--cs-cream); position: relative; z-index: 50; border-bottom: 1px solid rgba(244,237,225,.08); }
.cs-siteheader__inner { max-width: var(--cs-maxw); margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; padding: .5rem clamp(1rem, 4vw, 3rem); }
.cs-siteheader__brand { flex: 0 0 auto; line-height: 0; }
.cs-siteheader__brand img { height: 70px; width: auto; display: block; }

.cs-siteheader__nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); flex: 1 1 auto; margin-left: 1rem; }
.cs-siteheader__nav a { font-family: var(--cs-font-body); font-weight: 500; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,237,225,.88); text-decoration: none; padding: .35rem 0; transition: color .2s ease; }
.cs-siteheader__nav a:hover { color: var(--cs-gold); }

.cs-siteheader__actions { display: flex; align-items: center; gap: 1.1rem; flex: 0 0 auto; }
.cs-search { display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.07); border: 1px solid rgba(244,237,225,.16); border-radius: 999px; padding: .45rem .9rem; transition: border-color .2s ease, background .2s ease; }
.cs-search:focus-within { border-color: var(--cs-gold); background: rgba(255,255,255,.1); }
.cs-search svg { width: 16px; height: 16px; color: var(--cs-stone); flex: 0 0 auto; }
.cs-search input[type=search] { background: transparent; border: 0; outline: 0; color: var(--cs-cream); font-family: var(--cs-font-body); font-size: .85rem; width: 160px; }
.cs-search input[type=search]::placeholder { color: rgba(244,237,225,.5); }
.cs-icon { color: rgba(244,237,225,.9); display: inline-flex; transition: color .2s ease; }
.cs-icon:hover { color: var(--cs-gold); }
.cs-icon svg { width: 21px; height: 21px; }

@media (max-width: 980px) {
  .cs-siteheader__nav { display: none; }
  .cs-search input[type=search] { width: 110px; }
}

/* Hide GeneratePress top-bar widget (leftover FiboSearch) on hero pages */
.cs-has-hero .top-bar { display: none !important; }

/* ============================================================
   PRODUCT SHOWCASE — "large and in charge" (Hartzler-style)
   ============================================================ */
.cs-showcase { background: var(--cs-cream); color: var(--cs-ink); padding: clamp(4rem,10vh,8rem) clamp(1.25rem,5vw,5rem); overflow: hidden; }
.cs-showcase__head { max-width: var(--cs-maxw); margin: 0 auto; text-align: center; }
.cs-showcase__head .cs-eyebrow { display: inline-block; }
.cs-showcase__title { font-size: var(--cs-step-3); margin: .15em 0 0; }

.cs-showcase__stage { position: relative; max-width: var(--cs-maxw); margin: clamp(2.5rem,6vh,4.5rem) auto 0; }
.cs-showcase__word {
  position: absolute; top: -.35em; left: 50%; transform: translateX(-50%);
  font-family: var(--cs-font-display); font-weight: 600; line-height: 1;
  font-size: clamp(6rem, 20vw, 19rem); letter-spacing: -.04em;
  color: rgba(26,22,19,.05); white-space: nowrap; pointer-events: none; z-index: 0;
}
.cs-showcase__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 3rem); align-items: end; }

.cs-tile { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--cs-ink); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.cs-tile:hover { transform: translateY(-10px); }
.cs-tile__pill { margin-bottom: 1rem; background: var(--cs-gold); color: #1a1613; font-family: var(--cs-font-body); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .38rem .9rem; border-radius: 999px; }
.cs-tile__media { display: block; width: 100%; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 34px 64px -30px rgba(26,22,19,.6); }
.cs-tile__media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s ease; }
.cs-tile:hover .cs-tile__media img { transform: scale(1.04); }
.cs-tile__name { margin-top: 1.15rem; font-size: var(--cs-step-1); text-align: center; line-height: 1.05; }

/* middle tile sits a touch larger/raised — "in charge" */
.cs-showcase__grid .cs-tile--2 { transform: translateY(-1.75rem) scale(1.06); }
.cs-showcase__grid .cs-tile--2:hover { transform: translateY(-2.5rem) scale(1.06); }

.cs-showcase__cta { text-align: center; margin-top: clamp(2.75rem, 7vh, 4.5rem); }

@media (max-width: 820px) {
  .cs-showcase__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 2.5rem; }
  .cs-showcase__grid .cs-tile--2 { transform: none; }
  .cs-showcase__word { font-size: 30vw; }
}

/* ============================================================
   SHOP BY CATEGORY — big category cards
   ============================================================ */
.cs-cats { background: var(--cs-paper); color: var(--cs-ink); padding: clamp(4rem,10vh,8rem) clamp(1.25rem,5vw,5rem); }
.cs-cats__head { max-width: var(--cs-maxw); margin: 0 auto clamp(2rem,5vh,3.5rem); text-align: center; }
.cs-cats__title { font-size: var(--cs-step-3); color: var(--cs-ink); margin: .15em 0 0; }
.cs-cats__grid { max-width: var(--cs-maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.75rem); }
.cs-cat { position: relative; display: block; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--cs-cream); aspect-ratio: 4/5; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.cs-cat__media { position: absolute; inset: 0; }
.cs-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cs-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,12,9,.88) 0%, rgba(16,12,9,.25) 46%, transparent 74%); }
.cs-cat:hover .cs-cat__media img { transform: scale(1.06); }
.cs-cat__body { position: absolute; left: clamp(1rem,2vw,1.6rem); right: 1rem; bottom: clamp(1rem,2.5vh,1.6rem); z-index: 1; }
.cs-cat__name { display: block; font-size: var(--cs-step-2); line-height: 1; }
.cs-cat__meta { display: inline-block; margin-top: .5rem; font-family: var(--cs-font-body); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-gold); }
@media (max-width: 820px) { .cs-cats__grid { grid-template-columns: 1fr; max-width: 440px; } .cs-cat { aspect-ratio: 3/2; } }

/* Remove GeneratePress content-container spacing/box on hero pages so the
   hero sits flush under the header (kills the white strip). */
.cs-has-hero .site-content { padding: 0 !important; margin: 0 !important; }
.cs-has-hero .content-area,
.cs-has-hero #primary,
.cs-has-hero .inside-article,
.cs-has-hero article { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.cs-has-hero .entry-content { margin: 0 !important; padding: 0 !important; }
.cs-has-hero .top-bar { display: none !important; }

/* ============================================================
   BEHIND THE BLEND — Drew-style two-tone product story
   ============================================================ */
.cs-story { position: relative; background: linear-gradient(to bottom, var(--cs-clay) 0 58%, var(--cs-cream) 58% 100%); padding: clamp(3.5rem,9vh,7rem) clamp(1.25rem,5vw,5rem); }
.cs-story__inner { max-width: var(--cs-maxw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.cs-story__media img { width: 100%; border-radius: 18px; box-shadow: 0 44px 80px -34px rgba(30,18,10,.6); display: block; }
.cs-story__body { color: #2b1d12; }
.cs-story__eyebrow { color: #7a4a30; }
.cs-story__title { font-size: var(--cs-step-4); color: #241007; line-height: .95; margin: .15em 0 .9rem; }
.cs-story__pill { display: inline-block; background: #2a1d14; color: var(--cs-cream); font-family: var(--cs-font-body); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .38rem .9rem; border-radius: 999px; margin-bottom: 1.4rem; }
.cs-story__copy { font-family: var(--cs-font-body); font-size: var(--cs-step-1); line-height: 1.65; color: #3a281c; max-width: 46ch; margin: 0 0 2rem; }
@media (max-width: 820px) {
  .cs-story__inner { grid-template-columns: 1fr; }
  .cs-story { background: linear-gradient(to bottom, var(--cs-clay) 0 44%, var(--cs-cream) 44% 100%); }
}

/* GeneratePress .site-main has a 20px top margin — kill it on hero pages (was the white strip) */
.cs-has-hero .site-main { margin: 0 !important; padding: 0 !important; }

/* ============================================================
   FULL-BLEED FIX — make content full-width on hero pages so the
   pinned hero + sections truly fill the viewport (the 100vw +
   negative-margin hack doesn't survive the GSAP pin).
   ============================================================ */
.cs-has-hero #page,
.cs-has-hero .grid-container,
.cs-has-hero .grid-container.container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.cs-has-hero .cs-hero,
.cs-has-hero .cs-band,
.cs-has-hero .cs-shop,
.cs-has-hero .cs-cats,
.cs-has-hero .cs-story,
.cs-has-hero .cs-showcase { left: auto !important; right: auto !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ============================================================
   Hero stays full-width, but the content sections below it
   return to a centered max-width column (not edge-to-edge).
   ============================================================ */
body.cs-has-hero { background: var(--cs-paper) !important; }
.cs-has-hero .cs-band,
.cs-has-hero .cs-cats,
.cs-has-hero .cs-story,
.cs-has-hero .cs-showcase {
  max-width: var(--cs-maxw) !important;   /* ~1400px, centered */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The dark intro band goes full-width; the content sections below stay centered */
.cs-has-hero .cs-band.cs-band--dark {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   RECENTLY ADDED — full-width dark strip above the CTA
   ============================================================ */
.cs-recent { background: var(--cs-charcoal); color: var(--cs-cream); padding: clamp(3.5rem,9vh,6.5rem) clamp(1.25rem,5vw,5rem); }
.cs-recent__head { max-width: var(--cs-maxw); margin: 0 auto 2.5rem; text-align: center; }
.cs-recent__title { font-size: var(--cs-step-3); color: var(--cs-cream); margin: .15em 0 0; }
.cs-recent__grid { max-width: var(--cs-maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2vw,1.75rem); }
.cs-rtile { display: block; text-decoration: none; color: var(--cs-cream); }
.cs-rtile__media { display: block; border-radius: 12px; overflow: hidden; background: #fff; aspect-ratio: 1/1; box-shadow: 0 24px 48px -28px rgba(0,0,0,.7); }
.cs-rtile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cs-rtile:hover .cs-rtile__media img { transform: scale(1.05); }
.cs-rtile__name { display: block; font-family: var(--cs-font-body); font-weight: 500; font-size: .95rem; margin-top: .8rem; line-height: 1.2; }
.cs-rtile__price { display: block; font-family: var(--cs-font-body); color: var(--cs-gold); font-size: .88rem; margin-top: .2rem; }
.cs-rtile__price .amount { color: var(--cs-gold); }
@media (max-width: 900px) { .cs-recent__grid { grid-template-columns: repeat(2,1fr); } }

/* Terracotta band variant (for the "Pull up a stool" CTA so it doesn't double-gold with the newsletter) */
.cs-band--clay { background: linear-gradient(160deg, #c07d52 0%, #9e5f3a 100%); color: #221107; }
.cs-band--clay .cs-band__title { color: #1c0e05; }
.cs-band--clay .cs-band__sub { color: #3c2417; }

/* White "plan a visit" CTA with rounded square shop image */
.cs-band--white { background: #ffffff; color: var(--cs-ink); }
.cs-band--white .cs-band__title { color: var(--cs-ink); }
.cs-band--white .cs-band__sub { color: #4a3f36; }
.cs-visit__img { display: block; width: min(100%, 760px); height: auto; border-radius: 22px; margin: 0 auto 2rem; box-shadow: 0 34px 64px -28px rgba(26,22,19,.5); }
video.cs-visit__img { aspect-ratio: 760 / 416; object-fit: cover; background: #1a1613; }
/* Bar scene eases in as it scrolls into view (class added by hero.js; no-JS stays visible) */
.cs-visit--js .cs-visit__img { opacity: 0; transform: translateY(20px) scale(.985); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.cs-visit--js.is-inview .cs-visit__img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cs-visit--js .cs-visit__img { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   FOOTER (new style) — replaces the Elementor footer on hero pages
   ============================================================ */
.cs-has-hero .elementor-location-footer { display: none !important; }

.cs-footer { background: var(--cs-charcoal); color: var(--cs-cream); font-family: var(--cs-font-body); }
.cs-footer a { color: rgba(244,237,225,.78); text-decoration: none; transition: color .2s ease; }
.cs-footer a:hover { color: var(--cs-gold); }
.cs-footer__inner { max-width: var(--cs-maxw); margin: 0 auto; padding: clamp(2.25rem,4.5vh,3.25rem) clamp(1.25rem,5vw,5rem); }

.cs-footer__news { text-align: center; border-bottom: 1px solid rgba(244,237,225,.12); padding-bottom: clamp(1.75rem,3.5vh,2.5rem); margin-bottom: clamp(1.75rem,3.5vh,2.5rem); }
.cs-footer__news h2 { font-family: var(--cs-font-display); font-size: var(--cs-step-3); color: var(--cs-cream); margin: .2em 0 .45em; }
.cs-footer__news > p { color: rgba(244,237,225,.7); margin: 0 auto 1.6rem; max-width: 46ch; }
.cs-news-form { display: flex; gap: .6rem; max-width: 470px; margin: 0 auto; }
.cs-news-form input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(244,237,225,.18); border-radius: 9px; padding: .85rem 1rem; color: var(--cs-cream); font-family: var(--cs-font-body); }
.cs-news-form input::placeholder { color: rgba(244,237,225,.45); }
.cs-news-form input:focus { outline: none; border-color: var(--cs-gold); }
.cs-news-form button { background: var(--cs-gold); color: #1a1613; border: 0; border-radius: 9px; padding: .85rem 1.6rem; font-weight: 600; font-family: var(--cs-font-body); cursor: pointer; transition: background .2s ease; }
.cs-news-form button:hover { background: var(--cs-gold-2); }

.cs-footer__cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: clamp(1.5rem,3vw,3rem); }
.cs-footer__brand img { height: 68px; width: auto; display: block; margin-bottom: 1.2rem; }
.cs-footer__tag { color: rgba(244,237,225,.7); max-width: 32ch; margin: 0 0 1.4rem; line-height: 1.65; font-size: .92rem; }
.cs-footer__social { display: flex; gap: .9rem; }
.cs-footer__social a { color: rgba(244,237,225,.85); display: inline-flex; }
.cs-footer__social a:hover { color: var(--cs-gold); }
.cs-footer__social svg { width: 22px; height: 22px; }
.cs-footer__col h3 { font-family: var(--cs-font-body); font-weight: 600; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-gold); margin: 0 0 1.1rem; }
.cs-footer__col ul { list-style: none; margin: 0; padding: 0; }
.cs-footer__col li { margin-bottom: .6rem; font-size: .92rem; }
.cs-footer__hours { color: rgba(244,237,225,.78); line-height: 1.7; font-size: .92rem; margin: 0 0 1rem; }
.cs-footer__hours strong { color: var(--cs-cream); font-weight: 600; }

.cs-footer__bottom { border-top: 1px solid rgba(244,237,225,.12); margin-top: clamp(1.5rem,3.5vh,2.25rem); padding-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cs-footer__badges { display: flex; align-items: center; gap: 1rem; }
.cs-footer__badges img { height: 54px; width: auto; background: #fff; border-radius: 8px; padding: 5px; }
.cs-footer__legal { color: rgba(244,237,225,.5); font-size: .76rem; line-height: 1.6; max-width: 64ch; margin: 0; }
.cs-footer__legal a { color: rgba(244,237,225,.72); }
@media (max-width: 900px) { .cs-footer__cols { grid-template-columns: 1fr 1fr; } .cs-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .cs-footer__cols { grid-template-columns: 1fr; } .cs-news-form { flex-direction: column; } }

/* Round the corners of the centered (contained) sections; full-width bands stay square */
.cs-has-hero .cs-cats,
.cs-has-hero .cs-story,
.cs-has-hero .cs-showcase,
.cs-has-hero .cs-band:not(.cs-band--dark) { border-radius: 26px; }

/* ============================================================
   PRODUCT CATEGORY PAGES — hero + grid (new style)
   ============================================================ */
.cs-cathero { position: relative; width: 100%; min-height: 56vh; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.cs-cathero__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,18,15,.88) 0%, rgba(20,18,15,.15) 50%, rgba(20,18,15,.35) 100%); }
.cs-cathero__content { position: relative; z-index: 1; max-width: var(--cs-maxw); margin: 0 auto; width: 100%; padding: clamp(2rem,6vh,4.5rem) clamp(1.25rem,5vw,5rem); color: var(--cs-cream); }
.cs-cathero__title { font-size: var(--cs-step-4); color: var(--cs-cream); margin: .1em 0 .35em; line-height: .92; }
.cs-cathero__desc { font-family: var(--cs-font-body); font-size: var(--cs-step-1); font-weight: 300; color: rgba(244,237,225,.85); max-width: 58ch; margin: 0; line-height: 1.5; }

/* hide default WooCommerce archive title block */
.cs-themed .woocommerce-products-header { display: none !important; }

/* product grid */
.cs-themed.woocommerce .site-content,
.cs-themed.archive .site-content { background: var(--cs-paper); padding: clamp(2.5rem,6vh,4.5rem) clamp(1.25rem,5vw,5rem) clamp(4rem,8vh,6rem); }
.cs-themed .woocommerce, .cs-themed ul.products { max-width: var(--cs-maxw); margin-left: auto; margin-right: auto; }
.cs-themed .woocommerce-result-count { font-family: var(--cs-font-body); color: var(--cs-stone); font-size: .9rem; }
.cs-themed .woocommerce-ordering select { font-family: var(--cs-font-body); }
.cs-themed ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem,2.5vw,2.5rem); margin: 1.5rem auto 0; padding: 0; list-style: none; }
.cs-themed ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; text-align: left; }
.cs-themed ul.products li.product a.woocommerce-LoopProduct-link { display: block; text-decoration: none; }
.cs-themed ul.products li.product img { border-radius: 12px; margin: 0 0 1rem; aspect-ratio: 1/1; object-fit: cover; width: 100%; box-shadow: 0 18px 36px -24px rgba(26,22,19,.5); }
.cs-themed ul.products li.product .woocommerce-loop-product__title { font-family: var(--cs-font-body); font-weight: 500; font-size: 1rem; color: var(--cs-ink); padding: 0 0 .25rem; }
.cs-themed ul.products li.product .price { color: var(--cs-ink); font-family: var(--cs-font-body); font-weight: 600; }
.cs-themed ul.products li.product .button { display: inline-block; margin-top: .65rem; background: var(--cs-charcoal); color: var(--cs-cream); border-radius: 6px; padding: .55rem 1.05rem; font-family: var(--cs-font-body); font-size: .85rem; }
.cs-themed ul.products li.product .button:hover { background: var(--cs-gold); color: #1a1613; }
.cs-themed .woocommerce-pagination ul { border: 0; }
.cs-themed .woocommerce-pagination a, .cs-themed .woocommerce-pagination span { font-family: var(--cs-font-body); border-radius: 6px; }
@media (max-width: 900px) { .cs-themed ul.products { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   CATEGORY PAGE POLISH — toolbar, cards, pagination (overrides)
   ============================================================ */
/* breadcrumb */
.cs-themed .woocommerce-breadcrumb { font-family: var(--cs-font-body); font-size: .82rem; letter-spacing: .02em; color: var(--cs-stone); margin: 0 auto 1.75rem; max-width: var(--cs-maxw); padding: 0; }
.cs-themed .woocommerce-breadcrumb a { color: var(--cs-stone); text-decoration: none; }
.cs-themed .woocommerce-breadcrumb a:hover { color: var(--cs-gold); }

/* toolbar: result count + ordering on one clean row, grid clears below */
.cs-themed .woocommerce-result-count { float: left; margin: 0; font-family: var(--cs-font-body); font-size: .85rem; color: var(--cs-stone); line-height: 2.6; }
.cs-themed .woocommerce-ordering { float: right; margin: 0; }
.cs-themed .woocommerce-ordering select { font-family: var(--cs-font-body); font-size: .85rem; color: var(--cs-ink); background: #fff; border: 1px solid rgba(26,22,19,.15); border-radius: 8px; padding: .55rem 2rem .55rem .9rem; }

/* grid: force a clean 4-up that clears the floated toolbar */
.cs-themed ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: clamp(1.1rem,2vw,1.9rem) !important; clear: both !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; }
.cs-themed ul.products::before, .cs-themed ul.products::after { content: none !important; display: none !important; }

/* product card */
.cs-themed ul.products li.product { position: relative; width: auto !important; margin: 0 !important; float: none !important; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 38px -26px rgba(26,22,19,.5); display: flex; flex-direction: column; text-align: left; transition: transform .25s ease, box-shadow .25s ease; }
.cs-themed ul.products li.product:hover { transform: translateY(-5px); box-shadow: 0 30px 54px -26px rgba(26,22,19,.55); }
.cs-themed ul.products li.product > a:first-of-type { display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none; }
.cs-themed ul.products li.product img { width: 100% !important; aspect-ratio: 1 / 1; object-fit: contain !important; background: #fff; padding: 1.4rem; margin: 0 0 .35rem !important; border-radius: 0; border-bottom: 1px solid rgba(26,22,19,.06); box-shadow: none !important; }
.cs-themed ul.products li.product .woocommerce-loop-product__title { font-family: var(--cs-font-body) !important; font-weight: 500; font-size: .92rem; line-height: 1.3; color: var(--cs-ink); padding: .15rem 1.15rem 0 !important; }
.cs-themed ul.products li.product .price { font-family: var(--cs-font-body); font-weight: 600; font-size: .95rem; color: var(--cs-ink); padding: .3rem 1.15rem 0; margin-top: auto; }
.cs-themed ul.products li.product .price del { color: var(--cs-stone); font-weight: 400; }
.cs-themed ul.products li.product .price ins { text-decoration: none; color: var(--cs-gold); }
.cs-themed ul.products li.product .star-rating { margin: .4rem 1.15rem 0; font-size: .8rem; color: var(--cs-gold); }
.cs-themed ul.products li.product .button { margin: .8rem 1.15rem 1.2rem !important; background: var(--cs-charcoal); color: var(--cs-cream); border-radius: 8px; padding: .62rem 1rem; font-family: var(--cs-font-body); font-size: .82rem; font-weight: 600; text-align: center; }
.cs-themed ul.products li.product .button:hover { background: var(--cs-gold); color: #1a1613; }
.cs-themed ul.products li.product .onsale { position: absolute; top: .85rem !important; left: .85rem !important; right: auto !important; bottom: auto !important; width: auto !important; z-index: 2; background: var(--cs-gold) !important; color: #1a1613 !important; border-radius: 999px; min-height: 0 !important; min-width: 0 !important; line-height: 1 !important; padding: .4rem .7rem !important; margin: 0 !important; font-family: var(--cs-font-body); font-weight: 600; font-size: .72rem !important; text-transform: uppercase; letter-spacing: .06em; }

/* pagination — clean rounded buttons */
.cs-themed .woocommerce-pagination { clear: both; margin-top: clamp(2.5rem,5vh,4rem); }
.cs-themed .woocommerce-pagination ul { border: 0 !important; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0; }
.cs-themed .woocommerce-pagination ul li { border: 0 !important; margin: 0; overflow: visible; }
.cs-themed .woocommerce-pagination ul li a, .cs-themed .woocommerce-pagination ul li span { border: 1px solid rgba(26,22,19,.15) !important; border-radius: 9px; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--cs-font-body); font-size: .9rem; color: var(--cs-ink) !important; background: #fff; padding: 0 .5rem; }
.cs-themed .woocommerce-pagination ul li a:hover { background: var(--cs-gold); color: #1a1613 !important; border-color: var(--cs-gold) !important; }
.cs-themed .woocommerce-pagination ul li span.current { background: var(--cs-charcoal); color: var(--cs-cream) !important; border-color: var(--cs-charcoal) !important; }
@media (max-width: 900px) { .cs-themed ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) {
  /* keep 2-up on phones (75% of purchases are mobile - 1-col was a mile of scroll) */
  .cs-themed ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: .8rem !important; }
  .cs-themed ul.products li.product img { padding: .8rem; }
  .cs-themed ul.products li.product .woocommerce-loop-product__title { font-size: .82rem; padding: .15rem .8rem 0 !important; }
  .cs-themed ul.products li.product .price { font-size: .86rem; padding: .25rem .8rem 0; }
  .cs-themed ul.products li.product .button { margin: .7rem .8rem 1rem !important; padding: .55rem .7rem; font-size: .78rem; }
  .cs-themed ul.products li.product .star-rating { margin: .35rem .8rem 0; }
}

/* Align toolbar (result count + ordering) + breadcrumb to the SAME centered
   column as the product grid — they were escaping to the full content width. */
.cs-themed.woocommerce .site-content,
.cs-themed.archive .site-content { padding: 0 !important; background: var(--cs-paper); }
.cs-themed.woocommerce .content-area,
.cs-themed.archive .content-area { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.cs-themed.woocommerce .site-main,
.cs-themed.archive .site-main { max-width: var(--cs-maxw) !important; margin: 0 auto !important; padding: clamp(2.5rem,6vh,4.5rem) clamp(1.25rem,4vw,2.5rem) clamp(4rem,8vh,6rem) !important; }
.cs-themed ul.products { max-width: none !important; margin: 0 !important; }
.cs-themed .woocommerce-breadcrumb { max-width: none; margin: 0 0 1.5rem; }

/* ============================================================
   SINGLE PRODUCT (native Woo, themed) — Elementor template 74085
   retired on staging; this styles WooCommerce's own markup.
   ============================================================ */
.cs-themed.single-product div.product { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(1.75rem,4vw,4rem); align-items: start; }
.cs-themed.single-product div.product > * { grid-column: 1 / -1; min-width: 0; }
.cs-themed.single-product div.product .woocommerce-product-gallery { grid-column: 1; float: none !important; width: 100% !important; margin: 0 !important; }
.cs-themed.single-product div.product .entry-summary { grid-column: 2; float: none !important; width: 100% !important; margin: 0 !important; }

/* Gallery: white card, art shown whole (blend labels are square art) */
.cs-themed.single-product .woocommerce-product-gallery { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 52px -32px rgba(26,22,19,.55); }
.cs-themed.single-product .woocommerce-product-gallery__image a { display: block; }
.cs-themed.single-product .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; padding: clamp(1.25rem,3vw,2.25rem); }
.cs-themed.single-product .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 1rem 1rem; margin: 0; list-style: none; }
.cs-themed.single-product .flex-control-thumbs li { width: 68px; }
.cs-themed.single-product .flex-control-thumbs img { border-radius: 10px; border: 1px solid rgba(26,22,19,.12); cursor: pointer; opacity: .55; transition: opacity .2s ease; }
.cs-themed.single-product .flex-control-thumbs img.flex-active,
.cs-themed.single-product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--cs-gold); }
.cs-themed.single-product div.product span.onsale { position: absolute; top: 1rem !important; left: 1rem !important; right: auto !important; bottom: auto !important; width: auto !important; z-index: 9; background: var(--cs-gold) !important; color: #1a1613 !important; border-radius: 999px; min-height: 0 !important; min-width: 0 !important; line-height: 1 !important; padding: .45rem .8rem !important; margin: 0 !important; font-family: var(--cs-font-body); font-weight: 600; font-size: .75rem !important; text-transform: uppercase; letter-spacing: .06em; }

/* Summary column */
.cs-themed.single-product .entry-summary .product_title { font-family: var(--cs-font-display); font-weight: 600; font-size: clamp(1.9rem,3.4vw,2.9rem); line-height: 1.08; color: var(--cs-ink); margin: 0 0 .75rem; }
.cs-themed.single-product .entry-summary .woocommerce-product-rating { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; }
.cs-themed.single-product .entry-summary .star-rating { color: var(--cs-gold); }
.cs-themed.single-product .entry-summary .price { font-family: var(--cs-font-body); font-weight: 700; font-size: 1.35rem; color: var(--cs-ink); margin: 0 0 1.1rem; }
.cs-themed.single-product .entry-summary .price del { color: var(--cs-stone); font-weight: 400; margin-right: .4rem; }
.cs-themed.single-product .entry-summary .price ins { text-decoration: none; color: var(--cs-gold); }
.cs-themed.single-product .woocommerce-product-details__short-description { font-family: var(--cs-font-body); font-size: 1.02rem; line-height: 1.75; color: #3d352c; margin-bottom: 1.4rem; }
.cs-themed.single-product .entry-summary form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: .7rem; margin: 0 0 1.4rem; }
.cs-themed.single-product .entry-summary form.cart .quantity { display: inline-flex; }
.cs-themed.single-product .entry-summary form.cart .qty { width: 5.2rem; height: 100%; min-height: 52px; border: 1px solid rgba(26,22,19,.18); border-radius: 10px; background: #fff; font-family: var(--cs-font-body); font-size: 1rem; color: var(--cs-ink); text-align: center; }
.cs-themed.single-product .entry-summary .single_add_to_cart_button { background: var(--cs-charcoal); color: var(--cs-cream); border: 0; border-radius: 10px; padding: .95rem 2.1rem; font-family: var(--cs-font-body); font-size: .98rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: background .2s ease, color .2s ease; }
.cs-themed.single-product .entry-summary .single_add_to_cart_button:hover { background: var(--cs-gold); color: #1a1613; }
.cs-themed.single-product .entry-summary .yith-wcwl-add-to-wishlist { margin: .2rem 0 1.1rem; font-family: var(--cs-font-body); font-size: .9rem; }
.cs-themed.single-product .entry-summary .product_meta { border-top: 1px solid rgba(26,22,19,.1); padding-top: 1.1rem; font-family: var(--cs-font-body); font-size: .85rem; color: var(--cs-stone); display: flex; flex-direction: column; gap: .3rem; }
.cs-themed.single-product .entry-summary .product_meta a { color: var(--cs-ink); text-decoration: none; }
.cs-themed.single-product .entry-summary .product_meta a:hover { color: var(--cs-gold); }

/* Variations table (variable products) */
.cs-themed.single-product table.variations { margin: 0 0 1rem; }
.cs-themed.single-product table.variations th,
.cs-themed.single-product table.variations td { background: none; border: 0; padding: .3rem .6rem .3rem 0; font-family: var(--cs-font-body); }
.cs-themed.single-product table.variations select { font-family: var(--cs-font-body); border: 1px solid rgba(26,22,19,.15); border-radius: 8px; padding: .55rem 2rem .55rem .9rem; background: #fff; color: var(--cs-ink); }
.cs-themed.single-product .woocommerce-variation-price { margin-bottom: .8rem; }

/* Tabs: quiet underline style */
.cs-themed.single-product .woocommerce-tabs { margin-top: clamp(2.25rem,5vh,3.5rem); }
.cs-themed.single-product .woocommerce-tabs ul.wc-tabs { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 0 0 1.4rem !important; padding: 0 !important; list-style: none; background: none; border: 0; border-bottom: 1px solid rgba(26,22,19,.12); }
.cs-themed.single-product .woocommerce-tabs ul.wc-tabs::before,
.cs-themed.single-product .woocommerce-tabs ul.wc-tabs::after { content: none !important; border: 0 !important; }
.cs-themed.single-product .woocommerce-tabs ul.wc-tabs li { background: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.cs-themed.single-product .woocommerce-tabs ul.wc-tabs li::before,
.cs-themed.single-product .woocommerce-tabs ul.wc-tabs li::after { content: none !important; border: 0 !important; box-shadow: none !important; }
.cs-themed.single-product .woocommerce-tabs ul.wc-tabs li a { display: block; padding: .6rem 0 !important; font-family: var(--cs-font-body); font-weight: 600; font-size: .95rem; color: var(--cs-stone); text-decoration: none; border-bottom: 2px solid transparent; }
.cs-themed.single-product .woocommerce-tabs ul.wc-tabs li.active a { color: var(--cs-ink); border-bottom-color: var(--cs-gold); }
.cs-themed.single-product .woocommerce-Tabs-panel { font-family: var(--cs-font-body); font-size: 1rem; line-height: 1.8; color: #3d352c; max-width: 75ch; }
.cs-themed.single-product .woocommerce-Tabs-panel > h2:first-of-type { display: none; } /* Woo repeats the tab name */
.cs-themed.single-product .woocommerce-Tabs-panel h2 { font-family: var(--cs-font-display); color: var(--cs-ink); }

/* Related + upsells reuse the archive card grid; just dress the heading */
.cs-themed.single-product .related.products,
.cs-themed.single-product .up-sells { margin-top: clamp(2.5rem,6vh,4rem); }
.cs-themed.single-product .related.products > h2,
.cs-themed.single-product .up-sells > h2 { font-family: var(--cs-font-display); font-weight: 600; font-size: clamp(1.4rem,2.4vw,2rem); color: var(--cs-ink); margin: 0 0 1.4rem; }

@media (max-width: 880px) {
  .cs-themed.single-product div.product { grid-template-columns: 1fr; }
  .cs-themed.single-product div.product .woocommerce-product-gallery,
  .cs-themed.single-product div.product .entry-summary { grid-column: 1; }
}

/* ============================================================
   INTERIOR PAGE (template-cs-page.php) — title band + prose
   ============================================================ */
/* GP's .site-content is a flex row (sidebar layout); our template prints
   sections directly into it, so force normal block flow. */
.page-template-template-cs-page .site-content,
.page-template-template-cs-bio .site-content,
.cs-themed.blog .site-content,
.cs-themed.single-post .site-content { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; }
.cs-pagehero { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; background: var(--cs-charcoal); color: var(--cs-cream); padding: clamp(4.5rem,12vh,8rem) 1.5rem clamp(3.5rem,9vh,6rem); text-align: center; }
.cs-pagehero__inner { max-width: 820px; margin: 0 auto; }
.cs-pagehero__title { font-size: clamp(2.4rem,5vw,4.2rem); line-height: 1.02; margin: .25em 0 0; color: var(--cs-cream); }
.cs-pagehero__sub { font-family: var(--cs-font-body); font-weight: 300; font-size: clamp(1.02rem,1.4vw,1.2rem); line-height: 1.7; color: rgba(244,237,225,.82); max-width: 56ch; margin: 1.1rem auto 0; }

.cs-page { background: var(--cs-paper); padding: clamp(3rem,8vh,5.5rem) clamp(1.25rem,4vw,2.5rem) clamp(4.5rem,10vh,7rem); }
.cs-page__content { max-width: 72ch; margin: 0 auto; font-family: var(--cs-font-body); font-size: 1.06rem; line-height: 1.85; color: #3d352c; }
.cs-page__content h2, .cs-page__content h3 { font-family: var(--cs-font-display); font-weight: 600; color: var(--cs-ink); line-height: 1.15; margin: 2em 0 .6em; }
.cs-page__content h2 { font-size: clamp(1.6rem,2.6vw,2.2rem); }
.cs-page__content h3 { font-size: clamp(1.25rem,1.9vw,1.55rem); }
.cs-page__content > p:first-child { margin-top: 0; }
.cs-page__content a { color: var(--cs-ink); text-decoration: underline; text-decoration-color: var(--cs-gold); text-underline-offset: 3px; }
.cs-page__content a:hover { color: var(--cs-gold); }
.cs-page__content img { border-radius: 16px; box-shadow: 0 24px 48px -30px rgba(26,22,19,.5); }
.cs-page__content blockquote { border-left: 3px solid var(--cs-gold); margin: 1.8em 0; padding: .2em 0 .2em 1.4em; font-family: var(--cs-font-display); font-size: 1.18em; font-style: italic; color: var(--cs-ink); }
.cs-page__content ul, .cs-page__content ol { padding-left: 1.4em; }
.cs-page__content li { margin: .35em 0; }
.cs-page__content hr { border: 0; border-top: 1px solid rgba(26,22,19,.12); margin: 2.5em 0; }
/* Shortcode sections inside a cs-page break out full-width like on home */
.cs-page .cs-band, .cs-page .cs-cats, .cs-page .cs-story, .cs-page .cs-showcase { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw !important; margin-right: -50vw !important; max-width: none; }

/* ============================================================
   MOBILE HERO (hero.js adds .is-mobile) — no pin, normal flow:
   exterior stays a full-screen beat, interior stacks below it.
   ============================================================ */
.cs-hero.is-mobile { height: auto; }
/* Stage grows: a 100dvh spacer holds the exterior beat, then the interior
   (the only in-flow child) stacks below it. */
.cs-hero.is-mobile .cs-hero__stage { position: relative; height: auto; }
.cs-hero.is-mobile .cs-hero__stage::before { content: ''; display: block; height: 100vh; height: 100dvh; }
.cs-hero.is-mobile .cs-hero__img,
.cs-hero.is-mobile .cs-hero__veil { inset: auto; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; }
.cs-hero.is-mobile .cs-hero__img { transform: none; }
.cs-hero.is-mobile .cs-hero__veil { opacity: .55; }
.cs-hero.is-mobile .cs-hero__interior { position: relative; inset: auto; height: 92vh; height: 92dvh; opacity: 1; visibility: visible; overflow: hidden; }
.cs-hero.is-mobile .cs-hero__interior-img,
.cs-hero.is-mobile .cs-hero__interior-video { inset: 0; width: 100%; height: 100%; }
.cs-hero.is-mobile .cs-hero__interior-inner { opacity: 1; visibility: visible; transform: none; }
/* Copy + scroll cue are anchored to .cs-hero (now 192dvh tall): pin them to
   the bottom of the FIRST viewport = 92dvh (interior height) up from the end. */
.cs-hero.is-mobile .cs-hero__exterior-content { bottom: calc(92vh + 2rem); bottom: calc(92dvh + 2rem); }
.cs-hero.is-mobile .cs-scrollcue { bottom: calc(92vh + 1.4rem); bottom: calc(92dvh + 1.4rem); }

/* ============================================================
   WOO BUTTONS — kill WooCommerce's default mauve (#a46497) and
   GP's gray-purple everywhere the new theme is active.
   ============================================================ */
.cs-themed.woocommerce a.button, .cs-themed.woocommerce button.button, .cs-themed.woocommerce input.button,
.cs-themed.woocommerce a.button.alt, .cs-themed.woocommerce button.button.alt, .cs-themed.woocommerce input.button.alt,
.cs-themed.woocommerce #respond input#submit,
.cs-themed .woocommerce a.button, .cs-themed .woocommerce button.button {
  background-color: var(--cs-charcoal) !important;
  color: var(--cs-cream) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: var(--cs-font-body) !important;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.cs-themed.woocommerce a.button:hover, .cs-themed.woocommerce button.button:hover, .cs-themed.woocommerce input.button:hover,
.cs-themed.woocommerce a.button.alt:hover, .cs-themed.woocommerce button.button.alt:hover, .cs-themed.woocommerce input.button.alt:hover,
.cs-themed.woocommerce #respond input#submit:hover {
  background-color: var(--cs-gold) !important;
  color: #1a1613 !important;
}
.cs-themed.woocommerce a.button.disabled, .cs-themed.woocommerce button.button.disabled, .cs-themed.woocommerce button.button:disabled,
.cs-themed.woocommerce button.button.alt.disabled {
  background-color: var(--cs-charcoal) !important;
  color: var(--cs-cream) !important;
  opacity: .45;
}

/* ============================================================
   CART PAGE (native [woocommerce_cart] markup, themed)
   ============================================================ */
.cs-themed.woocommerce-cart .site-content { background: var(--cs-paper); }
.cs-themed.woocommerce-cart h1.entry-title,
.cs-themed.woocommerce-cart .cs-cart-title { font-family: var(--cs-font-display); color: var(--cs-ink); }
/* Empty state */
.cs-themed.woocommerce-cart .cart-empty.woocommerce-info { background: none; border: 0; padding: clamp(2rem,6vh,3.5rem) 0 .5rem; margin: 0; font-family: var(--cs-font-display); font-size: clamp(1.5rem,2.6vw,2.2rem); color: var(--cs-ink); text-align: center; }
.cs-themed.woocommerce-cart .cart-empty.woocommerce-info::before { content: none; }
.cs-themed.woocommerce-cart .return-to-shop { text-align: center; margin: 1.5rem 0 clamp(3rem,8vh,5rem); }
/* Cart table */
.cs-themed.woocommerce-cart table.shop_table { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -28px rgba(26,22,19,.45); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.cs-themed.woocommerce-cart table.shop_table th { font-family: var(--cs-font-body); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cs-stone); background: #fff; border-bottom: 1px solid rgba(26,22,19,.1); padding: 1rem .9rem; }
.cs-themed.woocommerce-cart table.shop_table td { font-family: var(--cs-font-body); color: var(--cs-ink); border-top: 1px solid rgba(26,22,19,.06); padding: .9rem; background: #fff; }
.cs-themed.woocommerce-cart table.shop_table td.product-name a { color: var(--cs-ink); text-decoration: none; font-weight: 600; }
.cs-themed.woocommerce-cart table.shop_table td.product-name a:hover { color: var(--cs-gold); }
.cs-themed.woocommerce-cart table.shop_table td.product-thumbnail img { width: 64px; border-radius: 10px; }
.cs-themed.woocommerce-cart table.shop_table td.product-remove a.remove { color: var(--cs-stone) !important; font-size: 1.3rem; }
.cs-themed.woocommerce-cart table.shop_table td.product-remove a.remove:hover { color: #fff !important; background: #b3422f; }
.cs-themed.woocommerce-cart .quantity .qty { border: 1px solid rgba(26,22,19,.18); border-radius: 8px; background: #fff; padding: .45rem .2rem .45rem .6rem; font-family: var(--cs-font-body); }
.cs-themed.woocommerce-cart .coupon .input-text { border: 1px solid rgba(26,22,19,.18); border-radius: 8px; background: #fff; padding: .6rem .9rem; font-family: var(--cs-font-body); margin-right: .5rem; }
/* Totals */
.cs-themed.woocommerce-cart .cart_totals { font-family: var(--cs-font-body); }
.cs-themed.woocommerce-cart .cart_totals h2 { font-family: var(--cs-font-display); font-size: 1.4rem; color: var(--cs-ink); }
.cs-themed.woocommerce-cart .cart_totals table.shop_table { box-shadow: 0 18px 40px -28px rgba(26,22,19,.45); }
.cs-themed.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background-color: var(--cs-gold) !important; color: #1a1613 !important; font-size: 1.05rem !important; padding: 1rem 1.5rem !important; }
.cs-themed.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background-color: var(--cs-gold-2) !important; }
/* Cross-sells reuse the card grid */
.cs-themed.woocommerce-cart .cross-sells > h2 { font-family: var(--cs-font-display); font-weight: 600; font-size: clamp(1.3rem,2.2vw,1.8rem); color: var(--cs-ink); margin: clamp(2rem,5vh,3rem) 0 1.2rem; }

/* Virtual tour (about page) — ONE large linked 360 embed (Street View
   navigation walks the whole shop), broken out wider than the prose column */
.cs-page__content .cs-tour { width: min(92vw, 1100px); margin: 1.5rem 0 2.5rem 50%; transform: translateX(-50%); }
.cs-page__content .cs-tour iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; box-shadow: 0 28px 56px -32px rgba(26,22,19,.55); }

/* ============================================================
   TIMELINE (about page) — gold spine, alternating cards,
   giant ghost-year numerals, scroll reveal via initReveal().
   ============================================================ */
.cs-page__content .cs-timeline { position: relative; width: min(92vw, 1060px); margin: 3rem 0 3.5rem 50%; transform: translateX(-50%); padding: .5rem 0; }
.cs-tl__spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, var(--cs-gold) 0%, rgba(184,137,63,.18) 100%); }
.cs-tl__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; margin: clamp(2.5rem, 6vh, 4.5rem) 0; }
.cs-tl__year { font-family: var(--cs-font-display); font-weight: 700; font-size: clamp(3.5rem, 8.5vw, 7.5rem); line-height: 1; color: var(--cs-ink); opacity: .08; text-align: center; user-select: none; letter-spacing: -.03em; }
.cs-tl__dot { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--cs-gold); transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(184,137,63,.16); z-index: 1; }
.cs-tl__card { background: #fff; border-radius: 16px; padding: 1.4rem 1.6rem 1.6rem; box-shadow: 0 24px 48px -30px rgba(26,22,19,.5); }
.cs-tl__date { font-family: var(--cs-font-body); text-transform: uppercase; letter-spacing: .22em; font-size: .7rem; font-weight: 600; color: var(--cs-gold); margin: 0 0 .35rem; }
.cs-page__content .cs-tl__card h3 { margin: 0 0 .55rem; font-size: 1.3rem; }
.cs-page__content .cs-tl__card p { margin: 0; font-size: .96rem; line-height: 1.7; }
.cs-page__content .cs-tl__card img { width: 100%; border-radius: 10px; margin: .9rem 0 0; box-shadow: none; }
/* Alternate sides (spine div is first child, so use nth-of-type on articles) */
.cs-tl__item:nth-of-type(even) .cs-tl__year { order: 2; }
.cs-tl__item:nth-of-type(even) .cs-tl__card { order: 1; }
/* Scroll reveal (gated on body.cs-reveal-js so no-JS / reduced-motion stay visible) */
.cs-reveal-js .cs-tl__item { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.cs-reveal-js .cs-tl__item.is-inview { opacity: 1; transform: none; }
/* Spine draws itself on scroll where CSS scroll-driven animations exist */
@supports (animation-timeline: view()) {
  .cs-tl__spine { transform-origin: top; animation: cs-spine linear both; animation-timeline: view(); animation-range: entry 5% cover 85%; }
  @keyframes cs-spine { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
}
@media (max-width: 760px) {
  .cs-tl__spine { left: 7px; transform: none; }
  @supports (animation-timeline: view()) {
    @keyframes cs-spine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .cs-tl__spine { animation-name: cs-spine; }
  }
  .cs-tl__item { grid-template-columns: 1fr; gap: .4rem; padding-left: 2.1rem; margin: 2.75rem 0; }
  .cs-tl__year, .cs-tl__item:nth-of-type(even) .cs-tl__year { order: 0; text-align: left; font-size: 2.8rem; opacity: .14; }
  .cs-tl__item:nth-of-type(even) .cs-tl__card { order: 0; }
  .cs-tl__dot { left: 7px; top: .9rem; transform: translate(-50%, 0); }
}

/* ============================================================
   CATEGORY ARCHIVE: subcategory tile band + "Just in" strip
   ============================================================ */
.cs-themed mark { background: none; color: inherit; }
.cs-themed ul.products li.product-category { display: none !important; } /* belt & suspenders */
.cs-subcats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; margin: 0 0 2.25rem; clear: both; }
.cs-subcat { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--cs-charcoal); text-decoration: none; box-shadow: 0 16px 34px -24px rgba(26,22,19,.5); }
.cs-subcat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cs-subcat:hover img { transform: scale(1.06); }
.cs-subcat__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,22,19,.82) 0%, rgba(26,22,19,.25) 45%, transparent 70%); }
.cs-subcat__name { position: absolute; left: .9rem; right: .9rem; bottom: .8rem; font-family: var(--cs-font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.15; color: var(--cs-cream); }
.cs-subcat__count { display: block; margin-top: .2rem; font-family: var(--cs-font-body); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-gold); }
@media (max-width: 980px) { .cs-subcats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cs-subcats { grid-template-columns: repeat(2, 1fr); } }

.cs-catrecent { background: var(--cs-charcoal); color: var(--cs-cream); border-radius: 20px; padding: clamp(1.75rem, 4vw, 2.75rem); margin-top: clamp(2.5rem, 6vh, 4rem); }
.cs-catrecent h2 { font-family: var(--cs-font-display); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: var(--cs-cream); margin: 0 0 1.4rem; }
.cs-catrecent__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cs-catrecent__tile { display: flex; flex-direction: column; text-decoration: none; }
.cs-catrecent__media { display: block; background: #fff; border-radius: 12px; overflow: hidden; }
.cs-catrecent__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 1rem; transition: transform .3s ease; }
.cs-catrecent__tile:hover .cs-catrecent__media img { transform: scale(1.05); }
.cs-catrecent__name { font-family: var(--cs-font-body); font-weight: 500; font-size: .9rem; line-height: 1.3; color: var(--cs-cream); margin: .7rem 0 .15rem; }
.cs-catrecent__price { font-family: var(--cs-font-body); font-weight: 600; font-size: .88rem; color: var(--cs-gold); }
.cs-catrecent__price del { color: var(--cs-stone); font-weight: 400; margin-right: .35rem; }
.cs-catrecent__price ins { text-decoration: none; }
@media (max-width: 760px) { .cs-catrecent__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   MAKER / BRAND CATEGORY HERO — portrait + full bio
   ============================================================ */
.cs-makerhero { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; background: var(--cs-charcoal); color: var(--cs-cream); padding: clamp(3rem, 7vh, 5rem) clamp(1.25rem, 4vw, 2.5rem); }
.cs-makerhero__inner { max-width: var(--cs-maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4.5rem); align-items: center; }
.cs-makerhero__inner--noimg { grid-template-columns: 1fr; max-width: 880px; }
.cs-makerhero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 32px 64px -36px rgba(0,0,0,.85); }
/* Logo-only makers: the mark is the hero image — contain it, no photo crop. */
.cs-makerhero--logo .cs-makerhero__media img { aspect-ratio: auto; max-height: 340px; object-fit: contain; border-radius: 0; box-shadow: none; }
/* Secondary brand mark sits to the RIGHT of the maker name (balances the row). */
.cs-makerhero__titlerow { display: flex; align-items: center; justify-content: flex-start; gap: 1rem 1.75rem; flex-wrap: wrap; margin: .15em 0 .3em; }
.cs-makerhero__titlerow .cs-makerhero__title { margin: 0; }
.cs-makerhero__mark { display: block; flex: 0 0 auto; width: auto; max-width: 240px; max-height: 118px; object-fit: contain; object-position: center; margin: 0; }
.cs-makerhero__title { font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.02; color: var(--cs-cream); margin: .15em 0 .3em; }
.cs-makerhero__count { font-family: var(--cs-font-body); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-gold); margin: 1.4rem 0 0; }
.cs-makerhero__bio { font-family: var(--cs-font-body); font-weight: 300; font-size: 1.04rem; line-height: 1.8; color: rgba(244,237,225,.85); max-width: 62ch; }
.cs-makerhero__bio p { margin: 0 0 .9em; }
.cs-makerhero__bio p:last-child { margin-bottom: 0; }
.cs-makerhero__bio a { color: var(--cs-gold); }
/* Structured facts strip (carver · location · established). */
.cs-makerhero__facts { display: flex; flex-wrap: wrap; gap: .9rem 2.4rem; margin: 0 0 1.5rem; padding: 1.1rem 0 0; border-top: 1px solid rgba(184,137,63,.28); }
.cs-fact { display: flex; flex-direction: column; gap: .18rem; }
.cs-fact dt { font-family: var(--cs-font-body); font-weight: 600; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cs-gold); }
.cs-fact dd { margin: 0; font-family: var(--cs-font-body); font-size: 1.02rem; color: var(--cs-cream); }
/* Outbound link pills. */
.cs-makerhero__links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem 0 0; }
.cs-makerhero__link { display: inline-flex; align-items: center; gap: .45rem; padding: .52rem .95rem; border: 1px solid rgba(184,137,63,.42); border-radius: 999px; font-family: var(--cs-font-body); font-weight: 600; font-size: .76rem; letter-spacing: .04em; color: var(--cs-cream); text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.cs-makerhero__link svg { width: 15px; height: 15px; }
.cs-makerhero__link:hover { background: var(--cs-gold); border-color: var(--cs-gold); color: var(--cs-charcoal); }
@media (max-width: 820px) {
  .cs-makerhero__inner { grid-template-columns: 1fr; }
  .cs-makerhero__media { max-width: 360px; }
  .cs-makerhero--logo .cs-makerhero__media { max-width: 300px; }
}

/* Themed empty state (maker/category archive with no products in stock). */
.cs-empty { max-width: 640px; margin: clamp(2rem, 6vh, 4.5rem) auto; padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem; text-align: center; }
.cs-empty .cs-eyebrow { justify-content: center; }
.cs-empty__title { font-family: var(--cs-font-display); font-weight: 500; font-size: clamp(1.55rem, 3.2vw, 2.25rem); line-height: 1.08; color: var(--cs-ink, #22201c); margin: .35rem 0 .75rem; }
.cs-empty__sub { font-family: var(--cs-font-body); font-weight: 300; font-size: 1.02rem; line-height: 1.7; color: rgba(34,32,28,.7); margin: 0 auto 1.5rem; max-width: 52ch; }
.cs-empty__sub a { color: var(--cs-gold); font-weight: 600; text-decoration: none; }
.cs-empty__sub a:hover { text-decoration: underline; }
.cs-empty__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.cs-empty__btn { display: inline-flex; align-items: center; gap: .4rem; padding: .72rem 1.5rem; border: 1px solid var(--cs-gold); border-radius: 999px; font-family: var(--cs-font-body); font-weight: 600; font-size: .8rem; letter-spacing: .05em; color: var(--cs-charcoal); text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.cs-empty__btn:hover { background: var(--cs-gold); color: #fff; }
.cs-empty__btn--primary { background: var(--cs-gold); border-color: var(--cs-gold); color: #fff; }
.cs-empty__btn--primary:hover { background: var(--cs-gold-2, #a5762f); border-color: var(--cs-gold-2, #a5762f); color: #fff; }

/* ============================================================
   MEGA MENU (desktop) — full-width panels under the header
   ============================================================ */
.cs-siteheader { position: relative; z-index: 60; }
/* Items stretch the FULL header height so the hover path from the link down
   into the panel is continuous — any dead strip drops :hover mid-travel. */
.cs-has-hero .cs-siteheader__inner { padding-top: 0; padding-bottom: 0; align-items: stretch; }
.cs-has-hero .cs-siteheader__brand,
.cs-has-hero .cs-siteheader__actions { align-self: center; }
.cs-has-hero .cs-siteheader__brand { padding: .5rem 0; }
.cs-meganav { display: flex; align-items: stretch; align-self: stretch; gap: clamp(.5rem, 1.6vw, 1.6rem); }
.cs-meganav__item { display: flex; align-items: stretch; /* static so .cs-mega spans the full header width */ }
.cs-meganav__top { display: inline-flex; align-items: center; gap: .38rem; padding: 0; font-family: var(--cs-font-body); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-cream); text-decoration: none; }
.cs-meganav__top svg { width: 9px; height: 6px; opacity: .6; transition: transform .2s ease; }
.cs-meganav__top:hover { color: var(--cs-gold); }
.cs-meganav__item:hover .cs-meganav__top svg,
.cs-meganav__item.is-open .cs-meganav__top svg { transform: rotate(180deg); }

/* --- 8-item nav (Just In added 2026-08-29) -------------------------------
   With 8 items, between the 980px drawer breakpoint and ~1160px the last
   item would overlap the search field (measured: 764px vs 757px). Tightening
   only the inter-item gap recovers 45px and clears it with room to spare.
   Type size is deliberately left alone - shrinking it measured WIDER, not
   narrower. Revert = delete this block. */
@media (min-width: 981px) and (max-width: 1160px) {
  .cs-meganav { gap: clamp(.35rem, .95vw, 1rem); }
  .cs-meganav__top svg { width: 8px; }
}

.cs-mega { position: absolute; left: 0; right: 0; top: 100%; background: #211c17; border-top: 1px solid rgba(184,137,63,.25); box-shadow: 0 40px 70px -30px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease .15s, transform .18s ease .15s, visibility 0s linear .35s; pointer-events: none; max-height: calc(100vh - 90px); overflow: auto; }
.cs-meganav__item:hover .cs-mega,
.cs-meganav__item:focus-within .cs-mega,
.cs-meganav__item.is-open .cs-mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s, 0s, 0s; }
.cs-mega__inner { max-width: var(--cs-maxw); margin: 0 auto; display: flex; gap: clamp(1.5rem, 3vw, 3.5rem); padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1.25rem, 4vw, 2.5rem); align-items: flex-start; }
.cs-mega__col { min-width: 0; flex: 1 1 0; }
.cs-mega__heading { display: block; font-family: var(--cs-font-display); font-weight: 600; font-size: 1.02rem; color: var(--cs-cream); text-decoration: none; margin: 0 0 .7rem; }
a.cs-mega__heading:hover { color: var(--cs-gold); }
.cs-mega__col ul { list-style: none; margin: 0; padding: 0; column-gap: 2rem; }
.cs-mega__col li { margin: 0; }
.cs-mega__col li a { display: block; padding: .26rem 0; font-family: var(--cs-font-body); font-size: .88rem; line-height: 1.3; color: rgba(244,237,225,.78); text-decoration: none; }
.cs-mega__col li a:hover { color: var(--cs-gold); }
.cs-mega__featured { position: relative; flex: 0 0 240px; min-height: 240px; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center; text-decoration: none; display: flex; align-items: flex-end; }
.cs-mega__featured::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,22,19,.85), transparent 60%); }
.cs-mega__featured span { position: relative; padding: 1rem 1.1rem; font-family: var(--cs-font-body); font-weight: 600; font-size: .92rem; color: var(--cs-cream); }
.cs-mega__featured:hover span { color: var(--cs-gold); }
/* Compact (About) panel anchors to its item */
.cs-meganav__item--compact { position: relative; }
.cs-mega--compact { left: auto; right: auto; width: 240px; border-radius: 0 0 14px 14px; }
.cs-mega--compact ul { list-style: none; margin: 0; padding: .9rem 0; }
.cs-mega--compact li a { display: block; padding: .5rem 1.25rem; font-family: var(--cs-font-body); font-size: .9rem; color: rgba(244,237,225,.82); text-decoration: none; }
.cs-mega--compact li a:hover { color: var(--cs-gold); background: rgba(184,137,63,.08); }

/* ============================================================
   BURGER + MOBILE DRAWER
   ============================================================ */
.cs-burger { display: none; width: 44px; height: 44px; padding: 11px 10px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: space-between; }
.cs-burger span { display: block; height: 2px; width: 100%; background: var(--cs-cream); border-radius: 2px; }
@media (max-width: 980px) {
  .cs-burger { display: inline-flex; }
  .cs-search { display: none; } /* search lives in the drawer trigger flow; keep header tight */
}
.cs-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(86vw, 400px); background: #211c17; color: var(--cs-cream); transform: translateX(102%); visibility: hidden; transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s; display: flex; flex-direction: column; box-shadow: -30px 0 60px -30px rgba(0,0,0,.7); }
.cs-drawer[hidden] { display: flex; } /* hidden attr handles a11y; transform handles visuals */
body.cs-drawer-open .cs-drawer { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.cs-drawer__search { display: flex; align-items: center; gap: .6rem; margin: .9rem 1.25rem 0; padding: .15rem .9rem; background: rgba(244,237,225,.07); border: 1px solid rgba(244,237,225,.16); border-radius: 10px; }
.cs-drawer__search svg { flex: none; width: 17px; height: 17px; color: rgba(244,237,225,.55); }
.cs-drawer__search input[type=search] { flex: 1; min-width: 0; background: none; border: 0; padding: .7rem 0; color: var(--cs-cream); font-family: var(--cs-font-body); font-size: 16px; /* 16px stops iOS zoom-on-focus */ }
.cs-drawer__search input[type=search]:focus { outline: none; }
.cs-drawer__search input[type=search]::placeholder { color: rgba(244,237,225,.45); }
.cs-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(244,237,225,.12); }
.cs-drawer__title { font-family: var(--cs-font-display); font-size: 1.15rem; }
.cs-drawer__close { background: none; border: 0; color: var(--cs-cream); font-size: 1.9rem; line-height: 1; cursor: pointer; padding: .2rem .5rem; }
.cs-drawer__nav { overflow-y: auto; padding: .75rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cs-drawer__list { list-style: none; margin: 0; padding: 0; }
.cs-drawer__list--d0 > li { border-bottom: 1px solid rgba(244,237,225,.08); }
.cs-drawer__list a, .cs-drawer__list summary { display: block; padding: .85rem 1.4rem; font-family: var(--cs-font-body); font-size: .98rem; color: rgba(244,237,225,.88); text-decoration: none; cursor: pointer; }
.cs-drawer__list summary { font-weight: 600; list-style: none; position: relative; }
.cs-drawer__list summary::-webkit-details-marker { display: none; }
.cs-drawer__list summary::after { content: '+'; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%); color: var(--cs-gold); font-size: 1.1rem; }
.cs-drawer__list details[open] > summary::after { content: '\2212'; }
.cs-drawer__list details[open] > summary { color: var(--cs-gold); }
.cs-drawer__all { font-size: .85rem !important; color: var(--cs-gold) !important; font-weight: 600; }
.cs-drawer__list--d1 a, .cs-drawer__list--d1 summary { padding-left: 2.1rem; font-size: .92rem; }
.cs-drawer__list--d2 a { padding-left: 2.8rem; font-size: .88rem; color: rgba(244,237,225,.7); }
.cs-drawer__list--about { margin-top: .75rem; border-top: 1px solid rgba(244,237,225,.12); }
.cs-drawer-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(16,11,8,.6); opacity: 0; pointer-events: none; touch-action: none; transition: opacity .3s ease; }
.cs-drawer-scrim[hidden] { display: block; }
body.cs-drawer-open .cs-drawer-scrim { opacity: 1; pointer-events: auto; }
body.cs-drawer-open { overflow: hidden; }


/* ============================================================
   BLOG — "Shop News" index + single posts
   ============================================================ */
.cs-blog { background: var(--cs-paper); padding: clamp(2.5rem,6vh,4rem) clamp(1.25rem,4vw,2.5rem) clamp(4rem,9vh,6rem); }
.cs-blog__grid { max-width: var(--cs-maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem,2.5vw,2.25rem); }
.cs-blog__card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px -28px rgba(26,22,19,.5); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.cs-blog__card:hover { transform: translateY(-5px); box-shadow: 0 30px 54px -26px rgba(26,22,19,.55); }
.cs-blog__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cs-charcoal); }
.cs-blog__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cs-blog__card:hover .cs-blog__media img { transform: scale(1.05); }
.cs-blog__media-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(140deg, #2a241e, var(--cs-charcoal)); }
.cs-blog__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.cs-blog__date { font-family: var(--cs-font-body); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold); margin: 0 0 .45rem; }
.cs-blog__title { font-family: var(--cs-font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.18; margin: 0 0 .55rem; }
.cs-blog__title a { color: var(--cs-ink); text-decoration: none; }
.cs-blog__title a:hover { color: var(--cs-gold); }
.cs-blog__excerpt { font-family: var(--cs-font-body); font-size: .94rem; line-height: 1.65; color: #4a3f36; margin: 0 0 1rem; }
.cs-blog__more { margin-top: auto; font-family: var(--cs-font-body); font-weight: 600; font-size: .88rem; color: var(--cs-ink); text-decoration: none; }
.cs-blog__more:hover { color: var(--cs-gold); }
.cs-blog__empty { max-width: var(--cs-maxw); margin: 0 auto; font-family: var(--cs-font-body); color: var(--cs-stone); }
/* WP pagination (.page-numbers) — match the shop pagination */
.cs-blog .navigation.pagination { max-width: var(--cs-maxw); margin: clamp(2.5rem,5vh,4rem) auto 0; }
.cs-blog .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.cs-blog .page-numbers { border: 1px solid rgba(26,22,19,.15); border-radius: 9px; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--cs-font-body); font-size: .9rem; color: var(--cs-ink); background: #fff; padding: 0 .6rem; text-decoration: none; }
.cs-blog a.page-numbers:hover { background: var(--cs-gold); border-color: var(--cs-gold); color: #1a1613; }
.cs-blog .page-numbers.current { background: var(--cs-charcoal); border-color: var(--cs-charcoal); color: var(--cs-cream); }
@media (max-width: 980px) { .cs-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cs-blog__grid { grid-template-columns: 1fr; } }

/* Single post */
.cs-pagehero--post .cs-pagehero__title { font-size: clamp(2rem,4.2vw,3.4rem); max-width: 22ch; margin-left: auto; margin-right: auto; }
.cs-post__hero { margin: 0 0 2rem; }
.cs-post__hero img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 48px -30px rgba(26,22,19,.5); }
.cs-post__tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-post__tags a { display: inline-block; background: #fff; border: 1px solid rgba(26,22,19,.12); border-radius: 999px; padding: .35rem .85rem; font-family: var(--cs-font-body); font-size: .78rem; font-weight: 600; color: var(--cs-ink); text-decoration: none; }
.cs-post__tags a:hover { border-color: var(--cs-gold); color: var(--cs-gold); }
.cs-post__nav { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(26,22,19,.12); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--cs-font-body); }
.cs-post__nav a { color: var(--cs-ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.cs-post__nav a:hover { color: var(--cs-gold); }
.cs-post__adjacent { display: flex; gap: 1.5rem; }

/* ============================================================
   CONTACT PAGE — form card + visit-info card (inside cs-page)
   ============================================================ */
.cs-page__content .cs-contact { width: min(92vw, 1100px); margin: 2rem 0 1rem 50%; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.cs-contact__form { background: #fff; border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 24px 48px -30px rgba(26,22,19,.5); }
.cs-page__content .cs-contact h2 { margin: 0 0 1rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.cs-contact__info { background: var(--cs-charcoal); color: var(--cs-cream); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.cs-page__content .cs-contact__info h2,
.cs-page__content .cs-contact__info h3 { color: var(--cs-cream); }
.cs-page__content .cs-contact__info h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.cs-contact__address { font-size: 1.02rem; line-height: 1.6; margin: 0 0 .35rem; color: rgba(244,237,225,.88); }
.cs-contact__phone a { color: var(--cs-gold); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.cs-contact__hours { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.25rem; margin: 0; font-size: .95rem; color: rgba(244,237,225,.85); }
.cs-contact__hours dt { font-weight: 600; color: var(--cs-cream); }
.cs-contact__hours dd { margin: 0; }
.cs-page__content .cs-contact__cta a { color: var(--cs-gold); text-decoration: none; font-weight: 600; }
@media (max-width: 860px) { .cs-page__content .cs-contact { grid-template-columns: 1fr; } }

/* Fluent Forms inside the themed form card */
.cs-contact .fluentform .ff-el-input--label label { font-family: var(--cs-font-body); font-weight: 600; font-size: .85rem; color: var(--cs-ink); }
.cs-contact .fluentform .ff-el-form-control { width: 100%; background: var(--cs-paper); border: 1px solid rgba(26,22,19,.16); border-radius: 10px; padding: .75rem .95rem; font-family: var(--cs-font-body); font-size: .95rem; color: var(--cs-ink); box-shadow: none; }
.cs-contact .fluentform .ff-el-form-control:focus { border-color: var(--cs-gold); outline: 0; box-shadow: 0 0 0 3px rgba(184,137,63,.18); }
.cs-contact .fluentform textarea.ff-el-form-control { min-height: 140px; }
.cs-contact .fluentform .ff-el-group { margin-bottom: 1.1rem; }
.cs-contact .fluentform .ff-btn-submit { background: var(--cs-charcoal) !important; color: var(--cs-cream) !important; border: 0 !important; border-radius: 10px !important; padding: .9rem 2rem !important; font-family: var(--cs-font-body) !important; font-weight: 600 !important; font-size: .95rem !important; cursor: pointer; transition: background .2s ease, color .2s ease; }
.cs-contact .fluentform .ff-btn-submit:hover { background: var(--cs-gold) !important; color: #1a1613 !important; }


/* Plain images in prose (transparent logos etc.) — no card chrome */
.cs-page__content img.cs-img-plain { box-shadow: none; border-radius: 0; display: block; margin: 2.5rem auto 0; width: min(70%, 380px); }

/* "Browse & filter" pop-out trigger on shop/category pages — opens the
   full product-navigation drawer at any viewport width. */
.cs-browse-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--cs-charcoal); color: var(--cs-cream); border: 0; border-radius: 9px; padding: .6rem 1.1rem; font-family: var(--cs-font-body); font-weight: 600; font-size: .85rem; cursor: pointer; float: left; margin: 0 1rem .5rem 0; transition: background .2s ease, color .2s ease; }
.cs-browse-btn:hover { background: var(--cs-gold); color: #1a1613; }
.cs-browse-btn svg { width: 14px; height: 14px; }

/* Podcast page bits + inline gold CTA for prose pages */
.cs-page__content .cs-btn-inline { display: inline-block; background: var(--cs-gold); color: #1a1613 !important; font-weight: 600; padding: .85rem 1.5rem; border-radius: 9px; text-decoration: none !important; }
.cs-page__content .cs-btn-inline:hover { background: var(--cs-gold-2); }
.cs-page__content .cs-pods { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.25rem 0 2rem; }
.cs-page__content .cs-pods .cs-pod { display: inline-flex; align-items: center; background: var(--cs-charcoal); color: var(--cs-cream) !important; font-family: var(--cs-font-body); font-weight: 600; font-size: .92rem; padding: .8rem 1.4rem; border-radius: 999px; text-decoration: none !important; transition: background .2s ease, color .2s ease; }
.cs-page__content .cs-pods .cs-pod:hover { background: var(--cs-gold); color: #1a1613 !important; }
.cs-page__content .cs-podplayer iframe { border-radius: 16px; border: 0; box-shadow: 0 24px 48px -30px rgba(26,22,19,.5); }


/* ============================================================
   WOO STORE NOTICE — slim gold band (was display:none)
   ============================================================ */
.cs-themed .woocommerce-store-notice,
.cs-themed p.demo_store { position: static; display: block; background: linear-gradient(135deg, var(--cs-gold) 0%, #9c7232 100%); color: #1a1613; font-family: var(--cs-font-body); font-weight: 600; font-size: .88rem; text-align: center; padding: .6rem 3rem .6rem 1.25rem; margin: 0; box-shadow: none; z-index: 55; position: relative; }
.cs-themed .woocommerce-store-notice a { color: #1a1613; }
.cs-themed .woocommerce-store-notice__dismiss-link { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; opacity: .75; }
.cs-themed .woocommerce-store-notice__dismiss-link:hover { opacity: 1; }

/* ============================================================
   404 — ghost numerals on charcoal
   ============================================================ */
.cs-themed.error404 .site-content { display: block !important; margin: 0 !important; padding: 0 !important; }
.cs-404 { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; min-height: 72vh; background: var(--cs-charcoal); color: var(--cs-cream); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: clamp(4rem,10vh,7rem) 1.5rem; }
.cs-404__ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: clamp(1rem, 4vw, 4rem); font-family: var(--cs-font-display); font-weight: 700; font-size: clamp(16rem, 44vw, 36rem); line-height: 1; color: var(--cs-cream); opacity: .05; user-select: none; }
@media (max-width: 880px) { .cs-404__ghost { justify-content: center; padding-right: 0; font-size: clamp(12rem, 48vw, 20rem); } }
.cs-404 { gap: clamp(2rem, 4vw, 4rem); }
.cs-404__media { position: relative; flex: 0 1 480px; min-width: 0; }
.cs-404__media img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 36px 70px -38px rgba(0,0,0,.85); }
.cs-404__inner { position: relative; text-align: left; max-width: 520px; }
.cs-404__search, .cs-404__actions { justify-content: flex-start; }
@media (max-width: 880px) {
  .cs-404 { flex-direction: column; }
  .cs-404__media { flex-basis: auto; width: min(100%, 420px); }
  .cs-404__inner { text-align: center; }
  .cs-404__search, .cs-404__actions { justify-content: center; }
}
.cs-404__title { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--cs-cream); margin: .3em 0 .4em; }
.cs-404__sub { font-family: var(--cs-font-body); font-weight: 300; font-size: 1.05rem; line-height: 1.7; color: rgba(244,237,225,.82); margin-bottom: 1.6rem; }
.cs-404__search { display: flex; gap: .6rem; justify-content: center; margin-bottom: 1.4rem; }
.cs-404__search input[type=search] { flex: 1 1 auto; max-width: 340px; background: rgba(244,237,225,.08); border: 1px solid rgba(244,237,225,.25); border-radius: 9px; padding: .8rem 1rem; color: var(--cs-cream); font-family: var(--cs-font-body); }
.cs-404__search input[type=search]::placeholder { color: rgba(244,237,225,.5); }
.cs-404__search button { background: var(--cs-gold); color: #1a1613; border: 0; border-radius: 9px; padding: .8rem 1.4rem; font-family: var(--cs-font-body); font-weight: 600; cursor: pointer; }
.cs-404__search button:hover { background: var(--cs-gold-2); }
.cs-404__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   MY ACCOUNT (native Woo markup, themed)
   ============================================================ */
.cs-themed.woocommerce-account .site-content { background: var(--cs-paper); }
.cs-themed.woocommerce-account .woocommerce { max-width: 1100px; margin: 0 auto; padding: clamp(2.5rem,6vh,4rem) clamp(1.25rem,4vw,2.5rem) clamp(4rem,9vh,6rem); }
/* Login / register card */
.cs-themed.woocommerce-account .u-columns.col2-set, .cs-themed.woocommerce-account .u-column1.col-1, .cs-themed.woocommerce-account .u-column2.col-2 { float: none; width: 100%; }
.cs-themed.woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.cs-themed.woocommerce-account form.login, .cs-themed.woocommerce-account form.register { background: #fff; border: 0; border-radius: 18px; padding: clamp(1.5rem,3vw,2.25rem); box-shadow: 0 24px 48px -30px rgba(26,22,19,.5); }
.cs-themed.woocommerce-account h2 { font-family: var(--cs-font-display); color: var(--cs-ink); }
.cs-themed.woocommerce-account .woocommerce-form-row label { font-family: var(--cs-font-body); font-weight: 600; font-size: .85rem; color: var(--cs-ink); }
.cs-themed.woocommerce-account .woocommerce-Input--text, .cs-themed.woocommerce-account input.input-text { width: 100%; background: var(--cs-paper); border: 1px solid rgba(26,22,19,.16); border-radius: 10px; padding: .75rem .95rem; font-family: var(--cs-font-body); }
.cs-themed.woocommerce-account input.input-text:focus { border-color: var(--cs-gold); outline: 0; box-shadow: 0 0 0 3px rgba(184,137,63,.18); }
.cs-themed.woocommerce-account .lost_password a { font-family: var(--cs-font-body); color: var(--cs-gold); }
/* Dashboard: nav + content */
.cs-themed.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; margin-bottom: 1.75rem; }
.cs-themed.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-themed.woocommerce-account .woocommerce-MyAccount-navigation li a { display: inline-block; padding: .6rem 1.15rem; border-radius: 999px; background: #fff; border: 1px solid rgba(26,22,19,.12); font-family: var(--cs-font-body); font-weight: 600; font-size: .88rem; color: var(--cs-ink); text-decoration: none; }
.cs-themed.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .cs-themed.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--cs-charcoal); border-color: var(--cs-charcoal); color: var(--cs-cream); }
.cs-themed.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; font-family: var(--cs-font-body); color: #3d352c; line-height: 1.7; }
.cs-themed.woocommerce-account .woocommerce-MyAccount-content table.shop_table { border: 0; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -28px rgba(26,22,19,.45); border-collapse: separate; border-spacing: 0; overflow: hidden; }
@media (max-width: 760px) { .cs-themed.woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; } }
.cs-404 .cs-btn--dark { background: none; border: 1px solid rgba(244,237,225,.32); color: var(--cs-cream); }
.cs-404 .cs-btn--dark:hover { border-color: var(--cs-gold); color: var(--cs-gold-2); background: none; }


/* Footer secret key — discreet, as a secret should be */
.cs-footer__key { display: inline-flex; margin-left: .9rem; opacity: .35; transition: opacity .25s ease, transform .25s ease; }
.cs-footer__key:hover { opacity: 1; transform: rotate(-12deg); }
.cs-footer__key img { height: 36px; width: auto; display: block; background: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }

/* Password-protected pages (secret society) — themed gate */
.cs-page__content .post-password-form { background: #fff; border-radius: 18px; padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: 0 24px 48px -30px rgba(26,22,19,.5); max-width: 520px; margin: 1.5rem auto 2rem; text-align: center; }
.cs-page__content .post-password-form p { margin: 0 0 1rem; }
.cs-page__content .post-password-form label { display: block; font-family: var(--cs-font-body); font-weight: 600; font-size: .9rem; color: var(--cs-ink); margin-bottom: .5rem; }
.cs-page__content .post-password-form input[type="password"] { width: 100%; max-width: 280px; background: var(--cs-paper); border: 1px solid rgba(26,22,19,.16); border-radius: 10px; padding: .75rem .95rem; font-family: var(--cs-font-body); text-align: center; letter-spacing: .12em; }
.cs-page__content .post-password-form input[type="password"]:focus { border-color: var(--cs-gold); outline: 0; box-shadow: 0 0 0 3px rgba(184,137,63,.18); }
.cs-page__content .post-password-form input[type="submit"] { background: var(--cs-charcoal); color: var(--cs-cream); border: 0; border-radius: 10px; padding: .8rem 1.8rem; font-family: var(--cs-font-body); font-weight: 600; cursor: pointer; margin-top: .35rem; transition: background .2s ease, color .2s ease; }
.cs-page__content .post-password-form input[type="submit"]:hover { background: var(--cs-gold); color: #1a1613; }


/* Interior pagehero with a featured-image backdrop (e.g. secret society) */
.cs-pagehero--img { background-size: cover; background-position: center 38%; position: relative; min-height: clamp(440px, 68vh, 720px); display: flex; align-items: center; justify-content: center; }
.cs-pagehero--img .cs-pagehero__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,12,9,.78) 0%, rgba(16,12,9,.35) 45%, rgba(16,12,9,.4) 100%); }
.cs-pagehero--img .cs-pagehero__inner { position: relative; z-index: 1; }
.cs-pagehero--img .cs-pagehero__title { text-shadow: 0 2px 30px rgba(16,12,9,.5); }
/* GP auto-prints the featured image above content — the themed pagehero owns it */
.cs-has-hero .featured-image, .cs-has-hero .page-header-image, .cs-has-hero .page-header-image-single { display: none !important; }


/* Secret society: full-width black door band + motto band.
   Transform-based breakout: immune to the .cs-has-hero band margin
   neutralizer that defeats the margin-hack breakout inside cs-page. */
.cs-page .cs-page__content .cs-band.cs-secretdoor,
.cs-page .cs-page__content .cs-band.cs-secretmotto { position: relative; left: 50% !important; right: auto !important; width: 100vw !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; transform: translateX(-50%); }
/* details: */
.cs-page__content .cs-secretdoor { text-align: left; padding: clamp(2.5rem, 6vh, 4.5rem) clamp(1.25rem, 4vw, 2.5rem); margin-top: 2.5rem; margin-bottom: 2.5rem; }
.cs-secretdoor__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.cs-page__content .cs-secretdoor img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 32px 64px -36px rgba(0,0,0,.85); margin: 0; }
.cs-secretdoor__text { font-family: var(--cs-font-body); font-weight: 300; font-size: 1.02rem; line-height: 1.8; color: rgba(244,237,225,.85); }
.cs-page__content .cs-secretdoor__text p { color: rgba(244,237,225,.85); }
.cs-page__content .cs-secretdoor__text img.cs-img-plain { width: min(60%, 280px); box-shadow: none; border-radius: 12px; margin: 1.25rem auto; }
@media (max-width: 860px) { .cs-secretdoor__inner { grid-template-columns: 1fr; } }
.cs-page__content .cs-secretmotto { padding: clamp(1.75rem, 4vh, 2.75rem) 1.5rem; margin-top: 2.5rem; }
.cs-page__content .cs-secretmotto p { color: var(--cs-gold-2); font-family: var(--cs-font-display); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: .04em; text-align: center; margin: 0; }

/* ============================================================
   STAFF / TEAM GRID  (themed interior page — /our-staff/)
   ============================================================ */
.cs-page__content .cs-staff { width: min(94vw, 1140px); margin: 2.5rem 0 1rem 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem); }
.cs-staffcard { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 48px -32px rgba(26,22,19,.5); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.cs-staffcard:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -28px rgba(26,22,19,.55); }
.cs-staffcard__photo { aspect-ratio: 4 / 5; background: var(--cs-charcoal); overflow: hidden; }
.cs-page__content .cs-staffcard__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0; box-shadow: none; margin: 0; transition: transform .45s ease; }
.cs-staffcard:hover .cs-staffcard__photo img { transform: scale(1.04); }
.cs-staffcard__body { padding: 1.05rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.cs-staffcard__role { font-family: var(--cs-font-body); text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; font-weight: 600; color: var(--cs-gold); margin: 0 0 .25rem; }
.cs-page__content .cs-staffcard__name { font-family: var(--cs-font-display); font-weight: 600; font-size: 1.22rem; line-height: 1.15; color: var(--cs-ink); margin: 0; }
.cs-staffcard__cred { font-family: var(--cs-font-body); font-size: .82rem; line-height: 1.5; color: var(--cs-stone); margin: .5rem 0 0; }
.cs-staffcard__links { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 1rem; }
.cs-page__content .cs-staffcard__bio { font-family: var(--cs-font-body); font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-ink); text-decoration: none; border-bottom: 2px solid var(--cs-gold); padding-bottom: 1px; }
.cs-page__content .cs-staffcard__bio:hover { color: var(--cs-gold); }
.cs-staffcard__social { display: flex; gap: .5rem; margin-left: auto; }
.cs-page__content .cs-staffcard__social a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(26,22,19,.06); color: var(--cs-ink); text-decoration: none; border: 0; transition: background .2s ease, color .2s ease; }
.cs-page__content .cs-staffcard__social a:hover { background: var(--cs-gold); color: #fff; }
.cs-staffcard__social svg { width: 15px; height: 15px; }
/* leadership: subtle gold rule under the photo */
.cs-staffcard--lead .cs-staffcard__photo { box-shadow: inset 0 -3px 0 0 var(--cs-gold); }
/* full-staff group photo */
.cs-page__content .cs-staffgroup { width: min(94vw, 1140px); margin: 3rem 0 0 50%; transform: translateX(-50%); }
.cs-page__content .cs-staffgroup img { width: 100%; border-radius: 16px; }
.cs-page__content .cs-staffgroup figcaption { text-align: center; font-family: var(--cs-font-body); font-size: .85rem; color: var(--cs-stone); margin-top: .8rem; }
@media (max-width: 860px) { .cs-page__content .cs-staff { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cs-page__content .cs-staff { grid-template-columns: 1fr; width: min(94vw, 360px); } }

/* ============================================================
   STAFF BIO — 2-column layout inside the proven .cs-page__content
   (left: portrait + name + role + cred + socials, right: bio prose).
   ============================================================ */
.cs-page__content .cs-biocols { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin: 0 0 1rem; }
.cs-page__content .cs-biocols__photo { margin: 0 0 1.25rem; }
.cs-page__content .cs-biocols__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; border-radius: 16px; margin: 0; box-shadow: 0 24px 48px -28px rgba(26, 22, 19, .45); }
.cs-page__content .cs-biocols__name { font-family: var(--cs-font-display); font-weight: 600; font-size: 1.55rem; line-height: 1.1; color: var(--cs-ink); margin: 0 0 .25rem; }
.cs-page__content .cs-biocols__role { font-family: var(--cs-font-body); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 600; color: var(--cs-gold); margin: 0 0 .6rem; }
.cs-page__content .cs-biocols__cred { font-family: var(--cs-font-body); font-size: .92rem; line-height: 1.5; color: var(--cs-stone); margin: 0 0 1rem; }
.cs-page__content .cs-biocols__social { display: flex; gap: .55rem; margin: 0 0 1.4rem; }
.cs-page__content .cs-biocols__social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(26, 22, 19, .06); color: var(--cs-ink); text-decoration: none; border: 0; transition: background .2s ease, color .2s ease; }
.cs-page__content .cs-biocols__social a:hover { background: var(--cs-gold); color: #fff; }
.cs-biocols__social svg { width: 16px; height: 16px; }
.cs-page__content .cs-biocols__back { display: inline-block; font-family: var(--cs-font-body); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-stone); text-decoration: none; }
.cs-page__content .cs-biocols__back:hover { color: var(--cs-gold); }
.cs-page__content .cs-biocols__main > p:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .cs-page__content .cs-biocols { grid-template-columns: 1fr; gap: 1.5rem; }
  .cs-page__content .cs-biocols__photo img { max-width: 260px; }
}

/* ============================================================
   Kale requests — star ratings on tiles + Fantasy South sampler
   ============================================================ */
.cs-stars { display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; line-height: 1; }
.cs-stars__track { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 2px; white-space: nowrap; font-family: Arial, "Segoe UI Symbol", sans-serif; color: rgba(184,137,63,.32); }
.cs-stars__track::before { content: "\2605\2605\2605\2605\2605"; }
.cs-stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--cs-gold); }
.cs-stars__fill::before { content: "\2605\2605\2605\2605\2605"; }
.cs-stars__count { font-family: var(--cs-font-body); font-size: .8rem; color: var(--cs-stone); letter-spacing: .02em; }
.cs-tile .cs-stars { margin-top: .7rem; justify-content: center; }
.cs-story__body .cs-stars { margin: 0 0 1.4rem; }
.cs-sampler .cs-stars__count { color: rgba(244,237,225,.7); }

/* Fantasy South sampler band (full-width dark, like .cs-recent) */
.cs-sampler { background: var(--cs-charcoal); color: var(--cs-cream); padding: clamp(3.5rem,9vh,7rem) clamp(1.25rem,5vw,5rem); }
.cs-sampler__inner { max-width: var(--cs-maxw); margin: 0 auto; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.cs-sampler__media img { width: 100%; border-radius: 18px; box-shadow: 0 44px 80px -34px rgba(0,0,0,.7); display: block; }
.cs-sampler__title { font-size: var(--cs-step-4); line-height: .98; margin: .15em 0 1rem; }
.cs-sampler__copy { font-family: var(--cs-font-body); font-size: var(--cs-step-1); line-height: 1.65; color: var(--cs-cream); opacity: .9; max-width: 48ch; margin: 0 0 1.6rem; }
.cs-sampler__list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; font-family: var(--cs-font-body); }
.cs-sampler__list li { position: relative; padding-left: 1.3rem; font-size: .98rem; color: var(--cs-cream); }
.cs-sampler__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cs-gold); }
.cs-sampler .cs-stars { margin: 0 0 1.4rem; }
@media (max-width: 860px) {
  .cs-sampler__inner { grid-template-columns: 1fr; }
}

/* Rotating news ticker (site-wide) + cart progress meter */
.cs-ticker { background: var(--cs-gold); color: #1a1613; }
.cs-ticker__inner { display: flex; align-items: center; gap: .7rem; max-width: var(--cs-maxw); margin: 0 auto; padding: .45rem 1rem; }
.cs-ticker__label { flex: none; font-family: var(--cs-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; background: #1a1613; color: var(--cs-gold); padding: .3rem .55rem; border-radius: 5px; }
.cs-ticker__track { position: relative; flex: 1 1 auto; min-width: 0; height: 1.4em; }
.cs-ticker__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; color: inherit; text-decoration: none; font-family: var(--cs-font-body); font-weight: 600; font-size: .8rem; letter-spacing: .03em; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.cs-ticker__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.cs-ticker__item:hover, .cs-ticker__item:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .cs-ticker__label { display: none; } .cs-ticker__item { font-size: .72rem; } }
.cs-freeship { max-width: 640px; margin: 0 0 1.6rem; font-family: var(--cs-font-body); }
.cs-freeship__msg { margin: 0 0 .55rem; color: var(--cs-ink); font-size: .98rem; }
.cs-freeship--won .cs-freeship__msg { color: #2f7d32; }
.cs-freeship__bar { height: 8px; border-radius: 999px; background: rgba(26,22,19,.12); overflow: hidden; }
.cs-freeship__bar span { display: block; height: 100%; border-radius: 999px; background: var(--cs-gold); transition: width .4s ease; }
.cs-freeship--won .cs-freeship__bar span { background: #2f7d32; }

/* Category subnav chips (Pipes: All / New / Artisan) */
.cs-subnav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.cs-subnav__chip { display: inline-block; padding: .5rem 1.15rem; border-radius: 999px; border: 1px solid rgba(244,237,225,.45); color: var(--cs-cream); font-family: var(--cs-font-body); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-decoration: none; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.cs-subnav__chip:hover, .cs-subnav__chip:focus-visible { background: var(--cs-gold); border-color: var(--cs-gold); color: #1a1613; }
.cs-subnav__chip.is-active { background: var(--cs-gold); border-color: var(--cs-gold); color: #1a1613; }

/* Blog category archives — lay out like the blog index (home.php), not the product grid */
.cs-themed.category .site-content { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; background: var(--cs-paper); }
.cs-themed.category .content-area,
.cs-themed.category #primary,
.cs-themed.category .site-main { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* Flavor / tobacco / cut facet chips on the house-blends archives */
.cs-facets { margin: 0 0 clamp(1.25rem,3vw,2rem); clear: both; }
.cs-facets__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin-top: .7rem; }
.cs-facets__label { flex: none; min-width: 6.5rem; font-family: var(--cs-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; color: var(--cs-stone); }
.cs-facets__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cs-facets__chip { display: inline-block; padding: .32rem .8rem; border-radius: 999px; border: 1px solid rgba(26,22,19,.18); background: #fff; color: var(--cs-ink); font-family: var(--cs-font-body); font-weight: 500; font-size: .78rem; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.cs-facets__chip:hover, .cs-facets__chip:focus-visible { border-color: var(--cs-gold); color: #1a1613; }
.cs-facets__chip.is-active { background: var(--cs-charcoal); border-color: var(--cs-charcoal); color: var(--cs-cream); }
.cs-facets__clear { display: inline-block; margin-top: .8rem; font-family: var(--cs-font-body); font-size: .78rem; color: var(--cs-gold); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px){ .cs-facets__label { min-width: 100%; } }

/* ============================================================
   HOMEPAGE 2026-07-11 — cigar section, brand reel, hero Shop Now,
   expanded bar block, scroll-to-top  (JD + Kale staging review)
   ============================================================ */

/* --- Hero "Shop now" CTA + hover category dropdown --- */
.cs-shopnow { position: relative; display: inline-block; margin-top: 1.6rem; }
.cs-shopnow__btn { display: inline-flex; align-items: center; gap: .55rem; }
.cs-shopnow__btn svg { width: 11px; height: 7px; transition: transform .25s ease; }
.cs-shopnow__menu {
  position: absolute; top: calc(100% + .55rem); left: 0; min-width: 220px;
  background: rgba(26,22,19,.96); border: 1px solid rgba(244,237,225,.14);
  border-radius: 12px; padding: .5rem; backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 5;
}
.cs-shopnow:hover .cs-shopnow__menu,
.cs-shopnow:focus-within .cs-shopnow__menu,
.cs-shopnow.is-open .cs-shopnow__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cs-shopnow:hover .cs-shopnow__btn svg,
.cs-shopnow.is-open .cs-shopnow__btn svg { transform: rotate(180deg); }
.cs-shopnow__menu a {
  display: block; padding: .7rem .95rem; border-radius: 8px;
  color: var(--cs-cream); text-decoration: none; font-family: var(--cs-font-body);
  font-weight: 500; font-size: .95rem; transition: background .18s ease, color .18s ease;
}
.cs-shopnow__menu a:hover { background: rgba(244,237,225,.08); color: var(--cs-gold-2); }

/* Interior beat CTA (claymation Jon David -> house blends) */
.cs-hero__interior-cta { margin-top: 1.5rem; }
.cs-hero__interior-inner { pointer-events: auto; }

/* --- [cs_cigars] — dark humidor band, full width --- */
.cs-cigars { background: var(--cs-charcoal); color: var(--cs-cream); padding: clamp(4rem,10vh,8rem) clamp(1.25rem,5vw,5rem); overflow: hidden; }
.cs-cigars__head { max-width: var(--cs-maxw); margin: 0 auto; text-align: center; }
.cs-cigars__head .cs-eyebrow { display: inline-block; }
.cs-cigars__title { font-size: var(--cs-step-3); color: var(--cs-cream); margin: .15em 0 0; }
.cs-cigars__counts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem; margin: 1.1rem 0 0; font-family: var(--cs-font-body); color: rgba(244,237,225,.72); font-size: .98rem; }
.cs-cigars__counts strong { color: var(--cs-gold-2); font-weight: 700; font-size: 1.15em; }
.cs-cigars__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cs-red); }

.cs-cigars__stage { position: relative; max-width: var(--cs-maxw); margin: clamp(2.5rem,6vh,4.5rem) auto 0; }
.cs-cigars__word {
  position: absolute; top: -.35em; left: 50%; transform: translateX(-50%);
  font-family: var(--cs-font-display); font-weight: 600; line-height: 1;
  font-size: clamp(6rem, 20vw, 19rem); letter-spacing: -.04em;
  color: rgba(216,168,90,.07); white-space: nowrap; pointer-events: none; z-index: 0;
}
.cs-cigars__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 3rem); align-items: end; }
.cs-cigars .cs-tile { color: var(--cs-cream); }
.cs-cigars .cs-tile__name { color: var(--cs-cream); }
.cs-cigars .cs-tile__media { box-shadow: 0 34px 64px -26px rgba(0,0,0,.85); }
.cs-cigars__grid .cs-tile--2 { transform: translateY(-1.75rem) scale(1.06); }
.cs-cigars__grid .cs-tile--2:hover { transform: translateY(-2.5rem) scale(1.06); }
.cs-tile__pill--red { background: var(--cs-red); color: #fff; }

.cs-cigars__cta { text-align: center; margin-top: clamp(2.75rem, 7vh, 4.5rem); display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.cs-btn--ghostlight { background: none; border: 1px solid rgba(244,237,225,.32); color: var(--cs-cream); }
.cs-btn--ghostlight:hover { background: none; border-color: var(--cs-gold); color: var(--cs-gold-2); box-shadow: none; }

/* --- Brand reel (text marquee until real logos arrive) --- */
.cs-brandreel {
  max-width: min(100%, 1600px); margin: clamp(2.75rem,7vh,4.5rem) auto 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.cs-brandreel__track { display: flex; width: max-content; animation: cs-reel 80s linear infinite; }
.cs-brandreel:hover .cs-brandreel__track,
.cs-brandreel:focus-within .cs-brandreel__track { animation-play-state: paused; }
.cs-brandreel__set { display: flex; align-items: center; gap: 1.7rem; padding-right: 1.7rem; }
.cs-brandreel__item {
  font-family: var(--cs-font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); white-space: nowrap;
  color: rgba(244,237,225,.62); text-decoration: none; transition: color .2s ease;
}
.cs-brandreel__item:hover { color: var(--cs-gold-2); }
.cs-brandreel__dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--cs-red); opacity: .75; }
@keyframes cs-reel { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cs-brandreel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .cs-brandreel__track { animation: none; }
}

/* --- Expanded "Pull up a stool" bar block --- */
.cs-visit .cs-band__sub { max-width: 62ch; margin-left: auto; margin-right: auto; }
.cs-visit__facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .6rem; padding: 0; margin: 1.5rem auto 0; max-width: 720px; }
.cs-visit__facts li {
  font-family: var(--cs-font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cs-ink);
  background: var(--cs-cream); border: 1px solid rgba(26,22,19,.12);
  padding: .5rem 1rem; border-radius: 999px;
}
.cs-visit__ctas { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.9rem; }

/* --- Scroll-to-top --- */
.cs-totop {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: calc(clamp(1rem, 3vh, 2rem) + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cs-charcoal); color: var(--cs-cream);
  border: 1px solid rgba(244,237,225,.22); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;
  z-index: 70;
}
.cs-totop.is-visible { opacity: 1; transform: translateY(0); }
.cs-totop:hover { background: var(--cs-gold); color: #1a1613; }
.cs-totop svg { width: 20px; height: 20px; }

@media (max-width: 820px) {
  .cs-cigars__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 2.5rem; }
  .cs-cigars__grid .cs-tile--2 { transform: none; }
  .cs-cigars__word { font-size: 30vw; }
  .cs-totop { width: 46px; height: 46px; }
  /* Shop Now button owns the bottom of the mobile hero; the scroll cue
     is redundant there (the page scrolls normally, no pinned scrub). */
  .cs-hero.is-mobile .cs-scrollcue { display: none; }
  .cs-shopnow { margin-top: 1.25rem; }
  .cs-visit__ctas .cs-btn { width: min(100%, 320px); text-align: center; }
}

/* --- Cigar Bar page (/cigar-bar/) --- */
.cs-page__content .cs-bar-feats { width: min(92vw, 1100px); margin: 2.5rem 0 1rem 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.cs-bar-feat { background: #fff; border-radius: 18px; padding: clamp(1.4rem, 2.5vw, 2.1rem); box-shadow: 0 24px 48px -30px rgba(26,22,19,.4); }
.cs-bar-feat__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--cs-cream); color: var(--cs-gold); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.cs-bar-feat__icon svg { width: 24px; height: 24px; }
.cs-page__content .cs-bar-feat h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.cs-bar-feat p { margin: 0; font-size: .97rem; line-height: 1.7; }

.cs-page__content .cs-bar-menu { width: min(92vw, 1100px); margin: 3rem 0 2.5rem 50%; transform: translateX(-50%); background: var(--cs-charcoal); color: var(--cs-cream); border-radius: 22px; padding: clamp(2.25rem, 5vw, 4rem); text-align: center; scroll-margin-top: 110px; }
.cs-page__content .cs-bar-menu h2 { color: var(--cs-cream); margin: .2em 0 .4em; }
.cs-bar-menu__note { color: rgba(244,237,225,.75); max-width: 52ch; margin: 0 auto 1.8rem; line-height: 1.7; }
.cs-bar-menu__ctas { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.cs-bar-menu__soon { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--cs-font-body); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-gold-2); border: 1px dashed rgba(216,168,90,.45); padding: .95rem 1.5rem; border-radius: 7px; }

.cs-page__content .cs-bar-reserve { width: min(92vw, 1100px); margin: 2.5rem 0 2.5rem 50%; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: stretch; scroll-margin-top: 110px; }
.cs-bar-reserve__body { background: #fff; border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 24px 48px -30px rgba(26,22,19,.4); }
.cs-page__content .cs-bar-reserve h2 { margin: 0 0 .8rem; }
.cs-bar-reserve__card { background: var(--cs-charcoal); color: var(--cs-cream); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: .4rem; justify-content: center; }
.cs-bar-reserve__card a { color: var(--cs-gold-2); text-decoration: none; }
.cs-bar-reserve__card a:hover { color: var(--cs-gold); }
.cs-bar-reserve__tel { font-family: var(--cs-font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; }
.cs-bar-reserve__card .cs-btn { margin-top: 1.1rem; align-self: flex-start; }

@media (max-width: 860px) {
  .cs-page__content .cs-bar-feats { grid-template-columns: 1fr; }
  .cs-page__content .cs-bar-reserve { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE FIX (2026-07-11) — the "broke as a joke" bug.
   The meganav's own `.cs-meganav { display:flex }` (added later in
   this file) out-cascaded the early max-980 hide rule, so phones got
   the full 537px desktop nav + ~460px of horizontal overflow.
   Hide it with authority, and clip stray x-overflow as a safety net.
   ============================================================ */
@media (max-width: 980px) {
  .cs-siteheader__nav.cs-meganav { display: none !important; }
}
body.cs-themed { overflow-x: clip; }

/* --- Single product, mobile (found in 2026-07-11 mobile audit) --- */
.cs-themed.single-product .woocommerce-product-gallery { overflow: hidden; } /* Woo slider wrapper was 1341px wide */
@media (max-width: 640px) {
  .cs-themed.single-product table.variations,
  .cs-themed.single-product table.variations tbody,
  .cs-themed.single-product table.variations tr,
  .cs-themed.single-product table.variations td,
  .cs-themed.single-product table.variations th { display: block; width: 100%; padding: 0; }
  .cs-themed.single-product table.variations td.label { padding: .4rem 0 .15rem; }
  .cs-themed.single-product table.variations select { width: 100%; max-width: 100%; font-size: 16px; }
  .cs-themed.single-product form.cart { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }
  .cs-themed.single-product form.cart.variations_form { display: block; } /* variable products: table + variation wrap stack */
  .cs-themed.single-product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }
  .cs-themed.single-product form.cart .quantity { flex: 0 0 auto; }
  .cs-themed.single-product .single_add_to_cart_button { flex: 1 1 auto; min-height: 52px; font-size: 1rem; }
}

/* --- Round 2 (2026-07-11 PM): intro ghost word, drop-up Shop Now, logo marquee chips --- */
/* Giant TOBACCONIST behind the dark intro band (BLENDS/CIGARS motif) */
.cs-band--dark { position: relative; overflow: hidden; }
.cs-band--dark .cs-band__inner { position: relative; z-index: 1; }
.cs-band__word {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--cs-font-display); font-weight: 600; line-height: 1;
  font-size: clamp(4rem, 11.5vw, 11rem); letter-spacing: -.04em;
  color: rgba(244,237,225,.05); white-space: nowrap; pointer-events: none; z-index: 0;
}
@media (max-width: 820px) { .cs-band__word { font-size: 16vw; } }

/* Shop Now menu opens UPWARD — the button sits at the bottom of the hero,
   so a drop-down clipped below the fold even on tall monitors. */
.cs-shopnow__menu { top: auto; bottom: calc(100% + .55rem); transform: translateY(-8px); }
.cs-shopnow:hover .cs-shopnow__menu,
.cs-shopnow:focus-within .cs-shopnow__menu,
.cs-shopnow.is-open .cs-shopnow__menu { transform: translateY(0); }
.cs-shopnow__btn svg { transform: rotate(180deg); }
.cs-shopnow:hover .cs-shopnow__btn svg,
.cs-shopnow.is-open .cs-shopnow__btn svg { transform: rotate(0deg); }

/* Brand marquee: logo chips (uniform cream chip so any logo color works on charcoal) */
.cs-brandreel__item--logo { display: inline-flex; align-items: center; background: rgba(244,237,225,.94); border-radius: 10px; padding: .5rem .9rem; transition: background .2s ease, transform .2s ease; }
.cs-brandreel__item--logo:hover { background: #fff; transform: translateY(-2px); }
.cs-brandreel__item--logo img { height: 34px; width: auto; max-width: 150px; object-fit: contain; display: block; }

/* --- "Pricing by Quantity" (pbq) tables on product pages — de-jumble.
   The plugin injects its note + tables INTO the add-to-cart row; give the
   row flex at all widths and push pricing onto its own full-width line. --- */
.cs-themed.single-product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }
.cs-themed.single-product .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
.cs-themed.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 auto; }
.cs-themed.single-product .pbq_quantity_pricing_tables { flex: 1 1 100%; width: 100%; order: 10; margin: .6rem 0 0; }
.cs-themed.single-product .pbq_quantity_pricing_tables .pbq_quantity_pricing_tables { margin: 0; }
.cs-themed.single-product .pbq_pricing_table { font-family: var(--cs-font-body); font-size: .88rem; color: #5a5046; margin: 0 0 1.1rem; }
.cs-themed.single-product .pbq_pricing_table table { width: 100%; max-width: 460px; border-collapse: separate; border-spacing: 0; margin-top: .55rem; background: #fff; border: 1px solid rgba(26,22,19,.1); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px -24px rgba(26,22,19,.4); }
.cs-themed.single-product .pbq_pricing_table th { background: var(--cs-charcoal); color: var(--cs-cream); font-family: var(--cs-font-body); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: .6rem .9rem; }
.cs-themed.single-product .pbq_pricing_table td { padding: .6rem .9rem; border-top: 1px solid rgba(26,22,19,.07); }
.cs-themed.single-product .pbq_pricing_table tr.pbq_choose_quantity { cursor: pointer; }
.cs-themed.single-product .pbq_pricing_table tr.pbq_choose_quantity:hover td { background: rgba(184,137,63,.12); }

/* ============================================================
   SINGLE PRODUCT upgrades (2026-07-11 - Rye Island / Terry Ho refs)
   ============================================================ */
.cs-themed.single-product div.product { position: relative; }
.cs-product__word {
  position: absolute; top: -.12em; left: -2rem;
  font-family: var(--cs-font-display); font-weight: 600; font-style: italic; line-height: 1;
  font-size: clamp(4.5rem, 11vw, 10rem); letter-spacing: -.04em; text-transform: uppercase;
  color: rgba(26,22,19,.05); white-space: nowrap; pointer-events: none; z-index: 0; user-select: none;
}
.cs-product__word--long { font-size: clamp(3rem, 6.5vw, 6rem); }
.cs-themed.single-product .woocommerce-product-gallery,
.cs-themed.single-product .summary { position: relative; z-index: 1; }

/* Spec chips: Flavor / Contents / Cut */
.cs-specs { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 0; }
.cs-spec { display: inline-flex; align-items: center; gap: .65rem; background: #fff; border: 1px solid rgba(26,22,19,.1); border-radius: 12px; padding: .55rem .85rem; }
.cs-spec__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cs-cream); color: var(--cs-gold); display: inline-flex; align-items: center; justify-content: center; }
.cs-spec__icon svg { width: 18px; height: 18px; }
.cs-spec__text { display: flex; flex-direction: column; font-family: var(--cs-font-body); font-size: .88rem; color: var(--cs-ink); line-height: 1.25; }
.cs-spec__text strong { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #8a7a64; font-weight: 700; }

/* Trust row */
.cs-trust { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin: 1.1rem 0 0; padding: 0; }
.cs-trust li { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--cs-font-body); font-size: .86rem; color: #6a5c4c; }
.cs-trust svg { width: 15px; height: 15px; color: var(--cs-gold); flex: none; }

/* Variation pills (native selects stay in the form, visually tucked away) */
select.cs-varpills-src { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-varpills { display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-varpill { background: #fff; border: 1.5px solid rgba(26,22,19,.16); border-radius: 999px; padding: .55rem 1.1rem; font-family: var(--cs-font-body); font-size: .9rem; font-weight: 600; color: var(--cs-ink); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.cs-varpill:hover { border-color: var(--cs-gold); }
.cs-varpill.is-active { background: var(--cs-charcoal); border-color: var(--cs-charcoal); color: var(--cs-cream); }
.cs-varpill:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.cs-themed.single-product table.variations td.value { position: relative; }
.cs-btnprice { font-weight: 600; opacity: .85; }

/* ============================================================
   CART + CHECKOUT (Le Piantagioni CARRELLO pattern)
   ============================================================ */
.cs-carthero { text-align: center; padding: clamp(2.5rem, 7vh, 5rem) 1.25rem 0; background: var(--cs-paper); }
.cs-carthero h1 { font-size: clamp(3rem, 8vw, 6.5rem); margin: 0 0 .25em; color: var(--cs-ink); letter-spacing: -.03em; }
.cs-carthero p { font-family: var(--cs-font-body); color: #6a5c4c; margin: 0; }
.cs-carthero a { color: var(--cs-gold); text-decoration: none; font-weight: 600; }
.cs-carthero--checkout h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }

/* Cart: items left, summary card right (sticky) */
.cs-themed.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; max-width: var(--cs-maxw); margin: 0 auto; padding: clamp(1.5rem, 4vh, 3rem) clamp(1.25rem, 4vw, 3rem); }
.cs-themed.woocommerce-cart .woocommerce > .cs-freeship,
.cs-themed.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.cs-themed.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
.cs-themed.woocommerce-cart .cart-collaterals { grid-column: 2; position: sticky; top: 110px; }
.cs-themed.woocommerce-cart .cart_totals { background: var(--cs-charcoal); color: var(--cs-cream); border-radius: 18px; padding: clamp(1.4rem, 2.5vw, 2rem); width: 100% !important; float: none !important; }
.cs-themed.woocommerce-cart .cart_totals h2 { font-family: var(--cs-font-display); color: var(--cs-cream); font-size: 1.5rem; margin: 0 0 1rem; }
.cs-themed.woocommerce-cart .cart_totals table { background: none; border: 0; }
.cs-themed.woocommerce-cart .cart_totals th, .cs-themed.woocommerce-cart .cart_totals td { background: none !important; color: var(--cs-cream); border-color: rgba(244,237,225,.14) !important; font-family: var(--cs-font-body); }
.cs-themed.woocommerce-cart .cart_totals .amount { color: var(--cs-gold-2); }
.cs-themed.woocommerce-cart .wc-proceed-to-checkout .checkout-button { display: block; width: 100%; text-align: center; background: var(--cs-gold) !important; color: #1a1613 !important; border-radius: 10px; padding: 1rem !important; font-weight: 700; font-family: var(--cs-font-body); }
.cs-themed.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: var(--cs-gold-2) !important; }
@media (max-width: 960px) {
  .cs-themed.woocommerce-cart .woocommerce { display: block; }
  .cs-themed.woocommerce-cart .cart-collaterals { position: static; margin-top: 1.5rem; }
}

/* Checkout: CSS-only skin over native Woo (functionality untouched) */
.cs-themed.woocommerce-checkout .woocommerce { max-width: var(--cs-maxw); margin: 0 auto; padding: clamp(1.5rem, 4vh, 3rem) clamp(1.25rem, 4vw, 3rem); font-family: var(--cs-font-body); }
.cs-themed.woocommerce-checkout form.checkout.woocommerce-checkout { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.cs-themed.woocommerce-checkout #customer_details { grid-column: 1; }
.cs-themed.woocommerce-checkout #order_review_heading,
.cs-themed.woocommerce-checkout #order_review { grid-column: 2; }
.cs-themed.woocommerce-checkout #order_review_heading { font-family: var(--cs-font-display); font-size: 1.5rem; margin: 0 0 .6rem; }
.cs-themed.woocommerce-checkout #order_review { background: #fff; border: 1px solid rgba(26,22,19,.09); border-radius: 18px; padding: clamp(1.25rem, 2.5vw, 2rem); box-shadow: 0 24px 48px -30px rgba(26,22,19,.35); position: sticky; top: 110px; }
.cs-themed.woocommerce-checkout .woocommerce h3 { font-family: var(--cs-font-display); font-size: 1.35rem; }
.cs-themed.woocommerce-checkout .form-row input.input-text,
.cs-themed.woocommerce-checkout .form-row textarea,
.cs-themed.woocommerce-checkout .form-row select { border: 1px solid rgba(26,22,19,.18); border-radius: 9px; padding: .8rem .9rem; font-family: var(--cs-font-body); font-size: 16px; background: #fff; }
.cs-themed.woocommerce-checkout .form-row input.input-text:focus,
.cs-themed.woocommerce-checkout .form-row textarea:focus,
.cs-themed.woocommerce-checkout .form-row select:focus { outline: none; border-color: var(--cs-gold); box-shadow: 0 0 0 3px rgba(184,137,63,.18); }
.cs-themed.woocommerce-checkout #place_order { display: block; width: 100%; background: var(--cs-gold) !important; color: #1a1613 !important; border-radius: 10px; padding: 1.05rem !important; font-weight: 700; font-size: 1.02rem; font-family: var(--cs-font-body); }
.cs-themed.woocommerce-checkout #place_order:hover { background: var(--cs-gold-2) !important; }
@media (max-width: 960px) {
  .cs-themed.woocommerce-checkout form.checkout.woocommerce-checkout { display: block !important; }
  .cs-themed.woocommerce-checkout #order_review { position: static; margin-top: 1.5rem; }
}

@media (max-width: 640px) {
  .cs-product__word { left: 0; font-size: 15vw; }
  .cs-specs { gap: .5rem; }
}

/* Cart/checkout polish pass 2 */
.cs-themed.woocommerce-cart .cart_totals label,
.cs-themed.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.cs-themed.woocommerce-cart .cart_totals .woocommerce-shipping-methods li { color: rgba(244,237,225,.9); }
.cs-themed.woocommerce-cart .cart_totals a { color: var(--cs-gold-2); }
.cs-themed input[type=radio], .cs-themed input[type=checkbox] { accent-color: var(--cs-gold); }
.cs-themed.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.cs-themed.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: #fff; border: 1px solid rgba(26,22,19,.1); border-top: 3px solid var(--cs-gold);
  border-radius: 12px; color: var(--cs-ink); font-family: var(--cs-font-body);
}
.cs-themed.woocommerce-checkout .woocommerce-info a { color: var(--cs-gold); font-weight: 600; }
.cs-themed.woocommerce-checkout .woocommerce-info::before { color: var(--cs-gold); }

/* ============================================================
   Round 3 (2026-07-11): Recently-added fixes + red CTAs +
   footer curtain reveal (RM Meridian recipe, ported to charcoal)
   ============================================================ */
/* Recently added: name must never vanish on hover (GP link hover was
   painting it near-black on the charcoal band) + red add-to-cart CTA */
.cs-rtile__link { display: block; text-decoration: none; color: var(--cs-cream); }
.cs-rtile__name { color: var(--cs-cream) !important; }
.cs-rtile__link:hover .cs-rtile__name { color: var(--cs-gold-2) !important; }
.cs-rtile__btn { display: inline-block; margin-top: .75rem; background: var(--cs-red); color: #fff !important; border-radius: 8px; padding: .55rem 1.1rem; font-family: var(--cs-font-body); font-size: .85rem; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.cs-rtile__btn:hover { background: #d13322; color: #fff !important; transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(238,62,44,.55); }

/* Footer curtain reveal — footer pinned behind the page, content slides up
   to uncover it. Gated by body.cs-reveal (hero.js sets it only when the
   footer fits the viewport). Seam lessons inherited from the RM build:
   body painted footer-color (sub-pixel gap), -2px overlap (rest state),
   3px charcoal edge cap on #page (mid-scroll AA hairline). */
body.cs-themed.cs-reveal { background: var(--cs-charcoal) !important; }
body.cs-reveal .cs-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
body.cs-reveal #page { position: relative; z-index: 1; background: var(--cs-paper); margin-bottom: calc(var(--cs-footer-h, 0px) - 2px); border-bottom: 3px solid var(--cs-charcoal); }
/* Everything rendered OUTSIDE #page via wp_body_open (ticker, header,
   category/maker/cart heroes) must also stack above the pinned footer —
   missing this painted the footer straight over category pages. */
body.cs-reveal .cs-ticker,
body.cs-reveal .cs-siteheader,
body.cs-reveal .cs-cathero,
body.cs-reveal .cs-makerhero,
body.cs-reveal .cs-carthero { position: relative; z-index: 1; }
body.cs-reveal .cs-carthero { background: var(--cs-paper); }
body.cs-reveal .cs-makerhero { background: var(--cs-charcoal); }

/* --- Cutout product presentation (.cs-float via "cutout" product tag) ---
   Featured image is a transparent PNG: kill the white card so the product
   floats over the ghost name; gallery thumbs become small white cards. */
.cs-themed.single-product div.product.cs-float .woocommerce-product-gallery { background: none; border-radius: 0; overflow: visible; box-shadow: none; }
.cs-themed.single-product div.product.cs-float .woocommerce-product-gallery__image img { background: none; padding: 0; aspect-ratio: auto; max-height: 72vh; width: auto; margin: 0 auto; filter: drop-shadow(0 40px 44px rgba(26,22,19,.28)); }
.cs-themed.single-product div.product.cs-float .woocommerce-product-gallery__image a { display: flex; justify-content: center; }
/* NOTE: flex-viewport must stay overflow:hidden — visible leaked the other
   gallery slides over the summary column. Shadow clipping is the lesser evil. */
.cs-themed.single-product div.product.cs-float .woocommerce-product-gallery ol.flex-control-thumbs { display: flex; gap: .7rem; justify-content: center; margin-top: 1.5rem; padding: 0; }
.cs-themed.single-product div.product.cs-float .woocommerce-product-gallery ol.flex-control-thumbs li { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 28px -20px rgba(26,22,19,.5); width: 84px; }
.cs-themed.single-product div.product.cs-float .woocommerce-product-gallery ol.flex-control-thumbs li img { padding: .5rem; }
/* the cutout floats — let the ghost name breathe behind it */
.cs-themed.single-product div.product.cs-float .cs-product__word { color: rgba(26,22,19,.07); }

/* pbq round 2: the plugin also inline-tans its Summary header th — keep ALL
   header cells on-brand, and stop the variations label column hogging width */
.cs-themed.single-product .pbq_pricing_table th { background: var(--cs-charcoal) !important; color: var(--cs-cream) !important; }
.cs-themed.single-product table.variations th.label,
.cs-themed.single-product table.variations td.label { width: 1%; white-space: nowrap; padding-right: 1.1rem; vertical-align: middle; }
.cs-themed.single-product table.variations td.label label { font-family: var(--cs-font-body); font-weight: 600; color: var(--cs-ink); }
.cs-themed.single-product .reset_variations { display: inline-block; margin-top: .5rem; font-size: .82rem; color: #8a7a64; }

/* Shop landing: hero + 4-up department cards */
.cs-shophero { background: var(--cs-paper); text-align: center; padding: clamp(2.5rem, 6vh, 4.5rem) 1.25rem 0; }
.cs-shophero__title { font-size: clamp(2.6rem, 6vw, 5rem); margin: .1em 0 .2em; color: var(--cs-ink); }
.cs-shophero__sub { font-family: var(--cs-font-body); color: #6a5c4c; max-width: 60ch; margin: 0 auto; line-height: 1.6; }
.cs-cats--4 .cs-cats__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .cs-cats--4 .cs-cats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cs-cats--4 .cs-cats__grid { grid-template-columns: 1fr; } }

/* Shop archive: GP .site-content is display:flex (the known template gotcha)
   and the shop hero/cats hook in as its direct children — stack them. */
.woocommerce-shop .site-content,
.post-type-archive-product .site-content { display: block !important; }

/* Labeled stars: own line above the CTA, with plain-English review count */
.cs-stars--labeled { display: flex; margin: 1rem 0 1.15rem; }
.cs-stars--labeled .cs-stars__count { font-size: .92rem; }

/* Brand marquee v2 (JD/James): no chips — bigger logos straight on the
   charcoal band. Dark marks were recolored cream at the asset level. */
.cs-brandreel__item--logo { background: none !important; border-radius: 0; padding: 0 .2rem; }
.cs-brandreel__item--logo:hover { background: none !important; transform: translateY(-3px); }
.cs-brandreel__item--logo img { height: 54px; max-width: 220px; }
@media (max-width: 820px) { .cs-brandreel__item--logo img { height: 40px; max-width: 160px; } }

/* --- Fix round (2026-07-11): reveal broke header stacking; pbq grid; pagination --- */
/* Mega menu panels open over #page content — the reveal rule had flattened
   the header to z-index:1 (same as #page, later in DOM = page won). */
body.cs-reveal .cs-siteheader { z-index: 60; }
body.cs-reveal .cs-ticker { z-index: 59; }

/* pbq tables: one disciplined grid — fixed layout, right-aligned prices,
   no inner column borders, identical padding everywhere */
.cs-themed.single-product .pbq_pricing_table table { table-layout: fixed; width: 100%; max-width: 520px; }
.cs-themed.single-product .pbq_pricing_table th,
.cs-themed.single-product .pbq_pricing_table td { padding: .68rem 1rem !important; border-left: 0 !important; border-right: 0 !important; line-height: 1.35; vertical-align: middle; }
.cs-themed.single-product .pbq_pricing_table th:last-child,
.cs-themed.single-product .pbq_pricing_table td:last-child { text-align: right; width: 30%; }

/* Pagination: current page must always be legible */
.cs-themed .woocommerce-pagination .page-numbers.current,
.cs-themed nav.woocommerce-pagination span.current,
.cs-themed .page-numbers.current {
  background: var(--cs-charcoal) !important;
  color: var(--cs-cream) !important;
  border-color: var(--cs-charcoal) !important;
}

/* Cathero can never be see-through (reveal footer showed through bare heroes) */
.cs-cathero { background-color: var(--cs-charcoal); }

/* Marquee: taller band, bigger logos (James) */
.cs-brandreel { padding: .6rem 0; }
.cs-brandreel__item--logo img { height: 64px; max-width: 250px; }
@media (max-width: 820px) { .cs-brandreel__item--logo img { height: 46px; max-width: 180px; } }

/* Checkout grid rows: billing spans both rows; heading row1 + review row2 in
   col 2 — auto-placement was stretching row1 to the billing column's full
   height, dumping the order review ~1000px below its own heading. */
.cs-themed.woocommerce-checkout form.checkout.woocommerce-checkout { grid-template-rows: auto 1fr; }
.cs-themed.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.cs-themed.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 .6rem; }
.cs-themed.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; align-self: start; }

/* --- pbq round 4 (2026-08-01): make the two stacked tables ONE unit ---------
   Rounds 1-3 all targeted `.pbq_pricing_table`. The Summary table underneath
   lives in `.pbq_pricing_summary`, a sibling container, so it never matched a
   single one of those rules — it kept the plugin's tan header, 8px padding and
   centred text, while the tier table above it was capped at `max-width:520px`
   inside a 553px column. Two tables 33px out of step, price columns 98px apart.
   (Round 2's comment says it was fixing the Summary header. It wasn't — wrong
   container. Check the computed style, not the intent in the comment.)
   Style BOTH, and pin the price column to the same width in each so the money
   lines up straight down the page. --------------------------------------- */
.cs-themed.single-product .pbq_pricing_table table,
.cs-themed.single-product .pbq_pricing_summary table {
  table-layout: fixed; width: 100%; max-width: none;
  border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid rgba(26,22,19,.1); border-radius: 12px;
  overflow: hidden; box-shadow: 0 14px 30px -24px rgba(26,22,19,.4);
}
.cs-themed.single-product .pbq_pricing_summary { margin: 0 0 1.1rem; font-family: var(--cs-font-body); font-size: .88rem; color: #5a5046; }
.cs-themed.single-product .pbq_pricing_summary th,
.cs-themed.single-product .pbq_pricing_summary td {
  padding: .68rem 1rem !important; border-left: 0 !important; border-right: 0 !important;
  line-height: 1.35; vertical-align: middle; text-align: left;
}
.cs-themed.single-product .pbq_pricing_summary th {
  background: var(--cs-charcoal) !important; color: var(--cs-cream) !important;
  font-family: var(--cs-font-body); font-weight: 600; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.cs-themed.single-product .pbq_pricing_summary td { border-top: 1px solid rgba(26,22,19,.07); }
/* the money column — identical width in both tables, so the two stacks align */
.cs-themed.single-product .pbq_pricing_table th:last-child,
.cs-themed.single-product .pbq_pricing_table td:last-child,
.cs-themed.single-product .pbq_pricing_summary th:last-child,
.cs-themed.single-product .pbq_pricing_summary td:last-child { width: 30%; text-align: right; }


/* ------------------------------------------------------------------
   Category card + tile labels: hold their colour on hover.

   These tiles are <a> elements. GeneratePress ships a global
   `a:hover { color: #303030 }`, and .cs-cat set a cream colour with NO hover
   rule, so on hover the global won and .cs-cat__name, which had no colour of
   its own, inherited dark grey and vanished into the photograph. Nothing to do
   with which image was used; it hit every card.

   The text-shadow is the second half: tiles with no assigned image now borrow a
   product photograph, and product photographs are usually shot on white, so the
   label has to survive a light backdrop as well as a dark one.
   ------------------------------------------------------------------ */
.cs-cat, .cs-cat:hover, .cs-cat:focus, .cs-cat:active { color: var(--cs-cream); }
.cs-cat__name { color: var(--cs-cream); text-shadow: 0 1px 14px rgba(16,12,9,.55); }
.cs-cat__meta { text-shadow: 0 1px 12px rgba(16,12,9,.55); }

.cs-subcat, .cs-subcat:hover, .cs-subcat:focus, .cs-subcat:active { color: var(--cs-cream); }
.cs-subcat__name { color: var(--cs-cream); text-shadow: 0 1px 14px rgba(16,12,9,.6); }
.cs-subcat__count { color: var(--cs-gold); text-shadow: 0 1px 12px rgba(16,12,9,.6); }
/* a borrowed product photo is often near-white, so deepen the scrim */
.cs-subcat .cs-subcat__veil { background: linear-gradient(to top, rgba(26,22,19,.9) 0%, rgba(26,22,19,.42) 48%, rgba(26,22,19,.08) 78%); }

/* ============================================================
   THE BAR MENU  —  [cs_bar_menu] on /cigar-bar/   (2026-09-04)
   ------------------------------------------------------------
   Motifs lifted from the shop's printed InDesign menu, rendered in
   THIS site's palette rather than the print piece's single brick red
   (James, 2026-09-04: "borrow the motifs, keep the theme"):
     · script section heads sitting on a heavy solid rule
     · letterspaced caps for item names, serif for the ingredient line
     · bare numeral prices, no dollar signs — as the print menu sets them
     · double-ruled notched box for featured blocks
     · a pull-quote used as a structural divider
   Ink on paper, not another dark card: the page already has two charcoal
   blocks (.cs-bar-reserve__card, the CTA) and a third would bury the menu.
   ============================================================ */
.cs-page__content .cs-menu {
  --menu-rule: var(--cs-gold);
  --menu-script: "Norican", "Fraunces", cursive;
  --menu-serif: "Literata", Georgia, serif;
  width: min(92vw, 1100px);
  margin: 3rem 0 2.5rem 50%;
  transform: translateX(-50%);
  background: var(--cs-paper);
  border-radius: 22px;
  padding: clamp(1.6rem, 4vw, 3.5rem);
  box-shadow: 0 24px 48px -30px rgba(26, 22, 19, .4);
  scroll-margin-top: 110px;
}
.cs-menu__head { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cs-page__content .cs-menu__head h2 { margin: .2em 0 .35em; }
.cs-menu__lede { max-width: 54ch; margin: 0 auto; color: var(--cs-ink); opacity: .8; line-height: 1.7; }

.cs-menu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.cs-menu__block { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.cs-menu__block:last-child { margin-bottom: 0; }

/* Script head + the heavy rule under it — the menu's strongest motif. */
.cs-page__content .cs-menu__script {
  font-family: var(--menu-script);
  font-weight: 400;
  color: var(--cs-gold);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  margin: 0 0 .55rem;
  display: flex; align-items: baseline; justify-content: center; gap: .6rem; flex-wrap: wrap;
}
.cs-menu__script::after {
  content: ""; display: block; flex: 0 0 100%;
  height: 6px; border-radius: 2px; background: var(--menu-rule); margin-top: .35rem;
}
.cs-menu__meta {
  font-family: var(--cs-font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cs-stone);
}
.cs-menu__sub {
  font-family: var(--cs-font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cs-ink);
  margin: 1.4rem 0 .6rem; padding-bottom: .3rem;
  border-bottom: 1px solid rgba(184, 137, 63, .35);
}

.cs-menu__list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.cs-menu__item + .cs-menu__item { margin-top: 1.35rem; }
.cs-page__content .cs-menu__name {
  display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--cs-font-body); font-weight: 600;
  font-size: .93rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--cs-charcoal); margin: 0 0 .18rem;
}
.cs-menu__name > span:first-child { flex: 0 1 auto; }
.cs-menu__price {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; letter-spacing: .04em;
  color: var(--cs-gold); font-size: 1rem;
}
/* Dotted leader between name and price — a menu convention, and it makes the
   price scannable down the column without a hard right-aligned table.
   ⚠️ The leader MUST be a flex item on .cs-menu__name, not an ::after on the
   name span. As `display:inline-block;width:100%` inside the (flex:1) span it
   wrapped to its own line, inflating the name block so each description sat
   closer to the NEXT item than to its own — the grouping read backwards.
   Only drawn when there is actually a price to lead to (Classic Cocktails are
   a flat "12 each", so their rows have none and a leader would point nowhere). */
.cs-menu__name:has(.cs-menu__price)::after {
  content: ""; order: 1; flex: 1 1 auto; align-self: center;
  border-bottom: 1px dotted rgba(168, 154, 134, .55);
  margin: 0 .5rem; transform: translateY(.06em);
}
.cs-menu__price { order: 2; }
.cs-page__content .cs-menu__desc {
  font-family: var(--menu-serif); font-size: .95rem; line-height: 1.55;
  color: var(--cs-ink); opacity: .85; margin: 0;
}
.cs-menu__from { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-stone); margin-top: .12rem; }
.cs-page__content .cs-menu__note {
  font-family: var(--menu-serif); font-style: italic; font-size: .84rem;
  color: var(--cs-stone); margin: .22rem 0 0;
}

/* Double-ruled notched box — the print menu uses it twice, so it's the
   established "this one is special" treatment. Two nested borders, not a shadow. */
.cs-menu__feature {
  border: 3px solid var(--cs-gold);
  outline: 1px solid var(--cs-gold);
  outline-offset: 4px;
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  margin: 1.3rem 4px 1.6rem;
  background: rgba(184, 137, 63, .06);
}
.cs-menu__feature .cs-menu__name { margin-bottom: .2rem; }
.cs-menu__feature .cs-menu__note { text-align: center; margin-top: .5rem; font-size: .78rem; letter-spacing: .04em; }

/* The Spurgeon line, used as a divider the way the print piece does. */
.cs-menu__quote {
  margin: 1.75rem 0; padding: 1.1rem 0; text-align: center;
  border-top: 6px solid var(--cs-gold); border-bottom: 6px solid var(--cs-gold);
}
.cs-menu__quote blockquote {
  margin: 0; padding: 0; border: 0;
  font-family: var(--cs-font-body); font-weight: 600;
  font-size: .88rem; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.75; color: var(--cs-charcoal);
}
.cs-menu__quote figcaption { margin-top: .45rem; font-family: var(--menu-serif); font-size: .82rem; color: var(--cs-stone); }

/* Seasonal download — the one dark block, so it reads as the call to action. */
.cs-menu__season {
  margin: clamp(1.75rem, 3vw, 2.75rem) 0 0;
  background: var(--cs-charcoal); color: var(--cs-cream);
  border-radius: 16px; padding: 5px;
}
.cs-menu__season-inner {
  border: 1px solid rgba(216, 168, 90, .45); border-radius: 12px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem); text-align: center;
}
.cs-page__content .cs-menu__season .cs-menu__script { color: var(--cs-gold-2); }
.cs-menu__season .cs-menu__script::after { background: var(--cs-gold-2); }
.cs-page__content .cs-menu__season p { color: rgba(244, 237, 225, .82); max-width: 56ch; margin: 0 auto 1.4rem; line-height: 1.7; }
.cs-menu__season .cs-btn { display: inline-flex; align-items: center; gap: .55rem; }
.cs-page__content .cs-menu__seasonnote { font-size: .88rem; margin: 1.1rem auto 0; }
/* Inline links only — NOT the download button. Scoping this to bare `a` painted
   .cs-btn--gold's label gold on a gold field: unreadable, and it was the one
   control the whole block exists to serve. */
.cs-menu__season a:not(.cs-btn) { color: var(--cs-gold-2); }
.cs-menu__season .cs-btn--gold { color: var(--cs-charcoal); }

@media (max-width: 860px) {
  .cs-menu__grid { grid-template-columns: 1fr; gap: 0; }
  .cs-page__content .cs-menu { padding: 1.5rem 1.15rem; }
  /* Long uppercase names wrap badly next to a leader on a narrow column, so the
     leader goes and the price simply trails the name. */
  .cs-page__content .cs-menu__name { flex-wrap: wrap; gap: .3rem; }
  .cs-menu__name:has(.cs-menu__price)::after { display: none; }
  .cs-menu__price::before { content: "· "; color: var(--cs-stone); }
}

/* ============================================================
   MOBILE PASS — 2026-09-05
   Touch ergonomics + purchase order on phones and tablets.

   Scoped to <=880px, which is the breakpoint where the PDP
   ALREADY switches to a single column (line ~616). Reusing the
   system's own breakpoint on purpose: the theme has 17 of them
   and does not need an 18th.

   Rollback: assets/css/hero.css.bak-mobile-20260905
   ============================================================ */
@media (max-width: 880px) {

  /* --- 1. The buy box comes before the story -----------------
     Measured on a 375px phone: .woocommerce-product-details__short-description
     is 1,153px tall, sitting between the price (y=880) and the
     buy form (y=2057) — putting "Add to cart" 2.8 screens down.
     Reordering lifts price -> buy form directly under the title.
     The description keeps its full length and simply follows,
     so no copy is cut and no JS is involved. */
  .cs-themed.single-product div.product .summary { display: flex; flex-direction: column; }
  .cs-themed.single-product div.product .summary > *                           { order: 6; }
  .cs-themed.single-product div.product .summary > .product_title              { order: 1; }
  .cs-themed.single-product div.product .summary > .woocommerce-product-rating { order: 2; }
  .cs-themed.single-product div.product .summary > .price                      { order: 3; }
  .cs-themed.single-product div.product .summary > form.cart                   { order: 4; }
  .cs-themed.single-product div.product .summary > .cs-trust                   { order: 5; }

  /* --- 2. Tap targets up to the 44px floor -------------------
     Apple's HIG minimum is 44x44 (Google says 48); every rule
     below was measured under it on a 375px viewport. Icon
     glyphs are explicitly sized (.cs-icon svg = 21px), so
     growing the HIT AREA does not enlarge the artwork. */

  /* Account + cart. Were 21x21 — under a quarter of the minimum,
     and they are the primary shop navigation on a phone. */
  .cs-icon { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

  /* The conversion control on every shop grid. Was 136x30. */
  .cs-themed ul.products li.product .button,
  .cs-shop ul.products li.product .button {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }

  /* Shop controls — both measured 40px tall. */
  .cs-browse-btn { min-height: 44px; }
  .cs-themed .woocommerce-ordering select { min-height: 44px; }

  /* Drawer close. Was 33x37. */
  .cs-drawer__close {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Woo's back-to-shop button on the empty cart. Was 147x38. */
  .cs-themed .wc-backward,
  .woocommerce .return-to-shop .button {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }

  /* --- 3. Cart: keep checkout within thumb reach -------------
     A ONE-ITEM cart puts "Proceed to checkout" at y=1620 — two
     full screens down — because the shipping-method list alone
     is 345px and the totals block is 867px. Pinning the CTA to
     the bottom on phones keeps it one thumb away at any scroll
     position, without shortening the totals a customer may well
     want to read. The button keeps its own gold styling; only
     its position changes.

     env() resolves to 0 without viewport-fit=cover, so the
     max()/calc() wrappers degrade cleanly to the 16px values. */
  .cs-themed.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    position: fixed;
    left:   max(16px, env(safe-area-inset-left));
    right:  max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: auto;
    margin: 0;
    z-index: 60;
    text-align: center;
    box-shadow: 0 18px 36px -14px rgba(26, 22, 19, .55);
  }
  /* It has left the flow, so give the page back the space it
     used to occupy — otherwise the last rows sit under it. */
  /* The pinned button overlays the FOOTER, not .site-content — that
     wrapper is only 1,392px of a 3,416px page and the footer follows
     it. Pad the footer so the legal line can always be scrolled clear. */
  .cs-themed.woocommerce-cart .cs-footer { padding-bottom: 92px; }

  /* The pinned CTA lands on top of the existing back-to-top button
     (.cs-totop, fixed 46x46 at z-index 70). Because that one has the
     HIGHER z-index it would win the tap on the CTA right end - so lift
     it clear rather than hide it; back-to-top earns its place on a
     3,400px cart. The CTA occupies 16-65px from the bottom. */
  .cs-themed.woocommerce-cart .cs-totop { bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* Woo prints the tax qualifier as <small> in its own default grey:
     rgb(118,118,118) at 9.6px on the charcoal totals card measures
     3.96:1, under the 4.5 floor, and 9.6px is below anyone's reading
     size on a phone. Reuse the stone the sibling labels already use
     (6.53:1 measured) and give it a legible size. */
  .cs-themed.woocommerce-cart .cart_totals small {
    /* !important on COLOUR only: font-size lands unaided, but something
       outside this theme (Woo/plugin CSS) wins the colour cascade even
       against a higher-specificity selector. Verified both ways. */
    color: var(--cs-stone, #a89a86) !important;
    font-size: .78rem;
  }

  /* --- 4. Account + contact paths ---------------------------
     Woo's own form buttons ship at 38px. "Log in" (79x38) and
     "Register" (96x38) are the primary actions on /my-account/,
     which sits directly in the ordering path for returning
     customers. */
  .cs-themed .woocommerce-button.button,
  .cs-themed button.woocommerce-Button,
  .cs-themed .woocommerce form .button { min-height: 44px; }

  /* Password reveal toggle: 22x22, absolutely positioned inside a
     281x48 field. Grow the target and re-centre the glyph; the
     field gains matching padding so text never runs under it. */
  .cs-themed .password-input .show-password-input {
    width: 44px; height: 44px;
    right: 0; top: 50%; transform: translateY(-50%);
    background-position: center;
  }
  .cs-themed .password-input input { padding-right: 48px; }

  /* Tap-to-call renders as inline text (92x19 in the footer, 86x18
     on the cigar-bar page). On a shop and a lounge the phone number
     is a primary action, so give it a real target.
     NOTE: colour deliberately untouched — gold on cream measures
     2.94:1, but that is a recorded brand ruling and James's call. */
  .cs-themed a[href^="tel:"] {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* --- 5. Elementor leftovers -------------------------------
     15 published pages still RENDER Elementor (_elementor_edit_mode
     = builder), including Cart, Checkout, My Account, My Orders,
     Shop and Wishlists. Elementor slider headings carry a fixed
     desktop pixel size that does not scale: on /my-account/ it is
     108px inside a 208px column, so "My Account" breaks mid-word
     and renders as "My Acc oun t".

     Elementor writes per-post CSS with very high specificity, so
     !important is genuinely required here. This is a SAFETY NET for
     pages that survive to launch, not an endorsement of leaving
     them on Elementor. */
  .elementor-slide-heading {
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
    line-height: 1.1 !important;
    word-break: normal;
    overflow-wrap: normal;
  }
  /* The slide description ships at 29px against a 30px heading, so the
     title has no dominance and the body copy is oversized for a phone.
     Restore the hierarchy. */
  .elementor-slide-description {
    font-size: clamp(1rem, 4.4vw, 1.3rem) !important;
    line-height: 1.4 !important;
  }
  /* Elementor centres the slide content in a 208px column - 45% of a
     375px screen is left empty. Give the copy the width it needs. */
  .elementor-slides .swiper-slide-contents { max-width: 88% !important; width: 88% !important; }

  /* --- 6. Remaining controls --------------------------------
     Variation pills were 41px - only 3px short, but they are the
     control a customer must hit before Add to cart is even enabled,
     so they get the full target. */
  .cs-themed .cs-varpill { min-height: 44px; }

  /* Blog category chips (.cs-subnav--blog) were 56x38 / 120x38. */
  .cs-themed .cs-subnav__chip { min-height: 44px; display: inline-flex; align-items: center; }

  /* Quantity stepper on the cart line item. Was 62x42. */
  .woocommerce-cart .cart_item input.qty,
  .woocommerce-cart input.input-text.qty { min-height: 44px; }
}

/* ============================================================
   GOLD-ON-CREAM CONTRAST FIX - 2026-09-05
   James's ruling: gold on cream is NOT accepted (nor gold on gold,
   nor cream on gold). The cart intro - "Questions? Call 601-362-2233"
   - puts base gold #B8893F on paper #FBF7F0 = 2.94:1, against a 4.5
   floor. Gold text on cream cannot reach 4.5 at any weight, so the
   number takes ink and keeps a GOLD UNDERLINE for link affordance:
   the accent survives, the text becomes readable (~16:1).

   Outside the mobile media query on purpose - this is wrong at every
   width, not just on phones.

   NOTE the passing cases were left alone: the Cigar Bar uses the
   BRIGHT gold #D8A85A on charcoal (8.28:1) and the footer is cream
   on charcoal (15.45:1).
   ============================================================ */
.cs-themed .cs-carthero a[href^="tel:"] {
  /* Stays GOLD - just deep enough to clear the floor. #8A6524 is the
     shallowest deepening of #B8893F that passes: 4.96:1 on paper
     (#FBF7F0) and 4.71:1 on cream (#F7F1E6), vs 2.94 / 2.79 for the
     brand gold. No underline: the ink+underline version read as
     utilitarian against the rest of the page. */
  color: #8A6524;
}

/* ------------------------------------------------------------
   GOLD-ON-GOLD BUTTON - 2026-09-05 (James spotted it)
   .cs-bar-reserve__card a  (line ~1388) colours EVERY link in the
   card gold-2 #D8A85A. At (0,1,1) that outranks .cs-btn's own
   ink colour at (0,1,0), so "Send us a message" rendered gold text
   on its gold background: 1.45:1 - effectively unreadable.

   A button is not a body link, so exclude it. Ink on gold is also
   what the design system already mandates ("charcoal on gold/clay
   bands") and measures 5.73:1.
   ------------------------------------------------------------ */
.cs-themed .cs-bar-reserve__card .cs-btn { color: #1a1613; }

/* ── Just In (/new-and-restocked/) ──────────────────────────────────────────
   Two stacked feeds rather than a JS toggle: "new" and "back in stock" are
   mirror images (new = pipes, restocked = tobacco) and a merged list buries
   both audiences, but a toggle is a script that can fail. Headings do the job.
   Tiles reuse .cs-rtile and deliberately omit .cs-rtile__btn — that button is
   slated for retirement (white on --cs-red is 3.92:1, below AA). */
.cs-justin { padding-block: clamp(1rem, 3vw, 2rem); }
.cs-justin__feed + .cs-justin__feed {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid rgba(42, 36, 32, .14);
}
.cs-justin__head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.cs-justin__title { margin: .15em 0 .3em; }
.cs-justin__blurb { color: var(--ink, #2A2420); opacity: .82; margin: 0; max-width: 40rem; }
.cs-justin__grid { margin-top: 0; }

/* the recency stamp — the whole point of the page, so it reads before the name */
.cs-justin__when {
  display: block;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: #8A6524;                 /* deepened gold: 4.96:1 on paper, per the contrast ruling */
  margin: .7rem 0 .15rem;
}
.cs-justin__window {
  margin-top: 1.5rem; font-size: .85rem; opacity: .7; font-style: italic;
}
.cs-justin__empty {
  margin: 0; padding: 2rem 0; opacity: .75; font-style: italic;
}

@media (max-width: 880px) {
  .cs-justin__feed + .cs-justin__feed { margin-top: 2.5rem; padding-top: 2rem; }
  .cs-justin__when { font-size: .7rem; }
}

/* ── Just In: fixes for borrowing .cs-rtile out of its home context ─────────
   .cs-rtile is authored for the CHARCOAL .cs-recent band — its name is
   `color: var(--cs-cream) !important` and its price is `var(--cs-gold)`.
   Dropped on this cream page that is cream-on-cream (invisible) and
   gold-on-cream (against the standing contrast ruling). Re-colour for paper.
   The !important is required only to beat the component's own !important. */
.cs-justin .cs-rtile,
.cs-justin .cs-rtile__link,
.cs-justin .cs-rtile__name { color: var(--cs-ink) !important; }
.cs-justin .cs-rtile__link:hover .cs-rtile__name { color: #8A6524 !important; }
.cs-justin .cs-rtile__price,
.cs-justin .cs-rtile__price .amount,
.cs-justin .cs-rtile__price del,
.cs-justin .cs-rtile__price ins { color: #8A6524; }   /* 4.96:1 on paper */
.cs-justin .cs-rtile__price del { opacity: .65; }
/* the deep drop shadow is tuned for a dark band; it reads as grime on cream */
.cs-justin .cs-rtile__media { box-shadow: 0 14px 30px -22px rgba(26, 22, 19, .45); }

/* Break out of the 72ch prose column — the grid was being squeezed to a third
   of the width the same grid gets on the home page. Same escape hatch the
   staff group photo uses. */
.cs-page__content .cs-justin {
  width: min(94vw, 1140px);
  margin-left: 50%;
  transform: translateX(-50%);
}
.cs-page__content .cs-justin .cs-justin__head { margin-inline: auto; text-align: center; }
.cs-page__content .cs-justin .cs-justin__blurb { margin-inline: auto; }
.cs-page__content .cs-justin .cs-recent__grid { max-width: none; }

/* Device-frame screenshots in post/page content. The generic
   `.cs-page__content img` rule adds a rounded box-shadow, which draws a grey
   rectangle around a transparent PNG that already carries its own shadow. */
.cs-page__content .cs-shot { margin: 2.5rem 0; text-align: center; }
.cs-page__content .cs-shot img {
  border-radius: 0; box-shadow: none; max-width: min(100%, 460px); height: auto;
}
.cs-page__content .cs-shot--wide img { max-width: min(100%, 720px); }
.cs-page__content .cs-shot figcaption {
  font-size: .85rem; color: var(--cs-stone); margin-top: .9rem; font-style: italic;
}

/* ── Checkout: payment method rows ──────────────────────────────────────────
   The Authorize.Net gateway ships its own label as display:flex at 100% width
   (it carries the card-brand images), and a full-width block label cannot sit
   beside an inline radio — so that row wrapped onto two lines while PayPal's
   inline label did not. Lay the row out here so every gateway aligns the same,
   whatever markup it brings. */
.cs-themed.woocommerce-checkout ul.payment_methods > li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .65rem;
  padding: .5rem 0;
}
.cs-themed.woocommerce-checkout ul.payment_methods > li > input[type="radio"] {
  grid-column: 1; margin: 0; align-self: center;
}
.cs-themed.woocommerce-checkout ul.payment_methods > li > label {
  grid-column: 2; margin: 0; width: auto !important;
  display: flex !important; align-items: center; gap: .55rem; flex-wrap: wrap;
  line-height: 1.3;
}
.cs-themed.woocommerce-checkout ul.payment_methods > li > label img {
  max-height: 22px; width: auto; margin: 0; display: inline-block;
}
.cs-themed.woocommerce-checkout ul.payment_methods > li > .payment_box {
  grid-column: 1 / -1; margin-top: .5rem;
}

/* Woo's default payment_box is a pale lilac (#dcd7e2) that matches nothing in
   this palette. Neutral tint on paper instead, and drop the lilac arrow. */
.cs-themed.woocommerce-checkout .payment_box {
  background: rgba(26, 22, 19, .045) !important;
  border: 1px solid rgba(26, 22, 19, .10);
  border-radius: 10px;
  color: var(--cs-ink);
}
.cs-themed.woocommerce-checkout .payment_box::before,
.cs-themed.woocommerce-checkout .payment_box::after { display: none !important; }

/* ── Single product: contain the ghost product name ─────────────────────────
   .cs-product__word is white-space:nowrap, so its rendered width is driven by
   the product TITLE's length. A long pipe name measured 1,657px against a
   390px phone. body{overflow-x:clip} hid that in Chrome, but Safari still let
   the page pan sideways — the whole layout appeared shifted left with dead
   space on the right (reported on iOS, 2026-09-07). Contain it at source
   rather than trusting a clip that one engine ignores. */
.cs-themed.single-product .cs-product__word {
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 640px) {
  /* ⚠️ The earlier mobile rule sets font-size on the BASE class, which overrode
     .cs-product__word--long and gave long names the same 15vw as short ones —
     defeating the very modifier that exists to shrink them. Restore its intent. */
  .cs-themed.single-product .cs-product__word--long { font-size: 8vw; }
}