/* ============================================================
   Morning Sky — storefront design system
   Source of truth: docs/plans/2026-07-09-facts/designTokens.md
   Pixel reference: docs/plans/2026-07-09-facts/mockup-blue-b-morning-sky.html
   ============================================================ */

/* ---------- 1. Fonts (self-hosted, /public/fonts) ---------- */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/public/fonts/schibsted-grotesk-v7-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/public/fonts/schibsted-grotesk-v7-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/public/fonts/schibsted-grotesk-v7-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/public/fonts/schibsted-grotesk-v7-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/public/fonts/nunito-sans-v19-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/public/fonts/nunito-sans-v19-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/public/fonts/nunito-sans-v19-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/public/fonts/nunito-sans-v19-latin-800.woff2') format('woff2');
}

/* ---------- 2. Tokens ---------- */
:root {
  --ms-bg: #F5F9FD;          --ms-bg-top: #EAF3FB;      --ms-overlay-top: #DEEDFA;
  --ms-ink: #163E63;         --ms-ink-soft: #41618A;    --ms-ink-muted: #7B97B8;
  --ms-accent: #2E6FB7;      --ms-accent-light: #8FC1EE; --ms-dark-2: #1B4A77;
  --ms-tint: #E3EFFA;        --ms-border: #DCE9F6;      --ms-card: #FFFFFF;
  --ms-tint-1: #E3EFFA; --ms-tint-2: #DCEAF7; --ms-tint-3: #E8F2FB; --ms-tint-4: #DFEDF9; --ms-tint-5: #E5F0FA;
  --ms-ok: #2E6B4F;  --ms-ok-bg: rgba(46,107,79,0.1);
  --ms-warn: #8A6D3B; --ms-warn-bg: rgba(138,109,59,0.12);
  --ms-danger: #A2543F; --ms-danger-bg: rgba(162,84,63,0.12);
  --ms-shadow-card: 0 8px 24px -18px rgba(22,62,99,0.25);
  --ms-shadow-card-hover: 0 26px 48px -22px rgba(22,62,99,0.35);
  --ms-shadow-notice: 0 20px 44px -24px rgba(22,62,99,0.28);
  --ms-shadow-cta: 0 16px 34px -14px rgba(22,62,99,0.55);
  --ms-shadow-cta-accent: 0 16px 34px -14px rgba(46,111,183,0.6);
  --ms-shadow-pane: 0 30px 60px -34px rgba(22,62,99,0.4);
  --ms-font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --ms-font-body: 'Nunito Sans', system-ui, sans-serif;
  --ms-fs-eyebrow: 0.75rem;
  --ms-ease-spring: cubic-bezier(0.34,1.4,0.64,1);
  --ms-ease-out: cubic-bezier(0.16,1,0.3,1);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #F5F9FD;
  color: var(--ms-ink);
  font-family: var(--ms-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ms-page {
  background: linear-gradient(180deg, #EAF3FB 0%, #F5F9FD 340px);
  min-height: 100vh;
}

::selection { background: var(--ms-accent); color: var(--ms-bg); }

a { color: var(--ms-ink); text-decoration: none; transition: color 0.25s; }
a:hover { color: var(--ms-accent); }

button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }

.ms-container { max-width: 82rem; margin: 0 auto; padding-inline: 32px; }
.ms-container--narrow { max-width: 78rem; }

.ms-section { margin: 88px auto 0; }
.ms-section--hero { margin-top: 36px; }
.ms-section--page { margin-top: 0; padding-top: 48px; }

/* ---------- 4. Motion ---------- */
@keyframes ms-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ms-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ms-float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes ms-drift { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Entrance rise + delay ladder (base delay 0s) */
.ms-rise { animation: ms-rise 0.9s var(--ms-ease-out) both; }
.ms-rise-1 { animation-delay: 0.08s; }
.ms-rise-2 { animation-delay: 0.12s; }
.ms-rise-3 { animation-delay: 0.16s; }
.ms-rise-4 { animation-delay: 0.24s; }
.ms-rise-5 { animation-delay: 0.3s; }
.ms-rise-6 { animation-delay: 0.36s; }
.ms-rise-7 { animation-delay: 0.42s; }

/* Scroll-driven reveal. The shorthand sets NO duration (0s), so
   non-Chromium browsers snap straight to the visible end state. */
.ms-reveal {
  animation: ms-reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}
.ms-reveal--head { animation-range: entry 0% entry 55%; }

/* JS fallback for non-Chromium: hides content only when JS is running */
@supports not (animation-timeline: view()) {
  html.js .ms-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: 0.7s var(--ms-ease-out);
  }
  html.js .ms-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Pure-CSS stagger for grids of .ms-rise items (0.06s steps, capped 0.66s) */
.ms-stagger > :nth-child(1) { animation-delay: 0s; }
.ms-stagger > :nth-child(2) { animation-delay: 0.06s; }
.ms-stagger > :nth-child(3) { animation-delay: 0.12s; }
.ms-stagger > :nth-child(4) { animation-delay: 0.18s; }
.ms-stagger > :nth-child(5) { animation-delay: 0.24s; }
.ms-stagger > :nth-child(6) { animation-delay: 0.3s; }
.ms-stagger > :nth-child(7) { animation-delay: 0.36s; }
.ms-stagger > :nth-child(8) { animation-delay: 0.42s; }
.ms-stagger > :nth-child(9) { animation-delay: 0.48s; }
.ms-stagger > :nth-child(10) { animation-delay: 0.54s; }
.ms-stagger > :nth-child(11) { animation-delay: 0.6s; }
.ms-stagger > :nth-child(12) { animation-delay: 0.66s; }
.ms-stagger > :nth-child(n+13) { animation-delay: 0.66s; }

/* ---------- 5. Header ---------- */
.ms-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245,249,253,0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ms-header__inner {
  max-width: 82rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 32px;
}

.ms-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ms-logo:hover { color: var(--ms-ink); }
.ms-logo-tile {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--ms-accent);
  color: var(--ms-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 1rem;
}
.ms-logo-tile--sm { width: 34px; height: 34px; border-radius: 12px; font-size: 0.9rem; }
.ms-wordmark {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ms-ink);
}
.ms-wordmark--sm { font-size: 1.05rem; }

.ms-chipnav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  padding: 6px;
}
.ms-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: transparent;
  color: var(--ms-ink-soft);
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  font-family: var(--ms-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.3s;
}
.ms-chip:hover { background: var(--ms-tint); color: var(--ms-ink-soft); }
.ms-chip.is-active,
.ms-chip.is-active:hover { background: var(--ms-ink); color: var(--ms-bg); }

.ms-open-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ms-ink-soft);
  white-space: nowrap;
}
.ms-open-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ms-ink-muted);
  flex-shrink: 0;
}
.ms-open-pill.is-open::before { background: var(--ms-ok); }
.ms-open-pill.is-closed::before { background: var(--ms-danger); }

