/*
Theme Name: Storefront Child
Template: storefront
*/

/* === Ajustes generales === */
.site-info { text-align: center; }
span { margin-bottom: 5px; padding-bottom: 0px; }
/* Nota: el selector global "span" puede afectar muchos elementos. Limítalo si notas efectos no deseados. */
.widget .widget-title { margin-bottom: 6px; padding-bottom: 6px; margin-top: -15px; padding-top: 0px; }
ul.products li.product .price { color: #000000; font-weight: bold; font-size: 15px; }
span.onsale { background-color: #ff0000; color: #ffffff; }
.stock.out-of-stock { color: #ff5500; }
.product_title.entry-title { font-size: 25px; font-weight: 600; }
.button.alt, .button.alt.ajax_add_to_cart.add_to_cart_button.product_type_simple, button.single_add_to_cart_button.button.alt { background-color: #16403C; }
button.menu-toggle, button.menu-toggle:hover { background-color: #388b83; }
.storefront-primary-navigation { background-color: #1b403c; color: #ffffff; }
.storefront-breadcrumb { background-color: #f0f0f0; }
#colophon.site-footer { border-top-width: 8px; border-top-style: solid; border-top-color: #1b403c; }
.woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}
.woocommerce span.onsale { display: none !important; }

/* === Ajustes de botones === */
.button.alt { background-color: #16403C; }
.button.alt.ajax_add_to_cart.add_to_cart_button.product_type_simple { background-color: #16403C; }
button.single_add_to_cart_button.button.alt {
  background-color: #16403c;
  bottom: 0px;
  margin: 0px;
  margin-top: -8px;
  margin-left: 127px;
}

/* === Ajustes de login === */
body.login div#login form p label,
body.login div#login form #pwd_input_lable label,
body.login div#login form #log_input_lable,
body.login div#login form .user-pass-wrap {
  color: #32373c;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}

/* === Ajustes de navegación principal === */
.main-navigation ul li a,
.site-title a,
ul.menu li a,
.site-branding h1 a,
button.menu-toggle,
button.menu-toggle:hover,
.handheld-navigation .dropdown-toggle {
  color: white;
}

/* === Página específica: .page-id-47749 (Rodal Beneficios) === */
.page-id-47749 .rodal-beneficios {
  --bg: #fff;
  --ink: #1b403c;
  --ink-dim: #3f6e68;
  --brand: #1b403c;
  --accent: #388b83;
  --muted: #e6efed;
  --radius: 16px;
  --radius-sm: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.7;
}
.page-id-47749 .rodal-beneficios .rb-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 20px 64px;
}
.page-id-47749 .rodal-beneficios header {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.page-id-47749 .rodal-beneficios .eyebrow {
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.page-id-47749 .rodal-beneficios h1 {
  font-size: clamp(28px,5vw,44px);
  line-height: 1.15;
  margin: 0;
  color: var(--brand);
}
.page-id-47749 .rodal-beneficios .subtitle {
  color: var(--ink-dim);
  font-size: clamp(14px,2.4vw,18px);
}
/* Grilla y tarjetas */
.page-id-47749 .rodal-beneficios .grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 18px;
}
@media (max-width:820px){
  .page-id-47749 .rodal-beneficios .grid{ grid-template-columns:1fr; }
}
.page-id-47749 .rodal-beneficios .card {
  background: #fff;
  color: var(--ink);
  border: 1px solid #98c8c1;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}
.page-id-47749 .rodal-beneficios .card.light { border-color: #a8d1cb; }
.page-id-47749 .rodal-beneficios .card h3 { margin: 0 0 10px; font-size: 20px; }
/* Badges y KPIs */
.page-id-47749 .rodal-beneficios .badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #98c8c1;
  background: #eaf3f1;
  color: var(--brand);
}
.page-id-47749 .rodal-beneficios .strip {
  background: #eef5f4;
  border: 1px solid #7fbab2;
  border-radius: 18px;
  padding: 18px;
}
.page-id-47749 .rodal-beneficios .kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
}
.page-id-47749 .rodal-beneficios .kpi {
  min-width: 220px;
  flex: 1 1 220px;
  background: #e9f3f1;
  border: 1px solid #7fbab2;
  border-radius: 16px;
  padding: 16px;
}
.page-id-47749 .rodal-beneficios .kpi .big { font-size: 28px; font-weight: 800; color: #1b403c; }
/* Tabla */
.page-id-47749 .rodal-beneficios .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--muted);
}
.page-id-47749 .rodal-beneficios .table th,
.page-id-47749 .rodal-beneficios .table td {
  padding: 14px 16px;
  text-align: left;
}
.page-id-47749 .rodal-beneficios .table thead th {
  background: #eef6f4;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
}
.page-id-47749 .rodal-beneficios .table tbody tr { border-top: 1px solid var(--muted); }
.page-id-47749 .rodal-beneficios .table tbody tr:nth-child(odd) { background: #fbfdfc; }
/* Promos */
.page-id-47749 .rodal-beneficios .tier { border-left: 4px solid var(--brand); }
.page-id-47749 .rodal-beneficios .tier.t2 { border-left-color: var(--accent); }
.page-id-47749 .rodal-beneficios .promo-lentes { border: 2px solid var(--accent); }
.page-id-47749 .rodal-beneficios .promo-step { border: 1px solid #98c8c1; }
/* Listas, details y CTA */
/* ============================================================================== */
/* ========== RODAL — Contacto: Datos simples (versión limpia y única) ========== */
/* ============================================================================== */

.rodal-contact{ --brand-primary:#113c3a; --text:#1a1a1a; }
.rodal-contact .rc-info{ list-style:none; margin:0; padding:0; max-width:720px; }
.rodal-contact .rc-info{ line-height: 1.10; } /* baja la altura de línea de todo el bloque */
.rodal-contact .rc-info__row{ display:flex; align-items:center; gap:5px; padding:0px 0; }
.rodal-contact .rc-info > li{ margin: 0; } /* Asegura que los <li> no agreguen aire extra. Neutraliza margin-bottom globales del theme */
.rodal-contact .rc-info__icon{ flex:0 0 24px; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color:var(--brand-primary); }
.rodal-contact .rc-info__icon svg{ width:18px; height:18px; display:block; }
.rodal-contact .rc-info__text{ margin:0; color:var(--text); }
.rodal-contact .rc-info a{ text-decoration:none; border-bottom:1px solid transparent; }
.rodal-contact .rc-info a:hover{ border-color:var(--brand-primary); }

.rodal-contact .rc-location{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid #d9e4e4}
.rodal-contact .rc-location h2{font-size:clamp(1.15rem,2vw,1.35rem);color:var(--brand-primary);margin:0 0 .6rem;font-weight:700}
.rodal-contact .rc__muted{color:#5b5b5b;margin:0 0 .6rem}
.rodal-contact .rc-map{margin-top:.8rem;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 2px 18px rgba(0,0,0,.06)}
.rodal-contact .rc-map iframe{width:100%;height:420px;border:0;display:block}


/* ==========================================================================
   RODAL — Contacto: Formulario (WPForms) — versión consolidada
   ========================================================================== */

.rodal-contact {
  --rc-gap: 24px;            /* separación horizontal de columnas */
  --rc-row: 14px;            /* separación vertical entre filas */
  --rc-space: 20px;          /* espacio externo entre secciones */
  --rc-radius: 12px;         /* radio uniforme inputs */
  --rc-border: #d9e4e4;      /* borde suave */
  --rc-muted: #5b5b5b;
}

/* 0) Separador: quitamos <hr> y lo resolvemos en el bloque del form */
.rodal-contact .rc-sep { display:none; }

/* 1) Bloque del formulario: ancho y alineación como los datos (720px, a la izq) */
.rodal-contact .rc-form{
  max-width:720px;
  margin: var(--rc-space) 0;          /* alineado a la izquierda */
  padding-top: var(--rc-space);
  border-top:1px solid var(--rc-border);
}

/* 2) Contenedor interno del form: grid base */
.rodal-contact .rc-formwrap .wpforms-form .wpforms-field-container{
  display:grid;
  grid-template-columns: 1fr;         /* mobile: 1 col */
  gap: var(--rc-row);
}
@media (min-width:768px){
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-container{
    grid-template-columns: 1fr 1fr;   /* desktop: 2 cols */
    column-gap: var(--rc-gap);
    row-gap: var(--rc-row);
    align-items:start;
  }
}

/* 3) Reset de campos: sin márgenes raros, ancho auto de celda */
.rodal-contact .rc-formwrap .wpforms-form .wpforms-field{
  margin:0; width:auto;
}

/* 4) Nombre/Apellidos (campo compuesto) */
@media (min-width:768px){
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-name{ grid-column:1 / -1; }
  /* la fila interna del nombre muchas veces es .wpforms-field-row */
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-name .wpforms-field-row{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--rc-gap);
  }
  /* compatibilidad con variantes de clases internas del campo nombre */
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-name .wpforms-one-half,
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-name .wpforms-first,
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-name .wpforms-last,
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-name .wpforms-field-name-first,
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-name .wpforms-field-name-last{
    width:auto !important; margin:0 !important; float:none !important; clear:none !important;
  }
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-name input{
    width:100% !important; max-width:100% !important;
  }
}

/* 5) Email a la izquierda, Teléfono a la derecha (desktop) */
@media (min-width:768px){
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-email{  grid-column:1; }
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-phone{  grid-column:2; }
}

/* 6) Mensaje y Submit a todo el ancho */
@media (min-width:768px){
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-field-textarea,
  .rodal-contact .rc-formwrap .wpforms-form .wpforms-submit-container{
    grid-column:1 / -1;
  }
}

/* 7) Inputs: estilo base unificado */
.rodal-contact .rc-formwrap .wpforms-form input[type="text"],
.rodal-contact .rc-formwrap .wpforms-form input[type="email"],
.rodal-contact .rc-formwrap .wpforms-form input[type="tel"],
.rodal-contact .rc-formwrap .wpforms-form select,
.rodal-contact .rc-formwrap .wpforms-form textarea{
  width:100% !important; max-width:100% !important; box-sizing:border-box;
  padding:12px 14px;
  border:1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  background:#fff; color:var(--text); outline:0;
}
.rodal-contact .rc-formwrap .wpforms-form ::placeholder{ color:#98a5a5; }
.rodal-contact .rc-formwrap .wpforms-form input:focus,
.rodal-contact .rc-formwrap .wpforms-form select:focus,
.rodal-contact .rc-formwrap .wpforms-form textarea:focus{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(17,60,58,.15);
}

/* 8) Etiquetas y textos auxiliares */
.rodal-contact .rc-formwrap .wpforms-form .wpforms-field-label{
  margin-bottom:6px; font-weight:600; color: var(--text);
}
.rodal-contact .rc-formwrap .wpforms-form .wpforms-field-description,
.rodal-contact .rc-formwrap .wpforms-form .wpforms-field-sublabel{
  color: var(--rc-muted);
}

/* 9) Botón */
.rodal-contact .rc-formwrap .wpforms-form .wpforms-submit{
  appearance:none; border:0; border-radius: var(--rc-radius);
  padding:12px 18px; background: var(--brand-primary); color:#fff; font-weight:700;
  cursor:pointer; transition: transform .04s ease, opacity .2s ease;
  width:auto;  /* alineado con el flujo a la izquierda */
}
.rodal-contact .rc-formwrap .wpforms-form .wpforms-submit:hover{ opacity:.92; }
.rodal-contact .rc-formwrap .wpforms-form .wpforms-submit:active{ transform: translateY(1px); }
.rodal-contact .rc-formwrap .wpforms-form .wpforms-submit[disabled]{ opacity:.5; cursor:not-allowed; }

/* 10) Errores */
.rodal-contact .rc-formwrap .wpforms-error{
  border-color:#c53b2d !important;
  box-shadow:0 0 0 3px rgba(197,59,45,.12) !important;
}
.rodal-contact .rc-formwrap .wpforms-form .wpforms-error-container,
.rodal-contact .rc-formwrap .wpforms-form .wpforms-required-label{
  color:#c53b2d;
}
/* === Corregir “Nombre / Apellidos” desalineado (desktop) === */
@media (min-width:768px){
  /* La fila interna del campo nombre en 2 columnas reales */
  .rodal-contact .rc-formwrap .wpforms-field-name .wpforms-field-row{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--rc-gap, 24px);
    align-items: end; /* alinea inputs por la línea base */
  }

  /* Anulamos floats/anchos heredados de WPForms */
  .rodal-contact .rc-formwrap .wpforms-field-name .wpforms-field-row-block{
    float:none !important;
    width:auto !important;
    margin:0 !important;
  }

  /* Ubicación explícita de cada mitad */
  .rodal-contact .rc-formwrap .wpforms-field-name .wpforms-field-row-block:nth-child(1){ grid-column:1; }
  .rodal-contact .rc-formwrap .wpforms-field-name .wpforms-field-row-block:nth-child(2){ grid-column:2; }

  /* Inputs al 100% de su celda */
  .rodal-contact .rc-formwrap .wpforms-field-name input{
    width:100% !important;
    max-width:100% !important;
  }
}
/* Igualar el ancho de Nombre/Apellidos con Email/Teléfono */
@media (min-width:768px){
  /* quita sangrados internos del campo compuesto */
  .rodal-contact .rc-formwrap .wpforms-field-name,
  .rodal-contact .rc-formwrap .wpforms-field-name .wpforms-field-row,
  .rodal-contact .rc-formwrap .wpforms-field-name .wpforms-field-row-block{
    padding:0 !important;
    margin:0 !important;
  }

  /* asegura dos columnas idénticas y sin límites raros */
  .rodal-contact .rc-formwrap .wpforms-field-name .wpforms-field-row{
    display:grid !important;
    grid-template-columns: 1fr 1fr;          /* mismo esquema que Email/Tel */
    column-gap: var(--rc-gap, 24px);         /* mismo gap que el form */
  }

  /* los bloques internos no “encogen” ni tienen max-width ocultos */
  .rodal-contact .rc-formwrap .wpforms-field-name .wpforms-field-row-block{
    min-width:0 !important;
    width:100% !important;
  }

  /* inputs a 100% del ancho disponible */
  .rodal-contact .rc-formwrap .wpforms-field-name input{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
}
/* === Alinear exactamente "Nombre / Apellidos" al ancho de Email / Tel === */
@media (min-width:768px){
  /* El contenedor del campo compuesto ocupa las dos columnas y sin sangrados */
  .rodal-contact #wpforms-48561-field_1-container{
    grid-column: 1 / -1;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* La fila interna en dos columnas, sin márgenes añadidos por WPForms */
  .rodal-contact #wpforms-48561-field_1-container .wpforms-field-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--rc-gap, 24px);
    margin: 0 !important;
  }

  /* Cada bloque (Nombre / Apellidos) sin float ni padding lateral */
  .rodal-contact #wpforms-48561-field_1-container .wpforms-field-row-block{
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  /* Inputs, incl. los marcados como "medium", a 100% del bloque */
  .rodal-contact #wpforms-48561-field_1-container input[type="text"],
  .rodal-contact #wpforms-48561-field_1-container .wpforms-field-medium{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}
/* Botón enviar: estilo institucional */
.rodal-contact #wpforms-submit-48561.wpforms-submit{
  background: var(--brand-primary);
  color:#fff;
  border:0;
  border-radius:12px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  transition: transform .04s ease, opacity .2s ease, background-color .2s ease;
  box-shadow:none;
}

/* Hover/Active/Focus */
.rodal-contact #wpforms-submit-48561.wpforms-submit:hover{
  opacity:.92;
}
.rodal-contact #wpforms-submit-48561.wpforms-submit:active{
  transform: translateY(1px);
}
.rodal-contact #wpforms-submit-48561.wpforms-submit:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(17,60,58,.18);
}

/* Estado deshabilitado (cuando hay errores o falta completar) */
.rodal-contact #wpforms-submit-48561.wpforms-submit[disabled]{
  background:#c9d4d4;  /* gris suave */
  color:#6b6b6b;
  cursor:not-allowed;
  opacity:1;           /* que no se vea “lavado” */
  transform:none;
  box-shadow:none;
}
/* Más contraste base en los campos */
.rodal-contact{ --rc-border:#b8caca; } /* antes #d9e4e4 */

.rodal-contact .rc-formwrap .wpforms-form input[type="text"],
.rodal-contact .rc-formwrap .wpforms-form input[type="email"],
.rodal-contact .rc-formwrap .wpforms-form input[type="tel"],
.rodal-contact .rc-formwrap .wpforms-form select,
.rodal-contact .rc-formwrap .wpforms-form textarea{
  border-color: var(--rc-border);
  background:#fff;
}

/* Hover leve para dar feedback */
.rodal-contact .rc-formwrap .wpforms-form input[type="text"]:hover,
.rodal-contact .rc-formwrap .wpforms-form input[type="email"]:hover,
.rodal-contact .rc-formwrap .wpforms-form input[type="tel"]:hover,
.rodal-contact .rc-formwrap .wpforms-form select:hover,
.rodal-contact .rc-formwrap .wpforms-form textarea:hover{
  border-color:#9fb6b6;
}

/* Focus más visible con el verde institucional */
.rodal-contact .rc-formwrap .wpforms-form input:focus,
.rodal-contact .rc-formwrap .wpforms-form select:focus,
.rodal-contact .rc-formwrap .wpforms-form textarea:focus{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(17,60,58,.22); /* antes .15 */
}
.rodal-contact .rc-form{
  margin-bottom: 40px; /* probá 36–48px según el ojo */
}


.rodal-contact .rc-formtitle{
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  color: var(--brand-primary);
  font-weight: 700;
  margin: 0 0 .6rem; /* separa del párrafo introductorio */
}

/* === Acceso a clientes (/mi-cuenta/) — compactar espacios y mejorar lectura === */

/* 1) Breadcrumb más cerca del título */
.woocommerce-account .woocommerce-breadcrumb {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 0.95em;
}

/* 2) Achicar la franja del título (header.entry-header) */
.woocommerce-account header.entry-header,
.woocommerce-account .entry-header {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-bottom: 8px !important; /* menos espacio debajo del título */
  border-bottom: 0 !important;
}
/* Storefront full-width corrige padding extra */
@media (min-width: 768px) {
  .woocommerce-account.storefront-full-width-content header.entry-header,
  .woocommerce-account .storefront-full-width-content .entry-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* 3) Subtítulo: centrado, dos líneas y menos espacio */
.woocommerce-account .wc-login-subtitle {
  font-size: 1.05em;
  color: #333;
  line-height: 1.5;
  text-align: center;
  max-width: 580px;
  margin: 0.6em auto 0.9em auto !important; /* compacta arriba/abajo */
  white-space: normal;
  display: block;
}

/* 4) Formulario de login más compacto */
.woocommerce-account .entry-title {
  margin-bottom: 0.4em !important;
}
.woocommerce-account form.login {
  margin-top: 0.6em !important;
  margin-bottom: 1em !important;
  padding-top: 0 !important;
}
.woocommerce-account form.login p {
  margin-bottom: 0.6em !important;
}

/* 5) Link inferior alineado y legible */
.woocommerce-account .wc-login-contact-link {
  text-align: center;
  margin-top: 0.8em !important;
  font-size: 0.95em;
  line-height: 1.4;
}
.woocommerce-account .wc-login-contact-link a {
  color: #004d40;
  text-decoration: underline;
}
.woocommerce-account .wc-login-contact-link a:hover {
  text-decoration: none;
}

/* 6) Evitar márgenes/paddings extra del contenedor principal */
.woocommerce-account .woocommerce,
.woocommerce-account .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========================================================================== */
/* === RODAL — CSS trasladado desde "CSS adicional" del personalizador ======= */
/* === (fusionado en style.css del tema hijo para centralizar estilos) ======= */
/* ========================================================================== */

/* =============================================================================
   RODAL — CSS LIMPIO (Storefront + WooCommerce)
============================================== */

/* === 0) Variables de color ================================================= */
:root{
  --rodal-green: #388b83;       /* verde claro del botón carrito */
  --rodal-green-dark: #16403C;  /* CTAs */
  --rodal-green-nav: #1b403c;   /* barra de navegación */
  --rodal-white: #ffffff;
  --rodal-black: #000000;
  --rodal-gray-100: #f8f8f8;
  --rodal-gray-200: #f0f0f0;
  --rodal-orange: #ff5500;
  --rodal-red: #ff0000;
}

/* =============================================================================
   1) BASE / GENERALES
============================================================================= */

.site-info{ text-align:center; }

/* Evitamos selector global "span". Solo afectamos los del área informativa. */
.site-info span{ margin-bottom:5px; padding-bottom:0; }

/* Títulos de widgets */
.widget .widget-title{
  margin: -15px 0 6px;
  padding: 0 0 6px;
}

/* Migas de pan y borde superior del footer */
.storefront-breadcrumb{ background-color: var(--rodal-gray-200); }
#colophon.site-footer{ border-top:8px solid var(--rodal-green-nav); }

/* =============================================================================
   2) NAVEGACIÓN (mantener comportamiento original)
   - NO definimos alturas aquí. El alto del nav lo dan los paddings del tema.
============================================================================= */

.storefront-primary-navigation{
  background-color: var(--rodal-green-nav);
  color: var(--rodal-white);
}

.main-navigation ul li a,
.site-title a,
ul.menu li a,
.site-branding h1 a,
button.menu-toggle,
button.menu-toggle:hover,
.handheld-navigation .dropdown-toggle{
  color: var(--rodal-white);
}

/* Layout interno: solo distribuimos (sin “stretch” vertical) */
.storefront-primary-navigation .col-full{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Separación logo/barra en mobile (como tenías) */
.storefront-handheld-navigation,
.site-header .storefront-primary-navigation{ margin-top:0px; }
#masthead.site-header{ padding-top:30px; }

/* =============================================================================
   3) MINI-CARRITO EN HEADER (RESPETA ALTO DE MENÚ)
   - Botón: solo color + padding horizontal (NADA de height/line-height/padding Y).
============================================================================= */

.site-header-cart{
  margin-right:100px;   /* como tu original */
  min-width:300px;      /* como tu original */
}

.site-header-cart .cart-contents,
.site-header-cart .cart-contents:hover,
.site-header-cart .cart-contents:focus,
.site-header-cart .cart-contents:active{
  background-color: var(--rodal-green);
  color: var(--rodal-white) !important;
  padding-left:12px;        /* ← solo laterales, no tocamos vertical */
  padding-right:12px;
  border-radius:4px;        /* esquinas suaves del botón */
  transition: background 0.2s;
}

/* Ocultar cantidad numérica extra en listados (conteo junto al nombre de categoría) */
.count { display:none !important; }

/* Mini-cart panel */
.site-header-cart .widget_shopping_cart{ background-color: var(--rodal-gray-100) !important; }

/* Imagen/scroll en mini-cart */
.widget_shopping_cart_content .product_list_widget li img{
  height:60px !important; width:60px !important;
  object-fit:contain; max-width:none !important; max-height:none !important;
}
.widget_shopping_cart_content .product_list_widget{
  max-height:50vh !important; overflow-y:auto !important;
}

/* Ocultar enlace “ver carrito” post-add */
a.added_to_cart.wc-forward{ display:none !important; }

/* =============================================================================
   4) LISTADOS / PRODUCTO
============================================================================= */

ul.products li.product .price{
  color: var(--rodal-black);
  font-weight:700; font-size:15px;
}

span.onsale{ background-color: var(--rodal-red); color: var(--rodal-white); }
.woocommerce span.onsale{ display:none !important; } /* si querés ocultarlas */

.stock.out-of-stock{ color: var(--rodal-orange); }

.product_title.entry-title{ font-size:25px; font-weight:600; }

/* Títulos en loop a 2 líneas con elipsis */
.woocommerce-loop-product__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; min-height:2.8em;
}

/* =============================================================================
   5) BOTONES / CTAs
============================================================================= */

.button.alt,
.button.alt.ajax_add_to_cart.add_to_cart_button.product_type_simple,
button.single_add_to_cart_button.button.alt{ background-color: var(--rodal-green-dark); }

/* Ajustes finos del botón de ficha (mantener si realmente lo necesitás) */
button.single_add_to_cart_button.button.alt{
  margin:0; margin-top:-8px; margin-left:127px; bottom:0;
}

/* Hamburguesa */
button.menu-toggle,
button.menu-toggle:hover{ background-color: var(--rodal-green); }

/* =============================================================================
   6) LOGIN (wp-login.php)
============================================================================= */

body.login div#login form p label,
body.login div#login form #pwd_input_lable label,
body.login div#login form #log_input_lable,
body.login div#login form .user-pass-wrap{
  color:#32373c; font-size:14px; font-family:'Open Sans', sans-serif;
}

/* =============================================================================
   7) FOOTER — 3 COLUMNAS EN GRID (sin duplicados)
============================================================================= */

/* Contenedor a 3 columnas exactas */
.site-footer .footer-widgets.row-1.col-3.fix{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  column-gap:56px !important;
  align-items:start !important;
}

/* Normalizar columnas (.block) */
.site-footer .footer-widgets.row-1.col-3.fix > .block{
  float:none !important; width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
}

/* Widget “huérfano” al centro si existe */
.site-footer .footer-widgets.row-1.col-3.fix > #custom_html-5{
  grid-column:2 / span 1 !important; margin:0 !important; padding:0 !important;
}

/* Ocultar la columna 2 si está vacía */
.site-footer .footer-widgets.row-1.col-3.fix > .block.footer-widget-2:empty{ display:none !important; }

/* Aire vertical */
.site-footer .col-full{ padding-top:10px !important; padding-bottom:0 !important; }
.site-footer .footer-widgets{ padding:12px 0 20px !important; margin:0 !important; }
.site-footer .footer-widgets::before,
.site-footer .footer-widgets::after{ content:none !important; display:none !important; }

/* Alineaciones por columna */
.site-footer .footer-widgets.row-1.col-3.fix > .block:nth-child(1){ justify-self:start; }
.site-footer .footer-widgets.row-1.col-3.fix > .block:nth-child(2){ justify-self:center; }
.site-footer .footer-widgets.row-1.col-3.fix > .block:nth-child(3){ justify-self:end; }

.footer-contact{ text-align:left; }
.footer-links  { text-align:center; }
.footer-tech   { text-align:right; }
@media (min-width:901px){
  .footer-links, .footer-tech{ text-align:left !important; }
}

/* Tipografía/espacios */
.footer-contact, .footer-links, .footer-tech{
  color: var(--rodal-white); font-size:14px; line-height:1.6;
}
.footer-contact p, .footer-tech p, .footer-links ul li{ margin:8px 0; }

.footer-links ul{ list-style:none; margin:0; padding:0; }
.footer-links a{ text-decoration:none; color: var(--rodal-white); }
.footer-links a:hover, .footer-links a:focus{ text-decoration:underline; }

/* RRSS */
.footer-contact .footer-social{ margin:12px 0 10px; display:flex; gap:12px; }
.footer-social .social-icon{ width:20px; height:20px; display:inline-block; filter:brightness(0) invert(1); vertical-align:middle; }
.footer-social .social-icon--li{ filter:none; opacity:.9; }
.footer-social .social-icon--li:hover{ opacity:1; }

/* Iconografía inline */
.site-footer .ico{ width:16px; height:16px; fill:currentColor; opacity:.8; vertical-align:-2px; margin-right:8px; }
.site-footer .ico-gear{ opacity:.7; }
.site-footer .footer-contact p, .site-footer .footer-tech p{ display:flex; gap:8px; align-items:baseline; }
.site-footer .footer-contact p svg, .site-footer .footer-tech p svg{ flex:0 0 auto; }

/* Reloj en trazo */
.site-footer .ico-clock{ fill:none !important; stroke:currentColor; stroke-width:1.8; opacity:.8; }

/* Barra legal inferior */
.rodal-legal-bar{
  background:#133b37; color:rgba(255,255,255,.85);
  text-align:center; font-size:12px; line-height:1.4;
  padding:8px 12px; width:100%;
  border-top:1px solid rgba(255,255,255,0.06);
  margin-top:0 !important;
}
.rodal-legal-bar a{ color:inherit; text-decoration:none; }
.rodal-legal-bar a:hover{ text-decoration:underline; }

/* Responsive footer: apilar en una columna */
@media (max-width:900px){
  .site-footer .footer-widgets.row-1.col-3.fix{
    grid-template-columns:1fr !important;
    row-gap:16px !important; column-gap:0 !important;
  }
  .footer-links, .footer-tech{ text-align:left; }
}


/*=======================================CORRECCIONES BOTON FLOTANTE FILTROS MOBILE Y DESKTOP==================*/


/* DESKTOP (≥901px): ocultar SIEMPRE el botón flotante de BeRocket */
@media (min-width:901px){
  p.berocket_ajax_filters_sidebar_back,
  .berocket-ajax-filters-sidebar-shadow{
    display:none !important;
  }
}

/* MOBILE (≤900px): mostrar el flotante y dejar que el plugin maneje su offset */
@media (max-width:900px){
  p.berocket_ajax_filters_sidebar_back{
    display: initial !important;  /* no tocamos margin/posiciones */
  }
}





/* Reducir/eliminar el espacio entre el título y el catálogo */
header.woocommerce-products-header {
  margin: 0 !important;
  padding: 12px 0 !important; /* puedes bajar a 0 si quieres cero espacio */
}

h1.woocommerce-products-header__title.page-title {
  margin: 0 !important;
  padding: 0 !important;
}
/* FOOTER: compactar espacio entre widgets y copyright (Storefront) */
.site-footer .footer-widgets{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.site-footer .footer-widgets .widget{
  margin-bottom: 0 !important;
}

/* Evita que el último elemento interno empuje hacia abajo */
.site-footer .footer-widgets .textwidget > *:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Copyright: dejalo finito; ajustá a 0 si querés aún menos */
.site-footer .site-info{
  margin-top: 0 !important;
  padding-top: 4px !important;   /* 0 si querés “al ras” */
  padding-bottom: 4px !important;/* 0 si querés “al ras” */
}

.site-footer .site-info .col-full{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

}
/* Ajustes sutiles apariencia bloque 3 Servicio Tecnico Citycell */
.footer-tech .tech-head { margin: 0 0 .25rem; }
.footer-tech .tech-note { 
  font-size: .9rem; 
  opacity: .75; 
  margin: 0 0 .5rem;
}
.footer-tech .tech-sep { 
  border: 0; 
  height: 1px; 
  background: rgba(255,255,255,.18); /* ajustá el alfa según el fondo */
  margin: .25rem 0 .75rem;
}
.footer-tech .ico { 
  vertical-align: -2px; 
  margin-right: .5rem; 
}
.footer-tech p { margin: .4rem 0; }
.footer-tech a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Ajustes sutiles apariencia bloque 1 Oficina Central */

.footer-contact .contact-head { 
  margin: 0 0 .25rem;
  display: flex; 
  align-items: center;
  gap: .4rem;
}
.footer-contact .contact-emoji { font-size: 1.1rem; line-height: 1; }
.footer-contact .contact-note {
  font-size: .9rem;
  opacity: .75;
  margin: 0 0 .5rem;
}
.footer-contact .contact-sep {
  border: 0;
  height: 1px;
  background: rgba(255,255,255,.18); /* ajustá alfa según el fondo */
  margin: .25rem 0 .75rem;
}
.footer-contact .ico { vertical-align: -2px; margin-right: .5rem; }
.footer-contact p { margin: .4rem 0; }
.footer-contact a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

html { scroll-behavior: smooth; }

/* hace el offset exacto cuando se usa #catalogo */
#catalogo:target::before{
  content:"";
  display:block;
  height: 160px;   /* subí/bajá para afinar 140–220 */
  margin-top:-160px;
}

/* --- ALINEACIÓN MENÚ PRINCIPAL Storefront (en modo invitado se desalinea)--- */

/* Ocultar carrito header solo a invitados */
.guest #site-header-cart { display: none !important; }

/* Ajustar distribución del header cuando no hay carrito */
.guest .col-full {
  display: flex;
  justify-content: flex-start !important;
}

/* Alinear nav al inicio y sin margen */
.guest .main-navigation {
  margin: 0 !important;
  flex: 1 1 auto;
}

/* Alinear los ítems del menú a la izquierda */
.guest .main-navigation .primary-navigation ul.menu {
  display: flex;
  justify-content: flex-start !important;
  margin: 0;
  padding: 0;
}

/* Fallback por si la lista no usa flex */
.guest .main-navigation .primary-navigation ul.menu > li {
  display: inline-block;
}

/* === AJUSTE FINAL: limitar corrección de alineación solo al header === */

/* Evita que el cambio de display:flex afecte otros .col-full (footer, etc.) */
.guest header .col-full,
.guest #masthead .col-full {
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
  gap: 1rem;
}

/* Restablece el display original en las demás secciones */
.guest footer .col-full,
.guest #colophon .col-full,
.guest .site-footer .col-full,
.guest .storefront-breadcrumb .col-full,
.guest .woocommerce-products-header .col-full {
  display: block !important;
  justify-content: normal !important;
  align-items: normal !important;
  gap: 0 !important;
}
/* === AJUSTE EXTRA: Menú correcto en páginas de archivo === */

/* Aplicar flex SOLO al header principal (#masthead), no al de productos */
.guest #masthead .col-full {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 1rem;
}

/* Revertir en headers de archivo de productos */
.guest .woocommerce-products-header .col-full {
  display: block !important;
  justify-content: normal !important;
  align-items: normal !important;
  gap: 0 !important;
}
/* === AJUSTE OFFSET ANCLA #catalogo === */

/* Para usuarios sin login (header más bajo) */
.guest #catalogo:target::before{
  height:120px;   /* bajá o subí según veas (antes 160) */
  margin-top:-120px;
}
/* Subrayar solo los enlaces de la columna principal del footer */
#colophon .footer-links a {
  text-decoration: underline;
  text-underline-offset: 2px;   /* opcional: separa el subrayado del texto */
}

/* Opcional: subrayado un poquito más marcado al hover/focus */
#colophon .footer-links a:hover,
#colophon .footer-links a:focus {
  text-decoration-thickness: 2px;
}

/* Icono edificio: hereda el color del texto (gris/blanco) */
.footer-contact .ico-building{
  width:18px;
  height:18px;
  fill:currentColor;
  opacity:.75;
}


/* Reducir espacio blanco superior del slider */
.home .site-header {
  margin-bottom: 2em !important; /* antes tenía ~4.23em */
}


/* Holgura antes del título "Catálogo" (solo archivo de productos) */
.post-type-archive-product .site-main > header.woocommerce-products-header {
  padding-top: 2rem !important; /* probá 1.5–2rem si querés afinar */
}

/* ==========================================================
   RODAL — Home (portada)
   Ocultar "Añadir al carrito" y controles de cantidad (+/−)
   SOLO en las dos filas de productos especiales (.rodal-home-row)
   ========================================================== */

/* Botones de añadir al carrito en tarjetas del loop */
.rodal-home-row li.product .add_to_cart_button,
.rodal-home-row li.product .button.add_to_cart_button,
.rodal-home-row li.product .button.product_type_simple,
.rodal-home-row li.product .single_add_to_cart_button,
.rodal-home-row li.product .ajax_add_to_cart,
.rodal-home-row li.product .product_type_variable {
  display: none !important;
}

/* Controles de cantidad y +/- en cualquier variante de marcado */
.rodal-home-row li.product form.cart .quantity,
.rodal-home-row li.product form.cart .quantity *,
.rodal-home-row li.product .quantity,
.rodal-home-row li.product .quantity *,
.rodal-home-row li.product .quantity.buttons_added,
.rodal-home-row li.product .quantity.buttons_added *,
.rodal-home-row li.product .minus,
.rodal-home-row li.product .plus,
.rodal-home-row li.product input.qty,
.rodal-home-row li.product .qty {
  display: none !important;
}

/* Evitar spinners nativos del input number (si algún plugin los inyecta) */
.rodal-home-row input[type="number"]::-webkit-outer-spin-button,
.rodal-home-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rodal-home-row input[type="number"] {
  -moz-appearance: textfield;
}

/* Pequeño ajuste por si el tema deja hueco donde iba el form/cart */
.rodal-home-row li.product form.cart,
.rodal-home-row li.product .button.add_to_cart_button {
  margin-top: 0 !important;
}
/* ==========================================================
   RODAL — Home (tienda como portada)
   Destacar títulos de las CATEGORÍAS (debajo de las miniaturas)
   ========================================================== */
.post-type-archive-product ul.products li.product-category .woocommerce-loop-category__title,
.post-type-archive-product ul.products li.product-category h2.woocommerce-loop-category__title {
  font-weight: 500;        /* negrita gorda */
  font-size: 1.40em;       /* ~un puntito más grande (≈ +10%) */
  text-align: center;      /* centrado consistente */
  margin-top: 0.6rem;      /* pequeño respiro respecto a la imagen */
  letter-spacing: 0.2px;   /* leve refinamiento tipográfico */
}

/* === FOOTER: 3 columnas en desktop y tablet, 1 columna en móvil === */

/* Tablet (601–900px): mantener 3 columnas */
@media (min-width: 601px) and (max-width: 900px) {
  .site-footer .footer-widgets.row-1.col-3.fix{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    column-gap: 32px !important;
    row-gap: 16px !important;
  }
  /* Recuperar alineaciones de escritorio */
  .footer-links  { text-align: center !important; }
  .footer-tech   { text-align: right !important; }
  .site-footer .footer-widgets.row-1.col-3.fix > .block{
    justify-self: auto !important; /* evita empujes raros */
  }
}

/* Móvil (≤600px): 1 columna */
@media (max-width: 600px) {
  .site-footer .footer-widgets.row-1.col-3.fix{
    grid-template-columns: 1fr !important;
    row-gap: 18px !important;
    column-gap: 0 !important;
  }
  .site-footer .footer-widgets.row-1.col-3.fix > .block{
    justify-self: start !important;
  }
  .footer-contact, .footer-links, .footer-tech{
    text-align: left !important;
    margin: 0 !important;
  }
}

/* === FOOTER MÓVIL: 1 columna centrada === */
@media (max-width: 600px){
  /* 1 sola columna */
  .site-footer .footer-widgets.row-1.col-3.fix{
    grid-template-columns: 1fr !important;
    row-gap: 18px !important;
    column-gap: 0 !important;
  }

  /* Centrar cada bloque/columna */
  .site-footer .footer-widgets.row-1.col-3.fix > .block{
    justify-self: center !important;
    text-align: center !important;
    width: 100%;
  }

  /* Textos de las 3 columnas */
  .footer-contact,
  .footer-links,
  .footer-tech{
    text-align: center !important;
    margin: 0 !important;
  }

  /* Párrafos con icono inline (usan display:flex): centrarlos */
  .site-footer .footer-contact p,
  .site-footer .footer-tech p{
    justify-content: center !important;
  }

  /* RRSS centradas */
  .footer-contact .footer-social{
    justify-content: center !important;
  }

  /* Enlaces de la columna central: centrar lista */
  .footer-links ul{
    text-align: center !important;
  }
  .footer-links ul li{
    display: inline-block;        /* quita viñetas en vertical */
    margin: 6px 10px !important;  /* espacio horizontal */
  }
}

/* === FOOTER (solo celular): espacio extra entre 2º y 3º bloque === */
@media (max-width: 600px){
  /* Añade separación debajo del 2º bloque */
  .site-footer .footer-widgets.row-1.col-3.fix > .block:nth-child(2){
    margin-bottom: 16px !important; /* probá 20–24px si querés más aire */
  }
}

/* ===== HEADER: separación logo / barra ===== */

/* Desktop y tablets grandes: SIN separación extra */
.storefront-handheld-navigation,
.site-header .storefront-primary-navigation{
  margin-top: 0 !important;
}

/* Mantén tu padding de desktop si te funciona bien */
#masthead.site-header{
  padding-top: 30px; /* ajustá a gusto */
}

