/*
* Divine Astrology - The "Midas Touch" Design System v6.0
* With Zoom Hero Slider
*/

/* =================================================================
   1. ROOT VARIABLES & COLOR PALETTE
================================================================= */
:root {
    /* "Midas Touch" Palette (v2.3) - PRIORITIZED */
    --bg-light: #FFFFFF;
    --bg-dark: rgb(14, 7, 0);
    --bg-light-gray: #F8F9FA;
    --text-light-bg: #272423;
    --text-dark-bg-primary: #FFFFFF;
    --text-dark-bg-secondary: #FFC309;
    --accent-gold: #FFC309; 
    --grad-action: linear-gradient(90deg, #FFCE35 0%, #FFE817 100%);
    --grad-popular-border: linear-gradient(90deg, #FFCE35 0%, #FFE817 100%);
    --border-subtle: #EEEEEE;
    --star-rating-color: #FFC309;
    --price-color: #333;
    --sale-price-color: #B22222;
    --sale-tag-bg: #B22222;

    /* Typography (Set to Philosopher as requested) */
    --font-body: 'Philosopher', sans-serif;
    --font-heading: 'Philosopher', sans-serif;
    
    /* Spacing */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 64px;
}

/* =================================================================
   2. GLOBAL STYLING & TYPOGRAPHY
================================================================= */
body {
    font-family: var(--font-body);
    font-size: 16px; /* Base size */
    font-weight: 400;
    color: #333;
    background-color: var(--bg-light);
    overflow-x: hidden;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-light-bg);
    line-height: 1.3;
}

h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); }
h2, .section-title { 
    font-size: clamp(2rem, 4vw, 3rem); 
    margin-bottom: var(--spacing-lg); 
    text-align: center;
    font-weight: 600;
}
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; }

a {
    color: var(--accent-gold);
    font-weight: 500;
    transition: color 0.3s ease;
    text-decoration: none; /* Added for consistency */
}
a:hover {
    color: var(--text-light-bg);
}

section {
    padding: 3rem 0; /* Optimized padding */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Base grid styles */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

.text-center { text-align: center; }
.bg-light-gray { background-color: var(--bg-light-gray); }

/* =================================================================
   3. BUTTONS (From Midas Touch CSS)
================================================================= */
.btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: 700;
    font-family: var(--font-body);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.4s ease;
    cursor: pointer;
    text-align: center;
    border: none; /* Reset border */
}
.btn-primary {
    background: var(--grad-action);
    border: none;
    color: var(--text-light-bg) !important;
    box-shadow: 0 10px 20px rgba(255, 195, 9, 0.3);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}
.btn-primary:hover {
    transform: scale(1.05) perspective(1000px) rotateX(5deg);
    box-shadow: 0 15px 30px rgba(255, 195, 9, 0.4);
}
.btn-outline-primary {
    border: 2px solid var(--bg-dark);
    color: var(--bg-dark);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--accent-gold);
    color: var(--text-light-bg);
    border-color: var(--accent-gold);
}

/* =================================================================
   4. HEADER & NAVIGATION
================================================================= */
.header-top-bar {
    background: var(--bg-dark);
    color: var(--text-dark-bg-primary);
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
}
.header-top-bar strong {
    color: var(--accent-gold);
    margin-left: 8px;
}
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-subtle);
}
.logo {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-light-bg);
    text-decoration: none;
    font-weight: 700;
}
.search-bar {
    flex-grow: 1;
    margin: 0 var(--spacing-xl);
    position: relative;
}
.search-bar input {
    width: 100%;
    padding: 0.8rem var(--spacing-lg);
    padding-left: 50px; 
    border-radius: 50px;
    border: 1px solid var(--border-subtle);
    font-family: var(--font-body);
    font-size: 1rem;
}
.search-bar i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}
.header-icons {
    display: flex;
    gap: var(--spacing-lg);
}
.header-icons a {
    font-size: 1.5rem;
    color: var(--text-light-bg);
    position: relative;
    text-decoration: none;
}
.cart-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: var(--accent-gold);
    color: var(--text-light-bg);
    font-size: 0.75rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-counter {
    position: absolute;
    top: -5px;
    right: -10px;
    background: var(--accent-gold);
    color: var(--text-light-bg);
    font-size: 0.75rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-nav {
    display: flex;
    justify-content: center;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 var(--spacing-lg);
}
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--spacing-lg);
}
.main-nav a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-sm);
    text-decoration: none;
    color: var(--text-light-bg);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
}
.main-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -1px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-gold);
    transition: width 0.3s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after { /* Style for active link */
    width: 100%;
}

/* =================================================================
   5. NEW: HERO SLIDER (Replaces Hero Section)
================================================================= */

/* New Zoom-in + Fade Animation */
@keyframes zoomInFade {
    0%    { opacity: 0; transform: scale(1); }
    10%   { opacity: 1; } /* Fade in */
    33.3% { opacity: 1; transform: scale(1.1); } /* Hold, but zoom in */
    43.3% { opacity: 0; transform: scale(1.1); } /* Fade out (at zoomed state) */
    100%  { opacity: 0; transform: scale(1); } /* Reset */
}

/* New Progress Bar Animation (5s duration) */
@keyframes fillProgress {
    0%    { width: 0%; }
    100%  { width: 100%; }
}

.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Proportional sizing for 2:1 images */
    aspect-ratio: 2 / 1;
    max-height: 60vh; /* Prevents it from being too tall on desktop */
    min-height: 300px; /* Ensures usability on mobile */
    background-color: #333; /* Fallback color */
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    
    /* Animation settings */
    opacity: 0;
    transform: scale(1); /* Set base scale */
    animation: zoomInFade 15s infinite; /* 15s total (3 slides * 5s) */
}
/* Stagger the animations */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }

/* REMOVED .slide::before (overlay) */
/* REMOVED .hero-content, .hero-title, .hero-subtitle */

/* NEW: Progress Bar Styles */
.slider-progress {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 33.3%;
    max-width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3); /* Translucent track */
    border-radius: 4px;
    z-index: 10;
    overflow: hidden; /* To contain the progress bar */
}
.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-gold);
    border-radius: 4px;
    /* Animation: 5s duration, repeats infinitely */
    animation: fillProgress 5s linear infinite; 
}


