@charset "UTF-8";
/* ==========================================================================
   MATHAIS SUPERMARKETS — FUTURISTIC SKIN
   --------------------------------------------------------------------------
   A presentation-only layer. It contains NO layout rewrites of page structure
   and NO behavioural hooks: every checkout, cart, address and auth flow keeps
   working exactly as before. Remove the single <link> tag in
   frontend/header.php to revert the site to its previous appearance.

   Palette sampled directly from assets/imgs/theme/logo_mathai.png:
     electric yellow  #FEF102      deep red   #DC1000
     signal red       #E8261A      ember      #EE5A17
     logo black       #000000
   Load order: must come AFTER mathais-colors.css.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand — straight from the logo */
  --mx-yellow:        #FEF102;
  --mx-yellow-600:    #FFD400;
  --mx-yellow-700:    #FFB800;
  --mx-red:           #DC1000;
  --mx-red-600:       #E8261A;
  --mx-red-700:       #B60D00;
  --mx-ember:         #EE5A17;

  /* Neutrals */
  --mx-ink:           #0B0B10;
  --mx-ink-soft:      #2A2A34;
  --mx-muted:         #6B6B79;
  --mx-line:          #E6E7EE;
  --mx-line-soft:     #F0F1F6;
  --mx-bg:            #F5F6FA;
  --mx-bg-2:          #EEF0F6;
  --mx-surface:       #FFFFFF;

  /* Semantic */
  --mx-success:       #12A150;
  --mx-success-ink:   #0B6B34;   /* AA-safe text on the success tint */
  --mx-warn-ink:      #7A4C00;   /* AA-safe text on the warning tint */
  --mx-warn:          #F5A524;
  --mx-danger:        var(--mx-red);
  --mx-info:          #2E6BE6;

  /* Signature gradients */
  --mx-grad:          linear-gradient(120deg, #FEF102 0%, #FFD400 38%, #EE5A17 72%, #DC1000 100%);
  /* Yellow-dominant variant: used wherever black text sits directly on the
     gradient across a wide element, so contrast never drops into the reds. */
  --mx-grad-y:        linear-gradient(120deg, #FEF102 0%, #FFE100 48%, #FFB800 100%);
  --mx-grad-soft:     linear-gradient(120deg, rgba(254,241,2,.16) 0%, rgba(238,90,23,.12) 55%, rgba(220,16,0,.10) 100%);
  --mx-grad-ink:      linear-gradient(135deg, #14141C 0%, #0B0B10 100%);
  --mx-grad-line:     linear-gradient(90deg, transparent, var(--mx-yellow) 18%, var(--mx-ember) 52%, var(--mx-red) 82%, transparent);

  /* Glass */
  --mx-glass:         rgba(255,255,255,.72);
  --mx-glass-strong:  rgba(255,255,255,.88);
  --mx-glass-border:  rgba(255,255,255,.65);
  --mx-blur:          saturate(180%) blur(16px);

  /* Elevation */
  --mx-sh-xs:  0 1px 2px rgba(11,11,16,.05);
  --mx-sh-sm:  0 2px 8px rgba(11,11,16,.06), 0 1px 2px rgba(11,11,16,.04);
  --mx-sh-md:  0 8px 24px rgba(11,11,16,.08), 0 2px 6px rgba(11,11,16,.04);
  --mx-sh-lg:  0 18px 48px rgba(11,11,16,.12), 0 4px 12px rgba(11,11,16,.06);
  --mx-glow-y: 0 0 0 1px rgba(254,241,2,.55), 0 8px 26px rgba(254,241,2,.38);
  --mx-glow-r: 0 0 0 1px rgba(220,16,0,.35), 0 10px 28px rgba(220,16,0,.28);

  /* Geometry */
  --mx-r-xs: 8px;
  --mx-r-sm: 12px;
  --mx-r:    16px;
  --mx-r-lg: 22px;
  --mx-r-xl: 28px;
  --mx-pill: 999px;

  /* Motion */
  --mx-ease:  cubic-bezier(.22,.61,.36,1);
  --mx-ease-out: cubic-bezier(.16,1,.3,1);
  --mx-fast:  .18s;
  --mx-mid:   .32s;
  --mx-slow:  .55s;
}

/* ==========================================================================
   2. BASE CANVAS + AMBIENT BACKDROP
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
  background-color: var(--mx-bg) !important;
  color: var(--mx-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Aurora wash + fine tech grid, painted behind everything. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
body::before {
  background:
    radial-gradient(60rem 32rem at 8% -8%,  rgba(254,241,2,.20), transparent 62%),
    radial-gradient(52rem 30rem at 98% 4%,  rgba(220,16,0,.10),  transparent 60%),
    radial-gradient(46rem 30rem at 50% 112%, rgba(238,90,23,.09), transparent 62%);
}
body::after {
  background-image:
    linear-gradient(rgba(11,11,16,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,11,16,.028) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  z-index: -1;
  opacity: .8;
}

/* Content shells sit on the canvas, not on flat white. */
.main,
#footers { background: transparent !important; }

::selection { background: var(--mx-yellow); color: #000; }

/* Branded scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--mx-yellow-600) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mx-line-soft); border-radius: var(--mx-pill); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--mx-yellow), var(--mx-ember));
  border-radius: var(--mx-pill);
  border: 2px solid var(--mx-bg);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--mx-yellow-600), var(--mx-red)); }

/* Keyboard focus ring — accessible and on-brand */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mx-red) !important;
  outline-offset: 2px !important;
  border-radius: var(--mx-r-xs);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.heading-2, .widget-title, .section-header {
  color: var(--mx-ink);
  letter-spacing: -.02em;
  font-weight: 700;
}
h1, .heading-1 { letter-spacing: -.03em; }

/* Section headings get a gradient rule beneath them. */
.section-title,
.heading-2,
.related-products h2 {
  position: relative;
  padding-bottom: 12px;
}
.section-title::after,
.heading-2::after,
.related-products h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: 4px;
  border-radius: var(--mx-pill);
  background: var(--mx-grad);
  box-shadow: 0 2px 10px rgba(254,241,2,.55);
}
.section-title.style-2 { align-items: center; }

.page-header {
  background: var(--mx-glass) !important;
  backdrop-filter: var(--mx-blur);
  -webkit-backdrop-filter: var(--mx-blur);
  border: 1px solid var(--mx-glass-border);
  border-radius: var(--mx-r-lg);
  box-shadow: var(--mx-sh-sm);
  padding: 18px 24px !important;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mx-grad-line);
}
.page-header h1 { margin-bottom: 4px; }
.breadcrumb a { color: var(--mx-muted) !important; transition: color var(--mx-fast) var(--mx-ease); }
.breadcrumb a:hover { color: var(--mx-red) !important; }
.breadcrumb span { color: var(--mx-ink) !important; font-weight: 600; }

/* ==========================================================================
   4. HEADER — top strip, middle bar, sticky nav
   ========================================================================== */
.header-top {
  background: var(--mx-grad-ink) !important;
  color: #F2F2F7 !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}
.header-top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--mx-grad-line);
}
.header-top .promo-wrapper p,
.header-top .header-info-right ul li a,
.header-top .scheduled-delivery-btn,
.header-top .order-tracking-btn { color: #E9E9F0 !important; }

.header-top .promo-wrapper p {
  font-weight: 500;
  letter-spacing: .01em;
}
.header-top .promo-wrapper p strong { color: var(--mx-yellow) !important; }

.header-top .scheduled-delivery-btn,
.header-top .order-tracking-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: var(--mx-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  transition: all var(--mx-fast) var(--mx-ease);
}
.header-top .scheduled-delivery-btn i,
.header-top .order-tracking-btn i { color: var(--mx-yellow) !important; }
.header-top .scheduled-delivery-btn:hover,
.header-top .order-tracking-btn:hover {
  color: #000 !important;
  background: var(--mx-yellow) !important;
  border-color: var(--mx-yellow);
  box-shadow: 0 4px 16px rgba(254,241,2,.35);
}
.header-top .scheduled-delivery-btn:hover i,
.header-top .order-tracking-btn:hover i { color: #000 !important; }

.header-top .header-info-right ul li a {
  border-bottom: 1px dashed rgba(254,241,2,.5);
  padding-bottom: 1px;
}
.header-top .header-info-right ul li a:hover { color: var(--mx-yellow) !important; }

/* --- Middle bar: logo, department select, search --- */
.header-middle {
  background: var(--mx-glass-strong) !important;
  backdrop-filter: var(--mx-blur);
  -webkit-backdrop-filter: var(--mx-blur);
  border-bottom: 1px solid var(--mx-line) !important;
}
.logo img { transition: transform var(--mx-mid) var(--mx-ease-out), filter var(--mx-mid) var(--mx-ease); }
.logo a:hover img { transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 8px 18px rgba(220,16,0,.28)); }

/* Search cluster becomes one continuous capsule. */
.header-middle .header-right > .d-flex:first-child {
  border-radius: var(--mx-pill);
  box-shadow: var(--mx-sh-sm);
  background: #fff;
  overflow: hidden;
  border: 1.5px solid var(--mx-line);
  transition: border-color var(--mx-fast) var(--mx-ease), box-shadow var(--mx-mid) var(--mx-ease);
}
.header-middle .header-right > .d-flex:first-child:focus-within {
  border-color: var(--mx-yellow-600);
  box-shadow: 0 0 0 4px rgba(254,241,2,.22), var(--mx-sh-md);
}
.header-middle select {
  border: none !important;
  border-right: 1px solid var(--mx-line) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--mx-ink) !important;
  font-weight: 600;
  padding-left: 18px !important;
  cursor: pointer;
}
.header-middle select:focus { box-shadow: none !important; border-color: transparent !important; }

.header-middle #searchInput {
  border: none !important;
  background-color: transparent !important;
  color: var(--mx-ink) !important;
  padding-left: 16px;
  font-size: 14px;
}
.header-middle #searchInput::placeholder { color: var(--mx-muted); }
.header-middle #searchInput:focus { box-shadow: none !important; border: none !important; }

.header-middle #searchButton {
  background: var(--mx-grad) !important;
  background-size: 180% 180% !important;
  border: none !important;
  border-radius: 0 !important;
  color: #000 !important;
  font-weight: 700;
  transition: background-position var(--mx-mid) var(--mx-ease), box-shadow var(--mx-mid) var(--mx-ease), color var(--mx-fast) var(--mx-ease);
}
.header-middle #searchButton:hover {
  background-position: 100% 50% !important;
  color: #fff !important;
  box-shadow: inset 0 0 24px rgba(0,0,0,.18);
}

/* --- Header action icons --- */
.header-action-2 .location-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--mx-pill);
  background: rgba(254,241,2,.14);
  border: 1px solid rgba(254,241,2,.55);
  color: var(--mx-ink) !important;
  font-weight: 600;
  transition: all var(--mx-fast) var(--mx-ease);
}
.header-action-2 .location-link i { color: var(--mx-red) !important; }
.header-action-2 .location-link:hover {
  background: var(--mx-yellow) !important;
  color: #000 !important;
  border-color: var(--mx-yellow);
  box-shadow: 0 6px 18px rgba(254,241,2,.42);
  transform: translateY(-1px);
}
.header-action-2 .location-link:hover i { color: var(--mx-red) !important; }

.header-action-icon-2 { transition: transform var(--mx-fast) var(--mx-ease); }
.header-action-icon-2:hover { transform: translateY(-2px); }
.header-action-icon-2 .lable { color: var(--mx-ink) !important; font-weight: 600; }
.header-action-icon-2:hover .lable { color: var(--mx-red) !important; }
.header-action-icon-2:hover .svgInject path { fill: var(--mx-red) !important; }

.header-action-icon-2 .pro-count {
  background: var(--mx-red) !important;
  background-image: linear-gradient(135deg, var(--mx-red-600), var(--mx-red-700)) !important;
  color: #fff !important;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(220,16,0,.45);
  min-width: 20px !important;
  height: 20px !important;
  font-size: 10.5px !important;
}
/* Live pulse on the cart badge */
.header-action-icon-2 .mini-cart-icon::after {
  content: "";
  position: absolute;
  top: -2px; right: -4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(220,16,0,.55);
  animation: mxPulse 2.6s var(--mx-ease-out) infinite;
  pointer-events: none;
}
@keyframes mxPulse {
  0%   { transform: scale(.72); opacity: .85; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* Account dropdown */
.account-dropdown,
.cart-dropdown-wrap {
  border-top: none !important;
  border-radius: var(--mx-r) !important;
  background: var(--mx-glass-strong) !important;
  backdrop-filter: var(--mx-blur);
  -webkit-backdrop-filter: var(--mx-blur);
  border: 1px solid var(--mx-line) !important;
  box-shadow: var(--mx-sh-lg) !important;
  overflow: hidden;
}
.account-dropdown::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mx-grad);
}
.account-dropdown ul li a {
  border-radius: var(--mx-r-xs);
  transition: all var(--mx-fast) var(--mx-ease);
}
.account-dropdown ul li a:hover {
  color: var(--mx-red) !important;
  background: rgba(254,241,2,.18) !important;
  padding-left: 16px;
}

