@import url('assets/intersport-tokens.css');


/* ============================================================
   1.  EXTRA CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* Depth shadow system — red-tinted layered elevation */
  --shadow-depth-s:
    inset 0 1px 2px rgba(255,255,255,0.40),
    0 1px 2px rgba(180,12,22,0.15),
    0 2px 6px rgba(0,0,0,0.12);

  --shadow-depth-m:
    inset 0 1px 2px rgba(255,255,255,0.50),
    0 2px 6px rgba(180,12,22,0.20),
    0 6px 14px rgba(0,0,0,0.18);

  --shadow-depth-l:
    inset 0 1px 2px rgba(255,255,255,0.60),
    0 4px 8px rgba(180,12,22,0.25),
    0 12px 24px rgba(0,0,0,0.22);

  /* Min width for each info bubble */
  --bubble-w: 250px;

  /* Drop-shadow filters used on floating product images */
  --hero-shadow:
    drop-shadow(0 22px 26px rgba(0,0,0,0.28))
    drop-shadow(0 6px 10px rgba(0,0,0,0.16));
  --aux-shadow:
    drop-shadow(0 12px 16px rgba(0,0,0,0.22))
    drop-shadow(0 3px 6px rgba(0,0,0,0.12));
}


/* ============================================================
   2.  BASE / RESET
   ============================================================ */

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;          /* dynamic viewport height (mobile browsers) */
  width: 100vw;
  width: 100dvw;
  background: var(--brand-red);
  overflow: hidden;
}

@supports (height: 100svh) {
  html, body, #root { min-height: 100svh; }
}

/* Greek typography: swap to Inter-based stack for better diacritic rendering */
[lang="el"] {
  --font-display: var(--font-display-el);
  --font-sans:    var(--font-sans-el);
}

body {
  font-family:             var(--font-sans);
  color:                   var(--ink);
  -webkit-font-smoothing:  antialiased;
  text-rendering:          optimizeLegibility;
  user-select:             none;    /* kiosk: prevent text selection */
  overscroll-behavior:     none;
  touch-action:            manipulation;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img    { max-width: 100%; display: block; }


/* ============================================================
   3.  APP SHELL
   ============================================================ */

#root {
  display: flex;
  flex-direction: column;
}

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}


/* ============================================================
   4.  SCREEN SLOT + SLIDE TRANSITION ANIMATIONS
   ============================================================ */

.screen-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  will-change: transform, opacity;
}

/* --- Exit animations (current screen leaves) --- */
.screen-slot.is-exit-left  { animation: slotExitLeft  720ms cubic-bezier(0.5, 0, 0.2, 1) forwards; }
.screen-slot.is-exit-right { animation: slotExitRight 720ms cubic-bezier(0.5, 0, 0.2, 1) forwards; }

