/* ═══════════════════════════════════════════════════════════════════════════
   HURIKAN Computer — eshop.hurikan.cz · FINÁLNÍ CSS
   Platforma: Binargon / šablona demoeshopmaxi
   Vložit do: Admin → Vzhled → Vlastní CSS

   Selektory ověřeny proti živému HTML eshop.hurikan.cz (2026-06).
   Body třídy: fce-1 = homepage | fce-2/3 = kategorie | fce-6 = detail
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ───────────────────────────────────────────────────────────────────────────
   1 · DESIGN TOKENY
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --hc-green:        #84B71E;
  --hc-green-dark:   #6a9318;
  --hc-green-deep:   #4a7a00;
  --hc-green-mid:    #e4f2c5;
  --hc-green-light:  #f2f9e4;
  --hc-dark:         #1a2332;
  --hc-dark-2:       #253349;
  --hc-gray-900:     #111827;
  --hc-gray-700:     #374151;
  --hc-gray-600:     #4B5563;
  --hc-gray-500:     #6B7280;
  --hc-gray-400:     #9CA3AF;
  --hc-gray-300:     #D1D5DB;
  --hc-gray-200:     #E5E7EB;
  --hc-gray-100:     #F3F4F6;
  --hc-gray-50:      #F9FAFB;
  --hc-white:        #ffffff;
  --hc-orange:       #e07b00;
  --hc-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hc-r-xs:         4px;
  --hc-r-sm:         8px;
  --hc-r-md:         14px;
  --hc-r-lg:         20px;
  --hc-r-pill:       100px;
  --hc-sh-sm:        0 1px 4px rgba(0,0,0,.08);
  --hc-sh-md:        0 4px 16px rgba(0,0,0,.09);
  --hc-sh-lg:        0 8px 32px rgba(0,0,0,.12);
  --hc-sh-green:     0 4px 14px rgba(132,183,30,.35);
  --hc-focus:        0 0 0 3px rgba(132,183,30,.15);
  --hc-t:            0.2s ease;
}

/* ───────────────────────────────────────────────────────────────────────────
   2 · GLOBÁL — font, barvy, odkazy
   ─────────────────────────────────────────────────────────────────────────── */
