/* The OG 100 storefront. Extends ../styles.css — palette, grain overlay,
   banner, and social footer all come from there. */

.og-body {
  --card: rgba(13, 39, 49, 0.45);
  --hairline: rgba(243, 232, 201, 0.22);
  --og-max: 1040px;
}

.og {
  position: relative;
  z-index: 2;
  max-width: var(--og-max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 10vw, 6rem);
}

.section-heading {
  color: var(--orange);
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}

/* ---------- Counter ---------- */
.counter {
  text-align: center;
  padding: clamp(1.5rem, 5vw, 2.75rem) 0 clamp(1rem, 3vw, 1.5rem);
}

.counter__eyebrow {
  margin: 0 0 0.35rem;
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.75;
}

.counter__readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.4rem, 1.5vw, 0.9rem);
  line-height: 0.9;
}

.counter__num {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  /* The centerpiece. Big enough to read from across a room. */
  font-size: clamp(4.5rem, 21vw, 11rem);
  color: var(--orange);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Nudge on change so a drop mid-session is felt, not just seen. */
.counter__num.is-ticking { transform: scale(1.08); }

.counter__word {
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: clamp(1.1rem, 4vw, 2.25rem);
  color: var(--cream);
  letter-spacing: 0.04em;
}

.counter__sub {
  margin: clamp(0.6rem, 2vw, 1rem) 0 0;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  color: var(--cream);
  opacity: 0.85;
}

.counter[data-state="loading"] .counter__num { opacity: 0.35; }
.counter[data-state="soldout"] .counter__num { color: var(--cream); opacity: 0.5; }
.counter[data-state="error"] .counter__num { font-size: clamp(2rem, 8vw, 3.5rem); }

/* ---------- Pitch ---------- */
.intro {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 6vw, 3.25rem);
  text-align: center;
}

.pitch__heading {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  color: var(--cream);
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  line-height: 1.2;
  margin: 0 0 0.9rem;
}

.pitch__body {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
  margin: 0 auto clamp(1.5rem, 4vw, 2rem);
  max-width: 520px;
}

/* ---------- What you get ---------- */
.perks {
  list-style: none;
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(0.75rem, 2vw, 1rem);
  text-align: left;
}

.perk {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: clamp(0.85rem, 2.2vw, 1.1rem);
}

/* The discount is the reason to buy, so it gets the accent. */
.perk--hero {
  border-color: var(--orange);
  background: rgba(240, 146, 42, 0.12);
}

.perk__title {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(0.98rem, 2vw, 1.1rem);
  margin: 0 0 0.35rem;
  color: var(--cream);
}

.perk--hero .perk__title { color: var(--orange); }

.perk__body {
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
}

.how {
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  line-height: 1.55;
  opacity: 0.8;
  margin: 0 auto;
  max-width: 520px;
}

.shop__fine {
  text-align: center;
  font-size: clamp(0.78rem, 1.4vw, 0.85rem);
  opacity: 0.7;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  max-width: 480px;
}

/* ---------- Product grid ---------- */
.shop { margin-bottom: clamp(2.5rem, 7vw, 4rem); }

.shop__status {
  text-align: center;
  opacity: 0.8;
  font-size: 0.95rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 3vw, 1.75rem);
}

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: clamp(0.9rem, 2.5vw, 1.15rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(243, 232, 201, 0.08);
  display: grid;
  place-items: center;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-area: 1 / 1;
}

.card__placeholder { grid-area: 1 / 1; }

/* Wraps the photo so it can be clicked open. Sits flush in the same grid cell
   the bare <img> used to occupy, under the gallery arrows. */
.card__zoom {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.card__zoom:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

/* ---------- Photo gallery ----------
   Controls only exist when a colour has more than one photo, so on a
   single-image card this is all inert and the media block is unchanged. */
.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 0 0.15rem;
  border: 0;
  border-radius: 999px;
  color: var(--navy);
  background: rgba(243, 232, 201, 0.88);
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease;
}

.gallery__arrow--prev { left: 0.5rem; }
.gallery__arrow--next { right: 0.5rem; }

/* An author `display` beats the browser's own rule for [hidden], so the
   attribute the script sets has to be honoured here or it does nothing. Without
   this, a colour with a single photo still reveals two dead arrows on hover —
   which is now the normal case, since each colour has one mockup. */
.gallery__arrow[hidden],
.gallery__dots[hidden] { display: none; }