/* =================================================================
   6. "WHY CHOOSE US" & CATEGORY SECTION
================================================================= */
.feature-card {
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--spacing-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    height: 100%;
    text-align: center;
    transition: all 0.4s ease;
    text-decoration: none;
    color: var(--text-light-bg);
}
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-gold);
}
.feature-icon, .category-icon {
    font-size: 3rem;
    color: var(--accent-gold);
    margin-bottom: var(--spacing-md);
    display: block;
}
.category-card {
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--spacing-lg); /* Less padding for card */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    height: 100%;
    text-align: center;
    transition: all 0.4s ease;
    text-decoration: none;
    color: var(--text-light-bg);
}
.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-gold);
}
.category-card img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: var(--spacing-md);
}
.feature-card h3, .category-card h3 {
    font-size: 1.2rem; /* Tighter heading */
    margin-bottom: 0;
}

/* =================================================================
   7. PRODUCT CARD (Tighter Typography)
================================================================= */
.product-card {
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    overflow: hidden;
    position: relative;
}
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-gold);
}
.product-image {
    position: relative;
}
.product-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}
.sale-tag {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--sale-tag-bg);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 700;
}
.product-card-body {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.product-card-title {
    font-size: 1.1rem; /* Tighter */
    font-weight: 600;
    color: #333;
    text-decoration: none;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
    min-height: 45px; /* Allows for 2 lines */
}
.product-rating {
    font-size: 0.8rem; /* Tighter */
    color: #666;
    margin-bottom: var(--spacing-sm); /* Tighter */
}
.product-rating .stars {
    color: var(--star-rating-color);
}
.product-price {
    font-size: 1.2rem; /* Tighter */
    font-weight: 700;
    color: var(--price-color);
    margin-bottom: var(--spacing-md);
}
.product-price .original-price {
    font-size: 0.9rem;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}
.product-price .sale-price {
    color: var(--sale-price-color);
}
.product-card .btn {
    margin-top: auto; 
}

/* =================================================================
   8. AI CTA SECTION
================================================================= */
.ai-cta-section {
    background: var(--grad-action);
    text-align: center;
}
.ai-cta-section h2 {
    color: var(--text-light-bg);
}
.ai-cta-section p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto var(--spacing-lg) auto;
    color: var(--text-light-bg);
    opacity: 0.8;
}
.ai-cta-section .btn {
    background: var(--bg-light);
    color: var(--text-light-bg) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.ai-cta-section .btn:hover {
    background: var(--bg-dark);
    color: var(--accent-gold) !important;
}

/* =================================================================
   9. FOOTER
================================================================= */
.footer {
    padding: var(--spacing-xxl) 0 var(--spacing-md) 0;
    background-color: var(--bg-dark);
    color: rgba(255, 255, 255, 0.7);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}
.footer-col .logo {
    color: var(--text-dark-bg-primary);
    margin-bottom: var(--spacing-md);
    display: inline-block;
}
.footer h4 {
    font-family: var(--font-heading);
    color: var(--text-dark-bg-primary);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-lg);
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: var(--spacing-sm);
}
.footer a {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    position: relative;
    text-decoration: none;
}
.footer a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--text-dark-bg-secondary);
    transition: width 0.3s ease;
}
.footer a:hover {
    color: var(--text-dark-bg-secondary);
}
.footer a:hover::after {
    width: 100%;
}
.social-links {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}
.social-link {
    background: rgba(255, 255, 255, 0.1);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark-bg-primary);
    transition: all 0.3s ease;
    font-size: 1rem;
}
.social-link:hover {
    background: var(--accent-gold);
    color: var(--text-light-bg) !important;
}
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg) 0;
    text-align: center;
    font-size: 0.9rem;
    margin-top: var(--spacing-xl);
}

/* =================================================================
   10. PRODUCT LISTING PAGE (PLP)
================================================================= */
.breadcrumb {
    padding: var(--spacing-md) 0;
    background: var(--bg-light-gray);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.9rem;
}
.breadcrumb a {
    text-decoration: none;
}
.breadcrumb span {
    margin: 0 8px;
    color: #999;
}
/* UPDATED: Removed display:flex and gap to fix Bootstrap grid */
.plp-main {
    padding: var(--spacing-xl) 0;
}
.plp-filters {
    flex: 0 0 280px; 
}
.filter-group {
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}
.filter-group h3 {
    font-size: 1.2rem;
    padding: var(--spacing-md) var(--spacing-lg);
    margin: 0;
    background: var(--bg-light-gray);
}
.filter-group-body {
    padding: var(--spacing-lg);
}
.filter-group-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.filter-group-body li {
    margin-bottom: var(--spacing-sm);
}
.filter-group-body label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
/* Style for active category link in sidebar */
.filter-group-body li a.active {
    color: var(--accent-gold);
    font-weight: 700;
}
.filter-group-body li a {
    color: var(--text-light-bg);
}

.plp-grid {
    flex: 1;
}
.plp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--spacing-md);
}
.plp-header h2 {
    margin-bottom: 0;
    text-align: left;
    font-size: 1.8rem; /* Scaled down for PLP */
}
.plp-header select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 50px;
    font-family: var(--font-body);
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-xl);
}
.page-item {
    margin: 0 5px;
}
.page-link {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-light-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    transition: all 0.3s ease;
}
.page-link:hover {
    background-color: var(--bg-light-gray);
    border-color: var(--accent-gold);
}
.page-item.active .page-link {
    background-color: var(--accent-gold);
    color: var(--text-light-bg);
    border-color: var(--accent-gold);
}
.page-item.disabled .page-link {
    color: #999;
    pointer-events: none;
}


/* =================================================================
   11. PRODUCT DETAIL PAGE (PDP)
================================================================= */
.pdp-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}
.pdp-image-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.pdp-main-image img {
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    aspect-ratio: 1 / 1; /* Make image square */
    object-fit: cover;
}
.pdp-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}
.pdp-thumbnails img {
    width: 100%;
    border-radius: 10px;
    border: 2px solid var(--border-subtle);
    cursor: pointer;
    transition: border-color 0.3s;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.pdp-thumbnails img:hover, .pdp-thumbnails img.active {
    border-color: var(--accent-gold);
}
.pdp-info h1 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}
.pdp-info .product-rating {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
}
.pdp-info .product-price {
    font-size: 2.2rem;
    margin-bottom: var(--spacing-lg);
}
/* Price styling from product card */
.pdp-info .product-price .original-price {
    font-size: 1.5rem; /* Larger for PDP */
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}
.pdp-info .product-price .sale-price {
    color: var(--sale-price-color);
}

