/* ===========================================================================
   Madformat design system — components.

   Tokens live in style.css. This file is the chrome and the pages: header,
   footer, homepage, cards, product page. The order below follows the page
   from top to bottom.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Frame
   ------------------------------------------------------------------------ */

html {
  scroll-padding-top: 5.5rem;
}

body {
  overflow-x: clip;
}

.col-full {
  max-width: var(--page);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}

/* Storefront floats the content beside a sidebar; the shop is full width. */
.storefront-full-width-content .content-area,
.content-area {
  width: 100%;
  float: none;
  margin-right: 0;
}

.widget-area {
  display: none;
}

/* Full-bleed band inside Storefront's centred column. */
.mf-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.site-content {
  padding-top: 0;
}

/* Storefront leaves 6em under the main column, and its own padding besides —
   about 200px of nothing between the last line of a page and the footer, which
   on a short page like About was most of what the reader saw below the fold.
   Enough to separate the two, not enough to read as a gap. */
.site-main {
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}

.mf-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* ---------------------------------------------------------------------------
   Announcement
   ------------------------------------------------------------------------ */

.mf-announce {
  background: var(--ink);
  color: var(--paper-bright);
  text-align: center;
  font-size: var(--step--1);
  font-weight: 500;
}

.mf-announce a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6rem var(--gutter);
  color: inherit;
  text-decoration: none;
}

.mf-announce a:hover {
  color: var(--paper-bright);
  text-decoration: underline;
}

.mf-announce .mf-icon {
  width: 1em;
  height: 1em;
  transition: transform 0.2s var(--ease);
}

.mf-announce a:hover .mf-icon {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
   Header — sticky, one row: logo, three doors, search and bag.
   ------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  background-color: rgba(244, 243, 240, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 0;
  }
}

.mf-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0.95rem var(--gutter);
  box-sizing: border-box;
}

.mf-logo,
.mf-logo:hover {
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.mf-header__nav {
  justify-self: center;
}

.mf-nav {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-nav li {
  margin: 0;
}

.mf-nav a {
  position: relative;
  display: block;
  padding: 0.35rem 0;
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.mf-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--oak);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}

.mf-nav a:hover::after,
.mf-nav a[aria-current='page']::after,
.mf-nav .current-menu-item > a::after {
  transform: scaleX(1);
}

.mf-nav a:hover {
  color: var(--ink);
}

.mf-header__tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mf-tool,
.mf-header__toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

.mf-tool:hover,
.mf-header__toggle:hover,
.mf-tool[aria-expanded='true'] {
  background: var(--paper);
  color: var(--ink);
}

.mf-cart__count {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mf-cart__count[data-count='0'] {
  display: none;
}

.mf-header__toggle {
  display: none;
}

.mf-search {
  border-top: 1px solid var(--rule-soft);
  padding: 1rem var(--gutter) 1.25rem;
}

.mf-search form {
  display: flex;
  gap: 0.6rem;
  max-width: 44rem;
  margin: 0 auto;
}

.mf-search input[type='search'] {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background: #fff;
  box-shadow: none;
}

.mf-drawer {
  border-top: 1px solid var(--rule-soft);
  padding: 0.5rem var(--gutter) 1.5rem;
}

.mf-drawer__nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-drawer__nav a {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--step-2);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

@media (max-width: 860px) {
  .mf-header {
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .mf-header__toggle {
    display: inline-grid;
  }

  .mf-header__nav {
    display: none;
  }

  .mf-logo {
    justify-self: center;
  }
}

@media (min-width: 861px) {
  .mf-drawer {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Type helpers
   ------------------------------------------------------------------------ */

.mf-kicker,
.mf-eyebrow,
.mf-card__eyebrow {
  display: block;
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
}

.mf-display {
  margin: 0 0 1.2rem;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.mf-heading {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.mf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.15em;
}

.mf-link .mf-icon {
  transition: transform 0.2s var(--ease);
}

.mf-link:hover .mf-icon {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------ */

.mf-section {
  padding: clamp(3rem, 7vw, 6rem) 0 0;
}

.mf-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.mf-section__aside {
  margin: 0;
  max-width: 34ch;
  color: var(--text-muted);
}

.mf-section__aside strong {
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Hero — dark, graphite, the tops cycling in a rounded frame.
   ------------------------------------------------------------------------ */

.mf-hero {
  background: var(--graphite);
  color: var(--paper-bright);
}

.mf-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 6.5rem) var(--gutter);
  box-sizing: border-box;
}

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

.mf-hero .mf-display {
  color: var(--paper-bright);
}

.mf-hero__lede {
  max-width: 40ch;
  margin: 0 0 2rem;
  font-size: var(--step-1);
  line-height: 1.4;
  color: rgba(244, 243, 240, 0.78);
}

.mf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.6rem;
}

.mf-hero__price {
  font-size: var(--step-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.button.mf-button--light,
.woocommerce a.button.mf-button--light {
  background: var(--paper-bright);
  color: var(--ink);
}

.button.mf-button--light:hover,
.woocommerce a.button.mf-button--light:hover {
  background: var(--graphite);
  color: var(--paper-bright);
}

.mf-hero__stage {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--radius-card) * 1.5);
  overflow: hidden;
  background: #cfd0d0;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}

.mf-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: mf-crossfade 25s infinite;
  animation-delay: calc(var(--i) * 5s);
}

/* The first top is there before anything moves, and underneath the rest. */
.mf-hero__slide:first-child {
  opacity: 1;
  animation: none;
}

@keyframes mf-crossfade {
  0% { opacity: 0; transform: scale(1.04); }
  4% { opacity: 1; }
  20% { opacity: 1; transform: scale(1); }
  24% { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-hero__slide:not(:first-child) {
    display: none;
  }
}

@media (max-width: 860px) {
  .mf-hero__inner {
    grid-template-columns: 1fr;
  }

  .mf-hero__stage {
    order: -1;
    max-width: 30rem;
    width: 100%;
    justify-self: center;
  }
}

/* ---------------------------------------------------------------------------
   Facts — the band under the hero, the list beside the buy button.
   ------------------------------------------------------------------------ */

.mf-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-facts__item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0;
  max-width: none;
}

.mf-facts__item .mf-icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--oak);
}

.mf-facts__text strong {
  display: block;
  font-weight: 700;
}

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

.mf-section--facts {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.mf-facts--band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1.5rem 2rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}

.mf-facts--summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.2rem;
  margin: 1.6rem 0;
  padding: 1.2rem;
  border-radius: var(--radius-card);
  background: var(--paper);
}

.mf-facts--summary .mf-facts__item .mf-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.mf-facts--summary .mf-facts__text {
  font-size: var(--step--1);
  line-height: 1.35;
}

@media (max-width: 480px) {
  .mf-facts--summary {
    grid-template-columns: 1fr;
  }
}

.mf-facts--footer .mf-facts__item {
  margin-bottom: 0.7rem;
}

.mf-facts--footer .mf-icon,
.mf-facts--footer .mf-facts__text span {
  color: var(--on-dark-muted);
}

/* ---------------------------------------------------------------------------
   Product cards — rounded frame, second image on hover, quiet text.
   ------------------------------------------------------------------------ */

ul.products {
  gap: clamp(1.1rem, 2.4vw, 2rem) clamp(0.9rem, 2vw, 1.6rem);
}

@media (max-width: 600px) {
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

ul.products li.product > a {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
}

.mf-card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

/* The frame is square so rows line up; the work inside keeps its proportion. */
ul.products li.product .mf-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  background: transparent;
  transition: transform 0.5s var(--ease), opacity 0.35s ease;
}

/* A wall panel is the exception. Its design is a continuous pattern printed
   across a 3000x1220 sheet — there is no edge to respect and no frame around
   it, so letterboxing a 2.4:1 sheet inside a square frame spends a third of
   the card on grey. These fill the frame instead; the crop loses nothing a
   repeating pattern needs. Scoped by the English category slug, because
   WooCommerce's own term class is translated. */
body.mf-cat-wall_panel_mad ul.products li.product .mf-card__media img {
  object-fit: cover;
}

ul.products li.product .mf-card__media img.mf-card__alt {
  position: absolute;
  inset: 0;
  object-fit: cover;
  opacity: 0;
}

ul.products li.product > a:hover .mf-card__media {
  box-shadow: var(--lift);
  transform: translateY(-3px);
}

ul.products li.product > a:hover .mf-card__media img {
  transform: scale(1.035);
}

@media (hover: hover) {
  ul.products li.product > a:hover .mf-card__media.has-alt img.mf-card__alt {
    opacity: 1;
  }
}

ul.products li.product .mf-card__eyebrow {
  margin: 0.35rem 0 -0.35rem;
  font-size: var(--type-caption);
  color: var(--text-muted);
}

ul.products li.product .woocommerce-loop-product__title {
  margin-top: 0.15rem;
  font-size: var(--type-card);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.002em;
}

ul.products li.product > a:hover .woocommerce-loop-product__title {
  color: var(--ink);
}

ul.products li.product .mf-card__meta {
  margin: 0.15rem 0 0;
  max-width: none;
  font-size: var(--type-meta);
  line-height: 1.4;
  color: var(--text-muted);
}

ul.products li.product .price {
  font-size: var(--type-price);
  font-weight: 600;
  color: var(--ink);
}

ul.products li.product .onsale {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 1;
  margin: 0;
  padding: 0.3em 0.8em;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--signal);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

ul.products li.product {
  position: relative;
}

/* ---------------------------------------------------------------------------
   Height band on the homepage — the product-page drawing, made large.
   ------------------------------------------------------------------------ */

.mf-heights {
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--paper);
}

.mf-heights__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.mf-heights__copy .mf-heading {
  margin-bottom: 1.2rem;
}

.mf-heights__copy p {
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}

.height-scale--static {
  margin: 0;
  padding: 0;
  border: 0;
  justify-self: center;
}

.height-scale--static .height-scale__list {
  gap: clamp(1.6rem, 5vw, 3.5rem);
}

.height-scale--static .height-scale__figure {
  width: 7rem;
}

.height-scale--static .height-scale__button {
  cursor: default;
  font-size: var(--step-0);
}

.height-scale--static .height-scale__button:hover {
  color: var(--ink);
}

.height-scale--static .height-scale__button:hover .height-scale__top {
  background-color: var(--graphite);
}

@media (max-width: 860px) {
  .mf-heights__inner {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Doors — panels and prints, as two large tiles.
   ------------------------------------------------------------------------ */

.mf-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}

.mf-door {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--radius-card) * 1.25);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.3s var(--ease);
}

