/* CSS Variables */
:root {
  --announcement-height: 36px;
  --navbar-height: 56px; /* approximate actual navbar height */
}

:root {
    --saffron: #FF8C00;
    --saffron-light: #FFA500;
    --saffron-gold: #FFBF00;
    --green: #2E8B57;
    --green-light: #3CB371;
    --off-white: #FAF9F6;
    --dark-grey: #333333;
    --red: #FF4500;
    --alert-success: #d4edda;
    --alert-danger: #f8d7da;
    --alert-info: #d1ecf1;

    /* New Navbar Colors - Hindu devotional theme */
    --navbar-bg-start: #4A0E4E; /* Deep Plum */
    --navbar-bg-end: #7B1FA2;   /* Amethyst */
    --navbar-text-color: #F8F8F8; /* Near white */
    --navbar-hover-color: #FFD700; /* Gold */
    --navbar-border-color: #FFBF00; /* Golden Saffron */
}

/* Combined style for Bootstrap modal backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.4) !important; /* Adjust darkness */
    opacity: 0.4 !important; /* Ensure compatibility */
    height: 100% !important; /* Example: Make it half the height of the viewport */
    /* If you choose a fixed pixel height, use this instead: */
    /* height: 300px !important; */

    /* Optional: Adjust position if not 100% height to center or place as desired */
    /* For example, to center a 50% height backdrop: */
    /* top: 25% !important; */
}
/* General Body and Typography */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--off-white);
    color: var(--dark-grey);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
    display: flex; /* Make body a flex container */
    flex-direction: column; /* Stack children vertically */
    min-height: 100vh; /* Ensure body takes at least full viewport height */


}

/* Custom Alert Styling */
/* Custom Alert Styling - MODIFIED */
.custom-alert {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 9999;
    padding: 5px 9px;
    border-radius: 0.625rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideInRight 0.5s forwards, fadeOut 0.5s 4.5s forwards;
    
}
/* New responsive rule for mobile devices */
@media (max-width: 576px) {
    .custom-alert {
        top: 67px;
        right: 0px;
        left: 10px; /* Make it stretch across the screen */
        min-width: unset; /* Remove the fixed minimum width */
        padding: 4px 7px; /* Slightly reduced padding */
    }
}
.custom-alert-message {
    margin-right: 15px;
    font-weight: 500;
}

.custom-alert.alert-success {
    background-color: var(--alert-success);
    color: #155724;
    border: 0.125rem solid;
    /* border-image: linear-gradient(to right, #28a745, #218838) 1; */
    opacity: 0.9; /* Added opacity */
}

.custom-alert.alert-danger {
    background-color: var(--alert-danger);
    color: #721c24;
    border: 0.125rem solid;
    border-image: linear-gradient(to right, #dc3545, #c82333) 1;
    opacity: 0.9; /* Added opacity */
}

.custom-alert.alert-info {
    background-color: var(--alert-info);
    color: #0c5460;
    border: 2px solid;
    border-image: linear-gradient(to right, #17a2b8, #138496) 1;
    opacity: 0.9; /* Added opacity */
}

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

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}


/* Navbar Styling */
.navbar {
    background: linear-gradient(to right, var(--navbar-bg-start), var(--navbar-bg-end));
    border-bottom: 2px solid var(--navbar-border-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); /* Stronger shadow for depth */
    transition: top 0.4s ease-in-out, background 0.3s ease; /* Added top for floating effect */
    padding-top: 2px !important;    /* Shrinks the vertical height */
    padding-bottom: 2px !important;
    min-height: 45px !important;
}
.navbar-brand {
    color: var(--navbar-text-color) !important;
    font-size: 1.1rem !important;   /* Was 1.5rem */
    font-weight: 700; /* Bolder */
    letter-spacing: 0.05em; /* Slight letter spacing */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4); /* More pronounced shadow */
    transition: color 0.3s ease;
}

.navbar-brand:hover {
    color: var(--navbar-hover-color) !important; /* Gold on hover */
}

