/* The storefront's own states (not frozen): the shop could not be opened, a page is loading, something broke.
   They are the approved S2 no-results panel's own anatomy and type (.ui-empty from the design system, with
   its mark at the same size), and they take the same festive display face only where the approved freeze does
   (html.ls-festive, rule copied from listing.css): every other theme keeps the design system's own title.
   Tokens only: no colour, font or ornament that is not already approved. */
.sf-main { display: grid; align-content: center; min-height: 56dvh; padding-inline: 16px; }
.sf-main:focus { outline: none; }
.sf-state .ui-empty { padding-block: var(--ui-space-12); animation: sf-in var(--ui-dur-slow) cubic-bezier(0.32, 0.72, 0, 1) both; }
html.ls-festive .sf-state .ui-empty__title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: 0; color: var(--ui-accent); }
@keyframes sf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Loading: the logo mark alone on the page, breathing slowly. */
@keyframes sf-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }

@media (prefers-reduced-motion: reduce) {
  .sf-state .ui-empty { animation: none; }
}

/* Loading states (inside the shell): muted surfaces in the approved pages' own anatomy. */
.sf-line { border-radius: 2px; }
.sf-fill { position: absolute; inset: 0; }
.sf-sk-card { min-width: 0; }
.sf-sk-body { display: grid; gap: var(--ui-space-3); padding-top: var(--ui-space-3); justify-items: start; }
.sf-sk-pa { display: none; }
.sf-sk-pc { display: grid; gap: var(--ui-space-3); }
.sf-sk-pc .pc__media { position: relative; }
html.ls-card-arch .sf-sk-pa { display: flex; }
html.ls-card-arch .sf-sk-pc { display: none; }
.sf-sk-pa .pa__win { background: transparent; }
.sf-sk-pa .sf-fill { opacity: 0.85; }
.sf-sk-facet { display: grid; gap: var(--ui-space-3); padding-block: var(--ui-space-3); }
.sf-line--title { background: currentColor; opacity: 0.16; animation: none; }
.ls-hero .sf-line { background: currentColor; opacity: 0.2; animation: sf-breathe 2.4s ease-in-out infinite; }
.sf-loading { min-height: 100dvh; }
.sf-sk-hero { display: grid; place-items: center; min-height: min(86dvh, 720px); margin-top: 0; }
/* The hero sits under the transparent header, as the Home's does (its script sets --hx-hdr; here the header's own heights). */
.sf-loading--home { margin-top: -65px; }
@media (min-width: 960px) { .sf-loading--home { margin-top: -105px; } }
.sf-sk-hero__mark { clip-path: inset(0 0 3px 0); width: clamp(120px, 14vw, 168px); height: auto; opacity: 0.5; animation: sf-breathe 2.4s ease-in-out infinite; }
.sf-sk-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-8) var(--ui-space-3); padding-block: var(--ui-space-8); }
@media (min-width: 720px) { .sf-sk-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-10) var(--ui-space-6); } }
.sf-sk-row > :nth-child(n + 3) { display: none; }
@media (min-width: 720px) { .sf-sk-row > :nth-child(n + 3) { display: grid; } }
.sf-sk-homecard { display: grid; gap: var(--ui-space-3); align-content: start; justify-items: start; }
.sf-arch { aspect-ratio: 100 / 162; width: 100%; border-radius: 999px 999px var(--ui-radius-sm, 6px) var(--ui-radius-sm, 6px); }
@media (prefers-reduced-motion: reduce) {
  .ls-hero .sf-line, .sf-sk-hero__mark { animation: none; }
  .sf-sk-hero__mark { opacity: 0.6; }
}

/* The grid's own loading card for the next page (listing-view): the card's shape on the blush surface. */
.ls-sk__arch { aspect-ratio: 4 / 5; width: 100%; }
html.ls-card-arch .ls-sk__arch { aspect-ratio: 100 / 162; border-radius: 999px 999px var(--ui-radius-sm, 6px) var(--ui-radius-sm, 6px); }

/* A change on its way dims the list quietly, no layout shift. The fade is declared only while a change is pending, so
   the list at rest keeps the approved page's own declarations. */
.ls-results[data-pending] [data-grid],
.ls-results[data-pending] .ls-more { opacity: 0.55; transition: opacity var(--ui-dur-base, 200ms) var(--ui-ease, ease); }
.ls-results[data-pending] .ls-chip { opacity: 0.7; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ls-results[data-pending] [data-grid], .ls-results[data-pending] .ls-more { transition: none; }
}