/* shop-kit storefront. Restyle a site's shop by overriding these on :root. */
:root {
  --shop-accent: #2f6b3b;
  --shop-accent-fg: #ffffff;
  --shop-bg: #fbfaf6;
  --shop-fg: #1f2420;
  --shop-muted: #5f665f;
  --shop-line: #dcdcd2;
  --shop-surface: #ffffff;
  --shop-warn: #a33a1f;
  --shop-radius: 10px;
  --shop-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[hidden] { display: none !important; }

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

body.shop {
  margin: 0;
  background: var(--shop-bg);
  color: var(--shop-fg);
  font-family: var(--shop-font);
  font-size: 1rem;
  line-height: 1.5;
}

.shop a { color: var(--shop-accent); }

.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--shop-line);
  background: var(--shop-surface);
}
.shop-brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--shop-fg) !important; }
.shop-nav { display: flex; gap: 1rem; }
.shop-nav { align-items: center; flex-wrap: wrap; }
.shop-nav a { text-decoration: none; font-weight: 600; }
.shop-nav a.shop-next-pill { font-weight: 500; font-size: .85rem; padding: .1rem .7rem;
  border: 1px solid var(--shop-line); border-radius: 999px; color: var(--shop-muted); }
.shop-nav a.shop-next-pill-now { color: var(--shop-fg); border-color: var(--shop-accent); }

.shop-main { max-width: 68rem; margin: 0 auto; padding: 1rem; }
.shop-title { font-size: 1.6rem; margin: 0.25rem 0 1rem; }
.shop-muted { color: var(--shop-muted); }
.shop-note { color: var(--shop-muted); }
.shop-ordering { list-style: none; margin: 0 0 1rem; padding: 0; }
.shop-ordering li { font-weight: 600; }

.shop-badge {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--shop-accent);
  color: var(--shop-accent-fg);
  font-size: 0.8rem;
  text-align: center;
}

