/* ============================================================
   JAMAR — Product page (.jm-pd-*)
   Bricks template "jamar-product" (WooCommerce single product,
   simple and variable). Ported from the Claude Design handoff
   (pages/product.css, .jb-p-*) onto the --jm--* tokens in
   ../bricks-tokens.css (load that first). Prefix .jm-pd-* because
   .jm-p-* belongs to the pillar pages (pillars.css).

   Native WooCommerce / Bricks output is styled by selector:
   product gallery (flexslider, zoom, PhotoSwipe trigger), Rank Math
   breadcrumb, price, stock line, the add-to-cart form (variations
   table, Bricks swatches, quantity, button), product content.
   Custom elements: jm-product-tiers, jm-product-spec (theme).
   Behaviour: ../js/product.js.

   Content rules (copy file locked decisions + ADR-002): prices gross,
   one primary button in the buy box, sections expanded on every
   viewport, no reviews, red only as a signal.

   Breakpoints follow Bricks: 991px tablet, 767px mobile landscape,
   478px mobile portrait.
   ============================================================ */

/* ---------- Above the fold ---------- */

.jm-pd-top { padding-block: var(--jm--space-l) var(--jm--space-2xl); }
.jm-pd-top__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--jm--space-2xl);
  align-items: start;
}

/* Gallery — WooCommerce product gallery inside the Bricks element */
.jm-pd-gallery {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-s);
  min-width: 0;
}
.jm-pd-gallery .woocommerce-product-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-xs);
  margin: 0;
}
.jm-pd-gallery .flex-viewport,
.jm-pd-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child {
  overflow: hidden;
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  background: var(--jm--color-surface);
  cursor: zoom-in;
}
.jm-pd-gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
/* Lightbox trigger: 44 px, a magnifier instead of the emoji */
.jm-pd-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--jm--space-s);
  right: var(--jm--space-s);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  background: var(--jm--color-surface);
  color: var(--jm--color-text);
  font-size: 0;
  text-decoration: none;
}
.jm-pd-gallery .woocommerce-product-gallery__trigger > span[aria-hidden] { display: none; }
.jm-pd-gallery .woocommerce-product-gallery__trigger::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3Cpath d='M11 8v6'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3Cpath d='M11 8v6'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jm-pd-gallery .woocommerce-product-gallery__trigger:hover { border-color: var(--jm--color-border-strong); }
.jm-pd-gallery .woocommerce-product-gallery__trigger:focus-visible { outline: none; box-shadow: var(--jm--shadow-focus); }

/* Thumbnails: one row, six visible, scroll beyond */
.jm-pd-gallery .flex-control-thumbs {
  display: flex !important; /* Bricks sets a grid */
  gap: var(--jm--space-xs);
  margin: 0;
  padding: 2px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}
.jm-pd-gallery .flex-control-thumbs li {
  flex: 0 0 calc((100% - 5 * var(--jm--space-xs)) / 6);
  min-width: 56px;
  margin: 0;
}
.jm-pd-gallery .flex-control-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  opacity: 1 !important; /* Bricks dims inactive thumbs */
  cursor: pointer;
}
.jm-pd-gallery .flex-control-thumbs img.flex-active { border: 2px solid var(--jm--color-text); }
.jm-pd-gallery__hint {
  margin: 0;
  font-size: var(--jm--text-xs);
  color: var(--jm--color-text-muted);
}

/* Buy box — a stack of separate elements */
.jm-pd-buy {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-m);
  min-width: 0;
}
.jm-pd-buy > * { margin: 0; }

