/*
 * Rawbark WP doplňky nad Webflow designem.
 * JEDINÉ místo pro vlastní CSS, které není 1:1 z Webflow exportu
 * (site.css/webflow-base.css se needitují — viz docs/webflow-workflow.md).
 */

/* Podstránkový hero (page.php) — nižší obsah než HP hero, vlnka by překryla
   perex. Pozn.: `.section.first.category` tu bylo z červencové publikace,
   ta srpnová má správný padding v site.css (110px) — selektor odstraněn. */
.section.hero.subpage {
  padding-bottom: 14vh;
}

/* Obsah univerzální podstránky (page.php) — typografie pro the_content */
.rb-page-content p { margin-bottom: var(--size-s); }
.rb-page-content ul, .rb-page-content ol { padding-left: 1.4em; margin-bottom: var(--size-s); }
.rb-page-content h2, .rb-page-content h3, .rb-page-content h4 { margin-top: var(--size-m); }
.rb-page-content table { width: 100%; border-collapse: collapse; }
.rb-page-content table td, .rb-page-content table th { border: 1px solid var(--basic--200); padding: var(--size-xs); }

/* Navbar při scrollu — publikace 3. 9. 2026. Webflow má na .navbar ix2
   (data-w-id) + inline skript v patě stránky, který při innerWidth >= 992
   a scrollY > 20 přidává `.header.is-scrolled` (stín). Naměřeno na
   rawbark.webflow.io (1920×1000, /kontakt):
     nahoře:      .header 175 px (17.5vh), průhledný, bez stínu,
                  .rb-logo 125×125, texty/ikony .white-purple bílé;
     scroll > 20: .header 90 px (7.5vh, min-height 90 drží 90; u nás 80 px), bílé pozadí
                  (na headeru, ne na .navbar), box-shadow 0 2px 0 rgba(0,0,0,.05),
                  .rb-logo height 0, texty/ikony .white-purple → --rb--purple-900.
   Na 768 px (≤ 991) se při scrollu NEDĚJE NIC — hlavička zůstává 130 px
   a průhledná (ix2 i skript jsou scopnuté na desktop), proto je všechno
   v @media ≥ 992. Boční logo (.rb-logo-side) z markupu publikace zmizelo,
   přesun loga do boku už neexistuje. Třídu spíná webflow-lite.js (stejný
   práh 20 px jako skript v maketě); ix2 jede po scroll progressu, u nás to
   dojíždí CSS transition — při reálném scrollu nerozeznatelné.
   Platí pro všechny stránky, header je sdílený. */
/* Produktové stránky: hlavička se při scrollu dolů schová nahoru (spolu
   s vyjetím lepící lišty), při scrollu nahoru se vrátí — třídu
   .rb-header-hidden spíná wf-sticky-buy.js (zadání kolegy 16. 10. 2026).
   Animace jako lišta: schování = vyjetí nahoru, AŽ POTOM zprůhlednění;
   zobrazení = zviditelnění, pak sjetí dolů. Všechny breakpointy. */
/* Objevení (scroll nahoru) o polovinu rychlejší než schování (zadání kolegy). */
.header {
  transition: opacity .1s ease, transform .175s cubic-bezier(.22,.61,.36,1) .1s;
}
.header.rb-header-hidden {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .1s ease .35s;
}
@media screen and (min-width: 992px) {
  .header {
    transition: height .2s ease, background-color .2s ease, box-shadow .3s ease,
      opacity .1s ease, transform .175s cubic-bezier(.22,.61,.36,1) .1s;
  }
  .header.rb-header-hidden {
    transition: height .2s ease, background-color .2s ease, box-shadow .3s ease,
      transform .35s cubic-bezier(.22,.61,.36,1), opacity .1s ease .35s;
  }
  /* Smrštěná hlavička 80 px napevno (zadání kolegy 16. 10. 2026; dřív 7.5vh
     s min-height 90 px = prakticky vždy 90). Řádek menu .container.nav má
     60 px → 10 px nad i pod. .navbar má v site.css min-height 90 px — bez
     přebití by hlavičku přetékal. Závislosti: toast (níž, .rb-toast-root)
     a smooth-anchors.js (headerOffset). */
  .header.is-scrolled,
  .header.is-scrolled .navbar {
    height: 80px;
    min-height: 80px;
  }
  /* Sticky karta recenzí na detailu produktu: 30 px pod smrštěnou hlavičkou
     (site.css: calc(10vh + 30px) — na velkých monitorech až ~60 px). */
  .card.align-top.bgr-white.sticky { top: calc(80px + 30px); }
  .header.is-scrolled {
    justify-content: flex-start;
    background-color: var(--basic--white);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .05);
  }
  .header .rb-logo {
    transition: opacity .2s ease, height .2s ease;
  }
  .header.is-scrolled .rb-logo {
    opacity: 0;
    height: 0;
  }
  .header.is-scrolled .white-purple,
  .header.is-scrolled .nav-link.white-purple,
  .header.is-scrolled .mi-icon.cart.white-purple {
    color: var(--rb--purple-900);
  }
  /* Aktivní položka v TMAVÉ variantě navbaru je bílá jako ostatní, ne oranžová.
     site.css má `.nav-link.white-purple.w--current { color: var(--rb--orange) }`,
     jenže na Webflow se to nikdy neprojeví: ix2 nastavuje všem odkazům
     `.nav-link.white-purple` INLINE barvu (nahoře bílou, po scrollu
     --rb--purple-900) a ta oranžové pravidlo přebije. Naměřeno 11. 9. 2026 na
     rawbark.webflow.io/jak-to-funguje — všechny čtyři odkazy včetně
     `w--current` mají `style="color: rgb(255,255,255)"`.
     Ve SVĚTLÉ variantě (odkazy bez `.white-purple`) oranžová naopak platí —
     ověřeno na rawbark.webflow.io/granule-na-miru, kde je „O granulích"
     rgb(247,167,35). Proto je pravidlo zúžené na `.white-purple`.
     `:not(.is-scrolled)` drží stav po scrollu na pravidle výš bez ohledu
     na pořadí v souboru. Tablet/mobil se neřeší — tam je aktivní položka
     `.link-section.w--current` a ta sedí (rgb(74,9,48) na obou stranách). */
  .header:not(.is-scrolled) .nav-link.white-purple.w--current {
    color: var(--basic--white);
  }
  /* Otevřené menu překrývá tmavé hero světlým panelem. Webflow ix2 v tom
     stavu přebarví ikonu domů; po zavření vracíme barvu podle hlavičky. */
  .header:has(.menu-button.w--open) .left-menu .nav-link.white-purple.mi-icon {
    color: var(--rb--purple-700);
  }
}

/* Inline <style> z hlavy makety (publikace 3. 9. 2026): overlay menu nesmí
   ořezávat .before-bgr (pruh pozadí nad menu) ani stín .nav-menu. */
.w-nav-overlay { overflow: visible; }

/* Ikona hamburgeru: menu ↔ close. Ve Webflow to přepíná ix2 na .navbar
   (data-w-id) po kliknutí — naměřeno na rawbark.webflow.io: otevřené menu
   = .mi-icon.open display none, .mi-icon.close display block (site.css má
   jen výchozí stav). U nás na stavové třídě .w--open z webflow-lite.js. */
.menu-button.w--open .mi-icon.open { display: none; }
.menu-button.w--open .mi-icon.close { display: block; }

/* Menu (zadání kolegy 15. 10. 2026): „Přihlásit se" na tabletu/mobilu vlevo
   jako ostatní tlačítka (text-align:center dědí z .w-nav-menu) a pod ním
   „Znovu objednat granule" (jen nepřihlášení) se stejnou mezerou jako
   .right-menu.tablet (--size-m). */
.nav-menu .right-menu.tablet { text-align: left; }
.nav-section.rb-menu-reorder { margin-bottom: var(--size-m); }
/* Obrysové tlačítko s průhledným pozadím (hover = výchozí fialová .btn.outlined),
   menším levým paddingem a optickým posunem doleva (desktop). Na tabletu a níž
   mají obě tlačítka (i „Přihlásit se") hranu na okraji textu a padding 17,5 px. */
.nav-section.rb-menu-reorder .btn,
.nav-menu .login-wrapper .btn { margin-left: -7.5px; padding-left: 20px; }
@media (max-width: 991px) {
  /* Tablet a níž: bez posunu, užší levý padding (zadání kolegy 15. 10.). */
  .nav-section.rb-menu-reorder .btn,
  .nav-menu .login-wrapper .btn { margin-left: 0; padding-left: 17.5px; }
}
@media (max-width: 767px) {
  /* Mobil: .nav-section tu má padding-bottom navíc k marginům → mezery
     45–50 px. U nepřihlášeného: Přihlásit se 30 px pod horním okrajem menu,
     mezi tlačítky a před sortimentem --size-s-m (20 px). */
  .nav-section.tablet:has(.login-wrapper) { padding-top: 30px; padding-bottom: 0; }
  .nav-section.tablet:has(.login-wrapper) .right-menu.tablet { margin-bottom: var(--size-s-m); }
  .nav-section.rb-menu-reorder { padding-bottom: 0; margin-bottom: var(--size-s-m); }
}

/* CF7 formulář (kontakt) v novém designu — inputy mapované na .input vzhled */
.rb-cf7 input[type="text"],
.rb-cf7 input[type="email"],
.rb-cf7 input[type="tel"] {
  border: 2px solid var(--rb--purple-700-15);
  background-color: var(--basic--white);
  height: 56px;
  width: 100%;
  color: var(--rb--purple-900);
  border-radius: 30px;
  padding: 10px 25px;
  font-size: 18px;
  font-family: inherit;
  margin-bottom: var(--size-s);
}
.rb-cf7 textarea {
  border: 2px solid var(--rb--purple-700-15);
  background-color: var(--basic--white);
  width: 100%;
  min-height: 140px;
  color: var(--rb--purple-900);
  border-radius: 20px;
  padding: 15px 25px;
  font-size: 18px;
  font-family: inherit;
  margin-bottom: var(--size-s);
}
.rb-cf7 input[type="submit"] {
  height: 56px;
  border: 0;
  border-radius: var(--size-m);
  background-color: var(--rb--orange);
  color: var(--rb--purple-900);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  padding: 0 30px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.rb-cf7 input[type="submit"]:hover { background-color: var(--duck--500); }
.rb-cf7 label { font-weight: 700; display: block; margin-bottom: 4px; }

/* Compat režim: nový navbar je position:fixed — legacy obsah potřebuje odsadit.
   Navbar má na legacy stránkách vždy bílé pozadí (žádný tmavý hero pod ním). */
.rb-compat .rb-legacy {
  padding-top: max(90px, 12.5vh);
  min-height: 60vh;
}
.rb-compat .navbar {
  background-color: var(--basic--white);
}
.rb-compat .navbar .white-purple,
.rb-compat .navbar .nav-link.white-purple,
.rb-compat .navbar .mi-icon.cart.white-purple {
  color: var(--rb--purple-700);
}

/* Recenze — CTA řádek pod sliderem (legacy styly prohrály specificitu se
   scoped bootstrapem; replikace původního vzhledu: outline + orange CTA). */
.rb-compat .rb-legacy .reviews-btn-info {
  background: transparent !important;
  border: 2px solid var(--basic--white) !important;
  color: var(--basic--white) !important;
  border-radius: 30px;
}
.rb-compat .rb-legacy .reviews-btn-cta {
  background: var(--rb--orange) !important;
  color: var(--basic--white) !important;
  border-radius: 30px;
}
.rb-compat .rb-legacy .reviews-cta-icon {
  max-width: 1.5em !important;
  width: auto !important;
}

/* Postranní košík (drawer) — WooCommerce obrázky mají jiné rozměry než
   Webflow CMS assety, bez omezení se roztáhnou přes celý sloupec.
   Druhý selektor je kvůli granulím: pack shot vrací filtr
   custom_dog_pack_img_in_cart() s vlastní třídou (.product-img), takže se
   chytáme pozice v řádku, ne názvu třídy. */
.w-commerce-commercecartitem .cart-image,
.w-commerce-commercecartitem > .h-flex > img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  padding: 0;
  margin: 0; /* .product-img (pack shot granulí) má v site.css margin-left 2.5px */
  flex: 0 0 auto;
  border-radius: 12px;
  /* Bez bílého podkladu — titulní fotky produktů jsou průhledné PNG/WebP
     (v maketě `.cart-image` pozadí nemá). */
}
.w-commerce-commercecartitem > .h-flex {
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.w-commerce-commercecartitem .w-commerce-commercecartiteminfo {
  flex: 1 1 auto;
  flex-flow: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
}
/* Kompaktní řádek košíku: na notebooku (1440×900) je seznam v draweru vysoký
   590 px a při maketních 20/25 px paddingu + našich řádcích navíc (cena za
   jednotku, jednotka u množství) se vešly jen tři položky. Řádek proto celkově
   zmenšujeme — layout i pořadí prvků zůstávají 1:1 dle šablony drawer. */
.w-commerce-commercecartitem.cart-item {
  padding-top: 12px;
  padding-bottom: 14px;
}
/* Oddělovač patří mezi položky, pod poslední už seznam nepokračuje. */
.w-commerce-commercecartlist > .cart-item:last-child {
  border-bottom: 0;
}
.w-commerce-commercecartitem .product-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
}
/* Údaje položky (název, varianta/obal, cena řádku, cena za kus) mají jednu
   velikost i výšku řádku a oba sloupce stejnou mezeru 5 px — řádky vlevo
   a vpravo tak lícují (zadání kolegy 14. 10. 2026). Název a cena řádku
   zůstávají dominantní tučným řezem. */
.w-commerce-commercecartitem .option-list.cart-detail,
.w-commerce-commercecartitem .option-cart,
.w-commerce-commercecartitem .option-cart > span {
  font-size: 15px;
  line-height: 1;
}
/* Varianta / obal = popisek jako cena za kus (.rb-cart-side .note): stejná
   barva i ztlumení, ať spolu řádek vlevo a vpravo vizuálně sedí. */
.w-commerce-commercecartitem .option-list.cart-detail {
  color: inherit;
  opacity: .55;
}
.w-commerce-commercecartitem .product-price {
  font-weight: 700;
}
/* Řádek položky = dva sloupce stejné výšky (cart-drawer-body.php):
   .rb-cart-main  název (zalamuje se jen když se nevejde) · vlastnosti · množství
   .rb-cart-side  cena řádku (v linii názvu) · cena za jednotku · koš
   Koš je dole a vysoký jako pilulka množství (34 px), takže leží s ní na
   jedné ose; cena a název sdílí horní hranu i výšku řádku (15/1.35). */
.w-commerce-commercecartitem .rb-cart-row {
  flex-flow: row nowrap;
  align-items: stretch;
  gap: var(--size-s);
}
.w-commerce-commercecartitem .rb-cart-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
/* Množství i koš o 5 px níž od textů nad nimi (zadání kolegy 16. 10. 2026) —
   stejný padding na obou, ať zůstanou v jedné linii. */
.w-commerce-commercecartitem .rb-cart-main .rb-qty-unit { margin-top: auto; padding-top: 5px; }
.w-commerce-commercecartitem .rb-cart-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
  white-space: nowrap;
}
.w-commerce-commercecartitem .rb-cart-side .product-price {
  font-size: 15px;
  line-height: 20px;
}
.w-commerce-commercecartitem .rb-cart-side .delete {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 34px;
  margin-top: auto;
  padding-top: 5px;
  box-sizing: content-box;
}
/* Množství v drawer = komponenta .qty-wrap jako na detailu produktu (pilulka
   bez rámu, ikony +/− Material Icons), jen nižší (34 px) a bílá — seznam
   položek drawer stojí na --basic--100 (zadání kolegy 16. 10. 2026). */
.w-commerce-commercecartitem .qty-wrap {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 94px;
  height: 34px;
  border: 0;
  border-radius: 17px;
  background-color: var(--basic--white);
  transition: box-shadow .15s ease;
}
.w-commerce-commercecartitem .qty-wrap:hover { box-shadow: 0 0 0 4px #fff9; }
.w-commerce-commercecartitem .qty-wrap:focus-within { box-shadow: inset 0 0 0 2px var(--rb--orange); }
/* Šířku pilulky určuje intrinsická šířka inputu — `width: 100%` by se v ní
   spočítalo jako `auto`, a to je u number inputu ~20 znaků (pilulka pak měla
   264 px místo ~112). Proto pevná šířka na číslo; tlačítka leží absolutně
   přes okraje (.qty-btn.is-minus/.is-plus v site.css). */
.w-commerce-commercecartitem .qty-input {
  width: 34px;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.w-commerce-commercecartitem .qty-input:hover,
.w-commerce-commercecartitem .qty-input:focus { outline: none; border: 0; }
/* Granule mají kg z pevných kombinací balení — číslo se nepřepisuje,
   posouvá ho jen server přes +/− (viz cart-drawer-body.php). */
.w-commerce-commercecartitem .qty-input[readonly] { cursor: default; }
.w-commerce-commercecartitem .qty-btn {
  padding: 0 4px 0 12px;
  border-radius: 17px 0 0 17px;
  transition: color .15s ease, transform .12s ease;
}
.w-commerce-commercecartitem .qty-btn.is-plus {
  padding: 0 12px 0 4px;
  border-radius: 0 17px 17px 0;
}
/* Ikona uvnitř tlačítka (.mi-icon má sama 24 px) — menší, jako na produktu. */
.w-commerce-commercecartitem .qty-btn .mi-icon { font-size: 14px; }
.w-commerce-commercecartitem .qty-btn:hover { color: var(--rb--purple-600); }
.w-commerce-commercecartitem .qty-btn:active { transform: scale(.86); }
.w-commerce-commercecartitem .qty-btn .mi-icon { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .w-commerce-commercecartitem .qty-wrap,
  .w-commerce-commercecartitem .qty-btn { transition: none; }
  .w-commerce-commercecartitem .qty-btn:active { transform: none; }
}

/* Jednotka za pilulkou (ks / bal. / kg — rawbark_cart_qty_unit()). Pilulka
   a popisek drží u sebe jako jeden celek, koš zůstává na pravém okraji řádku
   (.rb-cart-main). Bázový .h-flex má mezeru 30 px a wrap —
   obojí by dvojici roztrhlo. */
.w-commerce-commercecartitem .rb-qty-unit {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--size-xxs);
}
/* Jednotka je jen popisek, ne údaj — drží se potichu vzadu, aby si nekonkurovala
   s cenou vedle (v draweru s cenou řádku, na /kosik/ s mezisoučtem). */
.w-commerce-commercecartitem .rb-qty-unit .note,
.cart-product-grid .rb-qty-unit .note {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  opacity: .5;
}

/* Cena za jednotku je popisek k ceně řádku, ne druhá cena — proto nikdy tučně.
   Velikost i řez sázíme i na `.woocommerce-Price-amount` uvnitř: legacy
   assets/css/woocommerce/core.css má na téhle třídě `font-weight: bold` +
   `font-size: 1.1em`. Na webflow stránkách se sice dequeueuje
   (functions/enqueue-webflow.php), ale spoléhat se na to u ceny, která visí
   v navbaru na každé stránce, se nevyplácí. */
.w-commerce-commercecartitem .rb-cart-side .note .woocommerce-Price-amount,
.w-commerce-commercecartitem .rb-cart-side .note .woocommerce-Price-currencySymbol,
.w-commerce-commercecartitem .rb-cart-side .note bdi {
  font-size: 15px;
  font-weight: 400;
}
.w-commerce-commercecartitem .rb-cart-side .note {
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  opacity: .55;
}
.w-commerce-commercecartitem .mi-icon.delete {
  cursor: pointer;
  font-size: 20px;
  transition: color .15s ease;
}
.w-commerce-commercecartitem .mi-icon.delete:hover {
  color: var(--beef--400);
}

/* (Odstraněno 24. 8. — pravidla .rb-badge-locked / .badge-list patřila starému
   dashboardu s pásem odznaků. Nový dashboard i Tlapičkový program renderují
   .badge-list jako masonry dle makety (._2-cols-list column-count:2 +
   .masonry-item float:left) a flex/width overridy jim rozbíjely 1:1 —
   .badge-icon-wrapper má být 75 px ze site.css, ne 72.) */

/* == Webflow page custom code — 1:1 z inline <style> v <head> publikace 08/2026.
   V Webflow je to za shared CSS, tady custom.css loaduje taky poslední → kaskáda sedí. == */
/* Vyvážené zalomení nadpisů a odstavců (publikace 11. 9. 2026). */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
/* Publikace 23. 9. 2026: bezpečné okraje na mobilech s výřezem (iPhone
   na šířku) — funguje jen s `viewport-fit=cover` v meta viewport (header-webflow.php). */
@media (max-width: 767px) {
  .container { padding-left: max(15px, env(safe-area-inset-left)); padding-right: max(15px, env(safe-area-inset-right)); }
}

.w-lightbox-backdrop {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
}
.w-lightbox-thumbnail {
  background: transparent;
  border-radius: 20px;
}
.w-lightbox-figure {
  border-radius: 20px;
  overflow: hidden;
}
/* Náhledy ve fotogalerii (product-lightbox.js): mezera pevně 4 px z každé
   strany = 8 px mezi náhledy (Webflow má 1vh). Fokus po kliknutí myší
   bez rámečku, z klávesnice zůstává. */
.w-lightbox-item { padding-left: 4px; padding-right: 4px; }
.w-lightbox-item:focus:not(:focus-visible),
.w-lightbox-control:focus:not(:focus-visible),
.w-lightbox-view:focus:not(:focus-visible),
.w-lightbox-backdrop:focus:not(:focus-visible) { outline: none; }
/*Dialog*/
/* Publikace 23. 9. 2026: otevřený dialog centruje obsah (site.css mu dal height 100 %). */
.modal_dialog[open] { display: flex; align-items: center; justify-content: center; }
.modal_dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  /*backdrop-filter: blur(20px);*/
}
.modal_dialog:focus { outline: none; }
body.modal-open { overflow: hidden; }
/*User-Select*/
img, .btn, .text-label, .tab-link, .award { user-select: none; }
/*Horizontal-scroll*/
@media screen and (max-width: 767px) {
  .no-scrollbar-mobile { scrollbar-width: none; -ms-overflow-style: none; }
  .no-scrollbar-mobile::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
/*Drag-Scroll*/
@media screen and (min-width: 768px) {
  .drag-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    scroll-behavior: auto;
  }
  .drag-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .drag-scroll.is-dragging { cursor: grabbing; }
  .drag-scroll,
  .drag-scroll * { user-select: none; -webkit-user-select: none; }
}
/*Drag-Slider — publikace 3. 9. 2026 (inline <style> v <head> makety).
  Tažení myší nad .w-slider-mask přepíná slidy; třídu .is-dragging dává
  webflow-lite.js §3. */
@media screen and (min-width: 992px) {
  .drag-slider .w-slider-mask { cursor: grab; user-select: none; }
  .drag-slider.is-dragging .w-slider-mask { cursor: grabbing; }
  .drag-slider.is-dragging,
  .drag-slider.is-dragging * { user-select: none !important; }
}
/* Od 15. 10. 2026 jdou myší táhnout všechny slidery (webflow-lite.js §3) —
   stejný kurzor jako .drag-slider. Galerie produktu (§4) nechává kurzor
   odkazu (klik = lightbox). */
@media screen and (min-width: 992px) {
  .w-slider:not([data-disable-swipe="true"]) > .w-slider-mask { cursor: grab; user-select: none; }
  .w-slider.is-dragging > .w-slider-mask { cursor: grabbing; }
  .w-slider.is-dragging,
  .w-slider.is-dragging * { user-select: none !important; }
}
.custom-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.custom-select::-ms-expand { display: none; }

