/* ══════════════════════════════════════════
   VARIABLES · MV SUPERMERCADO
══════════════════════════════════════════ */
:root{
  /* Marca */
  --pink:#D01A7D;
  --pink-d:#A8125F;
  --pink-l:#FDE8F4;

  --yellow:#FFD400;
  --yellow-d:#EAB308;

  /* Categorías */
  --cat-carne:#DC2626;
  --cat-verde:#16A34A;
  --cat-fruta:#65A30D;
  --cat-lacteos:#2563EB;
  --cat-limpieza:#7C3AED;
  --cat-pan:#C2410C;
  --cat-descartables:#0891B2;
  --cat-almacen:#D97706;
  --cat-bebidas:#0EA5E9;
  --cat-bazar:#DB2777;
  --cat-electro:#F59E0B;
  --cat-jugueteria:#E11D48;
  --cat-hogar:#0D9488;

  /* Neutros */
  --dark:#111827;
  --g9:#1F2937;
  --g8:#374151;
  --g6:#6B7280;
  --g3:#E5E7EB;
  --g1:#F9FAFB;

  --cream:#FFF0FA;

  --card:#FFFFFF;
  --border:#ECECEC;

  --text:#111827;
  --text2:#6B7280;
  --text3:#9CA3AF;

  /* Misc */
  --hh:58px;
  --r:12px;

  --sh:
    0 2px 10px rgba(0,0,0,.04),
    0 14px 32px rgba(0,0,0,.05);

  --sh2:
    0 10px 22px rgba(0,0,0,.08),
    0 28px 60px rgba(208,26,125,.12);

  --ease:.28s cubic-bezier(.4,0,.2,1)
}

body.dark{
  --cream:#130a10;

  --card:#1c1118;
  --border:#2d1a28;

  --g1:#1c1118;
  --g3:#2d1a28;

  --dark:#f0daea;

  --text:#f0daea;
  --text2:#b08aa0;
  --text3:#7a5568;

  --sh:
    0 2px 12px rgba(0,0,0,.45),
    0 12px 30px rgba(0,0,0,.35);

  --sh2:
    0 12px 26px rgba(0,0,0,.5),
    0 32px 70px rgba(208,26,125,.16);

  color-scheme:dark
}

body.dark .tabs-bar{
  background:#1c1118
}



/* ══════════════════════════════════════════
   MAIN
══════════════════════════════════════════ */

.main{
  max-width:1200px; margin:0 auto; padding:16px 8px 4px
}
.pg{
  padding-bottom:calc(var(--bnav-h,58px) + 10px);flex:1
}

body.no-bnav .pg{
  padding-bottom:24px
}

@media(min-width:768px){
  .pg{
    padding-bottom:24px
  }
}

/* ══════════════════════════════════════════
   SECTION LABEL
══════════════════════════════════════════ */

.slabel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px
}

.slabel h2{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.2px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text)
}

.slabel h2 svg{
  color:var(--pink);
  flex-shrink:0
}

.slabel-count{
  font-size:12px;
  color:var(--text2);
  font-weight:600
}

/* ══════════════════════════════════════════
   ADMIN STATS BAR
══════════════════════════════════════════ */

#adminStatsBar{
  overflow:hidden;
  max-height:0;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  border-bottom:1px solid transparent;

  padding:0 10px;

  transition:
    max-height .28s cubic-bezier(.4,0,.2,1),
    padding .28s,
    border-color .28s
}

body.dark #adminStatsBar{
  background:rgba(28,17,24,.96)
}

body.sv-on #adminStatsBar{
  max-height:52px;
  padding:5px 10px;
  border-color:var(--border,#e5e7eb)
}

.asb-inner{
  display:flex;
  align-items:center;
  width:100%;
  gap:0
}

.asb-chip{
  flex:1;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;

  padding:4px 4px
}

.asb-chip svg{
  width:11px;
  height:11px;
  color:#9ca3af;
  flex-shrink:0
}

