/* ===== TripTea — Catalog / Category page ================================== */

/* ===== Page wrapper ======================================================= */

.tt-catalog {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2B2B2B;
  background: #fff;
}

.tt-catalog *,
.tt-catalog *::before,
.tt-catalog *::after {
  box-sizing: border-box;
}

.tt-catalog__inner {
  max-width: 1704px;
  margin: 0 auto;
  padding: 32px 16px 80px;
}

/* Desktop (1201+): max-width:1704px alone only produces a real gutter once
   the viewport clears ~1736px — below that the box fills 100% and the 16px
   padding above is the only gutter. Flatten to exactly 108px across the
   whole desktop range, and cancel the 16px padding (it's on top of that
   108px, so visible content sat at 124px, not lined up with the header's
   flush 108px) — it's the only gutter tablet/mobile have, so it must stay
   there. Tablet/mobile untouched. */
@media (min-width: 1201px) {
  .tt-catalog__inner {
    max-width: min(1704px, calc(100vw - 216px));
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===== Breadcrumbs =========================================================
   Same component/markup as product_page.css's .tt-product__crumbs (shared
   class names, not duplicated by accident) — but that file is only loaded
   on route=product/product, so this page needs its own copy of the same
   rules or the dot separators render unstyled (baseline-aligned instead of
   centered on the text, no color/size). Keep these two in sync if the
   design changes. */
.tt-product__crumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
}
.tt-product__crumb {
  flex: 0 0 auto;
  color: #8B5E3C;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.tt-product__crumb:hover { color: #4A3426; text-decoration: underline; }
.tt-product__crumb:last-of-type {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #6B6B6B;
  pointer-events: none;
  text-decoration: none;
}
.tt-product__crumb-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4px;
  height: 4px;
}

/* ===== Category tabs — desktop: current category (closable) + siblings === */

/* Wraps the scrollable pill strip + its two nav arrows (desktop only — see
   the max-width: 768px block below, where touch-swipe already covers this
   on mobile so the buttons just hide). */
