/* ---------------------------------------------------------------------------
   The table archive.

   Loaded on one category. Everything here is either the hero or the enquiry;
   the grid, the toolbar, the filters, the pop-up frame and the full-screen
   viewer are the catalogue's and the art archive's and are not restated.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   Photographs

   Every photograph on this page carries data-mf-photo, and the script marks
   the one that arrived and the one that did not. A failed photograph leaves a
   linen panel with its caption still under it — never the grey rectangle of a
   broken image, and never an empty card.

   The fade only exists where a script can end it.
   ------------------------------------------------------------------------ */

@media (scripting: enabled) {
  [data-mf-photo] {
    opacity: 0;
    transition: opacity 0.35s var(--ease);
  }

  [data-mf-photo].is-ready {
    opacity: 1;
  }
}

[data-photo-failed] img {
  display: none;
}

[data-photo-failed] {
  background: var(--paper);
}

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

/* The container, columns, type and rhythm of the hero are the category hero's
   (.mf-chero, catalogue.css), as on the wall-panel and art pages. What is here
   is only this hero's own. */

.mf-thero__actions .button {
  margin: 0;
}

/* Two filled buttons side by side are two primary actions, and the shopper
   has to read both to find out which is which. The designer is the page's
   offer; the gallery is a look around, and looks like one. Three classes and
   an element, because `.woocommerce button.button` is 0-2-1. */
.mf-thero .mf-thero__actions button.mf-thero__open {
  background: var(--paper-bright);
  border: 1px solid var(--border-control);
  color: var(--text);
}

.mf-thero .mf-thero__actions button.mf-thero__open:hover {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--text);
}

/* What every table is: a quiet part of the hero's own column, a rule above it
   and no box — the same treatment as the wall-panel hero's make-up block. */
.mf-thero__facts {
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--rule);
}

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

.mf-thero__factlist {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin: 0;
}

@media (min-width: 600px) {
  .mf-thero__factlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mf-thero__factlist dt {
  font-weight: 600;
}

.mf-thero__factlist dd {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.mf-thero__jump a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mf-thero__intro {
  grid-column: 1 / -1;
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--type-meta);
}

.mf-thero__intro p {
  margin: 0.4rem 0 0;
}

/* ---------------------------------------------------------------------------
   The frame

   One box, several states, one visible at a time. The photographs it holds are
   different shapes — a room is 4:3, a table on white is square — so they are
   contained rather than cropped: the table keeps its whole top, which is the
   only thing on it worth looking at.

   Capped in height for the same reason the art hero's band is: an uncapped
   photograph here is most of the first screen.
   ------------------------------------------------------------------------ */

.mf-thero__frame {
  position: relative;
  /* The proportion of the visual on the other category heroes (3:2), fixed for
     every state: the states are different shapes — a room is 4:3, a table on
     white is square — and a frame that changed height as the chips are
     pressed would move the whole page under the reader. */
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
  background: var(--paper);
  overflow: hidden;
}

.mf-tshot {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.mf-tshot[hidden] {
  display: none;
}

/* `contain`, always: a table photographed on white keeps its whole top, which
   is the only thing on it worth looking at, and the linen ground behind it is
   near enough the studio's own that the letterboxing does not read as one. */
.mf-tshot > img,
.mf-tshot__canvas {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: contain;
}

/* The room is context and a band of it is enough — the same crop the art
   archive's hero makes, and for the same reason: the whole photograph here is
   most of the first screen. The focus sits a little below the middle, where
   the table is. */
.mf-tshot--room > img {
  object-fit: cover;
  object-position: center 52%;
}

.mf-tshot figcaption {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.75rem;
  padding: 0.45rem 0.7rem;
  background: var(--paper-bright);
  border-top: 1px solid var(--rule);
}

.mf-tshot__note {
  color: var(--text-muted);
  font-size: var(--type-caption);
  line-height: 1.35;
}

.mf-tshot__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  font-size: var(--type-meta);
  font-weight: 600;
}

.mf-tshot__link .mf-icon {
  width: 1em;
  height: 1em;
}

/* The mockup and the drawing over it are one stack: the canvas is placed on
   the photograph's own painted box, not on the frame, so the print area lands
   where the product says it is however the photograph is letterboxed. */
.mf-tshot__canvas {
  position: relative;
}

.mf-tshot__canvas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sized and placed by the script over the photograph's painted box, not over
   this element: `contain` leaves bars beside the photograph, and the print
   area is a percentage of the photograph. */
.mf-tshot__canvas canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.mf-tshot__canvas canvas.is-drawn {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   The chips

   Hidden until the script reveals them: a control that looks pressable and is
   not is worse than no control.
   ------------------------------------------------------------------------ */

.mf-thero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.mf-thero__chips[hidden] {
  display: none;
}

.mf-thero__chipslabel {
  color: var(--text-muted);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--paper-bright);
  color: var(--text);
  font-size: var(--type-control);
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

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

.mf-chip[aria-pressed='true'],
.mf-thero__chips.is-own .mf-chip--file {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}

/* The file control is a label around an input: the input is the thing that
   takes the click, so it covers the label rather than being hidden, which
   would take the keyboard with it. */
.mf-chip--file {
  position: relative;
  overflow: hidden;
}

.mf-chip--file input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.mf-chip--file:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   The cards

   The made-to-order table keeps its price, because €129 is a real price. What
   it gains is the line that says the top arrives blank.
   ------------------------------------------------------------------------ */

.mf-card__made {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: var(--type-caption);
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   The gallery

   The pop-up frame, the tiles and the viewer are the art archive's. Only the
   tile's own caption differs: there it is a room name, here it is a sentence
   about what was made.
   ------------------------------------------------------------------------ */

.mf-modal--tables .mf-scenecard__room {
  text-transform: none;
  letter-spacing: 0;
}

/* Two examples, not six: a fixed three-column grid would leave a hole where a
   third tile is not, which reads as a picture that failed to load. The tracks
   are sized to the tiles instead, and the row grows as photographs arrive. */
.mf-modal--tables .mf-modal__grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 22rem));
  justify-content: start;
}

