/* ============================================================
   Echando Raíces — normas de formato de texto en toda la web
   Añadido 2026-07-16: mayúscula solo en la primera letra de los
   títulos, nunca todo en mayúsculas (salvo acrónimos como CBD).
   El tema de PrestaShop fuerza mayúsculas en varios sitios vía
   CSS (text-transform: uppercase) aunque el texto guardado ya
   esté bien escrito — aquí se desactiva esa transformación.
   Revisar tras cada actualización del tema por si cambian los
   nombres de clase usados aquí.
   ============================================================ */

/* ============================================================
   Sistema de bordes redondeados — sitio completo (2026-07-29)
   Validado con Victoria sobre la propuesta del carrito: acciones/
   botones 8px, imágenes 8px, tarjetas/contenedores 10px.

   Este archivo carga en todas las páginas, así que aquí van las
   reglas GENÉRICAS de Bootstrap (.card, .btn-primary, .btn-secondary,
   .form-control) que no tienen ya un override propio más específico
   en el CSS de su página (category/product/product-cards). Donde sí
   existe ese override específico (p. ej. "body.page-category .card",
   o ".add-to-cart"), gana por especificidad y se ha actualizado a
   los mismos valores directamente en su propio archivo — no se
   duplica la regla aquí para no tener dos fuentes de verdad. */
:root {
  --hr-radius-accion: 8px;
  --hr-radius-imagen: 8px;
  --hr-radius-card: 10px;
}

.card {
  border-radius: var(--hr-radius-card) !important;
}
.btn-primary,
.btn-secondary {
  border-radius: var(--hr-radius-accion) !important;
}
.form-control {
  border-radius: var(--hr-radius-accion) !important;
}

/* Títulos de sección de producto: "Productos destacados", "En oferta",
   "Novedades"... */
.products-section-title {
  text-transform: none !important;
}

/* Etiquetas de producto: "Nuevo", "Pack" (el "-20%" no lleva letras,
   no le afecta) */
.product-flag {
  text-transform: none !important;
}

/* Bloque de texto libre / SEO al final de la portada */
#custom-text h2 {
  text-transform: none !important;
}

/* Tarjetas de subcategoría en las páginas de categoría
   (p. ej. "Flores de CBD" en la página de CBD) */
#subcategories .subcategory-name {
  text-transform: none !important;
}

/* Pie de página: títulos de columna ("Productos", "Nuestra empresa",
   "Información de la tienda") y el enlace "Su cuenta" */
#footer .h3,
#footer .text-uppercase,
.footer-container .h3,
.footer-container .text-uppercase {
  text-transform: none !important;
}

/* Botones (p. ej. "Suscribirse" en el pie de página). Aplica a todo
   el sitio, no solo a la home: es la misma norma de mayúscula solo
   inicial, y todos los textos de botón ya están bien escritos en
   origen (revisar si en el futuro se añade un botón nuevo). */
.btn-primary,
.btn-secondary {
  text-transform: none !important;
}

/* ==========================================================================
   AJUSTES ANTES DE ABRIR (2026-11-08) — revisión de Victoria en móvil
   Versión 2: todas las reglas llevan "html body" delante para que ganen a
   home.css, custom-footer.css, custom-product-cards.css, etc., que se cargan
   DESPUÉS de este archivo (en la versión 1 algunas reglas no se aplicaban
   por eso: título de portada, cards…).
   ========================================================================== */

/* ---------- Foco: sin recuadro blanco al pulsar enlaces y botones ----------
   (se mantiene un contorno violeta solo al navegar con teclado) */
html body a:focus:not(:focus-visible),
html body button:focus:not(:focus-visible),
html body .btn:focus:not(:focus-visible),
html body .nav-link:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
html body a:focus-visible,
html body button:focus-visible {
  outline: 2px solid var(--hr-color-acento-claro) !important;
  outline-offset: 2px;
}
html body .btn-primary:focus,
html body .btn-primary.focus {
  background-color: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-fondo-oscuro) !important;
  border-color: transparent !important;
}
html body #checkout .nav-tabs .nav-link,
html body #checkout .nav-tabs .nav-link:focus {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

/* ---------- Campos de formulario ---------- */
html body .form-control:focus {
  border-color: var(--hr-color-acento-claro) !important;
  box-shadow: 0 0 0 2px rgba(199, 156, 226, 0.35) !important;
  outline: none !important;
}
html body .hr-invalid {
  border-color: #e57373 !important;
}
html body .hr-error-msg {
  color: #f2a3a3;
  font-size: 14px;
  margin: 6px 0 0;
  width: 100%;
}

/* "¿Has olvidado tu contraseña?" sin salirse de la pantalla */
html body .forgot-password {
  margin-left: 0 !important;
  width: auto !important;
  max-width: 100%;
  text-align: left !important;
  white-space: normal;
}

/* Botón "Realizar pedido": mismo tamaño que "Continuar" y a todo el ancho */
html body #payment-confirmation button {
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 14px;
  border-radius: 8px;
}

/* ---------- Ficha de producto: pestañas Detalles y Valoraciones legibles ---------- */
html body #product-details label,
html body #product-details .label {
  color: var(--hr-color-texto-claro) !important;
  opacity: 0.7;
}
html body .product-features .data-sheet dt.name,
html body .product-features .data-sheet dd.value {
  background: rgba(230, 218, 204, 0.08) !important;
  color: var(--hr-color-texto-claro) !important;
}
html body #empty-product-comment {
  background: transparent !important;
  border: 1px solid var(--hr-color-borde-oscuro);
  color: var(--hr-color-texto-claro) !important;
}

