:root {
      --brand:       #E8380D;
      --brand-dark:  #C0300A;
      --brand-light: #FFF3F0;
      --brand-mid:   #FF6B47;
      --success:     #16A34A;
      --success-bg:  #F0FDF4;
      --warning:     #F59E0B;
      --warning-bg:  #FFFBEB;
      --info:        #3B82F6;
      --info-bg:     #EFF6FF;
      --purple:      #7C3AED;
      --purple-bg:   #F5F3FF;
      --neutral-50:  #FAFAFA;
      --neutral-100: #F4F4F5;
      --neutral-200: #E4E4E7;
      --neutral-300: #D1D1D6;
      --neutral-400: #A1A1AA;
      --neutral-500: #71717A;
      --neutral-600: #52525B;
      --neutral-700: #3F3F46;
      --neutral-900: #18181B;
      --sidebar-w:   260px;
      --radius:      14px;
      --radius-sm:   10px;
      --radius-xs:   6px;
      --shadow-xs:   0 1px 3px rgba(0,0,0,.07);
      --shadow-sm:   0 2px 10px rgba(0,0,0,.08);
      --shadow-md:   0 4px 20px rgba(0,0,0,.10);
    }

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

    body {
      font-family: 'Nunito', sans-serif;
      background: #F1F1F3;
      color: var(--neutral-900);
      min-height: 100vh;
    }

 
    
/* ═══════════════════════════════════════════════
   PAGE WRAPPER
═══════════════════════════════════════════════ */
.page-shell{
  max-width:1300px; margin:0 auto;
  padding:24px 20px 64px;
  display:flex; flex-direction:column; gap:0;
}

/* ── Breadcrumb ── */
.bc{
  display:flex;align-items:center;gap:5px;
  font-size:.8rem;color:var(--text-soft);margin-bottom:22px;flex-wrap:wrap;
}
.bc a{color:var(--text-mid);transition:color var(--transition)}
.bc a:hover{color:var(--brand)}
.bc-sep{font-size:.65rem;color:var(--border)}
.bc-current{color:var(--text-dark);font-weight:600}

/* ── Three-column layout ── */
.layout{display:flex;align-items:flex-start;gap:20px}

/* ═══════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════ */
.sidebar{width:var(--sidebar-w);flex-shrink:0;position:sticky;top:20px}
.sidebar-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.user-block{
  display:flex;align-items:center;gap:12px;
  padding:18px 18px 16px;border-bottom:1px solid var(--border-light);
  background:linear-gradient(135deg,#fff9f8 0%,#fff3f1 100%);
}
.avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#fbbf24,#ef4444);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;box-shadow:0 2px 8px rgba(239,68,68,.25);
}
.user-name{font-weight:800;font-size:.92rem;font-family:'Nunito',sans-serif;color:var(--text-dark)}
.user-sub{font-size:.73rem;color:var(--text-soft);margin-top:1px}

.nav-list{list-style:none;padding:8px 0}
.nav-list li a{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 18px;font-size:.85rem;color:var(--text-mid);
  border-radius:0 24px 24px 0;margin-right:12px;
  transition:background var(--transition),color var(--transition);font-weight:500;
}
.nav-list li a:hover{background:var(--brand-pale);color:var(--brand)}
.nav-list li.active>a{background:var(--brand-pale);color:var(--brand);font-weight:700}
.nav-list li a i{font-size:.95rem;width:17px;text-align:center;opacity:.8}
.nav-list li.active>a i{opacity:1}
.nav-badge{
  margin-left:auto;background:var(--brand);color:#fff;
  font-size:.65rem;font-weight:800;padding:2px 7px;
  border-radius:20px;font-family:'Nunito',sans-serif;min-width:20px;text-align:center;
}
.nav-divider{height:1px;background:var(--border-light);margin:6px 18px}

/* app download */
.app-download{
  margin:10px 12px 14px;
  background:linear-gradient(135deg,#fff3f1,#ffe0d9);
  border:1px solid #ffc9be;border-radius:10px;padding:14px 14px 10px;
}
.app-download-title{
  font-size:.75rem;font-weight:800;font-family:'Nunito',sans-serif;
  color:var(--brand);display:flex;align-items:center;gap:5px;
}
.app-download p{font-size:.7rem;color:var(--text-mid);margin:5px 0 10px;line-height:1.45}
.store-btns{display:flex;flex-direction:column;gap:6px}
.store-btn{
  display:flex;align-items:center;gap:8px;
  background:#111827;color:#fff;border-radius:7px;
  padding:7px 11px;font-size:.72rem;font-weight:600;
  transition:background var(--transition);width:fit-content;
}
.store-btn:hover{background:#1f2937;color:#fff}
.store-btn i{font-size:1rem}
.store-btn span small{display:block;font-size:.6rem;font-weight:400;opacity:.7;line-height:1}
.store-btn span strong{display:block;font-size:.72rem;line-height:1.2}

/* ═══════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════ */
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}

/* order header bar */
.order-topbar{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 24px;
}
.order-id-wrap{}
.order-id{
  font-size:1.5rem;font-weight:900;font-family:'Nunito',sans-serif;
  color:var(--text-dark);letter-spacing:-.02em;
}
.order-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:.8rem;color:var(--text-mid);margin-top:5px;
}
.order-meta .sep{color:var(--border);font-size:.6rem}
.order-meta strong{color:var(--text-dark)}
.status-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--amber-bg);color:#92400e;
  border:1.5px solid var(--amber-border);
  border-radius:30px;padding:7px 18px;
  font-size:.82rem;font-weight:700;font-family:'Nunito',sans-serif;
  white-space:nowrap;align-self:flex-start;
}
.status-pill i{font-size:.9rem}

/* ═══════════════════════════════════════════════
   TRACKING STEPPER
═══════════════════════════════════════════════ */
.tracker-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 28px 22px;
}
.tracker-heading{
  font-size:.95rem;font-weight:800;font-family:'Nunito',sans-serif;
  margin-bottom:30px;display:flex;align-items:center;gap:8px;color:var(--text-dark);
}
.tracker-heading i{color:var(--brand);font-size:1rem}

/* stepper track */
.stepper-track{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:4px}

/* Base grey line */
.stepper-track::before{
  content:'';position:absolute;
  top:20px;left:calc(10% + 22px);right:calc(10% + 22px);
  height:4px;background:var(--border);border-radius:2px;z-index:0;
}
/* Green progress line - JS sets width via CSS var */
.stepper-track::after{
  content:'';position:absolute;
  top:20px;left:calc(10% + 22px);
  height:4px;background:linear-gradient(to right,var(--green),#22c55e);
  border-radius:2px;z-index:1;
  width:var(--progress,0%);transition:width 1s cubic-bezier(.4,0,.2,1);
}

.step{
  display:flex;flex-direction:column;align-items:center;
  flex:1;position:relative;z-index:2;
}
.step-icon-wrap{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;border:3px solid transparent;
  transition:transform .3s,box-shadow .3s;cursor:default;
  position:relative;z-index:3;
}
.step-icon-wrap:hover{transform:scale(1.1)}

.step.done  .step-icon-wrap{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 0 0 4px rgba(21,146,79,.12)}
.step.active .step-icon-wrap{
  background:var(--amber);border-color:var(--amber);color:#fff;
  animation:stepPulse 2s ease-in-out infinite;
}
.step.pending .step-icon-wrap{background:var(--white);border-color:var(--border);color:var(--text-soft)}

@keyframes stepPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(245,158,11,.15)}
  50%{box-shadow:0 0 0 10px rgba(245,158,11,.06)}
}

.step-label{margin-top:11px;text-align:center}
.step-label strong{
  display:block;font-size:.78rem;font-weight:800;
  font-family:'Nunito',sans-serif;line-height:1.2;
}
.step-label .step-time{font-size:.69rem;color:var(--text-soft);margin-top:4px;line-height:1.4}
.step.done   .step-label strong{color:var(--green)}
.step.active .step-label strong{color:var(--amber)}
.step.pending .step-label strong{color:var(--text-soft)}

/* delivery alert */
.delivery-alert{
  display:flex;align-items:center;gap:10px;
  background:var(--green-bg);border:1px solid var(--green-border);
  border-radius:10px;padding:12px 18px;margin-top:22px;
  font-size:.84rem;color:var(--green);font-weight:600;
}
.delivery-alert i{font-size:1.05rem;flex-shrink:0}