/* --- Sticky nav bar --- */
.header-bottom {
  background: var(--mx-glass-strong) !important;
  backdrop-filter: var(--mx-blur);
  -webkit-backdrop-filter: var(--mx-blur);
  border-top: none !important;
  border-bottom: 1px solid var(--mx-line) !important;
  box-shadow: var(--mx-sh-sm) !important;
  position: relative;
}
.header-bottom::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--mx-grad-line);
  opacity: .9;
}
.header-bottom.sticky-bar.stick,
.sticky-bar.stick {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(190%) blur(20px);
  -webkit-backdrop-filter: saturate(190%) blur(20px);
  box-shadow: var(--mx-sh-md) !important;
}

/* "All Categories" pill */
.header-bottom .nav-link.dropdown-toggle {
  background: var(--mx-grad) !important;
  background-size: 200% 200% !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: var(--mx-pill) !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 16px rgba(254,241,2,.34);
  transition: background-position var(--mx-mid) var(--mx-ease), box-shadow var(--mx-mid) var(--mx-ease), transform var(--mx-fast) var(--mx-ease), color var(--mx-fast) var(--mx-ease);
}
.header-bottom .nav-link.dropdown-toggle:hover {
  background-position: 100% 50% !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--mx-glow-r);
}
.header-bottom .nav-link.dropdown-toggle:hover i { color: #fff !important; }

/* Main menu links with sliding gradient underline */
.main-menu nav ul li a {
  position: relative;
  color: var(--mx-ink) !important;
  font-weight: 600 !important;
  transition: color var(--mx-fast) var(--mx-ease);
}
.main-menu nav ul li > a::before {
  content: "";
  position: absolute;
  left: 50%; right: 50%;
  bottom: 8px;
  height: 3px;
  border-radius: var(--mx-pill);
  background: var(--mx-grad);
  opacity: 0;
  transition: left var(--mx-mid) var(--mx-ease-out), right var(--mx-mid) var(--mx-ease-out), opacity var(--mx-fast) var(--mx-ease);
}
.main-menu nav ul li > a:hover::before,
.main-menu nav ul li.active > a::before {
  left: 12px; right: 12px;
  opacity: 1;
}
.main-menu nav ul li a:hover { color: var(--mx-red) !important; }

/* Mega menu */
.mega-menu {
  border-top: none !important;
  border-radius: var(--mx-r-lg) !important;
  background: var(--mx-glass-strong) !important;
  backdrop-filter: var(--mx-blur);
  -webkit-backdrop-filter: var(--mx-blur);
  border: 1px solid var(--mx-line) !important;
  box-shadow: var(--mx-sh-lg) !important;
  padding-top: 14px !important;
}
.mega-menu::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--mx-r-lg) var(--mx-r-lg) 0 0;
  background: var(--mx-grad);
}
.category-list .category-item a {
  border-bottom: 1px solid var(--mx-line-soft) !important;
  border-radius: var(--mx-r-xs);
  font-weight: 600 !important;
  transition: all var(--mx-fast) var(--mx-ease);
}
.category-list .category-item a:hover,
.category-item.active .dropdown-item {
  color: var(--mx-red) !important;
  background: rgba(254,241,2,.18) !important;
  padding-left: 14px;
}
.subcategory-title {
  border-left: 3px solid transparent !important;
  border-image: var(--mx-grad) 1;
  color: var(--mx-ink) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .06em;
}
.subcategory-items a:hover {
  color: var(--mx-red) !important;
  background: rgba(254,241,2,.14) !important;
  border-radius: var(--mx-r-xs);
}
.subcategory-items::-webkit-scrollbar-thumb { background: var(--mx-yellow-600); }

/* Hotline block */
.hotline p { color: var(--mx-ink) !important; font-weight: 700; }
.hotline p span { color: var(--mx-muted) !important; font-weight: 500; }
.whatsapp-link { transition: transform var(--mx-fast) var(--mx-ease), filter var(--mx-fast) var(--mx-ease); }
.whatsapp-link:hover { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 6px 14px rgba(37,211,102,.45)); }

/* Burger */
.burger-icon span { background-color: var(--mx-ink) !important; }
.burger-icon:hover span { background-color: var(--mx-red) !important; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn,
.btn-primary,
.add-to-cart-btn,
.button-add-to-cart,
.see-more-btn,
.edit-profile-btn,
.view-details,
.btn-call,
.btn-login,
.btn-register,
.redeem-btn,
.subscribe-btn,
.newsletter-form .subscribe-btn,
#placeorder,
#repeatOrder,
#applyPriceFilterBtn,
.modal-footer .button,
.search-box button {
  position: relative;
  border-radius: var(--mx-pill) !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  border: none !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--mx-fast) var(--mx-ease),
              box-shadow var(--mx-mid) var(--mx-ease),
              background-position var(--mx-mid) var(--mx-ease),
              color var(--mx-fast) var(--mx-ease);
}

/* Primary — the signature gradient */
.btn-primary,
.add-to-cart-btn,
.button-add-to-cart,
.btn-login,
.btn-register,
.redeem-btn,
.newsletter-form .subscribe-btn,
#placeorder,
#repeatOrder,
#applyPriceFilterBtn,
.modal-footer .button,
.search-box button,
.cart-action .btn {
  background: var(--mx-grad) !important;
  background-size: 200% 200% !important;
  color: #000 !important;
  box-shadow: 0 6px 20px rgba(254,241,2,.32), var(--mx-sh-xs);
}
.btn-primary:hover,
.add-to-cart-btn:hover,
.button-add-to-cart:hover,
.btn-login:hover,
.btn-register:hover,
.redeem-btn:hover,
.newsletter-form .subscribe-btn:hover,
#placeorder:hover,
#repeatOrder:hover,
#applyPriceFilterBtn:hover,
.modal-footer .button:hover,
.search-box button:hover,
.cart-action .btn:hover {
  background-position: 100% 50% !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--mx-glow-r), var(--mx-sh-md);
}
.btn-primary:active,
.add-to-cart-btn:active,
.button-add-to-cart:active,
#placeorder:active { transform: translateY(0) scale(.98); }

/* Sheen sweep on hover */
.btn-primary::after,
.add-to-cart-btn::after,
.button-add-to-cart::after,
.btn-login::after,
.btn-register::after,
#placeorder::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg);
  transition: left var(--mx-slow) var(--mx-ease-out);
  z-index: -1;
}
.btn-primary:hover::after,
.add-to-cart-btn:hover::after,
.button-add-to-cart:hover::after,
.btn-login:hover::after,
.btn-register:hover::after,
#placeorder:hover::after { left: 130%; }

/* Secondary / ghost */
.see-more-btn,
.view-details,
.btn-call,
.edit-profile-btn,
.btn-outline-secondary,
.btn-secondary {
  background: rgba(255,255,255,.8) !important;
  color: var(--mx-ink) !important;
  border: 1.5px solid var(--mx-line) !important;
  box-shadow: var(--mx-sh-xs);
}
.see-more-btn:hover,
.view-details:hover,
.btn-call:hover,
.edit-profile-btn:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover {
  border-color: var(--mx-yellow-600) !important;
  background: rgba(254,241,2,.16) !important;
  color: var(--mx-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(254,241,2,.28);
}

/* Destructive */
.btn-delete-address,
.btn-remove-from-cart,
.btn-danger {
  background: rgba(220,16,0,.08) !important;
  color: var(--mx-red) !important;
  border: 1.5px solid rgba(220,16,0,.28) !important;
  border-radius: var(--mx-pill) !important;
  transition: all var(--mx-fast) var(--mx-ease);
}
.btn-delete-address:hover,
.btn-remove-from-cart:hover,
.btn-danger:hover {
  background: var(--mx-red) !important;
  color: #fff !important;
  border-color: var(--mx-red) !important;
  box-shadow: var(--mx-glow-r);
}

.btn:disabled,
.btn[disabled],
button:disabled { opacity: .5 !important; filter: grayscale(.4); box-shadow: none !important; transform: none !important; }

/* ==========================================================================
   6. CARDS & SURFACES
   ========================================================================== */
.product-card,
.category-card,
.login-card,
.register-card,
.profile-card,
.address-card,
.wallet-card,
.cart-totals,
.location-card,
.delivery-options,
.payment,
.order-no,
.repeat-order,
.track,
.table-container,
.cart-summary,
.category-sidebar,
.orders-placed,
.main-content,
.sidebar {
  background: var(--mx-glass) !important;
  backdrop-filter: var(--mx-blur);
  -webkit-backdrop-filter: var(--mx-blur);
  border: 1px solid var(--mx-glass-border) !important;
  border-radius: var(--mx-r) !important;
  box-shadow: var(--mx-sh-sm) !important;
  transition: transform var(--mx-mid) var(--mx-ease-out),
              box-shadow var(--mx-mid) var(--mx-ease),
              border-color var(--mx-mid) var(--mx-ease);
}

/* --- Product card --- */
.product-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--mx-r-lg) !important;
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--mx-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--mx-mid) var(--mx-ease);
  pointer-events: none;
  z-index: 2;
}
.product-card:hover::before { opacity: 1; }

.product-img img,
.product-img-action-wrap img {
  transition: transform var(--mx-slow) var(--mx-ease-out);
  will-change: transform;
}
.product-card:hover .product-img img,
.product-card:hover .default-img { transform: scale(1.07); }

.product-img-action-wrap {
  border-radius: var(--mx-r) !important;
  overflow: hidden;
  background: linear-gradient(160deg, #FFFFFF, #F4F5FA);
}

.product-title a {
  color: var(--mx-ink) !important;
  font-weight: 600;
  transition: color var(--mx-fast) var(--mx-ease);
}
.product-title a:hover { color: var(--mx-red) !important; }

/* Prices */
.current-price,
.cart-totals .cart_total_amount,
.product-price .current-price,
.price {
  color: var(--mx-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}
.old-price,
.original-price {
  color: var(--mx-muted) !important;
  text-decoration-color: var(--mx-red);
  font-weight: 500;
}
.price-saved {
  background: rgba(18,161,80,.12) !important;
  color: var(--mx-success-ink) !important;
  border-radius: var(--mx-pill);
  padding: 2px 10px;
  font-weight: 700;
  font-size: 11px;
}

/* Badges */
.product-badges span,
.product-badges .hot,
.product-badges .sale,
.product-badges .new,
.discount-badge {
  border-radius: var(--mx-pill) !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px !important;
  box-shadow: var(--mx-sh-sm);
  backdrop-filter: blur(6px);
}
.product-badges .hot,
.discount-badge {
  background: linear-gradient(135deg, var(--mx-red-600), var(--mx-red-700)) !important;
  color: #fff !important;
}
.product-badges .sale {
  background: linear-gradient(135deg, var(--mx-yellow), var(--mx-yellow-700)) !important;
  color: #000 !important;
}
.product-badges .new {
  background: linear-gradient(135deg, #14141C, #2A2A34) !important;
  color: var(--mx-yellow) !important;
}

/* Stock chips */
.in-stock, .low-stock, .out-of-stock, .stock-count {
  border-radius: var(--mx-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}
.in-stock   { background: rgba(18,161,80,.12) !important;  color: var(--mx-success-ink) !important; }
.low-stock  { background: rgba(245,165,36,.14) !important; color: var(--mx-warn-ink) !important; }
.out-of-stock { background: rgba(220,16,0,.10) !important; color: var(--mx-red) !important; }

.favorite-icon {
  background: var(--mx-glass-strong) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--mx-glass-border) !important;
  border-radius: 50% !important;
  box-shadow: var(--mx-sh-sm);
  transition: all var(--mx-fast) var(--mx-ease);
}
.favorite-icon:hover {
  background: var(--mx-red) !important;
  color: #fff !important;
  border-color: var(--mx-red) !important;
  transform: scale(1.12);
  box-shadow: var(--mx-glow-r);
}

/* --- Category tiles --- */
.category-card {
  border-radius: var(--mx-r-lg) !important;
  overflow: hidden;
  position: relative;
}
.category-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--mx-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mx-mid) var(--mx-ease-out);
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mx-sh-lg) !important;
}
.category-card:hover::after { transform: scaleX(1); }
.category-image { transition: transform var(--mx-mid) var(--mx-ease-out); }
.category-card:hover .category-image { transform: scale(1.06); }
.category-card span,
.category-card .fw-bold { color: var(--mx-ink) !important; transition: color var(--mx-fast) var(--mx-ease); }
.category-card:hover span,
.category-card:hover .fw-bold { color: var(--mx-red) !important; }

