/* Reset & Base Styles */
:root {
    /* Color Palette */
    --clr-base: #5a1028;
    --clr-base-light: #7d2c47;
    --clr-accent: #9a2949;
    --clr-accent-hover: #731a34;
    --clr-bg: #fffaf1;
    --clr-bg-alt: #f5eadc;
    --clr-text: #2f2927;
    --clr-text-light: #6f625c;
    --clr-border: #e4d4c6;
    
    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'DM Sans', sans-serif;
    
    /* Spacing Scale */
    --sp-1: 0.5rem;   /* 8px */
    --sp-2: 1rem;     /* 16px */
    --sp-3: 1.5rem;   /* 24px */
    --sp-4: 2rem;     /* 32px */
    --sp-5: 3rem;     /* 48px */
    --sp-6: 4rem;     /* 64px */
    
    /* Radii & Shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --shadow-sm: 0 2px 4px rgba(43,27,53,0.08);
    --shadow-md: 0 8px 22px rgba(43,27,53,0.14);
    
    /* Transitions */
    --transition: all 0.3s ease;
}

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

body {
    font-family: var(--font-body);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--clr-base);
    line-height: 1.2;
    margin-bottom: var(--sp-2);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
}

/* Layout Classes */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

.section-padding {
    padding: var(--sp-6) 0;
}

.bg-light { background-color: var(--clr-bg-alt); }
.bg-dark { 
    background-color: var(--clr-base); 
    color: #FFF;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3 {
    color: #FFF;
}
.text-center { text-align: center; }

@media (min-width: 768px) and (max-width: 1023px) {
    .container,
    .hero-section {
        padding-left: clamp(24px, 4vw, 32px);
        padding-right: clamp(24px, 4vw, 32px);
    }
}

@media (min-width: 1024px) {
    .container,
    .hero-section {
        padding-left: clamp(40px, 4vw, 60px);
        padding-right: clamp(40px, 4vw, 60px);
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    font-size: 0.875rem;
}

.btn-primary {
    background-color: var(--clr-accent);
    color: #FFF;
}
.btn-primary:hover {
    background-color: var(--clr-accent-hover);
    color: #FFF;
}

.btn-secondary {
    background-color: transparent;
    color: #FFF;
    border: 2px solid #FFF;
}
.btn-secondary:hover {
    background-color: #FFF;
    color: var(--clr-base);
}

.btn-outline {
    background-color: transparent;
    color: var(--clr-base);
    border: 2px solid var(--clr-base);
}
.btn-outline:hover {
    background-color: var(--clr-base);
    color: #FFF;
}

/* Navigation */
.navbar {
    background-color: #FFF;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

.brand-logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--clr-base);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.nav-links {
    display: flex;
    gap: var(--sp-3);
}

.nav-links a {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--clr-text);
}

.nav-links a:hover, .nav-links a.active {
    color: var(--clr-accent);
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.icon-link {
    position: relative;
    font-size: 1.25rem;
    color: var(--clr-base);
}
.icon-link:hover { color: var(--clr-accent); }

.badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--clr-accent);
    color: #FFF;
    font-size: 0.7rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--clr-base);
    cursor: pointer;
}

.mobile-menu {
    display: none;
    background-color: #FFF;
    border-top: 1px solid var(--clr-border);
    padding: var(--sp-2) 0;
}
.mobile-menu.active {
    display: flex;
    flex-direction: column;
}

.mobile-menu a {
    padding: var(--sp-2);
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid var(--clr-bg-alt);
}
.mobile-menu a:hover, .mobile-menu a.active {
    color: var(--clr-accent);
    background-color: var(--clr-bg-alt);
}

/* Footer */
.footer {
    background-color: var(--clr-base);
    color: #FFF;
    padding-top: var(--sp-6);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.footer-brand .brand-logo {
    color: #FFF;
    display: inline-block;
    margin-bottom: var(--sp-2);
}

.footer-brand p {
    color: #D9CBD7;
    font-size: 0.875rem;
    margin-bottom: var(--sp-3);
}

.social-icons {
    display: flex;
    gap: var(--sp-2);
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--clr-base-light);
    color: #FFF;
}
.social-icons a:hover {
    background-color: var(--clr-accent);
}

