/* ES10_TPL skin — ONISOR GLOBAL · diseño propio "Granate & Lino".
   Granate vino profundo + ámbar dorado sobre lino cálido; grafito tostado.
   Hanken Grotesk (display) + Onest (texto) + Spline Sans Mono (mono). Cabecera 'tile' (placa granate con el logo + tarjeta blanca de dos pisos).
   Distinto del teal/Schibsted (loalecomerce, mismo nicho), verde (grupodist), cobalto (dotihome), índigo (hispano) y coral (wholesale). */

/* ---- variables base del tema ---- */
body.d10, body.sk-on{
  --bg:#F7F3EE; --sup:#FFFFFF; --ink:#241A1B; --acero:#6E5B58;
  --azul:#9A2A3F; --azul-d:#74202F; --cal:#B07A1E; --lima:#E3A52E; --menta:#F6E6E3;
  --linea:#E9DDD4; --foto:#FFFFFF; --wrap:1300px;
  --fh:'Hanken Grotesk',system-ui,sans-serif; --fm:'Spline Sans Mono',ui-monospace,monospace;
  /* ---- variables d10 (cabecera, tarjetas, ficha) ---- */
  --algodon:#F7F3EE; --blanco:#FFFFFF; --tinta:#241A1B; --tinta-2:#6E5B58;
  --ambar:#9A2A3F; --gris:#FFFFFF;
  --serif:'Hanken Grotesk',system-ui,sans-serif; --sans:'Onest',system-ui,sans-serif; --mono:'Spline Sans Mono',ui-monospace,monospace;
  --btn:#9A2A3F; --btn-fg:#fff; --btn-h:#74202F; --cta:#241A1B; --cta-fg:#fff; --cta-h:#000; --sbtn:#241A1B;
  --r:16px; --rs:12px; --rx:999px; --shadow-rgb:36,26,27;
}
body.d10{background:var(--bg)}
body.sk-on{font-family:var(--sans);color:var(--ink)}
body.sk-on h1,body.sk-on h2,body.sk-on h3{font-family:var(--fh);font-weight:800;letter-spacing:-.02em}

/* ---- scrollbars en paleta (SCROLL_V1) ---- */
body.sk-on{scrollbar-color:var(--azul) var(--menta);scrollbar-width:thin}
body.sk-on ::-webkit-scrollbar{width:11px;height:11px}
body.sk-on ::-webkit-scrollbar-track{background:var(--menta)}
body.sk-on ::-webkit-scrollbar-thumb{background:var(--azul);border-radius:999px;border:2px solid var(--menta)}
body.sk-on ::-webkit-scrollbar-thumb:hover{background:var(--azul-d)}

/* ====================================================================
   TILE_V1 — placa granate con el logo a toda altura + tarjeta blanca de dos pisos
   ==================================================================== */
