/*
 * vcajustetipografiapdp 1.0.5 "corrige definitivamente el selector de cantidad y sus flechas"
 * Autor: VentaClick
 *
 * Corrección incluida:
 * - Centra el valor de cantidad.
 * - Reserva 80 px para el campo numérico.
 * - Reserva 28 px para los botones de subir y bajar.
 * - Evita que el botón Añadir al pedido tape las flechas.
 * - Agrega fondo, borde y respuesta visual a las flechas.
 */

/* ============================================================
   01. VARIABLES VISUALES
   ============================================================ */

:root {
    --vc-color-primario: #10c916;
    --vc-color-primario-hover: #0eaf13;
    --vc-color-azul: #0063a1;
    --vc-color-descuento: #3931ab;
    --vc-color-texto: #232323;
    --vc-color-borde: #8f8f8f;
    --vc-color-fondo-claro: #f9f9f9;
    --vc-sombra-suave: 0 2px 10px rgba(0, 0, 0, 0.12);
    --vc-sombra-hover:
        0 14px 34px rgba(0, 0, 0, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   02. HEADER / LOGO / BUSCADOR
   ============================================================ */

#header .top-logo img {
    width: auto;
    max-height: 3rem;
}

/* ============================================================
   03. BLOQUES GENERALES
   ============================================================ */

.block-category {
    min-height: 0;
    margin-bottom: 1.563rem;
}

.blockreassurance {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 15px;
    text-align: center;
}

.block_newsletter #block-newsletter-label {
    font-size: 1.1rem;
    line-height: 1.75rem;
    color: var(--vc-color-texto);
    text-align: center;
}

.block-social ul {
    display: block;
}

.block-social ul li {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.125rem;
    cursor: pointer;
    background-color: var(--vc-color-azul);
    background-repeat: no-repeat;
}

/* ============================================================
   04. CARDS DE PRODUCTO / LISTADOS
   ============================================================ */

.product-container {
    position: relative;
}

.product-miniature .product-description {
    position: relative;
    bottom: 0;
    z-index: 10;
    height: auto;
    padding: 0.25rem 0.25rem 0.7rem;
    background: #ffffff;
}

#js-product-list .product-miniature,
.featured-products .product-miniature,
.products .product-miniature {
    overflow: visible;
}

#js-product-list .product-miniature .thumbnail-container,
.featured-products .product-miniature .thumbnail-container,
.products .product-miniature .thumbnail-container {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: var(--vc-sombra-suave);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    will-change: box-shadow, transform;
}

@media (hover: hover) {
    #js-product-list .product-miniature:hover .thumbnail-container,
    #js-product-list .product-miniature:focus-within .thumbnail-container,
    .featured-products .product-miniature:hover .thumbnail-container,
    .featured-products .product-miniature:focus-within .thumbnail-container,
    .products .product-miniature:hover .thumbnail-container,
    .products .product-miniature:focus-within .thumbnail-container {
        box-shadow: var(--vc-sombra-hover);
        transform: translateY(-3px);
    }
}

/* ============================================================
   05. FICHA DE PRODUCTO - TIPOGRAFÍA COMPACTA
   ============================================================ */

body.page-product {
    font-size: 14px;
    line-height: 1.45;
}

body.page-product .breadcrumb,
body.page-product .breadcrumb a,
body.page-product .breadcrumb span {
    font-size: 13px;
    line-height: 1.35;
}

body.page-product h1,
body.page-product .h1 {
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
}

body.page-product .product-discount .regular-price,
body.page-product .regular-price {
    font-size: 15px;
}

body.page-product .current-price,
body.page-product .product-price,
body.page-product .current-price span {
    font-size: 32px;
    line-height: 1.05;
    font-weight: 700;
}

body.page-product .current-price sup,
body.page-product .product-price sup {
    top: -0.7em;
    font-size: 13px;
}

body.page-product .discount,
body.page-product .discount-percentage,
body.page-product .discount-amount {
    padding: 7px 10px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
}

body.page-product .product-description-short,
body.page-product #product-description-short {
    font-size: 15px;
    line-height: 1.45;
}

body.page-product .product-information,
body.page-product .product-description,
body.page-product .tabs,
body.page-product .tabs p,
body.page-product .tabs li {
    font-size: 14px;
    line-height: 1.5;
}

.product-pack-price {
    display: none;
}