.tt-catalog__tabs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.tt-catalog__tabs-desktop {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  /* Horizontal scroll strip on every breakpoint now (was mobile-only) —
     pills are natural-width + nowrap (below), so with more siblings than
     fit the row they scroll instead of wrapping/squeezing text. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tt-catalog__tabs-desktop::-webkit-scrollbar {
  display: none;
}

/* Nav arrows — same component, size and look as .tt-reviews__nav-btn /
   .tt-sets__nav-btn (reused pattern: scrollBy one step per click, disabled
   state kept in sync with scroll position by JS). Prev sits at the start of
   the strip, next at the end — not paired together, unlike those two
   components. */

/* Root "Всі товари" listing — only 4 root categories, which the pills'
   own flex-grow (flex: 1 0 auto above) already stretches to fill the row
   with no overflow, so there's nothing to scroll to and the arrows would
   just sit there permanently useless. :has() mirrors the same
   root-detection compound used for the pill colors above, just anchored to
   the row wrapper since the buttons are the strip's siblings, not its
   children. */
.tt-catalog__tabs-row:not(:has(.tt-catalog__tab-desktop--active, .tt-catalog__tab-desktop--active-sibling)) .tt-catalog__tabs-nav-btn {
  display: none;
}

.tt-catalog__tabs-nav-btn {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 1px solid #4A3426;
  border-radius: 16px;
  background: transparent;
  color: #4A3426;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.tt-catalog__tabs-nav-btn:hover {
  background: #FFFFFF;
}

.tt-catalog__tabs-nav-btn--disabled,
.tt-catalog__tabs-nav-btn:disabled {
  background: #FFFFFF;
  border-color: #F5EFE7;
  color: #E7D7C8;
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Prev arrow: not just greyed out at the start of the strip — fully absent
   until the user has scrolled right at least once (see syncNav() in
   category.twig), so it never occupies space or gets a disabled look. */
.tt-catalog__tabs-nav-btn--hidden {
  display: none;
}

/* Never shrinks below its own content (nowrap + no wrap-forced squeezing),
   but DOES grow to fill leftover row width when there are too few pills to
   need the scroll strip (flex-grow:1) — was flex:1 1 0 originally, which
   stretched AND shrank every pill to share the row equally, squeezing long
   names onto two lines once there wasn't enough room. Height comes from
   padding alone (unchanged) so this doesn't affect desktop pill height. */
.tt-catalog__tab-desktop {
  flex: 1 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 64px;
  padding: 16px;
  border: none;
  border-radius: 16px;
  background: #FAF7F2;
  text-decoration: none;
  color: #8B5E3C;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

/* Plain sibling pills are real <a> elements, so the sitewide `a:hover {
   color: dark-tea }` rule (stylesheet.css) applies directly to them —
   repeat this rule's own resting color on :hover to cancel it out, same
   idea as .tab-desktop-body:hover below for the active pill's inner link.
   Must exclude the active variants: a bare `.tab-desktop:hover` has HIGHER
   specificity than `.tab-desktop--active`'s single class (a pseudo-class
   counts as a class), so without the :not()s it would win and override the
   active pill's white text to this brown on hover. This is the "deeper
   level" hover (e.g. Шу Пуер among Пуер's children) — everywhere except
   the root "Всі товари" listing, which gets its own hover below. Color-only
   — padding/gap must stay identical to the resting state (below) or the
   pill visibly jumps size on hover. */
.tt-catalog__tab-desktop:not(.tt-catalog__tab-desktop--active):not(.tt-catalog__tab-desktop--active-sibling):hover {
  background: #F5EFE7;
  color: #4A3426;
  text-decoration: none;
}
/* Root "Всі товари" hover — overrides the generic one above via the extra
   .tt-catalog__tabs-desktop:not(:has(...)) ancestor compound (more specific,
   wins regardless of source order). Color-only, same reason as above. */
.tt-catalog__tabs-desktop:not(:has(.tt-catalog__tab-desktop--active, .tt-catalog__tab-desktop--active-sibling)) .tt-catalog__tab-desktop:hover {
  background: #FAF7F2;
  outline: 1px solid #8B5E3C;
  outline-offset: -1px;
  color: #4A3426;
}

/* Root "Всі товари" listing (no category selected — the row has neither an
   --active nor an --active-sibling pill) — white fill + inset warm-sand
   outline instead of the plain cream fill siblings get once you're inside
   a category, per design. gap: 24px (vs the 8px base default) is the resting
   value here — hover above only recolors, it must not touch gap/padding. */
.tt-catalog__tabs-desktop:not(:has(.tt-catalog__tab-desktop--active, .tt-catalog__tab-desktop--active-sibling)) .tt-catalog__tab-desktop {
  background: #FFFFFF;
  outline: 1px solid #E7D7C8;
  outline-offset: -1px;
  gap: 24px;
  color: #4A3426;
}

/* Active tab: solid Dark Tea fill + white text/icon — name is large and
   bold, and the close button rides inside the same dark pill. Content-
   hugging only (no flex-grow) — it's a fixed "you are here" chip, not a
   filler pill. */
.tt-catalog__tab-desktop--active {
  flex-grow: 0;
  justify-content: space-between;
  background: #8B5E3C;
  border: none;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 600;
  gap: 24px;
  cursor: default;
  /* height: 64px, padding: 16px come from the shared .tt-catalog__tab-desktop
     base rule (both classes always co-occur on this element) — same fixed
     box regardless of whether this level has an icon or not. */
}

/* Hover: darker fill + the same brown outline the root-level unselected
   pills get. Covers both --active (root, has icon) and --active-sibling
   (leaf, may not) below. Color-only — padding/gap already match at rest
   (this rule used to also set them, which caused the pill to visibly resize
   on hover). */
.tt-catalog__tab-desktop--active:hover,
.tt-catalog__tab-desktop--active-sibling:hover {
  background: #6F472B;
  outline: 1px solid #8B5E3C;
  outline-offset: -1px;
}

/* Deepest-level pages (a leaf with no subtypes of its own, e.g. Шу Пуер)
   don't get a separate active/closable pill — the row is just this leaf's
   own siblings, and the currently-open one gets the active fill "dragged"
   onto it in place, plus its own close button (space-between pushes it to
   the right edge, same as the primary active pill). Same highlight colors
   as .tt-catalog__tab-desktop--active, smaller icon/no icon-box though —
   this is still a "sibling", not the bigger active-pill chrome. */
.tt-catalog__tab-desktop--active-sibling {
  flex-grow: 0;
  justify-content: space-between;
  background: #8B5E3C;
  border: none;
  color: #FFFFFF;
  gap: 24px;
  /* height: 64px, padding: 16px come from the shared .tt-catalog__tab-desktop base rule. */
}

.tt-catalog__tab-desktop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: transparent;
  color: #FFFFFF;
}

.tt-catalog__tab-desktop-icon svg {
  width: 24px;
  height: 24px;
}

/* Sibling pills (e.g. root categories on "Всі товари") get the same icon
   artwork as the header nav, just as a small inline glyph — not the active
   tab's filled 48px box, which would look heavy on a plain, unselected pill. */
.tt-catalog__tab-desktop-icon--sibling {
  width: 24px;
  height: 24px;
  background: none;
  color: inherit;
}

.tt-catalog__tab-desktop-icon--sibling svg {
  width: 24px;
  height: 24px;
}

.tt-catalog__tab-desktop-name {
  flex: 1 1 auto;
  text-align: left;
}

/* Icon+name click target for the active/up pill (see markup comment in
   category.twig for why this is a separate <a> from .tt-catalog__tab-desktop-close
   rather than one wrapping the whole pill). */
.tt-catalog__tab-desktop-body {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.tt-catalog__tab-desktop-body:hover {
  text-decoration: none;
  color: inherit;
}

/* "Exit category" — bare hit-target, no box of its own (just the X glyph).
   Links one level up (breadcrumb parent, or Home at L0). */
.tt-catalog__tab-desktop-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tt-catalog__tab-desktop-close img {
  display: block;
  width: 32px;
  height: 32px;
}

/* ===== Mobile: Filters / Sort trigger buttons ============================ */

.tt-catalog__mobile-actions {
  display: none;
}

.tt-catalog__mobile-action-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1.5px solid var(--color-tea-brown);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--color-tea-brown);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.tt-catalog__mobile-reset-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border: 1.5px solid var(--color-tea-brown);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--color-tea-brown);
  transition: background-color 0.15s ease;
}

