/* SHOP-V · Estilo «Vibrante» de la tienda (inspirado en apps de mercado móviles):
   cabecera con degradado, buscador blanco flotante, mosaico de categorías, promociones en
   colores pastel, tarjetas limpias con botón «Agregar» delineado y barra inferior en móvil.
   Se carga después de mercado.css y theme.css. body.vb = paleta morada; sin .vb usa la marca. */
@font-face{font-family:Rubik;font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/rubik-400.woff2) format("woff2")}
@font-face{font-family:Rubik;font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/rubik-500.woff2) format("woff2")}
@font-face{font-family:Rubik;font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/rubik-600.woff2) format("woff2")}
@font-face{font-family:Rubik;font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/rubik-700.woff2) format("woff2")}

body.mk{--vb-1:var(--brand-d);--vb-2:var(--brand);--vb-3:var(--brand-2);--vb-acc:var(--brand);--vb-acc-d:var(--brand-d);--vb-acc-l:var(--brand-l);--vb-acc-ll:var(--brand-ll);
  --vb-line:#ececf3;--vb-bg:#f7f7fb;--vb-r:16px;--font:Rubik,"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --vb-grad:linear-gradient(43deg,var(--vb-1) 0%,var(--vb-2) 78%,var(--vb-3) 100%);background:var(--vb-bg);font-family:var(--font)}
body.mk.vb{--brand:#6a40f4;--brand-2:#8b6cff;--brand-d:#4b2bc8;--brand-l:#e6defe;--brand-ll:#f4f0ff;--brand-deep:#2c1a7a;--brand-deep-2:#4b2bc8;--accent:#ff4d79;--accent-l:#ffe3ea;
  --vb-1:#573cff;--vb-2:#c850c0;--vb-3:#ffcc70;--vb-acc:#6a40f4;--vb-acc-d:#4b2bc8;--vb-acc-l:#e6defe;--vb-acc-ll:#f4f0ff}
body.mk h1,body.mk h2,body.mk h3,body.mk .mk-h{font-family:var(--font);letter-spacing:-.01em}
body.mk .mk-h{font-weight:600;font-size:1.25rem;color:#1c1b29}

/* ---------- Cabecera ---------- */
.mk-top{background:#1c1340;font-weight:500}
body.mk:not(.vb) .mk-top{background:var(--brand-deep,var(--brand-d))}
.mk-head{background:var(--vb-grad);box-shadow:0 6px 24px -12px rgba(60,30,160,.45)}
.mk-head .brand-name{color:#fff;font-weight:600}
.mk-head .brand-ini{background:rgba(255,255,255,.2);box-shadow:none;border:1px solid rgba(255,255,255,.35)}
.mk-head .brand-logo{background:#fff;border-radius:10px;padding:3px}
.mk-search{border:0;border-radius:14px;height:50px;box-shadow:0 10px 26px -14px rgba(20,10,60,.55)}
.mk-search input{border-radius:14px 0 0 14px;padding:0 18px;font-size:1rem;color:#1c1b29}
.mk-search input::placeholder{color:#8a8aa0}
.mk-search>button{background:transparent;color:#1c1b29;border-radius:0 14px 14px 0;width:54px}
.mk-search>button:hover{color:var(--vb-acc)}
.mk-deliv{color:#fff}.mk-deliv small{color:rgba(255,255,255,.8)}.mk-deliv .ic{color:#fff}
.mk-act{color:#fff;font-weight:500}
.mk-act:hover{background:rgba(255,255,255,.16);color:#fff}
.mk-act .ic{color:#fff}
.mk-badge{background:#ffcc70;color:#3b2200;border-color:transparent}
.mk-ib{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:50%}
.mk-nav{background:#fff;border-top:0;border-bottom:1px solid var(--vb-line)}
.mk-nav a{font-weight:500;color:#3d3c52;border-radius:999px}
.mk-nav a:hover{background:var(--vb-acc-ll);color:var(--vb-acc)}
.mk-all{background:var(--vb-acc);border-radius:999px;font-weight:500}
.mk-hot{background:#fff3d6!important;color:#9a5b00!important;border-radius:999px!important}
.mk-mega{border-top:0}
.mk-mega-deps a.on,.mk-mega-deps a:hover{background:var(--vb-acc-ll);color:var(--vb-acc)}

/* ---------- Portada ---------- */
.mk-hero{border-radius:22px}
.mk-hero-def{background:var(--vb-grad);color:#fff}
.mk-hero-def .s-kicker{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}
.mk-hero-def .s-btn-l{background:#fff;color:var(--vb-acc);font-weight:600;border-radius:12px}
.mk-hero-txt h1{font-weight:700}

/* Mosaico «Categorías populares» */
.vb-tiles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.vb-tile{display:grid;justify-items:center;gap:8px;background:#fff;border:1px solid var(--vb-line);border-radius:var(--vb-r);padding:12px 8px 10px;transition:transform .15s,box-shadow .15s,border-color .15s;min-width:0}
.vb-tile:hover{transform:translateY(-2px);border-color:var(--vb-acc-l);box-shadow:0 12px 24px -16px rgba(60,30,160,.5)}
.vb-tile-img{width:100%;aspect-ratio:1/1;max-width:96px;display:grid;place-items:center;border-radius:12px;overflow:hidden}
.vb-tile-img img{width:100%;height:100%;object-fit:contain}
.vb-tile-img svg{width:58%;height:58%;color:var(--vb-acc)}
.vb-tile-img.ic-only{background:var(--vb-acc-ll)}
.vb-tile-n{font-size:.82rem;color:#2b2a3d;text-align:center;line-height:1.2;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Promociones en colores pastel (cuando no hay banners de promoción cargados) */
.vb-duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vb-promo{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:170px;border-radius:20px;padding:22px 22px 20px;overflow:hidden;color:#1c1b29;isolation:isolate}
.vb-promo b{font-size:1.5rem;font-weight:600;line-height:1.1}
.vb-promo b em{font-style:normal;font-weight:400}
.vb-promo small{font-size:.95rem;color:#3d3c52}.vb-promo small strong{font-weight:600;color:#1c1b29}
.vb-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:var(--vb-acc);color:#fff;font-weight:500;padding:9px 16px;border-radius:12px;font-size:.92rem}
.vb-cta .ic{width:16px;height:16px}
.vb-promo>svg{position:absolute;right:-8px;bottom:-14px;width:36%;max-width:140px;height:auto;aspect-ratio:1;z-index:-1;opacity:.55}
.vb-p1{background:#fff1c7}.vb-p1>svg{color:#f59e0b}
.vb-p2{background:#ffe3ea}.vb-p2>svg{color:#ff4d79}.vb-p2 .vb-cta{background:#e5385f}
.vb-p3{background:#dff0ff}.vb-p3>svg{color:#1f8bff}.vb-p3 .vb-cta{background:#1f6fff}
.vb-p3 b{color:#1f6fff}
.mk-promo{border-radius:20px}

/* Encabezados de bloque */
.mk-block-h a,.mk-cc-head a.mk-link{color:var(--vb-acc);font-weight:500}
.mk-arrow{background:#fff;border:1px solid var(--vb-line);color:#1c1b29}

/* ---------- Tarjeta de producto ---------- */
.mk-card{border:1px solid var(--vb-line);border-radius:var(--vb-r);box-shadow:none;container-type:inline-size}
.mk-card:hover{box-shadow:0 16px 30px -18px rgba(60,30,160,.45);transform:translateY(-2px)}
.mk-card-img{padding:16px 16px 6px}
.mk-off{background:var(--accent);border-radius:999px;font-weight:600;padding:3px 9px}
.mk-soldout{border-radius:999px;font-weight:600}
.mk-card-b{display:grid;grid-template-columns:1fr;grid-template-areas:"b" "n" "u" "l" "p" "a";align-items:end;column-gap:8px;row-gap:2px;padding:6px 14px 14px}
.mk-brandtxt{grid-area:b;text-transform:none;letter-spacing:0;font-weight:400;font-size:.78rem;color:#6e6d82;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-name{grid-area:n;font-weight:500;font-size:.95rem;color:#1c1b29;-webkit-line-clamp:2;min-height:2.6em}
.mk-name:hover{color:var(--vb-acc)}
.mk-unit{grid-area:u;font-size:.76rem;color:#8a8aa0}
.mk-last{grid-area:l;color:#e5385f;font-weight:600}
.mk-price{grid-area:p;margin-top:6px;line-height:1.15;min-width:0}
.mk-price b{font-size:1.12rem;font-weight:600;color:#1c1b29;white-space:nowrap}
.mk-was s{font-size:.82rem;color:#8a8aa0;white-space:nowrap}
.mk-addwrap{grid-area:a;margin:0;padding:0}
.mk-card-b>.mk-add{grid-area:a}
.mk-card .mk-add{width:100%;margin-top:8px!important;height:38px;padding:0 16px;background:#fff;color:var(--vb-acc);border:1px solid var(--vb-acc);border-radius:11px;font-weight:500;font-size:.92rem;margin:0}
.mk-card .mk-add:hover{background:var(--vb-acc);color:#fff}
.mk-card .mk-add-off{border-color:#e2e2ea!important;background:#f3f3f7!important;color:#8a8aa0!important}
.mk-card .mk-step{width:100%;margin-top:8px;height:38px;border:1px solid var(--vb-acc);border-radius:11px;background:var(--vb-acc)}
.mk-card .mk-step button{background:transparent;color:#fff;width:32px;font-weight:500}
.mk-card .mk-step span{color:#fff;font-weight:600}
.mk-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
body.mk .s-chips a{border-radius:999px;font-weight:500}
body.mk .s-chips a:hover{border-color:var(--vb-acc);color:var(--vb-acc)}
@container (min-width:215px){
  .mk-card-b{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b b" "n n" "u u" "l l" "p a"}
  .mk-card .mk-add{width:auto;min-width:92px;margin-top:0!important}
  .mk-card .mk-step{width:100px;margin-top:0}
}
.mk-rail-w .mk-arrow{opacity:0;transition:opacity .15s}.mk-rail-w:hover .mk-arrow{opacity:1}

/* Botones y formularios generales de la tienda */
body.mk .s-btn{border-radius:12px;font-weight:500}
body.mk .s-btn-go,body.mk .fx-submit{background:var(--vb-acc)}
body.mk .s-drawer{border-radius:20px 0 0 20px}
body.mk .s-drawer.s-left{border-radius:0 20px 20px 0}
.mk-modal-box{border-radius:22px}

/* Ficha de producto y listados */
body.mk .fb-chip.on,body.mk .fb-chip:hover{border-color:var(--vb-acc);color:var(--vb-acc)}

/* Pie */
body.mk .s-foot{background:#fff;border-top:1px solid var(--vb-line)}
body.mk .s-foot h4{color:var(--vb-acc);font-weight:600}
body.mk .s-perks>div{border:1px solid var(--vb-line);border-radius:var(--vb-r);box-shadow:none}
body.mk .s-perks .ic{color:var(--vb-acc)}

/* ---------- Tablet ---------- */
@media (max-width:1100px){.vb-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:900px){
  .mk-top{display:none}
  .mk-head{border-radius:0 0 22px 22px}
  .mk-row{gap:10px;padding-top:12px}
  .mk-search{margin-bottom:14px;height:48px}
  .mk-acts{gap:8px}
  .mk-act{width:42px;height:42px;padding:0;border-radius:50%;background:rgba(28,19,64,.28);justify-content:center}
  .mk-act .ic{width:20px;height:20px}
  .mk-act .mk-badge{top:-4px;right:-4px}
  .mk-doc span{display:none}
  .mk-nav{display:none}
  .mk-hero,.mk-hero-def{aspect-ratio:auto}
  .mk-hero:not(.mk-hero-def){aspect-ratio:800/800}
  .mk-hero-w{margin-top:14px}
  .vb-duo{grid-template-columns:1fr 1fr}
  .vb-duo .vb-p3{grid-column:1/-1}
  .mk-bottom{border-top:1px solid var(--vb-line);box-shadow:0 -10px 24px -16px rgba(60,30,160,.35);padding-top:8px}
  .mk-bottom a,.mk-bottom button{font-weight:400;font-size:.7rem;color:#3d3c52}
  .mk-bottom .ic{color:#1c1b29;width:24px;height:24px}
  .mk-bottom .on,.mk-bottom .on .ic{color:var(--vb-acc);font-weight:500}
  .mk-bottom .mk-badge{top:-6px;right:calc(50% - 22px)}
  .mk-card .mk-add{height:36px;font-size:.88rem}
  .mk-card .mk-step{height:36px}
  .mk-card-b{padding:4px 10px 12px}
  .mk-price b{font-size:1rem}
}
/* ---------- Teléfono ---------- */
@media (max-width:600px){
  .s-wrap{padding:0 14px}
  .mk-head .brand-name{font-size:1rem;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vb-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .vb-tile{padding:8px 4px 8px;border-radius:14px;gap:6px}
  .vb-tile-n{font-size:.72rem}
  .vb-duo{grid-template-columns:1fr;gap:12px}
  .vb-promo{min-height:150px;padding:20px}
  .vb-promo b{font-size:1.35rem}
  .mk-hero-def{min-height:0;padding:24px 22px;border-radius:20px}
  .mk-hero-txt h1{font-size:1.6rem}
  .mk-rail{grid-auto-columns:47%;gap:10px}
  .mk-grid{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.mk .s-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px}
  body.mk .s-chips::-webkit-scrollbar{display:none}
  body.mk .s-chips a{white-space:nowrap;flex:0 0 auto}
}
@media (max-width:900px){.mk-head .brand-logo{max-height:38px}}

/* ---------- Espacios de banners vacíos (guía para el diseñador) ---------- */
.vb-slot{position:relative;display:grid;place-items:center;width:100%;border-radius:20px;border:2px dashed #b9a8ff;color:#3d2a99;text-align:center;overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.55) 0 14px,rgba(255,255,255,0) 14px 28px),linear-gradient(43deg,#efe9ff,#fbe6f6 70%,#fff3dc);transition:border-color .15s,transform .15s}
.vb-slot:hover{border-color:var(--vb-acc);transform:translateY(-2px)}
.vb-slot-in{display:grid;justify-items:center;gap:4px;padding:14px 18px;max-width:92%}
.vb-slot-ic{width:44px;height:44px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--vb-acc);box-shadow:0 8px 18px -10px rgba(60,30,160,.5);margin-bottom:4px}
.vb-slot b{font-size:1.05rem;font-weight:600;color:#2c1a7a}
.vb-slot-size{font-weight:600;font-size:.92rem;background:#fff;border-radius:999px;padding:3px 12px;color:var(--vb-acc);box-shadow:0 4px 10px -6px rgba(60,30,160,.4)}
.vb-slot small{font-size:.8rem;color:#5b4fa0;line-height:1.3}
.vb-slot-go{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;font-weight:500;color:var(--vb-acc);margin-top:2px}
.vb-slot-hero{aspect-ratio:1600/480}
.vb-slot-franja{aspect-ratio:1600/120;border-radius:14px}
.vb-slot-franja .vb-slot-in{grid-auto-flow:column;align-items:center;gap:12px;padding:6px 12px}
.vb-slot-franja .vb-slot-ic,.vb-slot-franja small,.vb-slot-franja .vb-slot-go{display:none}
.vb-slot-promo_dia,.vb-slot-promo_semana,.vb-slot-promo_mes{aspect-ratio:800/520}
.vb-slot-categoria{aspect-ratio:1600/300}
.vb-slot.mk-side{height:100%;min-height:320px;box-shadow:none}
.vb-slot-lateral b{font-size:.95rem}
.vb-slot-tag{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border:1px dashed #b9a8ff;color:#3d2a99;font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:999px}
@media (max-width:900px){
  .vb-slot-hero{aspect-ratio:800/800}
  .vb-slot-franja{aspect-ratio:800/160}
  .vb-slot-categoria{aspect-ratio:800/300}
  .vb-slot-categoria small,.vb-slot-categoria .vb-slot-ic{display:none}
  .vb-slot-franja .vb-slot-in{grid-auto-flow:row;gap:4px}
}
@media (max-width:600px){.vb-slot b{font-size:.95rem}.vb-slot small{display:none}}