/* Shared customer chrome: every public route should feel like one HIPO surface. */
html { background: var(--color-primary); }
body { background: var(--color-surface); color: var(--color-on-surface); min-width: 0; overflow-x: clip; }
body { --shop-display: "Rethink Sans", var(--font-display); --shop-display-tracking: 0.01em; }

@view-transition { navigation: auto; }
.shop-announcement { background: var(--color-primary); color: var(--color-on-primary); font: var(--type-label-mono); letter-spacing: var(--tracking-label-wide); padding: var(--space-2) var(--layout-page-inline); text-align: center; text-transform: uppercase; view-transition-name: customer-announcement; }
.shop-header { background: var(--color-surface); border-block-end: var(--border-width-strong) solid var(--nav-border); position: sticky; inset-block-start: 0; 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: end; background: var(--color-surface); border-block-start: 0; color: var(--color-on-surface); display: flex; font-family: var(--font-sans); gap: var(--space-8); justify-content: space-between; padding-block: var(--space-8) var(--space-10); position: relative; view-transition-name: customer-footer; }
.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__lead p { color: var(--color-on-surface-variant); font: var(--type-body-medium); margin: var(--space-2) 0 0; }
.shop-footer__wordmark { margin: 0 !important; }
.shop-footer__wordmark img { display: block; height: auto; max-width: var(--layout-customer-wordmark-max-inline); width: 100%; }
.shop-footer nav { display: flex; flex-wrap: wrap; font: var(--type-label-large); gap: var(--space-5); }

::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-duration: var(--motion-short-2); }
::view-transition-old(customer-main) { animation: customer-main-out var(--motion-short-2) var(--ease-standard) both; }
::view-transition-new(customer-main) { animation: customer-main-in var(--motion-medium-2) var(--ease-standard) both; }
@keyframes customer-main-out { to { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); } }
@keyframes customer-main-in { from { opacity: 0; transform: translateY(var(--space-2)); } }

@media (prefers-reduced-motion: reduce) {
  ::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 { align-items: start; flex-direction: column; gap: var(--space-5); }
  .shop-footer nav { gap: var(--space-3) var(--space-5); }
}

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