/* ===================================================================
   GYMPINK-CSS.css — vlastní CSS pro Shoptet
   Verze: 1.0 (PŘECHOD NA ŠABLONU TANGO — sekce 3.x od nuly.
   Tokeny a sdílené komponenty ze Step zůstávají, jsou nezávislé
   na šabloně. Vše pod touto hlavičkou je nové, psané na
   diagnostikovanou strukturu Tango.)
   Repo:  github.com/serbus-create/gympink-shoptet
   Vzor:  exalted.com
   ===================================================================

   POZOR — pravidla pro tento soubor:
   - Selektory se NIKDY nepíšou naslepo. Každý selektor musí vzejít
     z diagnostiky reálného DOM (výpis z konzole prohlížeče).
   - Do CSS nepatří žádný obsah (texty, cesty k obrázkům). Obsah plní
     klientka z administrace Shoptetu. CSS řeší výhradně vzhled.
   - Verzi v hlavičce zvyšovat při každé změně (usnadňuje audit).
   =================================================================== */


/* ===================================================================
   1. DESIGNOVÉ TOKENY
   Odvozeno ze schváleného HTML nástřelu homepage.
   =================================================================== */

:root {
  /* --- barvy --- */
  --gp-bg:          #ffffff;   /* hlavní pozadí */
  --gp-header-bg:   #efdde9;   /* růžová lišta hlavičky (změřeno ze vzorku klientky) */
  --gp-tile:        #f7f5f2;   /* světlé dlaždice, patička */
  --gp-ink:         #1a1a1a;   /* hlavní text */
  --gp-ink-soft:    #6b6b6b;   /* sekundární text */
  --gp-line:        #e6e3de;   /* linky, oddělovače */
  --gp-accent:      #ff2d78;   /* značková růžová — používat střídmě */
  --gp-on-photo:    #ffffff;   /* text ležící na fotografii */

  /* --- typografie --- */
  --gp-font: 'Helvetica Neue', Arial, sans-serif;

  --gp-fs-nav:      15px;      /* navigace */
  --gp-fs-body:     14px;      /* běžný text */
  --gp-fs-small:    13px;      /* drobný text, patička */
  --gp-fs-h1:       clamp(26px, 3.4vw, 44px);   /* hero nadpis */
  --gp-fs-h2:       clamp(20px, 2.4vw, 32px);   /* nadpisy bannerů */

  /* --- rozměry a poměry stran ---
     Musí odpovídat rozměrům zadaným grafikovi
     (viz gympink-zadani-grafika.xlsx). */
  --gp-ratio-hero:      2.2;    /* 2560 × 1164 */
  --gp-ratio-hero-mob:  0.75;   /* 1200 × 1600 */
  --gp-ratio-duo:       1.36;   /* 1790 × 1320 */
  --gp-ratio-wide:      1.92;   /* 2560 × 1335 */
  --gp-ratio-wide-mob:  1;      /* 1200 × 1200 */
  --gp-ratio-product:   0.75;   /* 1200 × 1600 */

  /* --- rozestupy --- */
  --gp-gap:         22px;       /* mezera mezi dlaždicemi */
  --gp-pad-x:       38px;       /* boční odsazení sekcí */
  --gp-pad-y:       44px;       /* svislé odsazení sekcí */

  /* --- tlačítka (pilulka s obrysem, jako u vzoru) --- */
  --gp-pill-pad:    13px 40px;
  --gp-pill-radius: 999px;
}


/* ===================================================================
   2. SDÍLENÉ KOMPONENTY
   Zatím jen definice — připojení na konkrétní Shoptet selektory
   proběhne až po diagnostice DOM.
   =================================================================== */

/* pilulkové tlačítko na fotografii */
.gp-pill {
  display: inline-block !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-radius: var(--gp-pill-radius) !important;
  padding: var(--gp-pill-pad) !important;
  font-size: var(--gp-fs-nav) !important;
  color: var(--gp-on-photo) !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.gp-pill:hover {
  background: rgba(255, 255, 255, .18) !important;
}

/* pilulkové tlačítko na světlém pozadí */
.gp-pill--dark {
  border-color: var(--gp-ink) !important;
  color: var(--gp-ink) !important;
}

.gp-pill--dark:hover {
  background: var(--gp-ink) !important;
  color: #fff !important;
}


/* ===================================================================
   3. SEKCE — Tango
   ===================================================================

   [x] 3.0  Hlavička — vynucená pozice (absolute, top:0)
   [x] 3.1  Hlavička — logo (omezení přemrštěné velikosti)
   [x] 3.2  Hlavička — menu kategorií (sjednocení do jednoho řádku)
   [x] 3.3  Hero banner — fix margin-bottom na .carousel.slide (40px mezera)
   [x] 3.4  Blok se 4 ikonami (přesunut pod hero, kartičky se stylem)
   [~] 3.5  Pár bannerů (Bestsellers/Novinky) — přepracováno, NEOVĚŘENO na živém webu
   [~] 3.6  Výpis produktů — CSS hotovo, produkty pending (admin blok není nakonfigurovaný)
   [~] 3.7  Patička — základní stylizace, ověřit vizuálně po aktualizaci hashe
   [~] 3.8  Velký banner (Týmové oblečení) — přepracováno, NEOVĚŘENO na živém webu
   [x] 3.9  Skryté bloky homepage (Nové články, Uvítací text)
   [ ] 3.10 Mobilní verze

   OPRAVA (kritická): všechna pravidla v téhle sekci se dřív aplikovala
   na CELÝ web, ne jen na titulní stránku. #header position:absolute
   bez omezení na stránku vyjmulo hlavičku z toku i na stránkách
   kategorií a detailu produktu, kde není hero fotka pod ní — hlavička
   se tam jen položila přes obsah stránky a rozbila layout.
   Diagnostika: body na titulní straně má třídu "type-index", na
   kategorii "type-category". Všechny selektory v týhle sekci proto
   teď mají prefix "body.type-index", ať platí jen na homepage.
   =================================================================== */


/* ===================================================================
   3.0  HLAVIČKA — vynucená pozice + scroll efekt
   Diagnostika: #header se choval nekonzistentně — jednou naměřeno
   position:absolute, podruhé position:relative (Tango si to zjevně
   přepíná samo, pravděpodobně podle šířky okna). Vynucujeme napevno.

   ROZŠÍŘENO NA CELÝ WEB (ne jen homepage): na žádost klienta má být
   tahle kompaktní "lišta" (logo zmenšené, jeden řádek, připnuté
   nahoře, jede se scrollem) na všech stránkách — na homepage navíc
   začíná průhledná přes hero fotku a zbělá po scrollu (řeší JS
   scroll listener), na ostatních stránkách žádná hero fotka není,
   takže je rovnou plná/bílá s tmavým textem (bez přechodu).
   =================================================================== */

#header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: var(--gp-header-bg) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .08) !important;
  transition: background-color .25s ease, top .25s ease !important;
  padding-bottom: 0 !important;
  /* Diagnostika (Console, getComputedStyle při scrollY:777): hlavička
     měla transform: translateY(-58px) — přesně mínus svoje vlastní
     výška. Šablona má v konfiguraci "fixed_header": false, takže
     Shoptet spouští VLASTNÍ JS pro schovávání hlavičky při scrollu
     (přes transform). My navrch vynucujeme position:fixed, ale jejich
     JS pořád běží a translateY zůstává trvale nalepený → hlavička
     je sice fixed, ale posunutá mimo obrazovku. Přebito natvrdo. */
  transform: none !important;
}

/* Homepage — start průhledný nad hero fotkou, top:30px (nad ní),
   zbělá a sedne na top:0 po scrollu (třída .gp-scrolled, viz JS). */
body.type-index #header {
  top: 30px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.type-index #header.gp-scrolled {
  top: 0 !important;
  background: var(--gp-header-bg) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .08) !important;
}

#header .menu-level-1 a,
#header .top-nav-right a,
#header .top-nav-right .btn-icon {
  color: var(--gp-ink) !important;
  text-shadow: none !important;
}

/* Homepage — bílý text se stínem, dokud je hlavička průhledná
   přes hero fotku; po scrollu (.gp-scrolled) zpět na tmavý. */
body.type-index #header:not(.gp-scrolled) .menu-level-1 a,
body.type-index #header:not(.gp-scrolled) .top-nav-right a,
body.type-index #header:not(.gp-scrolled) .top-nav-right .btn-icon {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !important;
}


/* Bílé písmo v růžové liště (na žádost klientky) — jen desktop.
   Mobilní zásuvka menu má vlastní bílé pozadí, tam zůstává tmavé.
   Změna zpět na tmavé: nahradit #fff za var(--gp-ink). */
@media (min-width: 901px) {
  #header .menu-level-1 a,
  #header .top-nav-right a,
  #header .top-nav-right .btn-icon,
  #header .gp-blog-moved a,
  body.type-index #header.gp-scrolled .menu-level-1 a,
  body.type-index #header.gp-scrolled .top-nav-right a,
  body.type-index #header.gp-scrolled .top-nav-right .btn-icon,
  body.type-index #header.gp-scrolled .gp-blog-moved a {
    color: #fff !important;
  }

  /* Text u košíku ("Prázdný košík" / cena) — nativně šedý, vlastní barva
     na <span>u, proto ho barvíme zvlášť (potomci odkazů + .cart-price). */
  #header .top-nav-right a *,
  #header .top-nav-right .cart-price,
  #header .cart-price,
  #header [data-testid="headerCartPrice"] {
    color: #fff !important;
  }

  /* "Svítivý" bílý text na růžové liště (po scrollu i na podstránkách):
     stejný tmavý stín jako nahoře nad hero fotkou, ať písmo nesplyne. */
  #header .menu-level-1 a,
  #header .top-nav-right a,
  #header .top-nav-right a *,
  #header .top-nav-right .btn-icon,
  #header .top-nav-right .cart-price,
  #header .cart-price,
  #header .gp-blog-moved a,
  body.type-index #header.gp-scrolled .menu-level-1 a,
  body.type-index #header.gp-scrolled .top-nav-right a,
  body.type-index #header.gp-scrolled .top-nav-right a *,
  body.type-index #header.gp-scrolled .top-nav-right .btn-icon,
  body.type-index #header.gp-scrolled .gp-blog-moved a {
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !important;
  }

  /* Bílé logo — stejný efekt (drop-shadow respektuje průhlednost loga). */
  #header .site-name img {
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .5)) !important;
  }
}


/* ===================================================================
   3.1  LOGO — omezení velikosti
   Diagnostika: .site-name img nemá žádné omezení rozměrů, vykresluje
   se v natural velikosti souboru (996×246 px), proto zabíralo 326px
   výšky a táhlo za sebou celou hlavičku na 452px.
   =================================================================== */

.site-name img {
  width: auto !important;
  height: 32px !important;
  max-height: 32px !important;
}

/* Diagnostika: .site-name mělo nativní padding:40px 0 (navržený pro
   původní velké logo), který po zmenšení loga zůstal a táhl výšku
   celé hlavičky na 112px místo skutečných 32px loga. */
.site-name {
  padding: 0 !important;
  line-height: 0 !important;
}

/* Růžová lišta: vnitřní řádek nechává prosvítat pozadí hlavičky. */
#header .navigation-wrapper {
  background: transparent !important;
}

/* Logo zůstává BÍLÉ (gymink_white.png) na žádost klientky — bez filtru. */


/* ===================================================================
   3.2  MENU KATEGORIÍ — sjednocení do jednoho průhledného řádku
   Diagnostika: nav.fitted má nativně bg:#fff, overflow:hidden a stojí
   jako samostatný bílý box uprostřed hero fotky, oddělený od loga
   i od ikon vpravo (ty jsou úplně nahoře v .top-nav).
   Cíl (viz reference Exalted): logo, menu a ikony v jedné rovině.
   =================================================================== */

/* ===================================================================
   OPRAVA: selektor nav.fitted byl špatně — "fitted" je TŘÍDA, kterou
   Shoptet dynamicky přidává/odebírá vlastním JS (data-collapsible),
   podle toho, jestli se menu vejde do dostupné šířky. Náš grid
   zmenšil sloupec natolik, že se JS rozhodl menu sbalit (třída zmizí,
   ukáže se prázdný box). Řešení: použít stabilní #navigation a menu
   natvrdo vynutit rozbalené, ať to JS nemůže znovu sbalit.

   ⚠ JEN DESKTOP (min-width: 901px). Diagnostika (DevTools, mobil):
   #navigation má nativně data-collapsible="true" — Shoptet na mobilu
   sám nabízí hamburger a schová menu do zásuvky. Tahle oprava to bez
   media query přebíjela i na mobilu (display:flex !important na
   menu, i když se nevejde), takže celé menu přetékalo přes hlavičku
   a překrývalo se s ikonami/přihlášením. Na mobilu proto necháváme
   Shoptetu jeho nativní chování. */
@media (min-width: 1280px) {
#navigation {
  background: transparent !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  overflow: visible !important;
}

#navigation .navigation-in.menu,
#navigation .menu-level-1 {
  display: flex !important;
  visibility: visible !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  list-style: none !important;
}

#navigation .menu-level-1 {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
}

#navigation .menu-level-1 li {
  display: inline-flex !important;
}

#navigation .menu-level-1 a {
  visibility: visible !important;
}
}

.navigation-in.menu,
.menu-helper,
.menu-level-1 {
  background: transparent !important;
}

.menu-level-1 a {
  font-size: 12px !important;
  white-space: nowrap !important;
}


/* ===================================================================
   Scrim (tmavý přechod přes horní část hero fotky) byl na žádost
   klienta odstraněn. Čitelnost menu na homepage teď spoléhá jen na
   text-shadow (viz 3.0). Pokud bude na světlejších fotkách text
   špatně čitelný, řešit výběrem fotek s klidnou horní částí (viz
   zadání grafikovi) místo tmavého přechodu přes celou fotku.
   =================================================================== */


/* ===================================================================
   3.2b  JEDEN ŘÁDEK — kategorie vlevo / logo uprostřed / ikony vpravo
   Diagnostika: .navigation-wrapper obsahuje čtyři přímé děti
   (top-nav, site-name, nav.fitted, menu-helper — menu-helper je
   nativně visibility:hidden, ignorujeme). Používáme CSS grid se
   třemi sloupci a každý blok zařadíme na pozici bez ohledu na
   pořadí v HTML — stejný princip, který fungoval na šabloně Step.
   top-nav obsahuje i e-mail (.project-email), který v referenci
   není vidět — schováváme, zůstávají jen ikony.
   =================================================================== */

.navigation-wrapper {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 20px !important;
  padding-right: 32px !important;
  /* KRITICKÉ: width:100% + padding BEZ border-box = element je vždy
     širší než 100 % o velikost paddingu (20+32=52px na desktopu,
     12+12=24px na mobilu s pravidlem níž). To způsobovalo horizontální
     přetečení celé stránky (potvrzeno: document.documentElement.
     scrollWidth > clientWidth na KAŽDÉ stránce, ne jen na detailu
     produktu — .navigation-wrapper je součást hlavičky všude). */
  box-sizing: border-box !important;
}

#header .project-email {
  display: none !important;
}

#header .menu-helper {
  display: none !important;
}

/* Diagnostika (Console): scrollWidth 449 vs clientWidth 430 = 19px
   přetok, viditelný už na úrovni hlavičky (HEADER/.navigation-wrapper)
   na KAŽDÉ stránce. Shoda v čase se zvětšením loga (24→32px) není
   náhoda — grid položky mají defaultně `min-width: auto`, takže se
   CSS Grid nesmí zmenšit pod přirozenou šířku svého obsahu. Širší
   logo v prostředním sloupci (auto) mohlo zbylé dva sloupce (menu,
   ikony) vytlačit přes dostupnou šířku. min-width:0 dovolí gridu
   sloupce zmenšit místo přetečení celé stránky. */
.navigation-wrapper > #navigation {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  min-width: 0 !important;
}

.navigation-wrapper > .site-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  text-align: center !important;
  min-width: 0 !important;
}

.navigation-wrapper > .top-nav {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-content: flex-end !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  top: auto !important;
  right: auto !important;
}

/* Odkaz Blog přesunutý JS z kategorií do pravého horního rohu
   (vedle ikon vyhledávání/účtu/košíku). Přesunuté <li> ztratilo
   kontext #navigation .menu-level-1, proto potřebuje vlastní reset
   a barvy — zrcadlí styl ostatních položek menu i chování při
   scrollu (bílá/stín na hero fotce → tmavá po scrollu). */
/* Odkaz Blog přesunutý JS z kategorií do pravého horního rohu
   (vedle ikon vyhledávání/účtu/košíku). Přesunuté <li> ztratilo
   kontext #navigation .menu-level-1, proto potřebuje vlastní reset
   a barvy — zrcadlí styl ostatních položek menu i chování při
   scrollu (bílá/stín na hero fotce → tmavá po scrollu). */
.gp-blog-moved {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 20px !important;
}

.gp-blog-moved a {
  color: var(--gp-ink) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

body.type-index #header:not(.gp-scrolled) .gp-blog-moved a {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !important;
}


/* ===================================================================
   3.3  HERO CAROUSEL — odstranění nativního margin-bottom
   Diagnostika: Bootstrap .carousel.slide (potomek .wide-carousel) má
   nativně margin-bottom: 40px. Margin collapsuje ven přes kontejner
   (který nemá BFC) a vytváří 40px bílou mezeru pod hero fotkou
   mezi hero a USP blokem.
   =================================================================== */

body.type-index .wide-carousel .carousel.slide {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------
   3.3b HERO BANNER — nadpis + tlačítko vlevo (volné místo na fotce)
   Diagnostika (DevTools): Shoptet nativně generuje uvnitř .item
   <span class="extended-banner-texts"> — STEJNÝ mechanismus, jaký
   používáme u bannerů dole (.extended-banner-title/.text/.link).
   Teď je prázdný, protože v administraci banneru nejsou vyplněná
   pole Nadpis / Text tlačítka (proto má odkaz třídu .extended-empty).
   ⚠ NUTNÁ PODMÍNKA: klientka musí v administraci banner "Teplákové
   soupravy" doplnit Nadpis a text tlačítka — bez toho zůstane span
   prázdný a tohle CSS nemá co zobrazit.
   Barva: tmavá (--gp-ink), protože tahle konkrétní fotka má světlé
   krémové pozadí — bílý text jako u tmavších bannerů dole by tu byl
   špatně čitelný. Pokud přibudou další slidy s tmavým pozadím, bude
   nutné barvu doladit zvlášť pro ně.
   --------------------------------------------------------------- */
body.type-index .wide-carousel .item {
  position: relative !important;
}

body.type-index .wide-carousel .extended-banner-texts {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  padding: 0 5% 0 calc(64px + 10%) !important;
  max-width: 46% !important;
  box-sizing: border-box !important;
}

body.type-index .wide-carousel .extended-banner-title {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: var(--gp-fs-h1) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--gp-on-photo) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 20px !important;
  display: block !important;
}

body.type-index .wide-carousel .extended-banner-text {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: var(--gp-fs-body) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin-bottom: 28px !important;
  display: block !important;
}

body.type-index .wide-carousel .extended-banner-link {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--gp-pill-radius) !important;
  padding: var(--gp-pill-pad) !important;
  font-size: var(--gp-fs-nav) !important;
  color: var(--gp-on-photo) !important;
  background: transparent !important;
}


/* ===================================================================
   3.4  BLOK SE 4 IKONAMI (benefitBanner) — přesunuto pod hero bannerem
   Diagnostika: .benefitBanner.position--benefitHomepage
     > .benefitBanner__item (4×)
       > .benefitBanner__picture > .benefitBanner__img
       > .benefitBanner__content > .benefitBanner__title (strong)
                                  > .benefitBanner__data
   JS (GYMPINK-JS.js) přesouvá celý blok hned za .wide-carousel.
   Zde jen vizuál — kartičky s krémovým pozadím, ikona vlevo / text
   vpravo, rovnoměrně přes celou šířku, vycentrováno (viz reference).
   =================================================================== */

body.type-index .benefitBanner.position--benefitHomepage {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-top: 56px !important;
  margin-bottom: 56px !important;
  padding: 0 32px !important;
  background: #fff !important;
}

body.type-index .benefitBanner__item {
  display: flex !important;
  align-items: center !important;
  gap: clamp(32px, 8vw, 120px) !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: var(--gp-header-bg) !important;
  padding: 48px 40px !important;
  border-radius: 0 !important;
}

body.type-index .benefitBanner__picture {
  flex: 0 0 auto !important;
  width: 96px !important;
}

body.type-index .benefitBanner__img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

