@charset "utf-8";

/* ==========================================================
   CAPCALERA INSTOP 2026 - V052
   Versio independent. No s'ha de fusionar amb el CSS general.
   Estetica mes plana i tecnica, inspirada en SCCS.

   Canvis del 052 respecte del 051:
   1. ESCRIPTORI. #barra_cercador_66 tenia padding 50px a dalt i 11px a baix.
      La barra vermella es fixed i tapa els primers 32px, o sigui que en
      quedaven 18 de visibles a dalt contra 11 a baix, i el logo quedava
      descentrat. Ara son 43 = 32 + 11, i el gris de dalt i el de baix
      mesuren igual. A mobil, el mateix: 42 = 32 + 10.
   2. MOBIL, BOTO DEL MENU. Estava clavat amb top:-91px, un numero mesurat
      a ull des de dalt que es desquadra cada cop que canvia l'alcada del
      logo o del cercador. Ara va ancorat a BAIX (bottom:calc(100% + 12px)),
      que nomes depen dels 10px d'encoixinat inferior d'aquest mateix
      fitxer: quedi com quedi la capcalera, el boto sempre cau centrat
      sobre el camp de cerca.
   3. MOBIL, CERCADOR. Com que el boto viu al marge esquerre, el camp de
      cerca ara s'arrambla a la dreta i li deixa 46px lliures. Abans anava
      centrat i el boto se li posava a sobre.
   4. MOBIL, BARRA DE DALT. Les barretes separadores es pintaven amb un
      ::after a tots els elements menys l'ultim; com que a mobil se
      n'amaguen uns quants amb display:none, l'ultim VISIBLE tampoc no era
      l'ultim fill i li quedava una barreta penjant just abans del buit que
      empeny SHOP cap a la dreta. A mobil ara no se'n pinta cap.
   ========================================================== */

:root{
  --cap-red:#b93425;
  --cap-red-dark:#8f281d;
  --cap-text:#404040;
  --cap-muted:#6b6b6b;
  --cap-line:#d7d7d7;
  --cap-soft:#f3f3f3;
  --cap-white:#fff;
  --cap-font:"Open Sans",Arial,Helvetica,sans-serif;
  --logo-lateral-max:370px;
}

/* Reset limitat a la capcalera: no altera la resta del document */
#barra_superior_66,
#barra_superior_66 *,
#barra_cercador_66,
#barra_cercador_66 *,
#barra_menu,
#barra_menu *,
.idioma-float,
.idioma-float *{
  box-sizing:border-box;
}

#barra_superior_66 a,
#barra_cercador_66 a,
#barra_menu a{
  text-decoration:none;
}

/* ==========================================================
   IDIOMA
   ========================================================== */
.idioma-float{
  position:fixed;
  top:62px;
  right:12px;
  z-index:1500;
  font-family:var(--cap-font);
}

#selector-idioma{
  min-height:38px;
  padding:8px 34px 8px 13px;
  border:1px solid var(--cap-red);
  border-radius:2px;
  background-color:var(--cap-red);
  color:#fff;
  font-family:var(--cap-font);
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  appearance:none;
  box-shadow:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpolygon points='0,0 10,0 5,6' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:10px 6px;
}

#selector-idioma:hover,
#selector-idioma:focus{
  background-color:#fff;
  color:var(--cap-red);
  border-color:var(--cap-red);
  outline:none;
}

/* ==========================================================
   BARRA SUPERIOR
   ========================================================== */
#barra_superior_66{
  position:fixed;
  top:0;
  left:0;
  z-index:1200;
  width:100%;
  min-height:32px;
  background:var(--cap-red);
  color:#fff;
  overflow:hidden;
}

.contingut_barra_66{
  width:100%;
  max-width:1046px;
  min-height:32px;
  margin:0 auto;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  font-family:var(--cap-font);
  font-size:12px;
  line-height:1.2;
}

.tops66{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  min-width:0;
}

