@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@800&display=swap");

/* =========================================================
   HelloDog — homepage 2026, verze pro Shoptet
   Vygenerováno z css/hellodog.css + css/hellodog-v2.css.

   - Vše je uzavřené v #hdhp (obal obsahu v banneru), takže
     styly nesahají na hlavičku, patičku ani ostatní stránky.
     Soubor se proto může načítat globálně v záhlaví. Jediná
     výjimka je na konci souboru: na stránce s #hdhp schová
     newsletter Shoptetu, aby tam nebyl dvakrát.
   - Shoptet má html { font-size: 10px }, design počítá s 16px.
     Proto jsou všechny rem hodnoty vynásobené 1,6
     (1rem z designu = 1.6rem tady). Media queries zůstávají,
     ty se v rem počítají vždy z 16px.
   - Kolizní třídy se Shoptetem mají předponu hd-
     (.hd-btn, .hd-carousel, .hd-stars).
   - Exo 2 v řezu 800 Shoptet nenačítá, proto @import nahoře.
   ========================================================= */

/* ######## css/hellodog.css ######## */

/* ---------- Tokens ---------- */

#hdhp {
  /* Barvy — převzato z živého webu (Shoptet custom properties) */
  --c-ink:          #161616;
  --c-ink-soft:     #5c5450;
  --c-white:        #ffffff;

  /* Hlavní hnědá = --main-brown ze starého webu. Je světlá (kontrast
     na bílé jen 1,9:1), takže slouží jako VÝPLŇ a text na ní je tmavý. */
  --c-brown:        #cebaa4;  /* --main-brown — výplně (tlačítka, odznaky) */
  --c-brown-hover:  #bfa88c;  /* tmavší tan pro hover výplní */
  /* Text, ikony a stavy na světlém podkladu — tan by byl nečitelný.
     Stejná rodina odstínu, kontrast na bílé 4,6:1. */
  --c-brown-dark:   #8a6f52;
  --c-brown-warm:   #cd9934;  /* --color-secondary-hover */
  --c-tan:          #cdb79e;  /* --primary-brown */
  --c-beige:        #f6f2ef;  /* --light-beige */
  --c-gray:         #f9f9f9;  /* --color-tertiary */
  --c-footer-text:  #cfc8c0;  /* světlý text na tmavé patičce */
  --c-pink:         #d6b4c7;
  --c-blue:         #b1bcd3;

  --c-line:         color-mix(in srgb, var(--c-tan) 45%, transparent);
  --c-star:         #f0a92a;

  /* Typografie */
  --font-body:  "Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-head:  "Exo 2", var(--font-body);

  /* Spacing */
  --space-3xs: 0.4rem;
  --space-2xs: 0.8rem;
  --space-xs:  1.2rem;
  --space-sm:  1.6rem;
  --space-md:  2.4rem;
  --space-lg:  4rem;
  --space-xl:  clamp(4rem, 5vw, 6.4rem);
  /* Jednotný svislý rytmus sekcí — bílých i barevných. */
  --space-section: clamp(4.8rem, 6vw, 8rem);

  /* Layout */
  --container: 120rem;          /* 1200px */
  --gutter:    clamp(1.6rem, 4vw, 3.2rem);

  /* Radius */
  --r-sm: 0.8rem;
  --r-md: 1.4rem;
  --r-lg: 2.4rem;
  --r-pill: 100rem;

  /* Stín */
  --shadow-sm: 0 1px 2px rgb(22 22 22 / .06), 0 2px 8px rgb(22 22 22 / .04);
  --shadow-md: 0 2px 6px rgb(22 22 22 / .08), 0 12px 32px rgb(22 22 22 / .10);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */

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

#hdhp {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

#hdhp h1,
#hdhp h2,
#hdhp h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

#hdhp p { margin: 0; text-wrap: pretty; }

#hdhp img,
#hdhp svg { display: block; max-inline-size: 100%; }

#hdhp img { block-size: auto; }

#hdhp ul { margin: 0; padding: 0; list-style: none; }

#hdhp a { color: inherit; text-decoration: none; }

#hdhp button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

#hdhp input { font: inherit; }

/* Atribut hidden musí přebít jakýkoli display z autorských stylů —
   bez toho se skryté panely dál vykreslují. */

#hdhp [hidden] { display: none !important; }

/* ---------- Utility ---------- */

#hdhp .shell {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

#hdhp .i {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

#hdhp .vh {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#hdhp :where(a, button, input):focus-visible {
  outline: 2px solid var(--c-brown-dark);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- Tlačítka ---------- */

#hdhp .hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding-block: 1.2rem;
  padding-inline: 2.4rem;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}

/* Jednotné chování napříč variantami: při najetí tmavá výplň se světlým
   textem. Čitelné na bílé, béžové, šedé i hnědé — proto žádný posun. */

#hdhp .hd-btn:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

#hdhp .hd-btn--primary {
  background: var(--c-brown);
  border-color: var(--c-brown);
  color: var(--c-ink);        /* na světlé hnědé je bílá nečitelná */
}

#hdhp .hd-btn--light {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-ink);
}

#hdhp .hd-btn--ghost {
  background: color-mix(in srgb, var(--c-white) 88%, transparent);
  border-color: color-mix(in srgb, var(--c-ink) 12%, transparent);
  color: var(--c-ink);
  backdrop-filter: blur(6px);
}

/* =========================================================
   HERO CAROUSEL
   ========================================================= */

/* Stejný horní odstup jako .section — dole nic, protože hned navazuje
   trust bar, který k heru vizuálně patří. */

/* Stejný horní odstup jako .section — dole nic, protože hned navazuje
   trust bar, který k heru vizuálně patří. */

#hdhp .hero { padding-block-start: var(--space-section); }

#hdhp .hd-carousel {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--c-beige);
  overflow: hidden;
}

/* Pozn.: scroll-behavior záměrně NENÍ v CSS — plynulost řídí JS přes
   scrollTo({behavior}), aby se obě animace navzájem nerušily. */

#hdhp .hd-carousel__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

#hdhp .hd-carousel__viewport::-webkit-scrollbar { display: none; }

/* --- Slide: split — vlevo text, vpravo fotka --- */

#hdhp .slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  isolation: isolate;
  min-block-size: clamp(33.6rem, 34vw, 43.2rem);
  background: var(--c-beige);
}

/* Musí být position: relative — obrázek uvnitř je absolutní, aby buňku
   vždy vyplnil. S block-size:100% na auto-výšce rodiče by si držel vlastní
   poměr a při delším textu by vedle něj prosvítalo pozadí panelu. */

#hdhp .slide__media {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;      /* buňka vždy na plnou výšku řádku */
  overflow: hidden;
}

