/* ==========================================================================
   La Colchona — capa de diseño para páginas secundarias
   Reestiliza los componentes de PrestaShop/classic (bootstrap) con los
   tokens del diseño de la home. Todo va scoped bajo body.colchona-page
   para no afectar a la home (que usa su propio layout aislado).
   Tokens (:root) definidos en colchona.css: --navy, --gold, --cream, etc.
   ========================================================================== */

.colchona-page {
  color: var(--text);
  background: var(--white);
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
}

.colchona-page h1,
.colchona-page h2,
.colchona-page h3,
.colchona-page h4,
.colchona-page .h1,
.colchona-page .h2,
.colchona-page .h3 {
  font-family: "Gilda Display", serif;
  color: var(--navy);
  font-weight: 400;
  line-height: 1.15;
}

.colchona-page a { color: var(--navy); }
.colchona-page a:hover { color: var(--gold); }

/* Contenedor: mismo ancho que el diseño (1280) */
.colchona-page #wrapper .container,
.colchona-page #content-wrapper .container,
.colchona-page #main .container {
  max-width: 1280px;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 1360px) {
  .colchona-page #wrapper .container { max-width: 100%; }
}

.colchona-page #wrapper {
  background: var(--white);
  padding-top: 8px;
  padding-bottom: 56px;
}

/* --------------------------------------------------------------------------
   Distribución de columnas (páginas secundarias)
   El layout maestro marca #content-wrapper como col-lg-3 y mantiene columnas
   laterales que quedan vacías en la mayoría de páginas, dejando el contenido
   estrecho y desplazado hacia un lateral. Reequilibramos: las columnas sin
   contenido se colapsan y el contenido ocupa el espacio disponible, quedando
   centrado dentro del contenedor. Cuando hay una columna lateral con módulos
   (categorías, filtros) esta conserva su ancho y el contenido ocupa el resto.
   -------------------------------------------------------------------------- */
/* Una columna lateral se considera "con contenido real" solo si trae facetas
   de filtrado, árbol de categorías o un bloque de módulo. El módulo de filtros
   deja un wrapper vacío (#search_filters_wrapper) cuando la categoría no tiene
   facetas: en ese caso la columna se colapsa para no dejar hueco a la izquierda. */
.colchona-page #left-column:not(:has(.facet)):not(:has(.block-categories)):not(:has(.block)),
.colchona-page #right-column:not(:has(.facet)):not(:has(.block-categories)):not(:has(.block)) {
  display: none;
}
/* La rejilla de este tema es a base de floats: cuando NO queda ninguna columna
   lateral con contenido, el contenido ocupa el 100% (y queda centrado en el
   contenedor). Si hay filtros/categorías reales, se respeta el ancho 75/25. */
.colchona-page .row:has(> #content-wrapper):not(:has(#left-column .facet)):not(:has(#left-column .block-categories)):not(:has(#left-column .block)):not(:has(#right-column .facet)):not(:has(#right-column .block-categories)):not(:has(#right-column .block)) #content-wrapper {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.colchona-page .breadcrumb {
  background: transparent;
  padding: 22px 0 6px;
  margin: 0 0 18px;
  border: none;
}
.colchona-page .breadcrumb ol { padding: 0; margin: 0; }
.colchona-page .breadcrumb li { display: inline-block; }
.colchona-page .breadcrumb li a,
.colchona-page .breadcrumb li span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.colchona-page .breadcrumb li a:hover { color: var(--gold); }
.colchona-page .breadcrumb li:last-child span { color: var(--navy); }
.colchona-page .breadcrumb li::after {
  content: "/";
  margin: 0 10px;
  color: var(--border);
}
.colchona-page .breadcrumb li:last-child::after { content: ""; margin: 0; }

/* --------------------------------------------------------------------------
   Cabecera / títulos de página (banda tipo sección del diseño)
   -------------------------------------------------------------------------- */
.colchona-page .page-header,
.colchona-page #content .page-title,
.colchona-page #main > .page-header {
  margin: 0 0 28px;
}
.colchona-page .page-header h1,
.colchona-page h1.page-heading,
.colchona-page .page-title {
  font-size: 40px;
  color: var(--navy);
  margin: 0 0 6px;
}
.colchona-page #left-column .block .title,
.colchona-page #right-column .block .title,
.colchona-page .block-categories .h6,
.colchona-page #search_filters .h6 {
  font-family: "Gilda Display", serif;
  font-size: 20px;
  color: var(--navy);
  font-weight: 400;
}

