/* ============================================================
   product-page.css — shared styles for all category pages
   ============================================================ */

/* ── PAGE HERO ── */
.pp-hero {
  min-height: 80vh;
  min-height: 80svh;
  padding-top: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding-inline: clamp(2rem, 8vw, 8rem);
  padding-block: 4rem 5rem;
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.pp-hero-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 0% 50%, rgba(255,183,197,.5) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 20%, rgba(255,105,135,.2) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255,216,204,.45) 0%, transparent 60%);
  filter: blur(70px) saturate(130%);
  animation: meshDrift 22s ease-in-out infinite;
  pointer-events: none;
}

.pp-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cherry);
  margin-bottom: 1.4rem;
  transition: gap .2s var(--ease-out);
}
.pp-back:hover { gap: .7rem; }

.pp-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  font-weight: 900;
  line-height: .98;
  color: var(--ink);
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
.pp-title em { font-style: italic; color: var(--cherry); }

.pp-sub {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 46ch;
}

.pp-hero-tags {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: 1.4rem;
}
.pp-tag {
  padding: .4rem .9rem;
  background: var(--pink-3);
  border: 1px solid rgba(196,30,58,.2);
  border-radius: var(--r-btn);
  font-size: .78rem; font-weight: 600;
  color: var(--ink);
}
.pp-tag--hot {
  background: var(--cherry);
  color: #fff;
  border-color: var(--cherry);
  animation: splashPulse 2s ease-in-out infinite alternate;
}

.pp-hero-img {
  border-radius: 2rem 5rem 2rem 5rem;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
}
.pp-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── PRODUCT LISTING ── */
.pp-listing {
  padding: 5rem clamp(2rem, 7vw, 7rem);
  background: var(--ivory);
}

.pp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.pp-card {
  background: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,183,197,.2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.pp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pp-card--featured {
  grid-column: span 2;
  grid-template-columns: 1fr 1.4fr;
  border: 2px solid var(--cherry);
}

.pp-card-img {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.pp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.pp-card:hover .pp-card-img img { transform: scale(1.06); }

/* Productos con fondo blanco/packshot — mostrar completos, centrados */
.pp-card-img--contain { background: #fff; }
.pp-card-img--contain img { object-fit: contain !important; padding: 1.4rem; }

.pp-card-badge {
  position: absolute; top: .8rem; left: .8rem;
  background: var(--cherry); color: #fff;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .65rem; border-radius: 4px;
}
.pp-card-badge--new { background: var(--ink); }
.pp-card-badge--hot {
  background: var(--cherry);
  animation: splashPulse 1.8s ease-in-out infinite alternate;
}

.pp-card-body {
  padding: 2rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.pp-card-brand {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cherry);
}
.pp-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-weight: 700;
  color: var(--ink); line-height: 1.2;
}
.pp-card-variant {
  font-size: .8rem; color: var(--ink-mute);
  font-style: italic;
}
.pp-card-desc {
  font-size: .9rem; color: var(--ink-soft);
  line-height: 1.6; flex: 1;
}
.pp-card-features {
  list-style: none;
  display: flex; flex-direction: column; gap: .35rem;
  margin-top: .4rem;
}
.pp-card-features li {
  font-size: .82rem; color: var(--ink-soft);
}
.pp-card-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255,183,197,.25);
}
.pp-card-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 800;
  color: var(--cherry);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: .01em;
}

/* ── CTA BAND ── */
.pp-cta {
  padding: 5rem clamp(2rem, 7vw, 7rem);
  background: var(--cream-2);
  text-align: center;
  position: relative; overflow: hidden;
}
.pp-cta-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 30% 50%, rgba(255,183,197,.5) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 40%, rgba(255,105,135,.25) 0%, transparent 55%);
  filter: blur(70px);
  animation: meshDrift 20s ease-in-out infinite;
  pointer-events: none;
}
.pp-cta-inner { position: relative; z-index: 2; }

