/* ==========================================================
   BIJUYMODA MOBILE STABLE V1
   Estado validado:
   - 2 productos por fila en móvil
   - Login móvil corregido
   - Carrito / solicitar presupuesto corregido
   - "Ver descripción completa" retirado
   ========================================================== */

@media (max-width: 767px) {

  /* ------------------------------
     BASE MÓVIL SEGURA
     ------------------------------ */

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: 120px !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* ==========================================================
     PRODUCT CARDS MOBILE FIRST V2 — REJILLA
     La rejilla es la base: 2 columnas anchas a 390px.
     Los hijos reales del grid son los wrappers div.js-product
     (col-xs-12 col-sm-6 ...), no el article: se neutralizan
     sus gutters Bootstrap para recuperar ancho útil.
     El padding lateral efectivo queda en ~9px por lado
     (15px del .container - 6px de margen negativo).
     ========================================================== */

  .featured-products .products,
  .product-accessories .products,
  #products .products,
  #js-product-list .products,
  .products.row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    column-gap: 9px !important;
    row-gap: 16px !important;
    width: calc(100% + 12px) !important;
    max-width: none !important;
    margin: 0 -6px !important;
    padding: 0 !important;
  }

  /* Listados (categoría / búsqueda): #content-wrapper es una
     columna Bootstrap (col-xs-12) con 15px extra por lado.
     Se compensa solo dentro del grid de productos. */
  #js-product-list .products,
  #js-product-list .products.row {
    width: calc(100% + 42px) !important;
    margin: 0 -21px !important;
  }

  .products .js-product.product,
  .products.row > .js-product {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  article.product-miniature {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  article.product-miniature .thumbnail-container,
  .product-miniature .thumbnail-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  /* Imagen dominante: zona cuadrada uniforme a todo el ancho */
  .product-miniature .thumbnail-top {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .product-miniature .product-thumbnail {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product-miniature .product-thumbnail img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Bloque de contenido compacto: título (2 líneas reservadas)
     + precio anclado abajo. Alturas en em para tolerar el
     escalado de texto del usuario (~125%). */
  .product-miniature .product-description {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 5px 9px !important;
    text-align: center !important;
  }

  .product-miniature .product-title {
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 0 2px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
    min-height: 2.44em !important;
  }

  .product-miniature .product-title a {
    color: #555 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    min-height: 0 !important;
  }

  .product-miniature .product-price-and-shipping {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-height: 1.25em !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #111 !important;
  }

  .product-miniature .regular-price {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #888 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
  }

  .product-miniature .price {
    white-space: nowrap !important;
  }

  /* El descuento ya se muestra como badge en la esquina:
     no duplicarlo dentro de la línea de precio */
  .product-miniature .product-price-and-shipping .discount-product {
    display: none !important;
  }

  /* ------------------------------
     RETIRAR "VER MÁS" EXPERIMENTAL
     ------------------------------ */

  #description.bm-collapsed,
  #description.bm-expanded {
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
  }

  #description.bm-collapsed::after {
    display: none !important;
    content: none !important;
  }

  .bm-readmore-btn {
    display: none !important;
  }

  /* ------------------------------
     LOGIN / INICIAR SESIÓN
     ------------------------------ */

  body#authentication #wrapper,
  body#password #wrapper,
  body#registration #wrapper,
  body#identity #wrapper {
    padding-top: 18px !important;
  }

  body#authentication .page-header,
  body#password .page-header,
  body#registration .page-header,
  body#identity .page-header {
    margin: 0 0 18px !important;
    padding: 0 18px !important;
  }

  body#authentication h1,
  body#authentication h1.h1,
  body#authentication .page-header h1,
  body#password h1,
  body#password h1.h1,
  body#registration h1,
  body#registration h1.h1,
  body#identity h1,
  body#identity h1.h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  body#authentication .login-form,
  body#authentication .register-form,
  body#password .forgotten-password,
  body#registration .register-form {
    margin: 0 18px 24px !important;
    padding: 22px 18px !important;
    max-width: calc(100% - 36px) !important;
  }

  body#authentication .form-group,
  body#password .form-group,
  body#registration .form-group {
    display: block !important;
    margin-bottom: 18px !important;
  }

  body#authentication .form-control-label,
  body#authentication label,
  body#password .form-control-label,
  body#password label,
  body#registration .form-control-label,
  body#registration label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  body#authentication .col-md-3,
  body#authentication .col-md-6,
  body#authentication .col-md-8,
  body#authentication .col-md-9,
  body#password .col-md-3,
  body#password .col-md-6,
  body#password .col-md-8,
  body#password .col-md-9,
  body#registration .col-md-3,
  body#registration .col-md-6,
  body#registration .col-md-8,
  body#registration .col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body#authentication .form-control,
  body#password .form-control,
  body#registration .form-control {
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    font-size: 16px !important;
    line-height: 46px !important;
  }

  body#authentication .input-group,
  body#password .input-group,
  body#registration .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body#authentication .input-group .form-control,
  body#password .input-group .form-control,
  body#registration .input-group .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body#authentication .input-group .input-group-btn,
  body#password .input-group .input-group-btn,
  body#registration .input-group .input-group-btn {
    flex: 0 0 96px !important;
    width: 96px !important;
    max-width: 96px !important;
  }

  body#authentication .input-group .btn,
  body#password .input-group .btn,
  body#registration .input-group .btn {
    width: 96px !important;
    max-width: 96px !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  body#authentication .forgot-password,
  body#authentication .no-account,
  body#password .forgot-password {
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  body#authentication .form-footer,
  body#password .form-footer,
  body#registration .form-footer {
    text-align: center !important;
  }

  body#authentication .form-footer .btn,
  body#authentication .form-footer .btn-primary,
  body#authentication button[type="submit"],
  body#password button[type="submit"],
  body#registration button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 12px 16px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* ------------------------------
     MODAL AL AÑADIR AL CARRITO
     ------------------------------ */

  #blockcart-modal .modal-dialog {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;
  }

  #blockcart-modal .modal-content {
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }

  #blockcart-modal .modal-header {
    padding: 14px 16px !important;
  }

  #blockcart-modal .modal-body {
    padding: 18px 14px 120px !important;
  }

  #blockcart-modal .product-image {
    max-width: 220px !important;
    margin: 0 auto 18px !important;
    display: block !important;
  }

  #blockcart-modal .product-name,
  #blockcart-modal .h6,
  #blockcart-modal h6 {
    font-size: 21px !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
    color: #2fb6ca !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  #blockcart-modal .cart-content {
    width: 100% !important;
  }

  #blockcart-modal .cart-content p {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  #blockcart-modal .cart-content .cart-content-btn {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  /* ------------------------------
     CARRITO / CHECKOUT / SOLICITAR PRESUPUESTO
     ------------------------------ */

  body#cart .cart-grid,
  body#checkout .cart-grid {
    padding-bottom: 110px !important;
  }

  body#cart .cart-detailed-actions,
  body#checkout .cart-detailed-actions {
    padding-bottom: 30px !important;
  }

  body#cart .cart-detailed-actions .btn,
  body#cart .checkout .btn-primary,
  body#cart .cart-summary .btn-primary,
  body#cart a.btn-primary,
  body#checkout .cart-detailed-actions .btn,
  body#checkout .checkout .btn-primary,
  body#checkout .cart-summary .btn-primary,
  body#checkout a.btn-primary,
  #blockcart-modal .btn-primary,
  #blockcart-modal .btn-secondary,
  #blockcart-modal .cart-content-btn .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 10px 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-align: center !important;
    line-height: 1.1 !important;
    font-size: 15px !important;
    letter-spacing: -0.2px !important;
  }

  body#cart .cart-detailed-actions .btn .material-icons,
  body#cart .checkout .btn-primary .material-icons,
  body#checkout .cart-detailed-actions .btn .material-icons,
  body#checkout .checkout .btn-primary .material-icons,
  #blockcart-modal .btn-primary .material-icons,
  #blockcart-modal .btn-secondary .material-icons {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  body#cart .cart-summary-line,
  body#checkout .cart-summary-line {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  body#cart .cart-summary-line .label,
  body#checkout .cart-summary-line .label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  body#cart .cart-summary-line .value,
  body#checkout .cart-summary-line .value {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Cantidad dentro del carrito */
  body#cart .bootstrap-touchspin {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
  }

  body#cart .bootstrap-touchspin input,
  body#cart input.js-cart-line-product-quantity {
    width: 50px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    line-height: 46px !important;
  }

  body#cart .bootstrap-touchspin .input-group-btn-vertical {
    width: 24px !important;
    height: 46px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body#cart .bootstrap-touchspin .btn-touchspin {
    width: 24px !important;
    height: 23px !important;
    padding: 0 !important;
    line-height: 21px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Ajustes para móviles muy estrechos */
@media (max-width: 380px) {
  body#authentication h1,
  body#authentication h1.h1,
  body#authentication .page-header h1 {
    font-size: 25px !important;
  }

  body#cart .cart-detailed-actions .btn,
  body#cart .checkout .btn-primary,
  body#cart .cart-summary .btn-primary,
  body#cart a.btn-primary,
  body#checkout .cart-detailed-actions .btn,
  body#checkout .checkout .btn-primary,
  body#checkout .cart-summary .btn-primary,
  body#checkout a.btn-primary,
  #blockcart-modal .btn-primary,
  #blockcart-modal .btn-secondary,
  #blockcart-modal .cart-content-btn .btn {
    font-size: 14px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 4px !important;
  }
}
/* ==========================================================
   BIJUYMODA MOBILE PATCH 2
   Ocultar pestañas "Descripción" y "Detalles del producto" en móvil
   Mantiene visible el contenido de la descripción
   ========================================================== */

@media (max-width: 767px) {

  /* Ocultar los títulos/pestañas de producto */
  body#product .tabs .nav-tabs,
  body#product .tabs ul.nav-tabs,
  body#product .tabs .nav-item,
  body#product .tabs .nav-link {
    display: none !important;
  }

  /* Quitar espacio visual del bloque de pestañas */
  body#product .tabs {
    margin-top: 24px !important;
    padding-top: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  body#product .tabs .tab-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  /* Mantener visible la descripción aunque ya no haya pestaña */
  body#product #description,
  body#product #description.tab-pane,
  body#product #description.fade,
  body#product #description.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Ocultar detalles del producto en móvil */
  body#product #product-details {
    display: none !important;
  }
}
/* ==========================================================
   BIJUYMODA MOBILE PATCH 3
   Ficha producto: corregir cantidad + flechas en móvil
   ========================================================== */

@media (max-width: 767px) {

  body#product .product-actions .product-add-to-cart {
    margin-top: 22px !important;
  }

  body#product .product-actions .product-quantity {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 22px !important;
  }

  body#product .product-actions .product-quantity .qty {
    flex: 0 0 88px !important;
    width: 88px !important;
    max-width: 88px !important;
    margin: 0 !important;
  }

  body#product .product-actions .bootstrap-touchspin {
    display: grid !important;
    grid-template-columns: 58px 30px !important;
    grid-template-rows: 29px 29px !important;
    width: 88px !important;
    height: 58px !important;
    max-width: 88px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#product .product-actions .bootstrap-touchspin input,
  body#product .product-actions #quantity_wanted {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 22px !important;
    line-height: 58px !important;
    border-radius: 0 !important;
  }

  body#product .product-actions .bootstrap-touchspin .input-group-btn-vertical {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 30px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#product .product-actions .bootstrap-touchspin .btn-touchspin {
    position: static !important;
    width: 30px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  body#product .product-actions .bootstrap-touchspin .btn-touchspin i,
  body#product .product-actions .bootstrap-touchspin .btn-touchspin .material-icons {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  body#product .product-actions .product-quantity .add {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body#product .product-actions .add-to-cart {
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body#product .product-actions .add-to-cart .material-icons,
  body#product .product-actions .add-to-cart i {
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Ajuste extra para móviles estrechos */
@media (max-width: 380px) {
  body#product .product-actions .product-quantity {
    gap: 10px !important;
  }

  body#product .product-actions .product-quantity .qty {
    flex-basis: 82px !important;
    width: 82px !important;
    max-width: 82px !important;
  }

  body#product .product-actions .bootstrap-touchspin {
    grid-template-columns: 54px 28px !important;
    width: 82px !important;
    max-width: 82px !important;
  }

  body#product .product-actions .bootstrap-touchspin input,
  body#product .product-actions #quantity_wanted {
    width: 54px !important;
    font-size: 20px !important;
  }

  body#product .product-actions .bootstrap-touchspin .input-group-btn-vertical,
  body#product .product-actions .bootstrap-touchspin .btn-touchspin {
    width: 28px !important;
  }

  body#product .product-actions .add-to-cart {
    font-size: 15px !important;
    gap: 6px !important;
  }

  body#product .product-actions .add-to-cart .material-icons,
  body#product .product-actions .add-to-cart i {
    font-size: 24px !important;
  }
}
/* ==========================================================
   BIJUYMODA MOBILE PATCH 3B
   Ficha producto: restaurar iconos de cantidad + / -
   ========================================================== */