/* Breadcrumb (Rank Math shortcode) */
.jm-pd-crumbs .rank-math-breadcrumb p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--jm--space-xs);
  margin: 0;
  font-size: var(--jm--text-xs);
  color: var(--jm--color-text-muted);
}
.jm-pd-crumbs .rank-math-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--jm--color-text-muted);
  text-decoration: none;
}
.jm-pd-crumbs .rank-math-breadcrumb a:hover { color: var(--jm--color-brand); }
.jm-pd-crumbs .rank-math-breadcrumb .last {
  overflow: hidden;
  max-width: 100%;
  font-weight: var(--jm--weight-medium);
  color: var(--jm--color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jm-pd-title {
  font-size: var(--jm--text-4xl);
  line-height: 1.1;
  text-wrap: balance;
}
.jm-pd-short,
.jm-pd-short p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}

/* Price — gross, no net toggle */
.jm-pd-price { display: flex; flex-direction: column; gap: var(--jm--space-2xs); }
.jm-pd-price__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jm--space-xs) var(--jm--space-s); }
.jm-pd-price__now,
.jm-pd-price__now .price {
  margin: 0;
  font-size: var(--jm--text-4xl);
  font-weight: var(--jm--weight-extrabold);
  line-height: 1.1;
  letter-spacing: var(--jm--tracking-tight);
  color: var(--jm--color-text);
  font-variant-numeric: tabular-nums;
}
.jm-pd-price__now del { font-size: 0.6em; font-weight: var(--jm--weight-medium); color: var(--jm--color-text-muted); }
.jm-pd-price__now ins { text-decoration: none; }
.jm-pd-price__meta { margin: 0; font-size: var(--jm--text-s); color: var(--jm--color-text-muted); }

/* Bulk tiers in the buy box (element jm-product-tiers, compact) */
.jm-pd-tiers {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
}
.jm-pd-tiers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jm--space-s);
  min-height: 44px;
  padding: 0 var(--jm--space-m);
  background: var(--jm--color-surface-alt);
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
}
.jm-pd-tiers__head a,
.jm-pd-tiers__row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--jm--color-text);
  text-decoration: underline;
  text-decoration-color: var(--jm--color-border-strong);
  letter-spacing: 0;
  text-transform: none;
}
.jm-pd-tiers__head a:hover,
.jm-pd-tiers__row a:hover { color: var(--jm--color-brand); }
.jm-pd-tiers__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--jm--space-m);
  min-height: 44px;
  padding: 0 var(--jm--space-m);
  border-top: 1px solid var(--jm--color-border);
  font-size: var(--jm--text-s);
  font-variant-numeric: tabular-nums;
  transition: background var(--jm--duration-fast) var(--jm--ease-out);
}
.jm-pd-tiers__row > :first-child { display: inline-flex; align-items: center; gap: var(--jm--space-xs); }
.jm-pd-tiers__row > :last-child { font-weight: var(--jm--weight-semibold); text-align: right; }
.jm-pd-tiers__mark { --jm-icon-size: 1rem; visibility: hidden; }
.jm-pd-tiers__row.is-active { background: var(--jm--color-surface-alt); font-weight: var(--jm--weight-semibold); }
.jm-pd-tiers__row.is-active .jm-pd-tiers__mark { visibility: visible; }

/* Stock line — product-stock element (simple) and the variation availability */
.jm-pd-stock .stock,
.jm-pd-cart .woocommerce-variation-availability .stock {
  display: flex;
  align-items: flex-start;
  gap: var(--jm--space-xs);
  margin: 0;
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-text);
}
.jm-pd-stock .stock::before,
.jm-pd-cart .woocommerce-variation-availability .stock::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  border-radius: var(--jm--radius-pill);
  background: var(--jm--color-success);
}
.jm-pd-buy .stock.low-stock::before { background: var(--jm--color-warning); }
.jm-pd-buy .stock.available-on-backorder::before { background: var(--jm--color-text-muted); }
.jm-pd-buy .stock.out-of-stock::before { background: var(--jm--color-error); }
/* WooCommerce also prints the simple product's stock above its form; the stock element shows it instead */
.jm-pd-cart .brxe-product-add-to-cart > .stock { display: none; }

/* ---------- Add-to-cart form ---------- */

.jm-pd-cart { display: flex; flex-direction: column; gap: var(--jm--space-xs); }
.jm-pd-cart form.cart { margin: 0; }
.jm-pd-cart form.cart:not(.variations_form),
.jm-pd-cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--jm--space-s);
}

