*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#EEF0EC;overscroll-behavior:none}
body{font-family:'Barlow',system-ui,sans-serif;color:#0F1720;user-select:none;-webkit-user-select:none;touch-action:manipulation}
input{user-select:text;-webkit-user-select:text}
button{font-family:inherit;cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed}
input:focus{outline:none;border-color:#0B6E78!important;box-shadow:0 0 0 4px rgba(11,110,120,.15)}
.cond{font-family:'Barlow Condensed',sans-serif}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
header{min-height:76px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#0F1720;color:#fff;gap:12px}
header .brand{display:flex;align-items:baseline;gap:14px;min-width:0}
header .brand b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:34px;letter-spacing:.04em;white-space:nowrap}
header .brand span{font-size:16px;color:#B8C2CC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats{display:flex;gap:10px;align-items:center}
.stat{display:flex;flex-direction:column;align-items:flex-end;padding:6px 16px;border-radius:10px;background:#1C2631}
.stat small{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#B8C2CC}
.stat b{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;line-height:1}
.net{display:flex;align-items:center;gap:8px;padding:0 14px;height:44px;border-radius:10px;background:#1C2631;font-size:14px;font-weight:600;color:#B8C2CC;border:none}
.net i{width:10px;height:10px;border-radius:50%;background:#2FB36B}
.net.off i{background:#F2A630}.net.off{color:#F2C230}
.gear{width:44px;height:44px;border:none;border-radius:10px;background:#1C2631;color:#B8C2CC;display:flex;align-items:center;justify-content:center}
main{flex:1;min-height:0;display:flex;gap:16px;padding:16px}
section.card,aside.card{background:#fff;border-radius:18px}
section.card{flex:1;min-width:0;padding:20px 22px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
aside.card{width:372px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}
.grp{display:flex;flex-direction:column;gap:8px}
.lbl{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#56606B}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.wrap{display:flex;flex-wrap:wrap;gap:10px}
.tile{border:2px solid #E1E4E8;background:#F6F7F5;color:#0F1720;border-radius:14px}
.tile.sel{border-color:#0F1720;background:#0F1720;color:#fff}
.tile:disabled{opacity:.35}
.tile.cat{height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.tile.cat b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;letter-spacing:.03em;text-transform:uppercase;line-height:1}
.tile.cat span{font-size:14px;font-weight:500;opacity:.75}
.tile.pub{height:64px;font-size:22px;font-weight:600}
.tile.mod{height:56px;padding:0 24px;font-size:20px;font-weight:600}
.tile.cor{height:60px;padding:0 20px 0 14px;font-size:19px;font-weight:600;display:flex;align-items:center;gap:10px}
.tile.cor.sel{background:#E3F1F2;color:#0F1720;border:3px solid #0B6E78}
.tile.tam{height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.tile.tam b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:28px;line-height:1}
.tile.tam span{font-size:13px;font-weight:500}
.dot{border-radius:50%;flex-shrink:0;box-sizing:border-box;border:2px solid rgba(0,0,0,.08)}
.dot.Branco{border:2px solid #B9BFC6}
.sizes-empty{height:72px;display:flex;align-items:center;justify-content:center;border:2px dashed #CDD2D8;border-radius:14px;color:#56606B;font-size:17px}
.addbar{margin:auto -22px -20px;position:sticky;bottom:-20px;background:#fff;border-top:1px solid #E2E5E9;display:flex;gap:14px;align-items:center;padding:12px 22px 20px;z-index:2}
.addbar .sel{flex:1;min-width:0;display:flex;flex-direction:column}
.addbar .sel small{font-size:13px;color:#56606B}
.addbar .sel span{font-size:19px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big{height:72px;padding:0 30px;border:none;border-radius:16px;background:#0F1720;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px}
.big:disabled{background:#C9CED4}
.big.teal{background:#0B6E78}.big.teal:disabled{background:#C9CED4}
.big.full{width:100%;height:78px}
.big.ghost{background:#fff;color:#0F1720;border:2px solid #DADDE2;height:64px;font-size:22px}
.big.danger{background:#B4322A}
.cart-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px}
.cart-h b,.side-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:28px;text-transform:uppercase}
.pill{font-size:15px;font-weight:600;background:#E3F1F2;color:#08525A;padding:6px 12px;border-radius:999px}
.cart-list{flex:1;min-height:0;overflow-y:auto;padding:0 14px;display:flex;flex-direction:column;gap:8px}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#56606B;text-align:center;padding:24px;font-size:17px}
.ci{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:#F4F5F2}
.ci .top{display:flex;gap:10px;align-items:flex-start}
.ci .t{flex:1;min-width:0;display:flex;flex-direction:column}
.ci .t b{font-size:18px;font-weight:700;line-height:1.2}
.ci .t span{font-size:14px;color:#56606B}
.ci .rm{width:40px;height:40px;border:none;border-radius:10px;background:transparent;color:#56606B;display:flex;align-items:center;justify-content:center}
.ci .bot{display:flex;align-items:center;justify-content:space-between}
.qty{display:flex;align-items:center;gap:4px;background:#fff;border-radius:12px;padding:4px}
.qty button{width:44px;height:44px;border:none;border-radius:10px;background:#EEF0EC;font-size:24px;font-weight:700}
.qty button:disabled{opacity:.4}
.qty span{min-width:36px;text-align:center;font-size:20px;font-weight:700}
.price{font-size:17px;font-weight:600;color:#56606B}
.foot{padding:14px 20px 20px;border-top:1px solid #E2E5E9;display:flex;flex-direction:column;gap:12px}
.row{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;color:#56606B}
.row b{color:#0F1720;font-weight:600}
.row.total{font-size:17px}
.row.total b{font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:700}
.hint{font-size:13px;color:#56606B;text-align:center}
.back{width:52px;height:52px;border:2px solid #DADDE2;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.title-row{display:flex;align-items:center;gap:14px}
.title-row b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:32px;text-transform:uppercase}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600;color:#3A434D}
.form label.s2{grid-column:span 2}
.form input{height:62px;padding:0 18px;border:2px solid #DADDE2;border-radius:14px;font-size:21px;font-family:inherit;color:#0F1720;background:#fff;width:100%}
.form input.bad{border-color:#B4322A}
.pay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pay button{height:120px;border-radius:18px;border:2px solid #E1E4E8;background:#F6F7F5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.pay button.sel{border:3px solid #0B6E78;background:#0B6E78;color:#fff}
.sum{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #ECEEF0}
.sum .t{flex:1;min-width:0;display:flex;flex-direction:column}
.sum .t b{font-size:16px;font-weight:700}.sum .t span{font-size:14px;color:#56606B}
.sum em{font-style:normal;font-size:15px;color:#56606B}
.okwrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
.ok{width:560px;max-width:100%;background:#fff;border-radius:24px;padding:40px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ok .chk{width:96px;height:96px;border-radius:50%;background:#E3F1F2;color:#0B6E78;display:flex;align-items:center;justify-content:center}
.ok h1{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:40px;text-transform:uppercase}
.ok p{margin:0;font-size:19px;color:#3A434D}.ok small{font-size:15px;color:#56606B}
.ok .btns{display:flex;gap:12px;width:100%;margin-top:8px}.ok .btns .big{flex:1;height:64px;font-size:22px}
.warn{background:#FFF4DC;color:#7A5200;border-radius:12px;padding:10px 14px;font-size:15px;font-weight:600}
/* admin */
.tbl{display:flex;flex-direction:column;gap:8px}
.vrow{display:grid;grid-template-columns:90px 1fr 110px 90px 150px 190px;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:#F4F5F2;font-size:16px}
.vrow.est{opacity:.45;text-decoration:line-through}
.vrow small{display:block;color:#56606B;font-size:13px}
.vrow button{height:44px;border-radius:10px;border:2px solid #DADDE2;background:#fff;font-size:15px;font-weight:600;padding:0 12px}
.vrow .acts{display:flex;gap:8px;justify-content:flex-end}
.tag{display:inline-block;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:#E1E4E8}
.tag.ok{background:#DDF3E6;color:#14683A;padding:3px 10px}.tag.er{background:#FBE0DD;color:#8E241C}.tag.pe{background:#FFF0C7;color:#7A5200}
/* modal */
.modal{position:fixed;inset:0;background:rgba(15,23,32,.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}
.modal .box{width:520px;max-width:100%;background:#fff;border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:16px}
.modal h2{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:32px;text-transform:uppercase}
.modal p{margin:0;font-size:18px;color:#3A434D}
.modal input{height:72px;border:2px solid #DADDE2;border-radius:14px;font-size:34px;text-align:center;letter-spacing:.3em;font-family:inherit;width:100%}
.modal .btns{display:flex;gap:12px}.modal .btns .big{flex:1;height:64px;font-size:22px}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:#0F1720;color:#fff;padding:14px 22px;border-radius:12px;font-size:17px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:30}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* comprovante */
.rc{width:420px;max-width:100%;margin:0 auto;background:#fff;border-radius:18px;padding:28px;font-size:16px;display:flex;flex-direction:column;gap:6px}
.rc h3{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:30px;text-transform:uppercase;text-align:center}
.rc .c{text-align:center;color:#56606B;font-size:14px}
.rc hr{border:none;border-top:1px dashed #B9BFC6;width:100%;margin:8px 0}
.rc .l{display:flex;justify-content:space-between;gap:12px}.rc .l b{white-space:nowrap}
@media print{body *{visibility:hidden}.rc,.rc *{visibility:visible}.rc{position:absolute;left:0;top:0;width:80mm;border-radius:0;padding:4mm}}
@media (max-width:900px){aside.card{width:300px}.vrow{grid-template-columns:70px 1fr 90px 90px}.vrow .acts,.vrow .om{grid-column:1/-1}}
/* preços / desconto / outlet */
.seg{display:inline-flex;align-self:flex-start;gap:4px;background:#EEF0EC;border-radius:14px;padding:4px}
.seg button{height:48px;padding:0 26px;border:none;border-radius:11px;background:transparent;font-size:19px;font-weight:700;color:#56606B}
.seg button.sel{background:#0F1720;color:#fff}
.off30{font-style:normal;background:#B8321F;color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:999px;align-self:center;white-space:nowrap}
.stat.fat{background:#0B6E78}.stat.fat small{color:#CFEBEE}
.tile.mod{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 22px}
.tile.mod small{font-size:13px;font-weight:600;opacity:.8}
.red{color:#A8321E}
.row.de{font-size:14px;margin-top:-6px}.row.de s{color:#56606B}.row.de .eco{color:#0B6E78;font-weight:600}
.row.total b.red{font-size:36px}
.pb{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;white-space:nowrap}
.pb small{font-size:14px;color:#56606B}.pb small s{color:#56606B}
.pb b{font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:700;color:#A8321E}.pb b.sp{font-size:22px;color:#7A5200}
.price s{color:#8A929C;font-weight:500;font-size:14px}
.setp{height:44px;padding:0 14px;border-radius:10px;border:2px dashed #C58A00;background:#FFF4DC;color:#7A5200;font-weight:700;font-size:15px}
.brand{flex-wrap:nowrap}
@media (max-width:1100px){header .brand span{display:none}.stat{padding:6px 10px}}
.row b.red,.row.total b.red{color:#A8321E}
.stat small{white-space:nowrap}
header .brand span{flex-shrink:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.off30{flex:none}
.net{padding:0 10px}

/* ===== celular / tela estreita: mesmo app, layout em coluna ===== */
.cartclose,.cartbtn,.gofin{display:none}
header .stats{order:2}header .gear{order:3}
@media (max-width:820px),(max-height:520px){
  #app{height:100dvh}
  header{display:flex;flex-wrap:wrap;min-height:0;height:auto;padding:8px 12px;gap:8px 10px;align-items:center}
  header .brand{flex:1 1 auto;order:1;gap:8px;min-width:0}
  header .brand b{font-size:24px}
  header .brand span{display:none}
  .off30{font-size:12px;padding:3px 9px}
  header .gear{order:2;width:40px;height:40px}
  header .stats{order:3;flex:1 1 100%;gap:6px;flex-wrap:wrap}
  .stat{padding:4px 9px;flex:1 1 auto;min-width:0}
  .stat small{font-size:9.5px;letter-spacing:.04em}
  .stat b{font-size:19px}
  .net{height:34px;padding:0 9px;font-size:12px;flex:0 0 auto}
  main{flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:8px;gap:8px;-webkit-overflow-scrolling:touch}
  section.card{flex:none;overflow:visible;padding:14px;gap:12px;border-radius:14px}
  aside.card{width:100%;flex:none;border-radius:14px;overflow:visible}
  .seg button{height:42px;padding:0 20px;font-size:17px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .g3{gap:8px}.wrap{gap:8px}.gs{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
  .tile.cat{height:74px}.tile.cat b{font-size:24px}.tile.cat span{font-size:12px}
  .tile.pub{height:52px;font-size:18px}
  .tile.mod{height:54px;padding:0 16px;font-size:17px}
  .tile.cor{height:52px;padding:0 14px 0 10px;font-size:17px}
  .tile.tam{height:62px}.tile.tam b{font-size:24px}
  .sizes-empty{height:56px;font-size:15px}
  .addbar{margin:auto -14px -14px;bottom:-14px;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;gap:8px 10px;position:sticky;box-shadow:0 -6px 14px rgba(15,23,32,.07)}
  .addbar .sel{flex:1 1 100%}.addbar .sel span{font-size:16px}
  .pb{margin-right:auto}.pb b{font-size:28px}
  .big{height:56px;padding:0 18px;font-size:22px;min-width:0!important}
  .cartbtn{display:flex;flex:0 0 auto;height:56px;padding:0 16px;font-size:20px}
  .addbtn{flex:1 1 auto}
  .gofin{display:flex;flex:1 1 100%;height:60px;font-size:17px;letter-spacing:.3px;white-space:nowrap;align-items:center;justify-content:center}
  .big.full{height:64px}
  /* carrinho vira tela cheia */
  aside.card.cart{display:none}
  aside.card.cart.open{display:flex;position:fixed;inset:0;z-index:15;border-radius:0;overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
  aside.card.cart.open .cart-list{flex:1;min-height:0;overflow-y:auto}
  .cartclose{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:10px;background:#EEF0EC}
  .cart-h{gap:10px}.cart-h .pill{margin-left:auto}
  .foot{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .row.total b,.row.total b.red{font-size:30px}
  /* checkout */
  .form{grid-template-columns:1fr}.form label.s2{grid-column:auto}
  .form input{height:56px;font-size:19px}
  .pay button{height:88px;font-size:26px}.pay button svg{width:32px;height:32px}
  aside.card.resumo .cart-list{overflow:visible;flex:none;padding-bottom:8px}
  .title-row b{font-size:26px}.back{width:46px;height:46px}
  /* demais telas */
  .okwrap{padding:8px}.ok{padding:28px 18px}.ok h1{font-size:32px}
  .vrow{grid-template-columns:70px 1fr auto;font-size:15px}.vrow .om,.vrow .acts{grid-column:1/-1}.vrow .acts{justify-content:flex-start;flex-wrap:wrap}
  .rc{padding:20px}
  .modal .box{padding:22px}
}

.ptr{position:fixed;top:-48px;left:50%;transform:translateX(-50%);z-index:999;background:#0F1720;color:#fff;font-weight:700;font-size:15px;letter-spacing:.3px;padding:10px 18px;border-radius:999px;box-shadow:0 6px 18px #0004;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap}
.ptr.on{opacity:1}.ptr.go{background:#0F7280}