/* Shop body (TODO 00001.5.14). FINAL design/shop/inspiration/sections/body/r3/v2.png.
   264px quiet hairline facet sidebar on white (drawer under 992, section 6), results column with count and sort,
   the product grid as one datasheet table (section 8 product card, datasheet cell variant), numbered pagination,
   and the Shop inline AI recommendations row (ai-surface between two 1px ai hairlines). Grid, count, sort,
   pagination and recommendations are judged against the composite in 00001.5.17 (C1b) once products exist. */
.p-shop-body {
  box-sizing: border-box; background: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--90) var(--wp--custom--gutter--desktop);
}
.p-shop-body *, .p-shop-body *::before, .p-shop-body *::after { box-sizing: border-box; }
.p-shop-body__inner {
  max-width: var(--wp--custom--layout--wide); margin-inline: auto;
  display: grid; grid-template-columns: 264px minmax(0, 1fr); column-gap: var(--wp--preset--spacing--90); align-items: stretch;
}
.p-shop-body .p-shop-body__inner > * { margin-block: 0; }
/* Facet checkbox focus: 2px orange ring (WooCommerce's own :focus rule draws 1px currentColor and outranks the line below). */
.p-shop-body__filters input[type=checkbox].wc-block-product-filter-checkbox-list__input:focus-visible {
  outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px;
}
.p-shop-body a:focus-visible, .p-shop-body button:focus-visible, .p-shop-body select:focus-visible, .p-shop-body input:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange); outline-offset: var(--wp--custom--focus--offset);
}

/* Sidebar: Refine results, then the WooCommerce Product Filters block shown inline (overlayMode always + the
   rules Woo applies to its own mobile overlay above its breakpoint, here from 992). */
.p-shop-body__side { padding-right: var(--wp--preset--spacing--60); border-right: 1px solid var(--wp--preset--color--line); }
.p-shop-body__refine { padding-bottom: var(--wp--preset--spacing--50); border-bottom: 1px solid var(--wp--preset--color--line); }
.p-shop-body .p-shop-body__refine-title {
  margin: 0; color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--h-4);
  font-weight: var(--wp--custom--font-weight--h-4); line-height: 1.35;
}
.p-shop-body__refine-count, .p-shop-body__refine-note {
  margin: var(--wp--preset--spacing--20) 0 0; color: var(--wp--preset--color--slate);
  font-size: var(--wp--preset--font-size--small); line-height: 1.5;
}
.p-shop-body__filters { --wc-product-filters-background-color: var(--wp--preset--color--white); --wc-product-filters-text-color: var(--wp--preset--color--ink); }
.p-shop-body__filters .wp-block-heading {
  margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--navy);
  font-size: var(--wp--preset--font-size--h-4); font-weight: var(--wp--custom--font-weight--h-4); line-height: 1.35;
}
.p-shop-body__filters .wc-block-product-filters__overlay-content > * {
  padding-block: var(--wp--preset--spacing--50); border-bottom: 1px solid var(--wp--preset--color--line);
}
.p-shop-body__filters .wc-block-product-filters__open-overlay {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30); min-height: var(--wp--custom--control);
  padding: 0 var(--wp--preset--spacing--60); background: transparent; color: var(--wp--preset--color--navy);
  border: 1px solid var(--wp--preset--color--navy); border-radius: var(--wp--custom--radius--default);
  font-family: inherit; font-size: var(--wp--preset--font-size--button); font-weight: var(--wp--custom--font-weight--button);
}
.p-shop-body__side.is-empty .p-shop-body__filters { display: none; }
/* Facet option rows (Shop composite): label left, count in a right-aligned slate column, no parentheses. */
.p-shop-body__filters .wc-block-product-filter-checkbox-list__label { display: flex; width: 100%; }
.p-shop-body__filters .wc-block-product-filter-checkbox-list__text-wrapper {
  display: flex; flex: 1 1 auto; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--40); min-width: 0;
}
.p-shop-body__filters .wc-block-product-filter-checkbox-list__count { flex: none; font-size: 0; }
.p-shop-body__filters .wc-block-product-filter-checkbox-list__count > span {
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); font-variant-numeric: tabular-nums;
}
/* The fieldset legend and the removable-chip "Remove filter" label stay visually hidden but do not clip their own
   text: a 1 px box at their place, painted away by clip-path, so containment checks see nothing cut or outside its box
   (GO-012 class). Screen readers still read them. */
