/* ==========================================================================
   THEME VARIABLES
   Change these to restyle the entire site — colors, fonts, spacing, corners.
   ========================================================================== */
:root {
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-border: #e0e0e0;
  --color-accent: #2c2c2c;
  --color-accent-hover: #000000;
  --color-success: #2e7d32;
  --color-danger: #c62828;

  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --radius: 4px;
  /* Width of the normal centred content column (header, text pages).
     The product grids run wider than this — see .wrap-wide. */
  --max-width: 1320px;
  /* Side padding for the full-width sections */
  --wide-pad: 2.5rem;
  --gap: 1.5rem;

  /* Announcement bar */
  --color-announce-bg: #1a1a1a;
  --color-announce-text: #ffffff;

  /* Hero. Set --hero-image in index.html to use a photo instead of the tint. */
  --hero-min-height: 70vh;
  --hero-overlay: rgba(0, 0, 0, 0.3);

  /* Roughly the height of the header — used to pad the hero so its text
     doesn't sit under the transparent nav. */
  --header-height: 4.3rem;
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 600; }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
p { margin: 0 0 1em; color: var(--color-text-muted); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }

/* Full-width container — for sections that run edge to edge.
   Used by the product grids and the category tiles. Swap a section's
   wrap-wide for wrap to pull it back into the centred column. */
