*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  /* Classic Orange — warm paper theme (official brand orange #E16527) */
  --or:#E16527;--or-dk:#c25315;--or-dim:rgba(225,101,39,.12);
  --bg:#f7f3ec;--bg2:#f2ede4;--sur:#ffffff;--ele:#f2ede4;
  --bdr:#e6ddcf;--bdr2:#d9cdb8;
  --tx:#2b2622;--tx2:#6f655a;--tx3:#9a9082;
  --grn:#2e7d52;--amb:#b3720f;--red:#b3261e;--blu:#1565c0;
  --fd:"Bebas Neue",sans-serif;
  --fb:"Montserrat",system-ui,sans-serif;
  --fm:"JetBrains Mono",monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav:108px;--bot:0px;--sb:260px;
}
@media(max-width:767px){:root{--nav:108px;--bot:60px} body{padding-bottom:var(--bot)}}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
input,select,textarea,button{font-family:var(--fb);font-size:16px}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:4px}

/* TOP NAV */

/* ══ Concept 2: Orange accent bar header ══ */
.topnav{position:fixed;top:0;left:0;right:0;z-index:300;background:#0d0d0d;border-bottom:1px solid #1e1e1e;display:flex;flex-direction:column;overflow:hidden}

/* 3px gradient accent strip */
.nav-accent-strip{height:3px;background:linear-gradient(90deg,#E16527,#f59e0b 60%,transparent);flex-shrink:0}

/* Row 1: logo | wordmark | search | nav links | actions */
.topnav-row1{display:flex;align-items:center;height:52px;padding:0 12px;gap:8px;position:relative;flex-shrink:0}
@media(min-width:768px){.topnav-row1{height:60px;padding:0 20px;gap:12px}}

/* Logo */
.nav-logo img,.topnav-logo img{height:24px;width:auto;max-width:110px;object-fit:contain;display:block;flex-shrink:0}
@media(min-width:768px){.nav-logo img,.topnav-logo img{height:30px;max-width:140px}}

/* Wordmark (desktop only) */
.nav-wordmark{display:none;font-size:11px;font-weight:700;color:#f0f0f0;letter-spacing:.8px;white-space:nowrap;flex-shrink:0}
@media(min-width:768px){.nav-wordmark{display:block}}

/* Search wrap */
.topnav-search-wrap{flex:1;position:relative;display:flex;align-items:center;max-width:380px}
.topnav-search-wrap .si{position:absolute;left:10px;color:var(--tx3);font-size:13px;pointer-events:none;z-index:1}
.topnav-search-wrap input{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;color:var(--tx);padding:8px 10px 8px 32px;font-size:16px;outline:none;transition:border .15s}
.topnav-search-wrap input:focus{border-color:var(--or)}

/* Nav links — desktop only */
.topnav-links{display:none;align-items:center;gap:2px;margin-left:auto;flex-shrink:0}
@media(min-width:768px){.topnav-links{display:flex}}
.topnav-links button,.topnav-links a{background:none;border:none;font-size:11.5px;font-weight:600;color:var(--tx2);padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s;white-space:nowrap;text-decoration:none;font-family:var(--fb)}
.topnav-links button:hover,.topnav-links a:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.topnav-links .refund-link{color:var(--amb)!important}

/* Action icons */
.topnav-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}
@media(min-width:768px){.topnav-actions{margin-left:0}}

/* ══ Icon category row ══ */
.cat-icon-row{display:flex;overflow-x:auto;scrollbar-width:none;background:#0a0a0a;border-top:1px solid #1a1a1a;flex-shrink:0;height:56px}
.cat-icon-row::-webkit-scrollbar{display:none}
@media(min-width:768px){.cat-icon-row{height:60px}}
.cat-icon-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;flex:1;min-width:56px;cursor:pointer;border:none;background:none;color:var(--tx3);border-right:1px solid #111;transition:background .15s, color .15s;position:relative}
@media(min-width:768px){.cat-icon-item{min-width:unset;flex:1}}
.cat-icon-item:last-child{border-right:none}
.cat-icon-item svg{width:18px;height:18px;stroke:currentColor;flex-shrink:0;transition:stroke .15s}
@media(min-width:768px){.cat-icon-item svg{width:20px;height:20px}}
.cat-icon-item span{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:currentColor;white-space:nowrap}
@media(min-width:768px){.cat-icon-item span{font-size:8px}}
.cat-icon-item:hover{background:rgba(255,255,255,.04);color:var(--tx2)}
.cat-icon-item.active{color:#E16527!important;background:rgba(225,107,46,.08)}
.cat-icon-item.active svg{stroke:#E16527!important}
.cat-icon-item.active::after{content:"";position:absolute;bottom:0;left:10%;right:10%;height:2px;background:#E16527;border-radius:1px 1px 0 0}


.page{margin-top:var(--nav)}
.view{display:none;height:calc(100vh - var(--nav) - var(--bot));overflow-y:auto;-webkit-overflow-scrolling:touch}
.view.active{display:block}

/* CATEGORY STRIP */
.cat-strip{overflow-x:auto;white-space:nowrap;padding:10px 14px;border-bottom:1px solid var(--bdr);background:var(--sur);scrollbar-width:none;position:sticky;top:var(--nav);z-index:100}
.cat-strip::-webkit-scrollbar{display:none}
@media(min-width:768px){.cat-strip{display:none}}
.cat-chip{display:inline-flex;align-items:center;gap:5px;background:var(--ele);border:1px solid var(--bdr);border-radius:20px;padding:6px 13px;font-size:11px;font-weight:700;color:var(--tx2);cursor:pointer;transition:all .15s;margin-right:6px;white-space:nowrap}
.cat-chip.active{background:var(--or-dim);border-color:var(--or);color:var(--or)}

/* FILTER TOOLBAR (mobile) */
.cat-toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px}
@media(min-width:768px){.cat-toolbar{display:none}}
.filter-fab{display:flex;align-items:center;gap:6px;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;padding:8px 13px;font-size:12px;font-weight:700;color:var(--tx2);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
.filter-fab.fab-on{border-color:var(--or);color:var(--or)}
#fabBadge{background:var(--or);color:#fff;font-size:9px;font-weight:700;font-family:var(--fm);min-width:14px;height:14px;border-radius:7px;display:none;align-items:center;justify-content:center;padding:0 3px}
.filter-fab.fab-on #fabBadge{display:flex}
#rcM{font-size:12px;color:var(--tx3);font-family:var(--fm);flex:1;text-align:right}
#resultCount{display:block;font-size:12px;color:var(--tx2)}

/* CATALOG WRAP */
.catalog-layout{display:block}
@media(min-width:768px){.catalog-layout{display:grid;grid-template-columns:var(--sb) 1fr;max-width:1600px;margin:0 auto;align-items:start}}

/* SIDEBAR */
.cat-sidebar{display:none}
@media(min-width:768px){.cat-sidebar{display:block;padding:20px 16px;border-right:1px solid var(--bdr);position:sticky;top:var(--nav);height:calc(100vh - var(--nav));overflow-y:auto}}
.sb-srch{position:relative;margin-bottom:14px}
.sb-srch input{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;color:var(--tx);padding:9px 12px 9px 32px;font-size:13px;outline:none;transition:border .15s}
.sb-srch input:focus{border-color:var(--or)}
.sb-srch-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:13px;pointer-events:none}
/* FDD */
.fdd{margin-bottom:6px}
.fdd-head{width:100%;display:flex;align-items:center;gap:8px;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;padding:10px 12px;cursor:pointer;color:var(--tx2);font-family:var(--fb);transition:border-color .15s,color .15s;text-align:left}
.fdd-head:hover{border-color:var(--bdr2);color:var(--tx)}
.fdd.open .fdd-head{border-radius:8px 8px 0 0;border-color:var(--or);border-bottom-color:var(--bdr);color:var(--tx)}
.fdd.fdd-on .fdd-head{border-color:var(--or);color:var(--or)}
.fdd-lbl{flex:1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.fdd-bdg{background:var(--or);color:#fff;font-size:9px;font-weight:700;font-family:var(--fm);min-width:17px;height:17px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 4px}
.fdd.fdd-on .fdd-bdg{display:flex}
.fdd-arr{font-size:9px;color:var(--tx3);flex-shrink:0;transition:transform .2s}
.fdd.open .fdd-arr{transform:rotate(180deg)}
.fdd-menu{display:none;background:var(--sur);border:1px solid var(--or);border-top:none;border-radius:0 0 8px 8px;overflow:hidden;max-height:220px;overflow-y:auto}
.fdd.open .fdd-menu{display:block}
.fdd-item{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;font-size:12px;color:var(--tx2);border-bottom:1px solid var(--bdr);transition:background .12s}
.fdd-item:last-child{border-bottom:none}
.fdd-item:hover{background:var(--ele);color:var(--tx)}
.fdd-item input[type=checkbox]{width:15px;height:15px;accent-color:var(--or);cursor:pointer;flex-shrink:0}
.fdd-price-w{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.fdd-price-w label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);display:block;margin-bottom:4px}
.fdd-price-w input{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:7px;color:var(--tx);padding:9px 10px;outline:none;transition:border .15s;font-family:var(--fm)}
.fdd-price-w input:focus{border-color:var(--or)}
.sb-stock{padding:11px 2px;border-bottom:1px solid var(--bdr);margin-bottom:10px}
.sb-stock label{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;color:var(--tx2);font-weight:600}
.sb-stock input{width:15px;height:15px;accent-color:var(--or);cursor:pointer}
.sb-clear{width:100%;background:var(--ele);border:1px solid var(--bdr);color:var(--tx2);border-radius:7px;padding:9px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--fb);transition:all .15s;margin-top:10px}
.sb-clear:hover{border-color:var(--or);color:var(--or)}

/* CATALOG MAIN */
.catalog-main{padding:12px 14px 0;min-width:0}
@media(min-width:768px){.catalog-main{padding:20px 24px 0}}
#rcD{display:none;font-size:13px;color:var(--tx3);font-family:var(--fm);margin-bottom:14px}
@media(min-width:768px){#rcD{display:block}}

/* COMBO SECTION */
#comboBanner:empty{display:none}
#comboBanner{margin-bottom:14px}
@media(min-width:768px){#comboBanner{margin-bottom:20px}}
.cb-section{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;overflow:hidden}
.cb-head{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--bdr)}
.cb-ey{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--or);margin-bottom:1px}
.cb-title{font-family:var(--fd);font-size:14px;letter-spacing:1.5px;color:var(--tx)}
.cb-pill{background:var(--or-dim);border:1px solid rgba(225,107,46,.2);color:var(--or);font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px}
.cb-scroll{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.cb-scroll::-webkit-scrollbar{display:none}
@media(min-width:768px){.cb-scroll{display:grid;grid-template-columns:repeat(3,1fr)}}
.cb-card{min-width:220px;flex-shrink:0;padding:14px 16px;border-right:1px solid var(--bdr);display:flex;flex-direction:column;gap:9px;position:relative;scroll-snap-align:start}
.cb-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--or),#f59e0b)}
@media(min-width:768px){.cb-card{min-width:unset;flex-shrink:unset}}
.cb-card:last-child{border-right:none}
.cb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;min-height:32px}
.cb-name{font-size:13px;font-weight:700;color:var(--tx);line-height:1.35;flex:1}
.cb-tag{background:var(--or-dim);border:1px solid rgba(225,107,46,.2);color:var(--or);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:20px;white-space:nowrap;flex-shrink:0;margin-top:2px}
.cb-chips{display:flex;flex-wrap:wrap;gap:4px;min-height:24px}
.cb-chip{display:inline-flex;align-items:center;gap:3px;background:var(--ele);border:1px solid var(--bdr);border-radius:20px;padding:3px 8px;font-size:10px;font-weight:600;color:var(--tx2);white-space:nowrap}
.cb-chip::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--or);flex-shrink:0}
.cb-dates{border-top:1px solid var(--bdr);padding-top:10px}
.cb-dlbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--tx3);margin-bottom:8px}
.cb-drow{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px}
.cb-df label{display:block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:3px}
.cdi{width:100%;background:var(--bg);border:1px solid var(--bdr);border-radius:6px;color:var(--tx);padding:7px 8px;font-size:16px;font-family:var(--fm);outline:none;transition:border .15s}
.cdi:focus{border-color:var(--or)}
.cb-note{font-size:9px;color:var(--tx3)}
.cb-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid var(--bdr);margin-top:auto}
.cb-price{font-family:var(--fm);font-size:15px;font-weight:700;color:var(--or);line-height:1;display:flex;align-items:baseline;gap:1px}
.cb-punit{font-size:9px;color:var(--tx3);font-weight:400;margin-left:1px}
.cb-save{font-size:10px;color:var(--grn);margin-top:4px;font-weight:600}
.cb-tot{font-size:11px;font-weight:700;font-family:var(--fm);margin-top:2px;min-height:14px}
.cb-btn{background:var(--or);color:#fff;border:none;border-radius:6px;font-family:var(--fb);font-size:11px;font-weight:700;padding:9px 14px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s}
.cb-btn:hover,.cb-btn:active{background:var(--or-dk)}

/* PRODUCT GRID */
#catalogGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:768px){#catalogGrid{grid-template-columns:repeat(3,1fr);gap:16px}}
.card{background:var(--sur);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
@media(min-width:768px){.card:hover{border-color:var(--or);transform:translateY(-3px)}}
.card:active{transform:scale(.98)}
.card-img{height:170px;background-size:cover;background-position:center;background-color:var(--ele);position:relative;overflow:hidden;flex-shrink:0}
@media(min-width:768px){.card-img{height:220px}}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%);pointer-events:none}
.card-cat-badge{position:absolute;top:9px;left:9px;z-index:1;background:rgba(10,10,10,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);color:var(--tx2);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 8px;border-radius:20px}
.card-price-overlay{position:absolute;bottom:9px;left:10px;z-index:1;font-family:var(--fm);font-size:15px;font-weight:700;color:#fff;line-height:1;display:flex;align-items:baseline;gap:2px}
@media(min-width:768px){.card-price-overlay{font-size:16px}}
.card-price-overlay .ppu{font-size:9px;color:rgba(255,255,255,.7);font-weight:400}
.card-body{padding:10px 12px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.card-brand{font-size:9px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;height:12px;overflow:hidden}
.card-name{font-size:12px;font-weight:700;color:var(--tx);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
@media(min-width:768px){.card-name{font-size:13px;min-height:36px}}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:8px;border-top:1px solid var(--bdr);flex-wrap:nowrap}
.stk{font-size:9px;font-weight:700;padding:3px 7px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.stk.in{background:rgba(76,175,114,.12);color:var(--grn)}
.stk.low{background:rgba(245,166,35,.12);color:var(--amb)}
.stk.out{background:rgba(224,82,82,.12);color:var(--red)}
.card-add{background:var(--or);color:#fff;border:none;border-radius:6px;font-size:10px;font-weight:700;padding:6px 11px;cursor:pointer;white-space:nowrap;font-family:var(--fb);transition:background .15s}
.card-add:hover,.card-add:active{background:var(--or-dk)}
.empty-state{padding:48px 20px;text-align:center;color:var(--tx3);font-size:14px;grid-column:1/-1}

/* PRODUCT MODAL (mobile=drawer, desktop=dialog) */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:500;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
@media(max-width:767px){
  .modal-overlay{align-items:flex-end}
  .modal-box{width:100%;max-height:94vh;background:var(--bg);border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;transform:translateY(100%);transition:transform .34s var(--ease)}
  .modal-overlay.open .modal-box{transform:translateY(0)}
  .modal-img{width:100%;height:230px;flex-shrink:0;border-radius:0;position:relative}
  .modal-right{display:flex;flex-direction:column;flex:1;overflow:hidden}
  .modal-body{overflow-y:auto;flex:1;padding:0;display:flex;flex-direction:column}
  .modal-footer{padding:12px 16px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bdr);background:var(--bg);flex-shrink:0}
  .modal-name{font-family:var(--fd);font-size:22px;letter-spacing:.8px;color:var(--tx);line-height:1.15;margin:0}
  .modal-price{font-family:var(--fm);font-size:24px;font-weight:700;color:var(--or);line-height:1}
}
@media(min-width:768px){
  .modal-overlay{align-items:center;justify-content:center;padding:24px}
  .modal-box{width:100%;max-width:840px;max-height:88vh;overflow:hidden;background:var(--sur);border:1px solid var(--bdr);border-radius:16px;display:grid;grid-template-columns:350px 1fr;position:relative}
  .modal-img{height:100%;min-height:420px;border-radius:16px 0 0 16px;position:sticky;top:0}
  .modal-right{overflow-y:auto;display:flex;flex-direction:column;max-height:88vh}
  .modal-body{padding:0;display:flex;flex-direction:column;flex:1}
  .modal-footer{padding:16px 28px 20px;border-top:1px solid var(--bdr);background:var(--sur);flex-shrink:0}
  .modal-name{font-family:var(--fd);font-size:26px;letter-spacing:.8px;color:var(--tx);line-height:1.15;margin:0}
  .modal-price{font-family:var(--fm);font-size:28px;font-weight:700;color:var(--or);line-height:1}
}
.modal-close{position:absolute;top:12px;right:12px;z-index:10;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.modal-close:hover{background:rgba(225,107,46,.7)}
.modal-img{background-size:cover;background-position:center;background-color:var(--ele)}
.modal-eyebrow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--or);margin:0}
.modal-price-row{display:flex;align-items:baseline;gap:4px}
.modal-price-unit{font-size:12px;color:var(--tx3);margin-bottom:1px}
.modal-avail{font-size:12px;font-weight:600;color:var(--tx2);min-height:16px}
.modal-desc{font-size:12px;color:var(--tx2);line-height:1.75}
.modal-features{display:flex;flex-wrap:wrap;gap:5px;min-height:0}
.modal-feature{display:inline-flex;align-items:center;gap:3px;background:var(--ele);border:1px solid var(--bdr);border-radius:6px;padding:4px 9px;font-size:10px;color:var(--tx2)}
.modal-feature::before{content:"\2713";color:var(--grn);font-size:9px;font-weight:700;margin-right:2px}
.modal-section-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--tx3)}
.modal-date-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.avail-msg{font-size:12px;font-weight:600;padding:9px 12px;border-radius:8px}
.avail-msg.ok{background:rgba(76,175,114,.1);color:var(--grn)}
.avail-msg.bad{background:rgba(224,82,82,.1);color:var(--red)}
.modal-total{display:flex;align-items:center;justify-content:space-between;background:var(--ele);border:1px solid var(--bdr);border-radius:10px;padding:12px 15px;margin-bottom:10px}
.modal-total-lbl{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.modal-total-val{font-family:var(--fm);font-size:19px;font-weight:700;color:var(--or)}
.btn-add-request{width:100%;background:var(--or);color:#fff;border:none;border-radius:10px;padding:14px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--fb);display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
.btn-add-request:hover,.btn-add-request:active{background:var(--or-dk)}
.addon-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.addon-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx)}
.addon-section-sub{font-size:10px;color:var(--tx3);white-space:nowrap}
.addon-group{margin-bottom:12px}.addon-group:last-child{margin-bottom:0}
.addon-group-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--or);display:flex;align-items:center;gap:4px;margin-bottom:7px}
.addon-group-label::before{content:"";display:inline-block;width:8px;height:2px;background:var(--or);border-radius:1px}
.addon-scroll{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
.addon-scroll::-webkit-scrollbar{display:none}
.addon-card{position:relative;min-width:96px;max-width:96px;background:var(--ele);border:2px solid var(--bdr);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .15s;flex-shrink:0}
.addon-card.checked{border-color:var(--or);background:rgba(225,107,46,.06)}
.addon-card input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.addon-check-ring{position:absolute;top:5px;right:5px;z-index:2;width:17px;height:17px;border-radius:50%;border:1.5px solid var(--bdr2);background:var(--sur);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:transparent;transition:all .15s}
.addon-card.checked .addon-check-ring{background:var(--or);border-color:var(--or);color:#fff}
.addon-card-img{width:100%;height:64px;background-color:var(--bg);background-size:cover;background-position:center}
.addon-card-body{padding:6px 7px}
.addon-card-name{font-size:9px;font-weight:600;color:var(--tx);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
.addon-card.checked .addon-card-name{color:var(--or)}
.addon-card-price{font-family:var(--fm);font-size:10px;font-weight:700;color:var(--or)}
.addon-per{font-size:8px;color:var(--tx3);font-weight:400}

/* FILTER SHEET */
.fs-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:400}
.fs-overlay.open{display:block}
@media(min-width:768px){.fs-overlay{display:none!important}}
.fs{position:fixed;bottom:0;left:0;right:0;z-index:401;background:var(--sur);border-radius:18px 18px 0 0;max-height:90vh;transform:translateY(100%);transition:transform .32s var(--ease);display:flex;flex-direction:column;overflow:hidden}
.fs-overlay.open .fs{transform:translateY(0)}
.fs-handle{width:36px;height:4px;border-radius:2px;background:var(--bdr2);margin:11px auto 0;flex-shrink:0}
.fs-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.fs-title{font-family:var(--fd);font-size:20px;letter-spacing:1px}
.fs-reset{font-size:12px;font-weight:600;color:var(--or);background:none;border:none;cursor:pointer;padding:4px 8px}
.fs-body{overflow-y:auto;flex:1}
.fdd-s{border-bottom:1px solid var(--bdr)}
.fdd-s-head{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;color:var(--tx);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:14px 18px;cursor:pointer;text-align:left}
.fdd-s-head .arr{font-size:9px;color:var(--tx3);transition:transform .2s}
.fdd-s.open .fdd-s-head .arr{transform:rotate(180deg)}
.fdd-s.open .fdd-s-head{color:var(--or)}
.fdd-s-body{display:none;padding:2px 0 12px}
.fdd-s.open .fdd-s-body{display:block}
.sh-cats{display:flex;flex-wrap:wrap;gap:6px;padding:6px 18px}
.sh-pill{background:var(--ele);border:1px solid var(--bdr);border-radius:20px;padding:6px 13px;font-size:12px;font-weight:600;color:var(--tx2);cursor:pointer;transition:all .15s}
.sh-pill.active{background:var(--or-dim);border-color:var(--or);color:var(--or)}
.sh-prices{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 18px}
.sh-prices label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);display:block;margin-bottom:4px}
.sh-prices input{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;color:var(--tx);padding:10px 11px;outline:none;transition:border .15s;font-family:var(--fm)}
.sh-prices input:focus{border-color:var(--or)}
.sh-brands{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px 18px}
.sh-brand-row{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;font-size:12px;color:var(--tx2)}
.sh-brand-row input{width:15px;height:15px;accent-color:var(--or);cursor:pointer;flex-shrink:0}
.sh-stock-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--bdr)}
.tgl-sw{position:relative;width:44px;height:24px;flex-shrink:0}
.tgl-sw input{opacity:0;width:0;height:0;position:absolute}
.tgl-tr{position:absolute;inset:0;background:var(--bdr2);border-radius:12px;cursor:pointer;transition:background .2s}
.tgl-sw input:checked+.tgl-tr{background:var(--or)}
.tgl-tr::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s}
.tgl-sw input:checked+.tgl-tr::before{transform:translateX(20px)}
.fs-foot{padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bdr);background:var(--sur);flex-shrink:0}
.btn-apply{width:100%;background:var(--or);color:#fff;border:none;border-radius:10px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--fb)}
.btn-apply:active{background:var(--or-dk)}

/* CHECKOUT - STEP BAR */
.step-bar{display:flex;align-items:center;padding:16px 0 20px;margin-bottom:6px}
.step-node{display:flex;align-items:center;gap:7px;flex-shrink:0}
.step-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:var(--fm);flex-shrink:0}
.step-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.step-line{flex:1;height:1px;background:var(--bdr);margin:0 8px;min-width:20px}
.step-line-done{background:var(--or)}
.step-done .step-circle{background:var(--grn);color:#fff}
.step-done .step-label{color:var(--grn)}
.step-active .step-circle{background:var(--or);color:#fff}
.step-active .step-label{color:var(--or)}
.step-todo .step-circle{background:var(--ele);border:1px solid var(--bdr);color:var(--tx3)}
.step-todo .step-label{color:var(--tx3)}
.step-title{font-family:var(--fd);font-size:26px;letter-spacing:1.5px;margin-bottom:6px}
.step-sub{font-size:13px;color:var(--tx2);margin-bottom:18px;line-height:1.7}
/* Cart lines */
.co-line{display:flex;gap:10px;align-items:flex-start;background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:11px;margin-bottom:9px}
.co-line-img{width:52px;height:52px;border-radius:7px;background-size:cover;background-position:center;background-color:var(--ele);flex-shrink:0}
.co-line-body{flex:1;min-width:0}
.co-line-combo{font-size:9px;color:var(--or);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.co-line-name{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-line-meta{font-size:10px;color:var(--tx3);margin-bottom:3px}
.co-line-price{font-family:var(--fm);font-size:13px;font-weight:700;color:var(--or)}
.co-line-rm{background:none;border:none;color:var(--tx3);cursor:pointer;padding:3px 5px;font-size:16px;flex-shrink:0;transition:color .15s}
.co-line-rm:hover{color:var(--red)}
.co-total-row{display:flex;justify-content:space-between;align-items:center;background:var(--ele);border:1px solid var(--bdr);border-radius:9px;padding:12px 14px;margin:10px 0 6px}
.co-total-val{font-family:var(--fm);font-size:18px;font-weight:700;color:var(--or)}
.co-note{font-size:11px;color:var(--tx3);margin-bottom:14px;line-height:1.6}
/* Confirm card */
.co-confirm-card{background:var(--sur);border:1px solid var(--bdr);border-radius:12px;padding:16px;margin-bottom:16px}
.co-confirm-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--bdr);font-size:13px}
.co-confirm-row:last-of-type{border-bottom:none}
.co-confirm-lbl{color:var(--tx3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.co-confirm-divider{border:none;border-top:1px solid var(--bdr);margin:10px 0}
.co-confirm-item{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);padding:4px 0}
.co-confirm-total{display:flex;justify-content:space-between;align-items:center;padding-top:10px;margin-top:6px;border-top:2px solid var(--bdr);font-size:14px;font-weight:700;color:var(--tx)}
.co-confirm-total span:last-child{font-family:var(--fm);color:var(--or);font-size:18px}
/* WhatsApp button */
.btn-wa-confirm{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#15803d;color:#fff;font-family:var(--fb);font-weight:700;font-size:15px;padding:15px;border-radius:10px;border:none;cursor:pointer;margin-bottom:10px;transition:background .15s}
.btn-wa-confirm:hover,.btn-wa-confirm:active{background:#166534}
.co-wa-note{font-size:11px;color:var(--tx3);text-align:center;line-height:1.7;margin-bottom:14px}

/* SHARED */
.form-row{margin-bottom:10px}
.form-row label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx2);margin-bottom:5px}
.form-row input,.form-row select,.form-row textarea{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;color:var(--tx);padding:11px 13px;outline:none;font-family:var(--fb);transition:border .15s}
.form-row input:focus,.form-row select:focus{border-color:var(--or)}
.btn-primary{width:100%;background:var(--or);color:#fff;border:none;border-radius:8px;padding:13px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--fb);transition:background .15s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.btn-primary:hover,.btn-primary:active{background:var(--or-dk)}
.btn-secondary{width:100%;background:var(--ele);color:var(--tx2);border:1px solid var(--bdr);border-radius:8px;padding:12px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb);margin-top:8px;transition:all .15s}
.btn-secondary:hover{border-color:var(--or);color:var(--or)}
.panel{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:14px;margin-bottom:10px}
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.badge-confirmed{background:rgba(74,158,237,.12);color:var(--blu)}
.badge-active{background:rgba(76,175,114,.12);color:var(--grn)}
.badge-completed{background:rgba(96,96,96,.15);color:var(--tx3)}
.badge-cancelled,.badge-declined{background:rgba(224,82,82,.12);color:var(--red)}
.badge-pending{background:rgba(245,166,35,.12);color:var(--amb)}
.view-inner{padding:14px}
@media(min-width:768px){.view-inner{max-width:720px;margin:0 auto;padding:28px 24px}}
.view-title{font-family:var(--fd);font-size:28px;letter-spacing:1.5px;margin-bottom:14px}
@media(min-width:768px){.view-title{font-size:34px;margin-bottom:18px}}
.view-sub{font-size:13px;color:var(--tx2);line-height:1.7;margin-bottom:14px}
.cart-line{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:12px;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start}
.cart-line-img{width:54px;height:54px;border-radius:7px;background-size:cover;background-position:center;background-color:var(--ele);flex-shrink:0}
.cart-line-body{flex:1;min-width:0}
.cart-line-name{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-line-meta{font-size:10px;color:var(--tx3);margin-bottom:3px}
.cart-line-combo{font-size:10px;color:var(--or);font-weight:600;margin-bottom:3px}
.cart-line-price{font-family:var(--fm);font-size:13px;font-weight:700;color:var(--or)}
.cart-line-remove{background:none;border:none;color:var(--tx3);cursor:pointer;padding:3px 5px;font-size:16px;margin-left:auto;flex-shrink:0;transition:color .15s}
.cart-line-remove:hover{color:var(--red)}
#cartSummary{background:var(--sur);border:1px solid var(--bdr);border-radius:12px;padding:14px;margin-top:10px}
.cart-bd-row{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);padding:3px 0}
.cart-bd-row.discount{color:var(--grn)}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--bdr);padding-top:10px;margin-top:4px}
.acct-hero{background:var(--sur);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;margin-bottom:12px}
.acct-hero-banner{height:3px;background:linear-gradient(90deg,var(--or),#f59e0b)}
.acct-hero-body{padding:16px}
.acct-avatar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.acct-avatar{width:46px;height:46px;border-radius:50%;background:var(--or-dim);border:2px solid var(--or);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:18px;color:var(--or);flex-shrink:0}
.acct-name{font-size:17px;font-weight:800;color:var(--tx)}
.acct-meta{font-size:11px;color:var(--tx2);margin-top:2px}
.acct-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:9px;font-weight:700;text-transform:uppercase;background:rgba(76,175,114,.12);color:var(--grn);margin-top:3px}
.acct-code-row{display:flex;align-items:center;justify-content:space-between;background:var(--ele);border:1px solid var(--bdr);border-radius:9px;padding:12px 14px;margin-bottom:12px;gap:8px;flex-wrap:wrap}
.acct-code-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3)}
.acct-code-val{font-family:var(--fm);font-size:22px;font-weight:800;color:var(--or);letter-spacing:.15em}
.acct-code-copy{background:var(--or-dim);color:var(--or);border:1px solid var(--or);border-radius:5px;font-size:11px;font-weight:700;padding:5px 10px;cursor:pointer;font-family:var(--fb)}
.acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.acct-stat{background:var(--ele);border:1px solid var(--bdr);border-radius:9px;padding:11px;text-align:center}
.acct-stat-val{font-family:var(--fm);font-size:18px;font-weight:800;color:var(--tx)}
.acct-stat-val.orange{color:var(--or)}
.acct-stat-lbl{font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-top:2px}
.acct-detail-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--bdr);font-size:12px}
.acct-detail-row:last-child{border-bottom:none}
.acct-detail-row .k{color:var(--tx3);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.acct-detail-row .v{color:var(--tx);font-weight:500;text-align:right;max-width:180px;word-break:break-word}
.acct-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.acct-action{background:var(--sur);border:1px solid var(--bdr);border-radius:9px;padding:13px 6px;text-align:center;cursor:pointer;text-decoration:none;transition:border .15s;display:block}
.acct-action:hover,.acct-action:active{border-color:var(--or)}
.acct-action .aa-icon{font-size:17px;margin-bottom:5px;display:block}
.acct-action .aa-label{font-size:10px;font-weight:700;color:var(--tx);line-height:1.3}
.acct-action .aa-sub{font-size:9px;color:var(--tx3);margin-top:2px}
.acct-panel{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:14px;margin-bottom:10px}
.acct-panel-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx2);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.history-row{display:flex;justify-content:space-between;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--bdr);gap:8px}
.history-row:last-child{border-bottom:none}
.history-ref{font-family:var(--fm);font-size:11px;font-weight:700;color:var(--or);margin-bottom:1px}
.history-meta{font-size:10px;color:var(--tx3)}
.history-right{text-align:right;flex-shrink:0}
.history-total{font-family:var(--fm);font-size:12px;font-weight:700;color:var(--tx);margin-top:2px}
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:12px}
@media(min-width:768px){.kpi-grid{grid-template-columns:repeat(4,1fr)}}
.kpi-card{background:var(--ele);border:1px solid var(--bdr);border-radius:8px;padding:13px}
.kpi-value{font-family:var(--fm);font-size:21px;font-weight:700;color:var(--or)}
.kpi-label{font-size:9px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:12px}
.stat-num{font-family:var(--fm);font-size:22px;font-weight:700;color:var(--or)}
.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-top:2px}
.metric-card{background:var(--ele);border:1px solid var(--bdr);border-radius:8px;padding:13px}
.metric-label{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em}
.metric-value{font-family:var(--fm);font-size:20px;font-weight:700;color:var(--tx);margin-top:4px}
.metric-value.accent{color:var(--or)}
.admin-table{width:100%;border-collapse:collapse;font-size:12px}
.admin-table th{text-align:left;padding:7px 8px;border-bottom:2px solid var(--bdr);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);font-weight:600}
.admin-table td{padding:8px;border-bottom:1px solid var(--bdr);color:var(--tx)}
.btn-mini{background:var(--ele);border:1px solid var(--bdr);color:var(--tx2);border-radius:5px;font-size:11px;padding:5px 9px;cursor:pointer;font-family:var(--fb);transition:all .15s}
.btn-mini:hover{border-color:var(--or);color:var(--or)}
.policy-block{margin-bottom:16px}
.policy-block h2{font-family:var(--fd);font-size:20px;letter-spacing:1px;color:var(--or);margin-bottom:7px}
.policy-block p,.policy-block li{font-size:13px;color:var(--tx2);line-height:1.8;margin-bottom:4px}
.policy-block ul{padding-left:16px}
#toastMsg{position:fixed;bottom:calc(var(--bot) + 12px);left:50%;transform:translateX(-50%) translateY(20px);background:var(--sur);border:1px solid var(--bdr);color:var(--tx);font-size:13px;font-weight:600;padding:10px 18px;border-radius:20px;z-index:900;opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap;max-width:90vw;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,.5);pointer-events:none}
#toastMsg.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Split rent+price button ── */
.card-split-btn{
  display:flex;align-items:stretch;
  background:var(--or);color:#fff;border:none;border-radius:6px;
  font-family:var(--fb);cursor:pointer;overflow:hidden;
  transition:background .15s;white-space:nowrap;flex-shrink:0;
}
.card-split-btn:hover,.card-split-btn:active{background:var(--or-dk)}
.csb-rent{
  padding:7px 10px;font-size:10px;font-weight:700;
  display:flex;align-items:center;
}
.csb-div{width:1px;background:rgba(255,255,255,.28);flex-shrink:0;align-self:stretch}
.csb-price{
  padding:7px 9px;font-family:var(--fm);font-size:9px;
  color:rgba(255,255,255,.88);display:flex;align-items:center;
}
@media(min-width:768px){
  .csb-rent{padding:8px 13px;font-size:11px}
  .csb-price{padding:8px 10px;font-size:10px}
}

