/* Custom CSS variables and base styles from index.html for consistency */
:root {
    --color-primary-dark: #222222; /* Dark text/accents (from product-html) */
    --color-text-light: #FFFFFF; /* (from product-html) */
    --color-accent-sale: #84cc16; /* Lime color for SALE badge (Tailwind lime-500) (from product-html) */
    --color-gray-background: #F8F8F8; /* Light gray for main background (from product-html) */
    --color-card-background: #FFFFFF; /* White for product cards (from product-html) */
    --color-border-light: #E0E0E0; /* (from product-html) */
    --color-text-gray: #666666; /* (from product-html) */
    --color-text-dark-gray: #333333; /* (from product-html) */

    /* New variables from dynamic-action-theme for similar products section */
    --color-dynamic-primary-accent: #222222; /* Changed to Black for text and button */
    --color-dynamic-secondary-accent: #39FF14; /* Lime Green (for action icons background) */
    --color-dynamic-card-background: #F5F5F5; /* Light Gray for dynamic cards */
    --color-dynamic-text-dark: #222222; /* Dark Charcoal for dynamic card text */
}

body {
    font-family: 'Inter', sans-serif; /* Default body font to Inter */
    background-color: var(--color-gray-background);
    color: var(--color-text-dark-gray);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
}
/* pro.css */

/* --- Stock Progress Bar Styles --- */

