:root{
  --brand:#00a86b;
  --brand-2:#10b981;
  --brand-3:#34d399;
  --brand-dark:#00885a;
  --brand-deep:#046c4e;
  --accent:#f59e0b;
  --accent-2:#fbbf24;
  --danger:#ef4444;
  --warning:#f59e0b;
  --info:#3b82f6;
  --info-2:#60a5fa;
  --purple:#7c3aed;
  --purple-2:#8b5cf6;
  --pink:#ec4899;
  --success:#16a34a;
  --text:#1f2937;
  --text-soft:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --dark:#0f172a;
  --dark-2:#111827;
  --dark-3:#1e293b;
  --line:#e2e8f0;
  --border:#e5e7eb;
  --border-strong:#dbe3ee;
  --bg:#f8fafc;
  --bg-2:#f1f5f9;
  --bg-card:#ffffff;
  --bg-elevated:#ffffff;
  --bg-soft:#fcfefe;
  --glass:rgba(255,255,255,.70);
  --glass-strong:rgba(255,255,255,.88);
  --glass-border:rgba(255,255,255,.42);
  --overlay:rgba(15,23,42,.50);

  --shadow-2xs:0 1px 3px rgba(15,23,42,.04);
  --shadow-xs:0 2px 10px rgba(15,23,42,.05);
  --shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --shadow:0 14px 32px rgba(15,23,42,.08);
  --shadow-md:0 18px 44px rgba(15,23,42,.10);
  --shadow-lg:0 24px 60px rgba(15,23,42,.14);
  --shadow-xl:0 34px 84px rgba(15,23,42,.18);
  --shadow-brand:0 18px 38px rgba(0,168,107,.22);
  --shadow-brand-lg:0 24px 58px rgba(0,168,107,.28);
  --shadow-dark:0 24px 54px rgba(2,6,23,.24);

  --radius-2xl:34px;
  --radius-xl:28px;
  --radius-lg:24px;
  --radius:22px;
  --radius-md:18px;
  --radius-sm:14px;
  --radius-xs:10px;

  --ring:0 0 0 4px rgba(0,168,107,.12);
  --ring-soft:0 0 0 6px rgba(0,168,107,.08);

  --grad-brand:linear-gradient(135deg,var(--brand),var(--brand-dark));
  --grad-brand-2:linear-gradient(135deg,var(--brand),var(--brand-2),var(--brand-dark));
  --grad-brand-soft:linear-gradient(135deg,rgba(16,185,129,.16),rgba(59,130,246,.08));
  --grad-accent:linear-gradient(135deg,#fbbf24,#f59e0b);
  --grad-info:linear-gradient(135deg,#38bdf8,#2563eb);
  --grad-purple:linear-gradient(135deg,#8b5cf6,#7c3aed);
  --grad-danger:linear-gradient(135deg,#ef4444,#dc2626);
  --grad-dark:linear-gradient(135deg,#0f172a,#111827 60%,#0b1220);
  --grad-surface:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.90));
  --grad-hero:linear-gradient(135deg,#dcfff2 0%,#ffffff 54%,#fff7db 100%);
  --grad-premium:linear-gradient(135deg,#020617 0%,#0f172a 50%,#1e293b 100%);
  --grad-mesh:
    radial-gradient(circle at 12% 12%, rgba(16,185,129,.10), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(245,158,11,.10), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(59,130,246,.08), transparent 24%),
    radial-gradient(circle at 16% 84%, rgba(124,58,237,.08), transparent 24%);
}

body.dark-mode{
  --text:#e5e7eb;
  --text-soft:#cbd5e1;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --line:#1f2a3b;
  --border:#243041;
  --border-strong:#304055;
  --bg:#0b1220;
  --bg-2:#0f172a;
  --bg-card:#111827;
  --bg-elevated:#0f172a;
  --bg-soft:#111827;
  --glass:rgba(17,24,39,.70);
  --glass-strong:rgba(17,24,39,.90);
  --glass-border:rgba(255,255,255,.06);
  --overlay:rgba(2,6,23,.64);

  --shadow-2xs:0 1px 3px rgba(0,0,0,.10);
  --shadow-xs:0 2px 10px rgba(0,0,0,.14);
  --shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --shadow:0 14px 32px rgba(0,0,0,.28);
  --shadow-md:0 18px 44px rgba(0,0,0,.32);
  --shadow-lg:0 24px 60px rgba(0,0,0,.38);
  --shadow-xl:0 34px 84px rgba(0,0,0,.44);
  --shadow-brand:0 18px 38px rgba(0,168,107,.24);
  --shadow-brand-lg:0 24px 58px rgba(0,168,107,.30);
  --shadow-dark:0 24px 54px rgba(0,0,0,.44);

  --grad-surface:linear-gradient(180deg,rgba(17,24,39,.96),rgba(15,23,42,.94));
  --grad-hero:linear-gradient(135deg,rgba(0,168,107,.16),rgba(17,24,39,.96),rgba(245,158,11,.08));
  --grad-premium:linear-gradient(135deg,#020617 0%,#0f172a 54%,#111827 100%);
  --grad-mesh:
    radial-gradient(circle at 12% 12%, rgba(16,185,129,.10), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(245,158,11,.08), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(59,130,246,.08), transparent 24%),
    radial-gradient(circle at 16% 84%, rgba(124,58,237,.08), transparent 24%);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  line-height:1.5;
  letter-spacing:.01em;
  background:
    radial-gradient(circle at top right, rgba(0,168,107,.05), transparent 22%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.05), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(245,158,11,.04), transparent 24%),
    var(--grad-mesh),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .25s ease,color .25s ease;
}

::selection{
  background:rgba(0,168,107,.20);
  color:inherit;
}

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

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

button,
input,
select,
textarea{
  font:inherit;
}

h1,h2,h3,h4,h5,h6{
  color:var(--text);
  letter-spacing:-.03em;
}

p{
  color:inherit;
}

.container-fluid-wide{
  width:min(100%,1840px);
  margin:0 auto;
  padding:0 24px;
}

.layout-section{
  padding:28px 0 48px;
  position:relative;
}

/* ===== PREMIUM GLOBAL SURFACES ===== */
.card,
.left-panel,
.section-shell,
.subcat-chip-wrap,
.glass-panel,
.quick-view-card,
.command-card,
.side-drawer,
.chat-panel,
.quick-dock,
.purchase-ticker,
.boarding-pass-preview,
.mini-profile-card{
  background:var(--grad-surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

.card{
  overflow:hidden;
  position:relative;
}

.card::before,
.left-panel::before,
.section-shell::before,
.subcat-chip-wrap::before,
.glass-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 28%);
  opacity:.8;
}

body.dark-mode .card::before,
body.dark-mode .left-panel::before,
body.dark-mode .section-shell::before,
body.dark-mode .subcat-chip-wrap::before,
body.dark-mode .glass-panel::before{
  opacity:.18;
}

.card.border-0,
.shadow-sm{
  box-shadow:var(--shadow-sm) !important;
}

.card-header{
  background:transparent !important;
  border-bottom:1px solid var(--border) !important;
  color:var(--text);
  font-weight:800;
}

.card-body{
  position:relative;
  z-index:1;
}

.glass-panel{
  background:var(--glass);
  backdrop-filter:blur(16px);
  border-color:var(--glass-border);
}

.left-panel,
.section-shell,
.subcat-chip-wrap{
  padding:18px;
}

.left-sticky-stack{
  position:sticky;
  top:108px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.panel-head,
.section-head,
.drawer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.micro-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(59,130,246,.06));
  color:#047857;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid rgba(0,168,107,.12);
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}

body.dark-mode .micro-badge{
  color:#6ee7b7;
  border-color:rgba(16,185,129,.18);
  box-shadow:none;
}

.small-muted{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* ===== TOP STRIPS ===== */
.bg-success.text-white.py-2.border-bottom{
  position:relative;
  background:linear-gradient(90deg,#022c22,#065f46,#0f766e) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}

.bg-success.text-white.py-2.border-bottom::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,transparent 0%,rgba(255,255,255,.14) 18%,transparent 34%),
    radial-gradient(circle at 90% 50%, rgba(255,255,255,.08), transparent 20%);
  pointer-events:none;
}

.bg-success.text-white.py-2.border-bottom .badge.text-bg-warning{
  color:#111827 !important;
  font-weight:900;
}

.bg-success.text-white.py-2.border-bottom .badge.text-bg-dark{
  background:rgba(2,6,23,.78) !important;
  border:1px solid rgba(255,255,255,.08);
}

.bg-white.border-bottom.py-2{
  background:var(--glass-strong) !important;
  backdrop-filter:blur(12px);
  border-color:var(--border) !important;
}

/* ===== HEADER ===== */
header.bg-white.sticky-top{
  z-index:1030;
  background:var(--glass-strong) !important;
  backdrop-filter:blur(16px);
  border-color:var(--border) !important;
  box-shadow:0 10px 32px rgba(15,23,42,.06);
}

body.dark-mode header.bg-white.sticky-top{
  box-shadow:0 10px 32px rgba(0,0,0,.28);
}

header .bg-success.text-white.rounded-circle{
  background:var(--grad-brand-2) !important;
  box-shadow:var(--shadow-brand);
}

header .fw-bold.fs-5{
  color:var(--brand);
  letter-spacing:-.03em;
}

header .input-group{
  position:relative;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-card);
  box-shadow:var(--shadow);
}

header .input-group::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 40%);
}

header .input-group .form-control,
header .input-group .btn{
  border:0 !important;
  box-shadow:none !important;
  background:transparent;
  color:var(--text);
  position:relative;
  z-index:1;
}

header .input-group .form-control::placeholder{
  color:var(--muted);
}

header .badge.text-bg-light.border{
  box-shadow:var(--shadow-2xs);
}

header .btn.position-relative .badge,
header .btn.btn-success.position-relative .badge{
  box-shadow:0 10px 24px rgba(239,68,68,.28);
}

header .btn-outline-dark.rounded-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

header .btn-outline-dark.rounded-pill strong{
  margin-left:4px;
}

/* ===== MAIN HERO ===== */
.card.border-0.shadow-sm.overflow-hidden{
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg) !important;
}

.card.border-0.shadow-sm.overflow-hidden > .card-body{
  background:var(--grad-hero);
  position:relative;
  overflow:hidden;
}

.card.border-0.shadow-sm.overflow-hidden > .card-body::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 86% 12%, rgba(245,158,11,.16), transparent 20%),
    radial-gradient(circle at 14% 86%, rgba(0,168,107,.10), transparent 24%),
    linear-gradient(120deg,transparent 0%,rgba(255,255,255,.16) 18%,transparent 36%);
}

