/* ==========================================================================
   LocaMart - Premium Customer Homepage & Discovery Stylesheet
   Modern Indian Local Multi-Vendor Marketplace (Phase 1 & Phase 2)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design System & CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Brand Yellow & Warm Amber Palette */
  --primary-50: #fefce8;
  --primary-100: #fef9c3;
  --primary-200: #fef08a;
  --primary-300: #fde047;
  --primary-400: #facc15;
  --primary-500: #ffc700;
  --primary-600: #ffc700; /* Main BrapTo Yellow */
  --primary-700: #f59e0b; /* Golden Amber */
  --primary-800: #d97706;
  --primary-900: #b45309;
  --primary-950: #78350f;

  /* Accent Warm Palette */
  --accent-amber: #f59e0b;
  --accent-orange: #ea580c;
  --accent-gold: #fbbf24;
  --accent-light: #fffbeb;
  --accent-red: #ef4444;

  /* Neutral Surface & Grayscale */
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-alt: #fbfcfd;
  --bg-subtle: #f1f5f9;
  --bg-dark: #0f172a;
  --bg-hero: #fffbeb;

  /* Typography Colors */
  --text-dark: #0f172a;
  --text-heading: #1e293b;
  --text-body: #475569;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-white: #ffffff;

  /* Borders & Dividers */
  --border-light: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-focus: #ffc700;
  --border-green-light: #fde68a;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.09), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 12px 24px -4px rgba(255, 199, 0, 0.25), 0 6px 12px -4px rgba(0, 0, 0, 0.06);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 30px;
  --radius-pill: 9999px;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Layout Dimensions */
  --max-width: 1240px;
  --header-height: 76px;
  --nav-height: 48px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Global Reset & Base Styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-body);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

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

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

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* --------------------------------------------------------------------------
   3. Top Announcement Banner
   -------------------------------------------------------------------------- */
.top-bar {
  background-color: #f0fdf4;
  border-bottom: 1px solid #dcfce7;
  font-size: 0.8125rem;
  color: var(--text-heading);
  padding: 6px 0;
  position: relative;
  z-index: 50;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--primary-800);
}

.top-bar-left svg {
  color: var(--primary-600);
  flex-shrink: 0;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.top-bar-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-body);
  font-weight: 500;
}

.top-bar-link:hover {
  color: var(--primary-700);
}

.top-bar-link svg {
  width: 14px;
  height: 14px;
  color: var(--primary-600);
}

/* --------------------------------------------------------------------------
   4. Main Sticky Header
   -------------------------------------------------------------------------- */
.main-header {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-normal);
}

.main-header.scrolled {
  box-shadow: var(--shadow-md);
}

.mobile-app-topbar {
  display: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-height);
}

/* ==========================================================================
   Bespoke Typographic BrapTo Wordmark (Clean & Modern Startup Identity)
   ========================================================================== */
.brand-wordmark-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.brand-wordmark-logo:hover {
  transform: scale(1.02);
  opacity: 0.95;
}

.brapto-text {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -1.2px;
  color: #0b0f19; /* Deep luxury obsidian */
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}

.brapto-highlight {
  color: #16a34a; /* Vibrant electric forest emerald */
  font-weight: 900;
  letter-spacing: -1.2px;
}

.brapto-dot {
  color: #16a34a;
  font-size: 2.2rem;
  line-height: 0;
  font-weight: 900;
  margin-left: 1px;
}

/* Footer Wordmark Variant */
.footer-brapto-text {
  color: #ffffff !important;
  font-size: 1.85rem;
}

.footer-brapto-text .brapto-highlight,
.footer-brapto-text .brapto-dot {
  color: #4ade80 !important;
}

/* Location Selector */
.location-selector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  color: var(--text-heading);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.location-selector-btn:hover {
  background-color: var(--primary-50);
  border-color: var(--primary-300);
}

.location-pin-icon {
  color: var(--primary-600);
  width: 18px;
  height: 18px;
}

.location-text-group {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}

.location-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.location-value {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 0.875rem;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron-down-icon {
  color: var(--text-muted);
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

/* Search Bar */
.header-search-wrapper {
  flex: 1;
  max-width: 540px;
  position: relative;
}

.search-form {
  display: flex;
  align-items: center;
  background: var(--bg-main);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 4px 6px 4px 18px;
  transition: all var(--transition-fast);
}

.search-form:focus-within {
  border-color: var(--primary-600);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

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

.search-input::placeholder {
  color: var(--text-light);
  font-size: 0.84rem;
}

.search-submit-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--primary-600);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.search-submit-btn:hover {
  background-color: var(--primary-700);
}

/* Quick Search Suggestions Dropdown */
.search-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 12px;
  display: none;
  z-index: 120;
}

.search-suggestions-dropdown.active {
  display: block;
}

.suggestion-group-title {
  font-size: 0.725rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-left: 6px;
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.suggestion-chip {
  padding: 5px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--text-heading);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.suggestion-chip:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

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

/* Dynamic Login Button & User Profile Chip */
.mobile-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  color: var(--primary-700);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.mobile-auth-btn:hover {
  background: var(--primary-600);
  color: white;
  border-color: var(--primary-600);
}

.btn-desktop-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-50);
  border: 1.5px solid var(--primary-200);
  color: var(--primary-700);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.btn-desktop-login:hover {
  background: var(--primary-600);
  color: white;
  border-color: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

.user-logged-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1.5px solid var(--border-light);
  padding: 3px 10px 3px 4px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.user-logged-profile-chip:hover {
  border-color: var(--primary-400);
  background: var(--primary-50);
}

.user-dp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--primary-500);
}

.user-chip-name {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-dark);
}

.desktop-user-chip {
  padding: 4px 14px 4px 6px;
}

.desktop-user-chip .user-dp-avatar {
  width: 32px;
  height: 32px;
}

.desktop-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.user-chip-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* User Profile Menu & Dropdown */
.user-profile-menu-wrapper {
  position: relative;
  display: inline-flex;
}

.user-profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  padding: 8px;
  display: none;
  flex-direction: column;
  z-index: 500;
  animation: dropdownPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownPop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-profile-dropdown.show {
  display: flex;
}

.dropdown-user-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.dropdown-user-dp {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-500);
}

.dropdown-user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.dropdown-user-text strong {
  font-size: 0.85rem;
  color: var(--text-dark);
}

.dropdown-user-text span {
  font-size: 0.725rem;
  color: var(--text-muted);
}

.dropdown-menu-divider {
  height: 1px;
  background: var(--border-light);
  margin: 6px 0;
}

.dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--text-dark);
  font-size: 0.825rem;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all var(--transition-fast);
}

.dropdown-menu-item:hover {
  background: var(--primary-50);
  color: var(--primary-700);
}

.dropdown-menu-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.dropdown-menu-item:hover svg {
  color: var(--primary-700);
}

.dropdown-menu-item.logout-item {
  color: #ef4444;
}

.dropdown-menu-item.logout-item svg {
  color: #ef4444;
}

.dropdown-menu-item.logout-item:hover {
  background: #fef2f2;
  color: #dc2626;
}

.chip-chevron-icon {
  margin-left: 2px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.header-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-heading);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.header-action-btn:hover, .header-action-btn.active {
  color: var(--primary-600);
  background-color: var(--primary-50);
}

.header-action-btn svg {
  width: 20px;
  height: 20px;
  color: var(--text-body);
}

.header-action-btn:hover svg, .header-action-btn.active svg {
  color: var(--primary-600);
}

/* Cart Button */
.cart-header-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: var(--primary-50);
  color: var(--primary-700);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
}

.cart-header-btn:hover {
  background-color: var(--primary-600);
  color: white;
  border-color: var(--primary-600);
}

.cart-header-btn:hover svg {
  color: white;
}

.cart-icon-wrap {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background-color: var(--accent-orange);
  color: white;
  font-size: 0.6875rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

/* --------------------------------------------------------------------------
   5. Secondary Navigation Bar
   -------------------------------------------------------------------------- */
.secondary-nav {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  padding: 6px 0;
}

.secondary-nav-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.secondary-nav-inner::-webkit-scrollbar {
  display: none;
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-body);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.nav-pill:hover {
  color: var(--primary-700);
  background-color: var(--primary-50);
}

.nav-pill.active {
  background-color: var(--primary-700);
  color: white;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}

.nav-pill.active svg {
  color: white;
}

.nav-pill-badge {
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  margin-left: 2px;
}

/* SPA Views Transitions */
.spa-view-section {
  animation: fadeInView 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInView {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-micro-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--primary-700);
  background: var(--primary-50);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
}

/* Native App Screen Top Header */
.app-screen-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.app-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.app-back-btn:hover {
  background: var(--primary-50);
  color: var(--primary-700);
  border-color: var(--primary-300);
  transform: translateX(-2px);
}

.app-screen-title-col {
  display: flex;
  flex-direction: column;
}

.app-screen-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.15;
}

.app-screen-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Modern Android App Category Switcher Rail (Icon + Tag Name Below) */
.app-category-rail {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 0 12px 0;
  scrollbar-width: none;
}

.app-category-rail::-webkit-scrollbar {
  display: none;
}

.app-category-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.app-category-pill:active {
  transform: scale(0.92);
}

.cat-pill-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-fast);
}

.bg-all-pill { background: #f1f5f9; }
.bg-grocery-pill { background: #dcfce7; }
.bg-veggies-pill { background: #d1fae5; }
.bg-fruits-pill { background: #fee2e2; }
.bg-food-pill { background: #fed7aa; }

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

/* Active State */
.app-category-pill.active .cat-pill-icon-box {
  border-color: var(--primary-600);
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(22, 163, 74, 0.22);
}

.app-category-pill.active .cat-pill-text {
  color: var(--primary-700);
  font-weight: 800;
}

.category-cta-pill {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-700);
  background: var(--primary-50);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--primary-200);
  transition: all var(--transition-fast);
}

.category-card:hover .category-cta-pill {
  background: var(--primary-700);
  color: white;
  border-color: var(--primary-700);
}
/* --------------------------------------------------------------------------
   6. Hero Section (Decorative Zomato & Swiggy Style Full-Width Slider)
   -------------------------------------------------------------------------- */
.hero-section.full-width-hero {
  padding: 0 0 24px 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Ambient Glow Orbs */
.hero-ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.hero-ambient-glow.glow-1 {
  top: -60px;
  right: 15%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0) 70%);
}

.hero-ambient-glow.glow-2 {
  bottom: -40px;
  left: 5%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.15) 0%, rgba(234, 179, 8, 0) 70%);
}

.hero-pattern-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

.hero-slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hero-slides-track {
  display: flex;
  position: relative;
  width: 100%;
}

.hero-slide {
  min-width: 100%;
  flex: 0 0 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.active {
  display: block;
  opacity: 1;
}

.hero-banner-card {
  width: 100%;
  padding: 54px 0 58px 0;
  position: relative;
  overflow: hidden;
  min-height: 490px;
  display: flex;
  align-items: center;
}

.hero-banner-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  align-items: center;
  gap: 52px;
  position: relative;
  z-index: 2;
}

/* Slide Theme Background Gradients */
.hero-theme-green {
  background: linear-gradient(135deg, #ebf8ee 0%, #f4fbf6 45%, #ffffff 100%);
  border-bottom: 1px solid #d1fae5;
}

.hero-theme-emerald {
  background: linear-gradient(135deg, #ecfdf5 0%, #f2fcf7 45%, #ffffff 100%);
  border-bottom: 1px solid #a7f3d0;
}

.hero-theme-amber {
  background: linear-gradient(135deg, #fff7ed 0%, #fffbf5 45%, #ffffff 100%);
  border-bottom: 1px solid #fed7aa;
}

.hero-theme-yellow {
  background: linear-gradient(135deg, #fefce8 0%, #fefdf0 45%, #ffffff 100%);
  border-bottom: 1px solid #fde68a;
}

.hero-content {
  z-index: 2;
}

.hero-clean-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.badge-green {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.badge-emerald {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.badge-amber {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.badge-yellow {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 2.85rem;
  line-height: 1.15;
  font-weight: 900;
  color: var(--text-dark);
  letter-spacing: -0.8px;
  margin-bottom: 14px;
}

.hero-title span.accent-highlight {
  color: var(--primary-700);
  display: block;
}

.hero-theme-amber .hero-title span.accent-highlight {
  color: var(--accent-orange);
}

.hero-theme-yellow .hero-title span.accent-highlight {
  color: #b45309;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-body);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 520px;
  font-weight: 500;
}

.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 32px;
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.trust-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: white;
  border: 1px solid #c7ebcf;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-700);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.trust-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.trust-title {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-dark);
}

.trust-subtitle {
  font-size: 0.725rem;
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-primary-hero {
  padding: 14px 32px;
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: white;
  border-radius: var(--radius-pill);
  font-size: 0.98rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.35);
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-primary-hero:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.45);
}

.btn-secondary-hero {
  padding: 14px 28px;
  background-color: white;
  color: var(--text-heading);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 700;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}

.btn-secondary-hero:hover {
  background-color: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Hero Visual Showcase & Floating Swiggy/Zomato Cards
   -------------------------------------------------------------------------- */
.hero-visual-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hero-main-composition {
  width: 100%;
  max-width: 480px;
  position: relative;
}

.hero-img-frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  background: white;
}

.hero-img-showcase {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-smooth);
}

.hero-banner-card:hover .hero-img-showcase {
  transform: scale(1.04);
}

.hero-img-overlay-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
}

/* Floating Glassmorphism Cards */
.floating-hero-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  border-radius: 18px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  transition: transform 0.3s ease;
}

.float-card-top-left {
  top: -14px;
  left: -20px;
  animation: floatSlow 4s ease-in-out infinite alternate;
}

.float-card-bottom-right {
  bottom: -16px;
  right: -18px;
  animation: floatReverse 4.5s ease-in-out infinite alternate;
}

.float-card-top-right {
  top: 18px;
  right: -14px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.float-discount-pill {
  background: #0f172a;
  color: #4ade80;
  font-size: 0.725rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

@keyframes floatSlow {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

@keyframes floatReverse {
  0% { transform: translateY(0px); }
  100% { transform: translateY(8px); }
}

.float-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.green-circle {
  background: #dcfce7;
}

.yellow-circle {
  background: #fef3c7;
}

.float-card-text {
  display: flex;
  flex-direction: column;
}

.float-bold {
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-dark);
}

.float-small {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Hero Slider Navigation Arrows */
.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 20;
  transition: all var(--transition-fast);
  opacity: 0.7;
}

.hero-slider-wrapper:hover .hero-slider-arrow {
  opacity: 1;
}

.hero-prev-btn {
  left: 24px;
}

.hero-next-btn {
  right: 24px;
}

.hero-slider-arrow:hover {
  background: var(--primary-700);
  color: white;
  border-color: var(--primary-700);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
  opacity: 1;
}

/* Hero Slider Pagination Dots */
.hero-slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 20;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: #cbd5e1;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  cursor: pointer;
}

.hero-dot.active {
  width: 28px;
  background: var(--primary-700);
}

/* --------------------------------------------------------------------------
   7. Section Headers Standard
   -------------------------------------------------------------------------- */
.section-wrapper {
  padding: 30px 0;
}

.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
}

.section-title-group {
  max-width: 600px;
}

.section-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.section-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-700);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-50);
  border: 1px solid var(--primary-200);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.section-action-link:hover {
  background-color: var(--primary-700);
  color: white;
  border-color: var(--primary-700);
}

.carousel-nav-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-heading);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.arrow-btn:hover {
  background-color: var(--primary-600);
  color: white;
  border-color: var(--primary-600);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   8. Shop by Category (4 Main Cards - Full-Filled Edge-to-Edge Images)
   -------------------------------------------------------------------------- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.category-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-hover);
}

.category-img-box {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
  background: var(--bg-subtle);
  margin-bottom: 0;
}

.category-img-box img,
.category-img-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--transition-smooth);
}

.category-card:hover .category-img-box img,
.category-card:hover .category-img-full {
  transform: scale(1.08);
}

.category-overlay-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  color: #4ade80;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  z-index: 2;
}

.category-card-content {
  padding: 16px 16px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex: 1;
}

.category-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.category-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-bottom: 8px;
}

.category-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--primary-700);
  background: var(--primary-50);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   9. Selected Products / Fresh Today Carousel
   -------------------------------------------------------------------------- */
.products-carousel-container {
  position: relative;
}

.products-carousel-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px 4px 18px 4px;
  scrollbar-width: none;
}

.products-carousel-track::-webkit-scrollbar {
  display: none;
}

.product-card {
  min-width: 190px;
  max-width: 190px;
  flex: 0 0 190px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-normal);
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

.product-badge-discount {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}

.product-img-box {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 10px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #f8fafc;
}

.product-img-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
  transition: transform var(--transition-smooth);
}

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

.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.3em;
}

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

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
  margin-bottom: 10px;
}

.current-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
}

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

.btn-add-product {
  width: 100%;
  padding: 7px 0;
  background-color: var(--bg-card);
  color: var(--primary-700);
  border: 1.5px solid var(--primary-400);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-add-product:hover {
  background-color: var(--primary-600);
  color: white;
  border-color: var(--primary-600);
}

/* Quantity Stepper State */
.qty-stepper {
  display: none;
  align-items: center;
  justify-content: space-between;
  background-color: var(--primary-700);
  color: white;
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  font-weight: 700;
  font-size: 0.8125rem;
}

.qty-stepper.active {
  display: flex;
}

.qty-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
}

.qty-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   10. Top Local Shops Near You & Discovery Cards
   -------------------------------------------------------------------------- */
.shops-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.shop-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  text-decoration: none;
  color: inherit;
}

.shop-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-hover);
}

.shop-card-media {
  position: relative;
  height: 135px;
  background: var(--bg-subtle);
  overflow: hidden;
}

.shop-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.shop-card:hover .shop-banner-img {
  transform: scale(1.06);
}

.shop-status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #4ade80;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 4px;
}

.shop-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
}

.shop-offer-chip {
  position: absolute;
  bottom: 8px;
  left: 10px;
  background: rgba(234, 88, 12, 0.92);
  backdrop-filter: blur(4px);
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.3px;
}

.shop-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.shop-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}

.shop-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
}

.shop-category-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 10px;
}

.shop-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-body);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.shop-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  color: var(--accent-orange);
  background: #fff7ed;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.shop-rating-count {
  color: var(--text-muted);
  font-weight: 400;
}

.shop-distance, .shop-eta {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}

.shop-card-about-snippet {
  font-size: 0.775rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 10px;
}

.shop-footer-row {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.shop-delivery-pill {
  font-weight: 600;
  color: var(--primary-700);
}

.btn-view-shop-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background-color: var(--primary-50);
  color: var(--primary-700);
  font-weight: 700;
  font-size: 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--primary-200);
  transition: all var(--transition-fast);
}

.btn-view-shop-cta:hover {
  background-color: var(--primary-700);
  color: white;
  border-color: var(--primary-700);
}

/* --------------------------------------------------------------------------
   11. Phase 2: Locality Banner Strip & Discovery Controls
   -------------------------------------------------------------------------- */
.locality-banner-strip {
  background: #ecfdf5;
  border-bottom: 1px solid #d1fae5;
  padding: 8px 0;
}

.locality-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--primary-900);
}

.locality-strip-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.locality-strip-left svg {
  color: var(--primary-600);
  width: 16px;
  height: 16px;
}

.locality-change-btn {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-700);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}

.locality-change-btn:hover {
  color: var(--primary-800);
}

.page-main-container {
  padding: 24px 0 48px 0;
}

.page-heading-block {
  margin-bottom: 20px;
}