/* --- Enter animations (new screen arrives) --- */
.screen-slot.is-enter-from-right { animation: slotEnterFromRight 720ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.screen-slot.is-enter-from-left  { animation: slotEnterFromLeft  720ms cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes slotExitLeft {
  from { transform: translateX(0);      opacity: 1; }
  60%  { opacity: 1; }
  to   { transform: translateX(-105%);  opacity: 0; }
}
@keyframes slotExitRight {
  from { transform: translateX(0);     opacity: 1; }
  60%  { opacity: 1; }
  to   { transform: translateX(105%);  opacity: 0; }
}
@keyframes slotEnterFromRight {
  from { transform: translateX(105%);  opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slotEnterFromLeft {
  from { transform: translateX(-105%); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: translateX(0);     opacity: 1; }
}


/* ============================================================
   5.  HEADER
   ============================================================ */

.header {
  padding:    10px 24px;
  background: linear-gradient(135deg, #F7FAFF 0%, #E8F1FF 50%, #FFFFFF 100%);
  box-shadow: var(--shadow-depth-m);
  min-height: 76px;
  flex-shrink: 0;
  z-index: 5;
}

.header-inner {
  display:     flex;
  align-items: center;
  gap:         16px 24px;
  flex-wrap:   wrap;
  max-width:   1400px;
  margin:      0 auto;
  padding:     6px 24px;
  min-height:  60px;
}

/* Brand logo button (clicking goes home) */
.header-brand {
  display:      flex;
  align-items:  center;
  gap:          14px;
  padding:      0;
  flex-shrink:  0;
  min-height:   44px;
}

.logo-intersport { height: 28px; }
.logo-energetics { height: 40px; }

.header-divider {
  width:      1.5px;
  height:     28px;
  background: var(--ink);
  opacity:    0.55;
  flex-shrink: 0;
}

/* Breadcrumb nav */
.header-crumbs {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   clamp(14px, 1.6vw, var(--fs-20));
  color:       var(--ink-2);
  flex-wrap:   wrap;
  row-gap:     6px;
  min-width:   0;
  flex:        1 1 auto;
}

.crumb {
  padding:      10px 18px;
  min-height:   44px;
  border-radius: 8px;
  color:        var(--ink-2);
  white-space:  normal;
  word-break:   break-word;
  display:      inline-flex;
  align-items:  center;
  gap:          8px;
  max-width:    100%;
}
.crumb:hover { background: var(--brand-blue); color: #fff; }

.crumb-home    { padding: 10px 18px; text-align: left; }
.crumb-current { color: var(--brand-blue); font-weight: 600; }
.crumb-sep     { color: var(--ink-3); flex-shrink: 0; }

/* Lang toggle housed in the header on non-home screens */
.header-lang {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  margin-left: auto;
}


/* ============================================================
   6.  LANGUAGE TOGGLE
   ============================================================ */

/* The toggle pill itself */
.lang-toggle {
  position:      relative;
  display:       inline-flex;
  align-items:   center;
  background:    var(--surface-2);
  border-radius: 999px;
  padding:       4px;
  font-size:     var(--fs-14);
  font-weight:   700;
  letter-spacing: 0.04em;
  border:        none;
  cursor:        pointer;
  box-shadow:    0 4px 14px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.14);
}

/* Sliding blue pill indicator */
.lang-pill {
  position:      absolute;
  top: 4px; bottom: 4px; left: 4px;
  width:         calc(50% - 4px);
  background:    var(--brand-blue);
  border-radius: 999px;
  transition:    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.lang-toggle[data-active="en"] .lang-pill { transform: translateX(100%); }

.lang-toggle span:not(.lang-pill) {
  position:    relative;
  z-index:     1;
  padding:     12px 18px;
  color:       var(--ink-3);
  transition:  color 0.28s ease;
  min-width:   44px;
  min-height:  24px;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  text-align:  center;
}
.lang-toggle[data-active="el"] .lang-el { color: #fff; }
.lang-toggle[data-active="en"] .lang-en { color: #fff; }

/* Home screen: fixed top-right corner (same row as logos top-left) */
.global-lang-toggle {
  position: fixed;
  top:      clamp(20px, 3vh, 32px);
  right:    calc(clamp(28px, 4vw, 48px) + max(0px, (100vw - 1448px) / 2));
  z-index:  200;
}


/* ============================================================
   7.  HOME SCREEN
   ============================================================ */

.home {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  min-height:      0;
  gap:             clamp(20px, 3.5vw, 52px);
  /* Top padding clears the fixed corner logos + lang toggle.
     Bottom padding is for visual balance only. */
  padding:
    clamp(96px, 14vh, 140px)
    clamp(16px, 4vw,  80px)
    clamp(48px, 7vh,  80px);
  position:  relative;
  isolation: isolate;
}

/* ── Corner logos (fixed top-left) ── */
.home-corner-logos {
  position: fixed;
  top:      clamp(20px, 3vh, 32px);
  left:     calc(clamp(28px, 4vw, 48px) + max(0px, (100vw - 1448px) / 2));
  z-index:  200;
  display:  flex;
  align-items: center;
  gap:      clamp(14px, 2vw, 24px);
  pointer-events: none;
}

.home-corner-logo {
  display:    block;
  width:      auto;
  object-fit: contain;
  filter:     drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

.home-corner-logo-intersport {
  height: clamp(36px, 5vh, 56px);
}
.home-corner-logo-energetics {
  height: clamp(34px, 4.6vh, 52px);
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

/* Vertical white separator between the two logos */
.home-corner-divider {
  display:     block;
  width:       1.5px;
  height:      clamp(34px, 4.6vh, 52px);
  background:  rgba(255,255,255,0.75);
  flex-shrink: 0;
}

/* ── Folder grid (two big tiles: Gym Equipment | Accessories) ── */
.folder-grid {
  position: relative;
  z-index:  1;
  display:  grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap:      clamp(20px, 3.5vw, 56px);
  width:    100%;
  max-width: clamp(680px, 78vw, 1080px);
  max-height: 100%;
  min-height: 0;
  justify-items: center;
}

.folder-tile {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             clamp(16px, 2.4vh, 32px);
  aspect-ratio:    1;
  width:           100%;
  max-width:       460px;
  max-height:      100%;
  padding:
    clamp(24px, 4vh, 56px)
    clamp(20px, 3vw, 40px);
  background:    linear-gradient(145deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
  border-radius: clamp(24px, 3.5vh, 44px);
  border:        none;
  text-align:    center;
  cursor:        pointer;
  transition:    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  box-shadow:    0 12px 40px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.10);
}

.folder-tile:hover {
  box-shadow: var(--shadow-depth-l);
  transform:  translateY(-6px) scale(1.025);
}

/* Icon block inside the tile */
.folder-tile-icon {
  width:         clamp(220px, 32vh, 360px);
  height:        clamp(220px, 32vh, 360px);
  display:       grid;
  place-items:   center;
  background:    #fff;      /* equipment = blue */
  color:         #fff;
  border-radius: clamp(20px, 3vh, 32px);
  flex-shrink:   0;
  box-shadow:    var(--shadow-depth-m), 0 10px 24px rgba(0,0,0,0.18);
  transition:    all 0.25s ease;
}
.folder-tile-icon svg,
.folder-tile-icon .icon-mask {
  width:  clamp(120px, 18vh, 200px) !important;
  height: clamp(120px, 18vh, 200px) !important;
}
.icon-img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover;
}
.folder-tile:hover .folder-tile-icon {
  box-shadow: var(--shadow-depth-l), 0 14px 34px rgba(0,0,0,0.24);
  transform:  scale(1.08);
}

.folder-tile-text { min-width: 0; }
.folder-tile-text h2 {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      clamp(22px, 3.4vh, 40px);
  letter-spacing: -0.01em;
  margin:         0 0 clamp(6px, 1vh, 12px);
  color:          #fff;
  text-transform: uppercase;
  line-height:    1.1;
}
.folder-tile-cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  font-size:       clamp(15px, 2vh, 20px);
  font-weight:     600;
  color:           #ffffffa5;
  margin-top:      20px;
}

/* ── Tile jiggle (fires every 10 s on home screen) ── */
@keyframes tileJiggle {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-1.8deg) translateY(-3px) scale(1.02); }
  30%  { transform: rotate(2deg)   translateY(-4px) scale(1.025); }
  45%  { transform: rotate(-1.5deg) translateY(-2px) scale(1.01); }
  60%  { transform: rotate(1.2deg) translateY(-1px); }
  80%  { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}
.folder-tile.is-jiggling {
  animation: tileJiggle 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   8.  CATEGORY SCREEN
   ============================================================ */

/* ── CATEGORIES SECTION ──────────────────────────────────────────
   .categories is the single scroll container.
   At ≥768px: header lives at the .app level, grid fills the section.
   At  <768px: .header is the first flex child (rendered by JS inside
               the section). It uses position:sticky so it stays at the
               top of the scroll area — the grid flows naturally BELOW
               it, never overlapping. The whole section scrolls as one. */
.categories {
  flex:           1;
  display:        flex;
  flex-direction: column;
  padding:        0;
  min-height:     0;
  overflow-y:     auto;          /* ONE scroll container — no inner scroll */
  overflow-x:     hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.45) transparent;
}
.categories::-webkit-scrollbar { width: 8px; }
.categories::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.45); border-radius: 4px; }

/* Header is now always rendered outside .categories (in the app shell),
   so no sticky override needed here. */

/* Grid: fills available height on wide screens; sizes to content on
   narrow ones (section scrolls to reveal everything). */
.categories > .category-grid {
  flex:       1;
  min-height: 0;
}

.category-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  grid-auto-rows:        clamp(180px, 27vh, 250px);
  gap:                   clamp(10px, 1.4vh, 16px);
  padding:
    clamp(10px, 1.4vh, 16px)
    clamp(24px, 6vw,   120px)
    clamp(16px, 2.2vh, 24px);
  width:      100%;
  min-height: 0;
}

/* Equipment subcategory grid — 3-column free-flow */
.category-grid--equipment {
  grid-template-columns: repeat(3, minmax(0, 328px));
  grid-auto-rows:        clamp(250px, 36vh, 380px);
  gap:                   clamp(14px, 2vh, 22px);
  padding:
    clamp(14px, 2.2vh, 26px)
    clamp(16px, 2vw,   28px)
    clamp(20px, 3vh,   32px);
  max-width:    clamp(720px, 96vw, 1180px);
  margin:       0 auto;
  place-content: center;
}

/* Fitness Accessories subcategory grid — always 2×2 (4 equal tiles) */
.category-grid--accessories {
  grid-template-columns: repeat(2, minmax(0, 328px));
  grid-auto-rows:        clamp(250px, 36vh, 380px);
  gap:                   clamp(14px, 2vh, 22px);
  padding:
    clamp(14px, 2.2vh, 26px)
    clamp(16px, 2vw,   28px)
    clamp(20px, 3vh,   32px);
  max-width:    clamp(720px, 96vw, 1180px);
  margin:       0 auto;
  place-content: center;
}

.category-tile {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             clamp(8px, 1.2vh, 14px);
  padding:
    clamp(7px, 0.9vh, 11px)
    clamp(7px, 0.9vw, 11px);
  background:    linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
  border:        none;
  border-radius: clamp(12px, 1.6vh, 16px);
  text-align:    center;
  transition:    all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow:    var(--shadow-depth-m);
  min-height:    0;
  min-width:     0;
  overflow:      visible;
}
.category-tile:hover { box-shadow: var(--shadow-depth-l); transform: translateY(-2px); }

.category-tile-icon {
  width:         clamp(158px, 21vh, 212px);
  height:        clamp(158px, 21vh, 212px);
  display:       grid;
  place-items:   center;
  background:    #fff;
  color:         #fff;
  border-radius: clamp(12px, 1.6vh, 16px);
  box-shadow:    var(--shadow-depth-m);
  transition:    all 0.25s ease;
  flex-shrink:   0;
}
.category-tile-icon svg,
.category-tile-icon .icon-mask {
  width:  clamp(88px, 13vh, 128px) !important;
  height: clamp(88px, 13vh, 128px) !important;
}
.category-tile--treadmills .category-tile-icon,
.category-tile--ellipticals .category-tile-icon,
.category-tile--yoga .category-tile-icon,
.category-tile--strength .category-tile-icon,
.category-tile--benches .category-tile-icon { overflow: hidden; }

.category-tile--bottles .category-tile-icon { background: #F9F9F9; }

.category-tile--treadmills .category-tile-icon .icon-img,
.category-tile--ellipticals .category-tile-icon .icon-img,
.category-tile--bikes .category-tile-icon .icon-img,
.category-tile--benches .category-tile-icon .icon-img {
  transform: scale(1.25);
}

.category-tile:hover .category-tile-icon { box-shadow: var(--shadow-depth-l); transform: scale(1.06); }

.category-tile-text { min-width: 0; width: 100%; margin-top: 0.6rem; }
.category-tile-text h3 {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      clamp(15px, 2.2vh, 22px);
  margin:         0 0 clamp(1px, 0.2vh, 3px);
  color:          #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height:    1.15;
  word-break:     break-word;
  hyphens:        auto;
}
.category-tile-count {
  font-size:   clamp(13px, 1.7vh, 16px);
  color:       #fff;
  font-weight: 400;
  opacity:     0.68;
}


/* ============================================================
   9.  PRODUCT GRID SCREEN + CARDS
   ============================================================ */

.product-grid-screen {
  flex:           1;
  display:        flex;
  flex-direction: column;
  padding:        0;
  overflow-y:     auto;
  overflow-x:     hidden;
  min-height:     0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.45) transparent;
}
.product-grid-screen::-webkit-scrollbar       { width: 8px; }
.product-grid-screen::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.45); border-radius: 4px; }

/* Accessories: grid itself scrolls (no outer scroll) */
.product-grid-screen.is-accessories-scroll { overflow: hidden; }
.product-grid-screen.is-accessories-scroll .product-grid {
  overflow-y:     auto;
  overflow-x:     hidden;
  flex:           1;
  min-height:     0;
  padding-bottom: clamp(48px, 7vh, 96px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.55) transparent;
}
.product-grid-screen.is-accessories-scroll .product-grid::-webkit-scrollbar { width: 8px; }
.product-grid-screen.is-accessories-scroll .product-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.45); border-radius: 4px; }

