/* =============== RESET & TOKENS =============== */
:root{
  --primary:#4F46E5; --primary-2:#4338CA; --accent:#F59E0B;
  --ink:#0B1220; --muted:#64748B; --line:#E5E7EB; --bg:#F8FAFC; --card:#fff;
  --success:#10B981; --danger:#EF4444; --radius:14px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 25px 50px rgba(15,23,42,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff;color:var(--ink);font-family:'Inter',-apple-system,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.link-arrow{color:var(--primary);font-weight:600;font-size:.9rem;display:inline-flex;gap:6px;align-items:center}
.link-center{display:block;text-align:center;margin-top:14px;color:var(--primary);font-weight:600;font-size:.9rem}
.lnk{color:inherit;font:inherit}

/* =============== BUTTONS =============== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:12px;font-weight:600;font-size:.95rem;transition:.2s;white-space:nowrap}
.btn.lg{padding:14px 26px;font-size:1rem}
.btn.block{width:100%}
.btn.icon{padding:14px}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-2);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn.light{background:#fff;color:var(--primary)}
.btn.outline{background:var(--bg);color:var(--ink)}

/* =============== HEADER =============== */
.hd{position:sticky;top:0;z-index:100;background:#fff;box-shadow:var(--shadow-sm)}
.hd-top{background:var(--ink);color:#fff;font-size:.78rem}
.hd-top-in{display:flex;gap:24px;align-items:center;padding:8px 0}
.hd-top-in span{display:flex;gap:6px;align-items:center;opacity:.9}
.hd-top-right{margin-left:auto;display:flex;gap:16px;align-items:center}
.hd-top-right a{display:flex;gap:6px;align-items:center;opacity:.9}
.hd-top-right a:hover{opacity:1}

.hd-main{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;padding:16px 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.45rem}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#4F46E5,#7C3AED);color:#fff;font-weight:800}
.search{position:relative;display:flex;align-items:center;background:var(--bg);border-radius:12px;
  padding:0 16px;border:1.5px solid transparent;transition:.2s}
.search:focus-within{border-color:var(--primary);background:#fff}
.search i{color:var(--muted)}
.search input{flex:1;border:0;background:transparent;padding:12px;outline:none;font-size:.95rem}
.search-suggest{position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:12px;
  box-shadow:var(--shadow-lg);margin-top:8px;overflow:hidden;display:none;z-index:200;max-height:420px;overflow-y:auto}
.search-suggest a{display:flex;gap:12px;align-items:center;padding:10px 14px}
.search-suggest a:hover{background:var(--bg)}
.search-suggest img{width:44px;height:44px;border-radius:8px;object-fit:cover}

.hd-actions{display:flex;gap:10px}
.icon-btn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--bg);transition:.2s}
.icon-btn:hover{background:var(--primary);color:#fff}
.cart-btn .badge{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;
  font-size:.7rem;font-weight:700;min-width:20px;height:20px;border-radius:10px;
  display:grid;place-items:center;padding:0 5px}

.hd-nav{border-top:1px solid var(--line)}
.hd-nav-in{display:flex;gap:26px;padding:14px 20px;overflow-x:auto;scrollbar-width:none}
.hd-nav-in::-webkit-scrollbar{display:none}
.nv{font-size:.88rem;font-weight:600;color:var(--muted);white-space:nowrap}
.nv:hover{color:var(--primary)}

/* =============== SECTION =============== */
.section{padding:56px 0}
.section.bg-soft{background:var(--bg)}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.section-head h2{font-size:1.65rem;font-weight:800;letter-spacing:-.02em}
.page-head{padding:26px 20px 8px}
.page-head h1{font-size:1.85rem;font-weight:800}

/* =============== HERO =============== */
.hero{background:linear-gradient(135deg,#EEF2FF 0%,#FFF7ED 100%);padding:56px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.eyebrow{display:inline-block;background:#fff;color:var(--primary);padding:6px 14px;border-radius:20px;
  font-size:.78rem;font-weight:600;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.eyebrow.light{background:rgba(255,255,255,.18);color:#fff}
.hero h1{font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:1.04;font-weight:800;letter-spacing:-.03em;margin-bottom:16px}
.hero p{color:var(--muted);font-size:1.08rem;max-width:520px;margin-bottom:26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.hero-stats{display:flex;gap:38px}
.hero-stats strong{display:block;font-size:1.55rem;font-weight:800}
.hero-stats span{font-size:.82rem;color:var(--muted)}
.hero-art{position:relative}
.hero-art img{border-radius:22px;box-shadow:var(--shadow-lg)}
.float-card{position:absolute;background:#fff;padding:12px 18px;border-radius:14px;font-weight:600;font-size:.88rem;
  box-shadow:var(--shadow-lg);display:flex;gap:8px;align-items:center;animation:bob 3s ease-in-out infinite}
.float-card.f1{top:20px;left:-16px;color:var(--primary)}
.float-card.f2{bottom:20px;right:-16px;color:var(--accent);animation-delay:1.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* =============== CATEGORIES =============== */
.cat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.cat-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;
  border-radius:16px;border:1.5px solid var(--line);background:#fff;transition:.2s;text-align:center}
.cat-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow)}
.cat-img{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--bg);display:grid;place-items:center}
.cat-img img{width:100%;height:100%;object-fit:cover}
.cat-card span{font-size:.82rem;font-weight:600}

/* =============== PRODUCT CARD =============== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.pcard{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.25s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow-lg)}
.pcard-img{position:relative;aspect-ratio:1;background:var(--bg);overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard-badge{position:absolute;top:10px;left:10px;background:var(--danger);color:#fff;
  font-size:.72rem;font-weight:700;padding:4px 8px;border-radius:6px}
.pcard-wish{position:absolute;top:10px;right:10px;width:34px;height:34px;background:#fff;border-radius:50%;
  display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:.2s;color:var(--muted)}
.pcard-wish:hover,.pcard-wish.active{background:var(--danger);color:#fff}
.pcard-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard-shop{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.pcard-title{font-size:.9rem;font-weight:600;line-height:1.35;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.pcard-title:hover{color:var(--primary)}
.pcard-rating{font-size:.78rem;color:var(--muted);display:flex;gap:5px;align-items:center}
.pcard-rating i{color:var(--accent)}
.pcard-price{display:flex;gap:8px;align-items:baseline;margin-top:auto}
.pcard-price .price{font-size:1.12rem;font-weight:800}
.pcard-price .strike{font-size:.85rem;color:var(--muted);text-decoration:line-through}
.btn-add{padding:10px;background:var(--ink);color:#fff;border-radius:10px;font-weight:600;font-size:.85rem;
  display:flex;gap:6px;align-items:center;justify-content:center;transition:.2s;width:100%}
.btn-add:hover{background:var(--primary)}
.btn-add.outline{background:var(--bg);color:var(--ink);border:1.5px solid var(--line)}
.btn-add.added{background:var(--success)}

/* =============== DEAL BANNER =============== */
.deal-banner{background:linear-gradient(135deg,#4F46E5,#7C3AED);color:#fff;padding:56px 0;margin:56px 0}
.deal-inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.deal-inner h2{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:800;margin:10px 0}
.deal-inner p{opacity:.9;margin-bottom:22px}
.countdown{display:flex;gap:14px}
.countdown>div{background:rgba(255,255,255,.12);border-radius:14px;padding:14px 20px;text-align:center;min-width:80px}
.countdown strong{display:block;font-size:1.7rem;font-weight:800}
.countdown span{font-size:.72rem;opacity:.8}

/* =============== PRODUCT DETAIL =============== */
.breadcrumb{padding:20px 20px 0;font-size:.85rem;color:var(--muted)}
.breadcrumb a:hover{color:var(--primary)}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:24px 20px 56px}
.pd-main{aspect-ratio:1;background:var(--bg);border-radius:var(--radius);overflow:hidden}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:10px;margin-top:14px}
.thumb{width:70px;height:70px;border-radius:10px;object-fit:cover;cursor:pointer;border:2px solid transparent}
.thumb.active,.thumb:hover{border-color:var(--primary)}
.pd-brand{color:var(--primary);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;margin-bottom:6px}
.pd-info h1{font-size:1.85rem;font-weight:800;line-height:1.2;margin-bottom:12px}
.pd-meta-row{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.rating-pill{background:#FEF3C7;color:#92400E;padding:5px 12px;border-radius:8px;font-size:.82rem;font-weight:600}
.rating-pill i{color:var(--accent)}
.in-stock{color:var(--success);font-weight:600;font-size:.88rem;display:flex;gap:6px;align-items:center}
.out-stock{color:var(--danger);font-weight:600;font-size:.88rem;display:flex;gap:6px;align-items:center}
.pd-price{display:flex;gap:14px;align-items:baseline;margin-bottom:20px}
.pd-price .price{font-size:1.9rem;font-weight:800}
.pd-price .strike{color:var(--muted);text-decoration:line-through}
.pd-price .save{background:#ECFDF5;color:var(--success);padding:4px 10px;border-radius:6px;font-size:.78rem;font-weight:700}
.variant-block{margin:18px 0;display:flex;flex-direction:column;gap:12px}
.variant-opt label{display:block;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.variant-values{display:flex;gap:8px;flex-wrap:wrap}
.vbtn{padding:8px 16px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:.88rem;transition:.2s}
.vbtn.active,.vbtn:hover{border-color:var(--primary);color:var(--primary);background:#EEF2FF}
.pd-desc{color:var(--muted);margin:18px 0}
.pd-shop{padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:18px 0;font-size:.9rem}
.pd-shop a{color:var(--primary);font-weight:600}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.qty button{width:46px;height:48px;background:var(--bg);font-size:1.2rem;transition:.2s}
.qty button:hover{background:var(--primary);color:#fff}
.qty input{width:56px;text-align:center;border:0;outline:none;font-weight:700;font-size:1rem}
.qty.small button{width:34px;height:38px;font-size:1rem}
.qty.small input{width:42px;font-size:.9rem}
.pd-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;font-size:.82rem;color:var(--muted)}
.pd-perks i{color:var(--primary);margin-right:5px}
.pd-section{padding:38px 20px;border-top:1px solid var(--line)}
.pd-section h2{font-size:1.35rem;font-weight:800;margin-bottom:22px}
.spec-group{margin-bottom:22px}
.spec-group h4{font-size:.95rem;color:var(--primary);margin-bottom:10px;font-weight:700}
.spec-table{width:100%;border-collapse:collapse}
.spec-table td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:.88rem}
.spec-table td:first-child{color:var(--muted);width:220px}

.reviews{display:flex;flex-direction:column;gap:16px}
.review{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px;background:var(--bg);border-radius:12px}
.review img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.stars i{color:var(--accent);font-size:.85rem}
.stars small{color:var(--muted);margin-left:8px}

/* =============== CART & CHECKOUT =============== */
.cart-grid{display:grid;grid-template-columns:1fr 380px;gap:28px;padding:24px 20px 56px}
.cart-row{display:grid;grid-template-columns:88px 1fr auto auto auto;gap:18px;align-items:center;
  padding:18px;border:1.5px solid var(--line);border-radius:14px;margin-bottom:12px}
.cart-row img{width:88px;height:88px;border-radius:10px;object-fit:cover}
.ct-title{font-weight:600;font-size:.95rem}
.ct-title:hover{color:var(--primary)}
.ct-variant{font-size:.78rem;color:var(--primary);font-weight:600;margin-top:2px}
.ct-shop{font-size:.78rem;color:var(--muted)}
.ct-price{font-weight:700;color:var(--primary);margin-top:4px}
.ct-total{font-weight:800;font-size:1.05rem;text-align:right;min-width:80px}
.ct-remove{color:var(--danger);padding:8px;font-size:1.05rem}

.cart-summary,.checkout-summary{background:var(--bg);border-radius:var(--radius);padding:24px;height:fit-content;position:sticky;top:180px}
.cart-summary h3,.checkout-summary h3{margin-bottom:18px;font-weight:800;font-size:1.1rem}
.sum-row{display:flex;justify-content:space-between;padding:9px 0;font-size:.9rem;border-bottom:1px solid var(--line)}
.sum-row.total{font-size:1.1rem;font-weight:800;border-bottom:0;padding-top:14px}
.cart-summary .btn,.checkout-summary .btn{margin-top:18px}

.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:28px;padding:24px 20px 56px}
.checkout-main{display:flex;flex-direction:column;gap:18px}
.card{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3{font-size:1.05rem;margin-bottom:16px;font-weight:800;display:flex;gap:8px;align-items:center}
.card h3 i{color:var(--primary)}
.addr-card{display:flex;gap:12px;padding:12px;border:1.5px solid var(--line);border-radius:10px;margin-bottom:10px;cursor:pointer;transition:.2s}
.addr-card:hover{border-color:var(--primary)}
.addr-card input{accent-color:var(--primary);margin-top:4px}
.addr-card p{color:var(--muted);font-size:.83rem;margin-top:4px}
.coupon-row{display:flex;gap:10px}
.coupon-row input{flex:1;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;outline:none;font-size:.9rem}
.coupon-row input:focus{border-color:var(--primary)}
.coupon-msg{font-size:.83rem;margin-top:8px;font-weight:600}
.pay-opt{display:flex;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:10px;margin-bottom:10px;cursor:pointer}
.pay-opt:hover{border-color:var(--primary)}
.pay-opt input{accent-color:var(--primary)}
.pay-opt span{display:flex;gap:8px;align-items:center;font-weight:600}
.pay-opt i{color:var(--primary)}

/* =============== EMPTY / TOAST =============== */
.empty-state{text-align:center;padding:80px 20px}
.empty-state i{font-size:3rem;color:var(--line);margin-bottom:14px;display:block}
.empty-state h3{margin-bottom:8px;font-size:1.3rem}
.empty-state p{color:var(--muted);margin-bottom:20px}

/* .toast-host{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{background:#fff;padding:14px 20px;border-radius:12px;box-shadow:var(--shadow-lg);
  font-weight:600;font-size:.9rem;border-left:4px solid var(--primary);min-width:220px;
  transform:translateX(120%);transition:.35s}
.toast.show{transform:translateX(0)} */
.toast.success{border-left-color:var(--success)}
.toast.error{border-left-color:var(--danger)}

/* =============== FOOTER =============== */
.ft{background:var(--ink);color:#fff;padding:56px 0 0;margin-top:56px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px}
.ft h4{margin-bottom:16px;font-size:1rem;font-weight:700}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft a{color:rgba(255,255,255,.7);font-size:.9rem}
.ft a:hover{color:#fff}
.ft-brand{color:#fff;margin-bottom:14px;font-size:1.4rem}
.ft .muted{color:rgba(255,255,255,.6);font-size:.9rem;margin-bottom:16px}
.ft-social{display:flex;gap:12px}
.ft-social a{width:38px;height:38px;background:rgba(255,255,255,.08);border-radius:10px;
  display:grid;place-items:center;color:#fff;font-size:.9rem}
.ft-social a:hover{background:var(--primary)}
.store-btn{display:inline-flex;gap:10px;align-items:center;background:rgba(255,255,255,.08);
  padding:12px 20px;border-radius:12px;font-weight:600;color:#fff}
.store-btn:hover{background:var(--primary)}
.ft-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;color:rgba(255,255,255,.6);font-size:.82rem}

/* =============== RESPONSIVE =============== */
@media (max-width: 1024px) {
  .hero-grid,.pd-grid,.cart-grid,.checkout-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr}
  .cart-summary,.checkout-summary{position:static}
}
@media (max-width: 640px) {
  .hd-top-in span:nth-child(2),.hd-top-in span:nth-child(3){display:none}
  .hd-main{grid-template-columns:auto 1fr;gap:12px}
  .search{grid-column:1/-1;order:3}
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .deal-inner{grid-template-columns:1fr}
  .countdown>div{padding:10px 14px;min-width:62px}
  .countdown strong{font-size:1.3rem}
  .cart-row{grid-template-columns:70px 1fr;gap:12px;padding:14px}
  .cart-row img{width:70px;height:70px}
  .cart-row .qty,.cart-row .ct-total{grid-column:2;justify-self:start}
  .pd-perks{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
}
/* ========== BRAND GRID (Home) ========== */
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.brand-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px;background:#fff;border:1.5px solid var(--line);border-radius:14px;transition:.2s}
.brand-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow)}
.brand-card img{width:56px;height:56px;object-fit:contain;background:var(--bg);border-radius:10px;padding:8px}
.brand-card span{font-size:.82rem;font-weight:600}

/* ========== LISTING / FILTERS ========== */
.listing-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;padding:24px 20px 56px}
.filters{background:var(--bg);border-radius:14px;padding:22px;height:fit-content;position:sticky;top:180px}
.filter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.filter-head h3{font-size:1rem;display:flex;gap:8px;align-items:center;font-weight:800}
.filter-group{border-top:1px solid var(--line);padding:14px 0}
.filter-group h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;font-weight:700}
.filter-scroll{max-height:220px;overflow-y:auto;padding-right:6px}
.check{display:flex;gap:10px;align-items:center;padding:6px 0;cursor:pointer;font-size:.88rem}
.check input{accent-color:var(--primary);width:16px;height:16px}
.price-inputs{display:flex;gap:8px;align-items:center}
.price-inputs input{width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:.85rem;outline:none;font-family:inherit}
.price-inputs input:focus{border-color:var(--primary)}
.price-inputs span{color:var(--muted)}
.listing-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.lt-count{font-size:.9rem;color:var(--muted)}
.lt-count strong{color:var(--ink)}
.lt-actions{display:flex;gap:10px;align-items:center}
.sort-select{padding:9px 14px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:.88rem;background:#fff}
.filter-toggle{display:none;padding:9px 14px;background:var(--primary);color:#fff;border-radius:10px;font-weight:600;font-size:.85rem}

/* ========== PAGINATION ========== */
.pagination-wrap{margin-top:32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.pagination{display:flex;gap:6px;flex-wrap:wrap}
.pg-item{padding:8px 14px;border:1.5px solid var(--line);border-radius:10px;font-weight:600;font-size:.85rem;background:#fff;transition:.2s}
.pg-item:hover{border-color:var(--primary);color:var(--primary)}
.pg-item.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pg-item.disabled{opacity:.4;pointer-events:none}
.pg-dots{padding:8px 6px;color:var(--muted)}
.pagination-info{color:var(--muted);font-size:.85rem}

/* ========== CART EXTRAS ========== */
.cart-img img{width:88px;height:88px;border-radius:10px;object-fit:cover}
.mt-2{margin-top:14px}
.mt-3{margin-top:22px}
.mb-1{margin-bottom:6px}
.mb-2{margin-bottom:14px}
.mb-3{margin-bottom:22px}
.mt-1{margin-top:6px}
.link{color:var(--primary);font-weight:600;font-size:.9rem;display:inline-flex;gap:6px;align-items:center}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.section-sub{font-size:1.1rem;font-weight:800}

/* ========== CHECKOUT EXTRAS ========== */
.no-address{text-align:center;padding:20px}
.no-address p{margin-bottom:14px}
.address-list{display:flex;flex-direction:column;gap:10px}
.addr-info{flex:1}
.addr-name{display:flex;gap:10px;align-items:center;margin-bottom:4px}
.addr-type{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;background:var(--bg);padding:2px 8px;border-radius:6px;font-weight:700;color:var(--muted)}
.addr-phone{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.addr-text{font-size:.85rem;color:var(--muted);line-height:1.5}
.pay-opt{display:flex;gap:14px;padding:16px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:12px;cursor:pointer;transition:.2s;align-items:flex-start}
.pay-opt:hover{border-color:var(--primary);background:#FAFAFF}
.pay-opt input{margin-top:5px;accent-color:var(--primary)}
.pay-ico{width:40px;height:40px;background:var(--bg);border-radius:10px;display:grid;place-items:center;color:var(--primary);font-size:1rem;flex-shrink:0}
.pay-opt strong{display:block;font-weight:700;margin-bottom:2px}
.pay-opt small{color:var(--muted);font-size:.8rem}

/* ========== ACCOUNT ========== */
.account-head{padding:30px 20px 12px}
.acc-greet{display:flex;gap:16px;align-items:center}
.acc-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow)}
.acc-greet h1{font-size:1.5rem;font-weight:800;margin-bottom:2px}
.account-grid{display:grid;grid-template-columns:260px 1fr;gap:28px;padding:20px 20px 56px}
.account-nav{position:sticky;top:180px;height:fit-content}
.acc-nav{background:var(--bg);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px}
.acc-nav a,.acc-nav button{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;font-weight:600;font-size:.9rem;color:var(--ink);transition:.15s;text-align:left;width:100%}
.acc-nav a:hover,.acc-nav button:hover{background:#fff;color:var(--primary)}
.acc-nav a.active{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}
.acc-nav i{width:18px;text-align:center;color:var(--muted)}
.acc-nav a.active i{color:var(--primary)}
.acc-logout{margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.acc-logout button{color:var(--danger)}
.acc-logout button i{color:var(--danger)}
.account-main{min-height:400px}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:8px;padding:22px;border:1.5px solid var(--line);border-radius:14px;background:#fff;transition:.2s}
.tile:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow)}
.tile i{font-size:1.5rem;color:var(--primary)}
.tile h4{font-size:1rem;font-weight:800}
.tile p{font-size:.82rem;color:var(--muted);margin:0}

/* Orders */
.orders-list{display:flex;flex-direction:column;gap:14px}
.order-card{border:1.5px solid var(--line);border-radius:14px;padding:18px;background:#fff;transition:.2s}
.order-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.oc-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.oc-no{font-weight:700;font-size:.95rem}
.oc-date{font-size:.8rem;color:var(--muted);margin-top:2px}
.oc-status{font-size:.75rem;font-weight:700;padding:5px 12px;border-radius:8px;text-transform:uppercase;letter-spacing:.04em;background:#FEF3C7;color:#92400E}
.status-delivered,.status-completed{background:#ECFDF5;color:#059669}
.status-cancelled{background:#FEE2E2;color:#B91C1C}
.status-shipped,.status-out_for_delivery{background:#DBEAFE;color:#1D4ED8}
.oc-body{display:flex;gap:14px;align-items:center;padding:14px 0}
.oc-imgs{display:flex;gap:8px}
.oc-imgs img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.oc-info{flex:1}
.oc-info strong{font-size:.92rem;display:block;margin-bottom:4px}
.oc-info span{font-size:.82rem}
.oc-foot{display:flex;justify-content:flex-end}

/* Order detail */
.order-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:22px;padding:20px 20px 56px}
.order-detail-main{display:flex;flex-direction:column;gap:18px}
.order-detail-side{display:flex;flex-direction:column;gap:18px}
.order-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.order-item:last-child{border-bottom:0}
.order-item img{width:64px;height:64px;border-radius:10px;object-fit:cover}
.oi-info strong{font-size:.92rem;display:block;margin-bottom:2px}
.oi-info small{display:block;color:var(--muted);font-size:.78rem;margin-bottom:4px}
.oi-info span{font-size:.82rem}
.oi-status{display:inline-block;margin-top:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--primary);background:#EEF2FF;padding:3px 10px;border-radius:6px}
.oi-total{font-weight:800;color:var(--primary)}
.pay-method{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.pay-method i{color:var(--primary)}

/* Timeline */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline-step{position:relative;padding-bottom:18px}
.timeline-step:last-child{padding-bottom:0}
.ts-dot{position:absolute;left:-22px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.timeline-step.active .ts-dot{background:var(--success);border-color:var(--success)}
.ts-body strong{display:block;font-size:.9rem;margin-bottom:2px}
.ts-body p{font-size:.82rem;color:var(--muted);margin:0 0 4px}
.ts-body small{font-size:.75rem;color:var(--muted)}

/* Address book */
.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.addr-box{border:1.5px solid var(--line);border-radius:14px;padding:18px;background:#fff;position:relative;transition:.2s}
.addr-box:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.addr-box.default{border-color:var(--primary);background:#FAFAFF}
.addr-badge{position:absolute;top:12px;right:12px;background:var(--primary);color:#fff;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.04em;text-transform:uppercase}
.addr-actions{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.btn.sm{padding:8px 14px;font-size:.82rem}
.btn.danger{color:var(--danger)}
.btn.danger:hover{background:#FEE2E2}

/* Wallet */
.wallet-hero{background:linear-gradient(135deg,#4F46E5,#7C3AED);color:#fff;border-radius:18px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;box-shadow:var(--shadow-lg)}
.wh-label{display:block;font-size:.85rem;opacity:.85;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.wallet-hero h2{font-size:2.3rem;font-weight:800;letter-spacing:-.02em}
.tx-list{display:flex;flex-direction:column;gap:4px}
.tx-row{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
.tx-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ECFDF5;color:#059669;font-size:.9rem}
.tx-icon.tx-debit{background:#FEE2E2;color:#B91C1C}
.tx-icon.tx-refund{background:#DBEAFE;color:#1D4ED8}
.tx-info strong{font-size:.9rem;display:block}
.tx-info small{font-size:.78rem;color:var(--muted)}
.tx-amount{font-weight:700;color:var(--success)}
.tx-row:nth-child(even) .tx-amount.positive{color:var(--success)}
.quick-amounts{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.quick-amt{padding:8px 16px;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;font-weight:600;font-size:.85rem;transition:.2s}
.quick-amt:hover{border-color:var(--primary);color:var(--primary)}

/* Notifications */
.notif-list{display:flex;flex-direction:column;gap:10px}
.notif-row{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px;background:#fff;border:1.5px solid var(--line);border-radius:12px}
.notif-icon{width:44px;height:44px;border-radius:50%;background:#EEF2FF;color:var(--primary);display:grid;place-items:center}
.notif-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:4px}
.notif-head strong{font-size:.92rem}
.notif-head small{font-size:.78rem;color:var(--muted);white-space:nowrap}
.notif-body p{font-size:.85rem;color:var(--muted);margin:0}

/* Profile */
.profile-avatar-row{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.profile-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow)}

/* Modal */
/* .modal-backdrop{position:fixed;inset:0;background:rgba(11,18,32,.55);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px} */
/* Rename .modal-backdrop to .custom-modal-backdrop */

/* ========== WALLET TOP-UP MODAL REDESIGN ========== */
#topup-modal .custom-modal {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#topup-modal .modal-head {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    padding: 20px 24px;
    border-bottom: none;
}

#topup-modal .modal-head h3 {
    color: #fff;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

#topup-modal .modal-close {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: 0.2s;
}

#topup-modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

#topup-modal .modal-body {
    padding: 24px;
}

#topup-modal .modal-subtitle {
    font-size: 0.88rem;
    color: #64748B;
    margin-bottom: 20px;
}

#topup-modal .field label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0B1220;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: block;
}

/* Amount Input Group */
#topup-modal .amount-input-group {
    display: flex;
    align-items: center;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.2s;
    background: #fff;
}

#topup-modal .amount-input-group:focus-within {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

#topup-modal .currency-symbol {
    background: #F8FAFC;
    color: #64748B;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 1.1rem;
    border-right: 1.5px solid #E5E7EB;
}

#topup-modal .amount-input-group input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0B1220;
    outline: none;
    width: 100%;
}

#topup-modal .amount-input-group input::placeholder {
    font-weight: 500;
    color: #CBD5E1;
}

/* Quick Amount Chips */
#topup-modal .quick-amounts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0 24px;
}

#topup-modal .quick-amt {
    flex: 1;
    min-width: 60px;
    padding: 10px 8px;
    background: #F8FAFC;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #64748B;
    transition: 0.2s;
    text-align: center;
}

#topup-modal .quick-amt:hover,
#topup-modal .quick-amt.active {
    border-color: #4F46E5;
    color: #4F46E5;
    background: #EEF2FF;
}

/* Pay Button */
#topup-modal .btn.primary {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    border: none;
    padding: 14px;
    font-size: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}

#topup-modal .btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

/* Secure Note */
#topup-modal .secure-note {
    text-align: center;
    font-size: 0.75rem;
    color: #94A3B8;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.custom-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
}

/* Force display when the class is added */
.custom-modal-backdrop.is-open {
    display: flex !important;
}

/* Rename .modal to .custom-modal */
.custom-modal {
    background: #fff;
    border-radius: 18px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    position: relative;
}

/* Keep your inner modal styles */
.custom-modal .modal-head {
    display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);
}
.custom-modal .modal-body {
    padding:24px;
}
/* .modal{background:#fff;border-radius:18px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)} */
/* .modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)} */
.custom-modal .modal-head h3{font-size:1.1rem;font-weight:800}
.custom-modal .modal-close{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg);transition:.2s}
.custom-modal .modal-close:hover{background:var(--danger);color:#fff}
/* .modal-body{padding:24px} */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.radio-row{display:flex;gap:16px;padding:8px 0}
.radio-row label{display:flex;gap:6px;align-items:center;cursor:pointer;font-size:.9rem}
.radio-row input{accent-color:var(--primary)}

/* Responsive */
@media (max-width: 1024px) {
    .listing-layout,.account-grid,.order-detail-grid,.cart-grid,.checkout-grid{grid-template-columns:1fr}
    .filters,.account-nav{position:static}
    .filter-toggle{display:inline-flex}
    .brand-grid{grid-template-columns:repeat(4,1fr)}
    .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px) {
    .brand-grid{grid-template-columns:repeat(3,1fr)}
    .tiles{grid-template-columns:1fr 1fr}
    .grid-2,.grid-3{grid-template-columns:1fr}
    .modal-body{padding:18px}
    .notif-head{flex-direction:column;gap:4px;align-items:flex-start}
    .notif-head small{white-space:normal}
    .order-item{grid-template-columns:56px 1fr}
    .oi-total{grid-column:2;text-align:left;margin-top:6px}
    .timeline{padding-left:18px}
}
/* =====================================================================
   BOOTSTRAP OVERRIDES — Alokha theme for the address modal
   ===================================================================== */

/* Modal width — Bootstrap's modal-lg is 800px; we want 720px */
@media (min-width: 992px) {
    #addr-modal .modal-lg { max-width: 720px; }
}

/* Modal header icon */
.mh-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #EEF2FF, #FFF7ED);
    color: #4F46E5;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
#addr-modal .modal-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0B1220;
}
#addr-modal .modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid #E5E7EB;
}
#addr-modal .modal-body {
    padding: 8px 24px 20px;
}
#addr-modal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #E5E7EB;
    gap: 8px;
}

/* Section dividers */
#addr-modal .form-section {
    padding: 18px 0;
    border-bottom: 1px dashed #E5E7EB;
}
#addr-modal .form-section:last-child { border-bottom: 0; }

#addr-modal .form-section-title {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748B;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#addr-modal .form-section-title i { color: #4F46E5; }

/* Form label */
#addr-modal .form-label {
    font-size: .82rem;
    font-weight: 700;
    color: #0B1220;
    margin-bottom: 6px;
}

/* Form control */
#addr-modal .form-control,
#addr-modal .input-group-text {
    border: 1.5px solid #E5E7EB;
    padding: 10px 14px;
    font-size: .92rem;
    border-radius: 10px;
    background: #fff;
    transition: .15s;
}
#addr-modal .input-group-text {
    background: #F8FAFC;
    color: #64748B;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 10px;
}
#addr-modal .input-group .form-control {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#addr-modal .input-group:focus-within .input-group-text {
    border-color: #4F46E5;
    color: #4F46E5;
}
#addr-modal .form-control:focus {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* Segmented control (Home / Office / Other) */
.segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: #F8FAFC;
    padding: 6px;
    border-radius: 12px;
    border: 1.5px solid #E5E7EB;
}
.seg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    color: #64748B;
    cursor: pointer;
    transition: .18s;
    text-align: center;
    user-select: none;
    margin: 0;
    background: transparent;
    border: 0;
}
.seg-btn:hover { color: #4F46E5; background: #fff; }
.btn-check:checked + .seg-btn {
    background: #fff;
    color: #4F46E5;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}

/* Switch */
#addr-modal .form-switch .form-check-input {
    width: 42px;
    height: 22px;
    margin-top: 0;
    cursor: pointer;
    border-color: #CBD5E1;
    background-color: #CBD5E1;
}
#addr-modal .form-switch .form-check-input:checked {
    background-color: #4F46E5;
    border-color: #4F46E5;
}
#addr-modal .form-check-label {
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}

/* Save button */
#addr-modal .btn-primary {
    background: #4F46E5;
    border: 0;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 10px;
}
#addr-modal .btn-primary:hover { background: #4338CA; }
#addr-modal .btn-primary:disabled { opacity: .65; }

#addr-modal .btn-light {
    background: #fff;
    border: 1.5px solid #E5E7EB;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 10px;
    color: #0B1220;
}
#addr-modal .btn-light:hover { background: #F8FAFC; border-color: #CBD5E1; }

/* Mobile */
@media (max-width: 640px) {
    .segmented { grid-template-columns: 1fr; }
    .seg-btn { justify-content: flex-start; }
}

/* =====================================================================
   FIX: Bootstrap modal height + scroll
   ===================================================================== */

/* Constrain modal to 90% of viewport height */
#addr-modal .modal-dialog {
    max-height: calc(100vh - 40px);
}

#addr-modal .modal-content {
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 16px;
    overflow: hidden;          /* keep rounded corners clean */
}

