/* ============================================================
   SINGLE PRODUCT — editorial layout (trial: Lectulus)

   Built to the three client reference screenshots, which were
   taken at 1920px. On desktop every measurement is written in
   --u (1/1920 of the viewport), so the composition is the
   reference at 1920 and scales proportionally either side of it.
   Below 1100px the page drops to a stacked mobile flow.

   Tracking is measured from the references, per text style, the
   same way the catalogue pages were built. The values are kept in
   custom properties at the top so the whole page can be re-tuned
   in one place.

   Fonts are also stamped inline by pdp-editorial.js: a mu-plugin
   writes font-family:Tondu !important as an inline style on page
   elements, which no stylesheet rule can outrank.
   ============================================================ */

body.mm-pdp-page {
  --mm-accent: var(--clr-accent, #009933) !important;
  --mm-ground: #3a3a3a !important;          /* page, sampled rgb(58,58,58) */
  --mm-band: #333333 !important;            /* section bar + panels, sampled rgb(51,51,51) */
  --mm-mono: 'Consola Mono', ui-monospace, monospace !important;
  --mm-display: 'Akira Expanded', sans-serif !important;
}

/* the header is black from the top so its zigzag teeth read at once, as on the
   three catalogue pages; the page starts below it so nothing is overlapped */
body.mm-pdp-page #site-header.site-header {
  background-color: #000 !important;
}
/* Space between the header (teeth included) and the product. Same expression the
   standard product template produces - its card padding clamp(1.5rem, 3vw, 3.5rem)
   plus the 4px main offset - so every product page opens with the same gap:
   60px at 1920, 28px on a phone. */
body.mm-pdp-page { --mm-below-header: calc(clamp(1.5rem, 3vw, 3.5rem) + 4px) !important; }

body.mm-pdp-page main.site-main {
  padding-top: var(--mm-header-h, 140px) !important;
  background: var(--mm-ground) !important;
}

body.mm-pdp-page .mm-pdp {
  color: #fff !important;
  font-family: var(--mm-mono) !important;
  font-weight: 700 !important;
}
:where(.mm-pdp) *,
:where(.mm-pdp) *::before,
:where(.mm-pdp) *::after { text-shadow: none !important; }  /* no chromatic-aberration glitch */
:where(.mm-pdp) a { color: inherit !important; text-decoration: none !important; }
:where(.mm-pdp) :where(p, h1, h2, figure) { margin: 0 !important; }
:where(.mm-pdp) img { display: block !important; max-width: 100% !important; }

body.mm-pdp-page .mm-pdp .mm-pdp__notices { padding: 0 !important; }
/* WooCommerce always prints an empty wrapper; it only takes room with a message in it */
body.mm-pdp-page .mm-pdp .mm-pdp__notices:has(.woocommerce-message,
.woocommerce-error,
.woocommerce-info) { padding: 1rem clamp(1rem, 2.6vw, 50px) 0 !important; }

/* ------------------------------------------------------------
   DESKTOP — the reference composition
   ------------------------------------------------------------ */
