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

.home-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;
}
.home-block h2,
.home-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 .home-block — never leaks to the theme. */
.home-block,
.home-block *,
.home-block *::before,
.home-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. */
.home-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". */
.home-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. */
.home-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. */
.home-skin--plain {
  border-top: 2px solid var(--asp-accent);
  padding-top: 18px;
}

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

/* Size chart */
.home-size__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.home-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). */
.home-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;
}
.home-size__panel {
  margin-top: 14px;
  /* No inner box — apparel's equivalent panel is padding: 0 with no border, so
     the tab content sits flush and the only frame is the block's own skin. */
  padding: 0;
  background: var(--asp-bg, var(--asp-surface));
  /* Query container for anything in the dimensions panel that is NOT inside
     the measure card (which declares its own, and is the nearer container for
     its own three columns): the block can sit in a narrow theme column, so
     layout here must react to the PANEL's width, not the viewport. A
     @container query only sees an ancestor that declares a container-type. */
  container-type: inline-size;
}
/* Horizontal scroll container so the 11-column table stays readable on
   phones; the size-label column stays pinned while measurements scroll. */
.home-size__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.home-size__scroll .home-size__table thead th:first-child,
.home-size__scroll .home-size__table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
}
/* Body-vs-garment measurement caption under the table (home-size-table
   `mtype`): the #1 shopper confusion is "is 100cm the garment or my chest?" */
.home-size__mtype {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--asp-text, #1a1a1a);
  opacity: 0.72;
}
.home-size__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}
.home-size__table th,
.home-size__table td {
  border-bottom: 1px solid var(--asp-border);
  padding: 9px 10px;
  text-align: center;
}
.home-size__table thead th {
  background: rgba(0, 0, 0, 0.035);
  font-weight: 600;
  border-bottom-width: 2px;
}
.home-size__table tbody tr:hover td,
.home-size__table tbody tr:hover th {
  background: rgba(0, 0, 0, 0.02);
}
.home-size__table th[scope="row"] {
  background: transparent;
  text-align: left;
}
/* Sticky cells need an opaque background or scrolled columns show through. */
.home-size__scroll .home-size__table th[scope="row"] {
  background: var(--asp-bg, var(--asp-surface));
}
.home-size__scroll .home-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));
}
.home-size__scroll .home-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) {
  .home-size__table {
    font-size: 12px;
  }
  .home-size__table th,
  .home-size__table td {
    padding: 7px 8px;
    white-space: nowrap;
  }
}
.home-size__unit-toggle {
  display: inline-flex;
  border: 1px solid var(--asp-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
  margin-right: 8px;
}
.home-size__unit-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) {
  .home-size__unit-toggle label {
    min-height: 44px;
    padding: 10px 14px;
  }
  .home-feedback__btn,
  .home-feedback__chip {
    min-height: 44px;
  }
  .home-tabs__nav label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .home-measure-me__clearbtn,
  .home-measure-me__row input {
    min-height: 44px;
  }
  .home-modal__close {
    width: 44px;
    height: 44px;
  }
  .home-modal__open--link,
  .home-feedback__skip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
.home-size__radio,
.home-size__unit-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.home-size__unit-toggle input:checked + label {
  background: var(--asp-accent);
  color: #fff;
}
.home-size__unit-toggle input:checked + label > span {
  color: #fff;
}
/* The cm/inch + region toggles must wrap (not overflow) in a narrow slot. */
.home-size__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Materials */
.home-materials__origin {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.75;
}

/* Care */
.home-care__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.home-care__item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 84px;
  text-align: center;
}
.home-care__label {
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.75;
}
.home-care__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 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). */
.home-model__list {
  display: grid;
  /* Max 2 columns (1 when narrow): once the section is wide enough each column's
     min becomes half-minus-gap, so a third never fits — no container query. */
  grid-template-columns: repeat(auto-fit, minmax(max(180px, (100% - 16px) / 2), 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Separated, not boxed — apparel's language for a list of cards inside a tab. */
.home-model__card {
  position: relative;
  padding-bottom: 14px;
  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. */
.home-model__card > strong,
.home-model__info > strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
/* When a model has a photo: image 50% | info 50% on every breakpoint
   (PC / tablet / mobile). No photo = the plain card above, unchanged. */
.home-model__card--media {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.home-model__card--media .home-model__photo {
  flex: 1 1 170px;
  max-width: 100%;
}
/* THUMBNAIL only — note `.home-model__photo-btn`. The zoom overlay is a child of
   `.home-model__photo`, so a plain `... .home-model__photo img` also matched the
   lightbox photo, and at (0,2,1) it outranked `.home-lightbox__img` (0,1,0):
   the opened overlay inherited `max-height: 400px` and `object-fit: cover` and
   showed a full-width 400px band with the top and bottom of the room cropped
   off. Keep this selector on the button. */
.home-model__card--media .home-model__photo-btn img {
  display: block;
  /* Full element width + a fixed band (no aspect-ratio box) so portrait /
     landscape / square thumbnails all read at a consistent size. */
  width: 100%;
  min-height: 200px;
  max-height: 400px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--asp-radius);
}
.home-model__card--media .home-model__info {
  flex: 1 1 170px;
  min-width: 0;
}

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

/* Complete the look */
.home-outfit__note {
  margin: 0 0 12px;
  font-size: 13px;
  opacity: 0.8;
}
/* Each coordinate is its own spaced item: `.home-outfit__layout` is just the
   per-coordinate wrapper — it adds the gap BETWEEN consecutive coordinates so
   multiple looks read as distinct blocks. */
.home-outfit__layout + .home-outfit__layout {
  margin-top: 16px;
}
/* `.home-outfit__item` is the card itself: look photo beside the items list,
   in a bordered, padded box. Responds to the BLOCK's own width (not the viewport):
   2-up when the slot is wide enough, stacked when narrow (a narrow theme column
   never overflows). */
.home-outfit__item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: start;
  position: relative;
  padding-bottom: 14px;
}
.home-outfit__item--full {
  grid-template-columns: 1fr;
}
.home-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: 200px;
  max-height: 400px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--asp-radius);
}
.home-outfit__related {
  min-width: 0;
}
.home-outfit__related-h {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
}
/* Items: a 1-column vertical list of compact, tappable rows. */
.home-outfit__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-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;
}
.home-outfit__card:hover {
  background: color-mix(in srgb, var(--asp-accent) 8%, transparent);
  border-color: var(--asp-border);
}
.home-outfit__card:hover .home-outfit__title {
  text-decoration: underline;
}
.home-outfit__img {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  flex: 0 0 auto;
}
.home-outfit__img--empty {
  display: block;
}
.home-outfit__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-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;
}
.home-outfit__price {
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Size confidence badge */
.home-confidence {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.home-confidence__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.home-confidence__badge--good {
  background: #d4eddc;
  color: #0c5132;
}
.home-confidence__badge--warn {
  background: #ffe9c2;
  color: #5a4200;
}
.home-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. */
.home-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. */
.home-skin--serif .home-tabs__nav label,
.home-skin--serif .home-pd__h,
.home-skin--serif h3,
.home-skin--serif h4 {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}
.home-skin--sans .home-tabs__nav label,
.home-skin--sans .home-pd__h,
.home-skin--sans h3,
.home-skin--sans h4 {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.home-skin--upper .home-tabs__nav label,
.home-skin--upper .home-pd__h,
.home-skin--upper h3,
.home-skin--upper h4 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Compact how-to-measure diagram for shoe / bra charts (no model photo). */
.home-measure-simple {
  text-align: center;
  margin: 4px 0 12px;
}
.home-measure-simple__img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.home-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. */
.home-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;
}
.home-modal__open:hover,
.home-modal__open:focus-visible {
  opacity: 1;
}
.home-modal__open--button {
  padding: 8px 14px;
  border: 1px solid var(--asp-accent, #1a1a1a);
  border-radius: 8px;
}
.home-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. */
.home-block.home-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);
}
.home-block.home-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 749px) {
  .home-block.home-modal {
    padding: 22px 16px 12px;
  }
}
.home-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);
}
/* Inside the popup, the normally side-by-side layouts read better stacked:
   "Complete the look" shows the look photo on top with items in a 2-up grid
   below; each model card shows the photo on top with the fit info beneath. */