/* Header pinned at top */
#addr-modal .modal-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

/* Body is the ONLY scrolling region */
#addr-modal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Slim, modern scrollbar */
#addr-modal .modal-body::-webkit-scrollbar {
    width: 8px;
}
#addr-modal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}
#addr-modal .modal-body::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 20px;
}
#addr-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Footer pinned at bottom */
#addr-modal .modal-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 2;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, .04);
}

/* Small screens: full-height modal */
@media (max-width: 640px) {
    #addr-modal .modal-dialog {
        max-height: 100vh;
        margin: 0;
    }
    #addr-modal .modal-content {
        max-height: 100vh;
        border-radius: 0;
        min-height: 100vh;
    }
}

/* =====================================================================
   PROFILE PAGE — Modern redesign
   ===================================================================== */

/* --- Hero Card --- */
.profile-hero {
    position: relative;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid var(--line);
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}
.profile-hero-bg {
    height: 90px;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 60%, #F59E0B 140%);
    position: relative;
}
.profile-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 80%, rgba(255,255,255,.18), transparent 45%),
        radial-gradient(circle at 85% 20%, rgba(255,255,255,.12), transparent 40%);
}
.profile-hero-body {
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 0 26px 22px;
    margin-top: -46px;
    position: relative;
}
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar-lg {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
    background: #fff;
}
.avatar-edit {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: .85rem;
    border: 3px solid #fff;
    transition: .2s;
    box-shadow: 0 4px 10px rgba(79, 70, 229, .35);
}
.avatar-edit:hover {
    background: var(--primary-2);
    transform: scale(1.08);
}
.profile-hero-info { padding-top: 46px; }
.profile-hero-info h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -.01em;
}
.profile-hero-info p {
    font-size: .88rem;
    margin-bottom: 10px;
}
.profile-hero-info p i { color: var(--primary); margin-right: 4px; }
.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ECFDF5;
    color: #059669;
    font-size: .75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: .02em;
}
.profile-badge i { font-size: .75rem; }

