/* ==========================================================================
   CSS Variables & Resets (Pure White Header/Footer)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
    /* Colors */
    --gold: #c39d6b;
    --gold-hover: #b08955;
    
    /* Backgrounds */
    --bg-pure-white: #ffffff; /* Explicit Pure White */
    --bg-alt: #f8f6f0;        /* Soft off-white for Collections */
    --bg-dark: #121212;       /* Dark for Features and Trust Badges */
    
    /* Text Colors */
    --text-main: #1a1a1a;     /* Almost black for white backgrounds */
    --text-muted: #666666;    /* Gray for paragraphs */
    --text-light: #ffffff;    /* White text for dark sections */
    
    /* Borders */
    --border-color: #eaeaea; 

    /* Fonts */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-pure-white);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease, background-color 0.3s ease;
}

ul {
    list-style: none;
}

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

/* ==========================================================================
   Header & Navigation (PURE WHITE BACKGROUND)
   ========================================================================== */
.announcement-bar {
    background-color: #f2ebd9; /* Soft gold/beige */
    text-align: center;
    padding: 10px 0;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-main);
    text-transform: uppercase;
    font-weight: 500;
}

.announcement-bar span {
    color: var(--gold-hover);
}

.main-header {
    background-color: #ffffff; /* Strictly Pure White */
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
    transition: all 0.3s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo img {
    height: 55px;
    object-fit: contain;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--text-main);
    letter-spacing: 2px;
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-main);
    font-weight: 600;
}

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

.nav-icons {
    display: flex;
    gap: 25px;
}

.nav-icons i {
    font-size: 18px;
    cursor: pointer;
    color: var(--text-main);
    transition: color 0.3s ease;
}

.nav-icons i:hover {
    color: var(--gold);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 20px;
    max-width: 1300px;
    margin: 0 auto;
    min-height: 80vh;
    background-color: var(--bg-pure-white);
}

.hero-content {
    flex: 1;
    max-width: 500px;
}

.subtitle {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 55px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 25px;
    color: var(--text-main);
}

.hero p {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 40px;
}

.btn-primary {
    display: inline-block;
    background-color: var(--gold);
    color: #ffffff;
    padding: 15px 35px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--gold-hover);
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.hero-image img {
    max-width: 90%;
    height: auto;
    filter: drop-shadow(0px 20px 30px rgba(0,0,0,0.1));
}

/* ==========================================================================
   Features Section (DARK BACKGROUND)
   ========================================================================== */
.features {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1300px;
    margin: 0 auto;
    padding: 50px 20px;
}

.feature-item {
    text-align: center;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-item:last-child {
    border-right: none;
}

.feature-item i {
    font-size: 30px;
    color: var(--gold);
    margin-bottom: 15px;
}

.feature-item h4 {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--gold);
}

.feature-item p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Collection Section
   ========================================================================== */
.collection {
    background-color: var(--bg-alt);
    padding: 100px 0;
    text-align: center;
}

.section-subtitle {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
}

.collection h2 {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 60px;
    color: var(--text-main);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.product-card {
    background: #ffffff;
    padding: 20px;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.product-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 20px;
}

.product-card h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    margin-bottom: 5px;
    color: var(--text-main);
}

.product-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.shop-link {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-main);
    text-transform: uppercase;
    border-bottom: 1px solid var(--text-main);
    padding-bottom: 2px;
}

.shop-link:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* ==========================================================================
   Story Section
   ========================================================================== */
.story {
    display: flex;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 100px 20px;
    gap: 60px;
    background-color: var(--bg-pure-white);
}

.story-image {
    flex: 1;
}

.story-content {
    flex: 1;
}

.story-content h2 {
    font-family: var(--font-heading);
    font-size: 35px;
    font-weight: 400;
    margin-bottom: 20px;
    color: var(--text-main);
}

.story-content p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 30px;
    max-width: 450px;
}

.btn-outline {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 12px 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.btn-outline:hover {
    background: var(--gold);
    color: #ffffff;
}

/* ==========================================================================
   Trust Badges (DARK BACKGROUND)
   ========================================================================== */
.trust-badges {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 40px 0;
}

.trust-grid {
    display: flex;
    justify-content: space-between;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

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

.trust-item i {
    font-size: 24px;
    color: var(--gold);
}

.trust-text h5 {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-light);
}

.trust-text p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Main Premium Footer (PURE WHITE BACKGROUND)
   ========================================================================== */
.main-footer {
    background-color: #ffffff; /* Strictly Pure White */
    border-top: 1px solid var(--border-color);
    padding: 80px 20px 20px 20px;
    color: var(--text-main);
}

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 50px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--border-color);
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text-main);
    margin-bottom: 25px;
    font-weight: 600;
    letter-spacing: 1px;
}

.footer-col ul {
    padding: 0;
}

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

