/* 2ND STREET USED GOODS SHOP - public site.
   Mobile first. Breakpoints: 768px, 1024px, 1280px.
   Colours are defined once, here. Use the variables everywhere else. */

:root {
  --color-primary: #5D4037;
  --color-primary-dark: #4A332C;
  --color-text: #1A1A1A;
  --color-muted: #5A5148;
  --color-bg: #FFFFFF;
  --color-soft: #F6F3F1;
  --color-line: #E0D9D4;
  --color-placeholder: #EDE7E3;
  --color-on-primary: #FFFFFF;
  --color-on-primary-muted: #EADFD9;
  --color-line-on-primary: rgb(255 255 255 / 0.3);
  --color-overlay: rgb(26 26 26 / 0.88);
  --color-focus: var(--color-text);
  --color-field: #857B72;         /* the border of a form control: 4:1 against white, so that it can be seen (WCAG 1.4.11) */
  --color-alert: #8E2020;         /* something the visitor must fix before going on */
  --color-alert-bg: #FBEBEB;
  --color-caution: #7A5200;       /* something to read before going on */
  --color-caution-bg: #FFF4DB;
  --shadow-play: 0 2px 10px rgb(26 26 26 / 0.35);

  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 85rem;           /* the content is never wider than 1360px */
  --gutter: 1rem;               /* space left and right of the content (wider screens: see the 768px and 1024px blocks) */
  --measure: 72ch;              /* longest line of running text, used from 1024px on */
  --video-max-height: 30rem;    /* tallest store video on a wide screen: 480px */
  --radius: 8px;
  --radius-sm: 6px;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-primary-dark);
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  line-height: 1.25;
  color: var(--color-text);
}

h1 {
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
}

h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 1rem;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.on-dark {
  --color-focus: var(--color-on-primary);
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.skip-link:focus {
  top: 0.5rem;
  color: var(--color-on-primary);
  outline-color: var(--color-on-primary);
}

.muted {
  color: var(--color-muted);
}

.preline {
  white-space: pre-line;
}

.nowrap {
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Header ---------- */

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  color: var(--color-primary);
  line-height: 1;
  text-decoration: none;
}

.logo:hover {
  color: var(--color-primary);
}

.logo__main {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.logo__sub {
  margin-top: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--color-text);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0 0.875rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-primary);
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__icon::before {
  top: -6px;
}

.nav-toggle__icon::after {
  top: 6px;
}

.nav-check:focus-visible + .nav-toggle {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.site-nav {
  display: none;
  flex-basis: 100%;
}

.nav-check:checked ~ .site-nav {
  display: block;
}

.site-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: block;
  padding: 0.875rem 0.25rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--color-primary);
}