/* --- Quantity steppers --- */
.quantity-input,
.quantity-control {
  border-radius: var(--mx-pill) !important;
  background: #fff !important;
  border: 1.5px solid var(--mx-line) !important;
  overflow: hidden;
  box-shadow: var(--mx-sh-xs);
  transition: border-color var(--mx-fast) var(--mx-ease), box-shadow var(--mx-fast) var(--mx-ease);
}
.quantity-input:focus-within,
.quantity-control:focus-within {
  border-color: var(--mx-yellow-600) !important;
  box-shadow: 0 0 0 4px rgba(254,241,2,.2);
}
.quantity-input .qty-btn,
.quantity-control .qty-btn,
.quantity-control .qty-btns {
  background: transparent !important;
  color: var(--mx-ink) !important;
  border: none !important;
  font-weight: 800;
  transition: background var(--mx-fast) var(--mx-ease), color var(--mx-fast) var(--mx-ease);
}
.quantity-input .qty-btn:hover,
.quantity-control .qty-btn:hover,
.quantity-control .qty-btns:hover {
  background: var(--mx-yellow) !important;
  color: #000 !important;
}
.quantity-input .qty-vals,
.quantity-control .qty-display {
  border: none !important;
  background: transparent !important;
  color: var(--mx-ink) !important;
  font-weight: 700;
  text-align: center;
  box-shadow: none !important;
}
.quantity-input .qty-vals:focus { box-shadow: none !important; outline: none !important; }

/* --- Slider arrows --- */
.slider-btn,
.slider-overlay-btn,
.related-products .custom-nav button,
.slider-arrow button,
.hero-slider-1-arrow button {
  background: var(--mx-glass-strong) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--mx-glass-border) !important;
  border-radius: 50% !important;
  color: var(--mx-ink) !important;
  box-shadow: var(--mx-sh-md) !important;
  transition: all var(--mx-fast) var(--mx-ease);
}
.slider-btn:hover,
.slider-overlay-btn:hover,
.related-products .custom-nav button:hover {
  background: var(--mx-grad-y) !important;
  color: #000 !important;
  border-color: transparent !important;
  transform: scale(1.1);
  box-shadow: var(--mx-glow-y) !important;
}

/* Out-of-stock treatment */
.out-of-stock-overlay {
  background: rgba(245,246,250,.72) !important;
  backdrop-filter: blur(3px);
  border-radius: var(--mx-r) !important;
}
.out-of-stock-info {
  background: var(--mx-ink) !important;
  color: var(--mx-yellow) !important;
  border-radius: var(--mx-pill) !important;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ==========================================================================
   7. FORMS
   ========================================================================== */
.form-control,
.form-select,
.login-form input,
.register-form input,
.search-box input,
.newsletter-form input[type="email"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
  border-radius: var(--mx-r-sm) !important;
  border: 1.5px solid var(--mx-line) !important;
  background: rgba(255,255,255,.9) !important;
  color: var(--mx-ink) !important;
  transition: border-color var(--mx-fast) var(--mx-ease),
              box-shadow var(--mx-fast) var(--mx-ease),
              background var(--mx-fast) var(--mx-ease);
}
.form-control:focus,
.form-select:focus,
.search-box input:focus,
.newsletter-form input[type="email"]:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--mx-yellow-600) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(254,241,2,.22) !important;
  outline: none !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--mx-muted); }
.form-label {
  color: var(--mx-ink-soft) !important;
  font-weight: 600 !important;
  font-size: 13px;
  letter-spacing: .01em;
}
.form-text { color: var(--mx-muted) !important; }

.input-group-text {
  background: var(--mx-line-soft) !important;
  border: 1.5px solid var(--mx-line) !important;
  color: var(--mx-muted) !important;
  border-radius: var(--mx-r-sm) !important;
}
.input-group .form-control { border-radius: var(--mx-r-sm) !important; }
.input-group > :not(:first-child) { margin-left: -1px; }

/* Checkboxes / radios */
.form-check-input:checked,
.custome-radio .form-check-input:checked {
  background-color: var(--mx-red) !important;
  border-color: var(--mx-red) !important;
  box-shadow: 0 0 0 3px rgba(220,16,0,.16);
}
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(254,241,2,.25) !important; border-color: var(--mx-yellow-600) !important; }

.custome-radio,
.location-card .form-check {
  border-radius: var(--mx-r-sm) !important;
  border: 1.5px solid var(--mx-line) !important;
  transition: all var(--mx-fast) var(--mx-ease);
}
.custome-radio:hover,
.location-card .form-check:hover {
  border-color: var(--mx-yellow-600) !important;
  background: rgba(254,241,2,.10) !important;
}
.custome-radio .text-brand,
.text-brand { color: var(--mx-red) !important; }

/* OTP boxes */
.otp-input {
  text-align: center;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: .1em;
  border-radius: var(--mx-r-sm) !important;
}

/* Category filter checkboxes */
.category-checkbox {
  border-radius: var(--mx-r-sm);
  transition: background var(--mx-fast) var(--mx-ease);
  padding: 4px 8px;
}
.category-checkbox:hover { background: rgba(254,241,2,.14); }
.category-checkbox input[type="checkbox"],
.category-checkbox input[type="radio"] { accent-color: var(--mx-red); }

/* Range slider (item-list price filter) */
.slider-fill, .irs-bar { background: var(--mx-grad) !important; }
.slider-track { background: var(--mx-line) !important; border-radius: var(--mx-pill) !important; }
.slider-track-wrap input[type=range]::-webkit-slider-thumb {
  background: #fff !important;
  border: 3px solid var(--mx-red) !important;
  box-shadow: var(--mx-sh-sm);
}
.irs-handle { border-color: var(--mx-red) !important; }
.irs-from, .irs-to, .irs-single {
  background: var(--mx-red) !important;
  border-radius: var(--mx-pill) !important;
  font-weight: 700;
}

/* ==========================================================================
   8. TABLES
   ========================================================================== */
.table-wishlist,
.orders-table,
.order_table table,
.cart-totals table,
.table {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: var(--mx-r) !important;
  overflow: hidden;
  background: transparent;
}
.table-wishlist th,
.orders-table th,
.table thead th,
.order_table thead th {
  background: var(--mx-grad-ink) !important;
  color: #F2F2F7 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .07em;
  border: none !important;
  padding: 14px 16px !important;
}
.table-wishlist td,
.orders-table td,
.table tbody td,
.order_table td {
  border: none !important;
  border-bottom: 1px solid var(--mx-line-soft) !important;
  vertical-align: middle;
  color: var(--mx-ink-soft) !important;
}
.table-wishlist tbody tr,
.orders-table tbody tr,
.table tbody tr { transition: background var(--mx-fast) var(--mx-ease), transform var(--mx-fast) var(--mx-ease); }
.table-wishlist tbody tr:hover,
.orders-table tr:hover td,
.table tbody tr:hover { background: rgba(254,241,2,.10) !important; }

.table-wishlist .product-thumbnail img,
.order_table img {
  border-radius: var(--mx-r-sm) !important;
  border: 1px solid var(--mx-line);
  background: #fff;
}

.cart-items-scroll, .scroller { scrollbar-color: var(--mx-yellow-600) transparent; }

/* Order status chips */
.status {
  display: inline-block;
  white-space: nowrap;
  border-radius: var(--mx-pill) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: .04em;
  padding: 5px 14px !important;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.4;
}
.status-received  { background: rgba(46,107,230,.12) !important; color: var(--mx-info) !important;    border-color: rgba(46,107,230,.28) !important; }
.status-confirmed { background: rgba(254,241,2,.22) !important;  color: #7A6A00 !important;          border-color: rgba(255,184,0,.5) !important; }
.status-packed    { background: rgba(238,90,23,.12) !important;  color: #8A3204 !important;          border-color: rgba(238,90,23,.3) !important; }
.status-delivery  { background: rgba(220,16,0,.10) !important;   color: var(--mx-red) !important;    border-color: rgba(220,16,0,.28) !important; }
.status-delivered { background: rgba(18,161,80,.12) !important;  color: var(--mx-success-ink) !important;border-color: rgba(18,161,80,.3) !important; }

/* Order tracking timeline */
.order-status i {
  border-radius: 50%;
  transition: all var(--mx-mid) var(--mx-ease);
}
.order-status.active i {
  background: var(--mx-grad-y) !important;
  color: #000 !important;
  box-shadow: var(--mx-glow-y);
}
.order-status.active p { color: var(--mx-ink) !important; font-weight: 700; }

/* Empty states */
.no-orders, .no-results, .no-addresses {
  background: var(--mx-glass) !important;
  border: 1.5px dashed var(--mx-line) !important;
  border-radius: var(--mx-r-lg) !important;
  color: var(--mx-muted) !important;
}
.no-results i, .no-addresses .no-addresses-icon {
  background: var(--mx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   9. ACCOUNT AREA — sidebar, profile, addresses, wallet
   ========================================================================== */
.profile-container { background: transparent !important; }

.sidebar { padding: 14px !important; }
.sidebar .nav-link {
  border-radius: var(--mx-r-sm) !important;
  color: var(--mx-ink-soft) !important;
  font-weight: 600;
  position: relative;
  transition: all var(--mx-fast) var(--mx-ease);
}
.sidebar .nav-link i { color: var(--mx-muted) !important; transition: color var(--mx-fast) var(--mx-ease); }
.sidebar .nav-link:hover {
  background: rgba(254,241,2,.16) !important;
  color: var(--mx-ink) !important;
  transform: translateX(3px);
}
.sidebar .nav-link.active {
  background: var(--mx-grad-y) !important;
  color: #000 !important;
  box-shadow: 0 6px 18px rgba(254,241,2,.34);
}
.sidebar .nav-link.active i,
.sidebar .nav-link:hover i { color: var(--mx-red) !important; }
.sidebar .nav-link.active i { color: #000 !important; }

.profile-card { text-align: center; }
.profile-card .user-avatar {
  border-radius: 50% !important;
  padding: 3px;
  background: var(--mx-grad);
  box-shadow: var(--mx-glow-y);
}
.profile-card .user-name { color: var(--mx-ink) !important; font-weight: 700; }
.profile-card .user-email { color: var(--mx-muted) !important; }

.section-header {
  border-bottom: 1px solid var(--mx-line) !important;
  position: relative;
  padding-bottom: 12px;
}
.section-header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 64px; height: 3px;
  border-radius: var(--mx-pill);
  background: var(--mx-grad);
}

.account-info-item {
  background: rgba(255,255,255,.6) !important;
  border: 1px solid var(--mx-line-soft) !important;
  border-radius: var(--mx-r-sm) !important;
  transition: all var(--mx-fast) var(--mx-ease);
}
.account-info-item:hover { border-color: var(--mx-yellow-600) !important; box-shadow: var(--mx-sh-sm); }
.account-info-item label { color: var(--mx-muted) !important; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; font-weight: 700; }
.account-info-item span { color: var(--mx-ink) !important; font-weight: 600; }

.address-card:hover {
  transform: translateY(-4px);
  border-color: var(--mx-yellow-600) !important;
  box-shadow: var(--mx-sh-md) !important;
}
.address-card.default-address {
  border-color: transparent !important;
  box-shadow: var(--mx-glow-y), var(--mx-sh-sm) !important;
  background: linear-gradient(160deg, rgba(254,241,2,.14), rgba(255,255,255,.9)) !important;
}
.address-card .card-text i { color: var(--mx-red) !important; }
.default-indicator {
  background: var(--mx-grad-y) !important;
  color: #000 !important;
  border-radius: var(--mx-pill) !important;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px !important;
}
.btn-address { border-radius: var(--mx-pill) !important; font-weight: 700 !important; transition: all var(--mx-fast) var(--mx-ease); }
.btn-edit-address {
  background: rgba(254,241,2,.18) !important;
  color: var(--mx-ink) !important;
  border: 1.5px solid rgba(255,184,0,.5) !important;
}
.btn-edit-address:hover { background: var(--mx-yellow) !important; box-shadow: 0 6px 16px rgba(254,241,2,.4); }

.add-new-address-card {
  border: 2px dashed var(--mx-line) !important;
  border-radius: var(--mx-r) !important;
  background: rgba(255,255,255,.45) !important;
  transition: all var(--mx-mid) var(--mx-ease);
}
.add-new-address-card:hover {
  border-color: var(--mx-yellow-600) !important;
  background: rgba(254,241,2,.12) !important;
  transform: translateY(-4px);
}
.add-new-address-card i,
.add-new-address-card:hover i {
  background: var(--mx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Wallet */
.wallet-card {
  background: var(--mx-grad-ink) !important;
  color: #F2F2F7 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--mx-r-lg) !important;
  position: relative;
  overflow: hidden;
  box-shadow: var(--mx-sh-lg) !important;
}
.wallet-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(254,241,2,.35), transparent 62%);
  pointer-events: none;
}
.wallet-card h1, .wallet-card h2, .wallet-card h3,
.wallet-card h4, .wallet-card p, .wallet-card span { color: inherit !important; }
.barcode-container {
  background: #fff !important;
  border-radius: var(--mx-r) !important;
  box-shadow: var(--mx-sh-sm);
}
.info-text { color: var(--mx-muted) !important; }

/* ==========================================================================
   10. AUTH PAGES
   ========================================================================== */
.login-body, .login-container {
  background: transparent !important;
}
.login-card,
.register-card {
  border-radius: var(--mx-r-xl) !important;
  box-shadow: var(--mx-sh-lg) !important;
  background: var(--mx-glass-strong) !important;
  position: relative;
  overflow: hidden;
}
.login-card::before,
.register-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--mx-grad);
}
.register-logo img { filter: drop-shadow(0 8px 20px rgba(220,16,0,.22)); }
.password-toggle { color: var(--mx-muted); cursor: pointer; transition: color var(--mx-fast) var(--mx-ease); }
.password-toggle:hover { color: var(--mx-red); }
.signup-link a, .login-link a, .back-to-login a {
  color: var(--mx-red) !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(220,16,0,.3);
  transition: border-color var(--mx-fast) var(--mx-ease);
}
.signup-link a:hover, .login-link a:hover, .back-to-login a:hover { border-color: var(--mx-red); }
.countdown { color: var(--mx-red) !important; font-weight: 700; }

/* ==========================================================================
   11. MODALS
   ========================================================================== */
.modal-content,
.filter-modal .modal-content,
#priceModal .modal-content,
.branch-modal .branch-modal-content {
  border: 1px solid var(--mx-glass-border) !important;
  border-radius: var(--mx-r-lg) !important;
  background: var(--mx-glass-strong) !important;
  backdrop-filter: var(--mx-blur);
  -webkit-backdrop-filter: var(--mx-blur);
  box-shadow: var(--mx-sh-lg) !important;
  overflow: hidden;
}
.modal-header {
  background: var(--mx-grad-ink) !important;
  color: #F2F2F7 !important;
  border-bottom: none !important;
  position: relative;
}
.modal-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--mx-grad-line);
}
.modal-title { color: #fff !important; font-weight: 700 !important; letter-spacing: -.01em; }
.modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .8;
  transition: opacity var(--mx-fast) var(--mx-ease), transform var(--mx-fast) var(--mx-ease);
}
.modal-header .btn-close:hover { opacity: 1; transform: rotate(90deg); }
.modal-footer { border-top: 1px solid var(--mx-line) !important; }
.modal-backdrop.show { background: rgba(11,11,16,.55); backdrop-filter: blur(4px); }

