/* ---------------------------------------------------------------
   Single product — gallery, enquiry summary, spec panels, related.
   Loads after products.css, which the related-products row reuses.
   --------------------------------------------------------------- */

.jb-product { padding-block: var(--jb-s6) var(--jb-s8); }

.jb-product__top {
  display: grid;
  gap: var(--jb-s5);
  margin-top: var(--jb-s4);
}

@media (min-width: 900px) {
  .jb-product__top {
    /* minmax(0, …) rather than a bare fr: without it a long unbroken word in
       the summary can force the column wider than its share. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--jb-s7);
    align-items: start;
  }
}

/* ---------- Gallery ---------- */

@media (min-width: 1000px) {
  /* Follows a long description down the page. The offset clears the floating
     header bar (64px content + its 14px margin, plus breathing room). */
  .jb-gallery {
    position: sticky;
    top: 104px;
  }
}

.jb-gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: var(--jb-100);
  overflow: hidden;
}

.jb-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The placeholder is artwork in its own right — it fills the panel. */
.jb-gallery__img--placeholder { object-fit: cover; }

.jb-gallery__thumbs {
  display: flex;
  gap: var(--jb-s2);
  margin: var(--jb-s3) 0 0;
  padding: 0;
  list-style: none;
  /* Scrolls rather than wraps: a product with eight photos would otherwise
     push the summary down the page on a phone. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jb-gallery__thumbs::-webkit-scrollbar { display: none; }

.jb-gallery__thumb {
  display: block;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  border: 1px solid var(--jb-200);
  background: var(--jb-100);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.jb-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.jb-gallery__thumb:hover { border-color: var(--jb-300); }
.jb-gallery__thumb.is-active {
  border-color: var(--jb-amber);
  box-shadow: 0 0 0 2px var(--jb-amber);
}

/* ---------- Summary ---------- */

.jb-summary__cat {
  display: inline-block;
  font-size: var(--jb-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jb-500);
  transition: color .15s ease;
}
.jb-summary__cat:hover { color: var(--jb-amber-dark); }

.jb-summary__title {
  margin: var(--jb-s2) 0 0;
  font-family: var(--jb-font-display);
  /* Sits below the full-width page titles on About and Contact, because it
     lives in a half-width column and product names run long — but close
     enough that the product page does not read as a lesser screen. */
  font-size: clamp(2rem, 4.8vw, 2.9rem);
  font-weight: var(--jb-display-weight);
  line-height: 1.08;
  letter-spacing: var(--jb-display-tracking);
  text-wrap: balance;
}

/* Accent lettering, no field. --jb-amber-dark rather than --jb-amber: the
   brand amber sits at 1.9:1 on white and is genuinely hard to read, where
   amber-dark reaches ~2.4:1. That is still under the 3:1 WCAG asks of large
   text, so this is a deliberate call — #c07f00 is the nearest amber that
   passes, if compliance ever has to win. */
.jb-summary__price {
  margin-top: var(--jb-s4);
  font-family: var(--jb-font-display);
  font-size: clamp(1.85rem, 4vw, 2.4rem);
  font-weight: var(--jb-display-weight);
  line-height: 1.15;
  color: var(--jb-amber-dark);
}
/* The card's chip is unwound here — this price is lettering, not a field. */
.jb-summary__price .jb-price {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.jb-summary__price del { margin-inline-end: 8px; opacity: .45; font-size: .7em; }
.jb-summary__price ins { text-decoration: none; }

.jb-summary__excerpt {
  max-width: 56ch;
  margin-top: var(--jb-s4);
  color: var(--jb-700);
}
.jb-summary__excerpt p { margin: 0 0 var(--jb-s3); }
.jb-summary__excerpt p:last-child { margin-bottom: 0; }

.jb-summary__stock {
  display: inline-block;
  margin: var(--jb-s4) 0 0;
  padding: 6px var(--jb-s3);
  border-radius: var(--jb-radius);
  background: var(--jb-amber-soft);
  font-size: var(--jb-fs-sm);
  font-weight: 600;
  color: #7a5200;
}

/* ---------- Actions ---------- */

.jb-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jb-s3);
  margin-top: var(--jb-s5);
}

.jb-btn--lg {
  padding: 14px var(--jb-s5);
  font-size: var(--jb-fs-md);
}
.jb-btn--lg .jb-icon { width: 20px; height: 20px; }

/* Secondary action: the phone number should not compete with the enquiry. */
.jb-btn--ghost {
  border: 1px solid var(--jb-300);
  background: transparent;
  color: var(--jb-ink);
}
.jb-btn--ghost:hover {
  background: var(--jb-ink);
  border-color: var(--jb-ink);
  color: var(--jb-white);
}

/* One per line on small screens — two 44px targets side by side end up too
   narrow to read a phone number in. */
@media (max-width: 560px) {
  .jb-summary__actions { flex-direction: column; align-items: stretch; }
  .jb-summary__actions .jb-btn { justify-content: center; }
}

.jb-summary__note {
  margin: var(--jb-s3) 0 0;
  max-width: 48ch;
  font-size: var(--jb-fs-sm);
  color: var(--jb-500);
}

/* ---------- Meta ---------- */

.jb-summary__meta {
  margin: var(--jb-s5) 0 0;
  padding-top: var(--jb-s4);
  border-top: 1px solid var(--jb-200);
  font-size: var(--jb-fs-sm);
}
.jb-summary__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jb-s2);
  padding-block: 5px;
}
.jb-summary__meta dt {
  min-width: 88px;
  font-weight: 700;
  color: var(--jb-500);
}
.jb-summary__meta dd { margin: 0; color: var(--jb-ink); }
.jb-summary__meta dd a { text-decoration: underline; text-underline-offset: 3px; }
.jb-summary__meta dd a:hover { color: var(--jb-amber-dark); }

