/* Exported from Customizer 2025-09-08T22:04:56+00:00 */

/* Checkout Shipping Summary Adjustment */
.ast-cart-menu-wrap .count, .ast-cart-menu-wrap .count:after {
    border-color: #aaaaaa;
    color: #aaaaaa;
}.woocommerce-cart tr.woocommerce-shipping-totals.shipping ul#shipping_method {
    min-width: 100% !important; 
    width: 100% !important;
}
.woocommerce-cart tr.woocommerce-shipping-totals.shipping td {
    border-top: none !important;
    padding-top: 0;
}
.woocommerce-cart tr.cart-subtotal {
    justify-content: space-between;
}.woocommerce-cart tr.order-total {
    width: 100% !important;
    float: left !important;
    display: flex;
    min-width: 100% !important;
    justify-content: space-between;
	    border-top: 1px solid #dddddd;
}.woocommerce-cart tr.order-total th {
    border-top: none !important;
}.woocommerce-cart tr.order-total td {
    border-top: none !important;
}


.ast-product-name {
    text-align: left;
}.woocommerce-cart .shop_table.shop_table_responsive .cart-subtotal {
    border-bottom: 1px solid #dddddd !important;
    float: left;
}.woocommerce-cart .shop_table.shop_table_responsive tr.woocommerce-shipping-totals.shipping th {
    border-top: none;
}
tr.cart_item .product-name {
    width: 100% !important;
}tfoot {
    display: contents;
    width: 100%;
}tr.cart-subtotal {
    width: 100% !important;
    float: left !important;
    display: flex;
}

tr.order-total {
    width: 100% !important;
    float: left !important;
    display: flex;
}
/* Adjust general formatting Single Product Specs table */
table.shop_attributes {
    width: 100% !important;
    border-collapse: collapse;
}
tr.woocommerce-shipping-totals.shipping ul#shipping_method li {
    padding-left: 0px !important;
}tr.woocommerce-shipping-totals.shipping ul#shipping_method {
    min-width:auto !important;
    /* margin-left: 0px; */
}
table.shop_attributes th,
table.shop_attributes td {
    padding: 10px;
    border: 1px solid #ccc;
}

/* Adjust column widths */
table.shop_attributes th {
    width: 30%; /* Adjust as needed */
}

table.shop_attributes td {
    width:70%; /* Adjust as needed */
}

/* Alternating row colors */
table.shop_attributes tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Lighter color for odd rows */
}

table.shop_attributes tbody tr:nth-child(even) {
    background-color: #e9e9e9; /* Slightly darker color for even rows */
}


/*-------------------------------Checkout---------------------------------/

/* Envia Shipping Options plugin Boxes */
/* Dashed box around each shipping option — adjustable inner spacing */
.woocommerce-checkout ul#shipping_method.woocommerce-shipping-methods > li,
.woocommerce-cart ul#shipping_method.woocommerce-shipping-methods > li {
  position: relative !important;

  /* ⬇️ knobs */
  --box-pad-left: 12px;    /* increase = more space on LEFT */
  --box-pad-right: 12px;   /* increase = more space on RIGHT (protects price) */
  --box-pad-top: 4px;      /* increase = more space on TOP */
  --box-pad-bottom: 4px;   /* increase = more space on BOTTOM */
  --outline-offset: -2px;   /* negative draws inside on ALL sides; positive pushes out */
  --radius: 0px;           /* 0 = squared corners */

  padding-left: var(--box-pad-left) !important;
  padding-right: var(--box-pad-right) !important;
  padding-top: var(--box-pad-top) !important;
  padding-bottom: var(--box-pad-bottom) !important;

  outline: 1px dashed #C8CDD5 !important;
  outline-offset: var(--outline-offset) !important;
  border-radius: var(--radius) !important;
}

/* Change login form access title */
/* Checkout: visually replace the "showlogin" link text without touching PHP/JS */
.woocommerce-checkout .woocommerce-info a.showlogin {
  position: relative;           /* anchor container for the pseudo-element */
  font-size: 0;                 /* hide original text without affecting layout */
  color: inherit;               /* keep theme color */
  white-space: normal;          /* allow wrapping on narrow screens */
  text-decoration: underline;   /* keep it looking like a link */
}

/* Inject the new visible text */
.woocommerce-checkout .woocommerce-info a.showlogin::after {
  content: "Inicia sesión para acelerar tu compra"; /* new visible label */
  font-size: 1rem;              /* restore readable size (inherits line-height) */
  line-height: 1.85;            /* comfortable wrapping */
  display: inline;              /* keep natural flow */
  color: currentColor;          /* match link color */
}

/* If the theme adds icons via ::before, keep them visible and spaced */
.woocommerce-checkout .woocommerce-info a.showlogin::before {
  font-size: 1rem;              /* same visual scale as the new text */
  margin-right: 0.35em;         /* small gap between icon and text */
}

/* Very narrow screens: slightly reduce to avoid crowding */
@media (max-width: 375px) {
  .woocommerce-checkout .woocommerce-info a.showlogin::after,
  .woocommerce-checkout .woocommerce-info a.showlogin::before {
    font-size: 0.95rem;
  }
}

/* Ultra-narrow devices: ensure clean wrapping with no overflow */
@media (max-width: 360px) {
  .woocommerce-checkout .woocommerce-info a.showlogin::after {
    word-break: break-word;     /* last-resort wrap on long words */
  }
}

/* Checkout > Login box — visual container with dark gray border and white background */
.woocommerce-checkout form.woocommerce-form-login.login {
  /* === Tunable params === */
  --login-box-border: #9a9a9a;      /* adjust to match your existing gray dividers */
  --login-box-bg: #fff;             /* white background inside the box */
  --login-box-pad-x: 16px;          /* horizontal padding */
  --login-box-pad-y: 16px;          /* vertical padding */
  --login-box-radius: 0px;          /* keep 90° corners to match your current style */
  --login-row-gap: 12px;            /* vertical rhythm between rows */
  --login-box-sep: 16px;            /* NEW: vertical separation so the top border is visible */
  --login-title-size: 1.125rem;     /* 1.0–1.25rem */
  --login-title-weight: 600;        /* 500–700 */
  --login-title-color: #222;        /* match your headings color */
  --login-title-gap: 14px;          /* space below title */
  --login-title-top-gap: 12px;       /* NEW: distance from top line to title */


 /* NEW: ensure the top border renders (themes sometimes zero it out when adjacent to notices) */
  position: relative;                 /* needed for the ::before top line */
  margin-top: var(--login-box-sep);
  background: 
    linear-gradient(var(--login-box-border), var(--login-box-border)) top/100% 1px no-repeat,
    var(--login-box-bg); /* keep white background */
  border: 1px solid var(--login-box-border);
  border-top: 0 !important;           /* avoid double top line with the pseudo-line */
  border-radius: var(--login-box-radius);
  padding: var(--login-box-pad-y) var(--login-box-pad-x);
  padding-top: calc(var(--login-box-pad-y) + var(--login-title-top-gap) + 28px);
  box-sizing: border-box;
  z-index: 2;             /* lift above the notice if it overlaps */
  overflow: visible;      /* allow negative offset to show if needed */
}

