/* ═══════════════════════════════════════════════════════════════
   KarmelPOS — Store Frontend CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── FONTS PER LANGUAGE ── */
html[lang="ar"] body,
html[lang="ar"] body button,
html[lang="ar"] body input,
html[lang="ar"] body select,
html[lang="ar"] body textarea {
    font-family: 'Cairo', sans-serif !important;
}

html[lang="he"] body,
html[lang="he"] body button,
html[lang="he"] body input,
html[lang="he"] body select,
html[lang="he"] body textarea,
html[lang="he"] .store-navbar,
html[lang="he"] .store-footer,
html[lang="he"] .shein-mega-menu,
html[lang="he"] .shein-section-heading,
html[lang="he"] .shein-category-page,
html[lang="he"] .shein-home {
    font-family: 'Heebo', sans-serif !important;
}
html[lang="en"] body { font-family: 'Inter', sans-serif !important; }

/* ── CSS VARIABLES ── */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #eef2ff;
    --primary-rgb: 99, 102, 241;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --border: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.12);
    --transition: all .25s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════
   ANNOUNCEMENT BANNER
══════════════════════════════════════ */
.store-announcement {
    padding: .5rem 0;
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
}
.store-announcement-info    { background: #dbeafe; color: #1e40af; }
.store-announcement-success { background: #dcfce7; color: #15803d; }
.store-announcement-warning { background: #fef3c7; color: #92400e; }
.store-announcement-danger  { background: #fee2e2; color: #991b1b; }
.announcement-hours {
    font-size: .78rem;
    opacity: .75;
    white-space: nowrap;
}

/* ── BASE ── */
* { box-sizing: border-box; }

html,
body {
    min-height: 100%;
}

html {
    background: #f7f7f7;
}

body {
    background: var(--surface-2);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

a { text-decoration: none; }

main {
    flex: 1 0 auto;
}

.store-footer {
    flex-shrink: 0;
    margin-top: auto;
}

@media (min-width: 1400px) {
    .store-navbar .container,
    .store-categorybar .container,
    .shein-category-page > .container {
        max-width: min(1660px, calc(100vw - 76px));
    }
}

@media (min-width: 1600px) {
    .store-navbar .container,
    .store-categorybar .container,
    .shein-category-page > .container {
        max-width: min(1740px, calc(100vw - 88px));
    }
}

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
.store-navbar {
    background: #000;
    border-bottom: 1px solid rgba(255,255,255,.14);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    overflow: visible;
}

.store-navbar .container {
    padding-inline: 12px;
    overflow: visible;
}

.store-navbar .nav-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 78px;
}

.store-navbar .brand {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    letter-spacing: .22em;
    text-transform: uppercase;
    min-width: 0;
}

.store-navbar .brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.store-navbar .brand-mark img,
.store-navbar .brand-fallback {
    width: 100%;
    height: 100%;
}

.store-navbar .brand-mark img {
    object-fit: cover;
    display: block;
}

.store-navbar .brand-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: .06em;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 8px;
}

.store-navbar .brand-name {
    display: none;
}

/* Search */
.store-navbar .search-wrap {
    flex: 1;
    max-width: 540px;
    margin-inline: auto;
}
.store-navbar .search-wrap form { position: relative; }
.store-navbar .search-wrap input {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 2px;
    padding: 0 52px 0 14px;
    font-size: .9rem;
    background: #fff;
    color: #111;
    transition: var(--transition);
    outline: none;
}
[dir="rtl"] .store-navbar .search-wrap input { padding: 0 18px 0 48px; }
.store-navbar .search-wrap input:focus {
    border-color: #d5d5d5;
    box-shadow: none;
}
.store-navbar .search-wrap .search-btn {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 42px;
    height: 40px;
    background: #111;
    border: 0;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

/* Nav actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-inline-start: auto;
}

.store-navbar__quick-links {
    display: flex;
    align-items: center;
    gap: .35rem;
    position: relative;
    z-index: 1210;
    overflow: visible;
}

.store-navbar__quick-link {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,.82);
    font-size: .82rem;
    font-weight: 500;
    padding: .4rem .65rem;
    border-radius: 999px;
    text-decoration: none;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    pointer-events: auto;
    cursor: pointer;
}

.store-navbar__quick-link:hover,
.store-navbar__quick-link.active {
    background: rgba(255,255,255,.12);
    color: #fff;
}

.store-navbar__quick-link--button {
    cursor: pointer;
}

.store-navbar__quick-link--button i {
    font-size: .78rem;
}

.store-navbar__mobile-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 12px;
    width: min(220px, calc(100vw - 24px));
    padding: .55rem;
    background: #111;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    z-index: 1005;
}

.store-navbar__mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #fff;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
}

.store-navbar__mobile-links-inner {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.store-navbar__mobile-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 .9rem;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    border: 0;
}

.store-navbar__mobile-link:hover,
.store-navbar__mobile-link.active {
    background: rgba(255,255,255,.09);
    color: #fff;
}

@media (max-width: 1280px) {
    .nav-actions {
        gap: .4rem;
    }

    .store-navbar__quick-links {
        gap: .12rem;
    }

    .store-navbar__quick-link {
        padding-inline: .46rem;
    }
}

.nav-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    position: relative;
}
.nav-icon-btn:hover {
    color: #fff;
    background: transparent;
}

@media (min-width: 1200px) {
    .store-navbar {
        background: #000;
        border-bottom: 0;
    }

    .store-navbar .container {
        max-width: none;
        width: 100%;
        padding-inline: 34px;
    }

    .store-navbar .nav-inner {
        min-height: 56px;
        height: 56px;
        display: grid;
        grid-template-columns: minmax(220px, 1fr) minmax(420px, 535px) minmax(220px, 1fr);
        gap: 1.8rem;
        direction: inherit;
        align-items: center;
    }

    .store-navbar .brand {
        grid-column: 1;
        justify-self: start;
        min-width: 0;
        max-width: 285px;
        color: #fff;
        font-size: clamp(2rem, 2.28vw, 2.42rem);
        font-weight: 900;
        letter-spacing: .17em;
        line-height: 1;
        white-space: nowrap;
        transform: translateY(-1px);
        align-self: center;
    }

    [dir="rtl"] .store-navbar .brand {
        grid-column: 1;
        justify-self: start;
    }

    .store-navbar .brand-mark {
        width: auto;
        height: 46px;
        max-width: 285px;
        flex: 0 1 auto;
        display: inline-flex;
        overflow: visible;
    }

    .store-navbar .brand-mark img {
        width: auto;
        height: 46px;
        max-width: 285px;
        object-fit: contain;
        display: block;
    }

    .store-navbar .brand-mark:has(img) + .brand-name,
    .store-navbar .brand--has-logo .brand-name {
        display: none;
    }

    .store-navbar .brand-name {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .store-navbar .search-wrap {
        grid-column: 2;
        width: 100%;
        max-width: 535px;
        margin: 0;
        justify-self: center;
        align-self: center;
    }

    .store-navbar .search-wrap input,
    [dir="rtl"] .store-navbar .search-wrap input {
        height: 36px;
        border: 1px solid #e5e7eb;
        border-radius: 2px;
        padding-inline: 14px 54px;
        background: #fff;
        color: #111;
        box-shadow: none;
    }

    [dir="ltr"] .store-navbar .search-wrap input {
        direction: ltr;
        text-align: left;
    }

    [dir="rtl"] .store-navbar .search-wrap input {
        direction: rtl;
        text-align: right;
    }

    .store-navbar .search-wrap .search-btn {
        top: 3px;
        inset-inline-end: 3px;
        width: 48px;
        height: 30px;
        border-radius: 2px;
        background: #050505;
        color: #fff;
        font-size: 1.05rem;
    }

    .nav-actions {
        grid-column: 3;
        width: auto;
        margin-inline-start: 0;
        justify-self: end;
        justify-content: flex-end;
        gap: .35rem;
        direction: ltr;
        align-self: center;
    }

    [dir="rtl"] .nav-actions {
        grid-column: 3;
        justify-self: end;
        justify-content: flex-end;
    }

    .nav-icon-btn {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        color: #fff;
        font-size: 0;
        border-radius: 999px;
    }

    .nav-icon-btn i {
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.04rem;
        line-height: 1;
    }

    .nav-icon-btn .fa-headset {
        font-size: 1rem;
    }

    .nav-icon-btn .fa-comment-dots {
        font-size: 1.03rem;
    }

    .nav-icon-btn .fa-bag-shopping {
        font-size: 1.02rem;
    }

    .nav-icon-btn .fa-user {
        font-size: 1.02rem;
    }

    .lang-btn {
        height: 34px;
        min-width: 64px;
        padding: 0 14px;
        border: 0;
        background: #fff;
        color: #111827;
        box-shadow: none;
        font-size: .78rem;
        line-height: 1;
    }

    .nav-actions .cart-badge {
        top: -2px;
        inset-inline-end: -1px;
        width: 16px;
        height: 16px;
        border: 1.5px solid #000;
        font-size: 9px;
        line-height: 16px;
    }

    .store-navbar__category-row {
        position: relative;
        z-index: 1210;
        min-height: 38px;
        height: 38px;
        align-items: center;
        gap: .8rem;
        direction: inherit;
        overflow: visible;
        border-top: 0;
    }

    .store-navbar__category-scroll {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .store-navbar__category-track {
        display: flex;
        align-items: center;
        gap: 1.42rem;
        min-width: 0;
        height: 38px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .store-navbar__category-track::-webkit-scrollbar {
        display: none;
    }

    .store-navbar__category-arrows {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        flex: 0 0 auto;
        margin-inline-start: .25rem;
    }

    .store-navbar__category-arrow {
        width: 24px;
        height: 30px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .72rem;
        opacity: .95;
        cursor: pointer;
    }

    .store-navbar__category-arrow:hover {
        opacity: 1;
    }

    .store-navbar__category-arrow:disabled {
        opacity: .28;
        cursor: default;
    }

    .store-navbar__category-row .store-navbar__quick-link {
        flex: 0 0 auto;
        height: 38px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: rgba(255, 255, 255, .94);
        font-size: .82rem;
        font-weight: 650;
        line-height: 38px;
        white-space: nowrap;
    }

    .store-navbar__category-row .store-navbar__quick-link:hover,
    .store-navbar__category-row .store-navbar__quick-link.active {
        background: transparent;
        color: #fff;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .store-navbar__category-row .store-navbar__quick-link--button {
        gap: .28rem;
    }

    .store-navbar__category-row .store-navbar__quick-link--button i {
        font-size: .7rem;
    }
}

.cart-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.btn-login {
    height: 40px;
    padding: 0 20px;
    border-radius: 50px;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.btn-login:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb),.35);
    color: #fff;
}

.lang-btn {
    height: 40px;
    padding: 0 14px;
    border-radius: 50px;
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.lang-btn:hover {
    color: var(--text-secondary);
}

.dropdown-menu {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: .375rem;
    background: #111;
}
.dropdown-item {
    font-size: .875rem;
    padding: .5rem .875rem;
    border-radius: 8px;
    color: rgba(255,255,255,.9);
    display: block;
    line-height: 1.45;
    white-space: nowrap;
}
.dropdown-menu li + li {
    margin-top: .18rem;
    padding-top: .18rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.dropdown-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.store-navbar .nav-actions .dropdown,
.store-navbar .nav-actions .dropdown-menu {
    z-index: 3200;
}

.store-navbar .nav-actions .dropdown-menu {
    pointer-events: auto;
}

.store-navbar .nav-actions .dropdown-item {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) and (max-width: 1180px) {
    .dropdown-menu {
        min-width: 180px;
        padding: .45rem;
    }

    .dropdown-item {
        font-size: .95rem;
        padding: .62rem .95rem;
        line-height: 1.6;
    }

    .dropdown-menu li + li {
        margin-top: .22rem;
        padding-top: .22rem;
    }
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn-primary-store {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    padding: .625rem 1.5rem;
    font-size: .875rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.btn-primary-store:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb),.35);
    color: #fff;
}
.btn-primary-store.btn-lg-store {
    padding: .875rem 2rem;
    font-size: 1rem;
}
.btn-primary-store.btn-white {
    background: #fff;
    color: var(--primary);
}
.btn-primary-store.btn-white:hover { background: #f0f0ff; }

.btn-outline-store {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: 50px;
    font-weight: 600;
    padding: .625rem 1.5rem;
    font-size: .875rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.btn-outline-store:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
}
.btn-outline-store.btn-white-outline {
    border-color: rgba(255,255,255,.5);
    color: #fff;
}
.btn-outline-store.btn-white-outline:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
}

.btn-ghost {
    background: var(--surface-3);
    color: var(--text-primary);
    border: none;
    border-radius: 50px;
    font-weight: 500;
    padding: .5rem 1.25rem;
    font-size: .875rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.btn-ghost:hover { background: var(--border); color: var(--text-primary); }

/* ══════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════ */
.store-breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: .75rem 0;
}
.store-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    font-size: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.store-breadcrumb li { display: flex; align-items: center; gap: .35rem; color: var(--text-secondary); }
.store-breadcrumb li a { color: var(--primary); }
.store-breadcrumb li::before { content: '/'; color: var(--border); }
.store-breadcrumb li:first-child::before { display: none; }
[dir="rtl"] .store-breadcrumb li::before { content: '\\'; }

/* ══════════════════════════════════════
   HERO - Elegant Glassmorphic Design
══════════════════════════════════════ */
.hero-section {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Background with Parallax Effect */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 0.3s ease-out;
}

.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.5) 100%);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
}

/* Animated Gradient Accents */
.hero-accent-1,
.hero-accent-2,
.hero-accent-3 {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
}

.hero-accent-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    top: -100px;
    right: -100px;
    animation: float 20s infinite;
}

.hero-accent-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    bottom: 10%;
    left: -80px;
    animation: float 15s infinite reverse;
}

.hero-accent-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    bottom: 30%;
    right: 20%;
    animation: float 18s infinite 2s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(30px, 20px) rotate(180deg); }
}

/* Hero Badge */
.hero-badge-wrapper {
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    letter-spacing: 0.5px;
}

/* Hero Title */
.hero-title {
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease 0.1s forwards;
}

.hero-title-gradient {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Hero Description */
.hero-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    margin-bottom: 2rem;
    max-width: 500px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease 0.2s forwards;
}

/* Buttons */
.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease 0.3s forwards;
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, #ffffff, #f3f4f6);
    color: #1f2937;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    color: #1f2937;
    background: #ffffff;
}

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 2rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    color: #ffffff;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

.hero-btn-secondary:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    transform: translateY(-3px);
}

/* Trust Badge */
.hero-trust-badge {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease 0.4s forwards;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 84px;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
}

.hero-trust-badge .osi-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    box-shadow: none;
}

.hero-trust-badge .osi-content {
    min-width: 0;
}

.hero-trust-badge .osi-title {
    color: #fff;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.2;
}

.hero-trust-badge .osi-sub {
    margin-top: 4px;
    color: rgba(255,255,255,0.72);
    font-size: .76rem;
    line-height: 1.45;
}

.hero-trust-badge .trust-item:nth-child(1) .osi-icon { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); color: #10B981; }
.hero-trust-badge .trust-item:nth-child(2) .osi-icon { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); color: #3B82F6; }
.hero-trust-badge .trust-item:nth-child(3) .osi-icon { background: linear-gradient(135deg, #FEFCE8 0%, #FEF08A 100%); color: #EAB308; }
.hero-trust-badge .trust-item:nth-child(4) .osi-icon { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%); color: #EF4444; }

/* Stats Grid */
.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    opacity: 0;
    transform: translateX(50px);
    animation: slideInRight 0.7s ease 0.2s forwards;
}
.v0-home-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
    flex-wrap: wrap;
}

.stat-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.stat-icon i {
    font-size: 1.5rem;
    color: #a78bfa;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Scroll Indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    opacity: 0;
    animation: fadeIn 1s ease 1s forwards;
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 10px;
    background: rgba(255,255,255,0.6);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2s infinite;
}

.scroll-text {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes scroll {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* RTL Support */
[dir="rtl"] .hero-stats-grid {
    animation: slideInLeft 0.7s ease 0.2s forwards;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
        padding: 60px 0;
    }
    
    .hero-accent-1,
    .hero-accent-2,
    .hero-accent-3 {
        opacity: 0.15;
    }
    
    .hero-scroll-indicator {
        bottom: 15px;
    }
}
/* ══════════════════════════════════════
   STATS STRIP
══════════════════════════════════════ */
.stats-strip {
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.stats-strip .stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.stats-item {
    padding: .875rem 1rem;
    text-align: center;
    border-inline-end: 1px solid var(--border);
}
.stats-item:last-child { border-inline-end: none; }
.stats-item i { font-size: 1.1rem; display: block; margin-bottom: 4px; }
.stats-item span { font-size: .75rem; font-weight: 600; color: var(--text-secondary); display: block; }

/* ══════════════════════════════════════
   SECTIONS
══════════════════════════════════════ */
.store-section { padding: 3rem 0; }
.store-section-sm { padding: 1.5rem 0; }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}
.section-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.5px;
    margin: 0;
}
.section-title-accent { color: var(--primary); }

/* ══════════════════════════════════════
   CATEGORY PILLS
══════════════════════════════════════ */
.cat-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}
.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}
.cat-pill:hover,
.cat-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb),.3);
}
.cat-pill-sub {
    padding: 6px 14px;
    font-size: .78rem;
    border-style: dashed;
}

/* ══════════════════════════════════════
   CATEGORY CARDS GRID
══════════════════════════════════════ */
.cat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 1rem;
}
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem .75rem;
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
    text-align: center;
}
.cat-card:hover,
.cat-card-all:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb),.05);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb),.15);
}
.cat-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 1.4rem;
    color: var(--primary);
    transition: var(--transition);
}
.cat-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cat-card:hover .cat-card-icon { background: rgba(var(--primary-rgb),.12); }
.cat-card-name {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
}
.cat-card-all .cat-card-icon { color: #6366f1; background: rgba(99,102,241,.08); }

/* ══════════════════════════════════════
   NEW ARRIVALS BADGE DOT
══════════════════════════════════════ */
.new-badge-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    margin-inline-end: .5rem;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12);
    animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
    0%,100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: .6; }
}

/* ══════════════════════════════════════
   PROMO DUAL ROW
══════════════════════════════════════ */
.promo-dual-row {
    display: flex;
    gap: 1.25rem;
}
@media (max-width: 767px) {
    .promo-dual-row { flex-direction: column; }
}
/* ══════════════════════════════════════
   OFFER STRIP - ELEGANT VERSION
   ══════════════════════════════════════ */
.offer-strip-section {
    padding: 3rem 0;
    position: relative;
    background: transparent; /* Make it blend */
    overflow: hidden;
}

/* Optional: Add a subtle background wave or gradient to connect with hero */
.offer-strip-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.offer-strip-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 80px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1;
    position: relative;
}

/* Dark mode support (if you have .dark class on body) */
.dark .offer-strip-grid {
    background: rgba(30, 30, 40, 0.6);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.offer-strip-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    flex: 1;
    min-width: fit-content;
    transition: all 0.3s ease;
    cursor: default;
    border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
}

