/* ===== Sanelco TV display — fixed, no-scroll layout ===== */

@font-face{font-family:'NotoSi';src:url('fonts/NotoSansSinhala-Regular.ttf') format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'NotoSi';src:url('fonts/NotoSansSinhala-Bold.ttf') format('truetype');font-weight:700;font-display:block}
@font-face{font-family:'NotoTa';src:url('fonts/NotoSansTamil-Regular.ttf') format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'NotoTa';src:url('fonts/NotoSansTamil-Bold.ttf') format('truetype');font-weight:700;font-display:block}

:root{
  --u: 10px;                     /* base unit, set by JS from pane height */
  --camW: 0px;
  --sliderH: 46%;
  --cols: 1;

  --bg:        #000000;
  --panel:     #0b0d0a;
  --panel2:    #12160f;
  --line:      rgba(255,255,255,.11);
  --ink:       #ffffff;
  --ink-dim:   #8e9a86;
  --accent:    #8CC63F;   /* Sanelco lime */
  --accent-2:  #35d4a4;
  --ta-ink:    #a7b89b;
  --shadow:    0 0 calc(var(--u)*2) rgba(0,0,0,.55);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg)}
body{
  font-family:'NotoSi','NotoTa',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
.si{font-family:'NotoSi','NotoTa',system-ui,sans-serif}
.ta{font-family:'NotoTa','NotoSi',system-ui,sans-serif}

#stage{position:fixed;inset:0;display:flex;flex-direction:row}
#stage.cam-right{flex-direction:row-reverse}
.pane{position:relative;height:100%;overflow:hidden}

/* ---------- camera pane ---------- */
.pane.cam{flex:0 0 var(--camW);background:#000;border-right:2px solid var(--line)}
.camInner{position:absolute;inset:0}
.camInner>*{width:100%;height:100%;display:block;border:0;object-fit:cover;background:#000}
.camInner.contain>*{object-fit:contain}
.camLabel{
  position:absolute;left:calc(var(--u)*1.4);top:calc(var(--u)*1.4);
  display:flex;align-items:center;gap:calc(var(--u)*.7);
  background:rgba(0,0,0,.62);border:1px solid var(--line);
  padding:calc(var(--u)*.55) calc(var(--u)*1.1);border-radius:calc(var(--u)*.7);
  font-size:calc(var(--u)*1.5);letter-spacing:.08em;color:#dbe6ff
}
.camLabel .dot{width:calc(var(--u)*.85);height:calc(var(--u)*.85);border-radius:50%;background:#ff4d4d;animation:blink 1.6s infinite}
@keyframes blink{0%,60%{opacity:1}80%,100%{opacity:.15}}
.camMissing{display:flex;align-items:center;justify-content:center;height:100%;color:#4b5a76;font-size:calc(var(--u)*2);text-align:center;padding:calc(var(--u)*2)}

/* ---------- content pane ---------- */
.pane.content{flex:1 1 auto;display:flex;flex-direction:column;background:var(--bg)}

/* topbar */
#topbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:calc(var(--u)*1.5);
  padding:calc(var(--u)*.7) calc(var(--u)*1.8);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-bottom:2px solid var(--accent)
}
.brand{display:flex;align-items:center;gap:calc(var(--u)*1.1);min-width:0}
#topbar.wordmark .brandText .shopName{display:none}
#topbar.wordmark .logoBox{
  width:auto;max-width:calc(var(--u)*26);background:none;box-shadow:none;border-radius:0
}
#topbar.wordmark .logoBox img{width:auto;height:100%;object-fit:contain}
.logoBox{
  flex:0 0 auto;width:calc(var(--u)*3.6);height:calc(var(--u)*3.6);
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#0a1400;border-radius:calc(var(--u)*.9);
  font-weight:800;font-size:calc(var(--u)*2.2);line-height:1;
  font-family:system-ui,Arial,sans-serif;
  box-shadow:0 0 calc(var(--u)*2) rgba(140,198,63,.30)
}
.logoBox img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.brandText{min-width:0}
.shopName{
  font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-weight:800;font-size:calc(var(--u)*2.5);line-height:1.05;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.shopTag{font-size:calc(var(--u)*1.12);color:var(--ink-dim);margin-top:calc(var(--u)*.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clockBox{flex:0 0 auto;text-align:right;font-family:system-ui,Arial,sans-serif;margin-left:auto}
.clock{font-size:calc(var(--u)*2.3);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.date{font-size:calc(var(--u)*1.2);color:var(--ink-dim);margin-top:calc(var(--u)*.3)}

/* promotions show / hide button */
.promoBtn{
  flex:0 0 auto;
  width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);
  margin-left:calc(var(--u)*.8);
  display:flex;align-items:center;justify-content:center;
  background:rgba(140,198,63,.10);
  border:1px solid rgba(140,198,63,.42);
  border-radius:calc(var(--u)*.6);
  color:var(--accent);cursor:pointer;padding:0;
  -webkit-appearance:none;appearance:none;
  transition:background .2s,transform .25s
}
.promoBtn:hover,.promoBtn:focus{background:rgba(140,198,63,.22);outline:none}
.promoBtn svg{width:68%;height:68%;display:block;transition:transform .25s}
.promoBtn.off svg{transform:rotate(180deg)}

/* promotions hidden: the price list takes the whole pane */
.content.no-promo .slider{display:none}

/* ---------- slider ---------- */
.slider{flex:0 0 var(--sliderH);position:relative;overflow:hidden;background:#000}
.slides{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity var(--fade,900ms) ease-in-out;
  will-change:opacity
}
.slide.on{opacity:1;z-index:2}
.slide .bg,.slide .fg{
  position:absolute;inset:0;
  background-position:center center;background-repeat:no-repeat
}
.slide .bg{
  background-size:cover;
  transform:scale(1.18);
  -webkit-filter:blur(calc(var(--u)*1.8)) brightness(.55) saturate(1.2);
  filter:blur(calc(var(--u)*1.8)) brightness(.55) saturate(1.2)
}
.slide .fg{background-size:contain}
.slider.fit-cover .slide .bg{display:none}
.slider.fit-cover .slide .fg{background-size:cover}
.slide.kb.on .fg{animation:kb var(--kbdur,12s) linear forwards}
@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.09)}}
.slider::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*5);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88));
  z-index:3;pointer-events:none
}
.dots{
  position:absolute;z-index:4;left:0;right:0;bottom:calc(var(--u)*1.1);
  display:flex;justify-content:center;gap:calc(var(--u)*.7)
}
.dots i{
  width:calc(var(--u)*1.5);height:calc(var(--u)*.45);border-radius:99px;
  background:rgba(255,255,255,.28);transition:background .3s,width .3s
}
.dots i.on{background:var(--accent);width:calc(var(--u)*3.2)}
.sliderEmpty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:calc(var(--u)*1);
  background:
    radial-gradient(ellipse at 50% 40%,rgba(140,198,63,.12),transparent 60%),
    linear-gradient(140deg,#0b0d0a,#161c11);
  text-align:center;padding:calc(var(--u)*2)
}
.seTitle{font-size:calc(var(--u)*3);font-weight:700;color:var(--ink)}
.seSub{font-size:calc(var(--u)*1.5);color:var(--ink-dim);font-family:system-ui,Arial,sans-serif}
.seSub code{background:rgba(255,255,255,.08);padding:0 .4em;border-radius:.3em;color:var(--accent)}