/* The real node printed by the PHP hook */
.woocommerce-checkout form.woocommerce-form-login.login .obal-login-title {
  position: absolute;
  top: calc(var(--login-box-pad-y) + var(--login-title-top-gap));
  left: var(--login-box-pad-x);
  right: var(--login-box-pad-x);
  font-size: var(--login-title-size);
  font-weight: var(--login-title-weight);
  line-height: 1.25;
  color: var(--login-title-color);
  margin: 0 0 var(--login-title-gap) 0; /* visual rhythm below title */
  pointer-events: none; /* title is decorative */
}

/* Checkout > Login box: match Billing column on desktop */
@media (min-width: 1024px) {
  .woocommerce-checkout form.woocommerce-form-login.login {
    /* Tune these until el borde derecho coincida con Billing */
    /* --left-col-pc: 57%;
    --mid-gap: 24px;      

    width: calc(var(--left-col-pc) - var(--mid-gap)); */
    margin-left: 0;
    margin-right: auto;   /* mantiene el bloque pegado a la izquierda; el ancho fija el borde derecho */
  }

  /* Knob: adjust in small steps (-12px / -16px / -20px / -24px) */
  :root {
    --ob-right-col-lift: 0px;
  }

}

/* === Checkout > Login: full-width box (left column) + centered inner === */
/* Desktop-only: do NOT affect mobile */
@media (min-width: 1024px) {
  /* Knobs (tune as needed)
     --login-inner-max: inner content max-width (inputs, button, link)
     --login-inner-gap: vertical rhythm between rows
     --login-title-align: title text alignment (left|center)
  */
  .woocommerce-checkout form.woocommerce-form-login.login {
    /* make the card span the whole left column width */
    width: 100%;
    margin-left: 0;
    margin-right: 0;

    /* inner layout knobs */
    --login-inner-max: 460px;   /* 420–520px works well */
    --login-inner-gap: 12px;    /* 10–16px */
    --login-title-align: center;
    text-align: var(--login-title-align);
  }

  /* center every direct child inside the card to the same max width */
  .woocommerce-checkout form.woocommerce-form-login.login > *:not(.clear) {
    max-width: var(--login-inner-max);
    margin-left: auto;
    margin-right: auto;
  }

  /* spacing rhythm inside */
  .woocommerce-checkout form.woocommerce-form-login.login p {
    margin-bottom: var(--login-inner-gap);
  }

  /* button full width of the inner content, centered */
  .woocommerce-checkout form.woocommerce-form-login.login .woocommerce-form-login__submit {
    width: 100%;
    max-width: var(--login-inner-max);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* "¿Olvidaste…?" centered with the inner */
  .woocommerce-checkout form.woocommerce-form-login.login .lost_password {
    max-width: var(--login-inner-max);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}



/* Checkout > Login: push the submit button below the remember-me row */
.woocommerce-checkout form.woocommerce-form-login.login .woocommerce-form-login__submit {
  display: block;           /* force a new line */
  float: none !important;   /* neutralize theme floats */
  clear: both;              /* drop below any floated siblings */
  margin-top: 10px;         /* breathing room */
  width: 100%;              /* full-width button; remove if you prefer auto width */
}

/* Checkout > Login: style "¿Olvidaste la contraseña?" link */
.woocommerce-checkout form.woocommerce-form-login.login .lost_password a,
.woocommerce-checkout form.woocommerce-form-login.login .lost_password a:visited {
  color: rgba(0, 0, 255, 1);     /* requested blue */
  text-decoration: underline;    /* always underlined */
  text-underline-offset: 2px;    /* small gap from baseline */
  text-decoration-thickness: .08em; /* crisp underline */
}

/* Hover/focus polish (optional) */
.woocommerce-checkout form.woocommerce-form-login.login .lost_password a:hover,
.woocommerce-checkout form.woocommerce-form-login.login .lost_password a:focus {
  text-decoration-thickness: .1em;
}

/* Tiny phones: reduce crowding */
@media (max-width: 360px) {
  .woocommerce-checkout form.woocommerce-form-login.login {
    padding-top: calc(var(--login-box-pad-y) + 24px);
  }
  .woocommerce-checkout form.woocommerce-form-login.login .obal-login-title {
    font-size: 1.06rem;
  }
}

/* If you kept the physical border, avoid double line on top */
.woocommerce-checkout form.woocommerce-form-login.login {
  border-top: 0 !important;  /* keep sides/bottom, fake only the top with ::before */
}

/* Spacing for paragraphs/rows inside the box */
.woocommerce-checkout form.woocommerce-form-login.login p {
  margin: 0 0 var(--login-row-gap);
}

/* First explanatory paragraph: soften spacing slightly */
.woocommerce-checkout form.woocommerce-form-login.login > p:first-child {
  margin-bottom: calc(var(--login-row-gap) + 2px);
}

/* Two-column rows: keep clean edges; container padding handles inner spacing */
.woocommerce-checkout form.woocommerce-form-login.login p.form-row-first,
.woocommerce-checkout form.woocommerce-form-login.login p.form-row-last {
  padding: 0;
}

/* Text inputs should stretch and have comfortable touch padding */
.woocommerce-checkout form.woocommerce-form-login.login .input-text,
.woocommerce-checkout form.woocommerce-form-login.login .password-input .input-text {
  width: 100%;
  padding: 10px 12px;               /* ↑ tune if theme is too tight/loose */
  box-sizing: border-box;
}

/* Remember me label: align checkbox and text nicely */
.woocommerce-checkout form.woocommerce-form-login.login .woocommerce-form__label {
  display: inline-flex;
  align-items: center;
  gap: .5em;                         /* space between checkbox and text */
}

/* Submit button: small separation from checkbox row */
.woocommerce-checkout form.woocommerce-form-login.login .woocommerce-form-login__submit {
  margin-top: .25rem;                /* tune .125rem–.5rem if needed */
}

/* Lost password link: keep close but readable */
.woocommerce-checkout form.woocommerce-form-login.login .lost_password {
  margin-top: 6px;
}

/* Clear floats (Woo classic layout) without adding visual gaps */
.woocommerce-checkout form.woocommerce-form-login.login .clear {
  height: 0;
}

/* Mobile optimizations — prevent crowding on very narrow devices */
@media (max-width: 375px) {
  .woocommerce-checkout form.woocommerce-form-login.login {
    --login-box-pad-x: 14px;
    --login-box-pad-y: 14px;
    --login-row-gap: 10px;
  }
  .woocommerce-checkout form.woocommerce-form-login.login .input-text {
    padding: 9px 11px;               /* slightly tighter for tiny screens */
  }
}

/* Safety wrap for ultra-narrow devices to avoid overflow on long words */
@media (max-width: 360px) {
  .woocommerce-checkout form.woocommerce-form-login.login {
    word-break: break-word;
  }
}

/* === Desktop FIX: restaura altura y separa "Tu pedido" de forma definitiva === */
@media (min-width: 1024px) {
  /* 1) Quita cualquier posicionamiento que lo esté pegando arriba */
  .woocommerce-checkout .col2-set > .col-1 + .col-2,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .woocommerce-checkout-review-order {
    position: static !important;
    top: auto !important;
  }

  /* 2) Gap explícito (no colapsa entre hermanos) antes del título "Tu pedido" */
  .woocommerce-checkout h3#order_review_heading {
    margin-top: 32px !important; /* ajustable: 24–40px */
  }

  /* 3) Seguro extra: espaciador antes del contenido de la columna derecha */
  .woocommerce-checkout .col2-set > .col-1 + .col-2::before {
    content: "";
    display: block;
    height: 8px; /* micro-gap extra para blindar la separación */
  }
}

/* === Checkout > Login form: centered block + left-aligned labels/aux === */
/* Desktop only (keeps mobile intact) */
@media (min-width: 1024px) {
  /* Knobs
     --login-inner-max: inner container width for fields & button
     --login-field-gap: vertical space between rows
     --login-label-gap: space below labels
  */
  .woocommerce-checkout form.woocommerce-form-login.login {
    --login-inner-max: 460px;  /* adjust 420–520px to taste */
    --login-field-gap: 12px;   /* 10–16px */
    --login-label-gap: 6px;    /* 4–10px */
  }

  /* Center the whole "row" block (inputs, checkbox row, button, lost_password) */
  .woocommerce-checkout form.woocommerce-form-login.login .form-row,
  .woocommerce-checkout form.woocommerce-form-login.login .lost_password {
    max-width: var(--login-inner-max);
    margin-left: auto;
    margin-right: auto;
  }

  /* Labels aligned left and close to the field */
  .woocommerce-checkout form.woocommerce-form-login.login .form-row > label {
    display: block;
    text-align: left;
    margin-bottom: var(--login-label-gap);
  }

  /* Inputs take full inner width (so the "block" is centered via its container) */
  .woocommerce-checkout form.woocommerce-form-login.login .form-row .input-text,
  .woocommerce-checkout form.woocommerce-form-login.login .form-row .password-input input {
    display: block;
    width: 100%;
  }

  /* Vertical rhythm between rows */
  .woocommerce-checkout form.woocommerce-form-login.login .form-row {
    margin-bottom: var(--login-field-gap);
  }

  /* Remember me row: left-aligned, same left edge as fields */
  .woocommerce-checkout form.woocommerce-form-login.login .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
  }

  /* Submit button: same centered block width, full width inside */
  .woocommerce-checkout form.woocommerce-form-login.login .woocommerce-form-login__submit {
    width: 100%;
    max-width: var(--login-inner-max);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Lost password: align text to the same left edge as fields */
  .woocommerce-checkout form.woocommerce-form-login.login .lost_password {
    text-align: left;
    margin-top: calc(var(--login-field-gap) / 2);
  }
}

/* === Checkout > Login (desktop): stack fields + center block === */
@media (min-width: 1024px) {
  /* 1) Forzar que usuario y contraseña no vayan en 2 columnas */
  .woocommerce-checkout form.woocommerce-form-login.login .form-row-first,
  .woocommerce-checkout form.woocommerce-form-login.login .form-row-last {
    float: none;        /* quita layout en columnas */
    width: 100%;        /* ocupa todo el ancho del contenedor interno */
    clear: both;        /* evita que uno se pegue a la misma fila */
  }

  /* 2) Normalizar el wrapper especial del password para que no “rompa” el ancho */
  .woocommerce-checkout form.woocommerce-form-login.login .password-input {
    display: block;     /* asegura bloque completo */
    width: 100%;
  }
  .woocommerce-checkout form.woocommerce-form-login.login .password-input input {
    width: 100%;        /* input al 100% del contenedor */
    display: block;
  }

  /* 3) Mantener el bloque centrado y alineación izquierda interna (como acordado) */
  .woocommerce-checkout form.woocommerce-form-login.login .form-row,
  .woocommerce-checkout form.woocommerce-form-login.login .lost_password {
    max-width: var(--login-inner-max, 460px);  /* knob: 420–520px */
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  /* 4) Botón con el mismo ancho del bloque centrado */
  .woocommerce-checkout form.woocommerce-form-login.login .woocommerce-form-login__submit {
    width: 100%;
    max-width: var(--login-inner-max, 460px);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* === Checkout > Login (desktop): left-align title + lost-password === */
@media (min-width: 1024px) {
  /* if earlier we set the title align to center, flip it to left */
  .woocommerce-checkout form.woocommerce-form-login.login {
    --login-title-align: left; /* knob: left | center */
  }

  /* cover both possible title nodes: custom hook (.obal-login-title) or an <h3> */
  .woocommerce-checkout form.woocommerce-form-login.login .obal-login-title,
  .woocommerce-checkout form.woocommerce-form-login.login h3 {
    max-width: var(--login-inner-max, 460px);
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* force left edge alignment */
  }

  /* "¿Olvidaste la contraseña?" aligned to the same left edge as fields */
  .woocommerce-checkout form.woocommerce-form-login.login .lost_password {
    max-width: var(--login-inner-max, 460px);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

/* === Desktop: forzar Título y "¿Olvidaste…?" a la izquierda === */
@media (min-width: 1024px) {
  /* Título (ya sea <h3> o .obal-login-title) */
  .woocommerce-checkout form.woocommerce-form-login.login h3,
  .woocommerce-checkout form.woocommerce-form-login.login .obal-login-title {
    display: block !important;
    position: static !important;
    transform: none !important;
    max-width: var(--login-inner-max, 460px) !important;
    width: 100% !important;
    margin: 0 auto !important;      /* mismo borde que los campos */
    text-align: left !important;     /* alineado a la izquierda */
  }

  /* "¿Olvidaste la contraseña?" */
  .woocommerce-checkout form.woocommerce-form-login.login .lost_password {
    display: block !important;
    max-width: var(--login-inner-max, 460px) !important;
    width: 100% !important;
    margin: 0 auto !important;      /* mismo borde que los campos */
    text-align: left !important;     /* alineado a la izquierda */
  }
}

/* === Checkout Login: alinear título y "¿Olvidaste...?" a la izquierda (desktop) === */
@media (min-width:1024px) {
  /* Knob: ancho interno de los elementos del login (mismo borde que inputs/botón) */
  .woocommerce-checkout { --login-inner-max: 460px; }

  /* Centro el bloque completo pero alineo su contenido a la izquierda */
  .woocommerce-checkout form.woocommerce-form-login {
    max-width: var(--login-inner-max);
    margin-inline: auto !important;
    padding-inline: 0;               /* evita sangrías que desalineen con los campos */
    text-align: left !important;     /* pisa centrado heredado */
    display: block;                  /* neutraliza posibles flex/center externos */
  }

  /* Título del login (sea <h3> o .obal-login-title) y "¿Olvidaste...?" alineados a la izquierda,
     tomando el mismo borde que los campos */
  .woocommerce-checkout form.woocommerce-form-login h3,
  .woocommerce-checkout form.woocommerce-form-login .obal-login-title,
  .woocommerce-checkout form.woocommerce-form-login p.lost_password {
    text-align: left !important;
    margin-left: 0 !important;
  }

  /* Por si algún centrado persiste en filas/paragraphs internos del form */
  .woocommerce-checkout form.woocommerce-form-login .form-row,
  .woocommerce-checkout form.woocommerce-form-login .woocommerce-form-row,
  .woocommerce-checkout form.woocommerce-form-login p {
    text-align: left !important;
  }
}

/* === Replace WooCommerce checkout heading text (visual only) ===
   Replaces <h3>Facturación y envío</h3> with "Datos de envío" without JS/PHP.
   Scope: checkout billing block only.
*/
.woocommerce-checkout .woocommerce-billing-fields > h3 {
  /* Hide original text visually but keep layout */
  font-size: 0 !important;
  position: relative;
  white-space: nowrap;
}

.woocommerce-checkout .woocommerce-billing-fields > h3::after {
  /* New visible text */
  content: "Datos de envío";
  font-size: 1rem;           /* inherits typical H3 sizing; adjust if needed */
  font-weight: 600;          /* match your current heading weight */
  line-height: 1.3;
  color: inherit;
  display: inline-block;
}

/* Optional: knob to tweak size if your H3 is larger */
@media (min-width: 1024px) {
  .woocommerce-checkout .woocommerce-billing-fields > h3::after {
    font-size: 1.125rem;     /* knob: bump on desktop if needed */
  }
}

/* =========================================
   Checkout: Contact heading under Billing H3 (mobile-first)
   - Visible by default on mobile
   - Optional gentle tweaks on >=1024px
   - Minimal and Astra/Woo friendly
   ========================================= */

.woocommerce-billing-fields .obal-contact-heading {
  /* === Knobs (mobile-first) === */
  /* All values below are easy to tune */
  --contact-h2-font-size-m: 12px;   /* Mobile font size */
  --contact-h2-weight-m: 700;       /* Mobile font weight */
  --contact-h2-color-m: #222;       /* Mobile color */
  --contact-h2-mt-m: 10px;          /* Top margin on mobile */
  --contact-h2-mb-m: 12px;          /* Bottom margin on mobile */

  display: block;                   /* Ensure it shows on mobile */
  font-size: var(--contact-h2-font-size-m);
  font-weight: var(--contact-h2-weight-m);
  color: var(--contact-h2-color-m);
  line-height: 1.25;
  margin: var(--contact-h2-mt-m) 0 var(--contact-h2-mb-m);
}

@media (min-width:1024px) {
  .woocommerce-billing-fields .obal-contact-heading {
    /* === Knobs (desktop overrides) === */
    --contact-h2-font-size-d: 14px; /* Desktop font size */
    --contact-h2-weight-d: 700;     /* Desktop weight (600–700) */
    --contact-h2-color-d: #222;     /* Desktop color */
    --contact-h2-mt-d: 12px;        /* Top margin on desktop */
    --contact-h2-mb-d: 16px;        /* Bottom margin on desktop */

    font-size: var(--contact-h2-font-size-d);
    font-weight: var(--contact-h2-weight-d);
    color: var(--contact-h2-color-d);
    margin: var(--contact-h2-mt-d) 0 var(--contact-h2-mb-d);
  }
}

/* =========================================
   Checkout: Top spacing for the first billing field (billing_email)
   - Mobile-first: adjust space right under "Datos de contacto" H2
   ========================================= */

#billing_email_field {
  /* === Knobs (mobile-first) === */
  --email-field-mt-m: 4px;   /* Space between H2 and email field on mobile */
  margin-top: var(--email-field-mt-m);
}

@media (min-width:1024px) {
  #billing_email_field {
    /* === Knobs (desktop) === */
    --email-field-mt-d: 6px; /* Tweak if desktop needs a bit more air */
    margin-top: var(--email-field-mt-d);
  }
}

/* =========================================
   Checkout: Heading "Dirección" below Phone (mobile-first)
   - Visible and styled on mobile by default
   - Gentle desktop refinements
   ========================================= */

.obal-billing-address-heading .obal-address-heading {
  /* === Knobs (mobile-first) === */
  --addr-h2-font-size-m: 12px;   /* Mobile font size for the heading */
  --addr-h2-weight-m: 700;       /* Mobile font weight */
  --addr-h2-color-m: #222;       /* Mobile color */
  --addr-h2-mt-m: 14px;          /* Space above the heading (after Phone) */
  --addr-h2-mb-m: 12px;          /* Space below the heading (before address fields) */

  display: block;
  font-size: var(--addr-h2-font-size-m);
  font-weight: var(--addr-h2-weight-m);
  color: var(--addr-h2-color-m);
  line-height: 1.25;
  margin: var(--addr-h2-mt-m) 0 var(--addr-h2-mb-m);
}

@media (min-width:1024px) {
  .obal-billing-address-heading .obal-address-heading {
    /* === Knobs (desktop overrides) === */
    --addr-h2-font-size-d: 14px;
    --addr-h2-weight-d: 700;
    --addr-h2-color-d: #222;
    --addr-h2-mt-d: 16px;
    --addr-h2-mb-d: 14px;

    font-size: var(--addr-h2-font-size-d);
    font-weight: var(--addr-h2-weight-d);
    color: var(--addr-h2-color-d);
    margin: var(--addr-h2-mt-d) 0 var(--addr-h2-mb-d);
  }
}

/* =========================================
   Checkout (mobile-first): Lock field order via flex + order
   Goal: Keep "Dirección" right under Phone even after AJAX rerenders
   ========================================= */

/* Make the billing fields wrapper a flex column so we can order children */
.woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper {
  display: flex;            /* Use flex layout to control child order */
  flex-direction: column;   /* Stack fields vertically (mobile-first) */
  gap: 0;                   /* We manage spacing per field if needed */
}

/* Explicit orders (mobile-first) */
/* === Knobs: adjust these order numbers if a plugin inserts extra fields === */
#billing_email_field            { order: 5;  }   /* Email on top */
#billing_first_name_field       { order: 10; }   /* Nombre */
#billing_last_name_field        { order: 15; }   /* Apellido */
#billing_phone_field            { order: 16; }   /* Teléfono */
#obal_billing_address_heading_field { order: 29; } /* H2: Dirección (our custom heading) */

/* Optional: anchor typical address fields after the heading for robustness */
#billing_address_1_field        { order: 30; }
#billing_address_2_field        { order: 31; }
#billing_postcode_field         { order: 32; }
#billing_city_field             { order: 33; }
#billing_state_field            { order: 34; }
#billing_country_field          { order: 35; }

/* --- Checkout: faux input box for disabled billing country (mobile-first) ---
   Goal: make the fixed country value look like a normal input field while
   preserving the disabled/grey background to signal it's not editable.
   No !important used; specificity relies on the field ID selector. */

#billing_country_field .woocommerce-input-wrapper {
  display: block;           /* ensure the wrapper behaves like an input container */
  cursor: not-allowed;      /* visual cue that it's not editable */
}

/* Draw a faux input around the visible value */
#billing_country_field .woocommerce-input-wrapper strong {
  display: block;
  padding: 10px 12px;       /* match typical Woo/Astra input padding */
  border: 1px solid #d9d9d9;/* align with other inputs' border color */
  border-radius: 0px;       /* match your current inputs' radius */
  background: #f5f5f5;      /* keep disabled grey so it reads as non-editable */
  color: #555;              /* slightly muted text to match disabled look */
  line-height: 1.4;
  font-weight: 500;         /* consistent with labels/inputs readability */
  min-height: 44px;         /* aligns height with typical input fields */
  display: flex;            /* vertical centering like inputs with single line */
  align-items: center;      /* centers "México" vertically */
}

/* Hover/focus states: keep subtle, do not imply interactivity */
#billing_country_field .woocommerce-input-wrapper strong:hover,
#billing_country_field .woocommerce-input-wrapper strong:focus {
  border-color: #cfcfcf;    /* tiny visual consistency with other fields */
  outline: none;
}

/* Error state consistency (if validation ever flags the row) */
.woocommerce-invalid #billing_country_field .woocommerce-input-wrapper strong {
  border-color: #e2401c;    /* WooCommerce error red */
}

