/* ============================================================
   INDASTRA — Homepage v2 Component Layer
   Loaded after style.css — new classes only, no overrides
   Components: banner-hero-long, banner-row-3, promo-collection,
               collection-grid-2/3, collection-tile-brand,
               collection-tile-country-cat
   ============================================================ */

/* ── V2 LOCAL VARIABLES ──────────────────────────────────── */
:root {
  --space-section:     64px;
  --space-section-mob: 40px;

  /* Banner gradient palette */
  --ban-blue:          linear-gradient(135deg, #0078b0 0%, #005580 100%);
  --ban-dark:          linear-gradient(140deg, #1A2332 0%, #0d1724 60%, #0a1e33 100%);
  --ban-grad-tech:     linear-gradient(135deg, #0d1f35 0%, #003d66 40%, #006fa3 100%);
  --ban-steel:         linear-gradient(135deg, #2c3e50 0%, #1a2a3a 100%);
  --ban-teal:          linear-gradient(135deg, #006d77 0%, #004d56 100%);

  /* Tile gradient palette — editorial collection cards */
  --tile-navy:         linear-gradient(145deg, #1A2332 0%, #0d2a40 100%);
  --tile-cobalt:       linear-gradient(145deg, #0078b0 0%, #004e7a 100%);
  --tile-slate:        linear-gradient(145deg, #2c3e50 0%, #1c2d3e 100%);
  --tile-steel:        linear-gradient(145deg, #34495e 0%, #1e2f40 100%);
  --tile-teal:         linear-gradient(145deg, #006d77 0%, #003e46 100%);
  --tile-ocean:        linear-gradient(145deg, #0097a7 0%, #006672 100%);
  --tile-charcoal:     linear-gradient(145deg, #263238 0%, #1a2328 100%);

  /* Tile hover glow */
  --tile-glow:         0 12px 36px rgba(0, 152, 219, 0.18);
  --tile-lift:         translateY(-2px);

  /* Text on dark tiles */
  --tile-text:         rgba(255, 255, 255, 1);
  --tile-text-dim:     rgba(255, 255, 255, 0.62);
  --tile-text-faint:   rgba(255, 255, 255, 0.38);
  --tile-arrow:        rgba(255, 255, 255, 0.50);

  /* Banner radii */
  --ban-radius:        24px;
  --ban-radius-sm:     20px;
}


/* ══════════════════════════════════════════════════════════
   SECTION WRAPPER — v2 spacing override (additive)
   ══════════════════════════════════════════════════════════ */

.home-v2-section {
  padding: var(--space-section) 0;
  border-bottom: 1px solid var(--border-light);
}
.home-v2-section:last-of-type {
  border-bottom: none;
}
.home-v2-section .section-header {
  margin-bottom: 24px;
}


/* ══════════════════════════════════════════════════════════
   BANNER — HERO LONG
   Full-width editorial banner (1200 x 300+)
   Usage: <div class="banner-hero-long banner-hero-long--blue">
   ══════════════════════════════════════════════════════════ */

.banner-hero-long {
  position: relative;
  width: 100%;
  min-height: 300px;
  border-radius: var(--ban-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--ban-blue);
  text-decoration: none;
  color: #fff;
  transition: box-shadow 0.30s cubic-bezier(0.4, 0, 0.2, 1),
              transform  0.30s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-hero-long:hover {
  box-shadow: var(--tile-glow);
  transform: var(--tile-lift);
}

/* Background image layer — visible only when img present */
.banner-hero-long__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.28;
  pointer-events: none;
}

/* Scrim — keeps text legible over any image */
.banner-hero-long__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.20) 60%,
    rgba(0,0,0,0.02) 100%
  );
  pointer-events: none;
}

/* Decorative grid pattern */
.banner-hero-long::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(255,255,255,0.025) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      rgba(255,255,255,0.025) 60px
    );
  pointer-events: none;
  z-index: 0;
}

.banner-hero-long__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 48px 52px;
  gap: 32px;
}

.banner-hero-long__content {
  flex: 1;
  max-width: 600px;
}

.banner-hero-long__eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.banner-hero-long__headline {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 12px;
}

.banner-hero-long__sub {
  font-size: 15px;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 480px;
}

.banner-hero-long__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: box-shadow 0.22s, background 0.22s;
  letter-spacing: 0.01em;
}
.banner-hero-long__cta:hover {
  background: #f0f8ff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.banner-hero-long__cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transition: transform 0.18s;
}
.banner-hero-long:hover .banner-hero-long__cta svg {
  transform: translateX(3px);
}

/* Product visual area */
.banner-hero-long__visual {
  flex-shrink: 0;
  width: 340px;
  max-width: 32%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-hero-long__visual img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.30));
}

/* ── Color variants ─────────────────────────────────────── */

.banner-hero-long--blue        { background: var(--ban-blue); }
.banner-hero-long--dark        { background: var(--ban-dark); }
.banner-hero-long--gradient-tech {
  background: var(--ban-grad-tech);
}
.banner-hero-long--gradient-tech::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,152,219,0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.banner-hero-long--steel       { background: var(--ban-steel); }
.banner-hero-long--teal        { background: var(--ban-teal); }


/* ══════════════════════════════════════════════════════════
   BANNER ROW — 3 TILES SIDE BY SIDE
   Modelled on Makita-style 3-up ad banners
   ══════════════════════════════════════════════════════════ */

.banner-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.banner-tile {
  position: relative;
  border-radius: var(--ban-radius-sm);
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--ban-blue);
  text-decoration: none;
  color: #fff;
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              transform  0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-tile:hover {
  box-shadow: var(--tile-glow);
  transform: var(--tile-lift);
}

/* Background image */
.banner-tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

/* Bottom gradient scrim */
.banner-tile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  background: linear-gradient(to top, rgba(0,0,0,0.58) 0%, transparent 100%);
  pointer-events: none;
}

/* Brand logo — top-left slot. White pill chip so JPG/PNG logos read clearly on dark tiles */
.banner-tile__brand {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.40);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text, #1A2332);
  height: 28px;
  min-width: 60px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.banner-tile__brand img {
  height: 18px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  display: block;
}

/* Currency / price icon — top-right slot */
.banner-tile__price-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: rgba(0, 152, 219, 0.85);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Content area — overlaid on scrim */
.banner-tile__content {
  position: relative;
  z-index: 2;
  padding: 16px 18px 18px;
}

.banner-tile__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
  display: block;
}

.banner-tile__headline {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 8px;
}

.banner-tile__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.68);
  line-height: 1.45;
}

