/* Catalog page composition. Individual controls and product cards live in css/ui. */
.catalog-page {
  min-height: calc(100vh - var(--header-height) - 12px);
  padding: 52px 0 96px;
}
.catalog-page__inner {
  width: min(var(--container-max), calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
}
.catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #78827e;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.catalog-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.catalog-breadcrumbs svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.catalog-page__topline {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-top: 33px;
}
.catalog-page__heading {
  flex: 0 0 auto;
}
.catalog-page__heading h1 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 62px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 240px 116px;
  gap: 14px;
  align-items: center;
  width: min(780px, 100%);
}
.catalog-layout {
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  gap: 24px;
  margin-top: 34px;
}
.catalog-filters {
  align-self: start;
  padding: 22px;
  border: 1px solid rgba(67, 52, 35, 0.1);
  border-radius: 16px;
  background: rgba(255, 253, 249, 0.72);
}
.catalog-filters__topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(67, 52, 35, 0.09);
}
.catalog-filters h2,
.catalog-filter-group legend,
.catalog-filter-group__title,
.ui-select > span {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 800;
}
.catalog-filters h2 {
  margin: 0;
  font-size: 15px;
}
.catalog-filters__topline button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-brand);
  cursor: pointer;
  font: 700 13px/1 var(--font-sans);
}
.catalog-filter-group {
  min-width: 0;
  margin: 0;
  padding: 23px 0;
  border: 0;
  border-bottom: 1px solid rgba(67, 52, 35, 0.09);
}
.catalog-filter-group legend,
.catalog-filter-group__title {
  margin-bottom: 15px;
  padding: 0;
}
.catalog-filter-group:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}
.catalog-category-branch {
  min-height: 34px;
  max-height: 1200px;
  margin-top: 0;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition:
    max-height 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.24s ease,
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.catalog-filter-group--categories {
  gap: 0 !important;
}
.catalog-category-branch + .catalog-category-branch {
  margin-top: 5px;
}
.catalog-category-branch.is-extra {
  max-height: 0;
  min-height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px);
}
.catalog-filter-group.is-categories-expanded .catalog-category-branch.is-extra {
  max-height: 1200px;
  margin-top: 5px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.catalog-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
}
.catalog-category-row > .ui-checkbox {
  grid-column: 1/-1;
  grid-row: 1;
}
.catalog-category-row:has(.catalog-subcategories-toggle) > .ui-checkbox {
  padding-right: 31px;
}
.catalog-subcategories-toggle {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  width: 28px;
  height: 28px;
  padding: 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-brand);
  cursor: pointer;
}
.catalog-subcategories-toggle:hover {
  background: rgba(20, 83, 63, 0.08);
}
.catalog-subcategories-toggle svg {
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 0.25s ease;
}
.catalog-category-branch.is-subcategories-expanded
  .catalog-subcategories-toggle
  svg {
  transform: rotate(180deg);
}
.catalog-subcategories {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.22s ease;
}
.catalog-subcategories > div {
  min-height: 0;
  margin-left: 11px;
  padding-left: 14px;
  overflow: hidden;
  border-left: 1px solid rgba(20, 83, 63, 0.18);
}
.catalog-subcategories .ui-checkbox {
  margin-top: 12px !important;
}
.catalog-category-branch.is-subcategories-expanded .catalog-subcategories,
.catalog-category-branch.is-search-match .catalog-subcategories {
  grid-template-rows: 1fr;
  opacity: 1;
}
.catalog-filter-group.is-categories-searching .catalog-category-branch.is-searching-child-only .catalog-category-row {
  display: none;
}
.catalog-filter-group.is-categories-searching .catalog-category-branch.is-searching-child-only .catalog-subcategories > div {
  padding-left: 0;
  border-left: 0;
}
.catalog-category-option[data-category-depth] {
  padding-left: calc(var(--category-depth, 0) * 12px);
}
.catalog-category-option[data-category-depth="1"] {
  padding-left: 18px;
}
.catalog-category-option[data-category-depth="2"] {
  padding-left: 32px;
}
.catalog-category-option[data-category-depth="3"] {
  padding-left: 46px;
}
.catalog-categories-more {
  align-self: flex-start;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-brand);
  cursor: pointer;
  font: 700 13px/1.2 var(--font-sans);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.catalog-categories-more:hover {
  color: var(--color-text);
  transform: translateX(2px);
}

/* Category labels are navigation, not a dense spreadsheet: keep them readable
   and let a long real category name wrap instead of cutting it off. */