/* ---------------------------------------------------------------------------
   The line under the grid
   ------------------------------------------------------------------------ */

.mf-tcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  margin: 1.4rem 0 0;
  padding: clamp(0.9rem, 2vw, 1.3rem);
  border-radius: var(--radius-card);
  background: var(--graphite);
  color: var(--on-dark);
  text-align: left;
}

.mf-tcta__title {
  margin: 0;
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.mf-tcta__text {
  margin: 0.25rem 0 0;
  max-width: 48ch;
  color: var(--on-dark-muted);
  font-size: var(--type-meta);
}

.mf-tcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.mf-tcta__actions .button {
  margin: 0;
  cursor: pointer;
}

/* The dark ground needs its own pair: the page's buttons are drawn for linen.
   `.woocommerce a.button.alt` is 0-3-1, so this has to carry four classes to
   outrank it — with three it kept the ink background and went invisible. */
.mf-tcta .mf-tcta__actions a.button.alt {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--ink);
}

.mf-tcta .mf-tcta__actions a.button.alt:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.mf-tcta .mf-tcta__actions button.button {
  background: transparent;
  border: 1px solid var(--on-dark-muted);
  color: var(--on-dark);
}

.mf-tcta .mf-tcta__actions button.button:hover {
  border-color: var(--on-dark);
  background: rgba(247, 246, 243, 0.08);
  color: var(--on-dark);
}

