body {
    background-color: rgba(255,255,239,0.5) !important;
   /* background-image: url('bg1.gif') !important;
    background-repeat: repeat !important;
    background-position: top left !important;
    background-attachment: fixed !important; */
}

/* Ensure inner wrappers don't block the background with solid white */
#content, .container, main {
    background-color: transparent !important;
}
/* Top Bar - Black background with white text and links */
#top {
    background-color: #f23333 !important;
    color: #ffffff !important;
}

#top a, 
#top .btn-link, 
#top .dropdown-toggle, 
#top .list-inline-item {
    color: #ffffff !important;
}

#top a:hover, 
#top .btn-link:hover {
    color: #dddddd !important; /* Slightly softer white on hover */
}

/* Footer - Black background with white text, headings, and links */
footer {
    background-color: #f23233 !important;
    color: #ffffff !important;
}

footer h5, 
footer p, 
footer li {
    color: #ffffff !important;
}

footer a {
    color: #000000 !important;
}

footer a:hover {
    color: #dddddd !important; /* Slightly softer white on hover */
}
/* 1. Redefine Bootstrap CSS variables directly on #menu */
#menu {
    --bs-primary-rgb: 0, 0, 0 !important;
    --bs-bg-opacity: 1 !important;
    background-color: #f23333 !important;
}

/* 2. Target class combinations with maximum specificity */
nav#menu.bg-primary,
#menu.navbar,
.navbar.bg-primary {
    background-color: #f23333 !important;
    background: #f23333 !important;
}

/* 3. Force white text on all menu items, links, and icons */
#menu,
#menu a,
#menu .nav-link,
#menu .dropdown-toggle,
#menu .navbar-brand,
#menu .navbar-toggler-icon {
    color: #ffffff !important;
}

/* 4. Hover states for links */
#menu .nav-link:hover,
#menu a:hover {
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* 5. Dropdown menus container and items */
#menu .dropdown-menu {
    background-color: #000000 !important;
    border: 1px solid #333333 !important;
}

#menu .dropdown-item {
    color: #ffffff !important;
}

#menu .dropdown-item:hover,
#menu .dropdown-item:focus {
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* 6. Mobile toggle button icon color fix */
#menu .navbar-toggler-icon {
    filter: invert(1) !important;
}

/* ==========================================================================
   1. Active List Group Items (Sidebar Categories / Account Menu)
   ========================================================================== */
.list-group-item.active {
    background-color: #f23233 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    /* Redefine Bootstrap CSS variables directly on active items */
    --bs-list-group-active-bg: #000000 !important;
    --bs-list-group-active-border-color: #000000 !important;
    --bs-list-group-active-color: #ffffff !important;
}

/* Ensure links inside active list group items stay white */
.list-group-item.active a {
    color: #ffffff !important;
}


/* ==========================================================================
   2. Breadcrumbs Navigation
   ========================================================================== */
.breadcrumb {
    margin: 0 0 20px 0;
    padding: 8px 15px; /* Added slight horizontal padding for better spacing */
    border: 1px solid #333333 !important;
    border-radius: var(--bs-border-radius);
    background-color: #f23333!important;
    --bs-tertiary-bg: #f23333 !important; /* Overrides Bootstrap 5 background variable */
}

/* Breadcrumb Links & Separators */
.breadcrumb li, 
.breadcrumb li a, 
.breadcrumb-item, 
.breadcrumb-item a {
    color: #ffffff !important;
}

/* Hover state for breadcrumb links */
.breadcrumb-item a:hover {
    color: #dddddd !important;
    text-decoration: underline;
}

/* Active / Current Page text in breadcrumbs */
.breadcrumb-item.active {
    color: #aaaaaa !important; /* Slightly softer white/grey for current page */
}

/* Breadcrumb divider slash color */
.breadcrumb-item + .breadcrumb-item::before {
    color: #ffffff !important;
}

/* Hide compare button on the product detail page */
.product-thumb .btn-group button[formaction*="compare"],
#product button[formaction*="compare.add"],
button[data-bs-title*="Compare"],
button[onclick*="compare.add"] {
    display: none !important;
}

/* Hide the compare link/button on product pages specifically */
button[formaction*="product/compare"] {
    display: none !important;
}

/* Hide product compare link in the header/topbar if present */
#compare-total {
    display: none !important;
}

/* Risen Card Effect for Product Cards */
.product-thumb {
    border: 1px solid #d1d5db !important; /* Soft light border */
    position: relative;
    height: 100%;
    background-color: #ffffff !important;
    border-radius: 8px; /* Slightly smoother corners */
    
    /* Elevated shadow to create depth/raised look */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    
    /* Smooth movement when hovering */
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Elevate higher when hovering over the card */
.product-thumb:hover {
    transform: translateY(-5px) !important; /* Lifts the card up by 5px */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25) !important; /* Deepens the shadow */
    border-color: #000000 !important; /* Highlights border on hover */
}

/* White background, inner padding, and subtle frame for carousel image containers */
div.carousel-inner {
    background-color: #ffffff !important;
    padding: 12px !important;              /* Generous breathing room around the image */
    border: 1px solid #e5e7eb !important;    /* Subtle inner border frame */
    border-radius: 8px !important;           /* Smooth rounded corners */
    box-sizing: border-box !important;       /* Prevents padding from breaking layout dimensions */
    overflow: hidden;
}

/* Ensure images fit within the padded frame while keeping original aspect ratio */
div.carousel-inner .carousel-item img {
    display: block;
    margin: 0 auto;
    max-height: 156px !important;            /* 180px minus padding (24px total) */
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Global Link Colors (Overrides Bootstrap 5 --bs-link-color-rgb)
   ========================================================================== */

/* Method 1: Override Bootstrap's global link variables directly */
:root, body {
    --bs-link-color: #000 !important;
    --bs-link-color-rgb: 0, 0, 0 !important;
    --bs-link-hover-color: #dddddd !important;
    --bs-link-hover-color-rgb: 221, 221, 221 !important;
}

/* Method 2: Direct CSS rules for category links, product titles & sidebar */
a,
.product-thumb h4 a,
.product-thumb .description a,
#category-product a,
.list-group-item a {
    color: #000 !important;
    text-decoration: none;
}

/* Hover state for links across category pages */
a:hover,
.product-thumb h4 a:hover,
#category-product a:hover,
.list-group-item a:hover {
    color: #dddddd !important;
    text-decoration: underline;
}

/* Center only the product title headers */
.product-thumb h4 {
    text-align: center !important;
}

/*To override its styling specifically for the shopping cart header button without affecting other `.btn-dark` elements across your store, add this block to `catalog/view/stylesheet/custom.css`:*/

/* Custom Header Cart Button Styling */
#cart .dropdown > button.btn-dark {
    background-color: #f23333 !important; /* Change to your preferred background hex color */
    border-color: #3a3a3a !important;     /* Change to your preferred border hex color */
    color: #ffffff !important;            /* Text and icon color */
}

/* Hover & Active States */
#cart .dropdown > button.btn-dark:hover,
#cart .dropdown > button.btn-dark:focus,
#cart .dropdown > button.btn-dark:active,
#cart .dropdown > button.btn-dark.show {
    background-color: #f23333 !important;
    border-color: #4a4a4a !important;
    color: #ffffff !important;
}

/* 4 columns in Grid View on desktop */
@media (min-width: 992px) {
  #product-list.row > div,
  .row-cols-lg-4 > div,
  #product-list .col-lg-4 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}

/* Hide the List/Grid view switch buttons */
#button-list,
#button-grid,
.btn-group:has(#button-list) {
  display: none !important;
}