.mf-door:hover {
  color: var(--ink);
  box-shadow: var(--lift);
}

.mf-door__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.mf-door__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.mf-door:hover .mf-door__media img {
  transform: scale(1.05);
}

.mf-door__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.2rem 1rem;
  padding: 1.3rem 1.5rem 1.5rem;
}

.mf-door__title {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

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

.mf-door__body .mf-icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.7rem;
  box-sizing: border-box;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--paper-bright);
  transition: background-color 0.2s ease, transform 0.2s var(--ease);
}

.mf-door:hover .mf-icon {
  background: var(--graphite);
  transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
   Accordion — homepage questions and product-page tabs.
   ------------------------------------------------------------------------ */

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

.mf-accordion__item {
  border-bottom: 1px solid var(--rule);
}

.mf-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

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

.mf-accordion__item summary:hover {
  color: var(--ink);
}

.mf-accordion__item summary .mf-icon {
  transition: transform 0.25s var(--ease);
}

.mf-accordion__item[open] summary .mf-icon {
  transform: rotate(45deg);
}

.mf-accordion__body {
  padding: 0 0 1.3rem;
  color: var(--text-muted);
}

.mf-accordion__body > :last-child {
  margin-bottom: 0;
}

.mf-accordion__body table.shop_attributes {
  margin: 0;
  border: 0;
}

.mf-accordion__body table.shop_attributes th,
.mf-accordion__body table.shop_attributes td {
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: none;
  font-style: normal;
}

.mf-faq .mf-accordion {
  max-width: 52rem;
}

/* ---------------------------------------------------------------------------
   Archives — title, category chips, sorting.
   ------------------------------------------------------------------------ */

.woocommerce-breadcrumb {
  margin: 0.85rem 0 0;
  padding: 0;
  font-size: var(--type-meta);
  color: var(--text-muted);
}

.woocommerce-breadcrumb a {
  color: inherit;
}

.woocommerce-products-header {
  padding: clamp(1rem, 2.2vw, 1.6rem) 0 0.4rem;
  border: 0;
}

.woocommerce-products-header__title.page-title {
  margin: 0 0 0.75rem;
  font-size: var(--type-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.mf-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  padding: 0;
  list-style: none;
}

/* A phone wrapped four chips onto two rows and spent 180px on them. One row
   that scrolls sideways costs 44px and keeps every category reachable. It
   stays inside the page's gutter: bleeding it to the screen edge with
   negative margins made the document itself scroll sideways. */
@media (max-width: 700px) {
  .mf-chips ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 3px;
  }

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

  .mf-chips li {
    flex: none;
  }
}

.mf-chips li {
  margin: 0;
}

.mf-chips a {
  display: block;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  font-size: var(--type-control);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

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

.mf-chips a[aria-current='page'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-bright);
}

.storefront-sorting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
  font-size: var(--step--1);
}

.storefront-sorting .woocommerce-ordering,
.storefront-sorting .woocommerce-result-count,
.storefront-sorting .woocommerce-pagination {
  float: none;
  margin: 0;
}

.woocommerce-ordering select {
  padding: 0.55rem 2rem 0.55rem 1rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Product page
   ------------------------------------------------------------------------ */

.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-top: 1.5rem;
}

.single-product div.product > * {
  grid-column: 1 / -1;
}

.single-product div.product .woocommerce-product-gallery {
  grid-column: 1;
  width: auto;
  float: none;
  margin: 0;
}

.single-product div.product .summary {
  grid-column: 2;
  width: auto;
  float: none;
  margin: 0;
}

.single-product div.product > .onsale {
  display: none;
}

@media (max-width: 860px) {
  .single-product div.product {
    grid-template-columns: 1fr;
  }

  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary {
    grid-column: 1;
  }

  .single-product div.product .woocommerce-product-gallery {
    margin-bottom: 1.6rem;
  }
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  overflow: hidden;
  border-radius: calc(var(--radius-card) * 1.25);
  background: var(--paper);
}

