/**
 * Autotech Marketplace App UI
 * Flipkart / Myntra / Meesho inspired mobile-first shell
 * Brand accents ALWAYS use admin theme: --secondary-color / --primary-color
 */

:root {
    --app-bg: #f2f2f7; /* iOS system grouped background */
    --app-surface: #ffffff;
    --app-ink: #1c1c1e;
    --app-ink-muted: #8e8e93;
    --app-ink-soft: #636366;
    --app-hairline: rgba(60, 60, 67, 0.12);
    /* Apple-like continuous corners — cards use 10px everywhere */
    --app-radius: 10px;
    --app-radius-lg: 10px;
    --app-radius-md: 10px;
    --app-radius-sm: 10px;
    --app-radius-xs: 6px;
    --app-radius-sheet: 14px; /* bottom sheets only */
    --app-tabbar-h: 70px;
    --app-header-h: 56px;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    --app-fab-size: 52px;
    --app-fab-gap: 14px;
    --app-fab-right: 22px;
    --app-fab-base: 24px;
    --app-accent: var(--secondary-color);
    --app-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
    --app-shadow-bar: 0 -0.5px 0 rgba(0, 0, 0, 0.08), 0 -4px 16px rgba(0, 0, 0, 0.06);
    --app-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

html {
    /* Prefer clip over hidden so position:fixed bottom bars stay viewport-locked on mobile */
    overflow-x: clip;
}

body {
    background: var(--app-bg) !important;
    color: var(--app-ink);
    padding-top: var(--app-safe-top);
    padding-left: var(--app-safe-left);
    padding-right: var(--app-safe-right);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    overflow-x: clip !important;
}

@media only screen and (max-width: 991px) {
    :root {
        --app-fab-size: 46px;
        --app-fab-gap: 12px;
        --app-fab-right: 14px;
        --app-fab-base: calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 12px);
    }

    body.is-pdp {
        --app-fab-base: calc(78px + var(--app-safe-bottom) + 12px);
        padding-bottom: calc(72px + var(--app-safe-bottom));
    }

    body {
        /* Floating tab bar clearance */
        padding-bottom: calc(var(--app-tabbar-h) + 18px + var(--app-safe-bottom));
    }
    .main__content_wrapper {
        min-height: 55vh;
        padding-bottom: 8px;
    }

    /* Full web footer = desktop only */
    .footer--web {
        display: none !important;
    }

    /* Compact app footer */
    .footer--app {
        display: block !important;
    }
}

@media only screen and (min-width: 992px) {
    .footer--app {
        display: none !important;
    }

    .footer--web {
        display: block !important;
    }
}

/* =========================================================
   APP FOOTER — premium minimal (mobile / PWA)
   ========================================================= */
.footer--app {
    display: none;
    background: transparent;
    padding: 28px 20px calc(18px + var(--app-safe-bottom));
    margin: 0;
    border: 0;
}

.app-footer__inner {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

.app-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin-bottom: 14px;
}

.app-footer__links a {
    font-size: 12px;
    font-weight: 500;
    color: #878787;
    text-decoration: none;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
}

.app-footer__links a:active,
.app-footer__links a:hover {
    color: var(--app-accent, var(--secondary-color));
}

.app-footer__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.app-footer__support {
    font-size: 12px;
    font-weight: 600;
    color: #717171;
    text-decoration: none;
}

.app-footer__copy {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: #9e9e9e;
    letter-spacing: 0.02em;
}

/* =========================================================
   APP HEADER — premium frosted native chrome
   ========================================================= */
.main__header.header__sticky.at-appbar,
.main__header.header__sticky {
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(60, 60, 67, 0.10) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 4px 18px rgba(0, 0, 0, 0.04) !important;
    z-index: 10040;
    padding: 0 !important;
    overflow: visible !important;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .main__header.header__sticky.at-appbar,
    .main__header.header__sticky {
        background: rgba(255, 255, 255, 0.97) !important;
    }
}

.main__header.header__sticky.sticky {
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    padding: 0 !important;
}

.at-appbar__inner {
    min-height: var(--app-header-h);
    gap: 16px;
    display: flex;
    align-items: center;
}

.main__header .at-appbar__container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.at-appbar__search {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

.at-appbar__search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 42px;
    padding: 0 12px 0 14px;
    border: 1.5px solid #d7d7dc;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.18s var(--app-ease), box-shadow 0.18s var(--app-ease);
}

.at-appbar__search-wrap:hover {
    border-color: #c2c2c7;
}