.asb-val{
  font-size:12px;
  font-weight:900;
  color:#111827
}

.asb-lbl{
  font-size:9px;
  font-weight:600;
  color:#9ca3af
}

.asb-div{
  width:1px;
  height:18px;
  background:#e5e7eb;
  flex-shrink:0
}

/* ══════════════════════════════════════════
   CATEGORY COLLAPSE
══════════════════════════════════════════ */

.cat-collapse-btn{
  margin-left:auto;

  background:rgba(255,255,255,.15);

  border:none;

  color:#fff;

  width:30px;
  height:30px;

  border-radius:9px;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
  z-index:2;

  flex-shrink:0;

  transition:
    background .2s,
    transform .2s
}

.cat-collapse-btn:hover{
  background:rgba(255,255,255,.24)
}

.cat-section.collapsed .cat-collapse-btn svg{
  transform:rotate(-90deg)
}

.cat-grid-wrap{
  overflow:visible;

  transition:
    max-height .38s cubic-bezier(.4,0,.2,1),
    opacity .3s;

  max-height:3000px;
  opacity:1;

  display:flex;
  flex-direction:column
}

.cat-section.collapsed .cat-grid-wrap{
  overflow:hidden;
  max-height:0;
  opacity:0
}

/* ══════════════════════════════════════════
   CATEGORY PAIRS
══════════════════════════════════════════ */

.cat-pair{
  display:flex;
  gap:14px;
  margin-bottom:0;
  align-items:stretch
}

.cat-pair .cat-section{
  margin-bottom:12px;

  flex:1;

  display:flex;
  flex-direction:column
}

.cat-half{
  flex:1;
  min-width:0;

  display:flex;
  flex-direction:column
}

@media(max-width:500px){
  .cat-pair{
    flex-direction:column
  }
}

.cat-half .p-grid{
  grid-template-columns:1fr
}

@media(min-width:700px){
  .cat-half .p-grid{
    grid-template-columns:repeat(2,1fr)
  }
}

/* ══════════════════════════════════════════
   ADMIN MENU ITEMS
══════════════════════════════════════════ */

.pc-adm-item{
  display:flex;
  align-items:center;
  gap:8px;

  width:100%;

  padding:10px 14px;

  font-size:12px;
  font-weight:800;

  color:#111;

  background:none;

  border:none;

  cursor:pointer;

  text-decoration:none;

  transition:background .12s
}

.pc-adm-item:hover{
  background:#f5f5f5
}

.pc-adm-danger{
  color:#dc2626
}

.pc-adm-danger:hover{
  background:#fef2f2
}

/* ══════════════════════════════════════════
   MODO 3D · EXTRAS
══════════════════════════════════════════ */

body.mode-3d .pc{
  transform-style:preserve-3d
}

body.mode-3d .pc:hover .pc-price-pill{
  transform:translateY(-1px)
}

body.mode-3d .pc-price-pill{
  transition:
    transform .25s,
    box-shadow .25s
}

/* ══════════════════════════════════════════
   DARK FIXES
══════════════════════════════════════════ */

body.dark .pc-admin-drop{
  background:#22131c;
  border:1px solid rgba(255,255,255,.05)
}

body.dark .pc-adm-item{
  color:#f3dce7
}

body.dark .pc-adm-item:hover{
  background:#2b1722
}

body.dark .pc-adm-danger:hover{
  background:#3b141d
}


/* ══════════════════════════════════════════
   MODO 3D FLUENCY
══════════════════════════════════════════ */

