/* ==========================================================================
   Mourne Exterior — Design System (Stitch translation)
   Modern Corporate + Minimalism. Tonal layers + 1px borders, no heavy shadows.
   ========================================================================== */

:root {
    /* ---- Colour ---- */
    --primary: #010f66;              /* navy */
    --primary-container: #1e2a7a;
    --on-primary: #ffffff;
    --on-primary-container: #8a95eb;
    --on-primary-fixed-variant: #333f8e;

    --primary-fixed: #dfe0ff;
    --primary-fixed-dim: #bcc3ff;

    --secondary: #0062a2;           /* accent blue */
    --secondary-container: #6db5ff; /* sky */
    --secondary-fixed: #d1e4ff;
    --secondary-fixed-dim: #9dcaff;

    --surface: #f7f9ff;             /* off-white page bg */
    --surface-container-low: #f1f4fa;
    --surface-container: #ebeef5;
    --surface-container-lowest: #ffffff;

    --on-surface: #181c21;          /* body text */
    --on-surface-variant: #454651;  /* muted text */
    --outline-variant: #c6c5d3;     /* 1px borders */
    --error: #ba1a1a;

    /* ---- Type ---- */
    --font-display: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Layout ---- */
    --max-width: 1280px;
    --margin-desktop: 64px;
    --margin-mobile: 16px;
    --gutter: 24px;
    --header-height: 80px;
    --section-pad: 96px;

    /* ---- Radius ---- */
    --radius: 2px;
    --radius-lg: 4px;
    --radius-xl: 8px;
}

/* ========== RESET ========== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Lock the page to vertical scrolling only. `clip` (not `hidden`) is
       deliberate: `hidden` would turn the root into a scroll container and
       break every `position: sticky` element on the site (site header, shop
       sidebar, Our Work filter bar). `clip` just clips — sticky keeps working.
       Anything that genuinely needs to scroll sideways (carousels, code
       blocks, wide tables) does it inside its own container; see the
       "MOBILE SCROLL CONTAINMENT" section at the end of this file. */
    overflow-x: clip;
    /* Stop iOS from re-flowing text on rotation, which can push content wide. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--on-surface);
    background: var(--surface);
    overflow-x: clip;
    /* Belt-and-braces so a stray wide child can never widen the page box. */
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary);
}

p, a, span, li, label, blockquote, figcaption,
button, input, select, textarea {
    font-family: var(--font-body);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

ul, ol { list-style: none; }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ========== TYPE SCALE ========== */
.headline-xl {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.headline-lg {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.headline-md {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
}
.headline-sm {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}
.body-lg { font-size: 18px; line-height: 28px; font-weight: 400; }
.body-md { font-size: 16px; line-height: 24px; font-weight: 400; }
.label-md {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background: var(--primary-container);
    border-color: var(--primary-container);
}

/* secondary = 2px accent-blue outline */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--secondary);
}
.btn-outline:hover {
    background: var(--secondary);
    color: var(--on-primary);
}

.btn-outline-light {
    background: transparent;
    color: var(--on-primary);
    border-color: var(--secondary-container);
}
.btn-outline-light:hover {
    background: var(--secondary-container);
    color: var(--primary);
}

.btn-white {
    background: var(--on-primary);
    color: var(--primary);
    border-color: var(--on-primary);
}
.btn-white:hover {
    background: transparent;
    color: var(--on-primary);
}

.btn-block { width: 100%; }

/* ========== HEADER ========== */
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--surface-container-lowest);
    border-bottom: 1px solid var(--outline-variant);
}

/* offset sticky header below the WP admin bar when logged in */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
}
/* On phones WordPress makes the admin bar scroll away (position: absolute), so
   a 46px sticky offset would leave an empty gap above the header. Pin it to the
   very top instead — the admin bar simply scrolls off with the page. */
@media screen and (max-width: 600px) {
    body.admin-bar .site-header { top: 0; }
}

.header-inner {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--margin-desktop);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo { flex-shrink: 0; }
.site-header .logo-img { height: 56px; width: auto; }

/* centered nav (between logo and actions — collision-proof) */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-link {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.nav-link:hover {
    color: var(--secondary);
}

.current-menu-item .nav-link {
    color: var(--secondary);
    border-bottom-color: var(--secondary);
}

/* ---- Desktop dropdown ---- */
.main-nav .has-submenu {
    position: relative;
    display: flex;
    align-items: center;
}
.main-nav .submenu-toggle {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin-left: 2px;
    color: inherit;
    cursor: pointer;
    pointer-events: none; /* desktop opens on hover/focus */
}
.main-nav .submenu-toggle .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}
.main-nav .has-submenu:hover .submenu-toggle .material-symbols-outlined,
.main-nav .has-submenu:focus-within .submenu-toggle .material-symbols-outlined {
    transform: rotate(180deg);
}
.main-nav .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(1, 15, 102, 0.10);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1000;
}
.main-nav .has-submenu:hover > .submenu,
.main-nav .has-submenu:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-nav .submenu .nav-item { border: none; }
.main-nav .submenu .submenu-link {
    padding: 10px 12px;
    border-radius: var(--radius);
    border-bottom: none;
    white-space: nowrap;
}
.main-nav .submenu .submenu-link:hover { background: var(--surface-container); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.trade-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
    padding: 12px 24px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.trade-login-link:hover {
    background: var(--primary);
    color: var(--on-primary);
}

.header-cart {
    position: relative;
    color: var(--primary);
    display: flex;
    align-items: center;
}
.header-cart:hover { color: var(--secondary); }

.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--secondary);
    color: var(--on-primary);
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
.cart-count--empty { display: none; }
/* Brief pop when the count changes after an AJAX add. */
.cart-count.is-bumped { animation: cart-count-pop 0.35s ease; }
@keyframes cart-count-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* header icon buttons (search, account) */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    transition: color 0.2s ease;
}
.header-icon-btn .material-symbols-outlined { font-size: 24px; }
.header-icon-btn:hover { color: var(--secondary); }

/* mobile toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}
.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--primary);
    transition: all 0.3s ease;
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* mobile nav */
.mobile-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface-container-lowest);
    padding: 32px var(--margin-mobile);
    overflow-y: auto;
    /* Sits just under .site-header (z-index 1000) on purpose: the header must
       paint OVER the top edge of this panel so the two meet with no seam. */
    z-index: 999;
}
.mobile-nav.is-open { display: block; }

/* ---- Scroll lock + header pinning while the mobile menu is open -------------
   Two things have to hold at ANY scroll position: the page must not move behind
   the menu, and the band above the menu (0 → --header-height) must always be
   painted by the header.

   Why it's done this way:
   • `overflow: hidden` on <html> alone is not enough. It locks the page in
     desktop browsers but iOS Safari ignores it for touch scrolling, so on a real
     iPhone the page kept moving behind the open menu.
   • The lock that DOES hold on iOS is `position: fixed` on <body> with the
     scroll offset preserved in `top` (main.js handles the offset). But that
     takes <body> out of flow, which breaks `position: sticky` — and a sticky
     header that stops sticking is exactly what left the page showing through
     the top of the menu.
   • So while the menu is open the header is switched to `position: fixed`,
     which is immune to both: it paints at the top of the viewport regardless of
     scroll position, ancestor overflow or body positioning.

   The !important on overflow answers a plugin's own
   `html { overflow-y: scroll !important }`; without it the desktop half of the
   lock silently does nothing. */
html.mobile-nav-open {
    overflow: hidden !important;
}
html.mobile-nav-open body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    /* `top` is set inline by main.js to -<scrollY>px so the page stays visually
       where the user left it, and is restored on close. */
}
html.mobile-nav-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
/* The admin bar keeps its offset when the header is pinned. */
body.admin-bar.is-nav-open .site-header,
html.mobile-nav-open body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 600px) {
    html.mobile-nav-open body.admin-bar .site-header { top: 0; }
}
/* Header leaves the flow above, so hold its space to stop the page jumping by
   --header-height as the menu opens and closes. */
html.mobile-nav-open body { padding-top: var(--header-height); }

/* Belt-and-braces: the menu is a phone-only control, so never let it linger if
   the viewport grows past the breakpoint (e.g. rotating a tablet) — the
   hamburger that closes it is itself hidden above 768px. main.js also releases
   the scroll lock on resize so the page can never be left unscrollable. */
@media (min-width: 769px) {
    .mobile-nav,
    .mobile-nav.is-open { display: none; }
}
.mobile-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mobile-nav-menu > .nav-item { border-bottom: 1px solid var(--outline-variant); }
.mobile-nav-menu .nav-link {
    padding: 16px 0;
    font-size: 16px;
    border-bottom: none;
}

/* ---- Mobile submenu ---- */
.mobile-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mobile-nav .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
}
.mobile-nav .submenu-toggle .material-symbols-outlined {
    transition: transform 0.2s ease;
}
.mobile-nav .has-submenu.is-open .submenu-toggle .material-symbols-outlined {
    transform: rotate(180deg);
}
.mobile-nav .submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 16px;
    display: none;
}
.mobile-nav .has-submenu.is-open .submenu { display: block; }
.mobile-nav .submenu .nav-item { border: none; }
.mobile-nav .submenu .submenu-link {
    padding: 12px 0;
    font-size: 15px;
}
.mobile-nav-actions {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mobile-nav-actions .trade-login-link {
    text-align: center;
    padding: 14px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
}

/* ========== FOOTER ========== */
.site-footer {
    background: var(--primary);
    color: var(--on-primary);
}

.footer-main { padding: 80px 0 0; }

.footer-inner {
    /* Full-bleed footer: content spans the viewport (gutter padding only),
       rather than being capped at --max-width like the rest of the site.
       Five columns flow left-to-right in HTML order (brand, nav, tools, hq,
       newsletter); the brand and newsletter get a little extra width because
       they carry the most content. */
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--margin-desktop);
    display: grid;
    /* minmax(0, …) rather than a bare `fr`: an `fr` track has an automatic
       minimum of min-content, so one stubborn child (the newsletter input +
       button row) was forcing every column wider than the viewport and
       giving the whole page a horizontal scrollbar on small phones. */
    grid-template-columns:
        minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr)
        minmax(0, 1.2fr) minmax(0, 1.5fr);
    gap: 48px var(--gutter);
    align-items: start;
}

/* Footer columns must be allowed to shrink inside their tracks. */
.footer-col { min-width: 0; }

.footer-col-brand { display: flex; flex-direction: column; }

.site-footer .footer-logo img {
    height: 64px;
    width: auto;
    margin-bottom: 24px;
    filter: brightness(0) invert(1);
}

.footer-tagline {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--on-primary);
    margin-bottom: 16px;
}

.footer-description {
    font-size: 16px;
    line-height: 24px;
    color: var(--primary-fixed-dim);
    margin-bottom: 28px;
    max-width: 340px;
}

.footer-social { display: flex; gap: 12px; margin-top: auto; }

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(188, 195, 255, 0.3);
    border-radius: 50%;
    color: var(--on-primary);
    transition: all 0.2s ease;
}
.social-icon:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.footer-heading {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--secondary-fixed);
    margin-bottom: 24px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.footer-links a {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--primary-fixed-dim);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.footer-links a:hover { color: var(--on-primary); }
.footer-links .material-symbols-outlined { font-size: 20px; color: var(--secondary-fixed-dim); }

/* footer navigation (top-level links only) */
.footer-nav-list .footer-nav-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--primary-fixed-dim);
    display: inline-flex;
}

/* footer newsletter signup */
.footer-newsletter-text {
    font-size: 14px;
    line-height: 22px;
    color: var(--primary-fixed-dim);
    margin: -8px 0 18px;
    max-width: 460px;
}
.footer-newsletter-form {
    display: flex;
    /* Wrap so the Subscribe button drops below the field on narrow screens
       instead of forcing the footer (and with it the page) wider than the
       viewport. */
    flex-wrap: wrap;
    gap: 12px;
    max-width: 480px;
}
.footer-newsletter-form input[type="email"] {
    /* flex-basis 0 (not auto) so the field's intrinsic size never contributes
       to the form's min-content width. */
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--on-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(188, 195, 255, 0.3);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease;
}
.footer-newsletter-form input[type="email"]::placeholder { color: var(--primary-fixed-dim); }
.footer-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--secondary-fixed);
}
.footer-newsletter-form .btn { flex: 0 0 auto; height: 48px; max-width: 100%; }

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 22px;
    color: var(--primary-fixed-dim);
}
.footer-contact-list .material-symbols-outlined {
    font-size: 20px;
    color: var(--secondary-fixed-dim);
    flex-shrink: 0;
    margin-top: 2px;
}
.footer-contact-list a { color: var(--primary-fixed-dim); }
.footer-contact-list a:hover { color: var(--on-primary); }

.footer-bottom {
    border-top: 1px solid rgba(188, 195, 255, 0.1);
    margin-top: 64px;
}
.footer-bottom-inner {
    max-width: none;
    margin: 0 auto;
    padding: 40px var(--margin-desktop);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-copyright {
    font-size: 14px;
    color: var(--primary-fixed-dim);
}
.footer-legal { display: flex; gap: 28px; }
.footer-legal a {
    font-size: 14px;
    color: var(--primary-fixed-dim);
}
.footer-legal a:hover { color: var(--on-primary); }
.footer-accredited {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-fixed-dim);
}
.footer-accredited .material-symbols-outlined { font-size: 20px; }

/* ========== MAIN ========== */
/* Sticky footer.
   This replaces `.site-main { min-height: calc(100vh - var(--header-height) -
   200px) }`, which tried to push the footer down by guessing its height. The
   guess was wrong by a wide margin — the footer is ~570px on desktop and ~1490px
   on mobile, not 200px — so on short pages main reserved the wrong amount of
   space and the page ended up taller or shorter than intended. Letting main
   absorb the leftover space measures the footer instead of guessing, so the
   footer always finishes exactly at the bottom with no leftover strip, whatever
   the page length or footer height.

   `dvh` tracks mobile browser chrome (the collapsing URL bar), which `vh` does
   not; the `vh` line above it is the fallback for anything without dvh support.
   Fixed/absolutely-positioned children (the intro overlay, trade modal, search
   overlay) are not flex items, so the flex context changes nothing for them. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.site-main { flex: 1 0 auto; }
.site-header,
.site-footer { flex-shrink: 0; }

.content-area { padding: var(--section-pad) 0; }
.content-area .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--margin-desktop);
}
.content-area .entry-content { font-size: 16px; line-height: 1.7; }
.content-area .entry-content p { margin-bottom: 1.2em; }

/* ========== SHARED SECTION ========== */
.section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--margin-desktop);
}

.section-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 8px;
}

.section-title {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary);
}
.section-title.centered { text-align: center; }

/* ========== HERO ========== */
.hero {
    position: relative;
    height: 80vh;
    min-height: 560px;
    display: flex;
    align-items: center;
    background-color: var(--primary);
    /* Gradient fallback only — the hero photo is applied inline from
       mourne_hero_image_url() (Customizer override or bundled default) so the
       client can change it without touching CSS. */
    background-image: linear-gradient(120deg, #010f66 0%, #1e2a7a 55%, #0062a2 100%);
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 15, 102, 0.2);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--margin-desktop);
    width: 100%;
}

.hero-content {
    max-width: 42rem;
    background: rgba(1, 15, 102, 0.1);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 32px;
    border-left: 4px solid var(--secondary-container);
}

.hero-title {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--on-primary);
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    max-width: 32rem;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ========== TRUST BAR ========== */
.trust-bar {
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--outline-variant);
}

.trust-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 48px var(--margin-desktop);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
}
.trust-item + .trust-item {
    border-left: 1px solid var(--outline-variant);
    padding-left: 32px;
}

.trust-icon .material-symbols-outlined {
    font-size: 36px;
    color: var(--secondary);
}

.trust-text { display: flex; flex-direction: column; gap: 2px; }
.trust-text strong {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
}
.trust-text span {
    font-size: 16px;
    color: var(--on-surface-variant);
}