/* ============================================================
   06. FICHA DE PRODUCTO - CANTIDAD Y BOTÓN
   ============================================================ */

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix > .qty {
    display: block !important;
    float: none !important;
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    margin: 0 !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.qty
.bootstrap-touchspin {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #bbcdd2 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
#quantity_wanted {
    display: block !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 42px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 42px !important;
    color: var(--vc-color-texto) !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
#quantity_wanted::-webkit-inner-spin-button,
body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
#quantity_wanted::-webkit-outer-spin-button {
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.input-group-btn-vertical {
    position: static !important;
    display: flex !important;
    flex: 0 0 28px !important;
    flex-direction: column !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.input-group-btn-vertical
.btn-touchspin {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 21px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #232323 !important;
    cursor: pointer !important;
    background: #f1f3f5 !important;
    border: 0 !important;
    border-left: 1px solid #bbcdd2 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.input-group-btn-vertical
.bootstrap-touchspin-up {
    border-bottom: 1px solid #bbcdd2 !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.input-group-btn-vertical
.btn-touchspin i {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: "Material Icons", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #232323 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: none !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.touchspin-up::after,
body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.touchspin-down::after {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: "Material Icons", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #232323 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.input-group-btn-vertical
.btn-touchspin:hover {
    color: #111111 !important;
    background: #dfe3e6 !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.input-group-btn-vertical
.btn-touchspin:focus-visible {
    z-index: 2 !important;
    outline: 2px solid var(--vc-color-primario) !important;
    outline-offset: -2px !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix
.input-group-btn-vertical
.btn-touchspin:active {
    color: #000000 !important;
    background: #c9ced3 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
    transform: scale(0.92) !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix > .add {
    position: static !important;
    left: auto !important;
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
}

body#product.page-product
.product-add-to-cart
.product-quantity.clearfix > .add
.add-to-cart {
    position: static !important;
    left: auto !important;
    height: 44px !important;
    padding: 12px 22px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

body.page-product .product-add-to-cart label,
body.page-product .product-quantity label {
    font-size: 14px;
}

/* ============================================================
   07. TABLA DE DESCUENTOS POR CANTIDAD
   ============================================================ */

.product-discounts > .product-discounts-title {
    margin-top: 20px;
    padding-top: 5.5px;
    padding-bottom: 5.5px;
    font-size: 1.1875rem;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    background-color: var(--vc-color-descuento);
}

.product-discounts > .table-product-discounts thead tr th {
    width: 33%;
    padding: 0.625rem 1.25rem;
    text-align: center;
    background: #ffffff;
    border: 0.15rem var(--vc-color-borde) solid;
}

.product-discounts > .table-product-discounts tbody tr td {
    padding: 0.625rem 1.25rem;
    text-align: center;
    border: 0.15rem var(--vc-color-borde) solid;
}

body.page-product .qtydiscountgrid,
body.page-product table.qtydiscountgrid,
body.page-product .quantity-discounts,
body.page-product .discount-grid,
body.page-product .table-product-discounts {
    font-size: 14px;
}

body.page-product .qtydiscountgrid th,
body.page-product .qtydiscountgrid td,
body.page-product .quantity-discounts th,
body.page-product .quantity-discounts td,
body.page-product .discount-grid th,
body.page-product .discount-grid td,
body.page-product .table-product-discounts th,
body.page-product .table-product-discounts td {
    padding: 9px 10px;
    font-size: 14px;
}

body.page-product .qtydiscountgrid .btn,
body.page-product .quantity-discounts .btn,
body.page-product .discount-grid .btn,
body.page-product .table-product-discounts .btn {
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.2;
}

/* ============================================================
   08. BOTONES GENERALES
   ============================================================ */

.btn-primary,
.btn-primary:hover {
    color: #ffffff;
    background-color: var(--vc-color-primario);
    border-color: transparent;
}

.btn.btn-primary,
.btn.btn-secondary,
a.btn.btn-primary,
a.btn.btn-secondary,
button.btn.btn-primary,
button.btn.btn-secondary,
input.btn.btn-primary,
input.btn.btn-secondary,
.add-to-cart,
button.add-to-cart,
a.add-to-cart {
    box-shadow: var(--vc-sombra-suave);
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    will-change: box-shadow, transform;
}

@media (hover: hover) {
    .btn.btn-primary:hover,
    .btn.btn-primary:focus-visible,
    .btn.btn-secondary:hover,
    .btn.btn-secondary:focus-visible,
    .add-to-cart:hover,
    .add-to-cart:focus-visible {
        box-shadow: var(--vc-sombra-hover);
        transform: translateY(-2px);
    }
}

.btn.btn-primary:active,
.btn.btn-secondary:active,
.add-to-cart:active {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
    transform: translateY(0);
}

.btn.btn-primary[disabled],
.btn.btn-secondary[disabled],
.btn.btn-primary.disabled,
.btn.btn-secondary.disabled,
.add-to-cart[disabled] {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ============================================================
   09. WISHLIST
   ============================================================ */

.wishlist-button-add {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-top: 0.1875rem;
    cursor: pointer;
    background-color: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: 0.125rem -0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
    transition: 0.2s ease-out;
}

/* ============================================================
   10. CARRITO / PROMOCIONES
   ============================================================ */

.block-promo .promo-name .cart-summary-line span {
    color: #2cb931;
}

.block-promo.promo-highlighted {
    padding: 0 1rem;
    margin-bottom: 0;
    font-size: larger;
    font-weight: 900;
    color: #1aa51e;
    text-align: center;
}

.cart-grid-right .promo-discounts .cart-summary-line .label .code {
    color: #f6f6f6;
    text-transform: uppercase;
    cursor: pointer;
    background: var(--vc-color-primario);
}

/* ============================================================
   11. MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .cart-rule {
        margin-bottom: 20px;
        padding: 10px;
        background-color: var(--vc-color-fondo-claro);
        border: 1px solid #dddddd;
        border-radius: 5px;
    }

    .cart-rule ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .cart-rule ul li {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid #eeeeee;
    }

    .cart-rule ul li strong {
        flex-basis: 40%;
        text-align: left;
    }

    .cart-rule ul li:last-child {
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    body.page-product {
        font-size: 13px;
        line-height: 1.42;
    }

    body.page-product .breadcrumb,
    body.page-product .breadcrumb a,
    body.page-product .breadcrumb span {
        font-size: 12px;
        line-height: 1.3;
    }

    body.page-product h1,
    body.page-product .h1 {
        margin-bottom: 10px;
        font-size: 21px;
        line-height: 1.15;
    }

    body.page-product .product-discount .regular-price,
    body.page-product .regular-price {
        font-size: 14px;
    }

    body.page-product .current-price,
    body.page-product .product-price,
    body.page-product .current-price span {
        font-size: 30px;
        line-height: 1.05;
    }

    body.page-product .discount,
    body.page-product .discount-percentage,
    body.page-product .discount-amount {
        padding: 6px 9px;
        font-size: 13px;
    }

    body.page-product .product-description-short,
    body.page-product #product-description-short {
        font-size: 14px;
        line-height: 1.4;
    }

    body.page-product .product-information,
    body.page-product .product-description,
    body.page-product .tabs,
    body.page-product .tabs p,
    body.page-product .tabs li {
        font-size: 13px;
        line-height: 1.45;
    }

    body.page-product .add-to-cart,
    body.page-product .product-add-to-cart .btn {
        padding: 11px 18px;
        font-size: 14px;
    }

    body.page-product .qtydiscountgrid th,
    body.page-product .qtydiscountgrid td,
    body.page-product .quantity-discounts th,
    body.page-product .quantity-discounts td,
    body.page-product .discount-grid th,
    body.page-product .discount-grid td,
    body.page-product .table-product-discounts th,
    body.page-product .table-product-discounts td {
        padding: 8px 7px;
        font-size: 13px;
    }

    body.page-product .qtydiscountgrid .btn,
    body.page-product .quantity-discounts .btn,
    body.page-product .discount-grid .btn,
    body.page-product .table-product-discounts .btn {
        padding: 7px 9px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    body#product.page-product
    .product-add-to-cart
    .product-quantity.clearfix {
        flex-wrap: wrap !important;
    }
}

/* ============================================================
   12. ACCESIBILIDAD / REDUCCIÓN DE MOVIMIENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    #js-product-list .product-miniature .thumbnail-container,
    .featured-products .product-miniature .thumbnail-container,
    .products .product-miniature .thumbnail-container,
    .btn.btn-primary,
    .btn.btn-secondary,
    .add-to-cart,
    body#product.page-product
    .product-add-to-cart
    .product-quantity.clearfix
    .input-group-btn-vertical
    .btn-touchspin {
        transition: box-shadow 0.2s ease !important;
    }

    body#product.page-product
    .product-add-to-cart
    .product-quantity.clearfix
    .input-group-btn-vertical
    .btn-touchspin:active {
        transform: none !important;
    }
}