.card.border-0.shadow-sm.overflow-hidden > .card-body::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-120px;
  top:-140px;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 58%);
  pointer-events:none;
  filter:blur(8px);
}

.card.border-0.shadow-sm.overflow-hidden > .card-body > .row{
  position:relative;
  z-index:1;
}

.card.border-0.shadow-sm.overflow-hidden h1{
  font-size:clamp(2rem,3vw,3.15rem);
  line-height:1.05;
  letter-spacing:-.05em;
  margin-bottom:1rem;
}

.card.border-0.shadow-sm.overflow-hidden p{
  font-size:1rem;
  max-width:64ch;
}

.card.border-0.shadow-sm.overflow-hidden .badge.text-bg-success{
  background:var(--grad-brand-2) !important;
  color:#fff !important;
  border:none;
  box-shadow:var(--shadow-brand);
}

.card.border-0.shadow-sm.overflow-hidden .border.rounded.p-3.h-100{
  background:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.42) !important;
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-xs);
}

body.dark-mode .card.border-0.shadow-sm.overflow-hidden .border.rounded.p-3.h-100{
  background:rgba(17,24,39,.52);
  border-color:rgba(255,255,255,.06) !important;
  box-shadow:none;
}

/* ===== BUTTONS ===== */
.btn{
  border-radius:999px;
  font-weight:800;
  letter-spacing:.01em;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    opacity .22s ease;
  will-change:transform;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
}