body.type-index .benefitBanner__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.type-index .benefitBanner__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gp-ink) !important;
}

body.type-index .benefitBanner__data {
  font-size: 15px !important;
  color: var(--gp-ink-soft) !important;
}

/* ---------------------------------------------------------------
   3.4b MOBIL — kulaté miniatury v jedné řadě (podle vzoru exalted.com)
   Nahrazuje dřívější 2/1-sloupcové karty jednou řadou 4 koleček.
   ⚠ Obrázky (.benefitBanner__img) jsou teď ploché černé ikony
   (siluety legín/šortek...), ne fotky. Pro vzhled jako u vzoru je
   potřeba v administraci nahradit tyhle ikony za čtvercové FOTKY
   oblečení/modelky — bez výměny bude v kolečku černá silueta na
   krémovém pozadí místo fotky. CSS níže je připravené na obojí.
   --------------------------------------------------------------- */

@media (max-width: 1279px) {
  body.type-index .benefitBanner.position--benefitHomepage {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 20px !important;
    background: transparent !important;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }

  body.type-index .benefitBanner__item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Skutečný flex řádek dělá až odkaz UVNITŘ položky
     (.benefitBanner__item > a.benefitBanner__link) — proto se
     flex-direction musí přepnout tady, ne na __item. Jinak zůstane
     kolečko a text vedle sebe, text dostane pár pixelů a zalomí se
     písmeno po písmenu. */
  body.type-index .benefitBanner__link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.type-index .benefitBanner__picture {
    width: clamp(48px, 16vw, 64px) !important;
    height: clamp(48px, 16vw, 64px) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: var(--gp-header-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.type-index .benefitBanner__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.type-index .benefitBanner__content {
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.type-index .benefitBanner__title {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    letter-spacing: .02em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.type-index .benefitBanner__data {
    display: none !important;
  }
}


/* ===================================================================
   3.5  PÁR MALÝCH BANNERŮ (Bestsellers / Novinky) — vedle sebe
   Nová architektura: všechny 3 bannery (Bestsellers, Novinky, Týmové
   oblečení) jsou v administraci na pozici "Zápatí" — "Střed" na
   tomhle templatu nikam nevykresluje. JS vezme první dva (pár) a
   přesune je do vlastního wrapperu .gp-banner-pair pod blok ikon;
   poslední zůstává jako .gp-banner-big u patičky (viz 3.8).
   =================================================================== */

body.type-index .gp-banner-pair {
  display: flex !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 32px !important;
}

body.type-index .gp-banner-pair-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: var(--gp-ratio-duo) !important;
  overflow: hidden !important;
}

body.type-index .gp-banner-pair-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.type-index .gp-banner-pair-item > a {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.type-index .gp-banner-pair-item .extended-banner-texts {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 24px !important;
}

body.type-index .gp-banner-pair-item .extended-banner-title {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: clamp(22.4px, 2.52vw, 30.8px) !important; /* +40 % (bylo clamp(16px,1.8vw,22px)) */
  font-weight: 700 !important;
  color: var(--gp-on-photo) !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  display: block !important;
}

body.type-index .gp-banner-pair-item .extended-banner-text {
  display: none !important; /* u malých bannerů podle vzoru bez podtextu */
}

body.type-index .gp-banner-pair-item .extended-banner-link {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--gp-pill-radius) !important;
  padding: var(--gp-pill-pad) !important;
  font-size: var(--gp-fs-nav) !important;
  color: var(--gp-on-photo) !important;
  background: transparent !important;
}


/* ===================================================================
   3.6  VÝPIS PRODUKTŮ
   Diagnostika (kategorie /leginy/, Tango) — OVĚŘENO přímo v DevTools:
     #products.products.products-page.products-block (flex, wrap)
       > .product.col-xs-12.col-sm-6.col-md-4[data-testid="productItem"]
           > .inner
               > .img
                   > a[href] (bez třídy) > img
                   > .flags.flags-extra (badge NOVINKA, position:absolute)
               > .descr
                   > a.name[data-micro="url"] > span[data-micro="name"]
                   > .prices.row[data-micro="offer"] (flex)
                       > .col-xs-8.col-lg-12 > .price.price-final
                       > .tools-wrap.col-xs-4.col-lg-12
                           > a.product-link (jen &nbsp;, prázdný — ignorovat)
                           > .tools > a.btn "Detail" + .availability "Skladem"
   DŮLEŽITÉ: některé produkty mají navíc třídu .highlight-product
   (nativní Shoptet "zvýrazněný produkt", dvojnásobná šířka
   col-md-8) — to byl ten "rozbitý" řádek s textem bez obrázku.
   Řešení: force stejná šířka jako běžné produkty, ať mřížka
   zůstane jednotná (podle vzoru exalted.com nemá žádný produkt
   zvýrazněnou/širší dlaždici).
   Bez body.type-index prefixu — platí na homepage i kategoriích.
   =================================================================== */

.products.products-block {
  display: flex !important;
  flex-wrap: wrap !important;
  /* Varianta B: těsně — 4 px mezi fotkami, 26 px svisle (název + cena) */
  gap: 26px 4px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.products.products-block .product {
  /* 4 sloupce, 3 mezery po 4 px */
  flex: 0 0 calc((100% - 12px) / 4) !important;
  max-width: calc((100% - 12px) / 4) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tablet (768–1279 px): 3 sloupce, 2 mezery po 4 px */
@media (max-width: 1279px) {
  .products.products-block {
    gap: 26px 4px !important;
  }
  .products.products-block .product {
    flex: 0 0 calc((100% - 8px) / 3) !important;
    max-width: calc((100% - 8px) / 3) !important;
  }
}

/* Telefon (pod 768 px): 2 sloupce, 1 mezera 4 px */
@media (max-width: 767px) {
  .products.products-block .product {
    flex: 0 0 calc((100% - 4px) / 2) !important;
    max-width: calc((100% - 4px) / 2) !important;
  }
}

/* Vzor (exalted.com) drží na mobilu 2 sloupce až do nejmenších
   šířek — dřívější breakpoint na 480px přepínal na 1 sloupec, což
   dělalo hodně dlouhou stránku s malými obrázky. Zrušeno. */

.product,
.product .inner,
.product .img,
.product .descr {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.products.products-block .product .inner,
.products.products-block .product .img,
.products.products-block .product .img > a {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.product .img {
  /* 2:3 = poměr původních fotek; Shoptet je vkládá do plátna 4:3 s bílými
     okraji, které se při 2:3 + object-fit: cover ořežou přesně. */
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  position: relative !important;
}

.product .img a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.product .img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.product .descr {
  padding: 14px 0 0 !important;
}

.product a.name {
  font-size: var(--gp-fs-body) !important;
  font-weight: 400 !important;
  color: var(--gp-ink) !important;
  text-decoration: none !important;
  text-align: left !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  display: block !important;
}

.product a.name:hover {
  color: var(--gp-ink-soft) !important;
}

.product .prices.row {
  display: block !important;
  margin: 0 !important;
}

.product .prices.row > .col-xs-8,
.product .prices.row > [class*="col-"] {
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

.product .price {
  font-size: var(--gp-fs-small) !important;
  font-weight: 400 !important;
  color: var(--gp-ink-soft) !important;
  text-align: left !important;
  margin-top: 4px !important;
}

/* "Detail" tlačítko a "Skladem" text — vzor (exalted.com) je na
   listingu nezobrazuje, karta je čistě obrázek + jméno + cena. */
.product .tools-wrap {
  display: none !important;
}

/* Zvýrazněný produkt (.highlight-product, nativně dvojnásobná
   šířka) — sjednoceno na stejnou šířku jako ostatní, ať mřížka
   zůstane pravidelná. */
.products.products-block .product.highlight-product {
  flex: 0 0 calc((100% - 12px) / 4) !important;
  max-width: calc((100% - 12px) / 4) !important;
}

@media (max-width: 900px) {
  .products.products-block .product.highlight-product {
    flex: 0 0 calc((100% - 4px) / 2) !important;
    max-width: calc((100% - 4px) / 2) !important;
  }
}

/* Ověřeno v DevTools: .highlight-product má uvnitř .inner nativně
   display:flex (obrázek a text VEDLE SEBE, ne pod sebou jako
   u běžných karet) — proto vypadal stlačený/rozbitý. Přepsáno na
   stejné rozložení jako standardní karta (obrázek nahoře přes
   celou šířku, text pod ním). */
.product.highlight-product .inner {
  display: block !important;
}

.product.highlight-product .img,
.product.highlight-product .descr {
  width: 100% !important;
  flex: none !important;
}

/* Šedé pozadí + vycpávka kolem fotky u .highlight-product — běžné
   karty ho nemají, vypadalo jako "karta v kartě". */
.product.highlight-product,
.product.highlight-product .inner,
.product.highlight-product .img {
  background: transparent !important;
  padding: 0 !important;
}

/* .highlight-product má navíc prázdný .short-descr mezi jménem
   a cenou (běžné karty ho nemají) — způsoboval velkou mezeru. */
.product.highlight-product .short-descr {
  display: none !important;
}


/* ===================================================================
   3.7  PATIČKA
   Diagnostika: footer.footer
     > h2.sr-only
     > .container.footer-rows
         > .row.custom-footer.elements-4
             > .custom-footer__contact / __articles / __section2 / __onlinePayments
               H3.pageElement__heading (fw=600, 14px — zmenšujeme na 11px uppercase)
               a.project-email (bylo 18px/bold — zmenšeno)
     > .container.footer-bottom
         > span (a.image logo + a.title name) + span.copyright
   Nativní: mt=80px → 40px. Bg=rgb(246,246,246) ≈ --gp-tile.
   Referenční vzor: exalted.com — off-white bg, column headers uppercase,
   linky šedé, footer-bottom s logem vlevo a copyright vpravo.
   Bez body.type-index — patička je na všech stránkách.
   =================================================================== */

footer.footer {
  position: relative !important;
  margin-top: 40px !important;
  background: var(--gp-header-bg) !important;
}

/* Logo GymPink v pravém horním rohu patičky — vkládá JS (přesná
   diagnostika: footer.footer musí mít position:relative, aby se
   podle něj logo dalo umístit). */
.footer .gp-footer-logo {
  position: absolute !important;
  top: 32px !important;
  left: 32px !important;
  display: block !important;
  line-height: 0 !important;
}

.footer .gp-footer-logo img {
  height: 28px !important;
  width: auto !important;
  display: block !important;
}

.footer .footer-rows,
.footer .footer-bottom {
  max-width: 100% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.footer .footer-rows {
  padding-top: 72px !important;
  padding-bottom: 32px !important;
}

/* Nadpisy sloupců */
.footer .pageElement__heading {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gp-ink) !important;
  margin-bottom: 18px !important;
}

/* Email odkaz — původně 18px/bold */
.footer .project-email {
  font-size: var(--gp-fs-body) !important;
  font-weight: 400 !important;
  color: var(--gp-ink-soft) !important;
  text-decoration: none !important;
}

.footer .project-email:hover {
  color: var(--gp-ink) !important;
}

/* Všechny linky ve sloupcích */
.footer .custom-footer a {
  font-size: var(--gp-fs-small) !important;
  color: var(--gp-ink-soft) !important;
  text-decoration: none !important;
}

.footer .custom-footer a:hover {
  color: var(--gp-ink) !important;
}

/* Seznamy odkazů */
.footer .custom-footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer .custom-footer li {
  margin-bottom: 10px !important;
}

/* Sociální ikony */
.footer .social-icons {
  margin-top: 12px !important;
  display: flex !important;
  gap: 16px !important;
}

/* Footer-bottom: logo vlevo, copyright vpravo */
.footer .footer-bottom {
  border-top: 1px solid var(--gp-line) !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.footer .footer-bottom > span:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Logo v patičce */
.footer .footer-bottom a.image img {
  height: 24px !important;
  width: auto !important;
}

/* Název obchodu v patičce */
.footer .footer-bottom a.title {
  font-size: var(--gp-fs-small) !important;
  color: var(--gp-ink-soft) !important;
  text-decoration: none !important;
}

/* Copyright text */
.footer .copyright {
  font-size: var(--gp-fs-small) !important;
  color: var(--gp-ink-soft) !important;
}


/* ===================================================================
   3.8  VELKÝ BANNER (Týmové oblečení) — plná šířka, zůstává u patičky
   Nová architektura (viz 3.5): poslední banner v pořadí administrace
   dostává od JS třídu .gp-banner-big a zůstává, kde je (u patičky),
   místo dřívějšího :has() rozlišení podle přítomnosti textu (nebylo
   spolehlivé — malé bannery mají text taky).
   =================================================================== */

body.type-index .gp-banner-big-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-top: 64px !important;
  padding: 0 32px !important;
}

body.type-index .gp-banner-big {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: var(--gp-ratio-wide) !important;
}

body.type-index .gp-banner-big img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.type-index .gp-banner-big > a {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.type-index .gp-banner-big .extended-banner-texts {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 48px !important;
}

body.type-index .gp-banner-big .extended-banner-title {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: clamp(28px, 3.36vw, 44.8px) !important; /* +40 % (bylo --gp-fs-h2 = clamp(20px,2.4vw,32px)) */
  font-weight: 700 !important;
  color: var(--gp-on-photo) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 16px !important;
  display: block !important;
}

body.type-index .gp-banner-big .extended-banner-text {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: var(--gp-fs-body) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin-bottom: 28px !important;
  display: block !important;
}

body.type-index .gp-banner-big .extended-banner-link {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--gp-pill-radius) !important;
  padding: var(--gp-pill-pad) !important;
  font-size: var(--gp-fs-nav) !important;
  color: var(--gp-on-photo) !important;
  background: transparent !important;
}


/* ===================================================================
   3.9  SKRYTÉ BLOKY HOMEPAGE
   "Nové články" a "Uvítací text" nemají v Návrhář šablon nativní
   vypínací přepínač. CSS hide je jediná možnost bez zásahu do kódu
   šablony. Selektory ověřeny diagnostikou DOM 2025-08-17.
   =================================================================== */

body.type-index .homepage-blog-wrapper {
  display: none !important;
}

body.type-index .welcome-wrapper {
  display: none !important;
}


/* ===================================================================
   3.10  DETAIL PRODUKTU — horní blok (galerie, název, cena, tlačítko)
   Diagnostika (ověřeno v DevTools):
     .p-detail-inner
       > .row
           > .col-md-4                      (jen H1 nadpis)
           > .col-md-8.pull-right.detail-img.p-image-wrapper (galerie)
       > .col-md-4.pull-left                (popis + formulář: varianta,
                                              cena, tlačítko Do košíku)
       > .shp-tabs-wrapper.p-detail-tabs-wrapper  (POPIS/DISKUZE, POBO)

   Nadpis a formulář jsou DVA samostatné plovoucí sloupce, ne jeden
   blok vedle obrázku. Několik CSS pokusů (flex/float/clearfix na
   .row, různé úrovně specificity) se ukázalo nespolehlivých —
   nativní styl šablony evidentně vyhrával nad pozičními pravidly,
   zatímco kosmetická pravidla (cena, tlačítko) se aplikovala
   normálně. Pozice teď řeší JS přímo přes inline style s
   'important' prioritou (GYMPINK-JS.js) — to vyhraje nad jakýmkoliv
   externím CSS pravidlem bez ohledu na jeho specificitu.
   Záložky POPIS/DISKUZE (POBO obsah) beze změny.
   Bez body.type-index prefixu — platí jen na stránce produktu.
   =================================================================== */

/* ZÁLOHA (nezávislá na JS): kdyby JS krok pro nějaký důvod
   selhal/neproběhl (např. jiné časování na některých stránkách),
   tohle samo o sobě zajistí, že se .row (nadpis+obrázek) "zabalí"
   kolem svého plovoucího potomka a nezhroutí se — karta s cenou
   pak spadne POD řádek, ne vedle něj do zbylé škvíry.
   Jen DESKTOP — na mobilu necháváme nativní chování šablony
   (viz poznámka na konci souboru, proč jsme mobilní úpravy detailu
   produktu zrušili). */
@media (min-width: 901px) {
.p-detail-inner {
  display: block !important;
}

.p-detail-inner > .row {
  overflow: hidden !important;
}
}

.p-detail-inner > .row > .col-md-4 h1 {
  font-size: var(--gp-fs-h2) !important;
  line-height: 1.2 !important;
}

.detail-img.p-image-wrapper img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.p-thumbnails .p-thumbnail {
  border: 1px solid transparent !important;
}

/* Diagnostika: náš soubor thumbnaily nikdy nestyloval — ořezávání
   dole dělalo nativní Shoptet pravidlo (čtvercový box + object-fit:
   cover). Přepnuto na "contain", ať se vejde celá fotka. */
.p-thumbnails .p-thumbnail img {
  object-fit: contain !important;
  background: var(--gp-tile) !important;
}

.p-thumbnails .p-thumbnail.highlighted {
  border: 1px solid var(--gp-ink) !important;
}

.p-short-description {
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

/* POZOR: .variant-list.variant-not-chosen-anchor byl dřív omylem
   skrytý (display:none) v domnění, že jde o duplicitní varování —
   ve skutečnosti je to obal SKUTEČNÉHO funkčního výběru varianty
   (velikosti). Skrytí celého obalu znemožnilo vybrat velikost.
   NEZKRÝVAT CELÝ .variant-list.

   Ověřeno v DevTools: text "Zvolte variantu" pod cenou je JINÝ,
   samostatný prvek — placeholder text v poli dostupnosti skladem
   (.order-availability .availability .choose-variant.default-variant),
   zobrazený jen dokud není vybraná varianta. Po výběru JS přepne na
   skutečný stav skladem (jiný span ze stejné skupiny). Bezpečné
   schovat JEN tenhle konkrétní text, funkční dropdown nahoře
   zůstává nedotčený. */
.order-availability .availability .choose-variant.default-variant {
  display: none !important;
}

.p-detail-inner .price.row {
  margin: 20px 0 !important;
}

.p-detail-inner .price.row > [class*="col-"],
.p-detail-inner .variant-list > [class*="col-"],
.p-detail-inner .variant-list {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.p-final-price-wrapper .price {
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--gp-ink) !important;
}

/* Jen DESKTOP — cena+dostupnost vlevo (pod sebou), množství+tlačítko
   vedle nich vpravo (svisle vycentrované na výšku obou levých řádků).
   .price.row je Bootstrap .row s víc dětmi (shipping-availability,
   p-final-price-wrapper, order-availability, spaced-small,
   add-to-cart) — místo přeskládávání DOM je přes CSS grid umístíme
   do konkrétních buněk podle jejich existující třídy. */
@media (min-width: 901px) {
  .p-detail-inner .price.row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 32px !important;
    row-gap: 4px !important;
    align-items: center !important;
  }

  .p-detail-inner .price.row .shipping-availability {
    grid-column: 1 / -1 !important;
  }

  .p-detail-inner .price.row .p-final-price-wrapper {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .p-detail-inner .price.row .order-availability {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .p-detail-inner .price.row .spaced-small {
    display: none !important;
  }

  .p-detail-inner .price.row .add-to-cart {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    margin-top: -8px !important;
  }
}

.add-to-cart {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.add-to-cart .quantity {
  align-self: flex-start !important;
}

.add-to-cart .btn.btn-conversion {
  width: 100% !important;
  flex-grow: 0 !important;
  background: var(--gp-ink) !important;
  border-color: var(--gp-ink) !important;
  color: #fff !important;
  padding: 16px 24px !important;
  font-size: 15px !important;
  border-radius: 4px !important;
}

/* Jen DESKTOP — množství a tlačítko vedle sebe v jedné řádce
   (na mobilu zůstává pod sebou, tam to funguje dobře). */
@media (min-width: 901px) {
  .add-to-cart {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .add-to-cart .quantity {
    flex: 0 0 auto !important;
    align-self: center !important;
  }

  .add-to-cart .btn.btn-conversion {
    width: auto !important;
    flex: 1 1 auto !important;
  }
}

/* ===================================================================
   3.11  KATEGORIE — skrytí popisu pod nadpisem
   Diagnostika (ověřeno v DevTools): .category-top obsahuje
   h1.category-title (nadpis) a jako sourozence div.category-perex
   (odstavec popisu). Skrytí .category-perex nadpisu vůbec nevadí.
   =================================================================== */

.category-perex {
  display: none !important;
}

/* Tlačítko filtru na stejném řádku jako "Řadit podle" — ČISTĚ CSS.
   Diagnostika (DevTools): dřív to řešil JS přesunem #filters-wrapper
   do #category-header. Jenže Shoptet si po aplikaci filtru blok sám
   překreslí a přesun zahodí (třída gp-filtry-presunuto zmizí) —
   layout se pak rozpadl a filtr skočil doprostřed. Řešení bez JS:
   .category-content-wrapper je flex a pořadí se řídí `order`, takže
   na fyzickém umístění v DOM nezáleží a překreslení nevadí.

   display:contents rozpustí obalové divy, aby se tlačítko a panel
   staly přímými flex položkami. */
.category-content-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
}

/* výchozí: cokoli neznámého jde na konec přes celou šířku */
.category-content-wrapper > * {
  order: 9;
  flex: 0 0 100%;
}

#filters-wrapper,
#filters-wrapper > .filters-wrapper {
  display: contents !important;
}

#filters-default-position {
  display: none !important;
}

/* 1. tlačítko filtru vlevo */
.category-content-wrapper .filters-unveil-button-wrapper {
  order: 1 !important;
  flex: 0 0 auto !important;
}

/* 2. řazení vpravo */
#category-header {
  order: 2 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin: 0 !important;
}

/* 3. rozbalený panel přes celou šířku pod řádkem */
.category-content-wrapper #filters {
  order: 3 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
}

/* zrušit nativní `margin: 0 auto; max-width: 650px` — to centrovalo
   posuvník ceny doprostřed stránky */
.category-content-wrapper #filters .slider-wrapper {
  margin: 0 !important;
  max-width: none !important;
}

/* 4. výpis produktů až za tím */
.category-content-wrapper #products {
  order: 4 !important;
  flex: 0 0 100% !important;
}


/* ===================================================================
   3.12  MOBIL — bannery (pár + velký)
   Diagnostika (screenshot, iPhone 390px): na úzké obrazovce se pilulka
   CTA u velkého banneru ořízla spodní hranou banneru — titulek + CTA
   nemají v poměru 1,92:1 dost výšky. Řešení: na mobilu zmenšit typo
   i pilulku a u velkého banneru povolit vyšší poměr stran.
   Pár bannerů zůstává vedle sebe (jako vzor), jen s menším textem.
   =================================================================== */

@media (max-width: 900px) {
  /* Bannery pod sebou přes celou šířku (jako vzor) — vedle sebe byly
     na úzké obrazovce moc malé a titulek se pral s CTA tlačítkem. */
  body.type-index .gp-banner-pair {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 20px !important;
  }

  body.type-index .gp-banner-pair-item {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  body.type-index .gp-banner-big-wrap {
    padding: 0 20px !important;
    margin-top: 32px !important;
  }

  /* Poznámka: dřív tu bylo aspect-ratio: 1.3 (mělo dát víc místa na
     titulek a CTA). Způsobilo to ale, že se banner ořízl a titulek
     s tlačítkem zmizely — ponecháváme nativní poměr ze sekce 3.8. */

  body.type-index .gp-banner-pair-item .extended-banner-title,
  body.type-index .gp-banner-big .extended-banner-title {
    font-size: clamp(28px, 8.4vw, 42px) !important; /* +40 % (bylo clamp(20px,6vw,30px)) */
    margin-bottom: 16px !important;
  }

  body.type-index .gp-banner-pair-item .extended-banner-link,
  body.type-index .gp-banner-big .extended-banner-link {
    padding: 11px 28px !important;
    font-size: 13px !important;
  }

  body.type-index .gp-banner-pair-item .extended-banner-texts,
  body.type-index .gp-banner-big .extended-banner-texts {
    padding: 16px !important;
  }
}


/* ===================================================================
   3.13  MOBIL — hlavička (logo + ikony)
   Diagnostika (DevTools, iPhone): Shoptet má vlastní mobilní verzi
   hlavičky, kterou aktivuje třídou .ums_mobile_header_v1--on na <html>.
   V ní má nativní pravidlo:
     @media (max-width:767px) {
       :where(.ums_mobile_header_v1--on) #header .site-name {
         position: absolute; top: 0;
       }
     }
   Tím logo VYPADNE z našeho gridu (menu | logo | ikony), sedne si
   absolutně nahoru vlevo a položí se PŘES ikonu košíku. Ikony tedy
   nechyběly — byly celou dobu pod logem.
   Řešení: vrátit .site-name do toku (position:static), ať ho grid
   umístí doprostřed, a explicitně zajistit viditelnost ikon vpravo.
   =================================================================== */

@media (max-width: 1279px) {
  /* Na mobilu nemá smysl odsazovat hlavičku 30px od horní hrany
     (na desktopu "pluje" nad hero fotkou) — sedne rovnou nahoru. */
  body.type-index #header {
    top: 0 !important;
  }

  #header .site-name {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    text-align: center !important;
  }

  .navigation-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }

  /* ikony (hledání / účet / košík) — zajistit, že jsou vidět a v řadě */
  .navigation-wrapper > .top-nav {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
  }

  #header .nav-list.top-nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #header .subnav-left,
  #header .subnav-right {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
  }

  /* Logo na mobilu — zvětšeno z 24px na 32px, ať je dobře vidět.
     Prostor je: BLOG je na mobilu skrytý (viz níž), takže je vedle
     loga jen hamburger a ikony — 32px by se mělo vejít bez kolize. */
  .site-name img {
    height: 32px !important;
    max-height: 32px !important;
  }

  /* textový odkaz BLOG zabírá na úzké liště moc místa a tlačí logo
     do ikon — na mobilu ho schováváme (v hamburger menu zůstává) */
  .gp-blog-moved {
    display: none !important;
  }
}


/* ===================================================================
   3.14  MOBIL — čitelnost textu ve vysunutém menu (hamburger)
   Diagnostika (screenshot): na homepage je hlavička nad hero fotkou
   průhledná, proto má menu bílý text se stínem (sekce 3.0). Vysunuté
   mobilní menu má ale BÍLÉ pozadí → bílý text na bílém = nečitelné.
   Řešení: v mobilním menu vynutit tmavý text a zrušit stín. Selektor
   musí zrcadlit specificitu pravidla ze 3.0, aby ho přebil.
   =================================================================== */

@media (max-width: 900px) {
  #navigation .menu-level-1 a,
  body.type-index #header:not(.gp-scrolled) .menu-level-1 a,
  body.type-index #header:not(.gp-scrolled) #navigation .menu-level-1 a {
    color: var(--gp-ink) !important;
    text-shadow: none !important;
  }

  /* položky menu v zásuvce pod sebou, oddělené linkou */
  #navigation .menu-level-1 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  #navigation .menu-level-1 li {
    display: block !important;
    width: 100% !important;
  }

  #navigation .menu-level-1 a {
    display: block !important;
    padding: 16px 20px !important;
    font-size: 15px !important;
  }
}


