/* 
   Sivakasi Crackers E-Commerce Site - Premium Stylesheet
   Theme: Festive Premium (Crimson, Gold, Orange, White)
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors */
  --color-primary-dark: #320006;
  /* Rich deep burgundy maroon */
  --color-primary: #5E0009;
  /* Deep red from palette */
  --color-primary-light: #720137;
  /* Dark magenta from palette */
  --color-accent: #E29E00;
  /* Premium Amber-Gold for details */
  --color-accent-light: #FFC800;
  /* Bright Gold */
  --color-bg-light: #F6F7FA;
  /* Premium off-white / half-white page bg */
  --color-bg-card: #FFFFFF;
  /* Pure white card backgrounds */
  --color-text-dark: #2D0006;
  /* High contrast dark burgundy text */
  --color-text-muted: #725D60;
  /* Muted rose-slate text */
  --color-success: #10B981;
  /* Clean success green */
  --color-warning: #F59E0B;
  /* Amber warning */
  --color-danger: #EF4444;
  /* Flame red */
  --color-border: #E6DCDD;
  /* Subtle warm rose-gray border */

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(35, 0, 5, 0.05);
  --shadow-md: 0 8px 20px rgba(35, 0, 5, 0.08);
  --shadow-lg: 0 16px 36px rgba(35, 0, 5, 0.1);
  --shadow-gold: 0 8px 24px rgba(226, 158, 0, 0.2);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.5s ease;

  /* Layout constraints */
  --max-width: 1280px;
  --header-height: 72px;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Outfit', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  height: auto;
}

