/* /public/customer/products.css (spacious layout, polished controls) */

/* ---------- Utilities ---------- */
[hidden]{ display:none !important; }
*{ box-sizing:border-box; }
html,body{ height:100%; }

/* ---------- Tokens ---------- */
:root{
  --gap: 16px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-md: 0 10px 30px rgba(3,8,20,.12);
  --ring: 0 0 0 3px rgba(108,198,255,.35);

  --surface: var(--bg2, #0e1630);
  --surface-elev: var(--bg2, #0e1630);
  --on-surface: var(--text, #e8eefc);
  --whatsapp: #25D366;
}
html[data-theme="light"],
html[data-theme="sunflower"],
html[data-theme="contrast"]{
  --surface:#fff; --surface-elev:#fff; --on-surface:#0b1220;
}
@supports (background: color-mix(in srgb, white 10%, black)){
  :root{
    --surface:      color-mix(in srgb, var(--bg) 80%, white 20%);
    --surface-elev: color-mix(in srgb, var(--bg) 70%, white 30%);
  }
}

/* ---------- Base ---------- */
body.products-body{
  margin:0;
  background: var(--bg, #0b1220);
  color: var(--text, #0b1220);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ---------- Topbar / Toolbar (unchanged) ---------- */
.topbar{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border,rgba(0,0,0,.12)); backdrop-filter:blur(6px); }
.topbar .spacer{ flex:1; }
.topbar .link{ color:var(--text,#0b1220); text-decoration:none; opacity:.9; padding:8px 10px; border-radius:12px; }
.topbar .link:hover,.topbar .link:focus{ outline:none; box-shadow:var(--ring); }

.hero{ padding:10px 18px 0; }
.hero h1{ margin:6px 0 2px; font-size: clamp(22px,3vw,28px); }
.subtitle{ color:var(--muted,#6b7280); margin:0 0 10px; }

.toolbar{
  position:sticky; top:0; z-index:5;
  display:flex; flex-wrap:wrap; gap:var(--gap);
  padding:10px 18px 14px;
  background: linear-gradient(180deg, var(--bg,#fff) 75%, transparent);
}
.toolbar input[type="search"], .toolbar select{
  background: var(--glass2,rgba(0,0,0,.04));
  color: var(--text,#0b1220);
  border:1px solid var(--border,rgba(0,0,0,.14));
  border-radius:12px; padding:12px 14px; min-width:200px; outline:none;
}
.toolbar input[type="search"]::placeholder{ color: color-mix(in srgb,var(--text) 55%, transparent); }
.toolbar input[type="search"]:focus, .toolbar select:focus{ box-shadow: var(--ring); }

.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }

/* ---------- Grid (more space: ~3 per row) ---------- */
.content{ padding:10px 18px 96px; }
.grid{
  display:grid; gap:var(--gap);
  /* wider min width so we don’t squeeze the action buttons */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: stretch;
}
@media (max-width: 1180px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
}
.grid > *{ min-height:100%; }
.empty{ color:var(--muted,#6b7280); margin:20px 0; }

/* ---------- Cards ---------- */
.card{
  border:1px solid var(--border,rgba(0,0,0,.10));
  background: linear-gradient(180deg, var(--glass,rgba(0,0,0,.03)), var(--glass2,rgba(0,0,0,.02)));
  border-radius:var(--radius); padding:16px;
  display:grid; gap:12px; box-shadow:var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 14px 38px rgba(3,8,20,.16); }

.card-img{ width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--glass2,rgba(0,0,0,.05)); display:grid; place-items:center; }
.card-img img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* Titles */
.card-top{ display:grid; gap:6px; }
.card-title{ margin:0; font-size:1.06rem; line-height:1.2; font-weight:700; }
.card-sub{ margin:0; color:var(--muted,#6b7280); font-size:.92rem; }

/* Chips */
.badges{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.badges li{ border:1px solid var(--border,rgba(0,0,0,.12)); background:var(--glass2,rgba(0,0,0,.05)); padding:6px 12px; border-radius:999px; font-size:.82rem; color:inherit; }

/* Price row */
.card-price{
  display:flex; align-items:baseline; gap:10px;
  padding-top:10px; margin-top:2px;
  border-top:1px dashed var(--border,rgba(0,0,0,.12));
}
.card-price .label{ color:var(--muted,#6b7280); font-size:.88rem; }
.card-price .value{ font-size:1.18rem; font-weight:800; letter-spacing:.2px; }
.card-price .unit{ color:var(--muted,#6b7280); font-size:.88rem; }

/* Actions row: clean 3 columns */
.card-actions{
  display:grid; grid-template-columns: auto 1fr auto;
  gap:10px; align-items:center;
}

/* Size select (unit-select) */
.unit-select{
  border:1px solid var(--border,rgba(0,0,0,.14));
  background: var(--surface,#fff);
  color: var(--text,#0b1220);
  border-radius:12px; padding:10px 12px;
  min-width: 170px; /* prevent squish */
  outline:none;
}
.unit-select:focus{ box-shadow: var(--ring); }

/* Buttons */
.btn{
  appearance:none;
  border:1px solid var(--border,rgba(0,0,0,.14));
  background: var(--glass2,rgba(0,0,0,.04));
  color: inherit;
  padding:11px 14px; border-radius:12px; cursor:pointer;
  font-weight:600; white-space:nowrap;
  transition: transform .06s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline:none; box-shadow:var(--ring); }
.btn.primary{ background:var(--primary,#2563eb); border-color:transparent; color:#fff; }
.btn.ghost{ background:transparent; }
.btn.danger{ background:var(--danger,#dc2626); border-color:transparent; color:#fff; }

/* Make the “Add 1 can” consistent */
.card .btn.add{ min-width: 120px; text-align:center; }

/* ---------- Floating button ---------- */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:8;
  border:none; border-radius:999px; padding:12px 16px;
  background:var(--accent,#22c55e); color:#03121a; cursor:pointer;
  box-shadow:var(--shadow-md);
}
.fab:focus{ box-shadow: var(--ring); }

/* ---------- Quote Panel ---------- */
.quote-panel{
  position:fixed; top:0; right:0; height:100%; width:min(380px,92vw);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
  color: var(--on-surface);
  border-left:1px solid var(--border,rgba(0,0,0,.12));
  box-shadow:var(--shadow-md);
  display:grid; grid-template-rows:auto 1fr auto; z-index:9;
}
.quote-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border,rgba(0,0,0,.12)); color:var(--on-surface); font-weight:700; }
.icon-btn{ background:transparent; border:1px solid var(--border,rgba(0,0,0,.18)); color:var(--on-surface); border-radius:10px; padding:6px 10px; cursor:pointer; }
.icon-btn:hover{ filter:brightness(1.05); }
.icon-btn:focus{ outline:none; box-shadow: var(--ring); }

.quote-body{ padding:12px 16px; overflow:auto; color:var(--on-surface); }
.quote-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.quote-item{ border:1px solid var(--border,rgba(0,0,0,.12)); background:var(--glass,rgba(0,0,0,.05)); border-radius:var(--radius-sm); padding:10px; display:grid; gap:6px; }
.quote-item .row{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.quote-total{ margin-top:12px; display:flex; justify-content:space-between; font-size:1.05rem; font-weight:700; }

.quote-footer{
  display:grid; grid-template-columns: 1fr auto auto;
  gap:10px; padding:12px 16px; border-top:1px solid var(--border,rgba(0,0,0,.12));
}

/* WhatsApp emphasis */
#btnRequestQuote{
  background: var(--whatsapp);
  border: 1px solid color-mix(in srgb, var(--whatsapp) 70%, black 30%);
  color:#05210f; font-weight:800;
}
#btnRequestQuote:hover{ filter:brightness(1.03); }
#btnRequestQuote:focus{ box-shadow: var(--ring); }

/* Print & Clear */
#btnClearQuote.btn{ background: var(--danger,#dc2626); border-color:transparent; color:#fff; }

/* Mobile quote panel */
@media (max-width:720px){
  .quote-panel{
    width:100%; height:min(62vh,560px); top:auto; bottom:0; right:0; left:0;
    border-left:none; border-top:1px solid var(--border,rgba(0,0,0,.12));
    border-radius:16px 16px 0 0;
  }
  .quote-footer{ grid-template-columns: 1fr 1fr auto; }
}

/* ---------- Product Dialog (unchanged except spacing) ---------- */
.product-dialog{
  width:min(920px,96vw); max-height:90vh;
  border:1px solid var(--border,rgba(0,0,0,.12));
  border-radius:18px; padding:0;
  background: color-mix(in srgb, var(--bg) 78%, white 22%);
  color: var(--on-surface); z-index:10;
}
.product-dialog::backdrop{ background: rgba(0,0,0,.55); }
.pd-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border,rgba(0,0,0,.12)); color:var(--on-surface); font-weight:700; }
.pd-content{ padding:12px 14px; display:grid; gap:12px; color:var(--on-surface); }
.pd-media{ margin:0; border-radius:12px; overflow:hidden; background:var(--glass2,rgba(0,0,0,.06)); }
.pd-media img{ width:100%; max-height:300px; object-fit:cover; object-position:center; display:block; }
.pd-tagline{ color: color-mix(in srgb, var(--on-surface) 70%, transparent); margin:0; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.chips li{ border:1px solid var(--border,rgba(0,0,0,.12)); background:var(--glass2,rgba(0,0,0,.05)); padding:6px 12px; border-radius:999px; font-size:.82rem; color:var(--on-surface); }

.tabs{ display:flex; gap:10px; border-bottom:1px solid var(--border,rgba(0,0,0,.12)); }
.tab{ background:transparent; color:var(--on-surface); border:1px solid transparent; padding:8px 12px; border-radius:10px 10px 0 0; cursor:pointer; }
.tab.is-active{ border-color:var(--border,rgba(0,0,0,.12)); border-bottom-color:transparent; background:var(--glass2,rgba(0,0,0,.06)); }
.tab-panel{ display:none; padding:12px 0; color:var(--on-surface); }
.tab-panel.is-active{ display:block; }

.specs{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 16px; margin:0; }
.specs dt{ color: color-mix(in srgb, var(--on-surface) 70%, transparent); }
.specs dd{ margin:0; }

.pd-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border-top:1px solid var(--border,rgba(0,0,0,.12)); color:var(--on-surface); }
.price{ display:flex; align-items:baseline; gap:8px; }
.price .per{ color: color-mix(in srgb, var(--on-surface) 70%, transparent); }
.price .unit{ color: color-mix(in srgb, var(--on-surface) 70%, transparent); font-size:.9rem; }

/* ---------- Skeleton ---------- */
.skeleton{ position:relative; overflow:hidden; background:var(--glass2,rgba(0,0,0,.06)); border-radius:8px; }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; }
@keyframes shimmer{ to{ transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .card, .fab{ transition:none; }
  .skeleton::after{ animation:none; }
}