/* ==========================================================================
   Header parity with the live site (spares.net / sparesusa.net), sitewide.
   Loaded last from Magento_Theme/templates/html/config.phtml on every page.
   Values measured on the live site with Playwright.
   Live builds the brand/model/type controls with chosen.js; here they are native
   <select> elements, styled to the same geometry.
   ========================================================================== */

/* sticky header: live shadow */
.header-container.sticky,
.header-container[class*="sticky"] {
    /* afx-base.css applies `box-shadow: var(--sticky-shadow) !important`, so the live value (incl. the inner glow) is set on the variable */
    --sticky-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 0 5px rgba(0,0,0,.1);
}
.header-container { box-shadow: 0 0 10px 0 rgba(0,0,0,.1); }

/* ---- vehicle / search panel ------------------------------------------------ */
.header-container .revolvo.art-search .smas-container { border-radius: 25px; }
.header-container .revolvo.art-search .sm-searchbox-content { border-radius: 34px 34px 0 0; }
.header-container .revolvo.art-search .smas-caption { border-top: 3px solid #fff; }
.header-container .revolvo.art-search .smas-form-wrap {
    border-top: 3px solid #fff;
    border-radius: 0 0 20px 20px;
}
.header-container #searchbox { padding-right: 9px; }
.header-container .revolvo.art-search .btn-searchbox {
    line-height: 35px;
    text-transform: uppercase;
    opacity: .5;
}
.header-container .revolvo.art-search .car-search-tab,
.header-container .revolvo.art-search .js-car-search-tab,
.header-container .revolvo.art-search .js-vin-search-tab { height: 29px; }

/* brand / model / type row: 3 x 172.64px + 44px search button inside a 562px form */
.header-container .revolvo.art-search .smas-form-wrap .smas-group-left { width: 518px; }
.header-container .revolvo.art-search .smas-form-wrap .smas-group-right { width: 44px; }
.header-container .revolvo.art-search .smas-form-wrap .smas-attr { height: 40px; }
.header-container .revolvo.art-search .smas-form-wrap .smas-attr-inner { height: 40px; }
.header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-left .smas-attr .smas-attr-inner select.smas-select {
    height: 40px;
    margin: 0;
    padding: 0 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: normal;
    text-align: center;
    text-align-last: center;
}
.header-container .revolvo.art-search .smas-form-wrap .smas-attr-inner { position: static; }
.header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right { height: 40px !important; }  /* !important: afx-base.css min-height */
.header-container .revolvo.art-search .smas-form-wrap .smas-group-right .smas-btn { height: 35px; }
.header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-left { display: table-cell; margin-bottom: 0; }
.header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner button.btn.btn-search {
    /* !important: afx-base.css sets this button to 26px with !important (documented override) */
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: normal !important;
    justify-content: normal !important;
    align-items: normal !important;
    line-height: 50px !important;
}
.header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner button.btn.btn-search::before { font-size: 16px; width: 15px; height: 16px; }

/* ---- outline, placeholder, disabled controls ----------------------------------- */
.header-container .revolvo.art-search {
    background-color: transparent;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 0 20px rgba(0,0,0,.2);
}
.header-container .revolvo.art-search #searchbox::placeholder { color: #c2c2c2; opacity: 1; }

/* ---- cart box: label sits 2px higher on live ----------------------------------- */
.header-container .minicart-wrapper .action.showcart .text { margin-top: -2px; }
@media (max-width: 991px) { .header-container .minicart-wrapper .action.showcart .text { margin-top: -4px; } }
.header-container .minicart-wrapper { position: relative; }

/* ---- header container + search holder widths (992px and up) ---------------------
   Live: .container is width 94% (max 1320px, 970px at 992-1199px); the search holder is a
   fixed 760px column at every desktop width. */
.header-container .container {
    width: 94%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 992px) {
    .header-container .header-search { width: 760px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .header-container .container { max-width: 970px; }
}

/* afx-components.css §29.1 adds 15px container padding (!important from 1200px) for containers that touch the
   viewport edge. With live's 94% container (above) the container no longer reaches the edge, so the padding
   would double up. !important is needed to beat that rule's own !important. */
.header-container .container:has(> .row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* vehicle panel: live is 608px (602px content + 3px outline each side) at every desktop width */
@media (min-width: 992px) {
    .header-container .revolvo.art-search { width: 608px; max-width: none; }
}

/* tablet: live centres a fixed 760px search holder holding a 494px panel (768-991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .header-container .header-search { width: 760px; margin-left: auto; margin-right: auto; }
    .header-container .header-search .revolvo.art-search.m-auto {
        width: 494px;
        max-width: none;
        /* !important: custom.css `.m-auto` centres with !important; centre inside the 760px holder explicitly */
        margin-left: 117px !important;
        margin-right: 0 !important;
    }
}

/* top bar links: live keeps them inline (line-height 45px = the 45px hit area); an earlier touch-target rule made them
   inline-block with a margin, which grew the bar to 52px on phones. */
@media (max-width: 767px) {
    .header-container .header-top .top-right-content ul.header.links > li > a {
        display: inline;
        margin-top: 0;
        margin-bottom: 0;
        height: auto;
        min-height: 0;
    }
}

/* vehicle panel stacked layout (live: up to 767px): tabs and caption as on live (afx-components.css sets these with 5-class selectors) */
@media (max-width: 767px) {
    .header-container .revolvo.art-search .smas-container .smas-caption { padding-bottom: 0; }
    .header-container .revolvo.art-search .smas-container .smas-caption .js-car-search-tab,
    .header-container .revolvo.art-search .smas-container .smas-caption .js-vin-search-tab {
        padding-left: 20px;
        padding-right: 20px;
        gap: normal;
        height: 29px;
    }
    .header-container .revolvo.art-search .smas-container .smas-caption h5 { font-size: 10px; }
}

/* stacked layout: the search button column is 44px wide and the three selects share the rest of the form */
@media (max-width: 767px) {
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right { width: 44px; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-left { width: calc(100% - 44px); }
    .header-container .revolvo.art-search .smas-container .smas-caption .car-search-tab { height: 29px; }
    .header-container .revolvo.art-search .smas-container .smas-caption .car-search-tab h5 { height: 25px; }
}

/* round MMT search button: the visible oval is painted by .smas-attr-inner (40x35 on live, sitting 1px higher);
   the 40px button inside overflows it. The generic 40px .smas-attr-inner rule above must not apply here. */
.header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner {
    height: 35px;
}
.header-container .revolvo.art-search .smas-form-wrap .smas-group-right .smas-btn { margin-top: 1px; }
@media (max-width: 767px) {
    .header-container .revolvo.art-search .smas-form-wrap .smas-group-right .smas-btn { margin-top: -4px; margin-left: 2px; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner { width: 40px; }
}

/* tablet row layout (768-991px): live's search column is 52px with a 48x40 button */
@media (min-width: 768px) and (max-width: 991px) {
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right { width: 52px; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-left { width: 416px; margin-left: 0; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap { padding-left: 10px; padding-right: 10px; }  /* live: 10px, local base 1rem */
    .header-container .revolvo.art-search .smas-form-wrap .smas-group-right .smas-btn { margin-top: 1px; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn { width: 52px; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner { width: 48px; }
    /* !important as for the desktop button above (afx-base.css 26px !important) */
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner button.btn.btn-search { width: 48px !important; }
}

/* ---- search row: same 46px row on every page (was only fixed on the Home page) ---------------------------------- */
.header-container .sm-searchbox-content .field.searchbox { margin-top: 0 !important; }  /* !important: base margin-top rule */
.header-container .sm-searchbox-content .input-searchbox { padding-top: 0 !important; padding-bottom: 0 !important; color: #000; }

/* ---- reset button shown after a vehicle is searched ---------------------------------------------------------------
   Live: 24x35 flat button flush with the search button (white "x", 8px right padding), not a 26px circle pushed down.
   !important: afx-base.css sizes it 26x26 / padding 0 with !important (same selector depth). */
.header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-right .smas-btn .smas-attr-inner .btn.afx-btn-reset {
    width: 24px !important;
    height: 35px !important;
    padding: 0 8px 0 0 !important;
    border-radius: 25px;
    align-self: flex-start;
}

/* ---- vehicle selected (reset button visible): the button column grows to hold search + reset ---------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form:has(.afx-btn-reset) .smas-group-right { width: 76px; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form:has(.afx-btn-reset) .smas-group-left { width: 392px; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form:has(.afx-btn-reset) .smas-group-right .smas-btn { width: 76px; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form:has(.afx-btn-reset) .smas-group-right .smas-btn .smas-attr-inner { width: 72px; }
}
/* phones/stacked: live lets the pair overflow the panel; here it is kept inside it */
@media (max-width: 767px) {
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form:has(.afx-btn-reset) .smas-group-right { width: 68px; }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form:has(.afx-btn-reset) .smas-group-left { width: calc(100% - 68px); }
    .header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form:has(.afx-btn-reset) .smas-group-right .smas-btn .smas-attr-inner { width: 64px; }
}

/* ---- FOOTER (sitewide) ---------------------------------------------------------------------------------------------
   Live: the dashboard photo shows through (no overlay), body text and links are #bbb, links are display:table (21px high),
   the newsletter field has no vertical padding. Values measured on the live site. */
.page-footer .footer-container { background-color: transparent; color: #bbb; }
.page-footer .footer-bottom { color: #bbb; }
.page-footer .footer-container input[type="email"] { padding-top: 0; padding-bottom: 0; padding-right: 9px; }
.page-footer .footer-container [class*="newsletter"] button { letter-spacing: normal; }
.page-footer .footer-container ul li:not(.li-social):not(.email) a:hover { color: var(--color-primary, #137c4e); }

/* footer column titles: live is 138.461% (16.6px) in the medium face at weight 500; afx-components' .footer-style-3
   token rule (16px, bold) made them 1px shorter per column and synthesised a heavier bold. */
.page-footer .footer-style-3 .block-footer .title-footer { font-size: 138.461%; font-weight: 500; }

/* newsletter title: live keeps Luma's paragraph margin (10px). It only shows below 992px, where the title turns from
   display:table-cell (margins ignored) into a block; Hyvä's reset had removed it, making the band 10px shorter. */
@media (max-width: 991px) {
    .page-footer .footer-newsletter .title-newsletter { margin-bottom: 10px; }
}

/* footer links: live pitch is 33.4px (21.4px link + 12px item gap). An earlier touch-target rule padded the links 11px and
   pulled them back with a negative margin, which only works on inline links; as display:table (live) it made every row 44px.
   The hit area is kept (33px tall) with an invisible extension that does not take layout space. */
.page-footer .footer-container ul li:not(.li-social):not(.email) a {
    color: #bbb; display: table; line-height: 21.4518px;
    padding: 0 !important;   /* !important: afx-components.css hit-area padding */
    margin: 0 !important;
    position: relative;
}
.page-footer .footer-container ul li:not(.li-social):not(.email) a::after {
    content: "";
    position: absolute;
    inset: -6px 0;
}

/* footer containers: live uses the same 94% container as the rest of the page (max 1320px); the follow-us / newsletter
   strip sat flush against the screen edge on phones. !important beats afx-components.css §29.1's 15px edge padding. */
.page-footer .container {
    width: 94%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* cart box on phones: live has no white-bordered ::after shape (display:none up to 767px); local drew it as an 85x55 ring.
   !important: the local mobile cart-box rule sets its display and size. */
@media (max-width: 767px) {
    .header-container .middle-right-content .cart-wrapper .minicart-wrapper .action.showcart::after { display: none !important; }
}

/* cart box type: live's item count is 11.076px at every width and "My Cart" is weight 500 */
.header-container .minicart-wrapper .action.showcart .text .counter-label { font-size: 11.076px; line-height: 18.3862px; }
.header-container .minicart-wrapper .action.showcart .text .cart-label { font-weight: 500; }

/* logo: keep the image's own aspect ratio at every width (the USA logo is 366x71, i.e. 38.8px tall at 200px wide; a 40px
   minimum from afx-base.css stretched it and made the header row 8px taller). !important: afx-base.css sets both with !important. */
.header-container .logo-wrapper .logo img { height: auto !important; min-height: 0 !important; }

/* the empty duplicate cart counter is display:none on live; locally it rendered "(00 item)" under the cart box on dark headers */
.header-container .minicart-wrapper .action.showcart .counter.qty.empty { display: none !important; }   /* !important: afx-base.css `.counter.qty { display: flex !important }` */
.page-footer .footer-container ul li.email a {
    padding: 0 !important;   /* !important: afx-components.css hit-area padding */
    margin: 0 !important;
    display: table;
    position: relative;
    color: #bbb;
}
.page-footer .footer-container ul li.email a::after { content: ""; position: absolute; inset: -6px 0; }

/* footer contact rows: live has no 8px gap above each row (afx-components.css `li + li { margin-top: 8px }`) and 21.4px rows */
.page-footer .content-footer.content-about li + li { margin-top: 0; }

/* footer contact rows: live pins the icon (absolute, left 0 / top 10.7px, 26px tall) and pads the row 37px; locally the icon sat in
   the text flow, which made each row 2px taller and put a table-style link on a second line (email row 45px). */
.page-footer .content-footer.content-about li { padding-left: 37px; position: relative; }
.page-footer .content-footer.content-about li::before {
    position: absolute; display: block; left: 0; top: 10.7188px; height: 26px; line-height: 20px;
}

/* ---- dropdown arrows: live draws them with the choosen-icon.png sprite (red triangle in a white circle when enabled, dark
   triangle when disabled) in a 35x40 box at the right of each field. The native <select> keeps its own arrow off and the same
   sprite is overlaid, so both states look like live. The whole disabled field is at 50% opacity as on live. */
.header-container .revolvo.art-search .smas-form-wrap .smas-attr-inner:has(> select.smas-select) { position: relative; }
.header-container .revolvo.art-search .smas-container .smas-form-wrap .smas-form .smas-group-left .smas-attr .smas-attr-inner select.smas-select {
    background-image: none !important;   /* !important: the earlier svg arrow is set with !important on the select */
}
.header-container .revolvo.art-search .smas-form-wrap .smas-attr-inner:has(> select.smas-select)::after {
    content: ""; position: absolute; right: 0; top: 0; width: 35px; height: 40px;
    background: url("../images/choosen-icon.png") 1px 50% no-repeat; pointer-events: none;
}
.header-container .revolvo.art-search .smas-form-wrap .smas-attr-inner:has(> select.smas-select:disabled)::after { background-position: -72px 50%; }
.header-container .revolvo.art-search .smas-form-wrap .smas-attr-inner:has(> select.smas-select:disabled) { opacity: .5; }
.header-container .revolvo.art-search .smas-form-wrap .smas-attr-inner select.smas-select:disabled { opacity: 1; }

/* ==========================================================================
   SITEWIDE RESPONSIVE FIXES (found by crawling 27 page types x 17 widths on both stores)
   ========================================================================== */

/* category tiles: a single long word in a category name ("Front StructureStructure") could not wrap and pushed the whole page
   25px wider than the screen (chassis category at 1366 and 1024px). */
.categories-item .content-box .cat-title,
.categories-item .content-box .cat-title a { overflow-wrap: anywhere; min-width: 0; }
.categories-item .item { min-width: 0; }

/* CMS pages built with Bootstrap `.container-fluid.pl-xl-0.pr-xl-0` (Terms, About, ...): from 1200px the side padding is removed,
   but the pages' `.row` keeps its -15px margins, so the content hung 15px off the left screen edge until the 1320px page container
   starts to centre at 1350px. The 15px is restored in that range (!important beats Bootstrap's own !important utilities). */
@media (min-width: 1200px) and (max-width: 1349px) {
    .container-fluid.pl-xl-0.pr-xl-0 { padding-left: 15px !important; padding-right: 15px !important; }
}

/* touch targets (WCAG 2.5.8: at least 24x24px): the logo and the Login / Register links are only ~20-23px tall, so they get an
   invisible hit-area extension (no layout change). Filter links, "Load More Filters", "Clear All", the remove "x" and the blog
   author link were 15px tall single-line links and become 24px rows. */
@media (max-width: 991px) {
    .header-container .logo-wrapper a.logo,
    .header-container .header-top ul.header.links a { position: relative; }
    .header-container .logo-wrapper a.logo::after,
    .header-container .header-top ul.header.links a::after { content: ""; position: absolute; inset: -8px -4px; }
    .vehicle-filter,
    .filter-load-more a,
    .filter-actions a,
    a.filter-clear,
    .item a.remove,
    .post-author-name a { display: inline-block; min-height: 24px; min-width: 24px; line-height: 24px; text-align: center; }
    .vehicle-filter, .filter-load-more a, .filter-actions a, a.filter-clear, .post-author-name a { text-align: inherit; }
}

/* listing sidebars (categories, layered navigation): category rows and filter chips were 15-19px tall links */
@media (max-width: 991px) {
    .afx-2col a.block { display: flex; align-items: center; min-height: 24px; }
    .afx-2col a.flex { min-height: 24px; }
    .afx-2col a.text-xs:not(.block) { display: inline-block; min-height: 24px; line-height: 24px; }
    /* breadcrumb / layer-title links: 15px text links, hit area extended without moving anything */
    .breadcrumbs a, .afx-layer__title a { position: relative; }
    .breadcrumbs a::after, .afx-layer__title a::after { content: ""; position: absolute; inset: -6px -3px; }
}