/* Modern hover effect */
.offer-strip-item:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.dark .offer-strip-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.offer-strip-item:last-child {
    border-inline-end: none;
}

/* Icon styling */
.osi-icon-wrapper {
    position: relative;
}

.osi-icon {
    width: 52px;
    height: 52px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Individual Icon Colors (subtle gradients) */
.offer-strip-item:nth-child(1) .osi-icon { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); color: #3B82F6; }
.offer-strip-item:nth-child(2) .osi-icon { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); color: #10B981; }
.offer-strip-item:nth-child(3) .osi-icon { background: linear-gradient(135deg, #FEFCE8 0%, #FEF08A 100%); color: #EAB308; }
.offer-strip-item:nth-child(4) .osi-icon { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%); color: #EF4444; }

/* Dark mode icon adjustments */
.dark .offer-strip-item:nth-child(1) .osi-icon { background: rgba(59,130,246,0.2); color: #60A5FA; }
.dark .offer-strip-item:nth-child(2) .osi-icon { background: rgba(16,185,129,0.2); color: #34D399; }
.dark .offer-strip-item:nth-child(3) .osi-icon { background: rgba(234,179,8,0.2); color: #FBBF24; }
.dark .offer-strip-item:nth-child(4) .osi-icon { background: rgba(239,68,68,0.2); color: #F87171; }

/* Hover animation for icons */
.offer-strip-item:hover .osi-icon {
    transform: scale(1.05) rotate(3deg);
    box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.15);
}

/* Text content */
.osi-content {
    display: flex;
    flex-direction: column;
}

.osi-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text, #1F2937);
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.osi-sub {
    font-size: 0.8rem;
    color: var(--muted, #6B7280);
    margin-top: 4px;
    font-weight: 500;
    opacity: 0.8;
}

/* RTL Support */
[dir="rtl"] .offer-strip-item:hover .osi-icon {
    transform: scale(1.05) rotate(-3deg);
}

/* Responsive Design */
@media (max-width: 991px) {
    .offer-strip-section {
        padding: 2rem 0;
    }
    
    .offer-strip-grid {
        border-radius: 48px;
        flex-wrap: wrap;
    }
    
    .offer-strip-item {
        width: 50%;
        flex: auto;
        justify-content: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .offer-strip-item:nth-child(2) {
        border-inline-end: none;
    }
    
    .offer-strip-item:nth-child(3),
    .offer-strip-item:nth-child(4) {
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    .offer-strip-section {
        padding: 1.5rem 0;
    }
    
    .offer-strip-grid {
        border-radius: 32px;
        flex-direction: column;
    }
    
    .offer-strip-item {
        width: 100%;
        justify-content: flex-start;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        border-inline-end: none !important;
    }
    
    .offer-strip-item:last-child {
        border-bottom: none;
    }
    
    .osi-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }
    
    .osi-title {
        font-size: 0.9rem;
    }
    
    .osi-sub {
        font-size: 0.7rem;
    }
}

/* Optional: Adding connection to Hero */
.hero-section + .offer-strip-section {
    margin-top: -2rem;
    position: relative;
    z-index: 5;
}

/* Subtle animation on load */
.offer-strip-item {
    animation: fadeSlideUp 0.5s ease forwards;
    opacity: 0;
}

.offer-strip-item:nth-child(1) { animation-delay: 0.1s; }
.offer-strip-item:nth-child(2) { animation-delay: 0.2s; }
.offer-strip-item:nth-child(3) { animation-delay: 0.3s; }
.offer-strip-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ══════════════════════════════════════
   ARRIVALS SWIPER
══════════════════════════════════════ */
.arrivals-section { overflow: hidden; }
.arrivals-swiper { overflow: hidden; }
.arrivals-swiper .swiper-slide { height: auto; }
.swiper-nav-wrap {
    display: flex;
    gap: .375rem;
}
.swiper-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: .85rem;
    padding: 0;
}
.swiper-nav-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.swiper-nav-btn.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

/* ══════════════════════════════════════
   WHATSAPP CTA SECTION
══════════════════════════════════════ */
.wa-cta-section {
    background: linear-gradient(135deg, #1fba52 0%, #0d9e3e 100%);
    padding: 2rem 0;
}
.wa-cta-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.wa-cta-icon {
    font-size: 2.5rem;
    color: #fff;
    opacity: .9;
}
.wa-cta-text { flex: 1; }
.wa-cta-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.wa-cta-sub {
    font-size: .875rem;
    color: rgba(255,255,255,.8);
    margin-top: 2px;
}
.wa-cta-btn {
    background: #fff;
    color: #1fba52;
    font-weight: 700;
    padding: .75rem 1.75rem;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: .95rem;
    transition: var(--transition);
    white-space: nowrap;
}
.wa-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    color: #0d9e3e;
}

/* ══════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════ */
.product-card {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
    border-color: transparent;
}
.product-card .pc-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--surface-3);
}
.product-card .pc-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    display: block;
}
.product-card:hover .pc-img-wrap img { transform: scale(1.06); }

.pc-badge-featured {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pc-badge-oos {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    background: var(--danger);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
}
.pc-quick-add {
    position: absolute;
    bottom: 10px;
    inset-inline-end: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb),.4);
}
.product-card:hover .pc-quick-add { opacity: 1; transform: translateY(0); }

.pc-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pc-cat-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.pc-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.45;
    margin-bottom: .625rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pc-name a { color: inherit; text-decoration: none; }
.pc-name a:hover { color: var(--primary); }
.pc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}
.pc-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
}
.pc-add-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-light);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: var(--transition);
}
.pc-add-btn:hover {
    background: var(--primary);
    color: #fff;
}
.pc-add-btn.is-disabled,
.pc-add-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

/* Product List Card */
.product-list-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    overflow: hidden;
    transition: var(--transition);
    margin-bottom: .75rem;
}
.product-list-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.product-list-card .plc-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    flex-shrink: 0;
}
.product-list-card .plc-body {
    flex: 1;
    padding: .875rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.product-list-card .plc-cat {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.product-list-card .plc-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: .15rem 0 .25rem;
}
.product-list-card .plc-name a { color: inherit; }
.product-list-card .plc-name a:hover { color: var(--primary); }
.product-list-card .plc-desc {
    font-size: .8rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-list-card img.plc-img { width: 110px; height: 110px; object-fit: cover; flex-shrink: 0; }
.product-list-card .plc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;
}
.product-list-card .plc-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
}
.product-list-card .plc-add-btn { padding: .4rem 1rem; font-size: .8rem; }
.product-list-card .plc-oos {
    font-size: .75rem;
    color: var(--danger);
    font-weight: 600;
}

/* ══════════════════════════════════════
   PROMO BANNER
══════════════════════════════════════ */
.promo-banner {
    border-radius: var(--radius);
    padding: 2.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    position: relative;
}
.promo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10C10 30 0 24.523 0 20S4.477 10 10 10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.promo-banner > * { position: relative; }
.promo-banner.pb-purple { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }
.promo-banner.pb-teal   { background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%); }
.promo-banner.pb-orange { background: linear-gradient(135deg, #f97316 0%, #ef4444 100%); }
.promo-banner.pb-green  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.promo-banner.pb-dark   { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); }

.promo-banner .pb-eyebrow {
    color: rgba(255,255,255,.75);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: .375rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.promo-banner .pb-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: .25rem;
    letter-spacing: -.3px;
}
.promo-banner .pb-sub {
    color: rgba(255,255,255,.75);
    font-size: .875rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.promo-banner .pb-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.promo-banner .pb-badge {
    background: rgba(255,255,255,.2);
    color: #fff;
    border-radius: 50px;
    padding: 4px 12px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.25);
}
.promo-banner .pb-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 50px;
    padding: 9px 20px;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}
.promo-banner.pb-purple .pb-cta { color: #6366f1; }
.promo-banner.pb-teal   .pb-cta { color: #0ea5e9; }
.promo-banner.pb-orange .pb-cta { color: #f97316; }
.promo-banner.pb-green  .pb-cta { color: #10b981; }
.promo-banner.pb-dark   .pb-cta { color: #1e293b; }
.promo-banner .pb-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }

.promo-banner .pb-icon {
    font-size: 4.5rem;
    color: rgba(255,255,255,.18);
    line-height: 1;
    text-align: center;
}
.promo-banner .pb-icon-wrap {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(255,255,255,.6);
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   FILTER SIDEBAR
══════════════════════════════════════ */
.filter-card {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 1.5rem;
    position: sticky;
    top: 88px;
}
.filter-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-card-title i { color: var(--primary); }

.filter-group { margin-bottom: 1.5rem; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-muted);
    margin-bottom: .625rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--surface-3);
}
.filter-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .625rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: .875rem;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}
.filter-cat-item:hover, .filter-cat-item.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}
.filter-cat-count {
    background: var(--surface-3);
    color: var(--text-muted);
    border-radius: 50px;
    padding: 1px 8px;
    font-size: .72rem;
    font-weight: 600;
}
.filter-cat-item.active .filter-cat-count {
    background: var(--primary);
    color: #fff;
}
.filter-category-group + .filter-category-group {
    margin-top: .35rem;
}
.filter-cat-toggle {
    width: 100%;
    border: 0;
    background: transparent;
}
.filter-cat-label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.filter-cat-toggle .fa-chevron-down,
.cat-pill-toggle .fa-chevron-down {
    font-size: .72rem;
    transition: transform .2s ease;
}
.filter-cat-toggle.is-open .fa-chevron-down,
.cat-pill-toggle.is-open .fa-chevron-down {
    transform: rotate(180deg);
}
.filter-subcategory-list {
    display: none;
    margin-top: .35rem;
    padding-inline-start: .85rem;
    border-inline-start: 1px dashed color-mix(in srgb, var(--primary) 24%, var(--border));
}
.filter-subcategory-list.is-visible {
    display: block;
    animation: fadeSlideIn .2s ease;
}
.filter-subcat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .42rem .625rem;
    margin-bottom: .25rem;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: .82rem;
    text-decoration: none;
    transition: var(--transition);
}
.filter-subcat-item:hover,
.filter-subcat-item.active {
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary);
}
.mobile-category-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}
.mobile-category-group {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.cat-pill-toggle {
    justify-content: space-between;
    width: 100%;
    border: 1.5px solid var(--border);
}
.mobile-subcategory-row {
    display: none;
    flex-wrap: wrap;
    gap: .45rem;
    padding-inline-start: .35rem;
}
.mobile-subcategory-row.is-visible {
    display: flex;
    animation: fadeSlideIn .2s ease;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Price range */
.price-range-wrap { padding: .25rem 0; }
.range-input { width: 100%; accent-color: var(--primary); cursor: pointer; }
.price-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--text-secondary);
    margin-top: 6px;
}
.price-range-labels .range-max { color: var(--primary); font-weight: 700; }

/* In-stock checkbox */
.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .45rem .625rem;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: .875rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition);
}
.filter-checkbox-label:hover { background: var(--surface-3); }
.filter-checkbox-label input { accent-color: var(--primary); width: 15px; height: 15px; }

/* ══════════════════════════════════════
   SORT BAR
══════════════════════════════════════ */
.sort-bar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.sort-bar .results-text {
    font-size: .875rem;
    color: var(--text-secondary);
}
.sort-bar .results-text strong { color: var(--text-primary); }
.category-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .55rem;
}
.category-context__parent {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.category-context__subs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.category-context__chip {
    display: inline-flex;
    align-items: center;
    padding: .32rem .7rem;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.category-context__chip:hover,
.category-context__chip.active {
    background: var(--primary);
    color: #fff;
}
.sort-controls {
    display: flex;
    align-items: center;
    gap: .625rem;
}
.sort-label { font-size: .85rem; color: var(--text-secondary); white-space: nowrap; }
.sort-select {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface-3);
    cursor: pointer;
    outline: none;
    transition: var(--transition);
}
.sort-select:focus { border-color: var(--primary); background: #fff; }

.view-toggle { display: flex; gap: 4px; }
.view-toggle button {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}
.view-toggle button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ══════════════════════════════════════
   BREADCRUMB BAR
══════════════════════════════════════ */
.breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: .75rem 0;
}
.breadcrumb-sm { font-size: .85rem; }
.breadcrumb-link { color: var(--primary); text-decoration: none; }
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--text-secondary); }

/* ══════════════════════════════════════
   PRODUCT DETAIL PAGE
══════════════════════════════════════ */
.pd-img-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-3);
    aspect-ratio: 1 / 1;
}
.pd-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .7px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: .375rem;
}
.pd-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.5px;
    margin: .5rem 0 1rem;
    color: var(--text-primary);
    line-height: 1.25;
}
.pd-price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 1.25rem;
    letter-spacing: -.5px;
    line-height: 1;
}
.pd-desc-block {
    margin-bottom: 1.5rem;
}

.pd-rating-prompt {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
}

.rv-inline-note {
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    font-size: .92rem;
    line-height: 1.6;
}

.rv-inline-note--success {
    background: #ecfdf5;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.pd-desc-title {
    margin: 0 0 .55rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.pd-desc {
    color: var(--text-secondary);
    line-height: 1.9;
    font-size: .95rem;
}

.pd-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 50px;
    padding: 5px 14px;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.pd-stock-badge.in-stock { background: #dcfce7; color: #16a34a; }
.pd-stock-badge.out-of-stock { background: #fee2e2; color: var(--danger); }

.pd-qty-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.qty-stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    overflow: hidden;
    background: #fff;
}
.qty-stepper button {
    width: 44px;
    height: 48px;
    border: none;
    background: none;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-stepper button:hover { background: var(--surface-3); color: var(--primary); }
.qty-stepper input {
    width: 50px;
    text-align: center;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
}

.pd-meta-row { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.pd-meta-item { font-size: .85rem; color: var(--text-secondary); margin-bottom: .375rem; }
.pd-meta-item strong { color: var(--text-primary); }
.pd-trust-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .875rem;
}
.pd-trust-badge {
    font-size: .8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}
.pd-trust-badge i { width: 16px; }
.pd-wrap { padding-top: 2.5rem; padding-bottom: 3rem; }
.pd-add-btn { flex: 1; min-width: 160px; justify-content: center; padding: .875rem 1.5rem; font-size: .95rem; }
.pd-add-btn.is-disabled,
.pd-add-btn:disabled {
    background: #e5e7eb !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    box-shadow: none !important;
    cursor: not-allowed;
    pointer-events: none;
}
.related-section { margin-top: 3rem; }

/* Product Share Row */
.pd-share-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.pd-share-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-inline-end: .25rem;
}
.pd-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    padding: 0;
}
.pd-share-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.pd-share-btn.copied { background: #10b981; border-color: #10b981; color: #fff; }
.pd-share-wa:hover  { background: #25d366; border-color: #25d366; color: #fff; }
.pd-share-fb:hover  { background: #1877f2; border-color: #1877f2; color: #fff; }

/* ══════════════════════════════════════
   CART
══════════════════════════════════════ */
.cart-wrap { padding: 2.5rem 0 3rem; }
.cart-item-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--surface-3);
}
.cart-item-row:last-child { border-bottom: none; }
.cart-item-img { width: 72px; height: 72px; border-radius: var(--radius-xs); object-fit: cover; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 600; font-size: .9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-price { font-size: .85rem; color: var(--primary); font-weight: 700; }
.cart-qty-ctrl {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    overflow: hidden;
}
.cart-qty-ctrl button {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .9rem;
    transition: var(--transition);
}
.cart-qty-ctrl button:hover { background: var(--surface-3); }
.cart-qty-ctrl span { width: 28px; text-align: center; font-size: .875rem; font-weight: 700; }
.cart-item-total { font-weight: 800; font-size: .95rem; white-space: nowrap; }
.cart-remove-btn {
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: var(--transition);
    flex-shrink: 0;
}
.cart-remove-btn:hover { border-color: var(--danger); color: var(--danger); background: #fee2e2; }

.order-summary-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: sticky;
    top: 88px;
}
.order-summary-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin-bottom: 1.25rem; }
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    margin-bottom: .625rem;
    color: var(--text-secondary);
}
.summary-row.total-row {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: .5rem;
}
.summary-row.total-row .summary-val { color: var(--primary); }
.summary-divider { border-color: var(--border); margin: .875rem 0; }

/* ══════════════════════════════════════
   CHECKOUT
══════════════════════════════════════ */
.checkout-wrap { padding: 2.5rem 0 3rem; }
.checkout-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}
.checkout-card-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 8px; }
.checkout-card-title i { color: var(--primary); }

.form-label-store { font-size: .85rem; font-weight: 600; color: var(--text-primary); margin-bottom: .375rem; display: block; }
.form-control-store {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0 .875rem;
    font-size: .875rem;
    color: var(--text-primary);
    background: var(--surface-3);
    outline: none;
    transition: var(--transition);
}
.form-control-store:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px var(--primary-light); }
.form-control-store.textarea { height: 80px; padding: .625rem .875rem; resize: none; }

.payment-option-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: #fff;
}
.payment-option-card:hover { border-color: var(--primary); background: var(--primary-light); }
.payment-option-card.selected { border-color: var(--primary); background: var(--primary-light); }
.payment-option-card .po-icon { font-size: 1.75rem; margin-bottom: .5rem; display: block; }
.payment-option-card .po-label { font-size: .875rem; font-weight: 700; color: var(--text-primary); }
.payment-option-card .po-sub { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; }

.checkout-summary-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: sticky;
    top: 88px;
}
.checkout-summary-header {
    background: var(--surface-3);
    padding: 1rem 1.5rem;
    font-weight: 800;
    font-size: .95rem;
    border-bottom: 1px solid var(--border);
}
.checkout-summary-body { padding: 1.25rem 1.5rem; }
.checkout-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    font-size: .85rem;
    margin-bottom: .625rem;
    color: var(--text-secondary);
}
.checkout-item-name { flex: 1; }
.checkout-item-price { font-weight: 700; white-space: nowrap; }

/* ══════════════════════════════════════
   ORDER SUCCESS
══════════════════════════════════════ */
.success-wrap { padding: 4rem 0; }
.success-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3rem 2.5rem;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}
.success-icon-wrap {
    width: 80px;
    height: 80px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.success-icon-wrap i { font-size: 2rem; color: #16a34a; }
.success-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: .375rem; }
.success-subtitle { color: var(--text-secondary); font-size: .95rem; margin-bottom: 1.5rem; }
.success-meta-card {
    background: var(--surface-3);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    text-align: start;
}
/* Free delivery discount row */
.fdm-struck { color: var(--text-muted); font-size: .85rem; }
.fdm-discount-row { color: var(--success) !important; font-weight: 600; }
.fdm-discount-label { display: flex; align-items: center; gap: .35rem; font-size: .82rem; }
.fdm-discount-label i { font-size: .75rem; }
.fdm-discount-val { font-size: .88rem; font-weight: 700; }

/* Free delivery message */
.free-delivery-msg {
    margin: .5rem 0 0;
    font-size: .8rem;
}
.fdm-achieved {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--success);
    font-weight: 700;
}
.fdm-achieved i { font-size: .8rem; }
.fdm-progress {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.fdm-progress i { color: var(--primary); font-size: .8rem; flex-shrink: 0; }
.fdm-bar-wrap {
    height: 4px;
    background: var(--surface-3);
    border-radius: 99px;
    margin-top: .5rem;
    overflow: hidden;
}
.fdm-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary), #10b981 50%));
    border-radius: 99px;
    transition: width .4s ease;
}