/* Style for the size button when active (optional, based on your existing styling) */
.size-tag.active {
    background-color: var(--color-dynamic-secondary-accent, #39FF14); 
    color: var(--color-dynamic-primary-accent, #222222);
    border: 1px solid var(--color-dynamic-secondary-accent, #39FF14);
    font-weight: bold;
}


.progress-bar-wrapper {
    background-color: #e0e0e0; /* Light gray background for the track */
    border-radius: 4px;
    /* CHANGE THIS VALUE TO MAKE IT THINNER */
    height: 8px; 
    /* ------------------------------------- */
    overflow: hidden;
    margin-top: 5px;
}

.progress-bar {
    height: 100%;
    width: 0; 
    transition: width 0.4s ease-in-out, background-color 0.3s;
    border-radius: 4px;
}

/* Color codes based on stock level */
.progress-bar.high-stock {
    background-color: #10b981; /* Green: High stock (>75%) */
}

.progress-bar.medium-stock {
    background-color: #f59e0b; /* Orange: Medium stock (25% - 75%) */
}

.progress-bar.low-stock {
    background-color: #ef4444; /* Red: Low stock (<25%) */
}

/* Utility to hide the container initially */
.hidden {
    display: none !important;
}
/* Blur effect for background when overlays are active */
body.search-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    backdrop-filter: blur(5px); /* Apply blur */
    z-index: 90; /* Below overlays but above regular content */
    transition: backdrop-filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}


/* Custom Font Families for our Signature Style */
.font-inter {
    font-family: 'Inter', sans-serif;
}
.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}
/* Font for dynamic product cards */
.font-heading {
    font-family: 'Oswald', 'Bebas Neue', sans-serif; /* Headings: Impactful sans-serif */
    text-transform: uppercase;
}

/* Fixed Header Styles */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 30; /* Above main content */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.fanaacs-logo-img {
    height:   1.5rem; /* Adjust height as needed */
    width: auto; /* Maintain aspect ratio */
}
@media (min-width: 768px) {
    .fanaacs-logo-img {
        height: 3rem; /* Slightly larger on desktop */
    }
}

.header-top-row {
    padding: 1rem 1rem; /* py-4 px-4 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0; /* Subtle separator */
}

.fanaacs-logo-text {
    font-family: 'Montserrat', sans-serif; /* Changed to Montserrat */
    font-weight: 800; /* Extra-bold for brand name */
    letter-spacing: 0.05em;
    color: var(--color-primary-dark);
    font-size: 1.5rem;
}
.fanaacs-logo-subtext {
    font-family: 'Inter', sans-serif; /* Changed to Inter */
    font-size: 0.5rem;
    font-weight: 500; /* Medium for subtext */
    color: var(--color-text-dark-gray);
    letter-spacing: 0.025em;
    display: block;
    line-height: 0.8;
}

main {
    /* INCREASED padding-top to 7rem (112px) to clear any fixed header height. */
    padding-top: 7rem; 
    padding-bottom: 5rem; 
}
@media (min-width: 768px) {
    main {
        /* Apply the same guaranteed clearance for desktop */
        padding-top: 7rem;
        padding-bottom: 3rem; 
    }
}
/* Product Detail Specific Styles */
.product-detail-container {
    background-color: var(--color-card-background);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Removed horizontal padding from CSS, now handled by Tailwind px-4 md:px-8 on the element */
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    /* Removed max-width and margin-left/right as Tailwind container handles it */
}

.product-image {
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-title {
    font-family: 'Montserrat', sans-serif; /* Changed to Montserrat */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* Semi-bold for product title */
    color: var(--color-primary-dark);
    margin-bottom: 0.5rem;
}

.product-price {
    font-family: 'Montserrat', sans-serif; /* Changed to Montserrat */
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* Bold for price */
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
}
.product-price .line-through {
    font-family: 'Inter', sans-serif; /* Keep Inter for strikethrough price */
    color: var(--color-text-gray);
    font-weight: 400;
    font-size: 1.125rem; /* text-lg */
    margin-left: 0.5rem;
}

.review-tag {
    font-family: 'Inter', sans-serif; /* Changed to Inter */
    background-color: #e5e7eb; /* Tailwind gray-200 */
    color: #4b5563; /* Tailwind gray-600 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* Medium for review tag */
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* Pill shape */
    display: inline-block;
    margin-bottom: 1rem;
}

.product-description {
    font-family: 'Inter', sans-serif; /* Changed to Inter */
    font-size: 0.95rem;
    color: var(--color-text-gray);
    line-height: 1.6;
    font-weight: 400; /* Regular for body text */
}
.product-description ul {
    margin-top: 0.75rem;
    padding-left: 1.25rem;
}
.product-description li {
    margin-bottom: 0.25rem;
}

.size-selector .size-tag {
    font-family: 'Inter', sans-serif;
    background-color: white;
    border: 1px solid var(--color-border-light);
    color: var(--color-text-dark-gray);
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
    /* CHANGE THIS LINE */
    border-radius: 1rem; /* A more pronounced roundness for a soft "lozenge" shape */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    min-width: 3rem;
    text-align: center;
    font-weight: 500;
}
.size-selector .size-tag:hover {
    background-color: #f3f4f6;
}
.size-selector .size-tag.active {
    /* CHANGE THESE LINES */
    background-color: #333333; /* A dark charcoal gray */
    color: var(--color-text-light); /* Keeps the text white */
    border-color: #333333;
}

.quantity-selector {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    overflow: hidden;
    width: 120px; /* Fixed width for quantity control */
    display: flex;
}
.quantity-selector button {
    background-color: #f9fafb;
    color: #4b5563;
    transition: background-color 0.2s;
    /* --- NEW CODE --- */
    width: 40px; /* Fixed width for buttons */
    height: 40px; /* Fixed height for buttons */
    border: none; /* Remove any border that might affect width */
    display: flex;
    justify-content: center; /* Center the +/- text horizontally */
    align-items: center; /* Center the +/- text vertically */
    padding: 0; /* Remove padding for precise control */
    font-size: 1.25rem;
    font-weight: 600;
}
.quantity-selector button:hover {
    background-color: #e0e0e0;
}
.quantity-selector input {
    font-family: 'Inter', sans-serif;
    text-align: center;
    border: none;
    outline: none;
    /* --- NEW CODE --- */
    width: 40px; /* Fixed width for input */
    height: 40px; /* Fixed height to match buttons */
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text-dark-gray);
    -moz-appearance: textfield;
}
.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Action Buttons Section */
.action-buttons-section {
    padding: 1rem 0; /* Padding for the section */
    margin-top: 2rem; /* Space from above content */
}
.action-buttons-section .add-to-cart-btn {
    font-family: 'Montserrat', sans-serif;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    width: 100%;
    transition: background-color 0.2s ease-in-out;
    color: var(--color-text-light);
    background-color: black; /* Default black */
}
.action-buttons-section .add-to-cart-btn:hover {
    background-color: #333333;
}
.action-buttons-section .buy-now-btn {
    font-family: 'Montserrat', sans-serif;
    background-color: #10b981; /* Tailwind emerald-500 */
    color: var(--color-text-light);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    width: 100%;
    transition: background-color 0.2s ease-in-out;
}
.action-buttons-section .buy-now-btn:hover {
    background-color: #059669; /* Darker emerald */
}
.action-buttons-section .add-to-wishlist-btn {
    font-family: 'Montserrat', sans-serif;
    background-color: #e5e7eb; /* Tailwind gray-200 */
    color: #4b5563; /* Tailwind gray-600 */
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    width: 100%;
    transition: background-color 0.2s ease-in-out;
}
.action-buttons-section .add-to-wishlist-btn:hover {
    background-color: #d1d5db; /* Darker gray */
}


/* Mobile Bottom Navigation (Copied from prev.html) */
.mobile-nav {
    background-color: var(--color-card-background);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05); /* Subtle shadow upwards */
    z-index: 40;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0; /* py-2 */
}
.mobile-nav a, .mobile-nav button { /* Apply styles to buttons too */
    font-family: 'Inter', sans-serif;
    color: var(--color-text-gray);
    transition: color 0.2s ease-in-out;
    font-weight: 400; /* Regular for nav items */
    display: flex; /* Make buttons flex for icon+text vertical alignment */
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1; /* Distribute space evenly */
}
.mobile-nav a.active,
.mobile-nav a:hover,
.mobile-nav button.active, /* Add active state for buttons */
.mobile-nav button:hover {
    color: var(--color-primary-dark);
}
.mobile-nav svg {
    margin-bottom: 0.25rem; /* mb-1 */
}


