/* ============================================================
   COFFEEHAUS — SHARED STYLESHEET
   Used by: index.html, shop.html, wholesale.html,
            consulting.html, classes.html, about.html, contact.html
   ============================================================ */

/* ── FONTS ── */
@font-face { font-family: 'Pitch Sans'; src: url('../assets/fonts/PitchSans-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pitch Sans'; src: url('../assets/fonts/PitchSans-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pitch Sans'; src: url('../assets/fonts/PitchSans-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pitch Sans'; src: url('../assets/fonts/PitchSans-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pitch Sans'; src: url('../assets/fonts/PitchSans-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Berkeley Mono'; src: url('../assets/fonts/BerkeleyMono-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Berkeley Mono'; src: url('../assets/fonts/BerkeleyMono-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Berkeley Mono'; src: url('../assets/fonts/BerkeleyMono-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── TOKENS ── */
:root {
  --ink:          #121601;
  --canvas:       #e5cca8;
  --primary:      #bc4d22;
  --accent:       #043a12;
  --support:      #aa9477;
  --line:         #423522;
  /* Secondary accents — labels/chips/SKU differentiation only (never as full backgrounds) */
  --yellow:       #b28a4f;
  --magenta:      #6b1f3a;
  --steel:        #495b68;
  --brown:        #562410;
  --navy:         #152742;
  --red:          #d30500;
  --ff-head: 'Pitch Sans', 'Source Sans 3', sans-serif;
  --ff-body: 'Source Sans 3', sans-serif;
  --ff-mono: 'Berkeley Mono', 'Courier New', monospace;
  --nav-h: 64px;
  --max-w: 1200px;
  --pad-x: 48px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; background-color: #b89674; scroll-padding-top: calc(var(--nav-h) + 48px); }

/* Kill the iOS "tap once to hover, tap again to click" behavior site-wide.
   On any device without a hover pointer, disable hover-triggered transforms
   and filter changes so first tap fires the action. `touch-action:
   manipulation` on interactive elements also removes the 300ms double-tap
   delay. */
a, button, [role="button"], .btn, .path-card, .product-card, .peg-item,
.filter-dropdown-toggle, .product-size-btn, .pdp-option-btn, .pdp-grind-btn,
.pdp-variant-btn, .pdp-sub-option, .bundle-pill, .bundle-coffee-add,
.footer-col-label { touch-action: manipulation; }

@media (hover: none) {
  a:hover, button:hover, [role="button"]:hover, [tabindex]:hover,
  a:hover *, button:hover *, [role="button"]:hover *, [tabindex]:hover * {
    transform: none !important;
    filter: none !important;
  }
  /* Exceptions: elements whose base positioning is a transform. Wiping their
     transform on hover shifts them out of place on tap. */
  .nav-logo:hover { transform: translate(-50%, -50%) !important; }
  .nav-account:hover, .nav-cart:hover { transform: translateY(-50%) !important; }
  /* Bundle "20% off" badge sits on top of the shop bundle card image, centered
     via translate — same fix. Preserve its offset transform on tap. */
  a.shop-bundle-card:hover .product-badge-bundle {
    transform: translate(-50%, calc(clamp(24px, 3vw, 36px) * 0.5 + 12px)) !important;
  }
}
body { background-color: var(--canvas); background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; background-repeat: repeat; color: var(--ink); font-family: var(--ff-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; overscroll-behavior-x: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── SKIP TO CONTENT (accessibility) ── */
.skip-link { position: absolute; top: -100px; left: 16px; background: var(--ink); color: var(--canvas); padding: 12px 20px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; z-index: 1000; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  background: var(--ink); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-x); z-index: 1000;
}
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: clamp(20px, 1.8vw, 26px); max-width: none; flex-shrink: 0; }
/* Absolutely center the nav-links in the middle of the bar, independent of
   logo width or right-cluster width. Logo stays anchored left, cart + CTA
   stay anchored right. */
.nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: clamp(16px, 2vw, 32px); list-style: none; font-family: var(--ff-head); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.nav-links a { color: rgba(229, 204, 168, 0.68); transition: color 0.2s; }
.nav-links a:hover,
.nav-links a.active { color: var(--canvas); }

/* Nav dropdown (Shop has subcategories) */
.nav-has-dropdown { position: relative; }
.nav-has-dropdown > a::after { content: ' ▾'; font-size: 9px; opacity: 0.7; margin-left: 2px; }
/* Invisible bridge below the trigger so the gap between trigger and dropdown
   doesn't kill the hover state when the mouse travels across it. */
.nav-has-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 24px; }
/* Dropdown aligns with the bottom of the nav bar (var(--nav-h) tall).
   Items are centered (was left-aligned with wide padding, which made narrow
   labels look weirdly off-center relative to the Shop link above them). */
.nav-dropdown { position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%); list-style: none; background: var(--ink); border: 1px solid var(--line); padding: 6px 0; min-width: 140px; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; z-index: 110; display: flex; flex-direction: column; }
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; }
.nav-dropdown a { display: block; padding: 10px 16px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--support); transition: color 0.2s, background 0.2s; white-space: nowrap; text-align: center; }
.nav-dropdown a:hover { color: var(--canvas); background: var(--line); }
.nav-cta { font-family: var(--ff-head); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--primary); color: var(--ink); border: none; padding: 2px 8px; flex-shrink: 0; white-space: nowrap; line-height: 1.4; transition: background 0.2s, color 0.2s; }
.nav-cta:hover { background: #a33d18; color: var(--ink); }
.nav-cart { display: none; position: relative; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; margin-right: 18px; color: var(--canvas); cursor: pointer; transition: color 0.2s; background: none; border: none; padding: 0; }
.nav-cart.has-items { display: inline-flex; }
.nav-cart:hover { color: var(--primary); }
.nav-cart svg { width: 22px; height: 22px; display: block; }
.nav-cart-count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--primary); color: var(--ink); border-radius: 999px; font-family: var(--ff-mono); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
/* Account icon — same footprint as the cart icon, sits to the left of it */
.nav-account { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; margin-right: 16px; color: var(--canvas); cursor: pointer; transition: color 0.2s; text-decoration: none; }
/* Mobile-menu Account line — only shows inside the hamburger, never in the desktop inline nav */
.nav-links-account { display: none; }
.nav-account + .nav-cart { margin-left: 4px; margin-right: 18px; }
.nav-account:hover { color: var(--primary); }
.nav-account svg { width: 22px; height: 22px; display: block; }
.nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.nav-mobile-toggle span { display: block; width: 24px; height: 1.5px; background: var(--canvas); transition: transform 0.2s, opacity 0.2s; transform-origin: center; }

/* ── ANNOUNCEMENT BAR ──
   Sits in normal document flow just below the fixed nav (margin-top
   pushes it past the nav at the top of the page) and scrolls away with
   the page. Four duplicate sets inside the track so the loop stays
   seamless on wide viewports — animation translates -25% (one set's
   width) before snapping back. Kraft paper texture lives on the track
   itself, so the paper appears to move with the words. */
.announcement-bar { position: relative; margin-top: var(--nav-h); background: var(--canvas); color: var(--ink); overflow: hidden; height: 48px; border-bottom: 1px solid var(--line); }
.announcement-track { display: flex; width: max-content; height: 100%; align-items: center; animation: announcement-scroll 38s linear infinite; background-color: var(--canvas); background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; background-repeat: repeat; }
.announcement-bar:hover .announcement-track { animation-play-state: paused; }
/* Touch devices: don't pause the scroll on hover — a tap should go straight
   to the link, not pause the ticker and require a second tap. */
@media (hover: none) {
  .announcement-bar:hover .announcement-track { animation-play-state: running; }
  a.announcement-item:hover { opacity: 1; }
}
.announcement-set { display: flex; gap: 44px; padding-right: 44px; align-items: center; }
.announcement-item { font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); font-weight: 500; white-space: nowrap; text-decoration: none; transition: opacity 0.15s; }
a.announcement-item { cursor: pointer; }
a.announcement-item:hover { opacity: 0.65; }
.announcement-dot { font-size: 7px; color: var(--ink); opacity: 0.45; }
@keyframes announcement-scroll { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .announcement-track { animation: none; } }

/* ── BUTTONS ── */
.btn { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 32px; display: inline-block; transition: background 0.2s, color 0.2s, transform 0.15s; cursor: pointer; border: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: var(--ink); }
.btn-primary:hover { background: #a33d18; }
.btn-action { background: var(--accent); color: var(--canvas); }
.btn-action:hover { background: #032808; }
.btn-canvas { background: var(--canvas); color: var(--ink); }
.btn-canvas:hover { background: #d4b98e; }
.btn-ink { background: var(--ink); color: var(--canvas); }
.btn-ink:hover { background: #000; }
.btn-outline-canvas { border: 1px solid var(--canvas); color: var(--canvas); background: transparent; }
.btn-outline-canvas:hover { background: var(--canvas); color: var(--ink); }
.btn-outline-ink { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline-ink:hover { background: var(--ink); color: var(--canvas); }

/* ── SHARED TYPOGRAPHY ── */
.section-label { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 40px; }
.section-title { font-family: var(--ff-head); font-size: clamp(32px, 5vw, 52px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; }
.section-link { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; white-space: nowrap; }
.section-link:hover { color: var(--ink); border-color: var(--ink); }

/* ── PAGE HEADER (inner pages) ── */
.page-header { padding-top: var(--nav-h); background: var(--ink); color: var(--canvas); }
.page-header-inner { max-width: var(--max-w); margin: 0 auto; padding: 64px var(--pad-x) 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.page-title { font-family: var(--ff-head); font-size: clamp(48px, 7vw, 96px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.0; color: var(--canvas); }
.page-title em { font-style: normal; color: var(--primary); }
.page-header-meta { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--support); padding-bottom: 12px; text-align: right; }

/* ── PRODUCT CARDS ── */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; background: transparent; }
.product-card { background-color: var(--canvas); background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; background-repeat: repeat; display: flex; flex-direction: column; cursor: pointer; transition: background-color 0.2s; -webkit-tap-highlight-color: transparent; }
/* Kill the mobile Safari tap flash on every child too */
.product-card, .product-card * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
@media (hover: hover) { .product-card:hover { background: #ddc89a; } }
.product-img { aspect-ratio: 1/1; background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; transition: background 0.2s; }

/* Grid image carousel — horizontal swipe with scroll-snap and dot indicators */
.product-img-carousel {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  z-index: 1;
  cursor: grab;
}
.product-img-carousel:active { cursor: grabbing; }
.product-img-carousel::-webkit-scrollbar { display: none; }
.product-img-slide {
  position: static !important;   /* override the base .product-img img absolute rule */
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  inset: auto !important;
}
.product-img-dots {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 5px;
  z-index: 3;
  pointer-events: none;
}
.product-img-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: background 0.2s, transform 0.2s;
}
.product-img-dot.active { background: var(--canvas); transform: scale(1.2); }
@media (hover: hover) { .product-card:hover .product-img { background: rgba(170, 148, 119, 0.22); } }
/* Position images absolutely so the box always fills its aspect-ratio
   square regardless of the source image's natural dimensions. */
.product-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-img.has-hover .product-img-primary { transition: opacity 0.5s ease-in-out; }
.product-img.has-hover .product-img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease-in-out; }
@media (hover: hover) {
  .product-img.has-hover:hover .product-img-primary { opacity: 0; }
  .product-img.has-hover:hover .product-img-hover { opacity: 1; }
}
.product-img-placeholder { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--support); }
/* Badges styled as little pieces of tape — kraft tape PNG behind the text,
   placed across the top-left corner of the image, diagonal. Overlay everything. */
/* Simple rectangle tag for NEW + BEST SELLER */
.product-badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink); color: var(--canvas);
  padding: 5px 10px;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
}
.product-badge.product-badge-best { /* same look as new */ }
.product-badge.product-badge-former { background: var(--red); color: var(--canvas); line-height: 1.2; }
@media (max-width: 640px) {
  .product-badge.product-badge-former { white-space: normal; max-width: 60%; }
}
.product-badge.product-badge-limited { top: auto; left: auto; right: 12px; bottom: 12px; background: var(--primary); color: var(--canvas); }
/* On mobile the bottom-right position clashes with the carousel dots — flip back to top-right */
@media (max-width: 560px) {
  .product-badge.product-badge-limited { top: 12px; bottom: auto; }
}
/* SOLD OUT — kept as a big stamped tape across the middle of the image.
   Desktop uses the original big stamp; mobile shrinks it so it fits the
   smaller card without cutting off. */
.product-badge.product-badge-sold-out {
  top: 50%; left: 50%;
  font-size: 30px; padding: 24px 96px 36px 96px;
  background-color: transparent;
  background-image: url('../assets/images/textures/tape-1.png');
  background-size: 100% 100%; background-repeat: no-repeat;
  color: var(--canvas);
  transform: translate(-50%, -50%) rotate(-8deg);
  filter: none;
}
@media (max-width: 640px) {
  .product-badge.product-badge-sold-out {
    font-size: 16.5px; padding: 9px 33px 13px 33px;
  }
}
.product-info { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 170px; }
.product-category { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--support); }
.product-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.product-tag { font-family: var(--ff-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--canvas); border: none; color: var(--ink); padding: 4px 9px; }
/* Category pills get a secondary accent per category, all with bold text */
.product-tag.product-tag-category { font-weight: 700; }
.product-tag.product-tag-classic      { background: var(--brown);   color: var(--canvas); border-color: var(--brown); }
.product-tag.product-tag-complex      { background: var(--steel);   color: var(--canvas); border-color: var(--steel); }
.product-tag.product-tag-experimental { background: var(--magenta); color: var(--canvas); border-color: var(--magenta); }
/* Limited Run tag — sits inline with the other product tags (Single Origin /
   Blend / Category). Primary orange so it stands apart from the neutral pills
   without breaking the row. Interim until the stamp PNG is ready. */
.product-tag.product-tag-limited { background: var(--primary); color: var(--ink); }
.product-tag.product-tag-former { background: var(--red); color: var(--canvas); }
/* PDP former-name callout under the title */
.pdp-former { display: inline-block; font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--red); color: var(--canvas); padding: 6px 12px; margin: 4px 0 12px; }
/* Brew icon row inside product cards — sized to read as small marks, not photos */
/* Each icon sits in a fixed-width slot so different intrinsic sizes still
   line up evenly across the row. Center vertically so a taller icon
   doesn't push its neighbors up. */
.brew-icons { display: flex; gap: 0; align-items: center; margin: 6px 0 2px; }
.brew-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 48px; line-height: 0; flex-shrink: 0; }
/* Uniform 40x40 box for every brew method icon — image scales to fit.
   Cold + espresso PNGs have transparent padding so they need a slightly
   larger box to appear the same visual size as the others. */
.brew-icon { width: 40px; height: 40px; object-fit: contain; display: block; flex-shrink: 0; }
.brew-icon[src*="cold"], .brew-icon[src*="espresso"] { width: 48px; height: 48px; }
.brew-icon-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--canvas); font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.06em; padding: 6px 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 5; }
.brew-icon-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); }
.brew-icon-tip strong { color: var(--primary); font-weight: 700; }
.brew-icon-wrap:hover .brew-icon-tip { opacity: 1; transform: translateX(-50%) translateY(-2px); }
/* Product card footer: price + Add to Cart button */
.product-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; }
.product-divider { width: 100%; height: 1px; background: var(--line); border: 0; margin: 0; }
.product-size-toggle { display: inline-flex; align-self: flex-start; gap: 6px; padding: 0 0 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.product-size-toggle + .product-footer { padding-top: 0; }
.product-size-btn { font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 6px 10px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.15s, color 0.15s; }
.product-size-btn.active { background: var(--ink); color: var(--canvas); }
.product-size-btn:hover:not(:disabled):not(.active) { background: rgba(18, 22, 1, 0.08); }
.product-size-btn:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.product-options-pill::after { content: ' ▾'; font-size: 8px; margin-left: 4px; opacity: 0.7; }
@media (max-width: 900px) {
  .brew-icon { height: 20px; }
  .brew-icon[src*="espresso"], .brew-icon[src*="cold"] { height: 22px; }
  .brew-icons { gap: 8px; margin: 0; }
}
.product-name { font-family: var(--ff-head); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; text-wrap: balance; overflow-wrap: break-word; word-break: normal; hyphens: none; }
/* Long single words (e.g. "espresso machine") that would wrap awkwardly get a smaller size so they stay on one line */
.product-name.is-long { font-size: 14px; }
.product-name.is-extra-long { font-size: 12px; }
.product-origin { font-family: var(--ff-mono); font-size: 10px; color: var(--support); letter-spacing: 0.04em; line-height: 1.6; }
.product-price { font-family: var(--ff-mono); font-size: 13px; color: var(--ink); }
.product-size { font-family: var(--ff-mono); font-size: 10px; color: var(--support); margin-top: 2px; }
.product-add { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--canvas); border: none; padding: 10px 16px; cursor: pointer; transition: background 0.2s; text-decoration: none; display: inline-block; }
.product-add:hover { background: var(--accent); }
.product-add.sold-out { background: var(--support); color: var(--ink); cursor: not-allowed; }