/* ── Color variants ─────────────────────────────────────── */

.banner-tile--blue     { background: var(--ban-blue); }
.banner-tile--dark     { background: var(--ban-dark); }
.banner-tile--tech     { background: var(--ban-grad-tech); }
.banner-tile--steel    { background: var(--ban-steel); }
.banner-tile--teal     { background: var(--ban-teal); }

/* Product visual inside tile */
.banner-tile__visual {
  position: absolute;
  bottom: 50px;
  right: 14px;
  width: 100px;
  max-height: 90px;
  z-index: 1;
  pointer-events: none;
}
.banner-tile__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.30));
  opacity: 0.90;
}


/* ══════════════════════════════════════════════════════════
   PROMO COLLECTION CARD
   Time-limited offer with urgency signal, industrial copy
   ══════════════════════════════════════════════════════════ */

.promo-collection {
  position: relative;
  border-radius: var(--ban-radius-sm);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-light);
  display: flex;
  align-items: stretch;
  min-height: 200px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              transform  0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.28s;
}
.promo-collection:hover {
  box-shadow: var(--tile-glow);
  transform: var(--tile-lift);
  border-color: var(--primary-border);
}

/* Subtle blue accent bar on left edge */
.promo-collection::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--grad-primary);
  border-radius: 0 3px 3px 0;
}

.promo-collection__body {
  flex: 1;
  padding: 28px 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Date range pill */
.promo-collection__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-xlight);
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  width: fit-content;
}
.promo-collection__date svg {
  width: 12px;
  height: 12px;
  stroke: var(--primary);
  flex-shrink: 0;
}

/* Emotional headline */
.promo-collection__emotional {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

/* Main offer line */
.promo-collection__offer {
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 8px;
}

/* Discount callout */
.promo-collection__discount {
  display: inline-block;
  font-size: 28px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 16px;
}

/* Optional filter tag */
.promo-collection__filter {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.promo-collection__filter::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--border);
}