.at-appbar__search-wrap:focus-within,
.at-appbar__search.is-open .at-appbar__search-wrap {
    border-color: var(--app-accent, var(--secondary-color, #e41f27));
    box-shadow: 0 0 0 3px rgba(228, 31, 39, 0.18);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .at-appbar__search-wrap:focus-within,
    .at-appbar__search.is-open .at-appbar__search-wrap {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent, var(--secondary-color, #e41f27)) 18%, transparent);
    }
}

.at-appbar__search-icon {
    flex: 0 0 auto;
    display: flex;
    color: #636366;
}

.at-appbar__search-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.at-appbar__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: #1c1c1e;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.at-appbar__search-clear {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(120, 120, 128, 0.16);
    color: #636366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.at-appbar__search-clear[hidden],
.at-appbar__search-loader[hidden],
.at-appbar__search-panel[hidden],
.at-appbar__search-panel [hidden] {
    display: none !important;
}

.at-appbar__search-clear svg {
    width: 12px;
    height: 12px;
}

.at-appbar__search-loader {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.at-appbar__search-panel {
    position: fixed;
    z-index: 10120;
    display: none;
    max-height: min(68vh, 480px);
    overflow-y: auto;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.at-appbar__search-panel.is-visible {
    display: block;
}

.at-appbar__search-panel .at-search-section-title {
    margin-top: 0;
}

.at-appbar__search-panel .at-search-item {
    box-shadow: none;
}

#at-search-overlay {
    display: none !important;
    pointer-events: none !important;
}

.at-appbar__tool {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: #1c1c1e;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 10px;
    position: relative;
}

.at-appbar__tool-label {
    white-space: nowrap;
}

.at-appbar__caret {
    width: 12px;
    height: 12px;
}

.at-appbar__more {
    position: relative;
    overflow: visible;
}

.at-appbar__more > summary {
    list-style: none;
}

.at-appbar__more > summary::-webkit-details-marker {
    display: none;
}

.at-appbar__more-menu {
    position: fixed;
    top: auto;
    right: auto;
    z-index: 10120;
    min-width: 196px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.at-appbar__more-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: #1c1c1e;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.at-appbar__more-menu a:hover,
.at-appbar__more-menu a.is-active {
    background: #f2f2f7;
    color: var(--app-accent, var(--secondary-color));
}

.at-appbar__more[open] .at-appbar__caret {
    transform: rotate(180deg);
}

.at-appbar__btn,
.offcanvas__header--menu__open--btn.at-appbar__btn,
.header__account--btn.at-appbar__btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: rgba(120, 120, 128, 0.08) !important;
    color: #1c1c1e !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    position: relative;
    transition: background 0.18s var(--app-ease), transform 0.12s var(--app-ease), color 0.18s var(--app-ease);
    -webkit-tap-highlight-color: transparent;
}

.at-appbar__btn:hover,
.at-appbar__btn:focus {
    background: rgba(120, 120, 128, 0.14) !important;
    color: #1c1c1e !important;
}

.at-appbar__btn:active {
    transform: scale(0.94);
}

.at-appbar__btn svg,
.offcanvas__header--menu__open--svg {
    width: 20px !important;
    height: 20px !important;
    display: block;
    stroke: currentColor !important;
    fill: none !important;
}

.at-appbar__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 46%;
    justify-content: center;
    pointer-events: auto;
}

.at-appbar__logo .main__logo--title {
    margin: 0;
    line-height: 1;
}

.at-appbar__logo .main__logo--img {
    max-height: 30px !important;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.at-appbar__actions .header__account--wrapper {
    gap: 8px !important;
    margin: 0 !important;
}

.at-appbar__actions .header__account--items {
    margin: 0 !important;
    padding: 0 !important;
}

.at-appbar__badge.items__count,
.at-appbar .items__count {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: var(--app-accent) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    border: 2px solid #fff !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.at-appbar__badge.items__count.is-empty,
.at-appbar .items__count.is-empty {
    display: none !important;
}

@media only screen and (max-width: 991px) {
    :root {
        --app-header-h: 156px;
    }

    .main__header.header__sticky.at-appbar,
    .main__header.header__sticky,
    .main__header.header__sticky.sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10040 !important;
        padding-top: var(--app-safe-top) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        -webkit-backdrop-filter: saturate(180%) blur(22px);
        backdrop-filter: saturate(180%) blur(22px);
    }

    /* Reserve space so content doesn't jump under fixed app bar */
    .header__section {
        padding-top: calc(var(--app-header-h) + var(--app-safe-top)) !important;
    }

    .main__header .container-fluid,
    .main__header .at-appbar__container,
    .main__content_wrapper .container,
    footer .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .main__header--inner.at-appbar__inner {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        grid-template-rows: 52px auto;
        align-items: center;
        min-height: 0;
        height: auto;
        gap: 0 8px;
        padding: 0 2px 8px;
    }

    .at-appbar__action {
        grid-column: 1;
        grid-row: 1;
        flex: none;
        width: 44px;
        display: flex;
        align-items: center;
    }

    .at-appbar__logo {
        grid-column: 2;
        grid-row: 1;
        position: relative;
        left: auto;
        transform: none;
        max-width: none;
        justify-content: center;
    }

    .at-appbar__search {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 4px 2px 0;
    }

    .at-appbar__search-wrap {
        height: 40px;
        border-radius: 12px;
        background: #f2f2f7;
        border-color: transparent;
    }

    .at-appbar__search-wrap:focus-within,
    .at-appbar__search.is-open .at-appbar__search-wrap {
        background: #fff;
        border-color: var(--app-accent, var(--secondary-color, #e41f27));
    }

    .at-appbar__search-input {
        font-size: 16px;
    }

    .at-appbar__actions {
        grid-column: 3;
        grid-row: 1;
        flex: none;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .at-appbar__actions .header__account--wrapper {
        gap: 0 !important;
        width: 100%;
        justify-content: flex-end;
    }

    .at-appbar__vehicle-desktop,
    .at-appbar__more-item,
    .at-appbar__account-item,
    .header__account--search__items,
    .at-app-search-bar {
        display: none !important;
    }

    .at-appbar__tool-label {
        display: none !important;
    }

    .at-appbar__logo .main__logo--img {
        max-height: 26px !important;
        max-width: 148px !important;
    }

    .at-appbar__btn,
    .offcanvas__header--menu__open--btn.at-appbar__btn,
    .header__account--btn.at-appbar__btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 12px !important;
        background: rgba(118, 118, 128, 0.10) !important;
    }

    .at-appbar__vehicle {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        padding: 0 8px 10px 12px;
    }
}

.at-appbar__vehicle {
    display: none;
}

.at-vehicle-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px 4px 2px;
    color: #111;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    border: 1.5px solid transparent;
    border-radius: 10px;
    transition: border-color 0.18s var(--app-ease), box-shadow 0.18s var(--app-ease);
}

.at-vehicle-trigger.is-open {
    border-color: var(--app-accent, var(--secondary-color, #e41f27));
    box-shadow: 0 0 0 3px rgba(228, 31, 39, 0.18);
}

.at-vehicle-trigger.is-open .at-vehicle-trigger__caret {
    transform: rotate(180deg);
    color: var(--app-accent, var(--secondary-color, #e41f27));
}

.at-vehicle-trigger__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
}

.at-vehicle-trigger__icon svg,
.at-vehicle-trigger__svg {
    width: 32px !important;
    height: 32px !important;
    display: block;
    fill: none !important;
    stroke: none !important;
    overflow: visible;
}

.at-vehicle-trigger__car {
    fill: currentColor !important;
    stroke: none !important;
}

.at-vehicle-trigger__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    text-align: left;
    line-height: 1.15;
}

.at-vehicle-trigger__title-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.at-vehicle-trigger__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111;
    line-height: 1.2;
}

.at-vehicle-trigger__sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #8e8e93;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.at-vehicle-trigger__caret {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: #8e8e93;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s var(--app-ease);
}

.at-vehicle-trigger__caret svg {
    width: 12px;
    height: 12px;
    display: block;
}

@media only screen and (max-width: 991px) {
    .at-vehicle-trigger__sub {
        max-width: min(68vw, 240px);
    }
}

@media only screen and (min-width: 992px) {
    .main__header .container-fluid,
    .main__header .at-appbar__container,
    .main__content_wrapper .container,
    footer .container {
        padding-left: 28px !important;
        padding-right: 28px !important;
        max-width: 1280px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    @media only screen and (min-width: 1400px) {
        .main__header .at-appbar__container,
        .main__content_wrapper .container,
        footer .container {
            max-width: 1360px;
        }
    }

    .main__header.header__sticky.at-appbar,
    .main__header.header__sticky {
        padding: 0 !important;
    }

    .main__header--inner.at-appbar__inner {
        display: grid !important;
        grid-template-columns: minmax(140px, 180px) minmax(280px, 1fr) auto;
        align-items: center;
        column-gap: 20px;
        min-height: 64px !important;
        height: 64px;
        padding: 0 !important;
    }

    .at-app-search-bar {
        display: none !important;
    }

    .at-appbar__action {
        display: none !important;
    }

    .at-appbar__logo {
        position: static;
        left: auto;
        transform: none;
        max-width: none;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
    }

    .at-appbar__logo .main__logo--title {
        margin: 0;
        line-height: 0;
    }

    .at-appbar__logo .main__logo--link {
        display: inline-flex;
        align-items: center;
        height: 40px;
    }

    .at-appbar__logo .main__logo--img {
        max-height: 34px !important;
        max-width: 168px !important;
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .at-appbar__search {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        min-width: 0;
    }

    .at-appbar__search-wrap {
        height: 42px;
        border-radius: 999px;
        border: 1px solid #e5e7eb;
        background: #f8fafc;
        padding: 0 14px 0 16px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .at-appbar__search-wrap:hover {
        border-color: #d1d5db;
        background: #fff;
    }

    .at-appbar__search-wrap:focus-within,
    .at-appbar__search.is-open .at-appbar__search-wrap {
        background: #fff;
        border-color: var(--app-accent, var(--secondary-color, #e41f27));
    }

    .at-appbar__search-input {
        font-size: 14px;
        font-weight: 500;
    }

    .at-appbar__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        flex: 0 0 auto;
    }

    .at-appbar__btn {
        background: transparent !important;
    }

    .at-appbar__btn:hover {
        background: rgba(120, 120, 128, 0.10) !important;
    }

    .at-appbar__actions .header__account--wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 4px !important;
        list-style: none;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        min-height: 48px;
    }

    .at-appbar__actions .header__account--items {
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        height: 40px;
    }

    .at-appbar__vehicle {
        display: none !important;
    }

    .at-appbar__vehicle-desktop {
        display: flex !important;
        margin-right: 0 !important;
    }

    .at-appbar__vehicle-desktop .at-vehicle-trigger {
        height: 40px;
        min-height: 40px;
        padding: 0 12px 0 10px;
        border-radius: 999px;
        border: 0;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    .at-appbar__vehicle-desktop .at-vehicle-trigger:hover,
    .at-appbar__vehicle-desktop .at-vehicle-trigger.is-open {
        background: #fff;
        box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--app-accent, #e41f27) 45%, transparent);
    }

    .at-appbar__more-btn,
    .at-appbar__actions .at-appbar__tool {
        height: 40px !important;
        min-width: 40px;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: transparent;
    }

    .at-appbar__actions .at-appbar__tool:hover,
    .at-appbar__more[open] > .at-appbar__more-btn {
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    .at-appbar__account-item .at-appbar__tool,
    .header__minicart--items .at-appbar__tool {
        width: 40px;
        padding: 0 !important;
        justify-content: center;
    }

    .at-vehicle-trigger__sub {
        max-width: 148px;
    }

    .at-vehicle-trigger__copy {
        gap: 1px;
    }

    .at-vehicle-trigger__title {
        font-size: 11px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 700;
    }

    .at-vehicle-trigger__sub {
        font-size: 12.5px;
        font-weight: 650;
        color: #111827;
    }
}

.header__menu--link.active,
.header__menu--link:hover {
    color: var(--app-accent) !important;
}

/* =========================================================
   BOTTOM TAB BAR — premium frosted native chrome
   ========================================================= */
.offcanvas__stikcy--toolbar.at-tabbar,
.offcanvas__stikcy--toolbar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    z-index: 10050 !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Kill old theme chrome */
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.at-tabbar {
    padding: 0 10px calc(8px + var(--app-safe-bottom)) !important;
    pointer-events: none;
}

.at-tabbar__list {
    pointer-events: auto;
    display: flex !important;
    align-items: stretch;
    justify-content: space-between;
    gap: 2px;
    margin: 0 !important;
    padding: 6px 6px !important;
    list-style: none !important;
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 18px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 8px 28px rgba(0, 0, 0, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .at-tabbar__list {
        background: rgba(255, 255, 255, 0.97) !important;
    }
}

.offcanvas__stikcy--toolbar__list,
.at-tabbar__item {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.offcanvas__stikcy--toolbar__btn,
.at-tabbar__btn {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: 52px;
    padding: 6px 4px !important;
    margin: 0 !important;
    color: #8e8e93 !important;
    text-decoration: none !important;
    border-radius: 14px !important;
    background: transparent !important;
    transition: color 0.18s var(--app-ease), background 0.18s var(--app-ease), transform 0.12s var(--app-ease);
    -webkit-tap-highlight-color: transparent;
}

.offcanvas__stikcy--toolbar__btn:hover,
.at-tabbar__btn:hover {
    color: #636366 !important;
    background: transparent !important;
}

.offcanvas__stikcy--toolbar__btn:active,
.at-tabbar__btn:active {
    transform: scale(0.94);
}

/* Kill old circular colored icon backgrounds from style.css */
.offcanvas__stikcy--toolbar__icon,
.at-tabbar__icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    color: inherit !important;
}

.offcanvas__stikcy--toolbar__icon svg,
.at-tabbar__icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
    stroke: currentColor !important;
    fill: none !important;
}

/* Active — premium filled accent chip */
.offcanvas__stikcy--toolbar__btn.active,
.at-tabbar__btn.active {
    color: var(--app-accent) !important;
    background: color-mix(in srgb, var(--app-accent) 10%, transparent) !important;
}

.offcanvas__stikcy--toolbar__btn.active .at-tabbar__icon svg,
.at-tabbar__btn.active .at-tabbar__icon svg {
    stroke-width: 2.1;
}

.offcanvas__stikcy--toolbar__label,
.at-tabbar__label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    color: inherit !important;
    white-space: nowrap;
}

.offcanvas__stikcy--toolbar__btn.active .at-tabbar__label,
.at-tabbar__btn.active .at-tabbar__label {
    font-weight: 700 !important;
}

/* Cart badge — crisp pill, number centered */
.offcanvas__stikcy--toolbar__badge,
.at-tabbar__badge {
    position: absolute !important;
    top: 4px !important;
    right: calc(50% - 18px) !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: var(--app-accent) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    pointer-events: none;
    box-sizing: border-box !important;
    box-shadow: 0 0 0 2px #fff;
    border: 0 !important;
}

/* Override old style.css hover that turns icon white on theme bg */
.offcanvas__stikcy--toolbar__btn:hover .offcanvas__stikcy--toolbar__icon,
.offcanvas__stikcy--toolbar__btn:hover .at-tabbar__icon {
    background: transparent !important;
    color: inherit !important;
}

body.is-pdp .offcanvas__stikcy--toolbar,
body.is-pdp .at-tabbar {
    display: none !important;
}

@media all and (display-mode: standalone) {
    .at-tabbar {
        padding-bottom: calc(10px + var(--app-safe-bottom)) !important;
    }

    .at-tabbar__list {
        border-radius: 20px !important;
    }
}

/* =========================================================
   HOME — Hero full-bleed
   ========================================================= */
.hero__slider--section {
    background: var(--app-bg);
}

@media only screen and (max-width: 991px) {
    .hero__slider--items.style4 {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 0 !important;
    }

    .hero__slider--items.style4 .slider__layer--img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 0;
        object-fit: cover;
    }

    .hero__slider--activation .swiper-button-next,
    .hero__slider--activation .swiper-button-prev {
        display: none !important;
    }

    .hero__slider--activation .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }

    .banner__section .container,
    .categories__section .container,
    .product__section .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100%;
    }

    .banner__section {
        padding-top: 12px !important;
    }

    .bannerSwiper {
        padding: 0 0 8px !important;
    }

    .banner__items,
    .banner__thumbnail--img {
        border-radius: var(--app-radius) !important;
        overflow: hidden;
    }

    .section--padding {
        padding-top: 16px !important;
        padding-bottom: 12px !important;
    }
}

/* Section titles — marketplace style */
.section__heading {
    border-bottom: none !important;
    margin-bottom: 12px !important;
}

.section__heading--maintitle {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--app-ink) !important;
    margin: 0 !important;
}

.section__heading--maintitle span {
    color: var(--app-accent) !important;
}

@media only screen and (max-width: 991px) {
    .section__heading--flex {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .tab__btn--wrapper {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 60%;
        padding-bottom: 2px;
    }

    .tab__btn--wrapper::-webkit-scrollbar {
        display: none;
    }

    .tab__btn--link {
        white-space: nowrap;
        padding: 6px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 999px !important;
        background: #fff !important;
        border: 1px solid var(--app-hairline) !important;
        color: var(--app-ink-soft) !important;
    }

    .tab__btn--link.active {
        background: var(--app-accent) !important;
        border-color: var(--app-accent) !important;
        color: #fff !important;
    }
}

.at-view-all {
    font-size: 12px;
    font-weight: 700;
    color: var(--app-accent);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.at-view-all:hover {
    color: var(--app-accent);
    opacity: 0.85;
}

/* =========================================================
   CATEGORIES — horizontal chip strip (Flipkart)
   ========================================================= */
@media only screen and (max-width: 991px) {
    .categories__grid--home {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        padding: 4px 2px 12px;
        margin: 0 !important;
        scrollbar-width: none;
    }

    .categories__grid--home::-webkit-scrollbar {
        display: none;
    }

    .categories__grid--home > [class*="col-"] {
        flex: 0 0 auto !important;
        width: 76px !important;
        max-width: 76px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .categories__grid--home .categories__card--style3 {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .categories__grid--home .categories__thumbnail {
        width: 64px !important;
        height: 64px !important;
        aspect-ratio: 1 !important;
        margin: 0 auto;
        border-radius: var(--app-radius) !important;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--app-hairline);
        box-shadow: var(--app-shadow-card);
    }

    .categories__grid--home .categories__thumbnail--img {
        object-fit: cover !important;
        width: 100%;
        height: 100%;
    }

    .categories__grid--home .categories__content.style3 {
        position: static !important;
        opacity: 1 !important;
        background: none !important;
        padding: 6px 0 0 !important;
        pointer-events: auto !important;
        align-items: center !important;
    }

    .categories__grid--home .categories__content--title {
        opacity: 1 !important;
        transform: none !important;
        color: var(--app-ink) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* =========================================================
   PRODUCT CARDS — native 10px Apple-style surfaces
   ========================================================= */
.product__card {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-hairline) !important;
    border-radius: var(--app-radius) !important;
    overflow: hidden;
    height: 100%;
    box-shadow: var(--app-shadow-card) !important;
    transition: box-shadow 0.2s var(--app-ease), transform 0.15s var(--app-ease);
}

.product__card:active {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    transform: scale(0.985);
}

.product__card--thumbnail {
    position: relative;
    background: #fafafa;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.product__card--thumbnail__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--app-accent) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    z-index: 2;
    letter-spacing: 0.02em;
}

.product__card--content {
    padding: 8px 10px 12px !important;
}

.product__card--model-tag {
    font-size: 10px !important;
    color: var(--app-ink-muted) !important;
    letter-spacing: 0.04em;
}

.product__card--model-marquee {
    font-size: 10px !important;
    color: var(--app-ink-muted) !important;
    letter-spacing: 0.04em;
}

.product__card--title {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 4px 0 6px !important;
    min-height: 0 !important;
}

.product__card--title-link {
    color: var(--app-ink) !important;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product__card--price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.product__card--price .current__price,
.current__price,
.product__card--current-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--app-ink) !important;
}

.product__card--price .old__price,
.old__price,
.product__card--old-price {
    font-size: 12px !important;
    color: var(--app-ink-muted) !important;
    text-decoration: line-through;
}

.product__card--discount-lbl {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #388e3c !important;
}

.product__card--price-box {
    flex-wrap: wrap;
    gap: 4px 8px;
}

.product__card--rating-wrapper {
    margin: 2px 0 4px;
}

.product__card--rating-count {
    font-size: 11px;
    color: var(--app-ink-muted);
}

@media only screen and (max-width: 991px) {
    .product__wrapper .row,
    .product__grid--inner .row,
    .shop__product--wrapper .row {
        margin-left: -4px !important;
        margin-right: -4px !important;
    }

    .product__wrapper .row > [class*="col-"],
    .product__grid--inner .row > [class*="col-"],
    .shop__product--wrapper .row > [class*="col-"],
    .custom-col {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 8px !important;
    }

    .product__wrapper .mb--n30,
    .mb--n30 {
        margin-bottom: 0 !important;
    }

    .mb-30 {
        margin-bottom: 8px !important;
    }
}

/* Segment badge uses theme */
.product__card--content .badge {
    background-color: color-mix(in srgb, var(--app-accent) 10%, #fff) !important;
    color: var(--app-accent) !important;
    border-color: color-mix(in srgb, var(--app-accent) 30%, transparent) !important;
}

/* =========================================================
   CATALOG — sticky sort/filter bar (Myntra)
   ========================================================= */
/* =========================================================
   SHOP LIST — Myntra-style Sort | Filter toolbar
   ========================================================= */
@media only screen and (max-width: 991px) {
    .shop__section .breadcrumb__section,
    .shop__section .breadcrumb__content {
        display: none !important;
    }

    .shop__header.mb-30 {
        margin-bottom: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .at-shop-toolbar {
        position: sticky;
        top: 100px;
        z-index: 45;
        background: #fff;
        margin: 0 0 10px;
        border: 1px solid var(--app-hairline);
        border-radius: var(--app-radius);
        overflow: hidden;
        box-shadow: var(--app-shadow-card);
    }

    .at-shop-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid #f0f0f0;
    }

    .at-shop-toolbar__sort,
    .at-shop-toolbar__filter {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 8px 12px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #212121 !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .at-shop-toolbar__sort {
        border-right: 1px solid #eee !important;
        position: relative;
    }

    .at-shop-toolbar__sort svg,
    .at-shop-toolbar__filter svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        color: #616161;
    }

    .at-shop-sort-select {
        appearance: none;
        -webkit-appearance: none;
        border: none !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #212121 !important;
        padding: 0 14px 0 0 !important;
        margin: 0 !important;
        max-width: 110px;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23616161' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right center !important;
    }

    .at-shop-toolbar__count {
        margin: 0;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        color: #878787;
        background: #fafafa;
    }

    /* Hide old sticky bar if any leftover */
    .at-shop-sticky-bar {
        display: none !important;
    }

    .shop__section .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .shop__product--wrapper .custom-col,
    .productContainer .custom-col {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 8px !important;
    }

    .shop__product--wrapper .product__card,
    .productContainer .product__card {
        border-radius: var(--app-radius) !important;
        border: 1px solid var(--app-hairline) !important;
        overflow: hidden;
        box-shadow: var(--app-shadow-card) !important;
    }

    .shop__product--wrapper .product__card--content,
    .productContainer .product__card--content {
        padding: 8px !important;
    }

    .shop__product--wrapper .product__card--title,
    .productContainer .product__card--title,
    .shop__product--wrapper .product__card--title-link,
    .productContainer .product__card--title-link {
        font-size: 12px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    .shop__product--wrapper .product__card--current-price,
    .productContainer .product__card--current-price {
        font-size: 13px !important;
        color: #212121 !important;
    }

    .shop__product--wrapper .product__card--old-price,
    .productContainer .product__card--old-price {
        font-size: 11px !important;
    }

    .offcanvas__filter--sidebar {
        border-radius: var(--app-radius-sheet) var(--app-radius-sheet) 0 0 !important;
    }
}

/* =========================================================
   SHOP FILTER — native mobile bottom sheet
   ========================================================= */
@media only screen and (max-width: 991px) {
    body.offcanvas__filter--sidebar_active {
        overflow: hidden !important;
    }

    body.offcanvas__filter--sidebar_active::before {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10080 !important;
        background: rgba(0, 0, 0, 0.55) !important;
        opacity: 1 !important;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        cursor: pointer !important;
    }

    .offcanvas__filter--sidebar {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        inset: auto 0 0 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        height: min(92dvh, 920px) !important;
        max-height: 92dvh !important;
        transform: translateY(110%) !important;
        border-radius: 18px 18px 0 0 !important;
        background: #fff !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2) !important;
        z-index: 10090 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
        box-sizing: border-box !important;
    }

    .offcanvas__filter--sidebar.active {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .offcanvas__filter--sidebar .offcanvas__filter--close {
        position: relative;
        z-index: 5;
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100% !important;
        margin: 0 !important;
        padding: 22px 16px 14px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--app-hairline) !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: var(--app-ink) !important;
        font-weight: 700 !important;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    }

    .offcanvas__filter--sidebar .offcanvas__filter--close::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 99px;
        background: #d1d1d6;
    }

    .offcanvas__filter--sidebar .offcanvas__filter--close .minicart__close--icon {
        width: 18px;
        height: 18px;
        order: 2;
    }

    .offcanvas__filter--sidebar .offcanvas__filter--close__text {
        font-size: 16px !important;
        font-weight: 750 !important;
        margin-left: 0 !important;
        order: 1;
        letter-spacing: -0.02em;
    }

    .offcanvas__filter--sidebar .offcanvas__filter--sidebar__inner {
        flex: 1 1 auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
        width: 100% !important;
        max-width: none !important;
    }

    .offcanvas__filter--sidebar .single__widget.widget__bg {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
    }

    .offcanvas__filter--sidebar .filter-scrollable {
        flex: 1 1 auto;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 4px 14px calc(20px + var(--app-safe-bottom)) !important;
        max-height: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .offcanvas__filter--sidebar #mobileProductFilterForm {
        width: 100% !important;
        max-width: none !important;
        display: block;
    }

    /* Kill desktop sidebar max-width — use full sheet width */
    .offcanvas__filter--sidebar .title-border {
        border-bottom: 1px solid var(--app-hairline) !important;
        padding: 12px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .offcanvas__filter--sidebar .widget__categories--sub__menu,
    .offcanvas__filter--sidebar .widget__categories--sub__menu--list,
    .offcanvas__filter--sidebar .floor-mat-submenu,
    .offcanvas__filter--sidebar .model-dropdown,
    .offcanvas__filter--sidebar .price__filter--form,
    .offcanvas__filter--sidebar .price__filter--form__inner {
        width: 100% !important;
        max-width: none !important;
    }

    .offcanvas__filter--sidebar .widget__title,
    .offcanvas__filter--sidebar .menu__title .widget__title,
    .offcanvas__filter--sidebar h2.widget__title {
        font-size: 15px !important;
        font-weight: 750 !important;
        letter-spacing: -0.02em;
        color: var(--app-ink) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .offcanvas__filter--sidebar .reset-filters-btn {
        background: color-mix(in srgb, var(--app-accent) 10%, transparent) !important;
        color: var(--app-accent) !important;
        border: 0 !important;
        border-radius: 8px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        gap: 0 !important;
    }

    .offcanvas__filter--sidebar .reset-filters-btn .reset-text {
        position: static !important;
        opacity: 1 !important;
        left: auto !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    .offcanvas__filter--sidebar label,
    .offcanvas__filter--sidebar .widget__categories--sub__menu--list label,
    .offcanvas__filter--sidebar .floor-mat-submenu label {
        font-size: 14px !important;
        font-weight: 550 !important;
        color: var(--app-ink) !important;
        gap: 10px;
        margin-top: 0 !important;
        min-height: 40px;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .offcanvas__filter--sidebar .mt-3 {
        margin-top: 0 !important;
    }

    .offcanvas__filter--sidebar .mb-3 {
        margin-bottom: 4px !important;
    }

    .offcanvas__filter--sidebar .mt-4 {
        margin-top: 6px !important;
    }

    .offcanvas__filter--sidebar .ms-4 {
        margin-left: 12px !important;
    }

    .offcanvas__filter--sidebar .custom-checkbox {
        width: 18px !important;
        height: 18px !important;
        accent-color: var(--app-accent);
        flex-shrink: 0;
    }

    .offcanvas__filter--sidebar .category-checkbox-toggle,
    .offcanvas__filter--sidebar .menu__title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 44px;
        padding: 4px 0;
        gap: 8px;
    }

    .offcanvas__filter--sidebar .category-checkbox-toggle > svg,
    .offcanvas__filter--sidebar .menu__title > svg {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Colour swatches — readable grid */
    .offcanvas__filter--sidebar .color-dropdown,
    .offcanvas__filter--sidebar #mobileColourList {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px 6px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 12px 0 0 !important;
        padding: 0 0 8px !important;
        box-sizing: border-box !important;
    }

    .offcanvas__filter--sidebar .color-item {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: 0 !important;
        gap: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 2px 0 !important;
        flex: unset !important;
    }

    .offcanvas__filter--sidebar .color-circle {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        border: 2px solid #e5e5ea !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .offcanvas__filter--sidebar .color-checkbox:checked + .color-circle {
        border-color: var(--app-accent) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 25%, transparent);
    }

    .offcanvas__filter--sidebar .color-label {
        font-size: 11px !important;
        line-height: 1.25 !important;
        margin-top: 0 !important;
        color: var(--app-ink-soft) !important;
        width: 100% !important;
        max-width: none !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
        flex: unset !important;
        min-height: 0 !important;
    }

    .offcanvas__filter--sidebar .checkmark {
        top: 2px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 14px !important;
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    }

    .offcanvas__filter--sidebar .price__filter--form__inner {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .offcanvas__filter--sidebar .price__filter--input {
        border-radius: 10px !important;
        background: #f7f7f8 !important;
        border: 1px solid #e1e3e8 !important;
        min-height: 44px;
        padding: 0 10px;
    }

    .offcanvas__filter--sidebar .price__filter--input__field {
        font-size: 14px !important;
        background: transparent !important;
    }

    .offcanvas__filter--sidebar .color-list,
    .offcanvas__filter--sidebar .widget__color--list,
    .offcanvas__filter--sidebar ul[class*="color"] {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .offcanvas__filter--sidebar .color-list li,
    .offcanvas__filter--sidebar .widget__color--list li {
        margin: 0 !important;
        width: auto !important;
    }

    .offcanvas__filter--sidebar .color-list label,
    .offcanvas__filter--sidebar .widget__color--list label {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 0;
        font-size: 10px !important;
        line-height: 1.2;
        gap: 6px;
    }

    /* Hide chrome while filter sheet is open */
    body.offcanvas__filter--sidebar_active .offcanvas__stikcy--toolbar,
    body.offcanvas__filter--sidebar_active .at-tabbar,
    body.offcanvas__filter--sidebar_active .flotting-incone-whatsapp,
    body.offcanvas__filter--sidebar_active .float,
    body.offcanvas__filter--sidebar_active .whatsapp-float-container,
    body.offcanvas__filter--sidebar_active .whatsapp-float-btn,
    body.offcanvas__filter--sidebar_active .autotech-chatbot-trigger,
    body.offcanvas__filter--sidebar_active .at-assistant-fab {
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        z-index: 0 !important;
    }

    /* Selected filter labels — keep ink color (checkbox shows state) */
    body.is-static-site .offcanvas__filter--sidebar input[type="checkbox"]:checked + span,
    .offcanvas__filter--sidebar input[type="checkbox"]:checked + span,
    .offcanvas__filter--sidebar .custom-checkbox:checked + span,
    .offcanvas__filter--sidebar label:has(input:checked) span {
        color: var(--app-ink) !important;
        font-weight: 650 !important;
    }

    .offcanvas__filter--sidebar .menu__title {
        align-items: center !important;
        min-height: 44px;
        gap: 8px;
    }

    .offcanvas__filter--sidebar .reset-filters-btn {
        align-self: center;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .offcanvas__filter--sidebar .floor-mat-submenu {
        padding: 4px 0 8px 8px !important;
        margin-left: 8px !important;
        border-left: 2px solid color-mix(in srgb, var(--app-accent) 25%, transparent);
    }

    .offcanvas__filter--sidebar .floor-mat-submenu li {
        margin-bottom: 2px !important;
    }

    .offcanvas__filter--sidebar .floor-mat-submenu label {
        min-height: 38px !important;
        padding: 4px 0 !important;
    }

    .offcanvas__filter--sidebar .color-dropdown,
    .offcanvas__filter--sidebar #mobileColourList {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px 6px !important;
        width: 100% !important;
        max-width: none !important;
    }

    .offcanvas__filter--sidebar .color-circle {
        width: 48px !important;
        height: 48px !important;
    }

    .offcanvas__filter--sidebar .color-label {
        font-size: 11px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
        width: 100% !important;
        max-width: none !important;
    }

    .offcanvas__filter--sidebar .offcanvas__filter--close__text {
        font-size: 0 !important;
        margin-left: 0 !important;
        order: 1;
    }

    .offcanvas__filter--sidebar .offcanvas__filter--close__text::before {
        content: "Filters";
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--app-ink);
    }

    .offcanvas__filter--sidebar,
    .offcanvas__filter--sidebar.active {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
}

.offcanvas__filter--sidebar {
    background: var(--app-surface) !important;
}

/* Desktop cart sticky remains below */
.at-mobile-sticky-bar {
    padding-bottom: calc(10px + var(--app-safe-bottom)) !important;
    background: var(--app-surface) !important;
    border-top: 1px solid var(--app-hairline) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    z-index: 10060 !important;
}

.at-mobile-buy {
    background: var(--app-accent) !important;
    border-radius: var(--app-radius) !important;
    font-weight: 700 !important;
}

.at-mobile-cart {
    border-radius: var(--app-radius) !important;
    border-color: var(--app-accent) !important;
    color: var(--app-accent) !important;
}

/* =========================================================
   CART / ACCOUNT / AUTH — unified 10px cards
   ========================================================= */
.cart__table,
.cart__summary,
.checkout__sidebar,
.account-sidebar,
.account-content,
.my__account--wrapper {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-hairline) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-card);
}

.primary__btn,
.cart__continue--btn,
.checkout__btn,
.btn.btn-primary,
.minicart__checkout--button,
.account__login--btn,
.login__btn,
.form-container .btn-primary,
.form-container button[type="submit"],
.form-container .submit-btn,
.form-container .login-btn {
    background: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    border-radius: var(--app-radius) !important;
    font-weight: 700 !important;
}

.form-container {
    background: var(--app-surface);
    border: 1px solid var(--app-hairline);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-card);
}

.form-control:focus {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 18%, transparent) !important;
}

/* =========================================================
   SEARCH / MINICART
   ========================================================= */
/* Search / chatbot overlays already handle chrome — keep lock helpers */
body.at-chatbot-lock,
html.at-chatbot-lock {
    overflow: hidden !important;
    touch-action: none;
    overscroll-behavior: none;
    height: 100%;
}

/* Search sheet styles live in search.css — do not override sheet chrome here */

.offCanvas__minicart {
    background: #fff !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
    z-index: 10080 !important;
}

/* =========================================================
   CART SHEET — premium native (bottom sheet mobile / drawer desktop)
   ========================================================= */
.offCanvas__minicart.at-cart-sheet {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden;
    opacity: 0;
}

.offCanvas__minicart.at-cart-sheet.active {
    visibility: visible;
    opacity: 1;
}

.at-cart-sheet__handle {
    display: none;
    justify-content: center;
    padding: 10px 0 2px;
    flex-shrink: 0;
}

.at-cart-sheet__handle span {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #d1d1d6;
}

.at-cart-sheet__header,
.offCanvas__minicart .minicart__header {
    flex-shrink: 0;
    padding: 14px 16px 12px !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.1);
    margin: 0 !important;
}

.offCanvas__minicart .minicart__header--top {
    margin: 0 !important;
}

.offCanvas__minicart .minicart__title {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #1c1c1e !important;
}

.at-cart-sheet__close,
.offCanvas__minicart .minicart__close--btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    background: rgba(120, 120, 128, 0.1) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transform: none !important;
    color: #1c1c1e !important;
}

.at-cart-sheet__close:hover,
.offCanvas__minicart .minicart__close--btn:hover {
    transform: none !important;
    color: #1c1c1e !important;
    background: rgba(120, 120, 128, 0.16) !important;
}

.at-cart-sheet__close svg,
.offCanvas__minicart .minicart__close--icon {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
}

.at-cart-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 16px;
}

.offCanvas__minicart .minicart__product > p.text-center {
    padding: 40px 16px;
    margin: 0;
    color: #8e8e93;
    font-size: 14px;
    font-weight: 500;
}

.offCanvas__minicart .minicart__product--items {
    margin: 0 !important;
    padding: 14px 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.08);
    gap: 12px;
    align-items: flex-start;
}

.offCanvas__minicart .minicart__thumb {
    width: 72px !important;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #f2f2f7;
    border: 1px solid rgba(60, 60, 67, 0.08);
}

.offCanvas__minicart .minicart__thumb img {
    width: 100%;
    height: 72px;
    object-fit: contain;
    display: block;
}

.offCanvas__minicart .minicart__text {
    width: calc(100% - 84px) !important;
    padding-left: 0 !important;
}

.offCanvas__minicart .minicart__subtitle {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

.offCanvas__minicart .minicart__subtitle a {
    color: #1c1c1e !important;
    text-decoration: none !important;
}

.offCanvas__minicart .color__variant {
    font-size: 12px !important;
    color: #8e8e93 !important;
}

.offCanvas__minicart .minicart__current--price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1c1c1e !important;
}

.offCanvas__minicart .minicart__text--footer {
    margin-top: 8px;
    gap: 10px;
    flex-wrap: wrap;
}

.offCanvas__minicart .quantity__box {
    display: inline-flex !important;
    align-items: center;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.offCanvas__minicart .quantity__value {
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    background: #f2f2f7 !important;
    font-weight: 700 !important;
    color: #1c1c1e !important;
}

.offCanvas__minicart .quantity__number {
    width: 36px !important;
    height: 32px !important;
    border: 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.offCanvas__minicart .minicart__product--remove {
    text-transform: none !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--app-accent) !important;
    opacity: 1 !important;
}

.offCanvas__minicart .offer-section {
    margin-top: 12px !important;
    border: 1px solid rgba(60, 60, 67, 0.1);
    border-radius: 12px;
    overflow: hidden;
    background: #fafafa;
}

.offCanvas__minicart .offer-header {
    background: #f2f2f7 !important;
    padding: 12px 14px !important;
    border: 0 !important;
}

.offCanvas__minicart .offer-header .minicart__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.offCanvas__minicart .offer-item {
    border-radius: 10px !important;
    background: #fff;
    border-color: rgba(60, 60, 67, 0.08) !important;
}

.at-cart-sheet__footer {
    flex-shrink: 0;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(60, 60, 67, 0.1);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.offCanvas__minicart .minicart__amount {
    margin: 0 0 12px !important;
}

.offCanvas__minicart .minicart__amount_list {
    font-size: 14px;
    color: #636366;
    padding: 2px 0;
}

.offCanvas__minicart .minicart__amount_list b {
    color: #1c1c1e;
    font-size: 16px;
}

.offCanvas__minicart .minicart__button {
    margin: 0 !important;
}

.offCanvas__minicart .minicart__button--link,
.offCanvas__minicart .primary__btn.minicart__button--link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
    background: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: #fff !important;
    text-decoration: none !important;
}

@media only screen and (max-width: 991px) {
    .offCanvas__minicart.at-cart-sheet,
    .offCanvas__minicart {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: min(88vh, 720px) !important;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(110%) !important;
        transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s !important;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.16) !important;
    }

    .offCanvas__minicart.at-cart-sheet.active,
    .offCanvas__minicart.active {
        transform: translateY(0) !important;
    }

    .at-cart-sheet__handle {
        display: flex !important;
    }
}

@media only screen and (min-width: 992px) {
    .offCanvas__minicart.at-cart-sheet {
        width: 400px !important;
        max-width: 92vw !important;
        height: 100% !important;
        max-height: 100% !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        border-radius: 0 !important;
        transform: translateX(100%) !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s !important;
    }

    .offCanvas__minicart.at-cart-sheet.active {
        transform: translateX(0) !important;
    }

    .at-cart-sheet__handle {
        display: none !important;
    }
}

.minicart__title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* =========================================================
   FABs — equal size, equal gap (WhatsApp → Chatbot → Scroll)
   ========================================================= */
.whatsapp-float-container {
    bottom: var(--app-fab-base) !important;
    right: var(--app-fab-right) !important;
}

.whatsapp-float-btn {
    width: var(--app-fab-size) !important;
    height: var(--app-fab-size) !important;
}

.autotech-chatbot-trigger {
    bottom: calc(var(--app-fab-base) + var(--app-fab-size) + var(--app-fab-gap)) !important;
    right: var(--app-fab-right) !important;
    width: var(--app-fab-size) !important;
    height: var(--app-fab-size) !important;
}

#scroll__top {
    bottom: calc(var(--app-fab-base) + (var(--app-fab-size) + var(--app-fab-gap)) * 2) !important;
    right: var(--app-fab-right) !important;
    width: var(--app-fab-size) !important;
    height: var(--app-fab-size) !important;
}

.whatsapp-float-btn,
.autotech-chatbot-trigger,
#scroll__top {
    box-sizing: border-box !important;
}

@media only screen and (max-width: 991px) {
    .autotech-chatbot-window {
        bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 12px) !important;
        right: 10px !important;
        max-height: calc(100vh - var(--app-tabbar-h) - 110px) !important;
        border-radius: var(--app-radius) !important;
    }

    body.is-pdp .autotech-chatbot-window {
        bottom: calc(78px + var(--app-safe-bottom) + 12px) !important;
    }

    #scroll__top {
        border-radius: 50% !important;
        background: var(--app-surface) !important;
        color: var(--app-ink) !important;
        border: 1px solid var(--app-hairline) !important;
        box-shadow: var(--app-shadow-card) !important;
    }
}

