/* Catalog pages (category + search): header, filter sidebar, grid, drawer */

/* ── Page shell ───────────────────────────────────── */
.cp-wrap {
  background: #f1f5f9;
  min-height: 60vh;
  padding-top: 150px;
  padding-bottom: 64px;
}

@media (max-width: 768px) {
  .cp-wrap {
    padding-top: 130px;
  }
}

.cp-breadcrumb {
  padding: 18px 0 0;
  font-family: Inter_18pt-Regular, sans-serif;
  font-size: 14px;
  color: #8c8c8c;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-breadcrumb a {
  color: #8c8c8c;
  text-decoration: none;
  flex-shrink: 0;
}

.cp-breadcrumb a:hover {
  color: #2c75f6;
}

.cp-breadcrumb .bc-sep {
  flex-shrink: 0;
  color: #8c8c8c;
}

.cp-breadcrumb .bc-current {
  font-family: Inter_18pt-Medium, sans-serif;
  color: #8c8c8c;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Quick filter cards (top of category page) ──── */
.cp-quick {
  --cp-quick-gap: 12px;
  display: flex;
  gap: var(--cp-quick-gap);
  margin: 20px 0 2px;
  padding: 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.cp-quick::-webkit-scrollbar {
  display: none;
}

/* 8 per row on desktop; more than that scrolls sideways */
.cp-quick-card {
  flex: 0 0 calc((100% - 7 * var(--cp-quick-gap)) / 8);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 16px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color .2s;
}

.cp-quick-card:hover {
  border-color: #dbe4f5;
}

.cp-quick-card.is-active {
  border-color: #2c75f6;
}

.cp-quick-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 92px;
}

.cp-quick-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cp-quick-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Inter_18pt-Regular, sans-serif;
  font-size: 15px;
  color: #1c1c1c;
  transition: color .2s;
}

.cp-quick-card.is-active .cp-quick-title {
  color: #2c75f6;
}

@media (max-width: 1024px) {
  .cp-quick-card {
    flex-basis: calc((100% - 5 * var(--cp-quick-gap)) / 6);
  }
}

@media (max-width: 768px) {
  /* Swipeable row: 3 full cards + a slice of the 4th at the screen edge, hinting there's more.
     The row bleeds into the 16px right page margin so the slice sits flush with the screen. */
  .cp-quick {
    --cp-quick-gap: 8px;
    --cp-quick-peek: 28px;
    margin-top: 14px;
    margin-right: -16px;
    scroll-padding-left: 2px;
  }

  /* End spacer: with the gap it restores the 16px margin after the last card */
  .cp-quick::after {
    content: '';
    flex: 0 0 8px;
  }

  .cp-quick-card {
    flex: 0 0 calc((100% - 3 * var(--cp-quick-gap) - var(--cp-quick-peek)) / 3);
    gap: 8px;
    padding: 10px 8px 12px;
  }

  .cp-quick-img {
    height: 64px;
  }

  .cp-quick-title {
    font-size: 13px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .cp-quick-card {
    flex-basis: calc((100% - 4 * var(--cp-quick-gap) - var(--cp-quick-peek)) / 4);
  }
}

/* Small phones: narrower cards. Long titles ("Kondensasiyalı", "Конденсационные")
   wrap onto a second line instead of being cut off; the row keeps one height. */
@media (max-width: 480px) {
  .cp-quick-card {
    padding: 10px 5px 12px;
  }

  .cp-quick-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-align: center;
    /* 12.5px from ~400px up, easing to ~11px on 360px screens */
    font-size: min(12.5px, 3.1vw);
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* ── Top bar ──────────────────────────────────────── */
.cp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 16px;
  flex-wrap: wrap;
  gap: 14px;
}

.cp-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cp-title {
  margin: 0;
  font-family: Inter_18pt-SemiBold, sans-serif;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.25;
  color: #1c1c1c;
}

.cp-intro {
  max-width: 820px;
  margin: -4px 0 20px;
  font-family: Inter_18pt-Regular, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
}

.cp-intro p {
  margin: 0 0 8px;
}

/* Sort dropdown */
.cp-sort {
  position: relative;
}

.cp-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: #fff;
  font-family: Inter_18pt-Regular, sans-serif;
  font-size: 14px;
  color: #1c1c1c;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}

.cp-sort-toggle:hover {
  background: #e7ebf1;
}

.cp-sort-icon,
.cp-sort-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cp-sort-chevron {
  color: #8c8c8c;
  transition: transform .2s;
}

.cp-sort.is-open .cp-sort-chevron {
  transform: rotate(180deg);
}

/* Global "body span" rule would otherwise restyle the label */
.cp-sort-label span,
.cp-sort-label {
  font: inherit;
  color: inherit;
}

.cp-sort-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 210px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .06);
}

