/* ==========================================================================
   SCANNER FRONTEND V2 — ISOLATED PRESENTATION SYSTEM
   Architecture: Two-layer viewport-bounded layout
   Layer 1: Dynamic Wallpaper (#scanner-background)
   Layer 2: Grid Shell (#scanner-v2-shell: 7fr 26fr 1fr 38fr 1fr 23fr 4fr | 5% 90% 5%)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. VIEWPORT & CONTAINER HEIGHT BOUNDING
   -------------------------------------------------------------------------- */
.app-shell {
  height: var(--app-height, 100dvh);
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

#scanner-view {
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   1. LAYER 1 — DYNAMIC WALLPAPER BACKGROUND
   -------------------------------------------------------------------------- */
#scanner-background {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-color: #eaeaea;
  background-size: cover;
  background-position: center;
}

/* --------------------------------------------------------------------------
   2. LAYER 2 — FUNCTIONAL UI GRID SHELL (SOLE GEOMETRY OWNER)
   -------------------------------------------------------------------------- */
#scanner-v2-shell {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 5% 90% 5%;
  grid-template-rows: 7fr 26fr 1fr 38fr 1fr 23fr 4fr;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent; /* TRANSPARENT TO EXPOSE LAYER 1 WALLPAPER */
}

/* --------------------------------------------------------------------------
   3. TRACK 1 (7fr) — SECTION 1: MASCOT HOME CONTROL ZONE
   -------------------------------------------------------------------------- */
#scan-row-1 {
  grid-row: 1;
  grid-column: 1 / -1;
  position: relative;
  background: transparent; /* TRANSPARENT TO EXPOSE LAYER 1 WALLPAPER */
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
}

.scanner-v2-mascot-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  max-height: 100%;
  width: auto;
  aspect-ratio: 654 / 410;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  z-index: 30;
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.scanner-v2-mascot {
  width: 100%;
  height: 100%;
  background-image: var(--scanner-mascot-url, url('../assets/scanner-mascot.png'));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
  display: block;
}

/* --------------------------------------------------------------------------
   4. TRACK 2 (26fr) — SECTION 2: SCANNER CARD
   -------------------------------------------------------------------------- */
#scan-row-2 {
  grid-row: 2;
  grid-column: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.scanner-v2-card--scanner {
  width: 100%;
  height: 100%;
  background-color: #000000;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

.scanner-v2-view-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.scanner-v2-reader {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #090d09 !important;
}

.scanner-v2-reader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.scanner-v2-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, transparent 55%, rgba(0,0,0,0.55) 100%);
  z-index: 5;
}

.scanner-v2-frame {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  z-index: 6;
}

.scanner-v2-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #22c55e;
  border-style: solid;
}

.scanner-v2-corner--tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-top-left-radius: 6px; }
.scanner-v2-corner--tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-top-right-radius: 6px; }
.scanner-v2-corner--bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 6px; }
.scanner-v2-corner--br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 6px; }

.scanner-v2-laser {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 3.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(34, 197, 94, 0.35) 15%, #4ade80 40%, #ffffff 50%, #4ade80 60%, rgba(34, 197, 94, 0.35) 85%, transparent 100%);
  box-shadow: 0 0 4px #4ade80, 0 0 10px #22c55e, 0 0 18px rgba(34, 197, 94, 0.65);
  transform: translateY(-50%);
  animation: laserPulse 2s infinite ease-in-out;
}

@keyframes laserPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* Minimalist In-Frame Status Dialogue */
.scanner-guidance-capsule {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  border: none;
  transition: opacity 0.2s ease;
}

.scanner-guidance-capsule .guidance-text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

/* --------------------------------------------------------------------------
   5. TRACK 4 (38fr) — SECTION 3: PRODUCT DETAILS CARD (NO SCROLLING)
   -------------------------------------------------------------------------- */
#scan-row-3 {
  grid-row: 4;
  grid-column: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  position: relative;
}

