/**
 * Tema TopFoams (diseño topdormitorios) — páginas CMS, contacto, cuenta de cliente y 404
 *
 * Valores medidos en topdormitorios.com (estilos computados con Chrome):
 * - Su "kit" de Creative Elements (body.ce-kit-2) fija h1 37px/600 y las migas
 *   a 11px #555 en todas las páginas salvo las CMS.
 * - Sus CMS son widgets de Creative Elements: h2 20px/20px 600 negro con 40px
 *   encima (60px desde el texto) y 20px debajo, texto 14px/21px, párrafos a 16px, listas con sangría
 *   de 40px, enlaces negros sin subrayar.
 * Las CMS de TopFoams son HTML plano de la BD con estilos en línea (h3 y
 * enlaces en #00b8f1, envoltorio con line-height:2em y color #333): aquí se
 * neutralizan esos estilos en línea (de ahí los !important) para que el
 * contenido se vea con la estética de topdormitorios sin tocar la BD.
 */

/* ==========================================================================
   1. Común: título y migas como el kit de topdormitorios
   ========================================================================== */

#contact .page-title-section,
#sitemap .page-title-section,
#guest-tracking .page-title-section,
#order-follow .page-title-section,
#discount .page-title-section,
#my-account .page-title-section {
  font-size: 37px;
  font-weight: 600;
  line-height: 1.2;
}

#sitemap .page-header .page-title-section {
  line-height: 43px;
}

/* Solo en las páginas de esta área (el resto de páginas son de otras áreas) */
#contact .breadcrumb .breadcrumb-item,
#sitemap .breadcrumb .breadcrumb-item,
#authentication .breadcrumb .breadcrumb-item,
#registration .breadcrumb .breadcrumb-item,
#password .breadcrumb .breadcrumb-item,
#guest-tracking .breadcrumb .breadcrumb-item,
#guest-login .breadcrumb .breadcrumb-item,
#my-account .breadcrumb .breadcrumb-item,
#identity .breadcrumb .breadcrumb-item,
#addresses .breadcrumb .breadcrumb-item,
#address .breadcrumb .breadcrumb-item,
#history .breadcrumb .breadcrumb-item,
#order-detail .breadcrumb .breadcrumb-item,
#order-slip .breadcrumb .breadcrumb-item,
#order-follow .breadcrumb .breadcrumb-item,
#order-return .breadcrumb .breadcrumb-item,
#discount .breadcrumb .breadcrumb-item,
#module-blockwishlist-lists .breadcrumb .breadcrumb-item,
#module-psgdpr-gdpr .breadcrumb .breadcrumb-item {
  color: #555;
  font-size: 11px;
  line-height: 16.5px;
}

#contact .breadcrumb .breadcrumb-item a,
#sitemap .breadcrumb .breadcrumb-item a,
#authentication .breadcrumb .breadcrumb-item a,
#registration .breadcrumb .breadcrumb-item a,
#password .breadcrumb .breadcrumb-item a,
#guest-tracking .breadcrumb .breadcrumb-item a,
#guest-login .breadcrumb .breadcrumb-item a,
#my-account .breadcrumb .breadcrumb-item a,
#identity .breadcrumb .breadcrumb-item a,
#addresses .breadcrumb .breadcrumb-item a,
#address .breadcrumb .breadcrumb-item a,
#history .breadcrumb .breadcrumb-item a,
#order-detail .breadcrumb .breadcrumb-item a,
#order-slip .breadcrumb .breadcrumb-item a,
#order-follow .breadcrumb .breadcrumb-item a,
#order-return .breadcrumb .breadcrumb-item a,
#discount .breadcrumb .breadcrumb-item a,
#module-blockwishlist-lists .breadcrumb .breadcrumb-item a,
#module-psgdpr-gdpr .breadcrumb .breadcrumb-item a {
  color: #555;
}

/* ==========================================================================
   2. Páginas CMS (contenido rich-text de la BD)
   ========================================================================== */

#cms .page-content--cms {
  padding-top: 10px;
  color: #000;
  font-size: 14px;
  line-height: 21px;
}

/* Envoltorio con font-family/color/line-height en línea */
#cms .page-content--cms div[style] {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

#cms .page-content--cms p {
  margin: 0 0 16px;
  line-height: 21px;
}

