/* =========================================================
   MONTOYA LINE — Ficha de producto (Fase 2)
   Reusa tokens + nav/footer de styles.css y .pcard de catalogo.css
   ========================================================= */

.product main { padding-top: calc(var(--announce-h) + 66px); }
#product-root { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--pad) var(--section); }

/* migas */
.pdp .crumb { margin: clamp(1.4rem, 3.5vw, 2.6rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.pdp .crumb a:hover { color: var(--ink); }

/* ---------- layout ---------- */
.pdp__grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.6rem, 5vw, 4.5rem); align-items: start;
}

/* media */
.pdp__media {
  position: relative; aspect-ratio: 4 / 5;
  background: var(--paper-2); border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
  position: sticky; top: calc(var(--announce-h) + 88px);
}
.pdp__brand {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .65rem; color: var(--ink-soft);
}
.pdp__brand .brand-ico { height: 14px; width: auto; display: block; flex: none; }
.pdp__media img {
  width: 76%; height: 76%; object-fit: contain;
  filter: drop-shadow(0 22px 32px rgba(30, 26, 22, .18));
}

/* info */
.pdp__info { padding-top: .4rem; }
.pdp__info .eyebrow { margin-bottom: 1rem; }
.pdp__name {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 450;
  font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.02em;
}
.pdp__price {
  margin-top: 1rem; font-size: 1.5rem; color: var(--sand-deep); letter-spacing: .01em;
}
.pdp__price span { font-size: .6em; color: var(--ink-soft); letter-spacing: .08em; }
.pdp__desc {
  margin-top: 1.4rem; color: var(--ink-soft); font-size: 1.05rem;
  line-height: 1.7; max-width: 46ch;
}

/* selector de color */
.pdp__field { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.pdp__field-head {
  display: flex; align-items: baseline; gap: .8rem;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); margin-bottom: 1rem;
}
.pdp__field-val { color: var(--ink-soft); letter-spacing: .08em; font-weight: 400; }
.pdp-swatches { display: flex; flex-wrap: wrap; gap: .7rem; }
.pdp-swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(30, 26, 22, .2); cursor: pointer;
  background-size: cover; background-position: center;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .2), inset 0 2px 3px rgba(255, 255, 255, .12);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pdp-swatch:hover { transform: scale(1.1); }
.pdp-swatch.is-active { box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .2), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--sea); }
.pdp-swatch.is-out { opacity: .45; }
.pdp-swatch.is-out::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(45deg, transparent 46%, rgba(30, 26, 22, .6) 46%, rgba(30, 26, 22, .6) 54%, transparent 54%); }
.pdp-swatch { position: relative; }
.pdp__buy:disabled, .pdp__buy.is-disabled { background: var(--ink-soft); border-color: var(--ink-soft); cursor: not-allowed; opacity: .7; }
.pdp__stock { margin-top: .8rem; font-size: .85rem; color: var(--terra); font-weight: 500; }
.pdp__stock--low { color: var(--sand-deep); }

/* talles */
.pdp-talles { display: flex; flex-wrap: wrap; gap: .55rem; }
.pdp-talle {
  min-width: 46px; padding: .55em .9em; font: inherit; font-size: .85rem; letter-spacing: .06em;
  border: 1px solid rgba(30, 26, 22, .28); background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  position: relative;
}
.pdp-talle:hover { border-color: var(--ink); }
.pdp-talle.is-active { background: var(--sea); border-color: var(--sea); color: var(--paper); }
.pdp-talle.is-out { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.pdp-talle.is-out:hover { border-color: rgba(30, 26, 22, .28); }

/* CTA */
.pdp__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.pdp__cta .btn { flex: 1 1 auto; justify-content: center; }
.pdp__buyrow { display: flex; gap: .8rem; margin-top: 2.2rem; }
.pdp__buyrow .qstep { flex: 0 0 auto; }
.pdp__buyrow .qstep button { width: 44px; height: auto; }
.pdp__buyrow .qstep__n { min-width: 38px; font-size: 1rem; }
.pdp__buy { flex: 1 1 auto; justify-content: center; padding-block: 1.2em; font-size: .86rem; }
.pdp__cta--alt { margin-top: .8rem; }
.pdp__cta--alt .btn { flex: 1 1 180px; font-size: .76rem; }
.btn--line {
  border: 1px solid var(--ink); color: var(--ink);
}
.btn--line:hover { background: var(--ink); color: var(--paper); }
/* mail de contacto, debajo del botón de Instagram */
.pdp__mail {
  margin-top: .7rem; font-size: .82rem; line-height: 1.6; color: var(--ink-soft);
}
.pdp__mail a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--sand); transition: text-decoration-color .2s var(--ease);
}
.pdp__mail a:hover { text-decoration-color: var(--ink); }
.pdp__note {
  margin-top: 1.1rem; font-size: .85rem; line-height: 1.6;
  color: var(--ink-soft); max-width: 48ch;
}

/* specs */
.pdp__specs { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.pdp-spec {
  display: grid; grid-template-columns: 120px 1fr; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.pdp-spec:last-child { border-bottom: none; }
.pdp-spec dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); align-self: center; }
.pdp-spec dd { color: var(--ink); }

/* ---------- relacionados ---------- */
.pdp-related { margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.pdp-related__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
}
.pdp-related .section-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.pdp-related .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ---------- no encontrado ---------- */
.pdp-missing { text-align: center; padding: clamp(3rem, 10vw, 7rem) 0; }
.pdp-missing .eyebrow { margin-bottom: 1.2rem; }
.pdp-missing h1 {
  font-family: var(--serif); font-weight: 450; font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05; letter-spacing: -.02em;
}
.pdp-missing__text { color: var(--ink-soft); margin: 1rem auto 2rem; max-width: 42ch; }

/* ---------- guía de tamaño ---------- */
.pdp-size { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.pdp-size__title { font-family: var(--serif); font-optical-sizing: auto; font-weight: 450; font-size: 1.45rem; letter-spacing: -.01em; margin-bottom: 1.1rem; }
.pdp-size__table-wrap { overflow-x: auto; }
.pdp-size__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pdp-size__table th, .pdp-size__table td { border: 1px solid var(--line); padding: .7rem .85rem; text-align: left; }
.pdp-size__table th { font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; color: var(--ink-soft); background: var(--paper-2); }
.pdp-size__table td { color: var(--ink); }
.pdp-size__sub { font-family: var(--serif); font-weight: 450; font-size: 1.12rem; margin: 1.6rem 0 .6rem; }
.pdp-size__text { color: var(--ink-soft); font-size: .92rem; line-height: 1.65; max-width: 52ch; }
.pdp-size__styles { display: flex; gap: clamp(1.5rem, 5vw, 3rem); margin-top: 1.7rem; }
.pdp-size__styles figure { text-align: center; }
.pdp-head { width: 90px; height: auto; display: block; margin: 0 auto .6rem; }
.pdp-head__sil { fill: #C7BFB4; }
.pdp-head__line line { stroke: var(--ink); stroke-width: 2; }
.pdp-head__line circle { fill: var(--ink); }
.pdp-size__styles figcaption { font-size: .76rem; letter-spacing: .04em; color: var(--ink-soft); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .pdp__grid { grid-template-columns: 1fr; gap: 2rem; }
  .pdp__media { position: relative; top: 0; aspect-ratio: 1; max-width: 520px; margin-inline: auto; width: 100%; }
}