#scan-feedback,
.scan-feedback-popup {
  display: none !important;
}

.scanner-v2-card--product {
  width: 100%;
  height: 100%;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
  padding: 0 !important;
}

.scanner-v2-details-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 !important;
  position: relative;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.scanner-v2-state {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

/* Non-single states self-contained clean surface */
#state-idle,
#state-loading,
#state-not-found,
#state-camera-denied,
#state-camera-unavailable,
#state-network-error,
#state-server-error {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.idle-capsule {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}

.idle-barcode-icon {
  margin-bottom: 2px;
  opacity: 0.6;
}

.idle-title {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}

.idle-subtitle {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: #64748b;
  margin: 0;
}

/* ==========================================================================
   SECTION 3 — V5.2 SINGLE PRIMARY SURFACE & BAND 2 OPTICAL CENTERING
   ========================================================================== */

/* Rule 2 & 7: Grid Exists Only Inside Result States (#state-single & #state-multiple) */
#state-single.v5-result-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  row-gap: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

#state-multiple.v5-multi-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 2fr;
  row-gap: 4px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

.v5-band-1,
.v5-band-2,
.v5-band-3 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   PREMIUM ELECTRONIC SHELF LABEL (ESL) ARCHITECTURE (V1 - RETAIL REFINEMENT)
   -------------------------------------------------------------------------- */
.esl-shelf-label-card {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url('../assets/esl-shelf-label.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: inset 0 0 12px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* Material Realism: Soft vertical light sheen across paper surface */
.esl-shelf-label-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 35%, rgba(15, 23, 42, 0.03) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Zone 1 — Product Name (Top Left, Max 2 lines, Left-Aligned, ExtraBold ALL-CAPS, +75% Size) */
.esl-name-zone {
  position: absolute;
  top: 5.5%;
  left: 6.5%;
  width: 63%;
  height: 33%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 2;
}

.esl-product-name {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.43rem, 4.38vw, 1.89rem); /* +75% larger typography */
  font-weight: 800; /* ExtraBold */
  color: #0f172a;
  text-transform: uppercase; /* Retail ALL-CAPS */
  text-align: left; /* Left-aligned */
  line-height: 1.10;
  letter-spacing: 0.008em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.esl-product-name.esl-name--medium {
  font-size: clamp(1.20rem, 3.6vw, 1.52rem);
}

.esl-product-name.esl-name--long {
  font-size: clamp(1.02rem, 3.0vw, 1.30rem);
}

/* Zone 3 — Price Area (Shifted 2% Upward to top: 47.5%, MRP Baseline Aligned with Rupee Symbol Baseline) */
.esl-price-zone {
  position: absolute;
  top: 47.5%; /* Shifted 2% upward from 49.5% */
  left: 6.5%;
  width: 86%;
  height: 35%;
  display: flex;
  align-items: baseline; /* MRP baseline aligned with Rupee symbol baseline */
  justify-content: flex-start;
  gap: 12px;
  box-sizing: border-box;
  z-index: 2;
}

/* Quieter MRP (Background Information Level, Medium 500 weight, Light/Darker Grey, Thin Red Strike, Digits Baseline Aligned) */
.esl-mrp-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
  align-self: baseline; /* MRP digits baseline aligned with Sale Price baseline */
  line-height: 1;
}

.esl-mrp-label {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.60rem;
  font-weight: 500; /* Medium */
  color: #94a3b8; /* Light Grey */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 2px;
}

.esl-mrp-value {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.90rem;
  font-weight: 500; /* Medium (No bold) */
  color: #64748b; /* Darker Grey */
  line-height: 1;
  text-decoration: line-through;
  text-decoration-color: #ef4444; /* Thin red strike ONLY through number */
  text-decoration-thickness: 1px;
  align-self: baseline;
}

/* Sale Price: Solid Dark Black Focal Point (-10% Reduced Overall Size, +50% Height Stretch, +25% Breadth Stretch) */
.esl-sale-block {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(3.08rem, 9.8vw, 4.10rem); /* Reduced overall size by further 10% */
  font-weight: 900; /* Black weight */
  line-height: 0.90;
  letter-spacing: -0.045em;
  display: flex;
  align-items: baseline;
  margin-left: 2px;
  color: #0f172a !important; /* Solid Dark Black */
  transform: scale(1.25, 1.5); /* Stretch breadth +25% (scaleX=1.25) & height +50% (scaleY=1.5) */
  transform-origin: left bottom;
  align-self: baseline; /* Aligned by bottom baseline matching MRP digits placement */
}

.esl-rupee {
  font-size: 0.48em;
  font-weight: 900;
  color: #0f172a !important; /* Dark Black Rupee symbol */
  -webkit-text-fill-color: #0f172a !important;
  margin-right: 4px; /* Natural space between symbol and sale price */
  align-self: baseline;
}

.esl-sale-num {
  font-weight: 900; /* Black weight */
  color: #0f172a !important; /* Solid Dark Black */
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  display: inline-flex;
  align-items: baseline;
}

.esl-sale-dec {
  font-size: 0.50em; /* 50% less size than sale price numeral */
  font-weight: 800;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 0.9;
  align-self: baseline;
  vertical-align: baseline;
}

/* Zone 4 — Lower Green Band Left (YOU SAVE ₹XX) */
.esl-footer-zone {
  position: absolute;
  top: 79%;
  left: 7.5%;
  width: 48%;
  height: 16%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  z-index: 2;
}

.esl-save-text {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(0.72rem, 2.1vw, 0.92rem);
  font-weight: 700; /* Bold */
  color: #166534;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.esl-save-num {
  font-weight: 900;
  color: #15803d;
  margin-left: 3px;
}

/* Zone 5 — Top Right Yellow Ribbon Badge (+50% Number Width Stretch, OFF Matches Number Width) */
.esl-badge-zone {
  position: absolute;
  top: 2.2%;
  right: 3.5%;
  width: 27.5%;
  height: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #0f172a;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 2;
}

/* Mode A: Normal Discount Product (60% OFF - Stretched Number & Matching OFF Width) */
.esl-badge-mode-a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 98%;
  height: 98%;
  line-height: 0.88;
  gap: 16px;
}

.esl-ba-pct {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.3rem, 4.2vw, 1.8rem);
  font-weight: 900; /* Black weight */
  color: #0f172a;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
}