.filter-modal .section-title { font-size: 15px; }
.filter-modal .item-count {
  background: rgba(254,241,2,.2) !important;
  color: var(--mx-ink) !important;
  border-radius: var(--mx-pill);
  padding: 1px 8px;
  font-weight: 700;
  font-size: 11px;
}
.price-box, .price-inputs input {
  border-radius: var(--mx-r-sm) !important;
  border: 1.5px solid var(--mx-line) !important;
}

/* SweetAlert2 — used across cart/checkout flows */
.swal2-popup {
  border-radius: var(--mx-r-lg) !important;
  box-shadow: var(--mx-sh-lg) !important;
  font-family: inherit !important;
}
.swal2-title { color: var(--mx-ink) !important; font-weight: 700 !important; letter-spacing: -.02em; }
.swal2-styled.swal2-confirm {
  background: var(--mx-grad) !important;
  background-size: 200% 200% !important;
  color: #000 !important;
  border-radius: var(--mx-pill) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(254,241,2,.35) !important;
  transition: background-position var(--mx-mid) var(--mx-ease), color var(--mx-fast) var(--mx-ease);
}
.swal2-styled.swal2-confirm:hover { background-position: 100% 50% !important; color: #fff !important; }
.swal2-styled.swal2-cancel {
  background: #fff !important;
  color: var(--mx-ink) !important;
  border: 1.5px solid var(--mx-line) !important;
  border-radius: var(--mx-pill) !important;
  font-weight: 700 !important;
}
.swal2-styled:focus { box-shadow: 0 0 0 4px rgba(254,241,2,.3) !important; }

/* ==========================================================================
   12. CART / CHECKOUT SUMMARY PANELS
   ========================================================================== */
.cart-totals,
.cart-summary,
.order_table {
  position: relative;
  overflow: hidden;
}
.cart-totals::before,
.cart-summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mx-grad);
}
.summary-row { border-bottom: 1px dashed var(--mx-line) !important; }
.summary-row:last-child {
  border-bottom: none !important;
  background: rgba(254,241,2,.12);
  border-radius: var(--mx-r-sm);
  padding: 12px !important;
  margin-top: 6px;
}
.summary-row:last-child h4,
.cart-totals .cart_total_amount { color: var(--mx-ink) !important; font-weight: 800 !important; }
.summary-row p { color: var(--mx-muted) !important; }

.location-card .delivery-icon {
  background: var(--mx-grad-y) !important;
  color: #000 !important;
  border-radius: var(--mx-r-sm) !important;
  box-shadow: 0 4px 14px rgba(254,241,2,.35);
}
.location-card .delivery-title { color: var(--mx-ink) !important; font-weight: 700; }
.delivery-options, .payment { position: relative; }

/* Sticky order summary on wide screens — pure presentation, no markup change */
@media (min-width: 992px) {
  .cart-totals, .cart-summary {
    position: sticky;
    top: 96px;
  }
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
#footers,
.footer-mid {
  background: var(--mx-grad-ink) !important;
  color: #C9C9D4 !important;
  position: relative;
}
.footer-mid::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mx-grad-line);
}
.footer-mid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40rem 20rem at 12% 0%, rgba(254,241,2,.10), transparent 60%),
    radial-gradient(36rem 20rem at 88% 100%, rgba(220,16,0,.12), transparent 62%);
}
.footer-mid > * { position: relative; z-index: 1; }

.footer-widgets-item .f-logo img { filter: drop-shadow(0 6px 18px rgba(254,241,2,.28)); }
.about-text, .copyright-text { color: #9A9AA8 !important; }
.widget-title, .footer-social h6 {
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 13px;
  position: relative;
  padding-bottom: 10px;
}
.widget-title::after, .footer-social h6::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 40px; height: 3px;
  border-radius: var(--mx-pill);
  background: var(--mx-grad);
}
.footer-list li a {
  color: #B4B4C2 !important;
  transition: color var(--mx-fast) var(--mx-ease), padding-left var(--mx-fast) var(--mx-ease);
  display: inline-block;
}
.footer-list li a:hover { color: var(--mx-yellow) !important; padding-left: 6px; }

.social-icon {
  width: 40px; height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12);
  color: #E9E9F0 !important;
  transition: all var(--mx-fast) var(--mx-ease);
}
.social-icon i { color: inherit !important; }
.social-icon:hover {
  background: var(--mx-grad) !important;
  color: #000 !important;
  border-color: transparent;
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--mx-glow-y);
}
.newsletter-form input[type="email"] {
  background: rgba(255,255,255,.08) !important;
  border: 1.5px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: var(--mx-pill) !important;
}
.newsletter-form input[type="email"]::placeholder { color: #8B8B99; }
.download-app img { border-radius: var(--mx-r-sm); transition: transform var(--mx-fast) var(--mx-ease), filter var(--mx-fast) var(--mx-ease); }
.download-app a:hover img { transform: translateY(-3px); filter: drop-shadow(0 8px 18px rgba(254,241,2,.3)); }
.container-fluid.bg-dark { background: #06060A !important; border-top: 1px solid rgba(255,255,255,.06); }

/* ==========================================================================
   14. MOBILE BOTTOM NAV
   ========================================================================== */
@media (max-width: 991px) {
  .mobile-bottom-nav {
    background: rgba(255,255,255,.86) !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--mx-line) !important;
    box-shadow: 0 -8px 30px rgba(11,11,16,.12) !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-bottom-nav::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--mx-grad-line);
  }
  .mobile-bottom-nav__item { color: var(--mx-muted) !important; font-weight: 600 !important; }
  .mobile-bottom-nav__item.active,
  .mobile-bottom-nav__item:hover { color: var(--mx-red) !important; }
  .mobile-bottom-nav__item.active::before {
    content: "";
    position: absolute;
    top: 0; left: 22%; right: 22%;
    height: 3px;
    border-radius: 0 0 var(--mx-pill) var(--mx-pill);
    background: var(--mx-grad);
    box-shadow: 0 2px 10px rgba(254,241,2,.6);
  }
  .mobile-bottom-nav__icon { transition: transform var(--mx-fast) var(--mx-ease); }
  .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { transform: translateY(-2px); }

  /* Mobile off-canvas menu */
  .mobile-header-active { background: var(--mx-glass-strong) !important; backdrop-filter: var(--mx-blur); }
  .mobile-search input { border-radius: var(--mx-pill) !important; border: 1.5px solid var(--mx-line) !important; }
  .mobile-search button {
    background: var(--mx-grad-y) !important;
    color: #000 !important;
    border-radius: var(--mx-pill) !important;
    border: none !important;
  }
  .mobile-menu li a { color: var(--mx-ink) !important; font-weight: 600; }
  .mobile-menu li a:hover { color: var(--mx-red) !important; }
  .mobile-menu .menu-item-has-children > a::after { color: var(--mx-yellow-700) !important; }
  .mobile-header-info-wrap .single-mobile-header-info a i { color: var(--mx-red) !important; }
  .filter-buttons-mobile .btn {
    border-radius: var(--mx-pill) !important;
    font-weight: 700 !important;
  }
}

/* ==========================================================================
   15. MISC POLISH
   ========================================================================== */
.branch-count, .item-count {
  color: var(--mx-muted) !important;
  font-weight: 600;
}
.search-box input { border-radius: var(--mx-pill) !important; padding-left: 18px !important; }
.detail-gallery img, .border-radius-10 { border-radius: var(--mx-r) !important; }
.detail-info { padding-top: 4px; }
.product-detail.accordion-detail { border-radius: var(--mx-r-lg) !important; }

hr { border-color: var(--mx-line) !important; opacity: 1; }
.text-muted { color: var(--mx-muted) !important; }
.text-brand, .primary-color { color: var(--mx-red) !important; }

/* Image placeholders shimmer while loading */
img { background-color: transparent; }

/* ==========================================================================
   16. MOTION — entrances (CSS only, no JS dependency)
   ========================================================================== */
@keyframes mxFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.section-padding > .container,
.page-header,
.login-card,
.register-card {
  animation: mxFadeUp .5s var(--mx-ease-out) both;
}
.footer-mid .wow.fadeInUp { animation: mxFadeUp .6s var(--mx-ease-out) both; }
.footer-mid .wow.fadeIn { animation: mxFade .6s var(--mx-ease-out) both; }

/* Respect the user's motion preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover,
  .category-card:hover,
  .address-card:hover,
  .btn-primary:hover,
  .add-to-cart-btn:hover { transform: none !important; }
}

/* ==========================================================================
   17. RESPONSIVE TRIMS
   ========================================================================== */
@media (max-width: 1199px) {
  .header-middle #searchInput { width: 340px !important; }
}
@media (max-width: 991px) {
  body::after { background-size: 40px 40px, 40px 40px; }
  .page-header { border-radius: var(--mx-r); padding: 14px 16px !important; }
  .product-card { border-radius: var(--mx-r) !important; }
}
@media (max-width: 575px) {
  .section-title::after,
  .heading-2::after { width: 56px; height: 3px; }
  .sidebar, .main-content { border-radius: var(--mx-r-sm) !important; }
}

