/*
 * Build-only additions on top of design.css : self-hosted fonts, accessibility, real form controls,
 * the no-image placeholder, list resets for semantic markup and drawer visibility.
 * Nothing here changes the signed-off look at 1440, 1024 or 390.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- accessibility ---------- */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; margin: 0; left: 12px; top: 12px; z-index: 100000; background: var(--gold); color: var(--ink); padding: 12px 18px; font-weight: 600; text-decoration: none; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cl .cb input:focus-visible + .box { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- WordPress admin bar (logged-in only) ---------- */
body.admin-bar .nav-wrap { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav-wrap { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .nav-wrap { top: 0; } }

/* ---------- header ---------- */
.nav-main { display: flex; align-items: center; height: 100%; min-width: 0; }
.nav-wrap.search-open .nav-main { display: none; }
.nav-menu > li:focus-within > a { color: var(--gold); }
.nav-menu > li:focus-within > a::after { transform: scaleX(1); }
.nav-menu > li:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu > li.is-dismissed .mega { opacity: 0 !important; visibility: hidden !important; }
/* Mega menu re-open guard (see theme.js) : just after a menu click, hover alone must not open a mega menu. Keyboard focus still does. */
.nav-wrap.mega-suppressed .nav-menu > li:hover:not(:focus-within) .mega { opacity: 0 !important; visibility: hidden !important; }
.nav-menu > li.is-dismissed > a::after { transform: scaleX(0); }
.nav-menu ul { margin: 0; padding: 0; }

/* ---------- support + footer (inline styles in the design, classes here) ---------- */
.support .gold { color: var(--gold); font-weight: 400; }
.support .mail-link { font-size: 26px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.footer-news-text { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ivory-70); line-height: 1.6; margin-bottom: 16px; }
.footer-news { display: flex; gap: 0; border: 1px solid var(--line-gold); }
.footer-news input { flex: 1; min-width: 0; background: transparent; border: none; padding: 12px 14px; color: var(--ivory); font-family: 'Inter', sans-serif; font-size: 13px; outline: none; }
.footer-news button { background: var(--gold); border: none; padding: 0 22px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); cursor: not-allowed; }
.footer-socials { margin-top: 22px; }
.footer-legal { color: var(--ivory-70); text-decoration: none; }
/* phone : the 37-character email must stay on one line (Quinton caught "…co.u / k" at 390) */
@media (max-width: 640px) { .support .mail-link { font-size: 16px; letter-spacing: 0; overflow-wrap: normal; white-space: nowrap; } }
@media (max-width: 360px) { .support .mail-link { font-size: 14px; } }

/* ---------- homepage : range tabs work without JavaScript ----------
 * home.css hides every inactive pane outright, which is right once the tabs can switch them but
 * wrong before that : with no JavaScript only "By Profile" would render and the ten height and
 * colour tiles, all of them real links, would be unreachable. So panes start visible and home.js
 * adds .tabs-ready to #range only once it has wired the tabs up. The tab strip itself is hidden
 * until then, because three buttons that do nothing are worse than no buttons.
 */
.sec-range .pane { display: block; }
.sec-range .tabs { display: none; }
.sec-range.tabs-ready .tabs { display: flex; }
.sec-range.tabs-ready .pane { display: none; }
.sec-range.tabs-ready .pane.active { display: block; }

/* ---------- category : semantic lists keep the design grid ---------- */
.cl ul.grid, .cl ul.swrow { list-style: none; margin: 0; padding: 0; }
.cl .grid > .grid-item { display: flex; min-width: 0; }
.cl .grid > .grid-item > .card { flex: 1; min-width: 0; }
.cl .card .card-title { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); line-height: 1.2; }
.cl .card.sm .card-title { font-size: 17px; }
/* real prices run to four figures (£2,848.49) : keep "From £x" and "View Product" on one line each */
.cl .card .pr .from, .cl .card .pr .view { white-space: nowrap; }
.cl .card .pr .from { min-width: 0; }
.cl .grid.is-loading { opacity: 0.45; transition: opacity 0.2s; }
.cl .notices:empty { display: none; }
.cl .pg.gap { border-color: transparent; }
.cl .sortl label { cursor: pointer; }
.cl .sortl .nojs-sort { height: 44px; padding: 0 14px; border: 1px solid var(--ink); background: var(--warm-white); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.page-plain { padding-block: 48px; }

/* the filter form must not become a layout box : the drawer's flex column targets its children */
.cl .side > form { display: contents; }

/* ---------- no-image placeholder (5 and 6 column have no photograph at all) ---------- */
.cl .k7 .pic.ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #f7f2e8 0%, #ece3d0 100%); color: var(--gold-muted); }
.cl .k7 .pic.ph .ph-draw { width: 72%; height: auto; }

/* ---------- filter controls ---------- */
.cl .grp.is-soon .cb { opacity: 0.5; cursor: not-allowed; }
.cl .more-list[hidden] { display: none; }
.cl .more-toggle { background: none; border: 0; padding: 8px 0 0; font-size: 11px; color: var(--gold-muted); text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0.04em; cursor: pointer; }
.cl .nojs-apply { padding: 18px 0 0; }
.cl .nojs-apply .btn { width: 100%; }

/* dual range : two native range inputs laid over the design's track ; thumbs match the design knobs */
.cl .range .track { position: relative; }
.cl .range input[type=range] { position: absolute; left: -7px; top: 50%; width: calc(100% + 14px); height: 18px; margin: 0; transform: translateY(-50%); background: none; -webkit-appearance: none; appearance: none; pointer-events: none; outline: none; z-index: 2; }
.cl .range input[type=range]::-webkit-slider-runnable-track { height: 18px; background: none; border: 0; }
.cl .range input[type=range]::-moz-range-track { height: 18px; background: none; border: 0; }
.cl .range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: var(--warm-white); border: 1.5px solid var(--ink); pointer-events: auto; cursor: pointer; }
.cl .range input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; background: var(--warm-white); border: 1.5px solid var(--ink); pointer-events: auto; cursor: pointer; }
.cl .range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.5); }
.cl .range input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.5); }