/* ---------- Cards en móvil/táctil: botón siempre visible ---------- */
@media (max-width: 767px), (hover: none) {
  html body .product-miniature .hr-btn-slot {
    opacity: 1 !important;
    max-height: none !important;
  }
}

/* ========================= SOLO MÓVIL ========================= */
@media (max-width: 767px) {

  /* Aviso de cookies: solo lo que mide el texto, fijo abajo */
  html body .hr-cookie-banner {
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
  }
  html body .hr-cookie-banner .hr-cookie-banner__inner {
    gap: 12px;
  }
  html body .hr-cookie-banner .hr-cookie-banner__text {
    flex: 0 0 auto;
    font-size: 13px;
  }
  html body .hr-cookie-banner .hr-cookie-banner__actions {
    gap: 8px;
  }

  /* Cabecera: carrito sin caja gris/azul e icono de cuenta legible */
  html body #_mobile_cart .blockcart {
    background: transparent !important;
  }
  html body #_mobile_cart .blockcart,
  html body #_mobile_cart .blockcart a,
  html body #_mobile_cart .blockcart .material-icons,
  html body #_mobile_user_info .material-icons,
  html body #_mobile_user_info a {
    color: var(--hr-color-texto-claro) !important;
  }

  /* Portada: menos hueco y título que quepa */
  html body .hr-hero {
    padding-top: 32px;
    padding-bottom: 48px;
  }
  html body .hr-hero .hr-hero-inner h1 {
    font-size: 36px;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  /* "Somos una tienda de barrio…": sin doble margen lateral */
  html body #custom-text {
    padding: 40px 8px;
  }
  html body #custom-text .hr-about {
    padding: 0;
  }

  /* Menú móvil */
  html body #mobile_top_menu_wrapper {
    background: var(--hr-color-fondo-oscuro) !important;
  }
  html body #mobile_top_menu_wrapper .top-menu,
  html body #mobile_top_menu_wrapper .top-menu * {
    text-transform: none !important;
  }
  html body #mobile_top_menu_wrapper .top-menu > li {
    border-bottom: 1px solid var(--hr-color-borde-oscuro);
    padding: 6px 0;
  }
  html body #mobile_top_menu_wrapper .top-menu a {
    color: var(--hr-color-texto-claro) !important;
    background: transparent !important;
  }
  html body #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    font-size: 17px;
    font-weight: 700;
  }
  html body #mobile_top_menu_wrapper .top-menu a:hover,
  html body #mobile_top_menu_wrapper .top-menu a:focus {
    color: var(--hr-color-acento-claro) !important;
    outline: none;
    box-shadow: none;
    border-color: transparent !important;
  }
  html body #mobile_top_menu_wrapper .sub-menu {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 0 6px 0;
    padding-left: 12px;
  }
  html body #mobile_top_menu_wrapper .sub-menu li,
  html body #mobile_top_menu_wrapper .sub-menu a {
    border: 0 !important;
  }
  html body #mobile_top_menu_wrapper .sub-menu a {
    font-size: 15px;
    font-weight: 400;
    padding: 8px 10px;
  }
  html body #mobile_top_menu_wrapper .navbar-toggler,
  html body #mobile_top_menu_wrapper .navbar-toggler .material-icons,
  html body #mobile_top_menu_wrapper .collapse-icons .material-icons {
    color: var(--hr-color-texto-claro) !important;
  }

  /* Cards: nombre y categoría más grandes, sin hueco bajo el precio */
  html body .product-miniature .hr-precio-zona {
    min-height: 0 !important;
    margin-bottom: 8px !important;
  }
  html body .product-miniature .hr-cat {
    font-size: 15px !important;
  }
  html body .product-miniature .product-title,
  html body .product-miniature .product-title a {
    font-size: 22px !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
  }

  /* Carrito: foto + nombre arriba; cantidad, total y papelera debajo.
     Antes se solapaba y la papelera quedaba fuera de la pantalla. */
  html body .cart-item .product-line-grid {
    flex-wrap: wrap !important;
    gap: 12px;
  }
  html body .cart-item .product-line-grid-left {
    flex: 0 0 84px !important;
    max-width: 84px !important;
    width: 84px !important;
    padding: 0 !important;
  }
  html body .cart-item .product-line-grid-body {
    flex: 1 1 0 !important;
    min-width: 0;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
  }
  html body .cart-item .product-line-grid-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  html body .cart-item .product-line-grid-right > * {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .cart-item .product-line-grid-right .row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Pie: listas desplegadas con fondo oscuro */
  html body #footer [id^="footer_sub_menu"],
  html body #footer #footer_account_list,
  html body #footer .links ul {
    background: transparent !important;
  }
  html body #footer .links ul li {
    border-color: var(--hr-color-borde-oscuro) !important;
  }
  html body #footer .links ul li a {
    color: var(--hr-color-texto-claro) !important;
  }
  html body #footer .links .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  html body #footer .links .title .h3,
  html body #footer .links .title span {
    margin: 0;
  }
}

/* "¿Has olvidado tu contraseña?" en móvil: custom-checkout-personal.css le
   pone 147px de margen izquierdo (para alinearlo en ordenador) */
@media (max-width: 767px) {
  html body#checkout #login-form .forgot-password {
    margin: 0 0 24px 0 !important;
    width: 100% !important;
  }
}

/* Avisos de error del paso 1 (email, fecha de nacimiento): custom-checkout-envio.css
   los ocultaba con una regla más fuerte. Se vuelven a mostrar. */
html body#checkout #customer-form .form-group.hr-has-error .hr-field-error {
  display: flex !important;
}