.btn:focus,
.btn:focus-visible{
  box-shadow:var(--ring) !important;
  outline:none;
}

.btn-success,
.btn.btn-brand{
  background:var(--grad-brand-2);
  border-color:transparent;
  color:#fff;
}

.btn-success:hover,
.btn.btn-brand:hover{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand),var(--brand-deep));
  border-color:transparent;
  color:#fff;
  box-shadow:var(--shadow-brand);
}

.btn-success:active,
.btn.btn-brand:active{
  box-shadow:0 10px 22px rgba(0,168,107,.20);
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-warning,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-light{
  background:var(--bg-card);
  color:var(--text);
  border-color:var(--border);
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-primary:hover,
.btn-outline-warning:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-light:hover{
  background:var(--bg-card);
  border-color:rgba(0,168,107,.35);
  color:var(--brand);
  box-shadow:var(--shadow-sm);
}

.btn-outline-primary:hover{
  border-color:rgba(59,130,246,.32);
  color:var(--info);
}

.btn-outline-danger:hover{
  border-color:rgba(239,68,68,.28);
  color:var(--danger);
}

.btn-outline-warning:hover{
  border-color:rgba(245,158,11,.32);
  color:#b45309;
}

/* ===== FORMS ===== */
.form-control,
.form-select,
textarea{
  border:1px solid var(--border);
  color:var(--text);
  background:var(--bg-card);
  border-radius:16px !important;
  box-shadow:none !important;
  min-height:46px;
}

.form-control::placeholder,
textarea::placeholder{
  color:var(--muted);
}

.form-control:focus,
.form-select:focus,
textarea:focus{
  border-color:rgba(0,168,107,.45);
  box-shadow:var(--ring), var(--shadow-xs) !important;
  background:var(--bg-card);
  color:var(--text);
}

.form-range{
  accent-color:var(--brand);
}

.form-check-input{
  border-color:var(--border);
}

.form-check-input:checked{
  background-color:var(--brand);
  border-color:var(--brand);
}

.form-check-input:focus{
  box-shadow:var(--ring);
}

.input-group > .btn,
.input-group > .form-control,
.input-group > .form-select{
  position:relative;
}

/* ===== BADGES / CHIPS ===== */
.badge{
  border-radius:999px;
  padding:.56rem .82rem;
  font-weight:800;
  letter-spacing:.02em;
}

.text-bg-light.border,
.badge.text-bg-light{
  background:var(--bg-card) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
}

.text-bg-success{
  background:var(--grad-brand-2) !important;
  color:#fff !important;
}

.text-bg-primary{
  background:var(--grad-info) !important;
  color:#fff !important;
}

.text-bg-danger{
  background:var(--grad-danger) !important;
  color:#fff !important;
}

.text-bg-warning{
  background:var(--grad-accent) !important;
  color:#111827 !important;
}

.text-bg-dark{
  background:var(--grad-dark) !important;
  color:#fff !important;
}

.text-bg-info{
  background:var(--grad-info) !important;
  color:#fff !important;
}

.brand-chip-wrap,
#recentSearchChipWrap,
#activeFilterBadges,
#selectedCategoryPath{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.brand-chip,
.keyword-chip,
.path-chip,
.active-badge,
.compare-chip,
.addon-chip,
.checkout-step,
.quick-dock-btn,
.payment-method{
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text);
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
  font-weight:800;
  transition:.2s ease;
  box-shadow:var(--shadow-2xs);
}

.brand-chip.active,
.brand-chip:hover,
.keyword-chip:hover,
.quick-dock-btn:hover,
.payment-method.active,
.checkout-step.active,
.addon-chip.active,
.path-chip.active,
.active-badge.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:0 12px 24px rgba(0,168,107,.18);
}