@media (max-width: 767px) {

  body#product .product-actions .bootstrap-touchspin .bootstrap-touchspin-up,
  body#product .product-actions .bootstrap-touchspin .bootstrap-touchspin-down {
    position: static !important;
    color: #222 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  body#product .product-actions .bootstrap-touchspin .bootstrap-touchspin-up i,
  body#product .product-actions .bootstrap-touchspin .bootstrap-touchspin-down i {
    display: none !important;
  }

  body#product .product-actions .bootstrap-touchspin .bootstrap-touchspin-up::before,
  body#product .product-actions .bootstrap-touchspin .bootstrap-touchspin-down::before {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: #222 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 29px !important;
  }

  body#product .product-actions .bootstrap-touchspin .bootstrap-touchspin-up::before {
    content: "⌃" !important;
  }

  body#product .product-actions .bootstrap-touchspin .bootstrap-touchspin-down::before {
    content: "⌄" !important;
  }
}
/* ==========================================================
   BIJUYMODA MOBILE PATCH 4 — MENU CLEAN
   Menú móvil: textos largos visibles, tamaño compacto y flechas alineadas
   ========================================================== */

@media (max-width: 767px) {

  #mobile_top_menu_wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #mobile_top_menu_wrapper .top-menu,
  #mobile_top_menu_wrapper .top-menu ul,
  #mobile_top_menu_wrapper .top-menu li,
  #mobile_top_menu_wrapper .top-menu .sub-menu {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #mobile_top_menu_wrapper .top-menu li {
    position: relative !important;
    border-bottom: 1px solid #eeeeee !important;
  }

  #mobile_top_menu_wrapper .top-menu a,
  #mobile_top_menu_wrapper .top-menu .dropdown-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 46px 10px 18px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    color: #777 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    min-height: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Categorías principales */
  #mobile_top_menu_wrapper .top-menu > li > a,
  #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
  }

  /* Subcategorías */
  #mobile_top_menu_wrapper .top-menu a[data-depth="1"] {
    font-size: 15px !important;
    padding-left: 30px !important;
    color: #222 !important;
  }

  #mobile_top_menu_wrapper .top-menu a[data-depth="2"] {
    font-size: 14px !important;
    padding-left: 42px !important;
    color: #555 !important;
  }

  /* Quitar borde negro / foco visual raro al abrir categorías */
  #mobile_top_menu_wrapper a:focus,
  #mobile_top_menu_wrapper button:focus,
  #mobile_top_menu_wrapper .navbar-toggler:focus,
  #mobile_top_menu_wrapper .collapse-icons:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  /* Flechas del desplegable */
  #mobile_top_menu_wrapper .top-menu .navbar-toggler,
  #mobile_top_menu_wrapper .top-menu .collapse-icons {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  #mobile_top_menu_wrapper .top-menu .collapse-icons i,
  #mobile_top_menu_wrapper .top-menu .navbar-toggler i,
  #mobile_top_menu_wrapper .top-menu .material-icons {
    font-size: 22px !important;
    line-height: 22px !important;
  }

  /* Idioma / teléfono del pie del menú */
  #mobile_top_menu_wrapper .language-selector,
  #mobile_top_menu_wrapper .currency-selector,
  #mobile_top_menu_wrapper .contact-rich,
  #mobile_top_menu_wrapper .contact-link {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
}
/* ==========================================================
   BIJUYMODA MOBILE PATCH 5
   Footer móvil: recuperar margen lateral y evitar textos cortados
   ========================================================== */

@media (max-width: 767px) {

  #footer,
  .footer-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #footer .container,
  .footer-container .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #footer .row,
  .footer-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #footer [class*="col-"],
  .footer-container [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #footer .block-contact,
  #footer .footer-block,
  #footer .links,
  .footer-container .block-contact,
  .footer-container .footer-block,
  .footer-container .links {
    width: 100% !important;
    max-width: 100% !important;
  }

  #footer .h3,
  #footer .h4,
  #footer .title,
  #footer .title_block,
  .footer-container .h3,
  .footer-container .h4,
  .footer-container .title,
  .footer-container .title_block {
    padding-left: 0 !important;
    margin-left: 0 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  #footer a,
  #footer p,
  #footer li,
  .footer-container a,
  .footer-container p,
  .footer-container li {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}
/* ==========================================================
   BIJUYMODA SOCIAL ICONS V3
   Footer: usar iconos nativos del tema y hacerlos visibles
   TikTok se resuelve aparte porque Classic no trae icono nativo
   ========================================================== */

#footer .block-social,
.footer-container .block-social {
  width: 100% !important;
  max-width: 100% !important;
  margin: 22px 0 32px !important;
  padding: 0 !important;
  text-align: left !important;
}

#footer .block-social ul,
.footer-container .block-social ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#footer .block-social li,
.footer-container .block-social li {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
  position: relative !important;
  overflow: hidden !important;

  background-color: #666 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 22px 22px !important;

  border: none !important;
  border-radius: 4px !important;
}

/* Mantener el icono nativo del tema, ocultando solo el texto */
#footer .block-social li a,
.footer-container .block-social li a {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;

  text-indent: -9999px !important;
  overflow: hidden !important;
  white-space: nowrap !important;

  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
}

/* No crear pseudo-iconos sobre Facebook / YouTube / Instagram / LinkedIn */
#footer .block-social li:not(.tiktok) a::before,
#footer .block-social li:not(.tiktok) a::after,
.footer-container .block-social li:not(.tiktok) a::before,
.footer-container .block-social li:not(.tiktok) a::after {
  display: none !important;
  content: none !important;
}

/* Hover escritorio */
@media (min-width: 768px) {
  #footer .block-social li:hover,
  .footer-container .block-social li:hover {
    background-color: #2fb6ca !important;
  }
}



/* Ajuste móvil */
@media (max-width: 767px) {
  #footer .block-social,
  .footer-container .block-social {
    margin: 22px 0 34px !important;
  }

  #footer .block-social ul,
  .footer-container .block-social ul {
    gap: 12px !important;
  }

  #footer .block-social li,
  .footer-container .block-social li,
  #footer .block-social li a,
  .footer-container .block-social li a {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}
/* ==========================================================
   BIJUYMODA MOBILE PATCH 7
   Bloque texto personalizado: más ancho y legible en móvil
   ========================================================== */

@media (max-width: 767px) {

  #custom-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px 0 32px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
  }

  #custom-text > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #ddd !important;
  }

  #custom-text h2 {
    font-size: 21px !important;
    line-height: 1.25 !important;
    margin: 0 0 14px !important;
    text-align: left !important;
    font-weight: 700 !important;
  }

  #custom-text p {
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin: 0 0 12px !important;
    text-align: left !important;
  }

  #custom-text p:last-child {
    margin-bottom: 0 !important;
  }

  #custom-text strong {
    font-weight: 700 !important;
  }

  #custom-text a {
    color: #2fb6ca !important;
    font-weight: 600 !important;
    word-break: break-word !important;
  }
}
/* ==========================================================
   BIJUYMODA MOBILE PATCH 8 — v3
   Basado en HTML real del módulo onepagecheckoutps
   Solo afecta viewports ≤ 767px. Cero impacto en escritorio.
   ========================================================== */

@media (max-width: 767px) {

  /* ============================================================
     1. CABECERA: "Solicitar presupuesto" en una sola línea
     El h1 rompe en dos líneas porque font-size es demasiado
     grande para el padding del contenedor. Se reduce.
     ============================================================ */

  #div_onepagecheckoutps_info h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #div_onepagecheckoutps_info p {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 4px 0 0 !important;
  }

  /* ============================================================
     2. COLUMNAS LATERALES: forzar ambas columnas a ancho completo
     El layout tiene col-md-4 (formulario) y col-md-8 (envío/pago/
     resumen). En móvil Bootstrap xs ya los pone al 100%, pero
     col-lg-6 dentro del col-md-8 los divide a mitad en algunos
     viewports intermedios. Forzamos todo a 100% en móvil.
     ============================================================ */

  #onepagecheckoutps .col-md-4,
  #onepagecheckoutps .col-md-8 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Margen lateral para los bloques de envío, pago y resumen */
  #onepagecheckoutps_step_two_container,
  #onepagecheckoutps_step_three_container,
  #onepagecheckoutps_step_review_container {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* ============================================================
     3. MÉTODO DE ENVÍO
     Estructura real: col-xs-1 (radio) | col-xs-3 (logo) | col-xs-8 (texto)
     El problema: el contenedor padre se estrecha → las cols calculan
     % sobre ancho reducido → texto comprimido a 1-2 palabras/línea.
     Solución: dejar que Bootstrap maneje las cols xs normalmente,
     pero forzar el padding interno del alert para dar espacio al texto.
     ============================================================ */

  .delivery-option.alert {
    padding: 10px !important;
  }

  /* La col del logo ocupa col-xs-3 = 25%.
     img-thumbnail de Bootstrap tiene max-width:100% que hay que
     superar con un selector más específico. */
  #shipping_container .delivery_option_logo img.img-thumbnail,
  #shipping_container .delivery_option_logo img {
    width: 56px !important;
    max-width: 56px !important;
    min-width: 56px !important;
    height: auto !important;
    display: block !important;
  }

  #shipping_container .delivery_option_title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
    word-break: break-word !important;
  }

  #shipping_container .delivery_option_price {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #555 !important;
  }

  /* ============================================================
     4. MÉTODO DE PAGO
     Misma estructura: col-xs-1 | col-xs-3 | col-xs-8
     Mismo problema y misma solución.
     ============================================================ */

  #payment_method_container .module_payment_container.alert {
    padding: 10px !important;
  }

  #payment_method_container .payment_image img.img-thumbnail,
  #payment_method_container .payment_image img {
    width: 56px !important;
    max-width: 56px !important;
    min-width: 56px !important;
    height: auto !important;
    display: block !important;
  }

  #payment_method_container .payment_content span {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
    word-break: break-word !important;
  }

  #payment_method_container .payment_content p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    word-break: break-word !important;
  }

  /* ============================================================
     5. RESUMEN DEL PEDIDO
     Solo dos fixes no invasivos: clearfix en filas y margen
     derecho entre imagen y título. No se toca nada más para
     no interferir con el layout Bootstrap del módulo.
     ============================================================ */

  /* Clearfix: evita que los floats se salgan del contenedor */
  #order-detail-content .cart_item::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
  }

  /* Margen derecho entre imagen y título del producto */
  #order-detail-content .image_product {
    padding-right: 10px !important;
  }

  /* ============================================================
     6. CÓDIGO DE DESCUENTO
     El enlace colapsa/expande. Se reduce a texto pequeño discreto,
     sin borde ni fondo propio. El input queda oculto por defecto
     (Bootstrap collapse), solo aparece al pulsar.
     ============================================================ */

  #list-voucher-allowed {
    margin: 6px 0 !important;
    padding: 0 !important;
  }

  #list-voucher-allowed .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #list-voucher-allowed .col-xs-12 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  a.promo-code-button {
    font-size: 12px !important;
    color: #999 !important;
    text-decoration: underline !important;
    padding: 2px 0 !important;
    display: inline-block !important;
  }

  /* El panel colapsable con input + botón: compacto cuando se abre */
  .promo-code.collapse {
    margin-top: 6px !important;
  }

  #discount_name {
    font-size: 14px !important;
    height: 36px !important;
    padding: 4px 8px !important;
    width: calc(100% - 72px) !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  #submitAddDiscount {
    width: 64px !important;
    height: 36px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    display: inline-block !important;
  }

  /* ============================================================
     6. COMENTARIO DEL PEDIDO
     Reducir el párrafo descriptivo a texto pequeño
     ============================================================ */

  #div_leave_message {
    margin-top: 8px !important;
  }

  #div_leave_message p {
    font-size: 12px !important;
    color: #888 !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  #message {
    font-size: 14px !important;
    min-height: 60px !important;
    padding: 6px 8px !important;
  }

  /* ============================================================
     7. BOTONES FINALES
     - El contenedor tiene width: 430px inline — se sobreescribe
     - padding-bottom para no quedar tapado por widget Chatear
     ============================================================ */

  #container_float_review {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
  }

  #buttons_footer_review {
    padding-bottom: 72px !important;
  }

  #buttons_footer_review .col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  /* Botón "Añadir más productos" — enlace discreto */
  #btn_continue_shopping {
    font-size: 13px !important;
    padding: 8px 4px !important;
  }

  /* Botón principal "Solicitar presupuesto" */
  #btn_place_order {
    min-height: 48px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
  }

  #btn_place_order .botton_compra {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* ============================================================
     8. INPUTS DEL FORMULARIO
     font-size: 16px evita zoom automático en iOS/Android
     ============================================================ */

  #onepagecheckoutps input.form-control,
  #onepagecheckoutps select.form-control,
  #onepagecheckoutps textarea.form-control {
    font-size: 16px !important;
    -webkit-appearance: none !important;
  }

  /* ============================================================
     9. BOTÓN "¿Ya estás registrado?"
     Actualmente aparece como botón grande de bloque completo.
     Se reduce a tamaño compacto.
     ============================================================ */

  #opc_show_login {
    font-size: 13px !important;
    padding: 5px 10px !important;
    min-height: auto !important;
    display: inline-block !important;
    width: auto !important;
    float: none !important;
  }

}
/* ==========================================================================
   BIJUYMODA DESKTOP IMAGE MODAL FIX - GATE 2A FINAL ALIGNMENT
   Objetivo: galería tipo lightbox — imagen grande + miniaturas abajo + flechas laterales
   Aplica solo en escritorio (>= 768px). Móvil no se toca.
   ========================================================================== */
