/* Flags de descuento y nuevo — global */
.product-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    pointer-events: auto;
}

.product-flags li.product-flag {
    background: #fce4ef;
    color: var(--color-pink);
    font-family: var(--font-brand);
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 4px;
    min-width: auto;
    min-height: auto;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

/* Variante azul: descuentos */
.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage,
.product-flags li.product-flag.on-sale {
    background: #deedf7;
    color: var(--color-blue);
}

/* Variante verde: nuevo */
.product-flags li.product-flag.new {
    background: #d4edda;
    color: #28a745;
}

/* Flags en pagina individual: posicion estatica debajo del titulo */
.product-individual-page .product-flags {
    position: static;
    flex-direction: row;
    margin: -8px 0 12px;
    width: auto;
}

/* Boton de lista de deseos */
.products article .wishlist-button-add {
    background-color: var(--color-pink);
    position: absolute;
    top: .635rem;
    right: .635rem;
    z-index: 10;
}

.products article .wishlist-button-add i {
    color: #E8E8E8;
}

/* Miniaturas de productos */
.product-miniature .thumbnail-container {
    position: relative;
    height: auto;
    margin-bottom: 1.563rem;
    overflow: hidden;
    background: none;
}

.product-miniature .product-description {
    background: none;
}

.product-miniature .product-title a {
    font-family: var(--font-brand);
    font-weight: normal;
    color: var(--color-gray-text);
    font-size: 13px;
    line-height: 16px;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}



.product-miniature .price {
    font-family: var(--font-brand);
    font-weight: normal;
    font-size: 24px;
    color: var(--color-pink);
}

.products-actions {
    position: relative;
}

/* Boton añadir al carrito (estilos base en global.css, aqui solo los especificos) */
.products-actions .button-add-cart {
    padding: 0;
    width: 100%;
    border-radius: var(--btn-radius-lg);
    font-weight: bold;
    height: 2.5rem;
    line-height: normal;
}

.products-actions .button-add-cart:hover {
    cursor: pointer;
}

.products-actions .button-add-cart img {
    position: absolute;
    width: 25px;
    height: 25px;
    right: 20px;
    top: 7px;
}

/* Hover informacion del producto con/sin variantes */
.product-miniature .thumbnail-top:hover .highlighted-informations {
    top: calc(100% - 2.4rem);
}

.product-miniature .thumbnail-container:hover .highlighted-informations {
    top: 100%;
}

.product-miniature .thumbnail-top:hover .highlighted-informations.no-variants {
    top: calc(100% - 2.4rem);
}

.product-miniature .thumbnail-container:hover .highlighted-informations.no-variants {
    top: 100%;
}

.product-miniature .variant-links {
    display: none;
}

.product-add-to-cart .control-label {
    display: none;
}

.product-miniature .highlighted-informations .quick-view:hover {
    color: var(--color-pink);
}

/* Imagen de descuento */
.product-discount .img-discount-products {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -70px;
    left: -530px;
}


/* Precios en pagina individual */
.product-individual-page .current-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
}

/* Precio tachado (antiguo) — brand font para coherencia con el precio actual */
.regular-price {
    font-family: var(--font-brand);
    font-weight: normal;
    font-size: 18px;
    color: var(--color-gray-medium);
    text-decoration: line-through;
}

.product-individual-page .current-price .regular-price {
    order: -1;
}

.product-price .current-price .current-price-value {
    font-family: var(--font-brand);
    font-weight: normal;
    font-size: 24px;
    color: var(--color-blue);
}

/* Banner de descuento */
.has-discount .discount {
    display: inline-block;
    padding: 5px 10px;
    margin-left: .625rem;
    font-family: var(--font-brand);
    font-weight: normal;
    font-size: 13px;
    line-height: 1;
    color: var(--color-blue);
    text-transform: uppercase;
    background: rgba(59, 140, 201, 0.12);
    border-radius: 4px;
    vertical-align: middle;
}

/* Personalización del producto */
.product-individual-page .product-customization {
    margin-top: 1.5rem;
}

.product-individual-page .product-customization .card {
    border: 1px solid var(--color-gray-border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: none;
    background: var(--color-white);
}

.product-individual-page .product-customization .card-title {
    font-family: var(--font-brand);
    font-size: 1rem;
    color: var(--color-pink);
    margin-bottom: 10px;
}

.product-individual-page .product-customization .card-block > p:not(.card-title) {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-gray-medium);
    margin-bottom: 1rem;
}

