/* ---------------------------------------------------------------------------
   The wall-panel product page.

   What is here: the article number, the running total under the pickers, the
   sample button, and the card shapes a 2.4:1 sheet needs.

   What was here and is not: a stage that drew the design onto photographs of
   rooms, its full-screen viewer and its try-it-on-your-own-wall block, removed
   on 2026-10-05. The only room photographs in the project already have a panel
   on the wall and furniture in front of it, so the overlay covered a
   television and a bath. The rooms are coming separately.
   ------------------------------------------------------------------------ */

.mf-particle {
  margin: -0.2rem 0 0.9rem;
  font-size: var(--type-meta);
  color: var(--text-muted);
}

.mf-pother {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  font-size: var(--type-meta);
  color: var(--text-muted);
}

.mf-pother__ask {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* The sum has a fixed line box so the number can change without the button
   under it moving — a price that nudges the page as it updates reads as a
   mistake, not an update. */
.mf-ptotal {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-card);
  background: var(--paper);
}

.mf-ptotal__chosen {
  margin: 0 0 0.2rem;
  font-size: var(--type-meta);
  color: var(--text-muted);
  min-height: 1.4em;
}

.mf-ptotal__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  min-height: 1.9em;
}

.mf-ptotal__sum {
  font-size: var(--step-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.mf-ptotal__sum del {
  margin-inline-end: 0.35rem;
  font-size: var(--type-meta);
  font-weight: 400;
  color: var(--text-muted);
}

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

.woocommerce div.product form.cart .button.mf-psample,
.button.mf-psample {
  display: block;
  width: 100%;
  margin: 0.6rem 0 0;
  padding: 0.8rem 1.2rem;
  min-height: 2.75rem;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  color: var(--ink);
  font-size: var(--type-control);
  font-weight: 600;
  cursor: pointer;
}

.woocommerce div.product form.cart .button.mf-psample:hover,
.button.mf-psample:hover {
  background: var(--paper);
}

/* One price on the page, in the box that explains what it is for. WooCommerce
   prints its own above the button and the theme prints the range at the top;
   three numbers for one thing is how a shopper ends up unsure which is real. */
body.mf-cat-wall_panel_mad .woocommerce-variation-price,
body.mf-cat-wall_panel_mad a.reset_variations,
body.mf-cat-wall_panel_mad .reset_variations {
  display: none !important;
}

/* "Art. 1976" is the number the merchant's own system uses; "MAD 015" is the
   one on the sheet and in the address bar. Both on screen is two article
   numbers for one panel, so the internal one steps back — it is still on the
   product in WooCommerce, which is where an order looks for it. */
body.mf-cat-wall_panel_mad.single-product .mf-sku {
  display: none;
}

/* A panel's design is a continuous pattern on a 2.4:1 sheet. In the square
   frame the rest of the shop uses it was letterboxed top and bottom; here the
   card frame takes a shape the sheet fits and the design fills it. */
body.mf-cat-wall_panel_mad.single-product ul.products li.product .mf-card__media {
  aspect-ratio: 16 / 9;
}

body.mf-cat-wall_panel_mad.single-product ul.products li.product .mf-card__media img {
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   One rhythm for the right column.

   Related things sit 6-12px apart (the name, the number, the price; the
   label and its buttons), separate things 20-28px (the top block, the
   configurator, the buying zone, the information). It had drifted to 40px
   between the price and the first picker and 45px above the delivery
   facts, and the column read as a list of unrelated boxes. These are the
   panel pages only: the file loads only there.
   ------------------------------------------------------------------------ */

/* The top block: the category, the name, the number, the price. */
body.single-product.mf-cat-wall_panel_mad div.product .summary .mf-eyebrow {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

body.single-product.mf-cat-wall_panel_mad div.product .summary .product_title {
  margin: 0 0 0.2rem;
  line-height: 1.1;
}

body.single-product.mf-cat-wall_panel_mad div.product .summary .mf-particle {
  margin: 0 0 0.4rem;
}

body.single-product.mf-cat-wall_panel_mad div.product .summary > .price {
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

/* The configurator: the finish and the size as one block. */
body.single-product.mf-cat-wall_panel_mad div.product .summary form.variations_form {
  margin: 0;
  padding-top: 0;
}

body.single-product.mf-cat-wall_panel_mad div.product .summary table.variations tr {
  padding-block: 0.55rem;
}

body.single-product.mf-cat-wall_panel_mad div.product .summary table.variations th {
  margin-bottom: 0.3rem;
}

body.single-product.mf-cat-wall_panel_mad .mf-pother {
  margin: 0.35rem 0 0;
}

/* The buying zone: the chosen configuration, its price, the quantity and the
   button, then the sample, close together. */
.mf-ptotal {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.9rem;
}

.mf-ptotal__chosen {
  margin: 0;
  min-height: 1.25em;
}

.mf-ptotal__line {
  min-height: 1.5em;
}

body.single-product.mf-cat-wall_panel_mad div.product .summary .single_variation_wrap {
  padding-top: 0.5rem;
}

.woocommerce div.product form.cart .button.mf-psample,
.button.mf-psample {
  margin: 0.4rem 0 0;
  padding-block: 0.65rem;
  min-height: 2.5rem;
}

/* The information below the zone, a section apart. WooCommerce leaves 1.6em
   under the cart form; it is the facts' own margin that sets the distance. */
body.single-product.mf-cat-wall_panel_mad div.product .summary form.cart {
  margin-bottom: 0;
}

body.single-product.mf-cat-wall_panel_mad div.product .summary .mf-facts--summary {
  margin: 1.1rem 0 1rem;
  padding: 0.85rem 1rem;
}

/* ---------------------------------------------------------------------------
   Unified wall-panel card (matches design-references/Wall-card.png): no
   "finish · size" line over the price, a roomier strip, Description and
   Details side by side, Reviews as a collapsed row.
   ------------------------------------------------------------------------ */

body.mf-pdp-panel .mf-ptotal__chosen {
  display: none;
}

body.mf-pdp-panel .mf-ptotal__sum {
  font-size: var(--step-2, 1.75rem);
}

body.mf-pdp-panel .mf-facts--strip {
  padding-block: 0.9rem;
  align-items: start;
}

body.mf-pdp-panel .mf-facts--strip .mf-icon {
  width: 1.5rem;
  height: 1.5rem;
}

body.mf-pdp-panel .mf-pdp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 1.75rem;
}

body.mf-pdp-panel .mf-pdp-cols > .mf-pdp-details {
  margin: 0;
  border: 0;
}

body.mf-pdp-panel .mf-pdp-cols > .mf-pdp-details:only-child {
  grid-column: 1 / -1;
}

body.mf-pdp-panel .mf-pdp-cols > .mf-pdp-details + .mf-pdp-details {
  padding-left: 2.5rem;
  border-left: 1px solid var(--rule);
}

body.mf-pdp-panel .mf-pdp-cols > .mf-pdp-details:first-child:not(:only-child) {
  padding-right: 2.5rem;
}

body.mf-pdp-panel .mf-pdp-cols .mf-pdp-details__title {
  padding: 0 0 0.6rem;
  border: 0;
  font-size: var(--step-1);
}

body.mf-pdp-panel .mf-pdp-cols .mf-pdp-details__prose {
  padding: 0;
}

body.mf-pdp-panel .mf-pdp-cols .mf-pdp-details__row {
  grid-template-columns: minmax(6rem, 30%) minmax(0, 1fr);
  padding: 0.4rem 0;
  font-size: var(--type-meta);
}

body.mf-pdp-panel .mf-pdp-cols .mf-pdp-details__row:first-child {
  border-top: 1px solid var(--rule);
}

body.mf-pdp-panel .mf-pdp-cols .mf-pdp-details__row:last-child {
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 720px) {
  body.mf-pdp-panel .mf-pdp-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  body.mf-pdp-panel .mf-pdp-cols > .mf-pdp-details + .mf-pdp-details,
  body.mf-pdp-panel .mf-pdp-cols > .mf-pdp-details:first-child:not(:only-child) {
    padding: 0;
    border-left: 0;
  }

  body.mf-pdp-panel .mf-pdp-cols .mf-pdp-details__row {
    grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
  }
}

/* Reviews: a collapsed row, the form opens on click. */
body.mf-pdp-panel .mf-pdp-acc {
  margin-top: 1.75rem;
  border-bottom: 1px solid var(--rule);
}

body.mf-pdp-panel .mf-pdp-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  border-bottom: 0;
}

body.mf-pdp-panel .mf-pdp-acc > summary::-webkit-details-marker {
  display: none;
}

body.mf-pdp-panel .mf-pdp-acc > summary::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.3rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

body.mf-pdp-panel .mf-pdp-acc[open] > summary::after {
  transform: rotate(-135deg);
}

body.mf-pdp-panel .mf-pdp-cols .mf-pdp-details__title {
  margin-top: 0;
}

body.mf-pdp-panel .mf-pdp-cols > .mf-pdp-details {
  align-self: start;
}

/* Compact right column: tighter vertical rhythm between the configurator
   blocks. Panel-only; buttons, chips and the quantity keep their size. */
body.single-product.mf-pdp-panel div.product .summary .mf-particle {
  margin-bottom: 0.25rem;
}

body.single-product.mf-pdp-panel div.product .summary table.variations tr {
  padding-block: 0.4rem;
}

body.single-product.mf-pdp-panel div.product .summary table.variations th.label {
  margin-bottom: 0.1rem;
}

body.single-product.mf-pdp-panel div.product .summary table.variations td.value {
  padding-bottom: 0.35rem;
}

body.single-product.mf-pdp-panel div.product .summary table.variations tr + tr td.value {
  padding-top: 0.5rem;
}

body.single-product.mf-pdp-panel div.product .summary .mf-pother {
  margin-top: 0.3rem;
}

body.single-product.mf-pdp-panel div.product .summary .mf-ptotal {
  margin-top: 0.6rem;
}

body.single-product.mf-pdp-panel div.product .summary .mf-ptotal .price {
  margin-bottom: 0;
}

body.single-product.mf-pdp-panel div.product .summary .single_variation_wrap {
  padding-top: 0.25rem;
}

body.single-product.mf-pdp-panel div.product .summary .woocommerce-variation-add-to-cart {
  padding-top: 0.25rem;
}

body.single-product.mf-pdp-panel.mf-pdp-panel div.product .summary form.cart .button.mf-psample {
  margin-top: 0.1rem;
}

body.single-product.mf-pdp-panel div.product .summary .mf-ptotal__line {
  min-height: 0;
}

body.single-product.mf-pdp-panel div.product .summary .mf-ptotal__sum {
  line-height: 1.15;
}

body.single-product.mf-pdp-panel div.product .summary .mf-ptotal {
  padding-block: 0.3rem;
}

body.single-product.mf-pdp-panel div.product .summary .woocommerce-variation-add-to-cart .quantity {
  margin-bottom: 0;
}