.tt-catalog__mobile-reset-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ===== Layout — sidebar is now an off-canvas panel, content is full width */

.tt-catalog__layout {
  display: block;
  margin-top: 24px;
}

/* ===== Filter off-canvas panel ============================================ */

.tt-catalog__filters-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 43, 43, 0.4);
  /* #main-header sits at z-index: 1000 (stylesheet.css) — this panel must
     float above it, not behind. */
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tt-catalog__filters-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.tt-catalog__sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 360px;
  max-width: 88vw;
  background: #FFFFFF;
  border-right: 1px solid #E0D5C9;
  overflow-y: auto;
  z-index: 1002;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.tt-catalog__sidebar.is-open {
  transform: translateX(0);
}

.tt-catalog__filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #4A3426;
  border-bottom: 1px solid #E0D5C9;
}

.tt-catalog__filters-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tt-catalog__filters-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1.5px solid #E0D5C9;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-dark-tea);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tt-catalog__filters-close:hover {
  border-color: #8B5E3C;
  color: #8B5E3C;
}

.tt-catalog__filter-group {
  border-bottom: 1px solid #E0D5C9;
}

.tt-catalog__filter-group:last-of-type {
  border-bottom: none;
  margin-bottom: 80px;
}

.tt-catalog__filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark-tea);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.tt-catalog__filter-btn:hover {
  color: #8B5E3C;
}

.tt-catalog__filter-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  transform: rotate(180deg);
}

.tt-catalog__filter-group.is-closed .tt-catalog__filter-chevron {
  transform: rotate(0deg);
}

/* Groups are open by default; .is-closed collapses the body */
.tt-catalog__filter-body {
  display: block;
  padding: 0 16px 12px;
}