.footer-links h3, .footer-contact h3 {
    font-size: 1rem;
    margin-bottom: var(--sp-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links ul li {
    margin-bottom: var(--sp-1);
}

.footer-links a {
    color: #D9CBD7;
    font-size: 0.875rem;
}
.footer-links a:hover {
    color: var(--clr-accent);
}

.footer-contact p {
    color: #D9CBD7;
    font-size: 0.875rem;
    margin-bottom: var(--sp-1);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-1);
}

.footer-contact i {
    margin-top: 4px;
    color: var(--clr-accent);
}

.footer-bottom {
    border-top: 1px solid var(--clr-base-light);
    padding: var(--sp-3) var(--sp-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: #D9CBD7;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.footer-legal {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.footer-legal a:hover { color: var(--clr-accent); }

/* Shop page footer alignment */
.shop-footer .footer-grid {
    grid-template-columns: repeat(4, minmax(160px, max-content));
    justify-content: center;
    text-align: center;
}

.shop-footer .footer-brand p {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.shop-footer .social-icons,
.shop-footer .footer-legal {
    justify-content: center;
}

.shop-footer .footer-contact p {
    justify-content: center;
    text-align: center;
}

.shop-footer .footer-bottom {
    justify-content: center;
    text-align: center;
}

/* Additional CSS for Toast, Forms, Pages */

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: var(--clr-base);
    color: #FFF;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    transition: transform 0.3s ease;
    opacity: 0;
}
.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Shop Layout */
.shop-hero-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.shop-hero {
    background: linear-gradient(to right, rgba(90,16,40,0.88), rgba(90,16,40,0.38)), url('../images/party%20wear/Icy%20Blue%20Gown.jpg') center/cover no-repeat;
    height: clamp(15vh, 25vh, 250px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFF;
    border-radius: 0;
    margin-bottom: var(--sp-4);
    padding: 0;
    margin-top: var(--sp-4);
    box-shadow: var(--shadow-sm);
}
.shop-hero-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.shop-hero-content h1 {
    color: #FFF;
    font-size: clamp(1.75rem, 3vw, 3rem);
    margin-bottom: var(--sp-1);
    line-height: 1.1;
}
.shop-hero-content p {
    font-size: clamp(0.9rem, 1.2vw, 1.125rem);
    margin-bottom: var(--sp-3);
    color: #EDE3D5;
}
.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-3);
    padding: var(--sp-2);
    background: var(--clr-bg-alt);
    border-radius: var(--radius-sm);
}

/* Product Detail Page */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    align-items: start;
}
.product-detail-image img {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4/5;
    object-fit: cover;
    image-rendering: auto;
    border-radius: var(--radius-sm);
    margin: 0 auto;
    display: block;
}
.product-detail-info {
    padding: var(--sp-2) 0;
}
.product-detail-info .breadcrumb {
    margin-bottom: var(--sp-2);
}
.detail-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: var(--sp-1);
}
.detail-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-accent);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: 12px;
}
.detail-price.with-discount .original-price {
    font-size: 1rem;
    color: var(--clr-text-light);
    text-decoration: line-through;
}
.detail-description {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--clr-text-light);
    margin-bottom: var(--sp-4);
}
.detail-actions {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    --action-btn-size: 50px;
}
.add-to-cart-btn-large {
    flex: 0 1 220px;
    width: min(100%, 220px);
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
}
.detail-features {
    border-top: 1px solid var(--clr-border);
    padding-top: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--clr-text-light);
}

/* Cart & Wishlist Pages */
.cart-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-4);
}
.cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.cart-item {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    align-items: center;
}
.cart-item-img {
    width: 100px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
.cart-item-details {
    flex-grow: 1;
}
.cart-item-title {
    font-weight: 600;
    margin-bottom: 4px;
}
.cart-item-price {
    font-weight: 700;
    color: var(--clr-base);
}
.cart-item-meta {
    font-size: 0.875rem;
    color: var(--clr-text-light);
    margin-top: 4px;
}
.cart-item-actions {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
}
.cart-item-total {
    font-weight: 700;
    margin-top: auto;
}
.cart-item-original-price {
    color: var(--clr-text-light);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: line-through;
}
.qty-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    width: fit-content;
    margin-top: 8px;
}
.qty-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--clr-text-light);
    min-width: 24px;
    min-height: 24px;
}
.remove-btn {
    color: #9B3A58;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 8px;
}
.cart-summary {
    background: var(--clr-bg-alt);
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    height: fit-content;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
    font-size: 0.875rem;
}
.summary-row.total {
    font-size: 1.25rem;
    font-weight: 700;
    border-top: 1px solid var(--clr-border);
    padding-top: var(--sp-2);
    margin-top: var(--sp-2);
}
.empty-state {
    text-align: center;
    padding: var(--sp-5) 0;
    color: var(--clr-text-light);
}