.wrap-wide { max-width: none; margin: 0; padding: 0 var(--wide-pad); }
@media (max-width: 700px) { :root { --wide-pad: 1.25rem; } }
.section { padding: 2.5rem 0; }
.text-muted { color: var(--color-text-muted); font-size: 0.9rem; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; padding-bottom: 1rem;
}
.site-logo { font-size: 1.2rem; font-weight: 600; text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a { text-decoration: none; color: var(--color-text-muted); font-size: 0.95rem; }
.site-nav a:hover, .site-nav a.active { color: var(--color-text); }
.cart-link { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---------- Icon buttons in the nav (search) ---------- */
.icon-btn {
  background: none; border: none; cursor: pointer; padding: 0.2rem;
  color: var(--color-text-muted); display: inline-flex; align-items: center;
}
.icon-btn:hover { color: var(--color-text); }

/* ---------- Products dropdown ---------- */
.nav-dropdown { position: relative; }
.nav-trigger {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 0.95rem; color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.nav-trigger:hover, .nav-trigger.active,
.nav-dropdown.open .nav-trigger { color: var(--color-text); }
.nav-caret { transition: transform 0.2s ease; }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-panel {
  position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%);
  min-width: 11rem; z-index: 60;
  background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.5rem 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.nav-panel a {
  display: block; padding: 0.5rem 1rem; font-size: 0.9rem;
  color: var(--color-text-muted); text-decoration: none; white-space: nowrap;
}

/* Invisible strip covering the gap between the button and the panel.
   Without it the pointer leaves the menu on the way down and it closes. */
.nav-panel::before {
  content: ""; position: absolute;
  top: -1rem; left: 0; right: 0; height: 1rem;
}
.nav-panel a:hover { background: var(--color-surface); color: var(--color-text); }

/* ---------- Search panel ---------- */
.search-panel {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 1.1rem 0 1.25rem;
}
.search-panel .wrap { display: flex; align-items: center; gap: 1rem; }
.search-panel input {
  flex: 1; border: none; background: none; color: var(--color-text);
  font-size: 1.15rem; padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-border);
}
.search-panel input:focus { outline: none; border-bottom-color: var(--color-accent); }

.search-results { margin-top: 0.75rem; display: flex; flex-direction: column; }
.search-hit {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.5rem 0; text-decoration: none; font-size: 0.92rem;
  border-bottom: 1px solid var(--color-border);
}
.search-hit:hover { color: var(--color-accent); }
.search-hit-photo {
  width: 38px; height: 38px; flex-shrink: 0; overflow: hidden;
  background: var(--color-surface); border-radius: var(--radius);
}
.search-hit-photo img { width: 100%; height: 100%; object-fit: cover; }
.search-hit-kind {
  font-size: 0.72rem; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.1em 0.45em;
}
.search-hit-price { margin-left: auto; color: var(--color-text-muted); }
.search-empty { color: var(--color-text-muted); font-size: 0.9rem; margin: 0.5rem 0 0; }

/* When the search panel is open on the home page, the transparent header
   needs a solid background or the panel floats over the photo unreadably. */
.header-overlay.search-open {
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}
.header-overlay.search-open .site-logo { color: var(--color-text); }
.header-overlay.search-open .site-nav a,
.header-overlay.search-open .nav-trigger,
.header-overlay.search-open .icon-btn { color: var(--color-text-muted); }
.header-overlay.search-open .cart-count { background: var(--color-accent); color: #fff; }
.cart-count {
  background: var(--color-accent); color: #fff; border-radius: 999px;
  font-size: 0.75rem; min-width: 1.4em; height: 1.4em;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 0.35em;
}

/* ---------- Transparent header over a hero photo ----------
   Used on the home page only. The header is fixed to the top of the window so
   it stays reachable while scrolling. It starts transparent over the hero
   photo, and turns solid white in three cases:
     - the mouse is over it
     - a link inside it has keyboard focus
     - the page has scrolled past the hero (class added by initOverlayHeader)
   That last one matters: without it, white nav text would end up sitting over
   white page content once you scroll down. */
.hero-stack { position: relative; }

.header-overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.header-overlay .site-logo { color: #fff; }
.header-overlay .site-nav a { color: rgba(255, 255, 255, 0.85); }
.header-overlay .site-nav a:hover,
.header-overlay .site-nav a.active { color: #fff; }
.header-overlay .cart-count { background: #fff; color: var(--color-text); }
.header-overlay .nav-trigger,
.header-overlay .icon-btn { color: rgba(255, 255, 255, 0.85); }
.header-overlay .nav-trigger:hover,
.header-overlay .icon-btn:hover { color: #fff; }

/* The solid state, shared by hover, keyboard focus and scrolled-past-hero */
.header-overlay:hover,
.header-overlay:focus-within,
.header-overlay.is-solid {
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}
.header-overlay:hover .site-logo,
.header-overlay:focus-within .site-logo,
.header-overlay.is-solid .site-logo { color: var(--color-text); }

.header-overlay:hover .site-nav a,
.header-overlay:focus-within .site-nav a,
.header-overlay.is-solid .site-nav a { color: var(--color-text-muted); }

.header-overlay:hover .site-nav a:hover,
.header-overlay:hover .site-nav a.active,
.header-overlay:focus-within .site-nav a.active,
.header-overlay.is-solid .site-nav a:hover,
.header-overlay.is-solid .site-nav a.active { color: var(--color-text); }

.header-overlay:hover .cart-count,
.header-overlay:focus-within .cart-count,
.header-overlay.is-solid .cart-count { background: var(--color-accent); color: #fff; }

.header-overlay:hover .nav-trigger,
.header-overlay:hover .icon-btn,
.header-overlay:focus-within .nav-trigger,
.header-overlay:focus-within .icon-btn,
.header-overlay.is-solid .nav-trigger,
.header-overlay.is-solid .icon-btn { color: var(--color-text-muted); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-block; border: 1px solid var(--color-accent);
  background: var(--color-accent); color: #fff;
  padding: 0.65em 1.3em; border-radius: var(--radius);
  text-decoration: none; font-size: 0.95rem; cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--color-accent-hover); }
.btn:disabled { background: var(--color-border); border-color: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-outline:hover { background: var(--color-surface); }
.btn-small { padding: 0.4em 0.9em; font-size: 0.85rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ==========================================================================
   ANNOUNCEMENT BAR
   Text comes from SHOP.announcement in js/products.js. Set it to "" to hide.
   ========================================================================== */
.announcement {
  background: var(--color-announce-bg); color: var(--color-announce-text);
  text-align: center; font-size: 0.82rem; padding: 0.6rem 1rem;
}

/* ==========================================================================
   HERO
   Two modes:
   - no photo  -> .hero on its own, plain and compact
   - with photo-> add class "hero-image" and set --hero-image on the element:
                  <section class="hero hero-image" style="--hero-image:url('images/hero.jpg')">
   ========================================================================== */
.hero { padding: 3.5rem 0; border-bottom: 1px solid var(--color-border); }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 18ch; }
.hero p { max-width: 50ch; font-size: 1.05rem; }

.hero-image {
  position: relative; border-bottom: none;
  min-height: var(--hero-min-height);
  /* the fixed header sits on top of this, so clear its height */
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 3rem;
  display: flex; align-items: center;
  background-image: var(--hero-image, none);
  background-size: cover; background-position: center;
  background-color: var(--color-surface);
  color: #fff;
}
.hero-image::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-overlay);
}
.hero-image .wrap { position: relative; }
.hero-image h1 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 16ch; }
.hero-image p { color: rgba(255,255,255,0.88); }
.hero-image .btn { background: #fff; color: #1a1a1a; border-color: #fff; }
.hero-image .btn:hover { background: var(--color-surface); }

/* Small kicker line above the hero headline */
.hero-kicker {
  font-size: 0.8rem; letter-spacing: 0.04em;
  margin-bottom: 0.6rem; opacity: 0.85;
}

/* ==========================================================================
   SECTION HEADING
   Centred, with the "view all" link sitting underneath rather than beside it.
   To go back to the left-aligned version with a rule under it, swap
   text-align: center for left and re-add the border-bottom.
   ========================================================================== */
.section-heading {
  text-align: center;
  margin-bottom: 2.25rem;
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
}
.section-heading a {
  display: inline-block;
  font-size: 0.9rem;
  margin-top: 0.6rem;
  color: var(--color-text-muted);
}
.section-heading a:hover { color: var(--color-text); }

/* ==========================================================================
   PRODUCT GRID
   Borderless: the photo sits directly on the page, name and price underneath.
   Because there's no box holding things together, the grid only looks tidy if
   photos share an aspect ratio — square crops are safest.
   ========================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  display: flex; flex-direction: column;
  background: none; border: none; border-radius: 0;
}

/* ---------- Photo area ---------- */
.product-media { position: relative; }

.product-photo {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--color-text-muted); font-size: 0.85rem;
  text-decoration: none;
}
/* Centres the "Photo here" text when a product has no image yet */
.product-photo .photo-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Both photos fill the same space, stacked on top of each other.
   The frame stays put; the images scale inside it on hover. */
.product-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease, opacity 0.4s ease;
}
.product-card:hover .product-photo img { transform: scale(1.05); }
.product-photo:active img { transform: scale(1.01); }

/* The second photo sits on top at zero opacity and fades in on hover.
   Products without an image2 simply have nothing to fade to. */
.photo-alt {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.product-card:hover .photo-alt { opacity: 1; }

/* Someone using reduced motion gets the swap with no fade */
@media (prefers-reduced-motion: reduce) {
  .product-photo img { transition: none; }
  .product-card:hover .product-photo img { transform: none; }
}

/* Touchscreens have no hover, so never hide the main photo behind an
   invisible layer that can't be revealed */
@media (hover: none) {
  .photo-alt { display: none; }
}

.photo-placeholder { position: relative; }

/* Corner label — "New", "Bestseller", or "Sold out" */
.badge {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  background: var(--color-accent); color: #fff;
  font-size: 0.7rem; padding: 0.25em 0.6em; border-radius: var(--radius);
}
.badge-out { background: var(--color-danger); }

/* ---------- Text under the photo ---------- */
.product-info {
  padding: 1rem 0 0;
  display: flex; flex-direction: column; gap: 0.25rem; flex: 1;
}
.product-name {
  font-weight: 500; font-size: 1.05rem;
  text-decoration: none; color: var(--color-text);
}
.product-desc { font-size: 0.9rem; color: var(--color-text-muted); }
.product-price { font-weight: 500; font-size: 1.05rem; margin-top: 0.2rem; }
.product-stock { font-size: 0.78rem; color: var(--color-success); }
.product-stock.out { color: var(--color-danger); }

/* ---------- Quick add ----------
   Sits in the bottom right of the photo. Hidden until the card is hovered on
   desktop; always visible on touch screens, which have no hover at all. */
.quick-add {
  position: absolute; right: 0.9rem; bottom: 0.9rem; z-index: 2;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.45em 0.9em; font-size: 0.82rem; cursor: pointer;
  opacity: 0; transform: translateY(0.4rem);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.product-card:hover .quick-add,
.quick-add:focus-visible {
  opacity: 1; transform: translateY(0);
}
.quick-add:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.quick-add.added { background: var(--color-success); color: #fff; border-color: var(--color-success); }

@media (hover: none) {
  .quick-add { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quick-add { transition: none; }
}

/* ==========================================================================
   QUANTITY STEPPER
   ========================================================================== */
.qty-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); }
.qty-stepper button { background: none; border: none; width: 2rem; height: 2rem; cursor: pointer; color: var(--color-text); }
.qty-stepper button:hover { background: var(--color-surface); }
.qty-stepper input { width: 2.4rem; border: none; text-align: center; background: none; color: var(--color-text); }

/* ==========================================================================
   FILTER BAR (products page)
   Category links on the left, a plain sort control on the right. No boxes.
   ========================================================================== */
.filter-bar {
  display: flex; gap: 1rem; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  margin-bottom: 2rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.category-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.category-links a {
  font-size: 0.95rem; color: var(--color-text-muted); text-decoration: none;
  padding-bottom: 0.2rem; border-bottom: 1px solid transparent;
}
.category-links a:hover { color: var(--color-text); }
.category-links a.active {
  color: var(--color-text); border-bottom-color: var(--color-text);
}

.sort-control { display: flex; align-items: center; gap: 0.5rem; }
.sort-control label { font-size: 0.85rem; color: var(--color-text-muted); }
.sort-control select {
  border: none; background: none; color: var(--color-text);
  font-size: 0.9rem; cursor: pointer; padding: 0.2rem 0;
}
.sort-control select:focus { outline: none; text-decoration: underline; }

/* ==========================================================================
   CART
   ========================================================================== */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  text-align: left; font-size: 0.85rem; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border); padding-bottom: 0.6rem; font-weight: 500;
}
.cart-table td { border-bottom: 1px solid var(--color-border); padding: 1rem 0.5rem 1rem 0; vertical-align: middle; }
.cart-item-info { display: flex; align-items: center; gap: 1rem; }
.cart-thumb {
  width: 60px; height: 60px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cart-item-name { text-decoration: none; }
.cart-item-name:hover { text-decoration: underline; }
.cart-thumb img { position: static; width: 100%; height: 100%; object-fit: cover; }
.remove-link {
  font-size: 0.85rem; color: var(--color-text-muted); text-decoration: underline;
  background: none; border: none; cursor: pointer; padding: 0;
}
.remove-link:hover { color: var(--color-danger); }

.cart-summary {
  margin-top: 2rem; margin-left: auto; max-width: 320px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.25rem;
}
.summary-row { display: flex; justify-content: space-between; font-size: 0.92rem; margin-bottom: 0.6rem; color: var(--color-text-muted); }
.summary-row.total {
  color: var(--color-text); font-weight: 600; font-size: 1.05rem;
  border-top: 1px solid var(--color-border); padding-top: 0.7rem; margin-top: 0.7rem;
}
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--color-text-muted); }

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 800px) { .checkout-grid { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.form-group input, .form-group textarea {
  width: 100%; padding: 0.6em 0.75em; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-bg); color: var(--color-text);
}
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }
.form-note {
  background: var(--color-surface); border: 1px dashed var(--color-border);
  border-radius: var(--radius); padding: 0.9rem 1rem;
  font-size: 0.85rem; color: var(--color-text-muted); margin: 1rem 0;
}
.order-summary {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.25rem;
}
.order-line { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border); margin-top: 0; padding: 2.5rem 0 1.5rem;
  color: var(--color-text-muted); font-size: 0.88rem;
}
.footer-cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem;
  padding-bottom: 2rem;
}
@media (max-width: 700px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-brand p { margin: 0.4rem 0 0.8rem; max-width: 34ch; }
.footer-social { display: flex; gap: 1rem; }
.site-footer h3 {
  font-size: 0.88rem; color: var(--color-text); margin-bottom: 0.6rem; font-weight: 600;
}
.site-footer a { text-decoration: none; display: block; margin-bottom: 0.35rem; }
.footer-social a { display: inline; margin: 0; }
.site-footer a:hover { text-decoration: underline; color: var(--color-text); }
.footer-base {
  border-top: 1px solid var(--color-border); padding-top: 1.2rem; font-size: 0.8rem;
}


/* ==========================================================================
   CATEGORY TILES
   Rendered by renderCategoryTiles() into <div data-category-tiles></div>
   Full width, tall photos, with the category name sitting on the image.
   ========================================================================== */
.category-section { background: var(--color-surface); padding: 3.5rem 0; }

.category-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 800px) { .category-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .category-tiles { grid-template-columns: 1fr; } }

.category-tile {
  position: relative; display: block; text-decoration: none;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-border);
}
.category-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.category-tile:hover img,
.category-tile:focus-visible img { transform: scale(1.05); }
.category-tile:active img { transform: scale(1.01); }

