/* ════════════════════════════════════════
   SHOPYLNE — Professional Stylesheet
════════════════════════════════════════ */
:root {
  --cream: #FAF8F5;
  --cream-2: #F0EBE0;
  --white: #FFFFFF;
  --ink: #1A1A1A;
  --ink-2: #5C5753;
  --gold: #C9A96E;
  --gold-dim: rgba(201,169,110,.10);
  --gold-bg: rgba(201,169,110,.10);
  --gold-border: rgba(201,169,110,.25);
  --ink-light: #5C5753;
  --gray: #8A8A8A;
  --gray-light: #EDE9E1;
  --error: #DC2626;
  --success: #16A34A;
  --nav-h: 56px;
  --tab-h: 64px;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
  --sh: 0 1px 8px rgba(26,26,26,.07);
  --sh-md: 0 4px 24px rgba(26,26,26,.11);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font-family:inherit}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
svg{display:block;flex-shrink:0}

/* ── Loader ── */
#loader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .4s}
#loader.out{opacity:0;pointer-events:none}
.ldr-logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;font-weight:300;letter-spacing:6px;color:var(--cream)}
.ldr-logo b{color:var(--gold);font-weight:400}
.ldr-bar{width:80px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.ldr-bar::after{content:'';display:block;height:100%;width:40%;background:var(--gold);border-radius:2px;animation:ldr 1s ease-in-out infinite alternate}
@keyframes ldr{from{transform:translateX(0)}to{transform:translateX(150%)}}

/* ── Toast ── */
#toast{position:fixed;bottom:calc(var(--tab-h) + 12px);left:50%;transform:translateX(-50%) translateY(20px);z-index:9990;background:var(--ink);color:var(--cream);border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh-md);max-width:320px;width:calc(100% - 32px);opacity:0;transition:all .3s;pointer-events:none;border-left:3px solid var(--gold)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.t-success{border-left-color:var(--success)}
#toast.t-error{border-left-color:var(--error)}
#toast-title{font-size:13px;font-weight:600;margin-bottom:2px}
#toast-msg{font-size:12px;opacity:.7;line-height:1.4}

/* ── Pages ── */
.page{display:none;min-height:100dvh;padding-top:var(--nav-h);padding-bottom:var(--tab-h)}
.page.active{display:block}
#page-auth{padding-top:0}

/* ── Top Nav ── */
#top-nav{position:fixed;top:0;left:0;right:0;z-index:800;height:var(--nav-h);background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(201,169,110,.15)}
.nav-logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:300;letter-spacing:4px;color:var(--cream);cursor:pointer;user-select:none}
.nav-logo span{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:4px}
.nav-icon-btn{width:38px;height:38px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(250,248,245,.7);border-radius:var(--r-sm);transition:background .15s;position:relative}
.nav-icon-btn:hover{background:rgba(255,255,255,.07);color:var(--cream)}
.nav-badge{position:absolute;top:4px;right:4px;min-width:15px;height:15px;background:var(--gold);color:var(--ink);font-size:9px;font-weight:700;border-radius:999px;display:none;align-items:center;justify-content:center;padding:0 3px}
.nav-badge.on{display:flex}
.nav-user-btn{width:32px;height:32px;border-radius:50%;background:var(--gold-dim);border:1px solid var(--gold-border);color:var(--gold);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── Bottom Tabs ── */
#bottom-tabs{position:fixed;bottom:0;left:0;right:0;z-index:800;height:var(--tab-h);background:var(--ink);display:flex;align-items:stretch;border-top:1px solid rgba(201,169,110,.15)}
.tab-item{flex:1;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(250,248,245,.35);transition:color .2s;position:relative}
.tab-item.active{color:var(--gold)}
.tab-item svg{width:20px;height:20px}
.tab-item span{font-size:9px;font-weight:500;letter-spacing:.3px}
.tab-dot{position:absolute;top:10px;right:calc(50% - 16px);width:5px;height:5px;border-radius:50%;background:var(--gold);display:none}
.tab-dot.on{display:block}

/* ── Page header ── */
.pg-header{padding:16px;display:flex;align-items:center;gap:12px}
.back-btn{width:36px;height:36px;border:none;background:var(--gray-light);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;transition:background .15s}
.back-btn:hover{background:var(--cream-2)}
.pg-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:400;letter-spacing:1px}

/* ── Section title ── */
.sec-title{font-size:15px;font-weight:600;color:var(--ink);padding:0 16px;margin:16px 0 10px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:var(--r);border:none;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.2px;transition:opacity .15s,transform .1s;user-select:none}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover:not(:disabled){opacity:.9}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover:not(:disabled){opacity:.85}
.btn-outline{background:transparent;border:1.5px solid var(--gold);color:var(--gold)}
.btn-outline:hover:not(:disabled){background:var(--gold-dim)}
.btn-ghost{background:var(--gray-light);color:var(--ink);border:none}
.btn-ghost:hover:not(:disabled){background:var(--cream-2)}
.btn-danger{background:var(--error);color:var(--white)}
.btn-danger:hover:not(:disabled){opacity:.88}
.btn-success{background:var(--success);color:var(--white)}
.btn-full{width:100%}
.btn-sm{padding:7px 12px;font-size:12px}
.btn-xs{padding:5px 9px;font-size:11px;border-radius:6px}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-sm svg{width:14px;height:14px}

/* ── Inputs ── */
.fg{margin-bottom:12px}
.fg label{display:block;font-size:11px;font-weight:500;color:var(--ink-2);margin-bottom:5px;letter-spacing:.3px;text-transform:uppercase}
.input{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);background:var(--white);font-size:14px;color:var(--ink);outline:none;transition:border-color .2s}
.input:focus{border-color:var(--gold)}
.input::placeholder{color:var(--gray)}
.input.err{border-color:var(--error)}
textarea.input{resize:vertical;min-height:72px}
.select{width:100%;padding:10px 14px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);background:var(--white);font-size:13px;color:var(--ink);outline:none;cursor:pointer;appearance:none}
.select:focus{border-color:var(--gold)}

/* ── Cards ── */
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}

