/* ==========================================================================
   Ficha de producto — panel derecho de export/3.2 Single.pdf

   Medido sobre el PDF renderizado a 1:1 (1366px). El texto del PDF está vectorizado
   (`getTextContent()` devuelve 0 items), así que los anchos en píxeles SON los del diseño:
   los tamaños de fuente salen de comparar el ancho de cada cadena contra Montserrat.

   Panel: x 802..1303 → 502px de ancho.

   ⚠️ ESPECIFICIDAD — dos capas. Las reglas de abajo, ancladas a `.tp-panel`, definen el
   aspecto. Las del bloque final repiten las declaraciones que WooCommerce pisa con
   selectores de especificidad alta. Ver el comentario de ese bloque antes de tocar valores.

   ⚠️ Hay clases de WooCommerce (`.cart`, `.quantity`, `.variations`,
   `.single_add_to_cart_button`…). NO renombrarlas: ese HTML lo genera Woo y de él dependen
   su JS de variaciones y el de Variation Swatches.
   ========================================================================== */

.tp-panel {
    width: 100%;
    max-width: 502px;
}

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

/* --- Título --- ancho medido 302px ⇒ 26px/700 --- */
.tp-panel .tp-panel__titulo {
    margin: 0 0 17px;
    font-family: Montserrat, sans-serif;
    font-size: 26px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.25;
    color: #070707;
}

/* --- Precio --- «$390.000  $500.000» mide 195px ⇒ 22px --- */
.tp-panel .tp-panel__precio {
    margin: 0 0 21px;
    padding-bottom: 18px;
    border-bottom: 1px solid #C1C1C1;
    font-family: Montserrat, sans-serif;
    font-size: 22px;
    /* El diseño lo lleva en regular, no en negrita: solo el título va en 700. */
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    color: #070707;
}

/* En oferta, Woo emite <ins> con el precio nuevo y <del> con el viejo.
   OJO: en el diseño el precio viejo NO va tachado, solo en gris. */
.tp-panel .tp-panel__precio del {
    margin-left: 10px;
    color: #C1C1C1;
    text-decoration: none;
    opacity: 1;
}

.tp-panel .tp-panel__precio ins {
    text-decoration: none;
    background: none;
    color: #070707;
}

.tp-panel .tp-panel__precio .woocommerce-Price-currencySymbol {
    font-weight: inherit;
}

/* --- Descripción --- línea 1 mide 464px ⇒ 18px; interlineado medido 19px --- */
.tp-panel .tp-panel__desc {
    margin: 0 0 19px;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.06;
    color: #070707;
}

.tp-panel .tp-panel__desc p {
    margin: 0 0 12px;
}

.tp-panel .tp-panel__desc p:last-child {
    margin-bottom: 0;
}

/* --- Variaciones (talla, color…) --- */
.tp-panel .variations {
    width: 100%;
    margin: 0;
    border: none;
    border-collapse: collapse;
}

.tp-panel .variations tr,
.tp-panel .variations th,
.tp-panel .variations td {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
}

.tp-panel .variations .label,
.tp-panel .variations label {
    display: block;
    margin: 0 0 9px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    color: #7C7C7C;
}

.tp-panel .variations .value {
    margin-bottom: 20px;
}

/* Los círculos los pinta el plugin de swatches; aquí solo la medida del diseño.
   30px de diámetro y 20px de hueco: 3·30+2·20 = 130 (talla) y 5·30+4·20 = 230 (color),
   que es exactamente lo medido en el PDF.

   Estas reglas son para plugins que emiten `.variable-items-wrapper` / `.variable-item`.
   El que hay instalado en el sitio es **TA WooCommerce Variation Swatches** (`tawcvs`), que
   usa otras clases y va más abajo, en su propio bloque. Se dejan las dos por si se cambia. */
.tp-panel .variations .value ul,
.tp-panel .variations .value .variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-panel .variations .value li,
.tp-panel .variations .value .variable-item {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #CFCFCF;
    box-shadow: none;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

/* Swatch de texto (talla): en el diseño los círculos van lisos, pero si el plugin de swatches
   está configurado con texto en vez de color, que al menos quepa y quede centrado. */
.tp-panel .variations .value .variable-item-span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    line-height: 1;
}

