/* Mitasu for Apparel — modern, theme-agnostic styles. Loaded only on product
   pages that include one of the App Blocks. No global selectors, no JS. */

.apparel-block {
  /* Design tokens — overridable per block via inline --asp-accent. */
  --asp-accent: #1a1a1a;
  --asp-radius: 12px;
  --asp-border: rgba(0, 0, 0, 0.12);
  --asp-surface: #fff;
  --asp-muted: rgba(0, 0, 0, 0.55);
  font-family: inherit;
  color: var(--asp-text, inherit);
  margin: 20px 0;
  line-height: 1.5;
}
.apparel-block h2,
.apparel-block h3 {
  letter-spacing: -0.01em;
}
/* Defensive box model: themes vary in their global box-sizing, which would throw
   off our padding/width math. Force border-box for everything inside the block so
   layout is theme-independent. Scoped to .apparel-block — never leaks to the theme. */
.apparel-block,
.apparel-block *,
.apparel-block *::before,
.apparel-block *::after {
  box-sizing: border-box;
}

/* ---- Selectable design skins (four visually distinct, all modern) ------ */
/* Card — an elevated surface that floats above the page with a soft, layered
   shadow and generous padding. The "premium product card" look. */
.apparel-skin--card {
  background: var(--asp-bg, var(--asp-surface));
  border: 1px solid var(--asp-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.08);
}
/* Bordered — a flat, outlined box: a crisp, clearly-defined border and NO
   shadow, so it reads as "framed" rather than "floating". */
.apparel-skin--bordered {
  background: var(--asp-bg, transparent);
  border: 1.5px solid color-mix(in srgb, var(--asp-text, #1a1a1a) 28%, transparent);
  border-radius: 10px;
  padding: 20px;
}
/* Accent — a tinted panel washed with the accent color and a bold accent edge
   on the left. Draws the eye; great for a brand color. */
.apparel-skin--accent {
  background: color-mix(in srgb, var(--asp-accent) 7%, transparent);
  border-left: 4px solid var(--asp-accent);
  border-radius: 0 14px 14px 0;
  padding: 20px 22px;
}
/* Minimal (plain) — no box at all; just a thin accent rule on top and airy
   spacing, for themes that want the content to sit flush in the page. */
.apparel-skin--plain {
  border-top: 2px solid var(--asp-accent);
  padding-top: 18px;
}

.apparel-block * {
  box-sizing: border-box;
}

/* Size chart */
.apparel-size__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
/* "This item's style" label sits on its own line above the fit/stretch/length
   badges (flex-basis:100% forces the wrap). */
.apparel-size__bar-lbl {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 2px;
}
.apparel-size__badge {
  display: inline-block;
  border: 1px solid var(--asp-border);
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.03);
}
/* The A/B/C letter in the size-table column header (the matching letters
   live on the how-to-measure cards). */
.apparel-size__colletter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--asp-accent, #1a1a1a);
  color: var(--asp-bg, #fff);
  font-size: 10px;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: 1px;
}
.apparel-size__panel {
  margin-top: 14px;
  padding: 0;
  background: var(--asp-bg, var(--asp-surface));
}
/* Horizontal scroll container so the 11-column table stays readable on
   phones; the size-label column stays pinned while measurements scroll. */
.apparel-size__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.apparel-size__scroll .apparel-size__table thead th:first-child,
.apparel-size__scroll .apparel-size__table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
}
/* Body-vs-garment measurement caption under the table (apparel-size-table
   `mtype`): the #1 shopper confusion is "is 100cm the garment or my chest?" */
.apparel-size__mtype {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--asp-text, #1a1a1a);
  opacity: 0.72;
}
/* Optional ± manufacturing-tolerance note under the table (size_chart.tolerance,
   apparel-size-table `tol`) — set on the chart/override, empty = not rendered. */