/* The grid itself */
.product-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(max(220px, calc(25% - 12px)), 1fr));
  grid-auto-rows:        clamp(200px, 29vh, 270px);
  gap:                   clamp(10px, 1.4vh, 16px);
  /* Bottom padding clears the fixed pagination bar */
  padding:
    clamp(10px,  1.4vh,  16px)
    clamp(24px,  6vw,    120px)
    clamp(112px, 13vh,   144px);
  width:      100%;
  min-height: 0;
  transition: opacity 0.3s ease;
}

/* ── Product card ── */
.product-card {
  display:        flex;
  flex-direction: column;
  background:     #fff;
  border:         none;
  border-radius:  clamp(10px, 1.4vh, 14px);
  padding:        clamp(7px, 1.1vh, 12px);
  text-align:     left;
  transition:     all 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor:         pointer;
  box-shadow:     var(--shadow-depth-m);
  min-height:     0;
  overflow:       hidden;
}
.product-card:hover {
  box-shadow: var(--shadow-depth-l);
  transform:  translateY(-3px);
  overflow:   visible;
}

/* Image area */
.product-card-img {
  flex:          1;
  min-height:    0;
  background:    var(--surface-2);
  border-radius: clamp(6px, 0.9vh, 10px);
  display:       grid;
  place-items:   center;
  margin-bottom: clamp(4px, 0.7vh, 8px);
  overflow:      visible;
  position:      relative;
  isolation:     isolate;
}

/* Individual product images — positioned via inline styles from JS */
.product-card-image {
  width:            100%;
  height:           100%;
  object-fit:       contain;
  padding:          clamp(3px, 0.5vh, 6px);
  max-width:        86%;
  max-height:       80%;
  position:         absolute;
  top:              50%;
  left:             50%;
  transform-origin: center center;
  transition:       transform 0.3s ease, opacity 0.3s ease;
}

/* Mirror specific products horizontally.
   Applied to the IMAGE CONTAINER so it never conflicts with the
   inline `transform` on individual images. `scaleX(-1)` is
   supported since Chrome 1 — no compatibility concerns. */
.product-card[data-flip] .product-card-img  { transform: scaleX(-1); }

/* Single product in a grid (e.g. Rowing Machines category):
   give it a fixed squarish width and center it. */
.product-grid:has(.product-card:only-child) {
  grid-template-columns: minmax(0, clamp(240px, 32vh, 300px));
  justify-content: center;
}

