/* ==========================================================================
   AnimeSklep – strona "Ulubione" (page-ulubione.php), port 1:1 z
   beta/assets/css/favorites.css. Ładowany TYLKO na tej stronie (inc/favorites.php),
   po theme.css (tokeny, .as-card, .as-fav, .as-btn, .as-grid-products,
   .as-section, .as-h1/.as-h2, .as-kicker już tam są).
   ========================================================================== */

/* Bez overflow:hidden – patrz komentarz w category.css (poświata ucinana na
   krawędzi wyśrodkowanego kontenera; html/body{overflow-x:clip} wystarcza). */

/* ---------- Ikona ulubionych w headerze: stan aktywny (ta strona) ---------- */
.as-iconbtn--current{color:var(--pink);background:var(--g-900);box-shadow:0 0 0 1px var(--border)}
.as-iconbtn--current:hover{background:var(--g-900)}

/* ---------- Breadcrumbs ---------- */
.as-fv-crumbs{position:relative;padding:24px var(--gutter) 0;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--g-400);flex-wrap:wrap;z-index:1}
.as-fv-crumbs a{color:var(--g-400)}
.as-fv-crumbs a:hover{color:var(--v-400)}
.as-fv-crumbs span:not([aria-current]){color:var(--g-700)}
.as-fv-crumbs [aria-current]{color:var(--g-100)}

/* ---------- Nagłówek strony ---------- */
.as-fv-header{position:relative;padding:36px var(--gutter) 0}
.as-fv-kanji{position:absolute;right:60px;top:-30px;font-family:var(--font-display);font-weight:900;font-size:160px;line-height:1;color:var(--g-850);letter-spacing:-.04em;pointer-events:none;user-select:none;z-index:0}
.as-fv-header__intro{position:relative;display:flex;flex-direction:column;gap:14px;z-index:1}
.as-fv-header__intro .as-h1{margin:0}

/* ---------- Pusty stan ---------- */
.as-fv-empty{position:relative;margin:48px var(--gutter) 96px;padding:96px 40px;border:1px dashed var(--g-700);border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;background:radial-gradient(ellipse at top,rgba(124,58,237,.12),transparent 60%);z-index:1}
.as-fv-empty[hidden]{display:none}
.as-fv-empty__icon{width:72px;height:72px;border-radius:4px;background:var(--g-900);border:1px solid var(--border);display:grid;place-items:center;color:var(--pink)}
.as-fv-empty h2{font-family:var(--font-display);font-weight:900;font-size:32px;letter-spacing:-.02em;margin:0;color:var(--g-100)}
.as-fv-empty p{margin:0;max-width:440px;color:var(--g-400);line-height:1.55;text-wrap:pretty}
.as-fv-empty__ctas{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center}

/* ---------- Sekcja listy ---------- */
.as-fv-list{position:relative;padding:40px var(--gutter) 96px;display:flex;flex-direction:column;gap:24px;z-index:1}
.as-fv-list[hidden]{display:none}
.as-fv-list.is-loading{min-height:320px}
.as-fv-skeleton{aspect-ratio:4/6;border-radius:4px;background:linear-gradient(100deg,var(--g-900) 30%,var(--g-850) 50%,var(--g-900) 70%);background-size:200% 100%;animation:as-fv-shimmer 1.2s linear infinite;border:1px solid var(--border)}
@keyframes as-fv-shimmer{to{background-position:-200% 0}}
.as-fv-error{padding:24px;border:1px solid var(--border);border-radius:4px;color:var(--g-400);font-size:14px}

/* ---------- Karty ulubionych (rozszerzenia .as-card) ---------- */
.as-fv-card__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.as-fv-card__added{font-size:12px;color:var(--g-500);white-space:nowrap}
.as-fv-pricebox{display:flex;flex-direction:column;gap:2px;min-width:0}
.as-card.is-leaving{transition:opacity .3s ease,transform .35s var(--ease);opacity:0;transform:scale(.94);pointer-events:none}
.as-card.is-soldout .as-img{filter:grayscale(.7) brightness(.6)}
.as-fv-soldout-badge{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.as-fv-soldout-badge span{font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--g-100);background:rgba(11,12,15,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:10px 18px;border-radius:2px;border:1px solid var(--g-700)}
.as-fv-notify{height:44px;padding:0 16px;background:transparent;color:var(--g-500);border:1px solid var(--g-700);border-radius:4px;font-family:var(--font-sans);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:not-allowed;white-space:nowrap}
.as-fv-notify__icon{display:inline-flex}
/* Serce na karcie ulubionej jest zawsze "on" i zawsze widoczne (w theme.css
   .as-fav pokazuje się dopiero na hover karty) – tu to przycisk "usuń". */
#fvGrid .as-card .as-fav{opacity:1;transform:none}

/* ---------- Snackbar "Cofnij" ---------- */
.as-fv-snackbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:rgba(15,16,19,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:12px 12px 12px 18px;display:flex;align-items:center;gap:20px;font-size:14px;color:var(--g-300);white-space:nowrap;animation:as-fv-bar-in .4s var(--ease)}
.as-fv-snackbar[hidden]{display:none}
.as-fv-snackbar b{color:var(--g-100);font-weight:600}
.as-fv-snackbar__undo{height:36px;padding:0 14px;background:var(--g-900);border:1px solid var(--g-700);border-radius:4px;color:var(--v-400);font-family:var(--font-sans);font-weight:600;font-size:14px;cursor:pointer;transition:border-color .2s}
.as-fv-snackbar__undo:hover{border-color:var(--v-400)}
@keyframes as-fv-bar-in{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}

/* ==========================================================================
   Responsywność
   ========================================================================== */
@media (max-width:1199px){.as-fv-kanji{font-size:120px;right:24px}}
@media (max-width:1023px){.as-fv-kanji{display:none}}
@media (max-width:639px){
  .as-fv-header{padding-top:24px}
  .as-fv-snackbar{left:16px;right:16px;transform:none;bottom:16px;white-space:normal}
  @keyframes as-fv-bar-in{from{transform:translateY(100%)}to{transform:none}}
  .as-fv-empty{margin:32px 16px 64px;padding:56px 20px}
}