/* ========== BEST SELLERS ========== */
.best-sellers {
    padding: var(--section-pad) 0;
    background: var(--surface);
    border-top: 1px solid var(--outline-variant);
    border-bottom: 1px solid var(--outline-variant);
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
}

.section-head--center {
    justify-content: center;
    text-align: center;
}

.home-video {
    padding: var(--section-pad) 0;
    background: var(--surface);
    border-top: 1px solid var(--outline-variant);
    border-bottom: 1px solid var(--outline-variant);
}

.home-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--primary);
    box-shadow: 0 24px 60px rgba(1, 15, 102, 0.18);
}

.home-video-frame iframe,
.home-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.home-video-frame video {
    object-fit: cover;
    background: var(--primary);
}

.view-all-link {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
    padding-bottom: 4px;
}
.view-all-link:hover { color: var(--secondary); border-color: var(--secondary); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(1, 15, 102, 0.10);
    border-color: var(--primary-fixed-dim);
}
@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-image img { transition: none; }
    .product-card:hover { transform: none; }
}

.product-image {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--surface-container);
    overflow: hidden;
}
.product-image img,
.product-image .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.product-card:hover .product-image img { transform: scale(1.05); }
.placeholder-img {
    background: linear-gradient(135deg, var(--surface-container) 0%, var(--surface-container-low) 100%);
}

.wishlist-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary);
    transition: all 0.2s ease;
}
.wishlist-btn:hover { background: var(--on-primary); color: var(--secondary); }

.product-info { padding: 24px; }

/* Scoped to .product-card on purpose.
   `.product-name` and `.product-price` are also WooCommerce's own cell classes
   on the cart and checkout tables (<td class="product-name">, <td
   class="product-price">). While these rules were unscoped they leaked into
   those tables and set the line-item name in 24px Barlow Condensed — which is
   why the product name in checkout's "Your order" dwarfed everything around it,
   and why the mobile cart rows were so tall. The theme only ever uses these
   classes inside a .product-card (shop archive, single-product related items and
   the homepage Best Sellers), so scoping them costs nothing and stops the
   collision at source rather than undoing it again further down the file. */
.product-card .product-name {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}
.product-card .product-name a { color: inherit; }
.product-card .product-name a:hover { color: var(--secondary); }

.product-card .product-price {
    font-size: 16px;
    color: var(--on-surface-variant);
    margin-bottom: 16px;
}
.product-card .product-price .price-unit { font-size: 14px; }

.product-add { width: 100%; }

/* ========== TOOLS ========== */
.tools-section { padding: var(--section-pad) 0; }

.tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
}

.tool-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    padding: 40px;
    transition: border-color 0.2s ease;
}
.tool-card:hover { border-color: var(--secondary); }

.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--surface-container);
    color: var(--secondary);
    margin-bottom: 24px;
}
.tool-icon .material-symbols-outlined { font-size: 32px; }

.tool-title {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 16px;
}

.tool-desc {
    font-size: 16px;
    line-height: 24px;
    color: var(--on-surface-variant);
    margin-bottom: 32px;
    max-width: 24rem;
}

/* ========== PREMIUM INSTALLATIONS ========== */
.installations {
    padding: var(--section-pad) 0;
    background: var(--surface-container-low);
}

.installations .section-title { margin-bottom: 64px; }

.installations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.installation-item {
    position: relative;
    display: block;
    height: 384px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    /* Tiles link to their project when sourced from the Projects CPT — keep the
       card chrome neutral so the caption never picks up link styling. */
    color: inherit;
    text-decoration: none;
}

.installation-img {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-container);
    transition: transform 0.5s ease;
}
.installation-item:hover .installation-img { transform: scale(1.1); }

.installation-img.install-1 { background-image: url('../images/install-1.jpg'), linear-gradient(135deg, #1e2a7a 0%, #0062a2 100%); }
.installation-img.install-2 { background-image: url('../images/install-2.jpg'), linear-gradient(135deg, #0062a2 0%, #6db5ff 100%); }
.installation-img.install-3 { background-image: url('../images/install-3.jpg'), linear-gradient(135deg, #010f66 0%, #333f8e 100%); }

.installation-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 15, 102, 0.4);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    padding: 32px;
    transition: opacity 0.3s ease;
}
.installation-item:hover .installation-overlay { opacity: 1; }

.installation-caption {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--on-primary);
}

/* ========== HOME INSTAGRAM ========== */
.home-instagram {
    padding: var(--section-pad) 0;
    background: var(--surface);
}
.home-instagram-feed { margin-bottom: 32px; }
.home-instagram-cta { text-align: center; }
.home-instagram-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ========== TESTIMONIALS ========== */
.testimonials {
    padding: var(--section-pad) 0;
    background: var(--surface-container);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}

.testimonial-card {
    position: relative;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.quote-mark {
    position: absolute;
    top: -16px;
    left: -16px;
    font-family: var(--font-display);
    font-size: 96px;
    line-height: 1;
    font-weight: 700;
    color: var(--secondary-container);
    opacity: 0.3;
    pointer-events: none;
}

.testimonial-quote {
    position: relative;
    font-size: 18px;
    line-height: 28px;
    font-style: italic;
    color: var(--on-surface);
    margin-bottom: 32px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}
.testimonial-slide:nth-child(2) .author-avatar { background: var(--secondary); }
.testimonial-slide:nth-child(3) .author-avatar { background: var(--secondary-container); color: var(--primary); }
.testimonial-slide:nth-child(4) .author-avatar { background: var(--primary-container); }
.testimonial-slide:nth-child(5) .author-avatar { background: var(--secondary); }

.author-meta { display: flex; flex-direction: column; gap: 2px; }
.author-meta strong {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
}
.author-meta span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
}

/* ---- Testimonials carousel ---- */
.testimonial-carousel {
    position: relative;
    max-width: 1180px;
    margin: 48px auto 0;
}
.testimonial-viewport {
    overflow: hidden;
}
.testimonial-track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.5s ease;
}
/* Show three reviews per view on desktop, two on tablet, one on mobile.
   main.js reads these rendered widths to know how many slides are visible. */
.testimonial-slide {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    min-width: 0;
    box-sizing: border-box;
    padding: 20px 12px;
}
.testimonial-slide .testimonial-card {
    height: 100%;
}
.testimonial-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 18px;
    color: #f5a623;
}
.testimonial-stars .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 24px;
}
.carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--primary);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(1, 15, 102, 0.10);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.carousel-arrow:hover {
    background: var(--primary);
    color: var(--on-primary);
    transform: translateY(-1px);
}
.carousel-arrow:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.carousel-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}
.carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--outline-variant);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot:hover { background: var(--secondary); }
.carousel-dot.is-active {
    background: var(--primary);
    transform: scale(1.35);
}
@media (max-width: 980px) {
    .testimonial-slide { flex-basis: 50%; max-width: 50%; }
}
@media (max-width: 640px) {
    .testimonial-slide { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 540px) {
    .testimonial-slide .testimonial-card { padding: 32px 24px; }
    .testimonial-quote { font-size: 16px; }
}

/* ========== CTA BAND ========== */
.cta-band {
    background: var(--primary-container);
    padding: 80px 0;
}

.cta-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--margin-desktop);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.cta-title {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--on-primary);
}

.cta-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   SHOP — Archive / Product Listing
   ========================================================================== */
.shop-wrap { padding: 48px 0 96px; }

.shop-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-bottom: 40px;
}
.shop-breadcrumb a { color: var(--on-surface-variant); }
.shop-breadcrumb a:hover { color: var(--primary); }
.shop-breadcrumb .material-symbols-outlined { font-size: 16px; }
.shop-breadcrumb-current { color: var(--primary); }

.shop-page-header { margin-bottom: 48px; }
.shop-title {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}
.shop-subtitle {
    font-size: 18px;
    line-height: 28px;
    color: var(--on-surface-variant);
    max-width: 720px;
}

.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
}

/* ---- Sidebar ---- */
.shop-sidebar { position: sticky; top: calc(var(--header-height) + 24px); }
.shop-filters {
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    padding: 28px;
    border-radius: var(--radius-lg);
}
.filter-group { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--outline-variant); }
.filter-group:last-of-type { border-bottom: none; }
.filter-heading {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    margin-bottom: 16px;
}
.filter-options { display: flex; flex-direction: column; gap: 12px; }
.filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    color: var(--on-surface);
}
.filter-check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.filter-check span { flex: 1; }
.filter-count { font-style: normal; font-size: 13px; color: var(--on-surface-variant); }
.filter-check-strong span { font-weight: 600; }

.filter-price { display: flex; align-items: center; gap: 8px; }
.filter-price input {
    width: 100%;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-surface);
    background: var(--surface);
}
.filter-price input:focus { outline: none; border-color: var(--primary); }
.filter-price-dash { color: var(--on-surface-variant); }

.filter-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--on-surface-variant);
}
.filter-clear:hover { color: var(--primary); }
.filter-clear .material-symbols-outlined { font-size: 18px; }

/* ---- Topbar ---- */
.shop-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--outline-variant);
}
.shop-topbar .woocommerce-result-count { margin: 0; color: var(--on-surface-variant); font-size: 15px; }
.shop-topbar .woocommerce-ordering select {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    cursor: pointer;
}

/* ---- Shop cards ---- */
.shop-grid { grid-template-columns: repeat(3, 1fr); }
.shop-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    /* Keep clear of the wishlist button (16px right + 40px wide + 16px gap)
       so the category label never runs under the heart on narrow cards. */
    max-width: calc(100% - 72px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--secondary-container);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius);
}
.shop-card-stock {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: var(--on-surface);
    color: var(--surface);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius);
}
.shop-card--out .shop-card-image img { opacity: 0.6; }
.shop-card-info { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.shop-card-desc { font-size: 14px; color: var(--on-surface-variant); margin-bottom: 16px; }
.shop-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}
.shop-card-price { font-size: 18px; font-weight: 600; color: var(--primary); }
.shop-card-price .price-unit { font-size: 13px; font-weight: 400; color: var(--on-surface-variant); }
.shop-card-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius);
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.shop-card-cart:hover { background: var(--secondary); }
.shop-card-cart .material-symbols-outlined { font-size: 20px; }

/* Sold out: the control is a real <button disabled>, so it is already inert to
   mouse, touch and keyboard — this styling just makes that obvious at a glance.
   `not-allowed` on hover reinforces it for pointer users. */
.shop-card-cart--disabled,
.shop-card-cart[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    border: 0;
    /* Keep the shape identical to the live control so the card layout doesn't
       shift between in-stock and out-of-stock products. */
    font: inherit;
}
.shop-card-cart--disabled:hover,
.shop-card-cart[disabled]:hover {
    background: var(--primary);
}
/* The Best Sellers variant is a full-width .btn, so neutralise the button
   hover/transform it would otherwise inherit. */
.btn.shop-card-cart--disabled:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    transform: none;
}

/* Loading: spinner in place of the cart icon while the AJAX add runs. */
.shop-card-cart.loading { color: transparent; pointer-events: none; }
.shop-card-cart.loading .material-symbols-outlined { visibility: hidden; }
.shop-card-cart.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: shop-card-spin 0.6s linear infinite;
}
.shop-card-cart { position: relative; }
@keyframes shop-card-spin { to { transform: rotate(360deg); } }

/* Added: button flips to a tick so it's obvious the item went in. */
.shop-card-cart.added { background: var(--secondary); }
.shop-card-cart.added .material-symbols-outlined { display: none; }
.shop-card-cart.added::before {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    line-height: 1;
}

/* "View cart" link WooCommerce appends after a successful add — drop it onto
   its own full-width line styled as a clean secondary button. */
.shop-card-foot .added_to_cart {
    flex: 1 0 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    padding: 11px 16px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest);
    color: var(--primary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.shop-card-foot .added_to_cart::before {
    content: 'shopping_cart_checkout';
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
}
.shop-card-foot .added_to_cart:hover,
.shop-card-foot .added_to_cart:focus {
    background: var(--primary);
    color: var(--on-primary);
}

.shop-empty { font-size: 18px; color: var(--on-surface-variant); padding: 48px 0; }

.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination { margin-top: 56px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul {
    display: inline-flex;
    gap: 8px;
    list-style: none;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li,
.woocommerce-pagination ul li { margin: 0; border: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    width: auto;
    height: 48px;
    padding: 0 8px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    color: var(--on-surface-variant);
    background: var(--surface-container-lowest);
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus,
.woocommerce-pagination a.page-numbers:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface-container-lowest);
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current,
.woocommerce-pagination span.page-numbers.current {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots,
.woocommerce-pagination span.page-numbers.dots {
    border: 0;
    min-width: auto;
    background: transparent;
    color: var(--on-surface-variant);
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.prev,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.next,
.woocommerce-pagination a.page-numbers.prev,
.woocommerce-pagination a.page-numbers.next { font-size: 0; }
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.prev::before,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.next::before,
.woocommerce-pagination a.page-numbers.prev::before,
.woocommerce-pagination a.page-numbers.next::before {
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    line-height: 1;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.prev::before,
.woocommerce-pagination a.page-numbers.prev::before { content: 'chevron_left'; }
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.next::before,
.woocommerce-pagination a.page-numbers.next::before { content: 'chevron_right'; }

/* ==========================================================================
   CART / CHECKOUT BLOCK BUTTONS
   Override WooCommerce Blocks' default charcoal buttons to match the theme's
   navy primary. Covers "Proceed to Checkout" and "Place Order".
   ========================================================================== */
.wc-block-components-button.wp-element-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button.contained {
    background-color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--on-primary) !important;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none !important;
    transition: all 0.2s ease;
}
.wc-block-components-button.wp-element-button.contained .wc-block-components-button__text,
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
    color: var(--on-primary) !important;
    text-decoration: none;
}
.wc-block-components-button.wp-element-button.contained:hover,
.wc-block-components-button.wp-element-button.contained:focus,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--on-primary) !important;
}

/* ==========================================================================
   CART & CHECKOUT — classic (shortcode) pages
   Brand styling for the default WooCommerce cart/checkout markup, which ships
   unstyled with the theme otherwise. Covers tables, totals, coupon, quantity
   selectors, form fields, order review and the primary action buttons.
   ========================================================================== */

/* ---- Page shell ---- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 48px var(--margin-desktop) 80px;
}
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    font-size: 44px;
    line-height: 1.05;
    margin: 0 0 28px;
}

/* ---- Primary buttons (classic) ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button {
    background-color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    color: var(--on-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 14px 26px;
    box-shadow: none;
    transition: all 0.2s ease;
    line-height: 1.2;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce #place_order:focus,
.woocommerce .checkout-button:focus {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--on-primary);
}
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Cart table ---- */
.woocommerce table.shop_table {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 24px;
}
.woocommerce table.shop_table th {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    padding: 16px 18px;
    border-bottom: 1px solid var(--outline-variant);
}
.woocommerce table.shop_table td {
    padding: 18px;
    border-top: 1px solid var(--outline-variant);
    color: var(--on-surface);
    vertical-align: middle;
}
.woocommerce table.shop_table .product-name a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.woocommerce table.shop_table .product-name a:hover { color: var(--secondary); }
.woocommerce table.shop_table img { width: 64px; height: auto; border-radius: var(--radius); }
.woocommerce a.remove {
    color: var(--error) !important;
    border: 1px solid var(--outline-variant);
    font-weight: 400;
    line-height: 22px;
    width: 24px;
    height: 24px;
}
.woocommerce a.remove:hover {
    background: var(--error) !important;
    color: #fff !important;
}

/* ---- Quantity selector ---- */
.woocommerce .quantity .qty {
    height: 44px;
    width: 72px;
    padding: 0 8px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container-lowest);
    font-family: var(--font-body);
    color: var(--on-surface);
    text-align: center;
}

/* ---- Coupon + actions row ---- */
.woocommerce .cart .actions .coupon .input-text {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container-lowest);
    font-family: var(--font-body);
}

