/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */
:root{
  /* Brand palette */
  --cream:        #fff6f0;   /* page background */
  --cream-deep:   #f7e9dd;   /* tinted panels / cards */
  --brown:        #58381e;   /* primary text + navigation */
  --brown-soft:   #7a5a3d;   /* secondary text */
  --brown-deep:   #3e2713;   /* footer base / shadows */
  --brass:        #c5a059;   /* buttons + accents */
  --brass-deep:   #a98643;   /* button hover */
  --maple:        #e8c9a0;   /* illustration: maple tiles */
  --maple-light:  #f2dcbd;
  --walnut:       #6e4526;   /* illustration: walnut tiles */
  --walnut-light: #8a5c35;
  /* Type */
  --font-display: "Warbler", "Warbler Text", "Fraunces", Georgia, serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Caveat", cursive;
  /* Layout */
  --max-width: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 14px;
  --header-h: 76px;
  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}
/* ==========================================================
   2. RESET & BASE
   ========================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--cream);
  color:var(--brown);
  font-family:var(--font-body);
  font-size:1.0625rem;          /* 17px base */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;            /* guards against parallax overflow */
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.015em;
  text-wrap:balance;
}
.container{ max-width:var(--max-width); margin-inline:auto; padding-inline:var(--gutter); }
section{ padding-block:var(--section-pad); }
/* Eyebrow label used to introduce each section */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass-deep);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--brass);
}
/* Section headings share one scale */
.section-title{ font-size:clamp(1.9rem, 4vw, 2.9rem); max-width:21ch; }
.section-intro{ color:var(--brown-soft); max-width:58ch; margin-top:1rem; }
/* Keyboard focus — visible everywhere */
:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; border-radius:4px; }
/* ==========================================================
   3. BUTTONS — fluid hover states
   ========================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.9rem;
  border-radius:999px;
  font-weight:600; font-size:.97rem; letter-spacing:.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
  will-change:transform;
}
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn:active{ transform:translateY(0) scale(.98); }
/* Primary — brass */
.btn-primary{
  background:var(--brass); color:var(--cream);
  box-shadow:0 4px 14px rgba(197,160,89,.35);
}
.btn-primary:hover{
  background:var(--brass-deep);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(169,134,67,.42);
}
/* Secondary — outlined brown that fills on hover */
.btn-secondary{
  border:2px solid var(--brown); color:var(--brown);
}
.btn-secondary:hover{
  background:var(--brown); color:var(--cream);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(88,56,30,.25);
}
/* ==========================================================
   4. HEADER — sticky, backdrop blur, mobile hamburger
   ========================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  background:rgba(255,246,240,.78);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(88,56,30,.08);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(255,246,240,.92);
  box-shadow:0 6px 24px rgba(88,56,30,.08);
}
.header-inner{
  max-width:var(--max-width); margin-inline:auto; padding-inline:var(--gutter);
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
/* Logo: wordmark + end-grain glyph */
.logo{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--font-display); font-weight:700;
  font-size:1.45rem; letter-spacing:.04em; color:var(--brown);
}
.logo svg{ width:30px; height:30px; }
/* Centered nav (desktop) */
.main-nav{ display:flex; gap:clamp(1.2rem, 2.5vw, 2.4rem); }
.main-nav a{
  position:relative; font-weight:500; font-size:.97rem; color:var(--brown);
  padding-block:.35rem;
}
/* Animated brass underline */
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:var(--brass);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.main-nav a:hover::after{ transform:scaleX(1); }
.header-cta{ flex-shrink:0; padding:.7rem 1.4rem; font-size:.9rem; }
/* Hamburger (hidden on desktop) */
.hamburger{
  display:none;
  width:44px; height:44px;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.hamburger span{
  width:24px; height:2.5px; border-radius:2px; background:var(--brown);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.hamburger.is-open span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }
/* Mobile menu panel */
.mobile-menu{
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:99;
  background:var(--cream);
  border-bottom:1px solid rgba(88,56,30,.1);
  box-shadow:0 20px 40px rgba(88,56,30,.12);
  padding:1rem var(--gutter) 2rem;
  transform:translateY(-110%);
  transition:transform .4s var(--ease);
  visibility:hidden;
}
.mobile-menu.is-open{ transform:translateY(0); visibility:visible; }
.mobile-menu a{
  display:block; padding:1rem .25rem;
  font-family:var(--font-display); font-size:1.35rem; font-weight:600;
  border-bottom:1px solid rgba(88,56,30,.08);
}
.mobile-menu .btn{ margin-top:1.4rem; width:100%; justify-content:center; }
/* ==========================================================
   5. HERO
   ========================================================== */
.hero{
  padding-top:calc(var(--header-h) + clamp(3rem, 8vw, 6.5rem));
  padding-bottom:var(--section-pad);
  position:relative;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center; gap:clamp(2.5rem, 5vw, 5rem);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--cream-deep);
  border:1px solid rgba(197,160,89,.4);
  color:var(--brown);
  font-size:.82rem; font-weight:600; letter-spacing:.04em;
  padding:.45rem 1rem; border-radius:999px; margin-bottom:1.6rem;
}
.hero-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--brass); }
.hero h1{
  font-size:clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight:700;
}
.hero h1 em{
  font-style:italic; font-weight:500; color:var(--brass-deep);
}
.hero h2{
  font-family:var(--font-body);
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight:400; line-height:1.6;
  color:var(--brown-soft);
  margin-top:1.4rem; max-width:46ch;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
/* Quiet proof points under the CTA */
.hero-points{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.2rem;
  margin-top:2.6rem;
  font-size:.88rem; font-weight:500; color:var(--brown-soft);
}
.hero-points li{ display:flex; align-items:center; gap:.5rem; }
.hero-points svg{ width:16px; height:16px; flex-shrink:0; }
/* Hero visual: floating board with parallax (JS-driven) */
.hero-visual{ position:relative; }
.hero-board{
  animation:float 7s ease-in-out infinite;
  will-change:transform;
  width:100%; height:auto;
  border-radius:var(--radius);
  box-shadow:0 30px 60px rgba(88,56,30,.3), 0 8px 20px rgba(88,56,30,.18);
}
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%    { transform:translateY(-14px) rotate(.6deg); }
}
/* Soft brass halo behind the board */
.hero-visual::before{
  content:""; position:absolute; inset:8% 4%;
  background:radial-gradient(closest-side, rgba(197,160,89,.22), transparent 72%);
  z-index:-1;
}
/* ==========================================================
   6. ADVANTAGES — 3 cards
   ========================================================== */
