/*
 * Structure only — sizing, layout and the states that must be legible.
 *
 * The theme owns how this looks. Every colour here reads from a custom
 * property with a neutral fallback, so restyling means setting tokens rather
 * than fighting specificity.
 */

.mf-print {
  --mf-rule: var(--rule, rgba(0, 0, 0, 0.14));
  --mf-ink: var(--ink, #1a1a1a);
  --mf-accent: var(--carmine, #9d2235);
  --mf-surface: var(--paper-bright, #fafafa);

  margin: 1.6rem 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--mf-rule);
}

.mf-print__stage {
  width: 100%;
  max-width: 480px;
  background-color: var(--mf-surface);
  border: 1px solid var(--mf-rule);
}

/* ---------------------------------------------------------------------------
   The two views.

   `top` is the printed square from directly above — what the press receives.
   `scene` is the photograph. The buttons are found by data attribute, never by
   their words, because those words are in four languages.
   ------------------------------------------------------------------------ */

.mf-print__views {
  display: flex;
  gap: 0;
  padding: 0.5rem 0.5rem 0;
}

.mf-print__views button {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0.5em 0.8em;
  background: none;
  border: 1px solid var(--mf-rule);
  color: var(--mf-ink);
  font: inherit;
  font-size: 0.85em;
  line-height: 1.2;
  cursor: pointer;
}

.mf-print__views button + button {
  border-left: 0;
}

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

.mf-print__views button:focus-visible {
  outline: 2px solid var(--mf-accent);
  outline-offset: -2px;
}

.mf-print__canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none; /* the canvas handles the drag itself */
  cursor: grab;
}

.mf-print__stage[data-state='empty'] .mf-print__canvas {
  cursor: default;
}

.mf-print__status {
  margin: 0.8rem 0 0;
  max-width: 60ch;
  font-size: 0.875em;
  line-height: 1.45;
  color: var(--mf-ink);
  opacity: 0.75;
  /* Three lines of TEXT reserved, so the status can never push the page.
     content-box on purpose: the theme gives this element 0.9rem of padding,
     and under border-box that padding came out of the reservation — the
     measured two lines were really about one and a half, and the third line
     shifted everything below by 13 to 15px. A reservation must not depend on
     what another stylesheet pads with.

     Three rather than two because Latvian and Russian run longer than the
     English this was measured in, and the element is allowed to grow rather
     than truncate: a warning about print quality is worth a reflow, a silent
     ellipsis is not. */
  box-sizing: content-box;
  min-height: calc(3 * 1.45em);
}

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

.mf-print__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.mf-print__file input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mf-print__file {
  display: inline-block;
}

.mf-print__file span {
  display: inline-block;
  padding: 0.6em 1.2em;
  border: 1px solid var(--mf-ink);
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
}

.mf-print__file input[type='file']:focus-visible + span {
  outline: 2px solid var(--mf-accent);
  outline-offset: 3px;
}

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

/* The tools stay in flow at every state and are hidden by visibility, not by
   `hidden` or `display`. Taking them out of flow meant the row appeared the
   moment an upload finished and pushed everything below it down — the layout
   jumped exactly when the shopper was looking at their own picture. Reserved
   space costs one empty row before the first upload and nothing moves after. */
.mf-print__stage[data-state='empty'] .mf-print__tools,
.mf-print__stage[data-state='loading'] .mf-print__tools,
.mf-print__stage[data-state='error'] .mf-print__tools {
  visibility: hidden;
}

.mf-print__tools button {
  /* 44px minimum, because these sit under a thumb on a phone. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9em;
  background: none;
  border: 1px solid var(--mf-rule);
  border-radius: 2px;
  color: var(--mf-ink);
  font-size: 0.9em;
  line-height: 1;
  cursor: pointer;
}

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

.mf-print__tools button:focus-visible {
  outline: 2px solid var(--mf-accent);
  outline-offset: 2px;
}

.mf-print__thumb {
  display: block;
  border: 1px solid var(--mf-rule);
}

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

  .mf-print__controls {
    gap: 0.5rem;
  }
}

/* ---------------------------------------------------------------------------
   Crop inset — what "cover" is cutting off.

   Flat and beside the preview, deliberately not warped around the top: a
   projective map sends points past the vanishing line to the wrong side of the
   image, so a ghost of the cropped region would smear across the canvas on a
   steeply shot mockup.
   ------------------------------------------------------------------------ */

.mf-print__inset {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  max-width: 100%;
}

.mf-print__inset canvas {
  display: block;
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  background-color: var(--mf-surface);
  border: 1px solid var(--mf-rule);
}

.mf-print__inset figcaption {
  font-size: 0.8em;
  line-height: 1.35;
  color: var(--mf-ink);
  opacity: 0.7;
  max-width: 24ch;
}


/* ---------------------------------------------------------------------------
   Model, size and frame colour — the steps above the buy row.

   Built from the theme's own option buttons (.mf-options); only the layout of
   the three rows is set here. The size row is equal cards, the colour row is
   a swatch and its name, the same shapes the desk product pages use.
   ------------------------------------------------------------------------ */

.mf-print__models {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.2rem;
}

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

.mf-print__steplabel {
  display: block;
  margin: 0 0 0.45rem;
  font-weight: 700;
  color: var(--mf-ink);
}

.mf-print__options--size {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mf-print__options--size .mf-options__button {
  padding: 0.7rem 0.3rem;
  text-align: center;
  line-height: 1.25;
}

.mf-print__options--colour .mf-options__button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem 0.5rem 0.55rem;
}

.mf-print__dot {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #b9b9b4;
  border-radius: 50%;
  background: #8c8f91;
}

.mf-print__models .mf-options__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   The desk's 3D view, in the stage where the canvas was.
   ------------------------------------------------------------------------ */

.mf-print__stage[data-print-view='3d'] .mf-print__canvas {
  display: none;
}

.mf-print__3d {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mf-surface);
}

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

.mf-print__3d .mf-print__viewer {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
}

.mf-print__3d[data-note]:not([data-note='']) {
  display: grid;
  place-items: center;
  font-size: 0.875em;
  color: var(--mf-ink);
}

.mf-print__3d[data-note]:not([data-note=''])::after {
  content: attr(data-note);
  opacity: 0.7;
}

.mf-print__3d:not([data-note]):empty::after,
.mf-print__3d[data-note='']:empty::after {
  content: '…';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.5;
}

/* The steps take a full row of the buy form; quantity and the button follow
   on the next one. Scoped to a form that has them, so every other designer
   page keeps its one-row form. */
.single-product .summary form.cart:has(> .mf-print .mf-print__models) {
  flex-wrap: wrap;
}

form.cart > .mf-print:has(.mf-print__models) {
  flex: 0 0 100%;
  margin: 0 0 0.4rem;
  padding-top: 0;
  border-top: 0;
}