/* Contact Form */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
}
.form-group {
    margin-bottom: var(--sp-3);
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.875rem;
}
.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    outline: none;
    font-family: inherit;
    font-size: 1rem;
}
.form-control:focus {
    border-color: var(--clr-accent);
}
.contact-info-box {
    background: var(--clr-base);
    color: #FFF;
    padding: var(--sp-4);
    border-radius: var(--radius-sm);
}

/* FAQ Accordion */
.accordion-item {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-2);
    overflow: hidden;
}
.accordion-header {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: #FFF;
    border: none;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-heading);
}
.accordion-content {
    padding: 0 var(--sp-3);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: var(--clr-bg-alt);
}
.accordion-item.active .accordion-content {
    padding: var(--sp-2) var(--sp-3);
    max-height: 500px;
}
.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}
.accordion-header i {
    transition: transform 0.3s ease;
}

/* About Page */
.about-story-section {
    max-width: 1200px;
    padding-left: clamp(40px, 5vw, 60px);
    padding-right: clamp(40px, 5vw, 60px);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .about-story-section {
        padding-left: clamp(24px, 4vw, 32px);
        padding-right: clamp(24px, 4vw, 32px);
    }
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: center;
}
.about-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    margin: 0 auto;
}

.about-page-header .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

@media (max-width: 768px) {
    .navbar { position: sticky; }
    .nav-container { height: 64px; padding: 0 16px; }
    .brand-logo { font-size: 1.05rem; letter-spacing: 1px; }
    .nav-links { display: none; }
    .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    .nav-actions { gap: 6px; margin-left: auto; }
    .nav-action { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
    .nav-action > i { display: inline-block; font-size: 1.15rem; }
    .nav-action-text { display: none; }
    .nav-action .badge { position: absolute; top: 3px; right: 1px; margin: 0; }
    .mobile-menu { padding: 8px 16px 16px; }
    .mobile-menu a { text-align: left; min-height: 44px; padding: 12px 8px; }
    .hero { min-height: 100vh; min-height: 100svh; height: 100vh; height: 100svh; padding: 1.5rem 1.25rem; gap: 1rem; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
    .hero-content { align-self: end; }
    .hero h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
    .hero p { margin-bottom: 1rem; font-size: .95rem; }
    .hero-showcase { width: min(82vw, 360px); align-self: start; justify-self: center; }
    .collage-img:hover { transform: none; box-shadow: 0 22px 48px rgba(90, 16, 40, 0.20), 0 6px 14px rgba(90, 16, 40, 0.10); }
    .shop-toolbar { align-items: flex-start; gap: 12px; flex-direction: column; }
    .shop-toolbar-controls { width: 100%; flex-direction: column; align-items: stretch; }
    .product-filter { width: 100%; }
    .product-filter button { flex: 1; }
    .sort-select { width: 100%; }
    .about-story-section {
        padding-left: clamp(16px, 5vw, 20px);
        padding-right: clamp(16px, 5vw, 20px);
    }

    .about-page-header .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cart-layout { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
}

/* Home Page - Hero */
.hero-section {
    width: 100%;
    padding: 0 clamp(16px, 4vw, 40px);
    padding-top: 0;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.hero {
    background: linear-gradient(135deg, var(--clr-bg) 0%, var(--clr-bg-alt) 100%);
    min-height: 500px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    align-items: center;
    gap: clamp(1.5rem, 3.5vw, 3.5rem);
    color: var(--clr-text);
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 6vw, 7rem);
    width: 100%;
    margin: 0;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(154, 41, 73, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -8%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(90, 16, 40, 0.10) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-content {
    max-width: 620px;
    margin: 0;
    padding: 0;
    /* Hug the showcase so the leftover column width lands on the hero's outer
       edge rather than as a wide empty gap in the middle of the layout. */
    justify-self: end;
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    margin-bottom: var(--sp-2);
    color: var(--clr-base);
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: var(--sp-4);
    color: var(--clr-text-light);
    max-width: 56ch;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-start;
    flex-wrap: wrap;
}

.hero-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--clr-accent);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 14px;
    background: rgba(154, 41, 73, 0.08);
    border: 1px solid rgba(154, 41, 73, 0.18);
    border-radius: 999px;
}

.hero .btn-primary {
    background: var(--clr-accent);
    padding: 0.95rem 1.75rem;
    letter-spacing: 1.5px;
    box-shadow: 0 10px 24px rgba(154, 41, 73, 0.22);
}

.hero .btn-primary:hover {
    background: var(--clr-accent-hover);
    box-shadow: 0 14px 30px rgba(154, 41, 73, 0.30);
    transform: translateY(-2px);
}

/* Hero showcase + mood-board collage */
.hero-showcase { width: min(100%, 520px); justify-self: start; position: relative; z-index: 1; }

.collage {
    position: relative;
    width: 100%;
    /* All image dimensions are percentages of this canvas, preserving the
       desktop overlap ratio from phones through wide screens. */
    aspect-ratio: 8 / 11;
    max-width: 520px;
    margin: 0 auto;
}

.collage-img {
    position: absolute;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.collage-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    display: block;
}

/* Primary: large rounded-rectangle base */
.collage-img--primary {
    left: 0;
    top: 8%;
    width: 72%;
    height: 78.5%;
    border-radius: 22px;
    z-index: 1;
    box-shadow: 0 22px 48px rgba(90, 16, 40, 0.20),
                0 6px 14px rgba(90, 16, 40, 0.10);
}

/* Secondary: smaller rounded-rectangle overlapping top-right corner */
.collage-img--secondary {
    right: 0;
    top: 0;
    width: 44%;
    height: 48%;
    border-radius: 18px;
    z-index: 2;
    transform: rotate(4deg);
    box-shadow: 0 18px 38px rgba(90, 16, 40, 0.22),
                0 5px 12px rgba(90, 16, 40, 0.10);
}

/* Tertiary: small circular image overlapping bottom-left corner */
.collage-img--tertiary {
    left: 6%;
    bottom: 0;
    width: 30%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    z-index: 3;
    border: 4px solid #fff;
    box-shadow: 0 16px 34px rgba(90, 16, 40, 0.25),
                0 4px 10px rgba(90, 16, 40, 0.10);
}

.collage-img--tertiary img {
    border-radius: 50%;
}

/* Hover effects: slight lift + subtle scale */
.collage-img:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 30px 60px rgba(90, 16, 40, 0.28),
                0 10px 22px rgba(90, 16, 40, 0.14);
    z-index: 5;
}

.collage-img--secondary:hover {
    transform: rotate(4deg) translateY(-8px) scale(1.04);
}

/* Decorative diagonal lines (purely visual) */
.collage-line {
    position: absolute;
    background: linear-gradient(90deg, var(--clr-accent) 0%, rgba(154, 41, 73, 0) 100%);
    border-radius: 2px;
    pointer-events: none;
    z-index: 0;
}

.collage-line--1 {
    width: 48%;
    height: 2px;
    top: 40%;
    right: -8%;
    transform: rotate(-22deg);
    opacity: 0.42;
}

.collage-line--2 {
    width: 36%;
    height: 1.5px;
    bottom: 22%;
    left: -4%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, rgba(90, 16, 40, 0) 0%, var(--clr-base) 100%);
    opacity: 0.36;
}

.category-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 16px); width: 100%; max-width: 1040px; margin: 0 auto; padding-top: 32px; }
.category-highlight { height: clamp(150px, 24vw, 300px); display: flex; flex-direction: column; justify-content: end; padding: clamp(12px, 2.5vw, 20px); border-radius: 14px; color: #fff; background-size: cover; background-position: top center; box-shadow: var(--shadow-sm); overflow: hidden; }
.category-highlight strong { font-family: var(--font-heading); font-size: clamp(1.2rem, 3vw, 1.75rem); }
.category-highlight.casual{ background-image: linear-gradient(105deg, rgba(90,16,40,.78), rgba(154,41,73,.3)), url('../images/casual%20wear/White%20Crop%20Top.webp'); }
.category-highlight.party{ background-image: linear-gradient(105deg, rgba(90,16,40,.78), rgba(154,41,73,.3)), url('../images/party%20wear/Metallic%20Golden%20Dress.jpg'); }

/* ShopMavios Store navigation, department toggle, and compact mobile layout */
.nav-actions { display: flex; gap: 18px; align-items: center; }
.nav-action { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; color: var(--clr-base); font-weight: 700; }
.nav-action > i { display: none; }
.nav-action .badge { position: static; margin-left: 4px; width: 18px; height: 18px; font-size: .68rem; }
.mobile-menu-btn { order: -1; margin-right: 8px; }
.product-filter { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--clr-border); border-radius: 999px; }
.product-filter button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--clr-base); font-weight: 700; cursor: pointer; }
.product-filter button.active, .product-filter button:hover { background: var(--clr-base); color: #fff; }
.sort-select { min-height: 36px; padding: 6px 12px; border: 1px solid var(--clr-border); border-radius: 999px; background: #fff; color: var(--clr-base); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.shop-toolbar-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-actions { display: flex; align-items: stretch; gap: 8px; margin-top: auto; }
/* Add to Cart (or Move to Cart) fills the row, the wishlist heart keeps a fixed square footprint. */
.card-actions .add-to-cart-btn, .card-actions > .btn { flex: 1 1 auto; width: auto; min-width: 0; margin-top: 0; }
.add-to-cart-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--sp-4);
    border-bottom: 2px solid var(--clr-bg-alt);
    padding-bottom: var(--sp-2);
}