.footer-col ul li a {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.footer-col ul li a:hover {
    color: var(--gold);
    padding-left: 5px;
}

.footer-logo img {
    height: 55px;
    object-fit: contain;
    margin-bottom: 20px;
}

.footer-desc {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 25px;
    max-width: 300px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f5f5f5; /* Light grey so they are visible on white */
    border-radius: 50%;
    color: var(--text-main);
    font-size: 16px;
    transition: all 0.3s ease;
}

.social-icons .social-fb:hover { background-color: #1877F2; color: #fff; transform: translateY(-3px); }
.social-icons .social-yt:hover { background-color: #FF0000; color: #fff; transform: translateY(-3px); }
.social-icons .social-wa:hover { background-color: #25D366; color: #fff; transform: translateY(-3px); }
.social-icons .social-ig:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff;
    transform: translateY(-3px);
}

.newsletter-col p {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 20px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group i {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
    font-size: 14px;
}

.newsletter-form input {
    width: 100%;
    background-color: #ffffff; /* White input inside white footer */
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 12px 15px 12px 40px;
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.3s ease;
}

.newsletter-form input::placeholder {
    color: #aaa;
}

.newsletter-form input:focus {
    border-color: var(--gold);
}

.btn-subscribe {
    background-color: var(--gold);
    color: #ffffff;
    border: none;
    padding: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-subscribe:hover {
    background-color: var(--gold-hover);
}

.footer-bottom {
    max-width: 1300px;
    margin: 0 auto;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    color: var(--text-muted);
    font-size: 12px;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    color: var(--text-muted);
    font-size: 12px;
}

.footer-bottom-links a:hover {
    color: var(--gold);
}

/* ==========================================================================
   JavaScript Dynamic Classes (Sticky Header, Animations, Mobile Menu)
   ========================================================================== */
.main-header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
}

.hidden-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hidden-reveal.reveal {
    opacity: 1;
    transform: translateY(0);
}

.feature-item:nth-child(1), .product-card:nth-child(1) { transition-delay: 0.1s; }
.feature-item:nth-child(2), .product-card:nth-child(2) { transition-delay: 0.2s; }
.feature-item:nth-child(3), .product-card:nth-child(3) { transition-delay: 0.3s; }
.feature-item:nth-child(4), .product-card:nth-child(4) { transition-delay: 0.4s; }

.hamburger {
    display: none;
    cursor: pointer;
    font-size: 22px;
    color: var(--text-main);
    z-index: 1001;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1024px) {
    .hero h1 { font-size: 45px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .story { gap: 30px; }
    .footer-container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .hamburger { display: block; }
    .logo { margin: 0 auto; }
    
    .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        width: 70%;
        height: 100vh;
        background-color: #ffffff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: left 0.4s ease-in-out;
        z-index: 999;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }

    .nav-links.active { left: 0; }
    .nav-links a { font-size: 16px; color: var(--text-main); }
    
    .hero { flex-direction: column; text-align: center; padding: 40px 20px; }
    .hero-content { max-width: 100%; margin-bottom: 40px; }
    
    .features-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .feature-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; }
    
    .story { flex-direction: column; text-align: center; }
    .story-content p { margin: 0 auto 30px auto; }
    
    .trust-grid { flex-direction: column; gap: 30px; align-items: flex-start; }
    .footer-container { grid-template-columns: 1fr; text-align: center; }
    .footer-logo img, .footer-desc { margin-left: auto; margin-right: auto; }
    .social-icons { justify-content: center; }
    .footer-col ul li a:hover { padding-left: 0; color: var(--gold); }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 35px; }
    .product-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact Page Styles
   ========================================================================== */
.contact-hero {
    background-color: var(--bg-alt);
    padding: 80px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.contact-hero h1 {
    font-family: var(--font-heading);
    font-size: 45px;
    color: var(--text-main);
    margin-bottom: 15px;
}

.contact-hero p {
    color: var(--text-muted);
    font-size: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.contact-container {
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
}

.contact-info h3 {
    font-family: var(--font-heading);
    font-size: 28px;
    margin-bottom: 30px;
    color: var(--text-main);
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

.info-item i {
    font-size: 24px;
    color: var(--gold);
    margin-top: 5px;
}

.info-text h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: var(--text-main);
}

.info-text p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.contact-form-wrapper {
    background: #ffffff;
    padding: 50px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.contact-form-wrapper h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    margin-bottom: 30px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-grid.full {
    grid-template-columns: 1fr;
    margin-top: 20px;
}

.contact-form-wrapper label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: var(--text-main);
    font-weight: 500;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
    background: var(--bg-alt);
}

.contact-form-wrapper textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    border-color: var(--gold);
    background: #fff;
}

.btn-submit {
    background-color: var(--gold);
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 20px;
    width: 100%;
}

.btn-submit:hover {
    background-color: var(--gold-hover);
}

.form-alert {
    padding: 15px;
    margin-bottom: 25px;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
}
.form-alert.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.form-alert.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Contact Page Responsive */
@media (max-width: 900px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .contact-form-wrapper {
        padding: 30px 20px;
    }
}

/* ==========================================================================
   Contact History Table
   ========================================================================== */
.query-history-wrapper {
    max-width: 1300px;
    margin: 0 auto 80px auto;
    padding: 0 20px;
}

.query-history-wrapper h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.history-table th, .history-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.history-table th {
    background: var(--bg-alt);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 1px;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.status-badge.pending { background: #fff3cd; color: #856404; }
.status-badge.read, .status-badge.working { background: #cce5ff; color: #004085; }
.status-badge.resolved, .status-badge.replied { background: #d4edda; color: #155724; }

/* ==========================================================================
   Login Required Popup Modal
   ========================================================================== */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-box {
    background: var(--bg-pure-white);
    padding: 40px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-box {
    transform: translateY(0);
}

.modal-box i {
    font-size: 40px;
    color: var(--gold);
    margin-bottom: 20px;
}

.modal-box h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--text-main);
}

.modal-box p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-modal {
    padding: 12px 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.btn-modal-primary {
    background: var(--gold);
    color: #fff;
    text-decoration: none;
}

.btn-modal-primary:hover {
    background: var(--gold-hover);
}

.btn-modal-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.btn-modal-secondary:hover {
    border-color: var(--text-main);
}

/* ==========================================================================
   About Page Styles
   ========================================================================== */
.about-hero {
    background-color: var(--bg-alt);
    padding: 100px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.about-hero h1 {
    font-family: var(--font-heading);
    font-size: 50px;
    color: var(--text-main);
    margin-bottom: 20px;
    line-height: 1.2;
}

.about-hero p {
    color: var(--text-muted);
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

.about-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    gap: 80px;
}

.about-section.reverse {
    flex-direction: row-reverse;
}

.about-image {
    flex: 1;
    position: relative;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.about-content {
    flex: 1;
}

.about-content h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    color: var(--text-main);
    margin-bottom: 25px;
    font-weight: 400;
}

.about-content p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Core Values Section */
.values-section {
    background-color: var(--bg-dark); /* Dark section for contrast, like Features */
    color: var(--text-light);
    padding: 100px 20px;
    text-align: center;
}

.values-section h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    margin-bottom: 60px;
    font-weight: 400;
}

.values-grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.value-card {
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.value-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold);
}

.value-card i {
    font-size: 35px;
    color: var(--gold);
    margin-bottom: 20px;
}

.value-card h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--gold);
    letter-spacing: 1px;
}

.value-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

/* Responsive About Page */
@media (max-width: 900px) {
    .about-section, .about-section.reverse {
        flex-direction: column;
        gap: 40px;
        text-align: center;
        padding: 60px 20px;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* --- New Ingredients Showcase Section --- */
.ingredients-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 100px 20px;
    text-align: center;
}

.ingredients-section h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 400;
}

.ingredients-section > p {
    color: var(--text-muted);
    font-size: 15px;
    max-width: 600px;
    margin: 0 auto 60px auto;
}

.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.ingredient-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4/5; /* Keep cards tall and elegant */
}

.ingredient-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.ingredient-card:hover img {
    transform: scale(1.1); /* Slow zoom effect */
}

.ingredient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    text-align: left;
}

.ingredient-overlay h4 {
    font-family: var(--font-heading);
    font-size: 22px;
    margin-bottom: 5px;
    color: var(--gold);
}

.ingredient-overlay p {
    font-size: 13px;
    opacity: 0.9;
}

/* --- Our Promise Banner --- */
.promise-banner {
    background-color: var(--bg-alt);
    padding: 80px 20px;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.promise-banner h2 {
    font-family: var(--font-heading);
    font-size: 32px;
    margin-bottom: 20px;
}

.promise-banner p {
    color: var(--text-muted);
    font-size: 15px;
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .ingredients-grid {
        grid-template-columns: 1fr;
    }
    .ingredient-card {
        aspect-ratio: 16/9; /* Make them wider on mobile so they don't take up too much vertical space */
    }
}

/* ==========================================================================
   Collections Page Styles
   ========================================================================== */
.collections-header {
    background-color: var(--bg-alt);
    padding: 80px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.collections-header h1 {
    font-family: var(--font-heading);
    font-size: 45px;
    color: var(--text-main);
    margin-bottom: 15px;
}

.collections-header p {
    color: var(--text-muted);
    font-size: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.collections-grid-container {
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.collection-card {
    background: var(--bg-pure-white);
    border: 1px solid var(--border-color);
    text-align: center;
    padding: 50px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block; /* Make the whole card clickable */
    text-decoration: none;
    color: inherit;
}

.collection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-color: var(--gold);
}

.collection-icon {
    font-size: 40px;
    color: var(--gold);
    margin-bottom: 20px;
}

.collection-card h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--text-main);
}

.collection-card p {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.collection-explore {
    margin-top: 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-main);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.collection-card:hover .collection-explore {
    color: var(--gold);
}

@media (max-width: 900px) {
    .collections-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .collections-grid-container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Shop Page Styles
   ========================================================================== */
.shop-layout {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 20px;
    display: flex;
    gap: 40px;
}

/* Sidebar / Filters */
.shop-sidebar {
    width: 250px;
    flex-shrink: 0;
}

.shop-sidebar h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.category-list {
    list-style: none;
    margin-bottom: 40px;
}

.category-list li {
    margin-bottom: 10px;
}

.category-list a {
    font-size: 13px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.category-list a:hover, .category-list a.active-cat {
    color: var(--gold);
    font-weight: 600;
}

.shop-search {
    position: relative;
    margin-bottom: 30px;
}

.shop-search input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border: 1px solid var(--border-color);
    outline: none;
    font-size: 13px;
    border-radius: 4px;
}

.shop-search button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gold);
    cursor: pointer;
}

/* Products Grid */
.shop-products {
    flex: 1;
}

.shop-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.shop-header-row h2 {
    font-family: var(--font-heading);
    font-size: 28px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.product-card {
    background: #fff;
    padding: 20px;
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.product-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 15px;
}

.product-card h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    margin-bottom: 5px;
}

.product-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 15px;
}

.btn-add-cart {
    width: 100%;
    background-color: var(--bg-dark);
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-add-cart:hover {
    background-color: var(--gold);
}

.out-of-stock-btn {
    background-color: #f5f5f5;
    color: #aaa;
    cursor: not-allowed;
}

.out-of-stock-btn:hover {
    background-color: #f5f5f5;
}

/* Mobile Shop Layout */
@media (max-width: 900px) {
    .shop-layout {
        flex-direction: column;
    }
    .shop-sidebar {
        width: 100%;
    }
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 500px) {
    .shop-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Shopping Cart Styles
   ========================================================================== */
.cart-container {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 20px;
}

.cart-header {
    text-align: center;
    margin-bottom: 40px;
}

.cart-header h1 {
    font-family: var(--font-heading);
    font-size: 36px;
    margin-bottom: 10px;
}

.cart-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Cart Items List */
.cart-items-section {
    flex: 2;
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    background: #fff;
}

.cart-item-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 20px;
    border-radius: 4px;
}

.cart-item-details {
    flex: 1;
}

.cart-item-details h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    margin-bottom: 5px;
}

.cart-item-details p {
    font-size: 13px;
    color: var(--text-muted);
}

.cart-item-price {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.qty-form {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.qty-form input {
    width: 40px;
    text-align: center;
    border: none;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.qty-btn {
    background: #f9f9f9;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.3s ease;
}

.qty-btn:hover { background: #eaeaea; }

.remove-btn {
    color: #dc3545;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    transition: color 0.3s ease;
}
.remove-btn:hover { color: #a71d2a; }

/* Order Summary Box */
.cart-summary-section {
    flex: 1;
    background: var(--bg-alt);
    padding: 30px;
    border: 1px solid var(--border-color);
    position: sticky;
    top: 100px; /* Sticks when scrolling */
}

.cart-summary-section h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--text-muted);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
}

.btn-checkout {
    width: 100%;
    background: var(--text-main);
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 25px;
}
.btn-checkout:hover { background: var(--gold); }

/* Shipping Progress Bar */
.shipping-progress-container {
    margin-top: 25px;
    text-align: center;
}
.shipping-progress-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.progress-bar-bg {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: var(--gold);
    transition: width 0.5s ease;
}

/* Empty Cart State */
.empty-cart {
    text-align: center;
    padding: 80px 20px;
}
.empty-cart i {
    font-size: 60px;
    color: #ccc;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .cart-layout { flex-direction: column; }
    .cart-summary-section { width: 100%; position: static; }
}
@media (max-width: 600px) {
    .cart-item { flex-direction: column; text-align: center; }
    .cart-item-img { margin: 0 0 15px 0; }
    .cart-item-actions { margin-top: 20px; justify-content: center; }
}

/* ==========================================================================
   Checkout Page Styles
   ========================================================================== */
.checkout-container {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 20px;
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.checkout-form-section {
    flex: 2;
    background: #fff;
    padding: 40px;
    border: 1px solid var(--border-color);
}

.checkout-form-section h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-grid.full {
    grid-template-columns: 1fr;
}

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

.checkout-group label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: var(--text-main);
    font-weight: 500;
}

.checkout-group input, .checkout-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
    background: var(--bg-alt);
}

.checkout-group input:focus, .checkout-group textarea:focus {
    border-color: var(--gold);
    background: #fff;
}

.checkout-summary-section {
    flex: 1.2;
    background: var(--bg-alt);
    padding: 40px;
    border: 1px solid var(--border-color);
    position: sticky;
    top: 100px;
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e0e0e0;
}

.checkout-item-name {
    font-size: 14px;
    font-weight: 500;
}

.checkout-item-qty {
    font-size: 12px;
    color: var(--text-muted);
}

/* Success Screen */
.order-success {
    text-align: center;
    padding: 100px 20px;
    max-width: 600px;
    margin: 0 auto;
}
.order-success i {
    font-size: 70px;
    color: var(--gold);
    margin-bottom: 20px;
}
.order-success h1 {
    font-family: var(--font-heading);
    font-size: 40px;
    margin-bottom: 15px;
}

@media (max-width: 900px) {
    .checkout-container { flex-direction: column-reverse; }
    .checkout-summary-section { width: 100%; position: static; }
}
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   User Profile Page
   ========================================================================== */
.profile-container {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.profile-header h1 {
    font-family: var(--font-heading);
    font-size: 32px;
}

.btn-logout {
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
.btn-logout:hover {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    align-items: start;
}

/* Sidebar summary */
.profile-summary {
    background: var(--bg-alt);
    padding: 30px;
    border: 1px solid var(--border-color);
    text-align: center;
}
.profile-avatar {
    width: 80px;
    height: 80px;
    background: var(--gold);
    color: #fff;
    font-size: 32px;
    font-family: var(--font-heading);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto 20px auto;
}
.profile-summary h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    margin-bottom: 5px;
}
.profile-summary p {
    font-size: 13px;
    color: var(--text-muted);
}

/* Form Section */
.profile-form-box {
    background: #fff;
    padding: 40px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 8px; color: var(--text-main); font-weight: 600;
}
.form-group input, .form-group textarea {
    width: 100%; padding: 12px 15px; border: 1px solid var(--border-color);
    font-family: inherit; font-size: 13px; outline: none; transition: 0.3s;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--gold); }

/* Readonly fields styling */
.form-group input[readonly] {
    background-color: #f9f9f9;
    color: #888;
    cursor: not-allowed;
}

.btn-update {
    background: var(--gold); color: #fff; border: none; padding: 15px 30px;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;
    cursor: pointer; transition: 0.3s; width: 100%;
}
.btn-update:hover { background: var(--gold-hover); }

@media (max-width: 768px) {
    .profile-grid { grid-template-columns: 1fr; }
}

/* Existing Nav Icons styling */
.nav-icons {
    display: flex;
    gap: 25px;
    align-items: center; /* Ensures icons align perfectly vertically */
}

.nav-icons i {
    font-size: 18px;
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.3s ease;
}

.nav-icons i:hover {
    color: var(--gold);
}

/* NEW: Highlighted User Icon for Logged-In State */
.user-logged-in-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: var(--gold);
    border-radius: 50%;
    color: #ffffff !important; /* Force white icon inside the gold circle */
    box-shadow: 0 4px 10px rgba(195, 157, 107, 0.3); /* Soft gold shadow */
}

.user-logged-in-icon:hover {
    background-color: var(--gold-hover);
    transform: translateY(-2px); /* Slight lift effect */
}

/* NEW: User Initial Avatar for Logged-In State */
.user-avatar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: var(--gold);
    border-radius: 50%;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(195, 157, 107, 0.3);
    transition: all 0.3s ease;
}

.user-avatar-nav:hover {
    background-color: var(--gold-hover);
    transform: translateY(-2px);
}

/* ==========================================================================
   Product Details Page Styles
   ========================================================================== */
.product-details-container {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.product-image-box img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.product-info-box h1 {
    font-family: var(--font-heading);
    font-size: 40px;
    color: var(--text-main);
    margin-bottom: 10px;
}

.product-info-box .category-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: block;
}

.product-info-box .price {
    font-size: 24px;
    font-weight: 500;
    color: var(--gold);
    margin-bottom: 30px;
}

.product-info-box .description {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 40px;
}

.product-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.quantity-selector button {
    background: #f9f9f9;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
}

.quantity-selector button:hover { background: #eaeaea; }

.quantity-selector input {
    width: 50px;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 600;
    outline: none;
}

.btn-add-to-cart-large {
    flex: 1;
    background: var(--bg-dark);
    color: #fff;
    border: none;
    padding: 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-add-to-cart-large:hover { background: var(--gold); }

@media (max-width: 900px) {
    .product-details-container { grid-template-columns: 1fr; gap: 40px; }
}

/* Existing Nav Icons styling */
.nav-icons {
    display: flex;
    gap: 25px;
    align-items: center;
}

.nav-icons i {
    font-size: 18px;
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.3s ease;
}

.nav-icons i:hover {
    color: var(--gold);
}

/* NEW: Cart Icon Wrapper & Notification Badge */
.cart-icon-wrapper {
    position: relative; /* Allows absolute positioning for the badge inside it */
    display: inline-block;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--gold);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- Cart Coupon Styles --- */
.coupon-section {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px dashed var(--border-color);
}

.coupon-section h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.available-coupons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
    min-height: 350px;
}

.coupon-card {
    border: 1px dashed var(--gold);
    background: #fdfaf5;
    padding: 12px 15px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coupon-card.applied {
    background: var(--gold);
    color: #fff;
    border: 1px solid var(--gold);
}

.coupon-details strong {
    font-size: 14px;
    letter-spacing: 1px;
    display: block;
}

.coupon-details small {
    font-size: 11px;
    opacity: 0.8;
}

.btn-apply-coupon {
    background: none;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-apply-coupon:hover {
    background: var(--gold);
    color: #fff;
}

.coupon-card.applied .btn-apply-coupon {
    border-color: #fff;
    color: #fff;
}

.coupon-card.applied .btn-apply-coupon:hover {
    background: #fff;
    color: var(--gold);
}

/* --- Cart Address Bar --- */
.cart-delivery-bar {
    background: #fdfaf5;
    border: 1px solid #f1e9db;
    padding: 15px 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 4px;
}
.cart-delivery-bar i { color: var(--gold); font-size: 18px; }
.cart-delivery-bar p { font-size: 13px; margin: 0; color: var(--text-muted); }
.cart-delivery-bar strong { color: var(--text-main); }

/* --- Gift Wrap UI --- */
.gift-wrap-container {
    margin-top: 15px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #eee;
}
.gift-wrap-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.gift-wrap-toggle input { accent-color: var(--gold); }

.gift-qty-selector {
    display: none; /* Hidden unless checkbox is checked */
    margin-top: 10px;
    align-items: center;
    gap: 10px;
}
.gift-wrap-checkbox:checked ~ .gift-qty-selector { display: flex; }

.gift-qty-selector input {
    width: 60px;
    padding: 5px;
    border: 1px solid var(--border-color);
    text-align: center;
    font-size: 12px;
}

/* Coupon Disabled State */
.coupon-card.disabled {
    opacity: 0.6;
    filter: grayscale(1);
    border-style: solid;
    border-color: #ddd;
    background: #fafafa;
}
.coupon-card.disabled .btn-apply-coupon {
    cursor: not-allowed;
    background: #ddd;
    border-color: #ddd;
    color: #999;
}

/* --- Address Management Styles --- */
.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.address-card {
    border: 1px solid var(--border-color);
    padding: 20px;
    background: #fff;
    position: relative;
    transition: 0.3s;
}

.address-card.default {
    border-color: var(--gold);
    background: #fdfaf5;
}

.address-card h4 {
    font-size: 15px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.address-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 5px;
}

.default-badge {
    background: var(--gold);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 2px;
}

.address-actions {
    margin-top: 15px;
    display: flex;
    gap: 15px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.address-actions a, .address-actions button {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold);
    background: none;
    border: none;
    cursor: pointer;
}

.address-actions .delete-addr { color: #d9534f; }

.btn-add-address {
    border: 2px dashed var(--gold);
    background: #fff;
    color: var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}

.btn-add-address i { font-size: 24px; margin-bottom: 10px; }

/* Form Row for Address */
.address-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .address-form-row { grid-template-columns: 1fr; }
}

/* --- Premium Add Address Button UI --- */
.btn-add-address {
    border: 2px dashed var(--gold);
    background: #fff;
    color: var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.3s ease;
    height: 100%; /* Matches height of other address cards */
    min-height: 220px;
}

.btn-add-address:hover {
    background-color: #fdfaf5;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(195, 157, 107, 0.1);
}

.btn-add-address i {
    font-size: 32px;
    margin-bottom: 12px;
}

/* --- Map Container --- */
#map {
    height: 300px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    z-index: 1;
}

.map-instruction {
    font-size: 12px;
    color: var(--gold);
    margin-bottom: 10px;
    display: block;
    font-weight: 600;
}

/* --- Cart Address Selection --- */
.btn-change-addr {
    margin-left: auto;
    background: none;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 4px;
    transition: 0.3s;
}
.btn-change-addr:hover {
    background: var(--gold);
    color: #fff;
}

/* Modal for Address Selection */
.address-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}
.address-modal.active { display: flex; }

.address-modal-content {
    background: #fff;
    width: 90%;
    max-width: 500px;
    padding: 30px;
    border-radius: 8px;
    max-height: 80vh;
    overflow-y: auto;
}

.addr-select-card {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.addr-select-card:hover { border-color: var(--gold); background: #fdfaf5; }
.addr-select-card.selected { border-color: var(--gold); background: #fdfaf5; box-shadow: 0 0 0 1px var(--gold); }

.addr-select-card input[type="radio"] { margin-top: 5px; accent-color: var(--gold); }

/* --- User Order Badges --- */
.badge-user {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}
.badge-user.pending { background: #fdfaf5; color: #c39d6b; border: 1px solid #f1e9db; }
.badge-user.processing { background: #eef7ff; color: #2196f3; border: 1px solid #d1e9ff; }
.badge-user.shipped { background: #f4f4f4; color: #333; border: 1px solid #ddd; }
.badge-user.delivered { background: #f6fff6; color: #28a745; border: 1px solid #d4edda; }
.badge-user.cancelled { background: #fff5f5; color: #dc3545; border: 1px solid #ffe3e3; }

/* Order Detail Table */
.order-detail-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}
.order-detail-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.order-detail-table td {
    padding: 15px 10px;
    border-bottom: 1px solid #f9f9f9;
    font-size: 14px;
}

/* --- Order Action Buttons --- */
.btn-action {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid transparent;
}
.btn-cancel { background: #fff5f5; color: #dc3545; border-color: #dc3545; }
.btn-cancel:hover { background: #dc3545; color: #fff; }

.btn-return { background: #fdfaf5; color: var(--gold); border-color: var(--gold); }
.btn-return:hover { background: var(--gold); color: #fff; }

/* Return Modal Styles */
.return-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 3000;
    justify-content: center; align-items: center;
}
.return-modal.active { display: flex; }
.return-modal-content { background: #fff; padding: 30px; width: 90%; max-width: 450px; border-radius: 8px; }
.return-modal-content h3 { font-family: var(--font-heading); margin-bottom: 15px; }
.return-modal-content textarea { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 4px; margin-bottom: 20px; outline: none; }

/* ==========================================================================
   Shipping & Returns Page
   ========================================================================== */
.policy-container {
    max-width: 900px;
    margin: 80px auto;
    padding: 0 20px;
}

.policy-section {
    margin-bottom: 60px;
}

.policy-section h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--text-main);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.policy-section h2 i {
    color: var(--gold);
    font-size: 24px;
}

.policy-content {
    background: #fff;
    padding: 40px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.policy-content h3 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: var(--gold);
}

.policy-content p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 20px;
}

.policy-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

.policy-content ul li {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.highlight-box {
    background: var(--bg-alt);
    padding: 20px;
    border-left: 4px solid var(--gold);
    margin: 25px 0;
    font-weight: 500;
}

@media (max-width: 768px) {
    .policy-content { padding: 25px; }
    .policy-section h2 { font-size: 22px; }
}

/* ==========================================================================
   FAQs Page Styles
   ========================================================================== */
.faq-container {
    max-width: 900px;
    margin: 60px auto 100px auto;
    padding: 0 20px;
}

.faq-category-title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--gold);
    margin: 50px 0 20px 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.faq-item {
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
    background: #fff;
    transition: all 0.3s ease;
}

.faq-question {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
}

.faq-question i {
    color: var(--gold);
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background: #fafafa;
    padding: 0 25px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.8;
}

/* Active State for Accordion */
.faq-item.active {
    border-color: var(--gold);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Large enough to fit content */
    padding: 20px 25px;
}

.faq-item.active .faq-question i {
    transform: rotate(180_deg);
}

/* Search Bar for FAQ */
.faq-search-wrapper {
    max-width: 600px;
    margin: -30px auto 40px auto;
    position: relative;
    z-index: 10;
}

.faq-search-wrapper input {
    width: 100%;
    padding: 18px 20px 18px 50px;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    font-size: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    outline: none;
}

.faq-search-wrapper i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
}

/* --- Red Notice Banner --- */
.policy-warning-banner {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}
.policy-warning-banner i { color: #e53e3e; font-size: 24px; }
.policy-warning-banner p { color: #c53030; font-size: 13px; margin: 0; font-weight: 600; line-height: 1.5; }
.policy-warning-banner a { text-decoration: underline; color: #c53030; }

/* --- Advanced Tracking Timeline --- */
.tracking-wrapper {
    padding: 40px 0;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    position: relative;
}
/* The background line */
.tracking-wrapper::before {
    content: '';
    position: absolute;
    top: 58px; left: 5%; width: 90%; height: 4px;
    background: #eee;
    z-index: 1;
}
/* The active progress line */
.tracking-line-active {
    position: absolute;
    top: 58px; left: 5%; height: 4px;
    background: var(--gold);
    z-index: 2;
    transition: width 1s ease-in-out;
}
.tracking-step {
    position: relative;
    z-index: 3;
    text-align: center;
    flex: 1;
}
.step-icon {
    width: 40px; height: 40px;
    background: #fff;
    border: 3px solid #eee;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #ccc;
    transition: all 0.4s ease;
}
.step-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
}
/* Active/Completed State */
.tracking-step.active .step-icon { border-color: var(--gold); color: var(--gold); background: #fdfaf5; box-shadow: 0 0 15px rgba(195,157,107,0.3); }
.tracking-step.active .step-label { color: var(--text-main); }
.tracking-step.completed .step-icon { background: var(--gold); border-color: var(--gold); color: #fff; }

/* --- Buttons --- */
.btn-manage {
    background: var(--text-main); color: #fff; border: none; padding: 10px 20px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    border-radius: 4px; transition: 0.3s;
}
.btn-manage:hover { background: var(--gold); transform: translateY(-2px); }

/* --- Responsive Timeline --- */
@media (max-width: 768px) {
    .tracking-wrapper { flex-direction: column; gap: 30px; padding-left: 30px; }
    .tracking-wrapper::before { left: 48px; top: 0; width: 4px; height: 100%; }
    .tracking-line-active { left: 48px; top: 0; width: 4px; height: 0; }
    .tracking-step { display: flex; align-items: center; gap: 20px; text-align: left; }
    .step-icon { margin: 0; flex-shrink: 0; }
}

/* --- Enhanced Support Details Area --- */
.support-details-card {
    background: var(--bg-alt);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    position: sticky;
    top: 100px;
}

.support-details-card h3 {
    font-family: var(--font-heading);
    font-size: 28px;
    margin-bottom: 25px;
    color: var(--text-main);
}

.support-item-box {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.support-item-box:hover {
    border-color: var(--gold);
    transform: translateX(10px);
}

.support-icon-circle {
    width: 50px;
    height: 50px;
    background: var(--bg-dark);
    color: var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 20px;
}

.support-text-info h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.support-text-info p {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.response-promise {
    margin-top: 30px;
    padding: 15px;
    background: #fdfaf5;
    border: 1px dashed var(--gold);
    border-radius: 6px;
    text-align: center;
}

.response-promise p {
    font-size: 13px;
    color: var(--gold);
    font-weight: 600;
}

/* --- Premium File Upload UI --- */
.custom-file-upload {
    display: block;
    width: 100%;
    padding: 30px;
    background: #fafafa;
    border: 2px dashed #ddd;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.custom-file-upload:hover {
    border-color: var(--gold);
    background: #fff;
}

.custom-file-upload i {
    font-size: 30px;
    color: var(--gold);
    margin-bottom: 10px;
}

.custom-file-upload span {
    display: block;
    font-size: 13px;
    color: #888;
}

/* Hide the actual input but keep it functional */
#file-input {
    display: none;
}

#file-list {
    font-size: 12px;
    color: var(--gold);
    margin-top: 10px;
    font-weight: 600;
}


/* --- Support History Table --- */
.ticket-history-section {
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 20px;
}

.ticket-history-section h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.ticket-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--border-color);
}

.ticket-table th, .ticket-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.ticket-table th {
    background: var(--bg-alt);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Status Badges */
.status-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.status-pending { background: #fff3cd; color: #856404; }
.status-read { background: #eef7ff; color: #004085; }
.status-resolved { background: #d4edda; color: #155724; }
.status-working { background: #f4f4f4; color: #333; }

/* Thumbnail styling for history */
.ticket-attachment-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin-right: 5px;
    transition: 0.3s;
}
.ticket-attachment-thumb:hover {
    transform: scale(1.1);
    border-color: var(--gold);
}

@media (max-width: 768px) {
    .ticket-table thead { display: none; }
    .ticket-table tr { display: block; margin-bottom: 20px; border: 1px solid var(--gold); }
    .ticket-table td { display: block; text-align: right; padding-left: 50%; position: relative; }
    .ticket-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 10px;
        color: var(--gold);
    }
}

/* --- High-End Product Details UI --- */
.product-luxury-layout {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: start;
}

.product-gallery {
    position: sticky;
    top: 100px;
}

.product-gallery img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}

.product-main-info h1 {
    font-family: var(--font-heading);
    font-size: 42px;
    color: var(--text-main);
    margin-bottom: 15px;
    line-height: 1.2;
}

.product-meta-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.product-luxury-price {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 30px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Stock Urgency Text */
.stock-status-msg {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}
.stock-low { color: #d9534f; animation: pulse 2s infinite; }
.stock-good { color: #28a745; }

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Premium Benefit Grid */
.benefit-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 40px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.benefit-item i {
    width: 35px;
    height: 35px;
    background: #f9f9f9;
    color: var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 14px;
}

.benefit-item span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .product-luxury-layout { grid-template-columns: 1fr; gap: 40px; }
    .product-gallery { position: static; }
}

/* ==========================================================================
   REDESIGNED HOMEPAGE UI (MARQUEE, HERO, GLASSMORPHISM)
   ========================================================================== */

/* --- Infinite Glowing Marquee --- */
.marquee-wrapper {
    background: linear-gradient(90deg, var(--darker-bg), var(--dark-bg));
    color: var(--gold);
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    box-shadow: 0 4px 15px rgba(195, 157, 107, 0.15);
    border-bottom: 1px solid rgba(195, 157, 107, 0.3);
    z-index: 10;
}

.marquee-content {
    display: inline-block;
    animation: marquee-scroll 25s linear infinite;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
    cursor: pointer;
}

.marquee-item {
    margin: 0 30px;
    display: inline-block;
}

.marquee-highlight {
    color: #fff;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Scrolls half since we duplicate content */
}

/* --- Split Hero Layout --- */
.hero-editorial-split {
    display: flex;
    min-height: 80vh;
    background: var(--bg-pure-white);
}

.hero-left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 8%;
    position: relative;
}

.hero-right-banner {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Dark overlay over right banner to make glass cards pop */
.hero-right-banner::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

/* --- Horizontal Glassmorphism Scroll Cards --- */
.glass-scroll-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 30px;
    width: 100%;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hide Scrollbar */
.glass-scroll-wrapper::-webkit-scrollbar { display: none; }
.glass-scroll-wrapper { -ms-overflow-style: none; scrollbar-width: none; }

.glass-card {
    scroll-snap-align: center;
    min-width: 240px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.glass-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(195, 157, 107, 0.3);
    border-color: rgba(195, 157, 107, 0.5);
}

.glass-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.glass-card h4 { font-family: var(--font-heading); font-size: 18px; margin-bottom: 5px; }
.glass-card p { font-size: 14px; font-weight: 600; color: var(--gold); }

/* View All Special Card */
.glass-card.view-all-card {
    justify-content: center;
    align-items: center;
    background: rgba(195, 157, 107, 0.2);
    border: 1px dashed var(--gold);
}
.glass-card.view-all-card i { font-size: 40px; margin-bottom: 15px; color: var(--gold); }

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .hero-editorial-split { flex-direction: column; }
    .hero-left-content { padding: 60px 20px; text-align: center; align-items: center; }
    .hero-right-banner { min-height: 500px; }
}

/* ==========================================================================
   HOMEPAGE ENHANCEMENTS (TABS, STORY, PROPORTIONS)
   ========================================================================== */

/* --- Improved Infinite Marquee Spacing --- */
.marquee-wrapper {
    background: linear-gradient(90deg, #0a0a0a, #1a1a1a);
    color: var(--gold);
    padding: 15px 0;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(195, 157, 107, 0.2);
    display: flex;
}
.marquee-content {
    display: flex;
    gap: 40px; /* Provides the clean, smooth spacing */
    padding-right: 40px;
    animation: marquee-scroll 30s linear infinite;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.marquee-wrapper:hover .marquee-content { animation-play-state: paused; }

/* --- Adjusted Hero Proportions --- */
.hero-editorial-split {
    display: flex;
    min-height: 80vh;
    background: var(--bg-pure-white);
}
.hero-left-content {
    flex: 0.35; /* Reduced width for text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 5%;
    position: relative;
}
.hero-right-banner {
    flex: 0.65; /* Increased width for product showcase */
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* --- Category Tabs & JS Filtering --- */
.category-tabs-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 50px;
}
.cat-tab-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
}
.cat-tab-btn:hover, .cat-tab-btn.active {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
    box-shadow: 0 5px 15px rgba(195, 157, 107, 0.3);
}

/* Smooth filtering transitions */
.product-card-filter {
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
    transform: scale(1);
    display: block;
}
.product-card-filter.hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none; /* Prevents clicking while fading out */
}

/* --- Luxury Storytelling Section --- */
.luxury-story-section {
    max-width: 1300px;
    margin: 100px auto;
    padding: 80px 20px;
    display: flex;
    align-items: center;
    gap: 80px;
}
.luxury-story-image {
    flex: 1;
    position: relative;
}
.luxury-story-image img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}
.luxury-story-image::before {
    content: '';
    position: absolute;
    top: -20px; left: -20px; right: 20px; bottom: 20px;
    border: 2px solid var(--gold);
    z-index: 1;
}
.luxury-story-content {
    flex: 1;
}
.luxury-story-content h2 {
    font-family: var(--font-heading);
    font-size: 45px;
    color: var(--text-main);
    line-height: 1.2;
    margin-bottom: 25px;
}
.luxury-story-content p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 20px;
}
.dropcap {
    float: left;
    font-family: var(--font-heading);
    font-size: 60px;
    line-height: 50px;
    padding-top: 4px;
    padding-right: 12px;
    padding-left: 3px;
    color: var(--gold);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hero-left-content { flex: 0.45; }
    .hero-right-banner { flex: 0.55; }
    .luxury-story-section { gap: 50px; }
}
@media (max-width: 768px) {
    .hero-editorial-split { flex-direction: column; }
    .hero-left-content { padding: 60px 20px; text-align: center; }
    .luxury-story-section { flex-direction: column; text-align: center; padding: 40px 20px; }
    .luxury-story-image::before { display: none; }
    .dropcap { float: none; display: inline; font-size: 24px; padding: 0; color: inherit; }
}

/* ==========================================================================
   THE ART OF GIFTING BANNER (HOMEPAGE)
   ========================================================================== */
.gifting-banner {
    position: relative;
    background: url('https://images.unsplash.com/photo-1600880292089-90a7e086ee3c?auto=format&fit=crop&q=80&w=1920') no-repeat center center/cover;
    background-attachment: fixed; /* Creates a premium parallax scrolling effect */
    padding: 120px 20px;
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gifting-banner::before {
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(18, 18, 18, 0.7); /* Dark overlay */
    z-index: 1;
}

.gifting-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 50px;
    border: 1px solid rgba(195, 157, 107, 0.5); /* Delicate gold border */
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(10px); /* Glassmorphism */
    border-radius: 4px;
}

.gifting-content h2 {
    font-family: var(--font-heading);
    font-size: 40px;
    color: var(--gold);
    margin-bottom: 20px;
    font-weight: 400;
}

.gifting-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .gifting-banner { background-attachment: scroll; padding: 80px 20px; }
    .gifting-content { padding: 40px 20px; border: none; background: transparent; backdrop-filter: none; }
    .gifting-content h2 { font-size: 32px; }
}

/* ==========================================================================
   UI / UX RESPONSIVENESS FIXES
   ========================================================================== */

/* --- 1. Fix Marquee Overlap on Mobile --- */
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    /* Added fixed width and no-wrap to ensure it never stacks vertically */
    width: 100vw; 
}

.marquee-content {
    display: flex;
    white-space: nowrap; /* Forces text to stay on one line */
    min-width: 100%; /* Ensures it stretches fully */
    gap: 40px; 
    padding-right: 40px;
    animation: marquee-scroll 25s linear infinite;
}

/* Pause animation on hover */
.marquee-wrapper:hover .marquee-content { animation-play-state: paused; }

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); } /* Full translate for smooth looping */
}

/* --- 2. Fix Features Grid Responsiveness --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 20px;
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 Grid on Tablets & large phones */
        gap: 40px 20px; /* More vertical space between rows */
    }
    .feature-item {
        border-right: none !important; /* Remove borders on smaller screens */
    }
}

@media (max-width: 500px) {
    .features-grid {
        grid-template-columns: 1fr; /* Stack vertically on very small phones */
        gap: 40px;
    }
}

/* --- 3. Make Catalog Product Cards Smaller --- */
/* The grid container allows auto-fitting, we will reduce the minmax size */
#catalogGrid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; /* Was 280px */
    gap: 20px !important; /* Slightly tighter gap */
}

.product-card-filter img {
    height: 250px !important; /* Reduced image height (Was 300px) */
}

.product-card-filter h3 {
    font-size: 16px !important; /* Smaller title font */
    margin-bottom: 5px !important;
}

.product-card-filter .price-text {
    font-size: 14px !important; /* Smaller price text */
}

/* --- 4. Decrease Height of The Perfect Gift Banner --- */
.gifting-banner {
    padding: 80px 20px !important; /* Reduced padding (Was 120px) */
    min-height: 350px; /* Ensures it doesn't get too tall */
}

.gifting-content {
    padding: 40px; /* Slightly tighter box */
}

@media (max-width: 768px) {
    .gifting-banner { padding: 60px 20px !important; min-height: auto; }
    .gifting-content h2 { font-size: 28px !important; }
}

/* --- Shop Page Pricing & Badges --- */
.price-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.actual-price {
    font-size: 13px;
    color: #dc3545; /* Red color */
    text-decoration: line-through; /* Strikethrough */
    font-weight: 500;
}

.selling-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}

.discount-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 10;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

/* --- Product Details Pricing & Gallery --- */
.product-pricing-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}
.product-pricing-box .selling-price {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-main);
}
.product-pricing-box .actual-price {
    font-size: 18px;
    color: #dc3545;
    text-decoration: line-through;
    font-weight: 500;
}
.product-pricing-box .discount-tag {
    background: #dc3545;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    letter-spacing: 1px;
}

/* Thumbnail Gallery */
.gallery-thumbnails {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    overflow-x: auto;
}
.gallery-thumbnails::-webkit-scrollbar { display: none; }
.gallery-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.3s ease;
}
.gallery-thumb:hover, .gallery-thumb.active {
    opacity: 1;
    border-color: var(--gold);
}

/* Image Lightbox (Popup) */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 4000;
    justify-content: center;
    align-items: center;
}
.lightbox-overlay.active { display: flex; }
.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}
.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    transition: 0.3s;
}
.lightbox-close:hover { color: var(--gold); }

