/* ============================================================================
 *  Centro Óptico Sicuani — CATÁLOGO (grid, tarjetas, filtros, ficha PDP)
 * ========================================================================== */
#view-catalogo { padding-top: 84px; }

.cat-hero { background: var(--cos-paper); padding: 3rem 5% 1.4rem; border-bottom: 1px solid var(--cos-line); }
.cat-hero__inner { max-width: 1280px; margin: 0 auto; }
.cat-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.4rem); letter-spacing: -.02em; line-height: 1; }
.cat-hero__title em { font-style: normal; color: var(--cos-blue); }
.cat-hero__desc { max-width: 620px; margin-top: .8rem; font-family: var(--font-body); color: var(--cos-ink-2); line-height: 1.6; }

/* tabs por tipo */
.cat-tabs { position: sticky; top: 64px; z-index: 20; display: flex; gap: .5rem; overflow-x: auto; padding: .9rem 5%; background: rgba(250,249,246,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cos-line); }
.cat-tab { flex: 0 0 auto; font-family: var(--font-body); font-weight: 600; font-size: .9rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--cos-line); background: #fff; color: var(--cos-ink); cursor: pointer; transition: .2s; }
.cat-tab:hover { border-color: var(--cos-blue); }
.cat-tab.active { background: var(--cos-ink); color: #fff; border-color: var(--cos-ink); }

.cat-wrap { max-width: 1280px; margin: 0 auto; padding: 1.6rem 5% 4rem; }

/* toolbar de filtros */
.cat-toolbar { display: grid; grid-template-columns: 1.3fr 2fr 1fr; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--cos-line); border-radius: var(--r-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-1); }
.cat-search { font-family: var(--font-body); font-size: .92rem; padding: .7rem .9rem; border: 1.6px solid var(--cos-line); border-radius: 12px; width: 100%; }
.cat-search:focus { outline: none; border-color: var(--cos-blue); }
.cat-selects { display: flex; gap: .6rem; flex-wrap: wrap; }
.cat-selects select { font-family: var(--font-body); font-size: .88rem; padding: .65rem .7rem; border: 1.6px solid var(--cos-line); border-radius: 12px; background: #fff; color: var(--cos-ink); cursor: pointer; }
.cat-selects select:focus { outline: none; border-color: var(--cos-blue); }
.cat-range { display: flex; flex-direction: column; gap: .3rem; font-family: var(--font-body); font-size: .82rem; color: var(--cos-ink-2); }
.cat-range strong { color: var(--cos-blue); }
.cat-range input[type=range] { width: 100%; accent-color: var(--cos-blue); cursor: pointer; }

.cat-count { font-family: var(--font-body); font-size: .85rem; color: var(--cos-ink-2); margin: 1.4rem 0 1rem; font-weight: 600; }

/* grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 1.4rem; }
.pcard { background: #fff; border: 1px solid var(--cos-line); border-radius: var(--r-md); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; animation: pcardIn .4s ease both; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.pcard__img { position: relative; aspect-ratio: 5/4; background: #f0eee8; cursor: pointer; overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pcard:hover .pcard__img img { transform: scale(1.06); }
.pcard__tag { position: absolute; top: .7rem; left: .7rem; font-family: var(--font-body); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .6rem; border-radius: 999px; color: #fff; z-index: 1; }
.pcard__tag--nuevo { background: var(--cos-blue); }
.pcard__tag--oferta { background: var(--cos-red); }
.pcard__tag--top { background: var(--cos-ink); }
.pcard__body { padding: 1rem 1.1rem 1.1rem; }
.pcard__brand { font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cos-ink-2); }
.pcard__name { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; margin: .25rem 0 .5rem; cursor: pointer; color: var(--cos-ink); }
.pcard__name:hover { color: var(--cos-blue); }
.pcard__meta { display: flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: .8rem; color: var(--cos-ink-2); }
.pcard__sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: 0 0 auto; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
.pcard__price { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--cos-ink); }
.pcard__btns { display: flex; gap: .4rem; }

.cat-empty { text-align: center; padding: 3rem 1rem; font-family: var(--font-body); color: var(--cos-ink-2); }
.cat-empty .btn { margin-top: 1rem; }

/* ------------------------------- PDP modal ------------------------------- */
.pdp-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15,16,22,.62); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 1.2rem; animation: fadeIn .25s ease; }
.pdp { width: min(900px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: var(--r-lg); display: grid; grid-template-columns: 1.05fr 1fr; position: relative; box-shadow: var(--shadow-2); animation: fadeUp .3s ease; }
.pdp__close { position: absolute; top: .8rem; right: .9rem; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 1.6rem; line-height: 1; color: var(--cos-ink); box-shadow: var(--shadow-1); }
.pdp__media { background: #f0eee8; display: flex; flex-direction: column; }
.pdp__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.4rem 1.4rem .6rem; }
.pdp__stage img { width: 100%; height: 100%; max-height: 360px; min-height: 280px; object-fit: contain; }
.pdp__thumbs { display: flex; gap: .5rem; padding: 0 1.4rem 1.4rem; }
.pdp__thumb { width: 66px; height: 54px; border-radius: 11px; border: 1.6px solid var(--cos-line); background: #fff; overflow: hidden; cursor: pointer; padding: 4px; transition: border-color .2s ease, transform .2s ease; }
.pdp__thumb:hover { transform: translateY(-1px); }
.pdp__thumb.active { border-color: var(--cos-ink); }
.pdp__thumb img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.pdp__info { padding: 2rem 1.8rem; font-family: var(--font-body); }
.pdp__brand { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cos-blue); }
.pdp__name { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; margin: .3rem 0 .5rem; line-height: 1.05; }
.pdp__price { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--cos-ink); margin-bottom: 1.2rem; }
.pdp__specs { list-style: none; border-top: 1px solid var(--cos-line); margin-bottom: 1.4rem; }
.pdp__specs li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--cos-line); font-size: .9rem; }
.pdp__specs span { color: var(--cos-ink-2); }
.pdp__specs strong { color: var(--cos-ink); display: inline-flex; align-items: center; gap: .4rem; text-transform: capitalize; }
.pdp__sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.pdp__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.pdp__actions .btn { flex: 1; min-width: 160px; }
.pdp__note { font-size: .8rem; color: var(--cos-ink-2); margin-top: 1rem; }

