/* ============================================================================
   Big Red Trailers — Main Stylesheet
   Brand: #bf1d2d (red), #0a0a0a (black), #d9d9d9 (grey), #f2f0ed (off-white)
   Fonts: Bebas Neue (headings), Barlow / Barlow Condensed (body)
   ============================================================================ */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --red: #bf1d2d;
    --red-dark: #9a1724;
    --red-light: #d4354a;
    --black: #0a0a0a;
    --grey-900: #1a1a1a;
    --grey-700: #4a4a4a;
    --grey-500: #6b6b6b;
    --grey-200: #e5e2de;
    --grey-300: #d9d9d9;
    --grey-100: #f2f0ed;
    --white: #ffffff;
    --green: #2d8a4e;
    --amber: #d4a017;
    --font-heading: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    --font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --max-width: 1280px;
    --nav-height: 64px;
    --radius: 6px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.15);
    --transition: .2s ease;
    /* MTO configurator tokens */
    --red-tint: #fdf3f4;
    --red-ring: rgba(191,29,45,.18);
    --hairline: var(--grey-300);
    --radius-sm: 4px;
    --dur-fast: 120ms;
    --dur-med: 200ms;
    --dur-slow: 280ms;
    --ease-out: cubic-bezier(.2,.8,.3,1);
    --ease-std: cubic-bezier(.2,0,0,1);
    --shadow-press: 0 1px 2px rgba(0,0,0,.12);
    --stripe: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(10,10,10,.04) 6px, rgba(10,10,10,.04) 12px);
}

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    color: var(--black);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; letter-spacing: .02em; line-height: 1.1; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }

.section-title { margin-bottom: 1.5rem; position: relative; }
.section-title::after { content: ''; display: block; width: 50px; height: 3px; background: var(--red); margin-top: .4rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .7rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius);
    font-family: var(--font-condensed); font-weight: 600; font-size: .95rem;
    text-transform: uppercase; letter-spacing: .04em;
    cursor: pointer; transition: all var(--transition);
    white-space: nowrap;
}
.btn-primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-secondary { background: transparent; color: var(--white); border-color: var(--white); }
.btn-secondary:hover { background: var(--white); color: var(--black); }
.btn-outline { background: transparent; color: var(--red); border-color: var(--red); }
.btn-outline:hover { background: var(--red); color: var(--white); }
.btn-sm { padding: .4rem 1rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Announcement Bar ─────────────────────────────────────────────────────── */
.announcement-bar {
    background: var(--red); color: var(--white);
    text-align: center; padding: .5rem 1rem;
    font-size: .85rem; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.announcement-bar a { color: var(--white); text-decoration: underline; }
.announcement-bar .close-btn {
    background: none; border: none; color: var(--white); cursor: pointer;
    font-size: 1.1rem; padding: .2rem; opacity: .8;
}
.announcement-bar .close-btn:hover { opacity: 1; }

/* ── Top Bar (currency + account) ─────────────────────────────────────────── */
.top-bar {
    background: var(--grey-100); border-bottom: 1px solid var(--grey-300);
    font-size: .8rem; padding: .35rem 0;
}
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.top-bar-links { display: flex; gap: 1rem; align-items: center; }
.top-bar-links a:hover { color: var(--red); }
.currency-toggle {
    display: flex; gap: 0; border: 1px solid var(--grey-300); border-radius: var(--radius); overflow: hidden;
}
.currency-toggle button {
    padding: .15rem .5rem; border: none; background: var(--white);
    cursor: pointer; font-size: .75rem; font-weight: 600;
    transition: all var(--transition);
}
.currency-toggle button.active { background: var(--red); color: var(--white); }

/* ── Header / Nav ─────────────────────────────────────────────────────────── */
.site-header {
    background: var(--white); border-bottom: 1px solid var(--grey-300);
    position: sticky; top: 0; z-index: 100;
    box-shadow: var(--shadow-sm);
}
.site-header .container {
    display: flex; align-items: center; gap: 1.5rem;
    height: var(--nav-height);
}
.site-logo img { height: 42px; width: auto; }
.site-logo { flex-shrink: 0; }

.main-nav { display: flex; gap: .2rem; flex: 1; }
.main-nav > li { position: relative; }
.main-nav > li > a {
    display: flex; align-items: center; gap: .3rem;
    padding: .5rem .8rem; font-family: var(--font-condensed);
    font-weight: 600; font-size: .95rem; text-transform: uppercase;
    letter-spacing: .03em; transition: color var(--transition);
}
.main-nav > li > a:hover, .main-nav > li.active > a { color: var(--red); }
.nav-arrow { font-size: .6rem; transition: transform var(--transition); }

/* Dropdown */
.nav-dropdown {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--white); border: 1px solid var(--grey-300);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    min-width: 220px; padding: .5rem 0; z-index: 101;
}
.main-nav > li:hover > .nav-dropdown { display: block; }
.nav-dropdown a {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; font-size: .9rem;
    transition: all var(--transition);
}
.nav-dropdown a:hover { background: var(--grey-100); color: var(--red); }
.nav-dropdown .brand-logo-sm { height: 20px; width: auto; filter: grayscale(1); transition: filter var(--transition); }
.nav-dropdown a:hover .brand-logo-sm { filter: grayscale(0); }

/* Mobile-only nav entries (Sign In / currency / track) — the top bar that
   carries these on desktop is hidden on phones. */
.mobile-nav-extra { display: none; }

/* Search bar */
.header-search {
    display: flex; align-items: center; flex: 1; max-width: 320px;
    position: relative;
}
/* The form must fill the box — the magnifier/× are positioned against
   .header-search, so a shrink-wrapped form leaves them floating detached
   to the right of the input. */
.header-search form { flex: 1 1 auto; }
.header-search input {
    width: 100%; padding: .45rem .8rem; padding-right: 2.5rem;
    border: 1px solid var(--grey-300); border-radius: var(--radius);
    font-size: .9rem; transition: border-color var(--transition);
    background: var(--grey-100);
}
.header-search input:focus { outline: none; border-color: var(--red); background: var(--white); }
.search-results-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border: 1px solid var(--grey-200);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 1000; max-height: 400px; overflow-y: auto;
}
.search-results-dropdown a { text-decoration: none; color: var(--black); transition: background var(--transition); }
.search-results-dropdown a:hover { background: var(--grey-100); }
.search-results-dropdown img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; border-radius: 4px; }
.header-search button {
    position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--grey-500);
    padding: .55rem; /* 44px-ish tap target around the 18px icon */
}
/* Clear-search × — shown only while a term is persisted */
.header-search.has-term input { padding-right: 4.2rem; }
.search-clear {
    position: absolute; right: 2.2rem; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; line-height: 18px; text-align: center;
    font-size: 1.05rem; color: var(--grey-500); background: var(--grey-300);
    border-radius: 50%; text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.search-clear:hover { background: var(--red); color: var(--white); }

/* Cart & account icons */
.header-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.header-actions a {
    display: flex; align-items: center; gap: .3rem;
    font-size: .85rem; font-weight: 500;
    transition: color var(--transition);
}
.header-actions a:hover { color: var(--red); }
.cart-count {
    background: var(--red); color: var(--white);
    font-size: .7rem; font-weight: 700;
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Mobile hamburger */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }
.nav-toggle span {
    display: block; width: 22px; height: 2px; background: var(--black);
    margin: 5px 0; transition: all var(--transition);
}

/* ── Hero Banner ──────────────────────────────────────────────────────────── */
.hero {
    background: var(--black); color: var(--white);
    position: relative; overflow: hidden;
    min-height: 480px;
}
.hero-video-wrap {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.hero-poster {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1s ease;
}
.hero-video.loaded { opacity: 1; }
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 60%, transparent 100%);
    z-index: 1;
}
.hero-slide {
    display: none; align-items: center;
    padding: 3rem 0; min-height: 480px;
    position: relative; z-index: 2;
}
.hero-slide.active { display: flex; }
.hero-content { max-width: 540px; }
.hero-tagline {
    font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1; margin-bottom: .8rem; text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.hero-subtitle { font-size: 1.15rem; color: var(--grey-200); margin-bottom: 1.5rem; max-width: 440px; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Section spacing ──────────────────────────────────────────────────────── */
.section { padding: 3rem 0; }
.section-grey { background: var(--grey-100); }
.section-white { background: var(--white); }

/* ── Category Grid ────────────────────────────────────────────────────────── */
.category-grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .75rem;
}
.category-card {
    position: relative; border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 1; cursor: pointer; width: calc(12.5% - .75rem); min-width: 120px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.category-card img {
    width: 100%; height: 100%; object-fit: cover;
}
.category-card-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--grey-200) 0%, var(--grey-300) 100%);
    display: flex; align-items: center; justify-content: center;
}
.category-card-placeholder svg {
    width: 36px; height: 36px; opacity: .3;
}
.category-card-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: .5rem .6rem; background: linear-gradient(transparent, rgba(0,0,0,.8));
    color: var(--white);
}
.category-card-name {
    font-family: var(--font-condensed); font-weight: 700;
    font-size: .8rem; text-transform: uppercase; line-height: 1.2;
}
.category-card-count { font-size: .65rem; color: var(--grey-300); }
.category-card-cta {
    background: var(--red); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-condensed); font-weight: 700;
    font-size: .8rem; text-transform: uppercase;
}

