/* ==========================================================================
   CATALOG — shop, department, search and product detail
   --------------------------------------------------------------------------
   Page-level composition only. Every colour, space, radius, shadow, size and
   breakpoint below is an existing token or an existing component from the
   Phase 2 design system. No new tokens, no arbitrary values, no second design
   language: a catalog page has to feel like the same shop as the homepage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HEAD
   -------------------------------------------------------------------------- */

.catalog-head {
  padding-block: var(--space-6) var(--space-4);
}

.catalog-head__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-top: var(--space-3);
}

.catalog-head__title {
  font-size: var(--text-3xl);
  margin-block: var(--space-3) 0;
}

.catalog-head__intro {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  max-width: var(--container-prose);
}

.catalog-head__search {
  margin-top: var(--space-4);
  max-width: 32rem;
}

/* Sub-departments, as chips rather than a second navigation bar. */
.catalog-children {
  margin-top: var(--space-4);
}

.catalog-children__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   2. LAYOUT
   -------------------------------------------------------------------------- */

.catalog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-12);
}

/* The sidebar is a desktop affordance. On phones and tablets the same form is
   rendered inside the drawer, so it is hidden here rather than stacked above
   the products where it would push the grid off the first screen. */
.catalog-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .catalog-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .catalog-sidebar {
    display: block;
    position: sticky;
    top: var(--space-6);
    max-height: calc(100vh - var(--space-12));
    overflow-y: auto;
    padding-right: var(--space-2);
    scrollbar-width: thin;
  }

  /* The sidebar already scrolls as a whole, so the bounded brand and origin
     lists would be a scrollbar inside a scrollbar. They stay bounded only in
     the drawer. */
  .catalog-sidebar .filters__options--scroll {
    max-height: none;
    overflow-y: visible;
  }
}

.catalog-sidebar__title {
  margin-block: 0 var(--space-4);
}

.catalog-main {
  min-width: 0;
}

.catalog-grid {
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   3. TOOLBAR
   -------------------------------------------------------------------------- */

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.catalog-toolbar__count {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.catalog-toolbar__range {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.catalog-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* The sidebar replaces this trigger once there is room for it. */
@media (min-width: 1024px) {
  .catalog-toolbar__filters {
    display: none;
  }
}

.catalog-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.catalog-sort__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.catalog-sort .select {
  min-width: 12rem;
}

/* On a phone the label, the select and the apply button do not fit on one
   375px line: at their natural widths the row measured 401px and pushed the
   whole page sideways. Below the tablet breakpoint the controls take the full
   width and the select gives up its minimum so it can shrink. */
@media (max-width: 767.98px) {
  .catalog-toolbar__controls {
    width: 100%;
  }

  .catalog-sort {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .catalog-sort .select {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .catalog-toolbar__filters {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   4. ACTIVE FILTERS
   -------------------------------------------------------------------------- */

.catalog-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}

.catalog-active__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.catalog-active__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.catalog-active__clear {
  font-size: var(--text-sm);
  color: var(--color-primary);
}

/* A chip that removes itself. The icon is decorative; the accessible name on
   the link says which filter is being removed. */
.chip-removable {
  gap: var(--space-2);
  text-decoration: none;
}

.chip-removable .icon {
  width: 0.85em;
  height: 0.85em;
  opacity: 0.7;
}

.chip-removable:hover .icon {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   5. FILTER FORM
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.filters__group {
  border: 0;
  margin: 0;
  padding: 0;
}

.filters__legend {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  padding: 0;
  margin-bottom: var(--space-2);
}

.filters__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* A long brand list stays a bounded column instead of pushing the apply button
   off the panel. */
.filters__options--scroll {
  max-height: 14rem;
  overflow-y: auto;
}

.filters__option {
  font-size: var(--text-sm);
  min-height: var(--tap-target);
  align-items: center;
  flex-wrap: nowrap;
}

.filters__option > span:first-of-type {
  flex: 1 1 auto;
  min-width: 0;
}

.filters__count {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.filters__price {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.filters__price-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.filters__sublabel {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.filters__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The filter drawer opens from the trailing edge, so it does not collide with
   the navigation drawer's own direction. */
.drawer--end {
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   6. PRODUCT DETAIL
   -------------------------------------------------------------------------- */

/* The related products below are a `.section`, which brings its own generous
   top padding. Adding a full stack of bottom padding here as well put 120px of
   nothing between the last detail row and the next heading: two paddings doing
   one job. This keeps a clear break without the second gap. */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .product-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

@media (min-width: 1280px) {
  .product-detail {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* The image slot keeps its 4:5 ratio and is never distorted; the column that
   holds it is bounded instead. At 30rem the 4:5 box stood 600px tall against a
   537px column of copy, leaving a visible dead band beside the lower third of
   the picture. At 28rem the two columns finish within about 20px of each
   other. */
.product-detail__media {
  max-width: 28rem;
}

.product-detail__media .media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.product-gallery .media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.product-detail__brand {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.product-detail__title {
  font-size: var(--text-2xl);
}

@media (min-width: 768px) {
  .product-detail__title { font-size: var(--text-3xl); }
}

.product-detail__lead {
  color: var(--color-text-muted);
  max-width: var(--container-prose);
}

.price-lg .price-current {
  font-size: var(--text-3xl);
}

.price-lg .price-compare {
  font-size: var(--text-lg);
}

/* The purchase area. It is reserved and labelled, and it is not a control:
   ordering online arrives with the cart phase. */
.product-purchase {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.product-purchase__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.product-purchase__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.product-detail__specs h2 {
  margin-block: 0 var(--space-3);
}

.spec-list {
  margin: 0;
  border-top: var(--border-width) solid var(--color-border);
}

.spec-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm);
}

.spec-list__row dt {
  color: var(--color-text-muted);
}

.spec-list__row dd {
  margin: 0;
  text-align: right;
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-description {
  padding-bottom: var(--space-10);
}

.product-description h2 {
  margin-block: 0 var(--space-3);
}

.prose {
  max-width: var(--container-prose);
  color: var(--color-text);
}

.prose p {
  margin-block: 0 var(--space-3);
}

.prose p:last-child {
  margin-bottom: 0;
}