.single-product div.product .woocommerce-product-gallery img {
  border: 0;
  background: transparent;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  width: 5rem;
  margin: 0;
  float: none;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img {
  border-radius: var(--radius-inner);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img:hover {
  opacity: 1;
}

.single-product div.product .woocommerce-product-gallery__trigger {
  top: 1rem;
  right: 1rem;
  border-radius: var(--radius-control);
  background: var(--paper-bright);
}

.single-product .summary .product_title {
  margin: 0 0 0.8rem;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.single-product div.product .summary .price {
  margin: 0 0 1.4rem;
  font-size: var(--step-2);
  font-weight: 700;
}

.single-product .summary .woocommerce-product-details__short-description {
  color: var(--text-muted);
  margin-bottom: 1.4rem;
}

/* Attribute rows: the name as a small heading, the picker underneath. */
.single-product .summary table.variations,
.single-product .summary table.variations tbody,
.single-product .summary table.variations tr,
.single-product .summary table.variations th,
.single-product .summary table.variations td {
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
}

.single-product .summary table.variations tr {
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}

.single-product .summary table.variations th.label {
  margin-bottom: 0.5rem;
}

.single-product .summary table.variations td.value {
  margin-bottom: 0;
}

.single-product .summary table.variations th.label label {
  margin: 0;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.single-product .summary table.variations select[data-mf-driven] {
  display: none;
}

.single-product .summary table.variations .format-scale,
.single-product .summary table.variations .height-scale {
  margin: 0;
  padding: 0;
  border: 0;
}

.single-product .summary .reset_variations {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.mf-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mf-options__button,
.woocommerce .mf-options__button {
  padding: 0.7rem 1.15rem;
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-inner);
  background: #fff;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mf-options__button:hover {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}

/* Chosen: the same 2px ink ring as the size and height chips. */
.mf-options__button[aria-pressed='true'],
.mf-options__button[aria-pressed='true']:hover {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: #fff;
  color: var(--text);
}

.mf-options__button.is-unavailable {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Price of the chosen combination, and the buy row. */
.single-product .summary .single_variation_wrap {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

/* Its own padding sat on top of the wrapper's, so the buy button stood about
   34px clear of the last choice with nothing in between. WooCommerce's own
   sheet sets this one, hence the body prefix. */
body.single-product .summary .woocommerce-variation-add-to-cart {
  padding-top: 0;
}

.single-product .summary .woocommerce-variation-price .price {
  margin: 0 0 1rem;
}

.single-product .summary form.cart {
  margin-bottom: 0;
}

.single-product .summary .woocommerce-variation-add-to-cart,
.single-product .summary form.cart:not(.variations_form) {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}

.single-product .summary .quantity .qty {
  height: 100%;
  min-height: 3.2rem;
  width: 4.5rem;
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-control);
  background: #fff;
  text-align: center;
  box-shadow: none;
}

.single-product .summary .single_add_to_cart_button {
  flex: 1;
  min-height: 3.2rem;
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: var(--step-0);
}


.single-product .summary .stock {
  margin-bottom: 0.8rem;
  font-size: var(--step--1);
  font-weight: 600;
}

.single-product .summary .mf-accordion {
  margin-top: 0.5rem;
}

.single-product .summary .mf-eyebrow:hover {
  color: var(--ink);
}

/* Related and up-sells. */
.single-product .related,
.single-product .upsells {
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: 0;
  border: 0;
}

.single-product .related > h2,
.single-product .upsells > h2 {
  margin-bottom: 1.5rem;
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.storefront-product-pagination {
  display: none;
}

/* Storefront's sticky add-to-cart, restyled. */
.storefront-sticky-add-to-cart {
  border-bottom: 1px solid var(--rule);
  background: rgba(244, 243, 240, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--lift);
}

.storefront-sticky-add-to-cart__content-title {
  font-weight: 700;
}

.storefront-sticky-add-to-cart__content-button,
.storefront-sticky-add-to-cart__content-button.button {
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--paper-bright);
}

.storefront-sticky-add-to-cart__content-button:hover {
  background: var(--graphite);
  color: var(--paper-bright);
}

.storefront-sticky-add-to-cart img {
  border-radius: var(--radius-inner);
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */

.site-footer {
  margin-top: clamp(3rem, 8vw, 7rem);
  padding: clamp(3rem, 6vw, 5rem) 0 1.5rem;
  background: var(--ink);
  color: var(--on-dark-muted);
}

.mf-footer {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.mf-logo--footer,
.mf-logo--footer:hover {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--paper-bright);
  font-size: var(--step-2);
}

.mf-footer__brand p {
  max-width: 34ch;
}

.mf-footer__title {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--paper-bright);
}

.mf-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-footer__list li {
  margin: 0 0 0.6rem;
}

.site-footer a,
.mf-footer__list a {
  color: var(--on-dark-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--paper-bright);
  text-decoration: underline;
}

.mf-footer__base {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(232, 230, 225, 0.14);
  font-size: var(--step--1);
  color: var(--on-dark-muted);
}

@media (max-width: 860px) {
  .mf-footer {
    grid-template-columns: 1fr 1fr;
  }

  .mf-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Two columns need 176px + 153px + the gap for their longest single words
   ("конфиденциальности" is one of them). On a 320px screen that is wider than
   the page, and the whole document scrolled sideways on every page because of
   it. One column below that. */
@media (max-width: 420px) {
  .mf-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

/* ---------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------ */

.button:active,
button:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .mf-card__media,
  ul.products li.product .mf-card__media img,
  .mf-door__media img {
    transition: none;
  }

  ul.products li.product > a:hover .mf-card__media,
  ul.products li.product > a:hover .mf-card__media img,
  .mf-door:hover .mf-door__media img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Storefront overrides.

   Storefront prints customizer colours inline and sizes its columns with
   long compound selectors. These rules carry just enough extra specificity
   to win, rather than !important, so a later rule here can still refine them.
   ------------------------------------------------------------------------ */

body.home .site-header,
body.post-type-archive-product .site-header {
  margin-bottom: 0;
}

body .site-footer a.mf-logo--footer:not(.button):not(.components-button) {
  color: var(--paper-bright);
}

body .site-footer a:not(.button):not(.components-button) {
  color: var(--on-dark-muted);
}

body .site-footer a:not(.button):not(.components-button):hover {
  color: var(--paper-bright);
}

body .site-footer h2.mf-footer__title {
  color: var(--paper-bright);
}

body.storefront-full-width-content .site-main ul.products[class] li.product,
body .site-main ul.products[class] li.product {
  width: auto;
  float: none;
  margin: 0;
}

body.storefront-full-width-content.single-product div.product .woocommerce-product-gallery,
body.storefront-full-width-content.single-product div.product .summary {
  width: auto;
  float: none;
  margin: 0;
}

body.single-product .related,
body.single-product .upsells {
  grid-column: 1 / -1;
  width: auto;
  float: none;
}

/* The pattern name leads; "Table · Super Matt, Soft-Touch" follows, smaller. */
.product_title .mf-title__rest {
  display: block;
  font-stretch: 100%;
  margin-top: 0.5rem;
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  color: var(--text-muted);
}

body.single-product div.product .woocommerce-product-gallery img.wp-post-image {
  width: 100%;
  height: auto;
}

body.single-product .related > h2,
body.single-product .upsells > h2,
body.single-product .related.products > h2:first-child,
body.single-product .up-sells > h2:first-child {
  /* Storefront centres these at (0,4,1); headings here sit left. */
  text-align: left;
}

/* Storefront clips #page with overflow-x: hidden, which makes it a scroll
   container and quietly breaks every position: sticky inside it — the header.
   The body clips instead (see Frame). */
#page.site {
  overflow: visible;
}

#masthead.site-header {
  margin-bottom: 0;
}

/* The scales are buttons, but not calls to action: no shouting. */
.format-scale__button,
.height-scale__button {
  text-transform: none;
  letter-spacing: 0;
}

/* Storefront clears the product's floats with overflow: hidden. The grid
   needs no clearing. */
body.single-product div.product {
  overflow: visible;
}

/* Archive head: one left edge for breadcrumb, title, chips and toolbar. */
.storefront-breadcrumb {
  margin: 0;
  padding: 0;
}

.storefront-breadcrumb .col-full {
  padding: 0;
}

body .woocommerce-products-header {
  padding-bottom: 0;
  margin-bottom: 0;
  text-align: left;
}

body .woocommerce-products-header .page-title {
  text-align: left;
}

.woocommerce-products-header + .woocommerce-notices-wrapper:empty {
  display: none;
}

.storefront-sorting .woocommerce-ordering select {
  font-size: var(--step--1);
}

.storefront-sorting .woocommerce-result-count {
  color: var(--text-muted);
}

.woocommerce-pagination .page-numbers li .page-numbers {
  min-width: 2.4rem;
  border-radius: var(--radius-control);
  background: transparent;
}

.woocommerce-pagination .page-numbers li .page-numbers.current {
  background: var(--ink);
  color: var(--paper-bright);
}

body.woocommerce .site-main .woocommerce-products-header {
  padding: clamp(1.2rem, 3vw, 2.4rem) 0 0.4rem;
}

.mf-chips ul {
  margin-bottom: 0.4rem;
}

/* Count on the left, sorting on the right. */
.storefront-sorting {
  justify-content: flex-start;
}

.storefront-sorting .woocommerce-result-count {
  order: -1;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Print designer (madformat-print plugin). The plugin ships structure only;
   this is its look.

   On a print-enabled product the stage takes the gallery column and holds
   everything the shopper works with: the canvas, then one line of status,
   then a row of controls (file button, zoom, rotate, reset, remove). The
   summary keeps price, copy and the buy button. States arrive as
   [data-state] on the stage: empty | loading | ready | dpi_warning | error.
   ------------------------------------------------------------------------ */

.mf-print-gallery .mf-print__stage {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--radius-card) * 1.25);
  background: var(--paper);
}

/* The view switch sits at the top of the card, above the picture it changes.
   Segmented rather than two separate buttons: these are two ways of looking at
   one thing, not two actions, and a shopper should be able to see at a glance
   which one they are in. The plugin only gives it structure; the shape and the
   colour are the theme's. */
.mf-print-gallery .mf-print__views {
  padding: 0.7rem 0.7rem 0;
  gap: 0.3rem;
}

/* Both states are written here, not only the pressed one. The theme styles
   buttons dark by default, so a view button that says nothing about its
   resting state inherits that and the switch reads as two active tabs — which
   is exactly how it looked the one time the plugin's stylesheet arrived stale. */
.mf-print-gallery .mf-print__views button {
  border-radius: calc(var(--radius-control) * 0.9);
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--text);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: none;
  letter-spacing: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mf-print-gallery .mf-print__views button[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 600;
}

.mf-print-gallery .mf-print__views button + button {
  border-left: 1px solid var(--rule);
}

.mf-print-gallery .mf-print__views button:hover[aria-pressed='false'] {
  background: var(--paper-bright, #fafafa);
  border-color: var(--ink);
}

/* The canvas sizes itself from the mockup; width only, height follows, so
   the print area stays where the admin drew it. */
.mf-print-gallery .mf-print__canvas {
  display: block;
  width: 100%;
  height: auto;
}

.mf-print__stage[data-state='loading'] .mf-print__canvas {
  animation: mf-pulse 1.2s ease-in-out infinite;
}

@keyframes mf-pulse {
  50% { opacity: 0.6; }
}

.mf-print__stage .mf-print__status {
  margin: 0;
  padding: 0.9rem 1.2rem 0;
  font-size: var(--step--1);
  color: var(--text-muted);
  opacity: 1; /* designer.css dims it to 0.75, which takes the muted colour to 3.4:1 */
}

.mf-print__stage[data-state='dpi_warning'] .mf-print__status,
.mf-print__stage[data-state='error'] .mf-print__status {
  color: var(--signal);
  font-weight: 600;
}

.mf-print__stage .mf-print__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0.8rem 1.2rem 1.2rem;
}

.mf-print__stage .mf-print__file span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.6em;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--step--1);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.mf-print__stage .mf-print__file:hover span {
  background: var(--graphite);
}

.mf-print__stage .mf-print__file input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Once an image is in, choosing another is secondary to buying. */
.mf-print__stage[data-state='ready'] .mf-print__file span,
.mf-print__stage[data-state='dpi_warning'] .mf-print__file span {
  background: #fff;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--border-control);
}

.mf-print__stage[data-state='ready'] .mf-print__file:hover span,
.mf-print__stage[data-state='dpi_warning'] .mf-print__file:hover span {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.mf-print__stage .mf-print__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mf-print__stage .mf-print__tools button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 1em;
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.mf-print__stage .mf-print__tools button[data-mf-zoom],
.mf-print__stage .mf-print__tools button[data-mf-rotate] {
  width: 2.75rem;
  padding: 0;
  font-size: 1.1rem;
}

.mf-print__stage .mf-print__tools button:hover {
  border-color: var(--ink);
  background: #fff;
  color: var(--text);
}

.mf-print__stage .mf-print__tools button[data-mf-remove]:hover {
  border-color: var(--signal);
  color: var(--signal);
}

/* Before an image is in: inactive but legible. Storefront fades disabled
   buttons with `opacity: 0.5 !important`, which takes them to 3.3:1. */
.mf-print__stage .mf-print__tools button:disabled {
  opacity: 1 !important;
  color: var(--text-muted);
  border-style: dashed;
  cursor: not-allowed;
}

/* Nothing below the canvas changes size between states. The tools show from
   the start, inactive until there is an image, which also tells the shopper
   what they will be able to do. The inset shows the empty print square
   before the upload ("the square is what prints") and the crop after it, at
   one size per breakpoint. So choosing a file, the upload and its landing
   move nothing: that movement was the "page floats" complaint. */
/* designer.css loads after this file and hides both per state, so this
   carries one more class than its [data-state='…'] rules. */
.mf-print-gallery .mf-print__stage[data-state] .mf-print__tools,
.mf-print-gallery .mf-print__stage[data-state] .mf-print__inset {
  visibility: visible;
}

.mf-print__stage .mf-print__inset {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 1.2rem 1.2rem;
}

.mf-print__stage .mf-print__inset canvas {
  flex: none;
  width: 88px;
  height: 88px;
  box-sizing: border-box;
  border: 1.5px solid var(--border-control);
  border-radius: 4px;
  background-color: #fff;
}

.mf-print__stage[data-state='empty'] .mf-print__inset canvas {
  border-style: dashed;
}

.mf-print__stage .mf-print__inset figcaption {
  max-width: 32ch;
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--text-muted);
  opacity: 1; /* designer.css dims it to 0.7 */
}

@media (max-width: 600px) {
  .mf-print__stage .mf-print__inset {
    margin: 0 0.9rem 0.9rem;
  }

  .mf-print__stage .mf-print__inset canvas {
    width: 72px;
    height: 72px;
  }
}

/* Phones: the same row, wrapping — file button on its own line, tools under. */
@media (max-width: 600px) {
  .mf-print__stage .mf-print__controls {
    padding: 0.7rem 0.9rem 0.9rem;
  }

  .mf-print__stage .mf-print__file {
    flex: 1 1 100%;
  }

  .mf-print__stage .mf-print__file span {
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }

  .mf-print__stage .mf-print__status {
    padding: 0.8rem 0.9rem 0;
  }
}

/* What is left in the summary on a print product: no rule above the row. */
.single-product .summary .mf-print {
  margin: 0;
  padding: 0;
  border: 0;
}

.mf-print__thumb {
  border: 0;
  border-radius: var(--radius-inner);
}

/* Reviews inside the accordion: no second heading, a quiet empty state. */
.mf-accordion__body .woocommerce-Reviews-title {
  display: none;
}

.mf-accordion__body .woocommerce-noreviews,
.mf-accordion__body p.woocommerce-info {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
}

.mf-accordion__body .woocommerce-noreviews::before,
.mf-accordion__body .woocommerce-info::before {
  display: none;
}

.mf-accordion__body #review_form_wrapper {
  padding: 1.2rem;
  border-radius: var(--radius-card);
  background: var(--paper);
}

.mf-accordion__body #review_form_wrapper .comment-reply-title {
  font-weight: 700;
}

/* Storefront adds its own side margins to the column on small screens, on top
   of the gutter. One gutter is enough. */
body .col-full {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .single-product .summary .single_add_to_cart_button {
    font-size: var(--step--1);
    white-space: nowrap;
  }

  .single-product .summary .quantity .qty {
    width: 3.6rem;
  }
}

/* Storefront's icon font is no longer loaded: drop the glyphs it drew, and
   let the breadcrumb's own separator text show instead of its icon. */
.woocommerce-breadcrumb a:first-of-type::before,
.reset_variations::before,
.woocommerce-breadcrumb .breadcrumb-separator::after {
  display: none;
}

.woocommerce-breadcrumb .breadcrumb-separator {
  display: inline;
  margin: 0 0.45em;
  font-size: inherit;
  text-indent: 0;
  color: var(--text-muted);
}

/* A single door (the custom-top teaser) lies on its side instead of filling
   the width with one enormous square. */
@media (min-width: 861px) {
  .mf-doors > .mf-door:only-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mf-doors > .mf-door:only-child .mf-door__media {
    aspect-ratio: 4 / 3;
  }

  .mf-doors > .mf-door:only-child .mf-door__body {
    align-content: center;
    padding: 2.5rem;
  }
}

/* ---------------------------------------------------------------------------
   Cart and checkout (WooCommerce blocks).

   Both are the Cart and Checkout blocks, rendered client-side, so everything
   here is CSS against the blocks' own classes. Montonio registers its payment
   methods and its parcel-locker picker into the Checkout block; the shipping
   step is sized to take that picker, which can be tall.
   ------------------------------------------------------------------------ */

body.storefront-full-width-content.woocommerce-cart .entry-header,
body.storefront-full-width-content.woocommerce-checkout .entry-header {
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  border: 0;
  text-align: left;
}

body.storefront-full-width-content.woocommerce-cart .entry-header .entry-title,
body.storefront-full-width-content.woocommerce-checkout .entry-header .entry-title {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: left;
}

body.woocommerce-cart .hentry,
body.woocommerce-checkout .hentry {
  margin: 0;
  padding: 0;
  border: 0;
}

.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* Items: the image is the product, so it gets room. */
.wc-block-cart-items {
  border-collapse: separate;
}

.wc-block-cart-items__header {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.wc-block-cart-items .wc-block-cart-items__row {
  padding: 1.4rem 0;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
  width: 7.5rem;
  padding-right: 1.4rem;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
  width: 100%;
  border-radius: var(--radius-inner);
  background: var(--paper);
}

.wc-block-components-product-name,
.hentry .entry-content a.wc-block-components-product-name {
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.wc-block-components-product-name:hover {
  color: var(--ink);
}

.wc-block-components-product-metadata {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.wc-block-components-quantity-selector {
  border-radius: var(--radius-control);
  background: #fff;
}

.wc-block-components-quantity-selector::after {
  border-radius: var(--radius-control);
  border-color: var(--rule);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  min-width: 2.4rem;
  background: transparent;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

.wc-block-cart-item__remove-link {
  color: var(--text-muted);
}

.wc-block-cart-item__remove-link:hover {
  color: var(--signal);
}

.wc-block-cart-item__total .wc-block-components-product-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Summary: one rounded card, the button inside it. */
.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  padding: 1.4rem 1.5rem 1.5rem;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--paper);
}

.wc-block-cart__totals-title,
.wc-block-cart .wc-block-cart__totals-title {
  padding: 0 0 0.8rem;
  font-size: 0.78rem;
}

.wc-block-components-totals-wrapper {
  border-color: var(--rule);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: var(--step-1);
  font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-variant-numeric: tabular-nums;
}

a.wc-block-cart__submit-button,
.hentry .entry-content a.wc-block-cart__submit-button,
.wc-block-cart__submit-button.wc-block-components-button,
.wc-block-components-checkout-place-order-button.wc-block-components-button {
  min-height: 3.4rem;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--paper-bright);
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.16s ease;
}

a.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button.wc-block-components-button:hover {
  background: var(--graphite);
  color: var(--paper-bright);
}

.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
  text-decoration: none;
}

.wc-block-components-panel__button,
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  background: transparent;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Shop facts under the button, when the trust plugin has any. */
.mf-facts--cart {
  display: grid;
  gap: 0.8rem;
  margin: 1.2rem 0 0;
}

.mf-facts--cart .mf-facts__item .mf-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.mf-facts--cart .mf-facts__text {
  font-size: var(--step--1);
  line-height: 1.35;
}

/* Empty cart. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  font-size: var(--step-2);
  font-weight: 600;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before {
  display: none;
}

@media (max-width: 700px) {
  table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
    width: 5.5rem;
    padding-right: 1rem;
  }
}

.hentry .entry-content a.wc-block-cart__submit-button:hover {
  color: var(--paper-bright);
}

/* The tables-first empty cart that replaces the block's "New in store". */
.mf-empty-cart {
  padding: clamp(1rem, 3vw, 2rem) 0 0;
}

.mf-empty-cart__lede {
  max-width: 40ch;
  margin: 0 0 1.5rem;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.mf-empty-cart .mf-hero__actions {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

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

.mf-empty-cart .button.mf-button--ghost:hover {
  color: var(--paper-bright);
  background: var(--ink);
  box-shadow: none;
}

/* Small headings stay at normal width; only display type is expanded. */
ul.products li.product .woocommerce-loop-product__title,
body .site-footer h2.mf-footer__title,
.single-product .summary table.variations th.label label,
.mf-kicker,
.mf-eyebrow,
.mf-card__eyebrow {
  font-stretch: 100%;
}

.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block {
  align-self: start;
}

.wc-block-cart .wc-block-components-quantity-selector {
  width: auto;
  min-width: 7.6rem;
}

/* ===========================================================================
   Accessibility pass — contrast, states, focus, targets.

   Checked with an automated WCAG 2.2 AA audit across home, archives, all
   three product types, cart, checkout and search. The rule throughout: a
   state may be quieter, never illegible. Nothing that carries meaning is
   dimmed with opacity, because opacity takes contrast down with it.
   ======================================================================== */

/* Focus: always visible, and light on dark sections, where carmine is 1.8:1. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.mf-announce :focus-visible,
.mf-hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--focus-on-dark);
}

/* Prices: struck-through old prices and Storefront's sticky bar used opacity. */
.price del,
.price del .amount {
  opacity: 1;
  color: var(--text-muted);
}

.price ins {
  text-decoration: none;
  font-weight: 700;
}

.storefront-sticky-add-to-cart__content-price {
  opacity: 1;
  color: var(--text-muted);
}

.required,
abbr.required {
  color: var(--signal);
  text-decoration: none;
  border: 0;
}

/* Smallest text on the site: 12px, not 11. */
ul.products li.product .mf-card__eyebrow {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Unavailable options: readable, marked by a dashed edge and a strike,
   not faded to a ghost. */
.format-scale__button.is-unavailable,
.height-scale__button.is-unavailable {
  opacity: 1;
  color: var(--text-muted);
}

.format-scale__button.is-unavailable .format-scale__label,
.height-scale__button.is-unavailable .height-scale__label {
  text-decoration: line-through;
}

.format-scale__button.is-unavailable .format-scale__swatch {
  border-style: dashed;
  background: transparent;
}

.height-scale__button.is-unavailable .height-scale__top {
  background-color: var(--border-control);
}

.mf-options__button.is-unavailable {
  opacity: 1;
  color: var(--text-muted);
  border-style: dashed;
  background: transparent;
}

/* Add to cart before a choice is made: clearly inactive, still readable, and
   explained by the hint under it rather than a browser alert on click. */
.single-product .summary .single_add_to_cart_button.disabled,
.single-product .summary .single_add_to_cart_button:disabled {
  opacity: 1;
  background: var(--paper);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1.5px var(--border-control);
  cursor: not-allowed;
}

.single-product .summary .single_add_to_cart_button.disabled:hover {
  background: var(--paper);
  color: var(--text-muted);
}

.mf-atc-hint {
  flex: 1 1 100%;
  margin: 0.6rem 0 0;
  font-size: var(--step--1);
  color: var(--text-muted);
}

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

/* Form fields everywhere (reviews, checkout, search): a 3:1 edge on white. */
.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input {
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-inner);
  background-color: #fff;
  box-shadow: none;
  color: var(--text);
}

.comment-form input:focus,
.comment-form textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus {
  border-color: var(--ink);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  color: var(--text-muted);
}

.wc-block-components-quantity-selector::after {
  border-color: var(--border-control);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
  color: var(--text-muted);
  opacity: 1;
}

/* Touch targets: 44px minimum for everything a thumb presses. */
.mf-tool,
.mf-header__toggle {
  width: 2.75rem;
  height: 2.75rem;
}

.mf-options__button,
.woocommerce .mf-options__button {
  min-height: 2.75rem;
}

@media (pointer: coarse) {
  .mf-chips a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .woocommerce-breadcrumb a {
    display: inline-block;
    padding: 0.5rem 0;
  }
}

/* Links inside running text keep an underline; colour alone is not enough. */
.mf-accordion__body a,
.woocommerce-product-details__short-description a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Storefront fades every disabled button with `opacity: 0.5 !important`,
   which takes the label to 2:1. Only !important answers !important; the
   inactive state is carried by the flat paper fill and outline instead. */
body.single-product .summary .single_add_to_cart_button.button.disabled,
body.single-product .summary .single_add_to_cart_button.button:disabled,
body.woocommerce div.product form.cart .button.disabled {
  opacity: 1 !important;
  background: var(--paper);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1.5px var(--border-control);
}

.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled,
.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button[disabled] {
  opacity: 1 !important; /* same Storefront rule as above */
  color: var(--text-muted);
}

.wc-block-components-address-form__address_2-hidden-input,
input.wc-block-components-address-form__address_2-hidden-input {
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-inner);
  background-color: #fff;
}

/* The buy row wraps, so the hint gets its own line under the button. */
.single-product .summary .woocommerce-variation-add-to-cart {
  flex-wrap: wrap;
}

.single-product .summary .woocommerce-variation-add-to-cart .quantity {
  flex: none;
}

/* Notices — "added to cart", info, errors. Storefront prints white text on a
   coloured fill; the theme's lighter fill left that text invisible. One
   pattern for all three: ink on paper, the kind carried by the edge colour
   and an icon, never by colour alone. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  margin: 1.2rem 0;
  padding: 1rem 1.2rem 1rem 1.4rem;
  border: 0;
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-inner);
  background: var(--paper);
  color: var(--text);
  list-style: none;
}

.woocommerce-message { border-left-color: #1f6b43; }  /* 6.4 : 1 on paper */
.woocommerce-error   { border-left-color: var(--signal); }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none;
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
  color: var(--text);
  text-decoration: underline;
}

.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  float: none;
  margin: 0;
  padding: 0.7em 1.4em;
}

.woocommerce-error li {
  margin: 0;
}

/* Gallery zoom: our icon instead of the emoji WordPress no longer swaps. */
.single-product div.product .woocommerce-product-gallery__trigger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0;
  text-indent: 0;
  background: var(--paper-bright);
  box-shadow: var(--lift);
}

