/* Product template (T48). Tokens only, phones first (390 → 600 → 1024).
   Shared parts bring their own CSS: breadcrumb (blocks/hero.css), Specifications (blocks/table.css),
   Available colours (blocks/swatchLibrary.css), files (blocks/downloadsList.css), guide cards (shared/pageCard.css),
   Used in (blocks/caseStudyTeasers.css), closing message (blocks/callToAction.css). */

/* ── Header: text, then photos; side by side from 1024 px ─────────────────── */
.product-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}
.product-header__text { min-width: 0; }
.product-header .breadcrumb { margin-bottom: var(--space-8); }
.product-header__name { margin: 0; }
.product-header__line {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-body-md);
}

/* Key facts: label over value, split by hairlines (the prototype's fact rows). */
.product-header__facts {
  margin: var(--space-8) 0 0;
  padding: 0;
  max-width: var(--container-text);
  border-top: 1px solid var(--color-hairline);
}
.product-header__fact {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-hairline);
}
.product-header__fact-label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: var(--color-muted);
}
.product-header__fact-value {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-body);
  color: var(--color-heading);
  overflow-wrap: anywhere;
}
.product-header__actions { margin: var(--space-8) 0 0; }
.product-header__pack { text-align: left; white-space: normal; }

/* ── Photos: main image + thumbnails ──────────────────────────────────────── */
.product-photos { min-width: 0; }
.product-photos__slides {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-photos__slide { margin: 0; }
.product-photos__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
/* Without script every photo shows and the thumbnails stay hidden; product.js adds --enhanced. */
.product-photos__thumbs { display: none; }
.product-photos--enhanced .product-photos__slide:not(.is-active) { display: none; }
.product-photos--enhanced .product-photos__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-1);   /* room for the focus ring on every side */
  list-style: none;
}
.product-photos__thumb-item { margin: 0; }
.product-photos__thumb {
  display: block;
  width: 64px;
  min-height: var(--tap-min);
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
}
.product-photos__thumb[aria-pressed="true"] { border-color: var(--color-heading); }
.product-photos__thumb:hover { border-color: var(--color-border); }
.product-photos__thumb[aria-pressed="true"]:hover { border-color: var(--color-heading); }
.product-photos__thumb-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-md) - 2px);
}

/* ── Available colours: the link under the swatches ───────────────────────── */
.product-swatch-link { padding-bottom: var(--section-space); }
.swatches + .product-swatch-link { margin-top: calc(-1 * var(--section-space) + var(--space-6)); }

/* ── Helpful resources and guides ─────────────────────────────────────────── */
.product-guides__heading { margin: 0 0 var(--space-8); }
.product-guides__list { margin: 0; padding: 0; list-style: none; }
.product-guides__item { margin: 0; min-width: 0; }
/* Files straight under the guide cards: one section, so a smaller gap than between sections. */
.product-guides + .product-files--after-guides { margin-top: calc(-1 * var(--section-space) + var(--space-12)); }

@media (min-width: 600px) {
  .product-photos__thumb { width: 80px; }
}

@media (min-width: 1024px) {
  .product-header__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-16);
    align-items: center;
  }
  .product-swatch-link .container { text-align: right; }
  .swatches + .product-swatch-link { margin-top: calc(-1 * var(--section-space) + var(--space-8)); }
}