/*
Theme Name: InstantBanners
Theme URI: https://instantbanners.co.uk/
Author: Web Print & Signs Ltd
Description: Custom, fast, mobile-first WooCommerce theme for InstantBanners. Design system derived from the TWW stage site (see design/DESIGN-SYSTEM.md).
Version: 1.0.0
Requires PHP: 8.0
Text Domain: instantbanners
*/

:root {
  --paper: #faf9f7;
  --white: #ffffff;
  --tint: #f4f3f0;
  --ink: #0d0d0d;
  --ink-soft: #3d3a38;
  --muted: #6b6661;
  --line: #e8e5e0;
  --line-strong: #d6d2cb;
  --brand: #d1202f;
  --brand-dark: #a8141f;
  --brand-soft: #fdecee;
  --marker: #ffd400;
  --ok: #1e7b34;
  --wa: #25d366;
  --r-card: 14px;
  --r-ctl: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --shadow-md: 0 10px 30px -12px rgba(13, 13, 13, .18);
  --container: 1152px;
  --gutter: 24px;
  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --header-h: 72px;
}
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink-soft); font: 400 16px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--brand-dark); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: clamp(30px, 4vw, 36px); line-height: 1.11; }
h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.11; }
h3 { font-size: 20px; line-height: 1.3; }
h4 { font-size: 16px; }
strong, b { color: var(--ink); font-weight: 700; }
ul, ol { padding-left: 1.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-ctl); z-index: 200; }
.skip:focus { top: 8px; color: #fff; }
.mono, .price, .amount { font-family: var(--f-mono); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(760px + 2 * var(--gutter)); }
.section { padding: 72px 0; }
.section--tint { background: var(--tint); }
.section--white { background: var(--white); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 12px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--marker); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 20px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.link-arrow { font-weight: 700; color: var(--ink); white-space: nowrap; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--brand-dark); }

/* ---------------------------------------------------------------- buttons */
.btn, .button, button.button, a.button, input.button, .woocommerce #respond input#submit, .wc-block-components-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); font: 700 15px/1.2 var(--f-body); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); text-decoration: none;
}
.btn:hover, .button:hover { border-color: var(--ink); color: var(--ink); }
.btn--primary, .button.alt, .single_add_to_cart_button, .checkout-button, #place_order, .button.checkout {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn--primary:hover, .button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover, .button.checkout:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: #262626; color: #fff; border-color: #262626; }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }
button[disabled], .button.disabled, .button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- header (v2: utility bar, search-led main bar, grouped mega menu) */
.topbar { background: var(--ink); color: rgba(255, 255, 255, .86); font-size: 12.5px; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.topbar ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.topbar svg { width: 15px; height: 15px; flex-shrink: 0; }
.topbar__msg { gap: 22px; overflow: hidden; white-space: nowrap; min-width: 0; }
.topbar__msg li { display: inline-flex; align-items: center; gap: 7px; }
.topbar__msg svg { color: var(--marker); }
.topbar__links { gap: 2px; white-space: nowrap; }
.topbar__links li + li { border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 2px; }
.topbar__links a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; color: #fff; font-weight: 600; }
.topbar__links a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.topbar__links .mono { font-weight: 700; }
@media (max-width: 1100px) { .topbar__msg li:nth-child(3) { display: none; } }
@media (max-width: 900px) { .topbar__msg li:nth-child(n+2), .topbar__links .hide-md { display: none; } }
@media (max-width: 600px) { .topbar .topbar__msg { display: none; } .topbar .container { justify-content: center; } }

.site-header { position: relative; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); }
.site-header__row { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); flex-shrink: 0; }
.logo:hover { color: var(--ink); }
.logo__mark { width: auto; height: 42px; flex-shrink: 0; }
.logo__word { font: italic 800 23px/1 var(--f-display); letter-spacing: -.03em; }
.logo__word em { font-style: italic; color: var(--brand); }
.logo__tag { display: block; font: 600 10.5px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
form.search { flex: 1; max-width: 560px; position: relative; }
form.search input { width: 100%; height: 46px; border: 1.5px solid var(--line-strong); background: var(--paper); border-radius: 999px; padding: 0 100px 0 44px; font-size: 15px; transition: border-color .15s, background .15s; }
form.search input:focus { outline: none; border-color: var(--ink); background: #fff; }
form.search > svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search__go { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s var(--ease); }
.search__go:hover { background: var(--brand-dark); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hact { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 10px; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--ink); position: relative; }
.hact:hover { background: var(--tint); color: var(--ink); }
.hact svg { width: 22px; height: 22px; flex-shrink: 0; }
.hact__2 { display: flex; flex-direction: column; line-height: 1.15; }
.hact__2 small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.hact__2 > span { font-weight: 700; }
.hact__ico { position: relative; display: inline-flex; }
.hact__count { position: absolute; top: -7px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font: 700 11px/18px var(--f-mono); text-align: center; box-shadow: 0 0 0 2px var(--ink); }
.hact__count:empty, .hact__count[data-n="0"] { display: none; }
.hact--phone .num { font-family: var(--f-mono); font-weight: 700; }
.hact--cart { background: var(--ink); color: #fff; padding: 0 18px 0 14px; border-radius: 999px; margin-left: 4px; }
.hact--cart:hover { background: #2a2826; color: #fff; }
.hact--cart .hact__2 small { color: rgba(255, 255, 255, .72); }
.menu-toggle { display: none; background: none; border: 0; padding: 0 10px; height: 44px; cursor: pointer; color: var(--ink); }
.menu-toggle svg { width: 24px; height: 24px; }

/* main nav + mega menu (6 product groups; each mega = photo + intro, sub-categories by family, popular products with live prices) */
.mainnav { border-top: 1px solid var(--line); background: #fff; position: relative; }
.mainnav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: stretch; }
.mainnav__item { position: static; }
.mainnav__link { display: flex; align-items: center; gap: 5px; height: 46px; padding: 0 12px; font-weight: 700; font-size: 14.5px; color: var(--ink); border-bottom: 2px solid transparent; white-space: nowrap; }
.mainnav__link:hover, .mainnav__item.is-open > .mainnav__link, .mainnav__item:focus-within > .mainnav__link { color: var(--brand-dark); border-bottom-color: var(--brand); }
.mainnav__link svg { width: 12px; height: 12px; opacity: .6; }
.mainnav__item--plain .mainnav__link { font-weight: 600; color: var(--ink-soft); }
.mainnav__cta { margin-left: auto; align-self: center; }
.mainnav__foot { display: none; }
@media (min-width: 1025px) { .mainnav__list { gap: 0; } .mainnav__link { padding: 0 11px; } .mainnav__item:first-child .mainnav__link { padding-left: 0; } }
/* v3: 7 mega groups ("Shop by Trade" added) - keep the CTA on one line and the row inside the container */
.mainnav__cta .btn { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1500px) { .mainnav__link { padding: 0 9px; font-size: 14px; } }
/* v3 fix round 1: 7 megas + All products + Guides + quote all fit from 1025 px (they used to be hidden up to 1240) */
@media (min-width: 1025px) and (max-width: 1240px) {
  .mainnav__link { padding: 0 6px; font-size: 13.5px; gap: 3px; letter-spacing: -.005em; }
  .mainnav__link svg { width: 10px; height: 10px; }
  .mainnav__cta .btn { padding-left: 14px; padding-right: 14px; font-size: 13.5px; }
}
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); border-bottom: 3px solid var(--brand); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s .15s; }
.mainnav__item.is-open > .mega, .mainnav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__inner { display: grid; grid-template-columns: 210px minmax(0, 1fr) 270px; gap: 28px; padding: 22px var(--gutter) 26px; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; }
.mega__img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--tint); margin-bottom: 12px; }
.mega__img img { width: 100%; height: 100%; object-fit: cover; }
.mega__intro h3 { font-size: 20px; margin: 0 0 6px; }
.mega__intro p { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin: 0 0 8px; }
.mega__intro .mega__from { color: var(--ink-soft); font-size: 13px; }
.mega__from b { color: var(--brand-dark); }
.mega__fams { columns: 2; column-gap: 28px; }
.mega__fam { break-inside: avoid; margin-bottom: 14px; }
.mega__fams:not(.is-multi) .mega__fam { break-inside: auto; }
.mega__fams:not(.is-multi) .mega__famlink { column-span: all; }
.mega__famlink { display: flex; justify-content: space-between; gap: 10px; font: 700 12px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: 2px; }
.mega__fam ul { list-style: none; margin: 0; padding: 0; }
.mega__fam li { break-inside: avoid; }
.mega__fam li a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.mega__fam a span, .mega__famlink span { font: 500 11.5px/1.7 var(--f-mono); color: var(--muted); letter-spacing: 0; }
.mega__fam li a:hover, .mega__famlink:hover { color: var(--brand-dark); }
.mega__pop { border-left: 1px solid var(--line); padding-left: 24px; }
.mega__label { display: block; font: 700 12px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 2px solid var(--brand); margin-bottom: 6px; }
.mega__pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__pop a { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; color: var(--ink); }
.mega__pop a:hover { background: var(--tint); color: var(--ink); }
.mega__thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--tint); border: 1px solid var(--line); }
.mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mega__pname { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.mega__pname small { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }

/* trust strip: every item exactly 2 lines (bold label / short subline), equal columns, compact Google pill */
.trustbar { background: var(--tint); border-bottom: 1px solid var(--line); }
.trustbar__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 16px; padding-top: 9px; padding-bottom: 9px; }
.trustbar__item { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); }
.trustbar__item > span { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.trustbar__item strong { display: block; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.trustbar__item > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); }
.trustbar__item--g { justify-content: flex-end; }
.gcompact { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); line-height: 1.25; white-space: nowrap; }
.gcompact:hover { border-color: var(--ink); color: var(--ink); }
.gcompact__top { display: inline-flex; align-items: center; gap: 6px; }
.gcompact__top b { font: 800 14px/1 var(--f-display); }
.gcompact .gstars svg { width: 12px; height: 12px; }
.gcompact__sub { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 1279px) {
  .trustbar__row { display: flex; overflow-x: auto; scrollbar-width: none; gap: 28px; }
  .trustbar__row::-webkit-scrollbar { display: none; }
  .trustbar__item { flex: 0 0 auto; }
  .trustbar__item--g { justify-content: flex-start; }
}

