/* Collection page (oblekla-i-aksesoari.html). Layout .cl-*, filter drawer .fd__* */
.cl { padding: 0 var(--side-padding-desktop) 120px; color: var(--text-main); }
.cl-crumbs { font: 400 14px/1.5 var(--font-sans); margin-bottom: 24px; padding-top: 8px; }
.cl-crumbs a { color: var(--text-main); text-decoration: none; }
.cl-crumbs a:hover { color: var(--brand-red); }
.cl-title { margin: 0; padding: 16px 0 32px; text-align: center; font: 700 var(--fs-h1)/1 var(--font-serif); letter-spacing: -0.02em; }

.cl-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--bg-content-secondary); margin-bottom: 40px; }
.cl-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-tab {
  height: 48px; padding: 0 16px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-main); font: 700 16px/1.5 var(--font-sans); cursor: pointer;
}
.cl-tab[aria-selected="true"] { border-bottom-color: var(--brand-red); }
.cl-filter-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; flex: none;
  border: 0; background: transparent; color: var(--text-main); font: 700 16px/1.5 var(--font-sans); cursor: pointer;
}
.cl-filter-count {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  background: var(--brand-red); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
}
.cl-filter-count[hidden] { display: none; }
.cl-tab:focus-visible, .cl-filter-btn:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.cl-empty { margin: 40px 0; text-align: center; font: 400 18px/1.5 var(--font-sans); }

.cl-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px 16px; }
.cl-cell { grid-column: span 2; min-width: 0; }
.cl-cell--wide { grid-column: span 3; }
.cl .pc .pc__img { aspect-ratio: 3 / 4; }
.cl .cl-cell--wide .pc__img { aspect-ratio: 648 / 375; }
.cl span.pc__swatch { cursor: default; }

/* Mini carousel inside the card photo */
.cl-car { position: relative; display: block; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cl-car__track { display: flex; transition: transform 0.35s ease; }
.cl-car__track img { flex: 0 0 100%; width: 100%; -webkit-user-drag: none; pointer-events: none; }
.cl-car__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.cl-car__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.cl-car__dots span.is-on { background: #fff; }

/* ---- Filter drawer ---- */
.fd { position: fixed; inset: 0; z-index: 50; }
.fd[hidden] { display: none; }
.fd__backdrop { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: rgba(0, 0, 0, 0.3); cursor: pointer; }
.fd__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; box-sizing: border-box; overflow-y: auto;
  padding: 32px 32px 40px; display: flex; flex-direction: column; gap: 40px;
  background: var(--bg-page); border-left: 1px solid var(--brand-green); color: var(--text-main); font-family: var(--font-sans);
}
.fd__head { display: flex; align-items: center; justify-content: space-between; }
.fd__title { margin: 0; font: 700 40px/1.2 var(--font-serif); }
.fd__close { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fd__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.fd__set legend { padding: 0; margin-bottom: 16px; font-size: 20px; font-weight: 700; }
.fd__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.fd__check { display: flex; align-items: center; gap: 12px; font-size: 16px; cursor: pointer; min-height: 24px; }
.fd__check input {
  appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; width: 18px; height: 18px; flex: none;
  background: var(--bg-page); border: 1px solid var(--brand-green); border-radius: 4px; cursor: pointer;
}
.fd__check input:hover { border-width: 2px; }
.fd__check input:checked { background: var(--brand-green); box-shadow: inset 0 0 0 3px var(--bg-page); }
.fd__sw { width: 16px; height: 16px; flex: none; }
.fd__actions { display: flex; flex-direction: column; gap: 24px; }
.fd__clear {
  align-self: flex-start; height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--brand-red);
  background: transparent; color: var(--text-main); font: 700 16px/1.5 var(--font-sans); cursor: pointer;
}
.fd__apply, .fd__btn { box-sizing: border-box; width: 100%; height: 56px; border-radius: var(--radius-control); font: 700 16px/1.5 var(--font-sans); cursor: pointer; }
.fd__apply, .fd__btn--primary { border: 0; background: var(--brand-red); color: #fff; }
.fd__apply:hover, .fd__btn--primary:hover { background: var(--brand-red-light); }
.fd__btn--secondary { height: 58px; border: 2px solid var(--brand-green); background: transparent; color: var(--text-main); }
.fd button:focus-visible, .fd input:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.fd__m { display: none; }

/* Mobile drawer controls */
.fd__cats { display: flex; flex-direction: column; }
.fd__cat {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0; text-align: left;
  border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--text-main); font: 400 18px/1.5 var(--font-sans); cursor: pointer;
}
.fd__cat::before { content: ""; flex: none; box-sizing: border-box; width: 18px; height: 18px; border: 1px solid var(--brand-green); border-radius: 4px; }
.fd__cat[aria-pressed="true"] { font-weight: 700; border-bottom-color: var(--brand-red); }
.fd__cat[aria-pressed="true"]::before { background: var(--brand-green); box-shadow: inset 0 0 0 2px var(--bg-page); }
.fd__row { display: flex; flex-wrap: wrap; gap: 16px; }
.fd__swb { box-sizing: border-box; width: 52px; height: 52px; padding: 0; border: 1px solid transparent; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fd__swb span { display: block; width: 44px; height: 44px; background: var(--swatch-color); }
.fd__swb.is-on { border-color: var(--swatch-color); }
.fd__szb { box-sizing: border-box; width: 52px; height: 52px; padding: 0; border: 1px solid var(--brand-green); border-radius: 4px; background: transparent; color: var(--text-main); font: 900 16px/1 var(--font-sans); cursor: pointer; }
.fd__szb[aria-pressed="true"] { background: var(--brand-green); color: #fff; }
.fd__link { align-self: flex-start; margin-top: 16px; padding: 0; border: 0; background: none; color: var(--text-main); font: 400 16px/1.5 var(--font-sans); text-decoration: underline; cursor: pointer; min-height: 44px; }
.fd__m.fd__set { flex-direction: column; }

@media (max-width: 1100px) and (min-width: 768px) {
  .cl-tab { padding: 0 10px; }
}

@media (max-width: 767px) {
  .cl { padding: 0 var(--side-padding-mobile) 64px; }
  .cl-title { font-size: 40px; padding: 8px 0 24px; }
  .cl-tabs { display: none; }
  .cl-filter-btn { margin-left: auto; padding-right: 0; }
  .cl-bar { margin-bottom: 24px; }
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .cl-cell, .cl-cell--wide { grid-column: span 1; }
  .cl .cl-cell--wide .pc__img { aspect-ratio: 3 / 4; }
  .cl .pc__name { font-size: 24px; padding-top: 12px; }
  .cl .pc__price { font-size: 24px; }
  .cl .pc__swatch { width: 20px; height: 20px; }
  .cl .pc__swatch span { width: 14px; height: 14px; }

  .fd__panel { width: 100%; border-left: 0; padding: 16px; gap: 24px; }
  .fd__d { display: none; }
  .fd__m { display: flex; }
  .fd__set legend { font-size: 18px; font-weight: 400; margin-bottom: 12px; }
  .fd__actions--m { gap: 16px; margin-top: 8px; }
}

/* Sets page (komplekti.html) reuses this file: 2-column grid of set cards */
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 16px; }
.cl .st-grid .pc__img { aspect-ratio: 616 / 398; }
@media (max-width: 767px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}