/* Mobile: recuperar la separación de 60px para que no choque */
@media (max-width: 767px){
  .storefront-handheld-navigation,
  .site-header .storefront-primary-navigation{
    margin-top: 60px !important;   /* como lo tenías antes */
  }

  /* opcional: un poco menos de padding arriba en móvil */
  #masthead.site-header{
    padding-top: 12px; /* si querés dejalo igual que desktop */
  }
}





/* === COLOR DEL ENLACE “Acceder / Mi cuenta” ============================= */

/* Estado normal */
.site-header a[href*="mi-cuenta"],
.site-header a[href*="my-account"] {
  color: var(--rodal-green-dark) !important;   /* verde institucional */
  text-decoration: none;
}

/* Hover / focus */
.site-header a[href*="mi-cuenta"]:hover,
.site-header a[href*="my-account"]:hover,
.site-header a[href*="mi-cuenta"]:focus,
.site-header a[href*="my-account"]:focus {
  color: var(--rodal-green) !important;  /* tono más oscuro al pasar el mouse */
  text-decoration: underline;
}



/* 1) Banner de cookies más bajito, sin achicar el texto */
.cky-consent-container.cky-banner-bottom .cky-consent-bar {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* 2) Subir un poco el botón de WhatsApp (QlWapp) para que quede separado del banner */
.qlwapp {
    bottom: 80px !important;   /* si queda muy alto o muy bajo, luego ajustamos este número */
    position: fixed !important;
}