/* --pos: výřez fotky pro každý slide (kde je produkt/pes).
   --zoom je volitelné dopřiblížení, běžně se nepoužívá.

   Deklarace níže jsou schválně "opevněné" proti cizím stylům
   (Shoptet šablona má vlastní pravidla pro img). Bez nich se fotka
   scvrkne na vlastní poměr a kolem ní prosvítá béžový panel. */

#hdhp .slide__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 100%;    /* přebije cizí width:auto        */
  min-block-size: 100%;     /* přebije cizí height:auto       */
  max-inline-size: none;    /* přebije img{max-width:100%}    */
  max-block-size: none;
  margin: 0;                /* zabrání centrování přes margin:auto */
  object-fit: cover;
  object-position: var(--pos, center);
  scale: var(--zoom, 1);
}

#hdhp .slide__body {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  align-self: center;
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  padding: clamp(2.4rem, 3.2vw, 4.8rem);
  /* místo pro ovládací cluster dole */
  padding-block-end: clamp(7.6rem, 8vw, 10.4rem);
}

#hdhp .slide__title {
  font-size: clamp(2.4rem, 3vw, 3.8rem);
  letter-spacing: -0.015em;
}

/* 30ch tlačilo text banneru do pěti krátkých řádků, i když sloupec
   měl dvojnásobek místa. */

#hdhp .slide__text {
  font-size: clamp(1.6rem, 1.35vw, 1.8rem);
  color: var(--c-ink-soft);
  max-inline-size: 42ch;
  text-wrap: balance;
}

#hdhp .slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-2xs);
}

/* --- Ovládání: jeden cluster vlevo dole v textovém panelu --- */

#hdhp .hd-carousel__controls {
  position: absolute;
  inset-block-end: clamp(2rem, 3vw, 3.6rem);
  inset-inline-start: clamp(2.4rem, 3.2vw, 4.8rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

#hdhp .hd-carousel__arrow {
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), scale .2s var(--ease);
}

#hdhp .hd-carousel__arrow:hover {
  color: var(--c-ink);
  background: var(--c-brown);
  border-color: var(--c-brown);
  scale: 1.06;
}

/* --- Tečky --- */

#hdhp .hd-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-inline: 0.6rem;
}

#hdhp .hd-carousel__dot {
  inline-size: 0.8rem;
  block-size: 0.8rem;
  padding: 0;
  background: color-mix(in srgb, var(--c-ink) 28%, transparent);
  border-radius: var(--r-pill);
  transition: inline-size .28s var(--ease), background-color .28s var(--ease);
}

#hdhp .hd-carousel__dot[aria-selected="true"] {
  inline-size: 2.4rem;
  background: var(--c-brown-dark);
}

@media (max-width: 48rem) {
  #hdhp .slide {
    grid-template-columns: 1fr;
    min-block-size: 0;
  }

  /* Výška z procentního paddingu, ne z aspect-ratio. Safari u položky
     gridu s aspect-ratio a jen absolutním obsahem nenatáhne šířku na
     buňku — box se scvrkl a fotka v něm byla jako miniatura v rohu.
     Procentní padding se počítá ze šířky buňky všude stejně. */

  #hdhp .slide__media {
    grid-column: 1;
    grid-row: 1;
    inline-size: 100%;
    block-size: 0;
    padding-block-end: 62.5%;   /* poměr 16 : 10 */
  }

  #hdhp .slide__body {
    grid-row: 2;
    padding-block-end: 7.2rem;
  }

  #hdhp .slide__text { max-inline-size: none; }

  #hdhp .hd-carousel__controls {
    inset-block-end: 1.6rem;
    inset-inline-start: clamp(2.4rem, 3.2vw, 4.8rem);
  }

  #hdhp .hd-carousel__arrow { inline-size: 3.6rem; block-size: 3.6rem; }
}

#hdhp .hd-stars {
  display: inline-flex;
  gap: 0.1rem;
  color: var(--c-star);
  align-self: center;
}

#hdhp .hd-stars .i { inline-size: 1.5rem; block-size: 1.5rem; }

/* =========================================================
   SEKCE — obecné
   ========================================================= */

#hdhp .section {
  padding-block: var(--space-section);
}

/* Odlišený podklad — oddělí sekci od bílých sousedů. */

#hdhp .section--gray { background: var(--c-gray); }

#hdhp .section__head {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  margin-block-end: clamp(2.8rem, 4vw, 4.4rem);
  text-align: center;
}

#hdhp .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.4rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-white);        /* jemné — vystoupí i na béžové, i na bílé */
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
}

#hdhp .section__title {
  font-size: clamp(2.2rem, 2.6vw, 3.2rem);
  letter-spacing: -0.015em;
  max-inline-size: 20ch;
}

/* =========================================================
   PÁS — oddělený blok na světlém podkladu z palety
   (--light-beige ze starého webu). Plná barva, bez přechodu.
   ========================================================= */

#hdhp .band {
  padding-block: var(--space-section);
  background: var(--c-beige);
}

#hdhp .pitch {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  margin-block-end: clamp(3.6rem, 5vw, 5.6rem);
  text-align: center;
}

#hdhp .pitch__title {
  font-size: clamp(2.4rem, 3.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Druhý řádek nadpisu nese barevný akcent — jako v referenci. */

#hdhp .pitch__title em {
  font-style: normal;
  color: var(--c-brown-dark);
}

/* =========================================================
   FEATURES — výhody s ikonami
   ========================================================= */

/* 46ch krájelo lead do úzkého sloupce a poslední řádek vycházel na
   polovinu předchozího. 62ch je pořád v čitelném rozsahu měřítka
   a balance k tomu srovná délky řádků, takže nezůstávají pahýly. */

#hdhp .pitch__lead {
  max-inline-size: 62ch;
  font-size: 1.5rem;
  color: var(--c-ink-soft);
  text-wrap: balance;
}

#hdhp .hd-stars--lg .i { inline-size: 1.8rem; block-size: 1.8rem; }

/* --- Kontakty a sítě jako ikony --- */

#hdhp .socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

#hdhp .social {
  display: grid;
  place-items: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  color: var(--c-brown-dark);
  background: var(--c-beige);   /* sekce je bílá, bílá kolečka by splynula */
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--c-line);
  transition: color .2s var(--ease), background-color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}

#hdhp .social:hover {
  color: var(--c-ink);
  background: var(--c-brown);
  box-shadow: 0 0 0 1px var(--c-brown);
  transform: translateY(-2px);
}

#hdhp .social .i {
  inline-size: 2rem;
  block-size: 2rem;
}