@media (min-width: 721px) {
  .catalog-filters .catalog-category-option {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 31px;
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.25;
  }
  .catalog-filters .catalog-category-option input {
    width: 18px;
    height: 18px;
    border-radius: 6px;
  }
  .catalog-filters .catalog-category-option b {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }
  .catalog-filters .catalog-category-option em {
    align-self: center;
    min-width: 1.5em;
    font-size: 13px;
    text-align: right;
  }
  .catalog-subcategories .catalog-category-option {
    margin-top: 7px !important;
    font-size: 14px;
  }
  .catalog-subcategories > div {
    margin-left: 8px;
    padding-left: 11px;
  }
  .catalog-subcategories-toggle {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 9px;
  }
  .catalog-subcategories-toggle:focus-visible {
    outline: 0;
    background: rgba(20, 83, 63, 0.1);
    box-shadow: 0 0 0 2px rgba(20, 83, 63, 0.24);
  }
  .catalog-category-row {
    grid-template-columns: minmax(0, 1fr) 34px;
  }
  .catalog-category-row:has(.catalog-subcategories-toggle) > .ui-checkbox {
    padding-right: 37px;
  }
}
.catalog-products {
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}
.catalog-page.is-catalog-overview .catalog-toolbar {
  grid-template-columns: minmax(280px, 440px);
  justify-content: end;
}
.catalog-page.is-catalog-overview .catalog-sort,
.catalog-page.is-catalog-overview .catalog-view-switcher,
.catalog-page.is-catalog-overview .catalog-mobile-actions__sort {
  display: none;
}
.catalog-category-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 83, 63, 0.13);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(35, 55, 46, 0.08);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.catalog-category-card:hover,
.catalog-category-card:focus-visible {
  border-color: rgba(20, 83, 63, 0.42);
  outline: 0;
  box-shadow: 0 16px 34px rgba(35, 55, 46, 0.14);
  transform: translateY(-2px);
}
.catalog-category-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}
.catalog-category-card__media img {
  width: 100%;
  height: 100%;
  padding: 10px;
  object-fit: contain;
  transition: transform 260ms ease;
}
.catalog-category-card:hover .catalog-category-card__media img,
.catalog-category-card:focus-visible .catalog-category-card__media img {
  transform: none;
}
.catalog-category-card__body {
  display: grid;
  gap: 6px;
  padding: 15px 48px 17px 16px;
}
.catalog-category-card__body strong {
  font: 700 19px/1.25 var(--font-sans);
}
.catalog-category-card__body small {
  color: var(--color-text-muted);
  font: 600 14px/1.3 var(--font-sans);
}
.catalog-category-card > svg {
  position: absolute;
  right: 16px;
  bottom: 22px;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--color-brand);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
/* Reserve two title lines and stretch each grid item, so a longer product
   name cannot make only its card taller than the neighbouring cards. */
.catalog-page:not([data-view="list"]) .catalog-products {
  align-self: start;
  grid-auto-rows: max-content;
}
.catalog-page:not([data-view="list"]) .catalog-product-card {
  align-self: start;
  min-height: 0;
  height: auto;
}
.catalog-page:not([data-view="list"]) .catalog-product-card h3 {
  min-height: 2.3em;
}
.catalog-page.is-catalog-empty .catalog-products {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.catalog-page.is-catalog-empty .catalog-products::after {
  max-width: 360px;
  color: var(--color-text-muted);
  content: "По выбранным параметрам товары не найдены. Измените диапазон цены или сбросьте фильтры.";
  font: 600 16px/1.5 var(--font-sans);
  text-align: center;
}
.catalog-products .catalog-product-card[hidden] {
  display: none !important;
}
.catalog-page.is-products-loading .catalog-products {
  opacity: 0.45;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.catalog-products {
  transition: opacity 180ms ease;
}
.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  margin-top: 18px;
}
.catalog-pagination__page,
.catalog-pagination__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(67, 52, 35, 0.13);
  border-radius: 11px;
  background: rgba(255, 253, 249, 0.78);
  color: var(--color-text);
  font: 700 13px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}
.catalog-pagination__page:disabled,
.catalog-pagination__arrow:disabled {
  cursor: default;
}
.catalog-pagination__page:hover,
.catalog-pagination__page:focus-visible,
.catalog-pagination__arrow:not(.is-disabled):hover,
.catalog-pagination__arrow:not(.is-disabled):focus-visible {
  border-color: var(--color-brand);
  background: #fffdf9;
  color: var(--color-brand);
  outline: 0;
  transform: translateY(-1px);
}
.catalog-pagination__page.is-current {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
  box-shadow: 0 6px 14px rgba(20, 83, 63, 0.18);
}
.catalog-pagination__arrow svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.catalog-pagination__arrow.is-disabled {
  opacity: 0.38;
}
.catalog-pagination__ellipsis {
  display: grid;
  width: 24px;
  height: 42px;
  place-items: center;
  color: var(--color-text-muted);
  font: 700 14px/1 var(--font-sans);
}
/* The list view intentionally keeps every card compact: the image anchors the
   row, the product details are easy to scan, and the rental decision stays in
   a dedicated action column. */
