/* Desktop keeps theme min-width; mobile overrides below */
@media (max-width: 991.98px) {
    html, body {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* iHerb leftover ::before spacer (~332px white gap under header) */
#iherb-homepage::before,
#iherb-homepage::after,
.home-page-refresh-enabled::before,
.home-page-refresh-enabled::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Theme3 layout overrides — fixes for Laravel integration */

/* Screen-reader-only text (accessibility / PageSpeed agent a11y) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Do not hide the whole page while webfonts load (hurts LCP / PageSpeed). */
html.wf-loading,
html.wf-loading body {
    display: block !important;
    visibility: visible !important;
}

/* Prefer swap for any later @font-face rules we control */
@font-face {
    font-family: '__t3_font_display_hint';
    src: local('Arial');
    font-display: swap;
}

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

/* CLS: reserve product card image space */
.product .product-image,
.product .product-image.image-available {
    display: block;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    background: #fff;
}
.product .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}
.hp-bento-banners {
    min-height: 249px;
}
.t3-product-carousel {
    overflow: hidden;
}
.t3-product-carousel .carousel-inner.product-carousels {
    display: flex;
    will-change: transform;
    backface-visibility: hidden;
}

.t3-site-header .icon { display: inline-block; vertical-align: middle; }
.t3-site-footer { display: block !important; }
.iherb-responsive { display: block !important; }

:root {
    --primary-color: #274158;
    --btn-color: #274158;
    --t3-action: #274158;
    --t3-action-hover: #1f3446;
    --t3-whatsapp: #25d366;
    --t3-whatsapp-hover: #1ebe57;
}


/* PageSpeed: iHerb icon font must declare font-display */
@font-face {
    font-family: iHerb-Font;
    src: url("https://s3.images-iherb.com/static/f/iherb-font-88.woff2") format("woff2"),
         url("https://s3.images-iherb.com/static/f/iherb-font-88.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Avoid invisible text during font swap (PageSpeed font-display) */
@font-face {
    font-family: FontBrandedPrimary;
    font-display: swap;
}
@font-face {
    font-family: FontBrandedSecondary;
    font-display: swap;
}
@font-face {
    font-family: FontUniversalPrimary;
    font-display: swap;
}

/* Shared CTA buttons: Add to Cart, Buy/Order Now, Submit, Checkout */
.t3-action-btn,
.btn-add-to-cart,
.t3-pdp-order-btn,
.btn-submit-review,
.t3-add-to-cart,
.t3-cart-checkout,
.t3-cart-empty a,
button.btn-primary.btn-add-to-cart,
a.go-to-checkout.btn-primary,
.t3-checkout-page button[type="submit"],
.t3-checkout-page .btn-primary,
.t3-contact-page .btn-primary,
.t3-order-page .btn-primary {
    background: #274158 !important;
    background-color: #274158 !important;
    border-color: #274158 !important;
    color: #fff !important;
    min-height: 48px !important;
    height: 48px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    padding: 0 16px !important;
}

.t3-action-btn:hover,
.t3-action-btn:focus,
.btn-add-to-cart:hover,
.btn-add-to-cart:focus,
.t3-pdp-order-btn:hover,
.btn-submit-review:hover,
.t3-add-to-cart:hover,
.t3-cart-checkout:hover,
.t3-cart-empty a:hover,
button.btn-primary.btn-add-to-cart:hover,
a.go-to-checkout.btn-primary:hover,
.t3-checkout-page button[type="submit"]:hover,
.t3-checkout-page .btn-primary:hover,
.t3-contact-page .btn-primary:hover,
.t3-order-page .btn-primary:hover {
    background: #1f3446 !important;
    background-color: #1f3446 !important;
    border-color: #1f3446 !important;
    color: #fff !important;
}

.t3-action-btn:disabled,
.btn-add-to-cart:disabled,
.t3-pdp-order-btn:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Product card row: keep side-by-side CTAs usable */
.t3-pdp-cta-row {
    display: flex !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

.t3-pdp-cta-row .t3-action-btn,
.t3-pdp-cta-row .t3-pdp-order-btn,
.t3-pdp-cta-row .btn-add-to-cart {
    width: 50% !important;
    flex: 1 1 0 !important;
}

/* WhatsApp stays green */
.t3-whatsapp-btn,
.t3-pdp-whatsapp-btn,
a.t3-pdp-whatsapp-btn {
    background: #25d366 !important;
    background-color: #25d366 !important;
    border-color: #25d366 !important;
    color: #fff !important;
    min-height: 48px !important;
    height: 48px !important;
    width: 50% !important;
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    padding: 0 16px !important;
}

.t3-whatsapp-btn:hover,
.t3-pdp-whatsapp-btn:hover,
a.t3-pdp-whatsapp-btn:hover {
    background: #1ebe57 !important;
    background-color: #1ebe57 !important;
    border-color: #1ebe57 !important;
    color: #fff !important;
}

a.t3-whatsapp-btn,
a.t3-pdp-whatsapp-btn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 30 !important;
    -webkit-tap-highlight-color: rgba(37, 211, 102, 0.35);
    touch-action: manipulation;
}

@media (max-width: 991.98px) {
    .t3-pdp-page .t3-pdp-cta-row {
        position: relative !important;
        z-index: 40 !important;
    }

    .t3-pdp-page a.t3-pdp-whatsapp-btn,
    .t3-pdp-page a.t3-whatsapp-btn {
        width: 100% !important;
        flex: 1 1 48% !important;
        min-height: 48px !important;
        pointer-events: auto !important;
        z-index: 40 !important;
    }
}

/* Desktop: light container only — never touch .hp-bento-grid transform
   (carousel uses translateX; !important none broke slide positioning). */
@media (min-width: 992px) {
    .hp-bento-banners {
        display: block !important;
        margin: 0 auto 12px;
        max-width: 1376px;
        padding: 8px 16px 0;
    }
}

/* Hide leftover iHerb promo pills on all viewports */
.locale-banner-header,
.universal-pills,
.persistent-pill-using-only-bannertool {
    display: none !important;
}

/* Remove iHerb sign-in prompt from homepage */
.hp-sign-in-prompt-container,
#hp-sign-in-prompt {
    display: none !important;
}

/* Guest-only store: hide Sign in / My Account from header */
#iherb-account,
.iherb-header-account,
.iherb-header-account-sign-in,
.iherb-header-menu-account,
.my-account-menu,
.iherb-header-signed-out,
.iherb-header-signed-in {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* Category module title: name left, View all right */
.hp-module-trending .hp-module-title,
.home-carousel-container .hp-module-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.hp-module-trending .hp-module-title .title-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left !important;
}
.hp-module-trending .hp-module-title .view-all,
.hp-module-trending .hp-module-title a.view-all.btn {
    flex: 0 0 auto;
    margin-left: auto !important;
    text-align: right !important;
    color: #274158 !important;
    font-weight: 600;
    text-decoration: none;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    white-space: nowrap;
}

/* ==========================================================================
   Quality Promise — restore original iHerb layout CSS (was only in
   iherb-header-footer.css which is not loaded on homepage).
   ========================================================================== */
.hp-quality-promise,
.hp-quality-promise-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e3ede2;
    padding: 8px 0;
    margin: 0 auto;
}
.hp-quality-promise .quality-promise-content,
.hp-quality-promise-footer .quality-promise-content {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1376px;
    padding: 0 16px;
    box-sizing: border-box;
}
.hp-quality-promise .quality-promise-title-area,
.hp-quality-promise-footer .quality-promise-title-area {
    margin-right: 16px;
    flex: 0 0 auto;
}
.hp-quality-promise .quality-promise-title-area .quality-promise-title-wrap,
.hp-quality-promise-footer .quality-promise-title-area .quality-promise-title-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.hp-quality-promise .quality-promise-title-area .quality-promise-title-wrap svg,
.hp-quality-promise-footer .quality-promise-title-area .quality-promise-title-wrap svg {
    flex-shrink: 0;
}
.hp-quality-promise .quality-promise-title-area .quality-promise-title,
.hp-quality-promise-footer .quality-promise-title-area .quality-promise-title {
    color: #0a6b3c;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    margin-left: 8px;
}
.hp-quality-promise .quality-promise-title-area .quality-promise-description,
.hp-quality-promise-footer .quality-promise-title-area .quality-promise-description {
    font-size: 16px;
    line-height: 24px;
    color: #181b1f;
}
.hp-quality-promise .quality-promise-title-area .quality-promise-description .quality-promise-learn-more,
.hp-quality-promise-footer .quality-promise-title-area .quality-promise-description .quality-promise-learn-more {
    color: #1558a6;
    cursor: pointer;
}
.hp-quality-promise .quality-promise-items,
.hp-quality-promise-footer .quality-promise-items {
    display: flex;
    align-items: center;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hp-quality-promise .quality-promise-items::-webkit-scrollbar,
.hp-quality-promise-footer .quality-promise-items::-webkit-scrollbar {
    display: none;
}
.hp-quality-promise .quality-promise-items .quality-promise-item,
.hp-quality-promise-footer .quality-promise-items .quality-promise-item {
    padding: 16px;
    border-radius: 12px;
    background-color: #fff;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 228px;
    min-height: 80px;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.hp-quality-promise .quality-promise-items .quality-promise-item:last-child,
.hp-quality-promise-footer .quality-promise-items .quality-promise-item:last-child {
    margin-right: 0;
}
.hp-quality-promise .quality-promise-items .quality-promise-item-icon,
.hp-quality-promise-footer .quality-promise-items .quality-promise-item-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
}
.hp-quality-promise .quality-promise-items .quality-promise-item-text,
.hp-quality-promise-footer .quality-promise-items .quality-promise-item-text {
    font-size: 16px;
    line-height: 24px;
    color: #181b1f;
}
.hp-quality-promise:not(:has(+ .hp-sign-in-prompt-container)) {
    margin-top: 24px;
}
@media (max-width: 1200px) {
    .hp-quality-promise .quality-promise-content,
    .quality-promise-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100%;
    }
    .quality-promise-items {
        width: 100%;
    }
    .quality-promise-title-area {
        margin-bottom: 16px;
        margin-right: 0;
    }
    .hp-quality-promise {
        padding: 8px 0;
    }
}

/* Desktop scroll: iHerb JS sets fixed header top:~48px (accessibility/stackable gap) */
.promo-message.accessibility {
    display: none !important;
}
.stackable-above,
.stackable-above-sticky,
.stackable-below,
.stackable-below-sticky,
#consent_blackbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Kill the ~48px top offset iHerb stackable JS applies on scroll */
.iherb-header.stackable-base,
.iherb-header.iherb-header-layout,
#universal-branded-header,
header.header-cc-pk .iherb-header {
    top: 0 !important;
}
@media (min-width: 992px) {
    .iherb-header.stackable-base.is-stuck,
    .iherb-header.stackable-base[style*="fixed"],
    .iherb-header.iherb-header-layout[style*="fixed"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1005 !important;
    }

    /* JS reserved 160px spacer (old accessibility bar) — real header ~112px */
    header.header-cc-pk {
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    header.header-cc-pk:has(.iherb-header.stackable-base) {
        min-height: 112px !important;
    }
    .stackable-below,
    .stackable-below-sticky,
    .stackable-above,
    .stackable-above-sticky {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Tighten gap between header and homepage slider */
    #iherb-homepage {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    #iherb-homepage .hp-bento-banners {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        padding-top: 8px !important;
    }

    /* Banner images fill slot immediately (kill 332px → scale CLS) */
    #iherb-homepage .hp-bento-slot,
    #iherb-homepage .hp-bento-slot-hero,
    #iherb-homepage .hp-bento-slot-tile {
        position: relative !important;
        overflow: hidden !important;
    }
    #iherb-homepage .hp-bento-slot-hero {
        min-height: 510px !important;
        height: 510px !important;
    }
    #iherb-homepage .hp-bento-slot-tile {
        min-height: 247px !important;
        height: 247px !important;
    }
    #iherb-homepage .hp-bento-slot > .cms-banner-wrapper,
    #iherb-homepage .hp-bento-slot > div,
    #iherb-homepage .hp-bento-banner .cms-banner-wrapper,
    #iherb-homepage .hp-bento-banner .cms-banner-wrapper-root-link,
    #iherb-homepage .hp-bento-banner .cms-text-banner,
    #iherb-homepage .hp-bento-banner .cms-banner-scaled-wrapper,
    #iherb-homepage .hp-bento-banner .cms-banner-scaled,
    #iherb-homepage .hp-bento-banner .cms-banner-container,
    #iherb-homepage .hp-bento-banner .cms-banner-wrapper-root {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #iherb-homepage .hp-bento-banner .cms-banner-wrapper-root {
        display: flex !important;
    }
    #iherb-homepage .hp-bento-banner .t3-bento-seo-img,
    #iherb-homepage .t3-bento-seo-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
    }
    #iherb-homepage .hp-bento-banners div[style*="transform"],
    #iherb-homepage .hp-bento-banners div[style*="scale"] {
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Shared bento helpers (safe on desktop + mobile) */
.t3-bento-bg {
    background-image: var(--banner-bg);
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    min-height: 200px;
    display: flex !important;
    align-items: flex-end;
    padding: 16px;
    width: 100%;
}
.t3-bento-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255,255,255,0.92);
    padding: 12px 14px;
    border-radius: 8px;
    max-width: 90%;
}
.t3-bento-title { font-size: 18px; font-weight: 700; color: #181b1f; line-height: 1.3; }
.t3-bento-sub { font-size: 14px; color: #333; line-height: 1.4; }
.hp-bento-banners a { text-decoration: none; }
#iherb-homepage { background: #fff; }
#store-landing-page { max-width: 1376px; margin: 0 auto; }
.iherb-header-logo img,
.iherb-header-logo .t3-site-logo {
    max-height: 36px;
    width: auto;
    height: 36px;
    aspect-ratio: 160 / 54;
    object-fit: contain;
}

/* Mobile menu */
.t3-mobile-menu {
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: none; visibility: hidden;
}
.t3-mobile-menu.is-open { pointer-events: auto; visibility: visible; }
.t3-mobile-menu__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0; transition: opacity 0.25s;
}
.t3-mobile-menu.is-open .t3-mobile-menu__overlay { opacity: 1; }
.t3-mobile-menu__panel {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: min(320px, 85vw); background: #fff;
    transform: translateX(-100%); transition: transform 0.25s;
    overflow-y: auto; box-shadow: 2px 0 16px rgba(0,0,0,0.15);
}
.t3-mobile-menu.is-open .t3-mobile-menu__panel { transform: translateX(0); }
.t3-mobile-menu__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #e8e8e8;
    font-size: 16px;
}
.t3-mobile-menu__head button {
    background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: #333;
}
.t3-mobile-menu__list { list-style: none; margin: 0; padding: 8px 0; }
.t3-mobile-menu__list li a {
    display: block; padding: 12px 20px; color: #181b1f;
    text-decoration: none; font-size: 15px; border-bottom: 1px solid #f0f0f0;
}
.t3-mobile-menu__list li a:hover { background: #f7f8f9; color: var(--primary-color, #458500); }

/* Bottom mobile bar */
.t3-bottom-bar {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; border-top: 1px solid #e8e8e8;
    z-index: 900; padding: 6px 0 env(safe-area-inset-bottom);
    justify-content: space-around; align-items: center;
}
.t3-bottom-bar__item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; color: #53575a; text-decoration: none;
    font-size: 10px; padding: 4px 8px; cursor: pointer;
}
.t3-bottom-bar__item i { font-size: 18px; }
.t3-bottom-bar__item:hover { color: var(--primary-color, #458500); }

@media (max-width: 768px) {
    .t3-bottom-bar { display: flex; }
    body { padding-bottom: 60px; }
    .sub-header-container-wrapper { display: none; }
}

/* Mobile search modal */
.t3-mobile-search {
    position: fixed; inset: 0; z-index: 10000;
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 60px;
}
.t3-mobile-search.active { display: flex; }
.t3-mobile-search .mobile-search-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
}
.t3-mobile-search .mobile-search-content {
    position: relative; z-index: 2; background: #fff;
    width: min(560px, 92vw); border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden;
}
.t3-mobile-search .mobile-search-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #eee;
}
.t3-mobile-search .mobile-search-header h3 { margin: 0; font-size: 18px; }
.t3-mobile-search .close-mobile-search {
    font-size: 28px; cursor: pointer; line-height: 1; color: #666;
}
.t3-mobile-search .mobile-search-body { padding: 16px 20px 20px; }
.t3-mobile-search .mobile-search-wrapper {
    display: flex; border: 2px solid var(--primary-color,#458500);
    border-radius: 999px; overflow: hidden;
}
.t3-mobile-search .mobile-search-wrapper input {
    flex: 1; border: none; padding: 12px 16px; font-size: 15px; outline: none;
}
.t3-mobile-search .mobile-search-wrapper button {
    background: var(--btn-color,#458500); border: none; color: #fff;
    padding: 0 18px; cursor: pointer;
}
.t3-search-list { list-style: none; margin: 12px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.t3-search-list li a {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 4px; border-bottom: 1px solid #f0f0f0;
    text-decoration: none; color: #181b1f; font-size: 14px;
}
.t3-search-list li a:hover { color: var(--primary-color,#458500); }
.t3-search-empty { text-align: center; color: #888; padding: 16px 0; margin: 0; }

/* Cart sidebar */
.t3-cart-sidebar {
    position: fixed; top: 0; right: -360px; width: min(360px, 90vw);
    height: 100%; background: #fff; z-index: 10001;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    transition: right 0.3s ease; display: flex; flex-direction: column;
}
.t3-cart-sidebar.open { right: 0; }
.t3-cart-sidebar .cart-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px; border-bottom: 1px solid #eee;
}
.t3-cart-sidebar .cart-header h3 { margin: 0; font-size: 18px; }
.t3-cart-sidebar .cart-header span { font-size: 28px; cursor: pointer; line-height: 1; }
.t3-cart-sidebar .cart-content { padding: 20px; flex: 1; overflow-y: auto; }
.t3-cart-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 10000; opacity: 0; visibility: hidden; transition: 0.3s;
}
.t3-cart-overlay.open { opacity: 1; visibility: visible; }

/* Layout wrapper */
.t3-layout { scroll-behavior: smooth; }
.t3-body { margin: 0; background: #fff; }
.t3-main-content { min-height: 70vh; contain: layout; }

@media (max-width: 768px) {
    .t3-bottom-bar { display: flex; }
    body.t3-body { padding-bottom: 62px; }
    .sub-header-container-wrapper { display: none; }
    .branded-header-end .iherb-header-search { flex: 1; }
}

/* Cart badge */
.iherb-header-cart-quantity:not(.cart-hide) {
    display: flex !important;
    align-items: center; justify-content: center;
    background: var(--btn-color, #458500);
    color: #fff; border-radius: 50%;
    min-width: 18px; height: 18px;
    font-size: 11px; font-weight: 700;
    position: absolute; top: -4px; right: -8px;
}
.iherb-header-cart { position: relative; }

/* Main content area — reserve space to cut CLS */
.t3-main-content { min-height: 70vh; background: #fff; }

/* Logo fallback */
.iherb-header-logo img,
.iherb-header-logo .t3-site-logo {
    max-height: 40px;
    width: auto;
    height: 40px;
    aspect-ratio: 160 / 54;
    object-fit: contain;
}

/* Promo pills scroll on mobile */
@media (max-width: 768px) {
    .universal-pills { display: flex; overflow-x: auto; gap: 8px; }
    .persistent-pill-using-only-bannertool { flex: 0 0 auto; white-space: nowrap; padding: 4px 12px; border-radius: 999px; }
}

/* ==========================================================================
   Mobile / tablet professional layout
   Theme CSS hardcodes min-width:751/768 — kill that everywhere.
   ========================================================================== */
@media (max-width: 991.98px) {
    html,
    body,
    body.t3-body,
    #universal-branded-header,
    .iherb-header,
    .iherb-header-layout,
    .iherb-header-primary,
    .branded-header,
    .branded-header-container,
    .header-container,
    .locale-banner-header,
    .stackable-above,
    .stackable-base,
    .container,
    .container-fluid,
    footer,
    footer .container-fluid,
    footer .iherb-header-layout,
    .footer-banner-container,
    .iherb-history-wrap,
    .footer-info-links,
    .bottom-container,
    #iherb-homepage,
    #store-landing-page,
    .home-carousel-container,
    .hp-modules,
    .hp-module-trending,
    .hp-bento-banners,
    .t3-pdp-page,
    .t3-main-content {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html,
    body {
        overflow-x: hidden !important;
    }

    .promo-message.accessibility {
        display: none !important;
    }

    .hp-modules {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hp-module-trending .container-fluid,
    .hp-module-trending .carousel-container,
    .hp-module-trending .row,
    .hp-module-trending .col-xs-24,
    .hp-module-trending .no-padding-x,
    .hp-module-trending .carousel,
    .hp-module-trending .t3-product-carousel {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    .hp-bento-banners {
        margin: 10px auto 16px !important;
        padding: 0 12px !important;
    }

    .hp-bento-banners .cms-banner-wrapper-root,
    .hp-bento-slot,
    .hp-bento-slot-hero,
    .hp-bento-slot-tile {
        min-width: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* Keep header in document flow (theme sets fixed and covers titles) */
    .iherb-header.stackable-base,
    .iherb-header.iherb-header-layout,
    #universal-branded-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1005 !important;
        height: auto !important;
    }

    /* Spacer leftover from old fixed-header JS — causes black gap */
    .stackable-below {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Compact branded header — kill iHerb green on container too */
    /* Header stays classic green; CTAs stay #274158 via .t3-action-btn rules */
    .iherb-header-primary.branded-header,
    .branded-header-v2,
    .iherb-header-primary.branded-header .branded-header-container.header-container:not(.sub-header-container),
    .branded-header-v2 .branded-header-container.header-container:not(.sub-header-container) {
        background: #458500 !important;
        background-color: #458500 !important;
    }

    .iherb-header-primary.branded-header .branded-header-container.header-container:not(.sub-header-container) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px 10px !important;
        padding: 10px 12px !important;
        margin: 0 !important;
    }

    /* Hide leftover iHerb promo pills (Creatine / Sport / Probiotics) */
    .locale-banner-header,
    .universal-pills,
    .persistent-pill-using-only-bannertool {
        display: none !important;
    }

    .branded-header-start {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 90px) !important;
    }

    .iherb-header-logo {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .iherb-header-logo a {
        display: inline-flex !important;
        align-items: center !important;
        max-width: 100% !important;
    }

    .iherb-header-logo .t3-site-logo {
        display: block !important;
        max-height: 40px !important;
        max-width: min(200px, 56vw) !important;
        width: auto !important;
        height: 40px !important;
        aspect-ratio: 160 / 54 !important;
        object-fit: contain !important;
        object-position: left center !important;
        background: #fff;
        border-radius: 10px;
        padding: 4px 8px;
        box-sizing: content-box !important;
    }

    .iherb-header-logo .t3-site-logo-fallback {
        display: none !important;
        color: #fff !important;
        font-size: 20px !important;
        font-weight: 800 !important;
    }

    .iherb-header-search .search-box button,
    .iherb-header-search .search-box .btn,
    .iherb-header-search button[type="submit"],
    .iherb-header-search .icon-search,
    .iherb-header-search svg {
        color: #458500 !important;
        fill: #458500 !important;
    }

    .iherb-header-search .search-box button svg,
    .iherb-header-search button[type="submit"] svg,
    .iherb-header-search .icon {
        fill: #458500 !important;
        color: #458500 !important;
    }

    .iherb-header-hamburger button {
        width: 40px !important;
        height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        color: #fff !important;
        padding: 0 !important;
    }

    .iherb-header-hamburger .icon {
        fill: #fff !important;
        color: #fff !important;
        width: 24px !important;
        height: 24px !important;
    }

    .branded-header-end {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px 8px !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .iherb-header-search {
        order: 20 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .iherb-header-search .search-box,
    .iherb-header-search form {
        width: 100% !important;
        max-width: 100% !important;
    }

    .iherb-header-search-input {
        width: 100% !important;
        height: 42px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        padding: 0 44px 0 14px !important;
    }

    .iherb-header-account,
    .iherb-header-cart {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .iherb-header-account .iherb-header-signed-out,
    .iherb-header-cart a {
        color: #fff !important;
        width: 40px !important;
        max-width: 40px !important;
        overflow: hidden !important;
    }

    .iherb-header-sign-in-container a span,
    .iherb-header-account-sign-in .sign-in-text,
    .iherb-header-account .username-my-account-container,
    .iherb-header-account .icon-caret-down,
    .iherb-header-signed-out::before,
    .icon-header_signed-out::before {
        display: none !important;
        content: none !important;
    }

    .iherb-header-account .t3-account-icon,
    .iherb-header-account .icon-user-account-v2 {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        fill: #fff !important;
        color: #fff !important;
    }

    /* Hide cluttered desktop locale controls on phone */
    .iherb-header-ccl {
        display: none !important;
    }

    .sub-header-container-wrapper,
    .sub-header-container {
        display: none !important;
    }

    /* Product sections */
    .hp-module-trending .title,
    .hp-module-trending h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        padding: 4px 0 10px !important;
    }

    .t3-product-carousel .product-inner {
        border-radius: 14px !important;
        box-shadow: 0 4px 14px rgba(24, 27, 31, 0.07) !important;
    }

    .t3-product-carousel .btn-add-to-cart,
    .t3-product-carousel .t3-action-btn {
        min-height: 40px !important;
        height: 40px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    /* Footer breathe */
    footer .container-fluid,
    .footer-info-links,
    .iherb-history-wrap {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .t3-pdp-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .t3-pdp-page .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .t3-pdp-page .product-summary-main {
        padding: 12px !important;
        flex-direction: column !important;
    }

    .t3-pdp-page .image-fixed,
    .t3-pdp-page .t3-pdp-main-copy {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
}

@media (max-width: 767.98px) {
    /* Header: one tight row (menu/logo/icons) + full-width search */
    .iherb-header-primary.branded-header,
    .branded-header-v2,
    .iherb-header-primary {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .branded-header-container.header-container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 12px 10px !important;
        gap: 8px !important;
    }

    .branded-header-end {
        display: contents !important;
    }

    .branded-header-start {
        order: 1 !important;
        flex: 1 1 auto !important;
        max-width: none !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .iherb-header-account {
        order: 2 !important;
        width: 40px !important;
        height: 40px !important;
        overflow: hidden !important;
    }

    .iherb-header-cart {
        order: 3 !important;
        width: 40px !important;
        height: 40px !important;
    }

    .iherb-header-search {
        order: 4 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .iherb-header-account .iherb-header-menu,
    .iherb-header-account .my-account-menu {
        display: none !important;
    }

    /* Kill iHerb banner scale transforms that explode mobile height.
       scaleWrapper injects unclassed divs with transform:scale(...) — must cover those too. */
    .hp-bento-banners .cms-banner-scaled-wrapper,
    .hp-bento-banners .cms-banner-scaled,
    .hp-bento-banners .cms-banner-container,
    .hp-bento-banners .cms-text-banner,
    .hp-bento-banners .cms-banner-wrapper,
    .hp-bento-banners .cms-banner-wrapper-root-link,
    .hp-bento-banners .cms-banner-scaled-wrapper > div,
    .hp-bento-banners .cms-banner-scaled > div,
    .hp-bento-banners div[style*="transform"],
    .hp-bento-banners div[style*="scale"],
    .hp-bento-banners div[style*="aspect-ratio"] {
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .hp-bento-banners {
        min-height: 0 !important;
        height: auto !important;
        margin: 8px auto 12px !important;
        padding: 0 12px !important;
    }

    .hp-bento-clip {
        overflow: hidden !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Stop next-slide grey edge peek */
    .hp-bento-grid {
        width: 100% !important;
        max-width: 100% !important;
    }
    .hp-bento-slot-hero {
        max-width: 100% !important;
    }

    .hp-bento-grid {
        display: block !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        grid-template-columns: none !important;
        transform: none !important;
    }

    .hp-bento-slot-hero {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important;
        list-style: none !important;
    }

    /* Extra iHerb promo tiles peek as black edges — hide on phone */
    .hp-bento-slot-tile {
        display: none !important;
    }

    .hp-bento-banners .cms-banner-wrapper-root {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        max-height: 52vh !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 14px !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .hp-bento-clip,
    .hp-bento-slot-hero,
    .hp-bento-banners {
        overflow: hidden !important;
    }

    .hp-bento-banners .t3-bento-seo-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 14px;
    }

    /* Text overlays are baked into banner art — hide duplicate HTML text on mobile */
    .hp-bento-banners .cms-banner-wrapper-root > .custom-flex-box {
        display: none !important;
    }

    .hp-bento-controls,
    .hp-bento-pagination,
    .hp-banner-left-arrow,
    .hp-banner-right-arrow,
    .hp-bento-banners [role="button"],
    .hp-bento-banners .icon-recentlyviewedarrowleft,
    .hp-bento-banners .icon-recentlyviewedarrowright,
    .hp-bento-banners .cms-banner-arrow,
    .hp-bento-banners .slick-arrow,
    .hp-bento-banners .slick-dots,
    .hp-bento-banners button,
    .hp-bento-clip > button,
    .hp-bento-clip > .hp-bento-controls {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Hide heavy iHerb dummy modules that look broken on mobile */
    #iherb-homepage .hp-banners-v2,
    #iherb-homepage .flash-deals-carousel-wrapper,
    #iherb-homepage .hp-sign-in-prompt-container,
    #iherb-homepage #hp-sign-in-prompt,
    #iherb-homepage .hp-quality-promise,
    #iherb-homepage .hp-quality-promise-container,
    #iherb-homepage .personalized-reorder > .hp-module:not(.hp-module-trending),
    .cms-banner-img[src*="cloudinary.images-iherb.com"],
    .cms-banner-img[src*="images-iherb.com"],
    footer .mobile-apps-container,
    footer .mobile-app-links,
    footer .qr-wrapper,
    footer .iherb-history-wrap,
    .footer-banner-container .cms-banner-img[src*="iherb"] {
        display: none !important;
    }

    /* Keep product section titles clear of sticky chrome */
    .hp-module-trending .title,
    .hp-module-trending h3 {
        scroll-margin-top: 8px !important;
    }

    .hp-modules {
        padding-top: 8px !important;
    }

    /* 2-column product feel on phone */
    .hp-module-trending .t3-product-carousel .product,
    .hp-module-trending .carousel .product {
        width: 48% !important;
        max-width: 48% !important;
        min-width: 148px !important;
        flex: 0 0 48% !important;
        box-sizing: border-box !important;
        padding: 0 4px !important;
    }

    .hp-module-trending .t3-product-carousel .carousel-inner,
    .hp-module-trending .carousel-inner,
    .hp-module-trending .products-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px !important;
    }

    .hp-module-trending .product {
        scroll-snap-align: start;
    }

    .hp-module-trending .carousel-control,
    .hp-module-trending .carousel-control-prev,
    .hp-module-trending .carousel-control-next,
    .hp-module-trending button[aria-label="Previous products"],
    .hp-module-trending button[aria-label="Next products"] {
        display: none !important;
    }

    .product .product-title,
    .t3-product-carousel .product-title {
        font-size: 13px !important;
        line-height: 1.35 !important;
        min-height: 2.7em;
    }

    .product .product-price .price,
    .t3-product-carousel .product-price .price {
        font-size: 14px !important;
    }

    .t3-bottom-bar {
        display: flex !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }

    body,
    body.t3-body {
        padding-bottom: 64px !important;
    }

    /* Quality promise: horizontal chips */
    .hp-quality-promise,
    .quality-promise-items {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .quality-promise-items {
        display: flex !important;
        overflow-x: auto !important;
        gap: 10px !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px !important;
    }

    .quality-promise-item {
        flex: 0 0 auto !important;
        min-width: 140px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hp-bento-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .hp-bento-slot,
    .hp-bento-slot-hero,
    .hp-bento-slot-tile {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .hp-bento-banners .cms-banner-wrapper-root {
        aspect-ratio: 16 / 10 !important;
        min-height: 180px !important;
        width: 100% !important;
        border-radius: 12px !important;
    }

    .iherb-header-search {
        flex: 1 1 auto !important;
        order: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    .branded-header-end {
        flex: 1 1 auto !important;
        width: auto !important;
        flex-wrap: nowrap !important;
    }
}