/* ============================================================
   STORE — Premium Design System v2.0
   Modern, vibrant, Myntra/Nykaa/Snitch inspired
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---------- Image Copy Protection & Anti-Download ---------- */
img, .product-image, .hero-banner, .hero-slide, .product-card img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ---------- Design Tokens ---------- */
:root {
    --primary:       #ff3f6c;
    --primary-dark:  #d4294f;
    --primary-light: #fff0f3;
    --accent:        #ff905a;
    --success:       #03a685;
    --info:          #1a73e8;

    --text-dark:  #1c1c1e;
    --text-body:  #3a3a3a;
    --text-muted: #8a8a8a;
    --text-light: #c2c2c2;

    --bg:         #f7f7f7;
    --surface:    #ffffff;
    --surface-alt:#f0f0f0;
    --border:     #e8e8e8;

    /* Legacy compatibility aliases */
    --white:         #ffffff;
    --border-color:  #e8e8e8;
    --text-color:    #1c1c1e;
    --primary-color: #ff3f6c;
    --surface-color: #f7f7f7;

    --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:  0 6px 24px rgba(0,0,0,0.10);
    --shadow-lg:  0 16px 48px rgba(0,0,0,0.14);

    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  32px;

    --ease:       cubic-bezier(.25,.46,.45,.94);
    --transition: 0.22s var(--ease);
    --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 64px;
}

@media (min-width: 992px) { body { padding-bottom: 0; } }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s;
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 68px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 12px;
    min-width: 0;
    overflow: visible;
}

/* Logo */
.logo a {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Nav */
.nav-bar {
    display: flex;
    gap: 4px;
    height: 100%;
    align-items: center;
    flex-shrink: 0;
}

.nav-bar a {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-body);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 3px solid transparent;
    transition: all var(--transition);
}

.nav-bar a:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Search */
/* ---- Expandable Search Bar ---- */
.search-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 8px;
    height: 40px;
    width: 40px;
    border-radius: 100px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s, box-shadow 0.25s, background 0.25s;
    cursor: pointer;
    overflow: visible;
    flex-shrink: 0;
}

.search-bar.expanded,
.search-bar:focus-within {
    width: 320px;
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(255, 63, 108, 0.15);
    cursor: default;
}

@media (max-width: 768px) {
    .search-bar.expanded,
    .search-bar:focus-within {
        width: 240px;
    }
}

.search-bar i.search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
    font-size: 15px;
    pointer-events: none;
    transition: color 0.25s;
    z-index: 2;
}

.search-bar.expanded i.search-icon,
.search-bar:focus-within i.search-icon {
    color: var(--primary);
}

.search-bar input {
    width: 100%;
    height: 100%;
    padding: 0 34px 0 38px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    border-radius: 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.search-bar.expanded input,
.search-bar:focus-within input {
    opacity: 1;
    pointer-events: auto;
}

.search-bar input::placeholder { color: var(--text-muted); font-size: 12px; }

/* Close/Clear Button */
.search-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: none;
    padding: 4px;
    transition: color 0.2s;
    z-index: 2;
}

.search-clear-btn:hover { color: var(--primary); }

.search-bar.expanded .search-clear-btn,
.search-bar:focus-within .search-clear-btn {
    display: block;
}

/* Autocomplete Dropdown Positioning */
.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: 90vw;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    display: none;
    max-height: 420px;
    overflow-y: auto;
}

.search-suggestions div {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    transition: background var(--transition);
}

.search-suggestions div:last-child { border-bottom: none; }
.search-suggestions div:hover { background: var(--primary-light); color: var(--primary); }

/* ============================================================
   SHOPIFY SLIDE-OVER CART DRAWER
   ============================================================ */
.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.cart-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -440px;
    width: 420px;
    max-width: 90vw;
    height: 100%;
    background: var(--surface);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-drawer.active {
    right: 0 !important;
}

.cart-drawer-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg);
}

.cart-drawer-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-drawer-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.cart-drawer-close:hover { color: var(--primary); }

.cart-drawer-shipping {
    padding: 12px 24px;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
}

.shipping-bar-text {
    font-size: 12px;
    color: #b45309;
    margin-bottom: 6px;
}

.shipping-bar-track {
    height: 6px;
    background: #fef3c7;
    border-radius: 100px;
    overflow: hidden;
}

.shipping-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 100px;
    transition: width 0.3s ease;
}

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.cart-drawer-empty {
    text-align: center;
    padding: 60px 20px;
}

.cart-drawer-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.cart-drawer-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 6px;
}

/* Quick Buy Hover Size Bar on Product Grid */
.product-card .quick-size-bar {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    padding: 10px 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    transition: bottom 0.3s ease;
    z-index: 10;
    border-top: 1px solid var(--border);
}

.product-card:hover .quick-size-bar {
    bottom: 0;
}

.quick-size-btn {
    min-width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quick-size-btn:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.header-actions a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-body);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    gap: 2px;
}

.header-actions a:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.header-actions i {
    font-size: 19px;
}

/* Mobile Hamburger */
.mobile-menu-btn {
    display: none;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    cursor: pointer;
    font-size: 16px;
    transition: all var(--transition);
    flex-shrink: 0;
}

.mobile-menu-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: var(--surface);
    z-index: 2000;
    transition: left 0.32s var(--ease);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    overflow-y: auto;
}

