/* ==========================================================================
   Takszu — site chrome shared by every page
   Header, footer and the floating WhatsApp link.

   These three blocks must stay identical across all pages: they lift
   straight into header.php / footer.php when this becomes a theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navbar (Figma 9:6 / 193:140)
   A solid ink bar, absolutely positioned over the page on every route. Each
   page's first section reserves the band beneath it.
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  background-color: var(--color-ink);
  color: var(--color-text-inverse);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: var(--navbar-height);
  padding-block: var(--space-16);
}

.site-header__logo {
  font-family: var(--font-display);
  font-size: var(--fs-logo);
  font-weight: var(--weight-bold);
  line-height: normal;
  white-space: nowrap;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

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

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

/* The current page is set bold rather than underlined, as drawn. */
.site-nav__link[aria-current="page"] { font-weight: var(--weight-bold); }

/* --------------------------------------------------------------------------
   Language switcher
   Not in the Figma design — added for the bilingual build. Styled to sit in
   the navbar as if it were one more nav item.
   -------------------------------------------------------------------------- */

.site-lang {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-8);
  margin-inline-start: var(--space-32);
  font-family: var(--font-label);
  font-size: var(--fs-nav);
  line-height: normal;
}

.site-lang__link {
  font-weight: var(--weight-regular);
  opacity: var(--opacity-credit);
}

.site-lang__link:hover,
.site-lang__link:focus-visible { opacity: 1; }

.site-lang__link[aria-current="true"] {
  font-weight: var(--weight-bold);
  opacity: 1;
}

.site-lang__sep { opacity: 0.4; }

@media (max-width: 640px) {
  .site-lang { margin-inline-start: 0; }
}

@media (max-width: 860px) {
  .site-nav__list {
    gap: var(--space-16) var(--space-24);
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .site-header__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding-block: var(--space-16);
  }

  .site-nav__list { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Footer (Figma 9:351 / 193:252)
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--color-surface);
  border-block-start: var(--hairline) solid var(--color-rule-soft);
  padding-block: var(--space-80) var(--space-60);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-48);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 300px;
  max-width: 100%;
}

.site-footer__wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-wordmark);
  font-weight: var(--weight-bold);
  line-height: normal;
  white-space: nowrap;
}

.site-footer__blurb {
  color: var(--color-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}

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

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.site-footer__heading {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  line-height: normal;
  text-transform: uppercase;
}

.site-footer__item,
.site-footer__link {
  color: var(--color-muted);
  font-size: var(--fs-caption);
  line-height: normal;
}

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

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  color: var(--color-muted);
}

.site-footer__legal {
  font-size: var(--fs-label);
  line-height: normal;
}

.site-footer__credit {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  line-height: normal;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .site-footer__top { flex-direction: column; gap: var(--space-48); }
}

@media (max-width: 640px) {
  .site-footer__columns { flex-direction: column; gap: var(--space-32); }
  .site-footer__bottom  { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .site-footer { padding-block-end: var(--space-96); }
}

/* --------------------------------------------------------------------------
   Product card (Figma 9:23 on in-stock, 193:199 on product pages)

   Shared: the catalogue and the "también en stock" row on every product page
   render the same card. The only difference is that the product-page variant
   adds a price beside the dimensions.
   -------------------------------------------------------------------------- */

.piece-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  background-color: var(--color-surface);
}

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

.piece-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--transition);
}

.piece-card:hover .piece-card__image { transform: scale(1.02); }

.piece-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

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

.piece-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--weight-semibold);
  line-height: normal;
}

.piece-card__badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

/* A 6px filled circle — reproduced in CSS rather than shipped as an SVG. */
.piece-card__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--color-stock);
}

.piece-card__badge-text {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  color: var(--color-muted);
  line-height: normal;
  white-space: nowrap;
}

.piece-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.piece-card__desc {
  color: var(--color-muted);
  font-size: var(--fs-meta);
  line-height: normal;
}

.piece-card__desc + .piece-card__desc { margin-block-start: var(--space-12); }

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

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

.piece-card__action {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block-start: var(--space-4);
}

.piece-card__action-label {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: var(--weight-semibold);
  line-height: normal;
  text-transform: uppercase;
}

.piece-card__action-arrow {
  font-size: var(--fs-label);
  line-height: normal;
  transition: transform var(--transition);
}

.piece-card:hover .piece-card__action-arrow { transform: translateX(3px); }

/* Product-page variant: dimensions on the left, price on the right. */
.piece-card__subdetails {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
}

.piece-card__price {
  color: var(--color-muted);
  font-size: var(--fs-caption);
  line-height: normal;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Floating WhatsApp link
   The Figma frame renders this as the letter "W" in a dark pill. There is no
   exported icon asset in the file, so the letter is reproduced as designed —
   swap in a real WhatsApp mark once one is added to the Figma library.
   -------------------------------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  inset-block-end: var(--space-24);
  inset-inline-end: var(--space-24);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--hairline) solid rgb(245 240 232 / 0.15);
  border-radius: var(--radius-pill);
  background-color: rgb(30 28 26 / 0.92);
  color: var(--color-text-inverse);
  font-size: var(--fs-body);
  font-weight: var(--weight-semibold);
  line-height: normal;
  box-shadow: var(--shadow-float);
  transition: transform var(--transition), background-color var(--transition);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: translateY(-2px);
  background-color: var(--color-ink);
}