/* =========================================================================
   Deals page v2 (Phase 4, Oct 2026). Loads after tokens/base/components and
   pdp-v2.css, whose listing tile, filter and chip components it reuses.
   Page-level layout only; classes prefixed dl2-.
   ========================================================================= */

.dl2 { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--space-16); }


.dl2-basis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl2-picks { margin-top: var(--space-6); }

/* Top picks */
.dl2-picks { margin-bottom: var(--space-10); }
.dl2-picks__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.dl2-picks__head h2 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.dl2-picks__head span { font-size: var(--text-xs); color: var(--muted-fg); }
.dl2-picks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.dl2-pick { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.dl2-pick:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); text-decoration: none; }
.dl2-pick__img { aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--surface); overflow: hidden; position: relative; }
.dl2-pick__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.dl2-pick__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dl2-pick__who { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.dl2-pick__who b { font: 600 var(--text-xs) var(--font-mono); color: var(--primary-ink); }
.dl2-pick__title { font-size: var(--text-xs); color: var(--muted-fg); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dl2-pick__price { margin-top: auto; display: flex; align-items: baseline; gap: var(--space-2); }
.dl2-pick__price .ui-price { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.03em; }
.dl2-pick__save { font-size: var(--text-xs); line-height: var(--leading-snug); }
.dl2-pick__save b { color: var(--sold); }

/* Basis tabs reuse .pdp2-view; search box sits in the filter row */
.dl2-search { position: relative; display: inline-flex; align-items: center; height: 36px; min-width: 220px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); }
.dl2-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.dl2-search svg { width: 16px; height: 16px; margin-left: 10px; color: var(--muted-fg); flex: none; }
.dl2-search input { flex: 1; min-width: 0; height: 34px; padding: 0 10px 0 8px; font-size: var(--text-sm); border: 0; background: transparent; outline: none; }

/* Deal tile additions on top of .pdp2-tile */
.dl2-who { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-sm); font-weight: 600; color: var(--foreground); }
.dl2-who b { font: 600 11px var(--font-mono); color: var(--primary-ink); flex: none; }
.dl2-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl2-new { position: absolute; bottom: var(--space-2); left: var(--space-2); height: 22px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: var(--radius-sm); font: 600 10px var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--primary-ink); background: var(--primary-soft); border: 1px solid var(--primary-border); }
.dl2-il { position: absolute; bottom: var(--space-2); right: var(--space-2); height: 22px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: var(--radius-sm); font: 600 10px var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--down); background: var(--down-soft); }
.dl2-note .ui-basis { margin-left: 4px; vertical-align: 1px; }

/* How it works */
.dl2-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-12); }
.dl2-how div { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dl2-how b { display: block; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.dl2-how p { font-size: var(--text-sm); color: var(--muted-fg); line-height: var(--leading-body); }
.dl2-how-head { margin-top: var(--space-12); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.dl2-how-head + .dl2-how { margin-top: var(--space-4); }

@media (max-width: 1099px) {
  .dl2-picks__grid { grid-template-columns: 1fr; }
  .dl2-pick { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .dl2-basis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) var(--space-4); padding: 0 var(--gutter) 2px; scrollbar-width: none; }
  .dl2-how { grid-template-columns: 1fr; }
  .dl2-search { flex: 1 1 100%; }
}