body.mode-3d{
  background:
    radial-gradient(circle at top,#fff7fb 0%,#f8f4ff 45%,#fff5fb 100%)
}

body.mode-3d.dark{
  background:
    radial-gradient(circle at top,#22111b 0%,#170f22 45%,#130c15 100%)
}
/* ══════════════════════════════════════════
   ESTILOS DE PRODUCTOS Y CATEGORÍAS
══════════════════════════════════════════ */

/* ─────────────────────────────────────────
   GRIDS
───────────────────────────────────────── */

.p-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:8px;
}

.p-grid-3{
  grid-template-columns:
    repeat(3,minmax(0,1fr));
}

.p-grid-search{
  display:grid;

  grid-template-columns:
    repeat(auto-fill,minmax(140px,170px));

  gap:14px;

  justify-content:start;
}

/* ══════════════════════════════════════════
   GRID DENSO · DEFAULT
══════════════════════════════════════════ */

/* Tablet (500-699): 2 cols para que los pares no se achiquen */
@media(min-width:500px) and (max-width:699px){

  .p-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media(min-width:700px){

  .p-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }

  /* Meta chips ligeramente más grandes en desktop */
  .pc-meta-chip{
    font-size:.65rem;
    padding:4px 10px
  }
  .pc-unit-badge{
    font-size:.68rem;
    padding:2px 10px;
    bottom:30px
  }
}

@media(min-width:960px){

  .p-grid{
    grid-template-columns:
      repeat(5,minmax(0,1fr));
  }
}

@media(min-width:1140px){

  .p-grid{
    grid-template-columns:
      repeat(6,minmax(0,1fr));
  }
}





/* ══════════════════════════════════════════
   MODO B · HYBRID
   SOLO 2 PRODUCTOS
══════════════════════════════════════════ */

.p-grid[data-count="2"]{
  margin-inline:auto;
}

/* MOBILE */
@media(max-width:699px){

  /* mayor especificidad para anular .cat-half .p-grid */
  .cat-grid-wrap .p-grid[data-count="2"],
  .p-grid[data-count="2"]{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    max-width:none;
  }

  /* body híbrido REAL en mobile */
  .p-grid[data-count="2"] .pc-body{

    flex-direction:row;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    padding:8px 6px 6px;
  }

  .p-grid[data-count="2"] .pc-name{

    flex:1;

    text-align:left;

    padding:0;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

    font-size:.78rem;

    margin-bottom:0;
  }

  .p-grid[data-count="2"] .pc-price-pill{

    margin-top:0;

    width:auto;

    min-width:90px;

    flex-shrink:0;
  }

  .p-grid[data-count="2"] .pc-pill-price{

    font-size:.95rem;

    padding:0 10px;
  }

  .p-grid[data-count="2"] .pc-unit-badge{

    bottom:24px;

    left:10px;

    font-size:.55rem;

    padding:1px 6px;
  }

  .p-grid[data-count="2"] .pc-cat-chip{
    display:none;
  }

  /* modo 3 en mobile: 3 cols para evitar 2+1 desbalanceado */
  .cat-grid-wrap .p-grid[data-count="3"],
  .p-grid[data-count="3"]{

    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:8px;
  }

  .p-grid[data-count="3"] .pc-name{

    font-size:.72rem;

    line-height:1.15;
  }

  .p-grid[data-count="3"] .pc-pill-price{

    font-size:.95rem;

    padding:0 8px;
  }

  .p-grid[data-count="3"] .pc-unit-badge{

    bottom:22px;

    left:8px;

    font-size:.52rem;

    padding:1px 5px;
  }
}

/* DESKTOP / TABLET */
@media(min-width:700px){

  .p-grid[data-count="2"]{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    max-width:860px;
  }

  /* body híbrido REAL */
  .p-grid[data-count="2"] .pc-body{

    flex-direction:row;

    align-items:flex-end;

    justify-content:space-between;

    gap:12px;
  }

  .p-grid[data-count="2"] .pc-name{

    flex:1;

    text-align:left;

    padding:0;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;
  }

  .p-grid[data-count="2"] .pc-price-pill{

    margin-top:0;

    width:auto;

    min-width:120px;

    flex-shrink:0;
  }

  .p-grid[data-count="2"] .pc-cat-chip{
    display:none;
  }
}

/* ══════════════════════════════════════════
   FEATURE · 1 PRODUCTO
══════════════════════════════════════════ */

.p-grid[data-count="1"]{

  grid-template-columns:1fr;

  width:100%;
}

/* card ocupa todo */
.p-grid[data-count="1"] .pc{
  width:100%;
}

/* MOBILE */
@media(max-width:699px){

  .p-grid[data-count="1"] .pc{

    max-width:none;
  }
}

/* DESKTOP */
@media(min-width:700px){

  .p-grid[data-count="1"] .pc{

    display:grid;

    grid-template-columns:
      minmax(240px,340px) 1fr;

    align-items:stretch;
  }

  /* FOTO */
  .p-grid[data-count="1"] .pc-img-wrap{

    aspect-ratio:1;

    height:100%;

    border-radius:
      calc(var(--r) + 2px)
      0
      0
      calc(var(--r) + 2px);
  }

  .p-grid[data-count="1"] .pc-img-frame{
    height:100%;
  }

  /* BODY */
  .p-grid[data-count="1"] .pc-body{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    gap:12px;

    padding:22px;

    border-top:none;

    border-left:
      3px solid var(--cat-color,var(--pink));

    border-radius:
      0
      calc(var(--r) + 1px)
      calc(var(--r) + 1px)
      0;
  }

  /* flecha lateral espejada */
  .p-grid[data-count="1"] .pc-body::before{

    top:50%;

    left:-1px;

    transform:
      translateY(-50%)
      rotate(180deg);

    border-left:none;

    border-top:6px solid transparent;

    border-bottom:6px solid transparent;

    border-right:
      6px solid var(--cat-color,var(--pink));
  }

  .p-grid[data-count="1"] .pc-cat-chip{
    align-self:flex-start;
  }

  .p-grid[data-count="1"] .pc-name{

    text-align:left;

    padding:0;

    font-size:1.08rem;

    line-height:1.18;
  }

  /* IMPORTANTE */
  .p-grid[data-count="1"] .pc-price-pill{

    margin-top:auto;

    width:fit-content;

    min-width:160px;
  }
}

/* ══════════════════════════════════════════
   PRODUCT CARD · MV PREMIUM
══════════════════════════════════════════ */

.pc{
  position:relative;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  background:var(--card);

  border-radius:calc(var(--r) + 2px);

  border:1px solid rgba(0,0,0,.04);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    var(--sh);

  cursor:pointer;

  contain:layout paint;

  will-change:transform;

  transform-origin:center;

  transition:
    transform var(--ease),
    box-shadow var(--ease),
    border-color var(--ease);
}

body.dark .pc{
  border-color:rgba(255,255,255,.05);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    var(--sh);
}

.pc::after{
  content:'';

  position:absolute;

  inset:0;

  border-radius:inherit;

  border:1px solid rgba(255,255,255,.45);

  pointer-events:none;

  z-index:5;
}

@media(pointer:fine){

  .pc:hover{

    z-index:3;

    transform:
      translateY(-3px)
      scale(1.012);

    border-color:
      rgba(208,26,125,.18);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      var(--sh2);
  }
}

/* ─────────────────────────────────────────
   IMAGEN
───────────────────────────────────────── */

.pc-img-wrap{
  position:relative;

  aspect-ratio:1;

  overflow:hidden;

  padding:6px;

  background:
    radial-gradient(circle at top,#ffffff 0%,#f5f5f6 100%);

  border-radius:
    calc(var(--r) + 1px)
    calc(var(--r) + 1px)
    0
    0
}

body.dark .pc-img-wrap{
  background:
    radial-gradient(circle at top,#2a1823 0%,#1b1018 100%)
}

.pc-img-wrap::before{
  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.28) 0%,
      transparent 48%
    );

  pointer-events:none;
  z-index:2
}

.pc-img-frame{
  position:relative;

  width:100%;
  height:100%;

  overflow:hidden;

  border-radius:calc(var(--r) - 2px);

  background:#fff
}

body.dark .pc-img-frame{
  background:#1c1118
}

.pc-img{
  position:absolute;

  top:50%;
  left:50%;

  width:100%;
  height:100%;

  object-fit:var(--img-fit,contain);

  transform:translate(-50%,-50%) scale(var(--img-scale,1));

  transition:
    transform .4s cubic-bezier(.34,1.56,.64,1),
    width .35s,
    height .35s
}

@media(pointer:fine){
  .pc:hover .pc-img{
    transform:translate(-50%,-50%) scale(calc(var(--img-scale,1) * 1.08))
  }
}

.pc-img-ph{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--text3)
}