/* New Styles for Image Gallery, Zoom, Trust Indicators, Reviews, Alpine.js Toggles */
.thumbnail-image {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.thumbnail-image.active {
    border-color: var(--color-primary-dark);
}
.zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.zoom-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
.close-zoom {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}
.trust-indicator-item {
    font-family: 'Inter', sans-serif; /* Changed to Inter */
    background-color: white; /* Changed to white */
    border: 1px solid var(--color-border-light); /* Added border */
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #4b5563;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03); /* Subtle shadow */
    font-weight: 500; /* Medium weight for trust indicators */
}
.trust-indicator-item svg {
    color: var(--color-primary-dark); /* Changed icon color */
    width: 1.5rem;
    height: 1.5rem;
}
.star-rating svg {
    color: #fbbf24; /* Tailwind amber-400 */
    width: 1rem;
    height: 1rem;
}
.review-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    padding: 1rem;
    margin-bottom: 1rem;
}
.review-card p {
    font-family: 'Inter', sans-serif; /* Changed to Inter */
    font-weight: 400; /* Regular for review text */
}
.review-card p.font-semibold { /* For user names in reviews */
    font-family: 'Montserrat', sans-serif; /* Changed to Montserrat */
    font-weight: 600; /* Semi-bold for review author names */
}
.qa-item {
    background-color: #f9fafb; /* Tailwind gray-50 */
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.qa-question {
    font-family: 'Montserrat', sans-serif; /* Changed to Montserrat */
    font-weight: 600; /* Semi-bold for Q&A questions */
    color: #2d3748;
}
.qa-answer {
    font-family: 'Inter', sans-serif; /* Changed to Inter */
    color: #4a5568;
    margin-top: 0.5rem;
    font-weight: 400; /* Regular for Q&A answers */
}

/* Headings within expandable sections */
.product-info h3.font-medium {
    font-family: 'Montserrat', sans-serif; /* Changed to Montserrat */
    font-weight: 600; /* Semi-bold for these headings */
}
.product-info h3.text-xl.font-bold { /* For Customer Reviews and Q&A section titles */
    font-family: 'Montserrat', sans-serif; /* Changed to Montserrat */
    font-weight: 700; /* Bold for these section titles */
}

/* Similar Products Section specific styles */
.similar-products-container {
    /* For horizontal scrolling */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    padding-bottom: 1rem; /* Space for scrollbar if it appears */
}
.similar-products-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}