.path-chip{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-soft));
}

/* ===== CATEGORY TREE ===== */
#categoryTree .category-top-btn,
#categoryTree .mid-category-btn,
#categoryTree .end-category-btn{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-card),var(--bg-soft));
  color:var(--text);
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:.22s ease;
  box-shadow:var(--shadow-2xs);
}

#categoryTree .category-top-btn{
  border-radius:16px;
  padding:13px 14px;
  font-weight:800;
  margin-bottom:10px;
}

#categoryTree .mid-category-btn,
#categoryTree .end-category-btn{
  border-radius:14px;
  padding:10px 12px;
  font-weight:700;
  margin-bottom:8px;
}

#categoryTree .category-top-btn.active,
#categoryTree .category-top-btn:hover,
#categoryTree .mid-category-btn.active,
#categoryTree .mid-category-btn:hover,
#categoryTree .end-category-btn.active,
#categoryTree .end-category-btn:hover{
  background:var(--brand-soft);
  color:#047857;
  border-color:#b7ebd2;
  box-shadow:0 10px 22px rgba(0,168,107,.08);
}

body.dark-mode #categoryTree .category-top-btn.active,
body.dark-mode #categoryTree .category-top-btn:hover,
body.dark-mode #categoryTree .mid-category-btn.active,
body.dark-mode #categoryTree .mid-category-btn:hover,
body.dark-mode #categoryTree .end-category-btn.active,
body.dark-mode #categoryTree .end-category-btn:hover{
  color:#6ee7b7;
}

#categoryTree .mid-category-wrap,
#categoryTree .end-category-wrap,
.module-panel{
  display:none;
}

#categoryTree .mid-category-wrap.show,
#categoryTree .end-category-wrap.show,
.module-panel.active{
  display:block;
}

/* ===== TABLES / LISTS ===== */
.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--text);
  --bs-table-border-color:var(--border);
  color:var(--text);
}

.table thead th{
  color:var(--muted);
  font-size:.80rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-color:var(--border);
  padding-top:14px;
  padding-bottom:14px;
}

.table tbody td{
  border-color:var(--border);
  vertical-align:middle;
}

.table-responsive{
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
}

.list-group{
  border-radius:18px;
  overflow:hidden;
}

.list-group-item{
  background:var(--bg-card);
  color:var(--text);
  border-color:var(--border);
  transition:background .2s ease, color .2s ease;
}

.list-group-item:hover{
  background:var(--brand-soft);
}

/* ===== MINI TILES / SURFACE BOXES ===== */
.border.rounded,
.border.rounded.p-3,
.border.rounded.p-2,
.border.rounded.h-100,
.border.rounded.p-4,
.border.rounded.mb-3,
.border.rounded.p-3.h-100{
  border-color:var(--border) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    var(--shadow-2xs);
}

body.dark-mode .border.rounded,
body.dark-mode .border.rounded.p-3,
body.dark-mode .border.rounded.p-2,
body.dark-mode .border.rounded.h-100,
body.dark-mode .border.rounded.p-4,
body.dark-mode .border.rounded.mb-3,
body.dark-mode .border.rounded.p-3.h-100{
  background:linear-gradient(180deg,rgba(17,24,39,.92),rgba(15,23,42,.96));
  box-shadow:none;
}