.home-modal .home-outfit__item {
  grid-template-columns: 1fr;
}
.home-modal .home-outfit__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.home-modal .home-model__card--media {
  flex-direction: column;
}
.home-modal .home-model__card--media .home-model__photo {
  flex: 0 0 auto;
  max-width: 100%;
}
.home-modal .home-model__card--media .home-model__info {
  flex: 1 1 auto;
  padding: 0 12px 12px;
}
.home-confidence__icon {
  font-weight: 700;
}
.home-confidence__count {
  font-size: 12px;
  opacity: 0.7;
}

/* Fit feedback (storefront) — one bar per answer (label / track / %) */
.home-feedback__rows {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 10px;
  margin: 8px 0;
}
.home-feedback__rowlabel {
  font-size: 13px;
}
.home-feedback__track {
  display: block;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: color-mix(in srgb, var(--asp-text, #1a1a1a) 10%, transparent);
}
.home-feedback__seg {
  display: block;
  height: 100%;
  border-radius: 5px;
  transition: width 0.25s ease;
}
.home-feedback__seg--tight { background: #ffd79d; }
.home-feedback__seg--just { background: #a3d4b3; }
.home-feedback__seg--loose { background: #9dc6ff; }
.home-feedback__rowpct {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
  text-align: right;
}
.home-feedback__vote {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.home-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;
}
.home-feedback__btn:disabled,
.home-feedback__chip:disabled,
.home-feedback__skip:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.home-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 */
.home-feedback__areas {
  margin-top: 12px;
}
.home-feedback__area-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.home-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;
}
.home-feedback__chip:hover {
  border-color: var(--asp-accent);
  background: color-mix(in srgb, var(--asp-accent) 8%, transparent);
}
.home-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. */
.home-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;
}
/* No card. apparel separates sub-sections with dotted hairlines drawn in the
   grid's own gaps — a box per column stacks two frames inside the block's own
   frame, which is the heaviness this removes. */
.home-pd__sub {
  position: relative;
  padding: 8px;
}
.home-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;
}
.home-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;
}
/* No divider between these two. Their list IS `.home-carousel__track` — a
   scroll-snap row from first paint — so the cards are side-by-side slides with
   a gap, never a vertical stack with seams to draw. apparel ends up in the same
   place by resetting the seam once its carousel is ready; home never draws it,
   which also keeps `.is-ready` free of layout (the CLS rule in
   storefront-a11y.test.ts). Matching apparel here means no box AND no rule. */
.home-pd__h {
  margin: 0 0 8px;
  font-size: 14px;
}

/* Per-product FAQ — always expanded, Q/A badges, no JS */
.home-faq__item {
  padding: 12px 0;
  border-bottom: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
}
.home-faq__item:last-child {
  border-bottom: 0;
}
.home-faq__q,
.home-faq__a {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.home-faq__q {
  font-weight: 600;
}
.home-faq__a {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.home-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;
}
.home-faq__badge--q {
  background: var(--asp-accent);
  color: #fff;
}
.home-faq__badge--a {
  background: color-mix(in srgb, var(--asp-accent) 14%, transparent);
  color: var(--asp-accent);
}
/* Desktop + inline (non-modal) tabs only: Q&A sits in 2 columns with a 25px
   gap, regardless of how many entries there are. Tablet/mobile (<990px) and any
   modal (including a 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. Transcribed from apparel. */
@media (min-width: 990px) {
  .home-tabs:not(.home-modal) .home-faq {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
  }
  .home-tabs:not(.home-modal) .home-faq .home-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. */
  .home-tabs:not(.home-modal) .home-faq:has(.home-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). */
  .home-tabs:not(.home-modal) .home-faq .home-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;
  }
}

/* Combined info — tabs / stacked */
.home-tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.home-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--asp-border);
  /* 0, not 14px: the gap under the strip is the PANEL's margin-top, exactly as
     in apparel. Setting it in both places double-spaced the first panel. */
  margin-bottom: 0;
}
.home-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. */
.home-tabs__nav label::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  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);
}
.home-tabs__nav label:hover {
  color: inherit;
  background-color: color-mix(in srgb, var(--asp-accent) 7%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .home-tabs__nav label::after {
    transition: none;
  }
}
.home-info__h {
  margin: 0 0 8px;
}
/* Section heading / tab icons — inline SVG line icons, follow currentColor. */
.home-section-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  margin-right: 0.4em;
  display: inline-block;
  flex: none;
}
.home-tabs__panel,
.home-info .home-tabs__panel + .home-tabs__panel,
.home-info:not(.home-tabs) .home-tabs__panel + .home-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;
  }
}
.home-tabs__panels > .home-tabs__panel {
  animation: asp-tab-in 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .home-tabs__panels > .home-tabs__panel {
    animation: none;
  }
}

