/*
 * SpeedaCure global responsive layer
 * Desktop / Tablet / Mobile
 */

html {
    box-sizing: border-box;
    width: 100%;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}


/*
 * =========================================================
 * GLOBAL CONTENT WIDTH
 * =========================================================
 *
 * The previous desktop layout was visually narrow on
 * 1600px+ screens.
 */

.container {
    width: min(
        calc(100% - 48px),
        1440px
    ) !important;

    max-width: 1440px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/*
 * =========================================================
 * HEADER
 * =========================================================
 */

.sc-header-main,
.sc-header-main > * {
    min-width: 0;
}

.sc-header-search {
    min-width: 0;
}

.sc-header-search input[type="search"] {
    width: 100%;
    min-width: 0;
}


/*
 * =========================================================
 * HERO
 * =========================================================
 */

.sc-responsive-hero {
    overflow: hidden;
}

.sc-responsive-hero .sc-hero-inner {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .85fr) !important;

    align-items: center !important;

    gap: clamp(
        28px,
        5vw,
        80px
    );

    min-height: clamp(
        430px,
        39vw,
        570px
    );
}

.sc-responsive-hero h1 {
    font-size: clamp(
        2.8rem,
        4.1vw,
        4.8rem
    ) !important;

    line-height: 1.03 !important;

    max-width: 13ch;
}

.sc-responsive-hero p {
    max-width: 680px;
}

.sc-hero-copy {
    min-width: 0;
}

.sc-hero-inner > * {
    min-width: 0;
}


/*
 * =========================================================
 * PRODUCT GRIDS
 * =========================================================
 */

.product-grid {
    min-width: 0;
}

.product-card {
    min-width: 0;
}

.product-card img {
    max-width: 100%;
    height: auto;
}


/*
 * =========================================================
 * CARE BY CONDITION
 * =========================================================
 */

.sc-condition-grid {
    min-width: 0;
}


/*
 * =========================================================
 * MOBILE DRAWER
 * =========================================================
 */

.sc-mobile-menu-fallback {
    display: none;
}

.sc-mobile-menu-backdrop {
    position: fixed;
    inset: 0;

    z-index: 9998;

    background:
        rgba(6, 35, 28, .46);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.sc-mobile-menu-drawer {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 9999;

    width: min(
        88vw,
        370px
    );

    height: 100vh;
    height: 100dvh;

    background: #ffffff;

    box-shadow:
        12px 0 40px
        rgba(10, 46, 36, .18);

    transform:
        translateX(-102%);

    transition:
        transform .25s ease;

    overflow-y: auto;

    padding:
        20px 18px
        28px;
}

body.sc-mobile-menu-open {
    overflow: hidden;
}

body.sc-mobile-menu-open
.sc-mobile-menu-backdrop {
    opacity: 1;
    visibility: visible;
}

body.sc-mobile-menu-open
.sc-mobile-menu-drawer {
    transform:
        translateX(0);
}

.sc-mobile-menu-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding-bottom: 16px;

    border-bottom:
        1px solid #e0ebe6;
}

.sc-mobile-menu-head strong {
    color: #073a2e;

    font-size: 1.15rem;
}

.sc-mobile-menu-close {
    width: 42px;
    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #d5e4de;
    border-radius: 10px;

    background: #ffffff;

    color: #073a2e;

    font-size: 1.4rem;

    cursor: pointer;
}

.sc-mobile-menu-nav {
    display: grid;

    gap: 4px;

    padding-top: 14px;
}

.sc-mobile-menu-label {
    margin:
        16px 8px
        7px;

    color: #078b63;

    font-size: .72rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.sc-mobile-menu-nav a {
    display: flex;

    align-items: center;

    min-height: 45px;

    padding:
        10px 12px;

    border-radius: 9px;

    color: #123f34;

    text-decoration: none;

    font-weight: 700;
}

.sc-mobile-menu-nav a:hover,
.sc-mobile-menu-nav a:focus-visible {
    background: #edf7f3;

    color: #087b59;
}

[data-sc-mobile-menu-toggle] {
    touch-action: manipulation;
}


/*
 * =========================================================
 * TABLET
 * =========================================================
 */

@media (max-width: 1100px) {

    .container {
        width:
            calc(100% - 36px)
            !important;
    }

    .product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

    .sc-responsive-hero
    .sc-hero-inner {
        min-height: 420px;

        gap: 30px;
    }

    .sc-responsive-hero h1 {
        font-size:
            clamp(
                2.6rem,
                5vw,
                4rem
            ) !important;
    }
}


/*
 * =========================================================
 * MOBILE
 * =========================================================
 */

@media (max-width: 900px) {

    .container {
        width:
            calc(100% - 28px)
            !important;
    }


    /*
     * Hero becomes one-column.
     */

    .sc-responsive-hero
    .sc-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            !important;

        min-height: 0;

        gap: 28px;

        padding-top: 42px;
        padding-bottom: 42px;
    }

    .sc-responsive-hero h1 {
        max-width: 13ch;

        font-size:
            clamp(
                2.45rem,
                9vw,
                3.8rem
            ) !important;
    }


    /*
     * Header can wrap instead of overflowing.
     */

    .sc-header-main {
        display: flex !important;

        flex-wrap: wrap !important;

        align-items: center !important;

        gap: 10px !important;
    }

    .sc-header-search {
        flex:
            1 1 100% !important;

        width: 100% !important;

        order: 20;
    }


    /*
     * Desktop individual category links disappear.
     * The All Categories / hamburger remains.
     */

    .sc-mobile-hide-category {
        display: none !important;
    }


    .sc-mobile-menu-fallback {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-width: 44px;
        min-height: 44px;

        padding: 8px 12px;

        border: 0;
        border-radius: 9px;

        background: #078d63;

        color: #ffffff;

        font-weight: 900;

        cursor: pointer;
    }


    /*
     * Condition tiles: 3 per row.
     */

    .sc-condition-grid {
        display: grid !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap:
            20px 10px !important;
    }


    /*
     * Product grids: 2 per row.
     */

    .product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 14px !important;
    }


    table {
        max-width: 100%;
    }

    .im-table-wrap,
    .bi-table-wrap {
        overflow-x: auto;
    }
}


