/* MAS AHORRO SHOP - targeted fixes (not a redesign, permanent site-wide bug fixes) */

/* 1. Menu: active/current-page item text was navy-on-navy (illegible) against
   the highlighted pill background. Force white in every "on" state. */
#header.ct-header .ct-menu-link:hover,
#header.ct-header .menu > li:hover > .ct-menu-link,
#header.ct-header .menu > li.current-menu-item > .ct-menu-link,
#header.ct-header .menu > li.current-menu-ancestor > .ct-menu-link,
#header.ct-header .menu > li.current-menu-parent > .ct-menu-link,
#header.ct-header .menu > li[class*="current-menu-"] > .ct-menu-link {
  color: #ffffff !important;
}

/* 2. Product search bar: stretch to the full width of the site instead of
   the narrow boxed column it was constrained to. */
.elementor-element-cd3847e,
.elementor-element-824a526,
.elementor-element-824a526 .elementor-shortcode {
  width: 100% !important;
  max-width: 100% !important;
}
.elementor-element-824a526 .dgwt-wcas-search-wrapp,
.elementor-element-824a526 .dgwt-wcas-sf-wrapp,
.elementor-element-824a526 .dgwt-wcas-search-form {
  width: 100% !important;
  max-width: 100% !important;
}
.elementor-element-824a526 .dgwt-wcas-search-input {
  width: 100% !important;
}

/* 3. "Locales en Santiago": elegant card treatment instead of two raw photos
   touching edge to edge. */
.elementor-element-53a9a59 .rtsb-image-accordion-wrapper {
  gap: 20px !important;
  padding: 0 20px 8px !important;
  box-sizing: border-box;
}
.elementor-element-53a9a59 .rtsb-image-accordion-wrapper .item {
  position: relative;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px rgba(11, 50, 115, 0.22);
}
.elementor-element-53a9a59 .rtsb-image-accordion-wrapper .item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 50, 115, 0) 50%, rgba(11, 50, 115, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}
.elementor-element-53a9a59 .rtsb-image-accordion-wrapper .item .content {
  position: relative;
  z-index: 2;
}

/* 4. Blog index hero: the decorative icon overlaps the title on small screens. */
@media (max-width: 600px) {
  .hero-section[data-type="type-2"] svg {
    display: none !important;
  }
  .hero-section[data-type="type-2"] {
    padding: 32px 16px !important;
  }
}

/* 5. General mobile safety: nothing should force horizontal scroll. */
@media (max-width: 480px) {
  body {
    overflow-x: hidden;
  }
  .elementor-element-53a9a59 .rtsb-image-accordion-wrapper {
    gap: 12px !important;
    padding: 0 12px 8px !important;
  }
}

/* 6. Blog post editorial header: drop cap on the opening paragraph. */
.single-post .entry-content > p:first-of-type::first-letter {
  float: left;
  font-family: Georgia, serif;
  font-size: 3.4em;
  line-height: 0.85;
  font-weight: 800;
  padding: 4px 10px 0 0;
  color: #1f3f75;
}

@media (max-width: 480px) {
  .single-post .page-title {
    font-size: 26px !important;
  }
}

/* 7. Editorial treatment for static informational pages (Quiénes Somos,
   Contacto, políticas, etc.) - same spirit as the blog post redesign:
   more generous typography/spacing, and elegant framed images instead of
   raw photos touching the edge (same look as the Home "Locales" section). */
body.page .entry-content .elementor-widget-text-editor p,
body.page .entry-content .elementor-widget-text-editor li {
  font-size: 16.5px !important;
  line-height: 1.8 !important;
}
body.page .entry-content .elementor-widget-text-editor h4 {
  margin-top: 6px !important;
  letter-spacing: 0.2px;
}
body.page .entry-content blockquote {
  background: #f4f7fb;
  padding: 18px 22px !important;
  border-radius: 0 14px 14px 0;
  border-inline-start-width: 4px !important;
  border-inline-start-color: #1f3f75 !important;
  margin: 24px 0 !important;
}
body.page .entry-content .elementor-widget-image img {
  border-radius: 18px !important;
  box-shadow: 0 14px 32px rgba(11, 50, 115, 0.2);
}

@media (max-width: 600px) {
  body.page .entry-content .elementor-widget-image img {
    border-radius: 14px !important;
  }
}