.pdp-info .short-description {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}
.pdp-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}
.quantity-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}
.quantity-selector button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--bg-light);
    font-size: 1.5rem;
    cursor: pointer;
}
.quantity-selector input {
    width: 60px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    border: none;
    background: transparent; /* Added */
}
.pdp-actions .btn {
    font-size: 1.1rem;
    padding: 1.1rem;
}
.delivery-info {
    font-size: 0.9rem;
    color: #555;
    margin-top: var(--spacing-lg);
}

/* PDP Tabs (CSS-Only) */
.pdp-tabs {
    margin-top: var(--spacing-xxl);
}
.tab-headers {
    display: flex;
    border-bottom: 2px solid var(--border-subtle);
    margin-bottom: var(--spacing-lg);
}
.tab-headers .tab-link {
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: #666;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.tab-headers .tab-link:hover {
    color: var(--text-light-bg);
}
.tab-content { display: none; }
.pdp-tabs input[type="radio"] { display: none; }
#tab-1:checked ~ .tab-content-container #content-1,
#tab-2:checked ~ .tab-content-container #content-2,
#tab-3:checked ~ .tab-content-container #content-3,
#tab-4:checked ~ .tab-content-container #content-4 {
    display: block;
}
#tab-1:checked ~ .tab-headers label[for="tab-1"],
#tab-2:checked ~ .tab-headers label[for="tab-2"],
#tab-3:checked ~ .tab-headers label[for="tab-3"],
#tab-4:checked ~ .tab-headers label[for="tab-4"] {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}
.tab-content-container ul, .tab-content-container table {
    margin-top: 1rem;
}
.tab-content-container table {
    width: 100%;
    border-collapse: collapse;
}
.tab-content-container th, .tab-content-container td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}
.tab-content-container th {
    background: var(--bg-light-gray);
    width: 30%;
}
.review {
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--spacing-lg) 0;
}
.review:last-child { border: none; }
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}
.review-header .author { font-weight: 700; }

/* =================================================================
   12. NEW: PANCHANG, INTENTION, TESTIMONIALS
================================================================= */
.panchang-widget-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--bg-light);
}
.panchang-widget {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.panchang-header {
    background: var(--grad-action);
    padding: var(--spacing-md) var(--spacing-lg);
}
.panchang-header h4 {
    font-size: 1.5rem;
    color: var(--text-light-bg);
    margin: 0;
    font-weight: 600;
}
.panchang-header .location {
    font-weight: 400;
    font-size: 1rem;
    opacity: 0.8;
}
.panchang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.panchang-item {
    padding: var(--spacing-lg);
    text-align: center;
    border-right: 1px solid var(--border-subtle);
}
.panchang-item:last-child {
    border-right: none;
}
.panchang-item .label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.25rem;
}
.panchang-item .value {
    display: block;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--text-light-bg);
    font-size: 1.1rem;
}
.panchang-item.auspicious .value { color: #28a745; }
.panchang-item.inauspicious .value { color: #dc3545; }

.intention-card {
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--spacing-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    height: 100%;
    text-align: center;
    transition: all 0.4s ease;
    text-decoration: none;
    color: var(--text-light-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.intention-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-gold);
}
.intention-icon {
    font-size: 3rem;
    color: var(--accent-gold);
    margin-bottom: var(--spacing-md);
    display: block;
    line-height: 1;
}
.intention-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.testimonial-card {
    background: var(--bg-light-gray);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--spacing-xl);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.testimonial-card p {
    font-style: italic;
    color: #555;
    line-height: 1.7;
    margin: 0 0 var(--spacing-md) 0;
    flex-grow: 1;
}
.testimonial-card p::before {
    content: '“';
    font-size: 2.5rem;
    color: var(--accent-gold);
    line-height: 0;
    margin-right: 5px;
}
.testimonial-author {
    font-weight: 600;
    color: var(--text-light-bg);
    text-align: right;
    margin-top: auto;
}

/* =================================================================
   13. NEW: HORIZONTAL SCROLLING MOBILE SLIDERS
================================================================= */
.horizontal-scroll-wrapper {
    display: grid; /* Default is desktop grid */
    gap: var(--spacing-lg);
    /* Apply grid templates */
}
.horizontal-scroll-wrapper.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.horizontal-scroll-wrapper.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.horizontal-scroll-wrapper.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }


.horizontal-scroll-container {
    display: contents; /* On desktop, this has no effect, children act as grid items */
}

/* =================================================================
   14. NEW: STICKY PDP FOOTER (Hidden on Desktop)
================================================================= */
.pdp-sticky-footer {
    display: none; /* Hidden on desktop */
}


/* =================================================================
   15. RESPONSIVENESS (TABLET)
================================================================= */
@media (max-width: 992px) {
    /* Tablet styles */
    .horizontal-scroll-wrapper.grid-cols-4,
    .horizontal-scroll-wrapper.grid-cols-3 { 
        grid-template-columns: 1fr 1fr; 
    }
    .grid-cols-4 { grid-template-columns: 1fr 1fr; }
    .grid-cols-3 { grid-template-columns: 1fr 1fr; }

    .main-header { flex-wrap: wrap; }
    .search-bar { order: 3; width: 100%; flex: 1 1 100%; margin: var(--spacing-md) 0 0 0; }
    .main-nav ul { gap: var(--spacing-md); }
    
    .plp-main { flex-direction: column; }
    .plp-filters { flex: 0 0 auto; width: 100%; }
    
    .pdp-main { grid-template-columns: 1fr; }
    
    .panchang-grid { grid-template-columns: 1fr 1fr; }
}

/* =================================================================
   16. RESPONSIVENESS (MOBILE)
================================================================= */
@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    .section-title { font-size: 1.8rem; }
    section { padding: 2rem 0; } /* Tighter mobile padding */

    /* === Mobile Header === */
    .header-icons { display: none; } /* Hide desktop icons */
    .logo { font-size: 1.5rem; }
    .search-bar { margin-top: var(--spacing-sm); }
    .header-top-bar { font-size: 0.8rem; }

    /* === UPDATED: main-nav === */
    .main-nav { 
        padding: 0;
        justify-content: center;
    }
    .main-nav ul {
        flex-wrap: wrap; /* Allows links to wrap to next line */
        justify-content: center;
        padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
        gap: 0;
    }
    .main-nav a { 
        padding: 10px; /* Smaller, uniform padding */
        font-size: 0.9rem; 
    }
    
    /* === UPDATED: Mobile: Add a bottom nav for icons === */
    .mobile-bottom-nav {
        display: flex!important; /* This rule makes it visible on mobile */
    }
    
    /* Add padding to the body to prevent content from hiding behind the nav */
    body {
        padding-bottom: 60px; /* Height of the bottom nav */
    }


    /* === UPDATED: feature-card === */
    .feature-card {
        padding: var(--spacing-lg); /* Reduced padding */
    }
    .feature-card h3 {
        font-size: 1.2rem;
    }
    .feature-icon {
        font-size: 2.5rem; /* Reduced icon size */
        margin-bottom: var(--spacing-md);
    }
    
    /* === Mobile Horizontal Sliders === */
    .horizontal-scroll-wrapper {
        display: block; /* Change from grid to block */
    }
    .horizontal-scroll-container {
        display: flex;
        overflow-x: auto;
        /* Add padding to see shadows and prevent cutting off */
        padding: 0.5rem var(--spacing-md) 1.5rem var(--spacing-md);
        gap: var(--spacing-md);
        /* Hide scrollbar */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .horizontal-scroll-container::-webkit-scrollbar {
        display: none;
    }
    .horizontal-scroll-container > * {
        flex: 0 0 70%; /* Each card takes 70% of screen */
        max-width: 280px;
    }
    /* Smaller cards for categories */
    .horizontal-scroll-container .category-card {
        flex: 0 0 40%; 
        max-width: 150px;
    }
    .horizontal-scroll-container .intention-card {
         flex: 0 0 60%;
         max-width: 220px;
    }
    /* Standard grids stack to 1 column */
    .grid-cols-4, .grid-cols-3, .grid-cols-2 { 
        grid-template-columns: 1fr; 
    }

    /* === Mobile Product Detail Page === */
    .pdp-main { padding-top: 1rem; gap: var(--spacing-lg); }
    .pdp-info h1 { font-size: 1.8rem; }
    .pdp-info .product-price { font-size: 1.8rem; }
    /* .pdp-actions { display: none; } --- REMOVED This rule */
    .pdp-thumbnails { grid-template-columns: repeat(4, 1fr); }
    .tab-headers { flex-wrap: wrap; }
    .tab-headers .tab-link { padding: var(--spacing-md) 10px; font-size: 0.9rem; }
    
    /* --- REMOVED sticky footer body padding rules --- */


    /* === Sticky Footer (Mobile Only) --- REMOVED --- */
    /* All .pdp-sticky-footer styles have been removed */
    
    /* Other Mobile Stacking */
    .panchang-grid { grid-template-columns: 1fr 1fr; }
    .panchang-item { 
        border-bottom: 1px solid var(--border-subtle);
        padding: var(--spacing-md);
    }

    /* === UPDATED: footer === */
    .footer {
        padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md) var(--spacing-md); /* Tighter padding */
        /* Add padding-bottom to clear the mobile nav */
        padding-bottom: 80px; 
    }
    .footer-grid {
        /* NEW: Set up a 2-column grid for mobile */
        grid-template-columns: 1fr 1fr;
    }
    .footer-col {
        margin-bottom: var(--spacing-lg);
        /* Default to center align (for col 1 & 4) */
        text-align: center;
    }
    /* Make Logo (1) and Contact (4) span full width */
    .footer-col:nth-child(1),
    .footer-col:nth-child(4) {
        grid-column: 1 / -1; 
    }
    /* Make Quick Links (2) and Shop (3) left-align */
    .footer-col:nth-child(2),
    .footer-col:nth-child(3) {
        text-align: left; 
    }
    .footer-col .logo {
        margin-left: auto;
        margin-right: auto;
    }
    .social-links {
        justify-content: center; /* Center icons */
    }
}

