/* storefront-features.css — generated by deploy/build-storefront-features-css.sh (M3). Do not edit by hand. */

/* ===== image-loading.css ===== */
/* ============================================================
   Product image loading — lively brand skeleton + reveal
   Accent: #e62e04
   ============================================================ */

@keyframes aiz-img-shimmer {
    0% {
        background-position: 180% 40%;
    }
    100% {
        background-position: -80% 60%;
    }
}

@keyframes aiz-img-orbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes aiz-img-orbit-rev {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes aiz-img-bob {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-3px) scale(1.04);
        opacity: 1;
    }
}

@keyframes aiz-img-glow {
    0%,
    100% {
        box-shadow:
            0 0 0 0 rgba(230, 46, 4, 0.12),
            inset 0 0 20px rgba(255, 255, 255, 0.35);
    }
    50% {
        box-shadow:
            0 0 24px 2px rgba(230, 46, 4, 0.18),
            inset 0 0 28px rgba(255, 255, 255, 0.5);
    }
}

@keyframes aiz-img-fade-in {
    0% {
        opacity: 0;
        transform: scale(1.04) translateY(6px);
        filter: blur(4px);
    }
    60% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

:root {
    --aiz-skel-base: #eef0f4;
    --aiz-skel-mid: #f6f7f9;
    --aiz-skel-shine: #ffffff;
    --aiz-skel-tint: rgba(230, 46, 4, 0.08);
    --aiz-skel-ring: rgba(230, 46, 4, 0.55);
    --aiz-skel-ring-soft: rgba(230, 46, 4, 0.18);
    --aiz-skel-core: #e62e04;
}

[data-theme="dark"] {
    --aiz-skel-base: #1f1f2a;
    --aiz-skel-mid: #282834;
    --aiz-skel-shine: #343444;
    --aiz-skel-tint: rgba(248, 113, 113, 0.12);
    --aiz-skel-ring: rgba(248, 113, 113, 0.65);
    --aiz-skel-ring-soft: rgba(248, 113, 113, 0.22);
    --aiz-skel-core: #f87171;
}

/* Soft animated surface */
.aiz-card-box .position-relative.img-fit,
.aiz-card-box .image-hover-effect,
.image-hover-effect,
.trend-card__media,
.shop-cat__media,
.carousel-box .aiz-card-box .position-relative,
.pdp-gallery__main,
.pdp-gallery__stage,
.pdp-gallery__thumb,
.co-summary__thumb,
.co-cart__thumb,
.cart-added__thumb,
.to-product__thumb,
.aiz-img-skel {
    position: relative;
    background-color: var(--aiz-skel-base);
    background-image:
        radial-gradient(circle at 30% 35%, var(--aiz-skel-tint), transparent 45%),
        radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.55), transparent 42%),
        linear-gradient(
            120deg,
            var(--aiz-skel-base) 0%,
            var(--aiz-skel-mid) 35%,
            var(--aiz-skel-shine) 50%,
            var(--aiz-skel-tint) 55%,
            var(--aiz-skel-mid) 70%,
            var(--aiz-skel-base) 100%
        );
    background-size: 100% 100%, 100% 100%, 260% 260%;
    overflow: hidden;
}

.aiz-card-box .position-relative.img-fit:not(.is-img-ready),
.aiz-card-box .image-hover-effect:not(.is-img-ready),
.image-hover-effect:not(.is-img-ready),
.trend-card__media:not(.is-img-ready),
.shop-cat__media:not(.is-img-ready),
.aiz-img-skel:not(.is-img-ready),
.pdp-gallery__main:not(.is-img-ready),
.pdp-gallery__stage:not(.is-img-ready),
.pdp-gallery__thumb:not(.is-img-ready),
.co-summary__thumb:not(.is-img-ready),
.co-cart__thumb:not(.is-img-ready),
.cart-added__thumb:not(.is-img-ready),
.to-product__thumb:not(.is-img-ready) {
    animation:
        aiz-img-shimmer 2.2s ease-in-out infinite,
        aiz-img-glow 2.4s ease-in-out infinite;
}

/* Outer orbit ring */
.aiz-card-box .position-relative.img-fit:not(.is-img-ready)::before,
.image-hover-effect:not(.is-img-ready)::before,
.trend-card__media:not(.is-img-ready)::before,
.aiz-img-skel:not(.is-img-ready)::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--aiz-skel-ring);
    border-right-color: var(--aiz-skel-ring-soft);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 3;
    animation: aiz-img-orbit 0.95s linear infinite;
}

/* Inner core + reverse orbit */
.aiz-card-box .position-relative.img-fit:not(.is-img-ready)::after,
.image-hover-effect:not(.is-img-ready)::after,
.trend-card__media:not(.is-img-ready)::after,
.aiz-img-skel:not(.is-img-ready)::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: var(--aiz-skel-ring);
    border-left-color: var(--aiz-skel-ring-soft);
    background:
        radial-gradient(circle at center, var(--aiz-skel-core) 0 3px, transparent 3.5px);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 3;
    animation:
        aiz-img-orbit-rev 1.35s linear infinite,
        aiz-img-bob 1.6s ease-in-out infinite;
}

/* Tiny thumbs: smaller loader */
.pdp-gallery__thumb:not(.is-img-ready)::before,
.co-summary__thumb:not(.is-img-ready)::before,
.co-cart__thumb:not(.is-img-ready)::before,
.cart-added__thumb:not(.is-img-ready)::before,
.to-product__thumb:not(.is-img-ready)::before {
    width: 28px;
    height: 28px;
}

.pdp-gallery__thumb:not(.is-img-ready)::after,
.co-summary__thumb:not(.is-img-ready)::after,
.co-cart__thumb:not(.is-img-ready)::after,
.cart-added__thumb:not(.is-img-ready)::after,
.to-product__thumb:not(.is-img-ready)::after {
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at center, var(--aiz-skel-core) 0 2px, transparent 2.5px);
}

/* Hide placeholder flash; reveal with motion */
img.lazyload:not(.lazyloaded):not(.product-hover-image),
img.lazyloading:not(.product-hover-image),
img.aiz-img-pending:not(.product-hover-image):not(.is-loaded),
img.product-main-image.aiz-img-pending:not(.is-loaded) {
    opacity: 0 !important;
}

img.lazyloaded:not(.product-hover-image),
img.aiz-img-pending.is-loaded:not(.product-hover-image),
img.product-main-image.is-loaded {
    opacity: 1;
    animation: aiz-img-fade-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-hover-image.lazyload,
.product-hover-image.lazyloading,
.product-hover-image.lazyloaded,
.product-hover-image.aiz-img-pending,
.product-hover-image.is-loaded {
    animation: none !important;
}

img[src*="placeholder.jpg"],
img[src*="placeholder-rect.jpg"],
img[data-src][src*="placeholder"] {
    object-fit: cover;
    filter: none;
}

.is-img-ready {
    animation: none !important;
    background-image: none !important;
    background-color: transparent;
    box-shadow: none !important;
}

.is-img-ready::before,
.is-img-ready::after {
    display: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .aiz-card-box .position-relative.img-fit:not(.is-img-ready),
    .image-hover-effect:not(.is-img-ready),
    .trend-card__media:not(.is-img-ready),
    .aiz-img-skel:not(.is-img-ready),
    .aiz-card-box .position-relative.img-fit:not(.is-img-ready)::before,
    .image-hover-effect:not(.is-img-ready)::before,
    .trend-card__media:not(.is-img-ready)::before,
    .aiz-img-skel:not(.is-img-ready)::before,
    .aiz-card-box .position-relative.img-fit:not(.is-img-ready)::after,
    .image-hover-effect:not(.is-img-ready)::after,
    .trend-card__media:not(.is-img-ready)::after,
    .aiz-img-skel:not(.is-img-ready)::after {
        animation: none !important;
    }

    img.lazyloaded:not(.product-hover-image),
    img.aiz-img-pending.is-loaded:not(.product-hover-image),
    img.product-main-image.is-loaded {
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

/* ===== mobile-drawer.css ===== */
/* ============================================================
   Mobile top menu drawer — matches login / checkout polish
   Scoped under .mob-drawer (.aiz-top-menu-sidebar)
   ============================================================ */

.mob-drawer {
    font-family: 'Hind Siliguri', sans-serif;
    /* Above checkout sticky Place Order (1040) + mobile bottom nav (1030) */
    z-index: 1060 !important;
}

.mob-drawer .overlay {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(2px);
    z-index: 1060;
}

.mob-drawer .collapse-sidebar {
    width: min(340px, 88vw) !important;
    max-width: min(340px, 88vw) !important;
    background: #fff !important;
    box-shadow: 8px 0 40px rgba(15, 23, 42, 0.12);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    z-index: 1061;
}

.mob-drawer.active .collapse-sidebar {
    transform: translate(0, 0) !important;
}

.mob-drawer__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 24px;
}

/* Header */
.mob-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f2;
    flex-shrink: 0;
}

.mob-drawer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none !important;
    color: #0f172a !important;
}

