/**
 * desproductslider — APARIENCIA en el tema farmaciacien.
 *
 * Sustituye a modules/desproductslider/views/css/front.css (la registra el
 * módulo con ruta relativa y PrestaShop sirve la primera que existe).
 *
 * BLOQUES    des-pslider, des-topbanner, des-pair__box, des-own
 * TPL        modules/desproductslider/views/templates/hook/block.tpl
 * ACOPLADO   des-band, des-sh, des-see, des-dots, des-card del tema y las
 *            variables del motor descarousel (--desslider-gap, --desslider-card)
 *
 * Maqueta: private/diseño/assets/css/fc.css, apartado 9 (fc-topbanner,
 * fc-pair__box, fc-own) y su bloque de 1024 y 767 px.
 * El reparto de la pareja (dos cajas en una fila) es de la plantilla de la
 * página: .des-pair en _dev/css/components/_fc-home.scss.
 */

.des-pslider img { max-width: 100%; height: auto; }

/* Imagen sobre el título de un carrusel */
.des-topbanner { display: block; margin-bottom: 28px; }
.des-topbanner img { display: block; width: 100%; }

/* Caja de pareja */
.des-pair__box {
  min-width: 0;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.des-pair__box .des-sh h2 { font-size: 22px; }
.des-pair__box .des-sh p { font-size: 14px; }
.des-pair__box .des-see { background: var(--color-bg); }
/* 3 por vista con hueco de 14px (variables del motor descarousel) */
.des-pair__box .des-slider.desslider { --desslider-gap: 14px; --desslider-card: calc((100% - 2 * 14px) / 3); }
.des-pair__box .des-card__media { padding: 16px; }
.des-pair__box .des-card__info { padding: 2px 14px 16px; }
.des-pair__box .des-card__name { font-size: 14px; }
.des-pair__box .des-price { font-size: 19px; }
.des-pair__box .des-dots { margin-top: 18px; }

/* Marca propia: imagen grande y lista de 3 */
.des-own {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px;
  align-items: center;
}
.des-own__img { display: block; }
.des-own__img img { display: block; width: 100%; }
.des-own__side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.des-own__kicker { color: var(--color-accent); font-size: 14px; font-weight: 700; }
.des-own__list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.des-own__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 10px;
  border-radius: 18px;
  background: var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-border) inset;
  color: var(--color-text);
  text-decoration: none;
}
.des-own__item:hover { color: var(--color-text); }
.des-own__item img { flex: none; width: 64px; height: 64px; object-fit: contain; }
.des-own__item span { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.des-own__item b { color: var(--color-price); font-size: 18px; white-space: nowrap; }

@media (max-width: 1024px) {
  .des-own { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .des-topbanner { margin-bottom: 16px; }
  .des-pair__box { padding: 0; border-radius: 0; background: none; }
  .des-pair__box + .des-pair__box { margin-top: 28px; }
  .des-pair__box .des-see { background: none; }
  .des-pair__box .des-slider.desslider { --desslider-gap: var(--gap); --desslider-card: calc((100% - var(--container-pad-mob) - var(--gap)) / 2.2); }
  .des-own__item { padding: 8px 14px 8px 8px; }
  .des-own__item img { width: 56px; height: 56px; }
  .des-own__side .des-button { width: 100%; }
}