.section-header h2 {
    margin-bottom: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
}
.section-header p.subtitle {
    font-size: 1rem;
    color: var(--clr-text-light);
    margin-top: var(--sp-1);
}

.view-all {
    font-weight: 600;
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.view-all:hover { gap: 0.75rem; }

/* Product Cards */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(16px, 3vw, 32px);
}

.product-card {
    background: #FFF;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    padding: 12px;
}
.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.product-img-container {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.product-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    image-rendering: auto;
    transition: filter 0.3s ease;
}

.product-card:hover .product-img-container img {
    filter: brightness(1.04) contrast(1.03);
}

.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badge-tag {
    background-color: var(--clr-base);
    color: #FFF;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-weight: bold;
}
.badge-tag.sale { background-color: var(--clr-accent); }

.wishlist-btn-card {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FFF;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    color: var(--clr-text-light);
}
.wishlist-btn-card:hover, .wishlist-btn-card.active {
    color: var(--clr-accent);
}

.product-info {
    padding: 16px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-category {
    font-size: 0.75rem;
    color: var(--clr-text-light);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.product-title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--clr-base);
}

.product-price {
    font-weight: 700;
    color: var(--clr-base);
    font-size: 1.125rem;
    margin-bottom: var(--sp-2);
}
.product-price .original {
    text-decoration: line-through;
    color: var(--clr-text-light);
    font-size: 0.875rem;
    font-weight: 400;
    margin-right: 8px;
}