.cp-sort.is-open .cp-sort-menu {
  display: block;
}

.cp-sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: Inter_18pt-Regular, sans-serif;
  font-size: 14px;
  color: #1c1c1c;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.cp-sort-option:hover {
  background: #f1f5f9;
  color: #1c1c1c;
}

.cp-sort-option.is-active {
  color: #2c75f6;
}

.cp-sort-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  visibility: hidden;
}

.cp-sort-option.is-active .cp-sort-check {
  visibility: visible;
}

/* ── Layout ───────────────────────────────────────── */
.cp-body {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* ── Sidebar ──────────────────────────────────────── */
.cp-sidebar {
  width: 276px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 10px;
  border: none;
  padding: 0 22px;
  /* --cp-sticky-top = fixed header's bottom edge + gap, set by script below */
  position: sticky;
  top: var(--cp-sticky-top, 134px);
  max-height: calc(100vh - var(--cp-sticky-top, 134px) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d6d9de transparent;
}

.sb-section {
  padding: 28px 0 26px;
}

.sb-section+.sb-section {
  border-top: 1px solid #e3e6eb;
}

.sb-title,
.sb-collapsible-toggle {
  font-family: Inter_18pt-SemiBold, sans-serif;
  font-size: 16px;
  color: #1c1c1c;
  margin-bottom: 18px;
}

.sb-collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-bottom: 0;
  text-align: left;
}

/* Global "body span" rule would otherwise restyle the group name */
.sb-collapsible-toggle span {
  font: inherit;
  color: inherit;
}

.sb-collapsible-toggle.is-open { margin-bottom: 14px; }
.sb-collapsible-body { display: none; }
.sb-collapsible-body.is-open { display: block; }

/* "—" when open, "+" when closed */
.sb-toggle-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sb-toggle-icon::before,
.sb-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: #1c1c1c;
  transition: transform .2s;
}

.sb-toggle-icon::after {
  transform: rotate(90deg);
}

.sb-collapsible-toggle.is-open .sb-toggle-icon::after {
  transform: rotate(0deg);
}

/* Price inputs */
.sb-price-row {
  display: flex;
  gap: 18px;
}

.sb-price-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 40px;
  border: 1px solid #d6d9de;
  border-radius: 9px;
  padding: 0 14px;
  font-family: Inter_18pt-Regular, sans-serif;
  font-size: 14px;
  color: #1c1c1c;
  background: #fff;
  outline: none;
  transition: border-color .2s;
  -moz-appearance: textfield;
}

.sb-price-input:focus {
  border-color: #2c75f6;
}

.sb-price-input::-webkit-inner-spin-button,
.sb-price-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Dual range slider */
.sb-range {
  position: relative;
  height: 16px;
  margin: 26px 2px 0;
}

.sb-range::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 2px;
  border-radius: 2px;
  background: #dbe4f5;
}

.sb-range-fill {
  position: absolute;
  top: 7px;
  height: 2px;
  border-radius: 2px;
  background: #2c75f6;
}

.sb-range input[type=range] {
  position: absolute;
  left: -2px;
  top: 0;
  width: calc(100% + 4px);
  height: 16px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.sb-range input[type=range]::-webkit-slider-runnable-track {
  background: none;
  border: none;
}

.sb-range input[type=range]::-moz-range-track {
  background: none;
  border: none;
}

.sb-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 50%;
  background: #2c75f6;
  cursor: pointer;
  pointer-events: auto;
}

.sb-range input[type=range]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 50%;
  background: #2c75f6;
  cursor: pointer;
  pointer-events: auto;
}

.sb-range input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(44, 117, 246, .25);
}

