/* White Fox · Ficha de producto (v3)
   1) Etiquetas de opciones ("Color: Negro", "Talle: S", "Cantidad:") y título, también en la barra fija.
   2) Selector de cantidad [−] [1] [+] (lo arma wf-product-quantity.js con las opciones del plugin TouchSpin del tema).
   3) Logo de marca: caja de tamaño fijo, se adapta a cualquier imagen.
   Se carga solo en la ficha de producto desde templates/_partials/head.tpl */

/* 1) Etiquetas: sin mayúsculas automáticas (ficha y barra fija) */
#product .product-variants .control-label,
#product .product-quantity .control-label {
    text-transform: none;
}
#product .wf-variant-selected {
    font-weight: 400;
}

/* Título: peso 500, sin mayúsculas automáticas (ficha y barra fija) */
#product .tv-product-page-content .tvproduct-title-brandimage h1,
#product .tvfooter-product-sticky-bottom .h1,
#product .tvfooter-product-sticky-bottom h1 {
    font-weight: 500;
    text-transform: none;
}

/* Sin logo de marca, el título usa todo el ancho de la columna */
#product .tv-product-page-content .tvproduct-title-brandimage:not(:has(.tvproduct-brand)) h1 {
    padding-right: 0;
}

/* 2) Selector de cantidad: un solo control unido */
#product .qty.wf-qty { display: inline-block; width: auto; }
#product .qty.wf-qty .bootstrap-touchspin { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: auto; height: 40px; margin: 0; padding: 0; border: 1px solid rgba(30, 42, 58, .18); border-radius: 0; background: #fff; box-shadow: none; overflow: hidden; position: relative; }
#product .qty.wf-qty .bootstrap-touchspin .input-group-btn { display: flex; position: static; width: auto; font-size: 0; }
#product .qty.wf-qty .bootstrap-touchspin .btn-touchspin { display: flex; align-items: center; justify-content: center; position: static; width: 40px; min-width: 40px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #1E2A3A; line-height: 1; cursor: pointer; }
#product .qty.wf-qty .bootstrap-touchspin .btn-touchspin .material-icons { position: static; display: block; width: auto; height: auto; margin: 0; padding: 0; font-size: 18px; line-height: 1; color: #1E2A3A; }
#product .qty.wf-qty .bootstrap-touchspin .btn-touchspin:hover:not(:disabled) { background: #F9F4F0; }
#product .qty.wf-qty .bootstrap-touchspin .btn-touchspin:disabled { opacity: .35; cursor: default; background: transparent; }
#product .qty.wf-qty .bootstrap-touchspin input.form-control { float: none; display: block; width: 48px; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-left: 1px solid rgba(30, 42, 58, .12); border-right: 1px solid rgba(30, 42, 58, .12); border-radius: 0; background: transparent; box-shadow: none; text-align: center; color: #1E2A3A; font: inherit; }

/* 3) Logo de marca: caja fija; la imagen se escala entera sin deformarse */
#product .tvproduct-brand img.wf-brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 98px;
    max-height: 38px;
    margin-left: auto;
    object-fit: contain;
}

/* Barra fija: selector más compacto y con aire antes del botón "Agregar al carrito" */
#product #bottom_sticky_data .qty.wf-qty {
    margin-right: 0;
}
#product #bottom_sticky_data .qty.wf-qty .bootstrap-touchspin {
    height: 34px;
}
#product #bottom_sticky_data .qty.wf-qty .bootstrap-touchspin .btn-touchspin {
    width: 32px;
    min-width: 32px;
}
#product #bottom_sticky_data .qty.wf-qty .bootstrap-touchspin .btn-touchspin .material-icons {
    font-size: 16px;
}
#product #bottom_sticky_data .qty.wf-qty .bootstrap-touchspin input.form-control {
    width: 40px;
}

/* Barra fija con opciones de rectángulos (ej. Tamaño y Fibra): el título arriba y los valores en una sola fila */
#product .tvfooter-product-sticky-bottom .product-variants > .product-variants-item:has(input[type="radio"]) {
    max-width: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
#product .tvfooter-product-sticky-bottom .product-variants-item:has(input[type="radio"]) .control-label {
    margin: 0 0 6px 0;
}
#product .tvfooter-product-sticky-bottom .product-variants-item:has(input[type="radio"]) ul {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}
#product .tvfooter-product-sticky-bottom .product-variants-item:has(input[type="radio"]) ul li {
    float: none;
}

/* Barra fija: líneas finas que separan producto, opciones, cantidad y botón */
#product .tvfooter-product-sticky-bottom .product-variants {
    padding-left: 14px;
    border-left: 1px solid rgba(30, 42, 58, .14);
}
#product .tvfooter-product-sticky-bottom .product-variants > .product-variants-item {
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid rgba(30, 42, 58, .14);
}
#product .tvfooter-product-sticky-bottom .product-quantity {
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid rgba(30, 42, 58, .14);
}
/* Producto sin opciones: la línea separa el nombre del selector de cantidad */
#product .tvfooter-product-sticky-bottom form:not(:has(.product-variants)) .product-quantity {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(30, 42, 58, .14);
}
/* El texto del botón "Agregar al carrito" no se parte en dos líneas */
#product .tvfooter-product-sticky-bottom .tvcart-btn-model .add-to-cart,
#product .tvfooter-product-sticky-bottom .tvcart-btn-model .add-to-cart span {
    white-space: nowrap;
}

/* 5) Celular: opciones de rectángulos (ej. Tamaño y Fibra natural) con el título arriba y los valores debajo,
   igual que Talle (Talle queda como estaba: tiene su propio encabezado con la guía de talles). Más chicos, para que si son varios bajen prolijos en filas. */
@media (max-width: 767px) {
    #product .product-actions .product-variants > .product-variants-item:not(.wf-size-variant):has(.input-radio) {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #product .product-actions .product-variants-item:not(.wf-size-variant):has(.input-radio) .control-label {
        width: 100%;
        margin: 0 0 10px 0;
    }
    #product .product-actions .product-variants-item:not(.wf-size-variant):has(.input-radio) ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #product .product-actions .product-variants-item:not(.wf-size-variant):has(.input-radio) ul li {
        float: none;
        margin: 0 8px 8px 0;
    }
    #product .product-actions .product-variants-item:not(.wf-size-variant):has(.input-radio) .radio-label {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }
}