/* buttons & forms */
.shop-button, .shop-button-small {
  display: inline-block;
  border: 0;
  border-radius: var(--shop-radius);
  background: var(--shop-accent);
  color: var(--shop-accent-fg) !important;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.shop-button { padding: 0.75rem 1.25rem; min-height: 44px; }
.shop-button-small { padding: 0.4rem 0.8rem; }
.shop-link-button {
  border: 0; background: none; padding: 0.4rem 0;
  color: var(--shop-warn); font: inherit; text-decoration: underline; cursor: pointer;
}

.shop-field { margin: 0 0 1rem; border: 0; padding: 0; }
.shop-field > label, .shop-field > legend { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.shop input[type="text"], .shop input:not([type]), .shop input[type="email"], .shop input[type="tel"],
.shop input[type="number"], .shop select, .shop textarea {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: var(--shop-surface);
  color: var(--shop-fg);
  max-width: 100%;
}
.shop-form input:not([type="radio"]):not([type="checkbox"]), .shop-form textarea { width: 100%; }
.shop-check { display: block; padding: 0.2rem 0; }
.shop-error { color: var(--shop-warn); font-weight: 600; margin: 0.25rem 0; }
.shop-flash {
  background: var(--shop-surface);
  border-left: 4px solid var(--shop-accent);
  padding: 0.6rem 0.8rem;
  border-radius: var(--shop-radius);
}

/* catalog */
.shop-catalog { display: grid; gap: 1rem; }
.shop-filter-toggle { display: none; }
.shop-filters {
  background: var(--shop-surface);
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  padding: 1rem;
}
.shop-price-range label { display: inline-block; margin-right: 0.5rem; }
.shop-price-range input { width: 5.5em; }
.shop-filter-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.shop-js .shop-filter-actions .shop-button { display: none; }
.shop-count { color: var(--shop-muted); margin: 0 0 0.5rem; }

.shop-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.shop-card {
  background: var(--shop-surface);
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  overflow: hidden;
}
.shop-card-link { display: block; color: inherit !important; text-decoration: none; padding-bottom: 0.6rem; }
.shop-card-photo { aspect-ratio: 1; background: var(--shop-line); display: flex; align-items: center; justify-content: center; }
.shop-card-label { text-align: center; color: var(--shop-muted); font-weight: 600; padding: 0.75rem; overflow-wrap: anywhere; }
.shop-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card-name { font-size: 1rem; margin: 0.5rem 0.6rem 0; }
.shop-card-link p { margin: 0.1rem 0.6rem; font-size: 0.9rem; }
.shop-card-price { color: var(--shop-muted); }
.shop-out, .shop-low { color: var(--shop-warn); font-weight: 600; }
.shop-others { color: var(--shop-muted); font-style: italic; }

.shop-pager { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1rem 0; }
.shop-pager a, .shop-pager span {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--shop-radius);
}
.shop-pager span { background: var(--shop-accent); color: var(--shop-accent-fg); }

@media (max-width: 47.99em) {
  .shop-js .shop-filter-toggle {
    display: block;
    width: 100%;
    padding: 0.7rem;
    font: inherit; font-weight: 600;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    background: var(--shop-surface);
    color: var(--shop-fg);
  }
  .shop-js .shop-filters:not(.is-open) { display: none; }
}
@media (min-width: 48em) {
  .shop-catalog { grid-template-columns: 15rem 1fr; align-items: start; }
  .shop-filter-toggle { display: none !important; }
}

/* product */
.shop-back { margin: 0 0 0.75rem; }
.shop-product { display: grid; gap: 1.25rem; }
.shop-gallery { display: grid; gap: 0.5rem; }
.shop-gallery-empty { aspect-ratio: 1; background: var(--shop-line); display: flex; align-items: center; justify-content: center; border-radius: var(--shop-radius); }
.shop-gallery img { width: 100%; height: auto; border-radius: var(--shop-radius); display: block; }
.shop-product-info h1 { margin: 0; font-size: 1.6rem; }
.shop-category { color: var(--shop-muted); margin: 0; }
.shop-price { font-size: 1.4rem; font-weight: 700; margin: 0.5rem 0; }
.shop-status { color: var(--shop-warn); font-weight: 600; margin: 0 0 0.5rem; }
.shop-add { margin: 1rem 0; }
.shop-add input[type="number"] { width: 6em; }
.shop-description { margin: 1rem 0; }
.shop-description p, .shop-description ul { margin: 0 0 0.75rem; }
.shop-description ul { padding-left: 1.25rem; }
.shop-description h3 { font-size: 1.05rem; margin: 1rem 0 0.35rem; }
.shop-description h4 { font-size: 0.95rem; margin: 0.75rem 0 0.25rem; }
.shop-allergens { margin: 1rem 0; }
.shop-filter-note { font-size: 0.85rem; margin: 0.25rem 0 0; }
.shop-tags { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; }
.shop-tags dt { font-weight: 600; }
.shop-tags dd { margin: 0; }
@media (min-width: 48em) {
  .shop-product { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* cart, checkout, order */
.shop-lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.shop-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--shop-line);
}
.shop-line-photo { grid-column: 1 / -1; width: 3.5rem; height: 3.5rem; border-radius: 6px; object-fit: cover; }
.shop-line-main { grid-column: 1 / -1; }
.shop-line-main .shop-muted { display: block; font-size: 0.9rem; }
.shop-line-problem { border-left: 4px solid var(--shop-warn); padding-left: 0.6rem; }
.shop-line-warn { color: var(--shop-warn); font-weight: 600; margin: 0.25rem 0 0; }
.shop-line-qty { display: flex; align-items: center; gap: 0.5rem; }
.shop-line-qty input { width: 4.5em; }
.shop-line-remove { justify-self: start; }
.shop-line-total { grid-column: 2; grid-row: 2; justify-self: end; font-weight: 600; }
.shop-total { font-size: 1.15rem; text-align: right; }

.shop-summary { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.shop-summary li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--shop-line);
}
.shop-summary-total { font-size: 1.1rem; }
.shop-form { max-width: 34rem; }
.shop-map { height: 16rem; margin: 1rem 0; border-radius: var(--shop-radius); overflow: hidden; }
.shop-order-status { font-size: 1.15rem; font-weight: 700; }
.shop-order-paid, .shop-order-picked_up { color: var(--shop-accent); }
.shop-order-abandoned, .shop-order-refunded, .shop-order-no_show { color: var(--shop-muted); }
.shop-refunds h2, .shop-pickup h2 { font-size: 1.15rem; }
.shop-locations { padding-left: 1.1rem; }
.shop-locations li { margin-bottom: 0.75rem; }

/* market banner (catalog, product, cart, checkout) */
.shop-market-banner {
  background: var(--shop-surface);
  border-bottom: 1px solid var(--shop-line);
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}
.shop-market-banner p { margin: 0.15rem 0; }
.shop-upcoming {
  background: var(--shop-surface);
  border: 1px solid var(--shop-line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}
.shop-upcoming-title { font-size: 1rem; margin: 0 0 0.5rem; }
.shop-upcoming-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.shop-upcoming-item { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; }
.shop-upcoming-when { font-weight: 600; }
.shop-upcoming-action { color: var(--shop-muted, inherit); }
.shop-upcoming .shop-muted { margin: 0.5rem 0 0; font-size: 0.9rem; }
.shop-market-banner-line strong { font-weight: 700; }
.shop-market-banner-closes { color: var(--shop-accent); font-weight: 600; }
.shop-market-banner-also { color: var(--shop-muted); }
.shop-market-banner-next { color: var(--shop-muted); }
.shop-market-banner-warn { color: var(--shop-warn); font-weight: 600; }
.shop-market-banner a { text-decoration: underline; }
.shop-market-badge {
  display: inline-block;
  background: var(--shop-accent);
  color: var(--shop-accent-fg);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1em 0.55em;
  border-radius: 999px;
}

/* markets list (pickup page + chooser) */
.shop-markets-day { font-size: 1.15rem; margin: 1.25rem 0 0.5rem; }
.shop-markets { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.6rem; }
.shop-market {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: var(--shop-surface);
}
.shop-market-when { font-weight: 700; }
.shop-market-title { font-weight: 600; }
.shop-market-loc { color: var(--shop-muted); }
.shop-market-action { margin-left: auto; color: var(--shop-muted); }
.shop-market-upcoming { opacity: 0.7; }
.shop-market-form { margin-left: auto; }

/* cart pickup choice */
.shop-cart-pickup { margin: 1rem 0; }
.shop-cart-pickup fieldset {
  margin: 0 0 0.6rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: var(--shop-surface);
}
.shop-cart-pickup legend { font-weight: 700; padding: 0 0.3rem; }
.shop-cart-pickup-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.35rem 0;
}
.shop-cart-pickup-when { font-weight: 700; }

