/* ════════════════════════════════════════════════════════════════════════════
   TMS Digiscreen — adapted from the original Duda widget CSS.

   Changes from the original:
   - Removed .widget-750a3f class prefix throughout (we own the full page now)
   - Removed position:fixed escape gymnastics (no Duda wrapper to fight)
   - Removed admin overlay styles (admin lives in a separate route)
   - Removed wiki mode styles (deferred to v2)
   - Kept: --cs scaling, portrait mode, digital-screen-mode, container queries,
           info/advert screen layouts, all card layouts
   ════════════════════════════════════════════════════════════════════════════ */

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:root {
  --primary-color:  #1a2e6e;
  --accent-color:   #4a4a4a;
  --phone-color:    #1a2e6e;
  --text-light:     #ffffff;
  --card-bg:        #ffffff;
  --header-bg:      #1a2e6e;
  --footer-bg:      #1a2e6e;
  --pill-bg:        #f0f4fa;
  --pill-color:     #1a2e6e;
  --location-color: #666666;
  --cs:             20px;   /* overridden by JS — default assumes 4K */
  --card-img-h:     55%;
  --bar-radius:     calc(var(--cs) * 0.6);
  --logo-size:      3.6;
  --card-logo-size: 8;
  --grid-pad:       0px;
  --bar-h-pad:      0px;
  --bar-v-pad:      0px;
  --qr-cqi:         9;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #eef1f8;
  color: #1a2e3b;
}

/* ── INNER — flex column, fills viewport ── */
.screen-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════════════════ */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--header-bg);
  padding: calc(var(--cs) * 0.65 + var(--bar-v-pad, 0px)) calc(var(--cs) * 1.8 + var(--grid-pad, 0px) + var(--bar-h-pad, 0px));
  flex-shrink: 0;
  min-height: 0;
  border-radius: var(--header-radius, var(--bar-radius));
  box-shadow: 0 calc(var(--cs) * 0.15) calc(var(--cs) * 0.5) rgba(0,0,0,0.18);
  position: relative;
  z-index: 2;
}

.agent-logo-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}

.agent-logo {
  max-height: calc(var(--cs) * var(--logo-size, 3.6));
  max-width:  calc(var(--cs) * var(--logo-size, 3.6) * 4);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.agent-name-fallback {
  color: var(--text-light);
  font-size: calc(var(--cs) * 1.6);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.header-center {
  flex: 1;
  text-align: center;
  overflow: hidden;
  padding: 0 calc(var(--cs) * 1.2);
}

.header-tagline {
  color: var(--text-light);
  font-size: calc(var(--cs) * 1.5);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.header-right {
  min-width: 0;
  flex-shrink: 0;
  text-align: right;
  overflow: hidden;
}

.header-phone {
  color: var(--phone-color);
  font-size: calc(var(--cs) * 1.4);
  font-weight: 800;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   GRID
   ════════════════════════════════════════════════════════════════════════════ */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr));
  gap: calc(var(--cs) * 0.15);
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  align-content: stretch;
}

/* ── SLOT ── */
.offer-slot {
  container-type: inline-size;
  container-name: offer-card-slot;
  overflow: hidden;
  background: var(--card-bg);
  min-height: 0;
  position: relative;
}

/* ── OFFER CARD ── */
.offer-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--card-bg);
  overflow: hidden;
  will-change: transform;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.offer-card.visible { transform: translateY(0%); }
.offer-card.exiting { transform: translateY(-100%); }

/* ── Hero image ── */
.offer-image-wrap {
  position: relative;
  width: 100%;
  flex: 0 0 var(--card-img-h);
  overflow: hidden;
  min-height: 0;
}

.offer-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 9s ease;
}

.offer-card.visible .offer-image {
  transform: scale(1.05);
}

/* ── Card Logo — overlaid on image ── */
.offer-card-logo-wrap {
  position: absolute;
  top: calc(var(--cs) * 0.8);
  right: calc(var(--cs) * 0.8);
  max-width:  calc(var(--cs) * var(--card-logo-size, 8));
  max-height: calc(var(--cs) * calc(var(--card-logo-size, 8) * 0.5));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 2;
  background: rgba(255,255,255,0.88);
  border-radius: calc(var(--cs) * 0.35);
  padding: calc(var(--cs) * 0.2);
}

