/*Woocommerce Clean Styles*/
#commercegurus-pdp-gallery-wrapper {
    z-index: 0;
}

.single-product div.product .variations_button {
    padding-top: 0 !important;
}

.single-product div.product form.cart {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

#codFormModal {
    z-index: 999999;
}

.cod-woocommerce-cart-table {
    width: 100% !important;
}

.cod-modal-content img {
    max-width: 100%;
    width: 100%;
    border-radius: 5px;
}

.cod-modal-content .form-group label {
    margin-bottom: 0px;
    margin-top: .7rem;
    text-align: left;
    font-weight: 500;
}

.variations_form table.variations {
    margin-bottom: 0px !important;
}

.variations_form table.variations tr {
    margin: 0px;
}

#codFormModal input:focus {
    background-repeat: no-repeat;
    width: 100%;
}

.cod-modal-content input,
.cod-modal-content select,
.cod-modal-content textarea {
    margin: 6px 0;
    padding: 6px 15px !important;
    border-radius: 3px !important;
    border: 1px solid silver !important;
    background-color: #fff !important;
    color: #000 !important;
    height: 47px;
    font-size: 0.95em;
    width: 100%;
    box-sizing: border-box;
    background-size: 15px !important;
    background-position: 8px center !important;
    padding-left: calc(22px + 15px) !important;
}

/*Variation Plugins*/
.variations_form table.variations td.woo-variation-items-wrapper {
    display: flex;
}

a.reset_variations {
    margin-left: 5px;
}

/*Loader*/
.loader_container {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999999;
}

/* Modal styles */

/*Container*/
.cod-modal-content {
    color: #000;
    max-width: 520px;
    width: 100%;
    position: relative;
    border-radius: 9px;
    box-shadow: 0 10px 20px 0 rgb(0, 0, 0, 0.2);
    border: 0px solid rgba(0, 0, 0, 1);
}

/*Tables*/
.cod-woocommerce-cart-table {
    border-collapse: separate;
}

button.remove-product {
    border: 0px;
    padding: 0;
    height: 19px;
    width: 19px;
    margin: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #fff0 !important;
}

button.remove-product:hover {
    background: #fff0;
}

.cod-product-remove {
    text-align: right;
}

.cod-woocommerce-cart-table {
    margin: 0 0 10px;
}

.cod_table,
.cod-woocommerce-cart-table {
    padding: 8px 12px 5px;
    background-color: #f3f3f3;
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 10px;
    border: 1px solid #ebebeb;
}

.cod_table .woocommerce-Price-amount {
    font-weight: 700;
}

.cod_td {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.cod_td.total {
    border-top: 1px solid #c7c7c7;
    margin-top: 6px;
    padding-top: 5px;
}

/*Cart*/
.cod-cart td {
    vertical-align: middle;
    padding: 5px;
    border: 0px;
}

td.cod-product-img {
    min-width: 50px;
}

.cod-woocommerce-cart-table tr td {
    background-color: transparent !important;
}

.cod-product-img {
    max-width: 37px;
    position: relative;
}

.cod-product-img img {
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 5px;
}

.cod-cart-quantity {
    position: absolute;
    top: 0;
    width: 21px;
    height: 21px;
    display: flex;
    color: #fff;
    background: #000;
    line-height: 0;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    border-radius: 50%;
    padding-bottom: 2px;
}

/*Modal*/
.cod-modal h3 {
    font-weight: 600;
    margin: 10px 0px;
}

.cod-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1000;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

.cod-modal-content {
    background-color: #fefefe;
    margin: 2% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}

.cod-modal-close {
    position: absolute;
    color: #aaa;
    right: 20px;
    top: 20px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.cod-modal-close:hover,
.cod-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width:580px) {
    .cod-modal-content {
        width: 90%;
    }
}

@media (max-width:480px) {
    .cod-modal-content {
        width: fit-content;
        min-width: 88%;
    }

    .cod-cart .cod-product-name {
        font-size: 13px;
        font-weight: 400;
    }
}

/* Nombre y apellido en una sola fila */
#codFormModal .cyco-name-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0;
}
#codFormModal .cyco-name-row > .form-group {
    min-width: 0;
    margin-bottom: 0;
}
#codFormModal .cyco-name-row .form-group input {
    max-width: 100%;
}
@media screen and (max-width: 520px) {
    #codFormModal .cyco-name-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/*Form*/
.cod-modal-content .form-group {
    display: flex;
    flex-direction: column;
}

.cod_hide {
    display: none;
}

.cod-modal-content input,
.cod-modal-content select {
    margin: 6px 0px;
    padding: 6px 15px !important;
    border-radius: 3px !important;
    border: 1px solid silver !important;
    background-color: #fff !important;
    color: #000 !important;
    display: block;
    margin-bottom: 0;
    height: 47px;
    font-size: .95em;
    box-sizing: border-box;
    width: 100%;
    background-size: 15px !important;
    background-repeat: no-repeat;
    background-position: 8px center !important;
    padding-left: calc(22px + 15px) !important;
}

.cod-modal-content .cod_terms label {
    display: flex !important;
    align-items: center !important;
    gap: 5px;
}

input[type=checkbox],
input[type=radio] {
    width: auto !important;
    padding: 0px !important;
}

.cod-modal-content input:focus {
    outline: none;
}

.cod-modal-content input .form-group label {
    margin-top: 5px;
}

.cod-modal-content #shipping-methods label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cod-modal-content .shipping-method input {
    height: 20px;
    margin: 0 !important;
}

.cod_terms label {
    display: inline;
}

.cod_terms {
    margin: 5px 0px;
}

.cod_terms input {
    height: 20px;
    float: left;
    margin-top: 0px;
    margin-right: 5px;
}

.cod-modal-content .shipping-method {
    margin: 4px 0px;
    padding: 2px 14px;
    border-radius: 6px;
    border: 1px solid silver;
    background-color: #fff;
}

#codFormModal #checkout_form #shipping-methods label {
    margin: 0px;
}

.cod-form-group-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.cod-form-group-row label {
    margin: 0px !important;
    font-size: 15px;
}

.cod-form-group-row input,
.cod-form-group-row select,
.cod-form-group-row textarea {
    max-width: 75%;
}

.cod_required_input {
    color: #ff0000;
    display: inline-block;
    margin-left: 2px;
}

@media screen and (max-width: 520px) {
    .cod-form-group-row label {
        font-size: 13px;
    }

    .cod-form-group-row input,
    .cod-form-group-row select,
    .cod-form-group-row textarea {
        max-width: 72%;
    }
}

/*Menu Cart*/

button#modalcodf_menu_cart {
    padding: 0;
    margin: 0;
    background: none;
    border: 0px;
    cursor: pointer;
    display: flex;
    outline: none;
}

.not_cart_items {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.not_cart_items svg {
    width: 100%;
    max-width: 100px;
    height: auto;
}

/*Button Payment*/
.cod_container_button_order {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

/*Button Payment Sticky Mobile*/
@media (max-width:767px) {
    .cod_sticky {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        z-index: 9;
    }
}


/*Clean Shortcode*/
.shortcode_add_to_cart p {
    margin: 0;
}

.shortcode_add_to_cart .woocommerce-variation-add-to-cart>p {
    display: none;
}

.shortcode_add_to_cart .cod_container_button_order {
    margin-top: 5px;
}

/*Button to Checkout*/
button.cod-modal-button {
    margin-top: 10px;
    width: 100% !important;
}

.cod_wc_coexist {
    margin-top: 10px;
}

/*Clean styles*/
button.remove-product {
    padding: 0px !important;
    margin: 0px;
    background: #fff0;
}


/*Discount*/
.discount-amount,
.cod-modal-content span.shipping-amount {
    color: var(--highlight-color);
}

.qo_variable_value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Implementar variables CSS */
:root {
    --primary-color: #000000;
    --secondary-color: #ffffff;
    --border-color: silver;
    --background-light: #ebebeb;
    --border-radius-small: 3px;
    --border-radius-medium: 6px;
    --border-radius-large: 9px;
    --spacing-small: 5px;
    --spacing-medium: 10px;
    --spacing-large: 20px;
}

/* Luego utilizarlas */
.cod-modal-content {
    color: var(--primary-color);
    border-radius: var(--border-radius-large);
    /* etc */
}

/* === Dinámicos: tamaño del título del modal === */
.cod-modal h3 {
    font-size: var(--cod-title-size, 28px);
}

/* === Dinámicos: botón principal === */
.cod-modal-button {
    background-color: var(--cod-btn-bg, #000000);
    color: var(--cod-btn-color, #ffffff);
    border-radius: var(--cod-btn-radius, 0px);
    border-width: var(--cod-btn-bw, 0px);
    border-color: var(--cod-btn-bc, #000000);
    border-style: solid;
    box-shadow: 0 0 var(--cod-btn-shadow, 0) var(--cod-btn-shadow, 0) rgba(0, 0, 0, .1);
    font-size: var(--cod-btn-fs, 1rem);
    width: var(--cod-btn-width, 100%);
    padding: 10px 25px;
}

/* === Íconos en inputs (mismos IDs) con fallback === */
#first_name,
#last_name {
    background-image: var(--cod-icon-user, url('../img/modalcodf-user.svg'));
}

#phone {
    background-image: var(--cod-icon-phone, url('../img/modalcodf-phone.svg'));
}

#country,
#state,
#city,
#address,
#address_2 {
    background-image: var(--cod-icon-location, url('../img/modalcodf-location.svg'));
}

#email {
    background-image: var(--cod-icon-email, url('../img/modalcodf-email.svg'));
}

#order_comments {
    background-image: var(--cod-icon-msj, url('../img/modalcodf-msj.svg'));
}