/* --- Form Card --- */
.profile-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

/* Section */
.profile-card .form-section {
    padding: 20px 0;
    border-bottom: 1px dashed var(--line);
}
.profile-card .form-section:first-child { padding-top: 0; }
.profile-card .form-section:last-of-type { border-bottom: 0; }

.profile-card .form-section-title {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-card .form-section-title i { color: var(--primary); }

/* Labels */
.profile-card .form-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

/* Input group */
.profile-card .input-group {
    border-radius: 10px;
    overflow: hidden;
}
.profile-card .input-group-text {
    background: var(--bg);
    color: var(--muted);
    border: 1.5px solid var(--line);
    border-right: 0;
    padding: 0 14px;
    font-size: .9rem;
    min-width: 44px;
    justify-content: center;
    transition: .15s;
}
.profile-card .form-control {
    border: 1.5px solid var(--line);
    border-left: 0;
    padding: 11px 14px;
    font-size: .92rem;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: .15s;
    border-radius: 0;
}
.profile-card .form-control:focus {
    border-color: var(--primary);
    box-shadow: none;
    z-index: 1;
}
.profile-card .form-control:disabled {
    background: #F1F5F9;
    color: var(--muted);
    cursor: not-allowed;
}
.profile-card .input-group:focus-within .input-group-text {
    border-color: var(--primary);
    color: var(--primary);
    background: #EEF2FF;
}
.profile-card .input-group:has(.form-control:disabled) .input-group-text {
    background: #F1F5F9;
}
.profile-card small.text-muted { font-size: .76rem; }

/* Status grid */
.status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.status-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
    border: 1.5px solid var(--line);
    transition: .2s;
}
.status-item:hover {
    border-color: var(--primary);
    background: #fff;
}
.status-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.status-icon.success { background: #ECFDF5; color: #059669; }
.status-icon.primary { background: #EEF2FF; color: var(--primary); }
.status-item strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 2px;
}
.status-item small {
    display: block;
    font-size: .78rem;
    color: var(--muted);
}

/* Actions row */
.profile-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 22px;
    margin-top: 6px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .profile-card { padding: 20px; }
    .profile-hero-body { padding: 0 18px 18px; gap: 16px; }
    .profile-avatar-lg { width: 88px; height: 88px; border-width: 4px; }
    .profile-hero-info { padding-top: 40px; }
    .profile-hero-info h2 { font-size: 1.15rem; }
    .status-grid { grid-template-columns: 1fr; }
    .profile-actions { flex-direction: column-reverse; }
    .profile-actions .btn { width: 100%; }
}