.pc-img-ph svg{
  width:42px;
  height:42px;
  opacity:.18
}

/* ── Carrusel de fotos en card ── */
.pc-carousel .pc-slide{
  opacity:0;
  transition:opacity .8s ease,
    transform .4s cubic-bezier(.34,1.56,.64,1)
}
.pc-carousel .pc-slide.active{
  opacity:1
}
@media(pointer:fine){
  .pc:hover .pc-carousel .pc-slide.active{
    transform:translate(-50%,-50%) scale(calc(var(--img-scale,1) * 1.08))
  }
}
.pc-dots{
  position:absolute;
  left:0;right:0;bottom:6px;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:4px;
  pointer-events:none
}
.pc-dot{
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(0,0,0,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.5);
  transition:background .3s,width .3s
}
.pc-dot.active{
  width:11px;
  border-radius:3px;
  background:var(--cat-color,var(--pink))
}
body.dark .pc-dot{
  background:rgba(255,255,255,.3);
  box-shadow:0 0 0 1px rgba(0,0,0,.4)
}

/* ─────────────────────────────────────────
   CHIP SUPERIOR
───────────────────────────────────────── */

.pc-stat-badge{
  position:absolute;

  top:18px;
  left:18px;

  z-index:4;

  display:flex;
  align-items:center;
  gap:6px;

  padding:6px 10px;

  border-radius:999px;

  background:
    rgba(255,255,255,.88);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,.5);

  box-shadow:
    0 4px 10px rgba(0,0,0,.08);

  font-size:.56rem;
  font-weight:900;
  letter-spacing:.4px;

  color:#D01A7D
}

