/** Shopify CDN: Minification failed

Line 563:24 Unexpected "/"

**/
/*
 * MOODI Phase 7 — Product Experience
 * Edition selector, personalisation panel, configuration summary.
 * Monochrome only: #F5F5F5 #E5E5E5 #A3A3A3 #1A1A1A #121212 — no new
 * colour tokens. No rounded pill buttons, no gradients, no icons
 * beyond the existing Dawn caret already used by native selects.
 */

.moodi-edition,
.moodi-embroidery,
.moodi-config-summary {
  font-family: Helvetica, Arial, sans-serif;
  color: #121212;
  max-width: 100%;
  box-sizing: border-box;
}

.moodi-edition {
  margin: 2.4rem 0;
  padding-top: 2rem;
  border-top: 1px solid #E5E5E5;
}

.moodi-edition__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

.moodi-edition__count {
  margin: 0 0 2px;
  font-size: 13px;
  letter-spacing: .02em;
}

.moodi-edition__instruction {
  margin: 0 0 1.2rem;
  font-size: 13px;
  opacity: .6;
}

.moodi-edition__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
  border: none;
}

.moodi-edition__cell {
  position: relative;
  display: block;
}

.moodi-edition__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.moodi-edition__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 10px 4px;
  border: 1px solid #A3A3A3;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  user-select: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.moodi-edition__number {
  font-variant-numeric: tabular-nums;
}

/* Selected: full inversion, not colour-only — satisfies "state beyond
   colour alone" for anyone perceiving the border/fill difference but
   not hue, and gives keyboard/focus users an unambiguous landmark. */
.moodi-edition__input:checked + .moodi-edition__label {
  background: #121212;
  border-color: #121212;
  color: #F5F5F5;
}

.moodi-edition__input:focus-visible + .moodi-edition__label {
  outline: 2px solid #121212;
  outline-offset: 2px;
}

.moodi-edition__input:not(:disabled):hover + .moodi-edition__label {
  border-color: #121212;
}

/* Sold: visible, not hidden — struck through with a rule rather than
   removed or greyed to near-invisibility, and marked disabled/aria so
   it is skipped by keyboard navigation and announced correctly. */
.moodi-edition__cell.is-sold .moodi-edition__label {
  border-color: #E5E5E5;
  color: #A3A3A3;
  cursor: default;
}

.moodi-edition__sold-tag {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.moodi-edition__cell.is-sold .moodi-edition__number {
  text-decoration: line-through;
  text-decoration-color: #A3A3A3;
}

/* Size-incompatible: visually and semantically distinct from Sold.
   This number was never offered in the currently selected size — it
   is not scarcity, so it gets no strikethrough and no "Sold" tag, just
   a quieter, faded treatment. Still disabled (unselectable) and still
   announced to screen readers, via a visually-hidden string rendered
   in the snippet rather than a visible label, per the brief's
   preference for no extra visible label unless necessary. */
.moodi-edition__cell.is-incompatible .moodi-edition__label {
  border-color: #E5E5E5;
  color: #A3A3A3;
  opacity: .45;
  cursor: default;
}

.moodi-edition__scarcity {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
}

@media screen and (max-width: 749px) {
  .moodi-edition__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .moodi-edition__label {
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------- */

.moodi-embroidery {
  display: block;
  margin: 2rem 0;
  padding-top: 2rem;
  border-top: 1px solid #E5E5E5;
}

.moodi-embroidery__eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

.moodi-embroidery__optional {
  margin: 0 0 1.2rem;
  font-size: 12px;
  opacity: .5;
}

.moodi-embroidery__toggle {
  display: flex;
  gap: 2px;
  margin: 0 0 1.2rem;
  padding: 0;
  border: none;
}

.moodi-embroidery__toggle-cell {
  flex: 1 1 0;
}

.moodi-embroidery__toggle-cell input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.moodi-embroidery__toggle-cell label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #A3A3A3;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.moodi-embroidery__toggle-cell input:checked + label {
  background: #121212;
  border-color: #121212;
  color: #F5F5F5;
}

.moodi-embroidery__toggle-cell input:focus-visible + label {
  outline: 2px solid #121212;
  outline-offset: 2px;
}

.moodi-embroidery__addon-price {
  opacity: .7;
  font-size: 11px;
}

.moodi-embroidery__fields {
  display: grid;
  gap: 1.2rem;
  overflow: hidden;
  max-height: 400px;
  transition: max-height 320ms ease, opacity 320ms ease;
  opacity: 1;
}

.moodi-embroidery__fields[hidden] {
  display: grid;
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.moodi-embroidery__field .form__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}

.moodi-embroidery__text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid #A3A3A3;
  background: #F5F5F5;
  color: #121212;
  font-family: inherit;
  font-size: 14px;
}

.moodi-embroidery__text-input:focus-visible {
  outline: 2px solid #121212;
  outline-offset: 1px;
}

.moodi-embroidery__text-input[aria-invalid="true"] {
  border-color: #121212;
}

.moodi-embroidery__count {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: .04em;
  opacity: .6;
  text-align: right;
}

.moodi-embroidery__error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #121212;
  font-size: 12px;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------- */

.moodi-config-summary {
  margin: 2rem 0;
  padding: 1.6rem;
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
}

.moodi-config-summary__eyebrow {
  margin: 0 0 1rem;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

.moodi-config-summary__rows {
  margin: 0;
  display: grid;
  gap: 10px;
}

.moodi-config-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E5E5E5;
}

.moodi-config-summary__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.moodi-config-summary__row dt {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}

.moodi-config-summary__row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .moodi-edition__label,
  .moodi-embroidery__toggle-cell label,
  .moodi-embroidery__fields {
    transition: none !important;
  }
}

