/* =========================================================================
   Cosas de Camping — componentes del catálogo
   Reescrito para el tema propio: sin !important y sin overrides de Colibri.
   Rejilla calcada de Wallapop: auto-fill de 190px, gap 16px, tarjeta 0.80.
   ========================================================================= */

:root {
  --cm-bg-soft: #f3ece0;
  --cm-ad: #fbf4e6;
  --cm-ad-line: #eddfc2;
  --cm-ad-ink: #7a6130;
  --cm-card-min: 208px;
  --cm-gap: 20px;
}

/* ---------- botones ---------- */
.cm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 9px;
  padding: 11px 16px; font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s;
}
.cm-btn--block { width: 100%; }
.cm-btn--primary { background: var(--cm-accent); color: #fff; }
.cm-btn--primary:hover { background: var(--cm-accent-dark); color: #fff; }
.cm-btn--outline { background: #fff; color: var(--cm-ink); border-color: var(--cm-line); font-weight: 550; }
.cm-btn--outline:hover { background: var(--cm-bg-soft); border-color: var(--cm-ink-3); color: var(--cm-ink); }
.cm-btn--ghost { background: transparent; color: var(--cm-ink-2); border-color: var(--cm-line); font-weight: 550; }
.cm-btn--ghost:hover { background: var(--cm-bg-soft); color: var(--cm-ink); }
.cm-btn--danger { background: #fff; color: var(--cm-danger); border-color: #e7c4c3; }
.cm-btn--danger:hover { background: #fdf4f4; }

/* ---------- estructura ---------- */
.cm-app { display: block; }

.cm-searchbar { border-bottom: 1px solid var(--cm-line); background: #fff; }
.cm-searchbar__in { max-width: var(--cm-wrap); margin: 0 auto; padding: 14px 24px; }

.cm-search {
  display: flex; align-items: center; max-width: 720px;
  border: 1px solid var(--cm-line); border-radius: 9px; background: var(--cm-bg-soft);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cm-search:focus-within { border-color: var(--cm-accent); background: #fff; box-shadow: 0 0 0 3px var(--cm-accent-soft); }
.cm-search__icon { margin: 0 2px 0 12px; color: var(--cm-ink-3); flex: 0 0 auto; }
.cm-search input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 11px 10px; outline: none; font-size: 14.5px;
  color: var(--cm-ink); font-family: inherit;
}
.cm-search input::placeholder { color: var(--cm-ink-3); }
.cm-search__btn {
  border: 0; background: var(--cm-accent); color: #fff; margin: 3px;
  padding: 8px 18px; border-radius: 7px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.cm-search__btn:hover { background: var(--cm-accent-dark); }

.cm-layout {
  max-width: var(--cm-wrap); margin: 0 auto; padding: 22px 24px 70px;
  display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: 28px; align-items: start;
}
.cm-layout--detail { grid-template-columns: minmax(0, 1fr); }

/* ---------- filtros ---------- */
.cm-side { position: sticky; top: 120px; }
.cm-side__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cm-side__head h2 { font-size: 14px; font-weight: 650; margin: 0; display: flex; align-items: center; gap: 8px; }
.cm-side__count {
  background: var(--cm-accent); color: #fff; font-size: 11px; font-weight: 650;
  min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px;
}
.cm-side__chev { display: none; color: var(--cm-ink-3); transition: transform .2s; }
.cm-side__clear { font-size: 12.5px; color: var(--cm-accent); font-weight: 550; }

.cm-fgroup { border-top: 1px solid var(--cm-line-2); padding: 15px 0; }
.cm-fgroup:first-of-type { border-top: 0; padding-top: 0; }
.cm-fgroup__t {
  font-size: 11px; font-weight: 680; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cm-ink-3); margin: 0 0 10px;
}
/* El filtro de plataformas va plegado por defecto (solo muestra el titulo). */
.cm-fgroup--fold summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px;
}
.cm-fgroup--fold summary::-webkit-details-marker { display: none; }
.cm-fgroup--fold summary::before {
  content: '›'; color: var(--cm-ink-3); font-size: 15px; line-height: 1;
  display: inline-block; transition: transform .18s;
}
.cm-fgroup--fold[open] summary::before { transform: rotate(90deg); }
.cm-fgroup--fold[open] summary { margin-bottom: 10px; }
.cm-fgroup--fold:not([open]) > .cm-flist { display: none; }
.cm-fgroup--fold .cm-flist--scroll { padding-bottom: 2px; }

.cm-flist, .cm-flist ul { list-style: none; margin: 0; padding: 0; }
.cm-flist a {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 13.5px; color: var(--cm-ink-2);
}
.cm-flist a span { flex: 1; min-width: 0; }
.cm-flist a em { font-style: normal; font-size: 12px; color: var(--cm-ink-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; padding-left: 6px; }
.cm-flist a:hover { color: var(--cm-ink); }
.cm-flist a.is-on { color: var(--cm-accent); font-weight: 620; }
.cm-flist__parent > ul { display: none; }
.cm-flist__parent.is-open > ul { display: block; }
.cm-flist__row { display: flex; align-items: center; gap: 4px; }
.cm-flist__row > a { flex: 1; min-width: 0; }
.cm-flist__toggle {
  flex: 0 0 22px; width: 22px; height: 22px; padding: 0; margin: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 0; background: transparent; color: var(--cm-ink-3); border-radius: 6px;
  transition: transform .15s, background .15s, color .15s;
}
.cm-flist__toggle:hover { background: var(--cm-bg-soft); color: var(--cm-forest); }
.cm-flist__parent.is-open > .cm-flist__row > .cm-flist__toggle { transform: rotate(180deg); }
/* La lista de marcas lleva scroll propio y la barra de scroll se comia el
   contador, que ademas quedaba pegado al borde. Se le deja aire a la derecha
   y el numero se separa del nombre con su propio hueco. */
.cm-flist--scroll {
  max-height: 240px; overflow-y: auto;
  padding-right: 18px;
  scrollbar-width: thin; scrollbar-color: var(--cm-line) transparent;
}
.cm-flist--scroll::-webkit-scrollbar { width: 7px; }
.cm-flist--scroll::-webkit-scrollbar-thumb { background: var(--cm-line); border-radius: 4px; }
.cm-flist--scroll .cm-flist__link span { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El contador va a la derecha, alineado en columna, pero con aire suficiente
   para no pegarse al borde ni quedar debajo de la barra de scroll. */
.cm-flist--scroll .cm-flist__link em {
  margin-left: auto; padding-left: 12px;
  color: var(--cm-ink-2); font-weight: 600;
}

/* Buscador predictivo de marcas del panel de filtros */
.cm-bsearch { position: relative; margin-bottom: 9px; }
.cm-bsearch__input {
  width: 100%; border: 1px solid var(--cm-line); border-radius: 7px;
  padding: 8px 9px 8px 30px; font-size: 13.5px; outline: none; background: #fff;
  box-sizing: border-box;
}
.cm-bsearch__input:focus { border-color: var(--cm-accent); }
.cm-bsearch__icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--cm-ink-3); pointer-events: none;
}
.cm-bsearch__input:not(:placeholder-shown) ~ .cm-bsearch__icon { color: var(--cm-forest); }
.cm-bsearch__empty { list-style: none; color: var(--cm-ink-3); font-size: 12.5px; padding: 6px 2px; }

.cm-frange { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cm-frange input {
  width: 100%; border: 1px solid var(--cm-line); border-radius: 7px;
  padding: 8px 9px; font-size: 13.5px; outline: none; background: #fff;
}
.cm-frange input:focus { border-color: var(--cm-accent); }
.cm-frange span { color: var(--cm-ink-3); font-size: 13px; }

.cm-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-fchip {
  border: 1px solid var(--cm-line); border-radius: 20px; padding: 5px 11px;
  font-size: 12.5px; color: var(--cm-ink-2); background: #fff;
}
.cm-fchip:hover { border-color: var(--cm-ink-3); color: var(--cm-ink); }
.cm-fchip.is-on { background: var(--cm-accent-soft); border-color: var(--cm-accent); color: var(--cm-accent-dark); font-weight: 580; }

/* Los hijos del layout nunca imponen su min-content: sin esto, cualquier
   contenido ancho (cintas, tablas) desborda el viewport en movil. */
.cm-results,
.cm-ribbon,
.cm-ribbon__track,
.cm-grid,
.cm-directory { min-width: 0; }
.cm-ribbon__track { max-width: 100%; }

/* ---------- resultados ---------- */
.cm-results__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cm-results__head h1 { font-size: 19px; font-weight: 660; margin: 0; }
.cm-results__count { color: var(--cm-ink-3); font-weight: 450; font-size: 14.5px; }
.cm-results__tools { margin-left: auto; }
.cm-sort select {
  border: 1px solid var(--cm-line); border-radius: 7px; padding: 8px 10px;
  font-size: 13.5px; background: #fff; cursor: pointer; outline: none;
}
.cm-sort select:focus { border-color: var(--cm-accent); }

.cm-activef { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.cm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cm-bg-soft); border: 1px solid var(--cm-line); border-radius: 20px;
  padding: 4px 6px 4px 11px; font-size: 12.5px; color: var(--cm-ink-2);
}
.cm-tag b { font-weight: 600; color: var(--cm-ink); }
.cm-tag__x {
  width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 1px solid var(--cm-line);
  display: grid; place-items: center; font-size: 12px; color: var(--cm-ink-3); line-height: 1;
}
.cm-tag__x:hover { color: var(--cm-ink); border-color: var(--cm-ink-3); }
.cm-activef__clear { font-size: 12.5px; color: var(--cm-accent); font-weight: 550; margin-left: 4px; }

.cm-demo-note {
  border: 1px solid var(--cm-warn-line); background: var(--cm-warn-bg); color: var(--cm-warn-ink);
  border-radius: var(--cm-radius); padding: 11px 14px; font-size: 13px; margin: 0 0 16px;
}

/* ---------- rejilla (medidas de Wallapop) ---------- */
.cm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cm-card-min), 1fr));
  gap: var(--cm-gap);
}

.cm-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--cm-line); border-radius: var(--cm-radius);
  background: #fff; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.cm-card:hover { border-color: #cfd5da; box-shadow: var(--cm-shadow-lg); }
.cm-card__img { position: relative; aspect-ratio: 1 / 1; background: var(--cm-bg-soft); overflow: hidden; }
.cm-card__img a { display: block; width: 100%; height: 100%; }
.cm-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cm-card__ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 42px; color: #c9d2d8; background: linear-gradient(145deg,#eef1f3,#e2e7ea);
}
.cm-card__src {
  position: absolute; left: 8px; top: 8px;
  background: rgba(255,255,255,.94); border: 1px solid rgba(18,22,26,.08);
  font-size: 10.5px; font-weight: 640; padding: 3px 7px; border-radius: 5px; color: var(--cm-ink-2);
  max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-card__demo {
  position: absolute; left: 8px; top: 33px;
  background: #fff5d6; border: 1px solid #f0e2ae;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 4px; color: #7d6410;
}
.cm-card__offers {
  position: absolute; left: 8px; top: 33px;
  background: #e9f3ee; border: 1px solid #cfe5da;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 4px; color: #1c6b4a;
}
.cm-card__fav {
  position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.94); border: 1px solid rgba(18,22,26,.08);
  display: grid; place-items: center; cursor: pointer; color: var(--cm-ink-3);
  transition: color .15s, transform .15s; padding: 0;
}
.cm-card__fav:hover { color: #d3435c; transform: scale(1.08); }
.cm-card__fav.is-on, .cm-card__fav.is-active { color: #d3435c; }
.cm-card__fav.is-on svg, .cm-card__fav.is-active svg { fill: currentColor; }

.cm-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cm-card__price { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.cm-card__title { font-size: 13.5px; font-weight: 450; line-height: 1.35; margin: 0; }
.cm-card__title a {
  color: var(--cm-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-card__title a:hover { color: var(--cm-ink); }
.cm-card__meta {
  margin: auto 0 0; padding-top: 7px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--cm-ink-3);
}
.cm-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; display: inline-block; }

/* ---------- tarjeta publicitaria ---------- */
.cm-card--ad { border-color: var(--cm-ad-line); background: var(--cm-ad); }
.cm-card--ad:hover { border-color: #d8cdb4; }
.cm-card__adlabel {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  background: rgba(255,255,255,.95); border: 1px solid var(--cm-ad-line);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; color: var(--cm-ad-ink);
}
.cm-native-ad__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.cm-native-ad__media-inner {
  width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px; gap: 3px; background: linear-gradient(150deg,#1e3d33,#3c5c46 55%,#7d8f5a);
}
.cm-native-ad__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.cm-native-ad__headline { font-size: 15px; font-weight: 650; color: #fff; line-height: 1.25; }
.cm-card--ad .cm-product-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cm-card--ad .cm-category {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-ad-ink);
}
.cm-card--ad h3 { font-size: 13.5px; font-weight: 550; margin: 0; line-height: 1.35; }
.cm-card--ad h3 a { color: var(--cm-ink); }
.cm-card--ad .cm-product-card__meta { font-size: 12px; color: var(--cm-ad-ink); display: flex; gap: 6px; }
.cm-card--ad .cm-product-card__cta { margin-top: auto; padding-top: 7px; font-size: 12.5px; font-weight: 620; color: var(--cm-accent-dark); }

.cm-ad-slot { max-width: var(--cm-wrap); margin: 0 auto; padding: 14px 24px; }
.cm-ad-slot > span {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cm-ink-3); margin-bottom: 6px;
}

/* ---------- paginación / vacío ---------- */
.cm-pagination { display: flex; justify-content: center; gap: 5px; margin-top: 34px; flex-wrap: wrap; }
.cm-pagination .page-numbers {
  min-width: 34px; height: 34px; border: 1px solid var(--cm-line); border-radius: 7px;
  display: grid; place-items: center; font-size: 13.5px; color: var(--cm-ink-2); padding: 0 9px;
}
.cm-pagination .page-numbers:hover { border-color: var(--cm-ink-3); }
.cm-pagination .page-numbers.current { background: var(--cm-ink); border-color: var(--cm-ink); color: #fff; font-weight: 600; }

.cm-empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--cm-line); border-radius: 12px; }
.cm-empty h3 { margin: 0 0 6px; font-size: 17px; }
.cm-empty p { color: var(--cm-ink-2); margin: 0 0 16px; }

/* ---------- directorio de tiendas ---------- */
.cm-directory { margin-top: 46px; border-top: 1px solid var(--cm-line); padding-top: 28px; }
.cm-directory__head h2 { font-size: 17px; font-weight: 640; margin: 0 0 4px; }
.cm-directory__head p { color: var(--cm-ink-2); font-size: 13.5px; margin: 0 0 16px; max-width: 70ch; }
.cm-directory__group { border-top: 1px solid var(--cm-line-2); }
.cm-directory__group summary {
  cursor: pointer; list-style: none; padding: 12px 0;
  font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 9px;
}
.cm-directory__group summary::-webkit-details-marker { display: none; }
.cm-directory__group summary::before {
  content: '›'; color: var(--cm-ink-3); font-size: 17px; transition: transform .18s; display: inline-block;
}
.cm-directory__group[open] summary::before { transform: rotate(90deg); }
.cm-directory__group summary em {
  font-style: normal; font-size: 11.5px; color: var(--cm-ink-3);
  background: var(--cm-bg-soft); border-radius: 20px; padding: 2px 8px;
}
.cm-directory__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px; padding: 4px 0 18px;
}
.cm-shop {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--cm-line); border-radius: 9px; padding: 9px 11px; background: #fff;
}
.cm-shop:hover { border-color: var(--cm-ink-3); color: inherit; }
.cm-shop__logo {
  width: 30px; height: 30px; border-radius: 7px; background: var(--cm-accent-soft);
  color: var(--cm-accent-dark); display: grid; place-items: center;
  font-weight: 750; font-size: 13px; flex: 0 0 auto;
}
.cm-shop__text { display: flex; flex-direction: column; min-width: 0; }
.cm-shop__text strong { font-size: 13.5px; font-weight: 600; }
.cm-shop__text small { font-size: 11.5px; color: var(--cm-ink-3); }
.cm-shop__go { margin-left: auto; color: var(--cm-ink-3); font-size: 13px; }

/* ---------- ficha ---------- */
.cm-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 13px; color: var(--cm-ink-3); margin-bottom: 16px; }
.cm-crumb__here { color: var(--cm-ink-2); }
.cm-detail__cols { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 34px; align-items: start; }
.cm-detail__main { max-width: 780px; }
.cm-gal {
  position: relative; border: 1px solid var(--cm-line); border-radius: 12px;
  overflow: hidden; background: var(--cm-bg-soft); aspect-ratio: 1 / 1;
}
.cm-gal img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.cm-gal__ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 70px; color: #c9d2d8; }