/* ==========================================================================
   18. PRINT (order confirmations, invoices)
   ========================================================================== */
@media print {
  body::before, body::after { display: none !important; }
  .header-area, #footers, .mobile-bottom-nav, .slider-btn { display: none !important; }
  .product-card, .cart-totals, .order_table {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
  }
}

/* ==========================================================================
   19. STACKING ORDER  — must stay at the end of the file
   --------------------------------------------------------------------------
   `backdrop-filter` creates a new stacking context. That traps the mega menu
   and the account dropdown inside the header's own layer, so any positioned
   content further down the document (product cards, sliders) paints on top of
   them. Giving the header bands an explicit z-index lifts the whole layer back
   above the page. Bootstrap modals (1055) and the mobile bottom nav (9999)
   still sit above these, which is correct.
   ========================================================================== */
.header-area            { position: relative; z-index: 900; }
.header-top             { position: relative; z-index: 901; }
.header-bottom          { position: relative; z-index: 920; }  /* mega menu */
.header-bottom.sticky-bar,
.sticky-bar.stick       { z-index: 940 !important; }
/* Above the sticky bar: the account dropdown hangs down out of this band and
   must clear it. Once the bar actually sticks, header-middle has scrolled
   away, so the two never compete on screen. */
.header-middle          { position: relative; z-index: 960; }  /* account dropdown */

/* The panels themselves, inside that layer. */
.mega-menu              { z-index: 1000; }
.account-dropdown,
.cart-dropdown-wrap     { z-index: 1000; }

/* Page sections must not out-rank the header. Several carry `position-relative`
   for their slider arrows, which is enough to beat an un-ranked header. */
.products-tab.position-relative,
.product-slider-container,
.product-slider-overflow,
.slider-rows-container  { z-index: 1; }

/* ==========================================================================
   20. HEADER PROPORTIONS
   --------------------------------------------------------------------------
   The logo carries inline `height:80px; width:350px; object-fit:cover`, which
   both oversizes it and crops the artwork. Overridden here rather than in the
   markup, so the header stays a pure presentation change.
   ========================================================================== */
.logo.logo-width-1 img,
.header-middle .logo img {
  height: 52px !important;
  width: auto !important;
  max-width: 230px !important;
  object-fit: contain !important;
}
.header-bottom .logo img,
.mobile-header-active .logo img {
  height: 40px !important;
  width: auto !important;
  max-width: 170px !important;
  object-fit: contain !important;
}
.footer-widgets-item .f-logo img { height: 46px !important; width: auto !important; object-fit: contain !important; }

.header-middle.header-middle-ptb-1 { padding-top: 14px !important; padding-bottom: 14px !important; }
.header-top.header-top-ptb-1       { padding-top: 7px !important;  padding-bottom: 7px !important;  font-size: 13px; }
.header-middle .header-right > .d-flex:first-child { height: 44px !important; }
.header-middle #searchInput { height: 100% !important; }

/* ==========================================================================
   21. DEPTH PASS — richer surfaces, sharper hierarchy
   ========================================================================== */
:root {
  --mx-sh-md: 0 10px 30px rgba(11,11,16,.09), 0 2px 8px rgba(11,11,16,.05);
  --mx-sh-lg: 0 24px 60px rgba(11,11,16,.14), 0 6px 16px rgba(11,11,16,.07);
  --mx-sh-xl: 0 40px 90px rgba(11,11,16,.18), 0 10px 24px rgba(11,11,16,.08);
}

/* Stronger ambient wash — the canvas should read as lit, not flat grey. */
body::before {
  background:
    radial-gradient(70rem 38rem at 6% -10%,  rgba(254,241,2,.30), transparent 60%),
    radial-gradient(58rem 34rem at 100% 2%,  rgba(220,16,0,.14),  transparent 58%),
    radial-gradient(50rem 32rem at 46% 108%, rgba(238,90,23,.12), transparent 60%);
}

/* --- Type scale: bigger, tighter, more confident --- */
.section-title h3,
.section-title h2,
.products-tab .section-title h3 {
  font-size: clamp(22px, 2.1vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  margin: 0 !important;
  line-height: 1.1;
}
.heading-2 { font-size: clamp(20px, 1.9vw, 28px) !important; font-weight: 800 !important; }
.page-header h1 { font-size: clamp(24px, 2.4vw, 36px) !important; font-weight: 800 !important; }

/* Section rule sits under the heading text, not the whole flex row. */
.section-title.style-2 { padding-bottom: 0 !important; }
.section-title.style-2::after { display: none; }
.section-title h3 { position: relative; padding-bottom: 14px; }
.section-title h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 68px; height: 4px;
  border-radius: var(--mx-pill);
  background: var(--mx-grad);
  box-shadow: 0 3px 12px rgba(254,241,2,.6);
}

/* Consistent vertical rhythm between sections. */
.section-padding { padding-top: 40px !important; padding-bottom: 40px !important; }
.products-tab.section-padding { padding-top: 34px !important; padding-bottom: 34px !important; }

/* --- Hero slider: framed, not a flat grey box --- */
.hero-slider-1,
.single-hero-slider {
  border-radius: var(--mx-r-xl) !important;
  overflow: hidden;
}
.single-hero-slider {
  background: linear-gradient(135deg, #15151D, #0B0B10) !important;
  box-shadow: var(--mx-sh-lg);
  position: relative;
}
.single-hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(254,241,2,.28);
}
.single-hero-slider img {
  border-radius: var(--mx-r-xl) !important;
  display: block;
  width: 100%;
  height: auto;
}
.hero-slider-1-arrow .slick-arrow,
.slider-arrow .slick-arrow {
  background: var(--mx-glass-strong) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--mx-glass-border) !important;
  border-radius: 50% !important;
  color: var(--mx-ink) !important;
  box-shadow: var(--mx-sh-md) !important;
}
.dot-style-1 .slick-dots li button { background: rgba(11,11,16,.22) !important; border-radius: var(--mx-pill) !important; }
.dot-style-1 .slick-dots li.slick-active button {
  background: var(--mx-grad) !important;
  width: 26px !important;
  box-shadow: 0 2px 10px rgba(254,241,2,.6);
}

/* --- Promo / banner tiles on the homepage --- */
.rounded-circle.object-fit-cover {
  border-radius: 50% !important;
  box-shadow: var(--mx-sh-sm);
  transition: transform var(--mx-mid) var(--mx-ease-out), box-shadow var(--mx-mid) var(--mx-ease);
}
a:hover > .rounded-circle.object-fit-cover,
.category-card:hover .rounded-circle.object-fit-cover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: var(--mx-glow-y), var(--mx-sh-md);
}
.rounded.w-100 {
  border-radius: var(--mx-r-lg) !important;
  box-shadow: var(--mx-sh-sm);
  transition: transform var(--mx-mid) var(--mx-ease-out), box-shadow var(--mx-mid) var(--mx-ease);
}
.rounded.w-100.cursor-pointer:hover,
a:hover > .rounded.w-100 { transform: translateY(-4px); box-shadow: var(--mx-sh-lg); }

/* ==========================================================================
   22. PRODUCT CARD — second pass
   ========================================================================== */
.product-card {
  padding: 12px !important;
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(255,255,255,.9) !important;
}

/* Image plate: soft inset panel so photos sit *in* the card, not on it. */
.product-img-action-wrap {
  background: linear-gradient(160deg, #FFFFFF 0%, #EFF1F7 100%) !important;
  border: 1px solid rgba(11,11,16,.05);
  border-radius: var(--mx-r) !important;
  padding: 8px;
  position: relative;
}
.product-img-action-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 40%);
}

.product-title {
  font-size: 14px !important;
  line-height: 1.4 !important;
  min-height: 2.8em;
  margin-top: 12px !important;
}
.product-title a { font-weight: 600 !important; }

/* Price row: the number is the loudest thing on the card. */
.current-price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--mx-ink) !important;
}
.old-price, .original-price { font-size: 12.5px !important; }

/* Badges: flatter, sharper, no drop shadow soup. */
.product-badges span,
.product-badges .hot,
.product-badges .sale,
.product-badges .new,
.discount-badge {
  box-shadow: none !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  border: 1px solid rgba(255,255,255,.35);
}

.add-to-cart-btn, .button-add-to-cart {
  padding: 10px 16px !important;
  font-size: 13px !important;
  letter-spacing: .015em;
}
.quantity-input { height: 36px; }

/* Category tile ring */
.category-card { padding: 16px 10px !important; }
.category-image {
  position: relative;
  transition: transform var(--mx-mid) var(--mx-ease-out), box-shadow var(--mx-mid) var(--mx-ease);
}
.category-card:hover .category-image { box-shadow: var(--mx-glow-y); }
.category-card .fw-bold { font-size: 13.5px !important; line-height: 1.35; }

/* ==========================================================================
   23. GLASS PANELS — second pass
   ========================================================================== */
.cart-totals,
.location-card,
.delivery-options,
.payment,
.main-content,
.sidebar,
.table-container,
.orders-placed,
.category-sidebar,
.login-card,
.register-card {
  background: rgba(255,255,255,.84) !important;
  border-color: rgba(255,255,255,.9) !important;
  box-shadow: var(--mx-sh-md) !important;
}
.login-card, .register-card { box-shadow: var(--mx-sh-xl) !important; }

/* --- Auth page shell -------------------------------------------------------
   login.php and register.php both set `body { height:100vh; align-items:center }`
   inline. A flex/grid child that is TALLER than a fixed-height container
   overflows in both directions and its top edge ends up above the scroll
   origin — which is why the signup form read as "too long": its head was
   unreachable, not merely far down. `min-height` + `margin:auto` is the
   overflow-safe way to centre: the auto margins collapse once the child no
   longer fits, so the whole card stays scrollable.
   -------------------------------------------------------------------------- */
body:has(> .login-card),
body:has(> .register-card),
body:has(> .login-container) {
  height: auto !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
}
.login-card,
.register-card,
.login-container {
  margin: auto !important;
  max-height: none !important;
}
/* NOTE: `.login-body` is NOT the <body> — on forgot-password.php it is a plain
   <div> inside the card that wraps the form. It must stay a block; making it a
   full-height flex row throws the step indicator, the form and the back link
   onto one line. */
.login-body {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  width: 100%;
}

@media (max-width: 991px) {
  .logo.logo-width-1 img,
  .header-middle .logo img { height: 42px !important; max-width: 180px !important; }
  .section-padding { padding-top: 26px !important; padding-bottom: 26px !important; }
  .product-title { min-height: 2.6em; }
  .single-hero-slider, .single-hero-slider img { border-radius: var(--mx-r) !important; }
}

/* ==========================================================================
   24. AUTH PAGES — density and the way back out
   ========================================================================== */

/* "Back to store" link. The logo above it already links home, but a 120px
   image is not a discoverable affordance — this is the explicit route. */
.mx-back-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 14px 8px 11px;
  border-radius: var(--mx-pill);
  background: rgba(11,11,16,.045);
  border: 1px solid var(--mx-line);
  color: var(--mx-ink-soft) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all var(--mx-fast) var(--mx-ease);
  min-height: 40px;
}
.mx-back-home:hover,
.mx-back-home:focus {
  background: rgba(254,241,2,.2);
  border-color: var(--mx-yellow-600);
  color: var(--mx-ink) !important;
  transform: translateX(-2px);
}
.mx-back-home svg,
.mx-back-home i { font-size: 15px; line-height: 1; }

/* The logo is a link — make it read like one. */
.register-logo a {
  display: inline-block;
  border-radius: var(--mx-r-sm);
  transition: transform var(--mx-fast) var(--mx-ease);
}
.register-logo a:hover { transform: translateY(-2px); }
.register-logo img { max-width: 150px !important; height: auto !important; }

/* --- Density: the signup form was ~5 stacked blocks of label+input+hint --- */
.login-card, .register-card { padding: 26px !important; }
.login-card h2, .register-card h2 {
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
  color: var(--mx-ink) !important;
  letter-spacing: -.02em;
}
.login-form .mb-3,
.register-form .mb-3 { margin-bottom: 12px !important; }
.form-text {
  font-size: 11.5px !important;
  margin-top: 3px !important;
  line-height: 1.35;
  color: var(--mx-muted) !important;
}
.login-form .form-label,
.register-form .form-label { margin-bottom: 4px !important; }

/* Two columns once there is room. The submit button and the footer link span
   the full width. Fields are the only direct <div> children of the form. */