.navbar-nav .nav-link {
    color: var(--navbar-text-color) !important;
    font-weight: 600; /* Slightly bolder links */
    font-size: 0.8rem !important;   /* Was 0.95rem */
    transition: color 0.3s ease, transform 0.2s ease, text-shadow 0.3s ease;
    padding: 0.2rem 0.5rem !important;
    position: relative; /* For underline effect */
    /* Embossed text effect */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3), -1px -1px 2px rgba(255,255,255,0.1);
}

.navbar-nav .nav-link:hover {
    color: var(--navbar-hover-color) !important;
    transform: translateY(-2px);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); /* Glowing effect on hover */
}

/* Underline effect on hover */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--navbar-hover-color);
    transition: width 0.3s ease-out;
}

.navbar-nav .nav-link:hover::after {
    width: 80%;
}

.navbar-nav .nav-item .btn-primary {
    background-color: var(--saffron) !important; /* Saffron for buttons */
    border-color: var(--saffron) !important;
    color: white !important;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 0.4rem 0.8rem; /* Compact button padding */
    font-weight: 600;
    margin-left: 0.5rem; /* Reduced margin for closer buttons */
}

.navbar-nav .nav-item .btn-primary:hover {
    background-color: var(--saffron-gold) !important; /* Golden Saffron on hover */
    border-color: var(--saffron-gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.navbar-nav .dropdown-menu {
    background-color: var(--off-white); /* Off-white dropdown background */
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem; /* More rounded dropdown */
}

.navbar-nav .dropdown-item {
    color: var(--dark-grey);
    padding: 0.75rem 1.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar-nav .dropdown-item:hover {
    background-color: var(--saffron); /* Saffron on hover */
    color: white;
}

/* ADD THIS NEW RULE FOR THE HAMBURGER ICON BORDER COLOR */
.navbar-toggler {
    border-color: var(--navbar-hover-color) !important; /* Gold border for the button */
}

/* ADD THIS NEW RULE FOR THE HAMBURGER ICON COLOR */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFD700' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Cart Badge */
#cart-count { /* Changed from #cart-total-quantity to #cart-count based on _base.html */
    background-color: var(--red); /* Orange-red for attention */
    font-size: 0.75em;
    padding: 0.3em 0.6em;
    border-radius: 50%;
    position: absolute;
    /* ADJUSTED: Bring the badge closer to the icon and above it */
    top: -8px;  /* Moved slightly higher */
    right: 40px; /* Crucially increased to pull it further left over the icon */
    transform: translate(50%, -50%); /* Still shifts it out by half its size from the new (top,right) point */
    display: none; /* Hidden by default, shown by JS */
    color: white;
    font-weight: bold;
    min-width: 20px; /* Ensure it's a circle even with single digit */
    text-align: center;
}
.nav-link.cart-icon-container {
    position: relative; /* Container for the badge */
    display: flex; /* Flex to center icon and badge */
    align-items: center;
    justify-content: center;
}

/* Search input styling */
.navbar .form-control {
    border-radius: 9999px; /* Pill shape */
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--navbar-text-color);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: all 0.3s ease;
    height: auto; /* Let padding define height */
    flex-grow: 1; /* Allow it to shrink if needed but still look good */
    max-width: 250px; /* Limit width on larger screens */
}

.navbar .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.navbar .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--navbar-hover-color);
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

.navbar .btn-outline-light {
    border-color: var(--navbar-text-color);
    color: var(--navbar-text-color);
    border-radius: 9999px; /* Pill shape */
    transition: all 0.3s ease;
    padding: 0.4rem 1rem; /* Adjusted for better button size */
    height: auto; /* Let padding define height */
}

.navbar .btn-outline-light:hover {
    background-color: var(--navbar-hover-color);
    color: var(--navbar-bg-start);
    border-color: var(--navbar-hover-color);
}



/* NEW: Styles for horizontally scrollable carousels */
#featured-artworks-carousel,
#all-products-carousel,
[id^="category-carousel-"] { /* This targets all category carousels */
    -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS */
    touch-action: pan-x pan-y; /* Allow both horizontal and vertical panning for free-form scroll */
    overflow-x: auto; /* Ensures horizontal scrolling */
    white-space: nowrap; /* Keeps items in a single line */
    scroll-behavior: smooth; /* Already there, good for buttons */
    /* REMOVED: scroll-snap-type property entirely to allow free-flowing scroll */
}