/* Measurement highlight (Feature 2) */
.home-size__table tr.is-recommended td,
.home-size__table tr.is-recommended th {
  background: color-mix(in srgb, var(--asp-accent) 14%, transparent);
  font-weight: 700;
}
/* THE dimensions card, apparel's size-guide finder shape. The tab renders it
   TWICE (2026-07-29): zone 1 〈設置〉 without `.home-clearance` = figure | table,
   and — only when the boxes need more than a standard doorway — zone 2
   〈搬入・梱包〉 with it = box figure + guide | doorway questions | verdict +
   packaged table. Container-query driven so each responds to the BLOCK's width,
   not the viewport (the block can sit in a narrow theme column). */
.home-measure-me {
  container-type: inline-size;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--asp-border, rgba(0, 0, 0, 0.14));
  border-radius: 6px;
}
.home-measure-me__layout {
  display: grid;
  /* Very narrow (phone / narrow 2-col slot): stack figure, inputs and table so
     the inputs always get the full width — never squeezed beside the figure. */
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
.home-measure-me__layout .home-measure-me__tablecol {
  grid-column: 1 / -1;
}
/* Every column may be narrower than its content. `1fr` is minmax(auto, 1fr),
   and a grid item's auto minimum is its min-content width — so the packaged
   table (five columns that cannot wrap) made the phone's single track as wide
   as the table, the figure sharing that track grew with it, and the page
   scrolled sideways (619 px in a 390 px viewport on the demo sectional,
   2026-09-02). With the minimum released, `.home-size__tablewrap`'s
   overflow-x: auto finally gets to do its job and the TABLE scrolls inside
   the card. Guard = storefront-mobile-width.test.ts. */
.home-measure-me__layout > * {
  min-width: 0;
}
/* Mid: figure | inputs on row 1 (figure can shrink), table full-width below. */
@container (min-width: 380px) {
  .home-measure-me__layout {
    grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
  }
  /* No packaged boxes = no doorway check = no middle column: the card is the
     old figure | table split, and the table takes the second column instead of
     dropping to its own row (which would leave the figure alone on row 1). */
  .home-measure-me:not(.home-clearance) .home-measure-me__layout {
    grid-template-columns: minmax(140px, 34%) minmax(0, 1fr);
  }
  .home-measure-me:not(.home-clearance) .home-measure-me__layout .home-measure-me__tablecol {
    grid-column: auto;
  }
}
/* Wide: the full three columns. Higher than the old 560px because the table
   moved INSIDE the card — below ~720px it would be squeezed into a third of
   the block and scroll horizontally, so tablets keep the 2-col + full-width
   table layout. Same reasoning (and the same number) as apparel's finder. */
@container (min-width: 720px) {
  .home-measure-me__layout {
    grid-template-columns: minmax(0, 21%) minmax(0, 24%) minmax(0, 1fr);
  }
  .home-measure-me__layout .home-measure-me__tablecol {
    grid-column: auto;
  }
}
/* Figure column: the category line drawing (or, in the 搬入 view, the box
   drawing) with the how-to cards below it. */
.home-measure-me__figcol {
  min-width: 0;
}
/* An unrecognized category (a translated `category` value — see info.liquid's
   `cat_ok`) omits the figure column entirely rather than draw the wrong
   category. Without this, `.home-measure-me__tablecol` would auto-place into
   the figure's narrow first track (34% at 380px, 21% at 720px) instead of
   taking the row — the same layout, now with only one child. Higher
   specificity than every grid-template-columns rule above (the zone-1
   `:not(.home-clearance)` one included) so it wins at every container-query
   breakpoint, collapsing back to a single full-width column. Zone 2's figcol
   (the box drawing) never depends on category, so :has() never matches there
   and this rule is a no-op for it. */
.home-measure-me:not(.home-clearance) .home-measure-me__layout:not(:has(.home-measure-me__figcol)) {
  grid-template-columns: 1fr;
}
/* :has()-free fallback belt: a browser without :has() support treats the
   whole selector above as invalid and drops the rule (CSS has no partial
   parse — the ":not(:has(...))" argument fails to parse, not just the
   :has() part), silently reproducing the narrow-first-track bug at 380px
   and 720px. This doesn't need :has() — the DOM already has only one child
   when the figure is gone — so :only-child catches the same case a second,
   independent way. `1 / -1` spans the row regardless of how many tracks the
   current breakpoint's grid-template-columns defines (2 at 380px, 3 at
   720px), so one rule covers both. Costs nothing against the Liquid budget:
   this file is CSS. */
.home-measure-me:not(.home-clearance) .home-measure-me__layout > .home-measure-me__tablecol:only-child {
  grid-column: 1 / -1;
}
.home-measure-me__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.home-measure-me__row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: text;
}
.home-measure-me__lbl {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  font-weight: 600;
}
.home-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);
}
.home-measure-me__row input:focus {
  outline: none;
  border-bottom: 2px solid var(--asp-accent);
  margin-bottom: -1px;
}
.home-measure-me__unit {
  flex: 0 0 auto;
  min-width: 2em;
  font-size: 12px;
  opacity: 0.7;
}
/* How-to cards under the route sketch: the focused input's card, switching
   with `data-asp-active` (see the reveal rules below). */