.single-product div.product .woocommerce-product-gallery__trigger > * {
  display: none;
}

.single-product div.product .woocommerce-product-gallery__trigger::before {
  content: '';
  position: static;
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.single-product div.product .woocommerce-product-gallery__trigger::after {
  display: none;
}

/* Specification table: no zebra fill, labels on one line. */
.mf-accordion__body table.shop_attributes tr,
.mf-accordion__body table.shop_attributes tr:nth-child(even) td,
.mf-accordion__body table.shop_attributes tr:nth-child(even) th,
.mf-accordion__body table.shop_attributes td,
.mf-accordion__body table.shop_attributes th {
  background: transparent;
}

.mf-accordion__body table.shop_attributes th {
  width: 8.5rem;
  padding-right: 1rem;
  white-space: nowrap;
  color: var(--text-muted);
  font-weight: 600;
}

.mf-accordion__body table.shop_attributes td p {
  margin: 0;
}

body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  border-radius: var(--radius-control);
  background: var(--paper-bright);
}

/* ---------------------------------------------------------------------------
   Mobile buy bar
   ------------------------------------------------------------------------ */

.mf-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  background: rgba(244, 243, 240, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 -8px 24px -12px rgba(18, 20, 22, 0.25);
  animation: mf-rise 0.22s var(--ease);
}

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

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