/* ==================================================================
 * MOODI Phase 8 — Product information editorial hierarchy
 * Scoped strictly to the product page's info column (and, for the
 * description fix, the product description itself). No markup
 * changes, no new colours — reuses the same monochrome tokens as the
 * rest of this stylesheet. Dawn's own structure/classnames are the
 * hooks; nothing here is a broad theme refactor.
 * ================================================================ */

/* --- Title + price + tax/installment: read as one identity block,
   not three unrelated stock-Dawn elements. --- */

.product__info-container > .product__title {
  margin-bottom: 2px;
}

.product__info-container > .product__title h1,
.product__info-container > .product__title .h1 {
  font-size: clamp(26px, 2.2vw, 38px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.18;
}

.product__info-container > [id^="price-"] {
  margin-top: 4px;
  margin-bottom: 0;
}

.product__info-container .price--large {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.product__info-container .product__tax {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.55;
}

.product__info-container .installment {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.55;
}

/* Give the whole identity cluster (title/price/tax/installment) one
   shared bottom rule instead of each element carrying its own,
   mismatched Dawn spacing before Size/Edition begins. */
.product__info-container > .product__title ~ .product-form__input:first-of-type,
.product__info-container > .product__title ~ variant-selects {
  margin-top: 2.4rem;
}

/* --- Size (native pill picker): align with the Edition/embroidery
   visual language — bordered rectangles, uppercase legend, full
   inversion on selection — instead of default Dawn pill buttons. --- */

.product__info-container .product-form__input--pill legend {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.product__info-container .product-form__input--pill {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 2.4rem;
  padding: 0;
  border: none;
}

.product__info-container .product-form__input--pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.product__info-container .product-form__input--pill label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #A3A3A3;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.product__info-container .product-form__input--pill input[type="radio"]:checked + label {
  background: #121212;
  border-color: #121212;
  color: #F5F5F5;
}

.product__info-container .product-form__input--pill input[type="radio"]:focus-visible + label {
  outline: 2px solid #121212;
  outline-offset: 2px;
}

.product__info-container .product-form__input--pill input.disabled + label {
  border-color: #E5E5E5;
  color: #A3A3A3;
  opacity: 0.45;
  cursor: default;
}

/* --- Quantity: visually de-emphasised — every Edition is a single
   physical piece (inventory 1), so this should read as a quiet
   utility control, not compete with Edition/Personalisation/Add to
   Bag for attention. Functionality and markup are untouched. --- */

.product__info-container .product-form__quantity {
  margin-top: 1.6rem;
  margin-bottom: 1.2rem;
  opacity: 0.7;
}

.product__info-container .product-form__quantity .quantity__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}

.product__info-container .product-form__quantity .quantity {
  transform: scale(0.88);
  transform-origin: left center;
}

/* --- Description: correct the "bullet / large gap / text" rhythm.
   Shopify's rich text editor wraps each <li>'s content in its own
   <p>, which then inherits this theme's full paragraph margin even
   inside a list — that's the actual cause of the oversized gaps, not
   the description content itself (untouched, wording unchanged). --- */

.product__description.rte li {
  margin-bottom: 6px;
}

.product__description.rte li p {
  margin: 0;
  display: inline;
}

.product__description.rte ul,
.product__description.rte ol {
  margin-top: 4px;
  margin-bottom: 1.6rem;
}

.product__description.rte h3 {
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Collapse empty heading spacers (an artifact of the rich text
   editor, e.g. an <h3> containing only a <br>) down to a plain
   section break instead of a second, redundant blank heading. */
.product__description.rte h3:empty,
.product__description.rte h3:has(> br:only-child) {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
  height: 0;
  overflow: hidden;
}

.product__description.rte p {
  margin-top: 0;
  margin-bottom: 1.2rem;
}

.product__description.rte p:last-child {
  margin-bottom: 0;
}

/* ==================================================================
 * MOODI Phase 9 — Product Experience V2
 * Editorial / collectible-object / configuration-interface redesign
 * of the product page. Additive only: every rule below is scoped
 * under .moodi-pe-v2 (added to the existing `.product` grid wrapper
 * in sections/main-product.liquid) or targets classes added
 * specifically for V2 (moodi-pe-*), so nothing here can affect any
 * other template. No functional markup, no new JS, no new colours —
 * same #121212 / #1A1A1A / #F5F5F5 / #E5E5E5 monochrome tokens as
 * Phase 7/8 above. FIX 07's data-option-name / data-option-value-id /
 * <variant-selects> / variant-matrix script, the personalisation
 * data-moodi-embroidery-* hooks, and the configuration-summary
 * data-has-*/data-value/data-row contract are all untouched by this
 * layer — only their visual presentation changes.
 * ================================================================ */

/* --- Vendor eyebrow: reads as an editorial label, not Shopify
   vendor metadata. Content itself (product.vendor) is untouched. --- */

.moodi-pe-commerce .product__text.caption-with-letter-spacing {
  margin: 0 0 1.2rem;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

/* --- Title: editorial authority without oversized fashion-template
   scale. Overrides the Phase 8 clamp with a slightly more confident
   but still restrained range. --- */

.moodi-pe-commerce .product__title h1,
.moodi-pe-commerce .product__title .h1 {
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.16;
}

/* --- Price: quieter than title, per brief. --- */

.moodi-pe-commerce .price--large {
  font-size: 16px;
  font-weight: 400;
  opacity: .85;
}

/* --- Hairline rhythm between configuration zones. Added ahead of
   Size (the variant-selects block) so Size/Edition/Personalisation
   all open the same way — a single hairline, an 11px/.14em/uppercase
   label, generous top space — regardless of which zone it is. --- */

.moodi-pe-commerce variant-selects {
  display: block;
  padding-top: 2rem;
  margin-top: 2.4rem;
  border-top: 1px solid #E5E5E5;
}

.moodi-pe-commerce variant-selects > .product-form__input:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

/* Edition already carries its own hairline (Phase 7) when it follows
   Size within the same variant-selects block; avoid a doubled rule
   immediately above it. */
.moodi-pe-commerce variant-selects .moodi-edition {
  border-top: 1px solid #E5E5E5;
}

/* Size legend: quieter, consistent with the Edition eyebrow it now
   visually pairs with. */
.moodi-pe-commerce .product-form__input--pill legend {
  opacity: .6;
}

/* --- Personalisation and Configuration Summary inherit the same
   hairline-open rhythm as Size/Edition, instead of each block having
   its own slightly different top spacing. --- */

.moodi-pe-commerce .moodi-embroidery {
  margin: 0;
  padding-top: 2rem;
  margin-top: 2.4rem;
}

/* --- Configuration Summary: compact specification sheet, not a
   boxed checkout summary. Removes the Phase 7 card background/border
   in favour of hairlines + typography only. --- */

.moodi-pe-commerce .moodi-config-summary {
  margin: 0;
  padding: 0;
  padding-top: 2rem;
  margin-top: 2.4rem;
  background: none;
  border: none;
  border-top: 1px solid #E5E5E5;
}

.moodi-pe-commerce .moodi-config-summary__row {
  padding-bottom: 8px;
}

/* --- Quantity: kept visually secondary (Phase 8 already de-weights
   it); tighten its top space so it reads as a small utility line
   directly above Add to Bag rather than its own section. --- */

.moodi-pe-commerce .product-form__quantity {
  margin-top: 1.2rem;
  margin-bottom: 1rem;
}

/* --- Add to Bag: strong, flat, monochrome. Overrides Dawn's default
   button chrome (radius/shadow) only inside the commerce panel, so
   no other button anywhere else in the theme is affected. --- */

.moodi-pe-commerce .product-form__submit {
  border-radius: 0;
  box-shadow: none;
  background: #121212;
  border: 1px solid #121212;
  color: #F5F5F5;
  min-height: 52px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.moodi-pe-commerce .product-form__submit:disabled {
  background: #E5E5E5;
  border-color: #E5E5E5;
  color: #A3A3A3;
}

.moodi-pe-commerce .product-form__buttons {
  margin-top: 1.6rem;
}

/* --- "View full details" stock link: not part of the V2 hierarchy,
   quieted rather than removed (still present for accessibility/no-js
   fallback paths Dawn itself may rely on). --- */

.moodi-pe-commerce .product__view-details {
  margin-top: 1.6rem;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .5;
}

/* ------------------------------------------------------------------
 * Secondary media rhythm — applied to the EXISTING gallery markup
 * (snippets/product-media-gallery.liquid is not modified) so no
 * media is duplicated and the stock slider / sticky-gallery / modal
 * JS keeps operating on exactly the DOM it already expects. The
 * first slide is the hero; every slide after it is treated as
 * secondary/editorial and given varied width, offset and spacing so
 * the sequence reads as a considered rhythm rather than a uniform
 * stacked list, on any gallery_layout value that stacks on desktop.
 * ---------------------------------------------------------------- */

.moodi-pe-v2 .product__media-list {
  gap: 0;
  row-gap: 0;
}

.moodi-pe-v2 .product__media-list .product__media-item {
  margin-bottom: 4.8rem;
}

.moodi-pe-v2 .product__media-list .product__media-item:last-child {
  margin-bottom: 0;
}

.moodi-pe-v2 .product__media-list .product__media-item.is-active {
  margin-bottom: 6.4rem;
}

/* Mobile: the customer must reach Size/Edition/Add to Bag without
   scrolling through the full gallery first. Only the featured/active
   slide stays inline at the top of the page; every other slide is
   hidden here rather than removed, so it is still real DOM the
   existing "view full details"/zoom modal-opener can present in
   full — nothing is deleted, nothing is duplicated. */
@media screen and (max-width: 749px) {
  .moodi-pe-v2 .product__media-list .product__media-item:not(.is-active) {
    display: none;
  }

  .moodi-pe-v2 .product__media-item.is-active {
    margin-bottom: 0;
  }

  .moodi-pe-v2 .product-media-container.constrain-height {
    max-height: 78vh;
  }
}

/* ------------------------------------------------------------------
 * Product Story — the long-form description, moved out of the
 * commerce panel to its own full-width editorial section below the
 * hero. Content is 100% product.description, untouched; only
 * typography/rhythm and an automatic (CSS-counter) heading number
 * are added. Empty/placeholder <h3> spacers (Phase 8's existing
 * defensive rule) are explicitly excluded from the counter so they
 * cannot cause a skipped number.
 * ---------------------------------------------------------------- */

.moodi-pe-story {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 6vh;
  padding-bottom: 6vh;
  border-top: 1px solid #E5E5E5;
}

.moodi-pe-story__eyebrow {
  margin: 0 0 2.4rem;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

.moodi-pe-story__content.rte {
  counter-reset: moodi-story-heading;
}

.moodi-pe-story__content.rte h3:not(:empty):not(:has(> br:only-child)) {
  counter-increment: moodi-story-heading;
  position: relative;
}

.moodi-pe-story__content.rte h3:not(:empty):not(:has(> br:only-child))::before {
  content: counter(moodi-story-heading, decimal-leading-zero) " / ";
  font-variant-numeric: tabular-nums;
  opacity: .5;
}

.moodi-pe-story__content.rte p {
  font-size: 15px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
 * Final Action — a restrained commerce return after Story/Secondary
 * Media. Deliberately read-only (title + price + share, no second
 * <form>, no second Add to Bag): see build report, section Q, for
 * why a duplicate purchase form was judged an unnecessary risk here.
 * ---------------------------------------------------------------- */

.moodi-pe-final {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 6vh;
  padding-bottom: 8vh;
  border-top: 1px solid #E5E5E5;
  text-align: center;
}

.moodi-pe-final__eyebrow {
  margin: 0 0 1.2rem;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

.moodi-pe-final__title {
  margin: 0 0 4px;
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.moodi-pe-final__price {
  margin: 0 0 2.4rem;
  font-size: 15px;
  opacity: .7;
}

.moodi-pe-final__share {
  margin: 0 0 2.4rem;
}

.moodi-pe-final__return {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid #121212;
  padding-bottom: 2px;
}

.moodi-pe-final__return:focus-visible {
  outline: 2px solid #121212;
  outline-offset: 2px;
}

@media screen and (max-width: 749px) {
  .moodi-pe-story,
  .moodi-pe-final {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 4vh;
  }
}


/* ==================================================================
 * MOODI Phase 9.1 — Visual Correction after Merchant QA
 * Presentation-only follow-up to Phase 9. No commerce logic, no new
 * JS, no product/theme data touched. Every rule below either targets
 * a class already introduced in Phase 9 (moodi-pe-*) or the existing
 * .rte description markup rendered by sections/main-product.liquid —
 * nothing here can affect any other template. Same #121212 / #1A1A1A
 * / #F5F5F5 / #E5E5E5 monochrome tokens as Phase 7/8/9.
 * ================================================================ */

/* --- Problem 2: remove Shopify-like noise from the primary commerce
   panel (tax/duties/shipping-policy note, Shop Pay installment line).
   Presentation only — the underlying Liquid/logic that computes these
   (tax settings, payment_terms) is completely untouched; this only
   hides their rendered output inside the V2 commerce panel. --- */

.moodi-pe-commerce .product__tax {
  display: none;
}

.moodi-pe-commerce form.installment {
  display: none;
}

/* ------------------------------------------------------------------
 * Problem 3/4 — Product Story: a more intentional editorial
 * composition instead of a narrow column in a sea of empty space.
 * Every selector below targets structure, not content — product.
 * description itself is unchanged; only how the existing paragraphs/
 * headings/lists are composed changes.
 * ---------------------------------------------------------------- */

.moodi-pe-story {
  max-width: 880px;
}

/* The "MOODI / Product" label reads as an anchored section marker —
   a labelled hairline — rather than a stray line floating above a
   text document. */
.moodi-pe-story__eyebrow {
  padding-bottom: 1.6rem;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 3.2rem;
}

/* Intro copy (any paragraph before the first structured heading):
   stronger presence, more breathing room, comfortably narrower than
   the section's own max-width so it reads as a considered opening
   statement. */
.moodi-pe-story__content.rte > p {
  max-width: 800px;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 1.6rem;
}

/* Structured information headings (Design Details / Composition /
   Fit / Care / Collector's Edition, wherever they genuinely exist):
   a narrow number column + wide title column on one line, so each
   reads as a specification-sheet section marker. The counter itself
   (counter-reset/increment, the ::before content string, and the
   :not(:empty):not(:has(> br:only-child)) guard against empty h3
   spacers) is unchanged from Phase 9 — this only adds the two-column
   layout and a hairline opening each section. */
.moodi-pe-story__content.rte h3:not(:empty):not(:has(> br:only-child)) {
  display: grid;
  grid-template-columns: minmax(56px, 72px) 1fr;
  column-gap: 20px;
  align-items: baseline;
  margin-top: 4.8rem;
  margin-bottom: 1.6rem;
  padding-top: 2.4rem;
  border-top: 1px solid #E5E5E5;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.moodi-pe-story__content.rte h3:not(:empty):not(:has(> br:only-child))::before {
  grid-column: 1;
}

/* Everything that follows a real heading (until the next one) is
   treated as that section's body: indented to sit under the title
   column, narrower and quieter than the intro copy above, so the
   page reads as number-column / content-column even though the
   underlying markup is a plain, unmodified flow. Uses the standard
   general-sibling combinator (~), so it naturally covers every
   section's body regardless of how many paragraphs/lists it has,
   with no assumption about content length or count. */
.moodi-pe-story__content.rte h3:not(:empty):not(:has(> br:only-child)) ~ :not(h3) {
  margin-left: min(92px, 22%);
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
}

/* Design Details (and any other) list: existing list items, existing
   text, restyled away from a raw browser bullet list into a quiet,
   hairline-separated editorial list. descriptionHtml itself is not
   touched — this is presentation only. */
.moodi-pe-story__content.rte ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

.moodi-pe-story__content.rte ul li {
  position: relative;
  padding: 10px 0 10px 1.4em;
  border-top: 1px solid #E5E5E5;
}

.moodi-pe-story__content.rte ul li:first-child {
  border-top: none;
}

.moodi-pe-story__content.rte ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  opacity: .5;
}

/* ------------------------------------------------------------------
 * Problem 5 — Final Action: a much more restrained closing, and a
 * fix for the un-styled return link, which had no color/
 * text-decoration override and was therefore rendering with the
 * browser's default blue/underlined link treatment.
 * ---------------------------------------------------------------- */

.moodi-pe-final__return,
.moodi-pe-final__return:visited {
  color: #121212;
  text-decoration: none;
}

/* Share, if the product/theme has it enabled, no longer reads as a
   second standalone element in this closing area: same render call,
   same functionality, just quieter — smaller, muted, tight margin
   instead of its own generous block spacing. */
.moodi-pe-final__share {
  margin: 0 0 1.6rem;
  font-size: 11px;
  letter-spacing: .04em;
  opacity: .55;
}

@media screen and (max-width: 749px) {
  /* Mobile: no two-column information grid. Section body content
     runs full width under its heading instead of being indented,
     while the heading itself keeps its compact number/title line. */
  .moodi-pe-story__content.rte h3:not(:empty):not(:has(> br:only-child)) ~ :not(h3) {
    margin-left: 0;
    max-width: 100%;
  }

  .moodi-pe-story__content.rte h3:not(:empty):not(:has(> br:only-child)) {
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
  }

  /* Restore a tighter mobile vertical rhythm for the closing section
     (kept independent of any desktop-only spacing decisions above). */
  .moodi-pe-final {
    padding-top: 6vh;
    padding-bottom: 8vh;
  }
}


/* ==================================================================
 * MOODI Phase 9.2 — Editorial Media Composition
 * Presentation-only. Reuses the existing product media DOM exactly
 * as Dawn/Phase 9 render it - no new markup, no duplicated media, no
 * second gallery, no new JavaScript. Every declaration below either
 * refines the desktop nth-child rhythm Phase 9 already established,
 * or (mobile only) uses display:contents so the same .product grid
 * that already places hero image vs. commerce panel can also carry
 * the secondary media - see the mobile block's own comment for the
 * full mechanism and its accessibility/functional implications.
 * ================================================================ */

/* --- Desktop/tablet (>=750px): replace Phase 9's 84%/84% two-up
   rhythm, which still read as a standard ecommerce image grid, with
   an asymmetric lookbook pacing - large/offset, then smaller/
   opposite, with a deliberate "breath" back to a larger placement
   rather than a mechanical checkerboard. Same selectors Phase 9
   already used for these exact elements.

   max-width is added alongside each width below - this is the actual
   fix for FIX 10. Dawn's own product-page CSS sets, on the same
   .product__media-item elements, a competing max-width: this
   stylesheet's `width` values were already winning the cascade (this
   selector's specificity is higher than Dawn's), but `max-width` was
   never declared here, so Dawn's own max-width rules were free to
   clamp the rendered size regardless: base.css's unconditional
   `.grid--1-col .grid__item { max-width: 100% }` left this fully
   uncapped at tablet widths (750-989px), so flex-grow: 1 (also from
   base.css's `.grid__item`, never overridden here) then stretched
   each secondary image to fill its row at 100%; at desktop widths
   (>=990px) section-main-product.css's `.product--stacked
   .product__media-item { max-width: calc(50% - ...) }` clamped every
   secondary image to ~50% instead. Declaring max-width here, matching
   each intended width exactly, wins that property too (same selector,
   same specificity) and stops flex-grow from expanding past the
   intended editorial proportions at any width from 750px up - no
   change to flex-grow/flex-basis is needed. Verified via live
   getComputedStyle()/getBoundingClientRect() on the DEV preview at
   both ~820px and ~1280px before this was written. --- */

@media screen and (min-width: 750px) {
  .moodi-pe-v2 .product__media-list .product__media-item:nth-child(2) {
    width: 70%;
    max-width: 70%;
    margin-left: auto;
    margin-right: 0;
  }

  .moodi-pe-v2 .product__media-list .product__media-item:nth-child(3) {
    width: 48%;
    max-width: 48%;
    margin-left: 0;
    margin-right: auto;
  }

  /* A deliberate "breath" back to a large placement, so a 4+ image
     product never reads as a repeating offset pattern. */
  .moodi-pe-v2 .product__media-list .product__media-item:nth-child(4) {
    width: 80%;
    max-width: 80%;
    margin-left: 0;
    margin-right: auto;
  }

  /* Fifth/sixth: smaller, detail-scale placements. Alternates sides
     again (right, then left) rather than mirroring 2/3 exactly, so a
     6-image product doesn't read as two repeated pairs. */
  .moodi-pe-v2 .product__media-list .product__media-item:nth-child(5) {
    width: 46%;
    max-width: 46%;
    margin-left: auto;
    margin-right: 0;
  }

  .moodi-pe-v2 .product__media-list .product__media-item:nth-child(6) {
    width: 60%;
    max-width: 60%;
    margin-left: 0;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------------
 * Mobile (<=749px): secondary media after the commerce experience.
 *
 * The DOM order on this page has always been: [hero + secondary
 * media] then [title / Size / Edition / Personalisation / Summary /
 * Quantity / Add to Cart]. The approved mobile priority keeps the
 * hero first, then commerce - unchanged below. What changes is where
 * the SECONDARY media appears: previously Phase 9 hid every slide but
 * the hero entirely on mobile (display:none); the merchant has now
 * asked for those images to be visible, in a normal vertical
 * sequence, positioned AFTER the full commerce experience - without a
 * second gallery, without moving or duplicating any media in the DOM,
 * and without new JavaScript.
 *
 * display:contents removes an element's own box from layout while
 * leaving the element itself, its attributes, its event bindings and
 * its children completely untouched in the DOM - it is a rendering
 * instruction, not a DOM change. Applying it to every wrapper between
 * the outer .product grid and each individual .product__media-item
 * (the .product__media-wrapper div, the <media-gallery> and
 * <slider-component> custom elements, and the .product__media-list
 * <ul>) promotes each .product__media-item to be a direct item of the
 * SAME .product grid that already places the commerce panel - which
 * is what lets a plain CSS `order` value interleave hero, commerce
 * and secondary media into one sequence. Structural selectors such as
 * :nth-child, :last-child and .is-active are computed from the DOM
 * tree (not the box tree), so nothing elsewhere in this stylesheet,
 * or in Dawn's own CSS, changes what it matches. Every zoom/
 * modal-opener trigger and every data-media-id lives inside the
 * .product__media-item itself, several levels below anything
 * unwrapped here, so the media modal is completely unaffected.
 *
 * The one real behavior change is that the native Dawn slider
 * (horizontal swipe with prev/next arrows) is intentionally retired
 * on mobile in favor of this vertical sequence, per the brief's own
 * "do not require horizontal swiping in this phase" - so the now
 * purposeless prev/next/counter row is hidden below, alongside it.
 *
 * Scoped strictly to .moodi-pe-v2 and to this page's own custom
 * elements, so none of this can affect any other section/template.
 * ---------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  .moodi-pe-v2 .product__media-wrapper,
  .moodi-pe-v2 media-gallery,
  .moodi-pe-v2 media-gallery > slider-component.slider-mobile-gutter:not(.thumbnail-slider),
  .moodi-pe-v2 .product__media-list {
    display: contents;
  }

  /* Visual order for what are now direct .product grid children:
     hero first, the full commerce panel second, every other media
     item third (they keep their own relative sequence via normal
     document order, since equal `order` values sort by DOM
     position). The skip-to-content link and the aria-live gallery
     status region are both visually-hidden utility elements that
     display:contents also promotes to this level; ordering them with
     the hero keeps them out of the way without changing what they do. */
  .product.moodi-pe-v2 .product__media-item.is-active,
  .product.moodi-pe-v2 .skip-to-content-link,
  .product.moodi-pe-v2 media-gallery > [role='status'] {
    order: 1;
  }

  .product.moodi-pe-v2 .product__info-wrapper {
    order: 2;
  }

  .product.moodi-pe-v2 .product__media-item:not(.is-active),
  .product.moodi-pe-v2 .product__xr-button {
    order: 3;
  }

  /* Un-hide every non-hero media item (Phase 9 hid these entirely on
     mobile; same selector, later in the cascade, restores Dawn's own
     flex/centering box model for a slide instead of display:none). */
  .moodi-pe-v2 .product__media-list .product__media-item:not(.is-active) {
    display: flex;
  }

  /* Reset Dawn's horizontal-peek-slider width/edge-bleed math, which
     no longer applies now that this is a plain vertical list rather
     than a swipeable slider. Hero's own existing mobile margin
     (Phase 9's .is-active rule, untouched by this phase) is left
     exactly as the merchant already approved. */
  .product.moodi-pe-v2 .product__media-item {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Editorial widths for the secondary sequence - different scales,
     alternating sides, never a cramped two-column grid. A deliberate
     gap opens the sequence, separating it from the commerce panel
     above it. */
  .product.moodi-pe-v2 .product__media-item:nth-child(2) {
    width: 96%;
    margin-left: auto;
    margin-right: 0;
    margin-top: 6vh;
  }

  .product.moodi-pe-v2 .product__media-item:nth-child(3) {
    width: 84%;
    margin-left: 0;
    margin-right: auto;
  }

  .product.moodi-pe-v2 .product__media-item:nth-child(4) {
    width: 96%;
    margin-left: 0;
    margin-right: auto;
  }

  .product.moodi-pe-v2 .product__media-item:nth-child(5) {
    width: 84%;
    margin-left: auto;
    margin-right: 0;
  }

  .product.moodi-pe-v2 .product__media-item:nth-child(6) {
    width: 90%;
    margin-left: 0;
    margin-right: auto;
  }

  /* The native slider's prev/next arrows and slide counter have
     nothing meaningful left to control once every slide renders at
     once in a vertical sequence - hidden rather than left in place as
     non-functional controls. The zoom/modal-opener button inside each
     .product__media-item is a separate element and is untouched. */
  .moodi-pe-v2 .slider-buttons {
    display: none;
  }
}