/* user.css for Simple Template ----------------------------------------------------------------- */

/* set the font for the template */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

body { font-family: 'Google Sans', sans-serif; font-weight: 400; color: #333; font-size: 12px; line-height: 20px; width: 100%; }
h1, h2, h3, h4, h5, h6 { color: #222; }

#bodyWrapper {
  padding-inline: 1.25rem; /* equals Bootstrap px-3 */
}

/* Override the bootstrap defaults */
h1 { font-size: 24px; margin-top:10px;}
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 15px; }
h5 { font-size: 12px; }
h6 { font-size: 10.2px; }

/* default font size */
.fa { font-size: 14px; }

a { color: #007acc; }
a:hover { text-decoration: none; color: #000;}

/* Remove border from hamburger menu (navbar toggler) */
.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
}

.navbar-toggler:focus {
  border: none !important;
  box-shadow: none !important;
}

/* Remove border from hamburger menu in header menu specifically */
.cm-header-menu .navbar-toggler {
  border: none !important;
  box-shadow: none !important;
}

.cm-header-menu .navbar-toggler:focus {
  border: none !important;
  box-shadow: none !important;
}

/* Change navbar background to white and text to dark gray (#222) */
.navbar {
  background-color: #ffffff !important;
  margin-top: 15px !important;    /* Add margin above navbar */
  margin-bottom: 15px !important; /* Add margin below navbar */
  border-bottom: none !important; /* Remove bottom border */
  box-shadow: none !important;    /* Remove any shadow that might appear as a border */
  position: relative !important;  /* Ensure proper stacking context */
  z-index: 1030 !important;       /* Higher z-index for regular navbars so dropdowns appear above header menu */
}

/* Change navbar brand and text colors */
.navbar .navbar-brand,
.navbar .navbar-text {
  color: #222222 !important;
  background-color: #ffffff !important;
}

/* Change navbar brand and text colors */
.navbar .nav-link,
  background-color: #bcdd69 !important;
  color: #fff !important;
}


/* Change navbar toggler (hamburger menu) color */
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(34, 34, 34, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar .navbar-toggler {
  border-color: rgba(34, 34, 34, 0.1) !important;
}

/* Change dropdown menu background and text */
.navbar .dropdown-menu {
  background-color: #ffffff !important;
  z-index: 1031 !important; /* Ensure regular navbar dropdowns appear above everything */
}

.navbar .dropdown-item {
  color: #222222 !important;
}

/* Change hover states */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: #000000 !important;
  background-color: rgba(34, 34, 34, 0.05) !important;
}

/* Change active states */
.navbar .nav-link.active,
.navbar .dropdown-item.active {
  color: #000000 !important;
  background-color: rgba(34, 34, 34, 0.1) !important;
}

/* Change background color to light gray (equivalent to .bg-body-tertiary) and text to black for the header menu */
.cm-header-menu {
  background-color: #bcdd69 !important;
  border-radius: 0.5rem !important; /* Add rounded corners */
  /* Removed overflow: hidden to allow dropdowns to show */
  position: relative !important; /* Ensure proper stacking context */
  z-index: 1020 !important; /* Lower z-index than regular navbars */
  padding-top: 0.2rem !important; /* Add top padding to increase height */
  padding-bottom: 0.2rem !important; /* Add bottom padding to increase height */
  margin-bottom: 0.5rem !important; /* Add gap between header menu and content below */
}

/* Navbar styling with increased height */
.cm-header-menu .navbar {
  background-color: #bcdd69 !important;
  padding-top: 0.5rem !important;    /* Increased from 0.15rem */
  padding-bottom: 0.5rem !important; /* Increased from 0.15rem */
  min-height: auto !important;        /* Allow minimum height */
  border-radius: 0.5rem !important; /* Match parent rounded corners */
  position: static !important; /* Allow dropdowns to extend beyond navbar */
  z-index: auto !important; /* Reset z-index to inherit from parent */
  margin-top: 0 !important; /* Override general navbar margin */
  margin-bottom: 0 !important; /* Override general navbar margin */
}

/* Increase padding on nav links for more height */
.cm-header-menu .navbar-nav .nav-link {
  padding-top: 0.5rem !important;    /* Increased from 0.25rem */
  padding-bottom: 0.5rem !important; /* Increased from 0.25rem */
  font-size: 1rem !important;       /* Slightly smaller font */
  line-height: 1.2 !important;        /* Tighter line height */
}

/* Offcanvas styling */
.cm-header-menu .offcanvas {
  background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
  border-radius: 0.5rem !important; /* Add rounded corners to offcanvas */
}

/* Text color for all navbar elements */
.cm-header-menu .navbar-nav .nav-link,
.cm-header-menu .lead,
.cm-header-menu .navbar-toggler,
.cm-header-menu .offcanvas-title {
  color: #000000 !important;
}

/* Make the toggler button larger */
.cm-header-menu .navbar-toggler {
  padding: 0.4rem 0.6rem !important;  /* Increased padding */
  font-size: 0.9rem !important;       /* Slightly larger font size */
  border-radius: 0.375rem !important; /* Add rounded corners to toggler */
}

/* Dropdown menu styling */
.cm-header-menu .dropdown-menu {
  background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
  margin-top: 0 !important; /* Remove gap between nav and dropdown */
  border-radius: 0.375rem !important; /* Add rounded corners to dropdown */
  z-index: 1021 !important; /* Ensure header menu dropdowns appear above header menu but below regular navbar dropdowns */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; /* Add subtle shadow */
}

.cm-header-menu .dropdown-item {
  color: #000000 !important;
  padding-top: 0.4rem !important;     /* Increased from 0.3rem */
  padding-bottom: 0.4rem !important;  /* Increased from 0.3rem */
  font-size: 0.9rem !important;       /* Slightly smaller font */
}

/* Hover states */
.cm-header-menu .nav-link:hover,
.cm-header-menu .nav-link:focus,
.cm-header-menu .dropdown-item:hover,
.cm-header-menu .dropdown-item:focus {
  color: #000000 !important;
  background-color: #bcdd69 !important;
  border-radius: 0.25rem !important; /* Add rounded corners to hover states */
}

/* Active states */
.cm-header-menu .nav-link.active,
.cm-header-menu .dropdown-item.active {
  color: #000000 !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.25rem !important; /* Add rounded corners to active states */
}

/* Toggler icon color */
.cm-header-menu .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  width: 1.2em !important;   /* Slightly larger icon */
  height: 1.2em !important;  /* Slightly larger icon */
}

/* Offcanvas header styling */
.cm-header-menu .offcanvas-header {
  background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
  padding: 0.6rem 1rem !important; /* Increased padding in offcanvas header */
  border-radius: 0.5rem 0.5rem 0 0 !important; /* Rounded corners only on top */
}

/* Close button styling - no need to invert with light background */
.cm-header-menu .btn-close {
  filter: none !important;
  border-radius: 0.25rem !important; /* Add rounded corners to close button */
}

/* Dropdown dividers */
.cm-header-menu .dropdown-divider {
  border-color: rgba(0, 0, 0, 0.1) !important;
  margin: 0.3rem 0 !important; /* Increased margin around dividers */
}