.mobile-drawer.active {
    display: flex !important;
    left: 0 !important;
}

.mobile-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1999;
    backdrop-filter: blur(2px);
}

.mobile-drawer-overlay.active { display: block; }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: rgba(255,255,255,0.97);
    border-top: 1px solid var(--border);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    backdrop-filter: blur(12px);
}

.mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover { color: var(--primary); }

.mobile-bottom-nav i { font-size: 20px; }

/* ============================================================
   HERO BANNER — Full bleed gradient carousel
   ============================================================ */
.hero-banner {
    width: 100%;
    min-height: 480px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-slide.active { opacity: 1; }

/* Dark overlay for text readability over images */
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.35) 60%,
        rgba(0,0,0,0.15) 100%
    );
    z-index: 1;
}

/* Fallback gradient backgrounds when image not loaded */
.hero-slide-1 { background-color: #1a1a2e; }
.hero-slide-2 { background-color: #0d5c4a; }
.hero-slide-3 { background-color: #c0392b; }

/* Arrow navigation buttons */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.22s ease;
}

.hero-arrow:hover {
    background: rgba(255,255,255,0.32);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-50%) scale(1.1);
}

.hero-arrow-left { left: 20px; }
.hero-arrow-right { right: 20px; }

@media (max-width: 768px) {
    .hero-arrow { width: 36px; height: 36px; font-size: 13px; }
    .hero-arrow-left { left: 10px; }
    .hero-arrow-right { right: 10px; }
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 40px 20px;
    max-width: 700px;
}

.hero-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
}

.hero-content h1 {
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 16px;
}

.hero-content h1 span {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content p {
    font-size: 17px;
    color: rgba(255,255,255,0.75);
    max-width: 500px;
    margin: 0 auto 30px;
    letter-spacing: 0.2px;
}

.hero-cta-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.3s;
}

.hero-dot.active {
    background: #fff;
    width: 24px;
    border-radius: 4px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
    font-family: var(--font);
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255,63,108,0.35);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
}

.btn-white {
    background: #fff;
    color: var(--text-dark);
    border-color: #fff;
}

.btn-white:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
}

.btn-ghost {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
    backdrop-filter: blur(4px);
}

.btn-ghost:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-1px);
}

/* ============================================================
   CATEGORY STRIP
   ============================================================ */
.category-strip {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-strip::-webkit-scrollbar { display: none; }

.category-strip-inner {
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.category-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    cursor: pointer;
    color: var(--text-body);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all var(--transition);
    flex-shrink: 0;
}

.category-pill:hover, .category-pill.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.category-pill .pill-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-muted);
    transition: all var(--transition);
    border: 1.5px solid var(--border);
}

.category-pill:hover .pill-icon,
.category-pill.active .pill-icon {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.08);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 50px 0 24px;
    gap: 16px;
}

.section-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    position: relative;
    padding-bottom: 10px;
    margin: 0;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 6px;
}

.section-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: gap var(--transition);
}

.section-link:hover { gap: 8px; }

/* ============================================================
   PRODUCT GRID & CARDS
   ============================================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    align-items: stretch;
}

.product-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.product-image {
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease, transform 0.55s var(--ease);
}

.product-image .hover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.4s ease;
    object-fit: cover;
}

.product-image:hover .hover-img { opacity: 1; }
.product-card:hover .product-image img { transform: scale(1.06); }

/* Wishlist btn */
.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.92);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-light);
    font-size: 15px;
    transition: all var(--transition);
    z-index: 3;
    box-shadow: var(--shadow-sm);
}

.wishlist-btn:hover, .wishlist-btn.active { color: var(--primary); transform: scale(1.15); }

/* Product badges */
.product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.badge {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-new { background: #1a73e8; color: #fff; }
.badge-sale { background: var(--success); color: #fff; }
.badge-hot { background: var(--accent); color: #fff; }

/* Product info */
.product-info { 
    padding: 14px 14px 4px; 
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.product-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    transition: color var(--transition);
}

.product-card:hover .product-title { color: var(--primary); }

.product-desc-short {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.product-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark);
}

.old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 12px;
    margin-left: 6px;
    font-weight: 400;
}

.discount-pct {
    font-size: 11px;
    font-weight: 800;
    color: var(--success);
    margin-left: 6px;
}

/* Add to cart button */
.product-card .add-to-cart {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: var(--primary);
    border: none;
    border-top: 1px solid var(--border);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.8px;
    cursor: pointer;
    display: none;
    transition: all var(--transition);
    font-family: var(--font);
    margin-top: 8px;
}

.product-card:hover .add-to-cart { display: block; }
.product-card .add-to-cart:hover { background: var(--primary); color: #fff; }

/* ============================================================
   BANNER CARDS (Category highlight)
   ============================================================ */
.banner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 50px;
}

.banner-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/5;
    cursor: pointer;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.banner-card:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }

.banner-card-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.6s var(--ease);
}

.banner-card:hover .banner-card-bg { transform: scale(1.05); }

.banner-card-1 .banner-card-bg { 
    background: linear-gradient(to top, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.3) 60%), 
                url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=800&q=80') center/cover no-repeat; 
}
.banner-card-2 .banner-card-bg { 
    background: linear-gradient(to top, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.3) 60%), 
                url('https://images.unsplash.com/photo-1566174053879-31528523f8ae?auto=format&fit=crop&w=800&q=80') center/cover no-repeat; 
}
.banner-card-3 .banner-card-bg { 
    background: linear-gradient(to top, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.3) 60%), 
                url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=800&q=80') center/cover no-repeat; 
}