/* ── STEPS ── */
.steps { display: flex; flex-direction: column; }
.step { display: block; padding: 24px 0; border-bottom: 1px solid var(--line); }
.step:first-child { padding-top: 0; }
.step:last-child { border-bottom: none; padding-bottom: 0; }
.step-num { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--support); padding-top: 3px; }
.step-title { font-family: var(--ff-head); font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; margin-bottom: 8px; white-space: nowrap; color: var(--ink); }
.step-desc { font-size: 14px; color: var(--ink); line-height: 1.6; }

/* Steps on dark background */
.steps-dark .step { border-color: var(--line); }
.steps-dark .step-title { color: var(--canvas); }
.steps-dark .step-desc { color: var(--canvas); }

/* ── RESULTS ── */
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: 40px; }
.result-card { background: var(--ink); color: var(--canvas); padding: 40px 32px; }
.result-stat { font-family: var(--ff-head); font-size: 52px; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 10px; }
.result-label { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--support); margin-bottom: 10px; }
.result-desc { font-size: 13px; color: var(--canvas); line-height: 1.5; }

/* ── FORMS (Ink bg) ── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 10px; }
.form-label { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--canvas); font-weight: 600; }
.form-input,
.form-select,
.form-textarea { background: var(--canvas); border: 1px solid transparent; color: var(--ink); font-family: var(--ff-body); font-size: 16px; padding: 12px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; appearance: none; border-radius: 0; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(188, 77, 34, 0.18); }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink); opacity: 0.45; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23121601' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px; padding-right: 36px; background-color: var(--canvas); }
.form-select option { background: var(--canvas); color: var(--ink); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; flex-wrap: wrap; gap: 16px; }
.form-note { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--support); }

/* ── HERO ACTIONS (CTA buttons inside hero) ── */
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* ── FORM SUCCESS STATE (same-page swap after submit) ── */
.form-success { text-align: center; padding: 32px 0; margin: 0 auto; max-width: 640px; }
.form-success[hidden] { display: none; }
.form-success-mark { width: clamp(80px, 10vw, 128px); height: auto; display: block; margin: 0 auto 32px; }
.form-success-title { font-family: var(--ff-head); font-size: clamp(32px, 5vw, 56px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; color: var(--canvas); margin-bottom: 24px; }
.form-success-title em { font-style: normal; color: var(--primary); }
.form-success-body { font-size: 17px; color: var(--canvas); line-height: 1.65; max-width: 480px; margin: 0 auto 40px; }
@media (max-width: 640px) {
  .form-success { padding: 20px 16px; }
  .form-success-mark { width: 56px; margin: 0 auto 16px; }
  .form-success-title { font-size: 26px; margin-bottom: 12px; }
  .form-success-body { font-size: 14px; line-height: 1.55; margin: 0 auto 20px; }
}

/* ── TAG PILLS (who-we-work-with style) ── */
.tag-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--line); color: var(--ink); white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.tag-pill:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.tag-pill-dark { border-color: var(--support); color: var(--support); }
.tag-pill-dark:hover { background: var(--canvas); color: var(--ink); border-color: var(--canvas); }