/* ── Brand Strip ──────────────────────────────────────────────────────────── */
.brand-strip {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .75rem;
}
.brand-logo-link {
    position: relative; border-radius: var(--radius); overflow: hidden;
    width: calc(12.5% - .75rem); min-width: 120px; aspect-ratio: 1;
    border: 1px solid var(--grey-300);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    transition: all var(--transition);
}
.brand-logo-link:hover { border-color: var(--red); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.brand-logo-link img {
    max-width: 80%; max-height: 60%; object-fit: contain;
    filter: grayscale(1); opacity: .6;
    transition: all var(--transition);
}
.brand-logo-link:hover img { filter: grayscale(0); opacity: 1; }
.brand-logo-link.featured img { filter: grayscale(0); opacity: 1; }

/* ── Product Grid ─────────────────────────────────────────────────────────── */
.product-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem; justify-items: center;
    max-width: 1000px; margin: 0 auto;
}
.product-grid-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem;
}
.view-all-link {
    font-family: var(--font-condensed); font-weight: 600;
    text-transform: uppercase; color: var(--red);
    font-size: .9rem;
}
.view-all-link:hover { text-decoration: underline; }

/* ── Product Card ─────────────────────────────────────────────────────────── */
.product-card {
    background: var(--white); border: 1px solid var(--grey-300);
    border-radius: var(--radius); overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: .6rem .8rem 0;
}
.product-card-brand img { height: 20px; width: auto; object-fit: contain; }
.product-card-image {
    padding: .8rem; text-align: center;
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    background: var(--white);
}
.product-card-image img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    transition: transform var(--transition);
}
.product-card:hover .product-card-image img { transform: scale(1.03); }
.product-card-body { padding: .8rem; flex: 1; display: flex; flex-direction: column; }
.product-card-name {
    font-family: var(--font-body); font-weight: 600; font-size: .9rem;
    color: var(--black); margin-bottom: .15rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-brand-name {
    font-size: .75rem; color: var(--grey-500); margin-bottom: .5rem;
}
.product-card-price { margin-bottom: .4rem; }
.price-inc-vat { font-weight: 700; font-size: 1.05rem; color: var(--black); }
.price-ex-vat { font-size: .78rem; color: var(--grey-500); }
.price-compare {
    text-decoration: line-through; color: var(--grey-500);
    font-size: .85rem; margin-right: .3rem;
}
.stock-indicator {
    font-size: .75rem; font-weight: 600; margin-bottom: .6rem;
    display: flex; align-items: center; gap: .3rem;
}
.stock-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.stock-in .stock-dot { background: var(--green); }
.stock-in { color: var(--green); }
.stock-low .stock-dot { background: var(--red); }
.stock-low { color: var(--red); }
.stock-out .stock-dot { background: var(--grey-500); }
.stock-out { color: var(--grey-500); }
.product-card-footer { padding: 0 .8rem .8rem; margin-top: auto; }

/* ── Trust Strip ──────────────────────────────────────────────────────────── */
.trust-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem; text-align: center; padding: 2rem 0;
    border-top: 1px solid var(--grey-300); border-bottom: 1px solid var(--grey-300);
}
.trust-item-icon { font-size: 1.8rem; color: var(--red); margin-bottom: .4rem; }
.trust-item-title { font-family: var(--font-condensed); font-weight: 700; font-size: .95rem; text-transform: uppercase; }
.trust-item-text { font-size: .8rem; color: var(--grey-500); }

/* ── CTA Banner ───────────────────────────────────────────────────────────── */
.cta-banner {
    background: var(--red); color: var(--white);
    text-align: center; padding: 3rem 1rem;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 10px,
        rgba(255,255,255,.03) 10px, rgba(255,255,255,.03) 20px
    );
}
.cta-banner h2 { color: var(--white); margin-bottom: .5rem; }
.cta-banner p { font-size: 1.1rem; margin-bottom: 1.5rem; opacity: .9; }
.cta-banner .btn-secondary { border-color: var(--white); color: var(--white); }
.cta-banner .btn-secondary:hover { background: var(--white); color: var(--red); }

/* ── Newsletter ───────────────────────────────────────────────────────────── */
.newsletter-form {
    display: flex; gap: .5rem; max-width: 480px; margin: 0 auto;
}
.newsletter-form input {
    flex: 1; padding: .7rem 1rem;
    border: 1px solid var(--grey-300); border-radius: var(--radius);
    font-size: .95rem;
}
.newsletter-form input:focus { outline: none; border-color: var(--red); }
.newsletter-msg {
    font-size: .9rem; margin-top: .5rem; min-height: 1.4em; text-align: center;
}
.newsletter-msg-ok { color: var(--green); font-weight: 600; }
.newsletter-msg-err { color: var(--red); font-weight: 600; }
.newsletter-note { font-size: .8rem; color: var(--grey-500); margin-top: .5rem; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { background: var(--black); color: var(--grey-300); padding: 3rem 0 1.5rem; }
.footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem; margin-bottom: 2rem;
}
.footer-brand p { font-size: .85rem; line-height: 1.6; margin-top: .8rem; }
.footer-heading {
    font-family: var(--font-condensed); font-weight: 700;
    font-size: .95rem; text-transform: uppercase; color: var(--white);
    margin-bottom: .8rem;
}
.footer-links li { margin-bottom: .4rem; }
.footer-links a { font-size: .85rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--red); }
.footer-contact { font-size: .85rem; line-height: 1.8; }
.footer-contact a:hover { color: var(--red); }
.footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--grey-900); color: var(--grey-300);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.footer-social a:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.footer-bottom {
    border-top: 1px solid var(--grey-900);
    padding-top: 1rem; display: flex; justify-content: space-between;
    align-items: center; font-size: .8rem; color: var(--grey-500);
}
.payment-icons { display: flex; gap: .5rem; align-items: center; }
.payment-icons img { height: 24px; }

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
.breadcrumbs {
    padding: .8rem 0; font-size: .82rem; color: var(--grey-500);
}
.breadcrumbs a { transition: color var(--transition); }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs .sep { margin: 0 .4rem; }

/* ── Product Detail Page ──────────────────────────────────────────────────── */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; overflow: hidden; }
.product-gallery { position: relative; min-width: 0; overflow: hidden; }
.product-info { min-width: 0; overflow-wrap: break-word; }
.gallery-main {
    aspect-ratio: 1; background: var(--grey-100); border-radius: var(--radius);
    overflow: hidden; cursor: zoom-in; margin-bottom: .8rem;
    position: relative;
}
.gallery-main img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}
.gallery-thumbs { display: flex; gap: .5rem; overflow-x: auto; }
.gallery-thumb {
    width: 72px; height: 72px; flex-shrink: 0;
    border: 2px solid var(--grey-300); border-radius: 4px;
    overflow: hidden; cursor: pointer;
    transition: border-color var(--transition);
}
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--red); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.gallery-tabs { display: flex; gap: 0; margin-bottom: .8rem; }
.gallery-tab {
    padding: .5rem 1rem; border: 1px solid var(--grey-300);
    background: var(--white); cursor: pointer;
    font-family: var(--font-condensed); font-weight: 600;
    font-size: .85rem; text-transform: uppercase;
    transition: all var(--transition);
}
.gallery-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.gallery-tab:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.gallery-tab.active { background: var(--red); color: var(--white); border-color: var(--red); }
/* 3D Viewer (overlays gallery-main) */
.model-viewer-container {
    background: var(--grey-100); border-radius: var(--radius); overflow: hidden;
}
.model-viewer-container model-viewer { width: 100%; height: 100%; }

/* Product Info */
.product-info-brand {
    display: inline-flex; align-items: center; gap: .6rem;
    margin-bottom: 1rem; padding: .6rem 1rem;
    border: 1px solid var(--grey-300); border-radius: var(--radius);
    text-decoration: none;
    transition: all var(--transition);
}
.product-info-brand:hover { border-color: var(--red); box-shadow: var(--shadow-sm); text-decoration: none; }
.product-info-brand img { height: 40px; width: auto; object-fit: contain; }
.product-info-brand-name { font-weight: 600; font-size: .95rem; color: var(--grey-700); }
.product-title { margin-bottom: .5rem; text-transform: none; font-family: var(--font-body); font-weight: 700; font-size: 1.6rem; }
.product-sku { font-size: .8rem; color: var(--grey-500); margin-bottom: 1rem; }
.product-price-block { margin-bottom: 1rem; }
.product-price-inc { font-size: 1.5rem; font-weight: 700; }
.product-price-ex { font-size: .9rem; color: var(--grey-500); }
.product-price-alt { font-size: .85rem; color: var(--grey-500); margin-top: .3rem; }

/* Variant swatches */
.variant-selector { margin-bottom: 1.25rem; }
.variant-option-group { margin-bottom: .9rem; }
.variant-option-label {
    display: flex; align-items: baseline; gap: .4rem;
    font-size: .85rem; color: var(--grey-700); margin-bottom: .45rem;
}
.variant-option-label span { font-weight: 600; }
.variant-option-current { color: var(--black); font-weight: 700; }
.variant-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.variant-swatch {
    min-width: 3.25rem; padding: .55rem .9rem;
    border: 2px solid var(--grey-300); border-radius: var(--radius);
    background: #fff; color: var(--black);
    font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}