.tt-catalog__filter-group.is-closed .tt-catalog__filter-body {
  display: none;
}

.tt-catalog__filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-dark-tea);
  transition: color 0.15s ease;
}

.tt-catalog__filter-item:hover {
  color: #8B5E3C;
}

/* Custom checkbox */
.tt-catalog__filter-check {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0 !important;
  border: 1px solid var(--color-tea-brown);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;  
  transition: background-color 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.tt-catalog__filter-check:focus,
.tt-catalog__filter-check:focus-visible {
  outline: none;
  box-shadow: none;
}

.tt-catalog__filter-check:checked {
  background: var(--color-tea-brown);
  border-color: var(--color-tea-brown);
}

.tt-catalog__filter-check:checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

/* Price range */
.tt-catalog__price-range {
  display: flex;
  gap: 8px;
}

.tt-catalog__price-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.tt-catalog__price-label {
  font-size: 11px;
  color: #8B8070;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tt-catalog__price-input {
  -moz-appearance: textfield;
}

.tt-catalog__price-input::-webkit-outer-spin-button,
.tt-catalog__price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.tt-catalog__sidebar-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px 16px;
  background: #FFFFFF;
  border-top: 1px solid #E0D5C9;
  margin-top: auto;
  position: sticky;
  bottom: 0;
}

.tt-catalog__filter-clear-btn {
  flex: 0 0 auto;
  padding: 12px 18px;
  background: none;
  color: var(--color-medium-gray);
  border: 1.5px solid #E0D5C9;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tt-catalog__filter-clear-btn:hover {
  border-color: #B0A898;
  color: var(--color-dark-tea);
}

.tt-catalog__show-results-btn {
  flex: 1 1 0;
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--color-tea-brown);
  color: var(--color-white);
  border: 1.5px solid var(--color-tea-brown);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tt-catalog__show-results-btn:hover {
  background: var(--color-dark-tea);
  border-color: var(--color-dark-tea);
}

/* ===== Toolbar ============================================================ */

.tt-catalog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EAEAEA;
}

.tt-catalog__toolbar-left,
.tt-catalog__toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tt-catalog__count span {
  color: var(--color-tea-brown);
  font-weight: 400;
  font-size: 16px;
}

.tt-catalog__count {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark-tea);
  white-space: nowrap;
}

/* Desktop "Фільтри" trigger — opens the off-canvas panel. Mobile gets its own
   full-width button in .tt-catalog__mobile-actions instead of this one. */
.tt-catalog__filters-trigger--desktop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #E0D5C9;
  border-radius: 8px;
  background: #fff;
  color: var(--color-dark-tea);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.tt-catalog__filters-trigger--desktop:hover {
  border-color: #8B5E3C;
  color: #8B5E3C;
}

/* Sort pills — replaces the old <select>. Active pill is bold/dark, the rest
   muted gray; a small reset icon returns to the default (p.sort_order) order. */
.tt-catalog__sort-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.tt-catalog__sort-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--color-medium-gray);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.tt-catalog__sort-pill:hover {
  color: var(--color-tea-brown);
  text-decoration: none;
}

.tt-catalog__sort-pill--active {
  color: var(--color-tea-brown);
}

.tt-catalog__sort-pill-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.tt-catalog__sort-pill-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.tt-catalog__toolbar-divider {
  width: 1px;
  height: 24px;
  background: #E0D5C9;
  flex-shrink: 0;
}

.tt-catalog__reset-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-tea-brown);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.tt-catalog__reset-filters:hover {
  color: var(--color-dark-tea);
  text-decoration: none;
}

.tt-catalog__reset-filters-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.tt-catalog__reset-filters-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* View toggle */
.tt-catalog__view-toggle {
  display: flex;
  gap: 8px;
}

.tt-catalog__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #4A3426;
  border-radius: 16px;
  background: transparent;
  color: #4A3426;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tt-catalog__view-btn svg {
  width: 48px;
  height: 48px;
}

.tt-catalog__view-btn--active {
  border-color: #8B5E3C;
  color: #8B5E3C;
  background: #F5EFE7;
}

/* ===== Product grid ======================================================= */