/*
 * Small phones
 */

@media (max-width: 480px) {

    .container {
        width:
            calc(100% - 20px)
            !important;
    }

    .sc-responsive-hero
    .sc-hero-inner {
        padding-top: 30px;
        padding-bottom: 34px;
    }

    .sc-responsive-hero h1 {
        font-size:
            clamp(
                2.15rem,
                10vw,
                3rem
            ) !important;
    }

    .sc-condition-grid {
        gap:
            16px 8px
            !important;
    }
}


/*
 * Very narrow devices.
 */

@media (max-width: 340px) {

    .sc-condition-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }
}


/*
 * =========================================================
 * SPEEDACURE COMPACT DESKTOP HEADER
 * Reference-inspired proportions.
 * Mobile <= 900px remains unchanged.
 * =========================================================
 */

@media (min-width: 901px) {

    /*
     * Main row
     */

    .sc-ref-header-row {

        display: grid !important;

        grid-template-columns:
            150px
            minmax(360px, 1fr)
            minmax(170px, 210px)
            auto
            auto
            !important;

        align-items: center !important;

        column-gap: 12px !important;

        min-height: 72px;

        padding-top: 8px;
        padding-bottom: 8px;
    }


    /*
     * Logo
     */

    .sc-ref-logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
    }

    .sc-ref-logo img {

        width: auto !important;

        max-width: 135px !important;

        max-height: 48px !important;

        object-fit: contain;
    }


    /*
     * Search
     */

    .sc-ref-search {

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
    }

    .sc-ref-search input[type="search"] {

        min-height: 44px !important;

        font-size: .96rem !important;
    }

    .sc-ref-search button {

        min-height: 44px !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        white-space: nowrap;
    }


    /*
     * Location becomes more like a proper selector.
     */

    .sc-ref-location {

        min-width: 0;

        min-height: 44px;

        display: flex !important;

        align-items: center !important;

        padding:
            6px 12px !important;

        border:
            1px solid #d7e5df !important;

        border-radius:
            10px !important;

        background:
            #ffffff !important;
    }


    /*
     * Account / Cart
     */

    .sc-ref-account,
    .sc-ref-cart {

        min-width: 56px;

        min-height: 44px;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding:
            5px 8px !important;
    }


    /*
     * Navigation row
     */

    .sc-ref-nav {

        border-top:
            1px solid #edf2ef;

        border-bottom:
            1px solid #e5ece8;
    }


    .sc-ref-nav .container {

        min-height: 48px;

        display: flex !important;

        align-items: center !important;

        gap:
            clamp(
                18px,
                2vw,
                30px
            ) !important;

        overflow: hidden;
    }


    .sc-ref-category {

        flex: 0 0 auto;

        white-space: nowrap;

        font-size: .91rem !important;

        font-weight: 700 !important;

        color: #183d33 !important;
    }


    /*
     * Hide the large All Categories block on desktop.
     * Mobile menu still uses it below 900px.
     */

    .sc-ref-all-categories {

        display: none !important;
    }


    /*
     * Instant Order remains on right side of nav.
     */

    .sc-ref-instant {

        margin-left: auto !important;

        flex: 0 0 auto;

        white-space: nowrap;

        font-weight: 800 !important;
    }
}


/*
 * Slightly smaller laptop desktop header.
 */

@media
(min-width: 901px)
and (max-width: 1200px) {

    .sc-ref-header-row {

        grid-template-columns:
            125px
            minmax(300px,1fr)
            165px
            auto
            auto
            !important;

        column-gap:
            8px !important;
    }


    .sc-ref-logo img {

        max-width:
            118px !important;
    }


    .sc-ref-nav .container {

        gap:
            14px !important;
    }


    .sc-ref-category {

        font-size:
            .82rem !important;
    }
}