/* ── Combo card redesign (no dates) ── */
.cb-card{
  min-width:210px;flex-shrink:0;padding:14px 16px;
  border-right:1px solid var(--bdr);display:flex;flex-direction:column;
  gap:10px;position:relative;scroll-snap-align:start;
}
.cb-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--or),#f59e0b)}
@media(min-width:768px){.cb-card{min-width:unset;flex-shrink:unset}}
.cb-card:last-child{border-right:none}
.cb-price-block{flex:1;display:flex;flex-direction:column;gap:3px}
.cb-rent-btn{
  display:flex;align-items:stretch;
  background:var(--or);color:#fff;border:none;border-radius:6px;
  font-family:var(--fb);cursor:pointer;overflow:hidden;
  transition:background .15s;white-space:nowrap;flex-shrink:0;margin-top:auto;
}
.cb-rent-btn:hover,.cb-rent-btn:active{background:var(--or-dk)}
.cb-rent-lbl{padding:8px 12px;font-size:11px;font-weight:700;display:flex;align-items:center}
.cb-rent-div{width:1px;background:rgba(255,255,255,.28);flex-shrink:0;align-self:stretch}
.cb-rent-price{padding:8px 11px;font-family:var(--fm);font-size:10px;color:rgba(255,255,255,.88);display:flex;align-items:center}