body.dark .pc-stat-badge{
  background:rgba(30,18,26,.9);
  color:#fff
}

.pc-stat-badge i{
  display:flex;
  align-items:center;
  gap:3px
}

.pc-stat-badge i svg{
  width:10px;
  height:10px
}

body:not(.sv-on) .pc-stat-badge,
body:not(.sv-on) .pc-admin-btn,
body:not(.sv-on) .pc-admin-drop{
  display:none!important
}

/* ─────────────────────────────────────────
   ADMIN BTN
───────────────────────────────────────── */

.pc-admin-btn{
  position:absolute;
  top:18px;
  right:18px;
  z-index:10;

  width:30px;
  height:30px;

  border:none;

  border-radius:10px;

  background:
    rgba(255,255,255,.88);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  color:var(--text2);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  box-shadow:
    0 4px 10px rgba(0,0,0,.08)
}

body.dark .pc-admin-btn{
  background:rgba(30,18,26,.88)
}

.pc-admin-drop{
  position:absolute;

  top:42px;
  right:10px;

  z-index:20;

  min-width:150px;

  overflow:hidden;

  border-radius:14px;

  background:#fff;

  box-shadow:
    0 16px 40px rgba(0,0,0,.16);

  display:none
}

.pc-admin-drop.on{
  display:block
}

/* ─────────────────────────────────────────
   BODY
───────────────────────────────────────── */