/* Label spacing to match the rest */
#billing_country_field > label {
  display: inline-block;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Desktop refinements ≥1024px */
@media (min-width:1024px) {
  #billing_country_field > label { margin-bottom: 8px; }
  #billing_country_field .woocommerce-input-wrapper strong { min-height: 46px; }
}

/* Hide Openpay "Nueva tarjeta" select + its label */
#openpay_selected_card { display: none !important; }
label[for="openpay_selected_card"] { display: none !important; }

/* (Opcional) si queda un renglón vacío típico */
.payment_method_openpay .form-row { margin: 0; padding: 0; }

/* Openpay: size knobs for card number field (simple & effective) */
/* Ajusta estos valores para igualar al holder-name */
#openpay-card-number{
  /* KNOBS */
  font-size: 1.2em !important;
  height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 0px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Openpay: size knobs for EXPIRY + CVC (simple & effective) --- */
/* Ajusta estos valores para igualar con el resto de inputs */
#openpay-card-expiry,
#openpay-card-cvc{
  /* KNOBS (ajústalos a tu gusto) */
  font-size: 1.2em !important;     /* tamaño de fuente */
  height: 38px !important;          /* alto total del input */
  padding: 8px 12px !important;     /* espacio interno */
  border-radius: 0px !important;    /* esquinas */
  width: 100% !important;           /* ocupa todo el ancho */
  box-sizing: border-box !important;/* incluye padding/borde en width/height */
  line-height: 1.2 !important;      /* mantiene legibilidad */
  border: 1px solid #d9d9d9 !important; /* opcional, iguala borde */
}