/* =====================================================================
   CHECKOUT — Modern redesign
   ===================================================================== */

.checkout-head {
    padding: 30px 20px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.checkout-head h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; }
.checkout-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 10px;
}
.step.active {
    background: #EEF2FF;
    border-color: #C7D2FE;
    color: var(--primary);
}
.step.active i { color: var(--primary); }
.step i { color: var(--muted); }

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    padding: 20px 20px 56px;
}
.checkout-main { display: flex; flex-direction: column; gap: 18px; }

/* Card */
.card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    transition: .2s;
}
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 12px;
}
.card-head h3 {
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
}
.card-head h3 i { color: var(--primary); font-size: 1rem; }

/* No address */
.no-address { text-align: center; padding: 24px 12px; }
.no-address-ico {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #EEF2FF;
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin: 0 auto 14px;
}
.no-address h4 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.no-address p { margin-bottom: 16px; font-size: .88rem; }

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

.addr-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: .18s;
    margin: 0;
    position: relative;
}
.addr-card:hover {
    border-color: var(--primary);
    background: #FAFAFF;
}
.addr-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.addr-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: .18s;
}
.addr-card input:checked ~ .addr-radio {
    border-color: var(--primary);
    background: var(--primary);
}
.addr-card input:checked ~ .addr-radio::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}
.addr-card:has(input:checked) {
    border-color: var(--primary);
    background: linear-gradient(180deg, #FAFAFF 0%, #fff 70%);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .08);
}
.addr-info { flex: 1; }
.addr-name {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.addr-name strong { font-size: .96rem; font-weight: 700; }
.addr-type {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--bg);
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 700;
    color: var(--muted);
}
.addr-default-tag {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #ECFDF5;
    color: #059669;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 700;
}
.addr-phone {
    font-size: .84rem;
    color: var(--muted);
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.addr-text {
    font-size: .86rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

/* Coupon */
.coupon-row { display: flex; gap: 10px; }
.coupon-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.coupon-input-wrap > i {
    position: absolute;
    left: 14px;
    color: var(--muted);
    font-size: .9rem;
    pointer-events: none;
}
.coupon-input-wrap input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: .92rem;
    font-family: inherit;
    outline: none;
    transition: .15s;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--ink);
}
.coupon-input-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.coupon-msg { font-size: .82rem; margin-top: 10px; font-weight: 600; }

/* Payment options */
.pay-opt {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: .18s;
    position: relative;
    margin: 0 0 10px;
}
.pay-opt:hover {
    border-color: var(--primary);
    background: #FAFAFF;
}
.pay-opt:has(input:checked) {
    border-color: var(--primary);
    background: linear-gradient(180deg, #FAFAFF 0%, #fff 70%);
    box-shadow: 0 4px 14px rgba(79,70,229,.08);
}
.pay-opt input[type="radio"] {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.pay-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.pay-ico-razor  { background: #EEF2FF; color: #4F46E5; }
.pay-ico-cod    { background: #FEF3C7; color: #B45309; }
.pay-ico-wallet { background: #ECFDF5; color: #059669; }
.pay-text { flex: 1; }
.pay-text strong { display: block; font-size: .95rem; font-weight: 700; margin-bottom: 2px; }
.pay-text small { color: var(--muted); font-size: .8rem; }
.pay-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #EEF2FF;
    color: var(--primary);
    padding: 3px 8px;
    border-radius: 20px;
}

/* Summary sidebar */
.checkout-summary {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    height: fit-content;
    position: sticky;
    top: 180px;
    box-shadow: var(--shadow-sm);
}
.summary-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, #FAFAFF, #fff);
}
.summary-head h3 {
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
}
.summary-head h3 i { color: var(--primary); }
.summary-body { padding: 18px 22px 6px; }
.summary-body .sum-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-size: .9rem;
    border-bottom: 1px solid #F1F5F9;
    color: var(--muted);
}
.summary-body .sum-row strong { color: var(--ink); font-weight: 600; }
.summary-body .sum-row:last-child { border-bottom: 0; }
.coupon-row-sum strong { color: #059669 !important; }

.summary-total {
    padding: 16px 22px;
    background: linear-gradient(135deg, #EEF2FF, #FFF7ED);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}
.summary-total .grand {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin-top: 2px;
}
.summary-total .muted { color: var(--muted); }

.checkout-summary .btn.primary {
    margin: 0 22px;
    width: calc(100% - 44px);
}
.checkout-summary .link-center {
    padding: 14px 22px 0;
    margin: 0;
}

.trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 18px 22px 20px;
    border-top: 1px dashed var(--line);
    margin-top: 16px;
}
.trust-row > div {
    text-align: center;
    font-size: .72rem;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.trust-row i {
    font-size: .95rem;
    color: var(--primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
}
@media (max-width: 640px) {
    .checkout-head { padding: 20px 20px 0; }
    .checkout-steps { width: 100%; overflow-x: auto; }
    .step { font-size: .76rem; padding: 6px 10px; }
    .card { padding: 18px; }
    .checkout-summary { border-radius: 14px; }
    .pay-ico { width: 38px; height: 38px; font-size: .95rem; }
    .pay-badge { position: static; margin-left: auto; }
    .pay-opt { flex-wrap: wrap; }
    .coupon-row { flex-direction: column; }
    .coupon-row .btn { width: 100%; }
    .trust-row { grid-template-columns: repeat(3, 1fr); }
}
/* =====================================================================
   ORDER ITEM ACTIONS — Cancel / Return / Replace
   ===================================================================== */

.order-item-rich {
    display: grid !important;
    grid-template-columns: 80px 1fr auto !important;
    gap: 18px !important;
    padding: 18px !important;
    align-items: flex-start !important;
}
.order-item-rich > img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px !important;
    object-fit: cover;
}
.oi-variant {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 600;
    margin-top: 2px;
}
.oi-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: .84rem;
    color: var(--muted);
    margin-top: 6px;
}
.oi-meta strong { color: var(--ink); }
.oi-sep { opacity: .5; }

.oi-status-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.oi-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 6px;
    background: #EEF2FF;
    color: var(--primary);
}
.oi-status.status-delivered,
.oi-status.status-completed { background: #ECFDF5; color: #059669; }
.oi-status.status-cancelled,
.oi-status.status-returned  { background: #FEE2E2; color: #B91C1C; }
.oi-status.status-shipped,
.oi-status.status-out_for_delivery { background: #DBEAFE; color: #1D4ED8; }
.oi-status.status-refunded  { background: #D1FAE5; color: #047857; }

.oi-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}
.tag-warning { background: #FEF3C7; color: #B45309; }
.tag-success { background: #ECFDF5; color: #059669; }

.oi-hint {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: .78rem;
    color: #B45309;
    background: #FFFBEB;
    padding: 6px 10px;
    border-radius: 8px;
    margin-top: 8px;
    border: 1px solid #FDE68A;
}
.oi-hint i { color: #B45309; }

.oi-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    min-width: 180px;
}
.oi-actions .oi-total {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
}
.oi-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    transition: .18s;
    cursor: pointer;
}
.btn-action:hover { transform: translateY(-1px); }

.btn-cancel {
    color: var(--danger);
    border-color: #FCA5A5;
}
.btn-cancel:hover {
    background: #FEE2E2;
    border-color: var(--danger);
}

.btn-return {
    color: #B45309;
    border-color: #FDE68A;
}
.btn-return:hover {
    background: #FEF3C7;
    border-color: #F59E0B;
}

.btn-replace {
    color: var(--primary);
    border-color: #C7D2FE;
}
.btn-replace:hover {
    background: #EEF2FF;
    border-color: var(--primary);
}

/* ============ Action modal helpers ============ */
.mh-icon.mh-danger  { background: #FEE2E2; color: var(--danger); }
.mh-icon.mh-primary { background: #EEF2FF; color: var(--primary); }
.mh-icon.mh-success { background: #ECFDF5; color: #059669; }

.alert-soft {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .84rem;
    line-height: 1.5;
    border: 1px solid transparent;
}
.alert-soft i { margin-top: 2px; flex-shrink: 0; }
.alert-soft.alert-info  { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }
.alert-soft.alert-warn  { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }

/* Reason list */
.reason-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}
.reason-option {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: .15s;
    background: #fff;
    margin: 0;
    font-size: .88rem;
    font-weight: 500;
}
.reason-option:hover {
    border-color: var(--primary);
    background: #FAFAFF;
}
.reason-option input { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
.reason-option:has(input:checked) {
    border-color: var(--primary);
    background: #EEF2FF;
    font-weight: 600;
}

/* Upload box */
.upload-box {
    border: 2px dashed var(--line);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    background: #FAFAFF;
    cursor: pointer;
    transition: .2s;
    position: relative;
    overflow: hidden;
}
.upload-box:hover {
    border-color: var(--primary);
    background: #EEF2FF;
}
.upload-inner i {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 8px;
    display: block;
}
.upload-inner strong {
    display: block;
    font-size: .92rem;
    margin-bottom: 4px;
}
.upload-inner small { color: var(--muted); font-size: .78rem; }

.upload-preview {
    max-width: 100%;
    max-height: 220px;
    border-radius: 10px;
    object-fit: cover;
    margin: 0 auto;
    display: block;
    cursor: pointer;
}

/* Textarea */
.modal .form-control {
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    transition: .15s;
    resize: vertical;
}
.modal .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* Danger button */
.btn-danger {
    background: var(--danger) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 10px;
}
.btn-danger:hover { background: #DC2626 !important; }
.btn-danger:disabled { opacity: .65; }

/* ============ Responsive ============ */
@media (max-width: 720px) {
    .order-item-rich {
        grid-template-columns: 64px 1fr !important;
        gap: 12px !important;
    }
    .order-item-rich > img { width: 64px !important; height: 64px !important; }
    .oi-actions {
        grid-column: 2;
        align-items: flex-start;
        min-width: 0;
        width: 100%;
    }
    .oi-btns { justify-content: flex-start; }
    .btn-action { padding: 7px 12px; font-size: .78rem; }
}


/* ============ PINCODE CHECK ============ */
.pincode-check {
    border: 1.5px dashed var(--line);
    border-radius: 12px;
    padding: 16px;
    margin-top: 18px;
    background: #FAFAFF;
}
.pc-head {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: 12px;
    color: var(--ink);
}
.pc-head i { color: var(--primary); }
.pc-input-row { display: flex; gap: 8px; }
.pc-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .04em;
    outline: none;
    background: #fff;
}
.pc-input:focus { border-color: var(--primary); }
.pc-btn {
    padding: 10px 18px;
    background: var(--ink);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    font-size: .88rem;
    transition: .2s;
}
.pc-btn:hover { background: var(--primary); }
.pc-result {
    margin-top: 10px;
    font-size: .85rem;
    display: flex;
    gap: 6px;
    align-items: center;
}
.orders-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.orders-filter { display: flex; gap: 8px; align-items: center; }
.orders-filter .input-icon { position: relative; }
.orders-filter .input-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .85rem;
    pointer-events: none;
}
.orders-filter input {
    padding: 9px 12px 9px 34px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-family: inherit;
    font-size: .88rem;
    outline: none;
    width: 220px;
    font-weight: 600;
    letter-spacing: .03em;
}
.orders-filter input:focus { border-color: var(--primary); }
.track-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    flex-wrap: wrap;
}
/* =====================================================================
   HELP CENTER
   ===================================================================== */

/* ---------- Hero ---------- */
.help-hero {
    background: linear-gradient(135deg, #EEF2FF 0%, #FFF7ED 100%);
    padding: 60px 0 72px;
    position: relative;
    overflow: hidden;
}
.help-hero-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}
.help-hero-content h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}
.help-hero-content p {
    color: var(--muted);
    font-size: 1.05rem;
    margin-bottom: 26px;
}

.help-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    padding: 6px 6px 6px 18px;
    box-shadow: 0 10px 30px rgba(15,23,42,.08);
    max-width: 600px;
    border: 1.5px solid transparent;
    transition: .2s;
}
.help-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 12px 36px rgba(79,70,229,.15);
}
.help-search i {
    color: var(--muted);
    font-size: 1rem;
    margin-right: 10px;
}
.help-search input {
    flex: 1;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: .95rem;
    padding: 12px 0;
    color: var(--ink);
    background: transparent;
}
.help-search-btn {
    padding: 12px 22px;
    background: var(--ink);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    font-size: .9rem;
    transition: .2s;
}
.help-search-btn:hover { background: var(--primary); }

.help-quick-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
    font-size: .85rem;
}
.help-quick-tags .muted { font-weight: 600; }
.help-quick-tags .tag {
    padding: 6px 12px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    font-weight: 600;
    font-size: .8rem;
    color: var(--ink);
    transition: .18s;
}
.help-quick-tags .tag:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #EEF2FF;
}

.help-hero-art {
    position: relative;
    height: 260px;
    display: grid;
    place-items: center;
}
.help-art-ico {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 4rem;
    box-shadow: 0 25px 50px rgba(79,70,229,.35);
    position: relative;
    z-index: 2;
    animation: helpFloat 4s ease-in-out infinite;
}
@keyframes helpFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.help-art-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .35;
}
.help-art-blob.b1 {
    width: 220px; height: 220px;
    background: #F59E0B;
    top: 0; right: 20px;
    animation: helpFloat 5s ease-in-out infinite;
}
.help-art-blob.b2 {
    width: 180px; height: 180px;
    background: #7C3AED;
    bottom: 0; left: 20px;
    animation: helpFloat 6s ease-in-out infinite reverse;
}

/* ---------- Category cards ---------- */
.help-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
.help-cat-card {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    transition: .22s;
    position: relative;
}
.help-cat-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(15,23,42,.09);
}
.hc-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.hc-body { flex: 1; }
.hc-body h4 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 3px;
}
.hc-body p {
    font-size: .82rem;
    color: var(--muted);
    margin-bottom: 4px;
}
.hc-count {
    font-size: .75rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.hc-arrow {
    color: var(--muted);
    transition: .22s;
}
.help-cat-card:hover .hc-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

/* ---------- FAQ ---------- */
.faq-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.faq-tab {
    padding: 9px 18px;
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid var(--line);
    font-weight: 600;
    font-size: .85rem;
    color: var(--muted);
    transition: .18s;
    white-space: nowrap;
}
.faq-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.faq-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: .18s;
}
.faq-item[open] {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(79,70,229,.08);
}
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 700;
    font-size: .95rem;
    list-style: none;
    user-select: none;
    transition: .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--primary); }
