:root {
  --sc-app-green: #078b45;
  --sc-app-green-dark: #046b35;
  --sc-app-text: #14213d;
  --sc-app-muted: #64748b;
  --sc-app-border: #e6ebef;
  --sc-app-bg: #ffffff;
  --sc-app-nav-height: 70px;
}

/* Keep page content clear of the app navigation on phones. */
@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }

  body {
    padding-bottom: calc(var(--sc-app-nav-height) + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: contain;
  }

  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

  /* Prevent iOS zooming when a form field is focused. */
  input, select, textarea { font-size: 16px; }
}

.sc-mobile-nav {
  display: none;
}

@media (max-width: 820px) {
  .sc-mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: var(--sc-app-nav-height);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--sc-app-border);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .sc-mobile-nav__item {
    position: relative;
    min-width: 0;
    min-height: 56px;
    border: 0;
    background: transparent;
    color: var(--sc-app-muted);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 14px;
    font: inherit;
    cursor: pointer;
  }

  .sc-mobile-nav__item svg {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sc-mobile-nav__item span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
  }

  .sc-mobile-nav__item.is-active {
    color: var(--sc-app-green);
    background: #edf9f2;
  }

  .sc-mobile-nav__item:active { transform: scale(.96); }

  .sc-pwa-install {
    position: fixed;
    right: 14px;
    bottom: calc(var(--sc-app-nav-height) + 16px + env(safe-area-inset-bottom, 0px));
    z-index: 2147482999;
    display: none;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 11px 15px;
    background: var(--sc-app-green);
    color: #fff;
    box-shadow: 0 10px 26px rgba(7, 139, 69, .28);
    font: 700 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
  }

  .sc-pwa-install.is-visible { display: inline-flex; }

  .sc-ios-install-tip {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--sc-app-nav-height) + 14px + env(safe-area-inset-bottom, 0px));
    z-index: 2147482998;
    display: none;
    background: #fff;
    color: var(--sc-app-text);
    border: 1px solid var(--sc-app-border);
    border-radius: 16px;
    padding: 12px 42px 12px 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    font: 600 13px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .sc-ios-install-tip.is-visible { display: block; }

  .sc-ios-install-tip button {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
  }
}

@media (display-mode: standalone) {
  .sc-pwa-install,
  .sc-ios-install-tip { display: none !important; }
}

/* SPEEDACURE_MOBILE_APP_UI_V2_START */

/*
 * =========================================================
 * SpeedaCure Mobile App UI
 * Applies ONLY to phone/mobile widths.
 * Desktop site remains unchanged.
 * =========================================================
 */