.banner-card-content {
    position: relative;
    z-index: 2;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 55%);
}

.banner-card-content .banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    margin-bottom: 12px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.3);
}

.banner-card-content h3 {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 6px;
}

.banner-card-content p {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 14px;
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
    margin: 40px 0;
}

.trust-strip-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
    flex-shrink: 0;
}

.trust-text strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
}

.trust-text span {
    font-size: 12px;
    color: var(--text-muted);
}

/* ============================================================
   FORMS & AUTH
   ============================================================ */
.form-container {
    background: var(--surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text-dark);
    transition: border-color var(--transition), box-shadow var(--transition);
    background: var(--surface);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,63,108,0.1);
}

textarea.form-control { resize: vertical; min-height: 100px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background: #111118;
    color: #aaa;
    padding: 64px 0 32px;
    border-top: none;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand .logo-text {
    font-size: 26px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 14px;
}

.footer-brand p {
    font-size: 13px;
    line-height: 1.8;
    color: #888;
    max-width: 260px;
    margin-bottom: 24px;
}

.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 14px;
    transition: all var(--transition);
    border: 1px solid rgba(255,255,255,0.1);
}

.footer-socials a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.footer-col h4 {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    margin-bottom: 20px;
}

.footer-col ul { list-style: none; }

.footer-col ul li { margin-bottom: 11px; }

.footer-col ul li a {
    font-size: 13px;
    color: #888;
    transition: color var(--transition);
}

.footer-col ul li a:hover { color: var(--primary); }

.footer-newsletter-input {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.footer-newsletter-input input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 13px;
    font-family: var(--font);
    outline: none;
    transition: border-color var(--transition);
}

.footer-newsletter-input input::placeholder { color: #666; }
.footer-newsletter-input input:focus { border-color: var(--primary); }

.footer-newsletter-input button {
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    transition: background var(--transition);
}

.footer-newsletter-input button:hover { background: var(--primary-dark); }

.footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #555;
}

.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { color: #555; transition: color var(--transition); }
.footer-bottom-links a:hover { color: var(--primary); }

/* ============================================================
   RESPONSIVE MEDIA QUERIES
   ============================================================ */
@media (max-width: 1100px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
    .banner-grid { grid-template-columns: repeat(2, 1fr); }
    .banner-grid .banner-card:last-child { grid-column: 1 / -1; aspect-ratio: 16/6; }
    .banner-card-content h3 { font-size: 18px; }
}

@media (max-width: 991px) {
    .nav-bar { display: none !important; }
    .mobile-menu-btn { display: flex; }
    .mobile-bottom-nav { display: flex; }
    .main-header { height: 60px; padding: 0 16px; gap: 10px; }
    .search-bar { margin: 0 8px; }
    .header-actions span { display: none; }
    .header-actions a { padding: 6px 8px; }
    .section-header { margin: 36px 0 20px; }
}

@media (max-width: 768px) {
    .hero-banner { min-height: 340px; }
    .hero-content h1 { letter-spacing: -1px; }
    .hero-content p { font-size: 14px; }
    
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .product-image { aspect-ratio: 3/4; }
    .product-card .add-to-cart { display: block; }
    
    .banner-grid { grid-template-columns: 1fr; }
    .banner-card { aspect-ratio: 16/7; }
    .banner-grid .banner-card:last-child { grid-column: unset; aspect-ratio: 16/7; }
    
    .trust-strip-inner { gap: 16px; }
    .trust-item { flex-direction: column; text-align: center; }
    
    .footer-top { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    
    .form-container { padding: 24px 20px; }
    .section-title { font-size: 20px; }
}

@media (max-width: 480px) {
    .main-header { height: 56px; }
    .search-bar { max-width: none; }
    .logo a { font-size: 20px; }
    .container { padding: 0 16px; }
    .hero-content h1 { letter-spacing: -0.5px; }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-muted { color: var(--text-muted); }
.mt-auto { margin-top: auto; }
.w-full { width: 100%; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; }
th { background: var(--bg); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); }
td { font-size: 14px; }
tr:last-child td { border-bottom: none; }

/* Toast slide-in */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* Skeleton shimmer */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-sm);
}

/* ============================================================
   SHOPIFY DAWN & PRESTIGE UI POLISH
   ============================================================ */
.product-card .quick-add-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 10px 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
    transform: translateY(100%);
    transition: transform 0.28s var(--ease);
    z-index: 5;
    border-top: 1px solid var(--border);
}
.product-card:hover .quick-add-overlay {
    transform: translateY(0);
}
.quick-size-pill {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}
.quick-size-pill:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    color: #f59e0b;
    margin-bottom: 4px;
}

.stock-progress-wrapper {
    margin: 8px 0;
}
.stock-progress-bar {
    height: 6px;
    background: var(--border);
    border-radius: 100px;
    overflow: hidden;
}
.stock-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 100px;
}

.pincode-box {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 20px;
}
.pincode-input-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.pincode-input-group input {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: none;
}