/* === Mobile: Add a bottom nav for icons === */
.mobile-bottom-nav {
    display: none; /* UPDATED: Hide on desktop by default */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-light);
    border-top: 1px solid var(--border-subtle);
    justify-content: space-around;
    padding: var(--spacing-sm) 0;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
    z-index: 1000;
}
.mobile-bottom-nav a {
    color: var(--text-light-bg);
    text-decoration: none;
    font-size: 1.5rem;
    position: relative;
}
.mobile-bottom-nav .cart-badge {
    font-size: 0.7rem;
    top: 0;
    right: 0;
}

#cart-alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cart-alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid;
    opacity: 0;
    transform: translateX(100%);
    animation: slideIn 0.5s forwards, fadeOut 0.5s 3s forwards;
}
.cart-alert.alert-success {
    background: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
.cart-alert.alert-error {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* =================================================================
   NEW STYLES from style.css (Additions)
================================================================= */

/* =================================================================
   10. PRODUCT LISTING PAGE (PLP) - UPDATED STYLES
================================================================= */

/* --- NEW: AI-First Breadcrumb --- */
.breadcrumb-ai-wrapper {
    background: var(--bg-light-gray);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--spacing-sm) 0;
    font-size: 0.9rem;
}
.breadcrumb-ai ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb-ai li {
    display: flex;
    align-items: center;
}
.breadcrumb-ai li:not(:last-child)::after {
    content: '/'; /* You can use an icon here */
    display: inline-block;
    margin: 0 var(--spacing-sm);
    color: #999;
}
.breadcrumb-ai a {
    text-decoration: none;
    color: var(--text-light-bg);
}
.breadcrumb-ai a:hover {
    color: var(--accent-gold);
}
.breadcrumb-ai span {
    color: #777;
    font-weight: 500;
}

/* --- Responsive PLP Main Layout --- */

.filter-sticky-container {
    position: sticky;
    top: 20px; /* Adjust as needed */
}

/* --- NEW: Category Filter Tree --- */
.filter-group-body.category-filter-tree {
    padding: var(--spacing-md);
    max-height: 450px;
    overflow-y: auto;
}
.category-filter-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.category-filter-tree ul ul {
    padding-left: 15px; /* Indentation for sub-categories */
    border-left: 1px dashed var(--border-subtle);
    margin-left: 10px;
}
.category-filter-tree li {
    padding: 2px 0;
}
.category-filter-tree details {
    padding: 0;
}
.category-filter-tree summary {
    list-style: none; /* Remove default marker */
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px 0;
}
.category-filter-tree summary::before {
    /* Custom accordion arrow */
    content: '+';
    font-weight: 700;
    font-size: 1.2rem;
    display: inline-block;
    width: 20px;
    text-align: center;
    color: var(--accent-gold);
    transition: transform 0.2s ease;
}
.category-filter-tree details[open] > summary::before {
    content: '−';
    transform: rotate(180deg);
}
.category-filter-tree summary a {
    margin-left: 5px;
}
.category-filter-tree a.category-link {
    text-decoration: none;
    color: var(--text-light-bg);
    font-size: 1rem;
    transition: color 0.2s;
}
.category-filter-tree a.category-link:hover {
    color: var(--accent-gold);
}
.category-filter-tree a.category-link.active {
    color: var(--accent-gold);
    font-weight: 700;
}
.category-filter-tree a.leaf {
    /* Leaf nodes (no children) */
    padding-left: 20px; /* Align with summary text */
    display: block;
    padding: 4px 0 4px 25px;
}

/* --- NEW: Price Filter UI --- */
.price-filter-ui .price-slider-values {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}
.price-filter-ui .price-box {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-light);
}
.price-filter-ui .price-box label {
    display: block;
    font-size: 0.8rem;
    color: #777;
}
.price-filter-ui .price-box span {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-light-bg);
}