/* Google rating badge (real snapshot from google-reviews.json, links to the Google profile) */
.gbadge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-size: 13px; line-height: 1.2; white-space: nowrap; }
.gbadge b { font: 800 17px/1 var(--f-display); color: inherit; }
.gbadge small { font-size: 11.5px; color: var(--muted); }
.gbadge:hover { border-color: var(--ink); color: var(--ink); }
.gstars { display: inline-flex; flex-shrink: 0; gap: 1px; color: #e8a200; }
.gstars svg { width: 14px; height: 14px; max-width: none; flex-shrink: 0; }
.gstars .off { opacity: .25; }
.gbadge--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: #fff; }
.gbadge--dark small { color: rgba(255, 255, 255, .75); }
.gbadge--dark:hover { color: #fff; border-color: #fff; }
.gbadge--dark .gstars { color: var(--marker); }

@media (max-width: 1024px) {
  .mainnav { position: fixed; inset: 0 0 0 auto; width: min(92vw, 400px); z-index: 90; border: 0; transform: translateX(100%); transition: transform .2s var(--ease); overflow-y: auto; box-shadow: var(--shadow-md); }
  body.nav-open .mainnav { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(13, 13, 13, .4); z-index: 80; }
  body.nav-open .site-header { z-index: 95; } /* drawer lives inside the header stacking context: lift it above the overlay */
  .mainnav .container { padding: 0; }
  .mainnav__list { flex-direction: column; padding: 8px 0 8px; }
  .mainnav__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink); }
  .mainnav__link { height: auto; padding: 14px 16px; border-bottom: 1px solid var(--line); justify-content: space-between; font-size: 16px; }
  .mainnav__link:hover { border-bottom-color: var(--line); }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; background: var(--paper); }
  .mainnav__item.is-open > .mega { display: block; }
  .mainnav__item:focus-within > .mega { display: none; }
  .mainnav__item.is-open:focus-within > .mega { display: block; }
  .mega__inner { grid-template-columns: 1fr; gap: 0; padding: 4px 16px 12px; }
  .mega__intro, .mega__pop { display: none; }
  .mega__fams { columns: 1; }
  .mega__famlink { padding-top: 12px; border-bottom-width: 1px; }
  .mega__fam li a { padding: 10px 0; font-size: 15px; }
  .mainnav__cta { margin: 16px; }
  .mainnav__foot { display: grid; gap: 2px; padding: 4px 16px 28px; border-top: 1px solid var(--line); }
  .mainnav__foot a { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-weight: 600; color: var(--ink); }
  .mainnav__foot svg { width: 20px; height: 20px; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .hact--phone .hact__2 { display: none; }

}
@media (min-width: 1025px) { .mainnav__head, .mainnav__close { display: none; } }
@media (max-width: 760px) {
  .site-header__row { flex-wrap: wrap; gap: 8px 10px; padding-block: 10px; min-height: 0; }
  form.search { order: 3; flex-basis: 100%; max-width: none; }
  .home .site-header form.search { display: none; }
  .hact--phone, .hact .lbl { display: none; }
  .hact { padding: 0 9px; height: 44px; }
  .hact--cart { padding: 0 14px; }
  .logo__word { font-size: 20px; }
  .logo__mark { width: auto; height: 34px; }
  .logo__tag { display: none; }
}
/* ---------------------------------------------------------------- breadcrumbs */
.crumbs { font-size: 14px; color: var(--ink-soft); padding: 24px 0 16px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--muted); }
.crumbs a:hover { color: var(--brand-dark); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

/* ---------------------------------------------------------------- cards */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.pcard { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); transition: border-color .15s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); height: 100%; color: var(--ink); }
.pcard:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); }
.pcard__img { aspect-ratio: 1 / 1; background: var(--tint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.03); }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.pcard__title { font: 700 14px/1.375 var(--f-body); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.pcard:hover .pcard__title { color: var(--brand-dark); }
.pcard__meta { font-size: 12.5px; color: var(--muted); }
.pcard__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pcard__price { font: 700 18px/1.2 var(--f-mono); color: var(--ink); }
.pcard__price .ib-from { font: 600 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.pcard__tag { font-size: 12px; font-weight: 600; color: var(--ok); }
.grid { display: grid; gap: 20px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .grid--2 { grid-template-columns: 1fr; } .pcard__body { padding: 12px; } .pcard__price { font-size: 16px; } }

/* placeholder art for products without photos: neutral, honest, no fake product shot */
.ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; background: linear-gradient(135deg, #f4f3f0, #ecebe7); color: var(--ink); }
.ph svg { width: 34%; max-width: 132px; height: auto; color: #57524d; stroke-width: 1.4; }
.ph__label { font: 700 13px/1.25 var(--f-display); letter-spacing: -.01em; max-width: 18ch; }

/* ---------------------------------------------------------------- home */
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 32px; }

/* Hero v2: dark print-shop canvas (TWW stage pattern: ink + radial glows + faint grid + photo), CMYK accents,
   rotating headline word, live popular-sizes card, moving strip of real product photos.
   Motion = transform/opacity only; everything static under prefers-reduced-motion. */
/* Print-world canvas (owner: vibrant, not grey): deep indigo -> violet -> magenta base, CMYK process glows
   (C #00AEEF, M #EC008C, Y #FFF200, K), masked halftone dots, registration marks and a colour-control bar.
   Every glow is kept away from, or dim enough behind, the white text (pixel-sampled >= 4.5:1). */
.hero--v2 { --c: #6fd8ff; --m: #ffb3e3; --y: #fff200; --r: #ffb1b9; position: relative; overflow: hidden; isolation: isolate; color: rgba(255, 255, 255, .86); padding: 34px 0 0;
  background: linear-gradient(118deg, #10093a 0%, #1f0c55 34%, #43106e 62%, #6d0c68 84%, #850a5a 100%); }
.hero--v2::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.45' stroke-width='1'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 0v24M0 12h24'/%3E%3C/svg%3E") left 18px top 16px / 22px 22px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.45' stroke-width='1'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 0v24M0 12h24'/%3E%3C/svg%3E") right 18px top 16px / 22px 22px no-repeat,
    linear-gradient(90deg, #00aeef 0 12.5%, #ec008c 12.5% 25%, #fff200 25% 37.5%, #111 37.5% 50%, #80d6f7 50% 62.5%, #f580c6 62.5% 75%, #fff880 75% 87.5%, #8c8c8c 87.5% 100%) right 52px top 22px / 136px 9px no-repeat,
    radial-gradient(42% 60% at 92% 0%, rgba(0, 174, 239, .55), transparent 68%),
    radial-gradient(34% 50% at 0% 100%, rgba(236, 0, 140, .42), transparent 66%),
    radial-gradient(26% 34% at 70% 100%, rgba(255, 242, 0, .20), transparent 64%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 32px 32px; }
.hero--v2::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 720px; height: 720px; right: -260px; top: -380px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 174, 239, .55), rgba(236, 0, 140, .45), rgba(255, 242, 0, .32), rgba(0, 174, 239, .55)); filter: blur(70px); opacity: .75; animation: ibspin 30s linear infinite; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; mix-blend-mode: luminosity; }
.hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(rgba(255, 255, 255, .16) 1.1px, transparent 1.7px) 0 0 / 11px 11px;
  -webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 88%); mask-image: linear-gradient(105deg, transparent 38%, #000 88%); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(16, 9, 58, .95) 0%, rgba(31, 12, 85, .9) 38%, rgba(67, 16, 110, .82) 66%, rgba(133, 10, 90, .78) 100%); }
.hero--v2 .hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 44px; align-items: start; }
.hero--v2 .hero__main b, .hero__side .husp b { color: #fff; }
.hero__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.eyebrow--live { color: var(--y); margin-bottom: 0; }
.eyebrow--live::before { display: none; }
.eyebrow--live i { width: 8px; height: 8px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 4px rgba(255, 242, 0, .2); animation: ibpulse 2s ease-in-out infinite; }
.hero--v2 h1 { font-size: clamp(30px, 3.6vw, 45px); line-height: 1.05; letter-spacing: -.03em; color: #fff; margin: 14px 0 14px; }
.rot { display: block; height: 1.14em; overflow: hidden; }
.rot__track { display: block; animation: ibrot 15s cubic-bezier(.7, 0, .25, 1) infinite; will-change: transform; }
.rot__w { display: block; height: 1.14em; line-height: 1.14em; white-space: nowrap; }
.rot__w--c { color: var(--c); } .rot__w--m { color: var(--m); } .rot__w--y { color: var(--y); } .rot__w--r { color: var(--r); }
.hero--v2 .lede { color: rgba(255, 255, 255, .8); font-size: 16.5px; line-height: 1.55; max-width: 56ch; margin: 0; }
.hsearch { position: relative; max-width: 620px; margin: 20px 0 12px; }
.hsearch input { width: 100%; height: 56px; border: 0; border-radius: 999px; padding: 0 124px 0 50px; font-size: 16px; background: #fff; color: var(--ink); box-shadow: 0 0 0 5px rgba(255, 255, 255, .12), 0 20px 40px -20px rgba(0, 0, 0, .6); }
.hsearch input::placeholder { color: var(--muted); }
.hsearch input:focus { outline: 3px solid var(--y); outline-offset: 2px; }
.hsearch > svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.hsearch .btn { position: absolute; right: 5px; top: 5px; bottom: 5px; min-height: 0; padding: 0 26px; }
/* fixed grid (not inline wrap) so a web-font swap can never reflow the chips (CLS) */
.hquick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 620px; }
.hquick__lbl { grid-column: 1 / -1; font: 700 11px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.hquick a { overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .05); font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.hquick a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.husp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.husp li { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-top: 3px solid var(--tone); font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .74); }
.husp b { display: block; font-size: 13px; line-height: 1.25; margin-bottom: 1px; }
.husp svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--tone); }
.husp--c { --tone: var(--c); } .husp--m { --tone: var(--m); } .husp--y { --tone: var(--y); } .husp--r { --tone: var(--r); }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.hero__call { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.hero__call:hover { color: #fff; }
.hero__call:hover b { text-decoration: underline; }
.hero__call svg { width: 20px; height: 20px; color: var(--y); }
.hero__call span { display: flex; flex-direction: column; line-height: 1.2; }
.hero__call small { font-size: 11.5px; color: rgba(255, 255, 255, .72); }
.hero__call b { font-size: 16px; }
@media (max-width: 399px) { .hero__trust .hero__call { flex-basis: 100%; } } /* speed agent: the call link wraps under the Google badge here once the web fonts load; wrapping from the start stops a 0.076 layout shift on phones */

.hprices { background: #fff; color: var(--ink); border-radius: 16px; padding: 16px 16px 12px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); position: relative; }
.hprices::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #00a3e0 0 25%, #e5007e 25% 50%, var(--marker) 50% 75%, var(--brand) 75%); }
.hprices__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 10px; border-bottom: 2px solid var(--ink); }
.hprices__head h2 { font-size: 19px; margin: 0; }
.hprices__head span { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ok); }
.hprices__head i { width: 7px; height: 7px; border-radius: 50%; background: #22a447; animation: ibpulse 2s ease-in-out infinite; }
.hprices ul { list-style: none; margin: 0; padding: 0; }
.hprices li a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 4px; border-bottom: 1px solid var(--line); color: var(--ink); transition: background .15s var(--ease); }
.hprices li a:hover { background: var(--paper); color: var(--ink); }
.hprices li a:hover .hprices__name { color: var(--brand-dark); }
.hprices__img { width: 44px; height: 44px; border-radius: 7px; overflow: hidden; background: var(--tint); border: 1px solid var(--line); }
.hprices__img img { width: 100%; height: 100%; object-fit: cover; }
.hprices__name { font-size: 14px; font-weight: 700; line-height: 1.25; }
.hprices__price { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.hprices__price small { font-size: 11.5px; color: var(--muted); }
.hprices__price b { font-size: 15.5px; }
.hprices__foot { margin: 10px 4px 0; font-size: 12.5px; color: var(--muted); }
.hprices__foot a { color: var(--brand-dark); font-weight: 700; }

/* moving strip of real product photos (seamless: two identical halves, translate -50%) */
.pmq { position: relative; margin-top: 22px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(8, 4, 30, .38); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.pmq__track { display: flex; width: max-content; animation: ibmarquee 80s linear infinite; }
.pmq:hover .pmq__track, .pmq:focus-within .pmq__track { animation-play-state: paused; }
.pmq__card { --tone: var(--brand); display: flex; align-items: center; gap: 10px; width: 244px; margin-right: 12px; padding: 6px 12px 6px 6px; background: #fff; border-radius: 12px; border-left: 4px solid var(--tone); color: var(--ink); flex-shrink: 0; transition: transform .2s var(--ease); }
.pmq__card:hover { transform: translateY(-2px); color: var(--ink); }
.pmq__card--c { --tone: #00a3e0; } .pmq__card--m { --tone: #e5007e; } .pmq__card--y { --tone: #f2c200; } .pmq__card--r { --tone: var(--brand); }
.pmq__img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--tint); flex-shrink: 0; }
.pmq__img img { width: 100%; height: 100%; object-fit: cover; }
.pmq__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pmq__name { font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmq__price { font-size: 12px; color: var(--muted); }

/* shop-by-product tiles: 12 families, real photos, live from-prices, CMYK ink bar */
.htiles-sec { padding: 28px 0 36px; background: #fff; border-bottom: 1px solid var(--line); }
.htiles__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 14px; }
.htiles__head h2 { font-size: 24px; margin: 0; }
.htiles__head .muted { font-size: 13.5px; }
.htiles__head .link-arrow { margin-left: auto; font-size: 14px; }
.htiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.htile { --tone: var(--brand); position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.htile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tone); z-index: 1; }
.htile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--tone); color: var(--ink); }
.htile--c { --tone: #00a3e0; } .htile--m { --tone: #e5007e; } .htile--y { --tone: #f2c200; } .htile--r { --tone: var(--brand); }
.htile__img { display: block; aspect-ratio: 4 / 3; background: var(--tint); overflow: hidden; }
.htile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.htile__img > svg { width: 40%; height: 100%; margin: 0 auto; color: var(--muted); }
.htile:hover .htile__img img { transform: scale(1.06); }
.htile__body { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px 10px; }
.htile__name { font: 700 14.5px/1.2 var(--f-display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htile__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); }
.htile__from b { font-size: 13.5px; }
.htile__n { font: 500 11px/1 var(--f-mono); }
.htile__n::after { content: " items"; }

@keyframes ibrot {
  0%, 13.5% { transform: translateY(0); }
  16.667%, 30.2% { transform: translateY(-14.2857%); }
  33.333%, 46.8% { transform: translateY(-28.5714%); }
  50%, 63.5% { transform: translateY(-42.8571%); }
  66.667%, 80.2% { transform: translateY(-57.1429%); }
  83.333%, 96.8% { transform: translateY(-71.4286%); }
  100% { transform: translateY(-85.7143%); }
}
@keyframes ibmarquee { to { transform: translateX(-50%); } }
@keyframes ibpulse { 50% { opacity: .35; } }
@keyframes ibspin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) { .htiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .husp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .hero--v2 { padding-top: 36px; }
  .hero--v2 .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero--v2::after { width: 420px; height: 420px; right: -220px; top: -260px; opacity: .45; }
  .hero--v2::before { background-size: 16px 16px, 16px 16px, 96px 6px, auto, auto, auto, 32px 32px, 32px 32px; background-position: left 8px top 8px, right 8px top 8px, right 32px top 13px, 0 0, 0 0, 0 0, 0 0, 0 0; }
  .pmq { margin-top: 24px; padding: 10px 0; }
}
@media (max-width: 760px) {
  .hero--v2 h1 { font-size: 31px; margin: 10px 0 10px; }
  .hero--v2 .lede { font-size: 15px; }
  .hsearch { margin: 16px 0 10px; }
  .hsearch input { height: 52px; padding: 0 104px 0 44px; font-size: 16px; }
  .hsearch > svg { left: 15px; }
  .hsearch .btn { padding: 0 18px; font-size: 14px; }
  .hquick { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .hquick__lbl { flex: 0 0 auto; margin-right: 2px; }
  .hquick a { flex: 0 0 auto; overflow: visible; }
  .hquick::-webkit-scrollbar { display: none; }
  .husp { gap: 6px; margin-top: 14px; }
  .husp li { padding: 8px; font-size: 11.5px; }
  .husp b { font-size: 12.5px; }
  .husp svg { width: 18px; height: 18px; }
  .hprices { padding: 14px 12px 10px; }
  .hprices__name { font-size: 13.5px; }
  .pmq__card { width: 214px; }
  .pmq__img { width: 48px; height: 48px; }
  .htiles-sec { padding: 20px 0 28px; }
  .htiles__head h2 { font-size: 20px; }
  .htiles__head .muted { display: none; }
  .htiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .htile__body { padding: 7px 8px 8px; gap: 2px; }
  .htile__name { font-size: 12.5px; white-space: normal; line-height: 1.2; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .htile__meta { flex-direction: column; align-items: flex-start; gap: 1px; font-size: 11px; }
  .htile__from b { font-size: 12.5px; }
  .htile__n { display: none; }
}
@media (max-width: 760px) {
  .hero--v2 { display: flex; flex-direction: column; }
  .hero--v2 > .hero__grid, .hero--v2 .hero__main, .hero--v2 .hero__side { display: contents; }
  .hero--v2 .hero__main > *, .hero--v2 .hero__side > * { margin-left: var(--gutter) !important; margin-right: var(--gutter) !important; }
  .hero--v2 .eyebrow--live { order: 1; } .hero--v2 h1 { order: 2; } .hero--v2 .hsearch { order: 3; margin-bottom: 0; }
  .hero--v2 .pmq { order: 4; margin: 14px 0 0; }
  .hero--v2 .lede { order: 5; margin-top: 18px; } .hero--v2 .hquick { order: 6; margin-top: 14px; } .hero--v2 .hero__trust { order: 7; }
  .hero--v2 .hprices { order: 8; margin-top: 20px; } .hero--v2 .husp { order: 9; margin: 12px 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .rot__track, .pmq__track, .eyebrow--live i, .hprices__head i, .hero--v2::after { animation: none !important; }
  .pmq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .htile, .htile__img img, .pmq__card { transition: none; }
  .htile:hover, .pmq__card:hover { transform: none; }
  .htile:hover .htile__img img { transform: none; }
}

.fam { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); color: var(--ink); transition: border-color .15s, transform .2s, box-shadow .2s; }
.fam:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); }
.fam__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; }
.fam__icon svg { width: 22px; height: 22px; }
.fam h3 { font-size: 17px; margin: 16px 0 4px; }
.fam p { font-size: 13px; color: var(--muted); margin: 0; }
.fam .count { font: 500 12px/1 var(--f-mono); color: var(--muted); }

.steps { counter-reset: s; }
.step { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); }
.step::before { counter-increment: s; content: "0" counter(s); display: block; font: 700 13px/1 var(--f-mono); color: var(--brand-dark); margin-bottom: 14px; }
.step h3 { font-size: 18px; }
.step p { font-size: 15px; margin: 0; }