.wholesale-avatar-wrapper {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.wholesale-avatar {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  line-height: 1.6;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: var(--color-text-dark);
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  button,
  input,
  select,
  textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
    border: none;
  }

  button {
    cursor: pointer;
    background: none;
  }

  ul {
    list-style: none;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Scrollbar Customization */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--color-bg-light);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-light);
  }

  /* Utility Classes */
  .container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
  }

  .text-center {
    text-align: center;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .align-center {
    align-items: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .gap-10 {
    gap: 10px;
  }

  .gap-20 {
    gap: 20px;
  }

  /* Badges */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  .badge-green {
    background-color: hsl(145, 65%, 90%);
    color: var(--color-success);
  }

  .badge-bestseller {
    background-color: hsl(43, 85%, 90%);
    color: hsl(43, 85%, 35%);
  }

  .badge-discount {
    background-color: var(--color-primary-light);
    color: white;
  }

  /* Main Layout Shell */
  .app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(60, 5, 8, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--color-accent);
    color: white;
    box-shadow: var(--shadow-md);
  }

  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    gap: 20px;
  }

  .logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .logo-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 50%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
  }

  .logo-sub {
    font-size: 0.7rem;
    color: var(--color-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: -4px;
  }

  /* Location Selector */
  .location-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-fast);
    border: 1px solid rgba(212, 163, 89, 0.2);
  }

  .location-selector:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-accent);
  }

  /* Search Bar & Auto Suggestions */
  .search-wrapper {
    flex: 1;
    max-width: 600px;
    position: relative;
  }

  .search-bar-container {
    display: flex;
    align-items: center;
    background: var(--color-bg-card);
    border-radius: 25px;
    padding: 2px 2px 2px 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border);
  }

  .search-input {
    flex: 1;
    padding: 8px 0;
    font-size: 0.95rem;
    color: var(--color-text-dark);
    background: transparent;
  }

  .search-button {
    background: var(--color-primary);
    color: white;
    padding: 0 22px;
    border-radius: 0 23px 23px 0;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-fast);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -2px -2px -2px 0;
    cursor: pointer;
  }

  .search-button:hover {
    background: var(--color-primary-light);
    color: white;
  }

  .search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-bg-card);
    border-radius: 12px;
    margin-top: 8px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: none;
    z-index: 110;
    border: 1px solid var(--color-border);
  }

  .suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    color: var(--color-text-dark);
    transition: var(--transition-fast);
  }

  .suggestion-item:hover {
    background-color: var(--color-bg-light);
  }

  .suggestion-item img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
  }

  .suggestion-item .sug-title {
    font-weight: 500;
    font-size: 0.9rem;
  }

  .suggestion-item .sug-price {
    margin-left: auto;
    color: var(--color-primary-light);
    font-weight: 600;
    font-size: 0.85rem;
  }

  /* Nav Actions */
  .header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    color: white;
    position: relative;
    transition: var(--transition-fast);
  }

  .action-btn:hover {
    color: var(--color-accent);
  }

  .action-btn svg {
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
  }

  .badge-count {
    position: absolute;
    top: -6px;
    right: 6px;
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-primary-dark);
  }

  /* Mega Menu Navigation */
  .nav-categories-bar {
    background: var(--color-primary-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    white-space: nowrap;
  }

  .nav-categories-bar::-webkit-scrollbar {
    display: none;
  }

  .mega-menu-list {
    display: flex;
    justify-content: center;
  }

  .mega-menu-item {
    position: relative;
  }

  .mega-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    transition: var(--transition-fast);
  }

  .mega-menu-trigger:hover,
  .mega-menu-item:hover .mega-menu-trigger {
    color: var(--color-accent);
    background-color: rgba(255, 255, 255, 0.05);
  }

  /* Dropdown pane */
  .mega-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 600px;
    background: var(--color-bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--color-accent);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
    z-index: 105;
  }

  .mega-menu-item:hover .mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .mega-column h4 {
    font-size: 0.85rem;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
  }

  .mega-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.85rem;
    color: var(--color-text-dark);
    transition: var(--transition-fast);
  }

  .mega-link:hover {
    color: var(--color-primary-light);
    transform: translateX(4px);
  }

  /* App Main Container (SPA View Container) */
  .view-container {
    min-height: calc(100vh - 400px);
    padding: 30px 0 60px;
    display: none;
  }

  .view-container.active-view {
    display: block;
    animation: slideUp var(--transition-normal);
  }

  /* HOME VIEW */
  /* Hero Banner */
  .hero-slider-section {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 380px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-md);
    background: url('diwali_hero_banner.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    color: white;
  }

  .hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 12, 41, 0.75) 0%, rgba(48, 43, 99, 0.45) 50%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
  }

  .hero-slider-content {
    position: relative;
    z-index: 2;
    padding: 50px;
    max-width: 650px;
  }

  .hero-tagline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.2rem;
    color: #ffda79;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  }

  .hero-title {
    font-size: 3rem;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9);
  }

  .hero-desc {
    font-size: 1.05rem;
    margin-bottom: 25px;
    color: #f1f2f6;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    opacity: 0.95;
  }

  .hero-cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #ffd700 0%, #ff9900 100%);
    color: #1a0933;
    font-weight: 800;
    padding: 14px 34px;
    border-radius: 30px;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 1px;
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.4);
    transition: var(--transition-fast);
  }

  .hero-cta:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 28px rgba(255, 153, 0, 0.6);
  }

  .hero-countdown {
    position: absolute;
    right: 50px;
    bottom: 50px;
    background: rgba(18, 12, 38, 0.85);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 14px;
    padding: 18px 26px;
    z-index: 2;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.1);
    text-align: center;
  }

  .countdown-grid {
    display: flex;
    gap: 12px;
    margin-top: 10px;
  }

  .countdown-box {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 55px;
  }

  .countdown-box span {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
  }

  .countdown-box label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #e0e0e0;
  }

  /* Category Circle Cards */
  .section-title {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .section-title h2 {
    font-size: 1.8rem;
    position: relative;
    padding-bottom: 8px;
  }

  .section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--color-accent);
  }

  .view-all-link {
    font-size: 0.85rem;
    color: var(--color-primary-light);
    font-weight: 600;
  }

  .categories-strip {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 0 25px;
    margin-bottom: 30px;
  }

  .categories-strip::-webkit-scrollbar {
    height: 6px;
  }

  .categories-strip::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
  }

  .category-circle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 10px;
    min-width: 95px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
  }

  .category-circle-card:hover,
  .category-circle-card.active-category {
    transform: translateY(-6px);
    border-color: var(--color-primary-dark) !important;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.25) !important;
  }

  .circle-icon {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: var(--transition-normal);
  }

  .category-circle-card:hover .circle-icon,
  .category-circle-card.active-category .circle-icon {
    border-color: var(--color-primary-dark) !important;
    color: var(--color-accent) !important;
    background: var(--color-primary-dark) !important;
    box-shadow: var(--shadow-gold) !important;
    transform: scale(1.05);
  }

  .category-circle-card span {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 8px;
    color: var(--color-text-dark);
    transition: var(--transition-fast);
  }

  .category-circle-card:hover span,
  .category-circle-card.active-category span {
    color: var(--color-primary-dark) !important;
  }

  /* Budget Selector Section */
  .budget-selector-section {
    background: var(--color-bg-card);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
  }

  .budget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    margin-top: 20px;
  }

  .budget-card {
    background: var(--color-bg-light);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
  }

  .budget-card:hover,
  .budget-card.active-budget {
    border-color: var(--color-accent) !important;
    background: var(--color-primary-dark) !important;
    color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.25) !important;
  }

  .budget-card:hover h3,
  .budget-card.active-budget h3 {
    color: var(--color-accent) !important;
  }

  .budget-card h3 {
    font-size: 1.3rem;
    margin-bottom: 4px;
  }

  .budget-card span {
    font-size: 0.8rem;
    font-weight: 500;
  }

  /* Horizontal banner discount */
  .discount-promo-banner {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #111 100%);
    border-radius: 20px;
    padding: 40px;
    color: white;
    position: relative;
    overflow: hidden;
    margin: 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px solid var(--color-accent);
  }

  .discount-banner-text h3 {
    color: var(--color-accent-light);
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
  }

  .discount-banner-text h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .discount-banner-text p {
    font-size: 0.9rem;
    opacity: 0.8;
  }

  .coupon-tag {
    background: rgba(255, 255, 255, 0.15);
    border: 1px dashed var(--color-accent);
    padding: 10px 20px;
    border-radius: 8px;
    font-family: monospace;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-accent);
    letter-spacing: 1px;
  }

  /* Trusted Brands */
  .brands-strip {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    background: var(--color-bg-card);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-sm);
  }

  .brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-align: center;
  }

  .brand-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: white;
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    border: 2px solid white;
    outline: 2px solid var(--color-accent);
    transition: var(--transition-normal);
  }

  /* Product Cards Grid & Design */
  .products-carousel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
  }

  .product-card {
    background: var(--color-bg-card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: var(--transition-normal);
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: rgba(212, 163, 89, 0.4);
  }

  .card-media-wrapper {
    position: relative;
    background-color: var(--color-primary-dark);
    height: 200px;
    overflow: hidden;
  }

  .product-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
  }

  .product-card:hover .product-card-img {
    transform: scale(1.08);
  }

  .card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
  }

  .wishlist-btn-circle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
    z-index: 5;
  }

  .wishlist-btn-circle:hover {
    color: var(--color-danger);
    transform: scale(1.1);
  }

  .wishlist-btn-circle.active-wish {
    color: var(--color-danger);
    fill: var(--color-danger);
  }

  .card-quickview-btn {
    position: absolute;
    bottom: -45px;
    left: 0;
    width: 100%;
    background: rgba(60, 5, 8, 0.85);
    color: var(--color-accent);
    padding: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    backdrop-filter: blur(4px);
    transition: var(--transition-fast);
    z-index: 6;
  }

  .card-media-wrapper:hover .card-quickview-btn {
    bottom: 0;
  }

  /* Card Content Details */
  .product-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .product-code-ref {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 4px;
  }

  .product-title-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.6rem;
    transition: var(--transition-fast);
  }

  .product-title-link:hover {
    color: var(--color-primary-light);
  }

  .product-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: white;
    background: var(--color-success);
    padding: 2px 8px;
    border-radius: 12px;
    width: fit-content;
    font-weight: 600;
    margin-bottom: 12px;
  }

  .price-container {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 12px;
  }

  .offer-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
  }

  .original-price {
    font-size: 0.85rem;
    text-decoration: line-through;
    color: var(--color-text-muted);
  }

  .discount-percent {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-success);
  }

  .card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  .card-circle-action-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition-fast);
    flex-shrink: 0;
    text-decoration: none;
  }

  .card-circle-action-btn.action-orange {
    background: rgba(255, 152, 0, 0.08);
    color: #FF9800;
    border-color: rgba(255, 152, 0, 0.25);
  }

  .card-circle-action-btn.action-orange:hover {
    background: rgba(255, 152, 0, 0.2);
    transform: translateY(-2px);
  }

  .card-circle-action-btn.action-green {
    background: rgba(76, 175, 80, 0.08);
    color: #4CAF50;
    border-color: rgba(76, 175, 80, 0.25);
  }

  .card-circle-action-btn.action-green:hover {
    background: rgba(76, 175, 80, 0.2);
    transform: translateY(-2px);
  }

  /* LISTING VIEW */
  .listing-view-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
  }

  /* Filters Sidebar */
  .filters-sidebar {
    background: var(--color-bg-card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    align-self: start;
  }

  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
  }

  .clear-filters-btn {
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 6px;
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.25);
    transition: var(--transition-fast);
  }

  .clear-filters-btn:hover {
    background: rgba(220, 38, 38, 0.18);
    transform: translateY(-1px);
  }

  .filters-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .filters-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .filters-sidebar::-webkit-scrollbar-thumb {
    background: rgba(94, 0, 9, 0.1);
    border-radius: 3px;
  }

  .filters-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(94, 0, 9, 0.2);
  }

  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 15px;
  }

  .clear-filters-btn {
    font-size: 0.75rem;
    color: var(--color-primary-light);
    font-weight: 600;
  }

  .filter-group {
    margin-bottom: 20px;
  }

  .filter-group-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    color: var(--color-text-dark);
  }

  .filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    cursor: pointer;
  }

  .filter-checkbox-label input {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    accent-color: var(--color-primary);
  }

  .price-range-slider {
    margin-top: 10px;
  }

  .range-inputs {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .range-inputs input {
    width: 45%;
    border: 1px solid var(--color-border);
    padding: 6px;
    border-radius: 6px;
    font-size: 0.8rem;
    text-align: center;
  }

  /* Listings Header */
  .listings-main-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .listing-controls-bar {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
  }

  .listing-controls-actions {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .results-count {
    font-size: 0.9rem;
    color: var(--color-text-muted);
  }

  .sort-select-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
  }

  .sort-select {
    border: 1px solid var(--color-border);
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--color-bg-light);
    font-weight: 500;
  }

  /* PRODUCT DETAILS VIEW */
  .product-details-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: var(--color-bg-card);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 40px;
  }

  /* Images gallery gallery */
  .detail-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .main-image-display {
    height: 400px;
    background-color: var(--color-bg-light);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-image-display img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .thumbnail-strip {
    display: flex;
    gap: 10px;
  }

  .thumbnail-item {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: var(--transition-fast);
  }

  .thumbnail-item.active-thumb,
  .thumbnail-item:hover {
    border-color: var(--color-accent);
  }

  .thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Detail Info */
  .detail-info-pane {
    display: flex;
    flex-direction: column;
  }

  .detail-brand {
    font-size: 0.85rem;
    color: var(--color-primary-light);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .detail-title {
    font-size: 1.8rem;
    margin-bottom: 12px;
    line-height: 1.2;
  }

  .rating-reviews-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
  }

  .detail-specs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    background: var(--color-bg-light);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-size: 0.85rem;
  }

  .spec-item span:first-child {
    color: var(--color-text-muted);
    margin-right: 6px;
  }

  .spec-item span:last-child {
    font-weight: 600;
  }

  .qty-selection-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
  }

  .qty-selector {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
  }

  .qty-btn {
    padding: 10px 16px;
    background: var(--color-bg-light);
    font-weight: 600;
    font-size: 1.1rem;
  }

  .qty-value {
    padding: 10px 20px;
    font-weight: 700;
    min-width: 50px;
    text-align: center;
    background: var(--color-bg-card);
  }

  .buy-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
  }

  .btn-add-cart-large {
    flex: 1;
    background: var(--color-primary-light);
    color: white;
    padding: 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-fast);
  }

  .btn-add-cart-large:hover {
    background: hsl(14, 90%, 48%);
    transform: translateY(-2px);
  }

  .btn-buy-now-large {
    flex: 1;
    background: var(--color-accent);
    color: var(--color-primary-dark);
    padding: 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-gold);
  }

  .btn-buy-now-large:hover {
    background: var(--color-accent-light);
    transform: translateY(-2px);
  }

  .safety-sheet-box {
    border: 2px solid hsl(38, 92%, 85%);
    background-color: hsl(38, 92%, 97%);
    border-radius: 12px;
    padding: 20px;
    margin-top: 10px;
  }

  .safety-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: hsl(38, 92%, 35%);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 10px;
  }

  .safety-list {
    font-size: 0.85rem;
    list-style-type: disc;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  /* CART VIEW */
  .cart-split-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
  }

  .cart-items-panel {
    background: var(--color-bg-card);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
  }

  .cart-item-row {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .cart-item-row:last-child {
    border-bottom: none;
  }

  .cart-item-img {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--color-border);
  }

  .cart-item-info {
    flex: 1;
  }

  .cart-item-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .cart-item-code {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
  }

  .cart-item-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
  }

  .remove-cart-item-btn {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-danger);
  }

  .cart-price-column {
    text-align: right;
    min-width: 100px;
  }

  .cart-price-column .item-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary-dark);
  }

  .cart-price-column .item-orig-price {
    font-size: 0.8rem;
    text-decoration: line-through;
    color: var(--color-text-muted);
  }

  /* Summary Box */
  .cart-summary-box {
    background: var(--color-bg-card);
    border-radius: 20px;
    padding: 25px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    height: fit-content;
    position: sticky;
    top: 90px;
  }

  .summary-title {
    font-size: 1.1rem;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 15px;
  }

  .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 12px;
  }

  .summary-row.total-row {
    font-size: 1.2rem;
    font-weight: 700;
    border-top: 1px dashed var(--color-border);
    padding-top: 15px;
    margin-top: 15px;
    color: var(--color-primary-dark);
  }

  .coupon-apply-row {
    display: flex;
    margin: 15px 0 25px;
    gap: 8px;
  }

  .coupon-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
  }

  .btn-coupon-apply {
    background: var(--color-primary-dark);
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition-fast);
  }

  .btn-coupon-apply:hover {
    background: var(--color-primary-light);
  }

  .checkout-proceed-btn {
    width: 100%;
    background: var(--color-accent);
    color: var(--color-primary-dark);
    padding: 14px;
    border-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-gold);
  }

  .checkout-proceed-btn:hover {
    background: var(--color-accent-light);
  }

  /* CHECKOUT VIEW */
  .checkout-steps-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
  }

  .checkout-form-panel {
    background: var(--color-bg-card);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
  }

  .checkout-step-section {
    margin-bottom: 30px;
  }

  .checkout-step-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .step-number {
    background: var(--color-primary);
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
  }

  .address-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .input-col-full {
    grid-column: span 2;
  }

  .checkout-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .checkout-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .checkout-field input,
  .checkout-field select,
  .checkout-field textarea {
    border: 1px solid var(--color-border);
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--color-bg-light);
    color: var(--color-text-dark);
  }

  .payment-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .payment-radio-label {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
  }

  .payment-radio-label:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-light);
  }

  .payment-radio-label input {
    accent-color: var(--color-primary);
  }

  .payment-radio-label span {
    font-weight: 600;
    font-size: 0.85rem;
  }

  /* ACCOUNT VIEW */
  .account-dashboard-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px;
  }

  .account-side-menu {
    background: var(--color-bg-card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    height: fit-content;
  }

  .mobile-account-dropdown {
    display: none;
  }

  .account-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-text-dark);
    margin-bottom: 6px;
    transition: var(--transition-fast);
  }

  .account-menu-link:hover,
  .account-menu-link.active-menu {
    background: var(--color-primary-dark);
    color: var(--color-accent);
  }

  .account-content-pane {
    background: var(--color-bg-card);
    border-radius: 16px;
    padding: 30px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
  }

  /* Order Tracker Timeline */
  .tracker-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 40px 0 25px;
    padding: 0 10px;
  }

  .tracker-timeline::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--color-border);
    z-index: 1;
  }

  .tracker-progress-bar {
    position: absolute;
    top: 20px;
    left: 0;
    height: 4px;
    background-color: var(--color-success);
    z-index: 1;
    transition: width var(--transition-slow);
    width: var(--progress-w, 0%);
  }

  .tracker-node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    text-align: center;
  }

  .tracker-node-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-bg-card);
    border: 4px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-muted);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all var(--transition-normal);
  }

  .tracker-node.completed .tracker-node-dot {
    border-color: var(--color-success);
    background-color: var(--color-success);
    color: white;
  }

  .tracker-node.active-step .tracker-node-dot {
    border-color: var(--color-accent);
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 0 0 6px rgba(255, 152, 0, 0.15), var(--shadow-gold);
  }

  .tracker-node-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
  }

  .tracker-node-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
  }

  .tracker-node-date {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    margin-top: 3px;
  }

  .tracker-node.completed .tracker-node-label,
  .tracker-node.active-step .tracker-node-label {
    color: var(--color-text-dark);
  }

  .mobile-tracker-summary {
    display: none;
  }

  /* OVERLAYS & POPUPS */
  /* Compare Drawer */
  .compare-drawer {
    position: fixed;
    bottom: -400px;
    left: 0;
    width: 100%;
    background: var(--color-bg-card);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    border-top: 3px solid var(--color-accent);
    z-index: 150;
    transition: var(--transition-normal);
    padding: 15px 20px;
  }

  .compare-drawer.open-drawer {
    bottom: 0;
  }

  .compare-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .compare-grid-horizontal {
    display: flex;
    gap: 15px;
    overflow-x: auto;
  }

  .compare-item-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    min-width: 250px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    background: var(--color-bg-light);
  }

  .remove-compare-x {
    position: absolute;
    top: 5px;
    right: 5px;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  /* Floating WhatsApp Support */
  .whatsapp-chat-button {
    display: none !important;
  }

  .whatsapp-chat-button:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  }

  /* Dialog Overlay / Modals */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
  }

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

  .modal-content-box {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 16px;
    max-width: 800px;
    width: 90%;
    position: relative;
    padding: 0 !important;
    box-shadow: 0 8px 32px 0 rgba(94, 0, 9, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #modal-body-content {
    overflow-y: auto;
    flex: 1;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
  }

  .modal-overlay.video-lightbox-mode .modal-content-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 960px;
    width: 95% !important;
    overflow: visible;
  }

  .modal-overlay.video-lightbox-mode .modal-close-btn {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.4rem;
    top: 15px;
    right: 15px;
    z-index: 220;
    background: rgba(0, 0, 0, 0.5);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-bottom: 2px;
    transition: var(--transition-fast);
  }
  .modal-overlay.video-lightbox-mode .modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff !important;
    transform: scale(1.05);
  }

  .modal-overlay.video-lightbox-mode .video-wrapper {
    height: 85vh !important;
  }
  .modal-overlay.video-lightbox-mode .video-wrapper video {
    height: 100% !important;
    object-fit: contain !important;
  }

  .modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.4rem;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
  }

  .modal-close-btn:hover {
    color: var(--color-danger);
  }

  /* Coupon Popup */
  .coupon-popup-card {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, hsl(354, 75%, 28%) 100%);
    color: white;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    position: relative;
    max-width: 450px;
    border: 3px solid var(--color-accent);
  }

  .coupon-popup-card h2 {
    color: var(--color-accent);
    font-size: 2rem;
    margin-bottom: 8px;
  }

  .coupon-code-badge {
    background: rgba(255, 255, 255, 0.15);
    border: 2px dashed var(--color-accent);
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-accent-light);
    display: inline-block;
    margin: 15px 0;
    cursor: pointer;
  }

  /* Mobile Navigation Bar Sticky */
  .mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    z-index: 99;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  }

  .mobile-bottom-tabs {
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
  }

  .mobile-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    font-weight: 500;
  }

  .mobile-tab-item.active-tab {
    color: var(--color-primary);
  }

  .mobile-tab-item svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
  }

  /* FOOTER Styles */
  .app-footer {
    background-color: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 60px 0 20px;
    border-top: 3px solid var(--color-accent);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 40px;
    margin-bottom: 45px;
  }

  .footer-column h3 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
  }

  .footer-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--color-accent);
  }

  .footer-links-list li {
    margin-bottom: 10px;
    font-size: 0.85rem;
  }

  .footer-links-list li a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .newsletter-form {
    display: flex;
    gap: 8px;
    margin-top: 15px;
  }

  .newsletter-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 14px;
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
  }

  .newsletter-submit-btn {
    background: var(--color-accent);
    color: var(--color-primary-dark);
    font-weight: 700;
    padding: 0 16px;
    border-radius: 8px;
  }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    text-align: center;
    font-size: 0.8rem;
  }

  /* Animations */
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* RESPONSIVE MEDIA QUERIES */

  @media (max-width: 1024px) {
    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }

    .listing-view-layout {
      grid-template-columns: 1fr;
    }

    .filters-sidebar {
      display: none;
      /* In mobile, display filters via modal trigger */
    }

    .product-details-layout {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  }

  @media (max-width: 1024px) {
    :root {
      --header-height: 60px;
    }

    .categories-navigation-section {
      display: none !important;
    }

    .container {
      padding: 0 12px;
    }

    .header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      height: 60px;
    }

    .logo-container {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .logo-text {
      font-size: 0.95rem !important;
      white-space: nowrap;
    }

    .logo-sub, .logo-icon {
      display: none !important;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #auth-trigger-btn,
    #home-trigger-btn,
    #catalog-trigger-btn {
      display: none !important;
    }

    .location-selector {
      display: none !important;
    }

    .search-wrapper {
      display: block !important;
      flex: 1;
      max-width: 140px;
      margin: 0 8px;
    }

    .search-wrapper .search-button {
      display: none !important;
    }

    .search-wrapper .search-bar-container {
      padding-right: 10px !important;
      border-radius: 16px !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      height: 32px;
      background: rgba(255, 255, 255, 0.08) !important;
    }

    .search-wrapper .search-input {
      font-size: 0.75rem !important;
      padding: 4px 0 !important;
      color: white !important;
    }

    .search-wrapper .search-input::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .mobile-search-toggle-btn {
      display: none !important;
    }

    .nav-categories-bar {
      display: none;
      /* Use mobile bottom navigation and swipe-strips */
    }

    .brands-strip {
      padding: 20px 10px;
      gap: 15px 10px;
    }

    .hero-slider-section {
      height: auto;
      padding: 35px 20px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 25px;
    }

    .hero-slider-content {
      padding: 0;
      width: 100%;
    }

    .hero-title {
      font-size: 2rem;
    }

    .hero-countdown {
      position: static;
      margin-top: 10px;
      display: block;
      width: 100%;
      max-width: 100%;
    }

    .products-carousel-grid {
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 15px;
    }

    .product-card-body {
      padding: 10px;
    }

    .product-title-link {
      font-size: 0.85rem;
      height: 2.2rem;
    }

    .offer-price {
      font-size: 1rem;
    }

    .original-price,
    .discount-percent {
      font-size: 0.75rem;
    }

    .card-actions {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 5px;
      width: 100%;
    }

    .card-circle-action-btn {
      width: 32px;
      height: 32px;
      min-width: 32px;
      font-size: 0.85rem;
      flex-shrink: 0;
    }

    .clear-filters-btn {
      padding: 5px 10px;
      font-size: 0.75rem;
      cursor: pointer;
      border-radius: 6px;
      background: rgba(220, 38, 38, 0.08);
      color: #dc2626;
      border: 1px solid rgba(220, 38, 38, 0.2);
      font-weight: 700;
      transition: var(--transition-fast);
    }

    .clear-filters-btn:hover {
      background: rgba(220, 38, 38, 0.15);
    }

    .wholesale-circle-btn {
      width: 30px;
      height: 30px;
      font-size: 0.8rem;
    }

    .cart-split-layout,
    .checkout-steps-layout,
    .account-dashboard-layout,
    .footer-grid {
      grid-template-columns: 1fr;
    }

    .listing-controls-bar {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 12px;
    }

    .listing-controls-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      width: 100%;
    }

    .view-toggle-buttons {
      width: 100%;
      display: flex;
    }

    .view-toggle-btn {
      flex: 1;
      text-align: center;
    }

    .sort-select-wrapper {
      width: 100%;
      justify-content: space-between;
    }

    .sort-select {
      flex: 1;
      max-width: none;
    }

    .mobile-bottom-bar {
      display: block;
    }

    body {
      padding-bottom: 60px;
      /* offset for bottom bar */
    }

    .discount-promo-banner {
      flex-direction: column;
      text-align: center;
      gap: 20px;
    }

    /* Mobile Cart Page Overrides */
    .cart-items-panel {
      padding: 15px !important;
      border-radius: 12px !important;
    }
    .cart-summary-box {
      padding: 15px !important;
      border-radius: 12px !important;
    }
    .cart-item-row {
      flex-direction: column !important;
      gap: 12px !important;
      position: relative !important;
      padding: 15px 0 !important;
    }
    .cart-item-img {
      width: 70px !important;
      height: 70px !important;
    }
    .cart-item-info {
      width: 100% !important;
    }
    .cart-price-column {
      position: absolute !important;
      top: 15px !important;
      right: 0 !important;
      text-align: right !important;
    }
    .cart-item-actions {
      margin-top: 12px !important;
      gap: 12px !important;
    }

    /* Mobile Checkout & Payment Page Overrides */
    .checkout-steps-layout {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }
    .checkout-form-panel {
      padding: 16px !important;
      border-radius: 14px !important;
    }
    .address-form-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
    .input-col-full {
      grid-column: span 1 !important;
    }
    .checkout-step-title {
      font-size: 1rem !important;
    }
    .payment-options-grid {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }
    .payment-radio-label {
      padding: 12px 14px !important;
      border-radius: 10px !important;
    }
    .payment-radio-label span {
      font-size: 0.82rem !important;
    }
    #payment-upi-details,
    #payment-card-details,
    #payment-cod-details {
      padding: 12px !important;
      border-radius: 10px !important;
      margin-top: 14px !important;
    }

    /* Mobile Account & Settings Overrides */
    .account-user-profile-header {
      display: none !important;
    }
    .account-dashboard-layout {
      display: flex !important;
      flex-direction: column !important;
      gap: 16px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }
    .account-side-menu {
      width: 100% !important;
      padding: 14px !important;
      border-radius: 14px !important;
      margin-bottom: 0 !important;
      box-sizing: border-box !important;
    }
    .account-side-menu-nav {
      display: none !important;
    }
    .mobile-account-dropdown {
      display: block !important;
      position: relative !important;
      width: 100% !important;
      margin-bottom: 5px !important;
    }
    .mobile-account-dropdown-trigger {
      width: 100% !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      background: var(--color-primary-dark) !important;
      color: white !important;
      border: 1px solid var(--color-primary-dark) !important;
      padding: 12px 16px !important;
      border-radius: 12px !important;
      font-size: 0.9rem !important;
      font-weight: 700 !important;
      cursor: pointer !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
      transition: all var(--transition-fast) !important;
      font-family: inherit !important;
      outline: none !important;
    }
    .mobile-account-dropdown-trigger:active {
      transform: scale(0.98) !important;
    }
    .mobile-account-dropdown-menu {
      display: none;
      position: absolute !important;
      top: calc(100% + 6px) !important;
      left: 0 !important;
      width: 100% !important;
      background: var(--color-bg-card) !important;
      border: 1px solid var(--color-border) !important;
      border-radius: 12px !important;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
      z-index: 1000 !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }
    .mobile-account-dropdown.open .mobile-account-dropdown-menu {
      display: flex !important;
      flex-direction: column !important;
    }
    .mobile-account-dropdown-menu button {
      width: 100% !important;
      text-align: left !important;
      background: transparent !important;
      border: none !important;
      padding: 12px 18px !important;
      font-size: 0.88rem !important;
      font-weight: 600 !important;
      color: var(--color-text-dark) !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      transition: background 0.15s ease, color 0.15s ease !important;
      border-bottom: 1px solid rgba(0,0,0,0.03) !important;
      font-family: inherit !important;
      outline: none !important;
    }
    .mobile-account-dropdown-menu button:last-child {
      border-bottom: none !important;
    }
    .mobile-account-dropdown-menu button:hover,
    .mobile-account-dropdown-menu button:active {
      background: rgba(255, 152, 0, 0.08) !important;
      color: var(--color-primary-dark) !important;
    }
    .mobile-account-dropdown-menu button.active-dropdown-item {
      background: rgba(255, 152, 0, 0.12) !important;
      color: var(--color-primary-dark) !important;
      font-weight: 700 !important;
    }
    .account-content-pane {
      width: 100% !important;
      max-width: 100% !important;
      padding: 16px 12px !important;
      border-radius: 14px !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }
    .address-form-grid,
    #profile-edit-form {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    .address-form-grid .checkout-field,
    #profile-edit-form .checkout-field,
    .checkout-field {
      grid-column: span 1 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    .checkout-field input,
    .checkout-field select,
    .checkout-field textarea {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    .input-col-full {
      grid-column: span 1 !important;
    }
    .profile-update-submit-btn,
    #profile-edit-form button {
      grid-column: span 1 !important;
      width: 100% !important;
      padding: 12px !important;
      border-radius: 8px !important;
      background: var(--color-primary-dark) !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      font-size: 0.85rem !important;
    }
    .tracker-timeline {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      padding: 0 10px 0 15px !important;
      margin: 25px 0 !important;
      gap: 30px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .tracker-timeline::before {
      top: 0 !important;
      left: 35px !important;
      width: 4px !important;
      height: 100% !important;
    }

    .tracker-progress-bar {
      top: 0 !important;
      left: 35px !important;
      width: 4px !important;
      height: var(--progress-h, 0%) !important;
      transition: height var(--transition-slow) !important;
    }

    .tracker-node {
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-start !important;
      text-align: left !important;
      width: 100% !important;
      gap: 18px !important;
    }

    .tracker-node-dot {
      flex-shrink: 0 !important;
    }

    .tracker-node-info {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      margin-top: 2px !important;
    }

    .tracker-node-label {
      font-size: 0.85rem !important;
    }

    .tracker-node-date {
      font-size: 0.72rem !important;
      margin-top: 3px !important;
    }

    .mobile-tracker-summary {
      display: block !important;
      background: var(--color-bg-card) !important;
      border: 1px solid var(--color-border) !important;
      border-radius: 14px !important;
      padding: 16px !important;
      margin-bottom: 20px !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
    }

    .tracker-history-toggle-btn {
      width: 100% !important;
      background: var(--color-bg-light) !important;
      border: 1px solid var(--color-border) !important;
      color: var(--color-text-dark) !important;
      padding: 12px !important;
      border-radius: 10px !important;
      font-size: 0.8rem !important;
      font-weight: 700 !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      transition: all var(--transition-fast) !important;
      outline: none !important;
      font-family: inherit !important;
    }

    .tracker-history-toggle-btn:hover {
      background: var(--color-border) !important;
    }

    .tracker-history-toggle-btn.expanded {
      background: var(--color-primary-dark) !important;
      color: white !important;
      border-color: var(--color-primary-dark) !important;
    }

    .tracker-timeline.collapsed-mobile {
      display: none !important;
    }
  }

  /* Wholesale Order Sheet Table Layout (inspired by crackersshope.com) */
  .view-toggle-btn {
    border: none;
    background: transparent;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 6px 12px;
  }

  .view-toggle-btn.active-toggle {
    background: var(--color-primary);
    color: white !important;
  }

  .wholesale-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: var(--color-bg-card);
    font-size: 0.9rem;
  }

  .wholesale-table th {
    background: var(--color-primary-dark);
    color: white;
    padding: 12px 10px;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid var(--color-accent);
  }

  .wholesale-table td {
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
  }

  .wholesale-table tr.selected-row {
    background-color: hsl(43, 85%, 96%) !important;
  }

  .wholesale-table tr:hover {
    background-color: var(--color-bg-light);
  }

  .table-category-header-row {
    background-color: hsl(354, 75%, 94%) !important;
  }

  .table-category-header-row td {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-primary-dark);
    padding: 14px 10px;
    border-bottom: 2px solid var(--color-accent);
  }

  .table-thumb {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }

  .table-qty-input {
    width: 60px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    background: var(--color-bg-light);
  }

  .table-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
  }

  /* Floating Batch Bar styles */
  .batch-add-bar {
    position: fixed;
    bottom: -120px;
    left: 0;
    width: 100%;
    background: var(--color-primary-dark);
    color: white;
    padding: 15px 0;
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    z-index: 140;
    transition: bottom var(--transition-normal);
  }

  .batch-add-bar.open-batch-bar {
    bottom: 0;
  }

  /* Adjust floating bar on mobile for sticky bottom navigation */
  @media (max-width: 768px) {
    .batch-add-bar.open-batch-bar {
      bottom: 58px;
      /* sits right on top of bottom mobile navigation tabs */
    }

    .wholesale-table th:nth-child(5),
    .wholesale-table td:nth-child(5) {
      display: none;
      /* hide weight column in mobile */
    }
  }

  /* Category SVG outlines styling */
  .circle-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    display: block;
  }

  .mega-menu-trigger svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    display: inline-block;
    vertical-align: middle;
  }

  /* Mobile Floating Filter Bar */
  .mobile-filter-trigger-bar {
    display: none;
    position: fixed;
    bottom: 75px;
    /* floats just above mobile navigation tabs */
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    width: auto;
    max-width: 90%;
  }

  .mobile-filter-btn {
    background: var(--color-primary-dark);
    color: var(--color-accent-light);
    border: 2px solid var(--color-accent);
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-gold);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: var(--transition-fast);
  }

  .mobile-filter-btn:hover {
    transform: scale(1.05);
  }

  /* Mobile Slide-up Filter Drawer */
  .mobile-filter-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 210;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
  }

  .mobile-filter-drawer-overlay.drawer-open {
    opacity: 1;
    visibility: visible;
  }

  .mobile-filter-drawer-box {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 80vh;
    background: var(--color-bg-card);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
    border-top: 3px solid var(--color-accent);
    display: flex;
    flex-direction: column;
    transition: bottom var(--transition-normal);
  }

  .mobile-filter-drawer-overlay.drawer-open .mobile-filter-drawer-box {
    bottom: 0;
  }

  .mobile-filter-drawer-header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-filter-drawer-close {
    font-size: 1.8rem;
    color: var(--color-text-muted);
  }

  .mobile-filter-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }

  .mobile-filter-drawer-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-light);
  }

  .mobile-drawer-reset-btn {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-danger);
    text-decoration: underline;
  }

  .mobile-drawer-apply-btn {
    background: var(--color-primary);
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
  }

  /* Media query additions for filter bar and double columns card grid */
  @media (max-width: 1024px) {
    .mobile-filter-trigger-bar {
      display: none !important;
    }
  }

  @media (max-width: 768px) {

    /* Make card body padding compact */
    .products-carousel-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      /* Forces perfect two-column grid on mobile */
      gap: 12px !important;
    }

    .product-card {
      border-radius: 12px;
    }

    .card-media-wrapper {
      height: 140px;
    }

    .product-card-body {
      padding: 8px;
    }

    .product-title-link {
      font-size: 0.8rem;
      height: 2rem;
    }

    .offer-price {
      font-size: 0.95rem;
    }

    .original-price,
    .discount-percent {
      font-size: 0.7rem;
    }
  }

  /* Card Quantity Controller & Floating Checkout Bar */
  .card-qty-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1;
  }

  .qty-selector-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    padding: 2px;
    height: 38px;
    width: 100%;
  }

  .qty-pill-btn {
    width: 32px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--color-primary);
    font-weight: 800;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
  }

  .qty-pill-btn:hover {
    background: rgba(94, 0, 9, 0.08);
  }

  .qty-pill-val {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-dark);
  }

  .qty-pill-input {
    width: 42px;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-dark);
    font-family: inherit;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }

  .qty-pill-input::-webkit-outer-spin-button,
  .qty-pill-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }

  .qty-pill-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .card-item-subtotal {
    margin-top: 10px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-dark);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
  }

  .subtotal-val {
    font-weight: 800;
    color: var(--color-primary);
  }

  .savings-val {
    color: #10B981;
  }
}

