/* Presentation belongs to the theme; mcFilter owns state and requests. */
.mc-catalog-page { padding-block: 40px var(--mc-section-space); }
.mc-catalog-page .mc-breadcrumbs { margin-block-end: 24px; }
.mc-catalog-page .mc-page-intro { margin-block-end: 40px; }
.mc-catalog-page .mc-page-intro__title { max-width: 24ch; }
.mc-catalog-page .mc-page-intro__text:empty { display: none; }
.mc-catalog-page .mc-page-intro__text { max-width: 64ch; margin-block-start: 16px; }
.mc-catalog {
  --mc-filter-border: var(--mc-color-border);
  --mc-filter-text: var(--mc-color-ink);
  --mc-filter-muted: var(--mc-color-muted);
  --mc-filter-accent: var(--mc-color-blue);
  display: grid;
  grid-template-columns: minmax(200px, 248px) minmax(0, 1fr);
  align-items: start;
  gap: 32px;
}
.mc-catalog__mobile-controls { display: none; }
.mc-catalog__filters {
  position: static;
  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: var(--mc-radius-card);
  background: var(--mc-color-surface);
  color: var(--mc-color-ink);
}
.mc-catalog__filters:not([open]) { display: none; }
.mc-catalog__filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 12px; }
.mc-catalog__filter-heading h2 { font-size: 22px; letter-spacing: -0.025em; }
.mc-catalog__filter-close { font-size: 28px; line-height: 1; }
.mc-catalog__filter-close[hidden] { display: none; }
.mc-catalog__results { min-width: 0; }
.mc-catalog__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 24px; }
.mc-catalog__count { color: var(--mc-color-muted); font-size: 14px; }
.mc-catalog__count strong { color: var(--mc-color-ink); font-weight: 600; }
.mc-catalog__controls:empty { display: none; }
.mc-catalog__controls .mc-filter-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.mc-catalog__controls .mc-filter-field { gap: 5px; }
.mc-catalog__controls .mc-filter-field__label { color: var(--mc-color-muted); font-size: 12px; font-weight: 500; }
.mc-catalog .mc-filter-control { min-height: 44px; border-radius: var(--mc-radius-control); font-size: 14px; }
.mc-catalog__controls .mc-filter-control { width: auto; max-width: 100%; padding-inline-end: 24px; }
.mc-catalog__controls select.mc-filter-control {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  padding: 10px 44px 10px 14px;
  border: 1px solid var(--mc-color-border);
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626a74' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  color: var(--mc-color-ink);
  line-height: 1.4;
  text-overflow: ellipsis;
  cursor: pointer;
}
.mc-catalog__controls select.mc-filter-control:hover { border-color: #aeb6c1; }
.mc-catalog__controls select.mc-filter-control:focus-visible { border-color: var(--mc-color-blue); outline: 2px solid var(--mc-color-blue); outline-offset: 2px; }
.mc-catalog .mc-filter-facet { padding-block: 20px; }
.mc-catalog .mc-filter-facet__title { margin-block-end: 10px; font-size: 15px; }
.mc-catalog .mc-filter-choice { min-height: 44px; font-size: 14px; }
.mc-catalog .mc-filter-choice input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.mc-catalog .mc-filter-choice__name { min-width: 0; overflow-wrap: anywhere; }
.mc-catalog .mc-filter-form { gap: 0; }
.mc-filter-section { min-width: 0; border-block-start: 1px solid var(--mc-color-border); }
.mc-filter-section__summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; list-style: none; cursor: pointer; }
.mc-filter-section__summary::-webkit-details-marker { display: none; }
.mc-filter-section__summary::marker { content: ''; }
.mc-filter-section__summary > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.mc-filter-section__summary:hover { color: var(--mc-color-blue); }
.mc-filter-section__icon { display: grid; flex: 0 0 16px; width: 16px; height: 16px; place-items: center; color: var(--mc-color-muted); transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.mc-filter-section__icon::before { content: ''; width: 8px; height: 8px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.mc-filter-section[data-expanded="true"] > summary .mc-filter-section__icon { transform: rotate(180deg); }
.mc-filter-section__collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms cubic-bezier(.22, 1, .36, 1); }
.mc-filter-section[data-expanded="true"] > .mc-filter-section__collapse { grid-template-rows: 1fr; }
.mc-filter-section__clip { min-height: 0; overflow: hidden; }
.mc-catalog .mc-filter-section .mc-filter-section__body { min-width: 0; margin: 0; padding: 0 0 16px; border: 0; }
.mc-catalog .mc-filter-section legend.mc-visually-hidden { margin: 0; }
.mc-catalog .mc-filter-section .mc-filter-choices { gap: 0; }
.mc-catalog .mc-filter-section .mc-filter-choice { gap: 8px; min-height: 36px; padding-block: 5px; line-height: 1.5; }
.mc-catalog .mc-filter-section .mc-filter-choice__count { margin-inline-start: auto; font-size: 12px; }
.mc-catalog .mc-filter-section__scroll { max-height: 224px; padding-inline: 4px; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; }
.mc-catalog .mc-filter-section__scroll:focus-visible { outline-offset: 0; }
.mc-catalog .mc-filter-category-choice { padding-inline: 8px; border-radius: 6px; cursor: pointer; }
.mc-filter-category-choice:hover, .mc-filter-category-choice:focus-within { background: #e9edff; color: #2447cf; }
.mc-filter-category-choice:has(input:checked) { background: #e9edff; color: #2447cf; font-weight: 600; }
.mc-filter-category-choice:has(input:disabled) { opacity: .55; cursor: default; }
.mc-catalog .mc-filter-form__actions { margin-block-start: 4px; border-block-start: 1px solid var(--mc-color-border); }
.mc-catalog__selected:empty { display: none; }
.mc-catalog .mc-filter-selected { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.mc-catalog .mc-filter-selected a { display: inline-flex; min-height: 40px; align-items: center; padding: 7px 10px; border: 1px solid var(--mc-color-border); border-radius: 8px; background: #fff; font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.mc-catalog .mc-filter-selected a:hover { border-color: var(--mc-color-blue); background: #f0f3ff; }
.mc-catalog .mc-filter-selected a.mc-filter-selected__reset { border-color: #ebc3c3; background: #fff1f1; color: var(--mc-color-error); font-weight: 600; }
.mc-catalog .mc-filter-selected a.mc-filter-selected__reset:hover { border-color: var(--mc-color-error); background: var(--mc-color-error); color: #fff; }
.mc-catalog[data-selected-ready] .mc-filter-form__actions > a { display: none; }
.mc-catalog .mc-filter-form__actions { gap: 12px; padding-block-start: 16px; }
.mc-catalog .mc-filter-form__actions button { min-height: 48px; padding: 12px 16px; border: 0; border-radius: var(--mc-radius-control); background: var(--mc-color-blue); color: #fff; font-weight: 600; cursor: pointer; }
.mc-catalog .mc-filter-form__actions button:hover { background: var(--mc-color-blue-hover); }
.mc-catalog .mc-filter-form__actions > a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; color: var(--mc-color-muted); font-size: 14px; }
.mc-catalog .mc-filter-price, .mc-catalog .mc-filter-price > * { min-width: 0; }
/* The native price inputs remain the form controls, with one shared visual rail. */
.mc-catalog .mc-price-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.mc-price-range__track { position: relative; grid-column: 1 / -1; height: 44px; margin-inline: 2px; }
.mc-price-range__track::before { content: ''; position: absolute; inset: 20px 14px; height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--mc-color-border) 0 var(--mc-price-start), var(--mc-color-blue) var(--mc-price-start) var(--mc-price-end), var(--mc-color-border) var(--mc-price-end) 100%); }
.mc-price-range [data-price-handle] { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.mc-price-range [data-price-handle="max"] { z-index: 2; }
.mc-catalog .mc-price-range input[type="range"] { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; pointer-events: none; }
.mc-price-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.mc-price-range input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.mc-price-range input[type="range"]::-moz-range-progress { background: transparent; }
.mc-price-range input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 28px; height: 28px; margin-top: -12px; border: 6px solid transparent; border-radius: 50%; background: var(--mc-color-blue); background-clip: padding-box; pointer-events: auto; cursor: ew-resize; }
.mc-price-range input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; border: 6px solid transparent; border-radius: 50%; background: var(--mc-color-blue); background-clip: padding-box; pointer-events: auto; cursor: ew-resize; }
.mc-price-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--mc-color-ink); outline-offset: -3px; }
.mc-price-range input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--mc-color-ink); outline-offset: -3px; }
.mc-catalog .mc-price-range [data-price-number] { gap: 4px; }
.mc-price-range [data-price-number] .mc-filter-field__label { color: var(--mc-color-muted); font-size: 12px; font-weight: 500; }
.mc-catalog .mc-price-range .mc-filter-control { padding-inline: 8px; background: #fff; }
@media (forced-colors: active) {
  .mc-catalog__controls select.mc-filter-control { appearance: auto; -webkit-appearance: auto; padding-inline-end: 12px; background-image: none; }
  .mc-price-range__track::before { background: CanvasText; }
  .mc-price-range input[type="range"]::-webkit-slider-thumb { background: Highlight; background-clip: padding-box; forced-color-adjust: none; }
  .mc-price-range input[type="range"]::-moz-range-thumb { background: Highlight; background-clip: padding-box; forced-color-adjust: none; }
}
.mc-catalog .mc-filter-error { margin-block-start: 16px; }
.mc-catalog__items > [data-mcfilter-items] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mc-catalog-card { position: relative; display: flex; min-width: 0; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--mc-color-border); border-radius: var(--mc-radius-card); background: #fff; container: mc-product-card / inline-size; }
.mc-catalog-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 8px; padding: 10px 12px; }
.mc-catalog-card__info { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.mc-catalog-card__media { display: grid; min-width: 0; aspect-ratio: 4 / 5; overflow: hidden; place-items: center; background: #fff; text-decoration: none; touch-action: pan-y pinch-zoom; }
.mc-catalog-card__image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.mc-catalog-card__placeholder { padding: 8px; color: var(--mc-color-muted); font-size: 12px; text-align: center; }
.mc-catalog-card__badges:empty { display: none; }
.mc-catalog-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.mc-catalog-card__badge { padding: 3px 6px; border: 1px solid var(--mc-color-border); border-radius: 6px; background: #fff; font-size: 11px; font-weight: 600; }
.mc-catalog-card__badge--sale { border-color: var(--mc-color-blue); background: var(--mc-color-blue); color: #fff; }
.mc-catalog-card__gallery { min-width: 0; touch-action: pan-y pinch-zoom; }
.mc-catalog-card [hidden] { display: none !important; }
.mc-catalog-card__gallery[data-card-draggable] .mc-catalog-card__media { user-select: none; -webkit-user-select: none; }
.mc-catalog-card__photo-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding-block: 2px; }
.mc-catalog-card__photo-dot { display: grid; flex: 0 0 28px; width: 28px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.mc-catalog-card__photo-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #c2c8d0; }
.mc-catalog-card__photo-dot[aria-current="true"]::before { background: var(--mc-color-blue); }
.mc-catalog-card__photo-dot:hover::before { background: var(--mc-color-ink); }
.mc-catalog-card__photo-dot[aria-current="true"]:hover::before { background: var(--mc-color-blue); }
.mc-catalog-card__photo-dot:focus-visible { outline: 2px solid var(--mc-color-blue); outline-offset: -2px; }
.mc-catalog-card__body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 10px; padding: 10px 12px 12px; }
.mc-catalog-card__article { color: var(--mc-color-muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.mc-catalog-card__title { font-size: 16px; line-height: 1.35; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.mc-catalog-card__title a { text-decoration: none; }
.mc-catalog-card__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-block-start: 2px; }
.mc-catalog-card__checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, 1fr); align-items: center; gap: 8px; }
.mc-catalog-card__checkout .mc-catalog-card__prices { min-width: 0; margin: 0; }
.mc-catalog-card__price { font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.mc-catalog-card__old-price { color: var(--mc-color-muted); font-size: 13px; }
.mc-catalog-card__action { width: 100%; min-height: 44px; padding: 10px 8px; font-size: 14px; }
/* Keep the purchase groups beside each other when both remain readable. */
.mc-catalog-card .mc-card-buy { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 10px 12px; }
.mc-catalog-card .mc-options legend { margin: 0 0 5px; padding: 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.mc-catalog-card .mc-sizes, .mc-catalog-card .mc-swatches { gap: 4px; }
.mc-catalog-card .mc-sizes .mc-size-choice, .mc-catalog-card .mc-sizes .mc-size-choice span { min-width: 28px; }
.mc-catalog-card .mc-card-buy > .mc-catalog-card__checkout, .mc-catalog-card .mc-card-buy > .mc-product__field,
.mc-catalog-card .mc-options:first-of-type:nth-last-child(2) { grid-column: 1 / -1; }
/* Card width also accounts for related products and the tablet filter sidebar. */
@container mc-product-card (max-width: 300px) {
  .mc-catalog-card .mc-card-buy { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@container mc-product-card (max-width: 200px) {
  .mc-catalog-card__meta { padding: 8px; }
  .mc-catalog-card__body { padding: 8px; }
  .mc-catalog-card__title { font-size: 14px; }
  .mc-catalog-card__article { font-size: 10px; }
  .mc-catalog-card__old-price { font-size: 12px; }
  .mc-catalog-card__checkout { grid-template-columns: minmax(0, 1fr) 64px; gap: 4px; }
  .mc-catalog-card__checkout .mc-catalog-card__action { min-width: 0; padding-inline: 4px; font-size: 12px; }
  .mc-catalog-card__checkout .mc-catalog-card__price { font-size: 16px; }
}
.mc-catalog__empty { grid-column: 1 / -1; padding: clamp(24px, 4vw, 48px); border-radius: var(--mc-radius-card); background: var(--mc-color-surface); }
.mc-catalog__empty h3 { margin-block-end: 12px; font-size: 24px; }
.mc-catalog__empty p { max-width: 48ch; color: var(--mc-color-muted); }
.mc-catalog .mc-filter-pagination { gap: 8px; margin-block: 32px 0; }
.mc-catalog .mc-filter-pagination a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--mc-color-border); border-radius: 8px; text-decoration: none; }
.mc-catalog .mc-filter-pagination [aria-current="page"] { border-color: var(--mc-color-blue); background: var(--mc-color-blue); color: #fff; }
.mc-catalog [aria-busy="true"] .mc-catalog__items { opacity: 0.55; }
.mc-body--filters-open { overflow: hidden; overscroll-behavior: none; }
@media (max-width: 1023px) {
  .mc-catalog { grid-template-columns: minmax(180px, 208px) minmax(0, 1fr); gap: 24px; }
  .mc-catalog__filters { padding: 18px; }
  .mc-catalog__items > [data-mcfilter-items] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 767px) {
  .mc-catalog-page { padding-block-start: 24px; }
  .mc-catalog-page .mc-page-intro { margin-block-end: 24px; }
  .mc-catalog { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mc-catalog__items > [data-mcfilter-items] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mc-catalog__toolbar { align-items: start; gap: 16px; margin-block-end: 20px; }
  .mc-catalog__controls { width: 100%; }
  .mc-catalog__controls .mc-filter-controls { flex-wrap: nowrap; }
  .mc-catalog__controls .mc-filter-field:first-child { flex: 1; min-width: 0; }
  .mc-catalog__controls .mc-filter-control { width: 100%; }
  .mc-catalog-card__badge { padding: 3px 6px; font-size: 10px; }
  .mc-catalog[data-panel-ready] .mc-catalog__mobile-controls { display: flex; }
  .mc-catalog[data-panel-ready] .mc-catalog__mobile-controls button { width: 100%; }
  .mc-catalog[data-panel-ready] .mc-catalog__filters[open] {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100%);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
    scrollbar-gutter: stable;
  }
  .mc-catalog__filters::backdrop { background: rgb(24 26 29 / 44%); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-catalog-card__image { transition: none; }
  .mc-filter-section__icon, .mc-filter-section__collapse { transition: none; }
}