.esl-ba-num {
  font-weight: 900;
  transform: scaleX(1.5) scaleY(2.2); /* Number width increased by +50% (scaleX=1.5) */
  transform-origin: center center;
  display: inline-block;
}

.esl-ba-sym {
  font-size: 0.65em; /* Percentage symbol keeps same size */
  font-weight: 800;
  margin-left: 4px;
  transform: scaleY(2.2);
  transform-origin: center center;
  display: inline-block;
}

.esl-ba-off {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.2rem, 3.8vw, 1.65rem); /* Reduced width matching the number above */
  font-weight: 900; /* Black weight */
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: scaleX(1.5) scaleY(2.2); /* Matches number stretch width */
  transform-origin: center center;
  display: inline-block;
  text-align: center;
}

/* Mode B: Wholesale Product (BUY 4 @ ₹820 - High Contrast Black Text on Yellow Ribbon) */
.esl-badge-mode-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92%;
  height: 90%;
  color: #0f172a;
}

.esl-wb-row1 {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}

.esl-wb-buy {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(0.6rem, 1.8vw, 0.72rem);
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
}

.esl-wb-qty {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 900;
  color: #0f172a;
}

.esl-wb-row2 {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  margin-top: 2px;
}

.esl-wb-at {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(0.6rem, 1.8vw, 0.72rem);
  font-weight: 800;
  color: #0f172a;
}

.esl-wb-price {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 900;
  color: #0f172a;
}