/* ── Combo drawer ── */
.cd-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.72);z-index:600;backdrop-filter:blur(4px);
}
.cd-overlay.open{display:flex;align-items:flex-end}
@media(min-width:768px){.cd-overlay.open{align-items:center;justify-content:center;padding:24px}}
.cd{
  width:100%;max-height:92vh;
  background:var(--bg);border-radius:18px 18px 0 0;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(100%);transition:transform .34s var(--ease);
}
.cd-overlay.open .cd{transform:translateY(0)}
@media(min-width:768px){
  .cd{max-width:500px;border-radius:16px;transform:none;max-height:88vh}
}
.cd-handle{width:36px;height:4px;border-radius:2px;background:var(--bdr2);margin:11px auto 0;flex-shrink:0}
@media(min-width:768px){.cd-handle{display:none}}
.cd-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:14px 18px 12px;border-bottom:1px solid var(--bdr);flex-shrink:0;
}
.cd-eyebrow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--or);margin-bottom:3px}
.cd-name{font-family:var(--fd);font-size:22px;letter-spacing:1px;color:var(--tx);line-height:1}
.cd-close{background:none;border:none;color:var(--tx3);font-size:22px;cursor:pointer;line-height:1;padding:2px 4px;flex-shrink:0}
.cd-close:hover{color:var(--tx)}
.cd-body{overflow-y:auto;flex:1;padding:16px 18px}
.cd-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.cd-price-val{font-family:var(--fm);font-size:22px;font-weight:700;color:var(--or)}
.cd-punit{font-size:11px;color:var(--tx3)}
.cd-save{font-size:11px;color:var(--grn);font-weight:600;margin-bottom:14px}
.cd-items-lbl,.cd-dates-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:8px}
.cd-items{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.cd-item{display:flex;align-items:center;gap:10px;background:var(--sur);border:1px solid var(--bdr);border-radius:8px;padding:8px 10px}
.cd-item-img{width:38px;height:38px;border-radius:5px;background-size:cover;background-position:center;background-color:var(--ele);flex-shrink:0}
.cd-item-name{font-size:12px;font-weight:600;color:var(--tx);margin-bottom:2px}
.cd-item-price{font-size:10px;color:var(--or);font-family:var(--fm);font-weight:700}
.cd-date-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.cd-df label{display:block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:4px}
.cd-input{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:7px;color:var(--tx);padding:9px 10px;font-size:16px;font-family:var(--fm);outline:none;transition:border .15s}
.cd-input:focus{border-color:var(--or)}
.cd-hours{font-size:10px;color:var(--tx3);margin-top:4px;margin-bottom:14px}
.cd-total-row{display:flex;align-items:center;justify-content:space-between;background:var(--ele);border:1px solid var(--bdr);border-radius:9px;padding:11px 14px;margin-bottom:4px}
.cd-total-lbl{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.cd-total-val{font-family:var(--fm);font-size:16px;font-weight:700;color:var(--or);min-height:20px}
.cd-foot{
  padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--bdr);background:var(--bg);flex-shrink:0;
}
.cd-add-btn{
  width:100%;background:var(--or);color:#fff;border:none;border-radius:10px;
  padding:14px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:var(--fb);transition:background .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.cd-add-btn:hover,.cd-add-btn:active{background:var(--or-dk)}

/* Admin confirmation WA button */
.btn-mini-wa{
  background:rgba(37,211,102,.1)!important;
  border-color:rgba(37,211,102,.3)!important;
  color:#15803d!important;
}
.btn-mini-wa:hover{background:rgba(37,211,102,.2)!important;border-color:#25D366!important}

/* ── Checkout gate (shortcode required) ── */
.gate-wrap{background:var(--sur);border:1px solid var(--bdr);border-radius:12px;padding:20px;margin-bottom:14px}
.gate-icon{font-size:28px;margin-bottom:12px;display:block;text-align:center}
.gate-title{font-family:var(--fd);font-size:22px;letter-spacing:1px;color:var(--tx);text-align:center;margin-bottom:6px}
.gate-sub{font-size:13px;color:var(--tx2);text-align:center;line-height:1.7;margin-bottom:18px}
.gate-input-row{display:flex;gap:8px;margin-bottom:10px}
.gate-input-row input{flex:1;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;color:var(--tx);padding:13px 14px;font-size:20px;letter-spacing:.2em;text-align:center;outline:none;transition:border .15s;font-family:var(--fm)}
.gate-input-row input:focus{border-color:var(--or)}
.gate-or{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--tx3);font-size:12px}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--bdr)}
.gate-signup-btn{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;color:var(--tx2);padding:12px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb);text-align:center;transition:all .15s;display:block}
.gate-signup-btn:hover{border-color:var(--or);color:var(--or)}
/* Verified client badge */
.client-verified{display:flex;align-items:center;gap:10px;background:rgba(76,175,114,.08);border:1px solid rgba(76,175,114,.2);border-radius:10px;padding:12px 14px;margin-bottom:16px}
.cv-avatar{width:36px;height:36px;border-radius:50%;background:var(--or-dim);border:2px solid var(--or);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:14px;color:var(--or);flex-shrink:0}
.cv-name{font-size:13px;font-weight:700;color:var(--tx)}
.cv-phone{font-size:11px;color:var(--tx3)}
.cv-change{font-size:11px;color:var(--or);background:none;border:none;cursor:pointer;margin-left:auto;font-family:var(--fb)}
/* Fulfillment picker */
.fulfil-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.fulfil-opt{border:2px solid var(--bdr);border-radius:10px;padding:16px 12px;text-align:center;cursor:pointer;transition:all .2s;background:var(--sur)}
.fulfil-opt.sel{border-color:var(--or);background:var(--or-dim)}
.fulfil-opt .fo-icon{font-size:24px;display:block;margin-bottom:8px}
.fulfil-opt .fo-label{font-size:13px;font-weight:700;color:var(--tx)}
.fulfil-opt .fo-sub{font-size:11px;color:var(--tx3);margin-top:3px;line-height:1.4}
/* Delivery zone select */
.delivery-panel{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:14px;margin-bottom:12px}
.delivery-panel h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx2);margin-bottom:10px}
.delivery-notice{display:flex;align-items:flex-start;gap:8px;background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.2);border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:12px;color:var(--amb);line-height:1.6}
.delivery-notice b{display:block;font-weight:700;margin-bottom:2px}
.zone-select select{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;color:var(--tx);padding:11px 13px;font-size:14px;outline:none;transition:border .15s;font-family:var(--fb);margin-bottom:10px}
.zone-select select:focus{border-color:var(--or)}
.zone-price-tag{display:inline-flex;align-items:center;gap:5px;background:var(--ele);border:1px solid var(--bdr);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;color:var(--tx2);margin-bottom:10px}
.zone-price-tag .zp-val{color:var(--amb);font-family:var(--fm);font-weight:700}
/* MoMo payment */
.momo-panel{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:16px;margin-bottom:12px}
.momo-panel h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx2);margin-bottom:12px}
.momo-networks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.momo-net{border:2px solid var(--bdr);border-radius:8px;padding:8px 4px;text-align:center;cursor:pointer;transition:all .15s;background:var(--ele)}
.momo-net.sel{border-color:var(--or)}
.momo-net .mn-name{font-size:10px;font-weight:700;color:var(--tx);margin-top:4px}
.momo-net .mn-dot{width:8px;height:8px;border-radius:50%;margin:0 auto 4px}
.momo-total-box{background:var(--ele);border:1px solid var(--bdr);border-radius:9px;padding:12px 14px;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between}
.momo-total-lbl{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.momo-total-val{font-family:var(--fm);font-size:20px;font-weight:700;color:var(--or)}
.momo-delivery-note{font-size:11px;color:var(--tx3);margin-bottom:12px;line-height:1.6}

/* ── Modal body section groups ── */
.modal-section{padding:14px 16px;border-bottom:1px solid var(--bdr)}
@media(min-width:768px){.modal-section{padding:16px 24px}}
.modal-section:last-child{border-bottom:none}
.modal-section-header{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.modal-id-section{padding:14px 16px 10px}
@media(min-width:768px){.modal-id-section{padding:20px 24px 14px}}
.modal-price-section{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.modal-stock-chip{font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
.modal-stock-chip.in{background:rgba(76,175,114,.12);color:var(--grn)}
.modal-stock-chip.low{background:rgba(245,166,35,.12);color:var(--amb)}
.modal-stock-chip.out{background:rgba(224,82,82,.12);color:var(--red)}

/* ── Checkout gate ── */
.gate-wrap{background:var(--sur);border:1px solid var(--bdr);border-radius:12px;padding:22px 18px;margin-bottom:14px;text-align:center}
.gate-icon{font-size:30px;display:block;margin-bottom:12px}
.gate-title{font-family:var(--fd);font-size:24px;letter-spacing:1px;color:var(--tx);margin-bottom:8px}
.gate-sub{font-size:13px;color:var(--tx2);line-height:1.7;margin-bottom:18px}
.gate-input-row{display:flex;gap:8px;margin-bottom:12px}
.gate-input-row input{flex:1;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;color:var(--tx);padding:13px 14px;font-size:24px;letter-spacing:.25em;text-align:center;outline:none;transition:border .15s;font-family:var(--fm)}
.gate-input-row input:focus{border-color:var(--or)}
.gate-or{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--tx3);font-size:12px;text-align:left}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--bdr)}
.gate-signup-btn{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:8px;color:var(--tx2);padding:13px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb);transition:all .15s}
.gate-signup-btn:hover{border-color:var(--or);color:var(--or)}
/* Verified client badge */
.client-verified{display:flex;align-items:center;gap:10px;background:rgba(76,175,114,.08);border:1px solid rgba(76,175,114,.2);border-radius:10px;padding:12px 14px;margin-bottom:16px}
.cv-avatar{width:38px;height:38px;border-radius:50%;background:var(--or-dim);border:2px solid var(--or);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:15px;color:var(--or);flex-shrink:0}
.cv-name{font-size:13px;font-weight:700;color:var(--tx)}
.cv-phone{font-size:11px;color:var(--tx3);margin-top:1px}
.cv-change{font-size:11px;color:var(--or);background:none;border:none;cursor:pointer;margin-left:auto;font-family:var(--fb);flex-shrink:0}
/* Fulfillment picker */
.fulfil-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.fulfil-opt{border:2px solid var(--bdr);border-radius:10px;padding:18px 12px;text-align:center;cursor:pointer;transition:all .2s;background:var(--sur)}
.fulfil-opt.sel{border-color:var(--or);background:var(--or-dim)}
.fulfil-opt .fo-icon{font-size:26px;display:block;margin-bottom:8px}
.fulfil-opt .fo-label{font-size:13px;font-weight:700;color:var(--tx)}
.fulfil-opt .fo-sub{font-size:11px;color:var(--tx3);margin-top:4px;line-height:1.5}
/* Delivery panel */
.delivery-panel{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:16px;margin-bottom:14px}
.delivery-panel-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-bottom:12px}
.delivery-notice{display:flex;gap:8px;background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.2);border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:12px;color:var(--amb);line-height:1.65}
.delivery-notice strong{display:block;font-weight:700;margin-bottom:2px}
.zone-price-tag{display:inline-flex;align-items:center;gap:6px;background:var(--ele);border:1px solid var(--bdr);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--tx2);margin-bottom:12px}
.zone-price-tag b{color:var(--amb);font-family:var(--fm)}
/* MoMo payment */
.momo-panel{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:16px;margin-bottom:14px}
.momo-panel-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-bottom:12px}
.momo-networks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.momo-net{border:2px solid var(--bdr);border-radius:8px;padding:10px 6px;text-align:center;cursor:pointer;transition:all .15s;background:var(--ele)}
.momo-net.sel{border-color:var(--or)}
.momo-net .mn-dot{width:10px;height:10px;border-radius:50%;margin:0 auto 6px}
.momo-net .mn-name{font-size:10px;font-weight:700;color:var(--tx);line-height:1.3}
.momo-total-box{display:flex;align-items:center;justify-content:space-between;background:var(--ele);border:1px solid var(--bdr);border-radius:9px;padding:13px 15px;margin-bottom:8px}
.momo-total-lbl{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.momo-total-val{font-family:var(--fm);font-size:22px;font-weight:700;color:var(--or)}
.momo-delivery-note{font-size:11px;color:var(--tx3);line-height:1.6;margin-bottom:12px;padding:8px 10px;background:var(--ele);border-radius:7px;border-left:2px solid var(--amb)}
/* Admin WA button */
.btn-mini-wa{background:rgba(37,211,102,.1)!important;border-color:rgba(37,211,102,.3)!important;color:#15803d!important}
.btn-mini-wa:hover{background:rgba(37,211,102,.2)!important;border-color:#25D366!important}

/* ── Desktop checkout + gate responsive ── */
@media(min-width:768px){
  .gate-wrap{padding:28px 32px}
  .gate-title{font-size:28px}
  .gate-input-row input{font-size:26px;padding:14px 18px}
  .fulfil-opts{gap:16px}
  .fulfil-opt{padding:22px 16px}
  .fulfil-opt .fo-icon{font-size:30px}
  .fulfil-opt .fo-label{font-size:14px}
  .momo-networks{grid-template-columns:repeat(3,1fr);gap:12px}
  .momo-net{padding:14px 8px}
  .momo-net .mn-name{font-size:11px}
  .co-confirm-card{padding:20px}
  .co-confirm-row{padding:11px 0;font-size:13px}
  .delivery-panel{padding:20px}
  .zone-price-tag{font-size:13px;padding:6px 14px}
}

/* ── Card body desktop ── */
@media(min-width:768px){
  .card-body{padding:12px 14px 14px}
  .card-name{font-size:13px}
  .card-brand{font-size:9px}
}

/* ── Combo card desktop ── */
@media(min-width:768px){
  .cb-card{padding:16px 18px;gap:12px}
  .cb-name{font-size:14px}
  .cb-price{font-size:16px}
  .cb-save{font-size:11px}
}

/* ── Avail msg desktop ── */
@media(min-width:768px){
  .avail-msg{font-size:13px}
  .modal-total-val{font-size:21px}
}

.stock-badge{font-size:9px;font-weight:700;padding:3px 7px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.stock-badge.in{background:rgba(76,175,114,.12);color:var(--grn)}
.stock-badge.low{background:rgba(245,166,35,.12);color:var(--amb)}
.stock-badge.out{background:rgba(224,82,82,.12);color:var(--red)}

/* ── Card overlay classes (used by renderCatalog JS) ── */
.card-img-badge{position:absolute;top:8px;left:8px;z-index:2;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);color:var(--tx2);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:20px}
.card-img-price{position:absolute;bottom:9px;left:10px;z-index:2;display:flex;align-items:baseline;gap:2px;font-family:var(--fm);font-size:14px;font-weight:700;color:#fff;line-height:1}
@media(min-width:768px){.card-img-price{font-size:16px}}
.card-cat{font-size:9px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;height:12px;overflow:hidden;white-space:nowrap}
/* ── Split button separator ── */
.csb-sep{width:1px;background:rgba(255,255,255,.28);flex-shrink:0;align-self:stretch}
.cb-rent-sep{width:1px;background:rgba(255,255,255,.28);flex-shrink:0;align-self:stretch}
/* ── Admin confirm WA button ── */
.btn-mini-wa{background:rgba(37,211,102,.1)!important;border-color:rgba(37,211,102,.3)!important;color:#15803d!important}
.btn-mini-wa:hover{background:rgba(37,211,102,.2)!important;color:#166534!important}

/* card img classes used by renderCatalog JS */
.card-img-badge{position:absolute;top:8px;left:8px;z-index:2;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);color:var(--tx2);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:20px}
.card-img-price{position:absolute;bottom:9px;left:10px;z-index:2;display:flex;align-items:baseline;gap:2px;font-family:var(--fm);font-size:14px;font-weight:700;color:#fff;line-height:1}
@media(min-width:768px){.card-img-price{font-size:16px}}
.card-cat{font-size:9px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.csb-sep{width:1px;background:rgba(255,255,255,.28);flex-shrink:0;align-self:stretch}
.cb-rent-sep{width:1px;background:rgba(255,255,255,.28);flex-shrink:0;align-self:stretch}
/* nav-logo */
.nav-logo{display:flex;align-items:center;cursor:pointer;flex-shrink:0;text-decoration:none}

/* Cart redesign - Option 4: minimal receipt row */
.cart-line{
  display:flex;align-items:center;gap:0;
  background:var(--sur);border:1px solid var(--bdr);border-radius:8px;
  overflow:hidden;margin-bottom:8px;
}
.cart-line-accent{width:3px;align-self:stretch;background:var(--or);flex-shrink:0}
.cart-line-img{width:44px;height:44px;background-size:cover;background-position:center;background-color:var(--ele);flex-shrink:0}
.cart-line-body{flex:1;min-width:0;padding:9px 10px}
.cart-line-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:3px}
.cart-line-name{font-size:12px;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.cart-line-price{font-family:var(--fm);font-size:13px;font-weight:700;color:var(--or);flex-shrink:0}
.cart-line-meta{font-size:10px;color:var(--tx3);line-height:1.4}
.cart-line-combo{font-size:9px;color:var(--or);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.cart-line-remove{font-size:10px;color:var(--tx3);background:none;border:none;cursor:pointer;padding:0;font-family:var(--fb);transition:color .15s;white-space:nowrap;margin-top:2px;display:inline-block;text-decoration:underline}
.cart-line-remove:hover{color:var(--red)}
@media(min-width:768px){
  .cart-line-body{padding:11px 14px}
  .cart-line-name{font-size:13px}
  .cart-line-price{font-size:14px}
}
/* Admin WA button */
.btn-mini-wa{background:rgba(37,211,102,.1)!important;border-color:rgba(37,211,102,.3)!important;color:#15803d!important}
.btn-mini-wa:hover{background:rgba(37,211,102,.18)!important}

.modal-footer{display:flex;align-items:center;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--bdr);background:var(--bg);flex-shrink:0;gap:10px}
.btn-add-booking{flex:1;background:var(--or);color:#fff;border:none;border-radius:10px;padding:15px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--fb);display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
.btn-add-booking:hover{background:var(--or-dk)}
.btn-add-booking:active{transform:scale(.98)}
.delivery-type-row{display:flex;gap:8px;margin-bottom:14px}
.del-type-pill{flex:1;padding:10px 4px;border:1.5px solid var(--bdr);border-radius:8px;text-align:center;cursor:pointer;transition:all .15s}
.del-type-pill.active{border-color:var(--or);background:var(--or-dim)}
.del-type-pill svg{display:block;margin:0 auto 4px;color:var(--tx2)}
.del-type-pill .dtp-lbl{font-size:9px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em;display:block}
.del-type-pill.active .dtp-lbl{color:var(--or)}
.del-type-pill.active svg{color:var(--or)}
.del-type-pill .dtp-fee{font-size:9px;font-family:var(--fm);color:var(--tx3);display:block;margin-top:2px}
.del-type-pill.active .dtp-fee{color:var(--or)}
.emergency-banner{display:flex;align-items:flex-start;gap:10px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:11px 13px;margin-bottom:12px}
.emergency-banner .em-icon{flex-shrink:0;display:flex;align-items:center}
.emergency-banner .em-title{font-size:12px;font-weight:700;color:#ef4444;margin-bottom:3px}
.emergency-banner .em-desc{font-size:11px;color:var(--tx2);line-height:1.5}
.em-surcharge{font-family:var(--fm);font-weight:700;color:#ef4444}
.zone-price-row{display:flex;justify-content:space-between;align-items:center;background:var(--ele);border-radius:7px;padding:9px 12px;margin-top:6px;margin-bottom:2px}
.zone-price-row .zpr-lbl{font-size:11px;color:var(--tx2)}
.zone-price-row .zpr-val{font-family:var(--fm);font-size:13px;font-weight:700;color:var(--or)}
.delivery-fee-breakdown{background:var(--ele);border-radius:8px;padding:11px 13px;margin-bottom:12px}
.dfb-row{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);padding:3px 0}
.dfb-row.em{color:#ef4444;font-weight:600}
.dfb-total{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--tx);border-top:1px solid var(--bdr);margin-top:6px;padding-top:6px}
.dfb-note{font-size:10px;color:var(--tx3);margin-top:6px;line-height:1.5}
.co-confirm-card{background:var(--sur);border:1px solid var(--bdr);border-radius:12px;padding:16px;margin-bottom:16px}
.co-confirm-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--bdr);font-size:13px}
.co-confirm-row:last-child{border-bottom:none}
.co-confirm-lbl{color:var(--tx3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.co-confirm-item{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);padding:4px 0}
.co-confirm-divider{border:none;border-top:1px solid var(--bdr);margin:10px 0}
.co-confirm-total{display:flex;justify-content:space-between;align-items:center;padding-top:10px;margin-top:6px;border-top:2px solid var(--bdr2);font-size:14px;font-weight:700;color:var(--tx)}
.co-confirm-total-val{font-family:var(--fm);color:var(--or);font-size:18px}
.co-delivery-breakdown{background:rgba(245,166,35,.06);border:1px solid rgba(245,166,35,.18);border-radius:8px;padding:10px 12px;margin-top:10px;margin-bottom:14px}
.cdb-row{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);padding:2px 0}
.cdb-note{font-size:10px;color:var(--tx3);margin-top:5px;line-height:1.5}
.btn-wa-confirm{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#15803d;color:#fff;font-family:var(--fb);font-weight:700;font-size:15px;padding:15px;border-radius:10px;border:none;cursor:pointer;margin-bottom:10px;transition:background .15s;text-decoration:none}
.btn-wa-confirm:hover{background:#166534}
.co-wa-note{font-size:11px;color:var(--tx3);text-align:center;line-height:1.7;margin-bottom:14px}

.co-step-footer{position:sticky;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--bdr);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;z-index:50;flex-shrink:0}
.btn-full{width:100%;display:block;padding:14px;font-size:15px;font-weight:700;border-radius:10px;border:none;cursor:pointer;font-family:var(--fb);text-align:center;transition:background .15s}
.btn-full.btn-primary{background:var(--or);color:#fff}
.btn-full.btn-primary:hover{background:var(--or-dk)}
.btn-full.btn-secondary{background:transparent;color:var(--tx2);border:1px solid var(--bdr)}
.fulfil-opts{display:flex;gap:12px;margin-bottom:16px}
.fulfil-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border:2px solid var(--bdr);border-radius:12px;cursor:pointer;flex:1;text-align:center;transition:all .15s;background:var(--sur)}
.fulfil-opt svg{color:var(--tx2);transition:color .15s}
.fulfil-opt:hover,.fulfil-opt.sel{border-color:var(--or);background:var(--or-dim)}
.fulfil-opt.sel svg,.fulfil-opt.sel .fo-label{color:var(--or)}
.fo-label{font-size:13px;font-weight:700;color:var(--tx)}
.fo-sub{font-size:11px;color:var(--tx3);line-height:1.4}
.delivery-panel{margin-top:4px}
.delivery-panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:10px}
.delivery-notice{background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.2);border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:12px;color:var(--tx2);line-height:1.6}

/* ── Delivery timing pills ── */
.timing-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.timing-pill{padding:12px 8px;border:2px solid var(--bdr);border-radius:10px;text-align:center;cursor:pointer;background:var(--sur);transition:all .15s}
.timing-pill.active{border-color:var(--or);background:var(--or-dim)}
.timing-pill.em-pill{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.04)}
.timing-pill.em-pill.active{border-color:#ef4444;background:rgba(239,68,68,.08)}
.tp-icon{margin-bottom:5px;display:flex;justify-content:center}
.tp-lbl{font-size:12px;font-weight:700;color:var(--tx);display:block;margin-bottom:2px}
.timing-pill.active .tp-lbl{color:var(--or)}
.timing-pill.em-pill.active .tp-lbl{color:#ef4444}
.tp-sub{font-size:10px;color:var(--tx3);display:block;line-height:1.4}
.timing-pill.active .tp-sub{color:var(--or)}
.timing-pill.em-pill.active .tp-sub{color:#ef4444}
/* ── Return type pills ── */
.return-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.return-pill{padding:10px 4px;border:2px solid var(--bdr);border-radius:8px;text-align:center;cursor:pointer;background:var(--sur);transition:all .15s}
.return-pill.active{border-color:var(--or);background:var(--or-dim)}
.rp-icon{display:flex;justify-content:center;margin-bottom:4px}
.rp-lbl{font-size:10px;font-weight:700;color:var(--tx);display:block}
.rp-fee{font-size:9px;font-family:var(--fm);color:var(--tx3);display:block;margin-top:1px}
.return-pill.active .rp-lbl{color:var(--or)}
.return-pill.active .rp-fee{color:var(--or)}
/* ── Zone price tag ── */
.zone-fee-tag{display:flex;justify-content:space-between;align-items:center;background:var(--ele);border-radius:8px;padding:10px 13px;margin:8px 0 14px;font-size:12px}
.zone-fee-tag .zft-lbl{color:var(--tx2)}
.zone-fee-tag .zft-val{font-family:var(--fm);font-size:14px;font-weight:700;color:var(--or)}


/* ═══════════════════════════════════════════════════════════════════
   MCB STOREFRONT — DESIGN SYSTEM OVERRIDE v3
   Single source of truth — resolves all duplicate conflicts
   Brand: #E16527 · Bebas Neue · Montserrat · JetBrains Mono
═══════════════════════════════════════════════════════════════════ */

/* ── Checkout view ── */
#view-checkout { background: var(--bg); }
#view-checkout .view-inner { padding: 14px 16px 80px; }
@media(min-width:768px){
  #view-checkout .view-inner { max-width: 560px; margin: 0 auto; padding: 32px 24px 60px; }
}
#checkoutSteps { margin-bottom: 4px; }
#checkoutBody { padding-bottom: 16px; }

/* ── Step bar ── */
.step-bar {
  display: flex; align-items: center;
  padding: 16px 0 20px; gap: 0; margin-bottom: 8px;
}
.step-node {
  display: flex; flex-direction: column;
  align-items: center; gap: 5px; flex-shrink: 0;
}
.step-circle {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--fm);
  flex-shrink: 0; transition: all .2s;
  border: 2px solid var(--bdr); color: var(--tx3); background: var(--ele);
}
.step-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; white-space: nowrap; color: var(--tx3);
}
.step-line {
  flex: 1; height: 2px; background: var(--bdr);
  margin: 0 6px; min-width: 16px;
  position: relative; top: -9px;
}
.step-line-done { background: var(--or); }
.step-done .step-circle  { background: var(--grn); border-color: var(--grn); color: #fff; }
.step-done .step-label   { color: var(--grn); }
.step-active .step-circle { background: var(--or); border-color: var(--or); color: #fff; }
.step-active .step-label  { color: var(--or); }
.step-todo .step-circle   { background: var(--ele); border-color: var(--bdr); color: var(--tx3); }
.step-todo .step-label    { color: var(--tx3); }

/* ── Step headings ── */
.step-title {
  font-family: var(--fd); font-size: 26px; letter-spacing: 1.5px;
  color: var(--tx); margin-bottom: 5px; line-height: 1.1;
}
.step-sub {
  font-size: 13px; color: var(--tx2); margin-bottom: 18px; line-height: 1.65;
}

/* ── Gate ── */
.gate-wrap {
  background: var(--sur); border: 1px solid var(--bdr);
  border-radius: 14px; padding: 24px 18px; margin-bottom: 16px; text-align: center;
}
.gate-icon { display: block; text-align: center; margin-bottom: 14px; color: var(--or); }
.gate-title {
  font-family: var(--fd); font-size: 24px; letter-spacing: 1px;
  color: var(--tx); margin-bottom: 8px;
}
.gate-sub { font-size: 13px; color: var(--tx2); line-height: 1.7; margin-bottom: 18px; }
.gate-input-row { display: flex; gap: 8px; margin-bottom: 12px; }
.gate-input-row input {
  flex: 1; background: var(--ele); border: 1.5px solid var(--bdr);
  border-radius: 10px; color: var(--tx); padding: 14px 16px;
  font-size: 22px; letter-spacing: .25em; text-align: center;
  outline: none; transition: border .15s; font-family: var(--fm);
}
.gate-input-row input:focus { border-color: var(--or); }
.gate-or {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0; color: var(--tx3); font-size: 12px;
}
.gate-or::before,.gate-or::after { content: ""; flex: 1; height: 1px; background: var(--bdr); }
.gate-signup-btn {
  width: 100%; background: var(--ele); border: 1px solid var(--bdr);
  border-radius: 10px; color: var(--tx2); padding: 13px; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: var(--fb); transition: all .15s;
}
.gate-signup-btn:hover { border-color: var(--or); color: var(--or); }

/* ── Verified client badge ── */
.client-verified {
  display: flex; align-items: center; gap: 12px;
  background: rgba(76,175,114,.08); border: 1px solid rgba(76,175,114,.22);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 18px;
}
.cv-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--or-dim); border: 2px solid var(--or);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-size: 15px; color: var(--or); flex-shrink: 0;
}
.cv-name  { font-size: 13px; font-weight: 700; color: var(--tx); }
.cv-phone { font-size: 11px; color: var(--tx3); margin-top: 1px; }
.cv-change {
  font-size: 11px; color: var(--tx3); background: none;
  border: 1px solid var(--bdr); border-radius: 5px;
  padding: 4px 8px; cursor: pointer; font-family: var(--fb);
  margin-left: auto; flex-shrink: 0; transition: all .15s;
}
.cv-change:hover { border-color: var(--or); color: var(--or); }

/* ── Collection method picker ── */
.fulfil-opts {
  display: flex; gap: 12px; margin-bottom: 18px;
}
.fulfil-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 18px 8px; border: 2px solid var(--bdr); border-radius: 12px;
  cursor: pointer; text-align: center; background: var(--sur); transition: all .18s;
}
.fulfil-opt svg { color: var(--tx3); transition: color .18s; }
.fulfil-opt:active { transform: scale(.97); }
.fulfil-opt.sel { border-color: var(--or); background: var(--or-dim); }
.fulfil-opt.sel svg { color: var(--or); }
.fo-label { font-size: 13px; font-weight: 700; color: var(--tx); line-height: 1.2; }
.fulfil-opt.sel .fo-label { color: var(--or); }
.fo-sub { font-size: 10px; color: var(--tx3); line-height: 1.45; }

/* ── Delivery panel ── */
.delivery-panel { margin-bottom: 16px; }
.delivery-panel-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tx3); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.delivery-panel-title::after {
  content: ""; flex: 1; height: 1px; background: var(--bdr);
}
.delivery-notice {
  background: rgba(245,166,35,.06); border: 1px solid rgba(245,166,35,.2);
  border-left: 3px solid var(--amb); border-radius: 0 8px 8px 0;
  padding: 10px 12px; margin-bottom: 16px;
  font-size: 12px; color: var(--tx2); line-height: 1.6;
}

/* ── Zone select ── */
#zoneFormRow label { margin-bottom: 6px; }
#zoneFormRow select, #coZone {
  width: 100%; background: var(--ele); border: 1.5px solid var(--bdr);
  border-radius: 9px; color: var(--tx); padding: 12px 14px;
  font-family: var(--fb); font-size: 16px; outline: none; transition: border .15s;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
#zoneFormRow select:focus, #coZone:focus { border-color: var(--or); }

/* ── Zone fee tag ── */
.zone-fee-tag {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ele); border: 1px solid var(--bdr);
  border-radius: 9px; padding: 10px 14px; margin: 10px 0 16px;
}
.zft-lbl { font-size: 11px; color: var(--tx2); font-weight: 600; }
.zft-val { font-family: var(--fm); font-size: 16px; font-weight: 700; color: var(--or); }

/* ── Delivery timing pills ── */
.form-row > label { color: var(--tx3); font-size: 10px; }
.timing-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;
}
.timing-pill {
  padding: 12px 6px 10px; border: 2px solid var(--bdr); border-radius: 11px;
  text-align: center; cursor: pointer; background: var(--sur);
  transition: all .18s; user-select: none;
}
.timing-pill.active { border-color: var(--or); background: var(--or-dim); }
.timing-pill.em { border-color: rgba(239,68,68,.25); }
.timing-pill.em.active { border-color: #ef4444; background: rgba(239,68,68,.07); }
.tp-icon { display: flex; justify-content: center; margin-bottom: 6px; }
.tp-icon svg { color: var(--tx3); }
.timing-pill.active .tp-icon svg { color: var(--or); }
.timing-pill.em.active .tp-icon svg { color: #ef4444; }
.tp-lbl { font-size: 12px; font-weight: 700; color: var(--tx); display: block; }
.timing-pill.active .tp-lbl { color: var(--or); }
.timing-pill.em.active .tp-lbl { color: #ef4444; }
.tp-sub { font-size: 10px; color: var(--tx3); display: block; margin-top: 3px; line-height: 1.4; }

/* ── Return type pills ── */
.return-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 8px;
}
.return-pill {
  padding: 11px 4px 9px; border: 2px solid var(--bdr); border-radius: 10px;
  text-align: center; cursor: pointer; background: var(--sur);
  transition: all .18s; user-select: none;
}
.return-pill.active { border-color: var(--or); background: var(--or-dim); }
.rp-icon { display: flex; justify-content: center; margin-bottom: 5px; }
.rp-icon svg { color: var(--tx3); }
.return-pill.active .rp-icon svg { color: var(--or); }
.rp-lbl { font-size: 10px; font-weight: 700; color: var(--tx); display: block; }
.return-pill.active .rp-lbl { color: var(--or); }
.rp-fee {
  font-size: 9px; font-family: var(--fm); color: var(--tx3);
  display: block; margin-top: 2px;
}
.return-pill.active .rp-fee { color: var(--or); }

/* ── Delivery fee breakdown ── */
.delivery-fee-breakdown {
  background: var(--ele); border: 1px solid var(--bdr);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.dfb-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--tx2); padding: 4px 0;
}
.dfb-row.em { color: #ef4444; font-weight: 600; }
.dfb-total {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--tx);
  border-top: 1px solid var(--bdr); margin-top: 7px; padding-top: 7px;
}
.dfb-note {
  font-size: 10px; color: var(--tx3); margin-top: 7px;
  line-height: 1.55; padding-top: 6px; border-top: 1px solid var(--bdr);
}

/* ── Form rows ── */
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tx3); margin-bottom: 6px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%; background: var(--ele); border: 1.5px solid var(--bdr);
  border-radius: 9px; color: var(--tx); padding: 12px 14px;
  outline: none; font-family: var(--fb); font-size: 16px;
  transition: border .15s;
}
.form-row input:focus, .form-row select:focus { border-color: var(--or); }
.form-row input::placeholder { color: var(--tx3); }

/* ── MoMo payment panel ── */
.momo-panel {
  background: var(--sur); border: 1px solid var(--bdr);
  border-radius: 12px; padding: 16px; margin-bottom: 14px;
}
.momo-panel-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tx3); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.momo-panel-title::after {
  content: ""; flex: 1; height: 1px; background: var(--bdr);
}
.momo-networks {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px;
}
.momo-net {
  display: flex; align-items: center; gap: 8px; padding: 11px 10px;
  border: 2px solid var(--bdr); border-radius: 9px; cursor: pointer;
  transition: all .18s; background: var(--ele); font-size: 11px;
  font-weight: 700; color: var(--tx2);
}
.momo-net:active { transform: scale(.97); }
.momo-net.sel { border-color: var(--or); background: var(--or-dim); color: var(--or); }
.mn-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.mn-name { font-size: 11px; font-weight: 700; line-height: 1.2; }
.momo-total-box {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ele); border: 1px solid var(--bdr);
  border-radius: 9px; padding: 12px 14px; margin-top: 12px;
}
.momo-total-lbl {
  font-size: 10px; color: var(--tx3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700;
}
.momo-total-val {
  font-family: var(--fm); font-size: 22px; font-weight: 700; color: var(--or);
}

/* ── Confirm card ── */
.co-confirm-card {
  background: var(--sur); border: 1px solid var(--bdr);
  border-radius: 12px; overflow: hidden; margin-bottom: 14px;
}
.co-confirm-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 11px 16px; border-bottom: 1px solid var(--bdr);
  font-size: 13px; gap: 12px;
}
.co-confirm-row:last-child { border-bottom: none; }
.co-confirm-lbl {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tx3); flex-shrink: 0; padding-top: 1px;
}
.co-confirm-divider { border: none; border-top: 1px solid var(--bdr); }
.co-confirm-item {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--tx2); padding: 5px 16px;
}
.co-confirm-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--ele);
  border-top: 2px solid var(--bdr2); font-size: 13px; font-weight: 700; color: var(--tx);
}
.co-confirm-total-val { font-family: var(--fm); color: var(--or); font-size: 20px; }

