/* ============================================================
   PS GRANITES — SHARED STYLESHEET
   One file for the whole site. Edit here, every page updates.
   ============================================================ */

:root{
  --stone-black: #15130F;
  --quarry:      #221E18;
  --ivory:       #F3EEE4;
  --ivory-dim:   #E8E1D2;
  --brass:       #B4915B;
  --brass-dim:   #8C7248;
  --rust:        #8A4A34;
  --slate:       #A39C8E;
  --ink:         #201C16;
  --line-dark:   rgba(243,238,228,0.14);
  --line-light:  rgba(32,28,22,0.12);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Poppins", -apple-system, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --radius: 2px;
  --max: 1360px;
  /* Scoped to product cards + the enquiry/WhatsApp actions on the product
     detail page only — the rest of the site keeps its stone-black/brass
     system untouched. */
  --enquiry-green: #3E5C3A;
  --whatsapp-green: #25D366;
  --card-radius: 10px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); color:var(--ink); background:#fff url('../img/bg.png') repeat; line-height:1.65; -webkit-font-smoothing:antialiased; }
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
h1,h2,h3{ font-family:var(--font-display); font-weight:500; line-height:1.08; letter-spacing:-0.01em; }
.label{ font-size:0.78rem; font-weight:500; color:var(--brass); display:block; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:0.6rem; padding:0.9rem 1.6rem; font-size:0.92rem; font-weight:500; border-radius:var(--radius); transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brass); color:var(--stone-black); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-primary:hover{ background:#c9a56c; transform:translateY(-2px); box-shadow:0 8px 20px rgba(180,145,91,0.28), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-primary .btn-arrow{ transition:transform 0.25s ease; }
.btn-primary:hover .btn-arrow{ transform:translateX(3px); }
.btn-ghost{ border:1px solid var(--line-light); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--rust); color:var(--rust); transform:translateY(-2px); }
.btn-ghost.dark{ border-color:var(--line-dark); color:var(--ivory); }
.btn-ghost.dark:hover{ border-color:var(--brass); color:var(--brass); transform:translateY(-2px); }
.btn-whatsapp{ background:#25D366; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-whatsapp svg{ flex-shrink:0; transition:transform 0.3s ease; }
.btn-whatsapp:hover{ background:#22c05e; color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(37,211,102,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-whatsapp:hover svg{ transform:rotate(-8deg) scale(1.1); }

/* ============================================================
   HEADER / NAV (injected by partials.js)
   ============================================================ */
header{ position:sticky; top:0; z-index:50; background:rgba(21,19,15,0.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-dark); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 0; gap:1.5rem; }
.logo{ font-family:var(--font-display); font-size:1.3rem; color:var(--ivory); }
nav.main-links{ display:flex; gap:2.2rem; }
nav.main-links a{ color:var(--ivory); font-size:0.9rem; position:relative; padding-bottom:4px; }
nav.main-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--brass); transition:width 0.25s ease; }
nav.main-links a:hover::after, nav.main-links a.active::after{ width:100%; }
nav.main-links a.active{ color:var(--brass); }
.nav-actions{ display:flex; align-items:center; gap:1rem; }

/* ---- Shared icon-button base (hamburger, mobile WhatsApp/search, drawer
   and search-modal close buttons) — consistent touch target + hover state.
   Focus rings come for free from the sitewide :focus-visible rule. ---- */
.icon-btn{ display:none; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:50%; color:var(--ivory); background:transparent; flex-shrink:0; transition:background 0.2s ease, border-color 0.2s ease; }
.icon-btn:hover{ background:rgba(243,238,228,0.1); }

.menu-btn{ font-size:1.4rem; line-height:1; }
.menu-icon{ pointer-events:none; }

/* Mobile/tablet-only icon group (WhatsApp + search), grouped and pushed to
   the far right via margin-left:auto — see the max-width:940px block below. */
.mobile-icons{ display:none; align-items:center; gap:0.4rem; }
/* Outlined, matching the quieter header .btn-whatsapp treatment — see
   that rule's comment for why persistent chrome stays subdued. */
.icon-btn-whatsapp{ border:1px solid rgba(37,211,102,0.35); background:rgba(37,211,102,0.1); color:var(--whatsapp-green); }
.icon-btn-whatsapp:hover{ background:rgba(37,211,102,0.18); border-color:var(--whatsapp-green); }
.icon-btn-search{ border:1px solid var(--line-dark); background:rgba(243,238,228,0.06); }
.icon-btn-search:hover{ border-color:var(--brass); background:rgba(243,238,228,0.1); }

/* ---- Mobile nav drawer: slides in from the left over a fading backdrop.
   The drawer stays in the layout at all times (never display:none) so
   transform/visibility can transition instead of snapping; visibility is
   delayed to the end of the transition (browser default for a transitioned
   discrete property) so the closed drawer can't be seen, clicked, or
   tabbed into — reinforced with the `inert` attribute toggled in site.js
   for older engines where visibility alone doesn't fully remove focusability. ---- */