.apparel-size__tol {
  font-size: .78em;
  opacity: .7;
  margin: 6px 0 0;
}
.apparel-size__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}
.apparel-size__table th,
.apparel-size__table td {
  border-bottom: 1px solid var(--asp-border);
  padding: 9px 10px;
  text-align: center;
}
.apparel-size__table thead th {
  background: rgba(0, 0, 0, 0.035);
  font-weight: 600;
  border-bottom-width: 2px;
}
.apparel-size__table tbody tr:hover td,
.apparel-size__table tbody tr:hover th {
  background: rgba(0, 0, 0, 0.02);
}
.apparel-size__table th[scope="row"] {
  background: transparent;
  text-align: left;
}
/* Sticky cells need an opaque background or scrolled columns show through. */
.apparel-size__scroll .apparel-size__table th[scope="row"] {
  background: var(--asp-bg, var(--asp-surface));
}
.apparel-size__scroll .apparel-size__table thead th:first-child {
  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(0, 0, 0, 0.035)),
    var(--asp-bg, var(--asp-surface));
}
.apparel-size__scroll .apparel-size__table tbody tr:hover th[scope="row"] {
  background: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)),
    var(--asp-bg, var(--asp-surface));
}
@media (max-width: 640px) {
  .apparel-size__table {
    font-size: 12px;
  }
  .apparel-size__table th,
  .apparel-size__table td {
    padding: 7px 8px;
    white-space: nowrap;
  }
}
.apparel-size__unit-toggle,
.apparel-size__region-toggle {
  display: inline-flex;
  border: 1px solid var(--asp-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
  margin-right: 8px;
}
.apparel-size__unit-toggle label,
.apparel-size__region-toggle label {
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
}
/* Touch devices: bring the small toggles/buttons up to a 44px tap target. */
@media (pointer: coarse) {
  .apparel-size__unit-toggle label,
  .apparel-size__region-toggle label {
    min-height: 44px;
    padding: 10px 14px;
  }
  .apparel-feedback__btn,
  .apparel-feedback__chip {
    min-height: 44px;
  }
  .apparel-tabs__nav label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .apparel-measure-me__clearbtn,
  .apparel-measure-me__row input {
    min-height: 44px;
  }
  .apparel-modal__close {
    width: 44px;
    height: 44px;
  }
  .apparel-modal__open--link,
  .apparel-feedback__skip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .apparel-carousel__btn {
    width: 44px;
    height: 44px;
  }
  .apparel-styling__toggle label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
.apparel-size__radio,
.apparel-size__unit-toggle input,
.apparel-size__region-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.apparel-size__unit-toggle input:checked + label,
.apparel-size__region-toggle input:checked + label {
  background: var(--asp-accent);
  color: #fff;
}
.apparel-size__unit-toggle input:checked + label > span,
.apparel-size__region-toggle input:checked + label > span {
  color: #fff;
}
/* The cm/inch + region toggles must wrap (not overflow) in a narrow slot. */
.apparel-size__controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Care instructions render as plain-text pill badges (apparel-size__badge),
   sharing the fit-details row style — no care symbols/icons (licensing). */

/* Model fit */
/* Model & outfit render as responsive card grids (no carousel/slide, no JS):
   2+ across when the section is wide (PC), stacking to 1 when narrow (mobile). */
.apparel-model__list {
  display: grid;
  /* Base (modal/stacked): 1 column — the modal's combined column budget across
     the model + coordinate blocks is 2, split 1 per block. Tab/inline placement
     override further down raises this to 2 (combined budget 4, split 2 per
     block). */
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Flat: no card frame — cards are separated by the list grid gap only. */
.apparel-model__card {
  font-size: 14px;
}
/* Only the model-name heading (direct child of the info column) is block; the
   inline value <strong> inside "着用サイズ: L" must stay on the same line. */
.apparel-model__card > strong,
.apparel-model__info > strong {
  display: block;
  font-size: 15px;
  margin-bottom: 0;
}
/* Stack the model's details with comfortable breathing room (was tightly
   line-height-only). The name, height/weight, wearing+fit row and comment
   each sit on their own line, evenly spaced. */
.apparel-model__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Model height/weight shows both units; the block JS sets data-u from the size
   cm/inch toggle (cross-panel, so `:checked ~` can't reach here). Default cm; the
   inch span appears only when the shopper (or buyer-country default) picks inch. */
.apparel-model__hw [data-asp-unit-inch] { display: none; }
.apparel-model__hw[data-u="inch"] [data-asp-unit-cm] { display: none; }
.apparel-model__hw[data-u="inch"] [data-asp-unit-inch] { display: inline; }
/* "Wearing size: M" and the fit-tendency badge share one line (the badge is no
   longer stranded on its own row between two text lines). */
.apparel-model__wearing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* When a model has a photo: image 50% | info 50% on every breakpoint
   (PC / tablet / mobile). No photo = the plain card above, unchanged. */

.apparel-model__card {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 14px;
  align-items: start;
}
/* .apparel-model__card--media {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
} */
.apparel-model__card--media .apparel-model__photo {
  display: block;
  flex: 1 1 170px;
  /* Full element width + a fixed 350px-tall band (no aspect-ratio box); the whole
     image is shown (contain) on a neutral background, so portrait / landscape /
     square all read at a consistent size. */
  width: 100%;
  max-width: 100%;
  min-height: 250px;
  max-height: 400px;
  object-fit: contain;
}
.apparel-model__card--media .apparel-model__info {
  flex: 1 1 170px;
  min-width: 0;
  padding: 8px;
}

/* Fit details badges */
.apparel-fit-details__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
/* Per-variant material notes (shown when variants carry their own spec). */
.apparel-varspec {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.apparel-varspec__h {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}
.apparel-varspec__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 6px;
}
.apparel-varspec__name {
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
/* 特徴 (Features) tab: one row per standard attribute — label + value chips. */
.apparel-stdtag {
  display: flex;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 10px;
}
.apparel-stdtag__lbl {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  min-width: 64px;
}

/* Complete the look */
.apparel-outfit__note {
  margin: 0 0 12px;
  font-size: 13px;
  opacity: 0.8;
}
/* All coordinate looks for a product sit in one grid (mirrors `.apparel-model__list`
   in the sibling styling block): 1 column by default (modal/stacked — the modal's
   combined column budget across the model + coordinate blocks is 2, split 1 per
   block), raised to 2 columns for tab/inline placement (see the
   `.apparel-tabs:not(.apparel-modal)` rule further down — combined budget 4, split
   2 per block). Divider styling shares the multi-item-grid rules further down. */
.apparel-outfit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* `.apparel-outfit__item` lays the look photo beside the items list. Flat (no
   border/background/padding box). Responds to the BLOCK's own width (not the
   viewport): 2-up when the slot is wide enough, stacked when narrow. Stays 2-up
   even inside the modal (2026-07) — only the outer `.apparel-outfit__grid` column
   count differs by placement, never this inner img/info split. */
.apparel-outfit__item {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 14px;
  align-items: start;
}
.apparel-outfit__item--full {
  grid-template-columns: 1fr;
}
.apparel-outfit__hero {
  display: block;
  /* Full element width + a fixed 350px-tall band (no aspect-ratio box); the whole
     image is shown (contain) on a neutral background, so the two looks (saved +
     per-product) line up regardless of the photo's dimensions. */
  width: 100%;
  min-height: 250px;
  max-height: 400px;
  object-fit: contain;
}
.apparel-model__photo-btn,
.apparel-outfit__hero-btn {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.apparel-lightbox {
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  padding: 44px 16px 16px;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: var(--asp-text, #1a1a1a);
}
.apparel-lightbox:popover-open {
  display: grid;
  place-items: center;
}
.apparel-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.apparel-lightbox__img {
  position: relative;
  z-index: 1;
  pointer-events: none;
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 64px);
  object-fit: contain;
}
.apparel-lightbox__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.apparel-lightbox__backdrop {
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  color: transparent;
  cursor: zoom-out;
}
.apparel-lightbox__backdrop::after {
  content: "\00d7";
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 85%, transparent);
  color: #1a1a1a;
}
.apparel-outfit__related {
  min-width: 0;
}
.apparel-outfit__related-h {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
}
/* Items: a 1-column vertical list of compact, tappable rows. */
.apparel-outfit__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apparel-outfit__card {
  display: flex;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.apparel-outfit__card:hover {
  background: color-mix(in srgb, var(--asp-accent) 8%, transparent);
  border-color: var(--asp-border);
}
.apparel-outfit__card:hover .apparel-outfit__title {
  text-decoration: underline;
}
.apparel-outfit__img {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  flex: 0 0 auto;
}
.apparel-outfit__img--empty {
  display: block;
}
.apparel-outfit__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.apparel-outfit__title {
  font-size: 12.5px;
  line-height: 1.3;
  /* Long product names (and unbroken strings) wrap instead of spilling out of
     the card — important inside the narrow modal/2-column placements. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.apparel-outfit__price {
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Size confidence badge */
.apparel-confidence {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.apparel-confidence__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.apparel-confidence__badge--good {
  background: #d4eddc;
  color: #0c5132;
}
.apparel-confidence__badge--warn {
  background: #ffe9c2;
  color: #5a4200;
}
.apparel-confidence__badge--collecting {
  background: rgba(0, 0, 0, 0.06);
  color: var(--asp-muted);
}
/* Brand fit guidance (cold-start, before enough shopper votes): neutral/outlined
   so it reads as the store's advice, distinct from the data-backed verdict badges. */
.apparel-confidence__badge--brand {
  background: transparent;
  color: var(--asp-text);
  border: 1px solid var(--asp-accent);
}

/* Brand tone (T12): heading typography presets, scoped to the block via a root
   class. Lets a merchant give the block an editorial (serif / uppercase) or
   clean (sans) feel without touching theme code. Targets headings only. */
.apparel-skin--serif .apparel-tabs__nav label,
.apparel-skin--serif .apparel-pd__h,
.apparel-skin--serif h3,
.apparel-skin--serif h4 {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}
.apparel-skin--sans .apparel-tabs__nav label,
.apparel-skin--sans .apparel-pd__h,
.apparel-skin--sans h3,
.apparel-skin--sans h4 {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.apparel-skin--upper .apparel-tabs__nav label,
.apparel-skin--upper .apparel-pd__h,
.apparel-skin--upper h3,
.apparel-skin--upper h4 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* The outfit styling note is an <h4> for layout, but it is prose (a caption),
   not a heading label — never uppercase / letter-space it under the upper skin. */
.apparel-skin--upper .apparel-outfit__note {
  text-transform: none;
  letter-spacing: normal;
}

/* Compact how-to-measure diagram for shoe / bra charts (no model photo). */
.apparel-measure-simple {
  text-align: center;
  margin: 4px 0 12px;
}
.apparel-measure-simple__img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.apparel-measure-simple__cap {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: 0.8;
}

/* Placement = "popup": a small trigger opens the whole block in a centered
   overlay, so it stays readable in a narrow 2-column slot. Powered by the
   native Popover API (top layer) — no JavaScript, no checkbox. */
.apparel-modal__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--asp-accent, #1a1a1a);
  background: none;
  border: 0;
  /* Subtle by default; brightens on hover/focus. */
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.apparel-modal__open:hover,
.apparel-modal__open:focus-visible {
  opacity: 1;
}
.apparel-modal__open--button {
  padding: 8px 14px;
  border: 1px solid var(--asp-accent, #1a1a1a);
  border-radius: 8px;
}
.apparel-modal__open--link {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Modal mode renders the block via the native Popover API: the open popover is
   promoted to the browser TOP LAYER, so it paints above the entire theme no
   matter what — escaping ancestor transforms, z-index and stacking contexts
   that a plain fixed overlay (any z-index) can get trapped inside. The popover
   element IS the card; the UA centers it and gives us ::backdrop for the dim
   overlay + light-dismiss (click outside / Esc). No JS, no checkbox. */
.apparel-block.apparel-modal {
  position: fixed;
  margin: auto;
  inset: 0;
  width: min(1040px, calc(100vw - 24px));
  height: -moz-fit-content;
  height: fit-content;
  max-height: calc(100dvh - 48px);
  background: var(--asp-bg, #fff);
  color: var(--asp-text, #1a1a1a);
  border: 0;
  border-radius: 12px;
  padding: 26px 28px 16px;
  overflow: auto;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
}
.apparel-block.apparel-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 749px) {
  .apparel-block.apparel-modal {
    padding: 22px 16px 12px;
  }
}
.apparel-modal__close {
  position: absolute;
  top: 6px;
  right: 14px;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  color: var(--asp-text, #1a1a1a);
}
/* Tabbed modal: keep the popup's overall height constant so switching tabs
   never resizes it (a jump makes the interaction feel janky). The tab bar stays
   pinned at the top; only the panel area below scrolls. Stacked modals have no
   tab switching, so they keep fit-content (base rule above). */
/* Gate the flex layout on :popover-open — setting `display` unconditionally on a
   [popover] element overrides the UA `[popover]:not(:popover-open){display:none}`
   and stops the popover from being promoted to the top layer (it then renders in
   normal flow, trapped in the theme's stacking context, so it can't sit on top and
   z-index has no effect). Only style the OPEN popover. */
.apparel-block.apparel-modal.apparel-tabs:popover-open {
  /* Height follows the active tab (variable), but the modal is pinned near the
     TOP so growing/shrinking never re-centers it (which read as a jump). The tab
     bar stays put; only a tab taller than the cap scrolls its own panel area. */
  inset: 12dvh 0 auto 0;
  margin: 0 auto;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 72dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.apparel-modal.apparel-tabs .apparel-tabs__nav {
  flex: 0 0 auto;
}
.apparel-modal.apparel-tabs .apparel-tabs__panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.apparel-confidence__icon {
  font-weight: 700;
}
.apparel-confidence__count {
  font-size: 12px;
  opacity: 0.7;
}

/* Fit feedback (storefront) — one bar per answer (label / track / %) */
.apparel-feedback__rows {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 10px;
  margin: 8px 0;
}
.apparel-feedback__rowlabel {
  font-size: 13px;
}
.apparel-feedback__track {
  display: block;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: color-mix(in srgb, var(--asp-text, #1a1a1a) 10%, transparent);
}
.apparel-feedback__seg {
  display: block;
  height: 100%;
  border-radius: 5px;
  transition: width 0.25s ease;
}
.apparel-feedback__seg--tight { background: #ffd79d; }
.apparel-feedback__seg--just { background: #a3d4b3; }
.apparel-feedback__seg--loose { background: #9dc6ff; }
.apparel-feedback__rowpct {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
  text-align: right;
}
.apparel-feedback__vote {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.apparel-feedback__btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--asp-border);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.apparel-feedback__btn:disabled,
.apparel-feedback__chip:disabled,
.apparel-feedback__skip:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.apparel-feedback__btn:hover {
  border-color: var(--asp-accent);
  background: color-mix(in srgb, var(--asp-accent) 8%, transparent);
}

/* Structured fit feedback — "where did it not fit?" step */
.apparel-feedback__areas {
  margin-top: 12px;
}
.apparel-feedback__area-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.apparel-feedback__chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--asp-border);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.apparel-feedback__chip:hover {
  border-color: var(--asp-accent);
  background: color-mix(in srgb, var(--asp-accent) 8%, transparent);
}
.apparel-feedback__skip {
  appearance: none;
  background: transparent;
  border: 0;
  margin-top: 8px;
  padding: 0;
  font: inherit;
  font-size: 0.85em;
  color: var(--asp-muted, #6b7280);
  text-decoration: underline;
  cursor: pointer;
}

/* Group tab sub-sections as a grid: 2 columns on desktop, 1 column on
   tablet/mobile. Each member is a card so the columns read as distinct blocks. */
.apparel-pd__grid {
  display: grid;
  /* Slot-width responsive (not viewport): 2 cards when wide, 1 when narrow. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
/* Flat: no card chrome — grouped sub-sections read as plain content, separated
   by the grid gap only (no border / background / padding box). */
.apparel-pd__sub {
  min-width: 0;
}
.apparel-pd__h {
  margin: 0 0 8px;
  /* ~1.5x the body size so each in-tab sub-section heading reads as a clear title. */
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Styling tab (model_fit + complete_look, 2026-07): `.apparel-pd__grid` gets an
   extra `.apparel-styling__grid` class (added in `info.liquid` only for the
   `styling` group token) that overrides its column template — the two blocks
   (`.apparel-pd__sub`, unchanged) stay side-by-side even when one is empty: an
   explicit 2-track template (not auto-fit) always reserves both halves, so a
   lone populated block never stretches past 50% width. Collapses to a single
   column only when the panel itself is genuinely narrow (not just "the other
   block is empty"). Relies on cascade order (this rule sits after the base
   `.apparel-pd__grid` rule above) rather than extra specificity. */
.apparel-styling__grid {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  container-type: inline-size;
}
/* The styling PANEL is the named query container for every styling-tab
   responsive rule below. Keying them to the panel (not the grid) matters:
   a container query can never match against the subject's own box, so the
   old un-named 480px collapse query never fired — the grid had no ancestor
   container at all. */
.apparel-tabs__panel[data-tab="styling"] {
  container: asp-styling / inline-size;
}
/* Mobile model/coordinate segmented toggle — rendered only when BOTH members
   exist (Liquid gate), shown only in the mobile query below. While the toggle
   is hidden (desktop/tablet) its radios must not be keyboard-focusable — an
   invisible tab stop with no visible focus anchor — so they're
   visibility:hidden until the mobile query turns the toggle on
   (visibility gates focusability; `:checked ~` matching is unaffected). */
.apparel-styling__toggle {
  display: none;
}
.apparel-styling__radio--m,
.apparel-styling__radio--c {
  visibility: hidden;
}
/* Tablet & below: a half-width coordinate sub is too narrow for the img|info
   2-up, so the look photo stacks above its item list. Model stays as-is.
   (Desktop inline slots and the desktop modal are ~1000px+, so they keep the
   2-up look; ≤899px of panel width reads as tablet.) */
@container asp-styling (max-width: 899px) {
  .apparel-outfit__item,
  .apparel-model__card {
    grid-template-columns: 1fr;
  }
}
/* Mobile: one column — and when both blocks exist, a segmented toggle swaps
   between them instead of stacking two long lists. The toggle labels reuse the
   (merchant-overridable) sub headings, so the headings themselves hide. */
@container asp-styling (max-width: 479px) {
  .apparel-styling__grid {
    grid-template-columns: 1fr;
  }
  .model.code .apparel-styling__toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
  }
  .model.code .apparel-styling__radio--m,
  .model.code .apparel-styling__radio--c {
    visibility: visible;
  }
  .apparel-styling__toggle label {
    flex: 1 1 0;
    text-align: center;
    padding: 8px 10px;
    border: 1px solid var(--asp-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .apparel-styling__radio--m:checked ~ .apparel-styling__toggle label[for$="-m"],
  .apparel-styling__radio--c:checked ~ .apparel-styling__toggle label[for$="-c"] {
    background: var(--asp-accent);
    border-color: var(--asp-accent);
    color: #fff;
  }
  .apparel-styling__radio--m:focus-visible ~ .apparel-styling__toggle label[for$="-m"],
  .apparel-styling__radio--c:focus-visible ~ .apparel-styling__toggle label[for$="-c"] {
    outline: 2px solid var(--asp-accent);
    outline-offset: 2px;
  }
  .model.code .apparel-styling__grid .apparel-pd__sub > .apparel-pd__h {
    display: none;
  }
  .apparel-styling__radio--m:checked ~ .apparel-styling__grid .apparel-pd__sub:has(> .apparel-carousel--outfit) {
    display: none;
  }
  .apparel-styling__radio--c:checked ~ .apparel-styling__grid .apparel-pd__sub:has(> .apparel-carousel--model) {
    display: none;
  }
}
/* Each block's own item grid (`.apparel-model__list` / `.apparel-outfit__grid`)
   defaults to 1 column (modal/stacked — combined budget 2, split 1 per block).
   Tab/inline placement (not modal) raises it to 2 (combined budget 4, split 2
   per block) — matches the FAQ's own modal-vs-tab split further down. */
.apparel-tabs:not(.apparel-modal) .apparel-model__list,
.apparel-tabs:not(.apparel-modal) .apparel-outfit__grid {
  grid-template-columns: repeat(1, minmax(max(160px, (100% - 16px) / 2), 1fr));
}
/* A single item never stretches to fill the block's full width — it stays at
   half (the modal's 1-column rule above already reads as half of the panel,
   since `.apparel-styling__grid` caps each block at 50% to begin with). */
.apparel-tabs:not(.apparel-modal) .apparel-model__list > :only-child,
.apparel-tabs:not(.apparel-modal) .apparel-outfit__grid > :only-child {
  max-width: 100%;
}
/* Per-product FAQ — always expanded, Q/A badges, no JS. Thin dotted underline
   separates stacked items (single-column: mobile / tablet / modal). The PC 2-col
   grid below replaces it with the crosshair rules. */
.apparel-faq__item {
  padding: 12px 0;
  border-bottom: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
}
.apparel-faq__item:last-child {
  border-bottom: 0;
}
.apparel-faq__q,
.apparel-faq__a {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.apparel-faq__q {
  font-weight: 600;
}
.apparel-faq__a {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.apparel-faq__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.apparel-faq__badge--q {
  background: var(--asp-accent);
  color: #fff;
}
.apparel-faq__badge--a {
  background: color-mix(in srgb, var(--asp-accent) 14%, transparent);
  color: var(--asp-accent);
}
/* Desktop + inline (non-modal) tabs only: FAQ items sit in 2 columns with a 25px
   gap, regardless of how many there are. Tablet/mobile (<990px) and any modal
   (including desktop modal) stay single-column with the dotted underline above.
   Thin dotted rules run down the centre of the column gap and across the centre
   of each row gap. */
@media (min-width: 990px) {
  .apparel-tabs:not(.apparel-modal) .apparel-faq {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
  }
  .apparel-tabs:not(.apparel-modal) .apparel-faq .apparel-faq__item {
    position: relative;
    padding: 0;
    border-bottom: 0;
  }
  /* Vertical divider down the centre of the column gap. Two equal columns, so the
     container's 50% line IS the middle of the gap. Only when a 2nd item exists
     (i.e. it actually became 2 columns) — :has() guards the single-item case. */
  .apparel-tabs:not(.apparel-modal) .apparel-faq:has(.apparel-faq__item:nth-child(2))::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -0.5px;
    border-left: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
    pointer-events: none;
  }
  /* Horizontal divider centred in the row gap, above every item from row 2 on
     (one segment per column, meeting the vertical line as a crosshair). */
  .apparel-tabs:not(.apparel-modal) .apparel-faq .apparel-faq__item:nth-child(n + 3)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -13px;
    border-top: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
    pointer-events: none;
  }
}

/* ── Dotted dividers for the other multi-item tab grids ──────────────────────
   Same look as the FAQ grid, but these grids are SLOT-width responsive
   (auto-fit), so a container query drives the switch (not the viewport):
   1 column -> dotted underline between stacked items; 2 columns -> dotted
   crosshair (vertical line in the column gap + horizontal line in each row gap).
   Grid items stretch to equal height per row (default), so the per-item vertical
   segment spans the whole row. The vertical line is skipped for a lone last item
   in an odd count (it has no right-hand neighbour). */
.apparel-pd__grid,
.apparel-model__list,
.apparel-outfit__grid {
  container-type: inline-size;
}
/* 1 column: dotted underline between stacked items, with room above the line so
   the content is not glued to it. */
.apparel-pd__sub,
.apparel-model__card,
.apparel-outfit__layout {
  padding-bottom: 14px;
}
.apparel-pd__sub:not(:last-child),
.apparel-model__card:not(:last-child),
.apparel-outfit__layout:not(:last-child) {
  border-bottom: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
}
/* Grouped tabs (240px cols, 14px gap) -> 2-up at ~494px of grid width. */
@container (min-width: 494px) {
  /* 8px padding + half the 14px gap ≈ 15px of breathing room to each line. */
  .apparel-pd__sub {
    position: relative;
    padding: 8px;
  }
  .apparel-pd__sub:not(:last-child) {
    border-bottom: 0;
  }
  .apparel-pd__sub:nth-child(odd):not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -7px;
    width: 0;
    border-right: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
    pointer-events: none;
  }
  .apparel-pd__sub:nth-child(n + 3)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -7px;
    border-top: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
    pointer-events: none;
  }
}
/* Model list (180px cols, 16px gap) -> 2-up at ~376px of grid width. */
@container (min-width: 376px) {
  /* 8px padding + half the 16px gap = 16px of breathing room to each line. */
  .apparel-model__card {
    position: relative;
  }
  .apparel-model__card:not(:last-child) {
    border-bottom: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
  }

  .apparel-model__card:nth-child(n + 3)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    border-top: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
    pointer-events: none;
  }
}
/* Coordinate grid (160px cols, 16px gap) -> 2-up at ~336px of grid width
   (only reachable in the tab/inline 2-column rule above — the modal stays
   1-column, so this container query never fires there). */
@container (min-width: 336px) {
  .apparel-outfit__layout {
    position: relative;
  }
  .apparel-outfit__layout:not(:last-child) {
    border-bottom: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
  }

  .apparel-outfit__layout:nth-child(n + 3)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    border-top: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
    pointer-events: none;
  }
}

/* Styling-tab carousel (model_fit + complete_look, 2026-07). Progressive
   enhancement: every rule is gated on `.is-ready`, which only the block's
   carousel script adds (and only for 2+ slides) — without JS, or with a
   single item, the lists keep the normal card-grid layout above and the nav
   never shows. This section deliberately sits AFTER the card-grid and
   dotted-divider rules: several of those tie on specificity, so the carousel
   overrides must win by source order — don't move it up. */
.apparel-carousel.is-ready .apparel-carousel__track {
  display: block;
  gap: 0;
}
/* Hide every slide except the active one. The active slide keeps its own
   display (`.apparel-model__card--media` is flex for the img|info split —
   never force `display: block` on it). */
.apparel-carousel.is-ready .apparel-carousel__track > :not(.is-active) {
  display: none;
}
/* One slide at a time -> the between-card dotted dividers are meaningless. */
.apparel-carousel.is-ready .apparel-model__card,
.apparel-carousel.is-ready .apparel-outfit__layout {
  padding-bottom: 0;
  border-bottom: 0;
}
.apparel-carousel.is-ready .apparel-model__card::before,
.apparel-carousel.is-ready .apparel-model__card::after,
.apparel-carousel.is-ready .apparel-outfit__layout::before,
.apparel-carousel.is-ready .apparel-outfit__layout::after {
  display: none;
}
/* Nav is JS-driven: hidden until the script marks the carousel ready. */
.apparel-carousel__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.apparel-carousel.is-ready .apparel-carousel__nav {
  display: flex;
}
.apparel-carousel__btn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--asp-border);
  border-radius: 999px;
  background: var(--asp-bg, #fff);
  color: var(--asp-text, #1a1a1a);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.apparel-carousel__btn:disabled {
  cursor: default;
  opacity: 0.35;
}
.apparel-carousel__btn:focus-visible {
  outline: 2px solid var(--asp-accent);
  outline-offset: 2px;
}
.apparel-carousel__status {
  min-width: 42px;
  text-align: center;
  font-size: 12px;
  color: var(--asp-muted);
}

/* Combined info — tabs / stacked */
.apparel-tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.apparel-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--asp-border);
  margin-bottom: 0;
}
.apparel-tabs__nav label {
  position: relative;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--asp-muted);
  user-select: none;
  border-radius: 8px 8px 0 0;
  transition: color 0.2s ease, background-color 0.2s ease;
}
/* Animated active-tab underline: grows in when the tab is selected (the
   :checked trigger lives in the block's scoped CSS). Modern feel, no JS. */
.apparel-tabs__nav label::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--asp-accent);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.apparel-tabs__nav label:hover {
  color: inherit;
  background-color: color-mix(in srgb, var(--asp-accent) 7%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .apparel-tabs__nav label::after {
    transition: none;
  }
}
.apparel-info__h {
  margin: 0 0 8px;
}
/* Section heading / tab icons — inline SVG line icons, follow currentColor. */
.apparel-section-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  margin-right: 0.4em;
  display: inline-block;
  flex: none;
}
.apparel-tabs__panel,
.apparel-info .apparel-tabs__panel + .apparel-tabs__panel,
.apparel-info:not(.apparel-tabs) .apparel-tabs__panel + .apparel-tabs__panel {
  margin-top: 18px;
}
/* Gentle tab switch: the newly shown panel fades in only — no vertical movement,
   so switching tabs never nudges the layout. Restarts whenever a panel goes
   display:none -> block (initial load + every tab change). No JS. */
@keyframes asp-tab-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.apparel-tabs__panels > .apparel-tabs__panel {
  animation: asp-tab-in 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .apparel-tabs__panels > .apparel-tabs__panel {
    animation: none;
  }
}

/* Measurement highlight (Feature 2) */
.apparel-size__table tr.is-recommended td,
.apparel-size__table tr.is-recommended th {
  background: color-mix(in srgb, var(--asp-accent) 14%, transparent);
  font-weight: 700;
}
.apparel-measure-me {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--asp-border, rgba(0, 0, 0, 0.14));
  border-radius: 6px;
}
/* Finder layout. Container-query driven so it responds to the BLOCK's width,
   not the viewport (the block can sit in a narrow theme column). Mobile/tablet
   (< 720cqi): figure LEFT | inputs RIGHT from the smallest widths — never stack
   the figure above the inputs (a full-width square figure reads as broken /
   endlessly tall on phones — 2026-07-08 owner request) — and the table drops
   below at 100% width. Desktop (≥ 720cqi): three columns — square figure |
   narrow inputs | size table. Hover/focus a row reveals that measurement's
   mark + caption on the figure. */
.apparel-measure-me {
  container-type: inline-size;
}
.apparel-measure-me__layout {
  display: grid;
  grid-template-columns: minmax(88px, 40%) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
.apparel-measure-me__layout .apparel-size__scroll,
.apparel-measure-me__layout .apparel-measure-me__tablecol {
  grid-column: 1 / -1;
}
@container (min-width: 720px) {
  /* Figure + inputs together take ~45% of the block; the table fills the
     remaining ~55%. Below this the table would be squeezed into ~55% and
     scroll, so tablets stay on the 2-col + full-width-table layout. */
  .apparel-measure-me__layout {
    grid-template-columns: minmax(0, 18%) minmax(0, 26%) minmax(0, 1fr);
  }
  .apparel-measure-me__layout .apparel-size__scroll,
  .apparel-measure-me__layout .apparel-measure-me__tablecol {
    grid-column: auto;
  }
}
/* 靴・ブラなど finder のないチャート: wide → diagram LEFT | table RIGHT; the
   table wraps below at 100% width when the block is narrow (flex-wrap keeps
   this query-free). The mtype caption always takes its own full row. */
.apparel-measure-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: flex-start;
}
.apparel-measure-duo .apparel-measure-simple {
  flex: 1 1 180px;
  max-width: 240px;
  margin: 4px auto 4px;
}
.apparel-measure-duo .apparel-size__scroll {
  flex: 1 1 340px;
  min-width: 0;
}
.apparel-measure-duo .apparel-size__mtype,
.apparel-measure-duo .apparel-size__tol {
  flex-basis: 100%;
  margin-top: 0;
}
/* Square figure (the photo's own white bg blends into the square); the name +
   instruction caption sits BELOW it in the same column, not overlaid. */
.apparel-measure-me__figcol {
  min-width: 0;
}
.apparel-measure-me__figure {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.apparel-measure-fig {
  display: block;
  width: 100%;
  height: 100%;
}
/* Merchant-uploaded custom figure (B4): reuse the compact diagram's img class,
   but fill the square box like the built-in figure does — the generic
   .apparel-measure-simple__img rule caps width at 200px/height:auto, which
   would float a small image inside this fluid-width column. contain, not
   cover: it's a measurement diagram — cropping loses content; the box's white
   background keeps the letterboxing clean (same convention as model photos). */
.apparel-measure-me__figure .apparel-measure-simple__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.apparel-measure-fig [data-asp-fig] {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.apparel-measure-me[data-asp-active="chest"] [data-asp-fig="chest"],
.apparel-measure-me[data-asp-active="waist"] [data-asp-fig="waist"],
.apparel-measure-me[data-asp-active="hip"] [data-asp-fig="hip"],
.apparel-measure-me[data-asp-active="length"] [data-asp-fig="length"],
.apparel-measure-me[data-asp-active="sleeve"] [data-asp-fig="sleeve"],
.apparel-measure-me[data-asp-active="inseam"] [data-asp-fig="inseam"] {
  opacity: 1;
}
.apparel-measure-me__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.apparel-measure-me__row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: text;
}
.apparel-measure-me__lbl {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  font-weight: 600;
}
.apparel-measure-me__row input {
  flex: 1 1 0;
  width: 66%;
  min-width: 0;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--asp-border, rgba(0, 0, 0, 0.3));
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  /* Never below 16px → iOS Safari won't zoom the page in on focus. */
  font-size: max(16px, 1em);
}
.apparel-measure-me__row input:focus {
  outline: none;
  border-bottom: 2px solid var(--asp-accent);
  margin-bottom: -1px;
}
.apparel-measure-me__unit {
  flex: 0 0 auto;
  min-width: 2em;
  font-size: 12px;
  opacity: 0.7;
}
.apparel-measure-me__actions {
  margin-top: 2px;
}
/* Fit preference (garment charts only): snug / regular / loose radios that
   change the body->garment ease used by the recommendation. */
.apparel-measure-me__pref {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px 12px;
  margin: 4px 0 2px;
  font-size: 13px;
}
.apparel-measure-me__pref-lbl {
  font-weight: 600;
  opacity: 0.85;
}
.apparel-measure-me__pref label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
/* How-to caption below the figure: the active measurement's name + instruction,
   switching with the focused input (same data-asp-active as the figure mark). */
.apparel-measure-me__guide {
  margin-top: 8px;
}
.apparel-measure-me__howto {
  display: none;
}
.apparel-measure-me[data-asp-active="chest"] [data-asp-howto="chest"],
.apparel-measure-me[data-asp-active="waist"] [data-asp-howto="waist"],
.apparel-measure-me[data-asp-active="hip"] [data-asp-howto="hip"],
.apparel-measure-me[data-asp-active="length"] [data-asp-howto="length"],
.apparel-measure-me[data-asp-active="sleeve"] [data-asp-howto="sleeve"],
.apparel-measure-me[data-asp-active="inseam"] [data-asp-howto="inseam"] {
  display: block;
}
/* Letter badge + measurement name on ONE line. */
.apparel-measure-me__howto-head {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  margin-bottom: 2px;
}
.apparel-measure-me__howto-name {
  font-weight: 700;
}
/* Larger badge (≈1.3×) with the letter centred in the circle. */
.apparel-size__colletter--lg {
  width: 20px;
  height: 20px;
  font-size: 13px;
  margin-right: 5px;
  vertical-align: 0;
  flex: 0 0 auto;
}
.apparel-measure-me__howto-desc {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.85;
}
/* 採寸図なし: モデル写真を出さず、測り方は全項目を常時表示の小リストにする
   （フォーカス連動の1件表示を上書き）。図が消えた figcol がそのままリスト列になる。 */
.apparel-measure-me--nofig .apparel-measure-me__figure {
  display: none;
}
.apparel-measure-me--nofig .apparel-measure-me__guide {
  margin-top: 0;
}
.apparel-measure-me--nofig .apparel-measure-me__howto {
  display: block;
}
.apparel-measure-me--nofig .apparel-measure-me__howto + .apparel-measure-me__howto {
  margin-top: 8px;
}
.apparel-measure-me__tip {
  margin: 10px 0 0;
  font-size: 12px;
  opacity: 0.7;
}
.apparel-measure-me__restored {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--asp-muted);
}
.apparel-measure-me__clear {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
/* Two buttons side by side in the inputs column: "find my size" + clear. */
.apparel-measure-me__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Recommendation box shown ABOVE the size table. Empty state = muted placeholder;
   an active result is bold + emphasised, with a small "estimate" note below. */
.apparel-measure-me__resultbox {
  border: 1.5px solid currentColor;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 10px;
}
.apparel-measure-me__result {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
}
.apparel-measure-me__result:not(.is-active) {
  font-weight: 500;
  opacity: 0.6;
}
.apparel-measure-me__resultnote {
  margin: 4px 0 0;
  font-size: 11px;
  opacity: 0.7;
}
/* Fit-aware nudge under the finder result (plan A, 2026-07-08): rendered only
   when the product has a runs-small/large signal (votes first, else the shop's
   hint) and revealed only while a recommendation is showing — the size itself
   is never changed, the copy just connects the two signals. */
.apparel-measure-me__skewnote {
  display: none;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
}
.apparel-measure-me__result.is-active ~ .apparel-measure-me__skewnote {
  display: block;
}
/* Static text styles moved out of info.liquid inline `style=` to reclaim the
   extension's liquid byte budget (CSS asset is not counted toward the 100 KiB cap). */
.apparel-measure-me__hint {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: 0.8;
}
.apparel-measure-me__privacy {
  margin: 6px 0 0;
  font-size: 12px;
  opacity: 0.65;
}
.apparel-model__cmt {
  margin-top: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.apparel-measure-me__clearbtn {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 4px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.8;
}
.apparel-measure-me__clearbtn:hover {
  opacity: 1;
}

/* How to measure (Feature 3) — one illustrated card per measurement point.
   Shown by default (no disclosure button) above the size table. */
/* Fit-finder figure overlay marks (rendered by apparel-measure-figure.liquid).
   The old how-to-measure card grid was removed in 2026-06, so only the SVG
   overlay classes below remain (mark / casing / band / tick). */
.apparel-howto__mark {
  fill: none;
  stroke: #cc4a4a;
  stroke-width: 2;
  stroke-dasharray: 5 3;
  /* The audience photos have different viewBox scales — keep the dashed
     line the same on-screen thickness on every card. */
  vector-effect: non-scaling-stroke;
}
/* White halo under the red line so it reads on the white tee and the khaki
   bottoms alike. */
.apparel-howto__casing {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
}
/* Translucent band: the area the measuring tape wraps (chest/waist/hip). */
.apparel-howto__band {
  fill: #cc4a4a;
  opacity: 0.12;
  stroke: none;
}
/* ⊢ / ⊣ end ticks: where a straight measurement starts and stops. */
.apparel-howto__tick {
  stroke: #cc4a4a;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* ==== Garment flat-lay diagram (実寸 charts) ============================
   Rendered in the finder's figure column while the shopper is in
   "measure a garment you own" mode (owner decision 2026-07: NOT above the
   size table — the __mtype caption alone explains the table in body mode):
   a static silhouette SVG asset (assets/apparel-garment-<category>.svg, kept
   OUT of the .liquid byte cap) + HTML overlay marks. Every left/top/width/height
   below is a % of the 240×240 viewBox of THAT category's SVG art — if you
   redraw a silhouette, re-derive its coordinates against the art.
   The mark letters come from the table's DYNAMIC column letters (data-l),
   so a mark only renders for columns that exist and never drifts from the
   table header. Only keys positioned per category are shown (the rest stay
   display:none — e.g. inseam on a top). */
.asp-gd {
  position: relative;
  width: min(240px, 100%);
  aspect-ratio: 1;
  margin: 0 auto 10px;
}
.asp-gd img {
  width: 100%;
  height: 100%;
  display: block;
}
.asp-gd__m {
  display: none;
  position: absolute;
}
.asp-gd__m::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 dashed #cc4a4a;
  border-top-width: 2px;
}
.asp-gd__m[data-asp-gm="length"]::before,
.asp-gd__m[data-asp-gm="inseam"]::before {
  border-top-width: 0;
  border-left-width: 2px;
}
.asp-gd__m::after {
  content: attr(data-l);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-115%, -50%);
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cc4a4a;
  color: #fff;
  font: 700 10px/1 sans-serif;
}
.asp-gd__m[data-asp-gm="length"]::after,
.asp-gd__m[data-asp-gm="inseam"]::after {
  left: 50%;
  top: 0;
  transform: translate(-50%, -115%);
}
/* Sleeve runs diagonally along the flat sleeve: the line starts at the CUFF
   (badge there, clear of the length badge at the collar) and rotates toward
   the shoulder; the badge counter-rotates so the letter stays upright. */
.asp-gd__m[data-asp-gm="sleeve"] {
  transform: rotate(var(--gdr, 0deg));
  transform-origin: left center;
}
.asp-gd__m[data-asp-gm="sleeve"]::after {
  transform: translate(-115%, -50%) rotate(calc(var(--gdr, 0deg) * -1));
}
.asp-gd--top [data-asp-gm="chest"]  { display: block; left: 32.5%; top: 41%; width: 35%; }
.asp-gd--top [data-asp-gm="waist"]  { display: block; left: 32.5%; top: 62%; width: 35%; }
.asp-gd--top [data-asp-gm="hip"]    { display: block; left: 32.5%; top: 83%; width: 35%; }
.asp-gd--top [data-asp-gm="length"] { display: block; left: 37.5%; top: 24%; height: 61.7%; }
.asp-gd--top [data-asp-gm="sleeve"] { display: block; left: 16.7%; top: 45%; width: 23.8%; --gdr: -53.5deg; }
/* Hoodie shares the crew body of apparel-garment-top (hood + pocket are cosmetic),
   so the measurement marks match top exactly. */
.asp-gd--hoodie [data-asp-gm="chest"]  { display: block; left: 32.5%; top: 41%; width: 35%; }
.asp-gd--hoodie [data-asp-gm="waist"]  { display: block; left: 32.5%; top: 62%; width: 35%; }
.asp-gd--hoodie [data-asp-gm="hip"]    { display: block; left: 32.5%; top: 83%; width: 35%; }
.asp-gd--hoodie [data-asp-gm="length"] { display: block; left: 37.5%; top: 24%; height: 61.7%; }
.asp-gd--hoodie [data-asp-gm="sleeve"] { display: block; left: 16.7%; top: 45%; width: 23.8%; --gdr: -53.5deg; }
/* Collar (polo/shirt/blouse) + cardigan share the crew body of top — same marks. */
.asp-gd--collar [data-asp-gm="chest"]  { display: block; left: 32.5%; top: 41%; width: 35%; }
.asp-gd--collar [data-asp-gm="waist"]  { display: block; left: 32.5%; top: 62%; width: 35%; }
.asp-gd--collar [data-asp-gm="hip"]    { display: block; left: 32.5%; top: 83%; width: 35%; }
.asp-gd--collar [data-asp-gm="length"] { display: block; left: 37.5%; top: 24%; height: 61.7%; }
.asp-gd--collar [data-asp-gm="sleeve"] { display: block; left: 16.7%; top: 45%; width: 23.8%; --gdr: -53.5deg; }
.asp-gd--cardigan [data-asp-gm="chest"]  { display: block; left: 32.5%; top: 41%; width: 35%; }
.asp-gd--cardigan [data-asp-gm="waist"]  { display: block; left: 32.5%; top: 62%; width: 35%; }
.asp-gd--cardigan [data-asp-gm="hip"]    { display: block; left: 32.5%; top: 83%; width: 35%; }
.asp-gd--cardigan [data-asp-gm="length"] { display: block; left: 37.5%; top: 24%; height: 61.7%; }
.asp-gd--cardigan [data-asp-gm="sleeve"] { display: block; left: 16.7%; top: 45%; width: 23.8%; --gdr: -53.5deg; }
/* Sleeveless (tank/cami): no sleeve mark. */
.asp-gd--sleeveless [data-asp-gm="chest"]  { display: block; left: 33%; top: 43%; width: 34%; }
.asp-gd--sleeveless [data-asp-gm="waist"]  { display: block; left: 33%; top: 62%; width: 34%; }
.asp-gd--sleeveless [data-asp-gm="hip"]    { display: block; left: 33%; top: 83%; width: 34%; }
.asp-gd--sleeveless [data-asp-gm="length"] { display: block; left: 37.5%; top: 24%; height: 61.7%; }
/* Shorts: short-leg bottom — waist/hip/length/inseam. */
.asp-gd--shorts [data-asp-gm="waist"]  { display: block; left: 30%; top: 22%; width: 40%; }
.asp-gd--shorts [data-asp-gm="hip"]    { display: block; left: 27%; top: 40%; width: 46%; }
.asp-gd--shorts [data-asp-gm="length"] { display: block; left: 28%; top: 19%; height: 44%; }
.asp-gd--shorts [data-asp-gm="inseam"] { display: block; left: 45%; top: 44%; height: 19%; }
.asp-gd--outerwear [data-asp-gm="chest"]  { display: block; left: 34%; top: 50%; width: 32%; }
.asp-gd--outerwear [data-asp-gm="waist"]  { display: block; left: 34%; top: 62.5%; width: 32%; }
.asp-gd--outerwear [data-asp-gm="hip"]    { display: block; left: 34%; top: 85%; width: 32%; }
.asp-gd--outerwear [data-asp-gm="length"] { display: block; left: 37.5%; top: 25%; height: 63.3%; }
.asp-gd--outerwear [data-asp-gm="sleeve"] { display: block; left: 19.6%; top: 76.7%; width: 49.2%; --gdr: -78.8deg; }
.asp-gd--bottom [data-asp-gm="waist"]  { display: block; left: 32.5%; top: 17%; width: 35%; }
.asp-gd--bottom [data-asp-gm="hip"]    { display: block; left: 29%; top: 36%; width: 42%; }
.asp-gd--bottom [data-asp-gm="length"] { display: block; left: 25.5%; top: 15%; height: 72.5%; }
.asp-gd--bottom [data-asp-gm="inseam"] { display: block; left: 45.8%; top: 49.2%; height: 38.3%; }
.asp-gd--dress [data-asp-gm="chest"]  { display: block; left: 36%; top: 40%; width: 28%; }
.asp-gd--dress [data-asp-gm="waist"]  { display: block; left: 38.3%; top: 51.7%; width: 23.3%; }
.asp-gd--dress [data-asp-gm="hip"]    { display: block; left: 32.5%; top: 66.7%; width: 35%; }
.asp-gd--dress [data-asp-gm="length"] { display: block; left: 36.7%; top: 22.5%; height: 65.8%; }
.asp-gd--dress [data-asp-gm="sleeve"] { display: block; left: 25.4%; top: 39.6%; width: 17.3%; --gdr: -62.8deg; }
.asp-gd--skirt [data-asp-gm="waist"]  { display: block; left: 35.8%; top: 24.2%; width: 28.3%; }
.asp-gd--skirt [data-asp-gm="hip"]    { display: block; left: 32.3%; top: 41.7%; width: 35.4%; }
.asp-gd--skirt [data-asp-gm="length"] { display: block; left: 39.2%; top: 21.7%; height: 65%; }

/* Finder input-mode toggle (garment charts only): "measure yourself" vs
   "measure a garment you own". The radios are DIRECT children of
   .apparel-measure-me placed BEFORE __layout — the same :checked ~ sibling
   constraint as the size-chart toggles (do not nest them into the labels);
   the segmented labels render at the top of __fields. Garment mode swaps the
   figcol's model photo + body captions for the flat-lay diagram and hides the
   fit-preference radios (the owned garment already encodes the preference;
   finder JS also drops the ease). */
.apparel-measure-me__mode-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.apparel-measure-me__mode {
  display: inline-flex;
  border: 1px solid var(--asp-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
  margin-bottom: 10px;
}
.apparel-measure-me__mode label {
  padding: 6px 12px;
  cursor: pointer;
  width: 50%;
  user-select: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media (pointer: coarse) {
  .apparel-measure-me__mode label {
    min-height: 44px;
    padding: 10px 14px;
  }
}
.apparel-measure-me__mode-radio--body:checked ~ .apparel-measure-me__layout .apparel-measure-me__mode label[for$="-b"],
.apparel-measure-me__mode-radio--garment:checked ~ .apparel-measure-me__layout .apparel-measure-me__mode label[for$="-g"] {
  background: var(--asp-accent);
  color: #fff;
}
.apparel-measure-me__gfig {
  display: none;
}
/* mode help now sits as a standalone figcol child BELOW the guide captions
   (2026-07-08: moved out of __gfig so guide reads first, help last). Only shown
   in garment mode — the __gfig display rule no longer carries it. */
.apparel-measure-me__modehelp {
  display: none;
  margin: 8px 0 0;
  font-size: 12px;
  opacity: 0.8;
}
.apparel-measure-me__mode-radio--garment:checked ~ .apparel-measure-me__layout .apparel-measure-me__modehelp {
  display: block;
}
.apparel-measure-me__mode-radio--garment:checked ~ .apparel-measure-me__layout .apparel-measure-me__figure,
.apparel-measure-me__mode-radio--garment:checked ~ .apparel-measure-me__layout .apparel-measure-me__pref {
  display: none;
}
.apparel-measure-me__mode-radio--garment:checked ~ .apparel-measure-me__layout .apparel-measure-me__gfig {
  display: block;
}
/* The focus-follow howto captions stay visible in garment mode, but their
   instruction text swaps: the body-measuring text (howto.*) hides and the
   flat-lay garment text (howto_g.*, rendered only on garment charts) shows.
   The figcol is a flex column so the flat-lay diagram (gfig, order -1) sits
   ABOVE the captions, mirroring photo-above-captions in body mode. */
.apparel-measure-me__figcol {
  display: flex;
  flex-direction: column;
}
.apparel-measure-me__gfig {
  order: -1;
}
.apparel-measure-me__howto-desc--g {
  display: none;
}
.apparel-measure-me__mode-radio--garment:checked ~ .apparel-measure-me__layout .apparel-measure-me__howto-desc:not(.apparel-measure-me__howto-desc--g) {
  display: none;
}
.apparel-measure-me__mode-radio--garment:checked ~ .apparel-measure-me__layout .apparel-measure-me__howto-desc--g {
  display: block;
}
/* Focus/hover highlight: dim every diagram mark except the active input's
   (mirrors the model-photo mark reveal; data-asp-active is set by finder JS). */
.apparel-measure-me[data-asp-active] .asp-gd__m {
  opacity: 0.3;
  transition: opacity 0.15s;
}
.apparel-measure-me[data-asp-active="chest"] .asp-gd__m[data-asp-gm="chest"],
.apparel-measure-me[data-asp-active="waist"] .asp-gd__m[data-asp-gm="waist"],
.apparel-measure-me[data-asp-active="hip"] .asp-gd__m[data-asp-gm="hip"],
.apparel-measure-me[data-asp-active="length"] .asp-gd__m[data-asp-gm="length"],
.apparel-measure-me[data-asp-active="sleeve"] .asp-gd__m[data-asp-gm="sleeve"],
.apparel-measure-me[data-asp-active="inseam"] .asp-gd__m[data-asp-gm="inseam"] {
  opacity: 1;
}