/* Additional height increase for navbar brand/logo if present */
.cm-header-menu .navbar-brand {
  padding-top: 0.4rem !important;    /* Increased from 0.2rem */
  padding-bottom: 0.4rem !important; /* Increased from 0.2rem */
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

/* Remove Bootstrap column padding that makes the header wider */
.cm-header-menu {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove padding from the row containing the header menu */
.cm-header-menu.col-sm-12,
.row:has(.cm-header-menu) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Container padding reduction - remove horizontal padding to align with content below */
.cm-header-menu .container,
.cm-header-menu .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Remove default Bootstrap container margins */
.cm-header-menu .navbar > .container,
.cm-header-menu .navbar > .container-fluid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Adjust navbar padding to match the content below */
.cm-header-menu .navbar {
  padding-left: 0.75rem !important;  /* Match Bootstrap container-xl padding */
  padding-right: 0.75rem !important; /* Match Bootstrap container-xl padding */
}

/* Ensure nav items align properly with reduced padding */
.cm-header-menu .navbar-nav {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Add rounded corners to the carousel slider banner */
.cm-i-slider .carousel {
  border-radius: 0.5rem !important;
  overflow: hidden !important; /* Ensures images respect the border-radius */
}

/* Add rounded corners to carousel inner container */
.cm-i-slider .carousel-inner {
  border-radius: 0.5rem !important;
}

/* Add rounded corners to carousel items and images */
.cm-i-slider .carousel-item,
.cm-i-slider .carousel-item img {
  border-radius: 0.5rem !important;
}

/* Ensure the first and last items have proper rounded corners */
.cm-i-slider .carousel-item:first-child,
.cm-i-slider .carousel-item:first-child img,
.cm-i-slider .carousel-item:last-child,
.cm-i-slider .carousel-item:last-child img {
  border-radius: 0.5rem !important;
}

/* Optional: Add rounded corners to carousel caption if you want */
.cm-i-slider .carousel-caption {
  border-radius: 0 0 0.5rem 0.5rem !important; /* Only bottom corners rounded */
  margin-bottom: 0 !important; /* Remove default margin to align with rounded corners */
}

/* Add padding under the title and View All button */
.cm-i-card-products p {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.5rem !important;
}

.cm-i-card-products .float-end {
  float: none !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Nuclear option - override everything with attribute selectors */
.cm-i-card-products .card[data-is-special] .card-body .card-title,
.cm-i-card-products .card[data-product-price] .card-body .card-title,
.cm-i-card-products .card[data-in-stock] .card-body .card-title,
.cm-i-card-products .card[data-product-id] .card-body .card-title {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  display: block !important;
}

.cm-i-card-products .card[data-is-special] .card-body .card-title a,
.cm-i-card-products .card[data-product-price] .card-body .card-title a,
.cm-i-card-products .card[data-in-stock] .card-body .card-title a,
.cm-i-card-products .card[data-product-id] .card-body .card-title a {
  text-align: center !important;
  display: block !important;
}

.cm-i-card-products .card[data-is-special] .card-body .card-subtitle,
.cm-i-card-products .card[data-product-price] .card-body .card-subtitle,
.cm-i-card-products .card[data-in-stock] .card-body .card-subtitle,
.cm-i-card-products .card[data-product-id] .card-body .card-subtitle {
  text-align: center !important;
  display: block !important;
}

/* Override the flex-grow-1 class specifically */
.cm-i-card-products .flex-grow-1 {
  flex-grow: 0 !important;
  text-align: center !important;
}

/* Use CSS content injection to force centering */
.cm-i-card-products .card-body {
  text-align: center !important;
}

.cm-i-card-products .card-body * {
  text-align: center !important;
}

/* Target by position in DOM */
.cm-i-card-products .card-body > p:first-child,
.cm-i-card-products .card-body > p:first-child > a {
  text-align: center !important;
}

.cm-i-card-products .card-body > p:last-child {
  text-align: center !important;
}

/* Remove the mobile stacking - keep on same line */
@media (max-width: 575.98px) {
  .cm-i-card-products p {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  
  .cm-i-card-products .float-end {
    margin-left: auto !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }
  
  .cm-i-card-products .fs-4 {
    font-size: 1.1rem !important;
  }
  
  .cm-i-card-products .btn-sm {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Mobile centering */
  .cm-i-card-products .card-body,
  .cm-i-card-products .card-body * {
    text-align: center !important;
  }
}

/* Force 2 products across on mobile */
.cm-i-card-products .row-cols-2 > .col {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

@media (max-width: 575.98px) {
  .cm-i-card-products .row-cols-2 > .col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
  }
  
  .cm-i-card-products .card-body {
    padding: 0.75rem !important;
    text-align: center !important;
  }
  
  .cm-i-card-products .card-footer {
    padding: 0.5rem 0.75rem !important;
  }
  
  .cm-i-card-products .card-title {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
  }
  
  .cm-i-card-products .card-subtitle {
    font-size: 0.85rem !important;
    text-align: center !important;
  }
  
  .cm-i-card-products .card-footer .btn {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  .cm-i-card-products .card-footer .fas {
    font-size: 0.7rem !important;
  }
}

@media (min-width: 576px) {
  .cm-i-card-products .row-cols-sm-3 > .col {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
  }
}

@media (min-width: 768px) {
  .cm-i-card-products .row-cols-md-4 > .col {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

/* Force center alignment for product card titles */
.cm-i-card-products > p.fs-4 {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Override any existing flex or float properties */
.cm-i-card-products > p.fs-4.fw-semibold {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  display: block !important;
  float: none !important;
}

/* Ensure no child elements interfere */
.cm-i-card-products > p.fs-4 * {
  text-align: center !important;
}


/* REMOVE PRODUCT CARD BORDERS - COMPREHENSIVE REMOVAL */
.cm-i-card-products .card,
.cm-i-card-products .is-product,
.cm-i-card-products .card.is-product {
  border: none !important;
  box-shadow: none !important;
}

.cm-i-card-products .card-footer,
.cm-i-card-products .is-product .card-footer,
.cm-i-card-products .card.is-product .card-footer {
  border: none !important;
  border-top: none !important;
}

/* Remove any inherited borders from Bootstrap */
.cm-i-card-products .card-body,
.cm-i-card-products .card-header,
.cm-i-card-products .card-img-top {
  border: none !important;
}

/* Show footer on card hover - ONLY for product cards */
.is-product:hover .card-footer,
.card.is-product:hover .card-footer {
  opacity: 1;
  transform: translateY(0);
}

/* Tighten image gap */
.card-img-wrap {
  margin-bottom: 0rem;
}

/* Ensure image is not affected by absolute content */
.is-product .card-img-top {
  position: relative;
  z-index: 1;
}

/* Override the stretched-link - ONLY for product cards */
.is-product .card-body .stretched-link,
.card.is-product .card-body .stretched-link {
  position: static !important;
  font-size: 0.85rem !important;
}

.is-product .card-body .card-title a,
.card.is-product .card-body .card-title a {
  color: inherit;
  text-decoration: none;
}

.is-product .card-body .card-title a:hover,
.card.is-product .card-body .card-title a:hover {
  color: #495057;
  text-decoration: none;
}

/* Add to Cart Button Styles - Left side - NO HOVER EFFECTS */
.add-to-cart-btn {
  color: #343a40 !important; /* Darker gray than footer background (#f8f9fa) */
  /* REMOVED: transition effects */
  border: none !important;
  background: none !important;
  font-weight: 500;
  font-size: 0.85rem !important; /* Reduced font size */
}

/* REMOVED: Add to cart button hover effects */

.add-to-cart-btn:focus {
  box-shadow: none !important;
  color: #343a40 !important;
}

/* View Product Button Styles - Right side - NO HOVER EFFECTS */
.view-product-btn {
  color: #343a40 !important; /* Darker gray than footer background */
  /* REMOVED: transition effects */
  border: none !important;
  background: none !important;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem !important; /* Reduced font size */
}

/* REMOVED: View product button hover effects */

.view-product-btn:focus {
  box-shadow: none !important;
  color: #343a40 !important;
}

/* Font Awesome Icon Styles - NO HOVER EFFECTS */
.add-to-cart-btn .fas.fa-shopping-cart {
  font-size: 14px; /* Reduced from 16px */
  color: #343a40; /* Darker gray */
  /* REMOVED: transition effects */
}

/* REMOVED: Shopping cart icon hover effects */

.add-to-cart-btn span {
  font-size: 0.85rem !important; /* Reduced font size */
  font-weight: 500;
  color: #343a40 !important; /* Darker gray */
  /* REMOVED: transition effects */
}

/* REMOVED: Add to cart span hover effects */

/* View button icon - NO HOVER EFFECTS */
.view-product-btn .fas.fa-eye {
  font-size: 14px; /* Reduced from 16px */
  color: #343a40; /* Darker gray */
  /* REMOVED: transition effects */
}

/* REMOVED: View button icon hover effects */

/* REMOVED: Enhanced card hover effects for product cards */

/* Ensure proper button alignment in footer */
.is-product .card-footer .d-flex,
.card.is-product .card-footer .d-flex {
  align-items: center;
  min-height: 100%;
}

.is-product .card-footer .btn,
.card.is-product .card-footer .btn {
  display: flex;
  align-items: center;
}

/* Icon alignment */
.is-product .card-footer .btn i,
.card.is-product .card-footer .btn i {
  vertical-align: middle;
}

/* Remove Bootstrap button default styles - ONLY for product cards */
.is-product .card-footer .btn-link,
.card.is-product .card-footer .btn-link {
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.is-product .card-footer .btn-link:hover,
.is-product .card-footer .btn-link:focus,
.is-product .card-footer .btn-link:active,
.card.is-product .card-footer .btn-link:hover,
.card.is-product .card-footer .btn-link:focus,
.card.is-product .card-footer .btn-link:active {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Override button link colors with darker grays - NO HOVER EFFECTS */
.is-product .card-footer .btn-link,
.card.is-product .card-footer .btn-link {
  color: #343a40 !important; /* Darker gray than footer background */
  font-size: 0.85rem !important; /* Reduced font size */
}

/* REMOVED: Button link hover effects */

/* Specific overrides for colored buttons - NO HOVER EFFECTS */
.card-footer .btn-link:has(.fa-shopping-cart) {
  color: #198754 !important; /* Keep green for add to cart */
  font-size: 0.85rem !important;
}

.card-footer .btn-link:has(.fa-cog) {
  color: #fd7e14 !important; /* Keep orange for select options */
  font-size: 0.85rem !important;
}

.card-footer .btn-link:has(.fa-eye) {
  color: #343a40 !important; /* Darker gray for view */
  font-size: 0.85rem !important;
}

/* REMOVED: All colored button hover effects */

/* Hide original footer by default - ONLY for product cards */
.is-product .original-footer,
.card.is-product .original-footer {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
  .is-product .card-footer,
  .card.is-product .card-footer {
    min-height: 45px; /* Increased from 32px */
    padding: 0.6rem !important; /* Increased from 0.3rem */
  }
  
  .add-to-cart-btn span {
    font-size: 0.8rem !important; /* Reduced font size */
  }
  
  .add-to-cart-btn .fas.fa-shopping-cart {
    font-size: 12px; /* Reduced from 13px */
  }
  
  .view-product-btn .fas.fa-eye {
    font-size: 12px; /* Reduced from 13px */
  }
    
  /* Mobile positioning - normal state - ONLY for product cards */
  .is-product .card-body h5.card-title,
  .is-product .card-body .product-name,
  .is-product .card-body .card-title,
  .card.is-product .card-body h5.card-title,
  .card.is-product .card-body .product-name,
  .card.is-product .card-body .card-title {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
  }
  
  .is-product .card-body .card-text,
  .is-product .card-body .price,
  .is-product .card-body .product-price,
  .is-product .card-body .card-subtitle,
  .card.is-product .card-body .card-text,
  .card.is-product .card-body .price,
  .card.is-product .card-body .product-price,
  .card.is-product .card-body .card-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
  }
  
  /* REMOVED: Mobile hover state positioning */
}

/* Additional spacing for better visual balance */
.is-product .card-footer .add-to-cart-btn,
.card.is-product .card-footer .add-to-cart-btn {
  line-height: 1.3;
}

/* REMOVED: Only allow specific transitions - NO TRANSITIONS */

/* Account Icon with CSS Circle Background - SMALLER SIZE */
.nb-account .account-icon-wrapper {
  display: inline-block;
  position: relative;
}

/* Hide any existing icons in the account text */
.nb-account .account-text-only i,
.nb-account .account-text-only .fas,
.nb-account .account-text-only .fa {
  display: none !important;
}

/* Remove dropdown arrow from account menu */
.nb-account .dropdown-toggle::after {
  display: none !important;
}

/* REDUCE PADDING ON ACCOUNT NAV LINK */
.nb-account .nav-link {
  padding-right: 0.25rem !important; /* Reduced from default 1rem */
  padding-left: 0.5rem !important; /* Reduced from default 1rem */
}

/* Reduce spacing between the circle icon and text */
.nb-account .account-icon-wrapper {
  margin-right: 0.25rem; /* Reduced from 0.5rem */
}

/* CSS Circle background for account - SMALLER */
.nb-account .account-circle-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;  /* Same size as shopping cart */
  height: 44px; /* Same size as shopping cart */
  background-color: #ffffff !important; /* white background */
  border: 1px solid #dee2e6 !important; /* optional: subtle border so it doesn’t disappear */
  border-radius: 50%;
  transition: none !important; /* Remove background color transition */
}

/* Account icon positioned on top of circle - SMALLER */
.nb-account .account-icon {
  position: absolute;
  top: 45%; /* Moved up from 50% to center better */
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem; /* Same size as shopping cart */
  color: #6c757d !important; /* grey color for visibility on gray background */
  z-index: 2;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
  /* Additional centering adjustments */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* Override any inherited styles that might affect positioning */
.nb-account .account-icon::before {
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}

/* KEEP CIRCLE BACKGROUND SAME ON HOVER - NO CHANGE */
.nb-account .nav-link:hover,
.nb-account .nav-link:focus,
.nb-account .nav-link:active {
  background-color: transparent !important;
  background: none !important;
}

.nb-account .nav-link:hover .account-circle-bg,
.nb-account .nav-link:focus .account-circle-bg,
.nb-account .nav-link:active .account-circle-bg {
  background-color: #6c757d !important; /* Keep same gray circle - no change */
}

/* Update hover state for account icon only */
.nb-account .nav-link:hover .account-icon {
  color: #ffffff !important; /* Keep white on hover */
  transform: translate(-50%, -50%) scale(1.1);
}

/* Update focus/active states for account icon only */
.nb-account .nav-link:focus .account-icon,
.nb-account .nav-link:active .account-icon {
  color: #ffffff !important; /* Keep white on focus/active */
  transform: translate(-50%, -50%) scale(1.05);
}

/* Responsive adjustments - SMALLER */
@media (max-width: 575.98px) {
  .nb-account .account-circle-bg {
    width: 28px;  /* Same as shopping cart */
    height: 28px; /* Same as shopping cart */
  }
  
  .nb-account .account-icon {
    font-size: 0.7rem; /* Same as shopping cart */
  }
}

@media (max-width: 767.98px) {
  .nb-account .account-circle-bg {
    width: 30px;  /* Same as shopping cart */
    height: 30px; /* Same as shopping cart */
  }
  
  .nb-account .account-icon {
    font-size: 0.75rem;
  }
}

.nb-special-offers .nav-link {
  background: none !important;
}

.nb-special-offers .nav-link:hover {
  background: none !important;
}

.circle-icon-container {
  background-color: #ffffff !important;   /* white background */
  border: 1px solid #dee2e6 !important;   /* subtle border like account */
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fire-icon {
  color: #6c757d !important;              /* grey icon */
}

.search-container {
  position: relative;
}

.search-input {
  padding-right: 2.5rem !important;
}

.search-input:focus {
  border-color: #ced4da !important;
  box-shadow: none !important;
  outline: none !important;
}

.search-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  background: none;
  border: none;
  pointer-events: none;
  z-index: 10;
}

/* Center search field in navbar */
@media (min-width: 576px) {
  .offcanvas-body {
    display: flex !important;
    align-items: center;
    min-height: 60px; /* Adjust based on your navbar height */
  }
  
  .nb-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  
  .nb-search .search-container {
    width: 30rem;
  }
}

/* Ensure other nav items don't interfere */
@media (min-width: 576px) {
  .offcanvas-body .navbar-nav:first-child {
    flex: 1;
  }
  
  .offcanvas-body .navbar-nav:last-child {
    flex: 1;
    justify-content: flex-end;
  }
}

/* Hide fire icon on mobile only, show text instead */
@media (max-width: 767.98px) {
  .nb-special-offers .circle-icon-container {
    display: none !important;
  }
  
  .nb-special-offers .nav-link::after {
    content: attr(title);
    display: block;
  }
}

/* Hide all icons in mobile NAVIGATION offcanvas menu only */
@media (max-width: 991.98px) {
  .offcanvas:not(#offcanvasCart) .nav-link i,
  .offcanvas:not(#offcanvasCart) .navbar-nav i,
  .offcanvas:not(#offcanvasCart) .circle-icon-container,
  .offcanvas:not(#offcanvasCart) .account-icon-wrapper,
  .offcanvas:not(#offcanvasCart) .fas,
  .offcanvas:not(#offcanvasCart) .fa {
    display: none !important;
  }
  
  /* Hide specific icon containers in navigation only */
  .offcanvas:not(#offcanvasCart) .nb-account .account-icon-wrapper,
  .offcanvas:not(#offcanvasCart) .nb-special-offers .circle-icon-container {
    display: none !important;
  }
  
  /* Ensure text shows properly without icons in navigation only */
  .offcanvas:not(#offcanvasCart) .nav-link {
    padding-left: 1rem !important;
  }
}

/* Fix cart offcanvas layout - buttons below content, not sticky */
#offcanvasCart .offcanvas-body {
  display: block !important;
  padding: 0 !important;
}

#offcanvasCart .list-group-cart {
  /* Let it flow naturally */
}

#offcanvasCart .cart-buttons {
  position: relative !important;
  bottom: auto !important;
  margin-top: 0 !important;
  background-color: transparent !important;
  border-top: none !important;
  padding: 1rem !important;
  z-index: 1 !important;
}

/* Ensure buttons stay horizontal */
#offcanvasCart .cart-buttons .d-flex {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

#offcanvasCart .cart-buttons .btn {
  flex: 0 0 auto !important;
}

/* Shopping cart icon — grey icon, white circle */
.nb-shopping-cart .nav-link .fa-shopping-cart {
  background-color: #ffffff !important;  /* white circle */
  color: #6c757d !important;             /* grey icon */
  border: 1px solid #dee2e6 !important;  /* subtle border like account */
  border-radius: 50% !important;
  padding: 0.375rem !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important; /* match account icon size */
}

.nb-shopping-cart .nav-link:hover .fa-shopping-cart,
.nb-shopping-cart .nav-link:focus .fa-shopping-cart,
.nb-shopping-cart .nav-link:active .fa-shopping-cart {
  background-color: #6c757d !important;  /* grey circle */
  color: #ffffff !important;             /* white icon */
  border-color: #6c757d !important;      /* match border */
}

/* Adjust the badge position for the smaller circle */
.nb-shopping-cart .position-relative .badge {
  top: -0.125rem !important;
  right: -0.125rem !important;
}

/* Remove hover background from shopping cart icon */
.nb-shopping-cart .nav-link:hover .fa-shopping-cart,
.nb-shopping-cart .nav-link:focus .fa-shopping-cart {
  background-color: #6c757d !important; /* Keep the same gray, don't change on hover */
}

/* Also remove any general nav-link hover effects for the cart */
.nb-shopping-cart .nav-link:hover,
.nb-shopping-cart .nav-link:focus {
  background-color: transparent !important;
}

/* Make cart quantity badge circular */
.nb-shopping-cart .badge {
  border-radius: 50% !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
}

/* Mobile cart icon — match desktop */
.navbar-brand + a[href="#offcanvasCart"] .fa-shopping-cart {
  background-color: #ffffff !important;   /* white circle */
  color: #6c757d !important;              /* grey icon */
  border: 1px solid #dee2e6 !important;
  border-radius: 50% !important;
  padding: 0.375rem !important;
  width: 2rem !important;
  height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
}

/* Mobile hover */
.navbar-brand + a[href="#offcanvasCart"]:hover .fa-shopping-cart,
.navbar-brand + a[href="#offcanvasCart"]:focus .fa-shopping-cart {
  background-color: #6c757d !important;  /* grey circle */
  color: #ffffff !important;             /* white icon */
  border-color: #6c757d !important;
}

/* Mobile cart badge styling */
.navbar-brand + a[href="#offcanvasCart"] .badge {
  border-radius: 50% !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0.75rem !important;
  top: -0.125rem !important;
  right: -0.125rem !important;
}

/* Remove hover effects on mobile cart */
.navbar-brand + a[href="#offcanvasCart"]:hover .fa-shopping-cart,
.navbar-brand + a[href="#offcanvasCart"]:focus .fa-shopping-cart {
  background-color: #6c757d !important;
}

.navbar-brand + a[href="#offcanvasCart"]:hover,
.navbar-brand + a[href="#offcanvasCart"]:focus {
  background-color: transparent !important;
}

/* Remove ALL borders from product cards */
.is-product,
.card.is-product {
  border: none !important;
}

/* Remove borders from card footer */
.is-product .card-footer,
.card.is-product .card-footer {
  border: none !important;
  border-top: none !important;
}

/* Remove any Bootstrap border classes that might be applied */
.is-product .border-top,
.is-product .border,
.is-product .border-bottom,
.is-product .border-left,
.is-product .border-right,
.card.is-product .border-top,
.card.is-product .border,
.card.is-product .border-bottom,
.card.is-product .border-left,
.card.is-product .border-right {
  border: none !important;
}

/* Specifically target the footer border-top class visible in HTML */
.is-product .card-footer.border-top,
.card.is-product .card-footer.border-top {
  border-top: none !important;
}

/* Remove any inherited borders */
.is-product *,
.card.is-product * {
  border-top: none !important;
}

/* Override Bootstrap's card-footer default border */
.card.is-product .card-footer {
  border-top: 0 !important;
}

/* Custom styles for the enhanced 404 page */
.cm-pinf-message .alert-danger {
  border-left: 4px solid #dc3545;
}

.cm-pinf-message .rounded-circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Explicitly disable ALL hover effects and animations */
.cm-pinf-message .no-hover,
.cm-pinf-message .no-hover:hover,
.cm-pinf-message .card,
.cm-pinf-message .card:hover {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Search field with icon styling */
.cm-pinf-message .position-relative .btn-link:hover {
  text-decoration: none;
}

.cm-pinf-message .position-relative .btn-link:focus {
  box-shadow: none;
  outline: none;
}

/* Category accordion styling */
.cm-pinf-message #categoryAccordion .card {
  border: 1px solid #dee2e6;
  box-shadow: none;
}

.cm-pinf-message #categoryAccordion .btn-outline-success:hover {
  transform: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cm-pinf-message .card-body {
    padding: 1rem 0.75rem;
  }
}

/* Footer account links: black, no underline */
footer .nav-link.ps-0,
footer .nav-link.ps-0:link,
footer .nav-link.ps-0:visited {
  color: #000 !important;
  text-decoration: none !important;
  font-size: 1rem !important;
}

footer .nav-link.ps-0:hover,
footer .nav-link.ps-0:focus,
footer .nav-link.ps-0:active {
  color: #000 !important;
  text-decoration: none !important;
}

/* Neutralize Bootstrap invalid red borders */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #ced4da !important; /* default Bootstrap border color */
  background-image: none !important; /* remove invalid icon */
  box-shadow: none !important;
}

/* Optional: define regular focus state so fields still feel interactive */
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #86b7fe !important; /* Bootstrap primary focus */
  outline: 0 !important;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25) !important;
}

/* Footer messages: cards, text, links */
.footer-message-card {
  background-color: var(--bs-secondary, #6c757d);
  color: #fff;
  border: 0;
  border-radius: 0.75rem; /* similar to rounded-3 */
}
.footer-message-card a,
.footer-message-card a:visited {
  color: #fff;
  text-decoration: none;
}
.footer-message-card a:hover,
.footer-message-card a:focus {
  color: #fff;
  text-decoration: none;
}

/* Layout inside the card */
.footer-message-body {
  display: flex;
  align-items: flex-start;
}

/* Icon circle to the left */
.footer-message-icon-wrap {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.125);
  margin-right: 1rem; /* equivalent to .me-3 */
  flex-shrink: 0;
}

/* Icon size and color (gray) */
.footer-message-icon {
  font-size: 2rem; /* similar to fa-2x */
  line-height: 1;
  color: var(--bs-secondary, #6c757d);
}

/* Title and text spacing/colors */
.footer-message-title {
  margin: 0 0 .25rem 0; /* similar to mb-1 */
  color: #fff;
  font-weight: 600;
  font-size: 1rem; /* similar to .h6 */
}
.footer-message-text {
  margin: 0;
  color: #fff;
}

/* Make footer padding match body wrapper */
footer .footer {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

footer .footer-suffix {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Keep a real border, but account for Bootstrap’s horizontal gutter */
.cm-pi-description {
  font-size: 0.8rem !important;
  box-sizing: border-box;
  /* shrink width by the total gutter and center it by adding half-gutter margins */
  width: calc(100% - var(--bs-gutter-x, 1.5rem));
  margin-left: calc(var(--bs-gutter-x, 1.5rem) / 2);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) / 2);

  border: 1px solid #dee2e6 !important;
  border-radius: 0.5rem;
  padding: 1rem;
}

/* 1) Remove external bottom margin on the description wrapper */
.cm-pi-description {
  margin-bottom: 0 !important; /* kills any mb-* utility from module config */
}

/* 2) Make sure inner content doesn't push extra space out */
.cm-pi-description > :last-child {
  margin-bottom: 0 !important;
}

/* 3) Remove any top margin on the footer messages wrapper */
.cm-footer-messages {
  margin-top: 0 !important; /* kills any mt-* from module config */
}

/* 4) Be extra sure when these two are adjacent */
.cm-pi-description + .cm-footer-messages {
  margin-top: 0 !important;
}

/* Optional: if your module config injects mb-* on the description wrapper,
   this guarantees those are neutralized without touching other elements */
.cm-pi-description[class*="mb-"] {
  margin-bottom: 0 !important;
}

/* Product Info: Options/Attributes box — CSS-only styling (no markup changes) */
.pi-options-attributes {
  /* Match the look of your description box */
  font-size: 0.85rem !important;
  color: #333;
  background-color: #fff;

  /* Align to Bootstrap gutter like .cm-pi-description */
  box-sizing: border-box;
  width: calc(100% - var(--bs-gutter-x, 1.5rem));
  margin-left: calc(var(--bs-gutter-x, 1.5rem) / 2);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) / 2);

  /* Visual frame */
  border: 1px solid #dee2e6 !important;
  border-radius: 0.5rem;
  padding: 1rem;

  /* Consistent vertical rhythm with surrounding content */
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Tighten the section heading inside the box */
.pi-options-attributes > .fs-6.fw-semibold {
  margin-bottom: 0.5rem !important; /* override mb-1 if present */
}

/* Floating select blocks: compact spacing */
.pi-options-attributes .form-floating {
  margin-bottom: 0.5rem !important; /* override mb-2 */
}

/* Comfortable select height and label clearance */
.pi-options-attributes .form-floating > .form-select {
  height: calc(3.0rem + 2px);
  padding-top: 1.625rem;
  padding-bottom: 0.5rem;
  font-size: 0.8rem;
}

/* Label tone to match theme */
.pi-options-attributes .form-floating > label {
  color: #495057;
  font-size: 0.8rem;
}

/* Prevent last child from “bleeding” extra space */
.pi-options-attributes > :last-child {
  margin-bottom: 0 !important;
}

/* Keep the gap tight if footer messages follow */
.pi-options-attributes + .cm-footer-messages {
  margin-top: 0.5rem !important;
}

/* If module config injects mb-* utilities, normalize the bottom margin */
.pi-options-attributes[class*="mb-"] {
  margin-bottom: 0.75rem !important;
}

/* Optional: if you prefer the look of an inset “stroke” instead of a real border,
   uncomment the lines below (and remove/override the border above):
.pi-options-attributes {
  border: none !important;
  box-shadow: inset 0 0 0 1px #dee2e6;
}
*/

/* Restore full border (including top) on option dropdowns */
.pi-options-attributes .form-floating > .form-select,
.pi-options-attributes .form-select {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #dee2e6 !important;   /* same tone as the rest of the store */
  border-radius: .375rem !important;   /* Bootstrap default radius */
  background-color: #fff;              /* ensure no overlay hides the stroke */
}

/* Keep the floating-label select comfortable and visible */
.pi-options-attributes .form-floating > .form-select {
  height: calc(3.0rem + 2px);
  padding-top: 1.625rem; /* room for floating label */
  padding-bottom: .5rem;
}

/* Respect your global focus styling (already defined), but ensure the top border persists */
.pi-options-attributes .form-select:focus {
  border-top-color: #86b7fe !important; /* matches your focus palette */
}

/* If this block ever sits inside a product card that zeroes top borders, counter it */
.is-product .pi-options-attributes .form-select,
.card.is-product .pi-options-attributes .form-select {
  border-top: 1px solid #dee2e6 !important;
}

/* ========== Quantity Input & Buy Button Styling ========== */

/* Base styles */
.pi-qty-input .input-group { align-items: stretch; }

.pi-qty-input .btn.spinner {
  width: 2.5rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #343a40;
}

.pi-qty-input .btn.spinner,
.pi-qty-input .input-group-text,
.pi-qty-input .form-control,
.pi-qty-input .form-control.form-control-lg {
  height: 2.5rem !important;
  line-height: 2.5rem !important;
  border: 0px solid #dee2e6 !important;
  box-sizing: border-box;
}

.pi-qty-input .form-control,
.pi-qty-input .form-control.form-control-lg {
  text-align: center;
  font-size: 0.9rem;
  padding: 0 .5rem;
  border-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.pi-qty-input .btn.spinner:first-child,
.pi-qty-input .input-group-text:first-child {
  border-radius: 0.5rem 0 0 0.5rem;
}

.pi-qty-input .btn.spinner:last-child,
.pi-qty-input .form-control:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
}

.pi-qty-input .input-group > .input-group-text:first-child { border-right-width: 0; }
.pi-qty-input .input-group > .form-control:last-child { border-left-width: 0; }

.pi-buy-button { margin: 0.5rem 0; }

.pi-buy-button .btn-buy {
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  width: 100% !important;
  background-color: var(--bs-success, #198754) !important;
  border-color: var(--bs-success, #198754) !important;
  color: #fff !important;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out !important;
  display: inline-block;
  white-space: nowrap;
}

.pi-buy-button .btn-buy .fa,
.pi-buy-button .btn-buy .fas {
  margin-right: 0.5rem;
  font-size: 0.8rem;
  vertical-align: middle;
}

.pi-buy-button .btn-buy:hover,
.pi-buy-button .btn-buy:focus {
  background-color: #157347 !important;
  border-color: #146c43 !important;
}

.pi-buy-button .btn-buy:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .25) !important;
}

.pi-buy-button .btn-buy:active,
.pi-buy-button .btn-buy:active:focus {
  background-color: #146c43 !important;
  border-color: #145c3a !important;
  box-shadow: none !important;
}

.pi-buy-button .btn-buy:disabled,
.pi-buy-button .btn-buy[disabled] {
  background-color: #a3cfbb !important;
  border-color: #a3cfbb !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Mobile (<576px): larger tap targets */
@media (max-width: 575.98px) {
  .pi-qty-input .input-group { max-width: 100%; }
  .pi-qty-input .btn.spinner,
  .pi-qty-input .input-group-text,
  .pi-qty-input .form-control,
  .pi-qty-input .form-control.form-control-lg {
    height: 2.75rem !important;
    line-height: 2.75rem !important;
  }
  .pi-qty-input .btn.spinner { width: 2.75rem; }
  .pi-qty-input .btn.spinner .fa,
  .pi-qty-input .btn.spinner .fas { font-size: 1rem; }
  .pi-buy-button .btn-buy {
    padding: 0.9rem 1rem !important;
    font-size: 0.8rem !important;
  }
}

/* Mobile/Tablet (<992px): stacked + lighter buttons */
@media (max-width: 991.98px) {
  .pi-buy-button .d-grid { display: grid !important; }
  .pi-buy-button .btn-buy { width: 100% !important; min-height: 2.75rem; }
  .pi-qty-input .btn.spinner {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
  }
  .pi-qty-input .btn.spinner:hover,
  .pi-qty-input .btn.spinner:focus {
    background-color: #e9ecef !important;
    color: #495057 !important;
  }
  .pi-qty-input .btn.spinner:active {
    background-color: #dee2e6 !important;
    color: #212529 !important;
  }
}

/* Desktop (=992px): side-by-side centered capsule */
@media (min-width: 992px) {
  :root {
    --pi-capsule-max: 680px;
    --pi-qty-total: 11rem;
    --pi-capsule-bg: var(--bs-tertiary-bg, #f8f9fa);
  }

  .row:has(> .pi-qty-input):has(> .pi-buy-button),
  .container:has(> .pi-qty-input):has(> .pi-buy-button),
  #bodyWrapper:has(.pi-qty-input):has(.pi-buy-button) {
    display: flex !important;
    justify-content: left !important;
    flex-wrap: wrap;
  }

  .pi-qty-input,
  .pi-buy-button {
    display: inline-flex !important;
    align-items: left !important;
    vertical-align: middle;
    line-height: 0 !important;
    margin: 0 !important;
  }

  .pi-qty-input[class*="col-"],
  .pi-buy-button[class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  .pi-qty-input + .w-100,
  .pi-qty-input ~ .w-100 { display: none !important; }

  .pi-qty-input {
    width: var(--pi-qty-total) !important;
    border: 0px solid #dee2e6 !important;
    border-right: 0 !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
    padding: 0.25rem !important;
  }

  .pi-buy-button {
    width: calc(var(--pi-capsule-max) - var(--pi-qty-total)) !important;
    border: 0px solid #dee2e6 !important;
    border-left: 0 !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    padding: 0.25rem !important;
  }

  .pi-qty-input .input-group {
    display: inline-flex !important;
    align-items: center !important;
    height: 2.5rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .pi-qty-input .btn.spinner,
  .pi-qty-input .input-group-text,
  .pi-qty-input .form-control,
  .pi-qty-input .form-control.form-control-lg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: 2.5rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .pi-qty-input .btn.spinner { width: 2.5rem !important; }

  .pi-qty-input .form-control,
  .pi-qty-input .form-control.form-control-lg {
    flex: 0 0 4.25rem !important;
    min-width: 3rem !important;
    max-width: 3rem !important;
    text-align: center;
    font-size: 1rem !important;
    padding: 0 .3rem !important;
  }

  .pi-buy-button .d-grid { display: block !important; }

  .pi-buy-button .btn-buy {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.5rem !important;
    line-height: 1 !important;
    width: 100% !important;
    padding: 0rem !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
  }
}

/* Product Info: top-align image and options */
.cm-pi-modular > .row,
.cm-pi-modular .col-sm-7 > .row,
.cm-pi-modular .col-sm-5 > .row {
  align-items: flex-start !important;
}

.cm-pi-modular .col-sm-7,
.cm-pi-modular .col-sm-5 {
  align-self: flex-start !important;
}

.pi-options-attributes,
.cm-pi-modular .col-sm-5 > .row > .col-sm-12:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.pi-options-attributes > p.fs-6.fw-semibold {
  margin: 0.5rem 0 0.75rem !important;
}

@media (min-width: 992px) {
  :root {
    --pi-capsule-max: 360px;
    --pi-qty-total: 160px;
    --pi-capsule-bg: var(--bs-tertiary-bg, #f8f9fa);
  }
  
  .pi-qty-input {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  .pi-buy-button {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }
  
  /* Add padding to the inner elements instead */
  .pi-qty-input .input-group {
    padding: 0.25rem !important;
  }
  
  .pi-buy-button .btn-buy {
    margin: 0.25rem !important;
  }
  
  .pi-qty-input,
  .pi-buy-button {
    margin: 0 !important;
  }
  
  .pi-buy-button .d-grid,
  .pi-buy-button .btn-buy {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Override btn-lg padding */
  .pi-buy-button .btn-buy.btn-lg {
    padding: 0.5rem !important;
    font-size: 0.8rem !important;
    border: none !important;
  }
}

/* Desktop: centered content + breathing space without changing widths */
@media (min-width: 992px) {
  :root {
    /* Adjust to taste */
    --pi-track: 3rem;        /* inner control height (qty track + button) */
    --pi-y-gap: 0.375rem;    /* vertical breathing space above/below */
  }

  /* Turn each bordered half into a 1x1 grid and center its content */
  .cm-pi-modular .col-sm-5 > .row > .pi-qty-input,
  .cm-pi-modular .col-sm-5 > .row > .pi-buy-button {
    display: grid !important;
    place-items: center !important;     /* centers both vertically + horizontally */
    padding: 0 !important;              /* keep exact cell width/seam */
    box-sizing: border-box !important;
  }

  /* Qty side: fixed track height + vertical breathing via margin */
  .pi-qty-input .input-group {
    height: var(--pi-track) !important;
    margin-block: var(--pi-y-gap) !important; /* breathing space */
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .pi-qty-input .btn.spinner,
  .pi-qty-input .input-group-text,
  .pi-qty-input .form-control,
  .pi-qty-input .form-control.form-control-lg {
    height: var(--pi-track) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Button side: content-width button, centered, with vertical breathing */
  .pi-buy-button .d-grid { display: grid !important; place-items: center !important; }
  .pi-buy-button .btn-buy {
    width: auto !important;                  /* DO NOT fill the cell */
    flex: 0 0 auto !important;
    height: var(--pi-track) !important;
    margin-block: var(--pi-y-gap) !important;/* breathing space */
    padding-block: 0 !important;             /* height is via track */
    padding-inline: 0.75rem !important;      /* safe horizontal padding */
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;          /* ensure horizontal centering */
  }
  .pi-buy-button .btn-buy.btn-lg {
    padding-block: 0 !important;
    padding-inline: 0.75rem !important;
    font-size: 0.9rem !important;            /* stays comfy within track */
  }
}

/* Desktop: add left padding inside the qty box (does not change width) */
@media (min-width: 992px) {
  .pi-qty-input .input-group {
    padding-left: 0rem !important; /* adjust: 0.25rem–0.75rem to taste */
  }
}

/* Remove native number spinners (keep only + / - buttons) */
.pi-qty-input input[type="number"]::-webkit-outer-spin-button,
.pi-qty-input input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pi-qty-input input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;       /* Modern browsers */
}

/* Qty spinner buttons: slightly darker background with rounded edges */
.pi-qty-input .btn.spinner {
  background-color: #e9ecef !important; /* slightly darker than #f8f9fa */
  color: #343a40 !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.5rem !important;     /* rounded edges */
  box-shadow: none !important;
  box-sizing: border-box !important;     /* prevents width changes from border */
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* Hover/focus/active states */
.pi-qty-input .btn.spinner:hover,
.pi-qty-input .btn.spinner:focus {
  background-color: #dee2e6 !important; /* a touch darker on hover */
  border-color: #c8ced4 !important;
  color: #212529 !important;
}

.pi-qty-input .btn.spinner:active {
  background-color: #d6dadd !important; /* pressed */
  border-color: #c1c7cd !important;
  color: #212529 !important;
}

/* Desktop: narrower +/- buttons and reduced track height (combined) */
@media (min-width: 992px) {
  :root {
    /* Adjust to taste: 2rem, 2.125rem, 2.25rem, etc. */
    --pi-track: 2.25rem;
  }

  /* Make +/- buttons slightly narrower */
  .pi-qty-input .btn.spinner {
    width: 2.25rem !important; /* was 2.5rem */
  }
  .pi-qty-input .btn.spinner .fa,
  .pi-qty-input .btn.spinner .fas {
    font-size: 0.9rem; /* slightly smaller icon */
  }

  /* Apply the same (smaller) height to qty group parts */
  .pi-qty-input .input-group,
  .pi-qty-input .btn.spinner,
  .pi-qty-input .input-group-text,
  .pi-qty-input .form-control,
  .pi-qty-input .form-control.form-control-lg {
    height: var(--pi-track) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Match Add to Cart button height */
  .pi-buy-button .btn-buy {
    height: var(--pi-track) !important;
    line-height: 1 !important;
    padding-block: 0 !important; /* keep height stable */
  }
}

/* PI Model: make text smaller and remove borders, CSS-only */
.pi-model {
  font-size: 0.9rem !important;
  font-weight: 300 !important;
}

.pi-model .list-group,
.pi-model .list-group-item {
  border: 0 !important;                     /* remove all borders */
  --bs-list-group-border-color: transparent;/* ensure Bootstrap 5 vars also yield no border */
}

/* Align the item content to the left (overrides space-between) */
.pi-model .list-group-item,
.pi-model .list-group-item.d-flex {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Turn the badge/pill into plain text (keep content visible) */
.pi-model .list-group-item .badge,
.pi-model .list-group-item .rounded-pill {
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding-left: 2px !important;
  min-width: 0 !important;
  display: inline !important;
  font-size: 0.9rem !important;
  font-weight: inherit !important;
}

/* Neutralize spacing utilities that may push it away */
.pi-model .list-group-item .badge[class*="ms-"],
.pi-model .list-group-item .badge[class*="me-"],
.pi-model .list-group-item .badge[class*="ps-"],
.pi-model .list-group-item .badge[class*="pe-"] {
  margin: 0 !important;
  padding: 0 !important;
}

.pi-model .list-group-item { 
  padding-left: 0 !important; 
  margin-bottom: 0 !important; 
}

/* PI Price: force left alignment and set font size */

.pi-price {
  font-size: 14px !important;
  text-align: left !important;
}

.pi-price {
  font-size: 14px !important;
  text-align: left !important;
}

/* Override any Bootstrap text alignment utilities inside the price block */
.pi-price .text-left,
.pi-price .text-right,
.pi-price .text-end,
.pi-price .text-sm-right,
.pi-price [class*="text-"] {
  text-align: left !important;
}

.cm-pi-name {
  margin-bottom: 10px;
}

/* Force the manufacturer image to align perfectly to the left, in line with content below */
.pi-manufacturer,
.pi-manufacturer > div {
  text-align: left !important; /* override any inherited center/right text utilities */
}

/* If Phoenix/Bootstrap adds mx-auto d-block to the image, override it */
.pi-manufacturer .mx-auto {
  margin-left: 0 !important;
  margin-right: auto !important; /* classic left alignment */
}

/* Make the image a block and remove any extra margins */
.pi-manufacturer img {
  display: block !important;
  margin: 0 !important;          /* no extra margins */
  float: none !important;         /* no floats that could offset alignment */
  max-width: 100%;                /* keep responsive behavior */
  height: auto;
}

/* If the image is wrapped (eg. <a> or <figure>) remove wrappers’ default margins */
.pi-manufacturer a,
.pi-manufacturer figure {
  display: block !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Neutralize common Bootstrap utilities that could push it off-left */
.pi-manufacturer .text-center,
.pi-manufacturer .text-end,
.pi-manufacturer .text-right,
.pi-manufacturer .float-end,
.pi-manufacturer .float-right {
  text-align: left !important;
  float: none !important;
}

/* Arrow separator style */
.breadcrumb {
  background-color: #ffffff;
  padding: 0.75rem 1rem;
  font-size: 1rem !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "→";
  padding: 0 0.5rem;
  color: #6c757d;
}

/* Or use Font Awesome icons */
.breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105"; /* fa-angle-right */
  font-weight: 900;
}

.breadcrumb-item a {
  color: #495057;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #007bff;
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #212529;
}

/* Hide breadcrumb on mobile devices */
@media (max-width: 767px) {
  .breadcrumb {
    display: none;
  }
}

/* ================================
   PRODUCT IMAGE — FINAL FIX
   ================================ */

/* 1) Card still clips footer ONLY */
.is-product,
.card.is-product {
  overflow: hidden; /* keep hover footer working */
}

/* 3) Image is absolutely positioned INSIDE wrapper */
.is-product .card-img-wrap img,
.card.is-product .card-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* NEVER crop */
  display: block;
}

.pi-price {
text-align: left !important;
}

/* =========================================
   FIX: BUY BUTTON ALIGNMENT (OVERRIDES ONLY)
========================================= */

/* 1. STOP grid centering on parent */
.cm-pi-modular .col-sm-5 > .row > .pi-qty-input,
.cm-pi-modular .col-sm-5 > .row > .pi-buy-button {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* 2. STOP grid centering inside buy button */
.pi-buy-button .d-grid {
  display: block !important;
}

/* 3. REMOVE auto-centering on button */
.pi-buy-button .btn-buy {
  margin-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4. FIX invalid alignment rule */
.pi-qty-input,
.pi-buy-button {
  align-items: center !important; /* replaces invalid 'left' */
}

/* 5. REMOVE unwanted left gap (optional but recommended) */
.pi-qty-input {
  padding-left: 0 !important;
}

/* 6. REMOVE Bootstrap gutter if present */
.pi-qty-input[class*="col-"],
.pi-buy-button[class*="col-"] {
  padding-left: 0 !important;
}

/* 7. Ensure row aligns left (safe override) */
.row:has(> .pi-qty-input):has(> .pi-buy-button) {
  justify-content: flex-start !important;
}

/* =========================================
   MEGA MENU (CLEAN + CONSISTENT)
========================================= */

/* Main container */
.cm-header-mega-menu {
  font-weight: 400;
}

/* Headings */
.cm-header-mega-menu .mmg-heading {
  font-weight: 400;
  color: #000;
  margin-bottom: 8px;
}

/* Lists */
.cm-header-mega-menu .mmg-list {
  font-weight: 400;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* List items */
.cm-header-mega-menu .mmg-list li {
  margin-bottom: 4px;
}

/* Links */
.cm-header-mega-menu a {
  color: #000;
  text-decoration: none;
  font-weight: 400;
  display: block;
  padding: 4px 0;
  transition: none !important;
}

/* Hover / focus */
.cm-header-mega-menu a:hover,
.cm-header-mega-menu a:focus {
  color: #000;
  padding-left: 0px;
}

/* Active link */
.cm-header-mega-menu a.active {
  font-weight: 400;
  color: #000;
}

/* Optional: subtle divider between columns */
.cm-header-mega-menu .mmg-col {
  border-right: 1px solid rgba(0,0,0,0.05);
  padding-right: 15px;
}

.cm-header-mega-menu .mmg-col:last-child {
  border-right: none;
}

/* Optional: background (match your navbar color) */
.cm-header-mega-menu {
  background-color: #afd649;
  padding: 15px;
}

/* FORCE LIGHT FONT IN MEGA MENU LINKS */
.cm-header-mega-menu .mmg-list li a,
.cm-header-mega-menu .dropdown-item,
.cm-header-mega-menu .nav-link {
  font-weight: 400 !important;
}

/* FORCE FIX FOR HEADING LINKS */
.cm-header-mega-menu .mmg-heading a {
  font-weight: 400 !important;
}

/* =========================================
   MEGA MENU - FORCE CONSISTENCY
========================================= */

.cm-header-mega-menu a,
.cm-header-mega-menu .nav-link,
.cm-header-mega-menu .dropdown-item {
  font-family: 'Google Sans', sans-serif !important;
  font-weight: 400 !important;
  color: #000 !important;
  text-decoration: none !important;
}

/* Headings (if you want slightly stronger) */
.cm-header-mega-menu .mmg-heading,
.cm-header-mega-menu .mmg-heading a {
  font-weight: 400 !important;
}

/* Remove Bootstrap hover backgrounds interfering */
.cm-header-mega-menu .dropdown-item:hover,
.cm-header-mega-menu .nav-link:hover {
  background-color: transparent !important;
  color: #000 !important;
}

.pi-description ul {
  padding-left: 10px !important;
  margin-left: 0 !important;
}

.pi-description ul li {
  margin-left: 0 !important;
}

.pi-description,
.pi-description * {
  font-weight: 400 !important;
  font-style: normal !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove bold tags visually */
.pi-description strong,
.pi-description b {
  font-weight: 300 !important;
}

/* Remove italics */
.pi-description em,
.pi-description i {
  font-style: normal !important;
}

/* Links look like normal text */
.pi-description a {
  text-decoration: none !important;
  pointer-events: none; /* optional: disables clicking */
}

/* Lists clean + no indent */
.pi-description ul {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none;
}

.pi-description li {
  margin-bottom: 0px !important;
}

.pi-description,
.pi-description *,
.pi-gtin,
.pi-gtin *,
.pi-quantity,
.pi-quantity * {
  font-size: 0.9rem !important;
  font-weight: 300 !important;  
}

.pi-description {
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
  text-align: justify;
  text-justify: inter-word;
  font-weight: 300 !important;
}

.pi-description ul {
  margin-bottom: 1px;
}

.pi-unit-dimensions {
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
  text-align: justify;
  text-justify: inter-word;
  font-weight: 300 !important;
}

.pi-unit-weight {
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
  text-align: justify;
  text-justify: inter-word;
  font-weight: 300 !important;
}

.pi-country-of-origin {
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
  text-align: justify;
  text-justify: inter-word;
  font-weight: 300 !important;
}

.pi-materials-ingredients {
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
  text-align: justify;
  text-justify: inter-word;
  font-weight: 300 !important;
}

.pi-name {
  font-size: 1.25rem !important;
  text-align: justify;
  text-justify: inter-word;
  font-weight: 300 !important;
}

.productPrice {
  font-size: 0.9rem !important;
  font-weight: 300 !important;
}

.text-body-secondary {
  font-size: 0.9rem !important;
  font-weight: 300 !important;
}

.productReviews {
  font-size: 0.9rem !important;
}

.cm-in-category-description .card {
  border: none !important;
  box-shadow: none !important;
}

.alert-filters {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em; /* keeps alignment */
}

.cm-footer-information-links {
  font-size: 0.9rem !important;
  font-weight: 300 !important;
}

hr.hr {
  display: block;
  border: none;
  border-top: 1px solid #e3e6e2;
  opacity: 1;
  height: 0;
}

.cm-pi-auto-related-products hr.hr {
  display: block !important;
  border-top: 1px solid #e3e6e2 !important;
  opacity: 1 !important;
}

#relatedCarousel .card {
  border: none;
}

#relatedCarousel .carousel-control-prev,
#relatedCarousel .carousel-control-next {
  width: 30px;
}

#relatedCarousel .carousel-control-prev-icon,
#relatedCarousel .carousel-control-next-icon {
  background-color: #bcbcbc;
  border-radius: 50%;
}

.info_pages {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
}

/* Account icon — match shopping cart EXACTLY */
.nb-account .nav-link .fa-user {
  background-color: #ffffff !important;
  color: #6c757d !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 50% !important;
  padding: 0.375rem !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
}

/* Hover = identical to cart */
.nb-account .nav-link:hover .fa-user,
.nb-account .nav-link:focus .fa-user {
  background-color: #6c757d !important;
  color: #ffffff !important;
  border-color: #6c757d !important;
}

/* Remove hover background from nav-link */
.nb-account .nav-link:hover,
.nb-account .nav-link:focus {
  background-color: transparent !important;
}

.cm-i-slider {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* DO NOT TOUCH carousel-item width */
.cm-i-slider .carousel {
  width: 100%;
}

/* KEEP overflow hidden (this is correct) */
.cm-i-slider .carousel-inner {
  overflow: hidden;
}

/* Ensure proper fade behavior */
.cm-i-slider .carousel-item {
  transition: opacity 0.6s ease-in-out !important;
}

/* Images */
.cm-i-slider img {
  width: 100%;
  height: auto;
  display: block;
}

/* === PRODUCT CARD CLEAN LAYOUT === */

.is-product {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* IMAGE */
.card-img-wrap {
  display: block;
  width: 100%;
  padding-top: 75%; /* 4:3 ratio */
  position: relative;
}

.card-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* === CLEAN PRODUCT CARD LAYOUT (FIXED) === */

.is-product .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;        /* CENTER EVERYTHING */
  justify-content: flex-start;
  padding: 0.75rem;
  gap: 0.15rem;               /* SMALL controlled spacing */
  text-align: center;
}

/* REMOVE ALL DEFAULT MARGINS INSIDE */
.is-product .card-body * {
  margin: 0 !important;
}

/* TITLE */
.is-product .card-title {
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
}

/* PRICE */
.is-product .card-price,
.is-product .price,
.is-product .card-subtitle {
  font-size: 0.9rem;
  text-align: center !important;
  width: 100%;
}

/* REMOVE CONFLICTING LEFT ALIGN */
.pi-price {
  text-align: left !important;
  font-size: 0.9rem !important;
}

@media (max-width: 575.98px) {

  .is-product .card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .is-product .card-title {
    order: 1 !important;
  }

  .is-product .card-price,
  .is-product .price,
  .is-product .card-subtitle {
    order: 2 !important;
  }

}

/* Clean vertical stacking */
.is-product .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Remove forced push */
.is-product .card-price-wrap {
  margin-top: 0 !important;
}

/* Center everything */
.is-product .card-title,
.is-product .card-price,
.is-product .card-extra {
  text-align: center;
}

/* Tight spacing */
.is-product .card-title {
  margin-bottom: 0.25rem;
}

.is-product .card-price {
  margin: 0;
}

/* FORCE PRODUCT CARD MOBILE ORDER */
@media (max-width: 575.98px) {

  .is-product .card-body {
    display: flex !important;
    flex-direction: column !important;
  }

  .is-product .card-title {
    order: 1 !important;
  }

  .is-product .card-price-wrap {
    order: 2 !important;
  }

  .is-product .card-price {
    order: 3 !important;
  }

}

/* === HEADER LOGO – RESPONSIVE SIZE === */

/* Base (mobile first) */
.navbar-brand img {
  max-height: 40px;
  width: auto;
  height: auto;
}

/* Tablet */
@media (min-width: 576px) {
  .navbar-brand img {
    max-height: 68px;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .navbar-brand img {
    max-height: 80px; /* sweet spot */
  }
}

.product-divider-wrapper {
  margin-left: auto;
  margin-right: auto;
}

.product-row-divider {
  border: none !important;
  border-top: 1px solid #e3e6e2 !important;
  height: 1px !important;
  opacity: 1 !important;
  display: block !important;
  margin: 10px 0 15px !important;
}

@media (max-width: 991.98px) {
  .product-divider-wrapper {
    display: none !important;
  }
}

.payment-icons {
  gap: 6px;
}

/* Default (desktop) */
.payment-logo {
  background: #fff;
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-logo img {
  height: 28px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
}

/* Tablet */
@media (max-width: 768px) {
  .payment-logo img {
    height: 24px;
    max-width: 50px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .payment-icons {
    justify-content: center !important;
  }

  .payment-logo {
    padding: 3px 4px;
  }

  .payment-logo img {
    height: 20px;
    max-width: 42px;
  }
}

.payment-logo {
  background: #fff;
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ARD SIZE CONTROL */
.payment-img {
  height: 30px;
  max-width: 50px;
  width: auto;
  object-fit: contain;
}

/* Mobile tweak (slightly smaller so it fits better) */
@media (max-width: 480px) {
  .payment-img {
    height: 24px;
    max-width: 42px;
  }
}

.cm-sc-product-listing table {
  width: 100%;
  table-layout: fixed;
}

.cm-sc-product-listing td:nth-child(2),
.cm-sc-product-listing th:nth-child(2) {
  width: auto;
  min-width: 300px;
}

.cm-sc-product-listing td:nth-child(2) a {
  display: block;
  white-space: normal;
  line-height: 1.6;
  word-break: break-word;
}

.cm-sc-product-listing td,
.cm-sc-product-listing th {
  vertical-align: middle;
}

.cm-sc-product-listing .card-header {
  padding: 0.5rem 1rem !important;
  min-height: auto !important;
  display: flex;
  align-items: center;
}

.cm-sc-product-listing .card-header table {
  margin: 0;
  border-collapse: collapse;
}

.cm-sc-product-listing .card-header thead,
.cm-sc-product-listing .card-header tr,
.cm-sc-product-listing .card-header th {
  border: 0 !important;
}

.cm-sc-product-listing .card-header th {
  padding: 0 !important;
  background: transparent !important;
  vertical-align: middle;
}

.cart-product-image {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
}

@media (max-width: 767.98px) {

  .cm-sc-product-listing .table,
  .cm-sc-product-listing tbody,
  .cm-sc-product-listing tr,
  .cm-sc-product-listing td {
    display: block;
    width: 100%;
  }

  .cm-sc-product-listing tr {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
  }

  .cm-sc-product-listing td {
    border: 0 !important;
    padding: 0.35rem 0;
    text-align: left !important;
  }

  .cm-sc-product-listing td:nth-child(1) {
    display: none !important;
  }

  .cm-sc-product-listing td:nth-child(2) {
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.75rem;
  }

  .cm-sc-product-listing td:nth-child(3) {
    padding-bottom: 0.5rem;
  }

  .cm-sc-product-listing td:nth-child(4) .input-group {
    width: 100%;
    max-width: 180px;
  }

  .cm-sc-product-listing td:nth-child(5) {
    font-size: 1.1rem;
    font-weight: 700;
    padding-top: 0.5rem;
  }

  .cm-sc-product-listing td:nth-child(6) {
    padding-top: 0.5rem;
  }

  .cm-sc-product-listing .card-body {
    overflow: hidden;
  }

  .cm-sc-product-listing .btn-link {
    padding-left: 0;
  }

  .cm-sc-product-listing input[type="number"] {
    min-width: 70px;
  }
}

@media (max-width: 767.98px) {

  /* Shipping + totals full width */
  .cm-sc-twopage-checkout .col-lg-4,
  .cm-sc-twopage-checkout .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Better spacing */
  .cm-sc-shipping,
  .cm-sc-order-total {
    margin-bottom: 1rem;
  }

  /* Card body padding */
  .cm-sc-shipping .card-body,
  .cm-sc-order-total .card-body {
    padding: 1rem;
  }

  /* Address layout */
  .cm-sc-shipping .row > div {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    text-align: left !important;
  }

  /* Add address button */
  .cm-sc-shipping .btn {
    width: 100%;
    margin-top: 0.75rem;
  }

  /* Shipping methods table */
  .cm-sc-shipping table tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }

  .cm-sc-shipping table td {
    border: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Order total table */
  .cm-sc-order-total table td {
    padding-left: 0;
    padding-right: 0;
  }

  /* Prevent narrow cards */
  .cm-sc-shipping,
  .cm-sc-order-total {
    width: 100%;
  }

  /* Headings */
  .cm-sc-shipping h4,
  .cm-sc-order-total h4 {
    font-size: 1.4rem;
  }

}

@media (max-width: 767.98px) {

  .cm-sc-shipping .btn,
  .cm-sc-order-total .btn {
    width: 100%;
  }

  .cm-sc-shipping .card-body,
  .cm-sc-order-total .card-body {
    padding: 1rem;
  }
}

/* MOBILE CART / SHIPPING SPACING */
@media (max-width: 767.98px) {

  .cm-sc-twopage-checkout .card {
    margin-bottom: 1rem;
  }

  .cm-sc-shipping .card-body,
  .cm-sc-order-total .card-body {
    padding: 1rem;
  }

  .cm-sc-shipping .card-header,
  .cm-sc-order-total .card-header {
    padding: .75rem 1rem;
  }

  .cm-sc-shipping h4,
  .cm-sc-order-total h4 {
    font-size: 1.2rem;
  }

  .cm-sc-shipping .table,
  .cm-sc-order-total .table {
    margin-bottom: 0;
  }

  .cm-sc-shipping .table td,
  .cm-sc-order-total .table td {
    padding: .5rem 0;
    vertical-align: middle;
  }

  .cm-sc-shipping .btn {
    width: 100%;
  }

  .cm-sc-shipping .pb-3,
  .cm-sc-shipping .mb-3 {
    margin-bottom: 1rem !important;
    padding-bottom: 0 !important;
  }

  .cm-sc-shipping .form-check-input {
    transform: scale(1.1);
  }

}

@media (max-width: 767.98px) {

  /* add space above shipping card */
  .cm-sc-shipping {
    margin-top: 1rem;
  }

  /* reduce gap before order total */
  .cm-sc-order-total {
    margin-top: -.5rem;
  }

  /* remove excessive bootstrap spacing wrapper */
  .cm-sc-twopage-checkout .mt-3 {
    margin-top: .75rem !important;
  }

}

/* CART PRODUCT IMAGES */
.cart-product-image {
  max-width: 140px;
  height: auto;
}

@media (max-width: 767.98px) {

  .cart-image-col {
    width: 90px !important;
    padding: .5rem !important;
    vertical-align: top;
  }

  .cart-product-image {
    max-width: 75px;
    height: auto;
  }

}

/* DESKTOP */
.cart-col-image  { width: 180px; }
.cart-col-product { width: auto; }
.cart-col-stock  { width: 80px; }
.cart-col-qty    { width: 100px; }
.cart-col-price  { width: 80px; }
.cart-col-remove { width: 60px; }

/* MOBILE */
@media (max-width: 767.98px) {

  .cart-col-image {
    width: 85px !important;
  }

  .cart-col-stock {
    display: none;
  }

  .cart-product-image {
    display: block;
    max-width: 75px;
    width: 75px;
    height: auto;
  }

  .cart-image-col {
    width: 85px !important;
    min-width: 85px;
    padding: .5rem !important;
    vertical-align: top;
  }

}

@media (max-width: 767.98px) {

  /* spacing below cart product listing */
  .cm-sc-product-listing {
    margin-bottom: 4px !important;
  }

  /* ensure shipping card always has top spacing */
  .cm-sc-shipping {
    margin-top: 1rem !important;
  }

  /* prevent collapsed bootstrap rows */
  .cm-sc-twopage-checkout .row {
    --bs-gutter-y: 1rem;
  }

}

@media (max-width: 767.98px) {

  .cm-sc-twopage-checkout::before {
    content: "";
    display: block;
    height: 4px;
  }

}

.pi-qty-buy {
  width: 100%;
}

.pi-qty-buy .pi-qty-input {
  max-width: 170px;
  flex-shrink: 0;
}

.pi-qty-buy .form-control {
  text-align: center;
  min-width: 60px;
}

.pi-qty-buy .btn-buy {
  border-radius: .5rem;
  font-weight: 600;
}

@media (max-width: 576px) {

  .pi-qty-buy {
    gap: .5rem;
  }

  .pi-qty-buy .pi-qty-input {
    max-width: 140px;
  }

}

.pi-qty-input {
  flex: 0 0 auto;
}

.pi-qty-input .input-group {
  width: auto !important;
}

.pi-buy-button {
  margin-left: .35rem;
}

.pi-qty-buy {
  display: inline-flex !important;
  align-items: stretch;
  flex-wrap: nowrap;
}

.pi-qty-input,
.pi-qty-input .input-group {
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.pi-qty-field {
  width: 44px !important;
  max-width: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pi-qty-input .spinner {
  width: 44px;
  padding-left: 0;
  padding-right: 0;
}

.pi-buy-button {
  margin-left: 6px;
}

.pi-qty-input {
  width: fit-content !important;
  flex: 0 0 auto !important;
}

.pi-qty-input .input-group {
  width: fit-content !important;
  flex-wrap: nowrap;
}

.pi-qty-input {
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.pi-qty-input .input-group {
  width: auto !important;
  display: inline-flex !important;
}

.pi-qty-buy {
  align-items: center;
}

.pi-buy-button {
  flex: none !important;
  margin-left: 4px;
}

/* Final spacing adjustment between qty and button */
.pi-buy-button {
  margin-left: 0.85rem !important;
}

.pi-out-of-stock {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem !important;
  padding: 0.65rem 1rem !important;
  font-weight: 600;
}

/* =========================================
   Qty + Buy Responsive Layout
========================================= */

.pi-qty-buy {
  gap: .75rem;
  width: 100%;
}

/* MOBILE */
@media (max-width: 575.98px) {

  .pi-qty-buy {
    flex-direction: column;
    align-items: stretch;
  }

  .pi-qty-input {
    width: 100%;
  }

  .pi-qty-input .input-group {
    width: 100%;
    justify-content: center;
  }

  .pi-qty-input .spinner {
    width: 52px;
    height: 52px;
    font-size: 1rem;
    border-radius: .75rem !important;
  }

  .pi-qty-field {
    height: 52px !important;
    max-width: 90px;
    font-size: 1rem !important;
    border-radius: .75rem !important;
  }

  .pi-buy-button {
    width: 100%;
    margin-left: 0 !important;
  }

  .pi-buy-button .btn-buy {
    width: 100%;
    min-height: 52px;
    border-radius: .75rem !important;
    font-size: 1rem !important;
    font-weight: 600;
  }

}

/* DESKTOP */
@media (min-width: 576px) {

  .pi-qty-buy {
    flex-direction: row;
    align-items: center;
  }

  .pi-buy-button {
    margin-left: .35rem;
  }

}

/* Remove Bootstrap validation icons from qty field */
.pi-qty-field,
.pi-qty-field:focus,
.pi-qty-field:valid,
.pi-qty-field:invalid {
  background-image: none !important;
  padding-right: 0 !important;
}

/* Remove mobile browser validation appearance */
.pi-qty-field::-webkit-validation-bubble,
.pi-qty-field::-webkit-validation-bubble-message {
  display: none;
}