/* ---------- Panels ---------- */

.jb-product__panels {
  display: grid;
  gap: var(--jb-s4);
  margin-top: var(--jb-s7);
}
@media (min-width: 1000px) {
  .jb-product__panels {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--jb-s5);
    align-items: start;
  }
}

/* A product with no attributes has only the description; left in one column
   it would sit beside an empty half of the grid. */
.jb-panel:only-child { grid-column: 1 / -1; }

.jb-panel {
  padding: var(--jb-s5);
  border-radius: 14px;
  background: var(--jb-white);
  box-shadow: 0 1px 2px rgba(16, 21, 27, .06), 0 8px 20px rgba(16, 21, 27, .05);
}
@media (min-width: 900px) { .jb-panel { padding: var(--jb-s6); } }

.jb-panel__title {
  margin: 0 0 var(--jb-s4);
  font-family: var(--jb-font-display);
  font-size: 1.35rem;
  font-weight: var(--jb-display-weight);
  letter-spacing: var(--jb-display-tracking);
  text-transform: uppercase;
}
.jb-panel__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: var(--jb-s2);
  background: var(--jb-amber);
}

/* Editor content — whatever the client writes in the Description box. */
.jb-prose { max-width: 78ch; color: var(--jb-700); }
.jb-prose > :first-child { margin-top: 0; }
.jb-prose > :last-child { margin-bottom: 0; }
.jb-prose p { margin: 0 0 var(--jb-s4); }
.jb-prose h2, .jb-prose h3, .jb-prose h4 {
  margin: var(--jb-s5) 0 var(--jb-s2);
  font-family: var(--jb-font-display);
  font-weight: var(--jb-display-weight);
  letter-spacing: var(--jb-display-tracking);
  color: var(--jb-ink);
}
.jb-prose h2 { font-size: 1.25rem; }
.jb-prose h3 { font-size: 1.1rem; }
.jb-prose ul, .jb-prose ol { margin: 0 0 var(--jb-s4); padding-inline-start: 1.15rem; }
.jb-prose li { margin-bottom: 6px; }
.jb-prose li::marker { color: var(--jb-amber-dark); }
.jb-prose strong { color: var(--jb-ink); }
.jb-prose a { color: var(--jb-amber-dark); text-decoration: underline; text-underline-offset: 3px; }
.jb-prose img { border-radius: 10px; }

/* WooCommerce renders the attribute table; only its skin is ours. */
.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--jb-fs-sm);
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
  padding: 10px 0;
  border-bottom: 1px solid var(--jb-100);
  text-align: start;
  vertical-align: top;
}
.woocommerce-product-attributes tr:last-child th,
.woocommerce-product-attributes tr:last-child td { border-bottom: 0; }
.woocommerce-product-attributes th {
  width: 42%;
  padding-inline-end: var(--jb-s3);
  font-weight: 700;
  color: var(--jb-500);
}
.woocommerce-product-attributes td { color: var(--jb-ink); }
/* WooCommerce's own stylesheet italicises attribute values and zebra-stripes
   the rows; both fight the border-separated table above. */
.woocommerce-product-attributes p { margin: 0; font-style: normal; }
/* Woo stripes even rows with `.woocommerce table.shop_attributes
   tr:nth-child(2n) td` — (0,3,3). Beating that needs a fourth class-level
   selector, hence the panel chain and the :nth-child(n); the borders above do
   the row separation instead. */
.jb-panel .jb-panel__body table.woocommerce-product-attributes tr:nth-child(n) th,
.jb-panel .jb-panel__body table.woocommerce-product-attributes tr:nth-child(n) td {
  background: transparent;
}

/* Woo already stacks the cells below 768px; this owns that layout rather than
   inheriting a two-column rule that has become a label sitting on its own
   bordered line. Same selector chain, for the same specificity reason. */
@media (max-width: 768px) {
  .jb-panel .jb-panel__body table.woocommerce-product-attributes tr:nth-child(n) th,
  .jb-panel .jb-panel__body table.woocommerce-product-attributes tr:nth-child(n) td {
    display: block;
    width: auto;
    padding-inline: 0;
  }
  .jb-panel .jb-panel__body table.woocommerce-product-attributes tr:nth-child(n) th {
    padding: var(--jb-s3) 0 0;
    border-bottom: 0;
    font-size: var(--jb-fs-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .jb-panel .jb-panel__body table.woocommerce-product-attributes tr:nth-child(n) td {
    padding: 2px 0 var(--jb-s3);
  }
}

/* ---------- Related ---------- */

.jb-related { margin-top: var(--jb-s8); }

.jb-related__title {
  margin: 0;
  font-family: var(--jb-font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: var(--jb-display-weight);
  letter-spacing: var(--jb-display-tracking);
  text-transform: uppercase;
}
.jb-related__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: var(--jb-s3);
  background: var(--jb-amber);
}