.bg-light{
  background:linear-gradient(135deg,#eafaf3,#f8fafc) !important;
}

body.dark-mode .bg-light{
  background:linear-gradient(135deg,rgba(0,168,107,.14),rgba(148,163,184,.07)) !important;
}

/* ===== PRODUCT GRID ULTRA ===== */
#productGrid > [class*="col-"]{
  display:flex;
}

.product-card{
  position:relative;
  width:100%;
  height:100%;
  padding:10px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--bg-card),var(--bg-soft));
  border:1px solid var(--border);
  border-radius:22px;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
}

.product-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 26%);
  pointer-events:none;
}

.product-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:0;
  transition:opacity .2s ease;
}

.product-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:rgba(0,168,107,.22);
  filter:saturate(1.02);
}

.product-card:hover::after{
  opacity:1;
}

.product-thumb,
.recommended-mini-thumb{
  border-radius:18px;
  display:grid;
  place-items:center;
  color:var(--brand);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.52), transparent 34%),
    linear-gradient(135deg,#e2f8ef,#f8fafc);
  position:relative;
  overflow:hidden;
}

.product-thumb::before,
.recommended-mini-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.18) 25%,transparent 42%);
  pointer-events:none;
}

.product-thumb{
  height:152px;
  font-size:34px;
  margin-bottom:10px;
}

.recommended-mini-thumb{
  height:74px;
  font-size:24px;
  margin-bottom:10px;
}

body.dark-mode .product-thumb,
body.dark-mode .recommended-mini-thumb{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.04), transparent 34%),
    linear-gradient(135deg,rgba(0,168,107,.18),rgba(148,163,184,.08));
}

.offer-ribbon,
.stock-badge,
.product-badge,
.wishlist-btn,
.quick-btn,
.compare-btn,
.promo-timer{
  position:absolute;
  z-index:2;
}

.offer-ribbon{
  top:8px;
  left:8px;
  font-size:9px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(90deg,#ef4444,#f97316);
  padding:4px 8px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(239,68,68,.24);
}

.promo-timer{
  top:32px;
  left:8px;
  font-size:9px;
  font-weight:900;
  padding:4px 7px;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  box-shadow:var(--shadow-xs);
}

.product-badge{
  bottom:8px;
  left:8px;
  font-size:9px;
  font-weight:900;
  color:#fff;
  background:var(--grad-purple);
  padding:4px 8px;
  border-radius:999px;
  box-shadow:0 10px 20px rgba(124,58,237,.18);
}

.stock-badge{
  top:8px;
  right:8px;
  font-size:9px;
  font-weight:900;
  color:#0f172a;
  background:rgba(255,255,255,.97);
  padding:4px 8px;
  border-radius:999px;
  box-shadow:var(--shadow-xs);
}

.wishlist-btn,
.quick-btn,
.compare-btn,
.icon-circle-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}

.icon-circle-btn{
  box-shadow:var(--shadow-2xs);
}

.icon-circle-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.wishlist-btn,
.quick-btn,
.compare-btn{
  width:30px;
  height:30px;
  font-size:11px;
  background:rgba(255,255,255,.96);
  color:#334155;
  box-shadow:var(--shadow-2xs);
  backdrop-filter:blur(8px);
}

body.dark-mode .wishlist-btn,
body.dark-mode .quick-btn,
body.dark-mode .compare-btn{
  background:rgba(15,23,42,.94);
  color:#cbd5e1;
}

.wishlist-btn:hover,
.quick-btn:hover,
.compare-btn:hover{
  transform:scale(1.08);
  box-shadow:var(--shadow-sm);
}

.wishlist-btn{
  right:8px;
  bottom:74px;
}

.quick-btn{
  right:8px;
  bottom:40px;
}

.compare-btn{
  right:8px;
  bottom:8px;
}

.wishlist-btn.active{
  color:#ef4444;
  background:#fff1f2;
  border-color:#fecdd3;
}

.compare-btn.active{
  color:#7c3aed;
  background:#f5f3ff;
  border-color:#ddd6fe;
}

.small-circle{
  width:32px;
  height:32px;
}

.product-tag,
.sub-tag,
.micro-tag,
.discount-badge{
  display:inline-block;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  padding:3px 7px;
}

.product-tag{
  background:#eff6ff;
  color:#1d4ed8;
}

.sub-tag,
.micro-tag{
  background:#f8fafc;
  color:#475569;
  border:1px solid #e2e8f0;
}

.discount-badge{
  background:#fee2e2;
  color:#b91c1c;
}

.product-name{
  font-size:13px;
  line-height:1.35;
  min-height:34px;
  margin-bottom:5px;
  font-weight:800;
  color:var(--text);
}

.product-brand{
  font-size:11px;
  color:var(--muted);
  margin-bottom:6px;
}