@media (max-width: 820px) {

    :root {
        --sc-mobile-page-bg: #f5f8f6;
        --sc-mobile-card-bg: #ffffff;
        --sc-mobile-green: #078b45;
        --sc-mobile-green-dark: #056b36;
        --sc-mobile-text: #18251f;
        --sc-mobile-muted: #68756e;
        --sc-mobile-border: #e4ebe7;
        --sc-mobile-shadow:
            0 5px 18px rgba(17, 48, 32, .07);
    }


    /*
     * -----------------------------------------------------
     * PAGE / APP SHELL
     * -----------------------------------------------------
     */

    html {
        background: var(--sc-mobile-page-bg);
    }

    body {
        background: var(--sc-mobile-page-bg) !important;

        margin: 0 !important;

        padding-bottom:
            calc(
                var(--sc-app-nav-height) +
                14px +
                env(safe-area-inset-bottom, 0px)
            ) !important;

        overflow-x: hidden;
    }

    main {
        width: 100%;
        overflow: hidden;
    }

    .container {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }


    /*
     * -----------------------------------------------------
     * APP HEADER
     * -----------------------------------------------------
     */

    .site-header {
        position: sticky !important;
        top: 0;
        z-index: 1500;

        background:
            rgba(255, 255, 255, .98) !important;

        border-bottom:
            1px solid rgba(228, 235, 231, .9);

        box-shadow:
            0 5px 18px rgba(20, 45, 32, .06);

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }


    .site-header .header-main {
        width: 100% !important;
        max-width: none !important;

        display: grid !important;

        grid-template-columns:
            44px
            minmax(0, 1fr)
            44px;

        grid-template-areas:
            "menu brand cart"
            "search search search";

        align-items: center;

        gap: 8px 10px !important;

        padding:
            calc(
                8px +
                env(safe-area-inset-top, 0px)
            )
            12px
            10px !important;

        box-sizing: border-box;
    }


    /*
     * Hamburger
     */

    .site-header .mobile-toggle {
        grid-area: menu;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid #e7ede9 !important;
        border-radius: 13px !important;

        background: #f7faf8 !important;

        color: #263b31 !important;

        font-size: 21px !important;
        line-height: 1 !important;
    }


    /*
     * Logo
     */

    .site-header .brand {
        grid-area: brand;

        justify-self: center;

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

        min-width: 0;

        margin: 0 !important;
    }

    .site-header .brand img {
        display: block;

        width: auto !important;
        max-width: 168px !important;

        height: auto !important;
        max-height: 42px !important;

        object-fit: contain;
    }


    /*
     * Hide desktop-only header items.
     * Account remains accessible from bottom app navigation.
     */

    .site-header .location-btn,
    .site-header .icon-link:not(.cart-link) {
        display: none !important;
    }


    /*
     * Compact cart button
     */

    .site-header .cart-link {
        grid-area: cart;

        position: relative;

        justify-self: end;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        margin: 0 !important;
        padding: 0 !important;

        border:
            1px solid #e7ede9 !important;

        border-radius:
            13px !important;

        background:
            #f7faf8 !important;

        color:
            #173e2b !important;

        text-decoration: none !important;
    }

    .site-header .cart-link > span {
        font-size: 21px !important;
        line-height: 1 !important;
    }

    .site-header .cart-link > small {
        display: none !important;
    }

    .site-header .cart-link [data-cart-count] {
        position: absolute;

        top: -5px;
        right: -5px;

        min-width: 19px;
        height: 19px;

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

        padding: 0 4px;

        border:
            2px solid #ffffff;

        border-radius:
            999px;

        background:
            #078b45 !important;

        color:
            #ffffff !important;

        font-size:
            10px !important;

        font-weight:
            800 !important;

        line-height:
            1 !important;
    }


    /*
     * Search becomes app-style full-width second row.
     */

    .site-header .search-bar {
        grid-area: search;

        width: 100% !important;

        min-width: 0 !important;
        height: 46px !important;

        display: grid !important;

        grid-template-columns:
            32px
            minmax(0, 1fr)
            auto;

        align-items: center;

        gap: 4px !important;

        margin: 0 !important;
        padding: 0 5px 0 10px !important;

        box-sizing: border-box;

        border:
            1px solid #dce8e1 !important;

        border-radius:
            14px !important;

        background:
            #f3f7f5 !important;

        box-shadow:
            inset 0 1px 2px
            rgba(30, 60, 45, .025);
    }

    .site-header .search-bar > span {
        color:
            var(--sc-mobile-green);

        font-size:
            21px !important;

        text-align:
            center;
    }

    .site-header .search-bar input {
        width: 100% !important;

        min-width: 0;

        height: 42px;

        margin: 0 !important;
        padding: 0 4px !important;

        border: 0 !important;
        outline: 0 !important;

        background:
            transparent !important;

        color:
            var(--sc-mobile-text);

        font-size:
            15px !important;
    }

    .site-header .search-bar input::placeholder {
        color:
            #849088;
    }

    .site-header .search-bar button {
        height: 36px !important;

        padding:
            0 13px !important;

        border: 0 !important;
        border-radius:
            10px !important;

        background:
            var(--sc-mobile-green) !important;

        color:
            #ffffff !important;

        font-size:
            12px !important;

        font-weight:
            750 !important;
    }


    /*
     * Desktop horizontal category nav is unnecessary
     * in mobile-app layout.
     */

    .site-header .nav-row {
        display: none !important;
    }


    /*
     * -----------------------------------------------------
     * DRAWER
     * -----------------------------------------------------
     */

    .mobile-drawer {
        z-index: 2200 !important;
    }

    .overlay {
        z-index: 2100 !important;
    }


    /*
     * -----------------------------------------------------
     * HOME BANNER
     * -----------------------------------------------------
     */

    .sc-home-banners {
        position: relative;

        width:
            calc(100% - 24px) !important;

        margin:
            12px auto 0 !important;

        overflow: hidden;

        border-radius:
            18px !important;

        background:
            #ffffff;

        box-shadow:
            var(--sc-mobile-shadow);
    }

    .sc-home-banner-viewport {
        width: 100% !important;

        aspect-ratio:
            16 / 7.2;

        overflow:
            hidden !important;

        border-radius:
            18px !important;
    }

    .sc-home-banner-track,
    .sc-home-banner-slide,
    .sc-home-banner-link,
    .sc-home-banner-slide picture {
        height: 100% !important;
    }

    .sc-home-banner-slide img {
        width: 100% !important;
        height: 100% !important;

        display: block;

        object-fit:
            cover !important;

        object-position:
            center center;
    }

    .sc-home-banner-arrow {
        width: 34px !important;
        height: 34px !important;

        border-radius:
            50% !important;

        background:
            rgba(255,255,255,.90) !important;

        box-shadow:
            0 3px 10px
            rgba(0,0,0,.10) !important;

        font-size:
            24px !important;
    }

    .sc-home-banner-arrow.prev {
        left: 7px !important;
    }

    .sc-home-banner-arrow.next {
        right: 7px !important;
    }

    .sc-home-banner-dots {
        bottom:
            7px !important;
    }

    .sc-home-banner-dots button {
        width:
            6px !important;

        height:
            6px !important;
    }

    .sc-home-banner-dots button[aria-current="true"] {
        width:
            19px !important;

        border-radius:
            999px !important;
    }


    /*
     * -----------------------------------------------------
     * SERVICE BENEFITS
     * Horizontal swipe like native shopping apps.
     * -----------------------------------------------------
     */

    .service-strip {
        margin:
            10px 0 2px !important;

        padding:
            0 !important;

        background:
            transparent !important;
    }

    .service-strip .service-grid {
        width:
            calc(100% - 24px) !important;

        display:
            flex !important;

        grid-template-columns:
            none !important;

        gap:
            9px !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        padding:
            2px 0 8px !important;

        scroll-snap-type:
            x proximity;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }

    .service-strip .service-grid::-webkit-scrollbar {
        display: none;
    }

    .service-strip .service-grid > div {
        flex:
            0 0 202px;

        min-height:
            62px;

        display:
            flex !important;

        align-items:
            center;

        gap:
            10px;

        padding:
            10px 12px !important;

        box-sizing:
            border-box;

        scroll-snap-align:
            start;

        border:
            1px solid var(--sc-mobile-border);

        border-radius:
            15px !important;

        background:
            #ffffff !important;

        box-shadow:
            0 3px 12px
            rgba(25, 55, 40, .04);
    }

    .service-strip .service-grid > div > b {
        flex:
            0 0 34px;

        width:
            34px;
        height:
            34px;

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

        border-radius:
            11px;

        background:
            #edf8f2;

        color:
            var(--sc-mobile-green);
    }

    .service-strip strong {
        display:
            block;

        font-size:
            12px !important;

        line-height:
            1.2;
    }

    .service-strip small {
        display:
            block;

        margin-top:
            2px;

        color:
            var(--sc-mobile-muted);

        font-size:
            10px !important;
    }


    /*
     * -----------------------------------------------------
     * STANDARD HOME SECTIONS
     * -----------------------------------------------------
     */

    .section {
        padding:
            22px 0 !important;
    }

    .section.alt {
        background:
            #f1f6f3 !important;
    }

    .section-head {
        display:
            flex !important;

        align-items:
            flex-end !important;

        justify-content:
            space-between !important;

        gap:
            12px !important;

        margin-bottom:
            13px !important;
    }

    .section-head > div {
        min-width:
            0;
    }

    .section-head span {
        display:
            block;

        margin-bottom:
            3px;

        color:
            var(--sc-mobile-green) !important;

        font-size:
            10px !important;

        font-weight:
            800 !important;

        letter-spacing:
            .06em;

        text-transform:
            uppercase;
    }

    .section-head h2 {
        margin:
            0 !important;

        color:
            var(--sc-mobile-text) !important;

        font-size:
            20px !important;

        font-weight:
            800 !important;

        line-height:
            1.15 !important;

        letter-spacing:
            -.025em;
    }

    .section-head > a {
        flex:
            0 0 auto;

        margin-bottom:
            2px;

        color:
            var(--sc-mobile-green) !important;

        font-size:
            12px !important;

        font-weight:
            750 !important;

        text-decoration:
            none !important;
    }


    /*
     * -----------------------------------------------------
     * CATEGORIES
     * Native-app horizontal swipe row.
     * -----------------------------------------------------
     */

    #categories {
        padding-top:
            20px !important;
    }

    #categories .section-head h2 {
        font-size:
            19px !important;
    }

    .cat-grid {
        display:
            flex !important;

        grid-template-columns:
            none !important;

        gap:
            10px !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        margin:
            0 -2px !important;

        padding:
            2px 2px 8px !important;

        scroll-snap-type:
            x proximity;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }

    .cat-grid::-webkit-scrollbar {
        display:
            none;
    }

    .cat-card {
        flex:
            0 0 94px !important;

        width:
            94px !important;

        min-width:
            94px !important;

        min-height:
            112px !important;

        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            flex-start;

        gap:
            7px;

        margin:
            0 !important;

        padding:
            10px 7px !important;

        box-sizing:
            border-box;

        scroll-snap-align:
            start;

        border:
            1px solid var(--sc-mobile-border) !important;

        border-radius:
            16px !important;

        background:
            #ffffff !important;

        box-shadow:
            0 3px 12px
            rgba(20, 55, 36, .045) !important;

        color:
            var(--sc-mobile-text) !important;

        text-align:
            center !important;

        text-decoration:
            none !important;
    }

    .cat-card img {
        width:
            54px !important;

        height:
            54px !important;

        min-height:
            54px;

        object-fit:
            contain !important;

        margin:
            0 auto !important;
    }

    .cat-card strong,
    .cat-card span,
    .cat-card p {
        max-width:
            100%;

        margin:
            0 !important;

        color:
            var(--sc-mobile-text) !important;

        font-size:
            11px !important;

        font-weight:
            700 !important;

        line-height:
            1.18 !important;

        text-align:
            center;
    }


    /*
     * -----------------------------------------------------
     * PRODUCT SECTIONS
     * Two-column mobile shopping grid.
     * -----------------------------------------------------
     */

    .product-row {
        width:
            100% !important;

        display:
            grid !important;

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

        gap:
            10px !important;

        overflow:
            visible !important;

        padding:
            0 !important;

        margin:
            0 !important;
    }

    .product-row > * {
        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        margin:
            0 !important;

        box-sizing:
            border-box;

        border-radius:
            16px !important;
    }


    /*
     * Common product-card names used by storefront scripts.
     */

    .product-row .product-card,
    .product-row .product-item,
    .product-row .sc-product-card,
    .product-row > article,
    .product-row > div {
        overflow:
            hidden;

        border:
            1px solid var(--sc-mobile-border) !important;

        background:
            #ffffff !important;

        box-shadow:
            0 3px 14px
            rgba(20, 55, 36, .05) !important;
    }

    .product-row img {
        display:
            block;

        max-width:
            100% !important;

        height:
            auto;

        object-fit:
            contain !important;
    }

    .product-row h3,
    .product-row h4 {
        font-size:
            13px !important;

        line-height:
            1.3 !important;
    }

    .product-row p,
    .product-row small {
        font-size:
            11px !important;

        line-height:
            1.35;
    }

    .product-row button,
    .product-row .btn,
    .product-row [class*="add"] {
        min-height:
            38px;

        border-radius:
            10px !important;
    }


    /*
     * -----------------------------------------------------
     * PROMOTIONAL CARDS
     * -----------------------------------------------------
     */

    .promo {
        padding:
            8px 0 20px !important;
    }

    .promo-grid {
        display:
            grid !important;

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

        gap:
            11px !important;
    }

    .promo-card {
        min-height:
            auto !important;

        padding:
            18px !important;

        border-radius:
            18px !important;
    }

    .promo-card h3 {
        margin:
            5px 0 7px !important;

        font-size:
            19px !important;

        line-height:
            1.2 !important;
    }

    .promo-card p {
        margin:
            0 0 10px !important;

        font-size:
            12px !important;

        line-height:
            1.45;
    }

    .promo-card a {
        font-size:
            12px !important;

        font-weight:
            750 !important;
    }


    /*
     * -----------------------------------------------------
     * CONDITIONS
     * -----------------------------------------------------
     */

    .condition-grid {
        display:
            grid !important;

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

        gap:
            8px !important;
    }

    .condition-card {
        min-height:
            88px;

        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            6px;

        padding:
            10px 5px !important;

        border:
            1px solid var(--sc-mobile-border) !important;

        border-radius:
            14px !important;

        background:
            #ffffff !important;

        box-sizing:
            border-box;

        text-align:
            center;
    }

    .condition-card > span {
        font-size:
            22px !important;
    }

    .condition-card strong {
        font-size:
            11px !important;

        line-height:
            1.2 !important;
    }


    /*
     * -----------------------------------------------------
     * SEO / INFORMATION SECTION
     * Keep it available for search engines and users,
     * but visually quieter on mobile.
     * -----------------------------------------------------
     */

    .seo-copy {
        padding:
            20px 0 !important;

        background:
            #ffffff !important;
    }

    .seo-copy h2 {
        font-size:
            17px !important;

        line-height:
            1.25 !important;
    }

    .seo-copy p {
        color:
            #66736c !important;

        font-size:
            12px !important;

        line-height:
            1.55 !important;
    }


    /*
     * -----------------------------------------------------
     * FOOTER
     * -----------------------------------------------------
     */

    .footer-grid {
        display:
            grid !important;

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

        gap:
            18px !important;
    }

    .footer-logo {
        max-width:
            160px !important;
    }


    /*
     * -----------------------------------------------------
     * BUTTON / TOUCH QUALITY
     * -----------------------------------------------------
     */

    button,
    a {
        touch-action:
            manipulation;
    }


    /*
     * -----------------------------------------------------
     * VERY SMALL PHONES
     * -----------------------------------------------------
     */

    @media (max-width: 390px) {

        .site-header .brand img {
            max-width:
                145px !important;
        }

        .site-header .header-main {
            padding-left:
                9px !important;

            padding-right:
                9px !important;
        }

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

        .sc-home-banners {
            width:
                calc(100% - 18px) !important;
        }

        .service-strip .service-grid {
            width:
                calc(100% - 18px) !important;
        }

        .product-row {
            gap:
                8px !important;
        }

        .condition-grid {
            gap:
                6px !important;
        }

        .condition-card strong {
            font-size:
                10.5px !important;
        }

    }

}