.tp-panel .variations .value li.selected,
.tp-panel .variations .value .variable-item.selected {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #032929;
}

/* Si el atributo se pinta como desplegable, que al menos comparta el aspecto de píldora. */
.tp-panel .variations select {
    width: 100%;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #C1C1C1;
    border-radius: 22px;
    background: #FFFFFF;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    color: #070707;
}

/* «Limpiar»: el JS de variaciones de Woo lo alterna con `visibility`, o sea que ocupa su
   hueco esté visible o no — y el diseño no le deja ninguno. Se saca del flujo hasta que ese
   mismo JS lo pone visible, así el enlace sigue funcionando cuando toca. */
.tp-panel .reset_variations {
    display: none;
    margin: 0 0 12px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    color: #7C7C7C;
}

.tp-panel .reset_variations[style*="visible"] {
    display: inline-block;
}

/* --- Cantidad --- píldora de 184×44, borde #C1C1C1 --- */

/* Etiqueta «Cantidad»: Woo no la pinta y el diseño sí. La añade el shortcode por hook. */
.tp-panel .tp-cantidad-label {
    display: block;
    margin: 0 0 10px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    color: #7C7C7C;
}

.tp-panel .quantity {
    display: inline-flex;
    align-items: center;
    width: 184px;
    height: 44px;
    margin: 0 0 20px;
    border: 1px solid #C1C1C1;
    border-radius: 22px;
    overflow: hidden;
    background: #FFFFFF;
    float: none;
}

.tp-panel .quantity::before {
    content: "";
}

/* `quantity-input.php` mete un <label> «Cantidad» para lectores de pantalla. Lo esconde el
   tema con `.screen-reader-text`… si lo trae. Sin esta regla el texto se ve dentro de la
   píldora y empuja el número fuera — pasó en el fixture. Se oculta sin quitarlo del árbol de
   accesibilidad. */
.tp-panel .quantity .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.tp-panel .quantity input.qty {
    flex: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #070707;
    -moz-appearance: textfield;
    appearance: textfield;
}

.tp-panel .quantity input.qty::-webkit-outer-spin-button,
.tp-panel .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Los signos van dibujados (SVG), no como glifos: en el diseño son trazos finos de 13px,
   que con una fuente saldrían o muy pequeños o desalineados. Centro a 31px de cada borde. */
.tp-panel .tp-qty-btn {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    color: #070707;
    cursor: pointer;
}

.tp-panel .tp-qty-btn svg {
    display: block;
    width: 13px;
    height: 13px;
}

.tp-panel .tp-qty-btn:hover {
    background: #F2F2F2;
}

.tp-panel .tp-qty-btn:focus-visible {
    outline: 2px solid #8DB522;
    outline-offset: -2px;
}

/* --- Botones --- «Añadir al carrito» mide 134px de tinta ⇒ 18px/700 --- */
.tp-panel form.cart {
    margin: 0;
}

/* Separador entre la cantidad y los botones. Lo emite el shortcode por hook, no es un
   `border-top` del formulario: el formulario también envuelve las variaciones. */
.tp-panel .tp-sep {
    height: 1px;
    margin: 0 0 21px;
    padding: 0;
    border: none;
    background: #C1C1C1;
}

.tp-panel .single_add_to_cart_button,
.tp-panel .tp-comprar {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0 0 21px;
    padding: 0 24px;
    border: none;
    border-radius: 22px;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    float: none;
    transition: background 0.3s ease;
}

.tp-panel .single_add_to_cart_button {
    background: #032929;
}

.tp-panel .single_add_to_cart_button:hover {
    background: #0A4141;
    color: #FFFFFF;
}

.tp-panel .tp-comprar {
    margin-bottom: 0;
    background: #8DB522;
}

.tp-panel .tp-comprar:hover {
    background: #7CA01E;
    color: #FFFFFF;
}

.tp-panel .single_add_to_cart_button:focus-visible,
.tp-panel .tp-comprar:focus-visible {
    outline: 3px solid #8DB522;
    outline-offset: 3px;
}

/* Woo deshabilita el botón hasta elegir variación: que se note. */
.tp-panel .single_add_to_cart_button.disabled,
.tp-panel .single_add_to_cart_button:disabled,
.tp-panel .tp-comprar:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Stock y precio de la variación --- */
.tp-panel .stock {
    margin: 0 0 14px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-style: normal;
    color: #7C7C7C;
}