/* =========================================================
   NEWSLETTER — Shoptet markup, proto cizí názvy tříd
   ========================================================= */

#hdhp .newsletter {
  padding-block: var(--space-section);
  background: var(--c-brown);
  color: var(--c-ink);
}

#hdhp .footer-newsletter {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  max-inline-size: 51.2rem;
  margin-inline: auto;
  text-align: center;
}

#hdhp .footer-newsletter h2 {
  font-size: clamp(2.1rem, 2.6vw, 2.8rem);
  letter-spacing: -0.015em;
}

#hdhp .subscribe-form { inline-size: 100%; }

#hdhp .subscribe-form fieldset {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
}

#hdhp .footer-newsletter .form-group {
  display: grid;
  gap: 0.6rem;
  text-align: start;
}

#hdhp .footer-newsletter label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink);   /* na #cebaa4 dá tlumená barva jen 3,94:1 */
}

#hdhp .required-asterisk::after { content: " *"; }

#hdhp .footer-newsletter .form-control {
  inline-size: 100%;
  padding: 1.3rem 1.6rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
}

#hdhp .footer-newsletter .form-control:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

#hdhp .footer-newsletter .consents .label {
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--c-ink);   /* na #cebaa4 dá tlumená barva jen 3,94:1 */
  text-align: center;
}

#hdhp .footer-newsletter .consents a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Shoptet používá btn-primary (jedna pomlčka) — nekoliduje s .btn--primary. */

#hdhp .footer-newsletter .btn-primary {
  justify-self: center;
  padding-inline: 3.2rem;
  color: var(--c-white);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

#hdhp .footer-newsletter .btn-primary:hover { background: #000; border-color: #000; }

/* =========================================================
   NABÍHÁNÍ PRVKŮ
   Skrytý stav visí na .js-reveal, kterou nasadí až skript — bez JS
   proto zůstane všechno viditelné.
   ========================================================= */

#hdhp.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
}

#hdhp.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  /* schodovité nabíhání v rámci skupiny */
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #hdhp,
  #hdhp *,
  #hdhp *::before,
  #hdhp *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  #hdhp .hd-carousel__arrow:hover { transform: none; scale: 1; }

  #hdhp.js-reveal .reveal { opacity: 1; transform: none; }

  #hdhp.js-reveal .reveal.is-visible { transition: none; transition-delay: 0s; }

  #hdhp .social:hover { transform: none; }
}


/* ######## css/hellodog-v2.css ######## */

#hdhp {
  /* Akcentové tinty — světlé varianty barev z palety.
     Slouží jako podklad karet, proto jsou hodně zesvětlené:
     text --c-ink na nich drží kontrast nad 12:1. */
  --tint-beige: var(--c-beige);
  --tint-tan:   color-mix(in srgb, var(--c-tan)  30%, var(--c-white));
  --tint-blue:  color-mix(in srgb, var(--c-blue) 34%, var(--c-white));
  --tint-pink:  color-mix(in srgb, var(--c-pink) 32%, var(--c-white));

  /* Dlouhé měkké dojetí pro přiblížení dlaždic. Bez přejetí cíle —
     to působilo trhaně, protože se dlaždice na konci vracela. */
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

/* Tlačítka nejsou pilulky — ostrý web má u hnědých tlačítek roh 6px.
   Přebíjí se jen tady, aby verze 1 zůstala beze změny. */

#hdhp .hd-btn { border-radius: 0.6rem; }

/* =========================================================
   TRUST 2 — hodnocení pod herem
   Dva sloupce: vlevo průměr a důvody k důvěře, vpravo claim
   s Heurekou a rozpad hodnocení. Levý sloupec má pevnou šířku,
   pravý si bere zbytek — pruhy tak dostanou co nejvíc místa.
   ========================================================= */

/* Dole nic — hned navazují kategorie na stejném bílém podkladu a jejich
   horní odstup (.section) mezeru mezi sekcemi obstará sám. */

#hdhp .trust2 {
  padding-block-start: clamp(1.6rem, 2.5vw, 2.4rem);
}

#hdhp .trust2__card {
  display: grid;
  grid-template-columns: minmax(19.2rem, 26.4rem) minmax(0, 1fr);
  gap: clamp(2.4rem, 4vw, 5.6rem);
  padding: clamp(2.4rem, 3.5vw, 4.4rem) clamp(2rem, 3.5vw, 4.8rem);
  background: var(--c-beige);
  border-radius: var(--r-lg);
}

/* --- Levý sloupec: průměr + odrážky --- */

/* Bez svislé linky — sloupce odděluje rámeček pravé karty. */

#hdhp .trust2__aside {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: var(--space-2xs);
}

#hdhp .trust2__avg {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(5.2rem, 7vw, 7.6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

#hdhp .trust2__count {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* --- Dlaždice uvnitř pravé karty --- */

/* Bez svislých dělicích čar — sloupce odděluje jen mezera.
   column-gap schválně místo gap: ve složeném stavu je jeden sloupec
   a odstup řádků si řeší .tile2 vlastním padding-blockem. */

#hdhp .trust2__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.6rem, 2.4vw, 2.8rem);
  padding-block-start: clamp(1.6rem, 2.2vw, 2.2rem);
  border-block-start: 1px solid var(--c-line);
}

#hdhp .tile2 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

#hdhp .tile2 b {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-ink);
}

/* Bez kroužku na pozadí — kresba je příliš členitá, uvnitř kolečka
   by z ní ve 14 px nezbylo nic čitelného. */

#hdhp .tile2 .i {
  inline-size: 2.6rem;
  block-size: 2.6rem;
  flex: none;
  color: var(--c-brown-dark);
}

/* Auto má poměr 1,45:1, takže ve čtvercovém boxu doráží na šířku
   a na výšku mu zbyde 18 px. Necháváme to tak — box zůstává čtvercový,
   aby texty všech tří dlaždic začínaly na stejné ose. */

/* --- Pravý sloupec: světlá karta s ukazatelem, claimem a dlaždicemi --- */

#hdhp .trust2__main {
  display: grid;
  align-content: center;
  gap: clamp(1.6rem, 2.2vw, 2.4rem);
  padding: clamp(2rem, 2.8vw, 3.2rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

#hdhp .trust2__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.6rem, 2.5vw, 3.2rem);
}

/* Bere zbytek řádku po ukazateli, aby vpravo nezůstávalo prázdno. */

#hdhp .trust2__title {
  flex: 1 1 22.4rem;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 2.9vw, 3.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  text-wrap: balance;
}

/* Číslo se nesmí zalomit mezi tisíce a zbytek („1 / 047 zákazníků“). */

