/* DeviceOpen Tool Box product page — mobile-first. Layout rhythm follows tokens/layout.css +
   tokens/spacing.css; typography follows the token system's two-tier (mobile / desktop) contract
   in tokens/typography.css. Breakpoints match home.css: 834px / 1200px / 1440px. */

.section { border-top: var(--dl-border-hairline) solid var(--dl-border-default); }

/* Shared mono section label, doubles as an h2 so heading order stays intact. */
.section-label {
  display: block; margin: 0 0 var(--dl-space-2);
  font-family: var(--dl-font-mono); font-size: var(--dl-caption-size); font-weight: var(--dl-weight-regular);
  letter-spacing: var(--dl-label-tracking); text-transform: uppercase; color: var(--dl-text-accent);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding: var(--dl-space-2) var(--dl-gutter-mobile) 0; }
.breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--dl-inline-gap-tight);
  margin: 0; padding: 0; list-style: none;
  font-family: var(--dl-font-mono); font-size: var(--dl-caption-size);
  letter-spacing: var(--dl-label-tracking); text-transform: uppercase;
}
.breadcrumb__item { display: flex; align-items: center; gap: 0 var(--dl-inline-gap-tight); }
.breadcrumb__link { color: var(--dl-text-secondary); border-bottom: 1px solid transparent; transition: color var(--dl-duration-fast) var(--dl-ease); }
.breadcrumb__link:hover { color: var(--dl-text-accent); }
.breadcrumb__sep { color: var(--dl-text-secondary); }
.breadcrumb__current { color: var(--dl-text-primary); }
@media (min-width: 834px) { .breadcrumb { padding: var(--dl-space-3) var(--dl-gutter-tablet) 0; } }
@media (min-width: 1200px) { .breadcrumb { padding: var(--dl-space-3) var(--dl-gutter-laptop) 0; } }
@media (min-width: 1440px) { .breadcrumb { padding: var(--dl-space-4) var(--dl-gutter-desktop) 0; } }

/* ---------- Hero ---------- */
.hero-product {
  padding: var(--dl-space-4) var(--dl-gutter-mobile) var(--dl-space-3);
  display: flex; flex-direction: column; gap: var(--dl-space-3);
}
.hero-product__copy { display: flex; flex-direction: column; gap: var(--dl-space-2); }
.hero-product__eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--dl-text-accent); text-transform: uppercase;
}
.hero-product__title {
  font-size: var(--dl-h1-size-mobile); font-weight: var(--dl-weight-semibold);
  line-height: var(--dl-h1-lh); letter-spacing: var(--dl-h1-tracking); text-wrap: pretty;
}
.hero-product__lead { font-size: var(--dl-body-size-mobile); line-height: var(--dl-body-lh); color: var(--dl-text-body); max-width: 46ch; }
.hero-product__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dl-space-2); }
.hero-product__availability { font-size: var(--dl-body-small-size); color: var(--dl-text-body); }

.hero-product__media { margin: 0; display: flex; flex-direction: column; gap: var(--dl-space-1); }
.hero-product__frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--dl-graphite); border: var(--dl-border-hairline) solid var(--dl-border-default);
}
.hero-product__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 834px) {
  .hero-product { padding: var(--dl-space-5) var(--dl-gutter-tablet) var(--dl-space-4); gap: var(--dl-space-4); }
  .hero-product__title { font-size: var(--dl-h1-size); }
  .hero-product__lead { font-size: var(--dl-body-size); }
  .hero-product__actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--dl-space-3); }
  .hero-product__frame { aspect-ratio: 16 / 10; }
}
@media (min-width: 1200px) {
  .hero-product {
    padding: var(--dl-space-6) var(--dl-gutter-laptop) var(--dl-space-5);
    display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--dl-space-5); align-items: center;
  }
  .hero-product__copy { gap: var(--dl-space-3); }
  .hero-product__lead { max-width: 40ch; }
}
@media (min-width: 1440px) {
  .hero-product { padding: var(--dl-space-7) var(--dl-gutter-desktop) var(--dl-space-6); gap: var(--dl-space-6); }
}

/* ---------- Purpose ---------- */
.purpose { padding: var(--dl-space-4) var(--dl-gutter-mobile); }
.purpose__text { font-size: var(--dl-body-size-mobile); line-height: 1.65; color: var(--dl-text-body); max-width: var(--dl-text-measure); }
@media (min-width: 834px) {
  .purpose { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .purpose__text { font-size: var(--dl-body-size); }
}
@media (min-width: 1200px) {
  .purpose { padding: var(--dl-space-6) var(--dl-gutter-laptop); display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-4); align-items: start; }
  .purpose .section-label { margin: 0; }
}
@media (min-width: 1440px) {
  .purpose { padding: var(--dl-space-7) var(--dl-gutter-desktop); grid-template-columns: 240px 1fr; }
  .purpose__text { max-width: 62ch; }
}