.product-card-code {
  font-family:    var(--font-display);
  font-weight:    700;
  font-size:      clamp(10px, 1.2vh, 12px);
  color:          var(--brand-blue);
  letter-spacing: 0.05em;
  margin-bottom:  1px;
  overflow-wrap:  anywhere;
  word-break:     break-word;
}

.product-card-name {
  font-weight:  600;
  font-size:    clamp(11px, 1.3vh, 14px);
  color:        var(--ink);
  line-height:  1.2;
  /* Clamp to 2 lines */
  display:           -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp:         2;
  -webkit-box-orient: vertical;
  overflow:     hidden;
  flex-shrink:  0;
  min-height:   calc(2 * 1.2em);
  overflow-wrap: anywhere;
  word-break:   break-word;
}



/* ============================================================
   10. PAGINATION
   ============================================================ */

/* Fixed bar at bottom-center (equipment screens only) */
.product-pagination {
  position:  fixed;
  bottom:    28px;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  align-items: center;
  justify-content: center;
  gap:       clamp(12px, 2vh, 24px);
  padding:   8px clamp(16px, 2vw, 28px);
  background:   #fff;
  border:       1px solid var(--line);
  border-radius: 10px;
  box-shadow:   0 2px 12px rgba(0,0,0,0.10);
  z-index:   20;
  max-width: calc(100vw - 32px);
}

.pagination-buttons {
  display:     flex;
  gap:         clamp(6px, 1vh, 10px);
  align-items: center;
}

.pagination-btn {
  min-width:    44px;
  height:       44px;
  padding:      0 10px;
  background:   var(--surface-2);
  border:       2px solid var(--line);
  border-radius: 8px;
  font-weight:  600;
  font-size:    15px;
  color:        var(--ink-2);
  cursor:       pointer;
  transition:   all 0.2s ease;
}
.pagination-btn:hover  { background: var(--surface-3); border-color: var(--brand-blue); color: var(--brand-blue); }
.pagination-btn.active { background: var(--brand-blue); border-color: var(--brand-blue); color: white; }


/* ============================================================
   11. PRODUCT FOCUS VIEW — SHARED STYLES
   Red background stays visible. White spec cards float above it.
   ============================================================ */

.product-grid-screen.product-focus-view {
  flex:        1;
  display:     flex;
  flex-direction: column;
  padding:     0;
  overflow-y:  auto;
  overflow-x:  hidden;
  position:    relative;
  isolation:   isolate;
  min-height:  0;
}

/* Stage-light wash — covers the full height of the product view, image column width only.
   Hidden when layout switches to column (bubbles below images). */
.product-grid-screen.product-focus-view::before {
  content:  "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50vw;
  background:
    radial-gradient(80% 55% at 50% 25%,  rgba(255,255,255,0.09), transparent 60%),
    radial-gradient(60% 40% at 50% 95%,  rgba(0,0,0,0.16),       transparent 60%);
  pointer-events: none;
  z-index:  0;
  animation: focusBackdropIn 0.55s ease both;
}
@keyframes focusBackdropIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* Focus stage — max-width container */
.focus-stage {
  position:  relative;
  z-index:   1;
  width:     100%;
  max-width: 1480px;
  margin:    0 auto;
  padding:
    clamp(16px, 2.6vh, 26px)
    clamp(20px, 3vw,   36px)
    clamp(20px, 3vh,   36px);
  display:        flex;
  flex-direction: column;
  gap:            clamp(14px, 2vh, 22px);
  flex:           1;
  min-height:     0;
  overflow:       visible;
  animation:      focusStageIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes focusStageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Top bar: product title + action buttons ── */
.focus-top-bar {
  display:     flex;
  align-items: flex-start;
  justify-content: space-between;
  gap:         24px;
  flex-wrap:   wrap;
  animation:   focusBarIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both;
}
@keyframes focusBarIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.focus-title-block {
  flex:       1 1 320px;
  min-width:  0;
  color:      #fff;
}

.focus-eyebrow {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 8px;
  flex-wrap:   wrap;
}

.focus-brand {
  font-family:    var(--font-display);
  font-weight:    800;
  letter-spacing: 0.14em;
  color:          rgba(255,255,255,0.95);
  font-size:      var(--fs-13);
  text-transform: uppercase;
}
.focus-eyebrow-sep { color: rgba(255,255,255,0.5); font-weight: 700; }


.focus-title {
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      clamp(22px, 3vw, 36px);
  margin:         0 0 8px;
  color:          #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height:    1;
  text-shadow:    0 2px 14px rgba(0,0,0,0.22);
}

.focus-code-line {
  font-size:      var(--fs-13);
  color:          rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}
.focus-code-line .focus-code-dim {
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight:    600;
  font-size:      var(--fs-12);
  opacity:        0.85;
  margin-right:   8px;
}
.focus-code-line strong {
  color:          #fff;
  font-weight:    800;
  letter-spacing: 0.06em;
}

/* Equipment: product name shown in the eyebrow (small row) */
.focus-eyebrow-name {
  font-size:      var(--fs-13);
  font-weight:    500;
  color:          rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Warranty + cert trust badge — pill below the product title */
.focus-title-trust {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  flex-wrap:      nowrap;
  margin-top:     10px;
  padding:        6px 14px 6px 8px;
  font-size:      var(--fs-13);
  font-weight:    700;
  letter-spacing: 0.04em;
  color:          #E9C46A;
  background:     linear-gradient(135deg, var(--brand-red-dark) 0%, var(--brand-red) 100%);
  border:         1px solid rgba(233,196,106,0.35);
  border-radius:  999px;
  box-shadow:     0 2px 10px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.focus-trust-icon {
  width:       22px;
  height:      22px;
  object-fit:  contain;
  flex-shrink: 0;
}
.focus-title-trust-sep { opacity: 0.45; }


/* ── Action buttons (top-right) ── */
.focus-actions {
  display:         flex;
  align-items:     center;
  gap:             8px;
  flex-shrink:     0;
  flex-wrap:       wrap;
  justify-content: flex-end;
}

.focus-action-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         12px 18px;
  min-height:      44px;
  border-radius:   11px;
  background:      rgba(255,255,255,0.14);
  color:           #fff;
  font-weight:     700;
  font-size:       var(--fs-13);
  font-family:     var(--font-display);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  border:          1.5px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(10px);
  transition:
    background 0.22s ease, color 0.22s ease,
    transform  0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
  cursor:     pointer;
  white-space: nowrap;
}
.focus-action-btn:hover {
  background:  #fff;
  color:       var(--brand-red);
  border-color: #fff;
  transform:   translateY(-2px);
  box-shadow:  0 10px 24px rgba(0,0,0,0.22);
}

/* Back button has solid white styling by default */
.focus-action-back {
  background:  #fff;
  color:       var(--brand-red);
  border-color: #fff;
  box-shadow:  0 6px 18px rgba(0,0,0,0.18);
}
.focus-action-back:hover {
  background: rgba(255,255,255,0.92);
  color:      var(--brand-red-dark);
  transform:  translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.24);
}


/* ============================================================
   12. PRODUCT FOCUS — EQUIPMENT LAYOUT  (3-column)
   Left specs | Center hero | Right specs
   ============================================================ */

.focus-main {
  display:         grid;
  grid-template-columns:
    minmax(240px, 1fr)
    minmax(380px, 1.45fr)
    minmax(240px, 1fr);
  gap:        24px;
  flex:       1;
  align-items: stretch;
  min-height: 0;
}

@keyframes focusCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.focus-spec-card-head {
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--brand-red);
  margin-bottom:  10px;
  padding-bottom: 8px;
  border-bottom:  2px solid var(--brand-red);
  flex-shrink:    0;
  overflow-wrap:  anywhere;
  word-break:     break-word;
  line-height:    1.15;
}