/* ---------- trust band with fewer than four confirmed claims ---------- */
.cl .trust[data-count="1"] .container, .cl .trust[data-count="2"] .container, .cl .trust[data-count="3"] .container { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.cl .trust[data-count="1"] .t { justify-content: center; padding-left: 0; border: 0; }
@media (max-width: 1024px) { .cl .trust[data-count="3"] .container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cl .trust[data-count] .container { grid-template-columns: minmax(0, 1fr); } }

/* ---------- SEO block without the FAQ column ---------- */
.cl .seo.no-faq .cols { grid-template-columns: minmax(0, 820px); }

/* ---------- empty result ---------- */
.cl .empty { padding: 56px 24px; text-align: center; border: 1px solid var(--line-gold); background: var(--ivory); }
.cl .empty p { color: var(--grey); margin: 10px 0 22px; }

/* ---------- drawers : closed drawers are hidden, not just off-canvas (JS also sets inert) ---------- */
/* The header drawer follows the hamburger (1280px, Cast Iron's switch point) ; the filter drawer stays at 1024px. */
@media (max-width: 1280px) {
  .hdrawer { visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s; }
  body.menu-open .hdrawer { visibility: visible; transition: transform 0.3s ease, visibility 0s linear 0s; }
}
@media (max-width: 1024px) {
  .cl .side { visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s; }
  body.filter-open .cl .side { visibility: visible; transition: transform 0.3s ease, visibility 0s linear 0s; }
}

/* ---------- secondary pages : build-only additions ----------
 * Three classes the mockups never had, because the mockups never had to admit to anything.
 *  .draft-banner : the journal index warning that every article is a placeholder
 *  .draft-note   : the same warning inside an article body, written into the post content itself so
 *                  a template change cannot lose it, and so it disappears when real copy replaces it
 *  .prose        : the generic page.php body, for any page whose content comes from the editor
 * Deliberately loud. A draft that looks published is the failure being guarded against.
 */
.draft-banner,
.body720 .draft-note {
  display: block;
  background: #fdf3e3;
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  color: var(--ink-deep);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  padding: 14px 18px;
  margin: 0 0 28px;
}
.draft-banner strong,
.body720 .draft-note strong { color: var(--ink); font-weight: 700; }

.cl.app .catchip { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 4px 9px; margin-bottom: 10px; }

.pg .prose { max-width: 820px; }
.pg .prose p { margin-bottom: 18px; }
.pg .prose h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--ink); margin: 32px 0 12px; }
.pg .prose ul, .pg .prose ol { margin: 0 0 18px 20px; }
.pg .prose li { margin-bottom: 8px; }