.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.breadcrumb-trail a:hover {
  color: var(--primary-700);
}

.active-crumb {
  color: var(--text-dark);
  font-weight: 600;
}

.heading-flex-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.discovery-main-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.discovery-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 4px;
  max-width: 650px;
}

.results-badge {
  padding: 4px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-body);
  white-space: nowrap;
}

/* Category Tabs Bar */
.category-tabs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 16px 0;
  scrollbar-width: none;
}

.category-tab-btn {
  padding: 8px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-body);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.category-tab-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.category-tab-btn.active {
  background: var(--primary-700);
  color: white;
  border-color: var(--primary-700);
  box-shadow: var(--shadow-sm);
}

/* Discovery Filter Toolbar */
.discovery-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  padding: 12px 18px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  gap: 14px;
  flex-wrap: wrap;
}

.filter-controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-pill-btn {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  color: var(--text-body);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.filter-pill-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.filter-pill-btn.active {
  background: var(--primary-100);
  border-color: var(--primary-400);
  color: var(--primary-900);
  font-weight: 700;
}

.clear-filters-btn {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ef4444;
  padding: 4px 8px;
}

.sort-control-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.sort-select {
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-dark);
  background: white;
  cursor: pointer;
}

.sort-select:focus {
  border-color: var(--primary-600);
}

/* Empty States */
.empty-state-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 60px 24px;
  text-align: center;
  max-width: 540px;
  margin: 30px auto;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.empty-state-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   12. Phase 2: Shop & Restaurant Storefront
   -------------------------------------------------------------------------- */
.storefront-hero-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.storefront-cover-banner {
  position: relative;
  height: 200px;
  background: #1e293b;
  overflow: hidden;
}

.storefront-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.storefront-cover-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.storefront-status-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(6px);
  color: #4ade80;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.storefront-info-panel {
  padding: 0 28px 24px 28px;
  display: flex;
  gap: 20px;
  position: relative;
}

.storefront-logo-avatar {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  background: white;
  border: 3px solid white;
  box-shadow: var(--shadow-md);
  margin-top: -44px;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 10;
}

.storefront-logo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storefront-details-col {
  flex: 1;
  padding-top: 12px;
}

.storefront-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.storefront-name {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-dark);
}

.storefront-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.storefront-category-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.storefront-stats-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.storefront-stat-item {
  display: flex;
  flex-direction: column;
}

.stat-bold-val {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-dark);
}

.stat-subtext {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.storefront-stat-divider {
  width: 1px;
  height: 24px;
  background: var(--border-light);
}

.storefront-offer-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  margin-bottom: 10px;
}

.storefront-about-text {
  font-size: 0.8125rem;
  color: var(--text-body);
  line-height: 1.5;
}

/* In-Store Sticky Aisle Nav */
.store-aisle-nav-sticky {
  position: sticky;
  top: var(--header-height);
  background: white;
  border-bottom: 1px solid var(--border-light);
  padding: 10px 0;
  z-index: 80;
  box-shadow: var(--shadow-xs);
  margin-bottom: 24px;
}

.store-aisles-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.store-aisles-scroll::-webkit-scrollbar {
  display: none;
}

.aisle-tab-btn {
  padding: 6px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-body);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.aisle-tab-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.aisle-tab-btn.active {
  background: var(--primary-700);
  color: white;
  border-color: var(--primary-700);
}

/* Grocery Storefront Product Grid */
.grocery-storefront-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Restaurant Menu Layout */
.restaurant-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.restaurant-menu-item-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-normal);
}

.restaurant-menu-item-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

.restaurant-item-left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Veg / Non-Veg Indicator Icon */
.food-type-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.food-veg {
  border: 1.5px solid #16a34a;
}

.food-veg .food-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
}

.food-non-veg {
  border: 1.5px solid #dc2626;
}

.food-non-veg .food-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
}

.restaurant-item-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 4px;
}

.restaurant-item-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.restaurant-item-desc {
  font-size: 0.775rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: auto;
}

.restaurant-item-right {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 8px;
}

.restaurant-item-img-box {
  width: 100px;
  height: 85px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-subtle);
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}

.restaurant-item-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.btn-add-restaurant-item {
  width: 88px;
  padding: 5px 12px;
  font-size: 0.8125rem;
  font-weight: 800;
  justify-content: center;
}

.restaurant-item-right .qty-stepper {
  width: 88px;
  justify-content: space-between;
}

/* In-Store Floating Cart Bar */
.storefront-cart-floating-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0f172a;
  color: white;
  padding: 14px 0;
  z-index: 950;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.storefront-cart-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cart-bar-details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.cart-bar-items-count strong {
  color: #4ade80;
}

.cart-bar-separator {
  opacity: 0.4;
}

.cart-bar-store-name {
  color: #94a3b8;
}

.btn-proceed-store-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background-color: var(--primary-600);
  color: white;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 700;
  transition: background var(--transition-fast);
}

.btn-proceed-store-cart:hover {
  background-color: var(--primary-700);
}

/* --------------------------------------------------------------------------
   13. Phase 2: Authentication Page Styles
   -------------------------------------------------------------------------- */
.auth-card-container {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.auth-card-header {
  padding: 32px 32px 18px 32px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}

.auth-main-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.auth-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.auth-card-nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-subtle);
}

.auth-nav-tab {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.auth-nav-tab.active {
  background: white;
  color: var(--primary-700);
  border-bottom-color: var(--primary-700);
}

.auth-card-body {
  padding: 28px 32px 36px 32px;
}

.country-code-pill {
  padding: 11px 14px;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-dark);
}

.custom-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-body);
  cursor: pointer;
  margin-bottom: 18px;
}

.btn-auth-submit-main {
  width: 100%;
  padding: 13px;
  background-color: var(--primary-700);
  color: white;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
  transition: all var(--transition-fast);
}

.btn-auth-submit-main:hover {
  background-color: var(--primary-800);
  transform: translateY(-1px);
}

.auth-divider {
  position: relative;
  text-align: center;
  margin: 22px 0;
}

.auth-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border-light);
}

.auth-divider span {
  position: relative;
  background: white;
  padding: 0 12px;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--text-light);
  letter-spacing: 0.5px;
}

.btn-otp-secondary {
  width: 100%;
  padding: 12px;
  background-color: white;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.btn-otp-secondary:hover {
  background-color: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

/* --------------------------------------------------------------------------
   14. Phase 2: Customer Account & Orders Layout
   -------------------------------------------------------------------------- */
.account-page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: flex-start;
}

.account-sidebar {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}

.account-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
}

.user-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-300);
}

.user-info-text {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
}

.user-email, .user-phone {
  font-size: 0.725rem;
  color: var(--text-muted);
}

.account-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-heading);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.account-nav-item:hover {
  background: var(--primary-50);
  color: var(--primary-700);
}

.account-nav-item.active {
  background: var(--primary-700);
  color: white;
  font-weight: 700;
}

.account-nav-item.active svg {
  color: white;
}

.nav-count-badge {
  margin-left: auto;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.account-nav-item.active .nav-count-badge {
  background: white;
  color: var(--primary-800);
}

.account-main-content {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-xs);
  min-height: 480px;
}

.account-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.account-tab-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-dark);
}

.account-tab-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Order Status Tabs */
.order-status-tabs-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 16px;
  scrollbar-width: none;
}

.order-status-pill {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  color: var(--text-body);
  white-space: nowrap;
}

.order-status-pill:hover {
  background: var(--primary-50);
  color: var(--primary-700);
}

.order-status-pill.active {
  background: var(--primary-700);
  color: white;
  border-color: var(--primary-700);
}

/* Orders List & Card */
.orders-list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-card-box {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--bg-card);
  transition: box-shadow var(--transition-fast);
}

.order-card-box:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-200);
}

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

.order-shop-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-shop-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border-light);
}

.order-shop-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
}

.order-id-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.order-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.status-active {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.status-delivered {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.status-cancelled {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.order-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.order-item-row {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--text-heading);
}

.order-item-qty {
  width: 28px;
  font-weight: 700;
  color: var(--primary-700);
}

.order-item-name {
  flex: 1;
}

.order-item-price {
  font-weight: 700;
  color: var(--text-dark);
}

.order-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed var(--border-light);
}

.order-total-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.order-total-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.order-total-amount {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
}

.order-actions-group {
  display: flex;
  gap: 8px;
}

.btn-order-secondary {
  padding: 6px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-heading);
  cursor: pointer;
}

.btn-order-secondary:hover {
  background: var(--border-light);
}

.btn-order-primary {
  padding: 6px 16px;
  background: var(--primary-700);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
}

.btn-order-primary:hover {
  background: var(--primary-800);
}

/* Profile Form Grid */
.form-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Addresses */
.address-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.address-box-card {
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--bg-card);
}

.address-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.address-type-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primary-800);
  background: var(--primary-50);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.default-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}

.address-receiver {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
}

.address-text {
  font-size: 0.8125rem;
  color: var(--text-body);
  margin: 4px 0 6px 0;
  line-height: 1.4;
}

.address-phone {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}

.address-actions-row {
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
}

.btn-text-action {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary-700);
  cursor: pointer;
}

/* Payment Methods */
.payment-methods-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.payment-icon-pill {
  font-size: 1.5rem;
}

.payment-info-col {
  flex: 1;
}

.payment-card-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-dark);
}

.payment-card-detail {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Coupons Grid */
.coupons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.coupon-box-card {
  border: 1.5px dashed var(--primary-400);
  background: var(--primary-50);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.coupon-discount-badge {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 6px;
}

.coupon-code-pill {
  display: inline-block;
  background: white;
  border: 1px solid var(--primary-300);
  color: var(--primary-800);
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.coupon-desc {
  font-size: 0.8rem;
  color: var(--primary-950);
  line-height: 1.4;
  margin-bottom: 12px;
}

.coupon-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--primary-200);
  padding-top: 8px;
}

.btn-copy-code {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primary-700);
  background: white;
  border: 1px solid var(--primary-300);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.btn-copy-code:hover {
  background: var(--primary-700);
  color: white;
}

/* Notifications */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-item-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.notif-icon-box {
  font-size: 1.3rem;
}

.notif-content-col {
  flex: 1;
}

.notif-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.notif-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-dark);
}

.notif-time {
  font-size: 0.725rem;
  color: var(--text-muted);
}

.notif-desc {
  font-size: 0.8rem;
  color: var(--text-body);
}

/* Settings */
.settings-group-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.setting-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
}

.setting-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   15. Promotional Deals Banners (3 Cards)
   -------------------------------------------------------------------------- */
.deals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.deal-card {
  border-radius: var(--radius-xl);
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  min-height: 145px;
}

.deal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.deal-card-1 {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
  border: 1px solid #fde68a;
}

.deal-card-2 {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
}

.deal-card-3 {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
  border: 1px solid #fdba74;
}

.deal-content {
  max-width: 62%;
  z-index: 2;
}

.deal-highlight {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 4px;
}

.deal-subtext {
  font-size: 0.8125rem;
  color: var(--text-body);
  margin-bottom: 12px;
}

.deal-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-dark);
}

.deal-card-1 .deal-link-btn { color: #92400e; }
.deal-card-2 .deal-link-btn { color: #065f46; }
.deal-card-3 .deal-link-btn { color: #9a3412; }

.deal-media-box {
  width: 135px;
  height: 105px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  background: white;
}

.deal-media-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-smooth);
}

.deal-card:hover .deal-media-box img {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   16. Shop By Curated Collections
   -------------------------------------------------------------------------- */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.collection-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.collection-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-300);
  background-color: var(--primary-50);
}

.collection-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 1.4rem;
}

.collection-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   17. Farm to Door / 4-Step Process Storytelling
   -------------------------------------------------------------------------- */
.process-section {
  background-color: var(--bg-card);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 44px 0;
}

.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

.process-step-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.process-step-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--primary-50);
  border: 2px solid var(--primary-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-700);
  margin: 0 auto 12px auto;
  transition: transform var(--transition-fast);
}

.process-step-card:hover .process-step-icon {
  transform: scale(1.08);
  background-color: var(--primary-100);
}

.process-step-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
  text-align: center;
}

.process-step-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 200px;
  line-height: 1.4;
  text-align: center;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   18. Why Shop With Us? (Benefits Bar)
   -------------------------------------------------------------------------- */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.benefit-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-xs);
}

.benefit-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--primary-50);
  color: var(--primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-dark);
}

.benefit-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   19. Social Proof & Engagement Row (3 Cards)
   -------------------------------------------------------------------------- */
.engagement-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.15fr;
  gap: 20px;
  margin-top: 10px;
}

.engagement-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  position: relative;
}

.testimonials-slider {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.testimonial-quote-icon {
  color: var(--primary-400);
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
}

.testimonial-text {
  font-size: 0.875rem;
  color: var(--text-heading);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 16px;
  flex: 1;
}

.testimonial-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-200);
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-dark);
}

.author-locality {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.testimonial-dots {
  display: flex;
  gap: 5px;
  margin-top: 14px;
  justify-content: center;
}

.t-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-light);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.t-dot.active {
  width: 18px;
  border-radius: var(--radius-pill);
  background: var(--primary-600);
}

/* App Download Card */
.app-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 12px;
}

.app-card-content {
  flex: 1;
}

.app-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.app-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.app-download-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.725rem;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  transition: opacity var(--transition-fast);
}

.store-badge-btn:hover {
  opacity: 0.85;
}

.app-phone-mockup {
  width: 110px;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
}

/* Newsletter Card */
.newsletter-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.newsletter-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

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

.newsletter-input {
  flex: 1;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.8125rem;
}

.newsletter-input:focus {
  border-color: var(--primary-600);
}

.btn-newsletter-submit {
  background-color: var(--primary-700);
  color: white;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: background-color var(--transition-fast);
}

.btn-newsletter-submit:hover {
  background-color: var(--primary-800);
}

.newsletter-note {
  font-size: 0.725rem;
  color: var(--text-light);
}

/* --------------------------------------------------------------------------
   20. Why Choose BrapTo (Feature Cards Grid)
   -------------------------------------------------------------------------- */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.benefit-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 18px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: var(--primary-300);
}

.benefit-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bg-benefit-green {
  background: #ecfdf5;
}

.bg-benefit-emerald {
  background: #d1fae5;
}

.bg-benefit-amber {
  background: #fef3c7;
}

.bg-benefit-indigo {
  background: #e0e7ff;
}

.benefit-content {
  display: flex;
  flex-direction: column;
}

.benefit-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.benefit-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 1024px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .benefit-card {
    padding: 14px 12px;
    flex-direction: column;
    gap: 8px;
  }

  .benefit-title {
    font-size: 0.84rem;
  }

  .benefit-sub {
    font-size: 0.68rem;
    line-height: 1.25;
  }
}

/* --------------------------------------------------------------------------
   20B. Premium Trust & Guarantees Strip (Card Deck Layout)
   -------------------------------------------------------------------------- */
.trust-guarantees-section {
  padding: 24px 0 28px 0;
  background: #f8fafc;
}

.trust-guarantees-wrapper {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.trust-guarantees-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.trust-feature-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.trust-feature-card:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.trust-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.trust-icon-shield {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #15803d;
  border: 1px solid #86efac;
}

.trust-icon-tag {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #b45309;
  border: 1px solid #fcd34d;
}

.trust-icon-truck {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  color: #0369a1;
  border: 1px solid #7dd3fc;
}

.trust-icon-support {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  color: #7e22ce;
  border: 1px solid #d8b4fe;
}

.trust-feature-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trust-feature-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trust-feature-desc {
  font-size: 0.725rem;
  color: #64748b;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 992px) {
  .trust-guarantees-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .trust-guarantees-section {
    padding: 14px 0 18px 0;
  }

  .trust-guarantees-wrapper {
    padding: 12px;
    border-radius: 18px;
  }

  .trust-guarantees-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .trust-feature-card {
    padding: 8px 10px;
    gap: 8px;
    border-radius: 12px;
  }

  .trust-icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .trust-icon-badge svg {
    width: 17px;
    height: 17px;
  }

  .trust-feature-title {
    font-size: 0.75rem;
  }

  .trust-feature-desc {
    font-size: 0.625rem;
  }
}

/* --------------------------------------------------------------------------
   21. Final Closing CTA
   -------------------------------------------------------------------------- */
.final-cta-section {
  padding: 44px 0 54px 0;
}

.final-cta-box {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  border-radius: var(--radius-2xl);
  padding: 44px 36px;
  text-align: center;
  color: white;
  box-shadow: 0 10px 25px rgba(22, 101, 52, 0.25);
  position: relative;
  overflow: hidden;
}

.final-cta-title {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

.final-cta-subtitle {
  font-size: 1rem;
  color: #dcfce7;
  max-width: 560px;
  margin: 0 auto 24px auto;
}

.btn-final-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background-color: white;
  color: var(--primary-900);
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all var(--transition-normal);
}

.btn-final-cta:hover {
  background-color: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   22. Premium Footer
   -------------------------------------------------------------------------- */
.main-footer {
  background-color: #0b1329;
  color: #94a3b8;
  padding: 60px 0 28px 0;
  border-top: 1px solid #1e293b;
  font-size: 0.875rem;
  margin-bottom: 0 !important;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 44px;
}

.footer-brand-col .brand-name {
  color: white;
  margin-bottom: 10px;
}

.footer-brand-col .brand-name span {
  color: var(--primary-400);
}

.footer-brand-desc {
  font-size: 0.8125rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 320px;
}

.footer-social-row {
  display: flex;
  gap: 10px;
}

.footer-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e293b;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.footer-social-link:hover {
  background: var(--primary-600);
  color: white;
  transform: translateY(-2px);
}

.footer-col-title {
  color: white;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.footer-link-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link-list a {
  color: #94a3b8;
  font-size: 0.8125rem;
  transition: color var(--transition-fast);
}

.footer-link-list a:hover {
  color: var(--primary-400);
  padding-left: 2px;
}

.footer-bottom-bar {
  border-top: 1px solid #1e293b;
  padding-top: 24px;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #64748b;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copyright-col {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.footer-powered-by {
  color: #94a3b8;
}

.powered-by-link {
  color: #4ade80 !important;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration var(--transition-fast);
}

.powered-by-link:hover {
  color: #86efac !important;
  text-decoration: underline !important;
}

.payment-methods-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-badge {
  background: #1e293b;
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #334155;
}

/* Default: Hide Mobile-Only Elements on Desktop */
.mobile-bottom-appbar,
.mobile-floating-cart-pill,
.mobile-app-categories-rail {
  display: none !important;
}

/* --------------------------------------------------------------------------
   22B. Customer Account & Order History Hub
   -------------------------------------------------------------------------- */
/* Clean Minimal Profile Header (Simple White BG) */
.profile-compact-header {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}

.profile-user-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar-thumb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-500);
}

.profile-user-meta {
  display: flex;
  flex-direction: column;
}

.profile-display-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 1px;
}

.profile-display-phone {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 600;
}

.btn-edit-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-edit-profile-pill:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.account-hero-contact {
  font-size: 0.8125rem;
  color: #d1fae5;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.contact-divider {
  opacity: 0.6;
}

.account-hero-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-stat-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-stat-chip .stat-icon {
  font-size: 1.2rem;
}

.hero-stat-chip .stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hero-stat-chip strong {
  font-size: 0.85rem;
  color: white;
}

.hero-stat-chip span {
  font-size: 0.6875rem;
  color: #a7f3d0;
}

/* Account Tabs Navigation Bar */
.account-tabs-nav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 22px;
  scrollbar-width: none;
}

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

