/* ============================================================================
   Bonos page — product grid & cards only. Cart/drawer/modal styles live in
   assets/cart.css (shared across pages). Reuses tokens from assets/styles.css.
   ========================================================================== */

/* Page sits below the fixed 72px header */
.bonos-main { padding-top: 72px; background: var(--off); min-height: 100vh; }
/* Hidden until the client-session check confirms access (see assets/bonos.js) —
   avoids a flash of the catalog before an anonymous visitor is redirected. */
body:not(.authed) .bonos-main { display: none; }

/* ---- Page hero / intro ---- */
.bonos-hero { background: var(--grad-b); position: relative; overflow: hidden; }
.bonos-hero .container { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 56px; }
.bonos-hero .hero-bg-glow.g1 { width:480px; height:480px; background:#2DCBF8; top:-160px; right:-120px; }
.bonos-hero .hero-bg-glow.g2 { width:360px; height:360px; background:#7B3FE4; bottom:-140px; left:-100px; }
.bonos-hero .section-tag { background:rgba(255,255,255,.1); color:#7FDFFF; }
.bonos-hero .section-tag::before { background:#2DCBF8; }
.bonos-hero h1 { font-size: clamp(28px,4vw,44px); color:var(--white); line-height:1.15; margin-bottom:14px; }
.bonos-hero p { font-size:17px; color:rgba(255,255,255,.72); max-width:620px; line-height:1.7; }

/* ---- Product grid section ---- */
.products-section { padding: 56px 0 120px; }
.products-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:28px;
}
.products-toolbar .section-title { font-size: clamp(22px,3vw,30px); margin-bottom:0; }
.product-search {
  padding:11px 16px; border-radius:10px; border:1.5px solid var(--border);
  font-size:14px; font-family:inherit; color:var(--text); background:var(--white);
  min-width:240px; transition:border-color .2s;
}
.product-search:focus { outline:none; border-color:var(--blue); }
.products-filters { display:flex; gap:12px; flex-wrap:wrap; }
.category-filter {
  padding:11px 16px; border-radius:10px; border:1.5px solid var(--border);
  font-size:14px; font-family:inherit; color:var(--text); background:var(--white);
  cursor:pointer; transition:border-color .2s;
}
.category-filter:focus { outline:none; border-color:var(--blue); }
@media (max-width:520px) { .products-filters { width:100%; } .product-search, .category-filter { flex:1; min-width:0; } }

.product-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:20px;
}

/* ---- Product card ---- */
.product-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition: box-shadow .25s, transform .25s;
}
.product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.pc-media {
  height:132px; background:var(--off); display:flex; align-items:center; justify-content:center;
  padding:18px; border-bottom:1px solid var(--border);
}
.pc-media img { max-height:100%; max-width:100%; object-fit:contain; display:block; }
.pc-body { padding:18px 18px 20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.pc-title { font-size:15px; font-weight:700; color:var(--navy); line-height:1.3; }
.pc-desc { font-size:12.5px; color:var(--muted); line-height:1.55; }
.pc-badge {
  align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px;
  background:rgba(29,111,232,.08); color:var(--blue);
}
.pc-fixed-value {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:800; color:var(--navy);
}
.pc-details-link {
  align-self:flex-start; margin-top:-8px; background:none; border:none; cursor:pointer;
  padding:0; font-size:12px; font-weight:600; color:var(--blue); text-decoration:none;
}
.pc-details-link:hover { text-decoration:underline; }

/* ---- "Ver detalles" modal (assets/bonos.js openDetailModal) ---- */
.modal-box-wide { width:min(640px,100%); }
.dm-image { width:100%; max-height:160px; object-fit:contain; background:var(--off); border-radius:12px; margin-bottom:16px; }
.dm-facts { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.dm-row { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.dm-row b { color:var(--navy); font-weight:600; }
.dm-row span { color:var(--muted); text-align:right; }
.dm-section { padding-top:14px; margin-top:14px; border-top:1px solid var(--border); }
.dm-section h4 { font-size:13px; color:var(--navy); margin-bottom:8px; }
.dm-section p { font-size:13px; color:var(--muted); line-height:1.6; white-space:pre-line; }
.dm-richtext { font-size:13px; color:var(--muted); line-height:1.6; max-width:100%; overflow-wrap:break-word; }
.dm-richtext img { max-width:100%; height:auto; }
.dm-richtext > div { max-width:100% !important; margin:0 !important; border:none !important; padding:0 !important; }
.dm-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.dm-chip {
  font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px;
  background:rgba(29,111,232,.08); color:var(--blue);
}
.dm-place-line { font-size:12.5px; color:var(--muted); margin-top:4px; }
.dm-place-line b { color:var(--navy); }

/* Amount / preset controls */
.pc-field label { display:block; font-size:11px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.pc-amount-input {
  width:100%; padding:10px 12px; border-radius:9px; border:1.5px solid var(--border);
  font-size:14px; font-family:inherit; color:var(--text); background:var(--off);
}
.pc-amount-input:focus { outline:none; border-color:var(--blue); background:var(--white); }
.pc-range-hint { font-size:11px; color:var(--muted); margin-top:5px; }
.pc-presets { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pc-preset {
  padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--border); background:var(--white); color:var(--navy); transition:all .15s;
}
.pc-preset:hover { border-color:var(--blue); color:var(--blue); }
.pc-preset.active { background:var(--grad); color:var(--white); border-color:transparent; }

/* Quantity row (uses shared .qty-stepper from cart.css) */
.pc-qty-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pc-qty-row > span { font-size:12px; font-weight:600; color:var(--navy); }

.pc-add { width:100%; justify-content:center; margin-top:2px; }
.pc-error { font-size:11.5px; color:#dc2626; min-height:0; }

/* ---- Loading / error / empty states ---- */
.grid-state { text-align:center; padding:80px 20px; color:var(--muted); }
.grid-state h3 { color:var(--navy); font-size:18px; margin-bottom:8px; }
.grid-state p { font-size:14px; max-width:420px; margin:0 auto 18px; }
.skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.skeleton-card { height:320px; border-radius:var(--r-lg); background:var(--white); border:1px solid var(--border); overflow:hidden; position:relative; }
.skeleton-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.04), transparent);
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer { 0% { transform:translateX(-100%);} 100% { transform:translateX(100%);} }

@media (max-width:768px) {
  .products-section { padding:40px 0 100px; }
}