/* oo_checkout_tweaks — CSS LIMPIO (sin fondos) */

/* ========= Variables utilitarias (sin colores de fondo) ========= */
:root{
  --oo-gap: 16px;
  --oo-gap-sm: 10px;
  --oo-sticky-top: 16px;
  --oo-font-sm: 0.9375rem;
  --oo-font-xs: 0.875rem;
  --oo-col-gutter: 8px;
}

/* ========= Tipografía / densidad en el checkout ========= */
section#main{ font-size: var(--oo-font-sm); line-height: 1.35; }
section#main h1.h1, section#main h1.page-title, section#main .step-title.h3, section#main h3{
  margin: 0 0 10px 0;
}

/* Ocultar H1 “Checkout” (como tenías) y quitar padding-top solo en checkout */
body#checkout section#main .page-title,
body#checkout section#main > h1.h1,
body#checkout #main .h1.page-title{ display:none !important; }
body#checkout #wrapper,
body#checkout #inner-wrapper,
body#checkout #content-wrapper{ padding-top:0 !important; }

/* ========= Grid/gutters para que el sticky funcione ========= */
section#main > .row{
  margin-left: calc(-1 * var(--oo-col-gutter));
  margin-right: calc(-1 * var(--oo-col-gutter));
}
section#main > .row > [class*="col-"]{
  padding-left: var(--oo-col-gutter);
  padding-right: var(--oo-col-gutter);
}
body#checkout section#main,
body#checkout section#main > .container,
body#checkout section#main > .container > .row{
  overflow: visible !important; /* necesario para sticky */
}

/* ========= Sticky del resumen (columna derecha) ========= */
body#checkout section#main .cart-grid-right{
  position: sticky !important;
  top: var(--oo-sticky-top) !important;
  align-self: start !important;
  will-change: top;
}

/* ========= Tarjetas/CTA compactos ========= */
section#main .card,
section#main .card-body,
section#main .cart-summary,
section#main .cart-summary .card-body,
section#main .cart-summary-subtotals-container,
section#main .cart-summary-totals{
  border-radius: 10px;
  padding: 12px 14px !important;
  margin-bottom: var(--oo-gap-sm) !important;
}
#js-checkout-summary .btn, section#main .continue.btn{
  width:100%; padding:12px 14px; font-weight:700; border-radius:10px;
}

/* ========= Formularios compactos (solo customer-form) ========= */
body#checkout #customer-form.js-customer-form .form-group.row{
  display:flex; flex-wrap:wrap; align-items:center; margin-bottom:8px !important;
}
body#checkout #customer-form.js-customer-form .form-group.row > .col-md-2.col-form-label{
  display:none !important;
}
body#checkout #customer-form.js-customer-form .form-group.row > .js-input-column{
  flex:1 1 100%; max-width:100% !important;
}
section#main .form-group .form-control,
section#main input.form-control,
section#main .input-group .form-control{
  height:36px; padding:6px 10px; font-size: var(--oo-font-sm);
}
section#main .form-control-comment,
section#main .password-requirements,
section#main .password-strength-text{
  font-size: var(--oo-font-xs); opacity:.9; margin-top:4px;
}

/* Mantener el login normal (labels visibles) */
body#checkout #login-form .col-form-label{ display:block !important; }

/* Títulos de paso más pequeños (como tenías) */
body#checkout .step-title.h3{
  font-size: 1.2rem !important; line-height:1.2 !important; margin:4px 0 8px !important;
}

/* ========= Fila inline reutilizable ========= */
body#checkout .oo-inline-row{ display:grid; gap:12px; margin:8px 0 12px; }
body#checkout .oo-inline-row.oo-two{ grid-template-columns: 1fr 1fr; }
body#checkout .oo-inline-row.oo-three{ grid-template-columns: 1fr 1.2fr 1.2fr; }
@media (max-width:575.98px){
  body#checkout .oo-inline-row.oo-two,
  body#checkout .oo-inline-row.oo-three{ grid-template-columns:1fr; }
}
body#checkout .oo-inline-row .form-control{
  height:40px; padding:8px 10px; border-radius:10px;
}