/* ── Product Grid ── */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 10px}
.prod-card{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);cursor:pointer;position:relative;transition:box-shadow .2s}
.prod-card:hover{box-shadow:var(--sh-md)}
.prod-card-img{width:100%;aspect-ratio:1;background:var(--gray-light);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.prod-card-img img{width:100%;height:100%;object-fit:cover}
.prod-card-body{padding:10px}
.prod-card-name{font-size:12px;font-weight:500;color:var(--ink);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.prod-card-price{font-size:14px;font-weight:700;color:var(--gold)}
.prod-card-old{font-size:11px;color:var(--gray);text-decoration:line-through;margin-left:4px}
.prod-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:3px}
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.3px}
.badge-new{background:#1D4ED8;color:#fff}
.badge-promo{background:var(--error);color:#fff}
.badge-flash{background:#D97706;color:#fff}
.badge-out{background:var(--gray);color:#fff}
.prod-add-btn{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .15s}
.prod-add-btn:active{transform:scale(.88)}
.prod-add-btn svg{width:14px;height:14px}

/* ── Horizontal scroll ── */
.hscroll{display:flex;gap:10px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hcard{flex-shrink:0;width:138px;background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);cursor:pointer}
.hcard-img{width:100%;height:130px;background:var(--gray-light);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.hcard-img img{width:100%;height:100%;object-fit:cover}
.hcard-body{padding:8px}
.hcard-name{font-size:11px;font-weight:500;color:var(--ink);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcard-price{font-size:12px;font-weight:700;color:var(--gold)}

/* ── Category chips ── */
.cat-scroll{display:flex;gap:8px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-chip{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:var(--ink);border:1px solid rgba(201,169,110,.2);cursor:pointer;transition:all .2s;white-space:nowrap}
.cat-chip svg{width:14px;height:14px;color:var(--gold)}
.cat-chip span{font-size:11px;font-weight:500;color:rgba(250,248,245,.8);letter-spacing:.2px}
.cat-chip:hover,.cat-chip.active{background:var(--gold);border-color:var(--gold)}
.cat-chip:hover span,.cat-chip.active span{color:var(--ink)}
.cat-chip:hover svg,.cat-chip.active svg{color:var(--ink)}

/* ── Home Hero ── */
.hero{background:var(--ink);padding:72px 20px 28px;position:relative;overflow:hidden}
.hero-eyebrow{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.hero-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px;font-weight:300;color:var(--cream);line-height:1.15;margin-bottom:6px}
.hero-title em{color:var(--gold);font-style:italic}
.hero-sub{font-size:13px;color:rgba(250,248,245,.5);margin-bottom:22px;line-height:1.5}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ── Search bar ── */
.search-bar{margin:12px 16px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 16px;cursor:pointer}
.search-bar svg{color:var(--gray);width:16px;height:16px;flex-shrink:0}
.search-bar-text{flex:1;font-size:14px;color:var(--gray)}

/* ── Search overlay ── */
#search-ov{position:fixed;inset:0;z-index:850;background:var(--cream);display:none;flex-direction:column}
#search-ov.open{display:flex}
.search-ov-head{background:var(--ink);padding:56px 16px 12px;display:flex;gap:10px;align-items:center}
.search-ov-input{flex:1;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 14px}
.search-ov-input svg{color:var(--gray);width:15px;height:15px;flex-shrink:0}
.search-ov-input input{flex:1;background:none;border:none;outline:none;font-size:15px;color:var(--cream)}
.search-ov-input input::placeholder{color:rgba(255,255,255,.3)}
.search-cancel{color:var(--gold);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;padding:4px}
.search-body{flex:1;overflow-y:auto;padding:16px}
.search-sec{margin-bottom:20px}
.search-sec-title{font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.search-tags{display:flex;flex-wrap:wrap;gap:7px}
.search-tag{padding:5px 11px;border-radius:999px;border:1px solid var(--gray-light);background:var(--white);font-size:12px;color:var(--ink-2);cursor:pointer;transition:all .15s}
.search-tag:hover{border-color:var(--gold);color:var(--gold)}
.search-result{display:flex;align-items:center;gap:11px;background:var(--white);border-radius:var(--r-sm);padding:10px;margin-bottom:8px;cursor:pointer;border:1px solid transparent;transition:border-color .15s}
.search-result:hover{border-color:var(--gold-border)}
.search-result-img{width:52px;height:52px;border-radius:8px;background:var(--gray-light);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.search-result-img img{width:100%;height:100%;object-fit:cover}
.search-result-name{font-size:13px;font-weight:500;margin-bottom:2px}
.search-result-price{font-size:13px;font-weight:700;color:var(--gold)}

/* ── Auth ── */
#page-auth{background:var(--ink)}
.auth-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;position:relative}
.auth-logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:300;letter-spacing:5px;color:var(--cream);margin-bottom:4px;text-align:center}
.auth-logo b{color:var(--gold);font-weight:400}
.auth-tagline{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:28px}
.auth-tabs{display:flex;background:rgba(255,255,255,.06);border-radius:999px;padding:3px;margin-bottom:22px;width:100%;max-width:320px}
.auth-tab-btn{flex:1;padding:8px;border-radius:999px;border:none;cursor:pointer;font-size:12px;font-weight:500;color:rgba(255,255,255,.4);background:transparent;transition:all .2s}
.auth-tab-btn.active{background:var(--gold);color:var(--ink);font-weight:700}
.auth-panel{width:100%;max-width:320px;display:none}
.auth-panel.active{display:block}
.auth-role-row{display:flex;gap:7px;margin-bottom:14px}
.auth-role-opt{flex:1;padding:9px 6px;border-radius:var(--r-sm);border:1.5px solid rgba(255,255,255,.1);background:transparent;font-size:11px;font-weight:500;color:rgba(255,255,255,.4);cursor:pointer;text-align:center;transition:all .2s}
.auth-role-opt.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold)}
#page-auth .input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--cream)}
#page-auth .input:focus{border-color:var(--gold)}
#page-auth .input::placeholder{color:rgba(255,255,255,.25)}
#page-auth .fg label{color:rgba(255,255,255,.4)}
.auth-or{text-align:center;font-size:12px;color:rgba(255,255,255,.2);margin:14px 0}

/* ── Catalog toolbar ── */
.catalog-bar{background:var(--white);border-bottom:1px solid var(--gray-light);position:sticky;top:var(--nav-h);z-index:100;padding:8px 12px;display:flex;align-items:center;gap:8px}
.filter-scroll{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}
.filter-scroll::-webkit-scrollbar{display:none}
.filter-pill{flex-shrink:0;padding:6px 12px;border-radius:999px;border:1.5px solid var(--gray-light);background:var(--cream);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px;color:var(--ink-2)}
.filter-pill svg{width:12px;height:12px}
.filter-pill.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold)}
.sort-sel{padding:6px 10px;border-radius:999px;border:1.5px solid var(--gray-light);background:var(--cream);font-size:11px;color:var(--ink-2);cursor:pointer;flex-shrink:0}

/* Filter sheet */
.filter-sheet{position:fixed;inset:0;z-index:870;display:none}
.filter-sheet.open{display:flex;flex-direction:column;justify-content:flex-end}
.filter-backdrop{flex:1;background:rgba(0,0,0,.4)}
.filter-panel{background:var(--cream);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 16px 32px;max-height:80dvh;overflow-y:auto}
.filter-panel-title{font-size:15px;font-weight:700;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
.filter-x{color:var(--ink-2);cursor:pointer;padding:4px}
.filter-group{margin-bottom:18px}
.filter-group-label{font-size:11px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.filter-chips{display:flex;flex-wrap:wrap;gap:7px}
.f-chip{padding:6px 12px;border-radius:999px;border:1.5px solid var(--gray-light);background:var(--white);font-size:12px;cursor:pointer;transition:all .15s}
.f-chip.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold);font-weight:600}
.price-row{display:flex;gap:8px;align-items:center}

/* ── Product Detail ── */
.prod-gallery{background:var(--white)}
.prod-main-img{width:100%;aspect-ratio:1;background:var(--gray-light);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.prod-main-img img{width:100%;height:100%;object-fit:cover}
.prod-thumbs{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;background:var(--white);scrollbar-width:none}
.prod-thumbs::-webkit-scrollbar{display:none}
.prod-thumb{width:50px;height:50px;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:border-color .15s;background:var(--gray-light)}
.prod-thumb img{width:100%;height:100%;object-fit:cover}
.prod-thumb.active{border-color:var(--gold)}
.prod-section{background:var(--white);margin-bottom:8px;padding:16px}
.prod-section-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.prod-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:400;color:var(--ink);margin-bottom:8px;line-height:1.25}
.prod-price-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.prod-price{font-size:22px;font-weight:700;color:var(--gold)}
.prod-old-price{font-size:14px;color:var(--gray);text-decoration:line-through}
.prod-promo-badge{background:var(--error);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px}
.prod-meta{display:flex;gap:14px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--gray-light);margin-top:8px}
.prod-meta-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2)}
.prod-meta-item svg{width:13px;height:13px}
.var-group{margin-bottom:14px}
.var-label{font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.var-options{display:flex;flex-wrap:wrap;gap:7px}
.var-opt{padding:7px 13px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);background:var(--white);cursor:pointer;font-size:12px;color:var(--ink-2);transition:all .2s;font-weight:500}
.var-opt.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold)}
.var-opt.out{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.prod-footer{position:fixed;bottom:var(--tab-h);left:0;right:0;background:var(--white);padding:12px 16px;border-top:1px solid var(--gray-light);display:flex;gap:10px;z-index:500}
.fav-btn{width:44px;height:44px;border-radius:var(--r-sm);border:1.5px solid var(--gold-border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold);transition:all .2s}
.fav-btn.active,.fav-btn:hover{background:var(--gold-dim);border-color:var(--gold)}
.fav-btn svg{width:18px;height:18px}

/* ── Cart ── */
.cart-empty{text-align:center;padding:64px 24px}
.cart-empty svg{width:56px;height:56px;color:var(--gray-light);margin:0 auto 16px}
.cart-empty h3{font-size:16px;font-weight:600;margin-bottom:8px}
.cart-empty p{font-size:13px;color:var(--ink-2);margin-bottom:20px}
.cart-vendor-group{margin:10px 12px 0;background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.cart-vendor-head{background:var(--ink);padding:10px 14px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.3px}
.cart-vendor-head svg{width:14px;height:14px}
.cart-item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-bottom:1px solid var(--gray-light)}
.cart-item:last-child{border-bottom:none}
.cart-item-img{width:60px;height:60px;border-radius:var(--r-sm);background:var(--gray-light);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-var{font-size:11px;color:var(--gold);margin-bottom:4px}
.cart-item-price{font-size:13px;font-weight:700;color:var(--gold)}
.qty-ctrl{display:flex;align-items:center;gap:8px;margin-top:6px}
.qty-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold-border);background:transparent;cursor:pointer;font-size:16px;color:var(--gold);display:flex;align-items:center;justify-content:center;line-height:1;transition:background .15s}
.qty-btn:hover{background:var(--gold-dim)}
.qty-val{font-size:14px;font-weight:600;min-width:22px;text-align:center;color:var(--ink)}
.cart-remove-btn{width:30px;height:30px;border:none;background:transparent;cursor:pointer;color:var(--gray);display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0;transition:all .15s;margin-top:2px}
.cart-remove-btn:hover{background:#FEF2F2;color:var(--error)}
.cart-remove-btn svg{width:16px;height:16px}
.promo-section{margin:10px 12px;background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.promo-row{display:flex;gap:8px}
.promo-row .input{flex:1;text-transform:uppercase;font-weight:600;font-size:13px}
.promo-ok{display:flex;align-items:center;gap:7px;color:var(--success);font-size:12px;font-weight:500;margin-top:8px}
.promo-ok svg{width:14px;height:14px}
.cart-summary{margin:10px 12px;background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.sum-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px}
.sum-label{color:var(--ink-2)}
.sum-value{font-weight:500}
.sum-divider{height:1px;background:var(--gray-light);margin:8px 0}
.sum-total .sum-label{font-size:15px;font-weight:700;color:var(--ink)}
.sum-total .sum-value{font-size:16px;font-weight:700;color:var(--gold)}
.sum-discount{color:var(--success) !important}
.cart-footer{position:fixed;bottom:var(--tab-h);left:0;right:0;background:var(--white);padding:12px 16px;border-top:1px solid var(--gray-light);z-index:500}

/* ── Checkout ── */
.checkout-steps{background:var(--ink);padding:0 20px 14px;display:flex;align-items:center;justify-content:center;gap:0}
.co-step{display:flex;flex-direction:column;align-items:center;gap:4px}
.co-step-circle{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);color:rgba(255,255,255,.4);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s}
.co-step-circle.active{background:var(--gold);color:var(--ink)}
.co-step-circle.done{background:var(--success);color:#fff}
.co-step-label{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.3px}
.co-step-label.active{color:var(--gold)}
.co-connector{width:48px;height:2px;background:rgba(255,255,255,.1);margin:0 4px 14px;transition:background .2s}
.co-connector.done{background:var(--gold)}
.co-section{background:var(--white);border-radius:var(--r);margin:10px 12px;padding:16px;box-shadow:var(--sh)}
.co-section-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.co-section-title svg{width:16px;height:16px;color:var(--gold);flex-shrink:0}
.order-grp{border:1px solid var(--gray-light);border-radius:var(--r-sm);overflow:hidden;margin-bottom:10px}
.order-grp-head{background:var(--ink);padding:8px 12px;font-size:11px;font-weight:600;color:var(--gold);display:flex;align-items:center;gap:6px;letter-spacing:.3px}
.order-grp-head svg{width:13px;height:13px}
.order-grp-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--gray-light);font-size:12px}
.order-grp-item:last-child{border-bottom:none}
.deliv-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);margin-bottom:10px;cursor:pointer;transition:all .2s;background:var(--cream)}
.deliv-opt.active{border-color:var(--gold);background:var(--gold-dim)}
.deliv-opt.active-x{border-color:#D97706;background:#FFFBEB}
.deliv-icon{width:40px;height:40px;border-radius:50%;background:var(--gray-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.deliv-icon svg{width:20px;height:20px;color:var(--ink-2)}
.deliv-opt.active .deliv-icon{background:var(--gold-dim)}
.deliv-opt.active .deliv-icon svg{color:var(--gold)}
.deliv-opt.active-x .deliv-icon{background:#FEF3C7}
.deliv-opt.active-x .deliv-icon svg{color:#D97706}
.deliv-title{font-size:13px;font-weight:600;color:var(--ink)}
.deliv-sub{font-size:11px;color:var(--gray);margin-top:2px}
.deliv-price{font-size:14px;font-weight:700;margin-left:auto;flex-shrink:0}
.pay-grid{display:flex;flex-wrap:wrap;gap:8px}
.pay-opt{flex:1;min-width:calc(33.33% - 6px);padding:10px 6px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);background:var(--cream);cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .2s}
.pay-opt:hover,.pay-opt.active{border-color:var(--gold);background:var(--gold-dim)}
.pay-opt svg{width:20px;height:20px;color:var(--ink-2)}
.pay-opt.active svg{color:var(--gold)}
.pay-opt-label{font-size:11px;font-weight:500;color:var(--ink-2)}
.pay-opt.active .pay-opt-label{color:var(--gold)}
.pay-info-box{background:var(--gold-dim);border-radius:var(--r-sm);padding:12px;margin-top:10px;display:none;align-items:center;gap:10px;border:1px solid var(--gold-border)}
.pay-info-box.show{display:flex}
.pay-info-box svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.proof-area{border:2px dashed var(--gold-border);border-radius:var(--r-sm);padding:20px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:8px}
.proof-area:hover,.proof-area.has{border-style:solid;border-color:var(--gold);background:var(--gold-dim)}
.proof-area svg{width:28px;height:28px;color:var(--gold)}
.proof-area p{font-size:13px;font-weight:500;color:var(--gold)}
.proof-area small{font-size:11px;color:var(--gray)}
.proof-preview{width:100%;border-radius:var(--r-sm);overflow:hidden}
.proof-preview img{width:100%;max-height:160px;object-fit:cover}
.co-footer{position:fixed;bottom:0;left:0;right:0;background:var(--white);padding:12px 16px;border-top:1px solid var(--gray-light);z-index:500}

/* ── Confirm ── */
.confirm-box{background:var(--white);border-radius:var(--r);margin:12px;padding:24px;text-align:center;box-shadow:var(--sh)}
.confirm-check{width:68px;height:68px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.confirm-check svg{width:36px;height:36px;color:#fff}
.confirm-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:400;margin-bottom:8px}
.confirm-sub{font-size:13px;color:var(--ink-2);line-height:1.5}
.tracking-box{background:var(--ink);border-radius:var(--r);margin:0 12px 10px;padding:16px}
.tracking-vendor{font-size:11px;color:var(--gray);margin-bottom:4px;letter-spacing:.3px}
.tracking-code{font-size:20px;font-weight:700;color:var(--gold);letter-spacing:3px;text-align:center;margin-bottom:10px;font-family:monospace}
.tracking-btns{display:flex;gap:8px}

/* ── Orders ── */
.order-card{background:var(--white);border-radius:var(--r);margin:10px 12px;box-shadow:var(--sh);cursor:pointer;transition:box-shadow .2s;overflow:hidden}
.order-card:hover{box-shadow:var(--sh-md)}
.order-card-head{padding:12px 14px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--gray-light)}
.order-code{font-family:monospace;font-size:13px;font-weight:700;color:var(--ink)}
.order-date{font-size:11px;color:var(--gray);margin-top:2px}
.status-badge{font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px;letter-spacing:.3px}
.s-pending{background:#FEF9EE;color:#D97706}
.s-confirmed{background:#EFF6FF;color:#2563EB}
.s-shipped{background:#F0FDFA;color:#0D9488}
.s-delivered{background:#ECFDF5;color:#059669}
.s-cancelled{background:#FEF2F2;color:var(--error)}
.order-card-body{padding:12px 14px}
.order-imgs{display:flex;gap:7px;margin-bottom:10px}
.order-img-thumb{width:44px;height:44px;border-radius:6px;background:var(--gray-light);overflow:hidden;flex-shrink:0}
.order-img-thumb img{width:100%;height:100%;object-fit:cover}
.order-amount{font-size:15px;font-weight:700;color:var(--gold)}
.order-meta{font-size:12px;color:var(--gray)}

/* ── Profile ── */
.profile-head{background:var(--ink);padding:68px 16px 24px;display:flex;align-items:center;gap:14px}
.profile-avatar{width:60px;height:60px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--ink);flex-shrink:0;overflow:hidden;border:2px solid var(--gold)}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:400;color:var(--cream)}
.profile-email{font-size:12px;color:rgba(255,255,255,.35);margin-top:2px}
.profile-role{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--gold-dim);color:var(--gold);border:1px solid var(--gold-border);margin-top:6px;letter-spacing:.5px;text-transform:uppercase}
.profile-menu{padding:12px}
.menu-item{display:flex;align-items:center;gap:13px;padding:13px 14px;background:var(--white);border-radius:var(--r);margin-bottom:8px;cursor:pointer;transition:box-shadow .15s;box-shadow:var(--sh)}
.menu-item:hover{box-shadow:var(--sh-md)}
.menu-icon{width:36px;height:36px;border-radius:10px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.menu-icon svg{width:17px;height:17px}
.menu-label{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.menu-arrow{color:var(--gray-light)}
.menu-arrow svg{width:16px;height:16px}
.menu-item.danger .menu-icon{background:#FEF2F2;color:var(--error)}
.menu-item.danger .menu-label{color:var(--error)}

/* ── Vendor Dashboard ── */
.vendor-head{background:var(--ink);padding:68px 16px 16px}
.vendor-store-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.vendor-logo-el{width:52px;height:52px;border-radius:12px;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--ink);overflow:hidden;border:2px solid var(--gold)}
.vendor-logo-el img{width:100%;height:100%;object-fit:cover}
.vendor-store-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:400;color:var(--cream);margin-bottom:4px}
.vendor-cert{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--gold);color:var(--ink)}
.vendor-cert svg{width:11px;height:11px}
.vendor-tabs{display:flex;background:rgba(255,255,255,.06);border-radius:10px;padding:3px;gap:2px}
.vendor-tab-btn{flex:1;padding:8px 4px;border-radius:8px;border:none;cursor:pointer;font-size:11px;font-weight:500;color:rgba(255,255,255,.4);background:transparent;transition:all .2s}
.vendor-tab-btn.active{background:var(--gold);color:var(--ink);font-weight:700}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}
.stat-card{background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.stat-val{font-size:22px;font-weight:700;color:var(--gold);margin-bottom:2px}
.stat-label{font-size:11px;color:var(--ink-2)}
.prod-manage-item{display:flex;align-items:center;gap:10px;padding:12px;background:var(--white);border-radius:var(--r);margin:0 12px 8px;box-shadow:var(--sh)}
.prod-manage-img{width:52px;height:52px;border-radius:8px;background:var(--gray-light);overflow:hidden;flex-shrink:0}
.prod-manage-img img{width:100%;height:100%;object-fit:cover}

/* ── Admin ── */
.admin-tabs-row{display:flex;gap:6px;padding:12px;overflow-x:auto;scrollbar-width:none}
.admin-tabs-row::-webkit-scrollbar{display:none}
.admin-tab-pill{flex-shrink:0;padding:7px 14px;border-radius:999px;border:1.5px solid var(--gray-light);background:var(--cream);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}
.admin-tab-pill.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold)}
.admin-section{display:none;padding:0 0 20px}
.admin-section.active{display:block}
.admin-card{background:var(--white);border-radius:var(--r);margin:0 12px 8px;padding:13px;display:flex;align-items:center;gap:11px;box-shadow:var(--sh)}
.admin-avatar{width:42px;height:42px;border-radius:10px;background:var(--gold-dim);border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;font-size:16px}
.admin-avatar img{width:100%;height:100%;object-fit:cover}
.admin-info{flex:1;min-width:0}
.admin-name{font-size:13px;font-weight:600;color:var(--ink)}
.admin-sub{font-size:11px;color:var(--gray);margin-top:2px}
.admin-actions{display:flex;flex-direction:column;gap:5px}
.config-row{background:var(--white);border-radius:var(--r);margin:0 12px 8px;padding:14px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--sh)}
.config-label{font-size:13px;font-weight:500;color:var(--ink);flex:1}
.config-right{display:flex;align-items:center;gap:8px}
.config-input{width:72px;padding:6px 10px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);font-size:13px;text-align:right;outline:none}
.config-input:focus{border-color:var(--gold)}

/* ── Livreur ── */
.livreur-deliv-card{background:var(--white);border-radius:var(--r);margin:0 12px 10px;padding:14px;box-shadow:var(--sh)}
.livreur-code{font-family:monospace;font-size:14px;font-weight:700;color:var(--gold)}
.express-pill{background:#D97706;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px}
.livreur-addr{font-size:12px;color:var(--ink-2);line-height:1.5;margin:6px 0}
.livreur-earn{font-size:16px;font-weight:700;color:var(--gold)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.45);display:none;align-items:flex-end}
.modal-overlay.open{display:flex}
.modal{background:var(--cream);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 16px 32px;max-height:90dvh;overflow-y:auto;width:100%}
.modal-handle{width:32px;height:4px;border-radius:2px;background:var(--gray-light);margin:0 auto 16px}
.modal-head{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.modal-close-btn{width:28px;height:28px;border:none;background:var(--gray-light);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.modal-close-btn svg{width:14px;height:14px}

/* ── Reviews ── */
.review-card{background:var(--white);border-radius:var(--r-sm);padding:12px;margin-bottom:8px}
.review-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.review-author{font-size:12px;font-weight:600;color:var(--ink)}
.review-date{font-size:10px;color:var(--gray)}
.stars{display:flex;gap:2px}
.star{width:13px;height:13px;fill:#F59E0B}
.star.empty{fill:var(--gray-light)}
.review-text{font-size:12px;color:var(--ink-2);line-height:1.5}
.vendor-reply{background:var(--gold-dim);border-left:3px solid var(--gold);padding:8px 10px;border-radius:3px;margin-top:7px;font-size:12px;color:var(--ink-2)}

/* ── Utils ── */
.spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--gray-light);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-center{display:flex;align-items:center;justify-content:center;padding:40px}
.empty-state{text-align:center;padding:56px 20px}
.empty-state svg{width:52px;height:52px;color:var(--gray-light);margin:0 auto 14px}
.empty-state h3{font-size:16px;font-weight:600;margin-bottom:6px}
.empty-state p{font-size:13px;color:var(--ink-2);line-height:1.5}
.hidden{display:none!important}
.text-gold{color:var(--gold)}
.text-err{color:var(--error)}
.text-ok{color:var(--success)}
.fw-700{font-weight:700}
.mono{font-family:monospace}
/* scrollbar */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gray-light);border-radius:2px}

@media(min-width:480px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .modal,.filter-panel{max-width:480px;margin:0 auto}
  #top-nav,#bottom-tabs{max-width:480px;left:50%;right:auto;transform:translateX(-50%)}
  .page{max-width:480px;margin:0 auto}
  #search-ov{max-width:480px;left:50%;transform:translateX(-50%)}
  #toast{max-width:400px}
}

/* ── JS Class Aliases (shopylne.js compatibility) ──────── */

/* Toast container */
#toast-container{position:fixed;bottom:calc(var(--tab-h)+12px);left:50%;transform:translateX(-50%);z-index:9990;width:calc(100% - 32px);max-width:320px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:var(--cream);border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh-md);display:flex;align-items:flex-start;gap:10px;border-left:3px solid var(--gold);opacity:0;transform:translateY(12px);transition:all .3s;pointer-events:auto}
.toast-title{font-size:13px;font-weight:600;margin-bottom:2px}
.toast-msg{font-size:12px;opacity:.7;line-height:1.4}
.toast-success{border-left-color:var(--success);opacity:1;transform:translateY(0)}
.toast-error{border-left-color:var(--error);opacity:1;transform:translateY(0)}
.toast-info{border-left-color:#3B82F6;opacity:1;transform:translateY(0)}
.toast.hiding{opacity:0;transform:translateY(-8px)}

/* Badge / dot show class */
.nav-badge.show{display:flex}
.tab-dot.show{display:block}

/* Loader hidden */
#loader.hidden{opacity:0;pointer-events:none}

/* Tab btn = tab item */
.tab-btn{flex:1;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(250,248,245,.35);transition:color .2s;position:relative}
.tab-btn.active{color:var(--gold)}
.tab-btn svg{width:20px;height:20px}
.tab-btn span{font-size:9px;font-weight:500;letter-spacing:.3px}

/* Nav btn = nav icon btn */
.nav-btn{width:38px;height:38px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(250,248,245,.7);border-radius:var(--r-sm);transition:background .15s;position:relative}
.nav-btn:hover{background:rgba(255,255,255,.07);color:var(--cream)}
.nav-btn svg{width:20px;height:20px}

/* Product grid / card */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 10px}
.product-card{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);cursor:pointer;position:relative;transition:box-shadow .2s}
.product-card:hover{box-shadow:var(--sh-md)}
.product-card-img{width:100%;aspect-ratio:1;background:var(--gray-light);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.product-card-img img{width:100%;height:100%;object-fit:cover}
.product-card-info{padding:10px}
.product-card-name{font-size:12px;font-weight:500;color:var(--ink);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.product-card-price{font-size:14px;font-weight:700;color:var(--gold)}
.product-card-old-price{font-size:11px;color:var(--gray);text-decoration:line-through;margin-left:4px}
.quick-add-btn{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .15s}
.quick-add-btn:active{transform:scale(.88)}
.quick-add-btn svg{width:14px;height:14px}

/* Form aliases */
.form-group{margin-bottom:12px}
.form-label{display:block;font-size:11px;font-weight:500;color:var(--ink-2);margin-bottom:5px;letter-spacing:.3px;text-transform:uppercase}
.form-input{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);background:var(--white);font-size:14px;color:var(--ink);outline:none;transition:border-color .2s}
.form-input:focus{border-color:var(--gold)}
.form-input::placeholder{color:var(--gray)}
textarea.form-input{resize:vertical;min-height:72px}
.form-select{width:100%;padding:10px 14px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);background:var(--white);font-size:13px;color:var(--ink);outline:none;cursor:pointer;appearance:none}

/* Auth aliases */
.auth-container{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;position:relative}
.auth-logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:300;letter-spacing:5px;color:var(--cream);margin-bottom:4px;text-align:center}
.auth-logo span{color:var(--gold)}
.auth-sub{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:28px}
.auth-tabs{display:flex;background:rgba(255,255,255,.06);border-radius:999px;padding:3px;margin-bottom:22px;width:100%;max-width:320px}
.auth-tab{flex:1;padding:8px;border-radius:999px;border:none;cursor:pointer;font-size:12px;font-weight:500;color:rgba(255,255,255,.4);background:transparent;transition:all .2s}
.auth-tab.active{background:var(--gold);color:var(--ink);font-weight:700}
.auth-form-panel{width:100%;max-width:320px;display:none}
.auth-form-panel:first-of-type,.auth-form-panel.active{display:block}
.auth-form{width:100%;max-width:320px}
.auth-role-select{display:flex;gap:7px;margin-bottom:14px}
.auth-role-btn{flex:1;padding:9px 6px;border-radius:var(--r-sm);border:1.5px solid rgba(255,255,255,.1);background:transparent;font-size:11px;font-weight:500;color:rgba(255,255,255,.4);cursor:pointer;text-align:center;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:5px}
.auth-role-btn.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold)}
.auth-divider{text-align:center;font-size:12px;color:rgba(255,255,255,.2);margin:14px 0}
#page-auth .form-input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--cream)}
#page-auth .form-input:focus{border-color:var(--gold)}
#page-auth .form-input::placeholder{color:rgba(255,255,255,.25)}
#page-auth .form-label{color:rgba(255,255,255,.4)}