/* == Přeneseno ze site.css publikace 07/2026 — aktuální Webflow tyhle třídy už nemá,
   ale naše party je zatím používají (product-card, hero, kontakt, order-again).
   Po resyncu markupu na publikaci 08/2026 smazat.
   Audit 09/2026: .v-flex.gap-s.x-center.add / .v-flex.gap-s.mobile smazano —
   site.css uz height:100% pro oba selektory davá (radky 1053 a 1056). Zbylé
   dva selektory v site.css NEJSOU (.add-to-cart-detail tam ma jen
   margin-bottom:0, .section-label.orange tam vubec neni) — ponechano. == */
/* .add-to-cart-detail { height: 100% } odsud zrušeno 13. 10. 2026: ve Webflow
   má spodní blok karty výšku podle obsahu a `.v-flex.gap-s.mobile`
   (space-between) ho přisune ke spodku karty → ceny a košíky v řádku lícují. */
/* Karta produktu má pevnou výšku (.product-item.h-fix) a obrázek pevný box —
   s dvouřádkovým názvem (a na tabletu i s jednořádkovým) se spodní blok
   nevešel: hodnocení/cena skočily níž a na ≤ 991 košík přetékal z karty
   (stejně i ve Webflow). Obrázek se proto smí o ty pixely zmenšit (je
   `object-fit: contain`, vystředěný) → spodek karet v řádku lícuje vždy.
   Zadání kolegy 13. 10. 2026. */
.card.product .v-flex.gap-s.mobile > .product-image-wrapper {
  flex-shrink: 1;
  min-height: 0;
}
.section-label.orange {
  font-weight: 700;
}

/* == Detail produktu (webflow port 08/2026, pages-parts/webflow/product/single.php) == */
/* Qty input bez browser spinnerů — custom code z maket product_*.html. */
.qty-input:focus { outline: none; }
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input[type="number"] { -moz-appearance: textfield; }

/* WC notices nad hero produktu (přidáno do košíku / chyby) — minimální styl. */
.rb-wc-notices:empty { display: none; }
.rb-wc-notices .woocommerce-message,
.rb-wc-notices .woocommerce-info {
  list-style: none;
  border-radius: var(--size-s-m);
  background-color: var(--basic--white);
  color: var(--rb--purple-900);
  margin-bottom: var(--size-s-m);
  padding: var(--size-s) var(--size-s-m);
  font-weight: 500;
}
.rb-wc-notices .woocommerce-error {
  list-style: none;
  border-radius: var(--size-s-m);
  background-color: var(--beef--100);
  color: var(--rb--purple-900);
  margin-bottom: var(--size-s-m);
  padding: var(--size-s) var(--size-s-m);
  font-weight: 500;
}
.rb-wc-notices a.button { font-weight: 700; margin-right: var(--size-xs); }

/* Variabilní produkty: standardní WC variations form ve webflow obalu. */
.rb-wc-variations table.variations { width: 100%; }
.rb-wc-variations table.variations td { padding: var(--size-xxs) 0; }
.rb-wc-variations table.variations label { font-weight: 700; }
.rb-wc-variations table.variations select {
  height: var(--size-l);
  border: 2px solid var(--basic--200);
  border-radius: 30px;
  background-color: var(--basic--white);
  padding: 0 var(--size-s);
  font-size: 16px;
  width: 100%;
}
.rb-wc-variations .woocommerce-variation-price { margin: var(--size-s) 0; font-size: 24px; font-weight: 700; color: var(--rb--purple-700); }
.rb-wc-variations .single_add_to_cart_button {
  border-radius: 40px;
  background-color: var(--rb--orange);
  color: var(--rb--purple-900);
  border: 0;
  height: 56px;
  padding: 0 var(--size-m);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.rb-wc-variations .single_add_to_cart_button:hover { background-color: var(--rb--orange-light); }
.rb-wc-variations .quantity input { max-width: 90px; }
.rb-wc-variations .reset_variations { display: inline-block; margin-top: var(--size-xxs); }

/* [hidden] respektovat i na elementech s vlastním display (.card apod.) —
   dávkované recenze na detailu produktu (webflow-lite.js §9). */
[hidden] { display: none !important; }

/* == Odstoupení od smlouvy — formulář pluginu raw-odstoupeni ve webflow vizuálu.
   Markup pluginu se nemění, `page-templates/odstoupeni.php` jen jeho výstupu
   doplní webflow třídy (.field-label, .input, .btn.primary, .card.sub) — ty
   stylovat netřeba, jsou v site.css. Tady zůstává jen to, co maketa nemá:
   layout formuláře, textarea a tabulka položek v kroku 2. == */
.raw-odstoupeni.raw-odstoupeni {
  max-width: none;
  color: var(--rb--purple-900);
}
/* Rozestupy polí dělá webflow `.v-flex`, kterou formu dopíše šablona —
   tady zbývá jen shodit rámeček a padding z form.css pluginu. */
.raw-odstoupeni .raw-odst-form,
.raw-odstoupeni .raw-odst-detail {
  background-color: var(--basic--transparent);
  padding: 0;
}
.raw-odstoupeni .rb-odst-field { display: flex; flex-flow: column; margin: 0; }
/* Krok 2 — textarea „Důvod" a tabulka položek v maketě nejsou, drží si náš styl. */
.raw-odstoupeni .rb-odst-field textarea {
  border: 2px solid var(--rb--purple-700-15);
  background-color: var(--basic--white);
  border-radius: var(--size-s-m);
  height: auto;
  min-height: 120px;
  padding: var(--size-s) var(--size-s-m);
  font-size: 16px;
  color: var(--rb--purple-900);
}

/* == Blog post (single-post.php): obrázky z WP obsahu jako fullwidth rich-text
   figury — maketa má figure.w-richtext-align-fullwidth, legacy obsah má holé
   <img> v <p>. == */
.blog-post-body-content .rtx.push-left img {
  width: 100%;
  height: auto;
  border-radius: var(--size-m);
  margin-top: 20px;
  margin-bottom: 20px;
}
/* WP obsah nemá webflow třídu w-richtext-align-fullwidth — figury článku
   renderujeme fullwidth jako v maketě (jinak platí .w-richtext figure 60 %). */
.blog-post-body-content .rtx.push-left figure { width: 100%; max-width: 100%; }

/* ==========================================================================
   Recenze — modal „Přidat recenzi" + účtová stránka /moje-recenze/ (agent W3)
   ========================================================================== */

/* Hvězdičkový picker v modalu. Maketa (ucet_recenze.html) ho nese jako
   Webflow embed s inline <style> — v site.css tedy žádná pravidla nejsou
   a musí sem. Selektory jsou schválně tříúrovňové (.modal_dialog …): na
   detailu produktu má body třídu `woocommerce` a WooCommerce si vlastním
   `.woocommerce .star-rating` (font-family WooCommerce, height 1em,
   width 5.4em, float right, ::before "SSSSS") náš picker rozbil.
   Proto tu neutralizujeme i ty vlastnosti, které maketní embed neřeší. */
.modal_dialog .star-review .star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  float: none;
  overflow: visible;
  position: static;
  width: auto;
  height: auto;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
}
.modal_dialog .star-review .star-rating::before {
  content: none;
}
.modal_dialog .star-review .star-rating input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.modal_dialog .star-review .star-rating label {
  color: var(--rb--purple-700-15);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
  user-select: none;
  margin: 0;
}
.modal_dialog .star-review .star-rating span {
  float: none;
  position: static;
  overflow: visible;
  padding-top: 0;
}
.modal_dialog .star-review .star-rating span::before {
  content: none;
}
.modal_dialog .star-review .star-rating .material-icons-round {
  font-family: 'Material Icons Round', sans-serif;
  font-size: 40px;
  line-height: 1;
  display: block;
  margin: 0 -1px;
}
.modal_dialog .star-review .star-rating label:hover ~ label {
  color: var(--rb--orange);
}
.modal_dialog .star-review .star-rating input:checked ~ label {
  color: var(--rb--orange);
}
.modal_dialog .star-review .star-rating label:hover {
  color: var(--rb--orange);
  transform: scale(1.08);
}

/* Náhledy vybraných fotek v modalu mají mít stejný rozměr jako .review-image
   v maketě; maketa je má napevno z Webflow CMS, my je vkládáme z JS. */
.rb-review-upload-list .upload-image-holder img {
  object-fit: cover;
}

/* Maketa dává grid placement položek „Zakoupené zboží k recenzi" přes tři
   konkrétní #w-node-… ID (statický seznam). Náš seznam je dynamický (N položek),
   takže stejné pravidlo potřebujeme i jako třídu — jinak by 4. a další položka
   spadla na auto-placement a rozsypala se do sloupce hvězdiček. */
.review-details-grid > .product-line-link {
  grid-area: span 1 / span 3 / span 1 / span 3;
  place-self: center start;
}

/* Formulář „Smazat recenzi" je <form> (POST + nonce), maketa má prostý odkaz —
   aby seděl na .btn.s-link, musí se chovat jako inline flex řádek. */
.rb-review-delete {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rb-review-delete button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: underline;
}

/* Interaktivní hvězdičky v seznamech účtu (assets/webflow/js/review-stars.js).
   Maketa je má statické; kolega chtěl, aby se najetím vybarvovaly stejně jako
   picker v modalu „Přidat recenzi" a kliknutím modal otevřely na daném počtu.
   Vybarvení samo řeší JS přepínáním `.mi-icon-star.none`, tady je jen afordance
   (kurzor + stejné zvětšení a přechod jako `.star-rating label`). */
.h-flex.stars.rb-star-pick .mi-icon-star {
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
  -webkit-user-select: none;
  user-select: none;
}
.h-flex.stars.rb-star-pick .mi-icon-star:hover {
  transform: scale(1.08);
}
.h-flex.stars.rb-star-pick .mi-icon-star:focus-visible {
  outline: 2px solid var(--rb--orange);
  outline-offset: 2px;
}

/* Účet → Oblíbené: název varianty nad selectem („Balení", „Hodnota voucheru").
   `.label.status` je v designu nakreslený pro `.section-heading` (16px), v řádku
   seznamu by přerostl select — zmenšujeme na velikost `.note` a stahujeme
   padding, ať řádek nenaroste do výšky víc než o výšku štítku. */
.rb-variant-field {
  align-items: center;
}
.rb-variant-field .label.status {
  padding: 3px var(--size-xs) 4px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
/* Víc atributů (voucher: „500 Kč, Elektronická verze") — 120 px by text uřízlo. */
.v-item[data-rb-fav-variants="multi"] .rb-variant-field .custom-select.btn.s {
  max-width: none;
}

/* Pevný řádek „Granule na míru" (jeden na psa ze smečky) nemá `…` menu ani
   srdíčko, takže by se tlačítko „Objednat granule" zarovnalo jinam než akce
   u ostatních položek. `.settings` u položek je grid – tady stačí, aby řádek
   držel stejné pravé zarovnání. */
[data-rb-fav-fixed] .settings {
  display: flex;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
   Účet → Moje smečka (page-templates/webflow-my-dogs.php)
   --------------------------------------------------------------------------- */

/* Moje smečka — publikace 12. 10. 2026 (dog-accordion.php).
   Sbalená karta: tělo skrývá site.css (.accordion-navigation-pack bez
   .expanded), ikonu tlačítka přepínáme tady — ve Webflow to dělá ix2. */
.dog-pack-accordion.rb-collapsed .ms-icon.collapse { display: none; }
.dog-pack-accordion.rb-collapsed .ms-icon.expand { display: block; }
/* Obal tabulky dávek je náš (AJAX ji po uložení vyměňuje) — v maketě je
   tabulka přímým dítětem .v-flex.gap-s; bez `contents` by i schovaná tabulka
   přidala gap 15 px. */
.rb-dosage-wrap { display: contents; }
/* Rozbalovací řádky „Další údaje": + / − podle stavu (ve Webflow ix2). */
.accordion-toggle.inside.w--open .mi-icon.show { display: none; }
.accordion-toggle.inside.w--open .mi-icon.hide { display: block; }
/* `.half` (šedé „/den", „20 dní") je ve Webflow globální, jenže stejnou třídu
   nese i tlačítko „Odeslat recenzi" (`btn primary half`) — globálně by ho
   zprůhlednila. Proto jen v kartě psa. TODO grafik: přejmenovat jednu z tříd. */
.dog-pack-accordion .half {
  opacity: .5;
  font-size: 75%;
  font-weight: 400;
}
/* Štítky receptur — maketa má barvy jen pro krůtí/hovězí/jehněčí; lososí
   a kachní doplněny ze stejných tokenů (100 pozadí, 500 text). */
.recepture-label.salmon { background-color: var(--salmon--100); color: var(--salmon--500); }
.recepture-label.duck { background-color: var(--duck--100); color: var(--duck--500); }

/* Účet — fotka pejska v „Moje smečka".
   WooCommerce si na stránkách účtu (body.woocommerce-page) nese
   `.woocommerce-page img { height: auto }`, což má vyšší specificitu než
   `.pack-dog-image { height: 100% }` ze site.css → nečtvercová fotka
   nevyplní čtvercový `.pack-image-wrapper` (aspect-ratio: 1) a karta pejska
   je o pár px nižší než maketa. Vracíme hodnotu z Webflow. */
.woocommerce-page .pack-dog-image,
.woocommerce .pack-dog-image {
  height: 100%;
}

/* WooCommerce height:auto na obrázcích přebíjí výšky log v patičce účtu.
   Zachovat rozměry Webflow stejně jako na běžných obsahových stránkách. */
.woocommerce-page .footer-logo { height: 5vh; }
@media screen and (max-width: 767px) {
  .woocommerce-page .icon-social { height: 100%; }
}

/* Účet — „Můj postup ve smečce": Webflow má šířky progress baru jen po `_70`
   (0/20/40/50/70 %). Splněný úsek mezi dvěma oceněními by tak zůstal na 70 %,
   což vypadá jako chyba. Doplňujeme chybějící stupeň dle stejné konvence.
   TODO grafik: přidat `_100` do Webflow; pak tohle pravidlo zmizí.
   (Používá pages-parts/webflow/account/dashboard-section.php; stejnou opravu
   by měl převzít i pages-parts/webflow/loyalty/progress.php.) */
.paw-bar.badge-lvl._100 {
  width: 100%;
}

/* Odznaky s úrovněmi (rawbark-rewards 1.1.0, 09/2026): 5 úrovní = 20 % na
   úroveň, Webflow má jen _20/_40/_50/_70 — doplňujeme _60 a _80 (úroveň 3 a 4).
   TODO grafik: přidat do Webflow, pak tohle zmizí. Používá loyalty/challenges.php,
   loyalty/progress.php a account/dashboard-section.php. */
.paw-bar.badge-lvl._60,
.bar.badge-lvl._60 {
  width: 60%;
}
.paw-bar.badge-lvl._80,
.bar.badge-lvl._80 {
  width: 80%;
}
.bar.badge-lvl._100 {
  width: 100%;
}

/* Účet → Oblíbené (/moje-oblibene/): řádek s variabilním produktem má oproti
   ostatním o prvek navíc — `select.custom-select` s variantou (v maketě
   „1 ks"). Pod 480 px se do `.v-item` nevejde vedle `.review-details-grid`:
   ta je `flex: 1`, smrskne se na ~20 px a název produktu přeteče POD select
   (překryv textu). Maketa /ucet/oblibene tenhle stav neřeší — na 479 px se
   rozpadá taky (druhý řádek má nadpis vedle fotky a toggle spadne do dalšího
   řádku). Pouštíme proto obě části řádku na vlastní řádek; ostatních pět
   řádků (bez selectu) zůstává 1:1 s maketou.
   TODO grafik: dořešit v návrhu mobilní stav řádku s výběrem varianty. */
@media screen and (max-width: 479px) {
  .v-item[data-rb-fav-variants] > .h-flex > .review-details-grid {
    flex: 0 0 100%;
  }
  .v-item[data-rb-fav-variants] > .h-flex > .h-flex.gap-xs.in-line {
    flex: 0 0 100%;
    height: auto;
  }
}

/* Srdíčko „oblíbené" — od publikace 26. 8. 2026 je v maketě (`.btn.circle.favorite`
   v `.label-holder` na kartě, varianta `.inset` v řádku s hodnocením na detailu).
   Webflow kreslí jen výchozí (neoblíbený) stav, aktivní stav dobarvujeme my. */
.rb-fav-btn[aria-pressed="true"] .mi-icon,
.rb-fav-btn.is-on .mi-icon {
  color: var(--beef--500);
}
.rb-fav-btn {
  flex: 0 0 auto;
}

/* Účet → přehled → „Moje smečka": vodorovný slider karet psů.
   Maketa /ucet/muj-prehled má jen jednoho psa, takže `.h-flex.horizontal.stretch.gap-s`
   (flex-wrap: nowrap, `.card.pack { flex: 1 }`) nikdy nepřetekl. S víc psy karty
   vylezly mimo `.card.sub` a při <= 1440 px rozjely vodorovný scroll celé stránky.
   Řešíme stejným vzorem, jaký návrh používá o sekci níž u odznaků
   (`.awards-wrapper` = overflow:auto + záporné okraje do hran karty);
   `drag-scroll` navíc zapne tažení myší (webflow-lite.js §7).
   Basis 50 % drží stav z makety: jeden pes + „Přidat člena smečky" vyplní řádek
   přesně jako v návrhu, teprve třetí karta začne scrollovat.
   TODO grafik: doplnit do návrhu stav smečky s víc psy. */
.pack-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  margin-left: calc(-1 * var(--size-s));
  margin-right: calc(-1 * var(--size-s));
  padding-left: var(--size-s);
  padding-right: var(--size-s);
}
/* Nepřepisujeme `flex` (`.card.pack` má z návrhu `flex: 1`), jen dolní mez —
   s jedním psem se tím nic nezmění a řádek zůstane 1:1 s maketou, druhý pes
   (tj. třetí karta v řádku) už se nevejde a pás začne scrollovat.
   `.card.add-pack` schválně vynecháváme: má z návrhu `max-width: 385px` a
   min-width by ho přebilo (min-width má dle CSS přednost před max-width). */
.pack-wrapper > .h-flex.horizontal.stretch.gap-s > .card.pack {
  min-width: calc(50% - var(--size-s));
}
/* Od 19. 10. 2026 (zadání kolegy): „Přidat člena" je v hlavičce sekce, pás má
   jen psy. Od 2 psů je vidět 1,75 karty (na všech šířkách) — useknutá půlka
   napoví, že pás jde posunout. Jeden pes: karta stejně široká, na mobilu celá
   šířka. */
.pack-wrapper > .h-flex.horizontal.stretch.gap-s > .card.pack {
  min-width: 0;
  flex: 0 0 calc((100% - var(--size-s)) / 1.75);
}
@media screen and (max-width: 479px) {
  /* Mobil na výšku: 1,25 karty. */
  .pack-wrapper > .h-flex.horizontal.stretch.gap-s > .card.pack { flex-basis: calc((100% - 10px) / 1.25); }
  .pack-wrapper.rb-pack-single > .h-flex.horizontal.stretch.gap-s > .card.pack { flex-basis: 100%; }
}
/* Pás psů zůstává vodorovný i na mobilu (site.css tam .h-flex.horizontal
   skládá pod sebe) — jinak by „1,5 karty" nefungovalo. */
@media screen and (max-width: 767px) {
  .pack-wrapper > .h-flex.horizontal.stretch.gap-s { flex-direction: row; flex-wrap: nowrap; align-items: stretch; }
}
/* Tlačítka karty psa: text se nezalamuje; v úzké kartě (2,5 karty na menším
   notebooku/tabletu, 1,5 na mobilu) menší písmo a bez ikony šipek. */
.pack-wrapper .card.pack { container-type: inline-size; }
.rb-pack-actions { flex-wrap: nowrap; justify-content: center; } /* tlačítka v přirozené šířce, na střed */
/* Různě vysoké polaroidy (zalomené štítky) — tlačítka všech karet dole v jedné linii. */
.pack-wrapper .card.pack > .card-inner,
.pack-wrapper .card.pack > .card-inner > .v-flex { height: 100%; }
.pack-wrapper .card.pack .rb-pack-actions { margin-top: auto; }
/* Hlavička „Moje smečka" bez horního/dolního okraje (výjimka, kolega 19. 10.). */
.section-heading.rb-pack-heading { margin-top: 0; margin-bottom: 0; }
/* Polaroid přes celou šířku karty (site.css max 335 px) — lícuje s tlačítky. */
.pack-wrapper .card.pack .pack-holder { max-width: none; }
/* Polaroid: střídavé natočení 1° / −1° / 1° … (site.css všem −1°), jméno
   s paddingem nahoře 12,5 px (kolega 19. 10. 2026). */
.pack-wrapper .card.pack:nth-child(odd) .pack-holder { transform: rotate(1deg); }
.pack-wrapper .card.pack:nth-child(even) .pack-holder { transform: rotate(-1deg); }
.pack-wrapper .card.pack .name-wrapper { padding-top: 12.5px; }
/* Ikona nastavení plná (Material Symbols FILL). */
.rb-pack-settings .ms-icon { font-variation-settings: "FILL" 1; }
.rb-pack-actions .btn.primary { white-space: nowrap; }
@container (max-width: 280px) {
  .rb-pack-actions { gap: 8px; }
  .rb-pack-actions .btn.primary { padding-left: 12px; padding-right: 12px; font-size: 15px; }
  .rb-pack-actions .btn.primary .mi-icon.left { display: none; }
}
/* Ještě užší karta (mobil 1,5 karty, 1024 px 2,5 karty): jen „Objednat". */
@container (max-width: 230px) {
  .rb-pack-actions .rb-pack-order-long { display: none; }
}

.rb-pack-actions .rb-pack-settings {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: auto;
  aspect-ratio: 1;
}
.rb-pack-actions .btn.primary { min-width: 0; }

/* Add-to-cart „loading" stav — maketa jen prohodí popisek za data-loading-text;
   přidáváme decentní pulz, ať je odezva vidět i u ikonového tlačítka na kartě.
   Vlastnosti selektoru [aria-busy="true"] jsou sloučené s pravidlem níž
   („Přidání do košíku…", `animation: rb-add-to-cart-pop`) — viz tam. */
.w-commerce-commerceaddtocartbutton {
  transition: transform .12s ease;
}

/* ---- Toasty (WC hlášky) ------------------------------------------------
   Maketa Webflow toast nemá — postavený z komponent design systému
   (karta + mi-icon + tokeny). Renderují ho woocommerce/notices/*.php,
   do #rb-toast-root je přesune assets/webflow/js/wf-toast.js.

   Pozor na výchozí viditelnost: WC_AJAX::checkout() vypisuje validační
   chyby objednávky přes wc_print_notices(true) (naše error.php), a
   checkout.js je vloží do .woocommerce-NoticeGroup-checkout přímo v DOM
   formuláře pokladny — mimo #rb-toast-root, dokud si je JS nevšimne a
   nepřesune. `.rb-toast` proto MUSÍ být viditelný by default (žádné
   opacity: 0 / transform v základním pravidle) — jinak by zákazník viděl
   jen zaseklé tlačítko bez důvodu. Skrytý výchozí stav a enter animace
   platí jen pro toasty, které už jsou uvnitř .rb-toast-root. */
.rb-toast-root {
  position: fixed;
  top: 96px;
  right: var(--size-s);
  /* CookieScript (externí skript mimo repo, /sortiment/ i jinde) injektuje
     fixed full-viewport backdrop s z-index 999996-999998 (naměřeno
     24. 8. 2026: #cookiescript_injected 999997, ..._wrapper 999996,
     #cookiescript_header 999998 = nejvyšší z-index na strance).
     Bez neodklikané lišty by toast (původně 1200) byl pod tímhle
     poloprůhledným (rgba(17,17,17,.5)) overlay - vizuálně ztlumený do šeda
     a neklikatelný (wrapper má pointer-events: auto přes celou obrazovku).
     1000000 je těsně nad nejvyšším CookieScript z-indexem, ne libovolně
     vysoké číslo. Pozičně se s cookie lištou/tlačítkem "Vše přijmout"
     nepřekrývá (toast vpravo nahoře, lišta dole/uprostřed), takže zvednutí
     z-indexu lištu samotnou nezakrývá. */
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  gap: var(--size-xs);
  max-width: 360px;
  pointer-events: none;
}
.rb-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--size-xs);
  padding: var(--size-s) 20px;
  border-radius: var(--size-m);
  background-color: var(--basic--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  pointer-events: auto;
}
/* Příjezd a odjezd zprava (zadání kolegy): toast přijede zpoza pravého
   okraje okna, lehce přejede a vrátí se na místo; po intervalu se nadechne
   doleva a odjede zpět doprava. Po celou jízdu je plně vidět (žádné
   prolínání), takže pohyb je čitelný. Třídy spíná wf-toast.js:
   .is-visible = příjezd, .is-leaving = odjezd (450 ms = timeout v JS).
   Výchozí stav v rootu je mimo obraz — server-renderované toasty mimo root
   zůstávají vidět (viz poznámka výš). */
