/* Shared customer chrome: every public route should feel like one HIPO surface. */
html { background: var(--ambient-page-bg, var(--color-surface)); transition: background-color var(--motion-long-2) var(--ease-smooth); }
body { background: transparent; color: var(--color-on-surface); isolation: isolate; min-width: 0; overflow-x: clip; padding-block-start: env(safe-area-inset-top, 0px); position: relative; }
body { --shop-display: "Rethink Sans", var(--font-display); --shop-display-tracking: 0.01em; }
:root[data-ambient-page="product"] {
  --ambient-key-color: rgb(var(--ambient-key-rgb, 228 0 127));
  --ambient-key-hover-color: rgb(var(--ambient-key-hover-rgb, 176 0 90));
  --ambient-key-foreground: rgb(var(--ambient-key-foreground-rgb, 255 255 255));
  --ambient-key-hover-foreground: rgb(var(--ambient-key-hover-foreground-rgb, 255 255 255));
  --ambient-focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--ambient-key-color);
}

@view-transition { navigation: auto; }
/* The named customer-main transition owns the page handoff. Animating the
   root plus the header, footer, and main creates a stacked double-exposure
   on wide screens because each snapshot contains the same ambient layers. */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(customer-announcement),
::view-transition-new(customer-announcement),
::view-transition-old(customer-header),
::view-transition-new(customer-header),
::view-transition-old(customer-footer),
::view-transition-new(customer-footer) { animation: none; }
.ambient-theme::before, .ambient-theme::after { block-size: 100%; content: ''; inset: 0; pointer-events: none; position: fixed; inline-size: 100%; }
.ambient-theme::before { background: radial-gradient(ellipse 92% 78% at -8% -14%, rgb(var(--ambient-profile-rgb, 244 215 229) / 0.22), transparent 70%), radial-gradient(ellipse 96% 82% at 108% 114%, rgb(var(--ambient-image-secondary-rgb, 250 226 237) / 0.2), transparent 72%); background-position: 0% 0%, 100% 100%; background-repeat: no-repeat; background-size: 170% 165%, 175% 170%; filter: blur(58px) saturate(1.08); inset: -16%; opacity: 0; transform: scale(1.08); z-index: 0; }
.ambient-theme::after { background: radial-gradient(ellipse 86% 72% at 16% 12%, rgb(var(--ambient-image-rgb, 244 215 229) / 0.25), transparent 72%), radial-gradient(ellipse 84% 74% at 84% 86%, rgb(var(--ambient-image-secondary-rgb, 250 226 237) / 0.22), transparent 74%); background-position: 0% 0%, 100% 100%; background-repeat: no-repeat; background-size: 180% 175%, 185% 180%; filter: blur(72px) saturate(1.12); inset: -18%; opacity: 0; transform: scale(1.12); transition: opacity 1.4s var(--ease-smooth); z-index: 0; }
.ambient-theme::before { animation: hipo-ambient-surface-in 1.6s var(--ease-smooth) forwards, hipo-ambient-drift 46s var(--ease-smooth) 1.6s infinite alternate; }
.ambient-theme.is-palette-ready::after { opacity: 0.76; }
:root[data-ambient-page="product"] .ambient-theme::after { animation: hipo-ambient-cloud-drift 28s var(--ease-smooth) 1.1s infinite alternate; }
:root[data-ambient-page="product"] .ambient-theme.is-palette-ready::after { opacity: 0.9; }
.ambient-theme:not(.product-page) #main-content { background: var(--color-surface); }
.ambient-theme:not(.product-page) .route-main, .ambient-theme:not(.product-page) .route-note, .ambient-theme:not(.product-page) .event-list-section { background: var(--color-surface); }
.ambient-theme.product-page #main-content, .ambient-theme.product-page main { background: transparent; }
.ambient-theme:not(.product-page) #main-content::before { background: var(--color-surface); block-size: env(safe-area-inset-top, 0px); content: ''; inset-block-start: 0; inset-inline: 0; pointer-events: none; position: fixed; z-index: 20; }
.ambient-theme > .shop-announcement, .ambient-theme > .shop-header, .ambient-theme > .site-header, .ambient-theme > #main-content, .ambient-theme > main, .ambient-theme > .shop-footer, .ambient-theme > .site-footer { position: relative; z-index: 1; }
.ambient-theme .shop-header { background: color-mix(in srgb, var(--color-surface) 86%, transparent); }
.ambient-theme .shop-highlights, .ambient-theme .shop-categories, .ambient-theme .shop-catalog { background: transparent; }
.ambient-theme .shop-footer { background: transparent; }
.shop-announcement { background: var(--color-primary); color: var(--color-on-primary); display: block; font: var(--type-label-mono); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-label-wide); padding: var(--space-2) var(--layout-page-inline); text-align: center; text-decoration: none; text-transform: none; transition: background-color var(--motion-short-2) var(--ease-smooth), color var(--motion-short-2) var(--ease-smooth), text-decoration-color var(--motion-short-2) var(--ease-smooth); view-transition-name: customer-announcement; }
.shop-announcement strong { font-weight: inherit; }
.shop-announcement:hover, .shop-announcement:focus-visible { background: var(--color-brand-strong); color: var(--color-on-primary); text-decoration: underline; text-underline-offset: var(--space-1); }
.shop-header { background: var(--color-surface); border-block-end: var(--border-width-strong) solid var(--nav-border); position: sticky; inset-block-start: env(safe-area-inset-top, 0px); z-index: 10; view-transition-name: customer-header; }
.shop-header__topline, .shop-header__navigation, .shop-footer { margin-inline: auto; max-inline-size: var(--layout-content-commerce); padding-inline: var(--layout-page-inline); }
.shop-header__topline { align-items: center; display: flex; gap: var(--space-6); justify-content: space-between; padding-block: var(--space-3) var(--space-2); }
.shop-header__actions, .shop-nav, .shop-header__navigation { align-items: center; display: flex; }
.shop-header__actions { gap: var(--space-5); }
.wordmark { align-items: center; display: inline-flex; text-decoration: none; }
.wordmark img { display: block; height: auto; max-width: var(--layout-customer-wordmark-max-inline); width: 100%; }
.shop-header .wordmark img { height: var(--layout-customer-wordmark-height); max-width: none; width: auto; }
.header-link, .shop-nav a, .shop-footer a { font: var(--type-label-large); text-decoration-thickness: var(--border-width); text-underline-offset: var(--space-2); }
.header-link--quiet { color: var(--color-on-surface-variant); }
.header-link:hover, .shop-nav a:hover, .shop-footer a:hover { color: var(--color-primary); }
.header-cart { align-items: center; background: transparent; border: 0; color: var(--color-on-surface); cursor: pointer; display: inline-flex; font: var(--type-label-large); gap: var(--space-2); padding: 0; text-decoration: none; }
.header-cart__count { align-items: center; background: var(--color-primary); border-radius: var(--shape-full); color: var(--color-on-primary); display: inline-flex; font: var(--type-label-mono); justify-content: center; min-block-size: var(--space-6); min-inline-size: var(--space-6); }
.shop-header__navigation { min-block-size: var(--space-10); position: relative; }
.shop-header__navigation::before { background: var(--color-outline-variant); block-size: var(--border-width); content: ''; inline-size: 100vw; inset-block-start: 0; inset-inline-start: 50%; pointer-events: none; position: absolute; transform: translateX(-50%); }
.shop-nav { gap: var(--space-7); min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.shop-nav::-webkit-scrollbar { display: none; }
.shop-nav a { color: var(--color-on-surface-variant); display: inline-flex; flex: 0 0 auto; min-inline-size: max-content; white-space: nowrap; word-break: keep-all; }
.shop-nav a[data-nav-key="join"] { flex-shrink: 0; }
.shop-nav a[aria-current="page"] { color: var(--color-on-surface); text-decoration: underline; }

#main-content { view-transition-name: customer-main; }
.hero-actions .button, #route-actions .button { white-space: nowrap; }
.shop-footer {
  align-items: stretch;
  background: transparent;
  color: var(--color-on-surface);
  display: grid;
  font-family: var(--font-sans);
  gap: var(--space-8);
  padding-block: clamp(var(--space-10), 8vw, var(--space-16)) var(--space-5);
  position: relative;
  view-transition-name: customer-footer;
  z-index: 1;
}
.shop-footer::before { background: var(--color-on-surface); block-size: var(--border-width-strong); content: ''; inline-size: 100vw; inset-block-start: 0; inset-inline-start: 50%; pointer-events: none; position: absolute; transform: translateX(-50%); }
.shop-footer__inner { display: grid; gap: clamp(var(--space-10), 8vw, var(--space-20)); grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.6fr); }
.shop-footer__lead { display: flex; flex-direction: column; }
.shop-footer__wordmark { align-items: center; display: inline-flex; margin: 0 !important; width: fit-content; }
.shop-footer__wordmark img { display: block; height: auto; max-width: min(14rem, 42vw); width: min(14rem, 42vw); }
.shop-footer__tagline { color: var(--color-on-surface-variant); font: var(--type-title-medium); margin: var(--space-5) 0 0; max-inline-size: 18rem; }
.shop-footer__groups { border-block: var(--border-width) solid var(--color-outline-variant); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-footer__group { padding: var(--space-5) var(--space-5) var(--space-6); }
.shop-footer__group + .shop-footer__group { border-inline-start: var(--border-width) solid var(--color-outline-variant); }
.shop-footer__group:first-child { padding-inline-start: 0; }
.shop-footer__group:last-child { padding-inline-end: 0; }
.shop-footer__label { color: var(--ambient-key-color, var(--color-primary)); font: var(--type-label-mono); letter-spacing: var(--tracking-label-wide); margin: 0 0 var(--space-5); text-transform: uppercase; }
.shop-footer nav { display: grid; gap: var(--space-3); }
.shop-footer nav a { color: var(--color-on-surface); font: var(--type-label-large); text-decoration: none; }
.shop-footer nav a:hover, .shop-footer nav a:focus-visible { color: var(--ambient-key-color, var(--color-primary)); text-decoration: underline; text-underline-offset: var(--space-1); }
.shop-footer__base { align-items: center; border-block-start: var(--border-width-strong) solid var(--color-on-surface); display: flex; justify-content: flex-start; padding-block-start: var(--space-4); }
.shop-footer__base p { color: var(--color-on-surface-variant); font: var(--type-label-mono); letter-spacing: var(--tracking-label-wide); margin: 0; text-transform: uppercase; }
::view-transition-old(customer-main) { animation: customer-main-out var(--motion-medium-2) var(--ease-standard) both; }
::view-transition-new(customer-main) { animation: customer-main-in var(--motion-long-1) var(--ease-smooth) both; }
@keyframes customer-main-out { to { opacity: 0; } }
@keyframes customer-main-in { from { opacity: 0; } }
@keyframes hipo-ambient-surface-in { from { opacity: 0; } to { opacity: 0.92; } }
@keyframes hipo-ambient-drift { 0% { background-position: -18% 34%; } 100% { background-position: 118% 66%; } }
@keyframes hipo-ambient-cloud-drift { 0% { background-position: 0% 0%, 100% 100%; transform: scale(1.12) translate3d(-4%, -3%, 0); } 100% { background-position: 22% 18%, 78% 82%; transform: scale(1.22) translate3d(4%, 3%, 0); } }

@media (prefers-reduced-motion: reduce) {
  html { transition-duration: 0ms; }
  .ambient-theme::before { animation: none; opacity: 0.92; }
  .ambient-theme::after { animation: none !important; transition-duration: 0ms; transform: scale(1.08); }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(customer-main), ::view-transition-new(customer-main) { animation-duration: 1ms; }
}

@media (max-width: 43.75rem) {
  .shop-header__topline { gap: var(--space-3); min-width: 0; padding-block: var(--space-3) var(--space-2); }
  .shop-header__actions { gap: var(--space-3); min-width: 0; }
  .header-link--quiet { display: none; }
  .shop-nav { gap: var(--space-5); }
  .shop-footer { gap: var(--space-10); }
  .shop-footer__inner { grid-template-columns: 1fr; }
  .shop-footer__lead { min-block-size: auto; }
  .shop-footer__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-footer__group { padding-block: var(--space-5); }
  .shop-footer__group:nth-child(3) { border-block-start: var(--border-width) solid var(--color-outline-variant); border-inline-start: 0; grid-column: 1 / -1; padding-inline-start: 0; }
  .shop-footer__group:nth-child(3), .shop-footer__group:last-child { padding-inline-end: 0; }
  .shop-footer__base { align-items: start; }
}

@media (max-width: 30rem) {
  .shop-header__topline, .shop-header__navigation, .shop-footer { padding-inline: var(--space-4); }
  .shop-nav { gap: var(--space-4); }
}