/* ── CTA BAND (full-width section closer) ── */
.cta-band { background: var(--ink); color: var(--canvas); padding: 80px var(--pad-x); border-top: 1px solid var(--line); }
.cta-band-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band-title { font-family: var(--ff-head); font-size: clamp(28px, 4vw, 44px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; max-width: 600px; }
.cta-band-title em { font-style: normal; color: var(--primary); }
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── CHECKBOX GROUP (on dark bg) ── */
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 4px; }
.checkbox-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.checkbox-item input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: 1px solid var(--support); background: transparent; cursor: pointer; position: relative; flex-shrink: 0; }
.checkbox-item input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.checkbox-item input[type="checkbox"]:checked::after { content: '✕'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; line-height: 1; font-weight: 700; color: var(--ink); }
.checkbox-item span { font-family: var(--ff-body); font-size: 15px; color: var(--canvas); transition: color 0.2s; }
.checkbox-item:hover span { color: var(--primary); }

/* ── FOOTER ── */
/* ── FOOTER — multi-column robust layout with brand block + 4 link columns
   + newsletter signup + social icons + legal bottom bar. ── */
footer { padding: 64px var(--pad-x) 24px; border-top: 1px solid var(--ink); background: var(--ink); color: var(--canvas); }
.footer-inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { display: inline-block; }
.footer-logo img { height: auto; width: 180px; max-width: 100%; display: block; }
.footer-brand-statement { font-family: var(--ff-mono); font-size: 12px; line-height: 1.6; color: var(--canvas); opacity: 0.75; max-width: 280px; }
.footer-address { font-family: var(--ff-mono); font-size: 11px; line-height: 1.7; color: var(--canvas); opacity: 0.6; margin-top: 4px; }
.footer-address strong { display: block; color: var(--canvas); opacity: 1; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.footer-col-label { font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; }
.footer-col-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col-links a { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--canvas); text-decoration: none; opacity: 0.8; transition: opacity 0.2s, color 0.2s; }
.footer-col-links a:hover { opacity: 1; color: var(--primary); }
.footer-newsletter { display: flex; flex-direction: column; gap: 10px; }
.footer-newsletter-thanks { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--canvas); padding: 8px 0; margin: 0; }
.footer-newsletter-sub { font-family: var(--ff-mono); font-size: 11px; line-height: 1.55; color: var(--canvas); opacity: 0.7; margin: 0 0 4px; }
.footer-newsletter-form { display: flex; gap: 0; }
.footer-newsletter-input { flex: 1; background: rgba(229, 204, 168, 0.08); border: 1px solid rgba(229, 204, 168, 0.25); color: var(--canvas); font-family: var(--ff-mono); font-size: 12px; padding: 11px 12px; outline: none; min-width: 0; }
.footer-newsletter-input::placeholder { color: var(--canvas); opacity: 0.45; }
.footer-newsletter-input:focus { border-color: var(--primary); }
.footer-newsletter-btn { background: var(--primary); color: var(--ink); border: 1px solid var(--primary); font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 18px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.footer-newsletter-btn:hover { background: var(--canvas); color: var(--ink); border-color: var(--canvas); }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(229, 204, 168, 0.18); gap: 24px; flex-wrap: wrap; }
.footer-social { display: flex; gap: 14px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--canvas); opacity: 0.7; transition: opacity 0.2s, color 0.2s; }
.footer-social a:hover { opacity: 1; color: var(--primary); }
.footer-social svg { width: 18px; height: 18px; }
.footer-legal { display: flex; gap: 18px; align-items: center; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--canvas); opacity: 0.6; flex-wrap: wrap; }
.footer-legal a { color: var(--canvas); text-decoration: none; transition: color 0.2s, opacity 0.2s; }
.footer-legal a:hover { color: var(--primary); opacity: 1; }
.footer-copy { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--canvas); opacity: 0.55; }

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-newsletter { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 640px) {
  /* Mobile footer padding + reorder applies to every footer. Only the
     .footer-paper variant flips to kraft on mobile — base (ink) footers
     stay ink so alternation with the section above holds on phones too. */
  footer { padding: 32px 24px 20px; }
  footer.footer-paper {
    background-color: var(--canvas);
    background-image: url('../assets/images/textures/kraft-paper.jpg');
    background-size: 1200px; background-repeat: repeat;
    color: var(--ink);
    border-top: 1px solid rgba(18, 22, 1, 0.15);
  }
  .footer-inner { gap: 16px; }
  .footer-top { grid-template-columns: 1fr; gap: 0; }

  /* Reorder using CSS order — HTML source order stays intact for desktop.
     Newsletter first, then the 3 accordion cols, then brand block last. */
  /* Structural mobile rules apply to both variants. Colors default to
     canvas-on-ink (base footer) — .footer-paper overrides to ink below. */
  .footer-newsletter { order: 1; grid-column: auto; padding: 0 0 24px; margin-bottom: 8px; max-width: none; border-bottom: 2px solid rgba(229, 204, 168, 0.2); }
  .footer-top > .footer-col:nth-child(2) { order: 2; }  /* Shop */
  .footer-top > .footer-col:nth-child(3) { order: 3; }  /* Services */
  .footer-top > .footer-col:nth-child(4) { order: 4; }  /* Customer */
  .footer-brand { order: 5; grid-column: auto; padding: 20px 0 4px; margin-top: 4px; gap: 12px; }

  /* Accordion rows — canvas hairline for base ink footer */
  .footer-col { border-bottom: 1px solid rgba(229, 204, 168, 0.18); }
  .footer-top > .footer-col:nth-child(4) { border-bottom: none; }
  .footer-col-label { position: relative; margin: 0; padding: 14px 32px 14px 0; cursor: pointer; user-select: none; font-family: var(--ff-head); font-size: 18px; font-weight: 700; letter-spacing: -0.005em; color: var(--canvas); }
  .footer-col-label::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--ff-mono); font-size: 20px; font-weight: 400; color: var(--canvas); opacity: 0.7; transition: transform 0.2s; }
  .footer-col.is-open .footer-col-label::after { content: '−'; }
  .footer-col-links { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; padding: 0; gap: 12px; }
  .footer-col.is-open .footer-col-links { max-height: 400px; padding: 4px 0 14px; }
  .footer-col-links a { font-size: 14px; opacity: 0.85; color: var(--canvas); font-weight: 500; }

  /* Newsletter (structural only; colors handled per-variant below) */
  .footer-newsletter .footer-col-label { padding: 0; cursor: default; }
  .footer-newsletter .footer-col-label::after { display: none; }
  .footer-newsletter-sub { font-size: 13px; opacity: 1; font-weight: 500; }
  .footer-newsletter-input { font-size: 13px; }

  /* Social / legal / copy — structural. Colors live under the variant blocks. */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; }
  .footer-legal { font-size: 11px; }
  .footer-copy { font-size: 11px; }

  /* --- PAPER VARIANT COLORS (only when .footer-paper is set) --- */
  footer.footer-paper .footer-newsletter-sub,
  footer.footer-paper .footer-brand-statement,
  footer.footer-paper .footer-address,
  footer.footer-paper .footer-address strong,
  footer.footer-paper .footer-top .footer-col-label,
  footer.footer-paper .footer-col-links a,
  footer.footer-paper .footer-social a,
  footer.footer-paper .footer-legal,
  footer.footer-paper .footer-legal a,
  footer.footer-paper .footer-copy { color: var(--ink); }
  footer.footer-paper .footer-col { border-bottom-color: rgba(18, 22, 1, 0.15); }
  footer.footer-paper .footer-newsletter { border-bottom-color: rgba(18, 22, 1, 0.2); }
  footer.footer-paper .footer-brand-statement { font-size: 13px; font-weight: 500; }
  footer.footer-paper .footer-address { font-size: 12px; font-weight: 500; }
  footer.footer-paper .footer-newsletter-input { background: rgba(18, 22, 1, 0.06); border-color: rgba(18, 22, 1, 0.25); color: var(--ink); }
  footer.footer-paper .footer-newsletter-input::placeholder { color: var(--ink); opacity: 0.5; }
  footer.footer-paper .footer-newsletter-btn { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
  footer.footer-paper .footer-logo img { filter: brightness(0); }
  footer.footer-paper .footer-social a { opacity: 0.8; }
  footer.footer-paper .footer-social a:hover { color: var(--primary); opacity: 1; }
  footer.footer-paper .footer-legal { opacity: 0.7; }
  footer.footer-paper .footer-copy { opacity: 0.6; }
  footer.footer-paper .footer-bottom { border-top-color: rgba(18, 22, 1, 0.15); }
  footer.footer-paper .footer-col { border-bottom-color: rgba(18, 22, 1, 0.15); }
  footer.footer-paper .footer-newsletter { border-bottom-color: rgba(18, 22, 1, 0.2); }
  footer.footer-paper .footer-brand { border-top-color: rgba(18, 22, 1, 0.15); }
  footer.footer-paper .footer-col-label::after { color: var(--ink); }
}

