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

/* ============================================================
   BELLISSIMA brand page — scoped .be-brand
   Italská vlasová stylingová značka (Tenacta). Font Montserrat
   (volná náhrada za Proxima Nova = font oficiálního webu, který je
   komerční/placený), magenta akcent, čistá bílá.
   ============================================================ */
.be-brand {
  --be-mag: #e6007e;
  --be-mag-deep: #c00069;
  /* Font 0,2 (2026-08-25): text jen černý/bílý → ink je pravá černá. */
  --be-ink: #000000;
  /* sekundární text byl šedý #5c545a → taky černý (zadání: nic mezi tím) */
  --be-ink-soft: #000000;
  --be-line: #ece7ea;
  --be-paper: #ffffff;
  /* Klidná plocha neproduktových sekcí. 2026-08-19: na žádost revize BÍLÁ —
     růžovo-béžová (#f6e6e0) se na originálu už nevyskytuje a stránka má působit
     minimalisticky jako originál. Barevné plochy nesou jen kategorie (--be-satin)
     a malinové sekce (--be-berry). */
  --be-paper-soft: #ffffff;
  /* saténová růžová z originálu — tam je na banneru kolekce (= podkategorie);
     u nás nese sekci s kategoriemi */
  --be-satin: #f6d6db;
  /* malinově-fialová = schéma `color-accent-2` originálu (pozadí sekce, badge,
     sekundární tlačítka, bílý text). Klidnější než neonová magenta. */
  --be-berry: #9e3e76;
  --be-berry-deep: #8a3566;
  --be-font: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  /* Tloušťka velkých nadpisů. Revize 2× vrácena — originál je má v REGULARU,
     proto 400 (bylo 800 → 600 → 400). Ladí se na jednom místě. */
  --be-h-weight: 400;
  /* Tloušťka dílčích titulků (produkt, hodnota, kategorie, důvěra) — originál
     je má výrazně tenčí než náš původní bold. */
  --be-t-weight: 500;
  color: var(--be-ink); font-family: var(--be-font); line-height: 1.6;
  /* Základní pozadí stránky (dnes bílé — viz --be-paper-soft výše). Ve variantě B
     se projeví kolem kontejnerového slideshow. */
  background: var(--be-paper-soft);
}
.be-brand :where(*, *::before, *::after) { box-sizing: border-box; }
.be-brand :where(h1, h2, h3, p, ul, figure) { margin: 0; }
.be-brand :where(ul) { padding: 0; list-style: none; }
.be-brand :where(img) { max-width: 100%; display: block; }
.be-brand :where(a) { color: inherit; text-decoration: none; }

/* Rozlišení 0,1 (2026-08-25): originál bellissima.com využívá skoro celou šířku okna
   (gutter ~55 px na 1920), náš obsah byl stlačený do 1200 px. */
/* ---------- LOGO PRUH (Logo 01) ----------
   Zadání: oficiální logo vlevo nahoře v čistě bílém pruhu přes celou šířku okna,
   jen logo bez textu, pruh tenký (je to brand page, ne hlavička e-shopu).
   Logo je oficiální VEKTOR z bellissima.com (Logo_Bellissima_R-Bi.svg) — na jejich
   CDN existuje jen bílá varianta, obarvená na černou stejně, jak ji na bílém pruhu
   zobrazuje jejich vlastní hlavička. SVG = ostré v každém rozlišení.
   Logo je zarovnané na levý okraj obsahu (.be-container), takže sedí se sekcemi. */