.advantages{ background:var(--cream-deep); }
.adv-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.25rem, 2.5vw, 2rem); margin-top:3rem;
}
.adv-card{
  background:var(--cream);
  border:1px solid rgba(88,56,30,.07);
  border-radius:var(--radius);
  padding:clamp(1.75rem, 3vw, 2.5rem);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.adv-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(88,56,30,.12);
}
.adv-card .icon{
  width:64px; height:64px; margin-bottom:1.5rem;
}
.adv-card h3{ font-size:1.35rem; margin-bottom:.8rem; }
.adv-card p{ color:var(--brown-soft); font-size:.97rem; }
.adv-card .tag{
  display:inline-block; margin-top:1.2rem;
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brass-deep);
}
/* ==========================================================
   7. PERSONALISED
   ========================================================== */
.personalised .grid{
  display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(2.5rem, 5vw, 5rem); align-items:center;
}
.personalised .section-title{ max-width:none; font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:500; line-height:1.25; }
.personalised .section-title strong{ font-weight:700; }
.pers-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.pers-visual{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 24px 50px rgba(88,56,30,.18);
  transition:transform .5s var(--ease);
}
.pers-visual:hover{ transform:scale(1.015); }
/* Small engraving-example chips below the visual */
.pers-chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.pers-chips span{
  font-family:var(--font-display); font-style:italic;
  font-size:.95rem; color:var(--brown);
  background:var(--cream-deep); border:1px solid rgba(197,160,89,.35);
  padding:.4rem 1rem; border-radius:999px;
}
/* ==========================================================
   8. PRODUCTION — central board, steps around it
   ========================================================== */