.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.why > div { padding: 24px; border-right: 1px solid var(--line); }
.why > div:last-child { border-right: 0; }
.why b { display: block; font: 700 16px/1.3 var(--f-display); margin-bottom: 6px; }
.why span { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .why > div:nth-child(2) { border-right: 0; } .why > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 480px) { .why { grid-template-columns: 1fr; } .why > div { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------------------------------------------------------------- archive */
.archive-head { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; padding-bottom: 28px; }
.archive-head h1 { margin-bottom: 8px; }
.archive-head h1 small { font: 500 16px/1 var(--f-body); color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.archive-head .desc { max-width: 70ch; }
.help-card { padding: 20px; }
.help-card h2 { font-size: 17px; margin-bottom: 6px; font-family: var(--f-display); }
.help-card ul { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); display: grid; gap: 4px; }
.help-card li::before { content: "\2713"; color: var(--ok); font-weight: 700; margin-right: 6px; }
.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); background: #fff; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.chip small { font: 500 11px/1 var(--f-mono); color: var(--muted); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 14px; }
.toolbar .woocommerce-ordering { margin: 0; }
.toolbar select, .select { height: 42px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 0 36px 0 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230d0d0d'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; appearance: none; font-weight: 600; }
.archive-seo { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.woocommerce-pagination ul { list-style: none; display: flex; gap: 6px; justify-content: center; padding: 0; margin: 40px 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; font: 600 14px/1 var(--f-mono); color: var(--ink); }
.woocommerce-pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.woocommerce-pagination ul { flex-wrap: wrap; }
@media (max-width: 480px) {
  /* 390px: 9 page links + arrows overflowed by 9px (tester v2). Smaller buttons, wrapping allowed. */
  .woocommerce-pagination ul { gap: 4px; }
  .woocommerce-pagination a, .woocommerce-pagination span { min-width: 34px; height: 36px; padding: 0 6px; font-size: 13px; }
}
@media (max-width: 900px) { .archive-head { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- product page */
.pdp-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: start; padding-bottom: 56px; }
.gallery__main { position: relative; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__main .ph { border-radius: 0; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs button { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid var(--line); border-radius: var(--r-ctl); background: #fff; overflow: hidden; cursor: pointer; }
.gallery__thumbs button.is-on { border-color: var(--brand); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery__note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.pdp-buy { position: sticky; top: 24px; }
.admin-bar .pdp-buy { top: 56px; }
.pdp-family { font: 700 12px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-dark); display: inline-block; margin-bottom: 12px; }
.pdp-buy h1 { font-size: clamp(30px, 3.4vw, 38px); margin-bottom: 8px; }
.pdp-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.pdp-meta .sku { font-family: var(--f-mono); font-size: 13px; }
.iso-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); font: 600 12.5px/1.4 var(--f-mono); color: var(--ink); }
.pdp-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.pdp-short { font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
.pdp-short p:last-child { margin: 0; }
.buybox { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.buybox form.cart { margin: 0; }
.pdp-delivery { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px 0; font-size: 14px; color: var(--ink-soft); }
.pdp-delivery svg { width: 20px; height: 20px; color: var(--ok); flex-shrink: 0; margin-top: 1px; }
.pdp-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 16px 2px 0; padding: 0; list-style: none; font-size: 13.5px; }
.pdp-trust li { display: flex; gap: 8px; align-items: flex-start; }
.pdp-trust svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.pdp-help { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 960px) { .pdp-top { grid-template-columns: 1fr; gap: 24px; } .pdp-buy { position: static; } }

/* configurator (markup from mu-plugins/ib-pricing.php) */
.ib-cfg { display: grid; gap: 16px; }
.ib-row { margin: 0; }
.ib-lbl { display: block; font: 700 13px/1.3 var(--f-body); color: var(--ink); margin-bottom: 8px; letter-spacing: .01em; }
.ib-cfg select { width: 100%; height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 0 40px 0 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230d0d0d'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; appearance: none; font-size: 15px; font-weight: 500; color: var(--ink); }
.ib-cfg select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13, 13, 13, .08); }
.ib-cfg select.is-chipped { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.ib-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-opt { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; text-align: left; line-height: 1.3; }
.ib-opt:hover { border-color: var(--ink); }
.ib-opt[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand); }
.ib-fixedopt { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.ib-fixedopt .ib-lbl { margin: 0; }
.ib-dims .ib-dimgrid { display: grid; grid-template-columns: 1fr 1fr 96px; gap: 8px; }
.ib-dims label { font-size: 12px; font-weight: 600; color: var(--muted); display: grid; gap: 4px; }
.ib-dims input { height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 0 12px; font: 600 16px var(--f-mono); color: var(--ink); width: 100%; }
.ib-dims input:focus { outline: none; border-color: var(--ink); }
.ib-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.ib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-chips .ib-lbl { flex-basis: 100%; }
.ib-chip { min-height: 34px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 600 13px/1 var(--f-mono); cursor: pointer; }
.ib-chip:hover { border-color: var(--ink); }
.ib-svc { border: 0; padding: 0; margin: 0; min-width: 0; }
.ib-svcs { display: grid; gap: 8px; }
.ib-svcopt { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "r n p" "r d p"; column-gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.ib-svcopt input { grid-area: r; accent-color: var(--brand); width: 18px; height: 18px; margin: 0; }
.ib-svcname { grid-area: n; font-weight: 700; color: var(--ink); font-size: 14.5px; }
.ib-svcdays { grid-area: d; font-size: 12.5px; color: var(--muted); }
.ib-svcprice { grid-area: p; font: 700 15px/1 var(--f-mono); color: var(--ink); }
.ib-svcopt.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.ib-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 18px 0 2px; border-top: 1px solid var(--line); }
.ib-amt { font: 700 40px/1 var(--f-mono); color: var(--ink); letter-spacing: -.03em; }
.ib-amt .woocommerce-Price-currencySymbol { font-size: .7em; margin-right: 2px; }
.ib-note { font-size: 13px; color: var(--muted); }
.ib-incl { margin: 0; font-size: 13px; color: var(--ok); font-weight: 600; }
.ib-cfg.is-busy .ib-amt { opacity: .45; }
.buybox .quantity { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.buybox .quantity::before { content: "Number of items"; font: 700 13px/1.3 var(--f-body); color: var(--ink); }
.buybox .quantity input { width: 96px; height: 52px; border: 1px solid var(--line-strong); border-radius: 999px; text-align: center; font: 700 16px var(--f-mono); }
.buybox .single_add_to_cart_button { min-height: 52px; font-size: 16px; flex: 1; width: 100%; margin-top: 16px; }
.buybox .quantity.hidden, .buybox .quantity:has(input[type=hidden]) { display: none; }
.buybox form.cart:has(.quantity:not(.hidden)) { display: block; }

/* in-page nav */
.woo-reviews .woocommerce-Reviews-title, .woo-reviews #reply-title { font-size: 18px; }
.woo-reviews .woocommerce-Reviews-title { display: none; }
.pdp-nav { position: sticky; top: 0; z-index: 20; background: rgba(250, 249, 247, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.admin-bar .pdp-nav { top: 32px; }
.pdp-nav ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: calc(var(--container) + 2 * var(--gutter)); }
.pdp-nav a { display: block; padding: 14px 12px; font-size: 14px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; border-bottom: 2px solid transparent; }
.pdp-nav a:hover, .pdp-nav a.is-on { color: var(--ink); border-bottom-color: var(--brand); }
@media (max-width: 782px) { .admin-bar .pdp-nav { top: 0; } }

.pdp-sec { padding: 56px 0; border-bottom: 1px solid var(--line); }
.pdp-sec:last-of-type { border-bottom: 0; }
.pdp-sec__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
.pdp-sec__grid > header h2 { font-size: 26px; }
.pdp-sec__grid > header p { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .pdp-sec__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pdp-sec { padding: 40px 0; } }

.answer { position: relative; padding: 24px 24px 24px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); font-size: 17px; line-height: 1.65; color: var(--ink); }
.answer::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.answer p:last-child { margin: 0; }
.prose { max-width: 72ch; font-size: 16px; line-height: 1.7; }
.prose h2 { font-size: 24px; margin-top: 1.6em; }
.prose h3 { font-size: 19px; margin-top: 1.4em; }
.prose ul li { margin-bottom: .35em; }
.prose a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }

.specs { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; font-size: 15px; }
.specs th, .specs td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { width: 38%; font-weight: 600; color: var(--ink-soft); background: var(--paper); }
.specs td { color: var(--ink); }
.specs td.mono { font-family: var(--f-mono); font-size: 14px; }
.dist-guide { margin-top: 24px; }
.dist-guide h3 { font-size: 18px; }

.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 700; color: var(--ink); font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 22px/1 var(--f-mono); color: var(--muted); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--brand); }
.faq details > div { padding: 0 20px 18px; font-size: 15.5px; line-height: 1.65; }
.faq details > div p:last-child { margin: 0; }

/* trust panel */
.trustpanel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.trustpanel__body { padding: 28px; }
.trustpanel__body h3 { font-size: 22px; }
.trustpanel ul { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 12px; }
.trustpanel li { display: flex; gap: 12px; font-size: 15px; }
.trustpanel li svg { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.trustpanel figure { margin: 0; position: relative; min-height: 260px; }
.trustpanel figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trustpanel figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(255, 255, 255, .94); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--ink-soft); }
.trustpanel address { font-style: normal; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
@media (max-width: 900px) { .trustpanel { grid-template-columns: 1fr; } .trustpanel figure { min-height: 220px; order: -1; } }

/* reviews */
.stars { display: inline-flex; gap: 2px; color: #f5a623; }
.stars svg { width: 16px; height: 16px; }
.stars .off { color: #d9d5ce; }
.greviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.greviews__head h3 { margin: 0; font-size: 20px; }
.greviews__sum { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.greviews__sum b { font: 700 22px/1 var(--f-mono); }
.greviews__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.greview { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; display: flex; flex-direction: column; gap: 8px; }
.greview header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.greview .who { font-weight: 700; color: var(--ink); }
.greview time { font: 500 12px/1 var(--f-mono); color: var(--muted); }
.greview p { margin: 0; line-height: 1.6; }
.greview .src { margin-top: auto; font-size: 12px; color: var(--muted); }
.greviews__foot { margin-top: 14px; font-size: 13px; color: var(--muted); }
.greviews__foot a { color: var(--brand-dark); text-decoration: underline; }
@media (max-width: 900px) { .greviews__list { grid-template-columns: 1fr; } }
.woo-reviews { margin-bottom: 40px; }
.woo-reviews .commentlist { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.woo-reviews .commentlist li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.woo-reviews .avatar { display: none; }
.woo-reviews .star-rating { color: #f5a623; }
.woo-reviews .woocommerce-noreviews { padding: 18px 20px; background: #fff; border: 1px dashed var(--line-strong); border-radius: 12px; }
.woo-reviews .woocommerce-verification-required { font-size: 14px; color: var(--muted); }
.woo-reviews textarea, .form input[type=text], .form input[type=email], .form input[type=tel], .form textarea, .form select, .woocommerce form .input-text, .woocommerce-page form .input-text, .woocommerce form select {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 12px 14px; background: #fff; font-size: 15px; min-height: 46px;
}
.woo-reviews textarea:focus, .form input:focus, .form textarea:focus, .woocommerce form .input-text:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13, 13, 13, .08); }

/* Q&A */
.qa-list { display: grid; gap: 12px; margin-bottom: 24px; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.qa__q { font-weight: 700; color: var(--ink); display: flex; gap: 10px; }
.qa__a { margin-top: 10px; display: flex; gap: 10px; font-size: 15px; }
.qa__q::before, .qa__a::before { font: 700 13px/1.6 var(--f-mono); flex-shrink: 0; }
.qa__q::before { content: "Q"; color: var(--brand-dark); }
.qa__a::before { content: "A"; color: var(--ok); }
.qa__meta { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.qa-empty { padding: 18px 20px; background: #fff; border: 1px dashed var(--line-strong); border-radius: 12px; margin-bottom: 24px; }
.form { display: grid; gap: 14px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.form .hp { position: absolute; left: -9999px; }
.form .fine { font-size: 12.5px; color: var(--muted); margin: 0; }
.notice { padding: 14px 16px; border-radius: 10px; font-size: 14.5px; margin-bottom: 16px; }
.notice--ok { background: #eaf6ec; border: 1px solid #bfe3c6; color: #14532d; }
.notice--err { background: var(--brand-soft); border: 1px solid #f3c1c6; color: var(--brand-dark); }
@media (max-width: 640px) { .form .row2 { grid-template-columns: 1fr; } }

/* mobile sticky buy bar */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .2); transform: translateY(110%); transition: transform .2s var(--ease); }
.mbar.is-on { transform: none; }
.mbar__price { flex: 1; min-width: 0; }
.mbar__price b { display: block; font: 700 20px/1.1 var(--f-mono); color: var(--ink); }
.mbar__note { font-size: 12px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar .btn { min-height: 46px; padding: 10px 20px; }
@media (max-width: 960px) { .single-product .mbar { display: flex; } .single-product .wa-float { bottom: 84px; } }

/* ---------------------------------------------------------------- pages */
.page-hero { padding: 16px 0 36px; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -.03em; }
.page-body { padding-bottom: 72px; }
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: start; }
.contact-card { padding: 24px; }
.contact-card dl { margin: 0; display: grid; gap: 14px; }
.contact-card dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-card dd { margin: 2px 0 0; font-size: 16px; color: var(--ink); font-weight: 600; }
.contact-card dd.mono { font-family: var(--f-mono); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.faq-hub h2 { font-size: 24px; margin-top: 40px; }

/* ---------------------------------------------------------------- Woo cart / checkout / account (classic) */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 15px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.woocommerce-error { border-color: #f3c1c6; background: var(--brand-soft); color: var(--brand-dark); }
.woocommerce-message { border-color: #bfe3c6; background: #eaf6ec; }
.woocommerce-message .button, .woocommerce-info .button { min-height: 38px; padding: 8px 16px; font-size: 14px; order: 2; }
.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; font-size: 15px; }
.shop_table th, .shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.shop_table tr:last-child td, .shop_table tfoot tr:last-child th, .shop_table tfoot tr:last-child td { border-bottom: 0; }
.shop_table thead th { background: var(--paper); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.shop_table .product-name a { font-weight: 700; color: var(--ink); }
.shop_table .product-thumbnail img { width: 64px; border-radius: 8px; }
.shop_table .amount { font-weight: 700; color: var(--ink); }
.shop_table .variation, .wc-item-meta { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 0; list-style: none; }
.shop_table .variation dt, .wc-item-meta .wc-item-meta-label { font-weight: 600; }
.shop_table .variation dd, .shop_table .variation dd p, .wc-item-meta p { margin: 0; }
.wc-item-meta li { display: contents; }
.shop_table a.remove { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted) !important; font-size: 20px; }
.shop_table a.remove:hover { background: var(--brand-soft); color: var(--brand-dark) !important; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.cart-collaterals .cart_totals { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.cart_totals h2 { font-size: 20px; }
.cart_totals .shop_table { border: 0; }
.cart_totals .shop_table th, .cart_totals .shop_table td { padding: 10px 0; }
.wc-proceed-to-checkout .checkout-button { width: 100%; margin-top: 12px; }
.actions .coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.actions .coupon input { max-width: 200px; }
.actions button[name=update_cart] { display: none; }
td.actions { background: var(--paper); }
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .shop_table_responsive thead { display: none; }
  .shop_table_responsive tr { display: block; border-bottom: 1px solid var(--line); }
  .shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 8px 16px; text-align: right; }
  .shop_table_responsive td::before { content: attr(data-title); font-weight: 600; color: var(--muted); text-align: left; }
  .shop_table_responsive td.product-remove::before, .shop_table_responsive td.product-thumbnail::before, .shop_table_responsive td.actions::before { content: none; }
  .shop_table_responsive td.product-name { display: block; text-align: left; }
  .shop_table_responsive td.product-name::before { display: none; }
  /* basket line with a fixed quantity (hidden input only): no empty 'Quantity' row, qty is in the item details */
  .shop_table_responsive td.product-quantity:not(:has(input:not([type=hidden]))) { display: none; }
}
/* checkout: left 7/12 = express pay + billing/shipping; right 5/12 = sticky order + payment + Place order.
   Every direct child goes in column 1 (Stripe injects the express element, attribution inputs and the
   separator as siblings), the review card is pinned to column 2 across all rows. */
form.checkout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; row-gap: 0; align-items: start; }
form.checkout > * { grid-column: 1; min-width: 0; }
form.checkout > .checkout-review { grid-column: 2; grid-row: 1 / span 30; }
form.checkout > .woocommerce-NoticeGroup { grid-column: 1; margin-bottom: 16px; }
form.checkout > #wc-stripe-express-checkout-element { margin: 0 0 4px; }
form.checkout > #wc-stripe-express-checkout-element:not(:has(iframe)) { display: none !important; }
form.checkout:not(:has(#wc-stripe-express-checkout-element iframe)) > #wc-stripe-express-checkout-button-separator { display: none !important; }
form.checkout > #wc-stripe-express-checkout-button-separator { margin: 12px 0 16px !important; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.checkout-review .shop_table { table-layout: fixed; }
.checkout-review .shop_table .variation { grid-template-columns: 110px minmax(0, 1fr); width: 100%; }
.checkout-review .shop_table th.product-total, .checkout-review .shop_table td.product-total { width: 96px; text-align: right; white-space: nowrap; }
/* totals rows: label left, value right on one line (not squeezed into the 96px price column) */
.checkout-review .shop_table tfoot { display: table-caption; caption-side: bottom; }
.checkout-review .shop_table tfoot tr { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); }
.checkout-review .shop_table tfoot tr:last-child { border-bottom: 0; }
.checkout-review .shop_table tfoot th, .checkout-review .shop_table tfoot td { border-bottom: 0; width: auto; }
.checkout-review .shop_table tfoot th { flex-shrink: 0; }
.checkout-review .shop_table tfoot td { text-align: right; }
#payment .payment_box fieldset { border: 0; padding: 0; margin: 0; min-width: 0; position: relative; overflow-x: clip; } /* Stripe's hidden style-probe input must not widen the page */
#customer_details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
#customer_details .col-1, #customer_details .col-2 { width: 100%; float: none; }
#order_review_heading { display: none; }
.checkout-review { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; position: sticky; top: 100px; }
.checkout-review h3 { font-size: 20px; }
.checkout-review .shop_table { border: 0; }
.checkout-review .shop_table th, .checkout-review .shop_table td { padding: 10px 0; }
.woocommerce form .form-row { margin: 0 0 14px; padding: 0; }
.woocommerce form .form-row label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--brand-dark); text-decoration: none; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 7px); float: left; }
.woocommerce form .form-row-last { float: right; }
.woocommerce form .form-row-wide, .woocommerce form .clear { clear: both; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3, .woocommerce-shipping-fields h3 { font-size: 20px; }
#payment { margin-top: 16px; }
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
#payment ul.payment_methods > li { border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
#payment .payment_box { margin-top: 10px; font-size: 14px; }
#payment .place-order { margin: 0; }
#place_order { width: 100%; min-height: 54px; font-size: 16px; }
.woocommerce-terms-and-conditions-wrapper { font-size: 13.5px; margin-bottom: 14px; }
.select2-container .select2-selection--single { height: 46px !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r-ctl) !important; }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px !important; padding-left: 14px !important; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 44px !important; }
@media (max-width: 1023px) { form.checkout { grid-template-columns: minmax(0, 1fr); } form.checkout > .checkout-review { grid-column: 1; grid-row: auto; margin-top: 24px; position: static; } }
@media (max-width: 960px) { form.checkout { grid-template-columns: 1fr; } .checkout-review { position: static; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; } }
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: 8px; font-weight: 600; color: var(--ink); }
.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.woocommerce-account:not(.logged-in) .woocommerce { display: block; max-width: 520px; }
@media (max-width: 760px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; } }
.woocommerce-order-details, .woocommerce-customer-details { margin-top: 24px; }
.woocommerce-order-overview { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.woocommerce-order-overview li { font-size: 13px; color: var(--muted); }
.woocommerce-order-overview strong { display: block; font-size: 15px; }
.star-rating { display: none; }
.woo-reviews .star-rating, .pdp-rating .star-rating { display: inline-block; position: relative; width: 5.4em; height: 1.1em; font-size: 14px; overflow: hidden; line-height: 1; }
.star-rating::before { content: "\2605\2605\2605\2605\2605"; color: #d9d5ce; position: absolute; letter-spacing: .08em; }
.star-rating span { position: absolute; top: 0; left: 0; overflow: hidden; padding-top: 1.5em; }
.star-rating span::before { content: "\2605\2605\2605\2605\2605"; position: absolute; top: 0; left: 0; color: #f5a623; letter-spacing: .08em; }
p.stars a { font-size: 0; display: inline-block; width: 1.4em; height: 1.4em; position: relative; }
p.stars a::before { content: "\2606"; font-size: 24px; position: absolute; color: #f5a623; }
p.stars:hover a::before, p.stars.selected a::before { content: "\2605"; }
p.stars a:hover ~ a::before, p.stars.selected a.active ~ a::before { content: "\2606"; }

/* ---------------------------------------------------------------- footer (v2: trust strip, 6 balanced product columns, help/company/sizes/contact, pay marks, legal bar) */
.site-footer { margin-top: 96px; background: var(--ink); color: rgba(255, 255, 255, .78); font-size: 13.5px; }
.home .site-footer, .single-product .site-footer { margin-top: 0; }
.site-footer a { color: rgba(255, 255, 255, .86); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.ftrust { background: #fff; color: var(--ink); border-top: 1px solid var(--line); }
.ftrust__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ftrust__item { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-left: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ftrust__item:first-child { border-left: 0; padding-left: 0; }
.ftrust__item b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 1px; }
.ftrust__item > svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--brand); }
.site-footer .gbadge--light { color: var(--ink); }
.site-footer .gbadge--light:hover { color: var(--ink); text-decoration: none; }
.ftrust__item--g .gbadge { flex-wrap: wrap; white-space: normal; gap: 3px 8px; padding: 8px 14px; border-radius: 12px; }
.ftrust__item--g .gbadge > span:last-child { flex-basis: 100%; }
.fmain { padding: 40px 0 0; }
.fprod { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
/* v3: 7 product groups (Shop by Trade added) -> 7 equal columns, never a lone wrapped column (fix round 1) */
.fprod { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px; }
.fprod .fcol li a { font-size: 13px; }
.fprod .fcol__t { letter-spacing: .08em; }
.fcol { min-width: 0; }
.fcol__h { margin: 0 0 10px; font-size: inherit; }
.fcol__t { display: block; padding-bottom: 8px; border-bottom: 2px solid var(--tone, var(--brand)); font: 700 12px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcol__btn { display: none; }
.fprod .fcol:nth-child(4n+1) { --tone: #38c6f4; } .fprod .fcol:nth-child(4n+2) { --tone: #ff5fb0; } .fprod .fcol:nth-child(4n+3) { --tone: var(--marker); } .fprod .fcol:nth-child(4n+4) { --tone: #ff6b76; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.fcol li a { display: block; padding: 3px 0; font-size: 13.5px; line-height: 1.3; }
.fcol__all a { color: #fff; font-weight: 700; margin-top: 3px; }
.fcol__all a::after { content: " \2192"; }
.finfo { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr 1.25fr; gap: 24px; padding: 32px 0 34px; }
.finfo .fcol__t { border-color: rgba(255, 255, 255, .3); }
.fcontact .logo { color: #fff; }
.fcontact .logo__word em { color: #ff6b76; }
.fcontact .logo__tag { color: rgba(255, 255, 255, .62); }
.fcontact > p { margin: 12px 0 12px; font-size: 13px; line-height: 1.5; }
.fcontact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fcontact__list li { display: flex; align-items: center; gap: 9px; }
.fcontact__list svg { width: 16px; height: 16px; flex-shrink: 0; color: rgba(255, 255, 255, .6); }
.fcontact__list .mono { font: 700 18px/1.2 var(--f-mono); color: #fff; }
.fcontact address { font-style: normal; line-height: 1.4; }
.fcontact__co { margin: 12px 0 0; font-size: 12px; color: rgba(255, 255, 255, .62); }
.fpay__h { margin-bottom: 12px; }
.fpay__marks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pm { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 52px; padding: 0 9px; border-radius: 5px; background: #fff; font: 800 12px/1 var(--f-body); color: var(--ink); }
.pm--visa { color: #1a1f71; font-style: italic; font-size: 14px; letter-spacing: .02em; }
.pm--mc { padding-left: 36px; font-size: 10.5px; font-weight: 700; color: #231f20; }
.pm--mc i { position: absolute; left: 7px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: #eb001b; }
.pm--mc i + i { left: 16px; background: #f79e1b; mix-blend-mode: multiply; }
.pm--amex { background: #2e77bc; color: #fff; font-size: 11.5px; letter-spacing: .04em; }
.fpay__note { display: flex; gap: 8px; margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .74); }
.fpay__note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.flegal { background: #000; color: rgba(255, 255, 255, .64); font-size: 12px; }
.flegal__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-top: 14px; padding-bottom: 84px; } /* room for the fixed WhatsApp button at the end of the page */
@media (max-width: 960px) { .single-product .flegal__row { padding-bottom: 160px; } } /* float sits above the sticky buy bar there */
.flegal p { margin: 0; max-width: 860px; line-height: 1.5; }
.flegal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.flegal .linklike { background: none; border: 0; padding: 0; font: inherit; color: rgba(255, 255, 255, .86); cursor: pointer; }
.flegal .linklike:hover { color: #fff; text-decoration: underline; }
@media (max-width: 1024px) {
  .fprod { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .finfo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fcontact { grid-column: 1 / -1; }
  .ftrust__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftrust__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .ftrust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .site-footer { margin-top: 64px; }
  .ftrust__item { padding: 12px 10px; gap: 10px; font-size: 11.5px; }
  .ftrust__item:nth-child(odd) { padding-left: 0; }
  .ftrust__item b { font-size: 13px; }
  .ftrust__item > svg { width: 22px; height: 22px; }
  .ftrust__item--g .gbadge { flex-wrap: wrap; white-space: normal; gap: 4px 6px; padding: 6px 10px; border-radius: 12px; }
  .ftrust__item--g .gbadge small { display: none; }
  .fmain { padding-top: 8px; }
  .fprod { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; border-bottom: 0; }
  .finfo { grid-template-columns: 1fr; gap: 0; padding: 0 0 24px; }
  .fcontact { order: -1; padding: 20px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .fcol { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ibjs .fcol__h { margin: 0; }
  .ibjs .fcol .fcol__t { display: none; }
  .ibjs .fcol__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 0; background: none; border: 0; color: #fff; font: 700 13px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .ibjs .fcol__btn svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
  .ibjs .fcol.is-open .fcol__btn svg { transform: rotate(180deg); }
  .ibjs .fcol ul { display: none; }
  .ibjs .fcol.is-open ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding-bottom: 14px; }
  .fcol li a { padding: 7px 0; font-size: 14px; }
  .fpay { padding-top: 20px; }
  .flegal__row { padding-bottom: 84px; }
}

/* ---------------------------------------------------------------- WhatsApp + cookie */
.wa-float { position: fixed; left: 16px; bottom: 16px; z-index: 75; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--wa); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); transition: transform .15s var(--ease), bottom .2s var(--ease); }
.wa-float:hover { color: #fff; transform: translateY(-2px); }
.wa-float svg { width: 26px; height: 26px; }
@media (max-width: 640px) { .wa-float { width: 52px; padding: 0; justify-content: center; } .wa-float .lbl { display: none; } }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .2); padding: 16px 0; font-size: 14.5px; }
.cookie[hidden] { display: none; }
.cookie .container { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.cookie p { margin: 0; max-width: 75ch; }
.cookie a { color: var(--brand-dark); font-weight: 700; text-decoration: underline; }
.cookie__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie__btns .btn { min-height: 44px; }

/* 404 */
.nf { text-align: center; padding: 80px 0 40px; }
.nf .mono { font-size: 64px; font-weight: 700; color: var(--ink); }

.pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 16px; }
.pdp-price__amt { font: 700 26px/1.1 var(--f-mono); color: var(--ink); letter-spacing: -.02em; }
.pdp-price__amt .ib-from { font: 600 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.pdp-price small { font-size: 13px; color: var(--ok); font-weight: 600; }
@media (max-width: 960px) { .gallery__main:has(.ph) { aspect-ratio: 16 / 10; } }
#shipping_method { list-style: none; margin: 0; padding: 0; }
#shipping_method li { margin: 0; }
.woocommerce-checkout-review-order-table .product-name { font-weight: 700; color: var(--ink); }
.pdp-price__amt { display: inline-flex; align-items: baseline; gap: 2px; }
@media (max-width: 900px) { .archive-head .help-card { display: none; } }
@media (max-width: 760px) { .pcard__tag { display: none; } }

/* ---------------------------------------------------------------- family hubs, guides, home FAQ (integrator pass) */
.hub-types { margin: 8px 0 8px; }
.hub-types__h { font-size: 22px; margin: 0 0 16px; }
.hub-type { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); color: var(--ink); transition: border-color .15s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); height: 100%; }
.hub-type:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); }
.hub-type__img { aspect-ratio: 4 / 3; background: var(--tint); display: block; overflow: hidden; }
.hub-type__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-type__body { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 14px 16px; }
.hub-type__body b { font: 700 15px/1.3 var(--f-body); letter-spacing: -.01em; }
.hub-type:hover .hub-type__body b { color: var(--brand-dark); }
.hub-type__body small { font: 500 12px/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
.guide-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; color: var(--ink); transition: border-color .15s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.guide-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); }
.guide-card h3 { font-size: 19px; margin: 0; }
.guide-card p { font-size: 14.5px; color: var(--muted); margin: 0 0 8px; }
.guide-card .link-arrow { margin-top: auto; font-size: 14px; }
.home-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.home-faq header p { color: var(--muted); }
@media (max-width: 900px) { .home-faq { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 760px) { .guide-cards { grid-template-columns: 1fr; } .hub-type__body { flex-direction: column; gap: 4px; padding: 12px; } }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 15px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--tint); font-weight: 700; }
.prose tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) { .prose table { display: block; overflow-x: auto; } .prose th, .prose td { min-width: 120px; } }

/* ---------------------------------------------------------------- sizes, custom size, prices by size, maker panel
   (owner feedback round 2026-09-27: sizes smallest first, one label style, custom width x height, typographic
   "who makes it" panel with no photo) */
.ib-opt > span { display: block; }
.ib-opt small { display: block; margin-top: 3px; font: 500 11.5px/1.25 var(--f-body); color: var(--muted); letter-spacing: 0; }
.ib-opt[aria-pressed="true"] small { color: var(--brand-dark); }
.ib-opts--size { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.ib-opts--size .ib-opt { font-size: 13.5px; padding: 9px 12px; }
.ib-opt--custom, .ib-chip--custom { border-style: dashed; }
.ib-chips { display: block; }
.ib-opts .ib-chip { min-height: 40px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: #fff; font: 600 13.5px/1.3 var(--f-body); }
.ib-opts .ib-chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand); }
.ib-custom { margin-top: 10px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.ib-custom .ib-dimgrid, .ib-dims .ib-dimgrid { display: grid; grid-template-columns: 1fr 1fr 92px; gap: 8px; }
.ib-custom label, .ib-dims label { font-size: 12px; font-weight: 600; color: var(--muted); display: grid; gap: 4px; }
.ib-custom input { height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 0 12px; font: 600 16px var(--f-mono); color: var(--ink); width: 100%; background: #fff; }
.ib-custom input:focus { outline: none; border-color: var(--ink); }
.ib-cfg .ib-dimgrid select { padding: 0 28px 0 10px; background-position: right 8px center; }
.ib-conv { font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

.sizeprices { overflow-x: auto; }
.sizeprices__t th small { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--f-body); color: var(--muted); }
.sizeprices__t thead th { background: var(--tint); font-size: 13px; font-weight: 700; color: var(--ink); width: auto; }
.sizeprices__t tbody th { width: auto; min-width: 180px; }
/* one tone per row, not a shaded size column next to a white price column (critic: rows looked broken in half) */
.sizeprices__t tbody th { background: transparent; }
.sizeprices__t tbody tr:nth-child(even) th, .sizeprices__t tbody tr:nth-child(even) td { background: var(--paper); }
.sizeprices__t td { white-space: nowrap; }
.sizeprices__pick { padding: 0; border: 0; border-bottom: 1px dashed var(--line-strong); background: none; font: 700 15px/1.3 var(--f-mono); color: var(--ink); cursor: pointer; }
.sizeprices__pick:hover, .sizeprices__pick:focus-visible { color: var(--brand-dark); border-bottom-color: var(--brand); }
.sizeprices > p { margin: 12px 0 0; }

.maker { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: start; }
.maker h2 { font-size: clamp(26px, 2.8vw, 34px); max-width: 20ch; }
.maker__lede { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 58ch; margin: 0; }
.maker__steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.maker__steps li { padding: 20px 24px 0 0; }
.maker__steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.maker__steps b { display: block; font: 700 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--brand-dark); margin-bottom: 12px; }
.maker__steps strong { display: block; font: 700 17px/1.3 var(--f-display); letter-spacing: -.01em; margin-bottom: 6px; }
.maker__steps span { display: block; font-size: 14px; line-height: 1.55; color: var(--muted); }
.maker__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow-sm); }
.maker__name { font: 800 22px/1.15 var(--f-display); letter-spacing: -.02em; color: var(--ink); margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.maker__card dl { margin: 0 0 22px; display: grid; gap: 16px; }
.maker__card dt { font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.maker__card dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.maker__card dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.maker__card dd a:hover { color: var(--brand-dark); text-decoration-color: var(--brand); }
@media (max-width: 900px) {
  .maker { grid-template-columns: 1fr; gap: 28px; }
  .maker__steps { grid-template-columns: 1fr; }
  .maker__steps li, .maker__steps li + li { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
.sizeprices.is-single .sizeprices__t { max-width: 620px; }

/* Home family cards with a real product photo (images agent, owner feedback: no drawings) */
.fam--photo { padding: 0; overflow: hidden; justify-content: flex-start; }
.fam--photo .fam__img { display: block; aspect-ratio: 4 / 3; background: var(--tint); overflow: hidden; }
.fam--photo .fam__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); }
.fam--photo:hover .fam__img img { transform: scale(1.03); }
.fam--photo > div { padding: 14px 18px 4px; }
.fam--photo > div h3 { margin-top: 0; }
.fam--photo .count { padding: 8px 18px 16px; }
/* Hub "Shop by type" tiles: square like the product cards, so product photos and sign shots are not cropped */
.hub-type__img { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------- search results (mu-plugins/ib-search.php + woocommerce/search-product.php) */
.srch { padding-bottom: 24px; }
.srch-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 16px 40px; align-items: end; padding: 8px 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.srch-head h1 { margin: 8px 0 6px; font-size: clamp(26px, 3vw, 34px); overflow-wrap: anywhere; }
.srch-head .muted { margin: 0; }
.srch-q { color: var(--brand-dark); }
.srch-form { position: relative; }
.srch-form input { width: 100%; height: 54px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; padding: 0 118px 0 46px; font-size: 16px; }
.srch-form input:focus { outline: none; border-color: var(--ink); }
.srch-form > svg { position: absolute; left: 17px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.srch-form .btn { position: absolute; right: 5px; top: 5px; bottom: 5px; min-height: 0; padding: 0 22px; }
.srch-cats { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.srch-cats__lbl { font: 700 11.5px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.srch-cats .subcats { margin-bottom: 16px; }
.srch-none { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); }
.srch-none h2 { font-size: 24px; overflow-wrap: anywhere; }
.srch-none h3 { font-size: 17px; }
.srch-tips { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.srch-tips a { color: var(--brand-dark); font-weight: 700; }
@media (max-width: 900px) { .srch-head { grid-template-columns: 1fr; align-items: start; } .srch-none { grid-template-columns: 1fr; padding: 20px; } }
@media (max-width: 760px) { .srch-form input { height: 50px; padding-right: 100px; } .srch-form .btn { padding: 0 16px; } }
/* product card footer: price and tag wrap instead of clipping */
.pcard__foot { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.pcard__tag { white-space: nowrap; }
.pcard__title { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- get a quote (page-get-a-quote.php + assets/js/quote.js) */
.qhero { background: linear-gradient(118deg, #10093a 0%, #2a0c5c 55%, #6d0c68 100%); color: rgba(255, 255, 255, .86); padding: 8px 0 28px; }
.qhero .crumbs, .qhero .crumbs a, .qhero .crumbs [aria-current], .qhero .crumbs li + li::before { color: rgba(255, 255, 255, .82); }
.qhero .crumbs a:hover { color: #fff; }
.qhero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.qhero h1 { color: #fff; font-size: clamp(30px, 4vw, 44px); margin: 8px 0 8px; }
.qhero__lede { max-width: 60ch; margin: 0 0 14px; font-size: 16.5px; }
.qhero__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qhero__chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 600; color: #fff; }
.qhero__chips svg { width: 16px; height: 16px; color: #fff200; }
.qwrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; padding-top: 28px; padding-bottom: 24px; }
.qform { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow-sm); }
.qsteps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.qsteps li { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 4px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); }
.qsteps li b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink); font: 700 12px/1 var(--f-mono); }
.qsteps li.is-on { border-top-color: var(--brand); color: var(--ink); cursor: pointer; }
.qsteps li.is-on b { background: var(--brand); color: #fff; }
.qsteps li.is-cur { cursor: default; }
.qstep { border: 0; margin: 0; padding: 0; min-width: 0; }
.qform.is-js .qstep { display: none; }
.qform.is-js .qstep.is-on { display: block; }
.qform:not(.is-js) .qstep + .qstep { margin-top: 28px; }
.qform:not(.is-js) .qnav [data-next], .qform:not(.is-js) .qnav [data-prev] { display: none; }
.qstep legend { display: block; width: 100%; font: 700 22px/1.2 var(--f-display); color: var(--ink); margin-bottom: 14px; padding: 0; }
.qstep__n { display: block; font: 700 11.5px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 4px; }
.qtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.qtile { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.qtile input { position: absolute; opacity: 0; pointer-events: none; }
.qtile__img { aspect-ratio: 4 / 3; background: var(--tint); display: grid; place-items: center; overflow: hidden; }
.qtile__img img { width: 100%; height: 100%; object-fit: cover; }
.qtile__img svg { width: 34px; height: 34px; color: var(--muted); }
.qtile__name { padding: 8px 10px; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.qtile:hover { border-color: var(--ink); }
.qtile:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.qtile:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.qrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qf { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--ink); min-width: 0; }
.qf[hidden] { display: none; }
.qf small { font-weight: 500; color: var(--muted); }
.qf input, .qf select, .qf textarea { width: 100%; min-height: 46px; border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); background: #fff; padding: 10px 12px; font: 400 15px/1.4 var(--f-body); color: var(--ink); }
.qf textarea { resize: vertical; }
.qf input:focus, .qf select:focus, .qf textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13, 13, 13, .08); }
.qf [aria-invalid="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.qcustom { display: grid; grid-template-columns: 1fr auto 1fr 110px; gap: 10px; align-items: end; }
.qcustom[hidden] { display: none; }
.qx { padding-bottom: 26px; font-size: 18px; color: var(--muted); }
.qerr { margin: -4px 0 12px; font-size: 13.5px; font-weight: 600; color: var(--brand-dark); }
.qradios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.qradio { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 13px; color: var(--muted); line-height: 1.35; }
.qradio b { display: block; color: var(--ink); font-size: 14px; }
.qradio input { margin-top: 3px; accent-color: var(--brand); }
.qradio:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.qupload[hidden] { display: none; }
.qdrop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--paper); text-align: center; cursor: pointer; }
.qdrop:hover { border-color: var(--ink); }
.qdrop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.qdrop span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.qdrop svg { width: 22px; height: 22px; color: var(--brand); }
.qdrop small { font-size: 12.5px; color: var(--muted); max-width: 52ch; }
.qdrop small a { position: relative; z-index: 1; color: var(--brand-dark); font-weight: 700; }
.qfiles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font: 500 13px/1.4 var(--f-mono); color: var(--ink-soft); }
.qcontact { border: 0; padding: 0; }
.qcontact legend { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; padding: 0; }
.qcontact label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-weight: 600; min-height: 32px; }
.qcontact input { accent-color: var(--brand); width: 18px; height: 18px; }
.qnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.qdone { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 32px; box-shadow: var(--shadow-sm); }
.qdone__tick { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e7f5ea; color: var(--ok); margin-bottom: 8px; }
.qdone__tick svg { width: 28px; height: 28px; }
.qdone a:not(.btn) { color: var(--brand-dark); font-weight: 700; }
.qside { position: sticky; top: 16px; }
.qcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; box-shadow: var(--shadow-sm); }
.qcard h2 { font-size: 20px; margin: 0 0 10px; }
.qcard h3 { font-size: 15px; margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.qcard__row { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--ink); }
.qcard__row svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); }
.qcard__row span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.qcard__row small { font-size: 12px; color: var(--muted); }
.qcard__row b { font-size: 15px; overflow-wrap: anywhere; }
.qnext { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 13.5px; }
.qnext b { display: block; color: var(--ink); }
.qnext span { color: var(--muted); }
.qcard details { border-bottom: 1px solid var(--line); }
.qcard summary { padding: 9px 0; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.qcard details p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 960px) { .qwrap { grid-template-columns: 1fr; } .qside { position: static; } }
@media (max-width: 640px) {
  .qform { padding: 16px; }
  .qrow { grid-template-columns: 1fr; gap: 0; }
  .qradios { grid-template-columns: 1fr; }
  .qcustom { grid-template-columns: 1fr auto 1fr; } .qf--unit { grid-column: 1 / -1; }
  .qtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qsteps li span { display: none; }
  .qnav .btn { flex: 1; }
}
.qform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qform .fine { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.qform .fine a { color: var(--brand-dark); font-weight: 700; }

/* ---------------------------------------------------------------- category pages: intro head, rich copy below the grid (catalogue/category-copy.json) */
.archive-head--solo { grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; }
.archive-head--solo .desc { max-width: 78ch; font-size: 16.5px; line-height: 1.6; }
.archive-head--solo .desc p { margin: 0; }
.catcopy { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.catcopy__body > h2:first-child { margin-top: 0; }
.catcopy__body a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.catcopy__body table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 14.5px; line-height: 1.45; }
.catcopy__body th, .catcopy__body td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.catcopy__body thead th { background: var(--tint); font-size: 13px; font-weight: 700; color: var(--ink); }
.cat-sizes { margin: 12px 0 18px; }
.cat-sizes table { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.cat-sizes caption { caption-side: top; text-align: left; font: 700 12px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 0 8px; }
.cat-sizes tbody th a { color: var(--ink); text-decoration: none; font-weight: 600; }
.cat-sizes tbody th a:hover { color: var(--brand-dark); text-decoration: underline; }
.cat-sizes td { width: 1%; white-space: nowrap; font-weight: 700; color: var(--ink); text-align: right; }
.cat-sizes tbody tr:nth-child(even) th, .cat-sizes tbody tr:nth-child(even) td { background: var(--paper); }
.cat-sizes__note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.catcopy__side { position: sticky; top: 16px; }
.catcopy__side .help-card h2 { font-size: 20px; margin: 0 0 8px; }
.catcopy__side .help-card p { font-size: 14px; color: var(--ink-soft); }
.help-card__tel { margin: 12px 0 0; }
.help-card__tel a { color: var(--ink); font-weight: 700; }
@media (max-width: 960px) { .catcopy { grid-template-columns: minmax(0, 1fr); gap: 28px; } .catcopy__side { position: static; } }
@media (max-width: 640px) { .catcopy__body table { display: block; overflow-x: auto; } .cat-sizes table { display: table; } .catcopy { margin-top: 40px; padding-top: 28px; } }

/* ---------------------------------------------------------------- help centre (help-page.php) */
.help { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; padding: 8px 0 24px; }
.help__side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.help__nav { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 12px; }
.help__nav summary { display: none; }
.help__group { margin: 10px 8px 6px; font: 700 11.5px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.help__group:first-of-type { margin-top: 0; }
.help__nav ul { list-style: none; margin: 0 0 6px; padding: 0; }
.help__nav li a { display: block; padding: 6px 8px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.help__nav li a:hover { background: var(--tint); color: var(--ink); }
.help__nav li a.is-on { background: var(--brand-soft); color: var(--brand-dark); box-shadow: inset 3px 0 0 var(--brand); }
.help__toc li a { font-weight: 500; font-size: 13.5px; color: var(--ink-soft); }
.help__contact { padding: 16px; }
.help__contact h2 { font-size: 17px; margin: 0 0 6px; }
.help__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--ink); }
.help__row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand); }
.help__row span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.help__row small { font-size: 12px; color: var(--muted); }
.help__row b { font-size: 14px; overflow-wrap: anywhere; }
.help__contact .btn { margin-top: 10px; }
.help__head { padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); max-width: 72ch; }
.help__head h1 { margin: 0 0 8px; }
.help__summary { font-size: 18px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px; }
.help__date { margin: 0; font-size: 13px; color: var(--muted); }
.help__body { max-width: 70ch; }
.help__body h2 { position: relative; scroll-margin-top: 24px; }
.help__body h3 { scroll-margin-top: 24px; }
.hanchor { margin-left: 6px; font-weight: 500; color: var(--line-strong); text-decoration: none; opacity: 0; transition: opacity .15s var(--ease); }
.help__body h2:hover .hanchor, .hanchor:focus { opacity: 1; color: var(--brand); }
.help__body table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 14.5px; line-height: 1.45; background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.help__body th, .help__body td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.help__body thead th { background: var(--tint); font-size: 13px; font-weight: 700; color: var(--ink); }
.help__body tbody tr:nth-child(even) td { background: var(--paper); }
.help__body a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.help__body .btn { text-decoration: none; }
.callout { position: relative; margin: 18px 0; padding: 14px 16px 14px 18px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--brand); background: #fff; font-size: 15px; }
.callout--tip { border-left-color: var(--ok); background: #f1f8f2; }
.callout--info { border-left-color: #00a3e0; background: #eef8fd; }
.dsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; max-width: none; }
.dsum__cell { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 12px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.dsum__cell b { font: 800 24px/1.1 var(--f-display); color: var(--ink); }
.dsum__cell--ok { border-top-color: var(--ok); }
.dsum__cell--ok b { color: var(--ok); }
.checklist { margin: 8px 0 24px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 12px; }
.checklist h2 { margin-top: 0 !important; }
.checklist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 5px; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat; }
.help .contact-grid { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .dsum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .help { display: flex; flex-direction: column; gap: 20px; }
  .help__side { display: contents; }
  .help__nav { order: 1; padding: 0; }
  .help__nav summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
  .help__nav summary::-webkit-details-marker { display: none; }
  .help__nav summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s var(--ease); }
  .help__nav[open] summary::after { transform: rotate(-135deg); }
  .help__nav[open] { padding-bottom: 10px; }
  .help__nav ul, .help__group { margin-left: 12px; margin-right: 12px; }
  .help__main { order: 2; }
  .help__contact { order: 3; }
}
@media (max-width: 640px) { .dsum { grid-template-columns: 1fr 1fr; } .help__body table { display: block; overflow-x: auto; } .dsum__cell b { font-size: 20px; } }
@media (min-width: 901px) { .help__side { max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; } }

/* ---------------------------------------------------------------- v3 fix round 2 */
/* Header basket: badge sits on the icon's top-right corner and the label moves clear of it when a count shows. */
.hact--cart .hact__count { top: -9px; right: -9px; }
.hact--cart:has(.hact__count:not(:empty)) .hact__2 { padding-left: 6px; }
/* Checkout "Your order": below 1100px the line meta also uses the price column's width (price sits on the name
   line only) and a narrower label column, so values such as the turnaround wrap to 2 lines at most. */
@media (max-width: 1100px) {
  .checkout-review .shop_table td.product-name .variation { grid-template-columns: 88px minmax(0, 1fr); width: calc(100% + 96px); margin-right: -96px; position: relative; }
}
@media (max-width: 760px) { .checkout-review { padding: 16px; } }
/* Footer 761-1024: 7 product columns in a 4-column grid -> the 7th spans the empty slot (links in 2 columns);
   info row: contact block full width, then Help / Company / Popular sizes / We accept in one row of 4. */
@media (min-width: 761px) and (max-width: 1024px) {
  .fprod .fcol:nth-child(7):last-child { grid-column: span 2; }
  .fprod .fcol:nth-child(7):last-child ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .finfo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* v4 ops: fifth delivery cell (Quoted, after the Highlands +£10 cell) runs full width instead of sitting alone */
.dsum > .dsum__cell:nth-child(5):last-child { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- v4 fix round 1 */
/* Checkout "Your order": a long fee label (artwork fee + product name) wraps instead of pushing the amount out. */
.checkout-review .shop_table tfoot tr.fee th { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.checkout-review .shop_table tfoot tr.fee td { flex: 0 0 auto; white-space: nowrap; }
/* Basket totals on phones: one label per row (the td::before), the delivery options stacked under their label. */
@media (max-width: 900px) {
  .cart_totals .shop_table_responsive tr th { display: none; }
  .cart_totals .shop_table_responsive td { padding: 10px 0; gap: 16px; align-items: baseline; }
  .cart_totals .shop_table_responsive tr.shipping td, .cart_totals .shop_table_responsive tr.woocommerce-shipping-totals td { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; text-align: right; }
  .cart_totals .shop_table_responsive tr.shipping td::before, .cart_totals .shop_table_responsive tr.woocommerce-shipping-totals td::before { grid-row: 1 / span 6; }
  .cart_totals .shop_table_responsive tr.shipping td > *, .cart_totals .shop_table_responsive tr.woocommerce-shipping-totals td > * { grid-column: 2; margin: 0; }
  .cart_totals .woocommerce-shipping-methods { list-style: none; padding: 0; }
  .cart_totals .woocommerce-shipping-destination { font-size: 13px; color: var(--muted); }
  .cart_totals .shop_table_responsive tr.ib-freeship td { display: block; text-align: left; font-size: 14px; color: var(--ink-soft); }
  .cart_totals .shop_table_responsive tr.ib-freeship td::before { content: none; }
}
/* Stationery (8th product group): nav stays on one line (Guides link lives in the footer + mobile drawer on desktop). Footer grid: mu-plugins/ib-layout-fixes.php. */
@media (min-width: 1025px) { .mainnav__list > .mainnav__item--plain:nth-last-child(2) { display: none; } }
@media (min-width: 1025px) and (max-width: 1500px) { .mainnav__link { padding: 0 8px; font-size: 13.5px; } }
@media (min-width: 1025px) and (max-width: 1240px) { .mainnav__link { padding: 0 5px; font-size: 12.5px; gap: 2px; } .mainnav__cta .btn { padding-left: 12px; padding-right: 12px; } }