/* Eyebrow reutilizable (si se añade en plantillas) */
.colchona-page .eyebrow {
  display: block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Botones — navy / gold, mayúsculas (como el diseño)
   -------------------------------------------------------------------------- */
.colchona-page .btn,
.colchona-page .btn-primary,
.colchona-page .btn-secondary,
.colchona-page .btn-tertiary,
.colchona-page button.btn {
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 48px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.colchona-page .btn-primary,
.colchona-page .add-to-cart,
.colchona-page #submit-login,
.colchona-page .form-footer .btn,
.colchona-page .page-cart .cart-detailed-actions .btn,
.colchona-page .checkout .btn-primary {
  background: var(--navy);
  border: 1px solid var(--navy);
  color: #fff;
}
.colchona-page .btn-primary:hover,
.colchona-page .add-to-cart:hover,
.colchona-page #submit-login:hover,
.colchona-page .form-footer .btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.colchona-page .btn-secondary,
.colchona-page .btn-tertiary,
.colchona-page .btn-outline {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
}
.colchona-page .btn-secondary:hover,
.colchona-page .btn-tertiary:hover {
  background: var(--navy);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Listado de productos (categoría, búsqueda, novedades, ofertas)
   -------------------------------------------------------------------------- */
.colchona-page #js-product-list-header,
.colchona-page #js-product-list-top {
  margin-bottom: 18px;
}
.colchona-page .products-selection {
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 26px;
}
.colchona-page .total-products p,
.colchona-page .total-products {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.colchona-page .products,
.colchona-page .products.row {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-left: 0;
  margin-right: 0;
}
.colchona-page .products .product,
.colchona-page .products .js-product {
  flex: 0 0 calc((100% - 78px) / 4);
  max-width: calc((100% - 78px) / 4);
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1100px) {
  .colchona-page .products .product { flex-basis: calc((100% - 52px) / 3); max-width: calc((100% - 52px) / 3); }
}
@media (max-width: 820px) {
  .colchona-page .products .product { flex-basis: calc((100% - 26px) / 2); max-width: calc((100% - 26px) / 2); }
}
@media (max-width: 520px) {
  .colchona-page .products .product { flex-basis: 100%; max-width: 100%; }
}

.colchona-page .product-miniature .thumbnail-container {
  box-shadow: none;
  border: none;
  height: auto;
  width: 100%;
  margin: 0;
}
.colchona-page .product-miniature .thumbnail-top {
  position: relative;
}
.colchona-page .product-miniature .product-thumbnail {
  display: block;
  aspect-ratio: 1 / 1.15;
  background: #fff;
  overflow: hidden;
  border: 1px solid var(--border);
}
.colchona-page .product-miniature .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s ease;
}
.colchona-page .product-miniature:hover .product-thumbnail img { transform: scale(1.05); }
.colchona-page .product-miniature .product-description { padding: 16px 2px 0; text-align: center; }
.colchona-page .product-miniature .product-title { margin: 0 0 6px; }
.colchona-page .product-miniature .product-title a {
  font-family: "Gilda Display", serif;
  font-size: 18px;
  color: var(--navy);
  font-weight: 400;
}
.colchona-page .product-miniature .product-title a:hover { color: var(--gold); }
.colchona-page .product-miniature .price {
  color: var(--gold);
  font-weight: 700;
  font-size: 16px;
}
.colchona-page .product-miniature .regular-price {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
  margin-right: 6px;
}
.colchona-page .product-miniature .discount-product,
.colchona-page .product-flag {
  background: var(--gold);
  color: #fff;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
.colchona-page .highlighted-informations { border: none; box-shadow: none; }

/* Filtros / facetas */
.colchona-page #search_filters,
.colchona-page .block-categories {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px;
  box-shadow: none;
  background: var(--cream);
}
.colchona-page #search_filters .facet {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}
.colchona-page #search_filters .facet .facet-title,
.colchona-page #search_filters .h6 {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
}
.colchona-page .facet .facet-label a { color: var(--text); }
.colchona-page .facet .facet-label a:hover { color: var(--gold); }

/* Paginación */
.colchona-page .pagination { margin: 34px 0 0; }
.colchona-page .pagination .page-list { box-shadow: none; padding: 0; gap: 6px; display: flex; }
.colchona-page .pagination .page-list li a,
.colchona-page .pagination .page-list li span {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--navy);
  font-weight: 600;
}
.colchona-page .pagination .page-list li.current a,
.colchona-page .pagination .page-list li a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Ordenar / desplegables */
.colchona-page .products-sort-order .select-title,
.colchona-page .form-control {
  border-radius: 0;
  border: 1px solid var(--border);
  min-height: 46px;
  box-shadow: none;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Cabecera de categoría + subcategorías
   Corrige: (1) el hueco vacío de .block-category (min-height 13.75rem de
   classic cuando la categoría no tiene portada/descripción) y (2) las
   subcategorías, que classic pinta como cajas cian de 5px vacías (sin
   miniatura) con el nombre suelto debajo. Las convertimos en botones limpios.
   -------------------------------------------------------------------------- */
/* (1) Sin reserva de 220px cuando el bloque de categoría va vacío */
.colchona-page .block-category {
  min-height: 0;
  margin-bottom: 30px;
}
.colchona-page .block-category > h1.h1 {
  margin: 0 0 18px;
}
/* Descripción de categoría: jerarquía clara, espaciado y longitud de línea
   cómoda (los sub-encabezados vienen marcados como <h1>; los rebajamos). */
.colchona-page #category-description {
  max-width: 860px;
  color: var(--text);
}
.colchona-page #category-description > :first-child { margin-top: 0; }
.colchona-page #category-description h1,
.colchona-page #category-description h2,
.colchona-page #category-description h3,
.colchona-page #category-description .h1 {
  font-family: "Gilda Display", serif;
  font-size: 21px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  margin: 1.9em 0 .55em;
}
.colchona-page #category-description p {
  margin: 0 0 1.15em;
  line-height: 1.8;
  color: var(--text);
}

/* (2) Bloque de subcategorías: sin card, título con el estilo del diseño */
.colchona-page #subcategories {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 6px 0 30px;
}
.colchona-page #subcategories .subcategory-heading {
  font-family: "Gilda Display", serif;
  color: var(--navy);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 16px;
}
.colchona-page .subcategories-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.colchona-page .subcategories-list > li {
  margin: 0 !important;
  padding: 0;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto;
}
/* Ocultar el placeholder de imagen cuando la subcategoría no tiene miniatura */
.colchona-page #subcategories .subcategory-image:not(:has(img)) {
  display: none;
}
/* Si hay miniatura, marco sobrio (sustituye el borde cian de 5px) */
.colchona-page #subcategories .subcategory-image {
  padding: 0;
  margin-bottom: 8px;
}
.colchona-page #subcategories .subcategory-image a {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 6px;
}
/* Nombre de subcategoría como botón, coherente con .btn del tema */
.colchona-page .subcategories-list h5 {
  margin: 0;
  width: auto !important;
  min-width: 0 !important;
}
.colchona-page .subcategories-list .subcategory-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.colchona-page .subcategories-list .subcategory-name:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
/* La descripción SEO por subcategoría permanece oculta */
.colchona-page .subcategories-list .cat_desc {
  display: none;
}

