/* Mėgstamiausi — frame `Megstamos prekės` (347:12998), canvas 1728x1631. Offsets are
   frame-absolute values from design/figma-cache/frames/megstamos-prekes.json; the section
   starts at the header bottom (y72) and the footer sits at 1271, so the block is 1199px tall
   at minimum. Text tops are ink tops (Figma cap-trims). The cards are the shared `.pcard`
   (home.css) in the catalogue's 4-up rhythm: 267px columns, 24px gaps. */

.wish { position: relative; padding: 139px 0 120px; min-height: 1199px; }

.wish__crumbs {                                       /* Group 5360 @294,88 — 12/15.6 */
  position: absolute; left: 294px; top: 16px; height: 16px;
  display: flex; align-items: center; gap: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.wish__crumbs a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.wish__crumbs a:hover { color: var(--accent); }
.wish__crumbs [aria-current] { color: var(--muted); font-weight: 400; }
.wish__crumbs img { width: 5px; height: 8px; margin: -0.5px -0.75px; flex: none; }

.wish__title {                                        /* 376:11149 @296,143 — 32/41.7 ls3.2 */
  /* the comp's text box spans the container (1138); it stops short of the „Ištrinti visus"
     pill at 1274 so the two boxes never overlap (design/DEVIATIONS.md) */
  position: absolute; left: 296px; top: 62.4px; width: 960px; margin: 0;
  text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.wish__clear { position: absolute; left: 1274px; top: 57px; }
.wish__clear-btn {                                    /* Frame 68 @1274,129 — 160x50, r32 */
  display: inline-flex; align-items: center; justify-content: center;
  width: 160px; height: 50px; border: 1px solid var(--accent); border-radius: 32px;
  background: none; color: var(--accent);
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.23px;
  transition: background-color var(--t-tint) var(--ease-out),
              color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.wish__clear-btn:hover, .wish__clear-btn:focus-visible {               /* ASSETS 452:4469 */
  background: var(--ink-hover); border-color: var(--ink-hover); color: var(--cream);
}

.wish-grid {                                          /* Component 35 … @294,211 — 4 x 267 */
  width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 267px); gap: 24px;
}

/* A card leaving the list collapses, it does not blink out (the cart page's pattern). */
.wish-grid .pcard {
  transition: opacity var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.wish-grid .pcard.is-removing { opacity: 0; transform: scale(0.97); }

/* ---- Empty: no frame in the file (DEVIATIONS.md) — the cart page's copy + CTA ---- */
.wish--empty { min-height: 600px; }
.wish--empty .wish-empty__lead {
  position: absolute; left: 294px; top: 150px; margin: 0; color: var(--ink);
  font-weight: 300; font-size: 16px; line-height: 20.83px; letter-spacing: 1.6px;
}
.wish--empty .wish-empty__cta {
  position: absolute; left: 294px; top: 200px; width: 364px; height: 47px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--cream); border-radius: 40px;
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.23px;
  transition: background-color var(--t-tint) var(--ease-out);
}
.wish--empty .wish-empty__cta:hover, .wish--empty .wish-empty__cta:focus-visible { background: var(--ink-hover); }

/* ---- Mobile: no 360 comp for this frame — the category listing's reflow, declared in
       design/DEVIATIONS.md: its 2-up mini cards (mobile.css `Listing grids`) at x4 / x182. ---- */
@media (max-width: 767px) {
  .wish, .wish--empty { min-height: 0; padding: 16px 0 48px; }
  .wish__crumbs, .wish__title, .wish__clear,
  .wish--empty .wish-empty__lead, .wish--empty .wish-empty__cta {
    position: static; left: auto; top: auto; width: auto; margin-inline: 16px;
  }
  .wish__title { margin: 24px 16px 0; font-size: 24px; line-height: 32px; letter-spacing: 2.4px; }
  .wish__clear { margin-top: 16px; }
  .wish-grid { width: auto; margin: 24px 4px 0; }   /* the section is full-bleed: 4 + 352 + 4 */
  .wish--empty .wish-empty__lead { margin-top: 24px; }
  /* full row between the gutters, like the cart's empty CTA — inline-flex hugged the label */
  .wish--empty .wish-empty__cta { display: flex; width: auto; margin-top: 16px; }
}