/* Variation pickers: the table reads as stacked groups */
.jm-pd-cart table.variations,
.jm-pd-cart table.variations tbody,
.jm-pd-cart table.variations tr,
.jm-pd-cart table.variations th,
.jm-pd-cart table.variations td {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.jm-pd-cart table.variations tbody { display: flex; flex-direction: column; gap: var(--jm--space-m); }
.jm-pd-cart table.variations { margin-bottom: var(--jm--space-m); }
.jm-pd-cart table.variations th.label { margin-bottom: var(--jm--space-xs); }
.jm-pd-cart table.variations label {
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-text);
}
.jm-pd-var__value { font-weight: var(--jm--weight-regular); }
.jm-pd-var__value.is-empty { color: var(--jm--color-text-muted); }
.jm-pd-cart .reset_variations {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--jm--space-2xs);
  font-size: var(--jm--text-xs);
  color: var(--jm--color-text-muted);
}
/* The main price above updates instead (product.js) */
.jm-pd-cart .woocommerce-variation-price,
.jm-pd-cart .woocommerce-variation-description:empty { display: none; }
.jm-pd-cart .single_variation { margin-bottom: var(--jm--space-s); }

/* Swatches (Bricks) — shared */
.jm-pd-cart .bricks-variation-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jm--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-pd-cart .bricks-variation-swatches li {
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.jm-pd-cart .bricks-swatch-button {
  position: relative;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
.jm-pd-cart .bricks-swatch-button:focus-visible { outline: 2px solid var(--jm--color-brand); outline-offset: 2px; }

/* Colour swatch: 44 px target, 32 px chip; selected = ring + check, the name in the group head */
.jm-pd-cart .bricks-swatch-color .bricks-swatch-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--jm--radius-pill);
  background: transparent;
  transition: border-color var(--jm--duration-fast) var(--jm--ease-out);
}
.jm-pd-cart .bricks-swatch-color .bricks-swatch-button > span {
  width: 32px;
  height: 32px;
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-pill);
}
.jm-pd-cart .bricks-swatch-color .bricks-swatch-button:hover { border-color: var(--jm--color-border-strong); }
.jm-pd-cart .bricks-swatch-color .bricks-swatch-selected .bricks-swatch-button { border: 2px solid var(--jm--color-text); }
.jm-pd-cart .bricks-swatch-color .bricks-swatch-selected .bricks-swatch-button::after {
  content: '';
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--jm--color-surface);
  border-radius: var(--jm--radius-pill);
  background: var(--jm--color-text) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.jm-pd-cart .bricks-swatch-color .is-unavailable .bricks-swatch-button > span { opacity: 0.35; }
.jm-pd-cart .bricks-swatch-color .is-unavailable .bricks-swatch-button::before {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: 1;
  border-radius: var(--jm--radius-pill);
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--jm--color-text) calc(50% - 1px), var(--jm--color-text) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none;
}

/* Label swatch (pill): size, finish, pack size */
.jm-pd-cart .bricks-swatch-label .bricks-swatch-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  padding: var(--jm--space-xs) var(--jm--space-m);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  background: var(--jm--color-surface);
  color: var(--jm--color-text);
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-medium);
  line-height: 1.25;
  transition: border-color var(--jm--duration-fast) var(--jm--ease-out),
              background var(--jm--duration-fast) var(--jm--ease-out),
              color var(--jm--duration-fast) var(--jm--ease-out);
}
.jm-pd-cart .bricks-swatch-label .bricks-swatch-button:hover { border-color: var(--jm--color-border-strong); }
.jm-pd-cart .bricks-swatch-label .bricks-swatch-selected .bricks-swatch-button {
  border-color: var(--jm--color-text);
  background: var(--jm--color-text);
  color: var(--jm--color-surface);
}
.jm-pd-pill__sub {
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-regular);
  color: var(--jm--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.jm-pd-pill__sub:empty { display: none; }
.jm-pd-cart .bricks-swatch-selected .jm-pd-pill__sub { color: var(--jm--color-surface); }
.jm-pd-cart .bricks-swatch-label .is-unavailable .bricks-swatch-button {
  border-style: dashed;
  border-color: var(--jm--color-border-strong);
  background: var(--jm--color-surface-alt);
  color: var(--jm--color-text-muted);
  text-decoration: line-through;
}
.jm-pd-cart .bricks-swatch-label .is-unavailable.bricks-swatch-selected .bricks-swatch-button {
  border: 2px dashed var(--jm--color-text);
  color: var(--jm--color-text);
}

/* Tooltip: the colour name; "Out of stock" on an unavailable option.
   Replaces Bricks' balloon so it also shows on keyboard focus. */
.jm-pd-cart .bricks-variation-swatches li[data-balloon]::before { display: none; }
.jm-pd-cart .bricks-variation-swatches li[data-balloon]::after {
  content: attr(data-balloon);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 5;
  padding: 6px 10px;
  border-radius: var(--jm--radius-s);
  background: var(--jm--color-text);
  color: var(--jm--color-surface);
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-medium);
  line-height: var(--jm--leading-normal);
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--jm--duration-fast) var(--jm--ease-out),
              visibility var(--jm--duration-fast) var(--jm--ease-out);
}
.jm-pd-cart .bricks-variation-swatches li[data-balloon]:hover::after,
.jm-pd-cart .bricks-variation-swatches li[data-balloon]:focus-within::after { opacity: 1; visibility: visible; }