.add-to-cart-btn {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--clr-base);
    color: #FFF;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: auto;
}
.add-to-cart-btn:hover {
    background-color: var(--clr-accent);
}

/* Small square wishlist heart shown to the right of Add to Cart.
   Its size follows --action-btn-size so it always matches the height of the
   button beside it (set by .card-actions / .detail-actions). */
.wishlist-toggle-btn {
    flex: 0 0 auto;
    align-self: stretch;
    width: var(--action-btn-size, 46px);
    min-width: var(--action-btn-size, 46px);
    min-height: var(--action-btn-size, 46px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: #FFF;
    color: var(--clr-text-light);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}
.wishlist-toggle-btn:hover {
    border-color: var(--clr-accent);
    color: var(--clr-accent);
}
/* Filled red heart state while the product is saved in the wishlist. */
.wishlist-toggle-btn.active,
.wishlist-toggle-btn.active:hover {
    background-color: #FFF5F7;
    border-color: var(--clr-accent);
    color: var(--clr-accent);
}

/* Category Grid Home */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
}

.category-card {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 3/4;
    display: block;
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(43,27,53,0.88));
    display: flex;
    align-items: flex-end;
    padding: var(--sp-3);
}

.category-overlay h3 {
    color: #FFF;
    margin-bottom: 0;
    font-size: 1.25rem;
    transition: var(--transition);
}

.category-card:hover img { transform: scale(1.05); }
.category-card:hover .category-overlay h3 { color: var(--clr-accent); padding-bottom: 8px;}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    text-align: center;
}

