*{box-sizing:border-box}
:root{
  --brand:#941D35;
  --brand-2:#B52A49;
  --brand-dark:#6D1025;
  --bg:#F7F4F5;
  --card:#FFFFFF;
  --text:#22171B;
  --muted:#77686E;
  --line:#E9DDE1;
  --green:#2DBE86;
  --red:#D95268;
  --shadow:0 22px 60px rgba(90,23,42,.16);
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

body{
  display:grid;
  grid-template-rows:82px 1fr 36px;
}

button,input{font:inherit}
button{border:0;cursor:pointer}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 28px;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.brand{display:flex;align-items:center;gap:14px}
.logo-box{
  width:76px;height:58px;padding:5px 8px;
  display:grid;place-items:center;
  background:#fff;border-radius:12px;
  box-shadow:0 8px 24px rgba(148,29,53,.14)
}
.logo-box img{width:100%;height:100%;object-fit:contain}
.brand-copy{display:flex;flex-direction:column}
.brand-copy strong{font-size:21px;color:var(--brand);line-height:1}
.brand-copy span{margin-top:5px;color:var(--muted);font-size:10px;letter-spacing:.18em;font-weight:700}

.top-actions{display:flex;align-items:center;gap:16px}
.status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(45,190,134,.10)}
.lang-btn{padding:10px 16px;border-radius:12px;border:1px solid #DCC4CB;background:#fff;color:var(--brand);font-weight:900}

.main{min-height:0;padding:24px}
.screen{height:100%;display:none;align-items:center;justify-content:center}
.screen.active{display:flex}

.scan-card,.result-card{
  width:min(1120px,100%);
  height:min(575px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  box-shadow:var(--shadow)
}

.scan-card{display:grid;grid-template-columns:.9fr 1.1fr}

.visual{
  background:linear-gradient(145deg,var(--brand),var(--brand-dark));
  display:grid;place-items:center;position:relative
}

.scan-frame{width:270px;height:205px;position:relative;display:grid;place-items:center}
.scan-frame>span{position:absolute;width:52px;height:52px;border-color:#fff;border-style:solid}
.scan-frame>span:nth-child(1){top:0;left:0;border-width:4px 0 0 4px;border-radius:18px 0 0 0}
.scan-frame>span:nth-child(2){top:0;right:0;border-width:4px 4px 0 0;border-radius:0 18px 0 0}
.scan-frame>span:nth-child(3){bottom:0;left:0;border-width:0 0 4px 4px;border-radius:0 0 0 18px}
.scan-frame>span:nth-child(4){bottom:0;right:0;border-width:0 4px 4px 0;border-radius:0 0 18px 0}

.barcode-icon{
  width:150px;height:80px;
  background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 7px,#fff 7px 11px,transparent 11px 15px);
  opacity:.93
}

.scan-line{
  position:absolute;width:84%;height:3px;background:#fff;
  box-shadow:0 0 18px #fff;
  animation:scan 2s ease-in-out infinite
}
@keyframes scan{
  0%,100%{transform:translateY(-70px);opacity:.45}
  50%{transform:translateY(70px);opacity:1}
}

.scan-copy{padding:58px 56px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:900;color:var(--brand)}
.scan-copy h1{margin:13px 0 14px;font-size:50px;line-height:1.03;letter-spacing:-.035em}
.scan-copy p{margin:0;color:var(--muted);font-size:17px;line-height:1.55;max-width:590px}

.ready-pill,.found-pill{
  width:max-content;display:flex;align-items:center;gap:9px;
  margin-top:22px;padding:9px 13px;border-radius:999px;
  background:rgba(45,190,134,.08);
  border:1px solid rgba(45,190,134,.18);
  color:#23855F;font-size:13px;font-weight:900
}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--green)}

.manual-row{margin-top:22px;display:grid;grid-template-columns:1fr auto;gap:10px}
.manual-row input{
  border:1px solid #DCC4CB;border-radius:14px;
  padding:15px 16px;outline:none;font-size:16px
}
.manual-row input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(148,29,53,.08)
}
.primary-btn{
  padding:14px 24px;border-radius:14px;
  background:linear-gradient(145deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:900;
  box-shadow:0 10px 26px rgba(148,29,53,.20)
}
.hint{margin-top:12px;color:#9B878E}

.message-card{
  width:min(500px,92vw);padding:44px;background:#fff;
  border:1px solid var(--line);border-radius:28px;
  box-shadow:var(--shadow);text-align:center
}
.loader{
  width:60px;height:60px;margin:0 auto 20px;border-radius:50%;
  border:5px solid #F0E6E9;border-top-color:var(--brand);
  animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.message-card h2{margin:0 0 8px;font-size:30px}
.message-card p{color:var(--muted)}

.result-card{display:grid;grid-template-columns:.9fr 1.1fr}
.product-media{padding:28px;background:#FBF9FA;display:grid;place-items:center}
.image-wrap{
  width:100%;height:100%;border:1px solid var(--line);border-radius:22px;
  background:#fff;display:grid;place-items:center;overflow:hidden
}
.image-wrap img{width:100%;height:100%;object-fit:contain;display:none}
.image-placeholder{
  color:#A28790;display:flex;flex-direction:column;align-items:center;
  gap:10px;font-weight:900
}
.placeholder-icon{font-size:58px}

.product-info{padding:38px 44px;display:flex;flex-direction:column;justify-content:center}
.found-pill{margin:0 0 14px}
.product-info h2{margin:0;font-size:44px;line-height:1.07;letter-spacing:-.03em}

.meta-grid{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.meta-item{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#FBF8F9}
.meta-item span{display:block;color:#8D777F;font-size:10px;letter-spacing:.12em;font-weight:800}
.meta-item strong{display:block;margin-top:5px;font-size:14px;word-break:break-all}

.price-card{
  margin-top:16px;padding:20px 24px;border-radius:21px;
  background:linear-gradient(145deg,var(--brand),var(--brand-2));
  color:#fff;box-shadow:0 16px 38px rgba(148,29,53,.23)
}
.price-label{font-size:11px;letter-spacing:.17em;font-weight:900;opacity:.9}
.price-line{display:flex;align-items:baseline;gap:12px;margin-top:2px}
.currency{font-size:24px;font-weight:900}
.price{font-size:74px;line-height:1;font-weight:950;letter-spacing:-.045em}

.stock-row{margin:14px 0;color:#287D5F;font-weight:900}
.secondary-btn{
  width:100%;padding:14px 20px;border-radius:14px;
  background:#2E2226;color:#fff;font-weight:900
}
.countdown{margin-top:8px;text-align:center;color:#927D84;font-size:12px}

.notfound-icon{
  width:70px;height:70px;margin:0 auto 18px;border-radius:20px;
  display:grid;place-items:center;background:rgba(148,29,53,.08);
  color:var(--brand);font-size:36px;font-weight:950
}
.barcode-chip{
  display:inline-block;max-width:100%;padding:10px 14px;border-radius:12px;
  background:#FBF8F9;border:1px solid var(--line);font-weight:900;
  word-break:break-all
}
.wide{width:100%;margin-top:18px}

.footer{
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:#8D777F;font-size:11px
}
.scanner-sink{
  position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0
}

[dir="rtl"] .scan-copy,[dir="rtl"] .product-info{text-align:right}
[dir="rtl"] .price-line{flex-direction:row-reverse;justify-content:flex-end}

/* ---------- Generic small screens ---------- */
@media(max-width:800px){
  body{grid-template-rows:72px 1fr 30px}
  .main{padding:12px}
  .scan-card,.result-card{grid-template-columns:1fr;overflow:auto}
  .visual{min-height:210px}
  .scan-frame{transform:scale(.75)}
  .scan-copy,.product-info{padding:26px}
  .scan-copy h1{font-size:35px}
  .product-info h2{font-size:31px}
  .product-media{min-height:230px}
  .meta-grid{grid-template-columns:1fr}
  .price{font-size:56px}
}

/* =========================================================
   ZEBRA CC6000 OPTIMIZATION
   1280x800 device, Chrome bars visible.
   ========================================================= */
@media (orientation: landscape) and (max-height: 720px) {
  body{grid-template-rows:60px 1fr 22px!important}
  .topbar{padding:4px 16px!important;min-height:60px!important}
  .brand{gap:10px!important}
  .logo-box{width:56px!important;height:42px!important;padding:3px 5px!important;border-radius:9px!important}
  .brand-copy strong{font-size:17px!important}
  .brand-copy span{font-size:8px!important;margin-top:2px!important;letter-spacing:.13em!important}
  .top-actions{gap:8px!important}
  .status{font-size:11px!important}
  .lang-btn{padding:7px 11px!important;border-radius:9px!important;font-size:12px!important}
  .main{padding:8px 14px!important}
  .footer{font-size:9px!important;gap:6px!important}

  .scan-card{
    width:min(1180px,100%)!important;
    height:100%!important;
    max-height:none!important;
    grid-template-columns:39% 61%!important;
    border-radius:20px!important
  }
  .visual{min-height:0!important}
  .scan-frame{width:220px!important;height:160px!important;transform:scale(.86)}
  .scan-copy{padding:18px 28px!important}
  .eyebrow{font-size:9px!important;letter-spacing:.14em!important}
  .scan-copy h1{margin:7px 0 8px!important;font-size:31px!important;line-height:1.02!important}
  .scan-copy p{font-size:13px!important;line-height:1.35!important}
  .ready-pill{margin-top:10px!important;padding:6px 9px!important;font-size:10px!important}
  .manual-row{margin-top:10px!important;gap:7px!important}
  .manual-row input{padding:9px 11px!important;font-size:13px!important;border-radius:10px!important}
  .primary-btn{padding:9px 16px!important;border-radius:10px!important;font-size:12px!important}
  .hint{margin-top:6px!important;font-size:9px!important}

  .result-card{
    width:min(1180px,100%)!important;
    height:100%!important;
    max-height:none!important;
    grid-template-columns:41% 59%!important;
    border-radius:20px!important
  }
  .product-media{padding:10px!important}
  .image-wrap{border-radius:14px!important}
  .product-info{
    padding:12px 20px!important;
    justify-content:center!important;
    min-height:0!important;
    overflow:hidden!important
  }
  .found-pill{margin:0 0 6px!important;padding:5px 8px!important;font-size:9px!important}
  .product-info h2{
    margin:0!important;
    font-size:25px!important;
    line-height:1.04!important;
    letter-spacing:-.02em!important;
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    max-height:80px!important
  }
  .meta-grid{margin-top:8px!important;gap:7px!important}
  .meta-item{padding:7px 9px!important;border-radius:9px!important}
  .meta-item span{font-size:8px!important}
  .meta-item strong{margin-top:3px!important;font-size:11px!important}
  .price-card{margin-top:8px!important;padding:9px 14px!important;border-radius:14px!important}
  .price-label{font-size:8px!important;letter-spacing:.13em!important}
  .price-line{gap:7px!important;margin-top:0!important}
  .currency{font-size:16px!important}
  .price{font-size:48px!important;line-height:.95!important}
  .stock-row{margin:6px 0!important;font-size:11px!important}
  .secondary-btn{padding:8px 12px!important;border-radius:10px!important;font-size:11px!important}
  .countdown{margin-top:3px!important;font-size:9px!important}

  .message-card{width:min(440px,80vw)!important;padding:26px!important;border-radius:20px!important}
  .message-card h2{font-size:23px!important}
  .loader{width:48px!important;height:48px!important}
}

@media (min-width:1100px) and (max-width:1400px) and (min-height:580px) and (max-height:720px) and (orientation:landscape) {
  .result-card{grid-template-columns:40% 60%!important}
  .product-info h2{font-size:24px!important;max-height:78px!important}
  .price{font-size:50px!important}
  .product-media{padding:9px!important}
}

@media (min-width:1100px) and (max-width:1400px) and (min-height:721px) and (max-height:850px) and (orientation:landscape) {
  body{grid-template-rows:70px 1fr 28px!important}
  .main{padding:14px 18px!important}
  .result-card{
    width:min(1200px,100%)!important;
    height:100%!important;
    grid-template-columns:42% 58%!important
  }
  .product-info{padding:20px 28px!important}
  .product-info h2{
    font-size:32px!important;
    line-height:1.06!important;
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important
  }
  .price{font-size:62px!important}
}

/* Android Chrome real viewport */
.main,.screen{max-height:var(--real-height,100vh)}