/* CTA link */
.promo-collection__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  margin-top: auto;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--primary-xlight);
  border: 1.5px solid var(--primary-border);
  width: fit-content;
  transition: background 0.20s, box-shadow 0.20s;
}
.promo-collection:hover .promo-collection__cta,
.promo-collection__cta:hover {
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(0,152,219,0.28);
}
.promo-collection__cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transition: transform 0.16s;
}
.promo-collection:hover .promo-collection__cta svg {
  transform: translateX(3px);
}

/* Product visual — right panel */
.promo-collection__visual {
  flex-shrink: 0;
  width: 220px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  border-left: 1px solid var(--border-light);
}
.promo-collection__visual img {
  width: 80%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.12));
}

/* Urgency indicator strip */
.promo-collection__urgency {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  margin-top: 12px;
}
.promo-collection__urgency-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: v2-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes v2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.8); }
}


/* ══════════════════════════════════════════════════════════
   COLLECTION GRIDS — editorial tiles (vseinstrumenti style)
   ══════════════════════════════════════════════════════════ */

/* 2-column: featured (2-span) + standard */
.collection-grid-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 14px;
}

/* 3-column: pure 3-up or mixed featured */
.collection-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Featured tile spans 2 columns */
.collection-tile--featured {
  grid-column: span 2;
}

/* ── Base tile ─────────────────────────────────────────── */

.collection-tile {
  position: relative;
  border-radius: var(--ban-radius-sm);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--tile-navy);
  text-decoration: none;
  color: #fff;
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              transform  0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.collection-tile:hover {
  box-shadow: var(--tile-glow);
  transform: var(--tile-lift);
}
.collection-tile--featured {
  min-height: 280px;
}

/* Background image layer */
.collection-tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
  transition: opacity 0.32s;
  pointer-events: none;
}
.collection-tile:hover .collection-tile__bg {
  opacity: 0.30;
}

/* Bottom scrim */
.collection-tile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75%;
  background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, transparent 100%);
  pointer-events: none;
}

/* Content */
.collection-tile__content {
  position: relative;
  z-index: 2;
  padding: 18px 20px 20px;
}

.collection-tile__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  margin-bottom: 7px;
  display: block;
}

.collection-tile__headline {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.collection-tile--featured .collection-tile__headline {
  font-size: 22px;
}

.collection-tile__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.58);
  line-height: 1.40;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-tile__arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tile-arrow);
  transition: gap 0.18s, color 0.18s;
}
.collection-tile__arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transition: transform 0.18s;
}
.collection-tile:hover .collection-tile__arrow {
  color: rgba(255,255,255,0.85);
  gap: 8px;
}
.collection-tile:hover .collection-tile__arrow svg {
  transform: translateX(3px);
}

/* Product cluster visual — top-right corner */
.collection-tile__cluster {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  gap: -4px;
  pointer-events: none;
}
.collection-tile__cluster img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.28));
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}
.collection-tile--featured .collection-tile__cluster img {
  width: 80px;
  height: 80px;
}

/* ── Background gradient shortcuts ────────────────────── */

.collection-tile--navy     { background: var(--tile-navy); }
.collection-tile--cobalt   { background: var(--tile-cobalt); }
.collection-tile--slate    { background: var(--tile-slate); }
.collection-tile--steel    { background: var(--tile-steel); }
.collection-tile--teal     { background: var(--tile-teal); }
.collection-tile--ocean    { background: var(--tile-ocean); }
.collection-tile--charcoal { background: var(--tile-charcoal); }


/* ── Brand collection tile ─────────────────────────────── */

.collection-tile-brand {
  position: relative;
  background: var(--bg);
  border-radius: var(--ban-radius-sm);
  border: 1.5px solid var(--border-light);
  overflow: hidden;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 16px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              transform  0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.28s;
  gap: 10px;
}
.collection-tile-brand:hover {
  box-shadow: var(--tile-glow);
  transform: var(--tile-lift);
  border-color: var(--primary-border);
}

/* Subtle radial background accent */
.collection-tile-brand::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,152,219,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.collection-tile-brand__logo {
  height: 40px;
  max-width: 120px;
  object-fit: contain;
  display: block;
}

.collection-tile-brand__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.3;
}

.collection-tile-brand__count {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
  background: var(--primary-xlight);
  border: 1px solid var(--primary-border);
  padding: 2px 10px;
  border-radius: 999px;
}

.collection-tile-brand__flag {
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 10px;
  right: 12px;
  opacity: 0.70;
}

