:root {
    --primary-color: #8E6E53;
    /* Gold/Bronze like Lajree */
    --secondary-color: #2C2C2C;
    --text-color: #333;
    --light-bg: #F9F9F9;
    --white: #FFFFFF;
    --border-color: #E5E5E5;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
}

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

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

/* Auth Pages (Login/Register) Styles */
.auth-body {
    background: #fdfbf9;
    /* creamy/off-white background */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-container {
    background: var(--white);
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 480px;
    border: 1px solid rgba(142, 110, 83, 0.1);
}

.auth-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    color: var(--primary-color);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.auth-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 0.9rem;
}

.auth-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: all 0.3s;
    outline: none;
    font-family: inherit;
}

.auth-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(142, 110, 83, 0.1);
}

.auth-footer {
    text-align: center;
    margin-top: 25px;
    border-top: 1px solid #f0f0f0;
    padding-top: 25px;
    color: #666;
}

@media (max-width: 480px) {
    .auth-container {
        padding: 30px 20px;
    }

    .auth-title {
        font-size: 1.5rem;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

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

a:hover {
    color: var(--primary-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-bar {
    background: var(--secondary-color);
    color: var(--white);
    text-align: center;
    padding: 5px 0;
    font-size: 0.8rem;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    position: relative;
}

.logo a {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    /* Slightly smaller base size */
    font-weight: bold;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.nav-menu {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-link {
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
}

/* Dropdown Menu (Desktop) */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    list-style: none;
    min-width: 200px;
    z-index: 1000;
    padding: 10px 0;
    text-align: left;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 8px 15px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.9rem;
    color: #666;
}

.dropdown-menu li a:hover {
    background: var(--light-bg);
    color: var(--primary-color);
}

/* Header Icons */
.header-icons {
    display: flex;
    gap: 20px;
}

/* Hamburger Menu (Hidden by default) */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--secondary-color);
    transition: all 0.3s ease;
}

/* Hero Section */
.hero {
    background: url('../images/hero-bg.jpg') center/cover no-repeat;
    /* Placeholder */
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 0 20px;
    /* Add padding for mobile */
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background: var(--primary-color);
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.btn:hover {
    background: #7a5c43;
}

/* Sections */
.section-title {
    text-align: center;
    margin: 60px 0 40px;
    font-size: 2.5rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    margin: 15px auto 0;
}

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

.product-card {
    border: 1px solid transparent;
    transition: all 0.3s;
}

.product-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.product-info {
    padding: 15px;
    text-align: center;
}

.product-category {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
}

.product-title {
    font-size: 1.1rem;
    margin: 5px 0;
}

.product-price {
    font-size: 1.1rem;
    font-weight: 700;
}

.original-price {
    font-size: 0.9rem;
    color: #ff4d4d;
    /* Red color for strikeout */
    text-decoration: line-through;
    margin-right: 8px;
    font-weight: 400;
}

.offer-price {
    color: var(--primary-color);
    font-weight: 700;
}

/* Footer */
footer {
    background: var(--secondary-color);
    color: #dfdfdf;
    padding: 80px 0 40px;
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-title {
    color: var(--white);
    margin-bottom: 25px;
    font-size: 1.2rem;
    position: relative;
    padding-bottom: 10px;
    display: inline-block;
    /* Ensure underline is relative to text */
}

.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--primary-color);
}

.footer-col p {
    line-height: 1.8;
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
}

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

.footer-links li a {
    color: #aaa;
    transition: color 0.3s, padding-left 0.3s;
}

.footer-links li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: #444;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

.social-links a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

/* Newsletter Styles */
.newsletter-form {
    margin-top: 20px;
}

.newsletter-input-group {
    display: flex;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
}

.newsletter-input-group input {
    flex: 1;
    border: none;
    padding: 10px 15px;
    outline: none;
    font-size: 0.9rem;
    width: 100%;
}

.btn-subscribe {
    background: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.btn-subscribe:hover {
    background: #7a5c43;
    /* Darker shade of primary */
}

.footer-bottom {
    border-top: 1px solid #444;
    padding-top: 30px;
    text-align: center;
}

.copyright {
    color: #888;
    font-size: 0.85rem;
}

.copyright strong {
    color: var(--primary-color);
}

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

@media (max-width: 768px) {
    footer {
        padding: 50px 0 30px;
        text-align: center;
    }

    .footer-title {
        display: inline-block;
        text-align: center;
        margin-bottom: 25px;
        position: relative;
    }

    .footer-title::after {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 15px;
    }

    .about-col,
    .newsletter-col {
        grid-column: span 2;
        text-align: center;
    }

    .links-col {
        grid-column: span 1;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .newsletter-input-group {
        flex-direction: column;
        background: transparent;
        padding: 0;
        gap: 10px;
        max-width: 400px;
        margin: 0 auto;
    }

    .newsletter-input-group input {
        background: #fff;
        border-radius: 5px;
        text-align: center;
        border: 1px solid #ddd;
        padding: 12px;
    }

    .btn-subscribe {
        width: 100%;
        max-width: 180px;
        padding: 12px;
        margin: 0 auto;
        background: var(--primary-color);
        color: white;
    }

    .footer-links li a:hover {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .footer-title {
        font-size: 1.1rem;
    }
}

/* Responsive Table */
.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

/* MEDIA QUERIES FOR MOBILE RESPONSIVENESS */

@media (max-width: 992px) {
    .container {
        padding: 0 15px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero {
        height: 500px;
    }
}

@media (max-width: 768px) {

    /* Header & Navigation */
    .main-header.container {
        padding-right: 15px;
        /* Balanced padding for mobile */
    }

    .main-header {
        display: flex;
        align-items: center;
        padding: 5px 0;
        position: relative;
        min-height: 60px;
    }

    .menu-toggle {
        display: flex;
        margin-right: auto;
        z-index: 10;
    }

    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        width: auto;
    }

    .logo img {
        max-height: 45px;
        /* Control logo height on mobile */
        display: block;
    }

    .header-icons {
        display: flex;
        gap: 12px;
        z-index: 10;
        align-items: center;
        margin-left: auto;
    }

    .main-header nav {
        position: absolute;
        width: 100%;
        top: 100%;
        left: 0;
        z-index: 999;
    }

    .nav-menu {
        background: var(--white);
        flex-direction: column;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        gap: 15px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        display: none;
    }

    .nav-menu.active {
        display: flex;
    }

    /* Mobile Dropdown Styling */
    .dropdown {
        width: 100%;
    }

    .dropdown-menu {
        display: none;
        flex-direction: column;
        background: #f9f9f9;
        width: 100%;
        padding: 0;
        box-shadow: none;
        position: static;
        text-align: center;
    }

    .dropdown.active .dropdown-menu {
        display: flex;
    }

    .dropdown-menu li {
        border-bottom: 1px solid #eee;
    }

    .dropdown-menu li a {
        padding: 10px;
        display: block;
        font-size: 0.85rem;
    }

    /* Hero */
    .hero {
        height: 400px;
        /* On mobile, we might want to ensure the image is more visible.
           'cover' crops. 'contain' leaves space.
           Let's stick to cover but maybe center it differently or allow height to auto?
           No, auto height needs content.
           Let's try '100vw' width reference?
           Actually, the user says "image not fit".
           If it's a banner with text on it, 'cover' is bad.
           If it involves text overlay (which my code does), then 'cover' is usually fine, but the user might be referring to the aspect ratio.
           I will try to optimize the background position or size.
        */
        background-position: center top;
        /* Focus on faces/top part usually */
    }

    /* Ensure the slider images also respect this if they are using 'slider-container' style in index.php 
       (The inline styles in index.php override this, I need to fix index.php too for that).
    */

    .hero-title {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem !important;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    /* Typography */
    .section-title {
        font-size: 2rem;
        margin: 40px 0 30px;
    }

    /* Grid */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on mobile */
        gap: 15px;
    }

    .product-image img {
        height: 250px;
        /* Smaller images */
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        /* Stack footer columns */
        text-align: center;
        gap: 20px;
    }

    footer {
        padding: 40px 0 20px;
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 2, 1fr;
        /* Keep 2 columns for "Lajree" look, they surely have grid. */
        gap: 10px;
    }

    .logo a {
        font-size: 1.5rem;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .product-image img {
        height: 180px;
        /* Further reduce for small screens */
    }
}

/* Utility for mobile visibility */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
}

/* Product Detail Page - Consolidated */
.product-detail-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.product-gallery {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.main-image-container {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    aspect-ratio: 3/4;
}

.main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.3s;
}

@media (max-width: 992px) {
    .product-detail-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .product-page-container {
        margin-top: 20px !important;
        margin-bottom: 30px !important;
    }

    .product-detail-info h1 {
        font-size: 1.8rem !important;
        text-align: center;
    }

    .product-detail-info {
        text-align: center;
        min-width: 0 !important;
    }

    .main-image-container {
        aspect-ratio: auto !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 8px;
    }

    .main-image-container img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
}

/* Marquee Animation */
.marquee-container {
    background: var(--primary-color);
    color: var(--white);
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 0;
    font-size: 0.9rem;
    position: relative;
    z-index: 1001;
}

.marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

/* Shop By Fabric (Icons/Cards) */
.fabric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    text-align: center;
}

.fabric-card {
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 8px;
    transition: all 0.3s;
}

.fabric-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.fabric-icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* Shop By Color (Circles) */
.color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.color-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 2px solid transparent;
    transition: transform 0.2s;
}

.color-item:hover .color-circle {
    transform: scale(1.1);
    border-color: var(--primary-color);
}

/* Shop By Price (Buttons) */
.price-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.price-btn {
    padding: 10px 25px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.3s;
}

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

/* Occasion Grid */
.occasion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.occasion-card {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
    display: block;
}

.occasion-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.occasion-card:hover img {
    transform: scale(1.1);
}

.occasion-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

/* Mobile Accordion Styles */
.mobile-toggle-icon {
    display: none;
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .section-title {
        margin: 10px 0 !important;
        font-size: 1.5rem !important;
        text-align: left !important;
    }

    .section-title::after {
        display: none;
        /* Hide the underline */
    }

    .mobile-toggle-icon {
        display: block;
    }

    .section-header.active .mobile-toggle-icon {
        transform: rotate(180deg);
    }

    .section-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
}

/* Global Image Responsiveness Fix */
img {
    max-width: 100%;
    height: auto;
}

/* Modern Pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
}

.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--secondary-color);
    font-weight: 600;
    transition: all 0.3s ease;
}

.pagination-link:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(142, 110, 83, 0.2);
}

.pagination-link.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff !important;
}

.pagination-link.disabled {
    pointer-events: none;
    opacity: 0.5;
    background: #f5f5f5;
}

.pagination-info {
    font-size: 0.9rem;
    color: #666;
    margin-right: 15px;
}

/* =========================================
   Cart Page Mobile Responsiveness Fix
   ========================================= */
@media (max-width: 768px) {

    /* Force table to not behave like a table */
    .cart-table,
    .cart-table tbody,
    .cart-table tr,
    .cart-table td {
        display: block;
        width: 100%;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .cart-table thead {
        display: none;
    }

    .cart-table tr {
        margin-bottom: 20px;
        border: 1px solid #eee;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        background: #fff;
        padding: 15px;
        position: relative;
        /* For absolute positioning of delete button if needed */
    }

    .cart-table td {
        text-align: right;
        padding: 10px 0;
        border-bottom: 1px solid #f9f9f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cart-table td:last-child {
        border-bottom: 0;
    }

    /* Add labels before the content using data-label attribute */
    .cart-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.85rem;
        color: #777;
    }

    /* Special handling for the Product cell (Image + Text) */
    .cart-table td.product-cell {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 15px;
    }

    .cart-table td.product-cell::before {
        display: none;
        /* Hide label for product cell as image is self-explanatory */
    }

    .cart-table td.product-cell img {
        width: 80px !important;
        height: 100px !important;
        flex-shrink: 0;
    }

    /* Special handling for Delete cell */
    .cart-table td.delete-cell {
        justify-content: center;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }

    .cart-table td.delete-cell a {
        width: 100%;
        display: block;
        padding: 10px;
        background: #fff5f5;
        border-radius: 4px;
        color: #dc3545 !important;
    }

    /* Quantity alignment */
    .cart-table td[data-label="Quantity"]>div {
        margin-left: auto;
        /* Push quantity controls to right */
    }
}