@layer components {
  .product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: var(--s-5);
  }
  .product-detail__body {
    margin-block: var(--s-7);
    padding-block-start: var(--s-8);
  }

  .product-detail__book {
    margin-block-start: var(--s-7);
    padding-block-start: var(--s-8);
  }

  .product-detail__title { font-size: var(--fs-h2); }

  .product-detail__price {
    margin-block-start: var(--s-5);
    font-size: var(--fs-price);   /* the decision number gets its own step */
    font-weight: var(--fw-subhead);
    color: var(--ink-900);
  }

  .product-detail__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--s-3);
    margin-block-start: var(--s-6);
  }
  .product-detail__tools {
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
  }

  .product-detail__tools > * + * { border-inline-start: 1px solid var(--line); }

  .product-detail__tools .icon-btn {
    border: 0;
    border-radius: 0;
  }
  .product-detail__tools .icon-btn:hover { background-color: var(--bg-tint); }

  .product-detail__tools .icon-btn[aria-pressed="true"] {
    background-color: var(--bg-alt);
    color: var(--ink-900);
  }

  @media (min-width: 768px) {
    .product-detail { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  }

  @media (min-width: 768px) {
    .product-detail__body,
    .product-detail__book { grid-column: 1 / -1; }
  }
}

/* Single-product overflow containment and grid treatment.
 * Keep these rules local to product detail pages so catalogue archives retain
 * their own rhythm while the product page uses the site's architectural grid.
 */

.product-detail,
.product-detail > *,
.product-detail__gallery,
.product-detail__summary,
.product-gallery,
.product-gallery__trigger {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.product-detail {
  gap: 0;
  max-inline-size: none;
  padding-inline: 0;
  border: 1px solid var(--ink-900);
  background-color: var(--surface);
}

.product-detail__gallery { padding: var(--s-5); }

.product-detail__summary {
  padding: 0;
  border-block-start: 1px solid var(--ink-900);
}

.product-detail__summary > * {
  min-inline-size: 0;
  margin-block: 0;
  padding: var(--s-5);
}

.product-detail__summary > * + * { border-block-start: 1px solid var(--ink-900); }

.product-detail__summary > .product-detail__price,
.product-detail__summary > .feature-strip,
.product-detail__summary > .spec-boxes,
.product-detail__summary > .product-detail__actions,
.product-detail__summary > .product-detail__tools { margin-block: 0; }

.product-detail__summary > .spec-boxes {
  inline-size: auto;
  max-inline-size: none;
  margin-block: var(--s-5);
  margin-inline: var(--s-5);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.product-detail__summary > .product-detail__actions { margin-block-start: 0; }

.product-gallery__trigger,
.product-gallery__main,
.spec-boxes,
.icon-btn { border-radius: 0; }

.product-gallery__main {
  display: block;
  max-inline-size: 100%;
}

.product-gallery__thumbs {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-inline: 0;
  padding-inline: 0;
  list-style: none;
  overscroll-behavior-inline: contain;
}

.product-gallery__thumb,
.product-gallery__thumb img { border-radius: 0; }

.spec-boxes {
  display: block;
  overflow: visible;
}

.product-detail__summary > .spec-boxes {
  border-radius: var(--r-md);
  overflow: hidden;
}

.spec-boxes__row { border-block-end: 1px solid var(--line); }

.spec-boxes__row:last-child { border-block-end: 0; }

.product-detail__body,
.product-detail__book {
  margin: 0;
  padding-block: var(--section-y-compact);
  padding-inline: var(--s-5);
  border-block-start: 1px solid var(--ink-900);
}

.product-detail__body > .faqs:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.product-detail__summary,
.product-detail__notes,
.spec-boxes__value { overflow-wrap: anywhere; }

.product-detail__actions,
.product-detail__tools,
.contact-channels--product {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.product-detail__tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.product-detail__save,
.product-detail__tool {
  min-inline-size: 0;
}

.product-detail__save {
  border-inline-end: 1px solid var(--line);
}

.product-detail__tool + .product-detail__tool {
  border-inline-start: 1px solid var(--line);
}

.product-detail__save > [data-pinnacle-form-wrap="favourite"],
.product-detail__save .favourite {
  inline-size: 100%;
  min-inline-size: 0;
}

.product-detail__save .favourite__step[hidden] { display: none; }

.product-detail__save .favourite__tip { display: none; }

.product-detail__save .favourite__star,
.product-detail__tool {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--field-h);
  padding-inline: var(--s-3);
  border: 0;
  background-color: transparent;
  color: var(--ink-900);
  font: inherit;
  font-weight: var(--fw-subhead);
  cursor: pointer;
}

.product-detail__save .favourite__star::after {
  content: "Save";
  font-size: var(--fs-small);
  font-weight: var(--fw-subhead);
  line-height: var(--lh-small);
}

.product-detail__tool-label {
  min-inline-size: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-subhead);
  line-height: var(--lh-small);
  text-align: center;
}

.product-detail__save .favourite__star:hover,
.product-detail__save .favourite__star:focus-visible,
.product-detail__tool:hover,
.product-detail__tool:focus-visible {
  background-color: var(--bg-tint);
}

.contact-channels--product {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  inline-size: 100%;
}

.contact-channels--product .contact-channels__item {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.contact-channels--product .contact-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: var(--btn-h);
  padding-inline: var(--s-4);
  padding-block: var(--s-1);
  background-color: var(--accent);
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--surface);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui);
  line-height: var(--lh-small);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.contact-channels--product .contact-channel:hover,
.contact-channels--product .contact-channel:focus-visible {
  background-color: var(--accent-hover);
  border-color: transparent;
  color: var(--surface);
  transform: translateY(var(--lift));
}

.contact-channels--product .contact-channel__icon,
.contact-channels--product .contact-channel__icon .pinnacle-icon,
.contact-channels--product .contact-channel__text,
.contact-channels--product .contact-channel__value {
  color: currentColor;
}

.contact-channels--product .contact-channel__icon {
  display: grid;
  place-items: center;
  flex: none;
  line-height: 0;
}

.contact-channels--product .contact-channel__text,
.contact-channels--product .contact-channel__value {
  min-inline-size: 0;
  font: inherit;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .product-detail__gallery { padding: var(--s-7); }

  .product-detail__summary {
    border-block-start: 0;
    border-inline-start: 1px solid var(--ink-900);
  }

  .product-detail__summary > * { padding: var(--s-7); }

  .product-detail__summary > .spec-boxes {
    margin-block: var(--s-7);
    margin-inline: var(--s-7);
    padding: 0;
  }

  .product-detail__body,
  .product-detail__book { padding-inline: var(--s-7); }
}

/* The stronger gallery weighting is desktop-only. Tablet keeps catalogue.css's
 * more balanced two-column split; phones remain a single 100% column. */

@media (min-width: 1024px) {
  .product-detail {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}