/* Search overlay aliases */
#search-overlay{position:fixed;inset:0;z-index:850;background:var(--cream);display:none;flex-direction:column}
#search-overlay.open{display:flex}
.search-header{background:var(--ink);padding:56px 16px 12px;display:flex;gap:10px;align-items:center}
.search-input-wrap{flex:1;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 14px}
.search-input-wrap svg{color:var(--gray);width:15px;height:15px;flex-shrink:0}
.search-input-wrap input{flex:1;background:none;border:none;outline:none;font-size:15px;color:var(--cream)}
.search-input-wrap input::placeholder{color:rgba(255,255,255,.3)}
.search-section{margin-bottom:20px}
.search-section-title{font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.search-tag-row{display:flex;flex-wrap:wrap;gap:7px}
.search-result-item{display:flex;align-items:center;gap:11px;background:var(--white);border-radius:var(--r-sm);padding:10px;margin-bottom:8px;cursor:pointer;border:1px solid transparent;transition:border-color .15s}
.search-result-item:hover{border-color:var(--gold-border)}
.search-result-img{width:52px;height:52px;border-radius:8px;background:var(--gray-light);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.search-result-name{font-size:13px;font-weight:500;margin-bottom:2px}
.search-result-price{font-size:13px;font-weight:700;color:var(--gold)}

/* Catalog toolbar aliases */
.catalog-toolbar{background:var(--white);border-bottom:1px solid var(--gray-light);position:sticky;top:var(--nav-h);z-index:100;padding:8px 12px;display:flex;align-items:center;gap:8px}
.filter-btn{flex-shrink:0;padding:6px 12px;border-radius:999px;border:1.5px solid var(--gray-light);background:var(--cream);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px;color:var(--ink-2)}
.filter-btn.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold)}
.sort-btn{padding:6px 10px;border-radius:999px;border:1.5px solid var(--gray-light);background:var(--cream);font-size:11px;color:var(--ink-2);cursor:pointer;flex-shrink:0}
.filter-chip{padding:6px 12px;border-radius:999px;border:1.5px solid var(--gray-light);background:var(--white);font-size:12px;cursor:pointer;transition:all .15s}
.filter-chip.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold);font-weight:600}
.cats-scroll{display:flex;gap:8px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.cats-scroll::-webkit-scrollbar{display:none}
.price-range{display:flex;gap:8px;align-items:center}

/* Product detail aliases */
.product-gallery{background:var(--white);position:relative}
.product-main-img{width:100%;aspect-ratio:1;background:var(--gray-light);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.product-thumbs{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;background:var(--white);scrollbar-width:none}
.product-thumb{width:50px;height:50px;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:border-color .15s;background:var(--gray-light)}
.product-thumb.active{border-color:var(--gold)}
.product-info{padding:16px;background:var(--white);margin-bottom:8px}
.product-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:400;color:var(--ink);margin-bottom:8px;line-height:1.25}
.product-price-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.product-price{font-size:22px;font-weight:700;color:var(--gold)}
.product-old-price{font-size:14px;color:var(--gray);text-decoration:line-through}
.product-promo-badge{background:var(--error);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px}
.flash-timer{background:#D97706;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;display:flex;align-items:center;gap:3px}
.product-meta{display:flex;gap:14px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--gray-light);margin-top:8px}
.product-meta-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2)}
.product-section{background:var(--white);margin-bottom:8px;padding:16px}
.product-section-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.variant-group{margin-bottom:14px}
.variant-label{font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.variant-options{display:flex;flex-wrap:wrap;gap:7px}
.variant-option{padding:7px 13px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);background:var(--white);cursor:pointer;font-size:12px;color:var(--ink-2);transition:all .2s;font-weight:500}
.variant-option.active{border-color:var(--gold);background:var(--gold-dim);color:var(--gold)}
.variant-option.out-stock{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.product-footer{position:fixed;bottom:var(--tab-h);left:0;right:0;background:var(--white);padding:12px 16px;border-top:1px solid var(--gray-light);display:flex;gap:10px;z-index:500}

/* Cart aliases */
.cart-vendor-header{background:var(--ink);padding:10px 14px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.3px}
.cart-item-name{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-variant{font-size:11px;color:var(--gold);margin-bottom:4px}
.cart-item-price{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:6px}
.cart-item-remove{background:none;border:none;cursor:pointer;padding:4px;color:var(--error);display:flex;align-items:center;justify-content:center}
.qty-ctrl{display:flex;align-items:center;gap:6px}
.qty-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold-border);background:transparent;cursor:pointer;font-size:16px;color:var(--gold);display:flex;align-items:center;justify-content:center;transition:background .15s}
.qty-val{font-size:14px;font-weight:600;min-width:20px;text-align:center}
.cart-promo{margin:10px 12px;background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.cart-summary{margin:10px 12px;background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.cart-footer{position:fixed;bottom:var(--tab-h);left:0;right:0;background:var(--white);padding:12px 16px;border-top:1px solid var(--gray-light);z-index:500}
.promo-input-row{display:flex;gap:8px}
.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px}
.summary-label{color:var(--ink-2)}
.summary-value{font-weight:600;color:var(--ink)}
.summary-total .summary-label,.summary-total .summary-value{font-size:15px;font-weight:700;color:var(--ink)}
.summary-divider{height:1px;background:var(--gray-light);margin:8px 0}

/* Checkout aliases */
.checkout-section{background:var(--white);border-radius:var(--r);margin:10px 12px;padding:16px;box-shadow:var(--sh)}
.checkout-section-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.step-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.step-circle{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);color:rgba(255,255,255,.4);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s}
.step-circle.active{background:var(--gold);color:var(--ink)}
.step-connector{height:2px;width:40px;background:rgba(255,255,255,.15);transition:background .3s}
.step-connector.done{background:var(--gold)}
.step-label{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.3px}
.step-label.active{color:var(--gold)}
.order-group{background:var(--gray-light);border-radius:var(--r-sm);padding:10px;margin-bottom:8px}
.order-group-header{font-size:11px;font-weight:600;color:var(--gold);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.order-group-item{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.order-group-item:last-child{border-bottom:none}
.delivery-option{display:flex;align-items:center;gap:12px;border:1.5px solid var(--gray-light);border-radius:var(--r);padding:12px;margin-bottom:10px;cursor:pointer;transition:all .2s}
.delivery-option.active{border-color:var(--gold);background:var(--gold-dim)}
.delivery-option.active-express{border-color:#D97706;background:#FEF3C7}
.delivery-icon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--gray-light);display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex-shrink:0}
.delivery-title{font-size:13px;font-weight:600;color:var(--ink)}
.delivery-sub{font-size:11px;color:var(--gray);margin-top:2px}
.delivery-price{font-size:14px;font-weight:700;color:var(--gold)}
.payment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.payment-option{border:1.5px solid var(--gray-light);border-radius:var(--r-sm);padding:12px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:6px}
.payment-option.active{border-color:var(--gold);background:var(--gold-dim)}
.payment-option-icon{font-size:22px;color:var(--ink-2)}
.payment-option-label{font-size:11px;font-weight:500;color:var(--ink)}
.payment-info-box{background:var(--gold-dim);border-radius:var(--r-sm);padding:12px;margin-top:10px;display:none;align-items:center;gap:10px;border:1px solid var(--gold-border)}
.payment-info-box.show{display:flex}
.payment-info-label{font-size:10px;color:var(--gray);margin-bottom:3px}
.payment-info-number{font-size:18px;font-weight:700;color:var(--gold);letter-spacing:1px;font-family:monospace}
.proof-upload-area{border:2px dashed var(--gold-border);border-radius:var(--r-sm);padding:20px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gray)}
.proof-upload-area:hover,.proof-upload-area.has-file{border-color:var(--gold)}
.proof-upload-area svg{color:var(--gold)}
.confirm-check{width:56px;height:56px;border-radius:50%;background:var(--success);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff}
.confirm-title{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:6px}
.confirm-sub{font-size:13px;color:var(--ink-2);line-height:1.5}
.tracking-box{background:var(--ink);border-radius:var(--r);margin:0 0 10px;padding:16px}
.tracking-vendor{font-size:11px;color:var(--gray);margin-bottom:6px}
.tracking-actions{display:flex;gap:8px;margin-top:10px}