/* ---- Cart totals + order review ---- */
.woocommerce .cart_totals,
.woocommerce .cart-collaterals .cart_totals {
    float: none;
    width: 100%;
}
.woocommerce .cart_totals h2,
.woocommerce #order_review_heading {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    font-size: 26px;
    margin: 0 0 16px;
}
.woocommerce .cart_totals table.shop_table,
.woocommerce #order_review table.shop_table {
    background: var(--surface-container-low);
}
.woocommerce .cart_totals .order-total .amount,
.woocommerce #order_review .order-total .amount {
    color: var(--primary);
    font-weight: 700;
    font-size: 18px;
}

/* ---- Checkout form fields ---- */
/* Scoped to the WooCommerce content area so it can't recolour the footer's
   <h3 class="footer-heading"> on the checkout page. */
.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    font-size: 26px;
    margin: 0 0 16px;
}
.woocommerce form .form-row label {
    font-weight: 600;
    font-size: 14px;
    color: var(--on-surface);
    margin-bottom: 6px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout .woocommerce select,
.woocommerce .select2-container .select2-selection {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container-lowest);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-surface);
    padding: 12px 14px;
    min-height: 46px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-fixed);
}

/* ---- Notices ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
    border-top: 3px solid var(--primary);
    background: var(--surface-container-low);
    border-radius: var(--radius);
    color: var(--on-surface);
}
.woocommerce-message::before { color: var(--primary); }
.woocommerce-error { border-top-color: var(--error); }

/* ---- Order review + payment box (checkout) ---- */
.woocommerce-checkout #payment {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 4px 0 0;
    overflow: hidden;
}
.woocommerce-checkout #payment ul.payment_methods {
    margin: 0;
    padding: 18px 22px;
    border-bottom: 1px solid var(--outline-variant);
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
    margin: 0;
    padding: 8px 0;
    line-height: 1.4;
}
.woocommerce-checkout #payment ul.payment_methods li > label {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
    cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    margin: 0 10px 0 0;
    vertical-align: middle;
}
.woocommerce-checkout #payment ul.payment_methods li img {
    max-height: 24px;
    width: auto;
    margin-left: 8px;
    vertical-align: middle;
}
/* Expanded method panel (card fields, descriptions) */
.woocommerce-checkout #payment div.payment_box {
    background: var(--surface-container-low);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--on-surface-variant);
    padding: 16px 18px;
    margin: 10px 0 2px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box label,
.woocommerce-checkout #payment div.payment_box .form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--on-surface);
}
.woocommerce-checkout #payment div.payment_box p { margin: 0 0 10px; }
/* Terms + place-order row */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #payment .place-order { padding: 18px 22px; }
.woocommerce-checkout #payment .place-order { padding-top: 8px; }
.woocommerce-checkout #payment #place_order { width: 100%; font-size: 15px; padding: 16px 26px; }
/* Coupon / gift-card inputs match the theme's field styling */
.woocommerce-checkout .woocommerce-form-coupon input.input-text,
.woocommerce-checkout .checkout_coupon input.input-text {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container-lowest);
    font-family: var(--font-body);
}

/* ---- Empty cart ---- */
.cart-empty-state {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 24px 64px;
    text-align: center;
}
.cart-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border: 1px solid var(--outline-variant);
    border-radius: 50%;
    background: var(--surface-container-low);
    color: var(--primary);
    font-size: 48px;
    margin-bottom: 24px;
}
.cart-empty-state__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    font-size: 36px;
    line-height: 1.1;
    margin: 0 0 12px;
}
.cart-empty-state__text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--on-surface-variant);
    margin: 0 0 28px;
}
.cart-empty-state__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.cart-empty-state__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---- Checkout: section cards + field normalisation ---- */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 26px 26px 14px;
    margin-bottom: 24px;
}
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #customer_details h3 {
    font-size: 22px;
    margin: 0 0 18px;
}
/* Stack billing/shipping full-width inside the checkout column instead of
   WooCommerce's floated 48% halves. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    float: none;
    width: 100%;
}
/* Catch unthemed inputs injected by payment/gift-card/marketing plugins so
   every field on the page shares the same look. */
.woocommerce-checkout form.checkout input[type="text"],
.woocommerce-checkout form.checkout input[type="email"],
.woocommerce-checkout form.checkout input[type="tel"],
.woocommerce-checkout form.checkout input[type="password"],
.woocommerce-checkout form.checkout input[type="number"] {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container-lowest);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-surface);
    padding: 12px 14px;
    min-height: 46px;
}
/* Headings plugins print between checkout sections (e.g. "Have a gift card?")
   come in as h2/h4/strong — pull them onto the brand scale. */
.woocommerce-checkout form.checkout h2,
.woocommerce-checkout form.checkout h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    font-size: 20px;
    margin: 24px 0 12px;
}
/* Secondary buttons (coupon / gift-card apply) shouldn't dwarf Place Order. */
.woocommerce-checkout form.checkout .button:not(#place_order) {
    width: auto;
    padding: 12px 22px;
    font-size: 13px;
}
.woocommerce-checkout form.checkout label {
    font-family: var(--font-body);
    font-size: 14px;
}

/* ---- Checkout: two-column layout (details left, order right) ---- */
@media (min-width: 1025px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
        column-gap: 40px;
        row-gap: 0;
        align-items: start;
    }
    .woocommerce-checkout form.checkout #customer_details {
        grid-column: 1;
        grid-row: 1 / span 40;
    }
    .woocommerce-checkout form.checkout > *:not(#customer_details) {
        grid-column: 2;
    }
    .woocommerce-checkout form.checkout #order_review_heading { margin-top: 0; }
}

/* ---- Order received (thank-you) ---- */
.woocommerce-order .woocommerce-thankyou-order-received {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.woocommerce-order .woocommerce-thankyou-order-received::before {
    content: 'check_circle';
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-size: 38px;
    color: var(--secondary);
    line-height: 1;
}
.woocommerce-order ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 0;
    list-style: none;
    margin: 0 0 36px;
    padding: 22px 26px;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
}
.woocommerce-order ul.woocommerce-order-overview li {
    flex: 1 1 auto;
    float: none;
    margin: 0;
    padding: 0 26px;
    border-right: 1px solid var(--outline-variant);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}
.woocommerce-order ul.woocommerce-order-overview li:first-child { padding-left: 0; }
.woocommerce-order ul.woocommerce-order-overview li:last-child { border-right: 0; }
.woocommerce-order ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--primary);
}
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-customer-details > h2,
.woocommerce-order .woocommerce-column__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    font-size: 26px;
    margin: 0 0 16px;
}
.woocommerce-order .woocommerce-customer-details address {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest);
    padding: 22px 24px;
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
    color: var(--on-surface);
}
.woocommerce-order > p {
    font-size: 15px;
    color: var(--on-surface-variant);
}

/* ---- My Account: content typography + dashboard quick links ---- */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
}
.woocommerce-MyAccount-content > p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--on-surface);
}
.account-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 28px;
}
.account-quicklink {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.account-quicklink:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(1, 15, 102, 0.08);
}
.account-quicklink .material-symbols-outlined {
    color: var(--primary);
    font-size: 26px;
}
.account-quicklink-label {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--on-surface);
}
/* Addresses endpoint — card the saved billing/shipping blocks */
.woocommerce-MyAccount-content .woocommerce-Address {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest);
    padding: 20px 22px;
    margin-bottom: 16px;
}
.woocommerce-MyAccount-content .woocommerce-Address address {
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
    color: var(--on-surface);
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-size: 20px; margin: 0 0 8px; }
.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary);
    text-decoration: none;
}
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover { color: var(--primary); text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .woocommerce-cart .woocommerce,
    .woocommerce-checkout .woocommerce,
    .woocommerce-cart .entry-content,
    .woocommerce-checkout .entry-content {
        padding: 32px var(--margin-mobile) 56px;
    }
    .woocommerce-order ul.woocommerce-order-overview {
        flex-direction: column;
        gap: 14px;
    }
    .woocommerce-order ul.woocommerce-order-overview li {
        border-right: 0;
        padding: 0;
    }
    .woocommerce-cart .page-title,
    .woocommerce-checkout .page-title,
    .woocommerce-cart .entry-title,
    .woocommerce-checkout .entry-title { font-size: 34px; }
}

/* ==========================================================================
   RETAILERS / STOCKIST FINDER
   ========================================================================== */
.retailers-finder { padding: 56px 0 72px; }

.retailers-head { margin-bottom: 28px; }
.retailers-title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.05;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 8px;
}
.retailers-subtitle {
    font-size: 16px;
    color: var(--on-surface-variant);
    margin: 0;
}

.retailers-panel {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 540px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-container-lowest);
}

/* ---- Sidebar ---- */
.retailers-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--outline-variant);
    min-height: 0;
}
.retailers-sidebar-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0;
    padding: 22px 22px 14px;
}
.retailers-search {
    display: flex;
    gap: 8px;
    padding: 0 22px 18px;
    border-bottom: 1px solid var(--outline-variant);
}
.retailers-search-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--on-surface);
}
.retailers-search-input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
}
.retailers-search-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--on-primary);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.retailers-search-btn:hover { background: var(--secondary); }
.retailers-search-btn .material-symbols-outlined { font-size: 22px; }

.retailers-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    max-height: 496px;
}
.retailer-item {
    padding: 16px 22px;
    border-bottom: 1px solid var(--outline-variant);
    transition: background-color 0.15s ease;
}
.retailer-item.is-active,
.retailer-item:hover { background: var(--surface-container); }
.retailer-item--flagship { background: rgba(1, 15, 102, 0.03); }

.retailer-item-main {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.retailer-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.retailer-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
}
.retailer-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary);
    background: rgba(0, 98, 162, 0.12);
    padding: 3px 8px;
    border-radius: 999px;
}
.retailer-address {
    display: block;
    font-size: 13px;
    color: var(--on-surface-variant);
    line-height: 1.4;
}
.retailer-actions {
    display: flex;
    gap: 18px;
    margin-top: 10px;
}
.retailer-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary);
    text-decoration: none;
}
.retailer-link:hover { color: var(--primary); text-decoration: underline; }
.retailers-empty {
    padding: 22px;
    font-size: 14px;
    color: var(--on-surface-variant);
}

/* ---- Map ---- */
.retailers-map-wrap {
    position: relative;
    min-height: 540px;
}
.retailers-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--surface-container);
    z-index: 1;
}
.retailers-noscript {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: var(--on-surface-variant);
}
.retailers-region-card {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 210px;
    padding: 16px 18px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(1, 15, 102, 0.16);
    pointer-events: none;
}
.retailers-region-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}
.retailers-region-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #19c37d;
}
.retailers-region-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}
.retailers-region-desc {
    font-size: 12px;
    color: var(--on-surface-variant);
    line-height: 1.4;
}

/* ---- Custom brand pins ---- */
.retailer-pin { background: transparent; border: 0; }
.retailer-pin-dot {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background: var(--secondary);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.retailer-pin-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.retailer-pin--flagship .retailer-pin-dot {
    width: 28px;
    height: 28px;
    background: var(--primary);
}

/* ---- Leaflet control + popup theming ---- */
.retailers-map-wrap .leaflet-bar a,
.retailers-locate {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--outline-variant);
    cursor: pointer;
    font-weight: 700;
}
.retailers-map-wrap .leaflet-bar a:hover,
.retailers-locate:hover { background: var(--surface-container); }
.retailers-locate {
    margin-top: 8px;
    border-radius: var(--radius);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.retailers-locate .material-symbols-outlined { font-size: 20px; }
.retailer-pop { display: block; min-width: 170px; }
.retailer-pop-name {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--primary);
    margin-bottom: 2px;
}
.retailer-pop-addr {
    display: block;
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-bottom: 8px;
}
.retailer-pop-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary);
}

/* ---- Become a stockist CTA band ---- */
.retailers-cta { background: var(--primary); color: var(--on-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.retailers-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-top: 56px;
    padding-bottom: 56px;
}
.retailers-cta-text { max-width: 560px; }
.retailers-cta-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--on-primary);
    margin: 0 0 10px;
}
.retailers-cta-text p { margin: 0; color: rgba(255, 255, 255, 0.82); }
.btn-light {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
}
.btn-light:hover { background: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.88); }
.retailers-cta-btn { flex: 0 0 auto; }

@media (max-width: 880px) {
    .retailers-panel { grid-template-columns: 1fr; min-height: 0; }
    .retailers-sidebar { border-right: 0; border-bottom: 1px solid var(--outline-variant); }
    .retailers-list { max-height: 320px; }
    .retailers-map-wrap { min-height: 400px; }
    .retailers-cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================================
   TRADE LOGIN (My Account)
   ========================================================================== */
/* Centre the account form inside the prose wrapper and neutralise inherited
   prose styles so the branded card controls its own look. */
.woocommerce-account .entry-content .mourne-trade-login {
    display: flex;
    justify-content: center;
    margin: 8px 0 16px;
}
.woocommerce-account .entry-content .mourne-trade-login--cols {
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

.mourne-trade-login__card {
    width: 100%;
    max-width: 460px;
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 40px 36px 36px;
    box-shadow: 0 18px 40px -28px rgba(1, 15, 102, 0.45);
}
.mourne-trade-login--cols .mourne-trade-login__card { flex: 1 1 360px; max-width: none; }

.mourne-trade-login__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 14px;
}
.mourne-trade-login__eyebrow .material-symbols-outlined { font-size: 18px; }

.mourne-trade-login__title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.1;
    color: var(--primary);
}
.mourne-trade-login__intro {
    margin: 0 0 26px;
    color: var(--on-surface-variant);
    font-size: 15px;
    line-height: 1.5;
}

.woocommerce-account .mourne-trade-login form.woocommerce-form-login,
.woocommerce-account .mourne-trade-login form.woocommerce-form-register {
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.mourne-trade-login .woocommerce-form-row { margin: 0 0 18px; }
.mourne-trade-login label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--on-surface);
}
.mourne-trade-login .woocommerce-form-row .required { color: var(--secondary); border: 0; }

.woocommerce-account .mourne-trade-login .woocommerce-form-row input.input-text,
.woocommerce-account .mourne-trade-login input[type="text"],
.woocommerce-account .mourne-trade-login input[type="password"],
.woocommerce-account .mourne-trade-login input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-surface);
    background: #fff;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce-account .mourne-trade-login .woocommerce-form-row input.input-text:focus,
.woocommerce-account .mourne-trade-login input[type="text"]:focus,
.woocommerce-account .mourne-trade-login input[type="password"]:focus,
.woocommerce-account .mourne-trade-login input[type="email"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 15, 102, 0.12);
}

.mourne-trade-login__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 22px;
    flex-wrap: wrap;
}
.mourne-trade-login__actions .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--on-surface-variant);
}
.mourne-trade-login__actions input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}
.mourne-trade-login__lost {
    font-size: 14px;
    color: var(--secondary);
    text-decoration: none;
}
.mourne-trade-login__lost:hover { text-decoration: underline; }

/* Button — brand navy, full width. Specificity beats WooCommerce defaults. */
.woocommerce-account .mourne-trade-login button.woocommerce-form-login__submit,
.woocommerce-account .mourne-trade-login button.woocommerce-form-register__submit {
    width: 100%;
    padding: 14px 24px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-primary);
    background: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.woocommerce-account .mourne-trade-login button.woocommerce-form-login__submit:hover,
.woocommerce-account .mourne-trade-login button.woocommerce-form-register__submit:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.mourne-trade-login__signup {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--outline-variant);
    font-size: 14px;
    color: var(--on-surface-variant);
    text-align: center;
}
.mourne-trade-login__signup a {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: none;
}
.mourne-trade-login__signup a:hover { text-decoration: underline; }

@media (max-width: 540px) {
    .mourne-trade-login__card { padding: 30px 22px 26px; }
    .mourne-trade-login__title { font-size: 26px; }
}

/* ==========================================================================
   MY ACCOUNT — logged-in dashboard
   Brand styling for the signed-in WooCommerce account area: a navy sidebar of
   navigation tabs beside a card content panel (dashboard, orders, addresses,
   account details). The login/register screen is styled above.
   ========================================================================== */