/* A soft dark wash so the white label stays readable on pale photos */
.category-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.35));
}

.category-tile-label {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; text-align: center;
}
.category-tile-label .tile-name { font-size: 1.15rem; }
.category-tile-label .tile-count {
  font-size: 0.82rem; opacity: 0.8; margin-top: 0.2rem;
}

/* Category with no photo yet */
.category-tile.no-photo { background: var(--color-border); }
.category-tile.no-photo::after { background: none; }
.category-tile.no-photo .category-tile-label { color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .category-tile img { transition: none; }
  .category-tile:hover img { transform: none; }
}

/* ==========================================================================
   PROMISE ROW (three reassurance items)
   Rendered by renderPromises() into <div data-promises></div>
   Text comes from SHOP.promises in js/products.js
   ========================================================================== */
.promises { background: var(--color-bg); border-top: 1px solid var(--color-border); padding: 3rem 0; }
.promise-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); text-align: center; }
@media (max-width: 700px) { .promise-row { grid-template-columns: 1fr; text-align: center; } }
.promise h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.promise p { font-size: 0.88rem; margin: 0; }

/* ==========================================================================
   PRODUCT PAGE  (product.html)
   ========================================================================== */
.breadcrumb {
  font-size: 0.85rem; color: var(--color-text-muted);
  display: flex; gap: 0.5rem; margin-bottom: 1.5rem;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: var(--color-text); }