.be-logobar { background: #fff; }
.be-logobar__inner { max-width: 1800px; margin-inline: auto; padding: 15px clamp(20px, 3vw, 56px); display: flex; align-items: center; }
.be-logobar__img { display: block; height: 26px; width: auto; }
@media (max-width: 700px) { .be-logobar__inner { padding-block: 12px; } .be-logobar__img { height: 21px; } }

.be-container { max-width: 1800px; margin-inline: auto; padding-inline: clamp(20px, 3vw, 56px); }
.be-h2 { font-family: var(--be-font); font-weight: var(--be-h-weight); font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.be-sub { margin-top: 14px; max-width: 60ch; margin-inline: auto; color: var(--be-ink-soft); font-size: 18px; text-wrap: balance; }
.be-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: clamp(0.95rem, 1.05vw, 1.1rem); letter-spacing: 0.2em; text-transform: uppercase; color: #000; }

.be-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; padding: 15px 30px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease; }
.be-btn--mag { background: var(--be-mag); color: #fff; }
.be-btn--mag:hover { background: var(--be-mag-deep); transform: translateY(-2px); }
.be-btn--ink { background: var(--be-ink); color: #fff; }
.be-btn--ink:hover { transform: translateY(-2px); }
.be-btn--outline { background: transparent; color: var(--be-ink); border-color: var(--be-ink); }
.be-btn--outline:hover { background: var(--be-ink); color: #fff; }
.be-btn--light { background: #fff; color: #000; }
.be-btn--light:hover { transform: translateY(-2px); }
.be-btn--ghostlight { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.be-btn--ghostlight:hover { background: #fff; color: #000; }

/* ===================== HERO (light, produkt vpravo) ===================== */
.be-hero { background: var(--be-paper-soft); overflow: hidden; }
.be-hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(28px, 5vw, 72px); min-height: clamp(500px, 62vh, 640px); }
@media (max-width: 900px) { .be-hero__inner { grid-template-columns: 1fr; text-align: center; } }
.be-hero__content { padding: clamp(48px, 7vw, 96px) 0; max-width: 560px; }
.be-hero__logo { font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--be-ink); }
.be-brand .be-hero__title { margin-top: 18px; font-weight: var(--be-h-weight); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
.be-hero__title em { color: #000; font-style: normal; }
.be-brand .be-hero__lead { margin-top: 18px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--be-ink-soft); max-width: 44ch; }
@media (max-width: 900px) { .be-hero__lead { margin-inline: auto; } }
.be-hero__cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) { .be-hero__cta { justify-content: center; } }
.be-hero__stats { margin-top: 38px; display: flex; gap: clamp(24px, 4vw, 52px); flex-wrap: wrap; }
@media (max-width: 900px) { .be-hero__stats { justify-content: center; } }
.be-hero__stat-num { display: block; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.be-hero__stat-label { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--be-ink-soft); }
.be-hero__media { align-self: stretch; position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.be-hero__media::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(230,0,126,.16), rgba(230,0,126,0) 70%); }
.be-hero__media img { position: relative; max-height: 78%; width: auto; object-fit: contain; }

/* ===================== HERO SLIDESHOW (varianta B, .be-hs) ===================== */
/* Full-bleed hero přes celou šířku okna (Rozlišení 0,1) — jako na originálu.
   Dřívější cap 1000 px byl kvůli 902px lifestyle bannerům, které by se upscalovaly.
   Proto oba slidy nesou grafiku ostrou v každé šířce (gradient + produkt na disku);
   až bude k dispozici velký čistý banner (min. 1920 px, bez zapečeného textu),
   jde fotoslide vrátit — asset twist-and-style.jpg v repu zůstává. */
.be-hs { position: relative; overflow: hidden; background: var(--be-paper-soft); margin: 0; border-radius: 0; width: 100%; height: clamp(300px, 32vw, 620px); }
/* Výška pevná, NE aspect-ratio: aspect-ratio + max-height by box zúžil, aby udržel
   poměr, a hero by nešel na celou šířku (změřeno: 1240 z 1920 px). */
.be-hs__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.be-hs__slide.is-active { opacity: 1; }
.be-hs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim drží čitelnost bílého textu nad fotkou, ale místo černé má malinový podtón
   (originál černou používá minimálně) — rgba z --be-berry #9e3e76. */
.be-hs__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(90,26,62,.52) 0%, rgba(90,26,62,.16) 40%, rgba(90,26,62,0) 70%); }
.be-hs__overlay { position: absolute; left: 0; right: 0; bottom: 0; max-width: 1800px; margin-inline: auto; padding: clamp(22px,4.5vw,60px) clamp(20px,3vw,56px); }
.be-hs__overlay-inner { max-width: 600px; color: #fff; }
.be-hs .be-hs__eyebrow { display: block; color: #fff; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.be-brand .be-hs__title { color: #fff; font-family: var(--be-font); font-weight: var(--be-h-weight); font-size: clamp(27px,4.2vw,50px); line-height: 1.05; letter-spacing: -.02em; margin: .3em 0 .12em; text-wrap: balance; }
.be-hs__sub { color: #fff; font-size: clamp(15px,1.6vw,19px); margin: 0 0 1.05em; }
.be-hs__more { display: inline-flex; align-items: center; gap: .45em; color: #fff; font-weight: 700; font-size: clamp(14px,1.5vw,16px); text-decoration: none; letter-spacing: .02em; }
.be-hs__more::after { content: "\203A"; font-size: 1.35em; line-height: 1; transform: translateY(-1px); }
.be-hs__more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Produktový slide (magenta plocha) — pro skupiny, ke kterým oficiál nemá velký
   lifestyle banner. Produkt zůstává na BÍLÉM disku (pravidlo: produkty na bílé). */
/* Malinová (ne neonová magenta) — stejné schéma jako spotlight sekce. */
.be-hs__slide--product { background: linear-gradient(125deg, var(--be-berry) 0%, var(--be-berry-deep) 100%); }
.be-hs__pinner { position: absolute; inset: 0; max-width: 1800px; margin-inline: auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(16px,3vw,40px); padding: clamp(22px,4vw,52px) clamp(20px,3vw,56px); }
@media (max-width: 700px) { .be-hs__pinner { grid-template-columns: 1fr; } .be-hs__pmedia { display: none; } }
.be-hs__ptext { color: #fff; }
.be-hs__slide--product .be-hs__eyebrow { color: #fff; }
.be-hs__slide--product .be-hs__sub { color: #fff; }
/* Disk roste se šířkou okna — po zesirokoúhlení hero (Rozlišení 0,1) by 300px
   produkt nechával uprostřed prázdno. */
.be-hs__pmedia { position: relative; justify-self: center; width: min(clamp(240px, 21vw, 420px), 92%); aspect-ratio: 1/1; background: #fff; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 22px 46px rgba(0,0,0,.24); }
.be-hs__pmedia img { width: 82%; height: 82%; object-fit: contain; }
.be-hs__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(90,26,62,.42); 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,.18); }
.be-hs__arrow:hover { background: rgba(90,26,62,.7); }
.be-hs__arrow--prev { left: clamp(10px,1.5vw,22px); } .be-hs__arrow--next { right: clamp(10px,1.5vw,22px); }
.be-hs__arrow svg { width: 22px; height: 22px; }
.be-hs__dots { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 10px; }
.be-hs__dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(90,26,62,.3); cursor: pointer; transition: background .2s, transform .2s; }
.be-hs__dot.is-active { background: var(--be-berry); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce){ .be-hs__slide { transition: none; } }

/* ===================== RANGE ===================== */
.be-range { background: var(--be-paper); padding: clamp(44px, 6vw, 88px) 0; }
.be-range__head { text-align: center; max-width: 680px; margin-inline: auto; }
.be-brand .be-range__title { margin-top: 14px; }
.be-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) { .be-range__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .be-range__grid { grid-template-columns: 1fr; } }
.be-card { display: flex; flex-direction: column; border: 1px solid var(--be-line); border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.be-card:hover { box-shadow: 0 16px 40px rgba(230,0,126,.12); transform: translateY(-4px); }
.be-card__media { aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 18px; }
.be-card__media img { width: 100%; height: 100%; object-fit: contain; }
.be-card__body { padding: 8px 20px 22px; display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--be-line); }
.be-card__tag { margin-top: 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #000; font-weight: 600; }
.be-brand .be-card__name { font-weight: var(--be-t-weight); font-size: 1.05rem; line-height: 1.25; min-height: 2.5em; margin-top: 4px; }
.be-card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.be-card__price { font-weight: 600; font-size: 1.18rem; }
.be-card__cta { font-weight: 600; font-size: 14px; color: #000; }
.be-range__more { margin-top: clamp(30px, 4vw, 44px); text-align: center; }

/* ===================== VALUES ===================== */
.be-values { background: var(--be-paper-soft); padding: clamp(44px, 6vw, 88px) 0; }
.be-values__head { text-align: center; max-width: 680px; margin-inline: auto; }
.be-brand .be-values__title { margin-top: 14px; }
.be-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) { .be-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .be-values__grid { grid-template-columns: 1fr; } }
.be-value__icon { width: 46px; height: 46px; color: var(--be-mag); }
.be-value__icon svg { width: 100%; height: 100%; }
.be-brand .be-value__title { margin-top: 16px; font-weight: var(--be-t-weight); font-size: 1.12rem; }
.be-brand .be-value__text { margin-top: 9px; color: var(--be-ink-soft); font-size: 15.5px; line-height: 1.55; }

/* ===================== DIFFON SPOTLIGHT (magenta band) ===================== */
.be-spot { position: relative; background: linear-gradient(120deg, var(--be-berry) 0%, var(--be-berry-deep) 100%); color: #fff; overflow: hidden; }
/* v malinových sekcích nechceme neonový akcent ani na tlačítku */
.be-spot .be-btn--light,
.be-cta .be-btn--light { color: #000; }
/* Honeycomb tečkový vzor (evokuje díry difuzéru) + měkký reflektor vpravo. Jen na magentě. */
.be-spot::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.11) 1.8px, transparent 2.3px); background-size: 26px 26px; opacity: .55; pointer-events: none; }
.be-spot::after { content: ""; position: absolute; top: -25%; right: -12%; width: 62%; height: 150%; background: radial-gradient(circle, rgba(255,255,255,.20), transparent 62%); pointer-events: none; }
.be-spot__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 64px); }
@media (max-width: 860px) { .be-spot__inner { grid-template-columns: 1fr; } }
.be-spot__text { padding: clamp(56px, 8vw, 104px) 0; max-width: 480px; }
.be-spot__text .be-eyebrow { color: #fff; }
.be-brand .be-spot__title { margin-top: 12px; font-weight: var(--be-h-weight); font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.be-brand .be-spot__lead { margin-top: 14px; color: #fff; }
.be-spot__pills { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.be-spot__pills span { font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.30); padding: 7px 14px; border-radius: 999px; }
.be-spot__cta { margin-top: 26px; }
/* Kruhový „spotlight" disk — produkt na čistě bílé kruhové ploše (evokuje kulatý Diffon). */
.be-spot__media { align-self: center; display: flex; align-items: center; justify-content: center; padding: clamp(34px, 5vw, 68px) 0; }
.be-spot__disc { position: relative; width: min(440px, 84%); aspect-ratio: 1 / 1; background: #fff; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 34px 74px rgba(0,0,0,.34), 0 0 0 14px rgba(255,255,255,.12); }
.be-spot__disc img { width: 80%; height: 80%; object-fit: contain; }

/* ===================== CATEGORIES (produkt-dlaždice) ===================== */
.be-cats { background: var(--be-satin); padding: clamp(44px, 6vw, 88px) 0; }
.be-cats__head { text-align: center; max-width: 680px; margin-inline: auto; }
.be-brand .be-cats__title { margin-top: 14px; }
.be-cats__grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 860px) { .be-cats__grid { grid-template-columns: repeat(2, 1fr); } }
/* Editoriální dlaždice: lifestyle foto přes celou plochu + spodní scrim + bílý název. */
.be-cat { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; text-decoration: none; box-shadow: 0 6px 20px rgba(28,20,24,.08); transition: box-shadow .25s ease, transform .25s ease; }
.be-cat:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(230,0,126,.16); }
.be-cat__media { position: absolute; inset: 0; z-index: 0; }
.be-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.be-cat:hover .be-cat__media img { transform: scale(1.06); }
.be-cat::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(28,20,24,.64) 0%, rgba(28,20,24,.14) 44%, rgba(28,20,24,0) 70%); }
.be-cat__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(14px,1.5vw,22px); }
.be-brand .be-cat__name { display: block; color: #fff; font-weight: 600; font-size: clamp(1.05rem,1.5vw,1.28rem); letter-spacing: -.01em; }
.be-cat__go { display: inline-flex; align-items: center; gap: .38em; margin-top: 5px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: #fff; opacity: .94; }
.be-cat__go::after { content: "\2192"; transition: transform .25s ease; }
.be-cat:hover .be-cat__go::after { transform: translateX(4px); }

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

/* ===================== CTA ===================== */
/* Závěrečný pás: dřív černý (--be-ink). Originál černou používá minimálně, výrazné
   sekce nese schéma accent-2 = malinová. */
.be-cta { background: var(--be-berry); color: #fff; }
.be-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(48px, 6vw, 76px) 0; flex-wrap: wrap; }
.be-brand .be-cta__title { color: #fff; font-weight: var(--be-h-weight); font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.02em; }
.be-brand .be-cta__lead { margin-top: 10px; color: #fff; max-width: 52ch; }

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