.faq-item[open] summary { color: var(--primary); }

.faq-q { flex: 1; }
.faq-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #EEF2FF;
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: .8rem;
    flex-shrink: 0;
    transition: .22s;
}
.faq-item[open] .faq-icon { background: var(--primary); color: #fff; }

.faq-a {
    padding: 0 22px 22px;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.65;
    border-top: 1px dashed var(--line);
    padding-top: 16px;
    margin-top: 4px;
}
.faq-a a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

/* ---------- Contact ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.contact-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 28px 24px;
    text-align: center;
    transition: .22s;
    position: relative;
    overflow: hidden;
}
.contact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    transition: .22s;
}
.contact-wa::before    { background: #25D366; }
.contact-mail::before  { background: #4F46E5; }
.contact-phone::before { background: #F59E0B; }

.contact-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 50px rgba(15,23,42,.12);
}
.cc-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    font-size: 1.6rem;
    transition: .22s;
}
.contact-wa .cc-icon    { background: #DCFCE7; color: #16A34A; }
.contact-mail .cc-icon  { background: #EEF2FF; color: #4F46E5; }
.contact-phone .cc-icon { background: #FEF3C7; color: #B45309; }
.contact-card:hover .cc-icon { transform: scale(1.08); }

.contact-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.contact-card p {
    font-size: .86rem;
    color: var(--muted);
    margin-bottom: 14px;
}
.cc-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--primary);
}
.contact-wa .cc-action    { color: #16A34A; }
.contact-phone .cc-action { color: #B45309; }

/* ---------- CTA strip ---------- */
.help-cta {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #fff;
    padding: 48px 0;
    margin-top: 56px;
}
.help-cta-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
}
.help-cta h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 800;
    margin-bottom: 6px;
}
.help-cta p { opacity: .9; font-size: .95rem; }
.help-cta-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .help-hero-inner { grid-template-columns: 1fr; }
    .help-hero-art { display: none; }
    .contact-grid { grid-template-columns: 1fr; }
    .help-cta-inner { grid-template-columns: 1fr; text-align: center; }
    .help-cta-btns { justify-content: center; }
}
@media (max-width: 640px) {
    .help-hero { padding: 40px 0 50px; }
    .help-search { flex-wrap: wrap; padding: 12px; gap: 8px; }
    .help-search i { margin-left: 4px; }
    .help-search input { padding: 8px 0; min-width: 100%; }
    .help-search-btn { width: 100%; }
    .help-cat-grid { grid-template-columns: 1fr; }
    .contact-card { padding: 22px 20px; }
    .faq-item summary { padding: 15px 16px; font-size: .9rem; }
    .faq-a { padding: 0 16px 18px; padding-top: 14px; }
}