.ms-search-pill {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  font-family: var(--ms-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ms-ink);
  transition: border-color 0.3s, background 0.3s;
}
.ms-search-pill::placeholder { color: var(--ms-ink-soft); font-weight: 600; }
.ms-search-pill:focus { background: var(--ms-card); border-color: var(--ms-accent); }

/* ---------- 5. Hero slider ---------- */
.ms-hero {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  min-height: 66vh;
  display: flex;
  align-items: flex-end;
}
.ms-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
  animation: ms-drift 15s ease-out both;
}
.ms-hero__slide.is-active { opacity: 1; }
.ms-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,62,99,0.05) 30%, rgba(22,62,99,0.62) 100%);
}
.ms-hero__content {
  position: relative;
  z-index: 10;
  padding: 52px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  color: var(--ms-bg);
}
.ms-hero__copy { max-width: 36rem; }
.ms-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,249,253,0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: var(--ms-fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ms-hero__cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.8rem;
  border: none;
  border-radius: 999px;
  background: var(--ms-bg);
  font-family: var(--ms-font-body);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ms-ink);
  cursor: pointer;
  transition: transform 0.35s var(--ms-ease-spring), box-shadow 0.35s;
}
.ms-hero__cta:hover {
  color: var(--ms-ink);
  transform: translateY(-3px);
  box-shadow: var(--ms-shadow-cta);
}
.ms-hero__dots { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* Slideshow pause/play control — frosted pill matching the hero badge */
.ms-hero__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin-left: 6px;
  border: none;
  border-radius: 999px;
  background: rgba(245,249,253,0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ms-bg);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s;
}
.ms-hero__toggle:hover { background: rgba(245,249,253,0.38); }
.ms-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  box-sizing: content-box;
  padding: 16px 0;
  cursor: pointer;
  background: rgba(245,249,253,0.45);
  background-clip: content-box;
  transition: all 0.4s;
}
/* background-color (not the `background` shorthand) so the base rule's
   background-clip:content-box survives — otherwise the active dot's fill
   spills into the 16px tap-padding and renders as a tall block, not a pill. */