.variant-swatch:hover { border-color: var(--black); transform: translateY(-1px); }
.variant-swatch.is-selected {
    border-color: var(--red); background: var(--red); color: #fff;
}
.variant-swatch.is-unavailable {
    opacity: .45; cursor: not-allowed;
    text-decoration: line-through;
    border-color: var(--grey-300); background: var(--grey-100); color: var(--grey-500);
}
.variant-swatch.is-unavailable:hover { transform: none; border-color: var(--grey-300); }
.variant-swatch.is-selected.is-unavailable { background: var(--grey-300); color: var(--grey-700); border-color: var(--grey-300); }

/* Legacy select fallback (kept for safety) */
.variant-selector select {
    width: 100%; padding: .6rem .8rem; border: 1px solid var(--grey-300);
    border-radius: var(--radius); font-size: .95rem;
    background: var(--white); cursor: pointer;
}

/* Quantity + Add to Cart */
.add-to-cart-row { display: flex; gap: .8rem; margin-bottom: 1rem; align-items: stretch; }
.qty-selector {
    display: flex; border: 1px solid var(--grey-300); border-radius: var(--radius); overflow: hidden;
}
.qty-selector button {
    width: 40px; background: var(--grey-100); border: none; cursor: pointer;
    font-size: 1.1rem; transition: background var(--transition);
}
.qty-selector button:hover { background: var(--grey-300); }
.qty-selector input {
    width: 50px; text-align: center; border: none;
    border-left: 1px solid var(--grey-300); border-right: 1px solid var(--grey-300);
    font-weight: 600;
}
.qty-selector input:focus { outline: none; }
.add-to-cart-btn { flex: 1; }

/* Product tabs */
.product-tabs { margin-top: 2rem; }
.product-tabs-nav { display: flex; gap: 0; border-bottom: 2px solid var(--grey-300); }
.product-tab-btn {
    padding: .7rem 1.5rem; background: none; border: none;
    font-family: var(--font-condensed); font-weight: 600;
    font-size: .95rem; text-transform: uppercase; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all var(--transition); color: var(--grey-500);
}
.product-tab-btn.active { color: var(--red); border-bottom-color: var(--red); }
.product-tab-content { display: none; padding: 1.5rem 0; }
.product-tab-content.active { display: block; }
.product-description { line-height: 1.8; }
.product-description p { margin-bottom: 1rem; }
.product-description ul,
.product-description ol { margin: 0 0 1rem 1.25rem; padding-left: 1rem; }
.product-description ul { list-style: disc; }
.product-description ol { list-style: decimal; }
.product-description li { margin-bottom: .4rem; }
.product-description h2,
.product-description h3,
.product-description h4 { margin: 1.25rem 0 .6rem; font-family: var(--font-condensed); font-weight: 700; }
.product-description h2 { font-size: 1.35rem; }
.product-description h3 { font-size: 1.15rem; }
.product-description h4 { font-size: 1rem; }
.product-description a { color: var(--red); text-decoration: underline; }

/* Related products */
.related-products { margin-top: 3rem; }

/* ── Shop / Category Page ─────────────────────────────────────────────────── */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; }
.shop-sidebar { position: sticky; top: calc(var(--nav-height) + 1rem); align-self: start; }
.filter-group { margin-bottom: 1.5rem; }
.filter-group-title {
    font-family: var(--font-condensed); font-weight: 700;
    font-size: .9rem; text-transform: uppercase;
    margin-bottom: .5rem; padding-bottom: .3rem;
    border-bottom: 1px solid var(--grey-300);
}
.filter-option { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; font-size: .9rem; cursor: pointer; }
.filter-option input { accent-color: var(--red); }

.shop-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--grey-300);
}
.shop-toolbar-info { font-size: .85rem; color: var(--grey-500); }
.shop-sort select {
    padding: .4rem .8rem; border: 1px solid var(--grey-300);
    border-radius: var(--radius); font-size: .85rem;
    background: var(--white);
}

/* Pagination */
.pagination-gap { padding: .4rem .2rem; color: var(--grey-500); }
.pagination { display: flex; justify-content: center; gap: .3rem; margin-top: 2rem; }
.pagination a, .pagination span {
    padding: .4rem .8rem; border: 1px solid var(--grey-300);
    border-radius: var(--radius); font-size: .85rem;
    transition: all var(--transition);
}
.pagination a:hover { border-color: var(--red); color: var(--red); }
.pagination .active { background: var(--red); color: var(--white); border-color: var(--red); }

/* ── Brand Page ───────────────────────────────────────────────────────────── */
.brand-header { text-align: center; padding: 2rem 0; }
.brand-header img { height: 80px; margin: 0 auto 1rem; }
.brand-header p { max-width: 600px; margin: 0 auto; color: var(--grey-500); }

/* ── Search Page ──────────────────────────────────────────────────────────── */
.search-header { padding: 1.5rem 0; }
.search-header h1 { text-transform: none; font-family: var(--font-body); }
.search-query { color: var(--red); }
.no-results { text-align: center; padding: 3rem; color: var(--grey-500); }

