/* Shared by every page: design tokens, the floating navigation bar and its
   phone menu. Page-specific styles live in each page's own <style>. */
:root {
  --pill-radius: 100px;
  --card-radius: 24px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Navigation (Figma 204:297) ----------
   A floating white bar, 40px in from each side and 16px from the top. */
.nav {
  position: fixed; top: 16px; left: 40px; right: 40px; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; /* SF dead centre */
  padding: 16px 24px; background: #fff; box-shadow: 0 3px 30px -10px #e3e2de;
  border-radius: var(--pill-radius); /* fully rounded, like the pill buttons */
  color: #000; line-height: 1;
}
.nav a, .nav button { color: inherit; text-decoration: none; background: none; padding: 0; line-height: 1; }
/* Desktop: Optical · Solar | studio frames | Search · Account · Cart.
   Phones (≤900px, below): ☰ | SF | Cart, with the other links in the menu. */
.nav__group { display: flex; align-items: center; font-size: 14px; font-weight: 300; white-space: nowrap; }
.nav__group--left { grid-column: 1; grid-row: 1; gap: 12px; }
.nav__group--right { grid-column: 3; justify-self: end; gap: 16px; }
.nav__brand { grid-column: 2; font-size: 18px; font-weight: 500; }
.nav__brand-short { display: none; letter-spacing: .02em; }
.nav__group a:hover, .nav__cart:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Hamburger (phones only): three lines that fold into a cross while open. */
.nav__menu-btn {
  grid-column: 1; grid-row: 1; justify-self: start;
  position: relative; width: 24px; height: 18px; margin: -4px 0 -4px -2px;
  display: none; place-items: center;
}
.nav__menu-btn span {
  position: absolute; left: 2px; right: 2px; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform .3s var(--ease-out), opacity .2s ease;
}
.nav__menu-btn span:nth-child(1) { transform: translateY(-5px); }
.nav__menu-btn span:nth-child(3) { transform: translateY(5px); }
.nav__menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__menu-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
/* The menu: a small white card that drops in under the bar's left end. */
.nav__menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px;
  flex-direction: column; padding: 8px; /* shown (as flex) on phones only */
  background: #fff; border-radius: var(--card-radius); box-shadow: 0 3px 30px -10px #c9c8c3;
  opacity: 0; transform: translateY(-6px); visibility: hidden;
  transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s .25s;
}
.nav__menu.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity .2s ease, transform .25s var(--ease-out); }
.nav__menu a {
  padding: 12px 16px; border-radius: 16px;
  font-size: 14px; font-weight: 300; letter-spacing: .02em; white-space: nowrap;
}
.nav__menu a:hover { background: #f2f2f2; }
@media (prefers-reduced-motion: reduce) {
  .nav__menu, .nav__menu.is-open, .nav__menu-btn span { transition: none; }
}
.nav__cart.is-bumped { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.12); } }

.nav :focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Phones and tablets: ☰ | SF | Cart, the other links move into the menu. */
@media (max-width: 900px) {
  .nav { left: 16px; right: 16px; padding: 16px; }
  .nav__menu-btn { display: grid; }
  .nav__menu { display: flex; }
  .nav__group--left, .nav__desk, .nav__brand-full { display: none; }
  .nav__brand-short { display: inline; }
}

/* ---------- Shopping bag (Figma 310:843) ----------
   A 502px white panel from the right, over the page dimmed like the
   Customise drawer: the bag's contents at the top, a note in the middle,
   totals and two pill buttons at the bottom. Light Helvetica throughout. */
.bag-scrim {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .3);
  opacity: 0; transition: opacity .45s ease;
}
.bag-scrim[hidden] { display: block; pointer-events: none; }
body.bag-open .bag-scrim { opacity: 1; }
body.bag-open { overflow: hidden; }
.bag {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(502px, 100vw);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 24px 16px; background: #fff; color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1;
  transform: translateX(100%); transition: transform .6s var(--ease-out);
}
body.bag-open .bag { transform: none; }
.bag, .bag * { box-sizing: border-box; }
.bag p, .bag h2, .bag ul, .bag dl, .bag dd { margin: 0; padding: 0; }
.bag a { color: inherit; text-decoration: none; }
.bag button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.bag :focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.bag img { display: block; }
.bag__top { display: flex; flex-direction: column; gap: 24px; min-height: 0; overflow-y: auto; margin: -4px; padding: 4px; }
/* Title, close and a hairline 8px under them. */
.bag__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid #d9d9d9;
}
.bag__title { font-size: 16px; font-weight: 300; }
.bag__close, .bag__icon { width: 24px; height: 24px; flex: none; }
.bag__items { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.bag__item { display: flex; gap: 24px; }
.bag__img { flex: none; width: 160px; height: 160px; background: #f6f5f5; overflow: hidden; }
.bag__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: scale(1.15); } /* the frame ~85% across, as in the design */
.bag__info { flex: 1; min-width: 0; height: 160px; display: flex; flex-direction: column; justify-content: space-between; }
.bag__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; }
.bag__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.bag .bag__colour { margin-top: 8px; font-size: 18px; color: #696969; }
.bag__qty { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.bag__qty span { min-width: 9px; text-align: center; }
.bag__icon:disabled { opacity: .3; cursor: default; }
.bag__icon:not(:disabled):hover { opacity: .6; }
.bag__empty { display: none; font-size: 16px; color: #696969; }
.bag.is-empty .bag__empty { display: block; }
.bag__note { font-size: 12px; font-weight: 400; color: #919191; text-align: center; }
.bag__note.is-flagged { animation: bag-flag 1.2s ease; }
@keyframes bag-flag { 15%, 60% { color: #000; transform: scale(1.04); } }
.bag__foot { display: flex; flex-direction: column; gap: 24px; }
.bag .bag__sums { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid #d9d9d9; font-size: 18px; }
.bag__sums div { display: flex; justify-content: space-between; }
.bag__buttons { display: flex; gap: 12px; }
.bag .bag__btn {
  flex: 1; height: 64px; padding: 8px 12px; border-radius: var(--pill-radius);
  font-size: 20px; font-weight: 400; line-height: 1.4;
  transition: background-color .2s ease, color .2s ease;
}
.bag .bag__btn--outline { border: 1px solid #000; }
.bag__btn--outline:hover { background: #f2f2f2; }
.bag .bag__btn--solid { background: #000; color: #fff; }
.bag .bag__btn--solid:hover { background: #333; }
@media (prefers-reduced-motion: reduce) {
  .bag, .bag-scrim { transition: none; }
  .bag__note.is-flagged { animation: none; }
}
/* Phones: the panel fills the screen; smaller photos and buttons. */
@media (max-width: 600px) {
  .bag__item { gap: 16px; }
  .bag__img { width: 120px; height: 120px; }
  .bag__info { height: 120px; }
  .bag__row, .bag .bag__colour, .bag .bag__sums { font-size: 16px; }
  .bag .bag__btn { height: 56px; font-size: 18px; }
}