/* Quantity (Bricks: input + span.minus + span.plus) */
.jm-pd-cart .quantity {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 52px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  background: var(--jm--color-surface);
}
.jm-pd-cart .quantity .action {
  position: static;
  display: grid;
  place-items: center;
  width: 44px;
  height: auto;
  color: var(--jm--color-text);
  cursor: pointer;
  user-select: none;
  transition: background var(--jm--duration-fast) var(--jm--ease-out);
}
.jm-pd-cart .quantity .action svg { width: 18px; height: 18px; }
.jm-pd-cart .quantity .minus { order: 0; }
.jm-pd-cart .quantity .qty { order: 1; }
.jm-pd-cart .quantity .plus { order: 2; }
.jm-pd-cart .quantity .action:hover { background: var(--jm--color-surface-alt); }
.jm-pd-cart .quantity .action[aria-disabled="true"] { color: var(--jm--color-text-subtle); background: var(--jm--color-surface-alt); cursor: not-allowed; }
.jm-pd-cart .quantity .action:focus-visible { outline: none; box-shadow: inset var(--jm--shadow-focus); }
.jm-pd-cart .quantity .qty {
  width: 64px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--jm--color-border);
  border-radius: 0;
  background: var(--jm--color-surface);
  font: inherit;
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  text-align: center;
  color: var(--jm--color-text);
  appearance: textfield;
  -moz-appearance: textfield;
}
.jm-pd-cart .quantity .qty::-webkit-inner-spin-button,
.jm-pd-cart .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.jm-pd-cart .quantity .qty:focus-visible { outline: none; box-shadow: inset var(--jm--shadow-focus); }

/* Add to cart — the one primary button */
.jm-pd-cart .single_add_to_cart_button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--jm--space-xs);
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 var(--jm--space-l);
  border: 0;
  border-radius: var(--jm--radius-s);
  background: var(--jm--color-brand);
  color: var(--jm--color-on-brand);
  font-size: var(--jm--text-l);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: 0.02em;
}
.jm-pd-cart .single_add_to_cart_button::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: var(--jm-icon) center / contain no-repeat;
          mask: var(--jm-icon) center / contain no-repeat;
  --jm-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h15l-1.5 9h-13z'/%3E%3Cpath d='M6 6L5 3H2'/%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/svg%3E");
}
.jm-pd-cart .single_add_to_cart_button:hover { background: var(--jm--color-brand-hover); }
.jm-pd-cart .single_add_to_cart_button:focus-visible { outline: none; box-shadow: var(--jm--shadow-focus); }
.jm-pd-cart .single_add_to_cart_button.disabled {
  background: var(--jm--color-border);
  color: var(--jm--color-text-muted);
  opacity: 1;
  cursor: not-allowed;
}

.jm-pd-cart__help,
.jm-pd-cart__reason {
  margin: 0;
  font-size: var(--jm--text-xs);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}