.success-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    margin-bottom: .375rem;
}
.success-meta-row:last-child { margin-bottom: 0; }
.success-meta-row .smr-label { color: var(--text-secondary); }
.success-meta-row .smr-val { font-weight: 700; }
.success-meta-row .smr-price { font-weight: 800; color: var(--primary); }
.success-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════
   MY ORDERS
══════════════════════════════════════ */
.my-orders-wrap { padding: 2.5rem 0 3rem; }
.order-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
    transition: var(--transition);
}
.order-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.order-card-header {
    padding: 1rem 1.5rem;
    background: var(--surface-3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.order-card-number { font-weight: 800; font-size: .95rem; color: var(--text-primary); }
.order-card-date { font-size: .8rem; color: var(--text-muted); }
.order-card-body { padding: 1rem 1.5rem; }
.order-items-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .875rem; }
.order-item-pill {
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50px;
    padding: 3px 12px;
    font-size: .75rem;
    font-weight: 600;
}
.order-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.order-total { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
.order-payment-method { font-size: .8rem; color: var(--text-secondary); background: var(--surface-3); padding: 3px 10px; border-radius: 50px; }

.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    padding: 4px 12px;
    font-size: .75rem;
    font-weight: 700;
}
.order-status-badge.completed { background: #dcfce7; color: #16a34a; }
.order-status-badge.pending   { background: #fef3c7; color: #d97706; }
.order-status-badge.cancelled { background: #fee2e2; color: var(--danger); }
.order-status-badge.default   { background: var(--surface-3); color: var(--text-secondary); }

/* ══════════════════════════════════════
   OTP MODAL
══════════════════════════════════════ */
.otp-modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 64px rgba(0,0,0,.15);
    padding: 0;
    position: relative;
}
.otp-modal-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(var(--primary-rgb),.08) 0%, transparent 70%);
    pointer-events: none;
}
.otp-close-btn {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    background: var(--surface-3);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
    z-index: 10;
}
.otp-close-btn:hover { background: var(--border); color: var(--text-primary); }
.otp-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 2rem auto 0;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb),.35);
}
.otp-modal-body { padding: 1.25rem 2rem 2rem; }

/* Steps */
.otp-step { display: none; animation: otpFadeUp .3s ease; }
.otp-step-active { display: block; }
@keyframes otpFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.otp-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 1rem 0 .25rem;
    text-align: center;
}
.otp-subtitle {
    font-size: .85rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* Floating label field */
.otp-field-wrap { position: relative; margin-bottom: 1.25rem; }
.otp-field {
    width: 100%;
    height: 54px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 1rem 2.75rem 0 1rem;
    font-size: 1rem;
    color: var(--text-primary);
    outline: none;
    background: var(--surface-3);
    transition: var(--transition);
}
[dir="rtl"] .otp-field { padding: 1rem 1rem 0 2.75rem; }
.otp-field:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px var(--primary-light); }
.otp-float-label {
    position: absolute;
    top: 50%;
    inset-inline-start: 1rem;
    transform: translateY(-50%);
    font-size: .9rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: var(--transition);
    padding: 0 .25rem;
}
.otp-field:focus ~ .otp-float-label,
.otp-field:not(:placeholder-shown) ~ .otp-float-label {
    top: 10px;
    transform: none;
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary);
}
.otp-field-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: .875rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    display: flex;
    pointer-events: none;
}

/* Primary button */
.otp-btn-primary {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb),.35);
    position: relative;
    overflow: hidden;
}
.otp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(var(--primary-rgb),.45); }
.otp-btn-primary:active { transform: translateY(0); }
.otp-btn-arrow { transition: transform .25s; }
.otp-btn-primary:hover .otp-btn-arrow { transform: translateX(3px); }
[dir="rtl"] .otp-btn-primary:hover .otp-btn-arrow { transform: translateX(-3px); }
@keyframes otpSpin { to { transform: rotate(360deg); } }
.otp-spin { animation: otpSpin .7s linear infinite; }

/* OTP digit boxes */
.otp-boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    direction: ltr; /* digits always LTR */
}
.otp-box {
    width: 48px;
    height: 56px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface-3);
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    outline: none;
    transition: var(--transition);
    caret-color: var(--primary);
}
.otp-box:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px var(--primary-light); }
.otp-box.filled { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.otp-boxes-dash { color: var(--text-muted); font-size: 1.2rem; margin: 0 .125rem; }

/* Back & resend */
.otp-back-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    margin-bottom: .75rem;
    transition: color .2s;
}
.otp-back-btn:hover { color: var(--primary); }
[dir="rtl"] .otp-back-btn svg { transform: scaleX(-1); }
.otp-resend-row {
    text-align: center;
    margin-top: .875rem;
    font-size: .82rem;
    color: var(--text-secondary);
}
.otp-resend-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Error */
.otp-error-msg {
    display: none;
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: .625rem .875rem;
    font-size: .82rem;
    font-weight: 600;
    margin-top: .875rem;
    text-align: center;
}
.otp-error-msg.show { display: block; animation: otpFadeUp .25s ease; }

/* ══════════════════════════════════════
   MY ORDERS
══════════════════════════════════════ */
.mo-list { display: flex; flex-direction: column; gap: 1rem; }
.mo-card {
    padding: 0;
    overflow: hidden;
    animation: moFadeUp .4s ease both;
    animation-delay: var(--mo-delay, 0ms);
}
@keyframes moFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mo-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.1rem 1.75rem;
    border-bottom: 1px solid var(--surface-3);
}
.mo-order-label { font-size: .7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .15rem; }
.mo-order-num   { font-size: 1rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }

.mo-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 700;
    padding: .3rem .8rem;
    border-radius: 999px;
    white-space: nowrap;
}
.mo-status-pending   { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.mo-status-processing,
.mo-status-processed { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.mo-status-shipped   { background: #cffafe; color: #0e7490; border: 1px solid #a5f3fc; }
.mo-status-complete,
.mo-status-completed { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.mo-status-canceled,
.mo-status-cancelled { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.mo-status-refunded  { background: #ede9fe; color: #7c3aed; border: 1px solid #ddd6fe; }
.mo-status-chargeback { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.mo-status-denied,
.mo-status-expired,
.mo-status-voided { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.mo-status-draft     { background: var(--surface-3); color: var(--text-secondary); border: 1px solid var(--border); }

.mo-items-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .875rem 1.75rem;
    border-bottom: 1px solid var(--surface-3);
}
.mo-item-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 8px;
}
.mo-item-qty { color: var(--primary); font-weight: 700; }

.mo-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1.75rem;
}
.mo-meta { display: flex; flex-wrap: wrap; gap: .75rem; }
.mo-meta-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--text-secondary);
}
.mo-meta-item i { color: var(--text-muted); font-size: .72rem; }
.mo-total { font-size: 1.2rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; white-space: nowrap; }

@media (max-width: 480px) {
    .mo-card-head { flex-wrap: wrap; }
    .mo-card-foot { flex-direction: column; align-items: flex-start; }
    .mo-card-head, .mo-items-row, .mo-card-foot { padding-inline: 1.25rem; }
}

/* ══════════════════════════════════════
   EMPTY STATES
══════════════════════════════════════ */
.my-orders-page {
    min-height: 70vh;
}
.mo-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.mo-title-wrap {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.mo-title-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), .12);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), .18);
}
.mo-title-wrap h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 850;
    letter-spacing: 0;
}
.mo-title-sub {
    margin-top: .2rem;
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
}
.mo-shop-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), .22);
    color: var(--primary);
    font-size: .82rem;
    font-weight: 800;
    box-shadow: 0 10px 28px rgba(35, 27, 20, .06);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.mo-shop-link:hover {
    background: rgba(var(--primary-rgb), .08);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(35, 27, 20, .1);
}
.mo-card {
    background: #fff;
    border: 1px solid rgba(35, 27, 20, .09);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(35, 27, 20, .055);
    color: inherit;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mo-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-rgb), .24);
    box-shadow: 0 22px 46px rgba(35, 27, 20, .11);
}
.mo-card-head {
    padding: 1.15rem 1.35rem;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .08), rgba(var(--primary-rgb), .02));
    border-bottom: 1px solid rgba(35, 27, 20, .06);
}
.mo-order-label {
    font-weight: 750;
}
.mo-order-num {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0;
}
.mo-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem 1.35rem;
}
.mo-summary-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .75rem;
    border-radius: 14px;
    background: #fafafa;
    border: 1px solid rgba(35, 27, 20, .06);
}
.mo-summary-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 8px 18px rgba(35, 27, 20, .06);
}
.mo-summary-label {
    display: block;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 750;
    margin-bottom: .15rem;
}
.mo-summary-item strong {
    display: block;
    color: var(--text-primary);
    font-size: .82rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mo-items-row {
    padding: 0 1.35rem 1rem;
    border-bottom: 0;
}
.mo-item-tag {
    background: #fff;
    border: 1px solid rgba(35, 27, 20, .08);
    font-weight: 700;
    padding: .35rem .65rem;
    border-radius: 999px;
}
.mo-card-foot {
    padding: 1rem 1.35rem;
    border-top: 1px solid rgba(35, 27, 20, .06);
    background: #fff;
}
.mo-total-wrap span {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 750;
    margin-bottom: .12rem;
}
.mo-total {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0;
}
.mo-view-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 36px;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 850;
    transition: transform .22s ease, background .22s ease, color .22s ease;
}
.mo-card:hover .mo-view-link {
    background: var(--primary);
    color: #fff;
    transform: translateX(-2px);
}

@media (max-width: 480px) {
    .mo-page-head { align-items: flex-start; flex-direction: column; }
    .mo-shop-link { width: 100%; justify-content: center; }
    .mo-card-head { align-items: flex-start; flex-direction: column; }
    .mo-summary-grid { grid-template-columns: 1fr; }
    .mo-card-foot { align-items: center; flex-direction: row; }
    .mo-card-head, .mo-summary-grid, .mo-items-row, .mo-card-foot { padding-inline: 1rem; }
}

@media (min-width: 481px) and (max-width: 767px) {
    .mo-summary-grid { grid-template-columns: 1fr; }
}

.empty-state { text-align: center; padding: 4rem 1rem; color: var(--text-secondary); }
.empty-state .es-icon { font-size: 3rem; color: var(--border); margin-bottom: 1rem; display: block; }
.empty-state .es-title { font-weight: 800; color: var(--text-primary); font-size: 1.1rem; margin-bottom: .375rem; }
.empty-state .es-sub { font-size: .9rem; margin-bottom: 1.5rem; }

/* ══════════════════════════════════════
   ALERTS
══════════════════════════════════════ */
.alert-store {
    border-radius: var(--radius-sm);
    border: none;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1.25rem;
}
.alert-store-success { background: #dcfce7; color: #166534; }
.alert-store-danger  { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.store-toast {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    background: #0f172a;
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: .875rem;
    font-weight: 500;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    animation: toastIn .3s ease;
}
.store-toast.toast-error { background: var(--danger); }
@keyframes toastIn  { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
.toast-hiding { animation: toastOut .35s ease forwards; }
@keyframes toastOut { to { opacity:0; transform: translateY(20px); } }

/* Cart toast — no image, compact */

/* Badge bump animation */
@keyframes badgeBump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.5); } }
.badge-bump { animation: badgeBump .4s ease; }

/* ══════════════════════════════════════
   FOOTER  (sf = store-footer)
══════════════════════════════════════ */
.sf { background: #0d1117; }

/* ── CTA strip ── */
.sf-cta-strip {
    position: relative;
    overflow: hidden;
    background: #0d1117;
    border-top: 1px solid rgba(var(--primary-rgb), .15);
    border-bottom: 1px solid rgba(255,255,255,.05);
    padding: 2rem 0;
}
.sf-cta-glow {
    position: absolute;
    top: -60px;
    inset-inline-start: 10%;
    width: 500px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--primary-rgb), .12) 0%, transparent 70%);
    pointer-events: none;
}
.sf-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.sf-cta-eyebrow {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(var(--primary-rgb), .7);
    margin: 0 0 .4rem;
}
.sf-cta-headline {
    font-size: 2rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0;
    letter-spacing: -.03em;
    line-height: 1;
}
.sf-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}
.sf-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.25rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05);
    color: #cbd5e1;
    backdrop-filter: blur(8px);
}
.sf-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); color: #fff; }
.sf-cta-btn i { font-size: .9rem; }
.sf-cta-wa i { color: #25d366; }
.sf-cta-ph i { color: rgba(var(--primary-rgb), .8); }
.sf-cta-em i { color: #94a3b8; }
.sf-cta-addr { cursor: default; }
.sf-cta-addr i { color: #f59e0b; }

/* ── Main grid ── */
.sf-main {
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.sf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem 2.5rem;
}
.sf-heading {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin: 0 0 1.1rem;
}

/* Nav links */
.sf-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 1rem;
}
.sf-nav-list li { margin-bottom: .5rem; break-inside: avoid; }
.sf-nav-list li a {
    font-size: .82rem;
    color: #64748b;
    text-decoration: none;
    transition: color .18s;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.sf-nav-list li a::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), .5);
    flex-shrink: 0;
    transition: background .18s;
}
.sf-nav-list li a:hover { color: #cbd5e1; }
.sf-nav-list li a:hover::before { background: var(--primary); }

/* Address */
.sf-addr-text {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .83rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
.sf-addr-text i { color: rgba(var(--primary-rgb), .7); margin-top: 3px; flex-shrink: 0; }

/* Hours */
.sf-hours {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
.sf-hours li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .4rem;
    padding: 3px 0;
    font-size: .7rem;
    color: #475569;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.sf-hours li:last-child { border-bottom: none; }
.sf-today { color: #94a3b8 !important; font-weight: 700; }
.sf-today .sf-hrs { color: var(--primary) !important; }
.sf-day { flex: 1; font-size: .68rem; }
.sf-hrs { font-weight: 600; white-space: nowrap; color: #64748b; font-size: .68rem; }
.sf-shut { color: #334155; font-size: .68rem; font-style: italic; }

/* ── Bottom bar ── */
.sf-bottom { padding: .875rem 0; }
.sf-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.sf-socials { display: flex; gap: .375rem; }
.sf-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    color: #fff;
    text-decoration: none;
    transition: transform .2s, opacity .2s;
    opacity: .85;
}
.sf-icon:hover { transform: translateY(-2px); opacity: 1; color: #fff; }
.sf-wa { background: #25d366; }
.sf-fb { background: #1877f2; }
.sf-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.sf-tt { background: #161823; border: 1px solid rgba(255,255,255,.15); }
.sf-copy { font-size: .72rem; color: #475569; }
.sf-langs { display: flex; gap: .3rem; }
.sf-lang {
    width: 34px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    color: #3d4f66;
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.sf-lang:hover { border-color: var(--primary); color: var(--primary); }
.sf-lang.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Responsive ── */
@media (max-width: 991px) {
    .sf-cta-inner { flex-direction: column; align-items: flex-start; }
    .sf-cta-headline { font-size: 1.6rem; }
    .sf-nav-list { columns: 3; }
}
@media (max-width: 575px) {
    .sf-cta-headline { font-size: 1.25rem; }
    .sf-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .sf-nav-list { columns: 2; }
    .sf-bottom-inner { justify-content: center; text-align: center; }
    .sf-copy { order: 3; flex: 1 0 100%; }
}

/* ══════════════════════════════════════
   PAGE HEADERS
══════════════════════════════════════ */
.page-hero {
    background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}
.page-hero-title { color: #fff; font-size: 1.8rem; font-weight: 800; letter-spacing: -.5px; margin: 0; }
.page-hero-sub { color: rgba(255,255,255,.75); font-size: .9rem; margin-top: .375rem; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 991px) {
    .filter-card { position: static; }
}
@media (max-width: 767px) {
    .hero-trust-badge {
        grid-template-columns: 1fr;
    }

    .store-navbar__mobile-links {
        display: none;
    }

    .store-navbar .search-wrap {
        display: none;
    }

    .store-navbar .nav-inner {
        min-height: 68px;
        gap: .8rem;
    }

    .store-navbar__quick-links {
        display: none !important;
    }

    .store-navbar__mobile-menu-btn {
        display: inline-flex;
    }

    .store-navbar__mobile-links.is-open {
        display: block;
    }

    .store-navbar .brand {
        gap: .65rem;
    }
    .store-navbar .brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 50%;
    }
    .hero-section { padding: 50px 0; }
    .hero-title { font-size: 1.75rem; }
    .store-section { padding: 2rem 0; }
    .section-title { font-size: 1.2rem; }
    .promo-banner { grid-template-columns: 1fr; }
    .promo-banner .pb-icon-wrap { display: none; }
    .stats-strip .stats-inner { grid-template-columns: repeat(2, 1fr); }
    .stats-item:nth-child(2) { border-inline-end: none; }
    .cat-cards-grid { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: .75rem; }
    .cat-card { padding: 1rem .5rem; }
    .cat-card-icon { width: 44px; height: 44px; font-size: 1.1rem; }
    .arrivals-section { overflow: hidden; }
    .wa-cta-inner { justify-content: center; text-align: center; flex-direction: column; }
    .hero-stat-cards { display: none; }
    .cart-item-total { display: none; }
    .success-card { padding: 2rem 1.5rem; }
}
@media (max-width: 480px) {
    .hero-section { padding: 36px 0; }
    .hero-title { font-size: 1.5rem; }
    .pd-title { font-size: 1.35rem; }
}

/* ══════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════ */
.contact-page-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: .5rem;
}
.contact-page-sub {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 1.75rem;
}
.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    margin-bottom: 1.5rem;
}
.contact-info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
}
.contact-info-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb),.1);
    color: var(--text);
}
.cic-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.cic-label {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.cic-value {
    font-size: .9rem;
    font-weight: 600;
    margin-top: 1px;
}
.contact-social-row {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
}
.contact-social-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
}
.contact-social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.contact-form-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.25rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.contact-form-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.5rem;
}
.contact-label {
    display: block;
    font-size: .825rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .4rem;
}
.contact-input {
    width: 100%;
    padding: .7rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: .9rem;
    color: var(--text);
    background: var(--bg);
    transition: var(--transition);
    outline: none;
    font-family: inherit;
    resize: vertical;
}
.contact-input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.1);
}
.contact-input.is-invalid { border-color: #ef4444; }
@media (max-width: 767px) {
    .contact-form-card { padding: 1.5rem; }
}

/* Refined home sections */
body,
.store-main,
.store-section,
.arrivals-section {
    background: #fff;
}

#categories.store-section {
    position: relative;
    padding: 3rem 0;
    background: #fff;
    overflow: hidden;
}

#categories .container {
    position: relative;
    z-index: 1;
}

#categories .section-header {
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0 .125rem;
}

.store-section .section-title,
#categories .section-title {
    position: relative;
    margin: 0;
    display: inline-block;
    color: #211913;
    font-size: clamp(1.22rem, 1.6vw, 1.55rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0;
}