.site-nav__link[aria-current="page"] {
  padding-left: 0.75rem;
  color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* The number of items in the cart, behind the word "Cart" in the menu (static/public/site.js writes it
   from the storage of the browser; GO's decision of 2026-10-24). */
.site-nav__count {
  margin-left: 0.3rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.625rem 1.25rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
}

.btn--outline {
  background: var(--color-bg);
  color: var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-soft);
  color: var(--color-primary-dark);
}

.btn--light {
  border-color: var(--color-bg);
  background: var(--color-bg);
  color: var(--color-primary);
}

.btn--light:hover {
  border-color: var(--color-soft);
  background: var(--color-soft);
  color: var(--color-primary-dark);
}

.btn--outline-light {
  border-color: var(--color-on-primary);
  background: transparent;
  color: var(--color-on-primary);
}

.btn--outline-light:hover {
  background: var(--color-on-primary);
  color: var(--color-primary);
}

.btn--block {
  display: flex;
  width: 100%;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta-row--stacked {
  flex-direction: column;
}

.cta-row--stacked .btn {
  width: 100%;
}

/* ---------- Condition badge ---------- */

.badge {
  display: inline-block;
  padding: 0.125rem 0.75rem;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

a.badge:hover {
  background: var(--color-soft);
  color: var(--color-primary-dark);
}

.badge--small {
  padding: 0 0.5rem;
  font-size: 0.75rem;
}

/* ---------- Hero band, sections, page heads ---------- */

/* The band at the top of the home page and of the item lists (GO's instruction of 2026-10-24). It carries
   the footer's own brown -- the same variable .site-footer uses -- so the two read as one frame around
   the page, and the white header above ends in its own border, so the edge of the band is plain to see.
   The text is light on the brown: --color-on-primary and --color-on-primary-muted both stand at least
   4.5:1 against it (tests/test_layout_css.py keeps the ratio). */
.hero-band {
  padding: 2.5rem 0 3rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.hero-band__inner {
  position: relative;
}

.hero-band__name {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-on-primary-muted);
}

.hero-band__title {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-on-primary);
}

.hero-band__rule {
  max-width: 6rem;
  margin: 0 0 1.25rem;
  border: 0;
  border-top: 1px solid var(--color-line-on-primary);
}

.hero-band__line {
  max-width: 46rem;
  margin: 0 0 0.75rem;
  color: var(--color-on-primary-muted);
}

.hero-band__text .cta-row {
  margin-top: 1.5rem;
}

/* The two buttons of the band: light on the brown, like the footer's own text. */
.hero-band__primary {
  border-color: var(--color-bg);
  background: var(--color-bg);
  color: var(--color-primary);
}

.hero-band__primary:hover {
  border-color: var(--color-soft);
  background: var(--color-soft);
  color: var(--color-primary-dark);
}

.hero-band__outline {
  border-color: var(--color-on-primary);
  background: transparent;
  color: var(--color-on-primary);
}

.hero-band__outline:hover {
  background: var(--color-on-primary);
  color: var(--color-primary);
}

/* With a photo, on a phone: the photo on top, cut to its left (where the subject is), the text below on the
   brown. The base rule caps every img at 100% of its box, so the band never widens a phone. */
.hero-band--photo .hero-band__back {
  margin: 0 var(--gutter) 1.75rem;
}

.hero-band--photo .hero-band__back img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  object-position: left center;
  border-radius: var(--radius);
}

.section {
  padding: 2.25rem 0;
}

.section--soft {
  background: var(--color-soft);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 1.25rem;
}

.section__title {
  margin: 0 0 1rem;
}

.section__head .section__title {
  margin: 0;
}

.section__link {
  font-weight: 700;
}

.section--tight {
  padding-bottom: 0;
  padding-top: 1.75rem;
}

.section__lead {
  max-width: 46rem;
  margin: -0.5rem 0 1.5rem;
  color: var(--color-muted);
}

.page-head {
  padding: 1.75rem 0 2rem;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-soft);
}

.page-head h1 {
  margin: 0 0 0.5rem;
  color: var(--color-primary);
}

.page-head__lead {
  max-width: 46rem;
  margin: 0;
  color: var(--color-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--color-muted);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.prose > * {
  max-width: 46rem;
}

.prose h2 {
  margin: 2rem 0 0.5rem;
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 1.5rem 0 0.5rem;
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.375rem;
}

.note {
  max-width: 46rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-soft);
  font-size: 0.9375rem;
}

.section--soft .note {
  background: var(--color-bg);
}

.empty {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-soft);
  color: var(--color-muted);
}

/* ---------- Category tiles, brand list, step flow ---------- */

.tiles {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.tile__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--color-placeholder);
}

.tile--plain .tile__media {
  border: 1px solid var(--color-line);
}

.tile__plain-name {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
}

.tile__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile__label {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.125rem 0;
}

.tile__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary);
}

.tile:hover .tile__name {
  text-decoration: underline;
}

.tile__count {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.brands {
  margin: 0 0 1.5rem;
  color: var(--color-muted);
}

.tiles + .brands {
  margin: 1.5rem 0 0;
}

.brands__label {
  font-weight: 700;
  color: var(--color-text);
}

.flow {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.flow__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
}

.flow__icon .icon {
  width: 2rem;
  height: 2rem;
}

.flow__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
}

.flow__num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.875rem;
}

.flow__body p {
  margin: 0;
}

.flow + .cta-row {
  margin-top: 2rem;
}

.steps {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 1.25rem 1.25rem 0.5rem 4rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 800;
}

.step__title {
  margin: 0.25rem 0 0.25rem;
}

/* ---------- Item grid and cards ---------- */

