/* นครทองแทรคเตอร์ — hand-written stylesheet for the static rebuild.
   Palette + type measured off the live GeneratePress theme:
   contrast #1b1414 / #252129 / #6d6d6d · base #f7f4f4 / #fff
   accent #D7263D (red) · #F2C94C (gold) · #a91126 (dark red) · LINE #06C755 */

/* ---------- fonts (self-hosted, Thai + Latin subsets) ---------- */
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/kanit-300-thai.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/kanit-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/kanit-600-thai.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/kanit-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/kanit-700-thai.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/kanit-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/prompt-400-thai.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/prompt-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/prompt-500-thai.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/prompt-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/prompt-700-thai.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/prompt-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}

/* ---------- tokens + reset ---------- */
:root{
  --contrast:#1b1414;--contrast-2:#252129;--contrast-3:#6d6d6d;
  --base:#f7f4f4;--base-2:#ffffff;
  --accent:#D7263D;--accent-2:#F2C94C;--accent-2-dark:#96730f;--accent-3:#a91126;
  --line:#06C755;--line-dark:#05a647;
  --radius:10px;--shadow:0 2px 14px rgba(27,20,20,.08);
  --font-display:'Kanit',system-ui,sans-serif;
  --font-body:'Prompt',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.75;color:var(--contrast-2);background:var(--base-2)}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--contrast-2)}
a:hover{color:var(--accent-3)}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.25;color:var(--contrast);margin:0 0 .6em}
h1{font-size:clamp(1.9rem,4.2vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.25rem}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem}
main{display:block}

/* red-dash tagline — signature element from the live theme */
.tagline{color:var(--accent);font-weight:600;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 1rem}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;
  padding:.9rem 1.5rem;border-radius:var(--radius);text-decoration:none;text-align:center;
  border:2px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s,color .15s}
