/* Tienda B2B en blanco: índice por división, familia y línea; filtros, resultados y ficha con datos. */
body.p-shop{background:#fff;color:var(--ink);color-scheme:light}
.p-shop .tool{color:var(--ink)}
.sh-h{padding-top:clamp(104px,15vh,140px);padding-bottom:clamp(18px,3.4vh,34px)}
.sh-h .bc{margin-bottom:clamp(14px,3vh,28px)}
.sh-h h1{font-size:var(--h1)}
.sh-h p{margin-top:12px;font-size:clamp(18px,1.4vw,22px);color:var(--ink-2)}
.sh-h--s h1{font-size:var(--h2)}
.sh-h__g{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.sh-h__i{width:auto;height:clamp(120px,22vh,220px);flex:none;filter:drop-shadow(0 12px 16px rgba(5,7,10,.18))}
/* familias sueltas: solo la página 404 */
.fams__s{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ft-m{display:grid;grid-template-columns:minmax(0,1fr) 62px;align-items:center;gap:10px;min-height:84px;padding:10px 14px 10px 18px;background:var(--paper);transition:background-color .16s var(--ease)}
.ft-m b{display:block;font-size:17px;font-weight:500;line-height:1.16}
.ft-m small{display:block;margin-top:2px;font-size:15.5px;font-weight:300;color:var(--ink-2)}
.ft-m img{width:62px;height:62px;object-fit:contain}
@media(hover:hover) and (pointer:fine){.ft-m:hover{background:var(--mist)}}
/* héroe de familia: celda que crece */
.fh{position:relative}
.fh__st{position:relative;height:clamp(420px,62vh,640px);overflow:hidden;background:var(--black);color:#fff}
.fh__w{position:absolute;inset:0;will-change:clip-path}
.fh__w img{width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform}
.fh__s{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,10,.84),rgba(5,7,10,.18) 62%,rgba(5,7,10,.44))}
.fh__t{position:absolute;left:0;right:0;bottom:clamp(20px,5vh,46px)}
.fh__t .bc{margin-bottom:clamp(8px,2vh,16px)}
.fh h1{font-size:var(--h2);max-width:16em}
.fh__t p{margin-top:10px;font-size:clamp(18px,1.4vw,22px);font-weight:400}
.subs{padding-top:12px;padding-bottom:clamp(14px,3vh,28px)}
.subs__t{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.st-c{position:relative;flex:1 0 170px;min-height:128px;padding:12px 14px;background:var(--paper);font-weight:500;font-size:16.5px;line-height:1.15;transition:background-color .16s var(--ease)}
.st-c img{position:absolute;right:6px;bottom:6px;width:auto;height:62%;object-fit:contain}
.st-c span{position:relative;display:block;max-width:78%}
.st-c small{position:absolute;left:14px;bottom:10px;font-size:15.5px;font-weight:300;color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.st-c:hover{background:var(--mist)}}
/* familia: líneas con sus primeras piezas */
.fs{padding:clamp(18px,3.4vh,34px) 0;scroll-margin-top:90px}
.fs__h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:12px;padding-top:12px;border-top:1px solid var(--line)}
.fs h2{font:600 clamp(22px,2vw,30px)/1.15 var(--body);letter-spacing:-.01em}
/* hoja de línea: pocas referencias, en tabla */
.lt{width:100%;border-collapse:collapse;margin:clamp(8px,2vh,20px) 0 clamp(40px,8vh,90px);color:var(--ink);border-top:1px solid var(--ink)}
.lt thead th{font:400 15.5px/1.2 var(--body);text-align:left;color:var(--ink-2);padding:12px 18px;border-bottom:1px solid var(--line)}
.lt tbody th,.lt tbody td{padding:12px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-weight:400}
.lt tbody th a{font:500 clamp(18px,1.4vw,22px)/1.25 var(--body);color:inherit}
.lt small{display:block;color:var(--ink-2);font-size:15.5px;margin-top:4px}
.lt__m{width:124px}.lt__m a{display:block;width:96px;height:96px;padding:8px;background:var(--paper)}.lt__m img{width:100%;height:100%;object-fit:contain}
.lt__a{width:72px;text-align:right}
@media(max-width:640px){.lt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.lt tbody tr{display:grid;grid-template-columns:72px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.lt tbody th,.lt tbody td{padding:0;border:0}.lt__m{width:72px;grid-row:1/3}.lt__m a{width:72px;height:72px}.lt td:nth-child(3){grid-column:2;font-size:15.5px;color:var(--ink-2)}.lt__a{grid-column:3;grid-row:1/3;width:auto}}
/* nombres de producto: Kanit; en Cenzo chico la c se lee como o */
.pd__b h1{font-family:var(--body);font-weight:600;letter-spacing:-.01em;line-height:1.08}
/* listado */
.sh-w{padding-bottom:clamp(70px,12vh,130px)}
.sh{display:grid;grid-template-columns:minmax(220px,256px) minmax(0,1fr);gap:clamp(22px,3vw,52px);align-items:start;border-top:1px solid var(--ink);overflow-y:clip}
.sh--no{grid-template-columns:minmax(0,1fr)}.sh--no .sh__r{display:none}
.sh__r{position:sticky;top:90px;max-height:calc(100vh - 106px);padding:10px 4px 16px 0;overflow:auto;scrollbar-width:thin}
.sh__rh{display:none}
.sh__rf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.sh__rf .btn{display:none}
.fx-g{padding:4px 0;border-bottom:1px solid var(--line)}
.fx-g summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:42px;font-weight:500;font-size:16.5px}
.fx-g summary::-webkit-details-marker{display:none}
.fx-g summary::after{content:"+";font-size:20px;font-weight:300;transition:transform .18s var(--ease)}
.fx-g[open] summary::after{transform:rotate(45deg)}
.fx-g ul{padding-bottom:8px}
.fx-g li label{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:34px;font-size:16px;font-weight:400;cursor:pointer;line-height:1.15}
.fx-g input{width:18px;height:18px;accent-color:var(--black)}
.fx-g small{font-size:15.5px;font-weight:300;color:var(--ink-2)}
.fx-g li.nil{opacity:.42}
.sh__m{min-width:0}
.sh__t{position:sticky;top:82px;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 0;background:#fff;box-shadow:0 1px 0 var(--line);flex-wrap:wrap}
/* detrás de la cápsula no asoma nada: la barra sube hasta el borde de la pantalla */
.sh__t::before{content:"";position:absolute;left:-330px;right:0;bottom:100%;height:96px;background:#fff}
.sh__q{flex:1 1 240px;min-width:0}
.sh__q input{width:100%;height:46px;padding:0 16px;border:0;background:var(--paper);color:var(--ink);font-size:16.5px}
.sh__q input::placeholder{color:var(--ink-2)}
.sh__c{white-space:nowrap;font-size:16px}
.sh__c b{font-weight:600}
.sh__f{display:none;min-height:44px}
.sh__v{display:flex;gap:2px;padding:3px;background:var(--paper)}
.sh__v button{min-height:40px;padding:0 15px;font-size:16px;font-weight:400;transition:background-color .16s var(--ease),color .16s var(--ease)}
.sh__v button[aria-pressed=true]{background:var(--black);color:#fff}
.sh__ch{display:flex;flex-wrap:wrap;gap:6px;min-height:0}
.sh__ch:not(:empty){padding:10px 0 2px}
.sh__ch button{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 13px;background:var(--black);color:#fff;font-size:15.5px;font-weight:400}
/* resultados: familia, línea y sus piezas, siempre en el mismo orden */
.gf{padding-top:clamp(26px,4.6vh,48px);scroll-margin-top:150px}
.gf:first-child{padding-top:22px}
.gf[hidden],.gl[hidden]{display:none}
.gf__h{display:flex;justify-content:space-between;align-items:baseline;gap:14px 24px;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.gf__h h2{font-size:clamp(26px,2.7vw,42px);line-height:1.04}
.gl{margin-top:clamp(14px,2.4vh,24px)}
.gl__h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.gf__h+.gl{margin-top:0}.gf__h+.gl .gl__h{border-top:0}
.gl__h h3{font:600 clamp(18px,1.4vw,21px)/1.2 var(--body)}
@media(hover:hover) and (pointer:fine){.gl__h h3 a:hover{text-decoration:underline;text-underline-offset:3px}}
.gl__h span{font-size:15.5px;color:var(--ink-2)}
/* tarjeta */
.sh__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pc{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);background:#fff;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.pc[hidden]{display:none}
.pc__m{position:relative;display:block;aspect-ratio:4/3;background:var(--paper)}
.pc__m img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(5,7,10,.16));transition:transform .5s var(--expo)}
.pc__b{flex:1;padding:12px 14px 0}
.pc__n{display:block;font-size:16.5px;font-weight:500;line-height:1.22}
@media(hover:hover) and (pointer:fine){.pc__n:hover{text-decoration:underline;text-underline-offset:3px}}
.pc__d{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;font-size:15.5px;line-height:1.25}
.pc__d span{padding:2px 7px;background:var(--mist)}
.pc__d--q span{padding:0;background:none;color:var(--ink-2)}
.pc__a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 10px 14px}
.pc__r{font-size:15.5px;font-weight:300;color:var(--ink-2);font-variant-numeric:tabular-nums}
.p-shop .add{width:42px;height:42px;background:var(--mist);color:var(--ink)}
.p-shop .add[aria-pressed=true]{background:var(--cyan);color:var(--black)}
@media(hover:hover) and (pointer:fine){.pc:hover{border-color:var(--ink)}.pc:hover .pc__m img{transform:translateY(-4px) scale(1.03)}.p-shop .add:hover{background:var(--black);color:#fff}.p-shop .add[aria-pressed=true]:hover{background:var(--black);color:#fff}}
.pc.in{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.sh--table .sh__g{grid-template-columns:minmax(0,1fr);gap:0}
.sh--table .pc{display:grid;grid-template-columns:72px minmax(0,1.7fr) minmax(0,1fr) auto auto;align-items:center;column-gap:16px;padding:6px 0;border-width:0 0 1px}
.sh--table .pc.in{box-shadow:inset 3px 0 0 var(--cyan)}
.sh--table .pc__m{aspect-ratio:1}
.sh--table .pc__b{display:contents}
.sh--table .pc__n{grid-column:2}
.sh--table .pc__d{grid-column:3;margin:0}
.sh--table .pc__a{display:contents}
.sh--table .pc__r{grid-column:4}
.sh--table .add{grid-column:5}
.sh__e{padding:30px 6px}
.sh__e b{display:block;font:700 clamp(26px,3vw,44px)/1.1 var(--display);margin-bottom:6px}
.sh__more{display:flex;margin:clamp(18px,3vh,30px) auto 0}
.sh__more[hidden],.sh__e[hidden]{display:none}
/* índice del catálogo: división, familia y sus líneas. Es la portada de la tienda; la grilla aparece al buscar o filtrar */
.cx-h{padding-top:clamp(96px,12.6vh,120px);padding-bottom:clamp(14px,2.6vh,26px)}
.cx-h .bc{margin-bottom:clamp(8px,1.6vh,16px)}
.cx-h h1{font-size:max(44px,var(--h2))}
.cx-h .sh-h__g>div{flex:1}
.cx-h #sh-all{flex:none;margin-bottom:6px}
.sh--cx{display:block;border-top:0}
.sh--cx .sh__t{flex-wrap:nowrap;gap:clamp(12px,1.6vw,22px)}
.sh--cx .sh__t::before{left:calc(-1*var(--gut));right:calc(-1*var(--gut))}
.sh--cx .sh__q{flex:1 1 300px;max-width:440px}
.sh--cx .sh__f{display:inline-flex;flex:none;min-height:46px;padding:0 20px;border-radius:0}
.js .sh--cx:not(.sh--res) .sh__c{display:none}
.sh--cx .sh__v,.sh--cx .cx-b{display:none}
.sh--cx.sh--res .sh__v{display:flex}
.sh--cx.sh--res .cx-b{display:inline;flex:none;margin-left:auto}
.sh--cx.sh--res .cx-n{display:none}
.sh--cx .sh__g{grid-template-columns:repeat(5,minmax(0,1fr))}
.sh--cx.sh--table .sh__g{grid-template-columns:minmax(0,1fr)}
.js .sh--cx:not(.sh--res) #sh-g,.js .sh--cx:not(.sh--res) .sh__e,.js .sh--cx.sh--res .cx{display:none}
.cx-n{display:flex;gap:clamp(14px,1.7vw,26px);margin-left:auto}
.cx-n a{min-height:44px;display:flex;align-items:center;font-size:16px;font-weight:400;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow .16s var(--ease)}
.cx-n a[aria-current]{font-weight:500;box-shadow:inset 0 -2px 0 var(--black)}
.cx-d{padding-top:clamp(30px,5.4vh,56px);scroll-margin-top:124px}
.cx-d__h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.cx-d__h h2{font-size:clamp(28px,3vw,46px);line-height:1.06}
.cx-d__h p{flex:none;font-size:16.5px;color:var(--ink-2)}
.cx-f{display:grid;grid-template-columns:clamp(190px,19vw,290px) minmax(0,1fr);column-gap:clamp(16px,2vw,32px);align-items:start;padding:clamp(14px,2.4vh,22px) 0;border-bottom:1px solid var(--line)}
.cx-f__h{position:sticky;top:166px}
.cx-f__h h3{font:600 clamp(19px,1.5vw,23px)/1.18 var(--body);letter-spacing:-.01em}
.cx-f__h p{margin-top:4px;font-size:16px;color:var(--ink-2)}
.cx-l{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vh,20px) 12px}
.cx-d--s .cx-fs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px)}
.cx-d--s .cx-f{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.cx-d--s .cx-f__h{position:static}
.cx-d--s .cx-l{grid-template-columns:repeat(2,minmax(0,1fr))}
.cx-t{display:block}
.cx-t i{position:relative;display:block;aspect-ratio:3/2;background:var(--paper);transition:background-color .16s var(--ease)}
.cx-t img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(5,7,10,.16));transition:transform .5s var(--expo)}
.cx-t b{display:block;margin-top:8px;font-size:17px;font-weight:500;line-height:1.18}
.cx-t small{display:block;margin-top:1px;font-size:15.5px;font-weight:300;color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.cx-t:hover i{background:var(--mist)}.cx-t:hover img{transform:translateY(-4px) scale(1.03)}.cx-t:hover b,.cx-f__h a:hover,.cx-n a:hover{text-decoration:underline;text-underline-offset:3px}}
/* ficha */
.p-pd .bc{padding-top:clamp(96px,14vh,130px)}
.pd{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,70px);align-items:center;padding-top:clamp(14px,3vh,30px);padding-bottom:clamp(40px,7vh,70px)}
.pd__m{position:relative;display:flex;justify-content:center;align-items:center;height:clamp(340px,62vh,640px);background:var(--paper);overflow:hidden}
.pd__m img{width:auto;max-width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(5,7,10,.18))}
.pd__r{font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pd h1{margin-top:6px;font-size:clamp(32px,min(3.6vw,7.4vh),64px);line-height:1.06}
.pd__d{margin-top:14px;font-size:clamp(18px,1.3vw,21px);line-height:1.4;color:var(--ink-2)}
.pd__a{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:clamp(18px,3vh,28px)}
.qty--l{display:grid;gap:4px;font-size:15.5px;font-weight:400}
.qty--l input{height:50px;width:110px;border-radius:12px;background:var(--paper);color:var(--ink)}
.pd__a .btn[aria-pressed=true]{background:var(--black);color:#fff}
.pd__l{margin-top:8px}
.pd-s{padding-bottom:clamp(40px,7vh,70px)}
.pd-s h2,.pd-r h2{margin-bottom:clamp(12px,2.4vh,22px);font-size:clamp(30px,3.4vw,60px)}
.pd__n{margin-bottom:14px;font-size:clamp(18px,1.3vw,21px);color:var(--ink-2)}
.pd-t{width:100%;max-width:980px;border-collapse:collapse;border-top:1px solid var(--ink);font-size:clamp(17px,1.2vw,19px)}
.pd-t th,.pd-t td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:300}
.pd-t th{width:42%;font-weight:500}
.pd-r{padding-bottom:clamp(70px,12vh,120px)}
.sh__g--r{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:981px){
 .sh--cx .sh__r{position:fixed;z-index:72;top:0;bottom:0;left:0;width:min(420px,100vw);max-height:none;padding:14px 24px 0;background:#fff;box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(5,7,10,.18);transform:translateX(-102%);visibility:hidden;transition:transform .34s var(--expo),visibility .34s}
 .sh--cx .sh__r.on{transform:none;visibility:visible;box-shadow:0 0 0 1px var(--line),0 0 0 100vmax rgba(5,7,10,.42)}
 .sh--cx .sh__rh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.sh--cx .sh__rh h2{font-size:28px}
 .sh--cx .sh__rf{position:sticky;bottom:0;margin:10px -24px 0;padding:12px 24px;background:#fff;border-top:1px solid var(--line)}
 .sh--cx .sh__rf .btn{display:inline-flex}
}
@media(max-width:1280px){.sh__m .sh__g{grid-template-columns:repeat(3,minmax(0,1fr))}.sh--cx .sh__m .sh__g{grid-template-columns:repeat(4,minmax(0,1fr))}.cx-l{grid-template-columns:repeat(4,minmax(0,1fr))}.sh--table .sh__g,.sh--cx.sh--table .sh__m .sh__g{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1180px){.sh__v,.sh--cx.sh--res .sh__v{display:none}.fams__s{grid-template-columns:repeat(2,minmax(0,1fr))}.sh--cx .sh__t{flex-wrap:wrap}.cx-n{order:5;flex:0 0 100%;margin:0;overflow-x:auto;scrollbar-width:none}.cx-n a{min-height:38px}.cx-d{scroll-margin-top:170px}.cx-f__h{top:190px}.cx-l{grid-template-columns:repeat(3,minmax(0,1fr))}.cx-d--s .cx-fs{grid-template-columns:minmax(0,1fr)}}
@media(max-width:980px){
 .sh{grid-template-columns:minmax(0,1fr)}
 .sh__r{position:fixed;z-index:72;inset:0;max-height:none;padding:14px 20px 0;background:#fff;transform:translateY(102%);visibility:hidden;transition:transform .34s var(--expo),visibility .34s}
 .sh__r.on{transform:none;visibility:visible}
 .sh__rh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.sh__rh h2{font-size:28px}
 .sh__rf .btn{display:inline-flex}
 .sh__f{display:inline-flex;flex:none;padding:0 18px}
 .sh__t{top:74px;flex-wrap:nowrap;gap:8px}
 .sh__t::before{left:0}
 .sh__q{flex:1 1 0}
 .sh__rf{position:sticky;bottom:0;margin:10px -20px 0;padding:12px 20px;background:#fff;border-top:1px solid var(--line)}
 .sh__m .sh__g,.sh--cx .sh__m .sh__g,.sh__g,.sh__g--r{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .sh--table .pc,.sh--cx.sh--table .pc{grid-template-columns:60px minmax(0,1fr) auto;column-gap:12px}
 .sh--table .pc__m{grid-row:1/3}
 .sh--table .pc__n,.sh--table .pc__d{grid-column:2}
 .sh--table .pc__r{display:none}
 .sh--table .add{grid-column:3;grid-row:1/3}
 .sh--table .sh__g,.sh--cx.sh--table .sh__m .sh__g{grid-template-columns:minmax(0,1fr)}
 .sh--cx .sh__t{top:74px;flex-wrap:wrap;gap:8px}
 .sh--cx .sh__q{flex:1 1 0;max-width:none}
 .cx-h #sh-all{display:none}
 .cx-f,.cx-d--s .cx-f{grid-template-columns:minmax(0,1fr)}
 .cx-f__h{position:static;display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
 .cx-f__h p{margin:0;flex:none}
 .pd{grid-template-columns:minmax(0,1fr)}
 .pd__m{height:46vh}
 .sh-h__i{display:none}
}
@media(max-width:640px){.cx-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}.cx-t b{font-size:16px}.cx-d__h h2{font:600 26px/1.12 var(--body);letter-spacing:-.01em}}
@media(max-width:560px){.sh__c{white-space:nowrap}.sh__c span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.fams__s{grid-template-columns:minmax(0,1fr);gap:6px}.ft-m{min-height:72px}.pc__b{padding:10px 10px 0}.pc__a{padding:8px 8px 8px 10px}.pc__n{font-size:16px}}