/* Extraido de los widgets HTML de Elementor: header.
   El codigo es el mismo, solo se movio a un archivo para que no viaje
   en el HTML de cada visita y el navegador lo pueda cachear. */

#fde-header {
  font-family: 'Nunito', system-ui, sans-serif;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  z-index: 100;
}

#fde-header * { box-sizing: border-box; }

.fde-h-top {
  max-width: 1360px;
  margin: 0 auto;
  padding: 18px 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}

.fde-h-logo img { height: 56px; width: auto; display: block; }

.fde-h-search { position: relative; width: 100%; max-width: 720px; justify-self: center; }
.fde-h-search-input-wrap { position: relative; background: #f1f3f0; border-radius: 999px; display: flex; align-items: center; overflow: hidden; transition: box-shadow .2s, background .2s; }
.fde-h-search-input-wrap:focus-within { background: #fff; box-shadow: 0 0 0 2px #4CAF50, 0 4px 16px rgba(76,175,80,0.12); }
.fde-h-search-input { flex: 1; height: 48px; padding: 0 20px; background: transparent; border: none; font-family: 'Nunito', sans-serif; font-size: 15px; color: #1a1a1a; outline: none; }
.fde-h-search-input::placeholder { color: #9ca3af; }
.fde-h-search-submit { width: 56px; height: 48px; background: #4CAF50; border: none; display: grid; place-items: center; cursor: pointer; color: #fff; transition: background .2s; }
.fde-h-search-submit:hover { background: #43A047; }
.fde-h-search-submit svg { width: 20px; height: 20px; }
.fde-h-search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06); max-height: 480px; overflow-y: auto; z-index: 1000; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.fde-h-search-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fde-h-search-section { padding: 12px 8px 8px; }
.fde-h-search-section + .fde-h-search-section { border-top: 1px solid #f5f5f5; }
.fde-h-search-section-title { font-size: 11px; font-weight: 800; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 12px 8px; }
.fde-h-search-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; transition: background .15s; cursor: pointer; }
.fde-h-search-item:hover { background: #f7f8f6; }
.fde-h-search-item-img { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: linear-gradient(160deg, #F4F8F2, #fff); border: 1px solid #f0f0f0; padding: 4px; flex-shrink: 0; }
.fde-h-search-item-info { flex: 1; min-width: 0; }
.fde-h-search-item-cat { font-size: 10px; font-weight: 800; color: #46C85C; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.fde-h-search-item-name { font-size: 14px; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fde-h-search-item-price { font-size: 13px; font-weight: 800; color: #1b5e20; }
.fde-h-search-item-chev { width: 16px; height: 16px; color: #d0d0d0; flex-shrink: 0; }
.fde-h-search-tax-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; transition: background .15s; }
.fde-h-search-tax-item:hover { background: #f7f8f6; }
.fde-h-search-tax-icon { width: 32px; height: 32px; border-radius: 50%; background: #E8F5E9; color: #43A047; display: grid; place-items: center; flex-shrink: 0; }
.fde-h-search-tax-icon svg { width: 14px; height: 14px; }
.fde-h-search-tax-name { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.fde-h-search-empty, .fde-h-search-loading, .fde-h-search-hint { padding: 40px 20px; text-align: center; color: #9ca3af; font-size: 14px; }
.fde-hl { color: #4CAF50; font-weight: 800; }

.fde-h-phone { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.fde-h-phone-icon { width: 40px; height: 40px; border-radius: 50%; background: #E8F5E9; color: #4CAF50; display: grid; place-items: center; flex-shrink: 0; }
.fde-h-phone-icon svg { width: 18px; height: 18px; }
.fde-h-phone-text { display: flex; flex-direction: column; line-height: 1.2; }
.fde-h-phone-label { font-size: 12px; color: #54595f; font-weight: 600; }
.fde-h-phone-number { font-size: 18px; font-weight: 800; color: #1a1a1a; }

.fde-h-nav { border-top: 1px solid #f0f0f0; }
.fde-h-nav-inner { max-width: 1360px; margin: 0 auto; padding: 14px 30px; display: flex; align-items: center; gap: 28px; }
.fde-h-categorias-slot { flex-shrink: 0; }
.fde-h-menu { display: flex; align-items: center; gap: 36px; flex: 1; justify-content: center; }
.fde-h-menu a { font-family: 'Nunito', sans-serif; font-size: 15.5px; font-weight: 500; color: #1a1a1a; text-decoration: none; padding: 6px 0; position: relative; transition: color .2s; }
.fde-h-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #4CAF50; transform: scaleX(0); transition: transform .2s; }
.fde-h-menu a:hover { color: #4CAF50; }
.fde-h-menu a:hover::after { transform: scaleX(1); }
.fde-h-icons { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.fde-h-wishlist-slot { display: inline-flex; align-items: center; }

.fde-h-mobile { display: none; }
.fde-h-drawer { position: fixed; top: 0; right: 0; width: 100%; max-width: 320px; height: 100vh; background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.12); transform: translateX(100%); transition: transform .3s cubic-bezier(.22,1,.36,1); z-index: 99998; overflow-y: auto; visibility: hidden; }
.fde-h-drawer.open { transform: translateX(0); visibility: visible; }
.fde-h-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99997; opacity: 0; pointer-events: none; transition: opacity .3s; visibility: hidden; }
.fde-h-drawer-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; }
.fde-h-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f0f0f0; }
.fde-h-drawer-title { font-size: 17px; font-weight: 800; color: #1a1a1a; }
.fde-h-drawer-close { width: 36px; height: 36px; border-radius: 50%; background: #f4f5f4; border: none; display: grid; place-items: center; cursor: pointer; color: #54595f; }
.fde-h-drawer-close svg { width: 16px; height: 16px; }
.fde-h-drawer-menu { padding: 12px 0; list-style: none; margin: 0; }
.fde-h-drawer-menu li { list-style: none; }
.fde-h-drawer-menu li a { display: flex; align-items: center; gap: 12px; padding: 16px 24px; font-size: 15.5px; font-weight: 700; color: #1a1a1a; text-decoration: none; transition: background .15s, color .15s; }
.fde-h-drawer-menu li a:hover, .fde-h-drawer-menu li a:active { background: #f4f8f2; color: #4CAF50; }
.fde-h-drawer-wishlist { padding: 0 24px; }
.fde-h-drawer-wishlist-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid #f0f0f0; }
.fde-h-drawer-wishlist-label { font-size: 15.5px; font-weight: 700; color: #1a1a1a; }
.fde-h-drawer-phone { margin: 12px 20px; padding: 16px; background: #E8F5E9; border-radius: 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.fde-h-drawer-phone-icon { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #4CAF50; display: grid; place-items: center; flex-shrink: 0; }
.fde-h-drawer-phone-text { line-height: 1.2; }
.fde-h-drawer-phone-label { font-size: 11px; color: #43A047; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.fde-h-drawer-phone-number { font-size: 17px; font-weight: 800; color: #1a1a1a; }

@media (max-width: 834px) {
  .fde-h-top, .fde-h-nav { display: none; }
  .fde-h-mobile { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 12px 16px; }
  .fde-h-mobile-logo { display: flex; align-items: center; min-width: 0; }
  .fde-h-mobile-logo img { height: 38px; max-width: 180px; width: auto; display: block; object-fit: contain; }
  .fde-h-mobile-btn { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid #e8e8e8; display: grid; place-items: center; cursor: pointer; color: #54595f; text-decoration: none; transition: border-color .2s, color .2s, transform .12s; padding: 0; position: relative; flex-shrink: 0; }
  .fde-h-mobile-btn:hover, .fde-h-mobile-btn:active { border-color: #4CAF50; color: #4CAF50; }
  .fde-h-mobile-btn:active { transform: scale(.92); }
  .fde-h-mobile-btn svg { width: 18px; height: 18px; }
  .fde-h-mobile .fde-h-wishlist-slot { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .fde-h-mobile { gap: 8px; padding: 10px 12px; }
  .fde-h-mobile-logo img { height: 32px; max-width: 140px; }
  .fde-h-mobile-btn, .fde-h-mobile .fdehc-btn { width: 36px; height: 36px; }
  .fde-h-mobile-btn svg, .fde-h-mobile .fdehc-btn svg { width: 16px; height: 16px; }
}

#fdehcSearchOverlay { position: fixed; inset: 0; z-index: 999999; background: #fff; display: flex; flex-direction: column; transform: translateY(-100%); transition: transform .3s cubic-bezier(.22,1,.36,1); visibility: hidden; font-family: 'Nunito', sans-serif; }
#fdehcSearchOverlay.open { transform: translateY(0); visibility: visible; }
.fdehc-so-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
.fdehc-so-back { width: 40px; height: 40px; border-radius: 50%; background: none; border: 1.5px solid #e8e8e8; display: grid; place-items: center; cursor: pointer; color: #54595f; flex-shrink: 0; transition: border-color .2s, color .2s; }
.fdehc-so-back:hover { border-color: #4CAF50; color: #4CAF50; }
.fdehc-so-back svg { width: 16px; height: 16px; }
.fdehc-so-input { flex: 1; height: 44px; padding: 0 16px; border: 1.5px solid #e8e8e8; border-radius: 22px; font-family: 'Nunito', sans-serif; font-size: 16px; color: #1a1a1a; background: #f7f8f6; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.fdehc-so-input::placeholder { color: #9ca3af; }
.fdehc-so-input:focus { border-color: #4CAF50; background: #fff; box-shadow: 0 0 0 3px rgba(76,175,80,.12); }
.fdehc-so-results { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; }
.fdehc-so-results .fde-h-search-section { padding: 12px 8px 8px; }
.fdehc-so-results .fde-h-search-section + .fde-h-search-section { border-top: 1px solid #f5f5f5; }
.fdehc-so-results .fde-h-search-section-title { padding: 6px 16px 8px; }
.fdehc-so-results .fde-h-search-item { padding: 10px 16px; }
.fdehc-so-results .fde-h-search-tax-item { padding: 10px 16px; }
.fdehc-so-results .fde-h-search-empty, .fdehc-so-results .fde-h-search-hint { padding: 40px 20px; }

.fdehc-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1.5px solid #e8e8e8; display: grid; place-items: center; cursor: pointer; color: #54595f; padding: 0; flex-shrink: 0; text-decoration: none; transition: border-color .2s, color .2s, transform .12s; }
.fdehc-btn svg { width: 18px; height: 18px; }
.fdehc-btn:hover { border-color: #4CAF50; color: #4CAF50; }
.fdehc-btn:active { transform: scale(.92); }
.fdehc-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: #4CAF50; color: #fff; border-radius: 999px; font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 700; display: none; place-items: center; border: 2px solid #fff; line-height: 1; }
.fdehc-btn.has-items { border-color: #4CAF50; color: #4CAF50; }

#fdehcOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; z-index: 999998; transition: opacity .25s; }
#fdehcOverlay.open { opacity: 1; pointer-events: auto; }
#fdehcDrawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%); background: #fff; z-index: 999999; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.16,1,.3,1); box-shadow: -8px 0 40px rgba(0,0,0,0.14); font-family: 'Nunito', sans-serif; }
#fdehcDrawer.open { transform: translateX(0); }
#fdehcHeader { padding: 18px 20px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
#fdehcHeader h2 { font-size: 17px; font-weight: 700; color: #1a1a1a; margin: 0; }
#fdehcClose { width: 34px; height: 34px; border: 1.5px solid #e8e8e8; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; color: #54595f; transition: background .15s; }
#fdehcClose svg { width: 15px; height: 15px; }
#fdehcClose:hover { background: #f4f5f4; }
#fdehcBody { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
#fdehcBody::-webkit-scrollbar { width: 4px; }
#fdehcBody::-webkit-scrollbar-thumb { background: #e8e8e8; border-radius: 2px; }
.fdehc-loading { text-align: center; color: #9ca3af; font-size: 13px; font-weight: 600; padding: 40px 0; }
.fdehc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 60px 30px; }
.fdehc-empty-icon { color: #ddd; }
.fdehc-empty-icon svg { width: 48px; height: 48px; }
.fdehc-empty h3 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0; }
.fdehc-empty p { font-size: 13px; color: #9ca3af; font-weight: 500; max-width: 240px; margin: 0; }
.fdehc-item { background: #f7f8f6; border: 1px solid #f0f0f0; border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; }
.fdehc-item-img { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: #eee; flex-shrink: 0; }
.fdehc-item-img img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.fdehc-item-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fdehc-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fdehc-item-name { font-size: 13px; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.fdehc-item-remove { background: none; border: none; cursor: pointer; color: #bbb; padding: 2px; flex-shrink: 0; transition: color .15s; }
.fdehc-item-remove svg { width: 14px; height: 14px; display: block; }
.fdehc-item-remove:hover { color: #dc2626; }
.fdehc-item-stepper { display: grid; grid-template-columns: 28px 1fr 28px; height: 30px; width: 96px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; overflow: hidden; }
.fdehc-item-stepper button { background: transparent; border: none; color: #54595f; font-weight: 700; font-size: 14px; font-family: 'Nunito', sans-serif; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.fdehc-item-stepper button:hover:not(:disabled) { background: #f4f5f4; }
.fdehc-item-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.fdehc-qty { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #1a1a1a; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; }
#fdehcFooter { padding: 14px 18px 20px; border-top: 1px solid #f0f0f0; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
#fdehcTotalRow { display: flex; justify-content: space-between; font-size: 13px; color: #54595f; font-weight: 600; padding: 0 2px; }
#fdehcTotalRow strong { color: #1a1a1a; font-size: 15px; font-weight: 800; }
#fdehcCheckout { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; background: #4CAF50; color: #fff; border: none; border-radius: 10px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; width: 100%; transition: background .2s; }
#fdehcCheckout:hover { background: #43A047; }
#fdehcCheckout:disabled { opacity: .7; cursor: wait; }
#fdehcClear { background: none; border: none; color: #9ca3af; font-size: 12px; font-weight: 600; font-family: 'Nunito', sans-serif; cursor: pointer; text-decoration: underline; text-align: center; transition: color .15s; }
#fdehcClear:hover { color: #dc2626; }

#fdehcToast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a2e;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}
#fdehcToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#fdehcToast .fdehc-toast-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #4CAF50;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* z-index-header-22092026 */
/* #fde-header es position:relative con z-index:100, y eso crea un contexto
   de apilamiento: el drawer de adentro tiene z-index 99998 pero compite
   contra el resto de la pagina como si fuera 100. La barra del catalogo
   tambien vale 100 y va despues en el DOM, asi que le ganaba y quedaba
   encima del menu abierto. Subiendo el header, todo lo que contiene
   (menu, buscador, carrito) pasa por arriba de esa barra.
   OJO con el numero: tiene que quedar ENTRE la barra del catalogo (100) y
   el panel de filtros (#fde-foverlay 150 / #fde-fpanel 151). Con 500 el
   header tapaba el panel de filtros en escritorio y tablet. 120 cumple las
   dos condiciones: 100 < 120 < 150. */
#fde-header { z-index: 120; }




/* alineacion-home-23092026 */
/* Una sola medida para todo el sitio. Convivian seis anchos maximos (1140,
   1200, 1280, 1300, 1350 y 1360) y nueve margenes laterales, por eso unas
   secciones terminaban antes que otras.
   1300px no es un valor elegido al azar: es el container_width que ya
   declara el kit de Elementor, asi que las secciones nativas del editor ya
   estaban en esa medida y son las de codigo las que se salian.
   Los cortes son 1024 y 767, los mismos que usa Elementor en este sitio y
   los mismos de la tarjeta de producto. Antes habia ocho cortes distintos
   (1440, 1120, 1024, 980, 767, 600, 540, 480): en tablet unas secciones ya
   habian cambiado de medida y otras no, y se desalineaban. */
:root { --fde-ancho: 1300px; --fde-gutter: 24px; --fde-sec-y: 48px; }
@media (max-width: 1024px) { :root { --fde-gutter: 20px; --fde-sec-y: 36px; } }
@media (max-width: 767px)  { :root { --fde-gutter: 16px; --fde-sec-y: 28px; } }
/* El header estaba en 1360: su contenido terminaba 30px mas afuera que el
   resto de la pagina. Es global, asi que esto alinea todas las paginas. */
.fde-h-top, .fde-h-nav-inner { max-width: var(--fde-ancho); padding-inline: var(--fde-gutter); box-sizing: border-box; }

/* Carrito lateral cerrado (29/09/2026): quedaba "visible" fuera de la
   pantalla y su sombra asomaba como una franja gris en el borde derecho de
   todas las paginas. Cerrado se oculta (tampoco recibe foco con el
   teclado); la visibilidad cambia al final de la animacion de cierre. */
html body #fdehcDrawer:not(.open) {
  visibility: hidden;
  box-shadow: none;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .32s, box-shadow 0s linear .32s;
}
html body #fdehcDrawer.open { visibility: visible; transition-delay: 0s; }


/* Aviso por encima de la vista rapida (29/09/2026): tenian el mismo z-index
   y el modal, al estar despues en la pagina, lo tapaba con su desenfoque. */
html body #fdehcToast { z-index: 1000010; }


/* Menu del celular (29/09/2026) */
/* Alto de la pantalla visible: con 100vh, en Chrome del celular el final del
   panel quedaba detras de la barra de abajo del navegador. */
html body .fde-h-drawer { height: auto; bottom: 0; }
/* Sin el destello celeste del toque; la pagina actual se marca en verde. */
.fde-h-drawer a { -webkit-tap-highlight-color: transparent; }
.fde-h-drawer .fde-h-drawer-menu a[aria-current="page"] {
  background: var(--fde-green-50, #e8f5e9);
  color: var(--fde-green-text, #2e7d32);
}
/* Menu del celular por encima de todo (29/09/2026). El panel vive dentro de
   #fde-header, que tiene z-index 120: eso lo encerraba y cualquier capa de la
   pagina por encima de 120 se dibujaba sobre el menu (por ejemplo, la capa de
   filtros del catalogo, 150). Mientras el panel esta abierto, el encabezado
   sube por encima del resto. */
html body #fde-header:has(.fde-h-drawer.open),
html.fde-carry body #fde-header { z-index: 99997; }

/* Panel del menu (29/09/2026) */
/* Favoritos: enlace comun como el resto (antes era un texto con un boton
   circular a la derecha, que se veia vacio y era la unica forma de entrar).
   Si hay productos guardados, la cantidad aparece a la derecha. */
.fde-h-drawer-menu .fde-h-drawer-count {
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--fde-green, #4caf50);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
}
.fde-h-drawer-menu .fde-h-drawer-count[hidden] { display: none; }
/* Telefono: etiqueta arriba y numero abajo (estaban pegados en una linea:
   "TELEFONO FIJO4362 777"). */
.fde-h-drawer .fde-h-drawer-phone { margin: 12px 20px; padding: 14px 16px; gap: 14px; }
.fde-h-drawer .fde-h-drawer-phone-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fde-h-drawer .fde-h-drawer-phone-number { font-size: 18px; line-height: 1.2; }
.fde-h-drawer .fde-h-drawer-phone { -webkit-tap-highlight-color: transparent; }/* El numero no agranda la fila. */
.fde-h-drawer-menu .fde-h-drawer-count { margin-block: -4px; }


/* Boton de llamada del panel (29/09/2026): icono, etiqueta arriba y numero
   abajo, flecha a la derecha para que se lea como boton. */
html body .fde-h-drawer .fde-h-drawer-call {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 20px;
  padding: 14px 16px;
  min-height: 72px;
  box-sizing: border-box;
  background: var(--fde-green-50, #e8f5e9);
  border: 1px solid #c8e6c9;
  border-radius: 16px;
  color: var(--fde-ink, #1a1a2e);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
html body .fde-h-drawer .fde-h-drawer-call:active { background: #d7eed8; border-color: var(--fde-green, #4caf50); }
html body .fde-h-drawer .fde-h-drawer-call__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fde-green, #4caf50);
  color: #fff;
  display: grid;
  place-items: center;
}
html body .fde-h-drawer .fde-h-drawer-call__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
html body .fde-h-drawer .fde-h-drawer-call__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fde-green-text, #2e7d32);
  line-height: 1.2;
}
html body .fde-h-drawer .fde-h-drawer-call__number {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--fde-ink, #1a1a2e);
}
html body .fde-h-drawer .fde-h-drawer-call__arrow { color: var(--fde-green-text, #2e7d32); display: grid; place-items: center; }

/* bloqueo-scroll-30092026 */
/* Al abrir un panel (carrito, menu, buscador, filtros, vista rapida) la
   pagina bloquea el scroll y en Windows desaparece la barra: el contenido se
   corria a la derecha. header.js compensa ese ancho con padding mientras el
   panel esta abierto (antes se reservaba el lugar siempre con
   scrollbar-gutter, pero esa franja quedaba blanca, sin cubrir por el fondo
   oscuro de la vista rapida).
   Con un panel abierto, el texto de la pagina de atras no se puede
   seleccionar: arrastrando el mouse desde el panel se marcaba lo de atras. */
body:has(#fde-quickview-v2.is-active, #fdehcDrawer.open, #fdeDrawer.open, #fde-fpanel.open) {
  -webkit-user-select: none;
  user-select: none;
}
#fde-quickview-v2 .fde-modal__dialog, #fdehcDrawer, #fdeDrawer, #fde-fpanel {
  -webkit-user-select: text;
  user-select: text;
}

/* lazy-aspect-30092026 */
/* Aviso de Chrome "Lazy-loaded images should have explicit dimensions".
   Las imagenes lazy ya traen width y height, pero Chrome las marca igual si
   ninguna hoja de estilos declara su alto o su proporcion (y varias reglas
   del sitio usan height: auto, que pisa el atributo). Se repite la proporcion
   de los propios atributos como aspect-ratio: se ven igual y el aviso deja de
   salir. Los navegadores que no soportan attr() tipado ignoran la regla. */
img[loading="lazy"][width][height] {
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
}
/* La tira de cuotas usa <picture> con otra foto en tablet y celular: su
   proporcion sale de cada <source>, no de los atributos del <img>. */
@media (max-width: 600px) {
  .promo-cuotas picture img[loading="lazy"][width][height] { aspect-ratio: 1000 / 530; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .promo-cuotas picture img[loading="lazy"][width][height] { aspect-ratio: 1600 / 480; }
}

/* iconos-y-vaciar-30092026 */
/* Iconos del header: el corazon (favoritos) media 40px con trazo oscuro y el
   carrito 44px con trazo gris. Quedan iguales: 44px, mismo borde, sombra,
   tamano de icono y color. Se mantienen los verdes de estado (carrito con
   productos, favoritos activos) y el hover comun de botones.css. */
html body .fde-wl-head__btn,
html body #fdehcBtnDesktop {
  width: 44px;
  height: 44px;
  border: 1.5px solid #e4e6e1;
  background: #fff;
  box-shadow: var(--fde-sh-1, 0 1px 4px rgba(26, 26, 46, .08));
  color: #1a1a2e;
}
html body .fde-wl-head__btn .fde-wl-head__icon,
html body #fdehcBtnDesktop svg { width: 20px; height: 20px; }
html body .fde-h-mobile-btn,
html body #fdehcBtnMobile { border-color: #e4e6e1; }
html body .fde-h-mobile-btn,
html body #fdehcBtnMobile { color: #1a1a2e; }
html body #fdehcBtnDesktop.has-items,
html body #fdehcBtnMobile.has-items,
html body .fde-wl-head.is-active .fde-wl-head__btn { border-color: var(--fde-green, #4caf50); color: var(--fde-green-600, #43a047); }
html body .fde-wl-head__btn:hover,
html body #fdehcBtnDesktop:hover,
html body .fde-h-mobile-btn:hover,
html body #fdehcBtnMobile:hover { border-color: var(--fde-green, #4caf50); color: var(--fde-green-600, #43a047); }

/* Vaciar pedido: confirmacion dentro del pie del carrito. */
#fdehcFooter.is-confirm > :not(.fdehc-confirm) { display: none; }
.fdehc-confirm { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #f3d6d6; border-radius: 14px; background: #fff7f7; font-family: 'Nunito', sans-serif; }
.fdehc-confirm[hidden] { display: none; }
.fdehc-confirm__txt { margin: 0; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.fdehc-confirm__txt strong { font-size: 15px; font-weight: 800; color: #1a1a2e; }
.fdehc-confirm__txt span { font-size: 13px; color: #54595f; }
.fdehc-confirm__acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fdehc-confirm__acc button { min-height: 44px; border-radius: 999px; font: 700 14px/1 'Nunito', sans-serif; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.fdehc-confirm__no { background: #fff; border: 1.5px solid #e4e6e1; color: #1a1a2e; }
.fdehc-confirm__no:hover { border-color: #1a1a2e; }
.fdehc-confirm__si { background: #dc2626; border: 1.5px solid #dc2626; color: #fff; }
.fdehc-confirm__si:hover { background: #b91c1c; border-color: #b91c1c; }
.fdehc-confirm__acc button:focus-visible { outline: 3px solid rgba(76, 175, 80, .45); outline-offset: 2px; }

/* finalizar-y-toast-30092026 */
/* Barra de progreso mientras se prepara el pedido para ir al checkout. */
html.fde-yendo::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--fde-green, #4caf50) 30%, var(--fde-green, #4caf50) 70%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: fde-yendo 1s ease-in-out infinite;
}
@keyframes fde-yendo { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { html.fde-yendo::before { animation: none; background: var(--fde-green, #4caf50); } }
html.fde-yendo, html.fde-yendo body { cursor: progress; }
.fdehc-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff4f4; border: 1px solid #f3d6d6; color: #b91c1c; font: 600 13px/1.4 'Nunito', sans-serif; text-align: center; }

/* Aviso de favoritos: no declaraba tipografia y heredaba la del tema. */
.fde-fav-toast, .fde-fav-toast * { font-family: 'Nunito', system-ui, sans-serif; }

/* aviso-favoritos-30092026 */
/* El aviso iba centrado con left: 50%, y asi el navegador le daba como
   maximo la mitad derecha de la pantalla para acomodar el texto: en el
   celular quedaba en tres renglones. Ahora toma el ancho que necesita (hasta
   el ancho de la pantalla menos 16px por lado) y el texto va en un renglon
   cuando entra. */
html body .fde-fav-toast {
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding: 12px 18px;
  gap: 12px;
  border-radius: 14px;
  line-height: 1.35;
}
html body .fde-fav-toast__text { flex: 1 1 auto; min-width: 0; }
html body .fde-fav-toast__heart, html body .fde-fav-toast__link { flex: 0 0 auto; }
@media (max-width: 767px) {
  html body .fde-fav-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
}

/* banners-por-pantalla-03102026 */
/* Banners con una version por pantalla (<picture class="fde-banner-pic">,
   lo arma FDE_Page_Assets). En cualquier pagina, incluida Promociones, que
   tenia altos fijos por pantalla desde Elementor (180, 350, 400px) y
   recortaba la imagen: alto natural, entero, y en computadora 450px como
   maximo. */
html body .fde-banner-pic { display: block; width: 100%; }
html body .fde-banner-pic img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 450px;
  object-fit: cover;
  /* Elementor deja un object-position propio por widget (Promociones tenia
     0 -130px de cuando la imagen se recortaba a mano): siempre centrado. */
  object-position: center !important;
  border-radius: 20px;
}
@media (max-width: 1024px) {
  html body .fde-banner-pic img { max-height: none !important; }
}
@media (max-width: 767px) {
  html body .fde-banner-pic img { border-radius: 14px; }
}
/* buscar-x-03102026 */
/* X para borrar la busqueda (boton nativo de los campos type="search" en
   Chrome, Edge y Safari). Venia azul del navegador y sin la mano del mouse,
   asi que no parecia clickeable. Ahora sigue la paleta del sitio: circulo
   verde claro con la X en verde oscuro (contraste 8:1, se distingue bien del
   texto escrito) y, al pasar el mouse, circulo verde con la X blanca.
   Vale para todos los buscadores: catalogo, header, buscador del menu en
   celular y pagina 404. Firefox no muestra este boton. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0 0 0 8px;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
  background: #e8f5e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e20' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  transition: background-color .15s ease;
}
input[type="search"]::-webkit-search-cancel-button:hover {
  background-color: #4CAF50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }