/**
 * cart-empty.css — pusty koszyk: panel z tekstem, dwoma przyciskami
 * i dwiema kartami „Najczęściej wybierane" (widok 2 makiety
 * cart-views.html).
 *
 * Wymaga tokens.css i base.css. Wszystko pod prefiksem .dc-cart-empty__;
 * .dc-icon (rejestr) dostrajana wyłącznie w selektorze potomnym.
 *
 * MAKIETA MÓWI CO I GDZIE, PROJEKT MÓWI JAK (design-audit.md, sekcja C):
 *   panel          rgba(255,255,255,.5) + blur(20px) saturate(165%),
 *                  r28, cień 0 12 44 .08 -> --dc-surface-glass-soft,
 *                  --dc-blur-lg, --dc-radius-28, --dc-shadow-xl (stopień 3
 *                  z C.4: panel sekcji) + --dc-shadow-inset-top
 *   siatka         minmax(0,1fr) 620px -> auto-fit po --dc-grid-min-lg:
 *                  przy 1440 dwie kolumny, przy 768 i 390 jedna (reguła 9)
 *   przyciski      ranga 1 (--dc-gradient-cta, a50, poświata, Inter 700)
 *                  i ranga 2 (szkło, --dc-border-line) z C.1 — makieta ma
 *                  tint sprzed audytu i r16, przepis systemu wygrywa
 *   karty          ten sam przepis co cross-sell.css: r22, --dc-surface-glass,
 *                  --dc-shadow-lg, scena 2/1 z object-fit: contain, przycisk
 *                  ikonowy rangi 1 bez poświaty (dwa obok siebie, ten sam
 *                  powód co tam); plakietka bestsellera to flaga z C.8
 *                  (pełne złoto, bez poświaty)
 *   BEZ „−15%"     i bez ceny przekreślonej — decyzja 2026-08-30 (product/
 *                  hero, cross-sell): zamiast tego cena za kilogram
 */

/* ==========================================================================
   1. PANEL
   .dc-cart-empty nie ma deklaracji: szerokość i oddech daje page-koszyk.php
   klasami .dc-container / .dc-section na opakowaniu strony (reguła 8).
   ========================================================================== */

/* Próg kolumny to --dc-measure-md (480 px), NIE --dc-grid-min-lg (320 px):
   panel ma dwoje dzieci (tekst i karty), a auto-fit liczy kolumny z
   szerokości — przy 320 px wnętrze 1080 px dawało TRZY kolumny i pustą
   trzecią (zmierzone 2026-08-31). Przy 480 px: 1440 -> 2 kolumny,
   768 i 390 -> 1 (wnętrze 608 / 230 px). */
.dc-cart-empty__panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-measure-md), 100%), 1fr));
  gap: var(--dc-space-48);
  align-items: center;
  padding: var(--dc-space-56) var(--dc-space-48);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

/* ==========================================================================
   2. TEKST
   ========================================================================== */

/* Pigułka „Koszyk pusty": szkło z obwódką i eyebrow w środku — kształt
   sekcji, pismo z C.8 (12 / 600 / --dc-tracking-widest, --dc-accent-strong). */
.dc-cart-empty__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-22);
  padding: var(--dc-space-8) var(--dc-space-16) var(--dc-space-8) var(--dc-space-12);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

.dc-cart-empty__tag-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-24);
  height: var(--dc-space-24);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent-a15);
}

/* Nagłówek 36 px z makiety -> --dc-display-3 (30–40); base.css dałby h1
   --dc-display-1 (58 px), za dużo dla zdania w panelu. */
.dc-cart-empty__heading {
  margin-block-end: var(--dc-space-16);
  font-size: var(--dc-display-3);
  line-height: var(--dc-leading-tight);
}

/* 16,5 px -> --dc-text-lg (skala scala 15 / 15,5 / 16,5). */
.dc-cart-empty__lead {
  max-width: var(--dc-measure-md);
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

.dc-cart-empty__perks {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-28);
}

.dc-cart-empty__perk {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  font-size: var(--dc-text-md);
  color: var(--dc-text-muted);
}

.dc-cart-empty__perk .dc-icon {
  flex: none;
  color: var(--dc-success);
}

/* Kwota progu we własnym elemencie bez łamania: przy 390 px „1 399,00 zł"
   łamało się na „1" i „399,00 zł" — dwie różne liczby dla oka (uwaga
   w section-conventions.md o liczbie i jednostce). */
.dc-cart-empty__amount-inline {
  white-space: nowrap;
}

.dc-cart-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-14);
}

/* Wspólna baza obu rang: r16, Inter, wysokość z paddingu 14 (pasmo
   44–48 px z C.1). Lista przejść niesie wszystko, co się zmienia (C.2). */
