/* ===========================================================================
   Catalogue toolbar and filter drawer. Loaded on archives only.
   ======================================================================== */

.mf-toolbar {
  position: sticky;
  top: var(--header-h, 0px);
  z-index: 20;
  margin: 0 calc(-1 * var(--gutter)) 0.9rem;
  padding: 0.5rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: rgba(244, 243, 240, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.admin-bar .mf-toolbar {
  top: calc(var(--header-h, 0px) + 32px);
}

@media (max-width: 782px) {
  .admin-bar .mf-toolbar {
    top: var(--header-h, 0px);
  }
}

.mf-toolbar__row {
  display: flex;
  align-items: center;
  gap: 0.8rem 1.2rem;
}

.mf-toolbar__count {
  margin-right: auto;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.mf-toolbar__count .woocommerce-result-count {
  float: none;
  margin: 0;
  padding: 0;
}

.mf-toolbar__sort .woocommerce-ordering {
  float: none;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   The sort, as a row rather than a select.

   The orders a catalogue offers describe the shop — newest, cheapest, what
   sells — and a select hides all but one of them behind a click. Each is a
   real link, so the row works with no script, is crawlable, and the page it
   points at is the page it produces.
   ------------------------------------------------------------------------ */

.mf-sort {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.mf-sort__label {
  flex: none;
  color: var(--text-muted);
  font-size: var(--type-meta);
}

.mf-sort ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.mf-sort ul::-webkit-scrollbar {
  display: none;
}

.mf-sort li {
  flex: none;
  margin: 0;
}

.mf-sort__option {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--text);
  font-size: var(--type-meta);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.mf-sort__option:hover {
  border-color: var(--ink);
}

/* The one in force is filled, not merely outlined: on a row of five outlines
   a heavier border is not a state anybody reads at a glance. */
.mf-sort__option[aria-current='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}

.mf-toolbar__filters {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--step--1);
  font-weight: 700;
}

.mf-toolbar__filters:hover {
  background: var(--graphite);
  color: var(--on-dark);
}

.mf-toolbar__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  box-sizing: border-box;
  border-radius: var(--radius-control);
  background: var(--on-dark);
  color: var(--ink);
  font-size: 0.75rem;
}

.mf-toolbar__active {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.mf-toolbar__active li {
  margin: 0;
}

.mf-toolbar__active a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0 0.8rem 0 1rem;
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}

.mf-toolbar__active a:hover {
  background: var(--ink);
  color: var(--on-dark);
}

.mf-toolbar__active .mf-icon {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 600px) {
  /* With a Filters button there is no room for the count as well. */
  .mf-toolbar__filters ~ .mf-toolbar__count {
    display: none;
  }

  /* Filters, sort and the view switcher on one line. Wrapped, they cost the
     phone two rows — 118px of the screen before a single product. The sort
     select gives up its width first, since its own text is the shortest. */
  .mf-toolbar__row {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .mf-toolbar__sort {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
  }

  .mf-toolbar__sort .woocommerce-ordering,
  .mf-toolbar__sort select {
    width: 100%;
  }

  .mf-toolbar__filters,
  .mf-toolbar__sort select,
  .mf-toolbar__view .mf-tool {
    min-height: 2.5rem;
  }

  /* The select gives up its width first and is the one control whose own
     text can clip, so it also drops a step: "Рекомендуется" has to fit. */
  .mf-toolbar__sort select {
    padding-inline: 0.6rem 1.7rem;
    font-size: var(--type-meta);
  }

  /* "Sort:" is what the row visibly is; the words in it say the rest. The
     row then scrolls sideways inside the toolbar rather than wrapping it
     onto a second line. */
  .mf-sort__label {
    display: none;
  }

  .mf-sort ul {
    -webkit-overflow-scrolling: touch;
  }

  .mf-sort__option {
    min-height: 2.5rem;
    padding-inline: 0.7rem;
  }

  .mf-toolbar__filters {
    padding-inline: 0.7rem;
    font-size: var(--type-meta);
  }

  .mf-toolbar__tools {
    flex: none;
  }
}

/* The drawer: from the right on wide screens, a bottom sheet on phones. */
.mf-sheet {
  width: min(26rem, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--paper-bright);
  color: var(--text);
  box-shadow: -20px 0 60px -20px rgba(18, 20, 22, 0.35);
}

.mf-sheet[open] {
  animation: mf-sheet-side 0.25s var(--ease);
}

.mf-sheet::backdrop {
  background: rgba(18, 20, 22, 0.45);
}

@keyframes mf-sheet-side {
  from { transform: translateX(100%); }
  to { transform: none; }
}

@keyframes mf-sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (max-width: 600px) {
  .mf-sheet {
    width: 100vw;
    height: auto;
    max-height: 85dvh;
    margin: auto 0 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .mf-sheet[open] {
    animation-name: mf-sheet-up;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-sheet[open] {
    animation: none;
  }
}

.mf-filters {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
}

.mf-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.8rem 0.6rem 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.mf-filters__title {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
}

.mf-filters__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.4rem 1rem;
  overscroll-behavior: contain;
}

.mf-filters__group {
  margin: 0;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
}

.mf-filters__group legend {
  padding: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.mf-filters__option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.mf-filters__option input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--ink);
}

.mf-filters__name {
  flex: 1;
}

.mf-filters__count {
  font-size: var(--step--1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mf-filters__foot {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem calc(0.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}

.mf-filters__foot .button {
  margin: 0;
  text-align: center;
}

.mf-filters__foot .button.mf-button--ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--border-control);
}

.mf-filters__foot .button.mf-button--ghost:hover {
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: none;
}

/* Storefront styles every fieldset and legend (fill, padding, offset). */
.mf-filters fieldset.mf-filters__group {
  margin: 0;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
}

.mf-filters fieldset.mf-filters__group legend {
  margin: 0;
  padding: 0 0 0.5rem;
  border: 0;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

/* A value with no results left: visible, so the shopper sees it exists, but
   not selectable. Muted text still passes 4.5:1. */
.mf-filters__option.is-empty {
  color: var(--text-muted);
  cursor: not-allowed;
}

.mf-filters__option.is-empty .mf-filters__name {
  text-decoration: line-through;
}

/* The sheet is a column: header and buttons fixed, options scroll between. */
.mf-sheet[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mf-sheet .mf-filters {
  flex: 1;
  min-height: 0;
  height: auto;
}

.mf-sheet .mf-filters__body {
  min-height: 0;
}

.mf-filters fieldset.mf-filters__group legend {
  float: left;
  width: 100%;
  padding-bottom: 0.3rem;
}

.mf-filters fieldset.mf-filters__group legend + * {
  clear: both;
}

/* Colour facet: round swatches in a grid, name under each, as on Answear.
   Every swatch has a 3:1 ring, so white and beige hold their edge on paper. */
.mf-filters .has-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem 0.6rem;
}

.mf-filters .has-swatches legend {
  grid-column: 1 / -1;
}

.has-swatches .mf-filters__option {
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.35rem 0;
  text-align: center;
}

.has-swatches .mf-filters__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mf-filters__swatch {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1.5px var(--border-control);
}

.has-swatches input:checked ~ .mf-filters__swatch {
  box-shadow: inset 0 0 0 1.5px var(--border-control), 0 0 0 2px var(--paper-bright), 0 0 0 4px var(--ink);
}

.has-swatches input:focus-visible ~ .mf-filters__swatch {
  outline: 2px solid var(--focus);
  outline-offset: 5px;
}

.has-swatches .mf-filters__name {
  flex: none;
  font-size: var(--step--1);
  line-height: 1.2;
}

.has-swatches .mf-filters__count {
  font-size: 0.75rem;
}

.has-swatches .mf-filters__option.is-empty .mf-filters__swatch {
  opacity: 0.35;
}

/* A modal dialog is pinned top and bottom by the browser, so with an auto
   height it stretches to its max. The bottom sheet lets go of the top and
   hugs its content instead. */
@media (max-width: 600px) {
  .mf-sheet {
    top: auto;
    bottom: 0;
  }
}

/* ===========================================================================
   Archive header: the title, then the category chips.
   ======================================================================== */

body.woocommerce .site-main .woocommerce-products-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
}

.woocommerce-products-header > * {
  flex: 1 1 100%;
  /* A flex item defaults to min-width:auto, so a row that scrolls inside it
     still pushes the item — and the page — as wide as its content. */
  min-width: 0;
}

.woocommerce-products-header > .mf-chips {
  flex: 1 1 auto;
}

.woocommerce-products-header > .mf-chips ul {
  margin: 0;
}

/* ===========================================================================
   Facet column. From 1100px the filters stand left of the grid; below that
   they are the drawer. Nothing in the column is drawn but the groups'
   hairlines, the checkboxes and the swatches: the patterns to its right are
   what the page is for.
   ======================================================================== */

.mf-catalogue {
  margin-top: 0.9rem;
}

.mf-facets {
  display: none;
}

@media (min-width: 1100px) {
  .mf-catalogue.has-facets {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: clamp(2rem, 3vw, 3.5rem);
    align-items: start;
  }

  .mf-facets {
    display: block;
    position: sticky;
    top: calc(var(--header-h, 0px) + 1.25rem);
    max-height: calc(100vh - var(--header-h, 0px) - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Room for focus rings, which the scroll box would otherwise clip. */
    margin: -4px;
    padding: 4px 0.75rem 4px 4px;
  }

  .admin-bar .mf-facets {
    top: calc(var(--header-h, 0px) + 32px + 1.25rem);
    max-height: calc(100vh - var(--header-h, 0px) - 32px - 2.5rem);
  }

  /* The column is the filters; the button would say it twice. */
  .has-facets .mf-toolbar__filters {
    display: none;
  }

  /* Beside a column the toolbar is a line over the grid, not a band. */
  .mf-catalogue.has-facets .mf-toolbar {
    position: static;
    margin: 0 0 1.4rem;
    padding: 0 0 0.9rem;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

}

/* ---------------------------------------------------------------------------
   How many a row

   The count is not a breakpoint. A fixed `repeat(3, …)` gave a 322px card at
   1440 and the same three columns when the filter column appeared, so the
   grid ignored the space it actually had. `auto-fill` counts them from the
   width the grid really got — page width, gutters, filter column and gaps all
   already subtracted — and the floor keeps a card from shrinking past the
   point where the artwork stops reading.

   The density control then moves the floor rather than fixing a count, so
   "roomier" and "tighter" still follow the available width instead of
   overriding it into 166px cards on a small laptop.
   ------------------------------------------------------------------------ */

@media (min-width: 601px) {
  ul.products {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--mf-card-min, 13rem)), 1fr));
  }

  .mf-catalogue[data-density='3'] ul.products {
    --mf-card-min: 17.5rem;
  }

  .mf-catalogue[data-density='4'] ul.products {
    --mf-card-min: 12.5rem;
  }
}

/* As tall as the toolbar row beside it, so "Filters" and the count share a line. */
.mf-facets__title {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0 0 0.4rem;
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mf-facets__title:focus {
  outline: none;
}

.mf-facet {
  border-top: 1px solid var(--rule);
}

/*
 * A facet opens by sliding rather than jumping. `interpolate-size` is what
 * makes `height: auto` animatable at all; where the browser does not have it —
 * or the reader asked for less motion — the group simply appears, which is
 * what it did before. Nothing here changes what is on the page, only how fast
 * it arrives, so there is no fallback to write.
 */
@media (prefers-reduced-motion: no-preference) {
  .mf-facet {
    interpolate-size: allow-keywords;
  }

  .mf-facet::details-content {
    overflow: hidden;
    block-size: 0;
    transition-property: block-size, content-visibility;
    transition-duration: 0.22s;
    transition-timing-function: var(--ease);
    transition-behavior: allow-discrete;
  }

  .mf-facet[open]::details-content {
    block-size: auto;
  }
}

.mf-facet__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
}

.mf-facet__head::-webkit-details-marker {
  display: none;
}

.mf-facet__label {
  flex: 1;
}

.mf-facet__n {
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mf-facet__head .mf-icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
}

.mf-facet__head .mf-icon--minus,
.mf-facet[open] > .mf-facet__head .mf-icon--plus {
  display: none;
}

.mf-facet[open] > .mf-facet__head .mf-icon--minus {
  display: block;
}

.mf-facet__head:hover .mf-icon {
  color: var(--ink);
}

.mf-facet__list,
.mf-facet__swatches {
  margin: 0;
  padding: 0 0 0.9rem;
  list-style: none;
}

.mf-facet__list li,
.mf-facet__swatches li {
  margin: 0;
}

.mf-facet__option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.25rem;
  font-size: var(--step--1);
  line-height: 1.25;
  text-decoration: none;
  color: var(--text);
}

.mf-facet__option:hover {
  color: var(--ink);
  text-decoration: none;
}

.mf-facet__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-inner);
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mf-facet__box .mf-icon {
  width: 0.8rem;
  height: 0.8rem;
  stroke-width: 2.6;
  color: var(--on-dark);
  opacity: 0;
}

.mf-facet__option:hover .mf-facet__box {
  border-color: var(--ink);
}

.mf-facet__option.is-chosen .mf-facet__box {
  border-color: var(--ink);
  background: var(--ink);
}

.mf-facet__option.is-chosen .mf-facet__box .mf-icon {
  opacity: 1;
}

.mf-facet__option.is-chosen .mf-facet__name {
  font-weight: 600;
}

.mf-facet__name {
  flex: 1;
  min-width: 0;
}

.mf-facet__count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Swatches: the one place in the column with colour, each a 36px target.
   Every dot keeps a 3:1 ring, so white and beige hold their edge. */
.mf-facet__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, 2.25rem);
  gap: 0.35rem 0.55rem;
}