.mob-drawer__brand img {
    max-height: 28px;
    max-width: 110px;
    object-fit: contain;
}

.mob-drawer__brand-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.mob-drawer__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mob-drawer__close:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.mob-drawer__close i {
    font-size: 18px;
    line-height: 1;
}

/* Auth / user card */
.mob-drawer__user {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    background: #f8fafc;
}

.mob-drawer__user-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mob-drawer__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mob-drawer__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mob-drawer__avatar svg {
    display: block;
}

.mob-drawer__user-meta {
    min-width: 0;
    flex: 1 1 auto;
}

.mob-drawer__user-label {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.mob-drawer__user-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mob-drawer__auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.mob-drawer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mob-drawer__btn--ghost {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #0f172a !important;
}

.mob-drawer__btn--ghost:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.mob-drawer__btn--primary {
    border: 1px solid var(--primary, #d43533);
    background: var(--primary, #d43533);
    color: #fff !important;
}

.mob-drawer__btn--primary:hover {
    opacity: 0.92;
}

/* Navigation */
.mob-drawer__section-label {
    margin: 18px 0 8px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.mob-drawer__nav {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.mob-drawer__nav-item {
    margin: 0 0 4px;
}

.mob-drawer__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none !important;
    color: #0f172a !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: background 0.15s ease, color 0.15s ease;
}

.mob-drawer__link:hover {
    background: #f8fafc;
}

.mob-drawer__link.active {
    background: color-mix(in srgb, var(--primary, #d43533) 8%, #fff);
    color: var(--primary, #d43533) !important;
}

.mob-drawer__link-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.mob-drawer__link.active .mob-drawer__link-icon {
    background: color-mix(in srgb, var(--primary, #d43533) 14%, #fff);
    color: var(--primary, #d43533);
}

.mob-drawer__link-text {
    flex: 1 1 auto;
    min-width: 0;
}

.mob-drawer__link-arrow {
    flex-shrink: 0;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1;
}

.mob-drawer__link.active .mob-drawer__link-arrow {
    color: color-mix(in srgb, var(--primary, #d43533) 55%, #cbd5e1);
}

.mob-drawer__divider {
    height: 1px;
    background: #eef0f2;
    margin: 12px 0;
    border: 0;
}

.mob-drawer__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff5f5;
    color: #dc2626 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.15s ease;
}

.mob-drawer__logout:hover {
    background: #fee2e2;
}

/* Hide legacy drawer chrome */
.mob-drawer .hide-top-menu-bar:not(.mob-drawer__close) {
    display: none !important;
}

.mob-drawer > .collapse-sidebar > hr,
.mob-drawer .nav-user-info,
.mob-drawer ul.mb-0.pl-3 {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .mob-drawer .collapse-sidebar {
        transition: none !important;
    }
}

/* Checkout sticky chrome must not sit above the open menu */
body:has(.mob-drawer.active) .co-footer,
body:has(.aiz-top-menu-sidebar.active) .co-footer {
    z-index: 1020 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body:has(.mob-drawer.active) .mob-nav,
body:has(.aiz-top-menu-sidebar.active) .mob-nav {
    z-index: 1020 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ===== mobile-bottom-nav.css ===== */
/* ============================================================
   Mobile bottom nav — matches login / checkout polish
   Scoped under .mob-nav (.aiz-mobile-bottom-nav)
   Desktop (≥1200px): hidden via d-xl-none
   ============================================================ */

@media (max-width: 1199.98px) {
    body:has(.mob-nav) {
        --mob-nav-bar: 58px;
        --mob-nav-total: calc(var(--mob-nav-bar) + env(safe-area-inset-bottom, 0px));
        padding-bottom: var(--mob-nav-total);
    }
}

.mob-nav {
    --mob-nav-accent: var(--primary, #e62e04);
    --mob-nav-ink: #0f172a;
    --mob-nav-muted: #94a3b8;
    --mob-nav-line: rgba(15, 23, 42, 0.08);
    --mob-nav-bar: 58px;
    --mob-nav-total: calc(var(--mob-nav-bar) + env(safe-area-inset-bottom, 0px));
    z-index: 1030 !important;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;
    border: 0 !important;
    height: auto !important;
    min-height: var(--mob-nav-total);
    background: #fff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none !important;
    border-top: 1px solid var(--mob-nav-line) !important;
    font-family: 'Hind Siliguri', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.mob-nav__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    min-height: var(--mob-nav-bar);
    padding: 4px 6px env(safe-area-inset-bottom, 0px);
    max-width: 100%;
    margin: 0 auto;
}

.mob-nav__item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px 8px;
    border-radius: 12px;
    text-decoration: none !important;
    color: var(--mob-nav-muted) !important;
    transition: color 0.18s ease, background 0.18s ease;
}

.mob-nav__item:hover,
.mob-nav__item:focus {
    color: var(--mob-nav-ink) !important;
    text-decoration: none !important;
}

.mob-nav__item--active,
.mob-nav__item.svg-active {
    color: var(--mob-nav-accent) !important;
    background: rgba(230, 46, 4, 0.07);
}

.mob-nav__item--active .mob-nav__label,
.mob-nav__item.svg-active .mob-nav__label {
    color: var(--mob-nav-accent) !important;
    font-weight: 700;
}

.mob-nav__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.mob-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 0;
}

.mob-nav__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.mob-nav__icon svg *,
.mob-nav__item.svg-active svg * {
    fill: currentColor !important;
    transition: fill 0.18s ease;
}

.mob-nav__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #e5e7eb;
}

.mob-nav__item--active .mob-nav__avatar,
.mob-nav__item.svg-active .mob-nav__avatar {
    border-color: var(--mob-nav-accent);
}

.mob-nav__label {
    display: block;
    max-width: 100%;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.mob-nav__badge {
    position: absolute;
    top: -2px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mob-nav-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.mob-nav__badge.cart-count.d-none {
    display: none !important;
}

.mob-nav__badge--dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    top: 0;
    right: -2px;
    line-height: 8px;
}

/* Cart — slightly emphasized */
.mob-nav__item--cart {
    flex: 1.05 1 0;
}

.mob-nav__item--cart.mob-nav__item--active,
.mob-nav__item--cart.svg-active {
    background: rgba(230, 46, 4, 0.09);
}

/* Hide behind modals / overlays */
body.modal-open .mob-nav {
    z-index: 1025 !important;
}

/* Checkout sticky footer sits above mobile nav — mobile/tablet ONLY */
@media (max-width: 1199.98px) {
    body:has(.co-footer) .mob-nav {
        z-index: 1025 !important;
    }

    body:has(.co-footer) .co-footer {
        bottom: var(--mob-nav-total, 58px);
        z-index: 1040;
    }
}

@media (min-width: 1200px) {
    body:has(.co-footer) .co-footer {
        bottom: 0 !important;
    }
}

/* ---- Tablet: floating pill (576–1199) ---- */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .mob-nav {
        left: 50% !important;
        right: auto !important;
        width: min(480px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px);
        transform: translateX(-50%);
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        border-radius: 20px !important;
        border: 1px solid var(--mob-nav-line) !important;
        border-top: 1px solid var(--mob-nav-line) !important;
        box-shadow: none !important;
    }

    .mob-nav__inner {
        padding: 6px 10px max(6px, env(safe-area-inset-bottom, 0px));
    }

    body:has(.mob-nav) {
        padding-bottom: calc(var(--mob-nav-total) + 12px);
    }

    body:has(.co-footer) .co-footer {
        bottom: calc(var(--mob-nav-total, 58px) + 12px);
    }
}

/* ---- Phone (≤575) ---- */
@media (max-width: 575.98px) {
    .mob-nav {
        bottom: 0;
        border-radius: 0 !important;
    }

    .mob-nav__inner {
        padding-left: 4px;
        padding-right: 4px;
    }

    .mob-nav__item {
        padding-left: 2px;
        padding-right: 2px;
        border-radius: 10px;
    }

    .mob-nav__label {
        font-size: 9px;
    }

    /* 5 items when logged in */
    .mob-nav__inner--dense .mob-nav__item {
        max-width: none;
    }

    .mob-nav__inner--dense .mob-nav__label {
        font-size: 8.5px;
    }
}

@media (max-width: 379.98px) {
    .mob-nav__icon svg {
        width: 18px;
        height: 18px;
    }

    .mob-nav__label {
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mob-nav__item {
        transition: none;
    }
}

/* ===== side-rail.css ===== */
/* ============================================================
   Category side rail — editorial icon rows (modern / minimal)
   ============================================================ */

:root {
    --side-rail-width: 260px;
}

.side-rail,
.aiz-category-menu.side-rail {
    --sr-ink: #111827;
    --sr-muted: #6b7280;
    --sr-line: #ececec;
    --sr-soft: #f8f9fa;
    --sr-primary: var(--primary, #d43533);
    width: var(--side-rail-width) !important;
    min-width: var(--side-rail-width);
    border: 1px solid var(--sr-line) !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
    height: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

/* ---- Header ---- */
.side-rail__head {
    flex-shrink: 0;
    padding: 14px 14px 8px;
    border-bottom: 0;
}

.side-rail__eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sr-ink);
    line-height: 1.3;
}

/* ---- Nav + icon row list ---- */
.side-rail__nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 10px 12px;
    gap: 8px;
}

.side-rail__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.side-rail__cell {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0 !important;
    position: relative;
    min-width: 0;
}

.side-rail__cell + .side-rail__cell {
    border-top: 0 !important;
}

.side-rail .category-nav-element {
    border: 0 !important;
}

.side-rail__row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px !important;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    text-decoration: none !important;
    color: var(--sr-ink) !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.side-rail__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--sr-soft);
}

.side-rail__icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 999px;
}

.side-rail__icon-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 13px;
    font-weight: 700;
    color: var(--sr-primary);
    background: rgba(212, 53, 51, 0.08);
    border-radius: 999px;
}

.side-rail__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-rail__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--sr-muted);
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.side-rail__arrow svg {
    display: block;
}

.side-rail__row:hover,
.side-rail__cell:hover > .side-rail__row,
.aiz-category-menu .category-nav-element:hover > .side-rail__row {
    background: var(--sr-soft) !important;
    border-color: rgba(17, 24, 39, 0.06) !important;
    color: var(--sr-ink) !important;
    position: relative;
    z-index: 2;
}

.side-rail__row:hover .side-rail__arrow,
.side-rail__cell:hover > .side-rail__row .side-rail__arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--sr-primary);
}

/* ---- Footer utils ---- */
.side-rail__foot {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
}

.side-rail__foot-link {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--sr-line);
    background: #fff;
    color: var(--sr-ink) !important;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.side-rail__foot-link:hover {
    background: var(--sr-soft);
    border-color: #ddd;
    color: var(--sr-ink) !important;
}

/* ---- Subcategory flyout ---- */
.side-rail .cat-image,
.side-rail img.cat-image {
    display: none !important;
}

.side-rail .cat-name {
    color: inherit !important;
}

.home-banner-area > .container > .d-flex > .position-static {
    display: flex;
    align-self: stretch;
}

.home-banner-area .side-rail,
.home-banner-area .aiz-category-menu.side-rail {
    width: var(--side-rail-width) !important;
    min-width: var(--side-rail-width);
    height: 100% !important;
}

.home-banner-area .side-rail__nav {
    height: 100%;
}

.home-banner-area .aiz-category-menu .sub-cat-menu {
    width: calc(100% - var(--side-rail-width) - 12px);
    left: calc(var(--side-rail-width) + 12px);
    top: 0;
    height: 100%;
    border-radius: 16px;
    border: 1px solid var(--sr-line) !important;
    background: #fff;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}

.aiz-category-menu.side-rail .sub-cat-menu {
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.aiz-category-menu.side-rail .category-nav-element:hover .sub-cat-menu,
.aiz-category-menu.side-rail .side-rail__cell:hover .sub-cat-menu {
    z-index: 9;
    opacity: 1;
}

/* Override legacy list link styles */
.aiz-category-menu.side-rail .category-nav-element > a {
    padding: 0 !important;
}

.aiz-category-menu.side-rail .category-nav-element:hover > a {
    background: transparent !important;
}

.aiz-category-menu.side-rail .category-nav-element:hover > a .cat-name {
    margin-left: 0 !important;
}

.aiz-category-menu.side-rail .category-nav-element:hover > a:not(.side-rail__row) {
    background: var(--soft-secondary-base, #f3f4f6) !important;
}

/* ---- Header dropdown variant ---- */
.hover-category-menu .side-rail,
#click-category-menu .side-rail,
.side-rail--dropdown {
    width: 300px !important;
    min-width: 300px;
    border-radius: 16px !important;
}

.hover-category-menu .side-rail__nav,
#click-category-menu .side-rail__nav,
.side-rail--dropdown .side-rail__nav {
    min-height: 0;
    max-height: min(70vh, 520px);
}

.hover-category-menu .side-rail__list,
#click-category-menu .side-rail__list,
.side-rail--dropdown .side-rail__list {
    max-height: min(58vh, 440px);
}

@media (prefers-reduced-motion: reduce) {
    .side-rail__row,
    .side-rail__arrow {
        transition: none;
    }
}

/* ===== add-to-cart-motion.css ===== */
/* ============================================================
   Premium Add to Cart — motion + button states
   ============================================================ */

:root {
    --atc-ink: #0f172a;
    --atc-accent: var(--primary, #e62e04);
    --atc-ok: #059669;
    --atc-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --atc-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* ---- PDP primary ATC button ---- */
.pdp-details-ref .add-to-cart.atc-btn,
.atc-btn.add-to-cart,
#added_to_cart_btn.atc-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 10px;
    min-height: 52px;
    will-change: transform;
}

.atc-btn__icon,
.atc-btn__label,
.atc-btn__check,
.atc-btn__spinner {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 0.22s ease,
        transform 0.28s var(--atc-ease);
}

.atc-btn__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.atc-btn__icon svg {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform 0.22s var(--atc-ease);
}

.atc-btn__label {
    font-weight: inherit;
    letter-spacing: inherit;
}

.atc-btn__check,
.atc-btn__spinner {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.86);
}

.atc-btn__check svg {
    width: 22px;
    height: 22px;
}

.atc-btn__spinner {
    width: 18px;
    height: 18px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
}

/* Idle hover — subtle lift, icon nudge */
@media (hover: hover) and (pointer: fine) {
    .pdp-details-ref .add-to-cart.atc-btn:hover:not(:disabled):not(.is-adding):not(.is-added),
    #added_to_cart_btn.atc-btn:hover:not(:disabled):not(.is-adding):not(.is-added) {
        transform: translateY(-2px);
    }

    .pdp-details-ref .add-to-cart.atc-btn:hover:not(:disabled):not(.is-adding):not(.is-added) .atc-btn__icon svg,
    #added_to_cart_btn.atc-btn:hover:not(:disabled):not(.is-adding):not(.is-added) .atc-btn__icon svg {
        transform: translateX(2px) rotate(-6deg);
    }
}

/* Pressed */
.pdp-details-ref .add-to-cart.atc-btn:active:not(:disabled),
#added_to_cart_btn.atc-btn:active:not(:disabled),
.atc-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
}

/* Focus */
.atc-btn:focus-visible,
#added_to_cart_btn.atc-btn:focus-visible {
    outline: 2px solid var(--atc-accent);
    outline-offset: 3px;
}

/* Loading */
.atc-btn.is-adding,
#added_to_cart_btn.is-adding,
.add-to-cart.is-adding {
    pointer-events: none;
    cursor: wait;
}

.atc-btn.is-adding .atc-btn__icon,
.atc-btn.is-adding .atc-btn__label,
.atc-btn.is-adding .atc-btn__check {
    opacity: 0;
    transform: scale(0.9);
}

.atc-btn.is-adding .atc-btn__spinner {
    opacity: 1;
    transform: scale(1);
    animation: atc-spin 0.7s linear infinite;
}

/* Success — “Added” */
.atc-btn.is-added,
#added_to_cart_btn.is-added,
.add-to-cart.is-added,
.add-to-cart.added-success {
    background: var(--atc-ok) !important;
    border-color: var(--atc-ok) !important;
    color: #fff !important;
    pointer-events: none;
    gap: 8px;
}

.atc-btn.is-added .atc-btn__icon,
.atc-btn.is-added .atc-btn__spinner {
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    transform: scale(0.85);
}

.atc-btn.is-added .atc-btn__label {
    opacity: 1;
    transform: none;
}

.atc-btn.is-added .atc-btn__check {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    opacity: 1;
    margin: 0;
    transform: scale(1);
    pointer-events: none;
    animation: atc-pop 0.45s var(--atc-spring) both;
}

/* Icon-only card cart buttons */
.atc-icon-btn {
    position: relative;
    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s var(--atc-ease),
        box-shadow 0.22s ease !important;
}

.atc-icon-btn.is-adding {
    pointer-events: none;
    opacity: 0.75;
}

.atc-icon-btn.is-adding svg {
    opacity: 0;
}

.atc-icon-btn.is-adding::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: atc-spin 0.65s linear infinite;
}

.atc-icon-btn.is-added {
    background: var(--atc-ok) !important;
    border-color: var(--atc-ok) !important;
    color: #fff !important;
    animation: atc-pop 0.4s var(--atc-spring);
}

.atc-icon-btn.is-added svg {
    /* checkmark swap handled in JS via class on path container */
}

.atc-icon-btn:focus-visible {
    outline: 2px solid var(--atc-accent);
    outline-offset: 2px;
}

/* ---- Fly particle ---- */
.atc-fly {
    position: fixed;
    z-index: 10050;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--atc-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
    opacity: 0.96;
    will-change: transform, opacity;
}

.atc-fly svg {
    width: 14px;
    height: 14px;
    display: block;
}

.atc-fly.is-moving {
    transition:
        transform 0.62s var(--atc-ease),
        opacity 0.18s ease 0.48s;
}

.atc-fly.is-done {
    opacity: 0;
    transform: scale(0.4) !important;
}

/* ---- Header cart target reaction ---- */
.js-nav-cart.is-atc-hit .hdr-ref__util-icon,
.hdr-ref__util.js-nav-cart.is-atc-hit .hdr-ref__util-icon {
    animation: atc-cart-bump 0.5s var(--atc-spring);
}

.cart-count.is-atc-bump,
.hdr-ref__util-badge.cart-count.is-atc-bump {
    animation: atc-badge-pop 0.48s var(--atc-spring);
}

/* Ensure badge visible when count > 0 */
.cart-count:not(.d-none) {
    display: inline-flex !important;
}

/* Screen-reader live region */
.atc-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes atc-spin {
    to { transform: rotate(360deg); }
}

@keyframes atc-pop {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes atc-cart-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.14) rotate(-4deg); }
    65% { transform: scale(0.96) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes atc-badge-pop {
    0% { transform: scale(0.6); opacity: 0.4; }
    55% { transform: scale(1.22); opacity: 1; }
    100% { transform: scale(1); }
}

@media (max-width: 575.98px) {
    .atc-fly {
        width: 24px;
        height: 24px;
    }

    .pdp-details-ref .add-to-cart.atc-btn:hover:not(:disabled),
    #added_to_cart_btn.atc-btn:hover:not(:disabled) {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atc-btn,
    .atc-btn__icon,
    .atc-btn__icon svg,
    .atc-btn__label,
    .atc-btn__check,
    .atc-btn__spinner,
    .atc-icon-btn,
    .atc-fly,
    .js-nav-cart.is-atc-hit .hdr-ref__util-icon,
    .cart-count.is-atc-bump {
        animation: none !important;
        transition: none !important;
    }

    .atc-btn.is-adding .atc-btn__spinner {
        animation: none !important;
        opacity: 1;
    }

    .atc-fly {
        display: none !important;
    }
}

/* ===== shop-by-category.css ===== */
/* ============================================================
   Shop By Category — circular grid
   ============================================================ */

.shop-cat {
    --sc-ink: #111;
    --sc-muted: #8a8a8a;
    --sc-soft: #f3f3f3;
    padding: 12px 0 20px;
}

.shop-cat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.shop-cat__title {
    margin: 0;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sc-ink);
    line-height: 1.25;
    font-family: 'Hind Siliguri', sans-serif;
}

.shop-cat__arrows {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.shop-cat__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e6e6e6;
    background: #fff;
    color: #666;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.shop-cat__arrow:hover {
    border-color: #ccc;
    color: #111;
    background: #fafafa;
}

.shop-cat__carousel .slick-list {
    margin: 0 -10px;
}

.shop-cat__carousel .slick-slide {
    padding: 0 10px 22px;
}

.shop-cat__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    color: var(--sc-ink) !important;
    gap: 14px;
}