/* Checkboxes */
.sb-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  cursor: pointer;
}

.sb-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sb-check-box {
  width: 15px;
  height: 15px;
  border: 1px solid #c9ccd1;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.sb-check input:checked~.sb-check-box {
  background: #2c75f6;
  border-color: #2c75f6;
}

.sb-check input:checked~.sb-check-box::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

.sb-check input:focus-visible~.sb-check-box {
  box-shadow: 0 0 0 3px rgba(44, 117, 246, .25);
}

.sb-check-text {
  font-family: Inter_18pt-Regular, sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #1c1c1c;
}

.sb-check-link {
  text-decoration: none;
}

.sb-check-link:hover {
  color: #2c75f6;
}

.sb-check-link span {
  font: inherit;
  color: inherit;
}

/* ── Products grid ────────────────────────────────── */
.cp-main {
  flex: 1;
  min-width: 0;
}

.cp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: stretch;
}

.cp-grid .product_item {
  height: 100%;
}

/* Wrappers around the server-rendered cards; the cards stay grid items */
.cp-ssr {
  display: contents;
}

/* Override main.css max-width/width rules that break the grid */
.cp-grid .product_item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}


/* Empty state */
.cp-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 80px 0;
  color: #94a3b8;
}

.cp-empty svg {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
}

.cp-empty p {
  font-size: 15px;
}

/* Pagination */
.cp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 32px;
}

/* Same look as the sort buttons */
.cp-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: #fff;
  font-family: Inter_18pt-Regular, sans-serif;
  font-size: 15px;
  color: #1c1c1c;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}

a.cp-page-btn:hover {
  background: #e7ebf1;
  color: #1c1c1c;
}

.cp-page-btn.is-current {
  background: #000;
  color: #fff;
  cursor: default;
}

.cp-page-btn.is-disabled {
  opacity: .4;
  pointer-events: none;
}

.cp-page-arrow {
  padding: 0;
}

.cp-page-btn svg {
  width: 16px;
  height: 16px;
}

.cp-page-gap {
  min-width: 20px;
  text-align: center;
  color: #94a3b8;
}

@media (max-width: 420px) {
  .cp-pagination { gap: 4px; }
  .cp-page-btn { min-width: 36px; height: 36px; padding: 0 9px; font-size: 14px; }
}

/* Responsive */
@media (max-width: 1024px) {
  .cp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile filter button ────────────────────────── */
/* Same look as the sort toggle (.cp-sort-toggle) */
.cp-mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: #fff;
  font-family: Inter_18pt-Regular, sans-serif;
  font-size: 14px;
  color: #1c1c1c;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}

.cp-mobile-filter-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cp-mobile-filter-btn:hover {
  background: #e7ebf1;
}

/* ── Mobile filter drawer ────────────────────────── */
.mob-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 300;
  opacity: 0;
  transition: opacity .25s;
}

.mob-filter-backdrop.open {
  display: block;
  opacity: 1;
}

.mob-filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 300px;
  max-width: 88vw;
  background: #fff;
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}

.mob-filter-backdrop.open .mob-filter-drawer {
  transform: translateX(0);
}

.mob-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.mob-filter-head span {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.mob-filter-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mob-filter-close svg {
  width: 20px;
  height: 20px;
}

.mob-filter-body {
  flex: 1;
  padding: 0 20px;
}

/* Search page wraps body + footer in a <form>; keep the footer at the bottom */
.mob-filter-drawer > form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mob-filter-footer {
  padding: 16px 20px;
  border-top: 1px solid #f1f5f9;
  position: sticky;
  bottom: 0;
  background: #fff;
}

.mob-filter-apply {
  display: block;
  width: 100%;
  padding: 12px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

.mob-filter-apply:hover {
  background: #1d4ed8;
}

/* Responsive */
@media (max-width: 1024px) {
  .cp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cp-sidebar {
    display: none;
  }

  .cp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .cp-mobile-filter-btn {
    display: inline-flex;
  }

  /* The sort button sits on the left on phones — open the menu from there */
  .cp-sort-menu {
    left: 0;
    right: auto;
  }
}

@media (max-width: 420px) {
  .cp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .mob-filter-drawer {
    width: 100%;
    max-width: 100%;
  }
}