/* ============================================================
   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-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-accent) !important;
    border-radius:   4px !important;
    background:      transparent !important;
    color:           var(--ccmg-atc-accent) !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.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: rgba(230, 0, 0, 0.03) !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 > :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;
    }
}