/* ═══════════════════════════════════════════════
   ORDER ITEMS CARD
═══════════════════════════════════════════════ */
.items-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.items-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 16px;border-bottom:1px solid var(--border-light);
}
.items-card-title{font-size:.95rem;font-weight:800;font-family:'Nunito',sans-serif}
.items-count{
  font-size:.73rem;background:var(--brand-pale);color:var(--brand);
  border-radius:20px;padding:2px 9px;font-weight:700;margin-left:6px;
}
.dl-invoice{
  display:flex;align-items:center;gap:5px;
  font-size:.8rem;color:var(--brand);font-weight:700;
  padding:6px 12px;border:1.5px solid currentColor;
  border-radius:7px;transition:all var(--transition);
}
.dl-invoice:hover{background:var(--brand);color:#fff}

/* product rows */
.item-row{
  display:flex;align-items:center;gap:16px;
  padding:16px 24px;border-bottom:1px solid var(--border-light);
  transition:background var(--transition);
}
.item-row:last-of-type{border-bottom:none}
.item-row:hover{background:#fafafa}

.item-thumb{
  width:72px;height:72px;border-radius:10px;flex-shrink:0;
  background:var(--border-light);border:1px solid var(--border);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.item-thumb img{width:100%;height:100%;object-fit:cover}
.item-thumb .thumb-placeholder{
  font-size:1.5rem;color:var(--text-soft);
}

.item-details{flex:1;min-width:0}
.item-name{
  font-size:.86rem;font-weight:700;font-family:'Nunito',sans-serif;
  color:var(--text-dark);line-height:1.35;
}
.item-seller{font-size:.72rem;color:var(--text-soft);margin-top:3px}
.item-price{
  font-size:.85rem;font-weight:800;color:var(--brand);
  margin-top:5px;font-family:'Nunito',sans-serif;
}

.item-qty-badge{
  font-size:.75rem;color:var(--text-mid);background:var(--border-light);
  border:1px solid var(--border);border-radius:6px;padding:3px 9px;
  font-weight:600;flex-shrink:0;white-space:nowrap;
}
.item-total-price{
  font-size:.92rem;font-weight:800;font-family:'Nunito',sans-serif;
  color:var(--text-dark);flex-shrink:0;min-width:56px;text-align:right;
}

/* price details accordion */
.price-accordion{border-top:1px solid var(--border-light)}
.price-accordion-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;cursor:pointer;
  font-size:.84rem;font-weight:600;color:var(--text-mid);
  user-select:none;transition:background var(--transition);
}
.price-accordion-toggle:hover{background:#f9fafb}
.price-accordion-toggle .chevron{transition:transform .3s;font-size:.8rem}
.price-accordion-toggle.open .chevron{transform:rotate(180deg)}

.price-accordion-body{padding:0 24px 18px;display:none}
.price-accordion-body.open{display:block}
.price-line{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.83rem;padding:6px 0;color:var(--text-mid);
}
.price-line:not(:last-child){border-bottom:1px dashed #f3f4f6}
.price-line.grand-total{
  font-size:.92rem;font-weight:800;color:var(--text-dark);
  font-family:'Nunito',sans-serif;
  border-top:2px solid var(--border);border-bottom:none;
  padding-top:12px;margin-top:6px;
}
.price-green{color:var(--green);font-weight:700}
.price-red{color:var(--brand);font-weight:700}

/* action buttons */
.action-strip{
  display:flex;flex-wrap:wrap;gap:12px;
  padding:18px 24px 20px;border-top:1px solid var(--border-light);
}
.btn-primary-brand{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brand);color:#fff;border:none;
  border-radius:10px;padding:11px 24px;
  font-size:.88rem;font-weight:700;font-family:'Nunito',sans-serif;
  cursor:pointer;transition:background var(--transition),transform .15s;
}
.btn-primary-brand:hover{background:var(--brand-hover);transform:translateY(-1px)}
.btn-primary-brand:active{transform:translateY(0)}

.btn-ghost-brand{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--brand);
  border:1.5px solid var(--brand);border-radius:10px;
  padding:11px 20px;font-size:.88rem;font-weight:700;
  font-family:'Nunito',sans-serif;cursor:pointer;
  transition:all var(--transition);
}
.btn-ghost-brand:hover{background:var(--brand-pale)}

/* ═══════════════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════════════ */
.trust-row{
  display:flex;flex-wrap:wrap;gap:8px 0;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 8px;justify-content:space-around;
}
.trust-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  flex:1;min-width:100px;padding:8px 10px;
  border-right:1px solid var(--border-light);
}
.trust-item:last-child{border-right:none}
.trust-icon-wrap{
  width:36px;height:36px;border-radius:50%;
  background:var(--brand-pale);display:flex;align-items:center;justify-content:center;
}
.trust-icon-wrap i{font-size:.95rem;color:var(--brand)}
.trust-label{font-size:.72rem;font-weight:700;font-family:'Nunito',sans-serif;text-align:center;color:var(--text-dark)}
.trust-sub{font-size:.64rem;color:var(--text-soft);text-align:center}

/* ═══════════════════════════════════════════════
   RIGHT COLUMN
═══════════════════════════════════════════════ */
.right-col{width:100%;flex-shrink:0;display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}

/* generic panel card */
.panel{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.panel-header{
  padding:14px 18px 12px;border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:space-between;
}
.panel-title{
  font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-soft);
}
.panel-body{padding:16px 18px}

/* delivery partner */
.partner-logo-wrap{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--border-light);
}
.bluedart-badge{
  background:#003366;color:#fff;font-weight:900;font-size:.8rem;
  padding:5px 10px;border-radius:6px;font-family:'Nunito',sans-serif;
  letter-spacing:.03em;line-height:1.2;
}
.bluedart-badge .blue{color:#fff}
.bluedart-badge .dart{color:#f59e0b}
.partner-name-text{font-size:.84rem;font-weight:700;color:var(--text-dark)}

.info-block{margin-bottom:12px}
.info-block-label{font-size:.7rem;color:var(--text-soft);margin-bottom:3px;font-weight:500}
.info-block-value{
  font-size:.88rem;font-weight:700;color:var(--text-dark);
  display:flex;align-items:center;gap:7px;
}
.copy-icon{
  background:none;border:none;cursor:pointer;padding:0;
  color:var(--text-soft);font-size:.85rem;transition:color var(--transition);
}
.copy-icon:hover{color:var(--brand)}

.est-del-label{font-size:.7rem;color:var(--text-soft);margin-bottom:2px}
.est-del-date{font-size:.95rem;font-weight:800;color:var(--green);font-family:'Nunito',sans-serif}
.est-del-by{font-size:.75rem;color:var(--text-mid);margin-top:2px}

.btn-track-courier{
  width:100%;border:1.5px solid var(--brand);background:transparent;
  color:var(--brand);border-radius:9px;padding:10px;
  font-weight:700;font-size:.82rem;font-family:'Nunito',sans-serif;
  cursor:pointer;transition:all var(--transition);margin-top:14px;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.btn-track-courier:hover{background:var(--brand);color:#fff}

/* shipping address */
.address-name{font-weight:800;font-family:'Nunito',sans-serif;font-size:.9rem;color:var(--text-dark)}
.address-phone{font-size:.78rem;color:var(--text-mid);margin:3px 0 7px;display:flex;align-items:center;gap:5px}
.address-phone i{color:var(--text-soft);font-size:.8rem}
.address-lines{font-size:.8rem;color:var(--text-mid);line-height:1.6}
.change-link{font-size:.75rem;color:var(--brand);font-weight:700;cursor:pointer;transition:opacity var(--transition)}
.change-link:hover{opacity:.7}
.address-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--blue-bg);color:var(--blue);
  font-size:.64rem;font-weight:700;padding:2px 8px;
  border-radius:20px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em;
}

/* help links */
.help-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border-light);
  cursor:pointer;transition:opacity var(--transition);
}
.help-link:last-child{border-bottom:none;padding-bottom:0}
.help-link:hover{opacity:.72}
.help-icon-box{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.help-icon-box i{font-size:.9rem;color:var(--brand)}
.help-text-block .help-link-title{font-size:.83rem;font-weight:700;font-family:'Nunito',sans-serif}
.help-text-block .help-link-sub{font-size:.71rem;color:var(--text-soft);margin-top:1px}
.help-link-arrow{margin-left:auto;color:var(--text-soft);font-size:.78rem}

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
#toast-stack{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast-chip{
  display:flex;align-items:center;gap:9px;
  background:#111827;color:#fff;
  border-radius:10px;padding:10px 18px;
  font-size:.82rem;font-weight:600;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  animation:toastIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events:all;
}
.toast-chip i{color:#34d399;font-size:.95rem;flex-shrink:0}
@keyframes toastIn{
  from{opacity:0;transform:translateY(16px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.toast-chip.out{
  animation:toastOut .25s ease forwards;
}
@keyframes toastOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(8px)}
}

/* ═══════════════════════════════════════════════
   MOBILE SIDEBAR OVERLAY
═══════════════════════════════════════════════ */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:1040;backdrop-filter:blur(2px);
}
.sidebar-overlay.active{display:block}
.mobile-sidebar{
  position:fixed;top:0;left:-100%;bottom:0;width:275px;
  background:var(--white);z-index:1050;overflow-y:auto;
  transition:left .3s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);
}
.mobile-sidebar.active{left:0}
.mobile-sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#fff3f1,#ffe8e3);
}
.sidebar-close{
  background:none;border:none;cursor:pointer;
  font-size:1.2rem;color:var(--text-mid);padding:4px;
  transition:color var(--transition);
}
.sidebar-close:hover{color:var(--brand)}

/* mobile top bar (no header per requirement, but we need a menu trigger) */
.mobile-topbar{
  display:none;align-items:center;justify-content:space-between;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;
  box-shadow:var(--shadow);
}
.mobile-topbar-title{font-size:.9rem;font-weight:800;font-family:'Nunito',sans-serif}
.mobile-topbar-right{display:flex;align-items:center;gap:8px}
.menu-trigger{
  background:none;border:none;cursor:pointer;
  font-size:1.1rem;color:var(--text-dark);padding:4px;
  display:flex;align-items:center;
}

