/* =========================================================================
   DR!p Store — Premium polish layer
   Adds: page transitions, skeletons, upgraded toast, install banner.
   Loaded AFTER editorial.css so it can safely override.
   ========================================================================= */

/* ---------- Page transitions (View Transitions API) ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}

@keyframes drip-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
main > * {
  animation: drip-fade-in .35s cubic-bezier(.22,1,.36,1) both;
}
@media (prefers-reduced-motion: reduce) {
  main > * { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ---------- Skeleton loaders ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--paper-2) 0%, #f0e7d3 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  background: var(--paper);
  padding-bottom: 16px;
}
.skeleton-card .skeleton-image { aspect-ratio: 3/4; width: 100%; }
.skeleton-card .skeleton-line { height: 12px; margin: 10px 4px 0; }
.skeleton-card .skeleton-line.short { width: 45%; }
.skeleton-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); }
@media (min-width: 640px)  { .skeleton-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1000px) { .skeleton-grid { grid-template-columns: repeat(4,1fr); } }

/* ---------- Upgraded toast system ---------- */
#toast-host {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 90;
  pointer-events: none;
  max-width: min(420px, calc(100% - 32px));
  width: 100%;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 18px 40px -18px rgba(26,22,17,.55);
  transform: translateY(20px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.toast-in  { transform: translateY(0); opacity: 1; }
.toast-out { transform: translateY(20px); opacity: 0; }
.toast-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  background: rgba(243,237,224,.15);
  flex-shrink: 0;
}
.toast-success { background: var(--green); }
.toast-success .toast-icon { background: rgba(255,255,255,.2); }
.toast-error   { background: var(--rust-deep); }
.toast-error .toast-icon { background: rgba(255,255,255,.2); }
.toast-info    { background: var(--dark); }
.toast-info .toast-icon { background: var(--copper); color: var(--dark); }

/* ---------- PWA install banner ---------- */
.pwa-banner {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  background: var(--dark);
  color: var(--paper);
  padding: 14px 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  z-index: 70;
  box-shadow: var(--shadow);
  transform: translateY(140%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  border: 1px solid var(--copper);
}
.pwa-banner.show { transform: translateY(0); }
.pwa-banner img { width: 44px; height: 44px; border-radius: 50%; }
.pwa-banner button { color: var(--copper-soft); font-weight: 800; font-size: 13px; }
.pwa-banner .pwa-close { color: var(--muted); font-size: 20px; padding: 0 4px; }

/* ---------- Size guide ---------- */
.size-guide {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 10px;
}
.size-guide th, .size-guide td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: center;
}
.size-guide th {
  background: var(--paper-2);
  font-weight: 800;
}
.size-guide caption {
  text-align: start;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}