/* =====================================================================
   Mailer Boxes Co UK — theme styles
   Deep sage green + kraft. Mobile-first; desktop from 820px / 1024px.
   ===================================================================== */
:root {
  --ink:#13241C; --green-950:#0F2A20; --green-900:#163A2C; --green-800:#1C4A38; --green-700:#235C44;
  --green-600:#2C7553; --green-500:#3A8E66; --green-400:#5FA984; --green-100:#E2EFE8; --green-50:#F1F7F3;
  --kraft-700:#8A6234; --kraft-600:#B98B4F; --kraft-500:#C99A60; --kraft-200:#EAD9BD; --kraft-100:#F3E9D8;
  --paper:#FAF9F5; --white:#FFFFFF; --line:#E6E8E3; --line-soft:#EFF0EC;
  --gray-700:#43504A; --gray-600:#52605A; --gray-500:#5F6D67; --gray-300:#C3CAC5;
  --danger:#B3412E; --danger-bg:#FBEAE7;
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --pill:999px;
  --shadow-sm:0 2px 10px rgba(19,36,28,.06); --shadow:0 12px 30px -12px rgba(19,36,28,.18);
  --maxw:1240px; --gutter:20px;
  --sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Newsreader", Georgia, serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--green-700); }
a:hover { color:var(--green-900); }
button, input, select, textarea { font:inherit; color:inherit; }
h1,h2,h3,h4 { line-height:1.1; letter-spacing:-.02em; margin:0 0 .5em; font-weight:800; text-wrap:balance; }
h1 { font-size:clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size:clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size:1.2rem; }
p { margin:0 0 1em; text-wrap:pretty; }
.serif { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; }
.ico { width:1.1em; height:1.1em; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.18em; }
.screen-reader-text, .sr-only { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link:focus { position:fixed; top:8px; left:8px; z-index:999; background:#fff; padding:10px 14px; border-radius:8px; clip:auto; width:auto; height:auto; }
:focus-visible { outline:3px solid var(--green-500); outline-offset:2px; }
.hp { position:absolute; left:-9999px; top:-9999px; }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.section { padding:clamp(44px, 7vw, 88px) 0; }
.section-sm { padding:clamp(32px, 5vw, 56px) 0; }
.bg-white { background:var(--white); }
.bg-tint { background:var(--green-50); }
.bg-paper { background:var(--paper); }
.bg-dark { background:var(--green-900); color:#EAF2EC; }
.bt { border-top:1px solid var(--line); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-600); }
.eyebrow::before { content:""; width:22px; height:2px; background:var(--kraft-600); border-radius:2px; }
.lead { font-size:1.12rem; color:var(--gray-700); max-width:60ch; }
.muted { color:var(--gray-600); }
.head-row { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.section-head { max-width:680px; margin-bottom:32px; }
.section-head.center { margin-inline:auto; text-align:center; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px; border-radius:var(--pill); font-weight:700; font-size:1rem; line-height:1.1; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .1s; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--green-600); color:#fff; }
.btn-primary:hover { background:var(--green-700); color:#fff; }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { background:var(--green-900); color:#fff; }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--gray-300); }
.btn-outline:hover { border-color:var(--green-600); color:var(--green-700); }
.btn-white { background:#fff; color:var(--green-900); }
.btn-ghost-white { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost-white:hover { background:#fff; color:var(--green-900); }
.btn-lg { min-height:56px; padding:14px 30px; font-size:1.05rem; }
.btn-block { width:100%; }
.link-arrow { font-weight:700; text-decoration:none; display:inline-flex; gap:6px; align-items:center; }

/* Pills / badges */
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--pill); font-size:.82rem; font-weight:700; background:var(--green-100); color:var(--green-700); }
.pill--kraft { background:var(--kraft-100); color:var(--kraft-700); }
.badge-new { background:var(--kraft-600); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.04em; padding:2px 7px; border-radius:var(--pill); margin-left:6px; }

/* =====================================================================
   Header
   ===================================================================== */
.topbar { background:var(--green-900); color:#CFE0D6; font-size:.82rem; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px; }
.topbar a { color:#CFE0D6; text-decoration:none; }
.topbar a:hover { color:#fff; }
.topbar__links, .topbar__social { display:none; gap:18px; align-items:center; }
.topbar__msg { flex:1 1 auto; text-align:center; }
.site-header { background:#fff; border-bottom:1px solid var(--line); position:relative; z-index:40; }
.hdr { display:flex; align-items:center; gap:14px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand .mark { width:40px; height:40px; border-radius:12px; background:var(--green-600); color:#fff; display:grid; place-items:center; font-size:1.3rem; }
.brand .word { font-weight:800; font-size:1.2rem; letter-spacing:-.02em; line-height:1; }
.brand .word span { color:var(--kraft-600); }
.brand .word small { display:block; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--kraft-700); font-weight:700; margin-top:4px; }
.custom-logo { max-height:52px; width:auto; }
.hdr__search { order:5; flex:1 1 100%; position:relative; }
.hdr__search input { width:100%; border:1.5px solid var(--line); border-radius:var(--pill); padding:11px 48px 11px 16px; background:var(--paper); min-height:46px; }
.hdr__search button { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:50%; background:var(--green-600); color:#fff; display:grid; place-items:center; cursor:pointer; }
.hdr__actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.hdr__quote { display:none; }
.icon-btn { width:46px; height:46px; border-radius:12px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; color:var(--ink); cursor:pointer; text-decoration:none; font-size:1.2rem; }
.nav { display:none; border-top:1px solid var(--line); }
.nav ul { list-style:none; margin:0; padding:0; }
.nav > .container { display:flex; align-items:stretch; gap:4px; min-height:52px; }
.nav .menu { display:flex; align-items:stretch; flex-wrap:wrap; }
.nav .menu > li { position:relative; display:flex; }
.nav .menu > li > a { display:flex; align-items:center; gap:6px; padding:0 13px; font-weight:600; font-size:.96rem; color:var(--gray-700); text-decoration:none; }
.nav .menu > li > a:hover, .nav .menu > li.current-menu-item > a, .nav .menu > li.current-menu-ancestor > a, .nav .menu > li.current-product_cat-ancestor > a { color:var(--green-700); box-shadow:inset 0 -2.5px 0 var(--green-600); }
.nav .menu > li.menu-item-has-children > a::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); margin-left:4px; }
.nav .sub-menu { position:absolute; top:100%; left:0; min-width:250px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.15s; z-index:50; }
.nav .menu > li:hover .sub-menu, .nav .menu > li:focus-within .sub-menu { opacity:1; visibility:visible; transform:none; }
.nav .sub-menu a { display:block; padding:10px 12px; border-radius:9px; font-weight:600; font-size:.92rem; color:var(--gray-700); text-decoration:none; }
.nav .sub-menu a:hover { background:var(--green-50); color:var(--green-700); }
.nav__phone { margin-left:auto; display:flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; padding:0 4px 0 16px; }
.drawer { display:none; border-top:1px solid var(--line); background:#fff; padding:6px var(--gutter) 18px; }
.drawer.open { display:block; }
.drawer ul { list-style:none; margin:0; padding:0; }
.drawer .menu > li > a { display:flex; justify-content:space-between; padding:14px 2px; border-bottom:1px solid var(--line-soft); font-weight:700; color:var(--ink); text-decoration:none; }
.drawer .sub-menu a { display:block; padding:10px 14px; font-weight:500; color:var(--gray-700); text-decoration:none; border-bottom:1px solid var(--line-soft); }
.drawer__cta { display:grid; gap:10px; margin-top:16px; }
.drawer__contact { display:flex; justify-content:center; gap:18px; margin-top:12px; font-weight:700; font-size:.92rem; }
@media (min-width:820px) {
  .topbar__links, .topbar__social { display:flex; }
  .topbar__msg { flex:0 1 auto; }
  .hdr { flex-wrap:nowrap; gap:24px; padding-top:16px; padding-bottom:16px; }
  .hdr__search { order:0; flex:1 1 320px; max-width:460px; }
  .hdr__quote { display:inline-flex; }
  .hdr__burger { display:none; }
  .nav { display:block; }
  .drawer, .drawer.open { display:none; }
  .site-header { position:sticky; top:0; }
  .admin-bar .site-header { top:32px; }
}

/* Breadcrumb */
.crumbs { font-size:.84rem; color:var(--gray-600); padding:14px 0 0; }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.crumbs li + li::before { content:"/"; margin-right:6px; color:var(--gray-300); }
.crumbs a { color:var(--gray-600); text-decoration:none; }
.crumbs a:hover { color:var(--green-700); }
.crumbs [aria-current] { color:var(--ink); font-weight:600; }

/* =====================================================================
   Hero (home / category)
   ===================================================================== */
.hero { background:linear-gradient(170deg, var(--green-50), var(--paper) 70%); }
.hero .container { display:grid; gap:32px; padding-top:clamp(28px,5vw,64px); padding-bottom:clamp(36px,6vw,72px); align-items:center; }
.hero h1 { margin:14px 0 16px; }
.hero__cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.hero__facts { display:flex; gap:28px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.hero__facts b { display:block; font-size:1.5rem; color:var(--green-700); letter-spacing:-.02em; }
.hero__facts span { font-size:.82rem; color:var(--gray-600); font-weight:600; }
.hero__media { border-radius:var(--r-xl); overflow:hidden; background:var(--green-100); aspect-ratio:4/3.2; }
.hero__media img { width:100%; height:100%; object-fit:cover; }
@media (min-width:900px) { .hero .container { grid-template-columns:1.05fr .95fr; gap:48px; } }

.cat-hero { background:var(--green-50); border-bottom:1px solid var(--line-soft); }
.cat-hero .container { display:grid; gap:24px; padding-top:22px; padding-bottom:32px; align-items:center; }
.cat-hero h1 { margin:10px 0 12px; }
.cat-hero__media { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; background:var(--green-100); }
.cat-hero__media img { width:100%; height:100%; object-fit:cover; }
.cat-hero__facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
@media (min-width:900px) { .cat-hero .container { grid-template-columns:1.2fr .8fr; gap:40px; } }

/* Trust strip */
.trust { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.trust__item { display:flex; gap:12px; align-items:flex-start; padding:16px; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.trust__item .ic { flex:0 0 42px; height:42px; border-radius:12px; background:var(--green-50); color:var(--green-600); display:grid; place-items:center; font-size:1.25rem; }
.trust__item b { display:block; font-size:.98rem; }
.trust__item span { font-size:.86rem; color:var(--gray-600); }

/* Pillars (home) */
.pillars { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.pillar { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:var(--ink); transition:box-shadow .15s, transform .15s; }
.pillar:hover { box-shadow:var(--shadow); transform:translateY(-2px); color:var(--ink); }
.pillar__img { aspect-ratio:16/10; background:var(--green-100); overflow:hidden; }
.pillar__img img { width:100%; height:100%; object-fit:cover; }
.pillar__body { padding:18px 20px 22px; }
.pillar__body h3 { font-size:1.3rem; margin-bottom:6px; }
.pillar__body p { color:var(--gray-600); font-size:.95rem; margin-bottom:12px; }

/* =====================================================================
   Product grid & cards
   ===================================================================== */
.grid { display:grid; gap:16px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:700px) { .grid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } }
@media (min-width:1080px) { .grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:10px; text-decoration:none; color:var(--ink); transition:box-shadow .15s, border-color .15s, transform .15s; }
.card:hover { box-shadow:var(--shadow); border-color:var(--green-400); transform:translateY(-2px); color:var(--ink); }
.card__img { aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--green-50); }
.card__img img { width:100%; height:100%; object-fit:cover; }
.card__body { padding:10px 6px 4px; display:flex; flex-direction:column; gap:4px; flex:1 1 auto; }
.card__title { font-size:1rem; font-weight:800; letter-spacing:-.01em; line-height:1.25; margin:0; }
.card__meta { font-size:.8rem; color:var(--gray-600); }
.pc-price { font-size:.86rem; color:var(--gray-700); margin-top:auto; }
.pc-price b { font-size:1.02rem; color:var(--ink); }
.pc-price small { color:var(--kraft-700); font-weight:700; }
.pc-price--ask { font-weight:700; color:var(--green-700); }
.ph { width:100%; height:100%; min-height:120px; display:grid; place-content:center; justify-items:center; gap:8px; text-align:center; color:rgba(19,36,28,.5); background:linear-gradient(135deg, var(--green-50), var(--kraft-100)); padding:12px; font-size:.8rem; font-weight:700; }
.ph .ico { width:34px; height:34px; }

/* Category tabs / pills */
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 24px; padding:0; list-style:none; }
.tabs a, .tabs button { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:var(--pill); border:1.5px solid var(--line); background:#fff; color:var(--ink); font-weight:700; font-size:.92rem; text-decoration:none; cursor:pointer; }
.tabs a:hover, .tabs button:hover { border-color:var(--green-500); }
.tabs .on, .tabs [aria-selected="true"] { background:var(--ink); color:#fff; border-color:var(--ink); }

/* =====================================================================
   Product page — Option A (sticky gallery + option cards)
   ===================================================================== */
.pdp { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding-top:16px; padding-bottom:48px; }
.pdp__left { display:grid; gap:12px; align-content:start; min-width:0; }
.pdp__right { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-content:start; min-width:0; }
@media (min-width:820px) {
  .pdp { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; }
  .pdp__left { position:sticky; top:132px; }
  .admin-bar .pdp__left { top:164px; }
}
.gallery__main { position:relative; border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--line); aspect-ratio:1/1; }
.gallery__main img { width:100%; height:100%; object-fit:cover; }
.gallery__badge { position:absolute; top:12px; left:12px; background:#fff; color:var(--green-700); font-size:.75rem; font-weight:800; padding:6px 12px; border-radius:var(--pill); box-shadow:var(--shadow-sm); }
.gallery__thumbs { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.gallery__thumbs button { padding:2px; border-radius:12px; border:2px solid var(--line); background:#fff; aspect-ratio:1/1; cursor:pointer; overflow:hidden; }
.gallery__thumbs button[aria-pressed="true"] { border-color:var(--ink); }
.gallery__thumbs img { width:100%; height:100%; object-fit:cover; border-radius:9px; }
.so-far { display:none; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.so-far__head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; font-size:.95rem; }
.so-far__head span { font-size:.8rem; color:var(--gray-600); }
.so-far dl { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 16px; margin:0; font-size:.88rem; }
.so-far dl div { display:flex; justify-content:space-between; gap:8px; border-bottom:1px dashed var(--line); padding:4px 0; min-width:0; }
.so-far dt { color:var(--gray-600); }
.so-far dd { margin:0; font-weight:700; text-align:right; overflow-wrap:anywhere; }
@media (min-width:820px) { .so-far { display:block; } }

.pdp__title h1 { font-size:clamp(1.8rem, 3.4vw, 2.5rem); margin:6px 0 8px; }
.rating { display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--gray-600); }
.rating .stars { color:var(--kraft-600); letter-spacing:2px; }
.price-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:4px 0 8px; }
.price-line__from, .price-line__unit { font-size:.95rem; color:var(--gray-700); }
.price-line__amt { font-size:1.75rem; letter-spacing:-.01em; }
.price-line__note { font-size:.82rem; color:var(--kraft-700); font-weight:700; }
.price-line__ask { font-size:1.15rem; }
.pdp__short { color:var(--gray-700); margin-bottom:10px; }
.pdp__short p:last-child { margin-bottom:0; }
.facts { display:flex; flex-wrap:wrap; gap:8px; }

.mini-bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:8px 12px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 8px 20px -14px rgba(19,36,28,.5); min-width:0; }
.mini-bar__thumb { flex:0 0 44px; width:44px; height:44px; border-radius:10px; overflow:hidden; background:var(--green-50); display:grid; place-items:center; }
.mini-bar__thumb img { width:100%; height:100%; object-fit:cover; }
.mini-bar__swatch { width:26px; height:26px; border-radius:50%; border:1px solid rgba(19,36,28,.2); }
.mini-bar__text { min-width:0; flex:1 1 auto; }
.mini-bar__text b { display:block; font-size:.9rem; }
.mini-bar__text span { display:block; font-size:.82rem; color:var(--gray-600); overflow-wrap:anywhere; }
@media (min-width:820px) { .mini-bar { display:none; } }

.opt { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin:0; min-width:0; }
.opt legend { padding:0; float:left; width:100%; display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; font-size:.95rem; font-weight:800; }
.opt legend + * { clear:both; }
.opt legend .num { color:var(--green-600); margin-right:6px; }
.opt legend > span { min-width:0; }
.opt legend .val { overflow-wrap:anywhere; font-size:.82rem; color:var(--gray-600); font-weight:600; text-align:right; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { position:relative; }
.chip input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip span { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 15px; border-radius:var(--pill); border:1.5px solid var(--gray-300); background:#fff; font-size:.9rem; font-weight:700; transition:.12s; }
.chip input:checked + span { background:var(--ink); color:#fff; border-color:var(--ink); }
.chip input:focus-visible + span { outline:3px solid var(--green-500); outline-offset:2px; }
.chip--swatch span { width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; border:2px solid transparent; background:#fff; }
.chip--swatch i { display:block; width:28px; height:28px; border-radius:50%; border:1px solid rgba(19,36,28,.25); }
.chip--swatch input:checked + span { background:#fff; border-color:var(--ink); }
.size-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:10px; }

.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label, .field .lbl { font-size:.82rem; font-weight:700; color:var(--gray-700); }
.field small { font-size:.78rem; color:var(--gray-600); }
.input, .select, .textarea { width:100%; min-width:0; min-height:46px; border:1.5px solid var(--gray-300); border-radius:12px; padding:10px 12px; background:#fff; font-size:1rem; }
.textarea { min-height:84px; resize:vertical; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 4px rgba(58,142,102,.14); }
.was-validated .input:invalid, .was-validated .select:invalid { border-color:var(--danger); }
.fgrid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.fgrid .full { grid-column:1 / -1; }
.file-drop { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px dashed var(--gray-300); border-radius:12px; color:var(--gray-600); font-size:.9rem; background:#fff; cursor:pointer; position:relative; }
.file-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-drop .ico { font-size:1.3rem; color:var(--green-600); }
.more { border-radius:12px; background:var(--green-50); margin:12px 0; }
.more summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:46px; padding:10px 14px; font-weight:700; font-size:.92rem; }
.more summary::-webkit-details-marker { display:none; }
.more summary::after { content:"+"; font-size:1.3rem; line-height:1; }
.more[open] summary::after { content:"−"; }
.more__body { padding:4px 14px 14px; }
.ip { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1.5px solid var(--line); border-radius:12px; font-size:.86rem; font-weight:700; margin:12px 0; background:#fff; }
.ip input { width:20px; height:20px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--green-600); }
.form-alert { margin:0 0 12px; padding:12px 14px; border-radius:12px; background:var(--danger-bg); color:#8E2B1C; font-size:.9rem; font-weight:700; }
.form-note { margin:10px 0 0; text-align:center; font-size:.84rem; color:var(--gray-600); }
.contact-line { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-size:.86rem; font-weight:700; }
.contact-line a { display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.quote-card { background:#fff; border:1.5px solid var(--green-600); border-radius:var(--r); padding:16px; scroll-margin-top:140px; }
.quote-card h2 { font-size:1rem; margin:0 0 12px; }
.quote-card h2 .num { color:var(--green-600); margin-right:6px; }
.inline-check { display:flex; gap:8px; align-items:center; }
.yn { display:flex; gap:8px; }

/* Bottom quote bar (phones / small tablets) */
.mbar { position:sticky; bottom:0; z-index:30; display:flex; align-items:center; gap:12px; padding:10px 16px; background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 20px -14px rgba(19,36,28,.5); }
.mbar__text { flex:1 1 auto; min-width:0; font-size:.78rem; color:var(--gray-600); }
.mbar__text b { font-size:.95rem; color:var(--ink); }
.mbar__text .bulk { color:var(--kraft-700); font-weight:700; }
.mbar .btn { min-height:46px; padding:10px 20px; }
@media (min-width:820px) { .mbar { display:none; } }

/* Description + specs */
.split2 { display:grid; gap:28px; }
@media (min-width:900px) { .split2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; } }
.desc-scroll { max-height:360px; overflow-y:auto; padding:2px 16px 2px 0; border-bottom:1px solid var(--line); color:var(--gray-700); font-size:.97rem; scrollbar-width:thin; }
.desc-scroll h2 { font-size:1.25rem; margin:18px 0 8px; color:var(--ink); }
.desc-scroll h3 { font-size:1.08rem; margin:16px 0 6px; color:var(--ink); }
.desc-scroll ul { padding-left:20px; }
.desc-scroll a { font-weight:700; }
.desc-hint { font-size:.8rem; color:var(--gray-600); margin-top:8px; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.spec { width:100%; border-collapse:collapse; font-size:.94rem; }
.spec th, .spec td { padding:12px 16px; text-align:left; border-top:1px solid var(--line-soft); vertical-align:top; }
.spec tr:first-child th, .spec tr:first-child td { border-top:0; }
.spec th { width:40%; color:var(--gray-600); font-weight:600; }
.spec td { font-weight:700; }
.size-table { width:100%; min-width:560px; border-collapse:collapse; font-size:.92rem; text-align:center; }
.size-table th, .size-table td { padding:11px 10px; border-top:1px solid var(--line-soft); }
.size-table thead th { background:var(--paper); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-600); border-top:0; }
.size-table th[scope="row"] { text-align:left; }

/* Split feature (upsell, about) */
.feature { display:grid; gap:28px; align-items:center; }
@media (min-width:900px) { .feature { grid-template-columns:1fr 1fr; gap:48px; } }
.feature__img { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--green-100); }
.feature__img img { width:100%; height:100%; object-fit:cover; }
.checks { list-style:none; padding:0; margin:0 0 22px; display:grid; gap:12px; }
.checks li { display:flex; gap:12px; }
.checks .ic { flex:0 0 30px; height:30px; border-radius:9px; background:#fff; color:var(--green-600); display:grid; place-items:center; }
.checks b { display:block; }
.checks span { color:var(--gray-600); font-size:.92rem; }

/* Steps */
.steps { list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); counter-reset:s; }
.steps li { border:1px solid var(--line); border-radius:var(--r); padding:18px; background:#fff; }
.steps li::before { counter-increment:s; content:counter(s); width:36px; height:36px; border-radius:50%; background:var(--green-600); color:#fff; font-weight:800; display:grid; place-items:center; margin-bottom:10px; }
.steps h3 { font-size:1.02rem; margin:0 0 4px; }
.steps p { margin:0; color:var(--gray-600); font-size:.92rem; }

/* FAQ */
.faq { max-width:860px; margin:0 auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:10px; }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:54px; padding:14px 18px; font-weight:700; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:0 0 28px; height:28px; border-radius:50%; background:var(--green-50); display:grid; place-items:center; font-size:1.2rem; color:var(--green-700); }
.faq details[open] summary::after { content:"−"; }
.faq details > div { padding:0 18px 16px; color:var(--gray-700); }

/* CTA band */
.cta-band { background:var(--green-900); color:#EAF2EC; border-radius:var(--r-xl); padding:clamp(26px,4vw,44px); display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
.cta-band h2 { color:#fff; margin:0 0 6px; font-size:clamp(1.4rem, 2.6vw, 2rem); }
.cta-band p { margin:0; color:#BFD3C7; }

/* Apparel landing */
.min-table { width:100%; min-width:520px; border-collapse:collapse; font-size:.94rem; }
.min-table th, .min-table td { padding:13px 16px; text-align:left; border-top:1px solid var(--line-soft); }
.min-table thead th { background:var(--paper); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-600); border-top:0; }
.deco { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.deco__card { border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; background:var(--paper); }
.deco__card h3 { display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:1.15rem; }
.deco__card .tag { font-size:.72rem; font-weight:700; color:var(--green-700); background:var(--green-100); padding:4px 10px; border-radius:var(--pill); letter-spacing:0; }
.audience { display:flex; flex-wrap:wrap; gap:10px; }
.audience span { padding:10px 16px; border-radius:var(--pill); background:#fff; border:1px solid var(--line); font-weight:700; font-size:.92rem; }
[data-filter-item][hidden] { display:none !important; }

/* Quick quote card (hero) */
.qcard { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px; }
.qcard h2 { font-size:1.35rem; margin:0 0 4px; }
.qcard .sub { color:var(--gray-600); font-size:.9rem; margin-bottom:14px; }

/* Pages */
.page-hero { background:var(--green-50); border-bottom:1px solid var(--line-soft); padding:26px 0 30px; }
.page-hero h1 { margin:8px 0 8px; }
.prose { max-width:780px; }
.prose h2 { font-size:1.45rem; margin:1.6em 0 .5em; }
.prose h3 { font-size:1.15rem; margin:1.3em 0 .4em; }
.prose ul, .prose ol { padding-left:22px; }
.prose li { margin-bottom:.35em; }
.prose table { border-collapse:collapse; width:100%; }
.prose td, .prose th { border:1px solid var(--line); padding:8px 10px; text-align:left; }
.two-col { display:grid; gap:28px; }
@media (min-width:960px) { .two-col { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:44px; align-items:start; } }
.side-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; }
.side-card.dark { background:var(--green-900); color:#CFE0D6; border:0; }
.side-card.dark h2, .side-card.dark h3 { color:#fff; }
.contact-list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.contact-list li { display:flex; gap:12px; align-items:flex-start; }
.contact-list .ic { flex:0 0 40px; height:40px; border-radius:12px; background:var(--green-50); color:var(--green-600); display:grid; place-items:center; font-size:1.15rem; }
.thanks { max-width:640px; margin:0 auto; text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,5vw,48px); }
.thanks .tick { width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:var(--green-600); color:#fff; display:grid; place-items:center; font-size:1.8rem; }

/* Pagination */
.pagination { margin-top:36px; }
.pagination ul, .page-numbers { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; justify-content:center; }
.page-numbers a, .page-numbers span { display:grid; place-items:center; min-width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; text-decoration:none; font-weight:700; color:var(--ink); }
.page-numbers .current { background:var(--ink); color:#fff; border-color:var(--ink); }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background:var(--green-900); color:#BBD0C2; padding-top:48px; }
.site-footer a { color:#BBD0C2; text-decoration:none; }
.site-footer a:hover { color:#fff; }
.f-grid { display:grid; gap:28px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); padding-bottom:36px; }
.f-grid h2 { color:#fff; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
.f-grid ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.92rem; }
.f-brand .word { color:#fff; }
.f-brand p { font-size:.9rem; line-height:1.7; color:#A7C0B1; margin:12px 0 16px; max-width:34ch; }
.f-social { display:flex; gap:10px; }
.f-social a { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; font-size:1.15rem; }
.f-social a:hover { background:var(--green-600); }
.f-bottom { border-top:1px solid rgba(255,255,255,.12); padding:18px 0; font-size:.82rem; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; }
.f-bottom ul { list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin:0; padding:0; }

/* WooCommerce bits we keep */
.woocommerce-notices-wrapper:empty { display:none; }

/* JS states */
.opt.is-invalid { border-color:var(--danger) !important; box-shadow:0 0 0 3px var(--danger-bg); }
.opt.is-invalid legend::after { content:"Please choose an option"; display:block; color:var(--danger); font-size:.8rem; font-weight:700; margin-top:4px; }
.was-validated .textarea:invalid { border-color:var(--danger); }
.was-validated .ip input:invalid + * , .was-validated .ip:has(input:invalid) { color:var(--danger); }
button[disabled] { opacity:.7; cursor:wait; }
@media (max-width:600px) {
	.min-table { min-width:0; font-size:.88rem; }
	.min-table th, .min-table td { padding:11px 10px; }
	.min-table th:nth-child(4), .min-table td:nth-child(4) { display:none; }
}
.table-wrap { max-width:100%; }

/* =====================================================================
   Buy online — standard sizes × quantity grid (template-parts/buy-online.php)
   ===================================================================== */
.buy { background:#FFFDF8; border:1px solid var(--kraft-200); border-radius:var(--r-lg); min-width:0; }
.buy__sum { list-style:none; display:flex; align-items:center; gap:12px; padding:18px 20px; cursor:pointer; }
.buy__sum::-webkit-details-marker { display:none; }
.buy__sum-text { flex:1 1 auto; min-width:0; display:grid; gap:2px; }
.buy__sum-text b { font-size:1.05rem; }
.buy__sum-text small, .buy__from small { color:var(--gray-600); font-size:.8rem; }
.buy__from { text-align:right; display:grid; flex:0 0 auto; }
.buy__from b { font-size:1.15rem; }
.buy__chev { width:16px; height:16px; color:var(--gray-600); transition:transform .2s; flex:0 0 16px; }
.buy[open] .buy__chev { transform:rotate(180deg); }
.buy__form { border-top:1px solid var(--kraft-200); padding:18px 20px 20px; display:grid; gap:14px; }
.buy__head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.92rem; }
.buy__head span { color:var(--kraft-700); font-size:.82rem; }
.buy__grid { display:grid; grid-template-columns:minmax(0,1.25fr) repeat(var(--n), minmax(0,1fr)); gap:8px; align-items:center; }
.buy__grid--single { grid-template-columns:repeat(var(--n), minmax(0,1fr)); }
.buy__grid--single .buy__th--size, .buy__grid--single .buy__size { display:none; }
.buy__th { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-600); text-align:center; }
.buy__th--size { text-align:left; }
.buy__size { font-size:.9rem; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.buy__size small { display:block; font-weight:500; color:var(--gray-600); font-size:.75rem; }
.buy__cell { position:relative; display:block; min-width:0; }
.buy__cell input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.buy__cell span { display:flex; align-items:center; justify-content:center; min-height:44px; padding:6px 4px; border:1px solid var(--kraft-200); border-radius:10px; background:var(--kraft-100); font-weight:600; font-size:.9rem; font-variant-numeric:tabular-nums; transition:background .15s, border-color .15s; }
.buy__cell:hover span { border-color:var(--kraft-600); }
.buy__cell input:checked + span { background:var(--ink); border-color:var(--ink); color:#fff; }
.buy__cell input:focus-visible + span { outline:3px solid var(--green-400); outline-offset:2px; }
.buy__notes { display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; font-size:.82rem; color:var(--gray-600); }
.buy__custom { color:var(--kraft-700); font-weight:700; text-decoration:none; }
.buy__fields { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.buy__fields .full { grid-column:1 / -1; }
.buy__foot { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--kraft-200); }
.buy__foot small { color:var(--gray-600); font-size:.82rem; }
.buy__total { font-size:clamp(1.8rem, 6vw, 2.4rem); font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.buy__perks { display:grid; text-align:right; font-size:.82rem; color:var(--gray-600); }
.buy__fine { margin:0; font-size:.8rem; color:var(--gray-600); }
@media (max-width:480px) {
	.buy__sum, .buy__form { padding-left:14px; padding-right:14px; }
	.buy__grid { grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:6px; }
	.buy__th--size { display:none; }
	.buy__size { grid-column:1 / -1; margin-top:4px; }
	.buy__cell span { font-size:.85rem; }
	.buy__perks { text-align:left; }
}

/* Basket, checkout & account pages */
.wc-page { padding-top:24px; padding-bottom:56px; }
.wc-page h1 { margin-bottom:18px; }
.mbc-qty { font-weight:700; }
.mbc-next { margin-top:24px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.mbc-next h2 { font-size:1.2rem; margin:0 0 8px; }
.mbc-next ol { margin:0; padding-left:20px; display:grid; gap:6px; }
.hdr__basket { position:relative; }
.hdr__basket .count { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--kraft-600); color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; }
/* Very small phones: keep menu, logo and basket on one row */
@media (max-width:374px) {
	.hdr { gap:10px; }
	.hdr .icon-btn { width:42px; height:42px; }
	.brand { gap:8px; }
	.brand .mark { width:34px; height:34px; }
	.brand .word { font-size:1.02rem; }
	.brand .word small { font-size:.5rem; letter-spacing:.16em; }
}

/* =====================================================================
   Blog
   ===================================================================== */
.post-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.post-card .card__img { aspect-ratio:16/10; }
.post-card__cat { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--kraft-700); }
.post-card .card__title { font-size:1.08rem; line-height:1.3; margin:4px 0 6px; }
.post-card__ex { margin:0 0 8px; color:var(--gray-600); font-size:.92rem; }
.post__narrow > * { max-width:820px; }
.post__hero .eyebrow { text-decoration:none; }
.post__meta { margin:12px 0 0; color:var(--gray-600); font-size:.9rem; }
.post__layout { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; padding-bottom:56px; }
@media (min-width:980px) { .post__layout { grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start; } .post__side { position:sticky; top:140px; } }
.post__img { margin:0 0 24px; border-radius:var(--r-lg); overflow:hidden; }
.post__img img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.post__body { max-width:760px; font-size:1.05rem; }
.post__body h2 { margin-top:2em; }
.post__body h3 { margin-top:1.5em; }
.post__body table { width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.95rem; display:block; overflow-x:auto; }
.post__body th, .post__body td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.post__body th { background:var(--paper); }
.post__body .tip { background:var(--green-50); border-left:4px solid var(--green-600); padding:14px 18px; border-radius:0 12px 12px 0; margin:1.4em 0; }
.post__side { display:grid; gap:16px; min-width:0; }
.post__products { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; }
.post__products ul { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px; }
.post__products li { display:grid; gap:2px; }
.post__products li a { font-weight:700; color:var(--ink); text-decoration:none; }