.mf-facet__swatch {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  text-decoration: none;
}

.mf-facet__dot {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1.5px var(--border-control);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mf-facet__swatch:hover .mf-facet__dot {
  transform: scale(1.08);
}

.mf-facet__swatch.is-chosen .mf-facet__dot {
  box-shadow: inset 0 0 0 1.5px var(--border-control), 0 0 0 2px var(--paper-bright), 0 0 0 3.5px var(--ink);
}

.mf-facet__swatch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .mf-facet__dot,
  .mf-facet__box {
    transition: none;
  }

  .mf-facet__swatch:hover .mf-facet__dot {
    transform: none;
  }
}

/* ===========================================================================
   Toolbar additions: grid size, the chosen values and "Clear all".
   ======================================================================== */

.mf-toolbar__density {
  display: none;
}

@media (min-width: 1100px) {
  .mf-toolbar__density:not([hidden]) {
    display: flex;
    gap: 0.15rem;
  }
}

.mf-toolbar__density .mf-tool {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-muted);
}

.mf-toolbar__density .mf-tool .mf-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.mf-toolbar__density .mf-tool[aria-pressed='true'] {
  color: var(--ink);
  background: var(--paper);
}

.mf-toolbar__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: 0.7rem 0 0;
}

.mf-toolbar__active ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-toolbar__active a.mf-toolbar__clear {
  min-height: 0;
  padding: 0;
  background: none;
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mf-toolbar__active a.mf-toolbar__clear:hover {
  background: none;
  color: var(--ink);
  text-decoration-color: var(--oak);
}

.mf-toolbar .woocommerce-result-count:focus {
  outline: none;
}

/* While a filtered page is on its way. */
.mf-catalogue[aria-busy='true'] ul.products {
  opacity: 0.45;
  transition: opacity 0.2s ease 0.1s;
}

/* ===========================================================================
   Catalogue view: tiles or rows.

   The switcher is a state on [data-mf-catalogue], so the same cards the grid
   drew become rows without a second request. Unlike the density control it
   shows at every width — the row is the format that gains the most on a
   phone, where a tile leaves half the screen to a thumbnail.
   ======================================================================== */

.mf-toolbar__view:not([hidden]) {
  display: flex;
  gap: 0.15rem;
}

.mf-toolbar__view .mf-tool {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-muted);
}