/* --------------------------------------------------------------------------
   Ficha de producto
   -------------------------------------------------------------------------- */
.colchona-page .product-container { margin-top: 8px; }
.colchona-page .product-information .h1,
.colchona-page .page-product h1.h1 {
  font-size: 34px;
  color: var(--navy);
}
.colchona-page .product-prices .current-price span,
.colchona-page .product-price,
.colchona-page .current-price-value {
  color: var(--gold);
  font-weight: 700;
}
.colchona-page .product-prices .regular-price { color: var(--muted); }
.colchona-page .product-quantity .qty .input-group,
.colchona-page .product-add-to-cart .qty { border-radius: 0; }
.colchona-page .product-actions .add-to-cart {
  width: 100%;
  max-width: 320px;
}
.colchona-page .product-flags .product-flag {
  background: var(--gold);
  color: #fff;
}
.colchona-page .tabs { box-shadow: none; border: 1px solid var(--border); border-radius: 0; }
.colchona-page .tabs .nav-tabs { border-bottom: 1px solid var(--border); }
.colchona-page .tabs .nav-tabs .nav-link {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  font-weight: 700;
  border: none;
}
.colchona-page .tabs .nav-tabs .nav-link.active {
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
}
.colchona-page .product-features dt,
.colchona-page .product-features .name { color: var(--navy); font-weight: 600; }

/* Miniaturas relacionadas / "también podría gustarte" reutilizan .product */

/* --------------------------------------------------------------------------
   Carrito
   -------------------------------------------------------------------------- */
.colchona-page .cart-grid-body .card,
.colchona-page .cart-grid-right .card,
.colchona-page .cart-summary,
.colchona-page .cart-container .card {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.colchona-page .cart-summary-line .value,
.colchona-page .cart-total .value { color: var(--navy); font-weight: 700; }
.colchona-page .product-line-info .label,
.colchona-page .product-line-info a { color: var(--navy); }
.colchona-page .cart-detailed-actions .btn { width: 100%; }

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */
.colchona-page #checkout .card,
.colchona-page .checkout-step,
.colchona-page #order-summary-content .card {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.colchona-page .checkout-step .step-title,
.colchona-page .checkout-step .h3 {
  font-family: "Gilda Display", serif;
  color: var(--navy);
  font-weight: 400;
}
.colchona-page .checkout-step.-current .step-title { color: var(--navy); }
.colchona-page .step-number,
.colchona-page .checkout-step.-current .step-number {
  background: var(--gold);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Cuenta de cliente / login / registro
   -------------------------------------------------------------------------- */
.colchona-page .page-authentication #content,
.colchona-page .page-customer-account #content,
.colchona-page #authentication .card,
.colchona-page .page-my-account #content {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
/* Login / registro / recuperar contraseña: tarjeta centrada y contenida */
.colchona-page .page-authentication #content,
.colchona-page .page-password #content {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
}
.colchona-page .page-my-account #content .links a {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  transition: border-color .25s ease, color .25s ease;
}
.colchona-page .page-my-account #content .links a:hover { border-color: var(--gold); }
.colchona-page .page-my-account #content .links a i,
.colchona-page .page-my-account #content .links a span.link-item { color: var(--navy); }
.colchona-page .page-my-account #content .links a:hover i { color: var(--gold); }
.colchona-page .no-account a,
.colchona-page .forgot-password a { color: var(--gold); font-weight: 600; }

/* --------------------------------------------------------------------------
   Formularios (contacto, registro, direcciones)
   -------------------------------------------------------------------------- */