/* If you use scroll-snap, ensure direct children also snap */


.thumbnail-wrapper {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumbnail-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
}

.thumbnail-wrapper:hover img {
    transform: scale(1.05);
}

/* NEW/MODIFIED RULE: Ensure headings inside main content are properly spaced */
.main-content-area h1,
.main-content-area h2,
.main-content-area h3,
.main-content-area h4,
.main-content-area h5,
.main-content-area h6 {
    margin-top: 0; /* Important: Removes any default top margin that might be collapsing or causing issues */
    padding-top: 2rem; /* Adds explicit space above the heading content */
    margin-bottom: 1rem; /* Ensures consistent spacing below the heading */
}

/* If "Our Divine Collection" is specifically an h1, you can be more precise */
.main-content-area h1 {
    font-size: 2.5rem; /* Example: adjust font size if needed */
    margin-top: 0;
    padding-top: 2rem;
    margin-bottom: 1rem;
}

/* ... rest of your style.css ... */

/* Footer Styling */
.footer {
    background: linear-gradient(to left, var(--saffron), var(--saffron-light));
    color: var(--off-white);
    padding: 3rem 0;
    border-top: 2px solid var(--saffron-gold);
}

.footer h5 {
    color: var(--off-white);
    margin-bottom: 1rem;
    font-weight: 600;
}

.footer p, .footer li {
    color: var(--off-white);
    font-size: 0.95rem;
}

.footer a {
    color: var(--off-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--green);
}

