/*
 * Catalogue and product page.
 *
 * Loaded only where WooCommerce is rendering a shop, category, tag, search or
 * product view. Loads after chrome.css, so anything both files name (crumbs,
 * pagination, the sticky bar) resolves to the rules written here.
 *
 * The product card itself is NOT styled here. It is the shared plate anatomy
 * from base.css (.nd-plate, .nd-tile, .nd-label), the same card the homepage
 * shelf uses. This file only lays out the grid the plates sit in, the archive
 * head above it, and the product page.
 *
 * Register: warm paper, charcoal ink, Fraunces 400 titles over Inter, every
 * product on the same oat tile, one moss button per screen, no shadows except
 * the sticky bar, hover only under (hover: hover) and (pointer: fine).
 */

/* ========================================================================
   BREADCRUMBS
   ======================================================================== */

.nd-crumbs {
  padding-block: var(--nd-s-4) 0;
  font-family: var(--nd-font);
  font-size: var(--nd-fs-xs);
  line-height: 1.5;
  color: var(--nd-ink-500);
}

.nd-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nd-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--nd-s-2);
  min-width: 0;
}

.nd-crumbs a {
  color: var(--nd-ink-500);
  text-decoration: none;
}

.nd-crumbs a:hover {
  color: var(--nd-ink-900);
  text-decoration: underline;
  text-decoration-color: var(--nd-accent);
  text-underline-offset: .2em;
}

.nd-crumbs [aria-hidden="true"] { color: var(--nd-rule-strong); }

.nd-crumbs [aria-current="page"] {
  color: var(--nd-ink-700);
  font-weight: var(--nd-fw-regular);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

/* ========================================================================
   ARCHIVE
   ======================================================================== */

.nd-archive {
  padding-block: var(--nd-s-5) var(--nd-rhythm-band);
  overflow-x: clip;
}

/*
 * The head is an index row: a small label in the left rail saying what kind
 * of page this is, the title, count and description in the right. The rule
 * sits BELOW the head (no top rule: the breadcrumb already opened the page).
 */
.nd-archive__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--nd-s-2);
  padding-bottom: var(--nd-s-6);
  margin-bottom: 40px;
  border-bottom: 1px solid var(--nd-rule-strong);
}

.nd-archive__kind { margin-bottom: var(--nd-s-2); }

.nd-archive__title {
  margin: 0;
  font-family: var(--nd-font-display);
  font-size: var(--nd-fs-2xl);
  font-weight: var(--nd-fw-regular);
  line-height: var(--nd-lh-tight);
  letter-spacing: var(--nd-track-title);
  color: var(--nd-ink-900);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.nd-archive__count {
  margin: 0;
  font-family: var(--nd-font);
  font-size: var(--nd-fs-xs);
  line-height: 1.5;
  color: var(--nd-ink-500);
  font-variant-numeric: tabular-nums;
}

.nd-archive__intro {
  margin-top: var(--nd-s-3);
  font-family: var(--nd-font);
  font-size: var(--nd-fs-base);
  line-height: var(--nd-lh-base);
  color: var(--nd-ink-700);
  max-width: var(--nd-measure-short);
}

.nd-archive__intro p { margin: 0; max-width: none; }
.nd-archive__intro p + p { margin-top: var(--nd-s-3); }

@media (min-width: 1024px) {
  .nd-archive__head {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--nd-s-6);
    align-items: start;
  }

  .nd-archive__kind {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    /* Sits on the title's cap line rather than its box top. */
    padding-top: .55em;
  }

  .nd-archive__title,
  .nd-archive__count,
  .nd-archive__intro { grid-column: 2; }
}

/*
 * Never print a zero.
 *
 * The page used to say "0 products" and then, immediately below it, "The shop
 * is not open yet" -- a count stacked on a negative. A count is information
 * only when there is something to count.
 */
.nd-archive:has(.nd-empty) .nd-archive__count { display: none; }

/* ------------------------------------------------------------ the grid --- */
/*
 * Two columns on a phone, three from 768, four from 1280. The related and
 * up-sell blocks on the product page print WooCommerce's own ul.products with
 * the same card inside it, so they take the same grid.
 *
 * minmax(0, 1fr) everywhere: an implicit column takes its width from the
 * longest word in a title and hangs past the gutter at 390px otherwise.
 */
.nd-products,
.nd-product__detail ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nd-products > li,
.nd-product__detail ul.products > li {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

@media (min-width: 768px) {
  .nd-products,
  .nd-product__detail ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nd-s-7) var(--nd-s-5);
  }
}