.colchona-page label,
.colchona-page .form-control-label {
  color: var(--navy);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
}
.colchona-page input.form-control,
.colchona-page textarea.form-control,
.colchona-page select.form-control,
.colchona-page .input-group .form-control {
  border-radius: 0;
  border: 1px solid var(--border);
  min-height: 46px;
  box-shadow: none;
}
.colchona-page input.form-control:focus,
.colchona-page textarea.form-control:focus,
.colchona-page select.form-control:focus {
  border-color: var(--gold);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   CMS (Historia, páginas de contenido)
   -------------------------------------------------------------------------- */
.colchona-page #cms #content.page-content,
.colchona-page #cms .cms-block,
.colchona-page .cms-content {
  border: none;
  box-shadow: none;
  background: transparent;
  line-height: 1.8;
  color: var(--text);
}
/* Longitud de línea cómoda y bloque centrado para lectura */
.colchona-page #cms #content.page-content,
.colchona-page #cms .cms-content {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.colchona-page #cms .page-header,
.colchona-page #cms h1.page-heading {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.colchona-page #cms .page-content h2,
.colchona-page #cms .page-content h3 { margin-top: 1.4em; }
.colchona-page #cms img { border-radius: 0; }

/* --------------------------------------------------------------------------
   Historia (CMS id 9) — retrato como cabecera centrada + galería de archivo
   Sólo reestiliza el HTML del CMS (clases .titulohistoria/.infoscenter/
   .mapaindi/.bottom). No cambia el contenido ni las imágenes.
   -------------------------------------------------------------------------- */
/* Rótulos centrados (la clase ".infoscenter" ya expresa esa intención) */
.colchona-page .page-cms-9 .titulohistoria,
.colchona-page .page-cms-9 .infoscenter { text-align: center; margin: 0; }

/* Eyebrow "HISTORIA" + subtítulo "Estepa, año 1850" */
.colchona-page .page-cms-9 .titulohistoria { margin-bottom: 4px; }
.colchona-page .page-cms-9 .titulohistoria .infoscenter:first-child {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.colchona-page .page-cms-9 .titulohistoria .infoscenter + .infoscenter {
  font-size: 14px;
  letter-spacing: .04em;
}

/* Retrato de la fundadora como cabecera: centrado, contenido y con relieve */
.colchona-page .page-cms-9 p:has(> img[src*="micaelaruiztellez"]) { margin: 0; }
.colchona-page .page-cms-9 img[src*="micaelaruiztellez"] {
  display: block;
  width: auto;
  height: auto;
  max-width: 280px;
  margin: 26px auto 16px;
  filter: drop-shadow(0 16px 34px rgba(7, 22, 75, .20));
}

/* "MICAELA RUIZ TÉLLEZ" como título serif; "fundadora" como pie discreto */
.colchona-page .page-cms-9 > .infoscenter:not([style]) {
  font-family: "Gilda Display", serif;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.2;
}
.colchona-page .page-cms-9 > .infoscenter[style] {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Bloque de texto a dos columnas: separación cómoda y sin desbordes */
.colchona-page .page-cms-9 .container {
  padding-left: 0;
  padding-right: 0;
}
.colchona-page .page-cms-9 .container [class*="col-"] p:first-child { margin-top: 0; }

/* "ARCHIVO DE IMÁGENES": encabezado de sección con filete dorado */
.colchona-page .page-cms-9 .container ~ .infoscenter {
  font-family: "Gilda Display", serif;
  color: var(--navy);
  font-size: 26px;
  margin: 52px 0 26px;
  padding-bottom: 18px;
}
.colchona-page .page-cms-9 .container ~ .infoscenter::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin: 18px auto 0;
}

/* Galería del archivo: mosaico uniforme, responsive, con marco tipo lámina */
.colchona-page .page-cms-9 .bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 0 0 22px;
}
.colchona-page .page-cms-9 .bottom > div {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  float: none;
}
.colchona-page .page-cms-9 .mapaindi {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  padding: 12px;
  box-shadow: 0 8px 22px rgba(7, 22, 75, .07);
  transition: transform .35s ease, box-shadow .35s ease;
}
.colchona-page .page-cms-9 .mapaindi:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(7, 22, 75, .14);
}
@media (max-width: 600px) {
  .colchona-page .page-cms-9 .bottom { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Noticias (CMS id 17) — vídeo centrado + rejilla "Otras noticias"
   Estructura inyectada en el contenido del CMS (.noticias-video / .noticias-
   grid / .noticia-card). Reestilizado con el lenguaje del tema (marcos finos,
   navy/gold, Gilda Display), en línea con la rejilla de productos.
   -------------------------------------------------------------------------- */
/* Esta página luce mejor algo más ancha que el texto CMS estándar */
.colchona-page #cms #content.page-cms-17 {
  max-width: 1120px;
}

/* Vídeo centrado y responsive (16:9) */
.colchona-page .page-cms-17 .noticias-video {
  max-width: 760px;
  margin: 8px auto 4px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(7, 22, 75, .10);
}
.colchona-page .page-cms-17 .noticias-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Encabezado de sección "Otras noticias" con filete superior */
.colchona-page .page-cms-17 .noticias-heading {
  font-family: "Gilda Display", serif;
  color: var(--navy);
  font-weight: 400;
  font-size: 30px;
  text-align: center;
  margin: 48px 0 30px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

/* Carrusel de noticias: pista con scroll horizontal + flechas */
.colchona-page .page-cms-17 .noticias-carousel {
  position: relative;
}
.colchona-page .page-cms-17 .noticias-track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 18px;
  scrollbar-width: none;            /* Firefox */
}
.colchona-page .page-cms-17 .noticias-track::-webkit-scrollbar { display: none; }
.colchona-page .page-cms-17 .noticia-card {
  flex: 0 0 320px;
  max-width: 320px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .colchona-page .page-cms-17 .noticia-card { flex-basis: 300px; max-width: 300px; }
}
@media (max-width: 560px) {
  .colchona-page .page-cms-17 .noticia-card { flex-basis: 84%; max-width: 84%; }
}

/* Flechas de navegación */
.colchona-page .page-cms-17 .noticias-nav {
  position: absolute;
  top: 34%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(7, 22, 75, .12);
  transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.colchona-page .page-cms-17 .noticias-nav:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.colchona-page .page-cms-17 .noticias-prev { left: -14px; }
.colchona-page .page-cms-17 .noticias-next { right: -14px; }
.colchona-page .page-cms-17 .noticias-nav.is-disabled {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 600px) {
  .colchona-page .page-cms-17 .noticias-prev { left: 2px; }
  .colchona-page .page-cms-17 .noticias-next { right: 2px; }
}
.colchona-page .page-cms-17 .noticia-thumb {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  aspect-ratio: 4 / 3;
}
.colchona-page .page-cms-17 .noticia-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.colchona-page .page-cms-17 .noticia-card:hover .noticia-thumb img {
  transform: scale(1.05);
}
.colchona-page .page-cms-17 .noticia-body {
  padding: 16px 2px 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.colchona-page .page-cms-17 .noticia-date {
  display: block;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.colchona-page .page-cms-17 .noticia-title {
  margin: 0 0 16px;
}
.colchona-page .page-cms-17 .noticia-title a {
  font-family: "Gilda Display", serif;
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy);
  font-weight: 400;
}
.colchona-page .page-cms-17 .noticia-title a:hover { color: var(--gold); }
.colchona-page .page-cms-17 .noticia-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--gold);
  transition: color .25s ease;
}
.colchona-page .page-cms-17 .noticia-link:hover { color: var(--gold); }

/* Detalle de noticia (páginas CMS 32–48 generadas desde el blog).
   El título se pinta como H1 de .page-header (ya estilizado más arriba). */
/* El contenedor de la noticia se centra con flexbox (fiable ante el layout
   de classic), acotado sólo a páginas de noticia mediante :has(.noticia-detalle) */
.colchona-page .page-content:has(> .noticia-detalle) {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  width: auto;
}
.colchona-page .noticia-detalle {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
/* Título de la noticia centrado (el H1 va en .page-header, fuera del artículo) */
.colchona-page.cms-id-32 .page-header,
.colchona-page.cms-id-33 .page-header,
.colchona-page.cms-id-34 .page-header,
.colchona-page.cms-id-35 .page-header,
.colchona-page.cms-id-36 .page-header,
.colchona-page.cms-id-37 .page-header,
.colchona-page.cms-id-38 .page-header,
.colchona-page.cms-id-39 .page-header,
.colchona-page.cms-id-40 .page-header,
.colchona-page.cms-id-41 .page-header,
.colchona-page.cms-id-42 .page-header,
.colchona-page.cms-id-43 .page-header,
.colchona-page.cms-id-44 .page-header,
.colchona-page.cms-id-45 .page-header,
.colchona-page.cms-id-46 .page-header,
.colchona-page.cms-id-47 .page-header,
.colchona-page.cms-id-48 .page-header {
  text-align: center;
}
.colchona-page .noticia-detalle .nd-date {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.colchona-page .noticia-detalle .nd-body {
  line-height: 1.85;
  color: var(--text);
  text-align: left;
}
.colchona-page .noticia-detalle .nd-body p { margin: 0 0 1.1em; }
.colchona-page .noticia-detalle .nd-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 8px 22px rgba(7, 22, 75, .07);
}
.colchona-page .noticia-detalle .nd-back {
  margin: 44px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.colchona-page .noticia-detalle .nd-back a {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color .25s ease;
}
.colchona-page .noticia-detalle .nd-back a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */
.colchona-page #contact .contact-rich,
.colchona-page #contact .contact-form,
.colchona-page .page-contact .card {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
.colchona-page #contact .contact-rich .icon .material-icons { color: var(--gold); }
/* Formulario de contacto (sin columnas propias): centrado y contenido */
.colchona-page#contact .login-form,
.colchona-page#contact .form-fields,
.colchona-page#contact .form-footer {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
/* Botón "Seleccionar archivo" del adjunto: navy en vez del cian de classic */
.colchona-page#contact .group-span-filestyle .btn,
.colchona-page#contact .form-fields .btn-default {
  background: var(--navy);
  border: 1px solid var(--navy);
  color: #fff;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.colchona-page#contact .group-span-filestyle .btn:hover,
.colchona-page#contact .form-fields .btn-default:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
/* Contenido de Tiendas (CMS) sobre el formulario: imágenes/mapas responsive */
.colchona-page#contact .tiendas-info { margin: 0 auto 8px; }
/* Nombre de la tienda como encabezado (Estepa / Sevilla) */
.colchona-page#contact .tienda-nombre {
  font-family: "Gilda Display", serif;
  color: var(--navy);
  font-weight: 400;
  font-size: 36px;
  text-align: center;
  margin: 0 0 6px;
}
/* Ocultar la navegación de pestañas "TIENDAS / Estepa | Sevilla" del CMS:
   confusa aquí, ya que cada página muestra una sola tienda. */
.colchona-page#contact .tienda-cms > :first-child,
.colchona-page#contact .tienda-cms > .col-lg-6 {
  display: none;
}
/* Acordeón "Cómo llegar desde ..." — cada ruta es un desplegable */
.colchona-page#contact .ruta-toggle {
  cursor: pointer;
  position: relative;
  border: 1px solid var(--border);
  background: var(--cream);
  padding: 15px 48px 15px 22px !important;
  margin: 0 auto 10px !important;
  max-width: 640px;
  text-align: left !important;
  font-family: "Gilda Display", serif;
  font-size: 19px !important;
  color: var(--navy) !important;
  transition: border-color .2s ease, background .2s ease;
}
.colchona-page#contact .ruta-toggle span,
.colchona-page#contact .ruta-toggle a { color: var(--navy) !important; }
.colchona-page#contact .ruta-toggle:hover { border-color: var(--gold); background: #fff; }
.colchona-page#contact .ruta-toggle::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease;
}
.colchona-page#contact .ruta-toggle.open::after { transform: translateY(-30%) rotate(-135deg); }
.colchona-page#contact .ruta-panel { margin-bottom: 26px; }
/* El contenido CMS usa columnas flotantes: las contenemos para que la sección
   tenga su altura real y el formulario quede realmente debajo. */