.product-individual-page .product-customization .product-customization-item {
    text-align: left;
}

.product-individual-page .product-customization label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dark);
    display: block;
    text-align: left;
    margin-bottom: 6px;
}

.product-individual-page .product-customization textarea.product-message {
    width: 100%;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-dark);
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    resize: vertical;
    min-height: 70px;
}

.product-individual-page .product-customization textarea.product-message:focus {
    outline: none;
    border-color: var(--color-blue);
}

.product-individual-page .product-customization small {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-gray-text);
}

.product-individual-page .product-customization ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-individual-page .product-customization .btn-primary {
    background: var(--color-blue);
    border: none;
    border-radius: var(--btn-radius);
    font-family: var(--font-brand);
    font-size: 13px;
    height: 36px;
    line-height: 36px;
    padding: 0 20px;
    text-transform: uppercase;
    color: var(--color-white);
}

.product-individual-page .product-customization .btn-primary:hover {
    background: #2d7ab5;
}

.product-individual-page .product-customization .clearfix {
    text-align: right;
}

/* Notifications (message bags) */
#wrapper #notifications:has(.alert) {
    font-family: var(--font-brand);
    font-size: 13px;
}

#wrapper #notifications .alert {
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

/* Breadcrumb — ancho alineado con el contenido */
#wrapper .breadcrumb {
    font-family: var(--font-brand);
    font-size: 13px;
    font-weight: normal;
    padding: 0.75rem 1.5rem;
    margin: 0 0 0.5rem;
    background-color: var(--color-gray-light-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
}

#wrapper .breadcrumb li {
    text-transform: none;
}

#wrapper .breadcrumb li a {
    color: var(--color-blue);
}

#wrapper .breadcrumb li::after {
    color: var(--color-gray-medium);
}

#wrapper .breadcrumb li:last-child {
    color: var(--color-gray-medium);
}

/* Eliminar max-width del parent theme que desperdicia espacio */
#product #content {
    max-width: none;
}

/* Reducir gutter entre columnas de producto */
.product-individual-page.row {
    margin-left: 0;
    margin-right: 0;
}

.product-individual-page.row > .col-md-7 {
    padding-left: 0;
    padding-right: 20px;
}

.product-individual-page.row > .col-md-5 {
    padding-left: 20px;
    padding-right: 0;
}

/* En desktop la columna de la info (col-md-5) suele ser más alta que la galería,
   así que esta se queda fija (sticky) mientras se hace scroll por la descripción.
   El top lo marca la altura del header fijo (128px de margin-top del wrapper) más
   un pequeño hueco. Solo en desktop: en móvil/tablet las columnas se apilan. */
@media (min-width: 992px) {
    .product-individual-page.row > .col-md-7 {
        position: sticky;
        top: 140px;
        align-self: flex-start;
    }
}

/* ===== Pagina individual de cada producto ===== */

.product-individual-page {
    margin-top: 2rem;
}

.product-cover picture {
    display: block;
    width: 100%;
}

.product-cover img,
.product-cover img[data-fallback] {
    display: block;
    background: none;
    width: 100%;
    height: auto;
}


/* Info del producto individual */
.product-individual-information {
    padding: 10px 0 10px 10px;
}

.product-individual-information > img {
    max-height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
}

.product-individual-information .h1 {
    font-family: var(--font-brand);
    font-size: 30px;
    color: var(--color-pink);
    text-transform: uppercase;
    padding: 10px 0;
    margin: 20px 0 15px;
    width: 100%;
}

.product-price .current-price .current-price-value-individual {
    font-family: var(--font-brand);
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    color: var(--color-blue);
}

/* Variantes del producto */
.product-variants {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.product-variants select {
    appearance: none;
    padding: 8px 40px 8px 12px;
    border-radius: 999px;
    border: 1px solid #d0d4dc;
    background: var(--color-white);
    font-size: 0.9rem;
    color: #222;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    min-width: 120px;
}

.product-actions .control-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-gray-medium);
}

.product-variants select:hover {
    border-color: var(--color-blue);
    background-color: #f7fbff;
}

.product-variants select:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(59, 140, 201, 0.25);
}