.tt-catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Override the strip-specific flex sizing from bestsellers_block.css */
.tt-catalog__grid .tt-product-card {
  flex: none;
  width: 100%;
}

/* ===== List view (.tt-catalog__grid--list, toggled by #tt-view-list) ===== */

.tt-catalog__grid.tt-catalog__grid--list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tt-catalog__grid--list .tt-product-card {
  flex-direction: row;
  min-height: 0;
}

.tt-catalog__grid--list .tt-product-card__media {
  flex: 0 0 285px;
  width: 285px;
  min-width: 285px;
  height: auto;
  border-bottom: none;
  border-right: 1px solid #EAEAEA;
}

.tt-catalog__grid--list .tt-product-card__media-img {
  border-radius: 12px;
}

.tt-catalog__grid--list .tt-product-card__body {
  min-width: 0;
}

.tt-catalog__grid--list .tt-product-card__title {
  -webkit-line-clamp: 1;
  min-height: 0;
}

/* Description — only meaningful once the card is wide enough to show it,
   so the grid card hides it entirely and only desktop list view reveals it
   (hidden again on mobile — both modes — via the 768px breakpoint below). */
.tt-product-card__desc {
  display: none;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
  overflow: hidden;
}

.tt-catalog__grid--list .tt-product-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Old/strikethrough price in the catalog */
.tt-product-card__prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tt-product-card__old-price {
  font-size: 13px;
  font-weight: 400;
  color: #B0A898;
  text-decoration: line-through;
  line-height: 1.3;
}

/* ===== Show more button =================================================== */

.tt-catalog__show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.tt-catalog__show-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border: 1.5px solid #8B5E3C;
  border-radius: 12px;
  background: transparent;
  color: #8B5E3C;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tt-catalog__show-more:hover {
  background: #F5EFE7;
  color: #4A3426;
  text-decoration: none;
}

/* ===== Empty state ======================================================== */

.tt-catalog__empty {
  padding: 48px 0;
  text-align: center;
  color: #6B6B6B;
  font-size: 16px;
}

/* ===== Responsive ========================================================= */