/* ===================================================================
   3.15  MOBIL — logo v patičce na střed a o 20 % větší
   Na desktopu zůstává vlevo (zarovnané s prvním sloupcem "Kontakt",
   viz sekce 3.7) — tady měníme jen mobilní zobrazení.
   =================================================================== */

@media (max-width: 900px) {
  /* Centrování přes left/right:0 + margin auto, ne přes
     left:50% + translateX(-50%) — ta varianta se s nativním
     `left: 32px` prala a logo skončilo useknuté u levého okraje. */
  .footer .gp-footer-logo {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer .gp-footer-logo img {
    height: 34px !important;   /* 28px + 20 % */
  }
}


/* ===================================================================
   3.16  MOBIL — výpis produktů v kategorii (podle vzoru)
   Vzor drží 2 sloupce, obrázek vyplňuje celou šířku dlaždice, pod ním
   název a cena čitelnou velikostí. Diagnostika (screenshot /leginy/):
   obrázky nevyplňovaly šířku sloupce a texty byly drobné.
   =================================================================== */

@media (max-width: 1279px) {
  /* Šablona na telefonu dělá z karty flex (sloupec s pevnou výškou),
     který fotku smrští a roztáhne mezeru mezi názvem a cenou.
     Vracíme běžné skládání shora dolů. */
  .products.products-block .product,
  .products.products-block .product .inner,
  .products.products-block .product .descr {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .products.products-block .product .img {
    flex: 0 0 auto !important;
    height: auto !important;
  }

  /* Fotka vyplní celý rámeček 2:3 (stejně jako na desktopu). Dřív tu
     bylo height:auto → fotka (plátno 4:3) zabrala jen půlku rámečku. */
  .products.products-block .product .img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    overflow: hidden !important;
  }

  .products.products-block .product .img > a {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .products.products-block .product .img > a::before,
  .products.products-block .product .img > a::after {
    display: none !important;
  }

  .products.products-block .product .img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* text stejně jako na desktopu: těsně pod fotkou, bez odsazení */
  .products.products-block .product .descr {
    padding: 14px 0 0 !important;
  }
}

@media (max-width: 767px) {
  .products.products-block .product a.name {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .products.products-block .product .price {
    font-size: 13px !important;
  }
}

@media (max-width: 900px) {
  /* filtr + řazení na úzké obrazovce: řazení se smí zalomit */
  #category-header {
    flex-wrap: wrap !important;
  }
}


/* ===================================================================
   MOBIL — detail produktu: NÁVRAT K NATIVNÍ ŠABLOŇĚ
   Po opakovaných pokusech (3.17–3.22 v historii Gitu) se na mobilu
   objevil neviditelný prvek, který kradl kliky na tlačítko Do košíku
   a výběr varianty — otevíral místo toho fotku z popisu. Příčinu se
   nepodařilo spolehlivě najít ani po několika kolech oprav.
   Rozhodnutí: na mobilu detail produktu NEUPRAVUJEME vůbec — necháváme
   nativní responzivní chování šablony Tango, které si Shoptet sám
   odladil. Naše úpravy (rozložení, POBO úklid, velikost tlačítka,
   vystředění nákupního panelu) platí JEN pro desktop (min-width:901px).
   Pokud se v budoucnu bude chtít mobil znovu stylovat, doporučený
   postup: nejdřív najít viníka přes DevTools element picker (kliknout
   přímo na postižené místo, ne číst HTML zdroj) — to se v tomhle kole
   nestihlo udělat před rozhodnutím vrátit se k nativnímu chování.
   =================================================================== */

/* Widget "advantages-four" (JS ho po vytažení zanořeného obsahu
   nechá s jediným vyplněným sloupečkem) — jen DESKTOP, ať se stejný
   widget na mobilu vykresluje nativně jako zbytek POBO popisu. */
@media (min-width: 901px) {
  .rc-advantages-four {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }

  .rc-advantages-four__ico-container:empty {
    display: none !important;
  }

  #pobo-all-content .widget-container {
    max-width: 100% !important;
  }
}


/* ===================================================================
   MOBIL — vystředění nákupního bloku (varianta, cena, množství)
   Opatrně: jen text-align a flex justify-content/margin:auto — ŽÁDNÉ
   změny display/position na .p-detail-inner, .row ani cokoli u
   galerie/miniatur/POBO popisu (to byl zdroj minulého problému
   s kradenými kliky). Pokud se cokoli podobného objeví znovu, tohle
   je první podezřelé místo ke zrušení.
   =================================================================== */

@media (max-width: 900px) {
  .p-detail-inner .price,
  .p-detail-inner .p-short-description {
    text-align: center !important;
  }

  .p-detail-inner .variant-list {
    display: flex !important;
    justify-content: center !important;
  }

  .p-detail-inner .variant-list > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 280px !important;
  }

  .p-detail-inner .add-to-cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .p-detail-inner .add-to-cart .quantity {
    margin: 0 auto 12px !important;
  }
}


/* ===================================================================
   MOBIL — zvýraznění nativního tlačítka "Do košíku"
   Na mobilu se ukazuje jiné (ikonkové) tlačítko než na desktopu:
   .btn.btn-icon.btn-plain.btn-cart — má jen ikonu, text "Do košíku"
   je uvnitř jako .sr-only (skrytý, jen pro čtečky obrazovky). Bez
   viditelného textu nemusí být jasné, že jde o CTA k nákupu.
   Řešení: zviditelnit ten existující text (ne přidávat nový) a dát
   tlačítku tmavé pozadí + tvar pilulky, ať je nepřehlédnutelné.
   Opatrně: jen barvy/tvar/text, žádné display:block na rodičích. */

@media (max-width: 900px) {
  .add-to-cart .btn.btn-icon.btn-plain.btn-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    padding: 10px 22px !important;
    min-height: 42px !important;
    background: var(--gp-ink) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important;
  }

  /* zviditelnění existujícího textu "Do košíku" (byl jen pro čtečky) */
  .add-to-cart .btn.btn-icon.btn-plain.btn-cart .sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    color: #fff !important;
  }
}


/* MOBIL — dostupnost (Skladem/Vyprodáno) na střed a trochu větší */
@media (max-width: 900px) {
  .p-detail-inner .order-availability,
  .p-detail-inner .order-availability .availability {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }

  .p-detail-inner .order-availability .choose-variant {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}


/* ===================================================================
   Globální pojistka proti horizontálnímu přetečení + oprava fixed
   hlavičky na mobilu
   (Znovu obnoveno — omylem smazáno při velké revizi mobilního detailu
   produktu, protože bylo fyzicky umístěné ve stejné části souboru.)

   Diagnostika (Console, getComputedStyle na #header a jeho předcích):
   nejdřív jsme mysleli, že stačí přesunout overflow-x:hidden z <html>
   na <body>. Nestačilo — stejná past (nový scrollovací kontext, který
   rozbíjí position:fixed) se v mobilních prohlížečích umí objevit
   i na <body>, ne jen na kořenovém <html>. Správné řešení: overflow
   nedávat na html ANI na body, ale na vnitřní wrapper (.overall-
   -wrapper), který hlavičku i obsah obaluje. Ten není transformovaný
   ani jinak neobvyklý (ověřeno), takže nemění kontext pro fixed prvky
   uvnitř — jen ořízne přetečení.
   =================================================================== */

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

html, body {
  max-width: 100vw !important;
}

.overall-wrapper {
  overflow-x: hidden !important;
}


/* ===================================================================
   3.23  BANNERY — lehký stín pod bílým textem (lepší čitelnost na
   světlých / růžových fotkách). Titulky + text tlačítka "Podívej se".
   Záměrně jemnější než stín v hlavičce. Zesílit/zeslabit: druhé číslo
   (blur) a poslední (průhlednost).
   =================================================================== */
body.type-index .gp-banner-pair-item .extended-banner-title,
body.type-index .gp-banner-big .extended-banner-title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 2px 14px rgba(0, 0, 0, .35) !important;
}

body.type-index .gp-banner-pair-item .extended-banner-link,
body.type-index .gp-banner-big .extended-banner-link {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 1px 10px rgba(0, 0, 0, .28) !important;
}


/* ===================================================================
   3.24  HLAVNÍ MENU — skrytí kategorií Novinky a Bestsellers
   Skrýváme podle adresy odkazu (ne podle textu), celou položku <li>,
   v celé hlavičce (hlavní lišta, "Více" i mobilní zásuvka).
   Kategorie samotné dál existují a fungují na svých URL — jen nejsou
   v menu. Vrátit zpět: smazat tento blok.
   =================================================================== */
#header li:has(> a[href$="/novinky/"]),
#header li:has(> a[href$="/bestsellers/"]),
#navigation li:has(> a[href$="/novinky/"]),
#navigation li:has(> a[href$="/bestsellers/"]) {
  display: none !important;
}

/* záloha pro prohlížeče bez :has() — skryje aspoň samotný odkaz */
#header a[href$="/novinky/"],
#header a[href$="/bestsellers/"],
#navigation a[href$="/novinky/"],
#navigation a[href$="/bestsellers/"] {
  display: none !important;
}


/* ===================================================================
   3.25  HOMEPAGE — skupina produktů jako vodorovný pás ("Nový drop")
   Vzor: hlavička s nadpisem vlevo a "Zobrazit vše" + šipkami vpravo,
   pod tím řada portrétních karet (3:4) s názvem a cenou.
   Nativní struktura (z DevTools): #products-N.products-inline
     > .product > .p > a.image (img) + .p-in > .p-in-in (a.name,
       .ratings-wrapper[štítky + dostupnost]) + .p-bottom (cena, Detail)
   JS (krok "Homepage — skupina produktů jako vodorovný pás") obalí
   nadpis + skupinu do .gp-drop a přidá odkaz + šipky.
   Název sekce se mění v administraci (Produkty na titulní straně).
   PRVNÍ NASAZENÍ — selektory ceny/tlačítka doladit podle DevTools.
   =================================================================== */
body.type-index .gp-drop {
  padding: 0 32px !important;
  margin: 64px 0 0 !important;
}

body.type-index .gp-drop-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 18px !important;
}

body.type-index .gp-drop-head .homepage-group-title {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: clamp(20px, 1.9vw, 26px) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--gp-ink) !important;
}

