/* #region DIDEMEX - Product Page Quantity: - 1 + */

/* =========================================================
   DIDEMEX - Product Page Quantity: - 1 +
========================================================= */

/* =========================================================
   DIDEMEX - Selector de cantidad (quantity stepper)
========================================================= */

body.single-product {
    /* Variables locales para no repetir valores en cada regla */
    --dmx-border-color: #1a1a1a;
    --dmx-qty-height: 38px;
}

body.single-product form.cart .quantity.dmx-qty-ready {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin-right: 10px !important;
    height: var(--dmx-qty-height) !important;
    border: 1px solid var(--dmx-border-color) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #fff !important;
}

body.single-product form.cart .quantity.dmx-qty-ready .dmx-qty-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

body.single-product form.cart .quantity.dmx-qty-ready .dmx-qty-btn:hover {
    background: #f3f3f3 !important;
}

body.single-product form.cart .quantity.dmx-qty-ready input.qty {
    width: 54px !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--dmx-border-color) !important;
    border-right: 1px solid var(--dmx-border-color) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

/* Ocultar flechas nativas del input number (Chrome/Safari) */
body.single-product form.cart .quantity.dmx-qty-ready input.qty::-webkit-outer-spin-button,
body.single-product form.cart .quantity.dmx-qty-ready input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* #endregion DIDEMEX - Product Page Quantity */

/* #region DIDEMEX - Ocultar flechas dropdown en variaciones */

/* =========================================================
   DIDEMEX - Ocultar flechas dropdown en variaciones tipo swatches
========================================================= */

body.single-product table.variations td.value::after,
body.single-product table.variations td.value span::after,
body.single-product table.variations .woo-variation-items-wrapper::after,
body.single-product table.variations .woo-variation-items-wrapper span::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Asegurar que el select raw de Woo no se vea */
body.single-product table.variations select.woo-variation-raw-select,
body.single-product table.variations select {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Quitar espacio raro del span que envuelve el select oculto */
body.single-product table.variations td.value > span {
    display: none !important;
}

/* WooCommerce core aplica line-height:2em a td/th de .variations (woocommerce.css),
   eso es lo que separa tanto las filas Almacenamiento/Color/Estética. Se reduce aquí. */
body.single-product table.variations td,
body.single-product table.variations th {
    line-height: 1 !important;
}

/* WooCommerce core deja table.variations en width:100% sin table-layout:fixed
   ni ancho fijo en th.label, así que el navegador reparte el ancho de columna
   de forma proporcional en vez de ajustarlo al texto ("Almacenamiento" queda
   con columna ancha y separa la opción). Se encoge la columna al contenido. */
body.single-product table.variations th.label {
    width: 1% !important;
    white-space: nowrap !important;
    padding-right: 1em !important;
}

/* El plugin woo-variation-swatches pone margin:4px (las 4 direcciones) a cada
   swatch/pill (.variable-item). Ese margen vertical (4px arriba + 4px abajo)
   es lo que queda dominando la altura de cada fila de atributo aparte del
   propio swatch. Se reduce ~20% el alto de fila bajando solo el margen
   vertical; el horizontal (separación entre 128GB/256GB/512GB, colores, etc.)
   se deja igual. */
body.single-product table.variations .variable-item:not(.radio-variable-item) {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

/* #endregion DIDEMEX - Ocultar flechas dropdown */

/* #region DIDEMEX - Precio superior como única fuente visual */

/* WooCommerce imprime su propio bloque de precio debajo de las
   variaciones (.woocommerce-variation-price, dentro de
   .single_variation_wrap) además del precio superior que ya muestra
   el módulo et_pb_wc_price de Divi. Con dmx-price-sync.js manteniendo
   ese precio superior sincronizado (found_variation/reset_data/
   hide_variation, ver js/woocommerce/dmx-price-sync.js), el bloque de
   abajo queda duplicado y se oculta por completo. */
body.single-product .woocommerce-variation-price {
    display: none !important;
}

/* Divi core (woo_price.css) aplica word-break:break-all a TODO .amount
   dentro de .et_pb_wc_price, sin condicionarlo al ancho disponible --
   eso es lo que corta "$7,899 MXN" en fragmentos sueltos y amontona los
   dígitos cuando el módulo de precio queda angosto (a 26px de fuente,
   forzado también por Divi). Se restringe el override solo al precio
   tachado (del), que es el que se ve apretado; el precio activo (ins)
   conserva el break-all de Divi como red de seguridad ante overflow en
   pantallas muy chicas. */
body.single-product .et_pb_wc_price .price del .amount {
    word-break: normal !important;
    white-space: nowrap !important;
}

/* #endregion DIDEMEX - Precio superior como única fuente visual */

/* #region DIDEMEX - Woo Quantity Plugin / Add to Cart Row */

/* ALTURA GLOBAL */
:root {
    --didemex-qty-height: 40px; /* cambia aquí si luego la quieres más grande/chica */
}

/* Fila: qty + botón */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Botón AÑADIR AL CARRITO */
.single-product .single_add_to_cart_button {
    height: var(--didemex-qty-height) !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* ============================
   CONTENEDOR - 1 +
   ============================ */
body .woopq-quantity-input {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin-right: 10px !important;

    border: 1px solid #1a1a1a !important;
    border-radius: 4px !important;
    overflow: hidden !important;

    /* 40px totales incluyendo borde */
    height: calc(var(--didemex-qty-height) - 2px) !important;
    box-sizing: border-box !important;
}

/* Botones - y + */
body .woopq-quantity-input-minus,
body .woopq-quantity-input-plus {
    width: var(--didemex-qty-height) !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #fff !important;
    color: #111 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

/* Hover suave tipo Apple */
body .woopq-quantity-input-minus:hover,
body .woopq-quantity-input-plus:hover {
    background: #f2f2f2 !important;
    color: #000 !important;
}

/* INPUT (el número) */
body .woopq-quantity-input .qty {
    width: 28px !important;
    height: 100% !important;

    border: none !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;

    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
}

/* Quitar flechitas del input number */
body .woopq-quantity-input .qty::-webkit-inner-spin-button,
body .woopq-quantity-input .qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body .woopq-quantity-input .qty[type=number] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* RESPONSIVE opcional */
@media (max-width: 480px) {
    :root {
        --didemex-qty-height: 36px;
    }

    .single-product .single_add_to_cart_button {
        padding: 0 18px !important;
    }
}

/* #endregion DIDEMEX - Woo Quantity Plugin */

/* #region DIDEMEX - Selected Variation Pills (contexto: shortcode) */

/*
 * Apariencia base (color, padding, tipografía) de .dmx-attribute-pills
 * y .dmx-attr-pill vive en css/woocommerce/global/dmx-attribute-pills.css
 * -- el mismo sistema que usan las product cards del Shop. Aquí solo
 * el comportamiento específico de este contexto (Product Page).
 */
body.single-product .dmx-selected-variation-pills {
  margin-top: 0.5rem;
}

/* #endregion DIDEMEX - Selected Variation Pills (contexto: shortcode) */