.tops66 .topa66{
  position:relative;
  display:flex;
  align-items:stretch;
  background:transparent;
}

.tops66 .topa66::after{
  content:"";
  position:absolute;
  top:8px;
  right:0;
  width:1px;
  height:14px;
  background:rgba(255,255,255,.55);
}

.tops66 .topa66:last-child::after{display:none;}

.tops66 a{
  display:flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  color:#fff;
  background:transparent;
  font-family:var(--cap-font);
  font-size:13px;
  line-height:1;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:background-color .18s ease;
}

.tops66 a:hover,
.tops66 a:focus,
.tops66 a:active{
  background:var(--cap-red-dark);
  color:#fff;
  outline:none;
}

/* SHOP SUPERIOR */
.link-shop-carro{
  position:relative;
  top:0;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 36px 0 12px !important;
  vertical-align:top;
}

.link-shop-carro .txt{
  font-size:13px;
  line-height:1;
  font-weight:700;
}

.link-shop-carro .cart-count{
  position:absolute;
  top:5px;
  right:6px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  background:#fff;
  color:var(--cap-red);
  font-family:var(--cap-font);
  font-size:11px;
  line-height:17px;
  font-weight:700;
  text-align:center;
  box-shadow:none;
}

/* ==========================================================
   ZONA LOGO I CERCADOR
   ========================================================== */
#barra_cercador_66{
  width:100%;
  /* 43 = 32 de la barra vermella fixa + 11, els mateixos 11 que a baix */
  padding:43px 0 11px !important;
  background:#ededed;
  border-bottom:1px solid #dedede;
}

#cercador66{
  width:100%;
  max-width:1046px;
  min-height:74px;
  margin:0 auto;
  padding:0 10px;
  display:grid;
  grid-template-columns:minmax(210px,250px) minmax(300px,380px) minmax(300px,1fr);
  align-items:center;
  gap:24px;
  color:var(--cap-muted);
  font-family:var(--cap-font);
  font-size:13px;
  line-height:1.4;
}

#cercador66 .modul11-66{justify-self:center;}
#cercador66 a img,
#cercador66 > img{max-width:100%;height:auto;}

.modul4-66{
  position:relative;
  top:0;
  max-width:100%;
  height:auto;
}

.modul1-66{
  width:100%;
  max-width:375px;
  margin:0 auto;
}

.modul11-66{
  position:relative;
  top:0;
  left:0;
  width:100%;
  max-width:380px;
  margin:0 auto;
  justify-self:center;
}

.modul1-66 input:not([type="image"]),
.modul11-66 input:not([type="image"]):not(#lupa66),
.textcerca66{
  width:100% !important;
  height:42px !important;
  margin:0;
  padding:0 46px 0 13px;
  border:1px solid #a9a9a9;
  border-radius:0;
  background:#fff;
  color:var(--cap-text);
  font-family:var(--cap-font) !important;
  font-size:17px !important;
  line-height:42px !important;
  font-weight:400;
  letter-spacing:0;
  outline:none;
  box-shadow:none;
}

.textcerca66{
  position:static;
}

.textcerca66::placeholder{
  color:#777;
  opacity:1;
}

.textcerca66:focus{
  border-color:var(--cap-red);
  box-shadow:0 0 0 1px var(--cap-red);
}

/* La lupa pot arribar com a imatge directa o dins de #link-lupa66. */
#link-lupa66{
  position:absolute;
  top:0;
  right:0;
  z-index:20;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:46px;
  height:42px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}

#lupa66{
  position:absolute !important;
  top:50% !important;
  right:12px !important;
  left:auto !important;
  z-index:20 !important;
  display:block !important;
  width:24px !important;
  height:24px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:translateY(-50%) !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  object-fit:contain;
  cursor:pointer;
}

#link-lupa66 #lupa66{
  position:static !important;
  transform:none !important;
}

#seminuevos{
  position:static;
  float:none;
  display:block;
  width:100%;
  max-width:var(--logo-lateral-max);
  height:auto;
}