body.type-index .gp-drop-tools {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

body.type-index .gp-drop-all {
  font-size: 14px !important;
  color: var(--gp-ink) !important;
  text-decoration: none !important;
  margin-right: 4px !important;
}

body.type-index .gp-drop-all:hover {
  text-decoration: underline !important;
}

body.type-index .gp-drop-arrow {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--gp-line) !important;
  background: #fff !important;
  color: var(--gp-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

body.type-index .gp-drop-arrow:hover:not(:disabled) {
  border-color: var(--gp-ink) !important;
}

/* Pás */
body.type-index .gp-drop .products-inline {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

body.type-index .gp-drop .products-inline::-webkit-scrollbar {
  display: none !important;
}

/* Karta */
body.type-index .gp-drop .products-inline > .product {
  flex: 0 0 calc((100% - 32px) / 4.5) !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scroll-snap-align: start !important;
}

body.type-index .gp-drop .product .p {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Fotka — portrét 3:4, bez rámečku */
body.type-index .gp-drop .product .p a.image {
  display: block !important;
  position: relative !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* 2:3 = poměr původních fotek. Shoptet je vkládá do krajinného plátna
     4:3 s bílými okraji; při 2:3 a object-fit: cover se okraje ořežou
     přesně a fotka lícuje s nadpisem. */
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  background: var(--gp-tile) !important;
}

body.type-index .gp-drop .product .p a.image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Texty pod fotkou */
body.type-index .gp-drop .product .p .p-in,
body.type-index .gp-drop .product .p .p-in-in {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  text-align: left !important;
}

body.type-index .gp-drop .product .p a.name {
  display: block !important;
  margin: 10px 0 2px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: var(--gp-ink) !important;
  text-align: left !important;
}

/* Cena pod názvem, vlevo */
body.type-index .gp-drop .product .p .p-bottom {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  flex: none !important;
}

body.type-index .gp-drop .product .p .p-bottom .prices,
body.type-index .gp-drop .product .p .p-bottom .price,
body.type-index .gp-drop .product .p .p-bottom .price-final,
body.type-index .gp-drop .product .p .p-bottom .price-final strong {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--gp-ink-soft) !important;
}

/* Cena: všechny vnitřní obaly zarovnat doleva (nativně se centrovala). */
body.type-index .gp-drop .product .p .p-bottom,
body.type-index .gp-drop .product .p .p-bottom * {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  float: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
}
body.type-index .gp-drop .product .p .p-bottom {
  width: 100% !important;
}

/* Skryto: štítky + "Skladem" + hodnocení, tlačítko Detail */
body.type-index .gp-drop .product .p .ratings-wrapper,
body.type-index .gp-drop .product .p .flags,
body.type-index .gp-drop .product .p .p-tools,
body.type-index .gp-drop .product .p .tools-wrap,
body.type-index .gp-drop .product .p .p-bottom .btn,
body.type-index .gp-drop .product .p .p-bottom .availability {
  display: none !important;
}

/* Tablet / mobil: posun prstem, šipky pryč, víc karet vedle sebe */
@media (max-width: 900px) {
  body.type-index .gp-drop {
    padding: 0 16px !important;
    margin-top: 40px !important;
  }
  body.type-index .gp-drop-arrow {
    display: none !important;
  }
  body.type-index .gp-drop .products-inline > .product {
    flex: 0 0 calc((100% - 16px) / 2.5) !important;
  }
}

@media (max-width: 600px) {
  body.type-index .gp-drop .products-inline > .product {
    flex: 0 0 calc((100% - 8px) / 1.5) !important;
  }
}


/* ===================================================================
   3.26  PŘÍZNAKY (štítky) — varianta A: obdélníky v rohu fotky
   Ostré rohy, 11px velkými písmeny, těsně v levém horním rohu fotky,
   pod sebou s mezerou 4 px. Barvy pozadí štítků se nastavují
   v administraci (Nastavení → Produkty → Parametry a příznaky) —
   Shoptet je zapisuje inline; text je vždy bílý.
   Paleta: Novinka #1a1a1a · Bestsellers #a3336f · Akce #d3312b ·
           Výprodej #8f1d2c · Tip #2d6a6e
   JS přesouvá .flags-inline do .flags-extra uvnitř .img (výpis kategorií).
   =================================================================== */
.product .img .flags,
.product .img .flags-extra,
body.type-index .gp-drop .product .p a.image .extra-flags,
body.type-index .gp-drop .product .p a.image .flags {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* .extra-flags obsahuje .flags — vnitřní obal nesmí být znovu absolutní */
body.type-index .gp-drop .product .p a.image .extra-flags .flags {
  position: static !important;
}

/* Reset pevných rozměrů/čtvercového odznaku z Tanga (viz i JS). */
.product .img .flags,
.product .img .flags-extra,
.product .img .flags > *,
body.type-index .gp-drop .product .p a.image .extra-flags,
body.type-index .gp-drop .product .p a.image .flags,
body.type-index .gp-drop .product .p a.image .flags > * {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  flex: 0 0 auto !important;
}

.product .img .flags > *::before,
.product .img .flags > *::after,
.product .img .flags .flag::before,
.product .img .flags .flag::after {
  display: none !important;
  content: none !important;
}

.product .img .flags > *,
.product .img .flags .flag,
body.type-index .gp-drop .product .p a.image .flags > *,
body.type-index .gp-drop .product .p a.image .flags .flag {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  white-space: nowrap !important;
}


/* ===================================================================
   3.27  DETAIL PRODUKTU 2 (PDP2) — prodejní panel
   Zapíná se jen třídou body.gp-pdp2 (JS: produkt BABY PINK legíny,
   nebo ?pdp=2 v adrese). Ostatní produkty zůstávají beze změny.
   Layout (desktop): vlevo galerie, vpravo název, krátký popis s
   odrážkami, velikost, cena + dostupnost, množství + tlačítko, řádek
   důvěry. Záložky (popis) pod celou šířkou.

   CO SI KLIENTKA MĚNÍ SAMA V ADMINISTRACI:
     - název, cena, dostupnost, velikosti, foto ....... nativně
     - odrážky s fajfkami ............ KRÁTKÝ POPIS produktu (odrážkový seznam)
     - štítek na fotce ............... PŘÍZNAK produktu (barva v nastavení)
     - popis pod tím ................. Podrobný popis
   Řádek důvěry (3 ikony) je zapsán v GYMPINK-JS.js (pole DUVERA).
   =================================================================== */
body.gp-pdp2 {
  --gp-cta: #a3336f;
  --gp-cta-hover: #8a2a5e;
}

@media (min-width: 901px) {

  /* --- mřížka (záloha k inline stylům z JS) --- */
  /* POZOR: mřížka na .p-detail-inner platí JEN v režimu A (formulář je
     samostatný sloupec vedle řádku). V režimu B je uvnitř jediný potomek
     (.row), který by se tou mřížkou nacpal do prvního sloupce (~43 %) a
     celý blok by byl zúžený — přesně to se stalo při prvním nasazení. */
  body.gp-pdp2 .p-detail-inner.gp-pdp-modeA {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px) !important;
    column-gap: 56px !important;
    align-items: start !important;
    position: relative !important;
  }
  body.gp-pdp2 .p-detail-inner.gp-pdp-modeB {
    display: block !important;
    position: relative !important;
  }
  body.gp-pdp2 .gp-pdp-row,
  body.gp-pdp2 .gp-pdp-title {
    display: contents !important;
  }
  body.gp-pdp2 .gp-pdp-gallery {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.gp-pdp2 .gp-pdp-title h1 {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body.gp-pdp2 .gp-pdp-buy {
    grid-column: 2 !important;
    grid-row: 2 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.gp-pdp2 .gp-pdp-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  /* --- režim B: název i formulář v jednom sloupci vedle galerie --- */
  body.gp-pdp2 .p-detail-inner .gp-pdp-row2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px) !important;
    column-gap: 56px !important;
    align-items: start !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-row2 > .gp-pdp-gallery {
    grid-column: 1 !important;
    grid-row: 1 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-row2 > .gp-pdp-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-info h1 {
    margin: 0 0 8px !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    color: var(--gp-ink) !important;
  }

  /* obrázek v galerii nesmí zůstat v úzkém nativním boxu */
  body.gp-pdp2 .gp-pdp-gallery .p-image,
  body.gp-pdp2 .gp-pdp-gallery .p-image a {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* --- galerie: hlavní fotka 2:3 (ořízne bílé okraje v plátně 4:3) --- */
  /* Fotku ukazujeme celou (žádný vynucený ořez) — u některých produktů by
     se řezala hlava. Bílé okraje z plátna 4:3 splynou s bílou stránkou. */
  body.gp-pdp2 .gp-pdp-main-img {
    width: 100% !important;
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: 82vh !important;
    object-fit: contain !important;
    object-position: center top !important;
    display: block !important;
  }

}

/* 3.27b — prodejní panel, příznaky, cena, tlačítko, důvěra: všechny šířky */
@media (min-width: 0px) {
  /* --- příznaky (štítky) v rohu galerie, varianta A --- */
  body.gp-pdp2 .p-detail-inner .flags {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
  }
  body.gp-pdp2 .p-detail-inner .flags > * {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  /* --- název --- */
  body.gp-pdp2 .gp-pdp-title h1 {
    margin: 0 0 8px !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    color: var(--gp-ink) !important;
  }

  /* --- krátký popis + odrážky s fajfkami (editovatelné v administraci) --- */
  body.gp-pdp2 .p-short-description {
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--gp-ink-soft) !important;
    margin: 0 0 16px !important;
  }
  body.gp-pdp2 .p-short-description ul {
    list-style: none !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }
  body.gp-pdp2 .p-short-description li {
    position: relative !important;
    margin: 6px 0 !important;
    padding: 0 0 0 26px !important;
    font-size: 14px !important;
    color: var(--gp-ink) !important;
    list-style: none !important;
  }
  body.gp-pdp2 .p-short-description li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: .28em !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3336f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") no-repeat center / contain !important;
  }

  /* --- výběr velikosti (nativní <select>, jen přestylovaný) --- */
  body.gp-pdp2 .variant-list select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #b4b2a9 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    font-size: 14px !important;
    color: var(--gp-ink) !important;
    box-shadow: none !important;
  }
  body.gp-pdp2 .variant-list select:focus {
    border-color: var(--gp-cta) !important;
    outline: none !important;
  }

  /* --- cena + dostupnost + množství + tlačítko --- */
  body.gp-pdp2 .p-detail-inner .price.row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    align-items: baseline !important;
    margin: 18px 0 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .price.row .p-final-price-wrapper {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body.gp-pdp2 .p-detail-inner .price.row .order-availability {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 13px !important;
  }
  body.gp-pdp2 .p-detail-inner .price.row .shipping-availability {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
    color: var(--gp-ink-soft) !important;
  }
  body.gp-pdp2 .p-detail-inner .price.row .add-to-cart {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin: 4px 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  body.gp-pdp2 .p-final-price-wrapper .price,
  body.gp-pdp2 .p-detail-inner .price-final,
  body.gp-pdp2 .p-detail-inner .price-final strong,
  body.gp-pdp2 .p-detail-inner .p-final-price-wrapper strong,
  body.gp-pdp2 .p-detail-inner .price.row .price {
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    color: var(--gp-ink) !important;
  }
  body.gp-pdp2 .add-to-cart .btn.btn-conversion {
    white-space: nowrap !important;
  }
  body.gp-pdp2 .add-to-cart .quantity {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 88px !important;
    padding: 0 14px !important;
    border: 1px solid #b4b2a9 !important;
    background: #fff !important;
  }
  body.gp-pdp2 .add-to-cart .btn.btn-conversion {
    flex: 1 1 auto !important;
    width: auto !important;
    min-height: 54px !important;
    padding: 0 24px !important;
    background: var(--gp-cta) !important;
    border: 1px solid var(--gp-cta) !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    box-shadow: none !important;
  }
  body.gp-pdp2 .add-to-cart .btn.btn-conversion:hover {
    background: var(--gp-cta-hover) !important;
    border-color: var(--gp-cta-hover) !important;
  }

  /* --- řádek důvěry pod tlačítkem --- */
  body.gp-pdp2 .gp-trust {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    color: var(--gp-ink-soft) !important;
  }
  body.gp-pdp2 .gp-trust li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.gp-pdp2 .gp-trust a {
    color: inherit !important;
    text-decoration: none !important;
  }
  body.gp-pdp2 .gp-trust svg {
    display: block !important;
    margin: 0 auto 4px !important;
    color: var(--gp-ink) !important;
  }
}


/* ===================================================================
   3.28  PDP2 — pořadí prvků v prodejním panelu + velikosti + množství
   Diagnostika (DevTools, BABY PINK): .gp-pdp-buy obsahuje
     .p-short-description
     form#product-detail-form
        > .variant-list > select#simple-variants-select
        > .price.row > .shipping-availability (prázdné)
                     > .p-final-price-wrapper > strong.price-final
                     > .order-availability > .availability
                     > .spaced-small (prázdné)
                     > .add-to-cart > span.quantity (input.amount,
                          button.increase, button.decrease)
                          + button.btn-conversion (desktop)
                          + button.btn-cart (mobil)
        > ul.gp-trust (vkládá JS)
   Formulář i .price.row dostanou display: contents, takže jejich děti
   jsou položky mřížky panelu (.gp-pdp-buy) a dají se seřadit:
     řádek 1  cena | dostupnost      řádek 2  krátký popis
     řádek 3  velikosti              řádek 4  množství + tlačítko
     řádek 5  ikony důvěry
   Nic se nepřesouvá v DOM, formulář se odesílá jako dřív.
   =================================================================== */

/* políčka velikostí (platí i na mobilu — původní select je skrytý) */
body.gp-pdp2 .gp-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  pointer-events: none !important;
}
body.gp-pdp2 .variant-list {
  position: relative !important;
}
body.gp-pdp2 .gp-sizes {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}
body.gp-pdp2 .gp-sizes-label {
  flex: 0 0 100% !important;
  margin: 0 0 2px !important;
  font-size: 12px !important;
  color: var(--gp-ink-soft) !important;
}
body.gp-pdp2 .gp-size {
  min-width: 46px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid #b4b2a9 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--gp-ink) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body.gp-pdp2 .gp-size:hover {
  border-color: var(--gp-ink) !important;
}
body.gp-pdp2 .gp-size.is-on {
  border-color: var(--gp-cta) !important;
  background: #fbeaf0 !important;
  color: var(--gp-cta) !important;
  font-weight: 500 !important;
}
body.gp-pdp2 .gp-size--out {
  color: #a3a19a !important;
  border-color: #e6e3de !important;
  text-decoration: line-through !important;
}
body.gp-pdp2 .gp-size--out.is-on {
  color: var(--gp-cta) !important;
  text-decoration: line-through !important;
}

@media (min-width: 0px) {
  /* formulář a řádek s cenou se "rozpustí" — jejich děti jsou položky mřížky */
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy form.pr-action,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .price.row {
    display: contents !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy [itemprop="offers"],
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .shipping-availability,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .spaced-small {
    display: none !important;
  }

  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .p-final-price-wrapper {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .order-availability {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy > .p-short-description {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 14px 0 16px !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .variant-list {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .add-to-cart {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .gp-freeship {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .gp-trust {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
  }
}

/* množství: − 1 + v jednom rámečku (vedle tlačítka) */
body.gp-pdp2 .add-to-cart .quantity {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  position: relative !important;
}
body.gp-pdp2 .add-to-cart .quantity label {
  order: 2 !important;
  margin: 0 !important;
  display: block !important;
}
body.gp-pdp2 .add-to-cart .quantity .decrease { order: 1 !important; }
body.gp-pdp2 .add-to-cart .quantity .increase { order: 3 !important; }
body.gp-pdp2 .add-to-cart .quantity input.amount {
  width: 40px !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 15px !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
body.gp-pdp2 .add-to-cart .quantity input.amount::-webkit-outer-spin-button,
body.gp-pdp2 .add-to-cart .quantity input.amount::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
body.gp-pdp2 .add-to-cart .quantity .increase,
body.gp-pdp2 .add-to-cart .quantity .decrease {
  position: static !important;
  width: 28px !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--gp-ink) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
body.gp-pdp2 .add-to-cart .quantity .increase::before,
body.gp-pdp2 .add-to-cart .quantity .increase::after,
body.gp-pdp2 .add-to-cart .quantity .decrease::before,
body.gp-pdp2 .add-to-cart .quantity .decrease::after {
  display: none !important;
  content: none !important;
}
body.gp-pdp2 .add-to-cart .quantity .increase__sign,
body.gp-pdp2 .add-to-cart .quantity .decrease__sign {
  display: inline !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 18px !important;
}


/* --- odpočet do dopravy zdarma (PDP2) --- */
body.gp-pdp2 .gp-freeship {
  margin: 16px 0 0 !important;
}
body.gp-pdp2 .gp-freeship__text {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--gp-ink-soft) !important;
}
body.gp-pdp2 .gp-freeship__text strong {
  font-weight: 500 !important;
  color: var(--gp-cta) !important;
}
body.gp-pdp2 .gp-freeship__track {
  height: 6px !important;
  background: #e6e3de !important;
  overflow: hidden !important;
}
body.gp-pdp2 .gp-freeship__fill {
  height: 100% !important;
  width: 0;
  background: var(--gp-cta) !important;
  transition: width .35s ease !important;
}
body.gp-pdp2 .gp-freeship.is-free .gp-freeship__text strong {
  color: #3B6D11 !important;
}
body.gp-pdp2 .gp-freeship.is-free .gp-freeship__fill {
  background: #3B6D11 !important;
}


/* ===================================================================
   3.29  PDP2 — záložky POPIS / DISKUZE nad popisem, jeden sloupec
   Nativně (po vypnutí POBO) jsou tři sloupce: záložky svisle vlevo,
   popis uprostřed, tabulka parametrů + Tisk/Zeptat se/Sdílet vpravo.
   Struktura bloku nebyla ověřena, proto JS označí všechny obaly na
   cestě k záložkám, popisu, diskuzi a tabulce třídou .gp-pdp-flat a
   CSS z nich udělá plnou šířku pod sebou. Přepínání záložek (Bootstrap
   .tab-pane / .active) zůstává nedotčené.
   =================================================================== */
@media (min-width: 901px) {
  body.gp-pdp2 .gp-pdp-tabs {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 56px auto 0 !important;
    padding: 0 !important;
  }

  /* obaly na cestě: plná šířka, pod sebou (viditelnost záložek neměníme) */
  body.gp-pdp2 .gp-pdp-tabs .gp-pdp-flat {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.gp-pdp2 .gp-pdp-tabs .gp-pdp-flat:not(.tab-pane) {
    display: block !important;
  }
  body.gp-pdp2 .gp-pdp-tabs .gp-pdp-flat.tab-pane.active {
    display: block !important;
  }
  body.gp-pdp2 .gp-pdp-tabs .tab-pane:not(.active) {
    display: none !important;
  }

  /* záložky: horizontální řada s podtržením aktivní */
  body.gp-pdp2 .gp-tabs-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 32px !important;
    width: 100% !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid var(--gp-line) !important;
  }
  body.gp-pdp2 .gp-tabs-nav > li {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body.gp-pdp2 .gp-tabs-nav a {
    display: block !important;
    margin: 0 0 -1px !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: var(--gp-ink-soft) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
  }
  body.gp-pdp2 .gp-tabs-nav a:hover {
    color: var(--gp-ink) !important;
  }
  body.gp-pdp2 .gp-tabs-nav > li.active a,
  body.gp-pdp2 .gp-tabs-nav a.active,
  body.gp-pdp2 .gp-tabs-nav a[aria-selected="true"] {
    color: var(--gp-ink) !important;
    border-bottom-color: var(--gp-ink) !important;
  }
}


/* ===================================================================
   3.30  PDP2 — záložky jako "složkové karty" + typografie popisu
   Vzor (Old Man's / Fermato): řada záložek s tenkou linkou přes celou
   šířku, aktivní záložka má rámeček se zaoblenými horními rohy a linku
   přerušuje; text popisu je dlouhé odstavce max ~860 px široké, odrážky
   mají šipky. Přebíjí vzhled ze sekce 3.29 (stejné selektory, později).
   =================================================================== */
@media (min-width: 901px) {
  body.gp-pdp2 .gp-pdp-tabs {
    max-width: none !important;
    margin: 56px 0 0 !important;
  }

  body.gp-pdp2 .gp-tabs-nav {
    gap: 0 !important;
    margin: 0 0 32px !important;
    border-bottom: 1px solid var(--gp-line) !important;
  }
  body.gp-pdp2 .gp-tabs-nav a {
    margin: 0 0 -1px !important;
    padding: 14px 22px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--gp-ink) !important;
    border: 1px solid transparent !important;
    border-bottom: 0 !important;
    border-radius: 8px 8px 0 0 !important;
  }
  body.gp-pdp2 .gp-tabs-nav a:hover {
    color: var(--gp-ink) !important;
    background: #faf7f9 !important;
  }
  body.gp-pdp2 .gp-tabs-nav > li.active a,
  body.gp-pdp2 .gp-tabs-nav a.active,
  body.gp-pdp2 .gp-tabs-nav a[aria-selected="true"] {
    color: var(--gp-ink) !important;
    background: #fff !important;
    border-color: var(--gp-line) !important;
    border-bottom: 1px solid #fff !important;
  }

  /* text popisu: pohodlná šířka řádku, jen u textových prvků
     (obrázky a karty z popisu zůstávají široké) */
  body.gp-pdp2 .gp-pdp-tabs .tab-pane p,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane ul,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane ol,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane h2,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane h3,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane h4 {
    max-width: 860px !important;
  }
  body.gp-pdp2 .gp-pdp-tabs .tab-pane p,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane li {
    line-height: 1.75 !important;
  }

  /* odrážky se šipkou */
  body.gp-pdp2 .gp-pdp-tabs .tab-pane ul {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  body.gp-pdp2 .gp-pdp-tabs .tab-pane ul > li {
    position: relative !important;
    list-style: none !important;
    padding-left: 34px !important;
    margin: 4px 0 !important;
  }
  body.gp-pdp2 .gp-pdp-tabs .tab-pane ul > li::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: .72em !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid var(--gp-ink) !important;
    border-right: 2px solid var(--gp-ink) !important;
    transform: rotate(45deg) translateY(-50%) !important;
    background: none !important;
  }
}


/* ===================================================================
   3.31  PDP2 — záložka "Specifikace" (vytvořená JS; obsah = přesunutá
   tabulka parametrů a ikony Tisk / Zeptat se / Sdílet)
   =================================================================== */
@media (min-width: 901px) {
  body.gp-pdp2 .gp-pdp-tabs .tab-pane.active {
    display: block !important;
  }
  body.gp-pdp2 .gp-spec table {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 0 32px !important;
    border-collapse: collapse !important;
  }
  body.gp-pdp2 .gp-spec table th,
  body.gp-pdp2 .gp-spec table td {
    padding: 14px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gp-line) !important;
    font-size: 14px !important;
    text-align: left !important;
    vertical-align: top !important;
    background: transparent !important;
  }
  body.gp-pdp2 .gp-spec table th {
    width: 240px !important;
    font-weight: 400 !important;
    color: var(--gp-ink-soft) !important;
  }
  body.gp-pdp2 .gp-spec table td {
    color: var(--gp-ink) !important;
  }
}


/* ===================================================================
   3.32  PDP2 — záložky: střed stránky, souvislé okraje tlačítek
   Layout řady (flex, střed) nastavuje JS inline; tady je vzhled.
   Aktivní záložka: rámeček nahoře a po stranách, dole splývá s bílým
   obsahem a překrývá linku pod řadou (position + z-index + margin -1px).
   =================================================================== */
@media (min-width: 901px) {
  body.gp-pdp2 .gp-pdp-tabs {
    max-width: 1100px !important;
    margin: 56px auto 0 !important;
  }
  body.gp-pdp2 .gp-tabs-nav {
    border-bottom: 1px solid #d9d5cf !important;
  }
  body.gp-pdp2 .gp-tabs-nav a {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    margin: 0 0 -1px !important;
    padding: 14px 28px !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 8px 8px 0 0 !important;
    background: transparent !important;
    color: var(--gp-ink-soft) !important;
  }
  body.gp-pdp2 .gp-tabs-nav a:hover {
    color: var(--gp-ink) !important;
    background: #faf7f9 !important;
  }
  body.gp-pdp2 .gp-tabs-nav > li.active a,
  body.gp-pdp2 .gp-tabs-nav a.active,
  body.gp-pdp2 .gp-tabs-nav a[aria-selected="true"] {
    color: var(--gp-ink) !important;
    background: #fff !important;
    border-color: #d9d5cf !important;
    border-bottom-color: #fff !important;
    z-index: 2 !important;
  }
}


/* ===================================================================
   3.33  PDP2 — obsah záložek (popis, specifikace, diskuze) na střed
   Celý obsah záložky je sloupec široký 900 px vystředěný pod řadou
   záložek. Jednotlivé odstavce už nemají vlastní max-width (dřív 860 px
   zarovnané doleva, takže text nebyl uprostřed).
   =================================================================== */
@media (min-width: 901px) {
  body.gp-pdp2 .gp-pdp-tabs .tab-pane {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.gp-pdp2 .gp-pdp-tabs .tab-pane p,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane ul,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane ol,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane h2,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane h3,
  body.gp-pdp2 .gp-pdp-tabs .tab-pane h4 {
    max-width: none !important;
  }

  /* Specifikace: tabulka i ikony uprostřed */
  body.gp-pdp2 .gp-spec table {
    margin: 0 auto 32px !important;
  }
}


/* ===================================================================
   3.34  PDP2 — obsah záložky na šířku čáry záložek
   Obsah (popis, specifikace, diskuze) má stejnou šířku jako čára pod
   záložkami; blok se vystředěním stará JS (měřením, viz krok záložek).
   =================================================================== */
@media (min-width: 901px) {
  body.gp-pdp2 .gp-pdp-tabs .tab-pane {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ===================================================================
   3.35  PDP2 — Specifikace a Diskuze uprostřed
   Ikony Tisk / Zeptat se / Sdílet: nativní rozložení (ikona nad
   popiskem) zůstává, vystředí se jen celý blok (fit-content + auto).
   Tabulku doplňuje inline styl z JS (šablona jí přebíjí šířku).
   Diskuze: nadpis, věta i formulář uprostřed, formulář max 640 px.
   =================================================================== */
@media (min-width: 901px) {
  body.gp-pdp2 .gp-spec > *:not(table) {
    display: flow-root !important;
    float: none !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
  }

  body.gp-pdp2 .gp-pdp-tabs #productDiscussion {
    text-align: center !important;
  }
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion h2,
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion h3,
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion > p,
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion .no-comments {
    text-align: center !important;
    max-width: none !important;
  }
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion form {
    max-width: 640px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: left !important;
  }
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion form input[type="text"],
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion form input[type="email"],
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion form textarea {
    width: 100% !important;
    max-width: none !important;
  }
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion form .btn,
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion form button[type="submit"],
  body.gp-pdp2 .gp-pdp-tabs #productDiscussion form input[type="submit"] {
    display: block !important;
    margin: 20px auto 0 !important;
  }
}


/* ===================================================================
   3.36  PDP2 — užší prodejní panel, velikosti nepřekryté tlačítkem
   Panel: pevná šířka do 520 px (galerie bere zbytek), celé na střed do
   1 200 px. Blok s velikostmi (.variant-list) dostane výšku podle
   obsahu, aby políčka nezůstala pod řádkem množství + tlačítko.
   =================================================================== */
body.gp-pdp2 .variant-list {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
@media (min-width: 0px) {
  body.gp-pdp2 .p-detail-inner .gp-pdp-row2,
  body.gp-pdp2 .p-detail-inner .gp-pdp-modeA {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy {
    max-width: 520px !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .add-to-cart {
    margin-top: 4px !important;
    position: relative !important;
    z-index: 1 !important;
  }
}


/* ===================================================================
   3.37  PDP2 — galerie podle návrhu
   Hlavní fotka: rámeček 3:4, fotka ho vyplní (cover, i s ořezem).
   Miniatury: řada 5 čtverců pod fotkou, vybraná má tmavý rámeček.
   Rozměry a umístění nastavuje JS inline (šablona jinak přebíjí),
   tady jsou jen záloha a vzhled výběru.
   =================================================================== */
@media (min-width: 0px) {
  body.gp-pdp2 .gp-pdp-main-img {
    object-fit: cover !important;
    object-position: center !important;
    max-height: none !important;
  }
  body.gp-pdp2 .gp-pdp-gallery .p-thumbnail.highlighted,
  body.gp-pdp2 .gp-pdp-gallery .highlighted > .p-thumbnail {
    outline: 2px solid var(--gp-ink) !important;
    outline-offset: -2px !important;
    border-color: transparent !important;
  }
}


/* ===================================================================
   3.38  PDP2 — prodejní panel jako sloupec (flex + order), ne mřížka
   Mřížka dávala řádku s velikostmi menší výšku, než jsou políčka, a
   množství + tlačítko je překrylo. Ve sloupci se prvky skládají pod sebe
   v přirozené výšce. Cena a dostupnost sdílejí první řádek, ostatní
   zabírají 100 % šířky. Formulář a .price.row jsou display: contents.
   =================================================================== */
@media (min-width: 0px) {
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .p-final-price-wrapper {
    order: 1 !important; flex: 0 0 auto !important; width: auto !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .order-availability {
    order: 2 !important; flex: 1 1 0 !important; min-width: 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy > .p-short-description {
    order: 3 !important; flex: 0 0 100% !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .variant-list {
    order: 4 !important; flex: 0 0 100% !important;
    margin-bottom: 20px !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .add-to-cart {
    order: 5 !important; flex: 0 0 100% !important;
    margin-top: 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .gp-freeship {
    order: 6 !important; flex: 0 0 100% !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .gp-trust {
    order: 7 !important; flex: 0 0 100% !important;
  }
}


/* ===================================================================
   3.39  PDP2 — příznaky ve sloupci, sleva červeně, cena bez odsazení
   Paleta: Akce / sleva #d3312b (Novinka a Tip mají barvy z administrace).
   =================================================================== */
@media (min-width: 0px) {
  body.gp-pdp2 .p-detail-inner .flags .flag-discount {
    background: #d3312b !important;
    background-color: #d3312b !important;
    color: #fff !important;
    text-align: left !important;
  }
  body.gp-pdp2 .p-detail-inner .flags .flag-discount * {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  /* cena: žádné vnitřní odsazení zleva, ať sedí s nadpisem a popisem */
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .p-final-price-wrapper,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .p-final-price-wrapper > *,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .p-final-price-wrapper .price-final,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .p-final-price-wrapper .price-final-holder {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
  }
}


/* ===================================================================
   3.40  PDP2 — miniatury: vypnout clearfix pseudo-prvky kontejneru
   ::before / ::after (clearfix) se v mřížce chovají jako položky a
   zabíraly první buňku řady → miniatury začínaly u druhého sloupce.
   =================================================================== */
body.gp-pdp2 .gp-thumbs::before,
body.gp-pdp2 .gp-thumbs::after {
  display: none !important;
  content: none !important;
}


/* ===================================================================
   3.41  PDP2 — VLASTNÍ řada miniatur pod fotkou (návrh: 5 čtverců)
   JS postaví .gp-thumbgrid z nativních miniatur (ty schová, ale ponechá
   funkční). Klik na .gp-thumb vyvolá klik na původní miniaturu.
   Zobrazuje se na všech šířkách (telefon, iPad i desktop).
   =================================================================== */
body.gp-pdp2 .gp-thumbgrid {
  display: none !important;
}
@media (min-width: 0px) {
  body.gp-pdp2 .gp-thumbgrid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.gp-pdp2 .gp-thumb {
    position: relative !important;
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e6e3de !important;
    border-radius: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }
  body.gp-pdp2 .gp-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    margin: 0 !important;
  }
  body.gp-pdp2 .gp-thumb.is-on {
    outline: 2px solid var(--gp-ink) !important;
    outline-offset: -2px !important;
  }
  body.gp-pdp2 .gp-thumb:hover:not(.is-on) {
    border-color: var(--gp-ink) !important;
  }
}


/* ===================================================================
   3.42  ZÁPATÍ — varianta E (dvě úrovně se sdělením)
   Diagnostika (DevTools, ověřeno dříve): footer.footer
     > .container.footer-rows > .row.custom-footer.elements-4
         > .custom-footer__contact / __section2 (Informace) /
           __articles (Blog) / __onlinePayments
     > .container.footer-bottom > span(a.image + a.title) + span.copyright
   Desktop: vlevo claim + kontakt + platby, uprostřed Informace, vpravo Blog;
   dole švestkový pruh s copyrightem vlevo a podpisem vpravo.
   Mobil: claim, kontakt, platby, Informace a Blog jako rozbalovací sekce.
   Logo v patičce nahrazuje claim; podpis "a vhs." vkládá JS.
   =================================================================== */
footer.footer .gp-footer-logo {
  display: none !important;
}

footer.footer .footer-rows {
  padding-top: 44px !important;
  padding-bottom: 34px !important;
}

/* clearfix pseudo-prvky Bootstrapu by se v mřížce staly položkami */
footer.footer .custom-footer::before,
footer.footer .custom-footer::after,
footer.footer .footer-bottom::before,
footer.footer .footer-bottom::after {
  display: none !important;
  content: none !important;
}

/* claim */
footer.footer .gp-footer-claim {
  margin: 0 0 18px !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: var(--gp-ink) !important;
}
footer.footer .gp-footer-claim span {
  color: var(--gp-cta, #a3336f) !important;
}

/* nadpisy sloupců ve švestkové */
footer.footer .pageElement__heading {
  color: #a3336f !important;
  letter-spacing: .09em !important;
}

/* nadpisy Kontakt a Platby nahrazuje claim / logo karet — zůstávají jen pro čtečky */
footer.footer .custom-footer__contact .pageElement__heading,
footer.footer .custom-footer__onlinePayments .pageElement__heading {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* odkazy tmavě, při najetí švestkově */
footer.footer .custom-footer a {
  color: var(--gp-ink) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
footer.footer .custom-footer a:hover {
  color: #a3336f !important;
}
footer.footer .custom-footer__articles a {
  display: block !important;
  text-transform: none !important;
  font-weight: 400 !important;
}
footer.footer .custom-footer__onlinePayments {
  text-align: left !important;
}

/* spodní švestkový pruh: copyright vlevo, podpis vpravo */
footer.footer .footer-bottom {
  background: #a3336f !important;
  border-top: 0 !important;
  margin: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}
footer.footer .footer-bottom,
footer.footer .footer-bottom a,
footer.footer .footer-bottom .copyright {
  color: #fff !important;
  font-size: 12px !important;
}
footer.footer .footer-bottom > span:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* malé barevné logo Shoptetu převedeme na bílé, ať drží paletu */
footer.footer .footer-bottom a.image img {
  height: 18px !important;
  filter: brightness(0) invert(1) !important;
}
footer.footer .gp-vhs {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}
footer.footer .gp-vhs img {
  height: 16px !important;
  width: auto !important;
  display: block !important;
}

/* desktop: mřížka sloupců */
@media (min-width: 901px) {
  footer.footer .custom-footer {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr 1fr !important;
    grid-template-areas:
      "kontakt informace blog"
      "platby  informace blog" !important;
    column-gap: 40px !important;
    row-gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
  footer.footer .custom-footer > * {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  footer.footer .custom-footer__contact        { grid-area: kontakt !important; }
  footer.footer .custom-footer__section2       { grid-area: informace !important; }
  footer.footer .custom-footer__articles       { grid-area: blog !important; }
  footer.footer .custom-footer__onlinePayments { grid-area: platby !important; }
}

/* mobil */
@media (max-width: 900px) {
  footer.footer .footer-rows {
    padding-top: 30px !important;
    padding-bottom: 20px !important;
  }
  footer.footer .custom-footer {
    display: block !important;
  }
  footer.footer .custom-footer > * {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }
  footer.footer .gp-footer-claim {
    font-size: 26px !important;
  }
  footer.footer .gp-acc > .pageElement__heading {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid #d9c3d0 !important;
    cursor: pointer !important;
  }
  footer.footer .gp-acc > .pageElement__heading::after {
    content: "+" !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
  footer.footer .gp-acc.is-open > .pageElement__heading::after {
    content: "\2212" !important;
  }
  footer.footer .gp-acc:not(.is-open) > *:not(.pageElement__heading) {
    display: none !important;
  }
  footer.footer .gp-acc.is-open {
    padding-bottom: 6px !important;
  }
  footer.footer .footer-bottom {
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
  }
}


/* ===================================================================
   3.43  ZÁPATÍ E — opravy podle první kontroly
   - Blog / Informace: prohozené třídy (__section2 je Blog, __articles je
     Informace); sloupce navíc značí JS podle textu nadpisu (.gp-col-*).
   - platební karty doleva, kontejnery na plnou šířku, spodní pruh přes
     celou šířku, bílý text i u odkazu "Vytvořil Shoptet", mezery kolem
     "a vhs.", menší horní mezera.
   =================================================================== */
footer.footer {
  padding-top: 0 !important;
}
footer.footer .footer-rows {
  padding-top: 40px !important;
}
footer.footer .footer-rows,
footer.footer .footer-bottom {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 901px) {
  /* přemapování oblastí: Informace uprostřed, Blog vpravo */
  footer.footer .custom-footer__articles  { grid-area: informace !important; }
  footer.footer .custom-footer__section2  { grid-area: blog !important; }
  footer.footer .custom-footer .gp-col-info { grid-area: informace !important; }
  footer.footer .custom-footer .gp-col-blog { grid-area: blog !important; }
}

/* Blog: titulky normálním písmem (nativně velkými písmeny) */
footer.footer .gp-col-blog a,
footer.footer .custom-footer__section2 a {
  display: block !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

/* platební karty u levého okraje */
footer.footer .custom-footer__onlinePayments,
footer.footer .custom-footer__onlinePayments * {
  text-align: left !important;
  justify-content: flex-start !important;
}
footer.footer .custom-footer__onlinePayments *:not(img) {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
footer.footer .custom-footer__onlinePayments img {
  display: inline-block !important;
  margin: 0 12px 0 0 !important;
}

/* spodní pruh: bílý text i u odkazu "Vytvořil Shoptet" */
footer.footer .footer-bottom a.title,
footer.footer .footer-bottom a.image,
footer.footer .footer-bottom .copyright {
  color: #fff !important;
  opacity: 1 !important;
}
footer.footer .gp-vhs-a {
  margin: 0 8px !important;
  color: #fff !important;
  font-size: 12px !important;
}
footer.footer .gp-vhs {
  margin: 0 !important;
}
footer.footer .footer-bottom a.image {
  margin-right: 8px !important;
}


/* ===================================================================
   3.44  ZÁPATÍ E — Instagram: ikona + @jméno (jako řádek s e-mailem)
   Jméno doplňuje JS z odkazu (instagram.com/<jméno>/) nastaveného v
   administraci, takže se mění spolu s ním.
   =================================================================== */
footer.footer .custom-footer__contact .social-icons a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 24px !important;
  text-decoration: none !important;
}
footer.footer .gp-social-handle {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--gp-ink) !important;
}
footer.footer .custom-footer__contact .social-icons a:hover .gp-social-handle {
  color: #a3336f !important;
}


/* ===================================================================
   3.45  ZÁPATÍ E — vlastní kontaktní řádky, srovnané doleva
   Ikony ve sloupci širokém 24 px, text začíná vždy na stejné svislici,
   všechno zarovnané s claimem nad tím. Nativní ikony/hover (černý kruh)
   se nepoužívají — schovává je JS.
   =================================================================== */
footer.footer .gp-contact {
  list-style: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
footer.footer .gp-contact li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
footer.footer .gp-contact a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--gp-ink) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}
footer.footer .gp-contact a::before,
footer.footer .gp-contact a::after {
  display: none !important;
  content: none !important;
}
footer.footer .gp-contact a:hover {
  background: none !important;
  color: #a3336f !important;
}
footer.footer .gp-contact svg {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  color: inherit !important;
}

/* platební karty: přirozená velikost (nativně roztažené = rozmazané), u levé hrany */
footer.footer .custom-footer__onlinePayments img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 4px 0 0 0 !important;
}


/* ===================================================================
   3.46  ZÁPATÍ E (mobil) — jedna čistá linka místo dvou
   Nativní světlá linka pod nadpisem sloupce (na desktopu v pořádku)
   se na mobilu zdvojovala s oddělovací linkou rozbalovací sekce.
   Zůstává jen linka nad každou sekcí a závěrečná linka pod poslední.
   =================================================================== */
@media (max-width: 900px) {
  footer.footer .pageElement__heading {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  footer.footer .pageElement__heading::before {
    display: none !important;
    content: none !important;
  }
  footer.footer .custom-footer > * {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  footer.footer .gp-acc-last {
    border-bottom: 1px solid #d9c3d0 !important;
  }
}


/* ===================================================================
   3.47  ZÁPATÍ E (desktop) — logo vhs. o 2 px výš, ať sedí na řádku s textem
   =================================================================== */
@media (min-width: 901px) {
  footer.footer .gp-vhs {
    transform: translateY(-2px) !important;
  }
}


/* ===================================================================
   3.48  MOBIL — hlavička je vždy růžová (i na titulní straně nahoře)
   Diagnostika (screenshot): na homepage je hlavička nahoře průhledná
   (nad hero fotkou), na mobilu ale hero začíná až pod ní → za hlavičkou
   je bílá stránka, bílé logo i ikony nejsou vidět. Na mobilu proto růžové
   pozadí hned, bílé ikony a logo se stínem jako na desktopu.
   =================================================================== */
@media (max-width: 1279px) {
  body.type-index #header,
  body.type-index #header:not(.gp-scrolled) {
    background: var(--gp-header-bg) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .08) !important;
  }

  /* ikony a cena košíku bílé i po scrollu (jinak by se po scrollu přepnuly na tmavé) */
  #header .top-nav-right a,
  #header .top-nav-right a *,
  #header .top-nav-right .btn-icon,
  #header .top-nav-right .cart-price,
  #header .cart-price {
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !important;
  }

  /* logo: stejný jemný stín jako na desktopu, ať je čitelné na světle růžové */
  #header .site-name img {
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .5)) !important;
  }
}


/* ===================================================================
   3.49  MOBIL — hlavička stejná barva jako banner + lupa vlevo
   Diagnostika (změřeno ve screenshotu): lišta #ecdee8 vs. hero #efdde9.
   Vnitřní vrstvy hlavičky (Shoptet maluje mobilní hlavičku barvou ze
   svého nastavení) dostanou průhledné pozadí, takže prosvítá jen naše
   #efdde9 z #header. Nahoře na titulní straně zrušen i stín pod lištou
   (dělal viditelný přechod k banneru).
   Lupa: JS ji na mobilu přesune do .gp-search-left (vlevo v liště).
   =================================================================== */
.gp-search-left {
  display: none;
}

@media (max-width: 1279px) {
  #header {
    opacity: 1 !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
  }
  #header::before,
  #header::after {
    background: none !important;
    box-shadow: none !important;
  }
  #header > *:not(#navigation):not(.gp-tablet-nav),
  #header .navigation-wrapper,
  #header .top-nav,
  #header .top-nav-right {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body.type-index #header:not(.gp-scrolled) {
    box-shadow: none !important;
  }

  .gp-search-left {
    display: flex !important;
    position: absolute !important;
    left: 18px !important; /* bylo 12 px – opticky moc u kraje displeje */
    top: 0 !important;
    bottom: 0 !important;
    align-items: center !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .gp-search-left li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .gp-search-left a,
  .gp-search-left a * {
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !important;
  }
}


/* 3.50  MOBIL — pseudo-prvky, které JS označil jako přebarvující lištu */
@media (max-width: 1279px) {
  #header .gp-flat-pseudo::before,
  #header .gp-flat-pseudo::after {
    background: none !important;
    box-shadow: none !important;
  }
}


/* ===================================================================
   3.51  TABLET (768–900 px) — čistá lišta hlavičky
   Diagnostika (screenshot iPad): šablona přepíná mobilní hlavičku až pod
   768 px, my jsme mobilní úpravy měli do 900 px → v pásmu 768–900 se lišta
   míchala: bílé pole hledání, chybějící hamburger, roztažené ikony.
   Řešení: vlastní hamburger + vysouvací nabídka z odkazů menu (JS staví
   z toho, co v menu je), bílé plochy v liště schovává JS, ikony mají
   pravidelné rozestupy a jsou zarovnané doprava od hrany.
   Mimo pásmo (telefon, počítač) se vlastní hamburger a nabídka nezobrazují.
   =================================================================== */
.gp-burger-li,
.gp-tablet-nav {
  display: none;
}

@media (min-width: 768px) and (max-width: 1279px) {
  #header .navigation-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
    align-items: center !important;
  }

  /* pravá skupina: účet, košík, hamburger — pravidelné rozestupy, vpravo od hrany */
  #header .navigation-wrapper > .top-nav {
    justify-self: end !important;
    margin-left: auto !important;
  }
  #header .nav-list.top-nav-right {
    justify-content: flex-end !important;
    gap: 22px !important;
    width: auto !important;
  }
  #header .nav-list.top-nav-right > li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  /* lupa vlevo: stejný svislý střed a odsazení jako pravá strana */
  .gp-search-left {
    left: 20px !important;
  }

  .gp-burger-li {
    display: flex !important;
    align-items: center !important;
  }
  .gp-burger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer !important;
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .5)) !important;
  }

  .gp-tablet-nav {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12) !important;
  }
  .gp-tablet-nav.is-open {
    display: block !important;
  }
  .gp-tablet-nav a {
    display: block !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid var(--gp-line) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: var(--gp-ink) !important;
    text-shadow: none !important;
  }
  .gp-tablet-nav a:hover {
    color: #a3336f !important;
    background: #faf5f8 !important;
  }
}


/* ===================================================================
   3.52  KOMPAKTNÍ HLAVIČKA 768–1279 px (tablet, malý notebook)
   Diagnostika (screenshot 907 px, reprodukováno v prohlížeči): menu
   kategorií potřebuje ~510 px vedle loga → vejde se teprve od ~1280 px;
   pod tím se překrývalo s logem. Šablona přepíná tabletové rozložení na
   ~992 px, my dřív na 900 px; v pásmu 901–991 se míchaly obě pravidla
   (hlavička fixní × obsah s místem pro nativní hlavičku).
   Řešení: pod 1280 px je hlavička vždy kompaktní — lupa vlevo, logo
   uprostřed, vpravo účet / košík / hamburger; menu (a Blog) jsou v
   hamburgeru. Místo pod fixní hlavičkou na titulní straně dopočítává JS.
   Dlaždice s ikonami a všechny s tím související úpravy platí od stejné
   hranice (viz 3.4b, 3.13, 3.48–3.51).
   =================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  #navigation,
  .gp-blog-moved,
  #header .nav-list.top-nav-right > li.gp-blog-moved {
    display: none !important;
  }
}


/* ===================================================================
   3.53  MENU (hamburger) VLEVO — telefon, tablet, malý notebook (< 1280 px)
   Vzor Exalted: vlevo hamburger (a vedle něj lupa), uprostřed logo,
   vpravo účet / košík. JS přesouvá hamburger do levého boxu
   (.gp-search-left) — na telefonu nativní, na tabletu vlastní.
   =================================================================== */
@media (max-width: 1279px) {
  .gp-search-left {
    gap: 6px !important;
  }
  .gp-search-left li,
  .gp-search-left > a {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* nativní hamburger v levém boxu: bílý se stínem jako ostatní ikony */
  .gp-search-left a,
  .gp-search-left a * {
    color: #fff !important;
  }
  .gp-search-left .gp-burger {
    color: #fff !important;
  }
}


/* ===================================================================
   3.54  Hamburger a lupa vlevo — větší rozestup (byly nalepené)
   Telefon 22 px, tablet / malý notebook 16 px. Větší rozestup je i lepší
   pro klepání prstem (menší riziko, že se trefí druhá ikona).
   =================================================================== */
@media (max-width: 1279px) {
  .gp-search-left {
    gap: 16px !important;
  }
}
@media (max-width: 767px) {
  .gp-search-left {
    gap: 22px !important;
  }
}


/* ===================================================================
   3.55  POČET KUSŮ V KOŠÍKU (tablet + telefon)
   Diagnostika (živý web, iframe 390 px): počet je v
   <i data-testid="headerCartCount"> uvnitř a.cart-count. Hlavička
   vynucuje bílou barvu ikon, takže kolečko i číslo byly bílé a počet
   nebyl vidět. Kolečko dostane švestkovou barvu, číslo zůstane bílé.
   Bez změny display, aby prázdný košík dál nezobrazoval "0".
   =================================================================== */
@media (max-width: 1279px) {
  #header a.cart-count > i[data-testid="headerCartCount"] {
    background: var(--gp-cta, #a3336f) !important;
    color: #fff !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    line-height: 20px !important;
    text-align: center !important;
    padding: 0 !important;
    box-shadow: 0 0 0 2px var(--gp-header-bg, #efdde9) !important;
  }
}


/* ===================================================================
   3.56  DETAIL PRODUKTU — telefon a iPad na výšku (≤ 900 px)
   Koncept: jeden sloupec. Fotka přes celou šířku (3:4) s příznakem
   v rohu a řadou 5 miniatur → název → cena + dostupnost → krátký popis
   → velikosti → množství + „Do košíku“ → odpočet dopravy → 3 ikony
   důvěry → záložky. Na iPadu je sloupec vystředěný (max 560 px).
   Diagnostika (živý web, 390 px): pod 992 px Bootstrap schovává
   .btn-conversion a ukazuje jen ikonové .btn-cart (popisek v sr-only)
   → tlačítko bylo černé a bez textu. Proto zapínáme .btn-conversion.
   =================================================================== */
@media (max-width: 991px) {
  body.gp-pdp2 .add-to-cart .btn.btn-conversion {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body.gp-pdp2 .p-detail-inner .add-to-cart button.btn.btn-cart.add-to-cart-button {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
  }
}

@media (max-width: 900px) {
  /* sloupec: fotka → název → panel (název je v DOM před fotkou) */
  body.gp-pdp2 .p-detail-inner .row.gp-pdp-modeA {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .row.gp-pdp-modeA::before,
  body.gp-pdp2 .p-detail-inner .row.gp-pdp-modeA::after {
    display: none !important;
    content: none !important;
  }
  body.gp-pdp2 .p-detail-inner .row.gp-pdp-modeA > .gp-pdp-gallery {
    order: 1 !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .row.gp-pdp-modeA > :not(.gp-pdp-gallery):not(.gp-pdp-buy) {
    order: 2 !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 0 0 !important;
  }
  body.gp-pdp2 .p-detail-inner .row.gp-pdp-modeA > .gp-pdp-buy {
    order: 3 !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px 0 8px !important;
  }
  /* clearfix pseudo-prvky jsou ve flexu položky a odsouvaly cenu o mezeru */
  body.gp-pdp2 .p-detail-inner .row.gp-pdp-modeA > .gp-pdp-buy::before,
  body.gp-pdp2 .p-detail-inner .row.gp-pdp-modeA > .gp-pdp-buy::after,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy form.pr-action::before,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy form.pr-action::after,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .price.row::before,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .price.row::after {
    display: none !important;
    content: none !important;
  }

  /* miniatury: 5 čtverců pod fotkou se stejným okrajem jako text */
  body.gp-pdp2 .gp-thumbgrid {
    box-sizing: border-box !important;
    padding: 0 !important;
    margin-top: 2px !important;
  }

  /* název */
  body.gp-pdp2 .p-detail-inner h1 {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    text-align: left !important;
    color: var(--gp-ink) !important;
  }

  /* cena + dostupnost na jednom řádku, vlevo */
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .p-final-price-wrapper,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .p-final-price-wrapper > *,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .order-availability {
    text-align: left !important;
  }
  body.gp-pdp2 .p-final-price-wrapper .price,
  body.gp-pdp2 .p-detail-inner .price-final,
  body.gp-pdp2 .p-detail-inner .price-final strong,
  body.gp-pdp2 .p-detail-inner .p-final-price-wrapper strong,
  body.gp-pdp2 .p-detail-inner .price.row .price {
    font-size: 24px !important;
  }

  /* krátký popis: vlevo, běžná velikost */
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy > .p-short-description,
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy > .p-short-description * {
    text-align: left !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy > .p-short-description {
    margin: 12px 0 14px !important;
  }

  /* velikosti: větší dotykové plochy */
  body.gp-pdp2 .gp-size {
    min-width: 52px !important;
    height: 46px !important;
    font-size: 14px !important;
  }

  /* množství + tlačítko na jednom řádku */
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.gp-pdp2 .add-to-cart .btn.btn-conversion {
    min-height: 52px !important;
  }
  body.gp-pdp2 .add-to-cart .quantity {
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.gp-pdp2 .add-to-cart .btn.btn-conversion {
    height: 52px !important;
    margin: 0 !important;
  }

  /* menší mezera mezi lištou a drobečkovou navigací (dřív ~130 px) */
  body.gp-pdp2 #content-wrapper {
    padding-top: 0 !important;
  }

  /* odpočet dopravy a ikony důvěry */
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .gp-freeship {
    margin-top: 14px !important;
  }
  body.gp-pdp2 .p-detail-inner .gp-pdp-buy .gp-trust {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }
}

/* iPad na výšku: užší sloupec, ať fotka není vyšší než obrazovka */
@media (min-width: 600px) and (max-width: 900px) {
  body.gp-pdp2 .p-detail-inner .row.gp-pdp-modeA {
    max-width: 480px !important;
  }
}

/* ===================================================================
   3.57  ZÁLOŽKY (Popis / Specifikace / Diskuze) — iPad na výšku
   Nativně jsou v 768–900 px ve dvou sloupcích (nabídka vlevo, obsah
   vpravo). Skládáme je pod sebe a nabídku dáváme na střed, stejně jako
   na desktopu a na telefonu.
   =================================================================== */
@media (max-width: 900px) {
  body.gp-pdp2 .gp-pdp-tabs > .row.gp-pdp-flat {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.gp-pdp2 .gp-pdp-tabs > .row.gp-pdp-flat::before,
  body.gp-pdp2 .gp-pdp-tabs > .row.gp-pdp-flat::after {
    display: none !important;
  }
  body.gp-pdp2 .gp-pdp-tabs > .row.gp-pdp-flat > [class*="col-sm-"] {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.gp-pdp2 .gp-pdp-tabs .gp-tabs-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}


/* ===================================================================
   3.58  iPad (768–1279 px) — ikona účtu blíž ke košíku
   Diagnostika (živý web): ikona účtu je 20 px široká, ale její <li> má
   50 px, košík má navíc odsazení 20 px a mezi nimi je mezera 22 px →
   72 px mezi ikonami. Nativní pravidla šířku nepustí, proto se ikona
   přisune záporným okrajem a posunem (výsledná mezera mezi ikonami ~15 px).
   =================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  #header .nav-list.top-nav-right > li.subnav-left {
    margin-right: -42px !important;
    transform: translateX(16px) !important;
  }
}


/* ===================================================================
   3.59  HERO (titulní strana) — nadpis „Teplákové kolekce“ dominantní
   Diagnostika (živý web): text je v .extended-banner-texts s odsazením
   zleva calc(64px + 10 %), což na telefonu a iPadu odsouvalo nadpis
   doprostřed fotky. Modelka stojí od ~40 % šířky hero doprava, proto
   je velikost nadpisu svázaná s šířkou okna (vw) — roste, ale nedostane
   se na ni. Tlačítko „Podívej se“ jde s nadpisem (je ve stejném boxu).
   =================================================================== */

/* desktop (≥ 1280 px): jen větší */
@media (min-width: 1280px) {
  body.type-index .wide-carousel .extended-banner-title {
    font-size: clamp(44px, 4.3vw, 76px) !important;
    line-height: 1.08 !important;
    margin-bottom: 28px !important;
  }
  body.type-index .wide-carousel .extended-banner-link {
    font-size: 17px !important;
    height: 52px !important;
    padding: 0 42px !important;
  }
}

/* iPad (768–1279 px): víc vlevo a větší */
@media (min-width: 768px) and (max-width: 1279px) {
  body.type-index .wide-carousel .extended-banner-texts {
    padding-left: 6% !important;
    padding-right: 2% !important;
    max-width: 40% !important; /* užší box → nadpis se zalomí na 2 řádky a nejde na modelku */
  }
  body.type-index .wide-carousel .extended-banner-link {
    font-size: 16px !important;
    height: 44px !important;
    padding: 0 32px !important;
  }
  body.type-index .wide-carousel .extended-banner-title {
    font-size: clamp(38px, 5vw, 58px) !important;
    line-height: 1.1 !important;
    margin-bottom: 24px !important;
  }
}

/* telefon (< 768 px): víc vlevo, o něco větší */
@media (max-width: 767px) {
  body.type-index .wide-carousel .extended-banner-texts {
    padding-left: 6% !important;
    padding-right: 2% !important;
    max-width: 62% !important;
  }
  body.type-index .wide-carousel .extended-banner-title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.12 !important;
    margin-bottom: 16px !important;
  }
}


/* ===================================================================
   3.60  ZÁPATÍ — spodní švestkový pruh na telefonu a iPadu (≤ 900 px)
   Diagnostika (živý web, 390 px): podpis „Vytvořil Shoptet a vhs.“ má
   nativní levý okraj 20 px, copyright ne → řádky nelícovaly a oba byly
   u levého okraje. Teď jsou oba řádky vycentrované (copyright nahoře,
   podpis pod ním), odchylka od středu < 1 px.
   =================================================================== */
@media (max-width: 900px) {
  footer.footer .footer-bottom {
    flex-direction: column-reverse !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  footer.footer .footer-bottom > span {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    text-align: center !important;
    justify-content: center !important;
  }
  footer.footer .footer-bottom > span:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
  }
  footer.footer .footer-bottom .copyright {
    display: block !important;
    text-align: center !important;
  }
}


/* ===================================================================
   3.61  KLIENTSKÉ CENTRUM (po přihlášení zákazníka) — „bento“, ostré rohy
   Diagnostika (živý web): .content-wrapper-in je flex v řadě —
   aside.sidebar-left (340 px, .client-center-box > ul > li) + main#content.
   JS (krok „Klientské centrum“) přejmenuje první položku na „Přehled“,
   z ostatních odstraní „Moje“ a na úvodní straně postaví uvítání, dlaždice
   a mřížku sekcí z odkazů nativního menu. Vše pod body.gp-klient.
   Zásada designu: žádné zaoblení, 4px mezery (jako mřížka kategorií),
   tlačítka jako „Otevřít filtr“ / „Do košíku“ (2px rám, velká písmena).
   =================================================================== */

/* ----- sidebar → podtržené záložky nad obsahem ----- */
body.gp-klient .content-wrapper-in {
  flex-direction: column !important;
  align-items: stretch !important;
}
body.gp-klient .content-wrapper-in > aside.sidebar-left,
body.gp-klient .content-wrapper-in > main#content {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  flex: 0 0 auto !important;
}
body.gp-klient .content-wrapper-in > aside.sidebar-left {
  padding: 0 !important;
  margin: 0 0 28px !important;
}
body.gp-klient .content-wrapper-in > aside.sidebar-left .sidebar-inner {
  display: block !important;
  padding: 0 !important;
}
body.gp-klient .content-wrapper-in > main#content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.gp-klient .client-center-box {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gp-line, #e6e3de) !important;
  border-radius: 0 !important;
}
body.gp-klient .client-center-box ul {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.gp-klient .client-center-box ul::-webkit-scrollbar {
  display: none;
}
body.gp-klient .client-center-box li {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.gp-klient .client-center-box li a {
  display: block !important;
  padding: 16px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  color: var(--gp-ink-soft, #6b6b6b) !important;
}
body.gp-klient .client-center-box li a:hover {
  color: var(--gp-cta, #a3336f) !important;
}
body.gp-klient .client-center-box li.active a,
body.gp-klient .client-center-box li.active a strong {
  color: var(--gp-ink, #1a1a1a) !important;
  font-weight: 500 !important;
  box-shadow: inset 0 -2px 0 var(--gp-cta, #a3336f) !important;
  background: transparent !important;
}
body.gp-klient .client-center-box li.gp-klient-logout {
  margin-left: auto !important;
  order: 99 !important;
}
body.gp-klient .client-center-box li.gp-klient-logout a {
  font-weight: 400 !important;
  color: var(--gp-ink-soft, #6b6b6b) !important;
}

/* jemné zesvětlení na pravém okraji = „dá se táhnout“ */
@media (max-width: 1279px) {
  body.gp-klient .client-center-box::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: 44px;
    background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  body.gp-klient .client-center-box.is-end::after {
    display: none;
  }
}

/* ----- tlačítka: ostrá, jako „Otevřít filtr“ / „Do košíku“ ----- */
body.gp-klient .gp-klient-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 2px solid var(--gp-ink, #1a1a1a);
  border-radius: 0;
  background: transparent;
  color: var(--gp-ink, #1a1a1a);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.gp-klient .gp-klient-btn.is-primary {
  background: var(--gp-cta, #a3336f);
  border-color: var(--gp-cta, #a3336f);
  color: #fff;
}
body.gp-klient .gp-klient-btn.is-primary:hover {
  background: #8a2a5e;
  border-color: #8a2a5e;
}
body.gp-klient .gp-klient-btn.is-light {
  border-color: #fff;
  color: #fff;
}
body.gp-klient .gp-klient-btn.is-light:hover {
  background: #fff;
  color: var(--gp-ink, #1a1a1a);
}

/* ----- bento deska ----- */
body.gp-klient .gp-klient-board {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-areas:
    "hello cart cart"
    "hello ship orders";
  gap: 4px;
  margin: 0 0 4px;
}
body.gp-klient .gp-klient-hero {
  grid-area: hello;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: 260px;
  padding: 32px;
  background: var(--gp-header-bg, #efdde9);
  border-radius: 0;
}
body.gp-klient .gp-klient-hero h1 {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  color: var(--gp-cta, #a3336f) !important;
  text-transform: uppercase !important;
}
body.gp-klient .gp-klient-hello {
  margin: 0 !important;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--gp-ink, #1a1a1a);
}
body.gp-klient .gp-klient-hello small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gp-ink-soft, #6b6b6b);
}
body.gp-klient .gp-klient-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--gp-line, #e6e3de);
  border-radius: 0;
}
body.gp-klient .gp-klient-stat--cart {
  grid-area: cart;
  background: var(--gp-ink, #1a1a1a);
  border-color: var(--gp-ink, #1a1a1a);
  color: #fff;
  align-items: flex-start;
}
body.gp-klient .gp-klient-stat--ship { grid-area: ship; }
body.gp-klient .gp-klient-stat--orders { grid-area: orders; }
body.gp-klient .gp-klient-stat__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-ink-soft, #6b6b6b);
}
body.gp-klient .gp-klient-stat--cart .gp-klient-stat__label {
  color: var(--gp-header-bg, #efdde9);
}
body.gp-klient .gp-klient-stat__value {
  margin: 0 !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: inherit;
}
body.gp-klient .gp-klient-stat--cart .gp-klient-stat__value {
  font-size: 24px;
  font-weight: 300;
}
body.gp-klient .gp-klient-stat--cart .gp-klient-btn {
  margin-top: auto;
}
body.gp-klient .gp-klient-stat__text {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gp-ink, #1a1a1a);
}
body.gp-klient .gp-klient-stat__link {
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gp-cta, #a3336f);
}
body.gp-klient .gp-klient-stat__link::after {
  content: " →";
}
body.gp-klient .gp-klient-bar {
  height: 4px;
  margin-top: auto;
  background: var(--gp-line, #e6e3de);
}
body.gp-klient .gp-klient-bar__fill {
  height: 100%;
  width: 0;
  background: var(--gp-cta, #a3336f);
  transition: width 0.4s ease;
}

/* ----- mřížka sekcí ----- */
body.gp-klient .gp-klient-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 28px;
}
body.gp-klient .gp-klient-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 104px;
  padding: 18px 20px;
  background: #faf5f9;
  border-radius: 0;
  color: var(--gp-ink, #1a1a1a);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.gp-klient .gp-klient-item__num {
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gp-cta, #a3336f);
}
body.gp-klient .gp-klient-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-end;
  min-width: 0;
}
body.gp-klient .gp-klient-item__text strong {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}
body.gp-klient .gp-klient-item__text small {
  font-size: 12px;
  line-height: 1.3;
  color: var(--gp-ink-soft, #6b6b6b);
}
body.gp-klient .gp-klient-item__icon {
  margin-left: auto;
  display: flex;
  color: var(--gp-cta, #a3336f);
}
body.gp-klient .gp-klient-item:hover {
  background: var(--gp-cta, #a3336f);
  color: #fff;
}
body.gp-klient .gp-klient-item:hover .gp-klient-item__num,
body.gp-klient .gp-klient-item:hover .gp-klient-item__icon,
body.gp-klient .gp-klient-item:hover small {
  color: #fff;
}

/* ----- iPad (768–1023 px): dva sloupce ----- */
@media (max-width: 1023px) {
  body.gp-klient .gp-klient-board {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hello hello"
      "cart cart"
      "ship orders";
  }
  body.gp-klient .gp-klient-hero {
    min-height: 0;
    padding: 28px 24px;
  }
  body.gp-klient .gp-klient-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----- telefon (< 768 px): jeden sloupec, sekce jako řádky ----- */
@media (max-width: 767px) {
  body.gp-klient .content-wrapper-in > aside.sidebar-left {
    margin-bottom: 18px !important;
  }
  body.gp-klient .client-center-box ul {
    gap: 22px !important;
  }
  body.gp-klient .gp-klient-board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "hello"
      "cart"
      "ship"
      "orders";
  }
  body.gp-klient .gp-klient-hero {
    padding: 22px 18px;
    gap: 18px;
  }
  body.gp-klient .gp-klient-stat {
    padding: 18px;
  }
  body.gp-klient .gp-klient-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.gp-klient .gp-klient-item {
    align-items: center;
    min-height: 62px;
    padding: 14px 16px;
  }
  body.gp-klient .gp-klient-item__num {
    position: static;
    flex: 0 0 24px;
  }
  body.gp-klient .gp-klient-item__text {
    flex: 1 1 auto;
    align-self: center;
  }
  body.gp-klient .gp-klient-item__text small {
    display: none;
  }
  body.gp-klient .gp-klient-item__icon {
    margin-left: 0;
  }
}


/* ===================================================================
   3.62  HLAVIČKA NA TELEFONU — ikona účtu viditelná vedle košíku
   Diagnostika (živý web, 390 px): ikona účtu je v kódu (a.top-nav-button-account),
   šablona na telefonu ale skrývá její položku li.top-nav-login (display:none).
   Zobrazíme ji a přisuneme k košíku (mezera ~16 px, stejně jako na iPadu).
   =================================================================== */
@media (max-width: 767px) {
  #header li.top-nav-login {
    display: flex !important;
  }
  #header .nav-list.top-nav-right > li.subnav-left {
    margin-right: -14px !important;
  }
}



/* ===================================================================
   3.63  OBJEDNÁVKA — krok 2 (Informace o vás), ostré rohy
   Diagnostika (živý web): #checkoutContent (v form#order-form) má děti:
   fieldset.co-contact-information, div.co-billing-address, div#shipping-address,
   div.co-box-additional, div.order-summary, div.consents, div.next-step.
   Nativně je to jeden sloupec 753 px, popisky vlevo, souhrn až dole.
   JS (krok „Objednávka krok 2“) přidá pruh účtu, přesune souhlasy a tlačítka
   do karty souhrnu, na přihlášeném staví kartu adresy a na mobilu spodní lištu.
   Vše pod body.gp-order (jen /objednavka/krok-2/).
   =================================================================== */

/* ----- široký obsah a dvousloupcové rozložení ----- */
body.gp-order main#content {
  max-width: 1120px !important;
}
body.gp-order #checkoutContent {
  counter-reset: gp-sec;
}
@media (min-width: 992px) {
  body.gp-order #checkoutContent {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }
  body.gp-order #checkoutContent > * {
    grid-column: 1;
  }
  body.gp-order #checkoutContent > .order-summary {
    grid-column: 2;
    grid-row: 1 / span 8;
    position: sticky;
    top: 24px;
  }
}

/* ----- stepper: tři ostré kroky ----- */
body.gp-order ol.cart-header,
#cart-widget.gp-cartwin ol.cart-header {
  display: flex !important;
  gap: 4px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  list-style: none !important;
}
body.gp-order ol.cart-header li,
#cart-widget.gp-cartwin ol.cart-header li {
  flex: 1 1 0;
  margin: 0 !important;
  padding: 10px 0 0 !important;
  border-top: 3px solid var(--gp-line, #e6e3de);
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left !important;
}
body.gp-order ol.cart-header li::after,
body.gp-order ol.cart-header li *::before,
body.gp-order ol.cart-header li *::after,
#cart-widget.gp-cartwin ol.cart-header li::after,
#cart-widget.gp-cartwin ol.cart-header li *::before,
#cart-widget.gp-cartwin ol.cart-header li *::after {
  display: none !important;
  content: none !important;
}
body.gp-order ol.cart-header,
#cart-widget.gp-cartwin ol.cart-header {
  counter-reset: gp-step;
}
body.gp-order ol.cart-header li,
#cart-widget.gp-cartwin ol.cart-header li {
  display: flex !important;
  align-items: baseline;
  gap: 0.5em;
  white-space: nowrap;
}
body.gp-order ol.cart-header li::before,
#cart-widget.gp-cartwin ol.cart-header li::before {
  counter-increment: gp-step;
  content: "0" counter(gp-step);
  display: inline !important;
  font-weight: 500;
  color: var(--gp-ink-soft, #6b6b6b);
}
body.gp-order ol.cart-header li.active::before,
#cart-widget.gp-cartwin ol.cart-header li.active::before {
  color: var(--gp-cta, #a3336f);
}
body.gp-order ol.cart-header .gp-short,
#cart-widget.gp-cartwin ol.cart-header .gp-short {
  display: none;
}
@media (max-width: 575px) {
  body.gp-order ol.cart-header .gp-full,
#cart-widget.gp-cartwin ol.cart-header .gp-full {
    display: none;
  }
  body.gp-order ol.cart-header .gp-short,
#cart-widget.gp-cartwin ol.cart-header .gp-short {
    display: inline;
  }
}
body.gp-order ol.cart-header li.completed,
#cart-widget.gp-cartwin ol.cart-header li.completed {
  border-top-color: var(--gp-ink, #1a1a1a);
}
body.gp-order ol.cart-header li.active,
#cart-widget.gp-cartwin ol.cart-header li.active {
  border-top-color: var(--gp-cta, #a3336f);
}
body.gp-order ol.cart-header li a,
body.gp-order ol.cart-header li strong,
#cart-widget.gp-cartwin ol.cart-header li a,
#cart-widget.gp-cartwin ol.cart-header li strong {
  color: var(--gp-ink, #1a1a1a) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

/* ----- pruh účtu ----- */
body.gp-order .gp-order-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 6px;
  padding: 16px 20px;
  border-radius: 0;
}
body.gp-order .gp-order-banner.is-guest {
  background: var(--gp-header-bg, #efdde9);
  color: var(--gp-ink, #1a1a1a);
}
body.gp-order .gp-order-banner.is-user {
  background: var(--gp-ink, #1a1a1a);
  color: #fff;
}
body.gp-order .gp-order-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.gp-order .gp-order-banner strong {
  font-size: 15px;
  font-weight: 600;
}
body.gp-order .gp-order-banner__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-header-bg, #efdde9);
}
body.gp-order .gp-order-banner__sub {
  font-size: 13px;
}
body.gp-order .gp-order-banner.is-guest .gp-order-banner__sub {
  color: #72243e;
}
body.gp-order .gp-order-banner.is-user .gp-order-banner__sub {
  color: #d9c9d3;
}

/* ----- tlačítka: ostrá, jako „Otevřít filtr“ / „Do košíku“ ----- */
body.gp-order .gp-order-btn,
#cart-widget.gp-cartwin .gp-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 22px;
  border: 2px solid var(--gp-ink, #1a1a1a);
  border-radius: 0;
  background: transparent;
  color: var(--gp-ink, #1a1a1a);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
body.gp-order .gp-order-btn.is-light,
#cart-widget.gp-cartwin .gp-order-btn.is-light {
  border-color: #fff;
  color: #fff;
}
body.gp-order .gp-order-btn.is-primary,
#cart-widget.gp-cartwin .gp-order-btn.is-primary {
  background: var(--gp-cta, #a3336f);
  border-color: var(--gp-cta, #a3336f);
  color: #fff;
}

/* ----- sekce: číslo, čára nad nadpisem ----- */
body.gp-order #checkoutContent .co-box h2 {
  counter-increment: gp-sec;
  display: flex;
  align-items: baseline;
  margin: 26px 0 4px !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--gp-ink, #1a1a1a) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
body.gp-order #checkoutContent .co-box h2::before {
  content: counter(gp-sec);
  margin-right: 12px;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--gp-cta, #a3336f);
}
body.gp-order #checkoutContent .order-summary h2 {
  counter-increment: none;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border-top: 0 !important;
}
body.gp-order #checkoutContent .order-summary h2::before {
  content: none;
}
body.gp-order #checkoutContent .co-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ----- pole: štítek nad polem, ostré hrany, 44 px ----- */
body.gp-order #checkoutContent .form-group {
  display: block !important;
  margin: 12px 0 0 !important;
}
body.gp-order #checkoutContent .form-group:has(> .form-control-wrapper) > label {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 0 5px !important;
  transform: none !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  color: var(--gp-ink-soft, #6b6b6b) !important;
}
body.gp-order #checkoutContent .form-group .form-control-wrapper {
  width: 100% !important;
  max-width: none !important;
}
body.gp-order #checkoutContent input.form-control,
body.gp-order #checkoutContent select.form-control,
body.gp-order #checkoutContent textarea.form-control {
  width: 100% !important;
  max-width: none !important;
  height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid #cfccc6 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--gp-ink, #1a1a1a) !important;
}
body.gp-order #checkoutContent textarea.form-control {
  height: auto !important;
  min-height: 96px;
  padding: 10px 12px !important;
}
body.gp-order #checkoutContent .form-group.populated input.form-control {
  background: #faf5f9 !important;
  border-color: #e2cbd9 !important;
}
body.gp-order #checkoutContent input.form-control:focus,
body.gp-order #checkoutContent select.form-control:focus,
body.gp-order #checkoutContent textarea.form-control:focus {
  border-color: var(--gp-cta, #a3336f) !important;
  box-shadow: inset 0 0 0 1px var(--gp-cta, #a3336f) !important;
  outline: 0 !important;
}
body.gp-order #checkoutContent .phone-combined-input {
  display: flex !important;
  width: 100% !important;
}
body.gp-order #checkoutContent .phone-combined-input input.form-control {
  flex: 1 1 auto;
  min-width: 0;
}

/* ----- karta adresy (přihlášený) ----- */
body.gp-order .gp-addr-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  padding: 14px 16px;
  border: 2px solid var(--gp-ink, #1a1a1a);
  border-radius: 0;
  background: #fff;
}
body.gp-order .gp-addr-card__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 14px;
  line-height: 1.5;
}
body.gp-order .gp-addr-card__text strong {
  font-weight: 600;
}
body.gp-order .gp-addr-card__text small {
  font-size: 12px;
  color: var(--gp-ink-soft, #6b6b6b);
}
body.gp-order .gp-addr-card__edit {
  flex: 0 0 auto;
  padding: 6px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-cta, #a3336f);
  cursor: pointer;
}
body.gp-order #checkoutContent .gp-addr-card-on .gp-addr-field {
  display: none !important;
}
body.gp-order #checkoutContent .gp-addr-card-on.is-open .gp-addr-field {
  display: block !important;
}
body.gp-order .gp-addr-card-on.is-open .gp-addr-card {
  display: none;
}

/* ----- nabídka účtu (nativní registrace, pokud je zapnutá) ----- */
body.gp-order .gp-account-card {
  padding: 14px 16px !important;
  border: 2px solid var(--gp-cta, #a3336f);
  border-radius: 0;
}

/* ----- karta souhrnu ----- */
body.gp-order #checkoutContent .order-summary {
  padding: 20px !important;
  background: #fff !important;
  border: 1px solid var(--gp-line, #e6e3de) !important;
  border-radius: 0 !important;
}
body.gp-order #checkoutContent .order-summary .consents {
  margin: 16px 0 0 !important;
  font-size: 12px;
}
body.gp-order #checkoutContent .order-summary .next-step {
  display: flex !important;
  flex-direction: column-reverse;
  gap: 10px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion {
  width: 100% !important;
  min-height: 52px;
  padding: 0 16px !important;
  border: 2px solid var(--gp-cta, #a3336f) !important;
  border-radius: 0 !important;
  background: var(--gp-cta, #a3336f) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion:hover {
  background: #8a2a5e !important;
  border-color: #8a2a5e !important;
}
body.gp-order #checkoutContent .order-summary .next-step .next-step-back {
  width: 100% !important;
  padding: 6px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: underline;
  color: var(--gp-ink-soft, #6b6b6b) !important;
}

/* ----- spodní lišta (jen tablet a telefon) ----- */
body.gp-order .gp-order-bar {
  display: none;
}
@media (max-width: 991px) {
  body.gp-order {
    padding-bottom: 84px;
  }
  body.gp-order .gp-order-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--gp-ink, #1a1a1a);
  }
  body.gp-order .gp-order-bar.is-hidden {
    display: none;
  }
  body.gp-order .gp-order-bar__sum {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--gp-ink-soft, #6b6b6b);
  }
  body.gp-order .gp-order-bar__sum strong {
    font-size: 18px;
    font-weight: 300;
    white-space: nowrap;
    color: var(--gp-ink, #1a1a1a);
  }
  body.gp-order .gp-order-bar .gp-order-btn {
    flex: 1 1 auto;
    min-height: 48px;
  }
  body.gp-order #checkoutContent {
    display: block;
  }
}

/* telefon: pruh účtu do sloupce, tlačítko přes celou šířku */
@media (max-width: 575px) {
  body.gp-order .gp-order-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }
  body.gp-order .gp-order-banner .gp-order-btn {
    width: 100%;
  }
  body.gp-order ol.cart-header li,
#cart-widget.gp-cartwin ol.cart-header li {
    font-size: 10px !important;
    letter-spacing: 0.06em;
  }
}


/* doladění po testu na živé stránce */
body.gp-order #checkoutContent .co-contact-information,
body.gp-order #checkoutContent .co-billing-address,
body.gp-order #checkoutContent .co-box-additional {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.gp-order #checkoutContent .co-contact-information::after,
body.gp-order #checkoutContent .co-contact-information::before {
  display: none !important;
}
body.gp-order #checkoutContent .co-contact-information hr,
body.gp-order #checkoutContent .co-billing-address hr {
  display: none !important;
}
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion,
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion * {
  font-size: 11px !important;
  line-height: 1.3 !important;
}
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion span,
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion small {
  display: inline !important;
  margin-left: 0.35em;
}

/* doladění 2: nativní „|“ v ol.cart-header a text tlačítka */
body.gp-order ol.cart-header::before,
body.gp-order ol.cart-header::after,
#cart-widget.gp-cartwin ol.cart-header::before,
#cart-widget.gp-cartwin ol.cart-header::after {
  display: none !important;
  content: none !important;
}
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion .order-button-text,
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion .order-button-suffix {
  display: inline !important;
  font-size: 11px !important;
}
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion .order-button-suffix {
  margin-left: 0.35em;
}
body.gp-order #checkoutContent .co-billing-address {
  border-bottom: 0 !important;
}

/* doladění 3: tlačítko „Objednat s povinností platby“ v jednom řádku */
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 0.4em !important;
  row-gap: 0 !important;
  text-transform: uppercase !important;
}
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion .order-button-text,
body.gp-order #checkoutContent .order-summary .next-step .btn-conversion .order-button-suffix {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}



/* ===================================================================
   3.64  NÁKUPNÍ KOŠÍK (/kosik/), DOPRAVA A PLATBA (krok 1), PRÁZDNÝ KOŠÍK
   Diagnostika (živý web):
   • košík: #cart-wrapper > ol.cart-header + div.cart-inner > table.cart-table
     (tr.removeable > td.cart-p-image, td.p-name, td.p-quantity, td.p-price,
     td.p-total) + div.summary.row (kupón, bonusy, div.price-wrap s tlačítky);
   • krok 1: #checkoutContent > form#order-form (.co-delivery-method,
     .co-payment-method; #order-shipping-methods > .radio-wrapper > input + label)
     + .order-summary + .next-step;
   • prázdný košík: .cart-inner.cart-empty > h1 + .empty-cart-boxes
     (seznam kategorií + vyhledávání).
   Vše pod body.gp-order (+ gp-cart / gp-step1). Ostré rohy, 4px/čárové oddělení.
   =================================================================== */

/* ----- košík: dvousloupcové rozložení ----- */
body.gp-cart .cart-inner:not(.cart-empty),
#cart-widget.gp-cartwin .cart-inner:not(.cart-empty) {
  padding: 0 !important;
}
@media (min-width: 992px) {
  body.gp-cart .cart-inner:not(.cart-empty),
#cart-widget.gp-cartwin .cart-inner:not(.cart-empty) {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }
  body.gp-cart .cart-inner > .gp-cart-ship,
  body.gp-cart .cart-inner > table.cart-table,
#cart-widget.gp-cartwin .cart-inner > .gp-cart-ship,
#cart-widget.gp-cartwin .cart-inner > table.cart-table {
    grid-column: 1;
  }
  body.gp-cart .cart-inner > .summary.row,
#cart-widget.gp-cartwin .cart-inner > .summary.row {
    display: contents;
  }
  body.gp-cart .summary.row::before,
  body.gp-cart .summary.row::after,
#cart-widget.gp-cartwin .summary.row::before,
#cart-widget.gp-cartwin .summary.row::after {
    display: none !important;
  }
  body.gp-cart .summary > .col-md-6:first-child,
#cart-widget.gp-cartwin .summary > .col-md-6:first-child {
    grid-column: 1;
  }
  body.gp-cart .summary > .price-wrap,
#cart-widget.gp-cartwin .summary > .price-wrap {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 24px;
  }
}
body.gp-cart .summary > [class*="col-"],
#cart-widget.gp-cartwin .summary > [class*="col-"] {
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ----- pruh „doprava zdarma“ ----- */
body.gp-cart .gp-cart-ship,
#cart-widget.gp-cartwin .gp-cart-ship {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 16px;
  background: var(--gp-header-bg, #efdde9);
  font-size: 13px;
  font-weight: 600;
  color: var(--gp-ink, #1a1a1a);
}
body.gp-cart .gp-cart-ship__icon,
#cart-widget.gp-cartwin .gp-cart-ship__icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--gp-cta, #a3336f);
}
body.gp-cart .gp-cart-ship__text,
#cart-widget.gp-cartwin .gp-cart-ship__text {
  flex: 1 1 auto;
  min-width: 0;
}
body.gp-cart .gp-cart-ship__bar,
#cart-widget.gp-cartwin .gp-cart-ship__bar {
  flex: 0 0 90px;
  height: 4px;
  background: #fff;
}
body.gp-cart .gp-cart-ship__fill,
#cart-widget.gp-cartwin .gp-cart-ship__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gp-cta, #a3336f);
  transition: width 0.4s ease;
}