.cm-dsec { margin-top: 34px; }
.cm-dsec h2 { font-size: 16px; font-weight: 640; margin: 0 0 12px; }
.cm-dsec p { color: var(--cm-ink-2); margin: 0 0 10px; font-size: 14.5px; }

.cm-specs { border: 1px solid var(--cm-line); border-radius: 10px; overflow: hidden; }
.cm-specs > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px;
  padding: 11px 15px; font-size: 13.5px; border-top: 1px solid var(--cm-line-2);
}
.cm-specs > div:first-child { border-top: 0; }
.cm-specs > div:nth-child(odd) { background: var(--cm-bg-soft); }
.cm-specs dt { color: var(--cm-ink-3); margin: 0; }
.cm-specs dd { margin: 0; color: var(--cm-ink); font-weight: 520; }

.cm-notice {
  border: 1px solid var(--cm-warn-line); background: var(--cm-warn-bg);
  border-radius: 10px; padding: 13px 15px; font-size: 13px;
  color: var(--cm-warn-ink); line-height: 1.55; margin-top: 16px;
}
.cm-notice b { display: block; color: #54460f; margin-bottom: 2px; }

.cm-panel { border: 1px solid var(--cm-line); border-radius: 12px; padding: 20px; position: sticky; top: 120px; background: #fff; }
.cm-panel__src {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--cm-line); border-radius: 20px; padding: 4px 11px 4px 5px;
  font-size: 12.5px; font-weight: 560; color: var(--cm-ink-2); margin-bottom: 12px;
}
.cm-panel__src i {
  width: 20px; height: 20px; border-radius: 50%; background: var(--cm-accent-soft);
  display: grid; place-items: center; font-style: normal; font-size: 10px;
  font-weight: 800; color: var(--cm-accent-dark);
}
.cm-panel h1 { font-size: 20px; line-height: 1.3; font-weight: 640; margin: 0 0 12px; }
.cm-panel__price { font-size: 31px; font-weight: 730; letter-spacing: -.03em; line-height: 1; margin-bottom: 4px; }
.cm-panel__note { font-size: 12.5px; color: var(--cm-ink-3); margin: 0 0 18px; }
.cm-panel__offers { margin: 14px 0 0; display: grid; gap: 6px; }
.cm-panel__offers-label {
  font-size: 11px; font-weight: 640; letter-spacing: .05em; text-transform: uppercase; color: var(--cm-ink-3);
}
.cm-offer {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: rgba(255,255,255,.6); border: 1px solid var(--cm-line-2); border-radius: 8px;
  padding: 7px 10px; text-decoration: none; color: var(--cm-ink-2); transition: border-color .15s;
}
.cm-offer:hover { border-color: var(--cm-accent); }
.cm-offer__src { font-size: 12.5px; font-weight: 550; }
.cm-offer__price { font-size: 13.5px; font-weight: 700; color: var(--cm-forest); }
.cm-panel .cm-btn + .cm-btn { margin-top: 9px; }
.cm-panel__legal {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--cm-line-2);
  font-size: 12px; line-height: 1.55; color: var(--cm-ink-3);
}
.cm-panel__legal b { color: var(--cm-ink-2); font-weight: 600; }
.cm-panel__legal a { color: var(--cm-accent); }

/* ---------- consentimiento ---------- */
.cm-consent { position: fixed; inset: 0; z-index: 300; display: block; }
.cm-consent[hidden] { display: none; }
.cm-consent__backdrop { position: absolute; inset: 0; background: rgba(12,16,20,.45); }
.cm-consent.is-bar-only .cm-consent__backdrop { display: none; }

.cm-consent__bar {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(980px, calc(100% - 32px));
  background: #fff; border: 1px solid var(--cm-line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(12,16,20,.22);
  padding: 18px 20px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.cm-consent__bar h2 { font-size: 16px; font-weight: 650; margin: 0 0 5px; }
.cm-consent__bar p { margin: 0; font-size: 13.5px; color: var(--cm-ink-2); line-height: 1.55; max-width: 78ch; }
.cm-consent__bar p a { color: var(--cm-accent); text-decoration: underline; }
.cm-consent__bar-text { flex: 1; min-width: 260px; }
.cm-consent__bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* El rechazo tiene el mismo peso visual que la aceptación (criterio AEPD). */
.cm-consent__bar-actions .cm-btn { min-width: 128px; }

.cm-consent__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(680px, calc(100% - 32px)); max-height: calc(100vh - 60px);
  background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
}
.cm-consent__panel[hidden] { display: none; }
.cm-consent__panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--cm-line-2);
}
.cm-consent__panel-head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.cm-consent__close { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--cm-bg-soft); cursor: pointer; font-size: 18px; line-height: 1; }
.cm-consent__panel-body { padding: 6px 20px 16px; overflow-y: auto; }
.cm-consent__panel-foot {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--cm-line-2); background: var(--cm-bg-soft);
}

.cm-consent-cat { border-bottom: 1px solid var(--cm-line-2); padding: 15px 0; }
.cm-consent-cat:last-child { border-bottom: 0; }
.cm-consent-cat__head { display: flex; gap: 16px; align-items: flex-start; }
.cm-consent-cat__head h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 640; }
.cm-consent-cat__head p { margin: 0; font-size: 13px; color: var(--cm-ink-2); line-height: 1.5; }
.cm-consent-cat__locked { font-size: 11.5px; color: var(--cm-ink-3); white-space: nowrap; padding-top: 3px; }
.cm-consent-cat__more { margin-top: 9px; }
.cm-consent-cat__more summary { cursor: pointer; font-size: 12.5px; color: var(--cm-accent); font-weight: 550; }
.cm-consent-cat__more dl { margin: 9px 0 0; display: grid; grid-template-columns: 130px 1fr; gap: 5px 14px; font-size: 12.5px; }
.cm-consent-cat__more dt { color: var(--cm-ink-3); }
.cm-consent-cat__more dd { margin: 0; color: var(--cm-ink-2); }

.cm-consent-reopen {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--cm-line); background: #fff; color: var(--cm-ink-2);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(12,16,20,.12);
}
.cm-consent-reopen:hover { color: var(--cm-accent); border-color: var(--cm-accent); }

/* interruptor */
.cm-switch { display: inline-flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.cm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-switch__track {
  width: 42px; height: 24px; border-radius: 12px; background: #d5dade;
  position: relative; transition: background .18s; display: block;
}
.cm-switch__dot {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cm-switch input:checked + .cm-switch__track { background: var(--cm-accent); }
.cm-switch input:checked + .cm-switch__track .cm-switch__dot { transform: translateX(18px); }
.cm-switch input:focus-visible + .cm-switch__track { outline: 2px solid var(--cm-accent); outline-offset: 2px; }

/* ---------- panel de privacidad en la cuenta ---------- */
.cm-account-lead { color: var(--cm-ink-2); font-size: 14px; max-width: 80ch; }
.cm-flash { border-radius: 9px; padding: 11px 14px; font-size: 13.5px; }
.cm-flash--ok { background: var(--cm-accent-soft); color: var(--cm-accent-dark); border: 1px solid #cfe4dc; }

.cm-privacy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px; margin: 18px 0; }
.cm-privacy-card { border: 1px solid var(--cm-line); border-radius: 12px; padding: 16px; background: #fff; }
.cm-privacy-card.is-on { border-color: #cfe4dc; background: #fbfdfc; }
.cm-privacy-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cm-privacy-card h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
.cm-privacy-card__locked { font-size: 11.5px; color: var(--cm-ink-3); white-space: nowrap; }
.cm-privacy-card > p { font-size: 13px; color: var(--cm-ink-2); line-height: 1.5; margin: 8px 0 12px; }
.cm-privacy-card__meta { margin: 0 0 10px; font-size: 12px; }
.cm-privacy-card__meta > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 3px 0; }
.cm-privacy-card__meta dt { color: var(--cm-ink-3); margin: 0; }
.cm-privacy-card__meta dd { margin: 0; color: var(--cm-ink-2); }
.cm-privacy-card__data { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cm-privacy-card__data li {
  font-size: 11.5px; color: var(--cm-ink-2);
  background: var(--cm-bg-soft); border: 1px solid var(--cm-line-2);
  border-radius: 20px; padding: 3px 9px;
}
.cm-privacy-actions { margin-bottom: 30px; }
.cm-privacy-subtitle { font-size: 15px; font-weight: 640; margin: 26px 0 12px; }
.cm-privacy-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 12px; }
.cm-privacy-stats > div { border: 1px solid var(--cm-line); border-radius: 10px; padding: 14px; }
.cm-privacy-stats strong { display: block; font-size: 23px; font-weight: 720; letter-spacing: -.02em; }
.cm-privacy-stats span { display: block; font-size: 13px; color: var(--cm-ink-2); margin-top: 2px; }
.cm-privacy-stats small { display: block; font-size: 11.5px; color: var(--cm-ink-3); margin-top: 6px; }
.cm-privacy-empty { color: var(--cm-ink-3); font-size: 13.5px; }
.cm-privacy-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cm-privacy-table th, .cm-privacy-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--cm-line-2); }
.cm-privacy-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cm-ink-3); font-weight: 680; }
.cm-privacy-rights { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- modal de login ---------- */
.cm-login-modal {
  position: fixed; inset: 0; z-index: 210; background: rgba(12,16,20,.55);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.cm-login-modal.is-open { display: flex; }
.cm-login-modal__panel {
  background: #fff; border-radius: 14px; padding: 26px; width: min(420px, 100%);
  text-align: center; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.cm-login-modal__close { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--cm-bg-soft); cursor: pointer; font-size: 17px; }
.cm-login-modal__icon { font-size: 30px; color: #d3435c; }
.cm-login-modal h2 { font-size: 18px; margin: 8px 0 6px; }
.cm-login-modal p { font-size: 13.5px; color: var(--cm-ink-2); margin: 0 0 18px; }
.cm-login-modal__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cm-detail__cols { grid-template-columns: 1fr; }
  .cm-panel { position: static; }
}

@media (max-width: 860px) {
  .cm-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 16px 60px; }
  .cm-searchbar__in { padding: 12px 16px; }
  .cm-search { max-width: none; }
  .cm-side { position: static; border: 1px solid var(--cm-line); border-radius: 10px; padding: 13px 14px; }
  .cm-side__head { margin-bottom: 0; cursor: pointer; }
  .cm-side__chev { display: inline-block; }
  .cm-side .cm-fgroup, .cm-side__form { display: none; }
  .cm-side.is-open .cm-side__form { display: block; }
  .cm-side.is-open .cm-fgroup { display: block; }
  .cm-side.is-open .cm-side__head { margin-bottom: 12px; }
  .cm-side.is-open .cm-side__chev { transform: rotate(180deg); }
  .cm-ad-slot { padding: 12px 16px; }
  .cm-specs > div { grid-template-columns: 1fr; gap: 2px; }
  .cm-consent__bar { padding: 16px; gap: 14px; }
  .cm-consent__bar-actions { width: 100%; }
  .cm-consent__bar-actions .cm-btn { flex: 1; min-width: 0; }
}

@media (max-width: 520px) {
  :root { --cm-card-min: 158px; --cm-gap: 12px; }
  .cm-results__head h1 { font-size: 17px; }
  .cm-privacy-rights .cm-btn { width: 100%; }
}

/* =========================================================================
   CAPA EDITORIAL — paleta de la marca, franja de portada, cintas y señales.
   Se carga después del bloque base y lo reinterpreta sin tocarlo.
   ========================================================================= */

:root {
  --cm-bg-soft: #f3ece0;
  --cm-ad: #fbf4e6;
  --cm-ad-line: #eddfc2;
  --cm-ad-ink: #7a6130;
  --cm-card-min: 208px;
  --cm-gap: 20px;
}

/* ---------- franja de portada ---------- */
.cm-hero {
  background:
    radial-gradient(120% 150% at 88% 8%, rgba(242,163,76,.30), transparent 55%),
    linear-gradient(155deg, var(--cm-forest) 0%, #1d4c40 55%, #2a5a44 100%);
  color: var(--cm-cream);
  position: relative; overflow: hidden;
}
.cm-hero::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 78px;
  background: linear-gradient(180deg, transparent, rgba(250,247,240,.10));
  pointer-events: none;
}
.cm-hero__in { max-width: var(--cm-wrap); margin: 0 auto; padding: 38px 26px 34px; position: relative; z-index: 1; }
.cm-hero--compact .cm-hero__in { padding: 20px 26px; }
.cm-hero__kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cm-mustard); margin: 0 0 8px;
}
.cm-hero__title {
  font-family: var(--cm-serif); font-size: clamp(20px, 2.35vw, 32px); font-weight: 600;
  line-height: 1.2; letter-spacing: -.015em; margin: 0 0 10px; color: var(--cm-cream);
  max-width: none; text-align: center;
}
.cm-hero__title .cm-hero__market { color: var(--cm-mustard); text-transform: uppercase; border: 1px solid #000; padding: 0 4px; border-radius: 3px; }
.cm-hero__sub { font-size: 14.5px; color: rgba(248,242,231,.88); margin: 0 0 18px; max-width: none; line-height: 1.55; }
.cm-hero__sub strong { color: var(--cm-cream); font-weight: 650; }

.cm-hero .cm-search {
  max-width: 660px; background: rgba(255,253,249,.97);
  border-color: transparent; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(10,30,25,.24);
}
.cm-hero .cm-search:focus-within { box-shadow: 0 10px 30px rgba(10,30,25,.3), 0 0 0 3px rgba(242,163,76,.5); border-color: transparent; }
.cm-hero .cm-search input { padding: 13px 10px; color: var(--cm-ink); }
.cm-hero .cm-search__btn { background: var(--cm-orange); padding: 10px 22px; border-radius: 9px; }
.cm-hero .cm-search__btn:hover { background: var(--cm-orange-dark); }

/* La barra de búsqueda suelta ya no hace falta cuando existe la franja. */
.cm-searchbar { display: none; }

/* ---------- cintas de descubrimiento ---------- */
.cm-ribbon { margin: 0 0 34px; }
.cm-ribbon__head { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
.cm-ribbon__head h2 {
  font-family: var(--cm-serif); font-size: 21px; font-weight: 600;
  margin: 0; letter-spacing: -.015em; color: var(--cm-forest);
}
.cm-ribbon__nav { margin-left: auto; display: flex; gap: 6px; }
.cm-ribbon__btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--cm-line); background: var(--cm-surface);
  color: var(--cm-forest); cursor: pointer; font-size: 17px; line-height: 1;
  display: grid; place-items: center; transition: border-color .15s, background .15s;
}
.cm-ribbon__btn:hover { border-color: var(--cm-forest); background: var(--cm-accent-soft); }
.cm-ribbon__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 208px;
  gap: var(--cm-gap); overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding-bottom: 6px;
  scrollbar-width: none;
}
.cm-ribbon__track::-webkit-scrollbar { display: none; }
.cm-ribbon__track > * { scroll-snap-align: start; }