.shop-cat__avatar {
    display: block;
    width: min(148px, 100%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(180deg, #f7f7f7 0%, #ececec 100%);
    transition: transform 0.25s ease;
}

.shop-cat__item:hover .shop-cat__avatar {
    transform: scale(1.03);
}

.shop-cat__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.shop-cat__label {
    display: block;
    max-width: 148px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .shop-cat__head {
        margin-bottom: 20px;
    }

    .shop-cat__avatar {
        width: min(120px, 100%);
    }

    .shop-cat__label {
        max-width: 120px;
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    .shop-cat__title {
        font-size: 16px;
    }

    .shop-cat__avatar {
        width: min(100px, 100%);
    }

    .shop-cat__label {
        max-width: 100px;
        font-size: 12px;
    }

    .shop-cat__carousel .slick-slide {
        padding-bottom: 16px;
    }
}

/* ===== all-products.css ===== */
/* ============================================================
   All Products — reference-style floating filter popovers
   ============================================================ */

.allp {
    --allp-ink: #0f172a;
    --allp-muted: #64748b;
    --allp-line: #eef0f2;
    --allp-soft: #f8fafc;
    --allp-accent: var(--primary, #e62e04);
    --allp-radius: 16px;
    --trend-ink: #0f172a;
    --trend-muted: #64748b;
    --trend-line: #eef0f2;
    --trend-soft: #f8fafc;
    --trend-accent: var(--primary, #e62e04);
    --trend-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --trend-radius: 16px;
    padding: 28px 0 56px;
    background: #fff;
    position: relative;
    z-index: 2;
    overflow: visible;
    font-family: 'Hind Siliguri', sans-serif;
}

.allp--home {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 4px;
    margin-bottom: 0;
}

.allp .container {
    overflow: visible;
    position: relative;
}

.allp__header {
    margin-bottom: 12px;
}

.allp__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.allp__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--allp-ink);
    line-height: 1.3;
    font-family: inherit;
}

.allp__count {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--allp-muted);
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.3;
}

.allp__loading {
    margin-left: 8px;
    color: var(--allp-accent);
}

/* Toolbar */
.allp__toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    position: relative;
    z-index: 30;
}

.allp__chips {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0;
    flex: 1;
    min-width: 0;
}

.allp__chips::-webkit-scrollbar {
    display: none;
}

.allp-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--allp-line);
    background: #fff;
    color: var(--allp-ink);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Hind Siliguri', sans-serif;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.allp-chip svg {
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.allp-chip:hover {
    background: #fafafa;
    border-color: #d0d0d0;
}