.account-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-light);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.account-tab-link:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.account-tab-link.active {
  background: #0f172a;
  border-color: #0f172a;
  color: white;
}

.tab-badge {
  background: #22c55e;
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}

/* Order Filter Pills */
.order-filter-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 18px;
  scrollbar-width: none;
}

.order-filter-pill {
  padding: 6px 14px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.order-filter-pill:hover, .order-filter-pill.active {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

/* Modern Orders Grid & Cards */
.modern-orders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.modern-order-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--transition-fast);
}

.modern-order-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-200);
}

.order-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-store-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-store-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border-light);
}

.order-store-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
}

.order-ref-date {
  font-size: 0.725rem;
  color: var(--text-muted);
  display: block;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.725rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.status-active {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.status-delivered {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.status-cancelled {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.order-items-preview {
  background: #f8fafc;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.order-item-snippet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
}

.item-qty-badge {
  font-weight: 800;
  color: var(--primary-700);
  margin-right: 6px;
}

.item-name-text {
  flex: 1;
  color: var(--text-body);
}

.item-price-text {
  font-weight: 700;
  color: var(--text-dark);
}

.order-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 10px;
}

.order-grand-total {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.total-caption {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.total-value {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
}

.order-action-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-track-order-action {
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-reorder-action {
  background: white;
  border: 1.5px solid var(--border-light);
  color: var(--text-dark);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.btn-reorder-action:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

/* Account Card Panel (Profile, Addresses, Payments) */
.account-card-panel {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: 28px;
  box-shadow: var(--shadow-xs);
}

.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}

.panel-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark);
}

.panel-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.form-grid-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

/* Addresses Grid */
.addresses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.address-item-card {
  background: #f8fafc;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.address-item-card.active-default {
  background: #f0fdf4;
  border-color: #86efac;
}

.addr-tag-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--text-dark);
}

.default-chip {
  background: #22c55e;
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.address-full-text {
  font-size: 0.8125rem;
  color: var(--text-body);
  line-height: 1.5;
}

.address-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.addr-action-link {
  background: none;
  border: none;
  color: var(--primary-700);
  font-weight: 700;
  cursor: pointer;
}

.action-pipe {
  color: #cbd5e1;
}

/* Payment & Offers Stack */
.payment-methods-stack,
.offers-grid-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}

.payment-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.coupon-deal-box {
  background: #f8fafc;
  border: 1.5px dashed var(--primary-300);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.coupon-code-pill {
  background: #dcfce7;
  color: #15803d;
  font-weight: 900;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid #bbf7d0;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .modern-orders-grid {
    grid-template-columns: 1fr !important;
  }

  .addresses-grid {
    grid-template-columns: 1fr !important;
  }

  .form-grid-row {
    grid-template-columns: 1fr !important;
  }

  .account-hero-banner {
    padding: 20px 16px;
  }

  .account-hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  .account-hero-name-row {
    justify-content: center;
  }

  .account-hero-contact {
    justify-content: center;
  }

  .account-hero-stats {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   23. Modals (Location Selector & Sign In)
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

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

.modal-card {
  background: white;
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform var(--transition-smooth);
}

.modal-overlay.active .modal-card {
  transform: scale(1) translateY(0);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-body);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.modal-close-btn:hover {
  background: var(--border-light);
  color: var(--text-dark);
}

.modal-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.modal-search-input-box {
  position: relative;
  margin-bottom: 16px;
}

.modal-search-input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
}

.modal-search-input:focus {
  border-color: var(--primary-600);
}

.modal-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.btn-gps-detect {
  width: 100%;
  padding: 12px;
  background-color: var(--primary-50);
  border: 1px dashed var(--primary-400);
  border-radius: var(--radius-lg);
  color: var(--primary-800);
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  transition: background var(--transition-fast);
}

.btn-gps-detect:hover {
  background-color: var(--primary-100);
}

.popular-locations-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.locality-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.locality-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.locality-item:hover, .locality-item.selected {
  background-color: var(--primary-50);
  border-color: var(--primary-300);
}

.locality-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
}

.locality-city {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   23. Quick-Commerce Redesigned Auth Modal (Yellow, Black & Dark Green Theme)
   -------------------------------------------------------------------------- */
.auth-modal-card {
  max-width: 440px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 30px rgba(250, 204, 21, 0.22);
  border: 2px solid #facc15;
  background: #ffffff;
}

.auth-modal-hero-header {
  position: relative;
  background: linear-gradient(135deg, #facc15 0%, #eab308 60%, #ca8a04 100%);
  padding: 26px 20px 20px 20px;
  text-align: center;
  color: #0f172a;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.3);
}

.auth-hero-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.15);
  color: #0f172a;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  transition: all var(--transition-fast);
}

.auth-hero-close-btn:hover {
  background: #0f172a;
  color: #facc15;
  transform: rotate(90deg);
}

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #fde047;
  font-size: 0.725rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.auth-hero-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 6px auto;
  padding: 0 10px;
}

.auth-popup-logo-img {
  width: 100%;
  max-width: 290px;
  height: auto;
  max-height: 85px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

.auth-hero-tagline {
  font-size: 0.78rem;
  color: #0f172a;
  margin: 4px 0 0 0;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.auth-modal-body {
  padding: 20px 22px 22px 22px;
  background: #ffffff;
}

/* Modern Segmented Controller (Yellow & Black) */
.auth-segmented-tabs {
  display: flex;
  background: #fef9c3;
  border: 1.5px solid #fde047;
  border-radius: var(--radius-pill);
  padding: 3px;
  margin-bottom: 16px;
  gap: 4px;
}

.auth-seg-tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.auth-seg-tab.active {
  background: #0f172a;
  color: #facc15;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Form Groups & Controls */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 5px;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.form-forgot-link {
  font-size: 0.75rem;
  font-weight: 700;
  color: #166534;
  text-decoration: none;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  border-color: #ca8a04;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25);
  outline: none;
}

/* Phone Input Group */
.phone-input-group {
  display: flex;
  align-items: center;
  background: white;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.phone-input-group:focus-within {
  border-color: #ca8a04;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25);
}

.phone-country-tag {
  background: #fef9c3;
  border-right: 1.5px solid #fde047;
  padding: 10px 12px;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

.phone-input-field {
  border: none !important;
  box-shadow: none !important;
  font-size: 0.95rem !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 10px 12px;
}

.form-hint-text {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Password Input with Show/Hide */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field {
  padding-right: 42px;
}

.btn-toggle-pwd {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: #64748b;
  opacity: 0.7;
}

.btn-toggle-pwd:hover {
  opacity: 1;
}

/* Hero CTA Button (Yellow, Black & Dark Green Accent) */
.btn-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
  color: #0f172a;
  font-weight: 900;
  font-size: 0.95rem;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1.5px solid #ca8a04;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.45);
  margin-top: 12px;
  transition: all var(--transition-fast);
}

.btn-hero-cta svg {
  stroke: #166534;
}

.btn-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35);
  background: #0f172a;
  color: #facc15;
  border-color: #0f172a;
}

.btn-hero-cta:hover svg {
  stroke: #facc15;
}

.btn-hero-cta:active {
  transform: scale(0.98);
}

.auth-footer-switcher {
  text-align: center;
  margin-top: 14px;
  font-size: 0.825rem;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-footer-switcher .btn-text-action {
  font-weight: 800;
  color: #166534;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.auth-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

/* Vertical Icon-on-Top + Label-Below Switcher Rail */
.app-category-rail {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 8px 2px;
  scrollbar-width: none;
}

.app-category-rail::-webkit-scrollbar {
  display: none;
}

.app-category-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0;
}

.cat-pill-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid transparent;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
  position: relative;
}

.app-category-pill:hover .cat-pill-icon-box {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.app-category-pill.active .cat-pill-icon-box {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.cat-pill-text {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dark);
  transition: color var(--transition-fast);
}

.app-category-pill.active .cat-pill-text {
  color: #16a34a;
  font-weight: 800;
}

.cat-badge-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #16a34a;
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

/* --------------------------------------------------------------------------
   23B. Slide-Over Cart Basket Drawer (Zepto / Blinkit Style)
   -------------------------------------------------------------------------- */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(5px);
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.cart-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.cart-drawer-card {
  width: 440px;
  max-width: 100%;
  height: 100%;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
}

.cart-drawer-overlay.active .cart-drawer-card {
  transform: translateX(0);
}

.cart-drawer-header {
  background: white;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}

.cart-drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark);
}

.cart-drawer-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-700);
  background: var(--primary-50);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.cart-origin-text {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}

.cart-drawer-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  cursor: pointer;
  font-size: 0.9rem;
}

.cart-eta-banner {
  background: #ecfdf5;
  border-bottom: 1px solid #a7f3d0;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-eta-icon {
  font-size: 1.2rem;
}

.cart-eta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cart-eta-text strong {
  font-size: 0.85rem;
  color: #065f46;
}

.cart-eta-text span {
  font-size: 0.725rem;
  color: #047857;
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cart Item Row */
.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-item-row-box {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-xs);
}

.cart-item-thumb {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-subtle);
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-unit {
  font-size: 0.725rem;
  color: var(--text-muted);
  display: block;
}

.cart-item-price {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-top: 2px;
}

.cart-item-actions-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cart-stepper-pill {
  display: inline-flex !important;
  align-items: center;
  background: #f0fdf4;
  border: 1.5px solid var(--primary-600);
  border-radius: var(--radius-pill);
  padding: 2px 4px;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cart-stepper-pill .btn-stepper {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: white;
  color: var(--primary-800);
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-fast);
}

.cart-stepper-pill .btn-stepper:hover {
  background: var(--primary-600);
  color: white;
}

.cart-stepper-pill .qty-value {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary-900);
  min-width: 18px;
  text-align: center;
}

.btn-delete-cart-item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #fee2e2;
  background: #fef2f2;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-delete-cart-item:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
  transform: scale(1.08);
}

/* Cart Free Delivery Bar */
.cart-free-delivery-box {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
}

.free-delivery-text-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.free-delivery-progress {
  height: 6px;
  background: #e2e8f0;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.free-delivery-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  border-radius: var(--radius-pill);
}

/* Cart Bill Card */
.cart-bill-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.cart-bill-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.bill-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-body);
  margin-bottom: 8px;
}

.bill-divider {
  height: 1px;
  background: var(--border-light);
  margin: 10px 0;
}

.bill-grand-total {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.cart-savings-pill {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  text-align: center;
}

.cart-policy-note {
  font-size: 0.725rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

/* Cart Drawer Footer */
.cart-drawer-footer {
  background: white;
  border-top: 1px solid var(--border-light);
  padding: 14px 20px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
}

.cart-footer-address-row {
  margin-bottom: 10px;
}

.cart-footer-addr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.btn-proceed-checkout {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
  transition: transform var(--transition-fast);
}

.btn-proceed-checkout:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.45);
}

.btn-checkout-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.checkout-total-price {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
}

.checkout-total-label {
  font-size: 0.625rem;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.btn-checkout-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   23C. Checkout Modal & Payment Selection
   -------------------------------------------------------------------------- */
.checkout-modal-card {
  max-width: 520px;
}

.checkout-section-box {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.checkout-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.checkout-box-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-dark);
}

.checkout-change-btn {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-700);
  background: none;
  border: none;
  cursor: pointer;
}

.checkout-addr-text {
  font-size: 0.8125rem;
  color: var(--text-body);
  line-height: 1.4;
  margin: 0;
}

.checkout-slot-active {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid #bbf7d0;
}

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

.payment-radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.payment-radio-option:hover, .payment-radio-option.selected {
  border-color: var(--primary-500);
  background: #f0fdf4;
}

.payment-radio-body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.payment-radio-body strong {
  font-size: 0.85rem;
  color: var(--text-dark);
}

.payment-radio-body span {
  font-size: 0.725rem;
  color: var(--text-muted);
}

.btn-place-order {
  padding: 14px;
  font-size: 1rem;
  font-weight: 800;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
}

/* Success Confirmation Screen */
.checkout-success-view {
  text-align: center;
  padding: 20px 10px 10px 10px;
}

.success-check-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #22c55e;
  color: white;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.35);
  animation: bounceSuccess 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceSuccess {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.success-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.success-order-id {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--primary-700);
  background: var(--primary-50);
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.success-desc {
  font-size: 0.85rem;
  color: var(--text-body);
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto 16px auto;
}

.success-eta-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  max-width: 380px;
  margin: 0 auto;
}
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: #0f172a;
  color: white;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-xl);
  transform: translateY(20px);
  opacity: 0;
  transition: all var(--transition-normal);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-success {
  border-left: 4px solid var(--primary-500);
}

.toast-icon {
  color: var(--primary-400);
}

/* --------------------------------------------------------------------------
   25. Native Android Mobile App Experience & Responsive Layout
   -------------------------------------------------------------------------- */
/* Mobile App Only Elements (Strictly hidden on desktop & tablets > 768px) */
.mobile-app-topbar {
  display: none !important;
}

.mobile-app-categories-rail {
  display: none !important;
}

.mobile-bottom-appbar {
  display: none !important;
}

.modal-drag-handle {
  display: none !important;
}

/* --------------------------------------------------------------------------
   26. Responsive Breakpoints & Android Mobile UI (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shops-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grocery-storefront-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .restaurant-menu-grid {
    grid-template-columns: 1fr;
  }

  .account-page-layout {
    grid-template-columns: 1fr;
  }

  .deals-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .collections-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .engagement-row {
    grid-template-columns: 1fr;
  }

  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-bar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: auto;
  }

  body.app-body {
    padding-bottom: 84px; /* Space for Android bottom app bar */
    -webkit-tap-highlight-color: transparent;
    background-color: #f8fafc;
  }

  /* Hide Desktop Headers & Topbars */
  .top-bar {
    display: none !important;
  }

  .secondary-nav {
    display: none !important;
  }

  .header-inner {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0 0 10px 0;
    gap: 8px;
  }

  .brand-logo,
  .desktop-only-logo,
  .header-inner .brand-wordmark-logo {
    display: none !important;
  }

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

  .header-actions {
    display: none !important;
  }

  /* 1. Android Native App Top Bar (Logo + ETA + Profile + Cart) */
  .mobile-app-topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 8px 0;
    width: 100%;
  }

  .mobile-top-left-brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-header-eta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ecfdf5;
    color: #15803d;
    border: 1px solid #bbf7d0;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
  }

  .mobile-app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-top-cart-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
  }

  .mobile-cart-counter-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #16a34a;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
  }

  /* 2. Full-Width Android Sticky Search Bar */
  .header-search-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .search-form {
    padding: 3px 5px 3px 14px;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  }

  .search-input {
    font-size: 0.84rem;
    padding: 6px 4px;
  }

  .search-submit-btn {
    width: 32px;
    height: 32px;
  }

  /* 3. Android Category Quick Rail (Centered under Section Title) */
  .mobile-app-categories-rail {
    display: block !important;
    background: transparent;
    border: none;
    padding: 12px 0 16px 0;
    margin-bottom: 6px;
  }

  .mobile-categories-scroll {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px;
    overflow-x: auto;
    padding: 0 14px;
    scrollbar-width: none;
    margin: 0 auto;
    max-width: 100%;
  }

  .mobile-categories-scroll::-webkit-scrollbar {
    display: none;
  }

  .app-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    flex-shrink: 0;
  }

  .app-category-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-fast);
  }

  .app-category-item:active .app-category-icon {
    transform: scale(0.92);
  }

  .bg-grocery { background: #dcfce7; }
  .bg-veggies { background: #d1fae5; }
  .bg-food { background: #fed7aa; }
  .bg-offers { background: #fee2e2; }
  .bg-all { background: #e0e7ff; }

  .app-category-item span {
    font-size: 0.725rem;
    font-weight: 700;
    color: var(--text-dark);
  }

  .app-category-item.active span {
    color: var(--primary-700);
  }

  /* 4. Android App Hero Slider Banner */
  .hero-section.full-width-hero {
    padding: 10px 0 16px 0;
  }

  .hero-banner-card {
    min-height: auto;
    padding: 18px 16px 22px 16px;
    border-radius: 0;
  }

  .hero-banner-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }

  .hero-title {
    font-size: 1.6rem;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
  }

  .hero-subtitle {
    font-size: 0.8125rem;
    margin-bottom: 14px;
    line-height: 1.45;
  }

  .hero-trust-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .trust-badge-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    flex-shrink: 0;
  }

  .trust-icon-box {
    width: 26px;
    height: 26px;
  }

  .hero-actions {
    display: flex;
    gap: 10px;
  }

  .btn-primary-hero {
    padding: 9px 18px;
    font-size: 0.825rem;
  }

  .hero-main-composition {
    max-width: 100%;
    margin-top: 8px;
  }

  .hero-img-frame {
    border-radius: 20px;
  }

  .hero-img-showcase {
    height: 210px;
  }

  .floating-hero-card {
    padding: 6px 10px;
    border-radius: 14px;
    gap: 6px;
  }

  .float-icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.9rem;
  }

  .float-bold {
    font-size: 0.725rem;
  }

  .float-small {
    font-size: 0.625rem;
  }

  .float-card-top-left {
    top: -10px;
    left: -4px;
  }

  .float-card-bottom-right {
    bottom: -10px;
    right: -4px;
  }

  .float-discount-pill {
    font-size: 0.625rem;
    padding: 4px 10px;
  }

  .hero-slider-arrow {
    display: none !important; /* Touch swipe preferred on mobile */
  }

  .hero-slider-dots {
    bottom: 8px;
    padding: 4px 10px;
  }

  /* 5. Mobile Category & Shop Grids (100% Full-Width Image Cards) */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .category-card {
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: white;
    box-shadow: var(--shadow-xs);
  }

  .category-img-box {
    width: 100% !important;
    height: 125px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: var(--bg-subtle);
  }

  .category-img-box img,
  .category-img-full {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .category-overlay-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(6px);
    color: #4ade80;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    z-index: 2;
  }

  .category-card-content {
    padding: 12px 10px 14px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 3px;
    width: 100%;
  }

  .category-name {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--text-dark);
    margin: 0 !important;
  }

  .category-desc {
    display: block !important;
    font-size: 0.725rem !important;
    color: var(--text-muted) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .category-cta-pill {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.725rem;
    font-weight: 700;
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-pill);
    border: 1px solid var(--primary-200);
  }

  /* 6. Product Cards in 2-Column Android Grid */
  .products-carousel-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow-x: visible;
  }

  .product-card {
    min-width: 100%;
    max-width: 100%;
    flex: auto;
    padding: 10px;
    border-radius: var(--radius-lg);
  }

  .product-img-box {
    height: 90px;
  }

  .product-name {
    font-size: 0.8rem;
    height: 2.3em;
  }

  .grocery-storefront-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Restaurant Menu Grid on Mobile */
  .restaurant-menu-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .restaurant-menu-item-card {
    padding: 12px 14px !important;
    gap: 12px !important;
  }

  .restaurant-item-right {
    width: 100px !important;
    gap: 8px !important;
  }

  .restaurant-item-img-box {
    width: 95px !important;
    height: 80px !important;
    margin-bottom: 0 !important;
  }

  .btn-add-restaurant-item,
  .restaurant-item-right .qty-stepper {
    width: 84px !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
  }

  /* 7. Shops Grid */
  .shops-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .shop-card-media {
    height: 120px;
  }

  .shop-name {
    font-size: 0.95rem;
  }

  /* 8. Native Android Bottom Navigation Bar */
  .mobile-bottom-appbar {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid #e2e8f0;
    z-index: 1000;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .main-footer {
    padding-bottom: 84px !important;
  }

  .mobile-bottom-appbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
  }

  .app-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #64748b;
    flex: 1;
    position: relative;
    padding: 4px 0;
  }

  .app-nav-tab.active {
    color: var(--primary-700);
  }

  .app-nav-icon-wrap {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-nav-icon-wrap svg {
    width: 22px;
    height: 22px;
  }

  .app-nav-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2px;
  }

  .app-nav-dot-badge {
    position: absolute;
    top: 1px;
    right: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    border: 1px solid white;
  }

  /* 9. Floating Cart Pill Bar */
  .mobile-floating-cart-pill {
    position: fixed;
    bottom: 68px;
    left: 14px;
    right: 14px;
    background: #0f172a;
    color: white;
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 990;
    animation: bounceIn 0.3s ease;
  }

  @keyframes bounceIn {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  .cart-pill-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cart-pill-icon {
    font-size: 1.1rem;
  }

  .cart-pill-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
  }

  .cart-pill-items strong {
    color: #4ade80;
  }

  .cart-pill-total {
    font-weight: 800;
    color: white;
  }

  .cart-pill-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-600);
    color: white;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
  }

  /* 10. Android Bottom Sheet Modal (Drawer) */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-card {
    border-radius: 24px 24px 0 0;
    max-height: 85vh;
    width: 100%;
    transform: translateY(100%);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
  }

  .modal-overlay.active .modal-card {
    transform: translateY(0);
  }

  .modal-drag-handle {
    display: block;
    width: 42px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 4px;
    margin: 10px auto 0 auto;
  }

  .modal-header {
    padding: 14px 20px;
  }

  .modal-body {
    padding: 16px 20px 24px 20px;
  }

  /* Clean Mobile Footers (2-Column Grid Layout) */
  .main-footer {
    padding: 36px 0 16px 0;
  }

  .footer-top-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 26px 18px !important;
  }

  .footer-brand-col {
    grid-column: 1 / -1 !important;
    margin-bottom: 8px;
  }

  .footer-brand-desc {
    max-width: 100% !important;
    margin-bottom: 14px;
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .footer-col-title {
    font-size: 0.92rem;
    font-weight: 800;
    margin-bottom: 12px;
  }

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

  .footer-link-list a {
    font-size: 0.8rem;
  }

  .footer-bottom-bar {
    margin-top: 24px;
    padding-top: 18px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    align-items: center;
  }

  .payment-methods-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  /* Storefront & Account Mobile Adjustments */
  .storefront-cover-banner {
    height: 140px;
  }

  .storefront-info-panel {
    flex-direction: column;
    padding: 0 16px 16px 16px;
  }

  .storefront-logo-avatar {
    margin-top: -30px;
    width: 65px;
    height: 65px;
  }

  .storefront-name {
    font-size: 1.3rem;
  }

  /* Process Steps Centered on Mobile */
  .process-section {
    padding: 32px 0;
  }

  .process-steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px 14px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .process-step-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .process-step-icon {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 10px auto !important;
  }

  .process-step-title {
    font-size: 0.9rem !important;
    text-align: center !important;
    margin-bottom: 3px !important;
    width: 100% !important;
  }

  .process-step-desc {
    font-size: 0.75rem !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    line-height: 1.35 !important;
  }

  .storefront-stats-row {
    gap: 10px;
    padding: 8px 12px;
  }

  .account-sidebar {
    padding: 14px;
  }

  .account-main-content {
    padding: 16px;
  }

  .form-grid-2col {
    grid-template-columns: 1fr;
  }

  .address-cards-grid {
    grid-template-columns: 1fr;
  }

  .coupons-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   24. Minimalist & Light Storefront Experience (index.php?shop=...)
   ========================================================================== */
.store-profile-header-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
}

