/* Dynamic storefront backgrounds (page-themes 2026-10-19, photo styles).
   A fixed layer behind all content: theme gradient + a photo (full-bleed "scene" or "collage"),
   lazy-loaded, under a soft scrim (and a light blur for scenes) so cards and text keep WCAG AA contrast.
   Storefront only; never inside Mission Control. */
.ash-pt{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(160deg,var(--pt-from,#f3f9fa) 0%,var(--pt-to,#e9f1f6) 100%);
  --pt-blur:0px;--pt-op:.95;--pt-scrim-a:.30;--pt-scrim-b:.38;--pt-core:.62}
.ash-pt::before{content:"";position:absolute;inset:0;background-image:var(--pt-img,none);
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  opacity:0;transition:opacity .9s ease;filter:blur(var(--pt-blur)) saturate(.92)}
.ash-pt.is-ready::before{opacity:var(--pt-op)}
.ash-pt::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 52% 70% at 50% 38%,rgba(255,255,255,var(--pt-core)) 0%,rgba(255,255,255,calc(var(--pt-core) * .45)) 60%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,var(--pt-scrim-a)) 0%,rgba(250,251,252,var(--pt-scrim-b)) 100%)}
/* Scene: one full-bleed photo; soften it so it reads as atmosphere, not content. */
.ash-pt--scene{--pt-blur:3px;--pt-scrim-a:.48;--pt-scrim-b:.58;--pt-core:.55}
.ash-pt--scene::before{inset:-12px}
/* Collage: products along the edges; keep them crisp, calm the centre column. */
.ash-pt--collage{--pt-blur:0px;--pt-scrim-a:.34;--pt-scrim-b:.42;--pt-core:.70}
.ash-pt--scrim-light{--pt-scrim-a:.24;--pt-scrim-b:.30}
.ash-pt--scrim-strong{--pt-scrim-a:.62;--pt-scrim-b:.70;--pt-core:.72}
body.page-shell[data-ash-theme]{background:transparent}
/* t358: no grey on overscroll/short pages (the --pt vars live on .ash-pt, not html). */
html:has(body[data-ash-theme]){background:#f5f8f9}
body:has(.control-shell) .ash-pt{display:none!important}
/* Phones: lighter file (chosen in JS), softer art, stronger scrim. */
@media (max-width:640px){
  .ash-pt{--pt-op:.75;--pt-scrim-a:.52;--pt-scrim-b:.62}
  .ash-pt--scene{--pt-blur:2px}
}
@media (prefers-reduced-motion:reduce){.ash-pt::before{transition:none}}
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
/* Dark mode: the storefront stays light, so dim the photo and add a grey veil to cut glare. */
@media (prefers-color-scheme:dark){
  .ash-pt{--pt-op:.55}
  .ash-pt::after{background:linear-gradient(180deg,rgba(226,231,236,.62),rgba(220,226,232,.70))}
}
/* Readability plate (page-theme-photos 2026-10-19): text that sits straight on the photo layer
   (breadcrumbs, shelf / category-row headers) gets a frosted white backing so it holds WCAG AA on any image. */
body:has(.ash-pt.is-ready) :is(.product-market__breadcrumbs,.home-shelf__head,.home-cat-row__head){
  background:rgba(255,255,255,.86);border-radius:12px;box-shadow:0 1px 2px rgba(15,38,72,.06);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}
body:has(.ash-pt.is-ready) .product-market__breadcrumbs{display:inline-flex;flex-wrap:wrap;width:fit-content;max-width:100%;padding:.3rem .7rem}
body:has(.ash-pt.is-ready) :is(.home-shelf__head,.home-cat-row__head){padding:.35rem .75rem}
@media print{.ash-pt{display:none}}
/* t358 grey sweep: the old dark-slate panels (empty cart, Saved for later, 404/empty-state) become light cards on
   themed storefront pages, matching the rest of the storefront; also fixes dark text on the dark 404 panel. */
body[data-ash-theme] :is(.cart-empty-panel,.cl-panel,.empty-state){background:rgba(255,255,255,.95);color:#0f1111;border:1px solid #d5d9d9;
  box-shadow:0 1px 3px rgba(15,38,72,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body[data-ash-theme] :is(.cart-empty-panel,.cl-panel,.empty-state) :is(h1,h2,h3,strong){color:#0f1111}
body[data-ash-theme] :is(.cart-empty-panel,.cl-panel,.empty-state) :is(p,small,li){color:#3a4552}
body[data-ash-theme] :is(.cart-empty-panel,.cl-panel,.empty-state) a:not(.button):not([class*="btn"]){color:#0b6a85;text-decoration:underline}
/* The empty-cart panel carries inline dark styles. */
body[data-ash-theme] .cart-empty-panel{background:rgba(255,255,255,.95)!important;border-color:#d5d9d9!important;box-shadow:0 1px 3px rgba(15,38,72,.08)!important}
body[data-ash-theme] .cart-empty-panel p{color:#3a4552!important}