/* Katalog hotových motivů — listing (mobile-first: 2sloupcový grid, bottom-sheet filtry,
   sticky lišta Filtry+Řadit; ≥48rem 3 sloupce, ≥64rem levý sidebar filtrů). */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Toolbar (Filtry + Řadit) ─────────────────────────────────────────────── */
.catalog-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  background: #ffffff;
}
.catalog-toolbar__filters {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.catalog-toolbar__sort select {
  height: 3rem;
  padding: 0 2.25rem 0 1rem;
  border: 0.0625rem solid #e7e7e7;
  border-radius: 62.4375rem;
  background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23070707' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 1rem center;
  font: inherit;
  font-size: 0.9375rem;
  color: #070707;
  appearance: none;
  cursor: pointer;
}
.catalog-toolbar__sort select:focus-visible {
  outline: 0.125rem solid #070707;
  outline-offset: 0.125rem;
}

/* ── Chipy aktivních filtrů ───────────────────────────────────────────────── */
.catalog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 0.0625rem solid #e7e7e7;
  border-radius: 62.4375rem;
  background: #f5f5f5;
  font-size: 0.8125rem;
  color: #070707;
  text-decoration: none;
}
.catalog-chip:hover {
  border-color: #070707;
}
.catalog-chip--clear {
  background: transparent;
  text-decoration: underline;
  border-color: transparent;
}

/* ── Layout: obsah + sidebar ──────────────────────────────────────────────── */
.catalog-layout {
  display: block;
}
/* Stejná váha nadpisu jako na detailu produktu (components.css: .detail-wrapper section h1). */
.catalog-content h1 {
  font-weight: 700;
}
@media (min-width: 64rem) {
  .catalog-layout {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 2rem;
    align-items: start;
  }
  .catalog-toolbar__filters {
    display: none;
  }
  .catalog-toolbar {
    justify-content: flex-end;
    position: static;
  }
}

/* ── Panel filtrů: mobil = bottom-sheet, desktop = sidebar ────────────────── */
/* Z-index nad vším overlay obsahem webu: navbar nav má 60, mobile drawer 50,
   cookie banner 9999 — otevřený modální sheet je musí překrýt všechny. */
.catalog-filters {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10010;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: #ffffff;
  border-radius: 1.5rem 1.5rem 0 0;
  border: 0.0625rem solid #e7e7e7;
  transform: translateY(105%);
  /* visibility se skryje až PO dojetí transform animace (jinak sheet zmizí skokem) */
  transition: transform 0.25s ease-in-out, visibility 0s linear 0.25s;
  visibility: hidden;
}
.catalog-filters.is-open {
  transform: translateY(0);
  transition: transform 0.25s ease-in-out;
  visibility: visible;
}
.catalog-filters__backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 7, 7, 0.45);
}
.catalog-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.catalog-filters__title {
  font-weight: 700;
  font-size: 1.125rem;
}
.catalog-filters__close {
  width: 2.25rem;
  height: 2.25rem;
  border: 0.0625rem solid #e7e7e7;
  border-radius: 50%;
  background: #ffffff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.catalog-filter-group {
  border: 0;
  padding: 0.75rem 0;
  margin: 0;
  border-top: 0.0625rem solid #e7e7e7;
}
.catalog-filter-group legend {
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 0 0.25rem;
}
.catalog-filter-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  cursor: pointer;
}
.catalog-filter-option input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: #ff5500;
  cursor: pointer;
}
/* ── Cenový slider (dva překryté range inputy) ────────────────────────────── */
.catalog-price-slider__label {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.875rem;
}
.catalog-price-slider__track-wrap {
  position: relative;
  height: 1.75rem;
  margin: 0 0.25rem;
}
.catalog-price-slider__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.375rem;
  transform: translateY(-50%);
  border-radius: 62.4375rem;
  background: #e7e7e7;
}
.catalog-price-slider__fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 62.4375rem;
  background: #ff5500;
}
.catalog-price-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.catalog-price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #ffffff;
  border: 0.125rem solid #070707;
  cursor: grab;
  pointer-events: auto;
}
.catalog-price-slider input[type="range"]::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #ffffff;
  border: 0.125rem solid #070707;
  cursor: grab;
  pointer-events: auto;
}
.catalog-price-slider input[type="range"]::-moz-range-track {
  background: transparent;
}
.catalog-price-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 0.125rem solid #ff5500;
  outline-offset: 0.125rem;
}
.catalog-price-slider input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 0.125rem solid #ff5500;
  outline-offset: 0.125rem;
}