/* ----- řádky košíku: z tabulky na ostré karty ----- */
body.gp-cart table.cart-table,
body.gp-cart table.cart-table tbody,
#cart-widget.gp-cartwin table.cart-table,
#cart-widget.gp-cartwin table.cart-table tbody {
  display: block;
  width: 100%;
  border: 0 !important;
}
body.gp-cart table.cart-table tr,
#cart-widget.gp-cartwin table.cart-table tr {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto auto 32px;
  grid-template-areas: "img name qty price total x";
  align-items: center;
  column-gap: 16px;
  padding: 14px 0;
  border: 0 !important;
  border-bottom: 1px solid var(--gp-line, #e6e3de) !important;
}
body.gp-cart table.cart-table td,
#cart-widget.gp-cartwin table.cart-table td {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.gp-cart table.cart-table .p-label,
#cart-widget.gp-cartwin table.cart-table .p-label {
  display: none !important;
}
body.gp-cart table.cart-table td.cart-p-image,
#cart-widget.gp-cartwin table.cart-table td.cart-p-image {
  grid-area: img;
}
body.gp-cart table.cart-table td.cart-p-image img,
#cart-widget.gp-cartwin table.cart-table td.cart-p-image img {
  display: block;
  width: 72px;
  height: 96px;
  object-fit: cover;
  background: var(--gp-header-bg, #efdde9);
}
body.gp-cart table.cart-table td.p-name,
#cart-widget.gp-cartwin table.cart-table td.p-name {
  grid-area: name;
  min-width: 0;
}
body.gp-cart table.cart-table td.p-name a.main-link,
#cart-widget.gp-cartwin table.cart-table td.p-name a.main-link {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  color: var(--gp-ink, #1a1a1a);
  text-decoration: none;
}
body.gp-cart table.cart-table td.p-name .main-link-variant,
#cart-widget.gp-cartwin table.cart-table td.p-name .main-link-variant {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--gp-ink-soft, #6b6b6b);
}
body.gp-cart table.cart-table .cart-p-availability,
#cart-widget.gp-cartwin table.cart-table .cart-p-availability {
  margin-top: 4px;
  font-size: 12px;
}
body.gp-cart table.cart-table .cart-p-availability strong,
#cart-widget.gp-cartwin table.cart-table .cart-p-availability strong {
  font-weight: 500;
}
body.gp-cart table.cart-table td.p-quantity,
#cart-widget.gp-cartwin table.cart-table td.p-quantity {
  grid-area: qty;
}
body.gp-cart table.cart-table td.p-price,
#cart-widget.gp-cartwin table.cart-table td.p-price {
  grid-area: price;
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  color: var(--gp-ink-soft, #6b6b6b);
}
body.gp-cart table.cart-table td.p-price strong,
#cart-widget.gp-cartwin table.cart-table td.p-price strong {
  font-size: 12px;
  font-weight: 400;
}
body.gp-cart table.cart-table td.p-total,
#cart-widget.gp-cartwin table.cart-table td.p-total {
  display: contents !important;
}
body.gp-cart table.cart-table td.p-total > strong.price-final,
#cart-widget.gp-cartwin table.cart-table td.p-total > strong.price-final {
  grid-area: total;
  min-width: 76px;
  text-align: right;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
}
body.gp-cart table.cart-table td.p-total > form,
#cart-widget.gp-cartwin table.cart-table td.p-total > form {
  grid-area: x;
  margin: 0;
}