/* ==========================================================
   MENU PRINCIPAL
   ========================================================== */
.menu-container33{
  position:relative;
  margin:0;
  padding:0;
  background:#fff;
}

#menu-toggle{display:none;}
.menu-icon{display:none;}

nav.menu{
  position:relative;
  z-index:1000;
  width:100%;
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid var(--cap-line);
  background:#fff;
  font-family:var(--cap-font);
}

nav.menu ul{
  margin:0;
  padding:0;
  list-style:none;
}

nav.menu > ul{
  position:relative;
  display:flex;
  justify-content:center;
  width:100%;
  overflow:visible;
}

nav.menu > ul > li{position:relative;}

nav.menu > ul > li > a{
  position:relative;
  display:block;
  padding:10px 13px;
  color:#4a4a4a;
  font-family:var(--cap-font);
  font-size:13px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:0;
  transition:color .18s ease,background-color .18s ease;
}

nav.menu > ul > li:not(:last-child) > a::after{
  content:"";
  position:absolute;
  top:29%;
  right:0;
  width:1px;
  height:42%;
  background:#dedede;
}

nav.menu > ul > li > a:hover,
nav.menu > ul > li > a:focus{
  background:var(--cap-red);
  color:#fff;
  outline:none;
}

/* Submenus */
nav.menu li ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:1000;
  min-width:290px;
  border:1px solid #cfcfcf;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  flex-direction:column;
}

nav.menu li:hover > ul{display:flex;}
nav.menu li ul li{position:relative;}

nav.menu li ul li a{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:8px 15px;
  border-bottom:1px solid #e2e2e2;
  color:#4d4d4d;
  font-family:var(--cap-font);
  font-size:14px;
  line-height:1.25;
  font-weight:400;
  transition:background-color .18s ease,color .18s ease;
}

nav.menu li ul li a:hover{
  background:#f2f2f2;
  color:var(--cap-red);
}

nav.menu li ul li:first-child > a{
  background:#ececec;
  color:#333;
  font-weight:600;
}