.production{ background:var(--brown); color:var(--cream); }
.production .eyebrow{ color:var(--brass); }
.production .section-title{ color:var(--cream); }
.production .section-intro{ color:rgba(255,246,240,.72); }
.prod-grid{
  display:grid;
  grid-template-columns:1fr minmax(280px, 420px) 1fr;
  gap:clamp(1.5rem, 3vw, 3rem);
  align-items:center; margin-top:3.5rem;
}
.prod-col{ display:flex; flex-direction:column; gap:clamp(1.5rem, 3vw, 2.6rem); }
.prod-step{ position:relative; padding-left:3.2rem; }
.prod-step .num{
  position:absolute; left:0; top:.1rem;
  width:2.2rem; height:2.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  color:var(--brown); background:var(--brass);
}
.prod-step h3{ font-size:1.15rem; margin-bottom:.35rem; color:var(--cream); }
.prod-step p{ font-size:.92rem; color:rgba(255,246,240,.7); line-height:1.55; }
.prod-center svg{
  width:100%; height:auto;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.35));
}
/* ==========================================================
   9. PRODUCTS — 4 collections
   ========================================================== */
.products-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(1.1rem, 2vw, 1.75rem); margin-top:3rem;
}
.product-card{
  display:block; border-radius:var(--radius); overflow:hidden;
  background:var(--cream-deep);
  border:1px solid rgba(88,56,30,.07);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 44px rgba(88,56,30,.16);
}
.product-card .thumb{ overflow:hidden; }
.product-card .thumb svg{ transition:transform .6s var(--ease); }
.product-card:hover .thumb svg{ transform:scale(1.06); }
.product-card .meta{ padding:1.4rem 1.5rem 1.6rem; }
.product-card h3{ font-size:1.25rem; }
.product-card p{ font-size:.9rem; color:var(--brown-soft); margin-top:.4rem; }
.product-card .link{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1rem; font-size:.85rem; font-weight:600; color:var(--brass-deep);
}
.product-card .link .arrow{ transition:transform .35s var(--ease); }
.product-card:hover .link .arrow{ transform:translateX(4px); }
/* ==========================================================
   10. ARTISAN'S NOTE
   ========================================================== */
.artisan{ background:var(--cream-deep); }
.artisan .grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem, 5vw, 5rem); align-items:center;
}
.artisan-photo{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 24px 50px rgba(88,56,30,.2);
}
.artisan blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight:500; line-height:1.45; font-style:italic;
  color:var(--brown);
  border-left:3px solid var(--brass);
  padding-left:1.6rem; margin-top:1.8rem;
}
.artisan .note-body{ margin-top:1.6rem; color:var(--brown-soft); max-width:56ch; }
.signature{
  margin-top:2rem;
  font-family:var(--font-script); font-size:2.6rem; line-height:1;
  color:var(--brown); transform:rotate(-3deg); display:inline-block;
}
.signature-role{ font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brown-soft); margin-top:.4rem; }
/* ==========================================================
   FAQ
   ========================================================== */
  section.faq{background:var(--maple-deep);padding:96px 0}
  .faq-wrap{max-width:760px;margin:0 auto}
  .faq h2{font-size:clamp(1.8rem,3vw,2.3rem);color:var(--walnut-ink);margin-bottom:40px;text-align:center}
  details{border-top:1px solid rgba(74,51,34,.18)}
  details:last-of-type{border-bottom:1px solid rgba(74,51,34,.18)}
  summary{cursor:pointer;list-style:none;font-family:var(--display);font-size:1.12rem;color:var(--walnut-ink);padding:22px 40px 22px 4px;position:relative}
  summary::-webkit-details-marker{display:none}
  summary::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:1.3rem;color:var(--brass);transition:transform .2s}
  details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
  details p{padding:0 4px 24px;font-size:.93rem;max-width:64ch}
  .faq-more{text-align:center;margin-top:36px}	
	