/* PAPER VARIANT — used on pages where the section directly above the footer
   is INK (homepage contact, education whats-next, repairs request) to create
   visual separation. Footer flips to canvas + paper texture with ink text. */
footer.footer-paper { background-color: var(--canvas); background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; background-repeat: repeat; color: var(--ink); border-top-color: rgba(18, 22, 1, 0.18); }
footer.footer-paper .footer-logo img { content: url('../assets/images/logos/Wordmark_Ink.png'); }
footer.footer-paper .footer-brand-statement,
footer.footer-paper .footer-address,
footer.footer-paper .footer-newsletter-sub { color: var(--ink); }
footer.footer-paper .footer-brand-statement { opacity: 1; font-weight: 600; }
footer.footer-paper .footer-address { opacity: 1; font-weight: 600; }
footer.footer-paper .footer-address strong { color: var(--ink); opacity: 1; font-weight: 700; }
footer.footer-paper .footer-newsletter-sub { opacity: 1; font-weight: 600; }
footer.footer-paper .footer-newsletter-thanks { color: var(--ink); font-weight: 600; }
footer.footer-paper .footer-col-label { color: var(--primary); font-weight: 700; }
footer.footer-paper .footer-col-links a { color: var(--ink); opacity: 1; font-weight: 600; }
footer.footer-paper .footer-legal { color: var(--ink); opacity: 1; font-weight: 600; }
footer.footer-paper .footer-legal a { color: var(--ink); font-weight: 600; }
footer.footer-paper .footer-copy { color: var(--ink); opacity: 1; font-weight: 600; }
footer.footer-paper .footer-social a { color: var(--ink); opacity: 1; }
footer.footer-paper .footer-bottom { border-top-color: rgba(18, 22, 1, 0.25); }
footer.footer-paper .footer-col-links a:hover { color: var(--primary); opacity: 1; }
footer.footer-paper .footer-newsletter-input { background: rgba(18, 22, 1, 0.06); border-color: rgba(18, 22, 1, 0.2); color: var(--ink); }
footer.footer-paper .footer-newsletter-input::placeholder { color: var(--ink); opacity: 0.4; }
footer.footer-paper .footer-newsletter-input:focus { border-color: var(--primary); }
footer.footer-paper .footer-newsletter-btn { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
footer.footer-paper .footer-newsletter-btn:hover { background: var(--primary); color: var(--ink); border-color: var(--primary); }
footer.footer-paper .footer-bottom { border-top-color: rgba(18, 22, 1, 0.18); }
footer.footer-paper .footer-social a { color: var(--ink); }
footer.footer-paper .footer-social a:hover { color: var(--primary); }
footer.footer-paper .footer-copy,
footer.footer-paper .footer-legal { color: var(--ink); }
footer.footer-paper .footer-copy { opacity: 0.55; }
footer.footer-paper .footer-legal { opacity: 0.7; }
footer.footer-paper .footer-legal a { color: var(--ink); }
footer.footer-paper .footer-legal a:hover { color: var(--primary); opacity: 1; }

/* Narrow the link cluster before it collides with the wordmark. */
@media (max-width: 1240px) {
  .nav-links { gap: 14px; font-size: 12px; }
}

/* ── NAV COLLAPSE — hamburger kicks in earlier than page-layout breakpoint
   because the wordmark + 7 links + cart + CTA need room. */
@media (max-width: 1100px) {
  .nav-links, .nav-cta { display: none; }
  /* Mobile layout: hamburger LEFT, logo CENTERED, profile + cart on the RIGHT.
     Nav stays position: fixed (from base rule) so the announcement bar can
     sit flush under it; position:fixed is also a valid containing block for
     the absolutely-positioned logo below. */
  .nav-mobile-toggle { order: 0; margin: 0; }
  .nav-logo {
    order: 1;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .nav-logo img { height: 14px !important; }
  /* Right cluster positioned absolutely to guarantee they sit flush against
     the right edge of the viewport (mirroring the hamburger on the left).
     Profile sits at the cart's position when the cart is hidden, and slides
     left to make room when the cart appears. */
  .nav-account {
    display: inline-flex !important;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    margin: 0;
  }
  nav:has(.nav-cart.has-items) .nav-account { right: 60px; }
  .nav-cart {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    margin: 0;
  }
  /* Menu account link no longer needed since the profile icon is back */
  .nav-links-account { display: none !important; }
  .nav-mobile-toggle { display: flex; }
  /* MOBILE MENU OPEN — hamburger toggles `nav-open` class (see js/nav.js) */
  nav.nav-open { background: var(--ink); }
  /* Mobile menu hangs below the nav bar as an overlay so the nav itself
     stays at its original height. */
  nav.nav-open .nav-links { position: absolute; top: 100%; left: 0; right: 0; transform: none; width: 100%; display: flex; flex-direction: column; padding: 14px var(--pad-x) 28px; gap: 0; list-style: none; align-items: stretch; background: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
  nav.nav-open .nav-links > li { padding: 0; border-bottom: 1px solid rgba(229, 204, 168, 0.14); }
  nav.nav-open .nav-links > li:last-child { border-bottom: none; }
  nav.nav-open .nav-links > li > a { display: block; padding: 14px 0; font-size: 20px; color: var(--canvas); -webkit-tap-highlight-color: rgba(229, 204, 168, 0.15); transition: background 0.15s; }
  nav.nav-open .nav-links > li > a:active { background: rgba(229, 204, 168, 0.08); }
  nav.nav-open .nav-dropdown { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; padding: 0 0 14px; margin: 0; gap: 0; border: none; }
  nav.nav-open .nav-dropdown li { border: none; padding: 0; }
  nav.nav-open .nav-dropdown a { display: block; font-size: 14px; padding: 10px 0; color: var(--canvas); text-align: left; }
  nav.nav-open .nav-has-dropdown > a::after { display: none; }
  /* Keep nav-cta hidden on mobile even when menu is open — it doesn't fit
     the overlay menu structure and is reachable from the footer + hero. */
  nav.nav-open .nav-cta { display: none; }
  nav.nav-open .nav-mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.nav-open .nav-mobile-toggle span:nth-child(2) { opacity: 0; }
  nav.nav-open .nav-mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── RESPONSIVE — shared breakpoints ── */
@media (max-width: 900px) {
  :root { --pad-x: 24px; }
  nav { padding: 0 24px; }
  .nav-logo img { height: 20px; }
  .announcement-bar { height: 34px; }
  .announcement-item { font-size: 10px; letter-spacing: 0.1em; }
  .page-header-inner { flex-direction: column; align-items: flex-start; padding: 28px 24px 0; gap: 16px; }
  .page-title { font-size: 40px; }
  .page-header-meta { text-align: left; font-size: 10px; padding-bottom: 6px; }
  .filter-btn { padding: 12px 18px; font-size: 9px; }
  .product-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 56px 24px; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  footer { padding: 32px 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-links { flex-wrap: wrap; gap: 16px; }
}

/* ── CART SLIDE-OUT PANEL ── */
.cart-scrim { position: fixed; inset: 0; background: rgba(18, 22, 1, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; z-index: 2000; }
.cart-scrim.open { opacity: 1; visibility: visible; }
.cart-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--ink); color: var(--canvas); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s ease; z-index: 2001; box-shadow: -8px 0 32px rgba(0,0,0,0.4); }
.cart-panel.open { transform: translateX(0); }
.cart-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.cart-panel-title { font-family: var(--ff-head); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--canvas); }
.cart-panel-close { background: none; border: none; color: var(--canvas); font-size: 30px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color 0.2s; }
.cart-panel-close:hover { color: var(--primary); }
.cart-panel-body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 8px 28px; background-color: var(--canvas); background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; background-repeat: repeat; color: var(--ink); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cart-empty { padding: 60px 0; text-align: center; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); opacity: 0.55; }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(18, 22, 1, 0.18); align-items: start; }
.cart-line:last-child { border-bottom: none; }
.cart-line-img { width: 72px; height: 72px; background: rgba(18, 22, 1, 0.08); overflow: hidden; }
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-line-name { font-family: var(--ff-head); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; color: var(--ink); line-height: 1.2; }
.cart-line-variant { font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); opacity: 0.85; }
.cart-line-sub-tag { display: inline-block; margin-top: 4px; font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--primary); color: var(--ink); padding: 2px 6px; align-self: flex-start; width: fit-content; }
.cart-line-qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cart-line-dec, .cart-line-inc { width: 22px; height: 22px; background: none; border: 1px solid var(--ink); color: var(--ink); font-family: var(--ff-mono); font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.cart-line-dec:hover, .cart-line-inc:hover { background: var(--ink); color: var(--canvas); }
.cart-line-count { font-family: var(--ff-mono); font-size: 11px; min-width: 22px; text-align: center; color: var(--ink); }
.cart-line-remove { background: none; border: none; color: var(--ink); opacity: 0.55; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0 0 0 12px; transition: color 0.15s, opacity 0.15s; }
.cart-line-remove:hover { color: var(--primary); opacity: 1; }
.cart-line-price { font-family: var(--ff-mono); font-size: 12px; color: var(--ink); font-weight: 600; }

/* Bundle group in cart — header + inset list of bundled items */
.cart-bundle { padding: 18px 0; border-bottom: 1px solid rgba(18, 22, 1, 0.18); }
.cart-bundle-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 0 0 12px; }
.cart-bundle-name { font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink); color: var(--canvas); padding: 5px 10px; }
.cart-bundle-savings { margin-left: auto; font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--primary); color: var(--ink); padding: 5px 10px; box-shadow: 0 4px 12px -4px rgba(188, 77, 34, 0.4); }
.cart-bundle-items { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: rgba(18, 22, 1, 0.05); border-left: 2px solid var(--primary); }
.cart-bundle-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.cart-bundle-item-img { width: 44px; height: 44px; background: rgba(18, 22, 1, 0.08); overflow: hidden; }
.cart-bundle-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-bundle-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-bundle-item-name { font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-bundle-item-detail { font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); opacity: 0.85; }
.cart-bundle-item-remove { padding: 0 4px !important; font-size: 16px !important; line-height: 1; }
.cart-bundle-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 0 0; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink); }
.cart-bundle-count { opacity: 0.65; text-transform: uppercase; }
.cart-bundle-subtotal { font-weight: 700; font-size: 12px; margin-left: auto; }
/* Bundle action row — Edit + Remove side by side, always visible */
.cart-bundle-actions { display: flex; gap: 8px; margin-top: 10px; }
.cart-bundle-edit { flex: 1; text-align: center; font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--ink); color: var(--canvas); padding: 8px 10px; text-decoration: none; transition: background 0.15s, color 0.15s; }
.cart-bundle-edit:hover { background: var(--primary); color: var(--ink); }
.cart-bundle-remove-all { flex: 1; text-align: center; font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid rgba(18, 22, 1, 0.3); padding: 8px 10px; cursor: pointer; transition: opacity 0.15s, color 0.15s, border-color 0.15s; }
.cart-bundle-remove-all:hover { opacity: 1; color: var(--red); }
.cart-bundle.is-incomplete { border-left: 3px solid var(--red); padding-left: 10px; }
.cart-bundle-warning { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 12px; background: rgba(211, 5, 0, 0.08); border-left: 2px solid var(--red); color: var(--ink); font-family: var(--ff-mono); font-size: 10px; line-height: 1.45; }
.cart-bundle-warning-text { margin: 0; flex: 1; min-width: 0; }
.cart-bundle-warning-btn { font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--ink); color: var(--canvas); padding: 6px 10px; text-decoration: none; transition: background 0.15s, color 0.15s; }
.cart-bundle-warning-btn:hover { background: var(--red); color: var(--canvas); }
.cart-panel-footer { padding: 12px 28px 18px; border-top: 2px solid rgba(18, 22, 1, 0.22); background-color: #d4b58c; background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; background-repeat: repeat; color: var(--ink); box-shadow: 0 -4px 12px -6px rgba(18, 22, 1, 0.15); }

/* Cart drawer cross-sell — Roaster's Choice 4oz sample upsell */
.cart-crosssell { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(18, 22, 1, 0.12); }
.cart-crosssell[hidden] { display: none; }
.cart-crosssell-label { margin: 0 0 10px; font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); opacity: 1; }
.cart-crosssell-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(18, 22, 1, 0.04); border: 1px solid rgba(18, 22, 1, 0.18); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.cart-crosssell-card:hover { background: rgba(18, 22, 1, 0.08); border-color: rgba(18, 22, 1, 0.32); }
.cart-crosssell-img { width: 48px; height: 48px; flex-shrink: 0; background: rgba(18, 22, 1, 0.08); overflow: hidden; }
.cart-crosssell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-crosssell-info { flex: 1; min-width: 0; }
.cart-crosssell-name { margin: 0; font-family: var(--ff-head); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; color: var(--ink); line-height: 1.15; }
.cart-crosssell-sub { margin: 2px 0 0; font-size: 11px; line-height: 1.35; color: var(--ink); opacity: 0.7; }
.cart-crosssell-price { margin: 4px 0 0; font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.cart-crosssell-actions { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.cart-crosssell-grind { flex: 1; min-width: 0; font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 9px 12px; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: 0; outline: none; }
.cart-crosssell-add { flex-shrink: 0; font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); padding: 9px 14px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.cart-crosssell-add:hover { background: var(--primary); border-color: var(--primary); color: var(--ink); }
.cart-crosssell-add:disabled { opacity: 0.6; cursor: default; }

.cart-shipping-meter { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(18, 22, 1, 0.12); }
.cart-shipping-msg { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink); margin: 0 0 8px; }
.cart-shipping-msg strong { font-weight: 700; }
.cart-shipping-meter[data-state="unlocked"] .cart-shipping-msg { color: var(--primary); font-weight: 700; }
.cart-shipping-meter[data-state="empty"] .cart-shipping-msg { opacity: 0.55; }
.cart-shipping-bar { height: 4px; background: rgba(18, 22, 1, 0.12); overflow: hidden; }
.cart-shipping-fill { display: block; height: 100%; background: var(--primary); width: 0%; transition: width 0.3s ease; }
.cart-shipping-meter[data-state="unlocked"] .cart-shipping-fill { background: var(--primary); }
.cart-panel-subtotal { display: flex; justify-content: space-between; font-family: var(--ff-head); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.cart-panel-tax-note { margin-top: 6px; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); opacity: 0.6; }
.cart-panel-checkout { margin-top: 10px; width: 100%; padding: 12px 20px; background: var(--primary); color: var(--ink); border: none; font-family: var(--ff-head); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background 0.2s; }

/* Grind picker modal (shown when cross-sell "Add" is tapped) */
.cart-grind-scrim { position: fixed; inset: 0; background: rgba(18, 22, 1, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; z-index: 2200; }
.cart-grind-scrim.open { opacity: 1; visibility: visible; }
.cart-grind-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -45%); width: min(360px, calc(100% - 32px)); background: var(--canvas); background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; padding: 24px 24px 20px; opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0.25s; z-index: 2201; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); }
.cart-grind-modal.open { opacity: 1; transform: translate(-50%, -50%); visibility: visible; }
.cart-grind-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; padding: 4px 8px; }
.cart-grind-title { font-family: var(--ff-head); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 4px; }
.cart-grind-sub { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); opacity: 0.7; margin: 0 0 18px; }
.cart-grind-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cart-grind-opt { font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 10px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.15s, color 0.15s; }
.cart-grind-opt:hover:not(:disabled) { background: var(--ink); color: var(--canvas); }
.cart-grind-opt:disabled { opacity: 0.6; cursor: not-allowed; }
.cart-panel-checkout:hover:not(:disabled) { background: #a33d18; }
.cart-panel-checkout:disabled { opacity: 0.5; cursor: not-allowed; }
body.cart-panel-open { overflow: hidden; }

/* ── VARIANT PICKER MODAL ── */
.variant-modal-scrim { position: fixed; inset: 0; background: rgba(18, 22, 1, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; z-index: 2100; }
.variant-modal-scrim.open { opacity: 1; visibility: visible; }
.variant-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%); width: min(440px, calc(100% - 32px)); max-height: 80vh; background: var(--ink); color: var(--canvas); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0.25s; z-index: 2101; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); }
.variant-modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.variant-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.variant-modal-title { font-family: var(--ff-head); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--canvas); line-height: 1.2; padding-right: 12px; }
.variant-modal-close { background: none; border: none; color: var(--canvas); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color 0.2s; }
.variant-modal-close:hover { color: var(--primary); }
.variant-modal-body { overflow-y: auto; background-color: var(--canvas); background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; background-repeat: repeat; }