@keyframes pcardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------ RESPONSIVE ------------------------------- */
@media (max-width: 860px) {
  .cat-toolbar { grid-template-columns: 1fr; }
  .pdp { grid-template-columns: 1fr; max-height: 94vh; }
  .pdp__stage { padding: 1rem 1rem .4rem; }
  .pdp__stage img { min-height: 180px; max-height: 260px; }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .pcard__body { padding: .8rem; }
  .pcard__name { font-size: .95rem; }
  .pcard__price { font-size: 1.05rem; }
  .pcard__btns .btn { padding: .5rem .7rem; }
}
@media (prefers-reduced-motion: reduce) { .pcard, .pdp, .pdp-overlay { animation: none; } .pcard:hover .pcard__img img { transform: none; } }

/* fix: el overlay solo se muestra al abrir ficha (no bloquear con blur) */
.pdp-overlay[hidden]{display:none !important;}

/* ============================================================================
 *  PREMIUM v2 — hover de ángulo en tarjeta · relacionados · portada comprable
 * ========================================================================== */
/* Tarjeta: dos imágenes (frente + 3/4) con cross-fade en hover (estilo Ray-Ban) */
.pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .45s ease; }
.pcard__img-back { opacity: 0; }
.pcard:hover .pcard__img-front { opacity: 0; }
.pcard:hover .pcard__img-back { opacity: 1; }
.pcard:hover .pcard__img-front, .pcard:hover .pcard__img-back { transform: scale(1.05); }
.pcard__sw { box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
@media (hover: none) { .pcard__img-back { display: none; } }

/* Ficha: productos relacionados (fila a todo el ancho) */
.pdp__related { grid-column: 1 / -1; border-top: 1px solid var(--cos-line); padding: 1.5rem 1.8rem 1.9rem; }
.pdp__related h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
.pdp__related-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.pdp__rel { text-align: left; background: #fff; border: 1px solid var(--cos-line); border-radius: 13px; overflow: hidden; cursor: pointer; padding: 0; transition: transform .2s ease, box-shadow .2s ease; }
.pdp__rel:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.pdp__rel img { width: 100%; aspect-ratio: 5/4; object-fit: cover; background: #f0eee8; display: block; }
.pdp__rel-b { display: block; padding: .55rem .7rem .8rem; }
.pdp__rel-brand { font-family: var(--font-body); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cos-ink-2); display: block; }
.pdp__rel-n { font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: var(--cos-ink); display: block; margin: .1rem 0 .25rem; line-height: 1.25; }
.pdp__rel-p { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--cos-ink); }

/* Portada comprable: grilla de productos reales en "Best Sellers" */
.hp-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; max-width: 1280px; margin: 1.6rem auto 0; padding: 0 5%; }

@media (max-width: 860px) { .pdp__related-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .hp-prods { grid-template-columns: repeat(2, 1fr); gap: .9rem; } }