.tp-panel .stock.out-of-stock {
    color: #C0392B;
}

.tp-panel .woocommerce-variation-price {
    margin-bottom: 16px;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #070707;
}

/* ==========================================================================
   Overrides de contexto WooCommerce

   Las reglas de Woo para la ficha de producto son de especificidad ALTA — no basta con
   anclar a `.tp-panel` como en el resto del plugin, ni sirve el truco del orden de carga
   (`woocommerce-general`), porque no hay empate:

     .woocommerce div.product form.cart div.quantity   (0,4,3)
     .woocommerce div.product form.cart .button        (0,4,3)
     .woocommerce div.product form.cart .variations td (0,4,3)
     .woocommerce button.button.alt                    (0,3,1)

   Aquí se repiten SOLO las declaraciones que chocan, con el contexto completo delante para
   subir por encima. Si el panel se usa fuera de una ficha de producto estas reglas no
   aplican… pero las de Woo tampoco, así que valen las de arriba.

   Al tocar cualquier valor de arriba, mirar si tiene gemelo aquí abajo.
   ========================================================================== */

.woocommerce div.product .tp-panel form.cart div.quantity {
    float: none;
    display: inline-flex;
    width: 184px;
    height: 44px;
    margin: 0 0 20px;
    border: 1px solid #C1C1C1;
    border-radius: 22px;
}

.woocommerce .tp-panel .quantity input.qty {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: center;
    font-size: 18px;
}

.woocommerce div.product .tp-panel form.cart .variations td,
.woocommerce div.product .tp-panel form.cart .variations th {
    display: block;
    width: 100%;
    padding: 0;
    line-height: normal;
    vertical-align: baseline;
}

.woocommerce div.product .tp-panel form.cart .variations label {
    font-size: 16px;
    font-weight: 400;
    color: #7C7C7C;
}

.woocommerce div.product .tp-panel form.cart .variations select {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-right: 0;
}

.woocommerce div.product .tp-panel form.cart button.single_add_to_cart_button,
.woocommerce div.product .tp-panel form.cart button.tp-comprar {
    float: none;
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 24px;
    border-radius: 22px;
    font-size: 18px;
    font-weight: 700;
    line-height: 44px;
    vertical-align: baseline;
    color: #FFFFFF;
}

.woocommerce div.product .tp-panel form.cart button.single_add_to_cart_button {
    margin: 0 0 21px;
    background-color: #032929;
}

.woocommerce div.product .tp-panel form.cart button.single_add_to_cart_button:hover {
    background-color: #0A4141;
    color: #FFFFFF;
}

.woocommerce div.product .tp-panel form.cart button.tp-comprar {
    margin: 0;
    background-color: #8DB522;
}

.woocommerce div.product .tp-panel form.cart button.tp-comprar:hover {
    background-color: #7CA01E;
    color: #FFFFFF;
}

/* ==========================================================================
   Swatches: TA WooCommerce Variation Swatches (`tawcvs`)

   Es el plugin que hay instalado. Su markup es
   `.tawcvs-swatches > .swatch-item-wrapper > .swatch.swatch-shape-circle.swatch-type-{color|label}`,
   nada que ver con el `.variable-item` de otros plugins de swatches.

   De fábrica ya pinta círculos de 30px —la medida del diseño—, pero separa los items con
   `margin: 0 15px 15px 0` en el envoltorio, y el diseño pide **20px de hueco**. Ese margen
   viene de un `<style>` inline (los ajustes del plugin) **con `!important`** y selector
   `.woocommerce div.product .cart.variations_form … .swatch-item-wrapper` (0,5,2), así que
   hace falta `!important` **y** más especificidad: se cuela `.tp-panel` en medio → (0,6,2).

   Comprobado sobre `/producto/sombreros-tradicional/`: las filas miden 130 y 230 exactos,
   que es lo medido en el PDF.
   ========================================================================== */

.tp-panel .variations .tawcvs-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.woocommerce div.product .tp-panel .cart.variations_form .tawcvs-swatches .swatch-item-wrapper {
    margin: 0 !important;
}