.store-section .section-title::after,
#categories .section-title::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-top: .45rem;
    border-radius: 999px;
    background: var(--primary);
    opacity: .9;
}

.store-section .btn-ghost,
#categories .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 38px;
    padding: .5rem .9rem;
    border: 1px solid rgba(35, 27, 20, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #33281f;
    font-size: .78rem;
    font-weight: 750;
    box-shadow: 0 8px 22px rgba(35, 27, 20, .06);
}

.store-section .btn-ghost:hover,
#categories .btn-ghost:hover {
    border-color: rgba(var(--primary-rgb), .35);
    background: #fff;
    color: var(--primary);
    transform: translateY(-2px);
}

#categories .cat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: .9rem;
}

#categories .cat-card {
    position: relative;
    min-height: 132px;
    padding: 1.1rem .85rem 1rem;
    border: 1px solid rgba(35, 27, 20, .09);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
    color: #2c231b;
    box-shadow: 0 14px 34px rgba(35, 27, 20, .07);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

#categories .cat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .11), transparent 42%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

#categories .cat-card:hover {
    border-color: rgba(var(--primary-rgb), .28);
    box-shadow: 0 18px 42px rgba(35, 27, 20, .11);
    transform: translateY(-4px);
    color: #2c231b;
}

#categories .cat-card:hover::before {
    opacity: 1;
}

#categories .cat-card-icon {
    position: relative;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 17px;
    background: rgba(var(--primary-rgb), .08);
    color: var(--primary);
    font-size: 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    overflow: hidden;
}

#categories .cat-card-icon img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

#categories .cat-card-name {
    position: relative;
    max-width: 100%;
    color: #2a2119;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
}

#categories .cat-card-all {
    background: linear-gradient(145deg, rgba(var(--primary-rgb), .15), rgba(255, 255, 255, .86));
}

#categories .cat-card-all .cat-card-icon {
    border-color: transparent;
    background: var(--primary);
    color: #fff;
}

.store-promo-section .promo-dual-row {
    gap: 1rem;
}

.store-promo-section .promo-banner {
    min-height: 180px;
    padding: 1.5rem;
    border: 1px solid rgba(35, 27, 20, .08);
    border-radius: 18px;
    color: #241c15;
    box-shadow: 0 14px 34px rgba(35, 27, 20, .07);
    transform: translateZ(0);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    will-change: transform;
}

.store-promo-section .promo-banner::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .72), transparent 18%),
        radial-gradient(circle at 82% 24%, rgba(255, 255, 255, .46), transparent 16%),
        radial-gradient(circle at 70% 78%, rgba(255, 255, 255, .38), transparent 18%);
    opacity: .7;
    transition: opacity .28s ease;
}

.store-promo-section .promo-banner:hover {
    border-color: rgba(var(--primary-rgb), .22);
    box-shadow: 0 22px 48px rgba(35, 27, 20, .13);
    transform: translateY(-6px) scale(1.025);
}

.store-promo-section .promo-banner:hover::before {
    opacity: 1;
}

.store-promo-section .promo-banner.pb-purple {
    background:
        linear-gradient(135deg, rgba(var(--primary-rgb), .18), rgba(var(--primary-rgb), .06)),
        #fff;
}

.store-promo-section .promo-banner.pb-dark {
    background:
        linear-gradient(135deg, rgba(35, 27, 20, .08), rgba(35, 27, 20, .03)),
        #fff;
}

.store-promo-section .promo-banner .pb-eyebrow,
.store-promo-section .promo-banner .pb-title,
.store-promo-section .promo-banner .pb-sub {
    color: #241c15;
}

.store-promo-section .promo-banner .pb-eyebrow {
    color: rgba(36, 28, 21, .62);
    font-size: .72rem;
    letter-spacing: .08em;
}

.store-promo-section .promo-banner .pb-title {
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 850;
    letter-spacing: 0;
}

.store-promo-section .promo-banner .pb-sub {
    color: rgba(36, 28, 21, .58);
    margin-bottom: 1rem;
}

.store-promo-section .promo-banner .pb-cta {
    min-height: 38px;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(35, 27, 20, .08);
}

.store-promo-section .promo-banner.pb-purple .pb-cta {
    background: var(--primary);
    color: #fff;
}

.store-promo-section .promo-banner.pb-dark .pb-cta {
    background: #241c15;
    color: #fff;
}

.store-promo-section .promo-banner .pb-cta:hover {
    box-shadow: 0 12px 26px rgba(35, 27, 20, .13);
}

.store-promo-section .promo-banner .pb-icon-wrap {
    width: 82px;
    height: 82px;
    border: 1px solid rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .45);
    color: var(--primary);
    font-size: 2rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.store-promo-section .promo-banner.pb-dark .pb-icon-wrap {
    color: #241c15;
}

@media (max-width: 767px) {
    #categories.store-section {
        padding: 2.25rem 0;
    }

    #categories .section-header {
        align-items: center;
    }

    #categories .cat-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .75rem;
    }

    #categories .cat-card {
        min-height: 116px;
        padding: .9rem .55rem .8rem;
        border-radius: 15px;
    }

    #categories .cat-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 1.05rem;
    }

    #categories .cat-card-name {
        font-size: .72rem;
    }
}

/* ==========================================================================
   Homepage v0 Integration
   ========================================================================== */
.v0-home {
    --v0-gold: color-mix(in srgb, var(--primary) 62%, #f3e3a2);
    --v0-dark: color-mix(in srgb, var(--primary) 46%, #102321);
    --v0-dark-strong: color-mix(in srgb, var(--primary) 68%, #0d1918);
    --v0-cream: #f7f4ee;
    background: #fff;
    color: #251f19;
}

.v0-home .container {
    position: relative;
}

.v0-home .v0-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--v0-gold);
}

.v0-home .btn-primary-store,
.v0-home .btn-outline-store,
.v0-home .btn-ghost {
    gap: .5rem;
}

.v0-top-strip {
    background: #0f1111;
    color: rgba(255,255,255,.86);
    padding: .7rem 0;
    font-size: .85rem;
}

.v0-top-strip__inner,
.v0-top-strip__social,
.v0-top-strip__meta {
    display: flex;
    align-items: center;
}

.v0-top-strip__inner {
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.v0-top-strip__social,
.v0-top-strip__meta {
    gap: .85rem;
}

.v0-top-strip__social a,
.v0-top-strip__meta span,
.v0-top-strip__message {
    color: rgba(255,255,255,.86);
}

.v0-top-strip__social a:hover {
    color: #fff;
}

.v0-top-strip__message {
    text-align: center;
}

.v0-top-strip__message strong {
    color: var(--v0-gold);
    font-weight: 800;
    margin-inline-start: .35rem;
}

.v0-hero {
    padding: 1.5rem 0 2rem;
    background:
        radial-gradient(circle at top left, rgba(201,169,98,.18), transparent 28%),
        linear-gradient(180deg, #fff 0%, #faf8f3 100%);
}

.v0-side-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.v0-promo-card,
.v0-hero-carousel,
.v0-feature-banner,
.v0-category-card,
.v0-cta-band__inner {
    border-radius: 24px;
    overflow: hidden;
}

.v0-promo-card,
.v0-feature-banner,
.v0-category-card,
.v0-cta-band__inner {
    position: relative;
}

.v0-promo-card {
    min-height: 150px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    color: #fff;
    box-shadow: 0 18px 45px rgba(27, 27, 27, .08);
}

.v0-promo-card:hover,
.v0-category-card:hover,
.v0-feature-banner:hover {
    transform: translateY(-4px);
}

.v0-promo-card,
.v0-category-card,
.v0-feature-banner {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.v0-promo-card--warm {
    background: linear-gradient(135deg, #ff7c4d67, #7a5a1f);
}

.v0-promo-card--split {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 52%, #ffffff), var(--v0-dark-strong));
}

.v0-promo-card--dark {
    background: linear-gradient(135deg, #201a16, #44403a);
}

.v0-promo-card__content h3 {
    margin: .35rem 0;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
}

.v0-promo-card__content p {
    margin: 0;
    color: rgba(255,255,255,.85);
}

.v0-promo-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary) 18%, rgba(255,255,255,.16));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.v0-hero-carousel {
    position: relative;
    background: #f2eee6;
    min-height: 100%;
    box-shadow: 0 28px 70px rgba(21, 21, 21, .12);
    border-radius: 24px;
    overflow: hidden;
}

.v0-hero-slide {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    width: 100%;
    background-position: 78% center;
    background-repeat: no-repeat;
    background-size: cover;
}

.v0-hero-swiper,
.v0-hero-swiper .swiper-wrapper,
.v0-hero-swiper .swiper-slide {
    height: 100%;
    width: 100%;
}

.v0-hero-swiper .swiper-slide {
    display: block;
    height: auto;
}

.v0-feature-banner__image img,
.v0-category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v0-hero-slide__fallback,
.v0-feature-banner__fallback {
    position: absolute;
    inset: 0;
}

.v0-hero-slide__fallback,
.v0-feature-banner__fallback {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(201,169,98,.45), transparent 22%),
        linear-gradient(135deg, #305454, #111c1c);
}

.v0-hero-slide__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12, 20, 20, .28) 0%, rgba(12, 20, 20, .12) 24%, rgba(12, 20, 20, .04) 48%, rgba(12, 20, 20, .12) 100%),
        linear-gradient(180deg, rgba(12, 20, 20, .06), rgba(12, 20, 20, .18)),
        linear-gradient(135deg, rgba(201,169,98,.08), transparent 42%);
}

.v0-hero-slide__body {
    position: relative;
    z-index: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 470px;
}

.v0-store-mark {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(201,169,98,.65);
    background: linear-gradient(135deg, #274646, #142a2a);
    color: var(--v0-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.v0-store-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v0-hero-slide__body h1 {
    margin: .55rem 0;
    font-size: clamp(2rem, 3vw, 2.7rem);
    font-weight: 700;
    color: #fff;
}

.v0-hero-slide__subtitle {
    font-size: .83rem;
    font-weight: 700;
    letter-spacing: .28em;
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
    margin-bottom: .9rem;
}

.v0-hero-slide__body p {
    max-width: 340px;
    margin: 0 auto 1.4rem;
    color: rgba(255,255,255,.84);
}

.v0-hero-slide__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.v0-hero-carousel__controls {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    width: calc(100% - 2.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    z-index: 3;
    transform: translateX(-50%);
}

.v0-carousel-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 78px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(18, 18, 18, .32), rgba(18, 18, 18, 0));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    z-index: 3;
    transition: background .2s ease, opacity .2s ease;
}

.v0-carousel-arrow:hover {
    background: linear-gradient(90deg, rgba(18, 18, 18, .46), rgba(18, 18, 18, .08));
}

.v0-carousel-arrow.swiper-button-disabled {
    opacity: .65;
    cursor: default;
}

.v0-carousel-arrow--prev {
    left: 0;
}

.v0-carousel-arrow--next {
    right: 0;
    background: linear-gradient(270deg, rgba(18, 18, 18, .32), rgba(18, 18, 18, 0));
}

.v0-carousel-arrow--next:hover {
    background: linear-gradient(270deg, rgba(18, 18, 18, .46), rgba(18, 18, 18, .08));
}

.v0-carousel-arrow__icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .24);
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: none !important;
}

.v0-carousel-arrow__icon i {
    font-size: 1.2rem;
    color: #fff;
}

.v0-carousel-dots {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: max-content !important;
    margin: 0 !important;
    justify-content: center;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.v0-carousel-dot {
    width: 30px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 22%, #cbd5e1);
    padding: 0;
    opacity: 1;
    transition: var(--transition);
}

.v0-carousel-dot.is-active {
    background: var(--primary);
}

.v0-feature-banner {
    min-height: 470px;
    box-shadow: 0 22px 60px rgba(21, 21, 21, .1);
}

.v0-feature-banner__image,
.v0-feature-banner__fallback {
    position: absolute;
    inset: 0;
}

.v0-feature-banner__overlay {
    position: relative;
    min-height: 470px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(180deg, rgba(17, 24, 24, .08), rgba(17, 24, 24, .84));
    color: #fff;
}

.v0-feature-banner__overlay h2 {
    margin: .45rem 0 .6rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
}

.v0-feature-banner__overlay p {
    margin: 0 0 1rem;
    color: rgba(255,255,255,.78);
}

.v0-category-section,
.v0-products,
.v0-cta-band {
    padding: 2.75rem 0;
    background: #fff;
}

.v0-products--featured {
    background: #faf8f3;
}

.v0-products--newest {
    padding-top: 0;
}

.v0-products--all,
.v0-cta-band {
    padding-top: 0;
}

.v0-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.v0-section-head h2 {
    margin: .35rem 0 0;
    font-size: clamp(1.4rem, 2vw, 2rem);
    color: #221b16;
    font-weight: 800;
}

.v0-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem;
}

.v0-category-card {
    background: #fff;
    border: 1px solid #eee7db;
    padding: 1rem .6rem;
    color: #2c241d;
    box-shadow: 0 14px 30px rgba(24, 24, 24, .05);
}

.v0-category-card--group {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1rem;
    text-align: start;
}

.v0-category-card__main {
    display: block;
    text-align: center;
    color: inherit;
}

.v0-category-card__image {
    width: 74px;
    height: 74px;
    margin: 0 auto .8rem;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f1ea;
    border: 2px solid #f1e7d4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v0-dark);
    font-size: 1.25rem;
}

.v0-category-card__name {
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}

.v0-category-card__meta {
    margin-top: .4rem;
    font-size: .72rem;
    color: #8b755d;
    font-weight: 700;
}

.v0-category-card--all {
    background: linear-gradient(180deg, #fff, #faf4e7);
}

.v0-category-card__subs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
}

.v0-subcategory-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-width: 0;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: #f8f3ea;
    color: #5b4a3a;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.v0-subcategory-chip small {
    font-size: .68rem;
    color: #9c846a;
}