.pp-cta-links {
  display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
  margin-top: 2rem;
}
.pp-cat-link {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.6rem;
  background: #fff;
  border: 2px solid rgba(255,183,197,.4);
  border-radius: var(--r-btn);
  font-size: .9rem; font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .2s, background .2s, color .2s;
}
.pp-cat-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--cherry);
  background: var(--cherry);
  color: #fff;
}
.pp-cat-link--hot {
  background: var(--cherry);
  border-color: var(--cherry);
  color: #fff;
}
.pp-cat-link--hot:hover { background: var(--cherry-2); border-color: var(--cherry-2); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .pp-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-bottom: 4rem;
  }
  .pp-hero-img { border-radius: 2rem; aspect-ratio: 16/10; order: -1; }
  .pp-back { margin-inline: auto; }
  .pp-sub { margin-inline: auto; }
  .pp-hero-tags { justify-content: center; }

  .pp-grid { grid-template-columns: 1fr; }
  .pp-card { grid-template-columns: 1fr; }
  .pp-card--featured { grid-column: span 1; grid-template-columns: 1fr; }
  .pp-card-img { min-height: 220px; }

  /* index page product grid — mobile */
  .index-pp-grid { grid-template-columns: 1fr; }
  .index-pp-grid .pp-card { grid-template-columns: 1fr; }
  .index-pp-grid .pp-card-img { height: 200px !important; min-height: unset !important; max-height: 200px; }

  .pp-cta-links { flex-direction: column; align-items: center; }
}

/* ── INDEX PAGE: individual product grid overrides ── */
.index-pp-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 1200px;
  margin: 0 auto;
}
.index-pp-grid .pp-card {
  grid-template-columns: 1fr;  /* stack image on top, text below */
}
.index-pp-grid .pp-card-img {
  height: 240px !important;
  min-height: unset !important;
  max-height: 240px;
}
@media (max-width: 1024px) {
  .index-pp-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .index-pp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .9rem;
  }

  /* Imagen más alta para más impacto visual */
  .index-pp-grid .pp-card-img { height: 190px; }

  /* Cuerpo de la card: respirar, sin descripción */
  .index-pp-grid .pp-card-body {
    padding: .9rem .8rem 1rem;
    gap: .2rem;
  }

  /* Ocultar descripción y variante — demasiado texto en espacio chico */
  .index-pp-grid .pp-card-desc    { display: none; }
  .index-pp-grid .pp-card-variant { display: none; }

  /* Brand pequeño y limpio */
  .index-pp-grid .pp-card-brand {
    font-size: .6rem;
    letter-spacing: .12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Nombre del producto */
  .index-pp-grid .pp-card-name {
    font-size: .9rem;
    line-height: 1.2;
    margin-bottom: .4rem;
  }

  /* Footer: precio arriba, botón abajo */
  .index-pp-grid .pp-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
  }

  .index-pp-grid .pp-card-price { font-size: 1.15rem; }

  /* Botón ancho completo */
  .index-pp-grid .pp-card-footer .btn {
    width: 100%;
    text-align: center;
    font-size: .72rem;
    padding: .55rem .5rem;
    letter-spacing: .02em;
  }
}

/* ── MOBILE POLISH ── */
@media (max-width: 768px) {
  /* Botón ATC en cards — evitar que wrappee a 2 líneas */
  .pp-card-footer .btn {
    font-size: .78rem;
    padding-inline: .9rem;
    white-space: nowrap;
  }
  /* Precio en cards — un poco más chico para darle espacio al botón */
  .pp-card-price { font-size: 1.3rem; }

  /* Hero de categorías — reducir padding inferior para menos espacio vacío */
  .pp-hero {
    padding-block: 3rem 3rem;
    min-height: auto;
    gap: 2rem;
  }

  /* Listing en categorías — menos padding arriba en mobile */
  .pp-listing { padding-block: 3rem; }

  /* Botón ATC de la pp-card en páginas de categoría (texto largo) */
  .pp-card-footer .btn-primary {
    font-size: .78rem;
    letter-spacing: .01em;
  }

  /* Sticky ATC bar — que no tape demasiado en mobile */
  #sticky-atc { padding: .75rem 1rem; }
  #sticky-atc-title { font-size: .8rem; max-width: 140px; }
}