@media (min-width: 768px) {

    /* ── 1. Diálogo del modal: amplio ─────────────────────────────────────── */
    #product-modal .modal-dialog {
        max-width: 960px !important;
        width: 90vw !important;
        margin: 30px auto !important;
    }

    /* ── 2. modal-content: SIN fondo negro — heredar el blanco del tema ───── */
    #product-modal .modal-content {
        background: transparent !important;
        border: none !important;
        border-radius: 6px !important;
    }

    /* ── 3. modal-body: layout columna, SIN fondo negro ──────────────────── */
    #product-modal .modal-content .modal-body {
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 20px !important;
        background: #fff !important;   /* blanco — el overlay oscuro ya viene del backdrop */
    }

    /* ── 4. Wrapper figura: posición relative para anclar las flechas ─────── */
    #product-modal .modal-content .modal-body .bm-figure-wrap {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── 4b. Stage de imagen: contiene imagen y botones laterales ────────── */
    #product-modal .bm-image-stage {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── 5. Imagen principal: grande y centrada ───────────────────────────── */
    #product-modal .modal-content .modal-body .product-cover-modal {
        max-height: 65vh !important;
        max-width: calc(100% - 100px) !important;  /* espacio para las flechas laterales */
        width: auto !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        background: transparent !important;
        object-fit: contain !important;
    }

    /* ── 6. Caption: blanco coherente ─────────────────────────────────────── */
    #product-modal .modal-content .modal-body .image-caption {
        display: block !important;
        width: 100% !important;
        margin-top: 8px !important;
        background: #fff !important;
        border-top: 1px solid #eee !important;
        color: #333 !important;
    }

    /* ── 7. Botones de navegación lateral ◄ / ► ──────────────────────────── */
    #product-modal .bm-nav-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 20 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        border: none !important;
        background: rgba(0, 0, 0, 0.45) !important;
        color: #fff !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.2s ease, opacity 0.2s ease !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    #product-modal .bm-nav-btn:hover:not(:disabled) {
        background: rgba(0, 0, 0, 0.7) !important;
    }

    #product-modal .bm-prev {
        left: 4px !important;
    }

    #product-modal .bm-next {
        right: 4px !important;
    }

    /* ── 8. Bloque de miniaturas: tira horizontal abajo ──────────────────── */
    #product-modal .modal-content .modal-body .thumbnails {
        order: 2 !important;
        width: 100% !important;
        position: static !important;
    }

    /* ── 9. Máscara: scroll horizontal, sin overflow vertical que bloquee ─── */
    #product-modal .modal-content .modal-body .mask {
        max-height: none !important;
        margin-top: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        width: 100% !important;
    }

    /* ── 10. Lista de miniaturas: fila horizontal ─────────────────────────── */
    #product-modal .modal-content .modal-body .product-images {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-left: 0 !important;
        padding: 4px 0 !important;
        list-style: none !important;
    }

    #product-modal .modal-content .modal-body .product-images li {
        flex-shrink: 0 !important;
    }

    /* ── 11. Miniaturas individuales: clicables, cuadradas ─────────────────── */
    #product-modal .modal-content .modal-body .product-images img {
        width: 80px !important;
        height: 80px !important;
        object-fit: cover !important;
        border: 2px solid #ddd !important;
        border-radius: 3px !important;
        cursor: pointer !important;
        transition: border-color 0.2s ease !important;
    }

    #product-modal .modal-content .modal-body .product-images img:hover,
    #product-modal .modal-content .modal-body .product-images img.selected {
        border: 2px solid #24b9d7 !important;
    }

    /* ── 12. Flechas verticales legacy: OCULTAS en desktop ───────────────── */
    #product-modal .modal-content .modal-body .arrows {
        display: none !important;
    }
}

/* ==========================================================
   BIJUYMODA PRODUCT DESCRIPTION FULL WIDTH — PATCH A
   product_tabs movido bajo la fila principal a ancho completo
   + plegado accesible de la descripcion larga (solo overflow real)
   Clases aisladas con prefijo bm-product-description-
   ========================================================== */

.bm-product-description-fullwidth {
  margin-top: 30px;
  clear: both;
}

.bm-product-description-collapse {
  position: relative;
}

.bm-product-description-collapse.bm-product-description--collapsed {
  max-height: 450px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .bm-product-description-collapse.bm-product-description--collapsed {
    max-height: 300px;
  }
}

.bm-product-description-collapse.bm-product-description--collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  pointer-events: none;
}

.bm-product-description-toggle {
  display: block;
  margin: 14px auto 4px;
  padding: 10px 24px;
  background: #fff;
  border: 1px solid #2fb6ca;
  border-radius: 4px;
  color: #2fb6ca;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.bm-product-description-toggle:hover,
.bm-product-description-toggle:focus {
  background: #2fb6ca;
  color: #fff;
}

.bm-product-description-toggle[hidden] {
  display: none;
}

/* ==========================================================
   BIJUYMODA MOBILE UTILITIES BAR
   Barra superior movil compacta: telefono (tel:) a la
   izquierda y selector de idioma nativo a la derecha.
   El selector lo rellena theme.js via #_mobile_language_selector
   (swap _desktop_/_mobile_). Solo afecta a movil (<768px).
   ========================================================== */
@media (max-width: 767px) {
  .bm-mobile-utilities-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.375rem;
    padding: 0 0.9375rem;
    background: #fafafa;
    border-bottom: 1px solid #e5e5e5;
  }

  .bm-mobile-utilities-phone {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    min-height: 2.375rem;
    padding-right: 0.625rem;
    color: #232323;
    font-size: 0.8125rem;
    text-decoration: none;
  }

  .bm-mobile-utilities-phone:hover,
  .bm-mobile-utilities-phone:focus {
    color: #232323;
    text-decoration: none;
  }

  .bm-mobile-utilities-phone .material-icons {
    font-size: 1.0625rem;
    margin-right: 0.3125rem;
  }

  .bm-mobile-utilities-lang {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    min-height: 2.375rem;
  }

  .bm-mobile-utilities-lang #language-selector-label {
    display: none;
  }

  .bm-mobile-utilities-lang .language-selector-wrapper {
    padding: 0;
  }

  .bm-mobile-utilities-lang select.link {
    font-size: 0.8125rem;
    color: #232323;
    background: transparent;
    border: none;
    max-width: 8.5rem;
  }
}

@media (min-width: 768px) {
  .bm-mobile-utilities-bar {
    display: none;
  }
}

/* === BM out-of-stock product cards — PRESTASHOP_OUT_OF_STOCK_PRODUCT_CARDS_V1 (staging 2026-06-11) === */
.bm-product-out-of-stock-card .thumbnail-top {
  position: relative;
}
.bm-product-out-of-stock-card .thumbnail-top .product-thumbnail img {
  opacity: 0.5;
}
.bm-product-out-of-stock-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  background: rgba(25, 25, 25, 0.82);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.5em 1em;
  border-radius: 2px;
  white-space: nowrap;
  max-width: 94%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-product-out-of-stock-card .product-flag.out_of_stock {
  display: none;
}

/* ==========================================================
   PRODUCT CARDS MOBILE FIRST V2 — BADGES (móvil + escritorio)
   NUEVO verde, descuento rojo, esquina superior izquierda,
   sin franjas completas. "¡EN OFERTA!" se oculta cuando ya
   existe badge de descuento.
   ========================================================== */

.product-miniature .product-flags {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 80% !important;
  list-style: none !important;
  pointer-events: none !important;
}

.product-miniature li.product-flag {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  background: #6c757d !important;
  color: #fff !important;
}

.product-miniature li.product-flag.new {
  background: #2e9e44 !important;
}

.product-miniature li.product-flag.discount {
  background: #d92b2f !important;
}

.product-miniature li.product-flag.on-sale {
  background: #e8833a !important;
}

.product-miniature .product-flags:has(li.product-flag.discount) li.product-flag.on-sale {
  display: none !important;
}

/* ==========================================================
   PRODUCT CARDS MOBILE FIRST V2 — ESCRITORIO (>= 768px)
   Mismo lenguaje visual que móvil: imagen cuadrada dominante,
   contenido centrado, título a 2 líneas reservadas, precio
   anclado abajo y alturas uniformes. Mantiene el número de
   columnas Bootstrap actual (col-sm-6 / col-lg-4 / col-xl-3).
   ========================================================== */

@media (min-width: 768px) {

  .products .js-product.product {
    display: flex !important;
  }

  .products .js-product.product article.product-miniature {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .product-miniature .thumbnail-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .product-miniature .thumbnail-top {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .product-miniature .product-thumbnail {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product-miniature .product-thumbnail img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* El tema Classic posiciona la descripción en absoluto con
     ancho fijo: se devuelve al flujo para alturas uniformes */
  .product-miniature .product-description {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 8px 12px !important;
    text-align: center !important;
    box-shadow: none !important;
  }

  .product-miniature .product-title {
    width: 100% !important;
    margin: 0 0 5px !important;
    padding: 0 2px !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    min-height: 2.5em !important;
  }

  .product-miniature .product-title a {
    color: #555 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .product-miniature .product-price-and-shipping {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    column-gap: 7px !important;
    width: 100% !important;
    min-height: 1.25em !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #111 !important;
  }

  .product-miniature .regular-price {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #888 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
  }

  .product-miniature .price {
    white-space: nowrap !important;
  }

  .product-miniature .product-price-and-shipping .discount-product {
    display: none !important;
  }
}

/* ==========================================================
   PRODUCT PAGE FLAGS V2 — FICHA DE PRODUCTO (móvil + escritorio)
   Mismo lenguaje visual compacto que las tarjetas V2 de la home:
   NUEVO verde, descuento rojo, esquina superior izquierda de la
   imagen principal. La franja completa "¡EN OFERTA!" se oculta
   cuando ya existe badge de descuento (igual que en tarjetas).
   Anclaje: #product #content ya es position:relative en theme.css.
   pointer-events:none para no interferir con el zoom de la imagen.
   No afecta a home/listados (.product-miniature intacto).
   ========================================================== */

body#product #content > .product-flags {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 80% !important;
  list-style: none !important;
  pointer-events: none !important;
}

body#product #content > .product-flags li.product-flag {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  background: #6c757d !important;
  color: #fff !important;
  pointer-events: none !important;
}

body#product #content > .product-flags li.product-flag.new {
  background: #2e9e44 !important;
}

body#product #content > .product-flags li.product-flag.discount {
  background: #d92b2f !important;
}

body#product #content > .product-flags li.product-flag.on-sale {
  background: #e8833a !important;
}

body#product #content > .product-flags:has(li.product-flag.discount) li.product-flag.on-sale {
  display: none !important;
}

/* ==========================================================
   PROMO UI SANITIZATION — BLOQUE DE PRECIOS (ficha + quickview)
   Coherencia con el sistema compacto V2 de tarjetas:
   - precio actual oscuro y protagonista (#232323, como cards),
   - "AHORRE UN …" / "% DE DESCUENTO" como badge rojo compacto,
   - precio regular tachado gris,
   - precio unitario como información auxiliar gris,
   - retirada de naranja legacy (#f39d72) y azul legacy (#24b9d7)
     del bloque promocional.
   No toca: tabla de descuentos por volumen, impuestos, entrega.
   ========================================================== */

body#product .product-prices .product-price,
body#product .product-prices .product-price.has-discount,
body#product .product-prices .current-price,
body#product .product-prices .current-price-value,
.quickview .product-prices .product-price,
.quickview .product-prices .product-price.has-discount,
.quickview .product-prices .current-price,
.quickview .product-prices .current-price-value {
  color: #232323 !important;
  font-weight: 700 !important;
}

