:root{
  --color-primario: #0d6efd;
  --color-secundario: #6610f2;
  --color-bg: #ffffff;
  --color-texto: #333333;
  --radius: 20px;
  --shadow-suave: 0 .125rem .25rem rgba(0,0,0,.075);
  --font-base: "Arial", Helvetica, sans-serif;
  --font-heading: var(--font-base);
  --font-size-base: 16px;
  --font-weight-base: 400;
  --bs-body-font-family: var(--font-base);
  --bs-body-font-weight: var(--font-weight-base);
  --hero-from: #007cf0;
  --hero-to: #00dfd8;
  --color-primario-hover: #0061fe;
  --color-primario-border: #ebebeb;
  --color-search-border: #aaaaaa;
  --color-search-icon: #444444;
  --radius-thumb: var(--radius);
  --zoom-max-mobile: 320px;
  --thumb-size: 64px;
  --thumb-padding: 4px;
  --thumb-bg: #f5f5f5;
  --thumb-border: #d6d6d6;
  --collapse-speed: .3s;
  --cat-max-height: calc(100vh - 6.5rem);
  --navbar-bg: #ebebeb;
  --navbar-text: #333333;
  --navbar-font-size: 14px;
  --navbar-font: "Arial", Helvetica, sans-serif;
  --sidebar-bg: #e6e6e6;
  --sidebar-text: #242424;
  --sidebar-font-size: 14px;
  --sidebar-font: "Arial", Helvetica, sans-serif;
  --price-color: #0d6efd;
  --price-font-size: 29px;
  --price-font: "Arial", Helvetica, sans-serif;
  --nav-h-mob: 3rem;
  --nav-h-desk: 3rem;
  --footer-font: "Arial", Helvetica, sans-serif;
  --footer-bg: #d6d6d6;
  --footer-text: #333333;
  --footer-font-size: px;
  --carousel-effect: slide;
}

/************************************************************
 *  tienda_temas.css — Hoja de estilo centralizada
 *  Define variables, paleta de colores y componentes comunes
 *  para toda la tienda. Modifica aquí y el resto del sitio
 *  tomará automáticamente los nuevos estilos.
 ************************************************************/


/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap');

/* ---------- Variables globales ---------- */
/* ---------- Reset/elementos base ---------- */
html{
  scroll-behavior:smooth;
  font-size: var(--font-size-base);
}
body{
  font-family: var(--font-base) !important;
  font-weight: var(--font-weight-base) !important;
  background: var(--color-bg);
  color: var(--color-texto);
  scrollbar-gutter: stable;
  /* Compensación por navbar fixed‑top (reversión a comportamiento anterior) */
  padding-top: var(--nav-h-desk, 3rem);
}
@media (max-width: 991.98px){
  body{
    padding-top: var(--nav-h-mob, 3rem);
  }
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading, var(--font-base));
  font-weight: var(--font-weight-base);
}
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading, var(--font-base));
  font-weight: var(--font-weight-base);
}