.allp-chip.is-open,
.allp-chip.is-active {
    border-color: #222;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.allp-chip.is-open svg {
    transform: rotate(180deg);
    opacity: 0.9;
}

.allp-filters-next {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--allp-line);
    background: #fff;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.allp-filters-next:hover {
    border-color: #bbb;
    background: #fafafa;
}

/* In-stock */
.allp-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 4px;
}

.allp-stock input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.allp-stock__switch {
    order: 2;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #ddd;
    position: relative;
    transition: background 0.2s ease;
}

.allp-stock__switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.allp-stock input:checked + .allp-stock__switch {
    background: #222;
}

.allp-stock input:checked + .allp-stock__switch::after {
    transform: translateX(18px);
}

.allp-stock__label {
    order: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--allp-ink);
}

/* Floating popovers */
.allp__pops {
    position: relative;
    z-index: 40;
    margin-bottom: 8px;
}

.allp-pop {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    justify-content: flex-start;
    pointer-events: none;
}

.allp-pop[hidden] {
    display: none !important;
}

.allp-pop__card {
    pointer-events: auto;
    width: min(380px, calc(100vw - 32px));
    max-height: min(72vh, 560px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    animation: allpPopIn 0.2s ease;
}

.allp-pop--brands .allp-pop__card,
.allp-pop--price .allp-pop__card {
    width: min(420px, calc(100vw - 32px));
}

@keyframes allpPopIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.allp-pop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    flex-shrink: 0;
}

.allp-pop__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--allp-ink);
    letter-spacing: -0.02em;
}

.allp-pop__x {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--allp-line);
    background: #fff;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.allp-pop__x:hover {
    background: var(--allp-soft);
    border-color: #ccc;
}

.allp-pop__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 4px 8px 8px;
    min-height: 0;
}

.allp-pop__body--price {
    padding: 8px 16px 16px;
}

.allp-pop__body--brands {
    max-height: 280px;
}

.allp-brand-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px 10px;
    padding: 10px 12px;
    border: 1px solid var(--allp-line);
    border-radius: 10px;
    background: #fff;
    flex-shrink: 0;
}

.allp-brand-search svg {
    color: #999;
    flex-shrink: 0;
}

.allp-brand-search input {
    border: 0;
    outline: none;
    width: 100%;
    font-size: 14px;
    background: transparent;
}

/* Rows — label left, control right */
.allp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

.allp-row:hover {
    background: #f7f7f7;
}

.allp-row__label {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--allp-ink);
    line-height: 1.3;
}

.allp-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.allp-row__box,
.allp-row__radio {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1.5px solid #cfcfcf;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.allp-row__box {
    border-radius: 5px;
}

.allp-row__radio {
    border-radius: 50%;
}