.similar-products-flex-wrapper {
    display: flex;
    gap: 0.5rem; /* Reduced gap */
    padding: 0; /* Removed padding */
    /* Ensures items don't wrap and enables horizontal scroll */
    flex-wrap: nowrap;
}

.product-card-dynamic {
    background-color: var(--color-dynamic-card-background);
    /* Removed border-radius for a less "boxed" look */
    overflow: hidden;
    /* Removed box-shadow */
    position: relative;
    flex-shrink: 0; /* Prevent cards from shrinking */
    width: 16rem; /* Fixed width for cards in scrollable view (approx w-64) */
    max-width: 100%; /* Ensure responsiveness on smaller screens */
}

.product-card-dynamic::before {
    /* Removed gradient */
    content: none;
}

.product-card-dynamic .product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Make image square */
    background-color: white; /* White background for image area */
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card-dynamic .product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-dynamic .sale-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: black; /* Changed to black */
    color: var(--color-text-light); /* Changed to white */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    border-radius: 9999px; /* Changed to pill shape */
    text-transform: uppercase;
}

.product-card-dynamic .action-icons-wrapper {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
}
.product-card-dynamic .action-icons-wrapper button {
    background-color: rgba(255,255,255,0.8); /* white/80 */
    color: var(--color-dynamic-text-dark); /* Dark text */
    padding: 0.25rem; /* p-1 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* shadow-md */
    transition: transform 0.2s ease-in-out;
    width: 1.75rem; /* w-7 */
    height: 1.75rem; /* h-7 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem; /* text-sm */
    font-weight: 700; /* font-bold */
}
.product-card-dynamic .action-icons-wrapper button:hover {
    transform: scale(1.05);
}

.product-card-dynamic .card-content {
    padding: 1rem; /* p-4 */
    position: relative;
}

.product-card-dynamic .product-name-dynamic {
    font-family: 'Oswald', 'Bebas Neue', sans-serif; /* font-heading */
    font-size: 1.125rem; /* text-lg */
    color: var(--color-dynamic-text-dark);
    margin-bottom: 0.25rem; /* mb-1 */
    white-space: nowrap; /* truncate */
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase; /* from font-heading */
}

.product-card-dynamic .price-info {
    color: #4b5563; /* gray-700 */
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 0.5rem; /* mb-2 */
}
.product-card-dynamic .price-info .original-price {
    text-decoration: line-through;
    color: #6b7280; /* gray-500 */
    margin-right: 0.5rem; /* mr-2 */
}
.product-card-dynamic .price-info .sale-price {
    color: var(--color-dynamic-primary-accent); /* Now black */
    font-weight: 600; /* font-semibold */
    font-size: 1rem; /* text-base */
}