.offer-card-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD BODY — cqi units scale relative to rendered card width
   ════════════════════════════════════════════════════════════════════════════ */
.offer-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: clamp(4px, 1.8cqi, 36px) clamp(6px, 2.6cqi, 48px) 0;
  overflow: hidden;
  justify-content: space-between;
}

.offer-body-inner {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  overflow: hidden;
  gap: clamp(2px, 0.7cqi, 14px);
  min-height: 0;
}

.offer-name {
  font-size: clamp(12px, 3.8cqi, 72px);
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex-shrink: 1;
  max-width: 100%;
}

.offer-title {
  font-size: clamp(9px, 2.2cqi, 44px);
  font-weight: 500;
  color: #666;
  line-height: 1.25;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.offer-location-row {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.7cqi, 14px);
  flex-shrink: 0;
  overflow: hidden;
}

.offer-location-row svg {
  width:  clamp(10px, 2.2cqi, 44px);
  height: clamp(10px, 2.2cqi, 44px);
  flex-shrink: 0;
  stroke: var(--location-color);
  fill: none;
  stroke-width: 2;
}

.offer-location-text {
  font-size: clamp(9px, 2.1cqi, 42px);
  color: var(--location-color);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offer-meta-row {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(2px, 0.8cqi, 16px);
  flex-shrink: 0;
  overflow: hidden;
  padding-top: clamp(1px, 0.4cqi, 8px);
}

.offer-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: clamp(2px, 0.5cqi, 10px);
  background: var(--pill-bg);
  color: var(--pill-color);
  border-radius: 60px;
  padding: clamp(2px, 0.55cqi, 11px) clamp(4px, 1.4cqi, 28px);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.07);
  font-size: clamp(8px, 1.9cqi, 38px);
  flex-shrink: 0;
}

.offer-meta-pill svg {
  width:  clamp(8px, 1.9cqi, 38px);
  height: clamp(8px, 1.9cqi, 38px);
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER ROW (price + QR)
   ════════════════════════════════════════════════════════════════════════════ */
.offer-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
  padding: clamp(3px, 0.9cqi, 18px) clamp(6px, 2.6cqi, 48px) clamp(6px, 2.2cqi, 44px);
  border-top: 1px solid #edf0f7;
  gap: clamp(4px, 1.1cqi, 22px);
  overflow: visible;
  background: inherit;
  margin-top: auto;
}

.offer-price-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  background: transparent;
}

.offer-price-block {
  display: flex;
  align-items: baseline;
  gap: clamp(2px, 0.5cqi, 10px);
  flex-wrap: nowrap;
  background: transparent;
}

.offer-price-from {
  font-size: clamp(8px, 1.8cqi, 36px);
  color: #999;
  font-weight: 400;
}

.offer-price {
  font-size: clamp(18px, 5.2cqi, 104px);
  font-weight: 900;
  color: var(--accent-color);
  line-height: 1;
}

.offer-price-pp {
  font-size: clamp(8px, 1.8cqi, 36px);
  color: #999;
  font-weight: 400;
}

.offer-operator {
  font-size: clamp(8px, 1.85cqi, 37px);
  color: #777;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: clamp(1px, 0.35cqi, 7px);
  flex-shrink: 1;
  display: block;
}

/* ── QR + deal block ── */
.offer-deal-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(2px, 0.5cqi, 10px);
  flex-shrink: 0;
  margin-left: auto;
}

.offer-scan-label {
  font-size: clamp(8px, 1.85cqi, 37px);
  color: var(--accent-color);
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: clamp(2px, 0.55cqi, 11px);
}

.offer-scan-label svg {
  width:  clamp(8px, 1.85cqi, 37px);
  height: clamp(8px, 1.85cqi, 37px);
  stroke: var(--accent-color);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0;
}