.rb-toast-root .rb-toast {
  opacity: 0;
  transform: translateX(calc(100% + 60px));
}
.rb-toast-root .rb-toast.is-visible {
  opacity: 1;
  transform: none;
  animation: rb-toast-in .7s cubic-bezier(.22, .61, .36, 1) both;
}
.rb-toast-root .rb-toast.is-visible.is-leaving {
  animation: rb-toast-out .45s cubic-bezier(.55, .06, .68, .19) forwards;
}
@keyframes rb-toast-in {
  0%   { transform: translateX(calc(100% + 60px)); }
  65%  { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}
@keyframes rb-toast-out {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  100% { transform: translateX(calc(100% + 60px)); }
}
/* „Omezit pohyb": jízda zůstává (kolega ji chce vidět vždy), jen bez
   přejetí a nadechnutí. */
@keyframes rb-toast-in-plain {
  from { transform: translateX(calc(100% + 60px)); }
  to   { transform: translateX(0); }
}
@keyframes rb-toast-out-plain {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100% + 60px)); }
}
@media (prefers-reduced-motion: reduce) {
  .rb-toast-root .rb-toast.is-visible { animation: rb-toast-in-plain .45s ease-out both; }
  .rb-toast-root .rb-toast.is-visible.is-leaving { animation: rb-toast-out-plain .45s ease-in forwards; }
}
/* Úspěch („Uloženo" apod.) světle zelený — zadání kolegy 13. 10. 2026. */
.rb-toast--success { background-color: var(--game--100); }
.rb-toast--success .rb-toast__icon { color: var(--game--500); }
.rb-toast--error .rb-toast__icon { color: var(--beef--500); }
.rb-toast--info .rb-toast__icon { color: var(--rb--purple-700); }
.rb-toast__text { flex: 1 1 auto; }
.rb-toast__close { background: none; border: 0; cursor: pointer; opacity: .5; }
.rb-toast__close:hover { opacity: 1; }
/* Desktop: kousek od okraje (2vw: 1920 → 38 px, 1440 → 29 px) a hned pod
   hlavičkou — nahoře pod navbarem (12,5vh), po scrollu pod zmenšenou
   hlavičkou (.header.is-scrolled, 80 px). Delší minimální
   šířka, ať krátká hláška nevypadá jako odznak. */
@media (min-width: 992px) {
  .rb-toast-root {
    top: calc(12.5vh + 1vw);
    right: max(var(--size-s), 2vw);
    transition: top .2s ease;
  }
  body:has(.header.is-scrolled) .rb-toast-root { top: calc(80px + 1vw); }
  .rb-toast { min-width: 240px; }
}
/* Tablet: navbar je tu vyšší (min-height 130 / 110 px) — toast pod něj. */
@media (min-width: 480px) and (max-width: 991px) {
  .rb-toast-root { top: 140px; right: 20px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .rb-toast-root { top: 120px; right: var(--size-s); }
}
@media (max-width: 479px) {
  .rb-toast-root { left: var(--size-xs); right: var(--size-xs); max-width: none; }
}

/* ==========================================================================
   Doladění po vizuální kontrole (29. 8. 2026)
   ========================================================================== */

/* --- 1. Postranní košík: prolnutí ztmavení + vyjetí panelu zprava ---------
   Třídu .rb-cart-open přepíná webflow-lite.js §5 (display se přepíná mimo
   transition, aby šla animovat i cesta zpět). */
.w-commerce-commercecartcontainerwrapper {
  background-color: rgba(40, 0, 20, .55);
  opacity: 0;
  transition: opacity .3s ease;
}
.w-commerce-commercecartcontainerwrapper.rb-cart-open { opacity: 1; }
.w-commerce-commercecartcontainerwrapper .w-commerce-commercecartcontainer {
  transform: translateX(102%);
  transition: transform .36s cubic-bezier(.22, .61, .36, 1);
}
.w-commerce-commercecartcontainerwrapper.rb-cart-open .w-commerce-commercecartcontainer {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .w-commerce-commercecartcontainerwrapper,
  .w-commerce-commercecartcontainerwrapper .w-commerce-commercecartcontainer {
    transition: none;
  }
}

/* Přidání do košíku — krátké „ťuknutí" tlačítka, aby výměna ikony
   (local_mall → thumb_up) neproblikla skokem.
   transform: scale(.94) NENÍ mrtvý kód, i když @keyframes rb-add-to-cart-pop
   transform taky nastavují: animation-fill-mode je default "none", takže po
   0,45 s (konec animace) přestane animace transform ovlivňovat a vrátí se
   cascade hodnota z tohoto pravidla — dokud je aria-busy="true" (typicky
   déle než 0,45 s, viz wf-cart.js), tlačítko zůstává lehce zmenšené. Ověřeno
   empiricky (getComputedStyle po dobu 1,2 s po kliknutí na /sortiment/). */
.w-commerce-commerceaddtocartbutton[aria-busy="true"] {
  transform: scale(0.94);
  transition: transform .12s ease;
  animation: rb-add-to-cart-pop .45s ease;
}
@keyframes rb-add-to-cart-pop {
  0%   { transform: scale(1);   opacity: 1; }
  30%  { transform: scale(.88); opacity: .55; }
  100% { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .w-commerce-commerceaddtocartbutton[aria-busy="true"] { animation: none; }
}

/* Odkaz „Zobrazit košík", který WooCommerce po AJAX add-to-cart vkládá ZA
   tlačítko — v novém designu místo něj vyjede postranní košík. Bez skrytí
   roztáhne .h-flex řádek a tlačítko na kartě „uhne" doleva. */
a.added_to_cart { display: none !important; }

/* Zámek scrollu při otevřeném drawer — dorovnání šířky scrollbaru, ať obsah
   ani fixní hlavička „neposkočí" doprava (proměnnou plní webflow-lite.js). */
body.rb-scroll-lock { overflow: hidden; padding-right: var(--rb-sbw, 0px); }
body.rb-scroll-lock .header { padding-right: var(--rb-sbw, 0px); }

/* Lepící lišta „Do košíku" na detailu produktu (site.css: z-index 2) je pod
   overlayem drawer (z-index 1001), ale při otevřeném košíku nemá co dělat ani
   ztmavená — schováváme ji po dobu, co je drawer otevřený. */
body.rb-scroll-lock .add-to-cart-banner { display: none; }
/* Lepící lišta „Do košíku" (site.css z-index 2) prohrávala s obsahem stránky
   se stejným z-indexem pozdě v DOM — pilulky variant na kartách „Další
   produkty" (.radio-switches, z 2) jí lezly přes. 7 = nad obsahem, ale pod
   hlavičkou (header z 8) a košíkem (1001). */
.add-to-cart-banner { z-index: 7; }

/* Součet v patě drawer: „Celkem za produkty   4,54 € (včetně DPH)".
   `<small class="tax_label">` z WooCommerce dědí velikost z .price (32 px/800),
   takže „(včetně DPH)" vycházelo 25,6 px tučně — bylo skoro stejně velké jako
   částka a celý řádek se lámal. Částka zůstává velká, poznámka o DPH je malá
   a řádek se nezalomí: .price nesmí zalomit uvnitř a popisek vlevo ustoupí
   dřív než číslo. */
.w-commerce-commercecartfooter .cart-line-item {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--size-xs);
}
.w-commerce-commercecartfooter .cart-line-item > :first-child {
  flex: 0 1 auto;
  min-width: 0;
}
.w-commerce-commercecartfooter .cart-line-item .price {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: .3em;
  white-space: nowrap;
}
.w-commerce-commercecartfooter .cart-line-item .price .tax_label {
  color: var(--rb--purple-900);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  opacity: .6;
}
/* Užší drawer (mobil) — u čtyřmístných částek v Kč by se ani nezalomená
   dvojice nevešla, částka proto o kousek dolů. */
@media screen and (max-width: 479px) {
  .w-commerce-commercecartfooter .cart-line-item .price { font-size: 26px; }
}


/* --- 3. WooCommerce hlášky mimo toasty (např. tlapičky v košíku) ----------
   Návrh s nimi nepočítá; sjednocujeme je na bílou kartu v šířce obsahu. */
.woocommerce > .woocommerce-info,
.woocommerce > .woocommerce-message,
.woocommerce > .woocommerce-error {
  box-sizing: border-box;
  width: 100%;
  max-width: 1460px;
  margin: var(--size-m) auto 0;
  padding: var(--size-s) var(--size-s-m);
  border: 2px solid var(--rb--purple-700-15);
  border-radius: var(--size-m);
  background-color: var(--basic--white);
  color: var(--rb--purple-900);
  font-size: 16px;
  line-height: 1.4;
  list-style: none;
}
.woocommerce > .woocommerce-info a,
.woocommerce > .woocommerce-message a,
.woocommerce > .woocommerce-error a {
  color: var(--rb--purple-700);
  font-weight: 700;
  text-decoration: underline;
}
.woocommerce > .woocommerce-info a:hover,
.woocommerce > .woocommerce-message a:hover,
.woocommerce > .woocommerce-error a:hover { color: var(--rb--orange); }
@media screen and (max-width: 991px) {
  .woocommerce > .woocommerce-info,
  .woocommerce > .woocommerce-message,
  .woocommerce > .woocommerce-error { margin-left: var(--size-m); margin-right: var(--size-m); width: auto; }
}

/* Newsletter na WooCommerce stránkách: woocommerce-layout.css má
   `.woocommerce img { height: auto }` (specificita 0,1,1) a přebíjí
   .bg-img-max ze site.css → obrázek v sekci newsletteru se roztáhne. */
.woocommerce .bg-img-max,
.woocommerce-page .bg-img-max { height: 115%; }
/* Totéž pro `max-width`: WC má `.woocommerce img { max-width: 100% }` a přebíjelo
   to `@media 991 { .bg-img-max { max-width: 60% } }` — na mobilu byl obrázek
   v newsletteru na shop stránkách o polovinu větší než v maketě. */
@media screen and (max-width: 991px) {
  .woocommerce .bg-img-max,
  .woocommerce-page .bg-img-max { max-width: 60%; }
}

/* --- 4. Selecty ----------------------------------------------------------
   Nativní <select> z WooCommerce/pluginů mají vypadat jako návrhový .input
   (bílá pilulka). Vynecháváme legacy obsah (.rb-legacy) a skrytý select pod select2.
   Šipka: místo systémové (v maketě Webflow nativní) vlastní chevron v barvě
   textu — zadání kolegy 13. 10. 2026, platí pro všechny selecty webu
   (proměnné --rb-chevron-* upravují malé selecty níž). */
.rb-webflow select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) {
  --rb-chevron-right: 22px;
  box-sizing: border-box;
  height: 56px;
  padding: 10px 25px;
  padding-right: calc(var(--rb-chevron-right) + 26px);
  border: 2px solid var(--rb--purple-700-15);
  border-radius: var(--size-m);
  background-color: var(--basic--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23280014' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--rb-chevron-right) center;
  background-size: 16px 16px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--rb--purple-900);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
}
.rb-webflow select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple])::-ms-expand { display: none; }
/* (Selektory s :not() kvůli specificitě — musí přebít obecnou pilulku výš.)
   Návrhové `select.input.w-select` drží na tabletu/mobilu výšku .input
   (50 / 46 px) — obecná pilulka výš je jinak nechává 56 px vedle 46px polí. */
@media screen and (max-width: 991px) {
  .rb-webflow select.input.w-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) { height: 50px; padding-left: 20px; font-size: 16px; }
}
@media screen and (max-width: 767px) {
  .rb-webflow select.input.w-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) { height: 46px; }
}
@media screen and (max-width: 479px) {
  .rb-webflow select.input.w-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) { --rb-chevron-right: 15px; padding-left: 15px; padding-right: 39px; }
  /* Datum březosti v kartě psa — tři úzké selecty v řádku. */
  .rb-webflow .rb-pregnancy-date select.input.w-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) { --rb-chevron-right: 9px; padding-left: 12px; padding-right: 29px; background-size: 14px 14px; }
}
.rb-webflow select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]):hover {
  border-color: var(--rb--purple-700-15);
  background-color: var(--basic--100);
}
.rb-webflow select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]):focus {
  border-color: var(--rb--purple-700);
  outline: 0;
}

/* Select varianty na kartě produktu (hodnota voucheru) — vypadá jako
   NEVYBRANÉ tlačítko varianty (.tab-link.radio.s): 36 px, světlé
   `--basic--100`, text a chevron `--rb--purple-700`, rámeček 1 px, při najetí
   rámeček `--rb--purple-700`; na mobilu menší stejně jako tlačítka
   (zadání kolegy 13. 10. 2026). Obal .rb-variant-select = .tabs-menu.radio-switches.s
   (přesah přes fotku) + flex, který jinak dává Webflow pill-group. */
.rb-variant-select { display: flex; }
.rb-webflow .rb-variant-select select.custom-select.btn.s.w-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) {
  --rb-chevron-right: 12px;
  width: auto;
  max-width: 100%;
  height: 36px;
  padding: 0 32px 0 15px;
  border: 1px solid var(--rb--purple-700-15);
  border-radius: 40px;
  background-color: var(--basic--100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%234a0930' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  color: var(--rb--purple-700);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
}
.rb-webflow .rb-variant-select select.custom-select.btn.s.w-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]):hover {
  border-color: var(--rb--purple-700);
  background-color: var(--basic--100);
}
/* Rozbalený seznam: bílé pozadí, tmavý text (prohlížeče jinak dědí z pilulky). */
.rb-webflow .rb-variant-select select.custom-select.btn.s.w-select option {
  color: var(--rb--purple-900);
  background-color: var(--basic--white);
}
@media screen and (max-width: 991px) {
  .rb-webflow .rb-variant-select select.custom-select.btn.s.w-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) { padding-left: 12px; }
}
@media screen and (max-width: 767px) {
  .rb-webflow .rb-variant-select select.custom-select.btn.s.w-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) {
    --rb-chevron-right: 9px;
    height: 28px;
    padding: 0 24px 0 9px;
    background-size: 10px 10px;
    font-size: 12px;
  }
}
@media screen and (max-width: 479px) {
  .rb-webflow .rb-variant-select select.custom-select.btn.s.w-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) { padding-left: 8px; }
}

/* Předvolba telefonu (plugin) — stejný vzhled, jen užší a bez roztažení.
   Vlastní styl pluginu (šedé pozadí, radius 8 px, jiná výška) přebíjíme. */
.rb-webflow select.phone-prefix-select,
.rb-webflow .phone-prefix-wrapper select.phone-prefix-select {
  width: auto;
  min-width: 120px;
  height: 56px;
  border-radius: var(--size-m);
  font-size: 16px;
  padding: 10px 15px;
}
.rb-webflow .phone-prefix-wrapper { display: flex; }
/* Plugin si vynucuje vlastní rozměry přes #phone_prefix { … !important }
   (height: 3.3em, border-radius: 8px, width: 100%), takže tyhle tři vlastnosti
   musíme přebít taky s !important — jinak zůstane hranatý box mezi pilulkami. */
.rb-webflow select#phone_prefix {
  height: 56px !important;
  width: auto !important;
  border-radius: var(--size-m) !important;
}
/* Chevron (sekce 4) u úzké předvolby: menší odsazení, ať se „+421 SK" vejde. */
.rb-webflow select.phone-prefix-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]),
.rb-webflow select#phone_prefix {
  --rb-chevron-right: 14px;
  padding-left: 15px;
  padding-right: 36px;
}

/* select2 (země v pokladně) — stejný vzhled jako .input. */
.rb-webflow .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 45px 0 25px;
  border: 2px solid var(--rb--purple-700-15);
  border-radius: var(--size-m);
  background-color: var(--basic--white);
}
.rb-webflow .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--rb--purple-900);
  font-size: 18px;
  line-height: 1;
}
.rb-webflow .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 18px;
  width: 14px;
  height: 100%;
}
.rb-webflow .select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23280014' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  transition: transform .15s;
}
.rb-webflow .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.rb-webflow .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
  transform: rotate(180deg);
}
.rb-webflow .select2-dropdown {
  border: 2px solid var(--rb--purple-700-15);
  border-radius: var(--size-s);
  overflow: hidden;
}
.rb-webflow .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--rb--orange-light);
  color: var(--rb--purple-900);
}
.rb-webflow .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 2px solid var(--rb--purple-700-15);
  border-radius: var(--size-s);
  padding: 8px 12px;
}

/* --- 5. Zaškrtávátka z WooCommerce/pluginů -------------------------------
   Návrhové checkboxy (.w-checkbox > .w-checkbox-input) mají vlastní markup,
   který u cizích polí nemáme — nativní input proto překreslujeme na stejný
   vzhled (bílý rámeček, oranžová fajfka po zaškrtnutí). */
.rb-webflow input[type="checkbox"]:not(.w-checkbox input):not(.w-radio input):not(.rb-legacy input) {
  box-sizing: border-box;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--rb--purple-700-15);
  border-radius: var(--size-m); /* kolečko — stejně jako návrhový .radio-checkbox.checkbox */
  background-color: var(--basic--white);
  background-position: 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: all .2s;
}
.rb-webflow input[type="checkbox"]:not(.w-checkbox input):not(.w-radio input):not(.rb-legacy input):checked {
  border-color: var(--rb--orange);
  background-color: var(--rb--orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M1 5.5L5 9.5L13 1.5' stroke='%23280014' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.rb-webflow input[type="checkbox"]:not(.w-checkbox input):not(.w-radio input):not(.rb-legacy input):focus-visible {
  box-shadow: 0 0 5px 0 var(--rb--orange-light);
  outline: 0;
}

/* Souhlasy v pokladně: dva návrhové checkboxy (.option-field) měří 36 px,
   třetí (z pluginu, přes checkout/terms.php) je nativní input — bez tohohle
   by byl 24px a řádek by vypadal jinak než dva nad ním. */
.rb-webflow .consents-wrapper input[type="checkbox"]:not(.w-checkbox input):not(.w-radio input):not(.rb-legacy input) {
  width: 36px;
  height: 36px;
}

/* == Košík: hlášky cizích pluginů (rawbark-rewards) ====================== */
/* Šablona je vytahuje z woocommerce_before_cart do levého sloupce a renderuje
   jako .info-box (viz functions/webflow-notices.php). Maketa .info-box nemá
   chybovou variantu s ikonou — zelená .mi-icon.info by na salmon pozadí
   .info-box.warning nefungovala, tak jí tady dáváme barvu varianty. */
.info-box.warning > .mi-icon.info { color: var(--salmon--500); }
/* Tlapička za počtem bodů: plugin vypisuje prázdné <i class="paw-after">
   a čeká, že ikonu dodá téma. Legacy pravidlo je scopnuté do .rb-legacy,
   takže na webflow stránkách nebylo vidět nic („obdržíte 50" bez jednotky).
   Ikona je stejná jako u tlapičkových slev na pokladně (checkout-webflow.php). */
.rb-plugin-note .paw-after {
  display: inline-block;
  min-width: 1em;
  min-height: 1em;
  margin-left: .25em;
  padding-right: 1.25em;
  vertical-align: middle;
  background: url("../img/tlapicka.svg") right center / .95em no-repeat;
}

/* == Košík: řádek granulí na míru ======================================== */
/* Maketa granule nezná (v návrhu košíku jsou jen kusové produkty), takže dvě
   věci navíc, které WooCommerce/konfigurátor přidávají, potřebují doladit. */

/* 1. Data položky („Pro: <pes>") — WC je renderuje jako <dl class="variation">
   s <dt>/<dd>, což prohlížeč vysází na dva řádky a <dd> ještě odsadí o 40 px.
   Sázíme je do dvou sloupců (klíč : hodnota) v typografii .note, ať to sedí
   pod název produktu. Scopnuté do .cart-product-grid, jinde se dl.variation
   nedotýkáme. */
.cart-product-grid dl.variation,
.rb-ck-products .product-details-grid dl.variation { /* pokladna stejně jako košík */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .35em;
  margin: 0;
  opacity: .85;
  font-size: 14px;
  line-height: 1.3;
}
.cart-product-grid dl.variation dt,
.cart-product-grid dl.variation dd,
.rb-ck-products .product-details-grid dl.variation dt,
.rb-ck-products .product-details-grid dl.variation dd { margin: 0; font-weight: 400; }
.cart-product-grid dl.variation dd p,
.rb-ck-products .product-details-grid dl.variation dd p { margin: 0; }

/* 2. Jednotka „kg" za pilulkou množství. Sloupec Množství je 124 px, pilulka
   100 px a .h-flex má mezeru 20 px — dvojice se nevešla na řádek a kvůli
   space-between spadlo „kg" doleva pod pilulku. Mezera na 5 px a bez zalomení:
   pilulka zůstane zarovnaná stejně jako u ostatních řádků a „kg" sedí vedle. */
.cart-product-grid .rb-qty-unit {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--size-xxs);
}
.cart-product-grid .rb-qty-unit > * { flex: 0 0 auto; }
/* Telefon: maketa dává množství dva ze šesti sloupců (390 px → 97 px), to je
   sama pilulka. Jednotka proto jde pod ni (absolutně, řádek neroste a pilulka
   zůstane v ose s cenou) a mezisoučet s křížkem se nezalomí ani u čtyřmístné
   částky — při 360 px přesáhne o pár px do paddingu karty. */
@media screen and (max-width: 479px) {
  .woocommerce-cart-form .cart-product-grid .rb-qty-unit { position: relative; }
  .woocommerce-cart-form .cart-product-grid .rb-qty-unit .note {
    position: absolute;
    top: 100%;
    left: 50px;
    transform: translateX(-50%);
    font-size: 12px;
    line-height: 16px;
  }
  .woocommerce-cart-form .cart-product-grid > .h-flex.align-right {
    flex-wrap: nowrap;
    grid-column-gap: var(--size-xxs);
  }
  .woocommerce-cart-form .cart-product-grid > .h-flex.align-right .price { white-space: nowrap; }
}
/* Pod 375 px (iPhone SE 1. gen.) se cena + pilulka + mezisoučet na řádek
   nevejdou — mezisoučet s křížkem jde na vlastní řádek doprava (ID selektor
   kvůli span 3 z w-node pravidla). */
@media screen and (max-width: 374px) {
  #rawbark-cart-form-content .cart-product-grid > .h-flex.align-right { grid-column: 1 / -1; }
}

/* Košík — slevový kupón na rozklik (<details>, zadání kolegy; maketa má
   pole s tlačítkem rozbalené). Celý řádek nadpisu je klikací, šipka se otočí,
   tělo má stejný odstup jako .v-flex.gap-s-m v maketě. */
.rb-coupon-toggle {
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  border-radius: var(--size-xs);
}
.rb-coupon-toggle::-webkit-details-marker { display: none; }
.rb-coupon-toggle h5 { margin: 0; }
.rb-coupon-toggle .mi-icon { transition: transform .2s; }
.rb-coupon[open] .rb-coupon-toggle .mi-icon { transform: rotate(180deg); }
.rb-coupon-toggle:focus-visible { outline: 2px solid var(--rb--purple-700); outline-offset: 6px; }
.rb-coupon-body { margin-top: var(--size-s-m); }