/* ==========================================================
   11. FOOTER — dark brown, cream text
   ========================================================== */
.site-footer{
  background:var(--brown); color:var(--cream);
  padding:clamp(3.5rem, 7vw, 6rem) 0 2rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(2rem, 4vw, 3.5rem);
}
.footer-brand .logo{ color:var(--cream); margin-bottom:1.1rem; }
.footer-brand p{ font-size:.92rem; max-width:32ch; }
.site-footer h4{
  font-family:var(--font-body); font-size:.8rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--brass); margin-bottom:1.2rem;
}
.site-footer ul li{ margin-bottom:.7rem; }
.site-footer ul a{
  font-size:.95rem; color:rgba(255,246,240,.82);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.site-footer ul a:hover{ color:var(--brass); padding-left:4px; }
.footer-bottom{
  margin-top:clamp(2.5rem, 5vw, 4rem); padding-top:1.6rem;
  border-top:1px solid rgba(255,246,240,.14);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:.83rem; color:rgba(255,246,240,.55);
}
.footer-brand address, 
	.footer-email-link {
		color:var(--cream);
		font-size:.92rem;
		padding-top: 10px;
}	
	
.footer-social-icons a:hover img,
.footer-email-link:hover {
  opacity: 0.6;
}
/* Social icons */
.footer-social-icons {
  display: flex;
  gap: 10px;
  margin: 10px;
  transition: opacity 0.3s ease;
}
.footer-social-icons img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
	
	
.footer-payment-methods {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.footer-payment-methods img {
  object-fit: contain;
  height: clamp(14px, 2vw, 19px);
}
/* ==========================================================
   12. SCROLL REVEAL (JS adds .is-visible)
   ========================================================== */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
/* Stagger helpers */
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
/* ==========================================================
   13. RESPONSIVE
   ========================================================== */
@media (max-width: 1024px){
  .products-grid{ grid-template-columns:repeat(2, 1fr); }
  .prod-grid{
    grid-template-columns:1fr;            /* board on top, steps stacked */
  }
  .prod-center{ order:-1; max-width:380px; margin-inline:auto; }
}
@media (max-width: 880px){
  .main-nav, .header-cta{ display:none; }   /* collapse to hamburger */
  .hamburger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:440px; margin-inline:auto; }
  .personalised .grid,
  .artisan .grid{ grid-template-columns:1fr; }
  .artisan-photo{ max-width:420px; }
}
@media (max-width: 680px){
  .adv-grid{ grid-template-columns:1fr; }   /* cards stack on mobile */
  .products-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .pers-actions .btn{ width:100%; justify-content:center; }
}
@media (max-width: 400px){
  .footer-grid{ grid-template-columns:1fr; }
  body{ font-size:1rem; }
}
/* ==========================================================
   14. REDUCED MOTION — respect user preference
   ========================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-board{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ==========================================================
   PRODUCT PAGES  —  append to cloumann.css
   Uses only the existing design tokens (:root) and reuses the
   .artisan, .products / .product-card and details/summary patterns.
   ========================================================== */

/* ----- Breadcrumb -------------------------------------------------------- */
.breadcrumb{
  padding-top:calc(var(--header-h) + 1.4rem);
  padding-bottom:.2rem;
}
.breadcrumb ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:.82rem; color:var(--brown-soft);
}
.breadcrumb li{ display:flex; align-items:center; gap:.5rem; }
.breadcrumb li + li::before{ content:"/"; color:rgba(88,56,30,.35); }
.breadcrumb a{ color:var(--brown-soft); transition:color .25s var(--ease); }
.breadcrumb a:hover{ color:var(--brass-deep); }
.breadcrumb [aria-current="page"]{ color:var(--brown); font-weight:600; }