body#product .product-prices .product-discount .regular-price,
.quickview .product-prices .product-discount .regular-price {
  color: #7a7a7a !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}

body#product .product-prices .has-discount .discount,
.quickview .product-prices .has-discount .discount {
  display: inline-block !important;
  padding: 3px 6px !important;
  margin-left: 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  background: #d92b2f !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

body#product .product-prices .product-unit-price,
body#product .product-prices .has-discount .product-unit-price,
.quickview .product-prices .product-unit-price,
.quickview .product-prices .has-discount .product-unit-price {
  margin: 2px 0 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: #7a7a7a !important;
}

/* ==========================================================
   PROMO UI SANITIZATION — RETIRADA GLOBAL DEL FLAG LEGACY
   "¡EN OFERTA!" (on-sale) en el frontend público: tarjetas
   (home/listados/categorías) y ficha de producto. El estado
   promocional queda comunicado por el badge rojo de descuento
   y el bloque de precios saneado. NUEVO y AGOTADO intactos.
   ========================================================== */

.product-miniature li.product-flag.on-sale,
body#product #content > .product-flags li.product-flag.on-sale {
  display: none !important;
}

/* ==========================================================
   FICHA — ANCHO ÚTIL DE LA DESCRIPCIÓN LARGA
   El tema impone .tabs { padding: 1.25rem 1.875rem } (30px
   laterales) que, sumados a los gutters del container, dejan
   líneas demasiado cortas en móvil. Se reduce solo el padding
   horizontal del bloque de descripción de la ficha, manteniendo
   margen lateral deliberado. No afecta a otros usos de .tabs
   ni al plegado/botón "Ver descripción completa".
   ========================================================== */

body#product .bm-product-description-fullwidth .tabs {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (max-width: 767px) {
  body#product .bm-product-description-fullwidth .tabs {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ==========================================================
   PRESTASHOP_CATEGORY_UX_FOUNDATION — staging 2026-06-12
   Sistema común de páginas de categoría:
   1. Contenido a ancho completo (el sidebar duplicado se retira
      en category.tpl, solo en categorías).
   2. Cabecera integrada: H1 + descripción plegable (el contenido
      SEO completo permanece en el DOM, sin bloquear el catálogo).
   3. Breadcrumb compacto visible en móvil (solo categorías).
   4. Subcategorías en cuadrícula compacta pulsable
      (2 col móvil / auto-fill escritorio).
   5. Toolbar única: contador + ordenación en una sola barra.
   No toca: tarjetas V2, badges, AGOTADO, precios, quickview,
   ficha, header, menú móvil, drawer, carrito, checkout.
   ========================================================== */

/* ── 1. Ancho completo del contenido en categorías ───────────── */
body#category #content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── 2. Cabecera de categoría integrada (sin tarjeta blanca) ── */
body#category .block-category,
body#category .block-category.card,
body#category .block-category.card-block {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body#category .block-category h1 {
  margin: 8px 0 10px;
  font-size: 26px;
  line-height: 1.2;
  color: #232323;
  text-transform: none;
}

@media (max-width: 767px) {
  body#category .block-category h1 {
    margin: 6px 0 8px;
    font-size: 22px;
  }
}

/* Si la categoría tiene imagen de portada, fluye bajo el texto
   en lugar de posicionarse en absoluto sobre la cabecera */
body#category .block-category .category-cover {
  position: static !important;
  margin: 10px 0 0;
}

/* El tema hace flex de block-category-inner (descripción + cover en
   fila); con el plegado el botón quedaría como columna lateral.
   Flujo de bloque: descripción arriba, botón debajo. */
body#category .block-category .block-category-inner {
  display: block;
}

/* Descripción: tipografía contenida; el H2 interno del contenido
   no compite con el H1 de la página */
body#category #category-description {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

body#category #category-description h2,
body#category #category-description h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #555;
  text-transform: none;
}

body#category #category-description p {
  margin: 0 0 10px;
}

/* Plegado accesible de la descripción (mismo patrón validado que
   bm-product-description; el JS solo lo activa si hay overflow real) */
.bm-category-description-collapse {
  position: relative;
}

.bm-category-description-collapse.bm-category-description--collapsed {
  max-height: 132px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .bm-category-description-collapse.bm-category-description--collapsed {
    max-height: 110px;
  }
}

.bm-category-description-collapse.bm-category-description--collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  pointer-events: none;
}

.bm-category-description-toggle {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #2fb6ca;
  border-radius: 4px;
  color: #2fb6ca;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.bm-category-description-toggle:hover,
.bm-category-description-toggle:focus {
  background: #2fb6ca;
  color: #fff;
}

.bm-category-description-toggle[hidden] {
  display: none;
}

/* ── 3. Breadcrumb compacto visible en móvil (solo categorías) ── */
@media (max-width: 767px) {
  body#category nav.breadcrumb {
    display: block !important;
    margin: 0;
    padding: 10px 0 0;
    background: transparent;
  }

  body#category nav.breadcrumb ol {
    margin: 0;
    padding: 0;
  }

  body#category nav.breadcrumb li {
    font-size: 12px;
    line-height: 1.3;
  }

  body#category nav.breadcrumb a,
  body#category nav.breadcrumb span {
    font-size: 12px;
  }
}

/* ── 4. Subcategorías: cuadrícula compacta pulsable ──────────── */
/* Los selectores llevan #subcategories porque el tema estiliza
   #subcategories ul / ul li con ID (flex + min-width:200px) y hay
   que ganar esa especificidad. */
#subcategories.bm-subcategories {
  margin: 12px 0 18px;
  border-top: none;
}

#subcategories .bm-subcategories-title {
  margin: 0 0 8px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #777;
  border: none;
}

#subcategories ul.bm-subcategories-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  #subcategories ul.bm-subcategories-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }
}

/* Neutralizar estilos del tema para #subcategories ul li
   (float, ancho fijo, min-width y separaciones del diseño antiguo) */
#subcategories ul.bm-subcategories-grid li.bm-subcategories-item {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

#subcategories .bm-subcategory-link,
a.bm-subcategory-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  height: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #232323;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
}

#subcategories .bm-subcategory-link:hover,
#subcategories .bm-subcategory-link:focus,
a.bm-subcategory-link:hover,
a.bm-subcategory-link:focus {
  border-color: #2fb6ca;
  color: #2fb6ca;
  text-decoration: none;
}

/* ── 5. Toolbar única: contador + ordenación ─────────────────── */
#js-product-list-top.bm-listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 8px 12px;
  background: #f8f8f8;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
}

.bm-listing-toolbar .bm-listing-count {
  min-width: 0;
}

/* El tema añade padding-top a .total-products (desalinea la barra) */
.bm-listing-toolbar .total-products {
  padding-top: 0;
}

.bm-listing-toolbar .bm-listing-count p {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: #666;
}

.bm-listing-toolbar .bm-listing-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
}

.bm-listing-toolbar .bm-sort-label {
  margin: 0;
  font-size: 13px;
  color: #666;
  text-align: left;
  white-space: nowrap;
}

.bm-listing-toolbar .products-sort-order {
  width: auto;
  min-width: 0;
  padding: 0;
}

.bm-listing-toolbar .products-sort-order .select-title {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 240px;
  margin: 0;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-listing-toolbar .products-sort-order .select-title .material-icons {
  flex: 0 0 auto;
  float: none;
  font-size: 18px;
  line-height: 1;
}

.bm-listing-toolbar .products-sort-order .dropdown-menu {
  left: auto;
  right: 0;
  margin: 0;
}

@media (max-width: 380px) {
  .bm-listing-toolbar .bm-listing-count p {
    font-size: 12px;
  }

  .bm-listing-toolbar .products-sort-order .select-title {
    max-width: 175px;
    font-size: 12px;
    padding: 7px 8px;
  }
}

/* ==========================================================
   CATEGORY_UX_FOUNDATION v2 — DRAWER MÓVIL "FILTRAR Y ORDENAR"
   En móvil la cuadrícula de subcategorías y el dropdown de
   ordenación desaparecen de la superficie principal: ambos viven
   en un panel lateral izquierdo con overlay. En escritorio el
   drawer y su botón no existen (se mantiene cuadrícula + dropdown).
   Scope: solo páginas de categoría (body#category / partial
   condicionado a page_name). La búsqueda no hereda el drawer.
   ========================================================== */

/* ── Visibilidad por viewport ───────────────────────────────── */
@media (max-width: 767px) {
  body#category #subcategories.bm-subcategories {
    display: none;
  }

  body#category .bm-listing-toolbar .bm-listing-sort {
    display: none;
  }
}

@media (min-width: 768px) {
  .bm-filter-open,
  .bm-drawer,
  .bm-drawer-overlay {
    display: none !important;
  }
}

/* ── Botón "Filtrar y ordenar" (toolbar móvil) ──────────────── */
.bm-filter-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #232323;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.bm-filter-open:focus,
.bm-filter-open:hover {
  border-color: #2fb6ca;
  color: #2fb6ca;
}

.bm-filter-open .material-icons {
  font-size: 18px;
  line-height: 1;
}

/* ── Overlay ────────────────────────────────────────────────── */
.bm-drawer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 2147483590;
}

.bm-drawer-overlay.bm-open {
  opacity: 1;
  visibility: visible;
}

/* ── Panel lateral ──────────────────────────────────────────── */
.bm-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  max-width: 86vw;
  background: #fff;
  z-index: 2147483600;
  transform: translateX(-103%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
  overflow-x: hidden;
}

.bm-drawer.bm-open {
  transform: translateX(0);
}

body.bm-drawer-lock {
  overflow: hidden;
}

.bm-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e5e5;
}

.bm-drawer .bm-drawer-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #232323;
  text-transform: none;
}

.bm-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px -12px -8px 0;
  padding: 0;
  background: transparent;
  border: none;
  color: #232323;
  cursor: pointer;
}

.bm-drawer-close .material-icons {
  font-size: 24px;
  line-height: 1;
}

.bm-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 24px;
}

.bm-drawer-group {
  padding: 12px 14px 6px;
}

.bm-drawer-group + .bm-drawer-group {
  margin-top: 8px;
  border-top: 1px solid #eee;
}

.bm-drawer .bm-drawer-group-title {
  margin: 0 0 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #777;
  border: none;
}

/* ── Filas de ordenación y subcategorías ────────────────────── */
.bm-drawer-sort-list,
.bm-drawer-subcats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-drawer-sort-link,
.bm-drawer-subcat-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 2px;
  color: #232323;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 1px solid #f2f2f2;
}

.bm-drawer-sort-list li:last-child .bm-drawer-sort-link,
.bm-drawer-subcats li:last-child .bm-drawer-subcat-link {
  border-bottom: none;
}

.bm-drawer-sort-link:hover,
.bm-drawer-sort-link:focus,
.bm-drawer-subcat-link:hover,
.bm-drawer-subcat-link:focus {
  color: #2fb6ca;
  text-decoration: none;
}

.bm-drawer-sort-link.bm-current {
  color: #2fb6ca;
  font-weight: 700;
}

.bm-drawer-sort-link.bm-current::after {
  content: "\2713";
  margin-left: auto;
  padding-left: 8px;
}

/* ── Microajuste: "Ordenar por" como desplegable compacto ──────
   El control ocupa el ancho del drawer, cerrado por defecto,
   y muestra "Ordenar por: [opción activa]" + chevron. Las cuatro
   opciones se despliegan como panel anclado bajo el control. */
.bm-drawer-sort {
  width: 100%;
}

.bm-drawer-sort-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #232323;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.bm-drawer-sort-toggle:focus,
.bm-drawer-sort-toggle:hover {
  border-color: #2fb6ca;
}

.bm-drawer-sort-toggle-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bm-drawer-sort-toggle .bm-drawer-sort-active {
  font-weight: 700;
}

.bm-drawer-sort-toggle .material-icons {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.bm-drawer-sort-toggle[aria-expanded="true"] .material-icons {
  transform: rotate(180deg);
}

.bm-drawer-sort-toggle[aria-expanded="true"] {
  border-radius: 4px 4px 0 0;
}

ul.bm-drawer-sort-list {
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
}

ul.bm-drawer-sort-list[hidden] {
  display: none;
}

.bm-drawer-sort-list .bm-drawer-sort-link {
  padding: 10px 12px;
}

/* ============================================================
   BIJUYMODA - Help Center Landing (prototipo visual, staging)
   Sesion HELP_CENTER_STAGING_VISUAL_PROTOTYPE
   Aplica solo dentro de la categoria CMS id 20 (clases con
   namespace .bm-hc-*, sin afectar otras paginas/categorias).
   ============================================================ */

.bm-hc-landing {
  padding: 8px 0 0;
}

.bm-hc-hero {
  text-align: center;
  padding: 8px 0 28px;
}

.bm-hc-hero-lead {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
  max-width: 760px;
  margin: 0 auto 20px;
}

.bm-hc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 24px;
  padding: 10px 16px;
}

.bm-hc-search-icon {
  color: #888;
  font-size: 20px;
}

.bm-hc-search-input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 14px;
  color: #888;
}

.bm-hc-search-input::placeholder {
  color: #999;
}

.bm-hc-section {
  margin: 32px 0;
}

.bm-hc-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #232323;
  margin-bottom: 16px;
  text-align: center;
}

.bm-hc-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.bm-hc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bm-hc-card:hover,
.bm-hc-card:focus {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border-color: #2fb6ca;
  text-decoration: none;
}

.bm-hc-card-icon {
  font-size: 28px;
  color: #2fb6ca;
}

.bm-hc-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #232323;
}

.bm-hc-card-desc {
  font-size: 13px;
  color: #777;
  line-height: 1.4;
}