.focus-spec-list {
  list-style:     none;
  margin:         0;
  padding:        0 6px 0 0;
  display:        flex;
  flex-direction: column;
  gap:            0;
  overflow-y:     auto;
  flex:           1;
  min-height:     0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.focus-spec-list::-webkit-scrollbar       { width: 4px; }
.focus-spec-list::-webkit-scrollbar-track { background: transparent; }
.focus-spec-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); border-radius: 4px; }

.focus-spec-row {
  display:         grid;
  grid-template-columns: 1.05fr auto;
  gap:             10px;
  padding:         8px 0;
  border-bottom:   1px solid rgba(0,0,0,0.06);
  align-items:     baseline;
}
.focus-spec-row:last-child { border-bottom: none; }
.focus-spec-key  { font-size: var(--fs-13); color: var(--ink); opacity: 0.72; font-weight: 500; line-height: 1.3; }
.focus-spec-val  { font-size: var(--fs-13); font-weight: 700; color: var(--ink); text-align: right; white-space: pre-line; line-height: 1.3; }

/* Computer section: comma-list of yes-features */
.focus-computer-features {
  font-size:     var(--fs-13);
  color:         var(--ink);
  font-weight:   500;
  line-height:   1.55;
  margin:        0;
  opacity:       0.9;
  overflow-y:    auto;
  flex:          1;
  min-height:    0;
  padding-right: 4px;
  scrollbar-width: thin;
}

.focus-qr-inner {
  flex:            1;
  min-height:      0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.focus-qr-img {
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: 1;
  object-fit:   contain;
}

/* Soft radial glow behind the product image */
.focus-image-glow {
  position:  absolute;
  inset:     8% 12% 22%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.32), rgba(255,255,255,0) 65%);
  filter:    blur(28px);
  pointer-events: none;
  z-index:   0;
}

.focus-image-stage {
  position:        relative;
  z-index:         1;
  width:           100%;
  max-width:       680px;
  flex:            1;
  min-height:      0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.focus-hero-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            1;
  min-height:      0;
  width:           100%;
}

/* Main (full-size) hero image — floats gently */
.focus-image-hero {
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
  filter:     var(--hero-shadow);
  animation:  focusImageFloat 6s ease-in-out infinite;
}
@keyframes focusImageFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Duo layout: large hero + small folded view */
.focus-image-duo {
  display:     grid;
  grid-template-columns: 3fr 1fr;
  gap:         22px;
  width:       100%;
  height:      100%;
  align-items: center;
}

/* Trio layout: hero + folded + computer console */
.focus-image-trio {
  display:     grid;
  grid-template-columns: 3fr 1fr 1fr;
  gap:         18px;
  width:       100%;
  height:      100%;
  align-items: center;
}
.focus-image-stage:has(.focus-image-trio) { max-width: none; }

.focus-image-slot {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  flex:            1;
  min-height:      0;
  height:          100%;
}

/* Secondary slots: smaller, slightly faded so the hero dominates */
.focus-image-slot img {
  max-width:  78%;
  max-height: 60%;
  object-fit: contain;
  filter:     var(--aux-shadow);
  opacity:    0.96;
}

/* Primary hero slot */
.focus-image-slot--hero { align-self: stretch; }
.focus-image-slot--hero img {
  max-width:  100%;
  max-height: 100%;
  filter:     var(--hero-shadow);
  opacity:    1;
  animation:  focusImageFloat 6s ease-in-out infinite;
}


/* ============================================================
   13. PRODUCT FOCUS — VIDEO SUB-VIEW
   ============================================================ */

.focus-stage-video .focus-video-area {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,0.55);
  border-radius:   20px;
  overflow:        hidden;
  box-shadow:      0 20px 60px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.2);
  border:          1px solid rgba(255,255,255,0.14);
  animation:       focusVideoIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both;
  max-height:      calc(100vh - 220px);
}
@keyframes focusVideoIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.focus-stage-video video {
  width:      100%;
  height:     100%;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  display:    block;
}

.focus-video-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            14px;
  color:          rgba(255,255,255,0.78);
  padding:        60px 40px;
  text-align:     center;
}
.focus-video-empty svg { color: rgba(255,255,255,0.55); }
.focus-video-empty p   { font-size: var(--fs-16); margin: 0; letter-spacing: 0.04em; }


/* ============================================================
   15. IDLE / ATTRACT SCREEN
   ============================================================ */