/* Store Cover Banner */
.store-profile-cover-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: #f1f5f9;
  overflow: hidden;
}

.store-profile-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.store-profile-cover-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  color: #166534;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pulse-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
  animation: pulseLiveDot 1.8s infinite;
}

@keyframes pulseLiveDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Store Profile Details */
.store-profile-body {
  padding: 16px 20px 20px 20px;
}

.store-profile-top-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.store-profile-dp-wrap {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  flex-shrink: 0;
  background: #f8fafc;
  margin-top: -36px;
  position: relative;
  z-index: 2;
}

.store-profile-dp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.store-profile-headings {
  flex: 1;
}

.store-title-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.store-profile-name {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.store-partner-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.725rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid #bbf7d0;
}

.store-profile-location {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.store-cat-label {
  font-weight: 600;
  color: #15803d;
}

.dot-sep {
  color: #cbd5e1;
}

.store-addr-label {
  color: #64748b;
}

/* Minimal Metric Pills */
.store-metrics-pill-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.store-metric-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 7px 12px;
  font-size: 0.8125rem;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color var(--transition-fast);
}

.store-metric-pill strong {
  font-weight: 800;
  color: #0f172a;
}

.metric-sub {
  color: #64748b;
  font-size: 0.75rem;
}

.store-clean-offer-strip {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 9px 14px;
  color: #15803d;
  font-size: 0.825rem;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.offer-tag-icon {
  font-size: 0.95rem;
}

/* Sticky Aisle Navigation */
.store-aisle-nav-sticky {
  position: sticky;
  top: 56px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  padding: 10px 0;
  margin: 10px 0 16px 0;
  border-bottom: 1px solid #f1f5f9;
}

.store-aisles-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px;
}

.store-aisles-scroll::-webkit-scrollbar {
  display: none;
}

.aisle-tab-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-family: var(--font-heading);
  font-size: 0.825rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.aisle-tab-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.aisle-tab-btn.active {
  background: #15803d;
  color: #ffffff;
  border-color: #15803d;
  box-shadow: 0 2px 8px rgba(21, 128, 61, 0.25);
}

/* Grocery Storefront Products Grid */
.grocery-storefront-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.minimal-product-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.minimal-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
  border-color: #cbd5e1;
}

/* Full-Width Product Media Box */
.product-card-top-media {
  position: relative;
  width: 100%;
  height: 160px;
  background: #f8fafc;
  overflow: hidden;
  border-bottom: 1px solid #f1f5f9;
}

.product-fullwidth-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease;
}

.minimal-product-card:hover .product-fullwidth-img {
  transform: scale(1.06);
}

/* Compact Discount Pill Badge (No full-width overflow!) */
.product-badge-discount {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: auto !important;
  max-width: fit-content !important;
  background: #16a34a !important;
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  z-index: 3 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Product Info Container (Zero Overlap) */
.minimal-product-card .product-info {
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-eta-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #15803d;
  letter-spacing: 0.3px;
  margin-bottom: 5px;
}

.eta-bolt {
  font-size: 0.75rem;
}

.minimal-product-card .product-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.minimal-product-card .product-weight {
  font-size: 0.775rem;
  color: #64748b;
  margin-bottom: 12px;
  display: block;
}

.product-bottom-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
  gap: 8px;
}

.product-price-col {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.product-price-col .current-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.product-price-col .original-price {
  font-size: 0.75rem;
  color: #94a3b8;
  text-decoration: line-through;
  margin-top: 2px;
}

.minimal-product-card .btn-add-product {
  background: #ffffff;
  border: 1.5px solid #16a34a;
  color: #16a34a;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.12);
  transition: all var(--transition-fast);
}

.minimal-product-card .btn-add-product:hover {
  background: #16a34a;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.minimal-product-card .qty-stepper.active {
  display: inline-flex;
  align-items: center;
  background: #16a34a;
  color: #ffffff;
  border-radius: var(--radius-pill);
  padding: 3px 6px;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.minimal-product-card .qty-stepper .qty-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 0.95rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.minimal-product-card .qty-stepper .qty-value {
  color: white;
  font-size: 0.8125rem;
  font-weight: 800;
  padding: 0 6px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .store-profile-cover-wrap {
    height: 135px;
  }

  .store-profile-dp-wrap {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    margin-top: -27px;
  }

  .store-profile-name {
    font-size: 1.25rem;
  }

  .store-metrics-pill-bar {
    gap: 6px;
  }

  .store-metric-pill {
    padding: 5px 9px;
    font-size: 0.75rem;
  }

  .grocery-storefront-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .product-card-top-media {
    height: 130px;
  }

  .minimal-product-card .product-info {
    padding: 10px;
  }

  .minimal-product-card .product-name {
    font-size: 0.825rem;
    min-height: 2.3em;
  }

  .product-price-col .current-price {
    font-size: 0.95rem;
  }

  .minimal-product-card .btn-add-product {
    padding: 5px 10px;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   25. 100% Full-Width Dynamic Farm-Fresh Hero Showcase Section
   ========================================================================== */
/* Header 100% Full-Width Desktop */
@media (min-width: 769px) {
  .main-header .container,
  .top-bar .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Hero Outer Section */
.hero-farm-fresh-section {
  width: 100%;
  padding: 12px 0 16px 0;
}

.hero-farm-fresh-fullwidth-wrap {
  width: 100%;
  max-width: 100%;
  padding: 0 32px;
}

/* Main Hero Card Container */
.hero-farm-fresh-card {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(115deg, #ffffff 0%, #f6fdf8 35%, #edfcf2 70%, #dbfce7 100%);
  border: 1.5px solid #bbf7d0;
  box-shadow: 0 12px 35px rgba(22, 163, 74, 0.12);
  padding: 38px 46px;
}

/* Ambient Glow and Organic Shape */
.hero-bg-curve-shape {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(187, 247, 208, 0.5) 0%, rgba(220, 252, 231, 0.2) 60%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.hero-bg-glow-orb {
  position: absolute;
  bottom: -30px;
  left: 15%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* 2-Column Hero Grid */
.hero-farm-grid {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Left Content Column */
.hero-farm-content-col {
  display: flex;
  flex-direction: column;
}

/* Top Badge */
.hero-farm-badge-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.hero-farm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8faee;
  border: 1.5px solid #bbf7d0;
  color: #15803d;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.4px;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.1);
}

.badge-sparkle-rays svg {
  display: block;
}

/* Headline */
.hero-farm-headline {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.9px;
  margin: 6px 0 10px 0;
}

.hero-farm-headline .headline-dark {
  display: block;
  color: #0f172a;
}

.hero-farm-headline .headline-green {
  display: inline-flex;
  align-items: center;
  color: #16a34a;
}

.hero-farm-headline .leaf-accent {
  display: inline-block;
  font-size: 2rem;
  transform: rotate(-10deg);
  margin-left: 4px;
}

/* Subtitle */
.hero-farm-description {
  font-size: 1.025rem;
  color: #475569;
  line-height: 1.55;
  max-width: 520px;
  margin-bottom: 22px;
  font-weight: 500;
}

/* Action Row (CTA Button + Handwritten Script) */
.hero-farm-action-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.cta-button-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.btn-farm-produce-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-farm-produce-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.45);
  background: linear-gradient(135deg, #166534 0%, #15803d 100%);
}

.btn-farm-produce-cta .cta-basket-icon {
  display: flex;
  align-items: center;
}

.btn-farm-produce-cta .cta-arrow {
  font-size: 1.15rem;
  transition: transform 0.2s ease;
}

.btn-farm-produce-cta:hover .cta-arrow {
  transform: translateX(4px);
}

.button-sparkle-rays {
  position: absolute;
  top: -8px;
  right: -8px;
  pointer-events: none;
}

/* Handwritten Script Tag */
.hero-script-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Caveat', cursive;
  font-size: 1.55rem;
  font-weight: 700;
  color: #15803d;
  line-height: 1.05;
  transform: rotate(-4deg);
  user-select: none;
}

.script-underline-svg {
  margin-top: 2px;
}

/* Trust Quality Badges */
.hero-farm-trust-pills {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 18px;
  border-top: 1.5px dashed #cbd5e1;
  flex-wrap: wrap;
}

.farm-trust-pill {
  display: flex;
  align-items: center;
  gap: 10px;
}

.farm-trust-pill .pill-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e8faee;
  border: 1px solid #bbf7d0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.farm-trust-pill .pill-text-col {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.farm-trust-pill .pill-text-col strong {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
}

.farm-trust-pill .pill-text-col span {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
}

.farm-trust-divider {
  width: 1px;
  height: 28px;
  background: #e2e8f0;
}

/* Right Visual Composition */
.hero-farm-visual-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.visual-composition-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-basket-frame {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(22, 163, 74, 0.18);
  border: 4px solid #ffffff;
  background: #ffffff;
  transition: transform 0.3s ease;
}

.main-basket-frame:hover {
  transform: scale(1.02);
}

.main-basket-img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  display: block;
}

.basket-badge-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.725rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4);
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

/* Floating Produce Props */
.floating-produce-item {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
  z-index: 3;
}

.produce-emoji {
  display: block;
  font-size: 2.1rem;
}

@keyframes floatAnim {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(6deg); }
}

.float-item-orange {
  top: -12px;
  right: 15px;
  animation: floatAnim 3.2s ease-in-out infinite;
}

.float-item-strawberry {
  top: 60px;
  left: -20px;
  animation: floatAnim 2.8s ease-in-out infinite 0.4s;
}

.float-item-tomato {
  bottom: 15px;
  left: -10px;
  animation: floatAnim 3.5s ease-in-out infinite 0.8s;
}

.float-item-carrot {
  top: -18px;
  left: 30%;
  animation: floatAnim 3s ease-in-out infinite 0.2s;
}

.float-item-leaf {
  top: 130px;
  right: -16px;
  animation: floatAnim 2.6s ease-in-out infinite 0.6s;
}

.float-item-blueberry {
  bottom: 25px;
  right: 20px;
  animation: floatAnim 3.4s ease-in-out infinite 1s;
}

/* Responsive Mobile & Tablet Adjustments */
@media (max-width: 992px) {
  .hero-farm-headline {
    font-size: 2.2rem;
  }

  .hero-farm-fresh-card {
    padding: 28px 24px;
  }
}

@media (max-width: 768px) {
  .hero-farm-fresh-section {
    padding: 8px 0 6px 0;
  }

  .hero-farm-fresh-fullwidth-wrap {
    padding: 0 14px;
  }

  .hero-farm-fresh-card {
    border-radius: 20px;
    padding: 20px 16px;
  }

  .hero-farm-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero-farm-headline {
    font-size: 1.85rem;
    letter-spacing: -0.5px;
  }

  .hero-farm-description {
    font-size: 0.875rem;
    margin-bottom: 16px;
  }

  .btn-farm-produce-cta {
    padding: 10px 20px;
    font-size: 0.875rem;
  }

  .hero-script-tag {
    font-size: 1.3rem;
  }

  .main-basket-img {
    height: 210px;
  }

  /* Single-row compact trust badges on mobile */
  .hero-farm-trust-pills {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding-top: 14px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    border-top: 1px dashed #cbd5e1 !important;
  }

  .farm-trust-pill {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .farm-trust-pill .pill-icon-box {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .farm-trust-pill .pill-icon-box svg {
    width: 12px !important;
    height: 12px !important;
  }

  .farm-trust-pill .pill-text-col {
    min-width: 0 !important;
    line-height: 1.1 !important;
  }

  .farm-trust-pill .pill-text-col strong {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    letter-spacing: -0.2px !important;
  }

  .farm-trust-pill .pill-text-col span {
    font-size: 0.56rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    color: #64748b !important;
  }

  .farm-trust-divider {
    display: none !important;
  }
}

/* ==========================================================================
   26. BRAPTO SUNNY YELLOW THEME & MOCKUP-MATCHING STYLES
   ========================================================================== */

/* 1. Top Yellow Navigation Bar */
.theme-brapto-yellow .brapto-yellow-topbar {
  background: #ffc700;
  padding: 12px 24px 4px 24px;
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: none;
}

.brapto-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8px;
}

.brapto-header-left {
  display: flex;
  align-items: center;
}

.btn-brapto-hamburger {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.btn-brapto-hamburger:hover {
  transform: scale(1.08);
}

.brapto-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Location Selector Pill */
.brapto-location-pill {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.brapto-location-pill:hover {
  background: rgba(0, 0, 0, 0.06);
}

.brapto-loc-pin {
  stroke: #000000;
}

.brapto-loc-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #000000;
  letter-spacing: -0.2px;
}

.brapto-loc-chevron {
  stroke: #000000;
}

/* User Avatar & Online Dot */
.brapto-user-wrapper {
  position: relative;
}

.brapto-header-login-pill {
  background: #0f172a;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 4px 12px 4px 5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 0.825rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-pill-icon-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.login-pill-icon-circle svg {
  stroke: #ffffff;
}

.login-pill-text {
  color: #ffffff;
  font-weight: 800;
  font-size: 0.825rem;
}

.login-pill-arrow {
  color: #facc15;
  transition: transform 0.2s ease;
}

.brapto-header-login-pill:hover {
  background: #000000;
  transform: translateY(-2px);
  border-color: #facc15;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28), 0 0 14px rgba(250, 204, 21, 0.3);
}

.brapto-header-login-pill:hover .login-pill-icon-circle {
  transform: scale(1.08);
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
}

.brapto-header-login-pill:hover .login-pill-icon-circle svg {
  stroke: #0f172a;
}

.brapto-header-login-pill:hover .login-pill-arrow {
  transform: translateX(2px);
}

.brapto-header-user-pill {
  background: #ffffff;
  color: #0f172a;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 9999px;
  padding: 4px 12px 4px 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.brapto-header-user-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
  background: #f8fafc;
}

.header-user-avatar-box {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.header-user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.header-user-name-text {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  color: #0f172a;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-user-chevron {
  color: #64748b;
  transition: transform 0.2s ease;
}

.avatar-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  border: 2px solid #ffffff;
  position: absolute;
  bottom: -1px;
  right: -1px;
}

.brapto-cart-btn {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px;
}

.brapto-cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #000000;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 9999px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}

/* Sidebar Drawer for Hamburger */
.brapto-sidebar-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.3s ease;
}

.brapto-sidebar-drawer.open {
  visibility: visible;
  pointer-events: auto;
}

.sidebar-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.brapto-sidebar-drawer.open .sidebar-drawer-overlay {
  opacity: 1;
}

.sidebar-drawer-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: #ffffff;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.brapto-sidebar-drawer.open .sidebar-drawer-content {
  transform: translateX(0);
}

.sidebar-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.sidebar-brand-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 900;
  color: #0f172a;
}

.btn-close-sidebar {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 800;
}

.sidebar-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-nav-item {
  font-size: 0.95rem;
  font-weight: 700;
  color: #334155;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.sidebar-nav-item:hover,
.sidebar-nav-item.active {
  background: #fef08a;
  color: #0f172a;
}

.sidebar-divider {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 8px 0;
}

/* 2. Top Yellow Hero Banner & Floating Search */
.brapto-yellow-hero-section {
  background: #ffc700;
  padding-top: 4px;
  padding-bottom: 20px;
  position: relative;
  margin-top: -1px;
}

.brapto-hero-banner-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.brapto-banner-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 12px;
  text-align: center;
}

.brapto-hero-banner-img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.brapto-floating-search-wrap {
  margin-top: 10px;
  position: relative;
  z-index: 20;
  padding: 0 16px;
}

.brapto-search-form {
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  padding: 4px 5px 4px 18px;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.95);
  transition: all 0.25s ease;
}

.brapto-search-form:focus-within {
  border-color: #0f172a;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2), 0 0 0 3px rgba(250, 204, 21, 0.35);
}

.brapto-search-lens-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
}

.brapto-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.95rem;
  font-family: inherit;
  color: #0f172a;
  padding: 8px 12px;
  font-weight: 600;
  background: transparent;
  min-width: 0;
}

.brapto-search-input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.brapto-search-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.brapto-search-btn:hover {
  background: #0f172a;
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
}