/* (Opcional) agrega el highlight a tus defaults si aún no existe */
:root {
    --highlight-color: #1d6740;
    /* fallback; se puede sobreescribir desde PHP */
}

/* Payment Button */
#cod_quantity {
    width: 45px;
    padding: 5px;
    outline: none;
}

/* Botón del PDP (usa variables dinámicas como el del modal) */
button#modal_checkout {
    background-color: var(--cod-btn-bg, #000000);
    color: var(--cod-btn-color, #ffffff);
    border-radius: var(--cod-btn-radius, 0px);
    border-width: var(--cod-btn-bw, 0px);
    border-color: var(--cod-btn-bc, #000000);
    border-style: solid;
    box-shadow: 0 0 var(--cod-btn-shadow, 0) var(--cod-btn-shadow, 0) rgba(0, 0, 0, .1);
    font-size: var(--cod-btn-fs, 1rem);
    width: var(--cod-btn-width, auto);
    padding: 10px 25px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    float: none;
}

/* Línea principal (icono + texto) */
button#modal_checkout>div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    font-size: var(--cod-btn-fs, 1rem);
    line-height: 1;
}

/* Subtítulo (antes inline) */
button#modal_checkout>span {
    font-size: 0.7rem;
    line-height: 1.5;
}

/* Icono (antes style en SVG) */
button#modal_checkout svg {
    width: 17px;
    height: auto;
    max-width: 17px;
}

button#modal_checkout svg path {
    fill: currentColor;
    /* hereda de color del botón */
}

/* Mini-cart */

.woocommerce-mini-cart__buttons #modalcodf_menu_cart.button_text_menu_cart {
    background-color: var(--cod-btn-bg, #000000);
    color: var(--cod-btn-color, #ffffff);
    border-radius: var(--cod-btn-radius, 0px);
    border-width: var(--cod-btn-bw, 0px);
    border-color: var(--cod-btn-bc, #000000);
    border-style: solid;
    box-shadow: 0 0 var(--cod-btn-shadow, 0) var(--cod-btn-shadow, 0) rgba(0, 0, 0, .1);
    font-size: var(--cod-btn-fs, 1rem);
    width: var(--cod-btn-width, 100%);
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

/* Botón del ícono en menú (shortcode) */
button#modalcodf_menu_cart {
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    outline: none;

    /* color del ícono (heredado por el SVG con currentColor) */
    color: var(--mc-icon-color, #000);
}

/* El SVG hereda el color del botón */
button#modalcodf_menu_cart svg path {
    fill: currentColor;
}

/* Tamaño del ícono por variable */
button#modalcodf_menu_cart svg {
    max-width: var(--mc-icon-size, 30px);
    width: 100%;
    height: auto;
}

/* =========================================================
 * ComprandoYA unified cart modal — final compact design (1.0.3)
 * Visual reference: compact COD-style checkout card.
 * ======================================================= */
#codFormModal .cod-modal-content{
    max-width: 650px;
    width: calc(100% - 24px);
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    background:#fff;
}

#codFormModal .cod-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    width:18px;
    height:18px;
    min-width:18px;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:50%!important;
    background:#111!important;
    color:#fff!important;
    font-size:11px!important;
    line-height:18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:20;
    box-shadow:none!important;
}
#codFormModal .cod-modal-close:hover,
#codFormModal .cod-modal-close:focus{
    background:#000!important;
    color:#fff!important;
}

#codFormModal .cyco-modal-title{
    margin:4px 28px 14px 0;
    padding:0;
    text-align:left;
    line-height:1.1;
    font-size:26px;
    font-weight:700;
    color:#111;
}

#codFormModal .cyco-product-card{
    position:relative;
    display:grid;
    grid-template-columns:56px minmax(150px,1fr) minmax(105px,135px) 78px 22px;
    grid-template-areas:"thumb info vars qty remove";
    align-items:center;
    column-gap:9px;
    min-width:0;
    padding:8px 9px;
    margin:0 0 7px;
    box-sizing:border-box;
    background:#f5f5f5;
    border:1px solid #e9e9e9;
    border-radius:6px;
    overflow:hidden;
}

#codFormModal .cyco-product-thumb{
    grid-area:thumb;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:5px;
    background:#fff;
}
#codFormModal .cyco-product-thumb img{
    width:56px!important;
    height:56px!important;
    max-width:none!important;
    object-fit:cover;
    border-radius:5px;
}

#codFormModal .cyco-product-info{
    grid-area:info;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    overflow:hidden;
}
#codFormModal .cyco-product-name{
    display:block;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    font-size:12px;
    line-height:1.2;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
#codFormModal .cyco-product-price{
    margin-top:2px;
    font-size:13px;
    line-height:1.15;
    font-weight:700;
    color:#1237d6;
    white-space:nowrap;
}
#codFormModal .cyco-product-price del,
#codFormModal .cyco-pending-price del{
    display:none!important;
}
#codFormModal .cyco-pending-price ins{
    text-decoration:none!important;
}
#codFormModal .cyco-stock-status{
    margin-top:1px;
    font-size:9px;
    line-height:1.15;
    font-weight:600;
    color:#d90000;
}

#codFormModal .cyco-pending-variations,
#codFormModal .cyco-cart-variations{
    grid-area:vars;
    min-width:0;
    display:flex;
    align-items:center;
    gap:5px;
    width:100%;
}
#codFormModal .cyco-variation-field{
    min-width:0;
    flex:1 1 auto;
}
#codFormModal .cyco-variation-field label,
#codFormModal .cyco-product-qty-wrap>label{
    display:block;
    margin:0 0 2px;
    padding:0;
    font-size:9px;
    line-height:1.1;
    font-weight:600;
    color:#111;
}
#codFormModal .cyco-variation-select{
    display:block;
    width:100%!important;
    min-width:0;
    height:30px!important;
    margin:0!important;
    padding:2px 6px!important;
    border:1px solid #d2d2d2!important;
    border-radius:5px!important;
    background:#fff!important;
    color:#111!important;
    font-size:10px!important;
    line-height:1.1!important;
    box-sizing:border-box!important;
}
#codFormModal .cyco-variation-status{
    display:none;
}
#codFormModal .cyco-current-variation{
    display:none!important;
}

#codFormModal .cyco-product-qty-wrap{
    grid-area:qty;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
}
#codFormModal .cyco-qty{
    display:flex;
    align-items:center;
    justify-content:center;
    width:78px;
    max-width:78px;
    height:30px;
    margin:0;
    padding:0;
    border:1px solid #d2d2d2;
    border-radius:5px;
    overflow:hidden;
    background:#fff;
    box-sizing:border-box;
}
#codFormModal .cyco-qty-btn{
    width:25px;
    min-width:25px;
    height:28px;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:#f7f7f7!important;
    color:#111!important;
    font-size:13px!important;
    line-height:28px!important;
    box-shadow:none!important;
}
#codFormModal .cyco-qty-input{
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-left:1px solid #e5e5e5!important;
    border-right:1px solid #e5e5e5!important;
    border-radius:0!important;
    background:#fff!important;
    text-align:center!important;
    font-size:11px!important;
    color:#111!important;
    box-shadow:none!important;
}

#codFormModal .cyco-remove-product{
    grid-area:remove;
    align-self:center!important;
    justify-self:end!important;
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:50%!important;
    background:#f40000!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:13px!important;
    font-weight:400!important;
    line-height:20px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-shadow:none!important;
}
#codFormModal .cyco-remove-product:hover,
#codFormModal .cyco-remove-product:focus{
    background:#d90000!important;
    color:#fff!important;
}

/* The old action/update buttons are intentionally not part of the product row.
 * Pending products are committed automatically once a valid variation is selected,
 * and existing variable cart lines save their new variation automatically. */
#codFormModal .cyco-product-actions,
#codFormModal .cyco-save-item{
    display:none!important;
}
#codFormModal .cyco-primary-action:disabled{
    opacity:.5;
}

#codFormModal .cyco-cart-list{
    margin:0 0 8px;
}
#codFormModal .cyco-cart-heading{
    display:none!important;
}

#codFormModal .cod_table.subtotal-total{
    margin:0 0 10px;
    padding:8px 12px 6px;
    background:#f5f5f5;
    border:1px solid #e8e8e8;
    border-radius:6px;
    font-size:14px;
}
#codFormModal .cod_table.subtotal-total .cod_td{
    min-height:26px;
}
#codFormModal .cod_table.subtotal-total .woocommerce-Price-amount,
#codFormModal .cod_table.subtotal-total .subtotal-amount,
#codFormModal .cod_table.subtotal-total .total-amount{
    font-weight:600;
    color:#1237d6;
}
#codFormModal .cod_table.subtotal-total .shipping-amount{
    color:#f29a00;
    font-weight:600;
}
#codFormModal .cod_table.subtotal-total .total{
    margin-top:2px;
    padding-top:5px;
    border-top:1px solid #d7d7d7;
}
#codFormModal .cod_table.subtotal-total .total .total-amount{
    font-size:15px;
}