.mf-buybar__info {
  display: grid;
  min-width: 0;
  flex: 1;
}

.mf-buybar__title {
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mf-buybar__price,
.mf-buybar__price .price {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mf-buybar__price .amount {
  color: var(--text);
  font-weight: 700;
}

.mf-buybar .mf-buybar__button {
  flex: none;
  min-height: 3rem;
  padding: 0.8em 1.5em;
  white-space: nowrap;
}

/* The page scrolls past the bar, never under it. */
html.has-buybar body {
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

/* Anchored and focus scrolls stop above the bar, never under it. */
html.has-buybar {
  scroll-padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 861px) {
  .mf-buybar {
    display: none;
  }
}

/* ===========================================================================
   Mobile pass — from example-dc's measured list at 390 and 768 px.
   ======================================================================== */

/* (1) The height drawing sized itself in rem and pushed 13px past a phone. */
.height-scale--static .height-scale__list {
  gap: clamp(0.8rem, 4vw, 3.5rem);
  max-width: 100%;
}

.height-scale--static .height-scale__figure {
  width: clamp(4.2rem, 20vw, 7rem);
}

.mf-heights__inner > * {
  min-width: 0;
}

/* (3) Tap targets: at least 24px (WCAG 2.5.8) — padding, not bigger type. */
.mf-footer__list a,
.woocommerce-breadcrumb a,
.reset_variations {
  display: inline-block;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.mf-footer__list li {
  margin: 0;
}

.single-product .summary .mf-eyebrow {
  display: inline-block;
  padding: 0.4rem 0;
  margin-bottom: 0.2rem;
}

.comment-form-rating .stars a {
  width: 1.75rem;
  height: 1.75rem;
}

.comment-form input[type='checkbox'] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--ink);
  vertical-align: middle;
}

/* (7) One line of announcement on a phone. */
.mf-announce__short {
  display: none;
}

@media (max-width: 600px) {
  .mf-announce__long {
    display: none;
  }

  .mf-announce__short {
    display: inline;
  }
}

/* (6) The pattern grid becomes a snap rail on a phone: about one and a third
   cards in view, the rest a swipe away, "See all" in the heading. Desktop
   keeps the full grid — there it fits in a screen or two. */
.mf-section__all {
  display: none;
}

@media (max-width: 600px) {
  #patterns .mf-section__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  #patterns .mf-section__aside {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mf-section__all {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
    padding: 0.5rem 0 0.15em;
  }

  #patterns ul.products {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    grid-template-columns: none;
    gap: 0.9rem;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }

  #patterns ul.products::-webkit-scrollbar {
    display: none;
  }

  #patterns ul.products li.product {
    scroll-snap-align: start;
  }

  /* (6) The two category doors sit side by side, as short tiles. */
  .mf-doors {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
  }

  .mf-doors > .mf-door:only-child {
    grid-column: 1 / -1;
  }

  .mf-door__media {
    aspect-ratio: 1;
  }

  .mf-door__body {
    grid-template-columns: 1fr;
    padding: 0.8rem 0.9rem 1rem;
  }

  .mf-door__title {
    font-size: var(--step-1);
  }

  .mf-door__body .mf-icon {
    display: none;
  }
}

