/* ccmg-hojas-juntas: ccmg-simple-add-to-cart.css */
/* ============================================================
   CCM Simple Add To Cart
   Wrapper visual del formulario nativo de WooCommerce para productos simples.
   ============================================================ */

.ccmg-simple-atc {
    --ccmg-atc-accent:        #e60000;
    --ccmg-atc-accent-dark:   #b40000;
    --ccmg-atc-text:          #121212;
    --ccmg-atc-btn-bg:        #000000;   /* «Agregar al carrito»: negro, texto e icono blancos */
    --ccmg-atc-btn-bg-hover:  #2b2b2b;
    --ccmg-atc-btn-text:      #ffffff;
    --ccmg-atc-muted:         #121212;
    --ccmg-atc-surface:       #ffffff;
    --ccmg-atc-border:        rgba(0, 0, 0, 0.1);
    --ccmg-atc-radius-field:  4px;
    --ccmg-atc-step-bg:       rgba(152, 152, 152, 0.14);
    --ccmg-atc-max-width:     100%;
    --ccmg-atc-qty-share:     35.47%;
    --ccmg-atc-step-share:    36.614%;
    --ccmg-atc-value-share:   26.772%;
    --ccmg-atc-step-width:    auto;
    --ccmg-atc-value-width:   auto;
    --ccmg-atc-btn-width:     none;
    --ccmg-atc-height:        50px;
    --ccmg-atc-gap:           8px;
    --ccmg-atc-padding-top:   8px;
    --ccmg-atc-padding-bottom:0px;
    --ccmg-atc-transition:    0.2s ease;

    isolation:                isolate;
    color:                    var(--ccmg-atc-text);
    font-family:              "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:                16px;
    line-height:              1.45;
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
}

.ccmg-simple-atc :where(*, *::before, *::after) {
    box-sizing: border-box;
}

/*
 * Reset scoped:
 * neutraliza la mayor parte de estilos globales de tema, Elementor y WooCommerce
 * dentro del widget, sin dejar de usar el markup nativo del core.
 */
.ccmg-simple-atc :where(
    form,
    div,
    p,
    label,
    span,
    strong,
    em,
    small,
    a,
    button,
    input,
    select,
    textarea,
    fieldset,
    legend
) {
    all: revert;
    box-sizing: border-box;
    font-family: inherit;
    color: inherit;
}

.ccmg-simple-atc :where(button, input, select, textarea) {
    font: inherit;
}

.ccmg-simple-atc :where(p, fieldset) {
    margin: 0;
}

.ccmg-simple-atc :where(label) {
    display:     block;
    margin:      0 0 8px;
    color:       var(--ccmg-atc-text);
    font-size:   14px;
    font-weight: 600;
    line-height: 1.35;
}

.ccmg-simple-atc :where(a) {
    color:           var(--ccmg-atc-accent);
    text-decoration: none;
}

.ccmg-simple-atc :where(a:hover) {
    text-decoration: underline;
}

.ccmg-simple-atc :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.qty),
    select,
    textarea
) {
    width:          100%;
    min-height:     52px;
    padding:        14px 16px;
    border:         1px solid var(--ccmg-atc-border);
    border-radius:  var(--ccmg-atc-radius-field);
    background:     var(--ccmg-atc-surface);
    color:          var(--ccmg-atc-text);
    font-size:      15px;
    line-height:    1.4;
    box-shadow:     none;
}

.ccmg-simple-atc :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.qty),
    select,
    textarea
):focus-visible {
    outline:      none;
    border-color: var(--ccmg-atc-accent);
    box-shadow:   0 0 0 3px rgba(230, 0, 0, 0.16);
}

.ccmg-simple-atc :where(textarea) {
    min-height: 110px;
    resize:     vertical;
}

.ccmg-simple-atc .ccmg-simple-atc__surface {
    width:        100% !important;
    max-width:    var(--ccmg-atc-max-width) !important;
    padding:      0 !important;
    border:       0 !important;
    border-radius:0 !important;
    background:   transparent !important;
    box-shadow:   none !important;
}

.ccmg-simple-atc .ccmg-simple-atc__stock,
.ccmg-simple-atc .stock.ccmg-simple-atc__stock {
    display:        flex !important;
    align-items:    center !important;
    gap:            2px !important;
    padding-top:    0px !important;
    color:          var(--ccmg-atc-text) !important;
    font-family:    "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:      14px !important;
    font-weight:    500 !important;
    line-height:    14px !important;
    text-transform: none !important;
}

.ccmg-simple-atc .ccmg-simple-atc__stock.out-of-stock,
.ccmg-simple-atc .stock.ccmg-simple-atc__stock.out-of-stock {
    color: var(--ccmg-atc-accent) !important;
}

.ccmg-simple-atc .woocommerce-info,
.ccmg-simple-atc .woocommerce-message,
.ccmg-simple-atc .woocommerce-error {
    margin:        0 0 12px;
    padding:       12px 14px;
    border:        1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background:    #f7f7f7;
    color:         var(--ccmg-atc-text);
    font-size:     14px;
    line-height:   1.45;
    list-style:    none;
}

.ccmg-simple-atc form.cart {
    display:               grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items:           stretch !important;
    row-gap:               var(--ccmg-atc-gap) !important;
    column-gap:            0 !important;
    margin:                0 !important;
    width:                 100% !important;
    max-width:             var(--ccmg-atc-max-width) !important;
    padding:               0px !important;
    float:                 none !important;
    clear:                 both !important;
}

.ccmg-simple-atc .ccmg-simple-atc__buy-now-row {
    display:    block !important;
    width:      100% !important;
    min-width:  0 !important;
    margin:     0 !important;
    padding:    0 !important;
}

.ccmg-simple-atc .ccmg-simple-atc__cart-row {
    display:               grid !important;
    grid-template-columns: minmax(0, var(--ccmg-atc-qty-share)) minmax(0, 1fr) !important;
    align-items:           center !important;
    column-gap:            var(--ccmg-atc-gap) !important;
    row-gap:               0 !important;
    width:                 100% !important;
    min-width:             0 !important;
    margin:                0 !important;
    padding:               0 !important;
}

.ccmg-simple-atc .ccmg-simple-atc__buy-now,
.ccmg-simple-atc form.cart .ccmg-simple-atc__buy-now.button,
.ccmg-simple-atc form.cart button.ccmg-simple-atc__buy-now,
.ccmg-simple-atc form.cart button.ccmg-simple-atc__buy-now.button {
    all:             unset !important;
    box-sizing:      border-box !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           100% !important;
    max-width:       var(--ccmg-atc-max-width) !important;
    height:          53px !important;
    margin:          0 !important;
    padding:         16px 30px !important;
    border:          0 !important;
    border-radius:   6px !important;
    background:      var(--ccmg-atc-accent) !important;
    color:           #ffffff !important;
    font-family:     "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:       16px !important;
    font-weight:     500 !important;
    line-height:     21px !important;
    text-align:      center !important;
    text-transform:  none !important;
    text-decoration: none !important;
    cursor:          pointer !important;
    transition:      background-color var(--ccmg-atc-transition),
                     opacity var(--ccmg-atc-transition) !important;
}

.ccmg-simple-atc .ccmg-simple-atc__buy-now:hover:not(:disabled),
.ccmg-simple-atc form.cart .ccmg-simple-atc__buy-now.button:hover:not(:disabled) {
    background: var(--ccmg-atc-accent-dark) !important;
}

.ccmg-simple-atc .ccmg-simple-atc__buy-now:focus-visible,
.ccmg-simple-atc form.cart .ccmg-simple-atc__buy-now.button:focus-visible {
    outline:        2px solid var(--ccmg-atc-accent) !important;
    outline-offset: 1px !important;
}

.ccmg-simple-atc form.cart::before,
.ccmg-simple-atc form.cart::after {
    display: none;
}

.ccmg-simple-atc .ccmg-simple-atc__qty-control {
    display:     grid !important;
    grid-template-columns: var(--ccmg-atc-step-share) var(--ccmg-atc-value-share) var(--ccmg-atc-step-share) !important;
    align-items: stretch !important;
    grid-column: 1 !important;
    width:       100% !important;
    min-width:   0 !important;
    max-width:   none !important;
    height:      var(--ccmg-atc-height) !important;
}

.ccmg-simple-atc .ccmg-simple-atc__qty-step {
    all:                 unset !important;
    box-sizing:          border-box !important;
    display:             inline-flex !important;
    align-items:         center !important;
    justify-content:     center !important;
    width:               100% !important;
    min-width:           0 !important;
    max-width:           none !important;
    height:              var(--ccmg-atc-height) !important;
    margin:              0 !important;
    padding:             10px !important;
    border:              0 !important;
    border-radius:       2px !important;
    background:          var(--ccmg-atc-step-bg) !important;
    box-shadow:          none !important;
    cursor:              pointer !important;
    transition:          background-color var(--ccmg-atc-transition),
                         opacity var(--ccmg-atc-transition) !important;
}

.ccmg-simple-atc .ccmg-simple-atc__qty-step::before {
    content:            "";
    display:            block;
    width:              12px;
    background-repeat:  no-repeat;
    background-position:center;
}

.ccmg-simple-atc .ccmg-simple-atc__qty-step--minus::before {
    height:           1px;
    background-image: url("../assets/ccmg-atc-minus.svg");
    background-size:  12px 1px;
}

.ccmg-simple-atc .ccmg-simple-atc__qty-step--plus::before {
    height:           12px;
    background-image: url("../assets/ccmg-atc-plus.svg");
    background-size:  12px 12px;
}

.ccmg-simple-atc .ccmg-simple-atc__qty-step:hover:not(:disabled) {
    background: rgba(152, 152, 152, 0.22) !important;
}

.ccmg-simple-atc .ccmg-simple-atc__qty-step:disabled {
    cursor:  not-allowed !important;
    opacity: 0.42 !important;
}

.ccmg-simple-atc .ccmg-simple-atc__qty-step:focus-visible {
    outline:        2px solid var(--ccmg-atc-accent) !important;
    outline-offset: 1px !important;
}

.ccmg-simple-atc form.cart .quantity {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    margin:          0 !important;
    padding:         0 !important;
    float:           none !important;
    width:           100% !important;
    min-width:       0 !important;
    max-width:       none !important;
    height:          var(--ccmg-atc-height) !important;
}

.ccmg-simple-atc form.cart .quantity .qty {
    all:                 unset !important;
    box-sizing:          border-box !important;
    appearance:          textfield !important;
    -webkit-appearance:  textfield !important;
    display:             block !important;
    width:               100% !important;
    min-width:           0 !important;
    max-width:           none !important;
    height:              var(--ccmg-atc-height) !important;
    margin:              0 !important;
    padding:             0 !important;
    border:              0 !important;
    border-radius:       0 !important;
    background:          transparent !important;
    color:               var(--ccmg-atc-text) !important;
    font-family:         "Francois One", "Founder grotesk CCM", Arial, sans-serif !important;
    font-size:           14px !important;
    font-weight:         400 !important;
    line-height:         21px !important;
    text-align:          center !important;
    box-shadow:          none !important;
    transition:          color var(--ccmg-atc-transition),
                         background-color var(--ccmg-atc-transition) !important;
}

.ccmg-simple-atc form.cart .quantity .qty::-webkit-outer-spin-button,
.ccmg-simple-atc form.cart .quantity .qty::-webkit-inner-spin-button {
    margin:     0;
}

.ccmg-simple-atc form.cart .quantity .qty:hover {
    background: rgba(230, 0, 0, 0.03) !important;
}

.ccmg-simple-atc form.cart .quantity .qty:focus-visible {
    outline:      none !important;
    background:   rgba(230, 0, 0, 0.06) !important;
    color:        var(--ccmg-atc-accent) !important;
}

.ccmg-simple-atc form.cart .single_add_to_cart_button,
.ccmg-simple-atc form.cart .single_add_to_cart_button.button,
.ccmg-simple-atc form.cart button.single_add_to_cart_button,
.ccmg-simple-atc form.cart button.single_add_to_cart_button.button,
.ccmg-simple-atc form.cart button.single_add_to_cart_button.alt,
.ccmg-simple-atc form.cart button.single_add_to_cart_button.button.alt {
    all:             unset !important;
    box-sizing:      border-box !important;
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    height:          var(--ccmg-atc-height) !important;
    width:           100% !important;
    min-width:       0 !important;
    max-width:       none !important;
    margin:          0 !important;
    padding:         0 4px !important;
    border:          1px solid var(--ccmg-atc-btn-bg) !important;
    border-radius:   4px !important;
    background:      var(--ccmg-atc-btn-bg) !important;
    color:           var(--ccmg-atc-btn-text) !important;
    font-family:     "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:       14px !important;
    font-weight:     400 !important;
    line-height:     14px !important;
    letter-spacing:  0 !important;
    text-transform:  none !important;
    text-decoration: none !important;
    box-shadow:      none !important;
    transition:      background-color var(--ccmg-atc-transition),
                     color var(--ccmg-atc-transition),
                     border-color var(--ccmg-atc-transition) !important;
    grid-column:     2 !important;
    justify-content: center !important;
    cursor:          pointer !important;
}

.ccmg-simple-atc form.cart .single_add_to_cart_button::before,
.ccmg-simple-atc form.cart .single_add_to_cart_button.button::before {
    content:            "";
    display:            block;
    width:              15px;
    height:             17px;
    flex:               0 0 15px;
    background:         url("../assets/ccmg-atc-icon-blanco.svg") no-repeat center / 15px 17px;
    transform:          translateY(-1px);
}

.ccmg-simple-atc form.cart .single_add_to_cart_button:hover:not(:disabled),
.ccmg-simple-atc form.cart .single_add_to_cart_button.button:hover:not(:disabled) {
    background:   var(--ccmg-atc-btn-bg-hover) !important;
    border-color: var(--ccmg-atc-btn-bg-hover) !important;
}

.ccmg-simple-atc form.cart .single_add_to_cart_button:focus-visible,
.ccmg-simple-atc form.cart .single_add_to_cart_button.button:focus-visible {
    outline:        2px solid var(--ccmg-atc-accent) !important;
    outline-offset: 1px !important;
}

.ccmg-simple-atc form.cart .single_add_to_cart_button.loading::after,
.ccmg-simple-atc form.cart .single_add_to_cart_button.button.loading::after {
    display: none !important;
}

.ccmg-simple-atc form.cart .single_add_to_cart_button.added::after,
.ccmg-simple-atc form.cart .single_add_to_cart_button.button.added::after {
    display: none !important;
}