.p-shop-body__filters legend.screen-reader-text,
.p-shop-body__filters .wc-block-product-filter-removable-chips__remove .screen-reader-text {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important;
  overflow: visible !important; white-space: nowrap; clip: auto !important; clip-path: inset(50%) !important; border: 0 !important;
}
@media (min-width: 992px) {
  .p-shop-body__filters { display: flex; }
  .p-shop-body__filters .wc-block-product-filters__overlay-header,
  .p-shop-body__filters .wc-block-product-filters__overlay-footer,
  .p-shop-body__filters .wc-block-product-filters__open-overlay { display: none; }
  .p-shop-body__filters .wc-block-product-filters__overlay {
    position: relative; pointer-events: auto; inset: 0; z-index: auto; background: inherit; color: inherit;
    transition: none; flex-grow: 1;
  }
  .p-shop-body__filters .wc-block-product-filters__overlay-wrapper { width: auto; height: auto; background: inherit; color: inherit; }
  .p-shop-body__filters .wc-block-product-filters__overlay-dialog {
    position: relative; width: auto; transform: none; transition: none; background: inherit; color: inherit;
  }
  .p-shop-body__filters .wc-block-product-filters__overlay-content { padding: 0; overflow: visible; flex-grow: 1; background: inherit; color: inherit; }
}

/* Results column: count left, sort right (section 8 D4). */
.p-shop-body__results { min-width: 0; }
.p-shop-body__results > * { margin-block: 0; }
.p-shop-body__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small);
}
.p-shop-body__bar:has(.wc-block-catalog-sorting) { margin-bottom: var(--wp--preset--spacing--50); }
.p-shop-body__total { margin: 0; color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.p-shop-body__bar select {
  min-height: var(--wp--custom--touch); padding: 0 var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--40);
  border: 1px solid var(--wp--preset--color--slate); border-radius: var(--wp--custom--radius--default);
  background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); font: inherit;
}

/* Grid: datasheet cells sharing their 1px line hairlines edge to edge (C1b in 00001.5.17). */
.p-shop-body__grid .wc-block-product-template {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--wp--preset--color--line); border-left: 1px solid var(--wp--preset--color--line);
}
.p-shop-body__grid .wc-block-product {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--50);
  margin: 0; padding: var(--wp--preset--spacing--40); width: auto; max-width: none;
  border-right: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line);
}
/* The photo fills its half of the card top to bottom (Shop composite), cropped from the centre of the 4:3 file. */
.p-shop-body__grid .wc-block-components-product-image {
  position: relative; margin: 0; height: 100%; min-height: var(--wp--preset--spacing--130); overflow: hidden; background: var(--wp--preset--color--mist);
}
.p-shop-body__grid .wc-block-components-product-image a { position: absolute; inset: 0; display: block; }
.p-shop-body__grid .wc-block-components-product-image img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover;
}
.p-shop-body__cell > * { margin-block: 0; }
.p-shop-body__cell .wp-block-post-title {
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--h-3);
  font-weight: var(--wp--custom--font-weight--h-3); line-height: 1.25;
}
.p-shop-body__cell .wp-block-post-title a { color: inherit; text-decoration: none; }
.p-shop-body__cell .wc-block-components-product-price { color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--price); font-weight: 700; }
.p-shop-body__spec { margin-top: var(--wp--preset--spacing--30) !important; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.p-shop-body__spec p { margin: 0; }
.p-shop-body__add { margin-top: var(--wp--preset--spacing--50) !important; }
.p-shop-body__add .wp-element-button, .p-shop-body__recs .wp-element-button {
  min-height: var(--wp--preset--spacing--80); padding: 0 var(--wp--preset--spacing--50); background: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--navy); border: 0; border-radius: var(--wp--custom--radius--default);
  font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--button);
}
/* Cell add to cart hover and press (00001.5.22.13.b, the .12 rule and DESIGN-GUIDE.md primary): a navy 8 percent layer ABOVE the
   navy label whose opacity fades at the kit's hover token; press scale .98 at once. */
