/*
 * ATV Centrum — catalog.css — Katalogové stránky
 * Závisí na: base.css, components.css (product card styles)
 */

/* ============================================
   CATALOG SECTION + LAYOUT SPACING
   ============================================ */
.catalog-section {
  padding: 48px 0 100px;
  background: var(--gray-50);
}
.catalog-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ============================================
   CATALOG HEADER (count + active filters + view)
   ============================================ */
.catalog-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 4px;
}
.catalog-count {
  font-family: var(--font-primary);
  font-size: 14px; color: var(--gray-400);
}
.catalog-count strong { color: var(--navy); font-weight: 700; }

.active-filter-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.active-filter-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal-light); color: var(--teal-dark);
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  padding: 5px 12px; border-radius: 100px;
  text-transform: uppercase;
}
.active-filter-tag button {
  background: none; border: none; cursor: pointer;
  color: var(--teal-dark); font-size: 14px; line-height: 1;
  padding: 0; margin-left: 2px; opacity: 0.7; transition: opacity 0.2s;
}
.active-filter-tag button:hover { opacity: 1; }

/* ============================================
   VIEW TOGGLE (grid / list)
   ============================================ */
.view-toggle {
  display: flex; gap: 4px; background: var(--gray-100);
  padding: 4px; border-radius: 10px; flex-shrink: 0;
}
.view-btn {
  width: 34px; height: 34px; border: none; border-radius: 7px;
  background: transparent; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  color: var(--gray-400); transition: all 0.2s ease;
}
.view-btn.active {
  background: var(--white); color: var(--navy);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.view-btn:hover:not(.active) { color: var(--navy-muted); }
.view-btn svg { width: 16px; height: 16px; }

/* ============================================
   FILTER BAR
   ============================================ */
.filter-bar {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--gray-100);
  padding: 20px 28px;
  display: flex; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.filter-bar-group {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.filter-bar-label {
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--gray-400); white-space: nowrap;
}
.filter-bar-divider {
  width: 1px; height: 32px;
  background: var(--gray-100); flex-shrink: 0;
}
.filter-bar-spacer { flex: 1; min-width: 0; }

/* Checkboxy jako pill toggle */
.filter-option {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 7px 16px;
  border-radius: 100px; border: 1.5px solid var(--gray-200);
  font-family: var(--font-primary);
  font-size: 13px; font-weight: 600; color: var(--navy);
  background: var(--white); transition: all var(--transition-base);
  user-select: none;
}
.filter-option:hover { border-color: var(--teal); color: var(--teal); }
.filter-option input[type="checkbox"] { display: none; }
.filter-option.checked {
  background: var(--teal); border-color: var(--teal); color: var(--white);
}
#lbl-goes:hover { border-color: #ff671f; color: #ff671f; }
#lbl-goes.checked { background: #ff671f; border-color: #ff671f; color: var(--white); }

/* Chip tagy */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 100px;
  border: 1.5px solid var(--gray-200);
  font-family: var(--font-primary);
  font-size: 13px; font-weight: 600;
  color: var(--navy); cursor: pointer;
  background: var(--white);
  transition: all var(--transition-base);
  user-select: none;
}
.filter-chip:hover { border-color: var(--teal); color: var(--teal); }
.filter-chip.active { background: var(--teal); border-color: var(--teal); color: var(--white); }
.filter-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.filter-chip[data-tag="new"]       .filter-chip-dot { background: var(--teal); }
.filter-chip[data-tag="sale"]      .filter-chip-dot { background: var(--red); }
.filter-chip[data-tag="clearance"] .filter-chip-dot { background: var(--orange); }
.filter-chip.active .filter-chip-dot { background: rgba(255,255,255,0.8); }

/* Sort select (legacy — pro stránky strojů kde je přímo <select class="filter-sort">) */

/* Reset tlacitko */
.filter-reset {
  font-family: var(--font-primary);
  font-size: 13px; font-weight: 600; color: var(--teal);
  cursor: pointer; background: none; border: none;
  padding: 0; white-space: nowrap;
  transition: color var(--transition-base);
  text-decoration: none;
}
.filter-reset:hover { color: var(--teal-dark); }