.mf-tcta :focus-visible {
  outline: 2px solid var(--focus-on-dark);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Narrower
   ------------------------------------------------------------------------ */

@media (max-width: 759px) {
  /* A finger, not a pointer: 44px is the smallest target that is comfortable
     to hit, and the chips are the one control here that was under it. */
  .mf-chip {
    min-height: 2.75rem;
    padding-inline: 0.85rem;
  }

  /* The link to the grid sits between two 48px buttons; on a phone it gets
     enough room around it to be hit rather than aimed at. */
  .mf-thero__jump a {
    display: inline-block;
    padding-block: 0.45rem;
  }

  .mf-thero__frame {
    max-height: min(34dvh, 15rem);
  }

  .mf-thero__text {
    margin-bottom: 0.9rem;
  }

  .mf-thero__actions .button {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .mf-tcta__actions {
    width: 100%;
  }

  .mf-tcta__actions .button {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-mf-photo],
  .mf-chip {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Table cards: one grid, even when a name runs to two lines

   The card is a column; the button sits at the bottom of it, so names, prices
   and buttons line up across a row on 4 columns and on 2.
   ------------------------------------------------------------------------ */

.mf-cat-tables .mf-catalogue:not([data-view='list']) ul.products li.product {
  display: flex;
  flex-direction: column;
}

.mf-cat-tables .mf-catalogue:not([data-view='list']) ul.products li.product > a {
  flex: 1 1 auto;
}

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

/* The electric desks: MASTER's photo is an opaque white studio shot, JUNIOR's a
   cut-out. Multiply lets the white take the frame's beige while the desk keeps
   its colour, so both sit on the same ground at the same scale. */
.mf-cat-tables ul.products li.product.mf-card--bdesk .mf-card__media img:not(.mf-card__alt) {
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------------
   The slider hero (.mf-thero--slider): text on the left, three pictures on the
   right. Only the table archive uses it; the shared .mf-chero is untouched.
   ------------------------------------------------------------------------ */

.mf-thero--slider {
  align-items: center;
  --hero-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.mf-thero--slider .mf-thero__title span {
  display: block;
}

.mf-thero--slider .mf-chero__title {
  margin-bottom: 0.9rem;
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  line-height: 1.02;
}

.mf-thero--slider .mf-chero__lede {
  max-width: 40ch;
  margin-bottom: 1.4rem;
  font-size: var(--step-0);
}

.mf-thero--slider .mf-chero__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 1.6rem;
}

.mf-thero--slider .mf-chero__points li {
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
}

.mf-thero__pointicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--paper-bright);
  color: var(--ink);
}

.mf-thero--slider .mf-chero__points .mf-thero__pointicon .mf-icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--ink);
}

.mf-thero--slider .mf-chero__actions {
  gap: 0.75rem;
}

.mf-thero--slider .mf-thero__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding-inline: 1.5rem;
  font-weight: 600;
}

.mf-thero--slider .mf-thero__actions .mf-thero__make {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
}

.mf-thero--slider .mf-thero__actions .mf-thero__make .mf-icon {
  width: 1.1em;
  height: 1.1em;
}

.mf-thero--slider .mf-thero__actions .mf-thero__open {
  background: transparent;
  border: 1px solid var(--border-control);
  color: var(--text);
}

.mf-thero--slider .mf-thero__actions .mf-thero__open:hover {
  background: var(--paper-bright);
  border-color: var(--ink);
}

.mf-thero__material {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.mf-thero__material .mf-icon {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--ink);
}

.mf-thero__material p {
  display: grid;
  gap: 0.15rem;
  margin: 0;
}

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

/* The slider */

.mf-tslider {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper-bright);
  outline-offset: 3px;
}

.mf-tslider__stage {
  position: relative;
  aspect-ratio: 3 / 2;
}

.mf-tslider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.mf-tslider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

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

.mf-tslider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.mf-tslider__arrow:hover {
  background: var(--paper-bright);
}

.mf-tslider__arrow--prev {
  left: 0.75rem;
}

.mf-tslider__arrow--next {
  right: 0.75rem;
}

.mf-tslider__arrow .mf-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.mf-tslider__arrow--prev .mf-icon {
  transform: rotate(90deg);
}

.mf-tslider__arrow--next .mf-icon {
  transform: rotate(-90deg);
}

.mf-tslider__count {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.mf-tslider__thumbs {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-tslider__thumbs li {
  margin: 0;
}

.mf-tslider__thumb {
  display: block;
  width: 6rem;
  aspect-ratio: 4 / 3;
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  overflow: hidden;
}

.mf-tslider__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.mf-tslider__thumb.is-active {
  background: #fff;
  box-shadow: 0 0 0 2px var(--ink);
}

@media (max-width: 899px) {
  .mf-thero--slider {
    align-items: start;
  }
}

@media (max-width: 759px) {
  .mf-thero--slider .mf-chero__points {
    grid-template-columns: 1fr;
  }

  .mf-thero--slider .mf-thero__actions .button {
    flex: 1 1 100%;
  }

  .mf-tslider__stage {
    aspect-ratio: 4 / 3;
  }

  .mf-tslider__arrow {
    width: 2.75rem;
    height: 2.75rem;
    margin-top: -1.375rem;
  }

  .mf-tslider__thumbs {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    justify-content: flex-end;
  }

  .mf-tslider__thumb {
    width: 3.75rem;
  }

  .mf-tslider__count {
    left: 0.6rem;
    bottom: auto;
    top: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-tslider__slide,
  .mf-tslider__slide.is-active {
    transition: none;
  }
}