.feature-card {
    background: #fff;
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(154, 41, 73, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(90, 16, 40, 0.10);
}

.feature-card i {
    font-size: 1.75rem;
    color: var(--clr-accent);
    margin-bottom: var(--sp-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(154, 41, 73, 0.08);
    border-radius: 50%;
}

.feature-card h3 {
    font-size: 1.125rem;
    margin-bottom: var(--sp-1);
}

.feature-card p {
    font-size: 0.875rem;
    color: var(--clr-text-light);
}

/* Testimonials */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}

.testimonial-card {
    background: #fff;
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(154, 41, 73, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(90, 16, 40, 0.10);
}

.stars {
    color: var(--clr-accent);
    margin-bottom: var(--sp-2);
}

.quote {
    font-style: italic;
    margin-bottom: var(--sp-2);
}

.author {
    font-weight: 600;
    font-size: 0.875rem;
}

/* Newsletter */
.newsletter-container {
    max-width: 600px;
}

.newsletter-form {
    display: flex;
    margin-top: var(--sp-3);
}

.newsletter-form input {
    flex-grow: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    outline: none;
}

.newsletter-form button {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.newsletter-msg {
    margin-top: 1rem;
    font-size: 0.875rem;
    min-height: 20px;
}

/* Scroll to top */
#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: var(--clr-base);
    color: #FFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
#scrollToTopBtn:hover {
    background-color: var(--clr-accent);
}

/* Common Page Headers */
.page-header {
    background-color: var(--clr-bg-alt);
    padding: var(--sp-6) 0;
    text-align: center;
}

.page-header h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--sp-1);
}

.about-page-header {
    background-image: linear-gradient(rgba(90, 16, 40, 0.72), rgba(90, 16, 40, 0.72)), url('../images/party%20wear/Embroidered%20Beige%20Kaftan.webp');
    background-size: cover;
    background-position: center;
    color: #FFF;
    padding: clamp(28px, 5vw, 48px) 0;
}

.about-page-header h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #FFF;
}

.breadcrumb {
    font-size: 0.875rem;
    color: var(--clr-text-light);
}

.breadcrumb a {
    color: var(--clr-base);
    font-weight: 600;
}
.breadcrumb a:hover { color: var(--clr-accent); }

/* Horizontal Scroll Container */
.scroll-container {
    width: 100%;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .container,
    .hero-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
    
    .category-grid, .features-grid, .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .shop-hero {
        height: auto;
        min-height: 160px;
        padding: 0;
        margin-top: var(--sp-2);
        margin-bottom: var(--sp-2);
        background-position: left center;
    }
    .shop-hero-content h1 {
        font-size: 1.5rem;
    }
    .shop-hero-content p {
        font-size: 0.85rem;
        margin-bottom: var(--sp-2);
    }
    
    .hero {
        height: auto;
        min-height: 0;
        padding: clamp(2.5rem, 8vw, 3.5rem) 1.25rem;
        width: 100%;
        margin: 0;
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 5vw, 2.5rem);
        overflow: visible;
    }

    .hero-section {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .hero-showcase { justify-self: center; width: min(82vw, 360px); }
    .add-to-cart-btn-large { width: 100%; max-width: 220px; }

    /* Compact mobile product grid (2 per row, no scroll) */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .scroll-container {
        /* Remove horizontal scroll behaviors for mobile */
        overflow-x: visible;
        padding-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .scroll-container .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .scroll-container .product-card {
        flex: auto;
        max-width: none;
    }

    .product-info { padding: 8px; }
    .product-category { font-size: 0.65rem; margin-bottom: 2px; }
    .product-title { font-size: 0.8rem; margin-bottom: 4px; line-height: 1.2;}
    .product-price { font-size: 0.9rem; margin-bottom: 8px; }
    .add-to-cart-btn { padding: 8px 4px; font-size: 0.7rem; }
    /* The wishlist page uses "Move to Cart" in the same action row - size it to match. */
    .card-actions > .btn { padding: 8px 6px; font-size: 0.7rem; }
    .card-actions { gap: 6px; --action-btn-size: 38px; }
    .wishlist-toggle-btn { font-size: 0.85rem; }
    
    /* Make feature cards more compact in 2x2 grid */
    .features-grid {
        gap: 12px;
    }
    .feature-card {
        padding: 1rem 0.75rem;
    }
    .feature-card i {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    .feature-card h3 {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }
    .feature-card p {
        font-size: 0.75rem;
        line-height: 1.3;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-1);
    }
    
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal { justify-content: center; }
    
    .product-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 8px;}
    .testimonial-grid { grid-template-columns: 1fr; }
    
    .newsletter-form {
        flex-direction: column;
        gap: var(--sp-1);
    }
    .newsletter-form input, .newsletter-form button {
        width: 100%;
        border-radius: var(--radius-sm);
    }
    
    /* Make buttons touch-friendly minimum 44px */
    .btn, .add-to-cart-btn, .wishlist-btn-card, .wishlist-toggle-btn {
        min-height: 44px;
    }
    .card-actions { --action-btn-size: 44px; }

    /* The 2-up product cards are very narrow here, so the "Add to Cart" label used
       to wrap onto two lines. Tighten the label and narrow the wishlist heart to
       give the text room, and keep the row side by side (never stacked).
       nowrap guarantees the label can never break onto a second line. */
    .card-actions { gap: 4px; --action-btn-size: 32px; }
    .card-actions .add-to-cart-btn {
        padding: 8px 6px;
        font-size: 0.65rem;
        gap: 5px;
        white-space: nowrap;
    }
    /* "Move to Cart" (wishlist page) has a longer label in the heading font, so it
       only gets the matching size - it is allowed to wrap rather than overflow. */
    .card-actions > .btn { padding: 8px 6px; font-size: 0.65rem; }
    .wishlist-toggle-btn { width: 32px; min-width: 32px; font-size: 0.8rem; }
}