.brapto-search-btn:hover svg {
  stroke: #facc15;
}

.brapto-search-btn:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  .brapto-floating-search-wrap {
    padding: 0 14px;
    margin-top: 6px;
  }
  .brapto-search-form {
    padding: 3px 4px 3px 14px;
  }
  .brapto-search-input {
    font-size: 0.88rem;
    padding: 6px 8px;
  }
  .brapto-search-btn {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 480px) {
  .brapto-floating-search-wrap {
    padding: 0 10px;
    margin-top: 4px;
  }
  .brapto-search-form {
    padding: 3px 4px 3px 12px;
  }
  .brapto-search-lens-icon svg {
    width: 17px;
    height: 17px;
  }
  .brapto-search-input {
    font-size: 0.825rem;
    padding: 5px 6px;
  }
  .brapto-search-btn {
    width: 34px;
    height: 34px;
  }
  .brapto-search-btn svg {
    width: 17px;
    height: 17px;
  }
}

/* 3. "Local Shops, Trusted by You" Green Showcase Card */
.brapto-local-shops-promo-section {
  padding: 24px 0 16px 0;
  background: #ffffff;
}



.trust-pill-icon {
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
}

@media (max-width: 768px) {
  .local-shops-card {
    padding: 16px 14px;
    border-radius: 18px;
  }
  .local-shops-grid {
    grid-template-columns: 1.3fr 1fr;
    text-align: left;
    gap: 8px;
    align-items: center;
  }
  .local-shops-trust-pills {
    gap: 4px;
    flex-wrap: wrap;
  }
  .local-trust-pill {
    padding: 4px 6px;
    font-size: 0.64rem;
    gap: 3px;
  }
  .trust-pill-icon {
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .local-shops-card {
    padding: 12px 10px;
    border-radius: 16px;
  }
  .local-shops-grid {
    grid-template-columns: 1.25fr 1fr;
    text-align: left;
    gap: 6px;
    align-items: center;
  }
  .local-shops-title {
    font-size: 1.05rem;
    margin-bottom: 2px;
    line-height: 1.15;
  }
  .local-shops-subtitle {
    font-size: 0.62rem;
    margin-bottom: 6px;
    line-height: 1.3;
  }
  .local-shops-trust-pills {
    gap: 3px;
    flex-wrap: wrap;
  }
  .local-trust-pill {
    padding: 3px 5px;
    font-size: 0.56rem;
    gap: 2px;
    letter-spacing: -0.2px;
  }
  .trust-pill-icon {
    font-size: 0.65rem;
  }
  .local-shops-basket-img {
    max-height: 130px;
  }
}

.local-shops-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.local-shops-basket-img {
  width: 100%;
  max-width: 250px;
  max-height: 250px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(22, 163, 74, 0.15));
  transition: transform 0.3s ease;
}

.local-shops-card:hover .local-shops-basket-img {
  transform: translateY(-4px) scale(1.02);
}

/* 4. "Everything you need, in one place" 3D Category Section */
.brapto-categories-3d-section {
  padding: 28px 0 20px 0;
  background: #ffffff;
}

.brapto-cat-header-center {
  text-align: center;
  margin-bottom: 24px;
}

.brapto-ornamental-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}



/* 4-Card Full Uncropped 3D Category Grid (Exact Portrait Aspect Ratio Matching Example) */
.brapto-3d-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.brapto-full-cat-card {
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.brapto-full-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.full-cat-card-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 20px;
  background: transparent;
  display: block;
  position: relative;
}

.full-cat-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 20px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.brapto-full-cat-card:hover .full-cat-card-img {
  transform: scale(1.03);
}

/* Bottom Explore Pill Button under Category Image */
.cat-explore-btn-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 10px auto 2px auto !important;
}

.cat-explore-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1;
  padding: 5px 14px;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.cat-explore-label svg {
  transition: transform 0.22s ease, color 0.22s ease;
  color: #64748b;
  flex-shrink: 0;
}

.brapto-full-cat-card:hover .cat-explore-label,
.cat-explore-label:hover {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transform: translateY(-1px);
}

.brapto-full-cat-card:hover .cat-explore-label svg,
.cat-explore-label:hover svg {
  transform: translateX(2px);
  color: #facc15;
}

@media (max-width: 992px) {
  .brapto-categories-3d-section .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .brapto-3d-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 100%;
  }
  .brapto-full-cat-card {
    border-radius: 18px;
  }
  .full-cat-card-media {
    aspect-ratio: 1 / 1;
    border-radius: 17px;
  }
  .full-cat-card-img {
    border-radius: 17px;
    object-fit: contain;
  }
  .cat-explore-label {
    font-size: 0.725rem;
    padding: 4px 11px;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .brapto-categories-3d-section {
    padding: 16px 0 12px 0;
  }
  .brapto-cat-header-center {
    margin-bottom: 14px;
  }
  .ornament-text {
    font-size: 1.25rem;
  }
  .brapto-cat-subheading {
    font-size: 0.825rem;
  }
  .brapto-3d-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .brapto-full-cat-card {
    border-radius: 16px;
  }
  .full-cat-card-media {
    aspect-ratio: 1 / 1;
    border-radius: 15px;
  }
  .full-cat-card-img {
    border-radius: 15px;
    object-fit: contain;
  }
  .cat-floating-arrow-btn {
    bottom: 7px;
    right: 7px;
    width: 30px;
    height: 30px;
    border-width: 1.8px;
  }
  .cat-floating-arrow-btn svg {
    width: 14px;
    height: 14px;
  }
}



.shop-badge-distance {
  font-size: 0.68rem;
  font-weight: 700;
  color: #334155;
}

.shop-card-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.brapto-shop-logo-box {
  width: 64px;
  height: 64px;
  background: #ffffff;
  border-radius: 50%;
  border: 2px solid #f1f5f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: transform 0.2s ease;
}

.brapto-shop-card:hover .brapto-shop-logo-box {
  transform: scale(1.06);
  border-color: #facc15;
}

.brapto-shop-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.shop-verified-badge {
  position: absolute;
  bottom: 0px;
  right: calc(50% - 32px);
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.shop-card-info {
  padding: 10px 14px 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.brapto-shop-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.shop-category-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.brapto-shop-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
}

.brapto-shop-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #15803d;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
}

.rating-star-icon {
  color: #fde047;
  font-size: 0.75rem;
}

.brapto-shop-eta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  color: #334155;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}

.shop-card-action-btn {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
  transition: all 0.2s ease;
}

.brapto-shop-card:hover .shop-card-action-btn {
  background: #0f172a;
  color: #facc15;
}

.brapto-shop-card:hover .shop-card-action-btn svg {
  stroke: #facc15;
  transform: translateX(3px);
}

@media (max-width: 992px) {
  .brapto-nearby-shops-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .brapto-nearby-shops-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .brapto-shop-card {
    border-radius: 18px;
  }
  .shop-card-top-banner {
    padding: 6px 8px;
  }
  .shop-badge-offer {
    font-size: 0.58rem;
    padding: 1px 6px;
  }
  .shop-badge-distance {
    font-size: 0.58rem;
  }
  .brapto-shop-logo-box {
    width: 52px;
    height: 52px;
  }
  .brapto-shop-title {
    font-size: 0.825rem;
  }
  .shop-category-label {
    font-size: 0.65rem;
  }
  .brapto-shop-rating-pill,
  .brapto-shop-eta-pill {
    font-size: 0.65rem;
    padding: 2px 6px;
  }
  .shop-card-action-btn {
    padding: 6px 8px;
    font-size: 0.72rem;
  }
}

/* 6. Trust Propositions Bar (Attractive Smooth Right-to-Left Infinite Marquee) */
.brapto-trust-strip-section {
  padding: 16px 0 22px 0;
  background: #ffffff;
  margin-top: auto;
  width: 100%;
  overflow: hidden;
}

.brapto-marquee-wrapper {
  background: #ffffff;
  border: 1.5px solid #eef2f6;
  border-radius: 22px;
  padding: 10px 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.brapto-marquee-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: trustMarqueeScroll 28s linear infinite;
  will-change: transform;
}

.brapto-marquee-wrapper:hover .brapto-marquee-track {
  animation-play-state: paused;
}

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

.trust-marquee-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  padding: 8px 18px 8px 10px;
  border-radius: 9999px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.trust-marquee-pill:hover {
  background: #ffffff;
  border-color: #facc15;
  box-shadow: 0 4px 14px rgba(250, 204, 21, 0.25);
  transform: translateY(-2px);
}

.trust-marquee-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
}

.trust-marquee-icon-box svg {
  display: block;
}

.trust-marquee-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}

.trust-marquee-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.trust-marquee-desc {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .brapto-trust-strip-section {
    padding: 12px 0 16px 0;
  }
  .brapto-marquee-wrapper {
    padding: 8px 0;
    border-radius: 16px;
  }
  .brapto-marquee-track {
    gap: 12px;
    animation-duration: 22s;
  }
  .trust-marquee-pill {
    padding: 6px 14px 6px 8px;
    gap: 8px;
  }
  .trust-marquee-icon-box {
    width: 30px;
    height: 30px;
  }
  .trust-marquee-icon-box svg {
    width: 17px;
    height: 17px;
  }
  .trust-marquee-title {
    font-size: 0.75rem;
  }
  .trust-marquee-desc {
    font-size: 0.64rem;
  }
}

/* 7. Dark Minimal Footer */
.brapto-main-footer {
  background: #0b0f19;
  color: #94a3b8;
  padding: 22px 0;
  font-size: 0.825rem;
  border-top: 1px solid #1e293b;
}

.brapto-footer-content-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.brapto-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.brapto-footer-divider {
  color: #475569;
}

.brapto-vns-link {
  color: #4ade80 !important;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s ease;
}

.brapto-vns-link:hover {
  color: #86efac !important;
  text-decoration: underline !important;
}

.brapto-footer-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.brapto-footer-link {
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.825rem;
  transition: color 0.15s ease;
}

.brapto-footer-link:hover {
  color: #ffffff;
}

.brapto-footer-admin-btn,
.brapto-footer-seller-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde047 !important;
  border: 1px solid rgba(250, 204, 21, 0.35);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
}

.brapto-footer-admin-btn:hover,
.brapto-footer-seller-btn:hover {
  background: #facc15;
  color: #0f172a !important;
  border-color: #facc15;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.35);
}

/* Mobile Responsiveness for New Layout */
@media (max-width: 992px) {
  .brapto-nearby-shops-grid,
  .brapto-trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .local-shops-card {
    padding: 16px 14px;
    border-radius: 20px;
  }

  .local-shops-grid {
    grid-template-columns: 1.25fr 1fr;
    text-align: left;
    gap: 10px;
    align-items: center;
  }

  .local-shops-title {
    font-size: 1.25rem;
    margin-bottom: 4px;
    line-height: 1.15;
  }

  .local-shops-subtitle {
    font-size: 0.72rem;
    margin: 0 0 10px 0;
    line-height: 1.35;
    max-width: 100%;
  }

  .local-shops-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
  }

  .local-trust-pill {
    padding: 4px 6px;
    font-size: 0.62rem;
    gap: 3px;
    flex: 0 1 auto;
  }

  .local-shops-basket-img {
    max-height: 155px;
    max-width: 100%;
    object-fit: contain;
  }

  /* 3D Categories on Mobile */
  .brapto-3d-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .brapto-3d-cat-card {
    border-radius: 20px;
    padding: 14px 12px 14px 12px;
  }

  .cat-circle-icon-badge {
    width: 36px;
    height: 36px;
  }

  .cat-circle-icon-badge svg {
    width: 17px;
    height: 17px;
  }

  .cat-title-3d {
    font-size: 1.05rem;
  }

  .cat-sub-3d {
    font-size: 0.68rem;
    line-height: 1.25;
  }

  .cat-card-center-media {
    height: 120px;
  }

  .cat-3d-artwork-img {
    max-height: 115px;
  }

  .cat-floating-arrow-btn {
    width: 34px;
    height: 34px;
    bottom: 10px;
    right: 10px;
  }

  .cat-floating-arrow-btn svg {
    width: 15px;
    height: 15px;
  }

  .ornament-text {
    font-size: 1.15rem;
  }

  .brapto-cat-subheading {
    font-size: 0.8rem;
  }

  .brapto-nearby-shops-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .brapto-shop-title {
    font-size: 0.85rem;
  }

  .brapto-trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .brapto-footer-content-row {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

}

/* ==========================================================================
   7. SLIDE-OUT CART DRAWER & BASKET (Zepto / Blinkit / Swiggy Instamart)
   ========================================================================== */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  justify-content: flex-end;
}

.cart-drawer-overlay.active {
  visibility: visible;
  opacity: 1;
}

.cart-drawer-card {
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  box-shadow: -8px 0 36px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 100000;
  overflow: hidden;
}

.cart-drawer-overlay.active .cart-drawer-card {
  transform: translateX(0);
}

.cart-drawer-header {
  padding: 18px 20px 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #ffffff;
  flex-shrink: 0;
}

.cart-drawer-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-drawer-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-drawer-badge {
  font-size: 0.72rem;
  font-weight: 800;
  background: #dcfce7;
  color: #15803d;
  padding: 3px 10px;
  border-radius: 9999px;
}

.cart-origin-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.cart-drawer-close-btn {
  background: #f1f5f9;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.cart-drawer-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: scale(1.08);
}

/* ETA Banner */
.cart-eta-banner {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-bottom: 1px solid #dcfce7;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.cart-eta-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.cart-eta-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.cart-eta-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.cart-eta-text strong {
  color: #065f46;
  font-size: 0.86rem;
  font-weight: 800;
}

.cart-eta-text span {
  color: #059669;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-cart-change-top {
  background: #ffffff;
  border: 1px solid #a7f3d0;
  border-radius: 9999px;
  padding: 5px 12px;
  color: #047857;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-cart-change-top:hover {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
}

/* Scrollable Drawer Body */
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f8fafc;
}

/* Cart Items */
.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-item-row-box {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
}

.cart-item-row-box:hover {
  border-color: #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.cart-item-thumb {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #f1f5f9;
  background: #f8fafc;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item-unit {
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  display: block;
  margin-bottom: 3px;
}

.cart-item-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.cart-item-price {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
}

.cart-item-mrp {
  font-size: 0.75rem;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 500;
}

.cart-item-actions-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cart-stepper-pill {
  display: inline-flex;
  align-items: center;
  background: #059669;
  border-radius: 9999px;
  padding: 2px 4px;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.btn-stepper {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 50%;
}

.btn-stepper:hover {
  background: rgba(255, 255, 255, 0.25);
}

.cart-stepper-pill .qty-value {
  font-size: 0.82rem;
  font-weight: 800;
  min-width: 22px;
  text-align: center;
  color: #ffffff;
}

.btn-delete-cart-item {
  background: #fee2e2;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-delete-cart-item:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Free Delivery Bar */
.cart-free-delivery-box {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.05);
}

.free-delivery-text-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.free-delivery-progress {
  height: 7px;
  background: #dcfce7;
  border-radius: 9999px;
  overflow: hidden;
}

.free-delivery-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  border-radius: 9999px;
  transition: width 0.35s ease;
}

/* Bill Details */
.cart-bill-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}

.cart-bill-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px 0;
  letter-spacing: -0.2px;
}

.bill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.825rem;
  margin-bottom: 9px;
}

.bill-label {
  color: #64748b;
  font-weight: 500;
}

.bill-val {
  color: #0f172a;
  font-weight: 600;
}

.bill-divider {
  height: 1px;
  background: none;
  border-top: 1px dashed #e2e8f0;
  margin: 12px 0;
}

.bill-grand-total {
  font-size: 0.98rem;
  margin-bottom: 10px;
}

.bill-label-bold {
  font-weight: 800;
  color: #0f172a;
}

.bill-val-bold {
  font-family: var(--font-heading);
  font-weight: 900;
  color: #0f172a;
  font-size: 1.15rem;
}

.cart-savings-pill {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  color: #047857;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cart-policy-note {
  font-size: 0.72rem;
  color: #94a3b8;
  text-align: center;
  line-height: 1.4;
  margin-top: 8px;
}

/* Cart Footer */
.cart-drawer-footer {
  padding: 14px 18px 18px 18px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.05);
  flex-shrink: 0;
}

.cart-footer-address-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-footer-address-row:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.cart-footer-addr {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.cart-footer-addr-pin-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cart-footer-addr-pin-badge.is-saved {
  background: #ecfdf5;
  color: #059669;
}

.cart-footer-addr-pin-badge.is-prompt,
.cart-footer-addr-pin-badge.is-guest {
  background: #fef3c7;
  color: #d97706;
}

.cart-footer-addr-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.cart-footer-addr-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.cart-footer-addr-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.btn-cart-change-address {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-cart-change-address:hover {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
}

.btn-proceed-checkout {
  width: 100%;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border: none;
  border-radius: 14px;
  padding: 13px 18px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-proceed-checkout:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
}

.btn-proceed-checkout:active {
  transform: translateY(0) scale(0.99);
}

.btn-checkout-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.checkout-total-price {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 900;
}

.checkout-total-label {
  font-size: 0.62rem;
  font-weight: 800;
  opacity: 0.85;
  letter-spacing: 0.5px;
}

.btn-checkout-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
}

/* Mobile Bottom Sheet Mode for Cart Drawer */
@media (max-width: 600px) {
  .cart-drawer-overlay {
    align-items: flex-end;
  }
  .cart-drawer-card {
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
  }
  .cart-drawer-overlay.active .cart-drawer-card {
    transform: translateY(0);
  }
  .modal-drag-handle {
    width: 44px;
    height: 5px;
    background: #cbd5e1;
    border-radius: 9999px;
    margin: 8px auto 0 auto;
  }
  .cart-drawer-header {
    padding: 12px 16px;
  }
  .cart-drawer-body {
    padding: 14px 16px;
  }
  .cart-drawer-footer {
    padding: 12px 16px;
  }
}

/* ==========================================================================
   CUSTOMER ACCOUNT & ORDER HISTORY STYLES
   ========================================================================== */
.profile-compact-header {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.profile-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar-box img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #facc15;
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.2);
}

.profile-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.profile-contact-meta {
  font-size: 0.825rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-filter-pills-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.order-filter-pills-row::-webkit-scrollbar {
  display: none;
}

.order-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.order-filter-pill:hover {
  border-color: #cbd5e1;
  color: #0f172a;
}

.order-filter-pill.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.modern-orders-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modern-order-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 20px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modern-order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.order-store-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-store-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.order-store-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
}

.order-ref-date {
  font-size: 0.775rem;
  color: #64748b;
  font-weight: 600;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 800;
}

.status-active {
  background: #dcfce7;
  color: #15803d;
}

.status-delivered {
  background: #f1f5f9;
  color: #334155;
}

.status-cancelled {
  background: #fee2e2;
  color: #b91c1c;
}

/* Order Items Preview with Product Thumbnails and Names */
.order-items-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.order-item-snippet {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 14px;
  padding: 10px 14px;
  transition: background 0.15s ease;
}

.order-item-snippet:hover {
  background: #f1f5f9;
}

.order-item-img-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.order-item-details {
  flex: 1;
  min-width: 0;
}

.item-name-text {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  display: block;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-unit-qty-meta {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
  display: block;
}

.item-subtotal-text {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f172a;
  flex-shrink: 0;
}

/* Order Card Bottom Action Bar */
.order-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 12px;
}

.order-grand-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.total-caption {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}

.total-value {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.btn-reorder-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #facc15;
  color: #0f172a;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(250, 204, 21, 0.3);
  transition: all 0.2s ease;
}