.p-shop-body__add .wp-element-button { position: relative; }
.p-shop-body__add .wp-element-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: var(--wp--custom--alpha--overlay-navy); transition: opacity var(--mo-hover) var(--mo-ease); }
.p-shop-body__add .wp-element-button:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .p-shop-body__add .wp-element-button:hover::after { opacity: 1; } }

/* Foot row (Shop composite): pagination left, "Showing 1-9 of 12 instruments" right. */
.p-shop-body__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  margin-top: var(--wp--preset--spacing--50);
}
.p-shop-body__foot > * { margin-block: 0; }
.p-shop-body__foot .wc-block-product-results-count { margin-left: auto; }
.p-shop-body__foot .woocommerce-result-count { margin: 0; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); }
/* Pagination: 44px squares, current navy (section 8). */
.p-shop-body__pages { margin: 0; gap: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }
.p-shop-body__pages .page-numbers, .p-shop-body__pages a {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--wp--custom--touch); min-height: var(--wp--custom--touch);
  padding: 0 var(--wp--preset--spacing--30); border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--default); color: var(--wp--preset--color--navy); text-decoration: none;
}
.p-shop-body__pages .wp-block-query-pagination-previous.is-disabled {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--wp--custom--touch); min-height: var(--wp--custom--touch);
  padding: 0 var(--wp--preset--spacing--30); border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--default); color: var(--wp--preset--color--slate); cursor: default;
}
.p-shop-body__pages .page-numbers.current { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }

/* Honest empty state while the catalogue is empty. */
.p-shop-body__empty {
  padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--70);
  border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--default);
}
.p-shop-body__empty-title {
  margin: 0; color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--h-3);
  font-weight: var(--wp--custom--font-weight--h-3); line-height: 1.25;
}
.p-shop-body__empty-text { margin: var(--wp--preset--spacing--40) 0 0; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); line-height: 1.6; }
.p-shop-body__empty-text a { color: var(--wp--preset--color--navy); font-weight: 500; text-decoration: underline 1px; text-underline-offset: 3px; }

/* Shop inline AI recommendations (renders only when it has products; functions.php). */
.p-shop-body__recs {
  margin-top: var(--wp--preset--spacing--90) !important; padding: var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--ai-surface);
  border-top: 1px solid var(--wp--preset--color--ai); border-bottom: 1px solid var(--wp--preset--color--ai);
}
.p-shop-body__recs > * { margin-block: 0; }
.p-shop-body__recs-label {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--30); color: var(--wp--preset--color--ai);
  font-size: var(--wp--preset--font-size--label); font-weight: var(--wp--custom--font-weight--label);
  letter-spacing: var(--wp--custom--letter-spacing--label); line-height: 1.3; text-transform: uppercase;
}
.p-shop-body .p-shop-body__recs-title {
  margin-top: var(--wp--preset--spacing--30); color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--h-2);
  font-weight: var(--wp--custom--font-weight--h-2); letter-spacing: var(--wp--custom--letter-spacing--h-2); line-height: 1.15;
}
.p-shop-body__recs-grid .wc-block-product-template {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--wp--preset--spacing--60) 0 0; padding: 0; list-style: none;
}
.p-shop-body__recs-grid .wc-block-product { margin: 0; padding: 0 var(--wp--preset--spacing--50); width: auto; max-width: none; }
.p-shop-body__recs-grid .wc-block-product + .wc-block-product { border-left: 1px solid var(--wp--preset--color--line); }
.p-shop-body__recs-grid .wp-block-post-title { color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--h-4); font-weight: var(--wp--custom--font-weight--h-4); }
.p-shop-body__recs-grid .wp-block-post-title a { color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .p-shop-body__empty-text a:hover { text-decoration-thickness: 2px; }
  .p-shop-body__pages a:hover { border-color: var(--wp--preset--color--navy); }
}
@media (max-width: 1199.98px) {
  .p-shop-body__grid .wc-block-product { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--60); }
  .p-shop-body__grid .wc-block-components-product-image { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .p-shop-body__recs-grid .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--wp--preset--spacing--60); }
}
@media (max-width: 991.98px) {
  .p-shop-body { padding: var(--wp--preset--spacing--90) var(--wp--custom--gutter--tablet); }
  .p-shop-body__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--60); }
  .p-shop-body__side { padding-right: 0; border-right: 0; }
  .p-shop-body__refine { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--50); flex-wrap: wrap; }
  .p-shop-body__filters { margin-top: var(--wp--preset--spacing--50); }
  .p-shop-body__grid .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 991.98px) {
  /* Three across down to 600 so a 9-card page never leaves one card alone on its last row (gap-check at 768). */
  .p-shop-body__grid .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .p-shop-body { padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter--phone); }
  .p-shop-body__grid .wc-block-product-template, .p-shop-body__recs-grid .wc-block-product-template { grid-template-columns: minmax(0, 1fr); }
  .p-shop-body__recs-grid .wc-block-product + .wc-block-product { border-left: 0; border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--60); }
  .p-shop-body__empty { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); }
}

