:root {
  --bg: #ffffff;
  --bg-header: #000000;
  --border: #e5e5e5;
  --text: #757575;
  --text-strong: #000000;
  --text-title: #111111;
  --accent: #ff9113;
  --card-shadow: 0 2px 5px rgba(0, 0, 0, 0.133);
  --max-width: 1200px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header */

header.site-header { background: var(--bg-header); }

.logobar {
  padding: 2.5rem 1.5rem 0.8rem;
  text-align: center;
}
.logobar img { width: 260px; max-width: 60%; height: auto; }

/* Same .currency-selector markup as the footer's, just recolored for the
   dark header background — .currency-panel stays a white popup either way,
   so only the trigger (text + caret, both via currentColor) needs it. */
.header-currency-selector { margin-top: 0.3rem; display: flex; justify-content: center; }
.header-currency-selector .currency-selector { margin-bottom: 0; }
.header-currency-selector .currency-trigger { color: #fff; }
.header-currency-selector .currency-trigger:hover { color: var(--accent); }
/* Footer's .currency-panel opens upward (bottom: 100%), which suits a
   trigger near the bottom of the page — flipped to open downward here since
   this trigger sits at the very top. */
.header-currency-selector .currency-panel { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 0.5rem; }

nav.main-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
nav.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}
nav.main-nav ul a {
  display: block;
  padding: 1.1rem 0.6rem;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border-top: 3px solid transparent;
}
nav.main-nav ul a:hover { text-decoration: none; color: var(--accent); }
nav.main-nav ul a.active {
  color: var(--accent);
  border-top-color: var(--accent);
}

.desktop-cart-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-strong);
  flex-shrink: 0;
  padding-left: 1rem;
}
.desktop-cart-link:hover { text-decoration: none; color: var(--accent); }

.mobile-nav-bar { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-strong);
  font-size: 1.5rem;
  line-height: 1;
  text-align: left;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
}

.mobile-cart-link {
  display: none;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-strong);
  padding: 0.7rem 1.5rem;
}
.mobile-cart-link:hover { text-decoration: none; color: var(--accent); }

.social-top { display: none; }
.social-top a { color: var(--accent); }

@media (max-width: 700px) {
  .nav-toggle { display: block; }

  .mobile-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mobile-cart-link { display: flex; }
  .desktop-cart-link { display: none; }

  .nav-inner { display: block; padding: 0; }

  nav.main-nav ul {
    display: none;
    flex-direction: column;
    padding: 0;
  }
  nav.main-nav.nav-open ul {
    display: flex;
  }
  nav.main-nav ul a {
    font-size: 12px;
    padding: 0.85rem 1.5rem;
    border-top: none;
    border-left: 3px solid transparent;
  }
  nav.main-nav ul a.active {
    border-top-color: transparent;
    border-left-color: var(--accent);
  }

  .social-top {
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    padding: 0.6rem 0;
    background: var(--bg);
  }
}

.cart-link { color: var(--text-strong); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.085em; }
.cart-count {
  background: var(--accent);
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 0 0.4rem;
  margin-left: 0.3rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- content */

main {
  max-width: var(--max-width);
  margin: 1.5rem auto 4rem;
  padding: 1.5rem 3.5rem 3rem;
  min-height: 60vh;
  background: var(--bg);
  border-radius: 4px;
  box-shadow: var(--card-shadow);
}
@media (max-width: 700px) { main { padding: 1rem 1.25rem 2rem; } }
main.has-page-title { padding-top: 0.5rem; }
@media (max-width: 700px) { main.has-page-title { padding-top: 0.5rem; } }

h1, h2, h3 { font-weight: 800; color: var(--text-strong); letter-spacing: -0.01em; }
h1 { font-size: 3.6rem; text-align: center; margin-bottom: 0.5rem; text-transform: uppercase; }
h1.page-title-plain { font-size: 1.386rem; text-align: left; font-weight: 800; margin-top: 0; text-transform: uppercase; }
h2 { font-size: 1.6rem; font-weight: 800; text-transform: uppercase; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: normal; }

.lede { color: var(--text); max-width: 70ch; margin: 0 auto 2rem; text-align: center; }

/* ---------------------------------------------------------------- footer */

footer.site-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 2.5rem 0 3rem; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; text-align: center; }
/* A minimal text trigger ("AUD $") that opens a small popup panel listing
   "CODE SYMBOL | Region" options — modeled on eatingtools.com's footer
   currency selector, adapted to this site's light footer/typography. */