html.is-pwa-standalone,
body.is-pwa-standalone {
    --app-fab-size: 46px;
    --app-fab-gap: 12px;
    --app-fab-right: 14px;
    --app-fab-base: calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 12px);
}

html.is-pwa-standalone body.is-pdp,
body.is-pwa-standalone.is-pdp {
    --app-fab-base: calc(78px + var(--app-safe-bottom) + 12px);
}

/* =========================================================
   STANDALONE PWA — true app chrome
   ========================================================= */
@media all and (display-mode: standalone) {
    body {
        overscroll-behavior-y: none;
    }

    #scroll__top {
        display: none !important;
    }

    /* Installed PWA: never show bulky web footer */
    .footer--web {
        display: none !important;
    }

    .footer--app {
        display: block !important;
        padding-top: 20px;
        padding-bottom: calc(12px + var(--app-safe-bottom));
    }

    .app-footer__links {
        gap: 4px 12px;
    }

    .app-footer__links a {
        font-size: 11px;
    }
}

/* iOS installed PWA (Safari adds navigator.standalone; class set via JS) */
html.is-pwa-standalone .footer--web,
body.is-pwa-standalone .footer--web {
    display: none !important;
}

html.is-pwa-standalone .footer--app,
body.is-pwa-standalone .footer--app {
    display: block !important;
}