body,
input, select, textarea, button {
  font-family: var(--hc-font) !important;
}
body {
  color: var(--hc-gray-700) !important;
  background: var(--hc-gray-50) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  color: var(--hc-dark) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
}
a {
  color: var(--hc-green) !important;
  text-decoration: none !important;
  transition: color var(--hc-t) !important;
}
a:hover { color: var(--hc-green-dark) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   3 · TLAČÍTKA — button-primary (Binargon primární třída)
   ─────────────────────────────────────────────────────────────────────────── */
.button-primary,
.productPurchase__button,
.fce6PurchaseControl__button,
input[type="submit"] {
  background: var(--hc-green) !important;
  color: #fff !important;
  border: 2px solid var(--hc-green) !important;
  border-radius: var(--hc-r-sm) !important;
  font-family: var(--hc-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all var(--hc-t) !important;
  text-decoration: none !important;
}
.button-primary:hover,
.productPurchase__button:hover,
.fce6PurchaseControl__button:hover,
input[type="submit"]:hover {
  background: var(--hc-green-dark) !important;
  border-color: var(--hc-green-dark) !important;
  color: #fff !important;
  box-shadow: var(--hc-sh-green) !important;
  transform: translateY(-1px) !important;
}

/* Sekundární / outline */
.button-secondary,
.button-outline {
  background: transparent !important;
  color: var(--hc-green) !important;
  border: 2px solid var(--hc-green) !important;
  border-radius: var(--hc-r-sm) !important;
  font-weight: 600 !important;
  transition: all var(--hc-t) !important;
}
.button-secondary:hover,
.button-outline:hover {
  background: var(--hc-green) !important;
  color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   4 · HEADER — .header (sticky, bílý)
   ─────────────────────────────────────────────────────────────────────────── */
header.header {
  background: var(--hc-white) !important;
  border-bottom: 1px solid var(--hc-gray-200) !important;
  box-shadow: var(--hc-sh-sm) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Logo */
.header__logo a,
.logo.logo--header {
  color: var(--hc-dark) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   5 · VYHLEDÁVÁNÍ — .search.search--default
   ─────────────────────────────────────────────────────────────────────────── */
.search__input,
input.search__input {
  border: 1.5px solid var(--hc-gray-300) !important;
  border-radius: var(--hc-r-sm) !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
  background: #fff !important;
  color: var(--hc-dark) !important;
  transition: border-color var(--hc-t), box-shadow var(--hc-t) !important;
}
.search__input:focus {
  border-color: var(--hc-green) !important;
  box-shadow: var(--hc-focus) !important;
  outline: none !important;
}
.search__button {
  background: var(--hc-green) !important;
  border-color: var(--hc-green) !important;
  color: #fff !important;
  border-radius: 0 var(--hc-r-sm) var(--hc-r-sm) 0 !important;
  transition: background var(--hc-t) !important;
}
.search__button:hover {
  background: var(--hc-green-dark) !important;
  border-color: var(--hc-green-dark) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   6 · HEADER CONTROLS — ikony (vyhledání, účet, košík)
   ─────────────────────────────────────────────────────────────────────────── */
.control__item {
  color: var(--hc-gray-700) !important;
  transition: color var(--hc-t) !important;
}
.control__item:hover {
  color: var(--hc-green) !important;
}
/* Košík — zelené pozadí */
.control__item--cart {
  background: var(--hc-green) !important;
  color: #fff !important;
  border-radius: var(--hc-r-sm) !important;
  padding: 8px 14px !important;
}
.control__item--cart:hover {
  background: var(--hc-green-dark) !important;
  color: #fff !important;
}
.control__item--cart img {
  filter: brightness(0) invert(1) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   7 · NAVIGACE — nav.menu.menu--default
   ─────────────────────────────────────────────────────────────────────────── */
nav.menu,
nav.menu .menu__container {
  background: var(--hc-green) !important;
}
/* Primární položky menu */
.cSubmenu__list-link,
nav.menu a {
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: background var(--hc-t), color var(--hc-t) !important;
}
.cSubmenu__list-link:hover,
nav.menu a:hover {
  background: var(--hc-green-dark) !important;
  color: #fff !important;
}
/* Aktivní položka */
.cSubmenu__list-link.active,
.cSubmenu__list-link--active,
nav.menu .active > a {
  background: var(--hc-green-dark) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
/* Dropdown submenu */
nav.menu .menu__dropdown,
.cSubmenu__content {
  background: #fff !important;
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: 0 0 var(--hc-r-md) var(--hc-r-md) !important;
  box-shadow: var(--hc-sh-lg) !important;
}
nav.menu .menu__dropdown a,
.cSubmenu__content a {
  color: var(--hc-gray-700) !important;
  font-weight: 400 !important;
}
nav.menu .menu__dropdown a:hover,
.cSubmenu__content a:hover {
  color: var(--hc-green) !important;
  background: var(--hc-green-light) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   8 · TOP BAR + TRUST BAR — injektováno JS (.h-topbar, .h-trustbar)
   ─────────────────────────────────────────────────────────────────────────── */
.h-topbar {
  background: var(--hc-dark) !important;
  color: rgba(255,255,255,.8) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 0 !important;
}
.h-topbar__inner {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.h-topbar__left {
  display: flex !important;
  gap: 20px !important;
}
.h-topbar__left span {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.h-topbar__right {
  display: flex !important;
  gap: 16px !important;
}
.h-topbar__right a {
  color: rgba(255,255,255,.8) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}
.h-topbar__right a:hover {
  color: var(--hc-green) !important;
}

.h-trustbar {
  background: var(--hc-green) !important;
  padding: 10px 0 !important;
}
.h-trustbar__inner {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.h-trustbar__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #fff !important;
}
.h-trustbar__icon {
  font-size: 20px !important;
}
.h-trustbar__item strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.h-trustbar__item span {
  font-size: 11px !important;
  opacity: .85 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   9 · DROBEČKOVÁ NAVIGACE — .commonBreadcrumb
   ─────────────────────────────────────────────────────────────────────────── */
.commonBreadcrumb {
  background: transparent !important;
  padding: 10px 0 !important;
  font-size: 13px !important;
}
.commonBreadcrumb a {
  color: var(--hc-green) !important;
}
.commonBreadcrumb a:hover {
  color: var(--hc-green-dark) !important;
  text-decoration: underline !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   10 · HOMEPAGE — kategorie a produkty
   ─────────────────────────────────────────────────────────────────────────── */
/* Kategoriové dlaždice */
.hpCategoriesSmall {
  background: transparent !important;
}
.commonSubcategories__item {
  background: #fff !important;
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: var(--hc-r-lg) !important;
  box-shadow: var(--hc-sh-sm) !important;
  transition: transform var(--hc-t), box-shadow var(--hc-t), border-color var(--hc-t) !important;
  color: var(--hc-dark) !important;
  font-weight: 500 !important;
}
.commonSubcategories__item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--hc-sh-lg) !important;
  border-color: var(--hc-green) !important;
  color: var(--hc-green) !important;
}

/* Produktové skupiny (carousel) */
.productsGroup__title {
  color: var(--hc-dark) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--hc-green) !important;
  padding-left: 12px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   11 · PRODUKTOVÁ KARTA — .product
   ─────────────────────────────────────────────────────────────────────────── */
.product {
  background: #fff !important;
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: var(--hc-r-lg) !important;
  box-shadow: var(--hc-sh-sm) !important;
  overflow: hidden !important;
  transition: transform var(--hc-t), box-shadow var(--hc-t), border-color var(--hc-t) !important;
}
.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--hc-sh-lg) !important;
  border-color: var(--hc-green) !important;
}
/* Název produktu v kartě */
.product .product__name a,
.product h2 a,
.product h3 a {
  color: var(--hc-dark) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.product .product__name a:hover,
.product h2 a:hover {
  color: var(--hc-green) !important;
}
/* Výrobce v kartě */
.productProducer__name {
  color: var(--hc-gray-500) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}
/* Cena v kartě */
.productPrice {
  color: var(--hc-dark) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.3px !important;
}
/* Přeškrtnutá stará cena */
.productPrice__old,
[class*="price--old"],
[class*="priceOld"] {
  color: var(--hc-gray-400) !important;
  text-decoration: line-through !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
/* Cena bez DPH */
.productPrice__vat,
[class*="priceVat"],
[class*="price__vat"] {
  color: var(--hc-gray-500) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
/* Tlačítko Do košíku v kartě */
.productPurchase__button {
  padding: 10px 18px !important;
  font-size: 14px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   12 · DOSTUPNOST — .cAvailabilityRow
   ─────────────────────────────────────────────────────────────────────────── */
.cAvailabilityRow--availability,
[class*="availability--in"],
[class*="availabil"][class*="stock"] {
  color: var(--hc-green) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
[class*="availability--out"],
[class*="availability--order"] {
  color: var(--hc-gray-500) !important;
  font-size: 13px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   13 · KATEGORIOVÁ STRÁNKA (fce-2) — sidebar + výpis
   ─────────────────────────────────────────────────────────────────────────── */
/* Sidebar */
.fce2__grid-side,
.grid-container-side {
  background: transparent !important;
}
/* Filtrační sekce v sidebaru */
.fce2__grid-side [class*="filterBox"],
.fce2__grid-side [class*="filter__"],
.fce2__grid-side > * {
  background: #fff !important;
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: var(--hc-r-md) !important;
  margin-bottom: 12px !important;
}
/* Nadpisy filtrů */
.fce2__grid-side h3,
.fce2__grid-side h4,
.fce2__grid-side [class*="title"] {
  color: var(--hc-dark) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-bottom: 2px solid var(--hc-green) !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}
/* Kategoriový strom */
.fce2__grid-side a {
  color: var(--hc-gray-700) !important;
  font-size: 14px !important;
  padding: 3px 6px !important;
  border-radius: var(--hc-r-xs) !important;
  display: block !important;
}
.fce2__grid-side a:hover,
.fce2__grid-side a.active {
  background: var(--hc-green-light) !important;
  color: var(--hc-green) !important;
}

/* Třídění / lišta nad výpisem */
.fce2-3 [class*="sort"],
.fce2-3 [class*="Sort"],
.fce2-3 [class*="bar"],
.fce2-3 [class*="Bar"] {
  background: #fff !important;
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: var(--hc-r-sm) !important;
  padding: 10px 16px !important;
  margin-bottom: 16px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   14 · PRODUKTOVÝ DETAIL (fce-6)
   ─────────────────────────────────────────────────────────────────────────── */
/* Název produktu */
.fce6Name,
.fce6Name h1 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--hc-dark) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}
/* Galerie */
.fce6__gallery {
  background: var(--hc-gray-50) !important;
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: var(--hc-r-lg) !important;
  overflow: hidden !important;
}
.fce6GalleryItem {
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: var(--hc-r-sm) !important;
  overflow: hidden !important;
  transition: border-color var(--hc-t) !important;
}
.fce6GalleryItem:hover,
.fce6GalleryItem.active,
.fce6GalleryItem--active {
  border-color: var(--hc-green) !important;
}
/* Cena v detailu */
.fce6Price {
  color: var(--hc-dark) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}
/* Box nákupu */
.fce6PurchaseControl {
  background: var(--hc-gray-50) !important;
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: var(--hc-r-lg) !important;
  padding: 20px !important;
}
/* Tlačítko Do košíku — velké */
.fce6PurchaseControl__button {
  padding: 15px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  width: 100% !important;
}
/* Dostupnost v detailu */
.fce6Availability {
  font-size: 14px !important;
}
/* Tabulka parametrů / setbind */
.fce6__setbind-table-title {
  color: var(--hc-dark) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-left: 4px solid var(--hc-green) !important;
  padding-left: 10px !important;
  margin-bottom: 12px !important;
}
.fce6__grid {
  gap: 24px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   15 · ŠTÍTKY — .label
   ─────────────────────────────────────────────────────────────────────────── */
.label {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 4px 10px !important;
  border-radius: var(--hc-r-xs) !important;
}
/* Sleva / promo */
.cPromoCode__discount,
.label--sale,
.label--discount {
  background: var(--hc-orange) !important;
  color: #fff !important;
}
/* Novinka / akce */
.label--new,
.label--action {
  background: var(--hc-green) !important;
  color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   16 · FORMULÁŘE
   ─────────────────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], select, textarea {
  border: 1px solid var(--hc-gray-300) !important;
  border-radius: var(--hc-r-sm) !important;
  padding: 11px 15px !important;
  font-size: 14px !important;
  color: var(--hc-dark) !important;
  background: #fff !important;
  font-family: var(--hc-font) !important;
  transition: border-color var(--hc-t), box-shadow var(--hc-t) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--hc-green) !important;
  box-shadow: var(--hc-focus) !important;
  outline: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   17 · PATIČKA — footer.footer
   ─────────────────────────────────────────────────────────────────────────── */
footer.footer {
  background: var(--hc-gray-900) !important;
  color: rgba(255,255,255,.65) !important;
}
.footer__top,
.footer__middle {
  background: var(--hc-gray-900) !important;
}
.footer__bottom {
  background: var(--hc-dark) !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.45) !important;
  font-size: 13px !important;
}
footer.footer h3,
footer.footer h4 {
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
footer.footer a {
  color: rgba(255,255,255,.6) !important;
}
footer.footer a:hover {
  color: var(--hc-green) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   18 · SCROLLBAR
   ─────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--hc-gray-100); }
::-webkit-scrollbar-thumb { background: var(--hc-green); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--hc-green-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   19 · RESPONZIVITA
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .fce6Name, .fce6Name h1 { font-size: 22px !important; }
  .fce6Price { font-size: 26px !important; }
  .h-trustbar__inner { gap: 8px !important; }
  .h-trustbar__item strong { font-size: 12px !important; }
}

@media (max-width: 768px) {
  body { font-size: 15px !important; }
  .h-topbar__inner { flex-direction: column !important; gap: 4px !important; text-align: center !important; }
  .h-trustbar__inner { flex-direction: column !important; align-items: flex-start !important; padding: 12px 16px !important; gap: 8px !important; }
  .fce6Name, .fce6Name h1 { font-size: 20px !important; }
  .fce6Price { font-size: 24px !important; }
  .fce6PurchaseControl__button { padding: 14px 20px !important; }
  .productsGroup__title { font-size: 17px !important; }
  footer.footer h3, footer.footer h4 { font-size: 12px !important; }
}