.woocommerce div.product .tp-panel .cart.variations_form .tawcvs-swatches .swatch,
.woocommerce div.product .tp-panel .cart.variations_form .tawcvs-swatches .swatch.swatch-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    line-height: 1;
}

/* ==========================================================================
   Convivencia con «Quantity Increment Buttons» (qib)

   El sitio tiene ese plugin instalado: envuelve el campo de cantidad en `.qib-container` y
   añade sus propios − / + (`.qib-button`). El JS de este componente lo detecta y NO pone los
   suyos — aquí solo se le da a lo suyo el aspecto del diseño.

   ⚠️ AQUÍ SÍ HACE FALTA `!important`, y es el único sitio del plugin donde se usa. qib inyecta
   un `<style>` con la especificidad inflada a propósito:

     form.cart button[type="submit"]:not(#qib_id):not(#qib_id):not(_):not(_) { height: 35px }
     .qib-button:not(#qib_id):not(#qib_id) { height: 35px; width: 30px; background: #e2e2e2 }
     .qib-container .quantity input.qty:not(#qib_id):not(#qib_id) { height: 35px }

   Cada `:not(#id)` pesa como un ID, así que son selectores de peso (2,x,y): NINGÚN selector
   de clases puede ganarles. O `!important`, o encadenar tres `:not(#…)` propios — que sería
   igual de frágil y mucho menos legible. Va acotado a `.tp-panel`.
   ========================================================================== */

/* La píldora pasa a ser el contenedor de qib, no `.quantity`. */
.tp-panel .qib-container {
    display: inline-flex !important;
    align-items: center;
    width: 184px;
    height: 44px;
    margin: 0 0 20px !important;
    padding: 0;
    border: 1px solid #C1C1C1;
    border-radius: 22px;
    overflow: hidden;
    background: #FFFFFF;
    float: none !important;
}

/* Dentro de la píldora, `.quantity` ya no pinta nada: solo lleva el input. */
.tp-panel .qib-container div.quantity {
    display: flex !important;
    align-items: center;
    flex: 1 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    float: none !important;
    background: none !important;
}

.tp-panel .qib-container .quantity input.qty {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-align: center !important;
    font-family: Montserrat, sans-serif;
    font-size: 18px !important;
    color: #070707;
}

/* Los − / + de qib llevan los caracteres «-» y «+» como texto. Se ocultan y se dibujan los
   trazos de 13px del diseño, igual que hace el JS con su SVG cuando qib no está. */
.tp-panel .qib-container .qib-button {
    position: relative;
    flex: none;
    width: 62px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    color: #070707 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer;
}

.tp-panel .qib-container .qib-button:hover {
    background: #F2F2F2 !important;
}

.tp-panel .qib-container .qib-button::before,
.tp-panel .qib-container .qib-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.tp-panel .qib-container .qib-button::before {
    width: 13px;
    height: 1.5px;
}

/* La barra vertical solo en el «+». */
.tp-panel .qib-container .qib-button.plus::after {
    width: 1.5px;
    height: 13px;
}

/* qib aplasta TODOS los submit del formulario a 35px de alto y les quita el bloque. */
.tp-panel form.cart button.single_add_to_cart_button,
.tp-panel form.cart button.tp-comprar {
    display: block !important;
    width: 100%;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 24px !important;
    margin-left: 0 !important;
    vertical-align: baseline !important;
    float: none !important;
}

.tp-panel form.cart button.single_add_to_cart_button {
    margin: 0 0 21px !important;
}

.tp-panel form.cart button.tp-comprar {
    margin: 0 !important;
}

/* --- Móvil --- */
@media (max-width: 600px) {
    .tp-panel .tp-panel__titulo {
        font-size: 22px;
    }

    .tp-panel .tp-panel__precio {
        font-size: 19px;
    }

    .tp-panel .tp-panel__desc {
        font-size: 16px;
        line-height: 1.35;
    }

    .tp-panel .quantity,
    .woocommerce div.product .tp-panel form.cart div.quantity {
        width: 100%;
    }

    .tp-panel .qib-container {
        width: 100%;
    }

    .tp-panel .single_add_to_cart_button,
    .tp-panel .tp-comprar,
    .woocommerce div.product .tp-panel form.cart button.single_add_to_cart_button,
    .woocommerce div.product .tp-panel form.cart button.tp-comprar {
        font-size: 16px;
    }
}