.sk-on .h10t{position:sticky;top:0;z-index:60;background:var(--sup);box-shadow:0 1px 0 var(--linea)}
.sk-on .h10t-top{background:var(--ink);color:#E7D8CF}
.sk-on .h10t-top .h10-in{display:flex;align-items:center;justify-content:center;gap:18px;max-width:var(--wrap);margin:0 auto;min-height:34px;padding:0 clamp(12px,2.4vw,28px);font-size:12px}
.sk-on .h10t-top .tb-msg{display:flex;gap:26px;white-space:nowrap;overflow:hidden}
.sk-on .h10t-top .tb-msg span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--lima);vertical-align:1px}
.sk-on .h10t-top .tb-lnk{display:none}
.sk-on .h10t-in{display:flex;align-items:stretch;gap:0;max-width:var(--wrap);margin:0 auto;min-height:92px}
/* placa logo */
.sk-on .h10t-tile{flex:none;display:flex;align-items:center;gap:13px;width:min(34vw,300px);padding:16px clamp(16px,2vw,26px);background:linear-gradient(145deg,var(--azul) 0%,var(--azul-d) 100%);color:#fff!important;text-decoration:none!important;position:relative;overflow:hidden;border-radius:0 0 22px 0}
.sk-on .h10t-tile::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.09)}
.sk-on .h10t-tile .em{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:14px;background:rgba(255,255,255,.14)}
.sk-on .h10t-tile .em img{width:40px;height:40px;filter:brightness(0) invert(1)}
.sk-on .h10t-tile span{position:relative;z-index:1;display:flex;flex-direction:column;line-height:1.05}
.sk-on .h10t-tile b{font:800 25px var(--fh);letter-spacing:-.03em}
.sk-on .h10t-tile small{margin-top:3px;font:400 10.5px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:#F0D9C9}
/* tarjeta blanca derecha */
.sk-on .h10t-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:0;padding-left:clamp(14px,2.4vw,34px)}
.sk-on .h10t-nav{display:flex;align-items:center;gap:2px;height:44px;border-bottom:1px solid var(--linea)}
.sk-on .h10t-nav a{position:relative;padding:8px 14px;font:600 14px var(--sans);color:#5a4a46!important;text-decoration:none!important;white-space:nowrap;transition:color .2s}
.sk-on .h10t-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--azul);transform:scaleX(0);transition:transform .25s}
.sk-on .h10t-nav a:hover,.sk-on .h10t-nav a.on{color:var(--ink)!important}
.sk-on .h10t-nav a:hover::after,.sk-on .h10t-nav a.on::after{transform:scaleX(1)}
.sk-on .h10t-nav a.tx{color:#8a7a76!important;font-weight:500}
.sk-on .h10t-row{display:flex;align-items:center;gap:12px;height:56px}
.sk-on .h10t-q{flex:1;max-width:560px;display:flex;align-items:center;height:46px;padding:0 6px 0 20px;border:1.5px solid var(--linea);border-radius:999px;background:var(--bg);transition:border-color .2s,background .2s}
.sk-on .h10t-q:focus-within{border-color:var(--azul);background:#fff}
.sk-on .h10t-q svg{color:var(--acero);flex:none}
.sk-on .h10t-q input{flex:1;min-width:0;border:0;background:none;font:400 14.5px var(--sans);color:var(--ink);outline:0;padding:0 10px}
.sk-on .h10t-q button{flex:none;height:36px;padding:0 18px;border:0;border-radius:999px;background:var(--azul);color:#fff;cursor:pointer;font:600 13px var(--sans)}
.sk-on .h10t-q button:hover{background:var(--azul-d)}
.sk-on .h10t-a{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#5a4a46!important;text-decoration:none!important;transition:.18s}
.sk-on .h10t-a:hover{background:var(--menta);color:var(--azul)!important}
.sk-on .h10t-a .n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--lima);color:var(--ink);font:600 10px/18px var(--fm);text-align:center}
.sk-on .h10t-cart{display:flex;align-items:center;gap:9px;height:46px;padding:0 8px 0 20px;border-radius:999px;background:var(--azul);color:#fff!important;font:600 14px var(--sans);text-decoration:none!important;transition:background .2s}
.sk-on .h10t-cart:hover{background:var(--azul-d)}
.sk-on .h10t-cart b{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:#fff;color:var(--azul);font:700 13px var(--fm)}
.sk-on .h10t-burger{display:none}
@media(max-width:1120px){.sk-on .h10t-nav a{padding:8px 10px}.sk-on .h10t-tile{width:min(30vw,250px)}}
@media(max-width:900px){
  .sk-on .h10t-top{display:none}
  .sk-on .h10t-in{flex-wrap:wrap;min-height:0;padding:10px clamp(10px,3vw,18px);gap:10px;align-items:center}
  .sk-on .h10t-tile{order:1;width:auto;flex:1;padding:8px 14px;border-radius:14px}
  .sk-on .h10t-tile .em{width:40px;height:40px}.sk-on .h10t-tile .em img{width:30px;height:30px}
  .sk-on .h10t-tile b{font-size:19px}.sk-on .h10t-tile small{display:none}
  .sk-on .h10t-burger{order:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border:0;border-radius:12px;background:var(--menta);cursor:pointer}
  .sk-on .h10t-burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink)}
  .sk-on .h10t-main{order:4;flex-basis:100%;padding-left:0}
  .sk-on .h10t-nav{display:none;flex-direction:column;align-items:stretch;height:auto;border-bottom:0;gap:0}
  body.h10l-open .sk-on .h10t-nav{display:flex}
  .sk-on .h10t-nav a{padding:12px 4px;border-bottom:1px solid var(--linea)}.sk-on .h10t-nav a::after{display:none}
  .sk-on .h10t-row{height:auto;flex-wrap:wrap;padding-top:10px}
  .sk-on .h10t-q{order:1;flex-basis:100%;max-width:none}
}

/* ---- títulos y acentos ---- */
.sk-on .t10,.sk-on .f10-claim{font-family:var(--fh);font-weight:800;letter-spacing:-.03em}
.sk-on .t10 em,.sk-on .f10-claim em,.sk-on h1 em,.sk-on h2 em{font-style:normal;color:var(--azul)}
.sk-on .kick10,.sk-on .ct10-i dt{color:var(--cal);font-family:var(--fm);letter-spacing:.02em}

/* ---- botones píldora en toda la tienda ---- */
.sk-on .btn10,.sk-on .c10-add,.sk-on .pi10 .add,.sk-on .d9-cta,.sk-on .d9-cta-ink,
.sk-on .sum10 .btn,.sk-on .ck10 button,.sk-on .hz-go,.sk-on .buy10 .add,.sk-on .go10,.sk-on .sum10 .go{border-radius:999px!important}

/* ---- tarjeta de producto: foto blanca, redondeada ---- */
.sk-on .c10{border-color:var(--linea);border-radius:18px;overflow:hidden;background:#fff;transition:transform .18s,box-shadow .18s}
.sk-on .c10:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(36,26,27,.14)}
.sk-on .c10-ph{background:#fff;border-bottom:1px solid var(--linea)}
.sk-on .c10-ph img{mix-blend-mode:multiply}
.sk-on .c10-brand{border:0;padding:0;height:auto;color:var(--acero);letter-spacing:.1em;font-family:var(--fm);font-size:11px}
.sk-on .c10-brand::before{display:none}
.sk-on .c10-n{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.sk-on .c10-s{color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--linea)}
.sk-on .c10-p b{font-family:var(--fh);font-weight:800;font-size:25px;letter-spacing:-.02em;color:var(--ink)}
.sk-on .c10-act{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.sk-on .c10-act form{flex:1}
.sk-on .c10-add{white-space:nowrap;font-size:13px;padding:0 14px;height:42px;background:var(--azul);color:#fff}
.sk-on .c10-add:hover{background:var(--azul-d)}
.sk-on .c10-cmp{font-size:12px;gap:5px;color:var(--acero)}

/* ---- ficha de producto ---- */
.sk-on .g10 .main,.sk-on .g10 .thumbs button,.sk-on .ln10 .ph,.sk-on .mi10 img,.sk-on .cmp10 thead img{background:#fff;border:1px solid var(--linea);border-radius:16px}
.sk-on .g10 .main img,.sk-on .g10 .thumbs img,.sk-on .ln10 .ph img{mix-blend-mode:multiply}
.sk-on .pi10 .pr b,.sk-on .sum10 .tot > b,.sk-on .ln10 .tt{font-family:var(--fh);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.sk-on .pi10 h1{font-family:var(--fh);font-weight:800}

/* ---- filtros / chips / segmentos / paginación ---- */
.sk-on .chips10 a,.sk-on .pg10 a{border-radius:999px}
.sk-on .chips10 a.on,.sk-on .seg10 input:checked + span{background:var(--azul);border-color:var(--azul);color:#fff!important}
.sk-on .ck.on i{background:var(--azul);border-color:var(--azul)}
.sk-on .pg10 .on{background:var(--azul);border-color:var(--azul)}
.sk-on .seg10 span{border-radius:999px}
.sk-on .tabs10-h button.on{border-bottom-color:var(--azul);color:var(--azul)}

/* ---- enlaces generales ---- */
.sk-on a{color:var(--azul)}
.sk-on .h10-logo a,.sk-on .c10 a,.sk-on .tz,.sk-on .d9-brand{color:var(--ink)}
/* botones del home (mayor especificidad que .sk-on a) */
.sk-on .gd-btn-pri{color:#fff}
.sk-on .gd-btn-gh{color:var(--ink)}
.sk-on .gd-btn-gh:hover{color:#fff}
.sk-on .gd-entrega .gd-btn-pri{color:#fff}

@media(max-width:560px){.sk-on .c10-act{flex-direction:column;align-items:stretch}}