.ccmg-simple-atc form.cart .single_add_to_cart_button.button:disabled,
.ccmg-simple-atc .ccmg-simple-atc__buy-now:disabled,
.ccmg-simple-atc form.cart button.ccmg-simple-atc__buy-now.disabled,
.ccmg-simple-atc form.cart .single_add_to_cart_button:disabled,
.ccmg-simple-atc form.cart button.single_add_to_cart_button.disabled,
.ccmg-simple-atc form.cart .single_add_to_cart_button.button.disabled {
    cursor:     not-allowed !important;
    opacity:    0.42 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ccmg-simple-atc form.cart .single_add_to_cart_button.button:disabled,
.ccmg-simple-atc form.cart .single_add_to_cart_button:disabled,
.ccmg-simple-atc form.cart button.single_add_to_cart_button.disabled,
.ccmg-simple-atc form.cart .single_add_to_cart_button.button.disabled {
    background: var(--ccmg-atc-btn-bg) !important;   /* transparente + texto blanco = boton invisible */
}

.ccmg-simple-atc form.cart > :where(
    .woocommerce-info,
    .woocommerce-message,
    .woocommerce-error,
    .wc-pao-addons-container,
    .product-addon,
    .bundle_button,
    .variations_button,
    .yith-wapo-container
) {
    flex-basis: 100%;
}

.ccmg-simple-atc form.cart .screen-reader-text {
    position:    absolute !important;
    width:       1px !important;
    height:      1px !important;
    padding:     0 !important;
    margin:      -1px !important;
    overflow:    hidden !important;
    clip:        rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border:      0 !important;
}

@media (min-width: 768px) {
    .ccmg-simple-atc {
        --ccmg-atc-max-width:   100%;
        --ccmg-atc-qty-share:   110px;
        --ccmg-atc-step-share:  38px;
        --ccmg-atc-value-share: 34px;
    }

    .ccmg-simple-atc .ccmg-simple-atc__cart-row {
        grid-template-columns: 110px minmax(0, 1fr) !important;
    }

    .ccmg-simple-atc .ccmg-simple-atc__qty-control {
        grid-template-columns: 38px 34px 38px !important;
        width:                 110px !important;
    }

    .ccmg-simple-atc .ccmg-simple-atc__qty-step {
        width:      100% !important;
        min-width:  0 !important;
        max-width:  none !important;
    }

    .ccmg-simple-atc form.cart .quantity .qty {
        font-family: "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-weight: 500 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccmg-simple-atc .ccmg-simple-atc__qty-step,
    .ccmg-simple-atc form.cart .quantity .qty,
    .ccmg-simple-atc form.cart .single_add_to_cart_button.button {
        transition: none;
    }
}

/*
 * WooCommerce inyecta este enlace junto al boton tras un anadido AJAX
 * (add-to-cart.js L204-212). Con B1 el cajon se abre solo, asi que el enlace
 * sobra y ademas empuja el layout de la ficha.
 *
 * Se oculta con CSS y no se toca el JS del core: quitar el nodo obligaria a
 * perseguir cada reinyeccion, y parchear el core no se hace.
 */
.ccmg-simple-atc .added_to_cart,
.ccmg-simple-atc a.added_to_cart.wc-forward {
    display: none;
}
/* ccmg-hojas-juntas: ccmg-product-price.css */
/* ============================================================
   CCM Product Price
   Basado en Figma node 584:5309.
   ============================================================ */

.ccmg-price {
    display:                  inline-grid !important;
    grid-template-columns:    max-content max-content !important;
    align-items:              end !important;
    column-gap:               8px !important;
    row-gap:                  0 !important;
    width:                    fit-content !important;
    min-width:                0 !important;
    max-width:                100% !important;
    min-height:               30px !important;
    isolation:                isolate;
    color:                    rgba(0, 0, 0, 0.9) !important;
    font-family:              "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:                16px !important;
    line-height:              1 !important;
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
}

.ccmg-price :where(*, *::before, *::after) {
    box-sizing: border-box;
}

.ccmg-price :where(
    div,
    span,
    del,
    ins,
    bdi,
    small,
    strong,
    em
) {
    all: revert;
    box-sizing: border-box;
    font-family: inherit;
    color: inherit;
}

.ccmg-price .ccmg-price__values {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    gap:            0px !important;
    width:          auto !important;
    min-width:      0 !important;
    max-width:      100% !important;
    min-height:     0 !important;
    grid-column:    1 !important;
    grid-row:       1 !important;
}

.ccmg-price[data-has-sale="true"] {
    min-height: 48px !important;
}

.ccmg-price[data-has-sale="true"] .ccmg-price__values {
    min-height: 48px !important;
}

.ccmg-price .ccmg-price__regular {
    all:             unset !important;
    box-sizing:      border-box !important;
    display:         block !important;
    width:           auto !important;
    min-width:       0 !important;
    max-width:       100% !important;
    max-height:      20px !important;
    margin:          0 !important;
    padding-left:    4px !important;
    color:           rgba(0, 0, 0, 0.5) !important;
    font-family:     "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:       18px !important;
    font-weight:     400 !important;
    line-height:     20px !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: rgba(0, 0, 0, 0.5) !important;
    white-space:     nowrap !important;
}

.ccmg-price .ccmg-price__regular .ccmg-price__amount,
.ccmg-price .ccmg-price__regular .woocommerce-Price-amount,
.ccmg-price .ccmg-price__regular bdi {
    display:     inline-flex !important;
    align-items: baseline !important;
    max-width:   100% !important;
    color:       inherit !important;
    font:        inherit !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
}

.ccmg-price .ccmg-price__current {
    all:             unset !important;
    box-sizing:      border-box !important;
    display:         block !important;
    width:           auto !important;
    min-width:       0 !important;
    max-width:       100% !important;
    margin:          0 !important;
    padding:         0 !important;
    border:          0 !important;
    background:      transparent !important;
    color:           rgba(0, 0, 0, 0.9) !important;
    font-family:     "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:       36px !important;
    font-weight:     500 !important;
    line-height:     36px !important;
    text-decoration: none !important;
    white-space:     nowrap !important;
}

.ccmg-price .ccmg-price__current .ccmg-price__amount,
.ccmg-price .ccmg-price__current .woocommerce-Price-amount,
.ccmg-price .ccmg-price__current bdi {
    display:     inline-flex !important;
    align-items: baseline !important;
    max-width:   100% !important;
    color:       inherit !important;
    font:        inherit !important;
    white-space: nowrap !important;
}

.ccmg-price .screen-reader-text,
.ccmg-price .woocommerce-price-suffix,
.ccmg-price small {
    position:    absolute !important;
    width:       1px !important;
    height:      1px !important;
    padding:     0 !important;
    margin:      -1px !important;
    overflow:    hidden !important;
    clip:        rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border:      0 !important;
}

.ccmg-price .ccmg-price__badge {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    align-self:      end !important;
    grid-column:     2 !important;
    grid-row:        1 !important;
    min-width:       69px !important;
    width:           auto !important;
    max-width:       100% !important;
    height:          25px !important;
    margin-bottom:   11px !important;
    padding:         8px 8px 1px !important;
    border-radius:   4px !important;
    background:      #e60000 !important;
    color:           #ffffff !important;
    font-family:     "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:       18px !important;
    font-weight:     500 !important;
    line-height:     20px !important;
    text-align:      center !important;
    white-space:     nowrap !important;
}

.ccmg-price .ccmg-price__shipping {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-self:    start !important;
    align-self:      flex-start !important;
    grid-column:     1 / -1 !important;
    grid-row:        2 !important;
    width:           fit-content !important;
    max-width:       fit-content !important;
    margin-left:     0 !important;
    margin-top:      0 !important;
    padding:         2px 8px 0 !important;
    border-radius:   100px !important;
    background:      rgb(225, 241, 227) !important;
    color:           rgb(0, 148, 19) !important;
    font-family:     "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:       12px !important;
    font-weight:     500 !important;
    line-height:     14px !important;
    white-space:     nowrap !important;
    pointer-events:  none !important;
}

@media (max-width: 479px) {
    .ccmg-price {
        column-gap: 6px !important;
        row-gap:    0 !important;
        width:     fit-content !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 30px !important;
    }

    .ccmg-price .ccmg-price__values {
        gap:       4px !important;
        width:     auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
    }

    .ccmg-price[data-has-sale="true"] {
        min-height: 40px !important;
    }

    .ccmg-price[data-has-sale="true"] .ccmg-price__values {
        min-height: 40px !important;
    }

    .ccmg-price .ccmg-price__regular {
        width:       auto !important;
        min-width:   0 !important;
        max-width:   100% !important;
        font-size:   clamp(14px, 3.9vw, 16px) !important;
        line-height: 1.1 !important;
    }

    .ccmg-price .ccmg-price__current {
        width:       auto !important;
        min-width:   0 !important;
        max-width:   100% !important;
        font-size:   clamp(24px, 7.4vw, 30px) !important;
        line-height: 1 !important;
    }

    .ccmg-price .ccmg-price__badge {
        min-width:   60px !important;
        width:       auto !important;
        max-width:   100% !important;
        height:      23px !important;
        padding:     7px 6px 1px !important;
        font-size:   clamp(14px, 4vw, 16px) !important;
        line-height: 18px !important;
    }

    .ccmg-price .ccmg-price__shipping {
        font-size:   12px !important;
        line-height: 14px !important;
        padding:     2px 8px 0 !important;
    }
}
/* ccmg-hojas-juntas: ccmg-gallery.css */
/* ============================================================
   CCM Product Gallery — ccmg-gallery.css
   Diseño basado en Figma: CCM web design 2026 · desktop 608:5376 / mobile 610:5407
   Especificidad mínima (0,2,0): .ccmg-gallery .ccmg-gallery__*
   ============================================================ */

/* ============================================================
   VARIABLES — tokens del diseño Figma
   ============================================================ */
.ccmg-gallery {
    --ccmg-red:            #E60000;          /* rgba(0.902, 0, 0, 1) */
    --ccmg-border-light:   rgba(0,0,0,0.10);
    --ccmg-border-thumb:   rgba(0,0,0,0.10);
    --ccmg-overlay:        rgba(0,0,0,0.85);
    --ccmg-media-overlay:  rgba(0,0,0,0.04);
    --ccmg-card-accent-hot:#ff3b00;
    --ccmg-card-sold-out-bg:#191919;
    --ccmg-card-font:      "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ccmg-radius-main:    24px;
    --ccmg-radius-thumb:   12px;
    --ccmg-thumb-padding:  4px;
    --ccmg-radius-nav:     100px;
    --ccmg-action-size:    39px;
    --ccmg-action-gap:     12px;
    --ccmg-action-offset:  16px;
    --ccmg-action-shadow:  0 2px 4px rgba(0,0,0,0.15);
    --ccmg-thumbs-rail:    110px;
    --ccmg-gallery-max-inline-size: 960px;
    --ccmg-thumb-w:        94px;
    --ccmg-thumb-h:        95px;
    --ccmg-nav-size:       40px;
    --ccmg-gap:            8px;
    --ccmg-padding-main:   16px;
    --ccmg-split-track-min: 460px;
    --ccmg-split-track-max: 600px;
    --ccmg-zoom-scale:     1.65;
    --ccmg-transition:     0.2s ease;
    --ccmg-scrollbar-size: 6px;
    --ccmg-scrollbar-gap:  4px;
    --ccmg-scrollbar-radius: 999px;
    --ccmg-scrollbar-track: rgba(18,18,18,0.08);
    --ccmg-scrollbar-thumb: rgba(18,18,18,0.22);
    --ccmg-scrollbar-thumb-hover: rgba(18,18,18,0.32);

    /* Root del componente: contenedor de queries, no grid principal */
    display:               block;
    width:                 100%;
    max-inline-size:       min(100%, var(--ccmg-gallery-max-inline-size));
    align-self:            start;
    container-type:        inline-size;
    container-name:        ccmg-gallery;
    box-sizing:            border-box;
}

.ccmg-gallery .ccmg-gallery__layout {
    --ccmg-split-track-size: clamp(var(--ccmg-split-track-min), 62vh, var(--ccmg-split-track-max));

    display:               grid;
    grid-template-columns: var(--ccmg-thumbs-rail) minmax(0, 1fr);
    gap:                   var(--ccmg-gap);
    width:                 100%;
    min-inline-size:       0;
    align-items:           start;
}

@supports (width: 1cqi) {
    .ccmg-gallery .ccmg-gallery__layout {
        --ccmg-split-track-size: clamp(
            var(--ccmg-split-track-min),
            calc(100cqi - var(--ccmg-thumbs-rail) - var(--ccmg-gap)),
            var(--ccmg-split-track-max)
        );
    }
}

/* Reset box-model interno */
.ccmg-gallery *,
.ccmg-gallery *::before,
.ccmg-gallery *::after {
    box-sizing: border-box;
}

/* ============================================================
   MINIATURAS — columna izquierda
   ============================================================ */
.ccmg-gallery .ccmg-gallery__thumbs {
    grid-column:    1;
    grid-row:       1;
    display:        flex;
    flex-direction: column;
    gap:            var(--ccmg-thumb-gap, var(--ccmg-gap));
    overflow-y:     auto;
    overflow-x:     hidden;
    margin:         0;
    padding:        8px;
    list-style:     none;
    min-inline-size: 0;
    min-block-size: 0;
    block-size:     var(--ccmg-split-track-size);
    max-block-size: var(--ccmg-split-track-size);
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}

.ccmg-gallery .ccmg-gallery__thumbs[hidden] {
    display: none;
}

.ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar       { width: 0; height: 0; }
.ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; }

.ccmg-gallery .ccmg-gallery__thumb {
    /* Reset button */
    appearance:         none;
    -webkit-appearance: none;
    font-family:        inherit;
    text-decoration:    none;
    color:              inherit;
    padding:            var(--ccmg-thumb-padding);
    margin:             0;

    /* Dimensiones Figma */
    flex-shrink:        0;
    position:           relative;
    isolation:          isolate;
    width:              var(--ccmg-thumb-w);
    height:             var(--ccmg-thumb-h);
    border-radius:      var(--ccmg-radius-thumb);
    overflow:           hidden;
    cursor:             pointer;
    background:         #ffffff;

    border:             none;
    box-shadow:         none;
    transition:         box-shadow var(--ccmg-transition);
}

.ccmg-gallery .ccmg-gallery__thumb::after {
    content:          "";
    position:         absolute;
    inset:            0;
    border-radius:    inherit;
    background:       var(--ccmg-media-overlay);
    pointer-events:   none;
    z-index:          1;
}

/* Imagen dentro de miniatura */
.ccmg-gallery .ccmg-gallery__thumb img {
    display:        block !important;
    width:          100% !important;
    height:         100% !important;
    max-width:      none !important;
    max-height:     none !important;
    margin:         0 !important;
    padding:        0 !important;
    object-fit:     contain;
    pointer-events: none;
    border:         none;
    border-radius:  0;
}

/* Estado activo: aro rojo sin usar border sólido */
.ccmg-gallery .ccmg-gallery__thumb.is-active {
    box-shadow: inset 0 0 0 2px var(--ccmg-red);
}

.ccmg-gallery .ccmg-gallery__thumb:hover:not(.is-active) {
    border:     1px solid rgba(0,0,0,0.4);
    box-shadow: none;
}

.ccmg-gallery .ccmg-gallery__thumb:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

/* ============================================================
   IMAGEN PRINCIPAL — columna derecha
   ============================================================ */
.ccmg-gallery .ccmg-gallery__main {
    grid-column:   2;
    grid-row:      1;
    position:      relative;
    isolation:     isolate;
    background:    #ffffff;
    border:        none;
    border-radius: var(--ccmg-radius-main);
    padding:       var(--ccmg-padding-main);
    overflow:      hidden;
    inline-size:   100%;
    min-inline-size: 0;
    block-size:    var(--ccmg-split-track-size);
    aspect-ratio:  1 / 1;
    touch-action:  pan-y pinch-zoom;
    overscroll-behavior-x: contain;
}

.ccmg-gallery .ccmg-gallery__main::after {
    content:        "";
    position:       absolute;
    inset:          0;
    border-radius:  inherit;
    background:     var(--ccmg-media-overlay);
    pointer-events: none;
    z-index:        1;
}

.ccmg-gallery .ccmg-card__cat-badge {
    position:       absolute;
    top:            9px;
    left:           6px;
    z-index:        2;
    display:        inline-flex;
    align-items:    center;
    padding:        5px 16px 0;
    border-radius:  100px;
    background:     var(--ccmg-card-sold-out-bg);
    color:          #ffffff;
    font-family:    var(--ccmg-card-font);
    font-size:      14px;
    font-weight:    500;
    line-height:    18px;
    white-space:    nowrap;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ccmg-gallery .ccmg-card__cat-badge--sold-out {
    background: var(--ccmg-card-accent-hot);
}

@media (max-width: 479px) {
    .ccmg-gallery .ccmg-card__cat-badge {
        top:        6px;
        left:       4px;
        font-size:  11px;
        line-height:11px;
        padding:    4px 10px 0;
    }
}

.ccmg-gallery .ccmg-gallery__actions {
    position:       absolute;
    top:            var(--ccmg-action-offset);
    right:          var(--ccmg-action-offset);
    z-index:        4;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            var(--ccmg-action-gap);
}

.ccmg-gallery .ccmg-gallery__share {
    position: relative;
}

/* ── Hueco del corazón de favoritos ───────────────────────────────────────
 *
 * Lo imprime el renderer vacío y lo rellena `favorites.js` de ccm-account con
 * el mismo `.ccmg-card__fav` que pone en las tarjetas.
 *
 * `:empty { display: none }` y no `display: contents`: mientras el hueco está
 * vacío tiene que desaparecer del todo —si no, el `gap` de la pila reservaría
 * su sitio y quedaría un agujero encima de compartir cuando el JS no corre o
 * todavía no ha llegado—. `display: contents` no serviría: el hueco seguiría
 * contando como hijo del flex y el hueco fantasma seguiría ahí. En cuanto el
 * botón entra, la regla deja de aplicar sola. */
.ccmg-gallery .ccmg-gallery__fav:empty {
    display: none;
}

/* S4-03 · Sitio reservado para el corazón.
 *
 * `favorites.js` va en el pie y en móvil frío llega DESPUÉS del primer
 * pintado: con el hueco fuera del flujo hasta entonces, el corazón entraba
 * empujando compartir y WhatsApp una casilla hacia abajo (CLS). El renderer
 * marca el hueco con `--reservado` y aquí se le da ya el tamaño exacto que
 * tiene con el botón dentro (un botón de la pila), vacío o no.
 *
 * Va DETRÁS de la regla `:empty` y con su misma especificidad (0,3,0), así
 * que la gana por orden. Con la caché a medias (HTML viejo sin la clase, o
 * este CSS sin cargar) todo queda como antes.
 *
 * Sin JavaScript el corazón no llega nunca: ahí vuelve `display: none` para
 * no dejar un hueco en blanco encima de compartir. */
.ccmg-gallery .ccmg-gallery__fav--reservado,
.ccmg-gallery .ccmg-gallery__fav--reservado:empty {
    display: block;
    flex:    none;
    width:   var(--ccmg-action-size);
    height:  var(--ccmg-action-size);
}

@media (scripting: none) {
    .ccmg-gallery .ccmg-gallery__fav--reservado:empty {
        display: none;
    }
}

/* El corazón se ve como un botón más de la pila: mismo lado, misma redondez,
   mismo fondo y misma sombra que `.ccmg-gallery__action`. Las medidas salen de
   las variables de la galería, no se repiten aquí.
   `position: static` porque `favorites.js` trae el botón pensado para la
   esquina de una tarjeta (`position: absolute`): dentro del hueco tiene que
   ocupar su sitio en la columna, no salirse de ella. */
.ccmg-gallery .ccmg-gallery__fav .ccmg-card__fav {
    position:        static;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--ccmg-action-size);
    height:          var(--ccmg-action-size);
    padding:         2px;
    border:          none;
    border-radius:   999px;
    background:      #ffffff;
    box-shadow:      var(--ccmg-action-shadow);
    cursor:          pointer;
}

.ccmg-gallery .ccmg-gallery__action {
    appearance:         none;
    -webkit-appearance: none;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    width:              var(--ccmg-action-size);
    height:             var(--ccmg-action-size);
    padding:            2px;
    border:             none;
    border-radius:      999px;
    box-shadow:         var(--ccmg-action-shadow);
    text-decoration:    none;
    cursor:             pointer;
    transition:         transform var(--ccmg-transition),
                        box-shadow var(--ccmg-transition),
                        background var(--ccmg-transition),
                        color var(--ccmg-transition);
}

.ccmg-gallery .ccmg-gallery__action:hover {
    transform:  translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}

.ccmg-gallery .ccmg-gallery__action:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

.ccmg-gallery .ccmg-gallery__action--share {
    background: #ffffff;
    color:      #191919;
}

.ccmg-gallery .ccmg-gallery__action--whatsapp {
    background: #191919;
    color:      #ffffff;
}

.ccmg-gallery .ccmg-gallery__action svg {
    display:        block;
    pointer-events: none;
    flex-shrink:    0;
}

.ccmg-gallery__share-modal {
    position:        fixed;
    inset:           0;
    z-index:         2147483000;
    display:         grid;
    place-items:     center;
    padding:         16px;
}

.ccmg-gallery__share-modal[hidden] {
    display: none;
}

.ccmg-gallery__share-backdrop {
    appearance:         none;
    -webkit-appearance: none;
    position:           absolute;
    inset:              0;
    border:             none;
    background:         rgba(0,0,0,0.72);
    backdrop-filter:    blur(2px);
    cursor:             pointer;
}

.ccmg-gallery__share-backdrop:hover,
.ccmg-gallery__share-backdrop:focus,
.ccmg-gallery__share-backdrop:focus-visible,
.ccmg-gallery__share-backdrop:active {
    background:       rgba(0,0,0,0.72) !important;
    background-color: rgba(0,0,0,0.72) !important;
    background-image: none !important;
    border:           none !important;
    box-shadow:       none !important;
    filter:           none !important;
    transform:        none !important;
    outline:          none !important;
}

.ccmg-gallery__share-sheet {
    position:        relative;
    z-index:         1;
    width:           min(440px, calc(100vw - 32px));
    max-height:      min(350px, calc(100vh - 32px));
    overflow:        auto;
    padding:         16px 18px 18px;
    border-radius:   20px;
    background:      #232323;
    color:           #ffffff;
    box-shadow:      0 20px 54px rgba(0,0,0,0.36);
    display:         grid;
    gap:             12px;
}

.ccmg-gallery__share-sheet:hover,
.ccmg-gallery__share-sheet:focus,
.ccmg-gallery__share-sheet:focus-within,
.ccmg-gallery__share-sheet:active {
    background:       #232323 !important;
    background-color: #232323 !important;
    background-image: none !important;
    color:            #ffffff;
    box-shadow:       0 20px 54px rgba(0,0,0,0.36);
    outline:          none;
}

.ccmg-gallery__share-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             12px;
}