/* Colores customizables */
.product-variants > .product-variants-item ul li .color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.product-variants > .product-variants-item ul li label:hover .color {
    transform: scale(1.12);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

.product-variants > .product-variants-item ul li .input-color:checked + .color {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(59, 140, 201, 0.25);
    transform: scale(1.15);
}

.product-variants > .product-variants-item ul li .input-color:focus + .color {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

/* Boton añadir al carrito individual (estilos base en global.css) */
.product-actions .add-to-cart {
    width: 200px;
    border-radius: var(--btn-radius-lg);
    height: 2.5rem;
    padding: 0;
    font-weight: bold;
    line-height: normal;
}

/* Lista de deseos */
.product-actions .wishlist-button-add {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    min-width: 2.5rem;
    padding-top: .1875rem;
    box-shadow: .125rem -0.125rem .25rem 0 rgba(0,0,0,.2);
    border-radius: 50%;
    cursor: pointer;
    transition: .2s ease-out;
    border: none;
    background-color: var(--color-pink);
}

.product-actions .product-quantity {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.product-actions .wishlist-button-add i {
    color: #E8E8E8;
}

/* Input de cantidad */
.input-group.bootstrap-touchspin {
    display: flex;
    align-items: center;
    max-width: 120px;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.input-group.bootstrap-touchspin input[type="number"] {
    width: 60px;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 500;
    padding: 6px 0;
    outline: none;
    color: var(--color-text-dark);
}

.input-group-btn-vertical {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ccc;
}

.input-group-btn-vertical .btn-touchspin {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 30px;
    background-color: #f7f7f7;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.input-group-btn-vertical .btn-touchspin:hover {
    background-color: #e0f0ff;
}

.input-group-btn-vertical .btn-touchspin:active {
    background-color: #c3e1ff;
}

.input-group-btn-vertical .btn-touchspin i {
    font-size: 16px;
    line-height: 1;
    color: var(--color-pink);
}

/* Productos asociados */
.product-accessories {
    margin-top: 6rem;
}

.product-accessories .h5 {
    font-family: var(--font-brand);
    color: var(--color-dark-pink);
    font-size: 30px;
    padding: 14px 0;
    margin: 10px 0 30px;
    text-align: center;
}

/* ===== Pestañas de producto (Descripción / Detalles) ===== */

.tabs {
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    background: #fff;
    border: 1px solid var(--color-gray-border);
    border-radius: 12px;
    box-shadow: none;
    font-family: var(--font-body);
}

.tabs .nav-tabs .nav-link {
    font-family: var(--font-brand);
    font-weight: bold;
    color: var(--color-gray-medium);
    border: 0;
    padding: 0.5rem 1rem;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tabs .nav-tabs .nav-link:hover {
    color: var(--color-pink);
    border-bottom: 3px solid rgba(205, 14, 107, 0.3);
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.active:hover {
    color: var(--color-pink);
    border-bottom: 3px solid var(--color-pink);
    background: transparent;
}

#tab-content .tab-pane .product-description p {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: normal;
    color: #666;
}

.tabs #product-details {
    padding: 0;
}

.table-details {
    margin-bottom: 1rem;
}

.table-details table {
    width: 100%;
    border-collapse: collapse;
}

.table-details thead th {
    font-family: var(--font-brand);
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-pink);
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--color-pink);
    text-align: left;
}

.table-details tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.table-details tbody tr:last-child {
    border-bottom: none;
}

.table-details tbody th {
    font-weight: 600;
    font-size: 0.875rem;
    color: #444;
    padding: 0.625rem 1rem;
    text-transform: capitalize;
    white-space: nowrap;
    width: 1%;
}

.table-details tbody td {
    font-size: 0.875rem;
    color: #333;
    padding: 0.625rem 1rem;
    text-align: right;
}

.tabs .tab-pane .table-details .manufacturer-logo {
    max-height: 40px;
    width: auto;
    object-fit: contain;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: none;
}

/* Referencia y codigo de barras */
/* Boton de advertencias de seguridad */
.product-warnings-cta {
    text-align: center;
    margin-top: 1rem;
}

.product-warnings-cta .btn-warnings {
    background-color: var(--color-blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 24px;
    font-family: var(--font-body-condensed);
    font-weight: bold;
    font-size: 13px;
    text-transform: none;
    transition: background-color 0.2s;
}

.product-warnings-cta .btn-warnings:hover {
    background-color: #2d7ab5;
    color: #fff;
}

.more-info .ref-barcode,
.more-info .advertencia-products {
    color: var(--color-gray-dark);
    font-family: var(--font-body);
    font-size: 13px;
}

.more-info .ref-barcode {
    text-align: initial;
}

.more-info .advertencia-products {
    margin-bottom: 7px;
}

.more-info .advertencia-responsable-container-product {
    margin-top: 1.5rem;
}

/* Movil/estrecho: la ficha de datos del producto puede exceder el ancho del
   viewport en pantallas muy estrechas (~320px). Se contiene el scroll dentro
   del bloque en vez de recortar la tabla (patron .rw-table-scroll). */
@media (max-width: 767.98px) {
    .table-details {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Galería en móvil real (1 columna, miniaturas en tira horizontal) =====
   Solo aplica por debajo de 768px. A partir de 768px el layout es de 2 columnas
   y las miniaturas pasan a una columna vertical al lado de la imagen (galería
   normal del tema padre), donde estas reglas no deben intervenir. */
@media (max-width: 767.98px) {
    /* Miniaturas centradas (el tema padre las alinea a la izquierda) y más pegadas
       a la imagen principal (el tema padre deja 20px). */
    .product-images.js-qv-product-images {
        justify-content: center;
        margin-top: 8px;
    }

    .product-cover {
        margin-bottom: 0;
    }

    /* Si solo hay una imagen, la miniatura duplica la portada: se oculta cuando la
       lista no tiene una segunda miniatura. Solo en móvil de 1 columna: en el
       layout de 2 columnas la miniatura sí debe verse. */
    .product-images.js-qv-product-images:not(:has(.thumb-container ~ .thumb-container)) {
        display: none;
    }

    /* El padding lateral de 20px de las columnas es el gutter del layout de 2
       columnas (separa imagen e info). En móvil, con las columnas apiladas, ese
       padding solo en un lado deja la imagen descentrada (margen derecho). Se
       anula para que la imagen quede simétrica. */
    .product-individual-page.row > .col-md-7,
    .product-individual-page.row > .col-md-5 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ===== Ficha de producto en móvil/tablet (info, carrito, tabs) ===== */
@media (max-width: 991.98px) {
    /* Separación más compacta entre título, precio, fila de cantidad y carrito:
       el tema padre deja mucho margen/padding vertical que en móvil sobra. */
    .product-information h1 {
        margin-top: 8px;
        margin-bottom: 6px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .product-prices {
        margin-top: 8px;
    }

    /* Cantidad + carrito + wishlist en la misma fila que en desktop: el botón de
       carrito ocupaba todo el ancho y empujaba el corazón a una fila nueva. Se
       fuerza nowrap y el botón se adapta al espacio restante. */
    .product-actions .product-quantity {
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }

    .product-actions .add {
        flex: 1 1 auto;
        min-width: 0;
    }

    .product-actions .add-to-cart {
        width: 100%;
    }

    /* El tema padre añade margin-bottom:8px a la cantidad y al carrito (pensado
       para cuando envuelven en varias filas). Con align-items:center ese margen
       descentra el corazón 4px respecto a los otros dos. Se elimina en la fila. */
    .product-actions .product-quantity .qty,
    .product-actions .product-quantity .add {
        margin-bottom: 0;
    }

    /* El icono del carrito robaba espacio y el texto "Añadir al carrito" quedaba
       apretado; se oculta en móvil para que el texto respire. */
    .product-actions .add-to-cart .material-icons {
        display: none;
    }

    /* Wishlist: el padding asimétrico del módulo (3px arriba, 1px abajo) descentra
       el corazón dentro del círculo. Se centra el icono vía flex. */
    .product-actions .wishlist-button-add {
        align-self: center;
        margin-bottom: 0;
        padding: 0;
    }

    /* Tabs "Descripción"/"Detalles" en una sola línea: el tema padre las flota y
       con la columna estrecha del layout tablet acaban apilándose. Se pasan a
       flex sin wrap y se reduce el padding para que quepan las dos. */
    .tabs .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
    }

    .tabs .nav-tabs .nav-item {
        float: none;
    }

    .tabs .nav-tabs .nav-link {
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
    }
}