.bm-hc-quicklinks-section .bm-hc-quicklinks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: center;
}

.bm-hc-quicklinks a {
  color: #2fb6ca;
  text-decoration: none;
  font-size: 14px;
}

.bm-hc-quicklinks a:hover {
  text-decoration: underline;
}

.bm-hc-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bm-hc-featured-card {
  border: 1px dashed #ccc;
  border-radius: 8px;
  padding: 16px;
  background: #fafafa;
}

.bm-hc-featured-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: #888;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.bm-hc-featured-card h3 {
  font-size: 14px;
  color: #232323;
  margin: 0 0 6px;
}

.bm-hc-featured-card p {
  font-size: 13px;
  color: #777;
  margin: 0;
}

.bm-hc-faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.bm-hc-faq-item {
  border-bottom: 1px solid #eee;
  padding: 12px 0;
}

.bm-hc-faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: #232323;
  font-size: 14px;
}

.bm-hc-faq-item p {
  margin: 10px 0 0;
  color: #555;
  font-size: 13px;
  line-height: 1.5;
}

.bm-hc-cta-box {
  text-align: center;
  background: #f5fcfd;
  border: 1px solid #2fb6ca;
  border-radius: 8px;
  padding: 24px;
  margin: 32px 0 16px;
}

.bm-hc-cta-text {
  font-size: 16px;
  font-weight: 700;
  color: #232323;
  margin: 0 0 16px;
}

.bm-hc-cta-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bm-hc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.bm-hc-btn .material-icons {
  font-size: 18px;
}

.bm-hc-btn-primary {
  background: #2fb6ca;
  color: #fff;
}

.bm-hc-btn-primary:hover {
  background: #26a0b2;
  color: #fff;
  text-decoration: none;
}

.bm-hc-btn-outline {
  background: #fff;
  color: #2fb6ca;
  border: 1px solid #2fb6ca;
}

.bm-hc-btn-outline:hover {
  background: #f0fbfc;
  color: #2fb6ca;
  text-decoration: none;
}

.bm-hc-legal-links {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 24px;
}

.bm-hc-legal-links a {
  color: #999;
  text-decoration: underline;
}

.bm-hc-legal-sep {
  margin: 0 6px;
}

