/* Ambient layer: blurred colour fields that follow the context (route, product colour, daypart). */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  filter: hue-rotate(var(--amb-hue, 0deg)); transition: filter var(--dur-ambient) var(--ease-ambient); }
:root { transition: --amb-a var(--dur-ambient) var(--ease-ambient), --amb-b var(--dur-ambient) var(--ease-ambient); }
.ambient i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(var(--blur-ambient)); opacity: var(--amb-opacity); }
.ambient i:nth-child(1) { background: var(--amb-a); top: -25vmax; left: -15vmax; }
.ambient i:nth-child(2) { background: var(--amb-b); bottom: -30vmax; right: -20vmax; }
.ambient i:nth-child(3) { background: var(--amb-a); width: 35vmax; height: 35vmax; top: 35%; left: 55%; opacity: calc(var(--amb-opacity) * .5); }
:root[data-ambient="off"] .ambient { display: none; }

/* Frosted acrylic: sheen gradient over a translucent fill, heavy blur + saturation, grain, light edge, inner glow, elevation. */
.acrylic { position: relative; border: 1px solid var(--acr-border);
  background: linear-gradient(145deg, var(--frost-a), var(--frost-b) 62%), var(--acr-bg);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.5) brightness(var(--frost-bright)); backdrop-filter: blur(var(--blur-2)) saturate(1.5) brightness(var(--frost-bright));
  box-shadow: var(--e-2), inset 0 1px 0 var(--frost-edge), inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 -22px 34px -28px var(--frost-edge); isolation: isolate; }
.acrylic::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: var(--noise-opacity); mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.acrylic.thick { background: linear-gradient(145deg, var(--frost-a), var(--frost-b) 70%), var(--acr-bg-strong); backdrop-filter: blur(var(--blur-3)) saturate(1.7) brightness(var(--frost-bright)); -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.7) brightness(var(--frost-bright)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .acrylic { background: var(--surface); } }

.e-1 { box-shadow: var(--e-1); } .e-2 { box-shadow: var(--e-2); } .e-3 { box-shadow: var(--e-3); }
.e-4 { box-shadow: var(--e-4); } .e-5 { box-shadow: var(--e-5); }
.lift { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--e-4); }