/* Coffee quick-add modal body — size + grind pills, add CTA */
.coffee-quick-modal { width: min(440px, calc(100% - 32px)); }
.coffee-quick-body { overflow-y: auto; padding: 22px 24px 24px; background-color: var(--canvas); background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; background-repeat: repeat; color: var(--ink); display: flex; flex-direction: column; gap: 18px; }
.coffee-quick-desc { font-size: 14px; line-height: 1.55; color: var(--ink); }
.coffee-quick-desc p + p { margin-top: 10px; }
.coffee-quick-top { display: flex; align-items: center; gap: 16px; }
.coffee-quick-img { width: 84px; height: 84px; flex-shrink: 0; background: rgba(18, 22, 1, 0.08); overflow: hidden; }
.coffee-quick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coffee-quick-info { flex: 1; }
.coffee-quick-price { font-family: var(--ff-mono); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.coffee-quick-row { display: flex; flex-direction: column; gap: 8px; }
.coffee-quick-label { font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); opacity: 0.7; }
.coffee-quick-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.coffee-quick-pill { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; padding: 8px 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.15s, color 0.15s; }
.coffee-quick-pill.active { background: var(--ink); color: var(--canvas); }
.coffee-quick-pill:hover:not(.active):not(:disabled) { background: rgba(18, 22, 1, 0.08); }
.coffee-quick-pill:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.coffee-quick-cta { margin-top: 4px; font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: var(--primary); color: var(--ink); border: none; padding: 14px 18px; cursor: pointer; transition: background 0.2s; }
.coffee-quick-cta:hover:not(:disabled) { background: var(--ink); color: var(--canvas); }
.coffee-quick-cta:disabled { opacity: 0.5; cursor: not-allowed; background: rgba(18, 22, 1, 0.15); color: var(--ink); }
.coffee-quick-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.coffee-quick-guide-btn { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: none; border: none; border-bottom: 1px solid var(--ink); cursor: pointer; padding: 0 0 2px; }
.coffee-quick-guide-btn:hover { color: var(--primary); border-color: var(--primary); }