@media (max-width: 767px) {
  .bm-hc-card-grid {
    grid-template-columns: 1fr;
  }

  .bm-hc-featured-grid {
    grid-template-columns: 1fr;
  }

  .bm-hc-quicklinks {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .bm-hc-cta-actions {
    flex-direction: column;
  }

  .bm-hc-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 992px) {
  .bm-hc-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   BIJUYMODA Help Center - Phase 1 additions (STAGING)
   Namespace .bm-hc-*  - appended; does not alter existing rules.
   ============================================================ */

/* Search (Option C) results */
.bm-hc-search-results{margin-top:10px;background:#fff;border:1px solid #e3eef0;border-radius:8px;padding:6px 4px;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.bm-hc-search-results[hidden]{display:none;}
.bm-hc-search-results ul{list-style:none;margin:0;padding:0;}
.bm-hc-search-results li{margin:0;}
.bm-hc-search-results li a{display:block;padding:10px 14px;border-radius:6px;text-decoration:none;color:#155e69;}
.bm-hc-search-results li a:hover{background:#f2fbfc;}
.bm-hc-search-results p{margin:8px 14px;color:#555;}

/* Violeta block */
.bm-hc-violeta{text-align:center;}
.bm-hc-violeta-text{max-width:680px;margin:0 auto 16px;color:#555;}

/* Category / section template */
.bm-hc-category .bm-hc-cat-back{margin:0 0 10px;}
.bm-hc-cat-back a{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:#2fb6ca;font-weight:600;}
.bm-hc-cat-back a .material-icons{font-size:18px;}
.bm-hc-cat-desc{margin:0 0 22px;color:#444;line-height:1.55;}
.bm-hc-cat-grid{margin-bottom:8px;}
.bm-hc-empty{padding:24px;text-align:center;background:#f7fbfc;border:1px dashed #bfe3e8;border-radius:10px;color:#555;margin-bottom:8px;}
.bm-hc-related{margin-top:26px;text-align:center;font-size:.95em;}
.bm-hc-related a{color:#2fb6ca;text-decoration:none;font-weight:600;}
.bm-hc-related a:hover{text-decoration:underline;}

/* ============================================================
   BIJUYMODA Help Center - Phase 1 i18n + responsive nav (round 2)
   Appended; does not alter existing rules.
   ============================================================ */

/* Mobile-only "back" button (desktop relies on the theme breadcrumb, which is hidden-sm-down) */
.bm-hc-mobile-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;padding:8px 14px;border:1px solid #cdeef2;border-radius:8px;background:#f2fbfc;color:#155e69;text-decoration:none;font-weight:600;line-height:1.2;}
.bm-hc-mobile-back .material-icons{font-size:18px;}
.bm-hc-mobile-back:hover{background:#e6f7fa;}
@media (min-width:768px){.bm-hc-mobile-back{display:none !important;}}

/* Help article wrapper + discreet final CTA */
.bm-hc-article .bm-hc-article-cta{margin-top:30px;}
.bm-hc-article .bm-hc-cta-text{margin-bottom:12px;}

/* ============================================================
   BIJUYMODA Help Center - BM-HC-MINOR-CTA-BUTTON-DESKTOP-FIX (round 4)
   Fixes desktop CTA: native <button> UA border (outset->inset on :active
   caused the click shift) + size mismatch vs the bordered <a>.
   Appended; overrides earlier .bm-hc-btn rules by cascade order.
   ============================================================ */
.bm-hc-btn{box-sizing:border-box;justify-content:center;line-height:1.2;border:1px solid transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-clip:padding-box;cursor:pointer;font-family:inherit;margin:0;}
.bm-hc-btn .material-icons{line-height:1;}
.bm-hc-btn-outline{border:1px solid #2fb6ca;}
.bm-hc-btn:hover,.bm-hc-btn:focus,.bm-hc-btn:active{transform:none;text-decoration:none;}
.bm-hc-btn:focus{outline:2px solid rgba(47,182,202,.35);outline-offset:2px;}
.bm-hc-btn:active{transform:none;top:0;left:0;}

/* ============================================================
   Bijuymoda Brand Color V1 -- RGB 120 40 200 / #7828C8
   Aplicado: 2026-06-18
   Objetivo: sustituir el azul corporativo de PrestaShop Classic
   (#24b9d7) por el color de marca de Bijuymoda en botones,
   enlaces, formularios, badges, paginacion, carrito, checkout
   y Help Center.
   Appended al final de custom.css. No altera reglas anteriores;
   sobreescribe por orden de cascada.
   NO modifica: precios de producto, iconos de RRSS de marca,
   colores semanticos de exito/error/alerta, metodos de pago.
   ============================================================ */

:root {
  --bm-brand:        #7828C8;
  --bm-brand-hover:  #6421A8;
  --bm-brand-soft:   rgba(120, 40, 200, 0.08);
  --bm-brand-border: rgba(120, 40, 200, 0.25);
}

/* ---- Base links ---- */
a             { color: #7828C8; }
a:hover       { color: #6421A8; }

/* ---- Primary buttons ---- */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #7828C8;
  border-color: #7828C8;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
  background-color: #6421A8;
  border-color: #6421A8;
}
.btn-primary.disabled:focus,
.btn-primary.disabled.focus,
.btn-primary:disabled:focus,
.btn-primary:disabled.focus,
.btn-primary.disabled:hover,
.btn-primary:disabled:hover {
  background-color: #7828C8;
  border-color: #7828C8;
}

/* ---- Outline primary buttons ---- */
.btn-outline-primary {
  color: #7828C8;
  border-color: #7828C8;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.open > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #7828C8;
  border-color: #7828C8;
}

/* ---- Link buttons ---- */
.btn-link           { color: #7828C8; }
.btn-link:hover     { color: #6421A8; }

/* ---- Form focus outlines ---- */
.form-control:focus {
  outline-color: #7828C8;
}
.input-group.focus {
  outline-color: #7828C8;
}
.search-widget form input[type="text"]:focus {
  outline: 3px #7828C8 solid;
}
.block_newsletter form input[type="text"]:focus {
  outline: 3px #7828C8 solid;
}
.product-customization .product-message:focus {
  outline: 0.1875rem solid #7828C8;
}

/* ---- Search icon hover ---- */
.search-widget form input[type="text"]:focus + button .search,
.search-widget form button[type="submit"] .search:hover {
  color: #7828C8;
}

/* ---- Custom radio ---- */
.custom-radio input[type="radio"]:checked + span {
  background-color: #7828C8;
}

/* ---- Custom control (checkbox/toggle #0074d9) ---- */
.custom-control-input:checked ~ .custom-control-indicator {
  background-color: #7828C8;
}
.custom-control-input:focus ~ .custom-control-indicator {
  background-color: #7828C8;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-indicator {
  background-color: #7828C8;
}

/* ---- Progress bars ---- */
.progress[value]::-webkit-progress-value { background-color: #7828C8; }
.progress[value]::-moz-progress-bar      { background-color: #7828C8; }
.progress[value]::-ms-fill               { background-color: #7828C8; }
.progress-bar                            { background-color: #7828C8; }

/* ---- Pagination ---- */
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
  background-color: #7828C8;
  border-color: #7828C8;
}
.page-link         { color: #7828C8; }
.pagination .current a { color: #7828C8; }

/* ---- Bootstrap nav pills ---- */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover,
.nav-pills .show > .nav-link {
  background-color: #7828C8;
}

/* ---- Product tabs ---- */
.tabs .nav-tabs .nav-link.active {
  color: #7828C8;
  border-bottom-color: #7828C8;
}
.tabs .nav-tabs .nav-link:hover {
  border-bottom-color: #7828C8;
}

/* ---- Dropdown active / hover ---- */
.dropdown-item.active,
.dropdown-item.active:focus,
.dropdown-item.active:hover {
  background-color: #7828C8;
}
.dropdown-item:focus,
.dropdown-item:hover        { color: #7828C8; }
.dropdown:hover .expand-more { color: #7828C8; }
.btn-unstyle:focus .expand-more { color: #7828C8; }

/* ---- List group active ---- */
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background-color: #7828C8;
  border-color: #7828C8;
}

/* ---- Cards ---- */
.card-primary         { background-color: #7828C8; border-color: #7828C8; }
.card-outline-primary { border-color: #7828C8; }

/* ---- Tags ---- */
.tag-primary                       { background-color: #7828C8; }
.tag-primary[href]:focus,
.tag-primary[href]:hover           { background-color: #6421A8; }

/* ---- Bootstrap utility overrides ---- */
.bg-primary   { background-color: #7828C8 !important; }
.text-primary { color: #7828C8 !important; }
a.bg-primary:focus,
a.bg-primary:hover   { background-color: #6421A8 !important; }
a.text-primary:focus,
a.text-primary:hover { color: #6421A8 !important; }

/* ---- Product flags / badges ---- */
.product-flags li.product-flag { background-color: #7828C8; }

/* ---- Product thumbnail selection ---- */
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
  border-color: #7828C8;
}
#product-modal .modal-content .modal-body .product-images img:hover {
  border-color: #7828C8;
}

/* ---- Cart modal product name ---- */
#blockcart-modal .product-name { color: #7828C8; }

/* ---- Cart label hover ---- */
.cart-grid-body a.label:hover { color: #7828C8; }

/* ---- Checkout address selection ---- */
body#checkout section.checkout-step .address-item.selected {
  border-color: #7828C8;
}

/* ---- Promo code ---- */
.block-promo .promo-input + button      { border-color: #7828C8; }
.block-promo .promo-code-button.cancel-promo { color: #7828C8; }

/* ---- Faceted search / sort dropdowns ---- */
.facet-dropdown.open > .select-title   { border-color: #7828C8; }
.facet-dropdown .select-list:hover,
.products-sort-order .select-list:hover,
.brands-sort .select-list:hover,
.suppliers-sort .select-list:hover     { background-color: #7828C8; }

/* ---- Category tree collapse ---- */
.block-categories .collapse-icons .add:hover,
.block-categories .collapse-icons .remove:hover,
.block-categories .arrows .arrow-right:hover,
.block-categories .arrows .arrow-down:hover { color: #7828C8; }
#subcategories ul li .subcategory-name:hover { color: #7828C8; }
#subcategories ul li:hover .subcategory-image a { border-color: #7828C8; }

/* ---- Header navigation ---- */
#header .top-menu a[data-depth="0"]:hover { color: #7828C8; }
.top-menu .sub-menu a:hover               { color: #7828C8; }

/* ---- Product / quickview interactions ---- */
.product-miniature .highlighted-informations .quick-view:hover { color: #7828C8; }
.page-my-account #content .links a:hover i                     { color: #7828C8; }
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i                 { color: #7828C8; }

/* ---- Account / Footer ---- */
.account-list a:hover       { color: #7828C8; }
.footer-container li a:hover { color: #7828C8; }

/* ---- File input / touchspin buttons ---- */
.group-span-filestyle .btn-default,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.bootstrap-touchspin .group-span-filestyle .btn-touchspin {
  background: #7828C8;
}

/* ---- Social block hover (accent only, not icon brand color) ---- */
.block-social ul li:hover { background-color: #7828C8; }

/* ---- One Page Checkout (onepagecheckoutps) form focus ---- */
div#onepagecheckoutps input:focus,
div#onepagecheckoutps textarea:focus,
div#onepagecheckoutps select:focus {
  border-color: #7828C8;
  outline-color: rgba(120, 40, 200, 0.35);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(120,40,200,.35);
}
div#opc_loading { border-top-color: #7828C8; }

/* ---- Help Center buttons and links (override #2fb6ca -> #7828C8) ---- */
.bm-hc-btn-primary                 { background: #7828C8; }
.bm-hc-btn-primary:hover           { background: #6421A8; }
.bm-hc-btn-outline                 { color: #7828C8; border-color: #7828C8; }
.bm-hc-btn-outline:hover           { background: rgba(120,40,200,0.08); color: #7828C8; }
.bm-hc-btn:focus                   { outline-color: rgba(120,40,200,.35); }
.bm-hc-btn-outline                 { border: 1px solid #7828C8; }
.bm-hc-cat-back a,
.bm-hc-related a                   { color: #7828C8; }
.bm-hc-search-results li a         { color: #7828C8; }
/* ============================================================
   Bijuymoda Brand Color V1 -- Microfix Pablo Visual
   Applied: 2026-06-18
   Issues corrected:
     1. Global a{ color } too broad -- all links were purple.
        Changed to dark #232323 default; brand #7828C8 on hover only.
     2. Remaining #2fb6ca elements (legacy teal) that the V1 patch
        missed: 14 selectors. Some use !important in original rule
        and require matching !important here.
   Appended after V1 patch; wins by cascade order.
   ============================================================ */

/* ---- MICROFIX 1: Global links -- dark default, brand hover only ---- */
a       { color: #232323; }
a:hover { color: #7828C8; }

/* ---- MICROFIX 2: blockcart modal product name (!important beat) ---- */
#blockcart-modal .product-name,
#blockcart-modal .h6,
#blockcart-modal h6 {
  color: #7828C8 !important;
}

/* ---- MICROFIX 3: Footer social hover (!important beat) ---- */
@media (min-width: 768px) {
  #footer .block-social li:hover,
  .footer-container .block-social li:hover {
    background-color: #7828C8 !important;
  }
}

/* ---- MICROFIX 4: Mobile custom-text links -- dark, not purple ---- */
@media (max-width: 767px) {
  #custom-text a {
    color: #232323 !important;
  }
}

/* ---- MICROFIX 5: Product modal selected image (!important beat) ---- */
#product-modal .modal-content .modal-body .product-images img:hover,
#product-modal .modal-content .modal-body .product-images img.selected {
  border-color: #7828C8 !important;
}

/* ---- MICROFIX 6: "Ver descripcion completa" toggle button ---- */
.bm-product-description-toggle {
  border-color: #7828C8;
  color: #7828C8;
}
.bm-product-description-toggle:hover,
.bm-product-description-toggle:focus {
  background: #7828C8;
}

/* ---- MICROFIX 7: Category description toggle button ---- */
.bm-category-description-toggle {
  border-color: #7828C8;
  color: #7828C8;
}
.bm-category-description-toggle:hover,
.bm-category-description-toggle:focus {
  background: #7828C8;
}

/* ---- MICROFIX 8: Subcategory link hover/focus ---- */
#subcategories .bm-subcategory-link:hover,
#subcategories .bm-subcategory-link:focus,
a.bm-subcategory-link:hover,
a.bm-subcategory-link:focus {
  border-color: #7828C8;
  color: #7828C8;
}

/* ---- MICROFIX 9: Filter open button hover/focus ---- */
.bm-filter-open:focus,
.bm-filter-open:hover {
  border-color: #7828C8;
  color: #7828C8;
}

/* ---- MICROFIX 10: Drawer sort/subcat links ---- */
.bm-drawer-sort-link:hover,
.bm-drawer-sort-link:focus,
.bm-drawer-subcat-link:hover,
.bm-drawer-subcat-link:focus {
  color: #7828C8;
}
.bm-drawer-sort-link.bm-current {
  color: #7828C8;
}

/* ---- MICROFIX 11: Drawer sort toggle hover/focus ---- */
.bm-drawer-sort-toggle:focus,
.bm-drawer-sort-toggle:hover {
  border-color: #7828C8;
}

/* ---- MICROFIX 12: Help Center card hover border + icon color ---- */
.bm-hc-card:hover,
.bm-hc-card:focus {
  border-color: #7828C8;
}
.bm-hc-card-icon {
  color: #7828C8;
}

/* ---- MICROFIX 13: Help Center quicklinks -- dark, hover purple ---- */
.bm-hc-quicklinks a       { color: #232323; }
.bm-hc-quicklinks a:hover { color: #7828C8; text-decoration: underline; }

/* ---- MICROFIX 14: Help Center CTA box border + background ---- */
.bm-hc-cta-box {
  border-color: rgba(120, 40, 200, 0.25);
  background: rgba(120, 40, 200, 0.04);
}

/* ---- MICROFIX 15: Help Center empty state border ---- */
.bm-hc-empty {
  border-color: rgba(120, 40, 200, 0.15);
}

/* ---- MICROFIX 16: Help Center mobile back button ---- */
.bm-hc-mobile-back {
  border-color: rgba(120, 40, 200, 0.2);
  background: rgba(120, 40, 200, 0.04);
  color: #232323;
}
.bm-hc-mobile-back:hover {
  background: rgba(120, 40, 200, 0.08);
  color: #7828C8;
}

/* ============================================================
   Bijuymoda Brand Color V1 - Visual Root Cause Fix (June 2026)
   ============================================================ */

/* 1. Cart Discount Styles - Correcting Orange Legacy */
.has-discount,
.has-discount .price,
.product-price.has-discount .price {
  color: #232323 !important;
}
.has-discount .regular-price {
  color: #7a7a7a !important;
  text-decoration: line-through !important;
  font-weight: 500 !important;
}
.has-discount .discount {
  background: #d92b2f !important; /* Promocional Red */
  color: #fff !important;
  font-weight: 700 !important;
  padding: 2px 4px !important;
  font-size: 11px !important;
  border-radius: 2px !important;
  display: inline-block !important;
  margin-left: 6px !important;
}

/* 2. CMS Inline Override Rules - Replacing hardcoded #2fb6ca / #f2fbfc in DB content */
.page-cms div[style*="2fb6ca"][style*="border-left"] {
  border-left-color: #7828C8 !important;
  background-color: rgba(120, 40, 200, 0.04) !important;
  background: rgba(120, 40, 200, 0.04) !important;
}
.page-cms div[style*="2fb6ca"][style*="border"] {
  border-color: rgba(120, 40, 200, 0.25) !important;
  background-color: rgba(120, 40, 200, 0.04) !important;
  background: rgba(120, 40, 200, 0.04) !important;
}
.page-cms a[style*="background:#2fb6ca"],
.page-cms a[style*="background-color:#2fb6ca"] {
  background-color: #7828C8 !important;
  background: #7828C8 !important;
}
.page-cms a[style*="background:#2fb6ca"]:hover,
.page-cms a[style*="background-color:#2fb6ca"]:hover {
  background-color: #6421A8 !important;
  background: #6421A8 !important;
}

/* 3. Reassurance Block Override - Correcting hardcoded #521BCE */
.blockreassurance .block-icon i,
.blockreassurance .block-title,
.blockreassurance p {
  color: #7828C8 !important;
}

/* 4. Footer Inline Styles Override */
#footer a[style*="color: #2fb6ca"],
#footer a[style*="color:#2fb6ca"] {
  color: #7828C8 !important;
}
#footer a[style*="color: #2fb6ca"]:hover,
#footer a[style*="color:#2fb6ca"]:hover {
  color: #6421A8 !important;
}

/* 5. Help Center Empty States & Category Templates - Removing remaining blues */
.bm-hc-empty {
  background: rgba(120, 40, 200, 0.04) !important;
  border-color: rgba(120, 40, 200, 0.20) !important;
}
.bm-hc-search-results {
  border-color: rgba(120, 40, 200, 0.25) !important;
}
.bm-hc-search-results li a:hover {
  background: rgba(120, 40, 200, 0.08) !important;
}

/* 6. Checkout Steps active numbers */
body#checkout section.checkout-step .step-number,
body#checkout section.checkout-step.-current .step-number {
  background: #7828C8 !important;
}

/* ============================================================
   Bijuymoda Brand Color V1 - Final Cart Microfix
   ============================================================ */

/* 1. Header active cart block - background and hover */
#header .header-nav .cart-preview.active,
#header .header-nav .blockcart.cart-preview.active,
#header .header-nav .cart-preview.active .header {
  background-color: #7828C8 !important;
  background: #7828C8 !important;
}

#header .header-nav .cart-preview.active:hover,
#header .header-nav .blockcart.cart-preview.active:hover,
#header .header-nav .cart-preview.active:focus-within,
#header .header-nav .cart-preview.active .header:hover {
  background-color: #6421A8 !important;
  background: #6421A8 !important;
}

#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active a:hover,
#header .header-nav .cart-preview.active .shopping-cart,
#header .header-nav .cart-preview.active .cart-products-count {
  color: #fff !important;
}

/* 2. Cart checkout button reposo and hover/focus/active */
body#cart .cart-detailed-actions .btn-primary {
  background-color: #7828C8 !important;
  border-color: #7828C8 !important;
  color: #fff !important;
}

body#cart .cart-detailed-actions .btn-primary:hover,
body#cart .cart-detailed-actions .btn-primary:focus,
body#cart .cart-detailed-actions .btn-primary:active,
body#cart .cart-detailed-actions .btn-primary.active,
body#cart a.btn-primary:hover,
body#cart a.btn-primary:focus,
body#cart a.btn-primary:active {
  background-color: #6421A8 !important;
  border-color: #6421A8 !important;
  color: #fff !important;
}
/* ============================================================
   Bijuymoda Brand Color V1 - Final Menu Hover Fix
   Root cause: theme.css contains two high-specificity rules
   that beat the V1 patch overrides:
     - #header a:hover { color: #24b9d7 }          (spec 1,0,1)
     - #header .header-nav .blockcart a:hover (spec 1,2,1)
   The V1 patch used .top-menu .sub-menu a:hover    (spec 0,2,1)
   which loses to any ID-based selector in theme.css.
   Fix: match or exceed specificity on all three.
   Note: active cart links stay white -- the !important rule at
   line 3626 (.cart-preview.active a:hover) still wins.
   ============================================================ */

/* Beats #header a:hover (1,0,1): covers submenu items + all header links */
#header a:hover,
#header a:focus {
  color: #7828C8;
  text-decoration: none;
}

/* Belt+suspenders for submenu depth-1/2 items (spec 1,3,1) */
#header .top-menu .sub-menu a:hover,
#header .top-menu .sub-menu a:focus {
  color: #7828C8;
  text-decoration: none;
}

/* Beats #header .header-nav .blockcart a:hover (1,2,1) */
#header .header-nav .blockcart a:hover,
#header .header-nav .blockcart a:focus {
  color: #7828C8;
}
/* ============================================================
   Bijuymoda Brand Color V1 - Final Sweep Fix
   One confirmed remaining visible teal from CSS sweep:
     - .block_newsletter form input[type="email"]:focus
       has border: 3px #24b9d7 solid in theme.css.
       custom.css previously only covered input[type="text"].
   ============================================================ */

/* Newsletter email input focus border */
.block_newsletter form input[type="email"]:focus {
  border-color: #7828C8;
}

/* === bm-reco-section: product recommendation sliders (PS categoryproducts + viewedproduct) === */
.bm-reco-section { margin-top: 2rem; }
.bm-reco-section > h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.75rem; }
.bm-reco-section .products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
    padding-bottom: 6px;
}
.bm-reco-section .products .js-product {
    flex: 0 0 calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .bm-reco-section .products .js-product {
        flex: 0 0 calc(25% - 0.375rem) !important;
        max-width: calc(25% - 0.375rem) !important;
    }
}
.bm-reco-section .products::-webkit-scrollbar { height: 4px; }
.bm-reco-section .products::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
/* === end bm-reco-section === */

/* === bm-reco-section: slider arrow navigation (microfix A) === */
.bm-reco-slider-wrap { position: relative; }
.bm-reco-arrow {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.92); border: 1px solid #bbb;
  border-radius: 50%; width: 36px; height: 36px; cursor: pointer;
  z-index: 2; font-size: 1.4rem; line-height: 1; padding: 0;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: background 0.15s;
}
.bm-reco-arrow:hover { background: rgba(255,255,255,1); }
.bm-reco-prev { left: -18px; }
.bm-reco-next { right: -18px; }
@media (min-width: 768px) {
  .bm-reco-arrow { display: flex; }
}
/* make scrollbar more visible on desktop */
.bm-reco-section .products::-webkit-scrollbar { height: 6px; }
.bm-reco-section .products::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
.bm-reco-section .products::-webkit-scrollbar-thumb { background: #999; border-radius: 3px; }
.bm-reco-section .products::-webkit-scrollbar-thumb:hover { background: #666; }

/* === ux-polish: accessories title hierarchy (Fix A) === */
.product-accessories .bm-accessories-title {
  font-size: 1.05rem; font-weight: 700; margin-bottom: 0.75rem;
}

/* === ux-polish: home bm-reco-section — secondary visual weight (Fix C) === */
.page-home .bm-reco-section > h2 {
  font-size: 0.9rem; font-weight: 600; color: #777; margin-bottom: 0.5rem;
}
.page-home .bm-reco-section { margin-top: 1.5rem; }

/* === ux-polish: drag-to-scroll cursor (Fix D) === */
@media (min-width: 768px) {
  .bm-reco-section .products { cursor: grab; user-select: none; }
  .bm-reco-section .products.bm-dragging { cursor: grabbing; }
}
/* === stabilization v2: root-cause fixes === */

/* Fix C-1: theme CSS sets justify-content:center on .featured-products .products
   which clips the first card in a flex overflow slider (center-overflow can't scroll left past 0) */
.bm-reco-section .products {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix C-2: arrows inside wrapper bounds — avoids any parent overflow:hidden clipping */
.bm-reco-prev { left: 2px; }
.bm-reco-next { right: 2px; }

/* Fix D: reduce home mobile gap between Productos destacados and Vistos recientemente */
@media (max-width: 767px) {
  .page-home .bm-reco-section { margin-top: 0.5rem; }
}
/* === breadcrumb mobile (microfix nav A) === */
/* bm-breadcrumb-mobile: show on mobile as compact horizontal scrollable trail */
@media (max-width: 767px) {
  .bm-breadcrumb-mobile {
    display: block !important;     /* override hidden-sm-down: display:none */
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0.74rem;
    padding: 0.25rem 0 0.1rem;
    margin-bottom: 0.4rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         /* Firefox: hide scrollbar */
  }
  .bm-breadcrumb-mobile::-webkit-scrollbar { display: none; } /* Chrome */
  .bm-breadcrumb-mobile ol {
    display: inline-flex;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
    white-space: nowrap;
  }
  .bm-breadcrumb-mobile ol li {
    white-space: nowrap;
  }
  /* Last item (product name) truncated to avoid very long trail */
  .bm-breadcrumb-mobile ol li:last-child span {
    max-width: 140px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
  }
}

/* === home mobile featured gap fix — row::after grid phantom item === */
  }
}

/* ==========================================================
   MOBILE_B2B_NAVIGATION_UX_V1 — BUSCADOR EN OVERLAY MÓVIL
   Estiliza el disparador de búsqueda, el overlay a pantalla
   completa y los resultados en móviles.
   ========================================================== */
@media (max-width: 767px) {
  /* Ocultar el buscador en su ubicación original */
  .header-top-right #search_widget {
    display: none !important;
  }
  
  /* Botón disparador en el header */
  #mobile-search-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
    color: #7828C8 !important; /* Violeta corporativo */
    order: 2; /* Control de orden visual si es necesario */
  }
  
  #mobile-search-trigger i {
    font-size: 24px;
    vertical-align: middle;
  }

  /* Compactar header móvil */
  nav.header-nav {
    padding: 6px 0 !important;
    background: #ffffff !important;
  }
  
  nav.header-nav .mobile {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  
  nav.header-nav .mobile .top-logo {
    flex-grow: 1;
    text-align: center;
    margin: 0 10px;
  }
  
  nav.header-nav .mobile .top-logo img {
    max-height: 32px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
  }

  nav.header-nav .mobile #menu-icon {
    margin-top: 0 !important;
    padding: 0 8px;
  }

  nav.header-nav .mobile #_mobile_cart,
  nav.header-nav .mobile #_mobile_user_info,
  nav.header-nav .mobile #mobile-search-trigger {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
  }

  /* Overlay de búsqueda full screen */
  .mobile-search-overlay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 999999 !important; /* Por encima de todo, incluido Plesk admin bar si lo hubiera */
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .mobile-search-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
    flex-shrink: 0;
  }

  .mobile-search-overlay-title {
    font-weight: 600;
    font-size: 18px;
    color: #232323;
  }

  .mobile-search-overlay-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #666666;
    display: inline-flex;
    align-items: center;
  }

  .mobile-search-overlay-close i {
    font-size: 26px;
  }

  .mobile-search-overlay-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .mobile-search-overlay-body #search_widget {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    display: block !important;
    position: relative;
    float: none !important;
  }

  .mobile-search-overlay-body #search_widget form {
    position: relative;
    display: flex;
    align-items: center;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 12px;
    background: #fcfcfc;
    transition: border-color 0.2s ease;
  }

  .mobile-search-overlay-body #search_widget form:focus-within {
    border-color: #7828C8;
    background: #ffffff;
  }

  .mobile-search-overlay-body #search_widget form input[type="text"] {
    width: 100%;
    border: none !important;
    background: transparent;
    padding: 6px 35px 6px 8px;
    font-size: 16px;
    color: #232323;
    height: auto;
  }

  .mobile-search-overlay-body #search_widget form input[type="text"]:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .mobile-search-overlay-body #search_widget form i.search {
    font-size: 22px;
    color: #7828C8; /* Violeta */
    order: -1;
    margin-right: 2px;
  }

  .mobile-search-overlay-body #search_widget form i.clear {
    position: absolute;
    right: 12px;
    cursor: pointer;
    display: none; /* Controlado por el JS original si aplica, o estático */
    color: #888888;
  }

  /* Listado de sugerencias de búsqueda populares */
  .mobile-search-suggestions {
    margin-top: 10px;
  }

  .mobile-search-suggestions h3 {
    font-size: 13px;
    text-transform: uppercase;
    color: #777777;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    font-weight: 700;
  }

  .mobile-search-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-search-suggestions ul li {
    margin-bottom: 10px;
  }

  .mobile-search-suggestions ul li a {
    display: block;
    padding: 12px 16px;
    background: #f7f7f7;
    border-radius: 8px;
    color: #232323;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-search-suggestions ul li a:hover {
    background: rgba(120, 40, 200, 0.08);
    color: #7828C8;
  }

  body.bm-search-lock {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* Ocultar trigger en escritorio */
@media (min-width: 768px) {
  #mobile-search-trigger {
    display: none !important;
  }
  .mobile-search-overlay-wrapper {
    display: none !important;
  }
}

/* ==========================================================
   B2B registration polish - staging
   Scoped to the standalone create-account page.
   ========================================================== */

body#authentication.page-customer-account #content:has(.bm-b2b-register-shell),
body#authentication.page-customer-account .page-content:has(.bm-b2b-register-shell),
body#authentication.page-customer-account .page-customer-account:has(.bm-b2b-register-shell) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body#authentication.page-customer-account .bm-b2b-register-shell {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - 48px), 1080px);
  max-width: none;
  margin: 0 auto 42px;
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 640px);
  gap: 28px;
  align-items: start;
  justify-content: center;
  box-sizing: border-box;
}

body#authentication.page-customer-account .bm-b2b-register-benefits,
body#authentication.page-customer-account .bm-b2b-register-form {
  min-width: 0;
  border: 1px solid #e6e2ec;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(35, 35, 35, 0.06);
}

body#authentication.page-customer-account .bm-b2b-register-benefits {
  padding: 24px 22px;
  color: #2b2730;
  border-top: 4px solid #7828C8;
}

body#authentication.page-customer-account .bm-b2b-register-benefits h2 {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: #232323;
}

body#authentication.page-customer-account .bm-b2b-register-benefits ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body#authentication.page-customer-account .bm-b2b-register-benefits li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.45;
  color: #4b4652;
}

body#authentication.page-customer-account .bm-b2b-register-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7828C8;
  box-shadow: 0 0 0 4px rgba(120, 40, 200, 0.12);
}

body#authentication.page-customer-account .bm-b2b-register-form {
  margin: 0 !important;
  padding: 28px 30px !important;
  max-width: none !important;
}

body#authentication.page-customer-account .bm-b2b-register-login {
  margin: 0 0 22px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #f7f6f9;
  color: #514b5b;
  font-size: 14px;
  line-height: 1.35;
}

body#authentication.page-customer-account .bm-b2b-register-login a {
  color: #7828C8;
  font-weight: 700;
}

body#authentication.page-customer-account .bm-b2b-register-form #customer-form > div {
  display: flex;
  flex-direction: column;
}

body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group {
  display: grid !important;
  grid-template-columns: minmax(145px, 180px) minmax(0, 1fr);
  gap: 8px 16px !important;
  align-items: start;
  margin: 0 0 16px !important;
  min-width: 0;
}

body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > label.form-control-label,
body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-6,
body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-8,
body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-9 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > label.form-control-label {
  grid-column: 1;
  padding-top: 9px;
  color: #302a38;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}

body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-6,
body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-8,
body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-9 {
  grid-column: 2;
}

body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .form-control-comment,
body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-3.form-control-comment {
  display: none !important;
}

body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-control {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_firstname .col-md-6 > .form-control-comment,
body#authentication.page-customer-account .bm-b2b-register-form .soy_lastname .col-md-6 > .form-control-comment {
  display: none !important;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_id_gender,
body#authentication.page-customer-account .bm-b2b-register-form .soy_birthday {
  display: none !important;
}

body#authentication.page-customer-account #customer-form .soy_id_gender,
body#authentication.page-customer-account #customer-form .soy_birthday,
body#authentication.page-customer-account #customer-form div.soy_id_gender,
body#authentication.page-customer-account #customer-form div.soy_birthday {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_firstname { order: 10; }
body#authentication.page-customer-account .bm-b2b-register-form .soy_lastname { order: 20; }
body#authentication.page-customer-account .bm-b2b-register-form .soy_email { order: 30; }
body#authentication.page-customer-account .bm-b2b-register-form .soy_password { order: 40; }
body#authentication.page-customer-account .bm-b2b-register-form .soy_bm_phone { order: 50; }
body#authentication.page-customer-account .bm-b2b-register-form .soy_bm_id_country { order: 60; }
body#authentication.page-customer-account .bm-b2b-register-form .soy_company { order: 70; }
body#authentication.page-customer-account .bm-b2b-register-form .soy_siret { order: 80; }
body#authentication.page-customer-account .bm-b2b-register-form .soy_newsletter { order: 90; }
body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr { order: 100; }

body#authentication.page-customer-account .bm-b2b-register-form .soy_company > label.form-control-label::after {
  content: " (opcional)";
  color: #6d6576;
  font-weight: 400;
}

body.lang-en#authentication.page-customer-account .bm-b2b-register-form .soy_company > label.form-control-label::after {
  content: " (optional)";
}

body.lang-it#authentication.page-customer-account .bm-b2b-register-form .soy_company > label.form-control-label::after {
  content: " (opzionale)";
}

body#authentication.page-customer-account .bm-b2b-register-form #customer-form .soy_siret > label.form-control-label {
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.3;
}

body#authentication.page-customer-account .bm-b2b-register-form #customer-form .bm-b2b-label-optional {
  color: #6d6576;
  font-weight: 400;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_password .input-group {
  display: flex;
  width: 100%;
  max-width: 100%;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_password .input-group .form-control {
  flex: 1 1 auto;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_password .input-group .input-group-btn {
  flex: 0 0 auto;
  width: auto;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_password .input-group .btn {
  height: 45px;
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 14px;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_firstname::before,
body#authentication.page-customer-account .bm-b2b-register-form .soy_bm_phone::before,
body#authentication.page-customer-account .bm-b2b-register-form .soy_company::before {
  display: block;
  margin: 8px 0 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid #e8e5ee;
  color: #232323;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
}

body.lang-es#authentication.page-customer-account .bm-b2b-register-form .soy_firstname::before { content: "Datos de acceso"; }
body.lang-es#authentication.page-customer-account .bm-b2b-register-form .soy_bm_phone::before { content: "Contacto comercial"; }
body.lang-es#authentication.page-customer-account .bm-b2b-register-form .soy_company::before { content: "Datos profesionales"; }

body.lang-en#authentication.page-customer-account .bm-b2b-register-form .soy_firstname::before { content: "Account details"; }
body.lang-en#authentication.page-customer-account .bm-b2b-register-form .soy_bm_phone::before { content: "Business contact"; }
body.lang-en#authentication.page-customer-account .bm-b2b-register-form .soy_company::before { content: "Professional details"; }

body.lang-it#authentication.page-customer-account .bm-b2b-register-form .soy_firstname::before { content: "Dati di accesso"; }
body.lang-it#authentication.page-customer-account .bm-b2b-register-form .soy_bm_phone::before { content: "Contatto commerciale"; }
body.lang-it#authentication.page-customer-account .bm-b2b-register-form .soy_company::before { content: "Dati professionali"; }

body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr {
  margin-top: 6px !important;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_newsletter,
body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr {
  grid-template-columns: minmax(0, 1fr);
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_newsletter > label.form-control-label,
body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr > label.form-control-label {
  display: none !important;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_newsletter > .col-md-6,
body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr > .col-md-6 {
  grid-column: 1 / -1;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_newsletter .custom-checkbox,
body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr .custom-checkbox {
  display: block;
  padding: 12px 14px;
  border: 1px solid #e0dce8;
  border-radius: 6px;
  background: #fafafa;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_newsletter .custom-checkbox {
  background: #fbfafc;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_newsletter .custom-checkbox label,
body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr .custom-checkbox label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 !important;
  color: #5a5562;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr .custom-checkbox label {
  font-size: 12px !important;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_newsletter .custom-checkbox input[type="checkbox"],
body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr .custom-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 2px 0 0;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_newsletter .custom-checkbox label > span:not(.bm-b2b-checkbox-copy),
body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr .custom-checkbox label > span:not(.bm-b2b-checkbox-copy) {
  flex: 0 0 auto;
}

body#authentication.page-customer-account .bm-b2b-register-form .bm-b2b-checkbox-copy {
  display: block !important;
  flex: 1 1 auto;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-width: 0;
  margin: 0 !important;
}

body#authentication.page-customer-account .bm-b2b-register-form .soy_psgdpr a {
  color: #7828C8;
  text-decoration: underline;
}

body#authentication.page-customer-account .bm-b2b-register-form .form-footer {
  margin-top: 20px;
}

body#authentication.page-customer-account .bm-b2b-register-form .form-footer .btn-primary {
  min-height: 52px;
  border-radius: 6px;
  background: #7828C8;
  border-color: #7828C8;
  font-weight: 700;
  letter-spacing: 0;
}

body#authentication.page-customer-account .bm-b2b-register-form .form-footer .btn-primary:hover,
body#authentication.page-customer-account .bm-b2b-register-form .form-footer .btn-primary:focus {
  background: #6421A8;
  border-color: #6421A8;
}

@media (max-width: 767px) {
  body#authentication.page-customer-account .bm-b2b-register-shell {
    position: static;
    left: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    width: calc(100% - 24px);
    max-width: 100%;
    gap: 16px;
    margin-bottom: 28px;
  }

  body#authentication.page-customer-account .bm-b2b-register-form {
    order: 1;
    padding: 20px 16px !important;
  }

  body#authentication.page-customer-account .bm-b2b-register-benefits {
    order: 2;
    padding: 20px 16px;
  }

  body#authentication.page-customer-account .bm-b2b-register-benefits h2 {
    font-size: 20px;
  }

  body#authentication.page-customer-account .bm-b2b-register-benefits li {
    margin-bottom: 10px;
    font-size: 14px;
  }

  body#authentication.page-customer-account .bm-b2b-register-form #customer-form > div {
    display: flex !important;
    flex-direction: column;
  }

  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
  }

  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-control-label,
  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .col-md-3,
  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .col-md-6,
  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .col-md-8,
  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-control-comment {
    display: none !important;
  }

  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > label.form-control-label,
  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-6,
  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-8,
  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > .col-md-9 {
    grid-column: 1 !important;
  }

  body#authentication.page-customer-account .bm-b2b-register-form #customer-form .form-group > label.form-control-label {
    padding-top: 0;
  }

  body#authentication.page-customer-account .bm-b2b-register-form .form-footer .btn-primary {
    width: 100%;
  }
}


/* === bm-b2b-register: :has() fallback (2026-06-23) — no OPC soy_* dependency === */
body#authentication.page-customer-account #customer-form .form-group:has([name="id_gender"]),
body#authentication.page-customer-account #customer-form .form-group:has([name="birthday"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="firstname"])::before,
body#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="bm_phone"])::before,
body#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="company"])::before {
  display: block;
  margin: 8px 0 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid #e8e5ee;
  color: #232323;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
}

body.lang-es#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="firstname"])::before { content: "Datos de acceso"; }
body.lang-es#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="bm_phone"])::before  { content: "Contacto comercial"; }
body.lang-es#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="company"])::before   { content: "Datos profesionales"; }

body.lang-en#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="firstname"])::before { content: "Account details"; }
body.lang-en#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="bm_phone"])::before  { content: "Business contact"; }
body.lang-en#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="company"])::before   { content: "Professional details"; }

body.lang-it#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="firstname"])::before { content: "Dati di accesso"; }
body.lang-it#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="bm_phone"])::before  { content: "Contatto commerciale"; }
body.lang-it#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="company"])::before   { content: "Dati professionali"; }
/* === end bm-b2b-register :has() fallback === */

/* === bm-b2b-register: :has() microfix A (2026-06-24) — comment + company optional === */
/* A: hide firstname/lastname help text (no soy_ dependency) */
body#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="firstname"]) .col-md-6 > .form-control-comment,
body#authentication.page-customer-account .bm-b2b-register-form .form-group:has([name="lastname"]) .col-md-6 > .form-control-comment {
  display: none !important;
}

/* B: company label suffix — :not(.soy_company) prevents duplicate if soy_ reappears */
body#authentication.page-customer-account .bm-b2b-register-form .form-group:not(.soy_company):has([name="company"]) > label.form-control-label::after {
  content: " (opcional)";
  color: #6d6576;
  font-weight: 400;
}
body.lang-en#authentication.page-customer-account .bm-b2b-register-form .form-group:not(.soy_company):has([name="company"]) > label.form-control-label::after {
  content: " (optional)";
}
body.lang-it#authentication.page-customer-account .bm-b2b-register-form .form-group:not(.soy_company):has([name="company"]) > label.form-control-label::after {
  content: " (opzionale)";
}
/* === end bm-b2b-register :has() microfix A === */
/* ============================================================
   BIJUYMODA QUOTE UX — REASSURANCE & PAYMENT NOTICES (2026-09-08)
   Scoped to #checkout / #onepagecheckoutps to prevent global spill.
   ============================================================ */