.colchona-page#contact .tiendas-info::after { content: ""; display: table; clear: both; }
.colchona-page#contact .tiendas-info .col-md-12,
.colchona-page#contact .tiendas-info .nombreciudades,
.colchona-page#contact .tiendas-info .container { overflow: hidden; }
.colchona-page#contact .tiendas-info img,
.colchona-page#contact .tiendas-info iframe { max-width: 100%; }
.colchona-page#contact .tiendas-info .mapaindi { height: auto; border: 1px solid var(--border); }
.colchona-page#contact .tiendas-info .infos,
.colchona-page#contact .tiendas-info h3.infos {
  font-family: "Gilda Display", serif;
  color: var(--navy);
  font-weight: 400;
}
/* Separación clara entre el bloque de tiendas y el formulario de contacto */
.colchona-page#contact .contact-form-section {
  max-width: 820px;
  margin: 46px auto 0;
  padding-top: 42px;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Tablas (pedidos, direcciones, devoluciones)
   -------------------------------------------------------------------------- */
.colchona-page table.table { border: 1px solid var(--border); }
.colchona-page table.table thead th {
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
}
.colchona-page table.table td { border-color: var(--border); }

/* --------------------------------------------------------------------------
   Notificaciones / alertas
   -------------------------------------------------------------------------- */
