/* ==========================================================================
   justbuyit.es · Chrome: cabecera, megamenú, desplegable, hoja móvil, paleta,
   bandeja del comparador y pie. Solo lo que style.css (base.css) no trae:
   capas flotantes, estados de JS y los contenedores que las maquetas pintan
   estáticos. Se fusiona en style.css al publicar.
   ========================================================================== */

main:focus{outline:0}
html.is-locked{overflow:hidden;scrollbar-gutter:stable}
.plate--36{width:36px;height:36px}

/* Cabecera ------------------------------------------------------------------ */
.site-nav__dd{position:relative;display:flex;align-items:center;height:100%}
.site-nav__item:focus-visible{outline-offset:-3px}
/* Hueco reservado para el contador («Comparar 4»): al aparecer tras cargar no desplaza el buscador */
.site-header__compare{min-width:140px}
@media (max-width:1199.98px){
  /* «Cómo puntuamos» vuelve a vivir en «Empresa»: el subrayado pasa al botón */
  .site-nav__item--x[aria-current]~.site-nav__dd>.site-nav__item::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--ink)}
}

/* Megamenú */
.mega{max-height:calc(100vh - var(--header-h) - 8px);overflow-y:auto;overscroll-behavior:contain}
.mega__col-h .kicker:first-child{color:var(--ink)}
.mcat__b{min-width:0}
/* «Nº 1»: en una línea con short_title (≤ 32); si un nombre no cabe, pasa a 2 líneas y nunca se corta */
.mcat__n1{white-space:normal;align-items:baseline}
.mcat__k{flex:none;white-space:nowrap}
.mcat__n1 b{min-width:0;overflow:visible}
.mega__in--nofeat{grid-template-columns:minmax(0,1fr) 216px}
.mega__foot .links .link .ic{width:16px;height:16px}
@media (max-width:1199.98px){
  .mega__in--nofeat{grid-template-columns:minmax(0,1fr) 200px}
}

/* Desplegable «Empresa» */
.dropdown{left:0}
.dropdown a[aria-current] b{text-decoration:underline;text-underline-offset:3px}
.dropdown .dropdown__mail a{display:inline;padding:0;border-radius:0;color:inherit}
.dropdown .dropdown__mail a:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.dropdown__mail .ic{margin-top:0}

/* Hoja móvil: capa a pantalla completa ------------------------------------ */
.msheet{position:fixed;inset:0;z-index:var(--z-overlay);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.msheet__body{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.msheet__search{width:100%;background:#fff;cursor:text;text-align:left;font:inherit;font-size:var(--fs-ui)}
.msheet__search .ic{color:var(--ink-2)}
.msheet__search:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.msheet__gh .msheet__t{font:400 24px/1 var(--serif)}
.msheet__gh .link{font-size:13px}
.msheet__gh--sm{border-bottom-width:1px;border-color:var(--rule-2)}
.msheet__gh--sm .kicker{color:var(--ink)}
.msheet__links{margin-top:6px}
.msheet__links .count{margin-left:auto;margin-right:6px}
.msheet__links .count:not([hidden])+.ic{margin-left:0}
.msheet__foot p a{text-decoration:underline;text-underline-offset:2px}
@media (min-width:1024px){.msheet{display:none!important}}

/* Paleta de búsqueda: capa con fondo, centrada arriba; a pantalla completa en móvil */
.palette-layer{position:fixed;inset:0;z-index:var(--z-modal);display:flex;justify-content:center;align-items:flex-start;padding:min(12vh,120px) 16px 16px}
.palette-layer__bg{position:absolute;inset:0;background:rgba(18,21,31,.42)}
.palette-layer .palette{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - min(12vh,120px) - 32px)}
.palette__in{margin:0;flex:none}
.palette__in>.ic{color:var(--muted)}
.palette__in input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.palette__scope{position:relative;cursor:pointer}
.palette__scope:focus-within{outline:2px solid var(--blue);outline-offset:1px}
.palette__scope select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:inherit;padding:0 2px 0 0;cursor:pointer;outline:0;max-width:120px;field-sizing:content}
.palette__x{display:none;flex:none}
.palette__res{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.palette__res:empty{display:none}
.palette__row{color:var(--ink)}
.palette__row>span:nth-child(2){min-width:0}
.palette__row>.ic{color:var(--muted)}
.palette__row .thumb img{display:block}
.palette__row .plate .ic{width:20px;height:20px;color:var(--ink-2)}
.palette__hint{padding:14px 16px 10px;font-size:var(--fs-sm);color:var(--muted)}
.palette__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 16px}
.palette__chips .chip{height:30px;font-size:12.5px}
.palette__keys{flex:none;align-items:center}
.palette__keys .link{font-size:12.5px}
@media (max-width:767.98px){
  .palette-layer{padding:0}
  .palette-layer__bg{display:none}
  .palette-layer .palette{width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none}
  .palette__in{padding:0 4px 0 14px;gap:8px}
  .palette__in input{font-size:16px}
  .palette__scope{padding:0 8px}
  .palette__scope select{max-width:92px}
  .palette__x{display:inline-grid}
  .palette__keys{justify-content:flex-end;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* Bandeja del comparador ---------------------------------------------------- */
.tray__t{min-width:0}
.tray__t small:empty{display:none}
.tray__noimg{display:grid;place-items:center;width:100%;height:100%;font:600 13px/1 var(--sans);color:var(--ink-2)}
.tray__ask{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0}
.tray__ask p{font-size:13px;line-height:1.35;color:var(--on-ink-2)}
.tray__ask p b{color:#fff;font-weight:600}
.tray__keep{position:relative;padding:0;border:0;background:none;font-size:13px;color:var(--on-ink-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap}
.tray__keep::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.tray.is-asking .tray__slots,.tray.is-asking>.tray__clear,.tray.is-asking>[data-tray-go]{display:none}
.tray [data-tray-go] .ic{width:16px;height:16px}
body.has-buybar .tray--fixed{display:none}   /* en la ficha, la barra de compra tiene prioridad */
body.has-tray.has-buybar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
@media (max-width:767.98px){
  .tray__ask{gap:8px}
  .tray__ask p{font-size:12px}
  .tray.is-asking .tray__t{display:none}
}

/* Pie ------------------------------------------------------------------------ */
.nl__hp{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.nl__status{grid-column:2;margin-top:-18px;font-size:var(--fs-sm);color:#fff}
.nl__status.is-error{color:#FFB4B4}
.nl__status:empty{display:none}
.nl form.is-sending button{opacity:.6;pointer-events:none}
.ft__col details>summary:focus-visible{outline-offset:2px}
.ft__col a:focus-visible,.ft__cookies:focus-visible{outline-offset:1px}
.ft__social{display:flex;gap:6px;margin-top:14px}
.ft__social a{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.22);color:#fff}
.ft__social a:hover{background:rgba(255,255,255,.06)}
.ft__social .ic{width:18px;height:18px}
@media (max-width:767.98px){
  .nl__status{grid-column:1;margin-top:0}
  .ft__social a{width:44px;height:44px}
}

/* Boletín del pie: h2 con el aspecto del antiguo h3 */
.nl .nl__t{font:600 16px/1.2 var(--sans);color:#fff;display:flex;align-items:center;gap:8px;margin:0}
.nl .nl__t .ic{color:var(--blue-on-ink)}
/* Pie en tableta: marca arriba y las 4 columnas de enlaces en una fila */
@media (min-width:768px) and (max-width:1023.98px){
  .ft__main{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ft__brand{grid-column:1/-1}
  .ft__col ul.two{grid-template-columns:1fr}
}