/* ==========================================================================
   Cartly Base + Product Cards (rewritten)
   ========================================================================== */

/* --- Base / Layout tokens --- */
* { box-sizing: border-box; }

:root{
  --bg: #f9fafb;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #16a34a;
  --ink-strong: #0f172a;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial;
}

.container{ max-width:1100px; margin:auto; padding:1rem; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.hidden{ display:none !important; }

/* --- Focus ring (keyboard a11y) --- */
a:focus, button:focus, .tab:focus, .seg:focus, .input:focus{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header{ background:#fff; border-bottom:1px solid var(--line); padding:1rem 0; }
.logo-link{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.logo-icon{ width:2rem; height:2rem; stroke-width:2; stroke:var(--brand); }
.logo-text .brand{ font-size:1.5rem; font-weight:800; color:var(--brand); }
.logo-text .tagline{ font-size:.75rem; color:var(--muted); }

.nav-links{ display:flex; align-items:center; gap:.5rem; font-size:.875rem; }
.nav-links a{ color:#374151; text-decoration:none; }
.nav-links a:hover{ color:var(--ink); }
.nav-links .active{ font-weight:700; }
.basket-link{ padding:.25rem .75rem; border:1px solid var(--brand); color:var(--brand); border-radius:.375rem; }
#authSummary{ color:var(--muted); }

/* ==========================================================================
   Inputs / Buttons / Links
   ========================================================================== */
.input{
  padding:.6rem .75rem;
  border:1px solid #d1d5db;
  border-radius:.5rem;
  background:#fff;
  color:var(--ink);
}
.btn{
  padding:.6rem .9rem;
  border:1px solid #d1d5db;
  border-radius:.5rem;
  background:#fff;
  cursor:pointer;
}
.btn:hover{ background:#f3f4f6; }

.btn-primary{
  padding:.6rem 1rem;
  border-radius:.6rem;
  border:0;
  background:var(--ink-strong);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.link{ color:#374151; text-decoration:underline; }
.link:hover{ color:var(--ink); }

/* ==========================================================================
   Search
   ========================================================================== */
.search-section h1{ font-size:1.5rem; margin-bottom:.75rem; }
.search-controls{ display:flex; gap:.5rem; }
.search-controls input{
  flex:1; padding:.75rem; border:1px solid #d1d5db; border-radius:.5rem;
}
.search-controls button{
  padding:.75rem 1rem; background:var(--brand); color:#fff; border:none; border-radius:.5rem; cursor:pointer;
}
.search-controls button:hover{ background:#15803d; }
.scrape-status{ font-size:.75rem; color:var(--muted); margin-top:.5rem; }

.results-basket{ display:grid; gap:1rem; grid-template-columns:2fr 1fr; margin-top:1.5rem; }
@media (max-width:1024px){ .results-basket{ grid-template-columns:1fr; } }

/* Results grid */
.results-grid{
  display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}

/* ==========================================================================
   Product cards (match screenshot)
   ========================================================================== */
.card{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.card--product{}
.card-img{
  background:#f3f4f6;
  aspect-ratio: 4 / 3;
  display:flex; align-items:center; justify-content:center;
}
.card-img img{ width:100%; height:100%; object-fit:contain; }

.card-body{ padding:12px 14px; display:grid; gap:6px; }
.card-title{ font-weight:700; font-size:1rem; line-height:1.25; min-height:2.4em; }
.card-meta{ color:var(--muted); font-size:.9rem; }
.card-price{ color:var(--brand); font-weight:800; font-size:1.125rem; margin-top:2px; }
.card-unit{ color:var(--muted); font-size:.85rem; }

.btn.btn-add{
  margin-top:6px;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:8px; padding:8px 14px; font-weight:600; cursor:pointer;
}
.btn.btn-add:hover{ filter:brightness(.95); }

/* ==========================================================================
   Basket (sidebar)
   ========================================================================== */
#basket{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.04); padding:1rem;
}
#basket h2{ font-size:1.125rem; font-weight:600; margin:0 0 .5rem; }

#basket #basket-list > div{
  display:grid;
  grid-template-columns:1fr auto auto auto auto;
  align-items:center; column-gap:.35rem; padding:.25rem 0;
}
#basket [data-act="dec"], #basket [data-act="inc"]{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:1px solid #d1d5db; border-radius:4px; background:#fff; color:var(--ink); font-size:14px; line-height:1; cursor:pointer;
}
#basket [data-act="dec"]:hover, #basket [data-act="inc"]:hover{ background:#f3f4f6; }
#basket .w-6.text-center.text-sm{ width:28px; display:inline-block; text-align:center; }

#basket [data-act="rm"]{
  display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 8px;
  border:1px solid #dc2626; border-radius:4px; background:#fff; color:#dc2626; font-size:.85rem; cursor:pointer;
}
#basket [data-act="rm"]:hover{ background:#fee2e2; }

#basket #basket-total{ font-size:1.25rem; font-weight:800; }
#basket #checkout-btn{
  margin-top:1rem; width:100%; padding:.75rem 1rem;
  background:var(--ink-strong); color:#fff; border:none; border-radius:10px; font-weight:600;
}
#basket #checkout-btn:hover{ filter:brightness(1.05); }
#basket #checkout-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ==========================================================================
   Dashboard odds & ends kept for consistency
   ========================================================================== */
.deal{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  border:1px solid var(--line); border-radius:.5rem; padding:.5rem .6rem; background:#fff; }
.text-gray-500{ color:var(--muted); }
.text-sm{ font-size:.875rem; }
.font-semibold{ font-weight:600; }

/* Mobile polish */
@media (max-width: 430px) {
  .container { padding: 1rem; }
  .btn, .btn-primary, .basket-link { min-height: 44px; width: 100%; }
}


/* === Price alert badge + tooltip === */
.alert-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-right:6px;
  background:#dc2626; color:#fff; border-radius:999px; font-weight:800; font-size:.75rem;
}
.deal-left{ position:relative; }
.deal-left .tooltip{
  position:absolute; left:0; top:100%; margin-top:.35rem;
  background:#fff; border:1px solid #e5e7eb; border-radius:.5rem; padding:.5rem .6rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08); display:none; z-index:30; min-width: 220px;
}
.deal-left:hover .tooltip{ display:block; }
.tooltip-replace{
  margin-top:.35rem; border:1px solid #16a34a; color:#16a34a; background:#fff; border-radius:.375rem; padding:.25rem .5rem; cursor:pointer;
}


/* ==========================================================================
   DASHBOARD LAYOUT & COMPONENTS (non-functional styling only)
   Matches the visual shown in the screenshot while keeping existing JS intact.
   ========================================================================== */

/* Grid */
.dashboard-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
/* Default each card spans 4 columns on desktop */
.dashboard-grid > .card{ grid-column: span 4 / span 4; }
.dashboard-grid > .span-3{ grid-column: span 12 / span 12; }
/* Responsive: collapse to single column on small screens */
@media (max-width: 1024px){
  .dashboard-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dashboard-grid > .card{ grid-column: span 6 / span 6; }
  .dashboard-grid > .span-3{ grid-column: span 6 / span 6; }
}
@media (max-width: 640px){
  .dashboard-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .dashboard-grid > .card, .dashboard-grid > .span-3{ grid-column: span 1 / span 1; }
}

/* Card chrome */
.card-header{
  display:flex; align-items:center; gap:.75rem; justify-content:space-between;
  padding: .9rem 1rem; border-bottom:1px solid var(--line);
}
.card-title{ font-size:1.125rem; font-weight:700; margin:0; }
.card-sub{ display:flex; align-items:center; gap:.5rem; }
.card-body{ padding: 1rem; }
.card-actions{
  padding: .75rem 1rem; border-top:1px solid var(--line); display:flex; gap:.75rem; align-items:center; justify-content:flex-end;
}

/* Quick search form */
.list-add{ display:flex; gap:.5rem; }
.list-add .input{ flex:1; }
.muted{ color: var(--muted); font-size:.875rem; margin-top:.5rem; }

/* Lists */
.list{ display:grid; gap:.5rem; margin:0; padding:0; list-style:none; }
.list li{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.5rem .6rem; border:1px solid var(--line); border-radius:.5rem; background:#fff;
}

/* Tabs (Deals) */
.tabs{ display:flex; align-items:center; gap:.5rem; }
.tab{
  background:#fff; border:1px solid var(--line); border-radius:.5rem;
  padding:.4rem .7rem; cursor:pointer; font-weight:600; color:#374151;
}
.tab.is-active{ border-color: var(--ink-strong); color: var(--ink-strong); }

/* Badge (unread counter) */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 1.25rem; height:1.25rem; padding:0 .25rem;
  border-radius:999px; background:#dc2626; color:#fff; font-size:.75rem; font-weight:800;
}

/* Deals list */
.deal-list{ display:grid; gap:.5rem; margin:0; padding:0; list-style:none; }
.deal{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  border:1px solid var(--line); border-radius:.5rem; padding:.5rem .6rem; background:#fff;
}
.deal .meta{ color:var(--muted); font-size:.85rem; }

/* Reorder chips */
.chip-wrap{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .5rem;
  border:1px solid var(--line); border-radius:999px; background:#fff;
}
.chip-btn{ padding:.25rem .5rem; border-radius:999px; border:1px solid var(--brand); color:var(--brand); background:#fff; cursor:pointer; }
.chip-btn:hover{ background:#f0fdf4; }

/* Skeletons (loading shimmer) */
.skeleton-list{ display:grid; gap:.5rem; }
.skeleton{ height:44px; background:linear-gradient(90deg,#f3f4f6, #e5e7eb, #f3f4f6); background-size:200% 100%; animation:sheen 1.2s infinite; border-radius:.5rem; }
.skeleton-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.skeleton-chip{ width:110px; height:34px; border-radius:999px; background:linear-gradient(90deg,#f3f4f6, #e5e7eb, #f3f4f6); background-size:200% 100%; animation:sheen 1.2s infinite; }
@keyframes sheen{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* Segmented control (Budget) */
.segmented{ display:inline-flex; gap:.25rem; background:#fff; padding:.25rem; border:1px solid var(--line); border-radius:.5rem; }
.seg{
  background:transparent; border:0; padding:.35rem .6rem; border-radius:.375rem; cursor:pointer; color:#374151; font-weight:600;
}
.seg.is-active{ background:#0f172a; color:#fff; }

/* Progress bar (Budget) */
.progress{ width:100%; height:10px; background:#f3f4f6; border-radius:999px; overflow:hidden; }
.progress-bar{ height:100%; background: var(--brand); border-radius:999px; transition: width .3s ease; }
.budget-row{ display:grid; gap:.5rem; }
.budget-controls{ display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
.w-24{ width:6rem; }

/* Orders pill */
.pill{
  display:inline-flex; align-items:center; padding:.25rem .5rem;
  background:#f1f5f9; color:#0f172a; border-radius:999px; font-size:.75rem; font-weight:600;
}

/* Header dropdown (account) */
.dropdown{ position:relative; display:inline-block; }
.dropdown-toggle{ background:#fff; border:1px solid var(--brand); color:var(--brand); border-radius:.375rem; padding:.35rem .75rem; cursor:pointer; font-weight:600; }
.dropdown .caret{ margin-left:.25rem; }
.dropdown-menu{
  position:absolute; right:0; top: calc(100% + .4rem); min-width: 180px;
  background:#fff; border:1px solid var(--line); border-radius:.5rem; box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:.5rem; display:none; z-index:50;
}
.dropdown-menu a, .dropdown-menu button{
  display:block; width:100%; text-align:left; padding:.5rem .5rem; border:0; background:transparent; color:#111827; border-radius:.375rem; cursor:pointer; text-decoration:none;
}
.dropdown-menu a:hover, .dropdown-menu button:hover{ background:#f3f4f6; }
.dropdown-menu.open{ display:block; }

/* Nav separator dot spacing */
.nav-links span[aria-hidden="true"]{ margin: 0 .25rem; }


/* === Minimal additions for delivery chips & optimiser toggle === */
.fee-chip strong.upcase{ text-transform: uppercase; }
.fee-chip .warn{ color:#b45309; }   /* amber-600 */
.fee-chip .ok{ color:#16a34a; }     /* brand */
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:.75rem; }
.ml-2{ margin-left:.5rem; }
.opt-toggle{ margin-right:.5rem; }

/* --- Dashboard list formatting add-ons --- */
.chip.prio-1{ border-color:#bbf7d0; color:#16a34a; }   /* green */
.chip.prio-2{ border-color:#fde68a; color:#b45309; }   /* amber */
.chip.prio-3{ border-color:#fecaca; color:#dc2626; }   /* red */

.suggest-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--line); color:#111827;
  border-radius:.5rem; padding:.35rem .6rem; cursor:pointer; font-weight:600;
}
.suggest-btn:hover{ background:#f8fafc; }

.suggest-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 1.25rem; height:1.25rem; padding:0 .25rem;
  border-radius:999px; background:#ef4444; color:#fff; font-size:.75rem; font-weight:800;
}
.suggest-badge.has-matches{ box-shadow:0 0 0 2px #fee2e2 inset; }

/* Suggested-items popover & extras */
.suggest-popover{
  position:absolute; top:0; left:0; z-index:60; min-width:320px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12); display:none;
}
.suggest-popover.open{ display:block; }
.suggest-popover-inner{ padding:.75rem; display:grid; gap:.5rem; }
.suggest-title{ font-weight:700; font-size:.95rem; }
.suggest-list{ display:grid; gap:.4rem; max-height:320px; overflow:auto; }
.suggest-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; border:1px solid var(--line); border-radius:.5rem; padding:.4rem .5rem; }
.sr-info{ min-width:0; }
.sr-title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-meta{ font-size:.8rem; color:var(--muted); }
.sr-actions{ display:flex; align-items:center; gap:.5rem; }
.sr-price{ font-weight:800; }

/* badge colours (default red already on .suggest-badge) */
.suggest-badge.badge-yellow{ background:#f59e0b; color:#1f2937; }
.suggest-badge.badge-green{ background:#16a34a; color:#fff; }

/* strike-out style after adding */
.list-item--done span:not(.chip){
  text-decoration: line-through;
  color:#9ca3af;
}

.btn.btn-xsm{ padding:.25rem .5rem; border-radius:.375rem; border:1px solid #d1d5db; background:#fff; cursor:pointer; }
.btn.btn-small{ padding:.45rem .7rem; border-radius:.5rem; border:1px solid #d1d5db; background:#fff; cursor:pointer; }

/* Suggested-items popover & extras */
.suggest-popover{
  position:absolute; top:0; left:0; z-index:60; min-width:320px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12); display:none;
}
.suggest-popover.open{ display:block; }
.suggest-popover-inner{ padding:.75rem; display:grid; gap:.5rem; }
.suggest-title{ font-weight:700; font-size:.95rem; }
.suggest-list{ display:grid; gap:.4rem; max-height:320px; overflow:auto; }
.suggest-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; border:1px solid var(--line); border-radius:.5rem; padding:.4rem .5rem; }
.sr-info{ min-width:0; }
.sr-title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-meta{ font-size:.8rem; color:var(--muted); }
.sr-actions{ display:flex; align-items:center; gap:.5rem; }
.sr-price{ font-weight:800; }

/* badge colours (default red already on .suggest-badge) */
.suggest-badge.badge-yellow{ background:#f59e0b; color:#1f2937; }
.suggest-badge.badge-green{ background:#16a34a; color:#fff; }

/* strike-out style after adding */
.list-item--done span:not(.chip){
  text-decoration: line-through;
  color:#9ca3af;
}


/* --- Retailer hover menu BELOW the button --- */
.prod-group { position: relative; }
.retailer-wrap{ position: relative; }
.retailer-btn{
  display:inline-block; width:max-content;
  margin-bottom:.25rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.25rem .6rem; font-weight:600; cursor:pointer; color:#0f172a;
}
.retailer-btn:hover{ background:#f8fafc; }
.retailer-menu{
  display:none;
  margin-top:.4rem;
  flex-wrap: wrap; gap:.4rem;
}
.retailer-wrap:hover .retailer-menu,
.retailer-btn:focus + .retailer-menu{ display:flex; }

/* size badge */
.size-badge{
  width:max-content; font-weight:800; font-size:.75rem; letter-spacing:.02em;
  background:#0f172a; color:#fff; border-radius:999px; padding:.2rem .5rem; margin-bottom:.25rem;
}

/* Retailer chips hover (below the button) */
.prod-group { position: relative; }
.retailer-wrap{ position: relative; }
.retailer-btn{
  display:inline-block; width:max-content;
  margin-bottom:.25rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.25rem .6rem; font-weight:600; cursor:pointer; color:#0f172a;
}
.retailer-btn:hover{ background:#f8fafc; }
.retailer-menu{ display:none; margin-top:.4rem; flex-wrap: wrap; gap:.4rem; }
.retailer-wrap:hover .retailer-menu, .retailer-btn:focus + .retailer-menu{ display:flex; }
.chip.prio-1{ border-color:#bbf7d0; color:#16a34a; }
.chip.prio-2{ border-color:#fde68a; color:#b45309; }
.chip.prio-3{ border-color:#fecaca; color:#dc2626; }
.size-badge{ width:max-content; font-weight:800; font-size:.75rem; letter-spacing:.02em;
  background:#0f172a; color:#fff; border-radius:999px; padding:.2rem .5rem; margin-bottom:.25rem; }

  /* Popout "Suggested items — Other retailers" */
.retailer-wrap{ position:relative; display:inline-block; }
.retailer-btn{
  display:inline-flex; align-items:center;
  background:#fff; border:1px solid var(--line); color:#111827;
  border-radius:999px; padding:.35rem .6rem; font-weight:700; cursor:pointer;
}
.retailer-btn:hover{ background:#f8fafc; }
.suggest-popover{
  position:absolute; top: calc(100% + .4rem); left: 0; z-index:60; min-width: 320px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12); display:none;
}
.suggest-popover.open{ display:block; }
.suggest-popover-inner{ padding:.75rem; display:grid; gap:.5rem; }
.suggest-title{ font-weight:700; }
.suggest-list{ display:grid; gap:.4rem; max-height:320px; overflow:auto; }
.suggest-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; border:1px solid var(--line); border-radius:.5rem; padding:.4rem .5rem; }
.sr-info{ min-width:0; }
.sr-title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-meta{ font-size:.8rem; color:var(--muted); }
.sr-actions{ display:flex; align-items:center; gap:.5rem; }
.suggest-badge{ display:inline-flex; align-items:center; justify-content:center; min-width: 2.5rem; height:1.6rem; padding:0 .5rem; border-radius:999px; background:#ef4444; color:#fff; font-weight:800; }
.suggest-badge.badge-yellow{ background:#f59e0b; color:#1f2937; }
.suggest-badge.badge-green{ background:#16a34a; color:#fff; }

/* Popout should not be clipped by card overflow */
.card { overflow: visible; }
/* Popout placed below button; not absolutely positioned */
.suggest-popover{ position: relative; top:auto; left:auto; margin-top:.4rem; }

/* Ensure popout is visible and positioned under the button */
.card{ overflow: visible; }
.retailer-btn{
  display:inline-block; width:max-content;
  margin-bottom:.25rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.25rem .6rem; font-weight:600; cursor:pointer; color:#0f172a;
}
.suggest-popover{ min-width: 320px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.12); }
.suggest-popover .suggest-title{ font-weight:700; padding:.6rem .75rem .25rem; }
.suggest-popover .suggest-list{ padding:0 .75rem .75rem; display:grid; gap:.4rem; max-height:320px; overflow:auto; }
.suggest-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; border:1px solid var(--line); border-radius:.5rem; padding:.4rem .5rem; }
.chip.prio-1{ border-color:#bbf7d0; color:#16a34a; }   /* green */
.chip.prio-2{ border-color:#fde68a; color:#b45309; }   /* amber */
.chip.prio-3{ border-color:#fecaca; color:#dc2626; }   /* red */

/* HOTFIX v3: absolute popover visual + no layout shift */
.card { overflow: visible; }
.suggest-popover.absolute{
  position:absolute;
  background:#fff;
  border:1px solid var(--line, #e5e7eb);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  width: 280px;
  padding:.5rem;
}
.suggest-popover .suggest-title{
  font-weight:700; margin-bottom:.4rem;
}
.suggest-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.35rem .25rem; border-radius:.375rem; }
.suggest-row:hover{ background:#f9fafb; }
.sr-title{ font-weight:600; }
.muted{ color:#6b7280; }

/* Pop-out under the "Show retailers" button */
.retailer-wrap { position: relative; }
.suggest-popover {
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  min-width: 280px;
}
.suggest-popover .suggest-popover-inner{ padding:.75rem; display:grid; gap:.5rem; }
.suggest-popover .suggest-title{ font-weight:800; }
.suggest-popover .suggest-list{ display:grid; gap:.4rem; }
.suggest-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.sr-title{ font-weight:700; }
.sr-meta{ color:#6b7280; font-size:.85rem; }
.card{ overflow: visible; }

/* Optional compact popover width without touching header layout */
.cartly-basket-popover{ max-width: 320px; }

/* ========== Basket popover: match mock ========== */
.basket-popover .bp-card { padding: 1rem 1rem .9rem; display: grid; gap: .9rem; }

.basket-popover .bp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.35rem;
}
.basket-popover .bp-title { font-weight:800; font-size:1.35rem; }
.basket-popover .bp-title .bp-count { color:#6b7280; font-weight:600; margin-left:.25rem; }
.basket-popover .bp-edit { font-size:1rem; color:#2563eb; }

.basket-popover .bp-list { display:grid; gap: .9rem; max-height: 380px; overflow:auto; }
.basket-popover .bp-empty { color:#6b7280; margin:.25rem 0 .5rem; }

/* item row */
.basket-popover .bp-row {
  display:grid; grid-template-columns: 1fr auto; gap: 1rem; align-items:center;
  padding-bottom:.6rem; border-bottom:1px solid #eef0f2;
}
.basket-popover .bp-media { display:flex; gap:.8rem; align-items:flex-start; min-width:0; }
.basket-popover .bp-thumb {
  width:56px; height:56px; background:#f3f4f6; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex:0 0 56px;
}
.basket-popover .bp-thumb img { width:100%; height:100%; object-fit:contain; }
.basket-popover .bp-info { min-width:0; }
.basket-popover .bp-name {
  font-weight:800; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.basket-popover .bp-store { color:#6b7280; font-size:.93rem; margin-top:.15rem; }

/* alert */
.basket-popover .bp-alert { display:flex; align-items:center; gap:.45rem; margin-top:.5rem; }
.basket-popover .bp-alert-ico {
  width:20px; height:20px; border:1px solid #fecaca; color:#dc2626; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem;
}
.basket-popover .bp-alert-text { color:#dc2626; font-weight:700; font-size:1.02rem; }

/* right side: price + qty/delete */
.basket-popover .bp-side { display:grid; gap:.5rem; justify-items:end; }
.basket-popover .bp-price { font-weight:800; font-size:1.05rem; }

/* qty controls */
.basket-popover .bp-qty { display:inline-grid; grid-auto-flow:column; gap:.35rem; align-items:center; }
.basket-popover .bp-qbtn {
  width:34px; height:34px; background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  font-size:1.1rem; line-height:1; cursor:pointer;
}
.basket-popover .bp-qinput {
  width:52px; text-align:center; padding:.28rem .4rem; border:1px solid #e5e7eb; border-radius:8px;
}
.basket-popover .bp-trash {
  margin-left:.25rem; border:1px solid #e5e7eb; background:#fff; border-radius:8px; padding:.28rem .5rem; cursor:pointer;
}

/* summary + actions */
.basket-popover .bp-rule { height:1px; background:#eef0f2; margin-top:.2rem; }
.basket-popover .bp-summary { display:grid; gap:.35rem; }
.basket-popover .bp-subrow { display:flex; justify-content:space-between; font-weight:800; font-size:1.12rem; }
.basket-popover .bp-est { display:flex; justify-content:space-between; color:#6b7280; font-size:1rem; }

.basket-popover .bp-actions { display:flex; gap:.7rem; }
.basket-popover .bp-btn-secondary { flex:1; text-align:center; border-radius:12px; }
.basket-popover .bp-btn-primary   { flex:1; border-radius:12px; background:#2563eb; color:#fff; }

/* keep buttons consistent with your theme */
.btn { padding:.6rem .9rem; border:1px solid #e5e7eb; background:#fff; }



/* ==========================================================================
   Responsive (Mobile-first tweaks)
   ========================================================================== */

/* Base fluid containers */
.container{ max-width:1180px; margin:0 auto; padding:0 1rem; }
@media (max-width: 768px){
  .container{ padding:0 .75rem; }
}

/* Header: allow wrapping and tighter spacing on small screens */
@media (max-width: 768px){
  .header{ padding:.75rem 0; }
  .nav-links{ flex-wrap:wrap; gap:.35rem; }
  .nav-links span{ display:none; } /* hide the dot separators */
  .logo-text .tagline{ display:none; } /* compress tagline on small */
}

/* Icon-only Profile + Basket on mobile */
@media (max-width: 640px){
  /* Profile dropdown toggle becomes a circular icon */
  .dropdown .dropdown-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    padding:0;
    border-radius:999px;
    border:1px solid var(--line);
    font-size:0; /* hide text node */
    line-height:0;
  }
  .dropdown .dropdown-toggle .caret{ display:none !important; }
  .dropdown .dropdown-toggle::before{
    content:"";
    display:inline-block;
    width:22px; height:22px;
    background: currentColor;
    /* person icon via mask */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 12c2.761 0 5-2.686 5-6s-2.239-5-5-5-5 2.686-5 6 2.239 5 5 5Zm0 2c-4.418 0-8 2.239-8 5v3h16v-3c0-2.761-3.582-5-8-5Z"/></svg>') no-repeat center / contain;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 12c2.761 0 5-2.686 5-6s-2.239-5-5-5-5 2.686-5 6 2.239 5 5 5Zm0 2c-4.418 0-8 2.239-8 5v3h16v-3c0-2.761-3.582-5-8-5Z"/></svg>') no-repeat center / contain;
  }

  /* Basket button becomes an icon-only circle with count badge */
  .basket-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    padding:0 !important;
    border:1px solid var(--line) !important;
    border-radius:999px;
    gap:0 !important;
  }
  .basket-btn > span:nth-child(2){ display:none !important; } /* hide "Basket X" label */
  .basket-btn > span[aria-hidden="true"]{
    font-size:20px; line-height:1;
  }
  .basket-btn .basket-count{
    position:absolute;
    top:-6px; right:-6px;
    min-width:18px; height:18px;
    padding:0 4px;
    border-radius:999px;
    background:#ef4444; color:#fff;
    font-size:12px; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center;
  }
}

/* Cards/grid: stack to single column on small screens */
.grid, .results-basket, .dashboard-grid{
  display:grid; gap:1rem;
}
@media (max-width:1024px){
  .results-basket{ grid-template-columns:1fr; }
}
@media (max-width: 768px){
  .grid-cols-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .grid-cols-4, .grid-cols-3, .grid-cols-2{ grid-template-columns:1fr !important; }
}

/* Tables: horizontal scroll on narrow devices */
.table-wrapper{ overflow:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; }
th, td{ padding:.6rem; border-bottom:1px solid #eef0f2; }
@media (max-width:640px){
  th, td{ padding:.5rem .4rem; font-size:.92rem; }
}

/* Forms & controls */
.input, input[type="text"], input[type="email"], input[type="password"], select, textarea{
  width:100%;
}
.segmented{ flex-wrap:wrap; }
.segmented .seg{ flex:1 1 auto; min-width:calc(50% - .4rem); }

/* Minicart / popover on mobile: fit viewport width */
@media (max-width:640px){
  .basket-popover{
    position:fixed !important; left:50% !important; transform:translateX(-50%) !important;
    top:10px !important; width:92vw !important; min-width:auto !important; right:auto !important;
  }
}

/* Product cards: make images fluid */
.product-card img, .card img{ max-width:100%; height:auto; display:block; }

/* Footer spacing */
footer{ padding:1rem 0; }

.gradient-hero {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: white;
  padding: 4rem 2rem;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  text-align: center;
}
.gradient-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.gradient-hero p {
  opacity: 0.8;
}