/* ----- Product hero ------------------------------------------------------ */
.product{ padding-top:clamp(1.5rem, 3vw, 2.5rem); }
.product-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 4vw, 4rem); align-items:start;
}

/* Gallery */
.product-gallery{ position:sticky; top:calc(var(--header-h) + 1.5rem); }
.gallery-main{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--cream-deep);
  box-shadow:0 24px 50px rgba(88,56,30,.18);
}
.gallery-main img{ width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
.gallery-badge{
  position:absolute; top:1rem; left:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,246,240,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(197,160,89,.4); color:var(--brown);
  font-size:.76rem; font-weight:600; letter-spacing:.04em;
  padding:.4rem .85rem; border-radius:999px;
}
.gallery-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--brass); }
.gallery-thumbs{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:.75rem; margin-top:.85rem;
}
.gallery-thumb{
  border-radius:10px; overflow:hidden; padding:0;
  border:2px solid transparent; background:var(--cream-deep);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.gallery-thumb img{ width:100%; height:100%; aspect-ratio:1 / 1; object-fit:cover; }
.gallery-thumb:hover{ transform:translateY(-2px); }
.gallery-thumb.is-active{ border-color:var(--brass); }

/* Info column */
.product-info .eyebrow{ margin-bottom:.9rem; }
.product-title{ font-size:clamp(1.8rem, 3.6vw, 2.7rem); }
.product-price{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
  margin-top:1.1rem; font-family:var(--font-display);
}
.product-price .amount{ font-size:1.9rem; font-weight:600; color:var(--brown); }
.product-price .meta{ font-family:var(--font-body); font-size:.85rem; color:var(--brown-soft); }
.product-intro{ margin-top:1.3rem; color:var(--brown-soft); max-width:48ch; }
.product-intro strong{ color:var(--brown); font-weight:600; }

/* Buy block */
.buy{ margin-top:1.8rem; }
.btn-buy{ width:100%; justify-content:center; font-size:1.02rem; padding:1.1rem 1.9rem; }
.buy-note{ margin-top:.8rem; font-size:.82rem; color:var(--brown-soft); text-align:center; }

/* Assurances */
.product-assurances{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem;
  margin-top:2.2rem; padding-top:2rem; border-top:1px solid rgba(88,56,30,.1);
}
.assurance{ display:flex; gap:.7rem; }
.assurance svg{ width:22px; height:22px; flex-shrink:0; margin-top:.15rem; }
.assurance strong{ display:block; font-size:.92rem; color:var(--brown); }
.assurance span{ font-size:.84rem; color:var(--brown-soft); }

/* ----- Details: specs + accordions -------------------------------------- */
.product-details{ background:var(--cream-deep); }
.details-grid{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem, 4vw, 4rem); align-items:start;
}
.spec-table{
  width:100%; border-collapse:collapse; background:var(--cream);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 10px 30px rgba(88,56,30,.08);
}
.spec-table caption{
  text-align:left; font-family:var(--font-display);
  font-size:1.2rem; font-weight:600; color:var(--brown); margin-bottom:1rem;
}
.spec-table th, .spec-table td{
  text-align:left; padding:.85rem 1.1rem; font-size:.92rem;
  border-bottom:1px solid rgba(88,56,30,.08);
}
.spec-table th{ width:38%; color:var(--brown); font-weight:600; background:rgba(197,160,89,.08); }
.spec-table td{ color:var(--brown-soft); }
.spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom:none; }