.price{
  font-size:17px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--text);
}

.old-price{
  font-size:10px;
  color:var(--muted-2);
  text-decoration:line-through;
}

.rating-line{
  font-size:10px;
  color:#475569;
}

.progress-thin{
  height:5px;
  border-radius:999px;
  background:#edf2f7;
  overflow:hidden;
  margin:8px 0 10px;
}

.progress-thin span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--brand),#34d399);
}

/* ===== TIMELINES / STATUS ===== */
.progress{
  border-radius:999px;
  background:#edf2f7;
  overflow:hidden;
}

.progress-bar{
  border-radius:999px;
}

.timeline-step{
  position:relative;
  padding:10px 12px 10px 34px;
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:10px;
  background:linear-gradient(180deg,var(--bg-card),var(--bg-soft));
  color:var(--muted);
  font-weight:700;
  box-shadow:var(--shadow-2xs);
}

.timeline-step::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translateY(-50%);
  background:#cbd5e1;
  box-shadow:0 0 0 4px rgba(203,213,225,.20);
}

.timeline-step.active{
  color:var(--text);
  border-color:#b7ebd2;
  background:var(--brand-soft);
}

.timeline-step.active::before{
  background:var(--brand);
  box-shadow:0 0 0 5px rgba(0,168,107,.12);
}

.checkout-steps{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.payment-method-list{
  display:grid;
  gap:10px;
}

.payment-method{
  display:block;
}

.address-item.active{
  border-color:var(--brand);
  background:var(--brand-soft);
  box-shadow:0 10px 22px rgba(0,168,107,.08);
}

/* ===== STATE BOXES ===== */
.activity-item,
.cart-item,
.compare-item,
.recent-item,
.order-card,
.favorite-rest-card,
.coupon-wallet-item,
.service-status-item,
.address-item,
.smart-empty-box{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  margin-bottom:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.96));
  box-shadow:var(--shadow-2xs);
}

body.dark-mode .activity-item,
body.dark-mode .cart-item,
body.dark-mode .compare-item,
body.dark-mode .recent-item,
body.dark-mode .order-card,
body.dark-mode .favorite-rest-card,
body.dark-mode .coupon-wallet-item,
body.dark-mode .service-status-item,
body.dark-mode .address-item,
body.dark-mode .smart-empty-box{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.03));
  box-shadow:none;
}

/* ===== DRAWERS ===== */
.side-drawer{
  position:fixed;
  top:0;
  right:-390px;
  width:370px;
  height:100vh;
  z-index:1090;
  padding:18px;
  display:flex;
  flex-direction:column;
  transition:right .3s ease;
  background:var(--glass-strong);
  backdrop-filter:blur(18px);
  border-left:1px solid var(--border-strong);
  box-shadow:var(--shadow-xl);
}

.side-drawer.open{
  right:0;
}

.drawer-header{
  margin-bottom:6px;
}

.drawer-body{
  flex:1;
  overflow:auto;
  padding-top:10px;
}

.drawer-footer{
  border-top:1px solid var(--border);
  padding-top:14px;
  margin-top:8px;
}

.drawer-overlay{
  position:fixed;
  inset:0;
  background:var(--overlay);
  z-index:1085;
  display:none;
  backdrop-filter:blur(3px);
}

.drawer-overlay.show{
  display:block;
}

/* ===== MODALS / COMMAND ===== */
.quick-view-modal,
.command-palette{
  position:fixed;
  inset:0;
  z-index:1100;
  display:none;
  align-items:center;
  justify-content:center;
  background:var(--overlay);
  padding:18px;
  backdrop-filter:blur(4px);
}

.quick-view-modal.show,
.command-palette.show{
  display:flex;
}

.quick-view-card{
  max-width:980px;
  width:100%;
  padding:24px;
  background:var(--glass-strong);
  backdrop-filter:blur(18px);
  border-color:var(--glass-border);
  box-shadow:var(--shadow-xl);
}

.command-card{
  width:min(100%,720px);
  padding:18px;
  background:var(--glass-strong);
  backdrop-filter:blur(18px);
  border-color:var(--glass-border);
  box-shadow:var(--shadow-xl);
}

#commandInput{
  background:transparent !important;
  color:var(--text) !important;
}

/* ===== TOAST ===== */
.toast-box{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:1200;
  min-width:260px;
  max-width:340px;
  display:none;
  background:linear-gradient(135deg,#0f172a,#111827);
  color:#fff;
  padding:14px 16px;
  border-radius:18px;
  box-shadow:var(--shadow-xl);
  border:1px solid rgba(255,255,255,.06);
}

.toast-box.show{
  display:block;
}

/* ===== LIVE CHAT ===== */
#liveChatWidget{
  position:fixed;
  left:20px;
  bottom:90px;
  z-index:1089;
}

