/* ==========================================================
   css/products.css — grid de productos y tarjeta
   ========================================================== */

/* ---------- Grid: 2 col móvil · 3 tablet · --cols (4 ó 5) desktop ---------- */
.product-grid {
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.product-grid[data-cols="5"], .product-grid--5 { --cols: 5; }
.product-grid[data-cols="4"], .product-grid--4 { --cols: 4; }
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
}

/* ---------- Tarjeta ---------- */
.product-card__link { display: block; color: inherit; }

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f9f9f9;
}
.product-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Imagen secundaria: aparece en hover (fade .3s) */
.product-card__img--hover { opacity: 0; transition: opacity .4s ease; }
@media (hover: hover) {
  .product-card:hover .product-card__img--hover { opacity: 1; }   /* la tarjeta entera (incluye el botón ADD) */
}
.product-card__link:focus-visible .product-card__img--hover { opacity: 1; }

/* Etiqueta NEW ARRIVAL */
.product-card__tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 4px 8px;
  font-size: var(--smaller-text-size-4);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgb(var(--heading-color));
  background: #fff;
}

/* Texto bajo la imagen */
.product-card__info { margin-top: 14px; }
.product-card__name {
  font-size: 13px; font-weight: 500; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .03em;
  color: rgb(var(--heading-color));
}
.product-card__color {
  margin-top: 2px;
  font-size: var(--smaller-text-size-1);
  text-transform: uppercase; letter-spacing: .1em;
  color: rgb(var(--body-text-color));            /* P20: antes .7 → 3:1 (no pasa AA) */
}
.product-card__price { margin-top: 4px; font-size: var(--smaller-text-size-2); color: rgb(var(--body-text-color)); }


/* ==========================================================
   Carrusel (scroll-snap, edge-peek, arrastrable)
   --n = tarjetas por vista · --peek = fracción de la siguiente que asoma
   ========================================================== */
.carousel { --n: 2; --gap: 16px; --peek: .1; }
@media (min-width: 768px)  { .carousel { --n: 3; --gap: 30px; } }
@media (min-width: 1024px) {
  .carousel { --n: 5; }
  .carousel[data-per-view="4"] { --n: 4; }
}
/* Ancho de cada tarjeta: n completas + 10% de la siguiente */
.carousel { --slide-w: calc((100% - var(--gap) * var(--n)) / (var(--n) + var(--peek))); }
/* Si caben todas: sin peek, sin arrastre */
.carousel.is-static { --slide-w: calc((100% - var(--gap) * (var(--n) - 1)) / var(--n)); }

.carousel__head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 32px; }
.carousel__head-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.carousel__head-row .h4 { text-align: center; }

.carousel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  color: rgb(var(--heading-color));
  transition: opacity .2s ease;
}
.carousel__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.carousel__btn:hover:not(:disabled) { opacity: .6; }
.carousel__btn:disabled { opacity: .3; cursor: default; }

.carousel__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;
  cursor: grab;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > .product-card { flex: 0 0 var(--slide-w); min-width: 0; scroll-snap-align: start; }
.carousel.is-static .carousel__track { cursor: default; }

/* Mientras se arrastra con el ratón: sin snap, cursor "grabbing" */
.carousel__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.carousel__track.is-dragging a { pointer-events: none; }


/* ==========================================================
   Página de colección (collection.html)
   ========================================================== */
.cp { padding-block: 32px 60px; }
@media (min-width: 768px) { .cp { padding-block: 48px 100px; } }

.cp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cp-count { font-size: var(--smaller-text-size-1); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }

/* Barra de filtros */
.cp-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding-block: 14px; margin-bottom: 28px;
  border-block: 1px solid var(--footer-divider-col);
}
.cp-filters { display: flex; gap: 20px; }
.cp-filter {
  padding: 6px 0;
  font-size: var(--smaller-text-size-1); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.cp-filter:hover { color: rgb(var(--heading-color)); }
.cp-filter[aria-pressed="true"] { color: rgb(var(--heading-color)); border-bottom-color: currentColor; }

.cp-sort { display: flex; align-items: center; gap: 10px; font-size: var(--smaller-text-size-1); letter-spacing: .1em; text-transform: uppercase; }
.cp-select {
  -webkit-appearance: none; appearance: none;
  height: 40px; padding: 0 36px 0 12px;
  font-size: 13px; letter-spacing: 0; text-transform: none; color: rgb(var(--heading-color));
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
  border: 1px solid var(--input-border-color); border-radius: var(--btn-border-radius);
  cursor: pointer; transition: border-color .2s ease;
}
.cp-select:hover { border-color: var(--input-border-hover-color); }

.cp-empty { padding: 60px 0; text-align: center; }

/* 404 amigable (colección o producto inexistente) */
.cp-404 { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 0; text-align: center; }
.cp-404[hidden] { display: none; }
.cp-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.btn--ghost { background: transparent; color: rgb(var(--heading-color)); border-color: var(--input-border-color); }
.btn--ghost:hover { background: #f7f7f8; border-color: var(--input-border-hover-color); }


/* ==========================================================
   Página de producto (product.html)
   ========================================================== */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 16px 40px; }
@media (min-width: 1024px) {
  .pdp { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 60px; padding-block: 40px 60px; }
}

/* ---------- Galería ---------- */
.pdp-gallery { display: grid; gap: 12px; }
@media (min-width: 1024px) { .pdp-gallery { grid-template-columns: 72px minmax(0, 1fr); align-items: start; } }

.pdp-thumbs { display: none; }
@media (min-width: 1024px) { .pdp-thumbs { display: flex; flex-direction: column; gap: 8px; } }
.pdp-thumb {
  aspect-ratio: 1 / 1; background: #f9f9f9;
  border: 1px solid transparent; opacity: .6;
  transition: opacity .2s ease, border-color .2s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb:hover { opacity: 1; }
.pdp-thumb[aria-current="true"] { opacity: 1; border-color: rgb(var(--heading-color)); }

/* Escenario: slider horizontal con snap (móvil) · una imagen a la vez con miniaturas (desktop) */
.pdp-stage {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; background: #f9f9f9;
}
.pdp-stage::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .pdp-stage { overflow: hidden; } }

.pdp-slide { flex: 0 0 100%; aspect-ratio: 1 / 1; scroll-snap-align: start; overflow: hidden; }
.pdp-slide img {
  width: 100%; height: 100%; object-fit: contain;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform .25s ease;
}
/* Zoom al hover (solo desktop con ratón) */
@media (hover: hover) and (min-width: 1024px) {
  .pdp-slide { cursor: zoom-in; }
  .pdp-slide.is-zoom img { transform: scale(2); }
}

.pdp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.pdp-dot { width: 6px; height: 6px; border-radius: 50%; background: #d9d9da; }
.pdp-dot.is-active { background: rgb(var(--heading-color)); }
@media (min-width: 1024px) { .pdp-dots { display: none; } }

/* ---------- Info ---------- */
.pdp-info { align-self: start; }
@media (min-width: 1024px) { .pdp-info { position: sticky; top: calc(var(--header-height) + 24px); } }

.pdp-name { margin-top: 6px; font-size: 24px; line-height: 1.2; text-transform: uppercase; letter-spacing: .03em; }
.pdp-price { margin-top: 8px; font-size: 18px; color: rgb(var(--heading-color)); }
.pdp-form { margin-top: 28px; }

.pdp-sizes { border: 0; padding: 0; margin: 0; min-width: 0; }
.pdp-sizes legend { padding: 0; margin-bottom: 10px; }
.size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn { position: relative; }
.size-btn span {
  display: flex; align-items: center; justify-content: center;
  min-width: 48px; height: 48px; padding: 0 12px;
  font-size: 14px; color: rgb(var(--heading-color)); background: #fff;
  border: 1px solid var(--input-border-color); border-radius: var(--btn-border-radius);
  cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.size-btn:hover span { border-color: var(--input-border-hover-color); }
.size-btn input:checked + span { background: rgb(var(--heading-color)); border-color: rgb(var(--heading-color)); color: #fff; }
.size-btn input:focus-visible + span { outline: 2px solid rgb(var(--heading-color)); outline-offset: 2px; }
.size-btn input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.pdp-error { margin-top: 10px; font-size: 13px; color: #b93a27; }
.pdp-add { width: 100%; height: 52px; margin-top: 20px; }
.pdp-add:disabled { opacity: .5; cursor: not-allowed; }

/* Acordeón de detalles / envíos */
.pdp-acc { margin-top: 32px; border-top: 1px solid var(--footer-divider-col); }
.pdp-acc details { border-bottom: 1px solid var(--footer-divider-col); }
.pdp-acc summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; list-style: none; cursor: pointer;
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: rgb(var(--heading-color));
}
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc summary::after { content: "+"; font-size: 18px; font-weight: 400; line-height: 1; }
.pdp-acc details[open] summary::after { content: "\2212"; }
.pdp-acc__body { padding-bottom: 18px; font-size: 14px; }
.pdp-acc__body li { margin-bottom: 6px; padding-left: 14px; position: relative; }
.pdp-acc__body li::before { content: ""; position: absolute; left: 0; top: .7em; width: 4px; height: 1px; background: currentColor; }

/* YOU MAY ALSO LIKE: en tablet (3 col) se muestran 3 para no dejar huecos */
.pdp-related { padding-top: 40px; }
@media (min-width: 768px) and (max-width: 1023px) { .pdp-related .product-card:nth-child(4) { display: none; } }


/* ==========================================================
   PROMPT 20 — Breakpoints 480 / 1280 / 1600 (grids, carrusel, ficha)
   Huecos: 12px (<480) · 20px (480) · 30px (768) · 36px (1600)
   ========================================================== */
@media (max-width: 479px) {
  .product-grid { gap: 24px 12px; }
  .carousel { --gap: 12px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .product-grid { gap: 28px 20px; }
  .carousel { --gap: 20px; }
}
@media (min-width: 1280px) {
  .product-grid { row-gap: 40px; }
  .pdp { gap: 80px; }
  .pdp-name { font-size: 28px; }
}
@media (min-width: 1600px) {
  .product-grid { gap: 48px 36px; }
  .carousel { --gap: 36px; }
  .product-card__name { font-size: 14px; }
  .pdp { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 100px; }
}