.product-accordions details{ border-top:1px solid rgba(88,56,30,.16); }
.product-accordions details:last-of-type{ border-bottom:1px solid rgba(88,56,30,.16); }
.product-accordions summary{
  cursor:pointer; list-style:none; position:relative;
  padding:1.2rem 2.2rem 1.2rem 0;
  font-family:var(--font-display); font-size:1.12rem; font-weight:600; color:var(--brown);
}
.product-accordions summary::-webkit-details-marker{ display:none; }
.product-accordions summary::after{
  content:'+'; position:absolute; right:.3rem; top:50%;
  transform:translateY(-50%); font-family:var(--font-body);
  font-size:1.4rem; color:var(--brass); transition:transform .25s var(--ease);
}
.product-accordions details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.product-accordions p{ padding:0 0 1.4rem; color:var(--brown-soft); font-size:.95rem; max-width:60ch; }

/* ----- Trust strip ------------------------------------------------------- */
.trust-strip{ background:var(--brown); color:var(--cream); padding-block:clamp(2.5rem, 4vw, 3.5rem); }
.trust-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:1.5rem; }
.trust-item{ text-align:center; }
.trust-item svg{ width:30px; height:30px; margin:0 auto .7rem; }
.trust-item strong{ display:block; font-family:var(--font-display); font-size:1rem; color:var(--cream); }
.trust-item span{ font-size:.8rem; color:rgba(255,246,240,.7); }

/* ----- "You may also like" price + image hover (parity with home cards) -- */
.product-card .thumb img{ transition:transform .6s var(--ease); }
.product-card:hover .thumb img{ transform:scale(1.06); }
.product-card .price{
  display:block; margin-top:.5rem; font-family:var(--font-display);
  font-weight:600; color:var(--brown); font-size:1.05rem;
}

/* ----- Responsive -------------------------------------------------------- */
@media (max-width: 880px){
  .product-grid{ grid-template-columns:1fr; }
  .product-gallery{ position:static; }
  .details-grid{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 560px){
  .product-assurances{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:repeat(2, 1fr); }
  .gallery-main img{ aspect-ratio:1 / 1; }
}


/* ----------------------------------------------------------
   0. TOKEN ALIASES  (bug fix)
   The existing .faq block in cloumann.css references four
   variables that were never declared: --maple-deep,
   --walnut-ink, --display, --sans. Because they are
   undefined, the FAQ currently falls back to inherited
   fonts/colours. These aliases point them at the real
   tokens so the FAQ renders as intended on every page.
   ---------------------------------------------------------- */
:root{
  --maple-deep:  var(--cream-deep);
  --walnut-ink:  var(--brown);
  --display:     var(--font-display);
  --sans:        var(--font-body);
}

/* ----------------------------------------------------------
   1. PAGE BANNER
   The slim header band that sits directly beneath the fixed
   site header. Its top padding clears the 76px header so the
   first line of content is never hidden behind it.
   ---------------------------------------------------------- */
.page-banner{
  background:var(--cream-deep);
  border-bottom:1px solid rgba(88,56,30,.08);
  padding-top:calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom:clamp(2.25rem, 5vw, 3.75rem);
}
.page-banner h1{
  font-size:clamp(2.1rem, 4.6vw, 3.4rem);
  max-width:20ch;
}
.page-banner .page-intro{
  color:var(--brown-soft);
  max-width:60ch;
  margin-top:1rem;
  font-size:clamp(1rem, 1.4vw, 1.12rem);
}

/* ----------------------------------------------------------
   2. BREADCRUMB
   ---------------------------------------------------------- */
.breadcrumb{
  font-size:.82rem; letter-spacing:.01em;
  color:var(--brown-soft); margin-bottom:1.3rem;
}
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; }
.breadcrumb li{ display:flex; align-items:center; gap:.55rem; }
.breadcrumb li + li::before{ content:"/"; color:rgba(88,56,30,.35); }
.breadcrumb a{ color:var(--brown-soft); transition:color .25s var(--ease); }
.breadcrumb a:hover{ color:var(--brass-deep); }
.breadcrumb [aria-current="page"]{ color:var(--brown); font-weight:600; }