.floating-checkout-bar {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 500px;
    background: var(--color-primary-dark);
    color: white;
    border-radius: 16px;
    padding: 12px 20px;
    box-shadow: 0 10px 30px rgba(94, 0, 9, 0.35);
    z-index: 98;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1.5px solid var(--color-accent);
  }

  .floating-checkout-bar.active {
    bottom: 70px;
  }

  .floating-checkout-info {
    display: flex;
    flex-direction: column;
  }

  .floating-checkout-qty {
    font-size: 0.75rem;
    color: var(--color-accent-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .floating-checkout-total {
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .floating-checkout-savings {
    font-size: 0.72rem;
    color: #10B981;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
  }

  .floating-checkout-btn {
    background: var(--color-accent-light);
    color: var(--color-primary-dark);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 10px rgba(255, 200, 0, 0.2);
  }

  .floating-checkout-btn:hover {
    background: white;
    transform: translateY(-2px);
  }

  .floating-checkout-reset-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.72rem;
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
    margin-left: auto;
    margin-right: 10px;
  }

  .floating-checkout-reset-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: white;
  }

  @media (max-width: 480px) {
    .floating-checkout-bar {
      padding: 10px 14px !important;
      width: calc(100% - 20px) !important;
    }
    .floating-checkout-reset-btn {
      padding: 5px 8px !important;
      font-size: 0.65rem !important;
      margin-right: 6px !important;
    }
    .floating-checkout-total {
      font-size: 0.95rem !important;
    }
    .floating-checkout-qty {
      font-size: 0.68rem !important;
    }
    .floating-checkout-savings {
      font-size: 0.65rem !important;
      padding: 1px 4px !important;
    }
  }

  @media (min-width: 769px) {
    .floating-checkout-bar.active {
      bottom: 25px !important;
    }
    .whatsapp-chat-button {
      display: none !important;
    }
  }

  /* Quick View Modal Redesign & Safe Ignition Video */
  .quickview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    text-align: left;
    margin-bottom: 24px;
  }

  @media (max-width: 600px) {
    .quickview-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }

  .quickview-media-col {
    height: 260px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--color-border);
  }

  .quickview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .quickview-mfr {
    font-size: 0.8rem;
    color: var(--color-primary-light);
    font-weight: 700;
    text-transform: uppercase;
  }

  .quickview-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: var(--color-primary-dark);
    margin: 4px 0 8px;
    line-height: 1.2;
  }

  .quickview-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }

  .quickview-code {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .quickview-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    line-height: 1.45;
  }

  .quickview-safety-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-top: 1px dashed var(--color-border);
    padding-top: 20px;
    text-align: left;
  }

  @media (max-width: 600px) {
    .quickview-safety-section {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }

  .safety-video-box {
    display: flex;
    flex-direction: column;
  }

  .safety-heading {
    font-size: 0.95rem;
    color: var(--color-primary-dark);
    font-weight: 700;
    margin-bottom: 10px;
  }

  .video-wrapper {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--color-border);
  }

  .video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .safety-rules-box {
    display: flex;
    flex-direction: column;
  }

  .safety-list {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding-left: 16px;
    margin: 0;
    line-height: 1.5;
  }

  .safety-list li {
    margin-bottom: 6px;
  }

  /* Home Layout without Vertical Category Sidebar */
  .home-main-layout {
    display: block;
    width: 100%;
  }

  .home-content-column {
    min-width: 0;
  }

  .vertical-category-sidebar {
    display: none !important;
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 100px;
    text-align: left;
  }

  .sidebar-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-dark);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 12px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .vertical-menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .vertical-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--color-text-dark);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition-fast);
  }

  .vertical-menu-item svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    transition: var(--transition-fast);
    flex-shrink: 0;
  }

  .vertical-menu-item:hover {
    background: var(--color-bg-light);
    color: var(--color-primary-light);
  }

  .vertical-menu-item:hover svg {
    color: var(--color-accent);
    transform: scale(1.05);
  }

  @media (max-width: 1024px) {
    .home-main-layout {
      display: block;
    }

    .vertical-category-sidebar {
      display: none;
    }
  }

  /* Wholesale Details Card Layout (Employee Card Style) */
  .wholesale-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .wholesale-category-block {
    margin-bottom: 24px;
    text-align: left;
  }

  .wholesale-category-title-header {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 8px;
  }

  .wholesale-category-title-header svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
  }

  .wholesale-card-wrapper {
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--transition-normal);
    text-align: left;
  }

  .wholesale-card-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(212, 163, 89, 0.4);
  }

  .wholesale-card-wrapper.selected-row {
    background: rgba(94, 0, 9, 0.02);
    border-color: var(--color-primary);
  }

  .wholesale-card-checkbox-col {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wholesale-card-checkbox-col input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
  }

  .wholesale-card-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .wholesale-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .wholesale-avatar-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(94, 0, 9, 0.1);
    cursor: pointer;
    flex-shrink: 0;
  }

  .wholesale-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wholesale-title-wrapper {
    flex: 1;
    min-width: 0;
  }

  .wholesale-title-link {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-dark);
    text-decoration: none;
    transition: var(--transition-fast);
  }

  .wholesale-title-link:hover {
    color: var(--color-primary-light);
  }

  .wholesale-code-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 3px;
    font-weight: 600;
  }

  .wholesale-status-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .wholesale-status-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .wholesale-status-pill.status-in-stock {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
  }

  .wholesale-status-pill.status-out-stock {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
  }

  .wholesale-time-rating {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .wholesale-divider {
    border: none;
    height: 1px;
    background: var(--color-border);
    margin: 12px 0;
  }

  .wholesale-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .wholesale-meta-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .wholesale-meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .wholesale-meta-value {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-text-dark);
  }

  .wholesale-actions-col {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .wholesale-qty-field {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    padding: 4px 10px;
    border-radius: 8px;
    height: 32px;
  }

  .wholesale-input-qty {
    width: 44px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text-dark);
    text-align: center;
  }

  .wholesale-input-qty::-webkit-outer-spin-button,
  .wholesale-input-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .wholesale-input-qty[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .wholesale-circle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.9rem;
    text-decoration: none;
  }

  .wholesale-circle-btn.action-orange {
    background: rgba(255, 152, 0, 0.08);
    color: #FF9800;
  }

  .wholesale-circle-btn.action-orange:hover {
    background: rgba(255, 152, 0, 0.15);
    transform: translateY(-1px);
  }

  .wholesale-circle-btn.action-green {
    background: rgba(76, 175, 80, 0.08);
    color: #4CAF50;
  }

  .wholesale-circle-btn.action-green:hover {
    background: rgba(76, 175, 80, 0.15);
    transform: translateY(-1px);
  }

  .wholesale-circle-btn.action-red {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
  }

  .wholesale-circle-btn.action-red:hover,
  .wholesale-circle-btn.action-red.active-wish {
    background: rgba(244, 67, 54, 0.15);
    color: #F44336;
    transform: translateY(-1px);
  }

  @media (max-width: 600px) {
    .wholesale-card-wrapper {
      padding: 12px;
      gap: 10px;
    }

    .wholesale-avatar-wrapper {
      width: 44px;
      height: 44px;
    }

    .wholesale-title-link {
      font-size: 0.95rem;
    }

    .wholesale-code-label {
      font-size: 0.7rem;
    }

    .wholesale-status-pill {
      font-size: 0.65rem;
      padding: 2px 6px;
    }

    .wholesale-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .wholesale-meta-col {
      display: flex;
      align-items: center;
      border-bottom: none;
      padding-bottom: 0;
    }

    .wholesale-actions-col {
      justify-content: flex-end;
      margin-top: 0;
    }
  }

  /* Mobile Category Dropdown Selector */
  .mobile-category-dropdown-wrapper {
    display: none;
  }

  @media (max-width: 1024px) {
    .mobile-category-dropdown-wrapper {
      display: block;
      width: 100%;
      margin: 10px 0 2px 0;
    }

    .mobile-category-select {
      display: none;
    }
  }

  /* Global styles for new mobile features (hidden by default on desktop) */
  .mobile-hamburger-btn,
  .mobile-search-toggle-btn {
    display: none;
  }

  @media (max-width: 768px) {
    .mobile-hamburger-btn {
      display: flex !important;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: #ffffff;
      font-size: 1.6rem;
      cursor: pointer;
      padding: 5px;
      margin-right: 8px;
    }

    .mobile-search-toggle-btn {
      display: flex !important;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: #ffffff;
      font-size: 1.3rem;
      cursor: pointer;
      padding: 5px;
      margin-right: 8px;
    }


  }

  /* Mobile Drawer Menu styles */
  .mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background: var(--color-bg-card);
    z-index: 9999;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
  }
  .mobile-menu-drawer.drawer-open {
    left: 0;
  }
  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
  }
  .close-menu-drawer-btn {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
  }
  .mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .drawer-section {
    margin-bottom: 25px;
  }
  .drawer-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  .drawer-location-selector {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: var(--color-bg-body);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
  }
  .drawer-nav-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .drawer-nav-item {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-dark);
    text-decoration: none;
    padding: 10px 15px;
    background: var(--color-bg-body);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: var(--transition-fast);
  }
  .drawer-nav-item:hover {
    border-color: var(--color-accent);
    background: rgba(188, 142, 60, 0.05);
  }
  .mobile-menu-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  .mobile-menu-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
  }

  /* Mobile Search Dropdown Bar styles */
  .mobile-search-dropdown-bar {
    display: none;
    width: 100%;
    background: rgba(60, 5, 8, 0.98);
    padding: 10px 15px;
    border-bottom: 2px solid var(--color-accent);
    transition: all 0.3s ease;
  }
  .mobile-search-dropdown-bar.search-dropdown-open {
    display: block !important;
  }

  /* Mobile Category Float Box styles */
  .category-float-box-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  .category-float-box-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .category-float-box {
    width: 100%;
    background: var(--color-bg-card);
    border-radius: 24px 24px 0 0;
    padding: 24px;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  }
  .category-float-box-overlay.active .category-float-box {
    transform: translateY(0);
  }
  .float-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 12px;
  }
  .close-float-box-btn {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
  }
  .float-box-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 10px;
  }
  .float-box-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 6px;
    background: var(--color-bg-body);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .float-box-cat-item:active {
    transform: scale(0.95);
    background: rgba(188, 142, 60, 0.05);
    border-color: var(--color-accent);
  }
  .float-box-cat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
    color: var(--color-accent);
  }
  .float-box-cat-icon svg {
    width: 24px;
    height: 24px;
  }
  .float-box-cat-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
  }

  /* Header WhatsApp Action Button Styles */
  #whatsapp-trigger-btn svg {
    color: #25D366; /* Stand-out WhatsApp Green */
    transition: transform var(--transition-fast);
  }
  #whatsapp-trigger-btn:hover svg {
    transform: scale(1.1);
  }
  @media (max-width: 768px) {
    #whatsapp-trigger-btn {
      display: none !important;
    }
  }

  /* View Toggle Buttons and Control Bar */
  .listing-controls-bar {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    align-items: stretch;
  }

  .listing-controls-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .catalog-search-input {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    width: 100%;
    outline: none;
    background: var(--color-bg-card);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast);
  }

  .catalog-search-input:focus {
    border-color: var(--color-accent);
  }

  .view-toggle-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto; /* Push view toggles to the far-right */
  }

  .view-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-dark);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .view-toggle-btn svg {
    color: var(--text-dark);
    transition: color var(--transition-fast);
  }

  .view-toggle-btn:hover {
    border-color: var(--color-accent);
  }

  .view-toggle-btn:hover svg {
    color: var(--color-accent);
  }

  .view-toggle-btn.active {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
  }

  .view-toggle-btn.active svg {
    color: var(--color-primary-dark) !important;
  }

  .results-count {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
    text-align: left;
  }

  @media (max-width: 768px) {
    .listing-controls-bar {
      padding: 12px 10px !important;
      gap: 10px !important;
    }
    .catalog-search-input {
      padding: 8px 10px !important;
      font-size: 0.8rem !important;
    }
    .view-toggle-buttons {
      gap: 6px !important;
    }
    .view-toggle-btn {
      width: 34px !important;
      height: 34px !important;
    }
    .results-count {
      font-size: 0.75rem !important;
    }
  }

  /* Clean SVG Category Icon Sizing */
  .circle-icon svg,
  .wholesale-category-title-header svg {
    width: 24px;
    height: 24px;
  }
  .float-box-cat-icon svg {
    width: 24px;
    height: 24px;
  }
  .mega-menu-trigger svg,
  .vertical-menu-list svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
  }