.allp-row input:checked + .allp-row__box {
    border-color: #222;
    background: #222;
    box-shadow: inset 0 0 0 3px #fff;
}

.allp-row input:checked + .allp-row__radio {
    border-color: #222;
    background: radial-gradient(circle at center, #222 0 45%, #fff 48%);
}

.allp-row--color .allp-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.allp-row--child {
    padding-left: 22px;
}

.allp-row--grand {
    padding-left: 36px;
}

.allp-row--child .allp-row__label,
.allp-row--grand .allp-row__label {
    font-weight: 400;
    color: #555;
}

/* Price fields */
.allp-price-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.allp-price-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.allp-price-field span {
    font-size: 12px;
    font-weight: 500;
    color: var(--allp-muted);
}

.allp-price-field input {
    height: 44px;
    border: 1px solid var(--allp-line);
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--allp-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.allp-price-field input:focus {
    outline: none;
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.allp-range {
    position: relative;
    height: 44px;
    margin: 8px 2px 12px;
    --allp-range-min: 0%;
    --allp-range-max: 100%;
}

.allp-range__track {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 5px;
    border-radius: 999px;
    background: #ececf1;
    pointer-events: none;
    overflow: hidden;
}

.allp-range__fill {
    position: absolute;
    top: 0;
    left: var(--allp-range-min);
    width: calc(var(--allp-range-max) - var(--allp-range-min));
    height: 100%;
    border-radius: inherit;
    background: #1a1a1f;
    transform-origin: left center;
    transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1), width 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.allp-range.is-dragging .allp-range__fill {
    transition-duration: 0.08s;
}

.allp-range.is-dragging .allp-price-field input {
    border-color: #bdbdc7;
}

.allp-range input[type="range"] {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    height: 44px;
    z-index: 2;
}

.allp-range input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    background: transparent;
    border-radius: 999px;
}

.allp-range input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #1a1a1f;
    margin-top: -8.5px;
    pointer-events: auto;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.allp-range input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.14);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.allp-range input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: none;
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
}

.allp-range input[type="range"]::-moz-range-track {
    height: 5px;
    background: transparent;
    border-radius: 999px;
}

.allp-range input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #1a1a1f;
    pointer-events: auto;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}

.allp-range input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
    transform: scale(1.14);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .allp-range__fill,
    .allp-range input[type="range"]::-webkit-slider-thumb,
    .allp-range input[type="range"]::-moz-range-thumb {
        transition: none !important;
    }
}

/* Footer */
.allp-pop__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fff;
}

.allp-btn {
    appearance: none;
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.allp-btn--ghost {
    flex: 0 0 auto;
    min-width: 88px;
    border: 1px solid #d8d8d8;
    background: #fff;
    color: var(--allp-ink);
}

.allp-btn--ghost:hover {
    background: #f7f7f7;
    border-color: #bbb;
}

.allp-btn--primary {
    flex: 1 1 auto;
    border: 0;
    background: #222;
    color: #fff;
}

.allp-btn--primary:hover {
    background: #111;
    transform: translateY(-1px);
}

/* Grid — same premium cards as Trending */
.allp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 16px;
    position: relative;
    z-index: 1;
}

.allp-grid__item {
    min-width: 0;
    height: 100%;
}

.allp-grid__item .trend-card {
    height: 100%;
    animation: allp-card-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.allp-grid__item:nth-child(1) .trend-card { animation-delay: 0.04s; }
.allp-grid__item:nth-child(2) .trend-card { animation-delay: 0.08s; }
.allp-grid__item:nth-child(3) .trend-card { animation-delay: 0.12s; }
.allp-grid__item:nth-child(4) .trend-card { animation-delay: 0.16s; }
.allp-grid__item:nth-child(5) .trend-card { animation-delay: 0.2s; }
.allp-grid__item:nth-child(6) .trend-card { animation-delay: 0.24s; }
.allp-grid__item:nth-child(7) .trend-card { animation-delay: 0.28s; }
.allp-grid__item:nth-child(8) .trend-card { animation-delay: 0.32s; }

@keyframes allp-card-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.allp-sentinel {
    height: 1px;
    margin-top: 24px;
}

.allp-end {
    text-align: center;
    padding: 28px 0 8px;
    color: var(--allp-muted);
    font-size: 13px;
    font-weight: 500;
}

.trend-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.trend-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--trend-ink, #0f172a);
}

@media (max-width: 1199.98px) {
    .allp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px 12px;
    }
}

@media (max-width: 991.98px) {
    .allp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
    }
}

@media (max-width: 767.98px) {
    .allp {
        padding: 18px 0 40px;
    }

    .allp__title {
        font-size: 16px;
    }

    .allp__count {
        font-size: 11.5px;
    }

    .allp__toolbar {
        flex-wrap: wrap;
    }

    .allp-stock {
        order: -1;
        width: 100%;
    }

    .allp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
    }

    .allp-grid__item .trend-card {
        animation: none;
    }

    .allp-pop__card {
        width: calc(100vw - 24px);
        max-height: 70vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .allp-grid__item .trend-card {
        animation: none !important;
    }
}

/* ===== site-footer.css ===== */
/* ============================================================
   Site Footer — seamless with page (white canvas)
   ============================================================ */

.sf {
    --sf-ink: #1a1514;
    --sf-muted: #6f6562;
    --sf-line: rgba(26, 21, 20, 0.07);
    --sf-card: #ffffff;
    --sf-accent: var(--primary, #e62e04);
    --sf-accent-2: #c41f00;
    --sf-dark: #1f1614;
    --sf-edge: clamp(16px, 3vw, 56px);
    --sf-max: 1720px;
    position: relative;
    margin-top: 0;
    padding: 0 0 1.25rem;
    background: #fff;
    color: var(--sf-ink);
    overflow: visible;
}

/* Soft fade from page content — no hard color break */
.sf::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 72px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    opacity: 0;
}

.sf__inner {
    position: relative;
    z-index: 1;
    padding-top: 2.5rem;
    border-top: 1px solid var(--sf-line);
}

@media (min-width: 992px) {
    .sf__inner {
        max-width: min(var(--sf-max), calc(100vw - var(--sf-edge) * 2)) !important;
        width: 100%;
        padding-left: var(--sf-edge) !important;
        padding-right: var(--sf-edge) !important;
    }

    .sf-grid {
        gap: 2rem 2.5rem;
    }
}

@media (min-width: 1680px) {
    .sf {
        --sf-max: 1840px;
    }

    .sf-grid {
        gap: 2.25rem 3rem;
    }
}

/* Newsletter — floating white card (theme-footer-1 style) */
.sf-news {
    padding: 0;
    margin: 0 0 2.25rem;
    border-bottom: 0;
}

.sf-news__card {
    position: relative;
    z-index: 2;
    padding: 1.35rem 1.5rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow:
        0 10px 28px rgba(26, 21, 20, 0.06),
        0 2px 6px rgba(26, 21, 20, 0.03);
}

.sf-news__row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.sf-news__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sf-news__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    line-height: 1.3;
    font-family: 'Hind Siliguri', sans-serif;
}

.sf-news__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
}

.sf-news__emoji img {
    width: 20px;
    height: 20px;
    display: block;
}

.sf-news__sub {
    margin: 0;
    max-width: 34rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #8c8c8c;
    font-family: 'Hind Siliguri', sans-serif;
}

.sf-news__form {
    width: 100%;
    max-width: 460px;
}

.sf-news__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    border-radius: 12px;
    background: #f5f5f5;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sf-news__box:focus-within {
    background: #fff;
    border-color: color-mix(in srgb, var(--sf-accent) 30%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-accent) 10%, transparent);
}

.sf-news__input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    padding: 0 0.65rem;
}

.sf-news__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #9a9a9a;
}

.sf-news__input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 0.9rem;
    color: #1a1a1a;
    height: 44px;
    padding: 0;
    font-family: 'Hind Siliguri', sans-serif;
}

.sf-news__input::placeholder {
    color: #a8a8a8;
}

.sf-news__btn {
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    padding: 0.7rem 1.5rem;
    min-height: 46px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff !important;
    cursor: pointer;
    background: var(--sf-accent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--sf-accent) 35%, transparent);
    transition: filter 0.15s ease, transform 0.15s ease;
    font-family: 'Hind Siliguri', sans-serif;
}

.sf-news__btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff !important;
}

/* Main grid */
.sf-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.9fr 0.9fr 0.9fr;
    gap: 2rem 1.75rem;
    padding-bottom: 2rem;
}

.sf-col__title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sf-ink);
    letter-spacing: -0.01em;
}

.sf-logo,
.sf-brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.25rem;
    max-width: 200px;
    text-decoration: none;
}

.sf-logo img,
.sf-brand__logo {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

.sf-brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sf-ink);
    text-decoration: none;
}

.sf-meta {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--sf-muted);
    line-height: 1.45;
}