/* ── Cart Drawer (mini-cart) ──────────────────────────────────────────────── */
.cart-drawer {
    position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw;
    height: 100vh; background: var(--white); z-index: 200;
    box-shadow: var(--shadow-lg);
    transition: right .3s ease; display: flex; flex-direction: column;
}
.cart-drawer.open { right: 0; }
.cart-drawer-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.4); z-index: 199;
    display: none;
}
.cart-drawer-overlay.open { display: block; }
.cart-drawer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem; border-bottom: 1px solid var(--grey-300);
}
.cart-drawer-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; }
.cart-drawer-items { flex: 1; overflow-y: auto; padding: 1rem; }
.cart-drawer-item {
    display: flex; gap: .8rem; padding: .8rem 0;
    border-bottom: 1px solid var(--grey-100);
}
.cart-drawer-item-img { width: 64px; height: 64px; flex-shrink: 0; }
.cart-drawer-item-img img { width: 100%; height: 100%; object-fit: contain; }
.cart-drawer-item-info { flex: 1; }
.cart-drawer-item-name { font-weight: 600; font-size: .85rem; margin-bottom: .2rem; }
.cart-drawer-item-price { font-size: .85rem; }
.cart-drawer-item-qty { font-size: .8rem; color: var(--grey-500); }
.cart-drawer-item-remove {
    background: none; border: none; color: var(--grey-500); cursor: pointer;
    font-size: .8rem;
}
.cart-drawer-item-remove:hover { color: var(--red); }
.cart-drawer-footer {
    padding: 1rem; border-top: 1px solid var(--grey-300);
}
.cart-drawer-total {
    display: flex; justify-content: space-between;
    font-weight: 700; font-size: 1.1rem; margin-bottom: .8rem;
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lightbox {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.9); z-index: 300;
    display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.lightbox-close {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none; color: var(--white);
    font-size: 2rem; cursor: pointer;
}

/* ── Flash messages ───────────────────────────────────────────────────────── */
.flash { padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; }
.flash-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.flash-error { background: #fce4ec; color: #c62828; border: 1px solid #f8bbd0; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .category-card { width: calc(16.66% - .75rem); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero .container { flex-direction: column; text-align: center; }
    .hero-content { flex: none; }
    .hero-cta { justify-content: center; }
    .hero-subtitle { margin: 0 auto .5rem; }
    .product-detail { grid-template-columns: 1fr; }
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { position: static; }
}

@media (max-width: 768px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .category-card { width: calc(25% - .75rem); }
    .trust-strip { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .newsletter-form { flex-direction: column; }

    /* Mobile nav */
    .main-nav {
        display: none; position: fixed; top: var(--nav-height);
        left: 0; right: 0; bottom: 0; background: var(--white);
        flex-direction: column; padding: 1rem; z-index: 100;
        overflow-y: auto; gap: 0;
    }
    .main-nav.open { display: flex; }
    .main-nav > li > a { padding: .8rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--grey-100); }
    .nav-dropdown { position: static; box-shadow: none; border: none; padding-left: 1rem; display: none; }
    .main-nav > li.dropdown-open > .nav-dropdown { display: block; }
    /* margin-left:auto pins burger + cart to the right edge as one group;
       without it they float left-packed mid-header next to the logo. */
    .nav-toggle { display: block; margin-left: auto; }
    /* Search stays available on mobile as a full-width second header row —
       parts customers search by SKU; hiding it was a dead end. The desktop
       320px cap must lift here or the row stops short of the right edge. */
    .header-search { order: 5; flex: 1 1 100%; max-width: none; margin-top: .6rem; }
    .header-search input { width: 100%; }
    .site-header .container { flex-wrap: wrap; }
    .top-bar { display: none; }

    /* Inline-styled two-column layouts collapse to one column (classes are
       applied in the templates; inline style attrs can't be media-queried). */
    .two-col-sidebar, .two-col-even { grid-template-columns: 1fr !important; }

    .hero-tagline { font-size: 2.2rem; }
    .hero-slide { min-height: 320px; }
    .hero-video { display: none; }

    .add-to-cart-row { flex-direction: column; }
    .cta-banner .hero-cta { flex-direction: column; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .product-card-body { padding: .5rem; }
    .product-card-name { font-size: .8rem; }
    .price-inc-vat { font-size: .9rem; }
}


/* ── July 2026 mobile review fixes ──────────────────────────────────────── */

/* Pagination must wrap (it previously forced the whole shop page to 568px
   on phones) and its links need thumb-sized hit areas. */
.pagination { flex-wrap: wrap; }
.pagination a, .pagination span.active {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Cart page: thumb-sized remove button + steppers */
.cart-remove-btn {
    background: none; border: none; color: var(--grey-500); cursor: pointer;
    font-size: 1.3rem; min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}
.cart-remove-btn:hover { color: var(--red); }
.qty-selector-cart { display: inline-flex; align-items: center; }
.qty-selector-cart .qty-minus, .qty-selector-cart .qty-plus {
    min-width: 40px; min-height: 40px;
    border: 1px solid var(--grey-300); background: var(--grey-100);
    cursor: pointer; font-size: 1rem; border-radius: var(--radius);
}
.qty-selector-cart input {
    width: 48px; text-align: center; border: 1px solid var(--grey-300);
    border-radius: var(--radius); padding: .5rem .2rem; margin: 0 .25rem;
}

/* PDP qty steppers: give the +/- real height (they collapsed to ~21px) */
.qty-selector .qty-minus, .qty-selector .qty-plus { min-height: 44px; }
.qty-selector input { padding: .55rem 0; }

/* Cart drawer remove ×: was ~15px */
.cart-drawer-item-remove {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

/* Announcement dismiss ×: bigger hit area */
.announcement-bar .close-btn { padding: .55rem .8rem; }

/* Product tabs: allow horizontal scroll instead of blowing out the page */
.product-tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tablet band (769–1024px): single-row header needs tighter spacing */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-header .container { gap: .75rem; }
    .header-search { max-width: 220px; }
}

@media (max-width: 768px) {
    /* Two-row header: the container's fixed 64px height made the search row
       overflow the sticky header and float over page content. */
    .site-header .container {
        height: auto;
        min-height: var(--nav-height);
        padding-top: .4rem;
        padding-bottom: .6rem;
    }

    /* Mobile nav extras (Sign In / Track / currency) appear as menu rows. */
    .mobile-nav-extra { display: block; }
    .mobile-nav-currency {
        display: flex; align-items: center; gap: .8rem; padding: .8rem 0;
    }
    .mobile-nav-currency .currency-toggle button {
        padding: .5rem .9rem; font-size: .95rem;
        border: 1px solid var(--grey-300); background: var(--white); cursor: pointer;
    }
    .mobile-nav-currency .currency-toggle button.active {
        background: var(--red); color: var(--white); border-color: var(--red);
    }

    /* iOS zooms the page when focusing any control under 16px. */
    input, select, textarea { font-size: 16px !important; }

    /* Product tabs: tighter padding so three tabs fit a 375px screen */
    .product-tabs-nav button { padding: .7rem .8rem; font-size: .9rem; }

    /* Shop filter rows: comfortable tap height */
    .filter-option { padding: .35rem 0; min-height: 32px; display: flex; align-items: center; gap: .45rem; }
}


/* ── Made-to-order (July 2026; wizard re-design) ─────────────────────────
   No-JS renders the plain stacked form; mto-wizard.js adds .mto-js to the
   container and all wizard chrome is scoped beneath it. */
.new-badge {
    display: inline-block; background: var(--red); color: var(--white);
    font-size: .62rem; font-weight: 700; letter-spacing: .06em;
    padding: .12rem .4rem; border-radius: 3px; vertical-align: middle;
    text-transform: uppercase;
}

.mto-configurator :focus-visible {
    outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--radius);
}

/* Lead-time band — INFORMATION, not a control.
   This used to be a full-width solid-black plate with a hammer emoji and,
   whenever KOS hadn't set lead_time_text, an empty right-hand slot: it looked
   exactly like the primary CTA, so customers tapped it and nothing happened.
   Now it reads as a labelled note: tinted band, rule down the left, the tag
   as a small caps label rather than a button face. */
.mto-leadtime {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    background: var(--grey-100); color: var(--grey-700);
    border-left: 3px solid var(--grey-500);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: .55rem .85rem; margin-bottom: 1rem;
    cursor: default;
}
.mto-leadtime-tag {
    font-family: var(--font-condensed); font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .09em; color: var(--grey-500);
    flex-shrink: 0;
}
.mto-leadtime-tag::after { content: "·"; margin-left: .6rem; color: var(--grey-300); }
.mto-leadtime-time { font-size: .92rem; font-weight: 600; color: var(--black); }

/* Step panels */
.mto-configurator .mto-step {
    border: 1px solid var(--hairline); border-top: 3px solid var(--red);
    border-radius: var(--radius); background: var(--white);
    padding: 1.1rem 1.1rem 1.25rem; margin-bottom: 1rem;
}
.mto-configurator legend {
    font-family: var(--font-heading); font-weight: 400; font-size: 1.6rem;
    text-transform: uppercase; letter-spacing: .03em; line-height: 1.05;
    padding: 0 .3rem;
}
.mto-configurator legend:focus { outline: none; }
.mto-req { color: var(--red); }
.mto-optional { font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--grey-500); text-transform: none; letter-spacing: 0; }
.mto-help { font-size: .85rem; color: var(--grey-500); margin: .35rem 0 .9rem; max-width: 46ch; }

/* Option cards */
.mto-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 640px) {
    .mto-options-visual { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
.mto-option {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; min-height: 56px; padding: .7rem .8rem;
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--white); cursor: pointer; font-size: .9rem; font-weight: 600;
    transition: border-color var(--dur-fast) var(--ease-std),
                box-shadow var(--dur-med) var(--ease-out),
                transform var(--dur-med) var(--ease-out);
}
.mto-option input {
    position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden;
}
.mto-option:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
@media (hover: hover) {
    .mto-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--grey-500); }
    .mto-option-img:hover img { transform: scale(1.04); }
}
.mto-option:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-press); transition-duration: var(--dur-fast); }
.mto-option:has(input:checked) {
    border-color: var(--red);
    box-shadow: 0 0 0 1px var(--red), var(--shadow-sm);
    background: var(--red-tint);
}
.mto-option::after {
    content: ""; position: absolute; top: .4rem; right: .4rem;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--red) center / 13px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    box-shadow: var(--shadow-sm); opacity: 0; transform: scale(.5);
    transition: opacity var(--dur-fast) var(--ease-std);
}
.mto-option:has(input:checked)::after { opacity: 1; transform: scale(1); animation: mtoCheckPop var(--dur-med) var(--ease-out); }
.mto-option-multi::after { border-radius: var(--radius-sm); }
@keyframes mtoCheckPop { from { transform: scale(.5); opacity: 0; } }

/* Image cards */
.mto-option-img {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 0; overflow: hidden; min-height: 0;
}
.mto-opt-media { position: relative; display: block; overflow: hidden; background: var(--grey-100); }
.mto-opt-media img {
    aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block;
    transition: transform var(--dur-slow) var(--ease-out);
}
.mto-option-img .mto-opt-body { padding: .55rem .65rem .6rem; font-size: .88rem; line-height: 1.25; }
.mto-option-img:has(input:checked) { background: var(--white); }
.mto-option-img:has(input:checked) .mto-opt-body { background: var(--red-tint); }
.mto-opt-delta {
    font-family: var(--font-condensed); font-weight: 700; font-size: .8rem;
    letter-spacing: .02em; color: var(--red); white-space: nowrap;
    background: var(--red-tint); padding: .15rem .45rem; border-radius: var(--radius-sm);
    flex-shrink: 0; margin-right: 1.1rem;
}
.mto-opt-media .mto-opt-delta {
    position: absolute; top: .4rem; left: .4rem; margin: 0;
    background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm);
}

/* Fields */
.mto-field-label {
    display: block; font-family: var(--font-condensed); font-weight: 700;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--grey-700); margin-bottom: .3rem;
}
.mto-input, .mto-configurator textarea {
    width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius);
    padding: .65rem .75rem; font-size: 16px; min-height: 48px;
    background: var(--white); color: var(--black);
    transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.mto-configurator textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.mto-input:focus, .mto-configurator textarea:focus {
    border-color: var(--red); box-shadow: 0 0 0 3px var(--red-ring); outline: none;
}
.mto-input[aria-invalid], .mto-configurator [aria-invalid] { border-color: var(--red); background: var(--red-tint); }

.mto-dimension { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
/* The segments wizard hides the no-JS fallback input via the hidden
   attribute; explicit display:flex above would otherwise override it and
   leave the orphaned "MM" unit chip painted below the add-run button. */
.mto-dimension[hidden] { display: none; }
.mto-dimension-group {
    display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--radius);
    overflow: hidden; transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.mto-dimension-group:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-ring); }
.mto-dimension-group input {
    width: 130px; border: none; outline: none; text-align: right;
    font-weight: 700; font-size: 18px; padding: .6rem .7rem; min-height: 46px;
}
.mto-unit {
    background: var(--grey-100); border-left: 1px solid var(--hairline);
    padding: 0 .8rem; display: flex; align-items: center;
    font-family: var(--font-condensed); font-weight: 700; color: var(--grey-700);
    text-transform: uppercase;
}
.mto-range { font-size: .8rem; color: var(--grey-500); }
.mto-convert { font-size: .8rem; color: var(--grey-500); font-weight: 600; min-width: 9ch; }

/* RAL picker */
.mto-ral { margin-top: .8rem; }
.mto-ral-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 .6rem; }
.mto-ral-swatch {
    width: 40px; height: 40px; padding: 3px; border: 1px solid var(--hairline);
    border-radius: var(--radius-sm); background: var(--white); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-out);
}
.mto-ral-swatch span { display: block; width: 100%; height: 100%; border-radius: 2px; }
.mto-ral-swatch:hover { transform: translateY(-1px); border-color: var(--grey-500); }
.mto-ral-swatch.is-selected { border: 2px solid var(--red); padding: 2px; }