#hdhp .trust2__title b {
  font-weight: 800;
  color: var(--c-brown-dark);
  white-space: nowrap;
}

/* --- Heureka odkaz ---
   Bílá karta je tu kvůli logomanuálu: barevná verze loga smí ležet
   jen na bílém nebo světle šedém podkladu, sekce má béžové pozadí.
   Padding zároveň drží ochrannou zónu okolo loga. */

/* Svislá karta pod průměrem: logo, popisek, proklik. */

#hdhp .hrk {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  inline-size: 100%;
  margin-block-start: var(--space-sm);
  padding: clamp(1.4rem, 2vw, 1.8rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease);
}

#hdhp .hrk:hover {
  border-color: var(--c-brown);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Oficiální wordmark — značkové barvy, nedědí currentColor.
   Výška nad manuálovým minimem 15 px, poměr stran zůstává.
   Spodní margin drží ochrannou zónu k popisku pod logem. */

#hdhp .hrk__logo {
  display: block;
  block-size: 2.4rem;
  margin-block-end: 0.4rem;
}

#hdhp .hrk__logo svg {
  display: block;
  block-size: 100%;
  inline-size: auto;
}

#hdhp .hrk__label {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-ink);
}

#hdhp .hrk__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--c-brown-dark);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-brown-dark) 35%, transparent);
  text-underline-offset: 0.1875em;
}

#hdhp .hrk__arrow {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  flex: none;
  transition: transform .2s var(--ease);
}

#hdhp .hrk:hover .hrk__arrow { transform: translateX(0.3rem); }

/* --- Kruhový ukazatel --- */

#hdhp .gauge {
  --dash: 326.73;        /* obvod kružnice o poloměru 52 */
  --zbytek: 3.27;        /* 1 % obvodu — o tolik oblouku chybí do plna */
  position: relative;
  display: grid;
  place-items: center;
  inline-size: clamp(11.2rem, 13vw, 16.8rem);
  flex: none;
}

#hdhp .gauge__svg {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

#hdhp .gauge__svg circle {
  fill: none;
  stroke-width: 9;
}

#hdhp .gauge__stopa { stroke: color-mix(in srgb, var(--c-tan) 32%, var(--c-white)); }

/* Oblouk startuje nahoře a jde po směru hodinových ručiček. */

#hdhp .gauge__arc {
  stroke: var(--c-brown-dark);
  stroke-linecap: round;
  stroke-dasharray: var(--dash);
  stroke-dashoffset: var(--zbytek);
  transform: rotate(-90deg);
  transform-origin: center;
}

/* Číslo uprostřed kruhu. tabular-nums drží šířku číslic, aby text
   při dopočítávání neposkakoval. */

#hdhp .gauge__num {
  position: absolute;
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 2.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-brown-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Prázdný start je jen pod .js-bars, aby při vypnutém JS zůstal
   oblouk rovnou dokreslený. */

#hdhp.js-bars .gauge__arc[data-bar-grow] { stroke-dashoffset: var(--dash); }

#hdhp.js-bars .gauge__arc[data-bar-grow].is-full {
  stroke-dashoffset: var(--zbytek);
  transition: stroke-dashoffset 1.6s var(--ease);
}

/* --- Hvězdy: zlatá řada se vymaluje přes bledou --- */

#hdhp .stars2 {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* max-content drží přirozenou šířku i uvnitř ořezu se šířkou 0 —
   jinak by se hvězdy v horní řadě smrskly. */

#hdhp .stars2__row {
  display: flex;
  gap: 0.2rem;
  inline-size: max-content;
  color: color-mix(in srgb, var(--c-tan) 55%, var(--c-white));
}

#hdhp .stars2__row .i {
  inline-size: clamp(2rem, 2.4vw, 2.4rem);
  block-size: clamp(2rem, 2.4vw, 2.4rem);
}

#hdhp .stars2__row--zlata { color: var(--c-brown-dark); }

/* Hodnocení jede v hnědé paletě webu, ne v žluté --c-star.
   Přebarveno cíleně jen v sekcích verze 3 — .stars--lg a .rev__stars
   ve starších index souborech si žlutou nechávají.
   Sekce recenzí má zlatou přímo z hvězd Shoptet widgetu — na bílé
   drží kontrast 3,7 : 1. */

#hdhp .revs2__score .hd-stars,
#hdhp .rev2 .hd-stars { color: #af7b29; }

#hdhp .stars2__clip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  inline-size: 100%;
}

/* Nulová šířka jen pod .js-bars, aby při vypnutém JS byly hvězdy
   rovnou zlaté. */

#hdhp.js-bars [data-stars-paint] { inline-size: 0; }

#hdhp.js-bars [data-stars-paint].is-paint {
  inline-size: 100%;
  transition: inline-size 1.6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  /* Bez pohybu — hodnoty se ukážou rovnou. */

  #hdhp.js-bars .gauge__arc[data-bar-grow] { stroke-dashoffset: var(--zbytek); }

  #hdhp.js-bars [data-stars-paint] { inline-size: 100%; }

  #hdhp .hrk:hover { transform: none; }

  #hdhp .hrk:hover .hrk__arrow { transform: none; }
}

@media (max-width: 60rem) {
  #hdhp .trust2__card { grid-template-columns: 1fr; }

  #hdhp .trust2__aside {
    justify-items: center;
    text-align: center;
  }

  #hdhp .hrk { justify-items: center; max-inline-size: 32rem; }
}

/* Tři dlaždice vedle sebe už jsou moc úzké — skládáme je pod sebe.
   Ve sloupci by z nich bez linky byl jeden slitý blok, takže tady
   vodorovné dělení zůstává. */

@media (max-width: 56rem) {
  #hdhp .trust2__tiles { grid-template-columns: 1fr; }

  #hdhp .tile2 { padding-block: 1.2rem; }

  #hdhp .tile2 + .tile2 {
    border-inline-start: 0;
    border-block-start: 1px solid var(--c-line);
  }
}

@media (max-width: 34rem) {
  /* Ruční zalomení dělá v úzkém sloupci osamocený první řádek —
     text-wrap: balance si poradí líp. */

  #hdhp .trust2__title br { display: none; }
}

/* =========================================================
   RECENZE — rozestavění podle Shoptet widgetu
   Souhrn na střed, pod ním karusel tří karet se šipkami po
   stranách. Posun řeší scroll-snap, JS jen šipky — bez něj
   zůstane stopa normálně scrollovatelná.
   ========================================================= */

#hdhp .revs2__summary {
  display: grid;
  justify-items: center;
  gap: var(--space-3xs);
  margin-block-end: clamp(2.8rem, 4vw, 4.4rem);
  text-align: center;
}