/* ----------------------------------------------------------
   3. PAGE CONTENT + PROSE
   A comfortable reading measure for text-led pages
   (terms, privacy, delivery, instructions, etc.).
   ---------------------------------------------------------- */
.page-content{ padding-block:clamp(3rem, 6vw, 5rem); }

.prose{ max-width:72ch; margin-inline:auto; }
.prose > * + *{ margin-top:1.15rem; }
.prose h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing:-0.015em; line-height:1.2;
  color:var(--brown);
  margin-top:2.6rem; margin-bottom:.1rem;
}
.prose h3{
  font-family:var(--font-display); font-weight:600;
  font-size:1.2rem; color:var(--brown);
  margin-top:1.8rem; margin-bottom:.1rem;
}
.prose p{ color:var(--brown-soft); }
.prose a{
  color:var(--brass-deep); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .25s var(--ease);
}
.prose a:hover{ color:var(--brown); }
.prose ul, .prose ol{ padding-left:1.4rem; color:var(--brown-soft); }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin-top:.5rem; }
.prose strong{ color:var(--brown); font-weight:600; }
.prose blockquote{
  border-left:3px solid var(--brass); padding-left:1.4rem;
  font-family:var(--font-display); font-style:italic;
  color:var(--brown);
}
.prose hr{
  border:none; border-top:1px solid rgba(88,56,30,.14);
  margin-block:2.4rem;
}
/* small meta line, e.g. "Last updated …" */
.page-meta{ font-size:.85rem; color:var(--brown-soft); margin-bottom:2rem; }

/* ----------------------------------------------------------
   4. INFO / CONTACT CARDS
   For contact, company details, media enquiries, etc.
   ---------------------------------------------------------- */
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:clamp(1rem, 2vw, 1.5rem);
  max-width:72ch; margin:2rem auto 0;
}
.info-card{
  background:var(--cream-deep);
  border:1px solid rgba(88,56,30,.08);
  border-radius:var(--radius);
  padding:clamp(1.4rem, 2.5vw, 1.9rem);
}
.info-card h3{ font-size:1.15rem; margin-bottom:.5rem; }
.info-card p,
.info-card address{
  font-size:.95rem; color:var(--brown-soft);
  font-style:normal; line-height:1.6;
}
.info-card a{ color:var(--brass-deep); }
.info-card a:hover{ color:var(--brown); }

/* ----------------------------------------------------------
   5. ACTIVE NAV STATE
   Add aria-current="page" to the matching nav link on each
   page and it lights up in brass automatically — no JS.
   ---------------------------------------------------------- */
.main-nav a[aria-current="page"]{ color:var(--brass-deep); }
.main-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.mobile-menu a[aria-current="page"]{ color:var(--brass-deep); }


/* ----------------------------------------------------------
   1. TABLE INTRO  (eyebrow + title + lede, centred)
   ---------------------------------------------------------- */
.cm-intro{ max-width:72ch; margin:3rem auto 1.5rem; }
.cm-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass-deep);
  margin-bottom:.9rem;
}
.cm-eyebrow::before{ content:""; width:26px; height:2px; background:var(--brass); }
.cm-intro h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem, 3vw, 2.1rem); color:var(--brown);
  letter-spacing:-0.015em; line-height:1.15;
}
.cm-lede{ color:var(--brown-soft); margin-top:1rem; max-width:62ch; }

/* ----------------------------------------------------------
   2. WOOD-COMPARISON TABLE
   Horizontally scrollable on narrow screens.
   ---------------------------------------------------------- */
