/* =======================================================================
   By Nika – vlastní styly pro Shoptet (šablona Step)
   Soubor: /user/documents/upload/bynika.css

   OBSAH
   0.  proměnné (barvy, velikosti – tady se ladí skoro všechno)
   1.  typografie
   2.  skrytí duplicitního nadpisu kategorie
   3.  mobilní menu
   4.  drobnosti na mobilu + logo
   5.  detail produktu – galerie, velikosti, ceny
   6.  lightbox
   7.  výpis produktů – dlaždice
   8.  mřížka výpisů
   9.  hlášky (přidáno do košíku apod.)
   10. tlačítka na detailu
   11. cena, množství a tlačítko na telefonu
   12. drobné odkazy pod produktem
   13. skrytí Tisk a Zeptat se
   14. jednotná barva hlavních tlačítek
   15. vedlejší tlačítka (Zpět, Zrušit)
   16. košík, pokladna a formuláře
   17. slevový štítek
   18. roletka země doručení na telefonu
   19. cookies lišta
   20. patička By Nika
   ======================================================================= */


/* ===== 0. proměnné ===================================================== */
:root {
  --font-display: 'Playfair Display', Didot, Georgia, serif;
  --font-text: 'Source Serif 4', Georgia, serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;

  --brand-pink: #e0609a;          /* hover v menu, akcenty */
  --brand-pink-btn: #e07ba8;      /* tlačítka Do košíku */
  --brand-pink-tint: #fdf2f7;     /* světlé růžové pozadí (patička, lišty) */
  --brand-pink-dark: #a62463;     /* tmavá růžová na světlém pozadí – čitelná */
  --brand-ink: #1a1a1a;           /* hlavní text */
  --brand-ink-soft: #2a2024;      /* obrysy, focus */

  /* Výška fotky na detailu. JS ji přepíše podle skutečného poměru fotky.
     100vw = čtverec, 133vw = 3:4 na výšku, 150vw = 2:3 na výšku. */
  --bn-logo-scale: .85;           /* zmenšení loga na mobilu */
  --bn-flag-scale: 1.25;          /* zvětšení štítků Novinka / Tip */
  --bn-flag-discount-scale: 1;    /* slevový štítek – původní velikost */
  --bn-cookie-bg: #fbe6ef;        /* pozadí cookies lišty */

  --bn-title-desktop: 30px;       /* název produktu na detailu, počítač */
  --bn-title-mobile: 23px;        /* název produktu na detailu, telefon */
  --bn-price-detail: 27px;        /* cena na detailu */
  --bn-price-tile: 18px;          /* cena ve výpisu */
  --bn-tile-ratio: 3 / 4;         /* poměr fotky v dlaždici produktu */
  --bn-tile-max-h: 400px;         /* strop výšky fotky ve výpisu na počítači */

  --bn-photo-h: 140vw;
  --bn-photo-max: 92vh;
  --bn-photo-desktop-h: 560px;    /* výška fotky na detailu na počítači */

  --bn-swatch-size: 48px;         /* velikost boxíku s velikostí */
  --bn-swatch-border: #e2d4da;
  --bn-swatch-radius: 12px;       /* zaoblení výběru velikosti */
}

/* ===== 1. typografie ==================================================== */
h1, h2,
.homepage-group-title,
.banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

.products .product .name,
.p .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
}

/* čtený text – bez body, aby ho nepřepisovalo UI pravidlo níž */
p, li, td,
.description, .basic-description {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
}

body, button, input, select, textarea,
h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
}

button, input, select, textarea,
.btn, .price { font-weight: 600; }

/* Ceny mají všude stejný font, řez i tvar číslic – v košíku, ve výpisu i na detailu. */
.price,
.price-final,
.price-standard,
.p-final-price-wrapper strong,
.products .product .price-final {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* název produktu na detailu */
.p-detail .p-detail-inner-header h1,
.p-detail h1 {
  font-family: var(--font-display);
  font-size: var(--bn-title-desktop);
  line-height: 1.22;
}

.p-detail .p-final-price-wrapper .price-final,
.p-detail .p-final-price-wrapper strong {
  font-size: var(--bn-price-detail);
}

.products .product .price-final { font-size: var(--bn-price-tile); }

/* ===== 2. skrytí duplicitního nadpisu kategorie ========================= */
/* Pozor: schovává i H1. Kvůli SEO zvaž zakomentovanou .sr-only variantu. */
.type-category #content h1:first-of-type,
.type-category #content h2:first-of-type {
  display: none !important;
}
/*
.type-category #content h1:first-of-type {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
*/

/* ===== 3. mobilní menu ================================================== */
@media (max-width: 991px) {
  li[class*="menu-item-"] > a {
    font-size: 18px !important;
    letter-spacing: .4px !important;
    padding: 14px 20px !important;
    color: var(--brand-ink) !important;
  }
  li[class*="menu-item-"] + li[class*="menu-item-"] {
    border-top: 1px solid #f0e2e8 !important;
  }
  li[class*="menu-item-"] > a:hover,
  li[class*="menu-item-"].active > a {
    color: var(--brand-pink) !important;
  }
}

/* ===== 4. drobnosti na mobilu ========================================== */
@media (max-width: 600px) {
  [class*="extended-banner"] { padding: 0 10px !important; }
}

/* ===== 4b. logo na mobilu ============================================== */
/* Odsazení hlavičky zůstává, jak ho má šablona – nic nepřepisujeme.
   Logo jen opticky zmenšíme na 85 %; místo v hlavičce si drží,
   takže se výška horní lišty nezmění. */
@media (max-width: 767px) {
  .site-name img,
  .site-name a img {
    transform: scale(var(--bn-logo-scale));
    transform-origin: center center;
  }
}

/* ===== 5a. galerie na detailu – společné pro počítač i telefon ========= */
body.bn-ready .p-detail .p-image-wrapper { display: none !important; }