/* 3. Náhled balení. .product-img má height: auto, což u čtvercových fotek
   produktů vyjde přesně na kolečko 60×60, ale pack shot granulí je na výšku
   a přetékal přes celý řádek. V košíku i pokladně ho vepíšeme do kolečka. */
.cart-product-grid .product-img-wrapper img,
.rb-ck-products .product-img-wrapper img {
  height: 100%;
  object-fit: contain;
}

/* Košík — karta „doprava zdarma" (#rawbark-free-shipping) se po AJAX +/-
   překresluje jako WC fragment (functions/cart-ajax.php). Pruh dojede na novou
   hodnotu plynule, změněný text jemně probliknutí (assets/js/cart-ajax.js). */
#rawbark-free-shipping .paw-bar.free-shipping {
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
#rawbark-free-shipping h4.rb-fs-flash {
  animation: rb-fs-flash .45s ease-out;
}
@keyframes rb-fs-flash {
  from { opacity: .3; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #rawbark-free-shipping .paw-bar.free-shipping { transition: none; }
  #rawbark-free-shipping h4.rb-fs-flash { animation: none; }
}

/* Formulář v odesílání — `data-rb-busy` + assets/webflow/js/form-busy.js.
   Přihlášení je klasický POST (WC_Form_Handler::process_login), odpověď chodí
   ~1,5–3 s a bez zámku to vypadá, že se klik neodeslal. */
form.rb-busy {
  pointer-events: none;
}
form.rb-busy .input-wrapper {
  opacity: .5;
  transition: opacity .2s ease;
}
.btn.rb-busy-btn {
  cursor: progress;
  background-image: linear-gradient(100deg, #fff0 35%, #ffffff73 50%, #fff0 65%);
  background-repeat: no-repeat;
  background-size: 250% 100%;
  animation: rb-busy-sweep 1.15s linear infinite;
}
@keyframes rb-busy-sweep {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.rb-busy-btn { animation: none; }
}

/* Sortiment, panel filtru „Vhodné pro:" — maketa počítá se dvěma psy, reálné
   účty jich mají i dvacet. Zobrazuje se prvních pět, zbytek schová pilulka
   „+N dalších" (assets/webflow/js/sortiment-filter.js). */
.option-field.rb-dog-hidden {
  display: none;
}
.rb-dogs-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
.rb-dogs-toggle .text-label.pack-member {
  padding-left: var(--size-s-m);
  white-space: nowrap;
}
.rb-dogs-toggle:hover .radio-checkbox,
.rb-dogs-toggle:focus-visible .radio-checkbox {
  border-color: var(--rb--orange);
}

/* Postranní košík — přechodné stavy položky při AJAX operaci
   (assets/webflow/js/wf-cart.js §4). Ve výsledném stavu se drawer překreslí
   z WC fragmentu, tyhle třídy tedy nikdy nepřežijí odpověď serveru — v QA
   ani v maketě vidět nejsou.

   Mazaný řádek splaskne HNED po kliku (výšku na aktuální hodnotu nastaví JS,
   odsud jede na 0 i s odsazením a linkou) — zbytek košíku tak vyjede nahoru
   okamžitě a odpověď serveru (~1,2 s) dobíhá na pozadí. Když request neprojde,
   JS třídu sundá a řádek stejnou cestou najede zpátky. */
.w-commerce-commercecartitem.rb-cart-item-pending {
  opacity: .6;
  transition: opacity .18s ease;
}
.w-commerce-commercecartitem.rb-cart-item-removing {
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  transition: height .16s ease, opacity .11s ease, padding .16s ease, border-bottom-width .16s ease;
}

/* Ceny v košíku (postranním i na /kosik/) — assets/webflow/js/cart-anim.js.
   `.rb-price-loading` = běží AJAX a tahle částka se přepočítává; bez toho
   nebylo po kliknutí ~1,5 s poznat, že se vůbec něco děje. Po výměně fragmentu
   se číslo nepřepne skokem, ale dopočítá se — `.rb-price-anim` po dobu dopočtu
   zapne tabulkové číslice, aby číslo při přebíhání hodnot necukalo šířkou. */
.woocommerce-Price-amount.rb-price-loading {
  animation: rb-price-pulse 1.1s ease-in-out infinite;
}
@keyframes rb-price-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.woocommerce-Price-amount.rb-price-anim {
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .w-commerce-commercecartitem.rb-cart-item-pending,
  .w-commerce-commercecartitem.rb-cart-item-removing {
    transition: none;
  }
  .woocommerce-Price-amount.rb-price-loading { animation: none; opacity: .45; }
}

/* ------------------------------------------------------------------------ *
 * Mikroanimace ikon v tlačítkách (assets/webflow/js/icon-motion.js).
 *
 * Maketa má na .mi-icon jen `transition: all` a žádný pohyb — tohle je tedy
 * doplněk nad rámec návrhu, vyžádaný v zadání. Proto všechno běží VÝHRADNĚ
 * na :hover / :focus-visible: klidový stav zůstává bajt po bajtu stejný jako
 * v maketě a vizuální QA (která nehoveruje) je pořád 1:1.
 *
 * Typ pohybu přiřazuje JS podle jména ikony do `data-rb-ico`; nositel :hover
 * dostane třídu `.rb-ico`. Druhý selektor v každé dvojici pokrývá ikonové
 * odkazy, kde je ikona sama tlačítkem (mazání v košíku). Selektory schválně
 * necílí na `.mi-icon` — maketa má i druhou rodinu `.ms-icon` (šipka
 * „Přejít k pokladně") a ta se má chovat stejně.
 *
 * Na dotykových zařízeních se nespouští (`hover: hover`) — tam :hover po
 * ťuknutí „zamrzá" a ikona by zůstala rozhýbaná bez důvodu.
 * ------------------------------------------------------------------------ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Šipky vpřed — posun svým směrem a zpět. */
  .rb-ico:is(:hover, :focus-visible) [data-rb-ico="right"],
  .rb-ico[data-rb-ico="right"]:is(:hover, :focus-visible) {
    animation: rb-ico-right .45s cubic-bezier(.34, 1.3, .64, 1);
  }
  .rb-ico:is(:hover, :focus-visible) [data-rb-ico="left"],
  .rb-ico[data-rb-ico="left"]:is(:hover, :focus-visible) {
    animation: rb-ico-left .45s cubic-bezier(.34, 1.3, .64, 1);
  }

  /* Kruhové šipky (autorenew u „Objednat znovu") — protočení dokola. */
  .rb-ico:is(:hover, :focus-visible) [data-rb-ico="spin"],
  .rb-ico[data-rb-ico="spin"]:is(:hover, :focus-visible) {
    animation: rb-ico-spin .6s cubic-bezier(.45, .05, .3, 1);
  }
  .rb-ico:is(:hover, :focus-visible) [data-rb-ico="spin-back"],
  .rb-ico[data-rb-ico="spin-back"]:is(:hover, :focus-visible) {
    animation: rb-ico-spin-back .6s cubic-bezier(.45, .05, .3, 1);
  }

  /* Zatřesení — mixér u „Sestavit granule", koš, telefon. */
  .rb-ico:is(:hover, :focus-visible) [data-rb-ico="shake"],
  .rb-ico[data-rb-ico="shake"]:is(:hover, :focus-visible) {
    animation: rb-ico-shake .5s ease-in-out;
  }

  /* Tep — srdce, tlapky. */
  .rb-ico:is(:hover, :focus-visible) [data-rb-ico="beat"],
  .rb-ico[data-rb-ico="beat"]:is(:hover, :focus-visible) {
    animation: rb-ico-beat .55s ease-in-out;
  }

  /* Odlet — odeslání newsletteru. */
  .rb-ico:is(:hover, :focus-visible) [data-rb-ico="fly"],
  .rb-ico[data-rb-ico="fly"]:is(:hover, :focus-visible) {
    animation: rb-ico-fly .55s ease;
  }

  /* Poskočení — nákupní taška, plus/minus, potvrzení. */
  .rb-ico:is(:hover, :focus-visible) [data-rb-ico="hop"],
  .rb-ico[data-rb-ico="hop"]:is(:hover, :focus-visible) {
    animation: rb-ico-hop .45s cubic-bezier(.34, 1.4, .64, 1);
  }

  /* Výchozí pro všechno ostatní — decentní pop, ať žádná ikona v tlačítku
     nezůstane bez odezvy. */
  .rb-ico:is(:hover, :focus-visible) [data-rb-ico="pop"],
  .rb-ico[data-rb-ico="pop"]:is(:hover, :focus-visible) {
    animation: rb-ico-pop .4s cubic-bezier(.34, 1.4, .64, 1);
  }
}

@keyframes rb-ico-right {
  0% { transform: translateX(0); }
  45% { transform: translateX(.3em); }
  100% { transform: translateX(0); }
}
@keyframes rb-ico-left {
  0% { transform: translateX(0); }
  45% { transform: translateX(-.3em); }
  100% { transform: translateX(0); }
}
@keyframes rb-ico-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes rb-ico-spin-back {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes rb-ico-shake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-11deg); }
  35% { transform: rotate(9deg); }
  55% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
@keyframes rb-ico-beat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.22); }
  45% { transform: scale(.94); }
  70% { transform: scale(1.1); }
}
@keyframes rb-ico-fly {
  0% { transform: translate(0, 0); opacity: 1; }
  45% { transform: translate(.55em, -.45em); opacity: 0; }
  46% { transform: translate(-.45em, .35em); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes rb-ico-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-.22em) scale(1.06); }
  70% { transform: translateY(.04em) scale(.99); }
}
@keyframes rb-ico-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.18); }
}

/* ------------------------------------------------------------------------ *
 * HP kategorie: hover na tlačítku „Do kategorie" zvětší fotku kategorie
 * (publikace 3. 9. 2026 — ve Webflow ix2 na a.btn.category-btn s inline
 * transformem na sousedním <img class="category-hp-img">).
 * Naměřeno na rawbark.webflow.io (1920): hover nad kartou nedělá nic, hover
 * nad tlačítkem škáluje obrázek na 1.05 za ~200 ms s ease-out, po opuštění
 * zpět na 1. Všech 5 karet stejně.
 * ------------------------------------------------------------------------ */
.hp-categories .category-hp-img {
  transition: transform .2s ease-out;
}

/* Celá dlaždice je odkaz (zadání 6. 10. 2026, nad rámec makety): klik nese
 * a.rb-hp-cat-link přes celou .card-inner, nadpis a tlačítko jsou jen <div>.
 * Hover efekt tlačítka (fialové pozadí + zvětšení fotky) jede při hoveru
 * kdekoli na dlaždici; nadpis zůstává bez podtržení i změny barvy. */
.grid.products .card-inner {
  position: relative;
}
.grid.products .rb-hp-cat-link {
  z-index: 2;
  border-radius: inherit;
  position: absolute;
  inset: 0;
}
.grid.products .rb-hp-cat-link:focus-visible {
  outline: 2px solid var(--rb--purple-700);
  outline-offset: -2px;
  border-radius: var(--size-m);
}
.grid.products .card-inner:hover .btn.category-btn {
  background-color: var(--rb--purple-700);
  color: var(--basic--white);
}
.grid.products .card-inner:hover .category-hp-img {
  transform: scale(1.05);
}
.grid.products .heading-category-link:hover {
  color: var(--rb--purple-700);
  text-decoration: none;
}

/* ------------------------------------------------------------------------ *
 * Kontakt — hlášky formuláře po odeslání (publikace 8. 9. 2026).
 * Maketa má Webflow bloky `.success-message > .info-box.align-left` a
 * `.error-message > .error-box`, obojí s ikonou vlevo. CF7 místo nich
 * renderuje jediný `.wpcf7-response-output` a po AJAX odeslání do něj sype
 * čistý text (`innerText`), takže markup z makety by nepřežil — vzhled
 * proto skládáme tady z těch samých tokenů a ikonu dáváme přes ::before.
 * Stav se pozná podle `data-status` na formuláři, který CF7 nastavuje.
 * ------------------------------------------------------------------------ */
.rb-webflow .wpcf7-response-output {
  min-height: 56px;
  margin: var(--size-s) 0 0;
  padding: var(--size-s);
  border: 0;
  border-radius: var(--size-s);
  color: var(--rb--purple-900);
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  display: flex;
}
.rb-webflow .wpcf7-response-output:before {
  flex: none;
  font-family: Material Icons Round, sans-serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
}
/* Úspěch — .info-box + .mi-icon.success */
.rb-webflow form[data-status="sent"] .wpcf7-response-output {
  background-color: var(--game--100);
}
.rb-webflow form[data-status="sent"] .wpcf7-response-output:before {
  content: "check_circle";
  color: var(--game--300);
}
/* Chyba — .error-box + .mi-icon.error */
.rb-webflow form[data-status="failed"] .wpcf7-response-output,
.rb-webflow form[data-status="invalid"] .wpcf7-response-output,
.rb-webflow form[data-status="spam"] .wpcf7-response-output,
.rb-webflow form[data-status="unaccepted"] .wpcf7-response-output,
.rb-webflow form[data-status="aborted"] .wpcf7-response-output {
  background-color: var(--beef--100);
}
.rb-webflow form[data-status="failed"] .wpcf7-response-output:before,
.rb-webflow form[data-status="invalid"] .wpcf7-response-output:before,
.rb-webflow form[data-status="spam"] .wpcf7-response-output:before,
.rb-webflow form[data-status="unaccepted"] .wpcf7-response-output:before,
.rb-webflow form[data-status="aborted"] .wpcf7-response-output:before {
  content: "error";
  color: var(--beef--300);
}
/* Bez hlášky (init / odesílám) box nezabírá místo. */
.rb-webflow form[data-status="init"] .wpcf7-response-output,
.rb-webflow form[data-status="submitting"] .wpcf7-response-output,
.rb-webflow form[data-status="validating"] .wpcf7-response-output,
.rb-webflow form[data-status="resetting"] .wpcf7-response-output {
  display: none;
}

/* ------------------------------------------------------------------------ *
/* ------------------------------------------------------------------------ *
 * /sestaveno — skladba balení z pytlů 4 kg a 10 kg (zadání 12. 10. 2026).
 * 4kg pytel = stejný obal jako 10kg, jen zmenšený (88 % — „jen trochu
 * menší"). Balení z víc pytlů: vepředu největší, ostatní (max. 2) o 30 %
 * menší a výš za ním — perspektiva. Zmenšuje/posouvá se jen
 * transformem od spodní hrany, takže overlaye jdou s pytlem a layout karty
 * (výška `.product-image-wrapper`) se nemění. Zadní pytle jsou schválně
 * malé, víc schované a ztlumené, ať neruší (kolega 12. 10. 2026). Posuny X
 * jsou v % šířky pytle (52,5 % čtverce): 13,3 % ≈ 7 % čtverce, 24,8 % ≈ 13 %,
 * 32,4 % ≈ 17 %.
 * Třídy nastavuje package-image.php a done.js (posuvník karty „Vlastní").
 * ------------------------------------------------------------------------ */
.relative.product-image.rb-bag-4,
.rb-bags > .relative.product-image {
  transform: translate(var(--rb-bag-x, 0), var(--rb-bag-y, 0)) scale(calc(var(--rb-bag-s, 1) * var(--rb-bag-k, 1)));
  transform-origin: 50% 100%;
}
.relative.product-image.rb-bag-4 { --rb-bag-k: .88; }
.rb-bags {
  position: relative;
  width: 100%;
}
.rb-bags > .relative.product-image {
  margin-left: auto;
  margin-right: auto;
}
.rb-bags > .rb-bag-front { z-index: 1; }
.rb-bags > .rb-bag-back {
  --rb-bag-s: .7;
  --rb-bag-y: -9%;
  position: absolute;
  bottom: 0;
  left: 23.75%;
  z-index: 0;
  pointer-events: none;
  filter: brightness(.85) saturate(.6);
}
.rb-bags-2 > .rb-bag-front { --rb-bag-x: -13.3%; }
.rb-bags-2 > .rb-bag-b1 { --rb-bag-x: 24.8%; }
.rb-bags-3 > .rb-bag-b1 { --rb-bag-x: -32.4%; }
.rb-bags-3 > .rb-bag-b2 { --rb-bag-x: 32.4%; }

/* ------------------------------------------------------------------------ *
 * Detail produktu — pilulky variant (zadání 11. 9. 2026).
 *
 * Maketa nekreslí stav vyprodané varianty (CMS export vždy renderuje
 * "Skladem"), tak dolaďujeme jen viditelně-nekoupitelný stav tlačítka
 * (jinak by po přepnutí na vyprodanou pilulku vypadalo tlačítko úplně
 * stejně jako aktivní a klik by tiše nedělal nic — viz webflow-lite.js §10).
 * ------------------------------------------------------------------------ */
.w-commerce-commerceaddtocartbutton.single_add_to_cart_button.disabled,
.w-commerce-commerceaddtocartbutton.single_add_to_cart_button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Tabulky z inline stylů publikace Webflow 25. 9. 2026. */
/* =========================================================
   RAWBARK — GLOBAL TABLES
   ========================================================= */

:root {
  --rb-table-text: #2b001a;
  --rb-table-head: #57002f;
  --rb-table-border: #c3c2ca;
  --rb-table-column-alt: rgba(255, 255, 255, 0.8);
  --rb-table-radius: 16px;
}


/* =========================================================
   SCROLL WRAPPER
   ========================================================= */

.rb-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   TABLE
   ========================================================= */

.rb-table-scroll table,
table.rb-table {
  width: 100%;
  margin: 0;

  border-collapse: separate;
  border-spacing: 0;

  color: var(--rb-table-text);
  background: transparent;

  border: 2px solid var(--rb-table-border);
  border-radius: var(--rb-table-radius);

  overflow: hidden;

  font-size: 16px;
  line-height: 1;
}


/* =========================================================
   CAPTION / HORNÍ VÍNOVÝ PRUH
   ========================================================= */

.rb-table-scroll table caption,
table.rb-table caption {
  caption-side: top;

  padding: 15px 20px;

  background: var(--rb-table-head);
  color: #fff;

  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: left;

  border: 2px solid var(--rb-table-border);
  border-bottom: 0;

  border-radius:
    var(--rb-table-radius)
    var(--rb-table-radius)
    0
    0;
}


/* Pokud má tabulka caption, horní rohy obstará caption */
.rb-table-scroll table:has(caption),
table.rb-table:has(caption) {
  border-top: 0;

  border-radius:
    0
    0
    var(--rb-table-radius)
    var(--rb-table-radius);
}


/* =========================================================
   CELLS
   ========================================================= */

.rb-table-scroll th,
.rb-table-scroll td,
table.rb-table th,
table.rb-table td {
  padding: 15px 20px;

  color: var(--rb-table-text);

  font-size: 16px;
  line-height: 1;

  vertical-align: middle;

  border-right: 1px solid var(--rb-table-border);
  border-bottom: 1px solid var(--rb-table-border);
}


/* Poslední sloupec bez pravé linky */
.rb-table-scroll tr > th:last-child,
.rb-table-scroll tr > td:last-child,
table.rb-table tr > th:last-child,
table.rb-table tr > td:last-child {
  border-right: 0;
}


/* Poslední řádek bez spodní linky */
.rb-table-scroll tbody tr:last-child > td,
.rb-table-scroll tbody tr:last-child > th,
table.rb-table tbody tr:last-child > td,
table.rb-table tbody tr:last-child > th {
  border-bottom: 0;
}


/* =========================================================
   ALTERNATING COLUMNS
   Každý sudý sloupec = bílá 80 %
   ========================================================= */

.rb-table-scroll tr > th:nth-child(odd),
.rb-table-scroll tr > td:nth-child(odd),
table.rb-table tr > th:nth-child(odd),
table.rb-table tr > td:nth-child(odd) {
  background-color: rgba(255,255,255,0.5);
}

.rb-table-scroll tr > th:nth-child(even),
.rb-table-scroll tr > td:nth-child(even),
table.rb-table tr > th:nth-child(even),
table.rb-table tr > td:nth-child(even) {
  background-color: var(--rb-table-column-alt);
}


/* =========================================================
   TABLE HEAD
   ========================================================= */

.rb-table-scroll thead th,
table.rb-table thead th {
  font-weight: 700;
  line-height: 1;
  text-align: center;
}


/* =========================================================
   FIRST COLUMN / PARAMETER NAMES
   ========================================================= */

.rb-table-scroll th:first-child,
.rb-table-scroll td:first-child,
table.rb-table th:first-child,
table.rb-table td:first-child {
  text-align: left;
}

.rb-table-scroll tbody td:first-child,
.rb-table-scroll tbody th:first-child,
table.rb-table tbody td:first-child,
table.rb-table tbody th:first-child {
  font-weight: 700;
}


/* =========================================================
   VALUES
   ========================================================= */

.rb-table-scroll tbody td:not(:first-child),
table.rb-table tbody td:not(:first-child) {
  text-align: center;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

  .rb-table-scroll table,
  table.rb-table {
    min-width: 620px;
    font-size: 14px;
  }

  .rb-table-scroll table caption,
  table.rb-table caption {
    padding: 14px 15px;

    font-size: 16px;
    line-height: 1;
  }

  .rb-table-scroll th,
  .rb-table-scroll td,
  table.rb-table th,
  table.rb-table td {
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1;
  }

}


/* =========================================================
   HORIZONTAL SCROLLBAR
   ========================================================= */

.rb-table-scroll::-webkit-scrollbar {
  height: 6px;
}

.rb-table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.rb-table-scroll::-webkit-scrollbar-thumb {
  background: var(--rb-table-border);
  border-radius: 999px;
}

/* Woo objednávky mají navíc opakování nákupu a odstoupení: na mobilu
   ponechat údajům celou šířku, cenu a akce přesunout do samostatného řádku. */
@media screen and (max-width: 767px) {
  .order-item .order-inner { flex-wrap: wrap; }
  .order-item .order-inner > .grow { flex-basis: 100%; min-width: 0; }
  .order-item .rb-order-actions { width: 100%; justify-content: flex-end; }
  .order-item .rb-order-actions .s-price { margin-right: auto; }
}

/* CF7 vkládá kolem odesílacího tlačítka odstavec; tlačítko má stejně
   jako přímý grid child ve Webflow vyplnit celý přidělený sloupec. */
#Contact-Form .grid._2 > p > .wpcf7-submit { width: 100%; }

/* Produktové story karty — barvy CMS publikace 25. 9. 2026. */
.section.bottom-only .rb-story-color-1 { background-color:var(--salmon--200); }
.section.bottom-only .rb-story-color-2 { color:var(--salmon--200); }
.section.bottom-only .rb-story-color-3 { border-color:var(--salmon--200); }
.section.bottom-only .rb-story-color-4 { color:var(--salmon--100); }
.section.bottom-only .rb-story-color-5 { background-color:var(--lamb--200); }
.section.bottom-only .rb-story-border-lamb { border-color:var(--lamb--200); }
.section.bottom-only .rb-story-ink-lamb { color:var(--lamb--50); }
/* Čtyři parametry sáčků: páry balení a rozměrů, bez osamocené čtvrté karty. */
@media screen and (max-width: 479px) {
  .section.bottom-only .rb-story-pack-specs .sub-card-item {
    min-width: 50%;
    max-width: 50%;
  }
}
/* Nativní Woo formuláře pro guest účet/reset v existujícím Webflow shellu. */
.rb-account-guest #customer_login { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-l); }
.rb-account-guest #customer_login::before, .rb-account-guest #customer_login::after { display: none; }
.rb-account-guest #customer_login > div { width: auto; float: none; min-width: 0; }
.rb-account-guest .woocommerce form { border: 0; padding: 0; margin: var(--size-s) 0 0; }
.rb-account-guest .woocommerce form .form-row { padding: 0; margin-bottom: var(--size-s); }
.rb-account-guest .woocommerce form input.input-text { width: 100%; border: 2px solid var(--rb--purple-700-15); background: var(--basic--white); color: var(--rb--purple-900); border-radius: 30px; height: 56px; padding: 10px 25px; font-size: 18px; line-height: 1; }
.rb-account-guest .woocommerce form input.input-text:focus { border-color: var(--rb--orange); outline: none; }
.rb-account-guest .woocommerce button.button { background: var(--rb--orange); color: var(--rb--purple-900); border-radius: var(--size-m); min-height: 56px; padding: var(--size-s) var(--size-m); font-size: 18px; font-weight: 700; }
.rb-account-guest .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { margin-left: var(--size-s); }
.rb-account-guest .woocommerce .show-password-input { top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) {
  .rb-account-guest #customer_login { grid-template-columns: minmax(0, 1fr); }
  .rb-account-guest .woocommerce form input.input-text { height: 46px; padding: 10px 15px; font-size: 16px; }
  .rb-account-guest .woocommerce button.button { min-height: 46px; font-size: 16px; }
  .rb-account-guest .card-inner { padding-left: var(--size-xs); padding-right: var(--size-xs); }
}