/* --- Multiple MRP Selection Screen (V2 3-Equal Band Layout) --- */
.v5-multi-hero-capsule {
  width: 96%;
  height: 92%;
  margin: auto;
  padding: 2px 12px;
  background: #fafafa;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.05), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.v5-multi-hero-title {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  color: #b91c1c;
  text-align: center;
  line-height: 1.22;
  letter-spacing: 0.03em;
}

.v5-multi-vertical-stack {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  row-gap: 4px;
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
}

/* Visually Identical to Hero Product Capsule (Surface, Shadow, Highlight, Border) */
.multi-mrp-btn {
  width: 96%;
  height: 92%;
  margin: auto;
  background: #fafafa;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 5vh, 1.85rem);
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff;
  cursor: pointer;
  transition: transform 130ms cubic-bezier(0.16, 1, 0.3, 1), background 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* 120-150ms Touch Press State (Compresses, Brightens, Stronger Green Shadow) */
.multi-mrp-btn:active {
  transform: scale(0.975) translateY(1px);
  background: #ffffff;
  border-color: #15803d;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.15), inset 0 1px 0 #ffffff;
}

.mrp-btn-value {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

.mrp-btn-whole {
  font-weight: 900;
}

.mrp-btn-decimal {
  font-size: 0.55em;
  font-weight: 600;
  opacity: 0.65;
  display: inline;
}

#multi-list .multi-item-card {
  width: 100%;
  box-sizing: border-box;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 8px;
  border: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Idle / Prompt State */
.idle-capsule {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.idle-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
}

.idle-subtitle {
  font-size: 0.75rem;
  color: #6b7280;
}

/* --------------------------------------------------------------------------
   6. TRACK 6 (23fr) — SECTION 4: PROMOTION CARD
   -------------------------------------------------------------------------- */
#scan-row-4 {
  grid-row: 6;
  grid-column: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.scanner-v2-card--promo {
  width: 100%;
  height: 100%;
  background: #0f172a;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.scanner-v2-carousel-box {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.scanner-v2-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease;
  width: 100%;
}

/* --- Section 4: Hot Deals 5-Node Infinite Horizontal Track V2.4 --- */
/* ==========================================================================
   SECTION 5 V4 — DETERMINISTIC 3-CARD CONVEYOR TRACK CAROUSEL
   Pure CSS Viewport Layout (33.333333% per card slot, 5-node memory strip)
   ========================================================================== */

.scanner-v2-carousel-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.scanner-v2-carousel-track {
  width: 166.666667%; /* 5 nodes x 33.333333% viewport width */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px; /* 6px minimal breathing space between visible cards */
  box-sizing: border-box;
  position: relative;
  transform: translateX(-20%); /* Baseline rest position: Node 0 offscreen left */
  will-change: transform;
}

.promo-card {
  flex: 0 0 calc(20% - 4.8px); /* 20% track width - 4.8px gap compensation = 33.33% viewport */
  height: 94%;
  padding: 7px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  position: relative;
  overflow: visible;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center center;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms ease, opacity 380ms ease;
  will-change: transform, opacity, box-shadow;
}

.promo-card:active {
  transform: scale(0.95) !important;
  transition: transform 120ms ease;
}

/* Card Visual Roles (Appearance Only - No Layout Mutation) */
.promo-card--hero {
  transform: scale(1.06);
  opacity: 1;
  z-index: 3;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
}

.promo-card--side {
  transform: scale(0.93);
  opacity: 0.88;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16);
}

.promo-card--hidden {
  transform: scale(0.85);
  opacity: 0;
  z-index: 0;
}

/* Category Color Language Themes (Subtle 3-6% Saturation Tints & matching badge accents) */
.promo-card.theme-green {
  background: #f0fdf4;
  border: 1px solid rgba(22, 163, 74, 0.22);
}
.promo-card.theme-green .promo-card-badge {
  background: #15803d;
  color: #ffffff;
}

.promo-card.theme-blue {
  background: #eff6ff;
  border: 1px solid rgba(37, 99, 235, 0.22);
}
.promo-card.theme-blue .promo-card-badge {
  background: #1d4ed8;
  color: #ffffff;
}

.promo-card.theme-yellow {
  background: #fefce8;
  border: 1px solid rgba(202, 138, 4, 0.28);
}
.promo-card.theme-yellow .promo-card-badge {
  background: #b45309;
  color: #ffffff;
}

.promo-card.theme-orange {
  background: #fff7ed;
  border: 1px solid rgba(234, 88, 12, 0.22);
}
.promo-card.theme-orange .promo-card-badge {
  background: #c2410c;
  color: #ffffff;
}

.promo-card.theme-purple {
  background: #faf5ff;
  border: 1px solid rgba(147, 51, 234, 0.22);
}
.promo-card.theme-purple .promo-card-badge {
  background: #7e22ce;
  color: #ffffff;
}

.promo-card.theme-red {
  background: #fef2f2;
  border: 1px solid rgba(220, 38, 38, 0.22);
}
.promo-card.theme-red .promo-card-badge {
  background: #b91c1c;
  color: #ffffff;
}

/* Dominant SAVE Badge (Right-Corner Alignment, 25% Larger Weight) */
.promo-card-badge {
  align-self: flex-end; /* Position on top RIGHT corner of the card */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 7px;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.promo-card-name {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.15;
  margin-top: 2px; /* Positioned higher by reducing top gap */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Increased capacity to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo-card-pack {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #64748b;
}

.promo-card-prices {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.promo-card-mrp {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
}

.promo-card-mrp-label {
  text-decoration: none; /* "MRP" remains normal text */
  color: #94a3b8;
}

.promo-card-mrp-val {
  text-decoration: line-through; /* ONLY numeric price is struck through */
  color: #94a3b8;
}

.promo-card-sale {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
}

/* --------------------------------------------------------------------------
   7. TRACK 7 (4fr) — SECTION 5: RECENTLY SCANNED CONTROL ZONE
   -------------------------------------------------------------------------- */
#scan-row-5 {
  grid-row: 7;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* TRANSPARENT FOOTER AREA */
  box-sizing: border-box;
  position: relative;
  z-index: 20;
}

.scanner-v2-history-handle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: none;
  border-radius: 20px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 16px;
  margin: 0;
  width: auto;
  height: auto;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  pointer-events: auto;
  overflow: hidden;
  transition: transform 0.15s ease, background 0.15s ease;
}

.scanner-v2-handle-chevron {
  color: #d1d5db;
  transition: transform 0.2s ease;
}

.scanner-v2-handle-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffffff;
  text-transform: uppercase;
}

.scanner-v2-history-handle:active {
  transform: scale(0.96);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
}

.scanner-v2-history-handle:active .scanner-v2-handle-chevron {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   8. RECENTLY SCANNED BOTTOM SHEET & OVERLAY SYSTEM
   -------------------------------------------------------------------------- */
.sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  animation: scanner-v2-fade-in 0.2s ease-out;
}

@keyframes scanner-v2-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bottom-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 480px;
  background-color: #ffffff;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px;
  z-index: 1001;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.sheet-grab-handle {
  width: 36px;
  height: 4px;
  background-color: #dee2e6;
  border-radius: 2px;
  align-self: center;
  margin-bottom: 14px;
}

.sheet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   9. ACCESSIBILITY LIVE ANNOUNCER UTILITY (.sr-only)
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   10. PWA UPDATE TOAST OVERLAY (ZERO REFLOW FLOATING NOTIFICATION)
   -------------------------------------------------------------------------- */
.pwa-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 32px);
  max-width: 440px;
  background: #111827;
  color: #ffffff;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pwa-toast .toast-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.pwa-toast span {
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #f9fafb;
}

.pwa-toast .toast-action-btn {
  background: #22c55e;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.pwa-toast .toast-action-btn:hover {
  background: #16a34a;
}