@media (max-width:620px){
    #codFormModal .cod-modal-content{
        width:calc(100% - 12px);
        max-width:none;
        padding:14px;
        border-radius:9px;
        box-sizing:border-box;
    }
    #codFormModal .cod-modal-close{
        top:9px;
        right:9px;
        width:17px;
        height:17px;
        min-width:17px;
        line-height:17px!important;
        font-size:10px!important;
    }
    #codFormModal .cyco-modal-title{
        margin:3px 24px 11px 0;
        font-size:22px;
    }
    #codFormModal .cyco-product-card{
        grid-template-columns:44px minmax(0,1fr) minmax(82px,100px) 68px 18px;
        column-gap:5px;
        padding:7px 6px;
        margin-bottom:6px;
    }
    #codFormModal .cyco-product-thumb,
    #codFormModal .cyco-product-thumb img{
        width:44px!important;
        height:44px!important;
    }
    #codFormModal .cyco-product-name{
        font-size:10px;
    }
    #codFormModal .cyco-product-price{
        font-size:12px;
    }
    #codFormModal .cyco-stock-status{
        font-size:8px;
    }
    #codFormModal .cyco-variation-field label,
    #codFormModal .cyco-product-qty-wrap>label{
        font-size:8px;
        margin-bottom:2px;
    }
    #codFormModal .cyco-variation-select{
        height:28px!important;
        font-size:9px!important;
        padding:2px 4px!important;
    }
    #codFormModal .cyco-qty{
        width:68px;
        max-width:68px;
        height:28px;
    }
    #codFormModal .cyco-qty-btn{
        width:22px;
        min-width:22px;
        height:26px;
        font-size:12px!important;
        line-height:26px!important;
    }
    #codFormModal .cyco-qty-input{
        width:24px!important;
        min-width:24px!important;
        max-width:24px!important;
        height:26px!important;
        font-size:10px!important;
    }
    #codFormModal .cyco-remove-product{
        width:18px!important;
        height:18px!important;
        min-width:18px!important;
        max-width:18px!important;
        font-size:11px!important;
        line-height:18px!important;
    }
    #codFormModal .cod_table.subtotal-total{
        padding:7px 9px 5px;
        font-size:12px;
    }
    #codFormModal .cod_table.subtotal-total .cod_td{
        min-height:23px;
    }
    #codFormModal .cod_table.subtotal-total .total .total-amount{
        font-size:13px;
    }
}


/* 1.0.6 — force true circular action buttons against theme/Woodmart button rules.
 * Some theme button styles impose min-height/padding/line-height, turning a 20x20
 * button into a vertical pill. These rules intentionally use all four dimensions
 * and flex-basis so both close/remove controls remain mathematically square.
 */
#codFormModal button.cod-modal-close,
#codFormModal button.cyco-remove-product {
    box-sizing: border-box !important;
    inline-size: 20px !important;
    block-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    flex: 0 0 20px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    transform: none !important;
}

#codFormModal button.cod-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 20px !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 11px !important;
}

#codFormModal button.cyco-remove-product {
    position: relative !important;
    align-self: center !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 20px !important;
    background: #f40000 !important;
    color: #fff !important;
    font-size: 13px !important;
}

@media (max-width: 620px) {
    #codFormModal button.cod-modal-close {
        inline-size: 18px !important;
        block-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        flex-basis: 18px !important;
        line-height: 18px !important;
        font-size: 10px !important;
    }
    #codFormModal button.cyco-remove-product {
        inline-size: 18px !important;
        block-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        flex-basis: 18px !important;
        line-height: 18px !important;
        font-size: 11px !important;
    }
}

/* 1.0.8 — grouped variable-product presentation.
 * One product card can contain several variation rows. This keeps the product
 * identity compact on the left and stacks only the variant/quantity controls.
 */
#codFormModal .cyco-product-group{
    display:grid!important;
    grid-template-columns:minmax(145px,45%) minmax(0,55%);
    grid-template-areas:"product options";
    align-items:center;
    column-gap:10px;
    padding:8px 9px!important;
}
#codFormModal .cyco-group-product{
    grid-area:product;
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
}
#codFormModal .cyco-group-product .cyco-product-thumb{
    flex:0 0 52px;
    width:52px!important;
    height:52px!important;
}
#codFormModal .cyco-group-product .cyco-product-thumb img{
    width:52px!important;
    height:52px!important;
}
#codFormModal .cyco-group-product .cyco-product-info{
    min-width:0;
    flex:1 1 auto;
}
#codFormModal .cyco-group-options{
    grid-area:options;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
#codFormModal .cyco-variant-row{
    position:relative;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 68px 20px;
    align-items:end;
    column-gap:6px;
}
#codFormModal .cyco-variant-row .cyco-variant-fields{
    min-width:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    gap:5px;
    align-items:end;
}
#codFormModal .cyco-variant-row .cyco-variation-field{
    min-width:0;
}
#codFormModal .cyco-variant-row .cyco-product-qty-wrap{
    grid-area:auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}
#codFormModal .cyco-variant-row .cyco-qty{
    width:68px!important;
    max-width:68px!important;
}
#codFormModal .cyco-variant-row .cyco-remove-product{
    position:relative!important;
    grid-area:auto!important;
    align-self:end!important;
    justify-self:end!important;
}
#codFormModal .cyco-simple-group .cyco-variant-row{
    grid-template-columns:68px 20px;
    justify-content:end;
}
#codFormModal .cyco-simple-group .cyco-variant-row .cyco-product-qty-wrap{
    grid-column:1;
}
#codFormModal .cyco-simple-group .cyco-variant-row .cyco-remove-product{
    grid-column:2;
}
/* 1.0.14 — El enlace pertenece visualmente a la tarjeta variable superior.
 * Quitamos el margen inferior de esa tarjeta y dejamos solo 0px arriba + 2px abajo. */
#codFormModal .cyco-product-group.cyco-has-add-variant{
    margin-bottom:0!important;
}

/* 1.0.9 — el enlace para otra variante queda fuera de la tarjeta,
 * inmediatamente debajo, sin competir con los controles del producto. */
#codFormModal .cyco-add-variant{
    display:inline-flex!important;
    align-items:center;
    width:auto!important;
    height:12px!important;
    min-height:12px!important;
    max-height:12px!important;
    margin:0 0 2px 8px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:var(--cyco-add-variant-text-color,#1237d6)!important;
    font-size:var(--cyco-add-variant-font-size,9px)!important;
    line-height:12px!important;
    font-weight:600!important;
    box-shadow:none!important;
    cursor:pointer;
    text-transform:none!important;
    letter-spacing:0!important;
}
#codFormModal .cyco-add-variant:hover,
#codFormModal .cyco-add-variant:focus{
    background:transparent!important;
    color:var(--cyco-add-variant-text-color,#1237d6)!important;
    box-shadow:none!important;
    outline:none!important;
}
#codFormModal .cyco-add-variant span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px!important;
    height:14px!important;
    min-width:14px!important;
    min-height:14px!important;
    margin-right:4px;
    border-radius:50%!important;
    background:var(--cyco-add-variant-icon-color,#1237d6)!important;
    color:#fff!important;
    font-size:12px!important;
    line-height:14px!important;
    padding:0!important;
}
#codFormModal .cyco-pending-product .cyco-pending-variations{
    display:none!important;
}
#codFormModal .cyco-pending-product .cyco-variation-status{
    display:none;
}

@media (max-width:620px){
    #codFormModal .cyco-product-group{
        grid-template-columns:minmax(135px,44%) minmax(0,56%);
        column-gap:7px;
        padding:7px 6px!important;
    }
    #codFormModal .cyco-group-product{
        gap:6px;
        align-items:flex-start;
    }
    #codFormModal .cyco-group-product .cyco-product-thumb{
        flex-basis:48px;
        width:48px!important;
        height:48px!important;
    }
    #codFormModal .cyco-group-product .cyco-product-thumb img{
        width:48px!important;
        height:48px!important;
    }
    #codFormModal .cyco-product-group .cyco-product-name{
        font-size:10px!important;
        line-height:1.15!important;
    }
    #codFormModal .cyco-product-group .cyco-product-price{
        font-size:12px!important;
    }
    #codFormModal .cyco-variant-row{
        grid-template-columns:minmax(0,1fr) 64px 18px;
        column-gap:4px;
    }
    #codFormModal .cyco-variant-row .cyco-qty{
        width:64px!important;
        max-width:64px!important;
    }
    #codFormModal .cyco-simple-group .cyco-variant-row{
        grid-template-columns:64px 18px;
    }
    #codFormModal .cyco-add-variant{
        height:11px!important;
        min-height:11px!important;
        max-height:11px!important;
        margin-left:5px!important;
        margin-top:0!important;
        margin-bottom:2px!important;
        font-size:var(--cyco-add-variant-font-size,9px)!important;
        line-height:11px!important;
    }
    #codFormModal .cyco-add-variant span{
        width:11px!important;
        height:11px!important;
        min-width:11px!important;
        min-height:11px!important;
        line-height:11px!important;
        font-size:9px!important;
        margin-right:3px;
    }
}
#codFormModal .cyco-variant-row + .cyco-variant-row .cyco-variation-field label,
#codFormModal .cyco-variant-row + .cyco-variant-row .cyco-product-qty-wrap > label{
    visibility:hidden;
}

/* 1.0.12 — Las filas adicionales no deben conservar el alto de las etiquetas
 * ocultas. visibility:hidden seguía reservando espacio vertical y generaba
 * un hueco visible entre los selectores. */
#codFormModal .cyco-variant-row + .cyco-variant-row .cyco-variation-field label,
#codFormModal .cyco-variant-row + .cyco-variant-row .cyco-product-qty-wrap > label{
    display:none!important;
    margin:0!important;
    height:0!important;
    line-height:0!important;
    padding:0!important;
}
#codFormModal .cyco-group-options{
    gap:2px!important;
}

/* WooCommerce / ThemeHigh fields rendered inside the ComprandoYA modal */
#codFormModal #checkout_form .cyco-wc-checkout-field {
    width: 100%;
    min-width: 0;
}

#codFormModal #checkout_form .cyco-wc-checkout-field .form-row {
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
}

#codFormModal #checkout_form .cyco-wc-checkout-field label {
    display: block;
    margin: 0 0 4px;
}

#codFormModal #checkout_form .cyco-wc-checkout-field .woocommerce-input-wrapper,
#codFormModal #checkout_form .cyco-wc-checkout-field .select2-container,
#codFormModal #checkout_form .cyco-wc-checkout-field select,
#codFormModal #checkout_form .cyco-wc-checkout-field input,
#codFormModal #checkout_form .cyco-wc-checkout-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#codFormModal #checkout_form .cyco-wc-checkout-field .select2-container {
    margin-top: 6px;
}