/* Orders aliases */
.order-card-header{padding:12px 14px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--gray-light)}
.order-card-body{padding:12px 14px}
.order-code{font-family:monospace;font-size:13px;font-weight:700;color:var(--ink)}
.order-date{font-size:11px;color:var(--gray);margin-top:2px}
.order-status{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.3px}
.status-pending{background:#FEF3C7;color:#D97706}
.status-confirmed{background:#DBEAFE;color:#1D4ED8}
.status-shipped{background:#EDE9FE;color:#7C3AED}
.status-delivered{background:#DCFCE7;color:#15803D}
.status-cancelled{background:#FEE2E2;color:#B91C1C}
.order-items-preview{display:flex;gap:6px;margin-bottom:10px}
.order-item-img{width:44px;height:44px;border-radius:6px;background:var(--gray-light);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.order-amount{font-size:14px;font-weight:700;color:var(--gold)}

/* Profile aliases */
.profile-header{background:var(--ink);padding:16px;display:flex;align-items:center;gap:14px}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--ink);overflow:hidden;flex-shrink:0}
.profile-name{font-size:18px;font-weight:600;color:var(--cream);margin-bottom:2px}
.profile-email{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:6px}
.profile-type-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--gold-dim);color:var(--gold);border:1px solid var(--gold-border);letter-spacing:.5px;text-transform:uppercase}
.profile-menu{padding:12px}
.profile-menu-item{display:flex;align-items:center;gap:13px;padding:13px 14px;background:var(--white);border-radius:var(--r);margin-bottom:8px;cursor:pointer;transition:box-shadow .15s;box-shadow:var(--sh)}
.profile-menu-icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--gray-light);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.profile-menu-label{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.profile-menu-arrow{color:var(--gray);display:flex;align-items:center}

/* Vendor dashboard */
.vendor-header{background:var(--ink);padding:56px 16px 0}
.vendor-store-info{display:flex;align-items:center;gap:12px;padding-bottom:14px}
.vendor-logo{width:52px;height:52px;border-radius:10px;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--ink);overflow:hidden;flex-shrink:0}
.vendor-store-name{font-size:16px;font-weight:700;color:var(--cream);margin-bottom:4px}
.vendor-cert-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--gold);color:var(--ink)}
.vendor-tabs{display:flex;background:rgba(255,255,255,.06);border-radius:10px;padding:3px;gap:2px}
.vendor-tab{flex:1;padding:8px 4px;border-radius:8px;border:none;cursor:pointer;font-size:11px;font-weight:500;color:rgba(255,255,255,.4);background:transparent;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:4px}
.vendor-tab.active{background:var(--gold);color:var(--ink);font-weight:700}