/* ---------- price section ---------- */
.priceSection{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;background:var(--bg)}

.listHead{
  flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:calc(var(--u)*1.2);
  padding:calc(var(--u)*.45) calc(var(--u)*1.8) calc(var(--u)*.4);
  background:linear-gradient(180deg,rgba(140,198,63,.16),rgba(140,198,63,0));
  border-bottom:1px solid var(--line)
}
.lhTitle{display:flex;align-items:baseline;gap:calc(var(--u)*.9);min-width:0;overflow:hidden}
.lhTitle .si{font-size:calc(var(--u)*2.05);font-weight:700;color:var(--accent);white-space:nowrap}
.lhTitle .ta{font-size:calc(var(--u)*1.8);font-weight:700;color:var(--ta-ink);white-space:nowrap}
.lhTitle .sep{color:rgba(255,255,255,.22);font-size:calc(var(--u)*1.8)}
.lhRight{flex:0 0 auto;display:flex;align-items:baseline;gap:calc(var(--u)*1);font-family:system-ui,Arial,sans-serif}
.cur{font-size:calc(var(--u)*1.5);color:var(--ink-dim);letter-spacing:.1em}
.pageInd{font-size:calc(var(--u)*1.4);color:var(--accent);font-variant-numeric:tabular-nums}