@media (min-width: 1280px) {
  .nd-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The card is .nd-plate (base.css). Only the catalogue-specific bits live here. */
.nd-pcard { height: auto; }

/* ---------------------------------------------------------- pagination --- */

.nd-pagination {
  padding-block: var(--nd-s-7) 0;
  font-family: var(--nd-font);
  font-size: var(--nd-fs-sm);
  font-variant-numeric: tabular-nums;
}

.nd-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nd-s-2);
}

.nd-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: var(--nd-control-h-sm);
  min-height: var(--nd-control-h-sm);
  padding-inline: var(--nd-s-3);
  margin: 0;
  border: 1px solid var(--nd-rule);
  border-radius: var(--nd-r-md);
  background: none;
  color: var(--nd-ink-900);
  font-weight: var(--nd-fw-medium);
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--nd-dur-snap) var(--nd-ease-mech),
              background-color var(--nd-dur-snap) var(--nd-ease-mech);
}

.nd-pagination .page-numbers.current {
  background: var(--nd-accent);
  border-color: var(--nd-accent);
  color: var(--nd-accent-ink);
}

.nd-pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--nd-ink-500);
  min-width: auto;
  padding-inline: var(--nd-s-1);
}

@media (hover: hover) and (pointer: fine) {
  .nd-pagination a.page-numbers:hover {
    border-color: var(--nd-ink-900);
    background: var(--nd-tint);
  }
}

/* --------------------------------------------------------- empty state --- */
/*
 * The empty state owns its screen instead of floating in it.
 *
 * The measure belongs on the prose, not on the block: capping the whole thing
 * caught the button row as well and stacked two buttons that belong beside
 * each other.
 */
.nd-empty {
  display: grid;
  gap: var(--nd-s-5);
  justify-items: start;
  align-content: center;
  min-height: clamp(320px, 44vh, 480px);
  padding-block: var(--nd-rhythm-band);
}

.nd-empty h2 {
  margin: 0;
  font-family: var(--nd-font-display);
  font-size: var(--nd-fs-2xl);
  font-weight: var(--nd-fw-regular);
  line-height: var(--nd-lh-tight);
  letter-spacing: var(--nd-track-title);
  color: var(--nd-ink-900);
  max-width: var(--nd-measure-short);
  text-wrap: balance;
}

.nd-empty p {
  margin: 0;
  font-size: var(--nd-fs-md);
  line-height: var(--nd-lh-title);
  color: var(--nd-ink-500);
  max-width: var(--nd-measure-short);
}

.nd-empty__actions { display: flex; flex-wrap: wrap; gap: var(--nd-s-3); }

/* The footer has no top margin of its own, so the empty state pays for its
   distance from it rather than relying on somebody else's. */
.nd-empty:last-child { padding-block-end: var(--nd-rhythm-band); }

/* ========================================================================
   THE PRODUCT PAGE
   ======================================================================== */

.nd-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nd-s-6);
  padding-block: var(--nd-s-4) var(--nd-s-8);
  overflow-x: clip;
}

@media (min-width: 1024px) {
  .nd-product {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--nd-s-8);
    align-items: start;
  }
}

.nd-product__media,
.nd-product__summary { min-width: 0; }

/* The demonstration film beneath the gallery: full column width. */
.nd-product__media .nd-video {
  max-width: none;
  margin-block-start: var(--nd-s-5);
}

/* ------------------------------------------------------- the gallery ----- */
/*
 * WooCommerce's default gallery template puts every image into one wrapper and
 * leaves the layout to the theme. First image on the oat tile, contained and
 * multiplied like every other product picture on the site; the rest in a
 * five-up strip beneath it.
 */
.woocommerce-product-gallery { position: relative; }

/*
 * The wrapper is a flexslider track: inline width: 1000%, transformed by
 * script. Nothing here may lay it out -- it only needs its slides square.
 */
.woocommerce-product-gallery__wrapper { margin: 0; padding: 0; list-style: none; }

.woocommerce-product-gallery__image {
  margin: 0;
  border-radius: var(--nd-r-lg);
  overflow: hidden;
  background: var(--nd-tint);
  aspect-ratio: 1 / 1;
}

.woocommerce-product-gallery__image a {
  display: block;
  width: 100%;
  height: 100%;
}

.woocommerce-product-gallery__image img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 8%;
  object-fit: contain;
  mix-blend-mode: multiply;
  border-radius: 0;
}

