:root{
  --black:#0b0b0d; --black-soft:#17171a;
  --gold:#c9a227; --gold-dark:#b38728;
  --metal:linear-gradient(135deg,#bf953f 0%,#fcf6ba 45%,#b38728 70%,#fbf5b7 100%);
  --ivory:#f6f4ef; --white:#fff; --text:#1a1a1a; --text-light:#6b6b6b;
  --border:#e6e2d8; --danger:#d33; --success:#1d9b6c;
  --shadow:0 2px 10px rgba(0,0,0,0.06); --shadow-lg:0 8px 24px rgba(0,0,0,0.1);
  --modal-pad:min(32px,5vw);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%}
input,select,textarea{max-width:100%;min-width:0}
.hidden{display:none !important}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--ivory);color:var(--text);line-height:1.5;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.container{padding:0 28px}}
@media(min-width:1200px){.container{padding:0 52px}}

.header{background:var(--black);position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.2)}
.header .container{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0;height:56px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand-logo{height:40px;width:auto;object-fit:contain;background:#fff;border-radius:8px;padding:3px;flex:none}
.brand h1{font-size:20px;font-weight:800;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;letter-spacing:-.5px}
.nav{display:none;gap:4px;align-items:center;flex:none}
.nav-btn{background:none;border:none;padding:10px 16px;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;color:#ddd;cursor:pointer;border-radius:8px;transition:.2s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nav-btn:hover{color:var(--white);background:rgba(255,255,255,.06)}
.nav-btn.active{color:var(--gold);background:rgba(201,162,39,.08)}
.nav-btn.active::after{content:'';display:block;height:2px;width:100%;background:var(--gold);margin-top:2px;border-radius:2px}
.cart-badge{background:var(--danger);color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;margin-left:4px}
.cart-icon{width:20px;height:20px;object-fit:contain;vertical-align:middle}
@media(min-width:768px){.nav{display:flex}}

.searchbar{background:var(--black);padding:8px 0 10px}
.search-wrap{display:flex;gap:8px;max-width:1200px;margin:0 auto}
.search-wrap input{flex:1;min-width:0;padding:0 18px;border:1.5px solid #444;border-radius:999px;font-size:15px;outline:none;background:rgba(255,255,255,.05);color:#fff;transition:border-color .2s;font-family:'Inter',sans-serif;height:48px}
.search-wrap input:focus{border-color:var(--gold)}
.search-wrap input::placeholder{color:#999}
.search-wrap button{background:var(--metal);border:none;border-radius:999px;padding:0;cursor:pointer;color:var(--black);font-weight:800;flex:none;display:flex;align-items:center;justify-content:center;height:48px;width:48px;min-width:48px;transition:transform .2s}
.search-wrap button:hover{transform:scale(1.05)}
@media(min-width:768px){.search-wrap input{height:52px}}
@media(min-width:1200px){.search-wrap input{height:54px}}

.main{padding:20px 0 40px}
.section{display:none}
.section.active{display:block;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section-title{font-size:30px;font-weight:700;letter-spacing:-.5px;margin-bottom:18px;color:var(--black);line-height:1.2}

.categories{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.categories::-webkit-scrollbar{display:none}
.cat-btn{flex:none;padding:0 18px;border:1.5px solid var(--border);background:var(--white);border-radius:21px;font-weight:500;font-size:15px;font-family:'Inter',sans-serif;cursor:pointer;transition:all .25s;color:var(--text);height:42px;display:flex;align-items:center;white-space:nowrap}
.cat-btn:hover{border-color:#ccc;background:#f9f9f9}
.cat-btn.active{background:var(--black);color:var(--white);border-color:var(--black);font-weight:600}
@media(min-width:1200px){.cat-btn{height:44px}}

.products-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:768px){.products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:1200px){.products-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}

.product-card{background:var(--white);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.25s;display:flex;flex-direction:column;min-width:0}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.product-image{width:100%;aspect-ratio:4/4.2;background:#eee;display:flex;align-items:center;justify-content:center;font-size:56px;color:#bbb;overflow:hidden;position:relative}
.product-image img{width:100%;height:100%;object-fit:cover}
.img-count{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:2px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:3px}
.img-count::before{content:'';width:12px;height:12px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4a2 2 0 0 0 2-2 2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 2 2 0 0 0 2 2h4a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>") no-repeat center/contain}

.product-info{padding:14px;min-width:0;display:flex;flex-direction:column;gap:6px;flex:1}
.product-category{font-size:11px;color:var(--text-light);text-transform:uppercase;letter-spacing:1px;font-weight:500}
.product-name{font-size:17px;font-weight:600;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px;word-break:break-word}
.product-price{font-size:21px;font-weight:700;color:var(--black);letter-spacing:-.5px;margin-bottom:4px}
.product-desc{font-size:14px;font-weight:400;color:var(--text-light);line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.btn{padding:0 22px;border:none;border-radius:8px;font-weight:600;font-size:15px;font-family:'Inter',sans-serif;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px}
.btn-primary{background:var(--black);color:var(--white)}
.btn-primary:hover{background:#2a2a2a}
.btn-success{background:var(--success);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-outline{background:var(--white);color:var(--text);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--black)}
.btn-add{width:100%;height:48px;border-radius:12px;font-size:16px;font-weight:600;font-family:'Inter',sans-serif;background:var(--black);color:var(--white);margin-top:auto;transition:.2s}
.btn-add:hover{background:var(--gold-dark)}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(11,11,13,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;z-index:120;padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:6px;box-shadow:0 -2px 12px rgba(0,0,0,.15);height:76px;border-top:1px solid rgba(255,255,255,.06)}
.bnav-btn{flex:1;background:transparent;border:none;color:#aaa;padding:6px 4px;font-size:12px;font-weight:500;font-family:'Inter',sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;border-radius:10px;position:relative;overflow:hidden;transition:all .25s ease;isolation:isolate}
.bnav-btn .ic{display:flex;align-items:center;justify-content:center;transition:all .25s ease;position:relative;z-index:2}
.bnav-btn .ic svg{width:25px;height:25px}
.bnav-btn .bnav-label{position:relative;z-index:2;font-size:12px;font-weight:500;transition:color .25s}
.bnav-btn:hover{color:#ddd}
.bnav-btn.active{color:var(--gold)}
.bnav-btn.active .ic{transform:translateY(-2px)}
.bnav-btn .ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.25) 0%,rgba(255,255,255,.15) 40%,transparent 70%);transform:scale(0);pointer-events:none;z-index:1}
.bnav-btn.tapped .ripple{animation:waterRipple .6s cubic-bezier(.25,.46,.45,.94)}
@keyframes waterRipple{0%{transform:scale(0);opacity:.8}50%{opacity:.4}100%{transform:scale(3.5);opacity:0}}
.bnav-btn.active::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:18px;height:2px;background:var(--gold);border-radius:2px}
@media(min-width:768px){.bottom-nav{display:none}body{padding-bottom:0}}

.cart-content{background:var(--white);border-radius:12px;padding:24px;box-shadow:var(--shadow)}
.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.cart-item:last-child{border-bottom:none}
.cart-item-image{width:min(72px,20vw);height:min(72px,20vw);border-radius:8px;overflow:hidden;background:#eee;flex:none;display:flex;align-items:center;justify-content:center;font-size:28px;color:#bbb}
.cart-item-image img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-weight:600;font-size:15px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;word-break:break-word}
.cart-item-price{color:var(--text-light);font-size:13px}
.cart-item-controls{display:flex;align-items:center;gap:10px;margin-top:8px}
.qty-btn{width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer;font-weight:700;font-size:16px}
.cart-item-total{font-weight:700;font-size:16px;color:var(--black);text-align:right}
.cart-item-remove{background:none;border:none;color:var(--danger);cursor:pointer;font-size:22px;padding:6px}
.cart-summary{margin-top:20px;padding-top:20px;border-top:2px solid var(--border)}
.cart-total{display:flex;justify-content:space-between;font-size:22px;font-weight:700;margin-bottom:16px;gap:10px;color:var(--black)}
.cart-empty{text-align:center;padding:50px 20px;color:var(--text-light)}
.cart-empty-icon{font-size:60px;margin-bottom:12px;display:flex;justify-content:center;color:#ccc}

.contact-form{max-width:min(600px,100%);background:var(--white);padding:28px;border-radius:12px;box-shadow:var(--shadow)}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:600;margin-bottom:6px;font-size:13px}
.form-group input,.form-group textarea{width:100%;padding:12px;border:1.5px solid var(--border);border-radius:8px;font-size:16px;font-family:'Inter',sans-serif}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--black)}

.modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.modal.active{display:flex;align-items:center;justify-content:center;animation:fadeIn .2s;padding:12px}
.modal-content{background:var(--white);padding:var(--modal-pad);border-radius:16px;max-width:640px;width:min(640px,100%);max-height:92vh;overflow-y:auto;position:relative}
.close{position:absolute;right:14px;top:10px;cursor:pointer;color:var(--text-light);z-index:10;background:none;border:none;padding:6px}
.close:hover{color:var(--text)}

.gallery{margin:calc(var(--modal-pad)*-1) calc(var(--modal-pad)*-1) 16px}
.gal-main{width:100%;aspect-ratio:4/4.2;background:#eee;cursor:zoom-in;overflow:hidden;position:relative}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:3px 12px;border-radius:999px;white-space:nowrap}
.gal-thumbs{display:flex;gap:8px;padding:10px 12px;background:var(--white);overflow-x:auto}
.gal-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;opacity:.7;flex:none}
.gal-thumbs img.sel{border-color:var(--gold-dark);opacity:1}

.preview-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:2000;align-items:center;justify-content:center}
.preview-overlay.active{display:flex}
.preview-overlay img{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:6px}
.pv-btn{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:50%;width:min(46px,12vw);height:min(46px,12vw);font-size:min(20px,5vw);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pv-btn:hover{background:rgba(255,255,255,.25)}
.pv-prev{left:10px;top:50%;transform:translateY(-50%)}
.pv-next{right:10px;top:50%;transform:translateY(-50%)}
.pv-close{top:12px;right:12px}
.pv-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(255,255,255,.12);padding:4px 14px;border-radius:999px}

/* ===== THERMAL RECEIPT PRINTER ===== */
.receipt-printer-stage{width:100%;max-width:480px;margin:0 auto;padding:2rem 1rem 2.5rem;background:var(--ivory);border-radius:20px;display:flex;flex-direction:column;align-items:center;position:relative}
.receipt-machine-unit{width:360px;position:relative;display:flex;flex-direction:column;align-items:center;z-index:30}
.receipt-machine-hood-top{width:360px;height:42px;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#1a1a1d 0%,#0b0b0d 30%,#c9a227 70%,#b38728 100%);box-shadow:0 -2px 6px rgba(201,162,39,.4),0 10px 20px rgba(11,11,13,.4),inset 0 2px 2px rgba(255,255,255,.15),inset 0 -2px 4px rgba(0,0,0,.6);position:relative;overflow:hidden;z-index:25}
.receipt-hood-highlight{position:absolute;top:3px;left:5%;width:90%;height:5px;background:linear-gradient(90deg,transparent 0%,rgba(252,246,186,.8) 50%,transparent 100%);border-radius:999px;filter:blur(1px)}
.receipt-machine-slot-slit{width:320px;height:10px;margin-top:-5px;background:#000;border-radius:2px;box-shadow:inset 0 6px 12px rgba(0,0,0,.95),inset 0 -1px 2px rgba(201,162,39,.2);position:relative;z-index:5}
.receipt-cutter-blade-flash{position:absolute;top:38px;left:50%;transform:translateX(-50%);width:320px;height:3px;background:linear-gradient(90deg,transparent 0%,#fff 50%,transparent 100%);box-shadow:0 0 10px #c9a227;z-index:35;opacity:0;pointer-events:none}
.receipt-cutter-blade-flash.active{animation:receiptCutterFlash .35s ease-out forwards}
@keyframes receiptCutterFlash{0%{opacity:0;transform:translateX(-50%) scaleX(.1)}50%{opacity:1;transform:translateX(-50%) scaleX(1)}100%{opacity:0;transform:translateX(-50%) scaleX(1)}}
.receipt-machine-hood-bottom{width:360px;height:12px;margin-top:-3px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#0b0b0d 0%,#1a1a1d 40%,#c9a227 100%);box-shadow:0 8px 18px rgba(0,0,0,.1);position:relative;z-index:10}
.receipt-hood-shadow{width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 100%)}
.receipt-paper-viewport{position:absolute;top:37px;left:50%;transform:translateX(-50%);width:340px;clip-path:inset(0px -60px -1200px -60px);z-index:8;padding-bottom:20px;pointer-events:none;perspective:1200px;perspective-origin:50% 0%;filter:drop-shadow(0 18px 36px rgba(11,11,13,.2)) drop-shadow(0 4px 12px rgba(11,11,13,.1))}
.receipt-paper-wrapper{width:300px;margin:0 auto;background-color:#fafaf8;position:relative;transform-origin:top center;transform-style:preserve-3d;transition:transform 2.5s cubic-bezier(.16,1,.3,1);user-select:none;pointer-events:auto;clip-path:polygon(0% 0%,100% 0%,100% calc(100% - 10px),98.33% 100%,96.67% calc(100% - 10px),95% 100%,93.33% calc(100% - 10px),91.67% 100%,90% calc(100% - 10px),88.33% 100%,86.67% calc(100% - 10px),85% 100%,83.33% calc(100% - 10px),81.67% 100%,80% calc(100% - 10px),78.33% 100%,76.67% calc(100% - 10px),75% 100%,73.33% calc(100% - 10px),71.67% 100%,70% calc(100% - 10px),68.33% 100%,66.67% calc(100% - 10px),65% 100%,63.33% calc(100% - 10px),61.67% 100%,60% calc(100% - 10px),58.33% 100%,56.67% calc(100% - 10px),55% 100%,53.33% calc(100% - 10px),51.67% 100%,50% calc(100% - 10px),48.33% 100%,46.67% calc(100% - 10px),45% 100%,43.33% calc(100% - 10px),41.67% 100%,40% calc(100% - 10px),38.33% 100%,36.67% calc(100% - 10px),35% 100%,33.33% calc(100% - 10px),31.67% 100%,30% calc(100% - 10px),28.33% 100%,26.67% calc(100% - 10px),25% 100%,23.33% calc(100% - 10px),21.67% 100%,20% calc(100% - 10px),18.33% 100%,16.67% calc(100% - 10px),15% 100%,13.33% calc(100% - 10px),11.67% 100%,10% calc(100% - 10px),8.33% 100%,6.67% calc(100% - 10px),5% 100%,3.33% calc(100% - 10px),1.67% 100%,0% calc(100% - 10px))}
.receipt-paper-wrapper::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.025;pointer-events:none;z-index:1}
.receipt-paper-wrapper::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 35%,rgba(0,0,0,.02) 75%,rgba(0,0,0,.05) 100%);pointer-events:none;z-index:3}
.receipt-paper-wrapper.retracted{transform:translateY(-93%) rotateX(-16deg) translateZ(-25px)}
.receipt-paper-wrapper.printed{transform:translateY(0%) rotateX(0deg) translateZ(0px)}
.receipt-paper-wrapper.printing-smooth{animation:rcptPrintSmooth 2.5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rcptPrintSmooth{0%{transform:translateY(-93%) rotateX(-18deg) translateZ(-30px) scale(.97);opacity:.4}20%{transform:translateY(-70%) rotateX(-12deg) translateZ(20px) scale(.985);opacity:.85}45%{transform:translateY(-40%) rotateX(-6deg) translateZ(26px) scale(.995);opacity:1}75%{transform:translateY(-12%) rotateX(-2deg) translateZ(10px) scale(1)}90%{transform:translateY(1%) rotateX(.8deg) translateZ(2px) scale(1)}100%{transform:translateY(0%) rotateX(0deg) translateZ(0px) scale(1);opacity:1}}
.receipt-paper-wrapper.tearing{animation:rcptPaperTear .55s cubic-bezier(.2,.8,.2,1) forwards;pointer-events:none;transform-origin:top right}
@keyframes rcptPaperTear{0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:1}20%{transform:translateY(6px) translateX(18px) rotate(-3deg);opacity:1}50%{transform:translateY(14px) translateX(55px) rotate(-8deg) scale(.98);opacity:.8}100%{transform:translateY(22px) translateX(110px) rotate(-14deg) scale(.94);opacity:0}}
.receipt-content{padding:1.3rem 1.2rem 1.8rem;font-family:'Courier New',monospace;color:#222;position:relative;z-index:2}
.receipt-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.receipt-header-brand{display:flex;flex-direction:column;gap:.2rem;width:72%}
.receipt-brand-name{font-size:.95rem;font-weight:800;letter-spacing:.05em;color:#0b0b0d;font-family:'Courier New',monospace}
.receipt-payment-title{font-size:.68rem;font-weight:600;letter-spacing:.05em;color:#666;font-family:'Courier New',monospace}
.receipt-logo-badge{width:44px;height:44px;border-radius:8px;overflow:hidden;background:#fff;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;padding:4px}
.receipt-logo-badge img{width:100%;height:100%;object-fit:contain}
.receipt-amount-section{margin-bottom:1rem}
.receipt-amount{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:#0b0b0d;line-height:1.1;margin-bottom:.3rem;font-family:'Courier New',monospace}
.receipt-meta{font-size:.62rem;font-weight:500;color:#888;letter-spacing:.04em;text-transform:uppercase;font-family:'Courier New',monospace}
.receipt-divider{width:100%;height:0;border-bottom:1px dashed #ccc;margin:.8rem 0}
.receipt-items-list{display:flex;flex-direction:column;gap:.55rem}
.receipt-item-row{display:flex;justify-content:space-between;font-size:.78rem;font-weight:500;font-family:'Courier New',monospace}
.receipt-item-row span:first-child{color:#333;flex:1;padding-right:8px}
.receipt-item-row span:last-child{font-weight:600;color:#0b0b0d;white-space:nowrap}
.receipt-lipa-line{text-align:center;font-size:.72rem;font-weight:700;color:var(--gold-dark);letter-spacing:.06em;margin:.4rem 0;font-family:'Courier New',monospace}
.receipt-totals-section{display:flex;flex-direction:column;gap:.4rem}
.receipt-grand-total{display:flex;justify-content:space-between;padding-top:.5rem;border-top:1px solid #ccc;font-weight:700;font-size:.88rem;color:#0b0b0d;font-family:'Courier New',monospace}
.receipt-footer{text-align:center;margin-top:.85rem;padding-top:.5rem}
.receipt-footer-msg{font-size:.72rem;font-weight:700;letter-spacing:.15em;color:var(--gold-dark);margin-bottom:.6rem;font-family:'Courier New',monospace}
.receipt-barcode{display:flex;flex-direction:column;align-items:center;gap:.15rem;opacity:.8}
.receipt-barcode-lines{width:70%;height:26px;background:repeating-linear-gradient(90deg,#222 0px,#222 1.5px,transparent 1.5px,transparent 3px,#222 3px,#222 4px,transparent 4px,transparent 5.5px,#222 5.5px,#222 8px,transparent 8px,transparent 9.5px)}
.receipt-barcode-num{font-size:.52rem;font-weight:400;letter-spacing:.14em;color:#888;font-family:'Courier New',monospace}
.receipt-serrated-edge{width:100%;height:10px}

.receipt-stage-info{margin-top:4rem;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:40;transition:margin-top .6s cubic-bezier(.16,1,.3,1);width:100%;padding:0 1rem}
.receipt-printer-stage.has-printed .receipt-stage-info{margin-top:28rem}
.receipt-status-heading{font-size:1.5rem;font-weight:700;color:var(--black);margin-bottom:.3rem;font-family:'Inter',sans-serif}
.receipt-status-subtext{font-size:.9rem;color:var(--text-light);margin-bottom:1.4rem;font-family:'Inter',sans-serif}
.receipt-action-bar{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}

.rcpt-form{display:flex;flex-direction:column;gap:.6rem;max-width:320px;margin:0 auto 1rem;width:100%}
.rcpt-form input{padding:.8rem 1rem;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:'Inter',sans-serif;background:#fff}
.rcpt-form input:focus{outline:none;border-color:var(--gold)}
.rcpt-lipa-note{font-size:.8rem;color:var(--text-light);margin-bottom:1.2rem}
.rcpt-lipa-note b{color:var(--gold-dark)}
.rcpt-lipa-note a{color:var(--gold-dark);font-weight:600;text-decoration:none}

.receipt-print-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:10px;border:1px solid var(--gold);background:linear-gradient(180deg,var(--gold) 0%,var(--gold-dark) 100%);color:var(--black);font-weight:700;font-size:.9rem;cursor:pointer;transition:all .25s ease;font-family:'Inter',sans-serif;box-shadow:0 4px 12px rgba(201,162,39,.3)}
.receipt-print-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(201,162,39,.4)}
.receipt-print-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.receipt-download-btn,.receipt-save-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.2rem;border-radius:10px;border:1px solid var(--gold);background:linear-gradient(180deg,var(--gold) 0%,var(--gold-dark) 100%);color:var(--black);font-weight:700;font-size:.85rem;cursor:pointer;transition:all .22s ease;font-family:'Inter',sans-serif}
.receipt-download-btn:hover,.receipt-save-btn:hover{transform:translateY(-2px)}
.receipt-download-btn:disabled,.receipt-save-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.receipt-tear-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.2rem;border-radius:10px;border:1px dashed var(--gold-dark);background:rgba(201,162,39,.1);color:var(--gold-dark);font-weight:600;font-size:.85rem;cursor:pointer;transition:all .22s ease;font-family:'Inter',sans-serif}
.receipt-tear-btn:hover{background:var(--gold);color:var(--black);border-style:solid}
.receipt-close-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.2rem;border-radius:10px;border:1px solid var(--border);background:var(--white);color:var(--text);font-weight:600;font-size:.85rem;cursor:pointer;transition:all .22s ease;font-family:'Inter',sans-serif}
.receipt-close-btn:hover{background:var(--ivory);border-color:var(--black)}

@media(max-width:500px){
  .receipt-machine-unit{width:320px}
  .receipt-machine-hood-top,.receipt-machine-hood-bottom{width:320px}
  .receipt-machine-slot-slit,.receipt-cutter-blade-flash{width:280px}
  .receipt-paper-viewport{width:300px}
  .receipt-paper-wrapper{width:260px}
  .receipt-amount{font-size:1.4rem}
  .receipt-printer-stage.has-printed .receipt-stage-info{margin-top:24rem}
}

/* ===== ADMIN (unchanged from your file) ===== */
.admin-layout{display:flex;min-height:100vh;background:var(--ivory)}
.admin-sidebar{width:260px;background:var(--black);color:var(--white);padding:24px 20px;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:90;border-right:1px solid rgba(255,255,255,.06)}
@media(max-width:1024px){.admin-sidebar{display:none}}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:20px}
.brand-logo-small{width:40px;height:40px;background:var(--gold);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--black);flex:none}
.brand-name{font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.brand-sub{font-size:14px;color:#999;font-weight:500}
.sidebar-nav{display:flex;flex-direction:column;gap:4px}
.snav-btn{background:none;border:none;color:#999;padding:12px 16px;font-size:14px;font-weight:500;font-family:'Inter',sans-serif;cursor:pointer;border-radius:8px;transition:.2s;display:flex;align-items:center;gap:10px;text-align:left}
.snav-btn:hover{color:var(--white);background:rgba(255,255,255,.06)}
.snav-btn.active{color:var(--gold);background:rgba(212,175,55,.08);font-weight:600}
.admin-main{flex:1;margin-left:260px;display:flex;flex-direction:column}
@media(max-width:1024px){.admin-main{margin-left:0}}
.admin-mobile-header{background:var(--black);padding:16px 20px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:80}
.mobile-brand{display:flex;align-items:center;gap:10px;color:var(--white);font-size:18px;font-weight:700}
.mobile-brand svg{color:var(--gold)}
@media(min-width:1025px){.admin-mobile-header{display:none}}
.admin-mobile-tabs{display:flex;overflow-x:auto;background:var(--white);border-bottom:1px solid var(--border);padding:0 16px;scrollbar-width:none;position:sticky;top:62px;z-index:79}
.admin-mobile-tabs::-webkit-scrollbar{display:none}
.mtab{flex:none;background:none;border:none;padding:14px 18px;font-size:13px;font-weight:600;font-family:'Inter',sans-serif;color:var(--text-light);cursor:pointer;transition:.2s;border-bottom:2px solid transparent;white-space:nowrap}
.mtab:hover{color:var(--black)}
.mtab.active{color:var(--gold);border-bottom-color:var(--gold)}
@media(min-width:1025px){.admin-mobile-tabs{display:none}}
.admin-login-box{max-width:400px;margin:80px auto;background:var(--white);padding:32px;border-radius:16px;box-shadow:var(--shadow)}
.login-header{text-align:center;margin-bottom:24px}
.login-header h2{font-size:24px;font-weight:700;color:var(--black);margin-top:12px}
.admin-content{padding:16px;max-width:1100px;margin:0 auto;width:100%}
@media(min-width:768px){.admin-content{padding:24px}}
.admin-section{display:none;animation:fadeIn .3s}
.admin-section.active{display:block}
.admin-section h2{font-size:28px;font-weight:700;margin-bottom:24px;letter-spacing:-.5px;color:var(--black)}
.dashboard-greeting{margin-bottom:28px}
.dashboard-greeting h1{font-size:30px;font-weight:700;letter-spacing:-.5px;color:var(--black);margin-bottom:4px}
.dashboard-greeting p{color:var(--text-light);font-size:15px}
.stats-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:32px}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.stat-card{background:var(--white);padding:20px;border-radius:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:16px;transition:.2s}
.stat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.stat-icon{width:48px;height:48px;background:rgba(212,175,55,.1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--gold);flex:none}
.stat-label{font-size:13px;color:var(--text-light);margin-bottom:4px;font-weight:500}
.stat-value{font-size:24px;font-weight:700;color:var(--black);letter-spacing:-.5px}
.products-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px}
.products-section-head h2{margin:0;font-size:22px;font-weight:700}
.btn-add-product{background:var(--black);color:var(--white);border:none;padding:0 20px;height:44px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.2s;font-family:'Inter',sans-serif;flex:none}
.btn-add-product:hover{background:var(--gold-dark)}
.btn-add-product span{display:none}
@media(min-width:640px){.btn-add-product span{display:inline}}
.add-product-form{background:var(--white);border-radius:12px;box-shadow:var(--shadow);margin-bottom:24px;overflow:hidden}
.form-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)}
.form-head h3{font-size:18px;font-weight:700;color:var(--black);margin:0}
.close-form-btn{background:none;border:none;color:var(--text-light);cursor:pointer;padding:4px}
.close-form-btn:hover{color:var(--black)}
.form-body-mobile{display:flex;flex-direction:column;gap:20px;padding:24px}
.form-body-mobile .form-group{margin-bottom:0}
.form-body-mobile label{display:block;font-size:14px;font-weight:600;color:var(--black);margin-bottom:8px}
.form-body-mobile input,.form-body-mobile select,.form-body-mobile textarea{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:'Inter',sans-serif;transition:border-color .2s;height:50px}
.form-body-mobile textarea{height:auto;resize:vertical;min-height:100px}
.form-body-mobile input:focus,.form-body-mobile select:focus,.form-body-mobile textarea:focus{outline:none;border-color:var(--gold)}
.btn-save{width:100%;height:50px;font-size:16px}
.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:12px}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--gold);background:rgba(212,175,55,.04)}
.upload-zone svg{color:#999}
.upload-text strong{display:block;font-size:15px;color:var(--black);margin-bottom:4px}
.upload-text span{font-size:13px;color:var(--text-light)}
.uploaded-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.uploaded-thumb{width:80px;height:80px;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;border:2px solid transparent;transition:.2s}
.uploaded-thumb.main{border-color:var(--gold)}
.uploaded-thumb img{width:100%;height:100%;object-fit:cover}
.thumb-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;background:rgba(0,0,0,.7);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumb-remove:hover{background:var(--danger)}
.main-badge{position:absolute;bottom:4px;left:4px;background:var(--gold);color:var(--black);font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px}
.products-table-wrap{background:var(--white);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;overflow-x:auto}
.products-table{width:100%;border-collapse:collapse;min-width:600px}
.products-table thead{background:var(--ivory);border-bottom:1px solid var(--border)}
.products-table th{padding:14px 16px;text-align:left;font-size:12px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.products-table td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px;color:var(--black);vertical-align:middle;word-break:break-word;overflow-wrap:break-word}
.products-table tr:last-child td{border-bottom:none}
.prod-cell{display:flex;align-items:center;gap:10px;min-width:0}
.prod-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none}
.prod-thumb-placeholder{width:44px;height:44px;border-radius:8px;background:var(--ivory);flex:none}
.prod-name{font-weight:600;min-width:0;word-break:break-word;overflow-wrap:break-word;line-height:1.3}
.btn-icon{width:36px;height:36px;border:none;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.btn-danger{background:rgba(221,51,51,.08);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
@media(max-width:768px){
  .products-table{min-width:0}
  .products-table th:nth-child(2),.products-table td:nth-child(2){display:none}
  .products-table th,.products-table td{padding:10px 8px;font-size:13px}
  .prod-thumb{width:38px;height:38px}
  #s-products .products-table{table-layout:fixed;width:100%}
  #s-products .products-table th:nth-child(1),#s-products .products-table td:nth-child(1){width:42%;padding-right:6px}
  #s-products .products-table th:nth-child(3),#s-products .products-table td:nth-child(3){width:28%;white-space:nowrap}
  #s-products .products-table th:nth-child(4),#s-products .products-table td:nth-child(4){width:14%;white-space:nowrap;text-align:center}
  #s-products .products-table th:nth-child(5),#s-products .products-table td:nth-child(5){width:16%;text-align:right}
}
@media(max-width:420px){
  #s-products .products-table th:nth-child(4),#s-products .products-table td:nth-child(4){display:none}
  #s-products .products-table th:nth-child(1),#s-products .products-table td:nth-child(1){width:56%}
  #s-products .products-table th:nth-child(3),#s-products .products-table td:nth-child(3){width:30%}
  #s-products .products-table th:nth-child(5),#s-products .products-table td:nth-child(5){width:14%}
}
.orders-list{display:flex;flex-direction:column;gap:12px}
.order-card{background:var(--white);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
.order-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:12px;flex-wrap:wrap}
.order-total{font-size:20px;font-weight:700;color:var(--black);letter-spacing:-.5px}
.order-date{font-size:13px;color:var(--text-light);margin-top:2px}
.order-status{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;flex:none}
.order-status.pending{background:rgba(245,158,11,.1);color:#f59e0b}
.order-status.paid{background:rgba(29,155,108,.1);color:var(--success)}
.order-status.delivered{background:rgba(107,107,107,.1);color:var(--text-light)}
.order-status-select{width:100%;padding:10px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background:var(--white)}
.messages-list{display:flex;flex-direction:column;gap:12px}
.message-card{background:var(--white);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
.message-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;flex-wrap:wrap}
.message-from{font-weight:600;color:var(--black);font-size:14px;word-break:break-word}
.message-time{font-size:12px;color:var(--text-light);flex:none}
.message-body{color:var(--text);font-size:14px;line-height:1.5;word-break:break-word}
.panel-card{background:var(--white);border-radius:12px;padding:24px;box-shadow:var(--shadow);max-width:600px}
.panel-card .form-group{margin-bottom:20px}
.panel-card label{display:block;font-size:14px;font-weight:600;color:var(--black);margin-bottom:8px}
.panel-card input{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:'Inter',sans-serif;height:50px}
.panel-card input:focus{outline:none;border-color:var(--gold)}
.branding-upload{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.branding-preview{width:80px;height:80px;border:1.5px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ivory);flex:none}
.branding-preview img{width:100%;height:100%;object-fit:contain}
#addCategoryModal .modal-content,#editMessageModal .modal-content{animation:modalSlideUp .3s ease}
@keyframes modalSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
#addCategoryModal input,#editMessageModal input,#editMessageModal textarea{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:'Inter',sans-serif}
#editMessageModal textarea{height:auto;min-height:100px;resize:vertical}
#addCategoryModal input:focus,#editMessageModal input:focus,#editMessageModal textarea:focus{outline:none;border-color:var(--gold)}

@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton,.skeleton-image,.skeleton-line,.skeleton-btn,.skeleton-cat{background:linear-gradient(90deg,#e6e2d8 25%,#f6f4ef 50%,#e6e2d8 75%);background-size:800px 100%;animation:shimmer 1.5s infinite linear;border-radius:6px}
.skeleton-cat{width:100px;height:42px;border-radius:21px;flex:none}
.skeleton-card{background:var(--white);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.skeleton-image{width:100%;aspect-ratio:4/4.2;border-radius:0}
.skeleton-info{padding:14px;display:flex;flex-direction:column;gap:8px}
.skeleton-line{height:14px;border-radius:4px}
.skeleton-line.short{width:40%}
.skeleton-line.medium{width:80%;height:18px}
.skeleton-line.long{width:100%}
.skeleton-btn{height:48px;margin-top:8px;border-radius:12px}

/* ===== REPORTS & ANALYTICS ===== */
.report-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.report-filters label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.report-filters select {
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background: #fff;
  cursor: pointer;
  min-width: 160px;
}
.report-filters select:focus { outline: none; border-color: var(--gold); }
.report-filter-info {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
}

.report-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 640px) {
  .report-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .report-summary { grid-template-columns: repeat(4, 1fr); }
}
.report-card {
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--gold);
  transition: transform .2s, box-shadow .2s;
}
.report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.report-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.report-card-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.report-card-sub {
  font-size: 12px;
  color: var(--text-light);
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .report-grid { grid-template-columns: 1.2fr 1fr; }
}

.report-panel {
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.report-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.report-panel-head h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.3px;
  margin: 0;
}
.report-panel-sub {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rpt-empty {
  text-align: center;
  color: var(--text-light);
  padding: 30px 10px;
  font-size: 14px;
}

/* Top products bars */
.top-products { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: flex; flex-direction: column; gap: 6px; }
.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.bar-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-dark);
  min-width: 24px;
}
.bar-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--border);
}
.bar-thumb-ph {
  background: var(--ivory);
}
.bar-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-stats {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex: none;
}
.bar-qty {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}
.bar-revenue {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-dark);
  white-space: nowrap;
}
.bar-track {
  height: 8px;
  background: var(--ivory);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-radius: 4px;
  transition: width .6s ease;
}

/* Category breakdown */
.cat-breakdown { display: flex; flex-direction: column; gap: 14px; }
.cat-row { display: flex; flex-direction: column; gap: 4px; }
.cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.cat-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-meta {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
  flex: none;
}
.cat-bar-track {
  height: 6px;
  background: var(--ivory);
  border-radius: 3px;
  overflow: hidden;
}
.cat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}
.cat-revenue {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  text-align: right;
}

@media (max-width: 560px) {
  .report-panel { padding: 18px; }
  .report-card-value { font-size: 20px; }
  .bar-revenue { font-size: 13px; }
}

/* ===== ON-SCREEN RECEIPT WATERMARK ===== */
.rcpt-watermark{position:absolute;top:50%;left:50%;width:190px;height:190px;object-fit:contain;transform:translate(-50%,-50%) rotate(-24deg);opacity:.08;pointer-events:none;z-index:-1}
.rcpt-watermark-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);font-family:Arial,sans-serif;font-size:30px;font-weight:900;letter-spacing:4px;color:#0b0b0d;opacity:.07;white-space:nowrap;pointer-events:none;z-index:-1}

/* ===== RECENT ORDERS → COMPACT SCROLLABLE GRID (Reports only) ===== */
#rptRecentOrders{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  max-height:440px;
  overflow-y:auto;
  padding-right:4px;
}
#rptRecentOrders::-webkit-scrollbar{width:6px}
#rptRecentOrders::-webkit-scrollbar-track{background:var(--ivory);border-radius:3px}
#rptRecentOrders::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
#rptRecentOrders::-webkit-scrollbar-thumb:hover{background:var(--gold-dark)}

#rptRecentOrders .order-card{
  padding:16px;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
#rptRecentOrders .order-head{
  margin-bottom:0;
  align-items:flex-start;
  gap:8px;
}
#rptRecentOrders .order-total{font-size:17px}
#rptRecentOrders .order-date{font-size:11px}
#rptRecentOrders .order-status{flex:none}

/* ===== ORDERS TAB → GRID LAYOUT (all orders, no limit) ===== */
#orderList{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
#orderList .order-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  margin:0;
}
#orderList .order-head{margin-bottom:0}
#orderList .order-total{font-size:18px}
#orderList .order-date{font-size:12px}
#orderList .order-status-select{width:100%;margin-top:auto}

/* ===== PELOTON-STYLE PREMIUM PRODUCT GRID ===== */
.peloton-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .peloton-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .peloton-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #f0f0f0;
  cursor: pointer;
}

.p-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.p-card-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.p-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  transition: transform 0.4s ease;
}

.p-card:hover .p-card-img-wrap img {
  transform: scale(1.05);
}

.p-card-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.p-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.p-card-cat {
  font-size: 11px;
  font-weight: 600;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.p-card-title {
  font-size: 22px;
  font-weight: 700;
  color: #0b0b0d;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.3px;
}

.p-card-desc {
  font-size: 14px;
  color: #6b6b6b;
  line-height: 1.5;
  margin: 4px 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-card-price-row {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.p-card-price {
  font-size: 18px;
  font-weight: 700;
  color: #0b0b0d;
  margin-bottom: 4px;
}

.p-card-finance {
  font-size: 13px;
  color: #6b6b6b;
  margin-bottom: 16px;
}

.p-card-finance strong {
  color: #0b0b0d;
  font-weight: 600;
}

.p-card-btn {
  width: 100%;
  padding: 14px 24px;
  background: #0b0b0d;
  color: #ffffff;
  border: none;
  border-radius: 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(226, 40, 54, 0.25);
}

.p-card-btn:hover {
  background: #17171a;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(226, 40, 54, 0.35);
}

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

/* Hide old products-grid styles when using peloton-grid */
.products-grid {
  display: none;
}

.products-grid.active {
  display: grid;
}

/* Override button color to brand black */
.p-card-btn {
  background: #0b0b0d !important;
  box-shadow: 0 4px 12px rgba(11, 11, 13, 0.25);
}
.p-card-btn:hover {
  background: #17171a !important;
  box-shadow: 0 6px 16px rgba(11, 11, 13, 0.35);
}

/* ===== SALES MANAGEMENT (Reset / Restore / Bin) ===== */
.sales-actions-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.sales-actions-info {
  flex: 1;
  min-width: 220px;
}
.sales-actions-info h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--black);
}
.sales-actions-info p {
  font-size: 13px;
  color: var(--text-light);
  margin: 0;
  line-height: 1.4;
}
.sales-actions-bar .btn {
  height: 44px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold) !important;
  color: var(--black) !important;
  border-color: var(--gold) !important;
}
.btn-gold:hover {
  background: var(--gold-dark) !important;
  border-color: var(--gold-dark) !important;
}
.btn-gold:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sales Bin Section */
.sales-bin-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.sales-bin-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sales-bin-header h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sales-bin-header .bin-sub {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}
.bin-empty {
  text-align: center;
  color: var(--text-light);
  padding: 40px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.bin-order-card {
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  border-left: 3px solid var(--gold-dark);
  transition: opacity 0.2s;
}
.bin-order-card.expired {
  opacity: 0.55;
  border-left-color: var(--text-light);
}
.bin-order-card.expiring {
  border-left-color: var(--danger);
}
.bin-order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.bin-order-total {
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.5px;
}
.bin-order-date {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 2px;
}
.bin-order-timer {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bin-order-timer.ok { color: var(--gold-dark); }
.bin-order-timer.warn { color: var(--danger); }
.bin-order-timer.dead { color: var(--text-light); }
.bin-order-customer {
  font-size: 13px;
  color: var(--gold-dark);
  font-weight: 600;
  margin-top: 4px;
}
.bin-order-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: none;
}
.bin-order-status.in-bin {
  background: rgba(211, 51, 51, 0.1);
  color: var(--danger);
}
.bin-order-status.expired-status {
  background: rgba(107, 107, 107, 0.1);
  color: var(--text-light);
}
.bin-order-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.bin-order-actions .btn {
  flex: 1;
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bin-order-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bin-purge-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.bin-purge-bar .btn {
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .sales-actions-bar {
    padding: 16px;
  }
  .sales-actions-bar .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== PASSWORD TOGGLE ===== */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrapper input {
  width: 100%;
  padding-right: 48px;
}
.password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  transition: color 0.2s;
  z-index: 2;
}
.password-toggle:hover {
  color: var(--black);
}
.password-toggle svg {
  width: 18px;
  height: 18px;
}
.hidden {
  display: none !important;
}