/* Leyenda compacta (crear cuenta) */
body#checkout .oo-create-account-legend{
  font-size:.9rem; font-weight:600; margin:6px 0 4px; opacity:.9;
}

/* ========= Checkboxes compactos + “ver más” ========= */
body#checkout .form-group.row .custom-checkbox{ margin: 4px 0 !important; }
body#checkout .form-group.row .custom-checkbox label{ line-height:1.25 !important; font-size:.95rem !important; }
body#checkout .form-group.row:has(.custom-checkbox){ margin-bottom:4px !important; }
body#checkout .custom-checkbox .oo-cb-toggle{
  font-size:.9rem; margin-left:6px; text-decoration:underline; cursor:pointer;
}
body#checkout .custom-checkbox .oo-cb-long{ display:none; font-size:.85rem; opacity:.85; margin-top:4px; }
body#checkout .custom-checkbox label.oo-open .oo-cb-long{ display:block; }

/* ========= Resumen: productos siempre visibles y sin el enlace ========= */
body#checkout #cart-summary-product-list.collapse{
  display:block !important; height:auto !important; visibility:visible !important;
}
body#checkout #js-checkout-summary .cart-summary-products > div a[data-bs-toggle="collapse"],
body#checkout #js-checkout-summary .cart-summary-products > div a[data-target="#cart-summary-product-list"],
body#checkout #js-checkout-summary .cart-summary-products > div a[href="#cart-summary-product-list"]{
  display:none !important;
}

/* ========= Sin bordes ‘de tabla’ en el resumen ========= */
body#checkout .card,
body#checkout .card-body,
body#checkout #js-checkout-summary.card,
body#checkout #js-checkout-summary .card-body{
  border:0 !important; box-shadow:none !important;
}
body#checkout .table,
body#checkout .table-bordered,
body#checkout .table th,
body#checkout .table td{ border:0 !important; }
body#checkout hr{ display:none !important; }

/* === FONDO BICOLOR — ESTRATEGIA ÚNICA (sin #oo-bg) === */
body#checkout{
  /* Colores configurables */
  --oo-left-bg:  #f2f6fb;  /* izquierda (formulario) */
  --oo-right-bg: #fff4e8;  /* derecha (resumen de productos) */

  /* Posición del corte (JS la pone en px) */
  --oo-split: 66.666%;
  --oo-split-offset: 0px; /* microajuste manual si hiciera falta (+/- px) */
}

/* 1) Pinta TODO de color izquierdo por defecto */
html body#checkout{
  background: var(--oo-left-bg) !important;
}

/* 2) Capa fija que pinta la franja derecha de arriba a abajo */
body#checkout::after{
  content:"";
  position: fixed;
  top: 0; right: 0; bottom: 0;
  /* La franja arranca exactamente en --oo-split */
  left: calc(var(--oo-split) + var(--oo-split-offset));
  background: var(--oo-right-bg);
  z-index: -1;
  pointer-events: none;
}

/* No usamos #oo-bg */
#oo-bg{ display:none !important; }

/* === FONDO BICOLOR (robusto) — SOLO AÑADIR AL FINAL === */

/* Colores configurables */
body#checkout,
body.page-checkout,
body[class*="checkout"]{
  --oo-left-bg:  #f2f6fb;  /* izquierda (formulario) */
  --oo-right-bg: #fff4e8;  /* derecha (resumen) */
  --oo-split: 66.666%;     /* JS lo pondrá en px */
  --oo-split-offset: 0px;  /* microajuste +/- px */
  position: relative;      /* crea stacking para el pseudo-elemento */
}

/* 1) Anula el “background:none !important” anterior y pinta la IZQUIERDA */
html body#checkout,
html body.page-checkout,
html body[class*="checkout"]{
  background: var(--oo-left-bg) !important;
}