/* ---------- tarjeta editorial ---------- */
.cm-card {
  border-color: var(--cm-line); border-radius: var(--cm-radius);
  background: var(--cm-surface); box-shadow: var(--cm-shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cm-card:hover { border-color: #d4c9b2; box-shadow: var(--cm-shadow-lg); transform: translateY(-3px); }
.cm-card__img { background: var(--cm-bg-soft); }
.cm-card__ph { object-fit: cover; }
.cm-card__src {
  background: rgba(255,253,249,.95); border-color: rgba(23,63,54,.10);
  color: var(--cm-forest); font-weight: 660;
}
.cm-card__demo { background: var(--cm-mustard); border-color: #dd9038; color: #4a3208; }
.cm-card__fav { background: rgba(255,253,249,.95); border-color: rgba(23,63,54,.10); }
.cm-card__body { padding: 13px 15px 15px; gap: 5px; }

.cm-card__pricerow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cm-card__price {
  font-family: var(--cm-serif); font-size: 21px; font-weight: 620;
  letter-spacing: -.02em; color: var(--cm-forest);
}
.cm-card__was { font-size: 12.5px; color: var(--cm-ink-3); }
.cm-card__off {
  font-size: 11px; font-weight: 700; color: #fff; background: var(--cm-orange);
  border-radius: 5px; padding: 2px 6px; letter-spacing: .01em;
}
.cm-card__title a { color: var(--cm-ink-2); }
.cm-card__title a:hover { color: var(--cm-forest); }
.cm-card__signals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.cm-card__rating { color: #8a5a00; font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.cm-card__rating span { color: #d99000; }
.cm-panel__rating { display: flex; align-items: baseline; gap: 5px; margin: 8px 0 14px; color: var(--cm-ink-2); }
.cm-panel__rating > span { color: #d99000; font-size: 18px; }
.cm-panel__rating small { color: var(--cm-muted); margin-left: 3px; }
.cm-sig {
  font-size: 10.5px; font-weight: 640; letter-spacing: .02em;
  border-radius: 20px; padding: 2px 8px; border: 1px solid transparent;
}
.cm-sig--cond { background: var(--cm-accent-soft); color: var(--cm-forest); border-color: #d3e0d8; }
.cm-sig--ship { background: #fdefe7; color: var(--cm-orange-dark); border-color: #f3d7c6; }
.cm-card__meta {
  border-top: 1px solid var(--cm-line-2); margin-top: 9px; padding-top: 9px;
  justify-content: center; text-align: center;
}

/* ---------- resultados y filtros en clave editorial ---------- */
.cm-layout { max-width: var(--cm-wrap); padding: 30px 26px 80px; gap: 34px; }
.cm-results__head h1 {
  font-family: var(--cm-serif); font-size: 25px; font-weight: 600; letter-spacing: -.02em; color: var(--cm-forest);
}
.cm-results__count { font-family: var(--cm-sans); font-size: 14px; }
.cm-side { top: 100px; }
.cm-side__head h2 { font-family: var(--cm-serif); font-size: 17px; font-weight: 620; color: var(--cm-forest); }
.cm-fgroup__t { color: var(--cm-ink-3); }
.cm-flist a.is-on { color: var(--cm-orange-dark); }
.cm-side__count, .cm-side__clear { background: var(--cm-orange); }
.cm-side__clear { background: none; color: var(--cm-orange-dark); }
.cm-fchip.is-on { background: var(--cm-accent-soft); border-color: var(--cm-forest); color: var(--cm-forest); }
.cm-sort select, .cm-frange input { background: var(--cm-surface); border-color: var(--cm-line); }
.cm-tag { background: var(--cm-surface); border-color: var(--cm-line); }
.cm-activef__clear { color: var(--cm-orange-dark); }
.cm-demo-note { border-radius: 12px; }

.cm-btn--primary { background: var(--cm-forest); }
.cm-btn--primary:hover { background: var(--cm-forest-deep); }
.cm-panel .cm-btn--primary { background: var(--cm-orange); }
.cm-panel .cm-btn--primary:hover { background: var(--cm-orange-dark); }
.cm-btn--outline { background: var(--cm-surface); border-color: var(--cm-line); }

.cm-pagination .page-numbers { background: var(--cm-surface); border-color: var(--cm-line); }
.cm-pagination .page-numbers.current { background: var(--cm-forest); border-color: var(--cm-forest); }

/* ---------- ficha ---------- */
.cm-panel { background: var(--cm-surface); border-color: var(--cm-line); border-radius: 16px; box-shadow: var(--cm-shadow-md, 0 6px 18px rgba(23,63,54,.07)); top: 100px; }
.cm-panel h1 { font-family: var(--cm-serif); font-size: 23px; font-weight: 620; }
.cm-panel__price { font-family: var(--cm-serif); font-size: 36px; font-weight: 640; color: var(--cm-forest); }
.cm-panel__src { background: var(--cm-accent-soft); border-color: #d3e0d8; color: var(--cm-forest); }
.cm-panel__src i { background: var(--cm-forest); color: var(--cm-cream); }
.cm-gal { border-color: var(--cm-line); border-radius: 16px; background: var(--cm-bg-soft); }
.cm-gal__ph { width: 100%; height: 100%; object-fit: cover; }
.cm-dsec h2 { font-family: var(--cm-serif); font-size: 20px; font-weight: 600; color: var(--cm-forest); }
.cm-specs { border-color: var(--cm-line); border-radius: 12px; }
.cm-specs > div:nth-child(odd) { background: var(--cm-bg-soft); }
.cm-notice { border-radius: 12px; }
.cm-crumb a:hover { color: var(--cm-orange-dark); }

/* ---------- directorio ---------- */
.cm-directory { border-top-color: var(--cm-line); }
.cm-directory__head h2 { font-family: var(--cm-serif); font-size: 22px; font-weight: 600; color: var(--cm-forest); }
.cm-shop { background: var(--cm-surface); border-color: var(--cm-line); border-radius: 11px; }
.cm-shop:hover { border-color: var(--cm-forest); }
.cm-shop__logo { background: var(--cm-accent-soft); color: var(--cm-forest); font-family: var(--cm-serif); }
.cm-directory__group { border-top-color: var(--cm-line-2); }

/* ---------- publicidad ---------- */
.cm-card--ad { background: var(--cm-ad); border-color: var(--cm-ad-line); }
.cm-card__adlabel { background: var(--cm-mustard); border-color: #dd9038; color: #4a3208; }
.cm-native-ad__media-inner { background: linear-gradient(150deg, var(--cm-forest), #2f5f45 55%, var(--cm-moss)); }
.cm-native-ad__media--blue .cm-native-ad__media-inner { background: linear-gradient(150deg, #1d3f5c, #2f6f8f 55%, #6fb0c4); }
.cm-card--ad .cm-product-card__cta { color: var(--cm-orange-dark); }

/* ---------- consentimiento ---------- */
.cm-consent__bar { background: var(--cm-surface); border-color: var(--cm-line); border-radius: 18px; }
.cm-consent__bar h2 { font-family: var(--cm-serif); font-size: 19px; font-weight: 620; color: var(--cm-forest); }
.cm-consent__panel { background: var(--cm-surface); border-radius: 18px; }
.cm-consent__panel-head h2 { font-family: var(--cm-serif); color: var(--cm-forest); }
.cm-consent__panel-foot { background: var(--cm-bg-soft); }
.cm-consent-reopen { background: var(--cm-surface); border-color: var(--cm-line); }
.cm-switch input:checked + .cm-switch__track { background: var(--cm-forest); }
.cm-privacy-card { background: var(--cm-surface); border-color: var(--cm-line); border-radius: 14px; }
.cm-privacy-card.is-on { border-color: #cfdbd2; background: #f6faf7; }
.cm-privacy-card h3, .cm-privacy-subtitle { font-family: var(--cm-serif); color: var(--cm-forest); }
.cm-privacy-stats > div { background: var(--cm-surface); border-color: var(--cm-line); border-radius: 12px; }
.cm-privacy-stats strong { font-family: var(--cm-serif); color: var(--cm-forest); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .cm-layout { padding: 20px 16px 60px; gap: 20px; }
  .cm-hero__in { padding: 30px 16px 26px; }
  .cm-hero--compact .cm-hero__in { padding: 16px; }
  .cm-hero__title { font-size: 21px; }
  .cm-hero__sub { font-size: 14.5px; margin-bottom: 18px; }
  :root { --cm-card-min: 168px; }
  .cm-ribbon__track { grid-auto-columns: 172px; }
}

@media (max-width: 520px) {
  :root { --cm-gap: 12px; }
  /* Dos columnas fijas en movil, como Wallapop: con auto-fill, un ancho minimo
     en px puede no caber por unos pocos pixeles y colapsar a una sola. */
  .cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-ribbon__track { grid-auto-columns: 44%; }
  /* La paginacion de arriba empuja los productos fuera de la primera
     pantalla. En movil sobra: queda la de abajo, que es donde se llega. */
  .cm-pagination--top { display: none; }
  /* tarjeta: menos aire, mas foto. La imagen es lo que vende. */
  .cm-card__body { padding: 8px 10px 10px; gap: 3px; }
  .cm-card__signals { margin-top: 0; }
  .cm-card__price { font-size: 18px; }
  .cm-card__title { font-size: 12.5px; line-height: 1.3; }
  .cm-card__src { font-size: 10px; padding: 2px 7px; }
  .cm-ribbon__head h2 { font-size: 18px; }
  .cm-ribbon__nav { display: none; }
}

/* ---------- precio no publicado y datos extra de ficha ---------- */
.cm-card__price--ask,
.cm-panel__price--ask {
  color: var(--cm-ink-3);
  font-family: var(--cm-sans);
  font-weight: 600;
  letter-spacing: 0;
}
.cm-card__price--ask { font-size: 14px; }
.cm-panel__price--ask { font-size: 22px; }
.cm-panel__range { font-size: 12.5px; color: var(--cm-ink-3); margin: -14px 0 18px; }

.cm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cm-tags span {
  font-size: 11.5px; color: var(--cm-ink-2);
  background: var(--cm-bg-soft); border: 1px solid var(--cm-line-2);
  border-radius: 20px; padding: 3px 10px;
}

/* ---------- estado de carga ---------- */
.cm-results { position: relative; }
.cm-loading {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(250, 247, 240, .72);
  backdrop-filter: blur(1.5px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 120px;
  opacity: 0; transition: opacity .18s;
}
.cm-loading.is-on { opacity: 1; }
.cm-loading__box {
  display: flex; align-items: center; gap: 12px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-line);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: var(--cm-shadow-lg);
  position: sticky; top: 140px;
}
.cm-loading__text { font-size: 14px; font-weight: 550; color: var(--cm-ink-2); }
.cm-spinner {
  width: 20px; height: 20px; flex: 0 0 auto;
  border: 2.5px solid var(--cm-line);
  border-top-color: var(--cm-orange);
  border-radius: 50%;
  animation: cm-spin .7s linear infinite;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cm-spinner { animation-duration: 2s; }
}

/* ---------- aviso de novedades ---------- */
.cm-fresh-note {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  border: 1px solid var(--cm-line); background: var(--cm-surface);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px; color: var(--cm-ink-2); margin: 0 0 16px;
}
.cm-fresh-note a { color: var(--cm-orange-dark); font-weight: 600; }

/* =========================================================================
   COMPARADOR Y ASISTENTE
   Estilos nuevos para el markup que pinta Camping_Market_Intelligence.
   Usan los tokens del tema, no definen paleta propia.
   ========================================================================= */

.cm-compare-modal[hidden],
.cm-assistant-modal[hidden],
.cm-offers-modal[hidden] { display: none; }

.cm-compare-modal,
.cm-assistant-modal,
.cm-offers-modal {
  position: fixed; inset: 0; z-index: 240;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cm-compare-modal__backdrop,
.cm-assistant-modal__backdrop,
.cm-offers-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 20, 17, .58); backdrop-filter: blur(3px);
}
.cm-compare-modal__panel,
.cm-assistant-modal__panel,
.cm-offers-modal__panel {
  position: relative; z-index: 1;
  width: min(940px, 100%); max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--cm-surface); border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
  padding: 26px 28px 24px;
}
.cm-offers-modal__panel { width: min(560px, 100%); }
.cm-compare-modal__close,
.cm-assistant-modal__close,
.cm-offers-modal__close {
  position: absolute; right: 14px; top: 14px;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--cm-line); background: var(--cm-surface);
  color: var(--cm-ink-2); cursor: pointer; font-size: 19px; line-height: 1;
}
.cm-compare-modal__close:hover,
.cm-assistant-modal__close:hover,
.cm-offers-modal__close:hover { background: var(--cm-bg-soft); color: var(--cm-ink); }

.cm-compare-modal__head span,
.cm-assistant-modal__panel > header span,
.cm-offers-modal__panel > header span {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cm-orange-dark);
}
.cm-compare-modal__head h2,
.cm-offers-modal__panel h2 {
  font-family: var(--cm-serif); font-size: 25px; font-weight: 600;
  color: var(--cm-forest); margin: 6px 0 6px;
}
.cm-compare-modal__head p,
.cm-offers-modal__panel header p { color: var(--cm-ink-2); font-size: 14px; margin: 0 0 20px; max-width: 68ch; }

/* ---------- modal de ofertas ---------- */
.cm-offers-modal__list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cm-offers-modal__row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--cm-line); border-radius: 12px; padding: 13px 14px;
}
.cm-offers-modal__row.is-best { border-color: var(--cm-forest); background: #f6faf7; }
.cm-offers-modal__store { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cm-offers-modal__store > i {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cm-forest); color: #fff; font-style: normal; font-weight: 700; font-size: 15px;
}
.cm-offers-modal__store > div { display: flex; flex-direction: column; min-width: 0; }
.cm-offers-modal__store strong { font-size: 14px; color: var(--cm-ink); }
.cm-offers-modal__store small { font-size: 12px; color: var(--cm-ink-3); }
.cm-offers-modal__price { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.cm-offers-modal__price strong { font-size: 16px; color: var(--cm-forest); white-space: nowrap; }
.cm-offers-modal__price small { font-size: 11.5px; color: var(--cm-ink-3); }
.cm-offers-modal__best {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cm-forest); border: 1px solid var(--cm-forest); border-radius: 999px; padding: 3px 9px;
}
.cm-offers-modal__row > a {
  margin-left: auto; font-size: 13.5px; font-weight: 680; color: var(--cm-forest);
  text-decoration: none; white-space: nowrap;
}
.cm-offers-modal__row > a:hover { text-decoration: underline; }

.cm-compare-search span {
  display: block; font-size: 12px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cm-ink-3); margin-bottom: 7px;
}
.cm-compare-search > div {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--cm-line); border-radius: 10px;
  padding: 0 12px; background: var(--cm-bg-soft);
}
.cm-compare-search > div:focus-within {
  border-color: var(--cm-forest); background: var(--cm-surface);
  box-shadow: 0 0 0 3px var(--cm-accent-soft);
}
.cm-compare-search svg { width: 17px; height: 17px; color: var(--cm-ink-3); flex: 0 0 auto; }
.cm-compare-search input { flex: 1; border: 0; background: transparent; padding: 12px 0; outline: none; font-size: 14.5px; }

.cm-compare-suggestions {
  margin-top: 8px; border: 1px solid var(--cm-line); border-radius: 10px;
  background: var(--cm-surface); overflow: hidden; max-height: 300px; overflow-y: auto;
}
.cm-compare-suggestions[hidden] { display: none; }
.cm-compare-suggestions button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border: 0; border-bottom: 1px solid var(--cm-line-2);
  background: transparent; cursor: pointer; text-align: left;
}
.cm-compare-suggestions button:last-child { border-bottom: 0; }
.cm-compare-suggestions button:hover { background: var(--cm-accent-soft); }
.cm-compare-suggestions img { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; flex: 0 0 auto; }
.cm-compare-suggestions b { display: block; font-size: 13.5px; font-weight: 580; }
.cm-compare-suggestions small { font-size: 12px; color: var(--cm-ink-3); }
.cm-compare-suggestions__empty { padding: 14px; margin: 0; font-size: 13.5px; color: var(--cm-ink-3); }

.cm-compare-selection {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; margin: 18px 0 0;
}
.cm-compare-selection__empty {
  grid-column: 1 / -1; text-align: center; padding: 24px;
  border: 1px dashed var(--cm-line); border-radius: 12px;
}
.cm-compare-selection__empty b { display: block; font-size: 14px; color: var(--cm-ink); }
.cm-compare-selection__empty span { font-size: 13px; color: var(--cm-ink-3); }

.cm-compare-chip {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--cm-line); border-radius: 11px; padding: 8px 9px;
  background: var(--cm-surface);
}
.cm-compare-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; flex: 0 0 auto; }
.cm-compare-chip span { min-width: 0; flex: 1; }
.cm-compare-chip b { display: block; font-size: 13px; font-weight: 570; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-compare-chip small { font-size: 11.5px; color: var(--cm-ink-3); }
.cm-compare-chip button {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--cm-line); background: var(--cm-surface);
  color: var(--cm-ink-3); cursor: pointer; font-size: 14px; line-height: 1;
}
.cm-compare-chip button:hover { color: var(--cm-danger); border-color: var(--cm-danger); }

.cm-compare-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cm-line-2);
}
.cm-compare-actions span { font-size: 13px; color: var(--cm-ink-3); }
.cm-compare-actions b { color: var(--cm-forest); font-size: 15px; }
.cm-compare-actions button {
  border: 0; border-radius: 9px; padding: 11px 20px;
  background: var(--cm-orange); color: #fff; font-size: 14.5px; font-weight: 640; cursor: pointer;
}
.cm-compare-actions button:hover:not(:disabled) { background: var(--cm-orange-dark); }
.cm-compare-actions button:disabled { background: var(--cm-line); color: var(--cm-ink-3); cursor: not-allowed; }

.cm-compare-output[hidden] { display: none; }
.cm-compare-output__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cm-compare-output__head button {
  border: 1px solid var(--cm-line); background: var(--cm-surface); border-radius: 9px;
  padding: 8px 14px; font-size: 13.5px; cursor: pointer; color: var(--cm-ink-2);
}
.cm-compare-output__head button:hover { border-color: var(--cm-forest); color: var(--cm-forest); }
.cm-compare-output__head span { font-size: 13px; color: var(--cm-ink-3); margin-left: auto; }

.cm-compare-table-wrap { overflow-x: auto; }
.cm-compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cm-compare-table th, .cm-compare-table td {
  padding: 11px 13px; border-bottom: 1px solid var(--cm-line-2);
  text-align: left; vertical-align: top;
}
.cm-compare-table thead th { border-bottom: 2px solid var(--cm-line); min-width: 170px; }
.cm-compare-table thead img { width: 100%; max-width: 130px; aspect-ratio: 1; object-fit: cover; border-radius: 9px; margin-bottom: 8px; }
.cm-compare-table thead a { font-weight: 600; color: var(--cm-ink); display: block; line-height: 1.35; }
.cm-compare-table thead a:hover { color: var(--cm-orange-dark); }
/* La columna de conceptos (Precio, Tienda, Categoria...) no necesita 150 px:
   son palabras cortas y ese ancho se lo quitaba a los productos. */
.cm-compare-table tbody th {
  color: var(--cm-ink-3); font-weight: 550; width: 96px;
  background: var(--cm-bg-soft); padding-right: 8px; hyphens: auto;
}
.cm-compare-table td a { color: var(--cm-orange-dark); font-weight: 600; }
.cm-compare-best {
  display: inline-block; margin-top: 6px; font-style: normal;
  background: var(--cm-accent-soft); color: var(--cm-forest);
  border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 680;
}

/* Los dos modales se imprimen dentro del pie de pagina, que es verde oscuro y
   lleva el texto en crema. Sin fijar el color aqui, todo lo de dentro hereda
   ese crema: el buscador salia blanco sobre blanco y no se veia lo que escribias. */
.cm-compare-modal,
.cm-assistant-modal,
.cm-offers-modal { color: var(--cm-ink); }
.cm-compare-modal input,
.cm-compare-modal textarea,
.cm-compare-modal select,
.cm-assistant-modal input,
.cm-assistant-modal textarea,
.cm-assistant-modal select { color: var(--cm-ink); }
.cm-compare-modal input::placeholder,
.cm-assistant-modal input::placeholder { color: var(--cm-ink-3); opacity: 1; }

@media (max-width: 700px) {
  .cm-compare-modal__panel, .cm-assistant-modal__panel, .cm-offers-modal__panel { padding: 20px 16px; border-radius: 12px; }
  .cm-compare-modal__head h2 { font-size: 20px; }
  .cm-compare-table tbody th { width: 84px; }
}

/* En movil el panel ocupa el ancho entero y se pega abajo, como una hoja: asi
   ni se sale de la pantalla ni deja el boton de comparar fuera de alcance. */
@media (max-width: 640px) {
  .cm-compare-modal,
  .cm-assistant-modal,
  .cm-offers-modal { padding: 0; align-items: flex-end; }
  .cm-compare-modal__panel,
  .cm-assistant-modal__panel,
  .cm-offers-modal__panel {
    width: 100%; max-width: 100%; max-height: 92vh;
    border-radius: 16px 16px 0 0; padding: 20px 14px 18px;
    overflow-x: hidden;
  }
  .cm-compare-modal__head { padding-right: 40px; }
  .cm-compare-modal__head p { font-size: 13px; }
  .cm-compare-actions { flex-wrap: wrap; gap: 10px; }
  .cm-compare-actions button { width: 100%; padding: 13px 16px; }
  .cm-compare-output__head { flex-wrap: wrap; }
  .cm-compare-output__head span { margin-left: 0; }
  .cm-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cm-compare-table th, .cm-compare-table td { padding: 9px 10px; font-size: 12.5px; }
  .cm-compare-table thead th { min-width: 132px; }
  .cm-compare-table thead img { max-width: 96px; }
  .cm-compare-table tbody th { width: 70px; font-size: 12px; }
  .cm-compare-chip { max-width: 100%; }
  .cm-compare-chip span { min-width: 0; }
}

/* ---------- asistente de compra (contenido del modal) ---------- */
.cm-finder__copy > div span {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cm-orange-dark);
}
.cm-finder__copy > div b {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--cm-ink-3); margin-top: 2px;
}
.cm-finder__copy h2 {
  font-family: var(--cm-serif); font-size: 24px; font-weight: 600;
  color: var(--cm-forest); margin: 10px 0 6px; line-height: 1.2;
}
.cm-finder__copy p { color: var(--cm-ink-2); font-size: 14px; margin: 0 0 20px; max-width: 66ch; }

.cm-finder__form { display: grid; gap: 20px; }

.cm-finder__profiles { border: 0; padding: 0; margin: 0; }
.cm-finder__profiles legend,
.cm-finder__choices label > span:first-child {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 680; color: var(--cm-ink-2);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; padding: 0;
}
.cm-finder__profiles legend i,
.cm-finder__choices label > span:first-child i {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  background: var(--cm-forest); color: var(--cm-cream);
  display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 700;
}

.cm-finder__profiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.cm-finder__profiles legend { grid-column: 1 / -1; }
.cm-finder__profiles label { cursor: pointer; }
.cm-finder__profiles input { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-finder__profiles label > span {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid var(--cm-line); border-radius: 12px;
  padding: 13px 14px; background: var(--cm-surface);
  transition: border-color .15s, background .15s, box-shadow .15s; height: 100%;
}
.cm-finder__profiles label > span i {
  font-style: normal; font-weight: 800; font-size: 13px;
  color: var(--cm-forest); background: var(--cm-accent-soft);
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; margin-bottom: 6px;
}
.cm-finder__profiles label > span b { font-size: 14.5px; font-weight: 640; color: var(--cm-ink); }
.cm-finder__profiles label > span small { font-size: 12px; color: var(--cm-ink-3); }
.cm-finder__profiles label:hover > span { border-color: var(--cm-ink-3); }
.cm-finder__profiles input:checked + span {
  border-color: var(--cm-forest); background: var(--cm-accent-soft);
  box-shadow: 0 0 0 2px var(--cm-accent-soft);
}
.cm-finder__profiles input:focus-visible + span { outline: 2px solid var(--cm-orange); outline-offset: 2px; }

.cm-finder__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cm-finder__choices label { display: block; }
.cm-finder__choices select,
.cm-finder__choices input[type="number"],
.cm-finder__choices input[type="text"] {
  width: 100%; border: 1px solid var(--cm-line); border-radius: 10px;
  padding: 11px 12px; font-size: 14px; background: var(--cm-surface);
  color: var(--cm-ink); outline: none;
}
.cm-finder__choices select:focus,
.cm-finder__choices input:focus {
  border-color: var(--cm-forest); box-shadow: 0 0 0 3px var(--cm-accent-soft);
}

.cm-finder__form button[type="submit"],
.cm-finder__actions button {
  border: 0; border-radius: 10px; padding: 13px 24px;
  background: var(--cm-orange); color: #fff;
  font-size: 15px; font-weight: 640; cursor: pointer;
}
.cm-finder__form button[type="submit"]:hover,
.cm-finder__actions button:hover { background: var(--cm-orange-dark); }

/* Resultados ya añadidos en el buscador del comparador */
.cm-compare-suggestions button.is-added { background: var(--cm-accent-soft); opacity: .75; }
.cm-compare-suggestions button:disabled { cursor: not-allowed; }
.cm-compare-suggestions button.is-added b::after {
  content: ' · añadido'; color: var(--cm-forest); font-weight: 700; font-size: 11.5px;
}

@media (max-width: 700px) {
  .cm-finder__copy h2 { font-size: 20px; }
  .cm-finder__profiles { grid-template-columns: repeat(2, 1fr); }
  .cm-finder__choices { grid-template-columns: 1fr; }
}

/* ---------- niveles del arbol de categorias ---------- */
/* Las familias en negrita: son el punto de entrada del filtro. */
.cm-flist--n0 > li > .cm-flist__row > a,
.cm-flist--n0 > li > a { font-size: 14px; font-weight: 680; color: var(--cm-forest); }
.cm-flist--n0 > li > .cm-flist__row > a em { font-weight: 500; }

.cm-flist--n1 { margin: 2px 0 8px 10px; padding-left: 10px; border-left: 1px solid var(--cm-line-2); }
.cm-flist--n1 > li > .cm-flist__row > a { font-size: 13px; font-weight: 600; padding: 4px 0; color: var(--cm-ink-2); }
.cm-flist--n1 > li > .cm-flist__row > a:hover { color: var(--cm-forest); }

/* La sangria se acumula nivel a nivel: con cuatro niveles, el nombre de la
   marca y su contador se quedaban sin sitio. Los niveles hondos van mas justos. */
.cm-flist--n2 { margin: 2px 0 6px 6px; padding-left: 7px; border-left: 1px dotted var(--cm-line); }
.cm-flist--n2 > li > .cm-flist__row > a,
.cm-flist--n2 > li > a { font-size: 12.5px; font-weight: 450; padding: 3px 0; color: var(--cm-ink-3); }
.cm-flist--n2 > li > .cm-flist__row > a:hover,
.cm-flist--n2 > li > a:hover { color: var(--cm-forest); }
.cm-flist--n2 > li > .cm-flist__row > a.is-on,
.cm-flist--n2 > li > a.is-on { color: var(--cm-orange-dark); font-weight: 650; }

.cm-flist--n3 { margin: 2px 0 6px 5px; padding-left: 6px; border-left: 1px dotted var(--cm-line); }
.cm-flist--n3 > li > .cm-flist__row > a,
.cm-flist--n3 > li > a { font-size: 12.5px; font-weight: 450; padding: 3px 0; color: var(--cm-ink-3); }
.cm-flist--n3 > li > a:hover { color: var(--cm-forest); }
.cm-flist--n3 > li > a.is-on { color: var(--cm-orange-dark); font-weight: 650; }

/* El arbol entero no cabe en pantalla si se despliega: se le pone tope y
   scroll propio, para que bajar hasta el resto de filtros no sea eterno. */
.cm-flist--n0 {
  max-height: min(58vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--cm-line) transparent;
}
.cm-flist--n0::-webkit-scrollbar { width: 8px; }
.cm-flist--n0::-webkit-scrollbar-track { background: transparent; }
.cm-flist--n0::-webkit-scrollbar-thumb { background: var(--cm-line); border-radius: 4px; }
.cm-flist--n0::-webkit-scrollbar-thumb:hover { background: var(--cm-ink-3); }
/* Las de dentro no llevan tope: manda la de arriba. */
.cm-flist--n1, .cm-flist--n2 { max-height: none; overflow: visible; }

/* ---------- favoritos de la cuenta: filas, no fotos gigantes ---------- */
.cm-favlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-fav {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  border: 1px solid var(--cm-line); border-radius: 14px;
  background: var(--cm-surface); padding: 10px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.cm-fav:hover { border-color: #d4c9b2; box-shadow: var(--cm-shadow-md, 0 6px 18px rgba(23,63,54,.07)); }
.cm-fav__thumb {
  flex: 0 0 58px; width: 58px; height: 58px; border-radius: 10px;
  overflow: hidden; background: var(--cm-bg-soft); display: block;
}
.cm-fav__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cm-fav__main { flex: 1; min-width: 0; }
.cm-fav__title {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--cm-ink);
  line-height: 1.35; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cm-fav__title:hover { color: var(--cm-forest); }
.cm-fav__meta { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--cm-ink-3); }
.cm-fav__meta span + span::before { content: '·'; margin-right: 10px; color: var(--cm-line); }
.cm-fav__stock { color: #a83a2c; font-weight: 600; }
.cm-fav__price {
  flex: 0 0 auto; font-family: var(--cm-serif); font-size: 19px; font-weight: 640;
  color: var(--cm-forest); white-space: nowrap; letter-spacing: -.02em;
}
.cm-fav__price--ask { font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--cm-ink-3); }
.cm-fav__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.cm-fav__go {
  padding: 8px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 620;
  border: 1px solid var(--cm-line); color: var(--cm-forest); white-space: nowrap;
}
.cm-fav__go:hover { background: var(--cm-bg-soft); border-color: var(--cm-ink-3); }
.cm-fav__quitar { position: static; width: 34px; height: 34px; flex: 0 0 34px; }

@media (max-width: 700px) {
  .cm-fav { flex-wrap: wrap; gap: 10px 12px; padding: 12px; }
  .cm-fav__main { flex: 1 1 140px; }
  .cm-fav__price { order: 3; margin-left: 72px; }
  .cm-fav__actions { order: 4; margin-left: auto; }
}
@media (max-width: 420px) {
  .cm-fav__go { padding: 8px 11px; font-size: 13px; }
  .cm-fav__price { margin-left: 0; }
}

/* =========================================================================
   ACCESO Y CUENTA
   Estilos para el markup de render_account: sin esto la pagina sale en crudo.
   ========================================================================= */

.cm-account { max-width: var(--cm-wrap); margin: 0 auto; padding: 0 26px 70px; }

/* Barra superior propia de la zona de cuenta */
.cm-topbar {
  max-width: var(--cm-wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 18px 26px 0; flex-wrap: wrap;
}
.cm-topbar__brand { display: flex; align-items: center; gap: 10px; line-height: 1.2; }
.cm-topbar__brand img { width: 34px; height: 34px; flex: 0 0 34px; display: block; }
.cm-topbar__brand > span { display: flex; flex-direction: column; }
.cm-topbar__brand strong { font-family: var(--cm-serif); font-size: 18px; font-weight: 620; color: var(--cm-forest); }
.cm-topbar__brand small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cm-ink-3); }
.cm-topbar__links { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.cm-topbar__links a {
  padding: 7px 12px; border-radius: 8px; font-size: 13.5px;
  font-weight: 550; color: var(--cm-ink-2);
}
.cm-topbar__links a:hover { background: var(--cm-bg-soft); color: var(--cm-forest); }
.cm-topbar__account {
  background: var(--cm-forest); color: var(--cm-cream) !important;
}
.cm-topbar__account:hover { background: var(--cm-forest-deep); }

.cm-kicker {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cm-orange-dark); margin-bottom: 8px;
}

/* Dos columnas: relato a la izquierda, formulario a la derecha */
/* Aqui el formulario manda: va primero y a la izquierda, que es donde cae la
   mirada. El texto de bienvenida acompana, no estorba. */
.cm-auth-shell {
  display: grid; grid-template-columns: 430px minmax(0, 1fr);
  gap: 44px; align-items: start; padding: 34px 0 0;
}
.cm-auth-card { order: 1; }
.cm-auth-story { order: 2; }

.cm-auth-story h1,
.cm-auth-heading h2 {
  font-family: var(--cm-serif); font-weight: 600; color: var(--cm-forest);
  line-height: 1.15; margin: 0 0 14px;
}
.cm-auth-story h1 { font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.02em; }
.cm-auth-story > p { font-size: 16px; color: var(--cm-ink-2); line-height: 1.6; margin: 0 0 24px; max-width: 56ch; }

/* Eran tres cajas a todo lo ancho que empujaban el formulario. Ahora son
   etiquetas del ancho de su texto, que es lo que son: un apunte, no una lista. */
.cm-auth-perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.cm-auth-perks > * {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  border: 1px solid var(--cm-line); border-radius: 999px;
  padding: 8px 13px; background: var(--cm-surface);
  font-size: 13px; color: var(--cm-ink-2); white-space: nowrap;
}

.cm-auth-skip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--cm-orange-dark);
}
.cm-auth-skip:hover { color: var(--cm-orange); }

