/* ── SUMMARY STRIP ── */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

/* ── TIER SECTION ── */
.tier-section {
  margin-bottom: 32px;
}
.tier-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}
.tier-header h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.tier-header .tier-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 2px 8px;
  border-radius: 100px;
}
.tier-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.tier-tag-stock_up { background: var(--red-light); color: var(--red); }
.tier-tag-buy { background: var(--green-light); color: var(--green); }
.tier-tag-buy_some { background: var(--amber-light); color: var(--amber); }
.tier-tag-skip_for_now { background: var(--bg-hover); color: var(--text-muted); }

/* ── DEAL CARDS GRID ── */
.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

/* ── DEAL CARD ── */
.deal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.deal-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #cdd1d8;
}

/* Row 1: store badge + product name */
.deal-row-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.deal-product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  flex: 1;
}

/* Store badge */
.store-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.store-badge-costco { background: var(--costco-light); color: var(--costco); }
.store-badge-sams { background: var(--sams-light); color: var(--sams); }

/* Row 2: price + discount + expiry */
.deal-row-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.deal-price {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}
.deal-discount {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  background: var(--green-light);
  color: var(--green);
}
.deal-expiry {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--mono);
  white-space: nowrap;
}
.deal-expiry.urgent { color: var(--red); }
.deal-expiry.soon { color: var(--amber); }
.deal-expiry.ok { color: var(--text-muted); }

/* Row 3: per-unit */
.deal-per-unit {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* Row 4: quantity advice callout */
.deal-quantity {
  background: var(--blue-bg);
  border: 1px solid var(--blue-light);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Row 5: consumption */
.deal-consumption {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Row 6: savings */
.deal-savings {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 4px;
}

/* Expandable detail */
.deal-detail-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 0 0;
  border: none;
  background: none;
  font-family: var(--sans);
  transition: color 0.15s;
}
.deal-detail-toggle:hover { color: var(--text-secondary); }
.deal-detail-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}
.deal-detail-toggle.open svg { transform: rotate(180deg); }

.deal-detail {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.deal-detail.open { display: block; }

.deal-reasoning {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.deal-history {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── SKIP SECTION (COLLAPSED) ── */
.tier-section-collapsed .deal-grid { display: none; }
.tier-section-collapsed.open .deal-grid { display: grid; }
.tier-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 0;
  transition: color 0.15s;
}
.tier-collapse-toggle:hover { color: var(--text-secondary); }
.tier-collapse-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.tier-section-collapsed.open .tier-collapse-toggle svg { transform: rotate(180deg); }

/* ── AVAILABILITY + LIMIT ── */
.deal-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.deal-avail, .deal-limit {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-muted);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .deal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .summary-strip { grid-template-columns: 1fr; }
}