.product-detail {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start;
}
@media (max-width: 800px) { .product-detail { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Gallery ---------- */
.gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: 0.85rem;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem; margin-top: 0.6rem;
}
.gallery-thumb {
  padding: 0; border: 1px solid transparent; background: var(--color-surface);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  aspect-ratio: 1 / 1;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { border-color: var(--color-border); }
.gallery-thumb.active { border-color: var(--color-accent); }

/* ---------- Info column ---------- */
.product-detail-info h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.3rem; }
.detail-price { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.3rem; }
.detail-description { margin-top: 1.2rem; max-width: 52ch; }
.detail-note { margin-top: 1.5rem; max-width: 46ch; }

.detail-specs {
  margin: 1.5rem 0 0; padding: 0;
  border-top: 1px solid var(--color-border);
}
.detail-specs > div {
  display: flex; gap: 1rem; padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.detail-specs dt { color: var(--color-text-muted); min-width: 8rem; margin: 0; }
.detail-specs dd { margin: 0; }

.product-detail-info .qty-row { margin-top: 1.75rem; }

/* ==========================================================================
   COLOUR OPTIONS  (product page)
   Rendered by variantPickerHTML() in js/products.js. Each box is filled with
   the variant's swatch colour; the selected one gets an outline.
   ========================================================================== */
.variant-picker { margin-top: 1.25rem; }
.variant-label { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.variant-options { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.variant-option {
  width: 2.25rem; height: 2.25rem; padding: 0; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.15); border-radius: var(--radius);
  transition: transform 0.15s ease;
}
.variant-option:hover { transform: scale(1.06); }
.variant-option.active { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .variant-option { transition: none; }
  .variant-option:hover { transform: none; }
}

/* "Choose colour" on cards is a link, not a button */
a.quick-add { text-decoration: none; }