/* Tarjeta del formulario */
.cm-auth-card {
  border: 1px solid var(--cm-line); border-radius: 18px;
  background: var(--cm-surface); padding: 26px 26px 22px;
  box-shadow: var(--cm-shadow-md, 0 6px 18px rgba(23,63,54,.07));
}
.cm-auth-card__brand {
  display: flex; align-items: center; gap: 12px; line-height: 1.25;
  padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--cm-line-2);
}
.cm-auth-card__brand img { width: 40px; height: 40px; flex: 0 0 40px; display: block; }
.cm-auth-card__brand > span { display: flex; flex-direction: column; }
.cm-auth-card__brand strong { font-family: var(--cm-serif); font-size: 17px; font-weight: 620; color: var(--cm-forest); }
.cm-auth-card__brand small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cm-ink-3); }

.cm-auth-tabs { display: flex; gap: 6px; margin: 16px 0 20px; background: var(--cm-bg-soft); padding: 4px; border-radius: 11px; }
.cm-auth-tabs a {
  flex: 1; text-align: center; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--cm-ink-2);
}
.cm-auth-tabs a:hover { color: var(--cm-forest); }
.cm-auth-tabs a.is-active,
.cm-auth-tabs a[aria-current] { background: var(--cm-surface); color: var(--cm-forest); box-shadow: var(--cm-shadow, 0 1px 2px rgba(23,63,54,.05)); }