.v0-subcategory-chip:hover {
    background: color-mix(in srgb, var(--primary) 14%, #fff);
    color: var(--primary);
}

.v0-product-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.v0-product-strip__item,
.v0-products .col {
    min-width: 0;
}

.v0-home .product-card {
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #eee7db;
    box-shadow: 0 18px 40px rgba(22, 22, 22, .06);
}

.v0-home .product-card:hover {
    transform: translateY(-4px);
}

.v0-home .product-card,
.v0-home .pc-img-wrap img {
    transition: transform .25s ease;
}

.v0-home .pc-img-wrap {
    background: #f7f2ea;
}

.v0-home .pc-body {
    background: #fff;
}

.v0-home .pc-name a {
    color: #231d18;
}

.v0-home .pc-price {
    color: var(--v0-gold);
}

.v0-home .pc-add-btn {
    background: var(--v0-dark);
}

.v0-cta-band__inner {
    background: linear-gradient(135deg, var(--v0-dark-strong), var(--v0-dark));
    padding: 2rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    box-shadow: 0 24px 60px color-mix(in srgb, var(--primary) 18%, transparent);
}

.v0-cta-band__inner h2 {
    margin: .4rem 0;
    color: #fff;
    font-weight: 800;
}

.v0-cta-band__inner p {
    margin: 0;
    max-width: 620px;
    color: rgba(255,255,255,.76);
}

.v0-cta-band__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.v0-products-count {
    min-width: 54px;
    height: 54px;
    padding: 0 1rem;
    border-radius: 999px;
    background: #faf4e7;
    color: #4d4034;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

[dir="rtl"] .v0-top-strip__message strong {
    margin-inline-start: 0;
    margin-inline-end: .35rem;
}

@media (max-width: 1199px) {
    .v0-hero-slide,
    .v0-hero-slide__body {
        min-height: 420px;
    }
}

@media (max-width: 991px) {
    .v0-feature-banner,
    .v0-feature-banner__overlay {
        min-height: 320px;
    }

    .v0-side-stack {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .v0-top-strip__inner {
        justify-content: center;
    }

    .v0-top-strip__message,
    .v0-top-strip__meta,
    .v0-top-strip__social {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .v0-hero {
        padding-top: 1rem;
    }

    .v0-side-stack {
        grid-template-columns: 1fr;
    }

    .v0-promo-card {
        min-height: 132px;
    }

    .v0-hero-slide {
        min-height: 0;
    }

    .v0-hero-slide__body,
    .v0-cta-band__inner {
        padding: 1.35rem;
    }

    .v0-hero-slide__body {
        min-height: 360px;
    }

    .v0-hero-slide__body h1 {
        font-size: 1.65rem;
    }

    .v0-feature-banner,
    .v0-feature-banner__overlay {
        min-height: 280px;
    }

    .v0-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .75rem;
    }

    .v0-hero-carousel__controls {
        width: calc(100% - 1.2rem);
        bottom: .85rem;
    }

    .v0-carousel-arrow {
        width: 56px;
    }

    .v0-carousel-arrow__icon {
        width: 40px;
        height: 40px;
    }

    .v0-category-card {
        padding: .9rem .5rem;
    }

    .v0-category-card__image {
        width: 62px;
        height: 62px;
    }

    .v0-category-card--group {
        padding: .85rem .65rem;
    }

    .v0-category-card__subs {
        justify-content: flex-start;
    }

    .v0-subcategory-chip {
        width: 100%;
        justify-content: space-between;
    }

    .v0-product-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v0-home .row {
        --bs-gutter-x: .9rem;
    }
}

@media (max-width: 575px) {
    .v0-hero-slide__actions,
    .v0-cta-band__actions {
        flex-direction: column;
    }

    .v0-hero-slide__actions > *,
    .v0-cta-band__actions > * {
        width: 100%;
        justify-content: center;
    }

    .v0-category-grid,
    .v0-product-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Promo Code ─────────────────────────────────────────────────────────── */
.promo-input-wrap {
    display: flex;
    gap: .5rem;
}
.promo-input-wrap .form-control-store {
    flex: 1;
    margin-bottom: 0;
    letter-spacing: .05em;
}
.btn-promo-apply {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .5rem 1rem;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s;
}
.btn-promo-apply:hover { filter: brightness(1.1); }
.btn-promo-apply:disabled { opacity: .6; cursor: default; }
.btn-promo-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: .75rem;
    line-height: 1;
}
.btn-promo-remove:hover { color: #ef4444; }
.promo-msg { font-size: .8rem; padding: .3rem .5rem; border-radius: 6px; }
.promo-msg-success { background: #d1fae5; color: #065f46; }
.promo-msg-error   { background: #fee2e2; color: #991b1b; }

/* ==========================================================================
   SHEIN-Inspired Storefront Redesign
   ========================================================================== */
body {
    background: #f7f7f7;
    color: #111;
}

.shein-store-header {
    position: sticky;
    top: 0;
    z-index: 1200;
}

.shein-navbar {
    background: #fff;
    border-bottom: 1px solid #ececec;
    box-shadow: 0 12px 30px rgba(15, 15, 15, .04);
}

.shein-mainbar {
    background: #0f0f10;
    color: #fff;
}

.shein-mainbar__inner {
    min-height: 74px;
    display: grid;
    grid-template-columns: auto minmax(220px, 240px) minmax(280px, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
}

.shein-mobile-trigger,
.shein-mobile-search button,
.shein-action {
    border: 0;
    background: transparent;
    color: inherit;
}

.shein-mobile-trigger {
    color: #fff;
    font-size: 1.1rem;
}

.shein-brand {
    color: #fff;
    text-decoration: none;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1;
}

.shein-brand img {
    max-height: 42px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.shein-search form,
.shein-mobile-search form {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #2f2f30;
    overflow: hidden;
}

.shein-search form {
    height: 44px;
}

.shein-search input,
.shein-mobile-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111;
    padding: 0 .95rem;
    font-size: .95rem;
}

.shein-search button,
.shein-mobile-search button {
    width: 46px;
    height: 44px;
    background: #1f1f1f;
    color: #fff;
}

.shein-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .2rem;
}

.shein-action {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    position: relative;
    transition: background .2s ease, transform .2s ease;
}

.shein-action:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    transform: translateY(-1px);
}

.shein-mobile-search {
    background: #0f0f10;
    padding: 0 0 1rem;
}

.shein-categorybar {
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.shein-nav-hoverzone {
    position: relative;
}

.shein-categorybar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 50px;
    width: 100%;
}

[dir="rtl"] .shein-categorybar__inner {
    direction: rtl;
}

[dir="ltr"] .shein-categorybar__inner {
    direction: ltr;
}

.shein-category-link {
    color: #171717;
    text-decoration: none;
    font-size: .9rem;
    padding: .72rem 0;
    border: 0;
    background: transparent;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.shein-category-link:hover,
.shein-category-link.active {
    color: #000;
    border-color: #000;
}

.shein-category-link--trigger {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    padding-inline: .2rem;
    cursor: pointer;
}

.shein-mega-menu {
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-end: 0;
    inset-inline-start: auto;
    width: min(1240px, calc(100vw - 40px));
    max-height: min(74vh, 640px);
    background: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 28px 60px rgba(17, 17, 17, .1);
    padding: 1.35rem;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1.35rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 30;
    overflow: hidden;
}

.shein-mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.shein-mega-menu__intro {
    align-self: start;
    padding-top: .25rem;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.shein-mega-menu__intro h4 {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: #171717;
}

[dir="rtl"] .shein-mega-menu__intro {
    text-align: right;
}

.shein-mega-menu__cta {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .58rem .9rem;
    border-radius: 8px;
    background: linear-gradient(
        135deg,
        var(--primary),
        color-mix(in srgb, var(--primary), #fff 18%)
    );
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .82rem;
    box-shadow: 0 12px 24px rgba(var(--primary-rgb), .22);
}

.shein-mega-menu__cta:hover {
    color: #fff;
    filter: brightness(1.03);
}

[dir="rtl"] .shein-mega-menu__cta {
    flex-direction: row-reverse;
}

.shein-mega-menu__catalog {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .85rem .65rem;
    min-width: 0;
    align-content: start;
    max-height: min(74vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-inline-end: .4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, .28) transparent;
}

.shein-mega-menu__catalog::-webkit-scrollbar {
    width: 8px;
}

.shein-mega-menu__catalog::-webkit-scrollbar-track {
    background: transparent;
}

.shein-mega-menu__catalog::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .22);
    border-radius: 999px;
}

.shein-mega-menu__catalog::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, .36);
}

[dir="rtl"] .shein-mega-menu__catalog {
    direction: rtl;
}

.shein-circle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    text-align: center;
    color: #111;
    text-decoration: none;
    transition: transform .2s ease;
}

.shein-circle-card:hover {
    transform: translateY(-2px);
}

.shein-circle-card {
    min-width: 0;
}

.shein-circle-card__image,
.shein-circle-category__image {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    overflow: hidden;
    background: #f2f2f2;
    border: 1px solid #e9e9e9;
}

.shein-circle-card__image img,
.shein-circle-category__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.shein-circle-card__label {
    font-size: .72rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.shein-mobile-drawer {
    max-width: 320px;
}

.store-navbar .shein-mega-menu {
    position: fixed;
    top: 94px;
    left: 50%;
    right: auto;
    width: calc(100vw - 80px);
    max-height: min(78vh, 580px);
    min-height: 520px;
    background: #fff;
    border: 0;
    border-top: 1px solid #ededed;
    border-radius: 0;
    box-shadow: 0 24px 54px rgba(15, 23, 42, .12);
    padding: 0;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index: 1100;
    overflow: hidden;
}

.store-navbar .shein-mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

[dir="rtl"] .store-navbar .shein-mega-menu {
    grid-template-columns: 290px minmax(0, 1fr);
}

.shein-mega-menu__sidebar {
    background: #fbfbfb;
    border-inline-end: 1px solid #e5e7eb;
    padding: 1.25rem 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

[dir="rtl"] .shein-mega-menu__sidebar {
    order: 0;
    border-inline-end: 1px solid #e5e7eb;
    border-inline-start: 0;
}

.shein-mega-menu__main-link {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 1.25rem;
    color: #111827;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    border-inline-start: 3px solid transparent;
}

.shein-mega-menu__main-link:hover,
.shein-mega-menu__main-link.is-active {
    background: #ededed;
    color: #000;
    border-inline-start-color: #111;
}

[dir="rtl"] .shein-mega-menu__main-link {
    border-inline-start: 0;
    border-inline-end: 3px solid transparent;
}

[dir="rtl"] .shein-mega-menu__main-link:hover,
[dir="rtl"] .shein-mega-menu__main-link.is-active {
    border-inline-end-color: #111;
}

.shein-mega-menu__main-link i {
    color: #b7bcc5;
    font-size: .7rem;
}

.shein-mega-menu__content {
    min-width: 0;
    padding: 1.1rem 1.8rem 1.25rem;
    overflow: hidden;
}

[dir="rtl"] .shein-mega-menu__content {
    order: 0;
    direction: rtl;
}

.shein-mega-menu__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.shein-mega-menu__eyebrow {
    display: inline-block;
    margin-bottom: .18rem;
    color: #c7490f;
    font-size: .77rem;
    font-weight: 800;
    text-transform: uppercase;
}

.shein-mega-menu__header h4 {
    margin: 0;
    color: #111;
    font-size: 1.06rem;
    font-weight: 900;
    line-height: 1.2;
}

.store-navbar .shein-mega-menu__cta {
    border-radius: 5px;
    background: #4f7a52;
    color: #fff;
    box-shadow: none;
    padding: .72rem .95rem;
    min-height: 40px;
    white-space: nowrap;
}

.shein-mega-menu__panel {
    display: none;
}

.shein-mega-menu__panel.is-active {
    display: block;
    min-height: 420px;
}

.shein-mega-menu__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.shein-mega-menu__panel-head h4 {
    margin: .18rem 0 0;
    color: #111;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.15;
}

.store-navbar .shein-mega-menu__catalog {
    display: grid;
    gap: 1.35rem 1.15rem;
    max-height: calc(min(78vh, 580px) - 118px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: .15rem .35rem .8rem;
    align-content: start;
    justify-content: start;
}

.store-navbar .shein-mega-menu__catalog--children {
    grid-template-columns: repeat(auto-fill, 104px);
}

[dir="ltr"] .store-navbar .shein-mega-menu__catalog {
    direction: ltr;
}

[dir="rtl"] .store-navbar .shein-mega-menu__catalog {
    direction: rtl;
}

.store-navbar .shein-mega-menu__catalog .shein-circle-card {
    direction: inherit;
}

.shein-mega-menu__empty {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: .25rem;
}

.store-navbar .shein-circle-card {
    gap: .48rem;
    width: 104px;
    min-width: 104px;
}

.store-navbar .shein-circle-card__image {
    width: 82px;
    height: 82px;
    border-radius: 999px;
    border: 1px solid #edf0f3;
    background: #f4f4f4;
}

.store-navbar .shein-circle-card__label {
    max-width: 118px;
    min-height: 2.45em;
    color: #111;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.18;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.store-navbar .shein-circle-card--all .shein-circle-card__image {
    border-color: #d6dbe2;
    box-shadow: 0 0 0 3px #f7f8fa;
}

.store-navbar .shein-circle-card--all .shein-circle-card__label {
    font-weight: 800;
}

@media (max-width: 1199.98px) {
    .shein-mega-menu {
        width: min(1120px, calc(100vw - 24px));
        grid-template-columns: 165px minmax(0, 1fr);
        padding: 1.5rem;
        max-height: min(72vh, 600px);
    }

    .shein-mega-menu__catalog {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-height: min(72vh, 600px);
    }
}

.shein-mobile-links,
.shein-mobile-accordion__panel {
    display: flex;
    flex-direction: column;
}

.shein-mobile-links a,
.shein-mobile-accordion__panel a {
    color: #111;
    text-decoration: none;
    padding: .78rem 0;
    border-bottom: 1px solid #efefef;
}

.shein-mobile-accordion__toggle {
    width: 100%;
    border: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .88rem 0;
    font-weight: 700;
}

.shein-mobile-accordion__panel {
    display: none;
    padding-inline-start: .8rem;
}

.shein-mobile-accordion__panel.is-open {
    display: flex;
}

.shein-home {
    padding: 1.5rem 0 3rem;
}

.shein-home-hero__slider {
    position: relative;
    width: 100%;
}

.shein-home-swiper,
.shein-home-swiper .swiper-wrapper,
.shein-home-swiper .swiper-slide {
    width: 100%;
}

.shein-home-swiper .swiper-slide {
    height: auto;
}

.shein-hero-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
    border-radius: 28px;
    overflow: hidden;
    padding: 3rem;
    background: #f3f4f6;
    background-size: cover;
    background-position: center;
    box-shadow: 0 26px 60px rgba(255, 87, 132, .18);
}

.shein-hero-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #f3f4f6;
}

.shein-hero-card--no-image {
    background-image:
        linear-gradient(135deg, var(--hero-deep, #c63d66) 0%, var(--hero-base, #ff5c86) 52%, var(--hero-soft, #f5547f) 100%);
}

.shein-hero-card__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 25%),
        linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,.04));
}

.shein-hero-card__content,
.shein-hero-card__badge {
    position: relative;
    z-index: 1;
}

.shein-hero-card__content {
    max-width: 460px;
    color: #fff;
}

[dir="rtl"] .shein-hero-card__content {
    padding-left: 4.75rem;
    padding-right: 4.5rem;
}

[dir="ltr"] .shein-hero-card__content {
    padding-right: 4.75rem;
    padding-left: 4.5rem;
}

[dir="rtl"] .shein-hero-card__actions {
    padding-right: 2.5rem;
}

[dir="ltr"] .shein-hero-card__actions {
    padding-left: 2.5rem;
}

.shein-hero-card__eyebrow,
.shein-section-heading__eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

html[lang="ar"] [dir="rtl"] .shein-hero-card__eyebrow,
html[lang="ar"] [dir="rtl"] .shein-section-heading,
html[lang="ar"] [dir="rtl"] .shein-section-heading__eyebrow,
html[lang="ar"] [dir="rtl"] .shein-section-heading h2,
html[lang="ar"] [dir="rtl"] .shein-category-toolbar h1,
html[lang="ar"] [dir="rtl"] .shein-section-heading a,
html[lang="ar"] [dir="rtl"] .shein-section-heading__link-label,
html[lang="ar"] [dir="rtl"] .shein-btn,
html[lang="ar"] [dir="rtl"] .shein-apply-btn {
    letter-spacing: 0;
    word-spacing: 0;
    text-transform: none;
    font-family: 'Cairo', sans-serif;
}

html[lang="ar"] .shein-section-heading__eyebrow,
html[lang="ar"] .shein-section-heading__eyebrow span,
html[lang="ar"] .shein-section-heading--inline .shein-section-heading__eyebrow {
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    font-family: 'Cairo', sans-serif !important;
}

html[lang="he"] [dir="rtl"] .shein-hero-card__eyebrow,
html[lang="he"] [dir="rtl"] .shein-section-heading,
html[lang="he"] [dir="rtl"] .shein-section-heading__eyebrow,
html[lang="he"] [dir="rtl"] .shein-section-heading h2,
html[lang="he"] [dir="rtl"] .shein-category-toolbar h1,
html[lang="he"] [dir="rtl"] .shein-section-heading a,
html[lang="he"] [dir="rtl"] .shein-section-heading__link-label,
html[lang="he"] [dir="rtl"] .shein-btn,
html[lang="he"] [dir="rtl"] .shein-apply-btn {
    letter-spacing: 0;
    word-spacing: 0;
    text-transform: none;
    font-family: 'Heebo', sans-serif;
}

.shein-hero-card h1 {
    margin: .8rem 0;
    font-size: clamp(2.4rem, 4vw, 4.1rem);
    line-height: .95;
    font-weight: 900;
    text-wrap: balance;
}

.shein-hero-card p {
    font-size: 1rem;
    color: rgba(255,255,255,.88);
    margin-bottom: 1.6rem;
}

.shein-hero-card__badge {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    padding: .95rem 1.1rem;
    border-radius: 20px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.shein-hero-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.shein-btn,
.shein-apply-btn {
    border: 0;
    border-radius: 999px;
    padding: .82rem 1.45rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease;
}

.shein-btn:hover,
.shein-apply-btn:hover {
    transform: translateY(-1px);
}

.shein-btn--light {
    background: #fff;
    color: #111;
}

.shein-btn--ghost {
    background: rgba(255,255,255,.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,.34);
}

.shein-btn--dark,
.shein-apply-btn {
    background: #111;
    color: #fff;
}

.shein-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.88);
    color: #111;
    z-index: 3;
    box-shadow: 0 15px 30px rgba(20,20,20,.1);
}

.shein-slider-arrow--prev {
    left: 14px;
}

.shein-slider-arrow--next {
    right: 14px;
}

[dir="rtl"] .shein-slider-arrow--prev {
    left: auto;
    right: 14px;
}

[dir="rtl"] .shein-slider-arrow--next {
    right: auto;
    left: 14px;
}

.shein-slider-pagination {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    bottom: 20px !important;
    transform: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    z-index: 3;
}

.shein-slider-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,.7);
    opacity: 1;
}

.shein-slider-pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 999px;
    background: #fff;
}

.shein-circle-section,
.shein-product-section,
.shein-highlight-strip {
    padding-top: 2rem;
}

.shein-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.shein-section-heading h2,
.shein-category-toolbar h1 {
    margin: .35rem 0 0;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 800;
}

.shein-section-heading a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #111;
    font-weight: 700;
    text-decoration: none;
}

[dir="rtl"] .shein-section-heading a {
    flex-direction: row-reverse;
}

.shein-section-heading--page {
    margin-bottom: .35rem;
}

.shein-section-heading--page h2 {
    margin-top: .2rem;
    font-size: clamp(1.8rem, 2.8vw, 2.8rem);
}

.shein-section-heading--inline {
    margin-bottom: 1rem;
}

.shein-category-toolbar__meta {
    margin: 0;
    color: #6b7280;
    font-size: .95rem;
}

.shein-circle-category-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .35rem;
    scroll-snap-type: x proximity;
    justify-content: flex-start;
}

[dir="rtl"] .shein-circle-category-grid {
    justify-content: flex-start;
}

.shein-circle-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
    color: #111;
    text-decoration: none;
    flex: 0 0 92px;
    scroll-snap-align: start;
}

.shein-circle-category__image {
    width: 96px;
    height: 96px;
}

.shein-circle-category__label {
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .shein-circle-category-grid {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 1.5rem 1rem;
        overflow: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
        justify-content: stretch;
        justify-items: center;
        align-items: start;
        width: 100%;
    }

    [dir="rtl"] .shein-circle-category-grid,
    [dir="ltr"] .shein-circle-category-grid {
        justify-content: stretch;
    }

    .shein-circle-category {
        flex: initial;
        width: min(100%, 120px);
    }

    .shein-circle-category__image {
        margin-inline: auto;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .shein-circle-section .container {
        padding-inline: 20px;
    }

    .shein-circle-category-grid {
        gap: 1.1rem;
    }

    .shein-circle-category {
        gap: .32rem;
    }

    .shein-circle-category__image {
        width: 84px;
        height: 84px;
        margin-inline: auto;
    }

    .shein-circle-category__label {
        font-size: .78rem;
        line-height: 1.35;
    }
}

.shein-highlight-strip__grid {
    background: #fff;
    border-radius: 26px;
    padding: 1.2rem;
    border: 1px solid #ececec;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.shein-highlight-strip__grid article {
    min-height: 96px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f7f7f7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #f1f1f1;
}

.shein-highlight-strip__grid strong {
    font-size: 1.6rem;
    font-weight: 900;
}

.shein-highlight-strip__grid span {
    color: #666;
    font-size: .9rem;
}

.shein-product-section--soft {
    background: linear-gradient(180deg, transparent, #fff 16%);
}

.shein-infinite-loader {
    display: flex;
    justify-content: center;
    padding: 1rem 0 .25rem;
}

.shein-infinite-loader span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--store-accent);
    animation: shein-loader-spin .75s linear infinite;
}

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

.shein-category-page {
    padding: 1.4rem 0 3rem;
}

.shein-page-shell--products {
    width: 100%;
    max-width: none;
    padding-inline: clamp(34px, 4.4vw, 92px);
}

.shein-breadcrumb {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.3rem;
    font-size: .9rem;
}

.shein-breadcrumb a {
    color: #555;
    text-decoration: none;
}

.shein-category-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

@media (max-width: 991.98px) {
    .shein-page-shell--products {
        padding-inline: 16px;
    }
}


@media (min-width: 768px) and (max-width: 991.98px) {
    .shein-category-page:not(:has(.shein-page-shell--mobile-categories)) {
        padding: 1rem 0 calc(5.75rem + env(safe-area-inset-bottom));
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) {
        padding-inline: 20px;
    }

    .shein-category-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .9rem;
    }

    .shein-category-toolbar > div:first-child {
        flex: 1 1 260px;
        min-width: 0;
    }

    .shein-category-toolbar__actions {
        flex: 1 1 360px;
        justify-content: flex-end;
        margin-inline: 0;
        min-width: 0;
    }

    .shein-category-search {
        width: min(100%, 430px);
        min-width: 0;
    }

    .shein-mobile-controls__track {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
        gap: .65rem;
        overflow: visible;
        padding: .1rem 0 .65rem;
    }

    .shein-mobile-controls__sort,
    .shein-mobile-controls__chip {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding-inline: .75rem;
    }

    .shein-empty-state {
        border-radius: 18px;
        padding: 2rem 1.25rem;
        min-height: 180px;
    }

    [data-mobile-products-grid] .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
}
.shein-category-toolbar p {
    margin: .4rem 0 0;
    color: #6a6a6a;
}

.shein-category-toolbar__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-inline: auto;
}

.shein-category-search {
    min-width: min(420px, 100%);
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    overflow: hidden;
}

.shein-category-search input {
    flex: 1;
    border: 0;
    outline: 0;
    min-width: 0;
    padding: .8rem 1rem;
    background: transparent;
    text-align: start;
}

.shein-category-search button {
    width: 46px;
    align-self: stretch;
    border: 0;
    background: #111;
    color: #fff;
}

.shein-filter-panel,
.shein-filter-drawer__copy,
.shein-empty-state {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 1.3rem;
}