/* Narrow phones: the bag icon no longer fits beside the label, so it is dropped
   to keep "Add to Cart" on a single line. */
@media (max-width: 400px) {
    .card-actions { gap: 4px; --action-btn-size: 28px; }
    .card-actions .add-to-cart-btn { padding: 8px 6px; font-size: 0.6rem; }
    .card-actions .add-to-cart-btn > i { display: none; }
    .card-actions > .btn { padding: 8px 6px; font-size: 0.6rem; }
    .wishlist-toggle-btn { width: 28px; min-width: 28px; font-size: 0.78rem; }
}

/* Very small screens (<=359px): tighten the card gutters as well, so the action
   row still has enough width for the label plus the heart. */
@media (max-width: 359px) {
    .product-card { padding: 8px; }
    .product-info { padding: 6px; }
    .card-actions .add-to-cart-btn { padding: 8px 5px; font-size: 0.55rem; }
    .card-actions > .btn { padding: 8px 5px; font-size: 0.55rem; }
    .wishlist-toggle-btn { width: 26px; min-width: 26px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .shop-footer .footer-grid {
        grid-template-columns: repeat(2, minmax(160px, max-content));
    }
}

@media (max-width: 768px) {
    .shop-footer .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-footer .footer-bottom {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    /* Keep the mood-board layered on mobile; do not turn the secondary image
       into a separate row. Percent-based geometry continues the desktop design. */
    .hero-content { align-self: auto; justify-self: stretch; }
    .hero-showcase { align-self: auto; justify-self: center; }
    .collage-img:hover { transform: none; }
    .product-detail-info .detail-actions { position: sticky; bottom: 12px; z-index: 10; padding: 8px; border-radius: 10px; background: rgba(255, 250, 241, .94); box-shadow: var(--shadow-md); }
    .related-products { margin-top: 3rem; }
    .nav-container { height: 64px; padding: 0 16px; }
    .nav-links { display: none; }
    .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    .nav-actions { gap: 6px; margin-left: auto; }
    .nav-action { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
    .nav-action > i { display: inline-block; font-size: 1.15rem; }
    .nav-action-text { display: none; }
    .nav-action .badge { position: absolute; top: 3px; right: 1px; margin: 0; }
    .mobile-menu { padding: 8px 16px 16px; }
    .mobile-menu a { text-align: left; min-height: 44px; padding: 12px 8px; }
}

/* Standalone FAQ page */
.faq-page { overflow-x: hidden; }
.faq-page-content {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-left: clamp(16px, 5vw, 24px);
    padding-right: clamp(16px, 5vw, 24px);
}
.faq-page .faq-category { width: 100%; margin-bottom: clamp(2rem, 5vw, 3rem); }
.faq-page .faq-category h2 { font-size: clamp(1.25rem, 4vw, 1.5rem); margin-bottom: clamp(1rem, 3vw, 1.5rem); }
.faq-page .faq-size-guide > p { color: var(--clr-text-light); margin-bottom: var(--sp-2); }
.faq-page .accordion-item { width: 100%; max-width: 100%; }
.faq-page .accordion-header { min-width: 0; gap: var(--sp-2); line-height: 1.4; overflow-wrap: anywhere; }
.faq-page .accordion-header i { flex: 0 0 auto; }
.faq-page .accordion-content { overflow-wrap: anywhere; }
.size-chart-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); }
.size-chart { width: 100%; min-width: 580px; border-collapse: collapse; text-align: left; }
.size-chart th, .size-chart td { padding: clamp(0.65rem, 2vw, 0.85rem); border-bottom: 1px solid var(--clr-border); white-space: nowrap; }
.size-chart thead { background: var(--clr-bg-alt); }
.size-chart tbody tr:last-child th, .size-chart tbody tr:last-child td { border-bottom: 0; }
.size-chart tbody th { font-weight: 600; }

@media (max-width: 768px) {
    .faq-page-content { max-width: 100%; }
    .faq-page .accordion-header { padding: var(--sp-2); font-size: clamp(0.9rem, 3.8vw, 1rem); }
    .faq-page .accordion-content { padding-left: var(--sp-2); padding-right: var(--sp-2); font-size: clamp(0.875rem, 3.7vw, 1rem); }
    .faq-page .accordion-item.active .accordion-content { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    .faq-page .page-header { padding: clamp(2rem, 9vw, 3rem) 0; }
    .size-chart { min-width: 540px; }
}

@media (max-width: 768px) {
    /* Mobile cart cards keep every control inside the card without changing
       the established desktop flex layout. */
    .cart-layout, .cart-items, .cart-item, .cart-item-details { min-width: 0; }
    .cart-item {
        display: grid;
        grid-template-columns: clamp(70px, 22vw, 88px) minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding: 12px;
    }
    .cart-item-img { width: 100%; height: clamp(84px, 25vw, 108px); }
    .cart-item-details { width: 100%; }
    .cart-item-title { overflow-wrap: anywhere; line-height: 1.3; }
    .cart-item-meta { font-size: 0.875rem; color: var(--clr-text-light); margin-top: 4px; }
    .cart-item-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
    .cart-item-original-price { color: var(--clr-text-light); font-size: 0.875rem; font-weight: 500; text-decoration: line-through; }
    .cart-item-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); border-top: 1px solid var(--clr-border); padding-top: 10px; }
    .cart-item-total { font-weight: 700; color: var(--clr-base); }
    .remove-btn { position: static; min-width: 44px; min-height: 44px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; }
    .qty-controls { gap: 10px; margin-top: 8px; }
}