/* --- Product Image Thumbnails (Circles) --- */
.gallery-thumbnails {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.gallery-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%; /* Circle shape */
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.gallery-thumb:hover, .gallery-thumb.active {
    opacity: 1;
    border-color: var(--gold);
    transform: scale(1.05);
}

/* --- Offer Promotional Banner --- */
.product-promo-banner {
    background: #fdfaf5;
    border: 1px dashed var(--gold);
    border-radius: 6px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.product-promo-banner i {
    font-size: 30px;
    color: var(--gold);
}

.product-promo-banner h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    margin-bottom: 3px;
    color: var(--text-main);
}

.product-promo-banner p {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Improved Infinite Glowing Marquee --- */
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    width: 100vw; /* Force full screen width */
    background: linear-gradient(90deg, #0a0a0a, #1a1a1a);
    color: var(--gold);
    padding: 12px 0;
    box-shadow: 0 4px 15px rgba(195, 157, 107, 0.15);
    border-bottom: 1px solid rgba(195, 157, 107, 0.3);
    z-index: 10;
}

.marquee-content {
    display: flex;
    flex-shrink: 0; /* Prevents text from squishing together */
    white-space: nowrap; /* Forces a single straight line */
    padding-right: 50px; /* Gap between the end of text and start of the loop */
    animation: marquee-scroll 25s linear infinite;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    align-items: center;
}

.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

.marquee-highlight {
    color: #fff;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ==========================================================================
   Review & Rating Modal UI
   ========================================================================== */
.review-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 4000;
    justify-content: center; align-items: center; opacity: 0; transition: 0.4s ease;
}
.review-modal.active { display: flex; opacity: 1; }

.review-modal-content {
    background: rgba(255, 255, 255, 0.95);
    width: 90%; max-width: 650px; border-radius: 12px;
    max-height: 85vh; overflow-y: auto; padding: 40px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    transform: translateY(20px); transition: 0.4s ease;
    border: 1px solid rgba(255,255,255,0.5);
}
.review-modal.active .review-modal-content { transform: translateY(0); }

/* Custom Scrollbar for Modal */
.review-modal-content::-webkit-scrollbar { width: 6px; }
.review-modal-content::-webkit-scrollbar-track { background: transparent; }
.review-modal-content::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; }

.review-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.review-modal-header h2 { font-family: var(--font-heading); font-size: 26px; margin: 0; }

.review-section { background: #fdfaf5; border: 1px solid var(--border-color); border-radius: 8px; padding: 25px; margin-bottom: 25px; }
.review-section h4 { font-family: var(--font-heading); font-size: 18px; margin-bottom: 15px; color: var(--gold); }

/* Interactive Stars */
.star-rating-group { display: flex; gap: 5px; font-size: 24px; color: #ddd; cursor: pointer; margin-bottom: 15px; }
.star-rating-group i { transition: color 0.2s ease, transform 0.2s; }
.star-rating-group i.active, .star-rating-group i:hover { color: #f5b301; transform: scale(1.1); }

.review-textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 6px; outline: none; resize: vertical; min-height: 80px; font-family: inherit; font-size: 13px; margin-bottom: 15px; transition: 0.3s; }
.review-textarea:focus { border-color: var(--gold); background: #fff; }

/* Image Upload UI */
.review-file-upload { display: flex; align-items: center; gap: 15px; }
.upload-btn-wrapper { background: #fff; border: 1px dashed var(--gold); padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gold); transition: 0.3s; display: inline-block; }
.upload-btn-wrapper:hover { background: var(--gold); color: #fff; }
.upload-btn-wrapper input[type=file] { display: none; }
.image-preview-area { display: flex; gap: 10px; }
.image-preview-area img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid #eee; }

/* Product Display in Review */
.rev-product-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #eee; }
.rev-product-header img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; }

/* ==========================================================================
   PREMIUM STAR RATING UI
   ========================================================================== */
.premium-star-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #f5b301; /* Luxury Gold/Amber for stars */
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.premium-star-rating:hover {
    text-shadow: 0 0 10px rgba(245, 179, 1, 0.5); /* Glowing effect on hover */
    transform: scale(1.02);
}

.premium-star-rating .star-count {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Specific styling for the Glassmorphism Hero Cards */
.glass-card .premium-star-rating {
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 10px;
}

.glass-card .premium-star-rating .star-count {
    color: rgba(255, 255, 255, 0.8); /* Lighter text for dark backgrounds */
}

/* ==========================================================================
   SHOP PAGE: SORTING & STAR RATINGS
   ========================================================================== */

/* Star Ratings */
.premium-star-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 12px;
    color: #f5b301; /* Luxury Gold/Amber */
    margin-bottom: 12px;
    transition: all 0.3s ease;
}
.premium-star-rating:hover {
    text-shadow: 0 0 10px rgba(245, 179, 1, 0.4);
    transform: scale(1.02);
}
.premium-star-rating .star-count {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 6px;
    font-weight: 600;
}

/* Premium Sort Dropdowns */
.premium-select-wrapper {
    position: relative;
    display: inline-block;
}
.premium-select {
    appearance: none;
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 10px 35px 10px 15px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    outline: none;
    transition: 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.premium-select:hover, .premium-select:focus {
    border-color: var(--gold);
    box-shadow: 0 4px 10px rgba(195, 157, 107, 0.1);
}
.premium-select-wrapper i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 10px;
    color: var(--text-muted);
}

/* Sidebar Rating Sort */
.sidebar-filter-block {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-filter-block h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: var(--text-main);
}

/* JS Transition class for smooth sorting */
.shop-grid {
    transition: opacity 0.3s ease-in-out;
}

/* ==========================================================================
   PRODUCT DETAILS: REVIEWS & RATINGS SECTION
   ========================================================================== */
.reviews-section {
    max-width: 1250px;
    margin: 80px auto;
    padding: 60px 20px;
    border-top: 1px solid #eee;
}

.reviews-header {
    text-align: center;
    margin-bottom: 50px;
}

.reviews-header h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    margin-bottom: 10px;
}

/* Review Summary Block */
.review-summary-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    background: var(--bg-alt);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 50px;
}

.review-summary-big {
    text-align: center;
}

.review-summary-big h3 {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
}

/* Reviews Grid */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.review-card {
    background: #fff;
    padding: 25px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.review-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-transform: uppercase;
}

.review-user-details h4 {
    font-size: 14px;
    margin: 0;
}

.review-user-details span {
    font-size: 11px;
    color: var(--text-muted);
}

.review-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 15px 0;
    font-style: italic;
}

.review-images {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.review-images img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
    border: 1px solid #eee;
}

/* Add Review Form */
.add-review-box {
    background: #fdfaf5;
    border: 1px solid var(--gold);
    padding: 40px;
    border-radius: 8px;
    max-width: 700px;
    margin: 0 auto;
}

.add-review-box h3 {
    font-family: var(--font-heading);
    margin-bottom: 20px;
    text-align: center;
}

/* Interactive Star Selection */
.rating-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 30px;
    color: #ddd;
    margin-bottom: 20px;
    cursor: pointer;
    flex-direction: row-reverse; /* For CSS sibling hover magic */
}

.rating-selector input { display: none; }

.rating-selector label {
    cursor: pointer;
    transition: 0.2s ease;
}

/* Magic CSS: Hovering a star highlights it and all stars before it (because of row-reverse) */
.rating-selector label:hover,
.rating-selector label:hover ~ label,
.rating-selector input:checked ~ label {
    color: #f5b301;
    transform: scale(1.1);
}

.review-input-text {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    margin-bottom: 20px;
    outline: none;
}

.review-input-text:focus {
    border-color: var(--gold);
}

/* Login Prompt */
.review-login-prompt {
    text-align: center;
    padding: 40px;
    background: #fafafa;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .review-summary-block { flex-direction: column; gap: 20px; }
}

/* --- My Review Highlight Card --- */
.review-card.my-review {
    border: 1px solid var(--gold);
    background: #fdfaf5;
    position: relative;
    padding-top: 40px; /* Make space for the top badge/button bar */
}

/* The Top Bar inside My Review */
.my-review-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(195, 157, 107, 0.1);
    padding: 8px 25px;
    border-bottom: 1px solid rgba(195, 157, 107, 0.2);
    border-radius: 8px 8px 0 0;
}