#checkout .bm-payment-notice,
#onepagecheckoutps .bm-payment-notice {
  background: #fbf9fe !important;
  border: 1px solid #e0d2f5 !important;
  border-left: 4px solid #7828C8 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 0 0 14px 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #333 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#checkout .bm-payment-notice i,
#onepagecheckoutps .bm-payment-notice i {
  color: #7828C8 !important;
  font-size: 16px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

#checkout .bm-reassurance-badge,
#onepagecheckoutps .bm-reassurance-badge {
  background: #fbf9fe !important;
  border: 1px solid #e0d2f5 !important;
  border-left: 4px solid #7828C8 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 12px 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #333 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#checkout .bm-reassurance-badge i,
#onepagecheckoutps .bm-reassurance-badge i {
  color: #7828C8 !important;
  font-size: 16px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* Multilingual display logic for quote copies in notices */
.bm-payment-notice .bm-quote-copy,
.bm-reassurance-badge .bm-quote-copy {
  display: none;
}
.bm-payment-notice .bm-quote-copy.bm-es,
.bm-reassurance-badge .bm-quote-copy.bm-es {
  display: inline;
}
body.lang-en .bm-payment-notice .bm-quote-copy.bm-es,
body.lang-en .bm-reassurance-badge .bm-quote-copy.bm-es,
body.lang-it .bm-payment-notice .bm-quote-copy.bm-es,
body.lang-it .bm-reassurance-badge .bm-quote-copy.bm-es {
  display: none;
}
body.lang-en .bm-payment-notice .bm-quote-copy.bm-en,
body.lang-en .bm-reassurance-badge .bm-quote-copy.bm-en {
  display: inline;
}
body.lang-it .bm-payment-notice .bm-quote-copy.bm-it,
body.lang-it .bm-reassurance-badge .bm-quote-copy.bm-it {
  display: inline;
}