.offer-qr {
  width:  clamp(32px, calc(var(--qr-cqi, 9) * 1cqi), 280px);
  height: clamp(32px, calc(var(--qr-cqi, 9) * 1cqi), 280px);
  border-radius: clamp(2px, 0.7cqi, 14px);
  border: 1px solid #e8eaf0;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  background: #fff;
  padding: 0;
}

.offer-qr svg,
.offer-qr img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.offer-qr--loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: qr-shimmer 1.2s infinite;
}

@keyframes qr-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════════ */
.footer-bar {
  background: var(--footer-bg);
  color: var(--text-light);
  text-align: center;
  padding: calc(var(--cs) * 0.42 + var(--bar-v-pad, 0px)) calc(var(--cs) * 1.8 + var(--grid-pad, 0px) + var(--bar-h-pad, 0px));
  font-size: calc(var(--cs) * 0.82);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border-radius: var(--footer-radius, var(--bar-radius));
  box-shadow: 0 calc(var(--cs) * -0.15) calc(var(--cs) * 0.5) rgba(0,0,0,0.18);
  position: relative;
  z-index: 2;
}

.footer-text {
  opacity: 0.85;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════════════
   SLOT LOADING MESSAGE
   ════════════════════════════════════════════════════════════════════════════ */
.slot-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cs, 20px) * 1.2);
  background: #eef1f8;
  z-index: 5;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.slot-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

