@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700&display=swap');

/* ============================================================
   MELICONI brand page — scoped .ml-brand
   Italské příslušenství pro domácí zábavu. Červený akcent,
   geometrický sans (Poppins ~ sofia-pro), čistá bílá.
   CSS jde přes FTP (/shop-data/campaign/meliconi-brand.css).
   ============================================================ */

.ml-brand {
  --ml-red: #d81e28;
  --ml-red-deep: #b3141d;
  --ml-ink: #1a1a1c;
  --ml-ink-soft: #55565a;
  --ml-line: #e7e7ea;
  --ml-paper: #ffffff;
  --ml-paper-warm: #f6f5f3;
  --ml-font-display: 'Sofia Sans', 'Segoe UI', system-ui, sans-serif;
  --ml-font-body: 'Mulish', 'Segoe UI', system-ui, sans-serif;
  color: var(--ml-ink);
  font-family: var(--ml-font-body);
  line-height: 1.6;
}
.ml-brand :where(*, *::before, *::after) { box-sizing: border-box; }
.ml-brand :where(h1, h2, h3, p, ul, figure) { margin: 0; }

/* Šablona kategorie vykresluje nad obsahem vlastní H1 s názvem stránky — hero má svůj
   vlastní H1, takže je to duplicitní nadpis (i pro SEO). Živě měřeno 2026-08-25: 38 px. */
body:has(.ml-brand-wrapper) h1.ph-main,
body:has(.ml-brand-wrapper) h1.ph-page { display: none; }
.ml-brand :where(ul) { padding: 0; list-style: none; }
.ml-brand :where(img) { max-width: 100%; display: block; }
.ml-brand :where(a) { color: inherit; text-decoration: none; }