.ms-dot.is-active { width: 34px; background-color: var(--ms-bg); }

/* ---------- 5. Notice cards ---------- */
.ms-notices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  margin-top: -44px;
  position: relative;
  z-index: 20;
  padding: 0 32px;
}
.ms-notice {
  background: var(--ms-card);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: var(--ms-shadow-notice);
}
.ms-notice__eyebrow {
  font-size: var(--ms-fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ms-accent);
  margin-bottom: 6px;
}
.ms-notice__title {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--ms-ink);
  overflow-wrap: anywhere;
}

/* ---------- 5. Grids ---------- */
.ms-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ms-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
/* Let grid items shrink below their content's intrinsic width so the 1fr tracks
   never overflow — card titles use white-space:nowrap+ellipsis, which would
   otherwise force each column to the full untruncated title width (grid gotcha). */
.ms-grid-4 > *, .ms-grid-5 > * { min-width: 0; }

/* ---------- 5. Section head row ---------- */
.ms-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
}
.ms-section-note { font-size: 0.8rem; font-weight: 700; color: var(--ms-ink-soft); }

/* ---------- 5. Product card ---------- */
.ms-card {
  display: block;
  text-align: left;
  background: var(--ms-card);
  color: var(--ms-ink);
  border: none;
  border-radius: 24px;
  padding: 14px;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  box-shadow: var(--ms-shadow-card);
  transition: transform 0.35s var(--ms-ease-spring), box-shadow 0.35s;
}
.ms-card:hover {
  color: var(--ms-ink);
  transform: translateY(-6px);
  box-shadow: var(--ms-shadow-card-hover);
}
.ms-card__img {
  position: relative;
  background: var(--ms-tint);
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 1 / 1;
}
.ms-card__img img,
.ms-card__img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ms-badge-low {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ms-bg);
  color: var(--ms-warn);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--ms-fs-eyebrow);
  font-weight: 800;
}
.ms-card__body { padding: 14px 8px 8px; }
.ms-card__eyebrow {
  font-size: var(--ms-fs-eyebrow);
  font-weight: 800;
  color: var(--ms-ink-soft); /* a11y: #7B97B8 fails AA for text — soft ink instead */
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ms-card__title {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ms-ink);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}
.ms-card__pricerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.ms-card__price { font-weight: 800; font-size: 1rem; color: var(--ms-accent); }
.ms-card__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ms-tint);
  color: var(--ms-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* ---------- 5. Category tint card (aisles) ---------- */
.ms-tintcard {
  display: block;
  width: 100%;
  background: var(--ms-tint-1);
  color: var(--ms-ink);
  border: none;
  border-radius: 22px;
  padding: 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.35s var(--ms-ease-spring);
}
.ms-tintcard:hover { color: var(--ms-ink); transform: translateY(-6px); }
.ms-tintcard:nth-child(5n+1) { background: var(--ms-tint-1); }
.ms-tintcard:nth-child(5n+2) { background: var(--ms-tint-2); }
.ms-tintcard:nth-child(5n+3) { background: var(--ms-tint-3); }
.ms-tintcard:nth-child(5n+4) { background: var(--ms-tint-4); }
.ms-tintcard:nth-child(5n+5) { background: var(--ms-tint-5); }
.ms-tintcard__img {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.ms-tintcard__img img,
.ms-tintcard__img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ms-ease-out);
}
.ms-tintcard:hover .ms-tintcard__img img,
.ms-tintcard:hover .ms-tintcard__img video { transform: scale(1.06); }
.ms-tintcard__body { padding: 14px 4px 4px; }
.ms-tintcard__name {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ms-ink);
}
.ms-tintcard__count {
  font-size: var(--ms-fs-eyebrow);
  font-weight: 700;
  color: var(--ms-ink-soft);
  margin-top: 3px;
}