/* Vendor product management */
.product-manage-item{display:flex;align-items:center;gap:10px;padding:12px;background:var(--white);border-radius:var(--r);margin:0 12px 8px;box-shadow:var(--sh)}
.product-manage-img{width:52px;height:52px;border-radius:8px;background:var(--gray-light);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--gray)}
.product-manage-info{flex:1}
.product-manage-name{font-size:13px;font-weight:500;margin-bottom:3px}
.product-manage-price{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:2px}
.product-manage-stock{font-size:11px;color:var(--gray)}

/* Admin */
.admin-card{background:var(--white);border-radius:var(--r);margin:0 12px 8px;padding:13px;display:flex;align-items:center;gap:11px;box-shadow:var(--sh)}
.admin-card-info{flex:1}
.admin-card-name{font-size:13px;font-weight:600;color:var(--ink)}
.admin-card-sub{font-size:11px;color:var(--gray);margin-top:2px}
.config-item{background:var(--white);border-radius:var(--r);margin:0 0 8px;padding:14px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--sh)}
.config-label{font-size:13px;font-weight:500;color:var(--ink)}
.config-input{width:100px;padding:7px 10px;border-radius:var(--r-sm);border:1.5px solid var(--gray-light);background:var(--cream);font-size:13px;color:var(--ink);outline:none}
.config-input:focus{border-color:var(--gold)}