/* Photos dropzone */
.mto-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    border: 2px dashed var(--hairline); border-radius: var(--radius);
    background: var(--grey-100); padding: 1.4rem 1rem; text-align: center;
    cursor: pointer; color: var(--grey-500);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.mto-dropzone:hover { border-color: var(--red); background: var(--red-tint); }
.mto-dropzone input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.mto-dropzone-title { font-weight: 600; font-size: .9rem; color: var(--black); }
.mto-dropzone-sub { font-size: .78rem; }
.mto-photo-previews { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; align-items: center; }
.mto-photo-thumb img {
    width: 64px; height: 64px; object-fit: cover;
    border-radius: var(--radius-sm); border: 1px solid var(--hairline);
}
.mto-photo-note { font-size: .8rem; color: var(--grey-500); }

/* Contact grid */
.mto-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }

/* WhatsApp opt-in (PECR consent checkbox on the contact step) */
.mto-whatsapp-optin { display: flex; align-items: flex-start; gap: .55rem; margin-top: 1rem; font-size: .9rem; cursor: pointer; }
.mto-whatsapp-optin input { margin-top: .25rem; flex-shrink: 0; }
.mto-whatsapp-note { font-size: .8rem; color: var(--grey-500); font-weight: 400; }

/* Estimate (no-JS / desktop inline box) */
.mto-estimate {
    border: 1px solid var(--hairline); border-left: 4px solid var(--red);
    border-radius: var(--radius); padding: .9rem 1.1rem; margin-top: 1.2rem;
    background: var(--white);
}
.mto-estimate-row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.mto-estimate-row strong { font-family: var(--font-heading); font-size: 1.5rem; letter-spacing: .02em; }
.mto-estimate-note { font-size: .8rem; font-weight: 400; color: var(--grey-500); margin: .35rem 0 0; }
.mto-reassure { text-align: center; font-size: .85rem; color: var(--grey-500); margin-top: .6rem; }

/* Inline validation */
.mto-err {
    margin-top: .7rem; padding: .55rem .8rem; border-radius: var(--radius);
    background: var(--red-tint); border-left: 3px solid var(--red);
    color: var(--red-dark); font-size: .85rem; font-weight: 600;
}

/* ── Wizard chrome (only under .mto-js) ─────────────────────────────────── */
.mto-progress-wrap, .mto-navbar { display: none; }
.mto-js .mto-progress-wrap { display: block; margin-bottom: .9rem; }
.mto-progress { display: flex; gap: 4px; }
.mto-progress span {
    flex: 1; height: 4px; border-radius: 2px; background: var(--grey-300);
    transition: background var(--dur-med) var(--ease-std);
}
.mto-progress span.done { background: var(--red); }
.mto-progress span.current { background: var(--red); background-image: var(--stripe); }
.mto-progress-label {
    margin-top: .4rem; font-family: var(--font-condensed); font-weight: 700;
    font-size: .75rem; letter-spacing: .1em; color: var(--grey-500); text-transform: uppercase;
}

.mto-js .mto-step { display: none; }
.mto-js .mto-step.is-active { display: block; animation: mtoStepFwd var(--dur-slow) var(--ease-out); }
.mto-js .mto-step.is-active.is-back { animation-name: mtoStepBack; }
@keyframes mtoStepFwd  { from { opacity: 0; transform: translateX(24px); } }
@keyframes mtoStepBack { from { opacity: 0; transform: translateX(-24px); } }

.mto-js .mto-estimate, .mto-js .mto-submit-original { display: none; }
.mto-configurator { scroll-margin-top: calc(var(--nav-height) + 12px); }

.mto-js .mto-navbar {
    position: sticky; bottom: 0; z-index: 90;
    display: flex; align-items: center; gap: .8rem;
    padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
    margin: 0 -.2rem;
    background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,.08);
}
.mto-nav-back {
    background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-condensed); font-weight: 600; font-size: .9rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--grey-700);
    min-height: 44px; padding: 0 1.1rem; flex-shrink: 0;
}
.mto-nav-back:hover { border-color: var(--red); }
.mto-nav-back:hover { color: var(--red); }
.mto-nav-price { display: flex; flex-direction: column; margin-left: auto; text-align: right; }
.mto-nav-price-label {
    font-family: var(--font-condensed); font-weight: 700; font-size: .65rem;
    letter-spacing: .08em; color: var(--grey-500); text-transform: uppercase;
}
.mto-nav-price-value { font-family: var(--font-heading); font-size: 1.45rem; line-height: 1; color: var(--black); }
.mto-nav-price-value.is-updated { animation: mtoPricePulse var(--dur-slow) var(--ease-out); }
@keyframes mtoPricePulse { 30% { transform: scale(1.06); color: var(--red); } }
.mto-nav-next { min-height: 48px; flex-shrink: 0; padding: .7rem 1.3rem; }
.mto-nav-price[hidden] { display: none; }
.mto-navbar.is-final .mto-nav-next { flex: 1; }
.mto-navbar.is-final .mto-nav-price { display: none; }

/* Review screen */
.mto-review { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.mto-review-row {
    display: grid; grid-template-columns: 44px 1fr auto auto;
    gap: .7rem; align-items: center; padding: .6rem .8rem; background: var(--white);
}
.mto-review-row + .mto-review-row { border-top: 1px solid var(--grey-200); }
.mto-review-row img, .mto-review-ph {
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    object-fit: cover; background: var(--grey-100);
}
.mto-review-ph {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: 1.1rem; color: var(--grey-500);
}
.mto-review-main { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.mto-review-label {
    font-family: var(--font-condensed); font-weight: 700; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--grey-500);
}
.mto-review-value { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.mto-review-note { font-size: .78rem; color: var(--grey-500); }
.mto-review-delta { font-family: var(--font-condensed); font-weight: 700; font-size: .82rem; color: var(--red); }
.mto-edit {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-condensed); font-weight: 600; font-size: .8rem;
    text-transform: uppercase; color: var(--red); min-height: 44px; min-width: 44px; padding: 0 .4rem;
}
.mto-edit:hover { text-decoration: underline; }
.mto-review-total {
    grid-template-columns: 1fr auto; border-top: 2px solid var(--black) !important;
    background: var(--grey-100); background-image: var(--stripe);
}
.mto-review-total strong { font-family: var(--font-heading); font-size: 1.5rem; letter-spacing: .02em; }
.mto-trust { margin-top: .8rem; font-size: .85rem; color: var(--grey-500); }

/* Commercial layer (competitor-review batch) */
.mto-benefits { margin: 0 0 .8rem; padding: 0; }
.mto-benefits li {
    position: relative; padding: .18rem 0 .18rem 1.5rem;
    font-size: .9rem; line-height: 1.45;
}
.mto-benefits li::before {
    content: ""; position: absolute; left: 0; top: .38rem;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--red) center / 9px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.mto-phone-cta { font-size: .85rem; color: var(--grey-500); margin-bottom: 1rem; }
.mto-phone-cta a { color: var(--red); }

.mto-measure-help {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--grey-100); margin: 0 0 .9rem; font-size: .88rem;
}
.mto-measure-help summary {
    /* 39px tall before this, and it is the control a customer reaches for at
       exactly the moment they are unsure how to measure. Padding rather than
       display:flex — flex on a <summary> drops the disclosure triangle. */
    cursor: pointer; padding: .75rem .8rem; min-height: 44px;
    font-family: var(--font-condensed); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--grey-700);
}
.mto-measure-help p { padding: 0 .8rem .6rem; margin: 0; color: var(--grey-700); }
.mto-measure-help img { margin: 0 .8rem .8rem; border-radius: var(--radius-sm); max-width: calc(100% - 1.6rem); }

.mto-run-breakdown {
    margin-top: .7rem; font-size: .88rem; font-weight: 600;
    color: var(--grey-700);
}
.mto-run-breakdown:not(:empty) {
    border-left: 3px solid var(--red); background: var(--grey-100);
    padding: .55rem .8rem; border-radius: 0 var(--radius) var(--radius) 0;
}

/* Segments steps (§9.4): repeatable corner-capable fence runs.
   NOTE for KOS: these classes are mirrored in the KOS copy of the MTO CSS. */
.mto-seg-list { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .6rem; }
.mto-seg-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.mto-seg-num {
    font-family: var(--font-condensed); font-weight: 700; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--grey-500);
    min-width: 3.4rem;
}
.mto-seg-remove {
    width: 28px; height: 28px; line-height: 1; font-size: 1rem;
    background: none; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
    color: var(--grey-500); cursor: pointer;
}
.mto-seg-remove:hover { color: var(--red); border-color: var(--red); }
.mto-seg-corner {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    padding: .45rem .8rem; margin-left: .4rem;
    border-left: 3px solid var(--grey-300);
    font-size: .85rem; color: var(--grey-700);
}
.mto-seg-corner select.mto-input { width: auto; }
.mto-seg-custom { width: 5.5rem; }
.mto-seg-add { margin: 0 0 .6rem; }

.mto-notice {
    border: 1px solid var(--amber); border-left-width: 4px;
    border-radius: var(--radius); background: #fdf9ee;
    padding: .8rem 1rem; margin-top: 1rem; font-size: .88rem;
}
.mto-notice strong {
    font-family: var(--font-condensed); text-transform: uppercase;
    letter-spacing: .05em; font-size: .8rem;
}
.mto-notice p { margin: .35rem 0 0; color: var(--grey-700); }