#codFormModal #checkout_form .cyco-wc-checkout-field textarea {
    min-height: 90px;
}

#codFormModal #checkout_form .cyco-wc-checkout-field .required {
    color: inherit;
}

/* =========================================================
 * ComprandoYA checkout field layout 1.0.20
 * ======================================================= */
#codFormModal #checkout_form .cyco-form-section {
    margin: 10px 0 12px;
    padding: 0 10px 8px;
    border-radius: 10px;
    background: var(--cyco-personal-bg, #E8F3FF);
    border: 1px solid rgba(0,0,0,.04);
    box-sizing: border-box;
}

#codFormModal #checkout_form .cyco-form-section-shipping {
    background: var(--cyco-shipping-bg, #FFF3E6);
}

#codFormModal #checkout_form .cyco-form-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 4px 2px 2px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--cyco-personal-color, #0066FF);
}

#codFormModal #checkout_form .cyco-form-section-shipping .cyco-form-section-title {
    color: var(--cyco-shipping-color, #F57A00);
}

#codFormModal #checkout_form .cyco-section-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
}

#codFormModal #checkout_form .cyco-field-row {
    width: 100%;
    margin: 0;
}

#codFormModal #checkout_form .cyco-field-row-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

#codFormModal #checkout_form .cyco-field-row-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

#codFormModal #checkout_form .cyco-field-row .cyco-wc-checkout-field {
    min-width: 0;
}

#codFormModal #checkout_form .cyco-field-row .form-row {
    margin-bottom: 8px;
}

/* Required marker comes from WooCommerce's real field definition. */
#codFormModal #checkout_form .required,
#codFormModal #checkout_form abbr.required,
#codFormModal #checkout_form .required-field {
    color: var(--cyco-required-color, #FF0000) !important;
}

#codFormModal #checkout_form .required {
    text-decoration: none;
}

/* Optional horizontal mode: label and input share one line.
 * Controlled from Ajustes > Formulario COD Modal > Diseño > Enable horizontal view. */
#codFormModal #checkout_form.cyco-horizontal-fields .cyco-wc-checkout-field .form-row {
    display: grid;
    grid-template-columns: minmax(90px, 38%) minmax(0, 62%);
    gap: 8px;
    align-items: center;
}

#codFormModal #checkout_form.cyco-horizontal-fields .cyco-wc-checkout-field .form-row > label {
    margin: 0;
}

#codFormModal #checkout_form.cyco-horizontal-fields .cyco-wc-checkout-field .woocommerce-input-wrapper,
#codFormModal #checkout_form.cyco-horizontal-fields .cyco-wc-checkout-field .select2-container {
    margin-top: 0;
}

/* The totals card remains visible while the customer scrolls through the fields. */
#codFormModal .cod_table.subtotal-total {
    position: sticky;
    top: 0;
    z-index: 25;
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

@media (max-width: 520px) {
    #codFormModal #checkout_form .cyco-form-section {
        padding-left: 8px;
        padding-right: 8px;
    }

    #codFormModal #checkout_form .cyco-field-row-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #codFormModal #checkout_form .cyco-field-row-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    #codFormModal #checkout_form .cyco-field-row-3 .form-row > label {
        font-size: 12px;
        line-height: 1.15;
    }

    #codFormModal #checkout_form.cyco-horizontal-fields .cyco-wc-checkout-field .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #codFormModal #checkout_form.cyco-horizontal-fields .cyco-wc-checkout-field .form-row > label {
        margin-bottom: 4px;
    }
}


/* =========================================================
 * ComprandoYA Checkout visual refinement 1.0.21
 * Based on the approved visual mockup: wider modal, clear
 * section hierarchy, three-column contact row and totals card.
 * ======================================================= */
#codFormModal .cod-modal-content{
    width: min(760px, calc(100vw - 24px)) !important;
    max-width: 760px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}

#codFormModal .cyco-modal-title{
    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    margin: 0 34px 14px 0 !important;
    letter-spacing: -.3px;
}

/* Totals: three equal columns, matching the approved mockup. */
#codFormModal .cod_table.subtotal-total{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 14px !important;
    padding: 11px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
    font-size: 15px !important;
}
#codFormModal .cod_table.subtotal-total .cod_td{
    min-height: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    border-top: 0 !important;
    margin: 0 !important;
}
#codFormModal .cod_table.subtotal-total .cod_td + .cod_td{
    border-left: 1px solid #dfe5ec !important;
}
#codFormModal .cod_table.subtotal-total .cod_td > span:first-child{
    color: #334155 !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
#codFormModal .cod_table.subtotal-total .woocommerce-Price-amount,
#codFormModal .cod_table.subtotal-total .subtotal-amount,
#codFormModal .cod_table.subtotal-total .total-amount{
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0755e8 !important;
    line-height: 1.2 !important;
}
#codFormModal .cod_table.subtotal-total .shipping-amount{
    font-size: 17px !important;
    color: #f59e0b !important;
    font-weight: 800 !important;
}
#codFormModal .cod_table.subtotal-total .total .total-amount{
    font-size: 18px !important;
}

/* Approved section cards. */
#codFormModal #checkout_form .cyco-form-section{
    margin: 0 0 12px !important;
    padding: 0 12px 10px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(15,23,42,.07) !important;
    box-shadow: none !important;
}
#codFormModal #checkout_form .cyco-form-section-personal{
    background: var(--cyco-personal-bg, #e8f3ff) !important;
}
#codFormModal #checkout_form .cyco-form-section-shipping{
    background: var(--cyco-shipping-bg, #fff3e6) !important;
}
#codFormModal #checkout_form .cyco-form-section-title{
    min-height: 38px !important;
    padding: 5px 0 4px !important;
    gap: 8px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}
#codFormModal #checkout_form .cyco-section-icon{
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
}
#codFormModal #checkout_form .cyco-form-section-personal .cyco-section-icon{
    background-image: var(--cod-icon-user) !important;
}
#codFormModal #checkout_form .cyco-form-section-shipping .cyco-section-icon{
    background-image: var(--cod-icon-location) !important;
}

/* WooCommerce fields: labels above full-width inputs, never label/input side-by-side. */
#codFormModal #checkout_form .cyco-wc-checkout-field .form-row{
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}
#codFormModal #checkout_form .cyco-wc-checkout-field .form-row > label{
    display: block !important;
    width: 100% !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #263241 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    white-space: normal !important;
}
#codFormModal #checkout_form .cyco-wc-checkout-field .woocommerce-input-wrapper{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}
#codFormModal #checkout_form .cyco-wc-checkout-field input,
#codFormModal #checkout_form .cyco-wc-checkout-field select,
#codFormModal #checkout_form .cyco-wc-checkout-field textarea,
#codFormModal #checkout_form .cyco-wc-checkout-field .select2-container{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
}
#codFormModal #checkout_form .cyco-wc-checkout-field input,
#codFormModal #checkout_form .cyco-wc-checkout-field select,
#codFormModal #checkout_form .cyco-wc-checkout-field textarea{
    padding: 9px 11px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: #1f2937 !important;
}
#codFormModal #checkout_form .cyco-wc-checkout-field input:focus,
#codFormModal #checkout_form .cyco-wc-checkout-field select:focus,
#codFormModal #checkout_form .cyco-wc-checkout-field textarea:focus{
    border-color: #8bb8ff !important;
    box-shadow: 0 0 0 2px rgba(0,102,255,.08) !important;
    outline: none !important;
}
#codFormModal #checkout_form .cyco-wc-checkout-field .select2-container .select2-selection--single{
    height: 42px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
}
#codFormModal #checkout_form .cyco-wc-checkout-field .select2-container .select2-selection__rendered{
    line-height: 40px !important;
    padding-left: 11px !important;
    font-size: 14px !important;
}
#codFormModal #checkout_form .cyco-wc-checkout-field .select2-container .select2-selection__arrow{
    height: 40px !important;
}
#codFormModal #checkout_form .required,
#codFormModal #checkout_form abbr.required,
#codFormModal #checkout_form .required-field{
    color: var(--cyco-required-color, #ef4444) !important;
    text-decoration: none !important;
}

/* Row widths: 2 / 3 / 2 / 1 exactly as approved. */
#codFormModal #checkout_form .cyco-field-row-2{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
}
#codFormModal #checkout_form .cyco-field-row-3{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: start !important;
}
#codFormModal #checkout_form .cyco-field-row-3 .cyco-wc-checkout-field .form-row{
    min-width: 0 !important;
}

/* Address row: apartment spans the full section. */
#codFormModal #checkout_form .cyco-form-section-shipping .cyco-field-row-1{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

/* Keep the totals card sticky without covering the modal close/title area. */
#codFormModal .cod_table.subtotal-total{
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
}

@media (max-width: 700px){
    #codFormModal .cod-modal-content{
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        padding: 14px !important;
    }
    #codFormModal .cyco-modal-title{
        font-size: 23px !important;
        margin-bottom: 11px !important;
    }
    #codFormModal #checkout_form .cyco-field-row-3{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
    #codFormModal #checkout_form .cyco-field-row-3 .cyco-wc-checkout-field .form-row > label{
        font-size: 11px !important;
    }
    #codFormModal #checkout_form .cyco-field-row-3 .cyco-wc-checkout-field input{
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 12px !important;
    }
    #codFormModal #checkout_form .cyco-field-row-2{
        gap: 9px !important;
    }
    #codFormModal .cod_table.subtotal-total{
        padding: 9px 4px !important;
    }
    #codFormModal .cod_table.subtotal-total .cod_td{
        padding: 0 7px !important;
    }
    #codFormModal .cod_table.subtotal-total .cod_td > span:first-child{
        font-size: 12px !important;
    }
    #codFormModal .cod_table.subtotal-total .woocommerce-Price-amount,
    #codFormModal .cod_table.subtotal-total .subtotal-amount,
    #codFormModal .cod_table.subtotal-total .total-amount,
    #codFormModal .cod_table.subtotal-total .shipping-amount{
        font-size: 14px !important;
    }
}

