:root {
      --navy: #07164b;
      --navy-2: #10276b;
      --blue-50: #f3f6fc;
      --cream: #fbfaf7;
      --white: #ffffff;
      --text: #1b1e2d;
      --muted: #6f7482;
      --border: #e7e9ef;
      --gold: #b79a5a;
      --shadow: 0 22px 70px rgba(7, 22, 75, 0.12);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background: var(--white);
      font-family: "Montserrat", sans-serif;
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 7px 18px;
      background: var(--navy);
      color: rgba(255, 255, 255, 0.92);
      text-align: center;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .topbar span {
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }

    .topbar span::before {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--gold);
    }

    .topbar span:first-child::before {
      display: none;
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255, 255, 255, 0.94);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(18px);
    }

    .header-top {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
      max-width: 1360px;
      max-height: 160px;
      margin: 0 auto;
      padding: 20px 40px 14px;
      overflow: hidden;
      opacity: 1;
      transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
    }

    .header.scrolled .header-top {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
    }

    .search-trigger {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      justify-self: start;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--navy);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      transition: color 0.3s ease;
    }

    .search-trigger svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
    }

    .search-trigger {
      cursor: pointer;
    }

    .search-trigger:hover {
      color: var(--gold);
    }

    /* Buscador desplegable del header */
    .header-search {
      justify-self: start;
      position: relative;
    }
    .header-search .search-form {
      display: none;
    }
    .header-search.open .search-trigger {
      display: none;
    }
    .header-search.open .search-form {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 44px;
      width: min(340px, 58vw);
      padding: 0 8px 0 16px;
      background: #f2f2f2;
      border: 1px solid transparent;
      border-radius: 30px;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .header-search.open .search-form:focus-within {
      background: #fff;
      border-color: var(--gold);
    }
    .header-search .search-form-ico svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: var(--muted);
      stroke-width: 1.7;
    }
    .header-search .search-input {
      flex: 1 1 auto;
      min-width: 0;
      border: 0;
      background: transparent;
      outline: none;
      font-family: inherit;
      font-size: 14px;
      color: var(--navy);
      padding: 0;
    }
    .header-search .search-input::placeholder {
      color: var(--muted);
    }
    .header-search .search-close {
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      padding: 0 6px;
      transition: color 0.2s ease;
    }
    .header-search .search-close:hover {
      color: var(--navy);
    }

    .header-actions {
      display: flex;
      align-items: center;
      justify-self: end;
      gap: 6px;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 34px;
      padding: 14px 29px 14px;
    }

    .nav a {
      position: relative;
      padding: 6px 0;
      color: var(--navy);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      white-space: nowrap;
      transition: color 0.3s ease;
      text-transform: uppercase;
    }

    .nav a::after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: "";
      width: 100%;
      height: 1px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s ease;
    }

    .nav a:hover {
      color: var(--gold);
    }

    .nav a:hover::after {
      transform: scaleX(1);
    }

    .brand {
      display: flex;
      align-items: center;
      justify-self: center;
    }

    .logo {
      width: 220px;
    }

    .header-actions {
      justify-content: flex-end;
      gap: 16px;
    }

    .icon-button {
      position: relative;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--navy);
      transition: color 0.3s ease, background 0.3s ease;
    }

    .icon-button:hover {
      background: var(--blue-50);
      color: var(--gold);
    }

    .icon-button svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
    }

    .cart-count {
      position: absolute;
      top: 2px;
      right: 2px;
      display: grid;
      place-items: center;
      min-width: 17px;
      height: 17px;
      padding: 0 4px;
      border: 2px solid var(--white);
      border-radius: 50%;
      background: var(--gold);
      color: var(--white);
      font-size: 9px;
      font-weight: 700;
    }

    .hero {
      position: relative;
      height: 650px;
      overflow: hidden;
      background: var(--navy);
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 56px 24px;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .hero-slide.active {
      opacity: 1;
    }

    .hero-slide::before {
      position: absolute;
      inset: 0;
      z-index: 1;
      content: "";
      background: linear-gradient(90deg, rgba(7, 22, 75, 0.86), rgba(7, 22, 75, 0.38), rgba(7, 22, 75, 0.18));
    }

    .hero-slide img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      width: min(1180px, 100%);
      color: var(--white);
    }

    .eyebrow {
      display: block;
      color: var(--gold);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3 {
      margin: 0;
      color: var(--navy);
      font-family: "Gilda Display", serif;
      font-weight: 400;
      line-height: 1.08;
    }

    .hero h1 {
      max-width: 650px;
      margin-top: 18px;
      color: var(--white);
      font-size: 54px;
    }

    .hero p {
      max-width: 520px;
      margin: 22px 0 0;
      color: rgba(255, 255, 255, 0.84);
      font-size: 17px;
      line-height: 1.8;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 24px;
      border: 1px solid var(--white);
      background: var(--white);
      color: var(--navy);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }

    .button.dark {
      border-color: var(--navy);
      background: var(--navy);
      color: var(--white);
    }

    .button.outline {
      background: transparent;
      color: var(--white);
    }

    .hero-dots {
      position: absolute;
      left: 50%;
      bottom: 28px;
      z-index: 3;
      display: flex;
      gap: 9px;
      transform: translateX(-50%);
    }

    .dot {
      width: 36px;
      height: 3px;
      padding: 0;
      border: 0;
      background: rgba(255, 255, 255, 0.42);
    }

    .dot.active {
      background: var(--white);
    }

    .service-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 0 34px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, var(--white), var(--cream));
    }

    .service {
      position: relative;
      padding: 30px 22px 28px;
      text-align: center;
    }

    .service:not(:last-child)::after {
      position: absolute;
      top: 26px;
      right: 0;
      bottom: 26px;
      width: 1px;
      content: "";
      background: linear-gradient(180deg, transparent, rgba(183, 154, 90, 0.45), transparent);
    }

    .service strong {
      display: block;
      color: var(--navy);
      font-family: "Gilda Display", serif;
      font-size: 25px;
      font-weight: 400;
      letter-spacing: 0.02em;
    }

    .service span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .section {
      padding: 82px 34px;
    }

    .section.newsletter-section {
      padding-bottom: 0;
      background: var(--navy);
    }

    .section.alt {
      background: var(--cream);
    }

    .section-inner {
      max-width: 1280px;
      margin: 0 auto;
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      gap: 28px;
      align-items: end;
      margin-bottom: 34px;
    }

    .section-heading h2 {
      max-width: 620px;
      margin-top: 10px;
      font-size: 38px;
    }

    .section-heading p {
      max-width: 420px;
      margin: 0;
      color: var(--muted);
      line-height: 1.7;
    }

    .featured-bar {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 28px;
      margin-bottom: 34px;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--border);
    }

    .featured-head .eyebrow {
      display: block;
    }

    .featured-head h2 {
      margin-top: 10px;
      color: var(--navy);
      font-size: 38px;
    }

    .featured-actions {
      display: flex;
      align-items: center;
      gap: 26px;
    }

    .featured-link {
      color: var(--navy);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--navy);
      padding-bottom: 4px;
      transition: color 0.25s ease, border-color 0.25s ease;
    }

    .featured-link:hover {
      color: var(--gold);
      border-color: var(--gold);
    }

    .categories {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .category-card {
      position: relative;
      height: 380px;
      min-height: 380px;
      overflow: hidden;
      background: var(--navy);
      box-shadow: var(--shadow);
    }

    .category-card::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(0deg, rgba(7, 22, 75, 0.82), rgba(7, 22, 75, 0.06));
    }

    .category-card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .category-card div {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 24px;
      z-index: 2;
      color: var(--white);
    }

    .category-card h3 {
      color: var(--white);
      font-size: 32px;
    }

    .category-card span {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .product-tools {
      display: flex;
      gap: 10px;
    }

    .arrow {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--white);
      color: var(--navy);
      font-size: 17px;
      transition: border-color 0.25s ease, color 0.25s ease;
    }

    .arrow:hover {
      border-color: var(--navy);
      color: var(--navy);
    }

    .product-slider {
      overflow: hidden;
    }

    .product-track {
      display: flex;
      gap: 24px;
      transition: transform 0.35s ease;
    }

    .product-card {
      position: relative;
      flex: 0 0 calc((100% - 72px) / 4);
      background: transparent;
    }

    .product-image {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1 / 1.15;
      overflow: hidden;
      background: #ffffff;
    }

    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.5s ease;
    }

    .product-card:hover .product-image img {
      transform: scale(1.04);
    }

    .product-info {
      padding: 16px 2px 0;
      text-align: left;
    }

    .product-info h3 {
      color: var(--navy);
      font-family: "Montserrat", sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.06em;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .price {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
    }

    .story-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 62px;
      align-items: center;
    }

    .story-media {
      position: relative;
      box-shadow: 0 24px 70px rgba(7, 22, 75, 0.08);
    }

    .story-media::after {
      position: absolute;
      right: -18px;
      bottom: -18px;
      z-index: -1;
      width: 58%;
      height: 58%;
      content: "";
      border: 1px solid rgba(183, 154, 90, 0.36);
    }

    .story-media img {
      width: 100%;
      height: 470px;
      object-fit: cover;
    }

    .story-content {
      max-width: 520px;
    }

    .story-kicker {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--gold);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .story-kicker::after {
      content: "";
      width: 54px;
      height: 1px;
      background: rgba(183, 154, 90, 0.58);
    }

    .story-content h2 {
      margin-top: 14px;
      font-size: 42px;
    }

    .story-intro {
      margin-top: 22px;
      color: var(--navy);
      font-family: "Gilda Display", serif;
      font-size: 22px;
      line-height: 1.45;
    }

    .story-grid p {
      color: var(--muted);
      line-height: 24px;
    }

    .story-content .button {
      margin-top: 12px;
    }

    .stores {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
    }

    .store-card {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--white);
    }

    .store-card img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    .store-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 30px 30px 32px;
    }

    .store-tag {
      display: inline-block;
      align-self: flex-start;
      margin-bottom: 14px;
      padding: 5px 11px;
      border: 1px solid rgba(183, 154, 90, 0.4);
      color: var(--gold);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .store-card h3 {
      font-size: 27px;
    }

    .store-card p {
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.65;
    }

    .store-info {
      display: grid;
      gap: 14px;
      margin: 22px 0 26px;
      padding: 22px 0 0;
      border-top: 1px solid var(--border);
      list-style: none;
    }

    .store-info li {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      color: var(--text);
      font-size: 13px;
      line-height: 1.5;
    }

    .store-info svg {
      flex: 0 0 auto;
      width: 19px;
      height: 19px;
      margin-top: 1px;
      fill: none;
      stroke: var(--gold);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .store-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: auto;
    }

    .store-actions .button {
      flex: 1;
      min-width: 150px;
    }

    .button.outline-navy {
      border-color: var(--navy);
      background: transparent;
      color: var(--navy);
    }

    .button.outline-navy:hover {
      background: var(--navy);
      color: var(--white);
    }

    .button.dark:hover {
      border-color: var(--gold);
      background: var(--gold);
    }

    .newsletter {
      display: grid;
      grid-template-columns: minmax(260px, 0.75fr) minmax(360px, 1fr);
      gap: 48px;
      align-items: end;
      padding: 32px 36px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.06);
      color: var(--white);
    }

    .newsletter h2 {
      max-width: none;
      color: var(--white);
      font-family: "Montserrat", sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .newsletter p {
      max-width: 620px;
      margin: 10px 0 0;
      color: rgba(255, 255, 255, 0.68);
      font-size: 13px;
      line-height: 1.7;
    }

    .newsletter form {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .newsletter input {
      min-height: 44px;
      padding: 0 18px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.12);
      color: var(--white);
      outline: 0;
    }

    .newsletter input::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }

    .newsletter .button {
      min-height: 44px;
      border-color: var(--white);
      background: var(--white);
      color: var(--navy);
    }

    .newsletter .button:hover {
      border-color: var(--gold);
      background: var(--gold);
      color: var(--white);
    }

    .footer {
      padding: 64px 40px 58px;
      background: var(--navy);
      color: var(--white);
    }

    .footer-inner {
      display: grid;
      grid-template-columns: 1.1fr 0.85fr 0.85fr 1.35fr 0.75fr;
      gap: 46px;
      max-width: 1280px;
      margin: 0 auto;
      padding-top: 38px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-brand {
      max-width: 360px;
    }

    .footer p,
    .footer a {
      color: rgba(255, 255, 255, 0.68);
      font-size: 13px;
      line-height: 1.75;
    }

    .footer a {
      transition: color 0.25s ease;
    }

    .footer a:hover {
      color: var(--gold);
    }

    .footer h3 {
      margin: 0;
      color: var(--white);
      font-family: "Montserrat", sans-serif;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .footer ul {
      display: grid;
      gap: 8px;
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
    }

    .footer-help p {
      margin: 14px 0 0;
    }

    .footer-help strong {
      display: block;
      margin-top: 14px;
      color: var(--white);
      font-size: 12px;
    }

    .footer-social a {
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }

    @media (max-width: 980px) {
      .story-grid,
      .newsletter {
        grid-template-columns: 1fr;
      }

      .section-heading {
        display: block;
      }

      .section-heading p {
        margin-top: 12px;
      }

      .categories,
      .stores,
      .service-bar {
        grid-template-columns: 1fr 1fr;
      }

      .product-card {
        flex-basis: calc((100% - 24px) / 2);
      }

      .featured-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
      }

      .footer-inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 34px;
      }
    }

    @media (max-width: 640px) {
      .topbar {
        letter-spacing: 0.14em;
      }

      .topbar span:not(:first-child) {
        display: none;
      }

      .nav {
        flex-wrap: wrap;
        gap: 20px;
      }

      .hero {
        height: 580px;
      }

      .hero h1 {
        font-size: 42px;
      }

      .categories,
      .stores,
      .service-bar,
      .newsletter form,
      .footer-inner {
        grid-template-columns: 1fr;
      }

      .newsletter {
        padding: 34px 24px;
      }

      .footer {
        padding: 0 28px 42px;
      }

      .footer-inner {
        padding-top: 42px;
      }

      .service {
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }

      .product-card {
        flex-basis: 86%;
      }

      .story-media img,
      .store-card img {
        height: 330px;
      }
    }

/* =====================================================================
   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; }
}