/* ---------- Navbar ---------- */
.navbar{
  background: var(--navbar-bg, #ffffff) !important;
  color: var(--navbar-text, #212529) !important;
  font-family: var(--navbar-font, var(--font-base));
  font-size: var(--navbar-font-size, var(--font-size-base));
  box-shadow: var(--shadow-suave);
  box-shadow: none !important;    /* elimina la sombra que se ve como “franja” */
  border-bottom: 0 !important;   /* evita línea blanca de 1 px en móviles */
  padding-bottom: 0 !important;  /* elimina espacio extra al colapsar */
}
.navbar-brand{ font-weight:700; }
/* Ajuste color de texto según el tema */
.navbar,
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .input-group-text,
.navbar .form-control{
  color: var(--navbar-text);
}
/* Cart icon uses the same color as navbar text */
.navbar .bi-cart,
.navbar .btn .bi-cart{
  color: var(--navbar-text) !important;
}
.navbar .nav-link:hover,
.navbar .navbar-brand:hover{
  color: var(--color-primario);
}
.navbar .search-pill{
  border:1px solid var(--color-search-border);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}
.search-pill .input-group-text{
  color: var(--color-search-icon);
  background:#fff;
  border:0;
}
.search-pill .form-control{ border:0; }
.search-pill .form-control:focus{ box-shadow:none; }

/* ---- Search‑bar text & icon forced to black ---- */
.search-pill .input-group-text,
.search-pill .bi-search,
.search-pill .form-control{
  color:#000 !important;
}
.search-pill .form-control::placeholder,
.search-pill .form-control::-webkit-input-placeholder,
.search-pill .form-control::-moz-placeholder,
.search-pill .form-control:-ms-input-placeholder,
.search-pill .form-control::-ms-input-placeholder{
  color:#000 !important;
  opacity:.65;
}

/* ---------- Hero/banner ---------- */
.hero-banner{
  background: linear-gradient(135deg,var(--hero-from) 0%,var(--hero-to) 100%);
  color:#fff;
}

/* ---------- Hero/banner fija 17:5 ---------- */
.hero-banner-fixed{
  aspect-ratio: 17 / 5;                      /* ancho : alto (≈3,4:1) */
  height: clamp(150px, 29.5vw, 1000px);      /* 5 ÷ 17 ≈ 0,294 → 29,5 vw */
  background-size: contain !important;       /* asegura imagen completa */
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* Ratio helper usado en tienda.php para el carrusel principal */

/* ---------- Sidebar ---------- */
#tree-categories{
  border-radius: var(--radius);
  background: var(--sidebar-bg, #ffffff) !important;
  color: var(--sidebar-text, #212529) !important;
  font-family: var(--sidebar-font, var(--font-base)) !important;
  font-size: var(--sidebar-font-size, var(--font-size-base)) !important;
  box-shadow: var(--shadow-suave);
  overflow-y:auto;
  max-height: var(--cat-max-height);
}
.subcat-link{ cursor:pointer; color:inherit; text-decoration:none; }
.subcat-link:hover{ text-decoration:underline; }

/* Asegura que todos los elementos internos de la sidebar utilicen
   el mismo color de fondo definido por --sidebar-bg, evitando que
   queden “parches” blancos cuando se personaliza el color           */
#tree-categories,
#tree-categories *,
#tree-categories .list-group-item,
#tree-categories .subcat-link,
#tree-categories .cat-toggle{
  background: var(--sidebar-bg, #ffffff) !important;
  border-color: var(--sidebar-bg, #ffffff) !important;
}


/* Color y tipografía coherentes en la sidebar */
#tree-categories,
#tree-categories .cat-toggle,
#tree-categories .subcat-link,
#tree-categories .list-group-item{
  color: var(--sidebar-text) !important;
  font-family: var(--sidebar-font, var(--font-base)) !important;
  font-size: var(--sidebar-font-size, var(--font-size-base)) !important;
}

/* Asegura que los enlaces de “Productos destacados” y otros elementos
   dentro de la sidebar utilicen el mismo color que las categorías */
#tree-categories a{
  color: var(--sidebar-text) !important;
}

/* ---------- Chevron orientación (categorías) ---------- */
/* Flecha abajo por defecto (expandidas); flecha derecha (.chevron-right) al colapsar */
.cat-toggle i{
  transition: transform var(--collapse-speed, .2s);
  transform: rotate(0deg);             /* ↓ por defecto */
}
.cat-toggle i.chevron-right{
  transform: rotate(-90deg);
}


/* ---------- Buttons y utilidades ---------- */
.btn-primary{
  background: var(--color-primario);
  border-color: var(--color-primario-border);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--color-primario-hover);
  border-color: var(--color-primario-hover);
  transform:scale(1.05);
}

/* ---------- Galería ---------- */
#zoom-container{
  position:relative;
  width:100%;
  padding-top:100%;          /* cuadrado */
  max-width:500px;           /* tope desktop */
  margin:0 auto;
  overflow:hidden;           /* garantiza que las esquinas redondeadas recorten la imagen */
  border-radius: var(--radius);
  background: var(--thumb-bg) !important;  /* mismo fondo que miniaturas */
}
#zoom-container img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:contain;
  object-position: center center;
  border-radius: var(--radius);
}

/* --- Radio coherente en la imagen principal del detalle de producto --- */
#zoom-container img.rounded{
  border-radius: var(--radius) !important;
}

/* ---------- Imagen principal en detalle de producto ---------- */
/* Alinea el color del borde con la miniatura */
#zoom-container img.border{
  border-color: var(--thumb-border) !important;
}

@media (max-width:575.98px){
  #zoom-container{ max-width:320px; }
  .search-pill #search-input{max-width:140px;}
}

/* ---------- Layout helpers ---------- */
.full-width{ width:100%; }
.rounded-pill-all{ border-radius:999px!important; }

/* ---------- Carrusel ---------- */
/* El carrusel debe quedar pegado a la navbar; el margen negativo se
   calcula en tienda_header.php con las variables --nav-h‑*  */
#siteCarousel{ border-radius:0!important; }

/* --- Proporción fija 17:5 para las slides del carrusel ------------ */
.carousel-item{
  aspect-ratio: 17 / 5;   /* ≈ 3,4:1 */
  width: 100%;
}
/* Mantiene compatibilidad con el banner fijo ya existente */
.hero-banner-fixed{
  aspect-ratio: 17 / 5;
  width: 100%;
}