@media (max-width: 430px){
    /* On very narrow phones, preserve readability rather than squeezing three
       long labels into unreadable columns. */
    #codFormModal #checkout_form .cyco-field-row-3{
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    #codFormModal #checkout_form .cyco-field-row-3 .cyco-wc-checkout-field .form-row > label{
        font-size: 13px !important;
    }
    #codFormModal #checkout_form .cyco-field-row-3 .cyco-wc-checkout-field input{
        font-size: 14px !important;
    }
}


/* =========================================================
 * ComprandoYA Checkout 1.0.22 — final interaction overrides
 * ======================================================= */
#codFormModal .cod_table.subtotal-total{
    position:sticky !important;
    bottom:8px !important;
    z-index:60 !important;
    margin:12px 0 14px !important;
    box-sizing:border-box !important;
    background:#f8fafc !important;
    border:1px solid #dfe6ee !important;
    border-radius:14px !important;
    box-shadow:0 8px 22px rgba(0,0,0,.12) !important;
}
#codFormModal .cod_table.subtotal-total .cyco-shipping-pending-text{
    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    color:#8b95a1 !important;
}
#codFormModal #checkout_form{
    padding-bottom:12px !important;
}
#codFormModal #checkout_form .btn.cod-modal-button{
    position:relative !important;
    z-index:10 !important;
    margin-bottom:4px !important;
}
@media (max-width:620px){
    #codFormModal .cod_table.subtotal-total{
        bottom:6px !important;
        margin:10px 0 12px !important;
        border-radius:12px !important;
    }
}


/* =========================================================
 * ComprandoYA Checkout 1.0.23 — visual refinements
 * ======================================================= */
#codFormModal .cyco-product-name{
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    line-clamp:2!important;
    line-height:1.2!important;
    max-height:2.4em!important;
}

/* Totals card: configurable background and clearer hierarchy. */
#codFormModal .cod_table.subtotal-total{
    background:var(--cyco-totals-card-bg,#F7FAFF)!important;
    border:1px solid rgba(18,55,214,.10)!important;
}
#codFormModal .cod_table.subtotal-total .shipping-display{
    display:inline-flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    line-height:1.1!important;
}
#codFormModal .cod_table.subtotal-total .shipping-amount{
    display:block!important;
}
#codFormModal .cod_table.subtotal-total .cyco-shipping-note{
    display:block!important;
    margin-top:2px!important;
    color:#a9afb7!important;
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:400!important;
}

/* Placeholder text must look like an example, never like entered data. */
#codFormModal #checkout_form input::placeholder,
#codFormModal #checkout_form textarea::placeholder{
    color:#b9bec5!important;
    opacity:1!important;
}
#codFormModal #checkout_form input::-webkit-input-placeholder,
#codFormModal #checkout_form textarea::-webkit-input-placeholder{
    color:#b9bec5!important;
    opacity:1!important;
}
#codFormModal #checkout_form input:-ms-input-placeholder,
#codFormModal #checkout_form textarea:-ms-input-placeholder{
    color:#b9bec5!important;
}

@media(max-width:620px){
    #codFormModal .select2-container--default .select2-selection--single{
        height:46px!important;
    }
    #codFormModal .select2-container--default .select2-selection--single .select2-selection__rendered{
        line-height:44px!important;
    }
}

/* =========================================================
 * ComprandoYA Checkout 1.0.24 — final totals wording
 * ======================================================= */
#codFormModal .cod_table.subtotal-total .shipping-amount .cyco-shipping-pending-text{
    color:#f59e0b !important;
    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}
#codFormModal .cod_table.subtotal-total .cyco-shipping-note{
    display:block !important;
    margin-top:3px !important;
    color:#aeb6c0 !important;
    font-size:10px !important;
    font-weight:400 !important;
    line-height:1.15 !important;
}


/* =========================================================
 * ComprandoYA Checkout 1.0.26 — visual corrections
 * ======================================================= */

/* Sticky nativo: solo móvil y tablet. El botón ocupa todo el ancho. */
@media (max-width:767px){
    .cod_container_button_order.cod_sticky{
        position:fixed!important;
        left:0!important;
        bottom:0!important;
        width:100%!important;
        z-index:9999!important;
        box-sizing:border-box!important;
        margin:0!important;
    }
    .cod_container_button_order.cod_sticky #modal_checkout{
        width:100%!important;
        margin:0!important;
    }
}

/* WhatsApp se eleva sobre la barra sticky, sin reducir ni invadir el CTA. */
.cyco-whatsapp-raised{
    bottom:var(--cyco-wa-bottom)!important;
}

/* Totales: los tres encabezados parten exactamente de la misma línea. */
#codFormModal .cod_table.subtotal-total .cod_td{
    justify-content:flex-start!important;
}
#codFormModal .cod_table.subtotal-total .cyco-total-label{
    display:block!important;
    width:100%!important;
    height:28px!important;
    min-height:28px!important;
    margin:0!important;
    padding:0!important;
    line-height:28px!important;
    box-sizing:border-box!important;
}
#codFormModal .cod_table.subtotal-total .subtotal-amount,
#codFormModal .cod_table.subtotal-total .total-amount,
#codFormModal .cod_table.subtotal-total .shipping-display{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    line-height:1.15!important;
}
#codFormModal .cod_table.subtotal-total .shipping-display{
    min-height:0!important;
}
#codFormModal .cod_table.subtotal-total .cyco-shipping-pending-text{
    display:block!important;
    line-height:1.15!important;
    margin:0!important;
}
#codFormModal .cod_table.subtotal-total .cyco-shipping-note{
    display:block!important;
    margin:3px 0 0!important;
    line-height:1.15!important;
}

/* Producto simple: aprovecha el espacio que normalmente ocupa la variante. */
#codFormModal .cyco-product-group.cyco-simple-group{
    grid-template-columns:minmax(0,70%) minmax(90px,30%)!important;
}
#codFormModal .cyco-simple-group .cyco-group-product{
    width:100%!important;
}
#codFormModal .cyco-simple-group .cyco-group-options{
    justify-content:flex-start!important;
}
#codFormModal .cyco-simple-group .cyco-product-name{
    -webkit-line-clamp:2!important;
    line-clamp:2!important;
}

@media (max-width:620px){
    #codFormModal .cyco-product-group.cyco-simple-group{
        grid-template-columns:minmax(0,70%) minmax(82px,30%)!important;
        column-gap:7px!important;
    }
    #codFormModal .cyco-simple-group .cyco-product-name{
        white-space:normal!important;
        -webkit-line-clamp:2!important;
        line-clamp:2!important;
    }
}

/* =========================================================
 * ComprandoYA Checkout 1.0.27 — approved mobile sticky layout
 * ======================================================= */

/* Quantity: keep the +/- controls only; hide browser-native number spinners. */
#codFormModal .cyco-qty-input,
#cod_quantity{
    -moz-appearance:textfield!important;
    appearance:textfield!important;
}
#codFormModal .cyco-qty-input::-webkit-outer-spin-button,
#codFormModal .cyco-qty-input::-webkit-inner-spin-button,
#cod_quantity::-webkit-outer-spin-button,
#cod_quantity::-webkit-inner-spin-button{
    -webkit-appearance:none!important;
    appearance:none!important;
    margin:0!important;
}

/* Mobile/tablet sticky: CTA full width. Joinchat is moved above it via --bottom. */
@media (max-width:767px){
    .cod_container_button_order.cod_sticky{
        position:fixed!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        width:100%!important;
        z-index:9999!important;
        box-sizing:border-box!important;
        margin:0!important;
        padding:0!important;
        background:transparent!important;
        display:block!important;
    }
    .cod_container_button_order.cod_sticky #modal_checkout{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        box-sizing:border-box!important;
    }
}

/* =========================================================
 * ComprandoYA Checkout 1.0.28 — Joinchat + totals consistency
 * ======================================================= */

/* Joinchat supports --bottom natively. The JS sets it from the real sticky height. */
@media (max-width:767px){
    body:has(.cod_container_button_order.cod_sticky) .joinchat{
        z-index:2147483647 !important;
    }
}



/* =========================================================
 * ComprandoYA Checkout 1.0.30 — configurable design system
 * ======================================================= */