/* =====================================================================
   FLOATING CONTACT WIDGET (WhatsApp + Chat)
   ===================================================================== */

.fcw {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.fcw > * { pointer-events: auto; }

/* ---------- Main toggle button ---------- */
.fcw-main {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    font-size: 1.6rem;
    display: grid;
    place-items: center;
    box-shadow:
        0 8px 22px rgba(37, 211, 102, .45),
        0 2px 6px rgba(0, 0, 0, .15);
    transition: transform .25s, box-shadow .25s;
    cursor: pointer;
    border: 0;
    outline: none;
}

.fcw-main:hover {
    transform: scale(1.08);
    box-shadow:
        0 12px 28px rgba(37, 211, 102, .55),
        0 2px 8px rgba(0, 0, 0, .2);
}

.fcw-main:active { transform: scale(.97); }

/* Icon crossfade */
.fcw-ico-default,
.fcw-ico-open {
    position: absolute;
    transition: opacity .25s, transform .35s;
}
.fcw-ico-default { opacity: 1; transform: rotate(0deg) scale(1); }
.fcw-ico-open    { opacity: 0; transform: rotate(-90deg) scale(.5); }

.fcw.open .fcw-ico-default { opacity: 0; transform: rotate(90deg) scale(.5); }
.fcw.open .fcw-ico-open    { opacity: 1; transform: rotate(0deg) scale(1); }

/* Pulse ring */
.fcw-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: fcwPulse 2.2s ease-out infinite;
    pointer-events: none;
}