.pc-body{
  position:relative;

  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
  padding:10px 6px 6px;
  background:
    linear-gradient(
      to bottom,
      #fcfcfc 0%,
      #ffffff 100%
    );

  border-top:3px solid var(--cat-color,var(--pink));

  border-radius:
    0
    0
    calc(var(--r) + 1px)
    calc(var(--r) + 1px)
}

body.dark .pc-body{
  background:
    linear-gradient(
      to bottom,
      #22141d 0%,
      #1b1018 100%
    )
}

/* Flechita bajo barra rosa */
.pc-body::before{
  content:'';

  position:absolute;

  top:-1px;
  left:50%;

  transform:translateX(-50%);

  width:0;
  height:0;

  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:6px solid var(--cat-color,var(--pink))
}

/* ─────────────────────────────────────────
   CATEGORÍA
───────────────────────────────────────── */

.pc-cat-chip{
  align-self:center;

  margin-bottom:3px;

  padding:5px 10px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      rgba(208,26,125,.12),
      rgba(208,26,125,.08)
    );

  color:var(--pink);

  font-size:.55rem;
  font-weight:900;
  letter-spacing:.55px;

  text-transform:uppercase
}

body.dark .pc-cat-chip{
  background:
    rgba(255,255,255,.06)
}

/* ─────────────────────────────────────────
   TITULO
───────────────────────────────────────── */

.pc-name{
  font-size:.90rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.25px;
  padding:0 8px;

  text-align:center;
  color:var(--text);

  overflow:hidden;

  display:block;

  max-height:calc(1.2em * 2);
 text-wrap:balance;
  word-break:break-word;
}

/* ─────────────────────────────────────────
   PRECIO
───────────────────────────────────────── */

.pc-price-pill{
  display:flex;
  align-items:stretch;
  justify-content:center;

  overflow:hidden;
  margin-top:auto;
  min-height:32px;

  border-radius:10px;

  box-shadow:
    0 8px 18px rgba(208,26,125,.20),
    inset 0 1px 0 rgba(255,255,255,.15)
}

/* ─────────────────────────────────────────
   BADGE DE UNIDAD · Esquina de la pill
───────────────────────────────────────── */

.pc-unit-badge{
  position:absolute;
  bottom:28px;
  left:12px;
  z-index:3;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:1px 8px;

  background:
    linear-gradient(
      135deg,
      #FFE600,
      #FFC400
    );

  color:#B4005A;

  font-size:.65rem;
  font-weight:900;
  letter-spacing:.3px;

  white-space:nowrap;

  border-radius:999px;

  box-shadow:
    0 3px 8px rgba(208,26,125,.25);

  border:1px solid rgba(255,255,255,.35);

  transition:
    transform var(--ease),
    box-shadow var(--ease)
}

@media(pointer:fine){
  .pc:hover .pc-unit-badge{
    transform:translateY(-3px);
    box-shadow:
      0 5px 12px rgba(208,26,125,.35)
  }
}

body.dark .pc-unit-badge{
  border-color:rgba(255,255,255,.15);
  box-shadow:
    0 3px 8px rgba(0,0,0,.35)
}

/* ─────────────────────────────────────────
   META CHIPS · Sistema reutilizable
───────────────────────────────────────── */

.pc-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  justify-content:center;
  margin-top:1px;
  min-height:0
}

.pc-meta-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:6px;
  background:
    linear-gradient(
      135deg,
      rgba(208,26,125,.10),
      rgba(208,26,125,.05)
    );
  border:1px solid rgba(208,26,125,.12);
  color:var(--pink);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1
}

/* Variantes de chip */
.pc-meta-chip--promo{
  background:
    linear-gradient(
      135deg,
      #FF0088,
      #D01A7D
    );
  color:#fff;
  border-color:transparent;
  box-shadow:
    0 2px 6px rgba(208,26,125,.25)
}

.pc-meta-chip--highlight{
  background:
    linear-gradient(
      135deg,
      #FFE600,
      #FFC400
    );
  color:#B4005A;
  border-color:transparent
}