/* ── Akce panelu — kompaktní tlačítka zapadající do designu (bez komiksového stínu) ── */
.catalog-filters__actions {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 0.625rem;
  padding-top: 0.875rem;
  background: #ffffff;
}
.catalog-filters__apply {
  width: 100%;
  padding: 0.8125rem 1rem;
  font-size: 0.9375rem;
  box-shadow: none;
}
.catalog-filters__apply:hover,
.catalog-filters__apply:focus-visible {
  box-shadow: none;
  opacity: 0.92;
}
.catalog-filters__reset {
  justify-self: center;
  font-size: 0.875rem;
  color: #5c5c5c;
  text-decoration: underline;
}
.catalog-filters__reset:hover {
  color: #070707;
}
@media (min-width: 64rem) {
  /* Desktop: samostatný sticky panel — sahá od horního okraje obsahu (pod menu) a při
     scrollování katalogu zůstává na místě; delší filtry scrollují uvnitř panelu. */
  .catalog-filters {
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.25rem;
    border: 0.0625rem solid #e7e7e7;
    border-radius: 1.5rem;
    background: #ffffff;
    transform: none;
    transition: none;
    visibility: visible;
    z-index: 1;
  }
  .catalog-filters__head .catalog-filters__close {
    display: none;
  }
  .catalog-filters__backdrop {
    display: none !important;
  }
  .catalog-filters__actions {
    position: static;
    grid-template-columns: 1fr;
  }
}

/* ── Grid karet ───────────────────────────────────────────────────────────── */
.catalog-count {
  color: #5c5c5c;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 48rem) {
  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* ── Karta produktu ───────────────────────────────────────────────────────── */
.catalog-card {
  background: #f5f5f5;
  border: 0.0625rem solid #e7e7e7;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.catalog-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.25rem rgba(7, 7, 7, 0.08);
}
.catalog-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.catalog-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #ffffff;
}
.catalog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.catalog-card__placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 0.75rem, #ededed 0.75rem, #ededed 1.5rem);
}
.catalog-card__badges {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.catalog-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 62.4375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.catalog-badge--new {
  background: #ff5500;
}
.catalog-badge--bestseller {
  background: #070707;
}
.catalog-badge--sale {
  background: #e02020;
}
.catalog-card__title {
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 0.875rem 0;
  border-top: 0.0625rem solid #e7e7e7;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.catalog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem 0.875rem;
}
.catalog-card__price {
  font-size: 0.8125rem;
  color: #5c5c5c;
}
.catalog-card__price strong {
  color: #070707;
  font-size: 0.9375rem;
}
.catalog-card__price-original {
  display: inline-block;
  margin-right: 0.375rem;
  color: #8f8f8f;
}
.catalog-card__add {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0.0625rem solid #070707;
  border-radius: 50%;
  background: #ffffff;
  color: #070707;
  cursor: pointer;
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}
.catalog-card__add:hover,
.catalog-card__add:focus-visible {
  background: #ff5500;
  border-color: #ff5500;
  color: #ffffff;
}
.catalog-card__add span {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
}
.catalog-card__add.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
@media (min-width: 48rem) {
  .catalog-card__title {
    font-size: 1.0625rem;
    padding: 1rem 1.25rem 0;
  }
  .catalog-card__footer {
    padding: 0.625rem 1.25rem 1.25rem;
  }
}

/* ── Banner + perex (pravý sloupec listingu) ──────────────────────────────── */
.catalog-banner {
  border-radius: 1.5rem;
  overflow: hidden;
  border: 0.0625rem solid #e7e7e7;
  margin-bottom: 1rem;
}
.catalog-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 420;
  object-fit: cover;
}
/* Perex roztažený do celé šířky banneru (žádný max-width). */
.catalog-perex {
  color: #5c5c5c;
  font-size: 1.0625rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

/* ── Stránkování ──────────────────────────────────────────────────────────── */
.catalog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}
.catalog-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 0.0625rem solid #e7e7e7;
  border-radius: 62.4375rem;
  background: #ffffff;
  color: #070707;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease-in-out, background 0.15s ease-in-out;
}
.catalog-pagination__link:hover {
  border-color: #070707;
}
.catalog-pagination__link.is-current {
  background: #070707;
  border-color: #070707;
  color: #ffffff;
  cursor: default;
}
.catalog-pagination__gap {
  color: #8f8f8f;
  padding: 0 0.25rem;
}