/* ═══════════════════════════════════════════════
   ENTRY ANIMATIONS
═══════════════════════════════════════════════ */
.fade-up{opacity:0;transform:translateY(14px);animation:fadeUp .4s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.delay-1{animation-delay:.08s}
.delay-2{animation-delay:.16s}
.delay-3{animation-delay:.24s}
.delay-4{animation-delay:.32s}
.delay-5{animation-delay:.40s}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:1180px){
  .right-col{width:248px}
  :root{--sidebar-w:220px}
}
@media(max-width:1024px){
  .sidebar{display:none}
  .mobile-topbar{display:flex}
  .right-col{
    width:100%;flex-direction:row;flex-wrap:wrap;
    position:static;
  }
  .right-col .panel{flex:1 1 260px}
  .layout{flex-wrap:wrap}
  .main-col{width:100%;flex:none}
}
@media(max-width:640px){
  .page-shell{padding:16px 14px 48px}
  .order-topbar{padding:16px 18px}
  .order-id{font-size:1.2rem}
  .tracker-card{padding:20px 16px 18px}
  .stepper-track::before,.stepper-track::after{
    left:calc(10% + 18px);right:calc(10% + 18px);
  }
  .step-icon-wrap{width:38px;height:38px;font-size:.9rem}
  .step-label strong{font-size:.7rem}
  .step-label .step-time{font-size:.63rem}
  .item-row{padding:14px 16px;gap:12px}
  .item-thumb{width:62px;height:62px}
  .items-card-header,.action-strip{padding-left:16px;padding-right:16px}
  .price-accordion-toggle,.price-accordion-body{padding-left:16px;padding-right:16px}
  .trust-row{gap:0}
  .trust-item{min-width:80px;padding:8px 6px}
  .trust-label{font-size:.65rem}
  .trust-sub{font-size:.58rem}
  .panel-body{padding:14px}
  .action-strip{flex-direction:column}
  .btn-primary-brand,.btn-ghost-brand{width:100%;justify-content:center}
}
@media(max-width:420px){
  .step-label .step-time{display:none}
}

    /* ════════════════════════════
       MAIN CONTENT
    ════════════════════════════ */
    .main-content {
      margin-left: 0;
      flex: 1;
      padding: 28px 28px 50px;
      min-width: 0;
    }

    /* ── Welcome bar ── */
    .welcome-bar {
      margin-bottom: 24px;
      animation: fadeUp .4s ease both;
    }
    .welcome-bar h2 {
      font-family: 'Playfair Display', serif;
      font-size: 1.55rem; font-weight: 800;
      color: var(--neutral-900);
    }
    .welcome-bar p { font-size: .85rem; color: var(--neutral-500); margin-top: 4px; }

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

    /* ── Stat cards ── */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr) 1.3fr;
      gap: 14px;
      margin-bottom: 24px;
      animation: fadeUp .4s ease .06s both;
    }
    .stat-card {
      background: #fff;
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      padding: 18px 20px;
      box-shadow: var(--shadow-xs);
      transition: box-shadow .2s, transform .2s;
      cursor: pointer;
    }
    .stat-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
    .stat-card .sc-icon {
      width: 44px; height: 44px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; margin-bottom: 12px;
    }
    .stat-card .sc-num { font-size: 1.9rem; font-weight: 900; color: var(--neutral-900); line-height: 1; }
    .stat-card .sc-label { font-size: .8rem; font-weight: 700; color: var(--neutral-500); margin-top: 4px; margin-bottom: 10px; }
    .stat-card .sc-link { font-size: .78rem; font-weight: 800; color: var(--brand); display: flex; align-items: center; gap: 4px; }
    .stat-card .sc-link.green { color: var(--success); }
    .stat-card .sc-link.purple { color: var(--purple); }

    /* Coins card special */
    .coins-card {
      background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
      border-color: #FCD34D;
    }
    .coins-card .sc-num { color: #D97706; font-size: 2rem; }
    .coins-card .coins-worth { font-size: .8rem; color: #92400E; font-weight: 600; margin-top: 2px; margin-bottom: 10px; }
    .coins-card .coins-emoji { font-size: 2.2rem; float: right; margin-top: -8px; }

    /* ── Quick actions ── */
    .section-title {
      font-weight: 800; font-size: 1rem;
      color: var(--neutral-900);
      margin-bottom: 14px;
    }
    .quick-actions {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 10px;
      margin-bottom: 24px;
      animation: fadeUp .4s ease .12s both;
    }
    .qa-item {
      background: #fff;
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius-sm);
      padding: 16px 8px 12px;
      text-align: center;
      cursor: pointer;
      transition: box-shadow .2s, transform .2s, border-color .2s;
    }
    .qa-item:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: var(--brand-mid); }
    .qa-item .qa-icon {
      width: 46px; height: 46px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; margin: 0 auto 8px;
    }
    .qa-item .qa-label { font-size: .75rem; font-weight: 700; color: var(--neutral-700); }

    /* ── Bottom two-col ── */
    .bottom-row { display: grid; grid-template-columns: 1fr 380px; gap: 18px; animation: fadeUp .4s ease .18s both; }

    /* ── Recent Orders ── */
    .panel-card {
      background: #fff;
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      box-shadow: var(--shadow-xs);
      overflow: hidden;
    }
    .panel-header {
      padding: 16px 20px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--neutral-100);
    }
    .panel-header h6 { font-weight: 800; font-size: .95rem; margin: 0; }
    .panel-header .view-all { font-size: .8rem; font-weight: 800; color: var(--brand); cursor: pointer; display: flex; align-items: center; gap: 4px; text-decoration: none; }

    .order-row {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--neutral-50);
      cursor: pointer;
      transition: background .15s;
    }
    .order-row:last-child { border-bottom: none; }
    .order-row:hover { background: var(--neutral-50); }
    .order-thumb {
      width: 58px; height: 58px; border-radius: var(--radius-sm);
      background: var(--neutral-100);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.8rem; flex-shrink: 0;
    }
    .order-info { flex: 1; min-width: 0; }
    .order-id   { font-weight: 800; font-size: .85rem; color: var(--neutral-900); }
    .order-desc { font-size: .78rem; color: var(--neutral-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .order-meta { font-size: .73rem; color: var(--neutral-400); margin-top: 3px; }
    .order-status { text-align: right; flex-shrink: 0; min-width: 130px; }
    .status-pill {
      display: inline-block; font-size: .72rem; font-weight: 800;
      padding: 3px 12px; border-radius: 20px; margin-bottom: 4px;
    }
    .status-pill.delivered { background: var(--success-bg); color: var(--success); }
    .status-pill.shipped   { background: #FFF7ED; color: #C2410C; }
    .status-pill.processing{ background: var(--info-bg); color: var(--info); }
    .status-date { font-size: .73rem; color: var(--neutral-500); }
    .order-arrow { color: var(--neutral-300); font-size: .85rem; margin-left: 8px; }

    .view-all-row {
      padding: 14px 20px; text-align: center;
      font-size: .82rem; font-weight: 800; color: var(--brand);
      cursor: pointer; border-top: 1px solid var(--neutral-100);
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .view-all-row:hover { background: var(--brand-light); }

    /* ── Right panel ── */
    .right-col { display: flex; flex-direction: column; gap: 18px; }

    /* Prime banner */
    .prime-banner {
      background: linear-gradient(135deg, #FFF8EC 0%, #FFF3DC 100%);
      border: 1.5px solid #FCD34D;
      border-radius: var(--radius);
      padding: 20px;
      position: relative; overflow: hidden;
    }
    .prime-banner .pb-logo {
      font-family: 'Playfair Display', serif;
      font-weight: 800; font-size: 1.15rem; color: var(--brand);
    }
    .prime-banner .pb-logo span { color: var(--neutral-900); }
    .prime-banner .pb-tagline { font-size: .78rem; color: var(--neutral-600); margin: 4px 0 14px; font-weight: 600; }
    .prime-banner .pb-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
    .prime-banner .pb-feat {
      font-size: .7rem; font-weight: 700;
      background: rgba(255,255,255,.7);
      border: 1px solid #FCD34D;
      padding: 3px 8px; border-radius: 20px; color: #92400E;
    }
    .btn-prime {
      background: var(--brand); color: #fff;
      border: none; border-radius: var(--radius-xs);
      padding: 9px 20px; font-size: .82rem; font-weight: 800;
      font-family: 'Nunito', sans-serif; cursor: pointer;
      transition: background .2s, box-shadow .2s;
    }
    .btn-prime:hover { background: var(--brand-dark); box-shadow: 0 4px 14px rgba(232,56,13,.28); }
    .prime-truck {
      position: absolute; right: -10px; bottom: -5px;
      font-size: 5rem; opacity: .18;
    }

    /* Recommended */
    .rec-card { background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; }
    .rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .rec-item {
      padding: 14px;
      border-right: 1px solid var(--neutral-100);
      border-bottom: 1px solid var(--neutral-100);
      cursor: pointer; transition: background .15s;
    }
    .rec-item:hover { background: var(--neutral-50); }
    .rec-item:nth-child(even) { border-right: none; }
    .rec-item:nth-child(3), .rec-item:nth-child(4) { border-bottom: none; }
    .rec-thumb {
      width: 100%; height: 80px; border-radius: var(--radius-xs);
      background: var(--neutral-100);
      display: flex; align-items: center; justify-content: center;
      font-size: 2.2rem; margin-bottom: 8px;
    }
    .rec-name { font-size: .75rem; font-weight: 700; color: var(--neutral-900); line-height: 1.3; margin-bottom: 4px; }
    .rec-rating { font-size: .68rem; color: var(--warning); font-weight: 700; margin-bottom: 4px; }
    .rec-price-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
    .rec-price { font-size: .82rem; font-weight: 800; color: var(--brand); }
    .rec-mrp   { font-size: .72rem; color: var(--neutral-400); text-decoration: line-through; }
    .rec-off   { font-size: .68rem; font-weight: 800; color: var(--success); }
    .btn-add {
      width: 100%; background: transparent; color: var(--brand);
      border: 1.5px solid var(--brand); border-radius: var(--radius-xs);
      padding: 5px; font-size: .72rem; font-weight: 800;
      font-family: 'Nunito', sans-serif; cursor: pointer;
      transition: background .15s, color .15s;
    }
    .btn-add:hover { background: var(--brand); color: #fff; }

    /* ── Toast ── */
    .toast-msg {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: var(--neutral-900); color: #fff;
      padding: 10px 22px; border-radius: 30px;
      font-size: .84rem; font-weight: 700;
      opacity: 0; pointer-events: none;
      transition: opacity .3s; z-index: 9999;
      display: flex; align-items: center; gap: 8px;
      white-space: nowrap;
    }
    .toast-msg.show { opacity: 1; }

    /* scrollbar */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 10px; }

    @media (max-width: 1100px) {
      .stats-row { grid-template-columns: repeat(3, 1fr); }
      .quick-actions { grid-template-columns: repeat(4, 1fr); }
      .bottom-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .sidebar { display: none; }
      .main-content { margin-left: 0; padding: 16px; }
      .stats-row { grid-template-columns: repeat(2, 1fr); }
      .quick-actions { grid-template-columns: repeat(4, 1fr); }
    }

    /* ── Page heading ── */
    .cart-heading {
      font-family: 'Playfair Display', serif;
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--neutral-900);
      margin-bottom: 20px;
    }
    .cart-heading span {
      font-family: 'Nunito', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      color: var(--neutral-500);
      margin-left: 8px;
    }

    /* ── Delivery banner ── */
    .delivery-banner {
      background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
      border: 1.5px solid #BBF7D0;
      border-radius: var(--radius-sm);
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .delivery-banner .db-icon { color: var(--success); font-size: 1.25rem; flex-shrink: 0; }
    .delivery-banner .db-text { font-size: .85rem; font-weight: 700; color: var(--success); flex-shrink: 0; }
    .delivery-banner .progress-wrap {
      flex: 1; min-width: 100px;
      height: 7px;
      background: #BBF7D0;
      border-radius: 20px;
      overflow: hidden;
    }
    .delivery-banner .progress-fill {
      width: 80%;
      height: 100%;
      background: linear-gradient(90deg, var(--success-mid), #15803D);
      border-radius: 20px;
    }
    .delivery-banner .db-upsell {
      font-size: .8rem;
      color: var(--neutral-600);
      flex-shrink: 0;
    }
    .delivery-banner .db-upsell strong { color: var(--brand); }

    /* ── Cart item card ── */
    .cart-card {
      background: #fff;
      border-radius: var(--radius);
      border: 1px solid var(--neutral-200);
      box-shadow: var(--shadow-xs);
      padding: 20px 22px;
      margin-bottom: 14px;
      transition: box-shadow .2s, transform .2s;
      animation: slideIn .35s ease both;
    }
    .cart-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .cart-card:nth-child(1) { animation-delay: .05s; }
    .cart-card:nth-child(2) { animation-delay: .12s; }
    .cart-card:nth-child(3) { animation-delay: .19s; }

    .product-thumb {
      width: 110px; height: 110px;
      border-radius: var(--radius-sm);
      object-fit: cover;
      background: var(--neutral-100);
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 3rem;
      overflow: hidden;
    }
    .product-thumb img { width: 100%; height: 100%; object-fit: cover; }

    .badge-bestseller {
      display: inline-block;
      font-size: .68rem; font-weight: 800;
      padding: 2px 9px;
      border-radius: 20px;
      background: #FEF3C7;
      color: #D97706;
      border: 1px solid #FCD34D;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .prod-name {
      font-weight: 800;
      font-size: .95rem;
      color: var(--neutral-900);
      line-height: 1.35;
      margin-bottom: 6px;
    }
    .prod-price-row {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin: 6px 0 10px;
    }
    .price-current { font-size: 1.05rem; font-weight: 800; color: var(--brand); }
    .price-original { font-size: .82rem; color: var(--neutral-400); text-decoration: line-through; }
    .badge-off {
      font-size: .72rem; font-weight: 800;
      color: var(--success); background: var(--success-bg);
      border: 1px solid #BBF7D0;
      padding: 2px 8px; border-radius: 20px;
    }

    .item-actions {
      display: flex; gap: 18px; align-items: center;
    }
    .action-btn {
      background: none; border: none;
      font-size: .8rem; font-weight: 700;
      color: var(--neutral-500);
      cursor: pointer; padding: 0;
      display: flex; align-items: center; gap: 5px;
      transition: color .2s;
      font-family: 'Nunito', sans-serif;
    }
    .action-btn:hover { color: var(--brand); }
    .action-btn.remove:hover { color: #DC2626; }

    /* Qty stepper */
    .qty-block { text-align: center; }
    .qty-stepper {
      display: inline-flex; align-items: center;
      border: 1.5px solid var(--neutral-200);
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: #fff;
      box-shadow: var(--shadow-xs);
    }
    .qty-btn {
      width: 34px; height: 34px;
      background: var(--neutral-50);
      border: none; cursor: pointer;
      font-size: 1rem; font-weight: 700;
      color: var(--neutral-700);
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s;
    }
    .qty-btn:hover { background: var(--brand-light); color: var(--brand); }
    .qty-num {
      width: 36px; height: 34px;
      text-align: center; font-weight: 800;
      font-size: .9rem;
      border: none; outline: none;
      font-family: 'Nunito', sans-serif;
      color: var(--neutral-900);
      -moz-appearance: textfield;
    }
    .qty-num::-webkit-inner-spin-button { display: none; }
    .qty-label { font-size: .74rem; color: var(--neutral-400); margin-top: 4px; font-weight: 600; }

    .item-total {
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--neutral-900);
      text-align: right;
      min-width: 80px;
    }

    /* ── Coupon bar ── */
    .coupon-bar {
      background: #fff;
      border: 1.5px dashed var(--brand-mid);
      border-radius: var(--radius-sm);
      padding: 16px 20px;
      display: flex; align-items: center; gap: 14px;
      margin-top: 6px; cursor: pointer;
      transition: background .2s, border-color .2s;
    }
    .coupon-bar:hover { background: var(--brand-light); border-color: var(--brand); }
    .coupon-bar .cp-icon { font-size: 1.3rem; color: var(--brand); }
    .coupon-bar .cp-text { font-size: .88rem; font-weight: 700; color: var(--brand); flex: 1; }
    .coupon-bar .cp-link { font-size: .83rem; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 4px; }
    .coupon-bar .divider-v { width: 1px; height: 22px; background: var(--neutral-200); }

    /* Coupon input (hidden by default) */
    .coupon-input-row {
      display: none;
      background: #fff;
      border: 1.5px solid var(--brand);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      align-items: center; gap: 10px;
      margin-top: 10px;
    }
    .coupon-input-row.show { display: flex; }
    .coupon-input-row input {
      flex: 1; border: none; outline: none;
      font-family: 'Nunito', sans-serif;
      font-size: .88rem; font-weight: 700;
      color: var(--neutral-900);
      letter-spacing: .5px;
      text-transform: uppercase;
    }
    .coupon-input-row input::placeholder { text-transform: none; color: var(--neutral-400); font-weight: 600; letter-spacing: 0; }
    .btn-apply {
      background: var(--brand); color: #fff;
      border: none; border-radius: var(--radius-xs);
      padding: 7px 18px; font-weight: 800; font-size: .82rem;
      font-family: 'Nunito', sans-serif; cursor: pointer;
      transition: background .2s;
    }
    .btn-apply:hover { background: var(--brand-dark); }

    /* ── Order Summary ── */
    .summary-wrap {
      position: sticky; top: 20px;
    }
    .summary-card {
      background: #fff;
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      animation: slideIn .4s ease .08s both;
    }
    .summary-header {
      background: var(--neutral-900);
      padding: 16px 22px;
    }
    .summary-header h5 {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem; color: #fff; margin: 0;
    }
    .summary-body { padding: 20px 22px; }

    .sum-row {
      display: flex; justify-content: space-between;
      align-items: center;
      font-size: .88rem;
      margin-bottom: 12px;
    }
    .sum-row .sk { color: var(--neutral-600); font-weight: 600; }
    .sum-row .sv { font-weight: 700; color: var(--neutral-900); }
    .sum-row .sv.discount { color: var(--success); }
    .sum-row .sv.free { color: var(--success); font-weight: 800; }
    .sum-divider { border: none; border-top: 1.5px dashed var(--neutral-200); margin: 14px 0; }
    .sum-total {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 1.05rem; font-weight: 900;
      margin-bottom: 4px;
    }
    .sum-total .tv { color: var(--neutral-900); font-size: 1.3rem; }
    .sum-tax { font-size: .73rem; color: var(--neutral-400); margin-bottom: 14px; }

    .savings-pill {
      background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
      border: 1px solid #BBF7D0;
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      display: flex; align-items: center; gap: 8px;
      font-size: .82rem; color: var(--success);
      font-weight: 700; margin-bottom: 18px;
    }
    .savings-pill i { font-size: 1rem; }

    /* CTA buttons */
    .btn-checkout {
      width: 100%;
      background: var(--brand);
      color: #fff; border: none;
      border-radius: var(--radius-sm);
      padding: 14px;
      font-family: 'Nunito', sans-serif;
      font-size: 1rem; font-weight: 800;
      cursor: pointer; display: flex;
      align-items: center; justify-content: center; gap: 8px;
      transition: background .2s, box-shadow .2s, transform .1s;
      box-shadow: var(--shadow-brand);
      margin-bottom: 10px;
    }
    .btn-checkout:hover { background: var(--brand-dark); box-shadow: 0 8px 28px rgba(232,56,13,.38); }
    .btn-checkout:active { transform: scale(.99); }

    .btn-continue {
      width: 100%;
      background: transparent;
      color: var(--brand);
      border: 2px solid var(--brand);
      border-radius: var(--radius-sm);
      padding: 12px;
      font-family: 'Nunito', sans-serif;
      font-size: .92rem; font-weight: 800;
      cursor: pointer; display: flex;
      align-items: center; justify-content: center; gap: 8px;
      transition: background .2s, color .2s;
      margin-bottom: 18px;
    }
    .btn-continue:hover { background: var(--brand-light); }

    /* Trust badges */
    .trust-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 10px; margin-top: 2px;
    }
    .trust-item {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: .78rem;
    }
    .trust-item .ti-icon {
      width: 30px; height: 30px; flex-shrink: 0;
      background: var(--brand-light);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--brand); font-size: .85rem;
    }
    .trust-item .ti-title { font-weight: 800; color: var(--neutral-900); line-height: 1.2; }
    .trust-item .ti-sub   { color: var(--neutral-500); font-size: .72rem; }

    /* ── Bottom feature bar ── */
    .feature-bar {
      background: #fff;
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      padding: 18px 28px;
      margin-top: 20px;
      display: flex; justify-content: space-between;
      flex-wrap: wrap; gap: 16px;
      box-shadow: var(--shadow-xs);
    }
    .feat-item {
      display: flex; align-items: center; gap: 12px;
      flex: 1; min-width: 150px;
    }
    .feat-item .fi-icon {
      width: 42px; height: 42px;
      background: var(--brand-light);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--brand); font-size: 1.15rem; flex-shrink: 0;
    }
    .feat-item .fi-title { font-weight: 800; font-size: .85rem; color: var(--neutral-900); }
    .feat-item .fi-sub   { font-size: .75rem; color: var(--neutral-500); }

    /* ── Wishlist / Remove animation ── */
    .cart-card.removing {
      animation: cardOut .3s ease forwards;
    }
    @keyframes cardOut {
      to { opacity: 0; transform: translateX(-20px) scale(.97); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
    }

    /* ── Toast ── */
    .toast-msg {
      position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
      background: var(--neutral-900); color: #fff;
      padding: 10px 24px; border-radius: 30px;
      font-size: .84rem; font-weight: 700;
      opacity: 0; pointer-events: none;
      transition: opacity .3s; z-index: 9999;
      display: flex; align-items: center; gap: 8px;
      white-space: nowrap;
    }
    .toast-msg.show { opacity: 1; }

    /* ── Empty state (shown when all removed) ── */
    .empty-state {
      display: none; text-align: center;
      padding: 60px 20px;
      background: #fff;
      border-radius: var(--radius);
      border: 1px solid var(--neutral-200);
      margin-bottom: 14px;
    }
    .empty-state .es-icon { font-size: 4rem; margin-bottom: 16px; }
    .empty-state h4 { font-family:'Playfair Display',serif; font-size:1.3rem; margin-bottom:8px; }
    .empty-state p  { font-size:.88rem; color:var(--neutral-500); margin-bottom:20px; }

    /* responsive */
    @media (max-width: 768px) {
      .product-thumb { width: 80px; height: 80px; font-size: 2rem; }
      .item-total { font-size: 1rem; }
      .feature-bar { display: none; }
    }


     /* ── Tabs ── */
    .tabs-row {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
      margin-bottom: 22px;
      animation: fadeUp .35s ease .06s both;
    }
    .tabs-left { display: flex; gap: 6px; flex-wrap: wrap; }
    .tab-pill {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 16px; border-radius: 30px;
      font-size: .82rem; font-weight: 700;
      border: 1.5px solid var(--neutral-200);
      background: #fff; color: var(--neutral-600);
      cursor: pointer; transition: all .2s;
    }
    .tab-pill:hover { border-color: var(--brand-mid); color: var(--brand); }
    .tab-pill.active {
      background: var(--brand-light);
      border-color: var(--brand);
      color: var(--brand);
    }
    .tab-pill .tab-icon { font-size: .82rem; }
    .tab-count {
      background: var(--brand); color: #fff;
      font-size: .65rem; font-weight: 900;
      padding: 1px 7px; border-radius: 20px;
    }
    .tab-pill:not(.active) .tab-count {
      background: var(--neutral-200); color: var(--neutral-600);
    }
    .tab-pill.sale-tab.active   { background: #FFF7ED; border-color: #FB923C; color: #EA580C; }
    .tab-pill.sale-tab.active .tab-count { background: #EA580C; }
    .tab-pill.drop-tab.active   { background: var(--success-bg); border-color: var(--success); color: var(--success); }
    .tab-pill.drop-tab.active .tab-count { background: var(--success); }
    .tab-pill.oos-tab.active    { background: var(--neutral-100); border-color: var(--neutral-400); color: var(--neutral-500); }

    .sort-wrap {
      display: flex; align-items: center; gap: 8px;
      font-size: .8rem; font-weight: 700; color: var(--neutral-600);
    }
    .sort-select {
      border: 1.5px solid var(--neutral-200);
      border-radius: var(--radius-xs);
      padding: 6px 12px; font-family: 'Nunito', sans-serif;
      font-size: .8rem; font-weight: 700; color: var(--neutral-700);
      background: #fff; outline: none; cursor: pointer;
      transition: border-color .2s;
    }
    .sort-select:focus { border-color: var(--brand); }

    /* ── Product grid ── */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 22px;
      animation: fadeUp .35s ease .12s both;
    }

    .product-card {
      background: #fff;
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-xs);
      transition: box-shadow .25s, transform .25s;
      position: relative;
    }
    .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

    /* Discount badge */
    .disc-badge {
      position: absolute; top: 10px; left: 10px;
      background: var(--brand); color: #fff;
      font-size: .67rem; font-weight: 900;
      padding: 3px 8px; border-radius: 20px;
      letter-spacing: .3px; z-index: 2;
    }
    .disc-badge.sale  { background: #EA580C; }
    .disc-badge.drop  { background: var(--success); }
    .disc-badge.high  { background: var(--purple); }

    /* Heart button */
    .heart-btn {
      position: absolute; top: 10px; right: 10px;
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,.9);
      border: 1.5px solid #FFD0D0;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 2;
      transition: background .2s, transform .2s;
      box-shadow: 0 2px 6px rgba(0,0,0,.1);
    }
    .heart-btn:hover { transform: scale(1.15); }
    .heart-btn i { color: var(--brand); font-size: .9rem; }
    .heart-btn.removing i { color: var(--neutral-300); }

    /* Product image area */
    .prod-img-area {
      width: 100%; height: 170px;
      display: flex; align-items: center; justify-content: center;
      font-size: 4.5rem;
      background: var(--neutral-100);
      overflow: hidden;
    }

    /* Card body */
    .prod-body { padding: 14px; }
    .prod-name {
      font-size: .85rem; font-weight: 700;
      color: var(--neutral-900); line-height: 1.35;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .prod-rating {
      font-size: .74rem; color: var(--warning);
      font-weight: 700; margin-bottom: 7px;
      display: flex; align-items: center; gap: 4px;
    }
    .prod-rating .rev-count { color: var(--neutral-400); font-weight: 600; }
    .prod-price-row {
      display: flex; align-items: center; gap: 6px;
      flex-wrap: wrap; margin-bottom: 12px;
    }
    .price-now { font-size: 1rem; font-weight: 900; color: var(--neutral-900); }
    .price-was { font-size: .78rem; color: var(--neutral-400); text-decoration: line-through; }
    .price-off {
      font-size: .72rem; font-weight: 800; color: var(--success);
    }

    /* Card actions */
    .card-actions { display: flex; gap: 8px; }
    .btn-add-cart {
      flex: 1; background: var(--brand); color: #fff;
      border: none; border-radius: var(--radius-xs);
      padding: 9px 6px; font-family: 'Nunito', sans-serif;
      font-size: .78rem; font-weight: 800;
      cursor: pointer; display: flex; align-items: center;
      justify-content: center; gap: 5px;
      transition: background .2s, box-shadow .2s;
    }
    .btn-add-cart:hover { background: var(--brand-dark); box-shadow: var(--shadow-brand); }
    .btn-remove {
      background: transparent; color: var(--neutral-500);
      border: 1.5px solid var(--neutral-200);
      border-radius: var(--radius-xs);
      padding: 9px 12px; font-family: 'Nunito', sans-serif;
      font-size: .78rem; font-weight: 700;
      cursor: pointer; display: flex; align-items: center;
      gap: 5px; transition: border-color .2s, color .2s;
    }
    .btn-remove:hover { border-color: #EF4444; color: #EF4444; }

    /* ── Explore banner ── */
    .explore-banner {
      background: #fff;
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      padding: 18px 24px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      box-shadow: var(--shadow-xs);
      margin-bottom: 24px;
      animation: fadeUp .35s ease .18s both;
    }
    .explore-banner .eb-left { display: flex; align-items: center; gap: 14px; }
    .explore-banner .eb-icon {
      width: 42px; height: 42px; border-radius: 50%;
      background: var(--brand-light);
      display: flex; align-items: center; justify-content: center;
      color: var(--brand); font-size: 1.2rem; flex-shrink: 0;
    }
    .explore-banner .eb-title { font-weight: 800; font-size: .9rem; color: var(--neutral-900); }
    .explore-banner .eb-sub   { font-size: .78rem; color: var(--neutral-500); margin-top: 2px; }
    .btn-explore {
      background: transparent; color: var(--brand);
      border: 2px solid var(--brand);
      border-radius: var(--radius-sm);
      padding: 9px 20px; font-family: 'Nunito', sans-serif;
      font-size: .82rem; font-weight: 800;
      cursor: pointer; flex-shrink: 0;
      transition: background .2s, color .2s;
    }
    .btn-explore:hover { background: var(--brand); color: #fff; }

    /* ── Features bar ── */
    .features-bar {
      background: #fff;
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      padding: 16px 24px;
      display: flex; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
      box-shadow: var(--shadow-xs);
      animation: fadeUp .35s ease .24s both;
    }
    .feat-item {
      display: flex; align-items: center; gap: 10px;
      flex: 1; min-width: 130px;
    }
    .feat-item .fi-icon {
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--brand-light);
      display: flex; align-items: center; justify-content: center;
      color: var(--brand); font-size: 1rem; flex-shrink: 0;
    }
    .feat-item .fi-title { font-weight: 800; font-size: .82rem; color: var(--neutral-900); }
    .feat-item .fi-sub   { font-size: .72rem; color: var(--neutral-500); }

    /* ── Removing animation ── */
    .product-card.removing {
      animation: cardOut .3s ease forwards;
      pointer-events: none;
    }
    @keyframes cardOut {
      to { opacity: 0; transform: scale(.92); }
    }

    /* ── Toast ── */
    .toast-msg {
      position: fixed; bottom: 24px; left: 50%;
      transform: translateX(-50%);
      background: var(--neutral-900); color: #fff;
      padding: 10px 22px; border-radius: 30px;
      font-size: .84rem; font-weight: 700;
      opacity: 0; pointer-events: none;
      transition: opacity .3s; z-index: 9999;
      display: flex; align-items: center; gap: 8px;
      white-space: nowrap;
    }
    .toast-msg.show { opacity: 1; }

    /* Empty wishlist */
    .empty-wishlist {
      display: none; text-align: center;
      padding: 60px 20px;
      background: #fff;
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      margin-bottom: 22px;
    }
    .empty-wishlist .ew-icon { font-size: 4rem; margin-bottom: 16px; }
    .empty-wishlist h4 { font-family:'Playfair Display',serif; font-size:1.3rem; margin-bottom:8px; }
    .empty-wishlist p  { font-size:.86rem; color:var(--neutral-500); margin-bottom:20px; }
    .btn-start-shopping {
      background: var(--brand); color: #fff;
      border: none; border-radius: var(--radius-sm);
      padding: 11px 26px; font-family: 'Nunito', sans-serif;
      font-size: .88rem; font-weight: 800;
      cursor: pointer; display: inline-flex;
      align-items: center; gap: 8px;
      transition: background .2s, box-shadow .2s;
    }
    .btn-start-shopping:hover { background: var(--brand-dark); box-shadow: var(--shadow-brand); }

    /* scrollbar */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 10px; }

    @media (max-width: 1100px) {
      .products-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 900px) {
      .products-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .sidebar { display: none; }
      .main-content { margin-left: 0; padding: 16px; }
    }

    
/* Address Card */
.address-card{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:16px;
    padding:20px;
    cursor:pointer;
    position:relative;
    transition:.2s;
}
.address-card:hover{
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
.address-card.selected{
    border:2px solid #ff5a1f;
}

/* Radio */
.radio{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid #ccc;
    position:absolute;
    top:15px;
    right:15px;
}
.address-card.selected .radio{
    border-color:#ff5a1f;
}
.address-card.selected .radio::after{
    content:'';
    width:8px;
    height:8px;
    background:#ff5a1f;
    border-radius:50%;
    position:absolute;
    top:3px;
    left:3px;
}

/* ── SEARCH BAR ──────────────────────────── */
    .search-wrap {
      position: relative;
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .search-wrap .search-icon {
      position: absolute;
      left: 16px;
      color: var(--muted);
      font-size: .95rem;
      pointer-events: none;
    }
    .search-input {
      flex: 1;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 12px 16px 12px 44px;
      font-family: 'Nunito', sans-serif;
      font-size: .93rem;
      background: #fff;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      color: var(--text);
    }
    .search-input:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(232,56,13,.10);
    }
    .search-input::placeholder { color: #aaa; }
    .btn-search {
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 12px 28px;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: .93rem;
      cursor: pointer;
      transition: background .2s, transform .1s, box-shadow .2s;
      white-space: nowrap;
    }
    .btn-search:hover {
      background: var(--brand-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(232,56,13,.3);
    }

    /* ── SUPPORT CHANNEL CARDS ───────────────── */
    .channel-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    @media(max-width: 900px) { .channel-grid { grid-template-columns: repeat(2,1fr); } }
    @media(max-width: 540px) { .channel-grid { grid-template-columns: 1fr; } }

    .channel-card {
      background: #fff;
      border-radius: var(--card-radius);
      padding: 22px 18px 18px;
      box-shadow: var(--shadow-sm);
      border: 1.5px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: transform .22s, box-shadow .22s;
      position: relative;
      overflow: hidden;
    }
    .channel-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .channel-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      border-radius: 0 0 var(--card-radius) var(--card-radius);
      opacity: 0;
      transition: opacity .2s;
    }
    .channel-card:hover::after { opacity: 1; }
    .channel-card.chat::after    { background: var(--brand); }
    .channel-card.ticket::after  { background: var(--purple); }
    .channel-card.call::after    { background: var(--teal); }
    .channel-card.email::after   { background: var(--amber); }

    .channel-icon-wrap {
      width: 52px; height: 52px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 4px;
    }
    .chat   .channel-icon-wrap { background: var(--brand-light);  color: var(--brand); }
    .ticket .channel-icon-wrap { background: var(--purple-bg);    color: var(--purple); }
    .call   .channel-icon-wrap { background: var(--teal-bg);      color: var(--teal); }
    .email  .channel-icon-wrap { background: var(--amber-bg);     color: var(--amber); }

    .channel-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700; font-size: 1rem;
    }
    .channel-desc { font-size: .82rem; color: var(--muted); line-height: 1.4; }
    .online-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: .78rem; font-weight: 700;
      color: var(--green);
    }
    .online-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--green);
      animation: pulse-dot 1.6s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%,100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .5; transform: scale(1.4); }
    }

    .btn-channel {
      margin-top: 6px;
      width: 100%;
      border-radius: 10px;
      padding: 9px 16px;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: .88rem;
      cursor: pointer;
      transition: all .2s;
      border: 2px solid;
    }
    .chat   .btn-channel { background: var(--brand);   color: #fff; border-color: var(--brand); }
    .ticket .btn-channel { background: transparent;    color: var(--purple); border-color: var(--purple); }
    .call   .btn-channel { background: transparent;    color: var(--teal);   border-color: var(--teal); }
    .email  .btn-channel { background: transparent;    color: var(--amber);  border-color: var(--amber); }

    .chat   .btn-channel:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
    .ticket .btn-channel:hover { background: var(--purple); color: #fff; }
    .call   .btn-channel:hover { background: var(--teal);   color: #fff; }
    .email  .btn-channel:hover { background: var(--amber);  color: #fff; }

    /* ── SECTION HEADING ─────────────────────── */
    .section-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px;
    }
    .section-head h2 {
      font-family: 'Poppins', sans-serif;
      font-weight: 700; font-size: 1.12rem; margin: 0;
    }
    .view-all {
      font-size: .84rem; font-weight: 700;
      color: var(--brand); text-decoration: none;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .view-all:hover { color: var(--brand-hover); }

    /* ── FAQ ACCORDION ───────────────────────── */
    .faq-wrap { display: flex; flex-direction: column; gap: 10px; }

    .faq-item {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: box-shadow .2s;
    }
    .faq-item:hover { box-shadow: var(--shadow-sm); }
    .faq-item.open { border-color: rgba(232,56,13,.25); box-shadow: 0 2px 12px rgba(232,56,13,.08); }

    .faq-q {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px;
      cursor: pointer;
      font-weight: 700; font-size: .93rem;
      user-select: none;
      gap: 12px;
    }
    .faq-q:hover { color: var(--brand); }
    .faq-icon {
      width: 28px; height: 28px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      background: var(--bg);
      color: var(--muted);
      font-size: .8rem;
      flex-shrink: 0;
      transition: background .2s, color .2s, transform .3s;
    }
    .faq-item.open .faq-icon {
      background: var(--brand-light);
      color: var(--brand);
      transform: rotate(180deg);
    }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .3s;
      padding: 0 20px;
      font-size: .87rem;
      color: var(--muted);
      line-height: 1.65;
    }
    .faq-item.open .faq-a {
      max-height: 200px;
      padding: 0 20px 16px;
    }

    /* ── STILL NEED HELP BANNER ──────────────── */
    .still-help-banner {
      background: linear-gradient(135deg, #fff8f6 0%, #fff1ee 100%);
      border: 1.5px solid #fdd8cc;
      border-radius: var(--card-radius);
      padding: 24px 28px;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .still-help-avatar { font-size: 3.5rem; flex-shrink: 0; }
    .still-help-text h3 {
      font-family: 'Poppins', sans-serif;
      font-weight: 800; font-size: 1.1rem;
      margin-bottom: 2px;
    }
    .still-help-text p { color: var(--muted); font-size: .85rem; margin: 0; }
    .still-features {
      display: flex; gap: 28px; flex-wrap: wrap;
      margin-left: auto;
    }
    .still-feat {
      display: flex; align-items: center; gap: 9px;
    }
    .still-feat-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: var(--brand-light);
      color: var(--brand);
      display: flex; align-items: center; justify-content: center;
      font-size: .9rem; flex-shrink: 0;
    }
    .still-feat-title { font-weight: 700; font-size: .85rem; }
    .still-feat-desc  { font-size: .75rem; color: var(--muted); }

    /* ── RIGHT PANEL: HELP TOPICS ────────────── */
    .help-topics-panel, .tickets-panel {
      background: #fff;
      border-radius: var(--card-radius);
      padding: 20px 20px;
      box-shadow: var(--shadow-sm);
      border: 1.5px solid var(--border);
    }

    .topic-item {
      display: flex; align-items: center; gap: 13px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f5;
      cursor: pointer;
      transition: background .15s;
      border-radius: 8px;
      padding-left: 6px;
      padding-right: 6px;
    }
    .topic-item:last-child { border-bottom: none; }
    .topic-item:hover { background: var(--brand-light); }
    .topic-item:hover .topic-title { color: var(--brand); }

    .topic-icon {
      width: 36px; height: 36px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: .95rem; flex-shrink: 0;
    }
    .topic-icon.orders   { background: var(--brand-light);  color: var(--brand); }
    .topic-icon.returns  { background: var(--blue-bg);       color: var(--blue); }
    .topic-icon.payments { background: var(--green-bg);      color: var(--green); }
    .topic-icon.account  { background: var(--teal-bg);       color: var(--teal); }
    .topic-icon.products { background: var(--amber-bg);      color: var(--amber); }
    .topic-icon.prime    { background: var(--amber-bg);      color: var(--gold); }

    .topic-text { flex: 1; }
    .topic-title { font-weight: 700; font-size: .88rem; }
    .topic-sub   { font-size: .75rem; color: var(--muted); }
    .topic-arrow { color: var(--muted); font-size: .78rem; }

    .btn-view-topics {
      width: 100%;
      border: 2px solid var(--brand);
      color: var(--brand);
      background: transparent;
      border-radius: 10px;
      padding: 9px;
      font-weight: 800; font-size: .88rem;
      cursor: pointer;
      margin-top: 14px;
      transition: all .2s;
    }
    .btn-view-topics:hover { background: var(--brand); color: #fff; }

    /* ── SUPPORT TICKETS ─────────────────────── */
    .ticket-item {
      padding: 13px 0;
      border-bottom: 1px solid #f0f0f5;
      cursor: pointer;
      transition: background .15s;
      border-radius: 8px;
      padding-left: 6px; padding-right: 6px;
    }
    .ticket-item:last-child { border-bottom: none; }
    .ticket-item:hover { background: #fafafe; }

    .ticket-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 4px;
    }
    .ticket-id {
      font-family: 'Poppins', sans-serif;
      font-weight: 700; font-size: .88rem;
    }
    .badge-open {
      background: #fff1ee; color: var(--brand);
      border: 1px solid #fdd8cc;
      border-radius: 20px; padding: 2px 10px;
      font-size: .72rem; font-weight: 800;
    }
    .badge-resolved {
      background: var(--green-bg); color: #15803d;
      border: 1px solid #bbf7d0;
      border-radius: 20px; padding: 2px 10px;
      font-size: .72rem; font-weight: 800;
    }
    .ticket-desc { font-size: .82rem; color: var(--text); font-weight: 600; margin-bottom: 2px; }
    .ticket-meta {
      font-size: .75rem; color: var(--muted);
      display: flex; align-items: center; justify-content: space-between;
    }
    .ticket-arrow { color: var(--muted); font-size: .78rem; }

    /* ── ANIMATIONS ──────────────────────────── */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .anim { animation: fadeUp .4s both; }
    .d1 { animation-delay: .05s; }
    .d2 { animation-delay: .12s; }
    .d3 { animation-delay: .19s; }
    .d4 { animation-delay: .26s; }
    .d5 { animation-delay: .33s; }
    .d6 { animation-delay: .40s; }

    .dashboard-card{
  border:none;
  border-radius:20px;
  box-shadow:0 3px 15px rgba(0,0,0,.06);
}
.coins-card{
  background:#fff9ec;
}
.coupon-ticket{
  border:1px dashed #ddd;
  border-radius:18px;
  padding:20px;
  background:#fff;
}
.coupon-code{
  font-size:24px;
  font-weight:700;
  color:var(--orange);
}
.ad-card{
  background:linear-gradient(135deg,#ffefe6,#fff);
}
.slider-card{
  background:#fff;
  border-radius:15px;
  padding:15px;
  text-align:center;
  border:1px solid #eee;
}
.history-item{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid #eee;
}
.feature-box{
  background:#fff;
  border-radius:15px;
  padding:15px;
  text-align:center;
}


/* ═══════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════ */
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}

/* order header bar */
.order-topbar{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 24px;
}
.order-id-wrap{}
.order-id{
  font-size:1.5rem;font-weight:900;font-family:'Nunito',sans-serif;
  color:var(--text-dark);letter-spacing:-.02em;
}
.order-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:.8rem;color:var(--text-mid);margin-top:5px;
}
.order-meta .sep{color:var(--border);font-size:.6rem}
.order-meta strong{color:var(--text-dark)}
.status-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--amber-bg);color:#92400e;
  border:1.5px solid var(--amber-border);
  border-radius:30px;padding:7px 18px;
  font-size:.82rem;font-weight:700;font-family:'Nunito',sans-serif;
  white-space:nowrap;align-self:flex-start;
}
.status-pill i{font-size:.9rem}

/* ═══════════════════════════════════════════════
   TRACKING STEPPER
═══════════════════════════════════════════════ */
.tracker-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 28px 22px;
}
.tracker-heading{
  font-size:.95rem;font-weight:800;font-family:'Nunito',sans-serif;
  margin-bottom:30px;display:flex;align-items:center;gap:8px;color:var(--text-dark);
}
.tracker-heading i{color:var(--brand);font-size:1rem}

/* stepper track */
.stepper-track{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:4px}

/* Base grey line */
.stepper-track::before{
  content:'';position:absolute;
  top:20px;left:calc(10% + 22px);right:calc(10% + 22px);
  height:4px;background:var(--border);border-radius:2px;z-index:0;
}
/* Green progress line - JS sets width via CSS var */
.stepper-track::after{
  content:'';position:absolute;
  top:20px;left:calc(10% + 22px);
  height:4px;background:linear-gradient(to right,var(--green),#22c55e);
  border-radius:2px;z-index:1;
  width:var(--progress,0%);transition:width 1s cubic-bezier(.4,0,.2,1);
}

.step{
  display:flex;flex-direction:column;align-items:center;
  flex:1;position:relative;z-index:2;
}
.step-icon-wrap{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;border:3px solid transparent;
  transition:transform .3s,box-shadow .3s;cursor:default;
  position:relative;z-index:3;
}
.step-icon-wrap:hover{transform:scale(1.1)}

.step.done  .step-icon-wrap{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 0 0 4px rgba(21,146,79,.12)}
.step.active .step-icon-wrap{
  background:var(--amber);border-color:var(--amber);color:#fff;
  animation:stepPulse 2s ease-in-out infinite;
}
.step.pending .step-icon-wrap{background:var(--white);border-color:var(--border);color:var(--text-soft)}

@keyframes stepPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(245,158,11,.15)}
  50%{box-shadow:0 0 0 10px rgba(245,158,11,.06)}
}

.step-label{margin-top:11px;text-align:center}
.step-label strong{
  display:block;font-size:.78rem;font-weight:800;
  font-family:'Nunito',sans-serif;line-height:1.2;
}
.step-label .step-time{font-size:.69rem;color:var(--text-soft);margin-top:4px;line-height:1.4}
.step.done   .step-label strong{color:var(--green)}
.step.active .step-label strong{color:var(--amber)}
.step.pending .step-label strong{color:var(--text-soft)}

/* delivery alert */
.delivery-alert{
  display:flex;align-items:center;gap:10px;
  background:var(--green-bg);border:1px solid var(--green-border);
  border-radius:10px;padding:12px 18px;margin-top:22px;
  font-size:.84rem;color:var(--green);font-weight:600;
}
.delivery-alert i{font-size:1.05rem;flex-shrink:0}

/* ═══════════════════════════════════════════════
   ORDER ITEMS CARD
═══════════════════════════════════════════════ */
.items-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.items-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 16px;border-bottom:1px solid var(--border-light);
}
.items-card-title{font-size:.95rem;font-weight:800;font-family:'Nunito',sans-serif}
.items-count{
  font-size:.73rem;background:var(--brand-pale);color:var(--brand);
  border-radius:20px;padding:2px 9px;font-weight:700;margin-left:6px;
}
.dl-invoice{
  display:flex;align-items:center;gap:5px;
  font-size:.8rem;color:var(--brand);font-weight:700;
  padding:6px 12px;border:1.5px solid currentColor;
  border-radius:7px;transition:all var(--transition);
}
.dl-invoice:hover{background:var(--brand);color:#fff}

/* product rows */
.item-row{
  display:flex;align-items:center;gap:16px;
  padding:16px 24px;border-bottom:1px solid var(--border-light);
  transition:background var(--transition);
}
.item-row:last-of-type{border-bottom:none}
.item-row:hover{background:#fafafa}

.item-thumb{
  width:72px;height:72px;border-radius:10px;flex-shrink:0;
  background:var(--border-light);border:1px solid var(--border);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.item-thumb img{width:100%;height:100%;object-fit:cover}
.item-thumb .thumb-placeholder{
  font-size:1.5rem;color:var(--text-soft);
}

.item-details{flex:1;min-width:0}
.item-name{
  font-size:.86rem;font-weight:700;font-family:'Nunito',sans-serif;
  color:var(--text-dark);line-height:1.35;
}
.item-seller{font-size:.72rem;color:var(--text-soft);margin-top:3px}
.item-price{
  font-size:.85rem;font-weight:800;color:var(--brand);
  margin-top:5px;font-family:'Nunito',sans-serif;
}

.item-qty-badge{
  font-size:.75rem;color:var(--text-mid);background:var(--border-light);
  border:1px solid var(--border);border-radius:6px;padding:3px 9px;
  font-weight:600;flex-shrink:0;white-space:nowrap;
}
.item-total-price{
  font-size:.92rem;font-weight:800;font-family:'Nunito',sans-serif;
  color:var(--text-dark);flex-shrink:0;min-width:56px;text-align:right;
}

/* price details accordion */
.price-accordion{border-top:1px solid var(--border-light)}
.price-accordion-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;cursor:pointer;
  font-size:.84rem;font-weight:600;color:var(--text-mid);
  user-select:none;transition:background var(--transition);
}
.price-accordion-toggle:hover{background:#f9fafb}
.price-accordion-toggle .chevron{transition:transform .3s;font-size:.8rem}
.price-accordion-toggle.open .chevron{transform:rotate(180deg)}

.price-accordion-body{padding:0 24px 18px;display:none}
.price-accordion-body.open{display:block}
.price-line{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.83rem;padding:6px 0;color:var(--text-mid);
}
.price-line:not(:last-child){border-bottom:1px dashed #f3f4f6}
.price-line.grand-total{
  font-size:.92rem;font-weight:800;color:var(--text-dark);
  font-family:'Nunito',sans-serif;
  border-top:2px solid var(--border);border-bottom:none;
  padding-top:12px;margin-top:6px;
}
.price-green{color:var(--green);font-weight:700}
.price-red{color:var(--brand);font-weight:700}

/* action buttons */
.action-strip{
  display:flex;flex-wrap:wrap;gap:12px;
  padding:18px 24px 20px;border-top:1px solid var(--border-light);
}
.btn-primary-brand{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brand);color:#fff;border:none;
  border-radius:10px;padding:11px 24px;
  font-size:.88rem;font-weight:700;font-family:'Nunito',sans-serif;
  cursor:pointer;transition:background var(--transition),transform .15s;
}
.btn-primary-brand:hover{background:var(--brand-hover);transform:translateY(-1px)}
.btn-primary-brand:active{transform:translateY(0)}

.btn-ghost-brand{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--brand);
  border:1.5px solid var(--brand);border-radius:10px;
  padding:11px 20px;font-size:.88rem;font-weight:700;
  font-family:'Nunito',sans-serif;cursor:pointer;
  transition:all var(--transition);
}
.btn-ghost-brand:hover{background:var(--brand-pale)}

/* ═══════════════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════════════ */
.trust-row{
  display:flex;flex-wrap:wrap;gap:8px 0;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 8px;justify-content:space-around;
}
.trust-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  flex:1;min-width:100px;padding:8px 10px;
  border-right:1px solid var(--border-light);
}
.trust-item:last-child{border-right:none}
.trust-icon-wrap{
  width:36px;height:36px;border-radius:50%;
  background:var(--brand-pale);display:flex;align-items:center;justify-content:center;
}
.trust-icon-wrap i{font-size:.95rem;color:var(--brand)}
.trust-label{font-size:.72rem;font-weight:700;font-family:'Nunito',sans-serif;text-align:center;color:var(--text-dark)}
.trust-sub{font-size:.64rem;color:var(--text-soft);text-align:center}

/* ═══════════════════════════════════════════════
   RIGHT COLUMN
═══════════════════════════════════════════════ */
.right-col{width:268px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}

/* generic panel card */
.panel{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.panel-header{
  padding:14px 18px 12px;border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:space-between;
}
.panel-title{
  font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-soft);
}
.panel-body{padding:16px 18px}

/* delivery partner */
.partner-logo-wrap{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--border-light);
}
.bluedart-badge{
  background:#003366;color:#fff;font-weight:900;font-size:.8rem;
  padding:5px 10px;border-radius:6px;font-family:'Nunito',sans-serif;
  letter-spacing:.03em;line-height:1.2;
}
.bluedart-badge .blue{color:#fff}
.bluedart-badge .dart{color:#f59e0b}
.partner-name-text{font-size:.84rem;font-weight:700;color:var(--text-dark)}

.info-block{margin-bottom:12px}
.info-block-label{font-size:.7rem;color:var(--text-soft);margin-bottom:3px;font-weight:500}
.info-block-value{
  font-size:.88rem;font-weight:700;color:var(--text-dark);
  display:flex;align-items:center;gap:7px;
}
.copy-icon{
  background:none;border:none;cursor:pointer;padding:0;
  color:var(--text-soft);font-size:.85rem;transition:color var(--transition);
}
.copy-icon:hover{color:var(--brand)}

.est-del-label{font-size:.7rem;color:var(--text-soft);margin-bottom:2px}
.est-del-date{font-size:.95rem;font-weight:800;color:var(--green);font-family:'Nunito',sans-serif}
.est-del-by{font-size:.75rem;color:var(--text-mid);margin-top:2px}

.btn-track-courier{
  width:100%;border:1.5px solid var(--brand);background:transparent;
  color:var(--brand);border-radius:9px;padding:10px;
  font-weight:700;font-size:.82rem;font-family:'Nunito',sans-serif;
  cursor:pointer;transition:all var(--transition);margin-top:14px;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.btn-track-courier:hover{background:var(--brand);color:#fff}

/* shipping address */
.address-name{font-weight:800;font-family:'Nunito',sans-serif;font-size:.9rem;color:var(--text-dark)}
.address-phone{font-size:.78rem;color:var(--text-mid);margin:3px 0 7px;display:flex;align-items:center;gap:5px}
.address-phone i{color:var(--text-soft);font-size:.8rem}
.address-lines{font-size:.8rem;color:var(--text-mid);line-height:1.6}
.change-link{font-size:.75rem;color:var(--brand);font-weight:700;cursor:pointer;transition:opacity var(--transition)}
.change-link:hover{opacity:.7}
.address-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--blue-bg);color:var(--blue);
  font-size:.64rem;font-weight:700;padding:2px 8px;
  border-radius:20px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em;
}

/* help links */
.help-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border-light);
  cursor:pointer;transition:opacity var(--transition);
}
.help-link:last-child{border-bottom:none;padding-bottom:0}
.help-link:hover{opacity:.72}
.help-icon-box{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.help-icon-box i{font-size:.9rem;color:var(--brand)}
.help-text-block .help-link-title{font-size:.83rem;font-weight:700;font-family:'Nunito',sans-serif}
.help-text-block .help-link-sub{font-size:.71rem;color:var(--text-soft);margin-top:1px}
.help-link-arrow{margin-left:auto;color:var(--text-soft);font-size:.78rem}

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
#toast-stack{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast-chip{
  display:flex;align-items:center;gap:9px;
  background:#111827;color:#fff;
  border-radius:10px;padding:10px 18px;
  font-size:.82rem;font-weight:600;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  animation:toastIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events:all;
}
.toast-chip i{color:#34d399;font-size:.95rem;flex-shrink:0}
@keyframes toastIn{
  from{opacity:0;transform:translateY(16px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.toast-chip.out{
  animation:toastOut .25s ease forwards;
}
@keyframes toastOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(8px)}
}

/* ═══════════════════════════════════════════════
   MOBILE SIDEBAR OVERLAY
═══════════════════════════════════════════════ */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:1040;backdrop-filter:blur(2px);
}
.sidebar-overlay.active{display:block}
.mobile-sidebar{
  position:fixed;top:0;left:-100%;bottom:0;width:275px;
  background:var(--white);z-index:1050;overflow-y:auto;
  transition:left .3s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);
}
.mobile-sidebar.active{left:0}
.mobile-sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#fff3f1,#ffe8e3);
}
.sidebar-close{
  background:none;border:none;cursor:pointer;
  font-size:1.2rem;color:var(--text-mid);padding:4px;
  transition:color var(--transition);
}
.sidebar-close:hover{color:var(--brand)}