@media (max-width: 767px) {
  #checkout .bm-payment-notice,
  #onepagecheckoutps .bm-payment-notice,
  #checkout .bm-reassurance-badge,
  #onepagecheckoutps .bm-reassurance-badge {
    font-size: 12px !important;
    padding: 8px 10px !important;
    margin: 8px 0 !important;
  }
}
/* ============================================================
   BIJUYMODA QUOTE UX — REASSURANCE & PAYMENT NOTICES (2026-09-08)
   Scoped to #checkout / #onepagecheckoutps to prevent global spill.
   ============================================================ */
#checkout .bm-payment-notice,
#onepagecheckoutps .bm-payment-notice {
  background: #fbf9fe !important;
  border: 1px solid #e0d2f5 !important;
  border-left: 4px solid #7828C8 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 0 0 14px 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #333 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#checkout .bm-payment-notice i,
#onepagecheckoutps .bm-payment-notice i {
  color: #7828C8 !important;
  font-size: 16px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

#checkout .bm-reassurance-badge,
#onepagecheckoutps .bm-reassurance-badge {
  background: #fbf9fe !important;
  border: 1px solid #e0d2f5 !important;
  border-left: 4px solid #7828C8 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 12px 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #333 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#checkout .bm-reassurance-badge i,
#onepagecheckoutps .bm-reassurance-badge i {
  color: #7828C8 !important;
  font-size: 16px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* Multilingual display logic for quote copies in notices */
.bm-payment-notice .bm-quote-copy,
.bm-reassurance-badge .bm-quote-copy {
  display: none;
}
.bm-payment-notice .bm-quote-copy.bm-es,
.bm-reassurance-badge .bm-quote-copy.bm-es {
  display: inline;
}
body.lang-en .bm-payment-notice .bm-quote-copy.bm-es,
body.lang-en .bm-reassurance-badge .bm-quote-copy.bm-es,
body.lang-it .bm-payment-notice .bm-quote-copy.bm-es,
body.lang-it .bm-reassurance-badge .bm-quote-copy.bm-es {
  display: none;
}
body.lang-en .bm-payment-notice .bm-quote-copy.bm-en,
body.lang-en .bm-reassurance-badge .bm-quote-copy.bm-en {
  display: inline;
}
body.lang-it .bm-payment-notice .bm-quote-copy.bm-it,
body.lang-it .bm-reassurance-badge .bm-quote-copy.bm-it {
  display: inline;
}

@media (max-width: 767px) {
  #checkout .bm-payment-notice,
  #onepagecheckoutps .bm-payment-notice,
  #checkout .bm-reassurance-badge,
  #onepagecheckoutps .bm-reassurance-badge {
    font-size: 12px !important;
    padding: 8px 10px !important;
    margin: 8px 0 !important;
  }
}
/* ============================================================
   BIJUYMODA QUOTE UX — REASSURANCE & PAYMENT NOTICES (2026-09-08)
   Scoped to #checkout / #onepagecheckoutps to prevent global spill.
   ============================================================ */
#checkout .bm-payment-notice,
#onepagecheckoutps .bm-payment-notice {
  background: #fbf9fe !important;
  border: 1px solid #e0d2f5 !important;
  border-left: 4px solid #7828C8 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 0 0 14px 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #333 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#checkout .bm-payment-notice i,
#onepagecheckoutps .bm-payment-notice i {
  color: #7828C8 !important;
  font-size: 16px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

#checkout .bm-reassurance-badge,
#onepagecheckoutps .bm-reassurance-badge {
  background: #fbf9fe !important;
  border: 1px solid #e0d2f5 !important;
  border-left: 4px solid #7828C8 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 12px 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #333 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#checkout .bm-reassurance-badge i,
#onepagecheckoutps .bm-reassurance-badge i {
  color: #7828C8 !important;
  font-size: 16px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* Multilingual display logic for quote copies in notices */
.bm-payment-notice .bm-quote-copy,
.bm-reassurance-badge .bm-quote-copy {
  display: none;
}
.bm-payment-notice .bm-quote-copy.bm-es,
.bm-reassurance-badge .bm-quote-copy.bm-es {
  display: inline;
}
body.lang-en .bm-payment-notice .bm-quote-copy.bm-es,
body.lang-en .bm-reassurance-badge .bm-quote-copy.bm-es,
body.lang-it .bm-payment-notice .bm-quote-copy.bm-es,
body.lang-it .bm-reassurance-badge .bm-quote-copy.bm-es {
  display: none;
}
body.lang-en .bm-payment-notice .bm-quote-copy.bm-en,
body.lang-en .bm-reassurance-badge .bm-quote-copy.bm-en {
  display: inline;
}
body.lang-it .bm-payment-notice .bm-quote-copy.bm-it,
body.lang-it .bm-reassurance-badge .bm-quote-copy.bm-it {
  display: inline;
}

@media (max-width: 767px) {
  #checkout .bm-payment-notice,
  #onepagecheckoutps .bm-payment-notice,
  #checkout .bm-reassurance-badge,
  #onepagecheckoutps .bm-reassurance-badge {
    font-size: 12px !important;
    padding: 8px 10px !important;
    margin: 8px 0 !important;
  }
}