*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', sans-serif;
      background-color: #F0E6CC;
      color: #1c1917; overflow-x: hidden;
    }
    h1, h2, h3 { font-family: 'Playfair Display', serif; }

    /* Nav */
    .nav-wrap {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 11px 56px;
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(240,230,204,0.97);
      backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 rgba(28,25,23,0.07);
    }
    .nav-link {
      font-family: 'Inter', sans-serif; font-size: 0.75rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      text-decoration: none; font-weight: 500; color: #4a3f34;
      transition: color 0.3s ease;
    }
    .nav-link:hover { color: #c9a96e; }

    /* Product card */
    .product-card {
      cursor: pointer;
      background: #fff;
      border: 1px solid rgba(201,169,110,0.2);
      transition:
        transform  0.45s cubic-bezier(0.22,1,0.36,1),
        box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),
        border-color 0.3s ease;
    }
    .product-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 32px 64px rgba(28,18,8,0.12), 0 4px 14px rgba(28,18,8,0.05);
      border-color: rgba(201,169,110,0.5);
    }
    .card-img {
      position: relative; overflow: hidden;
      /* Card photography is overwhelmingly portrait (side tables, cabinets,
         mirrors) with a landscape minority (centre tables). The previous
         static-catalog draft already solved this mix for portrait shots
         with a 290x360 card (a 124% height:width ratio) — reused here as
         the default for every archive so it shows as much of each product
         as that draft did. Centre Tables is the landscape exception and
         gets its own ratio just below, scoped by category rather than by
         individual product. */
      padding-bottom: 124%;
      background: linear-gradient(148deg, #D4A86A 0%, #7A4A1E 100%);
    }
    /* Centre Tables photography is predominantly landscape (round/oval
       tabletops shot from a low angle), unlike the portrait majority the
       124% default above is tuned for — the original ~68% frame was
       correct here and only regressed when 124% became the shared
       default. Scoped to this one archive via the grid wrapper's
       category class so Side Tables (and every other category) keep
       124% untouched. */
    .product-archive-grid--centre-tables .card-img {
      padding-bottom: 68%;
    }
    /* A handful of cabinets are photographed landscape rather than the
       portrait majority the 124% box above is tuned for; forcing them into
       that box crops away too much width. .card-wide relaxes the ratio for
       just those cards so the full piece reads clearly, while staying a
       normal grid cell (no column-span) so layout stays intact. */
    .product-card.card-wide .card-img {
      padding-bottom: 92%;
    }
    .card-img img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform 0.75s cubic-bezier(0.22,1,0.36,1);
    }
    .product-card:hover .card-img img { transform: scale(1.06); }
    .card-vignette {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 32%, rgba(14,8,4,0.14) 55%, rgba(14,8,4,0.82) 100%);
      pointer-events: none;
    }
    /* Name + price live on the image itself now (no white panel underneath —
       see taxonomy-product_cat.php) — .card-vignette above gives them a
       readable, always-dark-enough backdrop regardless of how light the
       product photo's own background is. */
    .card-info {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 16px 20px 18px;
      pointer-events: none;
    }
    .card-title {
      font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 400;
      color: #faf7f2; line-height: 1.4; margin-bottom: 5px;
      text-shadow: 0 1px 4px rgba(14,8,4,0.35);
    }
    .card-price {
      font-family: 'Inter', sans-serif; font-size: 0.62rem;
      color: #e3c791; letter-spacing: 0.1em;
      text-shadow: 0 1px 3px rgba(14,8,4,0.35);
    }
    .card-enquire {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: rgba(201,169,110,0.96); color: #1c1917;
      font-family: 'Inter', sans-serif; font-size: 0.57rem;
      letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
      padding: 7px 22px; border-radius: 2px; white-space: nowrap;
      opacity: 0; transition: opacity 0.22s ease;
    }
    .product-card:hover .card-enquire { opacity: 1; }

    /* Scroll reveal */
    .sr {
      opacity: 0; transform: translateY(28px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .sr.visible { opacity: 1; transform: translateY(0); }
    .sr-d1 { transition-delay: 0.05s; }
    .sr-d2 { transition-delay: 0.12s; }
    .sr-d3 { transition-delay: 0.19s; }
    .sr-d4 { transition-delay: 0.26s; }
    .sr-d5 { transition-delay: 0.33s; }
    .sr-d6 { transition-delay: 0.40s; }

    /* Responsive nav + hero + grid */
    @media (max-width: 768px) {
      .nav-wrap { padding: 11px 24px; }
    }
    @media (max-width: 900px) {
      .archive-hero { padding: 128px 28px 56px !important; }
      .archive-main { padding: 56px 28px 80px !important; }
      /* The trailing-orphan centering rule assumes a 3-column grid; at
         2/1 columns it would misplace the card, so it only applies at
         the desktop 3-column breakpoint (see .archive-card-centered
         below). */
      .product-archive-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 560px) {
      .archive-hero { padding: 120px 20px 48px !important; }
      .archive-main { padding: 48px 20px 64px !important; }
      /* 2 per row all the way down to the smallest tested width — was
         1fr (single column) here; every category archive shares this one
         rule, so this single change applies uniformly across all of
         them without touching Collections (a separate stylesheet). */
      .product-archive-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (min-width: 901px) {
      /* Single column placement only (no span) — a spanned grid item's
         width doubles, and since .card-img's height is a padding-bottom
         percentage of its own width, that silently doubled the card's
         height too. This one rule already places a lone trailing card
         sensibly regardless of column count (2 of 3, or 2 of 4), so no
         per-category override is needed. */
      .archive-card-centered { grid-column: 2; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .product-card, .card-img img, .card-enquire { transition: none !important; }
      .sr { transition: none !important; opacity: 1 !important; transform: none !important; }
    }

    .btn-gold {
      background: #c9a96e; color: #1c1917;
      font-family: 'Inter', sans-serif; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem;
      padding: 10px 26px; border: none; cursor: pointer;
      transition: all 0.3s ease; display: inline-block; text-decoration: none;
    }
    .btn-gold:hover { background: #b8924f; }
    .footer-copyright-link { color: inherit; text-decoration: none; transition: color 0.3s ease; }
    .footer-copyright-link:hover { color: #c9a96e; }

    /* The shared inline <style> block above never sets a base .nav-link
       color on its own — every React entry supplies it from its own
       page-specific stylesheet. This is that stylesheet for the
       server-rendered category archive. */
    .nav-link { color: #4a3f34; }