.colchona-page .alert { border-radius: 0; border-width: 1px; }
.colchona-page .alert-success { border-color: #cfe3d0; }
.colchona-page .notifications-container .container { max-width: 1280px; }

/* --------------------------------------------------------------------------
   404 / página no encontrada
   -------------------------------------------------------------------------- */
.colchona-page.page-not-found #content,
.colchona-page #pagenotfound #content {
  text-align: center;
  padding: 60px 20px;
}

/* El footer en secundarias usa el mismo diseño (navy) que la home.
   Restauramos los colores claros (las reglas globales .colchona-page a/h3 los
   pintaban en navy, quedando invisibles sobre el fondo navy). */
.colchona-page #footer {
  background: var(--navy);
  color: var(--white);
}
.colchona-page #footer p,
.colchona-page #footer a {
  color: rgba(255, 255, 255, 0.68);
}
.colchona-page #footer a:hover {
  color: var(--gold);
}
.colchona-page #footer h3 {
  color: var(--white);
  font-family: "Montserrat", sans-serif;
}
.colchona-page #footer .footer-help strong {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Carrito ligero de La Colchona
   Recuadro "¿Deseas añadirlo al carrito?" en ficha de producto + página /carrito
   -------------------------------------------------------------------------- */
.colchona-page .colchona-cart-box {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-width: 420px;
}
.colchona-page .colchona-cart-box__q {
  margin: 0 0 14px;
  font-family: "Gilda Display", serif;
  font-size: 18px;
  color: var(--navy);
}
.colchona-page .colchona-cart-box__action {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.colchona-page .colchona-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 40px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .12s ease;
}
.colchona-page .colchona-add-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.colchona-page .colchona-add-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.colchona-page .colchona-add-btn:active { transform: scale(.97); }
.colchona-page .colchona-add-btn.added { background: var(--navy); border-color: var(--navy); }
.colchona-page .colchona-add-feedback {
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
}