.product-card-dynamic .size-options {
    display: flex;
    gap: 0.25rem; /* space-x-1 */
    margin-bottom: 0.75rem; /* mb-3 */
}
.product-card-dynamic .size-options span {
    border: 1px solid #d1d5db; /* gray-300 */
    color: #4b5563; /* gray-700 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    border-radius: 0.125rem; /* rounded-sm */
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.product-card-dynamic .size-options span:hover {
    border-color: var(--color-dynamic-primary-accent);
    color: var(--color-dynamic-primary-accent);
}

.product-card-dynamic .add-to-cart-circle-btn {
    position: absolute;
    bottom: 1rem; /* bottom-4 */
    right: 1rem; /* right-4 */
    background-color: var(--color-dynamic-primary-accent); /* Now black */
    color: var(--color-text-light); /* text-text-light */
    padding: 0.5rem; /* p-2 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* shadow-md */
    transition: transform 0.2s ease-in-out;
    width: 2.25rem; /* w-9 */
    height: 2.25rem; /* h-9 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card-dynamic .add-to-cart-circle-btn:hover {
    transform: scale(1.1);
}

/* Cart Sidebar Styles */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen */
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease-in-out;
    z-index: 100; /* Above everything else */
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.cart-sidebar.open {
    right: 0;
    /* For mobile, cover full width */
    width: 100%;
}

@media (min-width: 768px) {
    .cart-sidebar.open {
        /* For desktop, cover 3/5 of the page */
        width: 60%; /* 3/5 of 100% */
    }
}
@media (min-width: 1024px) {
    .cart-sidebar.open {
        /* For desktop, cover 3/5 of the page */
        width: 40%; /* Adjust for larger screens if 3/5 is too wide */
    }
}

.cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.cart-item img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.25rem;
    margin-right: 1rem;
}

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

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-item-quantity button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cart-item-quantity button:hover {
    background-color: #e0e0e0;
}
.cart-item-remove {
    /* Pushes the button to the far right */
    
    /* Set a fixed size and make it round */
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px; /* Perfectly round */
    
    /* Set the button's background to a solid red */
    background-color: #ef4444 !important; 
    
    /* Center the SVG icon */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Spacing and cursor */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.cart-item-remove:hover {
    background-color: #dc2626 !important; /* Slightly darker red on hover */
    transform: scale(1.05); /* Slight scale effect */
}

.cart-item-remove svg {
    /* Set the icon color to white to contrast with the red background */
    color: white !important; 
    width: 1.2rem; /* Ensure the SVG has a set size */
    height: 1.2rem;
        pointer-events: none; 

}
/* Message Box for alerts (generic) */
.message-box-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Highest z-index for any modal/overlay */
    opacity: 0; /* Start hidden for transitions */
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.message-box-overlay.open {
    opacity: 1;
    visibility: visible;
}

.message-box {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-align: center;
    max-width: 80%;
    transform: translateY(-20px); /* Start slightly up for animation */
    transition: transform 0.3s ease-in-out;
}

.message-box-overlay.open .message-box {
    transform: translateY(0); /* Slide into place */
}

.message-box button {
    margin-top: 15px;
    padding: 8px 15px;
    background-color: var(--color-primary-dark);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* NEW: Search Overlay Styles (Copied from prev.html's style.css) */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 99; /* Below generic message boxes, but above main content */
    display: flex;
    flex-direction: column;
    padding: 1rem;
    transform: translateY(-100%); /* Start above screen */
    transition: transform 0.3s ease-in-out;
}

.search-overlay.active {
    transform: translateY(0%); /* Slide down */
}

.search-overlay-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.search-overlay-input {
    flex-grow: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    outline: none;
    font-family: 'Inter', sans-serif;
}
.search-overlay-input::placeholder {
    color: #9ca3af;
}

.search-overlay-close-btn {
    background: none;
    border: none;
    color: #4b5563;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}
.search-overlay-close-btn:hover {
    background-color: #f3f4f6;
}

.popular-searches-container {
    margin-bottom: 1.5rem;
}
.popular-searches-container span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5563;
    display: block;
    margin-bottom: 0.5rem;
}
.popular-searches-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.popular-searches-buttons button {
    background-color: #e5e7eb;
    color: #4b5563;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s;
}
.popular-searches-buttons button:hover {
    background-color: #d1d5db;
}

.search-results-container {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Gap between list items */
    padding-bottom: 1rem;
}

/* Style for product cards within search results - adjusted for list view */
.search-results-container .product-card {
    background-color: white; /* Reverted to white background */
    border-radius: 0.5rem; /* Reverted to rounded corners */
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); /* Reverted to subtle shadow */
    display: flex;
    align-items: center;
    padding: 0.5rem; /* Re-added padding for internal spacing */
    overflow: hidden;
    text-align: left;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    width: 100%;
    border-bottom: none; /* Removed border-bottom, relying on gap for separation */
    flex-shrink: 0; /* IMPORANT: Prevent cards from shrinking horizontally */
}

.search-results-container .product-card:hover {
    transform: translateY(-2px);
}

.search-results-container .product-card .product-image-interactive {
    position: relative;
    width: 60px; /* Fixed width for the image */
    height: 60px; /* Fixed height for the image */
    flex-shrink: 0; /* Prevent image from shrinking */
    margin-right: 0.75rem; /* Space between image and text */
    padding-bottom: 0;
    overflow: hidden; /* Ensures sale badge is clipped correctly */
}

.search-results-container .product-card .product-image-interactive img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem; /* Slightly rounded corners for image */
}

/* Sale badge styling for search results (re-enabled and adjusted) */
.search-results-container .product-card .sale-badge {
    display: block; /* Make it visible */
    position: absolute; /* Position relative to .product-image-interactive */
    top: 0; /* Stick to the top edge of the image container */
    left: 0; /* Stick to the left edge of the image container */
    font-size: 0.6rem;
    font-weight: 600;
    background-color: var(--color-accent-sale);
    color: var(--color-text-light);
    padding: 0.1rem 0.3rem; /* Small padding */
    border-radius: 0; /* Force non-round/square corners */
    z-index: 10; /* Ensure it's above the image */
    text-transform: uppercase;
}

/* Hide action icons for search results to match the list view in Capture.PNG */
.search-results-container .product-card .action-icons {
    display: none;
}

.search-results-container .product-card .p-4 {
    padding: 0; /* Keep minimal padding here */
    flex-grow: 1; /* Allow to grow */
    flex-basis: 0; /* Important: Allows the flex item to shrink down to 0, and then grow as needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* Crucial for preventing compression in flex containers */
}

.search-results-container .product-card .product-name-multiline {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap; /* Ensure text stays on one line */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show ellipsis for truncated text */
    -webkit-line-clamp: 1; /* Fallback for multi-line ellipsis, though nowrap overrides this for single line */
    min-height: auto;
}

.search-results-container .product-card .text-sm.text-gray-600.mb-2 {
    font-size: 0.85rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.search-results-container .product-card .sizes-container {
    display: none; /* Hide sizes in search results list view */
}

.more-results-btn {
    width: 100%;
    background-color: var(--color-primary-dark);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    margin-top: 1rem;
    transition: background-color 0.2s;
}
.more-results-btn:hover {
    background-color: #333333;
}


/* Product Detail Modal (already present in item.php, but ensuring styles are comprehensive) */
.product-detail-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 990; /* Below search overlay for now, can be adjusted */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.product-detail-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.product-detail-modal-content {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

.product-detail-modal-overlay.open .product-detail-modal-content {
    transform: scale(1);
}

.product-detail-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
}
.product-detail-modal-close:hover {
    color: #333;
}

.product-detail-modal-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.modal-sizes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.modal-size-tag {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #4b5563;
    padding: 0.4rem 0.8rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.go-to-product-page-btn {
    background-color: var(--color-primary-dark);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    margin-top: 1rem;
    transition: background-color 0.2s;
    width: auto; /* Allow button to size based on content */
    display: inline-block; /* For proper padding and margin */
    text-decoration: none; /* If it's an anchor tag */
}
.go-to-product-page-btn:hover {
    background-color: #333333;
}
html body main {
    /* Set a generous, guaranteed clearance (112px) for both desktop and mobile */
    padding-top: 4rem !important; 
    padding-bottom: 5rem; 
}
@media (min-width: 768px) {
    html body main {
        padding-top: 7rem !important;
        padding-bottom: 3rem; 
    }
}