#hdhp .revs2__score {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
}

/* Hvězdy dorovnávají zvětšené číslo. Scope na .revs2, ať to nesahá
   na .stars--lg jinde na webu. */

#hdhp .revs2__score .hd-stars .i {
  inline-size: clamp(1.8rem, 1.9vw, 2.2rem);
  block-size: clamp(1.8rem, 1.9vw, 2.2rem);
}

/* Souhrn teď uvozuje celou sekci (nadpis je jen pro čtečky),
   tak nese i její velikost písma. */

#hdhp .revs2__score b {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 2.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-ink);
}

#hdhp .revs2__meta {
  margin: 0;
  font-size: clamp(1.7rem, 1.8vw, 2.1rem);
  line-height: 1.4;
  color: var(--c-ink-soft);
  text-wrap: balance;
}

#hdhp .revs2__meta b {
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;   /* ať se „1 000+“ nerozpadne na dva řádky */
}

/* --- Karusel --- */

#hdhp .revs2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.4rem, 1.5vw, 1.2rem);
}

#hdhp .revs2__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--revs-gap)) / 3);
  gap: var(--revs-gap, clamp(1.6rem, 2.5vw, 3.2rem));
  --revs-gap: clamp(1.6rem, 2.5vw, 3.2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* scroll-behavior schválně není smooth — plynulost si řídí skript,
     jinak by si nativní scroll se snapem lezly do zelí. */
  /* Stopa ořezává přesah, takže stín zvednuté karty potřebuje kolem
     sebe místo. Svisle se padding vrací záporným marginem, aby se
     rozestupy sekce nezměnily. Do stran margin nejde — stopa by
     přelezla přes šipky a brala jim kliky. */
  padding: 1.2rem 1.6rem 3.6rem;
  margin-block: -1.2rem -3.6rem;
  scroll-padding-inline: 1.6rem;
  scrollbar-width: none;
}

#hdhp .revs2__track::-webkit-scrollbar { display: none; }

#hdhp .revs2__track:focus-visible {
  outline: 2px solid var(--c-brown-dark);
  outline-offset: 4px;
  border-radius: var(--r-md);
}

/* --- Karta ---
   Zarovnaná doleva: hvězdy, text a autor u spodní hrany. Karty
   v řadě mají stejnou výšku, takže autoři sedí v jedné lince. */

#hdhp .rev2 {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-inline-size: 0;
  padding: clamp(2.2rem, 2.6vw, 3.2rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}

/* Zvednutí jen na zařízeních s myší — na dotyku by hover zůstal
   viset po tapnutí. */

@media (hover: hover) {
  #hdhp .rev2:hover {
    border-color: transparent;
    box-shadow: 0 1.6rem 3.2rem -1.2rem rgb(92 70 48 / .22);
    transform: translateY(-0.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hdhp .rev2:hover { transform: none; }
}

#hdhp .rev2 .hd-stars { align-self: flex-start; gap: 0.2rem; }

#hdhp .rev2 .hd-stars .i { inline-size: 1.6rem; block-size: 1.6rem; }

/* Recenze mají přes šest řádků, na ty už balance nestačí. */

#hdhp .rev2__text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

/* --- Autor ---
   margin-block-start: auto ho drží u spodní hrany i u krátkých recenzí. */

#hdhp .rev2__author {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
}

/* Kolečko s iniciálami. Widget střídá modrou a růžovou — tady stejné
   rozdělení, jen převedené do hnědé palety webu. */

#hdhp .rev2__avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  border-radius: 50%;
  background: var(--c-brown-dark);
  color: var(--c-white);
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

#hdhp .rev2__avatar--svetly {
  background: color-mix(in srgb, var(--c-tan) 35%, var(--c-white));
  color: var(--c-brown-dark);
}

#hdhp .rev2__byline {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;
  margin: 0;
}

#hdhp .rev2__who {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-ink);
}

#hdhp .rev2__date {
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--c-ink-soft);
}

/* Dlouhé recenze se zkracují na šest řádků a celé se rozbalí tlačítkem.
   Zkrácení platí jen pod .is-clamp, kterou přidá skript — bez JS
   zůstanou texty celé a tlačítko skryté. */

#hdhp .revs2.is-clamp .rev2__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

#hdhp .revs2.is-clamp .rev2.is-open .rev2__text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}

#hdhp .rev2__more {
  align-self: flex-start;
  margin-block-start: -0.8rem;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--c-brown-dark);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-brown-dark) 35%, transparent);
  text-underline-offset: 0.1875em;
}

#hdhp .rev2__more:hover { text-decoration-color: currentColor; }

/* --- Šipky --- */

/* Plné hnědé kolečko — průhledné šipky na béžovém podkladu zanikaly.
   Bílá ikona na --c-brown-dark drží kontrast 4,8 : 1. */

#hdhp .revs2__arrow {
  display: grid;
  place-items: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  color: var(--c-white);
  background: var(--c-brown-dark);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: color .2s var(--ease), background-color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}

#hdhp .revs2__arrow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-brown-dark) 78%, var(--c-ink));
  box-shadow: var(--shadow-md);
  transform: scale(1.06);
}

/* Na kraji karuselu šipka zůstává vidět, jen zesvětlá — ať je poznat,
   že tím směrem už nic není. */

#hdhp .revs2__arrow:disabled {
  color: color-mix(in srgb, var(--c-brown-dark) 45%, var(--c-white));
  background: color-mix(in srgb, var(--c-tan) 30%, var(--c-white));
  box-shadow: none;
  cursor: default;
}

#hdhp .revs2__arrow .i { inline-size: 2rem; block-size: 2rem; }

@media (prefers-reduced-motion: reduce) {
  #hdhp .revs2__arrow:hover:not(:disabled) { transform: none; }
}

#hdhp .revs2__foot {
  margin: clamp(2.8rem, 4vw, 4rem) 0 0;
  text-align: center;
}

/* Tři karty vedle sebe se vejdou jen na širokém, níž ubíráme. */

@media (max-width: 60rem) {
  #hdhp .revs2__track { grid-auto-columns: calc((100% - var(--revs-gap)) / 2); }
}

@media (max-width: 40rem) {
  /* Karta nechává zprava vykouknout další, ať je poznat, že se dá
     listovat. Stopa jde přes okraje .shell až k hraně displeje —
     jinak by vykukující karta končila uříznutá u okraje obsahu.
     Padding + scroll-padding drží první i poslední kartu v zarovnání
     s ostatním obsahem. */

  #hdhp .revs2__track {
    grid-auto-columns: 85%;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  /* Šipky by ukrojily z už tak úzké karty — pod nimi se listuje tahem. */

  #hdhp .revs2 { grid-template-columns: minmax(0, 1fr); }

  #hdhp .revs2__arrow { display: none; }
}