/* Dashboard layout — a flex row of [nav | content]. Using flex (not a :has()
   grid) keeps it robust across browsers, and the more specific child selectors
   below override WooCommerce's default float widths (30% / 68%) that otherwise
   collapse the layout. The logged-out login card stays a single full-width row. */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    margin: 8px 0 24px;
}
/* Full width by default: notices, the login/register card, lost-password form. */
.woocommerce-account .woocommerce > * { flex: 1 1 100%; min-width: 0; }
/* The signed-in dashboard: fixed sidebar + flexible content panel. */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
    flex: 0 0 250px;
    float: none;
    width: auto;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
    flex: 1 1 320px;
    float: none;
    width: auto;
}

/* ---- Sidebar navigation ---- */
.woocommerce-MyAccount-navigation {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: 0 18px 40px -32px rgba(1, 15, 102, 0.4);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
    background: var(--surface-container-low);
    color: var(--primary);
}
.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--primary);
    color: var(--on-primary);
}
/* Material icon per tab (ligature font already loaded site-wide). */
.woocommerce-MyAccount-navigation li a::before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-size: 20px;
    line-height: 1;
    content: 'chevron_right';
}
.woocommerce-MyAccount-navigation-link--dashboard a::before { content: 'dashboard'; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: 'receipt_long'; }
.woocommerce-MyAccount-navigation-link--downloads a::before { content: 'download'; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: 'home_pin'; }
.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: 'credit_card'; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: 'manage_accounts'; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: 'logout'; }

/* ---- Content panel ---- */
.woocommerce-MyAccount-content {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 32px 32px 36px;
    box-shadow: 0 18px 40px -32px rgba(1, 15, 102, 0.4);
    color: var(--on-surface);
}
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content p { color: var(--on-surface-variant); line-height: 1.6; }
.woocommerce-MyAccount-content a:not(.button) { color: var(--secondary); font-weight: 600; text-decoration: none; }
.woocommerce-MyAccount-content a:not(.button):hover { text-decoration: underline; }
.woocommerce-MyAccount-content mark { background: var(--secondary-fixed); color: var(--primary); padding: 0 4px; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 14px;
}

/* ---- Orders / downloads tables ---- */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 0 0 24px;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    padding: 14px 16px;
    border-bottom: 1px solid var(--outline-variant);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    padding: 16px;
    border-top: 1px solid var(--outline-variant);
    color: var(--on-surface);
    vertical-align: middle;
}

/* ---- Account / address forms ---- */
.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-form-row label,
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-address-fields label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--on-surface);
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 15, 102, 0.12);
}

/* ---- Responsive: stack sidebar above content ---- */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce { gap: 20px; }
    .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce > .woocommerce-MyAccount-content { flex: 1 1 100%; }
    .woocommerce-MyAccount-content { padding: 24px 20px 28px; }
}

/* ==========================================================================
   REQUEST A QUOTE
   ========================================================================== */
.quote-hero {
    position: relative;
    padding: 84px 0 76px;
    background: linear-gradient(120deg, var(--primary) 0%, #00207a 60%, var(--secondary) 140%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.quote-hero--image { background-color: var(--primary); }
/* Featured Image layer. Absolutely filling the hero with object-fit: cover
   reproduces exactly what `background-size: cover` did, but as a real <img> so
   the browser can pick the right file from srcset per viewport. It sits under
   the overlay (z-index 1) and the copy (z-index 2). */
.quote-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.quote-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(1, 15, 102, 0.92) 0%, rgba(1, 15, 102, 0.72) 55%, rgba(1, 15, 102, 0.5) 100%);
    z-index: 1;
}
.quote-hero:not(.quote-hero--image) .quote-hero-overlay { display: none; }
.quote-hero-inner { position: relative; z-index: 2; }
.quote-hero-title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.04;
    color: var(--on-primary);
}
.quote-hero-intro {
    margin: 0;
    max-width: 540px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.quote-main { padding: 56px 0 96px; }
.quote-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
}

/* ---- Form ---- */
.quote-form-col { min-width: 0; }
.quote-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    font-size: 15px;
}
.quote-alert p { margin: 0; }
.quote-alert .material-symbols-outlined { font-size: 22px; flex: 0 0 auto; }
.quote-alert--success { background: rgba(0, 98, 162, 0.08); border: 1px solid rgba(0, 98, 162, 0.3); color: var(--primary); }
.quote-alert--error { background: rgba(186, 26, 26, 0.07); border: 1px solid rgba(186, 26, 26, 0.3); color: #ba1a1a; }

.quote-section { border: 0; padding: 0; margin: 0 0 40px; min-width: 0; }
.quote-step {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0 0 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--outline-variant);
}
.quote-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius);
}
.quote-step-label {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary);
}

.quote-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    margin-bottom: 20px;
}
.quote-field-row--three { grid-template-columns: 1fr 1fr 1fr; }
.quote-field-row:last-child { margin-bottom: 0; }
.quote-field { display: flex; flex-direction: column; min-width: 0; }

.quote-field label,
.quote-field > label {
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.quote-field input[type="text"],
.quote-field input[type="email"],
.quote-field input[type="tel"],
.quote-field select,
.quote-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-surface);
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.quote-field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.quote-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23494a52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    cursor: pointer;
}
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 15, 102, 0.12);
}
.quote-field-error { margin-top: 6px; font-size: 13px; color: #ba1a1a; }

.quote-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--on-surface-variant);
    cursor: pointer;
}
.quote-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

/* Dropzone */
.quote-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 38px 24px;
    border: 1.5px dashed var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest, #fff);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.quote-dropzone.is-dragover,
.quote-dropzone:hover { border-color: var(--secondary); background: rgba(0, 98, 162, 0.04); }
.quote-dropzone-icon { font-size: 34px; color: var(--on-surface-variant); }
.quote-dropzone-title { font-family: var(--font-display); font-size: 18px; color: var(--on-surface); letter-spacing: 0.02em; }
.quote-dropzone-hint { font-size: 13px; color: var(--on-surface-variant); }
.quote-dropzone-input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.quote-dropzone-files { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--primary); word-break: break-word; }

.quote-submit { margin-top: 32px; padding: 15px 36px; }

.quote-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Aside ---- */
.quote-aside { display: flex; flex-direction: column; gap: 28px; }
.quote-why {
    background: var(--primary);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    color: var(--on-primary);
}
.quote-why-title {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--on-primary);
}
.quote-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.quote-why-item { display: flex; gap: 14px; }
.quote-why-icon { font-size: 22px; color: rgba(255, 255, 255, 0.85); flex: 0 0 auto; margin-top: 2px; }
.quote-why-name {
    margin: 0 0 5px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-primary);
}
.quote-why-text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }

.quote-steps {
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 26px 26px 28px;
}
.quote-steps-title {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}
.quote-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.quote-steps-item { display: flex; gap: 12px; align-items: flex-start; }
.quote-steps-num {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary);
    flex: 0 0 auto;
    line-height: 1.5;
}
.quote-steps-text { font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); }

@media (max-width: 980px) {
    .quote-grid { grid-template-columns: 1fr; gap: 40px; }
    .quote-aside { flex-direction: row; flex-wrap: wrap; }
    .quote-why, .quote-steps { flex: 1 1 280px; }
}
@media (max-width: 620px) {
    .quote-field-row,
    .quote-field-row--three { grid-template-columns: 1fr; }
    .quote-aside { flex-direction: column; }
}

/* ==========================================================================
   404 — PAGE NOT FOUND
   ========================================================================== */
.error404-wrap { padding: 72px 0 104px; }
.error404-inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.error404-code {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(96px, 18vw, 168px);
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: var(--primary);
    opacity: 0.12;
}
.error404-title {
    margin: -8px 0 16px;
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;
    color: var(--primary);
}
.error404-text {
    margin: 0 auto 32px;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--on-surface-variant);
}

.error404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 40px;
}
.error404-actions .btn .material-symbols-outlined { font-size: 19px; }

.error404-search {
    position: relative;
    display: flex;
    gap: 10px;
    max-width: 520px;
    margin: 0 auto 44px;
}
.error404-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--on-surface-variant);
    pointer-events: none;
}
.error404-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 16px 13px 46px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-surface);
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.error404-search input[type="search"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 15, 102, 0.12);
}
.error404-search .btn { flex: 0 0 auto; }

.error404-links-label {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}
.error404-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.error404-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.error404-link .material-symbols-outlined { font-size: 18px; color: var(--secondary); }
.error404-link:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}
.error404-link:hover .material-symbols-outlined { color: var(--on-primary); }

@media (max-width: 540px) {
    .error404-actions .btn,
    .error404-search .btn { flex: 1 1 auto; }
    .error404-search { flex-wrap: wrap; }
}

/* ==========================================================================
   COMING SOON (Digital Tools)
   ========================================================================== */
/* Vertical-only padding so the .section-inner horizontal gutter is preserved
   (a `padding: 80px 0` shorthand would zero the side gutter and push the
   buttons flush to the screen edges on mobile). */
.coming-soon { padding-top: 80px; padding-bottom: 110px; }
.coming-soon-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.coming-soon-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 28px;
    border-radius: 50%;
    background: rgba(1, 15, 102, 0.06);
    color: var(--primary);
}
.coming-soon-icon .material-symbols-outlined { font-size: 40px; }
.coming-soon-eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--secondary);
}
.coming-soon-title {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(30px, 4.5vw, 46px);
    line-height: 1.08;
    color: var(--primary);
}
.coming-soon-text {
    margin: 0 auto 28px;
    max-width: 500px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--on-surface-variant);
}
.coming-soon-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 36px;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--on-surface-variant);
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
}
.coming-soon-note .material-symbols-outlined { font-size: 18px; color: var(--secondary); }
.coming-soon-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.coming-soon-actions .btn .material-symbols-outlined { font-size: 19px; }

@media (max-width: 540px) {
    .coming-soon-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.product-single { padding: 48px 0 96px; }

.product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-bottom: 96px;
}

/* ---- Gallery ---- */
.product-gallery { display: flex; flex-direction: column; gap: 24px; }
.product-gallery-main {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container);
    overflow: hidden;
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pgallery-thumb {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.pgallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgallery-thumb:hover { border-color: var(--primary); }
.pgallery-thumb.is-active { border: 2px solid var(--primary); }

/* ---- Details ---- */
.product-details { display: flex; flex-direction: column; }
.product-badge-row { margin-bottom: 12px; }
.product-badge {
    display: inline-block;
    background: var(--secondary-container);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius);
}
.product-single-title {
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 60px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 16px;
}
.product-price-row { margin-bottom: 28px; }
.product-single-price {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--primary);
}
.product-single-price .price-unit { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--on-surface-variant); }

/* Subtle "+VAT" tag shown after prices on shop + product pages (prices are ex-VAT). */
.price-vat {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    vertical-align: middle;
}
.product-single-price .price-vat { font-size: 13px; }
.product-single-desc { font-size: 18px; line-height: 28px; color: var(--on-surface-variant); margin-bottom: 32px; }

.product-spec-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-container);
    color: var(--primary);
    border: 1px solid var(--outline-variant);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: var(--radius);
}
.spec-chip .material-symbols-outlined { font-size: 18px; }

/* ---- Buy box ---- */
.product-buy { margin-top: auto; display: flex; flex-direction: column; gap: 24px; }
.product-qty-row { display: flex; flex-direction: column; gap: 8px; max-width: 280px; }
.product-qty-label { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-surface-variant); }
.product-qty-hint { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--on-surface-variant); }
.product-qty-pallets { margin: 0; font-size: 14px; font-weight: 600; color: var(--primary); min-height: 18px; }
.product-qty-pallets:empty { min-height: 0; }
/* Pallet readout shown beneath the cart quantity field. */
.cart-qty-pallets { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); white-space: nowrap; }
.product-qty-stepper {
    display: flex;
    align-items: center;
    border: 2px solid var(--outline-variant);
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
}
.qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.2s ease;
}
.qty-btn:hover { background: var(--surface-container); }
.qty-input {
    flex: 1;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    color: var(--on-surface);
    border: none;
    background: transparent;
    -moz-appearance: textfield;
}
.qty-input:focus { outline: none; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-cta-row { display: flex; gap: 16px; }
.product-add-cart {
    flex: 1;
    background: var(--primary-container);
    border-color: var(--primary-container);
    padding: 18px 24px;
    font-size: 14px;
    letter-spacing: 0.08em;
}
.product-add-cart:hover { background: var(--primary); border-color: var(--primary); }
.product-wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    border: 2px solid var(--secondary);
    background: transparent;
    color: var(--secondary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}
.product-wishlist:hover { background: var(--secondary); color: var(--on-primary); }
.product-oos { font-weight: 600; color: var(--error); text-transform: uppercase; letter-spacing: 0.04em; }

.product-tools-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.product-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary);
    transition: background 0.2s ease;
}
.product-tool-btn:hover { background: var(--surface-container); }
.product-tool-btn .material-symbols-outlined { font-size: 20px; }

/* ---- Tabs ---- */
.product-tabs-section { margin-bottom: 96px; }
.product-tabs-nav {
    display: flex;
    gap: 48px;
    border-bottom: 1px solid var(--outline-variant);
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.product-tab {
    padding-bottom: 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: color 0.2s ease;
}
.product-tab:hover { color: var(--primary); }
.product-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.product-tab-panel { display: none; }
.product-tab-panel.is-active { display: block; }
.product-tab-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: start; }
.product-tab-main { font-size: 18px; line-height: 28px; color: var(--on-surface-variant); }
.product-tab-main > * + * { margin-top: 24px; }
.product-tab-heading {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 24px;
}

.product-spec-table {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    padding: 32px;
    border-radius: var(--radius-lg);
}
.product-spec-table table { width: 100%; border-collapse: collapse; }
.product-spec-table td {
    padding: 16px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    border-bottom: 1px solid var(--outline-variant);
}
.product-spec-table tr:last-child td { border-bottom: none; }
.product-spec-table .spec-key { color: var(--primary); }
.product-spec-table .spec-val { text-align: right; }
.product-spec-table-full { max-width: 560px; }

/* ---- Related ---- */
.product-related { margin-bottom: 32px; }
.product-related-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary);
    text-align: center;
    margin-bottom: 40px;
}
.related-grid { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   BLOG / GUTENBERG CONTENT
   ========================================================================== */
.post-single, .page-single { padding: 56px 0 96px; }

.entry-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--margin-desktop);
}

.entry-header { margin-bottom: 32px; }
.entry-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 12px;
}
.entry-eyebrow a { color: inherit; }
.entry-title {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 52px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}
.entry-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--on-surface-variant);
}
.entry-meta-sep { color: var(--outline-variant); }

.entry-featured {
    margin: 0 0 40px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.entry-featured img { width: 100%; height: auto; display: block; }

/* ---- Gutenberg content typography ---- */
.entry-content {
    font-size: 18px;
    line-height: 1.7;
    color: var(--on-surface);
}
.entry-content > * { margin-bottom: 1.5em; }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: var(--font-display);
    color: var(--primary);
    line-height: 1.2;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}
.entry-content h2 { font-size: 32px; }
.entry-content h3 { font-size: 26px; }
.entry-content h4 { font-size: 21px; }

.entry-content a { color: var(--secondary); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--primary); }

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: 0.5em; }

.entry-content blockquote {
    margin: 1.8em 0;
    padding: 8px 0 8px 24px;
    border-left: 3px solid var(--secondary);
    font-size: 22px;
    line-height: 1.5;
    color: var(--primary);
    font-style: italic;
}
.entry-content blockquote cite { display: block; margin-top: 12px; font-size: 15px; font-style: normal; color: var(--on-surface-variant); }

.entry-content img,
.entry-content .wp-block-image img { height: auto; border-radius: var(--radius-lg); }
.entry-content figure { margin: 2em 0; }
.entry-content figcaption {
    margin-top: 10px;
    font-size: 14px;
    color: var(--on-surface-variant);
    text-align: center;
}