/* 2) Banda DERECHA de arriba a abajo (por delante del fondo del body) */
body#checkout::before,
body.page-checkout::before,
body[class*="checkout"]::before{
  content:"";
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: calc(var(--oo-split) + var(--oo-split-offset));
  background: var(--oo-right-bg);
  z-index: 0;                 /* por ENCIMA del fondo del body */
  pointer-events: none;
}

/* 3) No usamos #oo-bg en esta estrategia (lo neutralizamos si aparece) */
#oo-bg{ display:none !important; }

/* 4) Por si algún wrapper del tema pinta blanco por encima del fondo */
body#checkout #wrapper,
body#checkout .page-content{ background: transparent !important; }
/* Ajuste fino manual si ves una micro-línea en algún breakpoint */
body#checkout{ --oo-split-offset: 0px; }  /* pon 1px o -1px si hiciera falta */
body#checkout::before{ left: calc(var(--oo-split) + var(--oo-split-offset)); }

/* Colores del fondo bicolor */
body#checkout{
  --oo-left-bg:  #f2f6fb;  /* izquierda */
  --oo-right-bg: #fff4e8;  /* derecha */
  --oo-split: 66.666%;
  --oo-split-offset: 0px;  /* ajuste fino manual si hiciera falta */
  position: relative;
}

/* izquierda por defecto */
html body#checkout{ background: var(--oo-left-bg) !important; }

/* franja derecha de arriba a abajo, empezando tras .col-md-8 */
body#checkout::before{
  content:"";
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: calc(var(--oo-split) + var(--oo-split-offset));
  background: var(--oo-right-bg);
  z-index: 0;
  pointer-events: none;
}

/* no usamos #oo-bg */
#oo-bg{ display:none !important; }
/* Fondo bicolor global para checkout */
html.oo-bicolor,
html.oo-bicolor body#checkout{
  /* Colores que quieras */
  --oo-left-bg:  #f5f7fb;   /* izquierda (formulario)  */
  --oo-right-bg: #fff2e6;   /* derecha (resumen)       */
  --oo-split: 66.666%;      /* fallback */
}

/* Pintamos el gradiente en HTML para cubrir TODA la altura */
html.oo-bicolor{
  background:
    linear-gradient(
      to right,
      var(--oo-left-bg) 0,
      var(--oo-left-bg) var(--oo-split),
      var(--oo-right-bg) var(--oo-split),
      var(--oo-right-bg) 100%
    ) !important;
}

/* Evitamos que otros fondos del tema lo tapen */
html.oo-bicolor body#checkout{
  background: transparent !important;
}

/* Si quieres micro-ajuste manual de 1px en algún breakpoint: */
/* html.oo-bicolor{ --oo-split: calc(var(--oo-split) + 1px); } */

/* Quitar bordes exteriores del bloque izquierdo del checkout */
body#checkout .col-md-8 .checkout-step{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Por si el tema añade borde al contenedor interno .content */
body#checkout .col-md-8 .checkout-step .content{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Evita que pseudo-elementos dibujen marco exterior */
body#checkout .col-md-8 .checkout-step::before,
body#checkout .col-md-8 .checkout-step::after{
  content: none !important;
}



/* Mostrar SIEMPRE el contenido principal de cada paso,
   sin afectar colapsables internos como el login */
body#checkout .checkout-step > .content{
  display:block !important;
  height:auto !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Mantener OCULTO el bloque de iniciar sesión por defecto,
   y dejar que se muestre solo cuando Bootstrap le ponga .show */
body#checkout #personal-information-step-login.collapse{
  display:none !important;
}
body#checkout #personal-information-step-login.collapse.show{
  display:block !important;
}

/* (Opcional) Ocultar "Modificar" si no lo quieres ver */
body#checkout .checkout-step .step-title .step-edit{ display:none !important; }


/* Mantener SIEMPRE visibles los contenidos de cada paso (sin acordeón) */
.checkout-step > .content.oo-force-open{
  display:block !important;
  height:auto !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* El bloque de '¡Inicie sesión!' debe seguir colapsado por defecto */
#personal-information-step-login.collapse:not(.show){
  display:none !important;
  height:0 !important;
  overflow:hidden !important;
}