/* =========================================================
   KATEGORIE — plné dlaždice s ikonou a popiskem
   ========================================================= */

/* Kategorií je deset, proto pevný počet sloupců — auto-fit by je
   rozházel po osmi a nechal dva sirotky pod řadou.
   Mobil 2, tablet 4, desktop 5. */

#hdhp .cats2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 1.6vw, 2rem);
}

@media (min-width: 48rem) {
  #hdhp .cats2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  #hdhp .cats2 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Celá dlaždice je jeden blok — ikona nahoře, název dole. Podklad
   je světlá béžová, obsah proto zůstává tmavý (kontrast přes 14:1). */

#hdhp .cat2 {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-sm);
  padding: clamp(1.4rem, 2vw, 2rem);
  aspect-ratio: 1;
  color: var(--c-ink);
  background: var(--c-beige);
  border-radius: var(--r-lg);
  /* obrys je průhledný, aby se při najetí neposouval obsah */
  outline: 2px solid transparent;
  outline-offset: -2px;
  /* Přiblížení jede dlouho a měkce, barvy o něco rychleji —
     jinak by dobarvovaly ještě dávno po tom, co dlaždice dojede. */
  transition: scale .5s var(--ease-soft), color .3s var(--ease),
              outline-color .3s var(--ease);
}

/* Hover: ladné přiblížení, tmavý obrys a hnědý obsah. Ikona barvu
   dědí, takže se s názvem přebarvuje zároveň a jedním přechodem. */

#hdhp .cat2:hover {
  scale: 1.045;
  color: var(--c-brown-dark);
  outline-color: var(--c-ink);
}

/* Nabíhání sekce nastavuje transition na celý prvek a tím přebije
   přechod nastavený výš — scale pak při najetí skočí bez animace.
   Vracíme oba přechody v jednom zápisu. Zpoždění si nese jen
   nabíhání; hover musí reagovat hned, ne až po řadě dlaždic. */

#hdhp.js-reveal .cat2.reveal.is-visible {
  transition:
    opacity .55s var(--ease) calc(var(--reveal-i, 0) * 70ms),
    transform .55s var(--ease) calc(var(--reveal-i, 0) * 70ms),
    scale .5s var(--ease-soft),
    color .3s var(--ease),
    outline-color .3s var(--ease);
}

/* Barvu dědí od dlaždice — v klidu tmavá jako název, při najetí
   hnědá. Vlastní přechod nepotřebuje, mění se s rodičem. */

#hdhp .cat2__icon {
  inline-size: clamp(3.6rem, 4vw, 5rem);
  block-size: clamp(3.6rem, 4vw, 5rem);
  color: inherit;
}

/* Auto je široké 2,7:1, takže ve čtvercovém slotu doráží na šířku
   a na výšku mu zbyde sotva polovina toho, co ostatním ikonám.
   Širší slot mu vrátí srovnatelnou optickou velikost — ikona je
   v dlaždici centrovaná, takže popisek pod ní zůstává na místě. */

#hdhp .cat2__icon--siroka {
  inline-size: clamp(6rem, 6.8vw, 8.48rem);
}

#hdhp .cat2__name {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

/* =========================================================
   PROČ NAŠE PELÍŠKY
   Vlevo karta: fotka a pod ní parametry o šíři nabídky. Vpravo
   nadpis, tři výhody v kartách a tlačítko na spodní hraně, aby
   oba sloupce končily zároveň.
   ========================================================= */

#hdhp .why2 {
  display: grid;
  gap: var(--space-md) clamp(2.4rem, 4vw, 5.6rem);
  grid-template-areas:
    "body"
    "media"
    "cta";
}

#hdhp .why2__body { grid-area: body; }

#hdhp .why2__media { grid-area: media; }

#hdhp .why2__cta { grid-area: cta; justify-self: center; }

/* Karta s fotkou vpravo přes obě řádky, vlevo výčet a pod ním tlačítko.
   Fotka je schválně na opačné straně než v sekci pod tím, aby se strany
   střídaly. Řádek s výčtem je 1fr, takže tlačítko klesne na spodní hranu
   fotky a oba sloupce končí zároveň. */

@media (min-width: 62rem) {
  #hdhp .why2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "body media"
      "cta  media";
  }

  #hdhp .why2__cta { justify-self: start; }
}

/* --- Vlevo: karta s fotkou a parametry ---
   Fotka je záběr z pokoje, ne vyříznutý produkt, proto tu není
   multiply a karta má vlastní podklad. Parametry na fotku přímo
   navazují, aby to byl jeden objekt. */

#hdhp .why2__media {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 0;
  margin: 0;
}

/* Zaoblení sedí přímo na fotce a na panelu, ne na ořezu rodiče —
   ten se při zvětšování z nuly (nabíhání sekce) nedá spolehnout. */

#hdhp .why2__media img {
  inline-size: 100%;
  block-size: auto;
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-lg);
}

#hdhp .why2__specs {
  padding: clamp(1.6rem, 2.5vw, 2.4rem);
  background: var(--c-beige);
  border-end-start-radius: var(--r-lg);
  border-end-end-radius: var(--r-lg);
}

#hdhp .why2__specs .why2__specList {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
}

/* Na širším displeji vedle sebe. */

@media (min-width: 30rem) {
  #hdhp .why2__specs .why2__specList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vlevo obrázek argumentu — pravítko u velikostí, kolo u barev. */

#hdhp .why2__spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem var(--space-sm);
}

#hdhp .why2__spec .why2__specTitle {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
}

#hdhp .why2__spec .why2__specText {
  margin: 0;
  font-size: 1.4rem;
  color: var(--c-ink-soft);
}

/* Ikony stojí volně, bez kolečka pod sebou. */

#hdhp .why2__specIcon,
#hdhp .why2__palette {
  grid-row: 1 / span 2;
  inline-size: 4rem;
  block-size: 4rem;
}

#hdhp .why2__specIcon {
  display: grid;
  place-items: center;
  color: var(--c-brown-dark);
}

#hdhp .why2__specIcon .i { inline-size: 3.6rem; block-size: 3.6rem; }

/* Barev je moc na to vypsat je do koleček — kolo je zastoupí všechny
   a neslibuje konkrétní počet. Barvy si nese samo, proto tu nic
   nepřebarvujeme. */

/* --- Vpravo: nadpis a číslovaný výčet ---
   Nahoře, aby nadpis lícoval s horní hranou fotky, stejně jako obočí
   v sortimentu. Základní mezera je těsná, aby nadpis s perexem držely
   pohromadě; větší odstup před výhodami dodá jejich vlastní margin. */