@keyframes fcwPulse {
    0%   { transform: scale(1);    opacity: .7; }
    100% { transform: scale(1.7);  opacity: 0;  }
}

/* Green unread dot (optional) */
.fcw-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #EF4444;
    border: 2.5px solid #fff;
    animation: fcwBob 2s ease-in-out infinite;
}
@keyframes fcwBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* ---------- Menu ---------- */
.fcw-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    opacity: 0;
    transform: translateY(15px) scale(.95);
    transition: opacity .28s, transform .28s;
    pointer-events: none;
    margin-bottom: 4px;
}

.fcw.open .fcw-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Menu item */
.fcw-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 16px;
    background: #fff;
    border-radius: 30px;
    box-shadow:
        0 8px 24px rgba(15, 23, 42, .12),
        0 2px 6px rgba(15, 23, 42, .06);
    border: 1px solid #E5E7EB;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    opacity: 0;
    transform: translateX(20px);
}

.fcw.open .fcw-item {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered entrance */
.fcw.open .fcw-item:nth-child(1) { transition-delay: .05s; }
.fcw.open .fcw-item:nth-child(2) { transition-delay: .10s; }
.fcw.open .fcw-item:nth-child(3) { transition-delay: .15s; }
.fcw.open .fcw-item:nth-child(4) { transition-delay: .20s; }

.fcw-item:hover {
    transform: translateX(-4px) scale(1.02);
    box-shadow:
        0 12px 32px rgba(15, 23, 42, .18),
        0 4px 10px rgba(15, 23, 42, .08);
    border-color: transparent;
}

.fcw-label {
    font-size: .85rem;
    font-weight: 600;
    color: #0B1220;
    white-space: nowrap;
    padding-right: 4px;
}

.fcw-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #fff;
    flex-shrink: 0;
    transition: transform .2s;
}

.fcw-item:hover .fcw-icon { transform: rotate(-8deg) scale(1.05); }