/* Móvil: fondo de un solo color (sin bicolor) */
@media (max-width: 991.98px) {
  /* quita el degradado/split del body */
  body {
    background: var(--oo-left-bg, #f6f6f8) !important;
    background-image: none !important;
  }

  /* si la derecha llevaba un color propio, lo anulamos */
  .cart-grid-right {
    background: transparent !important;
  }

  /* por si hay alguna capa/elemento auxiliar del split */
  #oo-bg,
  .oo-right-bg,
  .oo-split-bg,
  body::before,
  body::after {
    display: none !important;
    background: none !important;
  }
}




/* --- Bloques de método de pago --- */
.payment-option.clearfix{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid #e9dede;
  border-radius:10px;
  margin-bottom:12px;
  background:#fff;
}

/* Radio nativo visible y en línea */
.payment-option .custom-radio{
  display:flex;
  align-items:center;
  margin:0 8px 0 0;
  position:static;           /* MUY importante */
}
.payment-option .custom-radio input{
  appearance:auto; -webkit-appearance:radio;
  width:18px; height:18px; margin:0;
  opacity:1; position:static; cursor:pointer;
  accent-color:#7c5a5a;      /* color del check (si el navegador lo soporta) */
}
/* Ocultar el “fake radio” del tema */
.payment-option .custom-radio > span{ display:none !important; }

.payment-option label{
  display:flex; align-items:center; gap:10px;
  margin:0; cursor:pointer;
}

/* Quitar logo PayPal */
#payment-option-2-container label img{ display:none !important; }

/* (Opcional) grisear transferencia/PayPal si los dejas al final */
#payment-option-1-container,
#payment-option-2-container{ opacity:.85; }

/* --- Reordenar: primero Tarjeta (3) y Bizum (4) --- */
.payment-options { display: flex; flex-direction: column; gap: .5rem; }
.payment-options > div { order: 0; }

/* usa :has() para identificar el wrapper que contiene cada opción */
.payment-options > div:has(#payment-option-3-container) { order: -2; } /* Tarjeta arriba del todo */
.payment-options > div:has(#payment-option-4-container) { order: -1; } /* Bizum segundo */


/* ===========================
   POP-UP TÉRMINOS (solo CSS)
   =========================== */

/* Que el fondo sea un overlay y se vea el checkout debajo */
.modal-backdrop.show { opacity: .35; }

/* Tamaño y aspecto del modal (Bootstrap) */
#oo-terms-modal .modal-dialog{
  max-width: 960px;
  width: min(92vw, 960px);
  margin: 5vh auto;            /* centrado vertical con aire */
}
#oo-terms-modal .modal-content{
  border-radius: 12px;
  box-shadow: 0 10px 35px rgba(0,0,0,.25);
  overflow: hidden;
}
#oo-terms-modal .modal-header{
  border: 0;
  padding: 10px 14px;
}
#oo-terms-modal .modal-body{
  padding: 18px 20px;
  max-height: 70vh;            /* scroll interno del contenido */
  overflow: auto;
  background: #fff;
}

/* Neutraliza fondos “a pantalla completa” que vengan del CMS/Elementor */
#oo-terms-modal .modal-body,
#oo-terms-modal .modal-body *{
  background: transparent !important;
}

/* “Aplasta” Elementor a UNA sola columna dentro del modal */
#oo-terms-modal .elementor,
#oo-terms-modal .elementor-section{
  padding: 0 !important;
  margin: 0 !important;
}
#oo-terms-modal .elementor-container{
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
#oo-terms-modal .elementor-row{ 
  display: block !important; 
  margin: 0 !important;
}
#oo-terms-modal [class*="elementor-col-"]{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Tipografía más contenida dentro del modal */
#oo-terms-modal .modal-body h1{ font-size: 1.5rem; line-height: 1.25; margin: 16px 0 8px; }
#oo-terms-modal .modal-body h2{ font-size: 1.25rem; line-height: 1.25; margin: 16px 0 8px; }
#oo-terms-modal .modal-body h3{ font-size: 1.1rem;  line-height: 1.25; margin: 14px 0 6px; }
#oo-terms-modal .modal-body p{  font-size: .95rem; line-height: 1.55; margin: 8px 0; text-align: justify; }