.mto-zoom {
    position: absolute; bottom: .4rem; right: .4rem;
    width: 26px; height: 26px; border: none; border-radius: var(--radius-sm);
    background: rgba(255,255,255,.92) center / 14px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E");
    cursor: zoom-in; box-shadow: var(--shadow-sm);
}
.mto-lightbox {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(10,10,10,.88);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 5vh 4vw; cursor: zoom-out;
}
.mto-lightbox img {
    max-width: 100%; max-height: 82vh; object-fit: contain;
    border-radius: var(--radius); background: var(--white);
}
/* Visualiser (technical drawing) */
.mto-visual-preview {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--white); margin-bottom: .9rem;
}
.mto-visual-preview summary {
    cursor: pointer; padding: .5rem .8rem;
    font-family: var(--font-condensed); font-weight: 700; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--grey-500);
}
.mto-visual-preview .mto-visual-mount { padding: 0 .6rem .6rem; }
.mto-visual-preview svg { max-height: 240px; }
.mto-visual-panel { margin: .8rem 0 1rem; }
.mto-visual-hint { font-size: .85rem; color: var(--grey-500); padding: .6rem 0; }
/* Gallery-as-drawing (photo-less MTO products) */
.mto-gallery-drawing {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 1.2rem; cursor: default;
    background: var(--grey-100);   /* opaque — it can sit over the photo */
}
.mto-gallery-drawing[hidden] { display: none; }
.mto-gallery-drawing > div { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mto-gallery-drawing > div > .mto-drawing { flex: 0 1 auto; min-height: 0; }
.mto-gallery-drawing > div[hidden] { display: none; }
/* The tab row is a plain <div>, so the `.mto-gallery-drawing > div` pane rule
   directly above was also landing on it — flex-direction:column stacked the
   two chips vertically and centred them, and the canvas (which overflowed its
   pane) covered the lower one. Net effect on a phone: the toggle showed only
   "DRAWING" while the 3D view was the one actually rendered. Chips go back on
   one row, and this rule must stay AFTER the `> div` rule to win. */
.mto-gallery-drawing > .mto-visual-tabs {
    flex: 0 0 auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: center; gap: .4rem;
}
.mto-gallery-drawing .mto-visual-3d { width: 100%; height: 100%; }
.mto-visual-3d { position: relative; }
.mto-visual-3d .mto-visual-hint {
    position: absolute; left: .6rem; right: .6rem; bottom: .4rem;
    width: auto; max-width: none;
    margin: 0; padding: 0; text-align: center; pointer-events: none;
    font-size: .78rem; line-height: 1.35; white-space: normal;
}
/* Viewer caption: one subtle centred line under the canvas / drawing,
   full width in every mount (its own class so the gallery's narrow
   .mto-visual-hint override can never re-wrap it). */
.mto-visual-caption {
    margin: .45rem 0 0; width: 100%; max-width: none;
    text-align: center; white-space: normal; line-height: 1.35;
    font-family: var(--font-condensed); font-weight: 600; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--grey-500);
}
.mto-visual-3d .mto-visual-caption {
    position: absolute; left: 0; right: 0; bottom: .45rem;
    margin: 0; padding: 0 .6rem; width: auto; pointer-events: none;
}