/* === Footer: íconos redes (tamaño intermedio) =============== */

.footer-contact .footer-social {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.footer-social__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;          /* gris claro */
  text-decoration: none;
}

.footer-social__icon {
  width: 22px;             /* tamaño intermedio */
  height: 22px;
  display: block;
}

/* Por si en algún lado se heredan bordes/fondos raros */
.footer-social__item,
.footer-social__icon {
  border-radius: 0;
  background: transparent;
}

/* Aseguramos un borde suave en LinkedIn (aunque ahora no tiene relleno) */
.footer-social__item--li .footer-social__icon--li {
  border-radius: 4px;
}
/* === Mi cuenta: ajustes de ancho y espaciado === */

/* 1) ESPACIADO GENERAL (mobile + desktop) */

/* Menos espacio encima de "Acceder" */
.woocommerce-account .woocommerce h2 {
  margin-top: 2rem;   /* antes el tema le daba ~2.3rem */
}

/* Un poco menos de espacio bajo el subtítulo explicativo */
.woocommerce-account .wc-login-subtitle {
  margin-bottom: 1.5rem;
}

/* Más espacio entre "¿Olvidaste la contraseña?" y el bloque inferior */
.woocommerce-account .wc-login-contact-link {
  margin-top: 3rem !important;
}

