/* ============================================================
   Vylepšení tlačítka "Do košíku" v listingu kategorií
   ------------------------------------------------------------
   Soubor: tlacitko-do-kosiku.css
   Verze:  v1
   E-shop: vercajk-shop.cz (Shoptet, šablona Tomáš Hlad)

   Co dělá:
   • Default stav  → středně sytá broskvová s tmavě oranžovým
                     textem a ikonou košíku
   • Hover/focus   → plná oranžová #F97316 s bílým textem
   • Płatný pouze pro kartičky v listingu kategorií,
     hlavní tlačítko v detailu produktu zůstává nedotčené
   ============================================================ */

:root {
  --vs-cta-orange:        #F97316;  /* sytá oranžová – hover stav */
  --vs-cta-orange-deep:   #C2410C;  /* aktivní stav (kliknutí) */
  --vs-cta-bg:            #FED7AA;  /* světlé pozadí default stavu */
  --vs-cta-border:        #FDBA74;  /* okraj default stavu */
  --vs-cta-text:          #9A3412;  /* tmavá oranžová – text default */
}

/* ----------------------------------------------------------
   DEFAULT STAV
   ----------------------------------------------------------
   Cílíme na tlačítko v kartičkách produktů v listingu.
   Široké pokrytí běžných Shoptet selektorů.
   ---------------------------------------------------------- */
html body .products-block .p .add-to-cart,
html body .products-block .product .add-to-cart,
html body .product-list .p .add-to-cart,
html body .category-products .add-to-cart,
html body .products .p .add-to-cart,
html body .products .product .add-to-cart,
html body .p .add-to-cart,
html body .product .add-to-cart,
html body .p .btn-buy,
html body .product .btn-buy,
html body .products-block .p button.add-to-cart,
html body .products-block .p a.add-to-cart {
  background-color: var(--vs-cta-bg) !important;
  border: 1px solid var(--vs-cta-border) !important;
  color: var(--vs-cta-text) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease,
              color 0.18s ease,
              border-color 0.18s ease !important;
}

/* ----------------------------------------------------------
   HOVER / FOCUS / ACTIVE STAV
   ----------------------------------------------------------
   Plná sytá oranžová s bílým textem – jasné "klikni mě"
   ---------------------------------------------------------- */
html body .products-block .p .add-to-cart:hover,
html body .products-block .product .add-to-cart:hover,
html body .product-list .p .add-to-cart:hover,
html body .category-products .add-to-cart:hover,
html body .products .p .add-to-cart:hover,
html body .products .product .add-to-cart:hover,
html body .p .add-to-cart:hover,
html body .product .add-to-cart:hover,
html body .p .btn-buy:hover,
html body .product .btn-buy:hover,
html body .products-block .p .add-to-cart:focus,
html body .products-block .product .add-to-cart:focus,
html body .p .add-to-cart:focus,
html body .product .add-to-cart:focus {
  background-color: var(--vs-cta-orange) !important;
  border-color: var(--vs-cta-orange) !important;
  color: #ffffff !important;
}

/* Při kliknutí o trochu tmavší – zpětná vazba "kliknuto" */
html body .products-block .p .add-to-cart:active,
html body .products-block .product .add-to-cart:active,
html body .p .add-to-cart:active,
html body .product .add-to-cart:active {
  background-color: var(--vs-cta-orange-deep) !important;
  border-color: var(--vs-cta-orange-deep) !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   IKONA KOŠÍKU PŘED TEXTEM
   ----------------------------------------------------------
   SVG ikona přes CSS mask – automaticky převezme barvu textu
   (tmavě oranžová v defaultu, bílá v hoveru).

   Pokud nechceš ikonu, smaž celý tento blok (nic jiného
   se tím nepokazí).
   ---------------------------------------------------------- */
html body .products-block .p .add-to-cart::before,
html body .products-block .product .add-to-cart::before,
html body .product-list .p .add-to-cart::before,
html body .category-products .add-to-cart::before,
html body .products .p .add-to-cart::before,
html body .p .add-to-cart::before,
html body .product .add-to-cart::before,
html body .p .btn-buy::before,
html body .product .btn-buy::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}