@media (min-width: 640px) {
  .register-card { max-width: 620px !important; }
  .register-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    align-items: start;
  }
  .register-form > div:last-of-type,
  .register-form > button,
  .register-form > .login-link { grid-column: 1 / -1; }
}

.btn-login, .btn-register { min-height: 48px; width: 100%; }
.login-link, .signup-link { margin-top: 14px !important; font-size: 14px; }

/* ==========================================================================
   25. MOBILE — applies to every page
   ========================================================================== */

/* Nothing may push the page sideways. `clip` (unlike `hidden`) does not
   create a scroll container, so it cannot break position:sticky headers. */
html { overflow-x: clip; max-width: 100%; }
body  { overflow-x: clip; max-width: 100%; }
img, video, svg, iframe { max-width: 100%; }

@media (max-width: 991px) {
  /* 16px is the threshold below which iOS Safari zooms the page on focus.
     Anything the user types into must meet it. */
  input, select, textarea,
  .form-control, .form-select { font-size: 16px !important; }

  /* Comfortable tap targets (Apple/Google both advise ~44px). */
  .btn, .btn-primary, .add-to-cart-btn, .button-add-to-cart,
  .btn-login, .btn-register, #placeorder, #repeatOrder,
  .view-details, .btn-call, .btn-address, .see-more-btn,
  .subscribe-btn, .newsletter-form .subscribe-btn,
  .password-toggle, .btn-edit-address, .btn-delete-address,
  .sidebar .nav-link, .mobile-menu li a, .footer-list li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footer-list li a, .mobile-menu li a, .sidebar .nav-link { justify-content: flex-start; }

  /* Turning .btn into a flex container makes it a shrink-to-fit flex item
     inside a .d-flex parent; without this it can push a few px past the
     viewport on a narrow screen. */
  /* Three separate things had to be true for these not to overflow:
     - box-sizing: these buttons compute to content-box, so padding was being
       added OUTSIDE the resolved width (332px wide + 10px padding = 352px in
       a 332px parent). This is the one that actually caused the overflow.
     - min-width: a flex item's automatic minimum size is its content width,
       and that beats max-width.
     - max-width: clamps to the parent once the other two are set. */
  .btn, .btn-primary, .add-to-cart-btn, .button-add-to-cart,
  .btn-login, .btn-register, #placeorder, .see-more-btn, .view-details {
    box-sizing: border-box !important;
    max-width: 100%;
    min-width: 0;
  }
  .cart-action { flex-wrap: wrap; gap: 8px; }
  .cart-action .btn { flex: 1 1 auto; min-width: 0; text-align: center; }
  .quantity-input .qty-btn,
  .quantity-control .qty-btn,
  .quantity-control .qty-btns { min-width: 40px; min-height: 40px; }
  .favorite-icon { width: 38px !important; height: 38px !important; }

  /* Tables scroll inside their wrapper. Do NOT set `display:block` on the
     table itself — that detaches <thead> from <tbody> and every column
     collapses to x=0. cart.php, checkout.php, orders.php and branches.php all
     already ship a .table-responsive wrapper; order-details.php is handled by
     .order-no/.track being plain divs. The cart table gets a purpose-built
     stacked-card layout further down (section 29) instead of scrolling. */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .orders-table { min-width: 460px; }
  .table-wishlist th, .table-wishlist td,
  .orders-table th,   .orders-table td,
  .table th,          .table td { padding: 11px 12px !important; font-size: 13px; }

  td.product-name, td.product-des { white-space: normal !important; }
  .table-wishlist .product-thumbnail img,
  .order_table img { max-width: 52px; height: auto; }

  /* Cart / checkout summary must not stay stuck to the viewport on a phone. */
  .cart-totals, .cart-summary { position: static !important; }

  /* Account area stacks. */
  .profile-container { padding: 0 !important; }
  .sidebar { margin-bottom: 16px; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .sidebar .nav-link { flex: 1 1 calc(50% - 3px); font-size: 13.5px; padding: 10px 12px !important; }
  .main-content { padding: 16px !important; }
  .section-header { font-size: 17px !important; }

  /* Modals: use the full width of the screen, stay inside it. */
  .modal-dialog { margin: 12px !important; max-width: calc(100% - 24px) !important; }
  .modal-body   { padding: 16px !important; max-height: 72vh; overflow-y: auto; }
  .filter-modal .modal-content, #priceModal .modal-content { width: auto !important; }

  /* Page furniture */
  .page-header { padding: 12px 14px !important; }
  .breadcrumb { font-size: 12.5px; flex-wrap: wrap; }
  .container, .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }

  /* Cards and grids */
  .product-card { padding: 10px !important; }
  .product-title { font-size: 13px !important; }
  .current-price { font-size: 15.5px !important; }
  .add-to-cart-btn, .button-add-to-cart { font-size: 12.5px !important; padding: 9px 10px !important; }
  .address-card, .account-info-item { margin-bottom: 12px; }
  .account-info-grid { grid-template-columns: 1fr !important; }

  /* Footer centres and breathes. */
  .footer-mid { padding: 34px 0 24px !important; text-align: center; }
  .widget-title::after, .footer-social h6::after { left: 50%; transform: translateX(-50%); }
  .footer-list li a { justify-content: center; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .subscribe-btn { width: 100%; }
}

@media (max-width: 575px) {
  /* Two product cards per row stays readable; one is wasteful. */
  .product-card { border-radius: var(--mx-r) !important; }
  .login-card, .register-card { padding: 20px !important; border-radius: var(--mx-r-lg) !important; }
  .register-logo img { max-width: 120px !important; }
  .sidebar .nav-link { flex: 1 1 100%; }
  .section-title h3, .section-title h2 { font-size: 19px !important; }
  .section-title h3::after { width: 52px; height: 3px; }
  .page-header h1 { font-size: 21px !important; }
  .quantity-input { width: 108px; }
  .hotline, .header-top { font-size: 12px; }
}

/* Landscape phones: don't waste the short viewport on chrome. */
@media (max-height: 520px) and (orientation: landscape) {
  body:has(> .login-card),
  body:has(> .register-card),
  body:has(> .login-container) { align-items: flex-start !important; padding: 16px !important; }
  .login-card, .register-card, .login-container { padding: 18px !important; }
}

/* ==========================================================================
   26. LOGO ON TABLET / MOBILE — compact chip
   --------------------------------------------------------------------------
   The off-canvas menu header carries an inline `height:100px; width:100px` on
   the logo (frontend/header.php line 798). The artwork is 386x111 — roughly
   3.5:1 — so a square box squashes it badly. Overridden here rather than in
   the markup, per the project's presentation-only rule.

   `width:auto` alone is not enough: the inline height wins on specificity, so
   both dimensions need !important.
   ========================================================================== */
.mobile-header-logo img,
.mobile-header-active .logo img,
.header-bottom .logo img {
  height: 38px !important;
  width: auto !important;
  max-width: 168px !important;
  min-width: 0 !important;
  object-fit: contain !important;
  display: block;
}

/* The chip the logo sits in — a small white card so the yellow artwork has a
   clean edge against the menu's grey wash. */
.mobile-header-logo a,
.mobile-header-active .logo a,
.header-bottom .logo a {
  display: inline-block;
  padding: 5px 9px;
  background: #fff;
  border: 1px solid var(--mx-line-soft);
  border-radius: var(--mx-r-sm);
  box-shadow: var(--mx-sh-xs);
  line-height: 0;
  transition: transform var(--mx-fast) var(--mx-ease), box-shadow var(--mx-fast) var(--mx-ease);
}
.mobile-header-logo a:active,
.header-bottom .logo a:active { transform: scale(.97); }
.mobile-header-logo a:hover,
.header-bottom .logo a:hover { box-shadow: var(--mx-sh-sm); }

/* The 100px logo was also inflating this bar. Reclaim the space. */
.mobile-header-top {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  align-items: center;
}
.mobile-header-logo { line-height: 0; }

/* Close button: give it a real tap target and put it on the brand. */
.mobile-menu-close .close-style,
.mobile-menu-close button {
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  background: var(--mx-line-soft) !important;
  color: var(--mx-ink-soft) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all var(--mx-fast) var(--mx-ease);
}
.mobile-menu-close .close-style:hover,
.mobile-menu-close button:hover {
  background: var(--mx-red) !important;
  color: #fff !important;
  transform: rotate(90deg);
}

@media (max-width: 575px) {
  .mobile-header-logo img,
  .mobile-header-active .logo img,
  .header-bottom .logo img { height: 34px !important; max-width: 148px !important; }
  .mobile-header-top { padding-top: 11px !important; padding-bottom: 11px !important; }
}

/* ==========================================================================
   27. FOOTER — hidden on tablet and phone
   --------------------------------------------------------------------------
   The site footer is `<footer class="main">` (frontend/footer.php line 1).
   Target it as `footer.main`, never as `.main` on its own — `.main` is also
   the page-content wrapper on several templates, and hiding that would blank
   the page body.

   HEADS UP: the footer is currently the ONLY route to Contact Us, Terms &
   Conditions, Returns & Refunds, Privacy Policy and the app-store links. The
   off-canvas menu holds departments only, and the bottom nav is Home /
   Category / Promo / Account / Cart. Hiding the footer therefore makes those
   pages unreachable by link on mobile. If that matters, comment out the rule
   below and uncomment the "slim legal strip" block instead — it hides the
   bulk of the footer but keeps a single compact row of policy links.
   ========================================================================== */
@media (max-width: 991px) {
  footer.main { display: none !important; }

  /* The bottom nav still needs its clearance; keep it modest now that there
     is no footer underneath. */
  body { padding-bottom: 74px; }
}

/* --------------------------------------------------------------------------
   ALTERNATIVE — slim legal strip instead of a full hide.
   To use: comment out `footer.main { display:none }` above, then uncomment
   everything between the markers below.
   --------------------------------------------------------------------------
@media (max-width: 991px) {
  footer.main { display: block !important; }

  .footer-mid .footer-widgets-item,
  .footer-mid .footer-social,
  .footer-mid .download-app,
  .footer-mid .newsletter-form,
  .footer-mid .about-text,
  .footer-mid .f-logo { display: none !important; }

  .footer-mid { padding: 18px 0 10px !important; }
  .footer-mid .widget-title { display: none !important; }
  .footer-mid .footer-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
  }
  .footer-mid .footer-list li a {
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 0 !important;
  }
  .container-fluid.bg-dark { padding: 10px 0 !important; }
  .copyright-text { font-size: 11.5px !important; }
}
   -------------------------------------------------------------------------- */

/* ==========================================================================
   28. LOGO — one compact treatment everywhere
   --------------------------------------------------------------------------
   Unifies the home/desktop header logo with the compact chip already used in
   the mobile menu and on the auth pages. Same shape, same white card, same
   proportional scaling — only the height changes per context.

   The desktop logo carries inline `height:80px; width:350px; object-fit:cover`
   (frontend/header.php line 604). `cover` on a 3.5:1 image inside a 350x80 box
   crops the artwork; all three properties have to be overridden, not just one.
   ========================================================================== */

/* --- The chip: shared by header, mobile menu and auth pages --- */
.header-middle .logo a,
.mobile-header-logo a,
.mobile-header-active .logo a,
.header-bottom .logo a,
.register-logo a {
  display: inline-block;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--mx-line-soft);
  border-radius: var(--mx-r-sm);
  box-shadow: var(--mx-sh-xs);
  line-height: 0;
  transition: transform var(--mx-fast) var(--mx-ease),
              box-shadow var(--mx-mid) var(--mx-ease),
              border-color var(--mx-fast) var(--mx-ease);
}
.header-middle .logo a:hover,
.register-logo a:hover,
.mobile-header-logo a:hover,
.header-bottom .logo a:hover {
  transform: translateY(-2px);
  box-shadow: var(--mx-sh-md);
  border-color: var(--mx-yellow-600);
}
.header-middle .logo a:active,
.register-logo a:active { transform: translateY(0) scale(.98); }

/* --- The artwork: always proportional, never cropped --- */
.header-middle .logo img,
.logo.logo-width-1 img,
.mobile-header-logo img,
.mobile-header-active .logo img,
.header-bottom .logo img,
.register-logo img {
  width: auto !important;
  min-width: 0 !important;
  object-fit: contain !important;
  display: block;
}

/* --- Size per context --- */
.header-middle .logo img,
.logo.logo-width-1 img { height: 44px !important; max-width: 190px !important; }
.register-logo img     { height: 42px !important; max-width: 185px !important; }
.mobile-header-logo img,
.mobile-header-active .logo img,
.header-bottom .logo img { height: 38px !important; max-width: 168px !important; }