/* množství: ostrý stepper − 1 + */
body.gp-cart span.quantity,
#cart-widget.gp-cartwin span.quantity {
  display: inline-flex !important;
  align-items: stretch;
  position: relative;
  width: auto !important;
  height: 36px;
  border: 1px solid #cfccc6;
  border-radius: 0;
  background: #fff;
}
body.gp-cart span.quantity .increase-tooltip,
body.gp-cart span.quantity .decrease-tooltip,
#cart-widget.gp-cartwin span.quantity .increase-tooltip,
#cart-widget.gp-cartwin span.quantity .decrease-tooltip {
  display: none !important;
}
body.gp-cart span.quantity label,
#cart-widget.gp-cartwin span.quantity label {
  order: 2;
  display: flex;
  margin: 0;
}
body.gp-cart span.quantity input.amount,
#cart-widget.gp-cartwin span.quantity input.amount {
  width: 36px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid #cfccc6 !important;
  border-right: 1px solid #cfccc6 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 13px;
  text-align: center;
}
body.gp-cart span.quantity button.increase,
body.gp-cart span.quantity button.decrease,
#cart-widget.gp-cartwin span.quantity button.increase,
#cart-widget.gp-cartwin span.quantity button.decrease {
  position: static !important;
  transform: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 34px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 15px;
  line-height: 1;
  color: var(--gp-ink, #1a1a1a);
}
body.gp-cart span.quantity button.decrease,
#cart-widget.gp-cartwin span.quantity button.decrease { order: 1; }
body.gp-cart span.quantity button.increase,
#cart-widget.gp-cartwin span.quantity button.increase { order: 3; }
body.gp-cart span.quantity button::before,
#cart-widget.gp-cartwin span.quantity button::before {
  content: none !important;
}
body.gp-cart span.quantity button .increase__sign,
body.gp-cart span.quantity button .decrease__sign,
#cart-widget.gp-cartwin span.quantity button .increase__sign,
#cart-widget.gp-cartwin span.quantity button .decrease__sign {
  display: none !important;
}
body.gp-cart span.quantity button.increase::after,
#cart-widget.gp-cartwin span.quantity button.increase::after {
  content: "+" !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: none !important;
  transform: none !important;
  font-size: 16px;
  color: var(--gp-ink, #1a1a1a);
}
body.gp-cart span.quantity button.decrease::after,
#cart-widget.gp-cartwin span.quantity button.decrease::after {
  content: "\2212" !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: none !important;
  transform: none !important;
  font-size: 16px;
  color: var(--gp-ink, #1a1a1a);
}