.shein-filter-drawer__copy > .shein-filter-group:first-child {
    margin-bottom: 1rem;
}

.shein-filter-panel {
    position: sticky;
    top: 110px;
}

.shein-filter-group + .shein-filter-group {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid #efefef;
}

.shein-filter-group__head {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
}

.shein-filter-group__body {
    padding-top: 1rem;
}

.shein-filter-category-list,
.shein-check-grid {
    display: grid;
    gap: .65rem;
}

.shein-filter-option,
.shein-check-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #333;
    text-decoration: none;
    font-size: .92rem;
}

.shein-filter-option.active {
    font-weight: 700;
    color: #111;
}

.shein-filter-option--toggle {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: inherit;
}

.shein-filter-category-item {
    display: grid;
    gap: .45rem;
}

.shein-filter-subcategory-list {
    display: grid;
    gap: .45rem;
    padding-inline-start: 1.45rem;
}

.shein-filter-option--sub {
    font-size: .88rem;
    color: #5b6470;
}

.shein-filter-option i {
    margin-left: auto;
    color: #8b8b8b;
}

.shein-filter-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #cfcfcf;
    flex: 0 0 14px;
}

.shein-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem 1rem;
}

.shein-color-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .92rem;
}

.shein-color-option input,
.shein-check-option input {
    accent-color: #111;
}

.shein-sort-choice-list {
    display: grid;
    gap: .7rem;
}

.shein-sort-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1rem;
    border: 1px solid #e6e8ee;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: .2s ease;
}

.shein-sort-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.shein-sort-choice span {
    flex: 1 1 auto;
    font-size: .96rem;
    font-weight: 600;
    color: #222;
    line-height: 1.35;
}

.shein-sort-choice i {
    color: transparent;
    font-size: .9rem;
    transition: .2s ease;
}

.shein-sort-choice:hover {
    border-color: #cfd6e4;
    background: #fafbfd;
}

.shein-sort-choice.is-active {
    border-color: #111;
    background: #f6f7f9;
}

.shein-sort-choice.is-active i {
    color: #111;
}

.shein-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #dedede;
    flex: 0 0 26px;
}

.shein-view-more {
    margin-top: .7rem;
    border: 0;
    background: transparent;
    font-weight: 700;
    color: #222;
    padding: 0;
}

.shein-price-range__values {
    display: flex;
    justify-content: space-between;
    color: #5b5b5b;
    margin-bottom: .7rem;
    font-size: .9rem;
}

.shein-price-range .range-input {
    width: 100%;
    accent-color: #111;
}

.shein-apply-btn {
    width: 100%;
    margin-top: 1.2rem;
}

.shein-filter-drawer-btn {
    border: 1px solid #dcdcdc;
    background: #fff;
    border-radius: 999px;
    height: 42px;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.shein-filter-drawer {
    height: min(78vh, 720px);
    max-height: 95vh;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    transition: height .22s ease;
}

.shein-filter-drawer .offcanvas-header {
    border-bottom: 1px solid #ececec;
    touch-action: none;
}

.shein-filter-drawer .offcanvas-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.shein-filter-drawer.is-dragging {
    transition: none;
}

.product-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 12px 30px rgba(17,17,17,.04);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(17,17,17,.08);
}

.product-card .pc-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-bottom: 1px solid rgba(226,232,240,.75);
}

.product-card .pc-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
}

.product-card .pc-img-wrap .pc-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.product-card .pc-img-wrap .pc-gallery-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .4s ease;
}

.product-card .pc-img-wrap .pc-gallery-img.is-active,
.product-card .pc-img-wrap .pc-image-link:not(.pc-image-gallery) .pc-gallery-img {
    opacity: 1;
    pointer-events: auto;
}

.product-card .pc-img-wrap .pc-image-link:not(.pc-image-gallery) .pc-gallery-img {
    position: static;
}

.pc-gallery-dots {
    position: absolute;
    left: 50%;
    bottom: .45rem;
    z-index: 2;
    display: flex;
    gap: .25rem;
    transform: translateX(-50%);
    pointer-events: none;
}

.pc-gallery-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .28);
}

.pc-gallery-dot.is-active {
    background: rgba(15, 23, 42, .78);
}

.pc-wishlist-btn {
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #222;
    z-index: 2;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.pc-wishlist-btn:hover {
    transform: translateY(-1px);
    color: #111;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .12);
}

.pc-wishlist-btn.is-active {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid rgba(225, 29, 72, .14);
    box-shadow: 0 14px 28px rgba(225, 29, 72, .16);
}

.pc-wishlist-btn.is-active i {
    font-weight: 900;
}

.pc-badge-featured,
.pc-badge-oos,
.pc-badge-sale {
    position: absolute;
    left: .8rem;
    top: .8rem;
    z-index: 2;
    border-radius: 999px;
    padding: .35rem .65rem;
    font-size: .72rem;
    font-weight: 800;
}

.pc-badge-featured {
    background: #111;
    color: #fff;
}

.pc-badge-sale {
    left: .8rem;
    right: auto;
    background: #dc2626;
    color: #fff;
    box-shadow: 0 10px 22px rgba(220, 38, 38, .22);
}

.pc-badge-oos {
    top: auto;
    bottom: .8rem;
    background: #fff;
    color: #d62828;
    font-size: .68rem;
    font-weight: 800;
    padding: .28rem .58rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 8px 16px rgba(17, 17, 17, .07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 1.6rem);
    inset-inline-start: .8rem;
    inset-inline-end: auto;
}

.pc-body {
    padding: .85rem .85rem .95rem;
}

.pc-cat-label {
    font-size: .73rem;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .2rem;
}

.pc-name {
    margin-bottom: 0;
}

.pc-name a {
    color: #161616;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.25;
}

.pc-rating-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .35rem;
}

.pc-rating-row .pc-stars {
    display: inline-flex;
    align-items: center;
    gap: .08rem;
}

.pc-rating-row .pc-stars i {
    font-size: .82rem;
    color: #d7dde7;
}

.pc-rating-row .pc-stars i.is-filled {
    color: #f6b100;
}

.pc-rating-text {
    font-size: .82rem;
    color: #6b7280;
    line-height: 1;
}

.pc-price-row {
    margin-top: .45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.pc-price-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .18rem;
}

.pc-price-old {
    font-size: .8rem;
    color: #9ca3af;
    text-decoration: line-through;
    line-height: 1;
}

.wishlist-page {
    padding: 2rem 0 3rem;
}

.wishlist-page__hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.wishlist-page__eyebrow {
    display: inline-block;
    margin-bottom: .4rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}

.wishlist-page__hero h1 {
    margin: 0;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 900;
}

.wishlist-page__hero p {
    margin: .35rem 0 0;
    color: #64748b;
}

.wishlist-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.wishlist-empty-state__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
    font-size: 1.6rem;
}

.wishlist-empty-state h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 900;
}

.wishlist-empty-state p {
    margin: .6rem 0 1.1rem;
    color: #64748b;
}

@media (max-width: 767.98px) {
    .wishlist-page__hero {
        align-items: start;
        flex-direction: column;
    }
}

.pc-price {
    font-size: 1.15rem;
    font-weight: 900;
    color: #111;
}

.pc-price-sale {
    color: #c1121f;
}

.pc-add-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(17, 17, 17, .2);
}

.pc-add-btn__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

@media (max-width: 991.98px) {
    .shein-mainbar__inner {
        grid-template-columns: auto 1fr auto;
    }

    .shein-search {
        display: none;
    }

    .shein-brand {
        justify-self: center;
        font-size: 2rem;
    }

    .shein-hero-card {
        min-height: 420px;
        padding: 2rem;
    }

    .shein-slider-arrow {
        width: 42px;
        height: 42px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .shein-slider-arrow--prev {
        left: 14px;
    }

    .shein-slider-arrow--next {
        right: 14px;
    }

    [dir="rtl"] .shein-slider-arrow--prev {
        left: auto;
        right: 14px;
    }

    [dir="rtl"] .shein-slider-arrow--next {
        right: auto;
        left: 14px;
    }

    .shein-highlight-strip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    html {
        height: -webkit-fill-available;
        background: #f7f7f7;
    }

    body {
        min-height: 100svh;
        min-height: -webkit-fill-available;
        background: #f7f7f7;
    }

    main {
        flex: 1 0 auto;
    }

    .store-footer {
        margin-top: auto;
    }

    .footer-bottom {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    .shein-home {
        padding-top: .45rem;
        background:
            linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 42%, #ffffff 100%);
    }

    .shein-category-page {
        padding-top: 1rem;
    }

    .shein-home-hero .container,
    .shein-circle-section .container,
    .shein-product-section .container {
        padding-inline: 14px;
    }

    .shein-home-hero__slider,
    .shein-home-swiper,
    .shein-home-swiper .swiper-slide {
        width: 100%;
    }

    .shein-home-hero__slider {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shein-brand {
        font-size: 1.55rem;
    }

    .shein-brand img {
        max-height: 34px;
    }

    .shein-hero-card {
        position: relative;
        width: 100%;
        height: auto;
        min-height: clamp(148px, 41vw, 188px);
        aspect-ratio: 16 / 7;
        border-radius: 24px;
        overflow: hidden;
        padding: 0;
        background:
            linear-gradient(135deg, #ff496c 0%, #ff7a59 38%, #ff5895 100%);
        background-size: cover;
        background-position: center;
        box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
    }

    .shein-hero-card__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .shein-hero-card__content {
        max-width: calc(100% - 56px);
    }

    [dir="rtl"] .shein-hero-card__content {
        padding-right: 2.6rem;
    }

    [dir="ltr"] .shein-hero-card__content {
        padding-left: 2.6rem;
    }

    .shein-hero-card h1 {
        font-size: 1.85rem;
        line-height: 1.02;
        max-width: 7ch;
    }

    .shein-hero-card__badge {
        right: 1rem;
        bottom: 1rem;
        padding: .7rem .9rem;
    }

    .shein-slider-arrow {
        display: none;
    }

    .shein-slider-pagination {
        bottom: 10px !important;
    }

    .shein-circle-category-grid {
        display: flex;
        gap: .85rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .15rem .15rem .55rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .shein-circle-category-grid::-webkit-scrollbar {
        display: none;
    }

    .shein-circle-category {
        flex: 0 0 86px;
        min-width: 86px;
        gap: .5rem;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .shein-circle-category__image {
        width: 86px;
        height: 86px;
        margin-inline: auto;
        border-radius: 28px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(244,247,250,.96) 100%);
        border: 1px solid rgba(226,232,240,.95);
        box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
    }

    .shein-circle-category__image img {
        object-fit: cover;
    }

    .shein-circle-category__label,
    .shein-circle-card__label {
        font-size: .75rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .shein-section-heading {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-bottom: .8rem;
    }

    .shein-section-heading > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    .shein-section-heading__eyebrow {
        display: none;
    }

    .shein-section-heading h2 {
        margin-top: 0;
        font-size: 1.3rem;
        letter-spacing: -.04em;
        line-height: 1.15;
    }

    .shein-section-heading a {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: .72rem;
        padding: .4rem .75rem;
        border-radius: 999px;
        color: #0f172a;
        background: rgba(255,255,255,.94);
        border: 1px solid rgba(226,232,240,.95);
        box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
    }

    .product-card .pc-img-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: #f5f5f5;
        border-bottom: 1px solid rgba(226,232,240,.75);
        border-radius: 26px 26px 0 0;
    }

    .product-card .pc-img-wrap a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .product-card {
        border-radius: 26px;
        border-color: rgba(226,232,240,.92);
        box-shadow: 0 14px 28px rgba(15, 23, 42, .05);
    }

    .product-card .pc-img-wrap img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        padding: 0;
    }

    .product-card .pc-img-wrap.is-landscape {
        background: #fff;
    }

    .product-card .pc-img-wrap.is-landscape img {
        object-fit: contain;
    }

    .product-card .pc-img-wrap.is-closeup img {
        object-fit: contain;
        transform: none;
    }

    .pc-body {
        padding: .82rem .82rem .95rem;
    }

    .pc-cat-label {
        margin-bottom: .2rem;
        font-size: .66rem;
        letter-spacing: 0;
        text-transform: none;
    }

    .pc-name {
        margin-bottom: 0;
        min-height: 2.8em;
    }

    .pc-name a {
        line-height: 1.35;
        font-size: .96rem;
    }

    .pc-price-row {
        margin-top: .45rem;
        gap: .5rem;
    }

    .shein-page-shell--products .shein-breadcrumb,
    .shein-page-shell--products .shein-category-toolbar {
        display: none;
    }

    .shein-category-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
    }

    .shein-category-toolbar__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 52px;
        align-items: stretch;
        gap: .65rem;
        width: 100%;
        margin-inline: 0;
    }

    .shein-category-search {
        min-width: 100%;
        min-height: 52px;
        border-radius: 18px;
        border-color: #d9dee7;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .shein-category-search input {
        padding: .95rem 1rem 1rem 1.1rem;
        font-size: .98rem;
    }

    .shein-category-search button {
        width: 52px;
        border-radius: 0;
    }

    .shein-filter-drawer-btn {
        width: 52px;
        min-width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 16px;
        justify-content: center;
        gap: 0;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    }

    .shein-filter-drawer-btn span {
        display: none;
    }

    .shein-filter-drawer-btn i {
        font-size: 1rem;
    }

    .sort-select {
        width: 100%;
        height: 46px;
        padding: 0 1rem;
        border-radius: 16px;
        background: #fff;
        border-color: #d9dee7;
        font-size: .92rem;
        font-weight: 600;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    .shein-filter-sort-select {
        height: 52px;
        border-radius: 18px;
        box-shadow: none;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%230f172a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 1rem center;
        background-size: 12px 12px;
        padding-left: 2.5rem;
    }

    [dir="ltr"] .shein-filter-sort-select {
        background-position: right 1rem center;
        padding-left: 1rem;
        padding-right: 2.5rem;
    }

    .shein-filter-drawer {
        height: min(68svh, calc(100vh - 88px));
        max-height: min(94svh, calc(100vh - 8px));
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
        z-index: 1095;
    }

    .offcanvas-backdrop.show {
        z-index: 1090;
    }

    .shein-filter-drawer .offcanvas-header {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #fff;
        padding-top: 1.1rem;
        padding-bottom: .9rem;
        cursor: ns-resize;
    }

    .shein-filter-drawer .offcanvas-header::before {
        content: "";
        position: absolute;
        top: .42rem;
        left: 50%;
        transform: translateX(-50%);
        width: 54px;
        height: 5px;
        border-radius: 999px;
        background: #d5dae3;
    }

    .shein-filter-drawer .offcanvas-body {
        padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
    }

    .shein-filter-drawer .shein-apply-btn {
        position: sticky;
        bottom: max(.4rem, env(safe-area-inset-bottom, 0px));
        width: 100%;
        min-height: 52px;
        margin-top: 1rem;
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 800;
        border-radius: 18px;
        background: #111;
        color: #fff;
        box-shadow: 0 14px 28px rgba(15, 23, 42, .16);
        z-index: 2;
    }
}

@media (min-width: 768px) and (max-width: 1180px) {
    .store-navbar__quick-links {
        display: none !important;
    }

    .store-navbar__mobile-menu-btn {
        display: inline-flex;
    }

    .store-navbar__mobile-links.is-open {
        display: block;
    }

    .store-navbar__mobile-links {
        inset-inline-end: 16px;
        width: min(260px, calc(100vw - 32px));
    }

    .shein-filter-drawer {
        height: min(70svh, calc(100vh - 96px));
        max-height: min(94svh, calc(100vh - 8px));
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
    }

    .shein-filter-drawer .offcanvas-header {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #fff;
        padding-top: 1.1rem;
        padding-bottom: .9rem;
        cursor: ns-resize;
    }

    .shein-filter-drawer .offcanvas-header::before {
        content: "";
        position: absolute;
        top: .42rem;
        left: 50%;
        transform: translateX(-50%);
        width: 54px;
        height: 5px;
        border-radius: 999px;
        background: #d5dae3;
    }

    .shein-filter-drawer .offcanvas-body {
        padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
    }
}

body.store-mobile-menu-open {
    overflow: hidden;
}

.store-navbar__mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
}

.store-navbar__mobile-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(6, 10, 22, .5);
    opacity: 0;
    transition: opacity .28s ease;
}

.store-navbar__mobile-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(320px, 88vw);
    padding: 1rem .9rem 1.25rem;
    background: linear-gradient(180deg, #2d2d2d 0%, #0e0e0e 100%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    transform: translateX(calc(-100% - 16px));
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

[dir="rtl"] .store-navbar__mobile-panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateX(calc(100% + 16px));
}

.store-navbar__mobile-drawer.is-open {
    pointer-events: auto;
}

.store-navbar__mobile-drawer.is-open .store-navbar__mobile-backdrop {
    opacity: 1;
}

.store-navbar__mobile-drawer.is-open .store-navbar__mobile-panel {
    transform: translateX(0);
}

.store-navbar__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.store-navbar__mobile-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.store-navbar__mobile-brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    flex: 0 0 48px;
    background: rgba(255, 255, 255, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.store-navbar__mobile-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-navbar__mobile-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.store-navbar__mobile-brand-copy strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-navbar__mobile-brand-copy span {
    color: rgba(255, 255, 255, .58);
    font-size: .75rem;
    font-weight: 600;
}

.store-navbar__mobile-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.store-navbar__mobile-links-inner {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.store-navbar__mobile-link {
    min-height: 54px;
    padding: 0 1rem;
    border-radius: 16px;
    background: transparent;
    color: rgba(255, 255, 255, .78);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 800;
    transition: .22s ease;
}

.store-navbar__mobile-link i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .84);
    flex: 0 0 38px;
}

.store-navbar__mobile-link-icons {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.store-navbar__mobile-link:hover,
.store-navbar__mobile-link.active {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .26), rgba(var(--primary-rgb), .14));
    border-color: rgba(var(--primary-rgb), .16);
    color: #fff;
}

.store-navbar__mobile-link:hover i,
.store-navbar__mobile-link.active i {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.store-navbar__mobile-link--toggle {
    width: 100%;
}

.store-navbar__mobile-link--toggle[aria-expanded="true"] .store-navbar__mobile-chevron {
    transform: rotate(180deg);
}

.store-navbar__mobile-chevron {
    transition: transform .22s ease;
}

.store-navbar__mobile-submenu {
    display: none;
    margin-top: .55rem;
    padding: .9rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}

.store-navbar__mobile-submenu.is-open {
    display: block;
}

.store-navbar__mobile-category-block + .store-navbar__mobile-category-block {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.store-navbar__mobile-sublink,
.store-navbar__mobile-childlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    border-radius: 12px;
    transition: .18s ease;
}

.store-navbar__mobile-sublink {
    padding: .78rem .85rem;
    font-size: .95rem;
    font-weight: 700;
}

.store-navbar__mobile-sublink.active,
.store-navbar__mobile-sublink:hover,
.store-navbar__mobile-childlink:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.store-navbar__mobile-sublink small {
    color: rgba(255, 255, 255, .52);
    font-size: .72rem;
    font-weight: 700;
}

.store-navbar__mobile-category-children {
    display: grid;
    gap: .35rem;
    padding-inline: .65rem;
    margin-top: .35rem;
}

.store-navbar__mobile-childlink {
    padding: .5rem .75rem;
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .64);
}