.mobile-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-top: 1.5px solid var(--border);
    padding: 12px 16px;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
    .mobile-sticky-cta {
        display: flex;
        gap: 12px;
        align-items: center;
    }
}

/* ============================================================
   SHOPIFY THEME STORE LAYOUT REDESIGN ENGINE
   ============================================================ */

/* ⚡ 1. SNITCH URBAN STREETWEAR LAYOUT (.theme-layout-snitch) */
body.theme-layout-snitch {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}
body.theme-layout-snitch .site-header {
    background: #111827 !important;
    border-bottom: 2px solid #374151 !important;
}
body.theme-layout-snitch .logo a {
    background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
}
body.theme-layout-snitch .product-card {
    background: #1e293b !important;
    border: 2px solid #334155 !important;
    border-radius: 0px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
body.theme-layout-snitch .product-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
body.theme-layout-snitch .product-price {
    color: #38bdf8 !important;
    font-weight: 900 !important;
}
body.theme-layout-snitch .btn-primary {
    background: #111827 !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
}
body.theme-layout-snitch .category-pill .pill-icon {
    border-radius: 0px !important;
    border: 2px solid #38bdf8 !important;
    background: #1e293b !important;
    color: #38bdf8 !important;
}

/* 💄 2. NYKAA GLAM BEAUTY LAYOUT (.theme-layout-nykaa) */
body.theme-layout-nykaa {
    background-color: #fff5f7 !important;
    color: #4a154b !important;
}
body.theme-layout-nykaa .site-header {
    background: rgba(255, 240, 243, 0.95) !important;
    border-bottom: 1.5px solid #fbcfe8 !important;
}
body.theme-layout-nykaa .logo a {
    background: linear-gradient(135deg, #e91e63 0%, #ff6090 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-nykaa .product-card {
    background: #ffffff !important;
    border: 1.5px solid #fbcfe8 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(233, 30, 99, 0.08) !important;
}
body.theme-layout-nykaa .hero-banner {
    border-radius: 24px !important;
    overflow: hidden !important;
}
body.theme-layout-nykaa .btn-primary {
    background: linear-gradient(135deg, #e91e63 0%, #ff6090 100%) !important;
    border: none !important;
    border-radius: 100px !important;
}

/* 🌿 3. ORGANIC ECO WELLNESS LAYOUT (.theme-layout-eco) */
body.theme-layout-eco {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}
body.theme-layout-eco .site-header {
    background: #f1f5f9 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}
body.theme-layout-eco .logo a {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-eco .product-card {
    background: #ffffff !important;
    border: 1.5px solid #a7f3d0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(4, 120, 87, 0.06) !important;
}
body.theme-layout-eco .btn-primary {
    background: #047857 !important;
    border-color: #047857 !important;
    border-radius: 8px !important;
}

/* 💜 4. ROYAL PRESTIGE COUTURE LAYOUT (.theme-layout-prestige) */
body.theme-layout-prestige {
    background-color: #faf5ff !important;
    color: #3b0764 !important;
}
body.theme-layout-prestige .site-header {
    background: #4c1d95 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #d97706 !important;
}
body.theme-layout-prestige .site-header a { color: #ffffff !important; }
body.theme-layout-prestige .logo a {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-prestige .product-card {
    background: #ffffff !important;
    border: 1.5px solid #fde68a !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.1) !important;
}
body.theme-layout-prestige .btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%) !important;
    border: 1px solid #d97706 !important;
    border-radius: 12px !important;
}

/* ============================================================
   PREMIUM THEME STORE — 15 NEW STOREFRONT LAYOUTS
   Total: 20 themes (5 existing + 15 new)
   ============================================================ */

/* ✨ 6. MIDNIGHT LUXE (.theme-layout-midnight) */
body.theme-layout-midnight {
    background-color: #0a0a0a !important;
    color: #e5e5e5 !important;
}
body.theme-layout-midnight .site-header {
    background: #111111 !important;
    border-bottom: 2px solid #d4a574 !important;
}
body.theme-layout-midnight .site-header a { color: #e5e5e5 !important; }
body.theme-layout-midnight .logo a {
    background: linear-gradient(135deg, #d4a574 0%, #f5deb3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-midnight .product-card {
    background: #1a1a1a !important;
    border: 1.5px solid #2a2a2a !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
}
body.theme-layout-midnight .product-title { color: #f5f5f5 !important; font-weight: 700 !important; }
body.theme-layout-midnight .product-price { color: #d4a574 !important; font-weight: 900 !important; }
body.theme-layout-midnight .product-brand { color: #a3a3a3 !important; }
body.theme-layout-midnight .product-meta { color: #a3a3a3 !important; }
body.theme-layout-midnight .btn-primary {
    background: linear-gradient(135deg, #d4a574 0%, #b8860b 100%) !important;
    border: none !important; border-radius: 8px !important; color: #0a0a0a !important;
}
body.theme-layout-midnight .category-pill .pill-icon {
    border-radius: 8px !important; border: 2px solid #d4a574 !important;
    background: #1a1a1a !important; color: #d4a574 !important;
}
body.theme-layout-midnight .category-pill span { color: #d4d4d4 !important; }
body.theme-layout-midnight .hero-banner { border-radius: 0px !important; overflow: hidden !important; }
body.theme-layout-midnight footer { background: #0a0a0a !important; color: #a3a3a3 !important; }
body.theme-layout-midnight footer h4 { color: #d4a574 !important; }
body.theme-layout-midnight footer a { color: #a3a3a3 !important; }
body.theme-layout-midnight .flash-sale-section { background: #111111 !important; }
body.theme-layout-midnight .flash-sale-section h2 { color: #d4a574 !important; }
body.theme-layout-midnight .section-title { color: #f5f5f5 !important; }
body.theme-layout-midnight .section-subtitle { color: #a3a3a3 !important; }
body.theme-layout-midnight .product-card .add-to-cart { color: #d4a574 !important; }
body.theme-layout-midnight .product-card:hover .add-to-cart { background: #d4a574 !important; color: #0a0a0a !important; }

/* 🪔 7. DIWALI FESTIVE (.theme-layout-festive) */
body.theme-layout-festive {
    background-color: #fffbeb !important;
    color: #78350f !important;
}
body.theme-layout-festive .site-header {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-bottom: 3px solid #f59e0b !important;
    color: #ffffff !important;
}
body.theme-layout-festive .site-header a { color: #ffffff !important; }
body.theme-layout-festive .logo a {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900 !important;
}
body.theme-layout-festive .product-card {
    background: #ffffff !important;
    border: 1.5px solid #fde68a !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.1) !important;
}
body.theme-layout-festive .product-title { color: #78350f !important; font-weight: 800 !important; }
body.theme-layout-festive .product-price { color: #dc2626 !important; font-weight: 900 !important; }
body.theme-layout-festive .btn-primary {
    background: #dc2626 !important; border: 2px solid #f59e0b !important;
    border-radius: 10px !important; color: #ffffff !important;
}
body.theme-layout-festive .category-pill .pill-icon {
    border-radius: 12px !important; border: 2px solid #fbbf24 !important;
    background: #fffbeb !important; color: #b45309 !important;
}
body.theme-layout-festive .hero-banner { border-radius: 16px !important; overflow: hidden !important; }
body.theme-layout-festive .flash-sale-section { background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%) !important; }
body.theme-layout-festive .product-card .add-to-cart { color: #dc2626 !important; }
body.theme-layout-festive .product-card:hover .add-to-cart { background: #dc2626 !important; color: #fff !important; }

/* ❄️ 8. WINTER SNOW (.theme-layout-snow) */
body.theme-layout-snow {
    background-color: #f0f9ff !important;
    color: #1e3a5f !important;
}
body.theme-layout-snow .site-header {
    background: #ffffff !important;
    border-bottom: 2px solid #bae6fd !important;
}
body.theme-layout-snow .logo a {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-snow .product-card {
    background: #ffffff !important;
    border: 1.5px solid #e0f2fe !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.08) !important;
}
body.theme-layout-snow .product-title { color: #0c4a6e !important; font-weight: 700 !important; }
body.theme-layout-snow .product-price { color: #0ea5e9 !important; font-weight: 900 !important; }
body.theme-layout-snow .btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    border: none !important; border-radius: 16px !important; color: #ffffff !important;
}
body.theme-layout-snow .category-pill .pill-icon {
    border-radius: 16px !important; border: 2px solid #bae6fd !important;
    background: #f0f9ff !important; color: #0ea5e9 !important;
}
body.theme-layout-snow .hero-banner { border-radius: 20px !important; overflow: hidden !important; }
body.theme-layout-snow .product-card .add-to-cart { color: #0ea5e9 !important; }
body.theme-layout-snow .product-card:hover .add-to-cart { background: #0ea5e9 !important; color: #fff !important; }

/* ☀️ 9. SUMMER BREEZE (.theme-layout-summer) */
body.theme-layout-summer {
    background-color: #fffbeb !important;
    color: #92400e !important;
}
body.theme-layout-summer .site-header {
    background: #ffffff !important;
    border-bottom: 2px solid #fdba74 !important;
}
body.theme-layout-summer .logo a {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-summer .product-card {
    background: #ffffff !important;
    border: 1.5px solid #fed7aa !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.08) !important;
}
body.theme-layout-summer .product-title { color: #9a3412 !important; font-weight: 700 !important; }
body.theme-layout-summer .product-price { color: #f97316 !important; font-weight: 900 !important; }
body.theme-layout-summer .btn-primary {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important;
    border: none !important; border-radius: 100px !important; color: #ffffff !important;
}
body.theme-layout-summer .category-pill .pill-icon {
    border-radius: 14px !important; border: 2px solid #fdba74 !important;
    background: #fffbeb !important; color: #ea580c !important;
}
body.theme-layout-summer .hero-banner { border-radius: 16px !important; overflow: hidden !important; }
body.theme-layout-summer .product-card .add-to-cart { color: #f97316 !important; }
body.theme-layout-summer .product-card:hover .add-to-cart { background: #f97316 !important; color: #fff !important; }

/* 🌧️ 10. MONSOON RAIN (.theme-layout-monsoon) */
body.theme-layout-monsoon {
    background-color: #f0fdfa !important;
    color: #134e4a !important;
}
body.theme-layout-monsoon .site-header {
    background: #0f766e !important;
    border-bottom: 2px solid #2dd4bf !important;
    color: #ffffff !important;
}
body.theme-layout-monsoon .site-header a { color: #ffffff !important; }
body.theme-layout-monsoon .logo a {
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-monsoon .product-card {
    background: #ffffff !important;
    border: 1.5px solid #99f6e4 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.08) !important;
}
body.theme-layout-monsoon .product-title { color: #134e4a !important; font-weight: 700 !important; }
body.theme-layout-monsoon .product-price { color: #0d9488 !important; font-weight: 900 !important; }
body.theme-layout-monsoon .btn-primary {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    border: none !important; border-radius: 8px !important; color: #ffffff !important;
}
body.theme-layout-monsoon .category-pill .pill-icon {
    border-radius: 10px !important; border: 2px solid #99f6e4 !important;
    background: #f0fdfa !important; color: #0f766e !important;
}
body.theme-layout-monsoon .hero-banner { border-radius: 12px !important; overflow: hidden !important; }
body.theme-layout-monsoon .product-card .add-to-cart { color: #0d9488 !important; }
body.theme-layout-monsoon .product-card:hover .add-to-cart { background: #0d9488 !important; color: #fff !important; }

/* 🌹 11. ROSE GOLD ELITE (.theme-layout-rosegold) */
body.theme-layout-rosegold {
    background-color: #fdf2f8 !important;
    color: #831843 !important;
}
body.theme-layout-rosegold .site-header {
    background: #ffffff !important;
    border-bottom: 2px solid #f9a8d4 !important;
}
body.theme-layout-rosegold .logo a {
    background: linear-gradient(135deg, #be185d 0%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-rosegold .product-card {
    background: #ffffff !important;
    border: 1.5px solid #fbcfe8 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(190, 24, 93, 0.07) !important;
}
body.theme-layout-rosegold .product-title { color: #9d174d !important; font-weight: 700 !important; }
body.theme-layout-rosegold .product-price { color: #be185d !important; font-weight: 900 !important; }
body.theme-layout-rosegold .btn-primary {
    background: linear-gradient(135deg, #be185d 0%, #ec4899 100%) !important;
    border: none !important; border-radius: 100px !important; color: #ffffff !important;
}
body.theme-layout-rosegold .category-pill .pill-icon {
    border-radius: 50% !important; border: 2px solid #f9a8d4 !important;
    background: #fdf2f8 !important; color: #be185d !important;
}
body.theme-layout-rosegold .hero-banner { border-radius: 20px !important; overflow: hidden !important; }
body.theme-layout-rosegold .product-card .add-to-cart { color: #be185d !important; }
body.theme-layout-rosegold .product-card:hover .add-to-cart { background: #be185d !important; color: #fff !important; }

/* ◾ 12. NOIR COUTURE (.theme-layout-noir) */
body.theme-layout-noir {
    background-color: #fafafa !important;
    color: #171717 !important;
}
body.theme-layout-noir .site-header {
    background: #000000 !important;
    border-bottom: none !important;
    color: #ffffff !important;
}
body.theme-layout-noir .site-header a { color: #ffffff !important; }
body.theme-layout-noir .logo a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
}
body.theme-layout-noir .product-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
body.theme-layout-noir .product-title { color: #171717 !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
body.theme-layout-noir .product-price { color: #171717 !important; font-weight: 900 !important; }
body.theme-layout-noir .btn-primary {
    background: #171717 !important; border: none !important;
    border-radius: 0px !important; color: #ffffff !important;
    letter-spacing: 2px !important; text-transform: uppercase !important;
}
body.theme-layout-noir .category-pill .pill-icon {
    border-radius: 0px !important; border: 2px solid #171717 !important;
    background: #ffffff !important; color: #171717 !important;
}
body.theme-layout-noir .hero-banner { border-radius: 0px !important; overflow: hidden !important; }
body.theme-layout-noir .product-card .add-to-cart { color: #171717 !important; letter-spacing: 1px !important; }
body.theme-layout-noir .product-card:hover .add-to-cart { background: #171717 !important; color: #fff !important; }

/* 🌊 13. OCEAN DIVE (.theme-layout-ocean) */
body.theme-layout-ocean {
    background-color: #eff6ff !important;
    color: #1e3a8a !important;
}
body.theme-layout-ocean .site-header {
    background: #1e3a8a !important;
    border-bottom: 2px solid #3b82f6 !important;
    color: #ffffff !important;
}
body.theme-layout-ocean .site-header a { color: #ffffff !important; }
body.theme-layout-ocean .logo a {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-ocean .product-card {
    background: #ffffff !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(29, 78, 216, 0.07) !important;
}
body.theme-layout-ocean .product-title { color: #1e3a8a !important; font-weight: 700 !important; }
body.theme-layout-ocean .product-price { color: #1d4ed8 !important; font-weight: 900 !important; }
body.theme-layout-ocean .btn-primary {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    border: none !important; border-radius: 10px !important; color: #ffffff !important;
}
body.theme-layout-ocean .category-pill .pill-icon {
    border-radius: 12px !important; border: 2px solid #93c5fd !important;
    background: #eff6ff !important; color: #1d4ed8 !important;
}
body.theme-layout-ocean .hero-banner { border-radius: 14px !important; overflow: hidden !important; }
body.theme-layout-ocean .product-card .add-to-cart { color: #1d4ed8 !important; }
body.theme-layout-ocean .product-card:hover .add-to-cart { background: #1d4ed8 !important; color: #fff !important; }

/* 🌸 14. SAKURA BLOSSOM (.theme-layout-sakura) */
body.theme-layout-sakura {
    background-color: #fdf4ff !important;
    color: #701a75 !important;
}
body.theme-layout-sakura .site-header {
    background: #fdf2f8 !important;
    border-bottom: 2px solid #f0abfc !important;
}
body.theme-layout-sakura .logo a {
    background: linear-gradient(135deg, #f472b6 0%, #e879f9 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-sakura .product-card {
    background: #ffffff !important;
    border: 1.5px solid #f5d0fe !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.07) !important;
}
body.theme-layout-sakura .product-title { color: #86198f !important; font-weight: 700 !important; }
body.theme-layout-sakura .product-price { color: #ec4899 !important; font-weight: 900 !important; }
body.theme-layout-sakura .btn-primary {
    background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%) !important;
    border: none !important; border-radius: 20px !important; color: #ffffff !important;
}
body.theme-layout-sakura .category-pill .pill-icon {
    border-radius: 50% !important; border: 2px solid #f0abfc !important;
    background: #fdf4ff !important; color: #d946ef !important;
}
body.theme-layout-sakura .hero-banner { border-radius: 24px !important; overflow: hidden !important; }
body.theme-layout-sakura .product-card .add-to-cart { color: #ec4899 !important; }
body.theme-layout-sakura .product-card:hover .add-to-cart { background: #ec4899 !important; color: #fff !important; }

/* 🏜️ 15. DESERT SAND (.theme-layout-desert) */
body.theme-layout-desert {
    background-color: #fefce8 !important;
    color: #713f12 !important;
}
body.theme-layout-desert .site-header {
    background: #fef3c7 !important;
    border-bottom: 2px solid #d97706 !important;
}
body.theme-layout-desert .logo a {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-desert .product-card {
    background: #fffbeb !important;
    border: 1.5px solid #fde68a !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(180, 83, 9, 0.08) !important;
}
body.theme-layout-desert .product-title { color: #78350f !important; font-weight: 700 !important; }
body.theme-layout-desert .product-price { color: #b45309 !important; font-weight: 900 !important; }
body.theme-layout-desert .btn-primary {
    background: #b45309 !important; border: none !important;
    border-radius: 6px !important; color: #ffffff !important;
}
body.theme-layout-desert .category-pill .pill-icon {
    border-radius: 8px !important; border: 2px solid #fbbf24 !important;
    background: #fefce8 !important; color: #b45309 !important;
}
body.theme-layout-desert .hero-banner { border-radius: 10px !important; overflow: hidden !important; }
body.theme-layout-desert .product-card .add-to-cart { color: #b45309 !important; }
body.theme-layout-desert .product-card:hover .add-to-cart { background: #b45309 !important; color: #fff !important; }

/* ⚡ 16. NEON ELECTRIC (.theme-layout-neon) */
body.theme-layout-neon {
    background-color: #09090b !important;
    color: #d4d4d8 !important;
}
body.theme-layout-neon .site-header {
    background: #18181b !important;
    border-bottom: 2px solid #22c55e !important;
    box-shadow: 0 0 20px rgba(34,197,94,0.15) !important;
}
body.theme-layout-neon .site-header a { color: #d4d4d8 !important; }
body.theme-layout-neon .logo a {
    background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 20px rgba(34,197,94,0.4) !important;
}
body.theme-layout-neon .product-card {
    background: #18181b !important;
    border: 1px solid #27272a !important;
    border-radius: 4px !important;
    box-shadow: 0 0 20px rgba(34,197,94,0.08) !important;
}
body.theme-layout-neon .product-title { color: #e4e4e7 !important; font-weight: 700 !important; text-transform: uppercase !important; }
body.theme-layout-neon .product-price { color: #4ade80 !important; font-weight: 900 !important; }
body.theme-layout-neon .product-brand { color: #71717a !important; }
body.theme-layout-neon .product-meta { color: #71717a !important; }
body.theme-layout-neon .btn-primary {
    background: #22c55e !important; border: none !important;
    border-radius: 4px !important; color: #09090b !important; font-weight: 900 !important;
    box-shadow: 0 0 16px rgba(34,197,94,0.3) !important;
}
body.theme-layout-neon .category-pill .pill-icon {
    border-radius: 4px !important; border: 1px solid #22c55e !important;
    background: #18181b !important; color: #22c55e !important;
}
body.theme-layout-neon .category-pill span { color: #a1a1aa !important; }
body.theme-layout-neon .hero-banner { border-radius: 0px !important; overflow: hidden !important; }
body.theme-layout-neon footer { background: #09090b !important; color: #71717a !important; }
body.theme-layout-neon footer h4 { color: #22c55e !important; }
body.theme-layout-neon footer a { color: #71717a !important; }
body.theme-layout-neon .flash-sale-section { background: #18181b !important; }
body.theme-layout-neon .flash-sale-section h2 { color: #4ade80 !important; }
body.theme-layout-neon .section-title { color: #e4e4e7 !important; }
body.theme-layout-neon .section-subtitle { color: #71717a !important; }
body.theme-layout-neon .product-card .add-to-cart { color: #22c55e !important; }
body.theme-layout-neon .product-card:hover .add-to-cart { background: #22c55e !important; color: #09090b !important; }

/* 👑 17. ROYAL HERITAGE (.theme-layout-royal) */
body.theme-layout-royal {
    background-color: #fef2f2 !important;
    color: #7f1d1d !important;
}
body.theme-layout-royal .site-header {
    background: #7f1d1d !important;
    border-bottom: 3px solid #b45309 !important;
    color: #fef2f2 !important;
}
body.theme-layout-royal .site-header a { color: #fef2f2 !important; }
body.theme-layout-royal .logo a {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900 !important;
}
body.theme-layout-royal .product-card {
    background: #ffffff !important;
    border: 1.5px solid #fecaca !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(153, 27, 27, 0.07) !important;
}
body.theme-layout-royal .product-title { color: #7f1d1d !important; font-weight: 800 !important; }
body.theme-layout-royal .product-price { color: #991b1b !important; font-weight: 900 !important; }
body.theme-layout-royal .btn-primary {
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
    border: 2px solid #d97706 !important; border-radius: 8px !important; color: #ffffff !important;
}
body.theme-layout-royal .category-pill .pill-icon {
    border-radius: 10px !important; border: 2px solid #fca5a5 !important;
    background: #fef2f2 !important; color: #991b1b !important;
}
body.theme-layout-royal .hero-banner { border-radius: 12px !important; overflow: hidden !important; }
body.theme-layout-royal .product-card .add-to-cart { color: #991b1b !important; }
body.theme-layout-royal .product-card:hover .add-to-cart { background: #991b1b !important; color: #fff !important; }

/* 💜 18. LAVENDER DREAMS (.theme-layout-lavender) */
body.theme-layout-lavender {
    background-color: #f5f3ff !important;
    color: #4c1d95 !important;
}
body.theme-layout-lavender .site-header {
    background: #ede9fe !important;
    border-bottom: 2px solid #c4b5fd !important;
}
body.theme-layout-lavender .logo a {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-lavender .product-card {
    background: #ffffff !important;
    border: 1.5px solid #ddd6fe !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.07) !important;
}
body.theme-layout-lavender .product-title { color: #5b21b6 !important; font-weight: 700 !important; }
body.theme-layout-lavender .product-price { color: #7c3aed !important; font-weight: 900 !important; }
body.theme-layout-lavender .btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
    border: none !important; border-radius: 14px !important; color: #ffffff !important;
}
body.theme-layout-lavender .category-pill .pill-icon {
    border-radius: 18px !important; border: 2px solid #c4b5fd !important;
    background: #f5f3ff !important; color: #7c3aed !important;
}
body.theme-layout-lavender .hero-banner { border-radius: 22px !important; overflow: hidden !important; }
body.theme-layout-lavender .product-card .add-to-cart { color: #7c3aed !important; }
body.theme-layout-lavender .product-card:hover .add-to-cart { background: #7c3aed !important; color: #fff !important; }

/* 🍂 19. AUTUMN HARVEST (.theme-layout-autumn) */
body.theme-layout-autumn {
    background-color: #fff7ed !important;
    color: #7c2d12 !important;
}
body.theme-layout-autumn .site-header {
    background: #ffffff !important;
    border-bottom: 2px solid #ea580c !important;
}
body.theme-layout-autumn .logo a {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.theme-layout-autumn .product-card {
    background: #ffffff !important;
    border: 1.5px solid #fed7aa !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(194, 65, 12, 0.07) !important;
}
body.theme-layout-autumn .product-title { color: #9a3412 !important; font-weight: 700 !important; }
body.theme-layout-autumn .product-price { color: #c2410c !important; font-weight: 900 !important; }
body.theme-layout-autumn .btn-primary {
    background: #c2410c !important; border: none !important;
    border-radius: 8px !important; color: #ffffff !important;
}
body.theme-layout-autumn .category-pill .pill-icon {
    border-radius: 10px !important; border: 2px solid #fdba74 !important;
    background: #fff7ed !important; color: #c2410c !important;
}
body.theme-layout-autumn .hero-banner { border-radius: 12px !important; overflow: hidden !important; }
body.theme-layout-autumn .product-card .add-to-cart { color: #c2410c !important; }
body.theme-layout-autumn .product-card:hover .add-to-cart { background: #c2410c !important; color: #fff !important; }

/* 🧊 20. ARCTIC FROST (.theme-layout-arctic) */
body.theme-layout-arctic {
    background-color: #f8fafc !important;
    color: #334155 !important;
}
body.theme-layout-arctic .site-header {
    background: #f1f5f9 !important;
    border-bottom: 1px solid #cbd5e1 !important;
}
body.theme-layout-arctic .logo a {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: 2px !important;
}
body.theme-layout-arctic .product-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
body.theme-layout-arctic .product-title { color: #1e293b !important; font-weight: 600 !important; }
body.theme-layout-arctic .product-price { color: #475569 !important; font-weight: 800 !important; }
body.theme-layout-arctic .btn-primary {
    background: #475569 !important; border: none !important;
    border-radius: 6px !important; color: #ffffff !important;
}
body.theme-layout-arctic .category-pill .pill-icon {
    border-radius: 6px !important; border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important; color: #475569 !important;
}
body.theme-layout-arctic .hero-banner { border-radius: 8px !important; overflow: hidden !important; }
body.theme-layout-arctic .product-card .add-to-cart { color: #475569 !important; }
body.theme-layout-arctic .product-card:hover .add-to-cart { background: #475569 !important; color: #fff !important; }