/* The FAQ answers are visible until pages.js proves the toggle works, so a no-JS visitor still
   reads every answer. The accordion shape is .faq-grp > .acc > .item. See assets/js/pages.js. */
.pg .acc .item .a[hidden] { display: none; }

/* The terms page ends with a company details block. The mockup had no such block : it ended with a
   "Draft for design" notice instead, which is not something to ship. So this one is build-only. */
.pg .legal .company { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line-gold); }
.pg .legal .company .k { display: block; margin-bottom: 12px; }
.pg .legal .company p { font-size: 14px; line-height: 1.9; color: var(--ink-deep); }

/* ---------- 390 breakpoints the mockups never had ----------
 * The commerce and app-family mockups contain NO media query at all. Both CSS ports flagged that at
 * the time and it was recorded as an open QA item ; it then came true in four places at 390. These
 * are build-only additions, not ports : there is no mockup to diff them against.
 */

/* FAQ : the "Still Have A Question?" 669px email link is fixed in pages.css, not here.
 * It was written here first and never applied : pages.css loads AFTER theme.css (it declares
 * theme.css as its enqueue dependency) and the specificity is identical, so the later file wins.
 * Left as a note so nobody re-adds it here and wonders why nothing changes.
 */

/* 404 and journal : card grids keep desktop column widths at 390, pushing the right edge to 597px
   and 564px. Collapse to one column. */
@media (max-width: 640px) {
  .cl.app .popc .ctiles { grid-template-columns: 1fr; }
  .cl.app .feat .posts { grid-template-columns: 1fr; }
}

/* Delivery and returns : a 399px lead-time table in a 390 viewport. A table cannot be reflowed
   honestly, so it gets its own scroll container rather than being squashed. */
@media (max-width: 640px) {
  .pg .deliv-sec + .sec .lt,
  .pg table.lt { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Colour chart. HISTORY, because my first reading of this was wrong and the wrong version was
   briefly the comment here : I recorded .cc as a two-column grid whose FIRST column was crushed to
   0px. It is not. The template has exactly ONE child, and the second column was simply never filled
   by anything, so at 1440 a 320px rail sat permanently empty. .cc is now single-column at every
   width, set in app.css, so only the width reset below is still needed here.
   Worth keeping the real lesson : this was the opposite of overflow. Nothing was too wide,
   something was too narrow, which is exactly why a too-wide check could never see it. */
@media (max-width: 1024px) {
  /* `.cl.app .cc { display: block; }` used to live here and is now REDUNDANT : app.css makes .cc
     single-column at every width, since the 320px rail it declared was never filled by anything.
     Removed rather than left as a dead override. The width reset below still earns its place. */
  .cl.app .cc > div { width: auto; }
}
@media (max-width: 640px) {
  .cl.app .cc .swrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile drawer : a large void below the three accordions. Anchor the contact block to the bottom
   so the panel reads as finished rather than truncated. */
@media (max-width: 1280px) {
  .hdrawer { display: flex; flex-direction: column; }
  .hdrawer .hd-acc { flex: 1 1 auto; }
  .hdrawer .hd-foot { margin-top: auto; }
}

/* Accessory categories (16 Sep 2026) : no filter sidebar, as Cast Iron, so the grid takes the full width. */
.cl .layout.nofilter { grid-template-columns: minmax(0, 1fr); }
.cl .layout.nofilter .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl .card.fam .body { display: flex; flex-direction: column; gap: 10px; }
.cl .card.fam .pr { margin-top: auto; }
@media (max-width: 1024px) { .cl .layout.nofilter .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cl .layout.nofilter .grid.three { grid-template-columns: minmax(0, 1fr); } }

/* Mega menu with two cards (Valves and Accessories : no wall stays on Column). */
.mega-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Complete The Look with two tiles. */
.pl .acc6 .row3.row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .pl .acc6 .row3.row2 { grid-template-columns: minmax(0, 1fr); } }

/* Colours band spacing : the list reset above (.cl ul.swrow { margin: 0 }) outranks design.css's .cl .swrow margin,
   so the swatch labels sat directly on "See All 200 Colours" (measured at 390 : 0px, 16 Sep 2026). The design's values back. */
.cl .colours ul.swrow { margin: 18px 0 20px; }
@media (max-width: 1024px) { .cl .colours ul.swrow { margin: 16px 0 18px; } }