.offcanvas__header {
    background: var(--app-surface) !important;
}

.offcanvas__menu--link:hover,
.offcanvas__menu--link.active {
    color: var(--app-accent) !important;
}

/* =========================================================
   SIDE DRAWER — premium native sheet (fixes stacking mess)
   ========================================================= */
.offcanvas__header.at-drawer,
.offcanvas__header {
    z-index: 10080 !important;
    max-width: min(86vw, 320px) !important;
    height: 100% !important;
    height: 100dvh !important;
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.14) !important;
    border-right: 1px solid rgba(60, 60, 67, 0.08);
    padding-top: var(--app-safe-top);
    padding-bottom: var(--app-safe-bottom);
}

.at-drawer__inner,
.offcanvas__header .offcanvas__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 !important;
    padding-bottom: 0 !important;
}

.at-drawer__head,
.offcanvas__header .offcanvas__logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 14px !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.08);
    flex-shrink: 0;
}

.at-drawer__brand img,
.offcanvas__header .offcanvas__logo--img {
    max-height: 28px !important;
    width: auto !important;
    max-width: 140px;
    object-fit: contain;
}

.at-drawer__close,
.offcanvas__header .offcanvas__close--btn {
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    background: rgba(120, 120, 128, 0.1) !important;
    border: 0 !important;
    text-indent: -9999px;
    flex-shrink: 0;
}

