/* Shared customer experience. Loaded after page styles; icon typography stays independent. */
:root {
    --store-ink: #243345;
    --store-muted: #526174;
    --store-border: #dce3e9;
    --store-focus: var(--colorMain, CanvasText);
}
body { font-size: 16px; line-height: 1.85; color: var(--store-ink); }
body .mobile-search-container { display: none; }
html.store-search-open,
body.store-search-open { overflow: hidden !important; overscroll-behavior: none; }
body :focus-visible { outline: 3px solid var(--store-focus) !important; outline-offset: 3px; }
#store-content { scroll-margin-top: 180px; }
.store-skip-link { position: fixed; top: 8px; right: 16px; z-index: 100000; padding: 12px 20px; background: Canvas; color: var(--colorMain, CanvasText); border: 2px solid currentColor; border-radius: 12px; transform: translateY(-160%); }
.store-skip-link:focus { transform: none; }
button, input, select, textarea { font-family: inherit; }
body .store-icon-button { border: 0; background: transparent; color: inherit; min-width: 44px; min-height: 44px; }
body .mobile-search-open { width: 100%; border: 1px solid var(--store-border); text-align: start; font: inherit; }
body .dropdown-item { padding-block: 10px; min-height: 44px; font-size: 15px; }
body .form-control, body .form-select, body .search-input { font-size: 16px; min-height: 48px; border-color: var(--store-border); }
body.account-panel .form-control, body.checkout-page .form-control,
body.account-panel .form-select, body.checkout-page .form-select { font-size: 16px; min-height: 48px; }
body textarea.form-control { min-height: 120px; line-height: 1.9; }
body input::placeholder, body textarea::placeholder { color: var(--store-muted); opacity: 1; }
body .form-label, body .form-check-label, body .form-floating > label { font-size: 15px; }
body .form-floating > label, body.account-panel .form-floating > label { color: var(--store-muted); opacity: 1; }
body .form-check-label { padding-block: 6px; cursor: pointer; }
body .btn, body .outlined-link { min-height: 44px; font-size: 15px; line-height: 1.8; white-space: normal; }
body .invalid-feedback, body span.is-invalid, body label.error { font-size: 14px; line-height: 1.9; color: #b42318; }
body .text-muted { color: var(--store-muted) !important; }
body .font-10, body .font-11, body .font-12, body .font-13 { font-size: 14px !important; }
body .breadcrumb { font-size: 14px; line-height: 2; flex-wrap: wrap; }
body .breadcrumb a { display: inline-block; padding-block: 6px; }
body .box { border: 1px solid var(--store-border); border-radius: 18px; }
body .header-container { box-shadow: 0 4px 20px rgb(26 43 62 / 7%); }
body .search-input { border-radius: 14px; background: color-mix(in srgb, var(--colorMain, Canvas) 3%, Canvas); padding-inline-end: 54px; }
.search-action button { border: 0; background: transparent; color: var(--store-ink); width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; }
body .search-recommendation-item { border: 1px solid var(--store-border); min-height: 44px; padding: 7px 12px; font: inherit; background: Canvas; border-radius: 10px; }
body .search-results { max-height: min(65dvh, 540px); overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; }
body .h-product-item .title { font-size: 15px; line-height: 1.9; }
body .h-product-item .price { font-size: 15px; }
body .mobile-bottom-nav-item { font-size: 13px; min-height: 52px; }
body .mobile-bottom-nav-item.is-active { color: var(--colorMain, CanvasText); background: color-mix(in srgb, var(--colorMain, CanvasText) 8%, Canvas); border-radius: 12px; }
body .product-orders .items { flex-wrap: wrap; gap: 6px; }
body .product-orders .items a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; font-size: 14px; border-radius: 10px; }
body .product-orders .items a.active { background: color-mix(in srgb, var(--colorMain, CanvasText) 8%, Canvas); color: var(--colorMain, CanvasText); font-weight: 700; }
body .v-product-item { border-radius: 16px; }
body .v-product-item-content .title { font-size: 16px; font-weight: 500; line-height: 1.9; }
body.home-body .v-product-item-content .title { font-size: 16px; line-height: 1.9; min-height: 61px; max-height: none; font-weight: 500; }
body .v-product-item.mobile-horizontal .v-product-item-content .title { font-size: 16px !important; }
body .v-product-item-btn .d-none { display: inline !important; }
body .v-product-item-btn { height: auto; min-height: 44px; }
body .rich-content { font-size: 17px; line-height: 2.1; overflow-wrap: anywhere; }
body .rich-content img, body .rich-content video { max-width: 100%; height: auto; }
body .rich-content iframe { max-width: 100%; }
body .rich-content a { text-decoration: underline; text-underline-offset: 4px; }
body .post-title { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.8; }
body .post-details { flex-wrap: wrap; gap: 10px; }
body .payment-result-details > div { flex-wrap: wrap; font-size: 15px; }
body .payment-result-description, body .payment-result-help, body .payment-result-notice,
body .payment-result-links a, body .payment-result-details small { font-size: 15px; }
body .payment-result-links a { min-height: 44px; display: inline-flex; align-items: center; }
body.products-archive .archive-product-cell .v-product-item-content .title { max-height: none; min-height: 61px; font-size: 16px; line-height: 1.9; }
body .v-product-item:focus-within .v-product-item-footer { bottom: 0; visibility: visible; opacity: 1; }
body .product-main-title { font-size: clamp(22px, 2vw, 28px); line-height: 1.8; font-weight: 700; }
body .panel-page-heading h1, body .cart-heading h1, body .checkout-heading h1 { font-size: 26px; font-weight: 700; line-height: 1.8; }
body .panel-section-title, body .checkout-section-heading h2, body .cart-summary-heading h2 { font-size: 20px; font-weight: 700; }
body .panel-page-heading p, body .checkout-section-heading p, body .cart-summary-heading p,
body .panel-address-details, body .panel-order-meta, body .panel-tab-count,
body .checkout-address-meta, body .cart-summary-details, body .cart-summary-details small,
body .cart-summary-details .cart-shipping-hint { font-size: 14px; color: var(--store-muted); }
body.account-panel .sidebar-link-item, body .panel-tabs a { font-size: 15px; min-height: 44px; }
body.account-panel .panel-primary, body.account-panel .panel-secondary,
body .panel-delete-button, body .checkout-add-address, body .checkout-text-action { min-height: 44px; font-size: 15px; }
body .panel-status, body .checkout-default-badge { font-size: 13px; white-space: normal; }
body .panel-favorites-grid .btn-favorite-remove { color: #9f2929; font-size: 14px; min-height: 44px; }
body .panel-favorite-view { font-size: 14px; min-height: 44px; white-space: normal; }
body .panel-ticket-meta, body .panel-order-number small, body .panel-order-meta small { font-size: 14px; color: var(--store-muted); }
body.account-panel .overview-stat__content span, body.account-panel .overview-stat__content small,
body.account-panel .overview-shortcuts__list small, body .order-status-summary p,
body .product-stock-badge, body .product-trust-row { font-size: 14px; }
body.account-panel .overview-stat__content strong { font-size: 20px; font-weight: 700; }
body .panel-mobile-toolbar #openSidebar { position: static; width: auto; height: auto; min-height: 44px; padding: 8px 12px; gap: 8px; font-size: 15px; border: 1px solid var(--store-border); border-radius: 10px; }
body .cart-unit-price, body .cart-status, body .cart-reservation-note, body .cart-stock-warning,
body .cart-product-attributes, body .cart-line-price small { font-size: 14px; }
body.cart-page .cart-quantity-box { height: 48px; width: 142px; }
body.cart-page .cart-quantity-box button { width: 46px; height: 46px; }
body.cart-page .cart-quantity-box .quantity { width: 48px; font-size: 16px; }
body .panel-tabs-scroll { width: 44px; height: 44px; flex-basis: 44px; }
body .checkout-progress { flex-wrap: wrap; gap: 12px; }
body .checkout-progress li { font-size: 14px; }
body .checkout-address-card > input:focus-visible + span,
body .aiz-megabox > input:focus-visible ~ .aiz-megabox-elem { outline: 3px solid var(--store-focus) !important; outline-offset: 3px; }
body .signin-form .title { font-size: 26px; line-height: 1.8; }
body .signin-intro { font-size: 16px; color: var(--store-muted); }
body .pagination .page-link { min-width: 44px; min-height: 44px; display: grid; place-items: center; font-size: 15px; }
body .v-product-item-footer, body.home-body .v-product-item-footer { position: static; height: auto; min-height: 56px; visibility: visible; opacity: 1; box-shadow: none; flex-wrap: wrap; gap: 8px; padding: 8px; flex-shrink: 0; }
body.home-body .v-product-item-footer .btn { min-height: 44px; height: auto; }
@media (max-width: 575.98px) {
    body .custom-container { max-width: 100%; }
    body .panel-page-heading, body .checkout-heading { flex-wrap: wrap; gap: 12px; }
    body .panel-page-heading h1, body .cart-heading h1, body .checkout-heading h1 { font-size: 24px; }
    body .panel-address-actions, body .panel-order-top { flex-wrap: wrap; }
    body .panel-address-details > div { flex-wrap: wrap; gap: 4px 12px; }
    body.checkout-page .box.checkout-card { padding: 18px !important; }
    body .signin-form { padding-inline: 8px; }
    body .modal-dialog { margin: 12px; }
    body .modal-content { border-radius: 16px; }
    body .modal-body { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    body *, body *::before, body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Keep the mobile quick navigation calm and aligned: every action shares one row. */
@media (max-width: 991.98px) {
    .mobile-search-container {
        z-index: 1100;
        height: 100dvh;
        top: 0;
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        height: 74px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        padding: 6px;
        border-color: color-mix(in srgb, var(--colorMain, CanvasText) 12%, Canvas);
        border-radius: 20px;
        box-shadow: 0 8px 28px rgb(17 24 39 / 14%);
    }
    .mobile-bottom-nav-item {
        min-height: 60px;
        gap: 3px;
        padding: 5px 2px;
        border-radius: 14px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.35;
        white-space: nowrap;
    }
    .mobile-bottom-nav-item.is-active {
        position: relative;
        background: color-mix(in srgb, var(--colorMain, CanvasText) 8%, Canvas);
    }
    .mobile-bottom-nav-item.is-active:not(.mobile-bottom-nav-search)::after {
        content: '';
        position: absolute;
        right: 50%;
        bottom: 3px;
        width: 16px;
        height: 2px;
        margin-right: -8px;
        border-radius: 2px;
        background: var(--colorMain, CanvasText);
    }
    .mobile-bottom-nav-item.is-active .mobile-bottom-nav-icon::after { display: none; }
    .mobile-bottom-nav-search.is-active {
        background: transparent;
    }
    .mobile-bottom-nav-search.is-active::after { display: none; }
    .mobile-bottom-nav-icon {
        min-height: 23px;
        font-size: 20px;
    }
    .mobile-bottom-nav-search {
        overflow: visible;
        color: var(--colorMain, CanvasText);
        background: transparent;
    }
    .mobile-bottom-nav-search-bubble {
        width: 48px;
        height: 48px;
        margin-top: -24px;
        border: 4px solid Canvas;
        border-radius: 17px;
        color: var(--colorMainContrast, Canvas);
        background: linear-gradient(145deg, var(--colorMain, CanvasText), color-mix(in srgb, var(--colorMain, CanvasText) 76%, Canvas));
        box-shadow: 0 7px 19px color-mix(in srgb, var(--colorMain, CanvasText) 26%, transparent);
        font-size: 20px;
        transform: translateY(2px);
    }
    .mobile-bottom-nav-search-bubble i { transform: none; }
    .mobile-bottom-nav-search:active .mobile-bottom-nav-search-bubble { transform: translateY(2px) scale(.94); }
}

/* Storefront search: a clear, high contrast search surface on every theme. */
body .search-container {
    position: relative;
    isolation: isolate;
    width: min(100%, 560px);
    height: auto;
    min-height: 72px;
    margin-inline: auto;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--colorMain, #315c4b) 16%, var(--store-border));
    border-radius: 20px;
    background: Canvas;
    box-shadow: 0 12px 32px rgb(26 43 62 / 10%);
}
body .search-container .search-input {
    width: 100%;
    min-height: 58px;
    padding-inline: 20px 58px;
    border: 0;
    border-radius: 15px;
    background: color-mix(in srgb, var(--colorMain, #315c4b) 5%, Canvas);
    color: var(--store-ink);
    font-size: 17px;
    transition: background-color .2s ease, box-shadow .2s ease;
}
body .search-container .search-input:focus {
    border: 0;
    outline: 0;
    background: Canvas;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--colorMain, #315c4b) 54%, transparent), 0 0 0 4px color-mix(in srgb, var(--colorMain, #315c4b) 10%, transparent) !important;
}
body .search-container .search-input:focus-visible { outline: 0 !important; }
body .search-container .search-action { inset-inline-end: 10px; }
body .search-container .search-action button,
body .search-container .search-spinner {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: var(--colorMain, #315c4b);
}
body .search-container .search-action button:hover { background: color-mix(in srgb, var(--colorMain, #315c4b) 9%, Canvas); }
body .search-container .search-results {
    top: calc(100% + 10px);
    overflow: hidden;
    border: 1px solid var(--store-border);
    border-radius: 18px;
    background: Canvas;
    box-shadow: 0 20px 50px rgb(26 43 62 / 16%);
}
body .search-recommendation { padding: 16px; }
body .search-recommendation > span { color: var(--store-muted); font-size: 13px; font-weight: 600; }
body .search-recommendation-item { margin: 3px; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
body .search-recommendation-item:hover { border-color: color-mix(in srgb, var(--colorMain, #315c4b) 42%, var(--store-border)); background: color-mix(in srgb, var(--colorMain, #315c4b) 6%, Canvas); transform: translateY(-1px); }
body .search-result-items { display: grid; gap: 10px; padding: 8px; }
body .search-results .h-product-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 142px;
    padding: 14px 16px;
    border: 1px solid var(--store-border);
    border-radius: 16px;
    background: Canvas;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
body .search-results .h-product-item:hover {
    border-color: color-mix(in srgb, var(--colorMain, #315c4b) 35%, var(--store-border));
    background: color-mix(in srgb, var(--colorMain, #315c4b) 2%, Canvas);
    box-shadow: 0 6px 18px rgb(26 43 62 / 6%);
}
body .search-results .h-product-item-thumb {
    width: 112px;
    height: 112px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: Canvas;
}
body .search-results .h-product-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
body .search-results .h-product-item-content { min-width: 0; width: auto; }
body .search-results .h-product-item .title {
    display: -webkit-box;
    margin: 0 0 8px;
    overflow: hidden;
    color: var(--store-ink) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
body .search-results .h-product-item-content > .d-flex { align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
body .search-results .h-product-item .price { margin: 0 !important; color: var(--colorMain, #315c4b); font-size: 15px; font-weight: 700; line-height: 1.7; }
body .search-results .h-product-item .price.dash-on { order: 1; color: #7c828d; font-size: 13px; font-weight: 400; }
body .search-results .h-product-item .price.color-green { order: 2; color: var(--colorMain, #315c4b) !important; font-size: 17px; }
body .search-results .h-product-item .search-result-unit { display: block; margin-top: 2px; color: var(--store-muted); font-size: 12px; line-height: 1.6; }
body .search-results .search-result-discount {
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 32px;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--colorMain, #315c4b) 18%, var(--store-border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--colorMain, #315c4b) 8%, Canvas);
    color: var(--colorMain, #315c4b);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
body .search-more { min-height: 48px; margin: 8px; border-radius: 12px; background: color-mix(in srgb, var(--colorMain, #315c4b) 8%, Canvas); }

@media (min-width: 992px) {
    body .header-up .search-container:not(.is-focused) {
        width: min(540px, 38vw);
        height: 52px;
        min-height: 52px;
        padding: 4px;
        border-radius: 28px;
        box-shadow: none;
    }
    body .header-up .search-container:not(.is-focused) .search-input {
        min-height: 42px;
        padding-inline: 52px 18px;
        border-radius: 24px;
        background: color-mix(in srgb, var(--colorMain, #315c4b) 4%, Canvas);
        font-size: 15px;
    }
    body .header-up .search-container:not(.is-focused) .search-action {
        top: 50%;
        right: 8px;
        left: auto;
        height: 38px;
        transform: translateY(-50%);
    }
    body .header-up .search-container:not(.is-focused) .search-action button,
    body .header-up .search-container:not(.is-focused) .search-spinner {
        width: 38px;
        height: 38px;
    }
    body:has(.header-up .search-container.is-focused) .header-container { z-index: 1101; }
    body .header-up .search-container.is-focused {
        position: fixed;
        z-index: 1102;
        top: clamp(24px, 7vh, 72px);
        left: 50%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
        width: min(650px, calc(100vw - 48px));
        height: auto;
        max-height: min(82vh, 720px);
        margin: 0;
        padding: 12px 18px 18px;
        overflow-y: auto;
        border: 1px solid color-mix(in srgb, var(--colorMain, #315c4b) 10%, var(--store-border));
        border-radius: 28px;
        background: Canvas;
        box-shadow: 0 24px 70px rgb(16 24 32 / 24%);
        transform: translateX(-50%);
        animation: storefront-desktop-search-in .24s cubic-bezier(.22, 1, .36, 1) both;
    }
    body .header-up .search-container.is-focused .search-input {
        position: relative;
        inset: auto;
        flex: 0 0 54px;
        width: 100%;
        height: 54px;
        padding-inline: 52px 18px;
        border: 0;
        border-radius: 28px;
        background: color-mix(in srgb, var(--colorMain, #315c4b) 5%, Canvas);
        font-size: 16px;
    }
    body .header-up .search-container.is-focused .search-action {
        top: 18px;
        right: 24px;
        left: auto;
        height: 40px;
        line-height: 40px;
    }
    body .header-up .search-container.is-focused .search-action button,
    body .header-up .search-container.is-focused .search-spinner {
        width: 40px;
        height: 40px;
        color: var(--store-muted);
    }
    body .header-up .search-container.is-focused .search-results {
        position: static;
        top: auto;
        width: 100%;
        max-height: none;
        margin: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    body .header-up .search-container.is-focused .search-result-items { padding: 0; }
    body .header-up .search-container.is-focused .search-recommendation {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 6px 0 0;
        border: 0;
    }
    body .header-up .search-container.is-focused .search-recommendation > span {
        flex: 1 0 100%;
        margin: 0 0 2px !important;
        color: var(--store-ink);
        font-size: 15px;
        font-weight: 600;
    }
    body .header-up .search-container.is-focused .search-recommendation-item {
        min-height: 40px;
        margin: 0;
        padding: 6px 16px;
        border: 1px solid var(--store-border);
        border-radius: 22px;
        background: Canvas;
        color: var(--store-ink);
        font-size: 14px;
    }
}

@keyframes storefront-desktop-search-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 991.98px) {
    body:has(.mobile-search-container.open) .header-container { z-index: 1099; }
    body:has(.mobile-search-container.open)::before { display: none; }

    body .mobile-search-container {
        position: fixed;
        inset: 0;
        z-index: 1100;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        min-height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        padding: max(12px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
        background: Canvas;
        color: var(--store-ink);
        overscroll-behavior: contain;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: translateY(100%);
        transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .22s ease, visibility 0s linear .34s;
        will-change: transform;
    }
    body .mobile-search-container.open {
        inset: 0;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .22s ease, visibility 0s;
    }
    body .mobile-search-topbar {
        position: absolute;
        inset: 0;
        margin: 0;
    }
    body .mobile-search-container .close-search {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 48px;
        height: 52px;
        padding: 0;
        border: 0;
        border-radius: 26px;
        color: var(--store-ink);
        background: transparent;
        font-size: 21px;
    }
    body .mobile-search-container .search-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        min-height: 0;
        min-width: 0;
        margin: 0;
        margin-right: 58px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        display: block;
    }
    body .mobile-search-container .search-container .search-input {
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 52px;
        min-height: 52px;
        padding-inline: 50px 16px;
        border: 1px solid var(--store-border);
        border-radius: 24px;
        background: color-mix(in srgb, var(--colorMain, #315c4b) 3%, Canvas);
        font-size: 15px;
    }
    body .mobile-search-container .search-container .search-action {
        top: 6px;
        right: 7px;
        left: auto;
        height: 40px;
        transform: none;
    }
    body .mobile-search-container .search-action button,
    body .mobile-search-container .search-spinner {
        width: 38px;
        height: 38px;
        color: var(--store-muted);
    }
    body .mobile-search-container .search-results {
        position: absolute;
        top: 64px;
        right: 0;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 0;
        display: block !important;
        width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        overflow-y: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    body .mobile-search-container .search-result-items { padding: 0; }
    body .mobile-search-container .search-result-items { gap: 8px; }
    body .mobile-search-container .search-results .h-product-item {
        grid-template-columns: 82px minmax(0, 1fr);
        min-height: 112px;
        gap: 14px;
        padding: 12px;
        border-radius: 14px;
    }
    body .mobile-search-container .search-results .h-product-item-thumb { width: 82px; height: 82px; border-radius: 10px; }
    body .mobile-search-container .search-results .h-product-item .title { font-size: 15px; line-height: 1.7; }
    body .mobile-search-container .search-results .h-product-item .price { font-size: 14px; }
    body .mobile-search-container .search-results .h-product-item .price.dash-on { font-size: 12px; }
    body .mobile-search-container .search-results .h-product-item .price.color-green { font-size: 15px; }
    body .mobile-search-container .search-results .h-product-item .search-result-unit { margin-top: 1px; font-size: 11px; }
    body .mobile-search-container .search-results .search-result-discount { min-width: 36px; min-height: 28px; padding-inline: 8px; font-size: 12px; }
    body .mobile-search-container .search-recommendation {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 0;
        border: 0;
    }
    body .mobile-search-container .search-recommendation > span {
        flex: 1 0 100%;
        margin: 0 0 2px !important;
        color: var(--store-ink);
        font-size: 15px;
        font-weight: 600;
    }
    body .mobile-search-container .search-recommendation-item {
        min-height: 40px;
        margin: 0;
        padding: 6px 16px;
        border: 1px solid var(--store-border);
        border-radius: 22px;
        background: Canvas;
        color: var(--store-ink);
        font-size: 14px;
    }
    body .mobile-search-container .search-recommendation-item:hover {
        border-color: color-mix(in srgb, var(--colorMain, #315c4b) 34%, var(--store-border));
        background: color-mix(in srgb, var(--colorMain, #315c4b) 4%, Canvas);
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .search-container *, body .search-recommendation-item { transition-duration: .01ms !important; }
    body .mobile-search-container, body:has(.mobile-search-container.open)::before { animation: none !important; transition-duration: .01ms !important; }
}

@media (max-width: 380px) {
    .mobile-bottom-nav { right: 8px; left: 8px; padding: 5px 4px; }
    .mobile-bottom-nav-item { font-size: 11px; }
}

body .category-seo-content {
    padding: 26px 28px 54px;
    border: 1px solid color-mix(in srgb, var(--colorMain, CanvasText) 13%, Canvas);
    border-radius: 18px;
    background: color-mix(in srgb, var(--colorMain, CanvasText) 2.5%, Canvas);
    color: color-mix(in srgb, CanvasText 84%, Canvas);
    line-height: 2;
}
body .category-seo-content .category-seo-heading,
body .category-seo-content .category-seo-faq-heading {
    margin: 0 0 16px;
    color: CanvasText;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.8;
}
body .category-seo-content .category-seo-faq-heading { margin-top: 30px; }
body .category-seo-content .category-seo-copy { overflow-wrap: anywhere; }
body .category-seo-content .category-seo-copy h2,
body .category-seo-content .category-seo-copy h3,
body .category-seo-content .category-seo-copy h4,
body .category-seo-content .category-seo-copy h5,
body .category-seo-content .category-seo-copy h6 {
    margin: 24px 0 10px;
    color: CanvasText;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.9;
}
body .category-seo-content .category-seo-copy p { margin: 0 0 14px; }
body .category-seo-content .category-seo-copy ul,
body .category-seo-content .category-seo-copy ol { margin: 0 0 16px; padding-inline-start: 0; padding-inline-end: 24px; }
body .category-seo-content .category-seo-copy a { color: var(--colorMain, CanvasText); text-decoration: underline; text-underline-offset: 3px; }
body .category-seo-content.content-dropdown { max-height: 340px; }
body .category-seo-content.content-dropdown::before { background: linear-gradient(0deg, Canvas, color-mix(in srgb, Canvas 88%, transparent), transparent); }
body .category-seo-content .content-dropdown-toggle {
    width: min(220px, 100%);
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--colorMain, CanvasText) 22%, Canvas);
    border-radius: 12px;
    color: var(--colorMain, CanvasText);
    background: Canvas;
    font: inherit;
    font-size: 14px;
}
body .category-seo-content.open { padding-bottom: 20px; }
body .category-seo-content.open .content-dropdown-toggle { margin: 16px auto 0; }
@media (max-width: 575.98px) {
    body .category-seo-content { padding: 20px 17px 52px; border-radius: 15px; }
    body .category-seo-content .category-seo-heading,
    body .category-seo-content .category-seo-faq-heading { font-size: 19px; }
    body .category-seo-content .category-seo-copy h2,
    body .category-seo-content .category-seo-copy h3,
    body .category-seo-content .category-seo-copy h4,
    body .category-seo-content .category-seo-copy h5,
    body .category-seo-content .category-seo-copy h6 { font-size: 17px; }
}
/* Variant choices open in a focused dialog so compact product cards stay uncluttered. */
.product-variant-modal .modal-dialog { width: min(520px, calc(100% - 28px)); max-width: 520px; }
.product-variant-modal .modal-content { overflow: hidden; border: 1px solid color-mix(in srgb, var(--colorMain, CanvasText) 20%, Canvas); border-radius: 18px; background: Canvas; box-shadow: 0 22px 60px rgb(25 13 31 / 22%); }
.product-variant-modal .modal-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid color-mix(in srgb, CanvasText 10%, Canvas); }
.product-variant-modal-product { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.product-variant-modal-product img { width: 58px; height: 58px; flex: 0 0 58px; border: 1px solid color-mix(in srgb, CanvasText 10%, Canvas); border-radius: 12px; background: Canvas; object-fit: contain; }
.product-variant-modal-product > div { min-width: 0; }
.product-variant-modal-product .modal-title { display: -webkit-box; overflow: hidden; margin: 0; color: CanvasText; font-size: 16px; font-weight: 600; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-variant-modal-product p { margin: 2px 0 0; color: color-mix(in srgb, CanvasText 62%, Canvas); font-size: 13px; }
.product-variant-modal .btn-close { flex: 0 0 24px; margin: 0; }
.product-variant-modal .modal-body { display: grid; gap: 14px; padding: 20px; }
.product-variant-modal .product-card-variant-status { margin: 0; color: color-mix(in srgb, CanvasText 72%, Canvas); font-size: 14px; line-height: 1.8; }
.product-card-variant-options { display: grid; gap: 10px; }
.product-card-variant-skeleton { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.product-card-variant-skeleton-label, .product-card-variant-skeleton-choice { display: block; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, CanvasText 7%, Canvas) 25%, color-mix(in srgb, CanvasText 13%, Canvas) 50%, color-mix(in srgb, CanvasText 7%, Canvas) 75%); background-size: 200% 100%; animation: product-variant-skeleton-shimmer 1.25s ease-in-out infinite; }
.product-card-variant-skeleton-label { flex: 0 0 100%; width: 54px; height: 15px; }
.product-card-variant-skeleton-choice { width: 76px; height: 40px; border: 1px solid color-mix(in srgb, CanvasText 5%, Canvas); }
@keyframes product-variant-skeleton-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .product-card-variant-skeleton-label, .product-card-variant-skeleton-choice { animation: none; } }
.product-card-variant-group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.product-card-variant-label { flex: 0 0 100%; color: CanvasText; font-size: 13px; font-weight: 500; }
.product-card-variant-choice {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--colorMain, CanvasText) 24%, Canvas); border-radius: 9px;
    color: CanvasText; background: Canvas; font: inherit; font-size: 13px; cursor: pointer;
}
.product-card-variant-choice[aria-pressed="true"] { border-color: var(--colorMain, CanvasText); color: var(--colorMainContrast, Canvas); background: var(--colorMain, CanvasText); }
.product-card-variant-choice:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.product-card-variant-swatch { width: 13px; height: 13px; border: 1px solid #0002; border-radius: 50%; flex: 0 0 13px; }
.product-card-variant-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; border-radius: 10px; font-size: 14px; }
.product-card-variant-add:disabled { border-color: #e6e1e8 !important; color: #746b77 !important; background: #e6e1e8 !important; cursor: not-allowed; }
.product-variant-modal .modal-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid color-mix(in srgb, CanvasText 10%, Canvas); }
.product-variant-quantity { display: inline-flex; align-items: center; min-height: 46px; border: 1px solid color-mix(in srgb, var(--colorMain, CanvasText) 22%, Canvas); border-radius: 10px; overflow: hidden; }
.product-variant-quantity-button { display: grid; place-items: center; width: 38px; min-height: 44px; border: 0; color: var(--colorMain, CanvasText); background: color-mix(in srgb, var(--colorMain, CanvasText) 7%, Canvas); font: inherit; font-size: 20px; cursor: pointer; }
.product-variant-quantity-input { width: 42px; min-height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: Canvas; color: CanvasText; text-align: center; font: inherit; font-size: 14px; appearance: textfield; -moz-appearance: textfield; }
.product-variant-quantity-input::-webkit-inner-spin-button, .product-variant-quantity-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.product-variant-quantity-input:focus-visible { outline-offset: -3px !important; }
.product-variant-modal-add { font-family: inherit; font-weight: 600; }
@media (max-width: 575.98px) {
    .product-variant-modal .modal-dialog { width: calc(100% - 20px); margin: 10px auto; }
    .product-variant-modal .modal-header { padding: 14px; }
    .product-variant-modal .modal-body { padding: 16px 14px; }
    .product-variant-modal .modal-footer { gap: 8px; padding: 12px 14px 14px; }
    .product-variant-quantity-button { width: 32px; }
    .product-variant-quantity-input { width: 34px; font-size: 13px; }
    .product-variant-modal-product img { width: 50px; height: 50px; flex-basis: 50px; }
    .product-card-variant-choice { min-height: 40px; }
}

.product-variant-unit-select { grid-column: 1; width: 100%; min-height: 42px; font-size: 13px; }
.product-variant-modal .modal-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.product-variant-modal .product-card-variant-add { grid-column: 1 / -1; }
@media (max-width: 575.98px) {
    .product-variant-modal .modal-footer { grid-template-columns: minmax(0, 1fr) auto; }
    .product-variant-unit-select { grid-column: 1; }
    .product-variant-modal .product-card-variant-add { grid-column: 1 / -1; }
}

/* Compact, readable counting-unit cards for one to four package levels. */
.product-variant-unit-select[hidden] { display: none !important; }
.product-variant-modal .product-variant-unit-choices {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
    gap: 8px;
    width: 100%;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--colorMain, CanvasText) 12%, Canvas);
    border-radius: 15px;
    background: color-mix(in srgb, var(--colorMain, CanvasText) 3%, Canvas);
}
.product-variant-modal .product-variant-unit-choices.d-none { display: none !important; }
.product-variant-unit-choice {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 56px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, CanvasText 12%, Canvas);
    border-radius: 11px;
    color: CanvasText;
    background: Canvas;
    text-align: right;
    font: inherit;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.product-variant-unit-choice:hover { border-color: color-mix(in srgb, var(--colorMain, CanvasText) 42%, Canvas); transform: translateY(-1px); }
.product-variant-unit-choice[aria-pressed="true"] {
    border-color: var(--colorMain, CanvasText);
    background: color-mix(in srgb, var(--colorMain, CanvasText) 8%, Canvas);
    box-shadow: inset 0 0 0 1px var(--colorMain, CanvasText);
}
.product-variant-unit-name { overflow: hidden; color: CanvasText; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.product-variant-unit-detail { color: color-mix(in srgb, CanvasText 62%, Canvas); font-size: 12px; line-height: 1.5; }
.product-card-variant-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--colorMain, CanvasText) 12%, Canvas);
    border-radius: 12px;
    background: color-mix(in srgb, var(--colorMain, CanvasText) 3%, Canvas);
}
.product-card-variant-price > span { color: color-mix(in srgb, CanvasText 64%, Canvas); font-size: 13px; }
.product-card-variant-price > strong { color: var(--colorMain, CanvasText); font-size: 16px; font-weight: 600; text-align: left; }
@media (max-width: 575.98px) {
    .product-variant-modal .product-variant-unit-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 7px; }
    .product-variant-unit-choice { min-height: 54px; }
    .product-variant-unit-name { font-size: 14px; }
    .product-variant-unit-detail { font-size: 12px; }
    .product-card-variant-price { align-items: flex-start; flex-direction: column; gap: 2px; }
    .product-card-variant-price > strong { font-size: 16px; text-align: right; }
}

/* Keep every purchase field in a consistent skeleton state while variants load. */
.product-variant-modal .modal-content { position: relative; }
.product-variant-modal .modal-footer [hidden] { display: none !important; }
.product-variant-modal.is-loading .product-card-variant-status {
    position: relative;
    min-height: 18px;
    color: transparent !important;
}
.product-variant-modal.is-loading .product-card-variant-status::after {
    position: absolute;
    inset-inline-start: 0;
    top: 3px;
    width: min(48%, 220px);
    height: 13px;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, CanvasText 7%, Canvas) 25%, color-mix(in srgb, CanvasText 14%, Canvas) 50%, color-mix(in srgb, CanvasText 7%, Canvas) 75%);
    background-size: 200% 100%;
    animation: product-variant-skeleton-shimmer 1.25s ease-in-out infinite;
    content: "";
}
.product-variant-modal.is-loading .product-card-variant-price-content { visibility: hidden; }
.product-card-variant-price-skeleton { display: none; }
.product-variant-modal.is-loading .product-card-variant-price-skeleton {
    display: grid;
    gap: 9px;
    width: min(60%, 250px);
}
.product-card-variant-price-skeleton i,
.product-variant-skeleton-units i,
.product-variant-skeleton-actions i {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, color-mix(in srgb, CanvasText 7%, Canvas) 25%, color-mix(in srgb, CanvasText 14%, Canvas) 50%, color-mix(in srgb, CanvasText 7%, Canvas) 75%);
    background-size: 200% 100%;
    animation: product-variant-skeleton-shimmer 1.25s ease-in-out infinite;
}
.product-card-variant-price-skeleton i:first-child { width: 100%; height: 12px; }
.product-card-variant-price-skeleton i:last-child { width: 78%; height: 18px; }
.product-variant-modal.is-loading .product-variant-unit-choices,
.product-variant-modal.is-loading .product-variant-quantity,
.product-variant-modal.is-loading .product-variant-modal-add { display: none !important; }
.product-variant-modal.is-loading .product-variant-footer-skeleton {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    width: 100%;
}
.product-variant-skeleton-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.product-variant-skeleton-units i { height: 52px; border: 1px solid color-mix(in srgb, CanvasText 5%, Canvas); }
.product-variant-skeleton-actions { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; }
.product-variant-skeleton-actions i { height: 46px; border-radius: 11px; }
@media (max-width: 575.98px) {
    .product-variant-modal.is-loading .product-card-variant-status::after { width: 56%; }
    .product-variant-modal.is-loading .product-card-variant-price-skeleton { width: 68%; }
    .product-variant-skeleton-units { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .product-variant-skeleton-units i { height: 48px; }
    .product-variant-skeleton-actions { grid-template-columns: 118px minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-variant-modal.is-loading .product-card-variant-status::after,
    .product-card-variant-price-skeleton i,
    .product-variant-skeleton-units i,
    .product-variant-skeleton-actions i { animation: none; }
}

.product-card-variant-deal {
    display: grid;
    gap: 3px;
    padding: 8px 12px 2px;
    border-inline-start: 3px solid color-mix(in srgb, var(--colorMain, CanvasText) 24%, Canvas);
}
.product-card-variant-deal[hidden],
.product-variant-modal.is-loading .product-card-variant-deal { display: none !important; }
.product-card-variant-discount { color: #147a45; font-size: 13px; font-weight: 600; line-height: 1.7; }
.product-card-variant-saving { color: color-mix(in srgb, CanvasText 70%, Canvas); font-size: 13px; line-height: 1.7; }
@media (max-width: 575.98px) {
    .product-card-variant-deal { padding-inline: 9px; }
    .product-card-variant-discount, .product-card-variant-saving { font-size: 13px; }
}

.product-card-variant-price-skeleton i:nth-child(2) { width: 78%; height: 18px; }
.product-card-variant-price-skeleton i:nth-child(3) { width: 52%; height: 12px; }
.product-card-variant-price-skeleton i:nth-child(4) { width: 88%; height: 12px; }

/* Refined, compact price hierarchy: selected price, discount, then comparison. */
.product-card-variant-price {
    display: block;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, CanvasText 9%, Canvas);
    border-radius: 14px;
    background: color-mix(in srgb, CanvasText 2.5%, Canvas);
}
.product-card-variant-price-content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.product-card-variant-price-content > span {
    color: color-mix(in srgb, CanvasText 58%, Canvas);
    font-size: 13px;
    line-height: 1.7;
}
.product-card-variant-price-content > strong {
    color: var(--colorMain, CanvasText);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.product-card-variant-price-skeleton { margin-inline-start: auto; }
.product-card-variant-deal {
    margin-top: 10px;
    padding: 9px 0 0;
    border-top: 1px solid color-mix(in srgb, CanvasText 9%, Canvas);
    border-inline-start: 0;
}
.product-card-variant-discount {
    display: inline-flex;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 8px;
    color: #176b3a;
    background: #eaf6ee;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.65;
}
.product-card-variant-saving {
    position: relative;
    display: block;
    margin-top: 6px;
    padding-inline-start: 21px;
    color: color-mix(in srgb, CanvasText 72%, Canvas);
    font-size: 13px;
    line-height: 1.8;
}
.product-card-variant-saving::before {
    position: absolute;
    inset-inline-start: 1px;
    top: 0;
    color: #16834a;
    font-weight: 700;
    content: "✓";
}
@media (max-width: 575.98px) {
    .product-card-variant-price { padding: 12px; }
    .product-card-variant-price-content { align-items: flex-start; flex-direction: column; gap: 2px; }
    .product-card-variant-price-content > strong { font-size: 19px; text-align: right; }
    .product-card-variant-deal { margin-top: 8px; }
}

/* Keep variant purchase controls compact and price feedback aligned. */
.product-variant-modal .modal-footer { grid-template-columns: max-content minmax(0, 1fr); }
.product-variant-modal .product-variant-quantity { width: max-content; min-width: 120px; justify-self: start; flex: 0 0 auto; }
.product-variant-modal .product-variant-quantity-input { width: 42px; flex: 0 0 42px; }
.product-variant-modal .product-variant-unit-choices[hidden],
.product-variant-modal .product-variant-unit-choices.d-none { display: none !important; }
.product-card-variant-deal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.product-card-variant-discount[hidden],
.product-card-variant-saving[hidden] { display: none !important; }
.product-card-variant-saving { display: flex; align-items: flex-start; gap: 7px; padding-inline-start: 0; }
.product-card-variant-saving::before { position: static; flex: 0 0 auto; line-height: inherit; }
@media (max-width: 575.98px) {
  .product-variant-modal .modal-footer { grid-template-columns: max-content minmax(0, 1fr); }
  .product-variant-modal .product-variant-quantity { min-width: 112px; }
}