/* Reveal on hover on a mouse, but always visible on touch — there is no
   hover to discover them with on a phone. */
.card:hover .gallery__arrow,
.gallery__arrow:focus-visible { opacity: 1; }

@media (pointer: coarse) {
  .gallery__arrow {
    opacity: 1;
    width: 2.75rem;
    height: 2.75rem;
  }
}

.gallery__dots {
  position: absolute;
  z-index: 1;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}

.gallery__dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(243, 232, 201, 0.45);
  box-shadow: 0 0 0 1px rgba(13, 39, 49, 0.35);
  cursor: pointer;
  transition: background 140ms ease;
}

.gallery__dot[aria-current="true"] { background: var(--orange); }

/* The arrows are the real target on touch; the dots stay a position readout
   with just enough size to be tappable if someone goes for one. */
@media (pointer: coarse) {
  .gallery__dots { gap: 0.6rem; bottom: 0.6rem; }
  .gallery__dot { width: 0.6rem; height: 0.6rem; }
}

/* ---------- Lightbox ----------
   A <dialog>, so the focus trap, Esc, and background inertness are the
   platform's job rather than ours. */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  overflow: hidden;
}

.lightbox::backdrop { background: rgba(4, 30, 32, 0.94); }

.lightbox__frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
}

/* `contain`, not `cover` — this is the view where the whole print should be
   visible, which is the entire reason for opening it. */