.at-drawer__close::before,
.at-drawer__close::after,
.offcanvas__header .offcanvas__close--btn::before,
.offcanvas__header .offcanvas__close--btn::after {
    background-color: #1c1c1e !important;
    width: 14px !important;
    left: 50% !important;
    margin-left: -7px;
}

.at-drawer__nav,
.offcanvas__header .offcanvas__menu {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
    padding: 12px 12px 24px !important;
}

.at-drawer__list,
.offcanvas__header .offcanvas__menu_ul {
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.offcanvas__header .offcanvas__menu_li {
    border: 0 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

.offcanvas__header .offcanvas__menu_li:first-child {
    border: 0 !important;
}

.offcanvas__header .offcanvas__menu_item {
    display: flex !important;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    color: #1c1c1e !important;
    text-decoration: none !important;
    background: transparent;
    transition: background 0.15s var(--app-ease), color 0.15s var(--app-ease);
}

.offcanvas__header .offcanvas__menu_item:active,
.offcanvas__header .offcanvas__menu_item:hover {
    background: rgba(120, 120, 128, 0.1) !important;
    color: #1c1c1e !important;
}

.offcanvas__header .offcanvas__menu_item.active {
    background: color-mix(in srgb, var(--app-accent) 10%, transparent) !important;
    color: var(--app-accent) !important;
}

.at-drawer__account,
.offcanvas__header .offcanvas__account--items {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(60, 60, 67, 0.08);
}

.at-drawer__account-btn,
.offcanvas__header .offcanvas__account--items__btn {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: #f2f2f7 !important;
    color: #1c1c1e !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.at-drawer__account-icon,
.offcanvas__header .offcanvas__account--items__icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--app-accent) !important;
    color: #fff !important;
    flex-shrink: 0;
}

.at-drawer__account-icon svg,
.offcanvas__header .offcanvas__account--items__icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* Dim page ABOVE tabbar / FABs / header when drawer open */
body.mobile_menu_open::before,
body.overlay__active::before,
body.offCanvas__minicart_active::before {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10070 !important;
    background: rgba(0, 0, 0, 0.42) !important;
    opacity: 1 !important;
    cursor: pointer;
    content: "" !important;
}

/* Hide floating chrome under the drawer overlay */
body.mobile_menu_open .at-tabbar,
body.mobile_menu_open .offcanvas__stikcy--toolbar,
body.mobile_menu_open .whatsapp-float-container,
body.mobile_menu_open .whatsapp-float-btn,
body.mobile_menu_open .autotech-chatbot-trigger,
body.mobile_menu_open #scroll__top,
body.mobile_menu_open .pwa-install-banner,
body.offCanvas__minicart_active .at-tabbar,
body.offCanvas__minicart_active .offcanvas__stikcy--toolbar,
body.offCanvas__minicart_active .whatsapp-float-container,
body.offCanvas__minicart_active .whatsapp-float-btn,
body.offCanvas__minicart_active .autotech-chatbot-trigger,
body.offCanvas__minicart_active #scroll__top,
body.offcanvas__filter--sidebar_active .at-tabbar,
body.offcanvas__filter--sidebar_active .offcanvas__stikcy--toolbar,
body.offcanvas__filter--sidebar_active .whatsapp-float-container,
body.offcanvas__filter--sidebar_active .whatsapp-float-btn,
body.offcanvas__filter--sidebar_active .autotech-chatbot-trigger,
body.offcanvas__filter--sidebar_active #scroll__top {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body.mobile_menu_open .main__header.at-appbar,
body.mobile_menu_open .main__header.header__sticky {
    z-index: 10060 !important;
}


.no-products-found {
    background: var(--app-surface) !important;
    border-radius: var(--app-radius-lg) !important;
    border: 1px solid var(--app-hairline) !important;
}

@media (prefers-reduced-motion: no-preference) {
    .product__card {
        animation: app-card-in 0.4s var(--app-ease) both;
    }
    @keyframes app-card-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* =========================================================
   VISUAL FIX PASS — kill template chrome, Meesho-clean cards
   ========================================================= */

/* Remove cheap red circle bullets on section titles */
.section__heading::before,
.section__heading::after,
.section__heading.style2::before,
.section__heading.style2::after {
    display: none !important;
    content: none !important;
}

.section__heading {
    padding-bottom: 0 !important;
}

.section__heading--maintitle {
    text-transform: none !important;
    padding-left: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: var(--app-ink) !important;
}

.section__heading--maintitle span {
    font-weight: 700 !important;
    color: var(--app-ink) !important;
}

.at-view-all {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--app-accent) !important;
    text-transform: none !important;
}

@media only screen and (max-width: 991px) {
    /* Search pill — flatter, no heavy shadow */
    .at-app-search-pill {
        height: 40px;
        border-radius: var(--app-radius);
        background: #f2f2f7;
        border: 1px solid var(--app-hairline);
        box-shadow: none;
        font-size: 13px;
        color: #9a9a9a;
    }

    /* Popular Products header: title left, chips scroll right — no wrap mess */
    .product__section .section__heading--flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    .product__section .section__heading--flex .section__heading--maintitle {
        width: 100%;
    }

    .product__section .tab__btn--wrapper {
        max-width: 100% !important;
        width: 100%;
        gap: 8px;
    }

    .tab__btn--link {
        padding: 7px 14px !important;
        font-size: 12px !important;
        border-radius: 20px !important;
        flex-shrink: 0;
    }

    /* Categories — rounded SQUARE tiles (not tiny dark circles) */
    .categories__grid--home > [class*="col-"] {
        width: 92px !important;
        max-width: 92px !important;
    }

    .categories__grid--home .categories__thumbnail {
        width: 84px !important;
        height: 84px !important;
        border-radius: var(--app-radius) !important;
        background: #fff !important;
        border: 1px solid var(--app-hairline) !important;
        box-shadow: var(--app-shadow-card) !important;
    }

    .categories__grid--home .categories__thumbnail--img {
        object-fit: contain !important;
        padding: 6px;
        background: #fafafa;
    }

    .categories__grid--home .categories__content--title {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #212121 !important;
        margin-top: 6px;
    }

    /* Product cards — native 10px */
    .product__card {
        border-radius: var(--app-radius) !important;
        border: 1px solid var(--app-hairline) !important;
        background: var(--app-surface) !important;
        box-shadow: var(--app-shadow-card) !important;
    }

    .product__card--thumbnail {
        border-radius: var(--app-radius) var(--app-radius) 0 0 !important;
        background: #fff !important;
    }

    .product__badge {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        line-height: 1 !important;
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
        padding: 4px 7px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        background: var(--app-accent) !important;
    }

    .product__card--content {
        padding: 8px 10px 10px !important;
    }

    .product__card--model-tag {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #878787 !important;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .product__card--title {
        margin: 4px 0 2px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .product__card--title-link {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #212121 !important;
        -webkit-line-clamp: 2;
    }

    /* Hide empty ratings — they look broken */
    .product__card--rating-wrapper:not(:has(.product__card--rating-count)) {
        display: none !important;
    }

    .product__card--price-box {
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        align-items: baseline;
        gap: 6px !important;
        flex-wrap: wrap;
    }

    .product__card--current-price {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #212121 !important;
    }

    .product__card--old-price {
        font-size: 11px !important;
        color: #9e9e9e !important;
    }

    .product__card--discount-lbl {
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 0 !important;
        background: transparent !important;
        color: #388e3c !important;
        border-radius: 0 !important;
    }

    .product__card--content .badge {
        font-size: 9px !important;
        padding: 1px 5px !important;
        border-radius: 3px !important;
    }

    /* Hide hover-only footer ghost on touch */
    .product__card--footer {
        display: none !important;
    }

    /* Bottom tabs — spacing handled by .at-tabbar */
    .offcanvas__stikcy--toolbar.at-tabbar {
        padding: 0 10px calc(8px + var(--app-safe-bottom)) !important;
    }

    .at-tabbar__label {
        font-size: 10px !important;
        font-weight: 600 !important;
    }
}

/* Fallback if :has() unsupported — hide ratings when all stars empty via JS class optional */
@supports not selector(:has(*)) {
    @media only screen and (max-width: 991px) {
        .product__card--rating-wrapper {
            display: none !important;
        }
    }
}

/* =========================================================
   GLOBAL 10px CARD SYSTEM — Apple / native surfaces
   ========================================================= */
.product__card,
.banner__items,
.categories__thumbnail,
.at-shop-toolbar,
.at-sticky-actions-card,
.at-delivery-card,
.at-feature-card,
.at-specs-card,
.blog__card,
.blog__thumbnail,
.cart__table,
.cart__summary,
.checkout__sidebar,
.account-sidebar,
.account-content,
.my__account--wrapper,
.form-container,
.no-products-found,
.address-card,
.order-card {
    border-radius: var(--app-radius) !important;
}

/* Image tops of cards clip to same radius */
.product__card--thumbnail,
.product__card--thumbnail__img,
.blog__thumbnail img,
.banner__thumbnail--img {
    border-top-left-radius: var(--app-radius);
    border-top-right-radius: var(--app-radius);
}

@media only screen and (max-width: 991px) {
    .at-related-products-wrapper .product__card,
    .related__product .product__card,
    .product__swiper--activation .product__card {
        border-radius: var(--app-radius) !important;
        overflow: hidden;
        box-shadow: var(--app-shadow-card) !important;
    }
}

/* =========================================================
   CART PAGE — mobile native product cards (match minicart)
   ========================================================= */
@media only screen and (max-width: 767px) {
    .at-cart-page {
        padding-bottom: calc(28px + var(--app-safe-bottom)) !important;
    }

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

    .at-cart-page__title,
    .at-cart-page .cart__title {
        text-align: left !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        letter-spacing: -0.03em;
        color: var(--app-ink) !important;
        margin: 4px 0 14px !important;
    }

    /* Outer table wrapper becomes transparent shell */
    .at-cart-page .cart__table {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        position: static !important;
        top: auto !important;
    }

    .at-cart-page .cart__table--inner,
    .at-cart-page .cart__table--body {
        display: block !important;
        width: 100%;
    }

    .at-cart-page .cart__table--header {
        display: none !important;
    }

    /* Each cart row = product card */
    .at-cart-page .cart__table--body__items,
    .at-cart-page .at-cart-item {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        position: relative;
        margin: 0 0 12px !important;
        padding: 12px !important;
        padding-top: 12px !important;
        background: var(--app-surface) !important;
        border: 1px solid var(--app-hairline) !important;
        border-radius: var(--app-radius) !important;
        box-shadow: var(--app-shadow-card);
        overflow: hidden;
    }

    .at-cart-page .at-cart-item__product,
    .at-cart-page .cart__table--body__list:first-child {
        order: 0;
        width: 100% !important;
        flex: 0 0 100%;
        padding: 0 !important;
        border: none !important;
        display: block !important;
    }

    .at-cart-page .at-cart-item__row,
    .at-cart-page .cart__product {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px;
        position: relative;
        padding-right: 34px;
        width: 100%;
    }

    .at-cart-page .at-cart-item__thumb,
    .at-cart-page .cart__thumbnail {
        width: 84px !important;
        max-width: 84px !important;
        height: 84px;
        flex-shrink: 0;
        margin: 0 !important;
        border-radius: var(--app-radius);
        overflow: hidden;
        background: #f2f2f7;
        border: 1px solid var(--app-hairline);
    }

    .at-cart-page .at-cart-item__thumb a,
    .at-cart-page .cart__thumbnail a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .at-cart-page .at-cart-item__thumb img,
    .at-cart-page .cart__thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        border-radius: 0 !important;
    }

    .at-cart-page .at-cart-item__content,
    .at-cart-page .cart__content {
        flex: 1;
        min-width: 0;
        padding: 0 !important;
        padding-left: 0 !important;
    }

    .at-cart-page .cart__content--title,
    .at-cart-page .cart__content--title.h4 {
        font-size: 14px !important;
        font-weight: 650 !important;
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
        letter-spacing: -0.02em;
    }

    .at-cart-page .cart__content--title a {
        color: var(--app-ink) !important;
        text-decoration: none !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .at-cart-page .at-cart-item__meta,
    .at-cart-page .cart__content--variant {
        display: block;
        font-size: 12px !important;
        line-height: 1.35 !important;
        color: var(--app-ink-muted) !important;
        margin: 0 0 2px !important;
    }

    .at-cart-page .at-cart-item__remove,
    .at-cart-page .cart__remove--btn {
        position: absolute !important;
        top: -2px;
        right: -2px;
        width: 32px !important;
        height: 32px !important;
        border-radius: 999px !important;
        border: 1px solid var(--app-hairline) !important;
        background: #fff !important;
        color: #8e8e93 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        z-index: 2;
        margin: 0 !important;
    }

    .at-cart-page .at-cart-item__remove:hover,
    .at-cart-page .cart__remove--btn:hover {
        color: var(--app-accent) !important;
        border-color: color-mix(in srgb, var(--app-accent) 35%, transparent) !important;
        background: #fff !important;
    }

    /* Compact footer: price + qty on one row, total thin bar */
    .at-cart-page .at-cart-item__price,
    .at-cart-page .at-cart-item__qty,
    .at-cart-page .at-cart-item__total,
    .at-cart-page .cart__table--body__list:not(:first-child) {
        border: none !important;
        border-bottom: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        min-height: 0 !important;
    }

    .at-cart-page .cart__table--body__list:not(:first-child):not(.at-cart-item__total)::before {
        display: none !important;
        content: none !important;
    }

    .at-cart-page .at-cart-item__price {
        order: 1;
        flex: 1 1 auto;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--app-ink) !important;
        letter-spacing: -0.02em;
    }

    .at-cart-page .at-cart-item__qty {
        order: 2;
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .at-cart-page .at-cart-item__total {
        order: 3;
        flex: 0 0 100%;
        width: 100% !important;
        justify-content: space-between;
        padding-top: 8px !important;
        margin-top: 2px !important;
        border-top: 1px solid var(--app-hairline) !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        color: var(--app-ink) !important;
    }

    .at-cart-page .at-cart-item__total::before {
        display: inline-block !important;
        content: "Total" !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        text-transform: none !important;
        color: var(--app-ink-muted) !important;
        margin-right: 0 !important;
        width: auto !important;
    }

    .at-cart-page .at-cart-item .quantity__box,
    .at-cart-page .cart__table--body__list .quantity__box {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        border: 1px solid var(--app-hairline);
        border-radius: var(--app-radius);
        overflow: hidden;
        background: #fff;
    }

    .at-cart-page .at-cart-item .quantity__value,
    .at-cart-page .cart__table--body__list .quantity__value {
        width: 34px !important;
        height: 34px !important;
        border: 0 !important;
        background: #f2f2f7 !important;
        color: var(--app-ink) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    .at-cart-page .at-cart-item .quantity__number,
    .at-cart-page .cart__table--body__list .quantity__number {
        width: 36px !important;
        height: 34px !important;
        border: 0 !important;
        background: #fff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-align: center;
        color: var(--app-ink) !important;
        -moz-appearance: textfield;
    }

    .at-cart-page .at-cart-item .quantity__number::-webkit-outer-spin-button,
    .at-cart-page .at-cart-item .quantity__number::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .at-cart-page .continue__shopping {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        margin-top: 4px;
        margin-bottom: 16px;
    }

    .at-cart-page .continue__shopping--link,
    .at-cart-page .continue__shopping--clear {
        width: 100% !important;
        justify-content: center;
        text-align: center;
        border-radius: var(--app-radius) !important;
        margin: 0 !important;
    }

    .at-cart-page .continue__shopping--clear {
        background: #fff !important;
        color: var(--app-accent) !important;
        border: 1px solid color-mix(in srgb, var(--app-accent) 40%, transparent) !important;
    }

    .at-cart-page .cart__summary {
        margin-top: 4px;
        padding: 14px !important;
    }

    .at-cart-page .checkout-card {
        border: 1px solid var(--app-hairline) !important;
        border-radius: var(--app-radius) !important;
        box-shadow: none !important;
        background: #fafafa;
    }

    .at-cart-page .empty-cart-img {
        max-width: 220px;
        margin: 12px auto;
        padding: 0;
        animation: none;
    }

    .at-cart-page .empty-cart-message {
        font-size: 14px;
        color: var(--app-ink-muted);
        margin-bottom: 8px;
    }
}

/* =========================================================
   CONTACT PAGE — native app mobile structure
   ========================================================= */
@media only screen and (max-width: 991px) {
    .contact__section.section--padding {
        padding: 12px 0 8px !important;
        background: transparent !important;
    }

    .contact__section > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .main__contact--area {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact__form {
        order: 1;
        margin: 0 !important;
        padding: 18px 16px 20px !important;
        border-radius: 16px !important;
        background: #fff !important;
        border: 1px solid var(--app-hairline);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.7) inset,
            0 10px 28px rgba(0, 0, 0, 0.06) !important;
    }

    .contact__form--title {
        font-size: 22px !important;
        font-weight: 800 !important;
        letter-spacing: -0.03em;
        color: var(--app-ink) !important;
        margin-bottom: 14px !important;
    }

    .contact__form--title.mb-30 {
        margin-bottom: 14px !important;
    }

    .contact__form .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .contact__form--list {
        margin-bottom: 12px !important;
    }

    .contact__form--label {
        font-size: 12px !important;
        font-weight: 650 !important;
        letter-spacing: 0.02em;
        color: var(--app-ink-soft) !important;
        margin-bottom: 6px !important;
    }

    .contact__form--input {
        height: 48px !important;
        border-radius: 12px !important;
        border: 1px solid #e1e3e8 !important;
        background: #f7f7f8 !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
        color: var(--app-ink) !important;
    }

    .contact__form--input:focus {
        background: #fff !important;
        border-color: var(--app-accent) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 18%, transparent);
        outline: none;
    }

    .contact__form--textarea {
        min-height: 120px !important;
        height: 120px !important;
        border-radius: 12px !important;
        border: 1px solid #e1e3e8 !important;
        background: #f7f7f8 !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
        color: var(--app-ink) !important;
    }

    .contact__form--textarea:focus {
        background: #fff !important;
        border-color: var(--app-accent) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 18%, transparent);
        outline: none;
    }

    .contact__form--btn.primary__btn,
    #submitBtn.contact__form--btn {
        width: 100% !important;
        min-height: 50px !important;
        margin-top: 4px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 750 !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: var(--app-accent) !important;
        box-shadow: 0 10px 24px color-mix(in srgb, var(--app-accent) 32%, transparent) !important;
        border: 0 !important;
    }

    /* Info panel — dark premium card (not flat solid red slab) */
    .contact__info {
        order: 2;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 16px !important;
        background:
            linear-gradient(160deg, #1f1f22 0%, #121214 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    }

    .contact__info--items {
        margin-bottom: 14px !important;
        padding: 12px !important;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .contact__info--items:last-child {
        margin-bottom: 0 !important;
    }

    .contact__info--content__title {
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55) !important;
        margin-bottom: 8px !important;
    }

    .contact__info--items__inner {
        align-items: flex-start;
        gap: 12px;
    }

    .contact__info--icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin-right: 0 !important;
        padding: 0 !important;
        border-radius: 11px;
        background: color-mix(in srgb, var(--app-accent) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--app-accent) 35%, transparent);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: var(--app-accent) !important;
    }

    .contact__info--icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .contact__info--content__desc {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        margin: 0 !important;
    }

    .contact__info--content__desc a {
        color: #fff !important;
        font-weight: 650;
        text-decoration: none !important;
    }

    .contact__info--content__desc a:hover {
        color: var(--app-accent) !important;
    }

    .contact__info--social {
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .contact__info--social__list {
        margin: 0 !important;
    }

    .contact__info--social__icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 11px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff !important;
    }

    .contact__info--social__icon:hover {
        background: var(--app-accent) !important;
        border-color: var(--app-accent);
        color: #fff !important;
    }

    .contact__map--area.section--padding {
        padding: 8px 12px 16px !important;
    }

    .contact__map--iframe {
        width: 100% !important;
        height: 220px !important;
        border-radius: 16px !important;
        overflow: hidden;
        border: 1px solid var(--app-hairline) !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
        display: block;
    }
}