/* wp_get_attachment_image() prints width/height; the reset's
   img[width][height] { height: auto } would otherwise un-fill the box. */
.woocommerce-product-gallery__image img[width][height] { height: 100%; }

/*
 * The gallery has to know its own height before the carousel starts.
 *
 * Measured on a 390px phone: the gallery is 17,974px tall before flexslider
 * collapses it and 432px after, because all five slides stack at full width
 * until the script runs. Until flexslider marks a slide active, only the
 * first slide is shown, and that slide already has a square aspect ratio --
 * so the box is the right size from the first frame.
 */
.woocommerce-product-gallery .flex-viewport {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--nd-r-lg);
}

/* And if the script never runs at all, only the first slide is shown. */
.woocommerce-product-gallery__wrapper:not([style])
  > .woocommerce-product-gallery__image:not(:first-child) {
  display: none;
}

/* The carousel's own navigation, styled as the thumbnail strip it is. */
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--nd-s-3);
  margin: var(--nd-s-3) 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li { margin: 0; min-width: 0; }

.woocommerce-product-gallery .flex-control-thumbs img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 10%;
  object-fit: contain;
  mix-blend-mode: multiply;
  background: var(--nd-tint);
  border-radius: var(--nd-r-md);
  box-shadow: var(--nd-inset-hair) transparent;
  cursor: pointer;
  opacity: 1;
  transition: box-shadow var(--nd-dur-snap) var(--nd-ease-mech),
              background-color var(--nd-dur-snap) var(--nd-ease-mech);
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  box-shadow: var(--nd-inset-hair) var(--nd-ink-900);
}

@media (hover: hover) and (pointer: fine) {
  .woocommerce-product-gallery .flex-control-thumbs img:hover {
    background: var(--nd-tint-deep);
  }
}

/*
 * The zoom trigger. WooCommerce prints it as a bare emoji anchor in the corner
 * of the gallery; unstyled it floats above the image as a stray glyph.
 */
.woocommerce-product-gallery__trigger {
  position: absolute;
  z-index: 2;
  top: var(--nd-s-3);
  inset-inline-end: var(--nd-s-3);
  display: grid;
  place-items: center;
  width: var(--nd-tap-min);
  height: var(--nd-tap-min);
  border-radius: var(--nd-r-md);
  background: var(--nd-paper);
  color: var(--nd-ink-900);
  box-shadow: none;
  font-size: var(--nd-fs-md);
  line-height: 1;
  text-decoration: none;
}

/* WooCommerce's sale flash, if the hook prints it: the same badge as a tile. */
.nd-product__media .onsale {
  position: absolute;
  z-index: 2;
  top: var(--nd-s-3);
  inset-inline-start: var(--nd-s-3);
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--nd-r-md);
  background: var(--nd-accent-soft);
  color: var(--nd-accent-deep);
  font-family: var(--nd-font);
  font-size: var(--nd-fs-micro);
  font-weight: var(--nd-fw-medium);
  line-height: var(--nd-lh-label);
  letter-spacing: var(--nd-track-micro);
  text-transform: uppercase;
}

/* ------------------------------------------------------- the summary ----- */

.nd-product__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nd-s-4);
  align-content: start;
}

.nd-product__summary > * { min-width: 0; }

/* The full name, in the serif, at the stage/FAQ tier. Never 800. */
.nd-product__summary .product_title {
  margin: 0;
  font-family: var(--nd-font-display);
  font-size: var(--nd-fs-xl);
  font-weight: var(--nd-fw-regular);
  line-height: var(--nd-lh-snug-title);
  letter-spacing: var(--nd-track-title);
  color: var(--nd-ink-900);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* The price is a fact about the product, not its headline. */
.nd-product__summary .price {
  margin: 0;
  font-family: var(--nd-font);
  font-size: var(--nd-fs-md);
  font-weight: var(--nd-fw-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--nd-ink-900);
  font-variant-numeric: tabular-nums lining-nums;
}

.nd-product__summary .price del {
  font-weight: var(--nd-fw-regular);
  color: var(--nd-ink-500);
  margin-right: var(--nd-s-2);
}

.nd-product__summary .price ins { text-decoration: none; color: var(--nd-ink-900); }

.nd-product__summary .woocommerce-product-details__short-description {
  color: var(--nd-ink-500);
  font-size: var(--nd-fs-md);
  line-height: var(--nd-lh-title);
  max-width: var(--nd-measure-short);
  margin-block: var(--nd-s-2) var(--nd-s-3);
}

.nd-product__summary .woocommerce-product-details__short-description p {
  margin: 0;
  max-width: none;
}

.nd-product__summary .woocommerce-product-details__short-description p + p {
  margin-top: var(--nd-s-3);
}

/* Stock line: Inter 15/500, state colour only on the word. */
.nd-product__summary .stock {
  margin: 0;
  font-size: var(--nd-fs-sm);
  font-weight: var(--nd-fw-medium);
}

.nd-product__summary .stock.in-stock { color: var(--nd-success); }
.nd-product__summary .stock.out-of-stock { color: var(--nd-error); }

/* --------------------------------------------------------- buy form ----- */

/* The variation form: a label above its control, on the page's own axis. */
.nd-product__summary table.variations {
  width: 100%;
  margin: 0 0 var(--nd-s-4);
  border: 0;
  border-collapse: collapse;
}

.nd-product__summary table.variations tr,
.nd-product__summary table.variations th,
.nd-product__summary table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  text-align: start;
  background: none;
}