.nav-drawer-backdrop{
  position:fixed; inset:0; z-index:88;
  background:rgba(10,9,7,0.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}
.nav-drawer-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; }
.mobile-nav{
  position:fixed; top:0; left:0; bottom:0; z-index:90;
  width:80%; max-width:340px;
  display:flex; flex-direction:column;
  background:var(--stone-black); box-shadow:8px 0 30px rgba(0,0,0,0.35);
  transform:translateX(-100%); visibility:hidden;
  transition:transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.mobile-nav.open{ transform:translateX(0); visibility:visible; }
.mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem var(--gutter); border-bottom:1px solid var(--line-dark); }
.mobile-nav-title{ font-family:var(--font-display); font-size:1.1rem; color:var(--ivory); }
.mobile-nav-close{ font-size:1.4rem; display:flex; }
.mobile-nav-links{ display:flex; flex-direction:column; overflow-y:auto; }
.mobile-nav-links a{
  color:var(--ivory); font-family:var(--font-display); font-size:1.2rem; font-weight:500;
  padding:1.1rem var(--gutter); border-bottom:1px solid var(--line-dark);
  transition:color 0.2s ease, padding-left 0.2s ease;
}
.mobile-nav-links a:hover, .mobile-nav-links a:active{ color:var(--brass); padding-left:calc(var(--gutter) + 0.4rem); }
.mobile-nav-links a.active{ color:var(--brass); }
@media (prefers-reduced-motion: reduce){
  .nav-drawer-backdrop, .mobile-nav, .mobile-nav-links a{ transition:none; }
}

/* ---- Search modal: centred panel + fading backdrop, mobile/tablet only. ---- */
.search-modal-backdrop{
  position:fixed; inset:0; z-index:94;
  background:rgba(10,9,7,0.65);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}
.search-modal-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; }
.search-modal{
  position:fixed; top:0; left:0; right:0; z-index:96;
  display:flex; justify-content:center;
  padding:5rem var(--gutter) 0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}
.search-modal.open{ opacity:1; visibility:visible; pointer-events:auto; }
.search-modal-panel{ position:relative; width:100%; max-width:460px; background:var(--stone-black); border:1px solid var(--line-dark); border-radius:var(--radius); padding:1.5rem 1.25rem; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.search-modal-close{ position:absolute; top:0.6rem; right:0.6rem; font-size:1.3rem; display:flex; }
.search-modal .search-wrap{ position:relative; }
.search-modal .search-wrap input{ width:100%; background:rgba(243,238,228,0.08); border:1px solid var(--line-dark); color:var(--ivory); padding:0.8rem 1rem 0.8rem 2.5rem; border-radius:24px; font-family:inherit; font-size:0.95rem; }
.search-modal .search-wrap input::placeholder{ color:var(--slate); }
.search-modal .search-wrap input:focus{ outline:none; border-color:var(--brass); }
.search-modal .search-wrap .search-ico{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--slate); pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .search-modal-backdrop, .search-modal{ transition:none; }
}

@media (max-width:940px){
  .nav-row{ justify-content:flex-start; gap:0.9rem; }
  nav.main-links{ display:none; }
  .nav-actions{ display:none; }
  .icon-btn{ display:flex; }
  .mobile-icons{ display:flex; margin-left:auto; }
}
@media (max-width:380px){
  .logo{ font-size:1.05rem; }
  .logo-img{ height:28px; }
}

/* Header search — reuses .search-wrap/.autocomplete (defined for the
   catalogue sidebar below) but restyled for the dark header bar. Scoped
   to header so the sidebar's light/white version is untouched. */
header .search-wrap{ position:relative; }
header .search-wrap input{ width:180px; background:rgba(243,238,228,0.08); border:1px solid var(--line-dark); color:var(--ivory); padding:0.55rem 0.9rem 0.55rem 2.2rem; border-radius:20px; font-family:inherit; font-size:0.82rem; transition:border-color 0.2s ease, background 0.2s ease, width 0.25s ease; }
header .search-wrap input::placeholder{ color:var(--slate); }
header .search-wrap input:focus{ outline:none; border-color:var(--brass); background:rgba(243,238,228,0.13); width:220px; }
header .search-wrap .search-ico{ position:absolute; left:0.75rem; top:50%; transform:translateY(-50%); color:var(--slate); opacity:0.8; pointer-events:none; }
@media (max-width:1080px){ header .search-wrap{ display:none; } }

/* Header WhatsApp button — sized/shaped to match the search box next to it
   (same height, pill border-radius, font-size). Outlined rather than the
   solid brand-green fill: this button is persistent chrome on every page
   and every scroll position, so a solid fill here would repeat the
   loudest color on the page far more than a real call-to-action warrants.
   The footer's closing-CTA WhatsApp button uses this same quiet treatment
   now too, for the same reason. */
header .btn-whatsapp, .cta-with-form .btn-whatsapp{
  padding:0.55rem 1.1rem; border-radius:20px; font-size:0.82rem; line-height:1.5; gap:0.5rem;
  background:rgba(37,211,102,0.1); color:var(--whatsapp-green); border:1px solid rgba(37,211,102,0.35); box-shadow:none;
}
header .btn-whatsapp:hover, .cta-with-form .btn-whatsapp:hover{ background:rgba(37,211,102,0.18); color:var(--whatsapp-green); border-color:var(--whatsapp-green); transform:none; box-shadow:none; }

/* Closing-CTA "Start an enquiry" + the form's own "Send enquiry" submit —
   both were sized like a hero button, which read as two loud, saturated
   asks stacked right on top of a compact form. Scaled down to the same
   quiet pill scale as the WhatsApp button above instead. */
.cta-with-form .hero-cta .btn-primary, .cta-with-form .contact-form .btn-primary{
  padding:0.55rem 1.1rem; border-radius:20px; font-size:0.82rem;
}

/* ============================================================
   PAGE HERO (About / Contact only — every other page uses the slim
   .crumb-bar strip below instead, so its content sits in the ordinary
   page flow rather than a full dark banner)
   ============================================================ */