.idle-video {
  position:    fixed;
  inset:       0;
  z-index:     100;
  background:  var(--brand-blue);
  display:     grid;
  place-items: center;
  cursor:      pointer;
  animation:   fadeIn 0.4s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.idle-video-el {
  width:      100%;
  height:     100%;
  object-fit: cover;
}


/* ============================================================
   16. UTILITY CLASSES
   ============================================================ */


/* Blocks all pointer input for 800 ms after idle dismissal */
.idle-shield {
  position: fixed;
  inset:    0;
  z-index:  9998;
  background: transparent;
  cursor:   none;
}

/* Touch-screen active state (no hover effect on coarse pointers) */
@media (hover: none) and (pointer: coarse) {
  .folder-tile:hover,
  .category-tile:hover,
  .product-card:hover,
  .focus-action-btn:hover { transform: none; }

  .folder-tile:active    { transform: scale(0.98); }
  .category-tile:active,
  .product-card:active   { transform: scale(0.97); }
}


/* ============================================================
   ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════
   The styles above are the BASE — designed for ≥ 768px,
   the primary kiosk display (Xiaomi Redmi Pad 2 landscape).

   Each block below OVERRIDES only what changes at that size.
   ============================================================ */


/* ============================================================
   UNIFIED PRODUCT FOCUS LAYOUT
   ============================================================ */

/* Row: image LEFT (50%) — info-strip RIGHT (50%, carousel + QR side-by-side) */
.focus-main--unified {
  display:        flex;
  flex-direction: row;
  flex:           1;
  gap:            16px;
  min-height:     0;
}

/* Right half: proper flex container so carousel + QR sit side-by-side */
.focus-main--unified > .focus-info-strip {
  flex: 1;
}

/* Image → left half (DOM order puts it first naturally) */
.focus-img-area {
  flex:       1;
  min-height: 0;
  position:   relative;
  isolation:  isolate;
}
.focus-img-area--equip {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
}
.focus-img-area--equip .focus-image-stage { max-width: none; }
.focus-img-area--equip[data-flip] .focus-hero-wrap        { transform: scaleX(-1); }
.focus-img-area--equip[data-flip] .focus-image-slot--hero { transform: scaleX(-1); }

/* Wide layout (>1120px): QR at half size */
@media (min-width: 1121px) {
  .focus-main--unified .focus-info-strip-qr {
    width:      125px;
    max-height: 150px;
    padding:    10px 10px 8px;
  }
  .focus-main--unified .focus-info-strip-qr .focus-spec-card-head {
    font-size:      9px;
    margin-bottom:  5px;
    padding-bottom: 4px;
  }
}

/* Strip keeps its styles for non-contents contexts (mid + mobile breakpoints) */
.focus-info-strip {
  align-self:     center;
  display:        flex;
  flex-direction: row;
  flex-wrap:      nowrap;
  justify-content: center;
  gap:            12px;
  animation:      focusStripIn 0.5s cubic-bezier(0.2,0.8,0.2,1) 0.18s both;
}
@keyframes focusStripIn {
  from { opacity:0; transform:translateX(12px); }
  to   { opacity:1; transform:translateX(0); }
}

/* Shared bubble styles: explicit size, never overflow */
.focus-bubble-carousel,
.focus-info-strip-qr {
  width:      250px;
  max-height: 300px;
  border-radius: 16px;
  background:    linear-gradient(180deg,#F4F4F6 0%,#FAFAFC 60%,#FFFFFF 100%);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.14),
    inset 0 1px 2px rgba(0,0,0,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.7),
    0 0 0 1px rgba(0,0,0,0.06);
  animation: focusCardIn 0.5s cubic-bezier(0.2,0.8,0.2,1) 0.22s both;
}

/* Carousel internals */
.focus-bubble-carousel {
  position:       relative;
  display:        flex;
  flex-direction: column;
  overflow:       visible;
}

/* Swipe hint — sits below the dots in the carousel flex column */
.bubble-scroll-hint {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          24px;
  flex-shrink:     0;
  overflow:        visible;
  pointer-events:  none;
  margin-top:      6px;
  padding-left:    12px;
  opacity:         1;
  transition:      opacity 1.5s ease, transform 0.6s ease;
}
.focus-bubble-carousel.has-scrolled .bubble-scroll-hint {
  opacity:   0;
  transform: translateY(4px);
}

/* Rotated wrapper so chevrons point right and translateY = rightward */
.bubble-chevron-wrap {
  position:  relative;
  width:     16px;
  height:    16px;
  transform: rotate(90deg);
  overflow:  visible;
}

.bubble-chevron {
  position:  absolute;
  width:     18px;
  height:    5px;
  opacity:   0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: bubbleSwipeHint 3s ease-out infinite;
}
.bubble-chevron:nth-child(1) { animation-delay: 0s; }
.bubble-chevron:nth-child(2) { animation-delay: 1s; }
.bubble-chevron:nth-child(3) { animation-delay: 2s; }
.bubble-chevron::before,
.bubble-chevron::after {
  content:  '';
  position: absolute;
  top:      0;
  height:   100%;
  background: var(--brand-blue);
  opacity:  0.55;
}
.bubble-chevron::before { left: 0;  width: 51%; transform: skew(0deg,  30deg); }
.bubble-chevron::after  { right: 0; width: 50%; transform: skew(0deg, -30deg); }

@keyframes bubbleSwipeHint {
  25%  { opacity: 1; }
  33%  { opacity: 1; transform: translateY(18px); }
  67%  { opacity: 1; transform: translateY(24px); }
  100% { opacity: 0; transform: translateY(34px) scale3d(0.5, 0.5, 0.5); }
}
.focus-bubble-track {
  flex:             1;
  min-height:       0;
  display:          flex;
  overflow-x:       scroll;
  overflow-y:       hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:  none;
}
.focus-bubble-track::-webkit-scrollbar { display: none; }
.focus-bubble {
  flex:              0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop:  always;
  min-width:         0;
  padding:           14px 16px 12px;
  display:           flex;
  flex-direction:    column;
  overflow-x:        hidden;
  overflow-y:        auto;
  scrollbar-width:   thin;
  scrollbar-color:   rgba(0,0,0,0.15) transparent;
}
.focus-bubble-dots {
  flex-shrink:     0;
  height:          22px;
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             8px;
  background:      #fff;
  border-top:      1px solid rgba(0,0,0,0.06);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.focus-bubble-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background:    rgba(0,0,0,0.18);
  border: none; padding: 0; cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.focus-bubble-dot.is-active { background: var(--brand-blue); transform: scale(1.35); }

/* QR bubble — flex column: header on top, QR image fills the rest */
.focus-info-strip-qr {
  display:        flex;
  flex-direction: column;
  padding:        14px 16px 12px;
  overflow:       hidden;
}
.focus-info-strip-qr .focus-spec-card-head {
  flex-shrink: 0;
}


/* ────────────────────────────────────────────────────────────
   @M  769px – 1120px  —  MID BREAKPOINT (tablet landscape / small desktop)
   Goal: image fills left half, all spec cards in a 2-col info grid on right.
         Top bar: Energetics + code on left, action buttons stack 2-wide on right.
──────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1120px) {

  /* Focus stage: tighter padding at this width */
  .focus-stage {
    padding:
      clamp(12px, 1.8vh, 22px)
      clamp(14px, 2vw,   28px)
      clamp(14px, 2vh,   24px);
    gap: clamp(10px, 1.6vh, 18px);
  }

  /* ── Top bar: action buttons form a 2-col grid so they wrap cleanly ── */
  .focus-actions {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
    align-items:           start;
    flex-shrink:           0;
  }

  /* Image stage fills the full left column */
  .focus-image-stage { max-width: none; }
}


/* ────────────────────────────────────────────────────────────
   @N  769px – 924px  —  Bubbles stack into a column
──────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1120px) {
  .focus-img-area { flex: 0 0 60vw; }
  .focus-main--unified > .focus-info-strip { flex-direction: column; align-items: center; }
  .focus-bubble-carousel,
  .focus-info-strip-qr {
    width:      250px;
    height:     calc((100vh - 290px - 12px) / 2);
    max-height: calc((100vh - 290px - 12px) / 2);
  }
  .focus-qr-img { width: auto; height: 100%; max-width: 100%; }
}


/* ────────────────────────────────────────────────────────────
   @A  ≤ 768px  —  TABLET PORTRAIT  (520 – 768px range)
   Goal: smaller header, stacked focus view, tighter grids.
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* -- Header -- */
  .header          { padding: 8px 16px; min-height: 60px; }
  .header-inner    { padding: 4px 8px; gap: 10px 14px; }
  .logo-intersport { height: 22px; }
  .logo-energetics { height: 30px; }
  .header-divider  { height: 22px; }
  .crumb, .crumb-home { padding: 8px 12px; font-size: 14px; }

  /* -- Home corner logos & lang toggle -- */
  .home-corner-logos     { left: clamp(16px, 3vw, 28px); right: auto; top: clamp(14px, 2vh, 22px); }
  .global-lang-toggle    { right: clamp(16px, 3vw, 28px); left: auto; top: clamp(14px, 2vh, 22px); bottom: auto; }

  /* -- Home folder tiles: keep 2 columns but smaller -- */
  .home {
    padding:
      clamp(80px, 11vh, 110px)
      clamp(16px, 3vw,  28px)
      clamp(72px, 10vh, 96px);
    gap: clamp(16px, 2.5vh, 28px);
  }
  .folder-grid {
    grid-template-columns: 1fr 1fr;
    max-width:  720px;
    gap:        clamp(12px, 2.5vw, 24px);
    align-self: center;
  }
  .folder-tile {
    aspect-ratio: 1;
    max-height:   min(360px, 55vh);
    padding:      clamp(18px, 3vh, 32px) clamp(12px, 2.5vw, 24px);
    gap:          clamp(10px, 2vh, 20px);
  }
  .folder-tile-icon { width: clamp(128px, 20vh, 200px); height: clamp(128px, 20vh, 200px); }
  .folder-tile-icon svg, .folder-tile-icon .icon-mask {
    width: clamp(76px, 12vh, 120px) !important;
    height: clamp(76px, 12vh, 120px) !important;
  }
  .folder-tile-text h2 { font-size: clamp(16px, 2.6vh, 24px); }
  .folder-tile-cta     { font-size: clamp(12px, 1.6vh, 16px); }

  /* Grid sizes to its own content; .categories scrolls to reveal it */
  .categories > .category-grid { flex: none; min-height: auto; }

  /* -- Category grid: denser -- */
  .category-grid,
  .category-grid--equipment {
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    grid-auto-rows:        clamp(140px, 21vh, 190px);
    gap:                   clamp(10px, 1.4vh, 14px);
    padding:               clamp(10px, 1.4vh, 18px) clamp(16px, 3vw, 32px) clamp(14px, 2vh, 22px);
    max-width:             100%;
  }
  /* Equipment grid: 2 columns + generous padding so red background breathes.
     Compound selector (0,2,0) beats the combined rule above (0,1,0). */
  .category-grid.category-grid--equipment {
    grid-template-columns: repeat(2, minmax(0, 328px));
    grid-auto-rows: clamp(200px, 30vh, 280px);
    padding: 32px 48px 40px;
  }
  /* Accessories grid: stays 2×2 at this size */
  .category-grid.category-grid--accessories {
    grid-template-columns: repeat(2, minmax(0, 328px));
    grid-auto-rows: clamp(200px, 30vh, 280px);
    padding: 32px 48px 40px;
  }
  .category-tile                   { padding: clamp(5px, 0.7vh, 8px) clamp(5px, 0.7vh, 8px); gap: clamp(6px, 1vh, 10px); }
  .category-tile-icon              { width: clamp(120px, 18vh, 176px); height: clamp(120px, 18vh, 176px); }
  .category-tile-icon svg,
  .category-tile-icon .icon-mask   { width: clamp(68px, 11vh, 104px) !important; height: clamp(68px, 11vh, 104px) !important; }
  .category-tile-text h3           { font-size: clamp(14px, 1.9vh, 18px); }
  .category-tile-count             { font-size: clamp(12px, 1.5vh, 14px); }

  /* -- Product grid: tighter -- */
  .product-grid {
    padding:
      clamp(8px,  1.4vh, 14px)
      clamp(16px, 3vw,   48px)
      clamp(112px, 13vh, 144px);
  }
  .product-grid-screen.is-accessories-scroll .product-grid {
    grid-auto-rows: clamp(180px, 32vh, 240px);
  }

  /* -- Unified layout: image on top, bubbles ALWAYS side-by-side below -- */
  .product-grid-screen.product-focus-view::before { display: none; }
  .focus-main--unified   { flex-direction: column; }
  .focus-img-area        { flex-grow: 1; width: 100%; }
  .focus-main--unified > .focus-info-strip { flex-grow: 0; align-self: auto; justify-content: center; flex-direction: row; flex-wrap: nowrap; }
  .focus-bubble-carousel,
  .focus-info-strip-qr   { width: calc(50% - 6px); max-width: 250px; max-height: 300px; }

  /* -- Product focus: STACK vertically (single column) -- */
  .product-grid-screen.product-focus-view { overflow-y: auto; }
  .focus-stage {
    overflow:   visible;
    flex:       0 0 auto;
    min-height: 0;
    height:     auto;
    padding:    clamp(12px, 2vh, 22px) clamp(14px, 3vw, 28px) clamp(20px, 3vh, 32px);
    gap:        clamp(12px, 2vh, 20px);
  }
  /* Restore focus-actions to flex wrap */
  .focus-actions             { display: flex; flex-wrap: wrap; }
  .focus-image-stage         { max-width: 100%; height: clamp(240px, 42vh, 400px); }

  /* Focus top-bar: title full-width, buttons wrap below */
  .focus-top-bar     { flex-direction: row; flex-wrap: wrap; }
  .focus-title-block { flex: 1 1 100%; }
  .focus-actions     { flex: 1 1 100%; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .focus-action-btn  { padding: 10px 14px; font-size: var(--fs-13); }

  /* Pagination: same position */
  .product-pagination { bottom: 24px; }
}


/* ────────────────────────────────────────────────────────────
   @B  ≤ 520px  —  PHONE PORTRAIT  (400 – 520px range)
   Goal: single-column home tiles, compact everything.
──────────────────────────────────────────────────────────── */
@media (max-width: 520px) {

  /* -- Header -- */
  .header          { padding: 6px 12px; min-height: 54px; }
  .header-inner    { padding: 0; gap: 6px 8px; }
  .header-brand    { gap: 8px; }
  .logo-intersport { height: 18px; }
  .logo-energetics { height: 22px; }
  .header-divider  { height: 18px; }
  .crumb, .crumb-home { padding: 6px 10px; font-size: 13px; }

  /* -- Corner logos -- */
  .home-corner-logos       { gap: 10px; top: 10px; left: 12px; right: auto; }
  .home-corner-logo-intersport { height: 28px; }
  .home-corner-logo-energetics { height: 26px; }
  .global-lang-toggle      { right: 12px; left: auto; top: 10px; bottom: auto; }
  .lang-toggle span:not(.lang-pill) { padding: 10px 14px; }

  /* -- Home: single-column folder tiles -- */
  .home { padding: 64px 14px 60px; gap: clamp(10px, 2vh, 16px); }
  .folder-grid {
    grid-template-columns: 1fr;
    grid-template-rows:    1fr 1fr;
    max-width:  380px;
    height:     100%;
    gap:        clamp(10px, 2vh, 16px);
  }
  .folder-tile {
    aspect-ratio: auto;
    width:        100%;
    height:       100%;
    min-height:   0;
    max-height:   none;
    padding:      clamp(12px, 2.4vh, 22px) 16px;
    gap:          clamp(8px, 1.6vh, 14px);
  }
  .folder-tile-icon { width: 140px; height: 140px; border-radius: 18px; }
  .folder-tile-icon svg, .folder-tile-icon .icon-mask { width: 80px !important; height: 80px !important; }
  .folder-tile-text h2 { font-size: 20px; }
  .folder-tile-cta     { font-size: 13px; }

  /* -- Category grid: forced 2-column -- */
  .category-grid,
  .category-grid--equipment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding:               8px 12px 16px;
    grid-auto-rows:        clamp(140px, 22vh, 180px);
  }
  /* Equipment + accessories cards: taller rows so content fits without squishing.
     Compound selector (0,2,0) beats the combined rule above (0,1,0). */
  .category-grid.category-grid--equipment,
  .category-grid.category-grid--accessories { grid-auto-rows: clamp(230px, 32vh, 300px); }
  .category-tile-icon { width: 112px; height: 112px; }
  .category-tile-icon svg, .category-tile-icon .icon-mask { width: 64px !important; height: 64px !important; }
  .category-tile-text h3 { font-size: 14px; }

  /* -- Product grid: forced 2-column -- */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding:               8px 12px clamp(144px, 20vh, 180px);
    grid-auto-rows:        clamp(200px, 30vh, 240px);
  }
  .product-grid-screen.is-accessories-scroll .product-grid {
    grid-auto-rows:  clamp(200px, 30vh, 240px);
    padding-bottom:  clamp(72px, 12vh, 110px);
  }
  .product-card-name { font-size: 12px; }

  /* -- Unified layout: tighter gap on phones -- */
  .focus-info-strip { gap: 8px; }

  /* -- Product focus: compact -- */
  .focus-stage         { padding: 12px 12px 16px; gap: 12px; }
  .focus-top-bar       { gap: 12px; }
  .focus-title         { font-size: clamp(17px, 5vw, 24px); }
  .focus-action-btn    { padding: 8px 10px; font-size: 11px; gap: 6px; }
  .focus-spec-card     { padding: 10px 12px; }
  .focus-spec-card-head { font-size: 10px; margin-bottom: 6px; }
  .focus-spec-key,
  .focus-spec-val      { font-size: 12px; }

  /* Pagination: push above the lang toggle */
  .product-pagination  { bottom: 64px; padding: 6px 12px; }
  .pagination-btn      { min-width: 40px; height: 40px; font-size: 13px; }
}


