/*! Hairbeat · Balík 3a · hb-ui-v1.css · verze 2 · 2026-10-09 (Sylus)
   Rozsah: CTA podle Brand Kitu (Charcoal pilulka + stavy), ovládací plochy ≥ 44 px,
   mobilní pole 16 px, čitelná lepicí lišta, ceny a příznaky bez duplicity.
   Doplňuje: hb-typo-v1.css (Balík 2, proměnné --hb-sans / --hb-mono).
   Návrat: odstranit <link> na tento soubor (a <script> hb-ui-v1.js). */

:root{
  --hb-charcoal:#2A2623;
  --hb-paper:#F4EFE7;
  --hb-taupe:#6E645A;
  --hb-stone:#CFC5B7;
}

/* ------------------------------------------------------------------
   1) PRIMÁRNÍ CTA – Charcoal pilulka, světlý text (Brand Kit 14)
   Do košíku (karta, detail, lepicí lišta), Nákupní košík (okno),
   Pokračovat, Objednat, odeslání formulářů (Přihlásit, Registrovat, Odeslat)
   ------------------------------------------------------------------ */
html body .btn.btn-conversion,
html body #js-plugin-fixed-header-add-to-cart,
html body #continue-order-button,
html body #submit-order,
html body form .btn.btn-primary:not(.products .product .btn),
html body form input.btn.btn-primary,
html body .products .product button.btn.btn-cart.add-to-cart-button > span{
  background-color:var(--hb-charcoal) !important;
  color:var(--hb-paper) !important;
  border:0 !important;
  border-radius:999px !important;
  font-weight:600;
  text-decoration:none !important;
  box-shadow:none !important;
}
/* stavy: hover / active / focus (klávesnice) / disabled */
html body .btn.btn-conversion:hover,
html body .btn.btn-conversion:active,
html body #js-plugin-fixed-header-add-to-cart:hover,
html body #js-plugin-fixed-header-add-to-cart:active,
html body #continue-order-button:hover,
html body #submit-order:hover,
html body #submit-order:active,
html body form .btn.btn-primary:not(.products .product .btn):hover,
html body form input.btn.btn-primary:hover,
html body .products .product button.btn.btn-cart.add-to-cart-button:hover > span,
html body .products .product button.btn.btn-cart.add-to-cart-button:active > span{
  background-color:var(--hb-taupe) !important;
  color:var(--hb-paper) !important;
}
html body:not(#hb) .btn.btn-conversion:focus-visible,
html body:not(#hb) #js-plugin-fixed-header-add-to-cart:focus-visible,
html body:not(#hb) #continue-order-button:focus-visible,
html body:not(#hb) #submit-order:focus-visible,
html body:not(#hb) form .btn.btn-primary:focus-visible,
html body:not(#hb) .products .product button.btn.btn-cart.add-to-cart-button:focus-visible > span{
  outline:2px solid var(--hb-charcoal) !important;
  outline-offset:2px !important;
}
html body .btn.btn-conversion[disabled],
html body .btn.btn-conversion.disabled,
html body #submit-order[disabled],
html body form .btn.btn-primary[disabled]{
  background-color:var(--hb-stone) !important;
  color:var(--hb-taupe) !important;
  cursor:not-allowed;
}
/* velikost: desktop 48 px, mobil 52 px (nákupní box, košík, checkout) */
html body .btn.btn-conversion,
html body #continue-order-button,
html body #submit-order{
  min-height:48px !important;
  padding:12px 24px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px !important;
}
html body form .btn.btn-primary:not(.products .product .btn),
html body form input.btn.btn-primary{min-height:48px !important;padding:12px 28px !important;font-size:15px}
@media (max-width:767px){
  html body .product-top .add-to-cart .btn.btn-conversion,
  html body .p-detail .add-to-cart .btn.btn-conversion,
  html body #continue-order-button,
  html body #submit-order,
  html body .cart-content .next-step .btn.next-step-forward{min-height:52px !important;font-size:16px}
}
/* přípona „s povinností platby“ zůstává, jen čitelnější */
html body #submit-order .order-button-suffix{font-size:12px !important;opacity:1}

/* karta produktu – „Do košíku“: plocha ≥ 44 px */
html body .products .product button.btn.btn-cart.add-to-cart-button{
  min-height:44px !important;
  padding:0 !important;
  background:transparent !important;
}
html body .products .product button.btn.btn-cart.add-to-cart-button > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px !important;
  padding:0 28px !important;
  font-size:14px !important;
}

/* ------------------------------------------------------------------
   2) LEPICÍ LIŠTA NA DETAILU (mobil) – čitelný text
   ------------------------------------------------------------------ */
html body #js-plugin-fixed-header-add-to-cart{
  color:var(--hb-paper) !important;
  min-height:44px !important;
  padding:10px 20px !important;
  font-size:15px !important;
}

/* ------------------------------------------------------------------
   3) SEKUNDÁRNÍ AKCE – obrys 1,5 px (Brand Kit)
   Zpět do obchodu (okno), Přidat (kupón), Otevřít filtr, Detail (vyprodaná karta)
   ------------------------------------------------------------------ */
html body #colorbox .btn.next-step-back,
html body .btn.btn-secondary:not(.login-button),
html body a.btn.btn-default.unveil-button,
html body .products .product a.btn.btn-primary{
  background-color:transparent !important;
  color:var(--hb-charcoal) !important;
  border:1.5px solid var(--hb-charcoal) !important;
  border-radius:999px !important;
  min-height:44px !important;
  padding:0 22px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  text-decoration:none !important;
}
html body #colorbox .btn.next-step-back:hover,
html body .btn.btn-secondary:not(.login-button):hover,
html body a.btn.btn-default.unveil-button:hover,
html body .products .product a.btn.btn-primary:hover{
  background-color:var(--hb-charcoal) !important;
  color:var(--hb-paper) !important;
  border-color:var(--hb-charcoal) !important;
}
/* textový odkaz „Zpět do obchodu / Zpět“ v košíku a checkoutu */
html body .cart-content .next-step .next-step-back,
html body .order-summary-wrapper .next-step-back,
html body .next-step .next-step-back:not(#colorbox .next-step-back){
  color:var(--hb-charcoal) !important;
  text-decoration:underline !important;
  text-underline-offset:4px;
  min-height:44px !important;
  display:inline-flex;
  align-items:center;
}

/* ------------------------------------------------------------------
   4) OVLÁDACÍ PLOCHY ≥ 44 px (mobil i desktop)
   ------------------------------------------------------------------ */
/* počet kusů: −  [ 1 ]  + */
html body .quantity{position:relative;padding:0 44px;width:auto;display:inline-block}
html body .quantity button.increase,
html body .quantity button.decrease{
  width:44px;
  height:44px;
  top:50%;
  margin-top:-22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--hb-charcoal);
}
html body .quantity button.decrease{left:0}
html body .quantity button.increase{right:0}
/* odebrat z košíku */
html body .cart-content .remove-item{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* řazení a „Zobrazit více produktů“ */
html body .listSorting__control{min-height:44px}
html body .toggle-top-products{min-height:44px;display:inline-flex;align-items:center}
/* zavření vyskakovacího okna */
html body #cboxClose{min-width:44px;min-height:44px}

/* ------------------------------------------------------------------
   5) FORMULÁŘE NA MOBILU – 16 px (bez zoomu iOS)
   ------------------------------------------------------------------ */
@media (max-width:767px){
  html body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  html body select,
  html body textarea{font-size:16px}
}

/* ------------------------------------------------------------------
   6) CENY – současná a původní, bez duplicitní slevy
   (Opal skládá ceny na kartě do sloupce s pevnou šířkou → nutné !important)
   ------------------------------------------------------------------ */
/* karta: současná cena Charcoal, původní (vkládá hb-ui-v1.js) Taupe přeškrtnutá vedle ní */
html body .products .product .prices{display:flex;flex-direction:row !important;flex-wrap:wrap !important;align-items:baseline !important;column-gap:10px;row-gap:2px}
html body .products .product .prices .price-final{width:auto !important;max-width:none !important;flex:0 0 auto !important}
html body .products .product .prices .price-final,
html body .products .product .prices .price-final strong{color:var(--hb-charcoal)}
html body .products .product .prices .price-measure{flex-basis:100%}
html body .products .product .prices .hb-price-old{
  font-family:var(--hb-mono);
  font-weight:400;
  font-size:13px;
  color:var(--hb-taupe);
  text-decoration:line-through;
}
/* 3 + 1 jako stručná obchodní informace u ceny (vkládá hb-ui-v1.js) */
html body .products .product .prices .hb-xy{
  flex-basis:100%;
  order:1;
  font-family:var(--hb-sans);
  font-size:12px;
  font-weight:600;
  color:var(--hb-charcoal);
}
html body .products .product .prices .price-measure{order:2}
/* detail: původní cena Taupe přeškrtnutá, sleva jako text „Akce −X %“ */
html body .price-line .price-standard,
html body .price-line .price-standard span{
  color:var(--hb-taupe);
  text-decoration:line-through;
  font-weight:400;
}
html body .price-line .price-save{color:var(--hb-charcoal);font-weight:600;font-family:var(--hb-sans)}
html body .price-line .price-save::before{content:"Akce "}
/* detail: štítek slevy na obrázku je duplicita řádku ceny → skrýt */
html body .p-image .flags-extra .flag-discount{display:none !important}

/* ------------------------------------------------------------------
   7) PŘÍZNAKY – text 12 / 600 Charcoal, bez podkladu (Brand Kit)
   (barva z administrace je inline a Opal má vlastní !important → nutné !important)
   ------------------------------------------------------------------ */
html body:not(#hb) .flags .flag,
html body:not(#hb) .flags .flag.flag-discount{
  background:none !important;
  background-color:transparent !important;
  color:var(--hb-charcoal) !important;
  font-family:var(--hb-sans);
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.4;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none;
  text-transform:none;
  white-space:nowrap;
}
html body .flags .flag .price-save{color:var(--hb-charcoal) !important;font-size:12px !important;font-weight:600 !important}
/* karta: řádek štítku pod obrázkem, drží místo i prázdný, max. jeden štítek */
html body .products .product a.image{position:relative;display:block;padding-bottom:24px}
html body .products .product a.image .flags{
  position:absolute !important;
  top:auto !important;
  bottom:2px !important;
  left:0 !important;
  right:auto !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  margin:0;
  padding:0;
  display:flex;
  gap:12px;
}
html body .products .product a.image .flags .flag{position:static !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important}
html body .products .product .flags-default .flag ~ .flag{display:none}
html body .products .product .flags-extra .flag-discount{display:flex;gap:6px;align-items:baseline}
html body .products .product .flags-extra .flag-discount .price-save::before{content:"Akce "}
/* se slevou se na kartě nezobrazí další štítek (Limitovaná edice zůstává v obsahu detailu) */
html body .products .product .p:has(.flag-discount) .flags-default{display:none}
html.hb-ui-js body .products .product .p.hb-has-disc .flags-default{display:none}
/* skrýt až po úspěšném přesunutí NA TÉ KARTĚ (třídu přidává hb-ui-v1.js jen po vložení) */
html body .products .product .p.hb-has-disc .flags-extra .flag-discount .price-standard{display:none}
html body .products .product .p.hb-has-xy .flag-xy-discount{display:none !important}
/* detail: podmínky 3 + 1 (nativní blok Shoptetu) bez červené */
html body .xyDiscount__title{color:var(--hb-charcoal)}

/* zesílení proti pevným pravidlům Opalu (specifičnost přes :not(#hb)) */
html body:not(#hb) .btn.btn-conversion,html body:not(#hb) #submit-order,html body:not(#hb) #continue-order-button,html body:not(#hb) form .btn.btn-primary:not(.products .product .btn),html body:not(#hb) .products .product button.btn.btn-cart.add-to-cart-button > span,html body:not(#hb) #colorbox .btn.next-step-back,html body:not(#hb) .btn.btn-secondary,html body:not(#hb) a.btn.btn-default.unveil-button,html body:not(#hb) .products .product a.btn.btn-primary{border-radius:999px !important}
@media (max-width:767px){html body:not(#hb) .p-detail .add-to-cart .btn.btn-conversion{height:52px !important;min-height:52px !important;padding:0 24px !important}}
/* text tlačítek na jeden řádek (Opal má line-height 40 px) */
html body .btn.btn-conversion,html body #submit-order,html body #continue-order-button,html body form .btn.btn-primary,html body #colorbox .btn.next-step-back,html body .btn.btn-secondary:not(.login-button),html body a.btn.btn-default.unveil-button,html body .products .product a.btn.btn-primary,html body #js-plugin-fixed-header-add-to-cart{line-height:1.2 !important;white-space:nowrap}
/* okno „Přidáno do košíku“ na mobilu: hlavní akce nahoře, obě na celou šířku */
@media (max-width:767px){html body #colorbox .advancedOrder__buttons{flex-direction:column-reverse;align-items:stretch;gap:8px}html body #colorbox .advancedOrder__buttons .btn{width:100%;margin:0 !important}}
html body #colorbox .advancedOrder__buttons .btn{box-sizing:border-box;height:auto !important;min-height:48px !important}
html body:not(#hb) .cart-content .remove-item{width:44px !important;height:44px !important}
html body .cart-content #discountCouponCode{min-height:44px;box-sizing:border-box}
/* informace 3 + 1 v košíku bez červené */
html body .cart-xyDiscount__title,html body .cart-xyDiscount__title .acronym{color:var(--hb-charcoal) !important;font-weight:600}
/* „Přihlásit se do mého účtu“ v checkoutu zůstává textovým odkazem */
html body a.btn.btn-secondary.login-button{background:transparent !important;border:0 !important;color:var(--hb-charcoal) !important;text-decoration:underline !important;text-underline-offset:4px;min-height:44px;height:auto !important;line-height:1.2 !important;padding:0 !important;display:inline-flex;align-items:center}
html body:not(#hb) a.btn.btn-secondary.login-button{min-height:44px !important;height:44px !important}
html body:not(#hb) .products .product a.btn.btn-primary,html body:not(#hb) #colorbox .btn.next-step-back,html body:not(#hb) .btn.btn-secondary:not(.login-button),html body:not(#hb) a.btn.btn-default.unveil-button{display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1.2 !important;height:auto !important}
html body:not(#hb) .cart-content #discountCouponCode{height:44px !important}
/* mobil: všechna primární CTA 16 / 600 (Balík 2 + Brand Kit) */
@media (max-width:767px){
  html body:not(#hb) .btn.btn-conversion,
  html body:not(#hb) #js-plugin-fixed-header-add-to-cart,
  html body:not(#hb) #continue-order-button,
  html body:not(#hb) #submit-order .order-button-text,
  html body:not(#hb) #submit-order,
  html body:not(#hb) form .btn.btn-primary:not(.products .product .btn),
  html body:not(#hb) form input.btn.btn-primary,
  html body:not(#hb) .products .product button.btn.btn-cart.add-to-cart-button > span{font-size:16px !important;font-weight:600 !important}
}

/* 3 + 1: ikona dárku bez červené (barva akce z administrace jde inline přes --xy-discount-banner-color) */
html body:not(#hb) .xyDiscount__banner,html body:not(#hb) .cart-xyDiscount__banner{--xy-discount-banner-color:var(--hb-charcoal) !important}
html body:not(#hb) .xyDiscount__icon,html body:not(#hb) .cart-xyDiscount__icon{background-color:transparent !important;color:var(--hb-charcoal) !important}
/* desktop: nákupní box na detailu 48 px a 15 / 600 (Opal vnucuje 58 px a 500) */
@media (min-width:768px){html body:not(#hb) .p-detail .add-to-cart .btn.btn-conversion{height:48px !important;min-height:48px !important;font-weight:600 !important}}
html body:not(#hb) .btn.btn-conversion,html body:not(#hb) #continue-order-button,html body:not(#hb) #submit-order{font-weight:600 !important}