.home-measure-me__guide {
  margin-top: 8px;
}
/* One card at a time — but ONLY from 380px up, which is exactly where the
   guide moves BESIDE the fields (see the layout query above). Below that the
   guide stacks ABOVE the inputs, so hiding four of the five cards would leave
   a phone shopper with no guidance for the route they are typing into. Same
   reasoning as the no-JS case: every card stays readable by default, and only
   a layout that puts the card next to the field earns the narrowing.

   Both rules are 0-3-0, so source order decides — keep the hide BEFORE the
   reveal list. */
@container (min-width: 380px) {
  .home-measure-me[data-asp-active] .home-measure-me__howto {
    display: none;
  }
  /* Keys = the doorway-check route prefixes home-info.js writes
     (door / corner / elev / car / stair), NOT the verdict-leg names. */
  .home-measure-me[data-asp-active="door"] [data-asp-howto="door"],
  .home-measure-me[data-asp-active="corner"] [data-asp-howto="corner"],
  .home-measure-me[data-asp-active="elev"] [data-asp-howto="elev"],
  .home-measure-me[data-asp-active="car"] [data-asp-howto="car"],
  .home-measure-me[data-asp-active="stair"] [data-asp-howto="stair"] {
    display: block;
  }
}
/* Letter badge + measurement name on ONE line. */
.home-measure-me__howto-head {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  margin-bottom: 2px;
}
.home-measure-me__howto-name {
  font-weight: 700;
}
/* Larger badge (≈1.3×) with the letter centred in the circle. */
.home-size__colletter--lg {
  width: 20px;
  height: 20px;
  font-size: 13px;
  margin-right: 5px;
  vertical-align: 0;
  flex: 0 0 auto;
}
.home-measure-me__howto-desc {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.85;
}
.home-measure-me__howto + .home-measure-me__howto {
  margin-top: 8px;
}
.home-measure-me__howto-desc + .home-measure-me__howto-desc {
  margin-top: 3px;
}
/* Route picker: which parts of the path this shopper actually has. The pills
   are BUILT BY home-info.js (labelled from the how-to card headings, so the
   picker costs no locale key and no Liquid), and every hiding rule below is
   scoped to `.is-picking` — a class only that script adds. With JS off the
   block renders and keeps all eleven fields and all five cards, exactly as
   before. Same progressive-enhancement contract as `.home-carousel.is-ready`. */
