/* ==========================================================================
   JBM Online — design system
   Ported from the approved homepage prototype. The tokens, spacing, type
   scale and responsive rules are unchanged; only the photo rules differ,
   because real <img> assets replaced the prototype's SVG crop windows.
   ========================================================================== */

:root {
  --ink:#171b19; --muted:#69706c; --yellow:#f6bf14; --yellow-hover:#e5ad03;
  --paper:#f7f6f2; --line:#e7e9e5; --white:#fff; --radius:9px;
  --container:1360px; --font:Arial,Helvetica,sans-serif;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:24px}
body {margin:0;color:var(--ink);background:var(--white);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea {font:inherit}
button,a,input,select,textarea {-webkit-tap-highlight-color:transparent}
button {cursor:pointer;color:inherit}
a {color:inherit;text-decoration:none}
img,svg {display:block;max-width:100%}
h1,h2,h3,h4,p {margin:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {outline:3px solid #927200;outline-offset:4px}
[hidden] {display:none!important}
.container {width:min(92%,var(--container));margin-inline:auto}
.icon {width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.svg-defs {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link {position:fixed;top:12px;left:12px;z-index:100;background:var(--yellow);padding:12px 18px;transform:translateY(-150%)}
.skip-link:focus {transform:translateY(0)}

.button {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:49px;padding:12px 25px;border:1px solid transparent;border-radius:5px;font-weight:700;font-size:15px;line-height:1.4;transition:background .18s,transform .18s;text-align:center}
.button:hover {transform:translateY(-1px)}
.button-primary {background:var(--yellow);color:#171b19}
.button-primary:hover {background:var(--yellow-hover)}
.button-outline {background:transparent;border-color:#838783}
.button-outline:hover {background:#eeefea}
.button-dark {background:var(--ink);color:#fff}
.button-dark:hover {background:#2a302c}
.button[disabled] {opacity:.55;cursor:not-allowed;transform:none}
.text-link {display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.text-link .icon {width:20px;height:20px}
.eyebrow {font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}

/* Photos are now external image files. */
.photo {display:block;width:100%;height:100%;object-fit:cover;background:#e7e0d4}
.photo-contain {object-fit:contain;background:#fff}
.photo-missing {display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,#efece4,#efece4 10px,#e7e3d9 10px,#e7e3d9 20px)}

/* --- Header ------------------------------------------------------------- */
.utility-bar {background:var(--ink);color:#fff;font-size:12px;padding:9px 0}
.utility-bar .container {display:flex;justify-content:space-between;gap:20px}
.header-main {display:flex;align-items:center;gap:45px;padding-block:25px}
.brand {display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;flex-shrink:0}
.brand-word {font-family:Arial Black,Arial,Helvetica,sans-serif;font-size:51px;font-weight:900;font-style:italic;letter-spacing:-4px;transform:skew(-4deg);padding-right:5px}
.brand-sub {display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.29em;margin-top:1px;margin-left:3px}
.brand-sub::before {content:"";width:38px;height:8px;background:var(--yellow)}
.search {display:flex;align-items:center;flex:1;min-width:0;border:1px solid #daddd8;border-radius:6px;overflow:hidden;height:48px}
.search input {width:100%;min-width:0;border:0;background:transparent;padding:12px 17px;outline-offset:-4px;font-size:14px}
.search button {height:48px;width:51px;border:0;background:var(--yellow);display:grid;place-items:center;flex-shrink:0}
.header-actions {display:flex;gap:25px;align-items:center}
.header-action {display:flex;align-items:center;gap:8px;border:0;background:none;padding:8px 0;font-size:13px;font-weight:600;position:relative}
.badge {min-width:18px;height:18px;display:grid;place-items:center;font-size:10px;font-weight:700;border-radius:50%;background:var(--yellow);position:absolute;right:-9px;top:-2px}
.navigation {border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nav-inner {display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:55px}
.nav-links {display:flex;align-items:center;gap:32px}
.nav-links a {display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;padding-block:15px;white-space:nowrap}
.nav-links a:hover,.footer a:hover {color:#a47600}
.nav-links a[aria-current="page"] {text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:7px}
/* The marketplace entry is the one deliberately prominent link (approved design):
   capitals and a yellow bar, whether or not it is the current page. */
.nav-links a.nav-marketplace {font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:inset 0 -4px 0 var(--yellow)}
.nav-links a.nav-marketplace[aria-current="page"] {text-decoration:none}
.location-link {display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700;white-space:nowrap}
.mobile-menu {display:none;background:none;border:0;padding:6px}

/* --- Flash messages ----------------------------------------------------- */
.flash-stack {padding-top:18px}
.flash {display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-left:4px solid var(--yellow);background:var(--paper);border-radius:6px;padding:14px 18px;font-size:14px;margin-bottom:10px}
.flash-error {border-left-color:#b3261e;background:#fdf3f2}
.flash-info {border-left-color:#4a6fa5;background:#f2f6fc}

/* --- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs {padding-block:16px 4px;font-size:13px;color:var(--muted)}
.breadcrumbs ol {display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.breadcrumbs li {display:flex;align-items:center;gap:8px}
.breadcrumbs li+li::before {content:"/";color:#b6bcb6}
.breadcrumbs a:hover {color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.breadcrumbs [aria-current="page"] {color:var(--ink);font-weight:700}

/* --- Page headers ------------------------------------------------------- */
.page-head {padding-block:10px 26px}
.page-head h1 {font-size:clamp(32px,3.6vw,46px);line-height:1.08;letter-spacing:-.04em;font-weight:800;margin-bottom:12px}
.page-head p {max-width:660px;color:#4c5450;font-size:15px;line-height:1.6}
.page-head-banner {display:grid;grid-template-columns:1fr 330px;gap:32px;align-items:center;background:var(--paper);border-radius:var(--radius);padding:30px 34px;margin-bottom:26px}
.page-head-banner h1 {margin-bottom:10px}
.page-head-banner .banner-photo {height:190px;border-radius:7px;overflow:hidden}

/* Subcategory chips */
.subcategory-row {display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip {display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;padding:9px 17px;font-size:13px;font-weight:700;background:#fff;transition:background .18s,border-color .18s}
.chip:hover {background:var(--paper);border-color:#c9cec7}
.chip[aria-current="page"] {background:var(--ink);color:#fff;border-color:var(--ink)}
.chip .count {font-weight:400;color:var(--muted)}
.chip[aria-current="page"] .count {color:#b9bfba}

/* --- Catalogue layout --------------------------------------------------- */
.catalogue {display:grid;grid-template-columns:262px minmax(0,1fr);gap:34px;align-items:start;padding-bottom:50px}
.filters {position:sticky;top:18px;border:1px solid var(--line);border-radius:var(--radius);padding:4px 20px 18px}
.filters h2 {font-size:16px;letter-spacing:-.01em;padding-top:18px}
.filter-group {border-top:1px solid var(--line);padding:14px 0 4px}
.filter-group:first-of-type {border-top:0}
.filter-group summary {display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:14px;font-weight:700;list-style:none;padding:4px 0}
.filter-group summary::-webkit-details-marker {display:none}
.filter-group summary::after {content:"";width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.filter-group[open] summary::after {transform:rotate(-135deg);margin-top:2px}
.filter-option {display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px}
.filter-option input {width:17px;height:17px;accent-color:#171b19;flex-shrink:0}
.filter-option .count {margin-left:auto;color:var(--muted);font-size:12px}
.price-inputs {display:flex;align-items:center;gap:8px;padding:6px 0 10px}
.price-inputs input {width:100%;min-width:0;border:1px solid #daddd8;border-radius:5px;padding:9px 10px;font-size:13px}
.filters .button {width:100%;margin-top:14px}
.filters-reset {display:block;text-align:center;font-size:13px;margin-top:10px;text-decoration:underline;text-underline-offset:3px}

.catalogue-toolbar {display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.result-count {font-size:14px;color:#4c5450}
.result-count strong {color:var(--ink)}
.sort-control {display:flex;align-items:center;gap:9px;font-size:14px}
.sort-control select {border:1px solid #daddd8;border-radius:5px;padding:9px 12px;min-height:42px;background:#fff}
.active-filters {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.active-filter {display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:7px 9px 7px 14px;font-size:12.5px;font-weight:700}
.active-filter .icon {width:15px;height:15px;stroke-width:2.4}
.filter-toggle {display:none}

/* --- Product cards ------------------------------------------------------ */
.product-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.product-grid.grid-4 {grid-template-columns:repeat(4,minmax(0,1fr))}
.product-card {background:var(--white);border:1px solid #eeeee9;border-radius:var(--radius);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.product-card:hover {border-color:#dcdfd7;box-shadow:0 6px 22px #1d24201a}
.product-image {height:215px;position:relative;display:flex;align-items:center;justify-content:center;padding:22px 17px 10px;background:#fff}
.product-image .photo {max-height:180px;object-fit:contain;background:#fff}
.product-flags {position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:1}
.flag {display:inline-block;padding:5px 10px;border-radius:4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#fff}
.flag-clearance {background:var(--yellow);color:var(--ink)}
.flag-demo {background:#fff;color:#7a6400;border:1px solid var(--yellow)}
.product-info {padding:10px 18px 18px;display:flex;flex-direction:column;flex:1}
.product-info h3 {font-size:15px;line-height:1.4;font-weight:700;margin-bottom:6px}
.product-card a.product-title:hover {text-decoration:underline;text-underline-offset:3px}
.product-sku {font-size:11.5px;color:var(--muted);letter-spacing:.04em;margin-bottom:8px}
.price {font-size:23px;font-weight:700;letter-spacing:-.035em}
.price span {font-size:15px;font-weight:400;color:#5d665f;letter-spacing:0}
.price-from {font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:2px}
.product-hint {font-size:13px;color:var(--muted);margin:4px 0 12px}
.product-info .button {width:100%;min-height:43px;margin-top:auto;padding:10px 15px;font-size:14px}
.stock-pill {display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin-bottom:10px}
.stock-pill::before {content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.stock-in {color:#1f7a3d}
.stock-low {color:#9a6400}
.stock-out {color:#9b2820}
.stock-special,.stock-confirm {color:#4a6fa5}

/* --- Empty state and pagination ----------------------------------------- */
.empty-state {padding:46px 24px;text-align:center;border:1px dashed #d8dbd3;border-radius:8px;background:#fff}
.empty-state h2 {font-size:21px;margin-bottom:8px}
.empty-state p {color:var(--muted);margin:0 auto 20px;max-width:430px;font-size:14px}
.pagination {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:38px}
.pagination a,.pagination span {min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:5px;font-size:14px;font-weight:700}
.pagination a:hover {background:var(--paper)}
.pagination [aria-current="page"] {background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination .disabled {opacity:.4}

/* --- Product detail ----------------------------------------------------- */
.product-detail {display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:46px;align-items:start;padding-bottom:20px}
.gallery-main {border:1px solid var(--line);border-radius:var(--radius);background:#fff;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:26px;overflow:hidden}
.gallery-main img {max-height:100%;width:auto;object-fit:contain}
.gallery-thumbs {display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.gallery-thumb {width:84px;height:84px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;padding:5px}
.gallery-thumb[aria-current="true"] {border-color:var(--ink);border-width:2px}
.gallery-thumb img {width:100%;height:100%;object-fit:contain}
.demo-image-note {font-size:12px;color:var(--muted);margin-top:12px;display:flex;gap:8px;align-items:flex-start}

.purchase-panel {border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.purchase-panel h1 {font-size:30px;line-height:1.16;letter-spacing:-.035em;font-weight:800;margin-bottom:10px}
.detail-meta {display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--muted);margin-bottom:16px}
.detail-price {display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.detail-price .price {font-size:34px}
.tax-note {font-size:12.5px;color:var(--muted);margin-top:6px}
.selling-mode-note {font-size:13px;background:var(--paper);border-radius:6px;padding:11px 14px;margin:16px 0;color:#454d48}
.option-group {margin:18px 0}
.option-group>label,.option-legend {display:block;font-size:13px;font-weight:700;margin-bottom:9px}
fieldset.option-group {border:0;padding:0;margin:18px 0;min-width:0}
.option-list {display:flex;flex-wrap:wrap;gap:9px}
.option-pill {position:relative}
.option-pill input {position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.option-pill span {display:flex;flex-direction:column;gap:2px;border:1px solid #d7dbd5;border-radius:6px;padding:10px 15px;font-size:14px;font-weight:700;min-height:48px;justify-content:center;transition:border-color .18s,background .18s}
.option-pill small {font-size:11px;font-weight:400;color:var(--muted)}
.option-pill input:checked+span {border-color:var(--ink);border-width:2px;padding:9px 14px;background:var(--paper)}
.option-pill input:focus-visible+span {outline:3px solid #927200;outline-offset:3px}
.option-pill.is-unavailable span {opacity:.5}
.option-pill.is-unavailable small {color:#9b2820}
.quantity-row {display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.quantity-field {flex:1;min-width:150px}
.quantity-field input {width:100%;min-height:49px;border:1px solid #daddd8;border-radius:5px;padding:12px 15px;font-size:15px}
.quantity-hint {font-size:12px;color:var(--muted);margin-top:6px}
.calc-panel {border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.calc-row {display:flex;justify-content:space-between;gap:16px;font-size:13.5px;padding:5px 0;color:#4c5450}
.calc-row span:last-child {font-weight:700;color:var(--ink);text-align:right}
.calc-total {display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--line);margin-top:12px;padding-top:14px;font-size:16px}
.calc-total strong {font-size:27px;letter-spacing:-.03em}
.calc-note {font-size:12px;color:var(--muted);margin-top:8px}
.purchase-actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.purchase-actions .button {flex:1;min-width:170px}
.inline-error {display:flex;gap:9px;font-size:13px;color:#8d2018;background:#fdf3f2;border:1px solid #f0d4d1;border-radius:6px;padding:11px 13px;margin-top:14px}
.inline-notice {font-size:12.5px;color:#4c5450;background:var(--paper);border-radius:6px;padding:11px 13px;margin-top:12px}
.fulfilment {border-top:1px solid var(--line);margin-top:20px;padding-top:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.fulfilment-item > * {min-width:0}
.fulfilment-item > span {flex:1 1 auto;overflow-wrap:anywhere}
.fulfilment-item {display:flex;gap:12px;font-size:13px;color:#4c5450}
.fulfilment-item strong {display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
.postcode-check {display:flex;gap:9px;margin-top:10px}
.postcode-check input {width:130px;min-height:44px;border:1px solid #daddd8;border-radius:5px;padding:10px 13px;font-size:14px}
.postcode-check .button {min-height:44px;padding-inline:18px;font-size:14px}

/* --- Detail content sections -------------------------------------------- */
.detail-sections {padding-block:44px 10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px}
.detail-section h2 {font-size:22px;letter-spacing:-.03em;margin-bottom:14px}
.detail-section p {font-size:15px;line-height:1.7;color:#454d48;margin-bottom:12px}
.spec-table {width:100%;border-collapse:collapse;font-size:14px}
.spec-table caption {text-align:left;font-size:13px;font-weight:700;color:var(--muted);padding-bottom:8px}
.spec-table th,.spec-table td {text-align:left;padding:11px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table th {width:46%;font-weight:700;color:#454d48}
.document-list {list-style:none;margin:0;padding:0}
.document-list li {border-bottom:1px solid var(--line)}
.document-list a {display:flex;align-items:center;gap:10px;padding:12px 2px;font-size:14px;font-weight:700}
.related-section {padding-block:14px 56px}
.section-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}
h2 {font-size:31px;line-height:1.2;letter-spacing:-.035em;font-weight:750}
.section-description {margin-top:6px;color:var(--muted);font-size:14px}

/* --- Cart page ---------------------------------------------------------- */
.cart-layout {display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:start;padding-bottom:50px}
.cart-line {display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.cart-line .thumb {width:96px;height:96px;border:1px solid var(--line);border-radius:6px;overflow:hidden;padding:6px;background:#fff}
.cart-line .thumb img {width:100%;height:100%;object-fit:contain}
.cart-line h3 {font-size:15px;margin-bottom:4px}
.cart-line .meta {font-size:12.5px;color:var(--muted);line-height:1.7}
.cart-line .line-total {font-size:18px;font-weight:700;text-align:right;white-space:nowrap}
.cart-line .remove {background:none;border:0;text-decoration:underline;text-underline-offset:3px;font-size:12.5px;color:#616b61;padding:6px 0;display:block;margin-left:auto}
.cart-summary {border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:18px}
.cart-summary h2 {font-size:19px;margin-bottom:14px}
.cart-summary .button {width:100%;margin-top:14px}

/* --- Footer ------------------------------------------------------------- */
.footer {background:var(--ink);color:#fff;padding:39px 0 18px;margin-top:auto}
.footer-main {display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:35px}
.footer .brand-word {font-size:43px}
.footer .brand-sub {font-size:9px}
.footer .brand-sub::before {width:30px;height:6px}
.footer-tagline {color:#c0c6c0;font-size:13px;margin-top:20px}
.footer h3 {font-size:14px;margin-bottom:13px}
.footer ul {list-style:none;padding:0;margin:0}
/* A long address (the sales email) is wider than its column on a 390px phone
   and pushed every page 9px sideways. Let it break rather than overflow. */
.footer li a {overflow-wrap:anywhere}
.footer li {font-size:13px;line-height:1.85;color:#c9cec9}
.footer a:hover {color:var(--yellow)}
.footer-bottom {display:flex;justify-content:space-between;gap:20px;border-top:1px solid #333a34;margin-top:28px;padding-top:18px;font-size:12px;color:#a3aba4}
.footer-bottom .accent {display:inline-block;width:30px;height:3px;background:var(--yellow);vertical-align:middle;margin-left:10px}

/* --- Dialogs and toast -------------------------------------------------- */
dialog {border:0;border-radius:14px;max-width:min(560px,calc(100vw - 28px));width:100%;padding:30px;color:var(--ink);box-shadow:0 20px 80px #0003}
dialog::backdrop {background:rgb(14 20 16 / .52);backdrop-filter:blur(3px)}
dialog h2 {font-size:27px;margin:0 30px 13px 0}
dialog p {color:var(--muted);font-size:15px;margin-bottom:18px}
.close-dialog {position:absolute;right:14px;top:14px;background:var(--paper);border:0;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}
.close-dialog .icon {width:18px;height:18px}
.form-field {display:flex;flex-direction:column;gap:7px;margin:15px 0}
.form-field label {font-size:14px;font-weight:700}
.form-field input,.form-field select {width:100%;border:1px solid #d1d8cf;border-radius:6px;padding:11px;min-height:45px;background:#fff}
.field-grid {display:grid;grid-template-columns:1fr 1fr;gap:15px}
.dialog-total {display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;margin:20px 0;font-size:17px}
.dialog-total strong {font-size:22px}
.dialog-actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.dialog-note {font-size:12px!important;margin-top:16px!important}
.toast {position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);width:max-content;background:var(--ink);color:#fff;border:1px solid #454c43;box-shadow:0 8px 25px #0002;border-radius:8px;padding:13px 20px;font-size:14px;z-index:20}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:1150px) {
  .header-main {gap:27px}
  .header-actions {gap:18px}
  .header-action span.action-label {display:none}
  .nav-links {gap:21px}
  .nav-links a {font-size:13px}
  .catalogue {grid-template-columns:232px minmax(0,1fr);gap:26px}
  .product-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
  .product-grid.grid-4 {grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-image {height:180px}
  .product-detail {grid-template-columns:minmax(0,1fr) 380px;gap:30px}
  .purchase-panel {padding:22px}
  .purchase-panel h1 {font-size:26px}
  .detail-sections {gap:32px;padding-block:36px 6px}
  .page-head-banner {grid-template-columns:1fr 250px;padding:26px}
  .cart-layout {grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:900px) {
  .product-detail {grid-template-columns:minmax(0,1fr);gap:26px}
  .purchase-panel {position:static}
  .detail-sections {grid-template-columns:minmax(0,1fr);gap:30px}
  .cart-layout {grid-template-columns:minmax(0,1fr)}
  .cart-summary {position:static}
}
@media(max-width:800px) {
  .utility-bar {font-size:11px}
  .header-main {display:grid;grid-template-columns:auto 1fr auto;gap:18px;padding-block:17px}
  .brand-word {font-size:43px}
  .brand-sub {font-size:9px}
  .brand-sub::before {width:31px;height:6px}
  .mobile-menu {display:block;grid-column:1;grid-row:1}
  .header-main>.brand {grid-column:2;grid-row:1;justify-self:start}
  .header-actions {grid-column:3;grid-row:1;gap:18px}
  .search {grid-column:1/-1;grid-row:2;width:100%}
  .header-actions .account-action {display:none}
  .header-action .icon {width:23px;height:23px}
  .navigation .nav-inner {min-height:0;display:block}
  .nav-links {display:none;flex-wrap:wrap;gap:0;padding:8px 0 14px}
  .nav-links.is-open {display:flex}
  .nav-links a {width:50%;padding:11px 6px;font-size:14px}
  .location-link {display:none}
  .page-head-banner {grid-template-columns:1fr;padding:22px}
  .page-head-banner .banner-photo {height:165px;order:-1}
  .catalogue {grid-template-columns:minmax(0,1fr);gap:0}
  .filter-toggle {display:flex;width:100%;margin-bottom:16px}
  .filters {position:static;margin-bottom:22px}
  .filters.is-collapsed {display:none}
  .catalogue-toolbar {gap:12px}
  .product-grid,.product-grid.grid-4 {grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
  .product-image {height:190px;padding-inline:14px}
  .product-info {padding:8px 14px 15px}
  h2 {font-size:27px}
  .gallery-main {aspect-ratio:1;padding:18px}
  .purchase-panel h1 {font-size:24px}
  .footer-main {grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}
  .footer-brand {grid-column:1/-1}
  .footer-bottom {flex-direction:column;gap:10px}
  .footer {padding-top:32px}
  .cart-line {grid-template-columns:72px minmax(0,1fr);gap:14px}
  .cart-line .thumb {width:72px;height:72px}
  .cart-line .line-total {grid-column:2;text-align:left}
}
@media(max-width:440px) {
  .utility-bar .container {gap:9px;font-size:10px}
  .utility-bar .container span:first-child {max-width:40%}
  .header-main {gap:14px}
  .page-head h1 {font-size:30px}
  .product-image {height:144px;padding:24px 8px 6px}
  .product-info {padding:8px 11px 13px}
  .product-info h3 {font-size:13px}
  .price {font-size:21px}
  .price span {font-size:12px}
  .product-hint {font-size:11px}
  .product-info .button {font-size:12px}
  .product-grid,.product-grid.grid-4 {gap:12px}
  .purchase-panel {padding:18px}
  .purchase-panel h1 {font-size:22px}
  .detail-price .price {font-size:28px}
  .purchase-actions .button {min-width:100%}
  .gallery-thumb {width:64px;height:64px}
  .footer-main {gap:28px 15px}
  .footer h3 {font-size:13px}
  .footer li {font-size:12px}
  dialog {padding:25px 20px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition:none!important;animation:none!important}
}
@media print {
  .header-actions,.search,.filters,.purchase-actions,.postcode-check,dialog,.toast,.pagination {display:none!important}
  .product-detail {grid-template-columns:1fr 1fr}
  .product-card {break-inside:avoid}
}

/* ==========================================================================
   Homepage sections — ported unchanged from the approved prototype.
   ========================================================================== */
.hero {display:grid;grid-template-columns:43% 57%;background:var(--paper);min-height:460px}
.hero-copy {padding:65px 32px 60px max(4vw,calc((100vw - var(--container))/2));align-self:center}
.hero .eyebrow {color:#7b817b;margin-bottom:22px}
.hero h1 {font-size:clamp(45px,4.6vw,76px);line-height:1.025;letter-spacing:-.055em;font-weight:800;margin-bottom:20px}
.hero-description {max-width:390px;font-size:16px;line-height:1.6;color:#444b45}
.hero-buttons {display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}
.hero-note {font-size:13px;color:#626a63;margin-top:22px}
.hero-image {min-width:0;min-height:460px;overflow:hidden}
.hero-image .photo {height:100%}

.location-section {padding-block:23px 0}
.location-box {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 27px;border:1px solid var(--line);border-radius:var(--radius)}
.location-intro {display:flex;align-items:center;gap:18px}
.location-intro>.icon {width:35px;height:35px;stroke-width:2}
.location-intro h2 {font-size:20px;line-height:1.3;letter-spacing:-.025em;margin-bottom:3px}
.location-intro p {font-size:14px;color:var(--muted)}
.postcode-form {display:flex;gap:10px;align-items:center}
.postcode-form input {width:195px;min-width:0;min-height:47px;border:1px solid #daddd8;border-radius:5px;padding:12px 15px;font-size:14px}

.categories {padding-block:28px 42px}
.category-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:21px}
.category {display:block;min-width:0}
.category-image {aspect-ratio:1;overflow:hidden;border-radius:6px;background:#e8e5df}
.category .photo {transition:transform .35s}
.category:hover .photo {transform:scale(1.045)}
.category-name {display:block;text-align:center;margin-top:11px;font-weight:700;font-size:14px}

.products-section {background:var(--paper);padding-block:40px 45px;scroll-margin-top:20px}

.clearance {background:var(--ink);color:#fff;padding:33px 0}
.clearance-inner {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.clearance .eyebrow {color:var(--yellow);margin-bottom:15px}
.clearance h2 {font-size:35px;max-width:590px;line-height:1.15}
.clearance p {color:#b9bfba;font-size:15px;margin-top:13px;margin-bottom:22px}
.clearance-photos {display:grid;grid-template-columns:1fr 1fr;gap:17px}
.clearance-tile {position:relative;display:block;height:210px;border-radius:7px;overflow:hidden}
.clearance-tile .photo {transition:transform .35s}
.clearance-tile:hover .photo {transform:scale(1.04)}
.tile-label {position:absolute;left:13px;bottom:13px;right:13px;padding:8px 12px;border-radius:5px;background:#fff;font-size:12px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.help-section {padding-block:24px 40px}
.help-grid {display:grid;grid-template-columns:1fr 1fr;gap:22px}
.help-card {display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:135px}
.help-visual {width:29%;align-self:stretch;flex-shrink:0;background:#fafaf7;display:grid;place-items:center}
.help-visual>.icon {width:64px;height:64px;stroke-width:1.25;transform:rotate(-8deg)}
.help-copy {padding:22px}
.help-copy h3 {font-size:18px;letter-spacing:-.02em;margin-bottom:6px}
.help-copy p {font-size:13px;color:var(--muted);margin-bottom:12px}
.help-copy .text-link {font-size:13px}
.help-photo {min-height:135px;overflow:hidden;padding:0}
.help-photo .photo {height:100%}

@media(min-width:1600px) {
  .hero {max-width:1760px;margin-inline:auto}
  .hero-copy {padding-left:calc((1760px - var(--container))/2)}
}
@media(max-width:1150px) {
  .hero-copy {padding-block:45px}
  .hero,.hero-image {min-height:420px}
  .category-grid {gap:16px}
  .clearance h2 {font-size:30px}
  .clearance-tile {height:190px}
  .clearance-inner {gap:28px}
  .help-copy {padding:18px}
  .help-copy h3 {font-size:16px}
}
@media(max-width:800px) {
  .hero {grid-template-columns:1fr}
  .hero-copy {padding:40px 5% 35px}
  .hero h1 {font-size:57px;max-width:570px}
  .hero-description {max-width:500px}
  .hero .eyebrow {margin-bottom:19px}
  .hero-image {height:310px;min-height:0}
  .hero-note {margin-top:18px}
  .hero-buttons {margin-top:22px}
  .location-box {align-items:stretch;flex-direction:column;gap:18px;padding:20px}
  .postcode-form {width:100%}
  .postcode-form input {flex:1;width:100%}
  .postcode-form .button {white-space:nowrap;padding-inline:17px}
  .location-intro {gap:13px}
  .location-intro h2 {font-size:19px}
  .location-intro p {font-size:13px}
  .section-heading {align-items:flex-start;margin-bottom:20px}
  .section-heading .text-link {font-size:12px;white-space:normal}
  .category-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}
  .categories {padding-block:30px}
  .category-name {font-size:13px}
  .products-section {padding-block:30px}
  .clearance-inner {grid-template-columns:1fr;gap:25px}
  .clearance {padding-block:32px}
  .clearance-tile {height:210px}
  .clearance h2 {font-size:32px}
  .help-grid {grid-template-columns:1fr;gap:15px}
  .help-card {min-height:133px}
  .help-visual {width:25%}
}
@media(max-width:440px) {
  .hero-copy {padding-top:35px}
  .hero h1 {font-size:47px}
  .hero-image {height:250px}
  .hero-buttons .button {font-size:14px;padding-inline:19px}
  .hero-description {font-size:15px}
  .location-box {padding:18px 14px}
  .postcode-form {gap:8px}
  .postcode-form .button {font-size:13px;padding-inline:14px}
  .location-intro>.icon {width:29px;height:29px}
  .location-intro p {font-size:12px}
  .section-heading {gap:14px}
  .section-heading .text-link {max-width:100px;font-size:11px}
  .category-grid {gap:19px 11px}
  .category-name {font-size:12px}
  .clearance-tile {height:150px}
  .clearance-photos {gap:12px}
  .tile-label {font-size:10px;left:8px;bottom:8px;right:8px;padding:6px 8px}
  .help-copy {padding:16px}
  .help-copy h3 {font-size:15px}
  .help-copy p {font-size:12px}
  .help-visual>.icon {width:49px;height:49px}
}

/* --- Missing photograph --------------------------------------------------
   Most of the catalogue carried across from the previous site has no
   photograph. This state is therefore common, not exceptional, so it is
   designed rather than left as a broken-image box: calm, branded, and clearly
   about the picture rather than the product's availability. */
.photo-missing {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; width:100%; height:100%; min-height:90px; padding:14px;
  background:
    linear-gradient(135deg, #fbfaf7 0%, #f3f1ea 100%);
  border-radius:inherit; color:#a9a596; text-align:center;
}
.photo-missing-icon {
  width:38px; height:38px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.65;
}
.photo-missing-text {
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.35; color:#9a9488;
}
/* Small cards have no room for the caption. */
.product-image .photo-missing-text,
.category-image .photo-missing-text { display:none; }
.product-image .photo-missing-icon,
.category-image .photo-missing-icon { width:44px; height:44px; }
/* The product page has room, and is where the explanation matters most. */
.gallery-main .photo-missing { min-height:220px; }
.gallery-main .photo-missing-icon { width:64px; height:64px; }
.gallery-main .photo-missing-text { font-size:12px; }
@media(max-width:440px) {
  .photo-missing-icon { width:30px; height:30px; }
}

/* ---- Checkout and order pages ---- */
.checkout-layout {display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;align-items:start;padding-bottom:50px}
.checkout-section {border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin-bottom:18px;background:#fff}
.checkout-section h2 {font-size:19px;margin:0 0 12px}
.form-field textarea {width:100%;border:1px solid #d1d8cf;border-radius:6px;padding:11px;background:#fff;font:inherit;min-height:80px}
.form-field .optional {font-weight:400;color:var(--muted);font-size:12.5px}
.form-field.has-error input,.form-field.has-error select {border-color:#b3261e}
.field-error {font-size:12.5px;color:#b3261e}
.field-grid-3 {grid-template-columns:2fr 1fr 1fr}
.choice-list {display:flex;flex-direction:column;gap:10px}
.choice {display:flex;gap:12px;align-items:flex-start;border:1px solid #d1d8cf;border-radius:7px;padding:13px 15px;cursor:pointer;background:#fff}
.choice.is-selected {border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.choice input {margin-top:3px}
.choice span {display:flex;flex-direction:column;gap:2px}
.choice small {color:var(--muted);font-size:12.5px;line-height:1.5}
.delivery-fields {margin-top:14px;padding-top:6px;border-top:1px dashed var(--line)}
.summary-lines {list-style:none;margin:0 0 12px;padding:0}
.summary-lines li {display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--line)}
.summary-lines small {color:var(--muted);font-size:12px}
.status-pill {display:inline-block;font-size:13px;font-weight:700;letter-spacing:0;padding:4px 11px;border-radius:999px;vertical-align:middle;margin-left:8px;border:1px solid transparent}
.status-green {background:#e8f5ec;color:#1f7a3d;border-color:#c6e6d1}
.status-amber {background:#fdf4e0;color:#8a5a00;border-color:#f2e0b8}
.status-blue {background:#eaf1fb;color:#31548c;border-color:#cfdef5}
.status-grey {background:#f0f1ee;color:#5d645e;border-color:#e0e3dd}
.timeline {list-style:none;margin:0;padding:0}
.timeline li {display:grid;grid-template-columns:150px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.timeline time {color:var(--muted);font-size:12.5px}
.eyebrow {font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 4px}
@media (max-width:900px){.checkout-layout{grid-template-columns:1fr}.field-grid-3{grid-template-columns:1fr}.timeline li{grid-template-columns:1fr}}
.hp {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.enquiry-form {margin-top:14px}
.enquiry-form .form-field {margin:10px 0}
.enquiry-form .button {margin-top:8px}

/* ---- Account ---- */
.account-layout {display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;align-items:start;padding-bottom:50px}
.account-nav ul {list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.account-nav a {display:block;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.account-nav li:last-child a {border-bottom:0}
.account-nav a[aria-current=page] {background:var(--paper);font-weight:700}
.account-nav a:hover {background:#eeefea}
.account-table {width:100%;border-collapse:collapse;font-size:13.5px}
.account-table th {text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--line)}
.account-table td {padding:10px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.account-table .num {text-align:right;white-space:nowrap}
@media (max-width:900px){.account-layout{grid-template-columns:1fr}}

/* ---- Content pages ---- */
.cms-page {font-size:15.5px;line-height:1.75;color:#2d332f}
.cms-page.cms-narrow {max-width:760px;margin-left:0}
.cms-page h2 {font-size:24px;letter-spacing:-.03em;margin:28px 0 10px}
.cms-page h3 {font-size:18px;margin:22px 0 8px}
.cms-page p,.cms-page ul,.cms-page ol {margin:0 0 14px}
.cms-page ul,.cms-page ol {padding-left:24px}
.cms-page a {text-decoration:underline;text-underline-offset:3px}
.cms-page table {border-collapse:collapse;width:100%;margin:0 0 16px;font-size:14px}
.cms-page th,.cms-page td {border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.cms-page img {max-width:100%;height:auto;border-radius:6px}
.cms-page blockquote {border-left:4px solid var(--yellow);margin:0 0 14px;padding:6px 16px;color:var(--muted)}

/* ---- Sales and codes ---- */
.price-was {color:var(--muted);font-weight:400;font-size:.8em;margin-left:6px;text-decoration:line-through}
.flag-sale {background:#b3261e;color:#fff}
.coupon-form {display:flex;gap:8px;align-items:center;margin-top:14px}
.coupon-form input {flex:1;border:1px solid #d1d8cf;border-radius:6px;padding:11px;min-height:45px;text-transform:uppercase}
.coupon-applied {flex:1;font-size:13.5px}

/* ==========================================================================
   Site refresh — 1 October 2026 (at JBM's request).

   Same tokens as the approved design — charcoal, JBM yellow, warm paper,
   Arial, the 1360px container — applied with more depth and rhythm: page
   headers become panels, category pages lead with a charcoal banner, cards
   lift, forms get a visible focus ring. Generic elements are scoped to the
   storefront's <main id="main">, so nothing here can reach the admin or the
   supplier portal (both load this file and use some of the same class names).
   ========================================================================== */

/* --- Page headers --------------------------------------------------------- */
#main .page-head:has(> h1) {
  position: relative; overflow: hidden; margin-bottom: 28px; padding: 36px 40px 34px;
  background: linear-gradient(135deg, #fbfaf6 0%, var(--paper) 100%);
  border: 1px solid #efece4; border-radius: calc(var(--radius) * 2);
}
#main .page-head:has(> h1)::after {
  content: ""; position: absolute; top: -24px; right: 70px; width: 40px; height: 150px;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-hover)); transform: skew(-24deg); opacity: .9;
}
#main .page-head:has(> h1) > * { position: relative; z-index: 1; max-width: min(760px, 82%); }
#main .page-head:has(> h1) h1 { font-size: clamp(34px, 3.8vw, 50px); }

/* Category: a charcoal banner. The family photograph fills the right half and
   fades into the charcoal (the category images are small, so they are used as a
   soft backdrop rather than a framed picture that shows their pixels); the
   yellow slash sits on the seam. The left half carries real facts about the
   range and its subcategories. */
#main .page-head-banner {
  position: relative; isolation: isolate; overflow: hidden; display: block; min-height: 320px;
  padding: 46px 48px 40px; margin-bottom: 26px; color: #fff; border-radius: calc(var(--radius) * 2);
  background: var(--ink);
  box-shadow: 0 2px 6px rgba(23,27,25,.18), 0 30px 56px -36px rgba(23,27,25,.8);
}
#main .page-head-banner .banner-photo { position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 58%; height: auto; border-radius: 0; }
#main .page-head-banner .banner-photo .photo { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) brightness(.94) blur(1.4px); transform: scale(1.04); }
#main .page-head-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 42%, rgba(23,27,25,.72) 58%, rgba(23,27,25,.18) 82%, rgba(23,27,25,.05) 100%),
    radial-gradient(60% 90% at 0% 100%, rgba(246,191,20,.10) 0%, rgba(246,191,20,0) 70%);
}
#main .page-head-banner::after {
  content: ""; position: absolute; z-index: -1; top: -10px; bottom: -10px; left: 44%; width: 10px;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-hover)); transform: skew(-16deg); opacity: .95;
}
#main .banner-copy { position: relative; max-width: 560px; }
#main .page-head-banner h1 { color: #fff; font-size: clamp(38px, 4.6vw, 62px); line-height: 1; margin: 10px 0 14px; }
#main .banner-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
#main .banner-kicker::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--yellow); }
#main .page-head-banner .banner-intro { color: #c9cdca; font-size: 15.5px; line-height: 1.6; max-width: 500px; margin-bottom: 4px; }
#main .banner-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0 0; padding: 0; }
#main .banner-facts > div { display: flex; flex-direction: column; padding: 0 26px; border-left: 1px solid rgba(255,255,255,.16); }
#main .banner-facts > div:first-child { padding-left: 0; border-left: 0; }
#main .banner-facts dd { order: 1; margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
#main .banner-facts > div:first-child dd { color: var(--yellow); }
#main .banner-facts dt { order: 2; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9fa6a1; }
#main .banner-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
#main .banner-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); transition: background .18s, border-color .18s, transform .18s; }
#main .banner-links a span { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 800; }
#main .banner-links a:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); transform: translateY(-1px); }
/* Chips */
#main .chip { box-shadow: 0 1px 2px rgba(23,27,25,.05); transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
#main .chip:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(23,27,25,.35); }
#main .chip .count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper); font-size: 11.5px; font-weight: 700; }

/* --- Catalogue ------------------------------------------------------------ */
#main .filters { background: #fff; border-color: #ecebe5; border-radius: 14px; box-shadow: 0 1px 2px rgba(23,27,25,.04), 0 16px 30px -26px rgba(23,27,25,.35); }
#main .product-card { border-color: #ecebe5; border-radius: 14px; box-shadow: 0 1px 2px rgba(23,27,25,.04);
  transition: transform .25s, box-shadow .25s, border-color .25s; }
#main .product-card:hover { transform: translateY(-3px); border-color: #e2e0d8;
  box-shadow: 0 2px 4px rgba(23,27,25,.05), 0 18px 34px -18px rgba(23,27,25,.35); }
#main .product-image { margin: 10px 10px 0; border-radius: 10px; padding: 16px 14px 10px; overflow: hidden; }
/* No photograph yet: the placeholder fills the image box rather than floating in it. */
#main .product-image:has(.photo[src*="product-placeholder"]) { padding: 0; background: #f7f6f2; }
#main .product-image .photo[src*="product-placeholder"] { width: 100%; max-height: none; height: 100%; object-fit: contain; background: transparent; }
#main .product-info .price { margin-top: 2px; }
#main .catalogue-toolbar { border-bottom-color: #ecebe5; }

/* Empty states: a calm card, not a dashed box. */
#main .empty-state { position: relative; padding: 54px 28px 50px; border: 1px solid #ecebe5; border-radius: 16px;
  background: radial-gradient(90% 120% at 50% 0%, #fbfaf6 0%, #fff 70%); box-shadow: 0 16px 34px -28px rgba(23,27,25,.4); }
#main .empty-state::before { content: ""; display: block; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--yellow) 0 7px, transparent 8px), var(--paper);
  box-shadow: inset 0 0 0 1px #ebe7dd; }

/* --- Product page --------------------------------------------------------- */
#main .gallery-main { border-radius: 14px; box-shadow: 0 1px 2px rgba(23,27,25,.04), 0 18px 36px -30px rgba(23,27,25,.4); }
#main .purchase-panel { border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(23,27,25,.05), 0 24px 44px -32px rgba(23,27,25,.5); }
#main .prose { color: #3f4642; font-size: 15px; line-height: 1.7; }
#main .prose ul, #main .prose ol { margin: 0 0 14px; padding-left: 20px; }
#main .prose li { margin: 6px 0; padding-left: 4px; }
#main .prose li::marker { color: #c9a227; }
#main .prose p { margin: 0 0 12px; }
#main .prose strong { color: var(--ink); }

/* --- Information pages and forms ----------------------------------------- */
#main .detail-sections .detail-section { min-width: 0; }
#main .checkout-section { border-radius: 14px; box-shadow: 0 1px 2px rgba(23,27,25,.04), 0 20px 40px -32px rgba(23,27,25,.45); }
#main .form-field input, #main .form-field select, #main .form-field textarea { border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
#main .form-field input:focus, #main .form-field select:focus, #main .form-field textarea:focus,
#main .postcode-check input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(246,191,20,.45); }

@media (max-width: 900px) {
  #main .page-head-banner { padding: 150px 24px 28px; min-height: 0; }
  #main .page-head-banner .banner-photo { width: 100%; bottom: auto; height: 190px; }
  #main .page-head-banner::before { background: linear-gradient(180deg, rgba(23,27,25,.15) 0px, rgba(23,27,25,.7) 120px, var(--ink) 190px, var(--ink) 100%); }
  #main .page-head-banner::after { display: none; }
  #main .banner-facts dd { font-size: 28px; }
  #main .banner-facts > div { padding: 0 18px; }
  #main .page-head:has(> h1) { padding: 28px 24px 26px; }
  #main .page-head:has(> h1)::after { right: 22px; width: 28px; height: 100px; }
  #main .page-head:has(> h1) > * { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #main .product-card, #main .chip { transition: none; }
  #main .product-card:hover, #main .chip:hover { transform: none; }
}
/* A catalogue with no filters to offer (an empty clearance list) uses the full width. */
#main .catalogue:not(:has(.filters)) { grid-template-columns: minmax(0, 1fr); }
/* Long filter lists (thirty nominal widths) scroll inside their own box, so the
   later filters and the Apply button stay within reach. Shared by every page
   that uses includes/partials/catalogue.php. */
#main .filter-options.is-long {
  max-height: 268px; overflow-y: auto; overscroll-behavior: contain; margin-right: -6px; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: #cfd2cc transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
#main .filter-options.is-long .filter-option:last-child { margin-bottom: 14px; }

/* ==========================================================================
   Footer — redesigned 1 October 2026 at JBM's request.
   The four promises as raised tiles, then the brand with quick-contact pills
   and four columns of links, then the bottom line. The JBM slash and a soft
   yellow glow keep it the same family as the banners.
   ========================================================================== */
.footer { position: relative; isolation: isolate; overflow: hidden; padding: 0 0 22px;
  background: radial-gradient(60% 70% at 100% 0%, rgba(246,191,20,.07) 0%, rgba(246,191,20,0) 60%),
              radial-gradient(50% 60% at 0% 100%, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%), var(--ink); }
.footer::after { content: ""; position: absolute; z-index: -1; top: -40px; right: 7%; width: 18px; height: 240px;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-hover)); transform: skew(-22deg); opacity: .14; }

.footer-values { border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)); }
.footer .footer-values-grid { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-block: 30px; }
.footer-value { display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 15px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 30px -22px rgba(0,0,0,.9); }
.footer-value-icon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(145deg, #ffd75a, #e5ad03); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.15), 0 10px 18px -10px rgba(229,173,3,.8); }
.footer-value-icon .icon { width: 21px; height: 21px; }
.footer-value strong { display: block; color: #fff; font-size: 14.5px; letter-spacing: -.01em; margin-bottom: 3px; }
.footer-value small { display: block; color: #aeb5af; font-size: 12.5px; line-height: 1.5; }

.footer-main { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 34px; padding-top: 44px; }
.footer .brand-word { font-size: 46px; }
.footer-tagline { color: #c9cec9; font-size: 14px; margin-top: 18px; }
.footer-quick { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 20px; }
.footer-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 9px 15px 9px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  overflow-wrap: anywhere; transition: background .18s, border-color .18s, transform .18s; }
.footer-pill .icon { flex-shrink: 0; width: 17px; height: 17px; color: var(--yellow); }
.footer-pill:hover { background: rgba(255,255,255,.13); border-color: rgba(246,191,20,.5); color: #fff; transform: translateY(-1px); }

.footer h3 { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.footer h3::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--yellow); }
.footer-col li { font-size: 14px; line-height: 1.5; margin-bottom: 9px; }
.footer-col li a { display: inline-flex; align-items: center; gap: 0; color: #c3c9c4; transition: color .15s, gap .15s; }
.footer-col li a::before { content: ""; width: 0; height: 2px; border-radius: 1px; background: var(--yellow); transition: width .18s, margin .18s; }
.footer-col li a:hover { color: #fff; }
.footer-col li a:hover::before { width: 10px; margin-right: 8px; }
.footer-contact-cta { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 11px 16px; border-radius: 11px;
  background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: 0 12px 22px -14px rgba(246,191,20,.9); transition: background .18s, transform .18s; }
.footer-contact-cta .icon { width: 16px; height: 16px; }
.footer-contact-cta:hover { background: var(--yellow-hover); color: var(--ink); transform: translateY(-1px); }
.footer-contact-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #c3c9c4; line-height: 1.5; margin: 0 0 10px; }
.footer-contact-line .icon { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; color: var(--yellow); }
.footer-contact-line a { color: #c3c9c4; text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.footer-contact-line a:hover { color: #fff; }

.footer-bottom { align-items: center; flex-wrap: wrap; border-top-color: rgba(255,255,255,.1); margin-top: 38px; padding-top: 20px; font-size: 12.5px; }
.footer-bottom p { margin: 0; }
.footer-env { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 999px; background: rgba(246,191,20,.14); color: var(--yellow); font-weight: 700; }
.footer-top { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: #c3c9c4; font-weight: 700; }
.footer-top .icon { width: 15px; height: 15px; }
.footer-top:hover { color: #fff; border-color: rgba(246,191,20,.6); }

@media (max-width: 1100px) {
  .footer .footer-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
  .footer-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; }
  .footer-brand .footer-tagline { margin-top: 10px; }
  .footer-quick { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
}
@media (max-width: 800px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 34px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}
@media (max-width: 560px) {
  .footer .footer-values-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 22px; }
  .footer-value { padding: 13px; }
  .footer-brand { display: block; }
  .footer-quick { flex-direction: column; margin-top: 16px; }
  .footer-col li { font-size: 13.5px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-pill, .footer-contact-cta, .footer-col li a, .footer-col li a::before { transition: none; }
}

/* ==========================================================================
   Main menu — redesigned 1 October 2026 at JBM's request.
   Pills instead of underlines: a link lifts onto a soft tile when pointed at,
   and the page you are on sits in a raised white pill. "Shop all" is the
   charcoal button, Marketplace the yellow one — both drawn with a top
   highlight, a darker lower edge and a cast shadow, so they read as pressable.
   ========================================================================== */
.navigation { border-top: 1px solid #eceae3; border-bottom: 0; position: relative;
  background: linear-gradient(180deg, #fff 0%, #faf9f5 100%);
  box-shadow: 0 1px 0 #e9e7df, 0 10px 22px -18px rgba(23,27,25,.35); }
.nav-inner { min-height: 64px; }
.nav-links { gap: 6px; }
.nav-links a { padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #2b312d;
  transition: background .18s, color .18s, box-shadow .18s, transform .18s; }
.nav-links a:hover { color: var(--ink); background: #f1efe8; transform: translateY(-1px); }
.nav-links a:focus-visible { outline: 3px solid #927200; outline-offset: 2px; }

/* The page you are on: a raised pill, never an underline. */
.nav-links a[aria-current="page"] { text-decoration: none; color: var(--ink); background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #e6e3d9, 0 6px 14px -8px rgba(23,27,25,.4); }
.nav-links a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); margin-left: 2px; box-shadow: 0 0 0 2px #fff4cc; }

/* Shop all: the charcoal key. */
.nav-links a.nav-shop { margin-right: 6px; padding: 9px 16px 9px 12px; color: #fff;
  background: linear-gradient(180deg, #343c37 0%, #171b19 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.35), 0 8px 16px -8px rgba(23,27,25,.7); }
.nav-links a.nav-shop .icon { width: 18px; height: 18px; color: var(--yellow); }
.nav-links a.nav-shop:hover { color: #fff; background: linear-gradient(180deg, #3f4842 0%, #1f2421 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.35), 0 12px 20px -10px rgba(23,27,25,.75); }
.nav-links a.nav-shop[aria-current="page"]::after { box-shadow: 0 0 0 2px rgba(246,191,20,.25); }

/* Clearance: a small red marker says "reduced" without shouting. */
.nav-links a.nav-clearance::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 0 3px #f9dcd8; }

/* Marketplace: the yellow key. */
.nav-links a.nav-marketplace { margin-left: 8px; padding: 9px 18px 9px 14px; color: var(--ink); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 13px;
  background: linear-gradient(180deg, #ffd75a 0%, #f6bf14 55%, #e5ad03 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(150,105,0,.35), 0 10px 18px -8px rgba(229,173,3,.85); }
.nav-links a.nav-marketplace .icon { width: 17px; height: 17px; }
.nav-links a.nav-marketplace:hover { color: var(--ink); background: linear-gradient(180deg, #ffdf75 0%, #f8c62e 55%, #ebb20a 100%); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(150,105,0,.35), 0 14px 22px -10px rgba(229,173,3,.9); }
.nav-links a.nav-marketplace[aria-current="page"] { transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(150,105,0,.35), 0 4px 8px -6px rgba(229,173,3,.8); }
.nav-links a.nav-marketplace[aria-current="page"]::after { background: var(--ink); box-shadow: none; }

/* Delivery & pickup, on the right. */
.location-link { gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid #e6e3d9; background: #fff;
  box-shadow: 0 6px 14px -10px rgba(23,27,25,.4); transition: border-color .18s, transform .18s; }
.location-link-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff4cc; }
.location-link-icon .icon { width: 17px; height: 17px; }
.location-link:hover { border-color: #cfcab9; transform: translateY(-1px); }

@media (max-width: 1100px) {
  .nav-links { gap: 2px; }
  .nav-links a { padding: 8px 10px; font-size: 13px; }
  .nav-links a.nav-marketplace { margin-left: 4px; padding: 8px 13px 8px 11px; font-size: 12px; }
}
@media (max-width: 800px) {
  .nav-inner { min-height: 0; }
  .nav-links { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 0 16px; }
  .nav-links.is-open { display: grid; }
  .nav-links a { width: auto; justify-content: flex-start; padding: 11px 14px; font-size: 14px; background: #f6f5f0; border-radius: 12px; }
  .nav-links a.nav-shop, .nav-links a.nav-marketplace { grid-column: 1 / -1; justify-content: center; margin: 0; border-radius: 12px; padding: 12px 14px; }
  .nav-links a.nav-marketplace { order: -1; font-size: 13px; }
  .nav-links a.nav-shop { order: -2; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a, .location-link { transition: none; }
  .nav-links a:hover, .nav-links a.nav-marketplace:hover, .location-link:hover { transform: none; }
}

/* ==========================================================================
   Utility bar — scrolling Victoria places, 1 October 2026 at JBM's request.
   The list (content block site.marquee_places) is printed twice and the track
   slides by exactly half its width, so the loop never shows a seam. It pauses
   under the pointer and from its own button (WCAG 2.2.2), and with reduced
   motion it stops and becomes a strip you can scroll by hand.
   ========================================================================== */
.utility-bar.has-marquee {padding:0;background:linear-gradient(180deg,#1f2421 0%,#171b19 55%,#121513 100%);border-bottom:1px solid rgba(246,191,20,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.has-marquee .container {align-items:center;gap:18px;min-height:42px}
.ub-left {flex:none;display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.82);font-weight:600;letter-spacing:.01em}
.ub-left::before {content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(246,191,20,.18)}
.ub-marquee {flex:1;min-width:0;display:flex;align-items:center;height:30px;border-radius:999px;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(255,255,255,.04));box-shadow:inset 0 2px 4px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.04);overflow:hidden}
.utility-bar .ub-tag {flex:none;max-width:none;display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 24px 0 13px;background:linear-gradient(180deg,#ffd447 0%,#f6bf14 52%,#e0a702 100%);color:var(--ink);font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:11px;border-radius:999px 0 0 999px;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);text-shadow:0 1px 0 rgba(255,255,255,.35);position:relative;z-index:1}
.utility-bar .container span.ub-tag {max-width:none}
.ub-tag .icon {width:16px;height:16px;stroke-width:2}
.ub-window {flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent)}
.ub-track {display:flex;width:max-content;animation:ub-scroll var(--ub-dur,150s) linear infinite;will-change:transform}
.ub-window:hover .ub-track,.ub-marquee.is-paused .ub-track {animation-play-state:paused}
@keyframes ub-scroll {from {transform:translateX(0)} to {transform:translateX(-50%)}}
.ub-list {display:flex;flex:none;margin:0;padding:0;list-style:none}
.ub-list li {position:relative;display:inline-flex;align-items:center;gap:6px;padding:0 20px;white-space:nowrap;color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.01em;transition:color .2s}
.ub-list li::after {content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--yellow);transform:rotate(45deg);box-shadow:0 0 6px rgba(246,191,20,.55)}
.ub-list li .icon {width:13px;height:13px;color:var(--yellow);stroke-width:2.1}
.ub-list li:hover {color:var(--yellow)}
.ub-pause {flex:none;display:grid;place-items:center;width:24px;height:24px;margin:0 4px 0 2px;padding:0;border:0;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 3px rgba(0,0,0,.5);color:#fff;cursor:pointer}
.ub-pause[hidden] {display:none}
.ub-pause:hover {background:var(--yellow);color:var(--ink)}
.ub-pause:focus-visible {outline:2px solid var(--yellow);outline-offset:2px}
.ub-pause-icon {display:block;width:8px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.ub-pause[aria-pressed="true"] .ub-pause-icon {width:0;height:0;margin-left:2px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.ub-right {flex:none;display:inline-flex;align-items:center;padding:5px 13px;border:1px solid rgba(246,191,20,.45);border-radius:999px;color:#fff;font-weight:600;text-decoration:none;background:rgba(246,191,20,.06);transition:background .2s,color .2s}
.ub-right:hover,.ub-right:focus-visible {background:var(--yellow);color:var(--ink);text-decoration:none}
@media(max-width:1180px) {
  .has-marquee .ub-left {display:none}
}
@media(max-width:800px) {
  .has-marquee .ub-right {display:none}
  .has-marquee .container {min-height:40px}
}
@media(max-width:440px) {
  .utility-bar .ub-tag {padding:0 17px 0 10px;gap:5px;font-size:9.5px;letter-spacing:0}
  .ub-tag .icon {width:14px;height:14px}
  .ub-list li {font-size:12px;padding:0 16px}
  .ub-window {-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 30px),transparent)}
}
@media(prefers-reduced-motion:reduce) {
  .ub-window {overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .ub-window::-webkit-scrollbar {display:none}
  .ub-list[aria-hidden="true"],.ub-pause {display:none!important}
}
@media print {
  .ub-marquee {display:none}
}

/* ==========================================================================
   Brand logo (the official JBM lock-up, demo review issue 7, 5 Oct 2026).
   brand_logo() prints it; the text mark (.brand-word) is only the fallback
   when the file is missing. Sized by height so every layout lines up.
   ========================================================================== */
.brand picture {display:block;line-height:0}
.brand-logo {display:block;height:64px;width:auto;max-width:none}
.footer .brand-logo {height:56px}
.admin-brand .brand-logo {height:40px;margin-bottom:6px}
.admin-login-card .brand-logo {height:64px;margin:0 auto 4px}
.supplier-public-card .brand-logo {height:56px;margin-bottom:6px}
@media(max-width:800px) {
  .brand-logo {height:50px}
  .footer .brand-logo {height:46px}
}
@media(max-width:380px) {
  .brand-logo {height:38px}
  .header-main {gap:10px}
  .header-actions {gap:8px}
}

/* ==========================================================================
   Button states (demo review issue 14, 5 Oct 2026).
   `.footer a:hover` and `.nav-links a:hover` recolour link text, and a yellow
   button inside either container inherited that: yellow text on a yellow
   button. Every .button variant now keeps its own text colour in hover,
   focus and active, whatever its container, and shows a visible focus ring.
   ========================================================================== */
.button:hover, .button:focus-visible, .button:active { text-decoration: none; }
.button-primary, .button-primary:hover, .button-primary:focus-visible, .button-primary:active,
.footer .button-primary:hover, .nav-links .button-primary:hover, .hm .button-primary:hover, .mp .button-primary:hover,
.hm .button-primary:focus-visible, .mp .button-primary:focus-visible { color: #171b19; }
.button-outline, .button-outline:hover, .button-outline:focus-visible, .button-outline:active,
.footer .button-outline:hover { color: var(--ink); }
.footer .button-outline, .footer .button-outline:hover { color: #fff; border-color: rgba(255,255,255,.55); }
.footer .button-outline:hover { background: rgba(255,255,255,.12); }
.button-dark, .button-dark:hover, .button-dark:focus-visible, .button-dark:active,
.footer .button-dark:hover { color: #fff; }
.footer-contact-cta, .footer-contact-cta:hover, .footer-contact-cta:focus-visible { color: #171b19; }
.button:focus-visible, .footer-contact-cta:focus-visible, .ub-right:focus-visible, .nav-links a:focus-visible,
.location-link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.button-primary:focus-visible, .footer-contact-cta:focus-visible { outline-color: var(--ink); }
.button[disabled], .button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ==========================================================================
   Utility strip on phones (demo review issue 12, 5 Oct 2026): no animation
   below 800px. The yellow tag stays, followed by the static utility text; the
   scrolling list and the pause button are not shown at all on small screens.
   ========================================================================== */
.ub-static {display:none}
@media(max-width:800px) {
  .has-marquee .ub-window, .has-marquee .ub-pause {display:none !important}
  .has-marquee .ub-track {animation:none !important}
  .ub-static {display:inline-flex;align-items:center;min-width:0;padding:0 12px 0 10px;color:#fff;font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ub-marquee {box-shadow:none;background:transparent}
}

/* ==========================================================================
   Main menu, compact mode (6 Oct 2026). The catalogue import added product
   families, and at 1440px the row of family links pushed "Delivery & pickup"
   past the right edge. Between 1100px and 1500px the links tighten, and the
   row may wrap so nothing can ever overflow the page.
   ========================================================================== */
.nav-inner { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1500px) and (min-width: 1101px) {
  .nav-links { gap: 3px; }
  .nav-links a { padding: 9px 11px; font-size: 13.5px; }
  .nav-links a.nav-shop { padding: 9px 13px 9px 11px; }
  .nav-links a.nav-marketplace { margin-left: 4px; padding: 9px 14px 9px 12px; font-size: 12.5px; letter-spacing: .04em; }
  .location-link { padding: 6px 11px 6px 6px; font-size: 13.5px; }
}

/* Solid colour fallbacks under gradient fills, so contrast tooling and old
   browsers see the real background; and the footer CTA keeps ink text on
   hover (".footer a:hover" outranked the earlier rule). */
.utility-bar.has-marquee { background-color: #171b19; }
.nav-links a.nav-shop { background-color: #171b19; }
.nav-links a.nav-marketplace { background-color: var(--yellow); }
.ub-pause { background-color: #3a403c; }
.footer a.footer-contact-cta, .footer a.footer-contact-cta:hover, .footer a.footer-contact-cta:focus-visible,
.footer a.footer-contact-cta:active { color: #171b19; }
.nav-links { flex-wrap: wrap; row-gap: 4px; }

/* ==========================================================================
   Touch targets on phones (demo review issue 12): every control at least
   44px tall, and link lists with room between rows. Desktop is unchanged.
   ========================================================================== */
@media (max-width: 800px) {
  .mobile-menu { width: 44px; height: 44px; display: grid; place-items: center; }
  .header-action { min-width: 44px; min-height: 44px; justify-content: center; }
  .hm-link, .hm-shelf-more { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-col li a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-col li + li { margin-top: 2px; }
  .footer-pill, .footer-top, .footer-contact-line a { min-height: 44px; }
  .breadcrumbs a { display: inline-block; padding: 10px 2px; }
  select, .catalogue-toolbar select, .pagination a, .pagination span { min-height: 44px; }
  .product-grid .button, .product-info .button, .mp .product .enquire { min-height: 44px; }
  .product-title { display: flex; align-items: center; min-height: 44px; }
}
@media(max-width:440px) {
  .utility-bar .ub-tag { padding: 0 14px 0 9px; gap: 4px; font-size: 9px; }
  .ub-tag .icon { display: none; }
  .ub-static { font-size: 11px; padding: 0 8px; }
}
/* Second pass of the phone touch-target audit (6 Oct 2026). */
@media (max-width: 800px) {
  .footer-col li a { min-height: 44px; }
  .breadcrumbs a { padding: 12px 2px; }
  .subcategory-row a { min-height: 44px; display: inline-flex; align-items: center; }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Solid fallbacks under the two translucent buttons, so their contrast reads
   the same to tooling as it does on screen (white on charcoal). */
.ub-right { background-color: #242519; }
.sj-card-dark .sj-button-ghost { background-color: #2a2d2b; }
@media (max-width: 800px) {
  .footer-col li a { min-width: 44px; }
  .breadcrumbs a { padding: 12px 6px; }
}
@media (max-width: 800px) {
  .banner-links a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   Content pages: draft notice, FAQ list, buying guides, cookie notice
   (demo review issues 15 and 16, 6 Oct 2026).
   ========================================================================== */
.page-summary { max-width: 720px; margin: 8px 0 0; font-size: 17px; color: #4a524d; }
.cms-draft-notice { display: flex; gap: 16px; align-items: flex-start; max-width: 720px; padding: 22px 24px; border: 1px solid #efe3b8; border-left: 6px solid var(--yellow); border-radius: 9px; background: #fffaeb; }
.cms-draft-notice .icon { flex: none; width: 26px; height: 26px; color: #8a6a00; margin-top: 2px; }
.cms-draft-notice p { margin: 0 0 12px; }
.cms-draft-notice p:last-child { margin: 0; }
.faq-list { max-width: 820px; margin-top: 18px; }
.faq-item { border: 1px solid var(--line); border-radius: 9px; background: #fff; margin-bottom: 10px; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 700; font-size: 16px; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-answer { padding: 14px 18px 18px; color: #3d453f; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.guide-card a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgba(23,27,25,.04); transition: transform .15s, box-shadow .15s; }
.guide-card a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(23,27,25,.1); text-decoration: none; }
.guide-card h2 { font-size: 20px; margin: 0; }
.guide-card p { margin: 0; color: #4a524d; }
.guide-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #8a6a00; }
.guide-more .icon { width: 18px; height: 18px; }
.guides-empty { max-width: 640px; font-size: 17px; }
.cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 16px 20px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.cookie-notice p { margin: 0; flex: 1 1 420px; font-size: 14px; line-height: 1.45; }
.cookie-notice p a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.cookie-notice-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-notice .button { min-height: 44px; }
.cookie-notice .button-outline { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.cookie-notice .button-outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.cookie-notice[hidden] { display: none; }
@media (max-width: 800px) {
  .cookie-notice { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; }
  .cookie-notice-actions { width: 100%; }
  .cookie-notice-actions .button { flex: 1; }
}
@media print { .cookie-notice { display: none; } }

/* A button that reads as a link: sign-out is a POST (it needs a form), but it sits in a list of links. */
.as-link {background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.as-link:hover {text-decoration:underline}
.inline-form {display:inline}