/* Custom Range Slider Styles */
input[type="range"].form-range {
    height: 10px;
    padding: 0;
}
input[type="range"].form-range:focus {
    box-shadow: none;
}
input[type="range"].form-range::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--accent-gold);
    border: 2px solid var(--bg-light);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    margin-top: -5px; /* Center thumb on track */
    transition: transform 0.2s ease;
}
input[type="range"].form-range::-webkit-slider-thumb:active {
    transform: scale(1.2);
}
input[type="range"].form-range::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--accent-gold);
    border: 2px solid var(--bg-light);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
input[type="range"].form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: var(--grad-action);
    border-radius: 50px;
}
input[type="range"].form-range::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: var(--grad-action);
    border-radius: 50px;
}

/* --- NEW: PLP Header --- */
.plp-header {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}
.plp-header-title h1 {
    margin-bottom: 0;
    text-align: left;
    font-size: 1.8rem;
    line-height: 1.2;
}
.plp-product-count {
    font-size: 0.9rem;
    color: #777;
}
.plp-header-sort .form-select {
    width: auto;
    min-width: 200px;
}

/* --- NEW: Product Card Animations & Button --- */
.product-grid-animated {
    animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.product-card {
    display: flex;
    flex-direction: column;
}
.product-card-body {
    flex-grow: 1; /* Make all card bodies grow to fill height */
    display: flex;
    flex-direction: column;
}
.product-card .btn-add-to-cart {
    margin-top: auto; /* Push button to bottom */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: transparent;
}
.product-card .btn-add-to-cart:hover {
    background: var(--accent-gold);
    color: var(--text-light-bg);
    box-shadow: 0 5px 15px rgba(255, 195, 9, 0.3);
}

/* Button States (Loading, Success, Error) */
.btn-add-to-cart .btn-icon,
.btn-add-to-cart .btn-loading-icon,
.btn-add-to-cart .btn-success-icon,
.btn-add-to-cart .btn-error-icon {
    display: none; /* Hide all icons by default */
}
.btn-add-to-cart .btn-text {
    display: inline;
}

/* Shimmer Animation */
.btn-shimmer {
    background-size: 200% 100%;
    background-image: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
    animation: shimmer 3s infinite linear;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Loading State */
.btn-add-to-cart.btn-loading {
    background: var(--accent-gold);
    color: var(--text-light-bg);
    animation: none; /* Stop shimmer */
}
.btn-add-to-cart.btn-loading .btn-text,
.btn-add-to-cart.btn-loading .btn-icon {
    display: none;
}
.btn-add-to-cart.btn-loading .btn-loading-icon {
    display: inline-block;
}

/* Success State */
.btn-add-to-cart.btn-success {
    background: #28a745;
    border-color: #28a745;
    color: white;
    animation: none;
}
.btn-add-to-cart.btn-success .btn-text,
.btn-add-to-cart.btn-success .btn-loading-icon {
    display: none;
}
.btn-add-to-cart.btn-success .btn-success-icon {
    display: inline-block;
}

/* Error State */
.btn-add-to-cart.btn-error {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
    animation: none;
}
.btn-add-to-cart.btn-error .btn-text,
.btn-add-to-cart.btn-error .btn-loading-icon {
    display: none;
}
.btn-add-to-cart.btn-error .btn-error-icon {
    display: inline-block;
}

/* =================================================================
   16. RESPONSIVENESS (MOBILE) - PLP UPDATES
================================================================= */
@media (max-width: 991.98px) {
    /* Make filters stack nicely */
    .filter-sticky-container {
        position: static;
    }
    .plp-main {
        flex-direction: column;
    }
    .plp-filters {
        width: 100%;
    }
    /* Make grid 2 columns on tablet */
    .product-grid-animated.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .plp-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-lg);
    }
    .plp-header-title {
        text-align: center;
    }
    .plp-header-sort .form-select {
        width: 100%;
        min-width: auto;
    }
    /* Make grid 1 column on mobile */
    .product-grid-animated.grid-cols-3 {
        grid-template-columns: 1fr;
    }
    .price-filter-ui .price-slider-values {
        flex-direction: column;
    }
    /* Mobile category tree */
    .category-filter-tree {
        max-height: none; /* Allow full height in offcanvas */
    }
    .category-filter-tree summary::before {
        font-size: 1.5rem; /* Bigger tap target */
    }
    .category-filter-tree a.category-link {
        font-size: 1.1rem; /* Bigger tap target */
        padding: 8px 0;
    }
    .category-filter-tree a.leaf {
        padding-left: 30px;
    }
    .category-filter-tree ul ul {
        margin-left: 10px;
        padding-left: 20px;
    }
}
/* =================================================================
   17. SHOPPING CART PAGE (NEW UI/UX)
================================================================= */

/* --- Empty Cart --- */
.cart-empty-container {
    padding: var(--spacing-xxl) 0;
    max-width: 500px;
    margin: 0 auto;
}
.cart-empty-icon {
    font-size: 5rem;
    color: var(--accent-gold);
    line-height: 1;
    margin-bottom: var(--spacing-lg);
}
.cart-empty-container h2 {
    font-size: 2rem;
}