/* Livreur */
.delivery-card{background:var(--white);border-radius:var(--r);margin:0 12px 10px;padding:14px;box-shadow:var(--sh)}
.delivery-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.delivery-code{font-family:monospace;font-size:13px;font-weight:700;color:var(--ink)}
.delivery-address{font-size:12px;color:var(--gray);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.delivery-amount{font-size:16px;font-weight:700;color:var(--gold)}
.express-badge{background:#F59E0B;color:white;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;display:flex;align-items:center;gap:3px}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--cream);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 16px 32px;width:100%;max-width:500px;max-height:92dvh;overflow-y:auto}
.modal-handle{width:36px;height:4px;background:var(--gray-light);border-radius:999px;margin:0 auto 16px}
.modal-title{font-size:15px;font-weight:700;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
.modal-close{color:var(--ink-2);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}

/* Reviews */
.review-card{background:var(--white);border-radius:var(--r-sm);padding:12px;margin-bottom:8px}
.review-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.review-author{font-size:13px;font-weight:600}
.review-date{font-size:11px;color:var(--gray);margin-top:2px}
.review-text{font-size:13px;color:var(--ink-2);line-height:1.5}
.vendor-reply{background:var(--gold-dim);border-radius:var(--r-sm);padding:8px 10px;font-size:12px;color:var(--ink-2);margin-top:8px;display:flex;align-items:flex-start;gap:6px}

/* Utilities */
.loading-center{display:flex;justify-content:center;padding:40px}
.empty-state{text-align:center;padding:48px 24px}
.empty-icon{margin-bottom:12px;display:flex;justify-content:center}
.empty-icon svg{width:48px;height:48px;color:var(--gray-light)}
.empty-state h3{font-size:16px;font-weight:600;margin-bottom:8px}
.empty-state p{font-size:13px;color:var(--gray);margin-bottom:20px}
.section-title{font-size:15px;font-weight:600;color:var(--ink);padding:0 16px;margin:16px 0 10px}
.spinner{width:28px;height:28px;border:2.5px solid var(--gray-light);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.text-success{color:var(--success)!important}
.text-error{color:var(--error)!important}
.gold-bg{background:var(--gold-dim)!important}

/* Page header */
.page-header{display:flex;align-items:center;gap:12px;padding:16px}
.page-header h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:400;letter-spacing:1px}

/* Hcard body alias */
.hcard-info{padding:8px}
.hcard-name{font-size:11px;font-weight:500;color:var(--ink);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcard-price{font-size:12px;font-weight:700;color:var(--gold)}

@media(min-width:480px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .payment-grid{grid-template-columns:repeat(3,1fr)}
  #search-overlay{max-width:480px;left:50%;transform:translateX(-50%);right:auto}
}

/* ── Additional missing aliases ─────────────────────── */

/* Loader inner elements */
.loader-logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;font-weight:300;letter-spacing:6px;color:var(--cream)}
.loader-logo span{color:var(--gold);font-weight:400}
.loader-bar{width:80px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.loader-bar::after{content:'';display:block;height:100%;width:40%;background:var(--gold);border-radius:2px;animation:ldr 1s ease-in-out infinite alternate}

/* Admin tabs (HTML uses .admin-tab, CSS had .admin-tab-pill) */
.admin-tabs{display:flex;gap:4px;padding:12px;overflow-x:auto;scrollbar-width:none;background:var(--ink)}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tab{flex-shrink:0;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(201,169,110,.2);background:transparent;font-size:12px;font-weight:500;cursor:pointer;color:rgba(250,248,245,.5);transition:all .15s}
.admin-tab.active{border-color:var(--gold);background:var(--gold);color:var(--ink);font-weight:700}

/* Filter group title alias */
.filter-group-title{font-size:11px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.filter-close{cursor:pointer;color:var(--gray);float:right;font-size:20px;line-height:1}

/* Product badges overlay */
.product-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;z-index:1}

/* Stat card value */
.stat-value{font-size:20px;font-weight:700;color:var(--gold);margin-bottom:4px}

/* Cart empty */
.cart-empty{text-align:center;padding:56px 24px}
.cart-empty .empty-icon{margin:0 auto 14px;display:flex;justify-content:center}
.cart-empty p{font-size:14px;color:var(--gray);margin-bottom:16px}

/* Fav btn active fill */
.fav-btn.active{background:var(--error);border-color:var(--error);color:#fff}
.fav-btn.active svg{color:#fff;fill:currentColor}

/* Order timeline */
.order-timeline{display:flex;align-items:center;justify-content:center;padding:16px 0;margin-bottom:14px;gap:0}
.timeline-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;position:relative}
.timeline-icon{width:32px;height:32px;border-radius:50%;background:var(--gray-light);display:flex;align-items:center;justify-content:center;color:var(--gray);transition:all .2s;font-size:12px}
.timeline-step.done .timeline-icon{background:var(--gold-dim);color:var(--gold);border:1.5px solid var(--gold-border)}
.timeline-step.active .timeline-icon{background:var(--gold);color:var(--ink);box-shadow:0 0 0 4px var(--gold-dim)}
.timeline-label{font-size:9px;font-weight:500;color:var(--gray);letter-spacing:.2px;text-align:center}
.timeline-step.done .timeline-label,.timeline-step.active .timeline-label{color:var(--gold);font-weight:600}
.timeline-line{flex:1;height:2px;background:var(--gray-light);margin-top:-20px;transition:background .2s}

/* Variant row in product form */
.variant-row{background:var(--gray-light);border-radius:var(--r-sm);padding:12px;margin-bottom:8px}

/* Nav actions */
.nav-actions{display:flex;align-items:center;gap:4px}

/* ════════════════════════════════════════════════════════
   DESKTOP RESPONSIVE
════════════════════════════════════════════════════════ */

/* Desktop nav links — always defined, shown only at desktop width */
.nav-desktop-links{display:none;align-items:center;gap:2px}
.nav-link-btn{padding:7px 15px;border-radius:999px;border:none;background:transparent;cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;color:rgba(250,248,245,.5);transition:color .18s,background .18s;letter-spacing:.2px;white-space:nowrap}
.nav-link-btn:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.nav-link-btn.active{color:var(--gold)}

/* ── Tablet: 3-column grids ─────────────────── */
@media(min-width:640px) and (max-width:959px){
  .product-grid,.prod-grid{grid-template-columns:repeat(3,1fr)}
  .hcard{width:160px}
  .pay-grid{flex-wrap:nowrap}
}

/* ── Desktop ≥ 960 px ───────────────────────── */
@media(min-width:960px){

  /* Variables */
  :root{--nav-h:64px;--tab-h:0px}

  /* Reset the mobile 480-px phone-app constraint */
  .page{max-width:none;margin:0}
  #top-nav{max-width:none;left:0;right:0;transform:none;padding:0 40px;gap:16px}
  #bottom-tabs{display:none!important}
  #search-ov{max-width:none;left:0;transform:none}

  /* Desktop nav */
  .nav-desktop-links{display:flex}
  .nav-logo{font-size:22px;letter-spacing:6px}

  /* Pages */
  .page{padding-bottom:40px;min-height:calc(100vh - var(--nav-h))}
  #page-auth{padding-bottom:0;padding-top:0;min-height:100vh}

  /* ── Home ── */
  .hero{padding:88px 10% 56px;min-height:380px}
  .hero-content{max-width:680px}
  .hero-title{font-size:54px}
  .hero-btns{flex-wrap:nowrap;gap:12px}
  .section-title,.sec-title{padding:0 32px;font-size:16px;margin:24px 0 14px}
  .hscroll{padding:0 32px}
  .hcard{width:190px}
  .hcard-img{height:165px}
  .cats-scroll,.cat-scroll{padding:0 32px}
  .search-bar{margin:16px 32px}
  #home-new-grid{max-width:1280px;margin-left:auto;margin-right:auto;padding:0 24px!important;gap:16px!important;grid-template-columns:repeat(4,1fr)!important}
  #home-flash-scroll{padding:0 32px!important}

  /* ── Product grids: 4-col ── */
  .product-grid,.prod-grid{grid-template-columns:repeat(4,1fr);gap:16px;padding:0 28px}

  /* ── Catalog ── */
  .catalog-toolbar,.catalog-bar{padding:10px 28px;max-width:1280px;margin-left:auto;margin-right:auto}
  #catalog-cats{padding:10px 28px!important;max-width:1280px;margin-left:auto;margin-right:auto}
  #catalog-grid{max-width:1280px;margin-left:auto;margin-right:auto;padding:16px 28px!important;gap:16px!important;grid-template-columns:repeat(4,1fr)!important}
  #catalog-empty,#catalog-loader{max-width:1280px;margin-left:auto;margin-right:auto}

  /* ── Product detail: 2-column sticky ── */
  #page-product{max-width:1200px;margin:0 auto}
  #product-content{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  /* Gallery → col 1, spans all rows, sticky */
  #product-content>:first-child{grid-column:1;grid-row:1/999;position:sticky;top:calc(var(--nav-h) + 8px)}
  /* Everything else → col 2 */
  #product-content>*:not(:first-child){grid-column:2;margin-bottom:0}
  /* Product detail sections spacing */
  .product-info,.product-section{padding:16px 20px}
  /* Product add-to-cart footer: align to right column */
  #product-footer{bottom:0!important;left:50%!important;right:0!important;border-left:1px solid var(--gray-light)}

  /* ── Auth: centered glass card ── */
  #page-auth{display:flex;align-items:center;justify-content:center;background:var(--ink)}
  .auth-container{max-width:460px;width:100%;min-height:auto;border:1px solid rgba(201,169,110,.18);border-radius:24px;box-shadow:0 32px 80px rgba(0,0,0,.45);padding:48px 40px;background:rgba(255,255,255,.025)}

  /* ── Cart ── */
  #page-cart>*{max-width:760px;margin-left:auto;margin-right:auto}
  #cart-footer,.cart-footer{position:static!important;max-width:760px;margin:8px auto 0;border-radius:var(--r);border:1px solid var(--gray-light);box-shadow:none}

  /* ── Checkout ── */
  #checkout-content{max-width:700px;margin:0 auto}
  #checkout-footer{position:static!important;max-width:700px;margin:0 auto 8px;border-radius:var(--r);border:1px solid var(--gray-light)}
  #checkout-steps{max-width:700px;margin:0 auto}
  #page-checkout>div:first-child{padding-top:0}

  /* ── Orders ── */
  #orders-list,#orders-empty{max-width:760px;margin-left:auto;margin-right:auto}
  #page-orders .page-header{max-width:760px;margin-left:auto;margin-right:auto}

  /* ── Profile ── */
  #page-profile{max-width:740px;margin:0 auto}

  /* ── Vendor / Admin / Livreur ── */
  #page-vendor,#page-admin,#page-livreur,#page-vendor-profile{max-width:1100px;margin:0 auto}

  /* ── Modals: centered dialog style ── */
  .modal-overlay{align-items:center;justify-content:center}
  .modal-overlay .modal,.modal{border-radius:var(--r-lg)!important;max-width:560px;width:calc(100% - 48px);max-height:88dvh;animation:desk-modal-in .2s ease}
  @keyframes desk-modal-in{from{opacity:0;transform:scale(.93) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
  .modal-handle{display:none}

  /* ── Filter sheet: centered dialog ── */
  .filter-sheet.open{justify-content:center;align-items:center}
  .filter-panel{border-radius:var(--r-lg)!important;max-width:440px;width:calc(100% - 48px);max-height:82dvh}
  .filter-backdrop{position:fixed;inset:0}

  /* ── Search: panel anchored below nav ── */
  #search-overlay{top:var(--nav-h);inset:auto;position:fixed;width:min(640px,100vw);left:50%;transform:translateX(-50%);height:auto;max-height:calc(100vh - var(--nav-h));border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:0 24px 48px rgba(0,0,0,.18)}
  .search-header{padding:12px 16px}

  /* ── Toast ── */
  #toast-container{bottom:24px}

  /* ── Misc ── */
  .empty-state{max-width:480px;margin:0 auto}
  .loading-center{max-width:200px;margin:40px auto}
  .page-header{max-width:1100px;margin:0 auto}
}