/* ---------- 5. Category page: head + sort pills ---------- */
.ms-cathead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.ms-sortnav {
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  padding: 6px;
}
.ms-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ms-ink-soft);
  font-family: var(--ms-font-body);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
}
.ms-sort:hover { background: var(--ms-tint); color: var(--ms-ink-soft); }
.ms-sort.is-active,
.ms-sort.is-active:hover { background: var(--ms-ink); color: var(--ms-bg); }

/* ---------- 5. Product detail ---------- */
.ms-back-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  cursor: pointer;
  font-family: var(--ms-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ms-ink-soft);
  transition: background 0.3s;
  margin-bottom: 36px;
}
.ms-back-pill:hover { background: var(--ms-tint); color: var(--ms-ink-soft); }

.ms-prod {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px;
  align-items: center;
}
.ms-prod__pane {
  border-radius: 32px;
  overflow: hidden;
  background: var(--ms-tint);
  aspect-ratio: 1 / 1;
  box-shadow: var(--ms-shadow-pane);
}
.ms-prod__pane img,
.ms-prod__pane video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: ms-drift 11s ease-out both;
}

/* Product gallery thumb strip (renders when a product has >1 media item) */
.ms-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.ms-thumb {
  flex: 0 0 auto;
  width: 72px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid var(--ms-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ms-tint);
  cursor: pointer;
  transition: border-color 0.2s var(--ms-ease-out), transform 0.2s var(--ms-ease-out);
}
.ms-thumb:hover { transform: translateY(-2px); }
.ms-thumb.is-active { border-color: var(--ms-accent); }
.ms-thumb img,
.ms-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ms-prod__pill {
  display: inline-flex;
  align-items: center;
  background: var(--ms-tint);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ms-ink-soft);
}
.ms-prod__title { margin: 20px 0 0; overflow-wrap: anywhere; }
.ms-prod__pricerow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.ms-prod__price { font-weight: 800; font-size: 1.8rem; color: var(--ms-accent); }
.ms-prod__lede {
  margin: 24px 0 0;
  font-family: var(--ms-font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ms-ink-soft);
}
.ms-prod__desc {
  margin: 14px 0 0;
  color: var(--ms-ink-soft);
  font-size: 0.94rem;
  line-height: 1.8;
}
.ms-prod__actions {
  margin-top: 32px;
  display: flex;
  gap: 12px;
}

.ms-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.72rem;
  font-weight: 800;
}
.ms-stock::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ms-stock.is-in { color: var(--ms-ok); background: var(--ms-ok-bg); }
.ms-stock.is-low { color: var(--ms-warn); background: var(--ms-warn-bg); }
.ms-stock.is-out { color: var(--ms-danger); background: var(--ms-danger-bg); }

.ms-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.9rem;
  border: none;
  border-radius: 999px;
  background: var(--ms-accent);
  font-family: var(--ms-font-body);
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ms-bg);
  cursor: pointer;
  transition: transform 0.3s var(--ms-ease-spring), box-shadow 0.3s;
}
.ms-btn-primary:hover {
  color: var(--ms-bg);
  transform: translateY(-3px);
  box-shadow: var(--ms-shadow-cta-accent);
}
.ms-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.9rem;
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  background: rgba(255,255,255,0.8);
  font-family: var(--ms-font-body);
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ms-ink-soft);
  cursor: pointer;
  transition: border-color 0.3s;
}
.ms-btn-outline:hover { color: var(--ms-ink-soft); border-color: var(--ms-accent); }

.ms-pickup-note {
  margin-top: 26px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--ms-border);
  border-radius: 16px;
  font-size: 0.8rem;
  color: var(--ms-ink-soft);
  line-height: 1.65;
}