.mf-toolbar__view .mf-tool .mf-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.mf-toolbar__view .mf-tool:hover {
  color: var(--ink);
}

.mf-toolbar__view .mf-tool:active {
  transform: translateY(1px);
}

.mf-toolbar__view .mf-tool[aria-pressed='true'] {
  color: var(--ink);
  background: var(--paper);
}

/* The detail a row has room for. It is in every card; only the list shows it. */
.mf-list,
.mf-list__buy {
  display: none;
}

.mf-catalogue[data-view='list'] ul.products {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
}

/*
 * Carries the frame design.css puts on a card ("width: auto" under a selector
 * built to outrank Storefront's percentages) — a row has to outrank that in
 * turn, or it shrinks to the width of its own text.
 */
body .site-main .mf-catalogue[data-view='list'] ul.products li.product {
  width: 100%;
  /* The typographic measure caps every li at a readable line; a row is a
     layout, not a paragraph, and stops at the column instead. */
  max-width: none;
  margin: 0;
  float: none;
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  /*
   * The photo spans every row. Left to size themselves, the text rows would
   * share the slack under a tall photo and stand apart; the last row takes it
   * all instead, and the lines stay together under the title.
   */
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(1rem, 2.4vw, 2rem);
  align-content: start;
  padding: clamp(0.8rem, 1.6vw, 1.15rem);
  border-radius: var(--radius-card);
  background: var(--bg, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline, rgba(0, 0, 0, 0.08));
}