.chat-toggle-btn{
  width:58px;
  height:58px;
  border-radius:50%;
  border:0;
  background:var(--grad-brand-2);
  color:#fff;
  box-shadow:var(--shadow-brand);
}

.chat-panel{
  width:320px;
  display:none;
  margin-bottom:12px;
  overflow:hidden;
  background:var(--glass-strong);
  backdrop-filter:blur(16px);
  border-color:var(--glass-border);
  box-shadow:var(--shadow-lg);
}

.chat-panel.open{
  display:block;
}

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

.chat-messages{
  height:260px;
  overflow:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chat-msg{
  max-width:80%;
  padding:10px 12px;
  border-radius:14px;
  box-shadow:var(--shadow-2xs);
}

.chat-msg.agent{
  background:#eef2ff;
  align-self:flex-start;
  color:#1e293b;
}

.chat-msg.user{
  background:var(--brand-soft);
  align-self:flex-end;
}

.chat-input-row{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid var(--border);
}

/* ===== FLOATING ACTIONS ===== */
.floating-cart-extended,
.floating-help-extended{
  position:fixed;
  right:18px;
  z-index:1080;
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  border-radius:18px;
  padding:12px 14px;
  box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.floating-cart-extended:hover,
.floating-help-extended:hover,
.floating-whatsapp-btn:hover,
.back-to-top:hover{
  transform:translateY(-2px);
  filter:saturate(1.03);
}

.floating-cart-extended{
  bottom:96px;
  background:var(--grad-brand-2);
  color:#fff;
  box-shadow:var(--shadow-brand-lg);
}

.floating-help-extended{
  bottom:22px;
  background:var(--glass-strong);
  color:var(--text);
  border:1px solid var(--border);
  backdrop-filter:blur(12px);
}

.floating-cart-icon,
.floating-help-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:20px;
}

.floating-cart-icon{
  background:rgba(255,255,255,.16);
}

.floating-help-icon{
  background:var(--brand-soft);
  color:var(--brand);
}

.floating-cart-meta,
.floating-help-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
  font-size:12px;
}

.floating-whatsapp-btn{
  position:fixed;
  right:18px;
  bottom:170px;
  width:56px;
  height:56px;
  border:0;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  font-size:24px;
  box-shadow:var(--shadow-lg);
  z-index:1083;
}

.back-to-top{
  position:fixed;
  right:20px;
  bottom:240px;
  z-index:1082;
  width:52px;
  height:52px;
  border:0;
  border-radius:50%;
  background:#0f172a;
  color:#fff;
  display:none;
  box-shadow:var(--shadow-lg);
}

/* ===== QUICK DOCK / BOTTOM MOBILE ===== */
.quick-dock{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  padding:14px;
  position:relative;
}

.quick-dock-btn{
  min-height:88px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.purchase-ticker{
  padding:14px 16px;
  font-weight:700;
}

.bottom-mobile-nav{
  display:none;
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:1081;
  padding:10px 14px;
  background:var(--glass-strong);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(16px);
}

/* ===== PAGINATION ===== */
.custom-pagination .page-link{
  border-radius:999px;
  margin:0 4px;
  border:1px solid var(--border);
  color:var(--text);
  background:var(--bg-card);
  min-width:42px;
  text-align:center;
  box-shadow:var(--shadow-2xs);
}

.custom-pagination .page-link:hover{
  border-color:rgba(0,168,107,.35);
  color:var(--brand);
}

.custom-pagination .page-item.active .page-link,
.custom-pagination .active .page-link{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  box-shadow:0 12px 24px rgba(0,168,107,.18);
}

/* ===== FOOTER ===== */
footer.bg-dark.text-white{
  background:var(--grad-dark) !important;
  color:#cbd5e1 !important;
  margin-top:42px;
  border-top:1px solid rgba(255,255,255,.05);
  position:relative;
  overflow:hidden;
}

footer.bg-dark.text-white::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(16,185,129,.08), transparent 24%),
    radial-gradient(circle at 90% 15%, rgba(59,130,246,.08), transparent 24%);
  pointer-events:none;
}

footer .form-control{
  background:#fff;
  color:#111827;
}

footer .btn-outline-light{
  border-radius:14px;
}

footer span{
  transition:.2s ease;
}

footer span:hover{
  color:#fff;
}

hr.border-secondary{
  opacity:.16;
}

.bg-dark.text-white{
  background:var(--grad-premium) !important;
  color:#fff !important;
}

.bg-dark .text-white-50{
  color:rgba(255,255,255,.68) !important;
}

/* ===== UTILITY TEXT ===== */
.text-secondary,
.small.text-secondary,
.text-white-50{
  color:var(--muted) !important;
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(0,168,107,.55),rgba(0,136,90,.92));
  border-radius:999px;
  border:2px solid #f3f4f6;
}