.bn-gal {
  position: relative;
  margin: 0 0 12px;
  width: 100%;
  height: var(--bn-photo-desktop-h);   /* pevná výška, nic pod fotkou nezbyde */
  border-radius: 8px;
  background: #f6f2f4;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.bn-gal__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bn-gal__track::-webkit-scrollbar { display: none; }
.bn-gal__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.bn-gal__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.bn-gal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .18);
  cursor: pointer; z-index: 3;
}
.bn-gal__nav svg { width: 17px; height: 17px; display: block; }
.bn-gal__nav--prev { left: 14px; }
.bn-gal__nav--next { right: 14px; }
.bn-gal__nav[hidden] { display: none; }
.bn-gal__nav:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.bn-gal__dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 6px; z-index: 3;
}
.bn-gal__dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 3px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.bn-gal__dot.is-active { background: #fff; width: 18px; border-radius: 3px; }

.bn-gal .flags { position: absolute; top: 12px; left: 12px; z-index: 3; margin: 0; }

/* telefon: přes celou šířku obrazovky, bez zaoblení */
@media (max-width: 767px) {
  .bn-gal {
    margin: 0 calc(50% - 50vw) 10px;
    width: 100vw;
    height: min(var(--bn-photo-h), var(--bn-photo-max));
    border-radius: 0;
  }
  .bn-gal__slide img { object-position: center 20%; }
  .bn-gal__nav { width: 40px; height: 40px; }
  .bn-gal__nav--prev { left: 12px; }
  .bn-gal__nav--next { right: 12px; }
}

/* ===== 5. detail produktu – mobil ====================================== */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }

  /* původní galerie zmizí, jakmile JS postaví vlastní */
  body.bn-ready .p-detail .p-image-wrapper { display: none !important; }

  /* záloha, kdyby JS nedojel: aspoň fotka přes celou šířku */
  .p-detail .p-image-wrapper {
    margin-left: -15px;
    margin-right: -15px;
    width: auto;
    max-width: none;
    padding: 0;
  }
  .p-detail .p-image,
  .p-detail .p-main-image { margin: 0; padding: 0; }
  .p-detail .p-image img {
    display: block;
    width: 100%;
    height: min(var(--bn-photo-h), var(--bn-photo-max));
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center 20%;
  }

  /* typografie textové části – natěsno pod fotku */
  body.bn-ready .p-detail .p-info-wrapper { padding-top: 0 !important; margin-top: 0 !important; }
  .p-detail .p-detail-inner-header h1,
  .p-detail h1 { font-size: var(--bn-title-mobile); line-height: 1.25; margin: 0 0 6px; }
  .p-detail .p-final-price-wrapper .price-final,
  .p-detail .p-final-price-wrapper strong { font-size: calc(var(--bn-price-detail) - 3px); }
  .p-detail .p-final-price-wrapper .price-measure,
  .p-detail .p-detail-inner .social-buttons,
  .p-detail .p-tools { display: none; }
}

/* sloupec s galerií nemá mít vnitřní odsazení */
.p-detail *:has(> .bn-gal) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== 5c. výběr velikosti na detailu ================================== */

/* popisek "Velikost:" */
.p-detail .detail-parameters th,
.p-detail .detail-parameters .parameter-name,
.p-detail [data-parameter-name]::before {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b5a61;
}

/* řada boxíků */
.p-detail .advanced-parameter-wrapper,
.p-detail .parameter-values,
.p-detail .variant-list ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
}

/* jednotlivý boxík */
.p-detail .advanced-parameter,
.p-detail .advanced-parameter-inner,
.p-detail .parameter-value,
.p-detail label.parameter-value,
.p-detail .variant-list li a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: var(--bn-swatch-size);
  min-height: var(--bn-swatch-size);
  padding: 0 12px;
  margin: 0 !important;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--bn-swatch-border) !important;
  border-radius: var(--bn-swatch-radius);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--brand-ink-soft);
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.p-detail .advanced-parameter:hover,
.p-detail .advanced-parameter-inner:hover,
.p-detail .parameter-value:hover,
.p-detail .variant-list li a:hover {
  border-color: var(--brand-pink-btn) !important;
}

/* vybraná velikost */
.p-detail .advanced-parameter.active,
.p-detail .advanced-parameter.selected,
.p-detail .advanced-parameter-inner.active,
.p-detail .parameter-value.active,
.p-detail .parameter-value.selected,
.p-detail .variant-list li.active a {
  background: var(--brand-ink-soft) !important;
  border-color: var(--brand-ink-soft) !important;
  color: #fff !important;
}

/* vyprodaná velikost */
.p-detail .advanced-parameter.disabled,
.p-detail .advanced-parameter.unavailable,
.p-detail .parameter-value.disabled,
.p-detail [aria-disabled="true"] {
  opacity: .45;
  text-decoration: line-through !important;
  cursor: not-allowed;
  border-style: dashed !important;
}

/* Rozbalovací seznam s velikostí – ve Stepu je to hlavní ovládací prvek. */
.p-detail select.form-control,
.p-detail select[data-testid^="selectVariant_"],
.p-detail select.hidden-split-parameter {
  display: block !important;
  width: auto;
  min-width: 200px;
  max-width: 100%;
  min-height: var(--bn-swatch-size);
  margin: 6px 0 0;
  padding: 0 44px 0 16px;
  box-sizing: border-box;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2024' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  border: 1px solid var(--bn-swatch-border);
  border-radius: var(--bn-swatch-radius);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-ink-soft);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.p-detail select.form-control:hover,
.p-detail select[data-testid^="selectVariant_"]:hover {
  border-color: var(--brand-pink-btn);
}

.p-detail select.form-control:focus,
.p-detail select[data-testid^="selectVariant_"]:focus {
  outline: none;
  border-color: var(--brand-pink-btn);
  box-shadow: 0 0 0 3px rgba(224, 123, 168, .22);
}

/* více parametrů pod sebou (Vršek, Spodní díl) ať mají mezeru */
.p-detail .detail-parameters tr + tr,
.p-detail .detail-parameters > div + div { margin-top: 12px; }

/* tabulku parametrů jen odlehčíme – display neměníme,
   Shoptet přes něj skrývá řádek s hláškou o nedostupné variantě */
.p-detail .detail-parameters,
.p-detail .detail-parameters tr,
.p-detail .detail-parameters td,
.p-detail .detail-parameters th {
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: none !important;
}
.p-detail .detail-parameters { margin-bottom: 18px; }