@media (max-width: 1024px) {
  .tt-catalog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .tt-catalog__inner {
    padding: 20px 16px 48px;
  }

  .tt-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Grid card image on mobile — fills the card's own width (2-col grid, so
     that's whatever the column computes to, never a fixed px) and gets an
     explicit height so it doesn't fall back to bestsellers_block.css's
     unrelated carousel-card height (270px). */
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card__media {
    width: 100%;
    height: 125px;
    min-width: 0;
    max-width: none;
    max-height: none;
    padding: 16px 8px;
  }

  /* Compact mobile grid card — smaller radius/padding/type scale than the
     desktop card (which stays the larger 24px-radius style everywhere
     else, e.g. the homepage strips and product-page "Схожі товари"). */
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card {
    border-radius: 8px;
  }
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card__body {
    padding: 8px;
  }
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card__title {
    font-size: 12px;
    min-height: calc(12px * 1.4 * 2);
  }
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card__chip {
    font-size: 12px;
  }
  /* Compact mobile grid card has no room for the Артикул/stock row — matches
     the design, which goes straight from image to title. */
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card__meta {
    display: none;
  }

  /* Same compact counter as the list card — the narrow 2-col card can't
     fit the desktop counter's 12px side padding + 8px gaps, so this trims
     both down while keeping the buttons/number at their native 16px/32px.
     Kept a bit narrower than content strictly needs so the cart button
     next to it always has room and never gets clipped. */
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card__counter {
    width: 80px;
    padding: 8px 4px;
    gap: 4px;
  }
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card__cart {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 8px 8px;
  }

  .tt-catalog__toolbar {
    flex-wrap: wrap;
    gap: 12px;
    /* No divider line on mobile — just a flat 16px gap down to the product
       grid instead of the border-bottom + 16px padding + 24px margin
       desktop uses. */
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
  }

  .tt-catalog__count {
    width: 100%;
    flex: none;
  }

  /* The toolbar's inline sort pills give way to Filters/Sort trigger buttons
     + a bottom-sheet sort panel — but the current-category + siblings tab
     row stays, just as a horizontal scroll strip instead of a full-width
     stretched row (too many siblings to fit otherwise, e.g. Пуер's 7
     children). */
  .tt-catalog__tabs-row {
    margin-top: 16px;
  }
  .tt-catalog__tabs-desktop {
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tt-catalog__tabs-desktop::-webkit-scrollbar {
    display: none;
  }
  /* Touch-swipe already scrolls this row on mobile — the arrow buttons are
     a desktop-only affordance for mouse/trackpad users. */
  .tt-catalog__tabs-nav-btn {
    display: none;
  }
  /* 48px everywhere on mobile (desktop is 64px) — plain tabs, the "you are
     here" pill, and the leaf's active-sibling-with-close-button all share
     this base class, so one rule here covers every variant instead of
     three separate height fixes. Zeroing vertical padding + relying on
     align-items: center (inherited) to center content is what lets the
     48px box hold both a 14px text tab and the active pill's
     icon+name+close row without any of them setting their own conflicting
     vertical padding. */
  .tt-catalog__tab-desktop {
    flex: 0 0 auto;
    white-space: nowrap;
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 14px;
  }
  .tt-catalog__tab-desktop--active,
  .tt-catalog__tab-desktop--active-sibling {
    /* height: 48px already comes from the shared base rule above. */
    padding-left: 8px;
    padding-right: 8px;
    gap: 8px;
    font-size: 14px;
  }
  /* Root "Всі товари" pills carry their own gap: 24px (desktop-scoped
     rule above, same selector) — cancel it back down to the standard 8px
     icon-to-label gap on mobile. Must repeat the exact same compound
     selector to match its specificity, or it loses regardless of source
     order. */
  .tt-catalog__tabs-desktop:not(:has(.tt-catalog__tab-desktop--active, .tt-catalog__tab-desktop--active-sibling)) .tt-catalog__tab-desktop {
    gap: 8px;
  }

  /* Icon + close glyph shrink to fit the compact 48px mobile pill (desktop
     keeps its own larger 48px icon box / 32px close glyph). */
  .tt-catalog__tab-desktop--active .tt-catalog__tab-desktop-icon,
  .tt-catalog__tab-desktop--active-sibling .tt-catalog__tab-desktop-icon {
    width: 16px;
    height: 16px;
    border-radius: 0;
  }
  .tt-catalog__tab-desktop-close img {
    width: 16px;
    height: 16px;
  }

  /* Divider sandwich (per design) around the Filters/Sort/Reset row —
     margin-top is the gap from the tabs line above down to this row's own
     top divider line. */
  .tt-catalog__mobile-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid #E7D7C8;
    border-bottom: 1px solid #E7D7C8;
  }
  .tt-catalog__mobile-action-btn,
  .tt-catalog__mobile-reset-btn {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 1px;
    border-radius: 16px;
  }

  /* Gap from the Filters/Sort/Reset row's bottom divider down to the
     count + view-toggle row — desktop's 24px (.tt-catalog__layout) is too
     wide here since mobile has its own divider right above. */
  .tt-catalog__layout {
    margin-top: 8px;
  }

  .tt-catalog__view-btn {
    width: 44px;
    height: 44px;
  }

  .tt-catalog__view-btn svg {
    width: 44px;
    height: 44px;
  }
  .tt-catalog__filters-trigger--desktop,
  .tt-catalog__sort-pills,
  .tt-catalog__toolbar-divider,
  .tt-catalog__reset-filters {
    display: none;
  }
  .tt-catalog__sidebar {
    width: 100%;
    max-width: 100%;
  }

  /* List view on mobile: no description (no room), and the gramming chip row
     collapses into a single-line dropdown — tap the active chip to expand
     the full option list as an overlay. min-width/max-height reset the
     unconditional desktop rule above (min-width: 285px) and the generic
     .tt-catalog__grid .tt-product-card__media { max-height: 125px } rule
     further down — same selector specificity in both cases, so without an
     explicit reset here they'd keep clamping this to 285 wide / 125 tall. */
  .tt-catalog__grid--list .tt-product-card__media {
    flex: 0 0 170px;
    width: 170px;
    min-width: 0;
    height: 270px;
    max-height: none;
    padding: 8px;
  }

  /* position: relative here is the fix for the "dropdown spans the whole
     screen" bug: .tt-product-card__gramming itself switches from relative to
     absolute when .is-open (see below), so it stops being its own anchor.
     Without a positioned ancestor nearby, left/right: 0 falls through to the
     viewport. Anchoring to __body instead keeps the dropdown exactly as wide
     as the card's content column — same width as the closed "select". */
  .tt-catalog__grid--list .tt-product-card__body {
    position: relative;
    padding: 12px;
    gap: 8px;
  }

  /* Mobile: no description in either mode. Grid never shows it (base rule
     already display: none). List needs the explicit .tt-catalog__grid--list
     scope here too — that's what reveals it on desktop, at equal (2-class)
     specificity, so a plain ".tt-product-card__desc { display: none }" here
     wouldn't be specific enough to win against it. */
  .tt-catalog__grid--list .tt-product-card__desc {
    display: none;
  }

  /* Collapsed dropdown look reuses the site's standard input (.tt-input) and
     city-search autocomplete (.tt-co-autocomplete) visual language instead of
     a one-off style, so it matches the rest of the site. */
  .tt-catalog__grid--list .tt-product-card__gramming {
    position: relative;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .tt-catalog__grid--list .tt-product-card__gramming:not(.is-open) .tt-product-card__chip:not(.tt-product-card__chip--active) {
    display: none;
  }

  /* Closed state — looks like .tt-input */
  .tt-catalog__grid--list .tt-product-card__gramming:not(.is-open) .tt-product-card__chip--active {
    width: 100%;
    max-width: 104px;
    justify-content: space-between;
    padding: 15px 9px;
    background: #FFFFFF;
    border: 1px solid var(--color-warm-sand);
    border-radius: var(--border-radius-input);
    font-size: 15px;
    color: var(--color-tea-brown);
  }

  .tt-catalog__grid--list .tt-product-card__gramming:not(.is-open) .tt-product-card__chip--active::after {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 8px;
  }

  /* Open state — looks like .tt-co-autocomplete__list. Expands to fit every
     option with no internal scroll, even past the card's own bottom edge —
     the card's overflow: hidden (bestsellers_block.css, clips the rounded
     corners) is lifted below whenever this is open, so the list isn't cut off. */
  .tt-catalog__grid--list .tt-product-card__gramming.is-open {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    flex-direction: column;
    flex-wrap: nowrap;
    background: var(--color-white);
    border: 1px solid var(--color-warm-sand);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: 4px 0;
  }

  .tt-catalog__grid--list .tt-product-card:has(.tt-product-card__gramming.is-open) {
    overflow: visible;
  }

  /* Options inside the open list — looks like .tt-co-autocomplete__item */
  .tt-catalog__grid--list .tt-product-card__gramming.is-open .tt-product-card__chip {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 14px;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-dark-text);
  }

  .tt-catalog__grid--list .tt-product-card__gramming.is-open .tt-product-card__chip:hover {
    background: var(--color-soft-cream);
    color: var(--color-tea-brown);
  }

  /* ===== Compact mobile LIST card =========================================
     Same 205px row height and compact type/spacing as the grid card's own
     mobile treatment, so switching grid/list doesn't change information
     density on screen — just the layout (image left vs image top). */
  .tt-catalog__grid--list .tt-product-card {
    height: 205px;
    border-radius: 8px;
  }
  .tt-catalog__grid--list .tt-product-card__media {
    height: 205px;
    padding: 16px 8px;
  }
  .tt-catalog__grid--list .tt-product-card__body {
    padding: 8px;
  }
  .tt-catalog__grid--list .tt-product-card__title {
    font-size: 12px;
    -webkit-line-clamp: 2;
    min-height: calc(12px * 1.4 * 2);
  }
  .tt-catalog__grid--list .tt-product-card__meta {
    display: none;
  }
  /* Row height is fixed at 205px above — without pinning price-row to the
     bottom, a card with no gramming leaves it (and cart-row) sitting
     higher up, with dead space underneath instead of at the card edge. */
  .tt-catalog__grid--list .tt-product-card__price-row {
    flex-direction: column;
    align-items: flex-start;
    margin-top: auto;
  }

  /* Collapsed gramming "select" — match the compact card's smaller type. */
  .tt-catalog__grid--list .tt-product-card__gramming {
    width: 104px;
  }
  .tt-catalog__grid--list .tt-product-card__gramming:not(.is-open) .tt-product-card__chip--active {
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 16px;
    color: #4A3426;
  }

  /* Same compact counter as the grid card — narrows the desktop padding/gap,
     buttons and number stay at their native 16px/32px. Kept a bit narrower
     than content strictly needs so the cart button next to it always has
     room and never gets clipped against the card edge. */
  .tt-catalog__grid--list .tt-product-card__counter {
    width: 80px;
    padding: 8px 4px;
    gap: 4px;
  }
  .tt-catalog__grid--list .tt-product-card__cart {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 8px 8px;
  }
}