/* ── Delivery breakdown on confirm ── */
.co-delivery-breakdown {
  background: rgba(245,166,35,.06); border: 1px solid rgba(245,166,35,.18);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.cdb-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--tx2); padding: 3px 0;
}
.cdb-note { font-size: 10px; color: var(--tx3); margin-top: 7px; line-height: 1.55; }

/* ── WhatsApp confirm button ── */
.btn-wa-confirm {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: #15803d; color: #fff;
  font-family: var(--fb); font-weight: 700; font-size: 15px;
  padding: 16px; border-radius: 12px; border: none; cursor: pointer;
  margin-bottom: 10px; transition: background .15s; text-decoration: none;
  letter-spacing: .01em;
}
.btn-wa-confirm:hover, .btn-wa-confirm:active { background: #166534; }
.co-wa-note {
  font-size: 11px; color: var(--tx3); text-align: center;
  line-height: 1.65; margin-bottom: 16px;
}

/* ── Primary / Secondary buttons ── */
.btn-primary {
  width: 100%; background: var(--or); color: #fff; border: none;
  border-radius: 10px; padding: 14px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--fb); transition: background .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
}
.btn-primary:hover, .btn-primary:active { background: var(--or-dk); }
.btn-secondary {
  width: 100%; background: transparent; color: var(--tx2);
  border: 1px solid var(--bdr); border-radius: 10px;
  padding: 13px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--fb); margin-top: 8px; transition: all .15s;
}
.btn-secondary:hover { border-color: var(--or); color: var(--or); }

