/* ---------------------------------------------------------------------------
   The photoprint product page (inc/photoprint-product.php).

   Everything is scoped by `body.mf-pdp-photoprint`, so no other product page
   changes. Colours, radii and type are the theme's tokens; the gallery is
   WooCommerce's FlexSlider with its thumbnails turned into a column, the
   pickers are art-product.css's, the form, price and button are
   WooCommerce's.
   ------------------------------------------------------------------------ */

/* The page: the gallery takes a little over half, the summary the rest. */
@media (min-width: 721px) {
  /* The gallery's row is the gallery's height; the summary, which spans both
     rows, may be taller, and whatever it needs beyond that goes to the second
     row, not to the space between the gallery and the strip. */
  body.mf-pdp-photoprint.single-product div.product {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0 clamp(1.25rem, 4vw, 4rem);
  }

  /* The theme stacks the page at 860px; this layout holds two columns down
     to a small tablet. */
  body.mf-pdp-photoprint.single-product div.product .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
  }

  /* The service strip sits under the gallery; the summary spans both rows. */
  body.mf-pdp-photoprint.single-product div.product > .mf-pdp-strip {
    grid-column: 1;
    grid-row: 2;
  }

  body.mf-pdp-photoprint.single-product div.product .summary {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 720px) {
  /* A single column that may be narrower than what is in it: the thumbnails
     scroll inside themselves instead of widening the page. */
  body.mf-pdp-photoprint.single-product div.product {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The phone's order: gallery, the configurator, the service strip, the
     details, then whatever else the page has. */
  body.mf-pdp-photoprint.single-product div.product > * {
    order: 5;
  }

  body.mf-pdp-photoprint.single-product div.product > .woocommerce-product-gallery {
    order: 1;
  }

  body.mf-pdp-photoprint.single-product div.product > .summary {
    order: 2;
  }

  body.mf-pdp-photoprint.single-product div.product > .mf-pdp-strip {
    order: 3;
  }

  body.mf-pdp-photoprint.single-product div.product > .mf-pdp-details {
    order: 4;
  }
}

/* ---------------------------------------------------------------------------
   Gallery
   ------------------------------------------------------------------------ */

/* With thumbnails (two or more pictures): a column beside the main picture.
   Without them there is one picture and one column. */
@media (min-width: 721px) {
  body.mf-pdp-photoprint.single-product div.product .woocommerce-product-gallery:has(.flex-control-thumbs) {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  body.mf-pdp-photoprint.single-product div.product .woocommerce-product-gallery:has(.flex-control-thumbs) .flex-viewport {
    grid-column: 2;
    grid-row: 1;
  }

  /* The column is as tall as the picture and scrolls inside itself when
     there are more pictures than fit; height 0 plus min-height 100% takes
     the row's height without lending it any. */
  body.mf-pdp-photoprint.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.6rem;
    height: 0;
    min-height: 100%;
    margin: 0;
    padding: 3px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.mf-pdp-photoprint.single-product div.product div.images.woocommerce-product-gallery[class*='--columns-'] .flex-control-thumbs li:nth-child(n) {
    flex: 0 0 auto;
    width: 100%;
  }
}

body.mf-pdp-photoprint.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid transparent;
  border-radius: var(--radius-inner);
}

/* The chosen thumbnail: a dark frame, no glow. */
body.mf-pdp-photoprint.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  border: 2px solid var(--ink);
  box-shadow: none;
}

/* The main picture: one stable box whatever the picture's own shape, so
   switching pictures moves nothing. The picture is contained, never stretched
   or cropped. */
body.mf-pdp-photoprint.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  aspect-ratio: 7 / 8;
  border-radius: calc(var(--radius-card) * 1.25);
  background: var(--paper);
}

body.mf-pdp-photoprint.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
  display: block;
  width: 100%;
  height: 100%;
}

body.mf-pdp-photoprint.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 720px) {
  /* A phone: the picture on top, the thumbnails in one row under it that
     scrolls inside itself. */
  body.mf-pdp-photoprint.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0.7rem 0 0;
    padding: 3px;
    scrollbar-width: thin;
  }

  body.mf-pdp-photoprint.single-product div.product div.images.woocommerce-product-gallery[class*='--columns-'] .flex-control-thumbs li:nth-child(n) {
    flex: 0 0 4.25rem;
    width: 4.25rem;
  }
}