.listWrap{flex:1 1 auto;min-height:0;position:relative;overflow:hidden}
.list{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-auto-rows:var(--rowH,60px);
  column-gap:calc(var(--u)*1.6);
  padding:0 calc(var(--u)*1.8);
  align-content:start;
  transition:opacity .45s ease
}
.list.fading{opacity:0}

.row{
  display:flex;align-items:center;gap:calc(var(--u)*1.2);
  border-bottom:1px solid var(--line);
  padding:0 calc(var(--u)*.6);
  min-width:0;position:relative
}
.row:nth-child(even of .row){}
.row.alt{background:rgba(255,255,255,.028)}
.names{flex:1 1 auto;min-width:0}
.nSi{
  font-family:'NotoSi','NotoTa',system-ui,sans-serif;
  font-weight:700;font-size:calc(var(--u)*2.15*var(--rs,1));line-height:1.16;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.nTa{
  font-family:'NotoTa','NotoSi',system-ui,sans-serif;
  font-weight:400;font-size:calc(var(--u)*1.75*var(--rs,1));line-height:1.18;
  color:var(--ta-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.priceBox{flex:0 0 auto;text-align:right;font-family:system-ui,-apple-system,Arial,sans-serif}
.pVal{
  font-weight:800;font-size:calc(var(--u)*2.6*var(--rs,1));line-height:1.1;
  color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap
}
.pUnit{
  font-family:'NotoSi','NotoTa',system-ui,sans-serif;
  display:inline-block;
  font-size:calc(var(--u)*1.2*var(--rs,1));font-weight:700;
  color:#cfdac2;background:rgba(255,255,255,.085);
  border:1px solid rgba(255,255,255,.10);
  padding:0 calc(var(--u)*.45);border-radius:calc(var(--u)*.35);
  white-space:nowrap;margin-top:calc(var(--u)*.18)
}
.tag{
  position:absolute;left:calc(var(--u)*-.2);top:50%;transform:translateY(-50%);
  width:calc(var(--u)*.4);height:56%;border-radius:99px;background:var(--accent-2)
}
.tag.offer{background:#ff6b6b}
.tag.new{background:var(--accent-2)}
.row.hasTag .nSi{padding-left:calc(var(--u)*.7)}
.row.hasTag .nTa{padding-left:calc(var(--u)*.7)}
.badge{
  flex:0 0 auto;font-family:system-ui,Arial,sans-serif;font-weight:700;
  font-size:calc(var(--u)*1.1);letter-spacing:.09em;
  padding:calc(var(--u)*.22) calc(var(--u)*.7);border-radius:calc(var(--u)*.4);
  background:rgba(53,212,164,.16);color:var(--accent-2);border:1px solid rgba(53,212,164,.35)
}
.badge.offer{background:rgba(255,107,107,.16);color:#ff8f8f;border-color:rgba(255,107,107,.38)}


.listFoot{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:calc(var(--u)*1.2);
  padding:calc(var(--u)*.3) calc(var(--u)*1.8);
  border-top:1px solid var(--line);
  background:var(--panel);
  font-size:calc(var(--u)*1.15);color:var(--ink-dim);
  white-space:nowrap;overflow:hidden
}
.listFoot>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.listFoot>span:first-child{flex:0 0 auto}
.listFoot>span:last-child{flex:1 1 auto;text-align:right}

/* screen-burn protection: gentle 1px drift */
#stage.shift{transform:translate(var(--sx,0),var(--sy,0))}