#cms .page-content--cms h2,
#cms .page-content--cms h3,
#cms .page-content--cms h4 {
  margin: 60px 0 20px !important; /* colapsa con los 16px del párrafo: 60px como en topdormitorios */
  color: #000 !important;
  font-family: var(--tpd-font-family, "Poppins", sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
}

#cms .page-content--cms h4 {
  font-size: 16px;
}

/* Tras una lista, topdormitorios deja 76px (16 de la lista + 20 + 40 del widget) */
#cms .page-content--cms :is(ul, ol, p.tf-cms-li) + :is(h2, h3, h4) {
  margin-top: 76px !important;
}

#cms .page-content--cms > :first-child,
#cms .page-content--cms > div:first-child > :first-child {
  margin-top: 0 !important;
}

#cms .page-content--cms > :last-child,
#cms .page-content--cms > div:last-child > :last-child {
  margin-bottom: 0;
}

/* Viñetas "□", numeraciones y resaltados en #00b8f1 en línea (span, strong):
   en topdormitorios todo el texto de las CMS es negro */
#cms .page-content--cms span[style*="color"],
#cms .page-content--cms strong[style*="color"],
#cms .page-content--cms b[style*="color"],
#cms .page-content--cms em[style*="color"] {
  color: inherit !important;
}

/* Párrafos-viñeta "□" de la BD como elementos de lista (tf-cms.js) */
#cms .page-content--cms p.tf-cms-li {
  display: list-item;
  margin: 0 0 0 40px;
  list-style: disc outside;
}

#cms .page-content--cms p.tf-cms-li:not(:has(+ p.tf-cms-li)) {
  margin-bottom: 16px;
}

#cms .page-content--cms .tf-cms-li__mark {
  display: none;
}

/* Separadores "linea-azul.jpg" (imagen enlazada desde topdormitorios.com):
   las CMS de topdormitorios no llevan separadores */
#cms .page-content--cms img[src*="linea-azul"],
#cms .page-content--cms p:has(> img[src*="linea-azul"]) {
  display: none;
}

#cms .page-content--cms a,
#cms .page-content--cms a[style] {
  color: #000 !important;
  text-decoration: none;
}

/* Enlace con clase de botón de classic (certificado LSSI del aviso legal) */
#cms .page-content--cms a.btn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: baseline;
}

#cms .page-content--cms b,
#cms .page-content--cms strong {
  font-weight: 700;
}

#cms .page-content--cms ul,
#cms .page-content--cms ol {
  margin: 0 0 16px;
  padding-left: 40px;
}

#cms .page-content--cms ul {
  list-style: disc;
}

#cms .page-content--cms ol {
  list-style: decimal;
}

#cms .page-content--cms li {
  margin: 0;
  line-height: 21px;
}

#cms .page-content--cms img {
  max-width: 100%;
  height: auto;
}

#cms .page-content--cms table {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
}

#cms .page-content--cms th,
#cms .page-content--cms td {
  padding: 8px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  vertical-align: top;
}

#cms .page-content--cms th {
  font-weight: 600;
}

@media (max-width: 767.98px) {
  #cms .page-content--cms {
    overflow-wrap: anywhere;
  }

  #cms .page-content--cms table {
    display: block;
    overflow-x: auto;
  }
}

/* ==========================================================================
   8. 404: buscador (el formulario lo estiliza error404.css como el de
      topdormitorios: 64px, #eceeef, radio 10px)
   ========================================================================== */

.tf-404-search form {
  position: relative;
}

.tf-404-search__input {
  flex-grow: 2;
  min-width: 0;
  height: 64px;
  padding: 0 calc(64px / 3);
  border: 0;
  background: transparent;
  color: #7a7a7a;
  font-family: var(--tpd-font-family, "Poppins", sans-serif);
  font-size: 19px;
  line-height: 28.5px;
}

.tf-404-search__input::placeholder {
  color: #7a7a7a;
  opacity: 1;
}

.tf-404-search__input:focus-visible {
  outline: none;
}

.tf-404-search__input:focus-visible::placeholder {
  color: transparent;
}

.tf-404-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* En topdormitorios el icono está (opacity 0): aquí aparece al escribir */
.tf-404-search__btn {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  margin: auto 10px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tf-404-search form:focus-within .tf-404-search__btn {
  opacity: 1;
}

@media (max-width: 767.98px) {
  .tpd-error-404__search {
    width: 100%;
  }

  .tf-404-search__input {
    font-size: 16px;
  }
}