/* The "see all" link is an inline-flex row of words plus an arrow, so it has
   no wrapping point: beside a 1fr column on a 320px screen its min-content
   set the page's width and the document scrolled sideways. It gets its own
   row there instead. */
@media (max-width: 420px) {
  #patterns .mf-section__head {
    grid-template-columns: minmax(0, 1fr);
  }

  #patterns .mf-section__all {
    grid-column: 1;
    justify-self: start;
  }
}

/* (8) Product breadcrumb on a phone: just the way back, "‹ Tables". */
@media (max-width: 600px) {
  .single-product .woocommerce-breadcrumb {
    font-size: 0;
  }

  .single-product .woocommerce-breadcrumb a,
  .single-product .woocommerce-breadcrumb .breadcrumb-separator {
    display: none;
  }

  .single-product .woocommerce-breadcrumb a:last-of-type {
    display: inline-block;
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
  }

  .single-product .woocommerce-breadcrumb a:last-of-type::before {
    content: '‹ ';
  }
}

/* (12) Tablet: three cards a row, not two. */
@media (min-width: 601px) and (max-width: 1023px) {
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The Cart block renders client-side; hold its space while the Store API
   answers, so the footer does not jump up and back down. */
.wp-block-woocommerce-cart.is-loading,
.wp-block-woocommerce-checkout.is-loading {
  min-height: 60vh;
}


/* ---------------------------------------------------------------------------
   Language switcher — EN · LV · RU, text in the header utility row.
   ------------------------------------------------------------------------ */

.mf-lang {
  display: flex;
  align-items: center;
}

.mf-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.75rem;
  padding: 0 0.3rem;
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  color: var(--text-muted);
}

.mf-lang a:hover {
  color: var(--text);
}

.mf-lang a[aria-current='true'] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.mf-lang--header {
  margin-right: 0.4rem;
  padding-right: 0.6rem;
  border-right: 1px solid var(--rule);
}

.mf-lang--drawer {
  gap: 0.4rem;
  margin-top: 1rem;
}

.mf-lang--drawer a {
  min-width: 2.75rem;
  font-size: var(--step-0);
}

/* On phones the header keeps logo, search and bag; languages move to the menu. */
@media (max-width: 860px) {
  .mf-lang--header {
    display: none;
  }
}

/* ===========================================================================
   Voice — restrained and elegant, for a business buyer and a child's room
   alike. Monochrome chrome so the patterns are the colour; sentence case;
   more air; one warm accent (oak) used only as decoration.
   ======================================================================== */

/* Pills are for chips, counts and round icon buttons; everything else is 4px. */
.mf-chips a,
.mf-toolbar__active a,
.mf-cart__count,
.mf-toolbar__badge,
.mf-tool,
.mf-header__toggle,
.mf-door__body .mf-icon {
  border-radius: var(--radius-pill);
}

/* Section rhythm. */
.mf-section {
  padding-top: clamp(2.5rem, 5.5vw, 4.5rem);
}

.mf-section__head {
  margin-bottom: clamp(1.2rem, 2.2vw, 1.9rem);
}

/* Headings: normal width, 600, tight but not squeezed. */
.mf-display,
.mf-heading,
.woocommerce-products-header__title.page-title,
body.storefront-full-width-content.woocommerce-cart .entry-header .entry-title,
body.storefront-full-width-content.woocommerce-checkout .entry-header .entry-title {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.mf-display {
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);
  max-width: 14ch;
}

/* Labels above headings only where they add something: the hero's product
   line and the product page's category link, both quiet. */
.mf-kicker,
.mf-eyebrow {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
}

ul.products li.product .mf-card__eyebrow {
  display: none;
}

/* Header: sentence-case navigation at reading size. */
.mf-nav a {
  font-size: 0.95rem;
  font-weight: 500;
}

.mf-logo,
.mf-logo:hover {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The brand: the merchant's shapes, as tall as the wordmark's line, then
   the name. In em, so both scale together at every width. */
.mf-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.mf-logo__mark {
  display: block;
  flex: none;
  width: auto;
  height: 1.3em;
}

/* A phone centres the brand between the menu and the bag: a smaller,
   less tracked wordmark keeps clear of both. */
@media (max-width: 860px) {
  .mf-header .mf-logo,
  .mf-header .mf-logo:hover {
    gap: 0.45em;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
  }

  .mf-header .mf-logo__mark {
    height: 1.25em;
  }
}

/* Narrower still, the shapes carry the brand; the name stays as the link's
   text for screen readers. */
@media (max-width: 359px) {
  .mf-header .mf-logo__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.mf-announce {
  background: var(--graphite);
  font-weight: 400;
}

.mf-cart__count {
  color: var(--on-dark);
}

/* Hero: on paper, not a black band. The photograph carries the colour. */
.mf-hero {
  background: var(--paper);
  color: var(--text);
}

.mf-hero .mf-display {
  color: var(--text);
}

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

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

.mf-hero__price {
  font-weight: 500;
  color: var(--text);
}

.mf-hero__stage {
  border-radius: var(--radius-card);
  box-shadow: none;
}

.button.mf-button--light,
.woocommerce a.button.mf-button--light {
  background: var(--ink);
  color: var(--on-dark);
}

/* Buttons: 4px, sentence case, a calm weight. */
button,
.button,
.woocommerce a.button,
.woocommerce button.button {
  font-weight: 600;
}

/* Hover on text: an oak underline, not a colour change. */
ul.products li.product > a:hover .woocommerce-loop-product__title,
.mf-accordion__item summary:hover,
.wc-block-components-product-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--oak);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.mf-link {
  border-bottom-color: var(--oak);
}

.mf-link:hover {
  color: var(--text);
}

/* Cards: title in a calm weight; the image is the product. */
ul.products li.product .woocommerce-loop-product__title {
  font-weight: 500;
}

ul.products li.product > a:hover .mf-card__media {
  box-shadow: none;
  transform: none;
}

/* Footer: graphite, not black. */
.site-footer {
  background: var(--graphite);
}

.mf-logo--footer,
body .site-footer a.mf-logo--footer:not(.button):not(.components-button) {
  font-size: var(--step-1);
}

/* Facts and doors: quieter icon treatment. */
.mf-door__body .mf-icon {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--border-control);
}

.mf-door:hover .mf-icon {
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: none;
}

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

/* Product page summary title: one step down from the display size. */
.single-product .summary .product_title {
  font-size: var(--step-2);
  font-weight: 600;
}

/* The wordmark is the one place for capitals: set wide, like a label sewn
   into a garment, not shouted. */