/* The logo block no longer needs the width the old 350px image demanded. */
.header-middle .logo.logo-width-1 { width: auto !important; flex: 0 0 auto; }

/* Auth pages centre their logo, so the chip has to be inline-block in a
   centred parent rather than a block that fills the card. */
.register-logo { line-height: 0; margin-bottom: 14px; }
.register-logo a { margin: 0 auto; }

@media (max-width: 575px) {
  .header-middle .logo img,
  .logo.logo-width-1 img { height: 36px !important; max-width: 155px !important; }
  .register-logo img { height: 36px !important; max-width: 155px !important; }
  .mobile-header-logo img,
  .mobile-header-active .logo img,
  .header-bottom .logo img { height: 34px !important; max-width: 148px !important; }
  .header-middle .logo a,
  .register-logo a { padding: 5px 8px; }
}

/* Now that the logo sits in a white chip, the earlier glow behind it reads as
   a blur rather than a highlight, and the img-level hover lift would double up
   with the chip's own. Neutralise both; the chip provides the framing. */
.register-logo img,
.header-middle .logo img,
.logo.logo-width-1 img { filter: none !important; }
.logo a:hover img { transform: none !important; filter: none !important; }
.register-logo img:hover { transform: none !important; }

/* ==========================================================================
   29. CART & CHECKOUT
   --------------------------------------------------------------------------
   Both pages carry their own <style> block AFTER this stylesheet in the
   cascade, so anything here that has to win needs !important — but the aim is
   to work with their structure, not flatten it.

   cart.php's table is built on `border-collapse:separate; border-spacing:0 10px`
   with a background on every cell, i.e. each row is meant to read as a card.
   That intent is kept and sharpened below rather than overridden.

   Row cells, in DOM order:
     .custome-checkbox | .image.product-thumbnail | .product-des.product-name
     .price | .detail-info | .price.subtotal | .action.diliti
   ========================================================================== */

/* --- Contrast fix: .text-brand is #fcee1f on white, ~1.4:1. Unreadable. --- */
.table-wishlist .text-brand,
.cart-totals .text-brand,
.order_table .text-brand { color: var(--mx-ink) !important; }
.cart-totals .cart_total_amount .text-brand,
.summary-row:last-child .text-brand { color: var(--mx-red) !important; }

/* --- Headings: keep the gradient rule clear of what follows it --- */
.heading-2 {
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}
.heading-2::after { width: 60px; height: 3px; }

/* ==========================  CART — DESKTOP  ============================= */
@media (min-width: 992px) {
  .table-wishlist {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;   /* the page's own row gap — preserved */
    width: 100%;
  }
  .table-wishlist thead th {
    background: var(--mx-grad-ink) !important;
    color: #F2F2F7 !important;
    padding: 13px 14px !important;
    border: none !important;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .table-wishlist thead th:first-child { border-radius: var(--mx-r-sm) 0 0 var(--mx-r-sm); }
  .table-wishlist thead th:last-child  { border-radius: 0 var(--mx-r-sm) var(--mx-r-sm) 0; }

  /* Each row is one card: cells share a background, the ends are rounded. */
  .table-wishlist tbody td {
    background: #fff !important;
    border: none !important;
    border-top: 1px solid var(--mx-line-soft) !important;
    border-bottom: 1px solid var(--mx-line-soft) !important;
    border-radius: 0 !important;
    padding: 14px 14px !important;
    vertical-align: middle !important;
    transition: background var(--mx-fast) var(--mx-ease);
  }
  .table-wishlist tbody td:first-child {
    border-left: 1px solid var(--mx-line-soft) !important;
    border-radius: var(--mx-r-sm) 0 0 var(--mx-r-sm) !important;
  }
  .table-wishlist tbody td:last-child {
    border-right: 1px solid var(--mx-line-soft) !important;
    border-radius: 0 var(--mx-r-sm) var(--mx-r-sm) 0 !important;
  }
  .table-wishlist tbody tr:hover td { background: #FFFEF2 !important; }
  .table-wishlist tbody tr:hover td:first-child { border-left-color: var(--mx-yellow-600) !important; }

  .table-wishlist .product-des { max-width: 320px; }
  .table-wishlist .price h4 { font-size: 15px !important; margin: 0; white-space: nowrap; }
  .table-wishlist .subtotal h4 { font-weight: 800 !important; }
}

/* Shared cart-cell details, both breakpoints */
.table-wishlist .product-thumbnail img {
  max-width: 58px !important;
  border-radius: var(--mx-r-xs) !important;
  border: 1px solid var(--mx-line-soft);
  background: #fff;
}
.table-wishlist .product-name a {
  color: var(--mx-ink) !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  display: block;
}
.table-wishlist .product-name a:hover { color: var(--mx-red) !important; }
.table-wishlist .w-160 { width: auto !important; margin: 0 !important; }
.table-wishlist .pt-40 { padding-top: 14px !important; }

/* The remove control reads as an action, not a stray glyph. */
.table-wishlist .action a,
.table-wishlist .action button,
.table-wishlist .diliti {
  color: var(--mx-muted) !important;
  transition: color var(--mx-fast) var(--mx-ease), transform var(--mx-fast) var(--mx-ease);
}
.table-wishlist .action a:hover,
.table-wishlist .diliti:hover { color: var(--mx-red) !important; transform: scale(1.15); }

/* ==========================  CART — MOBILE  ============================== */
/* Stacked cards. The header row carries no meaning once the columns are gone,
   so it is hidden and each value is labelled inline instead. */
@media (max-width: 991px) {
  .table-wishlist { border-spacing: 0 !important; display: block; width: 100%; }
  .table-wishlist thead { display: none !important; }
  .table-wishlist tbody { display: block; width: 100%; }

  .table-wishlist tbody tr {
    position: relative;
    display: grid !important;
    grid-template-columns: 58px minmax(0,1fr);
    grid-template-areas:
      "img  name"
      "img  price"
      "sub  sub"
      "qty  qty";
    align-items: center;
    gap: 6px 12px;
    background: #fff;
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-r) !important;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: var(--mx-sh-xs);
  }

  /* main-1.css line 11144 injects `content: attr(data-title)` before every
     .table cell below its breakpoint. In a stacked card those floated labels
     collide with the real values — suppress them and label deliberately. */
  .table-wishlist tbody td::before { content: none !important; float: none !important; }
  .table-wishlist tbody td {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    text-align: left !important;
  }
  .table-wishlist td.custome-checkbox { display: none !important; }
  .table-wishlist td.image      { grid-area: img; }
  .table-wishlist td.product-des{ grid-area: name; padding-right: 46px !important; }
  .table-wishlist td.price      { grid-area: price; }
  .table-wishlist td.detail-info{ grid-area: qty; }
  .table-wishlist td.subtotal   { grid-area: sub; }

  /* Remove pins to the card corner so it never squeezes the product name. */
  .table-wishlist td.action {
    position: absolute !important;
    top: 8px;
    right: 8px;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center;
    border-radius: 50%;
    background: var(--mx-line-soft) !important;
    z-index: 2;
  }
  .table-wishlist td.action:hover { background: rgba(220,16,0,.1) !important; }

  .table-wishlist .product-thumbnail img { max-width: 58px !important; width: 58px; }
  .table-wishlist .product-name a { font-size: 13.5px; }
  .table-wishlist td.price:not(.subtotal) {
    display: flex !important;
    align-items: baseline;
    gap: 6px;
  }
  .table-wishlist td.price:not(.subtotal)::after {
    content: "each";
    font-size: 11px;
    color: var(--mx-muted);
    order: 2;
  }
  .table-wishlist .price h4 { font-size: 14px !important; margin: 0; color: var(--mx-muted) !important; white-space: nowrap; }
  .table-wishlist td.detail-info { justify-self: start; padding-top: 4px !important; }

  /* Label the subtotal, which is otherwise a bare number under the row. */
  .table-wishlist td.subtotal {
    border-top: 1px dashed var(--mx-line) !important;
    padding-top: 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  .table-wishlist td.subtotal::before {
    content: "Subtotal";
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mx-muted);
  }
  .table-wishlist td.subtotal h4 {
    margin: 0;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--mx-ink) !important;
  }
  .table-wishlist .quantity-control { margin: 0 !important; max-width: 116px !important; }
  .table-wishlist .pt-40 { padding-top: 0 !important; }

  /* The scroll box was clipping rows mid-card. */
  .cart-items-scroll {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .shopping-summery.table-responsive { overflow: visible !important; }
}

/* The quantity stepper lost its + button to an overflow clip. */
.quantity-control {
  overflow: visible !important;
  max-width: 128px !important;
  flex-wrap: nowrap !important;
}
.quantity-control .qty-btn,
.quantity-control .qty-btns {
  flex: 0 0 auto;
  width: 34px !important;
  height: 34px !important;
  background: var(--mx-line-soft) !important;
  color: var(--mx-ink) !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  line-height: 1;
}
.quantity-control .qty-btn:hover,
.quantity-control .qty-btns:hover { background: var(--mx-yellow) !important; color: #000 !important; }
.quantity-control .qty-display {
  flex: 1 1 auto;
  min-width: 30px !important;
  padding: 0 4px !important;
  border: none !important;
  background: transparent !important;
  font-weight: 700;
  text-align: center;
  color: var(--mx-ink) !important;
}

/* ==========================  CART TOTALS  ================================ */
.cart-totals table.no-border,
.cart-totals .table { border-spacing: 0 !important; width: 100%; }
.cart-totals table.no-border td,
.cart-totals .table td {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dashed var(--mx-line) !important;
  padding: 11px 0 !important;
  vertical-align: middle;
}
.cart-totals table.no-border tr:last-child td,
.cart-totals .table tr:last-child td { border-bottom: none !important; }
.cart-totals .cart_total_label h6 { margin: 0; color: var(--mx-muted) !important; font-weight: 600; }
.cart-totals .cart_total_amount h4 { margin: 0; font-weight: 800 !important; font-size: 17px !important; }
.cart-totals .cart_total_amount { text-align: right; }

/* ==========================  CHECKOUT  =================================== */
.order_table table { border-spacing: 0 !important; width: 100%; }
.order_table td {
  border: none !important;
  border-bottom: 1px solid var(--mx-line-soft) !important;
  padding: 12px 10px !important;
  vertical-align: middle !important;
}
.order_table tr:last-child td { border-bottom: none !important; }
.order_table td.image { width: 62px; }
.order_table img {
  max-width: 52px !important;
  border-radius: var(--mx-r-xs) !important;
  border: 1px solid var(--mx-line-soft);
}
.order_table .product-name,
.order_table td:nth-child(2) { font-size: 13.5px; line-height: 1.4; }

.summary-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 !important;
  border-bottom: 1px dashed var(--mx-line) !important;
}
.summary-row p, .summary-row h4 { margin: 0 !important; }
.summary-row p { color: var(--mx-muted) !important; font-size: 14px; }
.summary-row:last-child {
  border-bottom: none !important;
  margin-top: 8px;
  padding: 13px 14px !important;
  background: rgba(254,241,2,.14);
  border-radius: var(--mx-r-sm);
}
.summary-row:last-child h4 { font-size: 18px !important; font-weight: 800 !important; }

.location-card .form-check,
.custome-radio {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px !important;
  margin-bottom: 10px;
}
.location-card .form-check-label,
.custome-radio .form-check-label { margin: 0; line-height: 1.45; }
.location-card .form-check-input,
.custome-radio .form-check-input { margin: 3px 0 0 0 !important; flex: 0 0 auto; float: none !important; }
.location-card .delivery-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.location-card .delivery-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; }

@media (max-width: 991px) {
  .order_table td { padding: 10px 8px !important; }
  .cart-totals, .location-card, .delivery-options, .payment { padding: 16px !important; }
  .cart-totals.ml-30, .cart-totals.border { margin-left: 0 !important; }
  .checkout .order_table td.image { width: 52px; }
  .order_table img { max-width: 44px !important; }
}

/* ==========================================================================
   30. CHECKOUT — mobile corrections
   --------------------------------------------------------------------------
   checkout.php's own <style> loads after this file, and main-1.css ships a
   mobile rule that turns every `.table td` into a centred block. Between them
   the order table stacked into four centred lines per item and the address
   radios blew up to fill their flex track, pushing the labels off screen.
   Selectors here are deliberately specific enough to win without resorting to
   !important on everything.
   ========================================================================== */