/* ---------- Thumbnails ---------- */
.thumb{
  width:var(--thumb-size);
  height:var(--thumb-size);
  object-fit:cover;
  cursor:pointer;
  border-radius: var(--radius-thumb);
  padding:var(--thumb-padding);
  background:var(--thumb-bg);
  border:1px solid var(--thumb-border);
  box-sizing:border-box;
}

/* ---------- Separación miniaturas ---------- */
#zoom-container{ margin-bottom: 1rem; }
.thumb-strip{
  display:flex;
  flex-direction:row;
  justify-content:center;
  gap:.5rem;
  overflow-x:auto;
  width:100%;
  margin-top:.25rem;           /* separación “1” ≈ .25 rem */
}

.page-product .d-flex.align-items-start{
  flex-direction:column;
  align-items:center;
}
@media (min-width: 768px){
  .page-product .d-flex.align-items-start{
    display: flex !important;   /* refuerzo */
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start;
    gap: 1.5rem;
  }
  /* Evita que el contenedor de la imagen se estire o se desplace */
  .page-product #zoom-container{
    margin: 0;                /* quita auto‑centro vertical */
    max-width: 500px;
  }
  /* Quita padding superior que empujaba hacia abajo el zoom‑container */
  .page-product main{
    padding-top: 0 !important;
  }
}
.page-product #zoom-container{
  margin-left:auto;
  margin-right:auto;
  border-radius:var(--radius);
}

@media (max-width:575.98px){
  .thumb-strip{ overflow-x:visible; max-height:none; }
}

/* ---------- Product card border ---------- */
.product-card{
  border: 1px solid var(--thumb-border) !important;
}

/* Fondo uniforme detrás de la imagen de las tarjetas de producto
   (miniaturas en tienda.php) — mismo tono que las miniaturas */
.product-card .card-img-top{
  background: var(--thumb-bg) !important;
  object-fit: contain;
}

/* ---------- Ajuste badge del carrito ---------- */
#cart-badge{ transform: translate(-50%, -25%) !important; }

/* ---------- Animación colapsables de la sidebar ---------- */
.collapsible{
  overflow:hidden;
  transition:max-height var(--collapse-speed) ease;
}

/* ---------- Scroll seguro para la sidebar de categorías ---------- */