.home-measure-me__picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 -2px;
}
.home-measure-me__pill {
  appearance: none;
  border: 1px solid var(--asp-border, rgba(0, 0, 0, 0.3));
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 4px 11px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  cursor: pointer;
}
.home-measure-me__pill:hover {
  border-color: var(--asp-accent);
}
.home-measure-me__pill:focus-visible {
  outline: 2px solid var(--asp-accent, #1a1a1a);
  outline-offset: 2px;
}
/* Picked: accent fill + accent border. No weight change on purpose — the row
   of pills must not re-wrap as one is pressed. */
.home-measure-me__pill[aria-pressed="true"] {
  border-color: var(--asp-accent);
  background: color-mix(in srgb, var(--asp-accent) 14%, transparent);
  color: var(--asp-accent);
}
/* The unpicked legs and their cards. `data-asp-route` is written by the same
   script, so this can never match a server-rendered row. */
.home-measure-me.is-picking .home-measure-me__row[data-asp-route]:not(.is-on),
.home-measure-me.is-picking .home-measure-me__howto[data-asp-route]:not(.is-on) {
  display: none;
}
/* Groups the rest of the delivery path under the one question that always
   matters (the front-door width). */
.home-measure-me__subhead {
  margin: 4px 0 -4px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
}
/* Action row at the foot of the inputs column (just Clear today). */
.home-measure-me__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
/* Recommendation box shown ABOVE the size table. Empty state = muted placeholder;
   an active result is bold + emphasised, with a small "estimate" note below. */
.home-measure-me__resultbox {
  border: 1.5px solid currentColor;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 10px;
}
.home-measure-me__result {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
}
.home-measure-me__result:not(.is-active) {
  font-weight: 500;
  opacity: 0.6;
}
.home-measure-me__resultnote {
  margin: 4px 0 0;
  font-size: 11px;
  opacity: 0.7;
}
/* 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). */
.home-measure-me__privacy {
  margin: 6px 0 0;
  font-size: 12px;
  opacity: 0.65;
}
.home-model__cmt {
  margin-top: 6px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.home-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;
}
.home-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 home-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). */
.home-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. */
.home-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). */
.home-howto__band {
  fill: #cc4a4a;
  opacity: 0.12;
  stroke: none;
}
/* ⊢ / ⊣ end ticks: where a straight measurement starts and stops. */
.home-howto__tick {
  stroke: #cc4a4a;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* ---- Home vertical additions (dimensions figure / doorway-fit / assembly /
   firmness / 3-axis feedback) — appended 2026-07, Phase 3. ---- */

/* The dimension tables wrap in `.home-size__scroll` (top of this file), which
   also pins the size-label column while the measurements scroll on a phone.
   A `home-size__tablewrap` class carried only overflow-x here until
   2026-09-02, so the sticky column that apparel's port intended never
   applied — the Liquid now uses the class the CSS was written for. */
.home-size__order-note { font-size: 12px; opacity: .72; margin-left: auto; align-self: center; }

/* 設置 → 搬入: two zones down the page, not two views behind a toggle
   (2026-07-29). Zone 1 is the piece where it will stand; zone 2 is what arrives
   at the door, and it only exists when the delivery is a real question (the
   most demanding box needs more than a 70 cm opening — gated server-side in
   info.liquid). Below that threshold the zone is replaced by ONE reassuring
   sentence, so nobody measures a stairwell for a parcel.
   The heading that opens zone 2, sized between the tab label and a card's own
   `<strong>` heads, so the two zones read as one narrative rather than two
   unrelated cards. */