/* ── Cart lines (receipt style) ── */
.cart-line {
  display: flex; align-items: stretch; gap: 0;
  background: var(--sur); border: 1px solid var(--bdr);
  border-radius: 10px; overflow: hidden; margin-bottom: 9px;
}
.cart-line-accent {
  width: 3px; background: var(--or); flex-shrink: 0; align-self: stretch;
}
.cart-line-img {
  width: 52px; height: 52px; flex-shrink: 0;
  background-size: cover; background-position: center;
  background-color: var(--ele); align-self: center;
}
.cart-line-body { flex: 1; min-width: 0; padding: 10px 12px; }
.cart-line-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.cart-line-name {
  font-size: 12px; font-weight: 700; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.cart-line-price {
  font-family: var(--fm); font-size: 13px; font-weight: 700;
  color: var(--or); flex-shrink: 0;
}
.cart-line-meta { font-size: 10px; color: var(--tx3); line-height: 1.5; }
.cart-line-combo {
  font-size: 9px; color: var(--or); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.cart-line-remove {
  font-size: 10px; color: var(--tx3); background: none; border: none;
  cursor: pointer; padding: 0; font-family: var(--fb);
  text-decoration: underline; margin-top: 3px; display: inline-block; transition: color .15s;
}
.cart-line-remove:hover { color: var(--red); }

/* ── Cart summary ── */
#cartSummary {
  background: var(--sur); border: 1px solid var(--bdr);
  border-radius: 12px; padding: 14px; margin-top: 12px;
}
.cart-bd-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--tx2); padding: 4px 0;
}
.cart-bd-row.discount { color: var(--grn); }
.cart-total-row {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 2px solid var(--bdr); padding-top: 10px; margin-top: 6px;
}
.co-total-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ele); border: 1px solid var(--bdr);
  border-radius: 10px; padding: 12px 14px; margin: 10px 0 6px;
}
.co-total-val { font-family: var(--fm); font-size: 20px; font-weight: 700; color: var(--or); }
.co-note { font-size: 11px; color: var(--tx3); margin-bottom: 14px; line-height: 1.6; }