.ccmg-gallery__share-heading {
    display: grid;
    gap:     4px;
}

.ccmg-gallery__share-title {
    margin:      0;
    font-size:   clamp(17px, 1.5vw, 22px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.ccmg-gallery__share-subtitle {
    margin:      0;
    max-width:   46ch;
    color:       rgba(255,255,255,0.72);
    font-size:   11px;
    line-height: 1.45;
}

.ccmg-gallery__share-close {
    appearance:         none;
    -webkit-appearance: none;
    width:              32px;
    height:             32px;
    padding:            0;
    border:             none;
    border-radius:      999px;
    background:         transparent;
    color:              #ffffff;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    cursor:             pointer;
    transition:         background var(--ccmg-transition),
                        transform var(--ccmg-transition);
}

.ccmg-gallery__share-close:hover {
    background: rgba(255,255,255,0.08);
    transform:  translateY(-1px);
}

.ccmg-gallery__share-close:focus-visible {
    outline:        3px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-gallery__share-hero {
    display:         grid;
    justify-items:   center;
    gap:             6px;
    padding-bottom:  0;
}

.ccmg-gallery__share-hero-action {
    appearance:         none;
    -webkit-appearance: none;
    min-width:          172px;
    min-height:         44px;
    padding:            8px 14px;
    border:             none;
    border-radius:      999px;
    background:         #f2f2f2;
    color:              #181818;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    gap:                6px;
    font:               inherit;
    font-size:          13px;
    font-weight:        600;
    cursor:             pointer;
    box-shadow:         0 8px 18px rgba(0,0,0,0.18);
    transition:         transform var(--ccmg-transition),
                        box-shadow var(--ccmg-transition),
                        background var(--ccmg-transition);
}

.ccmg-gallery__share-hero-action:hover {
    transform:  translateY(-1px);
    box-shadow: 0 12px 22px rgba(0,0,0,0.22);
}

.ccmg-gallery__share-hero-action:focus-visible {
    outline:        3px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-gallery__share-hero-icon {
    width:           24px;
    height:          24px;
    border-radius:   999px;
    background:      #181818;
    color:           #ffffff;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
}

.ccmg-gallery__share-hero-meta {
    margin:      0;
    color:       rgba(255,255,255,0.58);
    font-size:   10px;
    line-height: 1.4;
}

.ccmg-gallery__share-section {
    display:     grid;
    gap:         8px;
    padding-top: 10px;
    border-top:  1px solid rgba(255,255,255,0.15);
}

.ccmg-gallery__share-section-title {
    margin:      0;
    font-size:   14px;
    line-height: 1.2;
    font-weight: 500;
}

.ccmg-gallery__share-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
    gap:                   3px;
}

.ccmg-gallery__share-card {
    appearance:         none;
    -webkit-appearance: none;
    min-height:         68px;
    padding:            4px 3px 3px;
    border:             none;
    border-radius:      16px;
    background:         transparent;
    color:              #ffffff;
    display:            grid;
    justify-items:      center;
    align-content:      start;
    gap:                4px;
    font:               inherit;
    text-align:         center;
    cursor:             pointer;
    transition:         background var(--ccmg-transition),
                        transform var(--ccmg-transition);
}

.ccmg-gallery__share-card:hover {
    background: rgba(255,255,255,0.05);
    transform:  translateY(-1px);
}

.ccmg-gallery__share-card:focus-visible {
    outline:        3px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-gallery__share-card-icon {
    width:           38px;
    height:          38px;
    border-radius:   999px;
    background:      #4b4b4b;
    color:           #ffffff;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      inset 0 0 0 1px rgba(255,255,255,0.06);
}

.ccmg-gallery__share-glyph {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    font-size:      20px;
    line-height:    1;
    font-weight:    700;
}

.ccmg-gallery__share-card-label {
    display:        block;
    max-width:      10ch;
    font-size:      10px;
    line-height:    1.25;
    font-weight:    500;
}

.ccmg-gallery__share-card-icon svg {
    width:  18px;
    height: 18px;
}

.ccmg-gallery__share-hero-icon svg {
    width:  14px;
    height: 14px;
}

.ccmg-gallery__share-card--facebook .ccmg-gallery__share-card-icon { background: #4867aa; }
.ccmg-gallery__share-card--whatsapp .ccmg-gallery__share-card-icon { background: #25D366; color: #ffffff; }
.ccmg-gallery__share-card--telegram .ccmg-gallery__share-card-icon { background: #2aabee; }
.ccmg-gallery__share-card--x .ccmg-gallery__share-card-icon { background: #000000; }
.ccmg-gallery__share-card--instagram .ccmg-gallery__share-card-icon { background: linear-gradient(135deg, #f58529 0%, #dd2a7b 48%, #515bd4 100%); }
.ccmg-gallery__share-card--tiktok .ccmg-gallery__share-card-icon { background: #111111; }
.ccmg-gallery__share-card--copy_message .ccmg-gallery__share-card-icon { background: #a8a8a8; color: #1b1b1b; }

.ccmg-gallery__share-card.is-success .ccmg-gallery__share-card-icon,
.ccmg-gallery__share-copy-trigger.is-success {
    box-shadow: 0 0 0 2px rgba(99, 214, 146, 0.6);
}

.ccmg-gallery__share-card.is-error .ccmg-gallery__share-card-icon,
.ccmg-gallery__share-copy-trigger.is-error {
    box-shadow: 0 0 0 2px rgba(255, 117, 117, 0.55);
}

.ccmg-gallery__share-copy-head {
    display:     grid;
    gap:         3px;
}

.ccmg-gallery__share-copy-note {
    margin:      0;
    color:       rgba(255,255,255,0.58);
    font-size:   10px;
    line-height: 1.45;
}

.ccmg-gallery__share-copy-box {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items:           center;
    gap:                   8px;
    padding:               8px 8px 8px 10px;
    border-radius:         14px;
    border:                1px solid rgba(255,255,255,0.14);
    background:            #121212;
}

.ccmg-gallery__share-copy-value {
    margin:         0;
    min-width:      0;
    color:          #ffffff;
    font-size:      11px;
    line-height:    1.4;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.ccmg-gallery__share-copy-trigger {
    appearance:         none;
    -webkit-appearance: none;
    min-width:          72px;
    min-height:         34px;
    padding:            0 12px;
    border:             none;
    border-radius:      999px;
    background:         #42a5ff;
    color:              #0a1730;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    font:               inherit;
    font-size:          11px;
    font-weight:        700;
    cursor:             pointer;
    transition:         transform var(--ccmg-transition),
                        filter var(--ccmg-transition);
}

.ccmg-gallery__share-copy-trigger:hover {
    filter:    brightness(1.05);
    transform: translateY(-1px);
}

.ccmg-gallery__share-copy-trigger:focus-visible {
    outline:        3px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-gallery__share-feedback {
    min-height:   14px;
    margin:       0;
    color:        rgba(255,255,255,0.72);
    font-size:    10px;
    line-height:  1.4;
}

.ccmg-gallery__share-feedback.is-success {
    color: #7ce7a8;
}

.ccmg-gallery__share-feedback.is-error {
    color: #ff9f9f;
}

@media (max-width: 767px) {
    .ccmg-gallery__share-modal {
        padding:     0;
        place-items: end stretch;
    }

    .ccmg-gallery__share-sheet {
        width:         100%;
        max-height:    min(350px, calc(100vh - 12px));
        max-height:    min(350px, calc(100svh - 12px));
        padding:       14px 14px 16px;
        border-radius: 18px 18px 0 0;
        gap:           10px;
    }

    .ccmg-gallery__share-header {
        gap: 10px;
    }

    .ccmg-gallery__share-title {
        font-size: 16px;
    }

    .ccmg-gallery__share-subtitle {
        font-size: 10px;
    }

    .ccmg-gallery__share-section-title {
        font-size: 12px;
    }

    .ccmg-gallery__share-hero-action {
        min-width: 100%;
        min-height: 44px;
        font-size: 13px;
    }

    .ccmg-gallery__share-grid {
        display:         flex;
        flex-wrap:       nowrap;
        align-items:     flex-start;
        gap:             2px;
        overflow-x:      auto;
        overflow-y:      hidden;
        padding-bottom:  2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ccmg-gallery__share-grid::-webkit-scrollbar {
        display: none;
    }

    .ccmg-gallery__share-card {
        flex:       0 0 58px;
        min-height: 56px;
        padding:    3px 2px 2px;
        gap:        3px;
    }

    .ccmg-gallery__share-card-icon {
        width:  30px;
        height: 30px;
    }

    .ccmg-gallery__share-card-label {
        font-size:   9px;
        line-height: 1.15;
        max-width:   7ch;
    }

    .ccmg-gallery__share-card-icon svg {
        width:  15px;
        height: 15px;
    }

    .ccmg-gallery__share-glyph {
        font-size: 17px;
    }

    .ccmg-gallery__share-copy-box {
        grid-template-columns: 1fr;
    }

    .ccmg-gallery__share-copy-trigger {
        width: 100%;
    }
}

.ccmg-gallery .ccmg-gallery__zoom-wrap {
    position: relative; /* containing block para la imagen absolute */
    width:    100%;
    height:   100%;
    overflow: hidden;
    cursor:   zoom-in;
    border-radius: calc( var(--ccmg-radius-main) - var(--ccmg-padding-main) / 2 );
    touch-action: pan-y pinch-zoom;
    transition: transform 180ms ease;
}

.ccmg-gallery .ccmg-gallery__zoom-wrap.is-touch-dragging {
    transition: none;
    will-change: transform;
}

/* Imagen principal — reset contra Elementor.
   position: absolute saca la imagen del flujo: no infla la intrinsic size
   del zoom-wrap ni del main → aspect-ratio: 1/1 nunca se sobreescribe. */
.ccmg-gallery .ccmg-gallery__main-img {
    display:          block !important;
    position:         absolute;
    inset:            0;
    width:            100% !important;
    height:           100% !important;
    max-width:        none !important;
    max-height:       none !important;
    margin:           0 !important;
    padding:          0 !important;
    border:           none;
    border-radius:    0;
    object-fit:       contain;
    transition:       transform var(--ccmg-transition);
    transform-origin: center center;
    opacity:          0;
    pointer-events:   none;
    will-change:      transform, opacity;
}

.ccmg-gallery .ccmg-gallery__main-img.is-active {
    opacity:        1;
    pointer-events: auto;
}

.ccmg-gallery .ccmg-gallery__main-img.is-zoomed {
    transform: scale(var(--ccmg-zoom-scale));
    cursor:    zoom-out;
}

.ccmg-gallery .ccmg-gallery__main-img:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

/* Accesibilidad — visualmente oculto */
.ccmg-gallery .ccmg-gallery__live-label,
.ccmg-gallery .screen-reader-text {
    position:    absolute !important;
    width:       1px !important;
    height:      1px !important;
    padding:     0 !important;
    margin:      -1px !important;
    overflow:    hidden !important;
    clip:        rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border:      0 !important;
}

/* ============================================================
   FLECHAS DE NAVEGACIÓN
   Figma: 40×40 círculos, sombra sutil
   ============================================================ */
.ccmg-gallery .ccmg-gallery__nav {
    /* Reset button */
    appearance:         none;
    -webkit-appearance: none;
    font-family:        inherit;
    padding:            0;
    margin:             0;
    text-decoration:    none;

    /* Posición */
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         2;

    /* Dimensiones Figma */
    width:           var(--ccmg-nav-size);
    height:          var(--ccmg-nav-size);
    border-radius:   var(--ccmg-radius-nav);
    display:         flex;
    align-items:     center;
    justify-content: center;

    /* Visual Figma */
    background:      #ffffff;
    border:          none;
    /* Sombra Figma: offset -3 2, blur 7.5, color rgba(0,0,0,0.05) */
    box-shadow:      -3px 2px 7.5px rgba(0,0,0,0.05);
    cursor:          pointer;
    color:           #000000;

    transition:      box-shadow var(--ccmg-transition),
                     background var(--ccmg-transition);
}

.ccmg-gallery .ccmg-gallery__nav:hover {
    background:  #f9f9f9;
    box-shadow:  -3px 2px 12px rgba(0,0,0,0.10);
}

.ccmg-gallery .ccmg-gallery__nav--prev { left:  12px; }
.ccmg-gallery .ccmg-gallery__nav--next { right: 12px; }

.ccmg-gallery .ccmg-gallery__nav svg {
    display:        block;
    pointer-events: none;
    flex-shrink:    0;
}

.ccmg-gallery .ccmg-gallery__nav:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

/* ============================================================
   LIGHTBOX — posición fixed, fuera del widget Elementor
   ============================================================ */
.ccmg-lightbox {
    position:        fixed;
    inset:           0;
    background:      var(--ccmg-overlay);
    z-index:         99999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    box-sizing:      border-box;
}

.ccmg-lightbox[hidden] { display: none; }

.ccmg-lightbox__img {
    display:       block;
    max-width:     90vw;
    max-height:    90vh;
    width:         auto;
    height:        auto;
    object-fit:    contain;
    border-radius: var(--ccmg-radius-main);
    box-shadow:    0 8px 40px rgba(0,0,0,0.4);
    margin:        0;
    padding:       0;
}

.ccmg-lightbox__close {
    appearance:         none;
    -webkit-appearance: none;
    position:        absolute;
    top:             16px;
    right:           16px;
    width:           44px;
    height:          44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(255,255,255,0.15);
    border:          none;
    border-radius:   100px;
    color:           #ffffff;
    font-size:       20px;
    cursor:          pointer;
    padding:         0;
    margin:          0;
    line-height:     1;
    transition:      background var(--ccmg-transition);
    z-index:         1;
}

.ccmg-lightbox__close:hover         { background: rgba(255,255,255,0.28); }
.ccmg-lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.ccmg-lightbox__nav {
    appearance:         none;
    -webkit-appearance: none;
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           48px;
    height:          48px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(255,255,255,0.15);
    border:          none;
    border-radius:   100px;
    color:           #ffffff;
    cursor:          pointer;
    padding:         0;
    margin:          0;
    line-height:     1;
    transition:      background var(--ccmg-transition);
}

.ccmg-lightbox__nav:hover         { background: rgba(255,255,255,0.28); }
.ccmg-lightbox__nav--prev         { left:  16px; }
.ccmg-lightbox__nav--next         { right: 16px; }
.ccmg-lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ============================================================
   DESKTOP THUMB NAV — botón "bajar" inyectado por JS
   Mismo estilo visual que .ccmg-gallery__nav.
   Ocupa la misma celda de grid que las miniaturas (grid-column:1),
   alineado al fondo. Oculto por defecto; se muestra en hover via JS.
   ============================================================ */
.ccmg-gallery .ccmg-thumb-nav--down {
    /* Reset button */
    appearance:         none;
    -webkit-appearance: none;
    padding:            0;
    margin:             0;
    font-family:        inherit;

    /* Grid: misma celda que miniaturas, pegado al fondo */
    grid-column:        1;
    grid-row:           1;
    align-self:         end;
    justify-self:       center;
    margin-bottom:      8px;
    z-index:            2;
    position:           relative;

    /* Dimensiones (mismas que nav principal Figma) */
    width:              var(--ccmg-nav-size);
    height:             var(--ccmg-nav-size);
    border-radius:      var(--ccmg-radius-nav);
    display:            flex;
    align-items:        center;
    justify-content:    center;

    /* Visual Figma */
    background:         #ffffff;
    border:             none;
    box-shadow:         -3px 2px 7.5px rgba(0,0,0,0.05);
    cursor:             pointer;
    color:              #000000;

    /* Oculto por defecto, visible en hover via JS */
    opacity:            0;
    pointer-events:     none;
    transition:         opacity    var(--ccmg-transition),
                        box-shadow var(--ccmg-transition),
                        background var(--ccmg-transition);
}

.ccmg-gallery .ccmg-thumb-nav--down.is-visible {
    opacity:        1;
    pointer-events: auto;
}

.ccmg-gallery .ccmg-thumb-nav--down[disabled] {
    opacity:        0 !important;
    pointer-events: none;
}

.ccmg-gallery .ccmg-thumb-nav--down:hover {
    background:  #f9f9f9;
    box-shadow:  -3px 2px 12px rgba(0,0,0,0.10);
}

.ccmg-gallery .ccmg-thumb-nav--down svg {
    display:        block;
    pointer-events: none;
    flex-shrink:    0;
}

.ccmg-gallery .ccmg-thumb-nav--down:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

/* ============================================================
   SLIDE TRANSITION — imagen principal
   transform + opacity: propiedades GPU, no causan layout.
   .is-entering-r = navegación hacia adelante
   .is-entering-l = navegación hacia atrás
   ============================================================ */
@keyframes ccmg-enter-r {
    from { transform: translateX( 18px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes ccmg-enter-l {
    from { transform: translateX(-18px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes ccmg-exit-r {
    from { transform: translateX(0);      opacity: 1; }
    to   { transform: translateX(-18px);  opacity: 0; }
}
@keyframes ccmg-exit-l {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX( 18px); opacity: 0; }
}

.ccmg-gallery .ccmg-gallery__main-img.is-entering-r {
    animation: ccmg-enter-r .2s ease forwards;
}
.ccmg-gallery .ccmg-gallery__main-img.is-entering-l {
    animation: ccmg-enter-l .2s ease forwards;
}
.ccmg-gallery .ccmg-gallery__main-img.is-exiting-r {
    animation: ccmg-exit-r .2s ease forwards;
    pointer-events: none;
}
.ccmg-gallery .ccmg-gallery__main-img.is-exiting-l {
    animation: ccmg-exit-l .2s ease forwards;
    pointer-events: none;
}

/* ============================================================
   RESPONSIVE — contrato component-first
   La autoridad principal es el ancho real de .ccmg-gallery.
   Las media queries quedan solo como fallback para navegadores
   sin container queries size.
   ============================================================ */
@container ccmg-gallery (max-width: 47.9375rem) {
    .ccmg-gallery .ccmg-gallery__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ccmg-gallery .ccmg-gallery__main {
        grid-column:   1;
        grid-row:      1;
        background:    transparent;
        border:        0;
        border-radius: 0;
        padding:       0;
        block-size:    clamp(320px, 56vh, 420px);
        aspect-ratio:  auto;
    }

    .ccmg-gallery .ccmg-gallery__thumbs {
        grid-column:       1;
        grid-row:          2;
        flex-direction:    row;
        inline-size:       100%;
        block-size:        auto;
        max-block-size:    none;
        overflow-x:        auto;
        overflow-y:        hidden;
        padding:           6px 8px calc(6px + var(--ccmg-scrollbar-gap));
        scroll-snap-type:  x proximity;
        scrollbar-width:   thin;
        scrollbar-color:   var(--ccmg-scrollbar-thumb) var(--ccmg-scrollbar-track);
        scrollbar-gutter:  stable both-edges;
    }

    .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar {
        width:  auto;
        height: var(--ccmg-scrollbar-size);
    }

    .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-track {
        background:    var(--ccmg-scrollbar-track);
        border-radius: var(--ccmg-scrollbar-radius);
    }

    .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-thumb {
        background:      var(--ccmg-scrollbar-thumb);
        border:          1px solid transparent;
        border-radius:   var(--ccmg-scrollbar-radius);
        background-clip: padding-box;
    }

    .ccmg-gallery .ccmg-gallery__thumb {
        width:             69px;
        height:            70px;
        padding:           4px;
        border-radius:     8px;
        scroll-snap-align: start;
    }

    .ccmg-gallery .ccmg-gallery__nav,
    .ccmg-gallery .ccmg-thumb-nav--down {
        display: none;
    }
}

@container ccmg-gallery (max-width: 37.5rem) {
    .ccmg-gallery .ccmg-gallery__main {
        border-radius: var(--ccmg-mobile-radius-main, 0px);
        block-size:    clamp(260px, 52vh, 309px);
    }

    .ccmg-gallery .ccmg-gallery__thumbs {
        gap: var(--ccmg-mobile-thumb-gap, 8px);
    }

    .ccmg-gallery .ccmg-gallery__thumb {
        width:         var(--ccmg-mobile-thumb-w, 69px);
        height:        var(--ccmg-mobile-thumb-h, 70px);
        padding:       var(--ccmg-mobile-thumb-padding, 4px);
        border-radius: var(--ccmg-mobile-radius-thumb, 8px);
    }
}

@supports (width: 1cqi) {
    @container ccmg-gallery (max-width: 47.9375rem) {
        .ccmg-gallery .ccmg-gallery__main {
            block-size: clamp(320px, 58cqi, 420px);
        }
    }

    @container ccmg-gallery (max-width: 37.5rem) {
        .ccmg-gallery .ccmg-gallery__main {
            block-size: clamp(260px, 84cqi, 309px);
        }
    }
}

@supports (height: 100svh) {
    @container ccmg-gallery (max-width: 37.5rem) {
        .ccmg-gallery .ccmg-gallery__main {
            block-size: clamp(260px, 52svh, 309px);
        }
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 1019px) {
        .ccmg-gallery .ccmg-gallery__layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .ccmg-gallery .ccmg-gallery__main {
            grid-column:   1;
            grid-row:      1;
            background:    transparent;
            border:        0;
            border-radius: 0;
            padding:       0;
            block-size:    clamp(320px, 56vh, 420px);
            aspect-ratio:  auto;
        }

        .ccmg-gallery .ccmg-gallery__thumbs {
            grid-column:       1;
            grid-row:          2;
            flex-direction:    row;
            inline-size:       100%;
            block-size:        auto;
            max-block-size:    none;
            overflow-x:        auto;
            overflow-y:        hidden;
            padding:           6px 8px calc(6px + var(--ccmg-scrollbar-gap));
            scroll-snap-type:  x proximity;
            scrollbar-width:   thin;
            scrollbar-color:   var(--ccmg-scrollbar-thumb) var(--ccmg-scrollbar-track);
            scrollbar-gutter:  stable both-edges;
        }

        .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar {
            width:  auto;
            height: var(--ccmg-scrollbar-size);
        }

        .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-track {
            background:    var(--ccmg-scrollbar-track);
            border-radius: var(--ccmg-scrollbar-radius);
        }

        .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-thumb {
            background:      var(--ccmg-scrollbar-thumb);
            border:          1px solid transparent;
            border-radius:   var(--ccmg-scrollbar-radius);
            background-clip: padding-box;
        }

        .ccmg-gallery .ccmg-gallery__thumb {
            width:             69px;
            height:            70px;
            padding:           4px;
            border-radius:     8px;
            scroll-snap-align: start;
        }

        .ccmg-gallery .ccmg-gallery__nav,
        .ccmg-gallery .ccmg-thumb-nav--down {
            display: none;
        }
    }

    @media (max-width: 600px) {
        .ccmg-gallery .ccmg-gallery__main {
            border-radius: var(--ccmg-mobile-radius-main, 0px);
            block-size:    clamp(260px, 52vh, 309px);
        }

        .ccmg-gallery .ccmg-gallery__thumbs {
            gap: var(--ccmg-mobile-thumb-gap, 8px);
        }

        .ccmg-gallery .ccmg-gallery__thumb {
            width:         var(--ccmg-mobile-thumb-w, 69px);
            height:        var(--ccmg-mobile-thumb-h, 70px);
            padding:       var(--ccmg-mobile-thumb-padding, 4px);
            border-radius: var(--ccmg-mobile-radius-thumb, 8px);
        }
    }

    @supports (height: 100svh) {
        @media (max-width: 600px) {
            .ccmg-gallery .ccmg-gallery__main {
                block-size: clamp(260px, 52svh, 309px);
            }
        }
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ccmg-gallery .ccmg-gallery__main-img,
    .ccmg-gallery .ccmg-gallery__thumb,
    .ccmg-gallery .ccmg-gallery__action,
    .ccmg-gallery__share-close,
    .ccmg-gallery__share-hero-action,
    .ccmg-gallery__share-card,
    .ccmg-gallery__share-copy-trigger,
    .ccmg-gallery .ccmg-gallery__nav,
    .ccmg-lightbox__close,
    .ccmg-lightbox__nav {
        transition: none;
    }

    .ccmg-gallery .ccmg-gallery__main-img.is-zoomed,
    .ccmg-gallery .ccmg-gallery__main-img.is-entering-r,
    .ccmg-gallery .ccmg-gallery__main-img.is-entering-l,
    .ccmg-gallery .ccmg-gallery__main-img.is-exiting-r,
    .ccmg-gallery .ccmg-gallery__main-img.is-exiting-l {
        animation:  none;
        transform:  none;
        opacity:    1;
        cursor:     default;
    }

    .ccmg-gallery .ccmg-gallery__zoom-wrap {
        cursor: default;
    }
}

/* ============================================================
   WOO PRODUCT FILTER — override defensivo contra Elementor Kit
   ============================================================ */
.elementor-kit-7 .wpfFilterWrapper input[type="checkbox"],
.elementor-kit-7 .wpfFilterWrapper input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ============================================================
   CCM V2, S9-04 · FILA DE LA FOTO RESERVADA (celular y tableta)
   En el HTML las miniaturas van ANTES que la foto, y en celular la
   rejilla sube la foto a la fila 1. Mientras el navegador no ha
   leído la foto, esa fila no tenía alto: si pintaba entonces, las
   miniaturas salían arriba y bajaban de golpe al llegar la foto
   (CLS 0,079–0,085 en ~1 de cada 20 cargas de ficha en celular;
   diagnóstico de S9-03 §5–§10). La fila 1 se reserva con EXACTAMENTE
   el mismo alto que la foto (block-size de .ccmg-gallery__main en
   cada contexto de arriba, en el mismo orden de cascada). La
   geometría final no cambia. En PC no aplica (contenedor ancho).
   Una sola fila explícita: sin miniaturas no aparece hueco ni gap.
   ============================================================ */
@container ccmg-gallery (max-width: 47.9375rem) {
    .ccmg-gallery .ccmg-gallery__layout {
        grid-template-rows: clamp(320px, 56vh, 420px);
    }
}

@container ccmg-gallery (max-width: 37.5rem) {
    .ccmg-gallery .ccmg-gallery__layout {
        grid-template-rows: clamp(260px, 52vh, 309px);
    }
}

@supports (width: 1cqi) {
    @container ccmg-gallery (max-width: 47.9375rem) {
        .ccmg-gallery .ccmg-gallery__layout {
            grid-template-rows: clamp(320px, 58cqi, 420px);
        }
    }

    @container ccmg-gallery (max-width: 37.5rem) {
        .ccmg-gallery .ccmg-gallery__layout {
            grid-template-rows: clamp(260px, 84cqi, 309px);
        }
    }
}

@supports (height: 100svh) {
    @container ccmg-gallery (max-width: 37.5rem) {
        .ccmg-gallery .ccmg-gallery__layout {
            grid-template-rows: clamp(260px, 52svh, 309px);
        }
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 1019px) {
        .ccmg-gallery .ccmg-gallery__layout {
            grid-template-rows: clamp(320px, 56vh, 420px);
        }
    }

    @media (max-width: 600px) {
        .ccmg-gallery .ccmg-gallery__layout {
            grid-template-rows: clamp(260px, 52vh, 309px);
        }
    }

    @supports (height: 100svh) {
        @media (max-width: 600px) {
            .ccmg-gallery .ccmg-gallery__layout {
                grid-template-rows: clamp(260px, 52svh, 309px);
            }
        }
    }
}
/* ccmg-hojas-juntas: ccmg-sticky-cart.css */
/* ============================================================
   CCM Sticky Cart
   Barra fija inferior con thumb + nombre + precio + ATC.
   Aparece cuando el ATC original sale del viewport hacia arriba.
   ============================================================ */

.ccmg-sticky-cart {
    --ccmg-sc-bg:           #ffffff;
    --ccmg-sc-text:         #121212;
    --ccmg-sc-muted:        rgba(0, 0, 0, 0.6);
    --ccmg-sc-border:       rgba(0, 0, 0, 0.08);
    --ccmg-sc-accent:       #e60000;
    --ccmg-sc-accent-dark:  #b40000;
    --ccmg-sc-shadow:       0 -2px 12px rgba(0, 0, 0, 0.08);
    --ccmg-sc-radius:       6px;
    --ccmg-sc-thumb-size:   44px;
    --ccmg-sc-height:       64px;
    --ccmg-sc-max-width:    1280px;
    --ccmg-sc-z:            999;
    --ccmg-sc-transition:   220ms ease;

    position:       fixed;
    inset:          auto 0 0 0;
    z-index:        var(--ccmg-sc-z);
    background:     var(--ccmg-sc-bg);
    border-top:     1px solid var(--ccmg-sc-border);
    box-shadow:     var(--ccmg-sc-shadow);
    transform:      translateY(100%);
    visibility:     hidden;
    opacity:        0;
    transition:     transform var(--ccmg-sc-transition),
                    opacity var(--ccmg-sc-transition),
                    visibility 0s linear var(--ccmg-sc-transition);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family:    "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:          var(--ccmg-sc-text);
    isolation:      isolate;
}

.ccmg-sticky-cart.is-visible {
    transform:  translateY(0);
    visibility: visible;
    opacity:    1;
    transition: transform var(--ccmg-sc-transition),
                opacity var(--ccmg-sc-transition),
                visibility 0s linear 0s;
}

.ccmg-sticky-cart :where(*, *::before, *::after) {
    box-sizing: border-box;
}

.ccmg-sticky-cart__inner {
    display:     flex;
    align-items: center;
    gap:         12px;
    width:       100%;
    max-width:   var(--ccmg-sc-max-width);
    height:      var(--ccmg-sc-height);
    margin:      0 auto;
    padding:     8px 16px;
}

.ccmg-sticky-cart__media {
    flex:          0 0 auto;
    width:         var(--ccmg-sc-thumb-size);
    height:        var(--ccmg-sc-thumb-size);
    border-radius: 4px;
    overflow:      hidden;
    background:    #f5f5f5;
    display:       block;
}

.ccmg-sticky-cart__media img,
.ccmg-sticky-cart__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.ccmg-sticky-cart__info {
    flex:           1 1 auto;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.ccmg-sticky-cart__title {
    margin:        0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-size:     14px;
    font-weight:   500;
    line-height:   1.2;
    color:         var(--ccmg-sc-text);
}

.ccmg-sticky-cart__price {
    font-size:   14px;
    font-weight: 600;
    line-height: 1.2;
    color:       var(--ccmg-sc-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.ccmg-sticky-cart__price del {
    color:           var(--ccmg-sc-muted);
    font-weight:     400;
    margin-right:    6px;
    text-decoration: line-through;
}

.ccmg-sticky-cart__price ins {
    text-decoration: none;
    background:      transparent;
    color:           inherit;
}

.ccmg-sticky-cart__price .woocommerce-Price-amount {
    font-weight: inherit;
}

.ccmg-sticky-cart__actions {
    flex:        0 0 auto;
    display:     flex;
    align-items: center;
    gap:         8px;
}

.ccmg-sticky-cart__atc,
.ccmg-sticky-cart__buy-now {
    flex:            0 0 auto;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       140px;
    height:          44px;
    padding:         0 18px;
    border:          0;
    border-radius:   var(--ccmg-sc-radius);
    background:      var(--ccmg-sc-accent);
    color:           #ffffff;
    font-family:     inherit;
    font-size:       15px;
    font-weight:     500;
    line-height:     1;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background-color var(--ccmg-sc-transition),
                     opacity var(--ccmg-sc-transition);
}

.ccmg-sticky-cart__atc:hover:not(:disabled),
.ccmg-sticky-cart__buy-now:hover:not(:disabled) {
    background: var(--ccmg-sc-accent-dark);
}

.ccmg-sticky-cart__atc:focus-visible,
.ccmg-sticky-cart__buy-now:focus-visible {
    outline:        2px solid var(--ccmg-sc-accent);
    outline-offset: 2px;
}

.ccmg-sticky-cart__atc[aria-busy="true"],
.ccmg-sticky-cart__atc.is-loading,
.ccmg-sticky-cart__buy-now[aria-busy="true"],
.ccmg-sticky-cart__buy-now.is-loading {
    opacity: 0.7;
    cursor:  progress;
}

.ccmg-sticky-cart__atc.is-added {
    background:  #2e7d32;
    color:       #ffffff;
    box-shadow:  none;
}

/* ATC secundario: se usa solo cuando también hay botón "Comprar ahora" (simples). */
.ccmg-sticky-cart__atc--secondary {
    min-width:  120px;
    background: transparent;
    color:      var(--ccmg-sc-accent);
    box-shadow: inset 0 0 0 1px var(--ccmg-sc-accent);
}

.ccmg-sticky-cart__atc--secondary:hover:not(:disabled) {
    background: rgba(230, 0, 0, 0.06);
}

/* Reserva espacio al final del body cuando el bar es visible
   para que el contenido no quede oculto al hacer scroll al final. */
body.ccmg-has-sticky-cart {
    padding-bottom: calc(var(--ccmg-sc-height, 64px) + env(safe-area-inset-bottom, 0px));
}

/* Desplazar el botón flotante de WhatsApp cuando el sticky cart es visible.
   — .wa__btn_popup → contenedor fixed del plugin "WhatsApp for WordPress" (bottom: 30px; z-index: 999999999).

   Aquí había también `.xoo-wsc-basket`, el botón flotante de "Side Cart
   Premium". Ese plugin se retiró el 3-sep-2026 y el selector no casaba con
   nada. Si algún día vuelve a haber un botón flotante de carrito, la barra
   móvil de ccm-tienda-sections es la que ocupa ese hueco ahora. */
.wa__btn_popup {
    transition: transform var(--ccmg-sc-transition, 220ms ease);
}

body.ccmg-has-sticky-cart .wa__btn_popup {
    transform: translateY(calc(-1 * (var(--ccmg-sc-height, 64px) + env(safe-area-inset-bottom, 0px))));
}

@media (max-width: 480px) {
    .ccmg-sticky-cart__inner {
        gap:     8px;
        padding: 8px 12px;
    }
    .ccmg-sticky-cart__actions {
        flex: 1 1 auto;
        gap:  6px;
    }
    .ccmg-sticky-cart__atc,
    .ccmg-sticky-cart__buy-now {
        flex:      1 1 0;
        min-width: 0;
        padding:   0 10px;
        font-size: 14px;
    }
    .ccmg-sticky-cart__atc--secondary {
        min-width: 0;
    }
    .ccmg-sticky-cart__price {
        font-size: 13px;
    }
    .ccmg-sticky-cart__title {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccmg-sticky-cart {
        transition: none;
    }
}
/* ccmg-hojas-juntas: ccmg-product-card.css */
/* ============================================================
   CCM Product Card  — .ccmg-card
   Diseño: CCM web design 2026 · Figma node 669-5286
   ============================================================ */

/* ---- Variables ---- */

.ccmg-card {
    --ccmg-card-radius:       24px;
    --ccmg-card-img-radius:   16px;
    --ccmg-card-bg:           #ffffff;
    --ccmg-card-accent:       #e60000;
    --ccmg-card-accent-hot:   #ff3b00;     /* badge "MÁS VENDIDOS" */
    --ccmg-card-installments: #00a650;     /* renglón de cuotas (verde ML) */
    --ccmg-card-disc-bg:      var(--ccmg-card-accent);   /* badge % OFF (rojo CCM) */
    --ccmg-card-sold-out-bg:  #191919;
    --ccmg-card-border:       rgba(25, 24, 24, 0.3);
    --ccmg-card-border-w:     1.5px;
    --ccmg-card-font:         "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* ATC flotante */
    --ccmg-card-atc-bg:       rgba(25, 24, 24, 0.9);
    --ccmg-card-atc-size:     32px;
    --ccmg-card-atc-icon-size: 13px;
    --ccmg-card-atc-expand-max-width: 220px;
    --ccmg-card-atc-expand-gap: 8px;
    --ccmg-card-atc-expand-padding: 8px 12px 8px 8px;
    --ccmg-card-atc-label-size: 14px;
    --ccmg-card-atc-label-line-height: 14px;
    --ccmg-card-atc-label-max-width: 200px;
    --ccmg-card-atc-pulse-shrink: 0.88;
    --ccmg-card-atc-pulse-grow: 1.08;

    /* Colores de texto */
    --ccmg-card-title-color:  #000000;
    --ccmg-card-price-color:  #191919;
    --ccmg-card-del-color:    #707070;
    --ccmg-card-ship-bg:      rgb(225, 241, 227);
    --ccmg-card-ship-color:   rgb(0, 148, 19);

    display:          flex;
    flex-direction:   column;
    gap:              16px;
    background:       var(--ccmg-card-bg);
    font-family:      var(--ccmg-card-font);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Container queries: responde al ancho de la propia tarjeta */
    container-type:   inline-size;
    container-name:   card;
}

/* ============================================================
   Zona de imagen (.ccmg-card__media)
   Contiene: imagen, badge de categoría, botón ATC flotante
   ============================================================ */

.ccmg-card__media {
    position:      relative;
    border-radius: var(--ccmg-card-radius);
    overflow:      hidden;
    aspect-ratio:  var(--ccmg-card-nav-anchor-aspect-ratio);
    background:    #ffffff;
}

/* ---- Link de imagen (aria-hidden, no tab) ---- */

.ccmg-card__img-link {
    display:         block;
    width:           100%;
    height:          100%;
    text-decoration: none;
    outline:         none;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Wrapper interno con padding 10px (Figma) ---- */
/* El radio 16px aplica al inner frame del diseño         */

.ccmg-card__image-wrap {
    position:      relative;
    width:         100%;
    height:        100%;
    padding:       10px;
    box-sizing:    border-box;
    overflow:      hidden;
    border-radius: var(--ccmg-card-img-radius);
}

/*
 * Geometría de las dos imágenes: !important acotado a width/height/object-fit.
 *
 * Por qué. La tarjeta se pinta dentro de `ul.products li.product` en tres de
 * sus cuatro contextos (categoría de WooCommerce, rejilla propia y la lista de
 * favoritos), y allí llega `woocommerce.css` con
 *
 *     .woocommerce ul.products li.product a img { width: 100%; height: auto }
 *
 * cuya especificidad está muy por encima de la de estas dos reglas (0,1,0). Sin
 * refuerzo gana WooCommerce: el `calc(100% - 20px)` del hover no se aplica, la
 * segunda imagen se pinta con el ancho del padding box (218,3 px frente a los
 * 198,3 de la principal, medido en producción) y con la altura automática, así
 * que se sale del recuadro.
 *
 * Por qué !important y no más especificidad. Para ganar habría que anclar cada
 * regla a la cadena de ancestros de CADA contexto (carrusel, .ccmg-product-grid,
 * ul.products y ul.products.ccma-favoritos), repetirlas cuatro veces y volver a
 * perder ante cualquier regla del tema con un id. Es el mismo motivo por el que
 * `.ccmg-card__atc` ya usa !important contra los estilos .button de
 * WooCommerce (ver la nota en esa regla, más abajo). Se acota a las TRES
 * propiedades de la caja: opacidad, transición, radio y color siguen siendo
 * sobreescribibles con normalidad.
 */

.ccmg-card__img {
    display:       block;
    /* 100% del área de contenido del envoltorio (está en el flujo, tras el padding) */
    width:         100% !important;
    height:        100% !important;
    object-fit:    contain !important;    /* Figma: scaleMode = FIT */
    border-radius: var(--ccmg-card-img-radius);
    transition:    opacity 0.3s ease;
}

.ccmg-card__img--placeholder {
    opacity: 0.35;
}

/* ---- Imagen hover (segunda imagen de galería) ---- */

/*
 * Misma caja EXACTA que la principal. Al ser absoluta, sus porcentajes se
 * resuelven contra el padding box del envoltorio, así que hay que despegarla
 * los 10px del padding por los cuatro lados y descontarlos dos veces del ancho
 * y del alto. Si cambia el padding de .ccmg-card__image-wrap, estos tres
 * valores cambian con él (el verificador de tests/css lo comprueba).
 * El !important, por lo mismo que arriba.
 */

.ccmg-card__img--hover {
    position:      absolute;
    inset:         10px;          /* respeta el padding del wrapper */
    width:         calc(100% - 20px) !important;
    height:        calc(100% - 20px) !important;
    object-fit:    contain !important;
    border-radius: var(--ccmg-card-img-radius);
    opacity:       0;
    transition:    opacity 0.35s ease;
}

/* ---- Overlay permanente (Figma: Background + Overlay layers) ---- */

.ccmg-card__overlay {
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, 0.04);
    pointer-events: none;
    z-index:        1;
}

/* ---- Badge de categoría en imagen ---- */
/* Badge default: top=9px left=6px · pill bg=#191919 · 12px/500/white lh=18 */

.ccmg-card__cat-badge {
    position:        absolute;
    top:             9px;
    left:            6px;
    z-index:         2;
    display:         inline-flex;
    align-items:     center;
    padding:         3px 12px 0;
    border-radius:   100px;
    background:      var(--ccmg-card-sold-out-bg);
    color:           #ffffff;
    font-family:     var(--ccmg-card-font);
    font-size:       12px;
    font-weight:     500;
    line-height:     18px;
    white-space:     nowrap;
    pointer-events:  none;
    text-transform:  uppercase;
    letter-spacing:  0.02em;
}

.ccmg-card__cat-badge--sold-out {
    background: var(--ccmg-card-accent-hot);
}

/* ============================================================
   Botón ATC flotante
   Figma: bottom=12px right=10px · 32×32 circle · bg=rgba(25,24,24,0.9)
   Hover: expande a pill mostrando "Añadir al carrito" (14px/500)
   ============================================================ */

.ccmg-card__atc {
    all:             unset;
    position:        absolute !important;  /* WooCommerce .button aplica position:relative */
    bottom:          12px;
    right:           10px;
    z-index:         3;

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

    height:          var(--ccmg-card-atc-size) !important;
    min-width:       var(--ccmg-card-atc-size) !important;  /* fuerza ancho = alto → círculo */
    max-width:       var(--ccmg-card-atc-size);
    padding:         8px !important;

    /* !important para ganar a los estilos .button de WooCommerce/tema */
    border-radius:   100px !important;
    background:      var(--ccmg-card-atc-bg) !important;
    color:           #ffffff !important;
    cursor:          pointer !important;

    overflow:        hidden !important;  /* WooCommerce .button fuerza overflow:visible */
    white-space:     nowrap;
    box-sizing:      border-box !important;
    line-height:     1;
    text-decoration: none;

    transition:
        max-width  0.38s cubic-bezier(0.4, 0, 0.2, 1),
        gap        0.38s cubic-bezier(0.4, 0, 0.2, 1),
        padding    0.38s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.15s ease;

    -webkit-tap-highlight-color: transparent;
}

/*
 * Expansión hover solo en dispositivos con puntero fino (ratón/trackpad).
 * En touch, :hover queda "pegado" al primer tap y provoca el estado
 * expandido de forma permanente hasta el siguiente tap.
 * (hover:hover) + (pointer:fine) = ratón real, nunca pantalla táctil.
 */
@media (hover: hover) and (pointer: fine) {
    /*
     * El intercambio solo cuando la segunda imagen ESTÁ descargada.
     *
     * La imagen de hover es `loading="lazy"`: hasta que el navegador la trae no
     * hay nada que enseñar, y desvanecer la principal en ese momento deja ver
     * el fondo blanco del envoltorio (el «hover vacío» del reporte). La clase
     * `--hover-listo` la pone ccmg-card-atc.js cuando la imagen ya está
     * `complete` con píxeles. Sin JS, o con el JS caído, la clase no aparece
     * nunca: no hay efecto de hover, pero tampoco hueco en blanco.
     */
    .ccmg-card__image-wrap--has-hover.ccmg-card__image-wrap--hover-listo:hover .ccmg-card__img--primary {
        opacity: 0;
    }

    .ccmg-card__image-wrap--has-hover.ccmg-card__image-wrap--hover-listo:hover .ccmg-card__img--hover {
        opacity: 1;
    }

    /* Card hover → expande el botón */
    .ccmg-card:hover .ccmg-card__atc:not([disabled]):not([aria-disabled="true"]) {
        max-width: var(--ccmg-card-atc-expand-max-width);
        gap:       var(--ccmg-card-atc-expand-gap);
        padding:   var(--ccmg-card-atc-expand-padding);
    }

    /* Hover directo sobre el botón */
    .ccmg-card__atc:hover:not([disabled]) {
        background: rgba(25, 24, 24, 1);
    }
}

.ccmg-card__atc:focus-visible {
    outline:        2px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-card__atc[disabled],
.ccmg-card__atc[aria-disabled="true"] {
    opacity: 0.45;
    cursor:  not-allowed;
}

/* Estados gestionados por WooCommerce + estado local explícito */
.ccmg-card__atc.loading:not([disabled]),
.ccmg-card__atc.added:not([disabled]),
.ccmg-card__atc[data-ccmg-atc-state="pending"]:not([disabled]),
.ccmg-card__atc[data-ccmg-atc-state="success"]:not([disabled]),
.ccmg-card__atc[data-ccmg-atc-state="error"]:not([disabled]) {
    max-width: var(--ccmg-card-atc-expand-max-width);
    gap:       var(--ccmg-card-atc-expand-gap);
    padding:   var(--ccmg-card-atc-expand-padding);
}

.ccmg-card__atc.loading .ccmg-card__atc-label,
.ccmg-card__atc.added .ccmg-card__atc-label,
.ccmg-card__atc[data-ccmg-atc-state="pending"] .ccmg-card__atc-label,
.ccmg-card__atc[data-ccmg-atc-state="success"] .ccmg-card__atc-label,
.ccmg-card__atc[data-ccmg-atc-state="error"] .ccmg-card__atc-label {
    max-width: var(--ccmg-card-atc-label-max-width);
    opacity:   1;
}

.ccmg-card__atc[data-ccmg-atc-state="pending"] {
    background: rgba(25, 24, 24, 1) !important;
    opacity:    1;
    cursor:     progress !important;
}

.ccmg-card__atc[data-ccmg-atc-state="pending"][aria-disabled="true"],
.ccmg-card__atc[data-ccmg-atc-state="success"][aria-disabled="true"] {
    opacity: 1;
}

.ccmg-card__atc[data-ccmg-atc-state="success"] {
    animation:  ccmg-atc-pulse 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    background: rgba(25, 24, 24, 1) !important;
}

.ccmg-card__atc[data-ccmg-atc-state="error"] {
    background: rgba(164, 24, 24, 0.96) !important;
    opacity:    1;
}

/* Ícono del carrito */
.ccmg-card__atc-icon {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--ccmg-card-atc-icon-size);
    height:          var(--ccmg-card-atc-icon-size);
    flex-shrink:     0;
}

.ccmg-card__atc-icon svg {
    display: block;
    width:   var(--ccmg-card-atc-icon-size);
    height:  var(--ccmg-card-atc-icon-size);
}

/* Íconos intercambiables: carrito ↔ check */
.ccmg-card__atc-icon-cart,
.ccmg-card__atc-icon-check {
    position:   absolute;
    inset:      0;
    display:    flex;
    align-items:     center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.ccmg-card__atc-icon-check { opacity: 0; }

/* Pending / error mantienen el carrito visible */
.ccmg-card__atc[data-ccmg-atc-state="pending"] .ccmg-card__atc-icon-cart,
.ccmg-card__atc[data-ccmg-atc-state="error"] .ccmg-card__atc-icon-cart {
    opacity: 1;
}

.ccmg-card__atc[data-ccmg-atc-state="pending"] .ccmg-card__atc-icon-check,
.ccmg-card__atc[data-ccmg-atc-state="error"] .ccmg-card__atc-icon-check {
    opacity: 0;
}

/* Estado added (WooCommerce confirma) */
.ccmg-card__atc[data-ccmg-atc-state="success"] .ccmg-card__atc-icon-cart,
.ccmg-card__atc.added .ccmg-card__atc-icon-cart { opacity: 0; }

.ccmg-card__atc[data-ccmg-atc-state="success"] .ccmg-card__atc-icon-check,
.ccmg-card__atc.added .ccmg-card__atc-icon-check { opacity: 1; }

/* ============================================================
   Animación de éxito
   Se activa cuando WooCommerce confirma el add-to-cart.
   ============================================================ */

@keyframes ccmg-atc-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(var(--ccmg-card-atc-pulse-shrink)); }
    65%  { transform: scale(var(--ccmg-card-atc-pulse-grow)); }
    100% { transform: scale(1); }
}

.ccmg-card__media > .added_to_cart,
.ccmg-card__media > .added_to_cart.wc-forward {
    display: none !important;
}

/* Texto del botón */
.ccmg-card__atc-label {
    font-family:  var(--ccmg-card-font);
    font-size:    var(--ccmg-card-atc-label-size);
    font-weight:  500;
    line-height:  var(--ccmg-card-atc-label-line-height);
    color:        #ffffff;
    white-space:  nowrap;
    overflow:     hidden;
    max-width:    0;
    opacity:      0;
    transition:
        max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        opacity   0.2s  ease 0.1s;
}

@media (hover: hover) and (pointer: fine) {
    .ccmg-card:hover .ccmg-card__atc:not([disabled]) .ccmg-card__atc-label {
        max-width: var(--ccmg-card-atc-label-max-width);
        opacity:   1;
    }
}

/* Variante producto variable (enlace) */
.ccmg-card__atc--variable {
    background: rgba(25, 24, 24, 0.9);
    text-decoration: none;
}

/* ============================================================
   Cuerpo (.ccmg-card__body-link + .ccmg-card__body)
   ============================================================ */

.ccmg-card__body-link {
    display:         block;
    min-width:       0;        /* evita overflow horizontal en flex */
    text-decoration: none;
    color:           inherit;
    outline:         none;
    -webkit-tap-highlight-color: transparent;
}

.ccmg-card__body-link:focus-visible .ccmg-card__body {
    outline:        2px solid var(--ccmg-card-accent);
    outline-offset: 4px;
    border-radius:  4px;
}

.ccmg-card__body {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        0 6px;
    min-width:      0;         /* evita que el contenido desborde el slide */
    overflow:       hidden;    /* recorta badges/precios que excedan el ancho */
}

/* ---- Bloque info: título + precio + envío ---- */

.ccmg-card__info {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

/* ---- Título ---- */
/* Figma: 14px / 500 / lh=14 / #000 */

.ccmg-card__title {
    all:                unset;
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:           hidden;
    font-family:        var(--ccmg-card-font);
    font-size:          14px;
    font-weight:        500;
    color:              var(--ccmg-card-title-color);
    line-height:        14px;
    max-height:         28px;
}

/* ---- Precio ---- */
/* Figma: current=18px/500/lh=18/#191919 | del=14px/400/lh=12/#707070 */
/* Orden: precio tachado arriba, luego (precio actual + badge % OFF)     */

.ccmg-card__price {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            0;
    padding-top:    4px;
}

.ccmg-card__price-row {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

.ccmg-card__price-current {
    all:         unset;
    font-family: var(--ccmg-card-font);
    font-size:   18px;
    font-weight: 500;
    line-height: 18px;
    color:       var(--ccmg-card-price-color);
}

.ccmg-card__price-regular {
    all:                   unset;
    font-family:           var(--ccmg-card-font);
    font-size:             14px;
    font-weight:           400;
    line-height:           12px;
    color:                 var(--ccmg-card-del-color);
    text-decoration:       line-through;
    text-decoration-thickness: 1px;
}

/* ---- Badge % OFF (Mercado Libre: pill verde relleno) ---- */

/*
 * El texto se veía pegado arriba del recuadro (29-sep). No era un margen: en
 * Founder Grotesk las mayúsculas llenan todo el ascendente (63 % del cuerpo) y
 * debajo queda un 37 % de descendente que «25% OFF» no usa. `text-box` recorta
 * la caja a las mayúsculas y así el relleno, igual arriba y abajo, las centra.
 *
 * `inline-block` y no `inline-flex`: `text-box` solo se aplica a contenedores
 * de bloque, y en una caja flex se ignora sin avisar.
 *
 * El margen inferior sube la etiqueta hasta el centro de las mayúsculas del
 * precio, que queda 0,37 × el cuerpo del precio por encima del centro de su
 * caja. En `em` de la etiqueta acierta en todos los tamaños de la tarjeta
 * (precio/etiqueta ≈ 1,4–1,6); con los 9 px de antes, en móvil la etiqueta
 * quedaba por encima del precio.
 *
 * Lo vigila tests/css/disc-label-css.test.js.
 */
.ccmg-card__disc-label {
    display:       inline-block;
    align-self:    center;
    background:    var(--ccmg-card-disc-bg);
    color:         #ffffff;
    font-family:   var(--ccmg-card-font);
    font-size:     11px;
    font-weight:   500;
    line-height:   1;
    text-box:      trim-both cap alphabetic;
    padding:       3px 4px;
    margin:        0 0 .55em 0;
    border-radius: 3px;
    white-space:   nowrap;
}

/* Sin `text-box` (Safari anterior a 18.2): se rellena arriba el mismo 37 % que
   la fuente deja abajo. Con un borde transparente y no con `padding`, para no
   pelear con los rellenos de los tamaños de más abajo; el fondo rojo se pinta
   también bajo el borde. */
@supports not (text-box: trim-both cap alphabetic) {
    .ccmg-card__disc-label {
        border-top: .37em solid transparent;
    }
}

/* WooCommerce inyecta .woocommerce-Price-amount y bdi */
.ccmg-card__price-current .woocommerce-Price-amount,
.ccmg-card__price-current bdi,
.ccmg-card__price-regular .woocommerce-Price-amount,
.ccmg-card__price-regular bdi {
    color:   inherit;
    font:    inherit;
    display: inline;
}

/* ---- Renglón de cuotas (Mercado Pago) ---- */

.ccmg-card__installments {
    margin:      0;
    color:       var(--ccmg-card-installments);
    font-family: var(--ccmg-card-font);
    font-size:   13px;
    line-height: 15px;
    font-weight: 500;
}

/* wc_price envuelve el monto en <span class="woocommerce-Price-amount amount"> */
.ccmg-card__installments .woocommerce-Price-amount,
.ccmg-card__installments .amount,
.ccmg-card__installments bdi {
    color:       inherit;
    font:        inherit;
    font-weight: 500;
    white-space: nowrap;
    display:     inline;
}

/* ---- Etiqueta de envío ---- */
/* Figma: pill bg=rgb(225,241,227) · r=100 · pad=2px 8px 0 · 12px/500/rgb(0,148,19)/lh=14 */

.ccmg-card__shipping {
    display:         inline-flex;
    align-items:     center;
    align-self:      flex-start;
    padding:         2px 8px 0;
    border-radius:   100px;
    background:      var(--ccmg-card-ship-bg);
    color:           var(--ccmg-card-ship-color);
    font-family:     var(--ccmg-card-font);
    font-size:       12px;
    font-weight:     500;
    line-height:     14px;
    white-space:     nowrap;
    pointer-events:  none;
}

/* ============================================================
   Accesibilidad
   ============================================================ */

.ccmg-card .screen-reader-text {
    position:    absolute !important;
    width:       1px !important;
    height:      1px !important;
    padding:     0 !important;
    margin:      -1px !important;
    overflow:    hidden !important;
    clip:        rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border:      0 !important;
}

/* ============================================================
   Responsive — Container Queries (tendencia 2026)
   + Media Queries como fallback
   ============================================================ */

/* --- Tarjetas muy pequeñas < 130px (4+ columnas en móvil) --- */
@container card (max-width: 130px) {
    .ccmg-card            { gap: 10px; }
    .ccmg-card__body      { gap: 8px; padding: 0 4px; }
    .ccmg-card__info      { gap: 0; }
    .ccmg-card__cat-badge { font-size: 10px; padding: 2px 8px 0; top: 6px; left: 4px; }
    .ccmg-card__title     { font-size: 11px; line-height: 12px; max-height: 24px; }
    .ccmg-card__price-current { font-size: 13px; line-height: 13px; }
    .ccmg-card__price-regular { font-size: 11px; }
    .ccmg-card__installments { font-size: 10px; line-height: 12px; }
    .ccmg-card__disc-label   { font-size: 9px; padding: 2px 4px; }
    .ccmg-card__shipping  { font-size: 10px; padding: 2px 6px 0; }
    .ccmg-card__atc       {
        --ccmg-card-atc-size: 26px;
        --ccmg-card-atc-icon-size: 11px;
        --ccmg-card-atc-expand-max-width: 126px;
        --ccmg-card-atc-expand-gap: 5px;
        --ccmg-card-atc-expand-padding: 5px 8px 5px 5px;
        --ccmg-card-atc-label-size: 10px;
        --ccmg-card-atc-label-line-height: 10px;
        --ccmg-card-atc-label-max-width: 88px;
        --ccmg-card-atc-pulse-shrink: 0.95;
        --ccmg-card-atc-pulse-grow: 1.02;
        bottom: 8px;
        right: 6px;
    }
}

/* --- Tarjetas pequeñas 131–180px (3 columnas tablet/móvil) --- */
@container card (min-width: 131px) and (max-width: 180px) {
    .ccmg-card            { gap: 12px; }
    .ccmg-card__title     { font-size: 12px; line-height: 13px; max-height: 26px; }
    .ccmg-card__price-current { font-size: 15px; line-height: 15px; }
    .ccmg-card__atc       {
        --ccmg-card-atc-size: 28px;
        --ccmg-card-atc-icon-size: 12px;
        --ccmg-card-atc-expand-max-width: 144px;
        --ccmg-card-atc-expand-gap: 6px;
        --ccmg-card-atc-expand-padding: 6px 10px 6px 6px;
        --ccmg-card-atc-label-size: 11px;
        --ccmg-card-atc-label-line-height: 11px;
        --ccmg-card-atc-label-max-width: 104px;
        --ccmg-card-atc-pulse-shrink: 0.94;
        --ccmg-card-atc-pulse-grow: 1.03;
    }
}

/* --- Estándar 180–280px — aplica el diseño base --- */

/* --- Tarjetas grandes > 280px --- */
@container card (min-width: 280px) {
    .ccmg-card__title         { font-size: 14px; }
    .ccmg-card__price-current { font-size: 18px; }
}

@media (max-width: 599px) {
    .ccmg-card {
        --ccmg-card-radius: 16px;
    }
}

/* ---- Viewport mobile ---- */

@media (max-width: 479px) {
    /* Gap reducido entre imagen y body */
    .ccmg-card {
        gap: 8px;
    }

    .ccmg-card__body {
        padding: 0 4px;
        gap:     8px;
    }

    .ccmg-card__title {
        font-size:  13px;
        line-height: 14px;
        max-height:  26px;  /* 2 líneas × 13px */
    }

    .ccmg-card__cat-badge {
        font-size: 11px;
        line-height: 11px;
        padding:   4px 10px 0;
    }

    .ccmg-card__price-current {
        font-size:  clamp(12px, 3.4vw, 16px);
        line-height: clamp(12px, 3.4vw, 16px);
    }

    .ccmg-card__price-regular {
        font-size:  clamp(10px, 2.8vw, 13px);
        line-height: 11px;
    }

    .ccmg-card__installments {
        font-size:  clamp(11px, 2.8vw, 13px);
        line-height: 12px;
    }

    .ccmg-card__disc-label {
        font-size: clamp(9px, 2.4vw, 11px);
        padding:   2px 4px;
    }

    .ccmg-card__info {
        gap: 0;
    }
}

/* ---- Preferencia de movimiento reducido ---- */

@media (prefers-reduced-motion: reduce) {
    .ccmg-card__img,
    .ccmg-card__img--hover,
    .ccmg-card__atc,
    .ccmg-card__atc-label {
        transition: none;
    }
}
/* ccmg-hojas-juntas: ccmg-carousel.css */
/* ============================================================
   CCM Carousel  — .ccmg-carousel
   Scroll-snap nativo con gutters persistentes y peek intencional.
   El número de columnas se controla via --ccmg-slides (set en JS).
   ============================================================ */

/* ---- Variables + sección/container ---- */

.ccmg-carousel {
    --ccmg-slides:              4; /* JS sobreescribe según breakpoint */
    --ccmg-shell-max-width:     1520px;
    --ccmg-viewport-padding:    0px;
    --ccmg-track-padding-top:   4px;
    --ccmg-track-content-padding-bottom: 8px;
    --ccmg-scrollbar-size:      7px;
    --ccmg-scrollbar-gap:       6px;
    --ccmg-scrollbar-radius:    999px;
    --ccmg-scrollbar-track:     rgba(18,18,18,0.08);
    --ccmg-scrollbar-thumb:     rgba(18,18,18,0.22);
    --ccmg-scrollbar-thumb-hover: rgba(18,18,18,0.32);
    --ccmg-track-padding-bottom: calc(var(--ccmg-track-content-padding-bottom) + var(--ccmg-scrollbar-gap));
    --ccmg-track-edge-padding:  clamp(12px, calc(4.2857vw - 13.714px), 48px);
    --ccmg-gap:                 clamp(14px, 1.2vw, 18px);
    --ccmg-peek-desktop:        120px;
    --ccmg-peek-tablet:         84px;
    --ccmg-peek-mobile:         56px;
    --ccmg-peek:                clamp(calc(var(--ccmg-peek-desktop) * 0.7), 8vw, var(--ccmg-peek-desktop));
    --ccmg-active-peek:         0px;
    --ccmg-gap-count:           calc(var(--ccmg-slides) - 1);
    --ccmg-slide-size:          calc(
                                    (100% - var(--ccmg-active-peek) - (var(--ccmg-gap) * var(--ccmg-gap-count)))
                                    / var(--ccmg-slides)
                                );
    --ccmg-arrow-size:          40px;
    --ccmg-arrow-bg:            #ffffff;
    --ccmg-arrow-color:         #121212;
    --ccmg-arrow-border:        1px solid rgba(18,18,18,0.08);
    --ccmg-arrow-shadow:        0 8px 20px rgba(18,18,18,0.12), 0 2px 6px rgba(18,18,18,0.08);
    --ccmg-arrow-shadow-hover:  0 12px 28px rgba(18,18,18,0.16), 0 4px 10px rgba(18,18,18,0.10);
    --ccmg-nav-track-inset:     max(0px, calc(var(--ccmg-track-edge-padding) - (var(--ccmg-arrow-size) / 2)));
    --ccmg-nav-anchor-block-size: max(0px, calc(var(--ccmg-slide-size) * var(--ccmg-card-nav-anchor-height-factor)));
    --ccmg-dot-size:            8px;
    --ccmg-dot-color:           rgba(0,0,0,0.18);
    --ccmg-dot-active:          rgba(0,0,0,0.72);
    --ccmg-title-size:          clamp(20px, 1.45vw, 24px);
    --ccmg-title-weight:        500;
    --ccmg-title-color:         rgba(0,0,0,0.92);
    --ccmg-header-cta-size:     clamp(14px, 1.05vw, 16px);
    --ccmg-header-cta-gap:      6px;
    --ccmg-header-cta-color:    #e60000;
    --ccmg-font:                "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

    box-sizing:       border-box;
    display:          flex;
    flex-direction:   column;
    gap:              10px;
    width:            100%;
    max-width:        var(--ccmg-shell-max-width);
    margin-inline:    auto;
    position:         relative;
    font-family:      var(--ccmg-font);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ccmg-carousel[data-has-overflow="true"] {
    --ccmg-active-peek: var(--ccmg-peek);
    --ccmg-gap-count:   var(--ccmg-slides);
}

/*
 * Elementor puede medir el alto del widget antes de que iOS/WebKit termine
 * de resolver bien el contenido flexible del track. Mantener el wrapper sin
 * clipping evita que el widget corte tarjetas altas en mobile.
 */
.elementor-widget-ccmg_product_carousel,
.elementor-widget-ccmg_product_carousel .elementor-widget-container {
    display: block;
    height: auto !important;
    min-height: max-content;
    contain: none;
    overflow: visible;
}

/*
 * En movil las secciones de Elementor llevan --flex-wrap-mobile:wrap. En un
 * flex en columna con wrap, Chrome mide el widget con un ancho provisional y
 * la caja quedaba mas baja que el carrusel (208 vs 290 px); crecia al poner
 * el JS su min-height y empujaba lo de abajo (CLS, 6-oct-2026). Con el ancho
 * explicito se mide con el real. Un ancho personalizado de Elementor
 * (.elementor-element-<id>) sigue ganando por especificidad.
 */
.elementor-widget-ccmg_product_carousel {
    width: 100%;
}

.elementor-widget-ccmg_product_carousel .ccmg-carousel-host {
    display: block;
    height: auto;
    min-height: max-content;
    overflow: visible;
}

.elementor-widget-ccmg_product_carousel .ccmg-carousel,
.elementor-widget-ccmg_product_carousel .ccmg-carousel__track-wrap,
.elementor-widget-ccmg_product_carousel .ccmg-carousel__track {
    height: auto;
    min-height: max-content;
}

/* ---- Header ---- */

.ccmg-carousel__header {
    box-sizing:      border-box;
    display:         flex;
    align-items:     flex-end;
    flex-wrap:       wrap;
    gap:             12px;
    padding-inline:  var(--ccmg-track-edge-padding);
    width:           100%;
}

.ccmg-carousel__header--space-between,
.ccmg-carousel__header--inline {
    align-items: center;
}

.ccmg-carousel__header--space-between {
    justify-content: space-between;
}

.ccmg-carousel__header--inline {
    justify-content: flex-start;
}

.ccmg-carousel__title {
    all:         unset;
    display:     block;
    font-family: var(--ccmg-font);
    font-size:   var(--ccmg-title-size);
    font-weight: var(--ccmg-title-weight);
    color:       var(--ccmg-title-color);
    line-height: 1.2;
}

.ccmg-carousel__header--space-between .ccmg-carousel__title {
    flex:      1 1 auto;
    min-width: 0;
}

.ccmg-carousel__header-cta {
    display:                 inline-flex;
    align-items:             center;
    gap:                     var(--ccmg-header-cta-gap);
    padding-block:           4px;
    color:                   var(--ccmg-header-cta-color);
    font-family:             var(--ccmg-font);
    font-size:               var(--ccmg-header-cta-size);
    font-weight:             500;
    line-height:             1;
    text-decoration:         underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset:   0.08em;
    white-space:             nowrap;
    transition:              color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.ccmg-carousel__header-cta:hover {
    color: #b90000;
}

.ccmg-carousel__header-cta:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 2px;
    border-radius:  2px;
}

.ccmg-carousel__header-cta-label {
    display:    block;
    line-height: 1;
}

.ccmg-carousel__header-cta-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           6px;
    height:          12px;
    flex-shrink:     0;
    transition:      transform 0.18s ease;
}

.ccmg-carousel__header-cta-icon svg {
    display: block;
    width:   100%;
    height:  100%;
}

.ccmg-carousel__header-cta:hover .ccmg-carousel__header-cta-icon,
.ccmg-carousel__header-cta:focus-visible .ccmg-carousel__header-cta-icon {
    transform: translateX(1px);
}

/* ---- Viewport + nav ---- */

.ccmg-carousel__controls {
    position:         absolute;
    inset-inline:     var(--ccmg-nav-track-inset);
    top:              var(--ccmg-track-padding-top);
    height:           var(--ccmg-nav-anchor-block-size);
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    pointer-events:   none;
    z-index:          2;
}

.ccmg-carousel__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--ccmg-arrow-size);
    height:          var(--ccmg-arrow-size);
    border:          var(--ccmg-arrow-border);
    border-radius:   50%;
    background:      var(--ccmg-arrow-bg);
    box-shadow:      var(--ccmg-arrow-shadow);
    color:           var(--ccmg-arrow-color);
    pointer-events:  auto;
    cursor:          pointer;
    transition:      transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.ccmg-carousel__btn--prev {
    margin-inline-start: 0;
}

.ccmg-carousel__btn--next {
    margin-inline-end: 0;
}

.ccmg-carousel__btn:hover:not([disabled]) {
    background: var(--ccmg-arrow-bg);
    box-shadow: var(--ccmg-arrow-shadow-hover);
    transform:  translateY(-1px);
}

.ccmg-carousel__btn:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 2px;
}

.ccmg-carousel__btn[disabled],
.ccmg-carousel__btn[aria-disabled="true"] {
    opacity: 0.3;
    cursor:  default;
    pointer-events: none;
}

.ccmg-carousel[data-has-overflow="false"] .ccmg-carousel__controls {
    display: none;
}

.ccmg-carousel[data-has-overflow="false"] .ccmg-carousel__dots {
    display: none;
}

/* ---- Track wrapper ---- */

.ccmg-carousel__track-wrap {
    position:         relative;
    width:            100%;
    min-height:       var(--ccmg-track-height, auto);
    padding-inline:   var(--ccmg-viewport-padding);
    isolation:        isolate;
    /* overflow-x:clip recorta el lateral sin crear scroll container,
       y sin coaccionar overflow-y — evita que el body de las tarjetas
       quede cortado verticalmente en mobile.                          */
    overflow-x:       clip;
    overflow-y:       visible;
}

/* ---- Track (scroll container) ---- */

/*
 * Usamos flexbox en lugar de grid con grid-auto-flow:column porque
 * grid-auto-columns con % no se resuelve correctamente dentro de un
 * contenedor con overflow-x:scroll (dependencia circular de tamaño).
 * Con flex, flex-basis:% se resuelve contra el ancho del flex container,
 * que está correctamente limitado por el padre.
 */
.ccmg-carousel__track {
    display:               flex;
    flex-wrap:             nowrap;
    align-items:           flex-start;
    gap:                   var(--ccmg-gap);
    list-style:            none;
    margin:                0;
    width:                 100%;
    padding:               var(--ccmg-track-padding-top) var(--ccmg-track-edge-padding) var(--ccmg-track-padding-bottom); /* gutters internos reales + aire para sombras */
    min-height:            var(--ccmg-track-height, auto);
    overflow-x:            auto;
    overflow-y:            visible;
    scroll-snap-type:      x mandatory;
    scroll-padding-inline: var(--ccmg-track-edge-padding);
    scroll-behavior:       smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter:      stable;
    scrollbar-width:       thin;
    scrollbar-color:       var(--ccmg-scrollbar-thumb) var(--ccmg-scrollbar-track);
}

.ccmg-carousel__track::-webkit-scrollbar {
    height: var(--ccmg-scrollbar-size);
}

.ccmg-carousel__track::-webkit-scrollbar-track {
    background:    var(--ccmg-scrollbar-track);
    border-radius: var(--ccmg-scrollbar-radius);
}

.ccmg-carousel__track::-webkit-scrollbar-thumb {
    background:       var(--ccmg-scrollbar-thumb);
    border:           1px solid transparent;
    border-radius:    var(--ccmg-scrollbar-radius);
    background-clip:  padding-box;
}

.ccmg-carousel__track::-webkit-scrollbar-thumb:hover {
    background: var(--ccmg-scrollbar-thumb-hover);
}

.ccmg-carousel__track::-webkit-scrollbar-thumb:active {
    background: rgba(18,18,18,0.38);
}

.ccmg-carousel__track::-webkit-scrollbar-corner {
    background: transparent;
}

/* ---- Slide ---- */

.ccmg-carousel__slide {
    display:           block;
    flex:              0 0 var(--ccmg-slide-size);
    height:            auto;
    min-width:         0;
    scroll-snap-align: start;
    scroll-snap-stop:  always;
}

/* ---- Dots ---- */

.ccmg-carousel__dots {
    display:         flex;
    justify-content: center;
    gap:             6px;
    flex-wrap:       wrap;
    min-height:      var(--ccmg-dot-size);
}

.ccmg-carousel__dot {
    display:          block;
    width:            var(--ccmg-dot-size);
    height:           var(--ccmg-dot-size);
    border:           none;
    border-radius:    50%;
    padding:          0;
    background:       var(--ccmg-dot-color);
    cursor:           pointer;
    transition:       background 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.ccmg-carousel__dot:hover {
    background: var(--ccmg-dot-active);
    transform:  scale(1.25);
}

.ccmg-carousel__dot.is-active {
    background: var(--ccmg-dot-active);
    transform:  scale(1.3);
}

.ccmg-carousel__dot:focus-visible {
    outline:        2px solid var(--ccmg-dot-active);
    outline-offset: 2px;
}

/* ---- Responsive breakpoints ---- */

@media (max-width: 1023px) {
    .ccmg-carousel {
        --ccmg-viewport-padding: 0px;
        --ccmg-gap:              14px;
        --ccmg-peek:             clamp(calc(var(--ccmg-peek-tablet) * 0.6429), 10vw, var(--ccmg-peek-tablet));
        --ccmg-arrow-size:       38px;
        --ccmg-header-cta-size:  15px;
        --ccmg-title-size:       18px;
    }
}

@media (max-width: 599px) {
    .ccmg-carousel {
        --ccmg-viewport-padding: 0px;
        --ccmg-gap:              8px;
        --ccmg-peek:             clamp(calc(var(--ccmg-peek-mobile) * 0.6786), 16vw, var(--ccmg-peek-mobile));
        --ccmg-arrow-size:       36px;
        --ccmg-header-cta-size:  14px;
        --ccmg-title-size:       16px;
        --ccmg-scrollbar-size:   5px;
        --ccmg-scrollbar-gap:    4px;
        gap:                     10px;
    }

    .ccmg-carousel__track {
        scroll-snap-type: x proximity;
    }

    .ccmg-carousel__slide {
        scroll-snap-stop: normal;
    }

    .ccmg-carousel__controls {
        display: none;
    }

    .ccmg-carousel__dots {
        gap: 8px;
    }
}

/* ---- Skeleton loading — solo recently_viewed con fallback activo ---- */

@keyframes ccmg-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Durante la carga: bloquear interacción, ocultar flechas/dots (fallback ya no es válido) */
.ccmg-carousel.is-loading-history {
    pointer-events: none;
}

.ccmg-carousel.is-loading-history .ccmg-carousel__btn,
.ccmg-carousel.is-loading-history .ccmg-carousel__dots {
    visibility: hidden;
}

/* Tarjeta skeleton: misma estructura visual que .ccmg-card */
.ccmg-card-skeleton {
    --ccmg-sk-base:   #ebebeb;
    --ccmg-sk-shine:  #f7f7f7;

    display:          flex;
    flex-direction:   column;
    width:            100%;
    border-radius:    var(--ccmg-card-radius, 8px);
    overflow:         hidden;
    border:           1px solid rgba(0,0,0,0.06);
}

/* Zona imagen: reutiliza el mismo contrato de layout de la card real */
.ccmg-card-skeleton__img {
    width:            100%;
    aspect-ratio:     var(--ccmg-card-nav-anchor-aspect-ratio);
    background:       linear-gradient(
                          90deg,
                          var(--ccmg-sk-base)  0%,
                          var(--ccmg-sk-shine) 50%,
                          var(--ccmg-sk-base)  100%
                      );
    background-size:  200% 100%;
    animation:        ccmg-shimmer 1.4s ease-in-out infinite;
}

/* Cuerpo skeleton */
.ccmg-card-skeleton__body {
    display:          flex;
    flex-direction:   column;
    gap:              8px;
    padding:          12px;
    background:       var(--ccmg-sk-base);
}

/* Líneas de texto placeholder */
.ccmg-card-skeleton__line {
    border-radius:    4px;
    height:           13px;
    background:       linear-gradient(
                          90deg,
                          var(--ccmg-sk-base)  0%,
                          var(--ccmg-sk-shine) 50%,
                          var(--ccmg-sk-base)  100%
                      );
    background-size:  200% 100%;
    animation:        ccmg-shimmer 1.4s ease-in-out infinite;
}

.ccmg-card-skeleton__line--title {
    width:            82%;
}

.ccmg-card-skeleton__line--subtitle {
    width:            55%;
    animation-delay:  0.15s;
}

/* ---- Accesibilidad: prefiere movimiento reducido ---- */

@media (prefers-reduced-motion: reduce) {
    .ccmg-carousel__track {
        scroll-behavior:  auto;
        scroll-snap-type: none;
    }

    .ccmg-carousel__btn,
    .ccmg-carousel__dot {
        transition: none;
    }

    /* Sin shimmer: placeholder estático */
    .ccmg-card-skeleton__img,
    .ccmg-card-skeleton__line {
        animation: none;
    }
}
/* ccmg-hojas-juntas: ccmg-product-video.css */
.ccmg-product-video {
    --ccmg-video-play-size: 72px;
    --ccmg-video-overlay-opacity: 0.35;
    --ccmg-video-title-gap: 12px;
    --ccmg-video-measured-height: auto;
    --ccmg-title-size: clamp(20px, 1.45vw, 24px);
    --ccmg-title-weight: 500;
    --ccmg-title-color: rgba(0, 0, 0, 0.92);
    --ccmg-font: "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: var(--ccmg-video-measured-height, auto);
}

/*
 * Defensa para Elementor/mobile/iOS:
 * el widget puede medirse antes de que el aspect-ratio del stage termine
 * de asentarse. Permitimos que los wrappers externos crezcan sin recortar
 * y dejamos que JS propague una min-height ya estabilizada.
 */
.elementor-widget-ccmg_product_video,
.elementor-widget-ccmg_product_video .elementor-widget-container {
    display: block;
    height: auto !important;
    min-height: var(--ccmg-video-measured-height, auto);
    overflow: visible;
}

.elementor-widget-ccmg_product_video .ccmg-product-video {
    height: auto;
    min-height: var(--ccmg-video-measured-height, auto);
}

.ccmg-product-video__header {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: var(--ccmg-video-title-gap);
    text-align: center;
}

.ccmg-product-video__title {
    all: unset;
    display: block;
    font-family: var(--ccmg-font);
    font-size: var(--ccmg-title-size);
    font-weight: var(--ccmg-title-weight);
    color: var(--ccmg-title-color);
    line-height: 1.2;
}

.ccmg-product-video__stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 18px;
    background: #121212;
    box-shadow: 0 20px 48px rgba(18, 18, 18, 0.16);
}

.ccmg-product-video__stage > .ccmg-product-video__trigger,
.ccmg-product-video__stage > .ccmg-product-video__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ccmg-product-video__frame,
.ccmg-product-video__frame iframe {
    width: 100%;
    height: 100%;
}

.ccmg-product-video__trigger {
    display: block;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    position: relative;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.ccmg-product-video__poster {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #121212;
}

.ccmg-product-video__poster-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

.ccmg-product-video__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ccmg-product-video__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.38) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%);
    opacity: var(--ccmg-video-overlay-opacity);
    transition: opacity 180ms ease;
}

.ccmg-product-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: var(--ccmg-video-play-size);
    height: var(--ccmg-video-play-size);
    color: #545454;
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    isolation: isolate;
}

.ccmg-product-video__play svg {
    position: relative;
    z-index: 2;
    width: 39%;
    height: 40%;
}

.ccmg-product-video--play-circle-dark .ccmg-product-video__play {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.4),
        0 10px 28px rgba(0, 0, 0, 0.16);
}

.ccmg-product-video--play-circle-dark .ccmg-product-video__play::before,
.ccmg-product-video--play-circle-light .ccmg-product-video__play::before {
    content: "";
    position: absolute;
    inset: 10%;
    z-index: 1;
    border-radius: 999px;
}

.ccmg-product-video--play-circle-dark .ccmg-product-video__play::before {
    background: #fff;
}

.ccmg-product-video--play-circle-light .ccmg-product-video__play {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        0 10px 24px rgba(0, 0, 0, 0.14);
    color: #2a2a2a;
}

.ccmg-product-video--play-circle-light .ccmg-product-video__play::before {
    background: rgba(255, 255, 255, 0.96);
}

.ccmg-product-video--play-minimal .ccmg-product-video__play {
    background: transparent;
    color: #fff;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.ccmg-product-video--no-overlay .ccmg-product-video__overlay,
.ccmg-product-video--no-play .ccmg-product-video__play {
    display: none;
}

.ccmg-product-video__trigger:hover .ccmg-product-video__play,
.ccmg-product-video__trigger:focus-visible .ccmg-product-video__play {
    transform: translate(-50%, -50%) scale(1.06);
}

.ccmg-product-video--play-circle-dark .ccmg-product-video__trigger:hover .ccmg-product-video__play,
.ccmg-product-video--play-circle-dark .ccmg-product-video__trigger:focus-visible .ccmg-product-video__play {
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.52),
        0 14px 32px rgba(0, 0, 0, 0.18);
}

.ccmg-product-video__trigger:hover .ccmg-product-video__overlay,
.ccmg-product-video__trigger:focus-visible .ccmg-product-video__overlay {
    opacity: calc(var(--ccmg-video-overlay-opacity) + 0.08);
}

.ccmg-product-video__trigger:focus-visible {
    outline: 2px solid #111;
    outline-offset: 6px;
    border-radius: 20px;
}

.ccmg-product-video__frame {
    overflow: hidden;
    border-radius: inherit;
    background: #000;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.ccmg-product-video__frame iframe {
    border: 0;
}

.ccmg-product-video.is-playing .ccmg-product-video__stage > .ccmg-product-video__frame {
    opacity: 1;
    pointer-events: auto;
}

.ccmg-product-video.is-playing .ccmg-product-video__stage > .ccmg-product-video__trigger {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ccmg-product-video__lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
}

.ccmg-product-video__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.78);
    backdrop-filter: blur(4px);
}

.ccmg-product-video__dialog {
    position: relative;
    z-index: 1;
    width: min(1000px, calc(100vw - 32px));
    margin: min(8vh, 64px) auto 0;
}

.ccmg-product-video__frame--lightbox {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    border-radius: 20px;
    aspect-ratio: 16 / 9;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}

.ccmg-product-video__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #111;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    font-size: 28px;
    line-height: 1;
}

body.ccmg-product-video-lightbox-open {
    overflow: hidden;
}

@media (min-width: 768px) {
    .ccmg-product-video__stage {
        width: min(100%, 800px);
        max-height: 450px;
    }
}

@media (max-width: 1023px) {
    .ccmg-product-video {
        --ccmg-title-size: 18px;
    }
}

@media (max-width: 767px) {
    .ccmg-product-video__stage,
    .ccmg-product-video__poster,
    .ccmg-product-video__frame {
        border-radius: 14px;
    }

    .ccmg-product-video__dialog {
        width: calc(100vw - 20px);
        margin-top: 72px;
    }

    .ccmg-product-video__close {
        top: -10px;
        right: -4px;
    }

    .elementor-25425 .elementor-element.elementor-element-31aeaa5 {
        --padding-top: 8px !important;
        --padding-bottom: 8px !important;
        --padding-left: 10px !important;
        --padding-right: 10px !important;
    }
}

@media (max-width: 599px) {
    .ccmg-product-video {
        --ccmg-title-size: 16px;
        --ccmg-video-title-gap: 10px;
    }
}

/*
 * Video propio (8-oct): vertical, con la proporcion de su poster (viene en
 * el HTML: el alto existe antes de que llegue la imagen, CLS 0). Un 10 % mas
 * pequeno que el ancho disponible (dueño, 8-oct): 90 % del ancho y, desde
 * 768, como mucho 72vh de alto, sin scroll dentro del video. Centrado.
 * El <video> y el boton de sonido los crea el JS.
 */
/*
 * Ancho definido para el widget: en las columnas de Elementor con wrap
 * (movil) Chrome y WebKit median el widget sin el alto de la caja vertical
 * (231 de 653 px) y el video quedaba encima de Preguntas. Lo mismo que el
 * carrusel ccmg (ccmg-carousel.css). Ya ocupaba todo el ancho: no cambia nada mas.
 */
.elementor-widget-ccmg_product_video {
    width: 100%;
}

.ccmg-product-video--propio .ccmg-product-video__stage {
    width: 90%;
    max-height: none;
    aspect-ratio: var(--ccmg-video-ancho, 9) / var(--ccmg-video-alto, 16);
}

@media (min-width: 768px) {
    .ccmg-product-video--propio .ccmg-product-video__stage {
        width: min(90%, calc(72vh * var(--ccmg-video-ancho, 9) / var(--ccmg-video-alto, 16)));
    }
}

.ccmg-product-video__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Arranque solo, mudo: todo el video invita a tocar para oirlo. El boton va
 * ARRIBA: abajo lo tapan la barra fija de "Agregar al carrito" y la burbuja
 * de WhatsApp cuando el video toca el borde de la pantalla. */
.ccmg-product-video--propio.is-muted .ccmg-product-video__frame {
    cursor: pointer;
}

/* Clase repetida: el reset [type=button] del tema empata con una clase y gana por orden de carga. */
.ccmg-product-video__sonido.ccmg-product-video__sonido,
.ccmg-product-video__sonido.ccmg-product-video__sonido:hover,
.ccmg-product-video__sonido.ccmg-product-video__sonido:focus {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 3;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    font: 500 14px/1 var(--ccmg-font);
    white-space: nowrap;
    cursor: pointer;
    transform: translateX(-50%);
}

.ccmg-product-video__sonido svg {
    width: 20px;
    height: 20px;
}

.ccmg-product-video--propio.is-muted .ccmg-product-video__sonido.ccmg-product-video__sonido {
    display: inline-flex;
}

/*
 * "Ver mas videos" (dueño, 9-oct, con imagen de referencia): barra esmerilada
 * DENTRO del video, abajo, con texto a la izquierda y un boton oscuro a la
 * derecha; toda la barra es el enlace a su watch. Con sonido y reproduciendo
 * se aparta para dejar ver los controles; en pausa o al terminar vuelve.
 * Clase repetida por el reset de enlaces del tema.
 */
.ccmg-product-video__mas.ccmg-product-video__mas,
.ccmg-product-video__mas.ccmg-product-video__mas:visited,
.ccmg-product-video__mas.ccmg-product-video__mas:hover,
.ccmg-product-video__mas.ccmg-product-video__mas:focus {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    color: #111;
    text-decoration: none;
    transition: opacity 200ms ease;
}

.ccmg-product-video__mas-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.ccmg-product-video__mas-texto strong {
    font: 600 15px/1.2 var(--ccmg-font);
    color: #111;
}

.ccmg-product-video__mas-texto span {
    overflow: hidden;
    font: 400 12px/1.3 var(--ccmg-font);
    color: #555;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ccmg-product-video__mas-boton {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, #3a3a3a 0%, #111 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    color: #fff;
    font: 500 14px/1 var(--ccmg-font);
    white-space: nowrap;
    transition: background-color 160ms ease;
}

.ccmg-product-video__mas-boton svg {
    width: 16px;
    height: 16px;
}

.ccmg-product-video__mas:hover .ccmg-product-video__mas-boton,
.ccmg-product-video__mas:focus-visible .ccmg-product-video__mas-boton {
    background: #e60000;
}

.ccmg-product-video--propio.is-playing:not(.is-muted):not(.is-detenido) .ccmg-product-video__mas.ccmg-product-video__mas {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ccmg-product-video__mas.ccmg-product-video__mas,
    .ccmg-product-video__mas-boton {
        transition: none;
    }
}
/* ccmg-hojas-juntas: ccmg-product-grid.css */
/* ============================================================
   CCM Product Grid
   SSR-first grid para reutilizar la card existente de producto
   ============================================================ */

.ccmg-product-grid {
    --ccmg-grid-gap: 24px;
    --ccmg-grid-columns-desktop: 4;
    --ccmg-grid-columns-tablet: 3;
    --ccmg-grid-columns-mobile: 2;
    --ccmg-grid-measured-height: auto;
    --ccmg-grid-meta-color: rgba(25, 24, 24, 0.72);
    --ccmg-grid-border: rgba(25, 24, 24, 0.12);
    --ccmg-grid-surface-bg: #ffffff;
    --ccmg-grid-surface-muted: rgba(25, 24, 24, 0.04);
    --ccmg-grid-surface-border: rgba(25, 24, 24, 0.08);
    --ccmg-grid-button-bg: #191818;
    --ccmg-grid-button-color: #ffffff;
    --ccmg-grid-button-bg-hover: #000000;
    --ccmg-grid-control-bg: #ffffff;
    --ccmg-grid-control-bg-hover: #f6f6f6;
    --ccmg-grid-control-color: #191818;
    --ccmg-grid-focus-outline: #191818;
    --ccmg-grid-focus-ring: rgba(25, 24, 24, 0.14);
    --ccmg-grid-error-bg: rgba(180, 35, 24, 0.08);
    --ccmg-grid-error-border: rgba(180, 35, 24, 0.18);

    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--ccmg-grid-measured-height, auto);
    color: #191818;
    position: relative;
    isolation: isolate;
}

.ccmg-product-grid,
.ccmg-product-grid * {
    box-sizing: border-box;
}

/*
 * Defensa para Elementor/mobile/iOS:
 * el grid puede crecer después del primer render por auto-fill, load more
 * o reflujo tardío. Permitimos que los wrappers externos acompañen ese alto
 * y dejamos que JS propague una min-height estabilizada.
 */
.elementor-widget-ccmg_product_grid,
.elementor-widget-ccmg_product_grid .elementor-widget-container,
.elementor-widget-ccmg_product_grid .ccmg-product-grid-host {
    display: block;
    height: auto !important;
    min-height: var(--ccmg-grid-measured-height, auto);
    overflow: visible;
}

.elementor-widget-ccmg_product_grid .ccmg-product-grid {
    height: auto;
    min-height: var(--ccmg-grid-measured-height, auto);
}

.ccmg-product-grid__meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 18px;
}

.ccmg-product-grid__title {
    margin: 0;
    color: #191818;
    font-family: "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(16px, 1.45vw, 24px);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.ccmg-product-grid__result-count {
    color: var(--ccmg-grid-meta-color);
    font-family: "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.ccmg-product-grid__feedback {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 42px;
    max-width: min(100%, 560px);
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--ccmg-grid-surface-border);
    border-radius: 16px;
    background: var(--ccmg-grid-surface-muted);
    color: var(--ccmg-grid-meta-color);
    font-family: "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.ccmg-product-grid__feedback[hidden] {
    display: none !important;
}

.ccmg-product-grid__feedback.is-error {
    color: #b42318;
    background: var(--ccmg-grid-error-bg);
    border-color: var(--ccmg-grid-error-border);
}

.ccmg-product-grid__feedback.is-loading {
    color: var(--ccmg-grid-meta-color);
}

.ccmg-product-grid__body {
    position: relative;
    min-width: 0;
}

.ccmg-product-grid ul.products.ccmg-product-grid__list {
    display: grid !important;
    grid-template-columns: repeat(var(--ccmg-grid-columns-mobile), minmax(0, 1fr));
    gap: var(--ccmg-grid-gap);
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ccmg-product-grid ul.products.ccmg-product-grid__list::before,
.ccmg-product-grid ul.products.ccmg-product-grid__list::after {
    display: none !important;
}

.ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    clear: none !important;
    list-style: none !important;
    position: relative;
}

.ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item::before,
.ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item::after {
    display: none !important;
    content: none !important;
}

.ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card {
    height: 100%;
    width: 100%;
    margin: 0;
    color: inherit;
    text-decoration: none;
}

.woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__img-link,
.woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__img-link {
    text-decoration: none;
}

.woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__img,
.woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__img {
    margin: 0;
    box-shadow: none;
    border: 0;
}

.woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__body-link,
.woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__body-link:hover,
.woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__body-link:focus,
.woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__body-link,
.woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__body-link:hover,
.woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__body-link:focus {
    color: inherit;
    text-decoration: none;
}

.woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item h3.ccmg-card__title,
.woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item h3.ccmg-card__title {
    all: unset;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: var(--ccmg-card-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ccmg-card-title-color);
    max-height: 28px;
}

.woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__price-current,
.woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__price-current,
.woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__price-regular,
.woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__price-regular,
.woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__shipping,
.woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item .ccmg-card__shipping {
    text-transform: none;
    letter-spacing: 0;
}

.ccmg-product-grid__empty,
.ccmg-product-grid__end {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 42px;
    max-width: min(100%, 560px);
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--ccmg-grid-surface-border);
    border-radius: 16px;
    background: var(--ccmg-grid-surface-muted);
    color: var(--ccmg-grid-meta-color);
    font-family: "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.35;
}

.ccmg-product-grid__footer .ccmg-product-grid__end {
    justify-content: center;
    text-align: center;
}

.ccmg-product-grid__footer .ccmg-product-grid__end:focus,
.ccmg-product-grid__footer .ccmg-product-grid__end:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ccmg-grid-focus-ring);
}

.ccmg-product-grid__footer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ccmg-product-grid__progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.ccmg-product-grid__sentinel {
    width: 100%;
    height: 1px;
}

.ccmg-product-grid__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--ccmg-grid-surface-border);
    border-radius: 999px;
    background: var(--ccmg-grid-surface-muted);
    color: var(--ccmg-grid-meta-color);
    font-family: "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.ccmg-product-grid__status[hidden],
.ccmg-product-grid__load-more[hidden] {
    display: none !important;
}

.woocommerce .ccmg-product-grid a.ccmg-product-grid__load-more.button,
.woocommerce .ccmg-product-grid a.ccmg-product-grid__load-more.button:hover,
.woocommerce .ccmg-product-grid a.ccmg-product-grid__load-more.button:focus,
.woocommerce .ccmg-product-grid a.ccmg-product-grid__load-more.button:active,
.woocommerce .ccmg-product-grid a.ccmg-product-grid__load-more.button:visited,
.woocommerce-page .ccmg-product-grid a.ccmg-product-grid__load-more.button,
.woocommerce-page .ccmg-product-grid a.ccmg-product-grid__load-more.button:hover,
.woocommerce-page .ccmg-product-grid a.ccmg-product-grid__load-more.button:focus,
.woocommerce-page .ccmg-product-grid a.ccmg-product-grid__load-more.button:active,
.woocommerce-page .ccmg-product-grid a.ccmg-product-grid__load-more.button:visited {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid var(--ccmg-grid-button-bg);
    border-radius: 999px;
    background: var(--ccmg-grid-button-bg);
    color: var(--ccmg-grid-button-color);
    font-family: "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease,
        opacity 0.16s ease;
}

.woocommerce .ccmg-product-grid a.ccmg-product-grid__load-more.button:hover,
.woocommerce-page .ccmg-product-grid a.ccmg-product-grid__load-more.button:hover {
    background: var(--ccmg-grid-button-bg-hover);
    border-color: var(--ccmg-grid-button-bg-hover);
    color: var(--ccmg-grid-button-color);
}

.woocommerce .ccmg-product-grid a.ccmg-product-grid__load-more.button:focus-visible,
.woocommerce-page .ccmg-product-grid a.ccmg-product-grid__load-more.button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ccmg-grid-focus-ring);
}

.woocommerce .ccmg-product-grid a.ccmg-product-grid__load-more.button[aria-busy="true"],
.woocommerce-page .ccmg-product-grid a.ccmg-product-grid__load-more.button[aria-busy="true"] {
    cursor: wait;
}

.ccmg-product-grid__load-more.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

.ccmg-product-grid__footer--auto_load {
    min-height: 1px;
}

.woocommerce .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination,
.woocommerce-page .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    float: none;
}

.woocommerce .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination::before,
.woocommerce .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination::after,
.woocommerce-page .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination::before,
.woocommerce-page .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination::after {
    display: none;
    content: none;
}

.ccmg-product-grid__pagination ul.page-numbers.ccmg-product-grid__page-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

.ccmg-product-grid__pagination .ccmg-product-grid__page-item {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.woocommerce .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination .ccmg-product-grid__page-link,
.woocommerce-page .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination .ccmg-product-grid__page-link {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ccmg-grid-border);
    border-radius: 999px;
    background: var(--ccmg-grid-control-bg);
    color: var(--ccmg-grid-control-color);
    font-family: "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    float: none;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease;
}

.woocommerce .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination a.ccmg-product-grid__page-link,
.woocommerce-page .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination a.ccmg-product-grid__page-link {
    cursor: pointer;
}

.woocommerce .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination a.ccmg-product-grid__page-link:hover,
.woocommerce-page .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination a.ccmg-product-grid__page-link:hover {
    background: var(--ccmg-grid-control-bg-hover);
    border-color: rgba(25, 24, 24, 0.2);
    color: var(--ccmg-grid-control-color);
}

.woocommerce .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination a.ccmg-product-grid__page-link:focus-visible,
.woocommerce-page .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination a.ccmg-product-grid__page-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ccmg-grid-focus-ring);
}

.ccmg-product-grid__pagination .ccmg-product-grid__page-link--current {
    border-color: #191818;
    background: #191818;
    color: #ffffff;
}

.ccmg-product-grid[aria-busy="true"] .ccmg-product-grid__pagination a.ccmg-product-grid__page-link {
    pointer-events: none;
    opacity: 0.72;
}

.ccmg-product-grid--busy .ccmg-product-grid__footer {
    cursor: progress;
}

.ccmg-product-grid--complete .ccmg-product-grid__end {
    color: #191818;
}

.ccmg-product-grid--error .ccmg-product-grid__feedback {
    color: #b42318;
}

.ccmg-product-grid--empty .ccmg-product-grid__body {
    min-height: 0;
}

@container card (max-width: 130px) {
    .woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item h3.ccmg-card__title,
    .woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item h3.ccmg-card__title {
        font-size: 11px;
        line-height: 12px;
        max-height: 24px;
    }
}

@container card (min-width: 131px) and (max-width: 180px) {
    .woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item h3.ccmg-card__title,
    .woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item h3.ccmg-card__title {
        font-size: 12px;
        line-height: 13px;
        max-height: 26px;
    }
}

@media (min-width: 768px) {
    .ccmg-product-grid ul.products.ccmg-product-grid__list {
        grid-template-columns: repeat(var(--ccmg-grid-columns-tablet), minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ccmg-product-grid ul.products.ccmg-product-grid__list {
        grid-template-columns: repeat(var(--ccmg-grid-columns-desktop), minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .ccmg-product-grid {
        --ccmg-grid-gap: 18px;
    }

    .ccmg-product-grid__pagination ul.page-numbers.ccmg-product-grid__page-list {
        gap: 6px;
    }

    .woocommerce .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination .ccmg-product-grid__page-link,
    .woocommerce-page .ccmg-product-grid nav.woocommerce-pagination.ccmg-product-grid__pagination .ccmg-product-grid__page-link {
        min-width: 38px;
        min-height: 38px;
        padding: 0 12px;
    }

    .woocommerce .ccmg-product-grid a.ccmg-product-grid__load-more.button,
    .woocommerce-page .ccmg-product-grid a.ccmg-product-grid__load-more.button {
        min-height: 42px;
        padding: 11px 18px;
    }
}

@media (max-width: 479px) {
    .woocommerce .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item h3.ccmg-card__title,
    .woocommerce-page .ccmg-product-grid ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item h3.ccmg-card__title {
        font-size: 13px;
        line-height: 14px;
        max-height: 26px;
    }
}

/* Elementor custom CSS in the archive template is styling all inputs as pills.
   Restore Woo Product Filter checkbox/radio styles with higher specificity. */
.elementor-kit-7 .wpfMainWrapper .wpfFilterWrapper input[type="checkbox"],
.elementor-kit-7 .wpfMainWrapper .wpfFilterWrapper input[type="radio"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin-right: 0.3rem !important;
    padding: 0 !important;
    border: 1px solid #e0e0e0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    vertical-align: top !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.elementor-kit-7 .wpfMainWrapper .wpfFilterWrapper input[type="radio"] {
    border-radius: 50% !important;
}

.elementor-kit-7 .wpfMainWrapper .wpfFilterWrapper input[type="radio"]::before,
.elementor-kit-7 .wpfMainWrapper .wpfFilterWrapper input[type="checkbox"]::before {
    display: none !important;
}
/* ccmg-hojas-juntas: ccmg-brands-strip.css */
/**
 * CCMG Brands Strip
 *
 * Estilo de la tira horizontal de marcas (pills/chips).
 * Scroll nativo CSS: no requiere JavaScript.
 *
 * Custom properties controlables desde Elementor:
 *   --ccmg-bs-gap          Gap entre pills (default: 10px)
 *   --ccmg-bs-bg           Fondo de cada pill (default: #1a1a1a)
 *   --ccmg-bs-bg-hover     Fondo al hover (default: #333333)
 *   --ccmg-bs-color        Color de texto (default: #ffffff)
 *   --ccmg-bs-radius       Border-radius (default: 9999px = cápsula completa)
 *   --ccmg-bs-padding-v    Padding vertical (default: 0.45em)
 *   --ccmg-bs-padding-h    Padding horizontal (default: 1.1em)
 *   --ccmg-bs-font-size    Tamaño de fuente (default: 0.875rem)
 */

/* ── Contenedor raíz ────────────────────────────────────────────── */
.ccmg-brands-strip {
	--ccmg-bs-gap:        10px;
	--ccmg-bs-bg:         #1a1a1a;
	--ccmg-bs-bg-hover:   #333333;
	--ccmg-bs-color:      #ffffff;
	--ccmg-bs-radius:     9999px;
	--ccmg-bs-padding-v:  0.45em;
	--ccmg-bs-padding-h:  1.1em;
	--ccmg-bs-font-size:  0.875rem;

	position: relative;
}

/* ── Track de scroll horizontal ─────────────────────────────────── */
.ccmg-brands-strip__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var( --ccmg-bs-gap );

	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	/* Scroll suave */
	scroll-behavior: smooth;

	/* Snap suave: cada pill se ancla al inicio del track */
	scroll-snap-type: x mandatory;

	/* Padding derecho para efecto "peek" del siguiente item */
	padding-right: 2.5rem;
	/* Padding inferior para evitar que la scrollbar tape contenido en sistemas que la muestran */
	padding-bottom: 2px;

	/* Ocultar scrollbar visualmente (el scroll sigue funcionando) */
	scrollbar-width: none; /* Firefox */
}

.ccmg-brands-strip__track::-webkit-scrollbar {
	display: none; /* Chrome, Safari */
}

/* ── Pill individual ────────────────────────────────────────────── */
.ccmg-brands-strip__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;

	flex: 0 0 auto; /* no crecer, no encoger, tamaño según contenido */

	padding: var( --ccmg-bs-padding-v ) var( --ccmg-bs-padding-h );
	background: var( --ccmg-bs-bg );
	color: var( --ccmg-bs-color );
	border-radius: var( --ccmg-bs-radius );

	text-decoration: none;
	white-space: nowrap;
	font-size: var( --ccmg-bs-font-size );
	font-weight: 500;
	line-height: 1.4;

	/* Snap al inicio del pill cuando el usuario hace scroll */
	scroll-snap-align: start;

	transition: background-color 0.18s ease, color 0.18s ease;
	cursor: pointer;
}

.ccmg-brands-strip__pill:hover {
	background: var( --ccmg-bs-bg-hover );
	color: var( --ccmg-bs-color );
	text-decoration: none;
}

.ccmg-brands-strip__pill:focus-visible {
	outline: 2px solid var( --ccmg-bs-bg-hover );
	outline-offset: 3px;
}

/* ── Nombre del término ─────────────────────────────────────────── */
.ccmg-brands-strip__name {
	/* Hereda fuente y color del pill. */
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	.ccmg-brands-strip__pill {
		/* Reparto vertical pedido por el dueño: más aire arriba que abajo.
		   El texto de las marcas va en mayúsculas y sin descendentes, así que
		   ópticamente se asienta mejor descentrado hacia arriba. */
		padding: 5px 6px 1px 6px;
		font-size: 9px;
	}
}

/* ── Logo de la marca (opcional, activable desde el widget) ─────── */
.ccmg-brands-strip__logo {
	display: block;
	width: auto;
	height: 1.2em;      /* relativo al font-size del pill */
	max-width: 60px;
	object-fit: contain;
	filter: brightness( 0 ) invert( 1 ); /* invertir a blanco sobre fondo oscuro */
	flex-shrink: 0;
}