/* --- Cart Layout --- */
.cart-page-layout {
    gap: var(--spacing-xl) 0;
}
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* --- Item Card --- */
.cart-item-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease-in-out;
}
.cart-item-image {
    flex: 0 0 100px;
    height: 100px;
}
.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
}
.cart-item-details {
    flex-grow: 1;
}
.cart-item-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-light-bg);
    text-decoration: none;
    line-height: 1.3;
    display: block;
}
.cart-item-title:hover {
    color: var(--accent-gold);
}
.cart-item-price {
    font-size: 1.1rem;
    color: #555;
    font-weight: 500;
}
.cart-item-actions {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
}
.cart-item-total {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-light-bg);
    margin-bottom: var(--spacing-md);
}

/* --- New Quantity Selector --- */
.quantity-selector-modern {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: 50px;
}
.quantity-selector-modern .cart-quantity-input {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0 5px;
    /* Hide number input arrows */
    -moz-appearance: textfield;
}
.quantity-selector-modern .cart-quantity-input::-webkit-outer-spin-button,
.quantity-selector-modern .cart-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-selector-modern .quantity-btn {
    background: var(--bg-light-gray);
    border: none;
    color: var(--text-light-bg);
    font-size: 1.2rem;
    font-weight: 700;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}
.quantity-selector-modern .quantity-btn:hover {
    background: var(--accent-gold);
    color: var(--text-light-bg);
}

/* --- Remove Button --- */
.cart-remove-btn {
    font-size: 0.9rem;
    color: #999;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}
.cart-remove-btn:hover {
    color: var(--sale-price-color);
}
.cart-remove-btn i {
    margin-right: 5px;
}

/* --- Summary Card --- */
.cart-summary-card {
    background: var(--bg-light-gray);
    border-radius: 20px;
    padding: var(--spacing-lg);
    border: 1px solid var(--border-subtle);
}
/* This makes it sticky on desktop only */
@media (min-width: 992px) {
    .cart-summary-card.sticky-top {
        top: 20px;
    }
}
.cart-summary-card .list-group-item {
    background: transparent;
    border-color: var(--border-subtle);
    padding: var(--spacing-md) 0;
}
.cart-summary-card .summary-total {
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--text-light-bg);
    font-size: 1.2rem;
}
.cart-summary-card .summary-total strong {
    color: var(--text-light-bg);
}

/* --- Animations --- */
@keyframes fadeOutShrink {
    from {
        opacity: 1;
        max-height: 150px; /* Adjust to card height */
        transform: scaleY(1);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }
    to {
        opacity: 0;
        max-height: 0;
        transform: scaleY(0);
        padding: 0 var(--spacing-lg);
        margin-bottom: 0;
    }
}
.cart-item-card.is-removing {
    animation: fadeOutShrink 0.5s ease-out forwards;
    overflow: hidden;
}
.cart-item-card.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

@keyframes flashYellow {
    0% { background-color: var(--bg-light-gray); }
    30% { background-color: rgba(255, 195, 9, 0.3); } /* --accent-gold at 30% opacity */
    100% { background-color: var(--bg-light-gray); }
}
.cart-summary-card.summary-highlight {
    animation: flashYellow 0.7s ease-in-out;
}

/* --- Mobile Cart --- */
@media (max-width: 768px) {
    .cart-item-card {
        flex-wrap: wrap;
    }
    .cart-item-image {
        flex: 0 0 80px;
        height: 80px;
    }
    .cart-item-details {
        flex-basis: calc(100% - 90px); /* 100% minus image and gap */
        padding: 0;
    }
    .cart-item-title {
        font-size: 1.1rem;
    }
    .cart-item-actions {
        flex-basis: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border-subtle);
    }
    .cart-item-total {
        margin-bottom: 0;
        font-size: 1.1rem;
    }
}

/* --- NEW: Cart Summary Button Layout --- */
.cart-summary-buttons {
    display: flex;
    flex-direction: column; /* Mobile first: stack them */
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}
.cart-summary-buttons .btn {
    width: 100%;
}

/* On screens larger than tiny mobile, put them side by side */
@media (min-width: 420px) {
    .cart-summary-buttons {
        flex-direction: row;
        align-items: center;
    }
    .cart-summary-buttons .btn {
        flex: 1;
    }
    .cart-summary-buttons .btn-lg {
        flex: 1.5; /* Make checkout button bigger */
    }
}

/* On desktop, they will just be side by side */
@media (min-width: 992px) {
    /* Stack them again in the sidebar */
    .cart-summary-buttons {
        flex-direction: column;
    }
}

/* =================================================================
   18. PRODUCT DETAIL PAGE (PDP) - NEW UI/UX
================================================================= */

.pdp-main-layout {
    padding-top: var(--spacing-md);
}
.pdp-main-layout .row {
    --bs-gutter-x: var(--spacing-xxl);
}

/* --- NEW: Swiper Gallery Styles --- */
.pdp-image-gallery {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: var(--accent-gold);
}

.pdp-gallery-main {
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: zoom-in; /* Hint for zoom */
}
.pdp-gallery-main .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-light);
}
.pdp-gallery-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pdp-gallery-main .swiper-button-next,
.pdp-gallery-main .swiper-button-prev {
    background: rgba(0,0,0,0.3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 0; /* Hidden by default */
}
.pdp-gallery-main:hover .swiper-button-next,
.pdp-gallery-main:hover .swiper-button-prev {
    opacity: 1;
}
.pdp-gallery-main .swiper-button-next {
    right: 15px;
}
.pdp-gallery-main .swiper-button-prev {
    left: 15px;
}

/* --- Thumbs Slider --- */
.pdp-gallery-thumbs {
    height: 80px; /* Set fixed height for thumbs */
    padding: 0 5px; /* Small padding */
    box-sizing: border-box;
}
.pdp-gallery-thumbs .swiper-slide {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 2px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
    overflow: hidden;
}
.pdp-gallery-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pdp-gallery-thumbs .swiper-slide-thumb-active {
    border-color: var(--accent-gold);
    opacity: 1;
    box-shadow: 0 4px 10px rgba(255, 195, 9, 0.3);
}

.pdp-zoom-hint {
    text-align: center;
    font-size: 0.9rem;
    color: #888;
}
.pdp-zoom-hint i {
    margin-right: 5px;
}

/* --- NEW: Zoom Modal --- */
.pdp-zoom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.pdp-zoom-modal.active {
    opacity: 1;
    pointer-events: all;
}
.pdp-zoom-modal img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.pdp-zoom-modal.active img {
    transform: scale(1);
}
.pdp-zoom-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

/* --- Info Column Styles --- */
.pdp-info-sticky-wrapper {
    position: sticky;
    top: 20px;
}
.pdp-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    animation: fadeInDown 0.5s ease-out;
}
.pdp-meta-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    animation: fadeInDown 0.5s ease-out 0.1s;
    animation-fill-mode: both;
}
.pdp-meta-info .product-rating {
    margin: 0;
}
.review-count-link {
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
}
.pdp-stock-status {
    font-size: 0.9rem;
    font-weight: 600;
    color: #28a745;
}
.pdp-stock-status i {
    margin-right: 4px;
}
.pdp-stock-status .fa-times-circle {
    color: #dc3545;
}