/* Dark variant for brand tiles */
.collection-tile-brand--dark {
  background: var(--tile-navy);
  border-color: rgba(255,255,255,0.08);
  color: #fff;
}
.collection-tile-brand--dark .collection-tile-brand__logo {
  filter: brightness(0) invert(1);
  opacity: 0.90;
}
.collection-tile-brand--dark .collection-tile-brand__name {
  color: #fff;
}
.collection-tile-brand--dark .collection-tile-brand__count {
  background: rgba(0,152,219,0.25);
  border-color: rgba(0,152,219,0.35);
  color: rgba(255,255,255,0.85);
}


/* ── Country-category tile ─────────────────────────────── */

.collection-tile-country-cat {
  position: relative;
  border-radius: var(--ban-radius-sm);
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--tile-slate);
  text-decoration: none;
  color: #fff;
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              transform  0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.collection-tile-country-cat:hover {
  box-shadow: var(--tile-glow);
  transform: var(--tile-lift);
}

/* Flag — large decorative center */
.collection-tile-country-cat__flag {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 48px;
  line-height: 1;
  opacity: 0.30;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.22s, transform 0.22s;
}
.collection-tile-country-cat:hover .collection-tile-country-cat__flag {
  opacity: 0.45;
  transform: scale(1.06);
}

/* Bottom scrim */
.collection-tile-country-cat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  pointer-events: none;
}

.collection-tile-country-cat__content {
  position: relative;
  z-index: 2;
  padding: 14px 16px 16px;
}

.collection-tile-country-cat__category {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}

.collection-tile-country-cat__country {
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  margin-bottom: 10px;
  font-weight: 500;
}

.collection-tile-country-cat__count {
  font-size: 11px;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.04em;
}


/* ══════════════════════════════════════════════════════════
   UNIVERSAL HOVER GLOW — applied to all v2 tiles
   ══════════════════════════════════════════════════════════ */

.banner-hero-long:hover,
.banner-tile:hover,
.promo-collection:hover,
.collection-tile:hover,
.collection-tile-brand:hover,
.collection-tile-country-cat:hover {
  box-shadow: 0 12px 36px rgba(0, 152, 219, 0.18);
  transform: translateY(-2px);
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤1024px)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root {
    --space-section: 52px;
  }

  .banner-hero-long__inner {
    padding: 36px 36px;
  }
  .banner-hero-long__visual {
    width: 260px;
    max-width: 36%;
  }

  .collection-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .collection-tile--featured {
    grid-column: span 2;
  }

  .collection-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .banner-row-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --space-section: var(--space-section-mob);
  }

  .home-v2-section {
    padding: var(--space-section-mob) 0;
  }

  /* Hero long banner: stack vertically */
  .banner-hero-long {
    min-height: auto;
    border-radius: 18px;
  }
  .banner-hero-long__inner {
    flex-direction: column;
    padding: 28px 24px;
    gap: 20px;
    align-items: flex-start;
  }
  .banner-hero-long__visual {
    width: 100%;
    max-width: 220px;
    max-height: 160px;
    align-self: center;
  }
  .banner-hero-long__headline {
    font-size: clamp(20px, 5.5vw, 28px);
  }
  .banner-hero-long__sub {
    font-size: 13px;
    margin-bottom: 20px;
  }

  /* 3-banner row: stack */
  .banner-row-3 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .banner-tile {
    min-height: 160px;
  }

  /* Promo: hide visual on mobile */
  .promo-collection__visual {
    display: none;
  }
  .promo-collection__body {
    padding: 22px 24px 22px 28px;
  }

  /* Collection grids: single column */
  .collection-grid-2,
  .collection-grid-3 {
    grid-template-columns: 1fr;
  }
  .collection-tile--featured {
    grid-column: span 1;
    min-height: 220px;
  }
  .collection-tile {
    min-height: 180px;
  }
  .collection-tile__headline {
    font-size: 15px;
  }
  .collection-tile--featured .collection-tile__headline {
    font-size: 18px;
  }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤480px)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .banner-hero-long__eyebrow { font-size: 9px; }
  .banner-hero-long__inner   { padding: 22px 18px; }
  .promo-collection__discount { font-size: 24px; }
  .promo-collection__offer    { font-size: 17px; }
  .banner-tile { min-height: 150px; }
  .collection-tile-brand { min-height: 110px; }
}