/* ---------- 5. Visit panel ---------- */
.ms-visit {
  border-radius: 32px;
  background: linear-gradient(135deg, #1B4A77, #163E63);
  color: var(--ms-bg);
  padding: 60px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  position: relative;
  overflow: hidden;
}
.ms-visit__circle-a {
  position: absolute;
  top: -70px;
  right: -50px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127,178,229,0.28), transparent 70%);
  animation: ms-float 7s ease-in-out infinite;
}
.ms-visit__circle-b {
  position: absolute;
  bottom: -90px;
  left: 34%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127,178,229,0.18), transparent 70%);
  animation: ms-float 9s ease-in-out 1.2s infinite;
}
.ms-visit__info { position: relative; }
.ms-visit__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ms-accent-light);
  margin-bottom: 14px;
}
.ms-visit__title {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}
.ms-visit__text {
  margin: 18px 0 0;
  color: rgba(245,249,253,0.72);
  font-size: 0.94rem;
  line-height: 1.75;
  max-width: 26rem;
}
.ms-visit__hours {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ms-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(245,249,253,0.16);
}
.ms-hours-row:last-child { border-bottom: none; }
.ms-hours-row__label {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(245,249,253,0.65);
}
.ms-hours-row__value {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: 1.25rem;
}
.ms-hours-row__value.is-closed { color: var(--ms-accent-light); }

/* ---------- 5. Footer ---------- */
.ms-footer { margin-top: 96px; background: var(--ms-bg-top); }
.ms-footer__grid {
  max-width: 82rem;
  margin: 0 auto;
  padding: 56px 32px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}
.ms-footer__brand { grid-column: span 5; }
.ms-footer__col { grid-column: span 2; }
.ms-footer__col--aisles { grid-column: 7 / span 2; }
.ms-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.ms-footer__blurb {
  color: var(--ms-ink-soft);
  line-height: 1.7;
  font-size: 0.85rem;
  max-width: 24rem;
  margin: 0;
}
.ms-footer__head {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ms-accent);
  margin-bottom: 16px;
}
.ms-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-footer__list--muted {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ms-ink-soft);
}
.ms-footer__link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--ms-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ms-ink);
  transition: color 0.25s;
}
.ms-footer__link:hover { color: var(--ms-accent); }
.ms-footer__bottom { border-top: 1px solid var(--ms-border); }
.ms-footer__bottom-inner {
  max-width: 82rem;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ms-ink-soft); /* a11y: muted fails AA for body text */
}

/* ---------- 5. Pagination ---------- */
.ms-pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  padding: 6px;
}
.ms-pagination a,
.ms-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ms-ink-soft);
  transition: all 0.3s;
}
.ms-pagination a:hover { background: var(--ms-tint); color: var(--ms-ink-soft); }
.ms-pagination .is-active { background: var(--ms-ink); color: var(--ms-bg); }
.ms-pagination .is-disabled { color: var(--ms-ink-muted); pointer-events: none; }