/*
 * The card's link wraps media, title and price together. In a row those three
 * belong in two different columns, so the link stops being a box and lets its
 * children sit in the row's own grid; it stays one link, and one tab stop.
 */
.mf-catalogue[data-view='list'] li.product > a {
  display: contents;
}

.mf-catalogue[data-view='list'] li.product .mf-card__media {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
}

.mf-catalogue[data-view='list'] li.product .mf-card__eyebrow,
.mf-catalogue[data-view='list'] li.product .woocommerce-loop-product__title,
.mf-catalogue[data-view='list'] li.product .price,
.mf-catalogue[data-view='list'] li.product .mf-list {
  grid-column: 2;
}

/* Quantity and the button: their own column, level with the photo. */
.mf-catalogue[data-view='list'] li.product .mf-list__buy {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
  justify-content: flex-end;
  padding-left: clamp(1rem, 2vw, 2rem);
}

.mf-catalogue[data-view='list'] li.product .woocommerce-loop-product__title {
  font-size: var(--step-1);
}

.mf-catalogue[data-view='list'] li.product .price {
  margin-top: 0.15rem;
  font-size: var(--step-0);
  color: var(--ink);
}

.mf-catalogue[data-view='list'] .mf-list,
.mf-catalogue[data-view='list'] .mf-list__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.mf-list__sku,
.mf-list__specs {
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.mf-list__specs {
  display: grid;
  gap: 0.2rem;
  list-style: none;
}

.mf-list__sku,
.mf-list__specs li {
  display: flex;
  gap: 0.4rem;
}

.mf-list__spec-label {
  flex: none;
  min-width: 5.5rem;
  color: var(--text-muted);
}

.mf-list__specs li > span:last-child,
.mf-list__sku > span:last-child {
  color: var(--ink);
}

.mf-list__stock {
  font-size: 0.8rem;
}

.mf-list__stock .stock {
  margin: 0;
}

.mf-list__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.mf-list__form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.mf-list__form .quantity input.qty {
  width: 4.5rem;
  height: 2.75rem;
  text-align: center;
}

.mf-list__add {
  min-height: 2.75rem;
}

.mf-list__add[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The phone stacks it: photo, then what it is, then how to buy it. */
@media (max-width: 720px) {
  body .site-main .mf-catalogue[data-view='list'] ul.products li.product {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 0.15rem;
  }

  .mf-catalogue[data-view='list'] li.product .mf-card__media {
    grid-row: auto;
    margin-bottom: 0.6rem;
  }

  .mf-catalogue[data-view='list'] li.product .mf-card__eyebrow,
  .mf-catalogue[data-view='list'] li.product .woocommerce-loop-product__title,
  .mf-catalogue[data-view='list'] li.product .price,
  .mf-catalogue[data-view='list'] li.product .mf-list,
  .mf-catalogue[data-view='list'] li.product .mf-list__buy {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    justify-content: flex-start;
    padding-left: 0;
  }

  .mf-list__buy,
  .mf-list__form {
    width: 100%;
  }

  .mf-list__form .mf-list__add {
    flex: 1;
  }
}

/* ---------------------------------------------------------------------------
   Wall-panel brochure section

   Under the panel grid, outside the catalogue frame. It carries what the
   printed catalogue says about the panels — their make-up, the lacquers, the
   sheet, the rooms — and the catalogue itself as a download. Linen band, so
   it reads as a chapter after the grid rather than another row of products.
   ------------------------------------------------------------------------ */

.mf-panels {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--paper);
  border-radius: var(--radius-card);
}

.mf-panels__head {
  max-width: var(--measure);
}

.mf-panels__title {
  font-size: var(--step-2);
  margin: 0 0 0.5rem;
}

.mf-panels__lede {
  color: var(--text-muted);
  margin: 0;
}

.mf-panels__subtitle {
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.mf-panels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* The three layers, drawn rather than photographed: the brochure's own
   diagram has Latvian baked into the artwork and this page has three
   languages. Slabs are decoration; the names beside them carry the meaning. */
.mf-layers {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.mf-layers__item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.mf-layers__slab {
  height: 0.85rem;
  border-radius: 2px;
  transform: skewX(-24deg);
  background: var(--aluminium);
}

.mf-layers__item--1 .mf-layers__slab {
  background: var(--paper-bright);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.mf-layers__item--2 .mf-layers__slab {
  background: var(--oak);
}

.mf-layers__item--3 .mf-layers__slab {
  height: 1.3rem;
  background: var(--graphite);
}

.mf-layers__name {
  font-weight: 600;
}

.mf-layers__note {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.mf-spec {
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.mf-spec__row {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
}

.mf-spec__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mf-spec dt {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.mf-spec dd {
  margin: 0;
}

.mf-merits {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  max-width: var(--measure);
}

.mf-merits li {
  padding-left: 1.5rem;
  position: relative;
}

.mf-merits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.75rem;
  height: 2px;
  background: var(--oak);
}

.mf-panels__download {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 0;
}

.mf-panels__brochure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mf-panels__meta {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.mf-panels__rooms {
  margin-top: clamp(1.75rem, 4vw, 3rem);
}

/* Two, three and six across, rather than auto-fit: six rooms wrap into an
   even grid at every width, never five and a stray. */
.mf-rooms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Each tile keeps its own 4:3; without this a named tile stretches to the
     height of the photographed one beside it, caption and all. */
  align-items: start;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

@media (min-width: 700px) {
  .mf-rooms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1150px) {
  .mf-rooms {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.mf-rooms__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper-bright);
}

/* A room the brochure names but does not photograph: the same tile, with the
   name inside it. An empty frame under a caption reads as a failed image. */
.mf-rooms__media--named {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  text-align: center;
  background: var(--paper-bright);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.mf-rooms__media--named .mf-rooms__label {
  margin-top: 0;
}

.mf-rooms__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.mf-rooms__item:hover .mf-rooms__media img {
  transform: scale(1.03);
}

.mf-rooms__label {
  display: block;
  margin-top: 0.5rem;
  font-weight: 600;
}

.mf-rooms__note {
  margin: 1.25rem 0 0;
  color: var(--text-muted);
  font-size: var(--step--1);
}

@media (prefers-reduced-motion: reduce) {
  .mf-rooms__media img {
    transition: none;
  }

  .mf-rooms__item:hover .mf-rooms__media img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Rooms pop-up

   One dialog with two states: the grid of rooms, and one room opened over it.
   Sized against the viewport rather than the content, so a tall photograph on
   a short phone scrolls inside the frame instead of pushing the close button
   off the screen.
   ------------------------------------------------------------------------ */

.mf-panels__actions {
  margin: 0 0 0.9rem;
}

.mf-panels__designs {
  cursor: pointer;
}

/* The dialog chrome — .mf-modal and its parts — is in enquiry.css, which
   this sheet depends on, because the About page needs a dialog without
   needing the catalogue. */

/* A class that sets `display` outranks the UA rule behind the `hidden`
   attribute, so the grid would stay on screen under the opened room. */
.mf-modal__grid[hidden],
.mf-roomview[hidden] {
  display: none;
}

.mf-modal__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.15rem);
}

@media (min-width: 760px) {
  .mf-modal__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mf-roomcard {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-card);
}

.mf-roomcard__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper);
}

.mf-roomcard__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.mf-roomcard:hover .mf-roomcard__media img,
.mf-roomcard:focus-visible .mf-roomcard__media img {
  transform: scale(1.04);
}

.mf-roomcard__label {
  display: block;
  margin-top: 0.5rem;
  font-weight: 600;
}

/* The opened room. The photograph is capped against the viewport so the
   controls under it stay on screen without scrolling on a phone. */
.mf-roomview__back {
  margin: 0 0 0.9rem;
}

.mf-linkish {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.mf-linkish .mf-icon {
  transform: rotate(180deg);
}

.mf-roomview__figure {
  margin: 0;
}

.mf-roomview__figure img {
  display: block;
  width: 100%;
  max-height: min(56dvh, 34rem);
  /* contain, not cover: the point of the picture is the panelled wall, and a
     crop to fit the frame is exactly what would cut it out. */
  object-fit: contain;
  background: var(--paper);
  border-radius: var(--radius-card);
}

.mf-roomview__caption {
  margin-top: 0.6rem;
  font-size: var(--step-1);
  font-weight: 600;
}

.mf-roomview__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
}

.mf-roomview__steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mf-roomview__steps .mf-tool {
  cursor: pointer;
}

.mf-roomview__steps .mf-tool:first-child .mf-icon {
  transform: rotate(90deg);
}

.mf-roomview__steps .mf-tool:last-child .mf-icon {
  transform: rotate(-90deg);
}

.mf-roomview__of {
  color: var(--text-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .mf-roomview__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .mf-roomview__steps {
    justify-content: space-between;
  }

  .mf-roomview__foot .button {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-roomcard__media img {
    transition: none;
  }

  .mf-roomcard:hover .mf-roomcard__media img,
  .mf-roomcard:focus-visible .mf-roomcard__media img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Wall-panel hero

   A linen band across the top of the archive: name and reasons on the left,
   one room photograph on the right with the panel's make-up laid over it. The
   card is absolute over the photograph from 900px and simply follows it below
   on narrower screens, where there is no room to put anything on top of
   anything.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   The category hero

   One component for the wall-panel, art and table archives, taken from the
   wall-panel hero: the same container, columns, gap, type and rhythm on every
   category, so moving between them moves nothing. What differs is the words
   and the visual on the right (.mf-phero__* / .mf-ahero__* / .mf-thero__*
   hold only what is that hero's own).
   ------------------------------------------------------------------------ */

:root {
  --hero-pad-y: clamp(1.25rem, 3vw, 2rem);
  --hero-pad-x: clamp(1.5rem, 4vw, 3rem);
  --hero-gap: clamp(1.5rem, 4vw, 3rem);
  --hero-columns: minmax(0, 1fr) minmax(0, 1.05fr); /* from 900px; one column below */
  --hero-margin: clamp(1.5rem, 3vw, 2.25rem);
}

.mf-chero {
  display: grid;
  gap: var(--hero-gap);
  /* From the top, so the eyebrow, the title and the visual start at the same
     point on every category however much or little text follows. */
  align-items: start;
  /* The archive header centres its title; a two-column band reads from the
     left edge of its own column, in every language. */
  text-align: start;
  margin: 0 0 var(--hero-margin);
  padding: var(--hero-pad-y) var(--hero-pad-x);
  background: var(--paper);
  border-radius: var(--radius-card);
}

@media (min-width: 900px) {
  .mf-chero {
    grid-template-columns: var(--hero-columns);
  }
}

.mf-chero__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mf-chero__title {
  margin: 0 0 0.5rem;
  font-size: var(--step-3);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.mf-chero__lede {
  margin: 0 0 0.85rem;
  max-width: 44ch;
  color: var(--text-muted);
  font-size: var(--step-0);
}

.mf-chero__points {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.mf-chero__points li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: none;
  font-weight: 600;
}

.mf-chero__points .mf-icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--oak);
}

.mf-chero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.mf-chero__actions .button {
  cursor: pointer;
}

/* The theme's .button sets display, which beats the browser's [hidden] rule.
   This button is in the markup waiting for a tool that does not exist yet
   (madformat_panel_tryon_url), and until there is one it must not show. */
.mf-chero__actions .button[hidden] {
  display: none;
}

.mf-phero__pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mf-chero__media {
  position: relative;
}

.mf-phero__figure {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper-bright);
}

.mf-phero__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The quieter second row of the hero's text column: the rooms pop-up and the
   printed catalogue, which are both ways round rather than the way in. */
.mf-chero__quiet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0.85rem 0 0;
  font-size: var(--step--1);
}

.mf-chero__quiet .mf-linkish {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mf-chero__quiet .mf-icon {
  width: 1.05em;
  height: 1.05em;
  transform: none;
}

/* ---------------------------------------------------------------------------
   The hero's slider

   One room, rendered twice with a different design on the back wall, laid one
   exactly over the other. Dragging moves nothing: it changes where the upper
   picture is clipped, so the wall swaps and the sofa, the window and the light
   stay where they are.

   The control is a real <input type="range"> stretched over the frame, so the
   mouse, a finger and the arrow keys all work without a line of JavaScript,
   and a screen reader reads it as what it is. Everything visible — the seam,
   the round handle, the two article numbers — is drawn around it and takes no
   pointer events.
   ------------------------------------------------------------------------ */

.mf-scene {
  --mf-scene-split: 50%;
  --mf-scene-left: 1;
  --mf-scene-right: 1;
  margin: 0;
}

.mf-scene__frame {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper-bright);
  /* The renders are 3:2. Stating it here and on the images themselves means
     the hero occupies its final height before either file has arrived. */
  aspect-ratio: 3 / 2;
}

.mf-scene__picture,
.mf-scene__picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The upper room. Clipped from the right edge inwards; never moved. */
.mf-scene__over {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--mf-scene-split)) 0 0);
}

/* The seam, on the clip's own edge. */
.mf-scene__over::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
}

.mf-scene__tag {
  position: absolute;
  bottom: clamp(0.6rem, 2vw, 1rem);
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.14);
}

.mf-scene__tag--left {
  left: clamp(0.6rem, 2vw, 1rem);
  /* Faded out once the wipe has passed it: a number sitting over the other
     design would be wrong, and a label that lies is worse than no label. The
     script sets the two numbers; with no script both simply stay on, which at
     the starting half-and-half is correct. */
  opacity: var(--mf-scene-left);
  transition: opacity 0.15s linear;
}

.mf-scene__tag--right {
  right: clamp(0.6rem, 2vw, 1rem);
  opacity: var(--mf-scene-right);
  transition: opacity 0.15s linear;
}

.mf-scene__handle {
  position: absolute;
  top: 50%;
  left: var(--mf-scene-split);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.22);
  pointer-events: none;
}