.social-icons a {
    color: var(--off-white);
    font-size: 1.5rem;
    margin-right: 15px;
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-icons a:hover {
    color: var(--green);
    transform: scale(1.1);
}

/* General Button Styling */
.btn-primary {
    background-color: var(--saffron);
    border-color: var(--saffron);
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background-color: var(--saffron-light);
    border-color: var(--saffron-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-success {
    background-color: var(--green);
    border-color: var(--green);
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-success:hover {
    background-color: var(--green-light);
    border-color: var(--green-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-info:hover {
    background-color: #138496;
    border-color: #138496;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Card Styling */
.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card-header {
    background-color: #F0F0F0;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    color: var(--dark-grey);
}

/* Form Controls */
.form-control, .form-select {
    border-radius: 0.5rem;
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--saffron);
    box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25);
}

.form-control:disabled, .form-control[readonly] {
    background-color: #f5f5f5;
    opacity: 0.7;
}

/* Product Ratings */

/* Admin Dashboard Cards */
.card.bg-primary { background-color: var(--saffron) !important; }
.card.bg-success { background-color: var(--green) !important; }
.card.bg-info { background-color: #17a2b8 !important; }
.card.bg-warning { background-color: var(--saffron-gold) !important; color: var(--dark-grey) !important; }

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .navbar-nav {
        text-align: center;
        margin-top: 1rem;
        width: 100%; /* Ensure they take full width */
    }
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
    }
    .navbar-nav .nav-item .btn-primary {
        width: 80%; /* Buttons take 80% width in mobile */
        margin: 0.5rem auto; /* Center buttons */
    }
    /* Adjust search form for small screens */
    .navbar form.d-flex {
        flex-direction: column; /* Stack vertically */
        align-items: center; /* Center items in the column */
        width: 100%; /* Take full width */
        margin-top: 1rem;
        margin-bottom: 1rem; /* Added bottom margin for spacing */
    }
    .navbar form.d-flex .form-control {
        width: 90%; /* Input takes 90% width */
        margin-bottom: 0.5rem;
    }
    .navbar form.d-flex .btn-outline-light {
        width: 90%; /* Button takes 90% width */
    }
    /* Ensure the collapse is correctly managed for the hamburger menu */
    .navbar-collapse {
        flex-grow: 1; /* Allow it to take up space when expanded */
        padding-left: 1rem; /* Add padding to the collapsed menu content */
        padding-right: 1rem;
    }
}
/* New Styles for larger screens to align search and buttons */
@media (min-width: 992px) {
    /* The .navbar-collapse should handle the main distribution */
    .navbar-collapse {
        display: flex !important; /* Ensure it's flex on large screens */
        flex-grow: 1;
        justify-content: flex-end; /* Pushes content to the right */
        align-items: center;
        width: auto;
    }
    /* The me-auto and ms-auto classes in HTML now handle alignment, no custom margin here */
}

/* Responsive adjustment for footer */
@media (max-width: 576px) {
    .footer .row > div {
        margin-bottom: 1.5rem;
    }
}

.scroll-arrow {
  position: absolute;
  top: 45%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  padding: 0.6rem;
  transition: all 0.3s ease;
  color: white;
}

.scroll-arrow:hover {
  box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.scroll-left { left: 10px; }
.scroll-right { right: 10px; }

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* 🔒 LOCKED + GRADIENT: Category Bar */



/* 🔒 Prevent headings from hiding behind sticky bars */
section[id] {
  scroll-margin-top: calc(
    var(--announcement-height) +
    var(--navbar-height) +
    80px
  );
}


/* ===============================
   GLOBAL LAYOUT VARIABLES
================================ */
:root {
  --announcement-height: 36px;
  --navbar-height: 56px;
  --category-height: auto;
}

/* ===============================
   CATEGORY BAR (LOCKED TO NAVBAR)
================================ */

/* --- PREMIUM SLIM CATEGORY BAR --- */
#categoryBar {
    /* A very light, premium pearl/off-white color */
   background: linear-gradient(-45deg, #F88379, #E9746A, #DA655B, #73f191) !important;
background-size: 400% 400% !important;
    /* Reduced vertical padding to keep it slim */
    padding: 8px 0 !important; 
    border-bottom: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 15px;
}

/* Premium Category Bar Background */
#categoryBar {
    background: linear-gradient(to bottom, #ffffff, #fdfbfb); /* Subtle premium silk look */
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
/* =========================================
   FINAL MICRO-TRIM FOR CATEGORY BAR (SAFE)
   Purpose: shave ~0.3–0.4 cm from bottom ONLY
========================================= */

#categoryBar {
  padding-bottom: 0px !important;/* 👈 this is the key line */
  margin-bottom: -3px;
}


@media (max-width: 640px) {
  #categoryBar {
    padding-bottom: 1px !important;
  }
}

#categoryBar {
  position: fixed;
  top: calc(var(--announcement-height) + var(--navbar-height));
  left: 0;
  width: 100%;
  z-index: 8500;

  padding: 8px 0 2px;

  background: linear-gradient(
    270deg,
    rgba(147,51,234,0.65),
    rgba(236,72,153,0.65),
    rgba(99,102,241,0.65)
  );
  background-size: 300% 300%;
  animation: categoryGradient 16s ease infinite;

  backdrop-filter: blur(6px);
}

@keyframes categoryGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Compact spacing between icon & label */
.category-link h3 {
  margin-top: 0.35rem !important;
}

/* Shady effect for Category Icons */
.category-link .rounded-full {
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; /* The "Shady" effect */
    transition: all 0.3s ease-in-out;
}

.category-link:hover .rounded-full {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--navbar-bg-end) !important; /* Subtle glow using your theme purple */
}

.category-link h3 {
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #444;
}

/* Pages other than homepage */
.main-content-area {
  padding-top: 2rem;
}




@media (max-width: 576px) {
    /* 1. Shrink Brand Name so Hamburger fits on the same line */
    .navbar-brand {
        font-size: 1.1rem !important; /* Smaller size for mobile */
        letter-spacing: 0.02em;
        white-space: nowrap; /* Prevents name from breaking into two lines */
    }

    /* 2. Force Navbar Header to stay in one row */
    .navbar .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
    }

    /* 3. Reduce Hamburger size slightly */
    .navbar-toggler {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.9rem !important;
    }
}
@media (max-width: 576px) {
    /* Force Brand and Hamburger to stay side-by-side */
    .navbar .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .navbar-brand {
        font-size: 1.1rem !important; /* Shrink text to fit */
        white-space: nowrap;
        margin-right: 10px;
    }

    .navbar-toggler {
        padding: 4px 8px !important; /* Smaller button */
        flex-shrink: 0;
    }
}
/* 🔻 Space for bottom marquee */
body {
  padding-bottom: 65px; /* mobile-safe for marquee */
}

/* ⏸ Pause marquee on hover (desktop) */
#customMarquee:hover .marquee-track {
  animation-play-state: paused;
}