.entry-content pre,
.entry-content .wp-block-code {
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 20px;
    overflow-x: auto;
    font-size: 15px;
}
.entry-content :not(pre) > code {
    background: var(--surface-container);
    padding: 2px 6px;
    border-radius: var(--radius);
    font-size: 0.9em;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.entry-content th,
.entry-content td {
    padding: 12px 14px;
    border: 1px solid var(--outline-variant);
    text-align: left;
}
.entry-content th { background: var(--surface-container); color: var(--primary); }

.entry-content hr {
    border: none;
    border-top: 1px solid var(--outline-variant);
    margin: 2.5em 0;
}

/* Core button block on-brand */
.entry-content .wp-block-button__link {
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-lg);
    padding: 14px 28px;
    font-weight: 600;
    text-decoration: none;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--secondary);
}

/* Wide / full alignment within the reading column */
.entry-content .alignwide {
    width: min(100vw - 2 * var(--margin-desktop), 1000px);
    margin-left: 50%;
    transform: translateX(-50%);
    max-width: none;
}
.entry-content .alignfull {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    max-width: none;
}
.entry-content .alignleft { float: left; margin: 0.3em 1.5em 1em 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0.3em 0 1em 1.5em; max-width: 50%; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }

.entry-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--outline-variant);
}
.entry-tags li a {
    display: inline-block;
    font-size: 13px;
    padding: 6px 12px;
    background: var(--surface-container);
    border-radius: var(--radius);
    color: var(--primary);
}

/* ==========================================================================
   COMMENTS
   ========================================================================== */
.comments-area {
    max-width: 760px;
    margin: 64px auto 0;
    padding-top: 48px;
    border-top: 1px solid var(--outline-variant);
}
.comments-title,
.comment-respond .comment-reply-title {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--primary);
    margin: 0 0 24px;
}
.comment-list {
    list-style: none;
    margin: 0 0 48px;
    padding: 0;
}
.comment-list ol.children {
    list-style: none;
    margin: 0;
    padding-left: 32px;
}
.comment-list li.comment { margin: 0 0 24px; }
.comment-body {
    position: relative;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 24px 24px 20px 80px;
}
.comment-body .avatar {
    position: absolute;
    top: 24px;
    left: 24px;
    border-radius: 50%;
}
.comment-author { display: flex; flex-direction: column; }
.comment-author .fn {
    font-weight: 700;
    font-style: normal;
    color: var(--primary);
    font-size: 16px;
}
.comment-author .says { display: none; }
.comment-meta {
    margin-bottom: 12px;
    font-size: 13px;
}
.comment-metadata a,
.comment-metadata {
    color: var(--on-surface-variant);
    text-decoration: none;
}
.comment-content { color: var(--on-surface); line-height: 1.6; }
.comment-content p { margin: 0 0 12px; }
.comment-content p:last-child { margin-bottom: 0; }
.comment-awaiting-moderation {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--secondary);
}
.reply { margin-top: 12px; }
.comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary);
    text-decoration: none;
}
.comment-reply-link:hover { text-decoration: underline; }

.comment-respond {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 32px;
}
.comment-respond .comment-reply-title small { margin-left: 12px; font-size: 14px; }
.comment-respond .comment-reply-title small a { color: var(--secondary); }
.comment-notes,
.logged-in-as {
    font-size: 14px;
    color: var(--on-surface-variant);
    margin: 0 0 20px;
}
.logged-in-as a { color: var(--secondary); }
.comment-form { display: flex; flex-direction: column; gap: 16px; }
.comment-form .comment-form-comment { margin: 0; order: -1; }
.comment-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--on-surface);
    background: var(--surface-container-lowest);
}
.comment-form textarea { resize: vertical; }
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--primary); }
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url { margin: 0; }
.comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.comment-form .comment-form-cookies-consent input { width: auto; margin-top: 3px; }
.comment-form .form-submit { margin: 0; }
.comments-closed { color: var(--on-surface-variant); font-style: italic; }

@media (max-width: 600px) {
    .comment-respond { padding: 24px; }
    .comment-body { padding: 64px 16px 16px; }
    .comment-body .avatar { top: 16px; left: 16px; width: 40px; height: 40px; }
    .comment-list ol.children { padding-left: 16px; }
}

/* ==========================================================================
   JOURNAL (Blog index, archive, search)
   ========================================================================== */

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Featured hero ---- */
.blog-hero { padding: 48px 0 0; }
.blog-hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    box-shadow: 0 4px 20px -2px rgba(30, 42, 122, 0.08);
    overflow: hidden;
}
.blog-hero-media {
    position: relative;
    display: block;
    min-height: 600px;
    overflow: hidden;
    background: var(--surface-container);
}
.blog-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.blog-hero-media:hover img { transform: scale(1.05); }
.blog-hero-tag {
    position: absolute;
    top: 24px; left: 24px;
    background: var(--secondary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 16px;
}
.blog-hero-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px;
    background: #fff;
}
.blog-hero-eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 16px;
}
.blog-hero-title {
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary);
    margin-bottom: 24px;
}
.blog-hero-title a { color: inherit; }
.blog-hero-title a:hover { color: var(--secondary); }
.blog-hero-excerpt {
    font-size: 18px;
    line-height: 28px;
    color: var(--on-surface-variant);
    margin-bottom: 32px;
    max-width: 32rem;
}
.blog-hero-link { align-self: flex-start; gap: 12px; }
.blog-hero-link .material-symbols-outlined { font-size: 20px; }

/* ---- Section header + filter tabs ---- */
.blog-filters { padding: 80px 0 0; }
.blog-filters-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--outline-variant);
}
.blog-filters-title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 8px;
}
.blog-filters-subtitle {
    font-size: 16px;
    color: var(--on-surface-variant);
    max-width: 28rem;
}
.blog-filters-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-filter {
    display: inline-flex;
    align-items: center;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    transition: all 0.2s ease;
}
.blog-filter:hover { border-color: var(--primary); color: var(--primary); }
.blog-filter.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* ---- Card grid ---- */
.blog-index { padding: 48px 0 96px; }
/* The 96px above is breathing room between the pagination and the footer. When
   there's only one page of posts there IS no pagination, so the "Join the Trade
   Network" card became the last thing on the page and that 96px was left over as
   a dead strip of white before the footer. Collapse it in exactly that case —
   when the card grid is the section's last child — so the hand-off to the footer
   is clean. Paginated views keep the spacing.
   Browsers without :has() simply keep the current padding, so this degrades to
   today's behaviour rather than breaking. */
.blog-index:has(> .blog-grid:last-child) { padding-bottom: 0; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gutter);
    row-gap: 64px;
}
.blog-card { display: flex; flex-direction: column; }
.blog-card-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container);
}
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.1); }
.blog-card-image-placeholder { display: block; width: 100%; height: 100%; }
.blog-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.blog-card-chip {
    background: var(--secondary-fixed);
    color: #001d35;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 8px;
}
.blog-card-chip:hover { background: var(--secondary-fixed-dim); }
.blog-card-date { font-size: 12px; font-weight: 500; color: var(--on-surface-variant); }
.blog-card-title {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
}
.blog-card-title a { color: inherit; }
.blog-card-title a:hover { color: var(--secondary); }
.blog-card-excerpt {
    font-size: 16px;
    line-height: 24px;
    color: var(--on-surface-variant);
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    align-self: flex-start;
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
    transition: gap 0.2s ease;
}
.blog-card:hover .blog-card-link { gap: 16px; }
.blog-card-link .material-symbols-outlined { font-size: 18px; }

/* ---- Newsletter cell ---- */
.newsletter-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--primary-container);
    color: var(--on-primary);
    padding: 48px;
}
.newsletter-title {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--on-primary-container);
    margin-bottom: 16px;
}
.newsletter-text { font-size: 16px; line-height: 24px; opacity: 0.9; margin-bottom: 32px; }
.newsletter-form { display: flex; flex-direction: column; gap: 16px; }
.newsletter-input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--on-primary-container);
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 12px 0;
}
.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.newsletter-input:focus { outline: none; border-bottom-color: #fff; }
.newsletter-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-submit {
    width: 100%;
    background: #fff;
    color: var(--primary);
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 16px;
    transition: background 0.2s ease;
}
.newsletter-submit:hover { background: var(--secondary-fixed); }
.newsletter-fineprint { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-top: 24px; }
.newsletter-success { font-size: 16px; line-height: 24px; color: #fff; }

/* ---- Pagination ---- */
.blog-pagination { padding: 80px 0 0; }
.blog-pagination-inner { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 4px;
    font-weight: 700;
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    transition: all 0.2s ease;
}
.blog-pagination a.page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.blog-pagination .page-numbers.current {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}
.blog-pagination .page-numbers.dots { border: 0; min-width: auto; color: var(--on-surface-variant); }
.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next { color: var(--primary); }

/* ---- Archive / search header ---- */
.blog-archive-head { padding: 64px 0 0; }
.blog-archive-header { max-width: 48rem; }
.blog-archive-eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 12px;
}
.blog-archive-title {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
}
.blog-archive-desc { font-size: 18px; color: var(--on-surface-variant); margin-top: 16px; }
.blog-search-form { display: flex; gap: 8px; margin-top: 24px; max-width: 32rem; }
.blog-search-form input[type="search"] {
    flex: 1;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--on-surface);
}
.blog-search-form input[type="search"]:focus { outline: none; border-color: var(--primary); }
.blog-empty { font-size: 18px; color: var(--on-surface-variant); padding: 48px 0 0; }

/* ---- Related posts ---- */
.related-posts { padding: 80px 0 96px; }
.related-posts-title {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--outline-variant);
}
.blog-grid--related { row-gap: 40px; }

/* ---- Search FAB + overlay ---- */
.blog-search-fab {
    position: fixed;
    bottom: 32px; right: 32px;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px -4px rgba(1, 15, 102, 0.5);
    transition: transform 0.2s ease;
    z-index: 40;
}
.blog-search-fab:hover { transform: scale(1.1); }
.blog-search-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 18vh 24px 24px;
    background: rgba(1, 15, 102, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 60;
}
.blog-search-overlay.is-open { display: flex; }
.blog-search-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 20px 60px -10px rgba(1, 15, 102, 0.4);
}
.blog-search-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    color: var(--on-surface-variant);
    cursor: pointer;
}
.blog-search-close:hover { color: var(--primary); }
.blog-search-panel form { display: flex; gap: 8px; margin-top: 8px; }
.blog-search-panel input[type="search"] {
    flex: 1;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--on-surface);
}
.blog-search-panel input[type="search"]:focus { outline: none; border-color: var(--primary); }

/* ==========================================================================
   OUR WORK — Project portfolio
   ========================================================================== */

/* ---- Hero ---- */
.ourwork-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    background-color: var(--primary-container);
    background-image: linear-gradient(120deg, #010f66 0%, #1e2a7a 55%, #0062a2 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.ourwork-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 15, 102, 0.4);
}
.ourwork-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--margin-desktop) var(--margin-desktop);
}
.ourwork-hero-card {
    max-width: 42rem;
    background: rgba(1, 15, 102, 0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 32px;
    border-left: 4px solid var(--secondary);
}
.ourwork-hero-title {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--on-primary);
    margin-bottom: 16px;
}
.ourwork-hero-intro { margin-bottom: 24px; }
.ourwork-hero-intro p {
    font-size: 18px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.9);
}
.ourwork-hero-intro p + p { margin-top: 12px; }
.ourwork-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--secondary);
    color: var(--on-primary);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ourwork-badge .material-symbols-outlined { font-size: 18px; }

/* ---- Filter bar ---- */
.ourwork-filterbar {
    background: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
    position: -webkit-sticky;
    position: sticky;
    top: var(--header-height);
    z-index: 20;
}
body.admin-bar .ourwork-filterbar { top: calc(var(--header-height) + 32px); }
@media screen and (max-width: 782px) {
    body.admin-bar .ourwork-filterbar { top: calc(var(--header-height) + 46px); }
}
.ourwork-filterbar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px var(--margin-desktop);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ourwork-filters {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    /* Allow the flex item to shrink below its content width so the
       horizontal scroll engages internally instead of widening the page. */
    min-width: 0;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ourwork-filters::-webkit-scrollbar { display: none; }
.ourwork-filter {
    background: none;
    border: none;
    padding: 0 0 4px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.ourwork-filter:hover { color: var(--primary); }
.ourwork-filter.is-active {
    color: var(--secondary);
    border-bottom-color: var(--secondary);
}
.ourwork-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--on-surface-variant);
}
.ourwork-sort-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ourwork-sort-select {
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
    cursor: pointer;
}

/* ---- Grid ---- */
.ourwork-grid-section { padding: var(--section-pad) var(--margin-desktop); }
.ourwork-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}
.ourwork-card { display: flex; flex-direction: column; }
.ourwork-card.is-hidden { display: none; }
.ourwork-card--featured { grid-column: span 2; }

.ourwork-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ourwork-card--featured .ourwork-card-media { aspect-ratio: 16 / 9; }
.ourwork-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.ourwork-card:hover .ourwork-card-media img { transform: scale(1.05); }
.ourwork-card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--surface-container) 0%, var(--surface-container-low) 100%);
}
.ourwork-tag-featured {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--primary);
    color: var(--on-primary);
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.ourwork-card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}
.ourwork-card-title {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary);
}
.ourwork-card--featured .ourwork-card-title { font-size: 32px; line-height: 40px; }
.ourwork-card-title a { color: inherit; }
.ourwork-card-title a:hover { color: var(--secondary); }
.ourwork-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ourwork-chip {
    background: var(--secondary-fixed);
    color: #001d35;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ourwork-card-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--secondary);
    border: 2px solid var(--secondary);
    transition: all 0.2s ease;
}
.ourwork-card-arrow:hover { background: var(--secondary); color: var(--on-primary); }

/* ---- Load more ---- */
.ourwork-loadmore-wrap {
    margin-top: 64px;
    display: flex;
    justify-content: center;
}
.ourwork-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    padding: 16px 32px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.ourwork-loadmore:hover { border-color: var(--secondary); }
.ourwork-loadmore .material-symbols-outlined { transition: transform 0.2s ease; }
.ourwork-loadmore:hover .material-symbols-outlined { transform: translateY(2px); }
.ourwork-loadmore.is-hidden { display: none; }

.ourwork-empty {
    text-align: center;
    font-size: 18px;
    color: var(--on-surface-variant);
    padding: 64px 0;
}

/* ---- Single project extras ---- */
.project-back { margin-top: 48px; }
.project-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--secondary);
}
.project-back-link:hover { color: var(--primary); }
.project-single .entry-header .ourwork-chips { margin-top: 16px; }

/* ==========================================================================
   SUPPORT PAGES — shared hero + FAQ + Delivery
   ========================================================================== */
.page-hero { padding-top: var(--section-pad); padding-bottom: 48px; }
.page-hero-inner { max-width: 48rem; }
.page-hero .section-label { display: block; margin-bottom: 16px; }
.page-hero-title {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary);
    margin-bottom: 16px;
}
.page-hero-intro { font-size: 18px; line-height: 28px; color: var(--on-surface-variant); }
.page-hero-intro p { margin: 0; }

/* FAQ accordion (native <details>) */
.faq-section { padding-bottom: var(--section-pad); }
.faq-list {
    max-width: 820px;
    border-top: 1px solid var(--outline-variant);
}
.faq-item { border-bottom: 1px solid var(--outline-variant); }
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--primary);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }
.faq-icon {
    flex: 0 0 auto;
    font-size: 24px;
    color: var(--secondary);
    transition: transform 0.2s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 0 24px; max-width: 680px; }
.faq-answer p { margin: 0; font-size: 16px; line-height: 26px; color: var(--on-surface-variant); }

.faq-cta {
    margin-top: 56px;
    padding: 40px;
    text-align: center;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
}
.faq-cta-title {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}
.faq-cta-text { font-size: 16px; line-height: 24px; color: var(--on-surface-variant); margin-bottom: 24px; }

/* Delivery information cards */
.delivery-section { padding-bottom: var(--section-pad); }
.delivery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}
.delivery-card {
    padding: 32px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
}
.delivery-card-icon { font-size: 32px; color: var(--secondary); margin-bottom: 16px; }
.delivery-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
}
.delivery-card-text { font-size: 15px; line-height: 24px; color: var(--on-surface-variant); margin: 0; }