/*
 * =========================================================
 * SPEEDACURE HEADER CORRECTION V2
 * Proper two-row desktop header
 * =========================================================
 */

@media (min-width: 901px) {

    /*
     * TOP ROW
     */

    .sc-ref-header-row {

        display: grid !important;

        grid-template-columns:
            145px
            minmax(380px,1fr)
            205px
            82px
            82px
            !important;

        align-items: center !important;

        column-gap: 12px !important;

        min-height: 78px !important;

        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }


    /*
     * If the navigation happens to live
     * inside this container, force it to
     * become a completely separate row.
     */

    .sc-ref-header-row > .sc-ref-nav {

        grid-column:
            1 / -1 !important;

        width: 100% !important;
    }


    /*
     * LOGO
     */

    .sc-ref-logo {

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        min-width: 0;
    }


    .sc-ref-logo img {

        width: auto !important;

        max-width: 135px !important;

        max-height: 48px !important;

        object-fit: contain;
    }


    /*
     * SEARCH
     */

    .sc-ref-search {

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
    }


    .sc-ref-search input[type="search"] {

        min-height: 46px !important;

        font-size: 1rem !important;
    }


    .sc-ref-search button {

        min-height: 46px !important;

        padding-left: 22px !important;
        padding-right: 22px !important;

        font-weight: 800 !important;
    }


    /*
     * LOCATION
     */

    .sc-ref-location {

        min-height: 52px !important;

        display: flex !important;

        align-items: center !important;

        padding:
            6px 12px !important;

        border:
            1px solid #d8e5df !important;

        border-radius:
            11px !important;

        background:
            #ffffff !important;
    }


    /*
     * ACCOUNT + CART
     *
     * These are intentionally much more prominent.
     */

    .sc-ref-account,
    .sc-ref-cart {

        position: relative;

        width: 76px !important;
        height: 56px !important;

        min-width: 76px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 2px !important;

        padding:
            5px 7px !important;

        border:
            1px solid #d2e3dc !important;

        border-radius:
            11px !important;

        background:
            #f8fbfa !important;

        color:
            #143f34 !important;

        font-size:
            .72rem !important;

        font-weight:
            800 !important;

        text-decoration:
            none !important;
    }


    .sc-ref-cart {

        background:
            #edf8f3 !important;

        border-color:
            #b9ddce !important;

        color:
            #087653 !important;
    }


    .sc-ref-account:hover,
    .sc-ref-cart:hover {

        border-color:
            #079568 !important;

        background:
            #e9f7f1 !important;
    }


    /*
     * New SVG icons
     */

    .sc-ref-ui-icon {

        width: 23px;
        height: 23px;

        display: block;

        flex: 0 0 23px;

        color:
            #087653;
    }


    .sc-ref-ui-icon svg {

        display: block;

        width: 100%;
        height: 100%;
    }


    /*
     * SECOND ROW NAVIGATION
     */

    .sc-ref-nav {

        display: block !important;

        width: 100% !important;

        clear: both !important;

        border-top:
            1px solid #edf2ef !important;

        border-bottom:
            1px solid #e1ebe6 !important;

        background:
            #ffffff !important;
    }


    .sc-ref-nav .container {

        width:
            min(
                calc(100% - 48px),
                1320px
            ) !important;

        max-width:
            1320px !important;

        min-height:
            50px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        display:
            flex !important;

        align-items:
            center !important;

        gap:
            clamp(
                18px,
                1.6vw,
                28px
            ) !important;

        overflow:
            visible !important;
    }


    .sc-ref-category {

        flex:
            0 0 auto !important;

        white-space:
            nowrap !important;

        font-size:
            .88rem !important;

        font-weight:
            750 !important;

        color:
            #153e33 !important;

        line-height:
            1.2 !important;
    }


    /*
     * Do not allow category labels to break
     * into 3 lines like the previous screenshot.
     */

    .sc-ref-category br {

        display:
            none !important;
    }


    /*
     * All Categories is mobile functionality.
     */

    .sc-ref-all-categories {

        display:
            none !important;
    }


    /*
     * Instant Order at far right.
     */

    .sc-ref-instant {

        margin-left:
            auto !important;

        white-space:
            nowrap !important;

        flex:
            0 0 auto !important;

        font-weight:
            850 !important;

        color:
            #db6629 !important;
    }

}


/*
 * Medium laptops
 */

@media
(min-width: 901px)
and
(max-width: 1250px) {

    .sc-ref-header-row {

        grid-template-columns:
            125px
            minmax(300px,1fr)
            175px
            72px
            72px
            !important;

        column-gap:
            8px !important;
    }


    .sc-ref-logo img {

        max-width:
            115px !important;
    }


    .sc-ref-account,
    .sc-ref-cart {

        width:
            68px !important;

        min-width:
            68px !important;
    }


    .sc-ref-nav .container {

        gap:
            14px !important;
    }


    .sc-ref-category {

        font-size:
            .80rem !important;
    }
}