/* ===== Mobile "Сортування" bottom sheet =================================== */

.tt-sort-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 43, 43, 0.4);
  /* Same reasoning as .tt-catalog__filters-backdrop — must clear #main-header's z-index: 1000. */
  z-index: 1003;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tt-sort-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.tt-sort-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  z-index: 1004;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  box-shadow: 0 -8px 24px rgba(43, 43, 43, 0.15);
}

.tt-sort-sheet.is-open {
  transform: translateY(0);
}

.tt-sort-sheet__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #EAEAEA;
  flex-shrink: 0;
}

.tt-sort-sheet__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-dark-tea);
  background: none;
  border: none;
  cursor: pointer;
}

.tt-sort-sheet__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-dark-tea);
}

.tt-sort-sheet__list {
  overflow-y: auto;
  padding: 8px 16px;
}

.tt-sort-sheet__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  cursor: pointer;
  border-bottom: 1px solid #F2F2F2;
}

.tt-sort-sheet__row:last-child {
  border-bottom: none;
}

.tt-sort-sheet__radio {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  border: 1.5px solid #E0D5C9;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.tt-sort-sheet__radio:checked {
  border-color: var(--color-tea-brown);
}

.tt-sort-sheet__radio:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-tea-brown);
}

.tt-sort-sheet__row-icon {
  display: inline-flex;
  color: var(--color-tea-brown);
}