.page-hero{ background:var(--stone-black); color:var(--ivory); padding:3rem 0 2rem; }
.page-hero h1{ font-size:clamp(2rem,4vw,3.4rem); max-width:20ch; margin-top:0.3rem; }
.page-hero p{ color:var(--slate); max-width:62ch; margin-top:1rem; font-size:1.02rem; }

.crumb{ padding:1.1rem 0 0; font-size:0.82rem; color:#6b6558; }
.crumb a:hover{ color:var(--rust); }

/* Slim dark breadcrumb strip — product detail, catalog, category and
   all-products listing pages all use this instead of .page-hero, so the
   crumb trail sits right under the header and the listing content below
   it gets the same top spacing as .section on About/Contact. */
.crumb-bar{ background:var(--stone-black); padding:0.5rem 0; }
.crumb-bar .crumb{ padding:0; margin:0; color:var(--slate); }
.crumb-bar .crumb a{ color:var(--ivory-dim); }
.crumb-bar .crumb a:hover{ color:var(--brass); }

/* ============================================================
   HOMEPAGE HERO
   ============================================================ */
.hero{ background:var(--stone-black); color:var(--ivory); display:grid; grid-template-columns:1.05fr 0.95fr; min-height:88vh; align-items:stretch; }
.hero-copy{ display:flex; flex-direction:column; justify-content:center; padding:3rem var(--gutter); gap:1.6rem; }
.hero-copy h1{ color:var(--ivory); font-size:var(--h1, clamp(2.6rem,5.2vw,5rem)); }
.hero-copy p{ color:var(--slate); font-size:1.05rem; max-width:46ch; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.5rem; }
.hero-meta{ display:flex; gap:2.4rem; margin-top:2.6rem; border-top:1px solid var(--line-dark); padding-top:1.6rem; flex-wrap:wrap; }

/* ---- Desktop: fit the hero to the viewport below the (opaque) topbar +
   header so the whole hero is visible with no scroll. --header-stack-h and
   --hero-avail-h are the real measured pixel heights (see initHeroHeight in
   site.js); every internal size below scales off --hero-avail-h (not raw
   vh) since the header eats a fixed chunk of the viewport that vh alone
   doesn't know about. Fallback values assume a ~127px header stack. */
@media (min-width:941px){
  .hero{ min-height:calc(100vh - var(--header-stack-h, 127px)); }
  .hero-copy{
    padding:clamp(1rem, calc(var(--hero-avail-h, 560px) * 0.05), 3rem) var(--gutter);
    gap:clamp(0.5rem, calc(var(--hero-avail-h, 560px) * 0.018), 1.6rem);
    overflow-y:auto;
  }
  .hero-copy h1{ font-size:clamp(1.9rem, calc(var(--hero-avail-h, 560px) * 0.088), 5rem); line-height:1.05; }
  .hero-copy p{ font-size:clamp(0.85rem, calc(var(--hero-avail-h, 560px) * 0.019), 1.05rem); max-width:60ch; }
  .hero-meta{ margin-top:clamp(0.6rem, calc(var(--hero-avail-h, 560px) * 0.028), 2.6rem); padding-top:clamp(0.5rem, calc(var(--hero-avail-h, 560px) * 0.016), 1.6rem); flex-wrap:nowrap; }
}
.hero-meta div{ font-size:0.82rem; color:var(--slate); }
.hero-meta strong{ display:block; color:var(--ivory); font-family:var(--font-display); font-size:1.2rem; font-weight:500; }
.hero-visual{ position:relative; overflow:hidden; background:radial-gradient(120% 90% at 15% 10%, rgba(180,145,91,0.20), transparent 55%), linear-gradient(155deg, #0d0c0a 0%, #2a251d 38%, #171512 62%, #050505 100%); }
.hero-visual::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(115deg, transparent 0 18px, rgba(180,145,91,0.06) 18px 19px, transparent 19px 60px), repeating-linear-gradient(35deg, transparent 0 40px, rgba(255,255,255,0.02) 40px 41px, transparent 41px 90px); mix-blend-mode:screen; }
.hero-visual::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 160px 40px rgba(0,0,0,0.55); }
.hero-tag{ position:absolute; left:2rem; bottom:2rem; color:var(--ivory); font-size:0.78rem; letter-spacing:0.04em; border-left:2px solid var(--brass); padding-left:0.8rem; max-width:220px; z-index:3; }

/* ---- hero image carousel (right panel) — crossfade + slow zoom ---- */
.hero-carousel{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.1s ease; }
.hero-slide.active{ opacity:1; visibility:visible; z-index:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; object-position:22% 45%; display:block; transform:scale(1); transition:transform 7s linear; }
.hero-slide.active img{ transform:scale(1.07); }
.hero-carousel::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(190deg, rgba(10,9,8,0.12) 0%, rgba(10,9,8,0.32) 55%, rgba(10,9,8,0.6) 100%); pointer-events:none; }
.hero-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:1.5rem; display:flex; gap:0.6rem; z-index:4; }
.hero-dot{ width:22px; height:3px; background:rgba(243,238,228,0.4); border:none; padding:0; cursor:pointer; transition:background 0.25s ease, width 0.25s ease; }
.hero-dot:hover{ background:rgba(243,238,228,0.65); }
.hero-dot.active{ background:var(--brass); width:34px; }
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
  .hero-slide img{ transition:none; transform:none; }
  .hero-slide.active img{ transform:none; }
}
@media (max-width:940px){
  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero-visual{ height:52vh; order:1; }
  .hero-copy{ order:0; }
  .hero-meta{ flex-wrap:nowrap; gap:1.2rem; }
}
/* Phone: the collections/products/capacity row is dropped rather than
   squeezed into three tiny columns — tablet and up keep it in one row. */
