/*
Theme Name: GranTerra Stone
Theme URI: https://www.granterrastone.com/
Author: GranTerra Stone
Description: Custom stone-trade theme for GranTerra Stone — granite, marble and quartz for HoReCa, project and wholesale buyers. Cut & finished in Hui'an, Fujian; loaded at Xiamen.
Version: 1.0.0
Text Domain: granterra
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --ink:#111111;
  --ink-deep:#0A0A0A;
  --card:#1A1A1A;
  --paper:#F2EFE9;
  --paper-2:#E8E4DC;
  --amber:#D9782A;
  --amber-dark:#B85F19;

  --on-dark:#FFFFFF;
  --on-dark-2:#A6A29B;
  --on-dark-3:#6E6A63;
  --on-light:#141210;
  --on-light-2:#6B665E;

  --line-dark:#2A2724;
  --line-light:#DCD7CD;

  --f-display:'Antonio','Arial Narrow',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Geist Mono','SFMono-Regular',Consolas,monospace;

  --pad:64px;
  --sec:104px;
  --maxw:1440px;
  --r:2px;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0;}
ul,ol{list-style:none;}

/* ==========================================================================
   3. TYPE SCALE
   ========================================================================== */
.h1{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(42px,6.6vw,96px);
  line-height:1.0;
  letter-spacing:-.015em;
}
.h2{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(32px,4.35vw,60px);
  line-height:1.2;           /* 60px -> 72px */
  letter-spacing:-.012em;
}
.h3{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(22px,2.1vw,30px);
  line-height:1.25;
}
.h4{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(18px,1.5vw,26px);
  line-height:1.3;
}
.lead{
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.62;
  color:var(--on-dark-2);
  max-width:64ch;
}
.body{font-size:15px;line-height:1.62;color:var(--on-dark-2);}
.kicker{
  font-family:var(--f-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--amber);
}
.spec{
  font-family:var(--f-mono);
  font-weight:400;
  font-size:13px;
  line-height:1.55;
}
.label{
  font-family:var(--f-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--on-dark-3);
}