.pdp-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-light-bg);
    margin-bottom: var(--spacing-lg);
    animation: fadeInDown 0.5s ease-out 0.2s;
    animation-fill-mode: both;
}
.pdp-price .original-price {
    font-size: 1.5rem;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
    margin-left: 12px;
}
.pdp-price .sale-price {
    color: var(--sale-price-color);
}
.pdp-info .short-description {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
    color: #444;
    animation: fadeInDown 0.5s ease-out 0.3s;
    animation-fill-mode: both;
}
.pdp-actions-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: stack all */
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    animation: fadeInDown 0.5s ease-out 0.4s;
    animation-fill-mode: both;
}
.pdp-actions-wrapper .btn {
    width: 100%;
    padding: 0.9rem;
    font-size: 1.1rem;
}

/* NEW: Desktop button grid */
.pdp-desktop-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Side-by-side */
    gap: var(--spacing-md);
}

.pdp-info .delivery-info {
    font-size: 0.9rem;
    color: #555;
    margin-top: var(--spacing-lg);
    animation: fadeInDown 0.5s ease-out 0.5s;
    animation-fill-mode: both;
}

/* --- Modern Tabs --- */
.pdp-tabs-modern {
    margin-top: var(--spacing-lg);
}
.pdp-tabs-modern .tab-headers {
    display: flex;
    border-bottom: 2px solid var(--border-subtle);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-lg);
}
.pdp-tabs-modern .tab-link {
    padding: var(--spacing-md) 0;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: #666;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
}
.pdp-tabs-modern .tab-link:hover {
    color: var(--text-light-bg);
}
.pdp-tabs-modern input[type="radio"] { display: none; }
.pdp-tabs-modern .tab-content { display: none; animation: fadeIn 0.5s ease; }

.pdp-tabs-modern #tab-1:checked ~ .tab-content-container #content-1,
.pdp-tabs-modern #tab-2:checked ~ .tab-content-container #content-2,
.pdp-tabs-modern #tab-3:checked ~ .tab-content-container #content-3,
.pdp-tabs-modern #tab-4:checked ~ .tab-content-container #content-4 {
    display: block;
}
.pdp-tabs-modern #tab-1:checked ~ .tab-headers label[for="tab-1"],
.pdp-tabs-modern #tab-2:checked ~ .tab-headers label[for="tab-2"],
.pdp-tabs-modern #tab-3:checked ~ .tab-headers label[for="tab-3"],
.pdp-tabs-modern #tab-4:checked ~ .tab-headers label[for="tab-4"] {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}
.spec-table {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
}
.spec-table th, .spec-table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}
.spec-table th {
    background: var(--bg-light-gray);
    width: 30%;
    font-weight: 600;
}
.review {
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--spacing-lg) 0;
}
.review:last-child { border: none; }
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}
.review-header .author { font-weight: 700; }
.review-header .stars { color: var(--star-rating-color); }


/* --- Mobile PDP Layout --- */
@media (max-width: 991.98px) {
    .pdp-info-sticky-wrapper,
    .pdp-image-gallery {
        position: static;
        top: auto;
    }
    .pdp-main-layout .row {
        --bs-gutter-x: var(--spacing-lg);
    }
    .pdp-title {
        font-size: 2rem;
        margin-top: var(--spacing-lg);
    }
    .pdp-price {
        font-size: 2rem;
    }
    /* --- MODIFIED: Show desktop buttons on mobile --- */
    .pdp-desktop-buttons {
        display: grid; /* This was 'none', now it's 'grid' */
    }
    /* Show quantity selector on mobile */
    .pdp-actions-wrapper .quantity-selector-modern {
        display: flex;
    }
    
    .pdp-tabs-modern {
        margin-top: var(--spacing-xl);
    }
    .pdp-tabs-modern .tab-headers {
        flex-wrap: nowrap; /* Prevent wrapping */
        overflow-x: auto;
        gap: var(--spacing-md);
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .pdp-tabs-modern .tab-headers::-webkit-scrollbar {
        display: none;
    }
    .pdp-tabs-modern .tab-link {
        flex-shrink: 0;
        font-size: 1rem;
    }
}

/* --- Desktop PDP Layout --- */
@media (min-width: 992px) {
    /* On desktop, stack quantity and buttons */
    .pdp-actions-wrapper {
        grid-template-columns: 1fr; /* Stack them */
    }
    /* But keep the buttons side-by-side */
    .pdp-desktop-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
}


/* =================================================================
   19. MOBILE NAV WITH TEXT (NEW)
================================================================= */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        align-items: flex-start; /* Align items to the top */
        padding: var(--spacing-sm) 5px; /* Add horizontal padding */
        justify-content: space-around;
    }
    .mobile-bottom-nav a {
        flex: 1; /* Allow items to share space */
        display: flex;
        flex-direction: column; /* Stack icon and text */
        align-items: center;
        font-size: 1.1rem; /* Icon size */
        line-height: 1.2;
        padding: 0 2px;
        position: relative; /* Make the <a> tag relative */
    }
    .mobile-bottom-nav a span {
        font-size: 0.7rem; /* Text size */
        font-weight: 500;
        margin-top: 3px;
        font-family: var(--font-body);
        color: var(--text-light-bg);
    }
    /* Adjust badge position for the new layout */
    .mobile-bottom-nav a .cart-badge {
        top: -3px;
        right: 50%; /* Start from center */
        margin-right: -22px; /* Nudge it right */
        font-size: 0.7rem;
    }
    
    /* Ensure body padding is still correct */
    body {
        padding-bottom: 70px; /* Adjust if nav height changed */
    }
}