/* Placeholders legibles y consistentes */
#openpay-card-expiry::placeholder,
#openpay-card-cvc::placeholder{
  font-size: 1em !important;       /* relativo al input */
  color: #999 !important;          /* tono estándar de placeholder */
}

/* Ajustes específicos (opcional) */
#openpay-card-expiry{
  letter-spacing: 0.06em !important; /* ayuda a leer MM / AA */
  text-align: left !important;       /* o 'center' si te gusta centrado */
}

#openpay-card-cvc{
  letter-spacing: 0.04em !important; /* sutil, mejora lectura del CVC */
}

/* === Openpay SPEI: hide oversized SPEI logo (mobile-first) ===
   Scope: checkout payment area only.
   Goal: remove only the SPEI logo image without touching inputs/errors.
*/

/* 1) Hide the SPEI logo wherever it appears inside the payment methods */
.woocommerce-checkout .wc_payment_methods img[src*="spei_logo.svg"],
.woocommerce-checkout .payment_box img[src*="spei_logo.svg"],
.woocommerce-checkout .payment_method_openpay_spei img[src*="spei_logo.svg"],
.woocommerce-checkout .payment_box.payment_method_openpay_spei img[src*="spei_logo.svg"] {
  display: none !important; /* force-hide in case of inline sizing */
}