/* ---------- 5. Empty states (search / 404 / 500) ---------- */
.ms-empty {
  text-align: center;
  padding: 72px 24px;
}
.ms-empty__title {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.02em;
  color: var(--ms-ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.ms-empty__body {
  margin: 14px auto 0;
  max-width: 30rem;
  color: var(--ms-ink-soft);
  font-size: 0.94rem;
  line-height: 1.8;
}
.ms-empty__actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- 6. Type utilities ---------- */
.ms-h1 {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}
.ms-h1--category {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
}
.ms-h1--product {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.06;
}
.ms-h2 {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  margin: 0;
}
.ms-h2--sm { font-size: 1.6rem; }

.ms-eyebrow {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ms-accent);
}
.ms-eyebrow--sm { font-size: var(--ms-fs-eyebrow); }
.ms-eyebrow--card { font-size: 0.68rem; letter-spacing: 0.08em; }
.ms-eyebrow--wide { letter-spacing: 0.18em; }
.ms-eyebrow--meta {
  /* "Aisle · N items" — not uppercase in the mockup */
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.74rem;
  color: var(--ms-ink-soft); /* a11y: muted fails AA for body text */
  margin-bottom: 10px;
}

.ms-text-accent { color: var(--ms-accent); }

/* ---------- 6b. Skip link (a11y) ---------- */
.ms-skip {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 8px 14px;
  background: var(--ms-ink);
  color: var(--ms-bg);
  border-radius: 999px;
  transform: translateY(-150%);
  transition: transform 0.2s;
  z-index: 100;
}
.ms-skip:focus { transform: translateY(0); }

/* ---------- 7. Responsive ---------- */
/* Header: the desktop single row (logo | chips | search | open-pill) needs
   ~1143px to fit, so below 1200px stack it into two rows — logo + search
   (+ open-pill) on top, and the chip nav as a full-width, horizontally
   scrollable strip below. Kept in its own 1200px block (ahead of the 1024px
   grid tier) so 1025–1142px no longer overflows into horizontal page-scroll. */
@media (max-width: 1200px) {
  .ms-header__inner { flex-wrap: wrap; row-gap: 12px; }
  .ms-logo { flex-shrink: 0; }
  .ms-wordmark { white-space: nowrap; }
  .ms-header form[role="search"] { order: 2; flex: 1 1 200px; min-width: 0; }
  .ms-search-pill { width: 100%; box-sizing: border-box; }
  .ms-open-pill { order: 2; flex-shrink: 0; }
  .ms-chipnav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ms-chipnav::-webkit-scrollbar { display: none; }
}

@media (max-width: 1024px) {
  .ms-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ms-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .ms-visit { grid-template-columns: 1fr; padding: 32px; }
  .ms-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .ms-footer__brand,
  .ms-footer__col,
  .ms-footer__col--aisles { grid-column: auto / span 1; }
  .ms-footer__brand { grid-column: span 2; }
  .ms-prod { grid-template-columns: 1fr; }
}

/* Mid density tier: on tablets show 3-col products / 4-col aisles so cards
   aren't oversized jumping straight from desktop (4/5-col) to phone (2-col).
   Placed AFTER the 1024px block so it wins the 641–1024px range; the ≤640px
   block (later still) restores 2-col below. */
@media (min-width: 641px) and (max-width: 1024px) {
  .ms-grid-4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ms-grid-5 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .ms-notices { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ms-container { padding-inline: 16px; }
  .ms-header__inner { padding: 12px 16px; gap: 12px; }
  .ms-open-pill { display: none; }
  .ms-logo-tile { width: 34px; height: 34px; border-radius: 12px; font-size: 0.9rem; }
  .ms-wordmark { font-size: 1.05rem; }

  .ms-hero { min-height: 52vh; }
  .ms-hero__content { padding: 24px; flex-wrap: wrap; gap: 20px; }
  /* Scoped off the --category/--product modifiers so this mobile override
     doesn't flatten their distinct clamps; cap matches the desktop floor. */
  .ms-h1:not(.ms-h1--category):not(.ms-h1--product) { font-size: clamp(1.9rem, 7vw, 2.4rem); }

  .ms-notices { grid-template-columns: 1fr; margin-top: -24px; padding: 0 16px; }

  .ms-section { margin-top: 48px; }

  .ms-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ms-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ms-card { padding: 10px; border-radius: 18px; }
  /* Cards are ~166px wide on phones — allow titles up to 2 lines instead of
     the desktop single-line ellipsis. */
  .ms-card__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ms-sechead { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ms-cathead { flex-wrap: wrap; }
  .ms-sortnav { flex-wrap: wrap; }
  .ms-prod { gap: 24px; }

  .ms-footer__grid { padding: 32px 16px; }
  .ms-footer__bottom-inner { padding: 20px 16px; flex-wrap: wrap; gap: 8px; }
}

/* Very narrow phones: collapse the 2-col footer to one column so the brand
   block doesn't sit beside a lone orphan column. */
@media (max-width: 520px) {
  .ms-footer__grid { grid-template-columns: 1fr; }
  .ms-footer__brand { grid-column: auto; }
}

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html.js .ms-reveal { opacity: 1; transform: none; }
}