.grid {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.card:hover {
  border-color: var(--color-primary);
}

.card:has(.card__link:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-placeholder);
}

.card__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__tag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  background: var(--color-overlay);
  color: var(--color-on-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0.75rem;
}

.card__brand {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.card__title {
  display: -webkit-box;
  margin: 0.125rem 0 0;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card__link {
  color: var(--color-text);
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.card__link:hover {
  color: var(--color-primary);
}

.card__condition {
  margin: 0.375rem 0 0;
}

.card__price {
  margin: auto 0 0;
  padding-top: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-primary);
}

.price__note {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.filter__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.filter__link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter__link[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.filter__count {
  font-weight: 400;
}

/* ---------- Item page ---------- */

.item {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
}

.item__layout {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}

.item__head {
  margin: 0 0 0.5rem;
}

.item__brand {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.item__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  overflow-wrap: anywhere;
}

.item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
}

.item__no {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.item__price {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-primary);
}

.item__subtitle {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.125rem;
}

.item__video {
  margin-top: 1rem;   /* with the 1.5rem gap of the layout: 2.5rem above the video, as it was below the layout */
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
}

.item__video .item__subtitle {
  margin-top: 0;
}

.item__back {
  margin: 2rem 0 0;
}

.gallery {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery__link {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-placeholder);
}

.gallery__link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery__caption {
  display: block;
  padding: 0.375rem 0.125rem 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Item photos: one large photo, then a row of small square thumbnails. */
.gallery--feature {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery--feature .gallery__link img {
  aspect-ratio: 1 / 1;
}

.gallery--feature .gallery__item:first-child {
  grid-column: 1 / -1;
}

.gallery--feature .gallery__item:first-child img {
  aspect-ratio: auto;
  max-height: 80vh;
  object-fit: contain;
}

.facts {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr);
  column-gap: 1rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--color-line);
}

.facts dt,
.facts dd {
  margin: 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-line);
  overflow-wrap: anywhere;
}

.facts dt {
  font-weight: 700;
}

.facts--compact {
  margin-bottom: 0;
}

.bullets,
.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bullets li,
.checklist li {
  position: relative;
  padding-left: 1.5rem;
}

.bullets li + li,
.checklist li + li {
  margin-top: 0.25rem;
}

.bullets li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0.35rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.checklist li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0.35rem;
  width: 0.4rem;
  height: 0.75rem;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Condition Guide ---------- */

.guide {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.guide__item {
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.guide__rank {
  margin: 0 0 0.25rem;
  font-weight: 800;
  color: var(--color-primary);
}

.guide__note {
  margin: 1rem 0 0;
  color: var(--color-muted);
}

.guide__text {
  margin: 0;
  font-size: 0.9375rem;
}

/* ---------- Tap-to-load embeds (video, map) ---------- */

.embed {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-soft);
}

.embed--landscape,
.embed--map {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.embed--landscape {
  --ar: 1.7778;
}

.embed--portrait {
  --ar: 0.5625;   /* width divided by height, for the video row */
  width: min(100%, 45vh);
  aspect-ratio: 9 / 16;
}

.embed__button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-on-primary);
  font: inherit;
  cursor: pointer;
}

.embed__poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.embed__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

.embed__stage {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.embed__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-primary);
  box-shadow: var(--shadow-play);
}

.embed__play .icon {
  width: 2rem;
  height: 2rem;
}

.embed__button:hover .embed__play {
  background: var(--color-soft);
}

.embed__button:focus-visible {
  outline-offset: -3px;
}

.embed__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  line-height: 1.25;
  text-align: left;
}

.embed__button:hover .embed__bar {
  background: var(--color-primary-dark);
}

.icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}

.icon--line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.embed__label {
  font-weight: 700;
}

.embed__note {
  font-size: 0.75rem;
  color: var(--color-on-primary-muted);
}

.embed__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed__fallback {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-weight: 700;
  text-align: center;
}

.embed__links {
  margin: 0.75rem 0 0;
}

.video-card {
  margin-left: auto;
  margin-right: auto;
}

.video-card--portrait {
  width: min(100%, 45vh);   /* a 9:16 frame is never taller than 80% of the screen */
}