/* Story pamlsků — přesné palety makety. */
.section.bottom-only .rb-story-beef-bg { background-color: var(--beef--200); }
.section.bottom-only .rb-story-lamb-bg { background-color: var(--lamb--200); }
.section.bottom-only .rb-story-game-bg { background-color: var(--game--200); }
/* Maketní mobilní selecty; globální Woo select pravidlo přebíjelo .input. */
@media (max-width: 767px) {
  #rawbark-comparator select.input.w-select {
    height: 46px;
    padding: 10px 15px;
    font-size: 16px;
  }
}
/* Skutečný seznam má i delší měsíce; na úzkém mobilu nesmí text ořezat šipka. */
@media (max-width: 479px) {
  #rawbark-comparator select.input.w-select[id$="-day"],
  #rawbark-comparator select.input.w-select[id$="-month"],
  #rawbark-comparator select.input.w-select[id$="-year"] { padding-inline: 10px; }
  #rawbark-comparator select.input.w-select[id$="-day"] { flex: .75; }
  #rawbark-comparator select.input.w-select[id$="-month"] { flex: 1.25; }
}
/* Chevron selectů (sekce 4) — mobilní padding výš ho jinak přepíše. */
@media (max-width: 767px) {
  #rawbark-comparator select.input.w-select { --rb-chevron-right: 15px; padding-right: 39px; }
}
@media (max-width: 479px) {
  #rawbark-comparator select.input.w-select[id$="-day"],
  #rawbark-comparator select.input.w-select[id$="-month"],
  #rawbark-comparator select.input.w-select[id$="-year"] { --rb-chevron-right: 9px; padding-right: 29px; background-size: 14px 14px; }
}
/* Woo věková kategorie navíc patří na mobilu pod datum, ne přes nápovědu. */
@media (max-width: 479px) {
  #rawbark-comparator #age-category-container { position: static; align-self: center; }
  #rawbark-comparator #age-category-badge { margin: 0; }
}

/* Vlastní 404 — stejný design systém, čitelné návratové cesty i na mobilu. */
.section.hero.rb-not-found-hero { padding-top: max(220px, 21vh); padding-bottom: 100px; }
.rb-not-found-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: var(--size-l); }
.rb-not-found-layout .perex { max-width: 640px; }
.rb-not-found-actions { flex-wrap: wrap; justify-content: flex-start; }
.rb-not-found-art { position: relative; display: flex; justify-content: center; align-items: center; color: var(--basic--white); min-height: 280px; }
.rb-not-found-art > span { font-size: clamp(140px, 18vw, 300px); font-weight: 800; line-height: 1; opacity: .2; }
.rb-not-found-art > .mi-icon { position: absolute; font-size: clamp(70px, 8vw, 130px); color: var(--rb--orange); transform: rotate(-15deg); }
@media screen and (max-width: 991px) {
  .section.hero.rb-not-found-hero { padding-top: 180px; }
  .rb-not-found-layout { grid-template-columns: minmax(0, 1fr); }
  .rb-not-found-art { display: none; }
}
@media screen and (max-width: 479px) {
  .section.hero.rb-not-found-hero { padding-top: 130px; padding-bottom: 70px; }
  .rb-not-found-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .rb-not-found-actions .btn { justify-content: center; }
}
/* HP kategorie (dlaždice pod sliderem produktů).
 * Desktop a tablet dle makety (publikace 14. 10. 2026: první dlaždice 4:3,
 * malé `.tablet-fix`) — vlastní kompaktní desktop z 13. 10. zrušen na pokyn
 * kolegy. Celé dlaždice zůstávají klikací (a.rb-hp-cat-link, hover výš).
 * Tabletová pravidla publikace jsou tu ohraničená na 768–991 px: v site.css
 * (≤ 991) by kaskádou změnila i mobil, který zůstává náš:
 * Mobil (≤ 767): Pamlsky přes oba sloupce, vysoké jako malá dlaždice;
 * pod nimi Kosmetika + Ostatní, dole Outdoor + Výživa — vše 1:1. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .card.position-1.ratio-4-3 { aspect-ratio: auto; }
  .btn.category-btn { order: 9999; }
  .category-hp-img { margin-bottom: -10%; margin-left: -15%; padding-top: 20px; }
  .category-hp-img.tablet-fix {
    aspect-ratio: 1;
    object-position: 0% 50%;
    height: auto;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
    position: static;
  }
}
@media screen and (max-width: 767px) {
  .home .grid.products { container-type: inline-size; grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; min-height: 0; }
  .home .grid.products > .card { aspect-ratio: 1; }
  .home #w-node-_80baf402-d13d-7f9d-0aa0-60b95acb31ea-e9ad6de8 { grid-area: 1 / 1 / 2 / 3; aspect-ratio: auto; height: calc((100cqw - 15px) / 2); }
  .home #w-node-b691a913-8f76-812e-5fb9-a7964f3b787a-e9ad6de8 { grid-area: 2 / 1 / 3 / 2; }
  .home #w-node-_0d2e1a96-0f84-52fe-951c-9f23dbc4d806-e9ad6de8 { grid-area: 2 / 2 / 3 / 3; }
  .home #w-node-_9cefcd00-b7ad-b820-0ad6-4257598756d9-e9ad6de8 { grid-area: 3 / 1 / 4 / 2; }
  .home #w-node-c9f5dae7-651d-1a46-22a4-09deb7f28917-e9ad6de8 { grid-area: 3 / 2 / 4 / 3; }
}
@media screen and (max-width: 767px) {
  body.woocommerce-edit-account .account-grid-2 { width: 100%; }
  .account-wrapper .h-flex.stars { flex-direction: row; flex-wrap: nowrap; }
  .account-wrapper .review-details-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; }
  .account-wrapper .review-details-grid > .product-line-link { grid-area: auto !important; }
  .account-wrapper .review-details-grid > .stars { width: max-content; justify-self: start; }
  .rb-breeding-video { height: auto; aspect-ratio: 16 / 9; }
}

/* HP hero slider (pokyn #51) — náš cross-fade ve webflow-lite.js vytahuje
   neaktivní slajdy z toku (position: absolute), takže `.slider.hp`
   (justify-self: center, šířka auto) se smrštil na šířku aktivní fotky
   a při každém přepočtu layoutu (např. otevření modalu s videem schová
   posuvník) se mohl usadit ještě menší; bez načtené fotky až na 0.
   Webflow má slajdy v toku a slider zabírá celý sloupec (max-width z site.css),
   naměřeno na rawbark.webflow.io: 1440 → 812 px, 800 → 700 px, 500 → 423 px.
   Mask je flex položka slideru, takže se smršťuje stejně — šířku drží taky. */
.slider.hp,
.slider.hp > .w-slider-mask { width: 100%; }

/* Náhled videa v hero (pokyn #52) — play tlačítko uprostřed smyčky.
   `.play-video` je z detailu produktu (tam ho středí flex rodiče), tady
   leží přes <video>, tak ho středíme i svisle. Náhled je dropdown na hover
   s mezerou `--size-xs` nad tlačítkem „Přehrát video" — při přejetí myší
   mezerou by se zavřel (i na Webflow), `::after` ji proto překlene. */
.hint-item-navigation.video .play-btn.play-video {
  z-index: 1;
  inset: 0;
  margin: auto;
}
.hint-item-navigation.video::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(var(--size-xs) + 2px);
}

/* Granule na míru: mobilní dokončení 30. 9. 2026.
   Maketní w-node ID umísťují důvody do čtyř sloupců i na mobilu;
   scoped reset zachovává ID i desktopové schodiště. */
@media (max-width: 991px) {
  .rb-granule-benefits .grid._7-duvodu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: var(--size-m);
    margin-top: var(--size-m);
  }
  .rb-granule-benefits .grid._7-duvodu > [id] {
    /* Přepis exportovaných ID pravidel jen v tomto mobilním obalu. */
    grid-area: auto !important;
    min-width: 0;
  }
  .rb-granule-benefits .grid._7-duvodu > .card > .card-inner {
    padding: var(--size-s-m);
  }
  .rb-granule-benefits .rb-granule-experience > .card-inner {
    padding: var(--size-m);
  }
  .rb-granule-benefits .grid.prod-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--size-m);
    padding-bottom: 0;
  }
  .rb-granule-benefits .prod-details > .image-wrapper {
    grid-area: 1 / 1 / 2 / -1;
    justify-self: center;
    align-items: center;
    width: 100%;
    max-width: 540px;
  }
  .rb-granule-benefits .prod-details > .image-wrapper > img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .rb-granule-benefits .prod-details > .info-line {
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--size-m);
    min-width: 0;
    padding-bottom: 0;
  }
  .rb-granule-benefits .line-dashed-granule { display: none; }
}
@media (max-width: 479px) {
  .rb-granule-benefits .grid._7-duvodu,
  .rb-granule-benefits .grid.prod-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .rb-granule-benefits .rb-granule-experience > .card-inner {
    padding: var(--size-s-m);
  }
}

/* ------------------------------------------------------------------------ *
 * RB-tooltip (assets/webflow/js/rb-tooltip.js) — náš tooltip pro Webflow
 * „info" dropdowny označené `data-rb-tooltip`. Původní seznam se na místě
 * nikdy neukazuje (přetékal z okna), obsah jde do jedné plovoucí bubliny,
 * která převezme vizuální třídy seznamu (pozadí, odsazení, barva) — tady
 * jen přebíjíme jejich umístění a šířku z Webflow (width 200 %, margin-left
 * −50 %, bottom …), aby se bublina vešla do okna.
 * ------------------------------------------------------------------------ */
.w-dropdown[data-rb-tooltip] > .w-dropdown-list,
.w-dropdown[data-rb-tooltip] > .w-dropdown-list.w--open {
  display: none !important;
}
.w-dropdown[data-rb-tooltip] > .w-dropdown-toggle {
  cursor: help;
  -webkit-tap-highlight-color: transparent;
}
.rb-tooltip.rb-tooltip {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 1000; /* nad hlavičkou (12), pod postranním košíkem (1001) a modaly */
  width: max-content;
  max-width: min(380px, calc(100vw - 16px));
  margin: 0;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: none; /* u kurzoru nesmí bublina „chytat" myš a blikat */
  opacity: 0;
  transition: opacity .15s ease;
  will-change: transform;
}
.rb-tooltip.rb-tooltip.is-visible { opacity: 1; }
.rb-tooltip.rb-tooltip.is-tap { pointer-events: auto; }
.rb-tooltip[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rb-tooltip.rb-tooltip { transition: none; }
}

/* ------------------------------------------------------------------------ *
 * CookieScript — plovoucí ikonka vlevo dole schovaná (publikace 12. 10. 2026).
 * Nastavení cookies otevírá odkaz „Nastavení cookies" v patičce
 * (footer-content.php, webflow-lite.js §12). Ikonku vkládá CookieScript
 * (jejich dashboard sdílí i produkce), proto ji schováváme tady.
 * ------------------------------------------------------------------------ */
#cookiescript_badge { display: none !important; }

/* Menu účtu — pes bez fotky i bez AI ilustrace plemene: ikona v kroužku
   o velikosti `.profile-photo`, ať tlačítko nepřetéká přes celý řádek. */
.rb-dog-pack-fallback { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background-color: var(--rb--orange-light); }

/* ------------------------------------------------------------------------ *
 * Newsletter — úspěch (shared/newsletter.php, maketa HP 12. 10. 2026).
 * Plugin JS (rawbark-ai-emails) po odeslání jen přidá `.is-success` na
 * `.rawbark-nl-form__msg`; jako Webflow pak schováme pole a ukážeme box
 * `.success-message.w-form-done`. Text v `__msg` zůstává pro čtečky.
 * ------------------------------------------------------------------------ */
.rb-wf-newsletter:has(.rawbark-nl-form__msg.is-success) > .v-flex { display: none; }
.rb-wf-newsletter .rawbark-nl-form__msg.is-success {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.w-form:has(.rawbark-nl-form__msg.is-success) > .w-form-done { display: block; }
/* Double opt-in (15. 10. 2026): po odeslání „Ještě jeden krok!" (.is-pending),
 * po kliknutí na odkaz z e-mailu /newsletter/?odber=confirmed → .rb-nl-done. */
.rb-wf-newsletter:has(.rawbark-nl-form__msg.is-pending) > .v-flex { display: none; }
.rb-wf-newsletter .rawbark-nl-form__msg.is-pending {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rb-nl-pending { display: none; }
.w-form:has(.rawbark-nl-form__msg.is-pending) > .rb-nl-pending { display: block; }
.w-form:has(.rawbark-nl-form__msg.is-pending) > .rb-nl-invalid { display: none; }
.rb-nl-done > .rb-wf-newsletter { display: none; }
.rb-nl-done > .w-form-done { display: block; }
.rb-nl-invalid { margin-bottom: var(--size-s); }
.rb-nl-invalid .mi-icon.error { flex: none; }

/* ------------------------------------------------------------------------ *
 * Hmotnost psa — „kg" uvnitř pole vpravo, číslo se píše zprava před ním
 * (zadání kolegy 13. 10. 2026). Karta psa: obal .rb-input-unit
 * (account/dog-accordion.php). Konfigurátor (plugin rawbark-comparator,
 * sdílený s produkcí → markup needitujeme): wrapper #weight přes :has().
 * Svislá poloha = výška .input (56 / 50 / 46 px), vodorovná = padding .input.
 * ------------------------------------------------------------------------ */
.rb-input-unit { position: relative; display: flex; width: 100%; }
#rawbark-comparator .input-wrapper:has(> #weight) { position: relative; }
.rb-input-unit > .input,
#rawbark-comparator #weight {
  text-align: right;
  padding-right: 60px;
}
.rb-input-unit::after,
#rawbark-comparator .input-wrapper:has(> #weight)::after {
  content: "kg";
  position: absolute;
  top: 0;
  right: 27px; /* 25 px padding .input + 2 px rámeček */
  display: flex;
  align-items: center;
  height: 56px;
  color: var(--rb--purple-900);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  opacity: .5;
  pointer-events: none;
}
/* Číselný vstup konfigurátoru: šipky prohlížeče by se vklínily mezi číslo a „kg". */
#rawbark-comparator #weight { -moz-appearance: textfield; }
#rawbark-comparator #weight::-webkit-inner-spin-button,
#rawbark-comparator #weight::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media screen and (max-width: 991px) {
  .rb-input-unit > .input,
  #rawbark-comparator #weight { padding-right: 52px; }
  .rb-input-unit::after,
  #rawbark-comparator .input-wrapper:has(> #weight)::after { right: 22px; height: 50px; font-size: 16px; }
}
@media screen and (max-width: 767px) {
  .rb-input-unit::after,
  #rawbark-comparator .input-wrapper:has(> #weight)::after { height: 46px; }
}
@media screen and (max-width: 479px) {
  .rb-input-unit > .input,
  #rawbark-comparator #weight { padding-right: 46px; }
  .rb-input-unit::after,
  #rawbark-comparator .input-wrapper:has(> #weight)::after { right: 17px; }
}

/* ------------------------------------------------------------------------ *
 * Detail produktu — recenze, když produkt ještě žádné nemá
 * (single.php `.rb-no-reviews`, zadání kolegy 13. 10. 2026): karta s pozvánkou
 * přes všechny 3 sloupce bez spodního paddingu sticky obalu, prázdný sloupec
 * seznamu pryč, odstavec pozvánky max. 600 px na střed.
 * ------------------------------------------------------------------------ */
.grid._3.reviews.rb-no-reviews > .sticky-wrapper {
  grid-column: 1 / -1;
  padding-bottom: 0;
}
.grid._3.reviews.rb-no-reviews > :not(.sticky-wrapper) { display: none; }
.grid._3.reviews.rb-no-reviews > .sticky-wrapper > .card,
.grid._3.reviews.rb-no-reviews .card.in-card { width: 100%; }
.grid._3.reviews.rb-no-reviews .card.in-card p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------------ *
 * Košík — dárek ke granulím (functions/cart-gift.php). V site.css stojí
 * mobilní `.gift-icon { margin-left: 0 }` (@media ≤ 479 px) PŘED základním
 * pravidlem s `margin-left: 5px`, takže prohrává; ve Webflow je pořadí opačné.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 479px) {
  .gift-wrapper .gift-icon { margin-left: 0; }
}

/* Košík: mezisoučet na jeden řádek — „1 719,96 Kč" se na 1440/768 lámal za
   tisíci (WC dává obyčejnou mezeru), Lars 16. 10. Jednotková cena smí na
   telefonu na dva řádky („215 Kč / kg"): jako nowrap by v 6sloupcovém gridu
   zúžila sloupec množství a pilulka by přetekla na mezisoučet. */
.woocommerce-cart-form .cart-product-grid .price { white-space: nowrap; }
@media screen and (max-width: 479px) {
  .woocommerce-cart-form .cart-product-grid .price._500 { white-space: normal; }
}

/* Dárek k objednávce — hlavička, varování o alergii, trvalý dárek (pokyny #54). */
.gift-wrapper .rb-gift-head { margin-bottom: var(--size-xs); flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.gift-wrapper .rb-gift-head-icon { color: var(--game--500); font-size: 20px; line-height: 1; }
.gift-wrapper .rb-gift-head .note,
.gift-wrapper .rb-gift-permanent .note { opacity: .6; }
.gift-wrapper .rb-gift-allergic { cursor: not-allowed; }
.gift-wrapper .rb-gift-allergic .text-label {
  pointer-events: none;
  border-color: transparent;
  height: auto;
  min-height: 46px;
  padding-top: 7px;
  padding-bottom: 7px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}
.gift-wrapper .rb-gift-allergic .rb-gift-name { opacity: .5; }
.gift-wrapper .rb-gift-warn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--beef--500);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
}
.gift-wrapper .rb-gift-warn .mi-icon { font-size: 14px; line-height: 1; }
.gift-wrapper .rb-gift-permanent {
  margin-top: var(--size-xs);
  padding-top: var(--size-xs);
  border-top: 1px dashed var(--rb--purple-700-15);
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.gift-wrapper .rb-gift-permanent .note strong { font-weight: 700; }
.gift-wrapper .rb-gift-dog-photo { width: 32px; height: 32px; padding: 0; flex: none; }
.gift-wrapper .rb-gift-dog-photo .profile-photo { width: 32px; height: 32px; object-fit: cover; }

/* Zmínka „ke každé objednávce granulí dárek" (shared/granule-gift-note.php). */
.rb-gift-note { flex-direction: row; align-items: center; flex-wrap: nowrap; }
.rb-gift-note .mi-icon { color: var(--game--500); font-size: 20px; line-height: 1; flex: none; }
.rb-gift-note .note { opacity: .85; }
.rb-gift-note.white .note { color: #fff; }

/* ------------------------------------------------------------------------ *
 * Úrovně Tlapičkového programu (functions/webflow-paw-levels.php).
 * Webflow kreslí jen „Novou tlapičku" (`new-paw`) a bere barvy z proměnných
 * --new-paw--100…900 (100 pozadí karet/panelu, 200 mince, 300–400 progress
 * bar a kroužek fotky, 600 tlapka, 900 text). Obal `rb-paw-<úroveň>` je
 * přepíše paletou z ikony grafika (barvy vytažené z SVG, světlé tóny
 * dopočítané) — zadání kolegy 14. 10. 2026.
 * ------------------------------------------------------------------------ */
.rb-paw-verna {
  --new-paw--100: #dcefe2; --new-paw--200: #a5d2b6; --new-paw--300: #73bc8b;
  --new-paw--400: #3fa15a; --new-paw--600: #216a36; --new-paw--900: #001d02;
}
.rb-paw-bronzova {
  --new-paw--100: #fde3d2; --new-paw--200: #f9bd95; --new-paw--300: #f79659;
  --new-paw--400: #f4752a; --new-paw--600: #c05b27; --new-paw--900: #4e0f00;
}
.rb-paw-stribrna {
  --new-paw--100: #e6ebf0; --new-paw--200: #d4dcdf; --new-paw--300: #a5b9d3;
  --new-paw--400: #6c8ea8; --new-paw--600: #4c6883; --new-paw--900: #13273b;
}
.rb-paw-zlata {
  --new-paw--100: #ffebca; --new-paw--200: #ffdd9e; --new-paw--300: #fec663;
  --new-paw--400: #fbb034; --new-paw--600: #c48227; --new-paw--900: #420e35;
}
.rb-paw-kralovska {
  --new-paw--100: #f3dcec; --new-paw--200: #ffdd9e; --new-paw--300: #fbb034;
  --new-paw--400: #a44a8b; --new-paw--600: #721758; --new-paw--900: #200016;
}
/* Název úrovně u fotky v menu: Nová má v návrhu lamb-400, ostatní tón 400 palety. */
[class*="rb-paw-"]:not(.rb-paw-nova) .user-badge.new-paw { color: var(--new-paw--400); }
/* Zamčené úrovně v přehledu: jako dřív (Webflow `.verna.unavailable`) —
   šedé, ale plně viditelné a v pořadí, ne průhledné na konci. */
.paw-program-award.unavailable[class*="rb-paw-"]:not(.rb-paw-nova) { opacity: 1; order: 0; }
.badge-icon, .badge-proccess .paw-image { object-fit: contain; }
/* Královská ikona má nad medailí korunku (SVG 130 × 164, medaile = spodní
   čtverec 130 × 130). Medaile má stejnou velikost a polohu jako ostatní
   ikony (box zůstává 1:1), korunka přečnívá nahoru: šířka 100 %, výška podle
   poměru a posun o výšku korunky (33,97 / 130,39 = 26,05 % šířky). */
img.badge-icon[src$="/paw-levels/kralovska.svg"],
.badge-proccess img.paw-image[src$="/paw-levels/kralovska.svg"] {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 130.39 / 163.86;
  margin-top: -26.05%;
}
/* Kruh kolem fotky v menu = skutečný postup k další úrovni (Webflow kreslí
   napevno půlkruh přes linear-gradient). Začíná nahoře, jde po směru hodin;
   --rb-progress nastavuje navbar.php, bez něj zůstává půlkruh z návrhu. */
.badge-proccess.new-paw[style*="--rb-progress"] {
  background-image: conic-gradient(var(--new-paw--400) var(--rb-progress), var(--rb--purple-700-15) 0);
}
/* „Můj postup ve smečce" / Tlapičkový program: pás úrovní přetéká
   `.awards-wrapper` (overflow:auto), ale padding-right flex řádku se do
   scrollu nezapočítá — Královská po doscrollování lepila na okraj. Řádek
   roztáhneme na obsah a vpravo dáme stejné odsazení jako vlevo. */
.h-flex.horizontal.paws { width: max-content; min-width: 100%; padding-right: 30px; }
@media screen and (max-width: 991px) {
  .h-flex.horizontal.paws { padding-right: 15px; }
}
/* Prolínací slider v kartě (`.slider.in-card`, data-animation="cross" —
   misky v „7 důvodů proč" na LP granulí, granule-cta.php). webflow-lite.js
   nechává v toku jen aktivní slajd, takže mask měl výšku aktuální fotky
   a karta při každém přepnutí poskočila. Webflow drží mask na výšce
   nejvyššího slajdu — slajdy proto skládáme do jedné buňky gridu. */
.slider.in-card[data-animation="cross"] > .w-slider-mask {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  max-height: inherit; /* `.slider.in-card._50` má max-height 50vh — grid by ho jinak přerostl */
}
.slider.in-card[data-animation="cross"] > .w-slider-mask > .w-slide {
  grid-area: 1 / 1;
  position: relative !important; /* inline styl z webflow-lite.js */
  height: auto;
}
/* Detail objednávky (account/order-detail.php): ikona/obrázek a text řádku
   zůstávají vedle sebe i u delšího textu (výdejní místo, vlastnosti položky)
   — bázový .h-flex zalamuje a ikona by skočila nad text. Na mobilu maketa
   obrázek nad text zalamuje záměrně (víc místa pro název), tam necháváme. */
@media (min-width: 768px) {
  .order-product-item .product-line-link > .h-flex { flex-wrap: nowrap; }
  .order-product-item .product-line-link > .h-flex > :last-child { min-width: 0; }
  .order-product-item .product-img-wrapper { flex: 0 0 auto; }
}
/* Menu účtu: fotka psa vede na jeho kartu v Moje smečka (navbar.php) —
   při najetí poloprůhledný bílý obrys jako u inputů (.input:hover v site.css)
   a přes ztmavenou fotku bílé ozubené kolečko (nastavení psa). */
.dog-pack-photo {
  position: relative;
  display: block;
  border-radius: 50%;
  outline: 0 solid #fff6;
  outline-offset: 0;
  transition: outline-width .15s ease;
}
.dog-pack-photo::after {
  content: "settings";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #28001473;
  color: var(--basic--white);
  font-family: Material Icons Round, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.dog-pack-photo:hover,
.dog-pack-photo:focus-visible { outline: 8px solid #fff6; } /* celý zápis — normalize má `a:hover { outline: 0 }` */
.dog-pack-photo:hover::after,
.dog-pack-photo:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .dog-pack-photo, .dog-pack-photo::after { transition: none; }
}

/* ------------------------------------------------------------------------ *
 * Sestavit krmivo, krok 1 — uložení pejsci (zadání kolegy 14. 10. 2026).
 * Markup je ze sdíleného pluginu rawbark-comparator (templates/webflow/
 * step-1-name.php), proto jen styly v šabloně:
 *  - „Jak se Váš mazlíček jmenuje?" a „Nebo vyberte uloženého pejska" tvoří
 *    jednu kartu (mezera mezi kartami pryč, rohy na styku rovné),
 *  - nadpis uložených psů ve velikosti h4,
 *  - pes = bílý chip jako filtr „Vhodné pro" na sortimentu (fotka vlevo,
 *    jméno, oranžový rámeček na hover), chipy na střed,
 *  - křížek = kruh stejně velký jako fotka uvnitř chipu, vlastní hover
 *    (červený), aby bylo jasné, kdy pejska vybírám a kdy mažu.
 * ------------------------------------------------------------------------ */
#rawbark-comparator #step-1 > .v-flex:has(> .saved-dogs-section) { gap: 0; }
#rawbark-comparator #step-1 > .v-flex:has(> .saved-dogs-section) > .card.sub:first-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#rawbark-comparator #step-1 .saved-dogs-section {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#rawbark-comparator #step-1 .saved-dogs-section > .card-inner.s { padding-top: 0; }
#rawbark-comparator .saved-dogs-header h3 { font-size: 24px; line-height: 1.2; }
@media screen and (max-width: 991px) {
  #rawbark-comparator .saved-dogs-header h3 { font-size: 20px; }
}
#rawbark-comparator .saved-dogs-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-xs);
}
#rawbark-comparator .saved-dog-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 8px 0 0;
  border-radius: 30px;
  background-color: var(--basic--white);
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .15s ease;
}
#rawbark-comparator .saved-dog-card:has(.saved-dog-link:hover),
#rawbark-comparator .saved-dog-card:has(.saved-dog-link:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--rb--orange);
}
/* Fotka leží absolutně vlevo v chipu (jako na sortimentu, site.css),
   jméno proto odsazujeme o její šířku + mezeru. */