/* The five .nd-label declarations, repeated here because WooCommerce prints
   the th and the class cannot be added without overriding its template. */
.nd-product__summary table.variations th,
.nd-product__summary table.variations th label {
  font-family: var(--nd-font);
  font-size: var(--nd-fs-micro);
  font-weight: var(--nd-fw-medium);
  line-height: var(--nd-lh-label);
  letter-spacing: var(--nd-track-micro);
  text-transform: uppercase;
  color: var(--nd-ink-500);
}

.nd-product__summary table.variations th { padding-block-end: var(--nd-s-2); }
.nd-product__summary table.variations td + th,
.nd-product__summary table.variations tr + tr th { padding-block-start: var(--nd-s-4); }

.nd-product__summary .variations select {
  width: 100%;
  max-width: 24rem;
  min-height: var(--nd-control-h);
  padding-inline: var(--nd-s-4);
  background: var(--nd-white);
  color: var(--nd-ink-900);
  border: 1px solid var(--nd-border-control);
  border-radius: var(--nd-r-md);
  font-family: var(--nd-font);
  font-size: 1rem;
}

.nd-product__summary .reset_variations {
  display: inline-block;
  margin-block-start: var(--nd-s-2);
  font-size: var(--nd-fs-xs);
  color: var(--nd-ink-500);
}

/* Quantity and the one button that matters. */
.nd-product__summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nd-s-3);
  margin-block: var(--nd-s-2) var(--nd-s-4);
}

.nd-product__summary .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nd-s-3);
  width: 100%;
}

.nd-product__summary .woocommerce-variation-price { width: 100%; }
.nd-product__summary .woocommerce-variation-availability { width: 100%; }

.nd-product__summary .quantity { display: inline-flex; }

.nd-product__summary .quantity input[type="number"],
.nd-commerce .nd-main .quantity input[type="number"] {
  width: 5.5rem;
  min-height: var(--nd-control-h-lg);
  padding-inline: var(--nd-s-3);
  background: var(--nd-white);
  color: var(--nd-ink-900);
  border: 1px solid var(--nd-border-control);
  border-radius: var(--nd-r-md);
  font-family: var(--nd-font);
  font-size: 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
}

/* The primary button recipe from base.css, applied to WooCommerce's own
   button class: 56px, 4px radius, accent fill, no shadow, no hairline. */
.nd-product__summary .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: var(--nd-control-h-lg);
  min-width: var(--nd-tap-min);
  padding: 0 28px;
  border: 1px solid var(--nd-accent);
  border-radius: var(--nd-r-md);
  background: var(--nd-accent);
  color: var(--nd-accent-ink);
  box-shadow: none;
  font-family: var(--nd-font);
  font-size: var(--nd-fs-base);
  font-weight: var(--nd-fw-medium);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--nd-dur-snap) var(--nd-ease-mech),
              border-color var(--nd-dur-snap) var(--nd-ease-mech),
              scale var(--nd-dur-snap) var(--nd-ease-mech);
}

.nd-product__summary .single_add_to_cart_button:active {
  scale: .985;
  transition-duration: var(--nd-dur-tick);
}

/*
 * A disabled buy button still has to be readable. WCAG exempts disabled
 * controls from the contrast minimum; a button nobody can read is a usability
 * failure whatever the audit permits. It has to LOOK unavailable, so no fill.
 * WooCommerce paints its own disabled state with a class that outranks ours
 * unless body.woocommerce is on the selector.
 */