@media (max-width: 767px) {
  .p-detail .advanced-parameter,
  .p-detail .advanced-parameter-inner,
  .p-detail .parameter-value,
  .p-detail .variant-list li a { min-width: 46px; min-height: 46px; font-size: 15px; }

  .p-detail select.form-control,
  .p-detail select[data-testid^="selectVariant_"] {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    font-size: 16px;   /* pod 16px iPhone při rozbalení přiblíží stránku */
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-detail .advanced-parameter,
  .p-detail .parameter-value { transition: none; }
}

/* ===== 6. lightbox po rozkliknutí fotky ================================ */
@media (max-width: 767px) {
  .fancybox-slide--image { padding: 0 !important; }
  .fancybox-content {
    width: 100vw !important; height: 100vh !important;
    top: 0 !important; left: 0 !important;
    margin: 0 !important; padding: 0 !important;
    transform: none !important;
    background: #000 !important;
  }
  /* contain, ne cover – v lightboxu má být vidět celá fotka */
  .fancybox-image {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    top: 0 !important; left: 0 !important;
    transform: none !important;
    object-fit: contain !important;
  }
  .fancybox-bg { background: #000; opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-gal__nav { transition: none; }
}

/* ===== 7. výpis produktů – sjednocené dlaždice ========================= */

/* Fotka vyplní celou šířku dlaždice a všechny mají stejný poměr.
   Poměr se řídí proměnnou --bn-tile-ratio nahoře. */
.products .product .image {
  display: block !important;
  position: relative;
  width: 100%;
  aspect-ratio: var(--bn-tile-ratio);
  max-height: var(--bn-tile-max-h);
  overflow: hidden;
  border-radius: 7px 7px 0 0;
  background: #f6f2f4;
  padding: 0 !important;
}
.products .product .image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center 15%;   /* při ořezu drží horní část fotky */
  display: block;
  transition: transform .45s ease;
}
.products .product:hover .image img { transform: scale(1.04); }

/* karta produktu */
.products .product .p {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #efe7ea;
  border-radius: 8px;
  transition: box-shadow .2s ease;
}
.products .product .p:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .07); }
.products .product .p-in { flex: 1 1 auto; display: flex; flex-direction: column; padding: 14px 12px 0; }

/* název, dostupnost, cena */
.products .product .name {
  display: block;
  min-height: 2.6em;              /* dvouřádková rezerva, ať jsou ceny v řadě */
  margin-bottom: 8px;
  text-align: center;
}
.products .product .availability { font-size: 13px; text-align: center; }
.products .product .prices,
.products .product .price-final { text-align: center; }

/* štítky Novinka / Tip – tvar ze šablony, jen zvětšený a nic ho neořezává */
.products .product .p,
.products .product .p-in { overflow: visible !important; }

.products .product .flags {
  z-index: 3;
  transform: scale(var(--bn-flag-scale));
  transform-origin: top left;
}

/* na detailu produktu totéž */
.bn-gal .flags {
  transform: scale(var(--bn-flag-scale));
  transform-origin: top left;
}

/* původní pásek náhledů nepotřebujeme, galerie má tečky */
body.bn-ready .p-detail .p-thumbnails-wrapper { display: none !important; }

/* spodek dlaždice s tlačítkem Do košíku */
.products .product .p-bottom {
  margin-top: auto;
  padding: 12px;
  text-align: center !important;
  min-height: 60px;              /* drží řady zarovnané i tam, kde tlačítko není */
}

.products .product .add-to-cart-button {
  display: inline-block !important;
  width: auto !important;
  min-width: 72%;
  max-width: 100%;
  box-sizing: border-box !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  background: var(--brand-pink-btn) !important;
  color: #fff !important;
  border: 0 !important;
  text-align: center !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 700 !important;
  line-height: 1.2;
  gap: 8px;
  transition: filter .2s ease;
}
.products .product .add-to-cart-button:hover { filter: brightness(1.08); }