.my-review-badge {
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Enhanced Edit Button */
.btn-edit-review {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-edit-review:hover {
    background: var(--gold);
    color: #fff;
    box-shadow: 0 4px 10px rgba(195, 157, 107, 0.2);
}

/* ==========================================================================
   DELIVERY AVAILABILITY CHECKER UI
   ========================================================================== */
.delivery-checker-box {
    background: #fdfaf5; /* Luxury tinted background */
    border: 1px solid rgba(195, 157, 107, 0.3);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.delivery-checker-box h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--text-main);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Input Area */
.delivery-input-group {
    display: flex;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-radius: 6px;
}

.delivery-input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    z-index: 2;
}

.delivery-input-group input {
    width: 100%;
    padding: 15px 15px 15px 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px 0 0 6px;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
}

.delivery-input-group input:focus { border-color: var(--gold); }

.btn-check-delivery {
    background: var(--text-main);
    color: #fff;
    border: none;
    padding: 0 25px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: 0.3s;
}
.btn-check-delivery:hover { background: var(--gold); }

/* Autocomplete Dropdown */
.autocomplete-dropdown {
    position: absolute;
    top: 100%; left: 0; width: calc(100% - 110px);
    background: #fff;
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 100;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}
.autocomplete-item {
    padding: 12px 15px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    justify-content: space-between;
}
.autocomplete-item:hover { background: #fdfaf5; color: var(--gold); }

/* Dynamic Status Messages & Animations */
.delivery-status-msg {
    margin-top: 15px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
    display: none; /* Hidden by default */
}
.delivery-status-msg.show {
    opacity: 1;
    transform: translateY(0);
    display: flex;
}

.status-icon { font-size: 24px; }
.status-text h5 { margin: 0 0 3px 0; font-size: 14px; }
.status-text p { margin: 0; color: #666; font-size: 12px; }

/* Themes */
.msg-success { color: #28a745; background: #f4faf4; padding: 15px; border-radius: 6px; border: 1px dashed #28a745; }
.msg-success .status-icon { animation: bounceTruck 2s infinite; }
.msg-error { color: #dc3545; background: #fdf7f7; padding: 15px; border-radius: 6px; border: 1px dashed #dc3545; }
.msg-loading { color: var(--gold); }

@keyframes bounceTruck {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Disabled Cart Button Override */
.btn-add-to-cart-large:disabled { background: #ddd; color: #888; cursor: not-allowed; box-shadow: none; transform: none; }

/* --- Profile City Autocomplete Styles --- */
.location-autocomplete-wrapper {
    position: relative;
    width: 100%;
}
.location-autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
.location-autocomplete-item {
    padding: 12px 15px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    justify-content: space-between;
}
.location-autocomplete-item:hover {
    background: #fdfaf5;
    color: var(--gold);
}
.location-autocomplete-item span {
    color: #999;
}

/* ==========================================================================
   GLOBAL CUSTOM SCROLLBAR (FRONTEND)
   ========================================================================== */
::-webkit-scrollbar {
    width: 8px; /* Slimmer scrollbar for modern look */
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--dark-bg); /* Dark track matching your theme */
}
::-webkit-scrollbar-thumb {
    background: var(--gold); /* Luxury gold thumb */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold-hover);
}

/* --- Enhanced Cart Layout Alignment --- */
.cart-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.cart-items-section {
    flex: 1.5; /* Takes up more space than the summary */
}

.cart-summary-section {
    flex: 1; /* Fixed proportion for summary */
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    position: sticky;
    top: 100px;
}

/* Fix Cart Item Alignment */
.cart-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    background: #fff;
    border-radius: 8px;
    gap: 20px; /* Consistent spacing */
}

.cart-item-details {
    flex: 1; /* Pushes the actions to the far right */
}

.cart-item-actions {
    display: flex;
    flex-direction: column; /* Stack qty and delete button */
    align-items: flex-end;
    gap: 15px;
}

/* Coupon Info Modal Styles */
.coupon-info-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 4000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.coupon-info-modal.active {
    display: flex;
    opacity: 1;
}

.coupon-info-content {
    background: #fff;
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    text-align: center;
    position: relative;
}
.coupon-info-modal.active .coupon-info-content {
    transform: translateY(0);
}

.coupon-info-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: 0.3s;
}
.coupon-info-close:hover { color: var(--gold); }

.coupon-info-icon {
    font-size: 40px;
    color: var(--gold);
    margin-bottom: 15px;
}

.coupon-info-content h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--text-main);
}

.coupon-rule-list {
    text-align: left;
    background: #fdfaf5;
    padding: 20px;
    border-radius: 6px;
    border: 1px dashed var(--gold);
    margin-bottom: 20px;
}
.coupon-rule-list p {
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f1e9db;
    padding-bottom: 5px;
}
.coupon-rule-list p:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

@media (max-width: 900px) {
    .cart-layout { flex-direction: column; }
    .cart-summary-section { width: 100%; position: static; }
    .cart-item { flex-direction: column; text-align: center; }
    .cart-item-actions { align-items: center; }
}

/* --- Enhanced Cart Layout Alignment --- */
.cart-container {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 20px;
    min-height: 60vh; /* Ensures the page has enough height even if cart is small */
}

.cart-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    position: relative; /* CRITICAL: Creates a boundary for the sticky element */
}