.cm-auth-heading h2 { font-size: 21px; margin: 0 0 4px; }
.cm-auth-heading p { font-size: 13.5px; color: var(--cm-ink-3); margin: 0 0 18px; }

.cm-auth-form { display: grid; gap: 14px; }
.cm-auth-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cm-ink-2); }
.cm-auth-form input[type="text"],
.cm-auth-form input[type="email"],
.cm-auth-form input[type="password"] {
  width: 100%; border: 1px solid var(--cm-line); border-radius: 10px;
  padding: 12px 13px; font-size: 14.5px; background: var(--cm-surface);
  color: var(--cm-ink); outline: none; font-weight: 400;
}
.cm-auth-form input:focus { border-color: var(--cm-forest); box-shadow: 0 0 0 3px var(--cm-accent-soft); }
.cm-auth-form input::placeholder { color: var(--cm-ink-3); }
.cm-auth-form button[type="submit"] { width: 100%; margin-top: 4px; }

.cm-auth-form__options {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; font-size: 13px;
}
.cm-auth-form__options a { color: var(--cm-orange-dark); font-weight: 550; }

.cm-auth-check {
  display: flex !important; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--cm-ink-2); cursor: pointer;
}
.cm-auth-check input { width: 16px; height: 16px; accent-color: var(--cm-forest); margin: 0; }

.cm-auth-notice {
  padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; margin: 0 0 4px;
}
.cm-auth-notice--error {
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
}
.cm-auth-notice--success {
  background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;
}

.cm-auth-security {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--cm-line-2);
  font-size: 12px; line-height: 1.55; color: var(--cm-ink-3);
}

/* Zona privada: las reglas viven en el bloque PANEL DE CUENTA. */

.cm-finder__stock {
  display: flex; align-items: flex-start; gap: 10px; align-self: end;
  padding: 12px 14px; border: 1px solid var(--cm-line); border-radius: 12px;
  background: var(--cm-surface); cursor: pointer;
}
.cm-finder__stock:hover { border-color: var(--cm-ink-3); }
.cm-finder__stock input { flex: 0 0 16px; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--cm-forest); }
.cm-finder__stock > span { display: flex; flex-direction: column; gap: 2px; }
.cm-finder__stock b { font-size: 14px; font-weight: 640; color: var(--cm-ink); }
.cm-finder__stock small { font-size: 12px; color: var(--cm-ink-3); line-height: 1.35; }

@media (max-width: 900px) {
  .cm-auth-shell { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 860px) {
  .cm-account { padding: 0 16px 60px; }
  .cm-topbar { padding: 14px 16px 0; gap: 12px; }
  .cm-topbar__links { margin-left: 0; width: 100%; }
  .cm-auth-card { padding: 20px 18px 18px; border-radius: 14px; }
  .cm-auth-story h1 { font-size: 26px; }
}

/* ---------- imagen sustituida por la ilustracion de categoria ---------- */
.cm-img-fallback { object-fit: cover !important; background: var(--cm-bg-soft); }

/* ---------- tarjeta: altura estable con titulos de una o dos lineas ----------
   Sin reservar el alto de dos lineas, las tarjetas de titulo corto subian la
   fila del vendedor y la rejilla quedaba descuadrada. */
.cm-card__title {
  min-height: calc(1.35em * 2);
}
.cm-card__title a { min-height: calc(1.35em * 2); }
.cm-card__body { min-height: 0; }
.cm-card__meta {
  min-height: 34px;
  align-items: center;
}

/* =========================================================================
   PANEL DE CUENTA (con sesion iniciada)
   ========================================================================= */

/* --- estructura --- */
.cm-account-dashboard {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 24px; align-items: start; padding-top: 26px;
}
.cm-account-app {
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: 28px; align-items: start; padding: 0 0 70px;
}
.cm-account-content { min-width: 0; display: grid; gap: 34px; }

/* --- banner de bienvenida --- */
.cm-account-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border-radius: 20px; margin: 0; padding: 26px 28px;
  color: var(--cm-cream); position: relative; overflow: hidden;
  background:
    radial-gradient(120% 160% at 92% 0%, rgba(242,163,76,.32), transparent 58%),
    linear-gradient(140deg, var(--cm-forest) 0%, #1d4c40 60%, #2a5a44 100%);
}
.cm-account-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cm-avatar {
  width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(250,247,240,.14); color: var(--cm-cream);
  border: 1px solid rgba(250,247,240,.32);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--cm-serif); font-size: 26px; font-weight: 640;
}
.cm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cm-account-hero .cm-kicker { color: var(--cm-mustard); }
.cm-account-identity h1, .cm-account-hero h1 {
  font-family: var(--cm-serif); font-size: 28px; font-weight: 600;
  color: var(--cm-cream); margin: 2px 0 3px; line-height: 1.15;
}
.cm-account-identity p { margin: 0; font-size: 13.5px; color: rgba(248,242,231,.78); word-break: break-word; }
.cm-account-hero__actions { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.cm-account-hero__actions a {
  padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 620;
  border: 1px solid rgba(250,247,240,.34); color: var(--cm-cream);
}
.cm-account-hero__actions a:first-child { background: var(--cm-cream); color: var(--cm-forest); border-color: transparent; }
.cm-account-hero__actions a:first-child:hover { background: #fff; }
.cm-account-logout { background: transparent; }
.cm-account-logout:hover { background: rgba(250,247,240,.14); border-color: rgba(250,247,240,.6); color: var(--cm-cream); }

/* --- menu lateral --- */
.cm-account-nav {
  position: sticky; top: 96px; display: grid; gap: 4px; align-content: start;
  border: 1px solid var(--cm-line); border-radius: 16px;
  background: var(--cm-surface); padding: 14px 12px;
}
.cm-account-nav > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cm-ink-3); padding: 2px 10px 8px;
}
.cm-account-nav nav { display: grid; gap: 2px; }
.cm-account-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 10px;
  font-size: 14px; font-weight: 550; color: var(--cm-ink-2);
}
.cm-account-nav a b {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12px; font-weight: 400;
  background: var(--cm-bg-soft); color: var(--cm-ink-3);
}
.cm-account-nav a:hover { background: var(--cm-bg-soft); color: var(--cm-forest); }
.cm-account-nav a.is-active, .cm-account-nav a[aria-current] {
  background: var(--cm-accent-soft); color: var(--cm-forest); font-weight: 650;
}
.cm-account-nav a.is-active b { background: var(--cm-forest); color: var(--cm-cream); }
.cm-account-nav a small {
  margin-left: auto; font-size: 12px; color: var(--cm-ink-3);
  background: var(--cm-bg-soft); border-radius: 999px; padding: 1px 8px;
}
.cm-account-nav > div:last-child {
  margin-top: 14px; padding: 13px 11px 4px; border-top: 1px solid var(--cm-line-2);
}
.cm-account-nav > div:last-child strong {
  display: block; font-family: var(--cm-serif); font-size: 14px;
  font-weight: 620; color: var(--cm-forest); margin-bottom: 4px;
}
.cm-account-nav > div:last-child p { margin: 0; font-size: 12.5px; color: var(--cm-ink-3); line-height: 1.5; }