/* ── Toast ── */
#toastMsg {
  position: fixed; bottom: calc(var(--bot) + 14px); left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--sur); border: 1px solid var(--bdr2);
  color: var(--tx); font-size: 13px; font-weight: 600;
  padding: 11px 20px; border-radius: 22px; z-index: 900;
  opacity: 0; transition: opacity .2s, transform .2s;
  white-space: nowrap; max-width: 88vw; text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.6); pointer-events: none;
}
#toastMsg.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Modal footer / add booking button ── */
.modal-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bdr); background: var(--bg); flex-shrink: 0;
}
.btn-add-booking {
  flex: 1; background: var(--or); color: #fff; border: none;
  border-radius: 10px; padding: 15px; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: var(--fb);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: background .15s;
}
.btn-add-booking:hover { background: var(--or-dk); }
.btn-add-booking:active { transform: scale(.98); }

/* ── Admin WA mini button ── */
.btn-mini-wa {
  background: rgba(37,211,102,.1) !important;
  border-color: rgba(37,211,102,.3) !important;
  color: #15803d !important;
}
.btn-mini-wa:hover {
  background: rgba(37,211,102,.2) !important;
  border-color: #25D366 !important;
}

/* ── Responsive checkout ── */
@media(min-width:768px){
  .step-title { font-size: 28px; }
  .gate-wrap { padding: 32px 36px; }
  .gate-title { font-size: 28px; }
  .gate-input-row input { font-size: 26px; padding: 16px 20px; }
  .fulfil-opts { gap: 16px; }
  .fulfil-opt { padding: 24px 16px; }
  .momo-networks { gap: 12px; }
  .momo-net { padding: 12px; }
  .co-confirm-card { border-radius: 14px; }
  .co-confirm-row { padding: 12px 20px; font-size: 13px; }
  .co-confirm-item { padding: 5px 20px; }
  .co-confirm-total { padding: 14px 20px; }
  .btn-wa-confirm { font-size: 16px; padding: 18px; border-radius: 14px; }
}