.cart-items-section {
    flex: 1.5; 
}

.cart-summary-section {
    flex: 1; 
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    /* CRITICAL FIX for Sticky Overlap */
    position: sticky;
    top: 100px; /* Distance from top of screen */
    align-self: flex-start; /* Prevents it from stretching to match the left column's height */
    max-height: calc(100vh - 120px); /* Ensures it doesn't grow taller than the screen */
    overflow-y: auto; /* Adds an internal scrollbar to the summary box if it gets too tall (e.g. many coupons) */
}

/* Custom Scrollbar for the Summary Box */
.cart-summary-section::-webkit-scrollbar {
    width: 4px;
}
.cart-summary-section::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

/* Fix Cart Item Alignment */
.cart-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    background: #fff;
    border-radius: 8px;
    gap: 20px; 
}

/* Mobile Resets */
@media (max-width: 900px) {
    .cart-layout { flex-direction: column; }
    .cart-summary-section { 
        width: 100%; 
        position: relative; /* Turns off sticky on mobile */
        top: 0;
        max-height: none; 
        overflow-y: visible;
    }
}

/* --- Enhanced Order Summary Layout --- */
.cart-summary-section {
    flex: 1;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    /* Set a strict max height for the whole card so it never hits the footer */
    max-height: calc(100vh - 120px); 
    display: flex;
    flex-direction: column;
}