body.dark .pc-meta-chip{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
  color:var(--pink-l)
}

body.dark .pc-meta-chip--promo{
  background:
    linear-gradient(
      135deg,
      #FF0088,
      #D01A7D
    );
  color:#fff
}

body.dark .pc-meta-chip--highlight{
  background:
    linear-gradient(
      135deg,
      #FFE600,
      #FFC400
    );
  color:#B4005A
}

/* ─────────────────────────────────────────
   PRECIO
───────────────────────────────────────── */

.pc-pill-price{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:1;

  min-width:0;

  padding:0 15px;

  background:
    linear-gradient(
      135deg,
      #FF0088,
      #D01A7D
    );

  color:#fff;

  font-size:1.18rem;
  font-weight:900;

  letter-spacing:-.6px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.pc-pill-price::before{
  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.14),
      transparent
    );

  pointer-events:none
}

.pc-price-old{
  font-size:.64rem;
  font-weight:700;

  color:rgba(255,255,255,.65);

  text-decoration:line-through
}

/* ─────────────────────────────────────────
   CATEGORÍAS
───────────────────────────────────────── */

.cat-section{
  margin-bottom:12px;

  transition:
    margin-bottom .38s cubic-bezier(.4,0,.2,1)
}

.cat-section.collapsed{
  margin-bottom:0
}

.cat-banner{
  position:relative;

  overflow:hidden;

  display:flex;
  align-items:center;
  gap:14px;

  padding:14px 18px;

  border-radius:calc(var(--r) + 2px);

  color:#fff;
  margin-bottom:12px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.10)
}

.cat-banner::before{
  content:'';

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.10),
      transparent 50%
    )
}

.cat-banner::after{
  content:'';

  position:absolute;

  bottom:0;
  left:0;
  right:0;

  height:55%;

  background:
    linear-gradient(
      to top,
      rgba(255,255,255,.18),
      transparent
    )
}

.cat-banner-ico{
  position:relative;
  z-index:1;

  width:56px;
  height:56px;

  border-radius:16px;

  background:
    rgba(255,255,255,.18);

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)
}

.cat-banner-ico img{
  width:40px;
  height:40px;

  filter:
    drop-shadow(0 3px 8px rgba(0,0,0,.20))
}

.cat-banner-info{
  position:relative;
  z-index:1
}

.cat-banner-name{
  font-size:16px;
  font-weight:900;
  letter-spacing:-.2px
}

.cat-banner-count{
  margin-top:2px;

  font-size:11px;
  font-weight:700;

  opacity:.8
}

/* ─────────────────────────────────────────
   COLORES CATEGORÍAS
───────────────────────────────────────── */

.cat-carne{
  background:
    linear-gradient(
      135deg,
      #b91c1c,
      #ef4444
    )
}

.cat-verdura{
  background:
    linear-gradient(
      135deg,
      #15803d,
      #22c55e
    )
}

.cat-fruta{
  background:
    linear-gradient(
      135deg,
      #4d7c0f,
      #84cc16
    )
}

.cat-lacteos{
  background:
    linear-gradient(
      135deg,
      #1d4ed8,
      #60a5fa
    )
}

.cat-limpieza{
  background:
    linear-gradient(
      135deg,
      #6d28d9,
      #a78bfa
    )
}

.cat-pan{
  background:
    linear-gradient(
      135deg,
      #9a3412,
      #f97316
    )
}

.cat-descartables{
  background:
    linear-gradient(
      135deg,
      #0e7490,
      #22d3ee
    )
}

.cat-almacen{
  background:
    linear-gradient(
      135deg,
      #92400E,
      #D97706
    )
}

.cat-bebidas{
  background:
    linear-gradient(
      135deg,
      #0369A1,
      #38BDF8
    )
}

.cat-bazar{
  background:
    linear-gradient(
      135deg,
      #BE185D,
      #F472B6
    )
}