/* SPEEDACURE_MOBILE_APP_UI_V2_END */

/* =========================================================
   SPEEDACURE MOBILE APP UI V3
   Screenshot refinement - 14 Oct 2026
   ========================================================= */

@media (max-width: 820px) {

    /*
     * Header: slightly larger brand, clean compact cart
     */

    .site-header .header-main {
        grid-template-columns:
            46px
            minmax(0, 1fr)
            46px !important;

        gap: 7px 8px !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .site-header .brand {
        width: 100% !important;

        overflow: visible !important;
    }


    .site-header .brand img {
        width: 185px !important;
        max-width: 65vw !important;

        height: auto !important;
        max-height: 52px !important;

        object-fit: contain !important;
    }


    /*
     * Existing header scripts/styles are exposing
     * an oversized Cart label.
     * Keep only icon + quantity badge.
     */

    .site-header .cart-link {
        width: 44px !important;
        height: 44px !important;

        font-size: 0 !important;

        overflow: visible !important;
    }


    .site-header .cart-link > small,
    .site-header .cart-link > .label,
    .site-header .cart-link > [class*="label"] {
        display: none !important;
    }


    .site-header .cart-link > span:first-child {
        display: inline-flex !important;

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

        font-size: 23px !important;
        line-height: 1 !important;
    }


    .site-header .cart-link [data-cart-count] {
        top: -6px !important;
        right: -5px !important;

        font-size: 10px !important;
    }


    /*
     * Search
     */

    .site-header .search-bar {
        height: 44px !important;

        border-radius: 13px !important;
    }


    .site-header .search-bar input {
        height: 40px !important;

        font-size: 14px !important;
    }


    .site-header .search-bar button {
        height: 36px !important;

        padding: 0 14px !important;

        font-size: 12px !important;
    }


    /*
     * Banner
     *
     * Existing SpeedaCure banners are desktop-wide.
     * Show the complete banner instead of cropping
     * the left/right content.
     */

    .sc-home-banners {
        margin-top: 10px !important;

        border-radius: 16px !important;
    }


    .sc-home-banner-viewport {
        aspect-ratio: 3 / 1 !important;

        height: auto !important;

        background: #ffffff !important;

        border-radius: 16px !important;
    }


    .sc-home-banner-track,
    .sc-home-banner-slide,
    .sc-home-banner-link,
    .sc-home-banner-slide picture {
        width: 100% !important;
        height: 100% !important;
    }


    .sc-home-banner-slide img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center center !important;
    }


    /*
     * On phones, swipe is cleaner than arrows.
     */

    .sc-home-banner-arrow {
        display: none !important;
    }


    .sc-home-banner-dots {
        bottom: 5px !important;
    }


    /*
     * Benefits row: slightly more compact
     */

    .service-strip .service-grid > div {
        flex-basis: 175px !important;

        min-height: 58px !important;

        padding: 9px 10px !important;
    }


    .service-strip .service-grid > div > b {
        width: 32px !important;
        height: 32px !important;

        flex-basis: 32px !important;
    }


    .service-strip strong {
        font-size: 11px !important;
    }


    .service-strip small {
        font-size: 9.5px !important;
    }


    /*
     * Category heading
     */

    #categories {
        padding-top: 17px !important;
    }


    #categories .section-head {
        align-items: center !important;

        margin-bottom: 12px !important;
    }


    #categories .section-head h2 {
        max-width: 275px;

        font-size: 18px !important;

        line-height: 1.15 !important;
    }


    #categories .section-head > a {
        font-size: 11px !important;

        white-space: nowrap;
    }


    /*
     * Compact pharmacy-app category tiles
     */

    .cat-grid {
        gap: 9px !important;

        padding-bottom: 5px !important;
    }


    .cat-card {
        flex: 0 0 88px !important;

        width: 88px !important;
        min-width: 88px !important;

        min-height: 100px !important;

        padding: 9px 6px !important;

        gap: 5px !important;

        border-radius: 15px !important;
    }


    .cat-card img {
        width: 49px !important;
        height: 49px !important;

        min-height: 49px !important;
    }


    .cat-card strong,
    .cat-card span,
    .cat-card p {
        font-size: 10.5px !important;

        line-height: 1.12 !important;
    }


    /*
     * JS marks "Explore" using this class.
     */

    .cat-card .sc-mobile-hide-explore {
        display: none !important;
    }


    /*
     * Keep feedback button above app navigation
     */

    .sc-feedback-mobile {
        position: fixed !important;

        right: 10px !important;

        bottom:
            calc(
                82px +
                env(safe-area-inset-bottom, 0px)
            ) !important;

        z-index: 1750 !important;

        transform: scale(.88);

        transform-origin: bottom right;
    }


    /*
     * Bottom app bar
     */

    .sc-mobile-nav {
        min-height: 67px !important;
    }


    .sc-mobile-nav__item svg {
        width: 24px !important;
        height: 24px !important;
    }


    .sc-mobile-nav__item span {
        font-size: 10px !important;
    }

}


/*
 * Extra narrow phones
 */

@media (max-width: 390px) {

    .site-header .brand img {
        width: 165px !important;
    }


    #categories .section-head h2 {
        max-width: 240px;

        font-size: 17px !important;
    }


    .cat-card {
        flex-basis: 84px !important;

        width: 84px !important;
        min-width: 84px !important;
    }

}