/* The coupon list area gets its own scrollbar */
.available-coupons-scroll-area {
        min-height: 350px; /* CRITICAL FIX: Forces the box to always be tall enough to show at least 1-2 coupons */
    overflow-y: auto;
    flex: 1; /* Takes up remaining space */
    padding-right: 5px;
    margin-bottom: -10px; /* Counteract padding for neat fit */
}

/* Slim Scrollbar for Coupons */
.available-coupons-scroll-area::-webkit-scrollbar { width: 4px; }
.available-coupons-scroll-area::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Shipping Info Modal */
.shipping-info-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 4000;
    justify-content: center; align-items: center; opacity: 0; transition: 0.3s;
}
.shipping-info-modal.active { display: flex; opacity: 1; }
.shipping-info-content {
    background: #fff; width: 90%; max-width: 400px; padding: 30px; border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1); transform: translateY(20px); transition: 0.3s;
}
.shipping-info-modal.active .shipping-info-content { transform: translateY(0); }

/* --- Corrected Cart Layout Alignment --- */
.cart-layout { 
    display: flex; 
    gap: 40px; 
    align-items: flex-start; 
}

.cart-items-section { 
    flex: 1.5; 
}

/* Summary Section (Right Side) */
.cart-summary-section { 
    flex: 1; 
    position: sticky; 
    top: 100px; 
    align-self: flex-start; 
    background: #fff; 
    padding: 30px; 
    border-radius: 8px; 
    border: 1px solid var(--border-color); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.02); 
    
    /* Strict height calculation so it never hits the footer */
    height: calc(100vh - 120px); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; /* Prevent the entire box from scrolling, only the coupons will scroll */
}

