/* ÓPTICA FIJA — Navbar global (estilo MediaMarkt): 2 filas, fondo blanco sólido.
   Fila 1: logo (izq) · buscador inline con resultados rápidos (centro) · favoritos + carrito (der).
   Fila 2: menú (Tienda con mega, Plan Renove, Promociones, Reparaciones, Servicios, Comunidad). */
.ofnav2{--of-red:#E02B20;--of-red-dark:#B81F17;--of-ink:#1A1A1A;--of-muted:#6B6B6B;--of-border:#E6E4E1;--of-surface:#F7F6F5;--of-dark:#16181D;
  position:fixed;top:0;left:0;right:0;z-index:9000;background:#fff;border-bottom:0;box-shadow:0 2px 14px rgba(0,0,0,.05);
  font-family:'Albert Sans',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.ofnav2 *{box-sizing:border-box}
/* Si hay barra de admin de WP (usuario logueado), bajar la navbar fija para que no quede hueco */
.admin-bar .ofnav2{top:32px}
@media screen and (max-width:782px){.admin-bar .ofnav2{top:46px}}

/* ---------- LOGO a la izquierda ocupando las DOS filas (buscador + menú) ---------- */
.ofnav2-main{display:flex;align-items:center;gap:clamp(16px,2vw,30px);max-width:1280px;margin:0 auto;padding:8px clamp(16px,2.5vw,28px) 0}
.ofnav2-rows{flex:1 1 auto;min-width:0}
.ofnav2-logo{flex:0 0 auto;display:block;line-height:0}
.ofnav2-logo img{height:104px;width:auto;display:block} /* compuesto 2.16:1 a la altura de las 2 filas */
.ofnav2-logo .ofnav2-logo-d{display:none}   /* sobre blanco siempre el logo a color */

/* ---------- FILA 1 ---------- */
.ofnav2-top{display:flex;align-items:center;gap:clamp(12px,1.5vw,20px);padding:4px 0 6px}

/* buscador inline (centro) */
.ofnav2-search2{position:relative;flex:1 1 auto;max-width:none;margin:0;display:flex;align-items:center;gap:10px;
  background:var(--of-surface);border:1.5px solid var(--of-border);border-radius:999px;padding:5px 5px 5px 16px;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.ofnav2-search2:focus-within{border-color:var(--of-red);background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.ofnav2-search2>.ofnav2-s-ic{width:20px;height:20px;color:var(--of-muted);flex:0 0 auto}
.ofnav2-search2 input[type=search]{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:inherit;font-size:.98rem;font-weight:500;color:var(--of-ink)}
.ofnav2-search2 input[type=search]::placeholder{color:#9a9a9a}
.ofnav2-search2 input[type=search]::-webkit-search-cancel-button{display:none}
.ofnav2-search2-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:0;background:var(--of-dark);color:#fff;border-radius:999px;
  padding:10px 18px;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:background .2s ease}
.ofnav2-search2-btn svg{width:16px;height:16px}
.ofnav2-search2-btn:hover{background:var(--of-red)}
/* dropdown de resultados rápidos */
.ofnav2-sres{position:absolute;top:calc(100% + 9px);left:0;right:0;background:#fff;border:1px solid var(--of-border);border-radius:16px;
  box-shadow:0 24px 54px rgba(0,0,0,.18);overflow:hidden auto;max-height:min(72vh,560px);overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:50}
.ofnav2-search2.is-open .ofnav2-sres{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.ofnav2-sres:empty{display:none}

/* acciones (der): favoritos + carrito (+ hamburguesa en móvil) */
.ofnav2-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.ofnav2-fav,.ofnav2-account{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border:1px solid var(--of-border);border-radius:999px;background:#fff;color:var(--of-ink);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.ofnav2-fav svg,.ofnav2-account svg{width:19px;height:19px}
.ofnav2-fav:hover,.ofnav2-fav:focus,.ofnav2-account:hover,.ofnav2-account:focus{color:var(--of-red);border-color:var(--of-red)}
.ofnav2-fav-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--of-red);color:#fff;font-size:.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fff}
.ofnav2-fav-count[hidden]{display:none}
.ofnav2-cta{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--of-dark);color:#fff !important;border-radius:999px;
  padding:12px 20px;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .22s ease}
.ofnav2-cta svg{width:16px;height:16px}
.ofnav2-cta:hover,.ofnav2-cta:focus{background:var(--of-red);color:#fff !important}
.ofnav2-cart-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--of-red);color:#fff !important;font-size:.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fff}
.ofnav2-cart-count[hidden]{display:none}
/* botón de búsqueda SOLO móvil (abre el popup); en escritorio se usa el buscador inline */
.ofnav2-msearch{display:none;width:44px;height:44px;border:1px solid var(--of-border);background:#fff;cursor:pointer;border-radius:999px;align-items:center;justify-content:center;color:var(--of-ink);transition:color .2s ease,border-color .2s ease}
.ofnav2-msearch svg{width:20px;height:20px}
.ofnav2-msearch:hover,.ofnav2-msearch:focus{color:var(--of-red);border-color:var(--of-red)}
.ofnav2-burger{display:none;width:44px;height:44px;border:1px solid var(--of-border);background:#fff;cursor:pointer;border-radius:999px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.ofnav2-burger span{display:block;width:20px;height:2px;background:var(--of-ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.ofnav2.is-open .ofnav2-burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.ofnav2.is-open .ofnav2-burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
/* anular el estilo de botón rosa/magenta del tema (Hello/Divi) en :hover/:focus/:active */
.ofnav2 button{-webkit-tap-highlight-color:transparent}
.ofnav2-burger,.ofnav2-burger:hover,.ofnav2-burger:focus,.ofnav2-burger:active,.ofnav2-burger:focus-visible,
.ofnav2-msearch,.ofnav2-msearch:hover,.ofnav2-msearch:focus,.ofnav2-msearch:active,.ofnav2-msearch:focus-visible{background:#fff !important;box-shadow:none !important;outline:none !important}
.ofnav2-burger:hover,.ofnav2-burger:focus-visible,.ofnav2-msearch:hover,.ofnav2-msearch:focus-visible{border-color:var(--of-red) !important}
.ofnav2-burger span{background:var(--of-ink) !important}

/* ---------- FILA 2: menú ---------- */
.ofnav2-bottom{display:flex;align-items:center;padding:0 0 8px}
.ofnav2-menu{display:flex;align-items:center;width:100%}
.ofnav2-menu .menu{display:flex;align-items:center;justify-content:space-between;width:100%;list-style:none;margin:0;padding:6px 0 0}
.ofnav2 .m-item{position:relative}
.ofnav2 .m-link{display:inline-flex;align-items:center;gap:6px;padding:10px 15px;font-size:.78rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#444;border:0;background:none;border-radius:999px;
  white-space:nowrap;cursor:pointer;font-family:inherit;transition:color .2s ease,background .2s ease}
.ofnav2 .m-link:hover,.ofnav2 .m-item.open .m-link{color:var(--of-red);background:#FBF3F2}
.ofnav2 .m-link.active{color:var(--of-red)}
/* entrada Oportunidades destacada: fondo rojo + letras blancas; hover = fondo blanco, borde y letras rojas */
.ofnav2 .m-link--deal{background:var(--of-red);color:#fff;border:1.5px solid var(--of-red)}
.ofnav2 .m-link--deal:hover,.ofnav2 .m-link--deal:focus{background:#fff;color:var(--of-red);border-color:var(--of-red)}
.ofnav2 .m-cart-mobile,.ofnav2 .m-fav-mobile,.ofnav2 .m-account-mobile{display:none}
.ofnav2 .m-link .chev{width:11px;height:11px;transition:transform .2s ease}
.ofnav2 .m-item.open .m-link .chev{transform:rotate(180deg)}

/* dropdowns Servicios / Comunidad */
.ofnav2 .submenu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:222px;background:#fff;border:1px solid var(--of-border);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.16);
  padding:8px;list-style:none;margin:0;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;z-index:5}
.ofnav2 .m-item.has-sub:hover .submenu,.ofnav2 .m-item.has-sub.is-hovered .submenu,.ofnav2 .m-item.open .submenu{opacity:1;visibility:visible;transform:translateX(-50%);transition:opacity .2s ease,transform .2s ease}
.ofnav2 .submenu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:12px}
.ofnav2 .submenu a{display:block;padding:11px 14px;border-radius:10px;font-size:.92rem;font-weight:600;color:var(--of-ink);text-decoration:none;transition:background .18s ease,color .18s ease;text-transform:none;letter-spacing:0}
.ofnav2 .submenu a:hover{background:#FBF3F2;color:var(--of-red)}

/* ---- responsive (<1100px): una fila = logo + (botón buscar + hamburguesa); buscador = POPUP ---- */
@media(max-width:1100px){
  .ofnav2-cta,.ofnav2-fav,.ofnav2-account{display:none}
  .ofnav2-search2{display:none}            /* buscador inline OCULTO en móvil */
  .ofnav2-msearch{display:inline-flex}      /* botón de búsqueda, junto al sándwich */
  .ofnav2-burger{display:flex}
  .ofnav2-main{padding:0 clamp(14px,4vw,20px);gap:12px}
  .ofnav2-logo img{height:64px}
  .ofnav2-top{gap:10px;padding:11px 0}
  .ofnav2-actions{margin-left:auto}
  /* menú: oculto por defecto; al abrir la hamburguesa se despliega como panel bajo la barra */
  .ofnav2-bottom{display:none}
  .ofnav2.is-open .ofnav2-bottom{display:block;position:absolute;top:calc(100% + 6px);right:clamp(14px,4vw,20px);
    max-width:min(360px,calc(100vw - 28px));margin:0;padding:10px;background:#fff;border:1px solid var(--of-border);border-radius:18px;
    box-shadow:0 18px 44px rgba(0,0,0,.18);min-width:264px;z-index:9100;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
  .ofnav2.is-open .ofnav2-menu{width:100%}
  .ofnav2.is-open .menu{flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;gap:2px;padding:0}
  .ofnav2.is-open .menu .m-link{justify-content:space-between;width:100%;font-size:.82rem}
  .ofnav2.is-open .menu .m-cart-mobile,.ofnav2.is-open .menu .m-fav-mobile,.ofnav2.is-open .menu .m-account-mobile{display:flex}
  /* ACORDEÓN inline (NO flotante): !important para ganar al hover/is-hovered de escritorio */
  .ofnav2.is-open .submenu{position:static !important;transform:none !important;opacity:1 !important;visibility:visible !important;
    box-shadow:none;border:0;min-width:0;left:auto;right:auto;padding:2px 0 8px 14px;display:none}
  .ofnav2.is-open .m-item.open .submenu{display:block}
}
@media(max-width:640px){
  .ofnav2-logo img{height:52px}
  .ofnav2-search2-btn .ofnav2-s-btx{display:none}
  .ofnav2-search2-btn{padding:10px 12px}
  .ofnav2-search2 input[type=search]{font-size:.92rem}
}

/* ============================================================
   MEGA-MENÚ de TIENDA: panel con categorías + foto
   ============================================================ */
.ofnav2 .m-item.has-mega{position:relative}
.ofnav2 .ofnav2-mega{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(680px, calc(100vw - 28px)); max-width:calc(100vw - 28px);
  background:#fff; border:1px solid var(--of-border); border-radius:24px;
  box-shadow:0 30px 70px rgba(0,0,0,.22); padding:12px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 8px; align-content:start;
  max-height:calc(100vh - 150px); overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; z-index:9100;
}
.ofnav2 .has-mega:hover .ofnav2-mega,
.ofnav2 .has-mega.is-hovered .ofnav2-mega,
.ofnav2 .has-mega.open .ofnav2-mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%); transition:opacity .2s ease, transform .2s ease; }
.ofnav2 .ofnav2-mega::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:14px}
.ofnav2-mega::-webkit-scrollbar{width:8px}
.ofnav2-mega::-webkit-scrollbar-thumb{background:var(--of-border);border-radius:8px}
.ofnav2-mega::-webkit-scrollbar-thumb:hover{background:#cfccc8}
.ofnav2 .ofnav2-mega-row{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:14px;text-decoration:none;transition:background .16s ease}
.ofnav2 .ofnav2-mega-row:hover{background:#FBF3F2}
.ofnav2-mega-thumb{position:relative;width:54px;height:54px;flex-shrink:0;border-radius:13px;overflow:hidden;background:var(--of-surface);border:1px solid var(--of-border);display:flex;align-items:center;justify-content:center}
.ofnav2-mega-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ofnav2-mega-ic{width:28px;height:28px;color:var(--of-red);opacity:.65}
.ofnav2-mega-thumb--deal{background:rgba(224,43,32,.08);border-color:rgba(224,43,32,.22)}
.ofnav2-mega-thumb--deal .ofnav2-mega-ic{width:32px;height:32px;opacity:1}
.ofnav2-mega-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.ofnav2-mega-eyebrow{font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#9a9a9a;line-height:1}
.ofnav2-mega-name{display:flex;align-items:center;gap:8px;font-size:1.02rem;font-weight:700;color:var(--of-ink);line-height:1.2;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;transition:color .16s ease}
.ofnav2 .ofnav2-mega-row:hover .ofnav2-mega-name{color:var(--of-red)}
.ofnav2-mega-badge{background:var(--of-red);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;line-height:1.2;flex-shrink:0}
.ofnav2 .ofnav2-mega-foot{grid-column:1 / -1;position:sticky;bottom:-12px;margin:6px -12px -12px;padding:15px 24px;display:flex;align-items:center;gap:10px;background:#fff;border-top:1px solid var(--of-border);border-radius:0 0 24px 24px;font-weight:700;font-size:1.02rem;color:var(--of-ink);text-decoration:none;transition:color .18s ease;box-shadow:0 -10px 14px -10px rgba(0,0,0,.12)}
.ofnav2-mega-foot svg{width:16px;height:16px;color:var(--of-red);transition:transform .2s ease}
.ofnav2 .ofnav2-mega-foot:hover{color:var(--of-red)}
.ofnav2 .ofnav2-mega-foot:hover svg{transform:translateX(4px)}
@media(max-width:1100px){
  .ofnav2.is-open .ofnav2-mega{position:static !important;transform:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
    box-shadow:none;border:0;border-radius:0;max-height:none;width:auto;left:auto;right:auto;grid-template-columns:1fr;gap:0;padding:2px 0 6px;display:none}
  .ofnav2.is-open .has-mega.open .ofnav2-mega{display:grid}
  .ofnav2.is-open .ofnav2-mega-row{padding:10px 6px}
  .ofnav2.is-open .ofnav2-mega-foot{position:static;margin:6px 6px 2px;box-shadow:none;border-radius:0}
}

/* ============================================================
   Resultados de búsqueda (filas del dropdown)
   ============================================================ */
.ofnav2-sr-row{display:flex;align-items:center;gap:14px;padding:11px 16px;text-decoration:none;transition:background .15s ease}
.ofnav2-sr-row:hover{background:#FBF3F2}
.ofnav2-sr-thumb{width:48px;height:48px;flex:0 0 auto;border-radius:11px;background:var(--of-surface);border:1px solid var(--of-border);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ofnav2-sr-thumb img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.ofnav2-sr-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ofnav2-sr-name{font-size:.95rem;font-weight:600;color:var(--of-ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ofnav2-sr-price{font-size:.88rem;font-weight:800;color:var(--of-red)}
.ofnav2-sr-loading,.ofnav2-sr-empty{padding:22px 16px;color:var(--of-muted);font-size:.95rem;text-align:center}
.ofnav2-sr-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;border-top:1px solid var(--of-border);font-weight:700;font-size:.95rem;color:var(--of-ink);text-decoration:none;transition:color .18s ease}
.ofnav2-sr-all svg{width:16px;height:16px;color:var(--of-red);transition:transform .2s ease}
.ofnav2-sr-all:hover{color:var(--of-red)}
.ofnav2-sr-all:hover svg{transform:translateX(4px)}

/* ============================================================
   Buscador móvil: POPUP overlay (fondo difuminado) que abre el botón .ofnav2-msearch
   ============================================================ */
.ofnav2-searchov{position:fixed;inset:0;z-index:9600;display:flex;align-items:flex-start;justify-content:center;padding:12vh 18px 24px;opacity:0;visibility:hidden;transition:opacity .25s ease, visibility 0s linear .25s}
.ofnav2-searchov.is-open{opacity:1;visibility:visible;transition:opacity .25s ease}
.ofnav2-searchov-bg{position:absolute;inset:0;background:rgba(16,18,21,.5);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);cursor:pointer}
.ofnav2-searchbox{position:relative;width:100%;max-width:560px;background:#fff;border-radius:20px;box-shadow:0 36px 80px rgba(0,0,0,.32);overflow:hidden;transform:translateY(-14px) scale(.99);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.ofnav2-searchov.is-open .ofnav2-searchbox{transform:none}
.ofnav2-searchform{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--of-border)}
.ofnav2-searchform>svg{width:22px;height:22px;color:var(--of-red);flex:0 0 auto}
.ofnav2-searchform input[type=search]{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:inherit;font-size:1.1rem;font-weight:500;color:var(--of-ink)}
.ofnav2-searchform input[type=search]::-webkit-search-cancel-button{display:none}
.ofnav2-search-x{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;background:var(--of-surface);color:var(--of-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease,color .18s ease}
.ofnav2-search-x svg{width:22px;height:22px}
.ofnav2-search-x:hover{background:var(--of-red);color:#fff}
.ofnav2-searchov .ofnav2-sres-pop{max-height:min(58vh,460px);overflow-y:auto;overscroll-behavior:contain}
html.of-noscroll{overflow:hidden}

/* ============================================================
   TERCERA FILA: banda de ventajas (carrusel / marquee continuo)
   ============================================================ */
.ofnav2-strip{position:relative;overflow:hidden;background:var(--of-dark)}
.ofnav2-strip-track{display:flex;width:max-content;will-change:transform;animation:ofstrip 42s linear infinite}
.ofnav2-strip-group{display:flex;align-items:center;flex:0 0 auto}
.ofnav2-strip-item{display:inline-flex;align-items:center;gap:9px;padding:8px 2px;color:rgba(255,255,255,.9);
  font-size:.79rem;font-weight:600;letter-spacing:.02em;text-transform:none;text-decoration:none;white-space:nowrap;transition:color .18s ease}
a.ofnav2-strip-item:hover,a.ofnav2-strip-item:focus{color:#fff}
a.ofnav2-strip-item:hover .ofnav2-strip-ic,a.ofnav2-strip-item:focus .ofnav2-strip-ic{color:#fff}
.ofnav2-strip-ic{width:16px;height:16px;color:var(--of-red);flex:0 0 auto}
.ofnav2-strip-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.28);margin:0 44px;flex:0 0 auto}
.ofnav2-strip::before,.ofnav2-strip::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.ofnav2-strip::before{left:0;background:linear-gradient(90deg,var(--of-dark),rgba(22,24,29,0))}
.ofnav2-strip::after{right:0;background:linear-gradient(270deg,var(--of-dark),rgba(22,24,29,0))}
@keyframes ofstrip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){
  .ofnav2-strip-item{font-size:.74rem;gap:7px}
  .ofnav2-strip-ic{width:15px;height:15px}
  .ofnav2-strip-dot{margin:0 26px}
  .ofnav2-strip::before,.ofnav2-strip::after{width:34px}
}
@media(prefers-reduced-motion:reduce){.ofnav2-strip-track{animation:none}}