.delivery-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 32px;
    padding: 20px 24px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-left: 3px solid var(--secondary);
    border-radius: var(--radius);
}
.delivery-note .material-symbols-outlined { flex: 0 0 auto; font-size: 22px; color: var(--secondary); }
.delivery-note p { margin: 0; font-size: 15px; line-height: 24px; color: var(--on-surface-variant); }
.delivery-note a { color: var(--secondary); font-weight: 600; text-decoration: underline; }

@media (max-width: 1024px) {
    .page-hero-title { font-size: 48px; line-height: 56px; }
    .delivery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .page-hero-title { font-size: 40px; line-height: 44px; }
    .delivery-grid { grid-template-columns: 1fr; }
    .faq-question { font-size: 18px; line-height: 24px; }
    .faq-cta { padding: 32px 24px; }
}

/* ==========================================================================
   CONTACT — Get in touch page
   ========================================================================== */
.contact-hero { padding-top: var(--section-pad); padding-bottom: 48px; }
.contact-hero-inner { max-width: 48rem; }
.contact-hero-title {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary);
    margin-bottom: 16px;
}
.contact-hero-intro { font-size: 18px; line-height: 28px; color: var(--on-surface-variant); }
.contact-hero-intro p { margin: 0; }

.contact-main { padding-bottom: var(--section-pad); }
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--gutter);
    align-items: start;
}

.contact-form-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 48px;
}
.contact-form-title {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 32px;
}

.contact-form { display: flex; flex-direction: column; gap: 24px; }
.contact-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.contact-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contact-field label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
    /* Without these a <select> sizes to its longest option and a <textarea>
       to its `cols` default, either of which can out-width a phone screen. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-field textarea { resize: vertical; min-height: 140px; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--secondary-fixed);
}
.contact-field-error { font-size: 13px; color: var(--error); }
.contact-field input[aria-describedby="err-name"],
.contact-field input[aria-describedby="err-email"] { border-color: var(--error); }

.contact-submit { align-self: flex-start; padding: 16px 40px; letter-spacing: 0.1em; }

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 24px;
}
.contact-alert p { margin: 0; font-size: 15px; line-height: 22px; }
.contact-alert--success { background: var(--secondary-fixed); color: #001d35; }
.contact-alert--success .material-symbols-outlined { color: var(--secondary); }
.contact-alert--error { background: #ffdad6; color: #410002; }
.contact-alert--error .material-symbols-outlined { color: var(--error); }

.contact-bento { display: flex; flex-direction: column; gap: var(--gutter); }
.contact-card {
    border-radius: var(--radius-lg);
    padding: 32px;
}
.contact-card-icon { font-size: 36px; margin-bottom: 16px; display: block; }
.contact-card-title {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}
.contact-card-text { font-size: 16px; line-height: 26px; }

.contact-card--office {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
}
.contact-card--office .contact-card-icon { color: var(--secondary); }
.contact-card--office .contact-card-title { color: var(--primary); }

.contact-card--direct { background: var(--primary); color: var(--on-primary); }
.contact-card--direct .contact-card-title { color: var(--on-primary); }
.contact-card--direct .contact-card-icon { color: var(--secondary-container); }
.contact-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-card-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.contact-card-list .material-symbols-outlined { color: var(--secondary-fixed); }
.contact-card-list a { color: var(--on-primary); }
.contact-card-list a:hover { text-decoration: underline; }

.contact-card--hours {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
}
.contact-card--hours .contact-card-icon { color: var(--secondary); }
.contact-card--hours .contact-card-title { color: var(--primary); }
.contact-hours { margin: 0; font-size: 16px; color: var(--on-surface-variant); }
.contact-hours-row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--outline-variant);
}
.contact-hours-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.contact-hours-row dt { margin: 0; }
.contact-hours-row dd { margin: 0; font-weight: 600; }
.contact-hours-row--closed { color: var(--error); border-bottom: none; }

/* ---- Location band ---- */
.contact-map { position: relative; height: 450px; background: var(--surface-dim); overflow: hidden; }
.contact-map-embed { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(0.2); }
.contact-map-card {
    position: absolute;
    top: 32px;
    left: 32px;
    z-index: 2;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(1, 15, 102, 0.18);
    padding: 24px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.contact-map-card:hover { box-shadow: 0 24px 48px rgba(1, 15, 102, 0.28); transform: translateY(-2px); }
.contact-map-pin {
    font-size: 36px;
    color: var(--primary);
    font-variation-settings: 'FILL' 1;
    margin-bottom: 4px;
}
.contact-map-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}
.contact-map-place { font-size: 16px; color: var(--on-surface-variant); }
.contact-map-directions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--secondary);
}
.contact-map-directions .material-symbols-outlined { font-size: 16px; }
@media (max-width: 480px) {
    .contact-map-card { left: 16px; right: 16px; top: 16px; }
}

/* ---- Secondary CTAs ---- */
.contact-cta { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.contact-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.contact-cta-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    padding: 48px;
    border-radius: var(--radius-lg);
}
.contact-cta-title {
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}
.contact-cta-text { font-size: 18px; line-height: 28px; margin-bottom: 24px; max-width: 24rem; }
.contact-cta-card .btn { align-self: flex-start; }
.contact-cta-card--trade { background: var(--primary); }
.contact-cta-card--trade .contact-cta-title { color: var(--on-primary); }
.contact-cta-card--trade .contact-cta-text { color: var(--secondary-fixed); }
.contact-cta-card--advice { background: var(--surface-container-highest); }
.contact-cta-card--advice .contact-cta-title { color: var(--primary); }
.contact-cta-card--advice .contact-cta-text { color: var(--on-surface-variant); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    :root { --margin-desktop: 32px; --section-pad: 72px; }

    /* Tablet: brand on its own row, the three link columns across, then the
       newsletter full-width below. Re-declares the grid since the desktop rule
       is now a 5-column fr layout, not the old 12-column track. */
    .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gutter); }
    .footer-col-brand { grid-column: 1 / -1; }
    .footer-col-nav { grid-column: auto; }
    .footer-col-tools { grid-column: auto; }
    .footer-col-hq { grid-column: auto; }
    .footer-newsletter { grid-column: 1 / -1; align-self: auto; }
    .footer-social { margin-top: 8px; }

    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .trust-item:nth-child(3) { border-left: none; padding-left: 0; }

    .hero-title { font-size: 48px; line-height: 56px; }
    .section-title, .cta-title { font-size: 40px; line-height: 48px; }

    .shop-layout { grid-template-columns: 240px 1fr; gap: 32px; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
    .product-hero { gap: 40px; }
    .product-tab-grid { grid-template-columns: 1fr; gap: 40px; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .product-single-title { font-size: 44px; line-height: 48px; }
    .shop-title { font-size: 40px; line-height: 44px; }

    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-hero-grid { grid-template-columns: 1fr; }
    .blog-hero-media { min-height: 400px; }
    .blog-hero-body { padding: 40px; }
    .blog-hero-title { font-size: 44px; }

    .ourwork-grid { grid-template-columns: repeat(2, 1fr); }
    .ourwork-card--featured { grid-column: span 2; }
    .ourwork-hero-title { font-size: 48px; line-height: 56px; }

    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-hero-title { font-size: 48px; line-height: 56px; }
    .contact-form-card { padding: 40px; }
}

@media (max-width: 768px) {
    :root { --header-height: 68px; --margin-desktop: 16px; }

    .main-nav,
    .header-actions .btn,
    .header-actions .header-account {
        display: none;
    }
    .mobile-menu-toggle { display: flex; }
    .header-actions { gap: 16px; }
    .site-header .logo-img { height: 40px; }

    .footer-main { padding: 56px 0 0; }
    .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .footer-col-brand,
    .footer-col-nav,
    .footer-col-tools,
    .footer-col-hq,
    .footer-newsletter { grid-column: span 1; }
    .footer-newsletter-form { max-width: none; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .footer-legal { flex-wrap: wrap; gap: 16px; }

    .hero { height: auto; min-height: 0; padding: 80px 0; }
    .hero-title { font-size: 40px; line-height: 44px; }
    .hero-subtitle { font-size: 16px; }

    .trust-inner { grid-template-columns: 1fr; }
    .trust-item:nth-child(n) { border-left: none; padding-left: 0; }

    .section-title, .cta-title { font-size: 32px; line-height: 36px; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    /* Preserve the centered variant (e.g. home video) when stacked on mobile —
       the base rule above left-aligns every head, knocking it off centre. */
    .section-head--center { align-items: center; }
    .section-head--center > div { width: 100%; }

    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .tools-grid,
    .installations-grid,
    .testimonials-grid { grid-template-columns: 1fr; }
    .tool-card { padding: 28px; }
    .tool-title { font-size: 26px; line-height: 32px; }

    .cta-inner { flex-direction: column; align-items: flex-start; }

    .shop-layout { grid-template-columns: 1fr; gap: 32px; }
    .shop-sidebar { position: static; }
    .product-hero { grid-template-columns: 1fr; gap: 32px; }
    .product-cta-row { flex-wrap: wrap; }
    .product-tools-row { grid-template-columns: 1fr; }
    .product-single-title { font-size: 36px; line-height: 40px; }

    .entry-title { font-size: 34px; line-height: 38px; }
    .entry-content { font-size: 17px; }
    .entry-content h2 { font-size: 27px; }
    .entry-content h3 { font-size: 22px; }

    .blog-grid { grid-template-columns: 1fr; }
    .blog-hero { padding: 32px 0 0; }
    .blog-hero-title { font-size: 36px; }
    .blog-hero-body { padding: 32px 24px; }
    .blog-filters-inner { flex-direction: column; align-items: flex-start; }
    .blog-filters-title { font-size: 32px; }
    .blog-archive-title { font-size: 34px; line-height: 38px; }
    .newsletter-card { padding: 36px 28px; }
    /* The header already exposes an always-visible search icon that opens the
       same overlay, so the floating FAB is redundant on mobile and only serves
       to obscure card content (e.g. the "Read Article" link). Hide it here. */
    .blog-search-fab { display: none; }

    .ourwork-grid { grid-template-columns: 1fr; }
    .ourwork-card--featured { grid-column: span 1; }
    .ourwork-card--featured .ourwork-card-media { aspect-ratio: 4 / 3; }
    .ourwork-card--featured .ourwork-card-title { font-size: 26px; line-height: 32px; }
    .ourwork-hero { min-height: 0; padding: 96px 0 0; }
    .ourwork-hero-title { font-size: 40px; line-height: 44px; }
    .ourwork-filterbar-inner { flex-direction: column; align-items: flex-start; }

    .contact-hero-title { font-size: 40px; line-height: 44px; }
    .contact-field-row { grid-template-columns: 1fr; }
    .contact-form-card { padding: 28px; }
    .contact-cta-grid { grid-template-columns: 1fr; }
    .contact-cta-card { min-height: 0; padding: 36px; }
    .contact-cta-title { font-size: 30px; line-height: 36px; }
    .contact-submit { width: 100%; }

    /* ---- Page gutters: Request a Quote, Blog, Search results ----------------
       Each of these sections already carries `.section-inner`, which supplies
       the page gutter — but each then re-declares padding with a SHORTHAND
       (`.quote-main { padding: 56px 0 96px }`, `.blog-index { padding: 48px 0
       96px }`, `.blog-archive-head { padding: 64px 0 0 }`). The shorthand's `0`
       wipes out the inherited left/right padding, which is why their content ran
       hard to the screen edges while pages like Contact (which only sets
       `padding-bottom`) looked right.

       Restoring the gutter here rather than in the base rules keeps the desktop
       layout byte-for-byte identical, as requested — these pages are capped by
       `max-width` on wide screens, so only phones were affected. The value is
       the same token Contact and every other section uses, so the inset matches
       the rest of the site exactly.

       `.section-inner` is repeated in each selector purely for specificity: the
       base rules are single-class (`.quote-main`), so matching them at (0,2,0)
       means this wins on specificity rather than on source order. Every one of
       these elements really does carry both classes, so nothing is being faked.

       The list below is the complete set: every element in the theme that
       carries `.section-inner` AND then re-declares padding with a horizontal
       `0`, found by auditing all 19 `.section-inner` users rather than fixing
       them one report at a time. Each was measured running to x=0 at 430px:
         .quote-main      Request a Quote form
         .blog-index      Journal card grid
         .blog-filters    "Explore the Journal" heading + category tabs
         .blog-archive-head  search / archive header
         .blog-pagination    pager below the grid
         .related-posts   "related articles" under an article
         .tool-body       Tile Calculator and AI Visualiser
         .error404-wrap   404 page

       `.blog-hero`, `.ourwork-grid-section` and the contact/delivery sections
       are deliberately absent: the first two already supply their own
       horizontal padding, and the hero was explicitly signed off as correct. */
    .quote-main.section-inner,
    .blog-index.section-inner,
    .blog-archive-head.section-inner,
    .blog-filters.section-inner,
    .blog-pagination.section-inner,
    .related-posts.section-inner,
    .tool-body.section-inner,
    .error404-wrap.section-inner {
        padding-left: var(--margin-mobile);
        padding-right: var(--margin-mobile);
    }

    /* ---- Projects (Our Work): divider between stacked cards -----------------
       The grid collapses to one column here, so consecutive projects run
       together with only the grid gap between them. A hairline in the brand's
       lighter blue separates them without competing with the imagery. The row
       gap is split either side of the line so the spacing above and below it
       reads as deliberate rather than lopsided.

       Desktop is untouched — this lives inside the mobile query and the
       three-column grid up there already separates cards visually. */
    .ourwork-grid { row-gap: 0; }
    /* Reads as "a visible card that has a visible card somewhere before it" —
       i.e. every project except the first one on screen. The general sibling
       combinator is what makes this survive the category filter and the Load
       More button: both hide cards with .is-hidden, and because the selector
       ignores those, whichever card ends up first never draws a line above
       itself and no divider is left stranded after a hidden one. */
    .ourwork-card:not(.is-hidden) ~ .ourwork-card:not(.is-hidden) {
        margin-top: var(--gutter);
        padding-top: var(--gutter);
        /* --secondary (#0062a2), not --secondary-fixed-dim (#9dcaff): the pale
           tint was only ~1.2:1 against the off-white page background and was
           effectively invisible on a phone screen. The accent blue is the brand
           colour and reads clearly at 1px, which keeps it a hairline rather than
           a heavy rule. */
        border-top: 1px solid var(--secondary);
    }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr; }
    .shop-grid { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    .hero-actions .btn,
    .cta-actions .btn { width: 100%; }
    .blog-search-form { flex-direction: column; }
    .blog-search-panel { padding: 28px; }
    .blog-search-panel form { flex-direction: column; }

    /* `white-space: nowrap` on .btn keeps labels tidy at normal sizes, but a
       long label (e.g. the Instagram "Follow @mourneexterior" CTA) then ran
       past the screen edge on small phones. Let it wrap down here instead. */
    .btn {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* ==========================================================================
   SCROLL REVEAL
   Lightweight fade-and-rise as elements enter the viewport. The hidden state
   is gated behind html.reveal-on, which an inline <head> script adds ONLY when
   the browser supports IntersectionObserver AND the visitor hasn't requested
   reduced motion. So with JS off, no IO support, or reduce-motion set, the
   class is never added and all content stays fully visible — no FOUC, no SEO
   or accessibility risk. main.js tags the targets and toggles .is-visible.
   ========================================================================== */
.reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-on [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Belt-and-braces: honour reduced motion even if the class slips through. */
@media (prefers-reduced-motion: reduce) {
    .reveal-on [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   LOGO INTRO
   Full-screen brand-navy overlay that plays the logo animation once per
   session on the homepage. Hidden by default; shown only when the <head>
   gate adds html.intro-on. main.js fades it out on the video's `ended`
   event (or a click / fallback timeout) and removes intro-on to restore
   scrolling. With JS off the gate never fires, so the overlay stays hidden.
   ========================================================================== */
.site-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    /* White to match the intro clip's baked-in white background, so the video
       blends seamlessly into the overlay with no visible frame/box. */
    background: #ffffff;
}

.intro-on .site-intro { display: flex; }

/* Lock scrolling while the intro is on screen. */
.intro-on,
.intro-on body { overflow: hidden; }

.site-intro-video {
    /* Small centred icon, not a full-bleed video. */
    width: min(40vw, 160px);
    height: auto;
    max-height: 40vh;
}

/* Fade-out when dismissed. */
.site-intro.is-leaving {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* ==========================================================================
   FOOTER TRADE TRIGGER
   Popups are now built in the WordPress popup plugin; this is just the footer
   link styling. Point the plugin's click-trigger at `.footer-trade-trigger`.
   ========================================================================== */
.footer-trade-trigger {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--primary-fixed-dim);
    transition: color 0.2s ease;
}

.footer-trade-trigger:hover,
.footer-trade-trigger:focus-visible { color: var(--on-primary); }

/* ==========================================================================
   TRADE ACCOUNT MODAL
   Native modal for the footer "Open a Trade Account" trigger.
   ========================================================================== */
.trade-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.trade-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.trade-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 15, 102, 0.55);
    backdrop-filter: blur(2px);
}

.trade-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(1, 15, 102, 0.28);
    transform: translateY(12px);
    transition: transform 0.25s ease;
}

.trade-modal.is-open .trade-modal-dialog {
    transform: translateY(0);
}

.trade-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--on-surface);
    cursor: pointer;
    transition: background 0.2s ease;
}

.trade-modal-close:hover,
.trade-modal-close:focus-visible {
    background: var(--outline-variant);
}

.trade-modal-body {
    padding: 36px 36px 32px;
}

.trade-modal-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 8px;
}

.trade-modal-title {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.1;
    color: var(--primary);
    margin: 0 0 12px;
}

.trade-modal-intro {
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-surface);
    margin: 0 0 24px;
}

.trade-modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trade-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.trade-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trade-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--on-surface);
}

.trade-modal-form input,
.trade-modal-form select,
.trade-modal-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.trade-modal-form input:focus,
.trade-modal-form select:focus,
.trade-modal-form textarea:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px var(--secondary-container);
}

.trade-modal-form textarea {
    resize: vertical;
    min-height: 76px;
}

.trade-modal-status {
    margin: 0;
    font-size: 14px;
    min-height: 0;
}

.trade-modal-status.is-error {
    color: #b3261e;
}

.trade-modal-submit {
    align-self: flex-start;
    margin-top: 4px;
}

.trade-modal-submit.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.trade-modal-success {
    text-align: center;
    padding: 16px 0 4px;
}

.trade-success-icon {
    font-size: 56px;
    color: #1f7a3d;
}

.trade-success-title {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--primary);
    margin: 8px 0 8px;
}

.trade-success-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-surface);
    margin: 0 0 20px;
}

@media (max-width: 560px) {
    .trade-modal { padding: 0; }
    .trade-modal-dialog {
        max-width: none;
        min-height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .trade-modal-body { padding: 28px 22px 28px; }
    .trade-modal-title { font-size: 26px; }
    .trade-form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DIGITAL TOOLS — Tile Calculator & AI Visualiser
   ========================================================================== */

/* ---- Shared tool hero ---- */
.tool-hero {
    background: linear-gradient(120deg, var(--primary) 0%, #00207a 55%, var(--secondary) 150%);
    color: var(--on-primary);
    padding: 72px 0 64px;
}
/* When the page has a Featured Image, layer the brand gradient over the photo
   so the white hero text stays legible. */
.tool-hero--image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.tool-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(1, 15, 102, 0.92) 0%, rgba(0, 32, 122, 0.85) 55%, rgba(0, 98, 162, 0.7) 150%);
}
.tool-hero--image .tool-hero-inner { position: relative; z-index: 1; }
.tool-hero-inner { max-width: 760px; }
.tool-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--secondary-fixed-dim);
}
.tool-eyebrow .material-symbols-outlined { font-size: 20px; }
.tool-hero-title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 50px);
    line-height: 1.05;
    color: var(--on-primary);
}
.tool-hero-intro {
    margin: 0;
    max-width: 600px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.tool-body { padding: 56px 0 88px; }

/* ---- Shared card ---- */
.calc-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 18px 40px -32px rgba(1, 15, 102, 0.4);
}
.calc-card-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
}
.calc-card-hint { margin: 0 0 18px; font-size: 14px; color: var(--on-surface-variant); }

.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field-label { font-size: 13px; font-weight: 600; color: var(--on-surface); }
.calc-field-note { margin: 8px 0 0; font-size: 13px; color: var(--on-surface-variant); }
.calc-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.calc-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 15, 102, 0.12);
}

/* ---- Calculator layout ---- */
.calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
}
.calc-rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.calc-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto auto;
    align-items: end;
    gap: 12px;
}
.calc-times { padding-bottom: 12px; color: var(--on-surface-variant); font-weight: 600; }
.calc-row-area {
    padding-bottom: 12px;
    min-width: 72px;
    text-align: right;
    font-weight: 700;
    color: var(--primary);
}
.calc-row-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 46px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: #fff;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: all 0.18s ease;
}
.calc-row-remove:hover:not(:disabled) { border-color: var(--error); color: var(--error); }
.calc-row-remove:disabled { opacity: 0.4; cursor: not-allowed; }

.calc-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--secondary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.calc-add:hover { text-decoration: underline; }

.calc-wastage { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--outline-variant); }
.calc-field--wastage { max-width: 220px; }
.calc-wastage-control { position: relative; display: flex; align-items: center; }
.calc-wastage-control .calc-input { padding-right: 38px; }
.calc-wastage-unit {
    position: absolute;
    right: 14px;
    color: var(--on-surface-variant);
    font-weight: 600;
    pointer-events: none;
}

.calc-tilesize { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--outline-variant); }
.calc-field--tilesize { max-width: 260px; }
.calc-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23010f66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

/* ---- Calculator result panel ---- */
.calc-result {
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-lg);
    padding: 30px 28px 28px;
    position: sticky;
    top: 96px;
}
.calc-result-title {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--on-primary);
}
.calc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 15px;
}
.calc-result-label { color: rgba(255, 255, 255, 0.78); }
.calc-result-value { font-weight: 600; }
.calc-result-headline {
    margin: 20px 0 16px;
    padding: 18px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
}
.calc-result-headline-label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary-fixed-dim);
    margin-bottom: 6px;
}
.calc-result-headline-value {
    display: block;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
}
.calc-result-headline-pallets {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--secondary-fixed);
}
.calc-result-note {
    display: flex;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}
.calc-result-note .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.calc-result-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---- AI Visualiser wizard ---- */
.ai-wizard {
    max-width: 640px;
    margin: 0 auto;
}
.ai-screen[hidden] { display: none; }
.ai-screen { animation: ai-screen-in 0.32s ease both; }
@keyframes ai-screen-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.ai-wizard .calc-card-title:not(:first-child) { margin-top: 24px; }

/* uses-left badge */
.ai-uses {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 18px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    font-size: 13.5px;
    color: var(--on-surface-variant);
}
.ai-uses .material-symbols-outlined { font-size: 18px; color: var(--secondary); }
.ai-uses-text strong { color: var(--primary); font-weight: 700; }
.ai-screen--upload,
.ai-screen--result { display: flex; flex-direction: column; align-items: center; }
/* .ai-screen--result is a centring flex column, so its children shrink to their
   content width unless told otherwise — .ai-shop joins the existing list. */
.ai-screen--upload .ai-form,
.ai-screen--result .ai-result-figure,
.ai-screen--result .ai-next,
.ai-screen--result .ai-result-actions { width: 100%; }

.ai-upload {
    display: block;
    position: relative;
    border: 2px dashed var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface-container-low);
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    margin-bottom: 8px;
}
.ai-upload:hover { border-color: var(--secondary); background: var(--surface-container); }
.ai-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ai-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ai-upload-inner .material-symbols-outlined { font-size: 40px; color: var(--secondary); }
.ai-upload-text { font-weight: 600; color: var(--primary); }
.ai-upload-hint { font-size: 13px; color: var(--on-surface-variant); }
.ai-upload-preview { max-width: 100%; max-height: 240px; border-radius: var(--radius); display: block; margin: 0 auto; }

.ai-submit { margin-top: 24px; }
.ai-submit[disabled] { opacity: 0.55; cursor: not-allowed; }
.ai-form-status { margin: 12px 0 0; font-size: 14px; font-weight: 600; min-height: 18px; text-align: center; }
.ai-form-status.is-error { color: var(--error); }
.ai-form-status.is-success { color: #1b7f4b; }
.ai-form-status.is-loading { color: var(--secondary); }

/* ---- loading screen ---- */
.ai-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 0 8px;
}
.ai-loader-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
}
.ai-loader-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.9) brightness(0.92);
}
.ai-loader-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
    animation: ai-scan 2.1s ease-in-out infinite;
}
@keyframes ai-scan {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
}
.ai-loader-spark {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 26px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    animation: ai-spark 1.6s ease-in-out infinite;
}
@keyframes ai-spark {
    0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.1) rotate(8deg); }
}
.ai-loader-msg {
    margin: 20px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    min-height: 22px;
}
.ai-loader-bar {
    width: 100%;
    max-width: 420px;
    height: 8px;
    margin: 16px 0 10px;
    border-radius: 999px;
    background: var(--surface-container);
    overflow: hidden;
}
.ai-loader-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    transition: width 0.4s ease;
}
.ai-loader-hint { margin: 6px 0 0; font-size: 13px; color: var(--on-surface-variant); }

@media (prefers-reduced-motion: reduce) {
    .ai-screen,
    .ai-loader-scan,
    .ai-loader-spark { animation: none; }
}

/* ---- result screen ---- */
.ai-result-figure { margin: 0 0 18px; width: 100%; }
.ai-result-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
    border: 1px solid var(--outline-variant);
}
.ai-result-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.ai-disclaimer {
    margin: 28px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--on-surface-variant);
    text-align: center;
}

/* ---- Tool responsive ---- */
@media (max-width: 900px) {
    .calc { grid-template-columns: 1fr; }
    .calc-result { position: static; }
}
@media (max-width: 540px) {
    .calc-card { padding: 24px 20px; }
    .calc-row { grid-template-columns: 1fr 1fr; grid-template-areas: "length width" "area remove"; align-items: end; }
    .calc-times { display: none; }
    .calc-result-headline-value { font-size: 34px; }
}

/* ==========================================================================
   TRADE ACCOUNT — My Account dashboard banner
   ========================================================================== */
.trade-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 8px 24px rgba(1, 15, 102, 0.18);
}
.trade-banner .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 30px;
    color: var(--secondary-container);
}
.trade-banner-text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}
.trade-banner-text strong {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.01em;
}
.trade-banner-text span {
    font-size: 14px;
    color: var(--primary-fixed-dim);
}

/* ==========================================================================
   MOBILE SCROLL CONTAINMENT
   The page scrolls vertically and nothing else. Horizontal movement is only
   ever allowed *inside* a designated scroller (carousels, wide tables, code
   blocks, filter rails), and dragging one of those must never drag the page
   behind it.

   Three things make that work:
     1. `overflow-x: clip` on html/body (see RESET) — the viewport itself has
        nowhere to scroll sideways.
     2. `overscroll-behavior` on every inner scroller — when you hit the end
        of a carousel the gesture stops there instead of chaining out to the
        page ("scroll chaining"), which is what made the site feel loose.
     3. Anything that can be intrinsically wider than a phone (media, embeds,
        tables, long unbroken strings) is capped or given its own scroller.
   ========================================================================== */

/* ---- 1. Inner horizontal scrollers: contain the gesture ---- */
.ourwork-filters,
.blog-filters-tabs,
.product-tabs-nav,
.product-spec-chips,
.entry-content pre,
.entry-content .wp-block-code,
.entry-content .wp-block-table,
.table-scroll {
    /* Stops an overscrolling swipe from bleeding into the page scroll. */
    overscroll-behavior-x: contain;
}

/* Vertical inner scrollers (drawers, modals, the search overlay) get the same
   treatment on the Y axis so bouncing at their end doesn't scroll the page. */
.mobile-nav,
.trade-modal-dialog,
.blog-search-overlay,
.shop-sidebar {
    overscroll-behavior: contain;
}

/* The trade modal sized itself past a narrow viewport; keep it in bounds. */
.trade-modal-dialog {
    max-width: min(560px, 100%);
    overflow-x: clip;
}

/* ---- 2. Carousels: swipeable sideways, page stays put ---- */
.testimonial-viewport {
    /* `pan-y` hands vertical drags to the page and horizontal drags to the
       carousel's own swipe handler in main.js — so a sideways swipe moves the
       reviews, never the whole screen. */
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}
.testimonial-track {
    /* Suppressed while a finger is down so the slide tracks the drag 1:1;
       main.js toggles .is-dragging. */
    will-change: transform;
}
.testimonial-track.is-dragging {
    transition: none;
}
.testimonial-carousel {
    /* Nothing inside the carousel should ever be text-selected mid-swipe. */
    -webkit-user-select: none;
    user-select: none;
}

/* ---- 3. Things that are intrinsically too wide for a phone ---- */
img,
video,
canvas,
svg,
iframe,
embed,
object {
    max-width: 100%;
}

/* Long URLs, SKUs and email addresses in body copy are a classic cause of a
   page that scrolls sideways by a few stubborn pixels. */
.entry-content,
.contact-card-text,
.footer-description,
.faq-answer {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Wide tables scroll in their own box rather than stretching the article. */
.entry-content .wp-block-table,
.table-scroll {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- 4. iOS: stop the auto-zoom that makes the page pannable ---- */
/* Safari on iOS zooms the whole page in when you focus a form control whose
   font-size is under 16px, and it does NOT zoom back out afterwards. The page
   is then wider than the screen and pans freely in every direction — the main
   reason the site felt "loose side to side" after touching a form. 16px is the
   threshold, so pin every text control to it on touch-sized screens. */
@media (max-width: 768px) {
    /* `:is()` keeps this readable while the chain of `:not()`s deliberately
       carries enough specificity to beat the theme's own per-component field
       rules (.contact-field select, .footer-newsletter-form input, …). */
    :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]) {
        font-size: 16px;
    }
}

/* ---- 5. Nothing may leak out of the page box ---- */
.site-header,
.site-main,
.site-footer {
    max-width: 100%;
}

/* ==========================================================================
   PRODUCT CARD — QUANTITY PROMPT DIALOG
   Opened by the cart icon on a product card so the customer states how many m²
   they need before anything reaches the cart. Reuses the trade modal's shape,
   spacing and button styles so it reads as part of the same system.
   ========================================================================== */
.qty-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.qty-modal.is-open { opacity: 1; visibility: visible; }

.qty-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 15, 102, 0.55);
    backdrop-filter: blur(2px);
}

.qty-modal-dialog {
    position: relative;
    width: 100%;
    max-width: min(420px, 100%);
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(1, 15, 102, 0.28);
    padding: 32px 28px 28px;
    transform: translateY(12px);
    transition: transform 0.25s ease;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.qty-modal.is-open .qty-modal-dialog { transform: translateY(0); }

.qty-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
}
.qty-modal-close:hover { background: var(--surface-container); color: var(--primary); }

.qty-modal-title {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--primary);
    margin: 0 32px 4px 0;
}
.qty-modal-product {
    font-size: 15px;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin: 0 0 20px;
}
.qty-modal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-surface);
    margin-bottom: 8px;
}

/* Stepper: big touch targets either side of the field so the control works as
   well with a thumb as with a keyboard. */
.qty-modal-stepper {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.qty-modal-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 52px;
    flex: 0 0 48px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container-lowest);
    color: var(--primary);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.qty-modal-step:hover { background: var(--surface-container); border-color: var(--primary); }
.qty-modal-step:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.qty-modal-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 12px;
    text-align: center;
    font-family: var(--font-body);
    /* 16px keeps iOS Safari from zooming the page in on focus. */
    font-size: 16px;
    font-weight: 600;
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
}
.qty-modal-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-fixed);
}
.qty-modal-input[aria-invalid="true"] { border-color: var(--error); }
/* Hide the native spinners — the custom stepper replaces them and enforces the
   product's step value, which the native arrows would ignore. */
.qty-modal-input::-webkit-outer-spin-button,
.qty-modal-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-modal-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.qty-modal-hint {
    min-height: 18px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--on-surface-variant);
}
.qty-modal-error {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--error);
}
.qty-modal-submit { width: 100%; margin-top: 18px; }

/* Lock the page behind the dialog. Same reasoning as the mobile menu: the root
   element, not <body>, so `position: sticky` on the header keeps working. The
   !important matches a plugin's `html { overflow-y: scroll !important }`. */
html.qty-modal-open { overflow: hidden !important; }

@media (max-width: 480px) {
    .qty-modal { padding: 16px; }
    .qty-modal-dialog { padding: 28px 20px 24px; }
    .qty-modal-title { font-size: 23px; }
}

/* ==========================================================================
   CART & CHECKOUT — line items, coupon row, opt-in checkbox, mobile layout
   Everything here targets WooCommerce's classic (shortcode) cart and checkout,
   which is what this site renders inside its Elementor pages.
   ========================================================================== */

/* ---- Shared line-item thumbnail -----------------------------------------
   One size and treatment for the cart column and the checkout order summary so
   a product looks the same wherever it's listed. 56px is large enough to
   recognise a tile pattern and small enough not to drive the row height. */
.mourne-line-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.mourne-line-thumb-wrap {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-container);
}
.mourne-line-thumb,
.mourne-line-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mourne-line-name { min-width: 0; }

/* ---- Checkout: "Your order" summary -------------------------------------
   The oversized product name came from the unscoped `.product-name` rule (now
   scoped to .product-card); these rules set the summary's own hierarchy
   explicitly so it can't drift again — name slightly heavier than the figures
   beside it, but the same body font and size family as the rest of the table. */
.woocommerce-checkout-review-order-table td.product-name {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--on-surface);
}
.woocommerce-checkout-review-order-table td.product-name .product-quantity {
    font-weight: 600;
    color: var(--on-surface-variant);
    white-space: nowrap;
}
.woocommerce-checkout-review-order-table td.product-name .variation,
.woocommerce-checkout-review-order-table td.product-name dl {
    font-size: 13px;
    font-weight: 400;
    color: var(--on-surface-variant);
    margin: 4px 0 0;
}
.woocommerce-checkout-review-order-table td.product-total { font-size: 15px; white-space: nowrap; }

/* The order-summary column is narrow on a phone (~194px at 375px wide), so a
   56px thumbnail leaves too little room for the product name. Trim it here —
   still clearly recognisable, but the name gets the space it needs. */
@media (max-width: 600px) {
    .woocommerce-checkout-review-order-table .mourne-line-thumb-wrap {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }
    .woocommerce-checkout-review-order-table .mourne-line-item { gap: 10px; }
}

/* ---- Coupon row ----------------------------------------------------------
   Checkout ships the coupon form as two floated half-width <p class="form-row">
   columns, so the field and the button never lined up: different widths,
   different heights, and a float clear underneath. Flex puts them on one row,
   matched in height, and lets them wrap deliberately when there isn't room. */
.woocommerce form.checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin: 0 0 24px;
}
.woocommerce form.checkout_coupon .form-row {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
/* WooCommerce puts `<label class="screen-reader-text">Coupon:</label><br>` above
   the field. The label is visually hidden, but the <br> still generates a line
   box, which pushed the input ~12px below the Apply button and was the actual
   reason the two never lined up. */
.woocommerce form.checkout_coupon .form-row > br { display: none; }
.woocommerce form.checkout_coupon .form-row-first {
    flex: 1 1 220px;
    min-width: 0;
}
.woocommerce form.checkout_coupon .form-row-last { flex: 0 0 auto; }
.woocommerce form.checkout_coupon .clear { display: none; }
.woocommerce form.checkout_coupon .input-text {
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
}
.woocommerce form.checkout_coupon button.button {
    height: 48px;
    padding: 0 24px;
    margin: 0;
    white-space: nowrap;
}

/* Cart page coupon: same treatment. Its Apply button was rendering ~50% taller
   than the field beside it. */
.woocommerce .cart .actions .coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    float: none;
}
.woocommerce .cart .actions .coupon .input-text {
    flex: 1 1 200px;
    min-width: 0;
    width: auto;
    height: 48px;
    min-height: 48px;
    margin: 0;
}
.woocommerce .cart .actions .coupon button.button {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 24px;
    margin: 0;
    white-space: nowrap;
}

/* ---- "Update cart" button ------------------------------------------------
   Readability across every state. WooCommerce disables this button until a
   quantity actually changes, and in the disabled state the label was washing
   out against the fill. Keeping the navy fill with white text at a mild opacity
   preserves contrast while still reading as unavailable. */
.woocommerce .cart .actions button[name="update_cart"],
.woocommerce .cart .actions input[name="update_cart"] {
    background-color: var(--primary);
    border: 2px solid var(--primary);
    color: var(--on-primary);
    height: 48px;
    padding: 0 24px;
    opacity: 1;
}
.woocommerce .cart .actions button[name="update_cart"]:hover,
.woocommerce .cart .actions button[name="update_cart"]:focus,
.woocommerce .cart .actions input[name="update_cart"]:hover,
.woocommerce .cart .actions input[name="update_cart"]:focus {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--on-primary);
}
.woocommerce .cart .actions button[name="update_cart"]:focus-visible,
.woocommerce .cart .actions input[name="update_cart"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.woocommerce .cart .actions button[name="update_cart"]:disabled,
.woocommerce .cart .actions input[name="update_cart"]:disabled,
.woocommerce .cart .actions button[name="update_cart"][disabled],
.woocommerce .cart .actions input[name="update_cart"][disabled] {
    /* Element opacity fades the navy fill and the white label towards the page
       background together, so it erodes the contrast between them — that is what
       made the label hard to read under the old blanket `opacity: 0.5`, which
       measured just 3.53:1 against this page's background — below the 4.5:1 AA
       threshold, hence "the text and the button are the same colour". 0.65
       measures 5.75:1 while still clearly reading as unavailable alongside
       `cursor: not-allowed`. (Enabled state measures 16.65:1.) */
    opacity: 0.65;
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    cursor: not-allowed;
}

/* ---- Marketing opt-in / consent checkboxes -------------------------------
   MailPoet (and WooCommerce's own "remember me") emit
   `<label …><br><input type="checkbox"> <span>text</span></label>`. That stray
   <br> is what pushed the box and its wording onto separate lines and out of
   alignment. Plugin markup can't be edited, so the label becomes a flex row and
   the break is neutralised — the box sits on the first line of text and long
   wording wraps in its own column instead of under the box. */
.woocommerce form .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
}
.woocommerce form .woocommerce-form__label-for-checkbox > br,
.woocommerce-checkout .woocommerce-form__label-for-checkbox > br {
    display: none;
}
.woocommerce form .woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    /* Nudges the box onto the optical centre of the first text line. */
    margin: 2px 0 0;
}
.woocommerce form .woocommerce-form__label-for-checkbox > span,
.woocommerce-checkout .woocommerce-form__label-for-checkbox > span {
    flex: 1 1 auto;
    min-width: 0;
}

/* ==========================================================================
   CART — MOBILE LAYOUT
   WooCommerce's `shop_table_responsive` stacks each cell as its own full-width
   bordered row with a generated "Label:" prefix. On a phone that turned one
   product into six tall rows, hid the thumbnail entirely, and left the remove
   "×" floating in an empty band. Re-laid out as one card per product.
   ========================================================================== */
@media (max-width: 768px) {
    .woocommerce-cart table.shop_table_responsive tr.cart_item {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "thumb name"
            "meta  meta";
        gap: 4px 12px;
        align-items: center;
        padding: 16px;
        border: 1px solid var(--outline-variant);
        border-radius: var(--radius-lg);
        background: var(--surface-container-lowest);
        margin-bottom: 12px;
        position: relative;
    }

    /* The thumbnail is present in the markup on every screen — WooCommerce's
       responsive stylesheet just hides it below this breakpoint. Bringing it
       back beside the name is what the brief asked for and needs no new markup. */
    .woocommerce-cart table.shop_table_responsive td.product-thumbnail {
        display: block;
        grid-area: thumb;
        width: 56px;
        padding: 0;
        border: 0;
        text-align: left;
    }
    .woocommerce-cart table.shop_table_responsive td.product-thumbnail img {
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: var(--radius);
        display: block;
    }

    .woocommerce-cart table.shop_table_responsive td.product-name {
        grid-area: name;
        padding: 0 28px 0 0;   /* room for the remove control top-right */
        border: 0;
        text-align: left;
        font-size: 15px;
        line-height: 1.35;
        font-weight: 600;
    }

    /* Price / quantity / subtotal become a compact label-value list under the
       product rather than three full-height bordered bands. */
    .woocommerce-cart table.shop_table_responsive td.product-price,
    .woocommerce-cart table.shop_table_responsive td.product-quantity,
    .woocommerce-cart table.shop_table_responsive td.product-subtotal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0 0;
        border: 0;
        border-top: 1px solid var(--outline-variant);
        margin-top: 8px;
        text-align: right;
        font-size: 14px;
    }
    .woocommerce-cart table.shop_table_responsive td.product-price { grid-area: auto; }
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price,
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity,
    .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal {
        grid-column: 1 / -1;
    }
    /* WooCommerce generates the row label in ::before from data-title. */
    .woocommerce-cart table.shop_table_responsive td::before {
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--on-surface-variant);
        float: none;
    }
    .woocommerce-cart table.shop_table_responsive td.product-name::before,
    .woocommerce-cart table.shop_table_responsive td.product-thumbnail::before,
    .woocommerce-cart table.shop_table_responsive td.product-remove::before {
        display: none;
    }

    /* Remove control pinned to the card's top-right instead of occupying a row. */
    .woocommerce-cart table.shop_table_responsive td.product-remove {
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto;
        padding: 0;
        border: 0;
        background: none;
    }

    .woocommerce-cart table.shop_table_responsive td.product-quantity .quantity { margin: 0; }
    .woocommerce-cart table.shop_table_responsive td.product-quantity .qty { width: 76px; height: 40px; }
    .woocommerce-cart table.shop_table_responsive .cart-qty-pallets {
        display: block;
        margin-top: 4px;
        text-align: right;
    }

    /* --- Answering woocommerce-smallscreen.css ---------------------------
       That stylesheet does two things that fight the card layout:
         1. `tr td { text-align: right !important }` on every cell — which is why
            the product name sat hard against the right edge instead of beside
            its thumbnail. It's declared !important, so it can only be answered
            in kind; limited to the two cells that must read left.
         2. a zebra stripe painted on alternate rows' CELLS
            (`tr:nth-child(2n) td`), which showed through the card as a grey
            band. Setting it on the row isn't enough because the cell paints on
            top — so it's cleared on the cell, with `.cart_item` added to win on
            specificity regardless of stylesheet order rather than by !important. */
    .woocommerce-cart table.shop_table_responsive td.product-thumbnail,
    .woocommerce-cart table.shop_table_responsive td.product-name {
        text-align: left !important;
    }
    .woocommerce-cart table.shop_table_responsive tr.cart_item:nth-child(2n) td {
        background-color: transparent;
    }

    /* The table itself must not keep table semantics once the rows are cards. */
    .woocommerce-cart table.shop_table_responsive,
    .woocommerce-cart table.shop_table_responsive tbody { display: block; width: 100%; }
    .woocommerce-cart table.shop_table_responsive { border: 0; }
    .woocommerce-cart table.shop_table_responsive thead { display: none; }

    /* The actions row (coupon + update) is a normal full-width block here. */
    .woocommerce-cart table.shop_table_responsive tr:not(.cart_item) { display: block; }
    .woocommerce-cart table.shop_table_responsive td.actions {
        display: block;
        padding: 0;
        border: 0;
    }
    .woocommerce .cart .actions .coupon,
    .woocommerce .cart .actions .coupon .input-text,
    .woocommerce .cart .actions button[name="update_cart"] { width: 100%; }
    .woocommerce .cart .actions .coupon button.button { flex: 1 1 auto; }
    .woocommerce .cart .actions button[name="update_cart"] { margin-top: 12px; }

    /* When the coupon row wraps, a short left-aligned button under a full-width
       field looks accidental — make the wrap read as a deliberate stacked
       layout instead. */
    .woocommerce form.checkout_coupon .form-row-first,
    .woocommerce form.checkout_coupon .form-row-last { flex: 1 1 100%; }
    .woocommerce form.checkout_coupon button.button { width: 100%; }

    /* Totals + checkout button read better full width on a phone. */
    .woocommerce-cart .cart_totals { margin-top: 24px; }
    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; }
}

/* ==========================================================================
   AI VISUALISER — "shop this tile" close-out
   Sits between the generated render and the download/start-over buttons, so the
   result screen ends on the product the customer just previewed. Built from the
   same tokens as .calc-card so it reads as part of the tool, not a bolted-on ad.
   ========================================================================== */
.ai-shop {
    margin: 24px 0 20px;
}
/* One heading treatment for both routes — buying the tile and asking for a
   quote are presented as equal choices, so neither gets a bigger title. */
.ai-next-heading {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin: 0 0 14px;
}

/* The quote card deliberately shares this shell verbatim: same surface, border,
   radius, padding and shadow as the "get this tile" card, so the two next steps
   carry identical visual weight. */
.ai-shop-card,
.ai-quote-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: 0 18px 40px -32px rgba(1, 15, 102, 0.4);
}
/* `hidden` on a flex container needs an explicit override — the display
   property would otherwise win and every card would show at once. */
.ai-shop-card[hidden] { display: none; }

.ai-shop-media {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-container);
    display: block;
}
.ai-shop-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ai-shop-info { flex: 1 1 auto; min-width: 0; }
.ai-shop-name {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 4px;
}
.ai-shop-name a { color: inherit; }
.ai-shop-name a:hover { color: var(--secondary); }
.ai-shop-price {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--on-surface-variant);
}
.ai-shop-price .price-unit { font-size: 14px; }
.ai-shop-stock {
    margin: -6px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--error);
}
.ai-shop-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-shop-actions .btn { flex: 0 1 auto; }

.ai-shop-fallback {
    text-align: center;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 24px;
}
.ai-shop-fallback[hidden] { display: none; }
.ai-shop-fallback-text {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--on-surface-variant);
}

@media (max-width: 560px) {
    /* Stack on narrow phones so the tile name and price aren't squeezed into a
       thin column beside the thumbnail. */
    .ai-shop-card,
    .ai-quote-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 14px;
    }
    .ai-shop-media {
        flex: 0 0 auto;
        width: 100%;
        height: 180px;
    }
    .ai-shop-actions { flex-direction: column; }
    .ai-shop-actions .btn { width: 100%; }
}

/* ==========================================================================
   AI VISUALISER — the two next steps
   The result screen offers two routes of equal standing: buy the tile, or ask
   for a free personalised quote. Someone who likes the render but isn't ready
   to order by the square metre should see an equally obvious way forward.
   ========================================================================== */
.ai-next { margin: 24px 0 20px; }
.ai-next .ai-shop { margin: 0; }

/* "or" divider — a rule either side of the word, so the two blocks read as
   alternatives rather than a sequence. */
.ai-next-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--on-surface-variant);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ai-next-or::before,
.ai-next-or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--outline-variant);
}
.ai-next-or span { flex: 0 0 auto; }

/* Icon block sized to match the product thumbnail opposite it, so the two cards
   line up and neither looks lighter than the other. */
.ai-quote-icon {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary-fixed);
    color: var(--primary);
    font-size: 44px;
}
.ai-quote-info { flex: 1 1 auto; min-width: 0; }
.ai-quote-text {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--on-surface-variant);
}
.ai-quote-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 560px) {
    .ai-quote-icon {
        flex: 0 0 auto;
        width: 100%;
        height: 92px;
        font-size: 40px;
    }
    .ai-quote-actions { flex-direction: column; }
    .ai-quote-actions .btn { width: 100%; }
    .ai-next-or { margin: 18px 0; }
}