.sf-meta:first-of-type {
    margin-top: 0;
}

.sf-meta__icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--sf-accent);
    opacity: 0.92;
}

.sf-meta a {
    color: inherit;
    text-decoration: none;
}

.sf-meta a:hover {
    color: var(--sf-accent);
}

.sf-contact {
    list-style: none;
    margin: 0 0 1.15rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.sf-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--sf-muted);
    line-height: 1.4;
}

.sf-contact a {
    color: inherit;
    text-decoration: none;
}

.sf-contact a:hover {
    color: var(--sf-accent);
}

.sf-contact svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--sf-accent);
    opacity: 0.9;
}

/* CTA — soft panel, theme-footer-1 style */
.sf-cta {
    margin-top: 1rem;
    border-radius: 16px;
    padding: 1rem 1.05rem 1.1rem;
    background: #f7f7f7;
    color: var(--sf-ink);
    border: 1px solid var(--sf-line);
    box-shadow: none;
}

.sf-cta__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sf-muted);
}

.sf-cta__title {
    margin: 0.5rem 0 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--sf-ink);
}

.sf-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: var(--sf-accent);
    border: 0;
    box-shadow: none;
    transition: filter 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.sf-cta__btn svg {
    flex-shrink: 0;
}

.sf-cta__btn:hover {
    color: #fff;
    filter: brightness(1.05);
    transform: translateY(-1px);
    background: var(--sf-accent);
}

/* Link lists */
.sf-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.sf-links a {
    color: var(--sf-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.sf-links a:hover {
    color: var(--sf-accent);
    padding-left: 2px;
}

/* Social — icon + label list (theme-footer style) */
.sf-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.95rem;
}

.sf-social a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #5c5653;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    transition: color 0.15s ease;
}

.sf-social a:hover {
    color: var(--sf-accent);
}

.sf-social__svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #1a1514;
    display: block;
}

.sf-social__img {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

/* Payment methods strip (inside sf-bottom) */
.sf-payment-strip {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.sf-payment-strip__img {
    display: block;
    width: auto;
    max-width: min(100%, 980px);
    height: auto;
    max-height: 76px;
    object-fit: contain;
    opacity: 0.95;
    transition: opacity 0.2s ease;
}

.sf-payment-strip__img:hover {
    opacity: 1;
}

/* Bottom bar */
.sf-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-top: 1.15rem;
    border-top: 1px solid var(--sf-line);
}

.sf-copy {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--sf-muted);
}

.sf-copy p {
    margin: 0;
}

.sf-pay {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: flex-end;
}

.sf-pay img {
    max-height: 22px;
    width: auto;
    opacity: 0.85;
}

.sf-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.sf-apps img {
    height: 40px;
    width: auto;
}

/* Responsive */
@media (max-width: 991.98px) {
    .sf-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 1rem;
    }

    .sf-col--brand {
        grid-column: 1 / -1;
    }

    .sf-news__card {
        padding: 1.15rem 1.1rem;
        border-radius: 16px;
    }

    .sf-news__form {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .sf__inner {
        padding-top: 2rem;
    }

    .sf-col--brand {
        padding-bottom: 0.25rem;
    }

    .sf-cta__btn {
        width: 100%;
        justify-content: center;
    }

    .sf-bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem 0.85rem 0.35rem;
        width: 100%;
    }

    .sf-copy {
        width: 100%;
        text-align: center;
    }

    .sf-copy p,
    .sf-copy div {
        margin: 0 auto;
        text-align: center !important;
    }

    .sf-payment-strip {
        width: 100%;
        flex: 0 0 auto;
        justify-content: center;
        overflow: visible;
        padding: 0 0.35rem;
    }

    .sf-payment-strip__img {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        max-height: 58px;
        object-fit: contain;
    }
}

@media (max-width: 575.98px) {
    .sf {
        margin-top: 1.25rem;
        /* body already reserves space for fixed mob-nav */
        padding-bottom: 0.5rem;
    }

    .sf__inner {
        padding-top: 1.5rem;
    }

    /* Card-style grouped layout */
    .sf-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border: 1px solid var(--sf-line);
        border-radius: 16px;
        overflow: hidden;
        background: #fafafa;
        padding-bottom: 0;
    }

    .sf-col--brand {
        grid-column: 1 / -1;
        padding: 1.15rem 1rem 1.25rem;
        background: #fff;
        border-bottom: 1px solid var(--sf-line);
    }

    .sf-brand {
        margin-bottom: 1rem;
    }

    .sf-brand__logo {
        max-height: 40px;
    }

    .sf-meta {
        margin-top: 0.55rem;
        font-size: 0.84rem;
        align-items: center;
    }

    .sf-meta__icon {
        width: 16px;
        height: 16px;
    }

    .sf-cta {
        margin-top: 1rem;
        padding: 0.9rem;
        border-radius: 12px;
    }

    .sf-cta__title {
        font-size: 0.95rem;
    }

    .sf-apps {
        margin-top: 0.85rem;
        justify-content: flex-start;
    }

    .sf-col--links,
    .sf-col--cats {
        padding: 1rem 0.85rem 1.1rem;
        background: #fff;
        min-width: 0;
    }

    .sf-col--links {
        border-right: 1px solid var(--sf-line);
        border-bottom: 1px solid var(--sf-line);
    }

    .sf-col--cats {
        border-bottom: 1px solid var(--sf-line);
    }

    .sf-col--social {
        grid-column: 1 / -1;
        padding: 1rem;
        background: #fff;
    }

    .sf-col__title {
        margin: 0 0 0.65rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #8a827e;
    }

    .sf-links {
        gap: 0.45rem;
    }

    .sf-links a {
        font-size: 0.84rem;
        line-height: 1.35;
        display: block;
    }

    .sf-links a:hover {
        padding-left: 0;
    }

    .sf-social {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .sf-social li {
        flex: 0 0 auto;
    }

    .sf-social a {
        padding: 0.45rem 0.65rem;
        border: 1px solid var(--sf-line);
        border-radius: 999px;
        background: #fafafa;
        font-size: 0.78rem;
        gap: 0.4rem;
    }

    .sf-social__img {
        width: 16px;
        height: 16px;
    }

    .sf-bottom {
        padding: 1rem 0.65rem 0.35rem;
        margin-top: 0.75rem;
    }

    .sf-copy {
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .sf-payment-strip {
        padding: 0;
    }

    .sf-payment-strip__img {
        max-height: 48px;
    }

    .sf-pay {
        width: 100%;
        justify-content: center;
        gap: 0.5rem;
    }

    .sf-pay img {
        max-height: 20px;
    }

    .sf-news__box {
        flex-wrap: wrap;
        padding: 0.5rem;
        border-radius: 12px;
    }

    .sf-news__input-wrap {
        flex: 1 1 100%;
        padding: 0.15rem 0.35rem;
    }

    .sf-news__btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Policy icon strip above footer */
.sf-policy-strip .policy-file a {
    min-height: 100%;
}

@media (max-width: 575.98px) {
    .sf-policy-strip .policy-file a {
        padding: 0.85rem 0.35rem !important;
    }

    .sf-policy-strip .policy-file svg {
        width: 24px;
        height: auto;
    }

    .sf-policy-strip .policy-file h4 {
        font-size: 11px !important;
        line-height: 1.25;
        margin-top: 0.45rem !important;
    }
}

@media (max-width: 374.98px) {
    .sf-grid {
        grid-template-columns: 1fr;
    }

    .sf-col--links {
        border-right: 0;
    }
}

/* Sub-footer description block above policy strip */
@media (max-width: 575.98px) {
    section.border-top.border-bottom.mt-auto .py-32px {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    section.border-top.border-bottom.mt-auto .fs-18 {
        font-size: 1rem !important;
        margin-bottom: 0.65rem !important;
    }

    section.border-top.border-bottom.mt-auto .footer-text-control {
        font-size: 0.8125rem !important;
        line-height: 1.55;
    }
}

/* ===== auth-modal-responsive.css ===== */
/* ============================================================
   Login popup (#login_modal) — mobile & tablet responsive
   Desktop (992px+) unchanged. Loads after checkout-page.css.
   ============================================================ */

/* Fix custom-style 8px radius override on auth modal */
#login_modal.auth-modal .auth-modal__content.modal-content {
    border-radius: 16px !important;
}

/* ---- Tablet (768–991px) ---- */
@media (max-width: 991.98px) and (min-width: 768px) {
    #login_modal.auth-modal .modal-dialog {
        max-width: min(440px, calc(100vw - 40px));
        margin: 1rem auto;
        padding: 0 4px;
    }

    #login_modal .auth-modal__head {
        padding: 20px 20px 0;
    }

    #login_modal .auth-modal__body {
        padding: 16px 20px 22px;
    }

    #login_modal .auth-modal__title {
        font-size: 22px;
    }

    #login_modal .auth-modal__lead {
        max-width: none;
        font-size: 13px;
    }

    /* Touch-friendly inputs on tablet */
    #login_modal .auth-modal__input.form-control,
    #login_modal .auth-modal__form .iti input[type="tel"] {
        font-size: 16px;
    }

    #login_modal .auth-modal__social-btn > span {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        white-space: nowrap;
    }

    #login_modal .auth-modal__meta {
        gap: 10px;
    }

    #login_modal .auth-modal__forgot {
        white-space: normal;
        line-height: 1.35;
        text-align: right;
        max-width: 58%;
    }

    #login_modal .auth-modal__submit {
        height: 50px;
    }
}