.home-size__zoneh + .home-measure-me {
  margin-top: 8px;
}
.home-size__zoneh {
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
/* The gate's other branch. Quiet, one line, no box — it is an answer, not a
   task, and must not look like something to act on. */
.home-size__fits {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.8;
}
/* Zone 2's answer, printed ABOVE its questions: the opening the boxes need.
   The number is the loud part; the label rides along quietly. */
.home-measure-me__need {
  margin: -2px 0 0;
  font-size: 12.5px;
  opacity: 0.8;
}
.home-measure-me__need b {
  font-size: 15px;
  font-weight: 700;
  opacity: 1;
  white-space: nowrap;
}
/* Packaged-box line drawing: same stroke conventions as the category figures,
   kept here rather than as SVG presentation attributes (the block's Liquid is
   the file with the 100 KiB budget; this stylesheet is not). */
.home-size__boxfig { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.home-fig { position: relative; }
.home-fig__stage { position: relative; border-radius: 10px; padding: 8px; background: var(--asp-bg, #fff); }
.home-fig__svg { display: block; width: 100%; height: auto; }
/* The illustrations are rendered on white; multiply drops that white into the
   card's own background, so a tinted brand colour never shows a white plate.
   On the default #fff it is a no-op. The arrows are drawn OUTSIDE the image
   box (under it, beside it), so nothing has to fight the render for contrast. */
.home-fig__img { mix-blend-mode: multiply; }
/* The merchant's own figure. multiply exists to dissolve the near-white
   background of OUR clay renders into a tinted card; run it over a real photo
   and the whole picture crushes toward black. */
.home-fig__img--own { mix-blend-mode: normal; }
/* Dark card (home-skin--figplate, decided in Liquid from the merchant's own
   background colour): multiply against a dark surface crushes the near-white
   render to black, so the figure sits on an explicit white plate with normal
   blending instead. The badge circle is forced to ink because the plate is
   known-white — a merchant who picked a light accent for a dark theme would
   otherwise get white-on-white badges. */
.home-skin--figplate .home-fig__stage { background: #fff; }
.home-skin--figplate .home-fig__img { mix-blend-mode: normal; }
.home-skin--figplate .home-fig__badge circle { fill: #1a1a1a; }
.home-fig__badge circle { fill: var(--asp-accent, #1a1a1a); stroke: none; }
.home-fig__badge text { fill: #fff; stroke: none; font-size: 7px; font-weight: 700; text-anchor: middle; font-family: inherit; }

/* `.home-clearance` = the same card WITH the doorway check in it (i.e. the
   sheet ships packaged boxes). It adds no box of its own — the card already
   has one — only what the check's copy needs.

   Two differences from apparel's finder, both from the copy: the fields ask
   eleven sentence-long questions ("Hallway width before the turn"), not
   one-word measures, so (a) the columns are rebalanced away from the figure and
   (b) each label sits ABOVE its input instead of beside it — side by side, a
   wrapped three-line label squeezes the number field to nothing. */
@container (min-width: 720px) {
  .home-clearance .home-measure-me__layout {
    grid-template-columns: minmax(0, 20%) minmax(0, 28%) minmax(0, 1fr);
  }
}
.home-clearance .home-measure-me__row {
  flex-wrap: wrap;
  gap: 2px 10px;
}
.home-clearance .home-measure-me__lbl {
  flex: 1 1 100%;
}
.home-clearance__title { display: block; font-size: 14px; }
/* .home-clearance__boxes is now a hidden data list (the 搬入 view prints the
   packaged sizes properly), so it carries no styling — a `display` here would
   beat the browser's [hidden] rule and put the empty <li>s back on the page. */
/* Verdict colour is keyed off the attribute the block writes, so it holds
   whatever classes the result paragraph carries. */
[data-asp-cl-result][data-verdict="pass"] { color: #2f9e6f; }
[data-asp-cl-result][data-verdict="tight"] { color: #b98900; }
[data-asp-cl-result][data-verdict="check"] { color: #c73f3f; }
/* Contact route, shown only for a "check" verdict (Tier 2.4).
   Keyed off the data-verdict the block already writes, so no JS is involved.
   This is a FOLLOWING-SIBLING selector: the link must stay after
   [data-asp-cl-result] inside .home-clearance, or it never appears. */
.home-clearance__contact { display: none; }
[data-asp-cl-result][data-verdict="check"] ~ .home-clearance__contact {
  display: inline-block;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--asp-accent, #1c2433);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-asp-cl-result][data-verdict="check"] ~ .home-clearance__contact:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Colour expectation (Tier 3.2). The standing caveat is deliberately quiet —
   it must not compete with the merchant's own variation note above it. */
.home-colornote {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  opacity: .72;
}
.home-varnote { display: block; font-size: 12px; line-height: 1.6; }
/* The merchant's free-text material story (Task G): unlabelled, quiet, sits
   between the labelled rows and the standing colour caveat — louder than the
   caveat (it is the merchant's own voice) but under the structured facts. */
.home-mpnote { margin: 10px 0 0; font-size: 12px; line-height: 1.65; opacity: .85; }

/* The door sketch that used to head the guide column was deleted 2026-07-29:
   the category drawing (設置) / box drawing (搬入) now sits at the top of that
   column, and two figures stacked in one column was one too many. */
.home-clearance__howto-lead { margin: 12px 0 4px; font-size: 12px; font-weight: 700; }
/* Per-leg answers: a "please check" always names WHICH leg is the problem. */
.home-clearance__legs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.home-clearance__legs li { font-size: 13px; }
.home-clearance__legs li::before { content: "・"; }
.home-clearance__legs li[data-verdict="pass"] { color: #2f9e6f; }
.home-clearance__legs li[data-verdict="tight"] { color: #b98900; }
.home-clearance__legs li[data-verdict="check"] { color: #c73f3f; }
.home-clearance__note { margin: 10px 0 0; font-size: 13px; opacity: .85; }

.home-assembly { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Assembly and delivery sit in the same 2-up grid shape as .home-pd__grid, so
   they get the same hairlines-in-the-gap treatment instead of a card each. */
.home-assembly__block { position: relative; padding: 8px; }
.home-assembly__block:nth-child(odd):not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* Half this grid's 16px gap. The .home-pd__grid pair use 7 for its 14px. */
  right: -8px;
  width: 0;
  border-right: 1px dotted var(--asp-border, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}
.home-assembly__block: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;
}
.home-assembly__h { display: block; margin-bottom: 8px; font-size: 14px; }
.home-assembly__note { margin: 8px 0 0; font-size: 13px; opacity: .85; }
.home-assembly__disclaimer { margin: 8px 0 0; font-size: 12px; opacity: .68; }
.home-assembly__link { color: var(--asp-accent, inherit); text-decoration: underline; }

.home-firmness { display: inline-flex; align-items: center; gap: 4px; }
.home-firmness__dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--asp-accent, #1a1a1a); opacity: .45; }
.home-firmness__dot.is-on { background: var(--asp-accent, #1a1a1a); opacity: 1; }
.home-firmness__lbl { margin-left: 6px; font-size: 11px; opacity: .68; }

.home-surfaces { display: grid; gap: 2px; }

.home-feedback__sumlbl { margin: 0 0 4px; font-size: 12px; opacity: .72; }
.home-feedback__axis { margin-top: 12px; }
.home-feedback__axislbl { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.home-feedback__axis .home-feedback__thanks { display: inline-block; font-size: 13px; }

.home-care__label { font-size: 11px; display: block; text-align: center; max-width: 76px; }
.home-care__icon { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px 6px 2px 0; }
.home-care__row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Key-spec strip ---------- */
/* Always-visible headline numbers above the tab bar (2026-07 research: never
   bury dimensions in a tab). Wraps to any width, no scroll. */
.home-keyspec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
}
.home-keyspec__item { display: grid; gap: 1px; }
.home-keyspec dt { font-size: 11px; letter-spacing: 0.02em; opacity: 0.65; }
.home-keyspec dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The opening width is the answer to "will it fit through my door" — give it
   the accent so the eye lands there. */
.home-keyspec__item--pass dd { color: var(--asp-accent, inherit); }
.home-keyspec__note { flex: 1 1 100%; font-size: 11px; opacity: 0.6; }
/* Badges sit in a dd sized for numbers — drop the weight/size back so a verdict
   reads as a label, and keep the sample size quiet beside it. */
.home-keyspec dd .home-size__badge { font-size: 12px; font-weight: 600; vertical-align: middle; }
.home-keyspec__n { font-size: 11px; font-weight: 400; opacity: 0.6; }
/* Unit toggle for the band. The panel's toggle is pure `:checked ~` CSS scoped
   to .home-size__panel, and the band is NOT inside that panel — so without
   these rules every product showed the cm value and the inch value one after
   the other. The band follows `data-unit` on the block root instead:
   server-rendered from the buyer's country (correct with no JS at all) and
   re-written by home-info.js when the shopper flips the toggle.

   The shipping weight in the 組立・配送 tab (.home-stdtag) is outside the panel
   for the same reason and joined these rules on 2026-08-24, when the box weight
   gained a lb display — without it a US shopper saw "18 kg 39.7 lb". The rules
   are inert on the other .home-stdtag rows, which carry no unit spans. */
[data-unit] .home-keyspec [data-asp-unit-inch],
[data-unit] .home-stdtag [data-asp-unit-inch] { display: none; }
[data-unit="inch"] .home-keyspec [data-asp-unit-inch],
[data-unit="inch"] .home-stdtag [data-asp-unit-inch] { display: inline; }
[data-unit="inch"] .home-keyspec [data-asp-unit-cm],
[data-unit="inch"] .home-stdtag [data-asp-unit-cm] { display: none; }
@media (max-width: 480px) {
  .home-keyspec { gap: 6px 16px; }
  .home-keyspec dd { font-size: 14px; }
}

/* Current variant's row in the dimension table (A5'): the specs follow the
   fabric/size the shopper picked, with no extra admin decision. Tinted rather
   than bordered so the table keeps its calm rhythm. */
.home-size__table tr[data-asp-row-current] {
  background: var(--asp-state-template-bg, rgba(47, 158, 111, 0.1));
}
.home-size__table tr[data-asp-row-current] th[scope="row"] { font-weight: 700; }

/* Derived "suits everyday use / kids & pets" badge — the app's own judgement
   from the abrasion rating + cleaning code, so it reads as a verdict, not a
   claim. Uses the shared template-state green. */
.home-size__badge--fit {
  background: var(--asp-state-template-bg, rgba(47, 158, 111, 0.12));
  color: var(--asp-state-template-fg, #2f7d5b);
  font-weight: 600;
}

/* Rug row: the room/use the size suits, stamped on save by rug-guide.ts. Sits
   under the size label as a quiet second line, never competing with the number. */
.home-size__use {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.65;
}
/* Room the size suits (Tier 3.4). Sits under the use label, quieter than it —
   the use answers "what for", this answers "for whose room". */
.home-size__room {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  opacity: .7;
}

/* ---------------------------------------------------------------------------
   Styling tab: photo zoom + carousel (room scenes / sets, 2026-07-29).

   Zoom is the native Popover API — the trigger is a real <button> with
   `popovertarget`, so Escape, click-away and focus-return are the browser's job
   and NO script is involved. The base `display: none` is the fallback for a
   browser without popover support: the overlay stays hidden instead of dumping a
   full-size photo into the card.
   --------------------------------------------------------------------------- */
.home-model__photo-btn,
.home-outfit__hero-btn {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.home-model__photo-btn:focus-visible,
.home-outfit__hero-btn:focus-visible {
  outline: 2px solid var(--asp-accent);
  outline-offset: 2px;
}
.home-lightbox {
  display: none;
  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);
}
.home-lightbox:popover-open {
  display: grid;
  place-items: center;
}
.home-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.home-lightbox__img {
  position: relative;
  z-index: 1;
  /* The close button fills the overlay, so the photo must not eat the click. */
  pointer-events: none;
  display: block;
  /* Stated, not left to inherit. Themes ship a bare img rule setting width to
     100% and height to auto (Horizon does), and a photo that is told its width
     can no longer be sized by its own proportions. auto plus the two maxima is
     what lets any shape — portrait, landscape, panorama — fill the overlay
     without cropping. Braces are deliberately absent from this comment: a
     stray one truncates any naive rule parser, this file's guards included. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(92vh - 64px);
  object-fit: contain;
}
/* One element carries both classes: `__close` is the visible round X, `__backdrop`
   stretches it over the whole overlay so a click anywhere closes. */
.home-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;
}
.home-lightbox__backdrop {
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  color: transparent;
  cursor: zoom-out;
}
.home-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;
}
.home-lightbox__backdrop:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Carousel — a scroll-snap track that is ALREADY the final layout at first
   paint. Nothing here waits for the script, and that is the whole point.

   It used to be the other way round: the block rendered every card as a grid
   and home-info.js collapsed it to one at DOMContentLoaded. That collapse was a
   Cumulative Layout Shift of several hundred pixels on every product page where
   the styling section was visible on load — the `stacked` layout, or `tabs`
   with 'styling' dragged to the front, since the first tab is the checked one.
   Now the track's height is decided by its tallest slide before any script
   runs, and never changes again.

   Without JS the shopper still reaches every card: the track scrolls and snaps,
   which is browser behaviour, not ours. That is a stronger promise than the
   grid gave — the grid needed no JS either, but nothing about it survived the
   script arriving. The buttons are the only enhancement, and they are laid out
   from the start and merely made VISIBLE by `.is-ready`, so revealing them
   costs no layout either.

   This section sits at the END of the file on purpose: `.home-model__list`'s
   grid ties with `.home-carousel__track` on specificity, so the carousel must
   win by source order. Don't move it up. */
.home-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* A swipe that runs off the end must not hand the gesture to the page. */
  overscroll-behavior-x: contain;
  /* The buttons are the affordance; on touch, so is the swipe itself. A visible
     bar would also be platform-dependent height — constant, so not a shift, but
     not worth the pixels. */
  scrollbar-width: none;
}
.home-carousel__track::-webkit-scrollbar {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .home-carousel__track {
    scroll-behavior: auto;
  }
}
/* One slide per view. `flex` sets the box; the slide keeps its own display
   (`.home-model__card--media` is flex for the photo|info split — never force
   `display: block` on it). `min-width: 0` lets long words wrap instead of
   stretching the track. */
.home-carousel__track > * {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
/* Sets stack with a margin when they are a list; side by side they have `gap`. */
.home-carousel__track > .home-outfit__layout + .home-outfit__layout {
  margin-top: 0;
}
/* Laid out from the start, revealed by the script. `visibility` keeps the space
   reserved (no shift) AND takes the buttons out of the tab order while they are
   inert — `display: none` would do the second but not the first. */
.home-carousel__nav {
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.home-carousel.is-ready .home-carousel__nav {
  visibility: visible;
}
.home-carousel__btn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--asp-border, rgba(0, 0, 0, 0.12));
  border-radius: 999px;
  background: var(--asp-bg, #fff);
  color: var(--asp-text, #1a1a1a);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.home-carousel__btn:disabled {
  cursor: default;
  opacity: 0.35;
}
.home-carousel__btn:focus-visible {
  outline: 2px solid var(--asp-accent);
  outline-offset: 2px;
}
.home-carousel__status {
  min-width: 42px;
  text-align: center;
  font-size: 12px;
  color: var(--asp-muted);
}