.tt-sort-sheet__row-icon svg {
  width: 18px;
  height: 18px;
}

.tt-sort-sheet__row-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark-text);
}

.tt-sort-sheet__footer {
  padding: 12px 16px 16px;
  border-top: 1px solid #EAEAEA;
  flex-shrink: 0;
}

.tt-sort-sheet__apply {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--color-tea-brown);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.tt-sort-sheet__apply:hover {
  background: var(--color-dark-tea);
}

@media (min-width: 769px) {
  .tt-sort-sheet,
  .tt-sort-sheet-backdrop {
    display: none;
  }
}

@media (max-width: 600px) {
  .tt-catalog__grid:not(.tt-catalog__grid--list) {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    height: fit-content;
  }
  /* :not(.tt-catalog__grid--list) on all of these — same selector specificity
     as the list-mode rules above, so without it these grid-only tweaks would
     win the cascade (later in the file) and leak into list view too.
     (Image sizing itself is set once, for the whole ≤768px range, in the
     768px breakpoint above — no separate override needed here.) */
  /* Pins price/rating (and the cart-row right after it) to the bottom of
     the card instead of right after the title/gramming block — cards in
     the same grid row are stretched to equal height by CSS Grid, so
     without this, a card with no gramming (shorter content above) leaves
     its price/counter sitting higher than a neighbouring card that has
     gramming, and the row visibly jumps as you scroll past mixed cards. */
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card__price-row {
     margin-top: auto;
  }
  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card {
      min-height: 0;
  }

  .tt-catalog__grid:not(.tt-catalog__grid--list) .tt-product-card__price-row {
    flex-direction: column;
    align-items: flex-start;
  }
}