/* 🔻 GLOBAL MARQUEE (single source of truth) */
#customMarquee {
  height: 36px;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.marquee-track {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 100%;
  animation: marquee 18s linear infinite;
}

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

/* ⏸ Pause on hover / touch */
#customMarquee:hover .marquee-track {
  animation-play-state: paused;
}


/* 🔒 Absolute top layer for marquee (above cards, swiper, modals except alerts) */
#customMarquee {
  z-index: 2147483000 !important; /* browser-safe max layer */
}

/* 🧱 Prevent product cards & swiper from overlapping marquee */
.product-card,
.product-grid,
.swiper,
.swiper-wrapper,
.swiper-slide {
  position: relative;
  z-index: 1;
}
/* 🔒 Ensure marquee always stays above product cards */
.product-card,
.swiper,
.swiper-wrapper,
.swiper-slide {
  z-index: 1 !important;
}
.product-card .rating {
    color: var(--saffron-gold);
}
.product-card .final-price {
    color: var(--red);
}
/* --- THE SHADY PRODUCT CARD MASTER STYLE --- */
.product-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: none !important; /* Removes the thin hard border */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    
    /* This creates the soft "shady" elevation from your screenshot */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    
    /* Smooth transition for the hover effect */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.3s ease !important;
}

/* Effect when you hover or touch the card */
.product-card:hover {
    transform: translateY(-8px) scale(1.02); /* Card lifts up */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important; /* Shadow gets deeper */
}

/* Quick fix for the image inside the shady card */
.product-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    padding: 10px;
    transition: transform 0.5s ease;
}

.product-card:hover img {
    transform: scale(1.05); /* Slight image zoom on hover */
}

/* Force the slide container to have no background so our bar color shows */
#categoryBar .swiper-slide, 
#categoryBar .bg-white {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* The circular icon styling - keep it "shady" */
.category-link .rounded-full {
    width: 65px !important;  /* Slightly smaller icons to save height */
    height: 65px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* The classy hovering style you liked */
.category-link:hover .rounded-full {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--navbar-bg-end) !important; /* Premium purple border on hover */
}

/* Slimming down the category text */
.category-link h3 {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
    color: #444 !important;
}
/* ===============================
   GLOBAL TOP SPACING (ALL PAGES)
================================ */

.site-main {
  padding-top: calc(
    var(--announcement-height) +
    var(--navbar-height)
   
  );
}
/* ===============================
   HOMEPAGE EXTRA OFFSET
   (announcement + navbar + category bar)
================================ */

#categoryBar + .site-main,
body .site-main:has(#categoryBar) {
  padding-top: calc(
    var(--announcement-height) +
    var(--navbar-height) +
    120px
  );
}
/* 🔒 MOBILE BADGE VISIBILITY FIX (FINAL) */
@media (max-width: 640px) {
  .badge {
    background: rgba(0, 0, 0, 0.85) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.45) !important;
  }
}
@media (max-width: 640px) {
  .badge {
    background-color: rgba(0,0,0,0.88) !important;
  }
}
/* 📱 MOBILE HERO TYPOGRAPHY FIX */
@media (max-width: 640px) {
  .hero-slide h1,
  .hero-slide h2 {
    font-size: 1.6rem !important;   /* was too large */
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }

  .hero-slide p {
    font-size: 0.95rem;
    line-height: 1.45;
  }
}

.product-rating, /* product rating star ⭐ hides temporarily */
.rating,
.stars,
.review-stars {
  display: none !important;
}