/* --- Radios and checkboxes must never flex to fill their track --- */
.form-check-input[type="radio"],
.form-check-input[type="checkbox"],
.location-card .form-check-input,
.custome-radio .form-check-input {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: 0 0 20px !important;
  margin: 2px 0 0 0 !important;
  float: none !important;
  appearance: auto;
}
.location-card .form-check-label,
.custome-radio .form-check-label {
  flex: 1 1 auto;
  min-width: 0;          /* lets long addresses wrap instead of overflowing */
  overflow-wrap: anywhere;
}

/* --- "Your Order" / "Subtotal" must stay a single row --- */
.cart-totals > .d-flex.justify-content-between {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px;
  text-align: left !important;
}
.cart-totals > .d-flex.justify-content-between h4 { margin: 0; font-size: 19px; }
.cart-totals > .d-flex.justify-content-between h6 { margin: 0; white-space: nowrap; }

@media (max-width: 991px) {
  /* Three classes beats checkout.php's own two-class padding rule. */
  .cart-totals.border.p-40,
  .border.p-40.cart-totals { padding: 18px !important; }
  .cart-totals.ml-30, .location-card.ml-30 { margin-left: 0 !important; }

  /* Order table -> one compact card row per item, like the cart. */
  .order_table table.no-border tbody tr,
  .order_table .table tbody tr {
    display: grid !important;
    grid-template-columns: 48px minmax(0,1fr) auto;
    grid-template-areas:
      "img name  price"
      "img qty   price";
    align-items: center;
    gap: 2px 10px;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--mx-line-soft);
  }
  .order_table table.no-border tbody tr:last-child { border-bottom: none; }
  .order_table td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    width: auto !important;
    white-space: normal !important;
  }
  .order_table td::before { content: none !important; float: none !important; }
  .order_table td.image        { grid-area: img; width: 48px !important; }
  .order_table td:nth-child(2) { grid-area: name; }
  .order_table td:nth-child(3) { grid-area: qty; }
  .order_table td:nth-child(4) { grid-area: price; text-align: right !important; }
  .order_table img { max-width: 44px !important; }
  .order_table .product-name {
    font-size: 13px;
    line-height: 1.35;
    color: var(--mx-ink) !important;
    display: block;
  }
  .order_table td:nth-child(3) h6 {
    margin: 0;
    padding: 0 !important;
    font-size: 11.5px;
    color: var(--mx-muted) !important;
  }
  .order_table td:nth-child(4) h4 {
    margin: 0;
    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap;
  }
  .order_table.scroller { max-height: none !important; overflow: visible !important; }

  /* The summary column is nested in col-md-6 col-lg-4 — full width on phones. */
  .cart-totals .row.justify-content-center > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .location-card .form-check,
  .custome-radio { padding: 11px 12px !important; }
  .location-card .form-check-label,
  .custome-radio .form-check-label { font-size: 13.5px; }
}

/* Buttons and form controls must size predictably; several compute to
   content-box here, which puts padding outside the declared width. */
.btn, button, .form-control, .form-select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select {
  box-sizing: border-box;
}

/* The order table sits INSIDE .cart-totals on checkout.php, so the dashed
   divider written for the totals rows was also landing on every order cell.
   The order rows carry their own separator — clear the inherited one. */
.cart-totals .order_table table.no-border td,
.cart-totals .order_table .table td {
  border-bottom: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}
.order_table table.no-border tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--mx-line-soft);
}

/* ==========================================================================
   31. FORGOT PASSWORD + CART SCROLL BOX
   ========================================================================== */

/* --- The card itself --- */
.login-container {
  max-width: 430px !important;
  width: 100% !important;
  padding: 26px !important;
  border-radius: var(--mx-r-xl) !important;
  background: var(--mx-glass-strong) !important;
  border: 1px solid var(--mx-glass-border);
  box-shadow: var(--mx-sh-xl) !important;
  position: relative;
  overflow: hidden;
}
.login-container::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--mx-grad);
}
.login-container h2 {
  font-size: 1.5rem !important;
  text-align: center;
  margin: 0 0 1.1rem !important;
  color: var(--mx-ink) !important;
  letter-spacing: -.02em;
}

/* Back link sits on its own line above a centred logo, not beside it. */
.register-logo {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.register-logo .mx-back-home { align-self: flex-start; margin-bottom: 0; }

/* --- Step indicator --- */
.step-indicator {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px;
  margin-bottom: 1.4rem !important;
  position: relative;
}
.step {
  flex: 1 1 0 !important;
  min-width: 0;
  text-align: center !important;
  position: relative;
  z-index: 1;
}
/* The connector was `left:50%; width:100%`, which overshoots the card. */
.step::after {
  top: 16px !important;
  left: 50% !important;
  width: 100% !important;
  height: 2px !important;
  background: var(--mx-line) !important;
  z-index: -1 !important;
}
.step.active ~ .step::after { background: var(--mx-line) !important; }
.step-circle {
  width: 34px !important;
  height: 34px !important;
  margin: 0 auto 7px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center;
  background: var(--mx-line-soft) !important;
  color: var(--mx-muted) !important;
  font-weight: 800;
  font-size: 14px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--mx-line);
}
.step.active .step-circle,
.step.completed .step-circle {
  background: var(--mx-grad-y) !important;
  color: #000 !important;
  box-shadow: 0 0 0 1px var(--mx-yellow-700), 0 4px 12px rgba(254,241,2,.45);
}
.step-label {
  font-size: 11.5px !important;
  line-height: 1.3;
  font-weight: 600;
  color: var(--mx-muted) !important;
  overflow-wrap: anywhere;
}
.step.active .step-label { color: var(--mx-ink) !important; }

/* --- OTP boxes --- */
.otp-inputs {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1rem;
}
.otp-inputs .otp-input {
  width: 44px !important;
  height: 50px !important;
  padding: 0 !important;
  text-align: center;
  font-size: 19px !important;
  font-weight: 800 !important;
}
.phone-display { font-weight: 700; color: var(--mx-ink); }

/* --- Back to login --- */
.back-to-login {
  text-align: center;
  margin-top: 14px;
}
.back-to-login a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none !important;
  border-bottom: 1.5px solid rgba(220,16,0,.3);
  color: var(--mx-red) !important;
  font-weight: 700;
  font-size: 13.5px;
}
.back-to-login a:hover { border-color: var(--mx-red); }
.login-container .btn-primary,
.login-container .btn-outline-secondary { width: 100%; min-height: 46px; }
.login-container .form-text,
.login-container small.text-muted { display: block; font-size: 11.5px; line-height: 1.35; }

/* ==========================================================================
   The cart list had `max-height:400px; overflow-y:auto`, which cut the fourth
   row through the middle — the single ugliest thing on that page. Carts are
   short; let the list flow and the page scroll instead of nesting scrollbars.
   ========================================================================== */
.cart-items-scroll {
  max-height: none !important;
  overflow: visible !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.shopping-summery.table-responsive { overflow: visible !important; }

/* ==========================================================================
   32. CART HEADER / CHECKOUT ALIGNMENT / HOME CATEGORY STRIP
   ========================================================================== */

/* --- 32a. Cart header read as separate blocks -----------------------------
   cart.php's inline block sets `border-radius: 8px` on EVERY `.table-wishlist
   th, td`. Rounding each dark header cell turns the header bar into a row of
   detached tiles, and the corner cut-outs read as gaps between columns. Flatten
   every cell, then round only the two ends of the bar.
   -------------------------------------------------------------------------- */
.table-wishlist thead th {
  border-radius: 0 !important;
  border: none !important;
}
.table-wishlist thead th:first-child {
  border-top-left-radius: var(--mx-r-sm) !important;
  border-bottom-left-radius: var(--mx-r-sm) !important;
}
.table-wishlist thead th:last-child {
  border-top-right-radius: var(--mx-r-sm) !important;
  border-bottom-right-radius: var(--mx-r-sm) !important;
}
/* Body cells get the same treatment: square in the middle, rounded at the ends. */
.table-wishlist tbody td { border-radius: 0 !important; }
.table-wishlist tbody td:first-child {
  border-top-left-radius: var(--mx-r-sm) !important;
  border-bottom-left-radius: var(--mx-r-sm) !important;
}
.table-wishlist tbody td:last-child {
  border-top-right-radius: var(--mx-r-sm) !important;
  border-bottom-right-radius: var(--mx-r-sm) !important;
}
/* Horizontal gap must be zero — only the row gap is wanted. */
.table-wishlist { border-spacing: 0 10px !important; }

@media (max-width: 991px) {
  /* the stacked card layout owns the radius on phones */
  .table-wishlist tbody td,
  .table-wishlist tbody td:first-child,
  .table-wishlist tbody td:last-child { border-radius: 0 !important; }
}

/* --- 32b. Checkout: blocks that did not line up ---------------------------
   `<div class="payment ml-30">` (checkout.php line 524) carries a 30px left
   margin that `.delivery-options` does not, so the Payment card sat indented
   relative to Pickup Information and Delivery Type. And the Shipping/Total
   summary is wrapped in `col-md-6 col-lg-4` inside `row justify-content-center`,
   leaving it a narrow island floating above full-width cards.
   -------------------------------------------------------------------------- */
.payment.ml-30,
.delivery-options.ml-30 { margin-left: 0 !important; }

.cart-totals .row.justify-content-center { margin-left: 0; margin-right: 0; }
.cart-totals .row.justify-content-center > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* One rhythm for every block inside the order panel. */
.delivery-options,
.payment,
.cart-totals > .mb-4 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.delivery-options,
.payment {
  padding: 20px !important;
  border-radius: var(--mx-r) !important;
  margin-top: 18px !important;
}
.delivery-options h4,
.payment h4,
.payment h5 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  letter-spacing: -.02em;
  margin-bottom: 14px !important;
}
.payment_option .custome-radio { margin-bottom: 10px; }
.cart-summary { padding: 4px 0 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; }

/* --- 32c. Home category strip: fill the row instead of trailing off --------
   The strip is `<div class="d-flex overflow-scroll m-2">` holding 21 tiles.
   As a single non-wrapping flex line it leaves dead space to the right on wide
   screens. A grid of equal fractions always spans the full container, and wraps
   to as many rows as the tile count needs. Scoped to this one strip — it is the
   only `.d-flex.overflow-scroll` on any live page.
   -------------------------------------------------------------------------- */
section.container > .d-flex.overflow-scroll {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 4px;
  overflow: visible !important;
  margin: 8px 0 !important;
}
section.container > .d-flex.overflow-scroll > * {
  padding: 4px !important;
  min-width: 0;
}
section.container > .d-flex.overflow-scroll .category-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 8px !important;
}
section.container > .d-flex.overflow-scroll .category-image {
  width: 74px;
  height: 74px;
  margin: 0 auto;
}
section.container > .d-flex.overflow-scroll .category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--mx-line-soft);
}
section.container > .d-flex.overflow-scroll .fw-bold {
  font-size: 12px !important;
  line-height: 1.3;
  margin-top: 10px !important;
  overflow-wrap: anywhere;
}

@media (max-width: 991px) {
  section.container > .d-flex.overflow-scroll {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }
  section.container > .d-flex.overflow-scroll .category-image { width: 62px; height: 62px; }
  section.container > .d-flex.overflow-scroll .fw-bold { font-size: 11px !important; }
}
@media (max-width: 575px) {
  section.container > .d-flex.overflow-scroll {
    grid-template-columns: repeat(3, 1fr);   /* 21 tiles = 7 clean rows */
  }
}

/* --- 32d. Final checkout details ----------------------------------------- */

/* .cart-summary is no longer a card, so its gradient top-rule read as a stray
   divider floating mid-panel. The panel already has one at the very top. */
.cart-summary::before { display: none !important; }

/* Breathing room between the Total row and the Delivery Type field. */
.cart-summary { margin-bottom: 20px !important; }
.summary-row:last-child { margin-bottom: 0; }

/* The Mpesa mark and its label were butted together with no space. */
.custome-radio .form-check-label,
.payment_option .form-check-label {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.custome-radio .form-check-label img,
.payment_option .form-check-label img {
  max-height: 20px;
  width: auto;
  flex: 0 0 auto;
}

/* Order table: keep the quantity column tight so the price is not marooned. */
.order_table td:nth-child(3) { width: 84px; text-align: center; }
.order_table td:nth-child(4) { width: 150px; text-align: right; }
@media (max-width: 991px) {
  .order_table td:nth-child(3),
  .order_table td:nth-child(4) { width: auto; }
}