.cat-electro{
  background:
    linear-gradient(
      135deg,
      #B45309,
      #FBBF24
    )
}

.cat-jugueteria{
  background:
    linear-gradient(
      135deg,
      #BE123C,
      #FB7185
    )
}

.cat-hogar{
  background:
    linear-gradient(
      135deg,
      #115E59,
      #2DD4BF
    )
}

/* ══════════════════════════════════════════
   SINGLE CARD LAYOUT (legacy — usar data-count)
══════════════════════════════════════════ */

.p-grid .pc:only-child{
  grid-column:1/-1
}

.p-grid .pc:only-child .pc-img-wrap{
  aspect-ratio:2/1
}

.p-grid .pc:only-child .pc-body{
  flex-direction:row;
  align-items:center;
  gap:14px
}

.p-grid .pc:only-child .pc-name{
  text-align:left;
  min-height:auto;
  flex:1
}

/* ══════════════════════════════════════════
   EMPTY + SKELETON
══════════════════════════════════════════ */

.sk{
  background:
    linear-gradient(
      90deg,
      #e4e4e4 25%,
      #f0f0f0 50%,
      #e4e4e4 75%
    );

  background-size:200% 100%;

  animation:sk-sh 1.4s ease-in-out infinite;

  border-radius:10px
}

body.dark .sk{
  background:
    linear-gradient(
      90deg,
      #251828 25%,
      #33203a 50%,
      #251828 75%
    )
}

@keyframes sk-sh{
  0%{
    background-position:-200% center
  }
  100%{
    background-position:200% center
  }
}

.empty{
  grid-column:1/-1;

  text-align:center;

  padding:60px 20px;

  color:var(--text2)
}

.empty svg{
  opacity:.12;
  margin-bottom:14px
}

.empty h3{
  font-size:1rem;
  font-weight:800;
  margin-bottom:6px
}

.empty p{
  font-size:.84rem;
  color:var(--text3)
}

body.dark{
  --cream:#130a10;
  --card:#1c1118;
  --border:#2d1a28;
  --g1:#1c1118;
  --g3:#2d1a28;
  --dark:#f0daea;
  --text:#f0daea;
  --text2:#b08aa0;
  --text3:#7a5568;
  --sh:0 2px 12px rgba(0,0,0,.5);
  --sh2:0 8px 28px rgba(0,0,0,.6);
  color-scheme:dark
}

body.dark .tabs-bar{
  background:#1c1118
}


/* ══════════════════════════════════════════
   SECTION PACKER · GRID GLOBAL DE 6 COLS
══════════════════════════════════════════ */

.sections-packer{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
  align-items:start
}

.sections-packer > .cat-section{
  margin-bottom:0
}

/* Span classes */
.span-1{grid-column:span 1}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 6}
.span-6{grid-column:span 6}

/* Grid fluido para productos dentro de spans */
.p-grid-fluid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px
}

/* Banner ajusta a ancho del span */
.sections-packer .cat-banner{
  margin-bottom:10px
}

/* Responsive: en tablet packer de 4 cols */
@media(max-width:1140px){
  .sections-packer{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px
  }
  .span-5,.span-6{grid-column:span 4}
  .span-4{grid-column:span 4}
}

/* En mobile <700: desactivar packer, volver a bloques */
@media(max-width:699px){
  .sections-packer{
    display:block
  }
  .sections-packer > .cat-section{
    margin-bottom:16px
  }
  .span-1,.span-2,.span-3,.span-4,.span-5,.span-6{
    grid-column:auto
  }

  /* Meta chips más compactos en mobile */
  .pc-meta-chip{
    font-size:.58rem;
    padding:2px 6px;
    border-radius:5px
  }
  .pc-meta-row{
    gap:4px
  }
  .pc-pill-price{
    font-size:1.12rem;
    padding:0 12px
  }
  .pc-unit-badge{
    font-size:.58rem;
    padding:1px 7px;
    bottom:30px;
    left:10px
  }
}