.jm-pd-cart__reason {
  display: flex;
  align-items: flex-start;
  gap: var(--jm--space-xs);
  font-size: var(--jm--text-s);
  color: var(--jm--color-text);
}
.jm-pd-cart__reason::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  border-radius: var(--jm--radius-pill);
  background: var(--jm--color-text-muted);
}
.jm-pd-cart__help[hidden],
.jm-pd-cart__reason[hidden] { display: none; }

/* Trust line + custom-order link */
.jm-pd-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jm--space-xs) var(--jm--space-m);
  margin: 0;
  padding: var(--jm--space-m) 0 0;
  border-top: 1px solid var(--jm--color-border);
  list-style: none;
}
.jm-pd-trust__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jm--space-xs);
  font-size: var(--jm--text-s);
  color: var(--jm--color-text-muted);
}
.jm-pd-trust__item .jm-icon { --jm-icon-size: 1rem; color: var(--jm--color-brand); }
.jm-pd-offramp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--jm--space-xs);
  font-size: var(--jm--text-s);
  color: var(--jm--color-text-muted);
}
.jm-pd-offramp .jm-link { min-height: 44px; white-space: normal; }

/* ---------- Below the fold: sections, all expanded ---------- */

.jm-pd-sec {
  padding-block: var(--jm--space-2xl);
  border-top: 1px solid var(--jm--color-border);
  scroll-margin-top: 72px;
}
.jm-pd-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--jm--space-xl);
  align-items: start;
}
.jm-pd-sec__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jm--space-s);
}
.jm-pd-sec__h { font-size: var(--jm--text-3xl); }
.jm-pd-sec__note {
  max-width: 34ch;
  margin: 0;
  font-size: var(--jm--text-s);
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}

/* Long description (product content) */
.jm-pd-prose { display: flex; flex-direction: column; gap: var(--jm--space-m); max-width: 68ch; }
.jm-pd-prose p {
  margin: 0;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}
.jm-pd-prose p:first-child { color: var(--jm--color-text); }

/* Key/value rows — specification, bulk pricing, shipping (no <table>, no <dl>).
   The base .jm-pd-kv rules now live in bricks-tokens.css as .jm-kv (alias kept
   until this template switches to .jm-kv); only the product variants stay here. */
.jm-pd-kv__v p { margin: 0; }
.jm-pd-kv__v .jm-todo { margin-top: var(--jm--space-2xs); }
.jm-pd-mono { font-family: var(--jm--font-mono); font-size: var(--jm--text-s); }
.jm-pd-kv__row--head {
  min-height: 0;
  padding-block: 10px;
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
  color: var(--jm--color-text);
}
.jm-pd-kv--3 .jm-pd-kv__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.jm-pd-num { text-align: right; }
.jm-pd-kv--prose .jm-pd-kv__row { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); padding-block: 20px; }
.jm-pd-kv--prose .jm-pd-kv__k { font-weight: var(--jm--weight-semibold); color: var(--jm--color-text); }
.jm-pd-kv--prose .jm-pd-kv__v {
  font-size: var(--jm--text-base);
  font-weight: var(--jm--weight-regular);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}

/* FAQ (native <details>, same look as Contact and the pillars) */
.jm-pd-faq { border-top: 1px solid var(--jm--color-border); }
.jm-pd-faq__item { border-bottom: 1px solid var(--jm--color-border); }
.jm-pd-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jm--space-m);
  min-height: 44px;
  padding-block: var(--jm--space-m);
  font-size: var(--jm--text-l);
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-text);
  list-style: none;
  cursor: pointer;
  transition: color var(--jm--duration-base) var(--jm--ease-out);
}
.jm-pd-faq__q::-webkit-details-marker { display: none; }
.jm-pd-faq__q:hover { color: var(--jm--color-brand); }
.jm-pd-faq__q:focus-visible { outline: 2px solid var(--jm--color-brand); outline-offset: 2px; border-radius: var(--jm--radius-xs); }
.jm-pd-faq__icon {
  --jm-icon-size: 0.875rem;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--jm--color-border);
  border-radius: 50%;
  background: var(--jm--color-surface);
  color: var(--jm--color-text);
  transition: background var(--jm--duration-base) var(--jm--ease-out),
              border-color var(--jm--duration-base) var(--jm--ease-out);
}
.jm-pd-faq__item[open] .jm-pd-faq__icon {
  border-color: var(--jm--color-brand);
  background: var(--jm--color-brand);
  color: var(--jm--color-on-brand);
}
.jm-pd-faq__item[open] .jm-pd-faq__icon::before { transform: rotate(45deg); }
.jm-pd-faq__a {
  max-width: 60ch;
  padding-bottom: var(--jm--space-m);
  font-size: var(--jm--text-base);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
}
.jm-pd-faq__a p { margin: 0; }