@media (max-width:560px){
  .hero-meta{ display:none; }
}

/* ============================================================
   EDITORIAL SECTIONS (Home / About shared)
   ============================================================ */
.section{ padding:clamp(3.5rem,7vw,6rem) 0; }
.section.dark{ background:var(--stone-black); color:var(--ivory); }
.section.dark p{ color:var(--slate); }
.two-col{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:4rem; align-items:start; }
.two-col.reverse{ grid-template-columns:1.1fr 0.9fr; }
.two-col h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:1.1rem; }
.two-col p + p{ margin-top:1rem; }
.two-col p{ max-width:56ch; color:#4b463c; }
.section.dark .two-col p{ color:var(--slate); }
@media (max-width:860px){
  .two-col, .two-col.reverse{ grid-template-columns:1fr; gap:2rem; }
  .two-col.reverse .stone-visual{ order:-1; }
}

.stone-visual{ aspect-ratio:4/3; position:relative; overflow:hidden; }
.sv1{ background:linear-gradient(135deg,#3a3227,#6b6154 45%,#262019); }
.sv1::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(100deg, transparent 0 14px, rgba(0,0,0,0.10) 14px 16px, transparent 16px 46px); }
.sv2{ background:linear-gradient(135deg,#2b2925,#0a0a09 60%,#3a352c); }
.sv2::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(65deg, transparent 0 20px, rgba(180,145,91,0.08) 20px 21px, transparent 21px 60px); }

/* Homepage-only real-photo variants (background-image set inline via
   image_url() in pages/home.php, same convention as .collection-card.has-photo
   below — kept out of the shared .sv1/.sv2 rules above, which about.php
   still uses as-is). */
.home-photo{ background-size:cover; background-position:center 42%; }

.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3rem; flex-wrap:wrap; }
.section-head p{ color:var(--slate); margin-top:0.8rem; }
.section-head .see-all{ font-size:0.9rem; color:var(--brass); white-space:nowrap; border-bottom:1px solid transparent; }
.section-head .see-all:hover{ border-color:var(--brass); }

.accent{ color:var(--brass); }
a.accent:hover{ color:#c9a56c; }

/* "Who we are" — replaces the old material intro in the same .two-col
   layout (photo placeholder left, copy right); ported text/quote from
   PS_Granites_Brochure p.2. Image placeholder is desktop-only. */
.who-we-are p{ max-width:68ch; }
.pull-quote{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.1rem,2vw,1.5rem); color:var(--ink); border-left:2px solid var(--brass); padding-left:1.2rem; margin:1.8rem 0 0; }
.section.dark .pull-quote{ color:var(--ivory); }
@media (max-width:860px){ .who-we-are-visual{ display:none; } }

/* "End-to-end supply & finishing" — replaces the old capacity/rating stats
   strip; three services in one row, kept compact (tight head margin, single
   short paragraph per card) so the section holds roughly the same height. */
.supply-head{ margin-bottom:1.8rem; }
.supply-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.supply-card{ border:1px solid var(--line-dark); border-radius:var(--radius); padding:1.6rem 1.5rem; transition:border-color 0.25s ease, background 0.25s ease; }
.supply-card:hover{ border-color:var(--brass-dim); background:rgba(180,145,91,0.05); }
.supply-card h3{ font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--ivory); margin-bottom:0.6rem; }
.supply-card p{ font-size:0.88rem; line-height:1.5; color:var(--slate); }
@media (max-width:860px){ .supply-grid{ grid-template-columns:1fr; } }

/* stats */
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:2.4rem 0; margin-top:3rem; }
.stat .num{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); color:var(--brass); display:block; }
.stat .cap{ font-size:0.82rem; color:var(--slate); margin-top:0.4rem; }
@media (max-width:800px){ .stats-row{ grid-template-columns:1fr 1fr; } }

/* facility machinery grid */
.facility-head{ max-width:70ch; margin-bottom:3rem; }
.facility-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); }
.machine-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-light); border-left:1px solid var(--line-light); }
.machine-item{ border-right:1px solid var(--line-light); border-bottom:1px solid var(--line-light); padding:2rem 1.6rem; transition:background 0.25s ease; }
.machine-item:hover{ background:rgba(180,145,91,0.08); }
/* These six reasons aren't a sequence, so the lead phrase of each (already
   present in the copy) is the structural anchor instead of a 01-06 count —
   numbering a non-sequence is exactly the kind of decorative marker to avoid. */
.machine-item .mi-name{ font-size:0.95rem; line-height:1.5; color:#4b463c; }
.machine-item .mi-name strong{ font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--ink); display:block; margin-bottom:0.4rem; }
/* The homepage's "Why builders choose us" reuses this same grid on a dark
   section — flip the border/text colors back for that context only. */
.section.dark .machine-grid{ border-top-color:var(--line-dark); border-left-color:var(--line-dark); }
.section.dark .machine-item{ border-right-color:var(--line-dark); border-bottom-color:var(--line-dark); }
.section.dark .machine-item .mi-name{ color:var(--slate); }
.section.dark .machine-item .mi-name strong{ color:var(--ivory); }
@media (max-width:1000px){ .machine-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .machine-grid{ grid-template-columns:1fr; } }