body.woocommerce .nd-product__summary .single_add_to_cart_button.disabled,
body.woocommerce .nd-product__summary .single_add_to_cart_button:disabled,
body.woocommerce .nd-product__summary .single_add_to_cart_button.wc-variation-selection-needed,
.nd-product__summary .single_add_to_cart_button:disabled,
.nd-product__summary .single_add_to_cart_button.disabled {
  background: none;
  color: var(--nd-ink-500);
  border: 1px dashed var(--nd-border-control);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  scale: 1;
}

@media (hover: hover) and (pointer: fine) {
  .nd-product__summary .single_add_to_cart_button:hover {
    background: var(--nd-accent-deep);
    border-color: var(--nd-accent-deep);
  }

  body.woocommerce .nd-product__summary .single_add_to_cart_button.disabled:hover,
  .nd-product__summary .single_add_to_cart_button:disabled:hover {
    background: none;
    border-color: var(--nd-border-control);
  }
}

@media (max-width: 429px) {
  .nd-product__summary .single_add_to_cart_button { width: 100%; }
}

/* ------------------------------------------------------- reassurance ---- */
/* Unchanged by design: inc/woocommerce.php is not edited in this pass. */

.nd-reassure {
  display: grid;
  gap: var(--nd-s-2);
  margin: 0;
  padding: var(--nd-s-4);
  list-style: none;
  background: var(--nd-green-soft);
  border: 1px solid var(--nd-green-line);
  border-radius: var(--nd-r-md);
}

.nd-reassure__item {
  display: flex;
  align-items: flex-start;
  gap: var(--nd-s-2);
  font-size: var(--nd-fs-sm);
  color: var(--nd-ink-700);
}

.nd-reassure__item::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--nd-accent);
}

/* The meta line: small, quiet, and no longer carrying internal tags. */
.nd-product__summary .product_meta {
  display: block;
  margin-block-start: var(--nd-s-4);
  padding-block-start: var(--nd-s-4);
  border-block-start: 1px solid var(--nd-rule);
  font-size: var(--nd-fs-xs);
  line-height: 1.6;
  color: var(--nd-ink-500);
}

.nd-product__summary .product_meta > span { display: block; }
.nd-product__summary .product_meta a { color: var(--nd-ink-700); }

/*
 * WooCommerce prints the "Tags:" label whether or not any tags survive. Every
 * tag on these products is an internal merchandising lever and they are all
 * filtered out, so the label was introducing a list with nothing in it.
 */
.product_meta .tagged_as:not(:has(a)) { display: none; }

/* ---------------------------------------------------------- the tabs ----- */
/*
 * Rules, not a boxed tab strip. The panel takes the same chapter spacing as a
 * policy page, because the description is long-form copy with real headings in
 * it and it was running together without them.
 */
.nd-product__detail { padding-block: 0 var(--nd-s-7); min-width: 0; }

.woocommerce-tabs { margin-block-start: var(--nd-rhythm-band); }

.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-s-5);
  margin: 0 0 var(--nd-s-6);
  padding: 0 0 var(--nd-s-3);
  list-style: none;
  border-block-end: 1px solid var(--nd-rule);
}

.woocommerce-tabs ul.tabs li { margin: 0; padding: 0; }

/* The five .nd-label declarations, again: WooCommerce prints the links. */
.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding-block: var(--nd-s-2);
  font-family: var(--nd-font);
  font-size: var(--nd-fs-micro);
  font-weight: var(--nd-fw-medium);
  line-height: var(--nd-lh-label);
  letter-spacing: var(--nd-track-micro);
  text-transform: uppercase;
  color: var(--nd-ink-500);
  text-decoration: none;
  box-shadow: none;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--nd-ink-900);
  box-shadow: 0 1px 0 var(--nd-accent);
}

@media (hover: hover) and (pointer: fine) {
  .woocommerce-tabs ul.tabs li a:hover { color: var(--nd-ink-900); }
}

.woocommerce-Tabs-panel { max-width: var(--nd-measure); min-width: 0; }

.woocommerce-Tabs-panel > h2:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3 {
  font-family: var(--nd-font-display);
  font-size: var(--nd-fs-lg);
  font-weight: var(--nd-fw-medium);
  line-height: var(--nd-lh-snug);
  margin-block: clamp(2rem, 3.5vw, 2.75rem) var(--nd-s-3);
}

.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li { color: var(--nd-ink-700); }

.woocommerce-Tabs-panel img { border-radius: var(--nd-r-md); margin-block: var(--nd-s-3); }

.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
  display: grid;
  gap: var(--nd-s-2);
  padding-inline-start: var(--nd-s-5);
}