@media (min-width: 768px) and (max-width: 1180px) {
    .store-navbar__mobile-panel {
        width: min(360px, 72vw);
    }
}

@media (max-width: 767px) {
    .store-navbar__mobile-links {
        display: none !important;
    }
}

/* Mobile drawer alignment fix */
.store-navbar__mobile-panel {
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    direction: rtl;
    text-align: right;
}

.store-navbar__mobile-links-inner,
.store-navbar__mobile-group,
.store-navbar__mobile-submenu,
.store-navbar__mobile-category-children {
    width: 100%;
}

.store-navbar__mobile-link {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    text-align: right;
}

.store-navbar__mobile-link > span:first-child {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-navbar__mobile-link > i,
.store-navbar__mobile-link-icons {
    justify-self: end;
}

.store-navbar__mobile-link-icons {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: end;
    gap: .45rem;
}

.store-navbar__mobile-link--toggle {
    grid-template-columns: minmax(0, 1fr) auto;
}

.store-navbar__mobile-sublink,
.store-navbar__mobile-childlink {
    width: 100%;
    box-sizing: border-box;
    text-align: right;
}

.store-navbar__mobile-brand {
    flex: 1;
}

.store-navbar__mobile-brand-copy {
    text-align: right;
}

@media (max-width: 767px) {
    .store-navbar__mobile-panel {
        width: min(320px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
    }
}

/* Simplified mobile drawer rows */
.store-navbar__mobile-panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: min(300px, calc(100vw - 18px));
    max-width: calc(100vw - 18px);
    direction: ltr;
    text-align: right;
}

.store-navbar__mobile-header {
    flex-direction: row-reverse;
}

.store-navbar__mobile-brand {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.store-navbar__mobile-link,
.store-navbar__mobile-link--toggle {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0 .95rem;
}

.store-navbar__mobile-link > span:first-child {
    flex: 1 1 auto;
    display: block !important;
    text-align: right;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    color: inherit;
}

.store-navbar__mobile-link > i {
    flex: 0 0 38px;
    margin-inline-start: .8rem;
}

.store-navbar__mobile-link-icons {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-inline-start: .8rem;
}

.store-navbar__mobile-link-icons .store-navbar__mobile-chevron {
    font-size: .82rem;
    width: 22px;
    height: 22px;
    background: transparent;
}

.store-navbar__mobile-link-icons i:last-child {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.store-navbar__mobile-sublink,
.store-navbar__mobile-childlink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
}

.store-navbar__mobile-submenu {
    padding: .85rem;
}

@media (max-width: 767px) {
    .store-navbar__mobile-panel {
        width: min(292px, calc(100vw - 14px));
        max-width: calc(100vw - 14px);
    }
}

/* Categories trigger reference style */
.store-navbar__mobile-group {
    width: 100%;
}

.store-navbar__mobile-link--toggle {
    min-height: 52px;
    padding: 0 1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(35, 79, 97, .95), rgba(25, 55, 76, .95));
    border: 1px solid rgba(98, 219, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    color: #fff;
}

.store-navbar__mobile-link--toggle > span:first-child {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}

.store-navbar__mobile-link--toggle .store-navbar__mobile-link-icons {
    gap: .5rem;
}

.store-navbar__mobile-link--toggle .store-navbar__mobile-link-icons i:last-child,
.store-navbar__mobile-link--toggle .store-navbar__mobile-chevron {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.store-navbar__mobile-submenu {
    margin-top: .65rem;
    padding: .6rem .9rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .05);
}

.store-navbar__mobile-category-block + .store-navbar__mobile-category-block {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.store-navbar__mobile-sublink {
    min-height: 56px;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .95);
    font-size: 1rem;
    font-weight: 800;
}

.store-navbar__mobile-sublink:last-child {
    border-bottom: 0;
}

.store-navbar__mobile-sublink.active,
.store-navbar__mobile-sublink:hover {
    color: #fff;
    background: transparent !important;
}

.store-navbar__mobile-sublink small,
.store-navbar__mobile-category-children {
    display: none;
}

.store-navbar__mobile-link-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: .8rem;
}

.store-navbar__mobile-link-arrow .store-navbar__mobile-chevron,
.store-navbar__mobile-link-icons i {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.store-navbar__mobile-link--toggle[aria-expanded="true"] .store-navbar__mobile-link-arrow .store-navbar__mobile-chevron {
    transform: rotate(180deg);
}

.store-navbar__mobile-link--toggle .store-navbar__mobile-link-icons {
    margin-inline-start: .8rem;
    margin-inline-end: 0;
}

/* Restore natural RTL reading for categories */
.store-navbar__mobile-link--toggle,
.store-navbar__mobile-submenu,
.store-navbar__mobile-sublink {
    direction: rtl;
    text-align: right;
}

.store-navbar__mobile-link--toggle {
    flex-direction: row;
}

.store-navbar__mobile-link--toggle .store-navbar__mobile-link-icons {
    order: 1;
    margin-inline-start: 0;
    margin-inline-end: .8rem;
}

.store-navbar__mobile-link--toggle > span:nth-child(2) {
    order: 2;
    flex: 1 1 auto;
    text-align: center;
}

.store-navbar__mobile-link-arrow {
    order: 3;
    margin-inline-end: 0;
    margin-inline-start: .8rem;
}

.store-navbar__mobile-sublink {
    justify-content: flex-start;
}

.store-navbar__mobile-sublink > span {
    width: 100%;
    text-align: right;
}

/* Keep only one strong selected item in mobile drawer */
.store-navbar__mobile-link:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .06);
    color: #fff;
}

.store-navbar__mobile-link:hover i {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.store-navbar__mobile-link.active,
.store-navbar__mobile-link--toggle.active {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .26), rgba(var(--primary-rgb), .14));
    border-color: rgba(var(--primary-rgb), .16);
    color: #fff;
}

.store-navbar__mobile-link.active i,
.store-navbar__mobile-link--toggle.active i {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.store-navbar__mobile-sublink:hover {
    color: rgba(255, 255, 255, .95);
    background: rgba(255, 255, 255, .03) !important;
}

.store-navbar__mobile-sublink.active {
    color: #fff;
    background: transparent !important;
}

/* Categories button should not look selected by default */
.store-navbar__mobile-link--toggle {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06);
    box-shadow: none;
    color: rgba(255, 255, 255, .92);
}

.store-navbar__mobile-link--toggle .store-navbar__mobile-link-arrow .store-navbar__mobile-chevron,
.store-navbar__mobile-link--toggle .store-navbar__mobile-link-icons i {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .9);
}

.store-navbar__mobile-link--toggle.active {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .26), rgba(var(--primary-rgb), .14));
    border-color: rgba(var(--primary-rgb), .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    color: #fff;
}

.store-navbar__mobile-link--toggle.active .store-navbar__mobile-link-arrow .store-navbar__mobile-chevron,
.store-navbar__mobile-link--toggle.active .store-navbar__mobile-link-icons i {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* LTR fixes for English and Russian mobile drawer */
[dir="ltr"] .store-navbar__mobile-panel {
    inset-inline-start: 0;
    inset-inline-end: auto;
    direction: ltr;
    text-align: left;
}

[dir="ltr"] .store-navbar__mobile-header,
[dir="ltr"] .store-navbar__mobile-brand {
    flex-direction: row;
}

[dir="ltr"] .store-navbar__mobile-brand-copy {
    text-align: left;
}

[dir="ltr"] .store-navbar__mobile-link,
[dir="ltr"] .store-navbar__mobile-link--toggle,
[dir="ltr"] .store-navbar__mobile-submenu,
[dir="ltr"] .store-navbar__mobile-sublink,
[dir="ltr"] .store-navbar__mobile-childlink {
    direction: ltr;
    text-align: left;
}

[dir="ltr"] .store-navbar__mobile-link,
[dir="ltr"] .store-navbar__mobile-link--toggle {
    flex-direction: row;
}

[dir="ltr"] .store-navbar__mobile-link > span:first-child,
[dir="ltr"] .store-navbar__mobile-sublink > span {
    text-align: left;
}

[dir="ltr"] .store-navbar__mobile-link-arrow {
    order: 3;
    margin-inline-start: .8rem;
    margin-inline-end: 0;
}

[dir="ltr"] .store-navbar__mobile-link--toggle > span:nth-child(2) {
    order: 2;
    text-align: center;
}

[dir="ltr"] .store-navbar__mobile-link--toggle .store-navbar__mobile-link-icons {
    order: 1;
    margin-inline-start: 0;
    margin-inline-end: .8rem;
}

[dir="ltr"] .store-navbar__mobile-sublink,
[dir="ltr"] .store-navbar__mobile-childlink {
    justify-content: flex-start;
}


/* Match all LTR menu rows to the Categories icon direction */
[dir="ltr"] .store-navbar__mobile-link:not(.store-navbar__mobile-link--toggle) > i {
    order: 1;
    margin-inline-start: 0;
    margin-inline-end: .8rem;
}

[dir="ltr"] .store-navbar__mobile-link:not(.store-navbar__mobile-link--toggle) > span:first-child {
    order: 2;
    flex: 1 1 auto;
    text-align: left;
}

/* Expandable subcategories inside mobile categories list */
.store-navbar__mobile-sublink--toggle {
    width: 100%;
    justify-content: space-between;
    background: transparent !important;
    cursor: pointer;
}

.store-navbar__mobile-subcategory-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .92);
    flex: 0 0 28px;
}

.store-navbar__mobile-sublink--toggle[aria-expanded="true"] .store-navbar__mobile-subcategory-arrow i {
    transform: rotate(180deg);
}

.store-navbar__mobile-subcategory-arrow i {
    transition: transform .2s ease;
}

.store-navbar__mobile-category-children {
    display: none;
    gap: .35rem;
    padding: .45rem .5rem .25rem;
    margin-top: .2rem;
}

.store-navbar__mobile-category-children.is-open {
    display: grid;
}

.store-navbar__mobile-childlink {
    min-height: 42px;
    padding: 0 .7rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .03);
}

.store-navbar__mobile-childlink.active,
.store-navbar__mobile-childlink:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

[dir="ltr"] .store-navbar__mobile-sublink--toggle {
    direction: ltr;
    text-align: left;
}

[dir="ltr"] .store-navbar__mobile-sublink--toggle > span:nth-child(2) {
    order: 2;
    flex: 1 1 auto;
    text-align: left;
}

[dir="ltr"] .store-navbar__mobile-subcategory-arrow {
    order: 3;
    margin-inline-start: .8rem;
}

[dir="rtl"] .store-navbar__mobile-sublink--toggle > span:nth-child(2) {
    order: 2;
    flex: 1 1 auto;
    text-align: right;
}

[dir="rtl"] .store-navbar__mobile-subcategory-arrow {
    order: 1;
    margin-inline-end: .8rem;
}

/* Remove table-like lines from mobile categories list */
.store-navbar__mobile-sublink,
.store-navbar__mobile-sublink:last-child,
.store-navbar__mobile-sublink--toggle,
.store-navbar__mobile-category-block,
.store-navbar__mobile-category-block + .store-navbar__mobile-category-block {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.store-navbar__mobile-category-block {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.store-navbar__mobile-submenu {
    padding: .75rem .85rem;
}

.store-navbar__mobile-sublink,
.store-navbar__mobile-sublink--toggle {
    margin-bottom: .35rem;
    border-radius: 12px;
}

.store-navbar__mobile-category-block:last-child .store-navbar__mobile-sublink,
.store-navbar__mobile-category-block:last-child .store-navbar__mobile-sublink--toggle {
    margin-bottom: 0;
}

/* Plain subcategory rows without framed pills */
.store-navbar__mobile-sublink--toggle,
.store-navbar__mobile-sublink,
.store-navbar__mobile-childlink {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.store-navbar__mobile-subcategory-arrow {
    background: rgba(255, 255, 255, .08);
}

/* Final mobile subcategory cleanup */
.store-navbar__mobile-sublink--toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: .7rem;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.store-navbar__mobile-sublink--toggle::before,
.store-navbar__mobile-sublink--toggle::after,
.store-navbar__mobile-category-block::before,
.store-navbar__mobile-category-block::after {
    content: none !important;
    display: none !important;
}

.store-navbar__mobile-sublink--toggle > span:last-child {
    flex: 1 1 auto;
}

.store-navbar__mobile-subcategory-arrow {
    flex: 0 0 28px;
    margin: 0 !important;
}

[dir="rtl"] .store-navbar__mobile-sublink--toggle {
    flex-direction: row;
}

[dir="rtl"] .store-navbar__mobile-sublink--toggle > span:last-child {
    order: 1;
    text-align: right;
}

[dir="rtl"] .store-navbar__mobile-subcategory-arrow {
    order: 2;
}

[dir="ltr"] .store-navbar__mobile-sublink--toggle {
    flex-direction: row;
}

[dir="ltr"] .store-navbar__mobile-sublink--toggle > span:last-child {
    order: 1;
    text-align: left;
}

[dir="ltr"] .store-navbar__mobile-subcategory-arrow {
    order: 2;
}

/* Remove translucent background from mobile categories trigger */
.store-navbar__mobile-link--toggle,
.store-navbar__mobile-link--toggle.active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}




.shein-mobile-category-browser {
    padding: 0;
    margin: 0;
    background: #fff;
}

.shein-mobile-category-browser__layout {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    min-height: calc(100vh - 160px);
    background: #fff;
}

.shein-mobile-category-browser,
.shein-mobile-category-browser__layout,
.shein-mobile-category-browser__content {
    background: #fff;
}

.shein-mobile-category-browser__sidebar,
.shein-mobile-category-browser__sidebar-scroll {
    background: #f3f4f6;
}

.shein-mobile-category-browser__sidebar {
    position: relative;
    padding: .7rem .4rem;
}

.shein-mobile-category-browser__sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 1px;
    background: #e5e7eb;
}

.shein-mobile-category-browser__sidebar-title {
    margin-bottom: .75rem;
    font-size: .82rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

.shein-mobile-category-browser__content {
    padding: .15rem 0 0;
    background: #fff;
}

.shein-mobile-category-browser__header,
.shein-mobile-category-browser__grid,
.shein-mobile-category-browser__card,
.shein-mobile-category-browser__label {
    background: transparent;
}

[dir="rtl"] .shein-mobile-category-browser__layout {
    grid-template-columns: minmax(0, 1fr) 84px;
}

[dir="rtl"] .shein-mobile-category-browser__sidebar {
    order: 2;
}

[dir="rtl"] .shein-mobile-category-browser__sidebar::after {
    inset-inline-end: auto;
    inset-inline-start: 0;
}

[dir="rtl"] .shein-mobile-category-browser__content {
    order: 1;
}

.shein-mobile-category-browser__sidebar-scroll {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    scrollbar-width: none;
}

.shein-mobile-category-browser__sidebar-scroll::-webkit-scrollbar {
    display: none;
}

.shein-mobile-category-browser__nav-item {
    position: relative;
    display: block;
    padding: .62rem .45rem;
    border-radius: 12px;
    background: transparent;
    color: #111827;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
}

.shein-mobile-category-browser__nav-item.is-active {
    background: #fff;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.shein-mobile-category-browser__nav-item.is-active::after {
    content: '';
    position: absolute;
    inset-block: 10px;
    width: 3px;
    border-radius: 999px;
    background: var(--store-accent);
    inset-inline-start: 4px;
}

[dir="rtl"] .shein-mobile-category-browser__nav-item.is-active::after {
    inset-inline-start: auto;
    inset-inline-end: 4px;
}

.shein-mobile-category-browser__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.shein-mobile-category-browser__header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.15;
}

.shein-mobile-category-browser__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem .9rem;
    align-content: start;
}

.shein-mobile-category-browser__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .42rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.shein-mobile-category-browser__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #eef2f7;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shein-mobile-category-browser__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shein-mobile-category-browser__card--all .shein-mobile-category-browser__image {
    color: #111827;
    font-size: 1.35rem;
    background: #f3f4f6;
}

.shein-mobile-category-browser__label {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.7em;
    color: #1f2937;
}