/* ---- Mobile & small tablet (≤767px) — bottom sheet ---- */
@media (max-width: 767.98px) {
    #login_modal.auth-modal.show {
        display: flex !important;
        align-items: flex-end;
        padding: 0 !important;
    }

    #login_modal.auth-modal .modal-dialog,
    #login_modal.auth-modal .modal-dialog.modal-dialog-centered {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        min-height: 0;
        display: block;
        align-items: stretch;
    }

    #login_modal.auth-modal.fade .auth-modal__dialog {
        transform: translateY(28px);
        opacity: 0;
    }

    #login_modal.auth-modal.show .auth-modal__dialog {
        transform: translateY(0);
        opacity: 1;
    }

    #login_modal.auth-modal .auth-modal__content.modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: min(92dvh, calc(100vh - env(safe-area-inset-top, 0px)));
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 -10px 44px rgba(15, 23, 42, 0.2);
    }

    /* Drag handle */
    #login_modal .auth-modal__head::before {
        content: '';
        flex: 0 0 100%;
        width: 40px;
        height: 4px;
        margin: 0 auto 12px;
        border-radius: 999px;
        background: #e2e8f0;
    }

    #login_modal .auth-modal__head {
        flex-wrap: wrap;
        padding: 10px 16px 0;
        flex-shrink: 0;
    }

    #login_modal .auth-modal__head-text {
        order: 2;
        flex: 1 1 calc(100% - 48px);
    }

    #login_modal .auth-modal__close {
        order: 1;
        margin-left: auto;
        width: 40px;
        height: 40px;
        -webkit-tap-highlight-color: transparent;
    }

    #login_modal .auth-modal__body {
        padding: 12px 16px max(20px, env(safe-area-inset-bottom));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        flex: 1 1 auto;
        min-height: 0;
    }

    #login_modal .auth-modal__title {
        font-size: 21px;
        margin-bottom: 4px;
    }

    #login_modal .auth-modal__lead {
        font-size: 12px;
        line-height: 1.45;
        max-width: none;
    }

    #login_modal .auth-modal__social {
        gap: 8px;
    }

    #login_modal .auth-modal__social-btn {
        height: 48px;
        padding: 0 14px;
        font-size: 13px;
        justify-content: flex-start;
    }

    #login_modal .auth-modal__social-btn > span {
        flex: 1 1 auto;
        width: auto;
        white-space: nowrap;
    }

    #login_modal .auth-modal__divider {
        margin: 14px 0;
    }

    #login_modal .auth-modal__tabs {
        margin-bottom: 14px;
        gap: 3px;
    }

    #login_modal .auth-modal__tab {
        min-height: 38px;
        padding: 8px 6px;
        font-size: 12px;
        white-space: normal;
    }

    #login_modal .auth-modal__field {
        margin-bottom: 12px;
    }

    /* iOS — prevent zoom on focus */
    #login_modal .auth-modal__input.form-control,
    #login_modal .auth-modal__form .iti input[type="tel"] {
        height: 48px;
        font-size: 16px !important;
    }

    #login_modal .auth-modal__form .iti {
        width: 100%;
        display: block;
    }

    #login_modal .auth-modal__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }

    #login_modal .auth-modal__forgot {
        white-space: normal;
        line-height: 1.4;
        font-size: 12px;
    }

    #login_modal .auth-modal__submit {
        height: 50px;
        min-height: 50px;
        border-radius: 14px;
        font-size: 15px;
        -webkit-tap-highlight-color: transparent;
    }

    #login_modal .auth-modal__submit:hover {
        transform: none;
    }

    #login_modal .auth-modal__submit:active {
        transform: scale(0.98);
    }

    #login_modal .auth-modal__password-wrap .auth-modal__input {
        padding-right: 48px;
    }

    #login_modal .auth-modal__eye {
        width: 44px;
        height: 44px;
        right: 4px;
    }

    #login_modal .auth-modal__register-line,
    #login_modal .auth-modal__otp-hint {
        font-size: 12px;
        line-height: 1.45;
        text-align: center;
    }

    /* intl-tel dropdown above bottom nav */
    #login_modal .iti--container {
        z-index: 1065;
    }
}

/* ---- Small mobile (≤575px) ---- */
@media (max-width: 575.98px) {
    #login_modal .auth-modal__head {
        padding-top: 8px;
    }

    #login_modal .auth-modal__title {
        font-size: 20px;
    }

    #login_modal .auth-modal__social-btn {
        font-size: 12px;
        padding: 0 12px;
    }
}

/* ---- Very small screens ---- */
@media (max-width: 379.98px) {
    #login_modal .auth-modal__title {
        font-size: 18px;
    }

    #login_modal .auth-modal__social-btn > span {
        white-space: normal;
        line-height: 1.25;
    }

    #login_modal .auth-modal__body {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #login_modal.auth-modal.fade .auth-modal__dialog,
    #login_modal.auth-modal.show .auth-modal__dialog {
        transform: none !important;
    }
}

/* ===== intl-tel-circle-flags.css ===== */
/* Circle SVG flags for intl-tel-input (hatscripts circle-flags) */