/* odstranění položky: křížek */
body.gp-cart button.remove-item,
#cart-widget.gp-cartwin button.remove-item {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  cursor: pointer;
}
body.gp-cart button.remove-item::before,
body.gp-cart button.remove-item::after,
#cart-widget.gp-cartwin button.remove-item::before,
#cart-widget.gp-cartwin button.remove-item::after {
  content: "" !important;
  position: absolute;
  left: 8px;
  top: 15px;
  width: 16px;
  height: 2px;
  background: var(--gp-ink-soft, #6b6b6b);
  transform: rotate(45deg);
}
body.gp-cart button.remove-item::after,
#cart-widget.gp-cartwin button.remove-item::after {
  transform: rotate(-45deg);
}
body.gp-cart button.remove-item:hover::before,
body.gp-cart button.remove-item:hover::after,
#cart-widget.gp-cartwin button.remove-item:hover::before,
#cart-widget.gp-cartwin button.remove-item:hover::after {
  background: var(--gp-cta, #a3336f);
}

/* ----- kupón ----- */
body.gp-cart .summary > .col-md-6:first-child,
#cart-widget.gp-cartwin .summary > .col-md-6:first-child {
  margin-top: 16px;
}
body.gp-cart .summary h2.h4,
#cart-widget.gp-cartwin .summary h2.h4 {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.gp-cart .discount-coupon form,
#cart-widget.gp-cartwin .discount-coupon form {
  display: flex !important;
  gap: 6px;
}
body.gp-cart .discount-coupon input#discountCouponCode,
#cart-widget.gp-cartwin .discount-coupon input#discountCouponCode {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid #cfccc6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14px;
}
body.gp-cart .discount-coupon button.btn,
#cart-widget.gp-cartwin .discount-coupon button.btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px !important;
  border: 2px solid var(--gp-ink, #1a1a1a) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gp-ink, #1a1a1a) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none !important;
}
body.gp-cart .gp-extras-hide,
#cart-widget.gp-cartwin .gp-extras-hide {
  display: none !important;
}
body.gp-cart .gp-coupon-toggle,
#cart-widget.gp-cartwin .gp-coupon-toggle {
  display: none;
}