/* ── Step bar precise fix ── */
.step-bar {
  display: flex; align-items: flex-start;
  padding: 18px 0 22px; gap: 0; margin-bottom: 6px;
}
.step-node {
  display: flex; flex-direction: column;
  align-items: center; gap: 5px; flex-shrink: 0;
  min-width: 56px;
}
.step-circle {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--fm);
  flex-shrink: 0; transition: all .22s;
  border: 2px solid var(--bdr); color: var(--tx3); background: var(--ele);
}
.step-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; white-space: nowrap;
  color: var(--tx3); text-align: center;
}
.step-line {
  flex: 1; height: 2px; background: var(--bdr);
  margin-top: 14px; /* centers line with 30px circle: (30-2)/2 = 14 */
  min-width: 12px;
}
.step-line-done { background: var(--or); }
.step-done .step-circle  { background: var(--grn); border-color: var(--grn); color: #fff; }
.step-done .step-label   { color: var(--grn); }
.step-active .step-circle { background: var(--or); border-color: var(--or); color: #fff; box-shadow: 0 0 0 3px var(--or-dim); }
.step-active .step-label  { color: var(--or); }
.step-todo .step-circle   { background: var(--ele); border-color: var(--bdr); color: var(--tx3); }
.step-todo .step-label    { color: var(--tx3); }

/* ── Precise .momo-net.sel fix ── */
.momo-net.sel {
  border-color: var(--or) !important;
  background: var(--or-dim) !important;
  color: var(--or) !important;
}
.momo-net.sel .mn-name { color: var(--or); }

/* ── Delivery panel form-row spacing ── */
.delivery-panel .form-row { margin-bottom: 16px; }
.delivery-panel .form-row:last-child { margin-bottom: 0; }

/* ── Checkout step footer ── */
.co-step-footer {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--bg); border-top: 1px solid var(--bdr);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
  z-index: 50; flex-shrink: 0;
}

/* ── Timing/Return row form-row override ── */
.form-row .timing-row, .form-row .return-row { margin-top: 8px; margin-bottom: 0; }

/* ── View inner for checkout ── */
#view-checkout .view-inner {
  padding: 14px 16px 100px;
}
@media(min-width:768px){
  #view-checkout .view-inner {
    max-width: 480px; margin: 0 auto; padding: 28px 0 80px;
  }
}

/* ── Confirm card order ref row ── */
.co-order-ref-row {
  background: rgba(225,107,46,.07);
  border-radius: 8px 8px 0 0;
  padding: 12px 16px !important;
}

/* ── Top nav links ── */
.nav-links{display:none;align-items:center;gap:2px;margin-left:auto}
@media(min-width:768px){.nav-links{display:flex}}
.nav-link{font-size:12px;font-weight:600;color:var(--tx2);padding:7px 11px;border-radius:6px;
  cursor:pointer;transition:all .15s;white-space:nowrap;text-decoration:none;background:none;border:none}
.nav-link:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.nav-link-admin{color:var(--or)!important;border:1px solid rgba(225,107,46,.3);border-radius:6px}
.nav-link-admin:hover{background:var(--or-dim)!important}

/* ── Product image fallback (only when there's no real photo) ── */
.card-img{background-color:var(--ele)}
.card-img-placeholder::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#1a1a1a 0%,#262626 100%)}

/* ── Staff nav link ── */
.staff-nav-link{background:none;border:1px solid rgba(225,107,46,.4);border-radius:5px;color:var(--or)!important;font-size:11px;font-weight:700;padding:5px 11px;cursor:pointer;font-family:var(--fb);transition:all .15s}
.staff-nav-link:hover{background:var(--or-dim);border-color:var(--or)}