/* --- contadores --- */
.cm-account-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 0;
}
.cm-account-stats > * {
  border: 1px solid var(--cm-line); border-radius: 14px;
  background: var(--cm-surface); padding: 16px 16px 14px; min-width: 0;
}
.cm-account-stats > * > span:first-child {
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px;
  border-radius: 9px; background: var(--cm-bg-soft); font-size: 14px; line-height: 1;
}
.cm-account-stats strong, .cm-account-stats b {
  display: block; font-family: var(--cm-serif); font-size: 27px;
  font-weight: 640; color: var(--cm-forest); line-height: 1;
}
.cm-account-stats small { display: block; font-size: 12.5px; color: var(--cm-ink-3); margin-top: 6px; }

/* --- secciones --- */
.cm-account-section { margin: 0; scroll-margin-top: 96px; }
.cm-account-section__heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--cm-line-2);
}
.cm-account-section__heading h2 {
  font-family: var(--cm-serif); font-size: 23px; font-weight: 600;
  color: var(--cm-forest); margin: 0;
}
.cm-account-section__heading > a { font-size: 13.5px; font-weight: 620; color: var(--cm-orange-dark); }

.cm-account-summary {
  border: 1px solid var(--cm-line); border-radius: 16px;
  background: var(--cm-surface); padding: 6px 20px; margin: 0;
  font-size: 14px; color: var(--cm-ink-2); line-height: 1.6;
}
.cm-account-summary article {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 14px 0;
  border-bottom: 1px solid var(--cm-line-2);
}
.cm-account-summary article:last-child { border-bottom: 0; }
.cm-account-summary article > span { color: var(--cm-ink-3); font-size: 13px; }
.cm-account-summary article > strong { color: var(--cm-ink); font-weight: 640; margin-left: auto; text-align: right; }
.cm-account-summary article > a { color: var(--cm-orange-dark); font-weight: 620; font-size: 13px; flex: 0 0 100%; }
.cm-account-summary article > em, .cm-account-summary article > small { color: var(--cm-ink-3); font-size: 12.5px; flex: 0 0 100%; font-style: normal; }
.cm-account-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; justify-content: flex-end; }
.cm-account-chips b {
  font-size: 12.5px; font-weight: 600; color: var(--cm-forest);
  background: var(--cm-accent-soft); border-radius: 999px; padding: 3px 10px;
}

.cm-favorite-count {
  background: var(--cm-accent-soft); color: var(--cm-forest);
  border-radius: 20px; padding: 4px 12px; font-size: 13px; font-weight: 680;
}
.cm-account-grid { margin-top: 4px; }
.cm-account-empty {
  text-align: center; padding: 44px 20px;
  border: 1px dashed var(--cm-line); border-radius: 16px; background: var(--cm-surface);
}
.cm-account-empty > span { font-size: 34px; color: #d3435c; }
.cm-account-empty h3 { font-family: var(--cm-serif); font-size: 19px; margin: 10px 0 6px; color: var(--cm-forest); }
.cm-account-empty p { color: var(--cm-ink-2); margin: 0 0 16px; }
.cm-account-empty a { color: var(--cm-orange-dark); font-weight: 620; }

.cm-account-notice {
  border: 1px solid var(--cm-line); border-left: 3px solid var(--cm-forest);
  background: var(--cm-accent-soft); color: var(--cm-forest);
  border-radius: 12px; padding: 13px 16px; font-size: 14px; font-weight: 550;
}

/* --- formularios --- */
.cm-account-form, .cm-security-form, .cm-privacy-form {
  display: grid; gap: 18px;
  border: 1px solid var(--cm-line); border-radius: 16px;
  background: var(--cm-surface); padding: 22px;
}
.cm-account-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cm-account-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.cm-account-form legend {
  padding: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cm-ink-3);
}
.cm-account-form label, .cm-security-form label {
  display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cm-ink-2);
}
.cm-account-form input[type="text"], .cm-account-form input[type="email"],
.cm-account-form input[type="password"], .cm-account-form select,
.cm-security-form input {
  width: 100%; border: 1px solid var(--cm-line); border-radius: 10px;
  padding: 11px 13px; font-size: 14.5px; background: var(--cm-surface);
  color: var(--cm-ink); outline: none; font-weight: 400;
}
.cm-account-form input:focus, .cm-account-form select:focus, .cm-security-form input:focus {
  border-color: var(--cm-forest); box-shadow: 0 0 0 3px var(--cm-accent-soft);
}
.cm-account-form button, .cm-security-form button, .cm-privacy-form button {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--cm-forest); color: var(--cm-cream); border: 0; cursor: pointer;
  padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 620;
}
.cm-account-form button:hover, .cm-security-form button:hover, .cm-privacy-form button:hover { background: var(--cm-forest-deep); }

.cm-account-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cm-account-source-grid > *,
.cm-account-form .cm-account-source-grid label {
  display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left;
  border: 1px solid var(--cm-line); border-radius: 11px;
  padding: 11px 13px; background: var(--cm-surface); font-size: 13.5px;
  font-weight: 500; color: var(--cm-ink-2); cursor: pointer;
}
.cm-account-source-grid > *:hover { border-color: var(--cm-ink-3); }
.cm-account-source-grid input { accent-color: var(--cm-forest); flex: 0 0 auto; }
.cm-account-source-grid span { min-width: 0; overflow-wrap: anywhere; }
.cm-account-source-grid b { font-weight: 620; }
.cm-account-source-grid small { color: var(--cm-ink-3); font-size: 12px; margin-left: auto; }

.cm-account-alerts { display: grid; gap: 10px; }
.cm-account-alerts > * {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--cm-line); border-radius: 12px;
  padding: 14px 16px; background: var(--cm-surface); font-size: 14px;
}
.cm-account-alerts label,
.cm-account-form .cm-account-alerts label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cm-account-alerts label input { accent-color: var(--cm-forest); flex: 0 0 auto; }
.cm-account-alerts label > span { display: grid; gap: 2px; }
.cm-account-alerts strong { font-size: 14px; font-weight: 640; color: var(--cm-ink); }
.cm-account-alerts small { font-size: 12.5px; color: var(--cm-ink-3); }
.cm-account-alerts select {
  margin-left: auto; border: 1px solid var(--cm-line); border-radius: 9px;
  padding: 9px 11px; font-size: 13.5px; background: var(--cm-surface); color: var(--cm-ink);
}

.cm-compare-builder[hidden] { display: none; }

