:root{
  --p24-bg:#f6f7f9;
  --p24-card:#ffffff;
  --p24-text:#111827;
  --p24-muted:#6b7280;
  --p24-border:#e5e7eb;
  --p24-shadow:0 2px 8px rgba(0,0,0,.06);
  --p24-radius:14px;
  --p24-pink:#ff2e63;
  --p24-green:#16a34a;
}

*{ -webkit-tap-highlight-color:transparent; }
.p24zuApp, .p24zuProducts{ font-family:inherit; color:var(--p24-text); }

.p24zuLoading{ padding:10px 12px; color:var(--p24-muted); font-size:13px; }

.p24zuGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media(min-width:900px){
  .p24zuGrid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.p24zuCard{
  background:var(--p24-card);
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  overflow:hidden;
  border:1px solid var(--p24-border);
}
.p24zuCard a{ text-decoration:none; color:inherit; }

.p24zuSelectBtn,
.p24zuAdd{
  border:none;
  background:var(--p24-pink);
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:8px 14px;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(255,46,99,0.30);
}

.p24zuStepper{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--p24-border);
  background:#fff;
  padding:6px 10px;
  border-radius:12px;
}
.p24zuStepBtn{
  border:none; background:#f3f4f6; border-radius:10px;
  width:30px; height:30px; font-weight:900; cursor:pointer;
  color:var(--p24-text);
}
.p24zuQty{ font-weight:900; min-width:14px; text-align:center; }

/* =========================
   Variant Bottom Sheet
========================= */
.p24zuVarOverlay{
  position:fixed; inset:0;
  background: rgba(17,24,39,.35);
  z-index: 9998;
}
.p24zuVarSheet{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index: 9999;
  background:#fff;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  box-shadow: 0 -18px 60px rgba(0,0,0,.22);
  max-height: 78vh;
  overflow:hidden;
}
.p24zuVarHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--p24-border);
}
.p24zuVarTitle{ font-weight: 900; font-size: 14px; }
.p24zuVarClose{
  width:34px; height:34px;
  border:none; background:#f3f4f6;
  border-radius:12px; cursor:pointer;
  font-weight:900;
}
.p24zuVarBody{
  padding:10px 14px 16px;
  overflow:auto;
  max-height: calc(78vh - 58px);
}
.p24zuVarRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed rgba(0,0,0,.06);
}
.p24zuVarLabel{ font-size:13px; font-weight:900; line-height:1.2; }
.p24zuVarPrice{ font-size:12px; color:var(--p24-muted); margin-top:4px; }
.p24zuVarRight{ display:flex; align-items:center; justify-content:flex-end; }
.p24zuSelectBtn:disabled{
  background:#e5e7eb;
  color:#9ca3af;
  box-shadow:none;
  cursor:not-allowed;
}