/* ══ Product card placeholder icon ══ */
.card-img-placeholder{background:linear-gradient(135deg,#1a1a1a,#242424)!important;background-image:none!important}
.card-cat-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.22;pointer-events:none}
.card-cat-icon svg{display:block}

/* ══ Combo section (matches renderComboBanner classes) ══ */
.combo-section{background:var(--sur);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;margin-bottom:16px}
.combo-section-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bdr)}
.combo-eyebrow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--or);margin-bottom:2px}
.combo-title{font-family:var(--fd);font-size:15px;letter-spacing:1.5px;color:var(--tx)}
.combo-count-pill{background:var(--or-dim);border:1px solid rgba(225,107,46,.2);color:var(--or);font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;flex-shrink:0}
.combo-scroll{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.combo-scroll::-webkit-scrollbar{display:none}
@media(min-width:768px){.combo-scroll{display:grid;grid-template-columns:repeat(3,1fr)}}
.combo-card{min-width:240px;flex-shrink:0;padding:14px 16px;border-right:1px solid var(--bdr);display:flex;flex-direction:column;gap:9px;position:relative;scroll-snap-align:start}
@media(min-width:768px){.combo-card{min-width:unset;flex-shrink:unset}}
.combo-card:last-child{border-right:none}
.combo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--or),#f59e0b)}
.combo-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.combo-name{font-size:13px;font-weight:700;color:var(--tx);line-height:1.3;flex:1}
.combo-tag{background:var(--or-dim);border:1px solid rgba(225,107,46,.2);color:var(--or);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;margin-top:2px}
.combo-items{display:flex;flex-wrap:wrap;gap:4px}
.combo-item-chip{display:inline-flex;align-items:center;gap:3px;background:var(--ele);border:1px solid var(--bdr);border-radius:20px;padding:3px 8px;font-size:10px;font-weight:600;color:var(--tx2);white-space:nowrap}
.combo-item-chip::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--or);flex-shrink:0}
.combo-desc{font-size:11px;color:var(--tx3);line-height:1.5;flex:1}
.combo-pricing{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--bdr);padding-top:10px;margin-top:auto}
.combo-price{font-family:var(--fm);font-size:17px;font-weight:700;color:var(--or);line-height:1}
.combo-price-unit{font-size:10px;color:var(--tx3);font-weight:400;margin-left:1px}
.combo-savings{font-size:10px;color:var(--grn);margin-top:3px;font-weight:600}
.combo-rent-btn{background:var(--or);color:#fff;border:none;border-radius:7px;font-family:var(--fb);font-size:11px;font-weight:700;padding:9px 14px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s}
.combo-rent-btn:hover,.combo-rent-btn:active{background:var(--or-dk)}

/* ══ Combo modal ══ */
.cd-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:600;backdrop-filter:blur(4px)}
.cd-overlay.open{display:flex;align-items:flex-end}
@media(min-width:768px){.cd-overlay.open{align-items:center;justify-content:center;padding:24px}}
.cd{width:100%;max-height:92vh;background:var(--bg);border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;transform:translateY(100%);transition:transform .34s var(--ease)}
.cd-overlay.open .cd{transform:translateY(0)}
@media(min-width:768px){.cd{max-width:500px;border-radius:16px;transform:none;max-height:88vh}}
.cd-handle{width:36px;height:4px;border-radius:2px;background:var(--bdr2);margin:11px auto 0;flex-shrink:0}
@media(min-width:768px){.cd-handle{display:none}}
.cd-head{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 18px 12px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.cd-eyebrow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--or);margin-bottom:3px}
.cd-name{font-family:var(--fd);font-size:22px;letter-spacing:1px;color:var(--tx);line-height:1}
.cd-close{background:none;border:none;color:var(--tx3);font-size:22px;cursor:pointer;line-height:1;padding:2px 4px;flex-shrink:0}
.cd-close:hover{color:var(--tx)}
.cd-body{overflow-y:auto;flex:1;padding:16px 18px}
.cd-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.cd-price-val{font-family:var(--fm);font-size:22px;font-weight:700;color:var(--or)}
.cd-punit{font-size:11px;color:var(--tx3)}
.cd-save{font-size:11px;color:var(--grn);font-weight:600;margin-bottom:14px}
.cd-items-lbl,.cd-dates-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:8px}
.cd-items{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.cd-item{display:flex;align-items:center;gap:10px;background:var(--sur);border:1px solid var(--bdr);border-radius:8px;padding:8px 10px}
.cd-item-img{width:38px;height:38px;border-radius:5px;background-size:cover;background-position:center;background-color:var(--ele);flex-shrink:0}
.cd-item-name{font-size:12px;font-weight:600;color:var(--tx);margin-bottom:2px}
.cd-item-price{font-size:10px;color:var(--or);font-family:var(--fm);font-weight:700}
.cd-date-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.cd-df label{display:block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:4px}
.cd-input{width:100%;background:var(--ele);border:1px solid var(--bdr);border-radius:7px;color:var(--tx);padding:9px 10px;font-size:16px;font-family:var(--fm);outline:none;transition:border .15s}
.cd-input:focus{border-color:var(--or)}
.cd-total-row{display:flex;align-items:center;justify-content:space-between;background:var(--ele);border:1px solid var(--bdr);border-radius:9px;padding:11px 14px;margin-bottom:4px}
.cd-total-lbl{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.cd-total-val{font-family:var(--fm);font-size:16px;font-weight:700;color:var(--or);min-height:20px}
.cd-foot{padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bdr);background:var(--bg);flex-shrink:0}
.cd-add-btn{width:100%;background:var(--or);color:#fff;border:none;border-radius:10px;padding:14px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--fb);transition:background .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.cd-add-btn:hover,.cd-add-btn:active{background:var(--or-dk)}

/* ══ Account tabs ══ */
.acct-tab-bar{display:flex;background:var(--ele);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;margin-bottom:18px}
.acct-tab{flex:1;padding:10px;font-size:13px;font-weight:600;font-family:var(--fb);background:none;border:none;color:var(--tx2);cursor:pointer;transition:all .15s}
.acct-tab.active{background:var(--or);color:#fff}

/* ══ Option D Card — Layout D (split button) ══ */
.card-d {
  background: #161616;
  border: 1.5px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .2s, transform .18s;
}
.card-d::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #E16527, #f59e0b 60%, transparent);
  z-index: 1;
}
@media(min-width:768px){
  .card-d:hover { border-color: #E16527; transform: translateY(-2px); }
}
.card-d:active { transform: scale(.98); }

/* Icon area */
.card-icon-area {
  height: 100px;
  background: linear-gradient(135deg, #1a1a1a, #222);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
@media(min-width:768px){ .card-icon-area { height: 116px; } }
.card-cat-pill {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(10,10,10,.84);
  border: 1px solid rgba(255,255,255,.07);
  color: #a0a0a0;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.card-cat-icon-wrap {
  opacity: .22;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Body */
.card-d .card-body {
  padding: 9px 10px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card-brand-lbl {
  font-size: 8px;
  color: #606060;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}
.card-name-d {
  font-size: 11px;
  font-weight: 700;
  color: #f0f0f0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media(min-width:768px){ .card-name-d { font-size: 12px; } }

/* Split footer button */
.card-split-footer {
  display: flex;
  align-items: stretch;
  background: #E16527;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s;
  border-top: none;
  min-height: 36px;
}
.card-split-footer:hover, .card-split-footer:active { background: #c25315; }
.csf-price {
  padding: 0 11px;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.csf-div {
  width: 1px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
  align-self: stretch;
}
.csf-rent {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}

/* ══ Logo sizing ══ */

@media(min-width:768px){
  
}

@media(min-width:768px){:root{--nav:120px}}

/* ══ Bottom nav ══ */
#bottomNav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:300;
  background:rgba(255,255,255,.98);
  border-top:1px solid var(--bdr);
  grid-template-columns:repeat(5,1fr);
  height:var(--bot);
  padding-bottom:env(safe-area-inset-bottom,0px);
  backdrop-filter:blur(16px);
  box-shadow:0 -4px 18px rgba(43,38,34,.06);
}
@media(max-width:767px){#bottomNav{display:grid}}
.bn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 2px 2px;cursor:pointer;border:none;background:none;
  color:var(--tx3);transition:color .15s;position:relative;
  font-family:var(--fb);
}
.bn:active{opacity:.7}
.bn.active,.bn.active .bn-icon svg{color:#E16527;stroke:#E16527}
.bn.active .bn-lbl{color:#E16527}
.bn-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.bn-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.bn-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tx3);white-space:nowrap;transition:color .15s}
.bn-badge{
  position:absolute;top:4px;left:calc(50% + 4px);
  background:#E16527;color:#fff;font-size:8px;font-weight:700;
  padding:1px 4px;border-radius:10px;min-width:14px;text-align:center;
  display:none;
}
.bn-badge.visible{display:block}
#bottomNavWa .bn-icon svg{stroke:#25D366}
#bottomNavWa .bn-lbl{color:#25D366}
#bottomNavWa.active .bn-icon svg{stroke:#25D366}
/* Search trigger icon */
.srch-trigger{background:none;border:none;cursor:pointer;color:var(--tx2);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;transition:background .15s,color .15s;flex-shrink:0}
.srch-trigger:hover,.srch-trigger:active{background:var(--or-dim);color:var(--or)}
.srch-trigger svg{stroke:currentColor}

/* ══ Full-screen search overlay ══ */
.srch-overlay-bg{
  display:none;position:fixed;inset:0;z-index:500;
  background:var(--bg);
  flex-direction:column;
}
.srch-overlay-bg.open{display:flex}
.srch-overlay-inner{display:flex;flex-direction:column;height:100%;overflow:hidden}
.srch-overlay-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top,0px));
  border-bottom:1px solid var(--bdr);
  background:var(--bg);
  flex-shrink:0;
}
.srch-overlay-input-wrap{
  flex:1;position:relative;display:flex;align-items:center;
  background:var(--ele);border:1.5px solid var(--or);border-radius:10px;
  overflow:hidden;
}
.srch-overlay-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;flex-shrink:0}
.srch-overlay-input{
  width:100%;background:none;border:none;outline:none;
  padding:11px 36px 11px 38px;font-size:16px;color:var(--tx);
  font-family:var(--fb);
}
.srch-overlay-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:var(--ele);border:none;color:var(--tx2);font-size:14px;
  cursor:pointer;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.srch-overlay-cancel{
  background:none;border:none;color:var(--or);font-size:14px;font-weight:600;
  cursor:pointer;padding:4px 0;white-space:nowrap;font-family:var(--fb);
}
.srch-overlay-body{flex:1;overflow-y:auto;padding:16px 14px}
.srch-overlay-section-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:10px}
.srch-quick-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.srch-qchip{
  background:var(--ele);border:1px solid var(--bdr);border-radius:20px;
  padding:7px 14px;font-size:12px;font-weight:600;color:var(--tx2);
  cursor:pointer;font-family:var(--fb);transition:all .15s;
}
.srch-qchip:hover,.srch-qchip:active{border-color:var(--or);color:var(--or);background:var(--or-dim)}
.srch-overlay-hint{font-size:12px;color:var(--tx3);line-height:1.6}

/* ══ More tray ══ */
.more-tray-bg{display:none;position:fixed;inset:0;z-index:490;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.more-tray-bg.open{display:block}
.more-tray{
  position:fixed;bottom:0;left:0;right:0;z-index:491;
  background:var(--sur);border-radius:18px 18px 0 0;
  border-top:1px solid var(--bdr);
  transform:translateY(100%);transition:transform .3s var(--ease);
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  max-height:70vh;overflow-y:auto;
}
.more-tray.open{transform:translateY(0)}
.more-tray-handle{width:36px;height:4px;background:var(--bdr2);border-radius:2px;margin:10px auto 8px}
.more-tray-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);padding:4px 18px 10px;border-bottom:1px solid var(--bdr)}
.more-tray-items{padding:6px 0 4px}
.more-tray-item{
  display:flex;align-items:center;gap:14px;width:100%;padding:13px 18px;
  background:none;border:none;cursor:pointer;text-align:left;
  text-decoration:none;color:var(--tx);font-family:var(--fb);
  transition:background .15s;
}
.more-tray-item:hover,.more-tray-item:active{background:var(--ele)}
.mti-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--or);flex-shrink:0}
.mti-icon svg{stroke:var(--or)}
.mti-label{flex:1;font-size:14px;font-weight:600;color:var(--tx)}
.mti-arrow{color:var(--tx3);font-size:18px}

/* ═══ CONCEPT A HEADER ═══════════════════════════════════════════ */
/* Hide the old horizontal accent strip on mobile */
@media(max-width:767px){.nav-accent-strip{display:none}}

/* Left vertical stripe on mobile bar */
@media(max-width:767px){
  .topnav-row1{
    border-left:3.5px solid #E16527;
    padding-left:11px;
  }
}

/* Nav links: desktop only */
.topnav-links{display:none;align-items:center;gap:2px;margin-left:auto;flex-shrink:0}
@media(min-width:768px){.topnav-links{display:flex}}

/* Icon buttons: uniform size, clean tap targets */
.icon-btn{
  background:none;border:none;cursor:pointer;
  color:#a0a0a0;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;
  transition:background .12s,color .12s;
  position:relative;flex-shrink:0;
}
.icon-btn:hover,.icon-btn:active{background:rgba(225,107,46,.1);color:#E16527}
.icon-btn svg{stroke:currentColor;width:20px;height:20px}

/* Cart badge */
.cart-badge{
  position:absolute;top:3px;right:3px;
  min-width:16px;height:16px;padding:0 4px;
  background:#E16527;color:#fff;
  font-size:8px;font-weight:700;border-radius:10px;
  border:1.5px solid #0d0d0d;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.cart-badge[data-empty="true"]{display:none}

/* ── Concept A category icon row ── */
.cat-icon-row{
  display:flex;overflow-x:auto;scrollbar-width:none;
  background:#080808;
  border-top:1px solid #161616;
  flex-shrink:0;height:52px;
  align-items:center;
  padding:0 8px;gap:4px;
}
.cat-icon-row::-webkit-scrollbar{display:none}
@media(min-width:768px){.cat-icon-row{height:58px;padding:0 12px;gap:6px}}

.cat-icon-item{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;
  padding:5px 9px;border-radius:9px;
  min-width:52px;cursor:pointer;
  border:1px solid transparent;
  transition:background .12s,border-color .12s,color .12s;
  color:#606060;flex-shrink:0;
  background:none;
  position:relative;
}
@media(min-width:768px){.cat-icon-item{min-width:60px;padding:6px 12px}}

.cat-icon-item svg{
  width:18px;height:18px;stroke:currentColor;flex-shrink:0;
  transition:stroke .12s;
}
@media(min-width:768px){.cat-icon-item svg{width:20px;height:20px}}

.cat-icon-item span{
  font-size:7.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:currentColor;white-space:nowrap;
}
@media(min-width:768px){.cat-icon-item span{font-size:8px}}

.cat-icon-item:hover{
  background:rgba(255,255,255,.05);color:#a0a0a0;
}

/* Active state: orange tint box, no underline bar */
.cat-icon-item.active{
  color:#E16527!important;
  background:rgba(225,107,46,.11)!important;
  border-color:rgba(225,107,46,.28)!important;
}
.cat-icon-item.active svg{stroke:#E16527!important}

/* Remove old bottom-bar underline */
.cat-icon-item::after{display:none!important}

/* Search trigger */
.srch-trigger{
  background:none;border:none;cursor:pointer;
  color:#a0a0a0;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;
  transition:background .12s,color .12s;
}
.srch-trigger:hover,.srch-trigger:active{background:rgba(225,107,46,.1);color:#E16527}
.srch-trigger svg{stroke:currentColor;width:20px;height:20px}
/* ══════════════════════════════════════════════════════════════════ */


/* ═══ MODAL BODY ORGANISATION ═════════════════════════════════════ */
/* Padding on every section for consistent breathing room */
.modal-section{
  padding:16px 16px;
  border-bottom:1px solid var(--bdr);
}
@media(min-width:768px){
  .modal-section{padding:18px 24px}
}
.modal-section:last-child{border-bottom:none}

/* Name stands alone, clear weight */
.modal-name{
  font-size:20px;line-height:1.25;margin-top:4px;
}
@media(min-width:768px){.modal-name{font-size:24px}}

/* Description: readable line-height, muted */
.modal-desc{
  font-size:12.5px;color:var(--tx2);
  line-height:1.8;margin:0;
}
@media(min-width:768px){.modal-desc{font-size:13px}}

/* Feature chips */
.modal-features{display:flex;flex-wrap:wrap;gap:6px}
.feature-chip{
  font-size:10.5px;font-weight:600;color:var(--tx2);
  background:var(--ele);border:1px solid var(--bdr);
  border-radius:6px;padding:4px 9px;line-height:1.4;
}

/* Date inputs — full width, clear label */
.modal-date-row .form-row label{
  font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tx3);margin-bottom:5px;
}
.modal-date-row .form-row input{
  width:100%;font-size:14px;
}

/* Avail message */
.avail-msg{font-size:12px;font-weight:600;color:var(--tx2)}
/* ══════════════════════════════════════════════════════════════════ */


/* When cat strip hidden, reduce nav offset for views */
body.cat-hidden .view{height:calc(100vh - 52px - var(--bot))}
@media(min-width:768px){body.cat-hidden .view{height:calc(100vh - 60px)}}


/* ── Live search results inside overlay ── */
.srch-result-list{display:flex;flex-direction:column;gap:2px}
.srch-result-row{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:none;border-bottom:1px solid var(--bdr);
  padding:12px 4px;cursor:pointer;text-align:left;
}
.srch-result-row:active{background:rgba(225,107,46,.06)}
.srch-result-ico{
  width:36px;height:36px;flex-shrink:0;border-radius:9px;
  background:var(--ele);display:flex;align-items:center;justify-content:center;
  color:var(--tx3);
}
.srch-result-ico svg{width:18px;height:18px;stroke:currentColor}
.srch-result-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.srch-result-name{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-result-meta{font-size:11px;color:var(--tx3)}
.srch-result-price{font-size:12px;font-weight:700;color:var(--or);flex-shrink:0}


/* ═══ FILTER DROPDOWN PANEL (desktop sidebar) ═══════════════════ */
.cat-sidebar{padding:18px 14px}
.fdrop-frame{
  background:var(--sur);border:1px solid var(--bdr);border-radius:14px;
  padding:16px;
}
.fdrop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.fdrop-title{font-size:13px;font-weight:700;color:var(--tx)}
.fdrop-clear{font-size:11px;color:var(--or);background:none;border:none;cursor:pointer;padding:0}
.fdrop-clear:hover{text-decoration:underline}

.fdrop-group{border-top:1px solid var(--bdr);padding:12px 0}
.fdrop-group:first-of-type{border-top:none;padding-top:8px}
.fdrop-group-last{padding-bottom:2px}

.fdrop-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:none;cursor:pointer;padding:0;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tx2);
}
.fdrop-toggle:hover{color:var(--tx)}
.fdrop-chev{width:14px;height:14px;stroke:var(--tx3);transition:transform .2s;flex-shrink:0}
.fdrop-toggle.collapsed .fdrop-chev{transform:rotate(-90deg)}

.fdrop-panel{
  max-height:600px;overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease, margin-top .2s ease;
  opacity:1;margin-top:10px;
}
.fdrop-panel:not(.open){max-height:0;opacity:0;margin-top:0}

.fdrop-price-row{display:flex;gap:6px;align-items:center}
.fdrop-price-input{
  width:100%;padding:8px 10px;background:var(--ele);border:1px solid var(--bdr);
  border-radius:8px;color:var(--tx);font-size:12px;font-family:inherit;
}
.fdrop-price-input:focus{outline:none;border-color:var(--or)}
.fdrop-price-dash{color:var(--tx2);font-size:12px;flex-shrink:0}
.fdrop-price-active{font-size:11px;color:var(--tx2);margin-top:6px}

.fdrop-stock-row{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:12px;color:var(--tx2);
}
.fdrop-stock-row input{accent-color:var(--or);width:15px;height:15px;cursor:pointer}

/* Category/Brand checkbox rows inside panels */
.filter-check-row{
  display:flex;align-items:center;gap:9px;font-size:12px;color:var(--tx2);
  padding:6px 4px;border-radius:7px;cursor:pointer;transition:background .12s;
}
.filter-check-row:hover{background:var(--ele);color:var(--tx)}
.filter-check-row input{accent-color:var(--or);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.filter-count{
  margin-left:auto;font-size:10px;color:var(--tx3);font-family:var(--fm,monospace);
  background:var(--ele);padding:1px 7px;border-radius:10px;flex-shrink:0;
}


/* ═══ DB connection error / loading states ═══════════════════════ */
.mcb-db-loading{
  grid-column:1/-1;text-align:center;padding:50px 20px;
  color:var(--tx2);font-size:13px;
}
.mcb-db-error{
  grid-column:1/-1;text-align:center;padding:50px 24px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--sur);border:1px solid var(--bdr);border-radius:14px;
}
.mcb-db-error-ico{font-size:32px;color:var(--or)}
.mcb-db-error-title{font-size:15px;font-weight:700;color:var(--tx)}
.mcb-db-error-msg{font-size:12px;color:var(--tx2);max-width:380px;line-height:1.6}
.mcb-db-error-retry{
  margin-top:8px;padding:9px 20px;background:var(--or);color:#fff;
  border:none;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;
}
.mcb-db-error-retry:hover{background:var(--or-dark)}


/* Compact image area when product has no photo */
.modal-img.modal-img-empty{height:140px!important;min-height:140px!important;background:linear-gradient(160deg,#1c1208,#181818)!important}
@media(min-width:761px){.modal-img.modal-img-empty{min-height:280px!important;height:auto!important}}