/* --- responsive del panel --- */
@media (max-width: 1080px) {
  .cm-account-app { grid-template-columns: 210px minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 900px) {
  .cm-account-app { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cm-account-content { gap: 28px; }
  .cm-account-nav {
    position: static; padding: 10px; display: block;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .cm-account-nav > span, .cm-account-nav > div:last-child { display: none; }
  .cm-account-nav nav {
    display: flex; gap: 6px; width: max-content; min-width: 100%;
  }
  .cm-account-nav a { white-space: nowrap; padding: 9px 12px; }
  .cm-account-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
  .cm-account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-account-hero { padding: 20px; border-radius: 16px; }
  .cm-account-hero__actions { margin-left: 0; width: 100%; }
  .cm-account-hero__actions a { flex: 1 1 auto; text-align: center; }
  .cm-account-identity h1, .cm-account-hero h1 { font-size: 22px; }
  .cm-avatar { width: 50px; height: 50px; font-size: 21px; }
  .cm-account-section__heading h2 { font-size: 20px; }
  .cm-account-summary article > strong { margin-left: 0; text-align: left; }
  .cm-account-chips { margin-left: 0; justify-content: flex-start; }
  .cm-account-form, .cm-security-form, .cm-privacy-form { padding: 16px; }
  .cm-account-alerts select { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .cm-account-dashboard { padding-top: 18px; }
  .cm-account-app { padding: 0 0 54px; }
  .cm-account-hero { padding: 18px 16px; }
  .cm-account-identity { gap: 12px; }
  .cm-account-stats { gap: 10px; }
  .cm-account-stats > * { padding: 13px 13px 12px; }
  .cm-account-stats strong, .cm-account-stats b { font-size: 23px; }
  .cm-account-source-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   FICHA: comparacion de ofertas, historico y galeria
   ========================================================================= */

.cm-app--detail { display: block; }
.cm-detail { min-width: 0; }

.cm-section-heading { margin-bottom: 14px; }
.cm-section-heading h2 {
  font-family: var(--cm-serif); font-size: 20px; font-weight: 600;
  color: var(--cm-forest); margin: 0 0 4px;
}
.cm-section-heading p { font-size: 13.5px; color: var(--cm-ink-2); margin: 0; }

/* Comparacion de ofertas del mismo producto */
.cm-compare { margin-top: 34px; }
.cm-compare__intro { font-size: 14px; color: var(--cm-ink-2); margin: 0 0 14px; max-width: 70ch; }
.cm-compare__list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cm-compare__offer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--cm-line); border-radius: 12px;
  padding: 14px 16px; background: var(--cm-surface);
  transition: border-color .15s, box-shadow .15s;
}
.cm-compare__offer:hover { border-color: #d4c9b2; box-shadow: var(--cm-shadow-md, 0 6px 18px rgba(23,63,54,.07)); }
.cm-compare__offer.is-best,
.cm-compare__offer--best { border-color: var(--cm-forest); background: #f6faf7; }

.cm-compare__store {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--cm-ink); min-width: 0; flex: 1;
}
.cm-compare__store > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cm-compare__store strong { font-weight: 640; overflow-wrap: anywhere; }
.cm-compare__store small { display: block; font-size: 12px; font-weight: 450; color: var(--cm-ink-3); }
.cm-compare__store i {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  display: grid; place-items: center; font-style: normal;
  background: var(--cm-bg-soft); color: var(--cm-forest);
  font-family: var(--cm-serif); font-size: 15px; font-weight: 640;
}

.cm-compare__price {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--cm-serif); font-size: 22px; font-weight: 640;
  color: var(--cm-forest); letter-spacing: -.02em; white-space: nowrap; line-height: 1.15;
}
.cm-compare__price small {
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0; color: var(--cm-ink-3); margin-top: 3px;
}

/* El globo de mejor precio */
.cm-compare__best {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cm-forest); color: var(--cm-cream);
  border-radius: 20px; padding: 4px 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.cm-compare__offer a,
.cm-compare__offer .cm-btn { margin-left: auto; }

/* Historico de precios */
.cm-price-history { margin-top: 34px; }
.cm-price-chart {
  display: flex; align-items: flex-end; gap: 4px;
  height: 130px; padding: 14px 16px;
  border: 1px solid var(--cm-line); border-radius: 12px;
  background: var(--cm-surface); overflow-x: auto;
}
.cm-price-chart > * {
  flex: 1 0 10px; min-width: 10px;
  background: var(--cm-accent-soft); border-radius: 4px 4px 0 0;
  position: relative;
}
.cm-price-chart > *:last-child { background: var(--cm-forest); }
.cm-history-alert {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--cm-warn-line); background: var(--cm-warn-bg);
  color: var(--cm-warn-ink); border-radius: 12px;
  padding: 13px 16px; font-size: 13.5px; margin-top: 12px;
}
.cm-history-alert b { color: #54460f; }

/* Corazon de favoritos suelto */
.cm-favorite-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
}
.cm-favorite-button.is-active { color: #d3435c; border-color: #e9b9c1; }
.cm-favorite-button.is-active svg { fill: currentColor; }

/* =========================================================================
   GALERIA EN TARJETA Y FICHA
   ========================================================================= */
.cm-gallery {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.cm-gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(23, 63, 54, .12);
  background: rgba(255, 253, 249, .94);
  color: var(--cm-forest); cursor: pointer; pointer-events: auto;
  font-size: 18px; line-height: 1; padding: 0;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .15s, background .15s;
  box-shadow: 0 2px 8px rgba(23, 63, 54, .14);
}
.cm-gallery__arrow--prev { left: 8px; }
.cm-gallery__arrow--next { right: 8px; }
.cm-card:hover .cm-gallery__arrow,
.cm-gal:hover .cm-gallery__arrow,
.cm-gallery__arrow:focus-visible { opacity: 1; }
.cm-gallery__arrow:hover { background: #fff; }

.cm-gallery__dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 4px; pointer-events: none;
}
.cm-gallery__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 253, 249, .6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: background .15s, width .15s;
}
.cm-gallery__dots i.is-on { background: #fff; width: 14px; border-radius: 3px; }

/* En la ficha las flechas son mayores y siempre visibles */
.cm-gal .cm-gallery__arrow { width: 40px; height: 40px; font-size: 22px; opacity: .85; }
.cm-gal .cm-gallery__arrow:hover { opacity: 1; }
.cm-gal .cm-gallery__dots { bottom: 12px; }
.cm-gal .cm-gallery__dots i { width: 7px; height: 7px; background: rgba(23,63,54,.35); }
.cm-gal .cm-gallery__dots i.is-on { background: var(--cm-forest); width: 18px; }

/* =========================================================================
   PAGINACION SUPERIOR
   ========================================================================= */
.cm-pagination--top {
  margin: 0 0 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--cm-line-2);
}

@media (max-width: 640px) {
  .cm-compare__offer {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 10px 12px;
  }
  .cm-compare__store { flex: none; }
  .cm-compare__best { grid-column: 1; justify-self: start; }
  .cm-compare__offer a, .cm-compare__offer .cm-btn {
    grid-column: 1 / -1; margin-left: 0; justify-self: stretch; text-align: center;
  }
}
@media (max-width: 520px) {
  .cm-gallery__arrow { opacity: 1; width: 26px; height: 26px; font-size: 15px; }
  .cm-compare__offer { gap: 9px 10px; padding: 13px 14px; }
  .cm-compare__price { font-size: 19px; }
}

/* Red de seguridad: el brand-mark nunca debe renderizarse a tamano intrinseco. */
.cm-account img[src$="brand-mark.svg"],
.cm-brand-footer img[src$="brand-mark.svg"] { width: 40px; height: 40px; flex: 0 0 40px; }


/* =========================================================================
   FICHA: arbol de categorias lateral y carrusel de la misma categoria
   ========================================================================= */

.cm-layout--detail {
  display: grid; grid-template-columns: 246px minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.cm-app--detail { display: block; }
.cm-side--detail { position: sticky; top: 96px; }
.cm-side--detail .cm-side__form { display: block; }
.cm-side__scope {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--cm-line-2);
  font-size: 12.5px; line-height: 1.5;
}
.cm-side__scope a { color: var(--cm-orange-dark); font-weight: 620; }

.cm-ribbon--related { margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--cm-line-2); }
.cm-ribbon__all {
  font-size: 13px; font-weight: 620; color: var(--cm-orange-dark);
  margin-right: 6px; white-space: nowrap;
}

@media (max-width: 1040px) {
  .cm-layout--detail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cm-side--detail { position: static; }
}

/* =========================================================================
   MEJORAS RESPONSIVE: GRÁFICO INTERACTIVO, ALERTAS Y BARRA MÓVIL
   ========================================================================= */

/* --- Gráfico interactivo de precios --- */
.cm-price-chart[data-cm-chart] {
  position: relative; width: 100%; height: auto; min-height: 180px;
  background: var(--cm-surface); border: 1px solid var(--cm-line);
  border-radius: 16px; padding: 18px 16px 12px;
  box-shadow: var(--cm-shadow-sm, 0 2px 8px rgba(23,63,54,.04));
  overflow: visible; display: block;
}
.cm-price-chart[data-cm-chart] svg {
  width: 100%; height: 160px; display: block; overflow: visible;
}
.cm-chart-dot {
  fill: var(--cm-forest); stroke: #ffffff; stroke-width: 2.5px;
  cursor: pointer; transition: r .18s cubic-bezier(0.4, 0, 0.2, 1), fill .18s;
  outline: none;
}
.cm-chart-dot:hover,
.cm-chart-dot:focus {
  r: 8.5px; fill: var(--cm-orange-dark, #c25e00);
}
.cm-chart-tooltip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--cm-forest-deep, #0f2c25); color: #ffffff;
  padding: 6px 12px; border-radius: 8px; font-size: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  white-space: nowrap; transform: translateY(-100%);
  animation: cmTipFade .15s ease-out;
}
.cm-chart-tooltip::after {
  content: ''; position: absolute; bottom: -5px; left: 50%;
  transform: translateX(-50%); border-width: 5px 5px 0 5px;
  border-style: solid; border-color: var(--cm-forest-deep, #0f2c25) transparent transparent transparent;
}
.cm-chart-tooltip strong { font-size: 13.5px; font-weight: 700; color: #fdfaf3; }
.cm-chart-tooltip span { font-size: 11px; opacity: .85; }

@keyframes cmTipFade {
  from { opacity: 0; transform: translateY(-90%); }
  to { opacity: 1; transform: translateY(-100%); }
}

.cm-price-history__badge {
  display: flex; flex-direction: column; align-items: flex-end;
  background: #f4faf6; border: 1px solid #c8e6d9; border-radius: 10px;
  padding: 6px 12px; line-height: 1.2;
}
.cm-price-history__badge small { font-size: 11px; color: #2e7d5a; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.cm-price-history__badge b { font-size: 16px; color: var(--cm-forest); font-weight: 700; }

.cm-price-history__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 14px;
}
.cm-ph-stat {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--cm-surface); border: 1px solid var(--cm-line);
  border-radius: 12px; padding: 10px 14px;
}
.cm-ph-stat span { font-size: 12px; color: var(--cm-ink-3); font-weight: 500; }
.cm-ph-stat b { font-size: 15px; color: var(--cm-ink); font-weight: 650; }
.cm-ph-stat--min { color: #1e7e34 !important; }
.cm-ph-stat--cur { color: var(--cm-forest) !important; }

.cm-price-history__single {
  display: flex; align-items: center; gap: 16px;
  background: #f8faf8; border: 1px solid #dbeae0;
  border-radius: 14px; padding: 16px 18px; margin-top: 10px;
}
.cm-ph-single-icon { font-size: 26px; }
.cm-price-history__single strong { display: block; font-size: 14.5px; color: var(--cm-forest); margin-bottom: 2px; }
.cm-price-history__single p { margin: 0; font-size: 13.5px; color: var(--cm-ink-2); line-height: 1.45; }

/* --- Caja de alertas y botón de precio --- */
.cm-history-alert-box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fffcf4; border: 1px solid #f2e3c6; border-radius: 14px;
  padding: 16px 20px; margin-top: 18px; box-shadow: 0 2px 8px rgba(184, 134, 11, .04);
}
.cm-history-alert-info {
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.cm-alert-bell {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  background: #fbf0d9; color: #b45309; display: grid; place-items: center;
}
.cm-history-alert-info strong { display: block; font-size: 14.5px; color: #78350f; font-weight: 650; margin-bottom: 2px; }
.cm-history-alert-info p { margin: 0; font-size: 13px; color: #92400e; line-height: 1.4; }

.cm-btn-alert-action {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  background: var(--cm-forest); color: #ffffff !important;
  border-radius: 11px; padding: 12px 20px; font-size: 13.5px; font-weight: 650;
  box-shadow: 0 3px 10px rgba(23,63,54,.2); transition: transform .15s, background .15s, box-shadow .15s;
  text-decoration: none !important;
}
.cm-btn-alert-action:hover {
  background: var(--cm-forest-deep); transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(23,63,54,.28);
}

/* --- Buscador predictivo multisección --- */
.site-suggest__section {
  padding: 6px 0; border-bottom: 1px solid var(--cm-line-2);
}
.site-suggest__section:last-of-type { border-bottom: none; }
.site-suggest__label {
  display: block; font-size: 11px; font-weight: 700; color: var(--cm-ink-3);
  text-transform: uppercase; letter-spacing: .05em; padding: 4px 14px 4px;
}
.site-suggest__item--cat,
.site-suggest__item--brand {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
}
.site-suggest__cat-icon,
.site-suggest__brand-icon {
  font-size: 14px; opacity: .85;
}
.site-suggest__badge {
  margin-left: auto; font-size: 11.5px; color: var(--cm-ink-3);
  background: var(--cm-bg-soft); border-radius: 6px; padding: 2px 6px;
}

/* --- Barra de navegación fija móvil (Sticky Bottom Bar) --- */
.cm-mobile-nav { display: none; }

@media (max-width: 860px) {
  body { padding-bottom: 64px; }
  .cm-mobile-nav {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    height: 60px; background: rgba(255, 253, 249, .97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--cm-line); box-shadow: 0 -4px 16px rgba(23,63,54,.06);
    padding: 0 4px; align-items: center;
  }
  .cm-mnav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: 100%; color: var(--cm-ink-2); text-decoration: none;
    font-size: 11px; font-weight: 550; background: transparent; border: none;
    cursor: pointer; padding: 0; position: relative;
    transition: color .15s;
  }
  .cm-mnav__item:hover,
  .cm-mnav__item.is-active { color: var(--cm-forest); font-weight: 650; }
  .cm-mnav__item svg { stroke: currentColor; transition: transform .15s; }
  .cm-mnav__item:active svg { transform: scale(0.9); }
  .cm-mnav__badge {
    position: absolute; top: 6px; right: calc(50% - 18px);
    background: #d97706; color: #ffffff; font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 8px; display: grid;
    place-items: center; padding: 0 4px; line-height: 1; font-style: normal;
  }

  /* Responsive de la caja de alertas */
  .cm-history-alert-box {
    flex-direction: column; align-items: stretch; text-align: left;
  }
  .cm-btn-alert-action {
    justify-content: center; width: 100%;
  }
  .cm-price-history__stats {
    grid-template-columns: 1fr;
  }
}

/* --- Rejilla optimizada en Tablet (651px - 1024px) --- */
@media (min-width: 651px) and (max-width: 1024px) {
  .cm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .cm-card__media {
    aspect-ratio: 4 / 3;
  }
}

/* --- Rejilla optimizada en Smartphone (< 650px) --- */
@media (max-width: 650px) {
  .cm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .cm-card {
    border-radius: 12px;
  }
  .cm-card__media {
    aspect-ratio: 1 / 1;
  }
  .cm-card__body {
    padding: 10px 12px 12px;
  }
  .cm-card__title {
    font-size: 13.5px; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .cm-card__price {
    font-size: 16px;
  }
}


/* ---------- asistente de chat ---------- */
.cm-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  color: var(--cm-ink);
}
.cm-chat__head span {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--cm-ink-2);
  margin-bottom: 6px;
}
.cm-chat__head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.25;
}
.cm-chat__head p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cm-ink-2);
}

.cm-chat__hilo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--cm-line, #e9e5db);
  border-radius: 14px;
  background: #fbfaf7;
  scrollbar-width: thin;
}

.cm-chat__msg {
  max-width: 92%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
}
.cm-chat__msg p { margin: 0; }
.cm-chat__msg--bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--cm-line, #e9e5db);
  border-bottom-left-radius: 4px;
}
.cm-chat__msg--yo {
  align-self: flex-end;
  background: #173f36;
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Los tres puntitos mientras piensa */
.cm-chat__msg--esperando p { display: flex; gap: 5px; }
.cm-chat__msg--esperando i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cm-ink-2, #6b6559);
  animation: cm-chat-latido 1.1s infinite ease-in-out;
}
.cm-chat__msg--esperando i:nth-child(2) { animation-delay: .16s; }
.cm-chat__msg--esperando i:nth-child(3) { animation-delay: .32s; }
@keyframes cm-chat-latido {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .cm-chat__msg--esperando i { animation: none; opacity: .5; }
}