.catalog-page[data-view="list"] .catalog-products {
  grid-template-columns: 1fr;
  gap: 12px;
}
.catalog-page[data-view="list"] .catalog-product-card {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr) 214px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 20px;
  min-height: 141px;
  padding: 9px 15px 9px 9px;
  border-radius: 16px;
  align-content: center;
}
.catalog-page[data-view="list"] .catalog-product-card__media {
  grid-row: 1 / -1;
  width: 158px;
  height: 122px;
  margin: 0;
  border-radius: 11px;
}
.catalog-page[data-view="list"] .catalog-product-card h3 {
  max-width: 100%;
  margin: 0;
  font-size: 16px;
  line-height: 1.22;
}
.catalog-page[data-view="list"] .catalog-product-card p {
  min-height: 0;
  max-width: 780px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.42;
  -webkit-line-clamp: 2;
}
.catalog-page[data-view="list"] .catalog-product-card__availability {
  margin: 0;
  padding: 6px 10px;
  font-size: 11px;
}
.catalog-page[data-view="list"] .catalog-product-card__favorite {
  top: 17px;
  right: auto;
  left: 126px;
}
.catalog-page[data-view="list"] .catalog-product-card__bottom {
  grid-column: 3;
  grid-row: 1 / -1;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 1px solid rgba(67, 52, 35, 0.1);
}
.catalog-page[data-view="list"] .catalog-product-card__bottom strong {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  line-height: 1.15;
}
.catalog-page[data-view="list"] .catalog-product-card__bottom small {
  margin-top: 3px;
  font-size: 9px;
}
.catalog-page[data-view="list"] .catalog-product-card__bottom button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  border-color: var(--color-brand);
  border-radius: 9px;
  background: var(--color-brand);
  color: #fff;
  font: 700 11px/1 var(--font-sans);
}
.catalog-page[data-view="list"] .catalog-product-card__bottom button span {
  display: inline;
}
.catalog-page[data-view="list"] .catalog-product-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  flex: 1 1 auto;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.catalog-page[data-view="list"] .catalog-product-card__actions button {
  min-width: 0;
}
.catalog-page[data-view="list"]
  .catalog-product-card__actions
  [data-product-open] {
  padding-right: 0;
  padding-left: 0;
}
.catalog-page[data-view="list"] .catalog-product-card__bottom button svg {
  width: 15px;
  height: 15px;
}
.catalog-mobile-actions,
.catalog-filters__mobile-handle,
.catalog-filters__close,
.catalog-filters__apply,
.catalog-show-more {
  display: none;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1220px) {
  .catalog-page__topline {
    align-items: flex-start;
    flex-direction: column;
  }
  .catalog-toolbar {
    width: 100%;
  }
}
@media (min-width: 721px) {
  .catalog-page {
    padding-top: 52px;
  }
  .catalog-page__topline {
    margin-top: 34px;
  }
}
@media (max-width: 1080px) {
  .catalog-layout {
    grid-template-columns: 230px minmax(0, 1fr);
  }
  .catalog-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 721px) and (max-width: 940px) {
  .catalog-page[data-view="list"] .catalog-product-card {
    grid-template-columns: 150px minmax(0, 1fr) auto;
    column-gap: 16px;
    min-height: 138px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__media {
    width: 150px;
    height: 116px;
  }
  .catalog-page[data-view="list"] .catalog-product-card h3 {
    font-size: 15px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom {
    min-width: 100px;
    padding-left: 12px;
  }
}
@media (max-width: 720px) {
  body.catalog-filters-open {
    overflow: hidden;
  }
  .catalog-page {
    padding-top: 28px;
  }
  .catalog-page__topline {
    margin-top: 20px;
  }
  .catalog-toolbar {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .catalog-search {
    grid-column: 1/-1;
  }
  .catalog-sort,
  .catalog-view-switcher {
    display: none;
  }
  .catalog-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .catalog-page.is-catalog-overview .catalog-mobile-actions {
    grid-template-columns: 1fr;
  }
  .catalog-mobile-actions > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 43px;
    border: 1px solid rgba(67, 52, 35, 0.11);
    border-radius: 9px;
    background: rgba(255, 253, 249, 0.76);
    color: var(--color-text);
    font: 700 11px/1 var(--font-sans);
  }
  .catalog-mobile-actions svg,
  .catalog-show-more svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }
  .catalog-layout {
    grid-template-columns: 1fr;
  }
  .catalog-filters {
    position: fixed !important;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: block;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 84px);
    margin: 0;
    padding: 0 20px 19px;
    overflow-y: auto;
    border: 1px solid rgba(67, 52, 35, 0.08);
    border-radius: 23px 23px 0 0;
    background: #fffdf9;
    box-shadow: 0 16px 48px rgba(20, 31, 27, 0.26);
    transform: translateY(105%);
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .catalog-page.is-filters-open {
    z-index: 70;
  }
  .catalog-page.is-filters-open .catalog-filters {
    transform: translateY(0);
  }
  /* iOS can draw a number-input caret above its real position when the
     focused field stays inside a transformed fixed sheet.  JavaScript keeps
     the transform only for the opening motion, then this equivalent resting
     state removes that transformed ancestor. */
  .catalog-page.is-filters-open .catalog-filters.is-open-settled {
    transform: none;
  }
  .catalog-page.is-filters-open::after {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(20, 31, 27, 0.3);
    content: "";
    opacity: var(--filters-backdrop-opacity, 1);
    transition: opacity 160ms ease;
  }
  .catalog-filters__mobile-handle {
    position: relative;
    display: block;
    width: 38px;
    height: 4px;
    margin: 10px auto 14px;
    border-radius: 99px;
    background: #d5d0c9;
    touch-action: none;
    user-select: none;
  }
  .catalog-filters__mobile-handle::before {
    position: absolute;
    inset: -14px -80px;
    content: "";
  }
  .catalog-filters__topline {
    padding-bottom: 17px;
  }
  .catalog-filters__topline h2 {
    font-size: 17px;
  }
  .catalog-filters__topline > div {
    display: flex;
    align-items: center;
    gap: 13px;
  }
  .catalog-filters__reset svg {
    display: none;
  }
  .catalog-filters__close {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: 400 25px/1 var(--font-sans);
  }
  .catalog-filters__apply {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 23px;
    border: 0;
    border-radius: 8px;
    background: var(--color-brand);
    color: #fff;
    box-shadow: 0 5px 13px rgba(20, 83, 63, 0.18);
    font: 700 12px/1 var(--font-sans);
  }
  .catalog-filters.is-dragging {
    transition: none;
  }
  .catalog-products {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .catalog-page.is-catalog-overview .catalog-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .catalog-category-card {
    border-radius: 14px;
  }
  .catalog-category-card__media {
    aspect-ratio: 1 / 1;
  }
  .catalog-category-card__media img {
    padding: 7px;
  }
  .catalog-category-card__body {
    gap: 4px;
    min-height: 73px;
    padding: 11px 30px 13px 11px;
  }
  .catalog-category-card__body strong {
    font-size: 15px;
  }
  .catalog-category-card__body small {
    font-size: 12px;
  }
  .catalog-category-card > svg {
    right: 10px;
    bottom: 15px;
    width: 16px;
    height: 16px;
  }
  .catalog-page[data-view="list"] .catalog-products {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .catalog-page[data-view="list"] .catalog-product-card {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    column-gap: 11px;
    min-height: 104px;
    padding: 6px;
    border: 1px solid rgba(67, 52, 35, 0.1);
    border-radius: 12px;
    background: rgba(255, 253, 249, 0.73);
  }
  .catalog-page[data-view="list"] .catalog-product-card__media {
    grid-row: 1 / -1;
    width: 112px;
    height: 92px;
    margin: 0;
    border-radius: 8px;
  }
  .catalog-page[data-view="list"] .catalog-product-card h3 {
    max-width: calc(100% - 26px);
    margin: 5px 0 0;
    font-size: 12px;
  }
  .catalog-page[data-view="list"] .catalog-product-card p {
    margin: 5px 0 6px;
    font-size: 9px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__availability {
    padding: 4px 7px;
    font-size: 8px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__favorite {
    top: 10px;
    right: 10px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom {
    grid-column: 2 / 4;
    grid-row: 3;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom strong {
    display: block;
    align-items: initial;
    font-size: 15px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom small {
    margin: 0;
    font-size: 8px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom button {
    width: 31px;
    height: 31px;
  }
  .catalog-pagination {
    gap: 6px;
    margin-top: 12px;
  }
  .catalog-pagination__page,
  .catalog-pagination__arrow {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .catalog-page {
    padding-top: 28px;
    padding-bottom: 60px;
    min-height: calc(50vh - var(--header-height) - 6px);
  }
  .catalog-page__heading h1 {
    font-size: 36px;
    line-height: 1.02;
  }
}
.catalog-filter-group {
  padding-block: 28px;
}
.catalog-filter-group:first-of-type {
  padding-top: 30px;
}
.catalog-filter-group legend,
.catalog-filter-group__title {
  margin-bottom: 19px;
}
.catalog-filter-group:last-of-type {
  padding-bottom: 0;
}
@media (min-width: 721px) {
  .catalog-layout {
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 24px;
  }
  .catalog-filters {
    padding: 27px 24px 29px;
    border-color: rgba(67, 52, 35, 0.14);
    border-radius: 23px;
    background: rgba(255, 253, 249, 0.8);
    box-shadow: 0 12px 32px rgba(83, 66, 44, 0.035);
  }
  .catalog-filters__topline {
    align-items: center;
    padding-bottom: 23px;
  }
  .catalog-filters h2 {
    font-size: 24px;
    letter-spacing: -0.025em;
  }
  .catalog-filters__topline > div {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .catalog-filters__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px !important;
    color: var(--color-brand) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap;
  }
  .catalog-filters__reset svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }
  .catalog-filters__reset svg.is-resetting {
    animation: catalog-reset-spin 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .catalog-filters__close {
    display: none;
  }
  .catalog-filter-group {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    border-bottom-color: rgba(67, 52, 35, 0.12);
  }
  .catalog-filter-group:first-of-type {
    padding-top: 20px;
  }
  .catalog-filters__topline + .catalog-filter-group {
    gap: 14px;
  }
  .catalog-filter-group:last-of-type {
    padding-bottom: 0;
  }
  .catalog-filter-group legend,
  .catalog-filter-group__title,
  .ui-select > span {
    font-size: 19px;
    letter-spacing: -0.02em;
  }
  .catalog-filter-group legend,
  .catalog-filter-group__title {
    width: 100%;
    margin-bottom: 18px;
  }
  .catalog-filter-group + .catalog-filter-group legend,
  .catalog-filter-group + .catalog-filter-group .catalog-filter-group__title {
    margin-top: 0;
    margin-bottom: 18px;
    transform: none;
  }
  .ui-checkbox {
    grid-template-columns: 23px minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.22;
  }
  .catalog-filters__topline + .catalog-filter-group .ui-checkbox {
    margin-top: 0;
  }
  .ui-checkbox input {
    width: 23px;
    height: 23px;
    border-radius: 7px;
  }
  .ui-checkbox input::before {
    width: 9px;
    height: 6px;
    border-width: 0 0 2px 2px;
  }
  .ui-checkbox em {
    font-size: 12px;
  }
  .ui-range {
    height: 23px;
    margin: 8px 0 18px;
  }
  .ui-range__track,
  .ui-range__fill {
    top: 10px;
    height: 4px;
  }
  .ui-range-values {
    grid-template-columns: 1fr 26px 1fr;
    gap: 8px;
    font-size: 16px;
  }
  .ui-range-values input {
    height: 50px;
    padding-left: 34px;
    border-radius: 11px;
    font-size: 18px;
  }
  .ui-range-values label span {
    left: 14px;
    font-size: 13px;
  }
  .ui-segmented {
    gap: 9px 8px;
  }
  .ui-segmented button {
    flex: 0 0 calc((100% - 16px) / 3);
    min-height: 44px;
    padding: 0 5px;
    border-radius: 11px;
    font-size: 13px;
  }
  .ui-select {
    gap: 14px;
    padding-top: 25px;
  }
  .ui-select select {
    height: 52px;
    padding: 0 45px 0 17px;
    border-radius: 11px;
    font-size: 14px;
  }
}
@keyframes catalog-reset-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .catalog-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .catalog-filters {
    padding: 25px 21px 27px;
  }
  .catalog-filters h2 {
    font-size: 22px;
  }
  .catalog-filters__reset {
    font-size: 12px !important;
  }
  .catalog-filter-group legend,
  .catalog-filter-group__title,
  .ui-select > span {
    font-size: 17px;
  }
  .ui-checkbox {
    font-size: 13px;
  }
}

.ui-select__native {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.ui-select::after {
  display: none;
}
.ui-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 0 17px;
  border: 1px solid rgba(67, 52, 35, 0.14);
  border-radius: 11px;
  outline: 0;
  background: rgba(255, 255, 255, 0.54);
  color: var(--color-text);
  cursor: pointer;
  font: 600 14px/1 var(--font-sans);
  text-align: left;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}
.ui-select__trigger:hover,
.ui-select.is-open .ui-select__trigger {
  border-color: var(--color-brand);
  background: #fffdf9;
  box-shadow:
    0 0 0 2px rgba(20, 83, 63, 0.14),
    0 5px 14px rgba(20, 83, 63, 0.08);
}
.ui-select__trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 180ms ease;
}
.ui-select.is-open .ui-select__trigger svg {
  transform: rotate(180deg);
}
.ui-select__menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 4;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(67, 52, 35, 0.13);
  border-radius: 11px;
  background: #fffdf9;
  box-shadow: 0 12px 28px rgba(40, 48, 43, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}
.ui-select__menu[hidden] {
  display: none;
}
.ui-select.is-open .ui-select__menu {
  z-index: 100000;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.catalog-filters {
  overflow: visible;
}
.catalog-filter-group:has(.ui-select.is-open) {
  position: relative;
  z-index: 100000;
}
.ui-select.is-open {
  z-index: 100000;
}
.catalog-page:has(.catalog-filters .ui-select.is-open) {
  z-index: 2;
}
.ui-select__menu button {
  position: relative;
  padding-right: 38px;
  padding: 10px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font: 600 13px/1.2 var(--font-sans);
  text-align: left;
}
.ui-select__menu button:hover,
.ui-select__menu button[aria-selected="true"] {
  background: rgba(20, 83, 63, 0.09);
}
.ui-select__menu button[aria-selected="true"]::after {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 10px;
  height: 6px;
  border-bottom: 2px solid var(--color-brand);
  border-left: 2px solid var(--color-brand);
  content: "";
  transform: translateY(-65%) rotate(-45deg);
}
.catalog-sort::after {
  display: none;
}
.ui-select--compact {
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ui-select--compact .ui-select__trigger {
  height: 54px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}
.ui-select--compact .ui-select__menu {
  min-width: 100%;
}

/* Long filter lists stay inside the sidebar instead of covering the footer. */
.catalog-filters .ui-select:not(.ui-select--compact) .ui-select__menu {
  max-height: min(340px, 46vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.catalog-filters
  .ui-select:not(.ui-select--compact)
  .ui-select__menu::-webkit-scrollbar {
  display: none;
}
.catalog-category-search {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 0 13px;
  border: 1px solid rgba(67, 52, 35, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.58);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}
.catalog-category-search:focus-within {
  border-color: var(--color-brand);
  background: #fffdf9;
  box-shadow: 0 0 0 2px rgba(20, 83, 63, 0.1);
}
.catalog-category-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-right: 9px;
  fill: none;
  stroke: var(--color-brand);
  stroke-linecap: round;
  stroke-width: 1.8;
}
.catalog-category-search input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font: 600 13px/1 var(--font-sans);
}
.catalog-category-search input::-webkit-search-cancel-button {
  display: none;
}
.catalog-filter-group.is-categories-searching
  .catalog-category-branch.is-extra {
  max-height: 1200px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.catalog-filter-group .ui-checkbox[hidden],
.catalog-filter-group .catalog-category-branch[hidden],
.catalog-filter-group .catalog-categories-more[hidden] {
  display: none !important;
}
@media (max-width: 720px) {
  .ui-select__trigger {
    height: 42px;
    font-size: 11px;
  }
  .ui-select__menu {
    top: calc(100% + 6px);
  }
}

/* Mobile catalogue controls and filters are a true bottom sheet. */
@media (max-width: 720px) {
  .catalog-mobile-actions__sort {
    position: relative;
    display: flex;
    height: 43px;
    overflow: hidden;
    border: 1px solid rgba(67, 52, 35, 0.11);
    border-radius: 9px;
    background: rgba(255, 253, 249, 0.76);
  }
  .catalog-mobile-actions__sort select {
    width: 100%;
    height: 100%;
    padding: 0 38px 0 14px;
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font: 700 11px/1 var(--font-sans);
    text-align: center;
    text-align-last: center;
  }
  .catalog-mobile-actions__sort i {
    position: absolute;
    top: 50%;
    right: 17px;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
  }
  .catalog-filters {
    max-height: min(88dvh, 760px);
    padding: 0 18px 18px;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 28px 28px 0 0;
    background: #fffdf9;
    box-shadow: 0 -18px 54px rgba(17, 35, 29, 0.22);
    scrollbar-width: none;
  }
  .catalog-filters::-webkit-scrollbar {
    display: none;
  }
  .catalog-filters__mobile-handle {
    width: 48px;
    height: 5px;
    margin: 11px auto 8px;
    background: #c8c7c1;
  }
  .catalog-filters__topline {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -18px;
    padding: 12px 18px 16px;
    border-bottom: 1px solid rgba(67, 52, 35, 0.09);
    background: rgba(255, 253, 249, 0.96);
    backdrop-filter: blur(12px);
  }
  .catalog-filters__topline h2 {
    font-size: 20px;
  }
  .catalog-filters__topline > div {
    gap: 8px;
  }
  .catalog-filters__reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background: #f0f4f0;
    font-size: 12px;
  }
  .catalog-filters__reset svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
  }
  .catalog-filters__close {
    position: relative;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 10px;
    background: #f0f4f0;
    color: transparent;
    font-size: 0;
  }
  .catalog-filters__close::before,
  .catalog-filters__close::after {
    position: absolute;
    width: 15px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-brand);
    content: "";
  }
  .catalog-filters__close::before {
    transform: rotate(45deg);
  }
  .catalog-filters__close::after {
    transform: rotate(-45deg);
  }
  .catalog-filter-group {
    padding: 22px 2px;
  }
  .catalog-filter-group legend,
  .catalog-filter-group__title,
  .ui-select > span {
    margin-bottom: 15px;
    font-size: 17px;
  }
  .catalog-filters .ui-checkbox {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    min-height: 36px;
    margin-top: 5px;
    font-size: 13px;
  }
  .catalog-filters .ui-checkbox input {
    width: 22px;
    height: 22px;
    border-radius: 7px;
  }
  .catalog-filters .ui-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .catalog-filters .ui-segmented button {
    min-height: 42px;
    padding: 0 5px;
    font-size: 11px;
  }
  .catalog-filters .ui-select {
    padding: 22px 2px 8px;
  }
  .catalog-filters__apply {
    position: sticky;
    bottom: 0;
    z-index: 5;
    height: 52px;
    margin: 14px 0 0;
    border-radius: 13px;
    box-shadow: 0 8px 24px rgba(20, 83, 63, 0.22);
    font-size: 13px;
  }
  .catalog-filters.is-dragging {
    transition: none;
    will-change: transform;
  }
}

/* Mobile polish: the sheet handle and heading stay together while its content scrolls. */
@media (max-width: 720px) {
  .catalog-filters__mobile-handle {
    position: sticky;
    top: 0;
    z-index: 7;
    width: auto;
    height: 24px;
    margin: 0 -18px;
    border-radius: 28px 28px 0 0;
    background: rgba(255, 253, 249, 0.98);
  }
  .catalog-filters__mobile-handle::before {
    inset: 0;
  }
  .catalog-filters__mobile-handle::after {
    position: absolute;
    top: 11px;
    left: 50%;
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: #c8c7c1;
    content: "";
    transform: translateX(-50%);
  }
  .catalog-filters__topline {
    top: 24px;
  }
  .catalog-filter-group legend,
  .catalog-filter-group__title,
  .ui-select > span {
    font-size: 19px;
  }
  .ui-range-values label span {
    font-size: 14px;
  }
  .catalog-search input,
  .catalog-category-search input {
    font-size: 14px;
  }
  .catalog-product-card,
  .catalog-page[data-view="list"] .catalog-product-card {
    padding: 12px;
    background: #fff;
  }
  .catalog-product-card__media,
  .catalog-page[data-view="list"] .catalog-product-card__media {
    aspect-ratio: 16 / 10;
    margin-bottom: 11px;
  }
  .catalog-product-card p,
  .catalog-page[data-view="list"] .catalog-product-card p {
    margin: 0px 0 0px;
    -webkit-line-clamp: 2;
  }
  .catalog-product-card__bottom,
  .catalog-page[data-view="list"] .catalog-product-card__bottom {
    gap: 7px;
    margin-top: 6px;
  }
  .catalog-product-card__bottom strong,
  .catalog-page[data-view="list"] .catalog-product-card__bottom strong {
    font-size: 17px !important;
  }
  .catalog-product-card__favorite,
  .catalog-page[data-view="list"] .catalog-product-card__favorite {
    top: 9px;
    right: 12px;
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 720px) {
  .catalog-mobile-actions__sort {
    position: relative;
    display: block;
    height: 43px;
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .catalog-mobile-actions__sort .ui-select__trigger {
    height: 43px;
    padding: 0 13px;
    border: 1px solid rgba(67, 52, 35, 0.11);
    border-radius: 9px;
    background: rgba(255, 253, 249, 0.76);
    font-size: 11px;
    text-align: left;
  }
  .catalog-mobile-actions__sort .ui-select__trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .catalog-mobile-actions__sort .ui-select__trigger svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
  }
  .catalog-mobile-actions__sort .ui-select__menu {
    top: calc(100% + 7px);
    z-index: 1000;
    min-width: 100%;
  }
  .catalog-mobile-actions__sort .ui-select__menu button {
    display: block;
    width: 100%;
    height: auto;
    min-height: 38px;
    padding: 10px 32px 10px 11px;
    justify-content: flex-start;
    border: 0;
    background: transparent;
    font-size: 11px;
    text-align: left;
  }
  .catalog-filters {
    height: calc(100dvh - 104px);
    max-height: calc(100dvh - 104px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  body.admin-bar .catalog-filters {
    height: calc(100dvh - 150px);
    max-height: calc(100dvh - 150px);
  }
  /* Safari zooms a focused input whose font is below 16px.  The shared
     controls stylesheet sets 12px by default, so set the mobile value here
     after the sheet layout rules.  The margins also keep the focused field
     out from under the sticky sheet heading. */
  .catalog-filters .ui-range-values input {
    font: 700 16px/1 var(--font-sans);
    -webkit-text-size-adjust: 100%;
    scroll-margin: 96px 24px;
  }
}

/* In list view the product action belongs to the content column, while the
   rental term and details link form a calm, centred aside. */
@media (min-width: 721px) {
  .catalog-page[data-view="list"] .catalog-product-card {
    --list-media-width: 158px;
    --list-column-gap: 22px;
    position: relative;
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr) 204px;
    grid-template-rows: auto minmax(38px, 1fr) 40px;
    align-items: stretch;
    column-gap: 22px;
    min-height: 160px;
    padding: 10px 14px 10px 10px;
  }
  .catalog-page[data-view="list"]
    .catalog-product-card:not(.catalog-product-card--skeleton)::after {
    position: absolute;
    top: 10px;
    right: 218px;
    bottom: 10px;
    width: 1px;
    background: rgba(67, 52, 35, 0.1);
    content: "";
  }
  .catalog-page[data-view="list"] .catalog-product-card__media {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 158px;
    height: 140px;
  }
  .catalog-page[data-view="list"] .catalog-product-card h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 5px 0 0;
    font-size: 17px;
  }
  .catalog-page[data-view="list"] .catalog-product-card p {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    max-width: 760px;
    max-height: 2.84em;
    margin: 6px 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.42;
    -webkit-line-clamp: 2;
  }
  .catalog-page[data-view="list"] .catalog-product-card__availability {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    justify-self: end;
    margin: 0;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom {
    grid-column: 3;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    margin: 0;
    padding: 0 0 0 14px;
    border: 0;
  }
  .catalog-page[data-view="list"] .catalog-product-card__actions {
    display: contents;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom strong {
    padding-left: 0;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .catalog-page[data-view="list"]
    .catalog-product-card__bottom
    [data-add-cart] {
    position: absolute;
    bottom: 10px;
    left: calc(10px + var(--list-media-width) + var(--list-column-gap));
    width: min(220px, 100%);
    height: 40px;
  }
  .catalog-page[data-view="list"]
    .catalog-product-card__bottom
    [data-product-open] {
    width: 160px;
    height: 40px;
    padding: 0 16px;
  }
  .catalog-page[data-view="list"]
    .catalog-product-card__bottom
    [data-product-open]
    svg {
    display: none;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom button span {
    display: inline;
  }

  .catalog-page[data-view="list"] .catalog-product-card--skeleton {
    min-height: 160px;
  }
  .catalog-page[data-view="list"] .catalog-product-card--skeleton::before {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 158px;
    height: 140px;
    margin: 0;
  }
  .catalog-page[data-view="list"] .catalog-product-card--skeleton::after {
    position: absolute;
    top: 25px;
    right: 28px;
    bottom: 20px;
    left: 190px;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background:
      linear-gradient(#eae5dc, #eae5dc) left top / 42% 17px no-repeat,
      linear-gradient(#f0ebe3, #f0ebe3) left 43px / 61% 11px no-repeat,
      linear-gradient(#f0ebe3, #f0ebe3) left 62px / 48% 11px no-repeat,
      linear-gradient(#e3eae4, #e3eae4) left bottom / 190px 40px no-repeat,
      linear-gradient(#eae5dc, #eae5dc) right 5px / 160px 17px no-repeat,
      linear-gradient(#e3eae4, #e3eae4) right bottom / 160px 40px no-repeat;
    content: "";
  }
}

@media (min-width: 721px) and (max-width: 1000px) {
  .catalog-page[data-view="list"] .catalog-product-card {
    --list-media-width: 138px;
    --list-column-gap: 16px;
    grid-template-columns: 138px minmax(0, 1fr) 170px;
    column-gap: 16px;
  }
  .catalog-page[data-view="list"]
    .catalog-product-card:not(.catalog-product-card--skeleton)::after {
    right: 184px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__media,
  .catalog-page[data-view="list"] .catalog-product-card--skeleton::before {
    width: 138px;
  }
  .catalog-page[data-view="list"]
    .catalog-product-card__bottom
    [data-product-open] {
    width: 138px;
  }
  .catalog-page[data-view="list"] .catalog-product-card--skeleton::after {
    left: 164px;
  }
}

/* A saved desktop list preference must not bring the compressed horizontal
   layout and tiny type onto phones. Mobile always uses the readable card. */
@media (max-width: 720px) {
  .catalog-page[data-view="list"] .catalog-product-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 14px;
    border: 1px solid rgba(20, 83, 63, 0.13);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(35, 55, 46, 0.08);
  }
  .catalog-page[data-view="list"] .catalog-product-card__media {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0 0 14px;
    border-radius: 12px;
  }
  .catalog-page[data-view="list"] .catalog-product-card h3 {
    max-width: calc(100% - 34px);
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
  }
  .catalog-page[data-view="list"] .catalog-product-card p {
    max-height: none;
    margin: 7px 0 10px;
    color: #596660;
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 3;
  }
  .catalog-page[data-view="list"] .catalog-product-card__availability {
    align-self: flex-start;
    margin: -2px 0 7px;
    padding: 4px 7px;
    font-size: 8px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__favorite {
    top: 21px;
    right: 21px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
    padding: 0;
    border: 0;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom strong {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    background: #edf5ef;
    color: var(--color-brand);
    font-size: 15px !important;
    line-height: 1.35;
    text-align: left;
  }
  .catalog-page[data-view="list"] .catalog-product-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px !important;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom button {
    position: static;
    width: 100% !important;
    height: 44px !important;
    padding: 0 12px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__bottom button span {
    display: inline;
  }
}

/* The list skeleton follows the same three-column layout as a loaded card. */
@media (min-width: 721px) {
  .catalog-page[data-view="list"] .catalog-product-card--skeleton::before,
  .catalog-page[data-view="list"] .catalog-product-card--skeleton::after {
    display: none;
    content: none;
  }
  .catalog-page[data-view="list"] .catalog-product-card--skeleton {
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr) 214px;
    grid-template-rows: auto 1fr auto;
    column-gap: 22px;
    min-height: 160px;
    padding: 10px 14px 10px 10px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__skeleton-media {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 158px;
    height: 140px;
    margin: 0;
  }
  .catalog-page[data-view="list"] .catalog-product-card__skeleton-title,
  .catalog-page[data-view="list"] .catalog-product-card__skeleton-copy {
    grid-column: 2;
  }
  .catalog-page[data-view="list"] .catalog-product-card__skeleton-title {
    margin-top: 10px;
  }
  .catalog-page[data-view="list"] .catalog-product-card__skeleton-copy {
    align-self: start;
    min-height: 0;
  }
  .catalog-page[data-view="list"] .catalog-product-card__skeleton-bottom {
    grid-column: 3;
    grid-row: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    min-height: 0;
    margin: 0;
    padding-left: 20px;
    border-left: 1px solid rgba(67, 52, 35, 0.1);
  }
  .catalog-page[data-view="list"] .catalog-product-card__skeleton-bottom > span {
    width: 72%;
    align-self: center;
  }
  .catalog-page[data-view="list"] .catalog-product-card__skeleton-bottom > div {
    width: 100%;
  }
  .catalog-page[data-view="list"] .catalog-product-card__skeleton-bottom i {
    flex: 1;
  }
}