.iti--circle-flags .iti__flag {
    background-image: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.iti--circle-flags .iti__flag-box {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.iti--circle-flags .iti-circle-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.iti--circle-flags .iti__country .iti__flag-box {
    margin-right: 8px;
}

.iti--circle-flags .iti__selected-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.iti--circle-flags .iti__country-list .iti-circle-flag {
    width: 18px;
    height: 18px;
}

.iti--circle-flags .iti__country-list .iti__flag-box {
    width: 18px;
    height: 18px;
}

.co-phone .iti--circle-flags {
    width: 100%;
}

.co-phone .iti--circle-flags .form-control,
.co-phone .iti--circle-flags input[type="tel"] {
    width: 100%;
}

/* ===== cookie-alert.css ===== */
/* Cookie / custom alert pop — matches login & locale panel language */

.aiz-custom-alert {
    --ck-ink: #0f172a;
    --ck-muted: #64748b;
    --ck-line: #e2e8f0;
    --ck-panel: #ffffff;
    --ck-accent: var(--primary, #e62e04);
    --ck-radius: 16px;
    --ck-radius-sm: 12px;
    max-width: 320px;
    width: calc(100vw - 28px);
    font-family: 'Hind Siliguri', sans-serif;
    z-index: 1070;
}

.aiz-custom-alert.bottom-left {
    bottom: 18px;
    left: 14px;
}

.aiz-custom-alert.bottom-right {
    bottom: 18px;
    right: 14px;
}

.aiz-custom-alert.top-left {
    top: 18px;
    left: 14px;
}

.aiz-custom-alert.top-right {
    top: 18px;
    right: 14px;
}

.aiz-cookie-alert {
    display: none;
    margin-bottom: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.aiz-cookie-alert.show {
    display: block;
    animation: ck-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ck-rise {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.aiz-cookie-alert__card {
    position: relative;
    background: var(--ck-panel);
    border: 1px solid var(--ck-line);
    border-radius: var(--ck-radius);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
    padding: 18px 18px 16px;
    overflow: hidden;
}

.aiz-cookie-alert__text {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--ck-ink);
}

.aiz-cookie-alert__text p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.aiz-cookie-alert__text a {
    color: var(--ck-accent) !important;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.aiz-cookie-alert__text a:hover {
    border-bottom-color: var(--ck-accent);
    opacity: 0.9;
}

.aiz-cookie-alert__btn,
.aiz-cookie-alert .aiz-cookie-accept,
.aiz-cookie-alert .aiz-cookie-accept-club-point {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 16px;
    border: 0 !important;
    border-radius: var(--ck-radius-sm) !important;
    background: var(--ck-accent) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.aiz-cookie-alert__btn:hover,
.aiz-cookie-alert .aiz-cookie-accept:hover,
.aiz-cookie-alert .aiz-cookie-accept-club-point:hover {
    background: color-mix(in srgb, var(--ck-accent) 88%, #000) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.aiz-cookie-alert__btn:active,
.aiz-cookie-alert .aiz-cookie-accept:active,
.aiz-cookie-alert .aiz-cookie-accept-club-point:active {
    transform: translateY(0);
    opacity: 0.95;
}

/* Banner-style custom alerts */
.aiz-custom-alert .custom-alert-box {
    margin-bottom: 12px !important;
    border-radius: var(--ck-radius) !important;
    overflow: hidden;
    border: 1px solid var(--ck-line);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12) !important;
    background: var(--ck-panel);
}

.aiz-custom-alert .custom-alert-box .btn-circle {
    width: 28px;
    height: 28px;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.06) !important;
    color: var(--ck-ink) !important;
    border: 0 !important;
}

@media (max-width: 575.98px) {
    .aiz-custom-alert {
        max-width: calc(100vw - 24px);
    }

    .aiz-custom-alert.bottom-left,
    .aiz-custom-alert.bottom-right {
        left: 12px;
        right: 12px;
        bottom: 14px;
        max-width: none;
    }

    .aiz-cookie-alert__card {
        padding: 16px;
        border-radius: 14px;
    }

    .aiz-cookie-alert__text {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .aiz-cookie-alert__btn,
    .aiz-cookie-alert .aiz-cookie-accept,
    .aiz-cookie-alert .aiz-cookie-accept-club-point {
        min-height: 42px;
        font-size: 13.5px;
        border-radius: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aiz-cookie-alert.show {
        animation: none;
    }

    .aiz-cookie-alert__btn:hover,
    .aiz-cookie-alert .aiz-cookie-accept:hover,
    .aiz-cookie-alert .aiz-cookie-accept-club-point:hover {
        transform: none;
    }
}

/* ===== toast-notify.css ===== */
/* Toast notify — light / dark aware, progress clipped inside radius */

.aiz-notify {
    /* Light mode defaults — match site surface language */
    --nt-bg: var(--theme-surface, #ffffff);
    --nt-ink: var(--theme-ink, #111827);
    --nt-muted: var(--theme-muted, #6b7280);
    --nt-border: var(--theme-line, #e5e7eb);
    --nt-shadow: 0 12px 32px var(--theme-shadow-lg, rgba(15, 23, 42, 0.14));
    --nt-track: rgba(15, 23, 42, 0.1);
    --nt-accent: var(--primary, #e62e04);
    --nt-success: #059669;
    --nt-danger: #e11d48;
    --nt-warning: #d97706;
    --nt-info: #0284c7;
    --nt-type: var(--nt-accent);

    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: min(420px, calc(100vw - 28px)) !important;
    width: max-content !important;
    margin: 10px 14px !important;
    padding: 12px 14px 16px !important;
    border: 1px solid var(--nt-border) !important;
    border-radius: 14px !important;
    background: var(--nt-bg) !important;
    color: var(--nt-ink) !important;
    box-shadow: var(--nt-shadow) !important;
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    /* Clip progress bar to rounded corners — never let it poke out */
    overflow: hidden !important;
    z-index: 1080 !important;
}

/* Dark mode — soft raised surface, no harsh pure-black bar */
[data-theme="dark"] .aiz-notify {
    --nt-bg: var(--theme-surface-raised, #252530);
    --nt-ink: var(--theme-ink, #f0f0f5);
    --nt-muted: var(--theme-muted, #9898a8);
    --nt-border: var(--theme-line, rgba(255, 255, 255, 0.1));
    --nt-shadow: 0 14px 36px var(--theme-shadow-lg, rgba(0, 0, 0, 0.55));
    --nt-track: rgba(255, 255, 255, 0.12);
    --nt-success: #34d399;
    --nt-danger: #fb7185;
    --nt-warning: #fbbf24;
    --nt-info: #38bdf8;
}

.aiz-notify::before {
    display: none !important;
}

[dir="rtl"] .aiz-notify {
    text-align: right !important;
}

.aiz-notify__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nt-type) 16%, transparent);
    color: var(--nt-type);
    font-size: 14px;
    line-height: 1;
}

.aiz-notify__icon i {
    line-height: 1;
}

.aiz-notify [data-notify="message"],
.aiz-notify__message {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    margin: 0;
    color: var(--nt-ink) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.aiz-notify .close {
    display: none !important;
}

/*
 * Progress timer — flush to bottom edge, full width of toast.
 * Use inset + max-width so Bootstrap `.progress { width:100% }` cannot
 * stretch past the padded/rounded box.
 */
.aiz-notify .progress,
.aiz-notify [data-notify="progressbar"] {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--nt-track) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    z-index: 1;
    pointer-events: none;
}

.aiz-notify .progress-bar,
.aiz-notify [data-notify="progressbar"] > .progress-bar,
.aiz-notify [data-notify="progressbar"] > div {
    display: block !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--nt-type) !important;
    box-shadow: none !important;
    opacity: 1;
    transition: none;
}

/* Types — keep solid brand colors off the toast chrome; tint via --nt-type only */
.aiz-notify.alert-success,
.aiz-notify.alert-danger,
.aiz-notify.alert-warning,
.aiz-notify.alert-info,
.aiz-notify.alert-primary,
.aiz-notify.alert-dark,
.aiz-notify.alert-secondary,
.aiz-notify.alert-secondary-base,
.aiz-notify.alert-light {
    background: var(--nt-bg) !important;
    color: var(--nt-ink) !important;
    border-color: var(--nt-border) !important;
}

.aiz-notify.alert-success { --nt-type: var(--nt-success); }
.aiz-notify.alert-danger { --nt-type: var(--nt-danger); }
.aiz-notify.alert-warning { --nt-type: var(--nt-warning); }
.aiz-notify.alert-info,
.aiz-notify.alert-primary { --nt-type: var(--nt-info); }
.aiz-notify.alert-dark,
.aiz-notify.alert-secondary,
.aiz-notify.alert-secondary-base { --nt-type: var(--nt-muted); }
.aiz-notify.alert-light { --nt-type: var(--nt-accent); }

@media (max-width: 575.98px) {
    .aiz-notify {
        max-width: calc(100vw - 28px) !important;
        width: calc(100vw - 28px) !important;
    }
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .aiz-notify__icon {
        background: rgba(15, 23, 42, 0.06);
    }

    [data-theme="dark"] .aiz-notify__icon {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* ===== search-suggest.css ===== */
/* Search suggest dropdown — clean organized preview */

.typed-search-box {
    --ssug-ink: #111;
    --ssug-muted: #8b929a;
    --ssug-line: #eef0f2;
    --ssug-soft: #f6f7f8;
    --ssug-accent: var(--primary, #e62e04);
    margin-top: 8px !important;
    padding: 0 !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow:
        0 4px 10px rgba(15, 23, 42, 0.04),
        0 18px 40px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
    z-index: 1050;
    min-height: 0 !important;
    font-family: 'Hind Siliguri', sans-serif;
}

.typed-search-box .search-preloader {
    padding: 28px 0;
}

.typed-search-box .search-nothing {
    padding: 28px 18px !important;
    color: var(--ssug-muted);
    font-size: 14px !important;
}

.ssug {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d4d7db transparent;
}

.ssug::-webkit-scrollbar {
    width: 6px;
}

.ssug::-webkit-scrollbar-thumb {
    background: #d4d7db;
    border-radius: 999px;
}

.ssug__section {
    padding: 14px 14px 8px;
}

.ssug__section + .ssug__section {
    border-top: 1px solid var(--ssug-line);
    padding-top: 12px;
}

.ssug__section--related {
    padding-bottom: 14px;
}

.ssug__label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aa1a9;
    text-align: left !important;
    background: transparent !important;
}

.ssug__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ssug__product {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 6px;
    margin: 0 -6px;
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--ssug-ink) !important;
    transition: background 0.12s ease;
}

.ssug__product:hover {
    background: var(--ssug-soft);
}

.ssug__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ssug-soft);
    flex-shrink: 0;
}

.ssug__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ssug__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ssug__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ssug-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ssug__sub {
    font-size: 12px;
    color: var(--ssug-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssug__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}

.ssug__price del {
    font-size: 11px;
    color: #a0a6ad;
    font-weight: 500;
}

.ssug__price strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--ssug-ink);
}

.ssug__mark {
    background: transparent;
    color: var(--ssug-accent);
    font-weight: 700;
    padding: 0;
}

.ssug__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ssug__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--ssug-soft);
    color: #333 !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.12s ease, color 0.12s ease;
}

.ssug__tag i {
    color: #f59e0b;
    font-size: 13px;
}

.ssug__tag:hover {
    background: #eceef0;
    color: #111 !important;
}

.ssug__tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .typed-search-box {
        border-radius: 14px !important;
        margin-top: 6px !important;
    }

    .ssug__product {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .ssug__thumb {
        width: 40px;
        height: 40px;
    }

    .ssug__name {
        font-size: 13px;
    }

    .ssug__price strong {
        font-size: 13px;
    }
}