/* ── Příslušenství filtr (selecty) ────────────────── */
.acc-filter-bar {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.acc-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.acc-filter-group {
  flex: 1;
  min-width: 180px;
}
.acc-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gray-400);
  margin-bottom: 6px;
}
.acc-filter-select {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--navy);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F1E2E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.acc-filter-select:focus {
  border-color: var(--teal);
  outline: none;
}
.acc-filter-select:hover {
  border-color: var(--teal);
}
.acc-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red, #E53E3E);
  border: 2px solid var(--red, #E53E3E);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.acc-filter-reset:hover {
  background: var(--red, #E53E3E);
  color: var(--white);
}
.acc-filter-group--search { min-width: 220px; flex: 1.5; }
.acc-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.acc-search-input {
  width: 100%;
  padding: 10px 42px 10px 14px;
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  transition: border-color 0.2s;
}
.acc-search-input:focus {
  border-color: var(--teal);
  outline: none;
}
.acc-search-input::placeholder { color: var(--gray-400); }
.acc-search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--teal);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s;
}
.acc-search-btn:hover { background: var(--teal-dark); }
.acc-active-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
}
.acc-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  background: rgba(30, 154, 171, 0.08);
  border-radius: 8px;
}
.acc-active-tag a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--teal);
  text-decoration: none;
  transition: all 0.15s;
}
.acc-active-tag a:hover {
  background: var(--teal);
  color: var(--white);
}

/* ============================================
   SEO TEXT BLOK — kategoriové stránky příslušenství
   Navy pozadí sekce (stejný jako footer/showcase na homepage)
   ============================================ */
.acc-seo-section {
  padding: 64px 0;
  background: var(--navy);
}
.acc-seo-section .section-header { padding-top: 0; margin-bottom: 32px; }
.acc-seo-section .section-label { color: var(--teal); }
.acc-seo-section .section-title { color: var(--white); }
.acc-category-seo-text {
  max-width: 800px;
  margin: 0 auto;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  font-size: 15px;
}
.acc-category-seo-text h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--white);
  margin: 32px 0 16px;
}
.acc-category-seo-text h3:first-child { margin-top: 0; }
.acc-category-seo-text p { margin: 0 0 16px; }
.acc-category-seo-text ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
}
.acc-category-seo-text li {
  padding: 7px 0 7px 18px;
  position: relative;
  break-inside: avoid;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.acc-category-seo-text li:last-child { border-bottom: none; }
.acc-category-seo-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.acc-category-seo-text li strong {
  color: rgba(255,255,255,0.85);
}
@media (max-width: 640px) {
  .acc-seo-section { padding: 48px 0; }
  .acc-category-seo-text { font-size: 14px; }
  .acc-category-seo-text ul { columns: 1; }
  .acc-category-seo-text h3 { font-size: 13px; }
}

@media (max-width: 768px) {
  .acc-filter-row { flex-direction: column; align-items: stretch; }
  .acc-filter-group { min-width: 100%; }
  .acc-filter-bar { padding: 16px; }
  .acc-filter-select,
  .acc-search-input { font-size: 16px; }
}

/* ============================================
   LIST VIEW
   ============================================ */
.products-grid.list-view { grid-template-columns: 1fr; gap: 16px; }
.products-grid.list-view .product-card {
  display: grid; grid-template-columns: 346px 1fr auto; align-items: center;
}
.products-grid.list-view .product-card-image {
  aspect-ratio: auto; height: 259px; border-radius: 16px 0 0 16px;
}
.products-grid.list-view .product-card-body { padding: 20px 24px; }
.products-grid.list-view .product-card-actions {
  padding: 20px 24px 20px 0; border-top: none;
  flex-direction: column; align-items: flex-end; justify-content: center;
}

/* ============================================
   NO RESULTS
   ============================================ */
.catalog-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 80px 24px;
}
.catalog-empty svg { width: 56px; height: 56px; color: var(--gray-200); margin-bottom: 24px; display: block; }
.catalog-empty h3 { font-family: var(--font-primary); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.catalog-empty p { color: var(--gray-400); font-size: 15px; margin-bottom: 28px; }

/* Hero styly jsou v components.css */

/* ============================================
   CATEGORY CHIPS (prislusenstvi)
   ============================================ */
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 100px;
  border: 1.5px solid var(--gray-200);
  font-family: var(--font-primary);
  font-size: 13px; font-weight: 600;
  color: var(--navy); cursor: pointer;
  background: var(--white);
  transition: all var(--transition-base);
  user-select: none; text-decoration: none;
}
.cat-chip:hover { border-color: var(--teal); color: var(--teal); }
.cat-chip.active { background: var(--teal); border-color: var(--teal); color: var(--white); }

/* Sort wrapper */
.filter-sort { display: flex; align-items: center; gap: 8px; }
.filter-sort-label {
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--gray-400); white-space: nowrap;
}
.sort-select {
  appearance: none; -webkit-appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1.5px solid var(--gray-200); border-radius: 100px;
  padding: 7px 36px 7px 16px;
  font-family: var(--font-primary); font-size: 13px; font-weight: 600;
  color: var(--navy); cursor: pointer;
  transition: border-color var(--transition-base);
}
.sort-select:hover { border-color: var(--teal); }
.sort-select:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-color: var(--teal); }