/* Per-channel colors */
.fcw-wa .fcw-icon    { background: linear-gradient(135deg, #25D366, #128C7E); }
.fcw-call .fcw-icon  { background: linear-gradient(135deg, #F59E0B, #B45309); }
.fcw-help .fcw-icon  { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.fcw-mail .fcw-icon  { background: linear-gradient(135deg, #EC4899, #BE185D); }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 640px) {
    .fcw {
        bottom: 18px;
        right: 18px;
        gap: 10px;
    }
    .fcw-main {
        width: 54px;
        height: 54px;
        font-size: 1.45rem;
    }
    .fcw-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .fcw-label {
        font-size: .8rem;
    }
    .fcw-item {
        padding: 5px 5px 5px 14px;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .fcw-pulse,
    .fcw-dot,
    .fcw-main,
    .fcw-item {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   FOOTER v2 — Contact + Brand
   ===================================================================== */

.ft {
    background: #0B1220;
    color: #fff;
    padding: 56px 0 0;
    margin-top: 56px;
}
.ft-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 40px;
}

/* Column */
.ft-col h4 {
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: .01em;
}
.ft-col.mt-4, .mt-4 { margin-top: 24px; }

/* Brand column */
.ft-brand-col { max-width: 360px; }
.ft-brand {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 14px;
}
.ft-desc {
    color: rgba(255,255,255,.65);
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 22px;
}

/* Contact list */
.ft-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ft-contact-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .88rem;
    color: rgba(255,255,255,.75);
    line-height: 1.55;
}
.ft-contact-list strong {
    color: #fff;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}
.ft-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(79,70,229,.18);
    color: #A5B4FC;
    display: grid;
    place-items: center;
    font-size: .85rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.ft-contact-list a {
    color: rgba(255,255,255,.75);
    transition: color .18s;
}
.ft-contact-list a:hover { color: #fff; }

/* Links */
.ft-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ft-links a {
    color: rgba(255,255,255,.65);
    font-size: .88rem;
    transition: color .18s, padding-left .18s;
    display: inline-block;
}
.ft-links a:hover {
    color: #fff;
    padding-left: 4px;
}

/* Social */
.ft-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ft-social a {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .9rem;
    transition: .2s;
}
.ft-social a:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

/* App store button */
.store-btn {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    background: rgba(255,255,255,.08);
    padding: 12px 18px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    transition: .2s;
    border: 1px solid rgba(255,255,255,.06);
}
.store-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.store-btn i { font-size: 1.5rem; }
.store-btn small {
    display: block;
    font-size: .65rem;
    letter-spacing: .08em;
    opacity: .75;
    text-transform: uppercase;
}
.store-btn strong { font-size: .95rem; }

.ft-muted-sm {
    font-size: .85rem;
    color: rgba(255,255,255,.55);
    line-height: 1.55;
    margin-bottom: 16px;
}

/* Payments */
.ft-payments {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.ft-payments i {
    font-size: 1.9rem;
    color: rgba(255,255,255,.55);
    transition: color .2s;
}
.ft-payments i:hover { color: #fff; }

/* Bottom bar */
.ft-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
    color: rgba(255,255,255,.55);
    font-size: .82rem;
}
.ft-bottom-in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ft-bottom-links {
    display: flex;
    gap: 10px;
    align-items: center;
}
.ft-bottom-links a {
    color: rgba(255,255,255,.55);
    transition: color .18s;
}
.ft-bottom-links a:hover { color: #fff; }

/* Responsive */
@media (max-width: 1024px) {
    .ft-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .ft-grid { grid-template-columns: 1fr; gap: 30px; }
    .ft-bottom-in { flex-direction: column; text-align: center; }
    .ft-bottom-links { justify-content: center; }
}

/* =====================================================================
   CONTACT PAGE
   ===================================================================== */

.contact-hero {
    background: linear-gradient(135deg, #EEF2FF 0%, #FFF7ED 100%);
    padding: 60px 0 50px;
    text-align: center;
}
.contact-hero .eyebrow {
    background: #fff;
    color: var(--primary);
    margin-bottom: 14px;
}
.contact-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 12px;
}
.contact-hero p {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto;
}

.contact-cards-section { padding: 50px 0 20px; }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.contact-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 28px 24px;
    text-align: center;
    transition: .22s;
    position: relative;
    overflow: hidden;
}
.contact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    transition: .22s;
}
.contact-wa::before    { background: #25D366; }
.contact-mail::before  { background: #4F46E5; }
.contact-phone::before { background: #F59E0B; }

.contact-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 50px rgba(15,23,42,.12);
}
.cc-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    font-size: 1.6rem;
    transition: .22s;
}
.contact-wa .cc-icon    { background: #DCFCE7; color: #16A34A; }
.contact-mail .cc-icon  { background: #EEF2FF; color: #4F46E5; }
.contact-phone .cc-icon { background: #FEF3C7; color: #B45309; }
.contact-card:hover .cc-icon { transform: scale(1.08); }
.contact-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.contact-card p {
    font-size: .86rem;
    color: var(--muted);
    margin-bottom: 14px;
}
.cc-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--primary);
}
.contact-wa .cc-action    { color: #16A34A; }
.contact-phone .cc-action { color: #B45309; }

/* Split section */
.contact-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}

/* Office info */
.contact-office h2,
.contact-form-card h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -.01em;
}
.contact-office > p,
.contact-form-card > p {
    font-size: .92rem;
    margin-bottom: 26px;
}

.office-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.office-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.of-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EEF2FF;
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.office-list strong {
    font-size: .92rem;
    font-weight: 800;
    display: block;
    margin-bottom: 4px;
}
.office-list p {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}
.office-list a {
    color: var(--primary);
    font-weight: 600;
}
.office-list a:hover { text-decoration: underline; }

.office-socials {
    display: flex;
    gap: 10px;
}
.office-socials a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: .9rem;
    transition: .2s;
}
.office-socials a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-3px);
}

/* Form card */
.contact-form-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.contact-form .form-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.contact-form .form-control {
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: .92rem;
    font-family: inherit;
    outline: none;
    transition: .15s;
    background: #fff;
    width: 100%;
}
.contact-form .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.contact-form textarea.form-control {
    resize: vertical;
    min-height: 130px;
}
.contact-form .input-icon { position: relative; }
.contact-form .input-icon > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .9rem;
    pointer-events: none;
}
.contact-form .input-icon .form-control {
    padding-left: 40px;
}
.contact-form select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 38px;
}

/* Map */
.contact-map-section { padding: 60px 0 20px; }
.map-wrap {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15,23,42,.1);
    border: 1.5px solid var(--line);
}
.map-wrap iframe {
    display: block;
    width: 100%;
    filter: grayscale(8%);
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-split { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .contact-hero { padding: 40px 0 32px; }
    .contact-form-card { padding: 22px; }
    .office-list strong { font-size: .88rem; }
    .map-wrap iframe { height: 320px; }
}
/* =====================================================================
   VENDOR REGISTRATION PAGE
   ===================================================================== */

/* Hero */
.vendor-hero {
    background: linear-gradient(135deg, #EEF2FF 0%, #FFF7ED 100%);
    padding: 60px 0 72px;
    overflow: hidden;
}
.vendor-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}
.vh-content h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 16px;
}
.vh-content h1 .hl {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.vh-content p {
    color: var(--muted);
    font-size: 1.05rem;
    margin-bottom: 28px;
    max-width: 520px;
}
.vh-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.vh-stats { display: flex; gap: 40px; }
.vh-stats strong { display: block; font-size: 1.5rem; font-weight: 800; }
.vh-stats span { font-size: .82rem; color: var(--muted); }

.vh-art { position: relative; }
.vh-art img { border-radius: 22px; box-shadow: var(--shadow-lg); }
.vh-art .float-card { position: absolute; }

/* Benefits */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.benefit-card {
    padding: 26px 22px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    transition: .22s;
}
.benefit-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.bn-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin-bottom: 16px;
}
.benefit-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.benefit-card p {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

/* Steps */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.step-card {
    padding: 26px 22px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    position: relative;
    transition: .22s;
}
.step-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 14px;
    box-shadow: 0 8px 20px rgba(79,70,229,.25);
}
.step-card h4 { font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
.step-card p { font-size: .85rem; color: var(--muted); margin: 0; line-height: 1.55; }

/* Form */
.vendor-form-wrap {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.vf-section {
    padding: 22px 0;
    border-bottom: 1px dashed var(--line);
}
.vf-section:first-of-type { padding-top: 0; }
.vf-section:last-of-type { border-bottom: 0; }
.vf-section-title {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.vf-section-title i { color: var(--primary); font-size: .95rem; }

.vendor-form-wrap .form-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.vendor-form-wrap .form-control {
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: .92rem;
    font-family: inherit;
    outline: none;
    transition: .15s;
    background: #fff;
    width: 100%;
}
.vendor-form-wrap .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.vendor-form-wrap textarea.form-control { resize: vertical; min-height: 90px; }
.vendor-form-wrap select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 38px;
}
.vendor-form-wrap .input-icon { position: relative; }
.vendor-form-wrap .input-icon > i {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .9rem;
    pointer-events: none;
}
.vendor-form-wrap .input-icon .form-control { padding-left: 40px; }

/* Upload */
.vendor-form-wrap .upload-box {
    border: 2px dashed var(--line);
    border-radius: 12px;
    padding: 26px 16px;
    text-align: center;
    background: #FAFAFF;
    cursor: pointer;
    transition: .2s;
}
.vendor-form-wrap .upload-box:hover {
    border-color: var(--primary);
    background: #EEF2FF;
}
.vendor-form-wrap .upload-inner i {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 8px;
    display: block;
}
.vendor-form-wrap .upload-inner strong {
    display: block;
    font-size: .92rem;
    margin-bottom: 4px;
}
.vendor-form-wrap .upload-inner small { color: var(--muted); font-size: .78rem; }
.vendor-form-wrap .upload-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 10px;
    object-fit: cover;
    margin: 0 auto;
    cursor: pointer;
}

/* Terms */
.check-tall {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    background: #FFFBEB;
    border: 1.5px solid #FDE68A;
    border-radius: 12px;
    cursor: pointer;
    font-size: .88rem;
    line-height: 1.6;
    color: #78350F;
}
.check-tall input {
    accent-color: var(--primary);
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.check-tall a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Actions */
.vf-actions {
    padding-top: 24px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}
.vf-actions .btn { min-width: 240px; }
.vf-actions p { font-size: .85rem; margin: 0; }

/* Status panel */
.status-panel {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 12px;
    border: 1.5px solid transparent;
}
.status-panel i { font-size: 1.5rem; margin-top: 2px; flex-shrink: 0; }
.status-panel strong {
    display: block;
    font-size: .78rem;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.status-panel p { font-size: .86rem; margin: 0 0 4px; color: var(--ink); line-height: 1.5; }
.status-panel small { font-size: .78rem; color: var(--muted); }

/* Responsive */
@media (max-width: 900px) {
    .vendor-hero-inner { grid-template-columns: 1fr; }
    .vh-art { display: none; }
}
@media (max-width: 640px) {
    .vendor-hero { padding: 40px 0 50px; }
    .vh-stats { gap: 22px; }
    .vendor-form-wrap { padding: 20px; }
    .vf-actions .btn { width: 100%; }
}

/* =====================================================================
   OUT OF STOCK — Web only
   ===================================================================== */

/* --- Product card tag --- */
.pcard-oos {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #0B1220;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: .05em;
    text-transform: uppercase;
    z-index: 2;
}

/* Dim out-of-stock card images */
.pcard.is-out-of-stock .pcard-img img {
    opacity: .55;
    filter: grayscale(35%);
}
.pcard.is-out-of-stock:hover .pcard-img img {
    transform: none;
}

/* Disabled add-to-cart button on cards */
.pcard .btn-add[disabled] {
    opacity: .8;
    cursor: not-allowed;
    background: var(--bg);
    color: var(--muted);
    border: 1.5px solid var(--line);
}
.pcard .btn-add[disabled]:hover {
    background: var(--bg);
    color: var(--muted);
    transform: none;
}

/* --- Product detail page --- */
.pd-oos-tag {
    display: inline-block;
    background: #0B1220;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: 10px;
    vertical-align: middle;
}

.out-of-stock-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    font-size: .88rem;
    line-height: 1.5;
    margin-top: 12px;
}
.out-of-stock-notice i {
    color: #B45309;
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}