/* =========================================================
   SOFTLEGAL – Produktové karty Shoptet Classic
   Verze: v11-flags-circle
   Cíl: profi karty ve stylu Softabe, oranžová Druhotná/Nová licence,
   červená AKCE, sleva jako červené kolečko vpravo nahoře,
   jemnější fonty, zelené CTA bez ikony košíku.

   ---------------------------------------------------------
   CO ŘEŠÍ TATO VERZE (shrnutí celé cesty v8 → v11)
   ---------------------------------------------------------
   Shoptet dává akční info do DVOU různých míst v kartě:

     .flag-action    (v kontejneru .flags-default)
                     = ruční příznak, má vlastní text „Akce"

     .flag-discount  (v kontejneru .flags-extra)
                     = automatický slevový štítek, UVNITŘ kterého
                       jsou schované .price-standard (899 Kč)
                       a .price-save (–55 %)

   Chyby, které se postupně projevily:
   1) v8 – oba štítky se přejmenovávaly na „AKCE" (font-size:0 + :after)
           → dva červené „AKCE" přes sebe (.flags-extra má napevno
             top:65px a hlavní sloupec se dvěma štítky sahá níž).
   2) v9 – slevový štítek se skryl → zmizela i přeškrtnutá cena,
           protože 899 Kč / –55 % žijí JEN uvnitř toho štítku.
   3) v10 – .flag-action ukazoval vlastní text „Akce" + přidané
            „AKCE" → „AKCEAKCE"; a 899 Kč / –55 % se renderovaly
            ve 20px pod sebou → přetekly z 30px bubliny ven.

   ŘEŠENÍ v11:
     - .flag-action  → JEDEN čistý červený štítek „AKCE"
     - .flags-extra  → neviditelná vrstva přes celý obrázek
     - .flag-discount → červené KOLEČKO vpravo nahoře, uvnitř
                        přeškrtnutá původní cena a pod ní sleva
     - .p-code („Kód: 46") → skrytý, aby byl roh volný pro kolečko

   Pozn.: využívá CSS :has() – podporováno všemi aktuálními
   prohlížeči (Chrome/Edge 105+, Safari 15.4+, Firefox 121+).
   ========================================================= */

/* GRID PRODUKTŮ */
.products-block{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:34px!important;
  align-items:stretch!important;
  max-width:1280px;
  margin-left:auto!important;
  margin-right:auto!important;
}

.products-block .product{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

/* KARTA */
.products-block .product .p{
  position:relative!important;
  height:100%!important;
  min-height:520px;
  padding:30px 30px 26px!important;
  border-radius:24px!important;
  border:1px solid #dcecff!important;
  background:#fff!important;
  box-shadow:0 18px 42px rgba(7,31,72,.07)!important;
  overflow:hidden!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}

.products-block .product .p:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 24px 55px rgba(7,31,72,.12)!important;
  border-color:#bdd9ff!important;
}

/* OBRÁZEK */
.products-block .product .image,
.products-block .product .p-image{
  height:245px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 0 22px!important;
  padding:12px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff 0%,#f7fbff 100%)!important;
}

.products-block .product img{
  max-height:218px!important;
  max-width:90%!important;
  object-fit:contain!important;
  transition:transform .22s ease!important;
}

.products-block .product .p:hover img{transform:scale(1.025)!important;}

/* NÁZEV PRODUKTU – MÉNĚ TUČNÝ */
.products-block .product .name,
.products-block .product .p-name{
  display:block!important;
  min-height:58px!important;
  margin:0 0 18px!important;
  color:#06182f!important;
  font-size:21px!important;
  line-height:1.22!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
}

.products-block .product .name a,
.products-block .product .p-name a{
  color:#06182f!important;
  text-decoration:none!important;
}

