/* Reset & Base Styles */
:root {
    /* Earthy Organic Color Palette - Light Mode Only */
    --clr-base: #606C38;
    --clr-base-light: #7a854a;
    --clr-accent: #A3B18A;
    --clr-accent-hover: #8a9872;
    --clr-bg: #FEFAE0;
    --clr-bg-alt: #f5f0d0;
    --clr-text: #2d2f1f;
    --clr-text-light: #5a5d3e;
    --clr-border: #e8e3c8;
    --clr-accent-brown: #7F5539;
    
    /* 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(96,108,56,0.08);
    --shadow-md: 0 8px 22px rgba(96,108,56,0.14);
    
    /* Transitions */
    --transition: all 0.3s ease;
}

/* Force light mode only - override any dark mode preferences */
@media (prefers-color-scheme: dark) {
    :root {
        --clr-base: #606C38;
        --clr-base-light: #7a854a;
        --clr-accent: #A3B18A;
        --clr-accent-hover: #8a9872;
        --clr-bg: #FEFAE0;
        --clr-bg-alt: #f5f0d0;
        --clr-text: #2d2f1f;
        --clr-text-light: #5a5d3e;
        --clr-border: #e8e3c8;
        --clr-accent-brown: #7F5539;
    }
}

*, *::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(96,108,56,0.88), rgba(96,108,56,0.38)), url("../images/Party wear/Checked Tweed Blazer.webp") 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;
    object-position: top center;
    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;
    object-position: top center;
    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: var(--clr-accent-brown);
    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(96, 108, 56, 0.20), 0 6px 14px rgba(96, 108, 56, 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(163, 177, 138, 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(96, 108, 56, 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-brown);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 14px;
    background: rgba(127, 85, 57, 0.08);
    border: 1px solid rgba(127, 85, 57, 0.18);
    border-radius: 999px;
}

.hero .btn-primary {
    background: var(--clr-base);
    padding: 0.95rem 1.75rem;
    letter-spacing: 1.5px;
    box-shadow: 0 10px 24px rgba(96, 108, 56, 0.22);
}

.hero .btn-primary:hover {
    background: var(--clr-base-light);
    box-shadow: 0 14px 30px rgba(96, 108, 56, 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;
    object-position: top center;
    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(96, 108, 56, 0.20),
                0 6px 14px rgba(96, 108, 56, 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(96, 108, 56, 0.22),
                0 5px 12px rgba(96, 108, 56, 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(96, 108, 56, 0.25),
                0 4px 10px rgba(96, 108, 56, 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(96, 108, 56, 0.28),
                0 10px 22px rgba(96, 108, 56, 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(163, 177, 138, 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(96, 108, 56, 0) 0%, var(--clr-base) 100%);
    opacity: 0.36;
}

.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(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%), url("../images/Casual wear/Brown Suede Jacket.webp"); background-size: 125% 125%; }
.category-highlight.formal{ background-image: linear-gradient(105deg, rgba(96,108,56,.78), rgba(163,177,138,.3)), url("../images/Party wear/Classic Blue Suit.webp"); }
.category-highlight.party{ background-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%), url("../images/Party wear/Double Breasted Suit.webp"); background-size: 125% 125%; }
.category-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

/* Buynuvia 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-brown); }

.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-brown);
    color: var(--clr-accent-brown);
}

/* 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(45,47,31,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(96, 108, 56, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(96, 108, 56, 0.10);
}

.feature-card i {
    font-size: 1.75rem;
    color: var(--clr-base);
    margin-bottom: var(--sp-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(96, 108, 56, 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(96, 108, 56, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(96, 108, 56, 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-brown);
}

/* 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(96, 108, 56, 0.72), rgba(96, 108, 56, 0.72)), url("../images/Casual wear/Brown Suede Jacket.webp");
    background-size: cover;
    background-position: top 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);
    }
    
    .category-highlights { grid-template-columns: 1fr; }
    
    .shop-hero {
        height: auto;
        min-height: 160px;
        padding: 0;
        margin-top: var(--sp-2);
        margin-bottom: var(--sp-2);
        background-position: top 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;
    }
}

.category-highlights {
  display: flex;
  gap: 24px;
  max-width: 900px;   /* pehle full width tha, ab reduce kar diya */
  margin: 0 auto;     /* center mein aa jayega */
}

.category-highlight.casual,
.category-highlight.party {
  flex: 1;
  max-width: 440px;   /* har box ki individual width reduce */
  height: 420px;       /* height fix rakhi taaki ratio consistent rahe */
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.category-highlights {
  display: flex;
  gap: 40px;              /* dono boxes ke beech distance */
  max-width: 900px;
  margin: 0 auto;
}

.category-highlight.casual,
.category-highlight.party {
  flex: 1;
  max-width: 420px;
  height: 420px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}.category-highlights {
  display: flex;
  gap: 40px;              /* dono boxes ke beech distance */
  max-width: 900px;
  margin: 0 auto;
}

.category-highlight.casual,
.category-highlight.party {
  flex: 1;
  max-width: 420px;
  height: 420px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.category-highlights {
  display: flex;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.category-highlight.casual,
.category-highlight.party {
  flex: 1;
  max-width: 420px;
  height: 420px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Tablet */
@media (max-width: 768px) {
  .category-highlights {
    gap: 20px;
    padding: 0 16px;
  }
  .category-highlight.casual,
  .category-highlight.party {
    height: 320px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .category-highlights {
    gap: 12px;
    padding: 0 12px;
  }
  .category-highlight.casual,
  .category-highlight.party {
    height: 220px;
  }
}
/* --- Footer Container & Grid Structure --- */
.footer {
  background-color: #2c3e50; /* Clean dark tone, ya apne theme ke hisab se rakhein */
  color: #f8fafc;
  padding: 60px 0 30px 0;
  border-top: 1px solid #e2e8f0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}

.footer-brand .brand-logo {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}

.footer-brand p {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 12px;
}

/* Social Icons Styling */
.footer .social-icons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.footer .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #ffffff;
  transition: background 0.2s ease;
}

.footer .social-icons a:hover {
  background: #ffffff;
  color: #2c3e50;
}

/* Footer Links & Contact Sections */
.footer-links h3,
.footer-contact h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a,
.footer-contact a,
.footer-contact p {
  font-size: 14px;
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Footer Bottom Bar */
.footer-bottom-container {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #94a3b8;
}

/* --- Responsive Mobile Layout --- */
@media (max-width: 768px) {
  .footer {
    padding: 40px 20px 20px 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom-container {
    flex-direction: column;
    text-align: center;
  }
}
/* --- Professional Dark Footer Background --- */
.footer {
  background-color: #111111 !important; /* Deep luxury charcoal, ya apne brand ke hisab se #1c211e rakh sakte hain */
  color: #f8fafc !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 60px 0 30px 0;
}

.footer .footer-links a,
.footer .footer-contact a,
.footer .footer-contact p,
.footer .footer-brand p {
  color: #94a3b8 !important;
}

.footer .footer-links a:hover,
.footer .footer-contact a:hover {
  color: #ffffff !important;
}

.footer-bottom-container {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}
.brand-logo {
  text-transform: none !important;
}
/* --- Top-Right Delete Button & Clean Compact Card Layout --- */
@media (max-width: 768px) {

  /* Main Card Box (Relative positioning for top-right button) */
  .cart-item {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    padding-right: 48px !important; /* Trash icon ke liye right spacing */
    gap: 14px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Image (Left Side) */
  .cart-item-img, 
  .cart-item img {
    width: 80px !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  /* Details (Center/Right Side) */
  .cart-item-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
  }

  /* Delete Button - Top Right Absolute Position */
  .cart-item-actions,
  .cart-item .delete-btn,
  .cart-item button.remove-btn {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  /* Delete Icon Button Box */
  .cart-item-actions button,
  .cart-item .delete-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
  }

  /* Niche wala Extra Rate / Total Price Row Hidden */
  .cart-item-actions .total-price,
  .cart-item-actions .cart-item-total,
  .cart-item-actions span {
    display: none !important;
  }
}
/* --- Guaranteed Fixed Sticky Navbar --- */
html, body {
  overflow-x: hidden !important;
}

nav#navbar.navbar,
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Navbar fixed hone se content peeche chhup jata hai, isliye body / main-content ko space dene ke liye padding */
body, 
main,
#main-content {
  padding-top: 65px !important; /* Continuous top margin clearance */
}
/* Trash icon ko right side shift karne ke liye */
.cart-item .remove-btn, 
.cart-item-actions .remove-btn {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}