#rawbark-comparator .saved-dog-card .saved-dog-link {
  padding: 15px 12px 15px 60px;
  border: 0;
  color: var(--rb--purple-900);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
#rawbark-comparator .saved-dog-card .saved-dog-link:hover { color: var(--rb--purple-900); }
@media screen and (max-width: 767px) {
  #rawbark-comparator .saved-dog-card .saved-dog-link { padding-left: 52px; } /* fotka 38 px */
  #rawbark-comparator .saved-dog-card { padding-right: 4px; } /* kolega 21. 10. 2026 */
}
#rawbark-comparator .saved-dog-card .saved-dog-delete {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--basic--100, #f5f4f0);
  color: var(--rb--purple-900);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
#rawbark-comparator .saved-dog-card .saved-dog-delete:hover,
#rawbark-comparator .saved-dog-card .saved-dog-delete:focus-visible {
  background-color: var(--beef--100);
  color: var(--beef--500);
}
@media (prefers-reduced-motion: reduce) {
  #rawbark-comparator .saved-dog-card,
  #rawbark-comparator .saved-dog-card .saved-dog-delete { transition: none; }
}

/* Karty recenzí (/recenze/, detail produktu, účet): spodní padding 30 px
   místo 35 px z .card-inner — dole zbytečně nafouklé (kolega 15. 10. 2026).
   Pod 992 px má .card-inner vlastní menší padding, tam beze změny. */
@media (min-width: 992px) {
  .reviews-wrapper > .card > .card-inner { padding-bottom: 30px; }
}

/* Slider recenzí na /recenze/: texty vedle fotky zarovnané doleva (krátké
   texty vypadají lépe než na střed — kolega 15. 10. 2026, v maketě střed).
   Pod 480 px je fotka nad textem a hero je centrované → tam beze změny. */
@media (min-width: 480px) {
  .slider.recenze .testimonial-card .card-inner.y-center { text-align: left; }
  .slider.recenze .testimonial-card .card-inner.y-center > .align-center { align-self: flex-start; align-items: flex-start; }
  .slider.recenze .testimonial-card .card-inner.y-center .stars { align-self: flex-start; justify-content: flex-start; }
}

/* Křížek u video dialogů (#RB-video, #video na detailu produktu) — zadání
   kolegy 15. 10. 2026. Sedí nad pravým horním rohem karty na tmavém pozadí
   dialogu: bílý křížek, průhledné pozadí; hover = bílé pozadí, tmavě fialový
   křížek. Základ je .btn.s.circle (křížek v ostatních dialozích). */
.modal_card.video { position: relative; }
.modal_card.video > .modal-video-close {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 10px;
  z-index: 2;
  color: var(--basic--white);
  background-color: var(--basic--transparent);
  transition: background-color .2s ease, color .2s ease;
}
/* Desktop: o celou šířku doprava, ať sedí opticky v rohu videa (zadání
   kolegy). Pod 992 px je karta přes celou šířku okna — tam by vyjel ven. */
@media (min-width: 992px) {
  .modal_card.video:not(.auto) > .modal-video-close { right: -46px; }
}
/* Video na výšku (detail produktu, .video.auto) zabírá skoro celou výšku
   okna — nad ním by křížek vyjel z obrazovky, vedle karty je místa dost. */
.modal_card.video.auto > .modal-video-close {
  top: 0;
  bottom: auto;
  left: 100%;
  right: auto;
  margin: 0 0 0 10px;
}
.modal_card.video > .modal-video-close:hover,
.modal_card.video > .modal-video-close:focus-visible {
  color: var(--rb--purple-900);
  background-color: var(--basic--white);
}

/* Otevřený košík (zatmavení + panel) žije uvnitř .cart (z-index 9) — ikonka
   home v navbaru má z-index 10 a prosvítala přes zatmavení. Při otevření
   zvedáme celý .cart nad ostatní prvky navbaru. */
.cart:has(> .w-commerce-commercecartcontainerwrapper.rb-cart-open) { z-index: 1001; }

/* Štítek stavu „Přihlášen" (newsletter v přehledu, chovatelský program
   v nastavení) — tvar .label.unsubscribe („Nepřihlášen"), barvy jemné jako
   „Přihlášen" v pokladně (.status.completed: game-100 / game-500). */
.label.subscribed {
  padding: var(--size-xs) var(--size-s);
  background-color: var(--game--100);
  color: var(--game--500);
  text-align: center;
  letter-spacing: .0125em;
  text-transform: uppercase;
  align-self: flex-start;
}
.label.subscribed:hover { color: var(--game--500); text-decoration: none; }
.label.unsubscribe:hover { color: var(--basic--100); }
/* V hlavičce sekce zůstává štítek vpravo i po zalomení pod dlouhý nadpis (mobil). */
.section-heading > .label:is(.subscribed, .unsubscribe) { margin-left: auto; }

/* Filtr alergenů: prázdný výsledek (functions/allergen-filter.php) — karta přes
   celou šířku .product-list (ta má -15px okraje jako mřížka karet). */
.rb-filter-empty { clear: both; padding: 0 15px 30px; }
.rb-filter-empty > .card { display: block; width: 100%; text-align: center; }
.rb-filter-empty p { margin: 0; }

/* Filtr alergenů: načítání výpisu (sortiment-filter.js). Overlay přes kontejner
   výpisu, tlapky uprostřed jeho viditelné části (top dopočítává JS). Staré karty
   zprůhlední a nejdou kliknout, dokud nepřijde nový výsledek. */
/* Pozor: positioned host se na sortimentu vykresluje NAD plovoucí kartou
   granulí (.hero-product-wrapper, float vedle výpisu) a chytal by jí myš
   (hover tooltipu ceny, klik na „Sestavit krmivo") — kartu proto zvedáme. */