/* Constraint locks + drawing viewer */
.mto-constraint-note { margin: .6rem 0 0; font-size: .85rem; font-weight: 600; color: var(--red); }
label.is-locked { opacity: .45; }
.mto-drawing.mto-clickable { cursor: zoom-in; }
.mto-drawing.is-example { opacity: .85; }
.mto-viewer-overlay {
    position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.mto-viewer {
    background: var(--white); border-radius: var(--radius);
    max-width: min(1100px, 96vw); max-height: 94vh; width: 100%;
    display: flex; flex-direction: column; overflow: hidden;
}
.mto-viewer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .8rem 1rem; border-bottom: 1px solid var(--hairline);
}
.mto-viewer-head img { height: 32px; width: auto; }
.mto-viewer-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.7rem; line-height: 1; color: var(--grey-700); padding: .2rem .5rem;
}
.mto-viewer-body { flex: 1; overflow: auto; padding: 1rem; }
.mto-viewer-body svg { width: 100%; height: auto; cursor: default; }
.mto-viewer-disclaimer {
    margin: 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hairline); font-size: .78rem; color: var(--grey-500);
}
.mto-gallery-drawing svg { max-width: 100%; max-height: 100%; }
.mto-gallery-drawing .mto-visual-hint { text-align: center; max-width: 22ch; }
.mto-drawing {
    width: 100%; height: auto; display: block;
    background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-sm);
}
.mto-drawing .steel { stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mto-drawing .edge { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mto-drawing .ground { stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mto-drawing .dim, .mto-drawing .ext, .mto-drawing .tb { stroke: currentColor; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.mto-drawing .ext { stroke-dasharray: 4 3; opacity: .7; }
/* Title-block colour swatch: outline only here — the RAL fill arrives as a
   presentation attribute, so this rule must NOT declare `fill` (a CSS
   declaration beats the attribute and would blank the swatch). */
.mto-drawing .tbswatch { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* V6.3 gate posts. `.post` / `.plate` ride the `.steel` rule above (they are
   supplied steel); `.postghost` is the BURIED length + its concrete surround
   and `.wall`/`.hatch` are the existing wall a wall-fixed gate hangs off —
   both are context, not supply, so they sit back visually. Fill arrives as a
   presentation attribute, so none of these may declare `fill`. */
.mto-drawing .postghost { stroke: currentColor; stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke; }
.mto-drawing .wall { stroke: currentColor; stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
.mto-drawing .hatch { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* V6: font-size is deliberately NOT set here. A CSS declaration beats the
   font-size presentation attribute, so the engine's computed, scale-aware
   sizes were dead on-page while the standalone/pinned SVG (which has no CSS)
   used them — the two renders disagreed, and the title block could not be
   fitted by measurement. mto-visualiser.js is now the single text scale. */
.mto-drawing .dimtxt { font-family: var(--font-condensed); fill: currentColor; font-weight: 600; }
.mto-drawing .tbtitle { font-family: var(--font-condensed); font-weight: 700; fill: currentColor; letter-spacing: .04em; }
.mto-drawing .tbtxt { font-family: var(--font-condensed); fill: currentColor; opacity: .75; }
.mto-drawing .deco { color: inherit; overflow: visible; }
.mto-visual-dl { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.mto-visual-tabs { display: flex; gap: .4rem; margin-bottom: .6rem; }
.mto-visual-tabs button {
    border: 1px solid var(--hairline); background: var(--white); cursor: pointer;
    /* 44px: these are the two most-tapped controls on the page and they were
       40px tall — under every touch-target guideline, on the one control a
       thumb hunts for while the other hand holds a tape measure. */
    border-radius: var(--radius); padding: .4rem 1rem; min-height: 44px;
    font-family: var(--font-condensed); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--grey-700);
    transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.mto-visual-tabs button.is-active { border-color: var(--red); color: var(--red); background: var(--red-tint); }
.mto-visual-3d canvas {
    width: 100% !important; height: auto !important; display: block;
    border: 1px solid var(--grey-200); border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #f7f6f4 0%, #eceae6 100%);
    touch-action: none;
}

.mto-lightbox p {
    color: var(--grey-300); font-size: .9rem; margin-top: .8rem;
    font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 600px) {
    .mto-contact-grid { grid-template-columns: 1fr; }
    .mto-configurator legend { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mto-configurator *, .mto-configurator *::after {
        animation: none !important;
        transition-duration: 1ms !important;
    }
}

/* ── About page / distribution map / MTO landing / homepage promo (Aug 2026) ─ */
.nav-highlight { font-weight: 700; }
.nav-collect { color: #1a7f37 !important; }
.nav-mto { color: var(--red) !important; }

.about-intro { max-width: 70ch; font-size: 1.02rem; margin-bottom: 1.8rem; }
.about-intro p + p { margin-top: .8rem; }
.about-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.about-value {
    border: 1px solid var(--hairline); border-top: 3px solid var(--red);
    border-radius: var(--radius); background: var(--white); padding: 1rem;
}
.about-value h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.about-value p { font-size: .9rem; color: var(--grey-700); }
.about-visit { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.2rem; align-items: stretch; }
.about-visit-info { display: flex; flex-direction: column; gap: .9rem; }
.about-info-card {
    background: var(--white); border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: 1rem 1.1rem; flex: 1;
}
.about-info-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.about-info-card p { font-size: .95rem; }
.about-hours li {
    padding: .3rem 0; border-bottom: 1px dashed var(--grey-200);
    font-weight: 600; font-size: .95rem;
}
.about-hours li:last-child { border-bottom: none; }
.about-visit-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); min-height: 380px; }
.about-visit-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
@media (max-width: 800px) {
    .about-values { grid-template-columns: 1fr 1fr; }
    .about-visit { grid-template-columns: 1fr; }
}

/* Distribution map (dark panel) */
.dist-map { max-width: 720px; margin: 0 auto; }
.dist-map svg { width: 100%; height: auto; display: block; }
.dm-land { fill: var(--grey-900); stroke: var(--grey-700); stroke-width: 2; }
.dm-route {
    fill: none; stroke: var(--red); stroke-width: 2.5;
    stroke-linecap: round; stroke-dasharray: 6 8; opacity: .85;
    animation: dmDash 1.6s linear infinite;
}
@keyframes dmDash { to { stroke-dashoffset: -28; } }
.dm-city { fill: var(--white); stroke: var(--grey-700); stroke-width: 1.5; }
.dm-hub { fill: var(--red); }
.dm-hub-ring {
    fill: none; stroke: var(--red); stroke-width: 2;
    animation: dmPulse 2.2s ease-out infinite; transform-origin: center; transform-box: fill-box;
}
@keyframes dmPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
.dm-label { font-family: var(--font-condensed); font-weight: 600; font-size: 15px; fill: var(--grey-300); letter-spacing: .06em; }
.dm-hub-label { fill: var(--white); font-weight: 700; font-size: 18px; }
.dm-sublabel { font-family: var(--font-condensed); font-weight: 600; font-size: 11px; fill: var(--red-light); letter-spacing: .14em; }
.dist-map-caption { text-align: center; color: var(--grey-300); font-size: .92rem; margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .dm-route, .dm-hub-ring { animation: none !important; } }

/* MTO landing */
.mto-landing-eyebrow {
    font-family: var(--font-condensed); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .14em; color: var(--red-light); margin-bottom: .4rem;
}
.mto-landing-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.mto-landing-step {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    padding: 1.1rem 1rem; background: var(--white); position: relative;
}
.mto-landing-step span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: var(--white);
    font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: .5rem;
}
.mto-landing-step h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.mto-landing-step p { font-size: .88rem; color: var(--grey-700); }
.mto-landing-card {
    display: flex; flex-direction: column; background: var(--white);
    border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
    transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.mto-landing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mto-landing-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.mto-landing-card-draw {
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
    background: var(--grey-100); color: var(--grey-500);
}
.mto-landing-card-draw svg { width: 60%; height: auto; }
.mto-landing-card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.mto-landing-card-body strong { font-size: 1rem; }
.mto-landing-card-body > span:not(.btn) { font-size: .85rem; color: var(--grey-500); }
@media (max-width: 800px) { .mto-landing-steps { grid-template-columns: 1fr 1fr; } }

/* Homepage bespoke promo */
.mto-promo { background: var(--black); color: var(--white); padding: 3rem 0; }
.mto-promo-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem; align-items: center; }
.mto-promo-copy h2 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .7rem; }
.mto-promo-copy p { color: var(--grey-300); max-width: 46ch; }
.mto-promo-ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.1rem; }
.mto-promo-sub { font-size: .85rem; color: var(--grey-500); margin-top: .8rem; }
.mto-promo-visual { background: var(--white); border-radius: var(--radius); padding: .6rem; box-shadow: var(--shadow-lg); }
.mto-promo-visual .mto-drawing { border: none; }
.mto-promo-visual svg { transition: opacity .4s ease; }
@media (max-width: 800px) {
    .mto-promo-grid { grid-template-columns: 1fr; }
    .mto-promo { padding: 2.2rem 0; }
}

/* ── Share button + fallback popover (share_events) ─────────────────── */
.share-row { margin: .35rem 0 1rem; }

/* Carriage restriction under the buy buttons. Sized DOWN deliberately: it's a
   qualifier on the purchase, not an alarm about the product. Red hairline for
   "read this", not a filled red panel — that reads as an error and costs the
   sale we can still take from an Irish customer. */
.delivery-restriction {
    border-left: 3px solid var(--red);
    background: #fdf3f3;
    border-radius: 4px;
    padding: .6rem .8rem;
    margin: 0 0 1rem;
    font-size: .82rem;
    line-height: 1.5;
}
.delivery-restriction strong { color: var(--red); font-size: .86rem; }
.delivery-restriction p { margin: .2rem 0 0; }
.delivery-restriction .delivery-restriction-alt { color: var(--grey-500); }
.delivery-restriction a { color: inherit; text-decoration: underline; }
.share-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: none; border: 1px solid var(--grey-300); border-radius: 6px;
    padding: .45rem .9rem; font-size: .88rem; font-weight: 600;
    color: var(--grey-700); cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.share-btn:hover { border-color: var(--red); color: var(--red); }
.share-popover {
    position: absolute; z-index: 60; margin-top: .4rem;
    background: var(--white); border: 1px solid var(--grey-300);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
    display: flex; flex-direction: column; min-width: 170px; overflow: hidden;
}
.share-popover-item {
    background: none; border: none; text-align: left; cursor: pointer;
    padding: .6rem .95rem; font-size: .9rem; color: var(--grey-800, #333);
}
.share-popover-item:hover { background: var(--grey-100); color: var(--red); }
.share-popover-item + .share-popover-item { border-top: 1px solid var(--grey-100); }

/* ── WhatsApp CTAs + checkout exit-intent toast ─────────────────────── */
.wa-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #1a7f37; color: var(--white) !important;
    border-radius: 6px; padding: .45rem .9rem;
    font-size: .88rem; font-weight: 600; text-decoration: none;
    transition: background .15s ease;
}
.wa-btn:hover { background: #14632b; color: var(--white); }
.share-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* The PDP pair sat at 37px and 33px tall. They are the two "talk to a human"
   escape hatches on a page where the whole product is a conversation, so
   they get a real touch target. Scoped to .share-row: the same classes are
   reused in narrower chrome elsewhere. */
.share-row .wa-btn,
.share-row .share-btn { min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; }
.wa-exit-toast {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 200;
    background: var(--white); border: 1px solid var(--grey-300);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: 1rem 1.1rem; max-width: 280px;
    animation: waToastIn .25s ease;
}
.wa-exit-toast strong { display: block; margin-bottom: .25rem; }
.wa-exit-toast p { font-size: .88rem; color: var(--grey-700, #444); margin: 0 0 .7rem; }
.wa-exit-close {
    position: absolute; top: .3rem; right: .45rem;
    background: none; border: none; cursor: pointer;
    font-size: 1.15rem; color: var(--grey-500); padding: .2rem .4rem;
}
.wa-exit-close:hover { color: var(--black); }
@keyframes waToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wa-exit-toast { animation: none; } }

/* ── KOS-pushed description tables — branded, overrides pushed inline styles ── */
.product-description table {
    width: 100%; max-width: 520px;
    border-collapse: separate !important; border-spacing: 0;
    border: 1px solid var(--grey-300) !important;
    border-top: 3px solid var(--red) !important;
    border-radius: 8px; overflow: hidden;
    margin: .75rem 0 1.4rem; font-size: .92rem; line-height: 1.5;
    box-shadow: var(--shadow-sm);
}
.product-description table th,
.product-description table td {
    padding: .6rem .95rem !important;
    border: none !important;
    border-bottom: 1px solid var(--grey-200, #ececec) !important;
    text-align: left; vertical-align: top;
}
.product-description table tr:last-child th,
.product-description table tr:last-child td { border-bottom: none !important; }
/* First column reads as the label rail (KOS sends td-only spec tables) */
.product-description table td:first-child {
    font-family: var(--font-condensed); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; font-size: .78rem;
    color: var(--grey-700, #444); background: var(--grey-100);
    width: 38%;
}
/* Real header rows, if KOS ever sends them */
.product-description table th {
    font-family: var(--font-condensed); text-transform: uppercase;
    letter-spacing: .04em; font-size: .8rem;
    background: var(--black); color: var(--white);
}
.product-description table tbody tr:nth-child(even) td:not(:first-child) { background: #fafafa; }

/* ── Category grid: always ONE row on desktop ───────────────────────────
   8 categories + the View All card = 9 items, which overflowed the
   12.5%-wide flex row onto a second line. auto-flow column makes the
   track count follow the item count, so any number KOS pushes stays on
   one row and shares the width evenly. Below 1024px the flex rules above
   still wrap (cards would otherwise be postage stamps on a phone). */
@media (min-width: 1025px) {
    .category-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        align-items: start;
    }
    .category-grid .category-card { width: auto; min-width: 0; }
}

/* ── Gate 10/10, Waves 1+3: made-to-order PDP ───────────────────────────
   Everything below serves one rule: a quote-lane product must never show a
   number it doesn't have, and must never look like a parts listing. */

/* No published From-bracket: the sentence IS the price line, so it carries
   the price line's weight without pretending to be a figure. */
.product-price-bespoke, .price-bespoke {
    font-family: var(--font-condensed); letter-spacing: .01em;
}
.product-price-bespoke { font-size: 1.6rem; }
.price-bespoke { font-size: .95rem; font-weight: 700; color: var(--black); }

/* Maker credit when KOS hasn't linked a brand row (the gate has none yet;
   the fencing page does and keeps its logo lockup). Not a link — nothing to
   link to — so it must not present as one. */
.product-info-brand.is-static { cursor: default; border-style: dashed; }

/* Quote journey — what happens after "Continue", stated before step 1
   instead of only in the Description tab four scrolls away. */
.mto-journey {
    display: flex; flex-wrap: wrap; gap: .35rem .5rem;
    list-style: none; margin: 0 0 1rem; padding: 0;
}
.mto-journey li {
    display: flex; align-items: center; gap: .45rem;
    flex: 1 1 auto; min-width: 0;
    padding: .5rem .7rem;
    background: var(--grey-100); border-radius: var(--radius);
    font-size: .82rem; font-weight: 600; color: var(--grey-700);
    line-height: 1.25;
}
.mto-journey-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
    background: var(--red); color: var(--white);
    font-family: var(--font-condensed); font-weight: 700; font-size: .72rem;
}
@media (max-width: 600px) { .mto-journey li { flex-basis: 100%; } }

/* "Adds cost" — an option modifier with no price to be a percentage OF.
   Deliberately not red/urgent like a real +£ badge: it's information, not a
   number. */
.mto-opt-delta.is-neutral {
    color: var(--grey-500); background: var(--grey-100);
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
}

/* Sticky bar, quote lane: reassurance where the "£0" chip used to sit. */
.mto-nav-reassure {
    margin: 0 0 0 auto; padding-left: .6rem; text-align: right;
    max-width: 15rem; font-size: .74rem; line-height: 1.3;
    color: var(--grey-500); font-weight: 600;
}
.mto-navbar.is-final .mto-nav-reassure { display: none; }

/* Review screen, quote lane: closes on what happens next, not on £0. */
.mto-review-noprice { background: var(--grey-100); }
.mto-review-noprice .mto-review-label { color: var(--black); }

/* MTO Specifications tab — how it's built, not shelf weight + "Condition". */
.spec-list { margin: 0; font-size: .9rem; }
.spec-list dt {
    font-family: var(--font-condensed); font-weight: 700; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--grey-500);
    margin-top: .8rem;
}
.spec-list dt:first-child { margin-top: 0; }
.spec-list dd { margin: .15rem 0 0; color: var(--grey-700); line-height: 1.5; }

/* Editorial H2 sections — the page had exactly one heading before this. */
.product-editorial {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
    margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hairline);
}
.product-editorial h2 {
    font-family: var(--font-heading); font-weight: 400; font-size: 1.7rem;
    text-transform: uppercase; letter-spacing: .02em; margin-bottom: .6rem;
}
.product-editorial p { color: var(--grey-700); line-height: 1.65; margin-bottom: .8rem; }
.product-editorial p:last-child { margin-bottom: 0; }
@media (max-width: 800px) { .product-editorial { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ── MTO PDP layout: title/price above the live viewer on a phone ────────
   .product-lead is emitted BEFORE the gallery in the DOM so it leads on
   mobile (the square live viewer had been pushing the title, price and lead
   time ~1400px down the page). On desktop it goes straight back to the top
   of the right-hand column, so that layout is unchanged. */
/* `overflow: hidden` on .product-detail makes it a scroll container, and a
   scroll container silently disables `position: sticky` in EVERY descendant —
   the sticky viewer below and the phone preview strip both die on it.
   `clip` clips identically (that rule exists to stop wide tables blowing out
   the grid; both children already carry min-width:0) without creating one. */
.product-detail-mto { overflow: clip; }

@media (min-width: 1025px) {
    .product-detail-mto { grid-template-rows: auto 1fr; align-items: start; }
    .product-detail-mto > .product-lead    { grid-column: 2; grid-row: 1; }
    .product-detail-mto > .product-gallery { grid-column: 1; grid-row: 1 / span 2; }
    .product-detail-mto > .product-info    { grid-column: 2; grid-row: 2; }

    /* The whole promise of this page is that the gate reacts as you answer.
       The viewer was `position: relative`, so by the time the buyer reached
       the questions it had scrolled away and they were choosing bar spacing
       against a blank screen. Sticky keeps it beside the step they are on.
       Offset clears the sticky site header (same sum .shop-sidebar uses);
       max-height keeps a tall drawing from being cropped at the fold on a
       short laptop screen, which is what happened at 1280x800. */
    .product-detail-mto > .product-gallery {
        position: sticky;
        top: calc(var(--nav-height) + 1rem);
        align-self: start;
        max-height: calc(100vh - var(--nav-height) - 2rem);
    }
    .product-detail-mto .gallery-main {
        max-height: calc(100vh - var(--nav-height) - 4rem);
    }
}

@media (max-width: 1024px) {
    /* Let the live viewer size itself instead of being poured into a square
       box. mto-visualiser-3d.js floors the canvas at 340px tall, which did
       not fit a 343px square once the tab row was inside it — so the render
       overflowed the card, and the "drag to rotate" caption (pinned to the
       bottom of a pane taller than its own box) landed across the middle of
       the gate. With the mount in normal flow the card hugs its contents and
       nothing overflows. */
    .product-detail-mto .gallery-main {
        aspect-ratio: auto; height: auto; min-height: 0; cursor: default;
    }
    .product-detail-mto .mto-gallery-drawing {
        position: static; inset: auto; padding: .8rem;
    }
    .product-detail-mto .mto-gallery-drawing > div { flex: 0 1 auto; }
    /* Caption goes back into normal flow, UNDER the canvas. Absolutely
       positioning it over the render only ever worked while the pane was
       taller than its contents; on a phone it printed "DRAG TO ROTATE ·
       SCROLL OR PINCH TO ZOOM" straight across the middle of the gate.
       Reserving a fixed strip instead would just move the guess to "how many
       lines does it wrap to" — flow layout can't get that wrong. */
    .product-detail-mto .mto-gallery-drawing .mto-visual-3d .mto-visual-caption {
        position: static; margin: .45rem 0 0; padding: 0;
        /* Two lines' worth, always. "DRAG TO ROTATE · SCROLL OR PINCH TO
           ZOOM" wraps to two lines on a phone and one on a tablet, so a
           caption sized by its own text made the panel's final height
           unpredictable — and the space reserved below could only match one
           of the two. Fixing it at two lines costs a strip of whitespace on
           a tablet and buys an exact reservation at every width. */
        min-height: 2.7em;
    }

    /* ── Reserve the panel before the 3D canvas exists ──────────────────
       The 3D module builds its canvas at max(340px, 66% of the pane width)
       — but only after three.js has downloaded. Until then the pane has no
       height at all, so the panel collapsed to ~110px and the absolutely
       positioned "Building your 3D view…" line (bottom-anchored inside a
       zero-height box) landed ON TOP of the DRAWING / 3D VIEW buttons.
       Then the canvas arrived and shoved the page down ~340px. This is the
       first thing a phone visitor sees, so it gets the space up front:
       the ::before mirrors the module's own sizing rule exactly, and
       disappears the moment a real canvas is there. The margin is the
       caption that renders under the canvas in this breakpoint.
       :has() is the feature test — a browser without it simply gets the old
       behaviour rather than a double-height box. */
    .product-detail-mto .mto-gallery-drawing .mto-visual-3d:not(:has(canvas))::before {
        content: ''; display: block; width: 100%;
        aspect-ratio: 100 / 66; min-height: 340px; margin-bottom: 2.4rem;
    }
    /* …and with real height to sit in, the caption centres instead of
       colliding with the toggle above it. */
    .product-detail-mto .mto-gallery-drawing .mto-visual-3d:not(:has(canvas)) .mto-visual-hint {
        top: 50%; bottom: auto; transform: translateY(-50%);
    }
}

/* ── Phone: compact sticky preview strip ─────────────────────────────────
   A full sticky viewer would eat a phone screen, so the drawing follows the
   buyer down the page as a ~140px strip pinned directly under the site
   header, above whichever step is active. Tapping it opens the same
   full-screen branded viewer the drawing itself opens.
   Built by mto-wizard.js; hidden entirely above 1024px, where the gallery
   itself is sticky. */
.mto-sticky-preview { display: none; }
@media (max-width: 1024px) {
    .mto-js .mto-sticky-preview {
        display: block; position: sticky; z-index: 80;
        /* JS measures the real header (two rows on a phone) and sets this. */
        top: var(--mto-strip-top, calc(var(--nav-height) + .25rem));
        margin: 0 0 .9rem;
    }
    .mto-js .mto-sticky-preview[hidden] { display: none; }
    .mto-sticky-preview-btn {
        display: flex; align-items: center; gap: .8rem; width: 100%;
        height: 140px; padding: .5rem .8rem; cursor: zoom-in; text-align: left;
        background: var(--white); border: 1px solid var(--hairline);
        border-radius: var(--radius); box-shadow: var(--shadow-sm);
    }
    .mto-sticky-preview-art {
        flex: 1 1 auto; min-width: 0; height: 100%;
        display: flex; align-items: center; justify-content: center;
    }
    .mto-sticky-preview-art svg {
        max-height: 124px; max-width: 100%; width: auto; height: auto;
        border: 0; background: none;
    }
    .mto-sticky-preview-label {
        flex: 0 0 auto; display: flex; flex-direction: column; gap: .15rem;
        font-family: var(--font-condensed); font-weight: 700; font-size: .74rem;
        text-transform: uppercase; letter-spacing: .08em; color: var(--grey-700);
    }
    .mto-sticky-preview-cue { font-weight: 600; color: var(--grey-500); }
}

/* One live viewer, one toggle. The engine renders a second Drawing/3D pair
   into the review step; with the viewer now permanently on screen that pair
   was a duplicate control whose state drifted out of step with the visible
   one (and, because the 3D renderer is a singleton, mounting 3D there kills
   the canvas in the gallery). The review keeps its drawing — the moment
   before you send a bespoke order is the wrong moment to take the picture
   away — but the toggle and the 3D pane live in exactly one place. */
.product-detail-mto .mto-review-step .mto-visual-panel > .mto-visual-tabs,
.product-detail-mto .mto-review-step .mto-visual-panel > .mto-visual-3d {
    display: none;
}