::-webkit-scrollbar-track{
  background:#eef2f7;
}

body.dark-mode ::-webkit-scrollbar-track{
  background:#0f172a;
}

/* ===== PREMIUM ANIMATIONS ===== */
@keyframes ultraFloat{
  0%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
  100%{transform:translateY(0);}
}

@keyframes ultraPulse{
  0%{box-shadow:0 0 0 0 rgba(0,168,107,.20);}
  70%{box-shadow:0 0 0 12px rgba(0,168,107,0);}
  100%{box-shadow:0 0 0 0 rgba(0,168,107,0);}
}

@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

@keyframes softGlow{
  0%{filter:drop-shadow(0 0 0 rgba(16,185,129,0));}
  50%{filter:drop-shadow(0 0 12px rgba(16,185,129,.18));}
  100%{filter:drop-shadow(0 0 0 rgba(16,185,129,0));}
}

@keyframes shineSweep{
  0%{transform:translateX(-160%) skewX(-18deg);}
  100%{transform:translateX(260%) skewX(-18deg);}
}

.floating-cart-extended,
.chat-toggle-btn{
  animation:ultraFloat 3.2s ease-in-out infinite;
}

#installPwaBtn,
.btn-success.rounded-pill.position-relative{
  animation:ultraPulse 2.8s infinite;
}

.bg-success.text-white.rounded-circle,
.floating-help-icon{
  animation:softGlow 3.4s ease-in-out infinite;
}

.card.border-0.shadow-sm.overflow-hidden .btn-success{
  position:relative;
  overflow:hidden;
}

.card.border-0.shadow-sm.overflow-hidden .btn-success::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:42px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation:shineSweep 3.2s linear infinite;
}

#skeletonLoader .card,
.skeleton,
.skeleton-box{
  background:linear-gradient(90deg,rgba(148,163,184,.12) 25%,rgba(148,163,184,.22) 37%,rgba(148,163,184,.12) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1399.98px){
  .container-fluid-wide{
    padding:0 20px;
  }
}

@media (max-width:1199.98px){
  .left-sticky-stack{
    top:92px;
  }

  .quick-dock{
    grid-template-columns:repeat(4,1fr);
  }
}

@media (max-width:991.98px){
  .container-fluid-wide{
    padding:0 14px;
  }

  .layout-section{
    padding:20px 0 36px;
  }

  .left-sticky-stack{
    position:static;
  }

  .side-drawer{
    width:100%;
    right:-100%;
  }

  .bottom-mobile-nav{
    display:flex;
    justify-content:space-around;
    align-items:center;
  }

  .floating-whatsapp-btn{
    bottom:146px;
  }

  .back-to-top{
    bottom:214px;
  }

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

  header .row.g-3.align-items-center{
    row-gap:14px !important;
  }
}

@media (max-width:767.98px){
  .container-fluid-wide{
    padding:0 12px;
  }

  .layout-section{
    padding:18px 0 28px;
  }

  .left-panel,
  .section-shell,
  .subcat-chip-wrap{
    padding:14px;
  }

  .quick-view-card,
  .command-card{
    padding:16px;
  }

  .product-thumb{
    height:112px;
    font-size:24px;
  }

  .product-name{
    font-size:11px;
    min-height:28px;
  }

  .price{
    font-size:14px;
  }

  .floating-cart-meta,
  .floating-help-meta{
    display:none;
  }

  .floating-cart-extended,
  .floating-help-extended{
    padding:10px;
    border-radius:50%;
  }

  .chat-panel{
    width:calc(100vw - 40px);
  }

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

  header .badge.text-bg-light.border{
    font-size:11px;
  }

  .card.border-0.shadow-sm.overflow-hidden h1{
    font-size:1.7rem;
  }
}

@media (max-width:575.98px){
  .container-fluid-wide{
    padding:0 10px;
  }

  .layout-section{
    padding:16px 0 24px;
  }

  .floating-whatsapp-btn{
    width:50px;
    height:50px;
    font-size:22px;
    right:14px;
  }

  .back-to-top{
    width:46px;
    height:46px;
    right:14px;
  }

  .floating-cart-extended,
  .floating-help-extended{
    right:14px;
  }

  #liveChatWidget{
    left:14px;
  }

  .quick-view-modal,
  .command-palette{
    padding:12px;
  }

  .brand-chip,
  .keyword-chip,
  .path-chip,
  .active-badge,
  .compare-chip,
  .addon-chip,
  .checkout-step,
  .quick-dock-btn,
  .payment-method{
    padding:7px 12px;
    font-size:11px;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
  .seat {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    cursor: pointer;
    font-weight: 500;
  }

  .seat.selected {
    background: #198754;
    color: #fff;
    border-color: #198754;
  }

  .seat.booked {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
    cursor: not-allowed;
}
}