nav.menu li ul li ul{
  display:none;
  position:absolute;
  top:0;
  left:100%;
  min-width:260px;
  border:1px solid #d7d7d7;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

nav.menu li ul li:hover > ul{
  display:flex;
  flex-direction:column;
}

/* Mega menu dreta */
nav.menu li.mega-right > ul{
  right:20px;
  left:auto;
  width:60vw;
  max-width:800px;
  min-width:400px;
  padding:10px;
  flex-flow:row wrap;
}

nav.menu li.mega-right > ul > li{
  width:25%;
}

/* Mega menu drones */
nav.menu li.mega-drones{position:static;}

nav.menu li.mega-drones > ul.mega-panel{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  z-index:1300;
  width:920px;
  max-width:calc(100vw - 24px);
  margin:0 !important;
  padding:0 !important;
  transform:translateX(-50%);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;
  overflow:hidden;
  border:1px solid #cfcfcf;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}

nav.menu li.mega-drones:hover > ul.mega-panel,
nav.menu li.mega-drones > ul.mega-panel:hover{display:grid;}

nav.menu li.mega-drones > ul.mega-panel > li.mega-col{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

nav.menu li.mega-drones > ul.mega-panel > li.mega-col + li.mega-col{
  border-left:1px solid #ddd;
}

nav.menu li.mega-drones ul.mega-list{
  display:flex !important;
  position:static !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  flex-direction:column !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

nav.menu li.mega-drones ul.mega-list > li{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

nav.menu li.mega-drones ul.mega-list > li > a{
  width:100% !important;
  margin:0 !important;
  border-bottom:1px solid #ddd;
}

.menu-img{
  flex:0 0 42px;
  width:42px;
  height:42px;
  margin:0;
  object-fit:contain;
}


/* ==========================================================
   V050 - CERCADOR MES COMPACTE I LOGOS MES VISIBLES
   Redueix el camp central i reserva mes amplada al bloc de marques.
   ========================================================== */
@media (min-width:769px){
  #cercador66{
    grid-template-columns:minmax(210px,250px) minmax(300px,380px) minmax(300px,1fr);
    gap:24px;
  }

  #cercador66 .modul11-66,
  .modul11-66{
    width:100%;
    max-width:380px;
  }

  #cercador66 > a:last-child{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    min-width:300px;
  }

  #seminuevos{
    width:100%;
    max-width:370px;
  }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1200px){
  .idioma-float{display:none;}
}

@media (max-width:768px){
  #barra_superior_66{
    min-height:32px !important;
    padding:0 !important;
    overflow:visible;
  }

  .contingut_barra_66{
    min-height:32px;
    padding:0 7px;
    gap:6px;
    font-family:var(--cap-font);
    font-size:11px;
    letter-spacing:0;
  }

  .tops66{
    display:flex !important;
    align-items:stretch;
    /* els de l'esquerra junts; SHOP ja se'n va a la dreta amb el seu
       margin-left:auto de .tp-9 */
    justify-content:flex-start;
    flex-wrap:nowrap;
    width:100%;
    gap:0;
  }

  .tops66 .topa66{
    display:none !important;
    white-space:nowrap;
    background:transparent !important;
  }

  /* A mobil no es pinta cap barreta: amb display:none pel mig, l'ultim
     element VISIBLE no es l'ultim fill i li quedava una penjant. */
  .tops66 .topa66::after{display:none !important;}

  .tops66 .topa66.mob-show{display:flex !important;}
  .tops66 .tp-9{margin-left:auto;}
  .tops66 a{padding:0 7px;font-size:11px;font-weight:600;}
  .banderes66{display:none !important;}

  #barra_cercador_66{padding:42px 0 10px !important;}  /* 32 + 10 */

  #cercador66{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:0;
    gap:12px;
    padding:8px 12px 4px;
  }

  #cercador66 a:first-child{
    display:flex;
    justify-content:center;
    width:100%;
  }

  .modul4-66{
    top:0;
    display:block;
    max-width:220px;
    margin:0 auto;
  }

  .modul11-66{
    display:block;
    width:calc(100% - 46px);   /* 46 = amplada del boto del menu + aire */
    max-width:300px;
    margin:0 0 0 auto;         /* arrambat a la dreta, lliure a l'esquerra */
  }

  .textcerca66{
    width:100% !important;
    height:40px !important;
    padding-left:12px;
    font-size:16px !important;
    line-height:40px !important;
  }

  #link-lupa66{height:40px;}
  #lupa66{right:11px !important;width:23px !important;height:23px !important;}
  #seminuevos{display:none !important;}

  nav.menu > ul{
    display:none;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:space-between;
    background:#fff;
  }

  nav.menu > ul > li{
    width:50%;
  }

  nav.menu > ul > li > a{
    padding:12px 13px;
    border-bottom:1px solid #e8e8e8;
    font-size:14px;
    text-align:left;
  }

  nav.menu > ul > li:nth-child(odd) > a{
    border-right:1px solid #e8e8e8;
  }

  .menu-icon{
    display:block;
    position:absolute;
    /* Ancorat a la BASE de .menu-container33, no al capdamunt: aixi no depen
       de l'alcada del logo ni del cercador. 12 = els 10px d'encoixinat
       inferior de #barra_cercador_66 + 2, que el deixa centrat sobre el camp. */
    top:auto;
    bottom:calc(100% + 12px);
    left:10px;
    z-index:1100;
    padding:7px 10px;
    border:1px solid #cfcfcf;
    border-radius:2px;
    background:#fff;
    color:#333;
    font-family:var(--cap-font);
    font-size:22px;
    line-height:1;
    cursor:pointer;
  }

  #menu-toggle:checked + .menu-icon + nav.menu > ul{display:flex;}
  nav.menu ul ul,
  nav.menu li:hover > ul{display:none !important;}
  #cart-panel,.bdreta,#cart,.close-cart{display:none !important;}
}