/* Grind Guide modal — accessible from the coffee quick-add */
.grind-guide-modal { width: min(540px, calc(100% - 32px)); z-index: 2201; }
.grind-guide-modal + .variant-modal-scrim { z-index: 2200; }
.grind-guide-body { overflow-y: auto; padding: 22px 24px; background-color: var(--canvas); background-image: url('../assets/images/textures/kraft-paper.jpg'); background-size: 1200px; background-repeat: repeat; color: var(--ink); display: flex; flex-direction: column; gap: 14px; max-height: 70vh; }
.grind-guide-item { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: center; padding: 12px; background: rgba(18, 22, 1, 0.06); }
.grind-guide-img { aspect-ratio: 1 / 1; background: rgba(229, 204, 168, 0.5); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.grind-guide-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(2.8); display: block; }
.grind-guide-name { font-family: var(--ff-head); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; color: var(--ink); margin-bottom: 4px; }
.grind-guide-desc { font-family: var(--ff-mono); font-size: 12px; line-height: 1.55; color: var(--ink); }
.variant-option { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 24px; background: none; border: none; border-bottom: 1px solid rgba(18, 22, 1, 0.14); cursor: pointer; font-family: var(--ff-mono); transition: background 0.15s; }
.variant-option:last-child { border-bottom: none; }
.variant-option:hover:not(:disabled) { background: rgba(18, 22, 1, 0.08); }
.variant-option:disabled { opacity: 0.4; cursor: not-allowed; }
.variant-option-title { font-size: 11px; letter-spacing: 0.08em; color: var(--ink); text-align: left; }
.variant-option:disabled .variant-option-title { text-decoration: line-through; }
.variant-option-price { font-size: 12px; color: var(--ink); font-weight: 600; }