/* --- Rail lateral de categorias + tipografia unificada del sitio (agregado 2026-07-27) --- */
.moa-shell { display: block; }
@media (min-width: 1024px) {
  .moa-shell { display: flex; align-items: flex-start; gap: 0; }
  .moa-shell > .moa-content { flex: 1; min-width: 0; }
}
.moa-rail { display: none; }
@media (min-width: 1024px) {
  .moa-rail {
    display: flex; flex-direction: column;
    width: 220px; flex: none;
    position: sticky; top: 84px;
    background: #fff; border-right: 1px solid #e6e0d4;
    padding: 14px 0; align-self: flex-start;
    max-height: calc(100vh - 84px); overflow: visible;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    z-index: 25;
  }
}
.moa-rail-item-wrap { position: relative; }
.moa-rail-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; font-size: 13.5px; font-weight: 600;
  color: #1f3f75; text-decoration: none; border-left: 3px solid transparent;
}
.moa-rail-item svg { flex: none; width: 18px; height: 18px; color: #1f3f75; opacity: .8; }
.moa-rail-item-wrap:hover .moa-rail-item, .moa-rail-item-wrap:focus-within .moa-rail-item {
  background: #e9eef8; color: #1f3f75; border-left-color: #e3502b;
}
.moa-rail-item .moa-chev { margin-left: auto; width: 12px; height: 12px; opacity: .5; }
.moa-panel {
  display: none; position: absolute; left: 220px; top: 0;
  background: #fff; border: 1px solid #e6e0d4; border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(16,24,36,.25);
  padding: 22px 26px; min-width: 340px; z-index: 30;
}
.moa-rail-item-wrap:hover .moa-panel, .moa-rail-item-wrap:focus-within .moa-panel { display: flex; gap: 30px; }
.moa-panel-col h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #1f3f75;
}
.moa-panel-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.moa-panel-col a { font-size: 13px; color: #4a5568; text-decoration: none; }
.moa-panel-col a:hover { color: #e3502b; }

/* Menu superior de escritorio completo: todos sus items (categorias, Quienes somos,
   Contacto, Blog) ya viven en el riel lateral, asi que el menu horizontal ya no hace
   falta en desktop. No toca el menu movil (contenedor distinto, #menu-menu-1). */
@media (min-width: 1024px) {
  #header-menu-1 { display: none !important; }
}

/* Tipografia unificada de todo el sitio, alineada con el riel/mockups aprobados */
body, p, li, input, textarea, select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.product_title,
.mas-title, .mas-tag, .mas-sub,
.ct-header-menu-item > a,
.ct-panel-content .ct-menu-link,
.page-title,
button, .button, .ct-button, .added_to_cart,
.woocommerce-Price-amount {
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif !important;
}

/* --- Buscador en el riel + info del sitio + barra sticky mobile/tablet (agregado 2026-07-27) --- */
.moa-rail-search { padding: 0 16px 14px; }
.moa-rail-search .dgwt-wcas-search-wrapp { width: 100%; }
.moa-rail-search .dgwt-wcas-search-wrapp,
.moa-mobile-search .dgwt-wcas-search-wrapp {
  border-radius: 12px; box-shadow: 0 8px 20px -10px rgba(16,24,36,.25);
  min-width: 0 !important; max-width: 100%; width: 100% !important;
}
.moa-rail-search, .moa-mobile-search { overflow: hidden; }

.moa-rail-divider { margin: 10px 20px; height: 1px; background: #e6e0d4; }
.moa-rail-info-label {
  padding: 4px 20px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #9aa3b2;
}

.moa-mobile-bar { display: block; }
@media (min-width: 1024px) { .moa-mobile-bar { display: none; } }
.moa-mobile-bar {
  position: sticky; top: 84px; z-index: 40;
  background: #fff; border-bottom: 1px solid #e6e0d4;
  padding: 10px 14px 12px;
}
.moa-mobile-search { margin-bottom: 10px; }
.moa-mobile-cats {
  display: flex; gap: 10px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.moa-mobile-cats::-webkit-scrollbar { display: none; }
.moa-mobile-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 74px; text-decoration: none; text-align: center;
}
.moa-mobile-chip-icon {
  width: 44px; height: 44px; border-radius: 14px; background: #e9eef8;
  display: flex; align-items: center; justify-content: center;
}
.moa-mobile-chip-icon svg { width: 20px; height: 20px; color: #1f3f75; }
.moa-mobile-chip span { font-size: 10.5px; font-weight: 600; color: #4a5568; line-height: 1.2; }

/* --- Categorias y fichas de producto: look profesional (agregado 2026-07-27) --- */

/* Encabezado de categoria: panel tipo "separador" con acento de marca, mismo criterio visual del home */
.woolentor-archive-data-area {
  max-width: 820px; margin: 8px auto 40px; padding: 30px 34px 28px;
  text-align: center; background: linear-gradient(180deg, #f3f6fc 0%, #ffffff 100%);
  border: 1px solid #e6e0d4; border-radius: 20px;
}
.woolentor-archive-title {
  font-size: 30px; letter-spacing: .01em; color: #1f3f75; margin: 0 0 16px;
  position: relative; display: inline-block; padding-bottom: 16px;
}
.woolentor-archive-title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #1f3f75, #e3502b);
}
.woolentor-archive-desc { font-size: 15px; line-height: 1.75; color: #4a5568; margin: 0; }

/* Grilla de productos de categoria: tarjetas con borde, sombra y hover, en vez del listado plano */
ul.products {
  display: grid !important; width: 100% !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  justify-content: center !important;
  gap: 20px !important; list-style: none !important; padding: 0 !important; margin: 0 0 44px !important;
}
ul.products li.product {
  background: #fff !important; border: 1px solid #e9e4d8; border-radius: 18px;
  padding: 18px 18px 22px !important; text-align: center; position: relative;
  box-shadow: 0 10px 24px -18px rgba(16,24,36,.18);
  transition: transform .25s ease, box-shadow .25s ease;
  width: auto !important; float: none !important; margin: 0 !important;
}
ul.products li.product:hover { transform: translateY(-6px); box-shadow: 0 20px 34px -18px rgba(16,24,36,.28); }
ul.products li.product img {
  border-radius: 12px; aspect-ratio: 1/1; object-fit: contain; background: #f7f8fb;
  margin: 0 0 14px !important; width: 100% !important; height: auto !important;
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px; font-weight: 600; color: #1f3f75; line-height: 1.4; margin: 0 0 8px;
}
ul.products li.product .price {
  font-size: 16px; font-weight: 700; color: #e3502b; display: block; margin: 0 0 6px;
}
ul.products li.product .button, ul.products li.product .add_to_cart_button,
.ct-woo-card-actions .button, .ct-woo-card-actions .add_to_cart_button {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: auto !important; max-width: max-content !important; flex: none !important; align-self: center !important;
  margin: 0 !important; padding: 10px 22px !important; border-radius: 999px !important;
  background: #1f3f75 !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important;
  text-decoration: none; transition: background .2s ease; border: none; white-space: nowrap; line-height: 1.2 !important;
}
/* Tarjeta apilada (grilla de productos de categoria): el boton necesita separacion vertical
   del titulo/precio de arriba. En la fila horizontal de .ct-woo-card-actions esto NO debe
   aplicarse (rompe el centrado vertical con el precio) - reglas separadas a proposito. */
ul.products li.product .button, ul.products li.product .add_to_cart_button {
  margin-top: 12px !important;
}
/* Fila horizontal precio + boton (paginas de categoria, .ct-woo-card-actions): centrar todo
   verticalmente entre si, sin depender del margin-top pensado para la tarjeta apilada. */
.ct-woo-card-actions {
  display: flex !important; align-items: center !important; gap: 10px;
}
.ct-woo-card-actions .price {
  margin: 0 !important; display: flex !important; align-items: center !important;
}
ul.products li.product .button:hover, ul.products li.product .add_to_cart_button:hover { background: #f29219 !important; }

/* Ficha de producto individual: mismo criterio tipografico y de color */
.summary.entry-summary .product_title { font-size: 27px; color: #1f3f75; margin: 0 0 12px; }
.summary.entry-summary > .price {
  font-size: 23px; font-weight: 700; color: #e3502b; margin: 0 0 20px; display: block;
}
.summary.entry-summary .ct-product-additional-info {
  background: #f7f8fb; border-radius: 14px; padding: 16px 20px; margin: 18px 0;
}
.summary.entry-summary .ct-product-additional-info ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
  list-style: none; padding: 0; margin: 8px 0 0;
}
.woocommerce div.product form.cart .button, .woocommerce div.product .single_add_to_cart_button {
  border-radius: 999px !important; padding: 14px 34px !important; font-weight: 700 !important;
  background: #1f3f75 !important; border: none !important; color: #fff !important;
}
.woocommerce div.product form.cart .button:hover, .woocommerce div.product .single_add_to_cart_button:hover {
  background: #f29219 !important;
}

/* --- Header mas compacto: menos espacio en blanco antes del riel/buscador (agregado 2026-07-27) --- */
/* Fila "middle" del header: widget de texto vacio (sin contenido configurado), solo agrega espacio muerto */
header#header [data-row="middle"] { display: none !important; }
/* La fila "top" del header tenia un min-height fijo (variable CSS del tema) mas alto de
   lo que el logo realmente necesita, dejando espacio en blanco arriba y abajo del logo aunque
   este mantenga su tamano original. Se saca ese piso minimo, sin tocar el logo. */
header#header [data-row="top"] > div { min-height: 0 !important; }



/* --- Seccion CATEGORIAS del home + footer ordenado (agregado 2026-07-27) --- */

/* Tarjetas de la seccion CATEGORIAS del home (widget RTSB): mismo estilo que los tiles
   de "Compra por objetivo" - foto llenando el cuadro, texto superpuesto abajo con degradado.
   La IMAGEN se deja en flujo normal (no position:absolute) para que sea ella la que le da
   tamano real al cuadro (el widget no trae una altura fija propia) - solo el texto se saca
   del flujo para superponerse encima; asi se evita que la tarjeta colapse a 0 de alto. */
.rtsb-categories-container .category-wrapper {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #f7f8fb; isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 22px -18px rgba(16,24,36,.18);
}
.rtsb-categories-container .category-wrapper:hover {
  transform: translateY(-6px); box-shadow: 0 18px 30px -16px rgba(16,24,36,.26);
}
.rtsb-categories-container .rtsb-product-img {
  margin: 0 !important; line-height: 0;
}
.rtsb-categories-container .rtsb-product-img figure { margin: 0; border-radius: 0 !important; }
.rtsb-categories-container .rtsb-product-img a { display: block; }
.rtsb-categories-container .rtsb-product-img img {
  display: block !important; width: 100% !important; height: auto !important;
  aspect-ratio: 3/4 !important; object-fit: cover; border-radius: 0 !important;
}
.rtsb-categories-container .category-wrapper::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,24,36,0) 42%, rgba(16,24,36,.78) 100%);
}
.rtsb-categories-container .rtsb-category-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 14px 12px; text-align: left;
}
.rtsb-categories-container .category-title {
  font-size: 14px !important; font-weight: 800 !important; margin: 0 !important; line-height: 1.25 !important;
}
.rtsb-categories-container .category-title a { color: #fff !important; }
.rtsb-categories-container .category-info { display: none !important; }

/* Footer: el copyright y el icono de Instagram quedaban en lineas separadas porque
   el parrafo de copyright es un elemento de bloque - se centra todo en una fila */
.ct-footer-copyright {
  display: flex !important; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; text-align: center;
}
.ct-footer-copyright p { margin: 0 !important; }
.ct-footer-copyright a { margin-left: 0 !important; }

/* --- Boton "Anadir al carrito" de la grilla MAS BUSCADOS + tamano de tarjetas de CATEGORIAS (agregado 2026-07-27) --- */

/* El boton de WooLentor (grilla "MAS BUSCADOS" del home) se veia enorme, ocupando casi todo
   el ancho de la tarjeta en vez de ajustarse al texto "Anadir al carrito". */
.woolentor-product-actions { display: flex; justify-content: center; width: 100%; }
.woolentor-product-actions .woolentor-cart-btn,
.woolentor-product-actions .add_to_cart_button {
  display: inline-flex !important; align-items: center; gap: 6px;
  width: auto !important; max-width: max-content !important; flex: none !important;
  padding: 9px 18px !important; border-radius: 999px !important;
  background: #1f3f75 !important; color: #fff !important; border: none !important;
  font-size: 12.5px !important; font-weight: 600 !important; white-space: nowrap;
}
.woolentor-product-actions .woolentor-cart-btn:hover,
.woolentor-product-actions .add_to_cart_button:hover { background: #f29219 !important; }
.woolentor-product-actions .woolentor-cart-btn .cart-icon { width: 14px !important; height: 14px !important; }

/* Tarjetas de la seccion CATEGORIAS del home: mismo tamano exacto que los tiles de
   "Compra por objetivo" (.moa-grid) - mismas columnas, gap y ancho maximo de seccion,
   para que ambas secciones se vean del mismo tamano. */
.rtsb-categories-container { max-width: 1180px; margin: 0 auto !important; }
/* Escritorio y tablet/iPad: 4 columnas fijas (4+4 con las 8 categorias actuales, en vez de
   auto-fit que calculaba 7+1 en escritorio y 5+3 en iPad segun el ancho disponible - quedaban
   items sueltos en la segunda fila). Mobile (<=560px) sin cambios, el usuario confirmo que
   esa version esta bien. */
.rtsb-categories-container .rtsb-row {
  grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important;
  justify-content: center !important; justify-items: center !important;
}
@media (max-width: 980px) {
  .rtsb-categories-container .rtsb-row { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 560px) {
  .rtsb-categories-container .rtsb-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; gap: 10px !important; }
  .rtsb-categories-container .category-title { font-size: 12px !important; }
}

/* --- Unificar todos los azules del sitio a un solo tono de marca (agregado 2026-07-27) --- */
/* El sitio tenia varios azules distintos usados como texto en distintas paginas/momentos:
   #000080 (navy "puro", texto en negrita de paginas como Quienes Somos), #0c3373
   (encabezados del footer), #192a3d. Se unifican todos al azul de marca #1f3f75 ya usado
   en el riel, las categorias, los botones y el resto del rediseno de esta sesion. */
[style*="color: #000080"], [style*="color:#000080"],
[style*="color: #0c3373"], [style*="color:#0c3373"],
[style*="color: #192a3d"], [style*="color:#192a3d"],
[style*="color: #333399"], [style*="color:#333399"] {
  color: #1f3f75 !important;
}

/* --- Subcategorias en paginas de categoria padre (ej. Gummies): mismo look que CATEGORIAS
   del home - foto en flujo normal (define el alto real de la tarjeta), texto superpuesto
   abajo con degradado. Widget distinto al del home (WooLentor .ht-category-*, no RTSB). --- */
.ht-category-wrap {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #fff; isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 22px -18px rgba(16,24,36,.18);
  max-width: 220px !important; width: 100% !important; margin: 0 auto !important;
}
.ht-category-image img { max-height: 300px !important; }
.ht-category-wrap:hover {
  transform: translateY(-6px); box-shadow: 0 18px 30px -16px rgba(16,24,36,.26);
}
.ht-category-image { margin: 0 !important; line-height: 0; }
.ht-category-image a { display: block; }
.ht-category-image img {
  display: block !important; width: 100% !important; height: auto !important;
  aspect-ratio: 3/4 !important; object-fit: cover !important; border-radius: 0 !important;
}
.ht-category-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,24,36,0) 42%, rgba(16,24,36,.78) 100%);
}
[class^="ht-category-content-"] {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 14px 12px; text-align: left; margin: 0 !important;
}
[class^="ht-category-content-"] h3 {
  margin: 0 !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.25 !important;
}
[class^="ht-category-content-"] h3 a { color: #fff !important; }
@media (max-width: 640px) {
  [class^="ht-category-content-"] h3 { font-size: 12px !important; }
}

/* --- Grilla de subcategorias (widget WooLentor wl-category-grid): separacion y tamano
   (agregado 2026-07-27). El widget trae "wlno-gutters" (sin espacio entre columnas) por
   configuracion propia - se toma control total del layout via CSS Grid, mismo esquema de
   columnas/gap que la seccion CATEGORIAS del home, para que se vea igual en todo el sitio. --- */
.elementor-widget-wl-category-grid {
  max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important;
}
.wl-row.wlno-gutters, .elementor-widget-wl-category-grid .wl-row {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 14px !important; width: 100% !important; max-width: 100% !important;
  justify-content: center !important; justify-items: center !important;
}
.wl-row.wlno-gutters [class*="wl-col-"], .elementor-widget-wl-category-grid .wl-row [class*="wl-col-"] {
  width: auto !important; max-width: none !important; flex: none !important;
  padding: 0 !important; margin: 0 !important;
}
@media (max-width: 980px) {
  .wl-row.wlno-gutters, .elementor-widget-wl-category-grid .wl-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 12px !important; }
}
@media (max-width: 560px) {
  .wl-row.wlno-gutters, .elementor-widget-wl-category-grid .wl-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; gap: 10px !important; }
}

/* El widget trae un borde decorativo blanco (efecto hover nativo) posicionado en inset -
   se ve como un tinte gris en las esquinas superiores sobre el degradado oscuro agregado
   en el punto #105. No es parte del diseno pedido, se oculta. */
.ht-category-wrap .ht-category-image a.ht-category-border::before,
.ht-category-wrap .ht-category-image a.ht-category-border-2::before {
  display: none !important;
}

/* --- Centrado general de titulo/precio/boton en TODAS las tarjetas de producto
   (categorias, subcategorias) - regla de sitio, no puntual (agregado 2026-07-27) --- */
ul.products li.product {
  text-align: center !important;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price {
  text-align: center !important;
  width: 100%;
}
.ct-woo-card-actions .price {
  text-align: center !important;
}
.ct-woo-card-actions {
  justify-content: center !important;
}
ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  margin-left: auto !important; margin-right: auto !important;
}

/* --- Precio desbordado (causa real) + limpieza de tarjeta + descripcion de categoria
   recortada a 3 lineas (agregado 2026-07-27) --- */

/* El tema hace .ct-woo-card-actions mas ancho que su contenedor a proposito (para que un
   divisor se vea de borde a borde), con margin negativo. Nuestro diseno de tarjeta (con
   bordes redondeados propios) no necesita ese truco y hacia que el precio se saliera
   visualmente del cuadro. */
.ct-woo-card-actions {
  width: 100% !important; margin-inline: 0 !important;
}
/* El tema fuerza flex:1 0 0% en TODOS los hijos de .ct-woo-card-actions (precio y boton
   ocupando 50/50 sin poder achicarse) - el boton ya se habia corregido a tamano fijo
   (punto #104), pero el precio seguia con flex:1 0 0% del tema, creciendo/desbordando
   la fila. Se iguala el comportamiento: precio tambien a tamano de su contenido. */
.ct-woo-card-actions .price {
  flex: 0 1 auto !important; min-height: 0 !important; padding: 0 !important;
}

/* Lista de categorias del producto (ADULTO MAYOR, CREATINAS, SUPLEMENTOS...) - sin estilo
   propio, muy larga, generaba texto apinado entre la foto y el precio. Se oculta: el
   usuario ya esta dentro de una categoria, no aporta ver la lista repetida en cada tarjeta. */
ul.entry-meta { display: none !important; }

/* Descripcion de categoria (parrafo bajo el titulo): recortada a 3 lineas con boton
   "Ver mas" que la expande - le quitamos protagonismo antes de llegar a los productos. */
.woolentor-archive-desc {
  max-height: 5.4em; overflow: hidden; position: relative;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  transition: max-height .3s ease;
}
.woolentor-archive-desc.moa-desc-expanded {
  max-height: 999px; display: block; -webkit-line-clamp: unset;
}
.moa-desc-toggle {
  display: inline-block; margin-top: 10px; padding: 6px 18px; border-radius: 999px;
  background: #1f3f75; color: #fff !important; font-size: 12.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
}
.moa-desc-toggle:hover { background: #e3502b; }

/* --- Ampliar el espacio real de la tarjeta de producto en mobile, en vez de seguir
   ajustando la posicion del precio (agregado 2026-07-27) --- */

/* Contenedor del widget de productos: asegurar que use el 100% del ancho disponible,
   sin padding lateral heredado de Elementor. */
.elementor-element-3751a94,
.elementor-element-3751a94 .elementor-widget-container,
.elementor-element-3751a94 .wl-filterable-products-content {
  width: 100% !important; max-width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
}

@media (max-width: 767px) {
  /* La tarjeta traia padding-inline:20px de fabrica (tema) - en pantallas angostas eso
     le resta bastante ancho util a la fila de precio + boton. Se reduce a 14px. */
  [data-products="type-2"] .product { padding-inline: 14px !important; }
  /* El usuario prefiere 2 columnas en mobile. En 2 columnas cada tarjeta mide ~150-170px,
     insuficiente para precio + boton EN LA MISMA FILA. Solucion: apilar precio y boton
     uno debajo del otro (en vez de lado a lado) para que cada uno use el ancho completo
     de la tarjeta - asi caben comodos sin necesidad de una sola columna. */
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .ct-woo-card-actions {
    flex-direction: column !important; gap: 8px !important;
    align-items: center !important; justify-content: center !important; width: 100% !important;
  }
  .ct-woo-card-actions .price {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    text-align: center !important; margin: 0 auto !important;
  }
  .ct-woo-card-actions .button,
  .ct-woo-card-actions .add_to_cart_button {
    width: 90% !important; max-width: 260px !important; box-sizing: border-box !important;
    margin: 0 auto !important; display: flex !important; justify-content: center !important;
  }
  .woocommerce-loop-product__title { font-size: 13px !important; }
}
/* Seguro contra desborde horizontal: se aplica sobre .moa-content (el area de contenido,
   hermana del riel, NO ancestro) en vez de html/body. overflow-x:hidden en un ANCESTRO del
   riel (.moa-rail) rompe su position:sticky (la especificacion CSS hace que overflow-x
   distinto de visible fuerce tambien overflow-y a un valor no-visible en el mismo elemento,
   creando sin querer un nuevo contenedor de scroll que atrapa el sticky). Los desbordes reales
   ya se corrigieron en el origen (box-sizing, anchos) en los puntos #124-132; esto queda solo
   como red de seguridad adicional, sin arriesgar el scroll pegajoso del riel. */
.moa-content { overflow-x: hidden; }

/* ============================================================
   BLOQUE FINAL Y DEFINITIVO: tarjeta de producto en paginas de
   categoria ([data-products="type-2"], .ct-woo-card-actions).
   Consolida/reemplaza ajustes anteriores que quedaron compitiendo
   entre si. Se declara al final del archivo a proposito: tiene
   prioridad de cascada sobre los bloques anteriores para las
   mismas propiedades. (agregado 2026-07-27)
   ============================================================ */

/* 1) box-sizing:border-box en todo el componente - evita que un padding se sume
   POR FUERA de un ancho ya definido (causa real de varios desbordes anteriores). */
[data-products="type-2"] .product,
[data-products="type-2"] .product * {
  box-sizing: border-box !important;
}

/* 2) Anular el truco nativo del tema de hacer la imagen y la fila de acciones MAS
   ANCHAS que su contenedor (margin-inline negativo, para simular un divisor de
   borde a borde). Nuestra tarjeta tiene su propio borde/sombra redondeados y no
   necesita ese truco - era la causa real de que la imagen y el precio/boton se
   salieran visualmente del cuadro. */
[data-products="type-2"] .product figure,
[data-products="type-2"] .ct-woo-card-actions {
  width: 100% !important; margin-inline: 0 !important; margin-bottom: 0 !important;
}
[data-products="type-2"] .product figure img {
  width: 100% !important; height: auto !important; max-width: 100% !important;
  display: block !important; object-fit: contain !important;
}

/* 3) Fila de acciones (precio + boton): en TODOS los tamanos de pantalla se apilan uno
   debajo del otro (no lado a lado) - eliminar el layout en fila evita por completo los
   problemas de reparto de espacio/separacion que se repitieron en varias correcciones
   anteriores. Sin los bordes divisorios nativos del tema (ya no hacen falta). */
[data-products="type-2"] .ct-woo-card-actions {
  border: none !important; margin-top: 10px !important; padding: 10px 0 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 10px !important;
}
[data-products="type-2"] .ct-woo-card-actions > * {
  flex: none !important; min-height: 0 !important; padding: 0 !important;
  width: auto !important; max-width: 100% !important;
}
[data-products="type-2"] .ct-woo-card-actions .price {
  text-align: center !important; margin: 0 auto !important;
}
[data-products="type-2"] .ct-woo-card-actions .price::after { display: none !important; }

/* Al hacer click en "Anadir al carrito", WooCommerce agrega un enlace hermano
   ".added_to_cart" ("Ver carrito") - se incluye en el mismo grupo para heredar el mismo
   diseno.
   IMPORTANTE: esta regla unica cubre normal + hover + active + focus **a la vez, en el
   mismo bloque**, en vez de reglas separadas por estado. Asi es imposible que el tamano
   difiera entre estados (todos comparten literalmente la misma declaracion) - solo el
   color de fondo cambia, en una regla aparte y minima mas abajo. Ancho por contenido
   (fit-content) en vez de porcentaje, para no depender de calculos relativos al
   contenedor que puedan variar entre estados. */
[data-products="type-2"] .ct-woo-card-actions .button,
[data-products="type-2"] .ct-woo-card-actions .add_to_cart_button,
[data-products="type-2"] .ct-woo-card-actions .added_to_cart,
[data-products="type-2"] .ct-woo-card-actions .button:hover,
[data-products="type-2"] .ct-woo-card-actions .add_to_cart_button:hover,
[data-products="type-2"] .ct-woo-card-actions .added_to_cart:hover,
[data-products="type-2"] .ct-woo-card-actions .button:active,
[data-products="type-2"] .ct-woo-card-actions .add_to_cart_button:active,
[data-products="type-2"] .ct-woo-card-actions .added_to_cart:active,
[data-products="type-2"] .ct-woo-card-actions .button:focus,
[data-products="type-2"] .ct-woo-card-actions .add_to_cart_button:focus,
[data-products="type-2"] .ct-woo-card-actions .added_to_cart:focus,
[data-products="type-2"] .ct-woo-card-actions .button:visited,
[data-products="type-2"] .ct-woo-card-actions .add_to_cart_button:visited,
[data-products="type-2"] .ct-woo-card-actions .added_to_cart:visited {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: fit-content !important; max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important; border-radius: 999px !important;
  color: #fff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.25 !important;
  white-space: normal !important; text-decoration: none !important; text-align: center !important;
  border: none !important; outline: none !important;
  transform: none !important; box-shadow: none !important;
  -webkit-appearance: none !important; appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* Unico cambio permitido entre estados: el color de fondo. */
[data-products="type-2"] .ct-woo-card-actions .button,
[data-products="type-2"] .ct-woo-card-actions .add_to_cart_button,
[data-products="type-2"] .ct-woo-card-actions .added_to_cart {
  background: #1f3f75 !important;
}
[data-products="type-2"] .ct-woo-card-actions .button:hover,
[data-products="type-2"] .ct-woo-card-actions .add_to_cart_button:hover,
[data-products="type-2"] .ct-woo-card-actions .added_to_cart:hover,
[data-products="type-2"] .ct-woo-card-actions .button:active,
[data-products="type-2"] .ct-woo-card-actions .add_to_cart_button:active,
[data-products="type-2"] .ct-woo-card-actions .added_to_cart:active,
[data-products="type-2"] .ct-woo-card-actions .button:focus,
[data-products="type-2"] .ct-woo-card-actions .add_to_cart_button:focus,
[data-products="type-2"] .ct-woo-card-actions .added_to_cart:focus {
  background: #f29219 !important;
}
/* Cuando ambos (boton "Anadir al carrito" original + "Ver carrito" nuevo) quedan
   visibles a la vez, se ven dos pildoras apiladas - es el comportamiento esperado, ambas
   ya quedan con el mismo diseno consistente. Si se prefiere ocultar el boton original
   una vez agregado, avisar. */

/* ============================================================
   REDISENO DEFINITIVO CATEGORIAS del home (agregado 2026-07-27)
   El usuario comparo directamente con "Compra por objetivo" (moa-tile)
   y las encontro "separadas"/feas en comparacion. Causa real: los
   tiles de objetivo usan FOTOS REALES que llenan el cuadro (el
   degradado oscuro se ve bien sobre eso); las de CATEGORIAS son
   RECORTES DE PRODUCTO con fondo transparente/blanco - el mismo
   degradado oscuro sobre un recorte transparente se ve gris sucio,
   no como una foto con textura. En vez de forzar la misma tecnica
   sobre un contenido que no le sirve, se rediseña con un enfoque que
   SI funciona para recortes de producto: fondo con tinte de marca
   (no blanco/gris puro), imagen completa sin recortar (contain, no
   cover), texto ABAJO de la imagen en vez de superpuesto, sin sombra
   individual por tarjeta y con gap apretado - para que se vean como
   un mosaico cohesivo, igual que la seccion de referencia.
   Se declara al final del archivo para tener prioridad sobre los
   bloques anteriores de CATEGORIAS (puntos #97, #99, #101, #103, #119).
   ============================================================ */

.rtsb-categories-container .rtsb-row { gap: 10px !important; }

.rtsb-categories-container .category-wrapper {
  background: linear-gradient(180deg, #eef2f9 0%, #ffffff 100%) !important;
  box-shadow: none !important;
  transition: transform .2s ease !important;
}
.rtsb-categories-container .category-wrapper:hover {
  transform: translateY(-4px) !important; box-shadow: 0 12px 20px -14px rgba(16,24,36,.2) !important;
}

/* Quitar el degradado oscuro superpuesto - sobre fondo blanco/transparente se ve gris sucio */
.rtsb-categories-container .category-wrapper::after { content: none !important; }

/* Imagen: contenida completa (sin recortar), centrada, en una caja cuadrada con aire */
.rtsb-categories-container .rtsb-product-img {
  aspect-ratio: 1/1 !important; display: flex !important; align-items: center !important;
  justify-content: center !important; padding: 18px 18px 8px !important;
}
.rtsb-categories-container .rtsb-product-img img {
  width: auto !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important; aspect-ratio: unset !important;
}

/* Texto: abajo de la imagen, en flujo normal (no superpuesto), navy sobre fondo claro */
.rtsb-categories-container .rtsb-category-content {
  position: static !important; padding: 0 10px 16px !important; text-align: center !important;
}
.rtsb-categories-container .category-title a { color: #1f3f75 !important; }

/* --- Carrito agregado al riel + hover en amarillo/dorado del logo (agregado 2026-07-27) --- */
.moa-rail-cart { position: relative; }
.moa-cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: #f29219; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
}

/* --- "MAS BUSCADOS" del home: distribucion balanceada en los 3 tamanos (agregado 2026-07-27) ---
   Primer intento (4 columnas fijas, sin @media) dejaba 4+2 en la segunda fila (desbalanceado)
   y ademas no respetaba los breakpoints propios del plugin, arriesgando romper el mobile
   (que ya estaba bien en 2 columnas por defecto del widget). Con exactamente 6 productos
   configurados en esta seccion, se elige el numero de columnas que cierra parejo en cada
   tamano: 3 columnas en escritorio y tablet (3+3), 2 columnas en mobile (2+2+2) - cada regla
   con su propio @media, para no interferir con otros anchos. */
.elementor-element-c461b62 .woolentor-product-grid .woolentor-products-wrapper > [class*="woolentor-columns-"] {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 1024px) {
  .elementor-element-c461b62 .woolentor-product-grid .woolentor-products-wrapper > [class*="woolentor-columns-"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .elementor-element-c461b62 .woolentor-product-grid .woolentor-products-wrapper > [class*="woolentor-columns-"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- Color de respaldo para encabezados sin color propio (agregado 2026-07-27) ---
   El punto #102 unifico colores YA asignados explicitamente (ej. style="color: #000080")
   a un solo azul. Pero encabezados SIN ningun color asignado (ej. <h4 class="wp-block-heading">
   en el footer, "CONTACTANOS") heredan el negro por defecto del tema, no el azul de marca -
   por eso se veian mezclados negro/azul uno al lado del otro. Se agrega un color de respaldo
   de baja especificidad (elemento simple, sin !important) para que cualquier encabezado sin
   estilo propio use el azul de marca - cualquier regla mas especifica ya existente en el sitio
   (ej. texto blanco sobre foto) sigue ganando sin problema, esto solo cubre lo que quedaba
   sin color. */
h1, h2, h3, h4, h5, h6 { color: #1f3f75; }

/* --- Texto del footer: unificar la variable de color por columna (agregado 2026-07-27) ---
   Cada columna del footer (widget-area-2, 3, 4...) tiene su propia variable CSS
   --theme-text-color configurada de forma independiente en el Header/Footer Builder del
   tema (ej. widget-area-2 en #0c3373, otras columnas sin ninguna, cayendo al default del
   tema) - por eso los parrafos de "CONTACTANOS" se veian de otro color que los de "TIENDA
   ONLINE" aunque los titulos ya estuvieran unificados (punto #144). Se fuerza la misma
   variable en las 4 columnas. */
.ct-footer [data-column] { --theme-text-color: #1f3f75 !important; }
.ct-footer [data-column] a { color: #1f3f75; }
.ct-footer [data-column] a:hover { color: #e3502b; }

/* --- Formato mobile de CATEGORIAS igualado al de "Compra por objetivo" (agregado 2026-07-27) ---
   En un telefono real (no la herramienta de vista responsiva) el grid mobile usaba
   auto-fit con minimo 110px - en un ancho de pantalla real eso podia calcular 3 columnas
   en vez de 2 (justo lo que explicaba que "CREATINAS" se cortara a mitad de palabra: el
   espacio disponible real era mucho mas angosto de lo esperado). Ademas faltaba el padding
   lateral de 20px que si tiene la seccion de referencia (.moa-goals), por eso las tarjetas
   no usaban bien el ancho de pantalla. Se copian los mismos valores de esa seccion: 2
   columnas FIJAS (no auto-fit) y 20px de padding lateral. */
@media (max-width: 560px) {
  .rtsb-categories-container {
    padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important;
  }
  .rtsb-categories-container .rtsb-row {
    grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important;
  }
  .rtsb-categories-container .category-title {
    font-size: 13px !important; white-space: normal !important; word-break: normal !important;
    overflow-wrap: normal !important;
  }
}