/** Shopify CDN: Minification failed

Line 517:29 Unexpected "("
Line 519:76 Unterminated string token
Line 527:34 Unterminated string token

**/
/*
============================================================================
PERSONALIZE OPTIONS — WIZARD MODE CSS v3.19
Milano Wigs · Palo Alto 9.1

CHANGE (v3.18): Splitit fix — third attempt, simplest approach.
- v3.17 used :has() with !important to force column-flex on the wrapper.
  Either the rule never applied (deployment / cache / specificity
  surprise) or browser didn't honor :has() in this DOM shape. Both
  unconfirmed, but the visible layout in Kevin's 2026-05-26 screenshots
  showed Splitit still inline with price.
- THIS VERSION: drop :has(), drop flex-column, drop !important war.
  Simply set .product__price-wrapper to display:block. Block-level
  parent + .product__price as inline-flex + .milano-splitit-fallback
  with its own display:flex (block-level) means children stack
  naturally. No specificity battle, no browser feature dependency.
- Unscoped from milano-wizard-mode \u2014 applies on every PDP. The wrapper
  on accessory / non-wizard PDPs has no Splitit child, so the block
  layout is a no-op (just one .product__price child).
- min-height retained to hold space during theme's variant-click
  re-render flicker.

CHANGE (v3.17): Splitit fix + Cap-order CSS/JS reconciliation.
- v3.16 fix didn't visibly land. Two reasons: (1) the column-direction rule
  was scoped to body.milano-wizard-mode and there can be a brief window
  before transform() finishes where the class isn't set yet, leaving Splitit
  in the old inline-flex/nowrap state; (2) the older v3.13 sibling-selector
  rules (flex-shrink:0, overflow:hidden, white-space:nowrap on splitit-
  fallback) were still loaded above and contributed to the trapped-inline
  rendering when ancestor layout fell back.
- SPLITIT FIX:
  (a) Use :has() to scope the column-direction layout only to wrappers that
      actually contain a splitit element \u2014 no body class dependency. Works
      on Grace, Naomi, every wizard PDP, regardless of transform timing.
  (b) Remove flex-shrink/overflow/white-space on .milano-splitit-fallback
      so its text can wrap if the wrapper narrows (mobile portrait).
  (c) min-height on .product__price-wrapper holds space when theme's
      renderProductInfo() destroys/recreates inner content on variant click.
      Prevents the layout-shift flicker that made Splitit "disappear and
      reappear" when clicking length / lace / cap variants.
  (d) !important on the column declarations to overcome any theme- or
      app-injected inline styles.
- CAP ORDER FIX: removed `order: -1` from .bold_option.milano-always-visible
  on desktop (was at line 2263). v1.6.43 wizard JS reorderForGrace now
  physically places Cap AFTER Length in the DOM on every viewport. The
  CSS `order: -1` was a leftover from v1.6.40 (before the physical DOM
  move) and was inverting Cap to first position visually \u2014 the bug Kevin
  reported on 2026-05-26.

CHANGE (v3.16): Splitit installment row — root-cause fix.
- THE BUG: v3.13 added flex-basis:100% to .milano-splitit-fallback /
  .splitit-wrapper / [data-splitit] to push them to their own line. But
  the rule never worked because the parent .product__price-wrapper had
  display:inline-flex + flex-wrap:nowrap. With nowrap, flex-basis:100%
  on a child cannot wrap — it just overflows the wrapper width, which
  is what produced the visible overflow on both desktop and mobile.
- THE FIX: .product__price-wrapper now uses display:flex (block-level)
  + flex-direction:column + align-items:flex-start. .product__price
  stays inline-flex internally so strike + sale + currency stay on one
  baseline-aligned row; .milano-splitit-fallback naturally drops to a
  new line as a column sibling.
- The v3.13 flex-basis:100% rule on .milano-splitit-fallback becomes a
  no-op under column direction but is left in place as belt-and-suspenders
  in case some future ancestor reverts to row direction.
- Affects all PDPs in wizard mode (body.milano-wizard-mode), not just
  Grace. Pure layout fix; no behavior or copy change.

CHANGE (v3.15): Batch D — density pass + secondary-action softening.
- Cap/lace radio buttons: min-height 56 → 48px, padding 10 → 8px vertical.
  Still well above the 44px Apple HIG touch target; reclaims 8px per row.
- Review card title (.mw-review-card__title): letter-spacing 0.08 → 0.12em
  for a more editorial, polished feel on the all-caps milestone label.
- Review card edit (.mw-review-card__edit): bordered pill button → text
  link with arrow. Secondary action shouldn't compete with ADD TO CART
  below. Underline reveals on hover.
- Consult block (.mw-consult): padding 16/18 → 14/16; margin-top 16 → 12;
  title 16 → 15px; text 13 → 12.5px. Tighter without feeling cramped.

CHANGE (v3.14): UX polish — help-pill weight, trust microcopy, density.
- TRUST MICROCOPY (.mw-trust-micro): italic 12px line that sits between
  Lace Front and the Personalize segmented toggle. Subtle by design;
  must not compete with the toggle below it.
- HELP PILLS — LIGHTER WEIGHT:
  • .mw-lace-help ("Compare") + .mw-inline-help (face-framing etc.):
    border:transparent default, brown-light text. Border appears only on
    hover. Text-link feel, much lighter than before. They now read as
    secondary navigation, not primary CTAs.
  • .mw-step-help ("See color examples"): retained accent color +
    border (this one IS contextually important — kept visible) but
    softened from 1.5px → 1px border weight.
- STEP PILL CONNECTORS REMOVED: .mw-pill__sep hidden. The dashes between
  Secure / Color / Cut / Style added visual noise without aiding
  comprehension. Pill positions already imply sequence.
- OPTION PRICES LIGHTER: .bold_option_value_price weight 500 → 400,
  color brown-med → brown-light, size 14 → 13.5px. Names dominate the
  scan; prices are secondary.
- PERSONALIZE TOGGLE top margin 8 → 4px. The previously-bare gap above
  the toggle is now filled by the trust microcopy, so the toggle itself
  doesn't need to carry that vertical space.

CHANGE (v3.13): Splitit layout stability + redundant mobile rule cleanup.
- SPLITIT always full-width: dropped the .mw-has-services conditional gate
  on .splitit-wrapper / [data-splitit] / .milano-splitit-fallback. These
  now have flex-basis:100% applied unconditionally, so Splitit sits on its
  own line whether the (+$X services) context is present or not. Eliminates
  the layout shift that happened when clearing selections removed services
  and the price area re-wrapped underneath.
- Removed the mobile-media duplicate of the Splitit flex-basis rule
  (redundant with the unconditional base rule above). The
  shopify-payment-terms mobile rule was kept because desktop only forces
  it 100%-wide when services are present.
- No changes to the existing mwSlideFadeIn keyframe; v1.6.6 of the wizard
  JS reuses it for the step-transition entrance on option rows, keeping
  hint + rows on the same animation curve for coordinated motion.

CHANGE (v3.12): Sale teardown + open-animation snappiness.
- REMOVED sale-specific selectors:
  .mw-review-card__strike, .mw-review-card__savings (+icon, +strong),
  .mw-opt-price-orig, .mw-opt-price-sale, and their mobile/reduced-motion refs.
  Strikethrough pricing + "You save $X" badge no longer rendered by JS, so
  the CSS for them is dead weight. (.mw-review-card__total-line stays — used
  for the regular total row regardless of sale state.)
- DESCRIPTION animation reworked for smoothness:
  • Replaced 5 simultaneous property transitions (max-height, padding,
    opacity, border-color, background-color) with a leaner set: max-height,
    opacity, transform.
  • Transform-based slide (translateY -6px → 0) is GPU-composited and
    coordinates better with the panel-open animation below it.
  • Duration cut from 0.35s → 0.28s; spring-like easing
    cubic-bezier(0.32, 0.72, 0, 1) for that "iOS native" feel.
  • Border + background applied at all times (transparent when collapsed),
    saving the browser two extra transitions per open/close.

CHANGE (v3.11): Segmented control redesign + motion polish.
- SEGMENTED REDESIGN: dropped the unified cream container in favor of two
  distinct card-buttons (matching the cap-size button pattern customers
  already recognize). Inactive cell: white bg + 1.5px brown border + brown
  text. Active cell: filled accent brown + white text + soft elevation.
  Hover on inactive lifts 1px with accent border — clear "tap me" cue.
- CHECKMARK ANIMATES IN/OUT: width 0→20px + opacity transition on state
  change. Active cell looks decided; inactive cell stays clean (no empty
  circle clutter).
- PERSONALIZE DESC: now slides down on open (max-height + padding + opacity
  transitions) and collapses on close. Borders fade between transparent and
  card-border so the description merges cleanly with the panel below it
  when open, and disappears completely when collapsed.
- HINT + SUBHINT entrance animation on each step change. Subtle 6px fade-up
  driven by a JS-added .mw-anim-enter class (force-reflowed for reliable
  replay across consecutive step changes).
- VIRTUAL CUT CHECK: bouncy scale-in (cubic-bezier with overshoot) when the
  card is selected.
- STEP DONE CHECKMARK: scale-pop on first activation.
- OPTION CARDS now show a visible selected state — accent border + faint
  warm-tint background — via :has(input:checked). Single rule, no JS.
- CONTINUE button hover slightly more present (translateY -1px + shadow).
- All new motion gated behind prefers-reduced-motion.

CHANGE (v3.10): Segmented entry + nav clarity + virtual cut skip + viewed-pill fix.
- NEW .mw-segmented + .mw-segmented__cell: two-cell segmented control that
  replaces the toggle switch in wizard mode. Cells:
    [✓ Ships as pictured]   [  Personalize it ]
  Active cell filled with accent brown + white text + visible checkmark.
  Inactive cell muted + outlined. Mobile-first with 52px min-height for
  comfortable middle-aged-user tap targets.
- Existing .personalize-toggle__label now `display:none` in wizard mode
  (the [data-personalize-input] checkbox inside remains accessible to
  personalize-options.js — programmatic .checked + change events still work).
- NEW .mw-personalize-desc: single node with two spans for mobile/desktop
  copy. Mobile concise, desktop reinforces optionality + step navigation
  freedom. Only visible when wizard is open.
- RENAMED .mw-nav__express → .mw-nav__skip with refreshed copy. Still a
  full-width secondary text affordance below Continue, but visual weight
  slightly increased (mid-tone vs pale grey) so customers see it.
- NEW .mw-no-cut-virtual: warm card matching .mw-no-cut treatment for the
  synthetic "Keep cut as pictured" affordance. --selected modifier adds
  accent border + checkmark fill. UI-only — no form input submitted.
- Step pill "done" green state now visually depends on JS-controlled
  .mw-pill--done modifier (set only after step is viewed) — no CSS change
  needed beyond the existing rule.

CHANGE (v3.9): Optional hint + express exit.
- Added .mw-optional-hint: reassurance line below step pills.
- Added .mw-nav__express: "Keep as-pictured" text link below Continue.
  Full-width centered, text-link styled, hidden on last step.
- .mw-nav updated to flex-wrap: wrap for express exit on its own line.

CHANGE (v3.8.2): Addon headers + hairline warm card.
- Added .mw-addon-header: config-driven section headers for secondary options
  within a wizard step (Ear Pieces, Front Hairline). Injected by JS via
  ADDON_HEADERS config. Title + description + optional inline help link.
- Added .mw-addon-header--warm: warm card variant with left accent border
  and warm background for sensitive questions (hair loss context).
- Mobile responsive rules for both treatments.

CHANGE (v3.8.1): Toggle spacing + step group separators + popup column spacing.
- Increased .personalize-toggle margin-top from 2px to 8px (desktop + mobile).
  BandFall, HatFall, and some topper PDPs have no Lace Front variant selector
  between Cap Size and the toggle. Products WITH lace front unaffected.
- Added .mw-step-group-sep: visual break between option groups within a step
  (e.g. Wig Secure Method → Add Ear Pieces in Secure step). JS-driven class
  added to 2nd+ visible row per step in goToStep().
- Added popup column spacing: consistent gaps between option columns in
  secure-method, lace-compare, and all multi-column popup layouts.

CHANGE (v3.8): Style separator, follow-up notices, no-style skip card.
- Added .mw-no-style: compact "As-pictured" skip card for Style step.
  Same warm background as .mw-no-cut but tighter padding since style
  options are a sub-section within the step.
- Added .mw-style-sep: compact separator "Or choose a style:" below the
  skip card. Thinner than .mw-cut-sep — less visual weight for subset.
- Added .mw-followup: inline follow-up notice shown when "Custom Color"
  or "Personalized Overall Cut" is selected. Left-accent border, envelope
  icon, warm surface background. Hidden by default, toggled by JS.
- Mobile responsive rules for all three new elements.

CHANGE (v3.7): Inline help links for sub-gate options.
- Added .mw-inline-help style: compact "? View" pill for sub-gate labels
  (Face Framing position, Part Location). Matches .mw-lace-help design
  but smaller for inline use within wizard steps.
- .mw-subgate-label and .mw-section-title support inline help buttons.

CHANGE (v3.6): Price control + CRO micro-optimizations.
- REVERTED .mw-price-enhanced: removed forced font-size so block editor
  controls product price sizing. Class is inert (JS still adds it, harmless).
- Selected option checkmark pseudo-element (visual confirmation on high-AOV)
- Nav button active/pressed state: scale(0.98) for tactile feedback
- Review My Wig hover: shadow + scale lift for final-step emphasis
- "Keep Original Color" card: warm background tint to separate from paid options
- Price context line: bumped weight to 500 (reads as value-add, not fine print)
- Step help + lace help: +1px padding each side for touch target
- Consult CTA primary button: subtle shadow for depth on mobile
- Continue button hover: slightly warmer transition
============================================================================
*/

/* =============================================================================
   DESIGN TOKENS
   ============================================================================= */

body.milano-wizard-mode {
  --mw-accent: #8b7355;
  --mw-accent-dark: #72603f;
  --mw-accent-light: #f7f5f2;
  --mw-accent-faint: #faf9f7;
  --mw-cream: #FBF7F4;
  --mw-card: #F7F2ED;
  --mw-card-border: #E8DDD6;
  --mw-gold: #C9A96E;
  --mw-gold-light: #f5eed9;
  --mw-brown: #2D2926;
  --mw-brown-med: #6B5E55;
  --mw-brown-light: #9A8E84;
  --mw-sage: #5A8A6E;
  --mw-sage-light: #eaf3ed;
  --mw-rose-light: #faf0ec;
  --mw-border: #E3DCD4;
  --mw-radius: 10px;

  --milano-accent: var(--mw-accent);
  --milano-accent-light: var(--mw-accent-light);
  --milano-accent-bg: var(--mw-accent-faint);
  --milano-bg-warm: var(--mw-cream);
  --milano-text-tertiary: var(--mw-brown-light);
}

body.mw-popup-open {
  overflow: hidden !important;
}

body.milano-wizard-mode .product__form {
  max-width: 100%;
  overflow-x: hidden;
}

/* =============================================================================
   HIDE "WHAT'S THIS?" + INTERNAL SUMMARY IN WIZARD MODE
   ============================================================================= */

body.milano-wizard-mode .milano-help-link {
  display: none !important;
}

body.milano-wizard-mode .milano-summary {
  display: none !important;
}

body.milano-wizard-mode .product__form__size-chart.mw-popup-relocated {
  display: none !important;
}

/* =============================================================================
   TOGGLE — Wizard mode replaces the switch with a segmented control.
   The Liquid-rendered .personalize-toggle__label stays in the DOM (it carries
   the [data-personalize-input] checkbox that personalize-options.js depends
   on), but is hidden from view. The segmented control is injected by
   wizard JS as the first child of .personalize-toggle.

   v3.8.1: margin-top increased from 2px to 8px — scalable gap from cap size
   on products without a Lace Front variant (BandFall, HatFall, some toppers).
   Products WITH lace front unaffected — lace wrapper provides its own height.
   ============================================================================= */

body.milano-wizard-mode .personalize-toggle {
  /* v3.14: tighter top margin — trust microcopy now lives in the previously
     bare space above this toggle, so the toggle itself doesn't need to
     carry that gap. */
  margin-top: 4px;
  margin-bottom: 0;
  /* Override personalize-options.css max-height: 200px CLS scaffold. */
  max-height: none;
  overflow: visible;
}

/* Hide the original Liquid toggle (label + switch + title/subtitle) in
   wizard mode. The checkbox inside stays programmatically accessible. */
body.milano-wizard-mode .personalize-toggle__label {
  display: none !important;
}

/* =============================================================================
   TRUST MICROCOPY (v3.14)
   Single italic line in the previously bare space between Lace Front and
   the segmented Personalize control. Converts a layout gap into a
   confidence beat. Subtle by design — must not compete with the toggle.

   v1.6.10 (May 2026): RULES REMOVED. The .mw-trust-micro element is no
   longer injected; this comment is preserved as a marker only. If you
   want to bring back an inline trust line, the JS injection lives in
   personalize-wizard.js (search for "TRUST MICROCOPY"). Re-add the
   styles below at that time.
   ============================================================================= */

/* =============================================================================
   VARIANT MEDIA SIZING (v1.6.35 → v2026-06-21)
   The v1.6.35 rule locked every gallery slide to a fixed aspect-ratio: 5/7.
   That matched the typical portrait product but LETTERBOXED non-5:7 sources
   (square / landscape) on mobile — visible whitespace bands top + bottom (the
   Grace 2048² squares needed the 1:1 override below purely to compensate).

   Removed the fixed ratio in favor of Palo Alto's NATIVE per-image sizing,
   which already prevents CLS WITHOUT cropping or letterboxing:
     • .product-gallery__media--image is height:auto (theme.css)
     • .product-gallery__media-space reserves each image's true height via
       --media-padding-top (padding-top %), so the slot is reserved BEFORE the
       image loads → no shift on first paint, Length-tile swaps, or variant
       re-fetch. The image is absolutely positioned, object-fit: contain.
   Each slide now matches its own image ratio. Thumbnails keep their 1:1 lock
   below; Grace keeps its explicit 1:1 (now redundant but harmless).
   ⚠️ STAGING: re-verify CLS (Length swap + variant change) across square / 5:7 /
   landscape products. If a shift appears on a specific family, re-scope a fixed
   ratio for that family only (as Grace does) rather than re-locking globally.
   ============================================================================= */
/* Thumbnails: square 100×100 already enforced by theme. Lock aspect anyway
   so swap doesn't shift the thumbnail strip. */
:where(.product-single__thumbnail) {
  aspect-ratio: 1 / 1;
}

/* =============================================================================
   GRACE GALLERY IMAGE LABELS (v1.6.36)

   Two surfaces, both purely CSS-driven (data-attribute already written by
   labelGraceGallery() in options.js):

   1. Slide chip — small caption in the bottom-left of each main image
      (.product-gallery__media-link). Visible inside the slide so swiping on
      mobile naturally shows the current image's label. Tagline-thin chip,
      cream + brown to feel editorial rather than gamified.
   2. Thumbnail caption — uppercase micro-label below each thumbnail tile
      (.product-single__thumbnail), rendered via CSS attr(). Desktop benefit
      (always visible under the thumb strip). On mobile the thumb strip is
      so tight that we hide the caption to avoid label overlap; the in-slide
      chip carries the labeling instead.

   Scoped to body.milano-grace so non-Grace PDPs are completely untouched.
   ============================================================================= */

/* Slide is the chip's positioning context */
body.milano-grace .product-gallery__media-link {
  position: relative;
}

/* =============================================================================
   GRACE IMAGE WHITESPACE FIX (v1.6.37 / v2026-05-22b)

   Grace product source images are 2048×2048 (square). The theme's default
   gallery container is 5:7 (tall portrait) — set above for general PDP
   stability. With object-fit:contain, a square image inside a 5:7 container
   produces ~22% vertical letterbox top + bottom (155px on a 545px-tall
   container at 390px width). For Grace specifically we lock the container
   to 1:1 so the image fills it edge-to-edge with no letterbox.

   Higher specificity than the global :where(...) rule above because we
   include body.milano-grace + use direct (non-:where) selectors.
   ============================================================================= */
body.milano-grace .product-gallery__media-link,
body.milano-grace .product-gallery__media-slider .flickity-slider > * {
  aspect-ratio: 1 / 1;
}

/* =============================================================================
   BOLD LACE FRONT OPTIONS (v1.6.37)

   Brings the lace option text weight up to match Cap Size button labels so
   the two adjacent option groups read at the same visual hierarchy.
   Currently lace options render with theme-default ~400 weight; we bump
   to 600 for parity. Scoped to .radio__buttons (lace + length use this);
   excluded from the image-variant (Length) fieldset so length labels keep
   their existing .mw-len-num / .mw-len-name two-line treatment.
   ============================================================================= */
.radio__buttons:not(.radio__fieldset--variant-option-image .radio__buttons) .radio__button .option-title,
fieldset:not(.radio__fieldset--variant-option-image) > .radio__buttons .radio__button .option-title {
  font-weight: 600;
}

/* =============================================================================
   DN INSTALLMENT SHORTCODE — FLOATING $X.XX SUPPRESSION (v1.6.37)

   Discount Ninja's discount-aware installment shortcode
   (limoniapps-discountninja-shortcode-discounted_price_installment_3periods)
   was rendering a stray "$553.33"-style price node between the wizard
   review card and the ATC button. It's DN's calculated 3-month installment
   for the discounted price — useful info, but in the WRONG PLACE and
   redundant with Splitit's native "From $X.XX /month with Splitit" line
   that already appears under the product price.

   Suppress both 3- and 4-month installment shortcodes globally. Splitit's
   own UI handles installment messaging in the correct location.
   ============================================================================= */
.limoniapps-discountninja-shortcode-discounted_price_installment_3periods,
.limoniapps-discountninja-shortcode-discounted_price_installment_4periods {
  display: none !important;
}

.mw-slide-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px 5px;
  font-family: var(--milano-font-body, inherit);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mw-brown, #2D2926);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 100px;
  pointer-events: none;
  /* v2026-06-05: dropped backdrop-filter: blur(6px). On mobile this label rides
     the carousel, so a backdrop blur forces a per-frame re-blur of the image
     behind it during every swipe (jank on low-end devices). The 88%-opaque white
     background above reads near-identically without the GPU cost. */
  box-shadow: 0 1px 4px rgba(45, 41, 38, 0.08);
  z-index: 2;
}