/* 2) Collapse any leftover centered wrapper spacing (if the logo sat inside one) */
.woocommerce-checkout .payment_box [style*="text-align"],
.woocommerce-checkout .payment_method_openpay_spei [style*="text-align"] {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

/* === Openpay SPEI: hide secondary banner image (mobile-first) ===
   Target: <img src=".../openpay-spei//assets/images/spei.png" style="width:100%; max-height:inherit;">
   Reason: the banner breaks visual harmony; we hide only this asset.
*/

/* 1) Hide the exact SPEI banner image (robust selectors for double slash & inline styles) */
.woocommerce-checkout .payment_box img[src$="/spei.png"],
.woocommerce-checkout .payment_box img[src*="openpay-spei"][src*="spei.png"] {
  display: none !important; /* inline width present -> force hide */
}

/* 2) Optional: collapse leftover centered wrappers if any */
.woocommerce-checkout .payment_box [style*="text-align"],
.woocommerce-checkout .payment_box [style*="width: 100%"] {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

/* === Openpay: hide "Consulta los bancos soportados" link (mobile-first) ===
   Target: <a href="http://www.openpay.mx/bancos.html" ...>
   Scope: checkout payment boxes only.
   Keep the rest of Openpay intact.
*/

/* 1) Hide the specific link (covers http/https, with/without www, with/without .html) */
.woocommerce-checkout .payment_box a[href*="openpay.mx/bancos"] {
  display: none; /* no !important needed; inline style doesn't set display */
}

/* 2) Tidy up: if the link lived inside a centered wrapper or paragraph, collapse spacing */
.woocommerce-checkout .payment_box p:has(> a[href*="openpay.mx/bancos"]),
.woocommerce-checkout .payment_box div:has(> a[href*="openpay.mx/bancos"]) {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* === SPEI: hide only the "¿Qué es SPEI?" H4 (keep steps_title) ===
   Scope: Openpay SPEI payment box.
   We target H4 elements that do NOT have the 'steps_title' class.
*/

/* Primary (generic within SPEI box) */
.woocommerce-checkout .payment_box.payment_method_openpay_spei h4:not(.steps_title) {
  display: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* Optional narrower scope if that H4 lives inside a .col-md-8 */
.woocommerce-checkout .payment_box.payment_method_openpay_spei .col-md-8 h4:not(.steps_title) {
  display: none;
}

/* === SPEI: hide only the explanatory paragraph (mobile-first) ===
   Target text: "El SPEI es un sistema de pagos..."
   Keep other paragraphs (e.g., steps/instructions) intact.
*/

/* 1) Primary: the paragraph immediately after the non-steps H4 */
.woocommerce-checkout .payment_box.payment_method_openpay_spei h4:not(.steps_title) + p {
  display: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* 2) Fallback: if wrapped inside the .col-md-8 info column */
.woocommerce-checkout .payment_box.payment_method_openpay_spei .col-md-8 > p:first-of-type {
  display: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* === SPEI: align "Pasos para tu pago por transferencia interbancaria" title to the left ===
   Target: <h4 class="steps_title">
   Scope: Openpay SPEI payment box only.
*/

/* Mobile-first: left align the title */
.woocommerce-checkout .payment_box.payment_method_openpay_spei h4.steps_title {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* Desktop (≥1024px): same alignment for consistency */
@media (min-width:1024px) {
  .woocommerce-checkout .payment_box.payment_method_openpay_spei h4.steps_title {
    text-align: left;
  }
}

/* === Mercado Pago: hide oversized MP icon (mobile-first) ===
   Target: <img src=".../woocommerce-mercadopago/.../icon-mp.png?ver=...">
   Scope: checkout payment methods only. Keep inputs/errors intact.
*/

/* 1) Hide the specific Mercado Pago icon (robust to query strings) */
.woocommerce-checkout .wc_payment_methods img[src*="woocommerce-mercadopago"][src*="icon-mp.png"],
.woocommerce-checkout .payment_box img[src*="woocommerce-mercadopago"][src*="icon-mp.png"],
.woocommerce-checkout .payment_method_mercadopago img[src*="icon-mp.png"] {
  display: none !important; /* force-hide if plugin sets inline sizes */
}

/* 2) Collapse any leftover wrapper spacing (if the image sat inside a centered wrapper) */
.woocommerce-checkout .payment_method_mercadopago [style*="text-align"],
.woocommerce-checkout .payment_method_mercadopago .payment_box p:empty,
.woocommerce-checkout .payment_method_mercadopago .payment_box div:empty {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

/* === Openpay: hide the "256-bit encryption" line (mobile-first) ===
   We target the lock icon row and its paragraph.
*/

/* Hide the lock icon image (optional) */
.woocommerce-checkout .payment_box img[src*="security_symbol"] {
  display: none !important;
}

/* Hide the paragraph that sits next to the lock icon */
.woocommerce-checkout .payment_box img[src*="security_symbol"] + p,
.woocommerce-checkout .payment_box img[src*="security_symbol"] ~ p {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* Collapse the flex wrapper that contains them (so no gaps remain) */
.woocommerce-checkout .payment_box div[style*="display:flex"] {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* === Checkout: style the "política de privacidad" link (mobile-first) ===
   Target: <a class="woocommerce-privacy-policy-link">
   Goal: blue color (R:0 G:0 B:255) + underline for clarity and consistency.
*/

/* 1) Base style */
.woocommerce-checkout a.woocommerce-privacy-policy-link {
  color: rgba(0, 0, 255, 1);  /* pure blue */
  text-decoration: underline;
}

/* 2) Optional: hover style for visual feedback */
.woocommerce-checkout a.woocommerce-privacy-policy-link:hover {
  opacity: 0.8;  /* subtle hover effect */
  text-decoration: underline;
}

/* === Checkout: style the "términos y condiciones" link (mobile-first) ===
   Target: <a class="woocommerce-terms-and-conditions-link">
   Goal: underline + pure blue color (R:0 G:0 B:255 A:1)
*/

/* 1) Base style */
.woocommerce-checkout a.woocommerce-terms-and-conditions-link {
  color: rgba(0, 0, 255, 1); /* pure blue */
  text-decoration: underline;
}

/* 2) Optional hover feedback */
.woocommerce-checkout a.woocommerce-terms-and-conditions-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* === Checkout: add space below the "Realizar el pedido" button (force) ===
   Goal: create clear breathing room before the bottom border of #order_review.
*/

/* 1) Pad the bottom of the review box itself */
.woocommerce-checkout #order_review {
  padding-bottom: 20px !important; /* knob: 16–28px */
  box-sizing: border-box; /* ensure padding increases inner space */
}

/* 2) Ensure the row that contains the button doesn’t collapse margins */
.woocommerce-checkout #order_review .place-order {
  padding-bottom: 10px !important; /* extra cushion */
  margin-bottom: 0 !important;
  display: block;
}

/* 3) Give the button a bit of own margin as a fallback */
.woocommerce-checkout #order_review #place_order {
  margin-bottom: 10px !important; /* knob: 8–16px */
}

/* === Checkout: make "Realizar el pedido" button larger (mobile-first) ===
   Scope: checkout submit button only.
   Knobs: tweak font-size, padding, min-height, border-radius.
*/

/* Mobile-first: bigger, easier to tap */
.woocommerce-checkout #order_review #place_order {
  font-size: 16px !important;       /* knob: 15–18px */
  padding: 14px 20px !important;     /* knob: 12–18px vertical */
  min-height: 48px !important;       /* knob: 44–56px */
  line-height: 1.2 !important;
  border-radius: 0px !important;    /* knob: 6–14px */
  font-weight: 600;                  /* clearer label, keeps theme colors */
}

/* Desktop (≥1024px): a touch larger for hierarchy */
@media (min-width:1024px) {
  .woocommerce-checkout #order_review #place_order {
    font-size: 17px !important;
    padding: 16px 24px !important;
    min-height: 52px !important;
  }
}

/* === Checkout: add space between #order_review and the footer (mobile-first) ===
   Goal: separate the bottom border of the order box from the Elementor footer section.
   Method: external space via margin-bottom on the review box.
*/

/* Mobile-first: breathing room under the order review box */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  margin-bottom: 28px !important; /* knob: 20–40px */
}

/* Desktop (≥1024px): a bit more space for balance */
@media (min-width:1024px) {
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .woocommerce-checkout-review-order {
    margin-bottom: 36px !important; /* knob: 28–56px */
  }
}

/* === Openpay: force-hide the logo image (strong selectors) ===
   Targets both class and src, anywhere in checkout.
   Also collapses any wrapper spacing to avoid leftover gaps.
*/

/* 1) Kill the image itself (multiple selectors for robustness) */
.woocommerce-checkout img.openpay_logo,
.woocommerce-checkout img[src*="openpay_logo.svg"],
.woocommerce-checkout .payment_method_openpay img.openpay_logo,
.woocommerce-checkout .payment_box img.openpay_logo {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2) If the logo sits inside a centered wrapper, collapse it too */
.woocommerce-checkout [style*="text-align: center"]:has(> img.openpay_logo),
.woocommerce-checkout [style*="text-align:center"]:has(> img.openpay_logo),
.woocommerce-checkout [style*="text-align"]:has(> img[src*="openpay_logo.svg"]) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* 3) Extra safety: hide any immediate sibling spacer after the logo wrapper (if present) */
.woocommerce-checkout img.openpay_logo + *,
.woocommerce-checkout img[src*="openpay_logo.svg"] + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   Openpay: remove "Guardar tarjeta" row and collapse space
   Why: Plugin injects a .save_cc row (sometimes with inline margin)
   Strategy: Force full removal and spacing reset (mobile-first)
   ========================================================= */

/* Hard remove the row regardless of plugin states (hidden/validated) */
.woocommerce #payment .form-row.save_cc,
.woocommerce form .form-row.save_cc,
.form-row.save_cc,
.save_cc.hidden,
.save_cc.woocommerce-validated {
  display: none !important;   /* remove from layout */
  margin: 0 !important;       /* kill residual inline margins */
  padding: 0 !important;      /* safety */
  height: 0 !important;       /* safety */
  overflow: hidden !important;/* safety */
}

/* Extra safety: if the checkbox itself is targeted elsewhere, hide it too */
#openpay_save_card_auth {
  display: none !important;
}

/* --- Card brands strip (Openpay) — mobile-first; no HTML changes --- */
/* Scope to Openpay only to avoid side-effects on other gateways */
#payment .payment_method_openpay .wc-credit-card-form,
#payment .payment_method_openpay .payment_box .wc-credit-card-form {
  position: relative; /* ensures ::after width anchors to the full form */
}

