/* =========================================================================
   Safdar & Sons Pharmacy + Mart — in-store signage board
   Layout, top to bottom: full-width banner slider, TODAY'S DEALS bar,
   one row of 6 product cards, category strip, footer.
   Target 1920x1080; one root font-size drives every dimension, so any 16:9
   TV (1280x720 / 2560x1440 / 3840x2160) renders identically, just scaled.
   ========================================================================= */

/* ------------------------------ Self-hosted fonts ----------------------- */
/* Poppins — all structural type.  Caveat — the handwritten accents. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/Poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/Poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/Poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/Poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/Poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/Poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/Poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/Poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/Poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/Poppins-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/Caveat-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/Caveat-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --------------------------------- Tokens -------------------------------- */
:root {
  --page-1:   #F3F7F4;   /* board background, top            */
  --page-2:   #E2ECE4;   /* board background, bottom         */
  --dark:     #013D24;   /* deep brand green — panels, slider */
  --dark-2:   #024E2A;
  --mid:      #0B6E33;
  --green:    #0E802F;   /* price plate / bright brand green */
  --green-lt: #19A63C;
  --lime:     #C6E85C;   /* lime accent type                 */
  --lime-2:   #B4D167;
  --red:      #E12E2B;   /* discount badge                   */
  --red-line: #E0393C;   /* strike-through rule              */
  --ink:      #101914;   /* near-black text on light ground  */
  --ink-2:    #33453B;
  --card:     #FFFFFF;
  --tile:     #E6F0E8;   /* inactive category tile           */

  --r-lg: 1.125rem;      /* 18px @1080p */
  --r-md: 0.75rem;
  --r-sm: 0.5rem;

  --ticker-duration: 40s;
}

/*  1rem == 16px at 1920x1080 and scales with any 16:9 resolution.
    On a non-16:9 panel the smaller term wins, so nothing ever overflows. */
html { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--page-2);
}

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  cursor: none;                       /* unattended: never show a pointer */
  -webkit-user-select: none; user-select: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
ul  { margin: 0; padding: 0; list-style: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg     { fill: currentColor; }

/* --------------------------------- Board --------------------------------- */
.board {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  padding: 0.75rem 1rem 0.875rem;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--page-1) 0%, var(--page-2) 100%);
}

/* ═════════════════════════════════ SLIDER ═════════════════════════════════ */
/* Takes over the height the header (9.25rem) and the hero (12.5rem) used to
   share, plus the 0.625rem flex gap between them — 22.375rem — so the deals
   bar, the product stage and everything below sit exactly where they did. */
.slider {
  flex: 0 0 auto;
  position: relative;
  height: 22.375rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(100deg,
    var(--dark) 0%, var(--dark-2) 45%, var(--mid) 100%);
  box-shadow: 0 0.125rem 0.5rem rgba(1,61,36,.07);
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 700ms linear;
  will-change: opacity;
}
.slide.is-on { opacity: 1; }

/* The banners are far wider than they are tall, but this slot is wider still,
   so a blurred copy of the same artwork fills the side gutters. It is stretched
   horizontally rather than zoomed, which keeps every band of the picture at its
   own height — the foliage, the shelf and the table run straight through the
   join, so the gutters read as more of the scene instead of as letterboxing.
   The blur hides the stretch. Bleeding 2rem past every edge keeps the blur's
   own soft edge outside the panel. */
.slide-bg {
  position: absolute;
  inset: -2rem;
  background-position: center;
  background-size: 100% 100%;
  filter: blur(2.5rem) brightness(.62) saturate(1.15);
}

/* height-driven, so the element box is the banner box and the drop shadow
   lands on the artwork's own edges rather than on the panel's */
.slide-img {
  position: relative;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 0 2.5rem rgba(0,0,0,.5);
}

/* soft vignette, so the sharp banner reads as the front layer */
.slider::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 4rem rgba(1,61,36,.45);
}

