/* karty-4.css — NÁVRH 1 „Vzdušná“, UPRAVENÁ podľa pripomienok z 8. 10. 2026 (vychádza z karty-1.css):
   • cena väčšia a menej hrubá (19 px / 700 namiesto 17 px / 800)
   • dostupnosť vpravo od ceny väčšia, ako je vo výpise dnes (15 px / 700); v úzkych kartách a na mobile na vlastnom riadku
   • názov pri prejdení myšou zozelenie (ako v návrhu 3 Galéria), bez podčiarknutia
   • srdiečko obľúbených je na fotke vidieť stále, v štýle Airbnb (obrys + polopriehľadná výplň); farby berie z nastavení doplnku
   • fotka (priblíženie pri prejdení myšou) a riadok so zľavovým kódom ostali bez zmeny
   Len CSS nad existujúcim HTML šablóny; platí pre mriežku výpisu (.products-page.products-block). */
.products-page.products-block { margin-left: -10px; margin-right: -10px; width: auto; max-width: none; }
.products-page.products-block > .product { margin: 0 !important; padding: 10px 10px 22px !important; border: 0 !important; background: none; }
.products-page.products-block > .product:hover { box-shadow: none !important; }

.products-page.products-block > .product .p { position: relative; display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; border: 0; background: none; container: kt / inline-size; }