/* ── Prázdný stav ─────────────────────────────────────────────────────────── */
.catalog-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #5c5c5c;
}
.catalog-empty__title {
  font-weight: 600;
  color: #070707;
  margin-bottom: 0.5rem;
}
.catalog-empty a {
  text-decoration: underline;
}

/* ── SEO text pod gridem ──────────────────────────────────────────────────── */
.catalog-seo {
  color: #5c5c5c;
  max-width: 50rem;
}
.catalog-seo h2 {
  font-size: 1.375rem;
  color: #070707;
  margin-bottom: 0.75rem;
}
.catalog-seo a {
  text-decoration: underline;
}

/* ── Potvrzovací karta „Přidáno do košíku" (quick add) ────────────────────── */
.catalog-added {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 10015;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: #ffffff;
  border: 0.0625rem solid #e7e7e7;
  border-radius: 1.25rem;
  box-shadow: 0 0.75rem 2rem rgba(7, 7, 7, 0.18);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
  pointer-events: none;
}
.catalog-added.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 48rem) {
  .catalog-added {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    max-width: 26rem;
  }
}
.catalog-added__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #ff5500;
  color: #ffffff;
}
.catalog-added__check svg {
  width: 1.25rem;
  height: 1.25rem;
}
.catalog-added.is-visible .catalog-added__check {
  animation: catalog-check-pop 0.35s ease-out;
}
@keyframes catalog-check-pop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.catalog-added__thumb {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 0.0625rem solid #e7e7e7;
}
.catalog-added__body {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}
.catalog-added__body strong {
  font-size: 0.9375rem;
}
.catalog-added__name {
  font-size: 0.8125rem;
  color: #5c5c5c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-added__meta {
  font-size: 0.75rem;
  color: #8f8f8f;
}
.catalog-added__cta {
  flex-shrink: 0;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  box-shadow: none;
}
.catalog-added__cta:hover,
.catalog-added__cta:focus-visible {
  box-shadow: none;
  opacity: 0.92;
}
.catalog-added__close {
  position: absolute;
  top: 0.375rem;
  right: 0.625rem;
  border: 0;
  background: none;
  font-size: 1.125rem;
  line-height: 1;
  color: #8f8f8f;
  cursor: pointer;
  padding: 0.25rem;
}
.catalog-added__close:hover {
  color: #070707;
}

/* Pulznutí badge košíku po přidání položky. */
.catalog-badge-bump {
  animation: catalog-badge-bump 0.45s ease-out;
}
@keyframes catalog-badge-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ── Toast (chybové hlášky) ───────────────────────────────────────────────── */
.catalog-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 10020;
  transform: translateX(-50%) translateY(1rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1.125rem;
  border-radius: 62.4375rem;
  background: #070707;
  color: #ffffff;
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.catalog-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.catalog-toast a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}