/* Si se colaran cabeceras, pies o el chat dentro del HTML embebido, escóndelos solo en el modal */
#oo-terms-modal header,
#oo-terms-modal footer,
#oo-terms-modal .site-header,
#oo-terms-modal .footer-container,
#oo-terms-modal [class*="chat"],
#oo-terms-modal .crisp-client{ 
  display: none !important; 
}

/* Asegura superposición del modal por encima de cualquier widget flotante */
#oo-terms-modal{ z-index: 100000; }

/* ========= OlivaOliva – Ajuste definitivo pop-up Términos ========= */

/* SCOPE amplio para que aplique seguro */
#oo-terms-modal,
.oo-terms-modal { /* nada */ }

/* Tamaño/posición del diálogo */
#oo-terms-modal .modal-dialog,
.oo-terms-modal .modal-dialog{
  width: min(920px, 92vw);
  margin: 7vh auto;                 /* menos alto visual */
}

#oo-terms-modal .modal-content,
.oo-terms-modal .modal-content{
  border-radius:12px;
  overflow:hidden;
}

/* Altura del cuerpo con scroll interno (más bajo) */
#oo-terms-modal .modal-body,
.oo-terms-modal .modal-body{
  max-height:58vh;                  /* <-- antes era muy alto */
  overflow:auto;
  padding:18px 20px;
  background:#fff;
}

/* Ver la página de fondo (backdrop translúcido) */
.modal-backdrop.show{
  background:rgba(0,0,0,.35) !important;
}

/* ---- Forzar 1 sola columna (Elementor) ---- */
#oo-terms-modal .elementor .elementor-row,
.oo-terms-modal .elementor .elementor-row{
  display:block !important;
}
#oo-terms-modal .elementor [class*="elementor-col-"],
.oo-terms-modal .elementor [class*="elementor-col-"]{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
}
#oo-terms-modal .elementor .elementor-widget-container,
.oo-terms-modal .elementor .elementor-widget-container{
  padding:10px 0 !important;
}

/* ---- Títulos más pequeños para que no invadan el texto ---- */
#oo-terms-modal h1,
.oo-terms-modal h1{ font-size:1.20rem !important; line-height:1.30 !important; margin:14px 0 8px !important; }
#oo-terms-modal h2,
.oo-terms-modal h2,
#oo-terms-modal .elementor .elementor-heading-title,
.oo-terms-modal .elementor .elementor-heading-title{
  font-size:1.05rem !important;     /* tamaño contenido */
  line-height:1.30 !important;
  margin:12px 0 6px !important;
  font-weight:600 !important;
}
#oo-terms-modal h3,
.oo-terms-modal h3{ font-size:1.0rem !important; line-height:1.28 !important; margin:10px 0 4px !important; }

/* Párrafos legibles */
#oo-terms-modal p,
.oo-terms-modal p{ margin:8px 0; line-height:1.55; }

/* Divisores de Elementor más discretos */
#oo-terms-modal .elementor-divider,
.oo-terms-modal .elementor-divider{ padding:8px 0 !important; }
#oo-terms-modal .elementor-divider-separator,
.oo-terms-modal .elementor-divider-separator{
  width:100%; border-top:1px solid #ddd;
}

/* Móvil aún más compacto */
@media (max-width:576px){
  #oo-terms-modal .modal-body,
  .oo-terms-modal .modal-body{ max-height:55vh; }
  #oo-terms-modal h1, .oo-terms-modal h1{ font-size:1.15rem !important; }
  #oo-terms-modal h2, .oo-terms-modal h2,
  #oo-terms-modal .elementor .elementor-heading-title,
  .oo-terms-modal .elementor .elementor-heading-title{ font-size:1.0rem !important; }
  #oo-terms-modal h3, .oo-terms-modal h3{ font-size:.95rem !important; }
}