/* ----- karta souhrnu (celkem + tlačítka) ----- */
body.gp-cart .summary > .price-wrap,
#cart-widget.gp-cartwin .summary > .price-wrap {
  padding: 20px !important;
  background: #fff;
  border: 1px solid var(--gp-line, #e6e3de);
  border-radius: 0;
}
body.gp-cart .price-wrapper,
#cart-widget.gp-cartwin .price-wrapper {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--gp-ink, #1a1a1a);
}
body.gp-cart .price-wrapper .price-label,
#cart-widget.gp-cartwin .price-wrapper .price-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.gp-cart .price-wrapper strong.price-primary,
#cart-widget.gp-cartwin .price-wrapper strong.price-primary {
  font-size: 26px !important;
  font-weight: 300 !important;
  white-space: nowrap;
}
body.gp-cart .price-wrap .next-step,
#cart-widget.gp-cartwin .price-wrap .next-step {
  display: flex !important;
  flex-direction: column-reverse;
  gap: 10px;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}
body.gp-cart .price-wrap .next-step .btn-conversion,
body.gp-step1 .order-summary .next-step .btn-conversion,
#cart-widget.gp-cartwin .price-wrap .next-step .btn-conversion {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 52px;
  padding: 0 16px !important;
  border: 2px solid var(--gp-cta, #a3336f) !important;
  border-radius: 0 !important;
  background: var(--gp-cta, #a3336f) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
body.gp-cart .price-wrap .next-step .btn-conversion:hover,
body.gp-step1 .order-summary .next-step .btn-conversion:hover,
#cart-widget.gp-cartwin .price-wrap .next-step .btn-conversion:hover {
  background: #8a2a5e !important;
  border-color: #8a2a5e !important;
}
body.gp-cart .price-wrap .next-step .next-step-back,
body.gp-step1 .order-summary .next-step .next-step-back,
#cart-widget.gp-cartwin .price-wrap .next-step .next-step-back {
  width: 100% !important;
  padding: 6px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: underline;
  color: var(--gp-ink-soft, #6b6b6b) !important;
}

/* ----- krok 1: volby dopravy a platby jako ostré dlaždice ----- */
body.gp-step1 #checkoutContent h2.order-icon {
  background: none !important;
  padding-left: 0 !important;
}
body.gp-step1 .shipping-billing-table .radio-wrapper,
body.gp-step1 .co-payment-method .radio-wrapper {
  position: relative;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.gp-step1 .radio-wrapper > input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none;
}
body.gp-step1 .radio-wrapper > label {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  margin: 0 !important;
  padding: 14px 16px 14px 52px !important;
  border: 1px solid #cfccc6;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
}
body.gp-step1 .radio-wrapper > label::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  margin: -10px 0 0 !important;
  border: 2px solid var(--gp-ink, #1a1a1a) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-sizing: border-box;
}
body.gp-step1 .radio-wrapper > label::after {
  content: "" !important;
  position: absolute !important;
  left: 21px !important;
  top: 50% !important;
  width: 10px !important;
  height: 5px !important;
  margin: -5px 0 0 !important;
  border: 0 !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  background: transparent !important;
  transform: rotate(-45deg);
  opacity: 0;
}
body.gp-step1 .radio-wrapper > input:checked + label {
  border: 2px solid var(--gp-ink, #1a1a1a);
  padding: 13px 15px 13px 51px !important;
  background: #faf5f9;
}
body.gp-step1 .radio-wrapper > input:checked + label::before {
  background: var(--gp-cta, #a3336f) !important;
  border-color: var(--gp-cta, #a3336f) !important;
}
body.gp-step1 .radio-wrapper > input:checked + label::after {
  opacity: 1;
}
body.gp-step1 .radio-wrapper > input:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}
body.gp-step1 .radio-wrapper > label .payment-info {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
body.gp-step1 .radio-wrapper > label .shipping-billing-name {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}
body.gp-step1 .radio-wrapper > label .sublabel {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}
body.gp-step1 .radio-wrapper > label .payment-logo {
  flex: 0 0 auto;
}
body.gp-step1 .radio-wrapper > label .payment-logo img {
  display: block;
  max-height: 24px;
  width: auto;
}
body.gp-step1 .radio-wrapper > label .payment-shipping-price {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: right;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--gp-ink, #1a1a1a) !important;
}
body.gp-step1 .radio-wrapper .question-tooltip {
  border-radius: 0 !important;
}

/* ----- prázdný košík ----- */
body.gp-cart .cart-inner.cart-empty,
#cart-widget.gp-cartwin .cart-inner.cart-empty {
  padding: 48px 0 40px !important;
  text-align: center;
}
body.gp-cart .gp-empty-eyebrow,
#cart-widget.gp-cartwin .gp-empty-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-cta, #a3336f);
}
body.gp-cart .cart-empty h1.cart-heading,
#cart-widget.gp-cartwin .cart-empty h1.cart-heading {
  margin: 10px 0 12px !important;
  font-size: clamp(30px, 5vw, 48px) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  text-transform: uppercase;
  text-align: center;
}
body.gp-cart .gp-empty-sub,
#cart-widget.gp-cartwin .gp-empty-sub {
  max-width: 380px;
  margin: 0 auto 20px !important;
  font-size: 14px;
  color: var(--gp-ink-soft, #6b6b6b);
}
body.gp-cart .gp-empty-cta,
#cart-widget.gp-cartwin .gp-empty-cta {
  display: inline-flex;
}
body.gp-cart .gp-empty-cats,
#cart-widget.gp-cartwin .gp-empty-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px;
  max-width: 900px;
  margin: 34px auto 0;
}
body.gp-cart .gp-empty-cat,
#cart-widget.gp-cartwin .gp-empty-cat {
  display: block;
  padding: 24px 8px 18px;
  overflow: hidden;
  background: var(--gp-header-bg, #efdde9);
  color: var(--gp-ink, #1a1a1a);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.gp-cart .gp-empty-cat__icon,
#cart-widget.gp-cartwin .gp-empty-cat__icon {
  display: block;
  margin: 0 auto 10px;
}
body.gp-cart .gp-empty-cat__icon svg,
#cart-widget.gp-cartwin .gp-empty-cat__icon svg {
  display: block;
  margin: 0 auto;
}
body.gp-cart .gp-empty-cat__name,
#cart-widget.gp-cartwin .gp-empty-cat__name {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
body.gp-cart .gp-empty-cat:hover,
#cart-widget.gp-cartwin .gp-empty-cat:hover {
  background: var(--gp-cta, #a3336f);
  color: #fff;
}
body.gp-cart .gp-empty-cat:hover svg,
#cart-widget.gp-cartwin .gp-empty-cat:hover svg {
  stroke: #fff;
}
body.gp-cart .gp-empty-boxes > .col-md-6:first-child,
#cart-widget.gp-cartwin .gp-empty-boxes > .col-md-6:first-child {
  display: none !important;
}
body.gp-cart .gp-empty-boxes > .col-md-6,
#cart-widget.gp-cartwin .gp-empty-boxes > .col-md-6 {
  float: none !important;
  width: 100% !important;
  max-width: 420px;
  margin: 28px auto 0;
  padding: 0 !important;
}
body.gp-cart .gp-empty-boxes h3,
#cart-widget.gp-cartwin .gp-empty-boxes h3 {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.gp-cart .gp-empty-boxes .search-form input.query-input,
body.gp-cart .gp-empty-boxes .search-form input.form-control,
#cart-widget.gp-cartwin .gp-empty-boxes .search-form input.query-input,
#cart-widget.gp-cartwin .gp-empty-boxes .search-form input.form-control {
  height: 44px !important;
  border: 1px solid #cfccc6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.gp-cart .gp-empty-boxes .search-form button.btn,
#cart-widget.gp-cartwin .gp-empty-boxes .search-form button.btn {
  height: 44px;
  border: 2px solid var(--gp-ink, #1a1a1a) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.gp-cart:has(.cart-empty),
#cart-widget.gp-cartwin:has(.cart-empty) {
  padding-bottom: 0 !important;
}

/* ----- tablet a telefon ----- */
@media (max-width: 991px) {
  body.gp-cart .gp-cart-ship__bar,
#cart-widget.gp-cartwin .gp-cart-ship__bar {
    flex-basis: 70px;
  }
}
@media (max-width: 767px) {
  body.gp-cart table.cart-table tr,
#cart-widget.gp-cartwin table.cart-table tr {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "img name x"
      "img qty total";
    align-items: start;
    column-gap: 14px;
    row-gap: 10px;
    padding: 16px 0;
  }
  body.gp-cart table.cart-table td.p-price,
#cart-widget.gp-cartwin table.cart-table td.p-price {
    display: none !important;
  }
  body.gp-cart table.cart-table td.cart-p-image,
#cart-widget.gp-cartwin table.cart-table td.cart-p-image {
    grid-row: 1 / span 2;
  }
  body.gp-cart table.cart-table td.p-quantity,
  body.gp-cart table.cart-table td.p-total > strong.price-final,
#cart-widget.gp-cartwin table.cart-table td.p-quantity,
#cart-widget.gp-cartwin table.cart-table td.p-total > strong.price-final {
    align-self: end;
  }
  body.gp-cart table.cart-table td.p-total > strong.price-final,
#cart-widget.gp-cartwin table.cart-table td.p-total > strong.price-final {
    min-width: 0;
    grid-column: 3;
    grid-row: 2;
    text-align: right;
  }
  /* kupón: sbalený na „Mám slevový kód +“ */
  body.gp-cart .summary > .col-md-6:first-child h2.h4,
#cart-widget.gp-cartwin .summary > .col-md-6:first-child h2.h4 {
    display: none !important;
  }
  body.gp-cart .gp-coupon-toggle,
#cart-widget.gp-cartwin .gp-coupon-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #cfccc6;
    border-radius: 0;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--gp-ink, #1a1a1a);
    cursor: pointer;
  }
  body.gp-cart .gp-coupon-toggle::after,
#cart-widget.gp-cartwin .gp-coupon-toggle::after {
    content: "+";
    font-size: 18px;
    line-height: 1;
  }
  body.gp-cart .gp-coupon-toggle.is-open::after,
#cart-widget.gp-cartwin .gp-coupon-toggle.is-open::after {
    content: "−";
  }
  body.gp-cart .discounts-wrap,
#cart-widget.gp-cartwin .discounts-wrap {
    display: none;
    margin-top: 8px;
  }
  body.gp-cart .discounts-wrap.is-open,
#cart-widget.gp-cartwin .discounts-wrap.is-open {
    display: block;
  }
  body.gp-cart .gp-empty-cats,
#cart-widget.gp-cartwin .gp-empty-cats {
    grid-template-columns: 1fr 1fr;
  }
  body.gp-step1 .radio-wrapper > label {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}


/* doladění po testu na živé stránce */
@media (max-width: 991px) {
  body.gp-cart .cart-inner:not(.cart-empty),
#cart-widget.gp-cartwin .cart-inner:not(.cart-empty) {
    padding: 0 10px !important;
  }
}
body.gp-cart .cart-inner > .summary.row,
#cart-widget.gp-cartwin .cart-inner > .summary.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.gp-cart table.cart-table td.p-total > form,
#cart-widget.gp-cartwin table.cart-table td.p-total > form {
  justify-self: end;
}

/* doladění 2 po testu: okraje, poslední dlaždice, šipka vyhledávání, mezery, text tlačítek */
@media (max-width: 991px) {
  body.gp-order ol.cart-header,
#cart-widget.gp-cartwin ol.cart-header {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  body.gp-cart .cart-inner.cart-empty,
#cart-widget.gp-cartwin .cart-inner.cart-empty {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (max-width: 767px) {
  body.gp-cart .gp-empty-cats > .gp-empty-cat:last-child:nth-child(odd),
#cart-widget.gp-cartwin .gp-empty-cats > .gp-empty-cat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  body.gp-cart .summary > .price-wrap,
#cart-widget.gp-cartwin .summary > .price-wrap {
    margin-top: 12px;
  }
}
body.gp-cart .gp-empty-boxes .search-form fieldset,
#cart-widget.gp-cartwin .gp-empty-boxes .search-form fieldset {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}
body.gp-cart .gp-empty-boxes .search-form input.query-input,
body.gp-cart .gp-empty-boxes .search-form input.form-control,
#cart-widget.gp-cartwin .gp-empty-boxes .search-form input.query-input,
#cart-widget.gp-cartwin .gp-empty-boxes .search-form input.form-control {
  flex: 1 1 auto;
  min-width: 0;
}
body.gp-cart .gp-empty-boxes .search-form button.btn-arrow-right,
#cart-widget.gp-cartwin .gp-empty-boxes .search-form button.btn-arrow-right {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  padding: 0 !important;
  font-size: 0;
}
body.gp-cart .gp-empty-boxes .search-form button.btn-arrow-right::before,
#cart-widget.gp-cartwin .gp-empty-boxes .search-form button.btn-arrow-right::before {
  content: none !important;
}
body.gp-cart .gp-empty-boxes .search-form button.btn-arrow-right::after,
#cart-widget.gp-cartwin .gp-empty-boxes .search-form button.btn-arrow-right::after {
  content: "\2192" !important;
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: none !important;
  transform: none !important;
  font-size: 18px;
  line-height: 1;
  color: var(--gp-ink, #1a1a1a);
}
body.gp-step1 #checkoutContent .co-delivery-method,
body.gp-step1 #checkoutContent .co-payment-method {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.gp-cart .price-wrap .next-step .btn-conversion,
body.gp-cart .price-wrap .next-step .btn-conversion *,
body.gp-step1 .order-summary .next-step .btn-conversion,
body.gp-step1 .order-summary .next-step .btn-conversion *,
#cart-widget.gp-cartwin .price-wrap .next-step .btn-conversion,
#cart-widget.gp-cartwin .price-wrap .next-step .btn-conversion * {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}


/* ===================================================================
   3.65  POSTRANNÍ OKNO KOŠÍKU (#cart-widget) — celoobrazovkový překryv
   Diagnostika (živý web): otevře se klikem na ikonu košíku (body.cart-window-visible),
   uvnitř je stejné HTML jako na /kosik/ (#cart-wrapper > ol.cart-header + .cart-inner).
   Pravidla výše jsou proto zdvojená i pro #cart-widget.gp-cartwin (JS třídu přidává).
   =================================================================== */
#cart-widget.gp-cartwin .container.place-cart-here {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
#cart-widget.gp-cartwin .cart-window-in {
  padding-bottom: 40px;
}
@media (max-width: 767px) {
  #cart-widget.gp-cartwin .container.place-cart-here {
    padding-left: 10px;
    padding-right: 10px;
  }
}