/* Tienda y ficha de producto IT LOGOS (como tienda.php y producto.php de la web
   de referencia, páginas en claro). Todo con prefijo itl-ti- y colgado de .itl-ti
   para no chocar con el tema ni con otras páginas. */

.itl-ti { background: #F4F4F1; color: #000412; font-family: Archivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; line-height: normal; }
/* El tema pone su interlineado a párrafos, enlaces y listas; aquí manda el de la referencia (normal). */
.itl-ti p, .itl-ti a, .itl-ti span, .itl-ti li, .itl-ti label, .itl-ti dt, .itl-ti dd, .itl-ti div { line-height: inherit; }
.itl-ti *, .itl-ti *::before, .itl-ti *::after { box-sizing: border-box; border-radius: 0; }
.itl-ti a { color: inherit; text-decoration: none; transition: color .15s; }
.itl-ti a:hover { color: #FF4800; }
.itl-ti :focus-visible { outline: 2px solid #CEFC00; outline-offset: 2px; }
.itl-ti p { margin: 0; }
.itl-ti h1, .itl-ti h2, .itl-ti h3 { font-family: inherit; padding: 0; border: 0; color: inherit; }
.itl-ti img { max-width: 100%; border-radius: 0; }
.itl-ti button, .itl-ti input { font-family: inherit; border-radius: 0; background-image: none; box-shadow: none; min-height: 0; height: auto; line-height: 1.2; text-shadow: none; }
.itl-ti button::before, .itl-ti button::after { content: none !important; }

@keyframes itlTiBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.itl-ti .itl-ti-cursor { width: 9px; height: 14px; background: #CEFC00; display: inline-block; animation: itlTiBlink 1s steps(1) infinite; }
@keyframes itlTiGridIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.itl-ti .itl-ti-in { animation: itlTiGridIn .32s cubic-bezier(.2,.9,.2,1); }

.itl-ti .itl-ti-cont { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* Portada oscura */
.itl-ti .itl-ti-hero { position: relative; overflow: hidden; background: #000412; color: #F4F4F1; }
.itl-ti .itl-ti-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 80% 100%, rgba(255,72,0,.28), transparent 60%); }
.itl-ti .itl-ti-hero a:hover { color: #FF4800 !important; }

/* Barra de filtros lima, pegada bajo la cabecera fija */
.itl-ti .itl-ti-filterbar { position: sticky; top: 108px; z-index: 40; background: #CEFC00; color: #000412; border-bottom: 2px solid #000412; padding: 14px 24px; }
.itl-ti .itl-ti-filterbar .itl-ti-cont { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0; }
.itl-ti .itl-ti-tabs { display: flex; gap: 10px; flex: 1 1 auto; }
.itl-ti .itl-ti-tab { flex: 0 0 auto; white-space: nowrap; background: transparent; color: #000412; border: 2px solid rgba(0,4,18,.35); padding: 11px 16px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: background .15s, color .15s, border-color .15s; }
.itl-ti .itl-ti-tab:hover { border-color: #000412; color: #000412; }
.itl-ti .itl-ti-tab[data-on="1"] { background: #000412; color: #CEFC00; border-color: #000412; }
.itl-ti .itl-ti-buscar { display: flex; flex: 0 1 320px; min-width: 220px; margin: 0; }
.itl-ti .itl-ti-buscar input { flex: 1 1 auto; min-width: 0; width: auto; padding: 10px 12px; background: #fff; border: 2px solid #000412; color: #000412; font-size: 13px; font-weight: 600; margin: 0; }
.itl-ti .itl-ti-buscar input:focus { outline: none; border-color: #FF4800; }
.itl-ti .itl-ti-buscar button { flex: 0 0 auto; width: 42px; padding: 0; background: #000412; color: #CEFC00; border: 2px solid #000412; display: grid; place-items: center; cursor: pointer; }

/* Facetas */
.itl-ti .itl-ti-facetas { display: grid; gap: 16px; padding: 20px; border: 2px solid #000412; background: #EAEAE5; }
.itl-ti .itl-ti-facetrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.itl-ti .itl-ti-facetrow > span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .6; flex: 0 0 auto; width: 96px; }
.itl-ti .itl-ti-faceta { background: transparent; color: #000412; border: 2px solid rgba(0,4,18,.3); padding: 8px 12px; font-size: 12px; font-weight: 700; transition: background .15s, color .15s, border-color .15s; }
.itl-ti .itl-ti-faceta:hover { border-color: #000412; color: #000412; }
.itl-ti .itl-ti-faceta[data-on="1"] { background: #000412; color: #CEFC00; border-color: #000412; }
.itl-ti .itl-ti-limpiar { margin-left: auto; color: rgba(0,4,18,.55); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.itl-ti .itl-ti-limpiar:hover { color: #FF4800; }

/* Rejilla de productos */
.itl-ti .itl-ti-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr)); gap: 24px; }
.itl-ti .itl-ti-prod { display: flex; flex-direction: column; background: #fff; border: 2px solid #000412; min-width: 0; transition: transform .18s, box-shadow .18s; }
.itl-ti .itl-ti-prod:hover { transform: translate(-4px,-4px); box-shadow: 8px 8px 0 #000412; color: inherit; }
.itl-ti .itl-ti-prod form { margin: 0; }
.itl-ti .itl-ti-add { display: flex; align-items: center; justify-content: center; text-align: center; background: #CEFC00; color: #000412; border: 2px solid #000412; padding: 12px 14px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; }
.itl-ti .itl-ti-prod:hover .itl-ti-add, .itl-ti .itl-ti-add:hover { background: #000412; color: #CEFC00; }
.itl-ti .itl-ti-add-off { background: #fff; }
.itl-ti .itl-ti-wa-ico { width: 44px; display: grid; place-items: center; border: 2px solid #000412; color: #000412; }
.itl-ti .itl-ti-wa-ico:hover { background: #FF4800; border-color: #FF4800; color: #fff; }
.itl-ti .itl-ti-mas { display: inline-block; background: #000412; color: #CEFC00; border: 0; padding: 16px 28px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.itl-ti .itl-ti-mas:hover { background: #FF4800; color: #fff; }
.itl-ti .itl-ti-garantias { margin: 0 -24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); }

/* Configurador (a medida) */
.itl-ti .itl-ti-cfg { border: 2px solid #CEFC00; box-shadow: 0 0 34px rgba(206,252,0,.16); min-width: 0; }
.itl-ti .itl-ti-cfg-opt { width: 100%; text-align: left; background: transparent; border: 2px solid rgba(206,252,0,.4); color: #CEFC00; padding: 12px 14px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.itl-ti .itl-ti-cfg-opt:hover { background: #CEFC00; color: #000412; border-color: #CEFC00; }
.itl-ti .itl-ti-cfg-in { width: 100%; padding: 13px; background: rgba(244,244,241,.06); border: 2px solid rgba(244,244,241,.25); color: #F4F4F1; font-size: 15px; margin: 0; }
.itl-ti .itl-ti-cfg-in:focus { outline: none; border-color: #CEFC00; }
.itl-ti .itl-ti-cfg-cambiar { margin-left: auto; background: transparent; border: 0; padding: 0; color: rgba(244,244,241,.45); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.itl-ti .itl-ti-cfg-cambiar:hover { color: #FF4800; background: transparent; }
.itl-ti .itl-ti-cfg-seguir { align-self: flex-start; background: #CEFC00; color: #000412; border: 0; padding: 12px 20px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.itl-ti .itl-ti-cfg-seguir:hover { background: #FF4800; color: #fff; }
.itl-ti #medida a:hover { color: inherit; }

@media (max-width: 760px) {
  .itl-ti .itl-ti-filterbar { top: 98px; padding: 12px 16px; }
  .itl-ti .itl-ti-tabs { overflow-x: auto; scrollbar-width: none; }
  .itl-ti .itl-ti-tabs::-webkit-scrollbar { display: none; }
  .itl-ti .itl-ti-buscar { flex: 1 1 100%; min-width: 0; }
  .itl-ti .itl-ti-facetrow { align-items: flex-start; }
  .itl-ti .itl-ti-facetrow > span:first-child { width: 100%; margin-bottom: 2px; }
  .itl-ti .itl-ti-faceta { font-size: 11px; padding: 7px 10px; }
  .itl-ti .itl-ti-limpiar { margin-left: 0; }
}
@media (max-width: 560px) {
  .itl-ti .itl-ti-cont { padding: 0 18px; }
  .itl-ti .itl-ti-garantias { margin: 0 -18px; }
}

/* ---- Ficha ---- */
.itl-ti .itl-ti-main { max-width: 1440px; margin: 0 auto; padding: clamp(116px,14vh,150px) 24px 76px; }
@media (max-width: 560px) { .itl-ti .itl-ti-main { padding: 104px 18px 60px; } }
.itl-ti .itl-ti-sangre { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50% + 24px); padding-right: calc(50vw - 50% + 24px); }
.itl-ti .itl-ti-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,4,18,.5); margin-bottom: 28px; }
.itl-ti .itl-ti-migas i { font-style: normal; color: #FF4800; }
.itl-ti .itl-ti-pgrid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(28px,4vw,64px); align-items: start; }
@media (max-width: 900px) { .itl-ti .itl-ti-pgrid { grid-template-columns: minmax(0,1fr); } }

.itl-ti .itl-ti-galeria { position: relative; overflow: hidden; border: 2px solid #000412; background: #fff; }
.itl-ti .itl-ti-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: rgba(244,244,241,.92); color: #000412; border: 2px solid #000412; cursor: pointer; transition: background .15s, color .15s; }
.itl-ti .itl-ti-arrow:hover { background: #000412; color: #CEFC00; }
.itl-ti .itl-ti-punto { width: 10px; height: 10px; background: rgba(244,244,241,.9); border: 2px solid #000412; padding: 0; cursor: pointer; transition: width .3s, background .3s; }
.itl-ti .itl-ti-punto[data-on="1"] { width: 28px; background: #CEFC00; }

.itl-ti .itl-ti-espec { border: 2px solid #000412; background: #fff; margin: 0; }
.itl-ti .itl-ti-espec div { display: flex; gap: 16px; padding: 13px 16px; border-bottom: 1px solid rgba(0,4,18,.12); }
.itl-ti .itl-ti-espec div:last-child { border-bottom: 0; }
.itl-ti .itl-ti-espec dt { flex: 0 0 40%; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,4,18,.55); }
.itl-ti .itl-ti-espec dd { flex: 1 1 auto; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }

.itl-ti .itl-ti-uds { display: flex; border: 2px solid #000412; background: #fff; }
.itl-ti .itl-ti-uds button { width: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; font-size: 19px; font-weight: 800; color: #000412; }
.itl-ti .itl-ti-uds button:hover { background: #000412; color: #CEFC00; }
.itl-ti .itl-ti-uds input { width: 46px; text-align: center; font-size: 16px; font-weight: 800; border: 0; border-left: 2px solid #000412; border-right: 2px solid #000412; background: transparent; padding: 8px 0; margin: 0; color: #000412; }
.itl-ti .itl-ti-buy { flex: 1 1 220px; padding: 15px 22px; background: #CEFC00; color: #000412; border: 2px solid #000412; box-shadow: 5px 5px 0 #000412; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: transform .18s, box-shadow .18s, background .15s, color .15s; }
.itl-ti .itl-ti-buy:hover { background: #000412; color: #CEFC00; transform: translate(-3px,-3px); box-shadow: 8px 8px 0 #000412; }
.itl-ti .itl-ti-wa-linea { display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid #000412; padding: 14px 20px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: background .15s, color .15s, border-color .15s; }
.itl-ti .itl-ti-wa-linea:hover { background: #FF4800; color: #fff; border-color: #FF4800; }

.itl-ti .itl-ti-enpack { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 2px solid #000412; background: #CEFC00; padding: 9px 13px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.itl-ti .itl-ti-enpack input { width: auto; margin: 0; accent-color: #000412; }
.itl-ti .itl-ti-packbtn { margin-left: auto; background: #000412; color: #CEFC00; border: 2px solid #000412; padding: 15px 24px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: 5px 5px 0 #FF4800; transition: transform .18s, box-shadow .18s; }
.itl-ti .itl-ti-packbtn:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 #FF4800; }

/* Pestañas de la ficha (sin JavaScript) */
.itl-ti .itl-ti-tabsp input { position: absolute; opacity: 0; width: 0; height: 0; }
.itl-ti .itl-ti-tabsp-bar { display: flex; gap: 26px; flex-wrap: wrap; border-bottom: 2px solid rgba(0,4,18,.12); }
.itl-ti .itl-ti-tabsp-bar label { border-bottom: 4px solid transparent; color: rgba(0,4,18,.45); padding: 20px 2px 16px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .15s, border-color .15s; }
.itl-ti .itl-ti-tabsp-bar label:hover { color: #000412; }
.itl-ti .itl-ti-pestana { display: none; padding: 34px 0 52px; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); gap: clamp(24px,4vw,56px); align-items: start; }
.itl-ti .itl-ti-pestana h2 { font-size: clamp(22px,2.6vw,32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 14px; max-width: 22ch; text-transform: none; }
.itl-ti .itl-ti-pestana h2 + span { display: block; width: 52px; height: 2px; background: #FF4800; }
.itl-ti .itl-ti-pestana p { margin: 0; font-size: 15px; line-height: 1.65; opacity: .78; max-width: 62ch; }
#itl-ti-tab1:checked ~ .itl-ti-tabsp-bar label[for="itl-ti-tab1"],
#itl-ti-tab2:checked ~ .itl-ti-tabsp-bar label[for="itl-ti-tab2"],
#itl-ti-tab3:checked ~ .itl-ti-tabsp-bar label[for="itl-ti-tab3"] { color: #000412; border-bottom-color: #FF4800; }
#itl-ti-tab1:checked ~ .itl-ti-pestana-1, #itl-ti-tab2:checked ~ .itl-ti-pestana-2, #itl-ti-tab3:checked ~ .itl-ti-pestana-3 { display: grid; }

/* Descripción de WooCommerce dentro de la pestaña */
.itl-ti .itl-ti-desc { font-size: 15px; line-height: 1.65; color: rgba(0,4,18,.85); max-width: 62ch; overflow-wrap: anywhere; }
.itl-ti .itl-ti-desc p, .itl-ti .itl-ti-desc ul, .itl-ti .itl-ti-desc ol { margin: 0 0 12px; opacity: 1; }
.itl-ti .itl-ti-desc ul, .itl-ti .itl-ti-desc ol { padding-left: 20px; }
.itl-ti .itl-ti-desc li { margin: 0 0 4px; }
.itl-ti .itl-ti-desc h2, .itl-ti .itl-ti-desc h3, .itl-ti .itl-ti-desc h4 { font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; margin: 20px 0 8px; max-width: none; line-height: 1.3; }
.itl-ti .itl-ti-desc h2 + span { display: none; }
.itl-ti .itl-ti-desc table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 14px; }
.itl-ti .itl-ti-desc td, .itl-ti .itl-ti-desc th { border: 1px solid rgba(0,4,18,.15); padding: 8px 10px; text-align: left; }
.itl-ti .itl-ti-desc img { height: auto; }
.itl-ti .itl-ti-desc a { color: #FF4800; }

.itl-ti .itl-ti-similares { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px,100%), 1fr)); gap: 18px; }

/* En móvil estrecho «REACONDICIONADOS» no cabe a 34px: se baja para que no parta la palabra. */
@media (max-width: 440px) { .itl-ti .itl-ti-hero h1 { font-size: 29px !important; overflow-wrap: normal; hyphens: none; } }

/* El tema pone overflow-x:hidden a html y body a la vez: el body se vuelve contenedor
   de scroll y la barra de filtros deja de quedarse fija. «clip» recorta igual sin eso.
   (Esta hoja solo se carga en la tienda y en las fichas.) */
html, body { overflow-x: clip !important; overflow-y: visible !important; }

/* Paginación del listado: enlaces normales (/tienda/page/2/) que Google sigue. */
.itl-ti .itl-ti-paginas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding-top: 36px; }
.itl-ti .itl-ti-pag { min-width: 46px; height: 46px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #000412; background: #fff; color: #000412; font-size: 14px; font-weight: 800; letter-spacing: .04em; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.itl-ti a.itl-ti-pag:hover { background: #000412; color: #CEFC00; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 #FF4800; }
.itl-ti .itl-ti-pag[aria-current="page"] { background: #CEFC00; color: #000412; box-shadow: 4px 4px 0 #000412; }
.itl-ti .itl-ti-pag-flecha { padding: 0 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; background: #000412; color: #CEFC00; }
.itl-ti .itl-ti-pag-hueco { font-weight: 800; opacity: .5; padding: 0 2px; }
.itl-ti .itl-ti-pag-info { margin: 14px 0 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
@media (max-width: 560px) {
  .itl-ti .itl-ti-pag { min-width: 40px; height: 40px; font-size: 13px; }
  .itl-ti .itl-ti-pag-flecha { padding: 0 12px; font-size: 11px; }
}