/* ==========================================================================
   Moved from legacy_fixes.phtml inline <style> (arrows, hero, MMT dropdown,
   back-to-top, deal + featured/blog sliders, sticky header, cart drawer, etc.).
   Per-store colours/SVGs are now CSS variables defined in afx-store.css.
   Placed FIRST so the existing sections below keep overriding, as when this was
   an inline <style> that loaded before the afx-base.css <link>.
   ========================================================================== */
    /* Theme base/primary colour per store (consumed by Tailwind's primary utilities,
       which resolve to var(--color-primary)): NET = green, USA = red. */
    /* Fix for SVG logo collapsing in Tailwind */
    .logo-wrapper img, .logo img, header img[class*="logo"], .logo-img {
        width: auto !important;
        height: auto !important;
        min-height: 40px;
        max-height: 80px;
        opacity: 1 !important;
        display: block !important;
    }

    /* Restore the Luma grid gutter on the mobile header.
       Tailwind's .container has no horizontal padding, so on small screens the
       logo was flush against the viewport edge (clipped). Match the original's
       15px gutter, scoped to the header and mobile only to avoid desktop shifts. */
    @media (max-width: 767px) {
        .header-container .header-middle > .container {
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    /* Fix SVG icons hidden by legacy CSS overrides */
    header svg, .header-container svg, .header svg,
    [class*="cart"] svg, [class*="minicart"] svg,
    .action.showcart svg, nav svg {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Cart drawer (minicart) had no inner padding, so the "My Cart" header, close
       button and item rows sat flush against the drawer edges (title clipped at the
       top-left). Restore standard drawer padding. */
    #cart-drawer {
        padding: 1.25rem 1.5rem 1rem !important;
        box-sizing: border-box;
    }
    /* The close (X) button inherits the theme's white button text colour, so the
       lucide X icon (stroke: currentColor) was invisible on the white drawer.
       Force a dark, visible colour for the close icon. */
    #cart-drawer button[aria-label*="minicart" i],
    #cart-drawer button[aria-label*="close" i] { color: #1f2937 !important; }
    #cart-drawer button[aria-label*="minicart" i] svg,
    #cart-drawer button[aria-label*="close" i] svg {
        stroke: #1f2937 !important;
        color: #1f2937 !important;
        opacity: 1 !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* Ensure minicart counter bubble is visible */
    .counter.qty, .counter-number {
        display: flex !important;
        visibility: visible !important;
    }

    /* Fix for any rule that hides svg globally */
    svg {
        overflow: visible;
    }
    
    /* Ensure Hyva header icons are not hidden by legacy rules */
    .hyva-header svg, .header-icons svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
        display: block !important;
    }
    
    /* ============================================================
       HERO SLIDER — Alpine.js based, full-width, full-height
       The .slidershow-top now uses Alpine.js x-show transitions.
       Each slide is position:absolute inside a relative container.
       ============================================================ */
    .slidershow.slidershow-top {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        /* Match the original owl slider proportions (~0.33 x width: 629px @ 1903, 395px @ 1200) */
        aspect-ratio: 1903 / 629;
        background: #111 !important;
        display: block !important;
    }
    /* Neutralize the baked owl wrappers so the slides can fill the hero and
       crossfade (no owl JS/CSS is loaded, so these are inert leftovers). */
    .slidershow-top .owl-carousel,
    .slidershow-top .owl-stage-outer,
    .slidershow-top .owl-stage {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        transition: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Each slide overlaps and crossfades; only .is-active is visible */
    .slidershow-top .owl-item,
    .slidershow-top .slide-item {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        float: none !important;
        margin: 0 !important;
        display: block !important;
        min-width: 0 !important;
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
        z-index: 1;
    }
    .slidershow-top .owl-item.is-active,
    .slidershow-top .slide-item.is-active {
        opacity: 1;
        z-index: 2;
    }
    .slidershow-top .owl-item a,
    .slidershow-top .slide-item a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    .slidershow-top .slide-item img,
    .slidershow-top .owl-item img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important; /* neutralize stale custom.css min-height:420px */
        object-fit: cover !important;
        display: block !important;
    }
    /* Overlay on top of slides */
    .slidershow-top .slider-overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
        background: rgba(0,0,0,0.35) !important;
    }
    .slidershow-top .overlay-content {
        text-align: center;
        color: #fff;
        padding: 2rem 1rem;
        max-width: 900px;
    }
    .slidershow-top .overlay-content img {
        margin: 0 auto 1.5rem !important;
        display: block !important;
        max-width: 300px !important;
        height: auto !important;
        min-height: auto !important;
    }
    /* Hero banner heading */
    .overlay-content h1 {
        font-size: 2.6rem;
        line-height: 1.15;
        font-weight: 300;
        margin: 0;
        color: #fff;
        text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    }
    @media (max-width: 991px) {
        .overlay-content h1 { font-size: 1.5rem; }
        /* Taller proportion on small screens so the hero stays legible */
        .slidershow.slidershow-top { aspect-ratio: 16 / 10; }
        .slidershow-top .overlay-content img { max-width: 200px !important; }
    }
    /* Hero prev/next arrows + dots (replaces the removed owl-nav/owl-dots).
       Matches the original: a semi-transparent white circle with a store-accent
       chevron (green on spares.net, red on sparesusa.net). */
    .slidershow-top .hero-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 76px;
        height: 76px;
        border-radius: 50%;
        border: none;
        /* !important: the theme applies a solid green background to every <button>.
           Subtle translucent disc by default (matches the original), solid on hover. */
        background: rgba(255, 255, 255, 0.35) !important;
        color: var(--color-primary) !important;
        font-size: 26px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0 0 5px;
        transition: background 0.3s, box-shadow 0.3s;
        -webkit-tap-highlight-color: transparent;
    }
    .slidershow-top .hero-nav-btn:hover {
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }
    /* SVG chevron (immune to the theme's forced button font-size, which was shrinking the
       old text glyph to 12px inside the 60px disc). currentColor = the store accent. */
    .slidershow-top .hero-nav-btn svg { width: 34px; height: 34px; display: block; }
    .slidershow-top .hero-prev { left: 30px; }
    .slidershow-top .hero-next { right: 30px; }
    @media (max-width: 767px) {
        .slidershow-top .hero-nav-btn { width: 52px; height: 52px; }
        .slidershow-top .hero-nav-btn svg { width: 26px; height: 26px; }
        .slidershow-top .hero-prev { left: 8px; }
        .slidershow-top .hero-next { right: 8px; }
    }

    /* Prev/next arrows for the horizontal card sliders (featured products, blog).
       Matches the original owl-nav: 46px white circle, dark chevron, 1px #e5e5e5 border. */
    .slider-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 1px solid #e5e5e5;
        background: #fff !important;
        color: #282828 !important;
        font-size: 34px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0 0 4px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
        transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .slider-nav-btn:hover { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary); }
    /* SVG chevron sized in CSS so the theme's forced `button{font-size:12px}` can't
       shrink it (the old text ‹ › glyphs collapsed to 12px inside the 56px circle). */
    .slider-nav-btn svg { width: 26px; height: 26px; display: block; }
    .slider-nav-btn.deal-nav svg { width: 28px; height: 28px; }
    .slider-nav-btn, .slider-nav-btn:focus, .slider-nav-btn:focus-visible, .slider-nav-btn:active,
    .slidershow-top .hero-nav-btn:focus, .slidershow-top .hero-nav-btn:focus-visible {
        outline: none !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .16) !important;   /* re-assert base shadow so no focus ring */
    }
    /* Sit just INSIDE the slider edges, on top of the cards (z-index above). Positioning
       relative to a gutter fails for full-width sliders (blog .slider-post) — this never
       clips and stays consistent across every slider. */
    .slider-nav-prev { left: 8px; }
    .slider-nav-next { right: 8px; }
    /* Deal of the Day arrows — full circles pinned to the two ends of the white card */
    .slider-nav-btn.deal-nav {
        width: 40px; height: 40px; z-index: 6;
        border: 1px solid #e5e5e5;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
        /* yttheme.css ships a blanket `button { padding: 0 20px !important }`. With
           box-sizing:border-box that 40px of horizontal padding is a floor on the
           button's width, so the circle rendered as a 40px-wide oval and its content box
           collapsed to 0. Only !important can undo !important. */
        padding: 0 !important;
    }
    .slider-nav-btn.deal-nav svg { width: 20px; height: 20px; flex: 0 0 auto; }
    /* Centred ON the card edge, as in the design. At 12px INSIDE they overlapped the
       product image and the price. */
    .slider-nav-btn.deal-nav.slider-nav-prev { left: -20px; right: auto; }
    .slider-nav-btn.deal-nav.slider-nav-next { right: -20px; left: auto; }
    @media (max-width: 1199px) {
        /* Below 1200 the page `.container` stops centring and sits flush against the
           viewport, so half-outside arrows get clipped on the left and push a horizontal
           scrollbar on the right. Tuck them inside and widen the card's side padding to
           exactly clear them (34 + 6 + 6 = 46), which also keeps them off the image and
           off the text column at every width in this range. */
        .deal-container .deal-block { padding-left: 46px; padding-right: 46px; }
        .slider-nav-btn.deal-nav { width: 34px; height: 34px; }
        .slider-nav-btn.deal-nav svg { width: 18px; height: 18px; }
        .slider-nav-btn.deal-nav.slider-nav-prev { left: 6px; }
        .slider-nav-btn.deal-nav.slider-nav-next { right: 6px; }
    }
    /* ---- Featured products + Latest blogs: whole items only (no half-cut 4th) + an edge
       gutter so the prev/next arrows sit BESIDE the cards, not on top of them. Item widths
       are fractions of the padded track, so N full items always fit; the 64px side padding
       is the gutter the arrows live in (arrow = 56px at left/right:8 → clears the cards). */
    .products.list.items.product-items,
    .slider-post .flex.overflow-x-auto {
        /* MARGIN, not padding: the scroller clips its content at its own edge so the next
           item is NOT revealed as a sliver, and the margin becomes a true gutter that
           separates the arrows from the cards (padding butted the arrow against the first
           card's 1px border, which read as a "line" on the arrow). */
        margin-left: 72px !important;
        margin-right: 72px !important;
    }
    .products.list.items.product-items > .item,
    .products.list.items.product-items > .product-item,
    .slider-post .item.item-post {
        flex: 0 0 calc(25% - 12px) !important;   /* 4 per view */
        min-width: 0 !important;
        max-width: calc(25% - 12px) !important;
    }
    @media (max-width: 1199px) {
        .products.list.items.product-items > .item,
        .products.list.items.product-items > .product-item,
        .slider-post .item.item-post { flex-basis: calc(33.333% - 11px) !important; max-width: calc(33.333% - 11px) !important; }  /* 3 per view */
    }
    @media (max-width: 767px) {
        .products.list.items.product-items,
        .slider-post .flex.overflow-x-auto { margin-left: 46px !important; margin-right: 46px !important; }
        .products.list.items.product-items > .item,
        .products.list.items.product-items > .product-item,
        .slider-post .item.item-post { flex-basis: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }  /* 2 per view */
        .slider-nav-btn { width: 44px; height: 44px; }
        .slider-nav-btn svg { width: 22px; height: 22px; }
        .slider-nav-prev { left: 4px; }
        .slider-nav-next { right: 4px; }
    }
    @media (max-width: 479px) {
        .products.list.items.product-items > .item,
        .products.list.items.product-items > .product-item,
        .slider-post .item.item-post { flex-basis: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; }  /* 1 per view */
    }
    /* Back-to-top (#yt-totop-fix): the YT/SmartWave jQuery that toggled + scrolled it is
       dead in Hyvä, and its arrow was a FontAwesome glyph (\f062) that isn't loaded here.
       Revive it via the vanilla JS below; kill the broken glyph and use an inline SVG. */
    #yt-totop-fix {
        background: var(--color-primary) !important;
        width: 44px !important; height: 44px !important;
        border-radius: 12px !important;
        display: none;                 /* toggled to flex by JS once scrolled down */
        align-items: center; justify-content: center;
        padding: 0; cursor: pointer;
    }
    #yt-totop-fix.is-visible { display: flex !important; }
    #yt-totop-fix:before { content: none !important; }
    #yt-totop-fix svg { width: 22px; height: 22px; display: block; }
    #yt-totop-fix:hover { background: var(--color-primary-darker) !important; }
    /* Hide the horizontal scrollbar on the card sliders (scrolling stays available
       via the arrows / touch); the visible scrollbar was showing under featured products. */
    .products.list.items.owl-carousel,
    .slider-post .owl-carousel {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding-bottom: 0 !important;
    }
    .products.list.items.owl-carousel::-webkit-scrollbar,
    .slider-post .owl-carousel::-webkit-scrollbar { display: none !important; height: 0 !important; }

    /* Size the slider items so ~4 products / ~3 blog posts show per view (like the
       original owl carousels), instead of a couple of oversized cards. */
    .products.list.items.owl-carousel { gap: 16px !important; }
    .products.list.items.owl-carousel .product-item {
        flex: 0 0 calc(25% - 12px) !important;
        max-width: calc(25% - 12px) !important;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }
    /* Blog item widths + per-view counts are handled by the shared featured/blog rules
       above (whole-item fractions + edge gutter). Here only keep centring for when there
       are too few posts to overflow (so 2 posts sit centred, not stretched/left-aligned). */
    .slider-post .flex.overflow-x-auto { gap: 16px !important; justify-content: safe center; }

    /* ============================================================
       BRAND SLIDER — grid layout, no owl-carousel needed
       ============================================================ */
    .brands-full { overflow: hidden; width: 100%; }
    /* Neutralize the owl wrappers so the 4 brand banners lay out as a single
       full-width flex row (matches the original owl carousel, which showed all
       four across at ~124px tall). Grid auto-fill proved unreliable here because
       the residual owl stage width collapsed the track to one column. */
    .brands-full .brands-content {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }
    .brands-full .brands-content .owl-stage-outer {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        position: static !important;
    }
    .brands-full .brands-content .owl-stage {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        transition: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    .brands-full .brands-content .owl-item {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        float: none !important;
        margin: 0 !important;
    }
    /* Owl duplicates real slides for looping; without owl JS they must be hidden */
    .brands-full .brands-content .owl-item.cloned { display: none !important; }
    /* Brand banner — match the original: left-aligned title over the banner image
       with a text-shadow (NOT a dark overlay), and a bottom-right "Shop now" link.
       Overrides the migration's centered/uppercase/overlay rules in custom.css. */
    .brands-full .brands-content .brand-item {
        position: relative;
        width: 100% !important;
        height: 124px;
        padding: 50px 40px !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center !important;
        overflow: hidden;
        cursor: pointer;
        color: #fff;
        text-shadow: 0 0 12px rgba(0,0,0,0.6);
    }
    .brands-full .brands-content .brand-item h3 {
        position: static !important;
        inset: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        color: #fff !important;
        font-size: 20px !important;
        line-height: 1.2em !important;
        font-weight: 400 !important;
        text-align: left !important;
        text-transform: none !important;
    }
    .brands-full .brands-content .brand-item h3 .fw-light {
        font-weight: 300 !important;
        font-size: inherit !important;
        display: inline !important;
    }
    .brands-full .brands-content .brand-item a,
    .brands-full .brands-content .brand-item > a,
    .brands-full .brands-content .brand-item h3 + a {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        bottom: 12px !important;
        right: 20px !important;
        color: #fff !important;
        font-size: 12px !important;
        text-transform: none !important;
        opacity: 1 !important;
        z-index: 2 !important;
    }
    @media (max-width: 767px) {
        .brands-full .brands-content .owl-stage { flex-wrap: wrap !important; }
        .brands-full .brands-content .owl-item { flex: 1 1 50% !important; }
    }

    /* ============================================================
       SERVICE ITEMS — pure CSS grid, no carousel needed
       ============================================================ */
    .services-full .services-content,
    .services-content {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        /* gap: 1.5rem !important;
        padding: 2rem 0 !important; */
        overflow: visible !important;
    }
    .services-content .owl-stage-outer {
        overflow: visible !important;
        position: static !important;
        width: 100% !important;
    }
    .services-content .owl-stage {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        width: 100% !important;
        transform: none !important;
        transition: none !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
        gap: 1.5rem !important;
    }
    .services-content .owl-item {
        float: none !important;
        min-width: 0 !important;
        width: 100% !important;
        flex: none !important;
        scroll-snap-align: unset !important;
    }

    /* ============================================================
       BLOG POST SLIDER — horizontal scroll
       ============================================================ */
    .slider-post {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .slider-post::-webkit-scrollbar { display: none; }
    .slider-post .owl-stage-outer {
        overflow: visible !important;
        position: static !important;
    }
    .slider-post .owl-stage {
        display: flex !important;
        gap: 1.5rem !important;
        width: auto !important;
        transform: none !important;
        transition: none !important;
        overflow-x: auto !important;
        padding-bottom: 0.5rem !important;
        scroll-snap-type: x mandatory;
    }
    .slider-post .owl-item {
        float: none !important;
        flex: 0 0 auto !important;
        min-width: 280px !important;
        max-width: 340px !important;
        scroll-snap-align: start !important;
    }

    /* ============================================================
       STICKY HEADER — solid background so content never shows through
       ============================================================ */
    .header-container.sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
    }
    /* Sticky-header background must match each store's header band. The store code
       is NOT exposed as a body class here (both stores render identical body classes),
       so the previous `.store-spares-usa-en` selector never matched and both stores
       fell back to white. Drive the colour from the PHP $isUsa flag instead. */
    .header-container.sticky {
        background: var(--sticky-bg) !important;
        box-shadow: var(--sticky-shadow) !important;
    }
    /* Prevent vehicle selector from overlapping body content when scrolling */
    body.scrolled .revolvo.art-search {
        position: relative;
        z-index: 100;
    }

    /* ============================================================
       FULL-WIDTH HOMEPAGE COLUMNS
       ============================================================ */
    .cms-index-index .columns {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ============================================================
       HEADER MISC FIXES
       ============================================================ */
    /* Login/Register: suppress stray leading slash on single-link header */
    .header-top .customer-action > .header.links > li:first-child:last-child:before {
        content: '' !important;
        margin: 0 !important;
    }

    /* ============================================================
       VEHICLE SELECTOR (Make/Model/Type native selects)
       ============================================================ */
    .smas-form .smas-attr .smas-attr-inner .smas-select,
    .smas-form-wrap .smas-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .3px;
        text-transform: uppercase;
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        /* width:auto so the box hugs its text and the arrow sits right beside the
           value (fixed width pinned the arrow to the far right, leaving a big gap). */
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 30px 0 4px;
        background-repeat: no-repeat;
        background-position: right 6px center;
        background-size: 20px 20px;
        background-image: var(--mmt-arrow-on);
        /* !important: custom.css paints the native select #0d633e which does not match
           the bar. Keep it transparent so the green/red bar shows through (the original
           hid the native select and showed a Chosen dropdown styled to match the bar). */
        background-color: transparent !important;
        border-color: transparent !important;
    }
    .smas-form .smas-attr .smas-attr-inner .smas-select:disabled,
    .smas-form-wrap .smas-select:disabled {
        color: var(--mmt-opt-disabled-color);
        cursor: not-allowed;
        background-image: var(--mmt-arrow-off);
    }
    .smas-select::-ms-expand { display: none; }
    /* While the custom dropdown is open, flip the chevron to point up */
    .smas-select.dd-open {
        background-image: var(--mmt-arrow-up-on) !important;
    }
    /* Theme the native option list so the opened dropdown matches the bar instead of
       the browser-default white (the original's Chosen dropdown was themed). */
    .smas-select option {
        text-transform: none;
        color: #fff;
        background-color: var(--mmt-option-bg);
    }
    .smas-wrap select, .smas-form-wrap select { text-transform: uppercase; }

    /* Custom themed dropdown panel (replaces the removed Chosen plugin's popup) */
    .smas-attr-inner { position: relative; }
    .smas-custom-panel {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        z-index: 200;
        min-width: 250px;
        max-width: 320px;
        padding: 12px;
        border-radius: 6px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
        /* Match the vehicle bar's own colour (lighter), not a dark gradient */
        background: var(--mmt-panel-bg);
        display: none;
    }
    .smas-custom-panel.open { display: block; }
    .smas-custom-panel::before {
        content: '';
        position: absolute;
        top: -7px;
        left: 24px;
        width: 14px;
        height: 14px;
        transform: rotate(45deg);
        background: var(--mmt-panel-accent);
    }
    .smas-custom-panel .smas-search {
        width: 100%;
        box-sizing: border-box;
        padding: 9px 10px;
        border: none;
        border-radius: 3px;
        outline: none;
        margin-bottom: 8px;
        background: #fff;
        color: #333;
        font-size: 13px;
    }
    .smas-custom-panel .smas-opts { max-height: 240px; overflow-y: auto; }
    .smas-custom-panel .smas-opt {
        padding: 10px 12px;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .smas-custom-panel .smas-opt:hover,
    .smas-custom-panel .smas-opt.sel { background: rgba(255, 255, 255, 0.22); }
    .smas-custom-panel .smas-opt.sel { font-weight: 700; }
    .smas-custom-panel .smas-search:focus { box-shadow: 0 0 0 3px var(--focus-ring); }
    /* Keep the panel on screen: the last field sits at the right edge of the bar, so
       anchoring its panel to left:0 pushed it past the viewport on narrow screens. */
    .smas-custom-panel { max-width: min(320px, calc(100vw - 24px)); }
    @media (min-width: 768px) {
        .smas-attr:last-of-type .smas-custom-panel { left: auto; right: 0; }
        .smas-attr:last-of-type .smas-custom-panel::before { left: auto; right: 24px; }
    }

    /* --- MMT action buttons (Search + Reset) ----------------------------------
       custom.css pins the button pill to 35px !important but sizes the search
       button inside it 40px, with line-height:50px on top, so the button spilled
       out of the pill and out of the select row and its glyph sat off-centre.
       Give the pill the same box as the 32px select fields (same height and the
       same top margin, so both table cells share one baseline) and centre the two
       buttons inside it. Selector depth matches custom.css's 9-class rule so the
       widths land without !important; padding needs it because .afx-btn-reset
       declares padding-right:8px !important. */
    .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner {
        display: flex;
        /* align-items: center;
        justify-content: center;
        gap: 4px;
        box-sizing: border-box;
        height: 32px !important;
        margin: 0.4rem 0 0;
        padding: 0 5px; */
    }
    .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner .btn.btn-search:not(.number-plate-search),
    .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner .btn.btn-reset,
    .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner .btn.afx-btn-reset {
        flex: 0 0 auto;
        /* display: inline-flex; */
        align-items: center;
        justify-content: center;
        /* !important: a (768–991px) rule in custom.css sets .btn-search
           width:48px !important, which otherwise squashed the circle into an oval. */
        width: 26px !important;
        height: 26px !important;
        min-width: 0;
        margin: 0;
        padding: 0 !important;
        line-height: 1;
        border-radius: 50%;
    }
    .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner .btn.btn-search:not(.number-plate-search)::before {
        font-size: 15px;
        line-height: 1;
    }
    .smas-btn .btn.btn-reset svg,
    .smas-btn .btn.afx-btn-reset svg {
        display: block;
        width: 14px;
        height: 14px;
    }
    .smas-btn .btn.btn-search:focus-visible,
    .smas-btn .btn.btn-reset:focus-visible,
    .smas-btn .btn.afx-btn-reset:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus-ring);
    }
    @media (max-width: 767px) {
        /* Fields stack, so the pill sits beside a taller cell — symmetric margins let
           the cell's vertical-align:middle centre it against them. */
        .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner {
            margin: 0.4rem 0;
        }
    }
    /* .smas-attr is width:33.33%, so at tablet width a long label ("SELECT MODEL")
       is wider than its field and ran on under the chevron. Ellipsize instead — the
       30px right padding already reserves room for the arrow. */
    .smas-form .smas-attr .smas-attr-inner .smas-select,
    .smas-form-wrap .smas-select {
        text-overflow: ellipsis;
    }

    /* ============================================================
       PRODUCT IMAGE — restore proper display in listing cards
       ============================================================ */
    .product-image-container,
    .product-image-container span.product-image-wrapper {
        display: block !important;
    }
    .product-image-container span.product-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* ============================================================
       FEATURED PRODUCTS — 4 cards per row on desktop
       ============================================================ */
    @media (min-width: 992px) {
        .ltabs-items .product-items .product-item,
        .ltabs-items .products-grid .product-item {
            flex: 0 0 calc(25% - 12px) !important;
            min-width: 0 !important;
            max-width: none !important;
        }
    }

    /* ============================================================
       DEAL OF THE DAY — compact layout fixes
       ============================================================ */
    .deal-container {
        /* Restore the original garage background image (migration flattened it to grey).
           Inline CSS resolves url() against the page, so use the absolute static URL. */
        background: url('../images/bg-deal.jpg') no-repeat top center;
        background-size: cover;
        padding: 80px 0;
        margin: 0 auto 75px;
        border-radius: 2rem;
        max-width: 1920px;
    }
    .deal-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 2rem;
    }
    @media (max-width: 991px) {
        .deal-grid { grid-template-columns: 1fr; }
    }
    /* ---- "Parts in Focus" card -------------------------------------------------
       The slide markup is AFX_Products::parts/item.phtml (Tailwind). Everything that
       used to live here as `!important` existed only to undo the Bootstrap grid that
       template no longer emits, so it is gone. What is left is the card geometry the
       utilities cannot express: the used-parts half is hidden, the scroller has to fill
       the card so a slide can be centred in it, and the scrollbar has to disappear
       while the element stays programmatically scrollable for the arrows + autoplay. */

    /* The design shows only the "part in focus" — no used-parts section. */
    .deal-block .oem-used-parts,
    .oem-parts .used-parts-title,
    .oem-parts .used-parts-slider { display: none; }

    /* Let the slide sit vertically centred in the card instead of stacking against the
       top edge and leaving ~90px of dead white below it. */
    .deal-container .deal-block { display: flex; flex-direction: column; }
    .deal-container .deal-block .oem-parts { display: flex; flex: 1 1 auto; flex-direction: column; }
    .deal-container .deal-block .oem-parts > .parts-slider { flex: 1 1 auto; align-items: center; }

    /* Scrollable for scrollTo() and for touch swipe — the legacy `.parts-slider
       {overflow:hidden}` in custom.css would otherwise kill both — but with no visible
       scrollbar. */
    .deal-container .deal-block .oem-parts > .parts-slider {
        overflow-x: auto;
        overflow-y: hidden;
        /* index.phtml's `pb-4` reserved room for a scrollbar that is hidden here; left in
           place it pushes the centred slide off the card's optical centre. It needs
           !important because the class is a COLLISION: the legacy Bootstrap in
           ytextend.css declares `.pb-4, .py-4 { padding-bottom: 1.5rem !important }`,
           which is what actually applies — Tailwind's own `.pb-4` (1rem) never wins. */
        padding-bottom: 0 !important;
    }
    .deal-block .parts-slider {
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
    }
    .deal-block .parts-slider::-webkit-scrollbar { display: none; width: 0; height: 0; }

    /* The legacy `button:not(.owl-prev){background-color:#E94F35}` in the generated
       config_<store>.css outranks a Tailwind `bg-brand` utility (type + :not() beats a
       bare class) and loads after it, so the Add to Cart colour is asserted here — from
       the store variable, so .net stays green and .usa stays red. */
    .deal-block .afx-focus-atc {
        background-color: var(--color-primary);
        /* Both need !important to clear yttheme.css's blanket
           `button { padding: 0 20px !important; height: 35px }`. */
        padding: 0.5rem 1.25rem !important;
        height: auto !important;
    }
    .deal-block .afx-focus-atc:hover,
    .deal-block .afx-focus-atc:focus-visible { background-color: var(--color-primary-darker); }
    .deal-block .afx-focus-atc:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

    /* ============================================================
       2-COLUMN PAGES (search results / layered category / account)
       ------------------------------------------------------------
       The sidebar/content split lives in the page layout itself
       (Magento_Theme/page_layout/2columns-left.xml and -right.xml) as a Tailwind
       grid on `.afx-2col`, with the sidebar container declared before the main
       container. Those layouts no longer emit the legacy Luma class names
       (`row-content` / `col-main` / `col-sidebar`), so the old float + fixed-width
       rules in yttheme.css and the per-store custom.css cannot match them.

       One inherited rule still has to be switched off. Hyvä's styles.css makes
       `.columns` itself the grid and positions `.columns > .column.main` /
       `.sidebar-main` into its tracks. This theme's 1column page layout nests main
       as `.columns > .container > .row > .col-main > .column.main`, so those child
       selectors never match: `.columns` stayed a grid whose only item was
       `.container`, which therefore landed in a single narrow track and squeezed the
       product list to ~0 width. `.columns` must be a plain block here; `.afx-2col`
       inside it is the grid that does the actual split.
       ============================================================ */
    body[class*="page-layout-2columns-"] .columns {
        display: block;
    }
    /* Match the reference storefronts' content width. Tailwind's `.container` caps at
       1280px (1232px inside its padding), which left the product column 88px narrower than
       the reference's 985px and made the toolbar controls fight for room. The reference
       container is 1320px: 305 sidebar + 30 gutter + 985 content. Scoped to 2-column pages
       so 1-column/CMS layouts keep their current width. */
    @media (min-width: 1280px) {
        body[class*="page-layout-2columns-"] .page-main,
        body[class*="page-layout-2columns-"] .page-main .columns,
        body[class*="page-layout-2columns-"] .page-main .columns > .container {
            max-width: 1320px !important;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
    }

    /* Hyvä's product-list toolbar template lays the count, pager, limiter and sorter out
       with Tailwind grid classes. The legacy `.toolbar { display: table }` in the per-store
       config CSS (generated from Magento_Theme/templates/config.phtml) and in custom.css
       both load AFTER tailwind.css, so they won the cascade and collapsed the toolbar into
       a single table row — the item count and "per page" selector ended up out of place.
       Keep the legacy background/border, restore the grid. */
    /* Only `display` is forced here — enough to beat the legacy `.toolbar { display: table }`.
       Wrapping is left to the template's own `flex-wrap lg:flex-nowrap` utilities; setting
       flex-wrap here (specificity 0,2,0) would outrank them and pin the toolbar to two rows
       on desktop. */
    .toolbar.toolbar-products {
        display: flex;
    }
    /* The toolbar deliberately still WRAPS. Forcing nowrap made a long pagination run either
       overflow the bar and paint over the "per page"/"Sort By" controls, or clip the pager
       once it was the only shrinkable item. Wrapping is the graceful failure: with the
       reference's content width (see the .container rule below) and a 5-page frame
       everything fits on one row anyway, and anything wider simply moves the sorter to a
       second line instead of breaking. */
    .toolbar.toolbar-products > * {
        min-width: 0;
    }
    /* One row on desktop. Every child is flex:0 0 auto and the pagination window is capped
       at 5 pages (design/pagination/pagination_frame), so the four controls measure ~850px
       inside a ~910px row — nowrap simply lays them out instead of letting the browser
       break the line on its max-content estimate. Nothing can be clipped or overlapped:
       the pager cannot shrink, and it scrolls inside its own box in the pathological case. */
    /* One line on desktop, with no scrollbar and nothing clipped.
       Measured on the widest real case (USA search, "Items 1-10 of 2147" + 5-page pager +
       limiter + sorter): 834px of controls plus 24px of gaps inside a 913px row — it fits
       with ~55px to spare. The browser was still breaking the line because flex sizes the
       decision on each item's MAX-content width, which for the <select>s is their widest
       option. nowrap simply overrides that estimate; there is no real overflow to scroll.
       1360px is the threshold because the content container caps at 1320px: at or above it
       the row is always the full 913px and the controls always fit. Below, the column
       shrinks with the viewport and genuinely runs out of room, so wrapping takes over —
       still with no scrollbar and nothing clipped. */
    @media (min-width: 1360px) {
        .toolbar.toolbar-products {
            flex-wrap: nowrap !important;
        }
    }

    /* The reference toolbar's selects are 12px with tight padding; Hyvä's `.form-select`
       (Tailwind forms plugin) is noticeably chunkier, which was enough to push "Sort By"
       onto a second row. Scoped to the product-list toolbar. */
    .toolbar.toolbar-products .form-select {
        font-size: .75rem;
        line-height: 1rem;
        padding: .375rem 1.75rem .375rem .5rem;
        background-position: right .375rem center;
    }
    /* Flex decides whether to wrap from each item's MAX-content width. For a <select> that
       is its widest option ("Product Name", "Relevance", …), far wider than what renders —
       which pushed "Sort By" onto a second row while the bar still looked half empty. Fixing
       the widths bounds that hypothetical size so the four controls stay on one line. */
    .toolbar.toolbar-products .sorter-options {
        width: 9rem;
    }
    .toolbar.toolbar-products .limiter-options {
        width: 4.25rem;
    }
    /* Keep each control on one line — without this the count ("Items 1-10 of 20") and the
       "Show N per page" label break across two lines once the row gets tight, which the
       reference storefronts never do. */
    .toolbar.toolbar-products .toolbar-amount,
    .toolbar.toolbar-products .limiter,
    .toolbar.toolbar-products .limiter label,
    .toolbar.toolbar-products .toolbar-sorter {
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* The legacy .sorter-action carries a glyph in ::before, which doubled up with the
       SVG arrow in the Hyvä sorter template. */
    .toolbar-products .sorter-action::before,
    .toolbar-products .sorter-action::after {
        content: none !important;
    }
    /* Pager sits between the count and the limiter/sorter, as on the reference. It must not
       grow, or it absorbs the free space and pushes the sorter onto a second row — and it is
       the ONE item allowed to shrink, so a long pagination run scrolls inside its own box
       instead of overflowing the toolbar and painting over the other controls. */
    .toolbar.toolbar-products > div:has(> .pages) {
        flex: 0 0 auto;
        justify-content: center;
    }
    /* Hyvä's pager template puts `flex` on <nav class="pages">, but a legacy `.pages` rule
       still wins and computes it back to display:block. Its children (the prev/next arrows
       and the <ol> of page numbers) are then inline-level, so the next arrow dropped onto a
       second line whenever the bar got tight. Force the nowrap flex row. */
    .toolbar.toolbar-products .pages {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: .25rem;
        white-space: nowrap;
    }
    .toolbar.toolbar-products .pages > ol {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
    }
    .toolbar.toolbar-products .pages .item,
    .toolbar.toolbar-products .pages > a {
        flex: 0 0 auto;
    }

    /* The toolbar is a single flex row (see Magento_Catalog::product/list/toolbar.phtml).
       Hyvä's amount/limiter/pager partials still carry `order-*` classes from its original
       4/8-column grid, which would reshuffle them; neutralise so the DOM order
       (count, pager, "per page", "Sort By") stands — the reference storefront order. */
    .toolbar.toolbar-products > * {
        order: 0 !important;
    }

    /* Pagination. Hyvä's pager template tags every item `btn btn-secondary`, which this
       theme's tailwind-source.css defines as the secondary red (#ff3333) — used elsewhere
       (checkout, wishlist) so it cannot be redefined globally. The reference storefronts use
       a neutral pager with the current page in the store's brand colour, so restyle inside
       `.pages` only. var(--color-primary) keeps it green on .net and red on .usa. */
    .toolbar-products .pages .btn-secondary,
    .toolbar-blog-posts .pages .btn-secondary,
    .pager .pages .btn-secondary {
        background-color: #fff !important;
        color: #686868 !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 3px !important;
        min-width: 28px;
        padding: 4px 8px !important;
        font-weight: 400;
    }
    .toolbar-products .pages .btn-secondary:hover,
    .toolbar-blog-posts .pages .btn-secondary:hover,
    .pager .pages .btn-secondary:hover {
        background-color: #f5f5f5 !important;
    }
    /* Product-list qty field. It measured 50px border-box with 1px borders and 9px padding,
       leaving only 30px of usable width — enough to clip the "Qty" placeholder to "Qt" — and
       35px tall against a 40px Add to Cart button, so the two did not line up. Widen a
       little, drop the side padding, centre the value and match the button height. */
    .afx-plp-qty {
        align-items: center;
    }
    .afx-plp-qty-input {
        width: 56px !important;
        height: 40px !important;
        padding: 0 6px !important;
        text-align: center;
        font-size: 12px;
    }
    /* Number spinners would eat that width back on hover. */
    .afx-plp-qty-input::-webkit-outer-spin-button,
    .afx-plp-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .afx-plp-qty-input {
        -moz-appearance: textfield;
        appearance: textfield;
    }
    .afx-plp-tocart {
        height: 40px !important;
    }

    .toolbar-products .pages [aria-current="page"],
    .toolbar-blog-posts .pages [aria-current="page"],
    .pager .pages [aria-current="page"] {
        background-color: var(--color-primary, #137c4e) !important;
        border-color: var(--color-primary, #137c4e) !important;
        color: #fff !important;
    }

    /* Toolbar sort-direction toggle: plain thin arrow (matches the original),
       not the theme's global green <button>. */
    .toolbar-products .sorter-action,
    .toolbar-products .sorter-action:hover,
    .toolbar-products .sorter-action:focus {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-left: .25rem !important;
        color: #4b5563 !important;
        min-width: 0 !important;
    }
    .toolbar-products .sorter-action svg {
        stroke: #4b5563 !important;
        color: #4b5563 !important;
    }
    .toolbar-products .sorter-action:hover svg { stroke: #111827 !important; }


/**
 * Base CSS for the Spares Hyvä stores — component styles extracted from inline <style>
 * blocks in phtml. Loaded LAST (body-end, via Magento_Theme/html/legacy_fixes.phtml) so it
 * wins the cascade over the unlayered per-store custom.css that is loaded after tailwind.css.
 * Kept as a standalone stylesheet on purpose: folding these rules into tailwind.css
 * (@layer components) would place them BEHIND custom.css in the cascade and silently break
 * the UI — see the Phase-0 layering fix in the migration plan before converting to @apply.
 *
 * Colours: brand accents use var(--color-primary) (per store, set in legacy_fixes.phtml —
 * NET green #137C4E / USA red #DA0000). Two greens are intentionally hardcoded #137C4E on
 * BOTH stores: the semantic in-stock indicator and the REGISTER button (per original design).
 *
 * Selectors are scoped by a component root class (.afx-price / #assambly_linkage /
 * .afx-cart-table / .afx-reg-col) or, for shared Magento markup, a body page-class
 * (.checkout-cart-index / .customer-account-create) — the redundant `body` qualifier has
 * been dropped to reduce specificity.
 */

/* ============================================================================
 * 1. Simple-product PDP — purchase box + "Linked Vehicles and Assemblies".
 *    Markup: AFX_Products product/detailsInfo.phtml.
 * ========================================================================== */
.afx-price > .product-info-main { display: none !important; }
.afx-purchase-box {
    background: #e9f7ef; border: 1px solid #cfe9da; border-radius: 6px;
    padding: 1.5rem 1.75rem; margin-bottom: 1.5rem;
}
.afx-purchase-top {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;
}
.afx-purchase-box.afx-unavailable .afx-purchase-top { display: block; margin-bottom: 0; }
.afx-purchase-box.afx-unavailable .afx-qty-available { display: block; text-align: right; margin-top: .5rem; }
.afx-stock.in { color: #137C4E; font-weight: 700; display: inline-flex; align-items: center; }
.afx-stock.in::before {
    content: ''; display: inline-block; width: 14px; height: 14px; margin-right: .5rem;
    border-radius: 3px; background: #137C4E;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/contain no-repeat;
}
.afx-stock.out { color: #c0392b; font-weight: 700; }
.afx-stock.unavailable { color: #222; font-weight: 700; font-size: .8125rem; line-height: 1.4; display: block; }
.afx-qty-available { color: #555; font-size: .95rem; white-space: nowrap; }
.afx-price-line { margin-bottom: 1.25rem; }
.afx-price-value { font-size: 1.9rem; font-weight: 700; color: #222; }
.afx-vat { font-size: 1rem; color: #555; margin-left: .35rem; }
.afx-tocart-form { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.afx-qty-label { font-weight: 600; color: #333; }
.afx-qty-input {
    width: 4rem; padding: .55rem; text-align: center; border: 1px solid #cfcfcf;
    border-radius: 4px; background: #fff;
}
.afx-tocart-btn {
    background: var(--color-primary, #137C4E) !important; color: #fff !important; border: none !important; border-radius: 4px;
    padding: .8rem 1.75rem; font-weight: 700; font-size: 1rem; cursor: pointer;
    text-transform: uppercase; letter-spacing: .02em;
}
.afx-tocart-btn:hover { background: var(--color-primary-darker, #0f6640) !important; }
.product-description-block { margin-top: 1.5rem; color: #555; line-height: 1.6; }

.grid.lg\:grid-cols-2:has(#assambly_linkage) { display: block !important; }
#assambly_linkage { display: block !important; width: 100% !important; max-width: 100% !important; margin-top: 2.5rem; text-align: left; }
#assambly_linkage a:empty { display: none !important; }
#assambly_linkage h2 {
    display: inline-block; margin: 0; background: var(--color-primary, #137C4E); color: #fff;
    padding: .85rem 1.75rem; border-radius: 6px 6px 0 0;
    font-size: 1.35rem; line-height: 1.2; position: relative; z-index: 1;
}
#assambly_linkage .card {
    border: 1px solid #e5e5e5; border-radius: 0 6px 6px 6px; background: #fff;
    padding: 2rem 1.75rem; margin: 0; box-shadow: none;
}
#assambly_linkage .mmt-wrap { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
#assambly_linkage .mmt-left { flex: 0 0 38%; max-width: 38%; border: 1px solid #e5e5e5; border-radius: 8px; padding: .75rem; }
#assambly_linkage .mmt-right { flex: 1 1 0; min-width: 0; }
#assambly_linkage .mmt-trigger {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background: var(--color-primary, #137C4E) !important; color: #fff !important; border: none !important;
    border-radius: 6px; padding: .75rem 1rem; font-weight: 700; margin: 0 0 .5rem; cursor: pointer;
}
#assambly_linkage .mmt-trigger:after { content: "\25BE"; color: #fff; transition: transform .2s; }
#assambly_linkage .mmt-trigger[aria-expanded="true"]:after { transform: rotate(180deg); }
#assambly_linkage .mmt-panel { display: none; padding: .25rem .5rem; }
#assambly_linkage .mmt-panel.open { display: block; }
#assambly_linkage .mmt-model { font-weight: 700; color: #222; margin: .75rem 0 .35rem; }
#assambly_linkage .mmt-types { list-style: none; padding-left: 0; margin: 0; }
#assambly_linkage .mmt-types li { background: #e9f7ef; border-radius: 4px; margin: 4px 0; padding: 0; }
#assambly_linkage .mmt-types li a.type-link { display: block; padding: .6rem .9rem; color: #333; text-decoration: none; }
#assambly_linkage .mmt-types li a.type-link.active { box-shadow: inset 0 0 0 1px var(--color-primary, #137C4E); }
#assambly_linkage .mmt-types li a.type-link:hover { background: #d9f0e2; text-decoration: none; }
#assambly_linkage .mmt-right #product-display { background: #f5f5f5; border-radius: 6px; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
#assambly_linkage .mmt-right #product-display img { max-width: 100%; height: auto; }

/* ============================================================================
 * 2. Shopping-cart items table + info panel + actions.
 *    Markup: autostore_child Magento_Checkout php-cart/form.phtml + item/default.phtml.
 * ========================================================================== */
.afx-cart-table { width: 100%; border-collapse: collapse; }
.afx-cart-table thead th {
    text-align: left; font-weight: 600; color: #666; text-transform: uppercase;
    font-size: .8rem; letter-spacing: .02em; padding: .5rem .75rem;
    border-bottom: 1px solid #e2e2e2;
}
.afx-cart-table thead .col.price,
.afx-cart-table thead .col.qty,
.afx-cart-table thead .col.subtotal { text-align: left; }
.afx-cart-table tbody.cart.item { border-bottom: 1px solid #ececec; }
.afx-cart-table td { padding: 1.25rem .75rem; vertical-align: middle; }
.afx-cart-table td.col.item { vertical-align: top; }
.afx-cart-table td.col.item::after { content: ''; display: block; clear: both; }
.afx-cart-table .product-item-photo { float: left; width: 70px; margin-right: 1rem; }
.afx-cart-table .product-item-photo img { width: 70px; height: auto; }
.afx-cart-table .product-item-details { overflow: hidden; }
.afx-cart-table .product-item-name { display: block; font-weight: 400; }
.afx-cart-table .product-line { display: flex; gap: .4rem; align-items: baseline; }
.afx-cart-table .product-brand { font-weight: 700; color: #333; }
.afx-cart-table .product-sku { color: #999; font-size: .9rem; }
.afx-cart-table .product-description { color: #333; margin-top: .1rem; }
.afx-cart-table .product.attribute.status { margin-top: .4rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.afx-cart-table .stock.available,
.afx-cart-table .stock.in-stock { color: #137C4E; font-weight: 700; font-size: .9rem; }
.afx-cart-table .stock.available::before,
.afx-cart-table .stock:has(.in-stock)::before { content: ''; }
.afx-cart-table .stock.unavailable,
.afx-cart-table .stock.superseded { color: #222; font-weight: 700; font-size: .85rem; }
.afx-cart-table .stock.qty { color: #666; font-size: .9rem; }
.afx-cart-table td.col.qty input.qty { width: 4rem; text-align: center; padding: .4rem; border: 1px solid #cfcfcf; border-radius: 4px; }
.afx-cart-table td.col.price,
.afx-cart-table td.col.subtotal { white-space: nowrap; font-size: 1.05rem; }
.afx-cart-table th.col.action,
.afx-cart-table td.col.action { width: 60px; min-width: 60px; text-align: center; overflow: visible; }
/* Only the delete/remove button (gift-options button/dialog hidden below); the two former
   duplicate .item-actions rules are consolidated into their effective computed result. */
.afx-cart-table td.col.action .item-actions { display: inline-flex !important; justify-content: flex-end; align-items: center; }
.afx-cart-table td.col.action button[data-delete-post-json] {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0; cursor: pointer;
    color: #c0392b !important; background: #fff; border: 1px solid #e2c3c0; border-radius: 4px;
}
.afx-cart-table td.col.action button[data-delete-post-json]:hover { background: #fbeceb; }
.afx-cart-table td.col.action button[data-delete-post-json] svg {
    width: 20px !important; height: 20px !important; display: block; stroke: currentColor !important;
}
.afx-cart-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.afx-cart-actions .action.continue {
    background: var(--color-primary, #DA0000); color: #fff; border: none; border-radius: 4px;
    padding: .7rem 1.5rem; font-weight: 600; text-decoration: none; display: inline-block;
}
.afx-cart-actions .action.update {
    background: var(--color-primary, #DA0000); color: #fff; border: none; border-radius: 4px;
    padding: .7rem 1.5rem; font-weight: 600; cursor: pointer;
}
/* Info column + button + collapsible note panel (two former td.col.info rules merged). */
.afx-cart-table th.col.info,
.afx-cart-table td.col.info { text-align: center; width: 70px; min-width: 70px; }
.afx-cart-table td.col.info { color: #888; }
.afx-cart-table td.col.info .info-icon { display: inline-flex; }
.afx-cart-table td.col.info .afx-info-btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 32px !important; height: 32px !important; padding: 0 !important; cursor: pointer;
    background: #fff !important; border: 1px solid #bdbdbd !important; border-radius: 50% !important;
    color: #555 !important; font: italic 700 16px/1 Georgia, 'Times New Roman', serif;
}
.afx-cart-table td.col.info .afx-info-btn:hover { color: var(--color-primary, #333) !important; border-color: var(--color-primary, #999) !important; }
.afx-cart-table td.col.info .afx-info-btn svg { width: 18px !important; height: 18px !important; display: block; stroke: currentColor !important; }
.afx-info-row > td { background: #f7f9fa; padding: 1rem 1.25rem; }
.afx-info-panel { display: flex; flex-direction: column; gap: .5rem; max-width: 560px; }
.afx-info-label { font-weight: 600; font-size: .9rem; }
.afx-info-hint { font-weight: 400; color: #888; font-size: .8rem; }
.afx-info-controls { display: flex; gap: .75rem; align-items: flex-start; }
.afx-info-input { flex: 1; border: 1px solid #cfcfcf; border-radius: 4px; padding: .5rem; resize: vertical; }
.afx-info-save {
    background: var(--color-primary, #DA0000); color: #fff; border: none; border-radius: 4px;
    padding: .5rem 1.25rem; cursor: pointer; white-space: nowrap;
}
.afx-info-error { color: #c0392b; font-size: .85rem; }
/* The original cart has no gift-options buttons — hide Hyvä's (page-scoped, generic markup). */
.checkout-cart-index [x-data="initGiftItemOptions"],
.checkout-cart-index [x-data="initGiftOptions"] { display: none !important; }
@media (max-width: 767px) {
    .afx-cart-table thead { display: none; }
    .afx-cart-table td { display: block; text-align: left; }
}

/* ============================================================================
 * 3. Customer registration (create account) — 2-column layout, fields, show-password.
 *    Markup: autostore_child Magento_Customer form/register.phtml.
 *    The REGISTER button uses var(--color-primary) so each store takes its own brand
 *    colour from afx-store.css; it was previously hardcoded NET green on both stores.
 * ========================================================================== */
.afx-reg-cols { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: flex-start; max-width: 1160px; margin: 0 auto; }
.afx-reg-col { flex: 1 1 0; min-width: 320px; border: 1px solid #e2e2e2; border-radius: 4px; padding: 1.5rem 1.75rem 2rem; background: #fff; }
.afx-reg-col .fieldset { display: block !important; width: 100% !important; float: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 1.5rem !important; background: transparent !important; box-shadow: none !important; }
.afx-reg-col .fieldset:last-child { margin-bottom: 0 !important; }
.afx-reg-col .legend { display: block; width: 100%; font-size: 1.05rem; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .02em; padding-bottom: .5rem; border-bottom: 1px solid #e2e2e2; margin-bottom: 1rem; }
.afx-reg-col .legend + br { display: none; }
.afx-reg-col .field { margin-bottom: 1rem; }
.afx-reg-col .field > .label,
.afx-reg-col .field > label { display: inline-block; margin-bottom: .25rem; font-size: .85rem; color: #555; }
.afx-reg-col input.input-text,
.afx-reg-col select,
.afx-reg-col input[type="email"],
.afx-reg-col input[type="password"],
.afx-reg-col input[type="text"],
.afx-reg-col input[type="tel"] { width: 100%; padding: .55rem .6rem; border: 1px solid #cfcfcf !important; border-radius: 4px; background: #fff; }
.afx-reg-col input[type="password"] { border: 1px solid #cfcfcf !important; width: 100% !important; padding: .55rem .6rem !important; border-radius: 4px; background: #fff; }
.afx-reg-col .field input[type="text"],
.afx-reg-col .field input[type="number"],
.afx-reg-col .field input.input-text,
.afx-reg-col .field select { display: block !important; width: 100% !important; border: 1px solid #cfcfcf !important; padding: .55rem .6rem !important; border-radius: 4px; background: #fff; }
.customer-account-create .fieldset.create.info .field.taxvat { display: none !important; }
.afx-reg-col .field.region #region_id { display: block !important; }
.afx-reg-col .field.region #region { display: none !important; }
.afx-reg-col input[type="checkbox"],
.afx-reg-col input[type="radio"] {
    -webkit-appearance: auto !important; appearance: auto !important;
    width: 16px !important; height: 16px !important; display: inline-block !important;
    opacity: 1 !important; position: static !important; margin: 0 .4rem 0 0 !important;
}
.afx-reg-col .field.name-firstname,
.afx-reg-col .field.name-lastname { display: inline-block; width: calc(50% - .5rem); vertical-align: top; }
.afx-reg-col .field.name-firstname { margin-right: .75rem; }
.afx-reg-col .field.choice input { width: auto; margin-right: .4rem; }
.afx-reg-col .field.choice > label,
.afx-reg-col .field.choice { display: inline-flex; align-items: center; }
.afx-reg-right .actions-toolbar { margin-top: 1rem; }
.afx-reg-right .actions-toolbar .primary .action.submit {
    background: var(--color-primary, #137C4E); color: #fff; border: none; border-radius: 4px; padding: .7rem 2.5rem; font-weight: 600; text-transform: uppercase; cursor: pointer;
    transition: background-color .15s ease-in-out;
}
.afx-reg-right .actions-toolbar .primary .action.submit:hover,
.afx-reg-right .actions-toolbar .primary .action.submit:active {
    background: var(--color-primary-darker, #0f5d3a);
}
.afx-reg-right .actions-toolbar .primary .action.submit:focus-visible {
    outline: 2px solid var(--color-primary-darker, #0f5d3a); outline-offset: 2px;
}
.afx-reg-right .actions-toolbar .primary .action.submit[disabled] { opacity: .55; cursor: not-allowed; }
.afx-reg-right .actions-toolbar .secondary { margin-top: .75rem; }
.customer-account-create .field.password .control,
.customer-account-create .field.confirmation .control { position: relative; }
.customer-account-create .field.password .control input,
.customer-account-create .field.confirmation .control input { padding-right: 2.4rem !important; }
.afx-pw-toggle {
    position: absolute; top: 7px; right: 8px; width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent !important; border: 0 !important; color: #777 !important; cursor: pointer;
}
.afx-pw-toggle:hover { color: #333 !important; }
.afx-pw-toggle svg { width: 18px !important; height: 18px !important; display: block; stroke: currentColor !important; }
@media (max-width: 860px) { .afx-reg-col { flex: 1 1 100%; } }

/* ============================================================================
 * 4. Customer login page — 2-column "Registered Customers" / "New Customers"
 *    bordered boxes. Markup: autostore_child Magento_Customer form/login.phtml +
 *    newcustomer.phtml. Matches the register-page treatment (see section 3), including
 *    var(--color-primary) on the buttons so each store stays on brand.
 * ========================================================================== */
.customer-account-login .login-container {
    display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: flex-start;
    max-width: 1160px; margin: 1.5rem auto 0;
}
.customer-account-login .login-container > .afx-auth-box { flex: 1 1 0; min-width: 320px; margin: 0; }
.customer-account-login .afx-auth-box {
    border: 1px solid #e2e2e2; border-radius: 4px; background: #fcfcfc;
    padding: 1.5rem 1.75rem 2rem; box-shadow: none;
}
.customer-account-login .afx-auth-legend {
    display: block; width: 100%; margin: 0 0 1rem; padding: 0 0 .6rem;
    font-size: .8rem; font-weight: 400; color: #8a8a8a; border-bottom: 1px solid #e5e5e5;
}
.customer-account-login .afx-auth-intro { color: #333; margin-bottom: 1.25rem; }
.customer-account-login .fieldset.login { border: 0; padding: 0; margin: 0; }
.customer-account-login .afx-auth-box .field { margin-bottom: 1rem; }
.customer-account-login .afx-auth-box .field > .label,
.customer-account-login .afx-auth-box .field > label { display: inline-block; margin-bottom: .25rem; font-size: .85rem; color: #555; }
.customer-account-login .afx-auth-box input[type="email"],
.customer-account-login .afx-auth-box input[type="password"],
.customer-account-login .afx-auth-box input[type="text"] {
    width: 100%; padding: .55rem .6rem; border: 1px solid #cfcfcf !important; border-radius: 4px; background: #fff;
}
.customer-account-login .afx-show-password { display: flex; align-items: center; gap: .4rem; margin: .25rem 0 1.25rem; }
.customer-account-login .afx-show-password input[type="checkbox"] {
    -webkit-appearance: auto !important; appearance: auto !important;
    width: 16px !important; height: 16px !important; margin: 0 !important; opacity: 1 !important; position: static !important;
}
.customer-account-login .afx-show-password label { margin: 0; color: #333; font-size: .9rem; }
.customer-account-login .afx-auth-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem; }
.customer-account-login .afx-login-btn,
.customer-account-login .afx-register-btn {
    background: var(--color-primary, #137C4E) !important; color: #fff !important; border: none !important; border-radius: 4px;
    padding: .6rem 1.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
    display: inline-block; text-decoration: none;
    transition: background-color .15s ease-in-out;
}
.customer-account-login .afx-login-btn:hover,
.customer-account-login .afx-register-btn:hover,
.customer-account-login .afx-login-btn:active,
.customer-account-login .afx-register-btn:active {
    background: var(--color-primary-darker, #0f5d3a) !important;
}
/* Keyboard focus must stay visible — the theme resets outlines on buttons. */
.customer-account-login .afx-login-btn:focus-visible,
.customer-account-login .afx-register-btn:focus-visible {
    outline: 2px solid var(--color-primary-darker, #0f5d3a); outline-offset: 2px;
}
.customer-account-login .afx-login-btn[disabled],
.customer-account-login .afx-register-btn[disabled] { opacity: .55; cursor: not-allowed; }
.customer-account-login .afx-forgot { color: #333; text-decoration: none; font-size: .95rem; }
.customer-account-login .afx-forgot:hover { text-decoration: underline; }
.customer-account-login .afx-required-note { color: #e02b27; font-size: .85rem; margin-top: 1.25rem; }
.customer-account-login .block-new-customer .block-content p { color: #333; line-height: 1.6; }
@media (max-width: 860px) { .customer-account-login .login-container > .afx-auth-box { flex: 1 1 100%; } }

/* ============================================================================
 * 5. Customer account dashboard + sidebar navigation (scoped to body.account).
 *    Markup: Hyva Magento_Customer account/navigation.phtml (sidebar) +
 *    AFX_CustomerDetails account/dashboard/info.phtml & address.phtml.
 *    Buttons (.btn-success) use var(--color-primary) (green NET / red USA); the active
 *    sidebar item uses an orange accent (#f47b20) as in the original storefront.
 * ========================================================================== */
/* Sidebar navigation. Real markup: div.card.account-nav > button#account-nav-title
   (mobile toggle "My Account" — the red box) + nav#account-nav > ul.nav.items.
   Hide the toggle, always show the list, and make the card the gray nav box. */
.account #account-nav-title { display: none !important; }
.account nav#account-nav { display: block !important; border-top: 0 !important; padding-top: 0 !important; margin: 0 !important; }
.account .card.account-nav {
    background: #f5f5f5 !important; border: 1px solid #e5e5e5 !important; border-radius: 4px !important;
    box-shadow: none !important; padding: .5rem 0 !important;
}
.account .account-nav .nav.items { list-style: none; margin: 0; padding: 0; }
.account .account-nav .nav.item { margin: 0; }
.account .account-nav .nav.item > a,
.account .account-nav .nav.item > strong {
    display: block; padding: .6rem 1.25rem; color: #333; text-decoration: none;
    border-left: 3px solid transparent; font-size: .95rem; font-weight: 400;
}
.account .account-nav .nav.item > a:hover { background: #ececec; color: #111; }
.account .account-nav .nav.item.current > a,
.account .account-nav .nav.item.current > strong {
    border-left-color: #f47b20; background: #fff; color: #111; font-weight: 600;
}
/* nested sub-nav (e.g. Manage Sub Account) indent */
.account .account-nav .nav.item .nav.items .nav.item > a { padding-left: 2.25rem; font-size: .9rem; }
/* Dashboard content blocks */
.account .block { margin-bottom: 2rem; }
.account .block-title > strong { font-size: 1.05rem; color: #8a8a8a; font-weight: 600; }
.account .block-dashboard-info .block-content,
.account .block-dashboard-addresses .block-content { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; }
.account .block-dashboard-info .block-content > .box,
.account .block-dashboard-addresses .block-content > .box { flex: 1 1 40%; min-width: 280px; }
.account .box-title { display: block; font-weight: 700; color: #222; margin-bottom: .5rem; }
.account .box-content { color: #555; line-height: 1.6; margin-bottom: .75rem; }
.account .box-content address { font-style: normal; }
.account .edit-change-pass-div .box-actions { margin-bottom: .5rem; }
/* Green action buttons (.btn.btn-success) */
.account .btn-success {
    display: inline-block; background: var(--color-primary, #137C4E); color: #fff !important;
    border: none; border-radius: 4px; padding: .5rem 1rem; font-weight: 600; font-size: .9rem;
    text-decoration: none; cursor: pointer; margin: .25rem 0;
}
.account .btn-success:hover { background: var(--color-primary-darker, #0f5d3a); }
/* Native checkbox/radio rendering on account forms. The theme sets appearance:none, which
   renders the Account-Information toggles (Change Email / Change Password / Allow remote
   assistance) and other account checkboxes as broken little squares. The toggles work
   (Alpine reveals the fields); this just restores a proper, legible control. */
.account input[type="checkbox"],
.account input[type="radio"] {
    -webkit-appearance: auto !important; appearance: auto !important;
    accent-color: auto !important; /* standard native checkbox (not the red-accented one) */
    width: 16px !important; height: 16px !important; min-width: 16px; opacity: 1 !important;
    position: static !important; margin: 0 .45rem 0 0 !important; vertical-align: middle; cursor: pointer;
    box-shadow: none !important; background-image: none !important; border: 0 !important;
}
/* The theme draws a custom toggle-SWITCH over these via an ::after pseudo-element
   (they carry role="switch"). Remove it so the plain native checkbox shows. */
.account input[type="checkbox"]::before,
.account input[type="checkbox"]::after,
.account input[type="radio"]::before,
.account input[type="radio"]::after { content: none !important; display: none !important; background: none !important; }
/* Checkbox rows (.field.choice = Change Email / Change Password / Allow assistance):
   keep the box and label on one line with a clean gap so they never overlap. */
.account .field.choice { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.account .field.choice input[type="checkbox"],
.account .field.choice input[type="radio"] { margin: 0 !important; flex: 0 0 auto; }
.account .field.choice label { margin: 0; display: inline; vertical-align: middle; cursor: pointer; }
.account .field.choice .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Account 2-column layout: handled by the shared `.afx-2col` Tailwind grid in
   Magento_Theme/page_layout/2columns-left.xml (sidebar declared before content, so it
   is left on desktop and first on mobile). The former flex/order:-1 workaround here
   targeted the legacy .row-content/.col-* classes, which that layout no longer emits. */

/* ============================================================================
 * 6. B2B minicart controls (Active Cart switcher + create/upload/delete) inside the
 *    Hyvä cart-drawer. Template: Magento_Theme html/cart/minicart-b2b.phtml (afxMinicartB2B).
 *    Buttons use var(--color-primary) (green NET / red USA), matching the store brand.
 * ========================================================================== */
[x-cloak] { display: none !important; }
.afx-minicart-b2b { margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid #e5e5e5; }
.afx-minicart-b2b .afx-mcb-toolbar { display: flex; gap: .5rem; margin-bottom: .5rem; }
.afx-minicart-b2b .afx-mcb-btn,
.afx-minicart-b2b .afx-mcb-create button,
.afx-minicart-b2b .afx-mcb-delete {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary, #137C4E) !important; color: #fff !important;
    border: 0 !important; border-radius: 4px; cursor: pointer;
}
.afx-minicart-b2b .afx-mcb-btn { width: 40px; height: 40px; }
/* The theme collapses SVGs to width:0 unless an explicit CSS size is set (attribute w/h are
   ignored), which made the add/upload/delete icons invisible — force a size. */
.afx-minicart-b2b svg { width: 18px !important; height: 18px !important; display: block; stroke: currentColor !important; fill: none !important; flex: 0 0 auto; }
.afx-minicart-b2b .afx-mcb-create { display: flex; gap: .5rem; margin-bottom: .75rem; }
.afx-minicart-b2b .afx-mcb-create input {
    flex: 1; border: 1px solid #cfcfcf; border-radius: 4px; padding: .5rem .6rem; background: #fff;
}
.afx-minicart-b2b .afx-mcb-create button { padding: 0 1rem; font-weight: 600; white-space: nowrap; }
.afx-minicart-b2b .afx-mcb-active label { display: block; font-size: .8rem; color: #555; margin-bottom: .25rem; }
.afx-minicart-b2b .afx-mcb-row { display: flex; gap: .5rem; align-items: center; }
.afx-minicart-b2b .afx-mcb-row select {
    flex: 1; border: 1px solid #cfcfcf; border-radius: 4px; padding: .5rem .6rem; background: #fff; min-width: 0;
}
.afx-minicart-b2b .afx-mcb-delete { width: 40px; height: 40px; flex: 0 0 40px; }

/* ============================================================================
 * 7. Sales-team cards (404 / Contact). The CMS blocks' owl-carousel and Bootstrap
 *    .row/.col are both dead in Hyvä, so .afx-sales-grid flexes them into a static grid.
 * ========================================================================== */
/* flex:1 1 0 + nowrap = two equal columns; flex-basis alone wrapped them. */
.afx-sales-grid { display: flex; flex-wrap: nowrap; gap: 1rem; align-items: stretch; }
.afx-sales-grid .item { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
.afx-sales-grid .card { height: 100%; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; box-shadow: none; }
.afx-sales-grid .card-body { padding: 1rem 1.25rem; }
/* Photo on top, details below at full card width so phone/email don't wrap. */
.afx-sales-grid .card .row { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; margin: 0; text-align: left; }
.afx-sales-grid .card .row > [class*="col-"] { flex: none !important; width: 100% !important; max-width: 100% !important; padding: 0; }
.afx-sales-grid .card-img-top { width: 72px; height: 72px; object-fit: cover; margin: 0 0 .5rem; padding: 0; }
.afx-sales-grid .card .card-title { margin-bottom: .25rem; }
.afx-sales-grid .card .card-subtitle { margin-bottom: .5rem; }
.afx-sales-grid .card .fw-bold { margin: 0; line-height: 1.9; }
/* nowrap only where cards are wide enough (~290px desktop); at tablet they are ~125px
   and nowrap text spilled past the card border. */
@media (min-width: 1025px) {
    .afx-sales-grid .card .fw-bold,
    .afx-sales-grid .card .fw-bold a,
    .afx-sales-grid .card .card-title,
    .afx-sales-grid .card .card-subtitle { white-space: nowrap; }
}
/* One card per row below 1025px: two columns leave ~125px each, too narrow for
   name + role + phone + address. */
@media (max-width: 1024px) {
    .afx-sales-grid { flex-wrap: wrap; }
    .afx-sales-grid .item { flex: 1 1 100%; }
}
/* Final safety net: never let a long address push past the card edge. */
.afx-sales-grid .card .fw-bold,
.afx-sales-grid .card .fw-bold a { overflow-wrap: break-word; }

/* ============================================================================
 * 8. Featured Products (Sm_FilterProducts block-list-slider) — hide the horizontal
 *    scrollbar on the slider AND its wrapper (.product-content). Scrolling stays
 *    available via the prev/next arrows and touch. The slider itself already hides its
 *    bar in legacy_fixes; the visible bar was on the .product-content wrapper.
 * ========================================================================== */
/* The Featured Products (Sm_ListingTabs) scroller is .products.list.items.product-items
   with Tailwind `flex overflow-x-auto snap-x` — its scrollbar-width was still `auto`. Hide
   the bar on any product-items horizontal scroller + the .product-content wrapper. */
.products.list.items,
.product-items.overflow-x-auto,
.product-items.snap-x,
.product-content,
.product-content .owl-carousel {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.products.list.items::-webkit-scrollbar,
.product-items.overflow-x-auto::-webkit-scrollbar,
.product-items.snap-x::-webkit-scrollbar,
.product-content::-webkit-scrollbar,
.product-content .owl-carousel::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* ==========================================================================
 * 9. "Parts in Focus" ribbon (home CMS .deal-container → AFX\Products\Block\Parts)
 *    The card carries TWO titles: the CMS `.deal-title` ("Deal Of The Day") and the
 *    Parts block's own `parts-title` arg ("PARTS IN FOCUS"). Only one ribbon is in the
 *    design, and the design's text is the block's — so the block's is the visible one
 *    and the CMS duplicate is hidden. It also fixes a colour bug: `.deal-title` was
 *    painted by a HARDCODED hex per child theme (#137C4E in spares_child,
 *    #DA0000 in spares_usa) under a `.home-page-1` ancestor; the ribbon below reads
 *    --color-primary, so each store is correct without a per-store rule.
 *    Geometry (top:-9px, left:40px, 48px tall, folded corners) matches the original.
 * ========================================================================== */
.deal-container .deal-title,
.deal-container .used-parts-title { display: none; }

.deal-container .parts-title {
    position: absolute;
    top: -9px;
    left: 40px;
    z-index: 3;
    display: inline-block;
    background-color: var(--color-primary);
    border-radius: 0 0 8px 8px;
}
.deal-container .parts-title::before,
.deal-container .parts-title::after {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 9px solid var(--color-primary-darker);
}
.deal-container .parts-title::before { left: -9px; border-left: 9px solid transparent; }
.deal-container .parts-title::after { right: -9px; border-right: 9px solid transparent; }
.deal-container .parts-title h2 {
    margin: 0;
    height: 48px;
    line-height: 48px;
    padding: 0 30px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}
/* The arg ships a red Bootstrap "New" pill; the design has no badge on the ribbon. */
.deal-container .parts-title .badge { display: none; }
@media (max-width: 767px) {
    .deal-container .parts-title { left: 20px; }
    .deal-container .parts-title h2 { font-size: 15px; padding: 0 20px; height: 42px; line-height: 42px; }
}

/* ==========================================================================
 * Filter inputs (vehicle split-drawings #productSearch, part-kits
 * #assemblyFilterInput) were showing the default BLUE .form-control:focus ring,
 * which clashed with the green/red theme. Use the store accent (var --focus-ring
 * from afx-store.css). z-index keeps the focused input above its attached button.
 * ========================================================================== */
#productSearch:focus,
#assemblyFilterInput:focus,
.split-drawing-section .input-group .form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--focus-ring, rgba(19, 124, 78, 0.25)) !important;
    outline: none !important;
    z-index: 3;
}

/* ==========================================================================
 * Tailwind ships a `.collapse { visibility: collapse }` utility that COLLIDES
 * with Bootstrap's `.collapse` accordion class (used by the Part Kit overview
 * + other accordions). When an accordion is opened (.show) Bootstrap toggles
 * DISPLAY, but Tailwind's visibility:collapse still applies and INHERITS to the
 * content → the panel opens tall but its rows are invisible ("blank"). Reset
 * visibility on any shown collapse so its content shows.
 * ========================================================================== */
.collapse.show,
.accordion-collapse.show { visibility: visible !important; }

/* ============================================================================
 * 404 / "no vehicle" contact block — complements section 7 (.afx-sales-grid).
 *
 * The CMS blocks (404-contact-image ids 98/100, contact-image id 65) carried owl-carousel
 * classes, which the owl→flex shim in afx-hyva-base.js then hijacked — clipping the second
 * card, drawing arrows over the content and autoplay-scrolling the block. They now carry
 * class="afx-sales-grid" instead, so the shim ignores them and section 7 lays them out.
 *
 * Only what section 7 leaves open is set here: type scale and brand colour.
 * ========================================================================== */
.afx-sales-grid .card-title { font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3; color: #282828; }
.afx-sales-grid .card-subtitle { font-size: .8rem; color: #767676; }
.afx-sales-grid .card-body p { font-size: .8rem; line-height: 1.5; color: #404040; }
.afx-sales-grid .card-body p.fw-bold { font-weight: 700; }
.afx-sales-grid .card-body a { color: inherit; text-decoration: none; }
.afx-sales-grid .card-body a:hover,
.afx-sales-grid .card-body a:focus-visible { color: var(--color-primary, #137C4E); text-decoration: underline; }
.afx-sales-grid .card-body .fa { margin-right: .35rem; color: var(--color-primary, #137C4E); }

/* Headings. Colour is deliberately NOT set here — spares_usa styles this h1 in its own
 * custom.css and each store keeps its choice. font-family:inherit is required: spares_child's
 * custom.css does not force the theme face, so these fell back to the browser's serif. */
.image-contact h2 {
    margin: 0 0 1.25rem;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: #282828;
}
.contact-container .contact-description h1 {
    margin: 0 0 1rem;
    font-family: inherit;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.15;
    font-weight: 700;
}
.contact-container .contact-description p { font-size: .95rem; line-height: 1.6; color: #404040; }

/* ============================================================================
 * Form field labels — .form-floating (the 404 form + the Contact Us form).
 *
 * The markup puts the <label> AFTER its <input>. The absolute-positioning rules
 * that turned that into a Bootstrap floating label live in
 * autostore_child/web/css/custom.css — which is SHADOWED: spares_child and
 * spares_usa each ship their own web/css/custom.css, and Magento's static-file
 * fallback REPLACES a file rather than merging it, so not one of those rules
 * reaches either store. Every label therefore rendered as plain text UNDERNEATH
 * its field, which also left the first field looking unlabelled and pushed the
 * "Leave a comment" label below the textarea.
 *
 * Restored as label-above-input rather than as a floating label on purpose: the
 * Contact form supplies real placeholders and both child themes force them
 * visible (.form-floating>.form-control::placeholder{color:#222}), so an
 * overlaying floating label would sit on top of the placeholder text. Labels
 * above also match how every other form in this theme is built (see
 * `.afx-reg-col .field > label` in section 3) — which is the consistency this
 * pass exists to deliver.
 * ========================================================================== */
.form-floating { display: flex; flex-direction: column; position: relative; }
.form-floating > label {
    order: -1;                /* label first, whatever the source order */
    margin-bottom: .35rem;
    font-size: .85rem;
    line-height: 1.3;
    color: #555;
}
/* The 40px gap under each contact field existed only to leave room for the label
 * that used to render below it. */
.contact-container .form-contact .form-floating > .form-control { margin-bottom: 0; }

/* Consistent focus treatment, in the store's own brand colour. */
.form-floating > .form-control:focus,
.contact-container .form-contact .form-control:focus {
    border-color: var(--color-primary, #137C4E);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #137C4E) 22%, transparent);
    outline: none;
}
/* `.contact-container .form-contact #comment:focus{height:38px}` in both child
 * themes COLLAPSES the message box the moment it is focused. The 404 template
 * hides that behind an inline height, but the Contact Us page has no inline
 * style and its textarea really did shrink on focus. Type selector + 4 classes
 * outscores the id rule it has to beat. */
.contact-container .form-contact textarea#comment,
.contact-container .form-contact textarea#comment:focus { height: 150px; min-height: 120px; resize: vertical; }

/* Validation / status messages — sized and coloured consistently wherever
 * Magento or Hyvä emits them. */
.form-floating > .form-control[aria-invalid="true"],
.form-floating > .form-control.mage-error { border-color: #e02b27; }
div.mage-error,
.field-error { color: #e02b27; font-size: .8rem; line-height: 1.4; margin-top: .25rem; }

/* ============================================================================
 * Forgot / reset password — the fieldset ran the full page width while the
 * actions-toolbar sat hard right, so the single email field and its buttons read
 * as unrelated blocks. Constrain both to one column, matching the bordered
 * login / register boxes in sections 3 and 4.
 * ========================================================================== */
.customer-account-forgotpassword .form.password.forget,
.customer-account-createpassword .form.password.reset {
    width: 100%;
    max-width: 480px;
    margin: 1.5rem auto 0;
}
.customer-account-forgotpassword .form.password.forget .field .control input,
.customer-account-createpassword .form.password.reset .field .control input { width: 100%; }
.customer-account-forgotpassword .form.password.forget .actions-toolbar,
.customer-account-createpassword .form.password.reset .actions-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.25rem;
}
.customer-account-forgotpassword .form.password.forget .actions-toolbar .primary,
.customer-account-createpassword .form.password.reset .actions-toolbar .primary { margin: 0; }

/* ==========================================================================
 * BLOG (Magefan_Blog) — the few rules Tailwind utilities in the templates cannot win.
 * Everything else about the blog page is done with utilities in
 * Sm/autostore/Magefan_Blog/templates/** and the .blog-sb-* components in
 * web/tailwind/tailwind-source.css. Brand colours go through var(--color-primary),
 * set per store in Spares/<theme>/web/css/afx-store.css — green on .net, red on .usa.
 * ========================================================================== */

/* Sidebar search submit. Both stores' custom.css paints every <button> with a hardcoded
   brand colour via `button:not(.owl-prev):not(.owl-next):not(.slick-arrow)` (specificity
   0,3,1), which a utility class cannot outrank; route it through var(--color-primary) so
   the blog has one store-driven definition instead of two hardcoded ones. */
.blog-page .blog-search-submit {
    background-color: var(--color-primary, #137C4E) !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.blog-page .blog-search-submit:hover,
.blog-page .blog-search-submit:focus {
    background-color: var(--color-primary-darker, #0f5d3a) !important;
}

/* The stores' custom.css rounds the list thumbnail (`.post-list .post-image .image-wrap
   { border-radius: 1em }`, specificity 0,3,0). The reference design has square thumbnails,
   and the radius also clipped the hover zoom. */
.blog-page .post-list .post-image .image-wrap {
    border-radius: 0;
}

/* Post excerpts and post bodies carry authored HTML (h2/h3/p/ul), which the Tailwind
   preflight resets to inherit. Give those headings back a visible hierarchy without
   pulling in the whole typography plugin. */
.blog-page .post-description h1,
.blog-page .post-description h2,
.blog-page .post-description h3,
.blog-page .post-description h4 {
    margin: 0 0 .35em;
    color: #404040;
    font-weight: 500;
    line-height: 1.25;
}
.blog-page .post-description h1,
.blog-page .post-description h2 {
    font-size: 1.375rem;
}
.blog-page .post-description h3,
.blog-page .post-description h4 {
    font-size: 1.125rem;
}
.blog-page .post-description p {
    margin: 0 0 .75em;
}
.blog-page .post-description p:last-child {
    margin-bottom: 0;
}
.blog-page .post-description ul,
.blog-page .post-description ol {
    margin: 0 0 .75em 1.25em;
    list-style: revert;
}
.blog-page .post-description a {
    color: var(--color-primary, #137C4E);
}
.blog-page .post-description a:hover {
    text-decoration: underline;
}

/* ==========================================================================
 * FOCUS / ACTIVE STATES — remove the inherited default blues, keep the indication.
 *
 * Three independent sources painted interactive states blue on every page:
 *
 *  1. ytextend.css (a Bootstrap 4 bundle in <head>, static-only — it has no source file
 *     under app/design, so it can only be corrected from here) ships Bootstrap's focus
 *     glow as a literal: `.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}`
 *     and `.btn-primary:focus{...rgba(0,123,255,.5)}`. The login/register submit buttons are
 *     `class="btn btn-primary …"`, so clicking them left a blue halo — and Bootstrap's
 *     `outline:0` removed the accessible outline at the same time.
 *  2. @tailwindcss/forms hardcodes `--tw-ring-color:#2563eb` (blue-600) on every
 *     input/select/textarea/checkbox/radio :focus. The checkbox ring was visibly blue.
 *  3. Hyvä's styles.css sets `.btn{--btn-bg:#1f48c51a}` — a 10% indigo consumed by
 *     `.btn:hover` and `.btn:is(:active,[aria-current=page])`.
 *
 * Approach: keyboard focus (:focus-visible) keeps a VISIBLE, theme-coloured ring plus the
 * outline Bootstrap removed; pointer focus (:focus:not(:focus-visible)) drops the halo only.
 * No blanket `outline:none`, no focus styles deleted. Colours come from --focus-ring and
 * --color-primary, set per store in Spares/<theme>/web/css/afx-store.css, so NET stays green
 * and USA stays red from one definition.
 * ========================================================================== */

/* --- 1. Bootstrap buttons / form-control / pagination ------------------------------- */
:is(.btn, .btn-primary, .btn-secondary, .btn-outline-primary, .form-control, .page-link):focus-visible {
    outline: 2px solid var(--color-primary, #137C4E);
    outline-offset: 2px;
    box-shadow: 0 0 0 .2rem var(--focus-ring, rgba(19, 124, 78, .25));
}
:is(.btn, .btn-primary, .btn-secondary, .btn-outline-primary, .form-control, .page-link):focus:not(:focus-visible) {
    box-shadow: none;
}
/* Bootstrap's `:not(:disabled):not(.disabled):active:focus` variants are (0,5,0), so they
   need selectors of the same weight to be reached. */
:is(.btn, .btn-primary, .btn-secondary, .btn-outline-primary):not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}
:is(.btn, .btn-primary, .btn-secondary, .btn-outline-primary):not(:disabled):not(.disabled):active:focus-visible {
    box-shadow: 0 0 0 .2rem var(--focus-ring, rgba(19, 124, 78, .25));
}
/* `.form-control:focus` also set border-color:#80bdff (Bootstrap's light blue). */
.form-control:focus {
    border-color: var(--color-primary, #137C4E);
}

/* --- 2. Bootstrap custom controls (checkbox / radio / file / range) ----------------- */
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem var(--focus-ring, rgba(19, 124, 78, .25));
}
.custom-control-input:focus:not(:focus-visible) ~ .custom-control-label::before {
    box-shadow: none;
}
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--color-primary, #137C4E);
    box-shadow: 0 0 0 .2rem var(--focus-ring, rgba(19, 124, 78, .25));
}
/* Vendor-prefixed thumb pseudo-elements must be separate rules — one unknown selector in a
   list invalidates the whole rule. */
.custom-range::-webkit-slider-thumb:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem var(--focus-ring, rgba(19, 124, 78, .25));
}
.custom-range::-moz-range-thumb:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem var(--focus-ring, rgba(19, 124, 78, .25));
}

/* --- 3. @tailwindcss/forms ring + tick colour --------------------------------------- */
:is(input, select, textarea):focus,
:is(.form-input, .form-select, .form-textarea, .form-multiselect, .form-checkbox, .form-radio):focus {
    --tw-ring-color: var(--color-primary, #137C4E);
}
/* The plugin also paints checkbox/radio with `color: blue-600` and then fills the checked
   state from `currentColor` — so every ticked checkbox and selected radio (registration
   account-type radios, newsletter/terms boxes, layered-nav filters) came out blue-600. */
:is(input[type="checkbox"], input[type="radio"], .form-checkbox, .form-radio) {
    color: var(--color-primary, #137C4E);
}

/* --- 4. Hyvä's .btn hover/active tint --------------------------------------------- */
.btn {
    --btn-bg: color-mix(in srgb, var(--color-primary, #137C4E) 10%, transparent);
}
:is(a, button, div).pagebuilder-button-secondary {
    --btn-bg: color-mix(in srgb, var(--color-primary, #137C4E) 10%, transparent);
}

/* --- 5. Native UA accents ---------------------------------------------------------- */
/* Checkbox/radio/range/progress widgets the forms plugin does not repaint, and the touch
   tap flash, both default to a UA blue. */
:root {
    accent-color: var(--color-primary, #137C4E);
}
a, button, [role="button"], summary,
input[type="submit"], input[type="button"], input[type="reset"] {
    -webkit-tap-highlight-color: var(--focus-ring, rgba(19, 124, 78, .25));
}

/* --- 6. Restore the keyboard focus outline the legacy theme deleted ----------------- */
/* yttheme.css (head) carries `button, .cart-container .action.continue, a.action.primary,
   .modal-footer .action-primary.action-accept { outline: none !important; … }` — commented
   "Safari & Google Chrome Fix". That removes keyboard focus indication from every <button>
   on the site, and it is why the theme-coloured outline declared above never reached them.
   Put it back for keyboard users only (pointer clicks stay clean) in the store colour.
   `!important` is unavoidable here: nothing but another !important can outrank that rule.
   The slider/hero arrows are excluded — afx-base.css deliberately keeps them ring-free and
   re-asserts their own shadow instead. */
:is(button, [role="button"], summary, .btn, .action.primary,
    a.action.primary, .action-primary.action-accept):not(.slider-nav-btn):not(.hero-nav-btn):focus-visible {
    outline: 2px solid var(--color-primary, #137C4E) !important;
    outline-offset: 2px !important;
}

/* --- 7. Default blues left in module / child-theme stylesheets ---------------------- */
/* Brand-accent and active/selected surfaces that were written as literal Bootstrap or Luma
   blues (#007bff, #0d6efd, #1979c3, #006bb4) instead of the store colour, on pages the head
   fixes above do not reach: grouped-product part kits, MMT vehicle-master filters, dismantle
   vehicles, listing tabs, cart quick-view.
   Corrected from here, in one place, rather than in each source file: the values are
   duplicated across app/code and BOTH child themes (e.g. vm-types.css and dismantle.css
   exist three times over with the same literal), and the spares_usa copies sit in
   directories only root can write on this box. One store-aware definition beats six edits —
   afx-base.css loads after those sheets, so equal-specificity selectors win. */

/* AFX_Products — grouped product / part-kit panel */
.brand-badge {
    background: var(--color-primary, #137C4E);
}
.kit-description-toggle {
    color: var(--color-primary, #137C4E);
}
.right-panel .kit-total {
    color: var(--color-primary, #137C4E);
    border-bottom-color: var(--color-primary, #137C4E);
}
#kit-loader {
    border-top-color: var(--color-primary, #137C4E);
}

/* AFX_PartKits — checked kit selector (Bootstrap 5 blue) */
.form-check-input:checked {
    background-color: var(--color-primary, #137C4E);
    border-color: var(--color-primary, #137C4E);
}

/* AFX_DismantleVehicles / AFX_VehicleMaster (MMT) — filter toggle + load-more links */
#toggle-filters,
.filter-load-more a {
    color: var(--color-primary, #137C4E);
}

/* Sm_ListingTabs — selected tab */
.sm-listing-tabs .ltabs-tabs-container .ltabs-tabs li.tab-sel > span {
    color: var(--color-primary, #137C4E);
}

/* Sm_CartQuickPro — quick-view handler + its hover/focus */
.quickview-handler {
    background: var(--color-primary, #137C4E);
}
.quickview-handler:hover,
.quickview-handler:focus {
    background: var(--color-primary-darker, #0f5d3a);
}