@media (min-width: 1100px) {

  body.mm-pdp-page .mm-pdp {
    --u: calc(100vw / 1920) !important;
    /* one value for the space above every section's content: bar -> Design,
       Design -> Technical Details, Technical Details -> Shipping & Returns */
    --mm-gap: calc(96 * var(--u)) !important;
    --mm-ship-row-gap: calc(48 * var(--u)) !important;

    /* type scale, px at 1920 */
    /* Calibrated against the references: each value was solved from the
       reference cap height (font size) and glyph pitch (tracking), using the
       measured Consola Mono advance of 0.577em. */
    --fs-badge: 23.5 !important; --ls-badge: 0.21em !important;
    --fs-crumb: 16 !important;   --ls-crumb: 0.31em !important;
    --fs-title: 59 !important;   --ls-title: 0.02em !important;
    --fs-price: 38 !important;   --ls-price: 0.01em !important;
    --fs-qty: 26 !important;
    --fs-atc: 28 !important;     --ls-atc: 0.01em !important;
    --fs-small: 18 !important;   --ls-small: 0.20em !important;   /* bar labels, Design heading */
    --fs-swipe: 18 !important;   --ls-swipe: 0.19em !important;
    --fs-body: 12.5 !important;  --ls-body: 0.22em !important;    /* Design copy, values, credit */
    --fs-label: 22 !important;   --ls-label: 0.2em !important;    /* MATERIAL:, FINISH & PROTECTION: ... */ !important}

  /* ---------- hero ---------- */

  body.mm-pdp-page .mm-pdp .mm-pdp__hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: calc(1258 * var(--u)) calc(2 * var(--u)) 1fr !important;
    height: calc(720 * var(--u)) !important;
    padding-left: calc(50 * var(--u)) !important;
    margin-top: var(--mm-below-header) !important;
  }

  body.mm-pdp-page .mm-pdp .mm-pdp__media { position: relative !important; height: 100% !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__stage { position: absolute !important; inset: 0 !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__main {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;          /* the renders are never cropped */
    object-position: center !important;
    transition: opacity 0.35s ease !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__main.is-swapping { opacity: 0 !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__sig {
    position: absolute !important;
    right: calc(20 * var(--u)) !important;
    bottom: calc(22 * var(--u)) !important;
    width: calc(100 * var(--u)) !important;
    opacity: 0.62 !important;
    pointer-events: none !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__sig[hidden] { display: none !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__heart {
    position: absolute !important;
    top: calc(3 * var(--u)) !important;
    right: calc(50 * var(--u)) !important;
    width: calc(27 * var(--u)) !important;
    height: calc(27 * var(--u)) !important;
  }

  body.mm-pdp-page .mm-pdp .mm-pdp__thumbs {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    width: calc(482 * var(--u)) !important;
    border-bottom: 2px solid #fff !important;
    z-index: 2 !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__thumb {
    flex: 0 0 calc(120.5 * var(--u)) !important;
    height: calc(68 * var(--u)) !important;
  }

  body.mm-pdp-page .mm-pdp .mm-pdp__rule { background: #fff !important; height: 100% !important; }

  /* Info panel. Each line is centred on the position it occupies in the
     reference, measured from the top of the hero, so the composition holds
     regardless of the metrics of the face that happens to load. */
  body.mm-pdp-page .mm-pdp .mm-pdp__info { position: relative !important; height: 100% !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__info > * {
    position: absolute !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;          /* otherwise the box shrink-wraps to half the panel and centres on the wrong width */
    white-space: nowrap !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__badge { top: calc(47 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__crumb { top: calc(110 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__hero .mm-pdp__info .mm-pdp__title.product_title { top: calc(240 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__price { top: calc(343 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__buy { top: calc(435.5 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__swipe { top: calc(591.5 * var(--u)) !important; }   /* taller indicator: re-centred so SWIPE FOR MORE stays where it was */

  body.mm-pdp-page .mm-pdp .mm-pdp__badge { display: flex !important; align-items: center !important; gap: calc(31 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__badge img { width: calc(61 * var(--u)) !important; height: auto !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__badge span { font-size: calc(var(--fs-badge) * var(--u)) !important; letter-spacing: var(--ls-badge) !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__crumb { font-size: calc(var(--fs-crumb) * var(--u)) !important; letter-spacing: var(--ls-crumb) !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__hero .mm-pdp__info .mm-pdp__title.product_title {
    font-family: var(--mm-display) !important;
    font-size: calc(var(--fs-title) * var(--u)) !important;
    letter-spacing: var(--ls-title) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  body.mm-pdp-page .mm-pdp .mm-pdp__price { font-size: calc(var(--fs-price) * var(--u)) !important; letter-spacing: var(--ls-price) !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__form { display: flex !important; align-items: flex-start !important; gap: calc(36 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__qty {
    width: calc(98 * var(--u)) !important;
    height: calc(42 * var(--u)) !important;     /* 40 of box + the 2px rule, as in the reference */
    padding: 0 calc(1 * var(--u)) !important;
    font-size: calc(var(--fs-qty) * var(--u)) !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__atc {
    margin-top: calc(6 * var(--u)) !important;       /* centres the word on the stepper's figure, not its underline */
    font-family: var(--mm-display) !important;
    font-size: calc(var(--fs-atc) * var(--u)) !important;
    letter-spacing: var(--ls-atc) !important;
    line-height: 1 !important;
  }

  body.mm-pdp-page .mm-pdp .mm-pdp__swipe span { font-size: calc(var(--fs-swipe) * var(--u)) !important; letter-spacing: var(--ls-swipe) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__swipe .scroll-line { margin-top: 12px !important; }   /* the homepage's own gap between line and label */

  /* ---------- section bar ---------- */

  body.mm-pdp-page .mm-pdp .mm-pdp__bar {
    margin: calc(47 * var(--u)) 0 0 calc(52 * var(--u)) !important;
    height: calc(50 * var(--u)) !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__bar-list { gap: calc(120 * var(--u)) !important; padding-right: calc(10 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__bar-link { font-size: calc(var(--fs-small) * var(--u)) !important; letter-spacing: var(--ls-small) !important; }

  /* ---------- Design ---------- */

  body.mm-pdp-page .mm-pdp .mm-pdp__design {
    display: grid !important;
    grid-template-columns: calc(600 * var(--u)) calc(260 * var(--u)) auto !important;
    column-gap: 0 !important;
    padding: 0 0 0 calc(130 * var(--u)) !important;
    align-items: start !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__photo--1 { margin-top: var(--mm-gap) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__photo--1 img { width: calc(600 * var(--u)) !important; height: calc(333 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__photo--2 { margin: calc(var(--mm-gap) - 1 * var(--u)) 0 0 calc(38 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__photo--2 img { width: calc(222 * var(--u)) !important; height: calc(293 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__story { position: relative !important; margin: calc(var(--mm-gap) + 8 * var(--u)) 0 0 calc(147 * var(--u)) !important; }   /* +8: title cap sits level with the photos' top */

  body.mm-pdp-page .mm-pdp .mm-pdp__design .mm-pdp__story .mm-pdp__story-title { font-size: calc(var(--fs-small) * var(--u)) !important; letter-spacing: var(--ls-small) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__story-copy {
    margin-top: calc(18 * var(--u)) !important;
    white-space: nowrap !important;                /* the client's line breaks are the composition */
    font-size: calc(var(--fs-body) * var(--u)) !important;
    letter-spacing: var(--ls-body) !important;
    line-height: calc(30 * var(--u)) !important;
  }
  /* signature + credit sit to the right of the last line, as one centred column */
  body.mm-pdp-page .mm-pdp .mm-pdp__credit {
    position: absolute !important;
    left: calc(504 * var(--u)) !important;
    top: calc(var(--credit-top, 253) * var(--u)) !important;
    width: calc(181 * var(--u)) !important;
    align-items: center !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__credit img { width: calc(108 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__credit p {
    white-space: nowrap !important;
    margin-top: calc(16 * var(--u)) !important;
    font-size: calc(var(--fs-body) * var(--u)) !important;
    letter-spacing: var(--ls-body) !important;
  }

  /* ---------- Technical Details / Shipping & Returns ---------- */

  body.mm-pdp-page .mm-pdp .mm-pdp__technical {
    display: grid !important;
    grid-template-columns: calc(714 * var(--u)) calc(946 * var(--u)) !important;
    padding: var(--mm-gap) 0 calc(40 * var(--u)) calc(136 * var(--u)) !important;
    align-items: start !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__technical--text-only { grid-template-columns: calc(714 * var(--u)) calc(946 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__technical--text-only .mm-pdp__panels { grid-column: 2 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__drawing { margin-top: calc(17 * var(--u)) !important; }   /* reference: drawing sits 17px below the first panel's top */

  /* Shipping & Returns: each panel sits on a row with its icon in the column
     the technical drawing occupies above it, centred on the same x, so the two
     sections share one composition. align-items centres each icon on its own
     panel however tall the copy runs. */
  /* no bar above this section any more, so it follows Technical Details directly:
     the 44px that cleared a bar would leave a 112px hole between the two panel stacks */
  body.mm-pdp-page .mm-pdp .mm-pdp__ship { padding: var(--mm-gap) 0 calc(40 * var(--u)) calc(136 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__ship-row {
    display: grid !important;
    grid-template-columns: calc(714 * var(--u)) calc(946 * var(--u)) !important;
    align-items: center !important;
    margin-bottom: var(--mm-ship-row-gap) !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__ship-row .mm-pdp__panel { margin-bottom: 0 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__ship-icon { width: calc(500 * var(--u)) !important; display: flex !important; justify-content: center !important; }
  /* Shipping continues the Technical panel stack: the technical section's own
     bottom padding would add 40px on top of the usual 27px panel gap and read
     as a second break; 27px alone was too tight, so the two meet at 54px */
  body.mm-pdp-page .mm-pdp .mm-pdp__section--technical:has(+ .mm-pdp__section--shipping) .mm-pdp__technical { padding-bottom: 0 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__section--technical:has(+ .mm-pdp__section--shipping) .mm-pdp__panel:last-child { margin-bottom: 0 !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__ship-icon svg { width: calc(190 * var(--u)) !important; height: auto !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__drawing img { width: calc(500 * var(--u)) !important; height: auto !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__panels { margin-top: 0 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__panel {
    padding: calc(8 * var(--u)) calc(38 * var(--u)) calc(13 * var(--u)) !important;
    margin-bottom: calc(27 * var(--u)) !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__row { line-height: calc(35 * var(--u)) !important; white-space: nowrap !important; font-size: calc(var(--fs-body) * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__row + .mm-pdp__row { margin-top: calc(12 * var(--u)) !important; }
  /* Shipping & Returns answers are sentences, not spec lines: they wrap inside the
     panel instead of holding authored breaks, and continuation lines start at the
     panel edge exactly as FINISH & PROTECTION's second line does. */
  body.mm-pdp-page .mm-pdp .mm-pdp__section--shipping .mm-pdp__row { white-space: normal !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__section--shipping .mm-pdp__panel .mm-pdp__row + .mm-pdp__row { margin-top: calc(22 * var(--u)) !important; }

  /* a panel holding a wrapped paragraph spaces its rows as paragraphs (reference: 57px pitch
     in MATERIAL / FINISH, against 47px for the single-line dimension rows) */
  body.mm-pdp-page .mm-pdp .mm-pdp__panel:has(br) .mm-pdp__row + .mm-pdp__row { margin-top: calc(22 * var(--u)) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__label { font-size: calc(var(--fs-label) * var(--u)) !important; letter-spacing: var(--ls-label) !important; line-height: 1 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__value {
    font-size: calc(var(--fs-body) * var(--u)) !important;
    letter-spacing: var(--ls-body) !important;
    margin-left: calc(2 * var(--u)) !important;
    line-height: 1 !important;                  /* the row's own 35px strut sets the pitch, not the mixed sizes */
  }
}

/* ------------------------------------------------------------
   SHARED — colour, controls, states
   ------------------------------------------------------------ */

body.mm-pdp-page .mm-pdp .mm-pdp__thumb {
  position: relative !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.4s ease, opacity 0.25s ease !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__thumb:hover img { transform: scale(1.06) !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__thumb:focus-visible { outline: 2px solid #fff !important; outline-offset: -2px !important; }

body.mm-pdp-page .mm-pdp .mm-pdp__heart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 3 !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__heart svg { width: 100% !important; height: 100% !important; fill: #fff !important; transition: fill 0.25s ease, transform 0.2s ease !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__heart:hover svg { transform: scale(1.1) !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__heart.is-active svg { fill: var(--mm-accent) !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__heart:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; }

body.mm-pdp-page .mm-pdp .mm-pdp__badge img { border: 0 !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__crumb { text-transform: uppercase !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__crumb a:hover { color: var(--mm-accent) !important; }

/* the reference sets the name on a soft dark halo, not a glitch offset */
/* Soft lift under the name: a tight halo for edge contrast, plus two blurred
   layers dropped below the letters so the depth reads as light from above.
   em units, so it scales with the title at every screen width. */
body.mm-pdp-page .mm-pdp .mm-pdp__hero .mm-pdp__info .mm-pdp__title.product_title {
  text-shadow:
    0 0 0.18em rgba(0, 0, 0, 0.7),
    0 0.07em 0.32em rgba(0, 0, 0, 0.6),
    0 0.12em 0.7em rgba(0, 0, 0, 0.4) !important;
  font-weight: 400 !important;
}

/* the theme's product-page form.cart rule wraps the row, draws a rule above it
   and pads it; none of that belongs to this layout */
body.mm-pdp-page .mm-pdp .mm-pdp__form {
  flex-wrap: nowrap !important;
  border-top: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

/* - 1 + : custom steppers either side of the number, no browser spinners */
body.mm-pdp-page .mm-pdp .mm-pdp__qty {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--mm-band) !important;          /* the reference sets the stepper on a #333 tile */
  border-bottom: 2px solid #fff !important;
  box-sizing: border-box !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__step {
  padding: 0 0.15em !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font: inherit !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__step:hover { color: var(--mm-accent) !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__qty-input {
  width: 2.2em !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font: inherit !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__qty-input::-webkit-outer-spin-button,
body.mm-pdp-page .mm-pdp .mm-pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__qty-input:focus { outline: none !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__qty:focus-within { border-bottom-color: var(--mm-accent) !important; }

/* the reference shows ADD TO CART as a green word, not a filled button */
body.mm-pdp-page .mm-pdp .mm-pdp__atc {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mm-accent) !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__atc:hover { opacity: 0.78 !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__atc:focus-visible { outline: 2px solid var(--mm-accent) !important; outline-offset: 4px !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__atc[data-busy="1"] { opacity: 0.6 !important; cursor: progress !important; }

body.mm-pdp-page .mm-pdp .mm-pdp__unavailable { opacity: 0.6 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; }

body.mm-pdp-page .mm-pdp .mm-pdp__swipe {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-transform: uppercase !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__swipe .scroll-line { display: block !important; }   /* a span here, so it needs to be a block to take its 1x60 box */
}

/* ---------- section bar ---------- */

body.mm-pdp-page .mm-pdp .mm-pdp__section { scroll-margin-top: var(--mm-header-h, 140px) !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__bar {
  display: flex !important;
  align-items: center !important;
  background: var(--mm-band) !important;
  border-bottom: 2px solid #fff !important;
  box-sizing: content-box !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__bar-list {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__bar-link { text-transform: uppercase !important; white-space: nowrap !important; transition: color 0.2s ease !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__bar-link.is-current { color: var(--mm-accent) !important; }
a.mm-pdp__bar-link:not(.is-current):hover { color: var(--mm-accent) !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__bar-link.is-empty { cursor: default !important; }

/* ---------- Design ---------- */

body.mm-pdp-page .mm-pdp .mm-pdp__photo img {
  object-fit: cover !important;
  border-bottom: 2px solid #fff !important;   /* the hairline the references draw under each photo */
  box-sizing: border-box !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__design .mm-pdp__story .mm-pdp__story-title,
body.mm-pdp-page .mm-pdp .mm-pdp__story-copy,
body.mm-pdp-page .mm-pdp .mm-pdp__credit p { text-transform: uppercase !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__credit { display: flex !important; flex-direction: column !important; align-items: center !important; }

/* ---------- panels ---------- */

body.mm-pdp-page .mm-pdp .mm-pdp__panel {
  background: var(--mm-band) !important;
  border-bottom: 2px solid #fff !important;
}
body.mm-pdp-page .mm-pdp .mm-pdp__row { text-transform: uppercase !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__ship-icon svg { display: block !important; overflow: visible !important; }
body.mm-pdp-page .mm-pdp .mm-pdp__ship-icon text { font-family: var(--mm-mono) !important; }

/* ------------------------------------------------------------
   MOBILE / TABLET — stacked
   ------------------------------------------------------------ */
@media (max-width: 1099px) {

  body.mm-pdp-page .mm-pdp .mm-pdp__hero { display: flex !important; flex-direction: column !important; margin-top: var(--mm-below-header) !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__rule { display: none !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__media { position: relative !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__stage { position: relative !important; aspect-ratio: 16 / 9 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__main { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__sig { position: absolute !important; right: 4% !important; bottom: 5% !important; width: 18% !important; opacity: 0.62 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__sig[hidden] { display: none !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__heart { position: absolute !important; top: 0.4rem !important; right: 0.5rem !important; width: 44px !important; height: 44px !important; padding: 7px !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__thumbs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    border-bottom: 2px solid #fff !important;
    margin: 0 1rem !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__thumb { aspect-ratio: 16 / 9 !important; min-height: 44px !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.15rem !important;
    padding: 2rem 1rem 1.5rem !important;
    text-align: center !important;
  }
  body.mm-pdp-page .mm-pdp .mm-pdp__badge { display: flex !important; align-items: center !important; gap: 1rem !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__badge img { width: 46px !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__badge span { font-size: 0.95rem !important; letter-spacing: 0.18em !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__crumb { font-size: 0.8rem !important; letter-spacing: 0.09em !important; line-height: 2.6 !important; }   /* a comfortable tap target on the collection link */
  body.mm-pdp-page .mm-pdp .mm-pdp__hero .mm-pdp__info .mm-pdp__title.product_title { font-family: var(--mm-display) !important; font-size: clamp(2rem, 10vw, 3.4rem) !important; line-height: 1 !important; text-transform: uppercase !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__price { font-size: 1.6rem !important; letter-spacing: 0.03em !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__form { display: flex !important; align-items: center !important; gap: 1.5rem !important; flex-wrap: wrap !important; justify-content: center !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__qty { width: 110px !important; min-height: 44px !important; font-size: 1.15rem !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__step { min-width: 44px !important; min-height: 44px !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__atc { font-family: var(--mm-display) !important; font-size: 1.3rem !important; min-height: 44px !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__swipe span { font-size: 0.8rem !important; letter-spacing: 0.22em !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__swipe .scroll-line { margin-top: 12px !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__bar { margin-top: 2rem !important; min-height: 52px !important; overflow-x: auto !important; scrollbar-width: none !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__bar::-webkit-scrollbar { display: none !important; }
  /* all three labels fit a 360px phone without scrolling; wider labels would clip "SHIPPING &" */
  body.mm-pdp-page .mm-pdp .mm-pdp__bar-list { justify-content: center !important; gap: 1rem !important; padding: 0 0.75rem !important; width: 100% !important; box-sizing: border-box !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__bar-link { font-size: 0.66rem !important; letter-spacing: 0.1em !important; display: inline-flex !important; min-height: 44px !important; align-items: center !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__design,
body.mm-pdp-page .mm-pdp .mm-pdp__technical { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; padding: 2.5rem 1rem 0 !important; }   /* same 2.5rem above every section */
  body.mm-pdp-page .mm-pdp .mm-pdp__photo img { width: 100% !important; height: auto !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__photo--2 { max-width: 60% !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__design .mm-pdp__story .mm-pdp__story-title { font-size: 0.9rem !important; letter-spacing: 0.2em !important; line-height: 1.5 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__story-copy { margin-top: 0.9rem !important; font-size: 0.74rem !important; letter-spacing: 0.12em !important; line-height: 2 !important; }
  /* the authored line breaks are kept on desktop; on a phone the copy reflows */
  body.mm-pdp-page .mm-pdp .mm-pdp__story-copy br { display: none !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__credit { margin-top: 1rem !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__credit img { width: 96px !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__credit p { margin-top: 0.5rem !important; font-size: 0.72rem !important; letter-spacing: 0.16em !important; }

  body.mm-pdp-page .mm-pdp .mm-pdp__drawing img { width: 100% !important; max-width: 500px !important; margin: 0 auto !important; height: auto !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__ship { padding: 2.5rem 1rem 2rem !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__section--technical:has(+ .mm-pdp__section--shipping) .mm-pdp__technical { padding-bottom: 0 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__section--technical:has(+ .mm-pdp__section--shipping) .mm-pdp__panel:last-child { margin-bottom: 0 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__ship-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; margin-bottom: 2.25rem !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__ship-row .mm-pdp__panel { margin-bottom: 0 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__ship-icon { display: flex !important; justify-content: center !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__ship-icon svg { width: 72px !important; height: auto !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__panel { padding: 1rem 1.1rem 1.2rem !important; margin-bottom: 1rem !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__row { line-height: 1.75 !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__row + .mm-pdp__row { margin-top: 0.6rem !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__label { font-size: 0.92rem !important; letter-spacing: 0.16em !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__value { font-size: 0.72rem !important; letter-spacing: 0.12em !important; }
  body.mm-pdp-page .mm-pdp .mm-pdp__value br { display: none !important; }
}