.sec--light{background:var(--paper);color:var(--on-light);}
.sec--light .lead,
.sec--light .body{color:var(--on-light-2);}
.sec--light .label{color:var(--on-light-2);}
.sec--light .kicker{color:var(--amber-dark);}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;width:100%;}
.sec{padding:var(--sec) var(--pad);}
.sec--tight{padding:64px var(--pad);}
.stack{display:flex;flex-direction:column;}
.head{display:flex;flex-direction:column;gap:16px;}
.head--split{flex-direction:row;align-items:flex-end;gap:64px;}
.head--split > *:first-child{flex:1 1 62%;}
.head--split > *:last-child{flex:1 1 38%;}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.site-header__in{
  display:flex;
  align-items:center;
  gap:48px;
  padding:20px var(--pad);
  max-width:var(--maxw);
  margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.brand__mark{width:26px;height:26px;flex:0 0 auto;}
.brand__name{
  font-family:var(--f-display);
  font-weight:700;
  font-size:25px;
  letter-spacing:.02em;
  line-height:1;
  color:#fff;
}
.nav{display:flex;align-items:center;gap:32px;margin-left:auto;}
.nav a{
  font-family:var(--f-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--on-dark-2);
  transition:color .18s ease;
}
.nav a:hover{color:#fff;}
.btn-quote{
  display:inline-flex;
  align-items:center;
  padding:11px 22px;
  background:var(--amber);
  color:var(--ink);
  border-radius:var(--r);
  font-family:var(--f-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .18s ease;
}
.btn-quote:hover{background:#fff;}
.nav-toggle{display:none;}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero{background:var(--ink);border-bottom:1px solid var(--line-dark);}
.hero__in{
  display:flex;
  gap:56px;
  align-items:center;
  padding:80px var(--pad);
  max-width:var(--maxw);
  margin:0 auto;
}
.hero__copy{display:flex;flex-direction:column;gap:28px;flex:1 1 auto;}
.hero__title{color:#fff;}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 26px;border-radius:var(--r);
  font-family:var(--f-mono);font-weight:500;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;transition:all .18s ease;
}
.btn--primary{background:var(--amber);color:var(--ink);}
.btn--primary:hover{background:#fff;}
.btn--ghost{border-color:var(--line-dark);color:#fff;}
.btn--ghost:hover{border-color:#fff;background:#fff;color:var(--ink);}
.hero__trust{
  font-family:var(--f-mono);font-size:14px;color:var(--on-dark-3);
  letter-spacing:.05em;padding-top:6px;
}
.hero__media{
  flex:0 0 580px;width:580px;height:660px;
  overflow:hidden;border-radius:var(--r);background:var(--card);
}
.hero__media img{width:100%;height:100%;object-fit:cover;}

/* ==========================================================================
   7. STATS BAR
   ========================================================================== */
.stats{background:var(--card);border-bottom:1px solid var(--line-dark);}
.stats__in{
  display:flex;gap:24px;
  padding:34px var(--pad);
  max-width:var(--maxw);margin:0 auto;
}
.stat{flex:1 1 0;display:flex;flex-direction:column;gap:8px;min-width:0;}
.stat__num{
  font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1;color:#fff;
}
.stat__label{
  font-family:var(--f-mono);font-weight:500;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);
}

/* ==========================================================================
   8. CARD GRIDS
   ========================================================================== */
.grid{display:grid;gap:24px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--card);
  border:1px solid var(--line-dark);
  border-radius:var(--r);
  padding:32px;
  display:flex;flex-direction:column;gap:12px;
}
.sec--light .card{background:#fff;border-color:var(--line-light);}
.card__spec{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber);
}
.sec--light .card__spec{color:var(--amber-dark);}

/* photo tiles */
.photo-row{display:grid;gap:16px;}
.photo-row--3{grid-template-columns:repeat(3,1fr);}
.photo-row--4{grid-template-columns:repeat(4,1fr);}
.tile{display:flex;flex-direction:column;gap:12px;}
.tile__img{
  width:100%;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r);background:var(--card);
}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.tile:hover .tile__img img{transform:scale(1.03);}
.tile__cap{
  font-family:var(--f-mono);font-size:13px;line-height:1.5;
  color:var(--on-dark-2);
}
.sec--light .tile__cap{color:var(--on-light-2);}
.tile--tall .tile__img{aspect-ratio:3/4;}

/* ==========================================================================
   9. RANGE CARDS  (granite families / finishes)
   ========================================================================== */
.range-list{
  display:grid;gap:26px 40px;
  grid-template-columns:repeat(2,1fr);
}
.range-item{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:1px solid var(--line-dark);}
.sec--light .range-item{border-top-color:var(--line-light);}
.range-item__name{font-family:var(--f-body);font-weight:500;font-size:16px;color:#fff;}
.sec--light .range-item__name{color:var(--on-light);}
.range-item__txt{font-size:15px;color:var(--on-dark-2);}
.sec--light .range-item__txt{color:var(--on-light-2);}

/* ==========================================================================
   10. COLOUR LIST + SWATCH WALL
   ========================================================================== */
.colour-row{
  display:flex;gap:32px;align-items:flex-start;
  padding:26px 0;border-top:1px solid var(--line-dark);
}
.colour-row:last-child{border-bottom:1px solid var(--line-dark);}
.colour-row__name{flex:0 0 240px;font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.2;color:#fff;}
.colour-row__codes{flex:1 1 auto;font-family:var(--f-mono);font-size:14px;line-height:1.75;color:var(--on-dark-2);}
.note-card{
  margin-top:8px;padding:20px 24px;
  background:var(--card);border-left:3px solid var(--amber);
  border-radius:var(--r);
  font-family:var(--f-mono);font-size:12px;line-height:1.7;color:var(--on-dark-2);
}

.swatch-wall{
  display:grid;gap:12px;
  grid-template-columns:repeat(5,1fr);
}
.swatch{display:flex;flex-direction:column;gap:9px;}
.swatch__img{
  width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line-dark);
}
.swatch__img img{width:100%;height:100%;object-fit:cover;}
.swatch__name{
  font-family:var(--f-mono);font-size:11px;line-height:1.45;
  letter-spacing:.04em;color:var(--on-dark-3);text-transform:uppercase;
}
.swatch-note{
  font-family:var(--f-mono);font-size:12px;line-height:1.7;
  color:var(--on-dark-3);padding-top:4px;max-width:90ch;
}

.swatch-card{
  display:flex;gap:48px;align-items:center;
  padding:36px 40px;background:var(--card);
  border:1px solid var(--line-dark);border-radius:var(--r);
}
.swatch-card__copy{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;}
.swatch-card__action{flex:0 0 auto;}

.origin-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.origin-card{
  padding:30px 32px;background:var(--card);
  border:1px solid var(--line-dark);border-radius:var(--r);
  display:flex;flex-direction:column;gap:12px;
}

/* ==========================================================================
   11. SIZE TABLE
   ========================================================================== */
.table{width:100%;border-collapse:collapse;}
.table th,.table td{
  text-align:left;vertical-align:top;
  padding:22px 24px 22px 0;
  border-bottom:1px solid var(--line-dark);
}
.table th{
  font-family:var(--f-mono);font-weight:500;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);
  border-bottom-color:#3a3733;
}
.table td:first-child{width:26%;}
.table td:nth-child(2){width:24%;}
.table__name{font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.25;color:#fff;}
.table__market{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);}
.table__spec{font-family:var(--f-mono);font-size:14px;line-height:1.6;color:var(--on-dark-2);}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.data-list{display:flex;flex-direction:column;gap:14px;}
.data-list dt{font-family:var(--f-body);font-weight:500;font-size:15px;color:#fff;}
.data-list dd{margin:0;font-size:15px;color:var(--on-dark-2);}

/* ==========================================================================
   12. PROCESS STEPS
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 48px;}
.step{display:flex;flex-direction:column;gap:8px;padding-top:20px;border-top:1px solid var(--line-dark);}
.step__n{font-family:var(--f-mono);font-weight:500;font-size:13px;color:var(--amber);}
.factory-body{display:flex;gap:32px;align-items:flex-start;}
.factory-body__copy{flex:1 1 52%;}
.factory-body__media{flex:1 1 48%;display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ==========================================================================
   13. TICKER
   ========================================================================== */
.ticker{background:var(--amber);overflow:hidden;white-space:nowrap;}
.ticker__in{
  padding:20px var(--pad);
  font-family:var(--f-mono);font-weight:500;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  max-width:var(--maxw);margin:0 auto;
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--line-light);}
.faq:last-child{border-bottom:1px solid var(--line-light);}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:32px;
  padding:30px 0;
}
.faq summary::-webkit-details-marker{display:none;}
.faq__q{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,1.7vw,24px);line-height:1.3;color:var(--on-light);}
.faq__sign{
  flex:0 0 auto;font-family:var(--f-mono);font-size:22px;line-height:1;
  color:var(--amber-dark);transition:transform .2s ease;padding-top:2px;
}
.faq[open] .faq__sign{transform:rotate(45deg);}
.faq__a{font-size:15px;line-height:1.7;color:var(--on-light-2);max-width:96ch;padding:0 0 30px;}

/* ==========================================================================
   15. CONTACT
   ========================================================================== */
.contact-body{display:flex;gap:48px;align-items:flex-start;}
.contact-body__left{flex:1 1 52%;display:flex;flex-direction:column;gap:34px;}
.contact-body__right{flex:1 1 48%;}
.contact-pair{display:grid;grid-template-columns:1fr 1fr;gap:34px 32px;}
.contact-block{display:flex;flex-direction:column;gap:10px;}
.contact-block__val{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(20px,1.85vw,26px);line-height:1.25;color:#fff;
  word-break:break-word;
}
.contact-block__val a:hover{color:var(--amber);}
.qr-row{display:flex;gap:28px;}
.qr-item{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.qr-item img{width:118px;height:118px;background:#fff;border-radius:var(--r);padding:6px;}

.form{display:flex;flex-direction:column;gap:16px;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{
  font-family:var(--f-mono);font-weight:500;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);
}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;
  background:#0D0D0D;border:1px solid var(--line-dark);border-radius:var(--r);
  color:#fff;font-family:var(--f-body);font-size:15px;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--amber);
}
.form__note{font-family:var(--f-mono);font-size:12px;line-height:1.7;color:var(--on-dark-3);}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:70;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .2s ease,box-shadow .2s ease;
}
.wa-float:hover{transform:scale(1.06);box-shadow:0 10px 30px rgba(0,0,0,.5);}
.wa-float svg{width:29px;height:29px;fill:#fff;display:block;}
.wa-float__tip{
  position:absolute;right:64px;white-space:nowrap;
  background:#111;color:#fff;border:1px solid var(--line-dark);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;
  padding:8px 12px;border-radius:var(--r);
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.wa-float:hover .wa-float__tip{opacity:1;}

.site-footer{background:var(--ink-deep);color:#fff;}
.footer__in{max-width:var(--maxw);margin:0 auto;padding:56px var(--pad);display:flex;flex-direction:column;gap:48px;}
.footer__top{display:flex;gap:64px;align-items:flex-start;}
.footer__brand{flex:1 1 42%;display:flex;flex-direction:column;gap:16px;}
.footer__cols{flex:1 1 58%;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.footer__col{display:flex;flex-direction:column;gap:14px;}
.footer__col ul{display:flex;flex-direction:column;gap:11px;}
.footer__col a{font-size:15px;color:var(--on-dark-2);}
.footer__col a:hover{color:#fff;}
.footer__hairline{height:1px;background:#1F1C19;}
.footer__bottom{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:13px;color:var(--on-dark-3);
}
.footer__origin{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--amber);
}

/* ==========================================================================
   17. CATALOGUE — page hero, breadcrumbs, chips
   ========================================================================== */
.page-hero{background:var(--ink);border-bottom:1px solid var(--line-dark);}
.page-hero__in{
  display:flex;flex-direction:column;gap:20px;
  padding:72px var(--pad) 80px;
  max-width:var(--maxw);margin:0 auto;
}
.page-hero .h1{color:#fff;max-width:22ch;}
.page-hero .lead{max-width:70ch;}
.page-hero__actions{display:flex;gap:14px;flex-wrap:wrap;padding-top:8px;}

.crumbs{margin-bottom:6px;}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.crumbs li{display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-weight:500;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--on-dark-3);}
.crumbs li + li::before{content:"/";color:var(--line-dark);}
.crumbs a{color:var(--on-dark-2);}
.crumbs a:hover{color:var(--amber);}
.crumbs li:last-child span{color:#fff;}

.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  display:inline-flex;align-items:center;
  padding:9px 16px;border-radius:var(--r);
  border:1px solid var(--line-dark);background:transparent;
  font-family:var(--f-mono);font-weight:500;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-2);
  transition:all .18s ease;
}
.chip:hover{border-color:var(--amber);color:#fff;background:rgba(217,120,42,.1);}
.chip--static{cursor:default;color:var(--on-dark-3);}
.chip--static:hover{border-color:var(--line-dark);color:var(--on-dark-3);background:transparent;}
.sec--light .chip{border-color:var(--line-light);color:var(--on-light-2);}
.sec--light .chip:hover{border-color:var(--amber-dark);color:var(--on-light);background:rgba(217,120,42,.08);}
.sec--light .chip--static:hover{border-color:var(--line-light);color:var(--on-light-2);background:transparent;}

.link-amber{color:var(--amber);}
.link-amber:hover{text-decoration:underline;}

/* Linked cards (line cards on the home page) */
a.card{transition:border-color .2s ease,transform .2s ease;}
a.card:hover{border-color:var(--amber);transform:translateY(-2px);}
.sec--light a.card:hover{border-color:var(--amber-dark);}
.card__link{
  font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber);padding-top:6px;
}
.sec--light .card__link{color:var(--amber-dark);}

/* ==========================================================================
   18. LINE BAND — the four lines on /products/
   ========================================================================== */
.line-band__body{display:flex;gap:52px;align-items:flex-start;}
.line-band__media{
  flex:0 0 42%;max-width:42%;overflow:hidden;border-radius:var(--r);
  background:var(--card);aspect-ratio:4/3;
}
.line-band__media img{width:100%;height:100%;object-fit:cover;}
.line-band__copy{flex:1 1 58%;display:flex;flex-direction:column;gap:28px;min-width:0;}
.line-band__actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ==========================================================================
   19. PRODUCT CARDS + GRID
   ========================================================================== */
.prod-grid{display:grid;gap:24px;grid-template-columns:repeat(3,1fr);}
.prod-grid--mini{grid-template-columns:repeat(3,1fr);gap:18px;}
.prod-card{
  display:flex;flex-direction:column;gap:0;
  background:var(--card);border:1px solid var(--line-dark);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s ease,transform .2s ease;
}
.prod-card:hover{border-color:var(--amber);transform:translateY(-2px);}
.sec--light .prod-card{background:#fff;border-color:var(--line-light);}
.sec--light .prod-card:hover{border-color:var(--amber-dark);}
.prod-card__img{aspect-ratio:4/3;overflow:hidden;background:#0D0D0D;}
.prod-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.prod-card:hover .prod-card__img img{transform:scale(1.04);}
.prod-card__body{display:flex;flex-direction:column;gap:8px;padding:22px 24px 26px;}
.prod-card__name{
  font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.25;color:#fff;
}
.sec--light .prod-card__name{color:var(--on-light);}
.prod-card__spec{font-family:var(--f-mono);font-size:12px;line-height:1.6;color:var(--on-dark-2);}
.sec--light .prod-card__spec{color:var(--on-light-2);}
.prod-card__more{
  font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber);padding-top:4px;
}
.sec--light .prod-card__more{color:var(--amber-dark);}

.pager{display:flex;gap:10px;flex-wrap:wrap;}
.pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;border-radius:var(--r);
  border:1px solid var(--line-dark);
  font-family:var(--f-mono);font-size:13px;color:var(--on-dark-2);
}
.pager .page-numbers.current{background:var(--amber);border-color:var(--amber);color:var(--ink);}
.pager .page-numbers:hover{border-color:var(--amber);color:#fff;}

/* ==========================================================================
   20. PRODUCT DETAIL
   ========================================================================== */
.product-layout{display:flex;gap:56px;align-items:flex-start;}
.product-media{flex:0 0 50%;max-width:50%;border-radius:var(--r);overflow:hidden;background:var(--card);}
.product-media__img{width:100%;height:auto;display:block;}
.product-media__empty{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line-dark);
}
.product-main{flex:1 1 50%;display:flex;flex-direction:column;gap:22px;min-width:0;}
.product-main .h2{color:#fff;}
.product-main__actions{display:flex;gap:14px;flex-wrap:wrap;padding-top:4px;}

.spec-list{display:flex;flex-direction:column;gap:0;}
.spec-list > div{
  display:flex;gap:24px;justify-content:space-between;
  padding:13px 0;border-top:1px solid var(--line-dark);
}
.spec-list > div:last-child{border-bottom:1px solid var(--line-dark);}
.spec-list dt{
  flex:0 0 40%;font-family:var(--f-mono);font-weight:500;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--on-dark-3);
}
.spec-list dd{
  margin:0;flex:1 1 60%;text-align:right;
  font-family:var(--f-mono);font-size:14px;line-height:1.55;color:#fff;
}

/* ==========================================================================
   21. CTA BAND
   ========================================================================== */
.cta-band{background:var(--ink-deep);border-top:1px solid var(--line-dark);}
.cta-band__actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ==========================================================================
   22. PAGE BODY (authored content pages)
   ========================================================================== */
.page-body .sec:first-child{padding-top:var(--sec);}
.prose h2{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1.25;color:var(--on-light);margin:0 0 14px;}
.prose h3{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,1.8vw,26px);line-height:1.3;color:var(--on-light);margin:26px 0 10px;}
.prose p{margin:0 0 16px;font-size:15px;line-height:1.7;color:var(--on-light-2);}
.prose ul{margin:0 0 18px;padding-left:0;display:flex;flex-direction:column;gap:8px;}
.prose ul li{position:relative;padding-left:20px;font-size:15px;line-height:1.65;color:var(--on-light-2);}
.prose ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--amber);}
.prose a{color:var(--amber-dark);text-decoration:underline;}
.prose strong{color:var(--on-light);font-weight:600;}

/* ==========================================================================
   23. CATALOGUE RESPONSIVE
   ========================================================================== */
@media (max-width:1279px){
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .line-band__body{gap:36px;}
}
@media (max-width:1023px){
  .page-hero__in{padding:52px var(--pad) 60px;}
  .line-band__body{flex-direction:column;gap:32px;}
  .line-band__media{flex:0 0 auto;max-width:100%;width:100%;}
  .line-band__copy{flex:0 0 auto;width:100%;}
  .product-layout{flex-direction:column;gap:32px;}
  .product-media{flex:0 0 auto;max-width:100%;width:100%;}
  .product-main{flex:0 0 auto;width:100%;}
}
@media (max-width:639px){
  .prod-grid,.prod-grid--mini{grid-template-columns:1fr;}
  .spec-list > div{flex-direction:column;gap:4px;}
  .spec-list dd{text-align:left;}
  .crumbs ol{gap:8px;}
}

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */
@media (max-width:1279px){
  :root{--pad:48px;--sec:88px;}
  .hero__media{flex:0 0 460px;width:460px;height:540px;}
  .swatch-wall{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:1023px){
  :root{--pad:32px;--sec:72px;}
  .site-header__in{gap:24px;}
  .nav{display:none;}
  .hero__in{flex-direction:column;align-items:stretch;gap:40px;padding:56px var(--pad);}
  .hero__media{flex:0 0 auto;width:100%;height:420px;}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .head--split{flex-direction:column;align-items:flex-start;gap:24px;}
  .head--split > *{flex:0 1 auto;width:100%;}
  .photo-row--3,.photo-row--4{grid-template-columns:repeat(2,1fr);}
  .factory-body{flex-direction:column;}
  .factory-body__media{width:100%;}
  .contact-body{flex-direction:column;}
  .footer__top{flex-direction:column;gap:40px;}
  .footer__cols{width:100%;}
  .cols-2{grid-template-columns:1fr;gap:32px;}
  .stats__in{flex-wrap:wrap;gap:24px 32px;}
  .stat{flex:1 1 40%;}
  .swatch-wall{grid-template-columns:repeat(3,1fr);}
  .swatch-card{flex-direction:column;align-items:flex-start;gap:24px;}
  .origin-grid{grid-template-columns:1fr;}
  .contact-pair{grid-template-columns:1fr 1fr;}
}
@media (max-width:639px){
  :root{--pad:22px;--sec:56px;}
  body{font-size:15px;}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
  .photo-row--3,.photo-row--4{grid-template-columns:1fr;}
  .range-list{grid-template-columns:1fr;gap:22px;}
  .steps{grid-template-columns:1fr;}
  .form__row{grid-template-columns:1fr;}
  .contact-pair{grid-template-columns:1fr;}
  .hero__media{height:340px;}
  .colour-row{flex-direction:column;gap:12px;}
  .colour-row__name{flex:0 0 auto;}
  .swatch-wall{grid-template-columns:repeat(2,1fr);}
  .footer__cols{grid-template-columns:1fr 1fr;gap:28px;}
  .table th,.table td{padding:16px 12px 16px 0;}
  .table td:first-child,.table td:nth-child(2){width:auto;}
  .ticker__in{font-size:11px;letter-spacing:.06em;white-space:normal;text-align:center;}
}
@media (max-width:767px){
  .table.responsive thead{display:none;}
  .table.responsive tr{display:block;padding:18px 0;border-bottom:1px solid var(--line-dark);}
  .table.responsive td{display:block;border:0;padding:0 0 6px;width:auto !important;}
}