.video-card--landscape {
  width: min(100%, 44rem);
}

/* Several videos (up to three, GO's decision of 2026-10-23): the card takes the column and the videos line
   up inside it, each in its own shape. */
.video-card--row {
  width: 100%;
}

.video-row--tight {
  margin-top: 0;
}

.video-card .embed {
  width: 100%;
}

.video-card__caption {
  padding-top: 1rem;
}

.video-card__title {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.video-card__price {
  margin: 0.125rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary);
}

.video-row {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
}

@media (scripting: none) {
  .embed__button,
  .embed--map {
    display: none;
  }
}

/* ---------- FAQ / disclosure ---------- */

.disclosure {
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-primary);
}

.disclosure[open] > summary::after {
  content: "\2212";
}

.disclosure__body {
  padding: 0 1.25rem 1.25rem;
}

.disclosure__body > :last-child {
  margin-bottom: 0;
}

.faq > .disclosure {
  max-width: 50rem;
}

/* ---------- Contact and Find us ---------- */

.contact-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.contact-card p {
  margin: 0;
}

.contact-card__title {
  margin: 0;
  font-size: 1.125rem;
  color: var(--color-primary);
}

.contact-card .btn {
  margin-top: auto;
}

.contact-more {
  margin-top: 2.5rem;
}

.find {
  display: grid;
  gap: 2rem;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 0;
  padding: 2.5rem 0 1.5rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.site-footer a {
  color: var(--color-on-primary);
}

.footer-grid {
  display: grid;
  gap: 2rem;
}

.footer-heading {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-primary-muted);
}

.footer-address {
  margin: 0 0 0.75rem;
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list li + li {
  margin-top: 0.5rem;
}

.site-footer p {
  margin: 0 0 0.75rem;
}

.site-footer .footer-notice {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-on-primary-muted);
}

.site-footer .footer-independence {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line-on-primary);
  font-size: 0.9375rem;
}

/* ---------- Photo viewer (built by site.js) ---------- */

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-on-primary);
  --color-focus: var(--color-on-primary);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: var(--color-overlay);
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 7rem);
  margin: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  object-fit: contain;
}

.lightbox__caption {
  font-size: 0.875rem;
}

.lightbox__button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--color-on-primary);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__button:hover {
  background: var(--color-primary-dark);
}

.lightbox__close {
  top: 0.75rem;
  right: 0.75rem;
}

.lightbox__prev {
  left: 0.5rem;
}

.lightbox__next {
  right: 0.5rem;
}

body.lightbox-open {
  overflow: hidden;
}

/* ---------- 768px ---------- */