/* ---------- Product strips: cross-sells, recently viewed ---------- */

.jm-pd-strip { padding-block: var(--jm--space-2xl); background: var(--jm--color-surface-alt); }
.jm-pd-strip + .jm-pd-strip { padding-top: 0; }
.jm-pd-strip__head { margin-bottom: var(--jm--space-l); }
.jm-pd-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jm--space-m); }

/* ---------- Sticky mobile add-to-cart ---------- */

.jm-pd-sticky {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--jm--z-sticky);
  display: none;
  align-items: center;
  gap: var(--jm--space-s);
  padding: var(--jm--space-xs) var(--jm--space-m) calc(var(--jm--space-xs) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--jm--color-border);
  background: var(--jm--color-surface);
  box-shadow: 0 -4px 12px var(--jm--color-shadow);
}
.jm-pd-sticky__img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
}
.jm-pd-sticky__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jm-pd-sticky__info { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; }
.jm-pd-sticky__summary {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--jm--text-xs);
  line-height: var(--jm--leading-snug);
  color: var(--jm--color-text-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jm-pd-sticky__price,
.jm-pd-sticky__price .price {
  margin: 0;
  font-size: var(--jm--text-base);
  font-weight: var(--jm--weight-bold);
  color: var(--jm--color-text);
  font-variant-numeric: tabular-nums;
}
.jm-pd-sticky__btn { flex: 0 0 auto; max-width: 42%; min-height: 44px; padding-inline: var(--jm--space-m); }

@media (max-width: 767px) {
  .jm-pd-sticky.is-visible { display: flex; }
  body.jm-pd-has-sticky { padding-bottom: 72px; }
}

/* ---------- Responsive ---------- */

@media (min-width: 992px) {
  .jm-pd-sec__head { position: sticky; top: 96px; }
}
@media (max-width: 991px) {
  .jm-pd-top { padding-top: var(--jm--space-m); }
  .jm-pd-top__grid { grid-template-columns: minmax(0, 1fr); gap: var(--jm--space-l); }
  .jm-pd-gallery { position: static; }
  .jm-pd-sec__grid { grid-template-columns: minmax(0, 1fr); gap: var(--jm--space-m); }
  .jm-pd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .jm-pd-title { font-size: var(--jm--text-3xl); }
  .jm-pd-price__now,
  .jm-pd-price__now .price { font-size: var(--jm--text-3xl); }
  .jm-pd-kv__row,
  .jm-pd-kv--prose .jm-pd-kv__row { grid-template-columns: minmax(0, 1fr); gap: var(--jm--space-3xs); }
  .jm-pd-kv--3 .jm-pd-kv__row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--jm--space-xs); }
  .jm-pd-cards {
    display: flex;
    gap: var(--jm--space-m);
    margin-inline: calc(-1 * var(--jm--container-pad));
    padding: 0 var(--jm--container-pad) var(--jm--space-s);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .jm-pd-cards > .jm-pcard { flex: 0 0 76%; scroll-snap-align: start; }
}
@media (max-width: 478px) {
  .jm-pd-trust { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .jm-pd-tiers__row,
  .jm-pd-cart .bricks-swatch-button,
  .jm-pd-cart .bricks-variation-swatches li[data-balloon]::after,
  .jm-pd-faq__q,
  .jm-pd-faq__icon { transition: none; }
}