/* catalogue.css — the public catalogue pages (Phase 3, 2026-10-14):
   /products/<id> and the category hubs /products/<hub>, baked by
   scripts/build-catalogue.cjs. Cards reuse .product-card / .card-grid from
   redesign-components.css; everything here pulls from redesign-tokens.css. */

/* Breadcrumb */
.cat-crumbs { padding-top: var(--space-m); font-size: var(--type-small); color: var(--color-text-secondary); }
.cat-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.cat-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.cat-crumbs li + li::before { content: "/"; margin: 0 var(--space-xs); color: var(--color-border); }
.cat-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent-dark); text-decoration: none; }
.cat-crumbs a:hover { text-decoration: underline; }
.cat-crumbs [aria-current] { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-text-primary); overflow-wrap: anywhere; }

/* Product: cover beside the details from tablets up */
.cat-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); padding-block: var(--space-s) var(--space-l); }
.cat-product-media {
  aspect-ratio: var(--cover-ratio);
  max-width: 160px;              /* phones: price and Buy now stay on the first screen */
  width: 100%;
  border-radius: var(--radius-image);
  background: var(--cover-mat);
  overflow: hidden;
}
.cat-product-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cat-product-info h1 { margin: 0 0 var(--space-s); overflow-wrap: anywhere; }
.cat-product-info .cat-summary { margin: var(--space-m) 0 0; }

.cat-price { margin: var(--space-xs) 0 0; font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.cat-price s { margin-left: 4px; font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.cat-off { margin-left: 4px; font-size: var(--type-small); color: var(--color-success-dark); }
.cat-price-big { margin: 0 0 var(--space-m); font-size: calc(var(--type-card) + 4px); }
.cat-price-big .cat-off { font-size: var(--type-body); }
.cat-buy { margin-bottom: var(--space-s); }
.cat-buy[aria-disabled="true"] { pointer-events: none; }
.cat-buy-note { margin: 0; max-width: 46ch; font-size: var(--type-small); color: var(--color-text-secondary); line-height: var(--leading-body); }

/* Sections below the fold */
.cat-section { padding-block: var(--space-l); border-top: 1px solid var(--color-border); }
.cat-section h2 { margin-bottom: var(--space-s); }
.cat-prose { max-width: 68ch; }
.cat-prose p { margin: 0 0 var(--space-s); line-height: var(--leading-body); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.cat-included { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; max-width: 68ch; }
.cat-included li { display: flex; align-items: flex-start; gap: var(--space-xs); line-height: 1.5; }
.cat-included i { flex: none; margin-top: 3px; color: var(--color-success); }
.cat-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin-top: var(--space-s); color: var(--color-accent-dark); font-weight: var(--weight-medium); }

.cat-resell { margin-bottom: var(--space-l); padding: var(--space-m); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.cat-resell p { max-width: 60ch; margin: 0 0 var(--space-s); color: var(--color-text-secondary); }

/* Category chips */
.cat-hubs { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-m); }
.cat-hub-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
a.cat-hub-chip:hover { border-color: var(--color-accent-dark); }
.cat-hub-chip[aria-current] { background: var(--color-text-primary); border-color: var(--color-text-primary); color: #FFFFFF; }

/* Hub */
.cat-hub-intro { padding-top: var(--space-s); max-width: 68ch; }
.cat-hub-intro h1 { margin-bottom: var(--space-s); }
.cat-grid { padding-bottom: var(--space-l); }

/* Cards are links here: keep the card's own look */
a.cat-card { color: inherit; text-decoration: none; }
a.cat-card .card-title { overflow-wrap: anywhere; }
.cat-card .cat-price { margin-top: auto; padding-top: var(--space-xs); }

/* Phones: the name, price and Buy now fit the first screen even for long
   names. The breadcrumb's last item repeats the h1 right below it, so it is
   only hidden visually (screen readers still hear it). */
@media (max-width: 767px) {
  .cat-product-info h1 { font-size: var(--type-section); }
  .cat-crumbs [aria-current] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 768px) {
  .cat-product { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l); align-items: start; }
  .cat-product-media { max-width: none; }
  .cat-included { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-m); }
}
@media (min-width: 1024px) {
  .cat-product { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}