.rb-filter-host { position: relative; }
.hero-product-wrapper { position: relative; z-index: 1; }
.rb-filter-host.rb-filtering { min-height: 180px; }
.product-list > * { transition: opacity .25s ease; }
.product-list.rb-filtering > * { opacity: .3; pointer-events: none; }
.rb-filter-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.rb-filter-host.rb-filtering > .rb-filter-loader {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease;
}
.rb-filter-loader-paws {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 14px;
  color: var(--rb--purple-700);
}
.rb-filter-loader-paws .rb-paw {
  width: 36px;
  height: 36px;
  opacity: .15;
  animation: rb-paw-step 1.2s ease-in-out infinite;
}
/* Tlapky jako stopy — střídavě výš/níž, prsty nahoru. */
.rb-filter-loader-paws .rb-paw:nth-child(1) { --rb-paw-y: 6px; animation-delay: 0s; }
.rb-filter-loader-paws .rb-paw:nth-child(2) { --rb-paw-y: -6px; animation-delay: .2s; }
.rb-filter-loader-paws .rb-paw:nth-child(3) { --rb-paw-y: 6px; animation-delay: .4s; }
@keyframes rb-paw-step {
  0%, 100% { opacity: .15; transform: translateY(var(--rb-paw-y)) scale(.8); }
  35% { opacity: 1; transform: translateY(var(--rb-paw-y)) scale(1.1); }
  60% { opacity: .6; transform: translateY(var(--rb-paw-y)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .rb-filter-loader-paws .rb-paw { animation-duration: 2.4s; }
}

/* Filtr alergenů — „Vhodné pro:" (psi): vždy zarovnané vlevo. .h-flex má
   space-between a po zalomení do víc řádků psy roztahoval po šířce. */
#rb-filtr-alergeny-panel .filter-group-wrapper > .h-flex { justify-content: flex-start; }

/* Obal položky v košíku (drawer, /kosik/) jako odkaz „<obal> (i)" — otevře okno
   výběru obalu (functions/product-design.php, wf-cart.js §4d). Ikona = ta
   u surovin na /sestaveno (.mi-icon.info-s). Odkaz je obyčejný inline text,
   ať sedí na účaří s „Obal:"; ikona je k textu srovnaná vertical-align. */
.rb-obal-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.rb-obal-link .rb-obal-text {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rb-obal-link .mi-icon.info-s {
  display: inline-block;
  margin-left: 4px;
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -.2em;
  transition: color .15s ease;
}
/* V draweru má seznam voleb opacity .55 — ikona musí být tmavší, aby po
   zesvětlení vyšla stejně jako koš (.delete, černá 15 %): .15 / .55 ≈ .27. */
.w-commerce-commercecartitem .rb-obal-link .mi-icon.info-s { color: rgba(0, 0, 0, .27); }
.rb-obal-link:hover { color: var(--rb--purple-700); }
.rb-obal-link:hover .rb-obal-text { text-decoration: none; }
.rb-obal-link:hover .mi-icon.info-s { color: var(--rb--purple-700); }

/* LP Granule na míru: fotka pytle (zadání kolegy 16. 10. 2026; site.css 57.5vh).
   Třídu .granule-image má jen tahle stránka. Tablet/mobil 62.5vh, monitor
   (nad 1680 px) 770 px, notebook 600 px (blok NOTEBOOK níž). */
.granule-image { max-height: 62.5vh; }
@media screen and (min-width: 1681px) {
  .granule-image { max-height: 770px; }
}

/* Lepící lišta „Do košíku" / „Sestavit granule" (produkty i LP granule):
   od notebooku dolů (≤ 1680 px — notebook, tablet, mobil) dosedá karta na
   spodní hranu okna a spodní rohy nemá zaoblené (zadání kolegy 16. 10. 2026).
   Monitor (nad 1680 px) beze změny. */
@media screen and (max-width: 1680px) {
  .add-to-cart-banner .card.add-to-cart {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
/* Mobil: obsah lišty bez spodního paddingu — karta dosedá na hranu okna
   (kolega 21. 10. 2026). */
@media screen and (max-width: 767px) {
  .add-to-cart-banner .card.add-to-cart > .card-inner.s-m { padding-bottom: 0; }
  /* Všechny texty lišty (varianta, cena, s DPH, tlačítko) 14 px — produkty
     i LP granulí (kolega 21. 10. 2026); ikony (.mi-icon/.ms-icon) beze změny. */
  .add-to-cart-banner .card.add-to-cart *:not(.mi-icon):not(.ms-icon) { font-size: 14px; }
  /* „s DPH" za cenou menší (kolega 21. 10. 2026). */
  .add-to-cart-banner .card.add-to-cart .price-wrap [data-rb-buy-price] + div:not(.mi-icon) { font-size: 12px; line-height: 1.35; }
  /* Vybraná varianta („1 ks", „Původní design") se na mobilu neukazuje. */
  .add-to-cart-banner .card.add-to-cart .selected-variant { display: none; }
}
/* Detail produktu: první sekce (galerie + nákup) má na mobilu spodní padding
   jen 60 px místo calc(5vh + 60px) ze site.css (kolega 21. 10. 2026).
   .rb-product-hero je jen na single.php — LP granulí beze změny. */
@media screen and (max-width: 767px) {
  .section.first.rb-product-hero { padding-bottom: 60px; }
}

/* Story bloky (.grid._2.space-5vh.article): site.css (Webflow) na ≤ 991 px
   všem .space-5vh margin nuluje, ale .article mu hned vrací 5vh nahoře i dole
   — od tabletu dolů 0 (kolega 21. 10. 2026), mezery dělá gap rodiče. */
@media screen and (max-width: 991px) {
  .grid._2.space-5vh.article { margin-top: 0; margin-bottom: 0; }
}

/* ==========================================================================
   NOTEBOOK (992–1680 px) — dohoda s kolegou 16. 10. 2026: „monitor" = nad
   1680 px (výchozí desktop), „notebook" = tenhle rozsah. Jen výslovně zadané
   úpravy, všechny v tomhle jednom bloku (docs/webflow-workflow.md).
   ========================================================================== */
@media screen and (min-width: 992px) and (max-width: 1680px) {
  /* LP Granule na míru: fotka pytle max. 600 px (monitor 770 px). */
  .granule-image { max-height: 600px; }
}

/* Akordeony na detailu produktu (i LP granule): odstavce v otevřeném akordeonu
   blíž k sobě — .v-flex má 30 px, kolega chce nanejvýš 5 px (16. 10. 2026).
   FAQ na HP má stejnou strukturu, proto jen body.single-product. */
.single-product .accordion-navigation > .v-flex.max-w-1200 {
  grid-row-gap: 5px;
  row-gap: 5px;
}

/* Fotogalerie (product-lightbox.js) — ovládání v designu šablony (zadání
   kolegy 16. 10. 2026): šipky kolečko 46 px s ikonou .ms-icon jako křížek
   (neaktivní průhledná), křížek jako v dialozích
   (.btn.s.circle + close); barvy všech tří jako křížek, hover prohozené.
   Webflow SVG pozadí ovládání vypnuté. Mobil (< 768 px) šipky nemá (jako
   Webflow) — listuje se tažením. Šipky bez animace ikony (icon-motion.js). */
.w-lightbox-backdrop .w-lightbox-control {
  background-image: none;
  opacity: 1;
}
.w-lightbox-backdrop .w-lightbox-left,
.w-lightbox-backdrop .w-lightbox-right {
  top: 50%;
  bottom: auto;
  width: 46px;  /* = křížek (.btn.s.circle) */
  height: 46px;
  margin-top: -23px;
  border-radius: var(--corner-radius);
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.w-lightbox-backdrop .w-lightbox-left { left: 2vw; }
.w-lightbox-backdrop .w-lightbox-right { right: 2vw; }
/* Všechna tři tlačítka: výchozí jako křížek dialogu (tmavá ikona na šedém),
   hover prohodí barvy (světlá ikona na tmavě fialovém). */
/* .w-lightbox-control navíc kvůli specifičnosti — křížek nese i .btn.s.circle
   (site.css má .btn.s.circle:hover { basic-200 }). */
.w-lightbox-backdrop .w-lightbox-control.w-lightbox-left,
.w-lightbox-backdrop .w-lightbox-control.w-lightbox-right,
.w-lightbox-backdrop .w-lightbox-control.w-lightbox-close {
  background-color: var(--basic--100);
  color: var(--rb--purple-900);
  transition: background-color .25s, color .25s;
}
.w-lightbox-backdrop .w-lightbox-control.w-lightbox-left:hover,
.w-lightbox-backdrop .w-lightbox-control.w-lightbox-right:hover,
.w-lightbox-backdrop .w-lightbox-control.w-lightbox-close:hover {
  background-color: var(--rb--purple-900);
  color: var(--basic--100);
  opacity: 1;
}
.w-lightbox-backdrop .w-lightbox-control.w-lightbox-inactive,
.w-lightbox-backdrop .w-lightbox-control.w-lightbox-inactive:hover {
  background-color: var(--basic--transparent);
  color: var(--rb--purple-700-15);
  opacity: 1;
  pointer-events: none;
  cursor: default;
}
@media (min-width: 768px) {
  .w-lightbox-backdrop .w-lightbox-left,
  .w-lightbox-backdrop .w-lightbox-right { display: flex; }
}
/* Křížek v rohu OKNA (ne obsahu galerie, ten má na ≥ 768 px margin-top 2vh):
   fixed vůči backdropu (má backdrop-filter → je pro fixed potomky containing
   block = celé okno), stejně daleko od horní i pravé hrany. */
.w-lightbox-backdrop .w-lightbox-close {
  position: fixed;
  top: 2vw;
  right: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.w-lightbox-backdrop .w-lightbox-view { cursor: grab; }
.w-lightbox-backdrop .w-lightbox-view:active { cursor: grabbing; }

/* Mobilní logo v hlavičce (≤ 767 px, Rawbark_logo-02 přes <picture> v navbar.php)
   šířka 54 px — zadání kolegy 16. 10. 2026 (site.css: 60 px / 12.5vw). */
@media screen and (max-width: 767px) {
  .brand .rb-logo { width: 54px; }
}

/* Sortiment — velká karta granulí (.hero-card, archive-product.php) na mobilu:
   fotka max. 27.5vh a všechny texty na střed (zadání kolegy 16. 10. 2026). */
@media screen and (max-width: 767px) {
  .hero-card .granule-detail-image { max-height: 27.5vh; }
  .hero-card .card-inner { text-align: center; }
  .hero-card .card-inner .v-flex.gap-s { align-items: center; }
  .hero-card .card-inner .h-flex.align-left { justify-content: center; }
}

/* Fotky zákazníků v recenzích (detail produktu) — odkaz do fotogalerie. */
.rb-review-photo-link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.rb-review-photo-link .review-image { transition: transform .3s ease; }
.rb-review-photo-link:hover .review-image { transform: scale(1.04); }

/* Objednat znovu — karta nalezeného pejska (zadání kolegy 19. 10. 2026):
   fotka | jméno + štítek receptury (jako Moje smečka) | tlačítko. Vyvážené
   vnitřní okraje; je-li karta užší než 420 px (mobil, ale i úzký sloupec na
   tabletu), tlačítko přes celou šířku pod obsahem — podle šířky KARTY. */
.rb-oa-dog { container-type: inline-size; display: block; }
.rb-oa-dog-inner {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--size-s);
  row-gap: var(--size-s);
  padding: 20px 30px; /* zadání kolegy 19. 10.: nahoře/dole 20, po stranách 30 */
}
@media screen and (max-width: 767px) {
  .rb-oa-dog-inner { padding: 20px var(--size-s); }
}
.rb-oa-dog-btn.btn { border-radius: 15px; }
.rb-oa-dog-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--basic--100);
}
.rb-oa-dog-photo .profile-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-oa-dog-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.rb-oa-dog-text .heading-4 { overflow-wrap: anywhere; }
/* .recepture-label má v site.css margin -5px (pro řádek v kartě smečky) — tady ho nechceme. */
/* Štítek opticky zarovnaný se jménem: o 5 px doleva (vnitřní odsazení pilulky). */
.rb-oa-dog-text .recepture-label { margin: 0 0 0 -5px; }
@container (max-width: 420px) {
  .rb-oa-dog-inner { grid-template-columns: 56px minmax(0, 1fr); }
  .rb-oa-dog-photo { width: 56px; height: 56px; }
  .rb-oa-dog-btn { grid-column: 1 / -1; justify-content: center; }
}

/* Popisek vedle checkboxu/přepínače je klikací (webflow-lite.js) — kurzor. */
.rb-check-text { cursor: pointer; user-select: none; }
.rb-check-text a { cursor: pointer; }

/* Obnovení hesla (page.php + woocommerce/myaccount/form-lost-password.php). */
.rb-lost-password-page .card.bgr-white { margin-bottom: 5vh; }
.rb-lost-password .rb-lost-password-intro { text-align: center; }
/* reCAPTCHA plugin vkládá za widget <br>; ten i skrytý input by ve flexu
   zabíraly mezeru navíc. */
.rb-lost-password .card.sub br,
.rb-lost-password .card.sub input[type="hidden"] { display: none; }
.rb-lost-password .input-wrapper { width: 100%; }
/* .input má flex: 1 (do řádku) — ve sloupci by mu flex-basis 0 sebral výšku. */
.rb-lost-password .input { flex: none; }
.rb-lost-password button.btn {
  align-self: center;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.rb-lost-password .g-recaptcha { align-self: center; }

/* Slidery recenzí (testimonials-slider — HP, /sestaveno, LP granule): mezery
   ve sloupci karty 20 px (site.css 30 px; mobil zůstává 15). Odkaz na produkt
   recenze nad textem (shared/testimonials.php) — prostý fialový odkaz. */
@media screen and (min-width: 768px) {
  .testimonial-slide .card-inner > .v-flex { row-gap: 20px; grid-row-gap: 20px; }
}
.rb-testimonial-product {
  align-self: flex-start;
  color: var(--rb--purple-700);
  font-weight: 700;
}
.rb-testimonial-product:hover { color: var(--rb--purple-900); }

/* Jak to funguje — jednotná tlačítka (zadání kolegy 19. 10. 2026): fialový
   text, průhledné pozadí, oranžový obrys; hover = oranžové pozadí. */
.btn.outlined.rb-hiw-btn {
  background-color: var(--basic--transparent);
  outline-color: var(--rb--orange);
  color: var(--rb--purple-900);
}
.btn.outlined.rb-hiw-btn:hover {
  background-color: var(--rb--orange);
  outline-color: var(--rb--orange);
  color: var(--rb--purple-900);
}

/* Přehled → Moje smečka: pod jménem štítky stav + receptura (místo srdíčka
   a pohlaví). .info-label/.recepture-label mají margin -5px pro řádek v kartě
   smečky — tady v polaroidu bez něj, zalamují se na střed. */
/* Jméno a štítky na jednom řádku na střed, zalomí se až když se nevejdou. */
.rb-pack-name {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  row-gap: 5px;
  text-align: center;
}
.rb-pack-name > .info-label,
.rb-pack-name > .recepture-label { margin: 0; }

/* Moje smečka — vlastní posuvník pásu psů (pack-scrollbar.js): 15 px vysoký,
   7,5 px od spodku a boků béžové karty (.card.sub, host má padding 15 → −7,5),
   15 px od tlačítek. Ukáže se při najetí do béžové karty s 50% průhledností,
   plně neprůhledný až při najetí na jezdec / při tažení. */
.rb-pack-bar {
  position: relative;
  height: 15px;
  margin: 0 -7.5px -7.5px; /* 7,5 px od boků/spodku béžové karty; 15 px od tlačítek dává spodní padding karty psa */
  border-radius: 15px;
  opacity: 0;
  transition: opacity .2s ease;
  touch-action: none;
  cursor: pointer;
}
.rb-pack-bar.is-off { display: none; }
/* Poslední pes nemá na konci pásu lepit na okraj — 20 px místa navíc
   (margin posledního prvku se do posuvné oblasti nepočítá; ::after 5 px
   + gap 15 px = 20 px). */
.pack-wrapper > .h-flex.horizontal.stretch.gap-s::after { content: ""; flex: 0 0 5px; }
@media screen and (max-width: 767px) {
  .pack-wrapper > .h-flex.horizontal.stretch.gap-s::after { flex-basis: 10px; } /* gap tu je 10 px */
}
.card.sub:hover .rb-pack-bar,
.rb-pack-bar.is-dragging { opacity: 1; }
.rb-pack-bar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 15px;
  background-color: var(--rb--purple-700);
  opacity: .5;
  cursor: grab;
  transition: opacity .15s ease;
}
.rb-pack-bar-thumb:hover,
.rb-pack-bar.is-dragging .rb-pack-bar-thumb { opacity: 1; }
.rb-pack-bar.is-dragging .rb-pack-bar-thumb { cursor: grabbing; }
/* Tablet a níž (dotyková zařízení): bez vlastního posuvníku — posouvá se prstem. */
@media screen and (max-width: 991px), (hover: none) {
  .rb-pack-bar { display: none !important; }
}
/* Bílý rámeček polaroidu napříč breakpointy 1,25vh 1,25vh 0 (site.css 15 px). */
.pack-wrapper .pack-dog-image { border-width: 1.25vh 1.25vh 0; }

/* Moje smečka: celá hlavička karty psa přepíná accordion (account.js). */
.dog-pack-header.rb-dog-head-click { cursor: pointer; }
.dog-pack-header.rb-dog-head-click .btn { cursor: pointer; }

/* Dialogy s lepící patičkou (.modal-foot — porovnání receptur, supply…):
   patička drží na spodní hraně okna (dialog má padding 15 px, proto −15),
   do své pozice v kartě dojede až na konci obsahu — pod ní už nekouká zbytek
   karty (kolega 19. 10. 2026). overflow: clip (ne hidden — nezakládá scroll
   kontejner, sticky funguje dál) ořízne patičku do zaoblení karty. */
.modal_dialog .modal_card:has(> .modal-foot) { overflow: clip; }
.modal_dialog .modal_card > .modal-foot { bottom: -15px; border-radius: 0; }

/* Porovnání receptur (done/modal-recepture-compare.php, kolega 21. 10. 2026):
   karta přes celou výšku okna (dialog drží 15px odsazení), header a patička
   stojí, posouvá se jen tělo. Patička v režimu porovnání (.rb-cmp--switch)
   až po zvolení „Přejít na…" — :has() bez JS. */
.modal_dialog .modal_card.rb-cmp {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 30px);
  height: calc(100dvh - 30px);
  margin: 0 auto;
  overflow: hidden;
}
.modal_card.rb-cmp > .modal-header,
.modal_card.rb-cmp > .modal-foot { flex: none; }
.modal_card.rb-cmp > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* .card-inner má v site.css height: 100 % (= výška těla) → obsah z ní přetékal
   a spodní padding ležel až pod ním; dole stejné odsazení jako po stranách. */
.modal_card.rb-cmp > .modal-body > .card-inner {
  height: auto;
  padding-bottom: var(--size-m);
}
@media screen and (max-width: 991px) {
  .modal_card.rb-cmp > .modal-body > .card-inner { padding-bottom: var(--size-s-m); }
}
@media screen and (max-width: 479px) {
  .modal_card.rb-cmp > .modal-body > .card-inner { padding-bottom: var(--size-s); }
}
.modal_dialog .modal_card.rb-cmp > .modal-foot {
  position: static;
  padding-bottom: var(--size-m); /* site.css má dole --size-m-l; stejně jako nahoře */
  border-radius: 0 0 var(--size-m) var(--size-m);
}
.modal_card.rb-cmp--switch:not(:has(.option-field:not(:first-child) input[type="radio"]:checked)) > .modal-foot {
  display: none;
}
/* „Sestaveno" u sestavené receptury — jako v řádku receptury (.suitability.top).
   Stejná výška jako tlačítko „Přejít na…" → oba popisky mají střed na jedné lince. */
.rb-cmp-current .heading-5 { margin: 0; }
.rb-cmp-current > .suitability { min-height: 46px; }
/* „Přejít na…" — tlačítko v barvách receptury; zvolené = sytější + fajfka. */
.rb-cmp-switch {
  --rb-c1: var(--basic--white); --rb-c2: var(--rb--purple-700-15); --rb-c3: var(--basic--200);
  height: auto;
  min-height: 46px;
  padding: var(--size-xs) var(--size-s);
  border: 2px solid var(--rb-c2);
  background-color: var(--rb-c1);
  color: var(--rb--purple-900);
  font-weight: 700;
  white-space: normal;
  text-align: center;
  mix-blend-mode: normal;
  transition: background-color .15s ease, border-color .15s ease;
}
.rb-cmp-switch.turkey { --rb-c1: var(--turkey--100); --rb-c2: var(--turkey--300); --rb-c3: var(--turkey--300); }
.rb-cmp-switch.salmon { --rb-c1: var(--salmon--100); --rb-c2: var(--salmon--300); --rb-c3: var(--salmon--300); }
.rb-cmp-switch.lamb   { --rb-c1: var(--lamb--100);   --rb-c2: var(--lamb--300);   --rb-c3: var(--lamb--300); }
.rb-cmp-switch.beef   { --rb-c1: var(--beef--100);   --rb-c2: var(--beef--300);   --rb-c3: var(--beef--300); }
.rb-cmp-switch.duck   { --rb-c1: var(--duck--100);   --rb-c2: var(--duck--400);   --rb-c3: var(--duck--400); }
.option-field:has(input:checked) .rb-cmp-switch { background-color: var(--rb-c3); border-color: var(--rb-c3); }
.option-field .rb-cmp-switch:hover { background-color: var(--basic--white); }
.rb-cmp-check { display: none; }
.option-field:has(input:checked) .rb-cmp-check { display: block; }

/* Moje smečka — blok receptur pod kartou psa (dog-accordion.php, account.js §7):
   bez bílého pozadí (leží rovnou v šedé kartě), jemné vyjetí. */
.rb-dog-recipes.is-in { animation: rb-recipes-in .25s ease both; }
@keyframes rb-recipes-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rb-dog-recipes .receptura-item .btn { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .rb-dog-recipes.is-in { animation: none; } }

/* Moje smečka — ikona aktuální receptury vlevo od „Změnit recepturu"
   (kolega 21. 10. 2026): kruh výšky tlačítka (.btn v site.css: 56 → 50 px
   pod 992 → 46 px pod 768) v barvě receptury o stupeň tmavší než štítek
   (--<maso>--200), uvnitř tmavě fialové zvířátko; RB-tooltip s názvem
   a energetickou hodnotou (obal .w-dropdown[data-rb-tooltip]). */
.rb-recipes-row { flex-wrap: nowrap; --rb-recipe-ico: 56px; }
@media screen and (max-width: 991px) { .rb-recipes-row { --rb-recipe-ico: 50px; } }
@media screen and (max-width: 767px) { .rb-recipes-row { --rb-recipe-ico: 46px; } }
.rb-recipes-row .rb-recipes-toggle { flex: 1 1 auto; min-width: 0; }
.rb-dog-recipe-ico[hidden] { display: none; }
.rb-dog-recipe-ico > .w-dropdown-toggle { display: flex; padding: 0; }
.rb-recipe-ico {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: var(--rb-recipe-ico); height: var(--rb-recipe-ico); border-radius: 50%;
  background-color: var(--basic--200);
}
.rb-dog-recipe-ico { display: flex; }
.rb-recipe-ico img { display: block; width: 60%; height: 60%; }
.rb-recipe-ico.turkey { background-color: var(--turkey--200); }
.rb-recipe-ico.lamb { background-color: var(--lamb--200); }
.rb-recipe-ico.beef { background-color: var(--beef--200); }
.rb-recipe-ico.salmon { background-color: var(--salmon--200); }
.rb-recipe-ico.duck { background-color: var(--duck--200); }

/* Moje smečka — ukládání karty psa (account.js dogBusy): tlapky z filtru
   Sortimentu, obsah karty mezitím lehce zprůhlední (dál jde psát). */
.dog-pack-accordion.rb-filter-host > :not(.rb-filter-loader) { transition: opacity .25s ease; }
.dog-pack-accordion.rb-filtering > :not(.rb-filter-loader) { opacity: .45; }
.dog-pack-accordion.rb-filter-host.rb-filtering { min-height: 0; }
.rb-dog-loader { z-index: 5; }

/* Karta produktu: není skladem (shop/product-card.php, home/products-slider.php;
   stav řídí sklad CRM). Štítek vlevo nahoře na fotce (svisle na ose srdíčka,
   56 / 46 px), fotka potlumená, tlačítko do košíku pryč. U variant přepíná
   .rb-card-oos JS podle vybrané varianty (webflow-lite.js §10). */
.rb-oos-tag {
  display: none; z-index: 1; position: absolute; top: 0; left: 0;
  height: 56px; align-items: center; pointer-events: none;
}
.rb-card-oos .rb-oos-tag { display: flex; }
.rb-oos-tag > span {
  padding: 8px 12px; border-radius: var(--corner-radius);
  background-color: var(--salmon--100); color: var(--rb--purple-900);
  font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.rb-card-oos .cart-mini { display: none !important; }
.rb-card-oos .product-image { opacity: .5; }
/* Řádek s cenou drží výšku tlačítka, ať název a cena sedí jako u sousedních karet. */
.rb-card-oos .add-to-cart-detail .h-flex:has(> .price) { min-height: 56px; }
@media screen and (max-width: 991px) {
  .rb-card-oos .add-to-cart-detail .h-flex:has(> .price) { min-height: 50px; }
}
@media screen and (max-width: 767px) {
  .rb-card-oos .add-to-cart-detail .h-flex:has(> .price) { min-height: 46px; }
  .rb-oos-tag { height: 46px; }
  .rb-oos-tag > span { padding: 6px 8px; font-size: 12px; }
}

/* Detail produktu: upozornění přesunuté do akordeonu („Parametry produktu"
   u kapsiček, `note_in` v story-data.php) — odstup od textů nad ním. */
.accordion-navigation .rb-alert-in-accordion { margin-top: var(--size-s-m); }

/* Výběr plemene s vyhledáváním (assets/webflow/js/breed-search.js, kolega
   21. 10. 2026): nativní select zůstává vidět, překrývá ho průhledné tlačítko
   (.rb-bsel-cover), které otevře panel s hledáním. Panel = karta šablony
   (bílá, rámeček jako .input, zaoblení --size-s-m), pole hledání ve stylu .input,
   vybrané plemeno tučně s fajfkou. Konfigurátor i karta psa v Moje smečka. */
.rb-bsel-host { position: relative; }
.rb-bsel-cover {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; padding: 0; border: 0; border-radius: var(--size-m);
  background: transparent; cursor: pointer;
}
.rb-bsel-cover:focus-visible { outline: 2px solid var(--rb--orange); outline-offset: 2px; }
.rb-bsel-host.rb-bsel-open { z-index: 950; } /* nad .w-dropdown (900, ikona receptury v kartě psa), pod košíkem/toasty */
.rb-bsel-host.rb-bsel-open select { border-color: var(--rb--orange) !important; }
.rb-bsel-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  display: flex; flex-direction: column;
  padding: 0;
  overflow: hidden; /* posuvník seznamu je až u kraje panelu, zaoblení ho ořízne */
  border-radius: var(--size-m);
  background-color: var(--basic--white);
  box-shadow: 0 18px 40px rgba(40, 0, 20, .16);
  text-align: left;
}
.rb-bsel-panel[hidden] { display: none; }
.rb-bsel-search { position: relative; flex: none; margin: 15px 15px 0; }
.rb-bsel-search .ms-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--rb--purple-700); opacity: .5; pointer-events: none;
}
.rb-bsel-input {
  width: 100%; height: 46px; margin: 0;
  padding: 0 16px 0 48px;
  border: 2px solid var(--rb--purple-700-15);
  border-radius: var(--size-m);
  background-color: var(--basic--100);
  color: var(--rb--purple-900);
  font: inherit; font-size: 16px;
  outline: none;
}
.rb-bsel-input:focus { border-color: var(--rb--orange); } /* pozadí zůstává šedé */
.rb-bsel-input::placeholder { color: #28001466; }
.rb-bsel-list {
  max-height: min(320px, 50vh);
  position: relative; /* offsetTop položek od seznamu (posun při šipkách) */
  margin: 0; padding: 10px 15px 15px; list-style: none; /* bez okraje vpravo → posuvník u kraje panelu */
  overflow-y: auto; overscroll-behavior: contain;
}
.rb-bsel-item {
  position: relative;
  padding: 12px 44px 12px 16px;
  border-radius: var(--size-s);
  color: var(--rb--purple-900);
  font-size: 16px; line-height: 1.25;
  cursor: pointer;
}
.rb-bsel-item.is-active { background-color: var(--basic--100); }
.rb-bsel-item.is-selected { font-weight: 700; }
.rb-bsel-item mark { background: none; color: inherit; font-weight: 700; } /* hledaný výraz */
.rb-bsel-item.is-selected::after {
  content: "check";
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--icons--ms-rounded); font-size: 22px; font-weight: 500;
  color: var(--rb--orange);
}
.rb-bsel-empty { padding: 16px; color: var(--rb--purple-700); opacity: .6; font-size: 15px; }

/* Oblíbené → Granule na míru (favorites-granule-item.php, kolega 21. 10. 2026):
   jméno psa nad názvem jako obyčejný text v barvě pohlaví (pes modrá, fena
   růžová — 500), receptura ve štítku jako v kartě psa v Moje smečka.
   .recepture-label má v site.css margin −5px (řádek štítků smečky) — tady ne. */
.rb-fav-granule-text { align-items: flex-start; }
.rb-fav-granule-text .recepture-label { margin: 0 0 0 -5px; white-space: nowrap; } /* -5px: text štítku opticky v ose s názvem */
.rb-fav-dog-label { font-weight: 400; line-height: 1; }
.rb-fav-dog-label.male { color: var(--carp--500); }
.rb-fav-dog-label.female { color: var(--turkey--500); }

/* Detail objednávky — řádky dopravy, platby a slev (order-detail.php $rb_line):
   ikona (.ms-icon / img.service-img) v 60px .product-img-wrapper ležela nahoře,
   o ~18 px výš než text — vystředit (kolega 21. 10. 2026). */
.list-group .product-line-link .product-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Ikony z písma (osobní odběr, QR platba, slevový kód…) v kroužku basic-100
   stejně velkém jako tlapička slev (img.service-img: 60px obal − 2×10px padding
   = 40px). Loga dopravců a tlapička (obrázky) beze změny. */
.list-group .product-line-link .product-img-wrapper > .ms-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--size-l) - 20px);
  height: calc(var(--size-l) - 20px);
  border-radius: 50%;
  background-color: var(--basic--100);
  font-size: 22px;
}

/* Konfigurátor /sestavit-krmivo: na mobilu (≤ 767 px) site.css nuluje padding
   kroků (.card-inner.s.mobile-0) a karty otázek se slily bez mezery (tablet
   má 2× 15 px). Mezi kroky 15 px (kolega 21. 10. 2026). */
@media screen and (max-width: 767px) {
  #rawbark-comparator [id^="step-"].card-inner.mobile-0 + [id^="step-"].card-inner.mobile-0 { margin-top: 15px; }
}

/* Pokyny 21. 10. – sestaveno: #69 #78 světlý tooltip v tmavém hero.
   Popis suroviny (/sestaveno) a ceník „Cena od … / kg" (HP, /recenze)
   splývaly s vínovým hero — bublina RB-tooltip převezme z markupu třídu
   `.rb-tip-light` (done/hero.php, shared/granule-price-hint.php). */
.rb-tooltip.rb-tooltip.rb-tip-light {
  background-color: var(--basic--white);
  color: var(--rb--purple-700);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(40, 0, 20, .25);
}

/* Pokyny 21. 10. – sestaveno: #70 „Detailní složení" jako textový odkaz pod
   seznamem surovin, na mobilu vedle „+ dalších N surovin". */
.rb-ing-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-s);
  margin-top: var(--size-s);
}
.rb-ing-foot .rb-ing-detail { white-space: nowrap; }
@media screen and (max-width: 767px) {
  .rb-ing-foot { margin-top: var(--size-xs); }
  .rb-ing-foot .rb-ing-detail { margin-left: auto; }
  .rb-ing-foot .rb-ing-toggle { width: auto; margin: 0; justify-content: flex-start; }
  .rb-ing-foot .rb-ing-detail { font-size: 15px; }
}

/* Pokyny 21. 10. – sestaveno: #67 jméno psa v bublině na pytli na jeden
   řádek; delší jméno zmenší done.js (--rb-name-k), střed řádku zůstává. */
.dog-name-holder .dog-name.pet-name-output {
  white-space: nowrap;
  font-size: calc(8px * var(--rb-name-k, 1));
  top: calc((1 - var(--rb-name-k, 1)) * 4px);
}
@media screen and (max-width: 479px) {
  .dog-name-holder .dog-name.pet-name-output {
    font-size: calc(6px * var(--rb-name-k, 1));
    top: calc((1 - var(--rb-name-k, 1)) * 3px);
  }
}

/* Pokyny 21. 10. – sestaveno: #63 karta „Vlastní" — kratší posuvník
   a vedle něj „+ více" (další balení nad strop posuvníku, done.js). */
.rb-pack-range.rb-pack-range--more { flex-direction: row; align-items: flex-start; gap: var(--size-s); }
.rb-pack-range-track { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rb-pack-range .rb-pack-more { flex: none; white-space: nowrap; }
.rb-pack-range .rb-pack-more:disabled { opacity: .4; cursor: default; }

/* Pokyny 21. 10. – sestaveno: #68 pytle v kartách balení na mobilu větší —
   obrázek přes celou výšku karty, pytel 80 % sloupce (dřív 52,5 % čtverce),
   zadní pytle smí přesahovat do paddingu karty. */
@media screen and (max-width: 767px) {
  .product-list.rb-packages .product-image-wrapper { aspect-ratio: auto; align-self: stretch; height: auto; overflow: visible; }
  .product-list.rb-packages .relative.product-image { width: 80%; }
  .product-list.rb-packages .rb-bags > .rb-bag-back { left: 10%; }
}

/* Pokyny 21. 10. – ucet-ostatni: #119 spodní lišta záložek účtu na mobilu
   nižší (81 → ~58 px) — menší ikony, popisky a odsazení; spacer v patičce
   drží místo stejné výšky. */
@media screen and (max-width: 479px) {
  .card-inner.s.app-menu { padding: 6px 4px 4px; }
  .app-menu .nav-link-list.l { grid-column-gap: 3px; grid-row-gap: 3px; padding: 4px 6px 6px; font-size: 11px; }
  .app-menu .mi-icon.menu-icon { font-size: 20px; }
  .spacer { height: 60px; }
}

/* Pokyny 21. 10. – homepage-nav: #76 hlavička na mobilu (≤ 767 px) jako úzká
   bílá lišta 55 px (vzhled smrštěné desktopové hlavičky: bílé pozadí + stín),
   logo 40 px, menu a košík bez bílých koleček. Obsah stránek začíná ≥ 80 px,
   takže lišta nic nepřekrývá ani nahoře. Tablet a desktop beze změny. */
@media screen and (max-width: 767px) {
  .header,
  .header .navbar { height: 55px; min-height: 55px; } /* kolega 21. 10. 2026: 60 → 55 */
  /* Hlavička postranního košíku stejně vysoká jako hlavička webu (55 px). */
  .w-commerce-commercecartheader.cart-header { box-sizing: border-box; height: 55px; min-height: 55px; padding-top: 0; padding-bottom: 0; align-items: center; }
  .header { background-color: var(--basic--white); box-shadow: 0 2px 0 rgba(0, 0, 0, .05); }
  .header .menu-button,
  .header .cart-btn.nav-button {
    width: 44px; height: 44px;
    background-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--rb--purple-900);
  }
  .header .menu-button { margin-left: 8px; padding: 10px; }
  .header .cart-btn.nav-button { margin-right: 8px; }
  .header .cart-btn.nav-button .mi-icon.cart { color: var(--rb--purple-900); }
  .brand .rb-logo { width: 40px; } /* kolega 21. 10. 2026 (dřív 44) */
  .nav-menu { padding-top: 60px; }
}

/* Pokyny 21. 10. – produkt: #102 voucher — mezi řadou hodnot a řadou typu
   stejná mezera jako mezi zalomenými pilulkami (10 px). */
.rb-product-hero .option-list > [role="group"] + [role="group"] { margin-top: var(--size-xs); }
/* #94 oranžový rámeček pole množství jen při ovládání klávesnicí. */
.qty-input:active,
.qty-input:focus:not(:focus-visible) { border-color: var(--basic--transparent); }
/* #93 přepočet Kč/ks + úspora u balení po víc kusech (variant-form.php). */
.rb-unit-note { margin-left: auto; font-weight: 600; }
.rb-unit-note[hidden] { display: none; }

/* Pokyny 21. 10. – homepage-nav: #77 slider „Naše originální produkty" na
   mobilu — dekorativní šipky (.testimonials-controls, neaktivní stav) přesně
   pod funkčními (.w-slider-arrow-*), ať při přepnutí neuskakují. Funkční
   šipky jsou 76/86 px nad sliderem = spodní hrana řádku s nadpisem, proto
   dekoraci zarovnáváme ke spodku řádku (dvouřádkový nadpis ≤ 479 px ji dřív
   centroval o 6 px výš). 480–767 px: funkční šipky o 15 px víc vlevo než
   dekorace → stejný odstup od kraje (15 px). */
@media screen and (max-width: 767px) {
  .fav-products-wrapper .h-flex:has(> .h-flex > .testimonials-controls) { align-self: flex-end; }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  .fav-products-wrapper .testimonial-right-arrow.w-slider-arrow-right { right: 15px; }
  .fav-products-wrapper .testimonial-left-arrow.prods { margin-right: 81px; }
}

/* Pokyny 21. 10. – smecka: #120 #121 #122 — karta psa v „Moje smečka"
 * (account/dog-accordion.php). #120: hodnoty informačního řádku (hmotnost,
 * věk, denní dávka) všechny na střed — číslo hmotnosti uprostřed pole,
 * „kg" dál vpravo (symetrický padding). #121: věta o další dávce pod denní
 * dávkou (.rb-next-dose). #122: na mobilu „Objednat granule" + rozbalení
 * vždy na vlastním řádku pod jménem (rozbalení vpravo), nic nepřetéká. */