/* Logos row: sits right below Expiry + CVV, spans full form width */
#payment .payment_method_openpay .wc-credit-card-form::after,
#payment .payment_method_openpay .payment_box .wc-credit-card-form::after {
  content: "";
  display: block;
  width: 100%;
  height: 28px;                 /* mobile height (keeps aspect ratio via background-size) */
  margin-top: 10px;             /* gap below Expiry + CVV */
  pointer-events: none;         /* purely decorative */

  /* Five logos as layered backgrounds (equally spaced across the full width) */
  background-image:
    url("https://obalblue.com/wp-content/uploads/2024/07/OpenpayNB.png"),
    url("https://obalblue.com/wp-content/uploads/2023/07/mc_symbol_opt_73_1x.png"),
    url("https://obalblue.com/wp-content/uploads/2023/07/Visa2.png"),
    url("https://obalblue.com/wp-content/uploads/2023/07/amex-icon-2b8948f0-1.png"),
    url("https://obalblue.com/wp-content/uploads/2024/07/carnet.png");

  /* Maintain aspect ratio by fixing the height for each background layer */
  background-size:
    auto 22px,  /* Openpay */
    auto 22px,  /* Mastercard */
    auto 22px,  /* Visa */
    auto 22px,  /* Amex */
    auto 22px;  /* Carnet */

  /* Center vertically; distribute horizontally (tweakable slots) */
  background-position:
    10% 50%,
    32.5% 50%,
    55% 50%,
    77.5% 50%,
    90% 50%;

  background-repeat: no-repeat;
}