/* ────────────────────────────────────────────────────────────
   @C  ≤ 400px  —  MICRO FALLBACK  (below 400px)
   Goal: survive extreme narrowness; kiosk rarely triggers this.
──────────────────────────────────────────────────────────── */
@media (max-width: 400px) {

  .home-corner-logo-intersport  { height: 24px; }
  .home-corner-logo-energetics  { height: 22px; }
  .folder-tile                  { padding: 12px; gap: 10px; }
  .folder-tile-icon             { width: 112px; height: 112px; }
  .folder-tile-icon svg,
  .folder-tile-icon .icon-mask { width: 64px !important; height: 64px !important; }
  .folder-tile-text h2          { font-size: 17px; margin-bottom: 4px; }
  .folder-tile-cta              { font-size: 12px; }

  .category-grid,
  .category-grid--equipment     { grid-auto-rows: 118px; padding: 6px 10px 14px; gap: 10px; }

  .product-grid                 { grid-auto-rows: 180px; padding: 6px 10px clamp(144px, 20vh, 180px); gap: 10px; }
  .product-grid-screen.is-accessories-scroll .product-grid {
    grid-auto-rows: 180px;
    padding:        6px 10px clamp(64px, 11vh, 96px);
    gap:            10px;
  }
}


/* ────────────────────────────────────────────────────────────
   Landscape phones (short viewport height ≤ 480px)
   Home tiles go side-by-side in a row instead of stacking.
──────────────────────────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
  .home { padding: 44px 16px 52px; gap: 12px; }
  .folder-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    1fr;
    max-width: 720px;
    height:    100%;
    gap:       16px;
  }
  .folder-tile {
    aspect-ratio: auto;
    width:        100%;
    height:       100%;
    min-height:   0;
    padding:      12px 16px;
    flex-direction: row;
    gap:          12px;
    text-align:   left;
  }
  .folder-tile-text   { text-align: left; }
  .folder-tile-icon   { width: 120px; height: 120px; }
  .folder-tile-icon svg, .folder-tile-icon .icon-mask { width: 72px !important; height: 72px !important; }
  .home-corner-logos  { top: 8px; left: 12px; right: auto; }
  .home-corner-logo-intersport { height: 24px; }
  .home-corner-logo-energetics { height: 22px; }
  .global-lang-toggle { right: 12px; left: auto; top: 8px; bottom: auto; }
}