#codFormModal .cyco-modal-title,
#codFormModal .cod-modal-content > h3,
#codFormModal h3.cyco-modal-title{
    color:var(--cod-modal-title-color,#111111)!important;
    font-size:var(--cod-title-size,18px)!important;
}
#codFormModal .cyco-product-name{
    font-size:var(--cyco-product-name-font-size,12px)!important;
    color:var(--cyco-product-name-color,#333333)!important;
}
#codFormModal .cyco-product-price{
    font-size:var(--cyco-product-price-font-size,13px)!important;
    color:var(--cyco-product-price-color,#1237d6)!important;
}
#codFormModal #checkout_form .cyco-form-section-title{
    font-size:var(--cyco-personal-title-size,17px)!important;
}
#codFormModal #checkout_form .cyco-form-section-shipping .cyco-form-section-title{
    font-size:var(--cyco-shipping-title-size,17px)!important;
}
#codFormModal .cod_table.subtotal-total{
    border-radius:var(--cyco-totals-card-radius,12px)!important;
}
#codFormModal .cod_table.subtotal-total .cyco-total-label{
    font-weight:500!important;
    line-height:1.2!important;
}
#codFormModal .cod_table.subtotal-total .subtotal_td .cyco-total-label{
    font-size:var(--cyco-totals-subtotal-title-size,14px)!important;
    color:var(--cyco-totals-subtotal-title-color,#556070)!important;
}
#codFormModal .cod_table.subtotal-total .subtotal-amount,
#codFormModal .cod_table.subtotal-total .subtotal-amount .woocommerce-Price-amount{
    font-size:var(--cyco-totals-subtotal-value-size,20px)!important;
    color:var(--cyco-totals-subtotal-value-color,#0066FF)!important;
    font-weight:700!important;
    line-height:1.15!important;
}
#codFormModal .cod_table.subtotal-total .cyco-shipping-total .cyco-total-label{
    font-size:var(--cyco-totals-shipping-title-size,14px)!important;
    color:var(--cyco-totals-shipping-title-color,#556070)!important;
}
#codFormModal .cod_table.subtotal-total .cyco-shipping-total .shipping-amount,
#codFormModal .cod_table.subtotal-total .cyco-shipping-total .shipping-amount .woocommerce-Price-amount,
#codFormModal .cod_table.subtotal-total .cyco-shipping-pending-text{
    font-size:var(--cyco-totals-shipping-value-size,20px)!important;
    color:var(--cyco-totals-pending-color,#F59E0B)!important;
    font-weight:700!important;
    line-height:1.15!important;
}
#codFormModal .cod_table.subtotal-total .cyco-shipping-note{
    font-size:var(--cyco-totals-shipping-hint-size,12px)!important;
    color:var(--cyco-totals-shipping-hint-color,#9CA3AF)!important;
    font-weight:400!important;
    line-height:1.15!important;
}
#codFormModal .cod_table.subtotal-total .total .cyco-total-label{
    font-size:var(--cyco-totals-total-title-size,14px)!important;
    color:var(--cyco-totals-total-title-color,#556070)!important;
}
#codFormModal .cod_table.subtotal-total .total-amount,
#codFormModal .cod_table.subtotal-total .total-amount .woocommerce-Price-amount{
    font-size:var(--cyco-totals-total-value-size,20px)!important;
    color:var(--cyco-totals-total-value-color,#0066FF)!important;
    font-weight:700!important;
    line-height:1.15!important;
}

/* =========================================================
 * ComprandoYA Checkout 1.0.30 — producto y selectores responsive
 * ======================================================= */
#codFormModal .cyco-product-group .cyco-product-name{
    font-size:var(--cyco-product-name-font-size,12px)!important;
}
#codFormModal .cyco-product-group .cyco-product-price{
    font-size:var(--cyco-product-price-font-size,13px)!important;
}

/* En productos variables, el bloque de variantes ocupa solo el espacio
 * que necesita hasta un máximo razonable; así el nombre aprovecha el resto. */
#codFormModal .cyco-variable-group{
    grid-template-columns:minmax(0,1fr) minmax(230px,56%)!important;
}
#codFormModal .cyco-variable-group .cyco-group-options{
    width:max-content;
    max-width:100%;
    justify-self:end;
}
#codFormModal .cyco-variable-group .cyco-variant-row{
    grid-template-columns:minmax(110px,1fr) 68px 20px;
}
#codFormModal .cyco-variable-group .cyco-variant-fields{
    width:max-content;
    max-width:100%;
    grid-template-columns:repeat(auto-fit,minmax(110px,max-content));
}
#codFormModal .cyco-variable-group .cyco-variation-field{
    width:max-content;
    max-width:100%;
}
#codFormModal .cyco-variable-group .cyco-variation-select{
    width:100%!important;
    max-width:100%!important;
    min-width:110px!important;
}

@media (max-width:767px){
    /* No volver a reducir el nombre a 10px: el valor configurado por el
     * administrador debe ser respetado también en móvil. */
    #codFormModal .cyco-product-group .cyco-product-name{
        font-size:var(--cyco-product-name-font-size,12px)!important;
    }
    #codFormModal .cyco-product-group .cyco-product-price{
        font-size:var(--cyco-product-price-font-size,13px)!important;
    }
    #codFormModal .cyco-variable-group{
        grid-template-columns:minmax(0,1fr) minmax(200px,58%)!important;
    }
    #codFormModal .cyco-variable-group .cyco-group-options{
        width:100%;
        max-width:100%;
    }
    #codFormModal .cyco-variable-group .cyco-variant-fields{
        width:100%;
        grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    }
    #codFormModal .cyco-variable-group .cyco-variation-field,
    #codFormModal .cyco-variable-group .cyco-variation-select{
        width:100%!important;
        min-width:0!important;
    }
}

/* Advance Checkout CY 1.0.32: optional custom modal images */
#codFormModal .cyco-modal-custom-image{width:100%;margin:0 0 12px;text-align:center;line-height:0}
#codFormModal .cyco-modal-custom-image img{display:block;width:100%;height:auto;max-width:100%;max-height:320px;object-fit:cover;margin:0 auto;border-radius:10px}
#codFormModal .cyco-modal-image-bottom{margin:12px 0 0}

/* Advance Checkout CY 1.0.41 — CTA turns green only when the checkout is complete. */
#codFormModal #place_order {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
#codFormModal #place_order.cyco-button-ready {
    background-color: var(--cod-btn-ready-bg, #16a34a) !important;
    color: var(--cod-btn-ready-color, #ffffff) !important;
    border-color: var(--cod-btn-ready-bg, #16a34a) !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .18);
}
#codFormModal #place_order.cyco-button-ready:hover,
#codFormModal #place_order.cyco-button-ready:focus {
    filter: brightness(.94);
}


/* Advance Checkout CY 1.0.44 — mobile/tablet product card layout.
 * Desktop remains unchanged. On <= 900px the product identity occupies the
 * first row and the variation/quantity/remove controls occupy the second row.
 */
@media (max-width: 900px){
    #codFormModal .cyco-product-group{
        display:grid!important;
        grid-template-columns:1fr!important;
        grid-template-areas:"product" "options"!important;
        row-gap:9px!important;
        column-gap:0!important;
        padding:9px 10px!important;
        align-items:start!important;
    }
    #codFormModal .cyco-group-product{
        grid-area:product!important;
        display:grid!important;
        grid-template-columns:58px minmax(0,1fr)!important;
        align-items:center!important;
        gap:9px!important;
        width:100%!important;
    }
    #codFormModal .cyco-group-product .cyco-product-thumb,
    #codFormModal .cyco-group-product .cyco-product-thumb img{
        width:58px!important;
        height:58px!important;
        flex-basis:58px!important;
        max-width:58px!important;
        object-fit:cover!important;
    }
    #codFormModal .cyco-group-product .cyco-product-info{
        min-width:0!important;
    }
    #codFormModal .cyco-product-group .cyco-product-name{
        font-size:14px!important;
        line-height:1.25!important;
        font-weight:600!important;
    }
    #codFormModal .cyco-product-group .cyco-product-price{
        margin-top:3px!important;
        font-size:14px!important;
        line-height:1.2!important;
        font-weight:700!important;
    }
    #codFormModal .cyco-group-options{
        grid-area:options!important;
        width:100%!important;
    }
    #codFormModal .cyco-variant-row{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 78px 30px!important;
        column-gap:7px!important;
        align-items:end!important;
        width:100%!important;
    }
    #codFormModal .cyco-variant-row .cyco-variant-fields{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        gap:0!important;
        min-width:0!important;
    }
    #codFormModal .cyco-variant-row .cyco-variation-field{
        min-width:0!important;
    }
    #codFormModal .cyco-variation-field label,
    #codFormModal .cyco-product-qty-wrap>label{
        font-size:10px!important;
        margin-bottom:3px!important;
    }
    #codFormModal .cyco-variation-select{
        height:36px!important;
        font-size:12px!important;
        padding:4px 8px!important;
    }
    #codFormModal .cyco-variant-row .cyco-product-qty-wrap,
    #codFormModal .cyco-variant-row .cyco-qty{
        width:78px!important;
        max-width:78px!important;
    }
    #codFormModal .cyco-variant-row .cyco-qty{
        height:36px!important;
    }
    #codFormModal .cyco-variant-row .cyco-remove-product{
        width:30px!important;
        height:30px!important;
        align-self:end!important;
        justify-self:end!important;
        font-size:18px!important;
    }
    #codFormModal .cyco-simple-group .cyco-variant-row{
        grid-template-columns:78px 30px!important;
    }
}