.mf-logo,
.mf-logo:hover {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body .site-footer a.mf-logo--footer:not(.button):not(.components-button) {
  font-size: 1.2rem;
}

.mf-section--facts {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* ---------------------------------------------------------------------------
   Mini-cart (WooCommerce block): the bag in the header and its drawer.
   ------------------------------------------------------------------------ */

.mf-minicart .wc-block-mini-cart__button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
}

.mf-minicart .wc-block-mini-cart__button:hover {
  background: var(--paper);
}

.mf-minicart .wc-block-mini-cart__icon {
  width: 1.3rem;
  height: 1.3rem;
}

.mf-minicart .wc-block-mini-cart__badge {
  top: 0.15rem;
  right: 0.1rem;
  left: auto;
  min-width: 1.15rem;
  height: 1.15rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 0.7rem;
  font-weight: 600;
  transform: none;
}

/* The drawer. */
.wc-block-mini-cart__drawer .components-modal__content,
.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part {
  background: var(--paper-bright);
  color: var(--text);
  font-family: 'Golos Text', system-ui, sans-serif;
}

.wc-block-mini-cart__title {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wc-block-mini-cart__items .wc-block-cart-items__row {
  padding: 1rem 0;
}

.wc-block-mini-cart__items .wc-block-cart-item__image img {
  border-radius: var(--radius-inner);
  background: var(--paper);
}

.wc-block-mini-cart__footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-bright);
}

.wc-block-mini-cart__footer .wc-block-components-button,
.wc-block-mini-cart__footer-actions a {
  min-height: 3rem;
  border-radius: var(--radius-control);
  font-weight: 600;
  text-decoration: none;
}

.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout {
  background: var(--ink);
  color: var(--on-dark);
  border: 0;
}

.wc-block-mini-cart__footer-checkout:hover {
  background: var(--graphite);
  color: var(--on-dark);
}

.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--border-control);
  border: 0;
}

/* Footer contact column. */
.mf-footer__address {
  display: grid;
  gap: 0.45rem;
  font-style: normal;
  color: var(--on-dark-muted);
}

/* The big cart's wide image column must not leak into the drawer. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
  width: 5rem;
  padding-right: 1rem;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  margin-top: 1.2rem;
  font-size: var(--step-1);
  font-weight: 600;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name {
  font-size: var(--step--1);
  font-weight: 600;
}

/* Rooms: the same tables for a living room and a child's room, side by side. */
.mf-rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}

.mf-room {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--text);
  text-decoration: none;
}

.mf-room:hover {
  color: var(--text);
}

.mf-room__tables {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.mf-room__tables img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.mf-room:hover .mf-room__tables img {
  transform: scale(1.04);
}

.mf-room__body {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: 1.4rem 1.5rem 1.6rem;
}

.mf-room__title {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.mf-room__line {
  max-width: 40ch;
  color: var(--text-muted);
}

.mf-room .mf-link {
  margin-top: 0.4rem;
}

@media (max-width: 700px) {
  .mf-rooms {
    grid-template-columns: 1fr;
  }
}

/* The drawer focuses its close button on open; give it the theme's ring,
   not the components library's blue box. */
.wc-block-components-drawer__close:focus,
.wc-block-mini-cart__drawer button:focus {
  outline: none;
  box-shadow: none;
}

.wc-block-components-drawer__close:focus-visible,
.wc-block-mini-cart__drawer button:focus-visible,
.wc-block-mini-cart__drawer a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: none;
}

/* The Mini-Cart block's own basket icon draws its body as a stroke that is
   lost when the block re-renders its button after the drawer opens, leaving
   the badge and two wheel dots floating (our user's crop). The button shows
   the theme's bag instead, drawn as a mask in currentColor, so there is
   nothing inside it to lose; the count sits on the bag's corner in ink. */
.mf-minicart .wc-block-mini-cart__icon {
  display: none;
}

.mf-minicart .wc-block-mini-cart__quantity-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
}

.mf-minicart .wc-block-mini-cart__quantity-badge::before {
  content: '';
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mf-minicart .wc-block-mini-cart__badge {
  position: absolute;
  top: -0.55rem;
  right: -0.8rem;
  left: auto;
  min-width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  padding: 0 0.25rem;
  font-size: 0.68rem;
  line-height: 1.1rem;
  /* The block writes its badge colours as inline styles from its own
     settings; only !important answers an inline style. */
  background-color: var(--ink) !important;
  color: var(--on-dark) !important;
}

.mf-minicart .wc-block-mini-cart__button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.mf-minicart .wc-block-mini-cart__button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.single-product .summary .mf-sku {
  margin: -0.3rem 0 1rem;
  font-size: var(--step--1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Home slider. Every slide sits in the same grid cell, so the frame takes the
   tallest slide's height from the first paint and never jumps. Slides move
   sideways: the next one comes in from the right as the current one leaves
   to the left (the other way going back). The track clips them at its edge.
   ------------------------------------------------------------------------ */

.mf-slider {
  position: relative;
  background: var(--paper);
}

.mf-slider__track {
  display: grid;
  max-width: var(--page);
  margin: 0 auto;
  /* The opener is sized by what it holds — the product shot — not by the
     viewport. Trimming its own frame is what shortens the way to the range;
     the picture itself is untouched. */
  padding: clamp(1.5rem, 3.5vw, 3.25rem) var(--gutter) clamp(2.25rem, 4vw, 3.5rem);
  box-sizing: border-box;
  overflow: hidden;
}

.mf-slide {
  --mf-slide-off: calc(100% + var(--gutter));
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  transform: translateX(var(--mf-slide-off));
  visibility: hidden;
  transition: transform 0.6s var(--ease), visibility 0s linear 0.6s;
}

/* Waiting, or leaving, on the left. */
.mf-slide.is-before {
  transform: translateX(calc(-1 * var(--mf-slide-off)));
}

.mf-slide.is-active {
  transform: none;
  visibility: visible;
  transition: transform 0.6s var(--ease), visibility 0s;
}

/* The one that is leaving stays visible until it is out of the frame. */
.mf-slide.is-leaving {
  visibility: visible;
  transition: transform 0.6s var(--ease), visibility 0s linear 0.6s;
}

/* Put in place for the next move, without being seen to move there. */
.mf-slide.is-placing {
  transition: none;
}

.mf-slide__media {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  background: #cfd0d0;
}

.mf-slide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 7s linear;
}

/* The slow push-in, on the image only (transform, not layout). */
.mf-slide.is-active .mf-slide__media img {
  transform: scale(1);
}

.mf-slide__copy .mf-display {
  margin-bottom: 1rem;
}

/* Copy rises a little as its slide arrives. */
.mf-slide__copy > * {
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.8s var(--ease) 0.15s, opacity 0.8s var(--ease) 0.15s;
}

.mf-slide.is-active .mf-slide__copy > * {
  transform: none;
  opacity: 1;
}

.mf-slider__controls {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transform: translateX(-50%);
}

.mf-slider__arrow,
.mf-slider__pause {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--paper-bright);
  color: var(--text);
}

.mf-slider__arrow:hover,
.mf-slider__pause:hover {
  border-color: var(--ink);
  background: var(--paper-bright);
  color: var(--text);
}

.mf-slider__arrow[data-mf-slider-prev] .mf-icon {
  transform: scaleX(-1);
}

.mf-slider__dots {
  display: flex;
  gap: 0.2rem;
}

.mf-slider__dot {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.mf-slider__dot::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--border-control);
  transition: width 0.3s var(--ease), background-color 0.3s ease;
}

.mf-slider__dot[aria-current='true']::before {
  width: 1.4rem;
  background: var(--ink);
}

.mf-slider__dot:hover {
  background: transparent;
}

/* Pause: two bars; play: a triangle. */
.mf-slider__pause-icon {
  width: 0.7rem;
  height: 0.8rem;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
  box-sizing: border-box;
}

.mf-slider__pause.is-paused .mf-slider__pause-icon {
  width: 0;
  height: 0;
  border-top: 0.42rem solid transparent;
  border-bottom: 0.42rem solid transparent;
  border-left: 0.7rem solid currentColor;
  border-right: 0;
  margin-left: 0.2rem;
}

