/* ==========================================================================
   Catálogo (Vue). Pensado primero para el teléfono: arriba solo el buscador y
   las líneas; los filtros viven en una hoja que sube desde abajo y solo
   aparecen cuando se piden. En escritorio los filtros van en una columna fija
   a la izquierda y los productos en lista.
   ========================================================================== */

[v-cloak] { visibility: hidden; }


/* Sin `isolation`: aislar la capa atrapaba el velo de la hoja de filtros
   debajo del encabezado, que seguía tocable con la hoja abierta. La marca de
   agua y los triángulos van primero en el orden y el catálogo se pinta encima. */
.cg-envoltura { position: relative; background: #F8F7F4; }
.cg { min-height: 70vh; }
/* La «A» de Plomart como marca de agua, fija en la esquina mientras se baja. */
.cg-envoltura::before {
  content: ""; position: fixed; right: -6vmin; bottom: -8vmin;
  width: min(62vmin, 560px); aspect-ratio: 1;
  background: url("../img/logo/a-mark-672.1ca22a9a2545.webp") center / contain no-repeat;
  opacity: .05; pointer-events: none;
}
.cg { position: relative; }

/* --- Barra fija: buscador + líneas ------------------------------------- */
/* Las líneas quedan fijas justo debajo del encabezado, que también es fijo.
   `--alto-header` lo mide catalogo.js, porque cambia entre teléfono y escritorio. */
.cg-barra {
  position: sticky; top: var(--alto-header, 0px); z-index: 30;
  background: var(--surface-card);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
/* Sugerencias mientras escribe */
.cg-sugerencias {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  width: min(520px, calc(100vw - 32px));
  background: var(--surface-card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-2); box-shadow: var(--shadow-3);
  overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.cg-sug {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--sp-3);
  padding: 8px var(--sp-3); color: var(--text-body); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.cg-sug[aria-selected="true"], .cg-sug:hover { background: var(--cream-2); }
.cg-sug__foto { width: 44px; height: 44px; border-radius: 6px; background: #fff; border: 1px solid var(--line);
                display: grid; place-items: center; overflow: hidden; }
.cg-sug__foto img { width: 100%; height: 100%; object-fit: contain; }
.cg-sug__txt { min-width: 0; display: flex; flex-direction: column; }
.cg-sug__txt b { font-size: var(--type-body-sm); font-weight: var(--weight-medium); line-height: 1.25;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cg-sug__txt small { font-size: var(--type-caption); color: var(--text-secondary); }
@media (max-width: 1023px) { .cg-sugerencias { left: 0; width: auto; } }
.cg-sug__precio small { display: block; font: var(--type-overline) var(--font-body); color: var(--brass-dark); text-align: right; }
.cg-sug__precio { font-family: var(--font-display); font-weight: var(--weight-semibold);
                  font-variant-numeric: var(--numeric-tabular); white-space: nowrap; font-size: var(--type-body-sm); }
/* Con el selector largo: cuelga del buscador del encabezado y su regla de
   botones le quitaba el alto (quedaba de 17 px). */
.plm-buscador .cg-sug__todos { width: 100%; border-radius: 0; border: 0; background: var(--surface-alt, #faf8f4); padding: 12px;
                 font: var(--weight-semibold) var(--type-body-sm) var(--font-body); color: var(--brass-dark); cursor: pointer; }

/* Líneas: una fila que se desliza de lado, sin salto de renglón. */
.cg-lineas {
  display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
  padding: var(--sp-3) 0; -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--gutter-mobile, 16px) * -1); padding-left: var(--gutter-mobile, 16px);
  padding-right: var(--gutter-mobile, 16px);
}
.cg-lineas::-webkit-scrollbar { display: none; }
.cg-lineas button {
  flex: none; border: 1px solid var(--line-strong); background: var(--surface-card);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  font: var(--weight-medium) var(--type-body-sm) var(--font-body); color: var(--text-body);
}
.cg-lineas button small { color: var(--text-secondary); font-variant-numeric: var(--numeric-tabular); margin-left: 2px; }
.cg-lineas button[aria-pressed="true"] { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-inverse); }
.cg-lineas button[aria-pressed="true"] small { color: var(--brass); }

/* --- Cuerpo -------------------------------------------------------------- */
.cg-cuerpo { display: block; padding-top: var(--sp-4); padding-bottom: var(--sp-8); }
.cg-lista { min-width: 0; }

.cg-resumen { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
              margin-bottom: var(--sp-3); font-size: var(--type-body-sm); color: var(--text-secondary); }
.cg-resumen b { color: var(--text-body); font-variant-numeric: var(--numeric-tabular); }
.cg-resumen__acciones { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.cg-resumen > span { white-space: nowrap; }
.cg-btn-filtros {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong);
  background: var(--surface-card); border-radius: 999px; padding: 7px 12px; cursor: pointer;
  font: var(--weight-semibold) var(--type-body-sm) var(--font-body); color: var(--text-body);
}
.cg-resumen select {
  border: 1px solid var(--line-strong); background: var(--surface-card); border-radius: 999px;
  padding: 7px 10px; font: var(--type-body-sm) var(--font-body); color: var(--text-body); max-width: 128px;
}
.cg-vistas { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.cg-vistas button { border: 0; background: var(--surface-card); padding: 7px 10px; cursor: pointer; color: var(--text-secondary); display: grid; }
.cg-vistas button[aria-pressed="true"] { background: var(--surface-inverse); color: var(--text-inverse); }

.cg-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.cg-chips button { border: 0; background: var(--cream-2); border-radius: 999px; padding: 5px 10px 5px 12px;
                   font: var(--weight-medium) var(--type-caption) var(--font-body); color: var(--text-body); cursor: pointer; }
.cg-chips button span { margin-left: 4px; color: var(--text-secondary); }

/* --- Tarjetas ----------------------------------------------------------- */
/* La tarjeta es la del sitio (`.plm-pcard`, plomart-ds.css): el negocio
   prefirió su diseño. Aquí solo va la rejilla, el bloque de precio y el
   acomodo en lista. */
.cg-rejilla { display: grid; gap: var(--sp-3); }
.cg-rejilla--rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-celda { position: relative; min-width: 0; }
.cg-marcador { position: absolute; inset: 0; background: var(--cream-2) url("../img/logo/a-mark-336.b53db8c5c924.webp") center / 38% no-repeat; }
.cg-rejilla .plm-pcard__media { display: block; }

/* El bloque de precio (.cg-precio) vive en plomart-ds.css: lo usa toda tarjeta del sitio. */

/* Cuadrícula en el teléfono: dos columnas angostas, así que todo un punto más chico. */
@media (max-width: 639px) {
  .cg-rejilla--rejilla { gap: var(--sp-2); }
  .cg-rejilla--rejilla .plm-pcard__cuerpo { padding: var(--sp-3); gap: 4px; }
  .cg-rejilla--rejilla .plm-pcard__nombre { font-size: var(--type-body-sm); }
  .cg-rejilla--rejilla .cg-precio__socio b { font-size: var(--type-h5); }
  .cg-rejilla--rejilla .plm-chip-cat { display: none; }
}

/* En cuadrícula los envoltorios no existen para el acomodo: la tarjeta se
   comporta como la del resto del sitio. */
.cg-rejilla--rejilla .cg-info, .cg-rejilla--rejilla .cg-cierre { display: contents; }

/* Lista: la misma tarjeta, acostada, en tres bloques — foto, datos, y precio
   con botón. Es la vista por omisión en escritorio. */
.cg-rejilla--lista { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.cg-rejilla--lista .plm-chip-cat { display: none; }
.cg-rejilla--lista .plm-pcard { flex-direction: row; }
.cg-rejilla--lista .plm-pcard:hover { transform: none; }
.cg-rejilla--lista .plm-pcard__media { width: 104px; flex: none; aspect-ratio: auto; min-height: 104px;
                                       border-bottom: 0; border-right: 1px solid var(--line); }
.cg-rejilla--lista .plm-pcard__cuerpo { flex-direction: row; align-items: center; gap: var(--sp-5);
                                        padding: var(--sp-3) var(--sp-4); min-width: 0; }
.cg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cg-rejilla--lista .plm-pcard__nombre { font-size: var(--type-body); }
.cg-cierre { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.cg-rejilla--lista .cg-precio { margin: 0; padding: 0; text-align: right; justify-items: end; min-width: 150px; }
.cg-rejilla--lista .cg-precio__socio { align-items: flex-end; }
.cg-rejilla--lista .plm-pcard__pie { margin: 0; padding: 0; }
.cg-rejilla--lista .plm-pcard__cta { flex: none; }

/* Lista en pantalla angosta: los datos arriba a todo lo ancho y, abajo, el
   precio a la izquierda y el botón a la derecha. */
@media (max-width: 767px) {
  .cg-rejilla--lista .plm-pcard__media { width: 84px; min-height: 0; }
  .cg-rejilla--lista .plm-pcard__cuerpo { flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: var(--sp-3); }
  .cg-rejilla--lista .plm-pcard__nombre { font-size: var(--type-body-sm); }
  .cg-cierre { justify-content: space-between; align-items: flex-end; }
  .cg-rejilla--lista .cg-precio { text-align: left; justify-items: start; min-width: 0; flex: 1; }
  .cg-precio__socio span, .cg-precio__mostrador { white-space: nowrap; }
  /* El botón, solo el «+»: con texto se enciman el precio y el botón. */
  .cg-rejilla--lista .plm-pcard__cta { width: 44px; height: 44px; min-height: 0; padding: 0; flex: none; }
  .cg-rejilla--lista .plm-pcard__cta [data-etiqueta-cta] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cg-rejilla--lista .cg-precio__socio { align-items: flex-start; }
  .cg-rejilla--lista .cg-precio__socio b { font-size: var(--type-h5); }
}

.cg-vacio { background: var(--surface-card); border: 1px dashed var(--line-strong); border-radius: var(--radius-2);
            padding: var(--sp-7) var(--sp-4); text-align: center; }
.cg-vacio p { margin: 0 0 var(--sp-4); }
.cg-fin { height: 1px; }

/* --- Filtros: hoja desde abajo en el teléfono --------------------------- */
.cg-filtros {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-height: 82vh; display: flex; flex-direction: column;
  background: var(--surface-card); border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  transform: translateY(105%); transition: transform .25s ease-out;
}
.cg-filtros--abierto { transform: none; }
.cg-velo { position: fixed; inset: 0; background: rgba(21,21,21,.45); z-index: 55; }
.cg-filtros__cab { display: flex; align-items: center; justify-content: space-between;
                   padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.cg-cerrar { border: 0; background: var(--cream-2); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.cg-filtros__scroll { overflow-y: auto; padding: 0 var(--sp-4); flex: 1; }
.cg-filtros section { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.cg-filtros section:last-child { border-bottom: 0; }
.cg-filtros h3 { font-size: var(--type-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase;
                 color: var(--text-secondary); margin: 0 0 var(--sp-2); }
.cg-op { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 0; cursor: pointer; font-size: var(--type-body-sm); }
.cg-op input { width: 18px; height: 18px; accent-color: var(--brass-dark); flex: none; }
.cg-op span { flex: 1; }
.cg-op small { color: var(--text-secondary); font-variant-numeric: var(--numeric-tabular); }
.cg-filtros__pie { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-3);
                   padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
                   border-top: 1px solid var(--line); }

/* --- Escritorio -------------------------------------------------------- */
@media (min-width: 640px) {
  .cg-rejilla--rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cg-lineas { margin: 0; padding-left: 0; padding-right: 0; }
  .cg-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  .cg-filtros {
    position: sticky; top: calc(var(--alto-header, 108px) + 72px); max-height: calc(100vh - var(--alto-header, 108px) - 90px); transform: none; box-shadow: none;
    border: 1px solid var(--line); border-radius: var(--radius-2); z-index: 1;
  }
  .cg-filtros__cab .cg-cerrar, .cg-filtros__pie, .cg-velo, .cg-btn-filtros { display: none; }
  .cg-rejilla--rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
}