#hdhp .why2__body {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2xs);
}

#hdhp .why2__title {
  font-size: clamp(2.4rem, 3.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Perex vyplní celou šířku sloupce. Zalomení hlídají nezlomitelné
   mezery v HTML, které drží pohromadě krátká slovní spojení, a pretty,
   ať na posledním řádku nezůstane osamocené slovo. */

#hdhp .why2__lead {
  font-size: 1.5rem;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

/* Výhody používají stejné karty jako sortiment (.band2__feature),
   aby obě sekce vypadaly jako jedna rodina. */

#hdhp .why2__list {
  display: grid;
  gap: var(--space-2xs);
  inline-size: 100%;
  margin-block-start: var(--space-sm);
}

/* =========================================================
   OSTATNÍ SORTIMENT — střídavé bloky
   Fotka na barevném panelu, vedle ní obočí s ikonou kategorie,
   nadpis, popis a výhody v kartách. Strany se v každém dalším
   bloku prohodí.
   ========================================================= */

#hdhp .bands {
  display: grid;
  gap: clamp(4rem, 6vw, 7.2rem);
}

/* Složené rozvržení: text, pod ním fotka a úplně dole tlačítko.
   Proto je tlačítko sourozencem fotky, ne součástí textového bloku. */

#hdhp .band2 {
  display: grid;
  gap: var(--space-md) clamp(2.4rem, 4vw, 4.8rem);
  grid-template-areas:
    "body"
    "stage"
    "cta";
}

#hdhp .band2__body { grid-area: body; }

#hdhp .band2__stage { grid-area: stage; }

/* Na střed jako u "Proč naše pelíšky" — sekce pod sebou mají sjednocené
   mobilní rozvržení, na desktopu se to podle stejného vzoru mění na start. */

#hdhp .band2__cta { grid-area: cta; justify-self: center; }

/* Vedle sebe: text vlevo, tlačítko pod ním, fotka přes obě řádky.
   Střídačka — v sudém bloku jde fotka doleva. Tlačítko jde hned za
   výhodami s pevnou mezerou (gap), aby byla ve všech blocích stejná;
   volné místo vedle fotky zbyde pod ním. */

@media (min-width: 62rem) {
  #hdhp .band2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "stage body"
      "stage cta";
  }

  #hdhp .band2:nth-child(even) {
    grid-template-areas:
      "body  stage"
      "cta   stage";
  }

  #hdhp .band2__cta { justify-self: start; align-self: start; }
}

/* --- Fotka na panelu ---
   Dřív tu byly vyříznuté produkty na bílém, které se přes multiply
   posadily na béžový podklad. Teď jsou to fotky z prostředí, takže
   panel vyplní celá fotka a ořezává se přes cover. */

#hdhp .band2__stage {
  display: grid;
  min-block-size: 0;       /* ať se smí smrsknout pod obsah řádku */
  margin: 0;
  overflow: hidden;        /* ořez fotky na rádius panelu */
  background: var(--c-beige);
  border-radius: var(--r-lg);
}

#hdhp .band2__stage img {
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  object-fit: cover;
}

/* --- Text ---
   Obsah drží nahoře, aby obočí lícovalo s horní hranou fotky. Dřív se
   obsah rozprostíral po výšce bloku, jenže pak mezera mezi nadpisem
   a popiskem rostla s volným místem. Teď jsou mezery pevné: základní
   těsná pro nadpis s popiskem, obočí a výhody si přidají vlastní margin. */

#hdhp .band2__body {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2xs);
}

/* Obočí nese ikonu kategorie, aby blok kopíroval dlaždice výše. */

#hdhp .band2__eyebrow {
  margin-block-end: var(--space-2xs);
  gap: var(--space-2xs);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.3rem;
}

#hdhp .band2__eyebrow .i {
  inline-size: 1.8rem;
  block-size: 1.8rem;
  color: var(--c-brown-dark);
}

/* Strop 1.9375rem místo 2rem: při plné šířce sloupce se tak na jeden
   řádek vejde i nejdelší nadpis (matrace), kterému při 2rem chyběly 2 px. */

#hdhp .band2__title {
  font-size: clamp(2.4rem, 2.8vw, 3.1rem);
  letter-spacing: -0.02em;
}

/* Stejně jako perex u "Proč naše pelíšky" — přes celou šířku sloupce. */

#hdhp .band2__text {
  font-size: 1.5rem;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

/* --- Výhody jako karty --- */

#hdhp .band2__list {
  display: grid;
  gap: var(--space-2xs);
  inline-size: 100%;
  margin-block-start: var(--space-sm);
}

/* Ikona vlevo přes obě řádky, vedle ní název a popis. */

#hdhp .band2__feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.2rem var(--space-sm);
  padding: var(--space-sm);
  background: var(--c-white);
  border-radius: var(--r-md);
}

#hdhp .band2__ficon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  color: var(--c-brown-dark);
  background: var(--c-beige);
  border-radius: 50%;
}

#hdhp .band2__ficon .i { inline-size: 2.2rem; block-size: 2.2rem; }

#hdhp .band2__ftitle {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Přes celou šířku karty jako perexy — zalomení hlídají nezlomitelné
   mezery v HTML a pretty proti osamocenému slovu na konci. */

#hdhp .band2__ftext {
  font-size: 1.4rem;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

/* Pretty tu stahuje slovo z prvního řádku dolů, aby poslední nebyl krátký.
   Konec textu je ale slepený nezlomitelnými mezerami, takže osamocené
   slovo nehrozí a první řádek může jet naplno. */

#hdhp .band2__ftext--naplno { text-wrap: wrap; }

/* =========================================================
   BLOG
   ========================================================= */

#hdhp .posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(27.2rem, 100%), 1fr));
  gap: clamp(2rem, 2.8vw, 3.2rem);
}

#hdhp .post {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

#hdhp .post__media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--c-beige);
  border-radius: var(--r-lg);
}

#hdhp .post__media img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 100%;
  max-inline-size: none;
  margin: 0;
  object-fit: cover;
  transition: scale .4s var(--ease);
}

#hdhp .post:hover .post__media img { scale: 1.05; }

#hdhp .post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
}

#hdhp .post__cat {
  padding: 0.4rem 1.1rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--tint, var(--tint-tan));
  border-radius: var(--r-pill);
}

#hdhp .post time {
  font-size: 1.3rem;
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}

#hdhp .post__title {
  font-size: clamp(1.7rem, 1.7vw, 2rem);
  letter-spacing: -0.01em;
  transition: color .2s var(--ease);
}

#hdhp .post:hover .post__title { color: var(--c-brown-dark); }

