/* ==========================================================================
   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.
   ========================================================================== */

.disp {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.crumb { padding: var(--s5) var(--m) 0; font-size: 12.5px; color: var(--ash) }
.crumb span { margin: 0px 7px; opacity: 0.5 }
.phead {
  padding: var(--s5) var(--m) var(--s6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s8);
  flex-wrap: wrap;
}
.phead h1 { font-size: clamp(34px, 5vw, 60px); margin: 0 0 var(--s3) }
.phead p { margin: 0px; color: rgb(74, 70, 63); max-width: 44ch; font-size: 14.5px }
.controls {
  position: sticky;
  top: 57px;
  z-index: 40;
  background: color-mix(in srgb,var(--cream) 94%,transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 11px var(--m);
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px 17px;
  font-size: 12.5px;
  font-weight: 500;
  transition: border-color var(--d-micro),background var(--d-micro);
}
.btn-filter:hover { border-color: var(--ink) }
.btn-filter .n {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
}
.count { font-size: 12.5px; color: var(--ash); margin-left: auto }
.sort { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px }
.sort select {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px 32px 8px 15px;
  font-size: 12.5px;
  font-weight: 500;
  appearance: none;
  background-image: linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.active {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 var(--m);
  margin-top: var(--s4);
}
.active:empty { display: none }
.tagf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--tile);
  border-radius: var(--r-pill);
  padding: 5px 8px 5px 14px;
  font-size: 12px;
  font-weight: 500;
}
.tagf button {
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 9px;
  display: grid;
  place-items: center;
  line-height: 1;
}
.clearall {
  font-size: 12px;
  color: var(--ash);
  text-decoration: underline;
  align-self: center;
}
.clearall:hover { color: var(--ink) }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  gap: var(--gap);
  padding: var(--s6) var(--m) 0;
}
.gc { transition: opacity var(--d-card) var(--e-standard) }
.gc[hidden] { display: none }
.gc .sq { aspect-ratio: 1 / 1; overflow: hidden; position: relative; padding: 12% }
.gc .sq img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--d-image) var(--e-standard);
}
.gc:hover .sq img { transform: translateY(-6px) scale(1.03) }
.gc .add {
  position: absolute;
  inset: auto 10px 10px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  padding: 9px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity var(--d-control),transform var(--d-control);
}
.gc:hover .add, .gc:focus-within .add { opacity: 1; transform: none }
.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  z-index: 2;
}
.gc .lb { padding-top: 11px; font-size: 13.5px; font-weight: 500 }
.gc .sub { font-size: 12px; color: var(--ash); margin-top: 1px }
.gc .pz { font-size: 13px; margin-top: 4px }
.gc .sw { display: flex; gap: 4px; margin-top: 7px }
.gc .sw i {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  display: block;
  box-shadow: rgba(0, 0, 0, 0.13) 0px 0px 0px 1px;
}
.gc.soldout .sq img { opacity: 0.42 }
.more { display: grid; place-items: center; padding: var(--s10) var(--m) 0 }
.pill {
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 11px 26px;
  font-size: 12.5px;
  font-weight: 500;
  transition: background var(--d-control),color var(--d-control);
}
.pill:hover { background: var(--ink); color: var(--on-dark) }
.empty {
  border: 1px dashed var(--border);
  padding: var(--s10);
  text-align: center;
  margin: var(--s6) var(--m) 0;
  max-width: 460px;
}
.empty h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  margin: 0 0 var(--s2);
}
.empty p { color: var(--ash); font-size: 13.5px; margin: 0 0 var(--s5) }
.drawer {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: min(360px, 90vw);
  background: var(--cream);
  z-index: 80;
  transform: translateX(-100%);
  transition: transform var(--d-card) var(--e-standard);
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0.16) 14px 0px 40px;
}
.drawer.on { transform: none }
.drawer .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--rule);
}
.drawer .top h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  margin: 0px;
}
.drawer .body { flex: 1 1 0%; overflow-y: auto; padding: var(--s5) var(--s6) }
.fg { margin-bottom: var(--s8) }
.fg h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 var(--s4);
}
.opts { display: flex; flex-wrap: wrap; gap: 7px }
.opt {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  transition: background var(--d-micro),color var(--d-micro),border-color var(--d-micro);
}
.opt:hover { border-color: var(--ink) }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); border-color: var(--ink) }
.opt .c {
  width: 11px;
  height: 11px;
  border-radius: var(--r-pill);
  display: inline-block;
  vertical-align: -1px;
  margin-right: 6px;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 0px 0px 1px;
}
.opt .qty { color: var(--ash); margin-left: 5px; font-weight: 400 }
.opt[aria-pressed="true"] .qty { color: color-mix(in srgb,var(--on-dark) 65%,transparent) }
.range { display: flex; align-items: center; gap: var(--s3) }
.range input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 9px 11px;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 13px;
  background: var(--paper);
}
.drawer .foot {
  border-top: 1px solid var(--rule);
  padding: var(--s5) var(--s6);
  display: flex;
  gap: var(--s3);
}
.drawer .foot .apply {
  flex: 1 1 0%;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  padding: 13px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.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, .pc { position: relative }
.gc .lb a, .pc .lb a { color: inherit; text-decoration: none }
.gc .lb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
.gc .sq, .pc .sq { padding: 0px }
.gc .sq .ph, .pc .sq .ph { position: absolute; inset: 0px; display: block; padding: 12% }
.gc .sq img, .pc .sq img, .cat .sq img { filter: drop-shadow(rgba(27, 26, 23, 0.09) 0px 6px 10px) }
.gc .sq { perspective: 900px; perspective-origin: 50% 45% }
.gc .sq img {
  transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s, filter 0.45s;
  backface-visibility: hidden;
}
.gc:hover .sq img { transform: translateY(-11px) scale(1.045) rotateY(-17deg) }
.gc .sq img.alt {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  opacity: 0;
}
.gc:hover .sq img.alt { opacity: 1 }
.gc:has(img.alt):hover .sq img.base { opacity: 0 }

@media (max-width: 760px) {
  .crumb a { display: inline-block; padding: 7px 0px }
  .rm, .clearall, .edit, .phead a { display: inline-block; padding: 7px 0px }
  .pill, .btn-filter, .arrows button, .coupon button, .opt {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .crumb a { min-height: 40px }
}

@media (max-width: 700px) {
  .controls { top: 56px }
  .grid { grid-template-columns: repeat(2, 1fr) }
  .count { order: 3; margin-left: 0px; width: 100% }
}

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

@media (prefers-reduced-motion: reduce) {
  .gc:hover .sq img, .pc:hover .sq img { transform: none; filter: none }
  .gc .sq::after, .pc .sq::after { display: none }
  .gc:hover .sq img { transform: none }
  .gc .sq img.alt { display: none }
}