/* Las fichas que devuelve la busqueda */
.cm-chat__fichas {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.cm-chat__ficha {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--cm-line, #e9e5db);
  border-radius: 11px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.cm-chat__ficha:hover,
.cm-chat__ficha:focus-visible {
  border-color: #173f36;
  transform: translateY(-1px);
}
.cm-chat__foto {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1eee7;
}
.cm-chat__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-chat__datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-chat__datos b {
  font-size: 13.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cm-chat__datos em { font-style: normal; font-weight: 700; font-size: 14px; }
.cm-chat__datos small { font-size: 11.5px; color: var(--cm-ink-2, #6b6559); }

.cm-chat__todos {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #173f36;
}

/* Sugerencias de arranque */
.cm-chat__sugerencias { display: flex; flex-wrap: wrap; gap: 7px; }
.cm-chat__sugerencias button {
  border: 1px solid var(--cm-line, #e9e5db);
  background: #fff;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--cm-ink);
  transition: border-color .15s ease, background .15s ease;
}
.cm-chat__sugerencias button:hover { border-color: #173f36; background: #f4f7f5; }

/* La caja de escribir */
.cm-chat__form { display: flex; gap: 8px; }
.cm-chat__form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 15px;
  border: 1px solid var(--cm-line, #e9e5db);
  border-radius: 999px;
  font-size: 15px;
  color: var(--cm-ink);
  background: #fff;
}
.cm-chat__form input:focus-visible { outline: 2px solid #173f36; outline-offset: 1px; }
.cm-chat__form button {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #173f36;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.cm-chat__form button:hover { background: #0f2d26; }

@media (max-width: 640px) {
  .cm-chat__head h2 { font-size: 19px; }
  .cm-chat__head p  { font-size: 13px; }
  .cm-chat__hilo    { max-height: 52vh; padding: 11px; }
  .cm-chat__msg     { max-width: 96%; font-size: 14px; }
  .cm-chat__form input { font-size: 16px; } /* 16px evita el zoom de iOS */
}

/* Retoques del chat tras la primera prueba en pantalla */

/* [hidden] no gana a display:flex, hay que decirlo. */
.cm-chat__sugerencias[hidden] { display: none; }

/* La burbuja que trae fichas ocupa todo el ancho: si no, las tarjetas
   quedan apelotonadas en una columna estrecha con medio modal vacio. */
.cm-chat__msg--ancho {
  max-width: 100%;
  width: 100%;
  align-self: stretch;
}
.cm-chat__msg--ancho .cm-chat__fichas {
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
@media (max-width: 640px) {
  .cm-chat__msg--ancho .cm-chat__fichas { grid-template-columns: 1fr; }
}

/* ---------- "Ver mas resultados" del comparador ---------- */
.cm-compare-mas {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  padding: 11px 14px;
  border: 1px dashed var(--cm-line);
  border-radius: 10px;
  background: transparent;
  color: var(--cm-forest);
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}
.cm-compare-mas:hover:not(:disabled) { background: var(--cm-bg-soft); border-style: solid; }
.cm-compare-mas:disabled { opacity: .6; cursor: default; }
.cm-compare-suggestions__fin {
  margin: 8px 0 2px;
  text-align: center;
  font-size: 12.5px;
  color: var(--cm-ink-3);
}

/* ---------- el asistente en pantallas pequenas y tabletas ----------
   El panel del modal scrolleaba entero, asi que la caja de escribir quedaba
   por debajo del borde y no habia forma de verla sin adivinar que habia que
   deslizar dentro del recuadro. Ahora el panel no scrollea: es una columna
   donde el hilo se come el espacio sobrante y el formulario se queda fijo
   abajo, siempre a la vista. */
@media (max-width: 900px) {
  .cm-assistant-modal__panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .cm-chat { flex: 1 1 auto; min-height: 0; }
  .cm-chat__head        { flex: 0 0 auto; }
  .cm-chat__hilo        { flex: 1 1 auto; min-height: 110px; max-height: none; }
  .cm-chat__sugerencias { flex: 0 0 auto; }
  .cm-chat__form        { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .cm-assistant-modal__panel {
    height: 88vh;
    height: 88dvh;                 /* sin contar la barra del navegador */
    max-height: none;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  /* Las sugerencias en una sola fila deslizable: en vertical ocupaban
     tres lineas y empujaban el hilo. */
  .cm-chat__sugerencias {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .cm-chat__sugerencias::-webkit-scrollbar { display: none; }
  .cm-chat__sugerencias button { white-space: nowrap; }
}

@media (max-width: 520px) {
  /* En pantallas pequenas el parrafo de presentacion se come media ventana. */
  .cm-chat__head p { display: none; }
  .cm-chat__head h2 { font-size: 18px; margin-bottom: 2px; }
}

/* ==========================================================================
   El comparador en movil y tableta

   Tres cosas estaban rotas: el boton "Comparar seleccion" quedaba por debajo
   del borde de la pantalla, la tabla de comparacion se salia por los lados
   con fotos enormes y columnas anchisimas, y con cuatro productos no habia
   forma humana de leerla. Aqui el panel deja de scrollear entero y pasa a ser
   una columna: la lista de resultados se lleva el espacio sobrante y el pie
   con el boton se queda pegado abajo, siempre visible.
   ========================================================================== */
@media (max-width: 900px) {
  .cm-compare-modal__panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .cm-compare-modal__head { flex: 0 0 auto; }

  .cm-compare-builder {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .cm-compare-search      { flex: 0 0 auto; }
  .cm-compare-suggestions { flex: 1 1 auto; min-height: 90px; max-height: none; }
  .cm-compare-selection   { flex: 0 0 auto; max-height: 32vh; overflow-y: auto; margin-top: 12px; }

  /* El pie se queda pegado abajo, sobre el fondo del panel. */
  .cm-compare-actions {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    margin-top: 12px;
    padding: 12px 0 0;
    background: var(--cm-surface);
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .12);
  }

  .cm-compare-output {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .cm-compare-output__head { flex: 0 0 auto; }
  .cm-compare-table-wrap   { flex: 1 1 auto; min-height: 0; overflow: auto; }
}

@media (max-width: 640px) {
  .cm-compare-modal__panel {
    height: 90vh;
    height: 90dvh;
    max-height: none;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  /* Con cuatro productos hay que caber. Foto pequena y columna estrecha. */
  .cm-compare-table thead th { min-width: 116px; }
  .cm-compare-table thead img { max-width: 62px; margin-bottom: 6px; }
  .cm-compare-table thead a { font-size: 12px; line-height: 1.3; }
  .cm-compare-table tbody th { width: 62px; font-size: 11px; padding-right: 6px; }
  .cm-compare-table th, .cm-compare-table td { padding: 8px 9px; font-size: 12px; }
  .cm-compare-best { font-size: 10px; padding: 1px 7px; }
  /* La primera columna, la de los conceptos, se queda fija al deslizar. */
  .cm-compare-table tbody th,
  .cm-compare-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--cm-bg-soft);
  }
  .cm-compare-table thead th:first-child { background: var(--cm-surface); }

  .cm-compare-selection { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .cm-compare-table thead th { min-width: 100px; }
  .cm-compare-table thead img { max-width: 52px; }
  .cm-compare-table tbody th { width: 56px; }
}

/* ==========================================================================
   La barra de cinco iconos y los modales

   La barra inferior de movil esta fija con z-index 999. Los modales se abren
   por encima del contenido pero su pie -- el boton "Comparar seleccion" y la
   caja de escribir del asistente -- caia justo debajo de esa barra y no habia
   forma de tocarlo. Mientras hay un modal abierto la barra desaparece.
   ========================================================================== */
@media (max-width: 860px) {
  body.cm-modal-abierto .cm-mobile-nav { display: none; }

  /* Y por si el JS no llegara a poner la clase, el pie del modal nunca queda
     pegado al borde: se reserva la altura de la barra. */
  .cm-compare-modal__panel,
  .cm-assistant-modal__panel {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* En un movil de 600 px de alto la cabecera del comparador se comia 240 px y
   la lista de resultados se quedaba en una fila. El parrafo explicativo sobra
   en pantalla pequena: el propio buscador ya dice lo que hay que hacer. */
@media (max-width: 640px) {
  .cm-compare-modal__head p { display: none; }
  .cm-compare-modal__head h2 { font-size: 18px; margin: 4px 0 10px; }
  .cm-compare-search span { font-size: 11px; margin-bottom: 5px; }
  .cm-compare-suggestions { min-height: 180px; }
  .cm-compare-selection { max-height: 26vh; }
}

/* "Ver más productos" del asistente: mismo aire que el del comparador. */
.cm-chat__mas {
  display: block;
  width: 100%;
  margin: 10px 0 2px;
  padding: 10px 14px;
  border: 1px dashed var(--cm-line);
  border-radius: 10px;
  background: transparent;
  color: var(--cm-forest, #173f36);
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}
.cm-chat__mas:hover { background: var(--cm-bg-soft); border-style: solid; }
.cm-chat__todos { display: inline-block; margin-top: 8px; }

/* Patrocinios y contactos comerciales contextuales. */
.cm-commercial { display: grid; gap: 12px; margin: 14px 0 20px; }
.cm-sponsor, .cm-lead-cta {
  border: 1px solid var(--cm-line); border-radius: 14px; background: #fff;
  padding: 16px 18px; box-shadow: 0 7px 24px rgba(12, 38, 31, .055);
}
.cm-sponsor { display: grid; grid-template-columns: minmax(170px,.7fr) minmax(220px,1.3fr) auto; align-items: center; gap: 18px; }
.cm-sponsor__brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cm-sponsor__brand img { width: 48px; height: 48px; object-fit: contain; border-radius: 9px; background: #fff; }
.cm-sponsor__brand div { display: grid; min-width: 0; }
.cm-sponsor__brand small, .cm-lead-cta small, .cm-lead-form > small { color: var(--cm-ink-3); font-size: 10px; font-weight: 750; letter-spacing: .09em; }
.cm-sponsor__brand strong { color: var(--cm-ink); font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.cm-sponsor p { margin: 0; color: var(--cm-ink-2); font-size: 13.5px; line-height: 1.5; }
.cm-sponsor > a, .cm-lead-open, .cm-lead-submit {
  border: 0; border-radius: 9px; background: var(--cm-forest); color: #fff; padding: 10px 15px;
  font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cm-sponsor > a:hover, .cm-lead-open:hover, .cm-lead-submit:hover { background: var(--cm-accent-dark); color: #fff; }
.cm-lead-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--cm-bg-soft); }
.cm-lead-cta h2 { margin: 3px 0 2px; color: var(--cm-ink); font-size: clamp(17px, 2vw, 21px); }
.cm-lead-cta p { margin: 0; color: var(--cm-ink-2); font-size: 13.5px; }
.cm-lead-notice { margin: 12px 0; padding: 12px 14px; border: 1px solid #a9d7c0; border-radius: 10px; background: #edf9f2; color: #17462f; }
.cm-lead-notice--error { border-color: #e5b5ad; background: #fff2ef; color: #7c2c20; }
.cm-lead-modal { width: min(620px, calc(100% - 28px)); max-height: min(760px, calc(100dvh - 28px)); padding: 0; border: 0; border-radius: 16px; color: var(--cm-ink); box-shadow: 0 28px 80px rgba(0,0,0,.35); }
.cm-lead-modal::backdrop { background: rgba(9, 22, 18, .64); backdrop-filter: blur(3px); }
.cm-lead-form { position: relative; display: grid; gap: 13px; padding: 24px; max-height: inherit; overflow: auto; box-sizing: border-box; }
.cm-lead-form h2 { margin: -5px 42px -8px 0; font-size: 23px; }
.cm-lead-form > p { margin: 0 0 4px; color: var(--cm-ink-2); font-size: 13.5px; }
.cm-lead-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--cm-bg-soft); color: var(--cm-ink); font-size: 20px; cursor: pointer; }
.cm-lead-form label { display: grid; gap: 5px; color: var(--cm-ink-2); font-size: 12.5px; font-weight: 650; }
.cm-lead-form input:not([type="checkbox"]), .cm-lead-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--cm-line); border-radius: 9px; background: #fff; color: var(--cm-ink); padding: 10px 11px; font: inherit; }
.cm-lead-form input:focus, .cm-lead-form textarea:focus { outline: 2px solid rgba(226,104,60,.25); border-color: var(--cm-accent); }
.cm-lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-lead-form__consent { grid-template-columns: 18px 1fr !important; align-items: start; gap: 9px !important; font-size: 11.5px !important; line-height: 1.45; font-weight: 500 !important; }
.cm-lead-form__consent input { margin-top: 2px; }
.cm-lead-form__consent a { color: var(--cm-accent-dark); }
.cm-lead-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.cm-lead-submit { justify-self: start; min-width: 160px; }
.cm-legal-document { max-width: 900px; }
.cm-legal-document h2 { margin-top: 1.7em; }
.cm-legal-document table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.cm-legal-document th, .cm-legal-document td { padding: 10px 12px; border: 1px solid var(--cm-line, #d9ddd8); text-align: left; vertical-align: top; }
.cm-legal-warning { padding: 14px 16px; border: 1px solid #e6b65c; border-radius: 10px; background: #fff8e8; color: #5c4216; }

@media (max-width: 700px) {
  .cm-commercial { margin: 10px 0 16px; }
  .cm-sponsor { grid-template-columns: 1fr; gap: 11px; padding: 15px; }
  .cm-sponsor > a { width: 100%; box-sizing: border-box; text-align: center; }
  .cm-lead-cta { align-items: stretch; flex-direction: column; padding: 15px; gap: 13px; }
  .cm-lead-open { width: 100%; }
  .cm-lead-modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
  .cm-lead-form { padding: 20px 16px max(20px, env(safe-area-inset-bottom)); }
  .cm-lead-form__row { grid-template-columns: 1fr; }
  .cm-lead-submit { width: 100%; }
}

/* ==========================================================================
   El hero en movil

   A 390x600 el titular ocupaba tres lineas y el subtitulo cuatro: entre eso,
   la cabecera y el rotulo del catalogo, la primera pantalla se agotaba sin
   ensenar un solo producto, que es lo unico que la gente ha venido a ver.
   Aqui se aprieta: titular a dos lineas como mucho, subtitulo a una, y menos
   aire alrededor. Se recuperan unos 200 px, fila y media de fichas.
   ========================================================================== */
@media (max-width: 640px) {
  .cm-hero__in { padding: 18px 16px 16px; }

  .cm-hero__title {
    font-size: 19px;
    line-height: 1.22;
    margin: 0 0 6px;
  }

  /* El recuadro alrededor de MARKETPLACE parecia un borde suelto; en movil
     basta con el color para destacarlo. */
  .cm-hero__title .cm-hero__market {
    border: 0;
    padding: 0;
  }

  .cm-hero__sub {
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cm-hero__kicker { margin-bottom: 5px; }
}

/* En pantallas muy bajas o muy estrechas, el subtitulo sobra del todo:
   el titular ya dice lo que es y el buscador dice lo que se puede hacer. */
@media (max-width: 400px), (max-height: 620px) and (max-width: 640px) {
  .cm-hero__sub { display: none; }
  .cm-hero__title { font-size: 18px; }
}

/* ---------- el mismo articulo en otras tiendas ---------- */
.cm-otras-tiendas__head h2 { margin: 0 0 4px; font-size: 20px; }
.cm-otras-tiendas__head p { margin: 0 0 14px; font-size: 13px; color: var(--cm-ink-2); }

.cm-otras-tiendas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-otras-tiendas__lista a {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--cm-line);
  border-radius: 11px;
  background: var(--cm-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.cm-otras-tiendas__lista a:hover { border-color: var(--cm-forest); }
.cm-otras-tiendas__t { font-size: 12px; font-weight: 700; color: var(--cm-ink-2); }
.cm-otras-tiendas__n {
  font-size: 13.5px; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-otras-tiendas__lista b { font-size: 16px; white-space: nowrap; }
.cm-otras-tiendas__mejor {
  grid-column: 3; font-style: normal; font-size: 11px; font-weight: 700;
  color: #15704f; text-align: right;
}
.cm-otras-tiendas__aqui {
  margin: 12px 0 0; font-size: 13px; font-weight: 600; color: #15704f;
}

/* En movil la fila se apila: la tienda arriba, el precio abajo a la derecha. */
@media (max-width: 640px) {
  .cm-otras-tiendas__lista a {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'tienda precio' 'nombre precio';
    gap: 3px 10px;
  }
  .cm-otras-tiendas__t { grid-area: tienda; }
  .cm-otras-tiendas__n { grid-area: nombre; -webkit-line-clamp: 2; }
  .cm-otras-tiendas__lista b { grid-area: precio; align-self: center; }
  .cm-otras-tiendas__mejor { grid-column: 2; }
}

/* ==========================================================================
   El precio "Desde X" y su linea de rango

   La linea "Hasta X segun la variante elegida" llevaba margin-top: -14px para
   pegarla al precio, y con el precio en serif a 36px con line-height 1 se le
   metia encima: el texto quedaba tapado por los trazos bajos de la cifra.

   Se quita el margen negativo y se le da al precio una altura de linea que
   respete los descendentes. El rango y la linea de "precio actualizado" van
   juntos debajo, que es lo que son: dos apuntes del mismo tamano sobre el
   precio de arriba.
   ========================================================================== */
.cm-panel__price {
  line-height: 1.15;
  margin-bottom: 3px;
}
.cm-panel__range {
  margin: 0 0 2px;
  line-height: 1.4;
}