/* ============================================
   ELEKTROSVĚT - SHOPTET REDESIGN
   Verze se skutečnými třídami šablony

   Vlož přes FTP do /user/documents/ a v zápatí odkaž:
   <link rel="stylesheet" href="/user/documents/shoptet-redesign.css?v=2">
   Po každé úpravě zvyš verzi (?v=3, ?v=4...) kvůli cache.

   Kódování ulož jako UTF-8, ať nejsou rozbité české znaky.
   ============================================ */

/* ---------- 1) BAREVNÁ PALETA ---------- */
:root {
  --barva-primarni: #1a56db;      /* hlavní modrá */
  --barva-primarni-hover: #1543ad;
  --barva-akcent: #f5c518;        /* žlutá */
  --barva-sleva: #e02424;         /* červená - slevy */
  --barva-text: #1f2937;
  --barva-text-svetla: #6b7280;
  --barva-pozadi-svetle: #f7f9fc;
  --radius-karta: 12px;
  --radius-tlacitko: 8px;
  --stin-karta: 0 2px 8px rgba(0, 0, 0, 0.06);
  --stin-karta-hover: 0 8px 20px rgba(0, 0, 0, 0.10);
}

/* ---------- 2) TYPOGRAFIE ---------- */
body {
  color: var(--barva-text);
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- 3) HLAVNÍ TLAČÍTKA (.btn) ---------- */
.btn,
.btn-conversion,
a.btn-conversion {
  border-radius: var(--radius-tlacitko);
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}

/* ---------- 4) TLAČÍTKO DO KOŠÍKU ---------- */
.btn-cart,
.add-to-cart-button,
button.btn.btn-cart {
  background: var(--barva-primarni) !important;
  color: #fff !important;
  border-radius: var(--radius-tlacitko) !important;
  font-weight: 600 !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.btn-cart:hover,
.add-to-cart-button:hover,
button.btn.btn-cart:hover {
  background: var(--barva-primarni-hover) !important;
}

/* ---------- 5) CENY ---------- */
/* finální / hlavní cena */
.price-final,
.price-wrapper .price-final {
  color: var(--barva-primarni);
  font-weight: 700;
  font-size: 18px;
}

/* původní (přeškrtnutá) cena */
.price-standard {
  color: var(--barva-text-svetla);
  text-decoration: line-through;
  font-size: 13px;
  font-weight: 400;
}

/* úspora / sleva */
.price-save {
  color: var(--barva-sleva);
  font-weight: 600;
  font-size: 13px;
}

/* cena za jednotku (např. Kč/m) */
.price-measure,
.price-additional {
  color: var(--barva-text-svetla);
  font-size: 13px;
}

/* ---------- 6) PRODUKTOVÉ KARTY ---------- */
/* Pozn.: obalový prvek karty ověř přes Prozkoumat.
   Časté třídy: .product, .products .product, .p-item.
   Uprav selektor níže podle reality, pokud nezabere. */
.products .product,
.product-item,
.p-item {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: var(--radius-karta);
  box-shadow: var(--stin-karta);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.products .product:hover,
.product-item:hover,
.p-item:hover {
  box-shadow: var(--stin-karta-hover);
  transform: translateY(-4px);
}

/* název produktu */
.products .name,
.products .name a {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--barva-text);
}

/* slevový štítek (flag/badge) - ověř třídu přes Prozkoumat */
.flag,
.flag-discount,
.product-flag {
  background: var(--barva-sleva);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

/* dostupnost skladem - zelená */
.availability-value,
.availability .amount {
  color: #16a34a;
  font-weight: 600;
}

/* ---------- 7) VYHLEDÁVÁNÍ V HLAVIČCE ---------- */
/* Selektory ověř přes Prozkoumat nad polem hledání.
   Časté: .search-autocomplete input, #search input */
.search input[type="text"],
.search-autocomplete input,
input.autocomplete-input {
  border-radius: var(--radius-tlacitko) 0 0 var(--radius-tlacitko);
  border: 1px solid #e5e7eb;
  padding: 12px 16px;
}

.search .btn,
.search button {
  background: var(--barva-primarni);
  border-radius: 0 var(--radius-tlacitko) var(--radius-tlacitko) 0;
  color: #fff;
  font-weight: 600;
  border: none;
}

.search .btn:hover,
.search button:hover {
  background: var(--barva-primarni-hover);
}

/* ---------- 8) DLAŽDICE KATEGORIÍ NA ÚVODU ---------- */
/* Ověř třídu přes Prozkoumat nad dlaždicí kategorie */
.category-box,
.homepage-category {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: var(--radius-karta);
  box-shadow: var(--stin-karta);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.category-box:hover,
.homepage-category:hover {
  box-shadow: var(--stin-karta-hover);
  transform: translateY(-3px);
}

/* ---------- 9) PATIČKA ---------- */
/* Ověř třídu přes Prozkoumat (často .footer, #footer) */
.footer a,
#footer a {
  color: var(--barva-text-svetla);
  transition: color 0.2s ease;
}

.footer a:hover,
#footer a:hover {
  color: var(--barva-primarni);
}

/* ---------- 10) RESPONZIVNÍ ÚPRAVY ---------- */
@media (max-width: 768px) {
  h1 { font-size: 26px; }
  .price-final { font-size: 16px; }
}