/* Página del carrito (CMS 49 -> #colchona-cart-page) */
.colchona-page .colchona-cart-wrap { max-width: 860px; margin: 0 auto; }
.colchona-page #colchona-cart-page { color: var(--text); }
.colchona-page .cart-empty {
  text-align: center;
  padding: 48px 20px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: var(--cream);
}
.colchona-page .cart-empty p {
  margin: 0 0 18px;
  font-family: "Gilda Display", serif;
  font-size: 20px;
  color: var(--navy);
}
.colchona-page .cart-continue {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  background: var(--navy);
  color: #fff !important;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.colchona-page .cart-continue:hover { background: var(--gold); }
.colchona-page .cart-lines { list-style: none; margin: 0; padding: 0; }
.colchona-page .cart-line {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}
.colchona-page .cart-line__img {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  display: block;
}
.colchona-page .cart-line__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.colchona-page .cart-line__info { flex: 1 1 auto; min-width: 0; }
.colchona-page .cart-line__name {
  display: block;
  font-family: "Gilda Display", serif;
  font-size: 18px;
  color: var(--navy) !important;
  margin-bottom: 10px;
}
.colchona-page .cart-line__name:hover { color: var(--gold) !important; }
.colchona-page .cart-line__qty { display: inline-flex; align-items: center; gap: 0; }
.colchona-page .cart-line__qty .qty-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.colchona-page .cart-line__qty .qty-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.colchona-page .cart-line__qty .qty-val {
  min-width: 44px;
  height: 32px;
  display: grid;
  place-items: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  color: var(--navy);
}
.colchona-page .cart-line__remove {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .2s ease, color .2s ease;
}
.colchona-page .cart-line__remove:hover { background: #f4e9e9; color: #b23; }
.colchona-page .cart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.colchona-page .cart-foot__count {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .03em;
}
@media (max-width: 560px) {
  .colchona-page .cart-line { flex-wrap: wrap; }
  .colchona-page .cart-line__img { width: 64px; height: 64px; }
}

/* =====================================================================
   La Colchona — ajustes carrito nativo (añadido)
   ===================================================================== */

/* --- Icono de carrito en la cabecera + badge de nº de productos --- */
.header-actions .header-cart { display:inline-flex; align-items:center; }
.header-actions .header-cart #_desktop_cart,
.header-actions .header-cart .blockcart,
.header-actions .header-cart .header { display:inline-flex; align-items:center; }
.header-actions .header-cart .header a.header-cart-link {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.header-actions .header-cart .header a.header-cart-link > span:not(.cart-products-count) { display:none; }
.header-actions .header-cart .cart-products-count {
  position:absolute; top:-7px; right:-9px;
  min-width:18px; height:18px; padding:0 4px; box-sizing:border-box;
  background:#b79a5a; color:#fff; border-radius:9px;
  font-size:11px; font-weight:700; line-height:18px; text-align:center;
}
.header-actions .header-cart .cart-products-count[hidden] { display:none; }

/* --- Selector de cantidad nativo (bootstrap-touchspin) alineado --- */
.bootstrap-touchspin { display:inline-flex !important; align-items:stretch; width:auto; vertical-align:middle; }
.bootstrap-touchspin .input-group-addon { display:none !important; }
.bootstrap-touchspin > input,
.bootstrap-touchspin .form-control,
.bootstrap-touchspin input[type="number"] {
  width:48px; height:40px; min-height:40px; flex:0 0 48px;
  text-align:center; padding:0 4px; margin:0; float:none;
  border:1px solid #d9d9d9; border-right:0; border-radius:4px 0 0 4px;
  background:#fff; color:#07164b; font-size:15px; box-shadow:none;
  -moz-appearance:textfield; appearance:textfield;
}
.bootstrap-touchspin input[type="number"]::-webkit-outer-spin-button,
.bootstrap-touchspin input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bootstrap-touchspin .input-group-btn-vertical { display:inline-flex; flex-direction:column; width:26px; }
.bootstrap-touchspin .input-group-btn-vertical > .btn,
.bootstrap-touchspin .bootstrap-touchspin-up,
.bootstrap-touchspin .bootstrap-touchspin-down {
  width:26px; height:20px; min-height:0; padding:0; margin:0; box-shadow:none;
  border:1px solid #d9d9d9; background:#f6f4ee;
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
}
.bootstrap-touchspin .bootstrap-touchspin-up { border-radius:0 4px 0 0; border-bottom:0; }
.bootstrap-touchspin .bootstrap-touchspin-down { border-radius:0 0 4px 0; }
.bootstrap-touchspin .input-group-btn-vertical > .btn:hover { background:#efe6d2; }
/* Flechas dibujadas por CSS (no dependen de la fuente de iconos) */
.bootstrap-touchspin .input-group-btn-vertical i { display:none; }
.bootstrap-touchspin .input-group-btn-vertical > .btn::before {
  content:""; display:block; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
}
.bootstrap-touchspin .bootstrap-touchspin-up::before   { border-bottom:5px solid #3a3a3a; }
.bootstrap-touchspin .bootstrap-touchspin-down::before { border-top:5px solid #3a3a3a; }

/* =====================================================================
   La Colchona — refinamientos v2 (carrito cabecera + flechas cantidad)
   ===================================================================== */

/* --- Cabecera: dejar el carrito como icono limpio y que NO se recorte --- */
.header-actions { padding-right: 16px; box-sizing: border-box; }
.header-actions .header-cart,
.header-actions .header-cart #_desktop_cart,
.header-actions .header-cart .blockcart,
.header-actions .header-cart .blockcart > .header {
  position: static !important; background: transparent !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; min-width: 0 !important; border: 0 !important;
  backdrop-filter: none !important; width: auto !important; height: auto !important;
}
.header-actions .header-cart .header-cart-link {
  border-radius: 0 !important; background: transparent !important;
  width: auto; height: auto; padding: 0; overflow: visible;
}
.header-actions .header-cart .cart-products-count {
  position: absolute; top: -7px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
  background: #b79a5a; color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* --- Flechas de cantidad: chevrons finos (no triángulos) --- */
.bootstrap-touchspin .input-group-btn-vertical > .btn::before {
  content: ""; display: block; width: 6px; height: 6px; border: 0;
  border-right: 2px solid #07164b; border-bottom: 2px solid #07164b;
  border-radius: 1px;
}
.bootstrap-touchspin .bootstrap-touchspin-up::before   { transform: rotate(-135deg); margin-top: 3px; }
.bootstrap-touchspin .bootstrap-touchspin-down::before { transform: rotate(45deg);  margin-bottom: 3px; }
.bootstrap-touchspin .input-group-btn-vertical > .btn {
  background: #fff; transition: background .15s ease;
}
.bootstrap-touchspin .input-group-btn-vertical > .btn:hover { background: #f2ece0; }
.bootstrap-touchspin .input-group-btn-vertical > .btn:hover::before { border-color: #b79a5a; }

/* =====================================================================
   La Colchona — menú hamburguesa móvil (v3)
   ===================================================================== */
.nav-toggle {
  display: none; width: 42px; height: 42px; padding: 8px; margin-left: 4px;
  border: 0; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: #07164b; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
header.header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
header.header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .header .nav {
    display: none !important; flex-direction: column; gap: 0;
    position: static; width: 100%; margin: 0; padding: 4px 0;
    background: #fff; border-top: 1px solid #ececec;
  }
  header.header.nav-open .nav { display: flex !important; }
  .header .nav a {
    display: block; width: 100%; padding: 14px 24px; margin: 0;
    text-align: left; font-size: 15px; border-bottom: 1px solid #f4f4f4;
  }
  .header .nav a:last-child { border-bottom: 0; }
}

/* =====================================================================
   La Colchona — cabecera móvil: logo visible y centrado (v4)
   ===================================================================== */
@media (max-width: 700px) {
  .header .header-top {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    max-height: none !important;
  }
  /* En móvil el buscador es solo la lupa (ahorra espacio para el logo) */
  .header .header-top .header-search { justify-self: start; }
  .header .header-top .header-search .search-trigger span { display: none; }
  /* Marca centrada con logo a tamaño razonable */
  .header .header-top .brand { justify-self: center; min-width: 0; }
  .header .header-top .logo {
    width: auto !important; height: auto;
    max-width: 150px; max-height: 50px;
  }
  .header .header-actions { gap: 8px !important; padding-right: 2px; }
  .header .header-actions .icon-button svg { width: 22px; height: 22px; }
}
@media (max-width: 380px) {
  .header .header-top .logo { max-width: 120px; }
  .header .header-actions { gap: 4px !important; }
}

/* =====================================================================
   La Colchona — pulido carrito + checkout (v5)
   ===================================================================== */

/* ---------- CARRITO ---------- */
.cart-grid { gap: 26px; }
.cart-grid-body .card,
.cart-grid-right .card,
.card.cart-summary {
  border: 1px solid #ececec; border-radius: 12px;
  box-shadow: 0 3px 16px rgba(7,22,75,.05);
}
.cart-grid-body .card-block, .cart-summary .card-block { padding: 22px 24px; }
.cart-item { padding: 6px 0; }
.cart-overview .cart-item + .cart-item { border-top: 1px solid #f1f1f1; }
.product-line-grid { align-items: center; }
.cart-item .product-image img,
.product-line-grid-left .product-image img {
  width: 100px; height: 100px; object-fit: contain;
  background: #faf8f2; border: 1px solid #eee; border-radius: 10px; padding: 8px;
}
.product-line-grid-body .label a,
.product-line-info a.label { font-weight: 600; color: #07164b; }
.product-price, .cart-summary .value, .cart-line__total { color: #07164b; font-weight: 600; }
.cart-summary-line { display: flex; justify-content: space-between; padding: 7px 0; }
.cart-summary .cart-total, .cart-total { border-top: 1px solid #ececec; margin-top: 8px; padding-top: 14px; }
.cart-detailed-actions .btn, .checkout a.btn {
  background: #07164b; border-color: #07164b; border-radius: 8px;
  padding: 13px 28px; font-weight: 600; letter-spacing: .03em;
}
.cart-detailed-actions .btn:hover, .checkout a.btn:hover { background: #0a1e63; }

/* ---------- CHECKOUT ---------- */
#checkout .checkout-step {
  border: 1px solid #ececec; border-radius: 12px; margin-bottom: 20px;
  box-shadow: 0 3px 16px rgba(7,22,75,.05); background: #fff;
}
#checkout .checkout-step .step-title,
#checkout .step-title { font-family: 'Gilda Display', serif; color: #07164b; letter-spacing: .01em; }
#checkout .checkout-step .content { padding: 6px 8px 14px; }

/* Campos de formulario */
#checkout .form-control,
#checkout input[type="text"], #checkout input[type="email"],
#checkout input[type="password"], #checkout input[type="tel"], #checkout select {
  height: 48px; border: 1px solid #d7d7d7; border-radius: 9px; background: #fff;
  padding: 0 14px; box-shadow: none; color: #07164b; font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#checkout textarea.form-control { height: auto; min-height: 90px; padding: 12px 14px; border-radius: 9px; }
#checkout .form-control:focus, #checkout select:focus, #checkout input:focus {
  border-color: #b79a5a; box-shadow: 0 0 0 3px rgba(183,154,90,.16); outline: none;
}
#checkout label, #checkout .form-control-label { color: #35406b; font-weight: 600; }

/* Botones */
#checkout .btn-primary, #checkout button[type="submit"].btn, #checkout .continue {
  background: #07164b; border-color: #07164b; border-radius: 9px;
  padding: 13px 30px; font-weight: 600; letter-spacing: .03em;
}
#checkout .btn-primary:hover, #checkout .continue:hover { background: #0a1e63; border-color: #0a1e63; }
#checkout .input-group-btn .btn,
#checkout .input-group-append .btn { background: #f2ece0; color: #07164b; border: 1px solid #d7d7d7; border-radius: 0 9px 9px 0; }

/* Radios / opciones (pedir como invitado, direcciones, pago) */
#checkout .custom-radio { border: 2px solid #c9c9c9; }
#checkout .custom-radio input:checked + span { background-color: #b79a5a; }
#checkout .payment-option, #checkout .delivery-option {
  border: 1px solid #ececec; border-radius: 10px; padding: 12px 16px; margin-bottom: 10px;
}
#checkout .payment-option:hover, #checkout .delivery-option:hover { border-color: #b79a5a; }

/* Resumen del pedido (derecha) + miniaturas */
#checkout .cart-summary, #checkout .card { border-radius: 12px; }
#checkout .order-summary__products img,
#checkout .media-list img, #checkout .order-line img, #order-items img {
  width: 64px; height: 64px; object-fit: contain;
  background: #faf8f2; border: 1px solid #eee; border-radius: 8px; padding: 4px;
}
#checkout .cart-summary-line { display: flex; justify-content: space-between; padding: 6px 0; }
#checkout .cart-summary-totals .cart-total { border-top: 1px solid #ececec; padding-top: 12px; }

/* =====================================================================
   La Colchona — cabecera reducida del checkout (v6)
   ===================================================================== */
body#checkout .header-nav {
  padding: 18px 0; margin-bottom: 26px;
  background: #fff; border-bottom: 1px solid #ececec;
}
body#checkout .header-nav .row { display: flex; align-items: center; }
body#checkout .header-nav #_desktop_logo { display: flex; align-items: center; }
body#checkout .header-nav #_desktop_logo img.logo {
  max-height: 56px; width: auto; height: auto;
}
body#checkout .header-nav #contact-link {
  margin: 0; color: #35406b; font-size: 14px; font-weight: 500;
}
body#checkout .header-nav #contact-link a { color: #07164b; font-weight: 700; text-decoration: none; }
body#checkout .header-nav #contact-link a:hover { color: #b79a5a; }

@media (max-width: 640px) {
  body#checkout .header-nav { padding: 14px 0; margin-bottom: 18px; }
  body#checkout .header-nav #_desktop_logo img.logo { max-height: 44px; }
}