/* Chart slide (4th image OR alt-text-detected) gets a distinct brown chip
   to read as informational ("here's data") rather than another photo. */
.mw-slide-label[data-mw-chart="1"] {
  background: rgba(139, 115, 85, 0.92);
  color: #fff;
  box-shadow: 0 1px 4px rgba(45, 41, 38, 0.18);
}

/* Thumbnail micro-caption — only renders below the thumb on desktop where
   there's room. Driven by data-mw-label on .product-single__thumbnail. */
@media screen and (min-width: 769px) {
  body.milano-grace .product-single__thumbnail[data-mw-label]::after {
    content: attr(data-mw-label);
    display: block;
    margin-top: 6px;
    font-family: var(--milano-font-body, inherit);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mw-brown-light, #9A8E84);
    text-align: center;
    line-height: 1.2;
    transition: color 0.15s ease;
  }
  body.milano-grace .product-single__thumbnail.is-nav-selected[data-mw-label]::after,
  body.milano-grace .product-single__thumbnail.is-selected[data-mw-label]::after {
    color: var(--mw-brown, #2D2926);
  }
}

/* Mobile — keep only the in-slide chip; thumbnail captions would crowd
   the tight thumb strip. */
@media screen and (max-width: 768px) {
  .mw-slide-label {
    left: 10px;
    bottom: 10px;
    padding: 3px 9px 4px;
    font-size: 9.5px;
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.milano-grace .product-single__thumbnail[data-mw-label]::after {
    transition: none;
  }
}



   Hides the Length fieldset (image-variant tiles) on Grace PDPs until the
   wizard finishes its transform and adds body.milano-wizard-ready. Without
   this, the user briefly sees Globo's default rendering — stacked column,
   unsplit "12\" Halle" labels, wrong tile sizes — before our restyle.

   Scope chosen carefully:
   - Only milano-grace pages — non-Grace products unaffected.
   - Only the Length fieldset — Cap size, price, gallery all paint
     normally so the page never looks blank.
   - opacity (not display:none) keeps reserved height intact — the page
     doesn't reflow when revealed.
   - 3-second JS timeout in wizard.js guarantees ready is set even if
     transform fails. Worst case: 3s of hidden Length, then full reveal.
   ============================================================================= */
body.milano-grace:not(.milano-wizard-ready) fieldset.radio__fieldset--variant-option-image {
  opacity: 0;
  pointer-events: none;
  /* No transition. If our IIFE runs before first paint (typical with
     deferred scripts), Length starts at opacity:0 — user never sees the
     default Globo render. If it runs AFTER first paint (slow load),
     the snap from 1→0 is brief and preferable to a visible fade-out.
     The reveal at wizard-ready also snaps — clean and predictable. */
}
body.milano-grace.milano-wizard-ready fieldset.radio__fieldset--variant-option-image {
  opacity: 1;
  pointer-events: auto;
}

.mw-segmented {
  display: flex;
  /* v1.6.30: gap 8 → 12. With the subtle card-lift shadow on inactive
     cells below, each option reads as its own card rather than two
     buttons in a row. Zero vertical impact. */
  gap: 12px;
  width: 100%;
  margin: 0 0 8px;
}

.mw-segmented__cell {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* v1.6.12: 54 → 60px to accommodate subtitle line without cramping. */
  min-height: 60px;
  padding: 10px 14px;
  /* v1.6.31: border slightly more defined (#E8DDD6 → #D9CFC6, ~8% darker)
     and shadow stronger (1px/3px/4% → 2px/8px/8%). Each cell now reads
     as a clear, lifted card rather than a faint outline. Active cell's
     brown fill + brand shadow stays untouched — the active vs inactive
     contrast is preserved and even amplified by the stronger inactive lift. */
  border: 1.5px solid #D9CFC6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(45, 41, 38, 0.08);
  color: var(--mw-brown, #2D2926);
  font-family: var(--milano-font-body, inherit);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.25s ease;
}

.mw-segmented__cell:hover:not(.mw-segmented__cell--active) {
  border-color: var(--mw-accent, #8b7355);
  background: var(--mw-accent-faint, #faf9f7);
  color: var(--mw-brown, #2D2926);
  transform: translateY(-1px);
  /* v1.6.31: hover shadow scaled up to maintain the inactive→hover lift
     differential after the base shadow was strengthened. */
  box-shadow: 0 4px 14px rgba(139, 115, 85, 0.22);
}

.mw-segmented__cell:active:not(.mw-segmented__cell--active) {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.1s;
  box-shadow: 0 1px 4px rgba(139, 115, 85, 0.1);
}

.mw-segmented__cell--active {
  background: var(--mw-accent, #8b7355);
  color: #fff;
  border-color: var(--mw-accent, #8b7355);
  box-shadow: 0 3px 14px rgba(139, 115, 85, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: default;
}

.mw-segmented__cell:focus-visible {
  outline: 2px solid var(--mw-accent, #8b7355);
  outline-offset: 2px;
}

/* Checkmark — animates IN when the cell becomes active (width + opacity
   expand together). On inactive cells the icon is fully collapsed,
   leaving just the label centered. */
.mw-segmented__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0;
  height: 20px;
  margin-right: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  opacity: 0;
  overflow: hidden;
  transition:
    width 0.32s cubic-bezier(0.34, 1.4, 0.64, 1),
    margin-right 0.32s cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 0.22s ease;
}

.mw-segmented__cell--active .mw-segmented__check {
  width: 20px;
  margin-right: 8px;
  opacity: 1;
}

.mw-segmented__check svg {
  width: 12px;
  height: 12px;
}

/* v1.6.12: subtitle pattern — title + small descriptive line.
   .mw-segmented__content wraps both for vertical centering inside the
   button regardless of checkmark width. Mirrors the lace-front button
   layout (title above, small subtitle below). */
.mw-segmented__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 0 1 auto;
}

.mw-segmented__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.mw-segmented__sub {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--mw-brown-light, #9A8E84);
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Active state — sub text gets the inverse treatment, lighter so it
   doesn't compete with the main label which is now white. */
.mw-segmented__cell--active .mw-segmented__sub {
  color: rgba(255, 255, 255, 0.75);
}

/* =============================================================================
   YES / NO ANSWER PILL (v2026-06-05)
   Frames the two cells as the answers to "Personalize your wig?" — a small
   pill atop each card: Yes (accent) on personalize, No (neutral) on as-pictured.
   Keeps the descriptive labels intact. On the active (filled) cell the pill
   inverts so it stays legible on the brown fill.
   ============================================================================= */
.mw-segmented__answer {
  display: inline-block;
  align-self: center;
  margin-bottom: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--milano-font-body, inherit);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.5;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mw-segmented__answer--yes {
  background: var(--mw-accent, #8b7355);
  color: #fff;
}

.mw-segmented__answer--no {
  background: #ECE6DF;
  color: var(--mw-brown-med, #6B5E55);
}

.mw-segmented__cell--active .mw-segmented__answer--yes {
  background: #fff;
  color: var(--mw-accent, #8b7355);
}

.mw-segmented__cell--active .mw-segmented__answer--no {
  background: rgba(255, 255, 255, 0.92);
  color: var(--mw-brown, #2D2926);
}

@media (prefers-reduced-motion: reduce) {
  .mw-segmented__answer { transition: none; }
}

/* =============================================================================
   PERSONALIZE DESCRIPTION (v3.11 — smooth slide-down/up)
   Single node with mobile/desktop spans. Visible only when wizard open.
   Merges visually with the panel below it (flat bottom, no border-bottom).
   ============================================================================= */

/* =============================================================================
   PERSONALIZE DESCRIPTION (v3.12 — snappier coordinated animation)
   Single node with mobile/desktop spans. Visible only when wizard open.
   Merges visually with the panel below it (flat bottom, no border-bottom).
   Slide+fade uses transform (GPU-composited) for smoothness; max-height
   reserves layout space. Border/background fade is fixed at the same
   duration so all three properties land at the same moment.
   ============================================================================= */

.mw-personalize-desc {
  /* Collapsed defaults */
  max-height: 0;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  background: transparent;
  border: 1.5px solid transparent;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  color: var(--mw-brown-med, #6B5E55);
  line-height: 1.5;
  font-size: 13px;
  transition:
    max-height 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    padding 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease;
  /* Hint to the compositor — promotes the description to its own layer so
     transform/opacity transitions don't trigger paint on neighboring elements. */
  will-change: max-height, transform, opacity;
}

.mw-personalize-desc--visible {
  max-height: 160px;
  padding: 12px 16px 10px;
  opacity: 1;
  transform: translateY(0);
  background: var(--mw-card, #F7F2ED);
  border-color: var(--mw-card-border, #E8DDD6);
  border-bottom-color: transparent;
}

.mw-pd-mobile,
.mw-pd-desktop {
  display: none;
}

@media screen and (max-width: 768px) {
  .mw-pd-mobile { display: inline; }
  .mw-personalize-desc { font-size: 12.5px; }
  .mw-personalize-desc--visible { padding: 10px 14px 8px; }
}

@media screen and (min-width: 769px) {
  .mw-pd-desktop { display: inline; }
  .mw-personalize-desc { font-size: 13.5px; }
}

/* =============================================================================
   HINT + SUBHINT entrance animation (v3.11)
   .mw-anim-enter is added by JS in goToStep() after a force-reflow,
   so it replays cleanly on every step change.
   ============================================================================= */

@keyframes mwSlideFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mw-anim-enter {
  animation: mwSlideFadeIn 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   TOGGLE — Services total (+$X) — dormant in v1.6.x; kept for safety.
   ============================================================================= */

.mw-toggle-total {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mw-accent, #8b7355);
  margin-left: auto;
  white-space: nowrap;
  display: none;
}

body.milano-wizard-mode .personalize-toggle__content {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

body.milano-wizard-mode .personalize-toggle__title {
  width: auto;
  margin-right: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mw-brown);
}

body.milano-wizard-mode .personalize-toggle__subtitle {
  width: 100%;
  order: 3;
}

/* =============================================================================
   UNIFIED CARD — Top half. Applied when "Personalize it" is the active
   segmented cell. The .personalize-toggle wraps our injected .mw-segmented
   + .mw-personalize-desc; giving the parent the card styling turns the whole
   top section into a bordered cream container that merges visually with
   .milano-panel__content below.
   v1.6.32: brought back from the live theme's unified-card pattern,
   adapted for the segmented (Ships / Personalize) control.
   ============================================================================= */

body.mw-personalize-active.milano-wizard-mode .personalize-toggle {
  background: var(--mw-card, #F7F2ED);
  border: 1.5px solid var(--mw-card-border, #E8DDD6);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 12px 14px 6px;
  margin-bottom: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* =============================================================================
   PANEL — Bottom half of unified card. Top is flush with the description
   above it (no top border, flat top corners) when wizard is open.
   v1.6.32: gated on body.mw-personalize-active so the bottom card only
   renders when paired with its top — when "Ships as pictured" is active,
   the panel reverts to bare (matches Kevin's "current code" expectation).
   ============================================================================= */

body.mw-personalize-active .milano-panel__content {
  background: var(--mw-card);
  border-radius: 0 0 14px 14px;
  padding: 0 18px 14px;
  border: 1.5px solid var(--mw-card-border);
  border-top: none;
}

/* =============================================================================
   STEP INDICATOR ROW
   ============================================================================= */

.mw-indicator-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  margin-bottom: 8px;
}

.mw-indicator {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.mw-wiz-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--mw-accent, #8b7355);
  white-space: nowrap;
  margin-left: 10px;
  flex-shrink: 0;
}

.mw-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--milano-font-body, inherit);
  font-size: 11px;
  font-weight: 700;
  background: #eae7e3;
  color: var(--mw-brown-med, #6B5E55);
  transition: all 0.25s ease;
  flex: 1;
  justify-content: center;
  min-height: 34px;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.mw-pill:hover { opacity: 0.85; }

.mw-pill:focus-visible {
  outline: 2px solid var(--mw-accent, #8b7355);
  outline-offset: 2px;
}

.mw-pill--active {
  background: var(--mw-accent, #8b7355);
  color: #fff;
  border-color: var(--mw-accent, #8b7355);
}

.mw-pill--done {
  background: #fff;
  color: var(--mw-sage, #5A8A6E);
  border-color: var(--mw-sage, #5A8A6E);
}

/* Done-pill checkmark scale-pop. Since the SVG is created inside innerHTML
   on each renderIndicator() call, the animation re-triggers only when
   `isDone` transitions from false→true (the SVG is created at that moment).
   When done state persists across re-renders, the SVG already exists,
   browser caches the animation as complete. */
.mw-pill--done svg {
  animation: mwCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

@keyframes mwCheckPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.mw-pill__sep {
  /* v3.14: hidden — connector dashes between Secure/Color/Cut/Style pills
     were visual noise. The pill positions already imply sequence. */
  display: none;
}

/* =============================================================================
   HINT + SUBHINT
   ============================================================================= */

.mw-hint-wrap {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mw-border, #E3DCD4);
}

.mw-hint {
  font-size: 15px;
  font-weight: 600;
  color: var(--mw-brown, #2D2926);
  line-height: 1.4;
}

/* Inline row: step title + help link on same line */
.mw-hint-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.mw-subhint {
  font-size: 13px;
  color: var(--mw-brown-light, #9A8E84);
  line-height: 1.5;
}

/* =============================================================================
   STEP HELP LINK — Now inline with step title (v1.5.0)
   ============================================================================= */

.mw-step-help {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  /* v1.6.14: 10 → 10.5px font, padding 3/9 → 3/10. Sits between
     pre-1.6.13 size (11px / 4/11) and the over-shrunk 1.6.13 size.
     Icon up to 12px so the circle stays clearly visible. */
  padding: 3px 10px 3px 7px;
  font-family: var(--milano-font-body, inherit);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mw-accent, #8b7355);
  background: transparent;
  border: 1px solid var(--mw-accent, #8b7355);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  line-height: 1;
  white-space: nowrap;
}

.mw-step-help:hover {
  background: var(--mw-accent, #8b7355);
  color: #fff;
}

.mw-step-help:active { transform: scale(0.97); }

.mw-step-help:focus-visible {
  outline: 2px solid var(--mw-accent, #8b7355);
  outline-offset: 3px;
}

.mw-step-help__icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

/* =============================================================================
   LACE HELP LINK (v3.14: lighter text-link weight — less competition with
   the section title alongside it)
   ============================================================================= */

.mw-lace-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 10px 4px 6px;
  font-family: var(--milano-font-body, inherit);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mw-brown-light, #9A8E84);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.mw-lace-help:hover {
  color: var(--mw-accent, #8b7355);
  border-color: var(--mw-border, #E3DCD4);
}

.mw-lace-help:active { transform: scale(0.97); }

.mw-lace-help:focus-visible {
  outline: 2px solid var(--mw-accent, #8b7355);
  outline-offset: 2px;
}

/* =============================================================================
   INLINE HELP LINK
   ============================================================================= */

.mw-inline-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  /* v1.6.14: nudged back up from 1.6.13 over-shrink. Subtle text
     pill, icon visible at 12px stays clear against light bg.
     v1.6.32: padding 2/9/6 → 3/10/7, font 10.5 → 11, border
     transparent → faint #E3DCD4 — matches live theme's always-visible
     "View" button pattern Kevin called out from sub-option headers.
     Top-level question headers use .mw-step-help (unchanged). */
  padding: 3px 10px 3px 7px;
  font-family: var(--milano-font-body, inherit);
  font-size: 11px;
  font-weight: 500;
  color: var(--mw-brown-light, #9A8E84);
  background: transparent;
  border: 1px solid var(--mw-border, #E3DCD4);
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  vertical-align: middle;
}

.mw-inline-help svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.mw-inline-help:hover {
  color: var(--mw-accent, #8b7355);
  border-color: var(--mw-accent, #8b7355);
}

.mw-inline-help:active { transform: scale(0.97); }

.mw-inline-help:focus-visible {
  outline: 2px solid var(--mw-accent, #8b7355);
  outline-offset: 2px;
}

.mw-subgate-label:has(.mw-inline-help),
.mw-section-title:has(.mw-inline-help) {
  display: inline-flex;
  align-items: center;
  width: 100%;
}

/* =============================================================================
   NAV BUTTONS
   ============================================================================= */

.mw-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--mw-border, #E3DCD4);
}

.mw-nav__back, .mw-nav__next {
  padding: 14px 18px;
  border-radius: var(--mw-radius, 10px);
  font-family: var(--milano-font-body, inherit);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 50px;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

/* Secondary nav — "Skip to summary →" link below Continue (v1.6.0).
   Preserves selections and jumps to the review card. Full-width centered
   text affordance — visual weight slightly bumped vs prior "express" pale
   grey so the affordance is discoverable for our middle-aged audience.
   Hidden on last step (Review button already covers exit). */
.mw-nav__skip {
  flex-basis: 100%;
  background: none;
  border: none;
  padding: 8px 0 0;
  font-family: var(--milano-font-body, inherit);
  font-size: 13px;
  font-weight: 600;
  color: var(--mw-brown-med, #6B5E55);
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.2s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.mw-nav__skip:hover {
  color: var(--mw-accent, #8b7355);
  text-decoration-color: var(--mw-accent, #8b7355);
}

.mw-nav__skip:focus-visible {
  outline: 2px solid var(--mw-accent, #8b7355);
  outline-offset: 2px;
  border-radius: 4px;
}

.mw-nav__next { flex: 1; }
.mw-nav__next:focus-visible,
.mw-nav__back:focus-visible {
  outline: 2px solid var(--mw-accent, #8b7355);
  outline-offset: 2px;
}

.mw-nav__next--continue { background: var(--mw-accent, #8b7355); color: #fff; }
.mw-nav__next--continue:hover {
  background: var(--mw-accent-dark, #72603f);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139, 115, 85, 0.28);
}
.mw-nav__next--continue:active { transform: translateY(0) scale(0.98); box-shadow: none; }

.mw-nav__next--review { background: var(--mw-sage, #5A8A6E); color: #fff; }
.mw-nav__next--review:hover {
  background: #4a7a5e;
  box-shadow: 0 3px 12px rgba(90, 138, 110, 0.35);
  transform: translateY(-1px);
}
.mw-nav__next--review:active { transform: translateY(0) scale(0.98); box-shadow: none; }

.mw-nav__back { background: #f5f3f0; color: var(--mw-brown-med); }
.mw-nav__back:hover { background: #eae7e3; }
.mw-nav__back:active { transform: scale(0.98); }

.mw-nav__next.mw-pulse { animation: mwPulse 0.6s ease; }

@keyframes mwPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); box-shadow: 0 2px 12px rgba(139, 115, 85, 0.3); }
  100% { transform: scale(1); box-shadow: none; }
}

/* =============================================================================
   OPTION ROW OVERRIDES — WIZARD MODE
   ============================================================================= */

body.milano-wizard-mode .milano-option-row__header { display: none !important; }

body.milano-wizard-mode .milano-option-row {
  border: none; border-bottom: none; border-left: none; padding: 0; margin: 0;
}

body.milano-wizard-mode .milano-option-row__body {
  display: block !important; max-height: none !important; overflow: visible !important; padding: 0;
}

body.milano-wizard-mode .bold_option_value {
  display: block;
  padding: 10px 14px 10px 18px;
  margin-bottom: 6px;
  border: 1.5px solid var(--mw-border, #E3DCD4);
  border-radius: var(--mw-radius, 10px);
  background: #fff;
  position: relative;
  min-height: 44px;
  transition: border-color 0.2s ease, background-color 0.25s ease, box-shadow 0.2s ease;
}

body.milano-wizard-mode .bold_option_value:hover {
  border-color: var(--mw-brown-light, #9A8E84);
  box-shadow: 0 1px 4px rgba(45, 41, 38, 0.04);
}

/* Selected state — single rule covering every option card. The skip cards
   (.mw-no-cut, .mw-no-style, .mw-no-ear) already have their own warm
   treatment so this rule only applies when they're checked too,
   reinforcing the selection. */
body.milano-wizard-mode .bold_option_value:has(input:checked) {
  border-color: var(--mw-accent, #8b7355);
  background: rgba(139, 115, 85, 0.035);
}

body.milano-wizard-mode .bold_option_value:has(input:focus-visible) {
  outline: 2px solid var(--mw-accent, #8b7355); outline-offset: 2px;
}

body.milano-wizard-mode .bold_option_value input[type="radio"],
body.milano-wizard-mode .bold_option_value input[type="checkbox"] {
  vertical-align: middle; margin-top: -1px; margin-right: 8px; accent-color: var(--mw-accent, #8b7355);
}

body.milano-wizard-mode .bold_option_value_price {
  /* v3.14: lighter weight + lighter color — option names should dominate
     the scan, prices are secondary information. */
  float: right; font-size: 13.5px; font-weight: 400; color: var(--mw-brown-light, #9A8E84);
  white-space: nowrap; margin-left: 8px; line-height: 1.5;
}

body.milano-wizard-mode .bold_option_value label {
  font-weight: 400; font-size: 14px; color: var(--mw-brown, #2D2926); display: inline; vertical-align: middle;
}

body.milano-wizard-mode .bold_option_value:has(input:checked) {
  border-color: var(--mw-accent, #8b7355); border-width: 2px; background: var(--mw-accent-faint, #faf9f7);
}

body.milano-wizard-mode .bold_option_value:has(input:checked) label { font-weight: 600; }

/* =============================================================================
   STEP GROUP SEPARATOR — Visual break between option groups within a step
   v3.8.1: JS adds .mw-step-group-sep to the 2nd+ visible row in each step.
   Separates e.g. "Wig Secure Method" from "Add Ear Pieces" in Secure step.
   ============================================================================= */

body.milano-wizard-mode .mw-step-group-sep {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mw-border, #E3DCD4);
}

/* =============================================================================
   ADDON HEADERS — Section headers for secondary/standalone options
   v3.8.2: Config-driven contextual headers injected above option values
   for standalone add-on options (Ear Pieces, Front Hairline, etc.)

   Two treatments:
     Default (.mw-addon-header): title + description, transparent bg
     Warm (.mw-addon-header--warm): left accent + warm bg for sensitive topics
   ============================================================================= */

.mw-addon-header {
  margin-bottom: 10px;
}

.mw-addon-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mw-brown, #2D2926);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mw-addon-desc {
  font-size: 13px;
  color: var(--mw-brown-light, #9A8E84);
  line-height: 1.5;
  margin-top: 3px;
}

/* Warm variant — sensitive questions (hair loss, fit concerns) */
.mw-addon-header--warm {
  background: var(--mw-accent-faint, #faf9f7);
  border-left: 3px solid var(--mw-accent, #8b7355);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.mw-addon-header--warm .mw-addon-desc {
  color: var(--mw-brown-med, #6B5E55);
}

/* =============================================================================
   WIZARD DROPDOWNS
   ============================================================================= */

body.milano-wizard-mode .milano-option-row__body .bold_option_element select,
body.milano-wizard-mode .mw-subgate .bold_option_element select {
  font-family: var(--milano-font-body, inherit);
  font-size: 14px; font-weight: 500; color: var(--mw-brown, #2D2926);
  width: 100%; padding: 12px 40px 12px 16px;
  border: 1.5px solid var(--mw-border, #E3DCD4);
  border-radius: var(--mw-radius, 10px);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%239A8E84' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: border-color 0.2s ease; min-height: 48px; box-sizing: border-box;
}

body.milano-wizard-mode .milano-option-row__body .bold_option_element select:hover,
body.milano-wizard-mode .mw-subgate .bold_option_element select:hover { border-color: var(--mw-brown-light, #9A8E84); }

body.milano-wizard-mode .milano-option-row__body .bold_option_element select:focus,
body.milano-wizard-mode .mw-subgate .bold_option_element select:focus { outline: none; border-color: var(--mw-accent, #8b7355); }

/* =============================================================================
   SKIP OPTION CARDS + SEPARATORS
   ============================================================================= */

.mw-color-sep {
  font-size: 12px; font-weight: 500; color: var(--mw-brown-light, #9A8E84);
  margin: 12px 0 8px; padding-top: 12px; border-top: 1px solid var(--mw-border, #E3DCD4);
}

body.milano-wizard-mode .mw-no-color {
  margin-bottom: 4px; padding: 12px 14px;
  border: 1.5px solid var(--mw-border, #E3DCD4); border-radius: var(--mw-radius, 10px);
  background: var(--mw-accent-faint, #faf9f7);
}

body.milano-wizard-mode .mw-no-color:has(input:checked) label { font-weight: 600; color: var(--mw-brown, #2D2926); font-style: normal; }

body.milano-wizard-mode .mw-no-color input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border: 2px solid var(--mw-border-active, #d4d1cc); border-radius: 50%;
  background: #fff; cursor: pointer; vertical-align: middle; margin-top: -1px;
  position: relative; flex-shrink: 0;
}

body.milano-wizard-mode .mw-no-color input[type="checkbox"]:checked {
  border-color: var(--mw-accent, #8b7355); background: var(--mw-accent, #8b7355);
}

body.milano-wizard-mode .mw-no-color input[type="checkbox"]:checked::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
}

body.milano-wizard-mode .mw-no-cut {
  margin-bottom: 4px; padding: 12px 14px;
  border: 1.5px solid var(--mw-border, #E3DCD4); border-radius: var(--mw-radius, 10px);
  background: var(--mw-accent-faint, #faf9f7);
}

body.milano-wizard-mode .mw-no-cut:has(input:checked) label { font-weight: 600; }

/* =============================================================================
   VIRTUAL "KEEP AS PICTURED" CARDS — Cut (v1.6.0) + Color (v1.6.3)
   UI-only affordance — no form input. Visual treatment mirrors .mw-no-cut
   with an explicit "selected" modifier driven by JS.
   The cut and color variants share styling 1:1; only the per-product copy
   differs (label + sub text injected by JS).
   ============================================================================= */

body.milano-wizard-mode .mw-no-cut-virtual,
body.milano-wizard-mode .mw-no-color-virtual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 12px 14px;
  border: 1.5px solid var(--mw-border, #E3DCD4);
  border-radius: var(--mw-radius, 10px);
  background: var(--mw-accent-faint, #faf9f7);
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background-color 0.3s ease,
    box-shadow 0.25s ease,
    transform 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body.milano-wizard-mode .mw-no-cut-virtual:hover:not(.mw-no-cut-virtual--selected),
body.milano-wizard-mode .mw-no-color-virtual:hover:not(.mw-no-color-virtual--selected) {
  border-color: var(--mw-accent, #8b7355);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.1);
}

body.milano-wizard-mode .mw-no-cut-virtual:active:not(.mw-no-cut-virtual--selected),
body.milano-wizard-mode .mw-no-color-virtual:active:not(.mw-no-color-virtual--selected) {
  transform: translateY(0) scale(0.99);
  transition-duration: 0.1s;
}

body.milano-wizard-mode .mw-no-cut-virtual:focus-visible,
body.milano-wizard-mode .mw-no-color-virtual:focus-visible {
  outline: 2px solid var(--mw-accent, #8b7355);
  outline-offset: 2px;
}

body.milano-wizard-mode .mw-no-cut-virtual--selected,
body.milano-wizard-mode .mw-no-color-virtual--selected {
  border-color: var(--mw-accent, #8b7355);
  background: #fff;
  box-shadow: 0 1px 6px rgba(139, 115, 85, 0.12);
}

.mw-no-cut-virtual__check,
.mw-no-color-virtual__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--mw-border, #E3DCD4);
  border-radius: 50%;
  background: #fff;
  color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.mw-no-cut-virtual--selected .mw-no-cut-virtual__check,
.mw-no-color-virtual--selected .mw-no-color-virtual__check {
  background: var(--mw-accent, #8b7355);
  border-color: var(--mw-accent, #8b7355);
  color: #fff;
}

/* Inner SVG scales in with overshoot when card becomes selected — gives
   the check a subtle "snap" landing that feels confirmed. */
.mw-no-cut-virtual__check svg,
.mw-no-color-virtual__check svg {
  transform: scale(0);
  opacity: 0;
  transform-origin: center;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.22s ease;
}

.mw-no-cut-virtual--selected .mw-no-cut-virtual__check svg,
.mw-no-color-virtual--selected .mw-no-color-virtual__check svg {
  transform: scale(1);
  opacity: 1;
}

.mw-no-cut-virtual__label,
.mw-no-color-virtual__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--mw-brown, #2D2926);
  line-height: 1.3;
}

.mw-no-cut-virtual--selected .mw-no-cut-virtual__label,
.mw-no-color-virtual--selected .mw-no-color-virtual__label {
  font-weight: 600;
}

.mw-no-cut-virtual__sub,
.mw-no-color-virtual__sub {
  flex-basis: 100%;
  padding-left: 32px;
  font-size: 12px;
  color: var(--mw-brown-med, #6B5E55);
  line-height: 1.4;
}

.mw-cut-sep {
  font-size: 12px; font-weight: 500; color: var(--mw-brown-light, #9A8E84);
  margin: 12px 0 8px; padding-top: 12px; border-top: 1px solid var(--mw-border, #E3DCD4);
}

body.milano-wizard-mode .mw-no-style {
  margin-bottom: 4px; padding: 10px 14px;
  border: 1.5px solid var(--mw-border, #E3DCD4); border-radius: var(--mw-radius, 10px);
  background: var(--mw-accent-faint, #faf9f7);
}

body.milano-wizard-mode .mw-no-style:has(input:checked) label { font-weight: 600; }

body.milano-wizard-mode .mw-no-ear {
  margin-bottom: 4px; padding: 10px 14px;
  border: 1.5px solid var(--mw-border, #E3DCD4); border-radius: var(--mw-radius, 10px);
  background: var(--mw-accent-faint, #faf9f7);
}

body.milano-wizard-mode .mw-no-ear:has(input:checked) label { font-weight: 600; }

.mw-style-sep {
  font-size: 11px; font-weight: 500; color: var(--mw-brown-light, #9A8E84);
  margin: 8px 0 6px; padding: 0;
}

/* =============================================================================
   FOLLOW-UP NOTICES
   ============================================================================= */

.mw-followup {
  display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 2px; padding: 10px 12px;
  background: var(--mw-accent-faint, #faf9f7); border-left: 3px solid var(--mw-accent, #8b7355);
  border-radius: 0 6px 6px 0; font-size: 12px; line-height: 1.5; color: var(--mw-brown-med, #6B5E55);
  animation: mwFadeIn 0.3s ease;
}

.mw-followup__icon { flex-shrink: 0; margin-top: 1px; color: var(--mw-accent, #8b7355); }

/* Step reassurance — inline card shown above Continue when a paid Color/Cut
   option is selected (v2026-06-05, restored inline-only; see updateStepNotice). */
.mw-step-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--mw-accent-faint, #faf9f7);
  border: 1px solid var(--mw-border, #E3DCD4);
  border-radius: var(--mw-radius, 10px);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mw-brown-med, #6B5E55);
  animation: mwFadeIn 0.3s ease;
}

.mw-step-notice__icon { flex-shrink: 0; margin-top: 2px; color: var(--mw-accent, #8b7355); }
.mw-step-notice__text { flex: 1; }
.mw-step-notice__text strong { font-weight: 600; color: var(--mw-brown, #2D2926); }

.mw-opt-desc {
  display: block; width: 100%; font-size: 13px; color: var(--mw-brown-light, #9A8E84);
  line-height: 1.4; margin-top: 2px; padding-left: 0; clear: both;
}

/* Inline description — sits on same line as label text (e.g., "Yes — For no bio hair by ears") */
.mw-opt-inline-desc {
  font-weight: 400;
  color: var(--mw-brown-light, #9A8E84);
}

.mw-badge {
  display: inline-block; font-size: 10px; font-weight: 600; color: var(--mw-brown-med, #6B5E55);
  background: var(--mw-gold-light, #f5eed9); padding: 2px 8px; border-radius: 8px;
  margin-left: 8px; vertical-align: middle; white-space: nowrap;
}

/* =============================================================================
   LACE SUBTITLES
   ============================================================================= */

.mw-lace-sub {
  display: block; font-size: 11px; font-weight: 400; color: var(--mw-brown-light, #9A8E84);
  margin-top: 2px; line-height: 1.3; text-transform: none !important; text-align: center;
}

.radio__button input:checked + label .mw-lace-sub,
.radio__button input:checked ~ label .mw-lace-sub { color: rgba(255, 255, 255, 0.7); }

/* =============================================================================
   LACE FRONT — Selected state override
   ============================================================================= */

body.milano-wizard-mode .radio__button input:checked + label.radio__label,
body.milano-wizard-mode .radio__button input:checked ~ label.radio__label,
body.milano-wizard-mode .radio__buttons .radio__button:has(input:checked) label.radio__label {
  background: var(--mw-brown, #2D2926) !important; color: #fff !important; border-color: var(--mw-brown, #2D2926) !important;
}

body.milano-wizard-mode .radio__button label.radio__label:hover {
  border-color: var(--mw-brown, #2D2926); background: var(--mw-accent-faint, #faf9f7);
}

/* =============================================================================
   SUB-GATE INLINE STYLING
   ============================================================================= */

body.milano-wizard-mode .mw-subgate {
  margin-left: 16px; margin-top: 10px; padding-left: 12px; padding-top: 4px;
  border-left: 2px solid var(--mw-border, #E3DCD4);
}

.mw-subgate-label {
  font-size: 13px; font-weight: 600; color: var(--mw-brown, #2D2926); margin-bottom: 8px; padding-top: 4px;
}

.mw-section-title {
  font-size: 14px; font-weight: 700; color: var(--mw-brown, #2D2926);
  margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--mw-border, #E3DCD4);
}

.mw-section-title:first-child { border-top: none; margin-top: 4px; padding-top: 0; }

.mw-included { font-size: 11px; font-weight: 600; color: var(--mw-sage, #5A8A6E); }

/* =============================================================================
   REVIEW CARD
   ============================================================================= */

.mw-review-card {
  background: #fff; border: 1.5px solid var(--mw-border, #E3DCD4); border-radius: 12px;
  padding: 18px 20px; margin: 12px 0; animation: mwFadeIn 0.4s ease;
}

@keyframes mwFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mw-review-card__title {
  font-family: var(--milano-font-heading, inherit); font-weight: 700; font-size: 11px;
  /* v3.15: 0.08em → 0.12em — slightly looser tracking on the all-caps
     review title for a more polished, editorial feel. */
  color: var(--mw-accent, #8b7355); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px;
}

.mw-review-card__items { font-size: 13.5px; line-height: 1.7; color: var(--mw-brown, #2D2926); }
.mw-review-card__line { margin-bottom: 1px; }
.mw-review-card__line strong { font-weight: 600; }

/* Mid Summer: compact sale signal on the Wig line — struck MSRP + warm-red price +
   a small "Sale price applied" caption. No extra line height. */
.mw-review-card__was {
  margin-right: 5px;
  color: var(--mw-brown-light, #9A8E84);
  font-weight: 400;
  text-decoration: line-through;
}
.mw-review-card__now { color: #C45349; }
.mw-review-card__saved {
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #3F7D54;
  white-space: nowrap;
}
.mw-review-card__price { color: var(--mw-brown-light, #9A8E84); font-size: 12px; }

/* v1.6.38: Condensed "As pictured" line — groups Color/Cut/Style under
   one row instead of three. Muted color signals "default state" without
   stealing attention from the customer's actual selections above. */
.mw-review-card__line--grouped {
  color: var(--mw-brown-light, #9A8E84);
  font-size: 12.5px;
  margin-top: 4px;
}
.mw-review-card__line--grouped strong {
  color: var(--mw-brown, #2D2926);
  font-weight: 600;
}

/* v1.6.38: "included" suffix — subtle pill after default-included
   selections (Clips & Combs). Tells the customer the value is part of
   the wig price without an upcharge. Muted brown + uppercase tracking. */
.mw-review-card__included {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mw-brown-light, #9A8E84);
  background: var(--mw-accent-faint, #FAF6F2);
  border: 1px solid var(--mw-border, #E3DCD4);
  border-radius: 100px;
  vertical-align: 1px;
}

.mw-review-card__total {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--mw-border, #E3DCD4);
  font-size: 14px; font-weight: 600; color: var(--mw-brown, #2D2926);
}

.mw-review-card__actions { margin-top: 12px; }

.mw-review-card__edit {
  /* v3.15: text-link feel instead of bordered button — secondary action
     shouldn't compete with ADD TO CART below. Underline appears on hover. */
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 500; color: var(--mw-brown-med, #6B5E55);
  text-decoration: none; padding: 4px 0; border: none; background: transparent;
  border-radius: 0; transition: color 0.2s ease; cursor: pointer;
  -webkit-appearance: none; appearance: none; font-family: var(--milano-font-body, inherit);
}

.mw-review-card__edit::before {
  content: '\2190';
  font-size: 14px;
  line-height: 1;
}

.mw-review-card__edit:hover { color: var(--mw-accent, #8b7355); background: transparent; text-decoration: underline; text-underline-offset: 3px; }

/* Review card — total line (class replaces inline style) */
.mw-review-card__total-line {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--mw-border, #E3DCD4);
  font-size: 15px;
}

/* =============================================================================
   PRODUCT PRICE
   ============================================================================= */

.mw-price-enhanced { letter-spacing: -0.01em; color: var(--mw-brown, #2D2926); }

/* =============================================================================
   PRICE CONTEXT
   ============================================================================= */

.mw-price-context {
  display: inline-block; font-size: 13px; font-weight: 500; color: var(--mw-brown-light, #9A8E84);
  margin-left: 10px; vertical-align: baseline; white-space: normal;
  /* v1.6.15: nudged 1px down so it sits visually balanced beside the
     larger price number rather than aligning hard to the cap-height. */
  position: relative; top: 1px;
}

/* =============================================================================
   SPLITIT / SHOP PAY — Layout-only control (v3.17 root-cause fix)
   =============================================================================

   THE LAYOUT (DOM):
     .product__price-and-badge       \u2190 our flex-wrap container
       .product__price-wrapper       \u2190 holds price + splitit as siblings
         .product__price             \u2190 the dollar amount + DN markup
         .milano-splitit-fallback    \u2190 "From $X /month with Splitit Learn more"

   To put Splitit on its own line, the WRAPPER (not the badge container)
   needs flex-direction:column. Earlier attempts (v3.13/v3.16) failed
   because the wrapper had inline-flex + flex-wrap:nowrap, which trapped
   splitit-fallback in-line regardless of any flex-basis on the child.

   v3.17: use :has() to scope the column rule to wrappers that actually
   contain a splitit element. No body.milano-wizard-mode dependency \u2014
   works on every PDP from first paint, regardless of transform timing.
   ============================================================================= */

body.milano-wizard-mode .product__price-and-badge {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 0;
  padding-bottom: 4px !important;
}

/* Inline-flow elements (Shop Pay terms etc.) stay inline. */
body.milano-wizard-mode .shop-pay-terms,
body.milano-wizard-mode [class*="shopify-payment"],
body.milano-wizard-mode .product__price-and-badge shopify-payment-terms {
  display: inline !important; width: auto !important; margin: 0 !important; flex-shrink: 0;
}

/* ============================================================================
   SPLITIT FIX v3.18 — display:block approach
   ----------------------------------------------------------------------------
   .product__price-wrapper becomes a block-level container. Inside:
     - .product__price (inline-flex) sizes to its content on row 1
     - .milano-splitit-fallback (display:flex, block-level) drops to row 2
   No :has(), no flex-column, no specificity war. Simplest possible layout.
   ============================================================================ */

.product__price-wrapper {
  display: block !important;
  width: auto !important;
  /* Reserve space so variant-click re-render doesn't collapse height +
     trigger Splitit "disappear and reappear" perceived flash. */
  min-height: 56px;
}

@media screen and (max-width: 768px) {
  .product__price-wrapper {
    min-height: 64px;
  }
}

/* .product__price stays inline-flex so price + services + strike + sale
   sit on a single baseline-aligned row. */
.product__price-wrapper > .product__price {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: 100%;
}

/* Splitit fallback (and Shopify Payment Terms) own row 2. */
.product__price-wrapper > .milano-splitit-fallback,
.product__price-wrapper > .splitit-wrapper,
.product__price-wrapper > [data-splitit],
.product__price-wrapper > shopify-payment-terms {
  display: flex !important;
  width: 100% !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  align-items: center;
  flex-wrap: wrap;
  white-space: normal;
  overflow: visible;
  line-height: 1.4;
}

.product__price-wrapper > .milano-splitit-fallback {
  gap: 4px;
  padding: 0;
  color: var(--mw-brown-med, #6B5E55);
  font-size: 13px;
  font-weight: 400;
}

.product__price-wrapper > .milano-splitit-fallback .mw-splitit-price {
  color: var(--mw-brown, #2D2926);
  font-weight: 600;
}

.product__price-wrapper > .milano-splitit-fallback .mw-splitit-logo {
  color: var(--mw-sage, #5A8A6E);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.product__price-wrapper > .milano-splitit-fallback strong {
  color: var(--mw-sage, #5A8A6E);
  font-weight: 600;
}

.product__price-wrapper > .milano-splitit-fallback img {
  height: 18px;
  width: auto;
  vertical-align: middle;
  flex: 0 0 auto;
}

.product__price-wrapper > .milano-splitit-fallback a {
  color: var(--mw-brown-med, #6B5E55);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 2px;
  font-size: 13px;
  font-weight: 400;
}

body.milano-wizard-mode .mw-has-services .shop-pay-terms,
body.milano-wizard-mode .mw-has-services [class*="shopify-payment"],
body.milano-wizard-mode .mw-has-services shopify-payment-terms { flex-basis: 100%; }

body.milano-wizard-mode .product__block--price,
body.milano-wizard-mode .product__block.product__price-and-badge {
  padding-bottom: 2px !important; margin-bottom: 0 !important;
}

body.milano-wizard-mode .shop-pay-terms,
body.milano-wizard-mode shopify-payment-terms { margin-top: 0 !important; margin-bottom: 0 !important; }

/* =============================================================================
   DISCOUNT NINJA INTEGRATION (v1.6.36)

   Per Liquid markup, theme renders:
     .product__price-and-badge (our flex-wrap container)
       .product__price-wrapper [data-la-dn-price]    ← DN's hook target
         .product__price [data-price-wrapper]
           [data-product-price]                       ← DN wraps THIS
           <s [data-compare-price]>                   ← Liquid's strike

   DN's custom-selector mode `[[WRAP]].product__price [data-product-price]`
   inserts its own .limoniapps-discountninja-productprice-replaced container
   around the [data-product-price] span. That container's child layout row
   (.limoniapps-discountninja-discountedprice.limoniapps-layout-row) is
   display: flex with its OWN flex-wrap, which inside our flex parent
   makes the price block claim its own row — pushing Splitit and the
   "+$X in services" hint visually adrift.

   Fix: force DN's wrapper chain to behave as inline-flex with no internal
   wrap so the price block sizes to its content. With flex: 0 0 auto on the
   outer .product__price-wrapper, sibling Splitit/services lines flow on
   row 2 of OUR container as intended (or inline if room permits).

   Also hide the .limoniapps-discountninja-productprice-original block —
   DN renders both the wrapped and original side by side; the original is
   the un-discounted price duplicate, which causes a visible "$X $X" flash
   during DN's first paint. DN already sets display:none inline on the
   element when discounts are applied, but we belt-and-suspender it.
   ============================================================================= */

/* v3.17: column-direction rule on .product__price-wrapper moved up into the
   SPLITIT section above (now unscoped from milano-wizard-mode + uses :has()).
   The rule below keeps the inner price block compact on its row. */
body.milano-wizard-mode .product__price-wrapper .product__price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 6px;
}

/* DN's wrapper chain — flatten all three to inline-flex so the price
   "block" reads as a single horizontal cluster, baseline-aligned. */
body.milano-wizard-mode .limoniapps-discountninja-productprice-replaced {
  display: inline-flex !important;
  align-items: baseline;
  flex-wrap: nowrap;
}
body.milano-wizard-mode .limoniapps-discountninja-discountedprice {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline;
  gap: 6px;
}
body.milano-wizard-mode .limoniapps-discountninja-shortcode {
  display: inline-flex;
  align-items: baseline;
}

/* The "original price" sibling block DN injects — keep hidden. DN sets
   inline display:none when a discount is active, but during the brief
   pre-render moment the element is visible. !important guards against
   any DN re-write that briefly clears the inline style. */
body.milano-wizard-mode .limoniapps-discountninja-productprice-original {
  display: none !important;
}

/* Strike + sale colors — already styled by Liquid's strike (<s data-compare-price>)
   in the live theme. Mirror the same warm sale color on DN's own strike span
   for visual consistency when DN is replacing rather than wrapping. */
body.milano-wizard-mode .limoniapps-discountninja-strikethrough,
body.milano-wizard-mode .limoniapps-discountninja-strikethrough .money {
  text-decoration: line-through;
  color: var(--mw-brown-light, #9A8E84) !important;
  font-weight: 400 !important;
  font-size: 0.82em;
  opacity: 0.85;
}

/* =============================================================================
   TRUST STRIP
   ============================================================================= */

.mw-trust {
  display: flex; justify-content: space-between; padding: 10px 0; margin: 10px 0;
  border-top: 1px solid var(--mw-border, #E3DCD4); border-bottom: 1px solid var(--mw-border, #E3DCD4);
  flex-wrap: nowrap; width: 100%;
}

.mw-trust__item {
  font-size: clamp(9px, 2.5vw, 12px); color: var(--mw-brown-light, #9A8E84);
  font-weight: 500; white-space: nowrap; text-align: center;
}

/* =============================================================================
   CONSULTATION CTA
   ============================================================================= */

.mw-consult {
  background: var(--mw-rose-light, #faf0ec); border-radius: 12px;
  /* v3.15: 16px 18px → 14px 16px, margin-top 16 → 12. Tightens the block
     so it sits closer to ATC without feeling cramped. */
  padding: 14px 16px; margin-top: 12px;
  border: 1px solid rgba(196, 145, 124, 0.2);
}

.mw-consult__title { font-size: 15px; font-weight: 600; color: var(--mw-brown); margin-bottom: 4px; }
.mw-consult__text { font-size: 12.5px; color: var(--mw-brown-med); line-height: 1.55; margin: 0 0 10px; }
.mw-consult__btns { display: flex; gap: 8px; }

.mw-consult__btn {
  flex: 1; padding: 12px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  text-align: center; text-decoration: none; min-height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all 0.2s ease;
  /* Reset button defaults for the Contact Us <button> (was an <a>) */
  font-family: var(--milano-font-body, inherit); cursor: pointer;
  -webkit-appearance: none; appearance: none; line-height: 1.2;
}
.mw-consult__btn svg { flex-shrink: 0; }
.mw-consult__btn:hover { opacity: 0.85; }
.mw-consult__btn:active { transform: scale(0.98); }
.mw-consult__btn--primary { background: var(--mw-accent); color: #fff; border: 2px solid var(--mw-accent); box-shadow: 0 2px 8px rgba(139, 115, 85, 0.2); }
.mw-consult__btn--secondary { background: #fff; color: var(--mw-accent); border: 2px solid var(--mw-accent); }

/* =============================================================================
   CONTACT POPUP (v1.6.8)
   Modal triggered by the Contact Us button beneath ATC. Reuses the site's
   .pop-up-container shell for backdrop / scroll lock / fixed positioning
   (inherited from Palo Alto theme); .mw-contact-pop owns all visual
   styling for the popup itself.

   Defensive selectors: every rule uses .pop-up-container.mw-contact-pop
   as the root so we win specificity battles against any single-class
   Palo Alto rule on .inline-popup or .pop-up-container's children.
   ============================================================================= */

.pop-up-container.mw-contact-pop {
  /* z-index 1000 — high enough to sit above normal page content; low
     enough to remain below truly critical overlays (chat widgets at 9999,
     age-gates, etc.). Falls back gracefully if Palo Alto's base
     .pop-up-container already sets a higher value. */
  z-index: 1000;
}

.pop-up-container.mw-contact-pop .mw-contact-pop__inner {
  /* Explicit display:block — avoids inheriting any display:flex Palo Alto
     might set on inner-popup wrappers and prevents accidental flex-row
     layout of our close button + body. */
  display: block;
  position: relative;
  max-width: 440px;
  width: calc(100% - 32px);
  margin: auto;
  padding: 32px 28px 24px;
  background: var(--mw-cream, #FBF7F4);
  border-radius: 16px;
  border: 1px solid var(--mw-card-border, #E8DDD6);
  box-shadow: 0 24px 60px rgba(45, 41, 38, 0.18), 0 2px 8px rgba(45, 41, 38, 0.06);
  text-align: center;
  /* Soft entrance animation */
  animation: mwContactPopIn 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes mwContactPopIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mw-contact-pop__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 100px;
  color: var(--mw-brown-light, #9A8E84);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-appearance: none; appearance: none;
}
.mw-contact-pop__close:hover { background: rgba(45, 41, 38, 0.06); color: var(--mw-brown, #2D2926); }
.mw-contact-pop__close:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: 2px; }

.mw-contact-pop__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  background: var(--mw-rose-light, #faf0ec);
  border-radius: 100px;
  color: var(--mw-accent, #8b7355);
}

.mw-contact-pop__title {
  font-size: 22px;
  font-weight: 600;
  font-family: var(--milano-font-heading, var(--milano-font-body, inherit));
  color: var(--mw-brown, #2D2926);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.mw-contact-pop__lead {
  font-size: 14px;
  color: var(--mw-brown-med, #6B5E55);
  margin: 0 0 22px;
  line-height: 1.5;
}

.mw-contact-pop__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.mw-contact-pop__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--milano-font-body, inherit);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--mw-card-border, #E8DDD6);
  background: #fff;
  color: var(--mw-brown, #2D2926);
}
.mw-contact-pop__btn svg { flex-shrink: 0; color: var(--mw-accent, #8b7355); }
.mw-contact-pop__btn:hover {
  border-color: var(--mw-accent, #8b7355);
  background: var(--mw-rose-light, #faf0ec);
}
.mw-contact-pop__btn:active { transform: scale(0.98); }
.mw-contact-pop__btn:focus-visible {
  outline: 2px solid var(--mw-accent, #8b7355);
  outline-offset: 2px;
}

/* Book a Free Consultation = primary action (filled brown), matches the
   site's primary CTA visual weight. */
.mw-contact-pop__btn--book {
  background: var(--mw-accent, #8b7355);
  border-color: var(--mw-accent, #8b7355);
  color: #fff;
}
.mw-contact-pop__btn--book svg { color: #fff; }
.mw-contact-pop__btn--book:hover {
  background: var(--mw-brown, #2D2926);
  border-color: var(--mw-brown, #2D2926);
}

.mw-contact-pop__hours {
  font-size: 12px;
  color: var(--mw-brown-light, #9A8E84);
  margin: 0;
  letter-spacing: 0.01em;
}

@media screen and (max-width: 430px) {
  .pop-up-container.mw-contact-pop .mw-contact-pop__inner { padding: 28px 22px 20px; border-radius: 14px; }
  .mw-contact-pop__title { font-size: 19px; }
  .mw-contact-pop__lead { font-size: 13.5px; margin-bottom: 18px; }
  .mw-contact-pop__btn { font-size: 13.5px; padding: 12px 14px; }
  .mw-contact-pop__icon { width: 56px; height: 56px; }
  .mw-contact-pop__icon svg { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .pop-up-container.mw-contact-pop .mw-contact-pop__inner { animation: none; }
}

/* =============================================================================
   SPEC TAGS
   ============================================================================= */

.mw-spec-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }

.mw-spec-tag {
  font-size: 11px; font-weight: 500; color: var(--mw-brown-med, #6B5E55);
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  padding: 6px 14px 6px 10px; border: 1px solid var(--mw-card-border, #E8DDD6);
  border-radius: 100px; background: var(--mw-cream, #FBF7F4); white-space: nowrap; letter-spacing: 0.01em;
}

.mw-spec-tag::before { content: '\2726'; font-size: 7px; color: var(--mw-gold, #C9A96E); flex-shrink: 0; }

/* =============================================================================
   QUOTE ROTATOR
   ============================================================================= */

.mw-quote-rotator { position: relative; min-height: 20px; margin: 0 0 8px; overflow: hidden; }

.mw-quote {
  font-size: 13px; color: var(--mw-brown-light, #9A8E84); font-style: italic; line-height: 1.4;
  opacity: 0; position: absolute; top: 0; left: 0; right: 0; transition: opacity 0.5s ease; pointer-events: none;
}

.mw-quote--active { opacity: 1; position: relative; pointer-events: auto; }
.mw-quote--out { opacity: 0; position: absolute; }

/* =============================================================================
   CAP SIZE FULL WIDTH + CONSISTENT LABELS
   ============================================================================= */

body.milano-wizard-mode .bold_option_title,
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title,
body.milano-wizard-mode .radio__legend__label.label-typography,
body.milano-wizard-mode .select__label.label-typography {
  font-size: 15px !important; font-weight: 700 !important; color: var(--mw-brown, #2D2926) !important;
  letter-spacing: 0 !important; line-height: 1.4;
}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .product__popup-toggle,
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .product__popup__link,
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title [class*="popup-toggle"],
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .mw-size-guide-native {
  font-size: 13px; font-weight: 500; color: var(--mw-brown-med, #6B5E55); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border: 1px solid var(--mw-border, #E3DCD4); border-radius: 6px; transition: all 0.2s ease;
  white-space: nowrap; flex-shrink: 0; margin-left: auto; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .product__popup-toggle:hover,
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .product__popup__link:hover,
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title [class*="popup-toggle"]:hover,
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .mw-size-guide-native:hover {
  border-color: var(--mw-accent, #8b7355); color: var(--mw-accent, #8b7355); text-decoration: none;
}

body.milano-wizard-mode .bold_option.milano-always-visible {
  display: block !important; width: 100% !important; margin-left: 0 !important;
  margin-bottom: 0 !important; padding-bottom: 0 !important;
  padding-top: 8px; border-top: 1px solid var(--mw-border, #E3DCD4);
}

/* v1.6.41: Remove Cap divider on ALL viewports (desktop + mobile). Prior
   v1.6.40 scoped this to desktop only, leaving mobile with a stray
   horizontal rule above Cap Size. */
body.milano-grace .bold_option.milano-always-visible {
  border-top: none !important;
  padding-top: 0 !important;
}

/* =============================================================================
   GRACE — MOBILE GALLERY FADE-IN (v1.6.41 / 2026-05-22)

   Palo Alto's switchMedia() toggles .media--hidden (display:none) on slides
   during variant change. On mobile carousel, the sync hide-all-then-show-one
   leaves one frame visually blank, which the user perceives as a "flash" or
   "image disappears" mid-swipe. Especially bad if Splide is mid-gesture.

   This is PURELY ADDITIVE: we don't touch .media--hidden's display:none
   semantics (touching that would break the desktop Grid layout, which
   relies on display:none filtering for multi-variant products). Instead,
   when a slide becomes visible (transitions out of .media--hidden), the
   IMG inside fades in via a 0.5→1.0 opacity animation over 280ms. The
   user no longer sees a pure-blank frame because the new IMG renders at
   opacity 0.5 immediately, then fades up.

   Scoped to:
   - Mobile only (≤768px) — desktop Grid shows all slides simultaneously
   - body.milano-grace — other products use their existing swap behavior

   Why this is safe:
   - No layout property changes (display, position, width stay theme's)
   - Animation runs once per visibility transition (display:block → render)
   - If browser doesn't support animation gracefully, falls back to instant
     swap (current behavior)
   ============================================================================= */

@keyframes mwGraceSlideFadeIn {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

@media screen and (max-width: 768px) {
  body.milano-grace [data-product-single-media-wrapper]:not(.media--hidden) img {
    animation: mwGraceSlideFadeIn 0.28s ease-out;
  }
}

/* v3.16: respect reduced-motion preference \u2014 disable the fade-in. */
@media (prefers-reduced-motion: reduce) {
  body.milano-grace [data-product-single-media-wrapper]:not(.media--hidden) img {
    animation: none !important;
  }
}

/* v1.6.38: When Cap is moved into <variant-selects> (Grace reorder),
   variant-selects' implicit grid sized Cap to content width (~222px on
   the inspected sample) instead of full column width. Force grid-column
   span and width so Cap fills the option column like Length and Lace do.
   The block also applies when Cap lives in its natural parent — no harm. */
body.milano-grace variant-selects .bold_option.milano-always-visible,
body.milano-grace .product__selectors .bold_option.milano-always-visible {
  grid-column: 1 / -1;
  width: 100% !important;
  box-sizing: border-box;
}

/* Grace Cap title/size-guide clipping guard — all viewports.
   Keeps the Size guide pill inside the row and prevents right-edge clipping
   after Cap is physically moved near native variant selectors. */
body.milano-grace variant-selects,
body.milano-grace .product__selectors,
body.milano-grace .bold_option.milano-always-visible,
body.milano-grace .bold_option.milano-always-visible .bold_option_title {
  overflow: visible !important;
}

body.milano-grace .bold_option.milano-always-visible .bold_option_title {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  padding-right: 4px;
  box-sizing: border-box;
}

body.milano-grace .bold_option.milano-always-visible .bold_option_title > span:first-child,
body.milano-grace .bold_option.milano-always-visible .bold_option_title > *:not(.mw-size-guide-native):not(.product__popup-toggle) {
  min-width: 0;
  flex: 0 1 auto;
}

/* =============================================================================
   GRACE — DESKTOP-ONLY ORDERING + DENSITY (v1.6.40 / 2026-05-22)

   v1.6.40 ROOT-CAUSE FIX: Prior v1.6.39 block was scoped to
   `body.milano-wizard-mode`, which is ONLY added when wizard transforms
   the product form (line 1361 of wizard.js). On the default
   Ships-as-pictured PDP view (no wizard active), that class is absent,
   so ALL desktop rules silently failed. Rescoped to `body.milano-grace`
   which is set early in both options.js and wizard.js IIFEs from URL
   match — always present on Grace pages regardless of wizard state.

   Three things this rule block does, desktop only (>768px):

   1. Cap Size sits BETWEEN Length and Lace Front. The parent
      <variant-selects> participates in a column flex layout so the
      physically reinserted DOM order remains stable on desktop too.

   2. Cap divider (border-top) removed. With Cap now first on desktop,
      the divider would float above nothing meaningful.

   3. Variant button padding per Kevin's spec (v1.6.40):
        - Cap buttons:    8 → 9 (+1 top/bottom)
        - Lace buttons:   8 → 9 (+1 top/bottom)
        - Length tiles:   6 → 4 (-2 top/bottom)
      Length is the dense tile (image + 2-line label). Cap+Lace are
      single-line text buttons that benefit from slight extra height.

   4. Cap title right-edge clip fixed via overflow:visible at multiple
      ancestor levels + min-width:0 on the title text (so it can shrink
      first, leaving the size guide pill room) + flex-wrap as fallback.
   ============================================================================= */

@media screen and (min-width: 769px) {
  /* 0. Enable flex on variant-selects so `order` works. Block is the
     theme default — order is a no-op without flex/grid context. */
  body.milano-grace variant-selects,
  body.milano-grace .product__selectors {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow-x: visible !important;
  }

  /* Full width of variant-selects (was constrained to content width
     when variant-selects had an implicit grid). Desktop-only since
     mobile layout is fine with natural width. */
  body.milano-grace variant-selects .bold_option.milano-always-visible,
  body.milano-grace .product__selectors .bold_option.milano-always-visible {
    width: calc(100% - 2px) !important;
    max-width: calc(100% - 2px) !important;
    min-width: 0 !important;
    margin-right: 2px !important;
    box-sizing: border-box;
  }

  /* 1. Cap above Length \u2014 REMOVED in v3.17 (2026-05-26).
     Was: `order: -1` to push Cap before Length visually on desktop.
     Now: wizard JS v1.6.43 reorderForGrace physically places Cap AFTER
     Length in the DOM on all viewports (Length \u2192 Cap \u2192 Lace). The
     `order: -1` CSS was inverting the physical DOM order on desktop
     only, producing the Cap-first visual Kevin reported on 2026-05-26.
     The flex:column on variant-selects above stays \u2014 desktop layout
     needs flex for the full-width Cap to fill the column properly. */

  /* 2. Cap divider removal moved to non-media-query rule (v1.6.41) — applies
     on mobile too. See above near grid-column rule. */

  /* 3a. Cap buttons: +1px top/bottom (rescoped from milano-wizard-mode) */
  body.milano-grace .bold_option.milano-always-visible .bold_option_value label {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  /* 3b. Lace buttons (radio__buttons but NOT Length's image-variant fieldset): +1px */
  body.milano-grace fieldset:not(.radio__fieldset--variant-option-image) .radio__buttons .radio__button label {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  /* 3c. Length tiles (Grace image-variant fieldset): -2px from 6 → 4 */
  body.milano-grace fieldset.radio__fieldset--variant-option-image .radio__button label {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* 4. Right-edge clip guard — comprehensive. The clip occurs because
     variant-selects' grid item width constrains the Cap container,
     and the title's flex row tries to fit "Cap Size" + flex space +
     "Size guide" pill. overflow:visible at every ancestor + min-width:0
     on the title text (lets it shrink before the pill does) + small
     padding-right buffer prevents the final pixel from being cropped. */
  body.milano-grace variant-selects,
  body.milano-grace .product__selectors,
  body.milano-grace .bold_option.milano-always-visible,
  body.milano-grace .bold_option.milano-always-visible .bold_option_title {
    overflow: visible !important;
  }
  body.milano-grace .bold_option.milano-always-visible .bold_option_title {
    flex-wrap: wrap;
    padding-right: 4px;
  }
  /* Let the title text shrink first; size guide pill stays whole. */
  body.milano-grace .bold_option.milano-always-visible .bold_option_title > span:first-child,
  body.milano-grace .bold_option.milano-always-visible .bold_option_title > *:not(.mw-size-guide-native):not(.product__popup-toggle) {
    min-width: 0;
    flex: 0 1 auto;
  }
  /* Lace legend — same guard for the Compare pill */
  body.milano-grace fieldset:not(.radio__fieldset--variant-option-image) .radio__legend__label {
    overflow: visible !important;
    padding-right: 4px;
  }

  /* Final 1px clipping guard for Cap Size buttons inside the desktop form column. */
  body.milano-grace .bold_option.milano-always-visible .bold_option_element {
    width: calc(100% - 2px) !important;
    max-width: calc(100% - 2px) !important;
    margin-right: 2px !important;
    box-sizing: border-box !important;
  }
  body.milano-grace .bold_option.milano-always-visible .bold_option_value label {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title {
  /* v1.6.11: three-slot flex layout — [label] [helper centered] [size guide]
     space-between distributes label to left edge, size guide to right edge,
     helper gets flex:1 in the middle and centers via text-align. When the
     helper isn't present yet (during initial paint), the two items
     gracefully space-between as before. */
  display: flex !important; width: 100%; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .mw-cap-label {
  flex-shrink: 0;
}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_element {
  display: flex !important; flex-wrap: nowrap !important; gap: 6px; width: 100%;
  max-width: 100%; min-width: 0; box-sizing: border-box; overflow: visible;
}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value {
  flex: 1 1 0 !important; padding: 0 !important; margin: 0 !important; border: none !important;
  background: none !important; min-width: 0 !important; display: block !important;
}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value label {
  display: flex !important; align-items: center; justify-content: center; width: 100%;
  max-width: 100%; box-sizing: border-box;
  padding: 10px 4px; border: 1.5px solid var(--mw-border, #E3DCD4); border-radius: 8px;
  font-size: 13px !important; font-weight: 600 !important; color: var(--mw-brown, #2D2926) !important;
  background: #fff; cursor: pointer; transition: all 0.2s ease; min-height: 56px;
  text-align: center; line-height: 1.2; white-space: nowrap;
}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value:has(input:focus-visible) label {
  outline: 2px solid var(--mw-accent, #8b7355); outline-offset: 2px;
}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value label:hover {
  border-color: var(--mw-brown, #2D2926); background: var(--mw-accent-faint, #faf9f7);
}

body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value input[type="radio"]:checked + label,
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value input:checked ~ label,
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value:has(input:checked) label {
  background: var(--mw-brown, #2D2926) !important; color: #fff !important; border-color: var(--mw-brown, #2D2926) !important;
}

body.milano-wizard-mode .bold_option.milano-always-visible input[type="radio"] {
  position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important;
}

/* =============================================================================
   CAP SIZE PRICE DISPLAY (v1.6.36)
   Mirrors the live theme treatment Kevin shared. Price renders as a second
   line beneath the size label inside the same button. flex-wrap on the
   label lets the price (display:block + width:100%) wrap below the size
   text. Sale state uses the same .mw-opt-price-orig / .mw-opt-price-sale
   classes the wizard's overlayDiscountedPrices() writes.

   Equal-height guarantee: not every cap variant has a price differential
   (Medium is typically the "default" $0-diff variant). When SC Options
   renders an empty .bold_option_value_price element, min-height keeps it
   occupying the same vertical space as a populated one, so Small/Medium/
   Large remain the same button height regardless of pricing.
   ============================================================================= */
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value_price {
  display: block !important;
  /* min-height reserves the price line's vertical footprint even when the
     element is empty — keeps the 3 cap buttons the same height when one
     variant (typically Medium) has no $ differential. 14px = font 11 × line
     1.2 + ~1px buffer. */
  min-height: 14px;
  width: 100%;
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

/* Allow the price to wrap to row 2 inside the label */
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value label {
  flex-wrap: wrap;
  row-gap: 0;
}

/* Sale state — DN-driven (mw_dn_ratio active) — strike + warm red */
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value_price .mw-opt-price-orig {
  color: rgba(45, 41, 38, 0.4);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: 4px;
}
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value_price .mw-opt-price-sale {
  color: #C45349;
}

/* Selected state — invert price colors on the dark brown background */
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value:has(input:checked) .mw-opt-price-orig {
  color: rgba(255, 255, 255, 0.55);
}
body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value:has(input:checked) .mw-opt-price-sale {
  color: #ffb6a8;
}

/* v1.6.13: .mw-cap-helper rules removed — helper line eliminated per
   Kevin's design decision. Title row is now clean two-anchor flex with
   [label] on left and [size guide] on right. */

/* =============================================================================
   LACE FRONT — Full width buttons
   ============================================================================= */

body.milano-wizard-mode .selector-wrapper:not(.selector-wrapper--qty) { margin-top: 0 !important; margin-bottom: 6px; padding-top: 0; }

body.milano-wizard-mode .product__form .bold_option.milano-always-visible + .selector-wrapper { margin-top: 0 !important; padding-top: 0 !important; }

body.milano-wizard-mode .radio__legend { margin-top: 0; margin-bottom: 8px; }

body.milano-wizard-mode .radio__legend__label.label-typography {
  display: flex; align-items: center; gap: 8px; width: 100%;
}

body.milano-wizard-mode .radio__fieldset { width: 100%; }

body.milano-wizard-mode .radio__buttons { display: flex !important; flex-wrap: nowrap; gap: 8px; width: 100%; }

body.milano-wizard-mode .radio__buttons .radio__button { flex: 1; min-width: 0; }

body.milano-wizard-mode .radio__buttons .radio__button label {
  text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* v3.15 (Batch D): 56 → 48px. Apple HIG minimum touch target is 44px;
     48px keeps a comfortable buffer while reclaiming 8px of vertical
     density per cap/lace row. */
  width: 100%; min-height: 48px; padding: 8px 10px; white-space: nowrap; box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.milano-wizard-mode .radio__button input:focus-visible + label.radio__label,
body.milano-wizard-mode .radio__button input:focus-visible ~ label.radio__label {
  outline: 2px solid var(--mw-accent, #8b7355); outline-offset: 2px;
}

/* =============================================================================
   GRACE COLLECTION — Length variant grid (3×2)
   v1.6.17: Bigger images + bolder labels + clean unavailable state.
   ============================================================================= */

/* v1.6.29: 2-col grid at 100% container width — both desktop AND mobile
   (mobile media query just retunes image size + padding, not the grid).
   100% utilizes the form column fully; 2-col gives the option grid
   product-card density. CSS Grid keeps columns explicit. */
/* =============================================================================
   SHOP-BY-LOOKS GRACE — Length grid for NON-wizard Grace products (v2026-06-08)
   Curated colour/look products (e.g. "Platinum Blonde w/ Partial Rooting") have a
   couple of length options and no personalize wizard, so they never get
   milano-wizard-mode / .mw-length-grid — the Length tiles fell back to the theme's
   large stacked layout. Give them the SAME compact 2-col grid the wizard uses.
   Scoped to :not(.milano-wizard-mode) → the working multi-length wizard PDPs are
   untouched; milano-grace → non-Grace unaffected. (Relies on the server-side
   body.milano-grace flag so it applies from first paint.) Literal token values
   since --mw-* are only defined in wizard mode.
   ============================================================================= */
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button {
  flex: unset !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  min-height: 108px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button label:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(45, 41, 38, 0.12);
}
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button label img,
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button label .swatch__button__image {
  width: 100px !important;
  height: 125px !important;
  min-width: 100px !important;
  flex-shrink: 0 !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 7px !important;
  background: #fff !important;
  display: block !important;
}
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button:has(input:checked) label,
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__input:checked + .radio__label {
  background: #FAF6F2 !important;
  border-color: #2D2926 !important;
  border-width: 2px !important;
  color: #2D2926 !important;
}
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button:has(input:checked) label .option-title,
body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__input:checked + .radio__label .option-title {
  color: #2D2926 !important;
}

@media screen and (max-width: 749px) {
  body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__buttons {
    gap: 8px !important;
  }
  body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button label {
    padding: 8px 10px !important;
    font-size: 12px !important;
    min-height: 104px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
  body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button label img,
  body.milano-grace:not(.milano-wizard-mode) fieldset.radio__fieldset--variant-option-image .radio__button label .swatch__button__image {
    width: 80px !important;
    height: 100px !important;
    min-width: 80px !important;
  }
}

body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* Reset base wizard flex props (display:flex !important, flex-wrap, etc.) */
  flex-direction: unset !important;
  flex-wrap: unset !important;
  align-items: unset !important;
  --option-image-width: 100% !important;
  --option-image-height: auto !important;
}

body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button {
  /* Grid manages sizing — reset flex props */
  flex: unset !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
  /* v1.6.29: tuned for 2-col 100% grid — larger image and labels fill
     the wider per-tile space. Min-height keeps tiles aligned.
     v1.6.30: padding-block 12 → 10 (-4px total tile height).
     v1.6.31: padding-block 10 → 8 (-4px more — desktop only).
     v1.6.33: padding-block 8 → 6 (-4px more — desktop only). Cumulative
     -12px desktop tile height since v1.6.28. Image, gap, label sizes
     unchanged across all four rounds. */
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  white-space: normal;
  min-height: 108px;
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  border-radius: 12px;
  gap: 14px;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(45, 41, 38, 0.12);
}

body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label img,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label .swatch__button__image {
  /* v1.6.29: 70×85 → 100×125. 4:5 aspect matches wig photo aspect —
     photo fills the container with minimal cream letterbox. Bigger
     means more recognizable at-a-glance. */
  width: 100px !important;
  height: 125px !important;
  min-width: 100px;
  flex-shrink: 0;
  aspect-ratio: auto !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
  border-radius: 7px;
  display: block;
  /* v1.6.30: cream → white. Photos sit on white naturally; cream
     letterbox was adding a subtle "frame" that read as styling rather
     than negative space. White lets the model float cleaner. */
  background: #FFFFFF;
}

/* v1.6.23: active state wins over unavailable. If the theme auto-selects
   an unavailable variant (edge case), the selection ring still reads. */
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button:has(input:checked) label,
body .radio__button.unavailable:has(input:checked) label,
body .radio__button:has(input:disabled:checked) label,
body .bold_option_value.unavailable:has(input:checked) label,
body .bold_option_value:has(input:disabled:checked) label {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* v1.6.21: softer active state — replaces full dark inversion.
   Image stays visible (no fight with the dark bg), brown 2px border
   + warm cream bg communicates selection clearly. Text stays brown. */
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button:has(input:checked) label {
  background: var(--mw-accent-faint, #FAF6F2) !important;
  border-color: var(--mw-brown, #2D2926) !important;
  border-width: 2px !important;
  color: var(--mw-brown, #2D2926) !important;
}

body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button:has(input:checked) label .option-title,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button:has(input:checked) label .mw-len-num,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button:has(input:checked) label .mw-len-name {
  color: var(--mw-brown, #2D2926) !important;
}

/* Faster selected state without relying only on :has(). Product-option-value.liquid
   renders input immediately before label, so this applies as soon as the
   browser toggles checked state during rapid mobile taps. */
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__input:checked + .radio__label,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__input:checked + .radio__label {
  background: var(--mw-accent-faint, #FAF6F2) !important;
  border-color: var(--mw-brown, #2D2926) !important;
  border-width: 2px !important;
  color: var(--mw-brown, #2D2926) !important;
}

body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__input:checked + .radio__label .option-title,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__input:checked + .radio__label .mw-len-num,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__input:checked + .radio__label .mw-len-name {
  color: var(--mw-brown, #2D2926) !important;
}

/* v1.6.21: two-line label hierarchy — JS splits "19\" NICOLE" into
   .mw-len-num + .mw-len-name spans. Number bumped 1-2px, name dimmed
   slightly so the length reads first.
   v1.6.29: bumped desktop sizes (15→20 / 11→13) — at 2-col 100% the
   label area is wider and the typography should match the image weight.
   v1.6.30: number nudged down 20 → 18. Reads more refined; the bold
   weight still carries hierarchy. Mobile/sub-380 sizes in media queries. */
.mw-len-num {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--mw-brown, #2D2926);
}
.mw-len-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--mw-brown-med, #6B5E55);
  margin-top: 3px;
  text-transform: uppercase;
}

/* v1.6.25: Selected pill now lives inline inside the legend label,
   same line as the "Length" text + "See lengths" help button.
   v1.6.26: margin reset — flex gap on parent handles spacing.
   v1.6.38: bumped sizes — pill was reading as tertiary info; now it's
   the SECONDARY anchor the customer scans alongside "Length". Label
   moved 9→11px, value 10.5→13px, padding 2/9 → 4/12. Brings the pill
   closer to the Length label's visual weight without overpowering it. */
body.milano-grace .mw-len-selected {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 12px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--mw-brown, #2D2926);
  background: var(--mw-accent-faint, #FAF6F2);
  border: 1px solid var(--mw-border, #E3DCD4);
  border-radius: 100px;
  vertical-align: middle;
  white-space: nowrap;
  transition: opacity 0.18s ease;
}

body.milano-grace .mw-len-selected__label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-brown-light, #9A8E84);
}

body.milano-grace .mw-len-selected__val {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mw-brown, #2D2926);
}

/* v1.6.28: Legend label is a full-width flex row.
   JS (ensureLengthLegendLayout) wraps the "Length" text in a .mw-len-text
   span so all three children — text, pill, help button — are siblings
   participating in the same flex container.
   Layout reads: [Length] [SELECTED: ...] ............ [Compare lengths]
   - Pill sits right after .mw-len-text via JS insertBefore positioning
   - Help button is pushed to the right edge via margin-left:auto,
     matching the Size guide pattern on Cap size. */
body.milano-grace fieldset.radio__fieldset--variant-option-image .radio__legend__label,
body.milano-grace fieldset.mw-length-fieldset .radio__legend__label {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: 100% !important;
}

/* The wrapped "Length" text — stable flex item that the pill anchors to */
body.milano-grace .radio__legend__label > .mw-len-text {
  font: inherit;
  color: inherit;
  white-space: nowrap;
}

body.milano-grace fieldset.radio__fieldset--variant-option-image .radio__legend__label > .mw-lace-help,
body.milano-grace fieldset.mw-length-fieldset .radio__legend__label > .mw-lace-help {
  margin-left: auto;
}

body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button:has(input:checked) label {
  border-color: var(--mw-brown, #2D2926) !important; border-width: 2px; background: var(--mw-accent-faint, #faf9f7);
}

body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .option-title {
  display: block; text-align: left; font-size: 13px; font-weight: 700; line-height: 1.3; margin-top: 0;
  letter-spacing: 0.02em; flex: 1 1 auto;
  /* v1.6.34: min-height reserves space for the two-line split label
     (.mw-len-num + .mw-len-name). During the brief window between Globo's
     variant re-render and our synchronous re-split, the unwrapped
     "12\" Halle" text occupies 1 line at the top of this box — but the
     box stays the same height as the split state. No layout shift between
     unsplit and split. Defense-in-depth pair with the sync split. */
  min-height: 40px;
}

/* =============================================================================
   UNAVAILABLE VARIANT STATE (v1.6.17)
   Strip ugly text-decoration:line-through from unavailable variants
   theme-wide. Replace with subtle opacity dim — communicates non-
   selectable without typographic noise. Covers Length tiles, Lace
   Front buttons, Cap Size, and any other variant picker.
   Accessibility: pointer-events:none prevents accidental tap; aria
   attributes from theme are preserved for screen readers.
   ============================================================================= */

body .radio__button.unavailable label,
body .radio__button.disabled label,
body .radio__button:has(input:disabled) label,
body .radio__button:has(input[disabled]) label,
body .bold_option_value.unavailable label,
body .bold_option_value.disabled label,
body .bold_option_value:has(input:disabled) label,
body .bold_option_value:has(input[disabled]) label {
  text-decoration: none !important;
  opacity: 0.38;
  cursor: not-allowed !important;
  pointer-events: none;
}

body .radio__button.unavailable label *,
body .radio__button:has(input:disabled) label *,
body .bold_option_value.unavailable label *,
body .bold_option_value:has(input:disabled) label * {
  text-decoration: none !important;
}

/* =============================================================================
   QUANTITY INLINE WITH ATC
   ============================================================================= */

body.milano-wizard-mode .product__block--quantity .form__label,
body.milano-wizard-mode .selector-wrapper--qty .form__label,
body.milano-wizard-mode .product__block--buy_buttons .product__block--quantity .form__label { display: none; }

body.milano-wizard-mode .product__block--buy_buttons {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding-top: 16px;
}

body.milano-wizard-mode .product__block--buy_buttons .product-form__error-message-wrapper,
body.milano-wizard-mode .product__block--buy_buttons .errors { flex-basis: 100%; }

body.milano-wizard-mode .product__submit,
body.milano-wizard-mode .product__submit__buttons,
body.milano-wizard-mode .product__submit__holder { margin-top: 10px !important; }

body.milano-wizard-mode .milano-panel { margin-bottom: 6px; }

body.milano-wizard-mode .product__block--quantity { flex: 0 0 auto; width: auto; margin: 0 !important; padding: 0; }

body.milano-wizard-mode .product__block--buy_buttons .product__submit__buttons,
body.milano-wizard-mode .product__block--buy_buttons .product__submit__holder,
body.milano-wizard-mode .product__block--buy_buttons .product__submit { flex: 1; margin: 0; }

body.milano-wizard-mode .selector-wrapper--qty {
  display: inline-flex; width: auto; vertical-align: middle; margin-right: 8px;
  margin-top: 0 !important; margin-bottom: 0 !important;
}

body.milano-wizard-mode .product__submit__holder { display: flex; align-items: stretch; gap: 8px; }

body.milano-wizard-mode .product__submit__buttons { flex: 1; margin-top: 0; }

/* =============================================================================
   DESKTOP REFINEMENTS
   ============================================================================= */

@media screen and (min-width: 769px) {
  .mw-trust { max-width: 480px; gap: 16px; justify-content: flex-start; }
  .mw-trust__item { font-size: 12px; }
  body.milano-wizard-mode .radio__buttons { max-width: none; }
  .mw-consult { max-width: 520px; }
  body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_element { max-width: none; width: 100%; }
  .mw-review-card { max-width: 520px; }
  .mw-opt-desc { font-size: 13px; }
  body.milano-wizard-mode .product__block--title { padding-bottom: 10px !important; }
}

/* =============================================================================
   MOBILE
   ============================================================================= */

@media screen and (max-width: 768px) {
  .mw-indicator-row { padding: 10px 0 10px; margin-bottom: 6px; }
  .mw-indicator { gap: 2px; }
  .mw-wiz-total { font-size: 13px; }
  .mw-pill { padding: 6px 6px; font-size: 10px; min-height: 32px; }
  .mw-nav__next, .mw-nav__back { padding: 14px 14px; font-size: 14px; min-height: 50px; }
  .mw-trust { padding: 8px 0; margin: 8px 0; }
  .mw-consult__btns { flex-direction: column; }
  .mw-opt-desc { font-size: 12px; padding-left: 0; }
  .mw-badge { font-size: 9px; padding: 2px 6px; }
  .mw-lace-sub { font-size: 10px; }
  body.milano-wizard-mode .milano-panel__content { padding: 0 12px 10px; }
  .mw-spec-tags { gap: 5px; }
  .mw-spec-tag { font-size: 10px; padding: 5px 11px 5px 8px; }
  .mw-quote { font-size: 12px; }
  .mw-hint { font-size: 14px; }
  .mw-subhint { font-size: 12px; }
  .mw-step-help { font-size: 11px; padding: 7px 15px 7px 11px; margin-top: 8px; }
  .mw-lace-help { font-size: 11px; padding: 4px 11px 4px 8px; }
  .mw-inline-help { font-size: 10px; padding: 2px 8px 2px 6px; }
  .mw-review-card { padding: 14px 16px; }
  .mw-review-card__edit { font-size: 12px; padding: 7px 14px; }
  .mw-review-card__total-line { font-size: 14px; }
  .mw-toggle-total { font-size: 0.8rem; }
  body.milano-wizard-mode .mw-subgate { margin-left: 10px; padding-left: 10px; }
  .mw-section-title { margin: 12px 0 8px; padding-top: 12px; font-size: 13px; }
  .mw-color-sep { margin: 10px 0 6px; padding-top: 10px; }
  .mw-cut-sep { margin: 10px 0 6px; padding-top: 10px; }
  .mw-style-sep { font-size: 10px; margin: 6px 0 4px; }
  body.milano-wizard-mode .mw-no-style { padding: 8px 12px; }
  body.milano-wizard-mode .mw-no-ear { padding: 8px 12px; }
  .mw-followup { font-size: 11px; padding: 8px 10px; gap: 6px; }
  .mw-step-notice { font-size: 12px; padding: 10px 12px; margin-top: 12px; gap: 8px; }
  /* v3.8.1: Step group separator mobile */
  body.milano-wizard-mode .mw-step-group-sep { margin-top: 10px; padding-top: 10px; }
  /* v3.8.2: Addon header mobile */
  .mw-addon-title { font-size: 13px; }
  .mw-addon-desc { font-size: 12px; }
  .mw-addon-header--warm { padding: 10px 12px; margin-bottom: 10px; }
  /* v3.10: Skip-to-summary mobile */
  .mw-nav__skip { font-size: 12px; padding-top: 6px; }
  .mw-hint-row { gap: 6px; }
  /* v1.6.34: removed conflicting `.mw-step-help { font-size: 10px; padding: 3px 10px... }`
     override that was sized below the live theme. With the larger live-aligned
     padding (7/15) + margin-top:8px from line 2138, the help button reliably
     wraps under the question title on iPhone 13 / sub-430px when the title
     is long, instead of squeezing inline. Live-theme behavior restored. */
  /* v1.6.29: Mobile keeps 2-col 100% — Kevin wants 2-per-row on every
     device. Image shrinks to 80×100 (still 4:5), padding/font tuned for
     430px viewport.
     v1.6.30: padding-block 10 → 8 (-4px total). Inch font 17 → 16. */
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid {
    gap: 8px;
  }
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
    padding: 8px 10px;
    font-size: 12px;
    min-height: 104px;
    gap: 10px;
    border-radius: 10px;
  }
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label img,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label .swatch__button__image {
    width: 80px !important;
    height: 100px !important;
    min-width: 80px;
  }
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .option-title { font-size: 12px; }
  .mw-len-num { font-size: 16px; }
  .mw-len-name { font-size: 11px; letter-spacing: 0.07em; }
  body.milano-wizard-mode .bold_option.milano-always-visible { padding-top: 6px; margin-bottom: 0 !important; padding-bottom: 0 !important; }
  body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_element { gap: 4px; }
  body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value label { padding: 8px 2px; font-size: 11px !important; min-height: 48px; }
  /* v1.6.13: .mw-cap-helper mobile rule removed with the element. */
  body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .mw-size-guide-native,
  body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .product__popup__link,
  body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title .product__popup-toggle { font-size: 11px; padding: 3px 8px; }
  body.milano-wizard-mode .selector-wrapper:not(.selector-wrapper--qty) { padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 4px; }
  /* v3.8.1: Toggle spacing — scalable gap from cap size on no-lace products */
  body.milano-wizard-mode .personalize-toggle { margin-top: 8px; margin-bottom: 2px; }
  body.milano-wizard-mode .radio__buttons { gap: 6px; }
  body.milano-wizard-mode .radio__buttons .radio__button label { min-height: 50px; padding: 8px 6px; white-space: normal; }
  .mw-lace-sub { font-size: 9px; }
  body.milano-wizard-mode .bold_option_value { padding: 8px 12px 8px 16px; }
  body.milano-wizard-mode .bold_option_value label { font-size: 13px !important; }
  /* v1.6.13: Mobile subgate dropdown was 16px (legacy iOS-zoom guard,
     but <select> doesn't trigger iOS zoom — only text inputs do). 16px
     made "Below the Nose" etc. look visually larger than the surrounding
     radio options. Dropping to 13.5px matches radio labels for clean
     vertical rhythm in the Style step. */
  body.milano-wizard-mode .milano-option-row__body .bold_option_element select,
  body.milano-wizard-mode .mw-subgate .bold_option_element select { font-size: 13.5px; min-height: 44px; padding: 10px 36px 10px 14px; }

  /* v1.6.13 → v1.6.15: Recommended badge wrap.
     The bold_option_value label is display:inline (not flex), so prior
     flex-wrap/flex-basis rules were inert. Force the badge to display:block
     so it ALWAYS goes to its own line on mobile, aligned with where the
     option title starts (radio width + gap = 28px). */
  body.milano-wizard-mode .milano-option-row__body .bold_option_value .mw-badge {
    display: block;
    width: max-content;
    margin: 5px 0 2px 28px;
    /* override the original margin-left: 8px from base .mw-badge */
    margin-left: 28px !important;
  }
  .mw-quote-rotator { min-height: 18px; }
  .mw-quote { font-size: 12px; }
  body.milano-wizard-mode .pop-up-container .popup-image,
  body.milano-wizard-mode .pop-up-container .popup-image-without-content { width: 100% !important; margin-right: 0 !important; margin-bottom: 12px; }
  body.milano-wizard-mode .pop-up-container .inline-popup { flex-direction: column; }
  /* Splitit + shopify-payment forced full-width on all viewports by base
     rules — mobile-only duplicates removed in v3.13. shopify-payment is
     kept mobile-only because desktop only forces it 100%-wide when
     services are present (above on this file). */
  body.milano-wizard-mode .shop-pay-terms,
  body.milano-wizard-mode [class*="shopify-payment"],
  body.milano-wizard-mode .product__price-and-badge shopify-payment-terms { flex-basis: 100%; }
  body.milano-wizard-mode .product__submit,
  body.milano-wizard-mode .product__submit__buttons,
  body.milano-wizard-mode .product__submit__holder { margin-top: 6px !important; }
  body.milano-wizard-mode .milano-panel { margin-bottom: 4px; }
  body.milano-wizard-mode .product__block--title { padding-bottom: 8px !important; }
  body.milano-wizard-mode .product__block--price,
  body.milano-wizard-mode .product__block.product__price-and-badge { padding-bottom: 0 !important; margin-bottom: 0 !important; }

  /* v1.6.0: Segmented entry control mobile
     v1.6.12: + subtitle sizing for two-line content */
  .mw-segmented { gap: 10px; }
  .mw-segmented__cell { font-size: 13px; min-height: 58px; padding: 9px 12px; }
  .mw-segmented__label { font-size: 13px; }
  .mw-segmented__sub { font-size: 10.5px; }
  .mw-segmented__check { height: 18px; }
  .mw-segmented__cell--active .mw-segmented__check { width: 18px; margin-right: 6px; }
  .mw-segmented__check svg { width: 10px; height: 10px; }
  /* v1.6.0 / v1.6.3: Virtual cut + color skip cards — mobile */
  body.milano-wizard-mode .mw-no-cut-virtual,
  body.milano-wizard-mode .mw-no-color-virtual { padding: 10px 12px; gap: 8px; }
  .mw-no-cut-virtual__label, .mw-no-color-virtual__label { font-size: 13px; }
  .mw-no-cut-virtual__sub, .mw-no-color-virtual__sub { font-size: 11px; padding-left: 28px; }
  .mw-no-cut-virtual__check, .mw-no-color-virtual__check { width: 20px; height: 20px; }
}

@media screen and (max-width: 380px) {
  .mw-pill { padding: 5px 4px; font-size: 9px; }
  /* v1.6.0: Segmented entry — tighter on 320–380px so labels stay on one line.
     v1.6.12: subtitle drops to 10px so two-line cell still fits comfortably. */
  .mw-segmented__cell { font-size: 11.5px; padding: 8px 6px; gap: 4px; min-height: 54px; }
  .mw-segmented__label { letter-spacing: -0.01em; font-size: 11.5px; }
  .mw-segmented__sub { font-size: 10px; letter-spacing: 0; }

  /* v1.6.29: Grace 2-col grid stays at 100% but image/padding tighten
     so a 22"/REESE label still fits next to its image at 360–380px.
     v1.6.30: padding-block 8 → 7 (-2 total). Inch font 15 → 14. */
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid {
    gap: 6px;
  }
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
    padding: 7px 8px;
    min-height: 98px;
    gap: 8px;
  }
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label img,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label .swatch__button__image {
    width: 70px !important;
    height: 88px !important;
    min-width: 70px;
  }
  .mw-len-num { font-size: 14px; }
  .mw-len-name { font-size: 10px; }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .mw-pill, .mw-nav__next, .mw-nav__back, .mw-nav__skip,
  .mw-segmented__cell, .mw-segmented__check, .mw-segmented__check svg,
  .mw-no-cut-virtual, .mw-no-cut-virtual__check, .mw-no-cut-virtual__check svg,
  .mw-no-color-virtual, .mw-no-color-virtual__check, .mw-no-color-virtual__check svg,
  .mw-personalize-desc,
  body.milano-wizard-mode .bold_option_value,
  body.milano-wizard-mode .radio__buttons .radio__button label,
  body.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value label,
  .mw-step-help, .mw-lace-help, .mw-inline-help, .mw-consult__btn { transition: none; }

  /* Animations off — instant state change */
  .mw-review-card, .mw-followup, .mw-sale-banner, .mw-step-notice,
  .mw-anim-enter, .mw-pill--done svg,
  .mw-no-cut-virtual__check svg,
  .mw-no-color-virtual__check svg { animation: none; }
  .mw-quote { transition: none; }
  .mw-nav__next.mw-pulse { animation: none; }

  /* All transform-based motion neutralized */
  .mw-step-help:active, .mw-lace-help:active, .mw-inline-help:active,
  .mw-nav__next:active, .mw-nav__back:active,
  .mw-nav__skip:hover,
  .mw-nav__next--continue:hover,
  .mw-segmented__cell:hover, .mw-segmented__cell:active,
  .mw-no-cut-virtual:hover, .mw-no-cut-virtual:active,
  .mw-no-color-virtual:hover, .mw-no-color-virtual:active,
  .mw-consult__btn:active { transform: none; box-shadow: none; }
  .mw-nav__next--review:hover { transform: none; }

  /* Check icons appear instantly in their final state */
  .mw-segmented__cell--active .mw-segmented__check,
  .mw-no-cut-virtual--selected .mw-no-cut-virtual__check svg,
  .mw-no-color-virtual--selected .mw-no-color-virtual__check svg {
    transform: none;
    opacity: 1;
  }
}

/* =============================================================================
   PRINT
   ============================================================================= */

@media print {
  .mw-indicator, .mw-hint-wrap, .mw-nav, .mw-trust,
  .mw-consult, .mw-quote-rotator, .mw-spec-tags,
  .mw-step-help, .mw-lace-help, .mw-followup, .mw-addon-header,
  .mw-segmented, .mw-personalize-desc { display: none; }
}
/* =============================================================================
   MILANO SALE PRICE BRIDGE + SHOP THIS LOOK CLEANUP (May 2026)
   ============================================================================= */

.product__price .mw-pdp-compare-price {
  display: inline-flex;
  align-items: baseline;
  margin-right: 8px;
  color: var(--mw-brown-light, #9A8E84);
  font-size: 0.78em;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.product__price .mw-pdp-sale-price {
  color: var(--text, #1a1a1a);
}

.mw-sale-context {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  color: var(--mw-sage, #5A8A6E);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.mw-price-context + .mw-sale-context {
  margin-left: 8px;
}

body.milano-shop-this-look .personalize-toggle {
  display: none !important;
}

body.milano-shop-this-look .milano-stl-options {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  /* v2026-06-17: lowered top padding (was 14px) — the size guide now lives on
     the Adjust Cap Size line instead of a standalone row above the cards, so
     the price -> options gap can close up. */
  margin: 6px 0 18px;
  padding: 0;
  box-sizing: border-box;
}

body.milano-shop-this-look .milano-stl-options .bold_option.milano-always-visible {
  display: block !important;
  /* Anchor for the relocated size guide pinned to the card's top-right. */
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid var(--mw-card-border, #E8DDD6);
  border-radius: 12px;
  box-sizing: border-box;
  overflow: visible;
}

body.milano-shop-this-look .milano-stl-options .bold_option_title {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-family: var(--font-body, inherit);
  color: var(--text, #1a1a1a);
  letter-spacing: normal;
  line-height: 1.25;
}

body.milano-shop-this-look .milano-stl-options .mw-stl-title-text,
body.milano-shop-this-look .milano-stl-options .mw-stl-title-desc {
  display: block !important;
  width: 100%;
  max-width: 100%;
}

body.milano-shop-this-look .milano-stl-options .mw-stl-title-text {
  font-size: 0.92rem;
  font-weight: 650;
}

body.milano-shop-this-look .milano-stl-options .mw-stl-title-desc {
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--mw-brown-light, #9A8E84);
  line-height: 1.35;
}

/* v2026-06-17: Size guide on the "Adjust Cap Size" line for Shop This Look (and
   other non-wizard cap-size layouts). relocateCapSizeGuide() moves the native
   trigger into the cap card's title; pin it to the card's top-right so it shares
   the line with the title, matching the wizard PDP treatment. */
body.milano-shop-this-look .milano-stl-options .bold_option.milano-always-visible .bold_option_title .mw-size-guide-native {
  position: absolute !important;
  top: 12px;
  right: 16px;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 5px 10px !important;
  border: 1px solid var(--mw-border, #E3DCD4) !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--mw-brown-med, #6B5E55) !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

body.milano-shop-this-look .milano-stl-options .bold_option.milano-always-visible .bold_option_title .mw-size-guide-native:hover {
  border-color: var(--mw-accent, #8b7355) !important;
  color: var(--mw-accent, #8b7355) !important;
  background: rgba(139, 115, 85, 0.04) !important;
}

/* Reserve room on the title's first line (only on the card that carries the
   pill) so a long cap-size label can never run under the absolutely-positioned
   size guide, on any viewport width. */
body.milano-shop-this-look .milano-stl-options .bold_option.milano-always-visible:has(.mw-size-guide-native) .mw-stl-title-text {
  padding-right: 86px;
}

body.milano-shop-this-look .milano-stl-options .bold_option.milano-always-visible .bold_option_title .mw-size-guide-native svg {
  width: 14px !important;
  height: 14px !important;
}

/* The native source block is now empty — collapse it so the price -> options
   gap closes (mirrors the milano-wizard-mode rule). */
body.milano-shop-this-look .product__form__size-chart.mw-popup-relocated {
  display: none !important;
}

body.milano-shop-this-look .milano-stl-options .bold_option_element {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

body.milano-shop-this-look .milano-stl-options .bold_option_value {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

body.milano-shop-this-look .milano-stl-options .bold_option_value label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--mw-border, #E3DCD4);
  border-radius: 10px;
  background: #fff;
  color: var(--text, #1a1a1a);
  font-size: 0.88rem;
  font-weight: 520;
  line-height: 1.25;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

body.milano-shop-this-look .milano-stl-options .bold_option_value label:hover {
  border-color: var(--mw-accent, #8b7355);
}

body.milano-shop-this-look .milano-stl-options .bold_option_value input[type="radio"],
body.milano-shop-this-look .milano-stl-options .bold_option_value input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--mw-accent, #8b7355);
}

body.milano-shop-this-look .milano-stl-options .bold_option_value.mw-selected label,
body.milano-shop-this-look .milano-stl-options .bold_option_value input:checked + label,
body.milano-shop-this-look .milano-stl-options .bold_option_value input:checked ~ label {
  border-color: var(--mw-accent, #8b7355);
  background: var(--mw-accent-faint, #faf9f7);
}

body.milano-shop-this-look .milano-stl-options .bold_option_value_price {
  margin-left: auto;
  color: var(--mw-brown-light, #9A8E84);
  font-size: 0.78rem;
  font-weight: 400;
  white-space: nowrap;
}


/* Bulletproof PDP price context: keep add-on context and Splitit visible after
   native variant renders without creating layout shift on small screens. */
.product__price-wrapper > .mw-price-context,
.product__price-wrapper > .mw-sale-context {
  flex: 0 0 auto;
}

@media screen and (max-width: 749px) {
  .product__price-wrapper > .milano-splitit-fallback {
    font-size: 12.5px;
    line-height: 1.35;
    gap: 3px 4px;
  }
}

@media screen and (max-width: 749px) {
  .mw-sale-context,
  .mw-price-context + .mw-sale-context {
    display: flex;
    margin-left: 0;
    margin-top: 3px;
    width: 100%;
  }

  body.milano-shop-this-look .milano-stl-options {
    gap: 10px;
    margin-top: 12px;
  }

  body.milano-shop-this-look .milano-stl-options .bold_option.milano-always-visible {
    padding: 12px;
  }
}

/* =============================================================================
   RESPONSIVE CAP SIZE / SIZE GUIDE CONTAINMENT — v2026-05-29

   Prevents the Cap Size title row, native Size guide pill, and three cap buttons
   from clipping at tablet / narrow desktop widths after Cap Size is moved between
   Length and Lace Front on Grace-style PDPs. This is intentionally scoped to
   .milano-grace + .milano-always-visible so it does not affect native Shopify
   variant fieldsets or non-wizard product pages.
   ============================================================================= */
body.milano-grace .bold_option.milano-always-visible {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.milano-grace .bold_option.milano-always-visible .bold_option_title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.milano-grace .bold_option.milano-always-visible .bold_option_title .mw-cap-label {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.milano-grace .bold_option.milano-always-visible .bold_option_title .mw-size-guide-native,
body.milano-grace .bold_option.milano-always-visible .bold_option_title .product__popup-toggle,
body.milano-grace .bold_option.milano-always-visible .bold_option_title .product__popup__link {
  flex: 0 0 auto !important;
  max-width: 46vw !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

body.milano-grace .bold_option.milano-always-visible .bold_option_element {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body.milano-grace .bold_option.milano-always-visible .bold_option_value label {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* Tablet / narrow desktop: force the cap buttons into a stable 3-column grid.
   This avoids flex rounding that can push the last button 1-4px past the form
   column at awkward widths around 540-820px. */
@media screen and (min-width: 481px) and (max-width: 900px) {
  body.milano-grace .bold_option.milano-always-visible .bold_option_element {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body.milano-grace .bold_option.milano-always-visible .bold_option_value {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.milano-grace .bold_option.milano-always-visible .bold_option_value label {
    width: 100% !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 12px !important;
  }
}

/* Very narrow phones: if the title row has no room, keep Size guide visible by
   allowing the row to wrap instead of letting the pill clip off-canvas. */
@media screen and (max-width: 480px) {
  body.milano-grace .bold_option.milano-always-visible .bold_option_title {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  body.milano-grace .bold_option.milano-always-visible .bold_option_title .mw-size-guide-native,
  body.milano-grace .bold_option.milano-always-visible .bold_option_title .product__popup-toggle,
  body.milano-grace .bold_option.milano-always-visible .bold_option_title .product__popup__link {
    max-width: 100% !important;
  }

  body.milano-grace .bold_option.milano-always-visible .bold_option_element {
    gap: 4px !important;
  }
}

/* =============================================================================
   TABLET / NARROW DESKTOP PDP BRIDGE — v2026-05-29b

   Palo Alto keeps the desktop two-column PDP layout at some tablet/narrow
   desktop widths. On Grace-style wizard PDPs this can squeeze the form column
   so Length thumbnails, Cap Size, Lace Front, and segmented controls become
   cramped or visually clipped. At these widths, a single-column PDP is more
   readable, more tappable, and closer to the true mobile experience.

   Scope: product pages only. The rule is intentionally layout-level rather
   than control-specific so every PDP block inherits a stable content width.
   ============================================================================= */
@media screen and (min-width: 750px) and (max-width: 1023px) {
  body.template-product product-info.product-single__wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.template-product product-info.product-single__wrapper > .product-gallery,
  body.template-product product-info.product-single__wrapper > .product-single__details {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep the visual media area premium without letting it dominate the whole
     tablet viewport. The form stays centered and easy to scan underneath. */
  body.template-product product-info.product-single__wrapper > .product-gallery {
    max-width: 760px !important;
    margin-inline: auto !important;
  }

  body.template-product product-info.product-single__wrapper > .product-single__details {
    max-width: 640px !important;
    margin-inline: auto !important;
    padding-inline: 20px !important;
  }

  body.template-product product-info.product-single__wrapper .form__wrapper,
  body.template-product product-info.product-single__wrapper product-sticky {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Sticky form behavior is useful on true desktop, but after the tablet
     layout stacks it can create awkward scroll/height behavior. */
  body.template-product product-info.product-single__wrapper product-sticky {
    position: static !important;
    top: auto !important;
  }

  /* Variant controls: keep the two-column Length treatment, but scale the
     image and spacing to the now-centered tablet form width. */
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
    min-height: 110px !important;
    padding: 10px 12px !important;
    gap: 12px !important;
  }

  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label img,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label .swatch__button__image {
    width: clamp(72px, 18vw, 96px) !important;
    height: clamp(88px, 22vw, 112px) !important;
    min-width: clamp(72px, 18vw, 96px) !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Cap/Lace/segmented controls stay button-like and tappable, but cannot
     overflow the centered form. */
  body.milano-grace .bold_option.milano-always-visible .bold_option_element,
  body.milano-grace .radio__buttons:not(.mw-length-grid),
  body.milano-grace .mw-segmented {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Narrow-tablet/large-phone bridge: still keep premium option cards, but switch
   lower-priority segmented controls to a clean one-column stack when two columns
   would cause label clipping. */
@media screen and (min-width: 481px) and (max-width: 640px) {
  body.milano-grace .mw-segmented {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label img,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label .swatch__button__image {
    width: 72px !important;
    height: 88px !important;
    min-width: 72px !important;
  }
}

/* =============================================================================
   PDP CONTROL WIDTH SYSTEM + LENGTH STABILITY — v2026-05-29c

   Final polish for rapid variant swaps and resized/narrow layouts:
   - The Length fieldset keeps the same polished card styling even before JS
     re-adds .mw-length-grid after Palo Alto swaps option markup.
   - Non-Length option groups share one consistent container/button rhythm so
     Lace Front visually matches the Ships as pictured / Personalize toggle.
   - Length tile images keep fixed intrinsic boxes to avoid the temporary blank
     or cropped state while images decode after native variant re-renders.
   ============================================================================= */

body.milano-grace.milano-wizard-mode {
  --mw-control-gap: 10px;
  --mw-control-radius: 10px;
  --mw-control-min-height: 58px;
  --mw-control-padding-y: 9px;
  --mw-control-padding-x: 12px;
  --mw-length-img-w: 96px;
  --mw-length-img-h: 120px;
}

/* Stable Length styling even during the short window before JS re-adds
   .mw-length-grid to freshly-rendered variant markup. */
body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__buttons,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--mw-control-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: unset !important;
}

body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
  display: grid !important;
  grid-template-columns: var(--mw-length-img-w) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
  min-height: 108px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow: hidden !important;
}

body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label .option-image,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label .option-image,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label .option-image {
  display: block !important;
  width: var(--mw-length-img-w) !important;
  height: var(--mw-length-img-h) !important;
  min-width: var(--mw-length-img-w) !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  background: #fff !important;
}

body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label img,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label img,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label img,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label .swatch__button__image {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
}

/* Unified non-Length control widths. This makes Lace Front match the visual
   rhythm of Ships as pictured / Personalize it and keeps all PDP controls
   aligned to the same content width. */
body.milano-grace.milano-wizard-mode fieldset:not(.radio__fieldset--variant-option-image):not(.mw-length-fieldset) > .radio__buttons,
body.milano-grace.milano-wizard-mode .mw-segmented {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--mw-control-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.milano-grace.milano-wizard-mode .bold_option.milano-always-visible .bold_option_element {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--mw-control-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.milano-grace.milano-wizard-mode fieldset:not(.radio__fieldset--variant-option-image):not(.mw-length-fieldset) > .radio__buttons .radio__button,
body.milano-grace.milano-wizard-mode .mw-segmented__cell,
body.milano-grace.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: unset !important;
}

body.milano-grace.milano-wizard-mode fieldset:not(.radio__fieldset--variant-option-image):not(.mw-length-fieldset) > .radio__buttons .radio__button label,
body.milano-grace.milano-wizard-mode .mw-segmented__cell,
body.milano-grace.milano-wizard-mode .bold_option.milano-always-visible .bold_option_value label {
  min-height: var(--mw-control-min-height) !important;
  padding: var(--mw-control-padding-y) var(--mw-control-padding-x) !important;
  border-radius: var(--mw-control-radius) !important;
  box-sizing: border-box !important;
}

body.milano-grace.milano-wizard-mode .mw-segmented__cell {
  justify-content: center !important;
}

@media screen and (max-width: 749px) {
  body.milano-grace.milano-wizard-mode {
    --mw-control-gap: 8px;
    --mw-control-min-height: 56px;
    --mw-control-padding-y: 8px;
    --mw-control-padding-x: 10px;
    --mw-length-img-w: 80px;
    --mw-length-img-h: 100px;
  }
}

@media screen and (max-width: 380px) {
  body.milano-grace.milano-wizard-mode {
    --mw-control-gap: 6px;
    --mw-length-img-w: 70px;
    --mw-length-img-h: 88px;
  }

  body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label,
  body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
    grid-template-columns: var(--mw-length-img-w) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 7px 8px !important;
  }
}

/* =============================================================================
   ENTRY CHOICE UPDATE — v2026-05-29d
   Higher-up PDP request:
   - No default entry selection.
   - Personalize action sits left, Ship As Pictured sits right.
   - Clear "or" between the two actions.
   - Add-to-cart requires choosing one of these paths first.
   ============================================================================= */
body.milano-wizard-mode .mw-segmented {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 8px !important;
}

body.milano-wizard-mode .mw-segmented__or {
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--mw-accent-faint, #faf9f7);
  border: 1px solid var(--mw-card-border, #E8DDD6);
  /* v2026-06-05: darker + bolder "or" for legibility against the cream pill */
  color: var(--mw-brown-med, #6B5E55);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

body.milano-wizard-mode .mw-segmented__cell {
  min-width: 0 !important;
  width: 100% !important;
}

body.milano-wizard-mode .mw-segmented__cell--personalize .mw-segmented__label,
body.milano-wizard-mode .mw-segmented__cell--asis .mw-segmented__label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100%;
}

body.milano-wizard-mode .mw-segmented__cell--personalize .mw-segmented__label {
  line-height: 1.25;
}

body.milano-wizard-mode .mw-segmented:not([data-mw-entry-choice="personalize"]):not([data-mw-entry-choice="asis"]) .mw-segmented__cell {
  box-shadow: 0 2px 8px rgba(45, 41, 38, 0.06);
}

body.milano-wizard-mode .mw-segmented--required .mw-segmented__cell {
  border-color: #C7927C !important;
  box-shadow: 0 0 0 2px rgba(199, 146, 124, 0.14), 0 2px 8px rgba(45, 41, 38, 0.08) !important;
}

body.milano-wizard-mode .mw-entry-required {
  margin: -2px 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7f4;
  border: 1px solid #f0d3c8;
  color: #8B4A3A;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

@media screen and (max-width: 749px) {
  body.milano-wizard-mode .mw-segmented {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.milano-wizard-mode .mw-segmented__or {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

  body.milano-wizard-mode .mw-segmented__cell {
    min-height: 62px !important;
    padding: 9px 8px !important;
  }

  body.milano-wizard-mode .mw-segmented__cell--personalize .mw-segmented__label {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 360px) {
  body.milano-wizard-mode .mw-segmented {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.milano-wizard-mode .mw-segmented__or {
    width: auto;
    height: auto;
    padding: 3px 8px;
    margin: -1px auto;
  }
}


/* =============================================================================
   ENTRY CHOICE SAME-LINE FIX — v2026-05-29e
   Keeps the two entry choices in one intuitive row across mobile/tablet/desktop,
   adds a matching section label, and prevents earlier Grace control-width rules
   from converting the row into a two-column/stacked layout.
   ============================================================================= */
body.milano-wizard-mode .mw-entry-choice-title {
  display: block;
  margin: 0 0 8px;
  font-family: var(--milano-font-heading, inherit);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mw-brown, #2D2926);
  letter-spacing: 0.01em;
}

/* =============================================================================
   PROACTIVE "REQUIRED" SIGNAL — v2026-06-04
   A calm, accent-tinted "Required" pill on the "Personalize Your Wig" title and
   a static accent ring on the two options, shown only until the shopper picks
   one (body.mw-entry-choice-made retires both). Deliberately DISTINCT from the
   red post-ATC error (.mw-entry-required / .mw-segmented--required): this says
   "you'll need to choose," not "you did something wrong." The soft pulse rides
   on the small pill (transform/box-shadow on a tiny element = cheap) rather than
   animating the large control, to keep it perf-friendly.
   ============================================================================= */
body.milano-wizard-mode .mw-required-pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--mw-accent-faint, #faf9f7);
  border: 1px solid #E3D9CF;
  color: var(--mw-accent, #8b7355);
  font-family: var(--milano-font-body, inherit);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  transform-origin: center;
  animation: mwRequiredPillPulse 2.2s ease-in-out infinite;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes mwRequiredPillPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 115, 85, 0); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(139, 115, 85, 0.12); }
}

/* Static calm ring on the options while no choice is made. Suppressed once the
   red error ring is active so the two never stack. */
body.milano-wizard-mode:not(.mw-entry-choice-made) .mw-segmented:not(.mw-segmented--required) {
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.10);
}

/* Once a choice is made, retire pill + ring. */
body.milano-wizard-mode.mw-entry-choice-made .mw-required-pill {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body.milano-wizard-mode .mw-required-pill { animation: none; transition: none; }
}

body.milano-grace.milano-wizard-mode .mw-segmented,
body.milano-wizard-mode .mw-segmented {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 8px !important;
}

body.milano-grace.milano-wizard-mode .mw-segmented__or,
body.milano-wizard-mode .mw-segmented__or {
  align-self: center !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 999px !important;
  background: var(--mw-accent-faint, #faf9f7) !important;
  border: 1px solid var(--mw-card-border, #E8DDD6) !important;
  /* v2026-06-05: darker + bolder "or" for legibility against the cream pill */
  color: var(--mw-brown-med, #6B5E55) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

body.milano-grace.milano-wizard-mode .mw-segmented__cell,
body.milano-wizard-mode .mw-segmented__cell {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 62px !important;
  padding: 9px 8px !important;
  box-sizing: border-box !important;
}

body.milano-grace.milano-wizard-mode .mw-segmented__label,
body.milano-wizard-mode .mw-segmented__label {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
  line-height: 1.18 !important;
}

body.milano-grace.milano-wizard-mode .mw-segmented__cell--personalize .mw-segmented__label,
body.milano-wizard-mode .mw-segmented__cell--personalize .mw-segmented__label {
  font-size: clamp(11px, 2.75vw, 13px) !important;
}

body.milano-grace.milano-wizard-mode .mw-segmented__cell--asis .mw-segmented__label,
body.milano-wizard-mode .mw-segmented__cell--asis .mw-segmented__label {
  font-size: clamp(12px, 2.9vw, 13.5px) !important;
}

body.milano-grace.milano-wizard-mode .mw-segmented__sub,
body.milano-wizard-mode .mw-segmented__sub {
  white-space: normal !important;
  line-height: 1.2 !important;
}

@media screen and (max-width: 380px) {
  body.milano-grace.milano-wizard-mode .mw-segmented,
  body.milano-wizard-mode .mw-segmented {
    grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body.milano-grace.milano-wizard-mode .mw-segmented__or,
  body.milano-wizard-mode .mw-segmented__or {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 8.5px !important;
  }

  body.milano-grace.milano-wizard-mode .mw-segmented__cell,
  body.milano-wizard-mode .mw-segmented__cell {
    min-height: 60px !important;
    padding: 8px 5px !important;
  }
}

/* =============================================================================
   DESKTOP VARIANT TRANSITION GUARD + MICRO-DENSITY POLISH — v2026-05-29f
   - Prevents Palo Alto's double-buffered native variant selector from flashing
     a duplicate Length grid under Lace Front during desktop variant changes.
   - Uses CSS order as a visual safety net so temporary DOM order changes still
     read Length → Cap Size → Lace Front.
   - Slightly tightens card spacing/heights for a more compact, premium PDP.
   ============================================================================= */
body.milano-grace.milano-wizard-mode .product__form variant-selects.product__selectors,
body.milano-grace.milano-wizard-mode .product__form variant-selects {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.milano-grace.milano-wizard-mode .product__form variant-selects .selector-wrapper[data-option-position="1"],
body.milano-grace.milano-wizard-mode .product__form variant-selects fieldset.radio__fieldset--variant-option-image,
body.milano-grace.milano-wizard-mode .product__form variant-selects fieldset.mw-length-fieldset {
  order: 10 !important;
}

body.milano-grace.milano-wizard-mode .product__form variant-selects .bold_option.milano-always-visible {
  order: 20 !important;
}

body.milano-grace.milano-wizard-mode .product__form variant-selects .selector-wrapper[data-option-position="2"],
body.milano-grace.milano-wizard-mode .product__form variant-selects fieldset:not(.radio__fieldset--variant-option-image):not(.mw-length-fieldset) {
  order: 30 !important;
}

body.milano-grace.mw-native-variant-settling .mw-transient-variant-duplicate {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Smaller desktop/tablet density pass: reduces visual height without changing
   copy, hierarchy, or touch-target safety. */
@media screen and (min-width: 750px) {
  body.milano-grace.milano-wizard-mode {
    --mw-control-gap: 8px;
    --mw-control-min-height: 54px;
    --mw-control-padding-y: 7px;
    --mw-control-padding-x: 11px;
    --mw-length-img-w: 92px;
    --mw-length-img-h: 114px;
  }

  body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label,
  body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
    min-height: 104px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    gap: 10px !important;
  }

  body.milano-grace.milano-wizard-mode .radio__legend,
  body.milano-grace.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title,
  body.milano-grace.milano-wizard-mode .mw-entry-choice-title {
    margin-bottom: 6px !important;
  }

  body.milano-grace.milano-wizard-mode .bold_option.milano-always-visible,
  body.milano-grace.milano-wizard-mode .selector-wrapper,
  body.milano-grace.milano-wizard-mode .personalize-toggle {
    margin-bottom: 10px !important;
  }

  body.milano-grace.milano-wizard-mode .mw-segmented__cell {
    min-height: 58px !important;
  }
}

/* Mobile: keep the touch targets generous but make the stack feel tighter. */
@media screen and (max-width: 749px) {
  body.milano-grace.milano-wizard-mode .selector-wrapper,
  body.milano-grace.milano-wizard-mode .bold_option.milano-always-visible,
  body.milano-grace.milano-wizard-mode .personalize-toggle {
    margin-bottom: 10px !important;
  }

  body.milano-grace.milano-wizard-mode .radio__legend,
  body.milano-grace.milano-wizard-mode .bold_option.milano-always-visible .bold_option_title,
  body.milano-grace.milano-wizard-mode .mw-entry-choice-title {
    margin-bottom: 6px !important;
  }
}


/* =============================================================================
   FINAL DESKTOP VARIANT FLICKER + DENSITY TUNING — v2026-05-29g
   ============================================================================= */

/* Divider between pricing/Splitit and the Length selector. Scoped to Grace only. */
body.milano-grace.milano-wizard-mode .product__form variant-selects.product__selectors,
body.milano-grace.milano-wizard-mode .product__form variant-selects {
  border-top: 1px solid rgba(45, 41, 38, 0.12) !important;
  padding-top: 12px !important;
  margin-top: 10px !important;
}

/* Stronger guard for Palo Alto double-buffering: while the native variant DOM is
   settling, hide any Length block that temporarily appears after Cap/Lace. */
body.milano-grace.mw-native-variant-settling .product__form variant-selects .selector-wrapper[data-option-position="2"] ~ fieldset.radio__fieldset--variant-option-image,
body.milano-grace.mw-native-variant-settling .product__form variant-selects .selector-wrapper[data-option-position="2"] ~ fieldset.mw-length-fieldset,
body.milano-grace.mw-native-variant-settling .product__form variant-selects .bold_option.milano-always-visible ~ fieldset.radio__fieldset--variant-option-image,
body.milano-grace.mw-native-variant-settling .product__form variant-selects .bold_option.milano-always-visible ~ fieldset.mw-length-fieldset,
body.milano-grace.mw-native-variant-settling .product__form variant-selects fieldset.radio__fieldset--variant-option-image ~ fieldset.radio__fieldset--variant-option-image,
body.milano-grace.mw-native-variant-settling .product__form variant-selects fieldset.mw-length-fieldset ~ fieldset.radio__fieldset--variant-option-image {
  display: none !important;
  visibility: hidden !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Make Length row gap match the horizontal gap and slightly reduce visual height. */
body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__buttons,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid {
  column-gap: 8px !important;
  row-gap: 8px !important;
  gap: 8px !important;
}

@media screen and (min-width: 750px) {
  body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label,
  body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
    min-height: 102px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* Selected Length pill: 2px tighter so it reads refined beside the section label. */
body.milano-grace .mw-len-selected {
  gap: 5px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
}

body.milano-grace .mw-len-selected__label {
  font-size: 9.5px !important;
}

body.milano-grace .mw-len-selected__val {
  font-size: 12px !important;
}


/* =============================================================================
   FINAL ROOT FIX + DENSITY REFINEMENT — v2026-05-29h
   =============================================================================
   Product-info now atomically replaces <variant-selects> and carries the SC
   Cap Size block into the incoming picker before the swap. These CSS rules are
   just final spacing polish/fallbacks, not the primary duplicate-render fix.
*/
body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__buttons,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid {
  row-gap: 6px !important;
  column-gap: 8px !important;
  gap: 6px 8px !important;
}

@media screen and (min-width: 750px) {
  body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label,
  body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
    min-height: 100px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}

body.milano-grace.milano-wizard-mode .product__form variant-selects.product__selectors,
body.milano-grace.milano-wizard-mode .product__form variant-selects {
  padding-top: 12px !important;
  margin-top: 10px !important;
}

/* =============================================================================
   GALLERY POSITION LABELS DISABLED — v2026-06-01
   Keeps any already-injected Front/Side/Back chips hidden while JS no-op is active.
   ============================================================================= */
body.milano-grace .mw-slide-label {
  display: none !important;
}

body.milano-grace .product-single__thumbnail[data-mw-label]::after {
  content: none !important;
  display: none !important;
}

/* =============================================================================
   NAOMI / 7-LENGTH DYNAMIC LAYOUT + SELECTED STATE — v2026-06-01
   Purpose:
   - Keep 7 Length choices clear for an older shopper audience.
   - Save vertical space without making mobile cards cramped.
   - Use 3 compact columns only on true desktop; mobile/tablet remain 2 columns.
   - Make the selected card self-evident without relying only on the title pill.
   ============================================================================= */
body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__buttons,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid {
  row-gap: 4px !important;
  column-gap: 8px !important;
  gap: 4px 8px !important;
}

body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
  position: relative !important;
}

@media screen and (min-width: 750px) {
  body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label,
  body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
}

/* Selected state: add a small confirmation check in the card itself. This is
   easier to notice than the pill alone, but less busy than a text badge. */
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__input:checked + .radio__label::after,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__input:checked + .radio__label::after,
body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__input:checked + .radio__label::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--mw-brown, #2D2926);
  box-shadow: 0 1px 4px rgba(45, 41, 38, 0.16);
  pointer-events: none;
}

/* 7+ Lengths: desktop-only compact visual cards.
   Rationale: with seven options, 2 columns create a tall four-row grid. Desktop
   can handle 3 columns if the card reads image-first with text below. Mobile and
   tablet stay 2-column for readability and finger comfort. */
@media screen and (min-width: 1100px) {
  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__buttons,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 6px !important;
    column-gap: 8px !important;
    gap: 6px 8px !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 3px !important;
    min-height: 126px !important;
    padding: 8px 6px 7px !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-image,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-image {
    width: 76px !important;
    height: 86px !important;
    min-width: 76px !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-title,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.12 !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .mw-len-num,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .mw-len-num {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .mw-len-name,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .mw-len-name {
    display: block !important;
    font-size: 10.5px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.09em !important;
  }
}

/* First-paint fallback for 7+ Lengths before JS adds .mw-length-many.
   This is deliberately scoped to the Grace Length grid and only active on
   desktop. The JS class remains the primary cross-browser path. */
@supports selector(.x:has(.y)) {
  @media screen and (min-width: 1100px) {
    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      row-gap: 6px !important;
      column-gap: 8px !important;
      gap: 6px 8px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: auto auto !important;
      justify-items: center !important;
      align-items: center !important;
      text-align: center !important;
      gap: 3px !important;
      min-height: 126px !important;
      padding: 8px 6px 7px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .option-image {
      width: 76px !important;
      height: 86px !important;
      min-width: 76px !important;
    }
  }
}

/* =============================================================================
   FINAL CROSS-PRODUCT PDP SYSTEM POLISH — v2026-06-01b
   - Centralized title rhythm across wigs, toppers, and minimal-option PDPs.
   - Minimal SC Option products share Shop This Look direct-card styling.
   - Preorder badge reserves a small stable slot to reduce variant-change CLS.
   - Mobile media → title spacing tightened without changing desktop layout.
   ============================================================================= */

/* Product title system: preserve theme typography, normalize line-height/spacing. */
body.template-product .product__title,
body[class*="product"] .product__title {
  line-height: 1.08 !important;
  margin-bottom: 0 !important;
}

body.template-product .product__title__main,
body[class*="product"] .product__title__main {
  display: block !important;
  line-height: 1.08 !important;
}

body.template-product .product__title__variant,
body[class*="product"] .product__title__variant {
  display: block !important;
  margin-top: 5px !important;
  color: var(--mw-brown-light, #9A8E84) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  font-size: clamp(15px, 0.48em, 19px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  line-height: 1.28 !important;
  text-transform: none !important;
}

@media screen and (max-width: 749px) {
  body.template-product .product__title,
  body[class*="product"] .product__title,
  body.template-product .product__title__main,
  body[class*="product"] .product__title__main {
    line-height: 1.06 !important;
  }

  body.template-product .product__title__variant,
  body[class*="product"] .product__title__variant {
    margin-top: 4px !important;
    font-size: clamp(14px, 0.42em, 17px) !important;
    line-height: 1.22 !important;
  }

  /* Tighten the mobile gap between the media carousel/thumbs and the product
     title. Desktop remains untouched. */
  body.template-product product-info .product-single__details,
  body.template-product .product-single__details,
  body.template-product .collapsible-elements.product-single__details {
    margin-top: 10px !important;
    padding-top: 0 !important;
  }

  body.template-product .product__block--title,
  body.template-product .product__block.product__block--title {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 6px !important;
  }
}

/* Minimal/direct SC Options mode. Uses the existing .milano-stl-options markup
   but also applies when detection is based on option structure rather than a
   collection/tag. */
body.milano-minimal-options .personalize-toggle {
  display: none !important;
}

body.milano-minimal-options .milano-stl-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px 0 16px !important;
}

body.milano-minimal-options .milano-stl-options .bold_option.milano-always-visible {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 13px 16px 15px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid var(--mw-card-border, #E8DDD6) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

body.milano-minimal-options .milano-stl-options .bold_option_value label {
  min-height: 44px !important;
}

/* Compact, consistent size-guide treatment on minimal-option products where
   there is no Cap/Base title row to receive the link. */
body.milano-minimal-options .product__form__size-chart {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 6px 0 12px !important;
}

body.milano-minimal-options .product__form__size-chart a,
body.milano-minimal-options .product__form__size-chart button,
body.milano-minimal-options .product__popup__link,
body.milano-minimal-options .product__popup-toggle {
  border: 1px solid var(--mw-card-border, #E8DDD6) !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  background: rgba(255,255,255,0.46) !important;
  color: var(--mw-brown, #8B7355) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

/* Preorder / inventory badge system: premium champagne-taupe, and reserve a
   small stable slot so variant switches do not cause visible vertical jumps. */
body.template-product .variant__countdown,
body[class*="product"] .variant__countdown {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 18px !important;
}

body.template-product .product__block:has(.variant__countdown),
body.template-product [id^="Inventory-"]:has(.variant__countdown) {
  display: block !important;
  min-height: 18px !important;
  padding-top: 3px !important;
  padding-bottom: 2px !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  border: 0 !important;
}

/* Keep a tiny invisible slot for in-stock/low-stock states instead of fully
   collapsing. This prevents preorder variants from pushing the price down. */
body.template-product .variant__countdown.count-is-in:not(:has(.mw-promo-badge)),
body.template-product .variant__countdown.count-is-low:not(:has(.mw-promo-badge)) {
  display: inline-flex !important;
  visibility: hidden !important;
  min-height: 18px !important;
  height: 18px !important;
  overflow: hidden !important;
}

body.template-product .variant__countdown--preorder,
body.template-product .variant__countdown.count-is-out .variant__countdown--out {
  padding: 4px 10px !important;
  background: #EADCC8 !important;
  color: #70573E !important;
  border: 1px solid rgba(112, 87, 62, 0.12) !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.065em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.template-product .variant__countdown.count-is-out .variant__countdown--out::before {
  color: #70573E !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.065em !important;
}

body.template-product .mw-promo-badge {
  background: #F7EEE4 !important;
  color: #8B5E34 !important;
  border: 1px solid rgba(139, 94, 52, 0.12) !important;
}

/* If reviews are present above inventory, give the badge a little top breathing
   room so the badge does not feel glued to the review row. */
body.template-product .product__block--rating + .product__block:has(.variant__countdown),
body.template-product .product__block:has(.okeReviews):has(+ .product__block .variant__countdown) + .product__block {
  padding-top: 6px !important;
}

/* =============================================================================
   GRACE LENGTH DENSITY FINAL — v2026-06-01c
   Shopify admin now owns Length option order. These rules only refine the
   6–7 option visual layout: tighter row rhythm, larger thumbnails inside the
   same cards, and a single-line desktop 3-column label such as “12\" Halle”.
   ============================================================================= */
body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons,
body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__buttons,
body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid {
  row-gap: 3px !important;
  column-gap: 8px !important;
  gap: 3px 8px !important;
}

@media screen and (min-width: 750px) {
  body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__button label,
  body.milano-grace.milano-wizard-mode fieldset.mw-length-fieldset .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid .radio__button label {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }
}

@media screen and (min-width: 1100px) {
  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__buttons,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many {
    row-gap: 2px !important;
    column-gap: 8px !important;
    gap: 2px 8px !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
    gap: 2px !important;
    min-height: 126px !important;
    padding: 4px 6px 5px !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-image,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-image {
    width: 88px !important;
    height: 96px !important;
    min-width: 88px !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-title,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-title {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.05 !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .mw-len-num,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .mw-len-num {
    display: inline !important;
    flex: 0 0 auto !important;
    font-size: 14.5px !important;
    line-height: 1.05 !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .mw-len-name,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .mw-len-name {
    display: inline !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10.2px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.075em !important;
  }
}

@supports selector(.x:has(.y)) {
  @media screen and (min-width: 1100px) {
    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) {
      row-gap: 2px !important;
      column-gap: 8px !important;
      gap: 2px 8px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label {
      grid-template-columns: 1fr !important;
      grid-template-rows: 1fr auto !important;
      gap: 2px !important;
      min-height: 126px !important;
      padding: 4px 6px 5px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .option-image {
      width: 88px !important;
      height: 96px !important;
      min-width: 88px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .option-title {
      display: inline-flex !important;
      align-items: baseline !important;
      justify-content: center !important;
      gap: 5px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  }
}


/* =============================================================================
   FINAL PRICE / BADGE RHYTHM OVERRIDES — v2026-06-01d
   -----------------------------------------------------------------------------
   Expert direction:
   - Keep the PDP price visually stable even when Palo Alto re-renders the price
     block during variant switches.
   - Use a premium antique-champagne preorder badge instead of the softer pink /
     rose direction.
   - Collapse empty inventory rows when there is no preorder/promo/review so the
     title → price stack does not feel artificially stretched.
   - Reserve a compact badge rail only when a badge is actually visible.
   ============================================================================= */

:root {
  --mw-preorder-bg: #F0E3C4;
  --mw-preorder-text: #67502E;
  --mw-preorder-border: rgba(128, 98, 49, 0.22);
  --mw-preorder-shadow: rgba(103, 80, 46, 0.04);
}

/* Price typography lock: prevents the variant-rendered theme price from briefly
   falling back to the smaller native font before Milano sync restyles it. */
body.template-product .product__price-wrapper > .product__price,
body.template-product .product__price-and-badge .product__price {
  align-items: baseline !important;
}

body.template-product .product__price-wrapper > .product__price [data-product-price],
body.template-product .product__price-wrapper > .product__price [data-product-price] .money,
body.template-product .product__price-wrapper > .product__price .money,
body.template-product .product__price-and-badge [data-product-price],
body.template-product .product__price-and-badge [data-product-price] .money,
body.template-product .product__price-and-badge .mw-pdp-sale-price {
  color: var(--mw-black, #2D2926) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  font-size: clamp(22px, 1.55vw, 26px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.15 !important;
}

body.template-product .product__price-wrapper > .product__price .mw-pdp-compare-price {
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.15 !important;
}

body.template-product .mw-price-context {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body.template-product .product__price-wrapper > .milano-splitit-fallback {
  min-height: 18px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  margin-top: 3px !important;
  margin-bottom: 1px !important;
}

@media screen and (max-width: 749px) {
  body.template-product .product__price-wrapper > .product__price [data-product-price],
  body.template-product .product__price-wrapper > .product__price [data-product-price] .money,
  body.template-product .product__price-wrapper > .product__price .money,
  body.template-product .product__price-and-badge [data-product-price],
  body.template-product .product__price-and-badge [data-product-price] .money,
  body.template-product .product__price-and-badge .mw-pdp-sale-price {
    font-size: 22px !important;
  }
}

/* Compact inventory slot. JS adds .mw-visible-inventory-state or
   .mw-empty-inventory-state to the actual inventory product block so this works
   without relying on broad :has() selectors. */
body.template-product .mw-inventory-block {
  border: 0 !important;
  transition: none !important;
}

body.template-product .mw-inventory-block.mw-visible-inventory-state {
  display: block !important;
  min-height: 22px !important;
  height: auto !important;
  padding-top: 4px !important;
  padding-bottom: 1px !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  overflow: visible !important;
}

body.template-product.mw-current-has-rating .mw-inventory-block.mw-visible-inventory-state {
  padding-top: 7px !important;
}

body.template-product .mw-inventory-block.mw-empty-inventory-state,
body.template-product.mw-compact-meta-gap .mw-inventory-block.mw-empty-inventory-state {
  min-height: 0 !important;
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

body.template-product .mw-inventory-block.mw-empty-inventory-state .variant__countdown,
body.template-product.mw-compact-meta-gap .variant__countdown.count-is-in:not(:has(.mw-promo-badge)),
body.template-product.mw-compact-meta-gap .variant__countdown.count-is-low:not(:has(.mw-promo-badge)) {
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

body.template-product .mw-inventory-block.mw-visible-inventory-state .variant__countdown {
  min-height: 20px !important;
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* Premium preorder badge: more aligned with Milano gold/champagne brand cues
   than pink, while still visually distinct from the add-to-cart gold. */
body.template-product .variant__countdown--preorder,
body.template-product .variant__countdown.count-is-out .variant__countdown--out {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 4px 10px !important;
  background: var(--mw-preorder-bg) !important;
  color: var(--mw-preorder-text) !important;
  border: 1px solid var(--mw-preorder-border) !important;
  box-shadow: 0 1px 0 var(--mw-preorder-shadow) !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.template-product .variant__countdown.count-is-out .variant__countdown--out::before {
  color: var(--mw-preorder-text) !important;
}

body.template-product .mw-promo-badge {
  background: #F7EBD0 !important;
  color: #75572C !important;
  border: 1px solid rgba(117, 87, 44, 0.16) !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.065em !important;
}

/* =============================================================================
   GRACE LENGTH BOX VISUAL POLISH — v2026-06-01d
   Small desktop-only density + hierarchy refinement:
   - Slightly larger length thumbnails and text inside the same card footprint.
   - Less perceived bottom dead space by centering the image/label stack.
   - Keeps mobile/touch sizes unchanged for readability.
   ============================================================================= */
@media screen and (min-width: 1100px) {
  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 1px !important;
    min-height: 126px !important;
    padding: 3px 6px !important;
    text-align: center !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-image,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-image {
    width: 92px !important;
    height: 100px !important;
    min-width: 92px !important;
    margin-inline: auto !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label img,
  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .swatch__button__image,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label img,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .swatch__button__image {
    max-width: 92px !important;
    max-height: 100px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-title,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-title {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.05 !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .mw-len-num,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .mw-len-num {
    display: inline !important;
    flex: 0 0 auto !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .mw-len-name,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .mw-len-name {
    display: inline !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.065em !important;
  }
}

@supports selector(.x:has(.y)) {
  @media screen and (min-width: 1100px) {
    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label {
      grid-template-rows: auto auto !important;
      align-content: center !important;
      justify-content: center !important;
      justify-items: center !important;
      align-items: center !important;
      gap: 1px !important;
      padding: 3px 6px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .option-image {
      width: 92px !important;
      height: 100px !important;
      min-width: 92px !important;
      margin-inline: auto !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label img,
    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .swatch__button__image {
      max-width: 92px !important;
      max-height: 100px !important;
      object-fit: contain !important;
      object-position: center !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .mw-len-num {
      font-size: 16px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .mw-len-name {
      font-size: 12px !important;
      letter-spacing: 0.065em !important;
    }
  }
}

/* =============================================================================
   GRACE GALLERY LENGTH LABELS + CHART MEDIA POLISH — v2026-06-02
   - Reintroduces gallery labels as Length names, not Front/Side/Back.
   - Keeps Grace Collection / length chart unlabeled and uncropped.
   - Uses champagne-taupe preorder badge tuned for #f5f0eb PDP background.
   ============================================================================= */
body.template-product {
  --mw-preorder-bg: #E8D8C3;
  --mw-preorder-text: #6F543C;
  --mw-preorder-border: #D8C1A6;
  --mw-preorder-shadow: rgba(111, 84, 60, 0.05);
}

body.milano-grace [data-product-single-media-wrapper],
body.milano-grace .product-gallery__media,
body.milano-grace .product-gallery__media-link,
body.milano-grace .product-single__thumbnail {
  position: relative;
}

body.milano-grace [data-product-single-media-wrapper][data-mw-label]::after,
body.milano-grace .product-gallery__media[data-mw-label]::after,
body.milano-grace .product-gallery__media-link[data-mw-label]::after {
  content: attr(data-mw-label) !important;
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 24px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(245, 240, 235, 0.92);
  color: #2D2926;
  border: 1px solid rgba(45, 41, 38, 0.08);
  box-shadow: 0 2px 8px rgba(45, 41, 38, 0.08);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

body.milano-grace .product-single__thumbnail[data-mw-label]::after {
  content: attr(data-mw-label) !important;
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  z-index: 3;
  display: block !important;
  padding: 3px 4px;
  border-radius: 999px;
  background: rgba(245, 240, 235, 0.9);
  color: #2D2926;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

body.milano-grace [data-mw-chart-media]::after,
body.milano-grace .product-single__thumbnail[data-mw-chart-media]::after {
  content: none !important;
  display: none !important;
}

/* v2026-06-05: "Wigs shown for length only" caption on the length-comparison
   chart tile (desktop slot 4 + mobile chart slide). The Grace length images are
   stock shots for length reference, so this clarifies they don't reflect the
   chosen colour. Carries the [data-product-single-media-slider] ancestor so it
   out-specifies the ::after suppressors above — shows ONLY on the main gallery
   media, never the tiny nav thumbnails (which keep content:none). */
body.milano-grace [data-product-single-media-slider] [data-product-single-media-wrapper][data-mw-chart-media] {
  position: relative;
}
body.milano-grace [data-product-single-media-slider] [data-product-single-media-wrapper][data-mw-chart-media]::after {
  content: "Wigs shown for length only" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  bottom: 12px;
  transform: translateX(-50%);
  width: auto !important;
  max-width: calc(100% - 24px);
  margin: 0 !important;
  padding: 5px 11px;
  background: rgba(45, 41, 38, 0.74);
  color: #fff;
  font-family: var(--milano-font-body, inherit);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  border-radius: 999px;
  pointer-events: none;
  z-index: 3;
}

body.milano-grace [data-mw-chart-media] img,
body.milano-grace [data-mw-chart-media] picture,
body.milano-grace [data-mw-chart-media] .image-wrapper,
body.milano-grace [data-mw-chart-media] .image-wrapper img {
  object-fit: contain !important;
  object-position: center !important;
}

body.milano-grace [data-mw-chart-media] img {
  background: #fff;
}

body.milano-grace .product-single__thumbnail[data-mw-chart-media] img {
  padding: 4px !important;
  object-fit: contain !important;
  background: #fff;
}

/* v2026-06-05: the earlier duplicate desktop chart rule lived here and has been
   consolidated into the single effective rule further down (search "THE effective
   desktop chart rule"). Keeping one rule avoids the override confusion that left
   the chart full-width. */

@media screen and (max-width: 749px) {
  body.milano-grace [data-product-single-media-wrapper][data-mw-label]::after,
  body.milano-grace .product-gallery__media[data-mw-label]::after,
  body.milano-grace .product-gallery__media-link[data-mw-label]::after {
    left: 10px;
    bottom: 10px;
    padding: 5px 8px;
    font-size: 10px;
  }

  body.milano-grace [data-product-single-media-wrapper][data-mw-chart-media] img {
    object-fit: contain !important;
    background: #fff;
  }
}

/* Final desktop Length-card balance pass: keep the box size, use more of the
   internal area, and remove the remaining bottom-heavy feel. */
@media screen and (min-width: 1100px) {
  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label {
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: center !important;
    gap: 0 !important;
    min-height: 126px !important;
    padding: 2px 6px 1px !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-image,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-image {
    width: 94px !important;
    height: 102px !important;
    min-width: 94px !important;
    margin: 0 auto !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label img,
  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .swatch__button__image,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label img,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .swatch__button__image {
    max-width: 94px !important;
    max-height: 102px !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-title,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-title {
    transform: translateY(-1px);
  }
}

@supports selector(.x:has(.y)) {
  @media screen and (min-width: 1100px) {
    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label {
      grid-template-rows: minmax(0, 1fr) auto !important;
      gap: 0 !important;
      padding: 2px 6px 1px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .option-image {
      width: 94px !important;
      height: 102px !important;
      min-width: 94px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label img,
    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .swatch__button__image {
      max-width: 94px !important;
      max-height: 102px !important;
    }
  }
}

/* =============================================================================
   EXPERT-REVIEWED GALLERY + THUMB + CHART FINAL — v2026-06-02
   - Desktop grid stays premium: no media chips; selected Length is already clear.
   - Mobile carousel keeps one main-media context chip; thumbnails stay visual-only.
   - Length Guide/chart media stays last and fills its guide card as much as possible
     without cropping important chart content.
   - Visible thumbnails are forced out of stale lazy/skeleton states only when loaded.
   ============================================================================= */

/* Thumbnail strip: never show chips. The selected border is the indicator. */
body.milano-grace [data-product-single-media-thumbs] .product-single__thumbnail::after,
body.milano-grace [data-product-single-media-thumbs] [data-mw-label]::after,
body.milano-grace [data-product-single-media-thumbs] [data-mw-chart-media]::after {
  content: none !important;
  display: none !important;
}

/* Visible thumbnail images should not remain hidden by theme lazy/skeleton classes
   after Flickity nodes are reordered. */
body.milano-grace [data-product-single-media-thumbs] .product-single__thumbnail img,
body.milano-grace [data-product-single-media-thumbs] [data-thumbnail-id] img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

body.milano-grace [data-product-single-media-thumbs] [data-mw-thumb-ready="1"],
body.milano-grace [data-product-single-media-thumbs] img[data-mw-thumb-ready="1"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Desktop grid: hide all product-photo and guide chips. Repeating the active
   Length on every grid tile made the PDP feel busier and less premium. */
@media screen and (min-width: 750px) {
  body.milano-grace [data-product-single-media-wrapper][data-mw-label]::after,
  body.milano-grace .product-gallery__media[data-mw-label]::after,
  body.milano-grace .product-gallery__media-link[data-mw-label]::after,
  body.milano-grace [data-product-single-media-wrapper][data-mw-chart-media]::after,
  body.milano-grace .product-gallery__media[data-mw-chart-media]::after,
  body.milano-grace .product-gallery__media-link[data-mw-chart-media]::after {
    content: none !important;
    display: none !important;
  }

  /* v2026-06-05: the single desktop chart rule (a redundant duplicate higher up
     was removed). The length-comparison chart occupies a SINGLE gallery cell (the
     previously-empty slot 4) instead of a full-width row. It stretches to match
     the wig tile beside it; the 1500×1500 chart (internal whitespace) is contained
     on white and scaled modestly to crop that whitespace so it reads clearly at
     tile size. Scoped to body.milano-grace — no effect on non-Grace PDPs. */
  body.milano-grace [data-product-single-media-slider] [data-product-single-media-wrapper][data-mw-chart-media],
  body.milano-grace [data-product-single-media-slider] .product-gallery__media[data-mw-chart-media],
  body.milano-grace [data-product-single-media-slider] .product-gallery__media-link[data-mw-chart-media] {
    grid-column: auto !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body.milano-grace [data-product-single-media-slider] [data-product-single-media-wrapper][data-mw-chart-media] img,
  body.milano-grace [data-product-single-media-slider] .product-gallery__media[data-mw-chart-media] img,
  body.milano-grace [data-product-single-media-slider] .product-gallery__media-link[data-mw-chart-media] img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    /* 1.14 crops the chart's internal margin so it fills the tile; bump toward
       1.2 if it still reads small, lower toward 1.0 if any edge wigs clip. */
    transform: scale(1.14) !important;
    transform-origin: center center !important;
    background: #fff !important;
  }
}

/* Mobile carousel: show exactly one context chip on the outer active media
   wrapper. Nested media/link nodes and thumbnails stay chip-free. */
@media screen and (max-width: 749px) {
  body.milano-grace .product-gallery__media[data-mw-label]::after,
  body.milano-grace .product-gallery__media-link[data-mw-label]::after,
  body.milano-grace .product-gallery__media[data-mw-chart-media]::after,
  body.milano-grace .product-gallery__media-link[data-mw-chart-media]::after,
  body.milano-grace [data-product-single-media-thumbs] [data-mw-label]::after,
  body.milano-grace [data-product-single-media-thumbs] [data-mw-chart-media]::after {
    content: none !important;
    display: none !important;
  }

  body.milano-grace [data-product-single-media-wrapper][data-mw-label]::after,
  body.milano-grace [data-product-single-media-wrapper][data-mw-chart-media]::after {
    position: absolute !important;
    left: 10px !important;
    bottom: 10px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-family: var(--milano-font-body, inherit) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
  }

  body.milano-grace [data-product-single-media-wrapper][data-mw-label]::after {
    content: attr(data-mw-label) !important;
    background: rgba(245, 240, 235, 0.9) !important;
    color: #2d2926 !important;
    border: 1px solid rgba(45, 41, 38, 0.1) !important;
    box-shadow: 0 1px 5px rgba(45, 41, 38, 0.1) !important;
  }

  body.milano-grace [data-product-single-media-wrapper][data-mw-chart-media]::after {
    content: 'Length Guide' !important;
    background: rgba(45, 41, 38, 0.88) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 2px 8px rgba(45, 41, 38, 0.16) !important;
  }

  body.milano-grace [data-product-single-media-wrapper][data-mw-chart-media] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(1.02) !important;
    transform-origin: center center !important;
    background: #fff !important;
  }
}


/* =============================================================================
   QUICK CHART PADDING + LENGTH TITLE BALANCE — v2026-06-02
   - Gives the desktop Length Guide chart a little more top/bottom breathing room.
   - Removes the remaining bottom-heavy feel from desktop 7-option Length cards.
   - CSS-only; no gallery/variant logic changes.
   ============================================================================= */
@media screen and (min-width: 750px) {
  body.milano-grace [data-product-single-media-slider] [data-product-single-media-wrapper][data-mw-chart-media],
  body.milano-grace [data-product-single-media-slider] .product-gallery__media[data-mw-chart-media],
  body.milano-grace [data-product-single-media-slider] .product-gallery__media-link[data-mw-chart-media] {
    padding-block: clamp(18px, 2vw, 30px) !important;
    padding-inline: clamp(14px, 1.5vw, 24px) !important;
    box-sizing: border-box !important;
  }

  body.milano-grace [data-product-single-media-slider] [data-product-single-media-wrapper][data-mw-chart-media] img,
  body.milano-grace [data-product-single-media-slider] .product-gallery__media[data-mw-chart-media] img,
  body.milano-grace [data-product-single-media-slider] .product-gallery__media-link[data-mw-chart-media] img {
    transform: scale(1.04) !important;
  }
}

@media screen and (min-width: 1100px) {
  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label {
    grid-template-rows: minmax(0, 1fr) max-content !important;
    align-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding-block: 2px 0 !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-title,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-title {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: -1px auto 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    align-items: center !important;
    transform: none !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .mw-len-num,
  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .mw-len-name,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .mw-len-num,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .mw-len-name {
    line-height: 1 !important;
  }
}

@supports selector(.x:has(.y)) {
  @media screen and (min-width: 1100px) {
    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label {
      grid-template-rows: minmax(0, 1fr) max-content !important;
      gap: 0 !important;
      padding-block: 2px 0 !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .option-title {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      margin: -1px auto 0 !important;
      padding: 0 !important;
      line-height: 1 !important;
      align-items: center !important;
      transform: none !important;
    }
  }
}


/* =============================================================================
   FINAL DESKTOP LENGTH CARD BALANCE + MOBILE CHART CHIP REMOVAL — v2026-06-02
   - Adds a small amount of desktop-only bottom breathing room back into Length
     option cards after the previous title-balance pass made them too tight.
   - Removes the mobile Length Guide chip from chart media; the chart itself is
     visually self-explanatory and the thumbnail/slide should stay clean.
   ============================================================================= */
@media screen and (min-width: 1100px) {
  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label {
    padding-block: 2px 3px !important;
  }

  body.milano-grace.milano-wizard-mode fieldset.mw-length-many .radio__button label .option-title,
  body.milano-grace.milano-wizard-mode .radio__buttons.mw-length-grid.mw-length-many .radio__button label .option-title {
    margin: 0 auto 0 !important;
  }
}

@supports selector(.x:has(.y)) {
  @media screen and (min-width: 1100px) {
    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label {
      padding-block: 2px 3px !important;
    }

    body.milano-grace.milano-wizard-mode fieldset.radio__fieldset--variant-option-image .radio__buttons:has(> .radio__button:nth-child(7)) .radio__button label .option-title {
      margin: 0 auto 0 !important;
    }
  }
}

@media screen and (max-width: 749px) {
  body.milano-grace [data-product-single-media-wrapper][data-mw-chart-media]::after,
  body.milano-grace .product-gallery__media[data-mw-chart-media]::after,
  body.milano-grace .product-gallery__media-link[data-mw-chart-media]::after,
  body.milano-grace [data-product-single-media-thumbs] [data-mw-chart-media]::after {
    content: none !important;
    display: none !important;
  }
}

/* =============================================================================
   MOBILE CWV / GALLERY STABILITY PASS — v2026-06-02c
   - Reserves the Grace mobile hero gallery + thumbnail strip before Flickity and
     lazy images finish, reducing the product-details layout shift cluster seen
     in DevTools Performance. v2026-06-02c removes aspect-ratio forcing from
     Flickity's inner slider to avoid fighting its transform/height math.
   - Keeps chart media lazy and support-only; product media remains the LCP target.
   - Avoids desktop visual changes.
   ============================================================================= */
@media screen and (max-width: 749px) {
  body.milano-grace [data-product-single-media-slider],
  body.milano-grace [data-product-single-media-slider] .flickity-viewport {
    min-height: min(calc(100vw - 40px), 430px) !important;
  }

  body.milano-grace [data-product-single-media-wrapper],
  body.milano-grace .product-gallery__media-slide,
  body.milano-grace .product-gallery__media,
  body.milano-grace .product-gallery__media-link {
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }

  body.milano-grace [data-product-single-media-slider] .flickity-slider {
    min-height: 100% !important;
  }

  body.milano-grace [data-product-single-media-thumbs] {
    min-height: 94px !important;
  }

  body.milano-grace [data-product-single-media-thumbs] .flickity-viewport {
    min-height: 90px !important;
  }

  body.milano-grace .product__price-and-badge,
  body.milano-grace .product__price-wrapper {
    min-height: 46px !important;
  }
}


/* =============================================================================
   PDP COPY/CAPITALIZATION + PERCEIVED-SPEED MICRO POLISH — v2026-06-03
   - Keeps non-Length option labels in natural title case; Length still uses its
     deliberate compact number/name hierarchy.
   - Adds GPU-cheap hover/tap feedback to make option selection feel faster
     without adding JS, layout work, or motion for reduced-motion users.
   ============================================================================= */
body.milano-grace.milano-wizard-mode fieldset:not(.radio__fieldset--variant-option-image):not(.mw-length-fieldset) > .radio__buttons .radio__button .option-title,
body.milano-grace.milano-wizard-mode fieldset:not(.radio__fieldset--variant-option-image):not(.mw-length-fieldset) > .radio__buttons .radio__button .option-title[data-mw-lace-title-case="1"] {
  text-transform: none !important;
  letter-spacing: 0.015em !important;
}

body.template-product .radio__label,
body.template-product .mw-segmented__cell,
body.template-product .bold_option_value label,
body.template-product .product-form__submit,
body.template-product button[name="add"] {
  touch-action: manipulation;
}

body.milano-grace.milano-wizard-mode .radio__input + .radio__label,
body.milano-grace.milano-wizard-mode .mw-segmented__cell,
body.milano-grace.milano-wizard-mode .bold_option_value label {
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 160ms ease,
    color 140ms ease,
    transform 120ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body.milano-grace.milano-wizard-mode .radio__input:not(:checked) + .radio__label:hover,
  body.milano-grace.milano-wizard-mode .bold_option_value input:not(:checked) + label:hover,
  body.milano-grace.milano-wizard-mode .mw-segmented__cell:hover:not(.mw-segmented__cell--active) {
    border-color: rgba(139, 115, 85, 0.58) !important;
    background-color: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 4px 14px rgba(45, 41, 38, 0.08) !important;
    transform: translateY(-1px);
  }
}

body.milano-grace.milano-wizard-mode .radio__input:not(:checked) + .radio__label:active,
body.milano-grace.milano-wizard-mode .bold_option_value input:not(:checked) + label:active,
body.milano-grace.milano-wizard-mode .mw-segmented__cell:active:not(.mw-segmented__cell--active) {
  transform: translateY(0) scale(0.992);
  transition-duration: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  body.milano-grace.milano-wizard-mode .radio__input + .radio__label,
  body.milano-grace.milano-wizard-mode .mw-segmented__cell,
  body.milano-grace.milano-wizard-mode .bold_option_value label {
    transition: none !important;
    transform: none !important;
  }
}

/* =============================================================================
   PERCEIVED-SPEED MICRO-INTERACTIONS — v2026-06-04
   Cheap, GPU-friendly (transform/opacity only) feedback so the PDP feels instant
   on tap/hover. Zero layout shift. All motion is disabled under
   prefers-reduced-motion. Complements the existing Grace press-feedback rules
   above — these extend the feel to every wizard PDP and to the option cards.
   ============================================================================= */

/* 1. Remove the ~300ms mobile tap delay + grey tap-flash on every interactive
      control. Pure responsiveness — no visual change, helps most on touch. */
body.milano-wizard-mode .bold_option_value,
body.milano-wizard-mode .bold_option_value label,
body.milano-wizard-mode .radio__button label.radio__label,
body.milano-wizard-mode .mw-segmented__cell,
body.milano-wizard-mode .mw-lace-help,
body.milano-wizard-mode .mw-size-guide-native,
body.milano-wizard-mode .product__popup-toggle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 2. Option cards (incl. Cap Size Small/Medium/Large): give them the same
      lift-on-hover + press-on-tap the segmented control already has, so every
      tappable card feels responsive the instant it's touched — before any
      variant re-render or price sync completes. Container-level so it fires
      regardless of the inline <label> inside. */
body.milano-wizard-mode .bold_option_value {
  transition: border-color 0.2s ease, background-color 0.25s ease,
              box-shadow 0.2s ease, transform 0.16s ease;
}
body.milano-wizard-mode .bold_option_value:hover {
  transform: translateY(-1px);
}
body.milano-wizard-mode .bold_option_value:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 90ms;
}

/* 3. Length / Lace image tiles: instant press feedback on ALL wizard PDPs
      (the existing :active rule was scoped to body.milano-grace only). */
body.milano-wizard-mode .radio__input:not(:checked) + .radio__label:active {
  transform: scale(0.99);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  body.milano-wizard-mode .bold_option_value,
  body.milano-wizard-mode .bold_option_value:hover,
  body.milano-wizard-mode .bold_option_value:active,
  body.milano-wizard-mode .radio__input:not(:checked) + .radio__label:active {
    transform: none !important;
    transition: border-color 0.2s ease, background-color 0.25s ease, box-shadow 0.2s ease !important;
  }
}