.slider-dots {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: 0.875rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.slider-dots[hidden] { display: none; }
.slider-dots i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  box-shadow: 0 0.0625rem 0.25rem rgba(1,61,36,.45);
  transition: width 400ms linear, background 400ms linear;
}
.slider-dots i.is-on {
  width: 2rem;
  border-radius: 0.3125rem;
  background: var(--lime);
}

/* ═════════════════════════════ TODAY'S DEALS BAR ═════════════════════════════ */
.deals {
  flex: 0 0 auto;
  height: 3.375rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0 1.5rem 0 1.25rem;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, #14913A 0%, #0E802F 32%, #056B2D 62%, #024E2A 85%, #013D24 100%);
}
.deals-flame { flex: 0 0 auto; width: 2rem; height: 2rem; }
.deals-title {
  font-weight: 800;
  font-size: 1.875rem;
  letter-spacing: 0.005em;
  color: #fff;
}
.deals-script {
  font-family: 'Caveat', 'Poppins', cursive;
  font-weight: 700;
  font-size: 1.5rem;
  color: rgba(255,255,255,.44);
  white-space: nowrap;
}
.deals-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 500;
  font-size: 1.125rem;
  color: #DCEDE1;
  white-space: nowrap;
}
.deals-meta b { font-weight: 700; color: #fff; }
.deals-meta .bar { font-style: normal; color: rgba(255,255,255,.4); }

/* ═══════════════════════════════ PRODUCT STAGE ═══════════════════════════════ */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 1.625rem;          /* reserved for the page counter */
}

.layer {
  position: absolute;
  inset: 0 0 1.625rem;
  opacity: 0;
  transition: opacity 400ms linear;  /* crossfade, like the slider above */
  will-change: opacity;
}
.layer.is-on { opacity: 1; }

.row {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.875rem;
  padding: 0.75rem 0.25rem 0;
}

/* ---------------------------------- Card ---------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.875rem 1rem 1rem;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: 0 0.1875rem 0.75rem rgba(1,61,36,.09);
}
.card.is-empty { background: rgba(255,255,255,.4); box-shadow: none; }

/* red circular badge, overlapping the top-left corner */
.badge {
  position: absolute;
  top: -0.625rem; left: -0.625rem;
  z-index: 3;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.92;
  box-shadow: 0 0.1875rem 0.5rem rgba(160,20,18,.34);
}
.badge-num { font-weight: 700; font-size: 1.5rem; }
.badge-off { font-weight: 700; font-size: 1.0625rem; }

.card-media {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0.5rem 0.25rem 0.75rem;
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: contain; }