/* ---------- Organized, not assorted ---------- */
.categories { padding: var(--dl-space-4) var(--dl-gutter-mobile); }
.categories__body { display: flex; flex-direction: column; gap: var(--dl-space-3); }
.categories__grid { display: grid; grid-template-columns: 1fr; gap: var(--dl-space-3); }
.categories__item { border-top: var(--dl-border-medium) solid var(--dl-graphite); padding-top: var(--dl-space-2); display: flex; flex-direction: column; gap: 8px; }
.categories__item h3 { font-size: var(--dl-h4-size-mobile); font-weight: var(--dl-weight-semibold); }
.categories__item p { margin: 0; font-size: var(--dl-body-small-size); line-height: var(--dl-body-small-lh); color: var(--dl-text-body); }
@media (min-width: 834px) {
  .categories { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .categories__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .categories { padding: var(--dl-space-6) var(--dl-gutter-laptop); display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-4); align-items: start; }
  .categories .section-label { margin: 0; }
  .categories__grid { grid-template-columns: 1fr 1fr 1fr; max-width: 820px; }
  .categories__item h3 { font-size: var(--dl-h4-size); }
}
@media (min-width: 1440px) {
  .categories { padding: var(--dl-space-7) var(--dl-gutter-desktop); grid-template-columns: 240px 1fr; }
}

/* ---------- Product gallery ---------- */
.gallery { padding: var(--dl-space-4) var(--dl-gutter-mobile); }
.gallery__grid { display: grid; grid-template-columns: 1fr; gap: var(--dl-space-2); }
.gallery__tile { margin: 0; display: flex; flex-direction: column; gap: var(--dl-inline-gap-tight); }
.gallery__frame {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--dl-graphite); border: var(--dl-border-hairline) solid var(--dl-border-default);
  display: flex; align-items: center; justify-content: center;
}
.gallery__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 834px) {
  .gallery { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .gallery__grid { grid-template-columns: 1fr 1fr; max-width: 600px; }
}
@media (min-width: 1200px) {
  .gallery { padding: var(--dl-space-6) var(--dl-gutter-laptop); display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-4); align-items: center; }
  .gallery .section-label { margin: 0; }
}
@media (min-width: 1440px) {
  .gallery { padding: var(--dl-space-7) var(--dl-gutter-desktop); grid-template-columns: 240px 1fr; }
}

/* ---------- Specifications ---------- */
.specs { padding: var(--dl-space-4) var(--dl-gutter-mobile); }
.specs__list { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; max-width: 720px; }
.specs__list dt {
  font-family: var(--dl-font-mono); font-size: var(--dl-caption-size); letter-spacing: var(--dl-label-tracking);
  text-transform: uppercase; color: var(--dl-text-secondary); padding-top: var(--dl-space-2);
}
.specs__list dd { margin: 0 0 var(--dl-space-2); font-size: var(--dl-body-small-size); padding-bottom: var(--dl-space-2); border-bottom: var(--dl-border-hairline) solid var(--dl-border-default); }
@media (min-width: 834px) {
  .specs { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .specs__list { grid-template-columns: 200px 1fr; column-gap: var(--dl-space-3); }
  .specs__list dt { padding: 11px 0; border-top: var(--dl-border-hairline) solid var(--dl-border-default); }
  .specs__list dd { margin: 0; padding: 11px 0; border-top: var(--dl-border-hairline) solid var(--dl-border-default); border-bottom: none; font-size: var(--dl-body-size); }
}
@media (min-width: 1200px) {
  .specs { padding: var(--dl-space-6) var(--dl-gutter-laptop); display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-4); align-items: start; }
  .specs .section-label { margin: 0; }
}
@media (min-width: 1440px) {
  .specs { padding: var(--dl-space-7) var(--dl-gutter-desktop); grid-template-columns: 240px 1fr; }
}

/* ---------- Support CTA ---------- */
.support-cta {
  padding: var(--dl-space-4) var(--dl-gutter-mobile);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--dl-space-2);
}
.support-cta__text { font-size: var(--dl-body-size-mobile); color: var(--dl-text-body); }
@media (min-width: 834px) {
  .support-cta {
    padding: var(--dl-space-5) var(--dl-gutter-tablet);
    flex-direction: row; align-items: center; justify-content: space-between; gap: var(--dl-space-3);
  }
  .support-cta__text { font-size: var(--dl-body-size); }
}
@media (min-width: 1200px) {
  .support-cta { padding: var(--dl-space-6) var(--dl-gutter-laptop); }
}
@media (min-width: 1440px) {
  .support-cta { padding: var(--dl-space-7) var(--dl-gutter-desktop); }
  .support-cta__text { font-size: 20px; font-weight: var(--dl-weight-semibold); max-width: 520px; }
}