/* mobil: dvě dlaždice vedle sebe, menší text */
@media (max-width: 767px) {
  .products .product .p-in { padding: 10px 8px 0; }
  .products .product .p-bottom { padding: 8px; min-height: 54px; }
  .products .product .name { font-size: 15px; min-height: 2.8em; }
  .products .product .price-final { font-size: 16px; }
  .products .product .add-to-cart-button {
    padding: 10px 12px !important;
    font-size: 11px;
    letter-spacing: .5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .products .product .image img,
  .products .product .add-to-cart-button { transition: none; }
  .products .product:hover .image img { transform: none; }
}

/* ===== 8. mřížka výpisů =============================================== */
/* Bootstrap šířky ze šablony by mřížku rozbily, proto je vypínáme. */
body.type-category .products > .product,
body.type-manufacturer-detail .products > .product,
body.type-index .products > .product {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
}

body.type-category .products,
body.type-manufacturer-detail .products,
body.type-index .products {
  display: grid !important;
  float: none !important;
}

/* --- úvodní strana --- */
@media (min-width: 992px) {
  body.type-index .products {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  body.type-index .products {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 18px;
  }
}

/* --- kategorie --- */
@media (min-width: 1200px) {
  body.type-category .products,
  body.type-manufacturer-detail .products {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  body.type-category .products,
  body.type-manufacturer-detail .products {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 20px;
  }
}

/* --- telefon: všude dvě vedle sebe --- */
@media (max-width: 767px) {
  body.type-category .products,
  body.type-manufacturer-detail .products,
  body.type-index .products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
  }
}

/* ===== 9. hlášky (přidáno do košíku, varianta není k dispozici) ======== */

/* Plovoucí oznámení – telefon zdola, počítač vpravo nahoře. */
.messages,
.messages-wrapper {
  position: fixed !important;
  z-index: 1200;
  left: 12px;
  right: 12px;
  bottom: 14px;
  top: auto;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

.messages .msg,
.messages-wrapper .msg {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 auto 8px !important;
  padding: 14px 16px !important;
  max-width: 460px;
  box-sizing: border-box;
  background: #fff !important;
  border: 0 !important;
  border-left: 4px solid #9aa79c !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-ink-soft) !important;
  animation: bn-toast .28s ease;
}

.messages .msg-success { border-left-color: #5f9e6e !important; }

.messages .msg-error,
.messages .msg-warning { border-left-color: var(--brand-pink-btn) !important; }

.messages .msg a { color: #8a3a5c; font-weight: 600; }

.messages .msg .close {
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  opacity: .45;
  text-decoration: none;
}

@keyframes bn-toast {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
  .messages,
  .messages-wrapper {
    left: auto;
    right: 20px;
    bottom: auto;
    top: 84px;
    width: 400px;
  }
  @keyframes bn-toast {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Hláška "Zvolená varianta není k dispozici" zůstává u výběru velikosti,
   jen ji zjemníme – patří ke kontextu, ne do plovoucí karty. */
/* Pozor: žádné display ani visibility – o zobrazení rozhoduje výhradně Shoptet. */
.p-detail [class*="unavailable"],
.p-detail [class*="not-available"] {
  position: static !important;
  max-width: none;
  margin: 10px 0 0 !important;
  padding: 10px 14px !important;
  background: #fdf4f7 !important;
  border: 1px solid #f0dae3 !important;
  border-left: 4px solid var(--brand-pink-btn) !important;
  border-radius: 10px !important;
  box-shadow: none;
  font-size: 13px;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .messages .msg { animation: none; }
}

/* ===== 10. tlačítka na detailu a ikony ================================ */

/* Do košíku – stejný tvar jako ve výpisu, jen výraznější. */
.p-detail .add-to-cart-button,
.p-detail button[data-testid="buttonAddToCart"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px !important;
  background: var(--brand-pink-btn) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(224, 123, 168, .35);
  transition: filter .18s ease, box-shadow .18s ease;
}
.p-detail .add-to-cart-button:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(224, 123, 168, .45);
}

/* Množství pod cenou, tlačítko až pod ním – ne natlačené vedle sebe.
   Ovládání počtu kusů si vykresluje šablona, my měníme jen rozložení. */
.p-detail .add-to-cart,
.p-detail .add-to-cart-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 14px;
}
.p-detail .quantity { float: none !important; margin: 0 !important; }

/* Počet kusů: zaoblený je jen vnější rámeček, vnitřek zůstává hranatý.
   Rozměry a ikony nechává šablona, jinak se plus a minus rozsypou. */
.p-detail .quantity {
  border-radius: var(--bn-swatch-radius);
  border-color: var(--bn-swatch-border) !important;
  overflow: hidden;
}
.p-detail .quantity input,
.p-detail input.amount,
.p-detail .quantity .increase,
.p-detail .quantity .decrease,
.p-detail .quantity button {
  border-radius: 0 !important;
  border-color: var(--bn-swatch-border) !important;
}

/* tlačítko přes celou šířku informačního sloupce */
.p-detail .add-to-cart-button {
  align-self: stretch;
  width: 100%;
}

/* ===== 11. cena, množství a tlačítko na telefonu ====================== */
@media (max-width: 767px) {
  .p-detail .p-detail-inner-header h1 { text-align: center; }

  /* cena na střed – šablona ji plave doleva */
  .p-detail .p-final-price-wrapper,
  .p-detail .prices,
  .p-detail .price-final {
    display: block !important;
    float: none !important;
    width: 100% !important;
    text-align: center !important;
  }
  .p-detail .p-final-price-wrapper { margin: 16px 0 18px; }

  /* jeden řádek: vlevo počítadlo, vedle něj tlačítko přes zbytek šířky.
     Všude !important, protože šablona si na tomhle bloku drží vlastní pravidla. */
  .p-detail .add-to-cart,
  .p-detail .add-to-cart-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 350px;
    margin: 8px auto 0 !important;
  }

  .p-detail .quantity {
    flex: 0 0 132px !important;
    width: 132px !important;
    max-width: 40% !important;
    align-self: stretch !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: stretch;
    justify-content: space-between;
  }

  /* minus, číslo a plus rovnoměrně po celé šířce */
  .p-detail .quantity .decrease,
  .p-detail .quantity .increase {
    flex: 0 0 38px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .p-detail .quantity input,
  .p-detail input.amount {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center;
  }

  .p-detail .add-to-cart-button {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    white-space: nowrap;
  }

  /* výběr velikosti taky na osu */
  .p-detail .detail-parameters { text-align: center; }
  .p-detail select.form-control,
  .p-detail select[data-testid^="selectVariant_"] { margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .p-detail .add-to-cart-button { transition: none; }
}

/* ===== 12. drobné odkazy pod produktem ================================ */
.p-detail .p-tools a,
.p-detail .social-buttons a {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #8c7c83 !important;
  text-decoration: none;
}
.p-detail .p-tools a:hover { color: var(--brand-pink-btn) !important; }
.p-detail .p-tools { gap: 18px; }

/* oddělovací linky ať jsou jemnější */
.p-detail .p-info-wrapper hr,
.p-detail .detail-parameters + div,
.p-detail .p-final-price-wrapper { border-color: #f0e7ea !important; }

/* dostupnost */
.p-detail .availability-label,
.p-detail .availability span {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ===== 13. skrytí Tisk a Zeptat se, Sdílet zůstává ===================== */
.p-detail .p-tools a[title*="Tisk"],
.p-detail .p-tools a[title*="tisk"],
.p-detail .p-tools a[href*=":dotaz"],
.p-detail .p-tools a[title*="prodejc"],
.p-detail .p-tools .print,
.p-detail .p-tools .question,
.p-detail .p-tools .link-icon.print,
.p-detail .p-tools .link-icon.chat,
.p-detail .p-tools li.print,
.p-detail .p-tools li.question {
  display: none !important;
}

/* ===== 14. jednotná barva hlavních tlačítek na celém webu ============== */
/* Do košíku, Pokračovat v objednávce, Odeslat objednávku i tlačítka
   v košíku a pokladně mají jeden odstín – ten z proměnné --brand-pink-btn. */
.btn.btn-conversion,
.btn.btn-primary,
button.btn-conversion,
button.btn-primary,
input.btn-conversion,
input.btn-primary,
.add-to-cart-button,
.cart-window .btn-conversion,
#checkout .btn-conversion,
.order-summary .btn-conversion {
  background-color: var(--brand-pink-btn) !important;
  background-image: none !important;
  border-color: var(--brand-pink-btn) !important;
  color: #fff !important;
  transition: filter .18s ease;
}

.btn.btn-conversion:hover,
.btn.btn-primary:hover,
button.btn-conversion:hover,
button.btn-primary:hover,
.add-to-cart-button:hover {
  filter: brightness(1.06);
  background-color: var(--brand-pink-btn) !important;
  border-color: var(--brand-pink-btn) !important;
}

.btn.btn-conversion:focus-visible,
.btn.btn-primary:focus-visible,
.add-to-cart-button:focus-visible {
  outline: 2px solid var(--brand-ink-soft);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn.btn-conversion, .btn.btn-primary, .add-to-cart-button { transition: none; }
}

/* ===== 15. zpáteční a vedlejší tlačítka zůstávají neutrální ============ */
/* Zpět, Zrušit, Pokračovat v nákupu – nesmí splynout s hlavní akcí,
   jinak zákaznice v pokladně nepozná, kudy vpřed a kudy zpátky. */
.btn.btn-default,
.btn.btn-secondary,
.btn-cancel,
.next-step .btn-back,
.next-step a.back,
[class*="btn"][class*="back"],
a[href*="krok"]:not(.btn-conversion):not(.btn-primary) {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--bn-swatch-border) !important;
  color: #6b5a61 !important;
  box-shadow: none !important;
}

.btn.btn-default:hover,
.btn-cancel:hover,
.next-step .btn-back:hover,
[class*="btn"][class*="back"]:hover {
  border-color: var(--brand-ink-soft) !important;
  color: var(--brand-ink-soft) !important;
}

/* mezera mezi Zpět a Pokračovat, ať na sebe nelepí */
.next-step,
.cart-buttons,
.order-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== 16. košík, pokladna a formuláře ================================ */
/* Stejné zaoblení, rámeček i chování při psaní jako u výběru velikosti. */

input.form-control,
select.form-control,
textarea.form-control,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.discount-coupon input,
#discount-coupon input {
  min-height: 46px;
  padding: 10px 14px;
  background-color: #fff;
  border: 1px solid var(--bn-swatch-border) !important;
  border-radius: var(--bn-swatch-radius) !important;
  box-shadow: none !important;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--brand-ink-soft);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.discount-coupon input:focus {
  outline: none;
  border-color: var(--brand-pink-btn) !important;
  box-shadow: 0 0 0 3px rgba(224, 123, 168, .2) !important;
}

textarea.form-control { min-height: 110px; }

/* Množství v košíku – stejně jako na detailu: zaoblený jen vnější rámeček. */
.cart-table .quantity,
.cart-item .quantity,
.cart-window .quantity,
#checkout .quantity {
  border-radius: var(--bn-swatch-radius);
  border-color: var(--bn-swatch-border) !important;
  overflow: hidden;
}

.cart-table .quantity input,
.cart-table input.amount,
.cart-table .quantity .increase,
.cart-table .quantity .decrease,
.cart-table .quantity button,
.cart-item .quantity input,
.cart-item .quantity .increase,
.cart-item .quantity .decrease,
.cart-item .quantity button,
.cart-window .quantity input,
.cart-window .quantity .increase,
.cart-window .quantity .decrease,
#checkout .quantity input,
#checkout .quantity .increase,
#checkout .quantity .decrease {
  border-radius: 0 !important;
  border-color: var(--bn-swatch-border) !important;
  box-shadow: none !important;
}

/* Panely v košíku a pokladně (souhrn, doprava, platba) kreslí šablona sama
   a jsou do sebe vnořené – vlastní rámečky by se navrstvily přes sebe. */

/* Dlaždice dopravy a platby.
   Rozměry a odsazení si počítá Shoptet – saháme jen na rohy a barvu,
   jinak obsah přeteče mimo rámeček. */
.radio-wrapper,
.payment-shipping-item,
.shipping-item,
.payment-item {
  box-sizing: border-box;
  border-radius: var(--bn-swatch-radius) !important;
  transition: background-color .15s ease;
}

.radio-wrapper.active,
.radio-wrapper.checked,
.payment-shipping-item.active,
.shipping-item.active,
.payment-item.active {
  background-color: #fdf6f9 !important;
  /* obrys přes vnitřní stín – nemění rozměry dlaždice, takže nic nepřeteče */
  box-shadow: inset 0 0 0 1.5px var(--brand-pink-btn) !important;
}

/* obrázky produktů v košíku ať mají stejné rohy jako všude jinde */
.cart-table img,
.cart-item img,
.cart-window img {
  border-radius: 8px;
}

/* tabulka košíku – jemnější linky */
.cart-table td,
.cart-table th { border-color: #f0e7ea !important; }

@media (prefers-reduced-motion: reduce) {
  input.form-control, select.form-control, textarea.form-control,
  .radio-wrapper, .payment-shipping-item { transition: none; }
}

/* ===== 17. slevový štítek ============================================= */
/* Nechceš ho na fotkách vůbec? Odkomentuj následující blok.
.products .product .flag-discount,
.products .product [class*="discount"].flag,
.bn-gal .flag-discount,
.p-detail .flag-discount { display: none !important; }
*/
/* Vlastní měřítko, ať se dá vyladit nezávisle na Novince a Tipu. */
.products .product .flag-discount,
.products .product [class*="discount"].flag,
.bn-gal .flag-discount,
.p-detail .flag-discount {
  transform: scale(var(--bn-flag-discount-scale));
  transform-origin: top left;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .02em;
  font-weight: 700;
}

/* ===== 18. roletka země doručení na telefonu ========================== */
/* Cíleně jen na výběr země – nic jiného ve formuláři neroztahujeme. */
@media (max-width: 767px) {
  #billing-country,
  #delivery-country,
  select[name*="ountry"],
  select[id*="ountry"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 36px !important;
    font-size: 16px !important;
    text-overflow: ellipsis;
  }
}

/* ===== 19. cookies lišta ============================================== */
/* Sloučeno do jedné sekce (dřív 19, 19b, 19c, 19d se navzájem přebíjely).
   Barvu podkladu řídí --bn-cookie-bg nahoře.

   POZOR: obě tlačítka mají schválně stejnou velikost i váhu. Udělat
   "Odmítnout" méně nápadné než "Souhlasím" je porušení GDPR – ÚOOÚ za to
   uděluje pokuty. Odlišuje je jen výplň vs. obrys, ne velikost. */

.siteCookies,
.siteCookies--dark,
.siteCookies.siteCookies--dark,
.siteCookies--bottom,
.js-siteCookies,
.cookies-info,
.cookie-bar,
.cookiesBar,
#cookiesConsent,
#cookies-consent,
[class*="ookie"][class*="onsent"],
[class*="ookie"][class*="bar"] {
  background: var(--bn-cookie-bg) !important;
  background-image: none !important;
  border-top: 1px solid #f2cfdf !important;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .07);
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: var(--brand-ink-soft) !important;
}

/* vnitřní obaly mívají vlastní podklad */
.siteCookies > div,
.siteCookies [class*="siteCookies__"],
.siteCookies .container { background: transparent !important; }

/* text tmavý, ať je na světlé růžové čitelný */
.siteCookies,
.siteCookies p,
.siteCookies span,
.siteCookies div,
.siteCookies h2,
.siteCookies h3,
.siteCookies label { color: var(--brand-ink-soft) !important; }

.siteCookies a:not(.btn):not([class*="agree"]):not([class*="accept"]),
.cookies-info a,
#cookiesConsent a {
  color: var(--brand-pink-dark) !important;
  text-decoration: underline;
}

/* --- společný tvar všech tlačítek v liště --- */
.siteCookies button,
.siteCookies .btn,
.siteCookies a.btn,
.siteCookies [role="button"],
.siteCookies input[type="button"],
.siteCookies input[type="submit"],
.siteCookies .bn-cookie-secondary,
.siteCookies .bn-cookie-accept {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px !important;
  padding: 11px 26px !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  line-height: 1.2 !important;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: filter .18s ease, background-color .18s ease, color .18s ease;
}

/* --- vedlejší volby: obrys --- */
/* Třídy bn-cookie-* přidává bynika.js podle textu, takže sednou vždy. */
.siteCookies button,
.siteCookies .btn,
.siteCookies .btn-default,
.siteCookies .btn-secondary,
.siteCookies .bn-cookie-secondary,
.siteCookies button[class*="reject"],
.siteCookies button[class*="settings"] {
  background: #fff !important;
  border: 1.5px solid var(--brand-pink-btn) !important;
  color: var(--brand-pink-dark) !important;
}

.siteCookies button:hover,
.siteCookies .btn-default:hover,
.siteCookies .bn-cookie-secondary:hover,
.siteCookies button[class*="reject"]:hover,
.siteCookies button[class*="settings"]:hover {
  background: #fff5f9 !important;
  border-color: var(--brand-pink-dark) !important;
}

/* --- souhlas: plná růžová (uvedeno až nakonec, aby vyhrálo) --- */
.siteCookies .btn-primary,
.siteCookies .btn-conversion,
.siteCookies .bn-cookie-accept,
.siteCookies .CookiesOK,
.siteCookies button[class*="agree"],
.siteCookies button[class*="accept"],
.siteCookies button[class*="Accept"],
.siteCookies a[class*="agree"],
.siteCookies [data-testid*="ccept"],
.siteCookies [data-testid*="gree"],
.cookies-info .btn-primary,
#cookiesConsent .btn-primary {
  background: var(--brand-pink-btn) !important;
  border: 1.5px solid var(--brand-pink-btn) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(224, 123, 168, .35) !important;
}

.siteCookies .btn-primary:hover,
.siteCookies .bn-cookie-accept:hover,
.siteCookies button[class*="agree"]:hover,
.siteCookies button[class*="accept"]:hover { filter: brightness(1.06); }

.siteCookies button:focus-visible,
.siteCookies .btn:focus-visible {
  outline: 2px solid var(--brand-ink-soft) !important;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .siteCookies button,
  .siteCookies .btn,
  .siteCookies .bn-cookie-secondary,
  .siteCookies .bn-cookie-accept {
    width: 100% !important;
    padding: 12px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .siteCookies button, .siteCookies .btn { transition: none; }
}


/* ===== 20. patička By Nika ============================================ */
/* HTML blok patičky (div.ft) se vkládá v administraci.
   Pozadí i přechod z bílé kreslí Shoptetí obal patičky – ten jde přes celou
   šířku stránky sám od sebe, takže nepotřebujeme 100vw ani záporné marginy. */

#footer:has(.ft),
footer:has(.ft),
.footer:has(.ft) {
  background-color: var(--brand-pink-tint) !important;
  background-image: linear-gradient(to bottom, #fff 0, var(--brand-pink-tint) 90px) !important;
  background-repeat: no-repeat !important;
}

/* žádný vnitřní obal si nedrží vlastní bílý podklad */
#footer:has(.ft) *:not(.ft-ig):not(.ft-ig *),
footer:has(.ft) *:not(.ft-ig):not(.ft-ig *) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Spodní lišta Shoptetu pryč – vlastní copyright i odkaz na cookies
   máme v .ft-bottom. Pokud tvůj tarif nedovoluje skrýt "Vytvořil Shoptet",
   celý tenhle blok zakomentuj. */
#footer .footer-bottom,
.footer-bottom,
#signature,
.signature {
  display: none !important;
}

.ft {
  position: relative;
  background: transparent !important;   /* barvu drží obal výše */
  color: #555;
  padding: 58px 0 26px;
  font-family: var(--font-sans);
}
.ft * { box-sizing: border-box; }

.ft-cols {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}
.ft-col { flex: 1 1 180px; min-width: 160px; }
.ft-brand { flex: 1 1 260px; }

.ft-col h4 {
  position: relative;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0 0 22px;
  padding-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}
.ft-col h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: var(--brand-pink);
  border-radius: 2px;
}

.ft-col a {
  display: block;
  color: #666;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 11px;
  transition: color .18s ease;
}
.ft-col a:hover { color: var(--brand-pink); }

.ft a:focus-visible {
  outline: 2px solid var(--brand-ink-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

.ft-logo { display: block; height: 58px; width: auto; margin: 0 0 16px; }

.ft-brand p {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.45;
  color: var(--brand-ink);
  margin: 0;
  max-width: 24ch;
}

/* Instagram – pilulka jako tlačítko na webu.
   !important kvůli pravidlům šablony na odkazy v patičce. */
.ft .ft-brand a.ft-ig {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding: 8px 15px !important;
  border: 1px solid rgba(224, 96, 154, .45) !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--brand-pink) !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ft .ft-brand a.ft-ig:hover {
  background: var(--brand-pink) !important;
  border-color: var(--brand-pink) !important;
  color: #fff !important;
}
.ft .ft-brand a.ft-ig::before,
.ft .ft-brand a.ft-ig::after { content: none !important; }

.ft .ft-brand a.ft-ig svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  color: currentColor;
}
.ft .ft-brand a.ft-ig span { color: currentColor !important; }

.ft-bottom {
  max-width: 1300px;
  margin: 38px auto 0;
  padding: 22px 20px 0;
  border-top: 1px solid rgba(224, 96, 154, .20);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 24px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #999;
}
.ft-bottom a {
  color: #999 !important;
  text-decoration: none;
  transition: color .18s ease;
}
.ft-bottom a:hover { color: var(--brand-pink) !important; }

/* ----- patička na telefonu ----- */
@media (max-width: 600px) {
  .ft { padding: 40px 0 26px; }
  .ft-cols { gap: 34px; }
  .ft-col { flex: 1 1 100%; min-width: 0; }

  .ft-brand { text-align: center; }
  .ft-logo { margin: 0 auto 16px; }
  .ft-brand p { max-width: none; }
  .ft .ft-brand a.ft-ig { margin-left: auto; margin-right: auto; }

  .ft-col h4 { font-size: 14px; margin-bottom: 18px; }
  .ft-col a { margin-bottom: 13px; }
  .ft-bottom { margin-top: 30px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ft .ft-brand a.ft-ig,
  .ft-col a,
  .ft-bottom a { transition: none; }
}

/* ===== 21. řazení produktů v kategorii ================================ */
/* Markup: ul.listSorting__controls > li > button.listSorting__control
   Aktivní volba: .listSorting__control--current + aria-disabled="true" */

.listSorting { margin: 0 0 22px; }

.listSorting__controls {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.listSorting__controls li { list-style: none; margin: 0; padding: 0; }

.listSorting__control {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px !important;
  margin: 0 !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--bn-swatch-border) !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  line-height: 1.2 !important;
  color: #6b5a61 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.listSorting__control:hover {
  border-color: var(--brand-pink-btn) !important;
  color: var(--brand-pink-dark) !important;
}

/* aktuálně nastavené řazení */
.listSorting__control--current,
.listSorting__control[aria-disabled="true"] {
  background: var(--brand-pink-btn) !important;
  border-color: var(--brand-pink-btn) !important;
  color: #fff !important;
  cursor: default;
}
.listSorting__control--current:hover,
.listSorting__control[aria-disabled="true"]:hover {
  border-color: var(--brand-pink-btn) !important;
  color: #fff !important;
}

.listSorting__control:focus-visible {
  outline: 2px solid var(--brand-ink-soft) !important;
  outline-offset: 2px;
}

/* ----- telefon: posuv do strany od kraje ke kraji ----- */
@media (max-width: 767px) {
  .listSorting { margin-bottom: 18px; }

  .listSorting__controls {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    /* pruh přes celou šířku obrazovky bez ohledu na odsazení rodiče */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 2px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .listSorting__controls::-webkit-scrollbar { display: none; }

  /* klíčové: položky se nesmí smrštit, jinak se posuv nespustí */
  .listSorting__controls li { flex: 0 0 auto; scroll-snap-align: start; }

  .listSorting__control {
    min-height: 44px;              /* pohodlný cíl pro prst */
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}



/* ===== 22. záložky na detailu produktu ================================ */
/* Markup: ul#p-detail-tabs.shp-tabs > li.shp-tab > a.shp-tab-link
   Aktivní: li.shp-tab.active */

.shp-tabs-row { margin: 34px 0 0; }

.shp-tabs-holder {
  border-bottom: 1px solid rgba(224, 96, 154, .20);
}

.shp-tabs.p-detail-tabs {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  border: 0 !important;
}
.shp-tabs.p-detail-tabs > li.shp-tab {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  float: none !important;
}

.shp-tabs.p-detail-tabs .shp-tab-link {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  min-height: 46px;
  padding: 0 18px !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8c7c83 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .16s ease;
}

/* růžová linka pod aktivní záložkou – překrývá spodní obrys holderu */
.shp-tabs.p-detail-tabs .shp-tab-link::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: -1px;
  height: 2px;
  background: var(--brand-pink);
  border-radius: 2px;
  opacity: 0;
}

.shp-tabs.p-detail-tabs .shp-tab-link:hover {
  color: var(--brand-ink) !important;
}

.shp-tabs.p-detail-tabs > li.shp-tab.active .shp-tab-link {
  color: var(--brand-ink) !important;
  font-weight: 700 !important;
}
.shp-tabs.p-detail-tabs > li.shp-tab.active .shp-tab-link::after {
  opacity: 1;
}

.shp-tabs.p-detail-tabs .shp-tab-link:focus-visible {
  outline: 2px solid var(--brand-ink-soft) !important;
  outline-offset: -2px;
  border-radius: 6px;
}

/* tlačítko ☰ pro schované záložky, když se nevejdou */
.shp-tabs-row .navigation-btn {
  min-height: 46px;
  padding: 0 14px;
  background: none !important;
  border: 0 !important;
  color: #8c7c83 !important;
  font-size: 15px;
  cursor: pointer;
}
.shp-tabs-row .hidden-links {
  margin: 0; padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--bn-swatch-border);
  border-radius: var(--bn-swatch-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.shp-tabs-row .hidden-links.hidden { display: none; }
.shp-tabs-row .hidden-links .shp-tab-link {
  display: block !important;
  padding: 10px 14px !important;
  min-height: 0;
}
.shp-tabs-row .hidden-links .shp-tab-link::after { content: none; }

/* obsah pod záložkami ať má vzduch */
.shp-tabs-row + * .tab-pane,
#description, #productsAlternative { padding-top: 22px; }

//* ----- telefon: posuv do strany od kraje ke kraji ----- */
@media (max-width: 767px) {
  .shp-tabs-row { margin-top: 26px; }

  .shp-tabs-holder {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .shp-tabs.p-detail-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    padding: 0 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .shp-tabs.p-detail-tabs::-webkit-scrollbar { display: none; }

  /* bez tohohle se záložky zmáčknou a text se zalomí */
  .shp-tabs.p-detail-tabs > li.shp-tab { flex: 0 0 auto; }

  .shp-tabs.p-detail-tabs .shp-tab-link {
    min-height: 46px;
    padding: 0 16px !important;
    font-size: 13px !important;
    letter-spacing: .04em;
  }
  .shp-tabs.p-detail-tabs .shp-tab-link::after { left: 16px; right: 16px; }

  /* schovávací tlačítko ☰ na mobilu nechceme – posouvá se prstem */
  .shp-tabs-row .navigation-btn { display: none !important; }
}


/* ===== 23. lišta výhod v kategorii ==================================== */
/* Markup: .benefitBanner.position--benefitCategory
             > .benefitBanner__item > __content > __data > .byn-strip */

/* obaly Shoptetu zploštit, ať nedělají vlastní pozadí a odsazení */
.benefitBanner.position--benefitCategory,
.benefitBanner.position--benefitCategory .benefitBanner__item,
.benefitBanner.position--benefitCategory .benefitBanner__content,
.benefitBanner.position--benefitCategory .benefitBanner__data {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  float: none !important;
}

.byn-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  background: var(--brand-pink-tint);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-ink);
}
.byn-strip * { box-sizing: border-box; }

.byn-strip__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 10px;
  white-space: nowrap;
}

/* svislé oddělovače mezi položkami v jednom řádku */
.byn-strip__item + .byn-strip__item::before {
  content: "";
  position: absolute;
  left: -7px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 16px;
  background: rgba(224, 96, 154, .28);
}

.byn-strip__item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--brand-pink);
  stroke-width: 1.8;
}

/* IG položka – odkaz je neviditelná vrstva přes celý prvek */
.byn-strip__item--ig { transition: opacity .18s ease; }
.byn-strip__item--ig:hover { opacity: .65; }
.byn-strip .byn-strip__item--ig > a {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0; margin: 0; border: 0;
  text-decoration: none !important;
}
.byn-strip .byn-strip__item--ig > a::before,
.byn-strip .byn-strip__item--ig > a::after { content: none !important; }
.byn-strip .byn-strip__item--ig > a:focus-visible {
  outline: 2px solid var(--brand-ink-soft);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ----- počítač: pás zapuštěný v růžové, navazuje na patičku ----- */
@media (min-width: 768px) {
  .benefitBanner.position--benefitCategory {
    background: var(--brand-pink-tint) !important;
    margin-top: 40px !important;
  }

  .byn-strip {
    border-radius: 0;
    margin: 0;
    padding: 14px 20px;
    border-top: 1px solid rgba(224, 96, 154, .16);
  }
}

/* ----- užší okna: menší mezery, ať se vejde do dvou řad ----- */
@media (min-width: 768px) and (max-width: 1200px) {
  .byn-strip { gap: 8px 10px; font-size: 12.5px; }
  .byn-strip__item { padding: 11px 8px; }
}

/* ----- telefon: mřížka 2 sloupce, čáry vznikají z mezer ----- */
@media (max-width: 767px) {
  .byn-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1px;                                  /* mezera = čára */
    background: rgba(224, 96, 154, .18);       /* prosvítá jako mřížka */
    margin: 22px 0;
    padding: 1px;
    border-radius: 14px;
    overflow: hidden;
    font-size: 12.5px;
  }

  /* každá buňka má vlastní růžové pozadí */
  .byn-strip__item {
    background: var(--brand-pink-tint);
    padding: 14px 8px;
    white-space: normal;
    line-height: 1.3;
    gap: 8px;
    border: 0 !important;
  }
  .byn-strip__item::before { content: none !important; }

  /* Instagram přes obě buňky */
  .byn-strip__item:last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .byn-strip__item svg { width: 17px; height: 17px; flex: 0 0 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .byn-strip__item--ig { transition: none; }
}

/* ----- telefon: mřížka 2 sloupce ----- */
@media (max-width: 767px) {
  .byn-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1px;                                  /* mezera = čára */
    background: rgba(224, 96, 154, .18);       /* čáry prosvítají skrz */
    margin: 22px 0;
    padding: 1px;
    border-radius: 14px;
    overflow: hidden;
    font-size: 12.5px;
  }

  /* každá buňka má vlastní růžové pozadí, mezi nimi prosvítá čára */
  .byn-strip__item {
    background: var(--brand-pink-tint);
    padding: 14px 8px;
    white-space: normal;
    line-height: 1.3;
    gap: 8px;
    border: 0 !important;
  }
  .byn-strip__item::before { content: none !important; }

  /* Instagram přes obě buňky */
  .byn-strip__item:last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .byn-strip__item svg { width: 17px; height: 17px; flex: 0 0 17px; }
}



  .byn-strip__item {
    background: var(--brand-pink-tint);
    padding: 14px 8px;
    white-space: normal;
    line-height: 1.3;
    gap: 8px;
    border: 0 !important;

    /* všechny buňky stejně vysoké a obsah vycentrovaný */
    min-height: 62px;
    justify-content: center;
    text-align: left;
  }






/* ===== 24. focus při klepnutí prstem ================================== */
/* Záložky na detailu odkazují na #description / #productsAlternative.
   Po kliknutí prohlížeč zaměří CÍLOVÝ PANEL a nakreslí kolem něj obrys –
   proto styly na samotných záložkách nic neřešily. */

.tab-pane:focus,
.tab-content:focus,
[role="tabpanel"]:focus,
#description:focus,
#productsAlternative:focus,
#productsAlternative *:focus,
.p-detail .tab-pane:focus {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* totéž pro stav :target – panel je cíl odkazu s # */
#description:target,
#productsAlternative:target,
.tab-pane:target {
  outline: 0 !important;
  box-shadow: none !important;
}

/* záložky samotné */
#p-detail-tabs a,
#p-detail-tabs a:focus,
#p-detail-tabs a:active,
.shp-tabs a:focus,
.shp-tabs a:active,
.shp-tabs-holder a:focus {
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* klepnutí prstem jinde na webu – růžové místo šedého bliku */
a, button, [role="tab"], .listSorting__control {
  -webkit-tap-highlight-color: rgba(224, 96, 154, .12);
}

/* ovládání klávesnicí si viditelný focus nechává */
a:focus-visible,
button:focus-visible,
.listSorting__control:focus-visible,
.shp-tab-link:focus-visible {
  outline: 2px solid var(--brand-ink-soft) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ===== 25. nadpis skupiny produktů na úvodní straně =================== */
/* Na úvodce je .shp-tab-link jediná "záložka" – nepřepíná nic, je to nadpis.
   Šablona jí dává rámeček a pozadí, proto se všechno resetuje. */

body.type-index .shp-tabs-row,
body.type-index .shp-tabs-holder {
  border: 0 !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.type-index .shp-tabs,
body.type-index #p-detail-tabs {
  display: flex !important;
  justify-content: center;
  border: 0 !important;
  background: none !important;
  margin: 46px 0 26px !important;
  padding: 0 !important;
}

body.type-index .shp-tabs > li,
body.type-index .shp-tab {
  border: 0 !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none;
}

body.type-index .shp-tab-link {
  position: relative;
  display: inline-block !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--brand-ink) !important;
  cursor: default;
}

/* krátká růžová linka na střed */
body.type-index .shp-tab-link::after {
  content: "" !important;
  position: absolute;
  left: 50%; right: auto; bottom: 0;
  transform: translateX(-50%);
  width: 46px; height: 2px;
  background: var(--brand-pink);
  border-radius: 2px;
  opacity: 1 !important;
}

body.type-index .shp-tab-link:hover,
body.type-index .shp-tab.active .shp-tab-link {
  color: var(--brand-ink) !important;
  background: none !important;
  border: 0 !important;
}

@media (max-width: 767px) {
  body.type-index .shp-tabs { margin: 34px 0 20px !important; }
  body.type-index .shp-tab-link {
    font-size: 23px !important;
    padding-bottom: 15px !important;
  }
  body.type-index .shp-tab-link::after { width: 38px; }
}