.btn:active{transform:scale(.97)}
.btn--sm{padding:.65rem 1.1rem;font-size:.92rem}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-3);color:#fff}
.btn--line{background:var(--line);color:#fff}
.btn--line:hover{background:var(--line-dark);color:#fff}
.btn--outline{background:transparent;color:var(--contrast-2);border-color:var(--contrast-2)}
.btn--outline:hover{border-color:var(--accent-3);color:var(--accent-3)}
.btn--ghost{background:transparent;color:#fff;border-color:#fff}
.btn--ghost:hover{background:#fff;color:var(--contrast)}
.btn--ghost2{background:transparent;color:var(--contrast);border-color:var(--contrast)}
.btn--ghost2:hover{border-color:var(--accent-3);color:var(--accent-3)}

/* ---------- header ---------- */
.topbar{background:var(--contrast);color:#fff;font-size:.88rem}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding-top:.4rem;padding-bottom:.4rem}
.topbar a{color:#fff;text-decoration:none;opacity:.92}
.topbar a:hover{opacity:1;color:var(--accent-2)}
.topbar__left{display:flex;align-items:center;gap:.6rem}
.topbar__phone{display:flex;align-items:center;gap:.45rem;margin-right:.6rem}
.topbar__phone svg{width:16px;height:16px;flex:none;display:block}
.topbar__social{display:flex;align-items:center;line-height:0}
.topbar__social svg{width:16px;height:16px;display:block}
.topbar__line{color:#fff!important;font-weight:600;display:flex;align-items:center}
.topbar__line-badge{display:inline-block;color:#fff;background:#06C755;border:1.5px solid #06C755;border-radius:4px;padding:.05rem .5rem;margin-left:.4rem}
.site-header{background:var(--base-2);border-bottom:1px solid rgba(27,20,20,.08);position:sticky;top:0;z-index:50}
.header__in{display:flex;align-items:center;gap:1.5rem;padding-top:.7rem;padding-bottom:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{width:54px;height:54px}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--contrast)}
.nav{display:flex;gap:1.4rem;margin-left:auto}
.nav a{text-decoration:none;font-weight:500;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a[aria-current],.nav a:hover{border-bottom-color:var(--accent);color:var(--contrast)}
.header__call{white-space:nowrap}
.nav__toggle{display:none}
.nav__call-mobile{display:none}
@media (max-width:760px){
  .brand__name{font-size:1.1rem}
  .brand img{width:42px;height:42px}
  /* Redundant with the bottom .stickybar (call + LINE) on mobile — Jef. */
  .topbar{display:none}
  .header__call{display:none}
  .header__in{position:relative;flex-wrap:nowrap}
  /* Hamburger — three bars that morph into an X while open. */
  .nav__toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:38px;height:38px;margin-left:auto;padding:0;border:0;background:none;cursor:pointer;
  }
  .nav__toggle span{display:block;width:100%;height:2px;background:var(--contrast);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
  .nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* The menu itself: hidden off-screen (not display:none, so it can transition),
     drops down as a full-width panel under the header when open. */
  .nav{
    position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;gap:0;background:var(--base-2);
    border-bottom:1px solid rgba(27,20,20,.1);box-shadow:0 12px 24px rgba(27,20,20,.12);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .25s ease,visibility 0s linear .25s;
  }
  .nav.is-open{max-height:70vh;overflow-y:auto;visibility:visible;transition:max-height .25s ease}
  .nav a{padding:.9rem 1.25rem;border-bottom:1px solid rgba(27,20,20,.08)}
  .nav a[aria-current],.nav a:hover{background:var(--base);border-bottom-color:rgba(27,20,20,.08)}
  .nav__call-mobile{display:block;margin:.9rem 1.25rem;text-align:center}
  /* Prevents the page scrolling behind the open panel. */
  body.nav-open{overflow:hidden}
}

/* ---------- hero ---------- */
/* Dark on the left (where the text sits) fading to clear on the right, so
   the tractor + landscape show through instead of a flat dark wash. */
.hero{background:linear-gradient(to right,rgba(20,15,15,.88) 0%,rgba(20,15,15,.72) 32%,rgba(20,15,15,.28) 62%,rgba(20,15,15,0) 85%),url('/images/hero-1920.webp') right center/cover no-repeat;color:#fff;padding:6rem 0}
.hero h1{color:#fff;max-width:16em}
.hero__sub{max-width:38em;font-size:1.06rem;opacity:.95;margin:0}
.hero__actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
/* Brand logos in the hero, under the buttons. Capped by HEIGHT rather than a
   fixed box: the source marks have wildly different aspect ratios (Kubota's
   wordmark is ~4.4:1, Yanmar's mark is ~1.35:1) — a shared box made Kubota
   render tiny because object-fit:contain fit it to the box's width first.
   A shared height + natural width keeps every logo the same visual size. */
.hero__brands{display:flex;flex-wrap:wrap;align-items:center;gap:2.2rem;margin-top:3rem}
.hero__brand-logo{height:28px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:.8;transition:opacity .2s}
.hero__brand-logo:hover{opacity:1}
@media (max-width:760px){
  /* Narrow screens: text spans nearly full width, so keep it readable with a
     top-to-bottom dark wash instead of the desktop's left-to-right one. */
  .hero{padding:3.5rem 0;background-image:linear-gradient(rgba(20,15,15,.72),rgba(20,15,15,.82)),url('/images/hero-900.webp');background-position:80% center}
  /* Logos before the call/LINE buttons on mobile — Jef's requested order. */
  .hero__in{display:flex;flex-direction:column}
  .hero__brands{order:1;gap:1.1rem;margin-top:2rem;margin-bottom:2rem}
  .hero__actions{order:2;margin-top:0;margin-bottom:1.5rem}
  .hero__brand-logo{height:18px;max-width:70px}
  /* Desktop-only line breaks in the hero heading/sub — phones wrap naturally. */
  .br-desktop{display:none}
}

/* feature strip: 4 dark panels, numbered, circular icon badge, vertical
   dividers — full-bleed (no .wrap) so the panels run edge to edge. */
.features{background:var(--contrast)}
.features__in{display:grid;grid-template-columns:repeat(4,1fr)}
.feature{
  position:relative;padding:3.6rem 1.8rem 2.6rem;color:#fff;
  border-right:1px solid rgba(255,255,255,.14);
}
.feature:nth-child(odd){background:var(--contrast-2)}
.feature:last-child{border-right:0}
/* The badge straddles the seam above each panel — half over the hero photo,
   half into the panel — centred, white ring, dark fill, yellow glyph. */
.feature__icon{
  position:absolute;top:-30px;left:50%;margin-left:-30px;
  width:60px;height:60px;color:var(--accent-2);background:var(--contrast);
  border:2px solid rgba(255,255,255,.14);border-radius:50%; /* same grey as the panel dividers */
  display:flex;align-items:center;justify-content:center;
}
.feature__icon svg{width:32px;height:32px}
/* Number sits beside the text block, vertically centred on it (reference). */
.feature__row{display:flex;align-items:flex-start;gap:1rem}
.feature__num{
  flex:none;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,4vw,3.4rem);line-height:1;color:rgba(255,255,255,.18);
}
.feature__body{min-width:0}
.feature__text{color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.5;margin:0 0 .4rem;max-width:16em}
.feature__h{font-family:var(--font-display);font-weight:600;font-size:1.02rem;margin:0;color:var(--accent-2)}
@media (max-width:860px){
  .features__in{grid-template-columns:1fr}
  .feature{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .feature:last-child{border-bottom:0}
  /* Stacked on mobile, the next panel's icon badge overlaps upward into
     this panel's bottom edge — extra bottom padding keeps the bold
     yellow heading clear of it. The last panel has no following icon,
     so it doesn't need the extra room. */
  .feature:not(:last-child){padding-bottom:4.2rem}
}

/* ---------- shop ---------- */
.shop{padding:4rem 0 3rem;background:var(--base)}
.shop__h{margin-bottom:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 2.2rem}
.chip{background:var(--base-2);border:1px solid rgba(27,20,20,.12);border-radius:999px;padding:.45rem 1rem;
  text-decoration:none;font-size:.92rem;font-weight:500;box-shadow:var(--shadow)}
.chip small{color:var(--contrast-3);font-size:.85em}
.chip:hover{border-color:var(--accent);color:var(--accent-3)}
.chip--soldout{border-style:dashed;color:var(--contrast-3)}
.catsec{margin:0 0 2.8rem}
.catsec__h{font-size:1.35rem;border-bottom:2px solid var(--accent-2);padding-bottom:.4rem;margin-bottom:1.2rem}
.catsec__h a{text-decoration:none;color:inherit}
.catsec__h a:hover{color:var(--accent-3)}
.catsec__note{color:var(--contrast-3);margin:-.4rem 0 1.2rem;max-width:52em}
.catsec--soldout{opacity:.96}

/* shop sidebar + dynamic filter */
.shop__layout{display:grid;grid-template-columns:220px 1fr;gap:2.4rem;align-items:start}
/* --shop-inset: the sidebar's rendered width + column gap. Pager and
   remarks sit below .shop__layout (so the sticky sidebar releases at the
   grid, not the section end — see build.js), so they need this same left
   offset + a matching width, or "centred" reads as centred on the whole
   section (which visually includes the 220px sidebar) rather than on the
   products above them. Defined once here, consumed on the two rules below —
   avoids a separate override rule racing the shorthand `margin` on each. */
.shop{--shop-inset:calc(220px + 2.4rem)}
@media (max-width:860px){.shop{--shop-inset:0px}}
/* top = sticky header height + breathing room, so the heading never sits
   flush under the header while stuck. */
.shop__sidebar{position:sticky;top:10rem}
.catnav__h{font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-2-dark);margin:0 0 .6rem}
/* Sort-by-price, above the category list. A native <select> so phones get
   their own picker; styled to sit with the category chips. */
/* Sort bar above the grid (Shopee-style): label · แนะนำ · มาใหม่ · ราคา ▾ … 1/2 ‹ › */
.sortbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--base-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:.7rem .9rem;margin-bottom:1.2rem}
.sortbar__label{color:var(--contrast-3);font-size:.92rem;margin-right:.2rem}
.sortbar__btn{font:inherit;font-size:.92rem;font-weight:500;color:var(--contrast);background:var(--base);border:1px solid rgba(27,20,20,.1);border-radius:6px;padding:.5rem 1rem;cursor:pointer;transition:background .15s,color .15s}
.sortbar__btn:hover{border-color:var(--accent)}
.sortbar__btn.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.shop__sort{position:relative;width:200px;max-width:100%}
.shop__sort select{box-shadow:none;background:var(--base);border-color:rgba(27,20,20,.1);border-radius:6px;padding:.5rem 2.2rem .5rem .9rem}
.shop__sort.is-on select{border-color:var(--accent);color:var(--accent-3);font-weight:600}
.sortbar__pages{margin-left:auto;display:flex;align-items:center;gap:.3rem}
.sortbar__count{font-size:.92rem;margin-right:.4rem}
.sortbar__count::first-letter{color:var(--accent);font-weight:600}
.sortbar__arrow{width:2.1rem;height:2.1rem;border:1px solid rgba(27,20,20,.12);border-radius:6px;background:var(--base-2);color:var(--contrast);font-size:1.2rem;line-height:1;cursor:pointer}
.sortbar__arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent-3)}
.sortbar__arrow:disabled{opacity:.35;cursor:default}
/* Bottom pager: ‹ 1 2 3 4 5 … › */
.pager{display:flex;justify-content:center;align-items:center;gap:.4rem;margin:2rem 0 0 var(--shop-inset);width:calc(100% - var(--shop-inset))}
.pager:empty{display:none}
.pager__btn{min-width:2.6rem;height:2.6rem;padding:0 .6rem;border:0;border-radius:6px;background:transparent;color:var(--contrast-3);font:inherit;font-size:1.05rem;cursor:pointer;transition:background .15s,color .15s}
.pager__btn:hover{color:var(--contrast)}
.pager__btn[aria-current]{background:var(--accent);color:#fff;font-weight:600}
.pager__btn--arrow{font-size:1.4rem}
.pager__btn.is-off{opacity:.3;cursor:default}
.pager__gap{color:var(--contrast-3);padding:0 .3rem}
/* Anchors that sit under the sticky header. */
#sold-out,#shop-content{scroll-margin-top:9rem}
@media (max-width:560px){
  /* Relevance/latest toggle buttons hidden on mobile — the price sort
     dropdown and pager alone stay on one inline row (Jef: too much
     space, don't need it to wrap). */
  .sortbar__label,.sortbar__btn{display:none}
  .sortbar{justify-content:space-between}
  .shop__sort{width:auto;flex:1;min-width:0}
  .sortbar__pages{margin-left:0}
}
.shop__sort select{
  width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--base-2);border:1px solid rgba(27,20,20,.12);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.6rem 2.4rem .6rem .9rem;
  font:inherit;font-size:.92rem;font-weight:500;color:var(--contrast);
}
.shop__sort select:focus{outline:none;border-color:var(--accent)}
.shop__sort::after{
  content:"";position:absolute;right:1rem;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:1.5px solid var(--contrast-3);border-bottom:1.5px solid var(--contrast-3);
  transform:rotate(45deg);pointer-events:none;
}
.catnav__list{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.4rem}
.catnav__link{display:flex;justify-content:space-between;gap:.5rem;background:var(--base-2);
  border:1px solid rgba(27,20,20,.12);border-radius:var(--radius);padding:.6rem .9rem;
  text-decoration:none;font-size:.92rem;font-weight:500;box-shadow:var(--shadow)}
.catnav__link small{color:var(--contrast-3);font-size:.85em}
.catnav__link:hover{border-color:var(--accent);color:var(--accent-3)}
.catnav__link[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff}
.catnav__link[aria-current] small{color:rgba(255,255,255,.85)}
.catnav__item{display:flex;flex-direction:column;gap:.4rem}
.catnav__row{display:flex;align-items:stretch;gap:.4rem}
.catnav__row .catnav__link{flex:1}
.catnav__toggle{flex:none;width:2.1rem;background:var(--base-2);border:1px solid rgba(27,20,20,.12);
  border-radius:var(--radius);color:var(--contrast-3);cursor:pointer;display:grid;place-items:center;
  font-size:.85rem;transition:transform .15s,color .15s}
.catnav__toggle:hover{color:var(--accent-3);border-color:var(--accent)}
.catnav__toggle[aria-expanded="true"]{transform:rotate(180deg)}
.catnav__sublist{list-style:none;margin:0;padding:0 0 0 1rem;display:flex;flex-direction:column;gap:.4rem}
.catnav__sublist[hidden]{display:none}
/* Mobile-only single dropdown replacing the whole chip grid — Jef found the
   2-column chips took up too much vertical space on phones. */
.catnav-mobile{display:none}
.catsec--backorder{border:2px dashed rgba(27,20,20,.15);border-radius:var(--radius);padding:2rem 1.5rem;margin-top:1rem}
/* สินค้าหมด grid: 1 column on mobile (Jef), regardless of the shop's own
   2-column mobile breakpoint. */
@media (max-width:640px){.catsec--soldout .grid{grid-template-columns:1fr}}
.catsec--backorder .catsec__h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;border-bottom:none;padding-bottom:0}
@media (max-width:860px){
  .shop__layout{grid-template-columns:1fr}
  .shop__sidebar{position:static}
  /* Chip grid replaced by a single full-width dropdown on mobile — the
     2-column chips ate too much vertical space (Jef). */
  .catnav{display:none}
  .catnav-mobile{display:block;margin-bottom:1rem}
  .catnav-mobile__label{display:block;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-2-dark);margin-bottom:.5rem}
  .catnav-mobile select{
    width:100%;background:var(--base-2);border:1px solid rgba(27,20,20,.12);
    border-radius:var(--radius);padding:.7rem 2.2rem .7rem .9rem;font-size:.95rem;
    font-weight:500;color:var(--contrast-2);box-shadow:var(--shadow);
    appearance:none;-webkit-appearance:none;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236d6d6d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    background-repeat:no-repeat;background-position:right .8rem center;background-size:1.1rem;
  }
  .catnav-mobile select:focus{outline:none;border-color:var(--accent)}
  .catnav__list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
  .catnav__item{display:flex;flex-direction:column;gap:.4rem}
  .catnav__row{display:flex;gap:.4rem}
  .catnav__row .catnav__link{flex:1;min-width:0}
  .catnav__toggle{flex:none;width:2.4rem;height:auto}
  .catnav__sublist{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;padding:0;margin:0}
  .catnav__sublist[hidden]{display:none}
}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media (max-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}
/* 2 columns on every phone width (Shopee's shop grid) — never drops to 1. */
@media (max-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:.7rem}}
.card{background:var(--base-2);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
/* display:flex above beats the browser's [hidden]{display:none}, so the
   category filter set the attribute and nothing visibly changed. Explicit. */
.card[hidden]{display:none}
/* Subtle reshuffle when the set changes: the grid gets .is-reflow re-applied
   and every visible card fades/lifts in. Respects reduced-motion. */
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.grid.is-reflow .card:not([hidden]){animation:cardIn .28s ease both}
@media (prefers-reduced-motion:reduce){.grid.is-reflow .card:not([hidden]){animation:none}}
.card__media{display:block;position:relative;background:#fff;aspect-ratio:1/1;overflow:hidden}
/* Absolute so the photo's own shape can't stretch the tile: product renditions
   keep their source aspect ratio (portrait and landscape both), and an in-flow
   img would override aspect-ratio:1/1 and make cards different heights.
   The renditions themselves are square now (tools/image-square.js trims the
   empty border off cutouts and crops real photos), so contain fills the tile
   edge to edge with no letterbox AND no crop — cover would start clipping the
   moment a non-square image slipped in. padding is the 5px frame. */
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.card__badges{position:absolute;top:.7rem;left:.7rem;display:flex;gap:.4rem}
.badge{font-size:.76rem;font-weight:600;padding:.22rem .6rem;border-radius:999px;line-height:1.3}
.badge--used{background:var(--accent-2);color:var(--contrast)}
.badge--rec{background:var(--contrast);color:#fff}
.badge--new{background:#e6f7ec;color:#0a7a3d}
.badge--soldout{background:var(--accent);color:#fff}
.badge--stock{background:#e6f7ec;color:#0a7a3d}
.card__body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.card__cat{font-size:.78rem;color:var(--contrast-3);margin:0;text-transform:none}
.card__cat a{color:inherit;text-decoration:none}
/* Clamp to 2 lines with an ellipsis so every card's title takes the same
   vertical space, whatever the product name's length. */
.card__title{
  font-size:1.02rem;font-family:var(--font-body);font-weight:600;margin:0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.35em * 2);
}
/* Sold-out cards don't sit in a shared grid with in-stock ones (they're
   in their own dashed backorder box), so there's no row-alignment reason
   to reserve 2 lines when the title only needs 1 — that reserved space
   just reads as a gap before the price (Jef). */
.card--soldout .card__title{min-height:0}
.card__title a{text-decoration:none;color:var(--contrast)}
.card__title a:hover{color:var(--accent-3)}
.card__price{font-family:var(--font-display);font-weight:300;font-size:1.2rem;color:var(--accent-3);margin:0}
.card__cta{margin-top:.5rem}
.card--soldout .card__media img{filter:grayscale(1);opacity:.75}
.card--soldout .card__price{color:var(--contrast-3)}

/* ---------- product page ---------- */
.crumbs{font-size:.88rem;color:var(--contrast-3);padding:1.1rem 0 .4rem}
.crumbs a{color:var(--contrast-3);text-decoration:none}
.crumbs a:hover{color:var(--accent-3)}
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;padding:1rem 0 2rem}
@media (max-width:860px){.product{grid-template-columns:1fr;gap:1.5rem}}
.product__stage{position:relative;background:#fff;border:1px solid rgba(27,20,20,.08);border-radius:var(--radius);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Same reasoning as .card__media img — out of flow so the stage stays square,
   and so swapping in a differently-shaped gallery photo can't resize it. */
.product__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.product__stage.is-soldout img{filter:grayscale(1);opacity:.75}
.stage__soldout{position:absolute;top:1rem;left:1rem;background:var(--accent);color:#fff;font-weight:700;padding:.35rem .9rem;border-radius:999px}
/* Shown instead of an empty <img> when a product has no photo yet. */
.stage__noimg{color:var(--contrast-3);font-size:.95rem}
.product__thumbs{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.thumb{width:76px;height:76px;padding:0;border:2px solid rgba(27,20,20,.1);border-radius:8px;background:#fff;cursor:pointer;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb.is-active,.thumb:hover{border-color:var(--accent)}
.product__info h1{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.product__badges{display:flex;gap:.5rem;margin:.2rem 0 .8rem}
.product__price{font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--accent-3);margin:.2rem 0}
.product__sku{color:var(--contrast-3);font-size:.95rem;margin:.2rem 0 .8rem}
.product__short p{margin:.4rem 0}
.product__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.2rem 0 .6rem}
.product__hint{font-size:.9rem;color:var(--contrast-3);max-width:36em}
.product__remarks{margin-top:1.2rem}
.product__remarks p{font-size:.85rem;color:var(--contrast-3);font-style:italic;margin:0 0 .3rem}
/* Under the pager, centred (Jef). */
.shop__remarks{margin:1.6rem 0 0 var(--shop-inset);width:calc(100% - var(--shop-inset));text-align:center}
.soldout-note{background:var(--base);border-left:4px solid var(--accent);padding:.9rem 1.1rem;border-radius:0 var(--radius) var(--radius) 0;margin:1rem 0}
.specs{border-collapse:collapse;width:100%;max-width:34rem;margin:1.5rem 0 0;font-size:.95rem}
.specs caption{text-align:left;font-family:var(--font-display);font-weight:600;font-size:1.05rem;padding-bottom:.5rem;color:var(--contrast)}
.specs th{text-align:left;font-weight:600;color:var(--contrast-3);padding:.55rem .9rem .55rem 0;width:38%;vertical-align:top}
.specs td{padding:.55rem 0}
.specs tr{border-bottom:1px solid rgba(27,20,20,.08)}
.product__desc{padding:1rem 0 2rem;max-width:52em}
.related{padding:.5rem 0 3rem}

/* ---------- pages ---------- */
.pagehero{background:var(--contrast);color:#fff;padding:3.5rem 0}
.pagehero h1{color:#fff;max-width:24em;font-size:clamp(1.6rem,3.2vw,2.4rem);text-wrap:pretty}
.pagehero--about h1{max-width:18em}
.pagehero .hero__sub{margin-bottom:0}
/* Source photos are 1920x480 (4:1) — cover-cropping them at this
   section's own (taller) aspect ratio was cutting off the top/bottom
   of the shot. aspect-ratio locks the section's height to the image's
   own ratio so cover never needs to crop vertically; the text still
   gets real padding on top of that. */
.pagehero--services,.pagehero--about{
  background-repeat:no-repeat;background-position:right center;background-size:cover;
  aspect-ratio:4/1;min-height:220px;
  padding:2.5rem 0;
}
.pagehero--services .wrap,.pagehero--about .wrap{height:100%;display:flex;flex-direction:column;justify-content:center}
.pagehero--services{background-image:linear-gradient(to right,rgba(20,15,15,.92) 0%,rgba(20,15,15,.8) 32%,rgba(20,15,15,.4) 62%,rgba(20,15,15,.1) 85%),url('/images/services-hero-1920.webp')}
.pagehero--about{background-image:linear-gradient(to right,rgba(20,15,15,.92) 0%,rgba(20,15,15,.8) 32%,rgba(20,15,15,.4) 62%,rgba(20,15,15,.1) 85%),url('/images/about-hero-1920.webp')}
@media (max-width:760px){
  .pagehero--services,.pagehero--about{aspect-ratio:auto;padding:3.5rem 0}
  .pagehero--services,.pagehero--about{background-position:75% center}
  .pagehero--services{background-image:linear-gradient(rgba(20,15,15,.55),rgba(20,15,15,.7)),url('/images/services-hero-900.webp')}
  .pagehero--about{background-image:linear-gradient(rgba(20,15,15,.55),rgba(20,15,15,.7)),url('/images/about-hero-900.webp')}
}
.about{padding-top:3rem;padding-bottom:3rem}
.about__story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem;align-items:center;margin-bottom:3rem}
.about__media{margin:0}
.about__media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
@media (max-width:860px){
  .about__story{grid-template-columns:1fr}
  .about__media{order:2}
}
.points{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem;margin:1.2rem 0}
.points li{background:var(--base);border-radius:var(--radius);padding:.8rem 1rem .8rem 2.6rem;font-weight:500;position:relative}
.points li::before{content:"✓";position:absolute;left:1rem;color:var(--accent);font-weight:700}
/* Services index: hero + a 3-column grid of service cards. */
.servcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;padding:3rem 0}
.servcard{
  display:block;background:var(--base-2);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:0 1.6rem 2rem;text-align:center;overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .15s ease,transform .15s ease;
}
.servcard:hover{box-shadow:0 8px 24px rgba(27,20,20,.14);transform:translateY(-2px)}
.servcard:hover .servcard__h{color:var(--accent-3)}
.servcard__figure{margin:0 -1.6rem 0;line-height:0;height:200px;overflow:hidden}
.servcard__figure img{width:100%;height:100%;object-fit:cover;display:block}
.servcard__icon{
  width:56px;height:56px;margin:-28px auto 1.1rem;color:#F2C94C;background:#1b1414;
  border:2px solid #fff;position:relative;z-index:1;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.servcard__icon svg{width:26px;height:26px}
.servcard__h{font-size:1.05rem;margin:0 0 .5rem}
.servcard__text{color:var(--contrast-3);font-size:.92rem;line-height:1.55;margin:0 0 1.1rem}
.servcard__link{
  display:inline-flex;align-items:center;gap:.35rem;color:var(--accent-3);
  font-weight:600;font-size:.92rem;
}
.servcard:hover .servcard__link{color:var(--accent)}
@media (max-width:860px){.servcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.servcards{grid-template-columns:1fr}}

/* Single service page: sticky sidebar of all services + content column
   (photo, heading, narrative, 2-col check list, second section, CTA). */
.svc{display:grid;grid-template-columns:260px 1fr;gap:2.8rem;align-items:start;padding:.5rem 0 3.5rem}
.svc__sidebar{position:sticky;top:10rem}
.servnav{display:flex;flex-direction:column;gap:.55rem}
.servnav__link{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  background:var(--contrast-2);color:#fff;text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:.9rem;line-height:1.3;
  padding:.85rem 1rem .85rem 1.1rem;border-radius:4px;
  transition:background .15s ease;
}
.servnav__link:hover{background:var(--contrast);color:#fff}
.servnav__link[aria-current]{background:var(--accent)}
.servnav__more{width:16px;height:16px;flex:none;opacity:.85}
.svc__content{max-width:44em}
.svc__figure{margin:0 0 1.6rem}
.svc__figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.svc__h{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:0 0 .8rem}
.svc__h2{font-size:1.3rem;margin:2.2rem 0 .7rem}
.svc__content p{color:var(--contrast-3);line-height:1.75}
.svc__points{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.5rem}
.svc__points li{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem}
.svc__points svg{width:18px;height:18px;flex:none;color:var(--accent)}
.svc__gallery{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0 0}
.svc__gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.svc__cta{margin:2.2rem 0 0}
@media (max-width:860px){
  .svc{grid-template-columns:1fr;gap:1.6rem}
  .svc__sidebar{position:static}
  .servnav{flex-direction:row;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.3rem;-webkit-overflow-scrolling:touch}
  .servnav__link{flex:none;white-space:nowrap}
  .servnav__more{display:none}
}
@media (max-width:520px){.svc__points{grid-template-columns:1fr}}
.contact{padding-top:2.5rem;padding-bottom:2.5rem}
.contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem;margin:2rem 0 0}
@media (max-width:760px){.contact{padding-bottom:0}}
.contact__card{background:var(--base);border-radius:var(--radius);padding:1.6rem;text-align:center}
.contact__card h2{font-size:1.15rem}
.contact__card address{font-style:normal;margin-bottom:1rem}
.contact__big{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin:.2rem 0}
.contact__big a{text-decoration:none;color:var(--contrast)}
.contact__big a:hover{color:var(--accent-3)}
.contact__qr{margin:0 auto 1rem;border-radius:8px;background:#fff;padding:.5rem;width:190px;height:auto}
.contact__card--line p{font-size:.9rem;color:var(--contrast-3);margin-top:.9rem}
.contact__map{margin-bottom:0}
.contact__map iframe{width:100%;height:450px;border:0;display:block}
.prose{padding-top:2.5rem;padding-bottom:3rem;max-width:52em}

/* ---------- CTA band / footer ---------- */
/* Reach-out band: photo left, dark panel right (reference's "Reach out
   today" section). Measured off the reference directly: the section
   itself carries the site's normal side padding (same as .wrap, on BOTH
   sides) — the photo sits right at that padding line with no extra inset,
   no border-radius, filling the row's full height. Text gets its own gap
   from the photo via the grid gap, not extra padding on the section. */
/* margin-bottom:-1px closes a 1px sub-pixel compositing seam some browsers
   render between this section and the white one below it (the boundary is
   a hard dark→white edge, and overflow:hidden here promotes its own
   render layer) — not a real border, just rounding at the seam. */
.reach{background:var(--contrast);position:relative;overflow:hidden;border:0;margin-bottom:-1px}
.reach__in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:3rem;align-items:stretch;max-width:1200px;margin:0 auto;padding:0 1.25rem}
.reach__media{margin:0;line-height:0;align-self:stretch}
.reach__media img{width:100%;height:100%;object-fit:cover;display:block}
.reach__body{color:#fff;padding:3.5rem 0;align-self:center}
.reach__body h2{color:#fff;max-width:18em}
.reach__body p{color:rgba(255,255,255,.8);line-height:1.7;max-width:34em}
.reach__call-label{font-weight:600;margin:1.6rem 0 .2rem}
.reach__call{margin:0}
.reach__call a{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:#fff;text-decoration:none}
/* The fold: a small white triangle tucked into the section's own
   bottom-right corner only — a subtle accent, not a dominant shape.
   A linear-gradient cut (not clip-path) so there's no aliased polygon
   edge showing as a hairline seam against the section below. */
.reach::after{
  content:"";position:absolute;right:0;bottom:0;width:min(16vw,190px);height:min(16vw,190px);
  background:var(--base-2);clip-path:polygon(100% 0,100% 100%,0 100%);
}

/* Home services grid — reference's "OUR SERVICES" section: white cards,
   photo on top, heading, blurb, red "Learn More" link into the full
   /services/<slug>/ page. */
.hservices{padding:4.5rem 0;background:var(--base-2)}
.hservices .hero__sub{max-width:44em;margin-bottom:0;text-wrap:pretty}
.hservices__grid{margin-top:1.2rem}
@media (max-width:860px){
  .reach__in{grid-template-columns:1fr;gap:1.5rem;padding-top:1.25rem}
  .reach__media{aspect-ratio:16/10}
  .reach__media img{aspect-ratio:16/10}
  .reach__body{padding:0 0 2.5rem}
  .reach::after{width:26vw;height:26vw}
}

.cta-band{background:linear-gradient(100deg,var(--accent-3),var(--accent));color:#fff;padding:2.6rem 0}
.cta-band h2{color:#fff;margin:0 0 .2rem;font-size:clamp(1.3rem,2.4vw,1.7rem);max-width:26em;text-wrap:pretty}
.cta-band p{margin:0;opacity:.95;text-wrap:pretty}
.cta-band__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.cta-band__actions{display:flex;gap:.8rem;flex-wrap:wrap}
.site-footer{background:var(--contrast);color:rgba(255,255,255,.85);font-size:.95rem}
.site-footer a{color:rgba(255,255,255,.85)}
.site-footer a:hover{color:var(--accent-2)}
.footer__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);gap:2.5rem;padding:3rem 1.25rem 2rem}
@media (min-width:861px){.footer__about{padding-right:20px}}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr;gap:1.6rem}}
.footer__col h3{color:#fff;font-size:1.05rem;margin-bottom:.5rem}
.brand--footer .brand__name{color:#fff}
.footer__about p{margin:.8rem 0 0;text-wrap:pretty}
.footer-social{display:flex;gap:.6rem;margin-top:1rem}
.footer-social a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);line-height:0;
  transition:background-color .15s ease,color .15s ease;
}
.footer-social a:hover{background:var(--accent);color:#fff}
.footer-social svg{width:19px;height:19px;display:block}
.footer__phones a{text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1.15rem}
.footer__col address{font-style:normal;margin-bottom:.7rem}
.footer__col address a{text-decoration:none}
.footer__hours{margin-top:0}
.footer__menu a{text-decoration:none}
.footer__legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:1.1rem;padding-bottom:1.1rem;font-size:.85rem;color:rgba(255,255,255,.6)}
.footer__legal p{margin:0}
.footer__credit a{color:rgba(255,255,255,.6)}

/* mobile sticky action bar — LINE-first commerce */
.stickybar{display:none}
@media (max-width:760px){
  .stickybar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;box-shadow:0 -2px 12px rgba(27,20,20,.18)}
  .stickybar__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.95rem .5rem;font-weight:700;text-decoration:none;font-size:1rem}
  .stickybar__btn svg{width:18px;height:18px;flex:none}
  .stickybar__call{background:var(--contrast);color:#fff}
  .stickybar__line{background:var(--line);color:#fff}
  body{padding-bottom:3.4rem}
  .cta-band__in{flex-direction:column;align-items:flex-start}
}