.btn-reorder-action:hover {
  background: #eab308;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(250, 204, 21, 0.45);
}

@media (max-width: 600px) {
  .modern-order-card {
    padding: 16px;
  }
  .order-item-snippet {
    padding: 8px 10px;
    gap: 10px;
  }
  .order-item-img-thumb {
    width: 42px;
    height: 42px;
  }
  .order-card-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   MINIMAL STOREFRONT HERO & SHOP PAGE STYLES
   ========================================================================== */
.store-hero-minimal-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-hero-top-banner {
  position: relative;
  height: 140px;
  width: 100%;
  overflow: hidden;
  background: #0f172a;
}

.store-hero-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.store-hero-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.store-hero-status-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.status-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulseLiveDot 1.8s infinite;
}

@keyframes pulseLiveDot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 6px #22c55e; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.store-hero-main-content {
  padding: 16px 20px 18px 20px;
  position: relative;
}

.store-hero-header-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.store-hero-avatar {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  margin-top: -36px;
  position: relative;
  background: #ffffff;
  flex-shrink: 0;
}

.store-hero-info {
  flex: 1;
  min-width: 0;
}

.store-hero-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.store-hero-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
}

.store-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.725rem;
  font-weight: 700;
}

.store-hero-location-line {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.store-cat-name {
  font-weight: 700;
  color: #0f172a;
}

.sep-dot {
  color: #cbd5e1;
}

.store-address-short {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Minimal Horizontal Badges Row */
.store-hero-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.store-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.775rem;
  font-weight: 600;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  white-space: nowrap;
}

.store-badge-rating {
  background: #fffbeb;
  border-color: #fef3c7;
  color: #b45309;
}

.store-badge-rating strong {
  font-weight: 800;
}

.store-badge-rating small {
  color: #92400e;
  font-size: 0.7rem;
}

.store-badge-eta {
  background: #ecfdf5;
  border-color: #d1fae5;
  color: #047857;
  font-weight: 700;
}

.store-badge-distance {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.store-badge-offer {
  background: #fff1f2;
  border-color: #ffe4e6;
  color: #e11d48;
  font-weight: 700;
}

@media (max-width: 600px) {
  .store-hero-top-banner {
    height: 100px;
  }
  .store-hero-avatar {
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border-radius: 12px;
  }
  .store-hero-name {
    font-size: 1.1rem;
  }
  .store-hero-main-content {
    padding: 12px 14px 14px 14px;
  }
  .store-hero-badges-row {
    gap: 6px;
  }
  .store-badge-item {
    font-size: 0.725rem;
    padding: 3px 8px;
  }
}

/* ==========================================================================
   HIDE FOOTER ON MOBILE VIEW (Screen <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  footer.brapto-main-footer,
  footer,
  .brapto-main-footer,
  .main-footer,
  .site-footer {
    display: none !important;
  }
}

/* ==========================================================================
   BRAPTO RESPONSIVE STOREFRONT (Mockup Exact on Mobile, Elegant on Desktop)
   ========================================================================== */

/* Visibility Helper Classes */
.desktop-only-item {
  display: none !important;
}

.mobile-only-item {
  display: flex !important;
}

@media (min-width: 769px) {
  .desktop-only-item {
    display: flex !important;
  }
  .mobile-only-item {
    display: none !important;
  }
}

/* 1. Header Styles */
.brapto-clean-header {
  background: #ffc700 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 0 !important;
}

.brapto-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .brapto-header-container {
    max-width: 100%;
  }
}

@media (min-width: 769px) {
  .brapto-header-container {
    max-width: 1200px;
    padding: 12px 24px;
  }
}

.brapto-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-brapto-hamburger {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.btn-brapto-hamburger:hover {
  background: #f1f5f9;
}

.brapto-header-brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brapto-brand-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

/* Desktop Delivery Location Badge */
.desktop-header-loc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}



.brapto-cart-badge {
  position: absolute;
  top: -2px;
  right: -3px;
  background: #eab308;
  color: #1e293b;
  font-size: 10px;
  font-weight: 800;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
}

/* 2. Official BrapTo Brand Hero Banner & Interactive Substrip (Full Viewport Width) */
.app-hero-section {
  width: 100% !important;
  max-width: 100vw !important;
  background: #ffc700 !important;
  margin: 0 !important;
  padding: 0 0 24px 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Official BrapTo Brand Hero Banner (Full Viewport Width, Seamless Yellow Canvas) */
.brapto-official-hero-card {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #ffc700 !important;
  box-shadow: none !important;
  border: none !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transform: none !important;
}

.brapto-official-hero-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.brapto-hero-banner-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: 0 !important;
  overflow: hidden !important;
  background: #ffc700 !important;
}

.brapto-hero-banner-img {
  width: 100% !important;
  max-width: 1360px !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  background: #ffc700 !important;
  margin: 0 auto !important;
}

.app-hero-controls-wrap {
  width: 100% !important;
  max-width: 820px !important;
  margin: 10px auto 0 auto !important;
  padding: 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

/* Compact Substrip: Location & 20-Min Fast Delivery */
.app-hero-substrip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 16px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1.5px solid #f1f5f9 !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04) !important;
  max-width: 760px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  gap: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

@media (min-width: 769px) {
  .app-hero-substrip {
    border-radius: 9999px !important;
    padding: 10px 22px !important;
  }
}

.hero-substrip-loc {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  min-width: 0 !important;
  flex: 1 !important;
  text-decoration: none !important;
}

.substrip-pin-badge {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease !important;
}

.hero-substrip-loc:hover .substrip-pin-badge {
  transform: scale(1.08) !important;
}

.substrip-loc-content {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}

.substrip-loc-eyebrow {
  color: #64748b !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.substrip-loc-name-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.substrip-loc-name {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px !important;
}

@media (max-width: 400px) {
  .substrip-loc-name {
    max-width: 125px !important;
  }
}

.substrip-loc-arrow {
  flex-shrink: 0 !important;
  color: #d97706 !important;
  transition: transform 0.15s ease !important;
}

.hero-substrip-loc:hover .substrip-loc-arrow {
  transform: translateY(1px) !important;
}

.hero-substrip-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #047857 !important;
  background: #ecfdf5 !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  border: 1px solid #a7f3d0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  letter-spacing: -0.15px !important;
}

.pulse-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
  animation: pulseGreen 1.8s infinite !important;
  flex-shrink: 0 !important;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}



/* Category Grid: 2 columns on Mobile, 4 columns on Desktop */
.app-category-grid-2x2 {
  display: grid;
  gap: 14px;
  margin: 0 auto 16px;
  width: 100%;
}

@media (max-width: 768px) {
  .app-category-grid-2x2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 480px;
  }
}

@media (min-width: 769px) {
  .app-category-grid-2x2 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1180px;
    gap: 24px;
    margin-bottom: 28px;
  }
}

/* High-Definition Vector-Crisp Category Cards */
.app-hd-cat-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  height: 195px !important;
  padding: 12px 12px 10px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

@media (min-width: 769px) {
  .app-hd-cat-card {
    height: 270px !important;
    border-radius: 24px !important;
    padding: 16px 16px 14px !important;
  }
}

.app-hd-cat-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Specific Card Color Schemes & Borders */
.app-hd-cat-card.card-grocery {
  background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 45%, #d1fae5 100%) !important;
  border: 1.5px solid #a7f3d0 !important;
}
.app-hd-cat-card.card-grocery:hover {
  border-color: #10b981 !important;
}

.app-hd-cat-card.card-veggies {
  background: linear-gradient(180deg, #ffffff 0%, #f7fee7 45%, #ecfccb 100%) !important;
  border: 1.5px solid #bef264 !important;
}
.app-hd-cat-card.card-veggies:hover {
  border-color: #84cc16 !important;
}

.app-hd-cat-card.card-fruits {
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 45%, #fef3c7 100%) !important;
  border: 1.5px solid #fde68a !important;
}
.app-hd-cat-card.card-fruits:hover {
  border-color: #f59e0b !important;
}

.app-hd-cat-card.card-hotels {
  background: linear-gradient(180deg, #ffffff 0%, #fff1f2 45%, #ffe4e6 100%) !important;
  border: 1.5px solid #fecdd3 !important;
}
.app-hd-cat-card.card-hotels:hover {
  border-color: #f43f5e !important;
}

/* Header: Clean readable top row */
.hd-card-header {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
}

.hd-card-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.hd-card-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.2px !important;
}

@media (min-width: 769px) {
  .hd-card-title {
    font-size: 1.35rem !important;
  }
}

.title-grocery { color: #065f46 !important; }
.title-veggies { color: #166534 !important; }
.title-fruits  { color: #9a3412 !important; }
.title-hotels  { color: #9f1239 !important; }

.hd-card-icon-wrap {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

@media (min-width: 769px) {
  .hd-card-icon-wrap {
    width: 32px !important;
    height: 32px !important;
  }
}

.app-hd-cat-card:hover .hd-card-icon-wrap {
  transform: scale(1.1) !important;
}

.icon-green  { border: 1px solid #a7f3d0 !important; color: #15803d !important; }
.icon-orange { border: 1px solid #fde68a !important; color: #ea580c !important; }
.icon-red    { border: 1px solid #fecdd3 !important; color: #dc2626 !important; }

/* Category Mini Tag (Never Truncates) */
.hd-card-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px !important;
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
}

.tag-grocery { color: #047857 !important; }
.tag-veggies { color: #3f6212 !important; }
.tag-fruits  { color: #b45309 !important; }
.tag-hotels  { color: #be123c !important; }

/* Artwork at Bottom */
.hd-card-artwork {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 68% !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.hd-card-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  display: block !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-hd-cat-card:hover .hd-card-img {
  transform: scale(1.06) !important;
}

/* Clean Gradient Overlay for pure contrast at top */
.hd-card-artwork::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 48% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Footer: Bottom Right Action Arrow */
.hd-card-footer {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hd-card-action-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

@media (min-width: 769px) {
  .hd-card-action-circle {
    width: 32px !important;
    height: 32px !important;
  }
}

.action-green  { border: 1.5px solid #10b981 !important; color: #10b981 !important; }
.action-orange { border: 1.5px solid #f59e0b !important; color: #ea580c !important; }
.action-red    { border: 1.5px solid #f43f5e !important; color: #dc2626 !important; }

.app-hd-cat-card:hover .hd-card-action-circle {
  transform: scale(1.12) translateX(1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* 5. Native High-Definition Vector Trust Strip */
.app-trust-strip-box {
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid #f1f5f9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  margin: 20px auto 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .app-trust-strip-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
    padding: 14px 12px;
    max-width: 480px;
    margin-top: 16px;
    border-radius: 18px;
  }
  .trust-divider {
    display: none;
  }
}

@media (min-width: 769px) {
  .app-trust-strip-box {
    max-width: 1180px;
    padding: 16px 28px;
    margin-top: 28px;
  }
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}



.sidebar-divider {
  border: none;
  border-top: 1px solid #f1f5f9;
  margin: 10px 0;
}










/* =========================================================================
   BRAPTO ULTRA-PREMIUM MODERN THEME & LAYOUT STYLES
   ========================================================================= */

/* 1. Desktop Location Badge & Nav Links (Desktop Only) */
.desktop-header-loc-badge {
  display: none !important;
}

@media (min-width: 769px) {
  .mobile-only-item {
    display: none !important;
  }
  .desktop-only-item {
    display: flex !important;
  }
  .desktop-nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .desktop-nav-link {
    text-decoration: none !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    letter-spacing: -0.15px !important;
    border: 1px solid transparent !important;
  }

  .desktop-nav-link:hover {
    background: #fefce8 !important;
    color: #b45309 !important;
    border-color: #fef08a !important;
    transform: translateY(-1px) !important;
  }

  .desktop-nav-link.active {
    background: #ffc700 !important;
    color: #0f172a !important;
    border-color: #facc15 !important;
    font-weight: 800 !important;
    box-shadow: 0 3px 10px rgba(255, 199, 0, 0.4) !important;
  }

  /* Header Right: Auth (Desktop Only) */
  .desktop-auth-wrap {
    display: flex !important;
    align-items: center !important;
  }

  .btn-desktop-signin {
    background: #ffc700 !important;
    color: #1e293b !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 8px 20px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(255, 199, 0, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .btn-desktop-signin:hover {
    background: #f59e0b !important;
    color: #1e293b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
  }

  .desktop-user-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
    color: #b45309 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
  }
}

.btn-header-notification,
.brapto-cart-btn {
  position: relative !important;
  background: none !important;
  border: none !important;
  padding: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1e293b !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease !important;
}

.btn-header-notification:hover,
.brapto-cart-btn:hover {
  background: #f1f5f9 !important;
}

.brapto-notif-badge {
  position: absolute !important;
  top: -2px !important;
  right: -3px !important;
  background: #eab308 !important;
  color: #1e293b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #ffffff !important;
}

/* 2. User Greeting Card */
.app-user-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 12px 18px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

@media (min-width: 769px) {
  .app-user-card {
    padding: 14px 22px !important;
  }
}

.app-user-display-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  font-family: 'Outfit', sans-serif !important;
}

.app-user-display-name.app-guest-label {
  color: #1e293b !important;
  font-weight: 800 !important;
}

.app-user-login-badge-btn {
  background: #ffc700 !important;
  color: #1e293b !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 5px 14px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(255, 199, 0, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.app-user-login-badge-btn:hover {
  background: #f59e0b !important;
  transform: translateY(-1px) !important;
}

.app-user-verified-badge {
  display: inline-flex !important;
  align-items: center !important;
}

.app-user-location-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  color: #475569 !important;
}

.app-user-loc-pin {
  flex-shrink: 0 !important;
}

.app-user-loc-text {
  font-weight: 600 !important;
  max-width: 220px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-user-loc-change-btn {
  background: none !important;
  border: none !important;
  color: #d97706 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  text-decoration: underline !important;
}

/* 3. Floating Pill Search Bar */
.app-search-bar-wrap {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.app-search-form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border-radius: 9999px !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  padding: 5px 6px 5px 16px !important;
  height: 48px !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (min-width: 769px) {
  .app-search-form {
    padding: 6px 8px 6px 20px !important;
    height: 52px !important;
  }
}

.app-search-form:focus-within {
  border-color: #ffc700 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 22px rgba(255, 199, 0, 0.3) !important;
}

.app-search-lens-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease !important;
}

.app-search-form:focus-within .app-search-lens-icon {
  color: #d97706 !important;
}

.app-search-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px !important;
  color: #0f172a !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 769px) {
  .app-search-input {
    font-size: 15px !important;
  }
}

.app-search-input::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  transition: opacity 0.25s ease !important;
}

.app-voice-mic-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ffc700 0%, #f59e0b 100%) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
}

.app-voice-mic-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45) !important;
}

.app-voice-mic-btn:active {
  transform: scale(0.92) !important;
}

/* 4. Heading Ornamental Accents */
.brapto-ornamental-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: -0.2px !important;
}

@media (min-width: 769px) {
  .brapto-ornamental-pill {
    font-size: 18px !important;
  }
}

.ornament-dots-left,
.ornament-dots-right {
  color: #f59e0b !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
}

.brapto-cat-subheading {
  font-size: 13px !important;
  color: #64748b !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
}

@media (min-width: 769px) {
  .brapto-cat-subheading {
    font-size: 15px !important;
    margin-top: 5px !important;
    margin-bottom: 24px !important;
  }
}

.text-highlight-green,
.text-highlight-yellow {
  color: #d97706 !important;
  font-weight: 800 !important;
}

/* 5. Trust Badges Strip */
.app-trust-strip-box {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1.5px solid #f1f5f9 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 24px !important;
  margin: 24px auto 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .app-trust-strip-box {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 10px !important;
    padding: 14px 12px !important;
    max-width: 480px !important;
    margin-top: 16px !important;
    border-radius: 18px !important;
  }
}

.trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}

.trust-item-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: #fefce8 !important;
  border: 1px solid #fef08a !important;
  border-radius: 14px !important;
  transition: transform 0.2s ease !important;
}

.trust-item:hover .trust-item-icon {
  transform: scale(1.08) !important;
}

.trust-item-content {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.25 !important;
}

.trust-item-title {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: -0.2px !important;
}

@media (max-width: 768px) {
  .trust-item-title {
    font-size: 0.84rem !important;
  }
}

.trust-item-desc {
  font-size: 0.74rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

@media (max-width: 768px) {
  .trust-item-desc {
    font-size: 0.7rem !important;
  }
}

.trust-divider {
  width: 1px !important;
  height: 36px !important;
  background: #e2e8f0 !important;
  margin: 0 16px !important;
  flex-shrink: 0 !important;
}

/* =========================================================================
   6. ULTRA-ATTRACTIVE MODERN MOBILE NAVIGATION DRAWER & TOPBAR
   ========================================================================= */

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

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

.brapto-sidebar-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 99999 !important;
  display: none;
}

.brapto-sidebar-drawer.open {
  display: block !important;
}

.sidebar-drawer-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  animation: fadeInOverlay 0.25s ease forwards !important;
}

.sidebar-drawer-content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 290px !important;
  max-width: 82vw !important;
  height: 100% !important;
  background: #ffffff !important;
  box-shadow: 6px 0 28px rgba(0, 0, 0, 0.16) !important;
  display: flex !important;
  flex-direction: column !important;
  animation: slideDrawerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

/* 1. Clean Branded Header (Single Logo Only, Clean White Background) */
.sidebar-drawer-header {
  background: #ffffff !important;
  padding: 16px 20px 14px 20px !important;
  min-height: 72px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.drawer-header-brand {
  display: flex !important;
  align-items: center !important;
}

.sidebar-brand-img {
  height: 48px !important;
  max-height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.btn-close-sidebar {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #1e293b !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}

.btn-close-sidebar:hover,
.btn-close-sidebar:active {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: scale(1.06) !important;
}

/* 2. Integrated User Strip */
.sidebar-user-strip {
  background: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.user-strip-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.user-strip-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.user-strip-guest-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.user-strip-text {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.user-strip-name {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.user-strip-tag {
  font-size: 0.68rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.user-strip-action {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.user-strip-action:active {
  background: #f1f5f9 !important;
}

/* 3. Navigation Items (Original Clean Icons) */
.sidebar-drawer-body {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
}

.sidebar-nav-item {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #334155 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  font-family: 'Outfit', sans-serif !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.sidebar-nav-svg {
  margin-right: 14px !important;
  flex-shrink: 0 !important;
  color: #64748b !important;
  transition: color 0.15s ease !important;
}

.sidebar-nav-label {
  flex: 1 !important;
}

.sidebar-nav-item:hover,
.sidebar-nav-item:active {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.sidebar-nav-item:hover .sidebar-nav-svg,
.sidebar-nav-item:active .sidebar-nav-svg {
  color: #0f172a !important;
}

.sidebar-nav-item.active {
  background: #fefce8 !important;
  color: #b45309 !important;
  font-weight: 700 !important;
  border-left: 3.5px solid #f59e0b !important;
}

.sidebar-nav-item.active .sidebar-nav-svg {
  color: #d97706 !important;
}

.sidebar-divider {
  border: none !important;
  border-top: 1px solid #f1f5f9 !important;
  margin: 8px 6px !important;
}

.sidebar-logout-item {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  color: #ef4444 !important;
  font-family: inherit !important;
}

.sidebar-logout-item .sidebar-nav-svg {
  color: #ef4444 !important;
}

.sidebar-logout-item:hover,
.sidebar-logout-item:active {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

/* 4. Subtle Footer */
.sidebar-drawer-footer {
  padding: 14px 18px !important;
  text-align: center !important;
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  border-top: 1px solid #f8fafc !important;
}

/* 4. Mobile Top Navigation Bar Tactile Polish */
@media (max-width: 768px) {
  .desktop-only-item,
  .desktop-auth-wrap,
  .desktop-header-loc-badge {
    display: none !important;
  }

  .mobile-only-item {
    display: flex !important;
  }

  .theme-brapto-yellow .brapto-yellow-topbar,
  .brapto-clean-header {
    padding: 8px 12px !important;
    background: #ffc700 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
  }

  .brapto-header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .brapto-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }

  .btn-brapto-hamburger {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
  }

  .btn-brapto-hamburger:active {
    transform: scale(0.92) !important;
    background: #e2e8f0 !important;
  }

  .brapto-header-brand-logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
  }

  .brapto-brand-logo-img,
  .brapto-header-brand-logo .brapto-brand-logo-img {
    height: 38px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  .brapto-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding-right: 4px !important;
    overflow: visible !important;
  }

  .btn-header-notification,
  .brapto-cart-btn {
    background: #ffffff !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
  }

  .btn-header-notification:active,
  .brapto-cart-btn:active {
    transform: scale(0.92) !important;
    background: #f8fafc !important;
  }

  .brapto-notif-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
  }

  .brapto-cart-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    background: #ffc700 !important;
    color: #0f172a !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
  }
}


/* =========================================================================
   BRAPTO PROMO BANNER, NEARBY SHOPS GRID & TRUST MARQUEE ULTRA-STYLING
   ========================================================================= */

/* 1. "Local Shops, Trusted by You" Promo Card */
.brapto-local-shops-promo-section {
  padding: 24px 0 16px 0 !important;
  background: #ffffff !important;
}

.local-shops-card {
  background: linear-gradient(135deg, #fffdf0 0%, #fefce8 50%, #fef08a 100%) !important;
  border: 1.5px solid #fef08a !important;
  border-radius: 26px !important;
  padding: 28px 36px !important;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.08) !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

.local-shops-grid {
  display: grid !important;
  grid-template-columns: 1.25fr 0.75fr !important;
  gap: 20px !important;
  align-items: center !important;
}

.local-shops-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.local-shops-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 2.1rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  color: #1e293b !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 8px 0 !important;
}

.local-shops-title .highlight-yellow,
.local-shops-title .highlight-green {
  color: #d97706 !important;
}

.local-shops-subtitle {
  font-size: 0.95rem !important;
  color: #475569 !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  margin: 0 0 18px 0 !important;
  max-width: 440px !important;
}

.local-shops-trust-pills {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.local-trust-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid #fde68a !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.trust-pill-icon {
  font-size: 0.95rem !important;
}

.local-shops-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.local-shops-basket-img {
  width: 100% !important;
  max-width: 240px !important;
  max-height: 240px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.08)) !important;
  transition: transform 0.3s ease !important;
}

.local-shops-card:hover .local-shops-basket-img {
  transform: translateY(-4px) scale(1.02) !important;
}

@media (max-width: 768px) {
  .local-shops-card {
    padding: 16px 14px !important;
    border-radius: 18px !important;
  }
  .local-shops-grid {
    grid-template-columns: 1.3fr 1fr !important;
    gap: 10px !important;
  }
  .local-shops-title {
    font-size: 1.35rem !important;
  }
  .local-shops-subtitle {
    font-size: 0.78rem !important;
    margin-bottom: 12px !important;
  }
  .local-shops-trust-pills {
    gap: 6px !important;
  }
  .local-trust-pill {
    padding: 4px 8px !important;
    font-size: 0.68rem !important;
  }
  .local-shops-basket-img {
    max-width: 150px !important;
    max-height: 150px !important;
  }
}

/* 2. "Popular Nearby Shops" Section & Cards */
.brapto-home-section {
  padding: 24px 0 !important;
}

.brapto-section-heading.brapto-heading-split {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
}

.brapto-heading-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
}

.brapto-view-all-link {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #b45309 !important;
  background: #fefce8 !important;
  border: 1px solid #fde68a !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.brapto-view-all-link:hover {
  background: #ffc700 !important;
  color: #1e293b !important;
}

.brapto-nearby-shops-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .brapto-nearby-shops-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Popular Nearby Shops: Modern Swipeable Carousel on Mobile & 4-Col Grid on Desktop */
.brapto-section-heading.brapto-heading-split {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

.brapto-heading-text-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.brapto-heading-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.2px !important;
}

.brapto-heading-subtitle {
  font-size: 0.8rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.brapto-view-all-link {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #d97706 !important;
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.brapto-view-all-link:hover {
  background: #ffc700 !important;
  color: #0f172a !important;
  border-color: #eab308 !important;
  transform: translateY(-1px) !important;
}

.brapto-nearby-shops-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .brapto-nearby-shops-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 8px 16px 20px 16px !important;
    margin: 0 -16px !important;
    scroll-padding-left: 16px !important;
  }

  .brapto-nearby-shops-grid::-webkit-scrollbar {
    display: none !important;
  }
}

.brapto-shop-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
  position: relative !important;
  text-decoration: none !important;
  color: inherit !important;
}

@media (max-width: 768px) {
  .brapto-shop-card {
    flex: 0 0 270px !important;
    max-width: 270px !important;
    scroll-snap-align: start !important;
  }
}

.brapto-shop-card:hover {
  transform: translateY(-4px) !important;
  border-color: #facc15 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 0 14px rgba(255, 199, 0, 0.25) !important;
}

.shop-card-cover {
  position: relative !important;
  width: 100% !important;
  height: 125px !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
}

@media (min-width: 769px) {
  .shop-card-cover {
    height: 135px !important;
  }
}

.shop-cover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.brapto-shop-card:hover .shop-cover-img {
  transform: scale(1.06) !important;
}

.shop-cover-gradient {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.35) 100%) !important;
  pointer-events: none !important;
}

.shop-cover-badges {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 2 !important;
  gap: 6px !important;
}

.shop-eta-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  backdrop-filter: blur(8px) !important;
  white-space: nowrap !important;
  letter-spacing: -0.1px !important;
}

.shop-eta-badge.eta-open {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #047857 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.shop-eta-badge.eta-closed {
  background: rgba(15, 23, 42, 0.85) !important;
  color: #f8fafc !important;
}

.shop-dist-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  white-space: nowrap !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
}

.shop-verified-chip {
  position: absolute !important;
  bottom: 8px !important;
  left: 10px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #15803d !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  z-index: 2 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.shop-card-info {
  padding: 12px 14px 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  background: #ffffff !important;
  gap: 6px !important;
}

.brapto-shop-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  min-height: 2.5em !important;
}

.shop-card-meta-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 12px !important;
}

.brapto-shop-rating-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: #16a34a !important;
  color: #ffffff !important;
  padding: 2.5px 7px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.3) !important;
}

.rating-star-icon {
  color: #fef08a !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.shop-meta-dot {
  color: #cbd5e1 !important;
  font-size: 11px !important;
}

.shop-category-text {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.shop-status-pill {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.shop-status-pill.status-open {
  color: #16a34a !important;
}

.shop-status-pill.status-closed {
  color: #ef4444 !important;
}

.shop-card-footer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
  gap: 6px !important;
}

.shop-footer-delivery-hint {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.shop-card-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #fefce8 !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
  padding: 4px 11px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.brapto-shop-card:hover .shop-card-action-btn {
  background: #ffc700 !important;
  border-color: #facc15 !important;
  color: #0f172a !important;
  transform: translateX(2px) !important;
}

.shop-card-action-btn svg {
  transition: transform 0.2s ease !important;
}

.brapto-shop-card:hover .shop-card-action-btn svg {
  transform: translateX(2px) !important;
}

/* 3. Bottom Trust & Quality Marquee Strip */
.brapto-trust-strip-section {
  padding: 16px 0 24px 0 !important;
  background: #ffffff !important;
  margin-top: auto !important;
  width: 100% !important;
  overflow: hidden !important;
}

.brapto-marquee-wrapper {
  background: #ffffff !important;
  border: 1.5px solid #eef2f6 !important;
  border-radius: 22px !important;
  padding: 10px 0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  position: relative !important;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent) !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent) !important;
}

.brapto-marquee-track {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: max-content !important;
  animation: trustMarqueeScroll 28s linear infinite !important;
  will-change: transform !important;
}

.trust-marquee-pill {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  padding: 8px 18px 8px 10px !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.trust-marquee-pill:hover {
  transform: translateY(-2px) !important;
  border-color: #ffc700 !important;
  box-shadow: 0 4px 12px rgba(255, 199, 0, 0.15) !important;
}

.trust-marquee-icon-box {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #fefce8 !important;
  border: 1px solid #fef08a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.trust-marquee-content {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}

.trust-marquee-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  letter-spacing: -0.2px !important;
}

.trust-marquee-desc {
  font-size: 0.72rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}


/* =========================================================================
   BRAPTO HEADER CLEAN CONTAINER & BRAND LOGO STYLING
   ========================================================================= */
.brapto-clean-header {
  background: #ffc700 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
  padding: 8px 0 !important;
}

.brapto-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.brapto-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.brapto-header-brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: transform 0.2s ease !important;
}

.brapto-header-brand-logo:hover {
  transform: scale(1.02) !important;
}

.brapto-brand-logo-img {
  height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 768px) {
  .brapto-brand-logo-img {
    height: 36px !important;
  }
}

/* ==========================================================================
   Hyperlocal Category & Store Discovery Page (category.php) Redesign
   ========================================================================== */

.category-discovery-wrapper {
  padding-top: 14px;
  padding-bottom: 40px;
}

/* 1. Header Bar with Back Button & Delivery Context */
.category-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.category-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
  text-decoration: none;
  transition: all 0.2s ease;
}