/* Motion (stage 10, 00001.5.22.8.b; design/FINDINGS.md "Motion inventory: shop-body"). inc/motion.php makes every card
   li in the grid a pinned hook (data-mo="hook", --mo-i:0, no delay), so each card reveals as it enters. Start states
   live under html.mo and only until the li's .mo-in, so JS off, reduced motion and print show the approved look.
   The first six cards rise in a cascade inside the still datasheet table: each photo settles from 5 percent large in its
   own existing clip and the text cell rises 8 px, by column 120 ms apart (all together under 600). Transform only: the
   cell carries the price and card 1's photo is the desktop LCP element, so nothing takes an opacity start, and the li,
   the ul and their shared 1 px hairlines never move. Cards 7 to 9 have no start state and appear without motion. No
   transition sits on the [data-mo] li, so the kit's reveal and .mo-done stay the kit's. */
@media (min-width: 600px) {
  .mo .p-shop-body__grid li[data-mo]:nth-child(3n+2) { --nv-card: 120ms; }
  .mo .p-shop-body__grid li[data-mo]:nth-child(3n) { --nv-card: 240ms; }
}
.mo .p-shop-body__grid li[data-mo]:nth-child(-n+6) .wc-block-components-product-image img {
  transition: transform 1.4s var(--mo-ease) calc(var(--mo-delay, 0ms) + var(--nv-card, 0ms));
}
.mo .p-shop-body__grid li[data-mo]:nth-child(-n+6) .p-shop-body__cell {
  transition: transform var(--mo-dur) var(--mo-ease) calc(var(--mo-delay, 0ms) + var(--nv-card, 0ms) + 100ms);
}
.mo .p-shop-body__grid li[data-mo]:nth-child(-n+6):not(.mo-in) .wc-block-components-product-image img { transform: scale(1.05); }
.mo .p-shop-body__grid li[data-mo]:nth-child(-n+6):not(.mo-in) .p-shop-body__cell { transform: translate3d(0, 8px, 0); }
/* Filter drawer scrim under 992 (.8.a audit F1): WooCommerce fades the overlay's background-color, outside the motion
   budget. The scrim moves to the overlay's ::before and fades by opacity with Woo's own timing (0.2 s, held 0.3 s on
   close while the dialog slides out); the dialog's 0.5 s transform slide stays Woo's. Painted under the dialog (first
   child, no z-index) inside the overlay's existing fixed, z-index 9999 context; pointer-events none. */
@media (max-width: 991.98px) {
  .p-shop-body__filters .wc-block-product-filters__overlay,
  .p-shop-body__filters.is-overlay-opened .wc-block-product-filters__overlay { background-color: transparent; transition: none; }
  .p-shop-body__filters .wc-block-product-filters__overlay::before {
    content: ""; position: absolute; inset: 0; background: rgba(95, 95, 95, .35); opacity: 0; pointer-events: none;
    transition: opacity .2s .3s;
  }
  .p-shop-body__filters.is-overlay-opened .wc-block-product-filters__overlay::before { opacity: 1; transition-delay: 0s; }
}