.mf-scene__handle .mf-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.mf-scene__handle .mf-icon:first-child {
  transform: rotate(180deg);
  margin-right: -0.35rem;
}

.mf-scene__handle .mf-icon:last-child {
  margin-left: -0.35rem;
}

/* The control. Invisible, the full size of the frame, on top of everything. */
.mf-scene__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
  touch-action: pinch-zoom;
}

.mf-scene__range::-webkit-slider-runnable-track {
  height: 100%;
  background: none;
}

.mf-scene__range::-moz-range-track {
  height: 100%;
  background: none;
}

/* The thumb is invisible — the round handle is drawn separately — and it is
   one pixel wide on purpose. A range maps the pointer across the track minus
   the thumb, so a wide thumb would make the seam lag the finger by half its
   width everywhere except the two ends. At one pixel the mapping is the frame,
   edge to edge, and the wipe lands exactly where it was put. */
.mf-scene__range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1px;
  height: 100%;
  border: 0;
  background: none;
}

.mf-scene__range::-moz-range-thumb {
  width: 1px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Keyboard focus lands on the handle, which is the thing that moves. */
.mf-scene__range:focus-visible {
  outline: none;
}

.mf-scene__range:focus-visible ~ .mf-scene__handle {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.mf-scene__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0.6rem 0 0;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.mf-scene__badge {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .mf-scene__tag {
    transition: none;
  }
}

/* The make-up card.
   It used to sit absolutely over the hero photograph. The hero's right-hand
   side is now a slider the visitor drags, and a card floating on top of it
   would swallow half the gesture, so the three layers are their own band
   directly underneath — the same markup, in the flow. */
.mf-phero__build {
  /* A quiet part of the hero's own column: a rule above it, no box. */
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--rule);
  text-align: start;
}

.mf-phero__buildtitle {
  margin: 0 0 0.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mf-buildlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  counter-reset: mf-layer;
}

.mf-buildlist__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  counter-increment: mf-layer;
}