#hdhp .post__text {
  font-size: 1.5rem;
  color: var(--c-ink-soft);
  text-wrap: balance;
}

#hdhp .post__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--c-brown-dark);
}

/* Roztažený odkaz — klikací je celá karta, ve čtečce jeden cíl. */

#hdhp .post__more::after {
  content: "";
  position: absolute;
  inset: 0;
}

#hdhp .post__more .i {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  transition: translate .2s var(--ease);
}

#hdhp .post:hover .post__more .i { translate: 0.3rem 0; }

#hdhp .posts > li:nth-child(3n + 1) .post__cat { --tint: var(--tint-tan); }

#hdhp .posts > li:nth-child(3n + 2) .post__cat { --tint: var(--tint-blue); }

#hdhp .posts > li:nth-child(3n + 3) .post__cat { --tint: var(--tint-pink); }

/* Tlačítko pod výpisem sekce */

#hdhp .section__foot {
  display: grid;
  justify-items: center;
  margin-block-start: clamp(2.8rem, 4vw, 4.4rem);
}

/* =========================================================
   NEWSLETTER — vedle formuláře blok o nás
   Formulář samotný má styly v hellodog.css (markup ze Shoptetu),
   tady je jen dvousloupcový obal a levá půlka.
   ========================================================= */

/* Sekce je ve verzi 2 světle béžová, ne hnědá jako v základu. */

#hdhp .newsletter { background: var(--c-beige); }

/* Základní styl přebarvuje tlačítko jen z #161616 na #000 — rozdíl
   není vidět. Hover proto přechází na značkovou hnědou s tmavým
   textem (kontrast 8,9:1), stejně jako ostatní tlačítka stránky. */

#hdhp .newsletter .footer-newsletter .btn-primary {
  transition: background-color .3s var(--ease-soft),
              border-color .3s var(--ease-soft),
              color .3s var(--ease-soft);
}

#hdhp .newsletter .footer-newsletter .btn-primary:hover,
#hdhp .newsletter .footer-newsletter .btn-primary:focus-visible {
  color: var(--c-ink);
  background: var(--c-brown);
  border-color: var(--c-brown);
}

#hdhp .newsletter__inner {
  display: grid;
  gap: clamp(3.2rem, 5vw, 6.4rem);
  align-items: center;
}

@media (min-width: 56rem) {
  #hdhp .newsletter__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

#hdhp .about2 {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
}

/* Logo tu zastupuje obočí, proto je drobné. */

#hdhp .about2__logo {
  inline-size: clamp(11.2rem, 12vw, 13.6rem);
  block-size: auto;
  margin-block-end: var(--space-2xs);
}

#hdhp .about2__title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 2.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-inline-size: 24ch;
}

/* Na béžové sekci text v plné černé — drží 15:1. */

#hdhp .about2__text {
  font-size: 1.5rem;
  color: var(--c-ink);
  max-inline-size: 58ch;
  text-wrap: balance;
}

/* Sítě jdou proti základu obráceně: v klidu tmavé kolečko s bílou
   ikonou. Hover si bere základní světlou hnědou, ta je na béžové
   sekci dobře vidět. */

#hdhp .about2 .social {
  color: var(--c-white);
  background: var(--c-ink);
  box-shadow: 0 0 0 1px var(--c-ink);
  /* Bez posunu nahoru — kolečko jen měkce přebarví. */
  transition: color .3s var(--ease-soft), background-color .3s var(--ease-soft),
              box-shadow .3s var(--ease-soft);
}

/* Základní .social:hover má stejnou váhu jako .about2 .social výš,
   ale je v dřívějším souboru — prohrával a hover se vůbec neprojevil.
   Proto ho tady vypisujeme znovu: hnědé kolečko, tmavá ikona (9,6:1). */

#hdhp .about2 .social:hover,
#hdhp .about2 .social:focus-visible {
  transform: none;
  color: var(--c-ink);
  background: var(--c-brown);
  box-shadow: 0 0 0 1px var(--c-brown);
}

#hdhp .about2 .socials { margin-block-start: var(--space-2xs); }

/* =========================================================
   NABÍHÁNÍ FOTEK
   Základní nabíhání (posun nahoru) je v hellodog.css a používají
   ho i fotky v sekcích. Jen fotka v heru místo toho vyroste z nuly —
   dlouho a měkce, ať to neškubne.
   ========================================================= */

#hdhp.js-reveal .reveal--zoom {
  transform: none;
  scale: 0;
}

#hdhp.js-reveal .reveal--zoom.is-visible {
  scale: 1;
  transition: opacity .7s var(--ease),
              scale .9s cubic-bezier(.4, 0, .2, 1);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #hdhp .cat2:hover { scale: 1; }

  #hdhp.js-reveal .reveal--zoom { scale: 1; }

  #hdhp .post:hover .post__media img { scale: 1; }

  #hdhp .post:hover .post__more .i { translate: 0; }
}


/* ######## Doplňky pro Shoptet ######## */

/* Shoptet do obsahu banneru dědí vlastní řez a proložení písma
   (500, 0.4px) — design počítá s výchozími hodnotami. */
#hdhp {
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-align: start;
  text-indent: 0;
}

/* Shoptet dává <b> pevně 700, design počítá s výchozím „bolder“. */
#hdhp b,
#hdhp strong { font-weight: bolder; }
/* Číslo v kruhu: v návrhu vychází 800 (900 se nenačítá), Shoptet
   by 900 měl a číslo by ztěžklo. */
#hdhp .gauge__num b { font-weight: inherit; }

/* DP-CSS/old.css: .wide-carousel h1 { margin-top: 50px !important } */
#hdhp h1 { margin-top: 0 !important; }

/* Formulář newsletteru má markup ze Shoptetu, a tím i jeho styly
   pro patičku (odsazení bloku, mezery pod polem a popiskem). */
#hdhp .footer-newsletter { padding: 0; }
#hdhp .subscribe-form,
#hdhp .footer-newsletter .form-group { margin: 0; }
#hdhp .footer-newsletter label {
  margin: 0;
  line-height: inherit;
}
#hdhp .footer-newsletter .form-control { display: inline-block; }
/* Shoptet barví hvězdičku povinného pole červeně a odsazuje ji. */
#hdhp .required-asterisk::after {
  padding: 0;
  color: inherit;
}

/* Newsletter je v obsahu nové homepage — shoptetí pod ním by byl druhý.
   Skrývá se jen na stránce, kde nový obsah opravdu je (:has), takže
   současná homepage ani ostatní stránky o newsletter nepřijdou. */
body:has(#hdhp) .footer-newsletter-full-width { display: none; }