/* fotka: sivá dlaždica; biele pozadie produktových fotiek s ňou splynie (multiply), fotky v interiéri sa nezmenia */
.products-page.products-block > .product .p > a.image { position: relative; display: block; flex: none; margin: 0; padding: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #f3f3f3; isolation: isolate; }
.products-page.products-block > .product .p > a.image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.products-page.products-block > .product .p .flags { top: 10px; left: 10px; }
/* srdiečko obľúbených je na konci súboru (platí pre všetky výpisy produktov, nielen pre kategóriu) */

/* text pod fotkou: názov → cena + dostupnosť → zľavový kód */
.products-page.products-block > .product .p .p-in { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1 1 auto; width: auto; margin: 0; padding: 12px 2px 0; }
.products-page.products-block > .product .p .p-in-in { order: 1; flex: 0 0 auto; width: auto; margin: 0; padding: 0; }
.products-page.products-block > .product .p a.name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: auto; max-height: none; min-height: 2.7em;
  margin: 0; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: #202020; text-align: left; text-decoration: none; transition: color .15s; }
/* celá karta je odkaz na produkt; srdiečko, kód zľavy a nápoveda dostupnosti ostávajú nad ním */
.products-page.products-block > .product .p a.name::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; border-radius: 12px; }
.products-page.products-block > .product .p a.name:focus-visible { outline: none; }
.products-page.products-block > .product .p a.name:focus-visible::before { outline: 3px solid #1d6441; outline-offset: 2px; }

/* šablóna dáva do spodku karty pomocné ::before/::after (clearfix) – v mriežke a flexe by zavadzali */
.products-page.products-block > .product .p .p-bottom::before, .products-page.products-block > .product .p .p-bottom::after, .products-page.products-block > .product .p .p-bottom > div::before, .products-page.products-block > .product .p .p-bottom > div::after { content: none; display: none; }
.products-page.products-block > .product .p .p-bottom { order: 2; flex: none; width: auto; margin: 6px 0 0; padding: 0 !important; border: 0; }
.products-page.products-block > .product .p .p-bottom > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.products-page.products-block > .product .p .p-bottom > div .prices { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0 7px; margin: 0; padding: 0; border: 0; text-align: left; white-space: nowrap; }
.products-page.products-block > .product .p .p-bottom > div .price-final { order: 0; width: auto; margin: 0; padding: 0; font-size: 19px; line-height: 1.3; color: #e12a30; text-align: left; }
.products-page.products-block > .product .p .p-bottom > div .price-final strong { font-size: inherit; font-weight: 700; color: inherit; }
.products-page.products-block > .product .p .p-bottom > div .price-final small { font-size: 13px; font-weight: 600; color: #6b6b6b; }
.products-page.products-block > .product .p .p-bottom > div .price-standard { order: 1; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.3; color: #6b6b6b; text-decoration: line-through; }
.products-page.products-block > .product .p .p-bottom > div .price-standard strong { font-weight: 500; color: inherit; }
.products-page.products-block > .product .p .p-bottom > div .price-save { order: 2; margin: 0; padding: 0; font-size: 13px; font-weight: 700; line-height: 1.3; color: #e12a30; }
/* cena za mernú jednotku (mäkké sklo: „62,90 € / 1 m2“) na vlastnom riadku pod cenou, drobná sivá – dostupnosť tak ostane vpravo */
.products-page.products-block > .product .p .p-bottom > div .price-measure { order: 3; flex: 0 0 100%; margin: 0; padding: 0; font-size: 12.5px; font-weight: 400; line-height: 1.3; color: #6b6b6b; text-align: left; white-space: nowrap; }
.products-page.products-block > .product .p .p-bottom > div .p-tools { display: none; }
.products-page.products-block > .product .p .p-bottom > div .availability { margin: 0; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: left; }
.products-page.products-block > .product .p .p-bottom > div .availability span { font-size: inherit; font-weight: inherit; }
.products-page.products-block > .product .p .p-bottom > div .availability .show-tooltip { position: relative; z-index: 2; }
.products-page.products-block > .product .p .p-bottom > div .availability .availability-amount { display: none; }

/* zľavový kód doplnku ako jeden riadok: „ZĽAVA -15 %  od 19,60 €  [Kód: HOP15]“ */
.products-page.products-block > .product .p .shkDiscountPromoSpace { display: none; }
.products-page.products-block > .product .p .shkDiscountPromoProduct { order: 3; width: auto; max-width: none; margin: 9px 0 0 !important; }
.products-page.products-block > .product .p .shkDiscountPromoProduct__content { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 5px 5px 5px 8px; border-radius: 8px; background: #fff5d6; }
.products-page.products-block > .product .p .shkDiscountPromoProduct__header { position: static; width: auto; max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; color: #6f4500; font-size: 11px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.products-page.products-block > .product .p .shkDiscountPromoProduct__content__main { display: contents; }
.products-page.products-block > .product .p .shkDiscountPromoProduct__content__priceWrap { display: block; }
.products-page.products-block > .product .p .shkDiscountPromoProduct__content__promoPrice { font-size: 14px; font-weight: 800; line-height: 1.3; color: #b3261e; }
.products-page.products-block > .product .p .shkDiscountPromoProduct__content__promoWrap { margin-left: auto; }
.products-page.products-block > .product .p .shkDiscountPromoProduct__content__promoCode { position: relative; z-index: 2; display: inline-block; margin: 0; padding: 1px 5px; border: 1px dashed #c9a23c; border-radius: 6px; background: #fff;
  color: #202020; font-size: 11.5px; font-weight: 700; line-height: 1.45; text-decoration: none; white-space: nowrap; }
.products-page.products-block > .product .p .shkDiscountPromoProduct__bottom { display: none; }

@media (hover: hover) {
  .products-page.products-block > .product .p:hover > a.image img { transform: scale(1.04); }
  .products-page.products-block > .product .p:hover a.name { color: #1d6441; text-decoration: none; }
}

/* úzke karty (4 – 5 stĺpcov): dostupnosť na vlastnom riadku pod cenou, aby sa v rade nezalamovala len niekde */
@container kt (max-width: 219px) {
  .products-page.products-block > .product .p a.name { font-size: 14px; }
  .products-page.products-block > .product .p .p-bottom > div .price-final { font-size: 18px; }
  .products-page.products-block > .product .p .p-bottom > div .availability { flex: 0 0 100%; font-size: 14px; }
  .products-page.products-block > .product .p .shkDiscountPromoProduct__header { display: none; }
}
@media (max-width: 767px) {
  .products-page.products-block { margin-left: -6px; margin-right: -6px; }
  .products-page.products-block > .product { padding: 6px 6px 16px !important; }
  .products-page.products-block > .product .p > a.image { border-radius: 10px; }
  .products-page.products-block > .product .p .p-in { padding-top: 9px; }
  .products-page.products-block > .product .p a.name { font-size: 14px; }
  .products-page.products-block > .product .p .p-bottom > div .price-final { font-size: 18px; }
  .products-page.products-block > .product .p .p-bottom > div .availability { flex: 0 0 100%; font-size: 14px; }
  .products-page.products-block > .product .p .flags { top: 8px; left: 8px; }
  .products-page.products-block > .product .p .shkDiscountPromoProduct__header { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .products-page.products-block > .product .p > a.image img, .products-page.products-block > .product .p a.name { transition: none; }
  .products-page.products-block > .product .p:hover > a.image img { transform: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   SRDIEČKO OBĽÚBENÝCH v štýle Airbnb – pre VŠETKY výpisy produktov (kategória, vyhľadávanie, pásy na úvodnej stránke
   a v detaile), aby vyzeralo všade rovnako. Tvar a polopriehľadná výplň sú tu; FARBY URČUJE DOPLNOK v administrácii
   (Správca doplnkov → Obľúbené produkty → Nastavenie → časť pre kategóriu):
     „Farba pridať k obľúbeným“     = obrys srdiečka (biela FFFFFF = ako Airbnb, červená FF0000 = červený obrys)
     „Farba Odobrať z obľúbených“   = celé srdiečko po pridaní medzi obľúbené (výplň aj obrys)
   Ikonu doplnku (znak písma „oblibene“) nahrádzajú dve vrstvy s maskou v tvare srdca – znak písma nevie mať výplň.
   --------------------------------------------------------------------------------------------------------------- */
.product .p .dkLabFavouriteProductDiv.onlyIcon { top: 7px; right: 7px; left: auto; z-index: 3; width: 36px; height: 36px; font-size: 0; }
.product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan { position: relative; display: block; width: 36px; height: 36px; margin: 0; padding: 0; transition: transform .15s; }
.product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.hasIcon::before, .product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.hasIcon::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; font-size: 0; }
/* výplň: polopriehľadná tmavá (číta sa na svetlej aj tmavej fotke) */
.product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.hasIcon::before { background: var(--kt-heart-fill, rgba(0, 0, 0, .5)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / 26px 26px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / 26px 26px no-repeat; }
/* obrys: farba „pridať“ z doplnku */
.product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.hasIcon::after { background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat; }
/* po pridaní medzi obľúbené: celé srdiečko (výplň aj obrys) farbou „odobrať“ z doplnku */
.product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.hasIcon.dkLabFavouriteProductLinkRemove::before, .product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.hasIcon.dkLabFavouriteProductLinkRemove::after { background: currentColor; }
/* doplnok pri prejdení myšou mení farbu na farbu šablóny – srdiečko si drží svoje farby a len sa mierne zväčší */
.product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.dkLabFavouriteProductLinkAdd:hover { color: var(--dklab-favourites-add-text-color); }
.product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan.dkLabFavouriteProductLinkRemove:hover { color: var(--dklab-favourites-remove-text-color); }
@media (hover: hover) {
  .product .p .dkLabFavouriteProductDiv.onlyIcon .dkLabFavProductSpan:hover { transform: scale(1.12); }
}