.dc-cart-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-8);
  padding: var(--dc-space-14) var(--dc-space-28);
  border: var(--dc-border) solid transparent;
  border-radius: var(--dc-radius-16);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-cart-empty__cta:focus-visible {
  border-radius: var(--dc-radius-16);
}

.dc-cart-empty__cta:active {
  transform: scale(0.97);
}

/* Ranga 1 — jedyna akcja „naprzód" w panelu. */
.dc-cart-empty__cta--primary {
  border-color: var(--dc-accent-a50);
  background-image: var(--dc-gradient-cta);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
  color: var(--dc-on-accent);
  font-weight: var(--dc-weight-bold);
}

.dc-cart-empty__cta--primary:hover {
  background-color: var(--dc-accent-a50);
  color: var(--dc-on-accent);
}

.dc-cart-empty__cta--primary:active {
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

.dc-cart-empty__cta--primary .dc-icon {
  flex: none;
  color: var(--dc-on-accent);
}

/* Ranga 2 — alternatywa obok głównego. */
.dc-cart-empty__cta--secondary {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text);
  font-weight: var(--dc-weight-medium);
}

.dc-cart-empty__cta--secondary:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

.dc-cart-empty__cta--secondary:active {
  box-shadow: var(--dc-shadow-inset-press);
}

.dc-cart-empty__phone {
  margin-block-start: var(--dc-space-16);
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
}

/* Numer telefonu: pogrubiony, w kolorze tekstu, bez podkreślenia — jak
   w makiecie i w help-cta. `color` w liście przejść, bo bez tego a:hover
   z base.css zmieniałby go skokiem. */
.dc-cart-empty__phone-link {
  color: var(--dc-text);
  font-weight: var(--dc-weight-bold);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-cart-empty__phone-link:hover {
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   3. KARTY „NAJCZĘŚCIEJ WYBIERANE"
   Nadtytuł jak w C.8, siatka auto-fit po --dc-grid-min-sm (dwie karty
   w kolumnie 620 px, jedna pod drugą przy 390), reszta wg cross-sell.css.
   ========================================================================== */

.dc-cart-empty__eyebrow {
  margin-block-end: var(--dc-space-16);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

.dc-cart-empty__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-20);
}

.dc-cart-empty__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface-glass);
  -webkit-backdrop-filter: var(--dc-blur-xl);
  backdrop-filter: var(--dc-blur-xl);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

/* Scena zdjęcia: kadr 2/1, object-fit: contain i biel STAŁA w obu motywach
   (--dc-surface-on-dark) — uzasadnienie pomiarem w cross-sell.css, sekcja 4. */
.dc-cart-empty__stage {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background-color: var(--dc-surface-on-dark);
}

.dc-cart-empty__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Flaga bestsellera: pełne złoto + --dc-on-accent, bez poświaty (C.8).
   Makieta: 12 / 800, padding 6/11, r8, w rogu 12/12. */
.dc-cart-empty__flag {
  position: absolute;
  top: var(--dc-space-12);
  left: var(--dc-space-12);
  padding: var(--dc-space-6) var(--dc-space-10);
  border-radius: var(--dc-radius-8);
  background-color: var(--dc-accent);
  color: var(--dc-on-accent);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
}

.dc-cart-empty__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--dc-space-22);
}

/* Tytuł JEST nagłówkiem (h2): pod nim opis, cena i przycisk, a panel ma
   własny h1 (reguła 20). Rozmiar jak tytuł karty w cross-sell. */
.dc-cart-empty__title {
  margin-block-end: var(--dc-space-6);
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-snug);
}

.dc-cart-empty__note {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-subtle);
}

.dc-cart-empty__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-12);
  margin-block-start: auto;
}

.dc-cart-empty__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--dc-space-6);
}

.dc-cart-empty__amount {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  font-variant-numeric: tabular-nums;
  color: var(--dc-text);
}

.dc-cart-empty__gross {
  font-size: var(--dc-text-2xs);
  color: var(--dc-text-subtle);
}

.dc-cart-empty__per-kg {
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text-secondary);
}

/* Przycisk ikonowy rangi 1 — przepis z cross-sell.css, sekcja 7, łącznie
   z brakiem poświaty (dwa takie przyciski obok siebie). */
.dc-cart-empty__submit {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-48);
  height: var(--dc-space-48);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-16);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  box-shadow: var(--dc-shadow-inset-top);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-cart-empty__submit .dc-icon {
  color: var(--dc-on-accent);
}

.dc-cart-empty__submit:hover:enabled {
  background-color: var(--dc-accent-a50);
}

.dc-cart-empty__submit:active:enabled {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

.dc-cart-empty__submit:disabled {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-sunken);
  background-image: none;
  color: var(--dc-text-subtle);
  box-shadow: none;
  cursor: not-allowed;
}

.dc-cart-empty__submit:disabled .dc-icon {
  color: var(--dc-text-subtle);
}