/* ====== Términos en modal (fallback genérico) ====== */
/* Tamaño del diálogo en cualquier modal del checkout */
#checkout .modal .modal-dialog{
  width:min(920px,92vw);
  max-width:920px;
  margin:7vh auto;
}

/* Cuerpo con scroll y altura contenida */
#checkout .modal .modal-body.modal-terms{
  max-height:58vh;            /* más bajo que antes */
  overflow:auto;
  padding:18px 20px;
  background:#fff;
}

/* Backdrop translúcido para ver el checkout debajo */
.modal-backdrop.show{ background:rgba(0,0,0,.35) !important; }

/* Forzar una sola columna si el contenido es de Elementor */
#checkout .modal .modal-body.modal-terms .elementor .elementor-row{ 
  display:block !important; 
}
#checkout .modal .modal-body.modal-terms .elementor [class*="elementor-col-"]{
  width:100% !important; max-width:100% !important; flex:0 0 100% !important;
}
#checkout .modal .modal-body.modal-terms .elementor .elementor-widget-container{
  padding:10px 0 !important;
}

/* Títulos más pequeños para que no invadan el texto */
#checkout .modal .modal-body.modal-terms h1{ 
  font-size:1.15rem !important; line-height:1.30 !important; margin:14px 0 8px !important; 
}
#checkout .modal .modal-body.modal-terms h2,
#checkout .modal .modal-body.modal-terms .elementor .elementor-heading-title{
  font-size:1.00rem !important; line-height:1.30 !important; margin:12px 0 6px !important; font-weight:600 !important;
}
#checkout .modal .modal-body.modal-terms h3{ 
  font-size:.95rem !important; line-height:1.28 !important; margin:10px 0 4px !important; 
}

/* Divisores discretos */
#checkout .modal .modal-body.modal-terms .elementor-divider{ padding:8px 0 !important; }
#checkout .modal .modal-body.modal-terms .elementor-divider-separator{
  width:100%; border-top:1px solid #ddd;
}

/* Móvil aún más compacto */
@media (max-width:576px){
  #checkout .modal .modal-body.modal-terms{ max-height:55vh; }
  #checkout .modal .modal-body.modal-terms h1{ font-size:1.10rem !important; }
  #checkout .modal .modal-body.modal-terms h2,
  #checkout .modal .modal-body.modal-terms .elementor .elementor-heading-title{ font-size:.98rem !important; }
  #checkout .modal .modal-body.modal-terms h3{ font-size:.92rem !important; }
}

/* ====== Ajuste visual del modal de Términos ====== */

/* Un poco menos de “aire” dentro del modal */
#checkout .modal .modal-body.modal-terms{
  padding:16px 24px;
  max-height:60vh;                 /* algo más compacto */
  overflow:auto;
}

/* Titulares: más legibles pero sin invadir la columna derecha */
#checkout .modal .modal-body.modal-terms h1{
  font-size:1.25rem !important;
  line-height:1.28 !important;
  margin:8px 0 6px !important;
  font-weight:700 !important;
}
#checkout .modal .modal-body.modal-terms h2,
#checkout .modal .modal-body.modal-terms .elementor .elementor-heading-title{
  font-size:1.12rem !important;
  line-height:1.28 !important;
  margin:10px 0 4px !important;
  font-weight:700 !important;
}
#checkout .modal .modal-body.modal-terms h3{
  font-size:1.00rem !important;
  line-height:1.26 !important;
  margin:8px 0 4px !important;
  font-weight:600 !important;
}

/* Párrafos más apretados */
#checkout .modal .modal-body.modal-terms p{
  margin:6px 0;
  line-height:1.5;
}