@media (max-width: 389.98px) {
    .shein-mobile-category-browser__layout {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    [dir="rtl"] .shein-mobile-category-browser__layout {
        grid-template-columns: minmax(0, 1fr) 78px;
    }

    .shein-mobile-category-browser__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.shein-mobile-controls {
    margin-bottom: 1rem;
}

.shein-mobile-controls__track,
.shein-mobile-subcategory-grid {
    display: flex;
    gap: .65rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .1rem .1rem .45rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.shein-mobile-controls__track::-webkit-scrollbar,
.shein-mobile-subcategory-grid::-webkit-scrollbar {
    display: none;
}

.shein-mobile-controls__sort,
.shein-mobile-controls__chip {
    flex: 0 0 auto;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(222, 226, 235, 1);
    background: #fff;
    color: #111827;
    font-size: .8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding-inline: .9rem;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
}

.shein-mobile-controls__sort {
    position: relative;
    padding-inline-end: 2rem;
}

.shein-mobile-controls__sort span {
    white-space: nowrap;
}

.shein-mobile-controls__sort-select {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.shein-mobile-controls__chip--primary {
    border-color: color-mix(in srgb, var(--store-accent) 25%, white);
    color: var(--store-accent);
}

.shein-mobile-subcategory-strip {
    margin-bottom: 1rem;
}

.shein-mobile-subcategory-card {
    flex: 0 0 74px;
    min-width: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .42rem;
    color: inherit;
    text-decoration: none;
    text-align: center;
}

.shein-mobile-subcategory-card__image {
    width: 74px;
    height: 74px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .95);
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(244,247,250,.98) 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.shein-mobile-subcategory-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shein-mobile-subcategory-card__label {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.7em;
}

.shein-mobile-subcategory-card.is-active .shein-mobile-subcategory-card__image {
    border-color: color-mix(in srgb, var(--store-accent) 36%, white);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--store-accent) 16%, transparent);
}

.shein-mobile-subcategory-card.is-active .shein-mobile-subcategory-card__label {
    color: var(--store-accent);
}

[data-mobile-catalog-shell].is-loading {
    opacity: .72;
    transition: opacity .2s ease;
}

@media (max-width: 767.98px) {
    .shein-mobile-controls {
        position: sticky;
        top: 62px;
        z-index: 1190;
        margin-inline: calc(50% - 50vw);
        padding: .55rem 14px .25rem;
        background: rgba(255, 255, 255, .96);
        border-bottom: 1px solid rgba(226, 232, 240, .9);
        box-shadow: 0 10px 18px rgba(15, 23, 42, .05);
        backdrop-filter: blur(10px);
    }

    .store-navbar--home-hero ~ main .shein-mobile-controls {
        top: 62px;
    }

    .shein-mobile-controls__track,
    .shein-mobile-subcategory-grid {
        padding-inline-end: .85rem;
    }
}


.store-navbar__mobile-search,
.store-navbar__mobile-menu-link {
    display: none;
}

@media (max-width: 991.98px) {
    .store-navbar__mobile-drawer {
        display: none !important;
    }

    .store-navbar {
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    }

    .store-navbar--home-hero {
        position: fixed;
        inset: 0 0 auto 0;
        border-bottom: 0;
        background: linear-gradient(180deg, rgba(8, 10, 14, .82) 0%, rgba(8, 10, 14, .58) 58%, rgba(8, 10, 14, 0) 100%);
        box-shadow: none;
    }

    .store-page--home .store-announcement + .store-navbar--home-hero {
        top: 40px;
    }

    .store-page--home .shein-home {
        padding-top: 0;
    }

    .store-page--home .shein-home-hero {
        margin-inline: calc(50% - 50vw);
    }

    .store-page--home .shein-home-hero .container {
        max-width: 100%;
        width: 100%;
        padding-top: .45rem;
        padding-inline: 0;
    }

    .store-page--home .shein-home-hero__slider,
    .store-page--home .shein-home-swiper,
    .store-page--home .shein-home-swiper .swiper-slide {
        width: 100vw;
    }

    .store-page--home .shein-hero-card {
        min-height: clamp(176px, 49vw, 220px);
        aspect-ratio: 16 / 8;
        border-radius: 0;
    }

    .store-page--home .shein-hero-card__image {
        border-radius: 0;
        object-position: left center;
    }

    .store-page--home .shein-slider-pagination {
        bottom: 12px !important;
    }

    .store-navbar {
        z-index: 2600;
        overflow: visible;
    }

    .store-navbar .container {
        padding-inline: 14px;
        overflow: visible;
    }

    .store-navbar .nav-inner,
    .store-navbar .nav-actions {
        overflow: visible;
    }

    .store-navbar .nav-inner {
        min-height: 62px;
        gap: .45rem;
    }

    .store-navbar .brand,
    .store-navbar .search-wrap,
    .store-navbar__quick-links,
    .store-navbar__mobile-menu-btn {
        display: none !important;
    }

    .nav-actions {
        width: 100%;
        gap: .45rem;
        margin-inline-start: 0;
    }

    .store-navbar__mobile-search {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

    .store-navbar__mobile-search form {
        position: relative;
    }

    .store-navbar__mobile-search input {
        width: 100%;
        height: 42px;
        border: 1px solid #d1d5db;
        border-radius: 15px;
        background: #fff;
        color: #111827;
        padding-inline: 14px 46px;
        font-size: .92rem;
        outline: none;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    }

    .store-navbar__mobile-search input::placeholder {
        color: #6b7280;
    }

    .store-navbar__mobile-search-btn {
        position: absolute;
        top: 4px;
        inset-inline-end: 4px;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 11px;
        background: #111827;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .store-navbar__mobile-toolbar-btn,
    .store-navbar__mobile-menu-link {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #111827;
        text-decoration: none;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
    }

    .store-navbar__mobile-toolbar-btn:hover,
    .store-navbar__mobile-toolbar-btn:focus,
    .store-navbar__mobile-toolbar-btn:focus-visible,
    .store-navbar__mobile-toolbar-btn:active,
    .store-navbar__mobile-toolbar-btn.show,
    .store-navbar__mobile-menu-link:hover,
    .store-navbar__mobile-menu-link:focus,
    .store-navbar__mobile-menu-link:focus-visible,
    .store-navbar__mobile-menu-link:active {
        background: #fff;
        color: #111827;
        border-color: #d1d5db;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
        outline: none;
    }

    .store-navbar__mobile-toolbar-btn i,
    .store-navbar__mobile-menu-link i {
        font-size: 1rem;
        color: inherit;
    }

    .store-navbar__mobile-logo-btn {
        overflow: hidden;
        padding: 3px;
    }

    .store-navbar__mobile-logo-btn img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 9px;
        background: #fff;
    }

    .store-navbar__mobile-logo-fallback {
        width: 100%;
        height: 100%;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--store-primary, #111827);
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        line-height: 1;
    }

    .store-navbar__mobile-logo-btn {
        order: -2;
    }

    .store-navbar__mobile-lang {
        order: -1;
        position: relative;
        z-index: 2300;
    }

    .store-navbar__mobile-lang .dropdown-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: auto !important;
        transform: none !important;
        min-width: 132px;
        width: max-content;
        max-width: calc(100vw - 28px);
        z-index: 2400 !important;
        margin: 0 !important;
        border-radius: 12px;
        box-shadow: 0 16px 34px rgba(15, 23, 42, .28);
    }

    [dir="rtl"] .store-navbar__mobile-lang .dropdown-menu {
        right: 0 !important;
        left: auto !important;
    }

    [dir="ltr"] .store-navbar__mobile-lang .dropdown-menu {
        right: auto !important;
        left: 0 !important;
    }

    .store-navbar__mobile-lang .dropdown-menu.show {
        display: block;
    }

    .store-navbar__mobile-lang .dropdown-item {
        padding: .72rem .95rem;
        text-align: start;
    }

    .store-navbar--home-hero .store-navbar__mobile-search input {
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.96);
        box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    }

    .store-navbar--home-hero .store-navbar__mobile-toolbar-btn,
    .store-navbar--home-hero .store-navbar__mobile-menu-link {
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.08);
        color: #fff;
        box-shadow: none;
        backdrop-filter: blur(10px);
    }

    .store-navbar--home-hero .store-navbar__mobile-toolbar-btn:hover,
    .store-navbar--home-hero .store-navbar__mobile-toolbar-btn:focus,
    .store-navbar--home-hero .store-navbar__mobile-toolbar-btn:focus-visible,
    .store-navbar--home-hero .store-navbar__mobile-toolbar-btn:active,
    .store-navbar--home-hero .store-navbar__mobile-toolbar-btn.show,
    .store-navbar--home-hero .store-navbar__mobile-menu-link:hover,
    .store-navbar--home-hero .store-navbar__mobile-menu-link:focus,
    .store-navbar--home-hero .store-navbar__mobile-menu-link:focus-visible,
    .store-navbar--home-hero .store-navbar__mobile-menu-link:active {
        border-color: rgba(255,255,255,.18);
        background: rgba(255,255,255,.08);
        color: #fff;
        box-shadow: none;
        outline: none;
    }


    .store-navbar__mobile-favorite {
        position: relative;
    }

    .store-navbar__mobile-favorite .cart-badge,
    .store-navbar__mobile-search .cart-badge,
    .store-navbar__mobile-menu-link .cart-badge {
        top: -4px;
        inset-inline-end: -4px;
    }
}


@media (max-width: 991.98px) {
    .shein-category-page:has(.shein-page-shell--mobile-categories) {
        padding: 0 !important;
        margin: 0 !important;
        background: #fff;
    }

    .shein-page-shell--products.shein-page-shell--mobile-categories[data-mobile-catalog-shell] {
        padding-inline: 0 !important;
        padding-block: 0 !important;
        margin: 0 !important;
        width: 100%;
        max-width: 100%;
        background: #fff;
    }

    .shein-page-shell--products.shein-page-shell--mobile-categories[data-mobile-catalog-shell] > .mobile-category-page {
        width: 100%;
        margin: 0;
    }
}

.mobile-category-page {
    min-height: calc(100dvh - 62px);
    width: 100%;
    background: #fff;
    color: #111;
    font-family: Cairo, Arial, sans-serif;
    padding-bottom: 0;
    margin: 0;
}

.mobile-category-page__body {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: calc(100dvh - 62px);
    width: 100%;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
}

.mobile-category-page__rail {
    background: #f1f1f1;
    overflow-y: auto;
    padding: .75rem .45rem;
}

.mobile-category-page__rail button {
    width: 100%;
    min-height: 48px;
    padding: .45rem .65rem;
    border: 0;
    border-inline-start: 3px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: start;
    margin-bottom: .35rem;
    overflow-wrap: normal;
    word-break: normal;
}

.mobile-category-page__rail button.active {
    background: #fff;
    border-inline-start-color: var(--store-accent, #111);
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.mobile-category-page__content {
    padding: .7rem .75rem max(.75rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    background: #fff;
}

.mobile-category-page__content h3 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 900;
    color: #111827;
    line-height: 1.15;
}

.mobile-category-page__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 14px;
    align-content: start;
}

.mobile-category-page__tile {
    display: grid;
    justify-items: center;
    gap: 7px;
    color: #111;
    text-align: center;
    text-decoration: none;
}

.mobile-category-page__tile span {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: #eee;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mobile-category-page__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-category-page__all-icon {
    font-size: 26px;
}

.mobile-category-page__tile small {
    max-width: 78px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    color: #111827;
}

@media (max-width: 389.98px) {
    .mobile-category-page__body {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .mobile-category-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-category-page__tile span {
        width: 66px;
        height: 66px;
    }
} 

@media (min-width: 768px) and (max-width: 991.98px) {
    .mobile-category-page,
    .mobile-category-page__body {
        min-height: calc(100dvh - 62px);
        width: 100%;
    }

    .mobile-category-page__body {
        grid-template-columns: 124px minmax(0, 1fr);
    }

    .mobile-category-page__rail {
        padding: 1rem .55rem;
    }

    .mobile-category-page__rail button {
        min-height: 54px;
        padding: .55rem .7rem;
        font-size: 14px;
    }

    .mobile-category-page__content {
        padding: 1.15rem 1.35rem max(1rem, env(safe-area-inset-bottom));
    }

    .mobile-category-page__content h3 {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
    }

    .mobile-category-page__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px 18px;
    }

    .mobile-category-page__tile span {
        width: 84px;
        height: 84px;
    }

    .mobile-category-page__tile small {
        max-width: 96px;
        font-size: 12px;
    }
}
@media (max-width: 767.98px) {
    .breadcrumb-bar {
        overflow: hidden;
    }

    .breadcrumb-bar .container {
        padding-inline: 14px;
    }

    .breadcrumb-sm {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .breadcrumb-sm::-webkit-scrollbar {
        display: none;
    }

    .checkout-wrap {
        width: 100%;
        max-width: 100%;
        padding: 2rem 12px calc(5.75rem + env(safe-area-inset-bottom));
        overflow-x: hidden;
    }

    .checkout-wrap > form,
    .checkout-wrap .row {
        min-width: 0;
    }

    .checkout-card,
    .checkout-summary-card {
        border-radius: 12px;
    }

    .checkout-card {
        padding: 1.15rem;
        margin-bottom: 1rem;
    }

    .checkout-card-title {
        justify-content: flex-start;
        margin-bottom: 1rem;
        line-height: 1.35;
    }

    .payment-option-card {
        min-height: 112px;
        padding: .85rem .55rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .payment-option-card .po-icon {
        font-size: 1.55rem;
        margin-bottom: .35rem;
    }

    .payment-option-card .po-label,
    .payment-option-card .po-sub {
        max-width: 100%;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }

    .form-label-store {
        line-height: 1.35;
    }

    .form-control-store {
        min-width: 0;
        font-size: 16px;
    }

    .checkout-summary-card {
        position: static;
    }

    .checkout-summary-header,
    .checkout-summary-body {
        padding-inline: 1rem;
    }

    .checkout-item-row,
    .summary-row {
        gap: .75rem;
    }

    .checkout-item-name,
    .summary-row > span:first-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .promo-input-wrap {
        align-items: stretch;
    }

    .btn-promo-apply {
        border-radius: 10px;
        padding-inline: .8rem;
    }

    .store-navbar .container {
        padding-inline: 10px;
    }

    .nav-actions {
        gap: .35rem;
    }

    .store-navbar__mobile-search input {
        height: 40px;
        border-radius: 12px;
        padding-inline: 12px 42px;
        font-size: 16px;
    }

    .store-navbar__mobile-search-btn {
        width: 32px;
        height: 32px;
    }

    .store-navbar__mobile-toolbar-btn,
    .store-navbar__mobile-menu-link {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

@media (max-width: 389.98px) {
    .checkout-wrap {
        padding-inline: 10px;
    }

    .checkout-card {
        padding: 1rem;
    }

    .checkout-card .row.g-3 {
        --bs-gutter-x: .65rem;
        --bs-gutter-y: .85rem;
    }

    .checkout-card .col-6 {
        width: 100%;
    }

    .payment-option-card {
        min-height: 96px;
    }

    .promo-input-wrap {
        flex-direction: column;
    }

    .btn-promo-apply {
        width: 100%;
        min-height: 42px;
    }

    .store-navbar .container {
        padding-inline: 8px;
    }

    .store-navbar .nav-inner,
    .nav-actions {
        gap: .25rem;
    }

    .store-navbar__mobile-toolbar-btn,
    .store-navbar__mobile-menu-link {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    html,
    body,
    main,
    .store-page,
    .shein-category-page {
        max-width: 100%;
        overflow-x: hidden;
    }

    .shein-category-page:not(:has(.shein-page-shell--mobile-categories)) {
        padding-top: 1rem;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) {
        width: 100%;
        max-width: 100%;
        padding-inline: 16px;
        overflow: hidden;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) > div:not(.mobile-category-page),
    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) > div:not(.mobile-category-page) > .row,
    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) > div:not(.mobile-category-page) > .row > .col-lg-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) > div:not(.mobile-category-page) > .row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    .shein-breadcrumb {
        max-width: 100%;
        margin-bottom: 1rem;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .shein-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .shein-category-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: .85rem;
        margin-bottom: 1rem;
    }

    .shein-category-toolbar > div:first-child,
    .shein-category-toolbar__actions,
    .shein-category-search,
    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) [data-mobile-products-grid] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .shein-category-toolbar__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .65rem;
        margin-inline: 0;
    }

    .shein-filter-panel {
        display: none !important;
    }

    .shein-filter-drawer-btn {
        position: static;
        max-width: 100%;
        height: 40px;
        padding-inline: .85rem;
        white-space: nowrap;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) [data-mobile-products-grid] > .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
        display: flex;
        flex-wrap: wrap;
        width: auto;
        margin-inline: calc(var(--bs-gutter-x) * -.5);
        justify-content: flex-start;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) [data-mobile-products-grid] > .row > .col {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        min-width: 0;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .product-card {
        border-radius: 18px;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .product-card .pc-img-wrap {
        aspect-ratio: 1 / 1;
        background: #fff;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .product-card .pc-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        padding: 0;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .pc-body {
        padding: .72rem .72rem .85rem;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .pc-name a {
        display: -webkit-box;
        min-height: 2.55em;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.28;
    }
}



.shein-mobile-subcategory-card__image--all {
    color: #111827;
    font-size: 1.35rem;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .shein-mobile-controls {
        display: block !important;
        width: 100%;
        margin-bottom: 1rem;
    }

    .shein-mobile-controls__track {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: .65rem;
        width: 100%;
        overflow: visible !important;
        padding: .1rem 0 .65rem !important;
    }

    .shein-mobile-controls__sort,
    .shein-mobile-controls__chip {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding-inline: .75rem;
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) {
    .shein-category-toolbar .shein-filter-drawer-btn {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .shein-filter-drawer.offcanvas-bottom {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: min(82dvh, 760px) !important;
        max-height: calc(100dvh - 14px) !important;
        border: 0;
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
        box-shadow: 0 -22px 48px rgba(15, 23, 42, .18);
        z-index: 2050;
    }

    .offcanvas-backdrop.show {
        z-index: 2040;
        opacity: .48;
    }

    .shein-filter-drawer .offcanvas-header {
        position: sticky;
        top: 0;
        z-index: 4;
        min-height: 58px;
        padding: 1.05rem 1.45rem .85rem;
        background: #fff;
        border-bottom: 1px solid #eef0f4;
        cursor: ns-resize;
    }

    .shein-filter-drawer .offcanvas-header::before {
        content: "";
        position: absolute;
        top: .42rem;
        left: 50%;
        width: 54px;
        height: 5px;
        border-radius: 999px;
        background: #d5dae3;
        transform: translateX(-50%);
    }

    .shein-filter-drawer .offcanvas-title {
        margin-inline-start: auto;
        font-size: 1.05rem;
        font-weight: 900;
        color: #111827;
    }

    .shein-filter-drawer .btn-close {
        margin: 0;
        opacity: .72;
    }

    .shein-filter-drawer .offcanvas-body {
        height: calc(100% - 58px);
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #fff;
    }

    .shein-filter-drawer__copy {
        min-height: 100%;
        padding: 1rem 1.45rem calc(5.4rem + env(safe-area-inset-bottom, 0px));
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .shein-filter-drawer .shein-filter-group {
        padding-block: .95rem;
        border-top: 1px solid #eef0f4;
    }

    .shein-filter-drawer .shein-filter-group:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .shein-filter-drawer .shein-filter-group__head {
        font-size: 1rem;
        font-weight: 900;
    }

    .shein-filter-drawer .shein-filter-category-list,
    .shein-filter-drawer .shein-check-grid {
        gap: .72rem;
    }

    .shein-filter-drawer .shein-filter-option,
    .shein-filter-drawer .shein-check-option {
        font-size: .93rem;
        justify-content: flex-start;
    }

    .shein-filter-drawer .shein-apply-btn {
        position: sticky;
        bottom: max(.65rem, env(safe-area-inset-bottom, 0px));
        z-index: 5;
        width: 100%;
        min-height: 52px;
        margin-top: 1rem;
        margin-bottom: 0;
        border-radius: 18px;
        font-size: 1rem;
        font-weight: 900;
        box-shadow: 0 14px 28px rgba(17, 17, 17, .22);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .shein-filter-drawer.offcanvas-bottom {
        height: min(78dvh, calc(100dvh - 72px)) !important;
        max-height: calc(100dvh - 6px) !important;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .shein-filter-drawer.show {
        transform: none !important;
    }

    .shein-filter-drawer .offcanvas-header {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        min-height: 62px;
        padding: 1.05rem 1.35rem .8rem;
        border-bottom: 1px solid #eceff3;
        direction: ltr;
        touch-action: none;
    }

    .shein-filter-drawer .offcanvas-header::before {
        top: .5rem;
        width: 54px;
        height: 5px;
        background: #d7dce5;
    }

    .shein-filter-drawer .btn-close {
        grid-column: 1;
        justify-self: start;
        width: 28px;
        height: 28px;
        padding: 0;
        margin: 0;
        opacity: .68;
    }

    .shein-filter-drawer .offcanvas-title {
        grid-column: 3;
        justify-self: end;
        margin: 0;
        padding: 0;
        direction: rtl;
        font-size: 1.1rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .shein-filter-drawer .offcanvas-body {
        height: calc(100% - 62px);
    }

    .shein-filter-drawer__copy {
        padding-inline: 1.35rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .shein-breadcrumb,
    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .shein-section-heading--page,
    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .shein-category-toolbar__meta {
        display: none !important;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .shein-category-toolbar {
        margin-top: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .shein-category-search {
        display: none !important;
    }

    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .shein-category-toolbar,
    .shein-page-shell--products:not(.shein-page-shell--mobile-categories) .shein-category-toolbar__actions {
        display: block;
    }
}
@media (min-width: 768px) {
    .product-card .pc-img-wrap {
        background: #fff;
    }

    .product-card .pc-img-wrap img,
    .product-card .pc-img-wrap .pc-gallery-img,
    .product-card .pc-img-wrap.is-landscape img,
    .product-card .pc-img-wrap.is-closeup img {
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    .product-card:hover .pc-img-wrap img {
        transform: none !important;
    }
}