/* mobile top bar (no header per requirement, but we need a menu trigger) */
.mobile-topbar{
  display:none;align-items:center;justify-content:space-between;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;
  box-shadow:var(--shadow);
}
.mobile-topbar-title{font-size:.9rem;font-weight:800;font-family:'Nunito',sans-serif}
.mobile-topbar-right{display:flex;align-items:center;gap:8px}
.menu-trigger{
  background:none;border:none;cursor:pointer;
  font-size:1.1rem;color:var(--text-dark);padding:4px;
  display:flex;align-items:center;
}

/* ═══════════════════════════════════════════════
   ENTRY ANIMATIONS
═══════════════════════════════════════════════ */
.fade-up{opacity:0;transform:translateY(14px);animation:fadeUp .4s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.delay-1{animation-delay:.08s}
.delay-2{animation-delay:.16s}
.delay-3{animation-delay:.24s}
.delay-4{animation-delay:.32s}
.delay-5{animation-delay:.40s}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:1180px){
  .right-col{width:248px}
  :root{--sidebar-w:220px}
}
@media(max-width:1024px){
  .sidebar{display:none}
  .mobile-topbar{display:flex}
  .right-col{
    width:100%;flex-direction:row;flex-wrap:wrap;
    position:static;
  }
  .right-col .panel{flex:1 1 260px}
  .layout{flex-wrap:wrap}
  .main-col{width:100%;flex:none}
}
@media(max-width:640px){
  .page-shell{padding:16px 14px 48px}
  .order-topbar{padding:16px 18px}
  .order-id{font-size:1.2rem}
  .tracker-card{padding:20px 16px 18px}
  .stepper-track::before,.stepper-track::after{
    left:calc(10% + 18px);right:calc(10% + 18px);
  }
  .step-icon-wrap{width:38px;height:38px;font-size:.9rem}
  .step-label strong{font-size:.7rem}
  .step-label .step-time{font-size:.63rem}
  .item-row{padding:14px 16px;gap:12px}
  .item-thumb{width:62px;height:62px}
  .items-card-header,.action-strip{padding-left:16px;padding-right:16px}
  .price-accordion-toggle,.price-accordion-body{padding-left:16px;padding-right:16px}
  .trust-row{gap:0}
  .trust-item{min-width:80px;padding:8px 6px}
  .trust-label{font-size:.65rem}
  .trust-sub{font-size:.58rem}
  .panel-body{padding:14px}
  .action-strip{flex-direction:column}
  .btn-primary-brand,.btn-ghost-brand{width:100%;justify-content:center}
}
@media(max-width:420px){
  .step-label .step-time{display:none}
}

/* Notification Item */
.notification-item{
    border:1px solid #ececec;
    border-radius:15px;
    padding:20px;
    margin-bottom:15px;
    transition:.3s;
}

.notification-item:hover{
    box-shadow:0 5px 20px rgba(0,0,0,.06);
}

.icon-circle{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.icon-orange{
    background:#fff0ea;
    color:#ff5722;
}

.icon-purple{
    background:#f5eeff;
    color:#8e44ad;
}

.icon-green{
    background:#eefbf2;
    color:#28a745;
}

.icon-yellow{
    background:#fff9e8;
    color:#f0ad00;
}

.preference{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.preference .info{
    display:flex;
    gap:12px;
    align-items:center;
}

.pref-icon{
    width:45px;
    height:45px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff5ef;
    color:#ff5722;
}