/* One measure in the description panel, not two. */
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol,
.woocommerce-Tabs-panel p { max-width: var(--nd-measure); }

.woocommerce-Tabs-panel table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
}

.woocommerce-Tabs-panel table th,
.woocommerce-Tabs-panel table td {
  text-align: start;
  padding: var(--nd-s-3) var(--nd-s-4) var(--nd-s-3) 0;
  border-block-end: 1px solid var(--nd-rule);
  font-size: var(--nd-fs-sm);
}

.woocommerce-Tabs-panel table th { color: var(--nd-ink-900); font-weight: var(--nd-fw-medium); }
.woocommerce-Tabs-panel table td { color: var(--nd-ink-700); }

/* The attributes table WooCommerce prints in "Additional information". */
.woocommerce-Tabs-panel .shop_attributes th,
.woocommerce-Tabs-panel .shop_attributes td { font-size: var(--nd-fs-sm); }

.woocommerce-Tabs-panel .shop_attributes p { margin: 0; }

/*
 * The detail, on the page's rail.
 *
 * The description is prose and stays at the measure -- but it was sitting in a
 * measure-width column with the whole right half of the page empty beneath the
 * gallery. The tab list moves into the 3fr rail this theme already uses on
 * every policy page, so the detail reads in the same shape as the rest of the
 * site instead of as a narrow column floating in paper.
 */
@media (min-width: 1024px) {
  .woocommerce-tabs {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--nd-s-6);
    align-items: start;
  }

  .woocommerce-tabs > ul.tabs {
    grid-column: 1;
    display: grid;
    justify-items: start;
    gap: var(--nd-s-3);
    margin: 0;
    padding: 0;
    border-block-end: 0;
    position: sticky;
    top: calc(var(--nd-header-h) + var(--nd-s-5));
  }

  .woocommerce-tabs > ul.tabs li a { padding-block: var(--nd-s-1); }

  .woocommerce-tabs > .woocommerce-Tabs-panel { grid-column: 2; }
}

/* ------------------------------------------------- related products ------ */
/* Same card, same grid: the ul.products rule above covers the list. */

.related.products,
.up-sells { margin-block-start: var(--nd-rhythm-band); padding: 0; }

.related.products > h2,
.up-sells > h2 {
  margin: 0 0 var(--nd-s-6);
  padding-block-start: var(--nd-s-5);
  border-block-start: 1px solid var(--nd-rule-strong);
  font-family: var(--nd-font-display);
  font-size: var(--nd-fs-2xl);
  font-weight: var(--nd-fw-regular);
  line-height: var(--nd-lh-tight);
  letter-spacing: var(--nd-track-title);
  color: var(--nd-ink-900);
}

/* -------------------------------------------------- the sticky buy bar --- */
/* The one lifted surface on the product page. Hooks (data-nd-sticky,
   is-visible, hidden) are driven by ui.js and are not touched here. */

.nd-sticky-atc {
  background: var(--nd-white);
  border-top: 1px solid var(--nd-rule);
  box-shadow: var(--nd-lift-up);
  padding: var(--nd-s-3) var(--nd-gutter);
}

.nd-sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nd-s-4);
  max-width: var(--nd-container);
  margin-inline: auto;
  min-width: 0;
}

.nd-sticky-atc__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--nd-font);
  font-size: var(--nd-fs-sm);
  font-weight: var(--nd-fw-medium);
  color: var(--nd-ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nd-sticky-atc__price {
  flex: 0 0 auto;
  font-family: var(--nd-font);
  font-size: var(--nd-fs-sm);
  font-weight: var(--nd-fw-regular);
  color: var(--nd-ink-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.nd-sticky-atc__price del { color: var(--nd-ink-500); }
.nd-sticky-atc__price ins { text-decoration: none; color: var(--nd-ink-900); }

.nd-sticky-atc__btn { flex: 0 0 auto; padding-inline: var(--nd-s-5); }

@media (max-width: 429px) {
  .nd-sticky-atc__price { display: none; }
}

/* ========================================================================
   REDUCED MOTION
   ======================================================================== */
/* Every duration above is a token that tokens.css zeroes under reduced
   motion; the transforms are belt-and-braces. */
@media (prefers-reduced-motion: reduce) {
  .nd-pagination .page-numbers,
  .woocommerce-product-gallery .flex-control-thumbs img,
  .nd-product__summary .single_add_to_cart_button { transition: none; }

  .nd-product__summary .single_add_to_cart_button:active { scale: 1; }
}