/* ---------- Precio (tarjetas y destacados) ---------- */
.product-card .card-text.text-primary,
.price-text{
  color: var(--price-color, #212529) !important;
  font-family: var(--price-font, var(--font-base)) !important;
  font-size: var(--price-font-size, var(--font-size-base)) !important;
  font-weight: 700 !important;
}

/* ---------- Texto general dentro de tarjetas de producto ---------- */
.product-card .card-text,
.product-card .card-title{
  color: var(--color-texto, #212529) !important;
}

/* ---------- Fondo tarjetas de producto ---------- */
.product-card,
.product-card .card-body{
  background: var(--color-bg, #ffffff) !important;
}

/* ---------- Ajustes de tarjetas globales (producto, carrito, checkout) ---------- */
/* ---------- Carrito & Checkout: sincroniza fondo y texto con el tema ---------- */
.shopping-cart-page .card,
.shopping-cart-page .card-header,
.shopping-cart-page .card-body,
.shopping-cart .card,
.shopping-cart .card-header,
.shopping-cart .card-body,
.checkout-page .card,
.checkout-page .card-header,
.checkout-page .card-body,
.checkout .card,
.checkout .card-header,
.checkout .card-body,
.cart-summary .card,
.cart-summary .card-header,
.cart-summary .card-body{
  background-color: var(--color-bg) !important;
  color:            var(--color-texto) !important;
  border-color:     var(--thumb-border) !important;
}

/* ---- Fuerza encabezados que llevan `.bg-light` a respetar el fondo del tema ---- */
.shopping-cart-page .card-header.bg-light,
.shopping-cart .card-header.bg-light,
.checkout-page .card-header.bg-light,
.checkout .card-header.bg-light,
.cart-summary .card-header.bg-light{
  background-color: var(--color-bg) !important;
}
/* Fondo y texto coherentes con la paleta general — aplica a
   tarjetas de productos, carrito y checkout en todas sus variantes */
.product-card,
.product-card .card-body,
.shopping-cart-page .card,
.shopping-cart-page .card-header,
.shopping-cart-page .card-body,
.shopping-cart .card,
.shopping-cart .card-header,
.shopping-cart .card-body,
.checkout-page .card,
.checkout-page .card-header,
.checkout-page .card-body,
.checkout .card,
.checkout .card-header,
.checkout .card-body{
  background: var(--color-bg) !important;
  color:      var(--color-texto) !important;
  border-color: var(--thumb-border) !important;   /* mantén consistencia de borde */
}

/* Miniaturas dentro de carrito / checkout — reutilizan el mismo
   fondo, padding y borde que las miniaturas generales del sitio */
.shopping-cart-page img,
.shopping-cart-page .card img,
.shopping-cart img,
.shopping-cart .card img,
.checkout-page img,
.checkout-page .card img,
.checkout img,
.checkout .card img{
  width:  var(--thumb-size);
  height: var(--thumb-size);
  object-fit: contain;
  background: var(--color-bg) !important;
  border-radius: var(--radius-thumb);
  padding: var(--thumb-padding);
  border: 1px solid var(--thumb-border);
}

.shopping-cart-page .card-header,
.checkout-page .card-header{
  background: var(--color-bg) !important;
  color: var(--color-texto) !important;
}

/* ---------- Sidebar: Productos destacados ---------- */
/* Asegura que usen el mismo color definido para las categorías */
#tree-categories .product-card,
#tree-categories .product-card *,
#tree-categories .featured-item,
#tree-categories .featured-item *,
#tree-categories .featured-product,
#tree-categories .featured-product *{
  color: var(--sidebar-text) !important;
}

/* ---------- Footer ---------- */
footer{
  background: var(--footer-bg, #1f2022) !important;
  background-color: var(--footer-bg, #1f2022) !important; /* asegura sobreescribir bg‑utilities */
  color: var(--footer-text, #ffffff) !important;
  font-family: var(--footer-font, var(--font-base)) !important;
  font-size: var(--footer-font-size, var(--font-size-base)) !important;
}
footer a{
  color: var(--footer-text) !important;
  text-decoration: none !important;  /* evita subrayado debajo de íconos sociales */
}
/* Enlaces que vienen con utilidades de Bootstrap (`text-white`, `text-reset`, etc.) */
footer a.text-white,
footer a.text-reset,
footer a.text-white:hover,
footer a.text-reset:hover{
  color: var(--footer-text) !important;
}
/* Otros elementos (p, small, div, etc.) que traigan utilidades Bootstrap `text-*` */
footer .text-white,
footer .text-reset{
  color: var(--footer-text) !important;
}
/* Asegura que párrafos, <small> y spans usen el color del footer */
footer p,
footer small,
footer span{
  color: var(--footer-text) !important;
}
/* Encabezados dentro del footer */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6{
  font-size: var(--footer-font-size, var(--font-size-base)) !important;
  font-weight: 700 !important;
  color: var(--footer-text) !important;
}
footer a:hover{
  color: var(--color-primario-hover) !important;
  text-decoration: underline;
}

footer a:hover{ text-decoration: underline; }

/* Iconos de redes sociales dentro del footer */
footer .bi,
footer .fa,
footer i,
footer svg{
  color: var(--footer-text) !important;
  fill:  var(--footer-text) !important;
}

/* Si el footer trae la utilidad Bootstrap `bg-dark`, forzamos el nuevo color */
footer.bg-dark{
  background: var(--footer-bg, #1f2022) !important;
  background-color: var(--footer-bg, #1f2022) !important;
}

/* Si dentro del footer existe un contenedor con clase `bg-dark`,
   asegúrate de que tome el mismo fondo y texto definidos */
footer .bg-dark{
  background: var(--footer-bg, #1f2022) !important;
  background-color: var(--footer-bg, #1f2022) !important;
  color: var(--footer-text, #ffffff) !important;
}

/* Espaciado extra entre el header de “Categorías” y la grilla de productos
   solo en pantallas ≤ 768 px */
@media (max-width: 768px){
  #tree-categories{           /* o el selector de tu contenedor */
    margin-bottom: 1rem;      /* prueba con 0.75 – 1.5 rem según necesites */
  }

  .product-card{              /* si prefieres separar las cards hacia abajo */
    margin-top: .5rem;
  }
}
/* ==== Efectos para el carrusel ==================================== */

/* Zoom suave continuo */
.carousel-zoom .carousel-item.active{
  /* Usa la duración elegida; anima ida y vuelta infinitamente */
  animation:carouselZoom var(--carousel-duration,6s) ease-in-out infinite alternate;
}
@keyframes carouselZoom{
  from{transform:scale(1);} to{transform:scale(1.3);}
}

/* Fade suave entre slides para Zoom */
.carousel-zoom.carousel-fade .carousel-item{
  transition-duration: calc(var(--carousel-duration,6s) / 2);
  transition-property: opacity;
}
/* Slide (por defecto) no necesita clase extra */

/* ---- El carrusel debe quedar pegado a la navbar; el margen negativo se
   calcula en tienda_header.php con las variables --nav-h‑*  */
#siteCarousel{ position: relative; }



/* ==== Blur suave ================================================== */
/*  La slide entrante parte con blur y lo pierde;                     */
/*  la saliente hace el efecto contrario.                            */
.carousel-blur .carousel-item{
  transition: filter .8s ease, opacity .8s ease;
}

/* Oculta flechas laterales del hero en móviles para que no se superpongan con la sidebar */
@media (max-width: 991.98px){   /* móviles y tablets */
  #siteCarousel .carousel-control-prev,
  #siteCarousel .carousel-control-next{
    display:none !important;
  }
}

/* slide que entra (aún NO es .active) → blur y opacidad baja */
.carousel-blur .carousel-item-next,
.carousel-blur .carousel-item-prev{
  filter: blur(6px);
  opacity: 0.1;
}

/* cuando la slide ya está activa, se ve nítida */
.carousel-blur .carousel-item.active{
  filter: blur(0);
  opacity: 1;
}

/* slide saliente (la que deja de ser .active) se vuelve borrosa */
.carousel-blur .carousel-item.active.carousel-item-start,
.carousel-blur .carousel-item.active.carousel-item-end{
  filter: blur(6px);
  opacity: 0.1;
}



/* ——— Ajuste responsivo: search‑bar más compacta ≤ 480 px ——— */
@media (max-width: 480px){
  /* Limita el ancho total de la píldora de búsqueda */
  .search-pill{
    max-width: 150px !important;      /* ≈ 1/3 más angosta que la versión anterior */
  }
  /* Reduce levemente el texto interno */
  .search-pill .form-control{
    font-size: 0.9rem !important;
  }
}


/* --- Asegura que la navbar no añada padding‑bottom en pantallas ≤ 992 px --- */
@media (max-width: 991.98px){
  .navbar{
    padding-bottom: 0 !important;
    box-shadow: none !important;  /* quita sombra en móviles / tablets */
  }
}

/* === Listas dentro de la descripción del producto === */
.product-description ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.product-description ol {
  list-style-type: decimal;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.product-description li {
  margin-bottom: 0.3rem;
}

/* --- Override posibles reglas de Quill/Bootstrap que alteran los bullets --- */
.product-description ul {
  list-style-type: disc !important;
}
.product-description ol {
  list-style-type: decimal !important;
}

.product-description li::before{
  content: none !important;   /* anula numeración generada por pseudo‑elementos */
}

/* ============================================================
   Reset utilidades Bootstrap en la zona de Carrito / Checkout
   ------------------------------------------------------------
   Estas reglas neutralizan las clases de Bootstrap (.bg-light,
   .bg-white, .table-light, .text-muted, etc.) dentro de las
   páginas de carrito y checkout para que los colores definidos
   en las variables de tienda_temas.css prevalezcan.
   ============================================================ */
.shopping-cart-page .bg-light,
.shopping-cart      .bg-light,
.checkout-page      .bg-light,
.checkout           .bg-light,
.cart-summary       .bg-light,
.shopping-cart-page .bg-white,
.shopping-cart      .bg-white,
.checkout-page      .bg-white,
.checkout           .bg-white,
.cart-summary       .bg-white{
  background-color: var(--color-bg) !important;
  background:       var(--color-bg) !important;
}

.shopping-cart-page .table-light,
.shopping-cart      .table-light,
.checkout-page      .table-light,
.checkout           .table-light,
.cart-summary       .table-light{
  background-color: var(--color-bg) !important;
  background:       var(--color-bg) !important;
  color:            var(--color-texto) !important;
}

.shopping-cart-page .text-muted,
.shopping-cart      .text-muted,
.checkout-page      .text-muted,
.checkout           .text-muted,
.cart-summary       .text-muted{
  color: var(--color-texto) !important;
}

.shopping-cart-page .border,
.shopping-cart      .border,
.checkout-page      .border,
.checkout           .border,
.cart-summary       .border{
  border-color: var(--thumb-border) !important;
}


/* ============================================================
   Anula colores `primary` y `secondary` en Carrito / Checkout
   ------------------------------------------------------------
   Evita que clases Bootstrap como .border-primary, .border-secondary,
   .bg-primary o .bg-secondary apliquen sus tonos azul/morado.
   Las tarjetas y controles heredan ahora la paleta neutra basada
   en --color-bg, --color-texto y --thumb-border.
   ============================================================ */
.shopping-cart-page .border-primary,
.shopping-cart-page .border-secondary,
.shopping-cart      .border-primary,
.shopping-cart      .border-secondary,
.checkout-page      .border-primary,
.checkout-page      .border-secondary,
.checkout           .border-primary,
.checkout           .border-secondary,
.cart-summary       .border-primary,
.cart-summary       .border-secondary,
.cart-items         .border-primary,
.cart-items         .border-secondary{
  border-color: var(--thumb-border) !important;
}

.shopping-cart-page .bg-primary,
.shopping-cart-page .bg-secondary,
.shopping-cart      .bg-primary,
.shopping-cart      .bg-secondary,
.checkout-page      .bg-primary,
.checkout-page      .bg-secondary,
.checkout           .bg-primary,
.checkout           .bg-secondary,
.cart-summary       .bg-primary,
.cart-summary       .bg-secondary,
.cart-items         .bg-primary,
.cart-items         .bg-secondary{
  background-color: var(--color-bg) !important;
  color:            var(--color-texto) !important;
}


/* === Ajustes adicionales: Summary de Carrito ======================== */
/*  Sincroniza colores y bordes de la tarjeta de resumen de compra
    con el resto del tema, anulando utilidades de Bootstrap que
    aplican `border-white`, enlaces azules, etc.                       */
.cart-summary .card,
.cart-summary .card-header,
.cart-summary .card-body{
  background-color: var(--color-bg) !important;
  color: var(--color-texto) !important;
  border-color: var(--thumb-border) !important;
}

/* Forzar color de bordes incluso cuando la plantilla incluye `.border-white` */
.cart-summary .border-white,
.shopping-cart-page .border-white,
.shopping-cart .border-white,
.checkout-page .border-white,
.checkout .border-white{
  border-color: var(--thumb-border) !important;
}

/* Unificar color de enlaces dentro del resumen de compra */

.cart-summary a{
  color: var(--color-texto) !important;
}

/* ---- Cart items list card adopts the same palette as the purchase summary ---- */
.cart-items .card,
.cart-items .card-header,
.cart-items .card-body{
  background-color: var(--color-bg) !important;
  color: var(--color-texto) !important;
  border-color: var(--thumb-border) !important;
}

/* --- Uniform border‑radius for cart & summary cards --- */
.cart-items .card,
.cart-summary .card{
  border-radius: var(--radius) !important;
  overflow: hidden; /* clips inner content to the rounded corners */
}

.cart-items .card-header,
.cart-summary .card-header{
  border-top-left-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
}

.cart-items .card-body:last-child,
.cart-summary .card-body:last-child{
  border-bottom-left-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
}

/* ---------- Quantity selector (cart & checkout) ---------- */
.qty-selector input,
.qty-selector button{
  background-color: var(--color-bg) !important;      /* same bg as body/cards */
  color:            var(--color-texto) !important;   /* keep text/icons themed */
  border: 1px solid var(--thumb-border) !important;  /* match card outline */
  border-radius: var(--radius-thumb);                /* reuse thumb radius */
}

.qty-selector button{
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.qty-selector input{
  width: 72px;              /* keeps proportion from mock‑up */
  text-align: center;
}

.qty-selector input:focus,
.qty-selector button:focus{
  outline: 2px solid var(--thumb-border) !important; /* visible focus ring */
  box-shadow: none !important;                       /* remove Bootstrap glow */
}

/* Espacio entre botones y campo de cantidad */
.qty-selector {
  display: flex !important;
  align-items: center;
  gap: 1rem !important;
}

/* ---------- Select controls (site‑wide) ------------------- */
/* ------------------------------------------------------------
   UNIFICACIÓN DE <select> Y DROPDOWNs (flecha = currentColor)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   UNIFICACIÓN DE <select> Y DROPDOWNs (flecha = currentColor)
   ------------------------------------------------------------ */
/* ============================
   <select> / .dropdown-toggle
   flecha = currentColor (↓)
   ============================ */
.form-select,
.dropdown-toggle{
  background-color: var(--color-bg) !important;
  color: inherit;                               /* hereda el tono real */
  border: 1px solid var(--thumb-border) !important;
  border-radius: var(--radius-thumb);
  font-family: var(--font-base);

  /* 1 . desactiva la flecha nativa ------------------------------ */
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;

  /* deja sitio para la flecha */
  padding-right: 2.25rem;
  position: relative;
}

/* 2 . triángulo equilátero ↓ que hereda currentColor ------------ */
.form-select::after,
.dropdown-toggle::after{
  content: "";
  pointer-events: none;                         /* clics siguen llegando al control */
  position: absolute;
  top: 50%;
  right: 0.9rem;                                /* alinéalo con tu padding */
  width: 0; height: 0;
  margin-top: -0.3em;                           /* centra verticalmente */
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  border-top: 0.45em solid currentColor;        /* ↓ flecha rellena */
}

/* IE / Edge heredados – oculta la flecha del sistema */
.form-select::-ms-expand{ display:none; }

/* opciones legibles en cualquier tema */
.form-select option{
  color: var(--color-texto);
  background-color: var(--color-bg);
}

/* anillo de foco coherente */
.form-select:focus{
  outline: 2px solid var(--thumb-border) !important;
  box-shadow: none !important;
}


/* IE / Edge legacy – oculta la flecha de sistema */
.form-select::-ms-expand{ display:none; }

/* Opciones legibles en cualquier tema */
.form-select option{
  color:            var(--color-texto);
  background-color: var(--color-bg);
}

/* Foco coherente */
.form-select:focus{
  outline:2px solid var(--thumb-border) !important;
  box-shadow:none !important;
}


/* IE / Edge legacy – oculta la flecha de sistema */
.form-select::-ms-expand{ display:none; }

/* Opciones legibles en cualquier tema */
.form-select option{
  color:            var(--color-texto);
  background-color: var(--color-bg);
}

/* Anillo de foco coherente con el resto de controles */
.form-select:focus{
  outline:2px solid var(--thumb-border) !important;
  box-shadow:none !important;
}

.btn-group .btn,
.btn-outline-secondary{
  background-color: var(--color-bg) !important;
  color: var(--color-texto) !important;
  border-color: var(--thumb-border) !important;
}

.btn-group .btn.active,
.btn-group .btn:active,
.btn-outline-secondary.active{
  background-color: var(--color-primario) !important;
  color: #fff !important;
  border-color: var(--color-primario) !important;
}

/* ============================================================
   Datos de Cliente ─ Paso 2 del Checkout
   ------------------------------------------------------------
   Unifica la tarjeta de datos personales y todos sus controles
   con la misma paleta empleada en Carrito y Resumen de compra,
   utilizando únicamente las variables globales declaradas en
   :root.  Aplica a cualquier variante de clase que pueda usar
   la plantilla (datoscliente‑page, datos‑cliente‑page, etc.).
   ============================================================ */
.datoscliente-page .card,
.datoscliente-page .card-header,
.datoscliente-page .card-body,
.datos-cliente-page .card,
.datos-cliente-page .card-header,
.datos-cliente-page .card-body,
.client-data-page .card,
.client-data-page .card-header,
.client-data-page .card-body{
  background-color: var(--color-bg) !important;
  color:            var(--color-texto) !important;
  border-color:     var(--thumb-border) !important;
  border-radius:    var(--radius) !important;
  overflow: hidden;                /* respeta esquinas redondeadas */
}

/* Enlaces dentro de la ficha de datos (por ejemplo “Volver” o “Iniciar sesión”) */
.datoscliente-page a,
.datos-cliente-page a,
.client-data-page a{
  color: var(--color-texto) !important;
}

/* Campos de formulario: mantienen el mismo fondo, texto y borde que las tarjetas */
.datoscliente-page .form-control,
.datos-cliente-page .form-control,
.client-data-page .form-control{
  background-color: var(--color-bg) !important;
  color:            var(--color-texto) !important;
  border-color:     var(--thumb-border) !important;
  border-radius:    var(--radius-thumb);
  box-shadow: none !important;
}

.datoscliente-page .form-control:focus,
.datos-cliente-page .form-control:focus,
.client-data-page .form-control:focus{
  outline: 2px solid var(--thumb-border) !important;
  box-shadow: none !important;
}

/* Botones de la página siguen heredando la regla .btn-primary global */

/* Indicadores de pasos (si la plantilla incluye un wizard) */
.datoscliente-page .step-indicator,
.datos-cliente-page .step-indicator,
.client-data-page .step-indicator{
  background-color: var(--color-bg) !important;
  color: var(--color-texto) !important;
  border-color: var(--thumb-border) !important;
}


/* === Datos del Cliente (alias & fallback clases) ===================== */
/*  Abarca posibles variantes de nombre usadas por la plantilla
    (p.ej. datoscliente, datos‑cliente, client‑info, etc.)              */

.datoscliente       .card,
.datoscliente       .card-header,
.datoscliente       .card-body,
.datos-cliente      .card,
.datos-cliente      .card-header,
.datos-cliente      .card-body,
.client-info-page   .card,
.client-info-page   .card-header,
.client-info-page   .card-body,
.client-info        .card,
.client-info        .card-header,
.client-info        .card-body{
  background-color: var(--color-bg) !important;
  color:            var(--color-texto) !important;
  border-color:     var(--thumb-border) !important;
  border-radius:    var(--radius) !important;
  overflow: hidden;          /* respeta esquinas redondeadas */
}

/* Campos de formulario dentro de las fichas de cliente */
.datoscliente       .form-control,
.datos-cliente      .form-control,
.client-info-page   .form-control,
.client-info        .form-control{
  background-color: var(--color-bg) !important;
  color:            var(--color-texto) !important;
  border-color:     var(--thumb-border) !important;
  border-radius:    var(--radius-thumb);
  box-shadow: none !important;
}

.datoscliente       .form-control:focus,
.datos-cliente      .form-control:focus,
.client-info-page   .form-control:focus,
.client-info        .form-control:focus{
  outline: 2px solid var(--thumb-border) !important;
  box-shadow: none !important;
}

/* Botón “Continuar” dentro de la ficha de cliente hereda .btn‑primary */

/* Oculta el contador de productos "n / total" junto al botón “Mostrar más” */
#prod-count{
  display: none !important;
}

/* Unifica estilo de líneas horizontales */
hr {
  border: none !important;
  border-top: 1px solid var(--thumb-border) !important;
  margin: 1rem 0; /* ajuste vertical según diseño */
}

/* Unifica estilo de Bootstrap dropdown-divider */
.dropdown-divider {
  border-top: 1px solid var(--thumb-border) !important;
  background-color: transparent !important;
  margin: .5rem 0; /* ajusta si necesitas más o menos espacio */
}

/* Unifica estilo de quantity selector */
.input-group.quantity-control .form-control,
.input-group.quantity-control .btn {
  border: 1px solid var(--thumb-border) !important;
  border-radius: var(--radius-thumb) !important;
}

.input-group.quantity-control {
  display: flex !important;
  align-items: center;
  gap: 0.6rem !important;
}

/* Asegura que .d-none realmente oculte el selector de cantidad,
   incluso si esta clase define display con !important */
.input-group.quantity-control.d-none,
.d-none.input-group.quantity-control {
  display: none !important;
}

/* ——— Promos: transición controlada desde JS ——— */
#masVendidoList .card,
#mejoresOfertasList .card{
  will-change: opacity;
}

/* Optimiza el render fuera de pantalla de las secciones de promos */
#masVendido,
#mejoresOfertas{
  content-visibility: auto;
  contain-intrinsic-size: 400px; /* reserva altura aproximada para evitar saltos */
}

/* Restaurar tamaño del input de cantidad */
.qty-selector input,
.input-group.quantity-control .form-control {
  width: 27px !important;
  height: 32px !important;
  text-align: center !important;
  padding: 0 !important; /* opcional: quita padding extra */
}



/* Estilos para botón Continuar compra igual al Agregar al carrito */
#btn-checkout {
  display: inline-block !important;
  font-weight:    400 !important;
  color:          #fff !important;
  text-align:     center !important;
  vertical-align: middle !important;
  user-select:    none !important;
  background-color: var(--color-primario) !important;
  border:           1px solid var(--color-primario-border) !important;
  padding:          .25rem .5rem !important;
  font-size:        .875rem !important;
  line-height:      1.5 !important;
  border-radius:    .2rem !important;
  transition:       transform .15s ease, background-color .15s ease, border-color .15s ease !important;
}

#btn-checkout:hover,
#btn-checkout:focus {
  background-color: var(--color-primario-hover) !important;
  border-color:     var(--color-primario-hover) !important;
  transform:        scale(1.05) !important;
}
/*-----------------------------------------------
#   Modal de "Producto agregado al carro" (tienda_producto.php)
#   ----------------------------------------------- 
/* Fondo del modal igual al fondo de página */
#cartModal .modal-content {
  background-color: var(--color-bg) !important;
}

/* Fondo de la miniatura igual al de miniaturas del sitio */
#cartModalImg.img-thumbnail {
  background-color: var(--thumb-bg) !important;
}

/* Limitar descripción del modal a un máximo de 8 líneas */
#cartModalDesc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------
   Modal "Producto agregado al carro" — texto uniforme
   --------------------------------------------------- */
#cartModal .modal-content {
  /* already set background, ensure text color is theme text */
  color: var(--color-texto) !important;
}

#cartModalName,
#cartModalDesc,
#cartModalPrice {
  color: var(--color-texto) !important;
}

/* Remove default muted styling from modal description */
#cartModalDesc.text-muted {
  color: var(--color-texto) !important;
}

/* ---------------------------------------------------
   Modal "Producto agregado al carro" — cerrar icono
   --------------------------------------------------- */
#cartModal .btn-close {
  color: var(--color-texto) !important;
}