/* ---------------------------------------------------------------------------
   The art-print product page: size row and size guide.

   Materials use the theme's own option buttons (.mf-options, design.css). Here
   is only the size row and the guide. The press state is aria-pressed, set by
   assets/format-scale.js, the same attribute the material buttons use.
   ------------------------------------------------------------------------ */

/* The row carries its own heading, so the attribute's label above it would say
   the same thing twice. */
.single-product .summary table.variations tr:has(.mf-sizes) th.label {
  display: none;
}

.mf-sizes {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.mf-sizes__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.mf-sizes__title {
  margin: 0;
  font-weight: 700;
}

.mf-sizes__title span {
  font-weight: 600;
}

.mf-sizes__guide,
.woocommerce .mf-sizes__guide {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.mf-sizes__guide .mf-icon {
  width: 1.2em;
  height: 1.2em;
}

.mf-sizes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* The row gap leaves room for the tag that sits on the top edge of a button. */
  gap: 1rem 0.5rem;
}

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

.mf-sizes__item {
  position: relative;
  margin: 0;
  padding: 0;
}

.mf-sizes__button,
.woocommerce .mf-sizes__button {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.5rem;
  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;
  white-space: nowrap;
  transition: border-color 0.15s ease;
}

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

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

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

/* The tag sits on the button's top edge, over the border, and takes no room:
   the buttons are the same size with or without it. */
.mf-sizes__tag {
  position: absolute;
  top: 0;
  left: 0.6rem;
  z-index: 1;
  transform: translateY(-50%);
  padding: 0 0.35rem;
  background: var(--paper-bright);
  color: var(--text);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   The size guide

   Every size is drawn from the same bottom-left corner, in the same scale, so
   the larger ones contain the smaller ones and the difference is plain. The
   stage keeps the proportion of the largest size and never outgrows the
   screen; the dialog scrolls if it must.
   ------------------------------------------------------------------------ */

.mf-modal--sizes {
  width: min(34rem, calc(100vw - 2rem));
}

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

.mf-sizeguide__stage {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  aspect-ratio: var(--mf-ratio, 3 / 4);
  width: min(100%, 24rem, calc((100dvh - 14rem) * 0.75));
}

.mf-sizeguide__rect {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--mf-w);
  height: var(--mf-h);
  margin: 0;
  padding: 0.25rem 0.35rem;
  border: 1.5px solid var(--border-control);
  border-radius: 2px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
}

.mf-sizeguide__rect.is-popular {
  border-style: dashed;
  border-color: var(--ink);
}

/* The size chosen on the page. */
.mf-sizeguide__rect.is-current {
  border-color: var(--ink);
  border-style: solid;
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--paper);
  color: var(--text);
}

/* A ready-made size-guide picture: the dialog is as wide as the picture reads
   well, and the picture never outgrows the screen. */
.mf-modal--sizes-image {
  width: min(73rem, calc(100vw - 2rem));
}

.mf-sizeguide__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  border-radius: var(--radius-inner);
}