/* ── SHOP TOOLBAR (filtros / orden) ── */
.shop-toolbar {
  max-width: 1200px; margin: 0 auto 1.6rem; padding: 1rem .2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--pink-2); border-bottom: 1px solid var(--pink-2);
  font-family: 'DM Sans', sans-serif;
}
.shop-filters, .shop-sort { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.shop-tb-label, .shop-count { font-size: .9rem; color: var(--ink-soft); }
.shop-dd { position: relative; }
.shop-dd-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: .95rem; color: var(--ink); padding: .3rem 0;
}
.shop-dd-caret { font-size: .7rem; color: var(--ink-soft); transition: transform .2s; }
.shop-dd.is-open .shop-dd-caret { transform: rotate(180deg); }
.shop-dd-menu {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 50;
  background: #fff; border: 1px solid var(--pink-2); border-radius: .9rem;
  box-shadow: 0 10px 34px rgba(0,0,0,.12);
  padding: .5rem; min-width: 210px; display: none;
}
.shop-dd.is-open .shop-dd-menu { display: block; }
.shop-sort .shop-dd-menu { left: auto; right: 0; }
.shop-dd-menu label {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: .55rem; cursor: pointer;
  font-size: .9rem; color: var(--ink);
}
.shop-dd-menu label:hover { background: var(--pink-3); }
.shop-dd-menu input { accent-color: var(--cherry); }
@media (max-width: 600px) {
  .shop-toolbar { gap: .5rem; padding: .85rem .2rem; }
  .shop-filters, .shop-sort { gap: .8rem; }
  .shop-tb-label { display: none; }
  .shop-dd-btn, .shop-count { font-size: .82rem; }
  .shop-dd-menu { min-width: 175px; }
  .shop-sort .shop-dd-menu { left: 0; right: auto; }
}

/* ── Subtítulos de categoría dentro del grid ── */
.index-pp-grid .pp-cat-head {
  grid-column: 1 / -1;
  margin: 1.4rem 0 .2rem;
  display: flex; align-items: baseline; gap: .8rem;
}
.index-pp-grid .pp-cat-head:first-child { margin-top: 0; }
.index-pp-grid .pp-cat-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 800; color: var(--ink); white-space: nowrap;
}
.index-pp-grid .pp-cat-head h3 em { font-style: italic; color: var(--cherry); }
.index-pp-grid .pp-cat-head::after {
  content: ''; flex: 1; height: 1px; background: var(--pink-2);
}
@media (max-width: 600px) {
  .index-pp-grid .pp-cat-head { margin: 1rem 0 .1rem; }
}

/* ── GLASS SKIN KIT — card destacada de ancho completo ── */
.index-pp-grid .pp-card--kit {
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--cherry);
}
.index-pp-grid .pp-card--kit .pp-card-img {
  height: 100% !important;
  max-height: none;
  min-height: 280px !important;
}
.index-pp-grid .pp-card--kit .pp-card-body {
  padding: 2rem;
  justify-content: center;
}
@media (max-width: 600px) {
  .index-pp-grid .pp-card--kit {
    grid-template-columns: 1fr;
  }
  .index-pp-grid .pp-card--kit .pp-card-img {
    height: 230px !important;
    min-height: unset !important;
  }
  .index-pp-grid .pp-card--kit .pp-card-body {
    padding: 1.1rem 1rem 1.2rem;
  }
  /* La card destacada sí muestra descripción y variante */
  .index-pp-grid .pp-card--kit .pp-card-desc,
  .index-pp-grid .pp-card--kit .pp-card-variant {
    display: block;
  }
  .index-pp-grid .pp-card--kit .pp-card-name { font-size: 1.15rem; }
}