/* ---------------------------------------------------------------------------
   The summary: one compact head, then the configurator
   ------------------------------------------------------------------------ */

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary .mf-eyebrow {
  margin: -0.25rem 0 0.15rem;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary .product_title {
  margin: 0 0 0.25rem;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary .mf-sku {
  margin: 0 0 0.5rem;
}

/* A thin rule between the head (category, title, SKU) and the choices. The
   theme's own rules for the form are as specific as it gets, hence the longer
   selector. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel).single-product div.product .summary form.variations_form {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--rule);
}

/* No rules between the rows of the configurator. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations,
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations tr,
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations th,
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations td {
  border: 0;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations td,
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations th {
  padding-inline: 0;
}

/* A thin rule between the material and the size (the size row has no label
   cell of its own; its heading is in the cell). */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations tr:first-child td.value {
  padding-bottom: 0.75rem;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations tr + tr td.value {
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations th.label {
  padding-top: 0;
  padding-bottom: 0.4rem;
  line-height: 1.2;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations tr:first-child th.label {
  padding-top: 0;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary table.variations td.value {
  padding-bottom: 0;
}

/* The popular size's tag: black, white capitals, on the button's top edge. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-sizes__tag {
  left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-inner);
  background: var(--ink);
  color: var(--on-dark);
  letter-spacing: 0.06em;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-sizes__button[aria-pressed='true'],
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-sizes__button[aria-pressed='true']:hover {
  border-width: 2px;
  box-shadow: none;
}

/* "Очистить": a plain underlined link under the sizes. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary .reset_variations {
  display: inline-block;
  margin: 0.4rem 0 0;
  padding: 0;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary .single_variation_wrap {
  padding-top: 0;
  border-top: 0;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary .woocommerce-variation,
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary .woocommerce-variation-price .price {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Quantity and the button
   ------------------------------------------------------------------------ */

:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* Storefront's clearfix pseudo-elements would be two empty flex items, and the gap round them. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .woocommerce-variation-add-to-cart::before,
:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .woocommerce-variation-add-to-cart::after {
  display: none;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables).single-product div.product .summary .quantity {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-inner);
  background: #fff;
  overflow: hidden;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .quantity .qty {
  width: 3rem;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .quantity .qty::-webkit-outer-spin-button,
:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .quantity .qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .mf-qty__button {
  width: 2.75rem;
  min-height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .mf-qty__button:hover {
  background: var(--paper);
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .single_add_to_cart_button {
  flex: 1 1 12rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  margin: 0;
}

/* The bag, drawn by the button itself so it takes the button's colour. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .single_add_to_cart_button::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  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;
}

@media (max-width: 430px) {
  /* Too narrow for both on one line: the stepper, then the button, full width. */
  :is(body.mf-pdp-photoprint, body.mf-pdp-panel, body.mf-pdp-tables) .summary .single_add_to_cart_button {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------------------
   The service strip: four lines in one row under the gallery
   ------------------------------------------------------------------------ */

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-strip {
  margin: 0.5rem 0 0;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0.55rem 0.15rem;
  list-style: none;
  border-radius: var(--radius-card);
  background: var(--paper);
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Each line is two rows, everything on the left edge: the icon and the title
   side by side, the sentence under them from the same edge. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip .mf-facts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: start;
  column-gap: 0.4rem;
  row-gap: 0.15rem;
  min-width: 0;
  margin: 0;
  padding: 0.05rem 0.55rem;
  text-align: left;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip .mf-facts__item + .mf-facts__item {
  border-left: 1px solid var(--rule);
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip .mf-icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* The title and the sentence share a wrapper in the markup; the wrapper steps
   aside so each can take its own place in the item's grid. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip .mf-facts__text {
  display: contents;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip .mf-facts__text strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.8125rem;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip .mf-facts__text span {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--text-muted);
}

/* Two by two when four will not fit side by side; one under another on a phone. */
@media (max-width: 1100px) {
  :is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0;
  }

  :is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip .mf-facts__item:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 480px) {
  :is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-facts--strip .mf-facts__item + .mf-facts__item {
    border-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   Product details: plain rows under the page
   ------------------------------------------------------------------------ */

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details {
  margin: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details__title {
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-1);
  line-height: 1.2;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details__list {
  margin: 0;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details__row {
  display: grid;
  grid-template-columns: minmax(8rem, 22%) minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details__row:first-child {
  border-top: 0;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details__row[hidden],
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details [data-material][hidden] {
  display: none;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details dt {
  font-weight: 700;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details dd {
  max-width: 72ch;
  margin: 0;
  color: var(--text-muted);
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details dd strong {
  display: block;
  color: var(--text);
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details dd p {
  margin: 0;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details dd ul {
  margin: 0;
  padding-left: 1.1rem;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details dd li + li {
  margin-top: 0.25rem;
}

@media (max-width: 720px) {
  :is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A small tablet: the summary is narrow, so the sizes go two to a row and the
   service lines one under the other. */
@media (min-width: 721px) and (max-width: 940px) {
  :is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-sizes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* The size row's heading and the guide link: a 44px touch target without the
   row around it being any taller than that. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-sizes {
  gap: 0.4rem;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-sizes__guide,
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .woocommerce .mf-sizes__guide {
  min-height: 2.25rem;
}

/* The selected price sits close to the buy row. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary .woocommerce-variation-price {
  margin: 0;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .summary .woocommerce-variation-price .price {
  line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   Payment methods under the button
   ------------------------------------------------------------------------ */

body.mf-pdp-photoprint .mf-pdp-pay {
  margin: 1.1rem 0 0;
}

body.mf-pdp-photoprint .mf-pdp-pay__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  color: var(--text);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.mf-pdp-photoprint .mf-pdp-pay__title::before,
body.mf-pdp-photoprint .mf-pdp-pay__title::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: var(--rule);
}

body.mf-pdp-photoprint .mf-pdp-pay__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.mf-pdp-photoprint .mf-pdp-pay__list li {
  margin: 0;
  padding: 0;
  line-height: 0;
}

body.mf-pdp-photoprint .mf-pdp-pay__list svg {
  display: block;
  width: 3rem;
  height: auto;
}

body.mf-pdp-photoprint .mf-pdp-pay__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.85rem 0 0;
  color: var(--text-muted);
  font-size: var(--type-meta);
}

body.mf-pdp-photoprint .mf-pdp-pay__note svg {
  flex: none;
  width: auto;
  height: 2.6rem;
}

/* ---------------------------------------------------------------------------
   The strip of other works under the page

   WooCommerce's related list, laid out as one row that scrolls inside itself.
   About six cards on a wide screen, four on a tablet, one and a bit on a
   phone, so it is plain that there is more to the right.
   ------------------------------------------------------------------------ */

body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products {
  min-width: 0;
}

body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  margin: 0;
  padding: 0 0 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products::before,
body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products::after {
  display: none;
}

body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products li.product {
  flex: 0 0 calc((100% - 5rem) / 6);
  width: auto;
  min-width: 0;
  margin: 0;
  float: none;
  scroll-snap-align: start;
}

@media (max-width: 1099px) {
  body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products li.product {
    flex-basis: calc((100% - 3rem) / 4);
  }
}

@media (max-width: 720px) {
  body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products {
    gap: 0.75rem;
  }

  body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products li.product {
    flex-basis: calc((100% - 0.75rem) / 1.4);
  }
}

/* A mouse drifts the strip by itself; snapping would fight it. */
@media (hover: hover) and (pointer: fine) {
  body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products {
    scroll-snap-type: none;
  }
}

/* Cards a little smaller than the catalogue's. */
body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--step--1);
}

body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products li.product .price,
body:is(.mf-pdp-photoprint, .mf-pdp-panel, .mf-pdp-tables, .mf-pdp-bdesk) .related.products li.product .mf-card__meta {
  font-size: var(--type-meta);
}

/* Tables: the same card as the archive's, with its quiet button under the price. */
body:is(.mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products li.product {
  display: flex;
  flex-direction: column;
}

body:is(.mf-pdp-tables, .mf-pdp-bdesk) .related.products ul.products li.product > a {
  flex: 1 1 auto;
}

body:is(.mf-pdp-tables, .mf-pdp-bdesk) .related.products li.product .mf-list__buy {
  margin-top: auto;
  padding-top: 0.45rem;
}

body:is(.mf-pdp-tables, .mf-pdp-bdesk) .related.products li.product .mf-list__add {
  min-height: 0;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--border-control);
  background: none;
  color: var(--ink);
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: 1.3;
}

body:is(.mf-pdp-tables, .mf-pdp-bdesk) .related.products li.product .mf-list__add:hover,
body:is(.mf-pdp-tables, .mf-pdp-bdesk) .related.products li.product .mf-list__add:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper-bright);
}

/* The electric desks' white studio shots take the frame's colour. */
body:is(.mf-pdp-tables, .mf-pdp-bdesk) .related.products li.product.mf-card--bdesk .mf-card__media img:not(.mf-card__alt) {
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------------
   Wall panels on the same system

   Everything above that is written for both (`:is(photoprint, panel)`) already
   applies: the compact head, the rules in the form, the quantity stepper, the
   service strip and the details rows. What is added here is what differs: the
   strip has five lines and runs under both columns, the price is the panel
   page's own running total (one price, no box), and the description and the
   reviews read as plain sections like the details.
   ------------------------------------------------------------------------ */

body.mf-pdp-panel .mf-pdp-strip--wide {
  margin: 1.25rem 0 0;
}

body.mf-pdp-panel .mf-facts--strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  body.mf-pdp-panel .mf-facts--strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0;
  }

  body.mf-pdp-panel .mf-facts--strip .mf-facts__item:nth-child(odd) {
    border-left: 1px solid var(--rule);
  }

  body.mf-pdp-panel .mf-facts--strip .mf-facts__item:nth-child(3n + 1) {
    border-left: 0;
  }
}

@media (max-width: 720px) {
  body.mf-pdp-panel .mf-facts--strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mf-pdp-panel .mf-facts--strip .mf-facts__item {
    border-left: 1px solid var(--rule);
  }

  body.mf-pdp-panel .mf-facts--strip .mf-facts__item:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 480px) {
  body.mf-pdp-panel .mf-facts--strip {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mf-pdp-panel .mf-facts--strip .mf-facts__item {
    border-left: 0;
  }
}

/* The running total: the configuration, then the price, no box. */
body.mf-pdp-panel .mf-ptotal {
  margin: 0.75rem 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

body.mf-pdp-panel .mf-ptotal__line {
  min-height: 0;
}

body.mf-pdp-panel .mf-ptotal__sum {
  font-size: var(--step-1);
}

body.mf-pdp-panel .mf-sizes--panel .mf-sizes__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The description and the reviews: prose in the details' frame. */
:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details__prose {
  max-width: 80ch;
  padding: 1rem 0 1.25rem;
  color: var(--text-muted);
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details__prose > :first-child {
  margin-top: 0;
}

:is(body.mf-pdp-photoprint, body.mf-pdp-panel) .mf-pdp-details__prose > :last-child {
  margin-bottom: 0;
}

body.mf-pdp-panel .mf-pdp-details + .mf-pdp-details {
  margin-top: 1.25rem;
}

/* WooCommerce's reviews template carries its own heading and a blue notice:
   the section's heading says it, and "no reviews yet" is a plain line. */
body.mf-pdp-panel .mf-pdp-details--reviews .woocommerce-Reviews-title {
  display: none;
}

body.mf-pdp-panel .mf-pdp-details--reviews .woocommerce-noreviews {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
}

body.mf-pdp-panel .mf-pdp-details--reviews .woocommerce-noreviews::before {
  display: none;
}

/* ---------------------------------------------------------------------------
   The flags above the title (badge and rating) belong to the products that
   carry them (`body.mf-pdp-showcase`, set from product meta). The price beside
   the buy button and the small material marks below are the layout of every
   print.
   ------------------------------------------------------------------------ */

body.mf-pdp-showcase .mf-pdp-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.6rem;
}

body.mf-pdp-showcase .mf-pdp-badge,
body.mf-pdp-showcase .mf-pdp-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--type-meta);
  line-height: 1.2;
  transition: background-color 0.2s ease;
}

body.mf-pdp-showcase .mf-pdp-badge {
  background: #f5ebdd;
  color: #7a4a1f;
  font-weight: 600;
}

body.mf-pdp-showcase .mf-pdp-badge__icon {
  width: 1rem;
  height: 1rem;
  color: #e0552b;
}

body.mf-pdp-showcase .mf-pdp-rating {
  background: var(--paper);
  color: var(--text);
}

body.mf-pdp-showcase .mf-pdp-rating__star {
  width: 1rem;
  height: 1rem;
  color: #f2a516;
  transition: filter 0.2s ease;
}

body.mf-pdp-showcase .mf-pdp-rating__value {
  font-weight: 700;
}

body.mf-pdp-showcase .mf-pdp-rating__count {
  color: var(--text-muted);
}

/* A little life on hover or focus, nothing at rest. */
body.mf-pdp-showcase .mf-pdp-badge:hover {
  background: #f1e2cd;
}

body.mf-pdp-showcase .mf-pdp-rating:hover .mf-pdp-rating__star {
  filter: brightness(1.12) saturate(1.2);
}

/* The eyebrow below the flags no longer needs its own top gap. */
body.mf-pdp-showcase .summary .mf-eyebrow {
  margin-top: 0;
}

/* The price on the buy row and the material marks: every print. */
/* The price on the buy row: the price, then the quantity and the button. */
@media (min-width: 560px) {
  body.mf-pdp-photoprint .summary .single_variation_wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: center;
  }

  body.mf-pdp-photoprint .summary .single_variation_wrap > .woocommerce-variation {
    grid-column: 1;
    grid-row: 1;
  }

  body.mf-pdp-photoprint .summary .single_variation_wrap > .woocommerce-variation-add-to-cart {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0;
  }

  body.mf-pdp-photoprint .summary .woocommerce-variation-price .price {
    font-size: var(--step-3);
    line-height: 1;
  }
}

/* A mark for each material: a small square that says what it looks like. */
body.mf-pdp-photoprint .mf-options__button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

body.mf-pdp-photoprint .mf-options__button::before {
  content: '';
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--border-control);
  border-radius: 3px;
  background: #fff;
}

body.mf-pdp-photoprint .mf-options__button[data-value='canva']::before {
  background:
    repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.22) 0 1px, transparent 1px 3px),
    #f3ead9;
}

body.mf-pdp-photoprint .mf-options__button[data-value='painting']::before {
  background: linear-gradient(135deg, #fff 0 38%, #cfe0e8 38% 52%, #fff 52% 100%);
}