/* =================================================================
   20. NEW PRODUCT CARD UI/UX (PLP)
================================================================= */
.product-card-body {
    /* Ensure body is flex and column to push new footer to bottom */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-title {
    /* Give title a fixed height to prevent layout shifts */
    min-height: 45px; 
    margin-bottom: var(--spacing-sm);
}

.product-card .product-rating {
    margin-bottom: var(--spacing-sm);
}

/* NEW: This is the main new wrapper */
.product-card-meta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: auto; /* This is the magic! Pushes to the bottom */
}

.product-meta-left {
    /* Takes up remaining space */
    flex-grow: 1;
}
.product-meta-right {
    /* Shrinks to fit button */
    flex-shrink: 0;
}

/* Adjust default price margin */
.product-card .product-price {
    margin-bottom: 0;
    font-size: 1.1rem; /* Slightly smaller to fit */
}

/* Adjust default add-to-cart form */
.product-card .add-to-cart-form {
    margin-top: 0;
}

/* NEW: Square button style */
.product-card .btn-square {
    padding: 0;
    width: 44px;
    height: 44px;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px; /* Match card roundness */
}

/* Show the icon by default, hide text */
.product-card .btn-square .btn-icon {
    display: inline-block;
}
.product-card .btn-square .btn-text,
.product-card .btn-add-to-cart .btn-text {
    display: none; /* Hide text on all card buttons now */
}

/* Ensure icon shows by default on non-square buttons too */
.product-card .btn-add-to-cart .btn-icon {
     display: inline-block;
}

/* =================================================================
   21. AI CHAT PAGE STYLES (NEW & UPDATED)
================================================================= */

.chat-section {
    padding: 3rem 0;
    background-color: var(--bg-light-gray);
}
.chat-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-light);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 80vh; /* Ensure it takes up screen space */
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

/* Chat Window */
#chat-window {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column; /* Stack messages top-to-bottom */
}

/* Messages */
.chat-message {
    margin-bottom: var(--spacing-md);
    display: flex;
}

.user-message {
    justify-content: flex-end;
}
.ai-message {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 85%;
    padding: 12px 18px;
    border-radius: 20px;
    line-height: 1.5;
    word-wrap: break-word;
}

.user-message .message-bubble {
    background: var(--accent-gold);
    color: var(--text-light-bg);
    border-bottom-right-radius: 2px;
}
.ai-message .message-bubble {
    background: var(--bg-light-gray);
    color: var(--text-light-bg);
    border-bottom-left-radius: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* --- NEW: Suggestion Chips --- */
.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
    animation: fadeIn 0.5s 0.2s ease-out both;
}
.suggestion-chips .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 50px;
}
.suggestion-chips .btn i {
    margin-right: 6px;
}

/* --- UPDATED: Input Area --- */
#chat-input-form {
    display: flex;
    align-items: flex-end; /* Align to bottom for multi-line */
    padding: var(--spacing-md);
    background: var(--bg-light);
    border-top: 1px solid var(--border-subtle);
}

/* NEW: Style for <textarea> */
#chat-input-form textarea {
    flex-grow: 1;
    padding: 12px 20px;
    border-radius: 25px; /* Adjust to match height */
    border: 1px solid var(--border-subtle);
    margin-right: 10px;
    
    /* Auto-growing magic */
    resize: none;
    overflow-y: auto;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    max-height: 150px; /* Limit height to ~5-6 lines */
}

#chat-input-form button {
    font-size: 1.2rem;
    padding: 10px 20px;
    border-radius: 50px;
    line-height: 1;
    flex-shrink: 0; /* Prevent button from shrinking */
}

/* --- UPDATED: AI Recommendations (now inside bubble) --- */
.ai-recommendation-products {
    padding: var(--spacing-md) 0 0 0; /* Add padding-top */
    margin-top: var(--spacing-md); /* Add margin-top */
    border-top: 1px solid rgba(0,0,0,0.1); /* Add a separator */
    display: flex;
    overflow-x: auto;
    gap: var(--spacing-md);
    
    /* Add padding to the container to prevent cutoff */
    padding-bottom: 10px;
    padding-left: 2px;
    padding-right: 18px; /* Match the bubble's padding */
    margin-right: -18px; /* Counter the bubble's padding */

    /* Hide scrollbar */
    -ms-overflow-style: none; 
    scrollbar-width: none;
}
.ai-recommendation-products::-webkit-scrollbar {
    display: none;
}

.ai-recommendation-products .product-card {
    flex: 0 0 220px; /* Fixed width for card in chat flow */
    height: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: none;
    margin-bottom: 0;
}
.ai-recommendation-products .product-card:hover {
    transform: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.ai-recommendation-products .product-card-title {
    min-height: auto;
}
.ai-recommendation-products .product-card-meta-footer {
    flex-direction: column; /* Stack price and button vertically in rec card */
    align-items: stretch;
}
.ai-recommendation-products .btn-square {
    width: 100%;
    border-radius: 50px;
    padding: var(--spacing-sm) var(--spacing-lg);
}
.ai-recommendation-products .btn-square .btn-icon {
    display: none;
}
.ai-recommendation-products .btn-square .btn-text {
    display: inline;
}

/* Spinner/Loading */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
}
.dot {
    width: 8px;
    height: 8px;
    background: #ccc;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}
.dot:nth-child(2) { animation-delay: -0.32s; }
.dot:nth-child(3) { animation-delay: -0.16s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

/* --- NEW: Error Bubble Style --- */
.error-bubble {
    background: #f8d7da; /* Light red, from your cart-alert */
    color: #721c24; /* Dark red, from your cart-alert */
    box-shadow: none;
    border: 1px solid #f5c6cb;
}


@media (max-width: 768px) {
    .chat-section {
        padding: 1rem 0;
    }
    .chat-container {
        min-height: 90vh;
        margin: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
    .message-bubble {
        max-width: 90%;
    }
}

/* --- 1. Mobile Logo Centering --- */
@media (max-width: 991px) { /* Use 991px (Bootstrap's lg breakpoint) to match nav collapse */
    .main-header {
        flex-wrap: wrap;
        justify-content: center; /* Center items for a cleaner fallback */
    }

    .main-header .logo {
        width: 100%;             /* Logo takes full width */
        text-align: center;      /* Center the logo */
        order: -1;               /* Move it to the top */
        margin-bottom: 10px;
    }

    .main-header .search-bar-wrapper {
        order: 2; /* Move search below icons */
        width: 100%;
        margin-top: 10px;
    }
}