/* ============================================
   ACCESSORIES GRID
   ============================================ */
.acc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.acc-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: all var(--transition-base);
}
.acc-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

/* Card image */
.acc-card-image {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--gray-50);
  overflow: hidden;
}
.acc-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.acc-card:hover .acc-card-image img { transform: scale(1.05); }
.acc-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-50);
}
.acc-card-placeholder svg { width: 48px; height: 48px; color: var(--gray-200); }

/* Category badge inside image */
.acc-cat-badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-primary);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  background: var(--white); color: var(--navy);
  padding: 4px 10px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1;
}
.badge-icon { margin-right: 4px; }

/* Tags (new, sale) */
.acc-tags {
  position: absolute; top: 12px; right: 12px;
  display: flex; gap: 6px; z-index: 1;
}
.tag {
  font-family: var(--font-primary);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
}
.tag-new { background: #FF6B00; color: var(--white); }
.tag-sale { background: var(--red, #E53E3E); color: var(--white); }
.tag-clearance { background: var(--orange, #ED8936); color: var(--white); }
.tag-bestseller { background: var(--navy, #0F1E2E); color: var(--white); }

/* Card body */
.acc-card-body {
  display: flex; flex-direction: column;
  justify-content: space-between; flex: 1;
  padding: 20px;
}
.acc-card-info { flex: 1; }
.acc-card-cat {
  font-family: var(--font-primary);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 6px;
}
.acc-card-brand {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 6px;
}
.acc-card-name {
  font-family: var(--font-primary);
  font-size: 16px; font-weight: 700;
  color: var(--navy); line-height: 1.3;
  margin-bottom: 8px;
}
.acc-card-desc {
  font-size: 13px; line-height: 1.6;
  color: var(--gray-400);
  margin-bottom: 16px;
}

/* Card footer */
.acc-card-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.acc-card-price { display: flex; align-items: baseline; gap: 8px; }
.acc-card-price-current {
  font-family: var(--font-primary);
  font-size: 18px; font-weight: 700;
  color: var(--navy);
}
.acc-card-price-old {
  font-size: 13px; color: var(--gray-300);
  text-decoration: line-through;
}
.acc-card-price-inquiry {
  font-family: var(--font-primary);
  font-size: 14px; font-weight: 600;
  color: var(--gray-400);
}
.acc-card-arrow {
  width: 36px; height: 36px;
  border-radius: 50%; background: var(--gray-50);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400);
  transition: all var(--transition-base);
}
.acc-card:hover .acc-card-arrow {
  background: var(--teal); color: var(--white);
}

/* Accessories list view */
.acc-grid.list-view { grid-template-columns: 1fr; gap: 16px; }
.acc-grid.list-view .acc-card {
  flex-direction: row;
}
.acc-grid.list-view .acc-card-image {
  width: 240px; min-width: 240px; aspect-ratio: auto; height: 180px;
  border-radius: 16px 0 0 16px;
}
.acc-grid.list-view .acc-card-body { padding: 20px 24px; }

/* ============================================
   SECTION CTA
   ============================================ */
.section-cta { text-align: center; margin-top: 48px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .filter-bar { gap: 16px; }
  .acc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid.list-view .product-card { grid-template-columns: 200px 1fr; }
  .products-grid.list-view .product-card-actions { display: none; }
}
@media (max-width: 768px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .filter-bar { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .filter-bar-divider { width: 100%; height: 1px; }
  .filter-bar-spacer { display: none; }
  .filter-reset { align-self: flex-start; }
  .acc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .view-toggle { display: none; }
  .filter-option, .filter-chip, .cat-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .acc-grid.list-view .acc-card { flex-direction: column; }
  .acc-grid.list-view .acc-card-image { width: 100%; height: 200px; border-radius: 16px 16px 0 0; }
  .products-grid.list-view .product-card { grid-template-columns: 1fr; }
  .products-grid.list-view .product-card-image { height: 200px; border-radius: 16px 16px 0 0; }
  .products-grid.list-view .product-card-actions {
    padding: 16px; border-top: 1px solid var(--gray-100);
    flex-direction: row; align-items: center; justify-content: space-between;
  }
}
@media (max-width: 640px) {
  .products-grid { grid-template-columns: 1fr; }
  .catalog-header { flex-direction: column; align-items: flex-start; }
  .acc-grid { grid-template-columns: 1fr; }
}