@media (max-width: 860px) {
  .mf-slide {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .mf-slide__media {
    order: -1;
    width: 100%;
    max-width: 30rem;
    justify-self: center;
    aspect-ratio: 4 / 3;
  }

  /* Room for the controls, which sit 1.2rem from the bottom and are 2.75rem
     tall — 5rem left a clear band under them. */
  .mf-slider__track {
    padding-bottom: 4.25rem;
  }
}

/* Reduced motion: no travel and no push-in, but a short fade rather than a
   cut, and the slider does not rotate by itself (slider.js). */
@media (prefers-reduced-motion: reduce) {
  .mf-slide,
  .mf-slide.is-before {
    transform: none;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .mf-slide.is-active {
    transform: none;
    opacity: 1;
    transition: opacity 0.25s ease, visibility 0s;
  }

  .mf-slide.is-leaving {
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  /* style.css cuts every transition to nothing under reduced motion; a fade
     moves nothing, and without it the change is the hard cut this avoids. */
  .mf-slide,
  .mf-slide.is-before,
  .mf-slide.is-active,
  .mf-slide.is-leaving {
    transition-duration: 0.25s, 0s !important;
  }

  .mf-slide__media img,
  .mf-slide__copy > * {
    transition: none;
  }

  .mf-slide__media img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Mega-menu. A panel under the whole header, opened from a category door:
   text columns of the category's facets, one row of swatches, one picture.
   Quieter than the page it covers — no rules but the one hairline at its
   foot, no caps, no accent colour on anything but the link underline.
   ------------------------------------------------------------------------ */

.mf-nav > li.has-mega {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.mf-nav__more {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
}

.mf-nav__more:hover,
.mf-nav__more[aria-expanded='true'] {
  background: transparent;
  color: var(--ink);
}

.mf-nav__more .mf-icon {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 0.2s var(--ease);
}

.mf-nav__more[aria-expanded='true'] .mf-icon {
  transform: rotate(180deg);
}

.mf-nav > li.is-open > a::after {
  transform: scaleX(1);
}

.mf-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-bright);
  box-shadow: 0 24px 48px -28px rgba(18, 20, 22, 0.28);
}

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

.mf-mega:not([hidden]) {
  animation: mf-mega-in 0.18s var(--ease);
}

@keyframes mf-mega-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.mf-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  gap: clamp(2rem, 4vw, 4rem);
  max-width: var(--page);
  margin: 0 auto;
  padding: 2rem var(--gutter) 2.25rem;
  box-sizing: border-box;
}

.mf-mega__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  align-content: start;
  gap: 1.75rem clamp(1.5rem, 3vw, 3rem);
}

/* A long list (eleven subjects) runs in two columns rather than one tall one. */
.mf-mega__group.is-long {
  grid-column: span 2;
}

.mf-mega__group.is-long .mf-mega__list {
  columns: 2;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}

.mf-mega__title {
  margin: 0 0 0.6rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
}

.mf-mega__list,
.mf-mega__swatches {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-mega__list li {
  margin: 0;
  break-inside: avoid;
}

.mf-mega__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
}

.mf-mega__list a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--oak);
  text-underline-offset: 0.2em;
}

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

.mf-mega__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, 2rem);
  gap: 0.35rem 0.45rem;
}

.mf-mega__swatches li {
  margin: 0;
}

.mf-mega__swatches a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

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

.mf-mega__swatches a:hover .mf-mega__dot {
  transform: scale(1.1);
}

.mf-mega__all {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: var(--step--1);
}

.mf-mega__tile {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}

.mf-mega__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper);
}

.mf-mega__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.mf-mega__tile:hover .mf-mega__media img {
  transform: scale(1.03);
}

.mf-mega__tile-title {
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.25;
}

.mf-mega__tile:hover .mf-mega__tile-title {
  text-decoration: underline;
  text-decoration-color: var(--oak);
  text-underline-offset: 0.2em;
}

@media (max-width: 1100px) {
  .mf-mega__inner {
    grid-template-columns: minmax(0, 1fr) 13rem;
  }

  .mf-mega__group.is-long {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-mega:not([hidden]) {
    animation: none;
  }

  .mf-nav__more .mf-icon,
  .mf-mega__dot,
  .mf-mega__media img {
    transition: none;
  }

  .mf-mega__tile:hover .mf-mega__media img,
  .mf-mega__swatches a:hover .mf-mega__dot {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Not found: a sentence, the search, the three categories.
   ------------------------------------------------------------------------ */

.mf-notfound {
  padding: clamp(2rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
}

.mf-notfound__head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.mf-notfound__title {
  margin: 0 0 1rem;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.mf-notfound__line {
  margin: 0 0 1.6rem;
  font-size: var(--step-0);
  color: var(--text-muted);
}

.mf-notfound__search {
  display: flex;
  gap: 0.6rem;
}

.mf-notfound__search input[type='search'] {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background: #fff;
  box-shadow: none;
}

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

/* On a phone the doors pair up; tables, which lead, take the full row. */
@media (max-width: 860px) {
  .mf-doors--three > .mf-door:first-child {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
   Social row: monochrome outline icons, the network's name for screen
   readers. Quiet on the page, lighter still in the dark footer.
   ------------------------------------------------------------------------ */

.mf-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-social li {
  margin: 0;
}

.mf-social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border-control);
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.mf-social .mf-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.mf-social--footer {
  margin-top: 1.4rem;
}

body .site-footer .mf-social a {
  border-color: var(--on-dark-muted);
  color: var(--on-dark);
}

body .site-footer .mf-social a:hover {
  border-color: var(--on-dark);
  background: var(--on-dark);
  color: var(--graphite);
}

body .site-footer .mf-social a:focus-visible {
  outline: 2px solid var(--focus-on-dark);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   About: the words, what the shop holds, then contact and the terms of
   buying side by side, and the two policies at the foot.
   ------------------------------------------------------------------------ */

.mf-about {
  /* The page ends short of one screen, so it used to leave a 340px band of
     nothing above the footer. Less padding under it is honest: the fix for
     the rest is more to say, not more air. */
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0 clamp(2rem, 4vw, 3rem);
}

.mf-about__head {
  max-width: 44rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* A page title, on the same rung as every other page title. At step-4 it ran
   to 90px over a page whose next largest text was 24px. */
.mf-about__title {
  margin: 0 0 1rem;
  font-size: var(--type-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.mf-about__intro {
  font-size: var(--type-lede);
  line-height: 1.5;
  color: var(--text);
}

.mf-about__intro p {
  margin: 0 0 1rem;
}

.mf-about__range {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.mf-about__range li {
  margin: 0;
}

.mf-about__range a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

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

.mf-about__count {
  font-variant-numeric: tabular-nums;
}

.mf-about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}

.mf-about__heading {
  /* The footer links here; the sticky header would otherwise cover it. */
  scroll-margin-top: 7rem;
  margin: 0 0 1.4rem;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.mf-about__details {
  display: grid;
  gap: 1.2rem;
  margin: 0 0 1.8rem;
}

.mf-about__details > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  align-items: baseline;
}

.mf-about__details dt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
}

.mf-about__details dt .mf-icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.mf-about__details dd {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  font-size: var(--step-0);
}

.mf-about__details address {
  margin: 0;
  font-style: normal;
}

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

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

@media (max-width: 480px) {
  .mf-about__details > div {
    grid-template-columns: 1fr;
  }
}

.mf-facts--about {
  display: grid;
  gap: 1.1rem;
}

.mf-facts--about .mf-facts__text {
  display: grid;
  gap: 0.15rem;
}

.mf-facts--about .mf-facts__text span {
  color: var(--text-muted);
}

.mf-about__legal {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

.mf-about__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-about__legal li {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Reading layout for plain pages (privacy policy, terms): a measure under
   70 characters, headings with room above them, lists that breathe.
   ------------------------------------------------------------------------ */

.mf-reading .site-main {
  padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 6rem);
}

body.mf-reading .hentry {
  max-width: 68ch;
  margin: 0;
}

body.mf-reading .hentry .entry-header {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  padding: 0;
  border: 0;
}

body.mf-reading .hentry .entry-title {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.mf-reading .entry-content {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
}

.mf-reading .entry-content h2 {
  margin: 2.6em 0 0.7em;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.mf-reading .entry-content h3 {
  margin: 2em 0 0.5em;
  font-size: var(--step-0);
  font-weight: 700;
}

.mf-reading .entry-content > :first-child {
  margin-top: 0;
}

.mf-reading .entry-content p {
  margin: 0 0 1.1em;
}

.mf-reading .entry-content ul,
.mf-reading .entry-content ol {
  margin: 0 0 1.3em;
  padding-left: 1.3em;
}

.mf-reading .entry-content li {
  margin: 0 0 0.45em;
  padding-left: 0.2em;
}

.mf-reading .entry-content li::marker {
  color: var(--text-muted);
}

.mf-reading .entry-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--oak);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.mf-reading .entry-content strong {
  font-weight: 650;
}

/* Compact right column (tables category, regular tables only) */
body.single-product.mf-cat-tables:not(.mf-pdp-bdesk) div.product .summary > .price {
  margin-bottom: 1rem;
}

body.single-product.mf-cat-tables:not(.mf-pdp-bdesk) div.product .summary .woocommerce-product-details__short-description {
  margin-bottom: 1rem;
}

body.single-product.mf-cat-tables:not(.mf-pdp-bdesk) div.product .summary form.cart {
  margin-bottom: 1rem;
}

body.single-product.mf-cat-tables:not(.mf-pdp-bdesk) div.product .summary > .mf-facts {
  margin-block: 1.1rem;
}