/* ==========================================================================
   STORE-SPECIFIC parity values for sparesusa.net (Home page). Replaces autostore_child's copy for the
   spares_usa theme (theme fallback resolves the nearest file). Values measured on live.
   ========================================================================== */

/* services strip (sparesusa.net live): #ececec, no padding above the strip, each item padded 25px top and bottom */
.cms-index-index .slidershow-usp { background-color: #ececec; padding-top: 0; }
.cms-index-index .slidershow-usp .service-item { padding: 25px 0; }
/* tablet/phone: live USA leaves 20px (not 25px) under each item */
@media (max-width: 991px) {
    .cms-index-index .slidershow-usp .service-item { margin: 10px 0; }
}

/* services arrows: live USA shows them (spares.net does not) - 60px white circle, store-colour chevron, hidden until the strip
   is hovered; centred at 50% - 20px (23px of a 146px strip), 30px inside the container. */
.cms-index-index .home-page-1 .slidershow-usp .slider-nav-btn:not(.deal-nav) {
    display: flex;
    width: 60px; height: 60px; padding: 0;
    top: calc(50% - 50px); transform: none;
    color: var(--color-primary, #da0000); background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1);
    border: 0 !important;   /* !important: yttheme.css button border rule */
    opacity: 0; transition: opacity .2s, background-color .2s, color .2s;
}
.cms-index-index .home-page-1 .slidershow-usp :hover > .slider-nav-btn:not(.deal-nav) { opacity: 1; }
.cms-index-index .home-page-1 .slidershow-usp .slider-nav-prev:not(.deal-nav) { left: calc(max((100% - 1320px) / 2, 3%) + 30px); }
.cms-index-index .home-page-1 .slidershow-usp .slider-nav-next:not(.deal-nav) { right: calc(max((100% - 1320px) / 2, 3%) + 30px); }
.cms-index-index .home-page-1 .slidershow-usp:hover .slider-nav-btn:not(.deal-nav),
.cms-index-index .home-page-1 .slidershow-usp .slider-nav-btn:not(.deal-nav):focus-visible { opacity: 1; }
.cms-index-index .home-page-1 .slidershow-usp .slider-nav-btn:not(.deal-nav):hover { background: var(--color-primary, #da0000); color: #fff; }

/* deal section: live USA splits the row 9/12 (deal block) + 3/12 (banner) from 992px; the CMS block here carries spares.net's
   col-lg-4 / col-lg-8 classes, so the columns are re-proportioned in CSS (the markup itself is CMS content). */
@media (min-width: 992px) {
    .cms-index-index .home-page-1 .deal-container .row > .col-lg-4 { flex: 0 0 75%; max-width: 75%; }
    .cms-index-index .home-page-1 .deal-container .row > .col-lg-8 { flex: 0 0 25%; max-width: 25%; }
}

/* logo block: live USA wraps the logo and slogan in an <h1> whose size/line-height (40px/50px, 32px/40px up to 768px) set the slogan's
   vertical position; the shared template uses a div (no second h1), so those metrics are restated here. */
.logo-wrapper .logo-content { font-size: 40px; line-height: 50px; }
.logo-wrapper .logo-content > strong.logo { line-height: 40px; }
@media (max-width: 768px) {
    .logo-wrapper .logo-content { font-size: 31.9992px; line-height: 39.999px; }
    .logo-wrapper .logo-content > strong.logo { line-height: 31.9992px; }
}

/* header row (live USA, changed after the earlier measurement): the menu block is 90px tall in normal flow, so the header row is 90px
   (was 82px): the logo block sits 4px lower, the search panel 8px lower and the cart box 7px higher than before. */
@media (min-width: 992px) {
    .header-container .middle-right-content .header-navigation { height: 90px; }
}

/* Home hero (Page Builder slider): the sparesusa.net slides are 1440x563 and fill the whole hero, where
   spares.net's are 3:1 with the overlay band below (afx-home-pagebuilder.css). */
#html-body #maincontent .home-page-1[data-content-type=row] .slidershow-top .pagebuilder-slide-wrapper,
#html-body #maincontent .home-page-1[data-content-type=row] .slidershow-top .pagebuilder-slide-wrapper .pagebuilder-overlay {
    aspect-ratio: 1440 / 563;
}