/* product pickup block */
.shop-pickup {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: var(--shop-surface);
}
.shop-pickup-title { font-size: 1rem; margin: 0 0 0.4rem; }
.shop-pickup p { margin: 0.25rem 0; }
.shop-pickup .shop-map { margin: 0.5rem 0 0; }

/* branding: logo, footer, policies */
.shop-logo { height: 2rem; width: auto; vertical-align: middle; margin-right: .5rem; }
.shop-footer { padding: 1rem; border-top: 1px solid var(--shop-line); color: var(--shop-muted);
  font-size: .9rem; }
.shop-footer p { margin: .25rem 0; }
.shop-market-banner-stub { display: none; }
.shop-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem; }
.shop-footer-title { font-size: 1rem; margin: 0 0 .5rem; color: var(--shop-fg); }
.shop-footer-links { list-style: none; margin: 0; padding: 0; }
.shop-footer-links li { margin: .25rem 0; }
.shop-footer-card p { margin: .15rem 0; }
.shop-footer-note { margin-top: 1rem; }
.shop-policy-text { white-space: pre-line; }

/* contact form honeypot: off-screen, not display:none (some bots skip hidden fields) */
.shop-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* size (option) radios on the product page */
.shop-choices { display: grid; gap: 0.4rem; }
.shop-choice {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--shop-line); border-radius: 8px;
  padding: 0.55rem 0.75rem; background: var(--shop-surface); cursor: pointer;
}
.shop-choice:has(input:checked) { border-color: var(--shop-accent); box-shadow: 0 0 0 1px var(--shop-accent); }
.shop-choices > .shop-choice { display: flex; font-weight: 400; margin: 0; }   /* beat .shop-field > label */
.shop-choice.is-disabled { opacity: 0.55; cursor: not-allowed; }
.shop-choice-label { font-weight: 600; }
.shop-choice-price { margin-left: auto; }
.shop-choice-status { flex-basis: 100%; font-size: 0.85rem; color: var(--shop-muted); }

/* quantity stepper: the buttons need JS, so they only show with it */
.shop-stepper { display: inline-flex; align-items: stretch; gap: 0.35rem; }
.shop-stepper input[type="number"] { width: 4.5rem; text-align: center; }
.shop-step { display: none; min-width: 2.75rem; font: inherit; font-size: 1.25rem; line-height: 1;
  border: 1px solid var(--shop-line); border-radius: 8px; background: var(--shop-surface); cursor: pointer; }
.shop-js .shop-step { display: inline-flex; align-items: center; justify-content: center; }

/* Main page: featured items, then upcoming markets, then the way into the listing. */
.shop-section-title { font-size: 1.15rem; margin: 0 0 0.5rem; }
.shop-featured { margin: 0 0 1.25rem; }
.shop-featured .shop-cards { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.shop-featured .shop-card-featured { display: none; }
.shop-home-browse { margin: 1.25rem 0; }
.shop-home-cats { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.shop-card-link p.shop-card-featured {
  margin: 0.5rem 0.6rem 0; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--shop-accent, inherit);
}
.shop-welcome {
  display: flex; gap: 1rem; align-items: center;
  background: var(--shop-surface); border: 1px solid var(--shop-line);
  border-left: 4px solid var(--shop-accent); border-radius: var(--shop-radius);
  padding: 1rem 1.25rem; margin: 0.25rem 0 1.25rem;
}
.shop-welcome-logo { width: 4.5rem; height: 4.5rem; object-fit: contain; flex: none; }
.shop-welcome-title { font-size: 1.5rem; margin: 0 0 0.35rem; }
.shop-welcome-text { white-space: pre-line; margin: 0 0 0.75rem; }
.shop-welcome p:last-child { margin-bottom: 0; }
.shop-next { margin: 0 0 1.25rem; }
.shop-next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.shop-next-card { background: var(--shop-surface); border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius); padding: 0.75rem 1rem; }
.shop-next-card p { margin: 0.1rem 0; }
.shop-next-day { font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--shop-accent); }
.shop-next-where { font-size: 1.1rem; font-weight: 600; }
.shop-next-action { margin-top: 0.4rem !important; font-weight: 600; }
.shop-next > .shop-muted { margin: 0.5rem 0 0; font-size: 0.9rem; }
@media (max-width: 30em) { .shop-welcome { flex-direction: column; align-items: flex-start; } }
.shop-field > .shop-check { font-weight: 400; margin-bottom: 0; }   /* beat .shop-field > label */
.shop-card-packages, .shop-rate { color: var(--shop-muted); }