/* Advance Checkout CY 1.0.45 — definitive mobile/tablet product-card layout. */
@media screen and (max-width:1024px){
    #codFormModal .cyco-product-group.cyco-variable-group,
    #codFormModal .cyco-product-group.cyco-simple-group{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        grid-template-areas:"product" "options"!important;
        grid-auto-flow:row!important;
        align-items:start!important;
        row-gap:10px!important;
        column-gap:0!important;
        width:100%!important;
        box-sizing:border-box!important;
        padding:10px!important;
    }
    #codFormModal .cyco-product-group > .cyco-group-product{
        grid-area:product!important;
        display:grid!important;
        grid-template-columns:64px minmax(0,1fr)!important;
        align-items:center!important;
        gap:10px!important;
        width:100%!important;
        min-width:0!important;
        margin:0!important;
    }
    #codFormModal .cyco-product-group > .cyco-group-product > .cyco-product-thumb,
    #codFormModal .cyco-product-group > .cyco-group-product > .cyco-product-thumb img{
        width:64px!important;
        height:64px!important;
        min-width:64px!important;
        max-width:64px!important;
        min-height:64px!important;
        max-height:64px!important;
        flex:0 0 64px!important;
        object-fit:cover!important;
    }
    #codFormModal .cyco-product-group > .cyco-group-product > .cyco-product-info{
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        justify-content:center!important;
        width:100%!important;
        min-width:0!important;
        overflow:hidden!important;
    }
    #codFormModal .cyco-product-group > .cyco-group-product .cyco-product-name{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        font-size:14px!important;
        line-height:1.25!important;
        font-weight:600!important;
        white-space:normal!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        margin:0!important;
    }
    #codFormModal .cyco-product-group > .cyco-group-product .cyco-product-price{
        margin-top:3px!important;
        font-size:15px!important;
        line-height:1.2!important;
        font-weight:700!important;
    }
    #codFormModal .cyco-product-group > .cyco-group-options{
        grid-area:options!important;
        display:flex!important;
        flex-direction:column!important;
        gap:7px!important;
        width:100%!important;
        min-width:0!important;
        margin:0!important;
    }
    #codFormModal .cyco-product-group .cyco-variant-row{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 88px 34px!important;
        grid-template-areas:"fields qty remove"!important;
        align-items:end!important;
        column-gap:8px!important;
        width:100%!important;
        min-width:0!important;
        margin:0!important;
    }
    #codFormModal .cyco-product-group .cyco-variant-row .cyco-variant-fields{
        grid-area:fields!important;
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        width:100%!important;
        min-width:0!important;
        gap:0!important;
    }
    #codFormModal .cyco-product-group .cyco-variant-row .cyco-product-qty-wrap{
        grid-area:qty!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        width:88px!important;
        min-width:88px!important;
    }
    #codFormModal .cyco-product-group .cyco-variant-row .cyco-qty{
        width:88px!important;
        max-width:88px!important;
        height:36px!important;
        min-height:36px!important;
    }
    #codFormModal .cyco-product-group .cyco-variant-row .cyco-remove-product{
        grid-area:remove!important;
        position:static!important;
        width:34px!important;
        min-width:34px!important;
        height:34px!important;
        min-height:34px!important;
        margin:0!important;
        align-self:end!important;
        justify-self:end!important;
        font-size:18px!important;
    }
    #codFormModal .cyco-product-group .cyco-variation-field label,
    #codFormModal .cyco-product-group .cyco-product-qty-wrap > label{
        font-size:10px!important;
        line-height:1.15!important;
        margin:0 0 3px!important;
    }
    #codFormModal .cyco-product-group .cyco-variation-select{
        width:100%!important;
        height:36px!important;
        min-height:36px!important;
        font-size:12px!important;
        padding:5px 8px!important;
    }
    #codFormModal .cyco-product-group.cyco-simple-group .cyco-variant-row{
        grid-template-columns:minmax(0,1fr) 88px 34px!important;
        grid-template-areas:"spacer qty remove"!important;
    }
}


/* =========================================================
 * Advance Checkout CY 1.0.47 — mobile/tablet product card
 * Approved layout: preserve the existing gray card and image size.
 * Product title wraps to max 2 lines; price sits directly below it.
 * Variant/color + quantity + remove controls occupy the next row.
 * Desktop layout is untouched.
 * ========================================================= */
@media screen and (max-width:1024px){
    #codFormModal .cyco-product-group.cyco-variable-group,
    #codFormModal .cyco-product-group.cyco-simple-group{
        background:#f5f5f5 !important;
        border:1px solid #e9e9e9 !important;
        border-radius:6px !important;
        padding:8px 9px !important;
        box-sizing:border-box !important;
    }

    /* Identity row: keep the existing 52px image; title + price share its height. */
    #codFormModal .cyco-product-group > .cyco-group-product{
        display:grid !important;
        grid-template-columns:52px minmax(0,1fr) !important;
        grid-template-areas:"thumb info" !important;
        align-items:center !important;
        column-gap:8px !important;
        width:100% !important;
        min-width:0 !important;
        height:52px !important;
        max-height:52px !important;
    }

    #codFormModal .cyco-product-group > .cyco-group-product > .cyco-product-thumb,
    #codFormModal .cyco-product-group > .cyco-group-product > .cyco-product-thumb img{
        grid-area:thumb !important;
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
        max-width:52px !important;
        min-height:52px !important;
        max-height:52px !important;
        flex:0 0 52px !important;
        object-fit:cover !important;
        border-radius:5px !important;
    }

    #codFormModal .cyco-product-group > .cyco-group-product > .cyco-product-info{
        grid-area:info !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:center !important;
        width:100% !important;
        min-width:0 !important;
        height:52px !important;
        max-height:52px !important;
        overflow:hidden !important;
    }

    /* Title: up to two lines, using the admin-configured font size/color. */
    #codFormModal .cyco-product-group > .cyco-group-product .cyco-product-name{
        width:100% !important;
        min-width:0 !important;
        max-height:30px !important;
        margin:0 !important;
        padding:0 !important;
        font-size:var(--cyco-product-name-font-size,12px) !important;
        color:var(--cyco-product-name-color,#333333) !important;
        line-height:15px !important;
        font-weight:500 !important;
        white-space:normal !important;
        overflow:hidden !important;
        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;
        text-overflow:ellipsis !important;
    }

    /* Price: directly below title, never placed to its right. */
    #codFormModal .cyco-product-group > .cyco-group-product .cyco-product-price{
        width:100% !important;
        min-width:0 !important;
        height:17px !important;
        max-height:17px !important;
        margin:2px 0 0 !important;
        padding:0 !important;
        font-size:var(--cyco-product-price-font-size,13px) !important;
        color:var(--cyco-product-price-color,#1237d6) !important;
        line-height:17px !important;
        font-weight:700 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    /* Variant/color + quantity + remove are the next row. */
    #codFormModal .cyco-product-group > .cyco-group-options{
        width:100% !important;
        min-width:0 !important;
        margin:7px 0 0 !important;
        display:flex !important;
        flex-direction:column !important;
        gap:4px !important;
    }

    #codFormModal .cyco-product-group .cyco-variant-row{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 78px 22px !important;
        grid-template-areas:"fields qty remove" !important;
        align-items:end !important;
        column-gap:7px !important;
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
    }

    #codFormModal .cyco-product-group .cyco-variant-row .cyco-variant-fields{
        grid-area:fields !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        width:100% !important;
        min-width:0 !important;
        gap:4px !important;
    }

    #codFormModal .cyco-product-group .cyco-variant-row .cyco-product-qty-wrap{
        grid-area:qty !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        width:78px !important;
        min-width:78px !important;
    }

    #codFormModal .cyco-product-group .cyco-variant-row .cyco-qty{
        width:78px !important;
        max-width:78px !important;
        height:36px !important;
        min-height:36px !important;
    }

    #codFormModal .cyco-product-group .cyco-variant-row .cyco-remove-product{
        grid-area:remove !important;
        position:static !important;
        width:22px !important;
        min-width:22px !important;
        height:22px !important;
        min-height:22px !important;
        margin:0 0 7px !important;
        padding:0 !important;
        align-self:end !important;
        justify-self:end !important;
        font-size:14px !important;
    }

    #codFormModal .cyco-product-group .cyco-variation-field label,
    #codFormModal .cyco-product-group .cyco-product-qty-wrap > label{
        font-size:10px !important;
        line-height:1.15 !important;
        margin:0 0 3px !important;
    }

    #codFormModal .cyco-product-group .cyco-variation-select{
        width:100% !important;
        min-width:0 !important;
        height:36px !important;
        min-height:36px !important;
        font-size:12px !important;
        padding:5px 8px !important;
    }

    #codFormModal .cyco-product-group.cyco-simple-group .cyco-variant-row{
        grid-template-columns:minmax(0,1fr) 78px 22px !important;
        grid-template-areas:"spacer qty remove" !important;
    }
}


/* =========================================================
 * Advance Checkout CY 1.0.48 — restore SIMPLE product layout
 *
 * The 1.0.47 responsive card layout is intentionally restricted to
 * variable products. Simple products keep their previous compact
 * product/options two-column presentation on mobile/tablet.
 * ========================================================= */
@media screen and (max-width:1024px){
    #codFormModal .cyco-product-group.cyco-simple-group{
        display:grid!important;
        grid-template-columns:minmax(135px,45%) minmax(0,55%)!important;
        grid-template-areas:"product options"!important;
        grid-auto-flow:initial!important;
        align-items:center!important;
        column-gap:7px!important;
        row-gap:0!important;
        padding:7px 6px!important;
        background:#f5f5f5!important;
        border:1px solid #e9e9e9!important;
        border-radius:6px!important;
    }

    #codFormModal .cyco-simple-group > .cyco-group-product{
        grid-area:product!important;
        display:flex!important;
        align-items:flex-start!important;
        gap:6px!important;
        width:auto!important;
        height:auto!important;
        max-height:none!important;
        min-width:0!important;
    }

    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-thumb,
    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-thumb img{
        width:48px!important;
        height:48px!important;
        min-width:48px!important;
        max-width:48px!important;
        min-height:48px!important;
        max-height:48px!important;
        flex:0 0 48px!important;
        object-fit:cover!important;
    }

    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-info{
        display:flex!important;
        flex:1 1 auto!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        justify-content:center!important;
        width:auto!important;
        height:auto!important;
        max-height:none!important;
        min-width:0!important;
        overflow:hidden!important;
    }

    #codFormModal .cyco-simple-group .cyco-product-name{
        width:100%!important;
        max-height:none!important;
        margin:0!important;
        padding:0!important;
        font-size:10px!important;
        line-height:1.15!important;
        font-weight:500!important;
        white-space:normal!important;
        overflow:hidden!important;
        display:block!important;
        -webkit-line-clamp:initial!important;
        line-clamp:initial!important;
        text-overflow:clip!important;
    }

    #codFormModal .cyco-simple-group .cyco-product-price{
        width:auto!important;
        height:auto!important;
        max-height:none!important;
        margin-top:2px!important;
        padding:0!important;
        font-size:12px!important;
        line-height:1.15!important;
        font-weight:700!important;
        white-space:nowrap!important;
        overflow:visible!important;
    }

    #codFormModal .cyco-simple-group > .cyco-group-options{
        grid-area:options!important;
        width:auto!important;
        min-width:0!important;
        margin:0!important;
        display:flex!important;
        flex-direction:column!important;
        gap:2px!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row{
        display:grid!important;
        grid-template-columns:64px 18px!important;
        grid-template-areas:"qty remove"!important;
        justify-content:end!important;
        align-items:end!important;
        column-gap:4px!important;
        width:100%!important;
        min-width:0!important;
        margin:0!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-product-qty-wrap{
        grid-area:qty!important;
        grid-column:auto!important;
        width:64px!important;
        min-width:64px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-qty{
        width:64px!important;
        max-width:64px!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-remove-product{
        grid-area:remove!important;
        grid-column:auto!important;
        position:relative!important;
        width:18px!important;
        min-width:18px!important;
        height:18px!important;
        min-height:18px!important;
        margin:0!important;
        align-self:end!important;
        justify-self:end!important;
        font-size:11px!important;
    }

    /* A simple product has no variant selector, so do not reserve a fake
       variant column or apply the variable-product second-row treatment. */
    #codFormModal .cyco-simple-group .cyco-variant-fields,
    #codFormModal .cyco-simple-group .cyco-variation-field,
    #codFormModal .cyco-simple-group .cyco-variation-select{
        display:none!important;
    }
}

@media screen and (max-width:620px){
    #codFormModal .cyco-product-group.cyco-simple-group{
        grid-template-columns:minmax(135px,44%) minmax(0,56%)!important;
        column-gap:7px!important;
        padding:7px 6px!important;
    }
}