/* Desktop refinement: slightly taller row and tighter vertical rhythm */
@media (min-width:1024px) {
  #payment .payment_method_openpay .wc-credit-card-form::after,
  #payment .payment_method_openpay .payment_box .wc-credit-card-form::after {
    height: 34px;
    margin-top: 12px;
    background-size:
      auto 26px,
      auto 26px,
      auto 26px,
      auto 26px,
      auto 26px;
    /* keep the same positions; adjust here if your desktop form is wider/narrower */
  }
}

/* =========================================================
   Openpay — Brand strip (full form width, BELOW Expiry+CVV)
   Anchor: #payment_form_openpay_cards
   ========================================================= */
:root{
  --ob-strip-h-m: 28px;
  --ob-strip-h-d: 34px;
  --ob-gap-top-m: 12px;
  --ob-gap-top-d: 14px;
  --ob-logo-w-m: 16%;
  --ob-logo-w-d: 14%;
}

#payment .payment_method_wc_openpay_gateway .payment_box #payment_form_openpay_cards::after{
  content: "" !important;
  display: block !important;
  clear: both !important;             /* <-- key fix */
  width: 100% !important;
  height: var(--ob-strip-h-m) !important;
  margin-top: var(--ob-gap-top-m) !important;
  pointer-events: none !important;
  opacity: 0.98 !important;

  background-image:
    url("https://obalblue.com/wp-content/uploads/2024/07/OpenpayNB.png"),
    url("https://obalblue.com/wp-content/uploads/2023/07/mc_symbol_opt_73_1x.png"),
    url("https://obalblue.com/wp-content/uploads/2023/07/Visa2.png"),
    url("https://obalblue.com/wp-content/uploads/2023/07/amex-icon-2b8948f0-1.png"),
    url("https://obalblue.com/wp-content/uploads/2024/07/carnet.png") !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size:
    var(--ob-logo-w-m) auto,
    var(--ob-logo-w-m) auto,
    var(--ob-logo-w-m) auto,
    var(--ob-logo-w-m) auto,
    var(--ob-logo-w-m) auto !important;
  background-position:
    10% center,
    30% center,
    50% center,
    70% center,
    90% center !important;
}

@media (min-width:1024px){
  #payment .payment_method_wc_openpay_gateway .payment_box #payment_form_openpay_cards::after{
    height: var(--ob-strip-h-d) !important;
    margin-top: var(--ob-gap-top-d) !important;
    background-size:
      var(--ob-logo-w-d) auto,
      var(--ob-logo-w-d) auto,
      var(--ob-logo-w-d) auto,
      var(--ob-logo-w-d) auto,
      var(--ob-logo-w-d) auto !important;
  }
}

/* =========================================================
   Openpay — Fine-tuning knobs (padding, per-logo size & position)
   Drop this AFTER your working block
   ========================================================= */

/* Mobile knobs */
:root{
  /* vertical padding (gaps) for the strip */
  --ob-gap-top-m: 12px;      /* ↑ espacio arriba de la barra (móvil) */
  --ob-gap-bottom-m: 4px;    /* ↓ espacio abajo de la barra (móvil) */

  /* per-logo widths as % of form width (keep each <20%) */
  --ob-w1-m: 20%;  /* Openpay   */
  --ob-w2-m: 16%;  /* Mastercard*/
  --ob-w3-m: 16%;  /* Visa      */
  --ob-w4-m: 18%;  /* Amex      */
  --ob-w5-m: 20%;  /* Carnet    */

  /* per-logo horizontal positions (percent of form width) */
  --ob-x1-m: 02%;
  --ob-x2-m: 30%;
  --ob-x3-m: 53%;
  --ob-x4-m: 79%;
  --ob-x5-m: 104%;
}