/* Divisores más discretos y con menos padding */
#checkout .modal .modal-body.modal-terms .elementor-divider{
  padding:6px 0 !important;
}
#checkout .modal .modal-body.modal-terms .elementor-divider-separator{
  border-top:1px solid #eee !important;
}

/* Quita márgenes/padding extra de Elementor entre widgets */
#checkout .modal .modal-body.modal-terms .elementor .elementor-widget{
  margin:0 !important;
}
#checkout .modal .modal-body.modal-terms .elementor .elementor-column > .elementor-column-wrap > .elementor-widget-wrap{
  padding:0 !important;
}

/* Evita huecos arriba/abajo del primer y último bloque */
#checkout .modal .modal-body.modal-terms .oo-cms-inner > *:first-child{ margin-top:0 !important; }
#checkout .modal .modal-body.modal-terms .oo-cms-inner > *:last-child{  margin-bottom:0 !important; }

/* Desktop: un pelín más estrecho para respiración */
@media (min-width:992px){
  #checkout .modal .modal-dialog{ max-width:860px; }
}

/* Móvil: tamaños un poco menores para encaje perfecto */
@media (max-width:576px){
  #checkout .modal .modal-body.modal-terms h1{ font-size:1.18rem !important; }
  #checkout .modal .modal-body.modal-terms h2,
  #checkout .modal .modal-body.modal-terms .elementor .elementor-heading-title{ font-size:1.04rem !important; }
}

/* Botón final del checkout: “Realizar pedido” */
body#checkout #payment-confirmation button[type="submit"],
body#checkout #payment-confirmation .btn-primary {
  font-size: 18px;      /* antes ~14–16px */
  font-weight: 600;
  line-height: 1.15;
  padding: 16px 24px;   /* un poco más alto y cómodo */
}

/* Opcional: en móviles un pelín más grande */
@media (max-width: 576px) {
  body#checkout #payment-confirmation button[type="submit"],
  body#checkout #payment-confirmation .btn-primary {
    font-size: 19px;
    padding: 18px 24px;
  }
}

/* ===== Tipografías + toques de tamaño en MÓVIL ===== */
@media (max-width: 576px) {

  /* 1) Base: sube el tamaño general del texto */
  html, body {
    font-size: 17px;              /* antes ~14–16px */
    line-height: 1.5;
  }

  /* 2) Encabezados más legibles (sin pasarse) */
  h1, .h1 { font-size: 1.55rem; }
  h2, .h2 { font-size: 1.35rem; }
  h3, .h3 { font-size: 1.20rem; }
  h4, .h4 { font-size: 1.08rem; }

  /* 3) Formularios del checkout */
  .form-control,
  .custom-select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    font-size: 1rem;              /* hereda del base aumentado */
  }

  /* Radios/checkbox + labels */
  .custom-control-label,
  .radio-inline label,
  .checkbox label,
  .payment-option label,
  .delivery-option label {
    font-size: 1rem;
  }

  /* Títulos de pasos */
  .checkout-step .step-title,
  #checkout .js-address-form h3,
  #checkout .card-block h3 {
    font-size: 1.15rem;
    font-weight: 600;
  }

  /* 4) Resumen carrito lateral */
  #js-checkout-summary,
  #cart-summary .cart-summary-line,
  #cart-subtotal-products,
  #cart-subtotal-shipping {
    font-size: 1rem;
  }

  /* 5) Botones */
  .btn,
  .btn-primary,
  #payment-confirmation .btn,
  .continue.btn {
    font-size: 1.05rem;
    padding: 14px 18px;
  }

  /* Botón “Realizar pedido” un pelín más protagonista */
  #payment-confirmation .btn-primary {
    font-size: 1.12rem;
    padding: 16px 20px;
    font-weight: 700;
  }

  /* 6) Items de métodos de envío/pago (las cajas grandes) */
  .delivery-option,
  .payment-option {
    font-size: 1rem;
  }

  /* 7) Menús/breadcrumbs si aparecen en móvil en checkout */
  .breadcrumb li,
  .breadcrumb a {
    font-size: 0.95rem;
  }
}