/* Top part of summary (Totals & Buttons) - Stays Fixed */
.summary-top-fixed {
    flex-shrink: 0; /* Prevents this section from shrinking */
}

/* Coupon Area (Scrollable) */
.available-coupons-scroll-area { 
    flex: 1; /* Takes up all remaining space inside the summary box */
        min-height: 350px; /* CRITICAL FIX: Forces the box to always be tall enough to show at least 1-2 coupons */
    overflow-y: auto; /* Adds a scrollbar specifically here */
    padding-right: 10px; /* Space for the scrollbar */
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* Slim Custom Scrollbar for Coupons */
.available-coupons-scroll-area::-webkit-scrollbar { width: 5px; }
.available-coupons-scroll-area::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
.available-coupons-scroll-area::-webkit-scrollbar-track { background: #f9f9f9; }

/* Coupon Cards */
.coupon-card { display: flex; flex-direction: column; align-items: flex-start; padding: 15px; gap: 10px; border: 1px dashed var(--gold); border-radius: 8px; background: #fff; transition: 0.3s; margin-bottom: 15px; }
.coupon-card.disabled { opacity: 0.6; border-color: #eee; background: #fafafa; }
.coupon-card.applied { background: #fdfaf5; border-style: solid; border-color: #28a745; }
.btn-apply-coupon { background: none; border: 1px solid var(--gold); color: var(--gold); padding: 8px 15px; font-size: 11px; font-weight: 700; cursor: pointer; text-transform: uppercase; border-radius: 4px; transition: 0.3s; }
.btn-apply-coupon:hover { background: var(--gold); color: #fff; }
.coupon-card.disabled .btn-apply-coupon { border-color: #ddd; color: #aaa; cursor: not-allowed; background: #f5f5f5; }
.coupon-card.applied .btn-apply-coupon { border-color: #28a745; color: #28a745; }
.coupon-card.applied .btn-apply-coupon:hover { background: #28a745; color: #fff; }
.coupon-error-msg { font-size: 11px; color: #d9534f; font-weight: 600; margin-top: 5px; display: block; }
.info-tooltip { cursor: pointer; color: #aaa; margin-left: 5px; transition: 0.3s; }
.info-tooltip:hover { color: var(--gold); }

/* Modals */
.coupon-info-modal, .shipping-info-modal, .address-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 4000; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
.coupon-info-modal.active, .shipping-info-modal.active, .address-modal.active { display: flex; opacity: 1; }
.coupon-info-content, .shipping-info-content, .address-modal-content { background: #fff; width: 90%; max-width: 400px; padding: 30px; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); transform: translateY(20px); transition: transform 0.3s ease; text-align: center; position: relative; }
.coupon-info-modal.active .coupon-info-content, .shipping-info-modal.active .shipping-info-content, .address-modal.active .address-modal-content { transform: translateY(0); }
.coupon-info-close, .shipping-info-close { position: absolute; top: 15px; right: 20px; font-size: 20px; color: #999; cursor: pointer; transition: 0.3s; }
.coupon-info-close:hover, .shipping-info-close:hover { color: var(--gold); }
.coupon-rule-list { text-align: left; background: #fdfaf5; padding: 20px; border-radius: 6px; border: 1px dashed var(--gold); margin-bottom: 20px; }

/* Mobile Restructuring */
@media (max-width: 900px) { 
    .cart-layout { flex-direction: column; } 
    .cart-summary-section { 
        width: 100%; 
        position: static; 
        height: auto; /* Reset height for mobile */
        overflow: visible; 
    } 
    .available-coupons-scroll-area {
        overflow-y: visible; /* Prevent double scrollbars on mobile */
    }
}

/* --- Corrected Cart Layout Alignment for Sticky Overlap --- */
.cart-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* CRITICAL: Prevents the sticky child from stretching the parent height */
    position: relative; /* CRITICAL: Creates a bounding box for the sticky element */
    padding-bottom: 50px; /* Provides breathing room at the bottom of the layout */
}

.cart-items-section {
    flex: 1.5;
}

.cart-summary-section {
    flex: 1;
    position: sticky; /* Keeps it on screen as user scrolls */
    top: 100px; /* Distance from top of screen */
    align-self: flex-start; /* CRITICAL: Tells the element to stick to the top of its flex track */
    
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    
    /* Maximum height calculation ensures it never outgrows the viewport */
    max-height: calc(100vh - 120px); 
    display: flex;
    flex-direction: column;
    
    /* Pushes it away from the footer when it reaches the bottom of the parent container */
    margin-bottom: 20px; 
}

/* Coupon Scroll Area */
.available-coupons-scroll-area { 
    overflow-y: auto; 
    flex: 1; 
    padding-right: 5px; 
    margin-top: 20px; 
    border-top: 1px solid #eee; 
    padding-top: 20px;
    min-height: 350px; /* CRITICAL FIX: Forces the box to always be tall enough to show at least 1-2 coupons */
}

.available-coupons-scroll-area::-webkit-scrollbar { width: 4px; }
.available-coupons-scroll-area::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Mobile View Reset */
@media (max-width: 900px) {
    .cart-layout { 
        flex-direction: column; 
        padding-bottom: 0;
    }
    .cart-summary-section { 
        width: 100%; 
        position: static; /* Removes sticky behavior entirely on mobile */
        max-height: none; /* Removes height restriction */
        overflow-y: visible;
        margin-bottom: 0;
    }
    .available-coupons-scroll-area {
        min-height: 350px;
        overflow-y: visible; /* Prevents double-scrolling on mobile */
    }
}

/* --- Add this to your existing CSS in cart.php --- */
.available-coupons-scroll-area { 
    overflow-y: auto; 
    flex: 1; 
    padding-right: 5px; 
    margin-top: 20px; 
    border-top: 1px solid #eee; 
    padding-top: 20px;
    min-height: 250px; /* CRITICAL: Forces height so coupons are visible */
}

/* Slim Custom Scrollbar */
.available-coupons-scroll-area::-webkit-scrollbar { width: 5px; }
.available-coupons-scroll-area::-webkit-scrollbar-thumb { background: #ddd; border-radius: 5px; }
.available-coupons-scroll-area::-webkit-scrollbar-track { background: #f9f9f9; }

/* Side-by-Side Coupon Grid */
.available-coupons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two coupons side by side */
    gap: 15px;
}

.coupon-card { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    padding: 15px; 
    gap: 10px; 
    border: 1px dashed var(--gold); 
    border-radius: 8px; 
    background: #fff; 
    transition: 0.3s; 
}

.coupon-card.disabled { opacity: 0.6; border-color: #eee; background: #fafafa; }
.coupon-card.applied { background: #fdfaf5; border-style: solid; border-color: #28a745; }

.btn-apply-coupon { 
    background: none; border: 1px solid var(--gold); color: var(--gold); 
    padding: 6px 12px; font-size: 10px; font-weight: 700; cursor: pointer; 
    text-transform: uppercase; border-radius: 4px; transition: 0.3s; 
}
.btn-apply-coupon:hover { background: var(--gold); color: #fff; }
.coupon-card.disabled .btn-apply-coupon { border-color: #ddd; color: #aaa; cursor: not-allowed; background: #f5f5f5; }
.coupon-card.applied .btn-apply-coupon { border-color: #28a745; color: #28a745; }
.coupon-card.applied .btn-apply-coupon:hover { background: #28a745; color: #fff; }

.coupon-error-msg { font-size: 10px; color: #d9534f; font-weight: 600; margin-top: 5px; display: block; line-height: 1.3;}
.info-tooltip { cursor: pointer; color: #aaa; margin-left: 5px; transition: 0.3s; }
.info-tooltip:hover { color: var(--gold); }

@media (max-width: 500px) {
    .available-coupons-grid { grid-template-columns: 1fr; /* Stacks on small phones */ }
}