.ml-container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.ml-h2 { font-family: var(--ml-font-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.ml-sub { margin-top: 14px; max-width: 60ch; margin-inline: auto; color: var(--ml-ink-soft); font-size: 18px; text-wrap: balance; }
/* ===================== PŘÍBĚH ZNAČKY =====================
   Text vlevo, ověřená časová osa vpravo (meliconi.com/en/company). Bez fotky:
   k roku 1967 a chlebníku nemáme historický vizuál a produktová fotka by lhala. */
.ml-story { background: var(--ml-paper); padding: clamp(56px, 7vw, 96px) 0; }
.ml-story__top { max-width: 760px; }
.ml-brand .ml-story__title { margin-top: 12px; }
.ml-story__grid { margin-top: clamp(28px, 3.5vw, 46px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ml-brand .ml-story__lead { font-size: clamp(17px, 1.25vw, 19px); color: var(--ml-ink); line-height: 1.62; margin: 0; }
.ml-brand .ml-story__text { font-size: 16.5px; color: var(--ml-ink-soft); line-height: 1.62; margin: 18px 0 0; }
.ml-story__time { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ml-mile { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--ml-line); }
.ml-mile:first-child { border-top: 0; padding-top: 0; }
.ml-mile__y { font-family: var(--ml-font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; color: var(--ml-red); }
.ml-mile__t { font-size: 15.5px; line-height: 1.55; color: var(--ml-ink-soft); }
@media (max-width: 900px) {
  .ml-story__grid { grid-template-columns: 1fr; }
  .ml-mile { grid-template-columns: 62px 1fr; gap: 12px; }
}

.ml-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ml-font-display); font-weight: 700; font-size: clamp(0.95rem, 1.05vw, 1.1rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ml-red); }

.ml-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ml-font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; padding: 15px 30px; border-radius: 4px; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease; }
.ml-btn--red { background: var(--ml-red); color: #fff; }
.ml-btn--red:hover { background: var(--ml-red-deep); transform: translateY(-2px); }
.ml-btn--ink { background: var(--ml-ink); color: #fff; }
.ml-btn--ink:hover { transform: translateY(-2px); }
.ml-btn--outline { background: transparent; color: var(--ml-ink); border-color: var(--ml-ink); }
.ml-btn--outline:hover { background: var(--ml-ink); color: #fff; }
.ml-btn--ghostlight { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.ml-btn--ghostlight:hover { background: #fff; color: var(--ml-ink); }
.ml-btn--light { background: #fff; color: var(--ml-ink); }
.ml-btn--light:hover { transform: translateY(-2px); }

/* ===================== HERO ===================== */
.ml-hero { position: relative; background: var(--ml-ink); overflow: hidden; }
.ml-hero__media { position: absolute; inset: 0; }
.ml-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ml-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,22,.86) 0%, rgba(20,20,22,.62) 42%, rgba(20,20,22,.15) 78%); }
.ml-hero__inner { position: relative; z-index: 2; min-height: clamp(520px, 66vh, 680px); display: flex; align-items: center; padding: clamp(56px, 8vw, 104px) 0; }
.ml-hero__content { max-width: 620px; color: #fff; text-align: left; }
.ml-hero__logo { font-family: var(--ml-font-display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: 0.16em; color: #fff; }
.ml-hero__logo b { color: var(--ml-red); }
.ml-brand .ml-hero__title { margin-top: 20px; font-family: var(--ml-font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.03; letter-spacing: -0.03em; color: #fff; }
.ml-hero__title em { color: var(--ml-red); font-style: normal; }
.ml-brand .ml-hero__lead { margin-top: 20px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: rgba(255,255,255,.86); max-width: 48ch; }
.ml-hero__cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.ml-hero__stats { margin-top: 40px; display: flex; gap: clamp(24px, 4vw, 52px); flex-wrap: wrap; }
.ml-hero__stat-num { display: block; font-family: var(--ml-font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); color: #fff; }
.ml-hero__stat-label { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* ===================== HERO SLIDESHOW (.ml-hs) ===================== */
.ml-hs { position: relative; overflow: hidden; height: clamp(520px, 70vh, 700px); background: var(--ml-ink); }
.ml-hs__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.ml-hs__slide.is-active { opacity: 1; }
.ml-hs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-hs__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,22,.86) 0%, rgba(20,20,22,.58) 44%, rgba(20,20,22,.12) 80%); }
.ml-hs__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.ml-hs__text { max-width: 620px; color: #fff; text-align: left; }
.ml-hs__logo { font-family: var(--ml-font-display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: 0.16em; color: #fff; }
.ml-hs__logo b { color: var(--ml-red); }
.ml-hs__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--ml-font-display); font-weight: 700; font-size: clamp(0.95rem, 1.05vw, 1.1rem); letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.ml-hs__eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--ml-red); }
.ml-brand .ml-hs__title { margin-top: 14px; font-family: var(--ml-font-display); font-weight: 800; font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.03; letter-spacing: -0.03em; color: #fff; }
.ml-brand .ml-hs__lead { margin-top: 16px; font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: rgba(255,255,255,.85); max-width: 46ch; }
.ml-hs__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.ml-hs__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(20,20,22,.45); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.ml-hs__arrow:hover { background: rgba(20,20,22,.7); }
.ml-hs__arrow--prev { left: clamp(12px, 2vw, 28px); }
.ml-hs__arrow--next { right: clamp(12px, 2vw, 28px); }
.ml-hs__arrow svg { width: 22px; height: 22px; }
.ml-hs__dots { position: absolute; bottom: 22px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 10px; }
.ml-hs__dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1.5px rgba(20,20,22,.35); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.ml-hs__dot.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 900px) {
  .ml-hs__scrim { background: linear-gradient(180deg, rgba(20,20,22,.5) 0%, rgba(20,20,22,.82) 100%); }
  .ml-hs__arrow { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ml-hs__slide { transition: none; } }

/* ===================== RANGE (produktové karty) ===================== */
.ml-range { background: var(--ml-paper); padding: clamp(44px, 6vw, 88px) 0 clamp(56px, 8vw, 96px); }
.ml-range__head { text-align: center; max-width: 680px; margin-inline: auto; }
.ml-brand .ml-range__title { margin-top: 14px; }
.ml-range__grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 900px) { .ml-range__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ml-range__grid { grid-template-columns: 1fr; } }
.ml-card { display: flex; flex-direction: column; border: 1px solid var(--ml-line); border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.ml-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.1); transform: translateY(-4px); }
.ml-card__media { aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 18px; }
.ml-card__media img { width: 100%; height: 100%; object-fit: contain; }
.ml-card__body { padding: 8px 20px 22px; display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--ml-line); }
.ml-brand .ml-card__name { font-family: var(--ml-font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.25; min-height: 2.5em; margin-top: 14px; }
.ml-card__tag { margin-top: 6px; font-size: 14px; color: var(--ml-ink-soft); }
.ml-card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.ml-card__price { font-family: var(--ml-font-display); font-weight: 800; font-size: 1.16rem; }
.ml-card__cta { font-family: var(--ml-font-display); font-weight: 600; font-size: 14px; color: var(--ml-red); }
.ml-range__more { margin-top: clamp(30px, 4vw, 44px); text-align: center; }

/* ===================== VALUES ===================== */
.ml-values { background: var(--ml-paper-warm); padding: clamp(44px, 6vw, 88px) 0; }
.ml-values__head { text-align: center; max-width: 680px; margin-inline: auto; }
.ml-brand .ml-values__title { margin-top: 14px; }
.ml-values__grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 36px); }
@media (max-width: 860px) { .ml-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ml-values__grid { grid-template-columns: 1fr; } }
.ml-value__icon { width: 46px; height: 46px; color: var(--ml-red); }
.ml-value__icon svg { width: 100%; height: 100%; }
.ml-brand .ml-value__title { margin-top: 16px; font-family: var(--ml-font-display); font-weight: 600; font-size: 1.12rem; }
.ml-brand .ml-value__text { margin-top: 9px; color: var(--ml-ink-soft); font-size: 15.5px; line-height: 1.55; }

/* ===================== BAND (sluchátka) ===================== */
.ml-band { position: relative; background: var(--ml-ink); overflow: hidden; }
.ml-band__media { position: absolute; inset: 0; }
.ml-band__media img { width: 100%; height: 100%; object-fit: cover; }
.ml-band__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,22,.8) 0%, rgba(20,20,22,.4) 55%, rgba(20,20,22,0) 100%); }
.ml-band__inner { position: relative; z-index: 2; padding: clamp(64px, 10vw, 128px) 0; max-width: 560px; color: #fff; }
.ml-brand .ml-band__title { margin-top: 14px; font-family: var(--ml-font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.ml-brand .ml-band__lead { margin-top: 16px; color: rgba(255,255,255,.85); max-width: 44ch; }
.ml-band__cta { margin-top: 28px; }

/* ===================== WORLDS (foto dlaždice) ===================== */
/* ===== DOMÁCÍ KINO (.ml-cine) — atmosférická sekce s oficiálním pozadím
   (rodina u televize, mymemo-bg z meliconi.com). Nahrazuje bestseller karty,
   které duplikovaly Top 10 grid. Foto má tmavou spodní část → text dole. ===== */
.ml-cine { position: relative; overflow: hidden; background: #16120f; min-height: clamp(480px, 56vw, 640px); display: flex; align-items: flex-end; }
.ml-cine__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ml-cine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,12,9,.88) 0%, rgba(15,12,9,.35) 45%, rgba(15,12,9,.08) 70%); }
.ml-cine__inner { position: relative; z-index: 2; width: 100%; text-align: center; padding-top: clamp(220px, 30vw, 340px); padding-bottom: clamp(44px, 6vw, 72px); }
.ml-cine__eyebrow { color: #fff; opacity: .92; }
.ml-brand .ml-cine__title { margin-top: 12px; color: #fff; }
.ml-cine__title em { font-style: normal; color: var(--ml-red); }
.ml-brand .ml-cine__lead { margin: 14px auto 0; max-width: 56ch; color: rgba(255,255,255,.88); font-size: clamp(15px, 1.6vw, 18px); }
.ml-cine__cta { margin-top: 26px; }

.ml-worlds { background: var(--ml-paper); padding: clamp(44px, 6vw, 88px) 0; }
.ml-worlds__head { text-align: center; max-width: 680px; margin-inline: auto; }
.ml-brand .ml-worlds__title { margin-top: 14px; }
.ml-worlds__grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 720px) { .ml-worlds__grid { grid-template-columns: 1fr; } }
.ml-worlds__tile { position: relative; min-height: 300px; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.ml-worlds__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.ml-worlds__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20,20,22,.82) 0%, rgba(20,20,22,.3) 55%, rgba(20,20,22,.05) 100%); }
.ml-worlds__tile:hover img { transform: scale(1.05); }
.ml-worlds__meta { padding: 26px; }
.ml-brand .ml-worlds__name { font-family: var(--ml-font-display); font-weight: 700; font-size: 1.4rem; }
.ml-worlds__go { display: inline-flex; margin-top: 8px; font-family: var(--ml-font-display); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }

/* ===================== TRUST ===================== */
.ml-trust { background: var(--ml-paper-warm); padding: clamp(40px, 5vw, 72px) 0; }
.ml-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 760px) { .ml-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ml-trust__grid { grid-template-columns: 1fr; } }
.ml-trust__item { display: flex; align-items: flex-start; gap: 14px; }
.ml-trust__icon { flex: none; width: 30px; height: 30px; color: var(--ml-red); }
.ml-trust__icon svg { width: 100%; height: 100%; }
.ml-brand .ml-trust__t { font-family: var(--ml-font-display); font-weight: 600; font-size: 16px; }
.ml-brand .ml-trust__x { margin-top: 5px; font-size: 14.5px; color: var(--ml-ink-soft); line-height: 1.5; }

/* ===================== CTA ===================== */
.ml-cta { background: var(--ml-red); color: #fff; }
.ml-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(48px, 6vw, 76px) 0; flex-wrap: wrap; }
.ml-brand .ml-cta__title { color: #fff; font-family: var(--ml-font-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.02em; }
.ml-brand .ml-cta__lead { margin-top: 10px; color: rgba(255,255,255,.9); max-width: 52ch; }

/* ===================== SHOP HEADING ===================== */
.ml-shop { background: var(--ml-paper); padding: clamp(48px, 6vw, 80px) 0 clamp(24px, 4vw, 40px); text-align: center; }
.ml-shop .ml-eyebrow { justify-content: center; }
.ml-brand .ml-shop__title { margin-top: 14px; }
.ml-shop .ml-sub { margin-inline: auto; }
.ml-shop__arrow { display: block; margin-top: 22px; font-size: 26px; color: var(--ml-red); animation: ml-bounce 1.8s infinite; }
@keyframes ml-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

@media (max-width: 900px) {
  .ml-hero__scrim { background: linear-gradient(180deg, rgba(20,20,22,.55) 0%, rgba(20,20,22,.8) 100%); }
  .ml-band__scrim { background: linear-gradient(180deg, rgba(20,20,22,.4) 0%, rgba(20,20,22,.82) 100%); }
  .ml-cta__inner { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   ŠÍŘKA — prolomení Upgates description wrapperu (.max-w-xl)
   ============================================================
   Brand HTML sedí v shellovém kontejneru `.max max-w-xl text` s max-width:1140px,
   takže full-bleed hero i barevné pásy byly UŽŠÍ (1140 px) než produktový výpis
   a než ostatní brand pages (Top Model / Severin měří 1440 px). Cap rušíme jen pro
   wrapper s brand obsahem; tenhle CSS soubor se přes `custom_style` načítá pouze
   na téhle stránce, takže jinde nic neovlivní.
   Vnitřní `ml-container` (1200 px) zůstává — to je záměrná čtecí šířka textu.
   Dva selektory zaměrně: shell může mít cap na `.max-w-xl` i na `.max.max-w-xl.text`
   (3 třídy = vyšší specificita, přebila by :has() s jednou třídou).
   Měřeno 2026-08-25: před opravou 1140 px, po ní 1440 px jako Top Model. */
.max-w-xl:has(.ml-brand-wrapper),
.max.max-w-xl.text:has(.ml-brand-wrapper) { max-width: none; margin-left: 0; margin-right: 0; }


/* ============================================================
   ŠÍŘKA sekcí s position:relative (full-bleed hero, tmavé pásy)
   ============================================================
   Shell e-shopu zužuje sekce, které mají `position: relative`, na shrink-to-fit:
   naměřeno 2026-08-25 shodně u Hurley i Tesly **1238 px z 1440** (viewport 1600),
   zatímco sousední `position: static` sekce vyplnily celých 1440. Příčinu v šabloně
   nešlo dohledat (CSSOM je z prohlížeče blokovaný, žádné pravidlo šířky na element
   nesedí), ale explicitní `width: 100%` to spolehlivě ruší — ověřeno měřením:
   `width:auto` → 1238, `width:100%` → 1440. */
.ml-hero,
.ml-hs,
.ml-band,
.ml-cine { width: 100%; }