.grid._3.infos .rb-input-unit > .input { text-align: center; padding-left: 60px; }
.rb-next-dose { margin: 10px 0 0; font-size: 14px; line-height: 1.4; text-align: center; }
@media screen and (max-width: 991px) {
  .grid._3.infos .rb-input-unit > .input { padding-left: 52px; }
}
@media screen and (max-width: 767px) {
  .dog-pack-header > .h-flex.mobile-fix { flex: 1 1 100%; min-width: 0; }
  .dog-pack-header .options-wrapper.dog-options { justify-content: space-between; min-width: 0; }
}
@media screen and (max-width: 479px) {
  .grid._3.infos .rb-input-unit > .input { padding-left: 46px; }
}

/* Pokyny 21. 10. – ucet-ostatni: #129 Nastavení — „Nakupuji na firmu"
   (Název firmy, IČO, DIČ) na mobilu pod sebou v plné šíři jako ostatní pole. */
@media screen and (max-width: 479px) {
  .form-sub-section._3 { grid-template-columns: 1fr; }
}

/* Pokyny 21. 10. – ucet-ostatni: #130 Nastavení — telefon s předvolbou
   jako v pokladně (select .phone-prefix-select má vzhled z bloku
   „Předvolba telefonu" výš); chybová hláška pod polem. */
.rb-phone-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rb-phone-field .phone-prefix-wrapper { flex: none; }
.rb-phone-field > .input { flex: 1 1 0; min-width: 0; width: auto; }
.rb-phone-field .phone-error-message { display: none; flex-basis: 100%; color: var(--rb--red, #e2401c); font-size: 14px; line-height: 1.4; padding-left: 15px; }
.rb-phone-field .phone-error-message.visible { display: block; }
.rb-phone-field .input.phone-error { border-color: #e2401c; }
/* výška selectu = výška .input v Nastavení (991: 50 px, 767: 46 px) */
@media screen and (max-width: 991px) {
  .rb-webflow .rb-phone-field select.phone-prefix-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) { height: 50px; }
}
@media screen and (max-width: 767px) {
  .rb-webflow .rb-phone-field select.phone-prefix-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) { height: 46px; padding-top: 0; padding-bottom: 0; }
}
@media screen and (max-width: 479px) {
  .rb-webflow .rb-phone-field select.phone-prefix-select:not(.rb-legacy select):not(.select2-hidden-accessible):not([multiple]) { min-width: 0; }
}

/* Pokyny 21. 10. – ucet-ostatni: #128 recenze — křížek u náhledu fotky
   v pravém horním rohu (dřív dole uprostřed pod fotkou). */
.rb-review-upload-list .upload-image-wrapper .remove-btn {
  inset: -8px -8px auto auto;
  transform: none;
  z-index: 2;
}

/* Pokyny 21. 10. – obsah: #75 Jak to funguje, krok 3 — odznak garance
   (.garance-hp z hero homepage) na světlém pozadí: ikona nápovědy v barvě
   textu místo bílé, zarovnání vlevo jako text kroku i na mobilu. */
.garance-hp.rb-hiw-garance { color: inherit; justify-content: flex-start; align-self: flex-start; }
.garance-hp.rb-hiw-garance .paragraph { margin-bottom: 0; }
.garance-hp.rb-hiw-garance .mi-icon.info-xs { color: currentColor; }

/* Pokyny 21. 10. – obsah: #85 Jak to funguje, krok 6 — fotka celá uvnitř
   karty ve svém poměru (bez přetékání nahoru a prázdna pod ní). */
#w-node-d6d490f7-ee52-ade5-6e2c-f9870c3d1b81-36d2d3e9 { height: auto; align-self: center; padding: var(--size-s) var(--size-s) 0; }
#w-node-d6d490f7-ee52-ade5-6e2c-f9870c3d1b81-36d2d3e9 .overlay-image.s { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; margin: 0; }

/* Pokyny 21. 10. – ucet-ostatni: #126 Oblíbené — u vyprodaného produktu
   na mobilu štítek „Čekáme na naskladnění" (+ „…" menu) na vlastním řádku
   pod názvem a cenou (dřív se cpal vedle a překrýval název). Stejně jako
   řádek s variantou výš. */
@media screen and (max-width: 479px) {
  .v-item:has(.out-of-stock-state) > .h-flex > .review-details-grid { flex: 0 0 100%; }
  .v-item:has(.out-of-stock-state) > .h-flex > .h-flex.gap-xs.in-line { flex: 0 0 100%; height: auto; }
}

/* Pokyny 21. 10. – kosik-pokladna: #104 košík — sloupce Cena / Množství /
   Mezisoučet pod hlavičkou. 1fr bez minmax se roztahoval podle obsahu řádku,
   takže každý řádek měl sloupce jinde; pilulka množství na střed sloupce,
   jednotka (kg / ks / bal.) visí vedle ní a střed neposouvá. */
.woocommerce-cart-form .cart-product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* .card je inline-block (šířka podle obsahu) — s pružnými sloupci by se karta
   košíku smrskla pod šířku levého sloupce. */
#rawbark-cart-form-content > .card { width: 100%; }
.woocommerce-cart-form .cart-product-grid > .settings { justify-self: stretch; min-width: 0; }
.woocommerce-cart-form .cart-product-grid .rb-qty-unit { justify-content: center; position: relative; width: 100%; }
/* Mezisoučet: hlavička doprava nad částku, tj. bez křížku (46 px + mezera). */
.woocommerce-cart-form .cart-product-grid .subcategory-label:last-child { text-align: right; padding-right: 56px; }
.woocommerce-cart-form .cart-product-grid .delete.circle { flex: none; }
@media screen and (min-width: 480px) {
  /* Mezisoučet + křížek se do šestiny nevešly („1 719,96 Kč" + 56 px) —
     poslední sloupec je širší, hlavička i řádky mají stejnou mřížku. */
  .woocommerce-cart-form .cart-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr); }
}
@media screen and (min-width: 992px) {
  .woocommerce-cart-form .cart-product-grid .rb-qty-unit .note {
    position: absolute;
    top: 50%;
    left: calc(50% + 50px + var(--size-xxs));
    transform: translateY(-50%);
  }
}
@media screen and (min-width: 480px) and (max-width: 991px) {
  /* Tablet: vedle pilulky není místo — jednotka pod ní jako na telefonu. */
  .woocommerce-cart-form .cart-product-grid .rb-qty-unit .note {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    line-height: 16px;
  }
}
@media screen and (max-width: 479px) {
  /* Hlavička na telefonu dělí šest sloupců 1 / 2 / 3 jako řádky pod ní. */
  .woocommerce-cart-form #w-node-_4721f48d-cf26-4466-e915-1669f1b626dc-1fdf3058 { grid-area: span 1 / span 1 / span 1 / span 1; }
  .woocommerce-cart-form #w-node-_226c70dd-4f78-1ad7-ebe9-54caa84add1a-1fdf3058 { grid-area: span 1 / span 3 / span 1 / span 3; }
  .woocommerce-cart-form .cart-product-grid .rb-qty-unit .note { left: 50%; }
  .woocommerce-cart-form .cart-product-grid .subcategory-label:last-child { padding-right: 51px; }
  /* Cena na telefonu přetéká úzký sloupec doprava, začíná u levého okraje. */
  .woocommerce-cart-form #w-node-_4721f48d-cf26-4466-e915-1669f1b626dc-1fdf3058 { text-align: left; }
}

/* Pokyny 21. 10. – kosik-pokladna: #105 pokladna „Vaše produkty" — hlavička
   ve stejné mřížce jako řádky (šest stejných sloupců bez mezer), popisky
   zarovnané doprava jako hodnoty pod nimi. */
.rb-ck-products .cart-product-grid,
.rb-ck-products .product-details-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-column-gap: 0; }
.rb-ck-products .cart-product-grid .subcategory-label + .subcategory-label { text-align: right; }

/* Pokyny 21. 10. – kosik-pokladna: #106 „Vybrat výdejní místo" — DPD (<a>)
   i PPL (<button>) stejně: plná šířka souhrnu, bez podtržení, jeden řádek. */
.rb-ck-hook-rows tr.tppl-selected-branche > th:empty { display: none; }
.rb-ck-hook-rows tr.tppl-selected-branche > td,
.rb-ck-hook-rows tr.tdpd-selected-branche > td { width: 100%; }
.rb-checkout .rb-ck-hook-rows #tdpd-open-popup-widget,
.rb-checkout .rb-ck-hook-rows #tppl-open-popup-widget {
  display: flex;
  width: 100%;
  text-decoration: none;
  white-space: nowrap;
}

/* Pokyny 21. 10. – kosik-pokladna: #109 pokladna na telefonu/tabletu —
   doprava, platba a kontaktní údaje uvnitř formuláře (15 px od okraje jako
   ostatní karty); .dashboard-section má z Můj účet záporný okraj −15 px.
   Logo dopravce/platby: mobilní .type-icon přidával padding-top 10 %, logo
   tím sjelo pod text — bez něj sedí na ose s popiskem. */
@media screen and (max-width: 991px) {
  .rb-checkout .dashboard-section { margin-left: 0; margin-right: 0; }
}
@media screen and (max-width: 767px) {
  .rb-ck-shipping .type-icon.service-img,
  .rb-ck-payment .type-icon.service-img { padding-top: 0; }
}

/* Pokyny 21. 10. – kosik-pokladna: #112 kroužek souhlasu v pokladně vždy
   kulatý 36 × 36 (na telefonu se roztahoval na 46 × 36). */
.consents-wrapper .checkbox-classic > label.option-field { flex: 0 0 36px; width: 36px; }
.consents-wrapper .checkbox-classic .radio-checkbox.checkbox { width: 36px; height: 36px; }
/* Vnitřní kroužek (span s fajfkou) se na telefonu smrskl na 30 × 36 a posunul. */
.consents-wrapper .checkbox-classic > label.option-field { padding: 0; }
.consents-wrapper .checkbox-classic > label.option-field::before,
.consents-wrapper .checkbox-classic > label.option-field::after { display: none; } /* clearfix z .w-checkbox + gap posouval span o 5 px */
.consents-wrapper .checkbox-classic > label.option-field > .text-label.ms-icon { flex: none; width: 36px; height: 36px; margin-left: 0; margin-right: 0; }

/* Pokyny 21. 10. – homepage-nav: #79 uložení psi z konfigurátoru (čipy
   fotka + jméno → /sestaveno/ psa) v HP hero pod „Sestavit granule" a v menu
   pod „Znovu objednat granule" (shared/saved-dogs.php). Vzhled čipu jako
   „Nebo vyberte uloženého pejska" v konfigurátoru (výš, #rawbark-comparator
   .saved-dog-card), jen bez křížku. */
.rb-saved-dogs { display: flex; flex-wrap: wrap; gap: var(--size-xs); }
.rb-sd-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 22px 0 8px;
  border-radius: 30px;
  background-color: var(--basic--white);
  box-shadow: inset 0 0 0 2px transparent;
  color: var(--rb--purple-900);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow .15s ease;
}
.rb-sd-chip:hover,
.rb-sd-chip:focus-visible { box-shadow: inset 0 0 0 2px var(--rb--orange); color: var(--rb--purple-900); }
.rb-sd-photo { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.rb-sd-name { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.rb-saved-dogs--menu { width: 100%; } /* mezeru nad čipy dává gap .nav-section */
@media screen and (max-width: 991px) {
  .rb-saved-dogs--hero { justify-content: center; } /* hero je od tabletu na střed */
}
@media screen and (max-width: 767px) {
  .rb-sd-chip { height: 46px; padding: 0 16px 0 4px; gap: 10px; font-size: 16px; }
  .rb-sd-photo { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .rb-sd-chip { transition: none; } }

/* Pokyny 21. 10. – tlapicky: #83 #86 #87 #88 #89 #91 #132
   Tlapičkový program a výzvy v účtu (loyalty/data.php, challenges.php,
   progress.php, account/dashboard-section.php). */
/* #83 Nová tlapička je i nepřihlášenému první v řadě (zamčená = šedá, ale ne na konci). */
.paw-program-award.rb-paw-nova.unavailable { order: 0; opacity: 1; }
/* #86 otazník u názvu odznaku (RB-tooltip) */
.rb-badge-title { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rb-badge-title .rb-badge-hint { flex: none; }
.rb-badge-title .hint-item { width: auto; }
.rb-badge-title .mi-icon { font-size: 22px; line-height: 1; }
.rb-tooltip.hint-item-navigation p { margin: 0; }
/* #87 / #132 vysvětlení místo tlačítka, termín sezonní výzvy */
.rb-challenge-note { flex: none; display: flex; align-items: flex-start; justify-content: center; gap: 6px; text-align: center; opacity: .75; }
.rb-challenge-note .mi-icon { font-size: 18px; line-height: 1.2; }
.badge-item-navigation .rb-challenge-note { justify-content: flex-start; text-align: left; }
.rb-challenge-add.is-loading { opacity: .6; pointer-events: none; }
.btn.s.challenge + .btn.s.challenge { margin-top: calc(-1 * var(--size-xs)); }
/* #88 #89 hláška pro nepřihlášené místo tlačítka */
.rb-challenge-login { gap: var(--size-xs); text-align: left; min-height: 0; flex: none; padding: 8px var(--size-s); }
.rb-challenge-login .mi-icon { font-size: 20px; line-height: 1.2; flex: none; }
.rb-challenge-login .link { color: inherit; text-decoration: underline; font-weight: 700; }
.rb-challenge-login-box { margin-top: var(--size-s); }
/* #91 Proč mají odznaky úrovně? */
.rb-level-explain { margin-top: var(--size-s); }
.rb-level-explain > .v-flex { width: 100%; }
.rb-level-explain-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-s-m); }
.rb-level-explain-cols p { margin: 0; }
.rb-inline-icon { display: inline; font-size: 1.1em; vertical-align: -0.2em; }
@media screen and (max-width: 991px) {
  /* Trendař má na kartě pevné výšky dvě tlačítka — ať se popisky nelámou. */
  .award-item .btn.s.challenge:has(+ .btn.s.challenge),
  .award-item .btn.s.challenge + .btn.s.challenge { font-size: 13px; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
  .award-item .v-flex.gap-s-m:has(> .btn.s.challenge + .btn.s.challenge) { grid-row-gap: 8px; row-gap: 8px; }
}
@media screen and (max-width: 767px) {
  .rb-level-explain-cols { grid-template-columns: minmax(0, 1fr); gap: var(--size-s); }
}

/* Pokyny 21. 10. – obsah: #80 Objednat znovu — „Další možnosti jak objednat"
   na mobilu s menší ikonou vlevo vedle textu jako na desktopu (dřív se
   ikona zalomila nad každý odstavec). */
@media screen and (max-width: 479px) {
  #w-node-c86962ee-5349-b6d9-35d8-22f3a31c6214-f4978deb .h-flex.horizontal.gap-s-m { flex-wrap: nowrap; align-items: flex-start; column-gap: var(--size-s); }
  #w-node-c86962ee-5349-b6d9-35d8-22f3a31c6214-f4978deb .h-flex.horizontal.gap-s-m > .number-wrapper.l { flex: none; width: 40px; height: 40px; }
  #w-node-c86962ee-5349-b6d9-35d8-22f3a31c6214-f4978deb .rb-oa-icon { width: 28px; height: 28px; }
  #w-node-c86962ee-5349-b6d9-35d8-22f3a31c6214-f4978deb .h-flex.horizontal.gap-s-m > p { flex: 1 1 0; min-width: 0; }
}

/* Pokyny 21. 10. – obsah: #82 LP Granule na míru — lepící lišta (garance +
   Sestavit granule) na mobilu v jednom úzkém řádku jako lišta Do košíku
   na detailu produktu (61 px). Fotka pytle 46 px jako na detailu, pod 480 px
   se nevejde a schová se (zůstává garance + tlačítko). */
@media screen and (max-width: 767px) {
  .add-to-cart-banner .card.add-to-cart:has(.garance-text) .card-inner > .h-flex { flex-wrap: nowrap; justify-content: space-between; align-items: center; column-gap: 10px; }
  .add-to-cart-banner .card.add-to-cart:has(.garance-text) .card-inner > .h-flex > .h-flex { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; min-width: 0; column-gap: 10px; }
  .add-to-cart-banner .product-img-wrapper.in-banner.granule { flex: none; width: 46px; height: 46px; margin: 0; }
  .add-to-cart-banner .card.add-to-cart .garance-text { flex: 0 1 auto; min-width: 0; padding: 6px 10px; }
  .add-to-cart-banner .card.add-to-cart:has(.garance-text) .btn { flex: none; white-space: nowrap; }
}
@media screen and (max-width: 479px) {
  .add-to-cart-banner .product-img-wrapper.in-banner.granule { display: none; }
  .add-to-cart-banner .card.add-to-cart .garance-text strong { display: block; }
}
@media screen and (max-width: 379px) {
  .add-to-cart-banner .card.add-to-cart a.garance-text.w-inline-block,
  .add-to-cart-banner .card.add-to-cart a.garance-text.w-inline-block * { font-size: 12px; }
}

/* Pokyny 21. 10. – objednavky-platby: #108 #123 #114 #115 #116 #124 #125
   Blok „Zaplaťte převodem" (functions/thankyou.php → děkovací stránka
   i detail objednávky), hlavička a položky detailu objednávky na mobilu
   (account/order-detail.php), akce v seznamu objednávek (account/order-item.php). */
/* #108 #123 platební údaje + QR */
.rb-bacs-pay { width: 100%; }
.rb-order-flow .rb-bacs-pay { margin-bottom: var(--size-m); }
.rb-bacs-pay__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--size-m); }
.rb-bacs-pay__info { flex: 1 1 auto; min-width: 0; }
.rb-bacs-pay__title { flex-wrap: nowrap; align-items: center; justify-content: flex-start; }
.rb-bacs-pay__title .ms-icon { font-size: 24px; }
.rb-bacs-pay .rb-bacs-pay__note { margin: 0; }
.rb-bacs-pay__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-s) var(--size-m); }
.rb-bacs-pay__fields .heading-5 { overflow-wrap: anywhere; }
.rb-bacs-pay__fields .input-group { margin: 0; }
.rb-bacs-pay__fields .field-label { margin-top: 0; margin-bottom: 4px; }
.rb-bacs-pay__qr { flex: none; display: flex; padding: 10px; border-radius: var(--size-s); background-color: var(--basic--white); }
.rb-bacs-pay__qr img { display: block; width: 180px; height: 180px; max-width: none; }
@media screen and (max-width: 767px) {
  .rb-bacs-pay__inner { flex-direction: column; align-items: stretch; }
  .rb-bacs-pay__qr { align-self: center; }
}
@media screen and (max-width: 479px) {
  .rb-bacs-pay__fields { grid-template-columns: minmax(0, 1fr); }
}
/* #116 seznam objednávek: textová tlačítka Zaplatit / Objednat znovu */
.product-img.rb-pack-thumb { width: 100%; height: 100%; object-fit: contain; } /* #114 pytel s fotkou psa */
.rb-order-actions .btn.s:not(.circle) { white-space: nowrap; }
/* #125 částky (i záporné slevy) se nelámou */
.order-product-item .price.xs { white-space: nowrap; }
@media screen and (max-width: 767px) {
  /* #124 položky jako v košíku: obrázek + název na celou šířku, pod tím
     „množství × cena" a vpravo mezisoučet; doprava/platba/slevy ikona vedle textu. */
  .order-product-item .product-line-link > .h-flex { flex-wrap: nowrap; }
  .order-product-item .product-line-link > .h-flex > :last-child { min-width: 0; }
  .order-product-item .product-img-wrapper { flex: 0 0 auto; }
  .rb-od-item .product-details-grid { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 10px; }
  .rb-od-item .product-details-grid > .product-line-link { grid-column: 1 / -1 !important; }
  .rb-od-item .product-details-grid > .value-wrapper { justify-self: start; white-space: nowrap; }
  .rb-od-line .product-details-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--size-s); }
  .rb-od-line .product-details-grid > .product-line-link { grid-column: 1 !important; }
  .rb-od-line .product-details-grid > .value-wrapper:empty { display: none; }
}
@media screen and (max-width: 479px) {
  /* #115 stavový štítek pod nadpisem */
  .rb-od-head .heading-wrapper { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .rb-od-head .heading-wrapper > .status { grid-column: 2; justify-self: start; display: flex; }
}
.rb-od-head + .rb-bacs-pay { margin-top: 15px; } /* hlavička má margin-bottom −15px */
@media screen and (max-width: 479px) {
  /* #116 cena nad tlačítky, ať se Zaplatit / Objednat znovu i šipka do detailu vejdou */
  .order-item .rb-order-actions.in-line { flex-wrap: wrap; row-gap: 10px; height: auto; }
  .order-item .rb-order-actions .s-price { flex-basis: 100%; }
}

/* Pokyny 21. 10. – obsah: #84 Chovatelské stanice, hero — štěňata hned pod
   tlačítkem (bez ~260 px prázdna: pryč padding-top 17.5vh z .hero-section
   a na mobilu 100px row-gap gridu) a větší. Na tabletu stejná vada
   (štěňata uříznutá spodní hranou sekce) → obrázek v plné šíři sloupce.
   Celý obrázek nad vlnou: pryč záporný margin-bottom (calc(-7.5vh - 120px))
   a výška 115 % → sekce se natáhne o obrázek, pod ním zůstane spodní
   padding sekce s vlnou. */
@media screen and (max-width: 991px) {
  .rb-breeding-page .bg-image-right.hero-section { padding-top: 0; margin-bottom: 0; }
  .rb-breeding-page .bg-image-right.hero-section .badges-float-wrapper { height: auto; }
  .rb-breeding-page .bg-image-right.hero-section .bg-img-max { max-width: 100%; height: auto; }
}
@media screen and (max-width: 479px) {
  .rb-breeding-page .section.first .grid._2.space-5vh { row-gap: 0; }
  .rb-breeding-page .bg-image-right.hero-section .bg-img-max { max-width: 85%; }
}

/* Pokyny 21. 10. – obsah: #81 LP Granule na míru, „Zážitek nejen pro Vašeho
   pejska" — na mobilu (≤ 767 px) místo seznamu 6 benefitů pulzující body na
   pytli; klepnutí otevře RB-tooltip s názvem a popisem (markup
   granule-landing.php, .rb-bag-hint = .hint-item-wrapper[data-rb-tooltip]).
   Tablet a desktop beze změny (body skryté, seznam se spojnicemi zůstává). */
.rb-bag-hints { display: none; }
@media screen and (max-width: 767px) {
  .rb-granule-experience .grid._3.prod-details > .info-line { display: none; }
  .rb-granule-experience .grid._3.prod-details > .image-wrapper { position: relative; }
  .rb-bag-hints {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    aspect-ratio: 806 / 1000;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
  }
  .rb-bag-hint.hint-item-wrapper {
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    pointer-events: auto;
    z-index: 1;
  }
  .rb-bag-hint > .hint-item {
    width: 32px;
    height: 32px;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--rb--orange);
    color: var(--basic--white);
    cursor: pointer;
    animation: rb-bag-hint-pulse 2s ease-out infinite;
  }
  .rb-bag-hint > .hint-item > .mi-icon { font-size: 22px; line-height: 1; transition: transform .2s ease; }
  .rb-bag-hint > .hint-item[aria-expanded="true"] > .mi-icon { transform: rotate(45deg); }
  .rb-bag-hint:nth-child(2n) > .hint-item { animation-delay: .5s; }
  .rb-bag-hint:nth-child(3n) > .hint-item { animation-delay: 1s; }
}
@keyframes rb-bag-hint-pulse {
  0% { box-shadow: 0 0 0 0 rgba(247, 167, 35, .7); }
  70% { box-shadow: 0 0 0 12px rgba(247, 167, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(247, 167, 35, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rb-bag-hint > .hint-item { animation: none; }
}