@media (max-width: 359px) {
    .cart-item { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 10px; }
    .cart-item-img { height: 84px; }
}


/* new */

@media (min-width: 769px) {
    .related-products {
        margin-top: 60px;
    }
}
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Page ke baki elements ke upar rakhne ke liye */
  background-color: #ffffff; /* Sticky hone par background transparent na ho */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow jab user scroll kare */
  transition: all 0.3s ease;
}
html, body {
  overflow-x: visible; /* hidden ki jagah visible rakhein agar zaroori na ho */
}
/* ==========================================
   FORCE NAVBAR STICKY FOR HOME PAGE
   ========================================== */

/* Parent Overflow Override - Sticky ke liye ise Fix karna zaroori hai */
html, body, main {
  overflow-x: clip !important; /* hidden ki jagah clip use karein */
  overflow-y: visible !important;
}

/* Strictly Fixed Top Navbar */
#navbar,
.navbar,
nav.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
  background-color: #ffffff !important; /* Clear background */
  transform: none !important;           /* JS Translate/Transform ko nullify karta hai */
  will-change: auto !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Top Padding so content navbar ke peeche hide na ho */
body {
  padding-top: 65px !important; /* Navbar ki height ke according adjust karein */
}

/* Text ko poori tarah hide karne ke liye */
.nav-action .nav-action-text {
  display: none !important;
}

/* Icons ko proper size aur color dene ke liye */
.nav-action i {
  font-size: 1.2rem;
  color: #333333; /* Apni theme ke mutabiq color rakhein */
}
/* Purane text ko hide karne ke liye */
.nav-action .nav-action-text {
  display: none !important;
}

/* Icons ko visible, proper size aur color dene ke liye */
.nav-action i {
  display: inline-block !important;
  font-size: 1.3rem !important;
  color: #222222 !important; /* Agar background dark hai toh #ffffff (white) kar dein */
}

/* Flex alignment theek karne ke liye taaki icon aur badge sahi jagah rahein */
.nav-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  text-decoration: none !important;
  padding: 5px 10px;
}
/* Parent element ko relative positioning dein taaki badge uske andar sahi se position ho sake */
.nav-action {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px;
}

/* Badge ko icon ke upper right corner mein set karne ke liye */
.nav-action .badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  transform: translate(30%, -30%) !important;
  background-color: #8b263e !important; /* Apne theme ke hisab se color rakhein */
  color: white !important;
  font-size: 0.65rem !important;
  padding: 2px 5px !important;
  border-radius: 50% !important;
  min-width: 16px;
  height: 16px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}