@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    flex-basis: auto;
  }

  .site-nav__list {
    display: flex;
    gap: 0.25rem;
  }

  .site-nav__link {
    padding: 0.5rem 0.5rem;
    border-top: 0;
    border-radius: var(--radius-sm);
  }

  .site-nav__link:hover {
    background: var(--color-soft);
  }

  .site-nav__link[aria-current="page"] {
    padding-left: 0.5rem;
    box-shadow: inset 0 -3px 0 var(--color-primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .hero-band {
    padding: 4rem 0 4.5rem;
  }

  .section {
    padding: 3.25rem 0;
  }

  .page-head {
    padding: 2.5rem 0 2.75rem;
  }

  .grid {
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .facts {
    grid-template-columns: minmax(6.5rem, 10rem) minmax(0, 1fr);
  }

  .item__video .item__subtitle {
    text-align: center;
  }

  .tiles {
    gap: 1.5rem;
  }

  .tile__media {
    aspect-ratio: 16 / 10;
  }

  .flow {
    gap: 2.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .flow__step {
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
  }

  .flow__title {
    justify-content: center;
  }

  .flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.55rem;
    right: -1.75rem;
    width: 0.9rem;
    height: 0.9rem;
    border: solid var(--color-primary);
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
  }

  .steps--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery:not(.gallery--feature) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .find {
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .footer-grid {
    gap: 2.5rem;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 1024px ---------- */

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  /* The side space grows with the screen: 24px at 1000px, 48px from 1920px on. */
  :root {
    --gutter: clamp(1.5rem, 2.5vw, 3rem);
  }

  /* Photos and cards use the whole width. Running text keeps to a readable line length. */
  .section__lead,
  .page-head__lead,
  .prose > *,
  .note {
    max-width: var(--measure);
  }

  /* With a photo, the band is the photo: the photo is in the flow, so the band is exactly as tall as the
     photo's own ratio (its width and height are stored on upload and carried in the img tag, GO's
     correction of 2026-10-24). The floor keeps room for the text and the buttons, the cap is 820px; when
     either cuts in, the photo is cut top and bottom, left centre first (the subject stays). The text sits
     over the photo's empty right side, from 60% of the width, vertically centred, in the footer's brown. */
  .hero-band--photo {
    position: relative;
    padding: 0;
  }

  .hero-band--photo .hero-band__back {
    margin: 0;
  }

  .hero-band--photo .hero-band__back img {
    width: 100%;
    height: auto;
    min-height: 30rem;
    max-height: 820px;
    object-fit: cover;
    object-position: left center;
    border-radius: 0;
  }

  /* The text over the photo: the container itself is laid over the band (centred by its own margins, as
     everywhere else), and the text starts at 60% of it, vertically centred. */
  .hero-band--photo .hero-band__inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
  }

  .hero-band--photo .hero-band__text {
    margin-left: 60%;
  }

  .hero-band--photo .hero-band__name,
  .hero-band--photo .hero-band__title,
  .hero-band--photo .hero-band__line {
    color: var(--color-primary);
  }

  .hero-band--photo .hero-band__rule {
    border-top-color: var(--color-primary);
  }

  .hero-band--photo .hero-band__primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

  .hero-band--photo .hero-band__primary:hover {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
    color: var(--color-on-primary);
  }

  .hero-band--photo .hero-band__outline {
    border-color: var(--color-primary);
    background: transparent;
    color: var(--color-primary);
  }

  .hero-band--photo .hero-band__outline:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

  .site-nav__link {
    padding: 0.5rem 0.75rem;
  }

  .site-nav__link[aria-current="page"] {
    padding-left: 0.75rem;
  }

  .item__layout {
    column-gap: 2.5rem;
    grid-template-areas:
      "gallery info"
      "video info";
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .item__gallery {
    grid-area: gallery;
  }

  .item__info {
    grid-area: info;
  }

  .item__video {
    grid-area: video;
    margin-top: 0.5rem;
  }

  .item__video .item__subtitle {
    text-align: left;
  }

  .item__video .video-card {
    margin-left: 0;
    margin-right: 0;
  }

  .card__title {
    font-size: 1rem;
  }

  /* Store videos side by side. Every video in a row is the same height, and none is taller than
     --video-max-height: a video's share of the row follows its shape (--ar), so a tall and a wide
     one come out equally high. */
  .video-row {
    display: flex;
    gap: 1.25rem;
  }

  .video-row .embed {
    flex: var(--ar) 1 0%;
    width: auto;
    max-width: calc(var(--video-max-height) * var(--ar));
  }

  /* FAQ: one column, no wider than running text (the same 72-character rule). */
  .faq > .disclosure {
    max-width: var(--measure);
  }
}

/* ---------- 1280px ---------- */

@media (min-width: 1280px) {
  .grid--items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Search and sort above the item lists (the client's request of 2026-10-25) ---------- */

/* One row on a wide screen; on a phone the search takes the row and the sort comes under it.
   Neither field can widen the page: both stay inside the width they are given. */
.listing-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin: 0 0 1.25rem;
}

.listing-tools__search {
  flex: 1 1 16rem;
  min-width: 0;
}

.listing-tools__sort {
  flex: 0 1 auto;
  min-width: 0;
}

.listing-tools label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.listing-tools input,
.listing-tools select {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}

.listing-tools input:focus,
.listing-tools select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* A card the search did not match is taken out of the grid (the script sets hidden on it). */
.grid > li[hidden] {
  display: none;
}

/* The message a search shows when it found nothing. */
.search-empty {
  margin: 1rem 0;
}

/* ---------- The online shop (2NDSHOP-T2) ---------- */

/* Top page: the shop's address. */
.shop-address {
  margin: 0 0 0.5rem;
  font-style: normal;
}

/* Browse by brand: names only, no logos (REFERENCES.md). */
.brand-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-list__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}

.brand-list__link:hover {
  border-color: var(--color-primary);
}

.brand-list__link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.brand-list__count {
  color: var(--color-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

.brands__link {
  color: inherit;
}

/* A listing card shows its second photo while the pointer is over it. A phone has no pointer, so it
   shows the first photo only (2NDSHOP-T2 section 4-6). */
.card__media-alt {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media-alt {
    opacity: 1;
  }
}

.card__tag--reserved {
  background: var(--color-primary);
}

/* Add to cart (GO's decision of 2026-10-24; a browser that runs no script gets a "Buy now" link to the
   checkout of the one item instead), or Reserved while somebody is paying for the item, or -- while online
   ordering is closed (no card payment and no bank account) -- the guidance to the store and to an inquiry. */
.buy {
  margin: 1.25rem 0;
}

.buy noscript {
  display: block;
  margin-top: 0.5rem;
}

.buy__feedback {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

.buy--reserved,
.buy--closed {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-soft);
}

.item__price-note {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

/* The checkout: the item on one side, the buyer's details on the other. One column on a phone. */
.checkout {
  display: grid;
  gap: 2rem;
}

.checkout__summary {
  align-self: start;
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-soft);
}

.checkout__heading {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}

.checkout__photo {
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.checkout__item {
  margin: 0.75rem 0 0;
}

.checkout__brand {
  color: var(--color-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout__price {
  margin: 0.5rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.checkout__note {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

/* One item of the cart in the summary, and the total of the order (GO's decision of 2026-10-24: an order
   holds the items of one cart). A line is a small photo, the name of the item, and its price. */
.checkout__line {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-line);
}

.checkout__line:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.checkout__line .checkout__photo {
  width: 4.5rem;
  height: 4.5rem;
}

.checkout__line .checkout__item {
  margin: 0;
}

.checkout__line .checkout__price {
  grid-column: 2;
  margin: 0.25rem 0 0;
  font-size: 1.125rem;
}

.checkout__total {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-line);
  font-size: 1.25rem;
}

/* The cart page (GO's decision of 2026-10-24). The shell is generated; static/public/site.js draws the
   lines from the storage of the browser itself. */
.cart__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart__line {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 0.75rem;
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-line);
}

.cart__line:first-child {
  border-top: 0;
}

.cart__photo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.cart__name {
  margin: 0;
  font-weight: 600;
}

.cart__meta {
  margin: 0.25rem 0 0.5rem;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.cart__total {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-line);
  font-size: 1.5rem;
  font-weight: 700;
}

.cart__shipping {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.cart__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1.25rem 0 0;
}

.cart__browse,
.cart__empty,
.cart__note {
  margin: 0 0 1rem;
}

.cart__actions .cart__browse {
  margin: 0;
}

.cart__note {
  color: var(--color-muted);
}

/* The form of the checkout. The admin panel has its own; this one is the public site's. */
.checkout .field {
  margin: 0 0 1rem;
}

.checkout .field label,
.checkout .field legend {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.checkout .field input,
.checkout .field textarea,
.checkout .field select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-field);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: inherit;
  font: inherit;
}

.checkout .field input:focus-visible,
.checkout .field textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.checkout .field .hint {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.checkout .field .error {
  margin: 0.35rem 0 0;
  color: var(--color-alert);
  font-size: 0.9375rem;
  font-weight: 600;
}

.checkout .field--error input,
.checkout .field--error textarea {
  border-color: var(--color-alert);
}

.checkout .choice {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-weight: 400;
}

.checkout .choice input {
  width: auto;
  margin-top: 0.3rem;
}

.checkout .form-two {
  display: grid;
  gap: 0 1rem;
}

.checkout .notice {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-alert);
  border-radius: var(--radius-sm);
  background: var(--color-alert-bg);
  color: var(--color-alert);
  font-weight: 600;
}

.checkout .notice--warn {
  border-color: var(--color-caution);
  background: var(--color-caution-bg);
  color: var(--color-caution);
}

.checkout .actions {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .brand-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .checkout .form-two {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .checkout {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: start;
  }

  .brand-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}