/* Three visibly different slabs, thickest at the bottom: the base is the
   thick one, and the order on screen is the order in the panel. */
.mf-buildlist__slab {
  height: 0.5rem;
  border-radius: 2px;
  transform: skewX(-24deg);
}

.mf-buildlist__item--1 .mf-buildlist__slab {
  background: var(--paper-bright);
  box-shadow: inset 0 0 0 1px var(--border-control);
}

.mf-buildlist__item--2 .mf-buildlist__slab {
  background: var(--oak);
}

.mf-buildlist__item--3 .mf-buildlist__slab {
  height: 1.05rem;
  background: var(--graphite);
}

.mf-buildlist__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.45rem;
  font-size: var(--step--1);
}

.mf-buildlist__name {
  font-weight: 600;
}

.mf-buildlist__name::before {
  content: counter(mf-layer) ' · ';
  color: var(--text-muted);
  font-weight: 400;
}

.mf-buildlist__note {
  color: var(--text-muted);
}

.mf-phero__schematic {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: var(--type-caption);
}


/* ---------------------------------------------------------------------------
   Card: the route to the options

   In the grid the card's action was a full-width solid button, as tall as the
   name above it — on a phone the two together were most of what a card said.
   Dropping it outright was the other option, and it reads worse here: every
   product in this shop is variable, so "open it and choose" is a real step
   and a card that only links to a page hides it.

   So it stays, quiet and only as wide as its words: the picture and the name
   are the target for browsing, and this is for the shopper who has already
   decided on that one. The list view keeps the full-strength button, where a
   row has the width for it.
   ------------------------------------------------------------------------ */