/* =========================================================
 * Advance Checkout CY 1.0.49 — simple-product mobile/tablet alignment
 * ========================================================= */
@media screen and (max-width:1024px){
    #codFormModal .cyco-product-group.cyco-simple-group{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 78px 22px!important;
        grid-template-rows:auto auto!important;
        grid-template-areas:"product . ." "options options options"!important;
        column-gap:7px!important;
        row-gap:7px!important;
        align-items:start!important;
        width:100%!important;
        box-sizing:border-box!important;
        padding:8px 9px!important;
        background:#f5f5f5!important;
        border:1px solid #e9e9e9!important;
        border-radius:6px!important;
    }
    #codFormModal .cyco-simple-group > .cyco-group-product{
        grid-area:product!important;
        display:grid!important;
        grid-template-columns:52px minmax(0,1fr)!important;
        align-items:center!important;
        column-gap:8px!important;
        width:100%!important;
        min-width:0!important;
        height:52px!important;
        max-height:52px!important;
        margin:0!important;
    }
    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-thumb,
    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-thumb img{
        width:52px!important;height:52px!important;min-width:52px!important;max-width:52px!important;
        min-height:52px!important;max-height:52px!important;flex:0 0 52px!important;object-fit:cover!important;border-radius:5px!important;
    }
    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-info{
        display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
        width:100%!important;min-width:0!important;height:52px!important;max-height:52px!important;overflow:hidden!important;margin:0!important;
    }
    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-name{
        width:100%!important;max-width:100%!important;min-width:0!important;max-height:30px!important;margin:0!important;padding:0!important;
        font-size:var(--cyco-product-name-font-size,12px)!important;color:var(--cyco-product-name-color,#333333)!important;
        line-height:15px!important;font-weight:500!important;white-space:normal!important;overflow:hidden!important;
        display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;text-overflow:ellipsis!important;
    }
    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-price{
        width:100%!important;max-width:100%!important;min-width:0!important;height:17px!important;max-height:17px!important;
        margin:2px 0 0!important;padding:0!important;font-size:var(--cyco-product-price-font-size,13px)!important;
        color:var(--cyco-product-price-color,#1237d6)!important;line-height:17px!important;font-weight:700!important;white-space:nowrap!important;
        overflow:hidden!important;text-overflow:ellipsis!important;
    }
    #codFormModal .cyco-simple-group > .cyco-group-options{
        grid-area:options!important;width:100%!important;min-width:0!important;margin:0!important;display:flex!important;flex-direction:column!important;gap:4px!important;
    }
    #codFormModal .cyco-simple-group .cyco-variant-row{
        display:grid!important;grid-template-columns:minmax(0,1fr) 78px 22px!important;grid-template-areas:"spacer qty remove"!important;
        align-items:end!important;column-gap:7px!important;width:100%!important;min-width:0!important;margin:0!important;
    }
    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-product-qty-wrap{
        grid-area:qty!important;width:78px!important;min-width:78px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;
    }
    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-qty{
        width:78px!important;max-width:78px!important;height:36px!important;min-height:36px!important;
    }
    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-remove-product{
        grid-area:remove!important;position:static!important;width:22px!important;min-width:22px!important;height:22px!important;min-height:22px!important;
        margin:0 0 7px!important;padding:0!important;align-self:end!important;justify-self:end!important;font-size:14px!important;
    }
}

/* =========================================================
 * Advance Checkout CY 1.0.50 — simple product alignment + quantity merge
 * Mobile/tablet only. Simple cards return to their compact original height;
 * only the quantity column is horizontally aligned with variable products.
 * ========================================================= */
@media screen and (max-width:1024px){
    #codFormModal .cyco-product-group.cyco-simple-group{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 78px 22px!important;
        grid-template-rows:52px!important;
        grid-template-areas:"product qty remove"!important;
        align-items:center!important;
        column-gap:7px!important;
        row-gap:0!important;
        width:100%!important;
        min-height:0!important;
        height:68px!important;
        box-sizing:border-box!important;
        padding:8px 9px!important;
        overflow:hidden!important;
    }

    #codFormModal .cyco-simple-group > .cyco-group-product{
        grid-area:product!important;
        width:100%!important;
        min-width:0!important;
        height:52px!important;
        max-height:52px!important;
        display:grid!important;
        grid-template-columns:52px minmax(0,1fr)!important;
        grid-template-areas:"thumb info"!important;
        align-items:center!important;
        column-gap:8px!important;
    }

    #codFormModal .cyco-simple-group > .cyco-group-options{
        grid-area:qty!important;
        width:78px!important;
        min-width:78px!important;
        margin:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        overflow:visible!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row{
        display:grid!important;
        grid-template-columns:78px!important;
        grid-template-areas:"qty"!important;
        width:78px!important;
        min-width:78px!important;
        margin:0!important;
        align-items:center!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-product-qty-wrap{
        grid-area:qty!important;
        width:78px!important;
        min-width:78px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        justify-content:center!important;
        margin:0!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-product-qty-wrap > label{
        display:none!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-qty{
        width:78px!important;
        max-width:78px!important;
        height:36px!important;
        min-height:36px!important;
        margin:0!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-remove-product{
        grid-area:remove!important;
        display:block!important;
        position:static!important;
        width:22px!important;
        min-width:22px!important;
        height:22px!important;
        min-height:22px!important;
        margin:0!important;
        padding:0!important;
        align-self:center!important;
        justify-self:end!important;
        font-size:14px!important;
    }

    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-name{
        max-height:30px!important;
        display:-webkit-box!important;
        -webkit-box-orient:vertical!important;
        -webkit-line-clamp:2!important;
        line-clamp:2!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    #codFormModal .cyco-simple-group > .cyco-group-product .cyco-product-price{
        margin-top:2px!important;
    }
}


/* =========================================================
 * Advance Checkout CY 1.0.52 — simple-product right-edge alignment
 * Mobile/tablet only. Keep the card height/layout from 1.0.50.
 * Simple products use the same right-edge control columns as variable
 * products: quantity first, then remove (X).
 * ========================================================= */
@media screen and (max-width:1024px){
    #codFormModal .cyco-product-group.cyco-simple-group .cyco-variant-row{
        grid-template-columns:minmax(0,1fr) 78px 22px!important;
        grid-template-areas:"spacer qty remove"!important;
        column-gap:7px!important;
        align-items:end!important;
        width:100%!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-product-qty-wrap{
        grid-area:qty!important;
        justify-self:end!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-remove-product{
        grid-area:remove!important;
        justify-self:end!important;
    }
}

/* =========================================================
 * Advance Checkout CY 1.0.53 — responsive right-edge alignment
 * Mobile/tablet only. Simple products: keep compact height and
 * anchor the quantity + remove controls as one group to the
 * right edge of the card. No fixed spacer column is used.
 * ========================================================= */
@media screen and (max-width:1024px){
    #codFormModal .cyco-product-group.cyco-simple-group{
        grid-template-columns:minmax(0,1fr) auto!important;
        grid-template-rows:52px!important;
        grid-template-areas:"product controls"!important;
        column-gap:7px!important;
        row-gap:0!important;
        height:68px!important;
        min-height:68px!important;
        align-items:center!important;
    }

    #codFormModal .cyco-simple-group > .cyco-group-options{
        grid-area:controls!important;
        width:auto!important;
        min-width:0!important;
        margin:0!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-end!important;
        justify-content:center!important;
        gap:0!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row{
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:flex-end!important;
        width:auto!important;
        min-width:0!important;
        margin:0!important;
        gap:7px!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-product-qty-wrap{
        width:78px!important;
        min-width:78px!important;
        flex:0 0 78px!important;
        margin:0!important;
        align-items:stretch!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-qty{
        width:78px!important;
        max-width:78px!important;
        margin:0!important;
    }

    #codFormModal .cyco-simple-group .cyco-variant-row .cyco-remove-product{
        width:22px!important;
        min-width:22px!important;
        height:22px!important;
        min-height:22px!important;
        flex:0 0 22px!important;
        margin:0!important;
        position:static!important;
        align-self:center!important;
    }
}