.lightbox__img {
  max-width: min(100%, 900px);
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.lightbox__close,
.lightbox__arrow {
  position: absolute;
  display: grid;
  place-items: center;
  font: inherit;
  color: var(--cream);
  background: rgba(4, 30, 32, 0.72);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  cursor: pointer;
  width: 2.75rem;
  height: 2.75rem;
}

.lightbox__close {
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  font-size: 1rem;
  z-index: 1;
}

.lightbox__arrow { top: 50%; transform: translateY(-50%); font-size: 1.75rem; }
.lightbox__arrow--prev { left: clamp(0.5rem, 2vw, 1.25rem); }
.lightbox__arrow--next { right: clamp(0.5rem, 2vw, 1.25rem); }

.lightbox__close:hover,
.lightbox__arrow:hover { background: var(--orange); color: #0d2731; }

.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.lightbox__counter {
  position: absolute;
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

/* The dialog is modal, but the page behind it still scrolls on iOS. */
body:has(.lightbox[open]) { overflow: hidden; }

.card__placeholder {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.45;
  text-align: center;
  padding: 1rem;
}

.card__name {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  margin: 0;
  color: var(--cream);
}

.card__price {
  font-size: 1.05rem;
  color: var(--orange);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Printful ships a wall of spec text as the description. Clamp it by default,
   because the card is a browsing surface, not a spec sheet, and let anyone
   who wants the detail tap to open it. */
.card__desc {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.8;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  display: block;
  width: 100%;
  cursor: pointer;
}

.card__desc-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Paragraphs and bullets are <span>s because a <button> may only contain
   phrasing content — a <ul> in there is invalid and confuses screen readers.
   `display: list-item` draws a real marker without needing the list element. */
.card__desc-para,
.card__desc-bullet { display: block; }

.card__desc-bullet {
  display: list-item;
  /* Marker outside so wrapped lines hang under the text rather than sliding
     back under the bullet; the margin is what keeps it inside the clamped
     box instead of being cropped off the left edge. */
  list-style: disc outside;
  margin-left: 1.1em;
}

.card__desc-para + .card__desc-para,
.card__desc-para + .card__desc-bullet { margin-top: 0.5rem; }

.card__desc[aria-expanded="true"] .card__desc-text {
  display: block;
  overflow: visible;
}

.card__desc-toggle {
  display: inline-block;
  margin-top: 0.3rem;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.8rem;
}

.card__desc:hover .card__desc-toggle,
.card__desc:focus-visible .card__desc-toggle {
  text-decoration: underline;
}

.card__desc:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Nothing is being hidden, so there is nothing to expand. */
.card__desc--short {
  cursor: default;
  opacity: 0.8;
}

.card__desc--short .card__desc-toggle { display: none; }

.card__spacer { flex: 1; }

/* ---------- Variant selectors ---------- */
.axis { display: flex; flex-direction: column; gap: 0.4rem; }

.axis__label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.axis__values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.chip--swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.45rem;
}

/* Inset ring rather than a border: pale colours (Bone, White, Light Pink)
   would otherwise disappear against the cream text and teal page. */
.chip__swatch {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  flex: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(243, 232, 201, 0.35);
}

.chip:hover { border-color: var(--cream); }

.chip[aria-pressed="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
}

.chip:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ---------- Quantity ---------- */
.qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty__btn {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.qty__btn:hover:not(:disabled) { border-color: var(--cream); }
.qty__btn:disabled { opacity: 0.3; cursor: not-allowed; }

.qty__value {
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 140ms ease, background 140ms ease;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:hover:not(:disabled) { opacity: 0.88; }

.btn--primary {
  background: var(--orange);
  color: var(--navy);
  width: 100%;
}

.btn--ghost {
  background: transparent;
  border-color: var(--cream);
  color: var(--cream);
}

.btn--add {
  background: transparent;
  border-color: var(--orange);
  color: var(--orange);
  width: 100%;
}

/* ---------- Cart ---------- */
.cart {
  max-width: 560px;
  margin: 0 auto clamp(2rem, 6vw, 3rem);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: clamp(1.1rem, 3vw, 1.5rem);
}

.cart__lines {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.line__name { flex: 1; }
.line__variant { opacity: 0.7; font-size: 0.85rem; }
.line__price { font-variant-numeric: tabular-nums; }

.line__remove {
  font: inherit;
  background: none;
  border: none;
  color: var(--cream);
  opacity: 0.55;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  line-height: 1;
  font-size: 1.1rem;
}

.line__remove:hover { opacity: 1; }

.cart__footer { border-top: 1px solid var(--hairline); padding-top: 1rem; }

.cart__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  opacity: 0.8;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.cart__total {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--hairline);
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.cart__note {
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0 0 1rem;
}

.cart__msg {
  font-size: 0.85rem;
  margin: 0.75rem 0 0;
  min-height: 1.2em;
}

.cart__msg[data-tone="error"] { color: #ffb4a2; }

/* ---------- Checkout form ---------- */
.checkout {
  max-width: 560px;
  margin: 0 auto clamp(2rem, 6vw, 3rem);
}

.form {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.field { display: flex; flex-direction: column; gap: 0.3rem; }

.field label,
.field__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.field__opt { text-transform: none; letter-spacing: 0; opacity: 0.6; }

/* Label on the left, who-takes-the-card on the right, sharing one line.
   Baselines rather than boxes, so the two sit on the same line despite the
   attribution being the shorter of the two in cap height. */
.field__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Deliberately not the label's uppercase-and-tracked treatment: this is a
   company's name, and "SQUARE" letterspaced to 0.14em stops looking like one.
   Quieter than the label too — it should be findable by anyone looking for it
   and ignorable by everyone else. */
.field__by {
  font-size: 0.72rem;
  opacity: 0.6;
  white-space: nowrap;
}

.field__hint {
  font-size: 0.78rem;
  opacity: 0.65;
  margin: 0.1rem 0 0;
}

.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
  background: rgba(13, 39, 49, 0.6);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  width: 100%;
  /* 16px minimum or iOS Safari zooms the page on focus. */
  min-height: 2.75rem;
}

/* A native select sizes itself from its own intrinsic metrics and quietly
   ignores min-height, so next to the ZIP input it came out visibly short.
   Dropping the native appearance puts it back under our box model — which
   costs us the chevron, so it gets drawn back in as a background. */
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f3e8c9' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.7rem;
}

.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

/* The select is here because State / Province is one now — without it, the one
   field most likely to be left alone is the one that wouldn't turn red. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: #ffb4a2; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  /* Bottom-align, so a label that wraps to two lines on a narrow screen
     pushes its own input down instead of leaving the pair out of step. */
  align-items: end;
}

/* A ZIP is five characters and "United States" is thirteen, so an even split
   clips the country on a narrow phone. Give the column that needs it the room. */
.field-row--country {
  grid-template-columns: 0.88fr 1.12fr;
}

/* ---------- Apple Pay ----------
   The button itself is drawn by Safari from the -apple-pay-button appearance,
   so almost nothing here is ours: only the size, the pill radius to match the
   rest of the form, and the rule that hides it everywhere it can't work. */
.wallet {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.apple-pay-button {
  display: block;
  width: 100%;
  height: 2.9rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: buy;
  /* White on the navy card; the black variant disappears into it. */
  -apple-pay-button-style: white;
}

.apple-pay-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Safari without Apple Pay ignores the appearance and would leave a bare
   empty button, so treat "the appearance didn't take" as "don't show it". */
@supports not (-webkit-appearance: -apple-pay-button) {
  .wallet { display: none; }
}

.wallet__or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.wallet__or::before,
.wallet__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* Square renders the card fields in an iframe here — no card data ever
   reaches this page's JavaScript.

   The frame and fill live inside the iframe now (CARD_STYLE in og.js), so this
   is only a reserved box; giving it a border too would draw a second one
   around Square's. */
.card-container {
  min-height: 3.25rem;
}

.form__fineprint {
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 0;
}

.form__status {
  font-size: 0.88rem;
  margin: 0;
  min-height: 1.2em;
  text-align: center;
}

.form__status[data-tone="error"] { color: #ffb4a2; }
.form__status[data-tone="working"] { color: var(--cream); opacity: 0.85; }

.btn--back {
  width: 100%;
  font-weight: 600;
  border-color: var(--hairline);
}

/* ---------- Order placed ---------- */
.done {
  max-width: 560px;
  margin: 0 auto clamp(2rem, 6vw, 3rem);
  text-align: center;
}

.done__heading {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  color: var(--orange);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin: 0 0 1rem;
}

.done__body {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
  margin: 0 0 1rem;
}

.done__meta {
  font-size: 0.8rem;
  opacity: 0.65;
  margin: 0 0 1.5rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 640px;
  margin: 0 auto clamp(2rem, 6vw, 3rem);
}

.faq__item {
  border-bottom: 1px solid var(--hairline);
}

.faq__item:first-of-type {
  border-top: 1px solid var(--hairline);
}

.faq__q {
  /* Kills Safari's default disclosure triangle so the ::after chevron below
     is the only marker; `list-style: none` alone doesn't do it there. */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.85rem, 2.2vw, 1rem) 0;
  font-weight: 700;
  font-size: clamp(0.92rem, 1.8vw, 1rem);
  color: var(--cream);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "+";
  flex: none;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--orange);
  transition: transform 160ms ease;
}

.faq__item[open] .faq__q::after {
  content: "−";
  transform: rotate(180deg);
}

.faq__q:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

.faq__a {
  padding: 0 0 clamp(0.85rem, 2.2vw, 1.1rem);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
  max-width: 56ch;
}

.faq__a p { margin: 0 0 0.7rem; }
.faq__a p:last-child { margin-bottom: 0; }

.faq__a a { color: var(--orange); }

/* ---------- Sticky order bar ---------- */
.cartbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(13, 39, 49, 0.96);
  border-top: 1px solid var(--hairline);
  backdrop-filter: blur(8px);
  padding: 0.75rem var(--gutter);
  /* Clear the iPhone home indicator. */
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(0);
  transition: transform 200ms ease, opacity 200ms ease;
}

/* Slide away rather than vanish, so it doesn't flicker while scrolling. */
.cartbar[data-tucked="true"] {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

.cartbar__inner {
  max-width: var(--og-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cartbar__summary {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.cartbar__count {
  font-size: 0.8rem;
  opacity: 0.75;
  white-space: nowrap;
}

.cartbar__total {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.cartbar__btn {
  width: auto;
  flex: none;
  padding-inline: 1.6rem;
}

/* Keep the footer clear of the bar while it's up. */
.og-body.has-cartbar .og { padding-bottom: 7rem; }

/* ---------- Add confirmation ---------- */
.btn--add.is-added {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
}

/* Brief ring when a line lands, so the cart itself reads as "something
   changed" for anyone who happens to be looking at it. */
@keyframes cart-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(240, 146, 42, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(240, 146, 42, 0); }
}

.cart.is-updated { animation: cart-pulse 600ms ease-out; }

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

/* ---------- Sold out ---------- */
.soldout {
  max-width: 560px;
  margin: 0 auto clamp(2rem, 6vw, 3rem);
  text-align: center;
}

.soldout__heading {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  color: var(--orange);
  font-size: clamp(1.4rem, 4vw, 2rem);
  margin: 0 0 1rem;
}

.soldout__body {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
  margin: 0 0 1rem;
}

/* ---------- Touch targets ----------
   Chips sized for a mouse come out ~29px tall, well under the ~44px a finger
   needs. Ten colour chips packed five rows deep on a phone is exactly where
   mis-taps happen, so give them room on touch devices only. */
@media (pointer: coarse) {
  .chip {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  .qty__btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .line__remove {
    padding: 0.6rem 0.75rem;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .counter__num,
  .btn,
  .chip { transition: none; }
}