.slot-loading-spinner {
  width:  calc(var(--cs, 20px) * 2.8);
  height: calc(var(--cs, 20px) * 2.8);
  border: calc(var(--cs, 20px) * 0.28) solid rgba(26,46,110,0.18);
  border-top-color: var(--primary-color, #1a2e6e);
  border-radius: 50%;
  animation: loading-spin 0.9s linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.slot-loading-text {
  color: var(--primary-color, #1a2e6e);
  font-size: calc(var(--cs, 20px) * 1.3);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTAINER QUERIES — hide elements on very narrow cards
   ════════════════════════════════════════════════════════════════════════════ */
@container offer-card-slot (max-width: 320px) {
  html:not(.digital-screen-mode) .offer-qr         { display: none; }
  html:not(.digital-screen-mode) .offer-scan-label  { display: none; }
  html:not(.digital-screen-mode) .offer-deal-block  { display: none; }
}

@container offer-card-slot (max-width: 260px) {
  html:not(.digital-screen-mode) .offer-title        { display: none; }
  html:not(.digital-screen-mode) .offer-location-row { display: none; }
  html:not(.digital-screen-mode) .offer-meta-row     { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PORTRAIT MODE  (1080 × 1920 and any screen where height > width)
   Activated by html.portrait class set by JS.
   ════════════════════════════════════════════════════════════════════════════ */

html.portrait,
html.portrait body { width: 100vw !important; height: 100vh !important; overflow: hidden !important; }

html.portrait .offers-grid {
  display:               grid          !important;
  grid-template-columns: 1fr           !important;
  grid-template-rows:    var(--portrait-card-h, 44vh) var(--portrait-card-h, 44vh) !important;
  grid-auto-rows:        var(--portrait-card-h, 44vh) !important;
  align-content:         start         !important;
  flex:                  1             !important;
  min-height:            0             !important;
  overflow:              hidden        !important;
  gap:                   var(--portrait-gap, 4px) !important;
}

html.portrait .offer-slot {
  height:   var(--portrait-card-h, 44vh) !important;
  min-height: 0    !important;
  overflow: hidden !important;
  position: relative !important;
  display:  block    !important;
}

html.portrait .offer-card {
  position:       absolute  !important;
  inset:          0         !important;
  display:        flex      !important;
  flex-direction: column    !important;
  width:          100%      !important;
  height:         100%      !important;
  overflow:       hidden    !important;
}

html.portrait .offer-image-wrap {
  flex:       1 1 0   !important;
  min-height: var(--portrait-img-min, 25%) !important;
  width:      100%    !important;
  overflow:   hidden  !important;
  position:   relative !important;
}

html.portrait .offer-image-wrap .offer-image {
  width:            100%    !important;
  height:           100%    !important;
  object-fit:       cover   !important;
  object-position:  center  !important;
  display:          block   !important;
}

html.portrait .offer-body {
  flex:             0 0 auto  !important;
  display:          flex      !important;
  flex-direction:   column    !important;
  overflow:         visible   !important;
  justify-content:  flex-start !important;
  padding:          clamp(8px,1.5vw,20px) clamp(12px,2.2vw,32px) 0 !important;
  background:       var(--card-bg, #fff) !important;
  gap:              0 !important;
}

html.portrait .offer-body-inner {
  flex:       0 0 auto  !important;
  display:    flex      !important;
  flex-direction: column !important;
  gap:        clamp(4px, 0.9vw, 14px) !important;
  overflow:   visible   !important;
}

html.portrait .offer-name {
  font-size:         clamp(28px, 4.4vw, 56px) !important;
  line-height:       1.25  !important;
  -webkit-line-clamp: 2    !important;
  overflow:          hidden !important;
  display:           -webkit-box !important;
  -webkit-box-orient: vertical   !important;
}

html.portrait .offer-title {
  font-size:  clamp(14px, 2.2vw, 28px) !important;
  display:    block !important;
  white-space: nowrap !important;
  overflow:   hidden !important;
  text-overflow: ellipsis !important;
}

html.portrait .offer-location-row {
  display: flex !important;
  gap:     clamp(4px, 0.8vw, 12px) !important;
}

html.portrait .offer-location-row svg {
  width:  clamp(14px, 2.4vw, 30px) !important;
  height: clamp(14px, 2.4vw, 30px) !important;
}

html.portrait .offer-location-text {
  font-size: clamp(14px, 2.2vw, 28px) !important;
}

html.portrait .offer-meta-row {
  display:    flex      !important;
  flex-wrap:  wrap      !important;
  gap:        clamp(4px, 0.9vw, 14px) !important;
  padding-top: clamp(2px, 0.4vw, 6px) !important;
}

html.portrait .offer-meta-pill {
  font-size: clamp(12px, 2.0vw, 26px) !important;
  padding:   clamp(4px, 0.7vw, 10px) clamp(10px, 1.8vw, 26px) !important;
  display:   inline-flex !important;
}

html.portrait .offer-meta-pill svg {
  width:  clamp(12px, 2.0vw, 26px) !important;
  height: clamp(12px, 2.0vw, 26px) !important;
}

html.portrait .offer-footer-row {
  flex:            0 0 auto !important;
  flex-shrink:     0        !important;
  display:         flex     !important;
  align-items:     center   !important;
  justify-content: space-between !important;
  overflow:        visible  !important;
  margin-top:      clamp(6px, 1vw, 14px) !important;
  padding:         clamp(8px,1.2vw,18px) clamp(12px,2.2vw,32px) clamp(10px,1.4vw,18px) !important;
  border-top:      2px solid #edf0f7 !important;
  gap:             clamp(8px,1.5vw,20px) !important;
}

html.portrait .offer-price-from { font-size: clamp(14px, 2.0vw, 24px) !important; }
html.portrait .offer-price {
  font-size: clamp(52px, 8.5vw, 96px) !important;
  line-height: 1 !important;
}
html.portrait .offer-price-pp { font-size: clamp(14px, 2.0vw, 24px) !important; }
html.portrait .offer-operator { font-size: clamp(13px, 1.9vw, 22px) !important; }

html.portrait .offer-price-left {
  flex-shrink: 1  !important;
  min-width:   0  !important;
  display:     flex !important;
  flex-direction: column !important;
}

html.portrait .offer-price-block {
  display:    flex  !important;
  align-items: baseline !important;
  flex-wrap:  nowrap !important;
  gap:        clamp(2px, 0.5vw, 8px) !important;
}

html.portrait .offer-deal-block {
  flex-shrink: 0    !important;
  display:     flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap:         clamp(4px, 0.7vw, 10px) !important;
}

html.portrait .offer-scan-label {
  display:    inline-flex !important;
  font-size:  clamp(11px, 1.5vw, 18px) !important;
  font-weight: 700 !important;
}

html.portrait .offer-scan-label svg {
  width:  clamp(11px, 1.5vw, 18px) !important;
  height: clamp(11px, 1.5vw, 18px) !important;
}

html.portrait .offer-qr {
  display:       block !important;
  width:         clamp(52px, 7vw, 88px) !important;
  height:        clamp(52px, 7vw, 88px) !important;
  border-radius: clamp(3px, 0.4vw, 8px) !important;
  flex-shrink:   0 !important;
}

/* Header / footer in portrait — full width, scaled text */
html.portrait .header-bar,
html.portrait .footer-bar { width: 100% !important; flex-shrink: 0 !important; }
html.portrait .header-tagline { font-size: clamp(18px, 3.8vw, 52px) !important; }
html.portrait .header-phone   { font-size: clamp(16px, 3.2vw, 44px) !important; }
html.portrait .agent-logo {
  max-height: clamp(32px, 6vw, 80px) !important;
  max-width:  clamp(100px, 22vw, 260px) !important;
}
html.portrait .footer-bar { font-size: clamp(11px, 1.8vw, 22px) !important; }

/* Ensure container-query hides do not fire in portrait */
html.portrait .offer-title        { display: block !important; }
html.portrait .offer-location-row { display: flex  !important; }
html.portrait .offer-meta-row     { display: flex  !important; }
html.portrait .offer-deal-block   { display: flex  !important; }

/* ════════════════════════════════════════════════════════════════════════════
   DIGITAL SCREEN MODE — landscape TV signage
   Activated by html.digital-screen-mode class set by JS from config.display_mode
   ════════════════════════════════════════════════════════════════════════════ */

html.digital-screen-mode body {
  padding: clamp(6px, 1.2vh, 22px) clamp(8px, 1.0vw, 20px);
}

html.digital-screen-mode .header-bar {
  padding: clamp(10px, 1.3vh, 28px) clamp(18px, 2.2vw, 52px);
  min-height: clamp(56px, 8vh, 120px);
  max-height: clamp(56px, 12vh, 140px);
}

html.digital-screen-mode .agent-logo {
  max-height: clamp(32px, 5vh, 90px);
  max-width:  clamp(100px, 14vw, 320px);
}

html.digital-screen-mode .header-tagline {
  font-size: clamp(16px, 2.2vw, 46px);
  font-weight: 800;
  letter-spacing: 0.06em;
}

html.digital-screen-mode .header-phone {
  font-size: clamp(16px, 2.0vw, 44px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

html.digital-screen-mode .offers-grid {
  grid-template-columns: 1fr 1fr;
  gap: clamp(4px, 0.5vw, 12px);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html.digital-screen-mode .offer-image-wrap {
  flex: 0 0 clamp(120px, 37vh, 480px) !important;
  max-height: clamp(120px, 37vh, 480px);
  min-height: 0;
}

html.digital-screen-mode .offer-body {
  padding: clamp(8px, 1.2vh, 24px) clamp(12px, 1.8vw, 40px) 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  justify-content: space-between;
  display: flex !important;
  flex-direction: column;
}

html.digital-screen-mode .offer-name {
  font-size: clamp(18px, 2.4vw, 52px);
  font-weight: 900;
  line-height: 1.3;
  -webkit-line-clamp: 2;
}

html.digital-screen-mode .offer-title {
  font-size: clamp(12px, 1.4vw, 30px);
  font-weight: 600;
  color: #555;
}

html.digital-screen-mode .offer-location-row svg {
  width:  clamp(12px, 1.5vw, 32px);
  height: clamp(12px, 1.5vw, 32px);
}

html.digital-screen-mode .offer-location-text {
  font-size: clamp(12px, 1.4vw, 30px);
  font-weight: 600;
}

html.digital-screen-mode .offer-meta-pill {
  font-size: clamp(10px, 1.25vw, 26px);
  font-weight: 700;
  padding: clamp(3px, 0.45vh, 10px) clamp(8px, 1.1vw, 24px);
}

html.digital-screen-mode .offer-meta-pill svg {
  width:  clamp(10px, 1.25vw, 26px);
  height: clamp(10px, 1.25vw, 26px);
}

html.digital-screen-mode .offer-footer-row {
  padding: clamp(6px, 0.9vh, 18px) clamp(12px, 1.8vw, 40px) clamp(8px, 1.1vh, 22px);
  gap: clamp(6px, 0.9vw, 20px);
  align-items: center;
  border-top: 2px solid #e8edf6;
  flex-shrink: 0 !important;
  display: flex !important;
}

html.digital-screen-mode .offer-price {
  font-size: clamp(28px, 3.8vw, 82px);
  font-weight: 900;
  line-height: 1;
}

html.digital-screen-mode .offer-price-from,
html.digital-screen-mode .offer-price-pp {
  font-size: clamp(11px, 1.3vw, 28px);
  color: #888;
}

html.digital-screen-mode .offer-operator {
  font-size: clamp(10px, 1.1vw, 24px);
  color: #666;
}

html.digital-screen-mode .offer-scan-label {
  font-size: clamp(11px, 1.2vw, 26px);
  font-weight: 800;
  letter-spacing: 0.04em;
}

html.digital-screen-mode .offer-scan-label svg {
  width:  clamp(11px, 1.2vw, 26px);
  height: clamp(11px, 1.2vw, 26px);
}

html.digital-screen-mode .offer-qr {
  width:  clamp(70px, 11vmin, 180px);
  height: clamp(70px, 11vmin, 180px);
  border-radius: clamp(4px, 0.5vw, 12px);
  border: 2px solid #d8dde8;
}

html.digital-screen-mode .footer-bar {
  padding: clamp(8px, 1.0vh, 22px) clamp(18px, 2.2vw, 52px);
  font-size: clamp(10px, 1.05vw, 24px);
  min-height: clamp(32px, 5vh, 80px);
  max-height: clamp(32px, 7vh, 90px);
}

html.digital-screen-mode .footer-text {
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0.025em;
}

/* Override container-query hides in digital-screen-mode */
html.digital-screen-mode .offer-qr          { display: block !important; }
html.digital-screen-mode .offer-scan-label  { display: inline-flex !important; }
html.digital-screen-mode .offer-deal-block  { display: flex !important; }
html.digital-screen-mode .offer-title       { display: block !important; }
html.digital-screen-mode .offer-location-row { display: flex !important; }
html.digital-screen-mode .offer-meta-row    { display: flex !important; }
html.digital-screen-mode .offer-meta-pill   { display: inline-flex !important; }
html.digital-screen-mode .offer-footer-row  { display: flex !important; }

/* ════════════════════════════════════════════════════════════════════════════
   STACKED MODE (narrow viewport, neither portrait nor digital-screen)
   ════════════════════════════════════════════════════════════════════════════ */
html.stacked .offers-grid { grid-template-columns: 1fr; }
html.stacked { --card-img-h: 40%; }
html.stacked .offer-qr          { display: none; }
html.stacked .offer-scan-label  { display: none; }
html.stacked .offer-deal-block  { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   JS CLASS HELPERS (narrow / short / very-short — set by updateScale)
   ════════════════════════════════════════════════════════════════════════════ */
html.narrow .offer-qr          { display: none; }
html.narrow .offer-scan-label  { display: none; }
html.narrow .offer-deal-block  { display: none; }
html.short .offer-title        { display: none; }
html.very-short .offer-location-row { display: none; }

html.very-short .offer-body {
  padding: clamp(3px, 1.0cqi, 20px) clamp(4px, 1.4cqi, 28px) 0;
}
html.very-short .offer-body-inner {
  gap: clamp(1px, 0.3cqi, 6px);
}
html.very-short .offer-footer-row {
  padding: clamp(2px, 0.6cqi, 12px) clamp(4px, 1.4cqi, 28px) clamp(3px, 1.0cqi, 20px);
}