/* ==========================================================================
   Calvo Glass — catálogo: grilla, tarjeta, controles y panel de filtros

   GENERADO. No editar a mano: `python3 tools/extract_catalog_css.py` lo
   reescribe leyendo `prototype/v8-giro/categoria.html` con el navegador, que
   es la única forma de sacar CSS sin que un comentario o una anidación te
   descoloquen el parseo en silencio.

   Lo que cambia al traerlo: los colores literales pasan a token, y las reglas
   del chrome no se copian porque ya viven en chrome.css.
   ========================================================================== */

.gc, .pc { position: relative }
.gc .lb a, .pc .lb a { color: inherit; text-decoration: none }
.gc .sq, .pc .sq { padding: 0px }
.gc .sq .ph, .pc .sq .ph { position: absolute; inset: 0px; display: block; padding: 12% }
.product {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(20px, 3.4vw, 54px);
  padding: var(--s5) var(--m) 0;
  align-items: start;
}
.gallery { position: sticky; top: 78px; --stage: var(--t-sky) }
.stage {
  background: var(--stage);
  aspect-ratio: 1 / 1.04;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  transition: background var(--d-image) var(--e-standard);
}
.stage img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 9%;
  opacity: 0;
  transition: opacity var(--d-image) var(--e-standard);
}
.stage img.on { opacity: 1 }
.stage .badge { position: absolute; top: 14px; left: 14px; z-index: 2 }
.thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  margin-top: var(--s2);
}
.thumbs button {
  background: var(--stage);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 0 var(--ink);
  transition: box-shadow var(--d-micro),background var(--d-image) var(--e-standard);
}
.thumbs button[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--ink) }
.thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 12% }
.info .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: var(--s3);
}
.info h1 { font-size: clamp(30px, 4vw, 50px); margin: 0 0 var(--s3) }
.info .price { font-size: 20px; font-weight: 500; margin-bottom: var(--s5) }
.info .lede {
  color: rgb(74, 70, 63);
  max-width: 44ch;
  margin: 0 0 var(--s6);
  font-size: 14.5px;
}
.swatches { display: flex; gap: 9px }
.swatches button {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 0px 1px;
  transition: box-shadow var(--d-micro);
}
.swatches button::after { content: ""; position: absolute; inset: -7px; border-radius: var(--r-pill) }
.swatches button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink),inset 0 0 0 3px var(--cream) }
.buy {
  display: flex;
  gap: var(--s3);
  align-items: stretch;
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.qty button { width: 40px; height: 48px; font-size: 16px }
.qty button:hover { background: var(--tile) }
.qty span {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ship-note { font-size: 12.5px; color: var(--ash); margin-bottom: var(--s8) }
.ship-note b { color: var(--brick) }
.spectable { width: 100%; border-collapse: collapse; margin-bottom: var(--s6) }
.spectable td { font-size: 13px; padding: 9px 0px; border-bottom: 1px solid var(--rule) }
.spectable td:first-child { color: var(--ash) }
.spectable td:last-child { text-align: right; font-weight: 500 }
.acc { border-top: 1px solid var(--rule) }
.acc details { border-bottom: 1px solid var(--rule) }
.acc summary {
  padding: 14px 0px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.acc summary::-webkit-details-marker { display: none }
.acc summary::after { content: "+"; font-size: 17px; color: var(--ash) }
.acc details[open] summary::after { content: "–" }
.acc p { margin: 0px 0px 14px; font-size: 13.5px; color: var(--ash); max-width: 54ch }
.setup {
  margin: clamp(48px, 6vw, 88px) 0px 0px;
  background: var(--tile);
  padding: clamp(26px,3.4vw,46px) var(--m);
}
.setup .hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: var(--s6);
  flex-wrap: wrap;
}
.setup h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0px;
}
.setup .why { font-size: 12.5px; color: var(--ash) }
.kit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--gap);
}
.kit .it {
  background: var(--cream);
  position: relative;
  padding: var(--s4);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow var(--d-micro);
}
.kit .it[data-on="true"] { box-shadow: inset 0 0 0 2px var(--ink) }
.kit .it.base { box-shadow: inset 0 0 0 2px var(--ink) }
.kit .it .box {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 19px;
  height: 19px;
  border: 1px solid var(--border);
  background: var(--paper);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: transparent;
}
.kit .it[data-on="true"] .box, .kit .it.base .box { background: var(--ink); border-color: var(--ink); color: var(--on-dark) }
.kit .it img { height: 92px; width: auto; margin: var(--s3) auto var(--s4) }
.kit .it .n { font-size: 12.5px; font-weight: 500; line-height: 1.35 }
.kit .it .p { font-size: 12.5px; color: var(--ash); margin-top: 3px }
.kit .it .tagline { font-size: 11px; color: var(--ash); margin-top: 5px }
.pc .sq { aspect-ratio: 1 / 1; overflow: hidden; position: relative; padding: 12% }
.pc .sq img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--d-image) var(--e-standard);
}
.pc:hover .sq img { transform: translateY(-6px) scale(1.03) }
.pc .lb { padding-top: 11px; font-size: 13.5px; font-weight: 500 }
.pc .pz { font-size: 13px; color: var(--ash); margin-top: 1px }
.stage { transition: background 0.62s cubic-bezier(0.22, 1, 0.36, 1) }
.stage.haloed::before { --halo: rgba(255,255,255,.62); width: min(64%, 440px) }
.stage img {
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage img:not(.on) { transform: scale(0.965) }
.stage img.on { transform: none }
.gc .sq, .pc .sq, .cat .sq { transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1) }
.gc .sq::after, .pc .sq::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9%;
  translate: -50%;
  width: 46%;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(rgba(27, 26, 23, 0.32), transparent 72%);
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.gc:hover .sq::after, .pc:hover .sq::after { opacity: 1; transform: scale(1) }
.gc:hover .sq img, .pc:hover .sq img {
  transform: translateY(-11px) scale(1.035);
  filter: drop-shadow(rgba(27, 26, 23, 0.13) 0px 16px 20px);
}
.gc .sq img, .pc .sq img { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s }
.gc .sq img, .pc .sq img, .cat .sq img { filter: drop-shadow(rgba(27, 26, 23, 0.09) 0px 6px 10px) }
.accion {
  margin: clamp(40px, 5vw, 72px) 0px 0px;
  padding: clamp(26px,3.4vw,44px) var(--m);
  background: var(--tile);
}
.accion .hd { margin-bottom: var(--s5) }
.accion h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -0.025em;
  margin: 0px 0px 6px;
}
.accion .hd p { margin: 0px; font-size: 13px; color: var(--ash) }
.accion .frame {
  position: relative;
  max-width: 340px;
  aspect-ratio: 9 / 15;
  overflow: hidden;
  background: rgb(0, 0, 0);
  cursor: pointer;
}
.accion .frame img, .accion .frame video {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.accion .frame video { opacity: 0; transition: opacity 0.5s }
.accion .frame.playing video { opacity: 1 }
.accion .frame .play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  background: rgba(251, 246, 236, 0.92);
  color: rgb(27, 26, 23);
  font-size: 17px;
  display: grid;
  place-items: center;
  transition: opacity 0.3s, transform 0.3s;
}
.accion .frame.playing .play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8);
}

@media (max-width: 860px) {
  .product { grid-template-columns: 1fr }
  .gallery { position: static }
}

@media (max-width: 760px) {
  .qty button { width: 40px; height: 40px }
  .swatches button { width: 36px; height: 36px }
  .thumbs button { min-height: 44px }
}

@media (hover: none) {
  .gc .add, .pc .add, .cat .add { display: none }
  .gc .sq::after, .pc .sq::after { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .stage img:not(.on) { transform: none }
  .gc:hover .sq img, .pc:hover .sq img { transform: none; filter: none }
  .gc .sq::after, .pc .sq::after { display: none }
  .accion .frame video { display: none }
}