.materials-table{
  overflow-x:auto;
  border:1px solid rgba(88,56,30,.12);
  border-radius:var(--radius);
  -webkit-overflow-scrolling:touch;
}
.materials-table table{
  width:100%; min-width:760px;
  border-collapse:collapse;
  font-size:.92rem;
}
.materials-table caption{
  caption-side:bottom;
  text-align:left; padding:.9rem 1.1rem;
  font-size:.82rem; color:var(--brown-soft);
}
.materials-table thead th{
  background:var(--brown); color:var(--cream);
  font-family:var(--font-body); font-weight:600;
  text-align:left; vertical-align:bottom;
  padding:.85rem 1rem; line-height:1.25;
}
.materials-table thead th small{
  display:block; font-weight:400;
  color:rgba(255,246,240,.7); font-size:.78em;
}
.materials-table tbody th[scope="row"]{
  text-align:left; font-family:var(--font-display);
  font-weight:600; color:var(--brown);
  padding:.8rem 1rem; line-height:1.3;
}
.materials-table tbody th em{
  display:block; font-weight:400; font-style:italic;
  font-family:var(--font-body);
  font-size:.82em; color:var(--brown-soft);
}
.materials-table td{
  padding:.8rem 1rem; color:var(--brown-soft);
  border-top:1px solid rgba(88,56,30,.1);
  vertical-align:top;
}
.materials-table tbody tr:nth-child(even){ background:var(--cream-deep); }
.materials-table .cm-janka{
  font-weight:600; color:var(--brass-deep); white-space:nowrap;
}
.cm-sources{
  font-size:.85rem; color:var(--brown-soft);
  max-width:72ch; margin:1.4rem auto 0;
}
.cm-sources strong{ color:var(--brown); }

/* ----------------------------------------------------------
   3. PORE-STRUCTURE CARDS
   ---------------------------------------------------------- */
.pore-size-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(1rem, 2vw, 1.5rem);
  margin:2rem 0;
}
.pore-size-grid-card{
  background:var(--cream-deep);
  border:1px solid rgba(88,56,30,.08);
  border-radius:var(--radius);
  padding:clamp(1.2rem, 2vw, 1.6rem);
  font-size:.92rem; color:var(--brown-soft);
}
.pore-size-grid-card strong{ color:var(--brown); }
.pore-size-grid-card img{
  margin-top:1rem; border-radius:8px; width:100%; height:auto;
}

/* ----------------------------------------------------------
   4. WOOD-SWATCH GRID  (image cards with caption overlay)
   ---------------------------------------------------------- */
.use-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(.9rem, 1.8vw, 1.4rem);
}
.use-grid + .use-grid{ margin-top:clamp(.9rem, 1.8vw, 1.4rem); }
.use-card{
  position:relative; display:block;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 10px 24px rgba(88,56,30,.12);
}
.use-card img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:3 / 2;
  transition:transform .6s var(--ease);
}
.use-card:hover img{ transform:scale(1.06); }
.use-card__overlay{
  position:absolute; inset:auto 0 0 0;
  padding:1.4rem 1.2rem .9rem;
  background:linear-gradient(to top, rgba(62,39,19,.78), transparent);
}
.use-card__overlay h3{
  color:var(--cream); font-family:var(--font-display);
  font-size:1.2rem; font-weight:600; margin:0;
}

/* ----------------------------------------------------------
   5. MEDIA ROW  (image + text, e.g. the About story)
   ---------------------------------------------------------- */
.media-row{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem, 4vw, 3.5rem); align-items:center;
  margin-top:1.5rem;
}
.media-row__img img{
  width:100%; height:auto; border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(88,56,30,.18);
}
.media-row__text{ margin:0; }       /* override .prose top spacing */

/* ----------------------------------------------------------
   6. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 880px){
  .pore-size-grid{ grid-template-columns:1fr; }
  .use-grid{ grid-template-columns:repeat(2, 1fr); }
  .media-row{ grid-template-columns:1fr; }
  .media-row__img{ max-width:420px; }
}
@media (max-width: 460px){
  .use-grid{ grid-template-columns:1fr; }
}