.tag-row{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.6rem; }
.tag{ border:1px solid var(--line-light); padding:0.55rem 1.1rem; font-size:0.86rem; border-radius:20px; color:#3a362e; }
.section.dark .tag{ border-color:var(--line-dark); color:var(--ivory); }

.plain-list{ list-style:none; display:flex; flex-direction:column; margin-top:1.5rem; }
.plain-list li{ padding:0.9rem 0; border-bottom:1px solid var(--line-light); font-size:0.98rem; display:flex; justify-content:space-between; }
.section.dark .plain-list li{ border-color:var(--line-dark); }

/* dual location cards (About / Contact) */
.location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
.loc-card{ border:1px solid var(--line-light); padding:2rem; }
.loc-card .loc-tag{ font-size:0.78rem; color:var(--brass); font-weight:500; margin-bottom:0.8rem; display:block; }
.loc-card h3{ font-size:1.2rem; margin-bottom:0.9rem; }
.loc-card p{ font-size:0.92rem; color:#4b463c; margin-bottom:0.3rem; }
.loc-card .loc-actions{ margin-top:1.2rem; display:flex; gap:0.8rem; flex-wrap:wrap; }
@media (max-width:800px){ .location-grid{ grid-template-columns:1fr; } }

/* ============================================================
   COLLECTION TILES (Home)
   ============================================================ */
.collections{ background:var(--stone-black); color:var(--ivory); padding:clamp(4rem,8vw,7rem) 0; }
.collection-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.collection-card{ position:relative; aspect-ratio:3/3.2; overflow:hidden; display:flex; align-items:flex-end; padding:1.3rem; }
.collection-card h3{ color:var(--ivory); font-size:1.05rem; position:relative; z-index:2; }
.collection-card .cta-tiny{ position:relative; z-index:2; font-size:0.76rem; color:var(--slate); margin-top:0.25rem; display:block; }
.collection-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.05) 55%); z-index:1; }
.collection-card:hover h3{ color:var(--brass); transition:color 0.2s ease; }
.collection-card.has-photo{ background-size:cover; background-position:center; transition:transform 0.4s ease; }
.collection-card.has-photo::after{ background:linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.05) 100%); }
.collection-card.has-photo:hover{ transform:scale(1.02); }
.ctone-0{ background:linear-gradient(145deg,#2b2925,#0a0a09 60%,#1c1a17); }
.ctone-1{ background:linear-gradient(145deg,#1a1a22,#050508 55%,#26263a); }
.ctone-2{ background:linear-gradient(145deg,#5c5b56,#2f2e2b 60%,#7a7973); }
.ctone-3{ background:linear-gradient(145deg,#2e4a5c,#101c22 60%,#3f6478); }
.ctone-4{ background:linear-gradient(145deg,#5a3c26,#20140c 60%,#7a5636); }
.ctone-5{ background:linear-gradient(145deg,#d8d2c4,#a29c8c 60%,#efeadd); }
.ctone-5 h3, .ctone-5 .cta-tiny{ color:#20180f; }
.ctone-5::after{ background:linear-gradient(0deg, rgba(20,15,8,0.55) 0%, rgba(0,0,0,0.02) 55%); }
.ctone-6{ background:linear-gradient(145deg,#3c3a34,#17160f 60%,#57544a); }
@media (max-width:1100px){ .collection-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .collection-grid{ grid-template-columns:1fr 1fr; gap:0.7rem;} }

/* ---- hero trust chip (rating line under the hero paragraph) ---- */
.trust-chip{ display:inline-flex; align-items:center; gap:0.45rem; font-size:0.82rem; color:var(--slate); border:1px solid var(--line-dark); padding:0.5rem 0.9rem; align-self:flex-start; }
.trust-chip strong{ color:var(--brass); font-family:var(--font-display); }
.trust-chip .star-ico{ color:var(--brass); flex-shrink:0; }

/* ---- signature-granite swatch grid (reuses .collection-card.has-photo) ---- */
.swatch-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-bottom:2.2rem; }
.swatch-grid .collection-card{ aspect-ratio:3/3.4; }
.swatch-grid .fam{ position:relative; z-index:2; font-size:0.7rem; color:var(--brass); display:block; margin-bottom:0.2rem; }
.showcase-split{ margin-top:4.5rem; padding-top:3.4rem; border-top:1px solid var(--line-dark); }
@media (max-width:900px){ .swatch-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---- trusted-by client band (Home) ---- */
.trusted-band{ border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); padding:2.6rem 0; }
.trusted-band .tb-group{ display:grid; grid-template-columns:220px 1fr; gap:1.5rem; padding:1rem 0; border-bottom:1px solid var(--line-light); align-items:baseline; }
.trusted-band .tb-group:last-child{ border-bottom:none; }
.trusted-band .tb-group h4{ font-size:0.78rem; color:#8a8577; font-weight:600; }
.trusted-band .tb-group p{ font-size:0.98rem; color:#2b2720; }
@media (max-width:700px){ .trusted-band .tb-group{ grid-template-columns:1fr; gap:0.4rem; } }

/* ---- closing CTA: copy beside a live enquiry form (Home) ---- */
.cta-with-form{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:3.5rem; align-items:start; }
.cta-with-form .contact-form{ background:rgba(243,238,228,0.04); border:1px solid var(--line-dark); padding:1.8rem; }
.cta-with-form .field label{ color:var(--slate); }
.cta-with-form .field input, .cta-with-form .field select, .cta-with-form .field textarea{ background:rgba(243,238,228,0.06); border-color:var(--line-dark); color:var(--ivory); }
@media (max-width:900px){ .cta-with-form{ grid-template-columns:1fr; } }

/* Newsletter signup — placeholder markup only (no real subscribe
   endpoint yet; see the comment beside it in includes/footer.php). Sits
   under the enquiry/WhatsApp pair in the closing CTA's copy column. */
.newsletter-box{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line-dark); max-width:420px; }
.newsletter-box strong{ display:block; font-family:var(--font-display); font-size:1rem; font-weight:500; color:var(--ivory); margin-bottom:0.3rem; }
.newsletter-box p{ font-size:0.85rem; color:var(--slate); margin-bottom:0.9rem; }
.newsletter-form{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.newsletter-form input{ flex:1; min-width:180px; background:rgba(243,238,228,0.06); border:1px solid var(--line-dark); color:var(--ivory); padding:0.6rem 0.9rem; font-family:inherit; font-size:0.85rem; border-radius:20px; }
.newsletter-form input::placeholder{ color:var(--slate); }
.newsletter-form input:focus{ outline:none; border-color:var(--brass); }
.newsletter-form .btn-primary{ padding:0.55rem 1.1rem; border-radius:20px; font-size:0.82rem; flex-shrink:0; }

/* ============================================================
   PRODUCT CATALOGUE (products.html + 14 category pages)
   ============================================================ */
.autocomplete{ position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--line-light); border-radius:var(--radius); box-shadow:0 12px 28px rgba(0,0,0,0.12); max-height:280px; overflow-y:auto; z-index:40; display:none; }
.autocomplete.show{ display:block; }
.autocomplete .ac-item{ padding:0.7rem 1rem; font-size:0.88rem; display:flex; justify-content:space-between; cursor:pointer; }
.autocomplete .ac-item:hover{ background:var(--ivory-dim); }
.autocomplete .ac-item small{ color:#8a8577; }

/* Listing + product-detail pages (all now crumb-bar-only, no page-hero) —
   full-width now that the category sidebar is gone. Top/bottom padding
   matches .section's so the gap under the crumb bar reads the same as the
   gap under .page-hero on About/Contact. */
.container > main{ display:block; padding:clamp(3.5rem,7vw,6rem) 0; }

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .grid{ grid-template-columns:repeat(2,1fr); gap:1rem;} }

/* ---- Listing head: catalog/category name + "switch catalog/category" ---- */
.listing-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem 2.5rem; flex-wrap:wrap; margin-bottom:2.6rem; padding-bottom:2rem; border-bottom:1px solid var(--line-light); }
.listing-head-copy{ max-width:62ch; }
.listing-head h1{ font-size:clamp(1.7rem,2.8vw,2.5rem); margin-top:0.35rem; }
.listing-head-copy p{ color:#75705f; font-size:0.92rem; margin-top:0.7rem; max-width:56ch; }
/* Holds one or two .subcat-switch dropdowns (category page: catalog +
   category; catalog page: category only) side by side. */
.listing-filters{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.subcat-switch{ display:flex; flex-direction:column; gap:0.45rem; flex-shrink:0; }
.subcat-switch label{ font-size:0.76rem; color:#8a8577; }
.subcat-switch select{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--line-light); border-radius:var(--radius); background-color:#fff;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23201C16" stroke-width="1.6"/></svg>');
  background-repeat:no-repeat; background-position:right 1rem center;
  padding:0.8rem 2.6rem 0.8rem 1.1rem; min-width:240px; font-family:inherit; font-size:0.9rem; color:var(--ink);
  cursor:pointer; transition:border-color 0.2s ease;
}
.subcat-switch select:hover{ border-color:var(--rust); }
.subcat-switch select:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
@media (max-width:640px){
  .listing-head{ align-items:flex-start; }
  .listing-filters{ width:100%; }
  .subcat-switch{ width:100%; }
  .subcat-switch select{ min-width:0; width:100%; }
}

/* Standard product card — used for every catalogue/category/search grid,
   the homepage featured strip, and "Products You May Like" on the product
   detail page. One definition, one look, everywhere a product is listed. */
.card{ display:block; background:#fff; border-radius:var(--card-radius); overflow:hidden; box-shadow:0 2px 10px rgba(21,19,15,0.06); transition:box-shadow 0.2s ease, transform 0.2s ease; }
.card:hover{ box-shadow:0 8px 22px rgba(21,19,15,0.12); transform:translateY(-2px); }
.card .thumb{ aspect-ratio:1/1; position:relative; overflow:hidden; background:var(--quarry); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.card:hover .thumb img{ transform:scale(1.05); }
.card .body{ padding:1rem 1.1rem 1.2rem; }
.card h3{ font-family:var(--font-display); font-size:1.02rem; font-weight:500; margin-bottom:0.2rem; }
.card .meta{ font-size:0.82rem; color:#8a8577; margin-bottom:0.6rem; }
.card .price{ font-size:0.92rem; color:var(--ink); font-weight:600; margin-bottom:0.7rem; }
.card .view{ display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; font-weight:500; color:var(--enquiry-green); padding-top:0.7rem; border-top:1px solid var(--line-light); }
.card .view svg{ transition:transform 0.2s ease; flex-shrink:0; }
.card:hover .view svg{ transform:translateX(3px); }

.pagination{ display:flex; justify-content:center; gap:0.5rem; margin-top:3.2rem; }
.pagination button, .pagination a{ width:38px; height:38px; border:1px solid var(--line-light); font-size:0.88rem; border-radius:var(--radius); }
.pagination button.active, .pagination a.active{ background:var(--stone-black); color:var(--ivory); border-color:var(--stone-black); }
.pagination button:hover:not(.active), .pagination a:hover:not(.active){ border-color:var(--rust); color:var(--rust); }

/* quick view modal */
.qv-backdrop{ position:fixed; inset:0; background:rgba(10,9,7,0.72); z-index:100; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.qv-backdrop.open{ display:flex; }
.qv-modal{ background:var(--ivory); width:100%; max-width:1020px; max-height:90vh; overflow-y:auto; display:grid; grid-template-columns:1.1fr 1fr; position:relative; }
.qv-close{ position:absolute; top:1rem; right:1rem; z-index:5; width:38px; height:38px; border-radius:50%; background:rgba(21,19,15,0.85); color:var(--ivory); font-size:1.1rem; display:flex; align-items:center; justify-content:center; }
.qv-media{ display:flex; flex-direction:column; background:var(--stone-black); }
.qv-slide-viewport{ position:relative; overflow:hidden; aspect-ratio:1/1; }
.qv-slide-track{ display:flex; height:100%; transition:transform 0.35s ease; }
.qv-slide-track .qv-slide{ flex:0 0 100%; height:100%; position:relative; }
.qv-slide-track .qv-slide img{ width:100%; height:100%; object-fit:cover; }
.qv-nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:rgba(21,19,15,0.55); color:var(--ivory); font-size:1.2rem; display:flex; align-items:center; justify-content:center; z-index:5; }
.qv-nav.prev{ left:1rem; } .qv-nav.next{ right:1rem; }
.qv-nav:hover{ background:var(--brass); color:var(--stone-black); }
.qv-thumbs{ display:flex; gap:0.7rem; padding:0.9rem; background:var(--quarry); overflow-x:auto; }
.qv-thumbs button{ width:58px; height:58px; flex:0 0 58px; border-radius:var(--radius); position:relative; overflow:hidden; border:2px solid transparent; opacity:0.55; transition:opacity 0.2s ease, border-color 0.2s ease; }
.qv-thumbs button img{ width:100%; height:100%; object-fit:cover; }
.qv-thumbs button.active{ opacity:1; border-color:var(--brass); }
.qv-thumbs button:hover{ opacity:0.9; }

.qv-info{ padding:2.2rem; display:flex; flex-direction:column; gap:1.1rem; }
.qv-info h2{ font-size:1.55rem; }
.qv-info .price{ font-size:1rem; color:var(--rust); font-weight:500; }
.qv-specs{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem 1rem; border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); padding:1.1rem 0; max-height:180px; overflow-y:auto; }
.qv-specs div small{ display:block; color:#8a8577; font-size:0.74rem; margin-bottom:0.2rem; }
.qv-specs div strong{ font-size:0.85rem; font-weight:500; line-height:1.3; }
.qv-desc{ font-size:0.88rem; color:#4b463c; line-height:1.55; }
.qv-actions{ display:flex; gap:0.9rem; margin-top:0.2rem; flex-wrap:wrap; }
@media (max-width:820px){ .qv-modal{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:4rem; align-items:start; }
.contact-cards{ display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.contact-card{ border:1px solid var(--line-light); padding:1.4rem 1.6rem; display:flex; gap:1rem; align-items:flex-start; }
.contact-card .ico{ width:38px; height:38px; border:1px solid var(--line-light); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--rust); }
.contact-card strong{ display:block; font-size:0.95rem; margin-bottom:0.2rem; }
.contact-card span{ font-size:0.88rem; color:#4b463c; }
.contact-form{ display:flex; flex-direction:column; gap:1rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{ display:block; font-size:0.8rem; color:#4b463c; margin-bottom:0.4rem; }
.field input, .field select, .field textarea{ width:100%; border:1px solid var(--line-light); padding:0.85rem 0.9rem; font-family:inherit; font-size:0.92rem; border-radius:var(--radius); background:#fff; }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass); }
.map-embed{ margin-top:3rem; aspect-ratio:16/6; border:1px solid var(--line-light); overflow:hidden; background:var(--stone-black); }
/* The embed iframe only accepts Google's default light skin (no custom
   JSON styling without switching to the paid JS Maps API), so the palette
   match is done with a CSS filter instead — recolours the map to a dark,
   muted ground so it reads as part of the site rather than an embedded
   widget dropped on top of it. */
.map-embed iframe{ width:100%; height:100%; border:0; filter:invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.85) saturate(0.7); }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; gap:2.5rem; } .form-row{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER (injected by partials.js)
   ============================================================ */
footer{ background:#0f0d0a; color:var(--slate); padding:1rem 0; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; flex-wrap:wrap; gap:0.8rem 1.6rem; }
.footer-trust{ display:flex; gap:1.1rem; flex-wrap:wrap; color:var(--slate); }
.footer-trust span{ padding-left:1.1rem; border-left:1px solid var(--line-dark); }
.footer-trust span:first-child{ padding-left:0; border-left:none; }
@media (max-width:600px){ .footer-bottom{ justify-content:center; text-align:center; } }

.logo-img{ height:34px; width:auto; display:block; }

/* ============================================================
   PRODUCT DETAIL PAGE — full-width like every other listing page now.
   ============================================================ */
/* Full-bleed ivory section (sibling of .crumb-bar, not nested in a plain
   .container) so the ivory ground spans the viewport; .container inside
   keeps the gallery/info grid at the same width and alignment as before. */
main.product-main-section{ display:block; background:var(--ivory); padding:clamp(3.5rem,7vw,6rem) 0; }
.product-main{ display:grid; grid-template-columns:1fr 1fr; gap:2.8rem; align-items:start; }

/* Caps at the same 52vh the image itself is capped at, so on wide columns
   the box centres instead of stretching; on narrow columns (where the
   image would shrink below that cap anyway) it simply fills the column.
   The thumbnail row inherits this same width, so its left edge always
   lines up with the slider's — whichever way the slider itself resolves. */
.product-gallery-col{ max-width:52vh; margin:0 auto; }

.product-gallery-main{ position:relative; aspect-ratio:1/1; max-height:52vh; overflow:hidden; background:var(--quarry); border-radius:var(--card-radius); }
.product-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.product-gallery-main .cat-pill{ position:absolute; top:1rem; left:1rem; background:rgba(255,255,255,0.92); color:var(--enquiry-green); font-size:0.72rem; font-weight:600; padding:0.4rem 0.9rem; border-radius:20px; z-index:2; }
.gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; color:var(--ink); z-index:2; }
.gallery-nav.prev{ left:0.8rem; } .gallery-nav.next{ right:0.8rem; }
.gallery-count{ position:absolute; right:0.8rem; bottom:0.8rem; background:rgba(21,19,15,0.7); color:#fff; font-size:0.74rem; padding:0.2rem 0.55rem; border-radius:12px; z-index:2; }

.product-gallery-thumbs{ display:flex; gap:0.6rem; margin-top:0.6rem; flex-wrap:wrap; }
.product-gallery-thumbs button{ width:58px; height:58px; border-radius:8px; overflow:hidden; border:2px solid transparent; opacity:0.6; padding:0; cursor:pointer; background:none; transition:opacity 0.2s ease, border-color 0.2s ease; }
.product-gallery-thumbs button.active{ opacity:1; border-color:var(--enquiry-green); }
.product-gallery-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

.product-info .eyebrow{ display:block; font-size:0.74rem; font-weight:600; letter-spacing:0.06em; color:var(--enquiry-green); text-transform:uppercase; margin-bottom:0.3rem; }
.product-info h1{ font-family:var(--font-display); font-size:1.5rem; font-weight:500; margin-bottom:0.4rem; white-space:nowrap; overflow:hidden; }
.product-info .price{ font-family:var(--font-display); font-size:1.15rem; color:var(--enquiry-green); margin-bottom:0.5rem; }
.specs-head{ font-size:0.98rem; margin-bottom:0.4rem; }
.product-specs-table{ display:flex; flex-direction:column; margin-bottom:0.9rem; max-height:186px; overflow-y:auto; padding-right:0.4rem; }
.spec-row{ display:flex; align-items:center; gap:0.6rem; padding:0.35rem 0; border-bottom:1px solid var(--line-light); font-size:0.82rem; line-height:1.3; }
.spec-row .ic{ width:22px; height:22px; border-radius:50%; background:#eef1ea; color:var(--enquiry-green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.spec-row .ic svg{ width:11px; height:11px; }
.spec-row .lbl{ color:#75705f; flex:0 0 130px; }
.spec-row .val{ font-weight:500; color:var(--ink); }
.product-description{ font-size:0.86rem; color:#4b463c; line-height:1.5; margin-bottom:0.9rem; }
.product-description.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-actions{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:0.3rem; }
.product-actions .btn{ flex:1; min-width:180px; border-radius:8px; }
.btn-enquiry{ background:var(--enquiry-green); color:#fff; }
.btn-enquiry:hover{ background:#334b30; color:#fff; }
.btn-whatsapp-outline{ background:#fff; color:var(--ink); border:1.5px solid #dcd8cd; }
.btn-whatsapp-outline svg{ color:var(--whatsapp-green); }
.btn-whatsapp-outline:hover{ border-color:var(--whatsapp-green); }

/* Full-bleed section (sibling of .container > main, not nested inside it)
   so it spans the viewport; .container inside it keeps the row/scroll
   content at the same width and alignment as before. White ground here
   contrasts against the ivory .product-main-section right above it. */
.related-products{ background:#fff; padding:clamp(3rem,6vw,5rem) 0; }
.related-products .rp-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2rem; gap:1.5rem; flex-wrap:wrap; }
.related-products .eyebrow{ display:block; font-size:0.78rem; font-weight:600; letter-spacing:0.06em; color:var(--enquiry-green); text-transform:uppercase; margin-bottom:0.5rem; }
.related-products h2{ font-family:var(--font-display); font-size:1.9rem; font-weight:500; margin-bottom:0.4rem; }
.related-products .rp-sub{ color:#75705f; font-size:0.92rem; }
.rp-arrows{ display:flex; gap:0.6rem; flex-shrink:0; }
.rp-arrows button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-light); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; transition:background 0.2s ease, color 0.2s ease; }
.rp-arrows button:hover{ background:var(--enquiry-green); color:#fff; border-color:var(--enquiry-green); }
.rp-scroll{ display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:0.3rem; }
.rp-scroll::-webkit-scrollbar{ display:none; }
.rp-scroll .card{ flex:0 0 calc(25% - 1.05rem); scroll-snap-align:start; }
@media (max-width:1100px){ .rp-scroll .card{ flex-basis:calc(33.333% - 1rem); } }
@media (max-width:700px){ .rp-scroll .card{ flex-basis:calc(70% - 1rem); } }

@media (max-width:900px){
  .product-main{ grid-template-columns:1fr; }
  .product-info h1{ white-space:normal; }
}

/* ---- scroll to top (created by partials.js) ---- */
.scroll-top{ position:fixed; right:1.4rem; bottom:1.4rem; z-index:60; width:46px; height:46px; border-radius:50%; background:var(--stone-black); color:var(--ivory); display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 6px 18px rgba(0,0,0,0.3); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity 0.25s ease, transform 0.25s ease, background 0.2s ease; }
.scroll-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.scroll-top:hover{ background:var(--brass); color:var(--stone-black); }