.category-back-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateX(-2px);
}

.category-back-btn:active {
  transform: scale(0.92);
}

.category-header-title-wrap {
  flex: 1;
  min-width: 0;
}

.category-screen-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

.category-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 0.8rem;
  color: #64748b;
}

.loc-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
  flex-shrink: 0;
}

.loc-chip-text {
  color: #334155;
  font-size: 0.82rem;
}

.loc-chip-text strong {
  color: #0f172a;
  font-weight: 700;
}

.loc-chip-count {
  color: #64748b;
  font-size: 0.8rem;
}

/* 2. Premium Category Selector Rail */
.category-slider-rail-wrap {
  position: relative;
  margin-bottom: 14px;
}

.category-slider-rail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-slider-rail::-webkit-scrollbar {
  display: none;
}

.cat-slider-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  background: transparent;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.cat-slider-tile:active {
  transform: scale(0.93);
}

.cat-tile-art-box {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
  position: relative;
  transition: all 0.2s ease;
  overflow: hidden;
}

.cat-art-all {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  color: #4338ca;
}

.cat-art-grocery {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.cat-art-vegetables {
  background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
}

.cat-art-fruits {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
}

.cat-art-restaurants {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

.cat-tile-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.1));
  transition: transform 0.25s ease;
}

.cat-slider-tile:hover .cat-tile-img {
  transform: scale(1.1);
}

.cat-tile-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Active Category Tile */
.cat-slider-tile.active .cat-tile-art-box {
  border-color: #16a34a;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.28), 0 0 0 3px rgba(22, 163, 74, 0.12);
  transform: translateY(-2px);
}

.cat-slider-tile.active .cat-tile-label {
  color: #16a34a;
  font-weight: 800;
}

/* 3. Subcategories Filter Rail */
.subcat-filter-container {
  margin-bottom: 16px;
}

.subcat-filter-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.subcat-filter-rail::-webkit-scrollbar {
  display: none;
}

.subcat-pill-chip {
  padding: 7px 15px;
  border-radius: 9999px;
  font-size: 0.83rem;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  text-decoration: none;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.subcat-pill-chip:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}

.subcat-pill-chip.active {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.2);
}

/* 4. Segmented Discovery Tabs Switcher */
.discovery-segmented-control {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 14px;
  margin-bottom: 18px;
  gap: 4px;
}

.discovery-segment-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  color: #64748b;
  transition: all 0.2s ease;
}

.discovery-segment-btn:hover {
  color: #0f172a;
}

.discovery-segment-btn.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.discovery-segment-btn.active svg {
  color: #16a34a;
}

.segment-counter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
  background: #e2e8f0;
  color: #475569;
}

.discovery-segment-btn.active .segment-counter-badge {
  background: #dcfce7;
  color: #15803d;
}

/* 5. Modern Shop Discovery Cards for category.php */
.category-shops-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .category-shops-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .category-shops-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.discovery-store-card {
  background: #ffffff;
  border: 1.5px solid #f1f5f9;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease;
  position: relative;
}

.discovery-store-card:hover {
  transform: translateY(-4px);
  border-color: #ffc700;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 0 12px rgba(255, 199, 0, 0.2);
}

.discovery-store-cover {
  position: relative;
  width: 100%;
  height: 155px;
  background: #f8fafc;
  overflow: hidden;
}

.discovery-store-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-store-card:hover .discovery-store-img {
  transform: scale(1.06);
}

.store-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.38) 0%, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.45) 100%);
  pointer-events: none;
}

.store-floating-badges-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.store-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.store-status-pill.status-open {
  background: rgba(255, 255, 255, 0.94);
  color: #047857;
}

.store-status-pill.status-closed {
  background: rgba(15, 23, 42, 0.85);
  color: #f87171;
}

.status-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.store-status-pill.status-closed .status-pulse-dot {
  background: #ef4444;
}

.store-eta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.94);
  color: #b45309;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.store-offer-ribbon {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(234, 88, 12, 0.94);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.store-distance-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #1e293b;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
  z-index: 2;
}

.discovery-store-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #ffffff;
  gap: 6px;
}

.store-body-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.store-title-col {
  flex: 1;
  min-width: 0;
}

.discovery-store-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
  line-height: 1.3;
}

.store-submeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #64748b;
  flex-wrap: wrap;
}

.store-cat-name {
  font-weight: 600;
  color: #475569;
}

.store-bullet {
  color: #cbd5e1;
}

.store-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #15803d;
  font-weight: 700;
  font-size: 0.75rem;
}

.store-rating-box {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #16a34a;
  color: #ffffff;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.store-address-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #64748b;
  margin: 2px 0 6px 0;
  line-height: 1.35;
}

.store-card-bottom-bar {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.store-min-order-info {
  display: flex;
  flex-direction: column;
}

.min-order-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
}

.store-free-del-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #16a34a;
}

.store-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  font-size: 0.8rem;
  font-weight: 800;
  transition: all 0.2s ease;
}

.discovery-store-card:hover .store-cta-pill {
  background: #ffc700;
  color: #000000;
  border-color: #ffc700;
}

.discovery-store-card:hover .store-cta-pill svg {
  transform: translateX(3px);
}

.store-cta-pill svg {
  transition: transform 0.2s ease;
}

/* ==========================================================================
   Quick-Commerce Product Storefront Grid & Modern Product Cards
   ========================================================================== */

.storefront-products-section {
  margin-top: 10px;
}

.grocery-storefront-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

@media (min-width: 640px) {
  .grocery-storefront-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

@media (min-width: 1024px) {
  .grocery-storefront-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
}

@media (min-width: 1280px) {
  .grocery-storefront-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
  }
}

.product-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1.5px solid #f1f5f9 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
}

.product-card:hover {
  transform: translateY(-3px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07) !important;
}

/* Product Image Box: Square & Proportional */
.product-card .product-img-box {
  position: relative !important;
  width: 100% !important;
  height: 140px !important;
  background: #ffffff !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid #f8fafc !important;
}

@media (max-width: 480px) {
  .product-card .product-img-box {
    height: 130px !important;
    padding: 8px !important;
  }
}

.product-card .product-img-box img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)) !important;
}

.product-card:hover .product-img-box img {
  transform: scale(1.06) !important;
}

/* Badges on Image Box */
.product-card .product-badge-discount {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: #16a34a !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  z-index: 2 !important;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.25) !important;
  letter-spacing: 0.2px !important;
}

.veg-mark-symbol {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 15px !important;
  height: 15px !important;
  border: 1.5px solid #16a34a !important;
  background: #ffffff !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.veg-mark-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #16a34a !important;
}

/* Product Info Content */
.product-card .product-info {
  padding: 10px 10px 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 2px !important;
  background: #ffffff !important;
}

.product-brand-tag {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
}

.product-card .product-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  min-height: 33px !important;
  max-height: 33px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin: 0 !important;
}

.product-unit-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-bottom: 4px !important;
}

.product-price-and-action {
  margin-top: auto !important;
  padding-top: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
}

.product-card .current-price {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1 !important;
}

.product-card .original-price {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  margin-left: 2px !important;
}

/* Add Button */
.product-card .btn-add-product {
  width: auto !important;
  min-width: 66px !important;
  padding: 5px 12px !important;
  background: #ffffff !important;
  color: #16a34a !important;
  border: 1.5px solid #16a34a !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.1) !important;
}

.product-card .btn-add-product:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(22, 163, 74, 0.25) !important;
}

/* Stepper */
.product-card .qty-stepper {
  display: none;
  align-items: center !important;
  justify-content: space-between !important;
  background: #16a34a !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 2px 4px !important;
  min-width: 66px !important;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
}

