/* =========================
   Encabezado SEO clicable
========================= */
.lp-seo-head{ cursor:pointer; user-select:none; display:flex; align-items:center; gap:.5rem; }
.lp-seo-head h1{ color:var(--cdr-orange); }
.lp-seo-head .seo-chev{ color:var(--cdr-orange); transition:transform .25s ease; }
.lp-seo-head[aria-expanded="true"] .seo-chev{ transform:rotate(180deg); }

/* =========================
   Sortbar (si la usas)
========================= */
.lp-sortbar{ border-top:1px solid #eee; padding-top:.75rem; }
.lp-sortbar .form-select{ max-width:220px; }

/* =========================
   Toolbar chips (siempre scroll horizontal)
========================= */
.chips-scroll{
  display:flex; flex-wrap:nowrap; gap:.5rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  padding-bottom:.25rem; margin-inline:-.75rem; padding-inline:.75rem;
}
.chips-scroll > *{ flex:0 0 auto; scroll-snap-align:start; }
.chips-scroll::-webkit-scrollbar{ height:8px; }
.chips-scroll::-webkit-scrollbar-thumb{ background:#e0e0e0; border-radius:4px; }

/* =========================
   Chip base + estados
========================= */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .8rem; border-radius:2rem;
  font-size:.9rem; font-weight:700;
  background:#fff; border:2px solid var(--cdr-bdr);
  color:#000; text-decoration:none; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.chip:link, .chip:visited{ color:#000; text-decoration:none; }
.chip:hover, .chip:focus{ color:var(--cdr-orange); border-color:var(--cdr-orange); }

.chip-active{ background:#ffe9e4; border-color:#f1b3a3; color:#b3462f; }       /* para sub-opciones */
.chip-outline{ background:#f8f9fa; border-color:#e5e7eb; }
.chip-label{ pointer-events:none; font-weight:800; border-style:dashed; color:#555; }

/* Chips principales (Ordenar/Filtros/Precio) — se mantienen neutros */
.chip-action.chip-active{ background:#fff; border-color:var(--cdr-bdr); color:#000; }
/* Estado “abierto” visual sutil */
.chip-action[aria-expanded="true"]{ border-color:var(--cdr-orange); box-shadow:inset 0 0 0 1px var(--cdr-orange); }

/* Contador redondo en chips principales */
.chip-counter{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.35em; height:1.35em; border-radius:999px;
  font-size:.78rem; line-height:1; padding:0 .35em; margin-left:.4rem;
  background:#2b50f5; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.chip:hover .chip-counter, .chip:focus .chip-counter{ background:#2b50f5; color:#fff; }

/* “X” en chips activos (sub-opciones) */
.chip-active .chip-close{ margin-left:.25rem; font-size:.8rem; font-weight:700; color:inherit; }
.chip-active .chip-close:hover{ color:#000; }

.chip-separator {
  display:inline-block;
  width:2px;
  height:1.5em;
  background:var(--cdr-bdr);
  margin:0 .25rem;
}

/* =========================
   Paneles que empujan contenido
========================= */
.lp-panel{
  background:#fff; padding:.6rem 0; margin-bottom:.75rem;
}
.lp-panel .chips-scroll{
  margin-inline:-.2rem; padding-inline:.2rem; padding-bottom:.25rem;
}

/* =========================
   Tarjetas producto
========================= */
.product-card{
  display:block; height:100%;
  border:1px solid var(--cdr-bdr); border-radius:.6rem; background:#fff; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:box-shadow .2s, transform .2s, border-color .2s;
  text-decoration:none;
}
.product-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.10); transform:translateY(-2px); border-color:#ddd; }
.product-media{ position:relative; background:#fff; overflow:hidden; }
.product-img{ width:100%; height:auto; display:block; transition:transform .25s ease; }
.product-card:hover .product-img{ transform:scale(1.05); }

.etiqueta{
  position:absolute; top:0; left:0; z-index:3;
  background:var(--cdr-orange); color:#fff;
  font-size:.72rem; font-weight:700; padding:.16rem .65rem; border-radius:.05rem;
}

.product-body{ padding:.8rem .9rem 1rem; text-align:center; }
.product-title{ margin:0 0 .25rem; color:#111; font-weight:800; text-transform:uppercase; font-size:.92rem; line-height:1.25; min-height:2.4em; }
.product-price{ color:#666; font-size:.92rem; }

.badge-cdr{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--cdr-box-bg); color:var(--badge-text);
  padding:.25rem .6rem; border-radius:.35rem; font-size:.8rem; font-weight:500;
}
.badge-cdr i{ font-size:.85rem; }

/* =========================
   Paginación
========================= */
.lp-pagination .page-item.active .page-link{ background:#212529; border-color:#212529; }

/* =========================
   Botones inferiores (destacados)
========================= */
.botones-inferiores .bi-card{
  position:relative; height:170px; border-radius:.6rem; overflow:hidden;
  background:#ddd; box-shadow:0 1px 2px rgba(0,0,0,.04);
  outline:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, outline-color .18s ease;
}
.botones-inferiores .bi-media{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(.95); transition:transform .25s ease, filter .25s ease;
}
.botones-inferiores .bi-overlay{ position:absolute; inset:0; } /* sin degradado */
.botones-inferiores .bi-content{
  position:absolute; inset:auto 14px 14px 14px; display:flex; flex-direction:column; gap:.25rem;
  text-shadow:0 2px 4px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.5);
}
.botones-inferiores .bi-label{ font-size:.9rem; font-weight:600; opacity:.95; }
.botones-inferiores .bi-title{ margin:0; font-size:1.25rem; line-height:1.1; font-weight:800; }
.botones-inferiores .bi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  outline-color:color-mix(in srgb, var(--bi-accent,#e6543a) 45%, transparent);
}
.botones-inferiores .bi-card:hover .bi-media{ transform:scale(1.04); filter:saturate(1); }

/* =========================
   Toolbar (wrapper de la cabecera de chips)
========================= */
.lp-toolbar.chips-scroll{ /* ya hereda la definición general de .chips-scroll */ }





/* ----- ASPECT RATIO (solo esto) ----- */
.product-media {
    aspect-ratio: 1 / 1;   /* NORMAL → cuadrada */
    overflow: hidden;
}
.product-col-double .product-media {
    aspect-ratio: 2 / 1;   /* DOBLE → panorámica */
}
.product-media .product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ----- ANCHOS SEGÚN PANTALLA ----- */

/* MOBILE: row-cols-2 → tarjeta doble ocupa 2 columnas (100%) */
@media (max-width: 767.98px) {
    .product-grid .product-col-double {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* MD: row-cols-md-3 → 3 columnas, doble = 2 columnas */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .product-grid .product-col-double {
        flex: 0 0 66.6667% !important;
        max-width: 66.6667% !important;
    }
}

/* XL: row-cols-xl-4 → 4 columnas, doble = 2 columnas */
@media (min-width: 1200px) {
    .product-grid .product-col-double {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}