.mf-catalogue:not([data-view='list']) li.product .mf-list__buy {
  margin-top: 0.45rem;
}

.mf-catalogue:not([data-view='list']) li.product .mf-list__add {
  min-height: 0;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--border-control);
  background: none;
  color: var(--ink);
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: 1.3;
}

.mf-catalogue:not([data-view='list']) li.product .mf-list__add:hover,
.mf-catalogue:not([data-view='list']) li.product .mf-list__add:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper-bright);
}

/* A name may run to two lines; a third is the grid losing its rows. The
   differentiating fact under it gets one line and elides — it is a hint for
   comparing cards, not a specification. */
.mf-catalogue:not([data-view='list']) li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.mf-catalogue:not([data-view='list']) li.product .mf-card__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The toolbar over the grid: a line, not a band. */
.mf-toolbar {
  padding-block: 0.55rem 0.7rem;
}

/* ---------------------------------------------------------------------------
   Very narrow phones

   Below 360px the gutter, the chips and the toolbar were each still asking
   for their comfortable width, and the page scrolled sideways. Nothing here
   changes the layout; it only stops the parts that cannot shrink from
   setting the page's width.
   ------------------------------------------------------------------------ */

@media (max-width: 380px) {
  .mf-toolbar__tools {
    flex-wrap: wrap;
  }

  ul.products {
    column-gap: 0.6rem;
  }
}

/* The configuration a panel card's price is for: "High gloss · 3000 × 1220 mm" (inc/panels.php). */
.tax-product_cat ul.products li.product .mf-card__config {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: var(--type-meta);
  line-height: 1.3;
}