.currency-selector { position: relative; display: inline-block; margin-bottom: 1.5rem; }
.currency-trigger {
  background: none; border: none; cursor: pointer; padding: 0.3rem 0; font-family: var(--font);
  font-size: 0.8rem; color: var(--text-strong); display: inline-flex; align-items: center; gap: 0.35rem;
}
.currency-trigger:hover { color: var(--accent); }
.currency-caret { display: inline-flex; align-items: center; }
.currency-panel {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem;
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); max-height: 260px; overflow-y: auto;
  min-width: 220px; z-index: 50; text-align: left;
}
.currency-option {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 0.5rem 0.9rem; font-size: 0.8rem; color: var(--text-strong); font-family: var(--font); white-space: nowrap;
}
.currency-option:hover { background: #f7f7f7; color: var(--accent); }
.currency-option.active { font-weight: 700; color: var(--accent); }
.social-links { display: flex; justify-content: center; gap: 1.2rem; margin-bottom: 1rem; }
.social-links a { color: var(--accent); font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.social-links a .icon { display: inline-flex; }
.social-links a .label { display: none; }
.footer-copy { color: #7a7a7a; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }

/* ---------------------------------------------------------------- products */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2.2rem;
  margin-top: 1.5rem;
}
.product-card {
  background: var(--bg);
  border-radius: 4px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #f2f2f2;
}
.product-card .card-body { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.product-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-title); letter-spacing: -0.02em; margin: 0; }
.product-card .price { color: var(--accent); font-weight: 700; margin-top: auto; font-size: 0.95rem; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 3px;
  padding: 0.7rem 1.3rem;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: #e5820c; text-decoration: none; }
.btn.secondary {
  background: transparent;
  color: var(--text-strong);
  border: 1px solid var(--border);
}
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; text-align: left; }
@media (max-width: 800px) { .product-detail { grid-template-columns: 1fr; } }
.product-gallery img.main { width: 100%; border-radius: 4px; aspect-ratio: 3/4; object-fit: cover; box-shadow: var(--card-shadow); cursor: zoom-in; }
.product-gallery .thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.product-gallery .thumbs img { width: 70px; height: 70px; object-fit: cover; border-radius: 3px; cursor: pointer; border: 2px solid transparent; }
.product-gallery .thumbs img.active { border-color: var(--accent); }

/* Click the main image to inspect it up close — desktop pans by moving the
   mouse (like a magnifier following the cursor), mobile pans by dragging a
   finger, mirroring the hover-zoom + full-screen-pan pattern the old site
   used (WooCommerce's zoom plugin + PhotoSwipe) without needing either
   library here. */
.image-zoom-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center; justify-content: center;
}
.image-zoom-overlay.open { display: flex; }
.image-zoom-viewport { width: 100%; height: 100%; overflow: hidden; position: relative; touch-action: none; cursor: zoom-out; }
.image-zoom-viewport img {
  position: absolute; max-width: none; max-height: none;
  user-select: none; -webkit-user-drag: none;
}
.image-zoom-close {
  position: fixed; top: 1rem; right: 1.2rem; z-index: 1001;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.image-zoom-close:hover { background: rgba(255, 255, 255, 0.3); }
.product-info h1 { text-align: left; font-size: 1.386rem; font-weight: 700; color: var(--text-title); }
.product-info .price { color: var(--accent); font-weight: 700; }
.stock-note { color: var(--text); font-size: 0.85rem; margin: -0.5rem 0 1rem; }
.stock-note.out-of-stock {
  display: inline-block;
  background: #fdeceb; color: #a33; border: 1px solid #e0a3a3;
  font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem; border-radius: 3px; margin: 0 0 1rem;
}
.product-description p { color: var(--text); }

#batch-availability { text-align: center; margin-top: 2rem; }
#batch-availability .stock-note { margin: 0 0 0.75rem; }

.related-products { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.related-products h2 { text-align: center; margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------- forms */

form.stacked { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; text-align: left; margin: 0 auto; }
label { font-size: 0.85rem; color: var(--text); display: block; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; }
input, textarea, select {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-strong);
  border-radius: 3px;
  padding: 0.6rem 0.7rem;
  font-size: 0.95rem;
  font-family: var(--font);
}
input:focus, textarea:focus, select:focus { outline: 1px solid var(--accent); }

.cart-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; text-align: left; }
.cart-table th, .cart-table td { text-align: left; padding: 0.7rem; border-bottom: 1px solid var(--border); }
.cart-table img { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; }
/* Checkout order summary only — a small badge over the thumbnail instead
   of "name × qty" text (only shown for qty > 1; see thumbWithQtyBadgeHtml). */
.thumb-with-qty { position: relative; display: inline-block; line-height: 0; }
.qty-badge {
  position: absolute; top: -6px; right: -6px; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem;
  background: var(--accent); color: #fff; border: 2px solid #fff; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cart-table .qty-cell { display: flex; align-items: center; gap: 0.6rem; }
.qty-stepper { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.5rem; }
.qty-stepper button {
  background: none; border: none; font-size: 1.1rem; line-height: 1; width: 1.4rem; height: 1.4rem;
  cursor: pointer; color: var(--text-strong);
}
.qty-stepper button:disabled { color: var(--border); cursor: not-allowed; }
.qty-stepper button:not(:disabled):hover { color: var(--accent); }
.qty-stepper .qty-value { min-width: 1.2rem; text-align: center; color: var(--text-strong); }

/* Product page's own quantity picker: a plain number input on desktop
   (browsers show spinner arrows there), the same +/- stepper widget the
   cart uses on mobile (a bare number input there shows no spinner, just
   pops the numeric keyboard). See product.js's wireQtyStepperControls. */
.qty-stepper-mobile { display: none; }
@media (max-width: 700px) {
  .qty-input-desktop { display: none; }
  .qty-stepper-mobile { display: inline-flex; }
}
.cart-table .remove-btn {
  background: none; border: none; padding: 0.2rem; cursor: pointer; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-table .remove-btn:hover { color: var(--accent); }
.cart-total { text-align: right; font-size: 1.2rem; margin-top: 1rem; color: var(--text-strong); }
.cart-total strong { color: var(--accent); }
.currency-prefix { font-size: 0.65em; font-weight: 400; letter-spacing: 0.04em; }

@media (max-width: 700px) {
  /* Peaberry-style stacked row: image on the left, name/price/qty stacked
     in a middle column, subtotal on the right — achieved by overriding the
     table row/cells to lay out as a grid instead of restructuring the
     markup, so the same DOM works for both breakpoints. */
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr { display: block; width: 100%; }
  .cart-table tr {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "image name     subtotal"
      "image price    subtotal"
      "image qty      subtotal";
    column-gap: 0.9rem;
    row-gap: 0.25rem;
    align-items: center;
    padding: 0.8rem 0;
  }
  .cart-table td { display: block; border: none; padding: 0; }
  .cart-table td:nth-child(1) { grid-area: image; }
  .cart-table td:nth-child(2) { grid-area: name; font-weight: 600; }
  .cart-table td:nth-child(3) { grid-area: price; font-size: 0.85rem; color: var(--text); }
  .cart-table td:nth-child(4) { grid-area: qty; }
  .cart-table td:nth-child(5) { grid-area: subtotal; font-weight: 600; text-align: right; }
}

/* The mini-cart drawer is always narrow, so it always uses the same
   stacked row layout the cart page only switches to on mobile above —
   same grid technique, just unconditional (see .cart-table-drawer usage
   in app.js's renderCartDrawerContents). */
.cart-table-drawer thead { display: none; }
.cart-table-drawer, .cart-table-drawer tbody, .cart-table-drawer tr { display: block; width: 100%; }
.cart-table-drawer tr {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-areas:
    "image name     subtotal"
    "image price    subtotal"
    "image qty      subtotal";
  column-gap: 0.8rem;
  row-gap: 0.25rem;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
}
.cart-table-drawer td { display: block; border: none; padding: 0; }
.cart-table-drawer td:nth-child(1) { grid-area: image; }
.cart-table-drawer td:nth-child(2) { grid-area: name; font-weight: 700; font-size: 0.9rem; }
.cart-table-drawer td:nth-child(3) { grid-area: price; font-size: 0.85rem; color: var(--text); }
.cart-table-drawer td:nth-child(4) { grid-area: qty; }
.cart-table-drawer td:nth-child(5) { grid-area: subtotal; font-weight: 600; text-align: right; }
.cart-table-drawer img { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; }

.notice {
  padding: 0.8rem 1rem;
  border-radius: 4px;
  margin-bottom: 1.2rem;
  font-size: 0.9rem;
  text-align: left;
}
.notice.error { background: #fdeceb; border: 1px solid #e0a3a3; color: #a33; }
.notice.success { background: #eefaf0; border: 1px solid #8fcf9a; color: #2e7d38; }

#express-checkout-element { max-width: 480px; margin: 1.5rem auto 0; }
#cart-express-checkout-element { margin-bottom: 0.6rem; }

/* A static look-alike shown only while the real Apple Pay button is still
   loading (see ensureFakeApplePayOverlay in app.js) — sits absolutely
   positioned over the exact same box the real element mounts into
   (inset:0 within this wrapper), never a separate sibling with its own
   size/margin, so there's no gap or alignment mismatch when it's removed.
   height (not just min-height) + overflow:hidden hard-caps the box at
   exactly the fake button's height regardless of whatever height Stripe's
   real element ends up wanting once mounted — without this, the box grew
   once the real button replaced the fake one, doubling the gap to
   "Proceed to Checkout". The !important below defends against Stripe
   re-applying its own inline margin on the mount element after our own
   one-time reset, since that's set at mount time, after this rule exists. */
.express-checkout-slot { position: relative; height: 44px; overflow: hidden; }
.express-checkout-slot > *:not(.fake-apple-pay-btn) { margin: 0 !important; max-width: none !important; }
/* Inspecting Stripe's real button in the DOM shows it has no text/icon
   content of its own at all (an empty <button>) — it's rendered entirely
   via the native -webkit-appearance: -apple-pay-button CSS property,
   which tells WebKit to draw Apple's own system Apple Pay graphic
   directly. Using the same property here (rather than reconstructing the
   mark with a font + Unicode glyph, which could only ever approximate it)
   renders the literal same native graphic — a guaranteed exact match, not
   another guess at font-size/weight/spacing. WebKit-only, same as
   canShowApplePay()'s own gate, so there's no fallback-rendering concern. */
.fake-apple-pay-btn {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; border: none;
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: plain;
  -apple-pay-button-style: black;
  background: #000; border-radius: 4px; /* fallback if the appearance value is ever unsupported */
  pointer-events: none;
  /* Faded out, not removed from the DOM — a hard DOM removal forces a
     layout/paint pass right at the swap moment even when the box size
     doesn't change, which is enough to read as a pop. Opacity is
     compositor-only (no reflow), and fading gradually also hides any
     remaining sub-pixel rendering difference between this and the real
     button instead of snapping to it instantly. */
  transition: opacity 300ms ease-out;
}
.fake-apple-pay-btn.fake-apple-pay-hidden { opacity: 0; }
.btn.paypal-btn {
  /* Buttons don't stretch to fill a block container from display:block
     alone — an explicit width is needed, same as the drawer's buttons. */
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 480px; margin: 0.8rem auto 0;
  background: #ffc439;
}
.btn.paypal-btn:hover { background: #f2ba36; }
/* Must come after .btn.paypal-btn — same specificity, and this needs to win
   on margin-bottom so the buttons in the cart page's action stack (Apple/
   PayPal/Checkout/Continue) have a consistent gap between them. */
.cart-actions { max-width: 480px; margin: 1rem 0 0 auto; }
.cart-actions .btn { display: block; width: 100%; text-align: center; margin-bottom: 0.6rem; }
.paypal-wordmark { font-style: italic; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.paypal-wordmark .pay { color: #003087; }
.paypal-wordmark .pal { color: #009cde; }
.or-divider {
  max-width: 480px; margin: 1.5rem auto; text-align: center; position: relative;
  font-size: 0.8rem; color: var(--text); text-transform: uppercase; letter-spacing: 0.08em;
}
.or-divider::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid var(--border); z-index: 0;
}
.or-divider span { position: relative; background: #fff; padding: 0 1rem; z-index: 1; }
#card-payment-form h3 { color: var(--text-strong); margin: 1rem 0 0; }
#card-payment-form h3:first-child { margin-top: 0; }
#payment-element, #shipping-address-element { margin: 0.5rem 0 1rem; }
#checkout-form { margin-top: 2rem; }

.payment-processing { max-width: 480px; margin: 3rem auto; text-align: center; }
.spinner {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  border: 4px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.payment-processing h2 { color: var(--text-strong); margin-bottom: 0.5rem; }

.payment-success { max-width: 480px; margin: 3rem auto; text-align: center; }
.payment-success-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  background: #2e7d38; color: #fff; font-size: 2rem; line-height: 64px; text-align: center;
}
.payment-success h2 { color: var(--text-strong); margin-bottom: 0.5rem; }
.payment-success .btn { display: inline-block; margin-top: 1.5rem; }

.payment-error-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  background: #a33; color: #fff; font-size: 2rem; font-weight: 700; line-height: 64px; text-align: center;
}

/* Apple/Google Pay never navigates away, so its processing/success state is
   injected into whichever page's <main> the buyer is currently on (product,
   home, cart...) rather than the drawer — this keeps it consistent with how
   PayPal renders (it always redirects through checkout.html's own <main>). */
#page-payment-status { display: none; }
main.payment-status-active > *:not(#page-payment-status) { display: none; }
main.payment-status-active > #page-payment-status { display: block; }

/* Plain class instead of an inline style, so checkout.js's own toggling
   always loses to the .payment-status-active rule above regardless of
   which JS set it — an inline style would win over that rule no matter
   how it's written, hiding nothing when the drawer's own Apple/Google Pay
   status takes over checkout.html's <main> out from under it. !important
   because #checkout-form is also form.stacked (display: flex) — a rule
   with higher specificity (type + class) than a bare .hidden class alone. */
.hidden { display: none !important; }

/* Express Checkout Elements (Apple/Google Pay) don't expose a way to
   disable them, so a plain overlay sits on top of the mount point instead
   — blocks clicks without ever calling a Stripe method on the element. */
.availability-gate-wrapper { position: relative; }
.availability-gate-blocker {
  position: absolute; inset: 0; z-index: 5; display: none;
  align-items: center; justify-content: center; text-align: center; padding: 0.5rem;
  background: rgba(255, 255, 255, 0.8); color: var(--text); font-size: 0.8rem; cursor: not-allowed;
}

.faq-item { margin-bottom: 1.5rem; text-align: left; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; }
/* Unlike the sales corner (all portrait), gallery photos mix orientations
   (mostly portrait, at least one landscape) — no single fixed ratio +
   cover avoids cropping something. contain shows every photo in full,
   letterboxed within a portrait-ish box sized to the majority orientation,
   with a light fill for the letterboxed space. */
.gallery-grid img { width: 100%; aspect-ratio: 3/4; object-fit: contain; background: #f2f2f2; border-radius: 4px; box-shadow: var(--card-shadow); }
.gallery-grid .gallery-item { position: relative; display: block; }
.gallery-link-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff; display: flex; align-items: center; justify-content: center;
  /* Optically center the play triangle — its own bounding box has slightly
     more visual weight to the right, so nudge it left a touch. */
  padding-left: 3px;
}

.empty-state { color: var(--text); padding: 2rem 0; text-align: center; }

/* ---------------------------------------------------------------- mini-cart drawer */

.cart-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease; z-index: 200;
}
.cart-drawer-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 380px;
  background: #fff; box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
  display: flex; flex-direction: column; z-index: 201;
  transform: translateX(100%); transition: transform 0.3s ease;
}
/* transform: none (not translateX(0)) once open — any non-none transform
   on an ancestor changes how position:fixed descendants compute their
   geometry (it becomes their containing block instead of the actual
   viewport). Stripe's Express Checkout Element mounts fine elsewhere
   (cart.html, checkout.html — neither has a transformed ancestor) but
   consistently failed to complete its Apple Pay validation specifically
   here; this is the one structural difference between this mount point
   and the working ones. Animates identically either way (browsers
   interpolate translateX(100%) -> none the same as -> translateX(0)), but
   leaves zero transform in effect while the drawer — and the Express
   Checkout Element inside it — is actually open and interactive. */
.cart-drawer.open { transform: none; }

.cart-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border);
}
.cart-drawer-header h2 { margin: 0; font-size: 1.1rem; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.05em; }
#cart-drawer-close {
  background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--text-strong);
}

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }

.cart-drawer-footer { padding: 1.2rem 1.5rem; border-top: 1px solid var(--border); }
.cart-drawer-footer .cart-total { text-align: left; margin: 0 0 1rem; }
.cart-drawer-footer .btn { display: block; width: 100%; text-align: center; margin-bottom: 0.6rem; }
#drawer-express-checkout-element { margin-bottom: 0.6rem; min-height: 1px; }

#page-content { text-align: left; }
#page-content h2, #page-content h3 { text-align: left; font-weight: 700; }
img.page-hero-img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
  margin: 2rem auto 0;
}

.home-hero-img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
  margin: 2.5rem auto 0;
}