/* Desktop cart: keep remove control before thumbnail */
@media only screen and (min-width: 768px) {
    .at-cart-item__row {
        gap: 12px;
    }

    .at-cart-item__remove {
        order: -1;
        flex-shrink: 0;
    }
}

/* Dynamic homepage uses the same families as the static homepage. */
body.is-shop-home {
    font-family: "Inter", "Segoe UI", "Helvetica Neue", sans-serif !important;
}

body.is-shop-home h1,
body.is-shop-home h2,
body.is-shop-home h3,
body.is-shop-home h4,
body.is-shop-home h5,
body.is-shop-home h6,
body.is-shop-home .section__heading--maintitle,
body.is-shop-home .categories__content--title,
body.is-shop-home .banner__content--title,
body.is-shop-home .banner__content--title__inner,
body.is-shop-home .product__card--title,
body.is-shop-home .product__card--title-link,
body.is-shop-home .at-shop-intro__title,
body.is-shop-home .at-online-states__title,
body.is-shop-home .at-online-states__name,
body.is-shop-home .at-shop-car__title,
body.is-shop-home .at-ig-reels__title,
body.is-shop-home .at-pdp-faq-title,
body.is-shop-home .at-view-all,
body.is-shop-home .at-shop-car__cta,
body.is-shop-home .hero__slider--btn,
body.is-shop-home .primary__btn,
body.is-shop-home .footer__widget--title,
body.is-shop-home .main__logo--title {
    font-family: "Rubik", "Inter", "Segoe UI", "Helvetica Neue", sans-serif !important;
}

body.is-shop-home .at-shop-intro__text,
body.is-shop-home .at-online-states__lead,
body.is-shop-home .at-online-states__note,
body.is-shop-home .at-shop-car__text,
body.is-shop-home p,
body.is-shop-home li {
    font-family: "Inter", "Segoe UI", "Helvetica Neue", sans-serif !important;
}