/* greendays.day/shop. Sits on top of /field-guide.css (tokens, .fg-* pieces)
   and borrows the market year's indigo and paprika for the heading. */

.sh-page { max-width: 1040px; margin: 0 auto; padding: 32px 20px 64px; }

.sh-grid { display: grid; gap: 28px; }
@media (min-width: 860px) {
  .sh-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .sh-figure { position: sticky; top: 24px; }
}

.sh-figure { margin: 0; }
/* Carousel: native horizontal scroll with snap, so a phone swipes it for
   free; the arrows and dots are a convenience on top. */
.sh-carousel { position: relative; }
.sh-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: 6px; background: #ece6d8; scrollbar-width: none; -ms-overflow-style: none;
}
.sh-track::-webkit-scrollbar { display: none; }
.sh-track:focus-visible { outline: 3px solid #42917c; outline-offset: 2px; }
.sh-slide { flex: 0 0 100%; scroll-snap-align: start; }
.sh-slide img { display: block; width: 100%; height: auto; }
.sh-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(252, 248, 238, 0.92); color: #1f3661;
  font: 800 26px/1 'Nunito', sans-serif; padding-bottom: 3px;
  box-shadow: 0 1px 4px rgba(31, 54, 97, 0.18);
}
.sh-prev { left: 10px; } .sh-next { right: 10px; }
.sh-arrow[disabled] { opacity: 0; pointer-events: none; }
.sh-arrow:focus-visible { outline: 3px solid #42917c; outline-offset: 2px; }
@media (hover: none) { .sh-arrow { display: none; } }
.sh-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.sh-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d9d3c4; cursor: pointer; }
.sh-dots button.is-on { background: #1f3661; }
.sh-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--fg-ink-soft); }

.sh-panel h1 {
  margin: 0; font-size: 44px; line-height: 1.05; font-weight: 800;
  letter-spacing: -0.018em; color: #1f3661;
}
.sh-epithet {
  margin: 2px 0 18px; font-family: 'Annie Use Your Telescope', cursive;
  font-size: 24px; color: #b23c1a;
}
.sh-panel .fg-body { margin: 0 0 14px; }

.sh-form { margin-top: 26px; }
.sh-form fieldset { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.sh-form legend {
  padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-ink-soft);
}
.sh-form legend label { cursor: default; }

/* Radios stay real inputs (keyboard, screen readers); the chip is the label. */
.sh-chips, .sh-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-chips label, .sh-sizes label { position: relative; cursor: pointer; }
.sh-chips input, .sh-sizes input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.sh-chip, .sh-sizes span {
  display: block; border: 1.5px solid #d9d3c4; border-radius: 10px;
  background: #fffdf7; color: #1f3661;
}
.sh-chip { padding: 8px 12px; }
.sh-chip b {
  display: block; font-family: 'Nunito', 'JetBrains Mono', sans-serif;
  font-weight: 800; font-size: 17px; line-height: 1.2;
}
.sh-chip small {
  display: block; margin-top: 2px; font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-ink-soft);
}
.sh-sizes span {
  min-width: 52px; padding: 10px 12px; text-align: center;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 16px;
}
.sh-chips input:checked + .sh-chip,
.sh-sizes input:checked + span { border-color: #1f3661; background: #1f3661; color: #fcf8ee; }
.sh-chips input:checked + .sh-chip small { color: #c9d3e6; }
.sh-chips input:focus-visible + .sh-chip,
.sh-sizes input:focus-visible + span { outline: 3px solid #42917c; outline-offset: 2px; }

.sh-fit { margin-top: 12px; font-size: 14px; color: var(--fg-ink-soft); }
.sh-fit summary { cursor: pointer; color: #35735b; font-weight: 700; }
.sh-fit table { margin-top: 10px; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.sh-fit th, .sh-fit td { padding: 4px 12px 4px 0; text-align: left; }
.sh-fit thead th { color: var(--fg-ink); }
.sh-fit p { margin: 8px 0 0; }

#sh-country {
  width: 100%; max-width: 360px; padding: 11px 44px 11px 12px; font: inherit; font-size: 16px;
  color: var(--fg-ink); background-color: #fffdf7; border: 1.5px solid #d9d3c4; border-radius: 10px;
  /* The native arrow sits jammed against the edge in Safari; draw our own. */
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%231f3661' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px;
}
#sh-country:focus-visible { outline: 3px solid #42917c; outline-offset: 2px; }

.sh-quote { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--fg-ink); }
.sh-quote small { display: block; font-weight: 400; font-size: 14px; color: var(--fg-ink-soft); }
.sh-buy { border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 16px; padding: 14px 26px; margin-top: 16px; }
.sh-buy[disabled] { opacity: 0.45; cursor: default; }
.sh-error { margin: 12px 0 0; color: #b23c1a; font-weight: 700; }

.sh-facts { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--fg-border); font-size: 14.5px; }
.sh-facts dt { font-weight: 800; color: #1f3661; margin-top: 12px; }
.sh-facts dd { margin: 2px 0 0; color: var(--fg-ink-soft); }
.sh-facts a, .sh-thanks a { color: #35735b; font-weight: 700; }

.sh-thanks { max-width: 560px; }
.sh-thanks h1 { margin: 0 0 6px; font-size: 38px; line-height: 1.1; font-weight: 800; color: #1f3661; }
.sh-thanks h2 { margin: 36px 0 8px; font-size: 20px; color: #1f3661; }
.sh-steps { padding-left: 20px; }
.sh-steps li { margin-bottom: 8px; }