.products-block .product .name a:hover,
.products-block .product .p-name a:hover{color:#256fe8!important;}

/* KÓD PRODUKTU – skrytý, uvolňuje pravý horní roh pro kolečko se slevou.
   (Kód zůstává vidět na detailu produktu.)
   Kdybys ho chtěl zpět, smaž tento blok a kolečku níž nastav top:96px. */
.products-block .product .p-code,
.products-block .product .code{
  display:none!important;
}

/* =========================================================
   ŠTÍTKY VLEVO NAHOŘE (licence, AKCE, TIP)
   Pozor: kontejner slevy má třídy "flags flags-extra", proto
   je zde .flags:not(.flags-extra) – ať se nastavení sloupce
   nepřenáší na vrstvu se slevovým kolečkem.
   ========================================================= */
.products-block .product .flags:not(.flags-extra),
.products-block .product .flags-default{
  position:absolute!important;
  top:26px!important;
  left:26px!important;
  z-index:9!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:6px!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Každý štítek jako malá vodorovná kapsle */
.products-block .product .flag,
.products-block .product .flags .flag,
.products-block .product .flags-default .flag{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:999px!important;
  color:#fff!important;
  font-size:12px!important;
  line-height:30px!important;
  font-weight:800!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
  letter-spacing:.02em!important;
  box-sizing:border-box!important;
  transform:none!important;
  box-shadow:0 8px 16px rgba(0,0,0,.12)!important;
}

/* AKCE – JEDEN čistý štítek (vlastní text „Akce").
   Žádný trik font-size:0 + :after, takže nevzniká „AKCEAKCE". */
.products-block .product .flag-action{
  width:auto!important;
  min-width:74px!important;
  height:30px!important;
  border-radius:999px!important;
  background:#ef1717!important;
  font-size:12px!important;
}
.products-block .product .flag-action > *{display:none!important;}
.products-block .product .flag-action::after{content:none!important;}

/* TIP */
.products-block .product .flag-tip{
  width:auto!important;
  min-width:64px!important;
  height:30px!important;
  border-radius:999px!important;
  background:#1673e8!important;
  font-size:0!important;
}
.products-block .product .flag-tip *{display:none!important;}
.products-block .product .flag-tip::after{
  content:"TIP";
  display:inline!important;
  font-size:12px!important;
  line-height:30px!important;
  font-weight:800!important;
  color:#fff!important;
}

/* Typ licence */
.products-block .product .flag-new{
  background:#ef1717!important;
}

.products-block .product .flag-custom1,
.products-block .product .flag-custom2,
.products-block .product .flag-custom3{
  background:#ff8500!important;
}

/* =========================================================
   SLEVA JAKO KOLEČKO VPRAVO NAHOŘE
   .flags-extra se roztáhne přes celý obrázek jako neviditelná
   vrstva (pointer-events:none, aby neblokovala proklik),
   a .flag-discount se v ní ukotví do pravého horního rohu.
   ========================================================= */
.products-block .product .flags-extra{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:10!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
}

/* Samotné kolečko */
.products-block .product .flags-extra .flag-discount{
  position:absolute!important;
  top:22px!important;
  right:22px!important;
  left:auto!important;
  width:72px!important;
  height:72px!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#ef1717!important;
  font-size:0!important;
  box-shadow:0 10px 22px rgba(239,23,23,.30)!important;
}
.products-block .product .flags-extra .flag-discount::after{content:none!important;}

/* Přeškrtnutá původní cena uvnitř kolečka */
.products-block .product .flags-extra .flag-discount .price-standard{
  position:static!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 0 1px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(255,255,255,.82)!important;
  text-decoration:line-through!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:nowrap!important;
}

/* Výše slevy uvnitř kolečka */
.products-block .product .flags-extra .flag-discount .price-save{
  position:static!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:17px!important;
  font-weight:800!important;
  line-height:1.05!important;
  letter-spacing:-.01em!important;
  text-transform:none!important;
  white-space:nowrap!important;
}

/* Pojistka: kdyby Shoptet vložil do .flags-extra ještě jiný štítek
   než slevový, ať se poskládá vlevo pod hlavní štítky a nepřekrývá se. */
.products-block .product .flags-extra .flag:not(.flag-discount){
  position:absolute!important;
  left:26px!important;
  top:98px!important;
}
.products-block .product .flags-extra .flag:not(.flag-discount) ~ .flag:not(.flag-discount){
  top:134px!important;
}

/* Mobil – mírně menší odsazení a kolečko */
@media(max-width:575px){
  .products-block .product .flags:not(.flags-extra),
  .products-block .product .flags-default{
    top:18px!important;
    left:18px!important;
  }
  .products-block .product .flags-extra .flag-discount{
    top:18px!important;
    right:18px!important;
    width:66px!important;
    height:66px!important;
  }
  .products-block .product .flags-extra .flag-discount .price-standard{font-size:10px!important;}
  .products-block .product .flags-extra .flag-discount .price-save{font-size:16px!important;}
  .products-block .product .flags-extra .flag:not(.flag-discount){left:18px!important;top:90px!important;}
}

/* SKLADEM */
.products-block .product .availability,
.products-block .product .availability-amount,
.products-block .product .p-tools .availability{
  color:#16842d!important;
  font-size:14px!important;
  font-weight:700!important;
  text-align:right!important;
}

/* CENY */
.products-block .product .price,
.products-block .product .prices{
  margin-top:10px!important;
  color:#050910!important;
}

.products-block .product .price-final,
.products-block .product .price strong,
.products-block .product .price{
  color:#050910!important;
  font-size:27px!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
}

/* Přeškrtnutá cena PŘÍMO V CENOVÉM BLOKU.
   Záměrně omezeno na .prices – aby to nezasahovalo do cen
   schovaných uvnitř slevového kolečka výše. Uplatní se, pokud
   v administraci vypneš zobrazování slevy štítkem a Shoptet
   vrátí původní cenu nativně vedle aktuální ceny. */
.products-block .product .prices .price-standard,
.products-block .product .prices .old-price,
.products-block .product .prices .price-save,
.products-block .product .prices .price-additional{
  color:#8b90a0!important;
  font-size:20px!important;
  font-weight:500!important;
  text-decoration:line-through!important;
}

/* SPODNÍ ČÁST */
.products-block .product .p-bottom,
.products-block .product .p-tools{
  margin-top:18px!important;
  border:0!important;
}

/* TLAČÍTKO – ZELENÉ */
.products-block .product .btn,
.products-block .product .btn-cart,
.products-block .product .button,
.products-block .product .btn-primary,
.products-block .product .p-tools .btn,
.products-block .product .p-tools .btn-cart{
  min-width:0!important;
  width:100%!important;
  max-width:210px!important;
  height:58px!important;
  border:0!important;
  border-radius:999px!important;
  background:#25b84b!important;
  color:#fff!important;
  font-size:17px!important;
  font-weight:700!important;
  text-transform:none!important;
  box-shadow:0 14px 28px rgba(37,184,75,.24)!important;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease!important;
}

.products-block .product .btn:hover,
.products-block .product .btn-cart:hover,
.products-block .product .button:hover,
.products-block .product .btn-primary:hover,
.products-block .product .p-tools .btn:hover,
.products-block .product .p-tools .btn-cart:hover{
  background:#16983a!important;
  color:#fff!important;
  transform:translateY(-2px)!important;
  box-shadow:0 18px 34px rgba(37,184,75,.32)!important;
}

/* Odstranění nevzhledné ikony košíku v CTA */
.products-block .product .btn:after,
.products-block .product .btn-cart:after,
.products-block .product .button:after,
.products-block .product .btn-primary:after{
  content:none!important;
  display:none!important;
}

/* Když Shoptet do tlačítka vloží vlastní SVG/ikonku košíku */
.products-block .product .btn .icon,
.products-block .product .btn-cart .icon,
.products-block .product .button .icon,
.products-block .product .btn-primary .icon,
.products-block .product .btn svg,
.products-block .product .btn-cart svg,
.products-block .product .button svg,
.products-block .product .btn-primary svg{
  display:none!important;
}

/* Hvězdičky, pokud budou zapnuté */
.products-block .product .stars,
.products-block .product .rating{
  color:#f6b014!important;
  font-size:21px!important;
  margin-bottom:12px!important;
}

/* NADPIS SEKCE */
.homepage-products h2,
.products-wrapper h2,
.content h2{
  max-width:1280px!important;
  margin:48px auto 28px!important;
  color:#111827!important;
  font-size:28px!important;
  line-height:1.2!important;
  font-weight:500!important;
  letter-spacing:-.015em!important;
  text-align:center!important;
}

/* ZRUŠENÍ CLASSIC LINEK */
.products-block .product,
.products-block .product .p,
.products-block .product .p-in,
.products-block .product .p-bottom{border-bottom:0!important;}

/* TABLET */
@media(max-width:991px){
  .products-block{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important;padding:0 18px!important;}
  .products-block .product .p{min-height:500px;padding:24px!important;border-radius:22px!important;}
  .products-block .product .image,.products-block .product .p-image{height:220px!important;}
  .products-block .product .name,.products-block .product .p-name{font-size:20px!important;}
}

/* MOBIL */
@media(max-width:575px){
  .products-block{grid-template-columns:1fr!important;gap:22px!important;padding:0 14px!important;}
  .products-block .product .p{min-height:auto;padding:22px!important;border-radius:20px!important;}
  .products-block .product .image,.products-block .product .p-image{height:215px!important;}
  .products-block .product .name,.products-block .product .p-name{min-height:auto!important;font-size:21px!important;}
  .products-block .product .price-final,.products-block .product .price strong,.products-block .product .price{font-size:27px!important;}
  .products-block .product .btn,.products-block .product .btn-cart,.products-block .product .button,.products-block .product .btn-primary{height:56px!important;max-width:none!important;}
  .homepage-products h2,.products-wrapper h2,.content h2{font-size:25px!important;margin:36px auto 22px!important;}
}