/* Desktop knobs */
@media (min-width:1024px){
  :root{
    --ob-gap-top-d: 26px;
    --ob-gap-bottom-d: 10px;

    --ob-w1-d: 16%;
    --ob-w2-d: 14%;
    --ob-w3-d: 14%;
    --ob-w4-d: 14%;
    --ob-w5-d: 14%;

    --ob-x1-d: 07%;
    --ob-x2-d: 30%;
    --ob-x3-d: 52%;
    --ob-x4-d: 73%;
    --ob-x5-d: 93%;
  }
}

/* Apply knobs — MOBILE */
#payment .payment_method_wc_openpay_gateway .payment_box #payment_form_openpay_cards::after{
  /* padding (as margins) */
  margin-top: var(--ob-gap-top-m) !important;
  margin-bottom: var(--ob-gap-bottom-m) !important;

  /* sizes per logo */
  background-size:
    var(--ob-w1-m) auto,
    var(--ob-w2-m) auto,
    var(--ob-w3-m) auto,
    var(--ob-w4-m) auto,
    var(--ob-w5-m) auto !important;

  /* positions per logo */
  background-position:
    var(--ob-x1-m) center,
    var(--ob-x2-m) center,
    var(--ob-x3-m) center,
    var(--ob-x4-m) center,
    var(--ob-x5-m) center !important;
}

/* Apply knobs — DESKTOP */
@media (min-width:1024px){
  #payment .payment_method_wc_openpay_gateway .payment_box #payment_form_openpay_cards::after{
    margin-top: var(--ob-gap-top-d) !important;
    margin-bottom: var(--ob-gap-bottom-d) !important;

    background-size:
      var(--ob-w1-d) auto,
      var(--ob-w2-d) auto,
      var(--ob-w3-d) auto,
      var(--ob-w4-d) auto,
      var(--ob-w5-d) auto !important;

    background-position:
      var(--ob-x1-d) center,
      var(--ob-x2-d) center,
      var(--ob-x3-d) center,
      var(--ob-x4-d) center,
      var(--ob-x5-d) center !important;
  }
}

/* === Gap between Expiry/CVV and logos (simple & robust) === */
:root{
  --ob-gap-logos-m: 30px;  /* mobile gap under Expiry/CVV */
  --ob-gap-logos-d: 26px;  /* desktop gap under Expiry/CVV */
}

/* add bottom space to the two floated rows */
#payment .payment_method_wc_openpay_gateway .payment_box #payment_form_openpay_cards .openpay-card-expiry,
#payment .payment_method_wc_openpay_gateway .payment_box #payment_form_openpay_cards .openpay-card-cvc{
  margin-bottom: var(--ob-gap-logos-m) !important;
}

@media (min-width:1024px){
  #payment .payment_method_wc_openpay_gateway .payment_box #payment_form_openpay_cards .openpay-card-expiry,
  #payment .payment_method_wc_openpay_gateway .payment_box #payment_form_openpay_cards .openpay-card-cvc{
    margin-bottom: var(--ob-gap-logos-d) !important;
  }
}

/* =========================================================
   Checkout / Envia — Mantener solo 2 métodos sin perder formato
   Conserva layout original; oculta únicamente los <li> no deseados
   ========================================================= */

/* Oculta todo <li> que NO tenga esos inputs como descendientes */
.woocommerce-checkout ul#shipping_method.woocommerce-shipping-methods > li:not(:has(input.shipping_method[value="envia-26-0"])):not(:has(input.shipping_method[value="envia-90-0"])) {
  display: none !important;
}

/* No establecemos display en los visibles — mantienen el estilo del plugin/tema */

/* Checkout / Envia — gap entre texto y precio (knob) */
:root { --envia-price-gap: 16px; } /* súbelo a 10–14px si lo quieres más aireado */

.woocommerce-checkout ul#shipping_method.woocommerce-shipping-methods > li label .woocommerce-Price-amount {
  margin-left: var(--envia-price-gap) !important;
}

/* Envia — empujar precio a la derecha con un gap mínimo sin romper línea */
.woocommerce-checkout ul#shipping_method.woocommerce-shipping-methods > li label{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;              /* mantiene aire entre icono y texto */
  flex-wrap: nowrap !important;      /* evita saltos raros en este nivel */
}

.woocommerce-checkout ul#shipping_method.woocommerce-shipping-methods > li label .woocommerce-Price-amount{
  margin-left: auto !important;      /* empuja el precio a la derecha */
  padding-left: 6px !important;      /* “pelito” extra de separación */
  white-space: nowrap !important;    /* evita que el precio se parta */
}

/* Si en móviles extrema se siente muy pegado, sube un poco el padding-left */
@media (max-width: 380px){
  .woocommerce-checkout ul#shipping_method.woocommerce-shipping-methods > li label .woocommerce-Price-amount{
    padding-left: 8px !important;
  }
}

/* =========================================================
   OBALBLUE – CART / ENVIA FILTER (preserve original layout)
   Goal: Hide everything EXCEPT the two methods, without changing
         the display of the visible items (keeps plugin styles).
   Scope: Cart only
   ========================================================= */

/* Hide every <li> that is NOT one of the allowed inputs */
body.woocommerce-cart ul#shipping_method > li:not(:has(> input#shipping_method_0_envia-26-0)):not(:has(> input#shipping_method_0_envia-90-0)) {
  display: none !important;
}

/* =========================================================
   OBALBLUE – CART / Shipping Calculator link
   Goal: Underline and color the "Calcular envío" button-link
   Scope: Cart only
   ========================================================= */

body.woocommerce-cart a.shipping-calculator-button,
body.woocommerce-cart a.shipping-calculator-button:visited {
  color: rgba(0, 0, 255, 1) !important; /* pure blue */
  text-decoration: underline !important; /* force underline */
}

/* Keep underline/color on hover/focus for consistency & a11y */
body.woocommerce-cart a.shipping-calculator-button:hover,
body.woocommerce-cart a.shipping-calculator-button:focus {
  color: rgba(0, 0, 255, 1) !important;
  text-decoration: underline !important;
}

/* =========================================================
   OBALBLUE – CART / Coupon trigger link style
   Goal: Underline and color the "¿Tienes un Cupón?" text
   without changing its layout or alignment.
   Scope: Cart only
   ========================================================= */

body.woocommerce-cart p#ast-coupon-trigger {
  color: rgba(0, 0, 255, 1) !important; /* pure blue */
  text-decoration: underline !important;
  text-underline-offset: 2px;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer; /* keep link-like behavior */
}

body.woocommerce-cart p#ast-coupon-trigger:hover,
body.woocommerce-cart p#ast-coupon-trigger:focus {
  color: rgba(0, 0, 255, 1) !important;
  text-decoration: underline !important;
}