/* Extra espacio entre la pregunta y el link */
.woocommerce-account .wc-login-contact-link a {
  display: inline-block;
  margin-top: 0.75rem;   /* subí a 1rem si querés todavía más separación */
}


/* 2) ANCHO Y CENTRADO EN DESKTOP */
@media (min-width: 992px) {

  /* Título "Acceder" y formulario: mismo ancho y centrados como bloque */
  .woocommerce-account .woocommerce h2,
  .woocommerce-account .woocommerce form.login {
    max-width: 600px;            /* ajustá este valor si querés más o menos ancho */
    margin-left: auto;
    margin-right: auto;
  }

  /* Subtítulo de arriba y texto "¿Aún no tenés usuario?" */
  .woocommerce-account .wc-login-subtitle,
  .woocommerce-account .wc-login-contact-link {
    max-width: 600px;            /* mismo ancho que el formulario */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* RODAL – Sidebar SIEMPRE a la izquierda en layouts con left-sidebar (también guests/incógnito) */
body.left-sidebar .site-content .col-full {
    display: flex;              /* aseguramos flex, por las dudas */
}

/* Orden de columnas: primero sidebar, luego contenido */
body.left-sidebar .site-content .widget-area {
    order: 1;
}

body.left-sidebar .site-content .content-area {
    order: 2;
}

/* Ancho de filtros de barra lateral */
@media (min-width: 901px) {

  body.tax-product_cat.left-sidebar:not(.rodal-no-products) .site-content .col-full {
      display: flex;
  }

  body.tax-product_cat.left-sidebar:not(.rodal-no-products) #primary {
      flex: 0 0 82% !important;
      max-width: 82% !important;
  }

  body.tax-product_cat.left-sidebar:not(.rodal-no-products) #secondary {
      flex: 0 0 18% !important;
      max-width: 18% !important;
  }

  body.single-product.left-sidebar .site-content .col-full {
      display: flex;
  }

  body.single-product.left-sidebar #primary {
      flex: 0 0 82% !important;
      max-width: 82% !important;
  }

  body.single-product.left-sidebar #secondary {
      flex: 0 0 18% !important;
      max-width: 18% !important;
  }
}

/* Botón del carrito en el header – DESKTOP (>= 768px) */
@media (min-width: 768px) {
/* Botón del carrito en el header – mismo diseño en normal y hover */
.site-header-cart .cart-contents,
.site-header-cart .cart-contents:hover,
.site-header-cart .cart-contents:focus,
.site-header-cart .cart-contents:active {
  background-color: var(--rodal-green) !important;
  color: #fff !important;

  /* Ocupa todo el ancho disponible y alinea texto e icono */
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  /* Altura del botón: ajustá el primer valor si querés más/menos alto */
  padding: 2em 2.5em !important;  /* vertical | horizontal */

  margin: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  transition: background 0.2s;
}

/* Evitar que los spans internos cambien altura o metan márgenes raros */
.site-header-cart .cart-contents span {
  margin: 0 !important;
  padding: 0 !important;
}
}