/* woo-product — the single product page (Woo's template, never copied): gallery and
   summary side by side from lg, the gallery a scroll-snap strip, the form in our look;
   Barn2 Product Options fields take mp-field/mp-choice through the aliases below.
   Contract: COMPONENTS.md §8.1. */
@layer adapters {
  /* The page: the buy area, then the sections and related products, one column. */
  .woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mp-space-l);
    margin-block-start: 0;
  }

  /* 07 §2 Shop: the buy area (gallery + summary) on a full-bleed tint band, the summary a white card
     on it, side by side from lg. Its own box (.mp-woo-buy, opened and closed in inc/woocommerce.php)
     so the sticky summary is bounded by it: a summary taller than the screen (Rider ID options) stops
     at the band's end instead of riding over the details and related products (Nick 2026-11-06). */
  .mp-woo-buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mp-space-l);
    padding-block: var(--mp-space-l);
    border-image: linear-gradient(var(--mp-color-surface-2) 0 0) fill 0 // 0 100vw;
  }
  .mp-woo-buy > .summary { padding: var(--mp-space-card); border-radius: var(--mp-radius-lg); background-color: var(--mp-color-surface); }
  /* Phone and tablet (Nick 2026-11-07: the card's padding pushed the words in from the page's line):
     the tint band holds the photos only, edge to edge; the summary is plain on the page, its words on
     the same line as the breadcrumbs, the sections and Related products. */
  @media (width < 64rem) {
    .mp-woo-buy { padding-block: 0; border-image: none; }
    .mp-woo-buy > .woocommerce-product-gallery { padding-block: var(--mp-space-s); border-image: linear-gradient(var(--mp-color-surface-2) 0 0) fill 0 // 0 100vw; }
    .mp-woo-buy > .summary { padding: 0; border-radius: 0; background-color: transparent; }
  }
  @media (width >= 64rem) {
    .mp-woo-buy { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--mp-space-xl); align-items: start; }
    /* Both sticky: the shorter column follows the reader down beside the taller one (the photos
       beside a long Rider ID form, the summary beside a tall gallery); both stop at the band's end. */
    .mp-woo-buy > :is(.woocommerce-product-gallery, .summary) { position: sticky; inset-block-start: calc(var(--mp-h-header) + var(--mp-space-s)); }
  }

  /* Gallery: one image per view, swipe or scroll for the rest. */
  .woocommerce-product-gallery__wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--mp-space-xs);
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    border-radius: var(--mp-radius-lg);
  }
  .mp-woo-product__shot { scroll-snap-align: start; }
  .mp-woo-product__img {
    inline-size: 100%;
    aspect-ratio: var(--mp-ratio-square);
    border-radius: var(--mp-radius-lg);
    background-color: var(--mp-color-surface-2);
    object-fit: cover;
  }

  .summary { display: flex; flex-direction: column; gap: var(--mp-space-s); }
  .product_title { font-size: var(--mp-fs-display-l); }
  .summary > .price { font-size: var(--mp-fs-lead); }
  .woocommerce-product-details__short-description { color: var(--mp-color-text-2); }

  /* The add-to-cart form. */
  .woocommerce div.product form.cart { display: flex; flex-direction: column; gap: var(--mp-space-s); margin: 0; }
  .woocommerce div.product form.cart:not(.variations_form),
  .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--mp-space-xs);
  }
  table.variations,
  table.variations tbody,
  table.variations tr,
  table.variations th,
  table.variations td { display: block; padding: 0; border: 0; text-align: start; }
  table.variations tr + tr { margin-block-start: var(--mp-space-s); }
  table.variations th label {
    display: block;
    margin-block-end: var(--mp-space-2xs);
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-caps);
    text-transform: uppercase;
  }
  .reset_variations {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--mp-tap);
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-xs);
  }
  .single_variation { color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  .single_variation .price { font-size: var(--mp-fs-lead); }
  .quantity .qty { inline-size: calc(var(--mp-h-control) * 1.6); text-align: center; }
  .single_add_to_cart_button { flex: 1; min-block-size: var(--mp-h-control); }
  .woocommerce div.product .stock { color: var(--mp-color-success); font-size: var(--mp-fs-sm); }
  .woocommerce div.product .stock.out-of-stock { color: var(--mp-color-danger); }
  .product_meta {
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-3xs);
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-xs);
  }

  /* The tabs as plain sections (inc/woocommerce.php). */
  .mp-woo-product__section { max-inline-size: var(--mp-measure); }
  .mp-woo-product__section > h2 { margin-block: var(--mp-space-l) var(--mp-space-s); font-size: var(--mp-fs-display-s); }
  .mp-woo-product__section > p + p { margin-block-start: var(--mp-space-s); }

  /* Details (inc/woocommerce.php mp_product_details()): each attribute's name as a small caps label,
     its values as chips (Nick 2026-11-07), in place of Woo's two-column table. */
  .mp-woo-details { display: flex; flex-direction: column; gap: var(--mp-space-s); margin: 0; }
  .mp-woo-details__row { display: flex; flex-direction: column; gap: var(--mp-space-2xs); }
  .mp-woo-details dt {
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-caps);
    text-transform: uppercase;
  }
  .mp-woo-details dd { margin: 0; }

  /* Barn2 Product Options (its CSS demoted to @layer vendor): our field look. */
  .wpo-field { display: flex; flex-direction: column; gap: var(--mp-space-2xs); margin-block-end: var(--mp-space-s); }
  .wpo-field-label,
  .wpo-field > label:first-child {
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-caps);
    text-transform: uppercase;
  }
  .wpo-field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) {
    inline-size: 100%;
    min-block-size: var(--mp-h-control);
    padding: 0 var(--mp-space-s);
    border: var(--mp-border) solid var(--mp-color-line-strong);
    border-radius: var(--mp-radius-sm);
    background-color: var(--mp-color-surface);
    color: var(--mp-color-text);
    font-size: var(--mp-fs-base);
  }
  .wpo-field :is(input[type="checkbox"], input[type="radio"]) {
    inline-size: var(--mp-icon-s);
    block-size: var(--mp-icon-s);
    accent-color: var(--mp-color-inverse);
  }
  /* The option name above a choice list (Barn2 prints a <p>, not a <label>), price inline. */
  .wpo-option-name {
    margin: 0;
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-caps);
    text-transform: uppercase;
  }
  .wpo-option-name .wpo-price-container { margin: 0; color: var(--mp-color-text); letter-spacing: 0; text-transform: none; }
  .wpo-option-name .wpo-price-container > * { margin: 0; padding: 0; }

  /* Text-label choices ("Yes", print sizes): the size chips' look (mp-seg--chips). */
  .wpo-text-labels { display: flex; flex-wrap: wrap; gap: var(--mp-space-2xs); margin: 0; padding: 0; list-style: none; }
  .wpo-text-labels .wpo-choice-item { margin: 0; }
  .wpo-text-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--mp-tap);
    min-block-size: var(--mp-tap);
    padding-inline: var(--mp-space-xs);
    border: 0;
    border-radius: var(--mp-radius-xs);
    background-color: var(--mp-color-surface);
    box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-strong);
    color: var(--mp-color-text);
    font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-ui);
    cursor: pointer;
    transition: background-color var(--mp-dur-fast) var(--mp-ease-out), color var(--mp-dur-fast) var(--mp-ease-out);
  }
  .wpo-text-label > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
  .wpo-text-label .wpo-text-label-inner { align-items: center; min-block-size: 0; padding: 0; border: 0; background: none; color: inherit; }
  .wpo-text-label:has(:checked) { background-color: var(--mp-color-inverse); color: var(--mp-color-on-inverse); box-shadow: none; }
  .wpo-text-label:has(:focus-visible) { outline: var(--mp-focus-width) solid var(--mp-color-focus); outline-offset: var(--mp-focus-offset); }

  /* Image buttons (print styles): Barn2 prints the <img> without width/height, and the field
     is often revealed by a choice, so the box is sized here and nothing shifts when it shows. */
  .wpo-image-button .wpo-choice-image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--mp-ratio-square);
    object-fit: contain;
  }
}

/* 2026-10-22 · Woo prints style="opacity: 0" on the gallery and fades it in with its script;
   without that script the images would stay invisible · remove when the template stops printing it. */
@layer overrides {
  .woocommerce-product-gallery { opacity: 1 !important; } /* check-allow: important */
}