.product-card .qty-stepper .qty-btn {
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  width: 22px !important;
  height: 24px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.product-card .qty-stepper .qty-value {
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  color: #ffffff !important;
  padding: 0 4px !important;
}

/* Sticky Aisle Tabs Bar in shop.php */
.store-aisle-nav-sticky {
  margin-bottom: 18px !important;
  overflow-x: auto !important;
  display: flex !important;
  gap: 8px !important;
  padding: 4px 2px 8px 2px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.store-aisle-nav-sticky::-webkit-scrollbar {
  display: none !important;
}

.aisle-tab-btn {
  padding: 7px 16px !important;
  border-radius: 9999px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #475569 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.aisle-tab-btn:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
}

.aisle-tab-btn.active {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2) !important;
}

/* ==========================================================================
   BrapTo Interactive Ajax Notification Panel & Bottom-Sheet
   ========================================================================== */

.brapto-notif-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 1090;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

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

.brapto-notif-panel {
  position: fixed;
  z-index: 1095;
  background: #ffffff;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease;
}

/* Desktop Dropdown positioning (screens > 640px) */
@media (min-width: 641px) {
  .brapto-notif-panel {
    position: fixed;
    top: 72px;
    right: 32px;
    width: 380px;
    max-height: 520px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top right;
  }

  .brapto-notif-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
}

/* Mobile Bottom Sheet (screens <= 640px) */
@media (max-width: 640px) {
  .brapto-notif-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 80vh;
    border-radius: 24px 24px 0 0;
    border: none;
    border-top: 1px solid #e2e8f0;
    transform: translateY(100%);
  }

  .brapto-notif-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.notif-grab-bar {
  display: none;
}

@media (max-width: 640px) {
  .notif-grab-bar {
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 9999px;
    background: #cbd5e1;
    margin: 10px auto 0 auto;
  }
}

.notif-panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

.notif-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-bell-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-panel-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.notif-unread-pill {
  font-size: 10px;
  font-weight: 800;
  background: #fee2e2;
  color: #dc2626;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.2px;
}

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

.btn-mark-all-read {
  background: none;
  border: none;
  color: #16a34a;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.btn-mark-all-read:hover {
  background: #f0fdf4;
}

.btn-close-notif {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-close-notif:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.notif-panel-body {
  padding: 10px 14px;
  overflow-y: auto;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fafafa;
}

.notif-item-row {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #f1f5f9;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.notif-item-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  border-color: #cbd5e1;
}

.notif-item-row.unread {
  background: #ffffff;
  border-left: 3.5px solid #16a34a;
}

.notif-type-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.notif-type-offer { background: #fff7ed; color: #ea580c; }
.notif-type-delivery { background: #f0fdf4; color: #16a34a; }
.notif-type-fresh { background: #ecfdf5; color: #059669; }
.notif-type-order { background: #e0e7ff; color: #4338ca; }

.notif-content-col {
  flex: 1;
  min-width: 0;
}

.notif-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}

.notif-item-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

.notif-item-msg {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
  margin-bottom: 6px;
}

.notif-item-time {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 600;
}

/* Empty State */
.notif-empty-state {
  text-align: center;
  padding: 36px 16px;
  color: #64748b;
}

.notif-empty-icon {
  font-size: 2.4rem;
  margin-bottom: 8px;
}

.notif-empty-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.notif-empty-sub {
  font-size: 0.78rem;
  color: #64748b;
  max-width: 240px;
  margin: 0 auto;
}

.notif-panel-footer {
  padding: 10px 18px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

@media (min-width: 641px) {
  .notif-panel-footer {
    border-radius: 0 0 20px 20px;
  }
}

.notif-footer-text {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
}

.btn-notif-clear-all {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-notif-clear-all:hover {
  text-decoration: underline;
}

/* Skeleton Loading Shimmer */
.notif-loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}

.notif-skel-item {
  height: 64px;
  border-radius: 12px;
  background: #e2e8f0;
  position: relative;
  overflow: hidden;
}

.notif-skel-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: notifShimmer 1.2s infinite;
}

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

/* ==========================================================================
   27. BRAPTO USER HEADER AVATAR & FIRST NAME STYLES (MOBILE & DESKTOP)
   ========================================================================== */
.brapto-header-user-wrapper {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}


/* =========================================================================
   OFFICIAL BRAPTO YELLOW & GREEN BRAND IDENTITY THEME
   Header, Logo, Navigation, Search Button, Badges & Accents
   ========================================================================= */

/* Top Yellow Header & Clean Container */
.theme-brapto-yellow .brapto-yellow-topbar,
.brapto-clean-header {
  background: #ffc700 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Brand Logo (Crisp 3D Bevel with High Visibility) */
.brapto-header-brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.brapto-header-brand-logo:hover {
  transform: scale(1.03) !important;
}

.brapto-brand-logo-img {
  height: 44px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14)) !important;
}

@media (max-width: 768px) {
  .brapto-brand-logo-img {
    height: 38px !important;
    max-width: 170px !important;
  }
}

/* Mobile Hamburger Button (Clean White Rounded Pill) */
.btn-brapto-hamburger {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.15s ease, background-color 0.15s ease !important;
}

.btn-brapto-hamburger:hover {
  background: #f8fafc !important;
}

.btn-brapto-hamburger:active {
  transform: scale(0.92) !important;
}

/* Desktop Navigation Links (Translucent Capsule with Emerald Green Active Tab) */
.desktop-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  padding: 4px 6px !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.desktop-nav-link {
  text-decoration: none !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
  border-radius: 9999px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  letter-spacing: -0.2px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.desktop-nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #047857 !important;
}

.desktop-nav-link.active {
  background: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}

/* =========================================================================
   RIGHT HEADER ACTION BUTTONS: USER PROFILE, NOTIFICATION BELL & CART
   Guaranteed Perfect Horizontal & Vertical Alignment Across Mobile & Desktop
   ========================================================================= */

.brapto-header-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 40px !important;
}

.brapto-header-user-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Base Uniform Styling for All 3 Action Buttons */
.btn-header-notification,
.brapto-cart-btn {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

.btn-header-notification:hover,
.brapto-cart-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.btn-header-notification:active,
.brapto-cart-btn:active {
  transform: scale(0.92) !important;
}

.btn-header-notification svg,
.brapto-cart-btn svg {
  stroke: #0f172a !important;
}

/* Badges: Emerald Green (#059669) for Yellow-Green Brand Identity */
.brapto-notif-badge,
.brapto-cart-badge {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  background: #059669 !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  padding: 0 4px !important;
  line-height: 1 !important;
}

/* Header User Button (Default Mobile View: Exact 40x40 Matching Rounded Square) */
.brapto-header-user-btn {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

.brapto-header-user-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.brapto-header-user-btn:active {
  transform: scale(0.92) !important;
}

/* Avatar Circle centered inside the 40x40 button */
.brapto-header-user-btn .header-avatar-circle {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #fef08a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #16a34a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.brapto-header-user-btn .header-avatar-circle .header-avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

.brapto-header-user-btn .header-avatar-circle.guest-avatar {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

.brapto-header-user-btn .header-avatar-circle.guest-avatar svg {
  stroke: #0f172a !important;
}

/* On Mobile/Tablet: Hide any text completely so nothing overflows or peeks out */
.brapto-header-user-btn .header-user-firstname,
.brapto-header-user-btn .header-user-signin-text {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Desktop View (min-width: 992px): Expand into Beautiful Horizontal Capsule Pill */
@media (min-width: 992px) {
  .brapto-header-user-btn {
    width: auto !important;
    max-width: 200px !important;
    padding: 3px 14px 3px 4px !important;
    border-radius: 9999px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  .brapto-header-user-btn.user-guest {
    padding: 0 16px 0 10px !important;
    gap: 6px !important;
  }

  .brapto-header-user-btn .header-user-firstname,
  .brapto-header-user-btn .header-user-signin-text {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 120px !important;
  }
}

/* Full Viewport Width Yellow Hero Section */
.app-hero-section {
  width: 100% !important;
  max-width: 100vw !important;
  background: #ffc700 !important;
  padding: 0 0 24px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin: 0 !important;
}

/* Attached Floating Search Bar with Official Green Search Button */
.app-search-form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border-radius: 9999px !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
  padding: 5px 6px 5px 16px !important;
  height: 48px !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (min-width: 769px) {
  .app-search-form {
    padding: 6px 8px 6px 20px !important;
    height: 52px !important;
  }
}

.app-search-form:focus-within {
  border-color: #ffc700 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 22px rgba(255, 199, 0, 0.35) !important;
}

.app-search-lens-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease !important;
}

.app-search-form:focus-within .app-search-lens-icon {
  color: #059669 !important;
}

.app-search-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px !important;
  color: #0f172a !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 769px) {
  .app-search-input {
    font-size: 15px !important;
  }
}

.app-search-input::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.app-voice-mic-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin-right: 6px !important;
}

.app-voice-mic-btn:hover {
  background: #e2e8f0 !important;
  transform: scale(1.06) !important;
}

.app-search-submit-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: #059669 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
  color: #ffffff !important;
  padding: 0 !important;
}

.app-search-submit-btn:hover {
  background: #047857 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.45) !important;
}

.app-search-submit-btn:active {
  transform: scale(0.92) !important;
}

/* =========================================================================
   OFFICIAL AUTH POPUP MODAL STYLING (EXACT MATCH)
   ========================================================================= */
.auth-modal-card {
  border-radius: 28px !important;
  overflow: hidden !important;
  max-width: 400px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}

.auth-modal-hero-header {
  position: relative !important;
  background: #ffc700 !important;
  padding: 26px 16px 16px 16px !important;
  text-align: center !important;
  color: #0f172a !important;
  border-bottom-left-radius: 26px !important;
  border-bottom-right-radius: 26px !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.3) !important;
}

.auth-hero-close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.auth-hero-close-btn:hover {
  background: #0f172a !important;
  color: #ffc700 !important;
}

.auth-hero-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.auth-popup-logo-img {
  width: 100% !important;
  max-width: 330px !important;
  height: auto !important;
  max-height: 98px !important;
  object-fit: contain !important;
  display: block !important;
  filter: none !important;
}

.auth-hero-tagline {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 10px 0 0 0 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.35 !important;
}

.auth-segmented-tabs {
  display: flex !important;
  background: #fef9c3 !important;
  border: 1.5px solid #fde047 !important;
  border-radius: 9999px !important;
  padding: 3px !important;
  margin-bottom: 18px !important;
  gap: 4px !important;
}

.auth-seg-tab {
  flex: 1 !important;
  padding: 9px 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 9999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.auth-seg-tab.active {
  background: #0f172a !important;
  color: #fde047 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.phone-input-group {
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.phone-input-group:focus-within {
  border-color: #ffc700 !important;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.25) !important;
}

.phone-country-tag {
  background: #fef9c3 !important;
  border-right: 1.5px solid #cbd5e1 !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
}

.password-input-wrapper {
  position: relative !important;
}

.password-input-wrapper .form-control {
  padding-right: 42px !important;
}

.password-input-wrapper .btn-toggle-pwd {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 16px !important;
  opacity: 0.7 !important;
}

.form-control {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
}

.form-control:focus {
  border-color: #ffc700 !important;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.25) !important;
  outline: none !important;
}

.btn-hero-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: linear-gradient(180deg, #ffc700 0%, #f59e0b 100%) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 13px 20px !important;
  border-radius: 9999px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
  margin-top: 14px !important;
  transition: all 0.2s ease !important;
}

.btn-hero-cta svg {
  stroke: #0f172a !important;
}

.btn-hero-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
}

.btn-hero-cta:active {
  transform: scale(0.98) !important;
}

.auth-footer-switcher {
  text-align: center !important;
  margin-top: 14px !important;
  font-size: 13.5px !important;
  color: #64748b !important;
}

.auth-footer-switcher .btn-text-action {
  background: none !important;
  border: none !important;
  color: #059669 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  margin-left: 4px !important;
  text-decoration: underline !important;
}

/* =========================================================================
   BRAPTO ULTRA-PREMIUM STOREFRONT & DISCOVERY DESIGN SYSTEM
   Modern, quick-commerce UX matching Blinkit, Zepto, and Swiggy standards
   ========================================================================= */

/* 1. High-End Storefront Navigation & Locality Strip */
.storefront-nav-bar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 10px 0 !important;
  position: sticky !important;
  top: 60px !important;
  z-index: 90 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.storefront-nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.storefront-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px 7px 10px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 9999px !important;
  color: #0f172a !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.storefront-back-btn:hover {
  background: #f1f5f9 !important;
  transform: translateX(-2px) !important;
  color: #059669 !important;
}

.storefront-loc-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  max-width: 65% !important;
}

.storefront-loc-capsule:hover {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  transform: translateY(-1px) !important;
}

.loc-capsule-pin {
  color: #059669 !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.loc-capsule-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  line-height: 1.15 !important;
}

.loc-capsule-eyebrow {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #15803d !important;
  text-transform: uppercase !important;
}

.loc-capsule-address {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 260px !important;
}

.loc-capsule-dist {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #166534 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.loc-capsule-chevron {
  stroke: #15803d !important;
  flex-shrink: 0 !important;
}

/* Serviceability Toast Alert */
.store-service-alert {
  background: #fff1f2 !important;
  border-bottom: 1px solid #fecdd3 !important;
  padding: 10px 0 !important;
}

.service-alert-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.service-alert-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #9f1239 !important;
}

.service-alert-icon {
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.btn-service-change {
  background: #be123c !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: opacity 0.2s ease !important;
}

.btn-service-change:hover {
  opacity: 0.9 !important;
}

/* 2. Ultra-Premium Store Hero Luxury Card */
.store-hero-luxury-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  transition: box-shadow 0.3s ease !important;
}

.store-cover-wrap {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  background: #0f172a !important;
  overflow: hidden !important;
}

.store-cover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.92 !important;
  transform: scale(1) !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.store-hero-luxury-card:hover .store-cover-img {
  transform: scale(1.03) !important;
}

.store-cover-gradient-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.65) 100%) !important;
  pointer-events: none !important;
}

.store-floating-badges-top {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
}

.store-status-glass-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.status-live-pulse {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4) !important;
  animation: pulseGlow 1.8s infinite !important;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.store-status-glass-pill.status-closed .status-live-pulse {
  background: #ef4444 !important;
  box-shadow: none !important;
  animation: none !important;
}

.store-cat-glass-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #0f172a !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Store Body */
.store-card-body {
  padding: 0 24px 24px 24px !important;
  position: relative !important;
}

.store-primary-header {
  display: flex !important;
  align-items: flex-end !important;
  gap: 18px !important;
  margin-top: -38px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 5 !important;
}

.store-avatar-wrap {
  position: relative !important;
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 3.5px solid #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

.store-avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 15px !important;
  object-fit: cover !important;
  display: block !important;
}

.store-verified-shield {
  position: absolute !important;
  bottom: -4px !important;
  right: -4px !important;
  width: 22px !important;
  height: 22px !important;
  background: #10b981 !important;
  border: 2.5px solid #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4) !important;
}

.store-identity-col {
  flex: 1 !important;
  min-width: 0 !important;
  padding-top: 42px !important;
}

.store-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.store-main-title {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.store-cuisine-line {
  font-size: 13.5px !important;
  color: #64748b !important;
  margin: 6px 0 0 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.store-cat-tag {
  font-weight: 700 !important;
  color: #059669 !important;
}

.meta-bullet {
  color: #cbd5e1 !important;
}

.store-full-address {
  color: #475569 !important;
}

/* 3. Performance Metrics Strip (Unified 3-Column Luxury Display) */
.store-metrics-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  margin-bottom: 16px !important;
}

.store-metric-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.metric-top {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.metric-value {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
}

.metric-caption {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-top: 3px !important;
}

.store-metric-divider {
  width: 1px !important;
  height: 32px !important;
  background: rgba(0, 0, 0, 0.08) !important;
  flex-shrink: 0 !important;
}

/* 4. Featured Store Perk / Promo Offer Banner */
.store-offer-banner-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: linear-gradient(135deg, #fefce8 0%, #fff7ed 100%) !important;
  border: 1.5px dashed #f59e0b !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
}

.offer-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.offer-tag-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #fef08a !important;
  color: #b45309 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.offer-banner-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.25 !important;
}

.offer-main-deal {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #92400e !important;
}

.offer-sub-clause {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #b45309 !important;
  margin-top: 2px !important;
}

.offer-badge-pill {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  background: #f59e0b !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
}

/* 5. Sticky Aisle / Subcategory Pill Tabs */
.store-aisle-nav-sticky {
  position: sticky !important;
  top: 112px !important;
  z-index: 85 !important;
  background: #ffffff !important;
  padding: 10px 0 !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
}

.store-aisle-rail {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-bottom: 2px !important;
}

.store-aisle-rail::-webkit-scrollbar {
  display: none !important;
}

.aisle-tab-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-radius: 9999px !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.aisle-tab-pill:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.aisle-tab-pill.active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25) !important;
}

/* Responsive Overrides for Mobile (<768px) */
@media (max-width: 768px) {
  .storefront-nav-bar {
    top: 54px !important;
    padding: 8px 0 !important;
  }
  
  .storefront-back-btn .back-btn-text {
    display: none !important;
  }
  
  .storefront-back-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  .storefront-loc-capsule {
    max-width: 82% !important;
    padding: 5px 10px !important;
  }

  .loc-capsule-address {
    max-width: 140px !important;
  }

  .store-cover-wrap {
    height: 180px !important;
  }

  .store-card-body {
    padding: 0 16px 16px 16px !important;
  }

  .store-primary-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: -30px !important;
    margin-bottom: 14px !important;
  }

  .store-avatar-wrap {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 14px !important;
  }

  .store-avatar-img {
    border-radius: 12px !important;
  }

  .store-identity-col {
    padding-top: 0 !important;
    width: 100% !important;
  }

  .store-main-title {
    font-size: 1.35rem !important;
  }

  .store-metrics-strip {
    padding: 10px 8px !important;
    border-radius: 12px !important;
  }

  .metric-value {
    font-size: 0.95rem !important;
  }

  .metric-caption {
    font-size: 9.5px !important;
  }

  .store-offer-banner-card {
    padding: 10px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .offer-badge-pill {
    align-self: flex-start !important;
  }

  .store-aisle-nav-sticky {
    top: 100px !important;
  }
}

/* --------------------------------------------------------------------------
   Checkout Final Place Order CTA Button & Payment Modes (Phase 16 UX Fix)
   -------------------------------------------------------------------------- */
body.checkout-modal-open .mobile-bottom-appbar,
body.checkout-modal-open .mobile-floating-cart-pill {
  display: none !important;
}

#checkoutModal .modal-card {
  max-width: 490px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.35);
}

#checkoutModalBody {
  max-height: calc(85vh - 70px);
  overflow-y: auto;
  padding-bottom: 24px;
}

/* Payment Option Cards Modern Styling */
.payment-option-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 15px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none;
}

.payment-option-card:hover {
  transform: translateY(-1px);
}

.payment-option-card.active-online {
  border: 2px solid #2563eb !important;
  background: #f0f7ff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12) !important;
}

.payment-option-card.active-cod {
  border: 2px solid #16a34a !important;
  background: #f0fdf4 !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.14) !important;
}

/* Place Order CTA Button (High Contrast & Clear Visual Distinction) */
.btn-checkout-cta {
  width: 100% !important;
  min-height: 54px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.btn-checkout-cta:active {
  transform: scale(0.985) !important;
}

.btn-checkout-cta:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.5) !important;
  transform: none !important;
}

/* 1. Pay Online Mode: Royal Blue / Indigo with Glow */
.btn-checkout-cta.mode-online {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.38) !important;
}

.btn-checkout-cta.mode-online:hover:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  box-shadow: 0 8px 26px rgba(37, 99, 235, 0.48) !important;
}

/* 2. Cash on Delivery (COD) Mode: Vibrant Forest Green with Glow */
.btn-checkout-cta.mode-cod {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.40) !important;
}

.btn-checkout-cta.mode-cod:hover:not(:disabled) {
  background: linear-gradient(135deg, #15803d, #14532d) !important;
  box-shadow: 0 8px 26px rgba(22, 163, 74, 0.50) !important;
}

.checkout-btn-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.1px;
}

.checkout-btn-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.checkout-btn-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.22);
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 800;
  backdrop-filter: blur(4px);
}

.checkout-btn-arrow {
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.btn-checkout-cta:hover:not(:disabled) .checkout-btn-arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Cart Drawer Change Address Controls & Header Polish
   -------------------------------------------------------------------------- */
.cart-eta-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #fef9c3 !important;
  border-bottom: 1px solid #fef08a !important;
}

.cart-footer-address-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  padding: 8px 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}

.cart-footer-addr {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.cart-footer-addr-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.cart-footer-addr-text span {
  font-size: 0.72rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

.cart-footer-addr-text strong {
  font-size: 0.82rem !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.btn-cart-change-address {
  background: #ffffff !important;
  color: #15803d !important;
  border: 1.5px solid #86efac !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.btn-cart-change-address:hover {
  background: #f0fdf4 !important;
  border-color: #22c55e !important;
  color: #14532d !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(34, 197, 94, 0.15) !important;
}

.btn-cart-change-address:active {
  transform: scale(0.96) !important;
}

.btn-cart-change-top {
  padding: 4px 10px !important;
  font-size: 0.74rem !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.btn-cart-change-top:hover {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   Interactive Location Search Autocomplete & Real-Time Card
   ========================================================================== */
.loc-search-box-wrap #locSearchInputWrap:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  background: #ffffff !important;
}

#locSearchResultsDropdown {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

#locSearchResultsDropdown::-webkit-scrollbar {
  width: 6px;
}

#locSearchResultsDropdown::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.loc-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s ease;
}

.loc-search-result-item:last-child {
  border-bottom: none;
}

.loc-search-result-item:hover {
  background: #f8fafc;
}

.loc-result-pin {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.loc-result-info {
  flex: 1;
  min-width: 0;
}

.loc-result-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loc-result-subtitle {
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}