/* ==========================================================================
   Takszu — product detail (Figma node 193:139, "takszu-detail-serie-aqua-27")

   THIS IS THE TEMPLATE. All 18 product pages share this structure; only the
   content changes. The product card used in the "también en stock" row lives
   in components.css, because the catalogue uses the same component.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumbs (193:148)
   -------------------------------------------------------------------------- */

.breadcrumbs {
  background-color: var(--color-surface);
  padding-block-start: calc(var(--navbar-height) + var(--space-40));
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-label);
  line-height: normal;
}

.breadcrumbs__link {
  color: var(--color-muted);
  font-family: var(--font-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible { color: var(--color-text); }

.breadcrumbs__current {
  font-family: var(--font-label);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  white-space: nowrap;
}

.breadcrumbs__sep {
  color: var(--color-muted);
  font-family: var(--font-sans);
}

/* --------------------------------------------------------------------------
   Main product frame (193:154)
   -------------------------------------------------------------------------- */

.product {
  background-color: var(--color-surface);
  padding-block: var(--space-32) var(--space-100);
}

.product__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-80);
}

/* ---- Gallery (193:155) ---- */

.product__gallery {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-20);
  width: 780px;
  max-width: 100%;
}

.product__figure {
  width: 100%;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.product__image {
  width: 100%;
  height: 700px;
  object-fit: cover;
}

.product__captions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
}

.product__caption {
  color: var(--color-muted);
  font-size: var(--fs-label);
  line-height: normal;
}

.product__credit {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  line-height: normal;
}

/* ---- Info column (193:160) ---- */

.product__info {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  min-width: 0;
}

.product__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.product__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
}

.product__collection {
  color: var(--color-muted);
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  line-height: normal;
  text-transform: uppercase;
}

.product__stock {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--color-stock);
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  line-height: normal;
  white-space: nowrap;
}

.product__stock-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-stock);
}

.product__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.06vw, 2.75rem);   /* 32 -> 44 */
  font-weight: var(--weight-bold);
  line-height: normal;
  overflow-wrap: break-word;
}

.product__subtitle {
  color: var(--color-muted);
  font-size: var(--fs-body-sm);
  line-height: normal;
}

.product__rule {
  width: 100%;
  height: var(--hairline);
  background-color: var(--color-rule-soft);
}

/* ---- Specs (193:170) ---- */

.product__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.spec {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
}

.spec__label {
  color: var(--color-muted);
  font-family: var(--font-label);
  font-size: var(--fs-label);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.spec__value {
  font-size: var(--fs-caption);
  line-height: normal;
  text-align: right;
}

/* Only the materials row is width-constrained in the design; the others sit
   on one line. */
.spec__value--wrap { max-width: 260px; }

.spec__value--muted { color: var(--color-muted); }

/* Price is set in the display face, larger than the other values. */
.spec__value--price {
  font-family: var(--font-display);
  font-size: 1.375rem;             /* 22 */
  font-weight: var(--weight-bold);
}

/* ---- Description (193:184) ---- */

.product__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.product__lede {
  font-size: 0.9375rem;            /* 15 */
  line-height: 1.7;
}

.product__note {
  color: var(--color-muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-relaxed);
}

/* ---- Call to action (193:188) ---- */

.product__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.product__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: 18px;
  border-radius: var(--radius-card);
  background-color: var(--color-ink);
  color: var(--color-text-inverse);
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: var(--weight-bold);
  line-height: normal;
  text-transform: uppercase;
  transition: opacity var(--transition);
}

.product__cta:hover,
.product__cta:focus-visible { opacity: 0.88; }

.product__disclaimer {
  width: 100%;
  color: var(--color-muted);
  font-size: var(--fs-label);
  line-height: normal;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Related pieces (193:192 / 193:197)
   -------------------------------------------------------------------------- */

.related {
  background-color: var(--color-surface);
  /* Figma's Related Cards Row (193:197) is 653px tall around 533px of cards,
     i.e. 120px of space below them before the footer. */
  padding-block-end: var(--space-120);
}

/* Figma stacks these as two sibling sections: the title block carries a 16px
   gap under its rule, and the card row butts straight up against it. */
.related__inner {
  display: flex;
  flex-direction: column;
}

.related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  margin-block-start: var(--space-16);
  padding-block: var(--space-24);
}

.related__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.23vw, 2rem);   /* 24 -> 32 */
  font-weight: var(--weight-bold);
  line-height: normal;
}

.related__all {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.related__all:hover,
.related__all:focus-visible { opacity: var(--opacity-body); }

.related__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-40);
}

.related__row > * { flex: 1 1 0; min-width: 0; }

@media (max-width: 1024px) {
  .product__inner { flex-direction: column; gap: var(--space-48); }
  .product__gallery { width: 100%; }
  .product__image { height: auto; aspect-ratio: 780 / 700; }
  .product { padding-block-end: var(--space-64); }
  .related__row { flex-wrap: wrap; gap: var(--space-32); }
  .related__row > * { flex: 1 1 calc(50% - var(--space-32)); }
}

@media (max-width: 640px) {
  .spec { flex-direction: column; gap: var(--space-4); }
  .spec__value { max-width: none; text-align: left; }
  .related__row > * { flex: 1 1 100%; }
}