/* coloured fallback when a photo is missing or fails to load */
.ph {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ph-color, #E6F1E7);
  border: 1px solid rgba(14,128,48,.16);
}
.ph::before {
  content: '';
  position: absolute;
  right: -1.25rem; bottom: -1.75rem;
  width: 7rem; height: 7rem;
  background: #0E802F;
  opacity: .11;
  clip-path: polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%);
}
.ph-text {
  position: relative;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.16;
  text-align: center;
  color: #0B5D2E;
  display: -webkit-box;
  -webkit-line-clamp: 5; line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-name {
  margin: 0;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.22;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.44em;
}
.card-name b { font-weight: 700; }

/* old price: dark text with a red rule struck through it */
.card-old {
  margin: 0.4375rem 0 0;
  align-self: flex-start;
  position: relative;
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: #2B3A31;
  min-height: 1.2em;
}
.card-old::after {
  content: '';
  position: absolute;
  left: -0.0625rem; right: -0.0625rem; top: 52%;
  height: 0.125rem;
  background: var(--red-line);
}
.card-old:empty::after { display: none; }

/* dark green price plate */
.card-price {
  margin-top: 0.4375rem;
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  padding: 0.4375rem 0.875rem 0.5rem;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #17913A 0%, var(--green) 45%, #0A6127 100%);
  box-shadow: inset 0 0.0625rem 0 rgba(255,255,255,.18);
}
.price-cur { font-weight: 700; font-size: 1.375rem; color: #fff; }
.price-new {
  font-weight: 700;
  font-size: 1.9375rem;
  line-height: 1.05;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ------------------------------- Page counter ------------------------------ */
.pager {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.pager .pg-now { color: var(--green); font-weight: 700; }
.pager i { font-style: normal; color: #9BB3A4; }

/* ═════════════════════════════ CATEGORY STRIP ═════════════════════════════ */
.cats {
  flex: 0 0 auto;
  height: 5.625rem;
  display: flex;
  align-items: stretch;
  gap: 0.375rem;
  border-radius: var(--r-md);
  overflow: hidden;
}

.cats-list {
  flex: 1 1 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.375rem;
  min-width: 0;
}
.cats-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0 0.375rem;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #EEF5EF 0%, var(--tile) 100%);
  color: var(--ink);
}
.cats-list li svg { width: 2.25rem; height: 2.25rem; color: var(--dark); }
.cats-list li span {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* the category the current page belongs to */
.cats-list li.is-active {
  background: linear-gradient(135deg, #22B048 0%, var(--green-lt) 40%, #0E8230 100%);
  color: #fff;
  box-shadow: 0 0.125rem 0.5rem rgba(14,130,48,.3);
}
.cats-list li.is-active svg  { color: var(--lime); }
.cats-list li.is-active span { font-weight: 700; }

.cats-panel {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 16.5rem;
  padding: 0 1.125rem 0 2.25rem;
  background: linear-gradient(160deg, #02492B 0%, var(--dark) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 1.75rem 100%);
}
.cp-copy { display: flex; flex-direction: column; line-height: 1.15; }
.cp-1, .cp-2 { white-space: nowrap; }
.cp-1 { font-weight: 500; font-size: 1.25rem; color: #E7F3E9; }
.cp-2 { font-weight: 700; font-size: 1.25rem; color: #fff; }
.cp-sun { flex: 0 0 auto; width: 2.125rem; height: 2.125rem; color: var(--lime); }

/* ═════════════════════════════════ FOOTER ═════════════════════════════════ */
.foot {
  flex: 0 0 auto;
  height: 3.5rem;
  display: flex;
  align-items: stretch;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(90deg, #EAF2EB 0%, #F1F7F2 50%, #E7F0E9 100%);
}

.foot-tag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 2.25rem 0 1.25rem;
  background: linear-gradient(90deg, var(--dark) 0%, #044E2C 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.75rem) 100%, 0 100%);
  color: #fff;
  font-weight: 500;
  font-size: 1.125rem;
  white-space: nowrap;
}
.ft-leaf { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; color: #8CC63E; }

/* seamless scrolling ticker */
.ticker {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}
.ticker-track {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  will-change: transform;
  animation: ticker var(--ticker-duration) linear infinite;
}
/* track = two identical halves, so a -50% shift loops with no gap */
@keyframes ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.ticker-unit { display: flex; flex: 0 0 auto; align-items: center; }
.t-item {
  flex: 0 0 auto;
  padding: 0 1.375rem;
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--dark);
}
.t-item.is-contact { color: var(--green); font-weight: 700; }
.t-sep { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; background: #8CC63E; border-radius: 50%; }

.foot-social {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.25rem 0 0.75rem;
}
.fs-i { width: 1.625rem; height: 1.625rem; color: var(--dark); }
.fs-text {
  margin-left: 0.375rem;
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--ink);
  white-space: nowrap;
}

/* ═════════════════════════════════ STATUS ═════════════════════════════════ */
.status {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(180deg, var(--page-1), var(--page-2));
  border-radius: var(--r-lg);
}
.status[hidden] { display: none; }
.status-title { margin: 0; font-weight: 800; font-size: 2.25rem; color: var(--dark); }
.status-note  { margin: 0; max-width: 60rem; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); }

/* ═════════════════════════════════ DEBUG ══════════════════════════════════ */
.debug {
  position: fixed;
  right: 0.5rem; bottom: 0.5rem;
  z-index: 50;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--green);
  border-radius: 0.375rem;
  background: rgba(1,61,36,.93);
  color: var(--lime);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: pre;
  pointer-events: none;
}
.debug[hidden] { display: none; }