/* Cart: header button, add-to-cart buttons, the cart panel and the order-held message.
   Shared by the storefront and the permanent specimen pages, which use different colour names,
   so every colour here falls back from one palette to the other. No inline styles are needed,
   because the specimen pages forbid them. Touch targets are at least 44px. */
:root {
  --cart-paper: var(--paper, #fffdf8);
  --cart-ink: var(--ink, #292820);
  --cart-muted: var(--ink-soft, var(--muted, #655e53));
  --cart-accent: var(--accent, var(--rust, #a63f25));
  --cart-accent-ink: var(--accent-ink, #fffdf7);
  --cart-soft: var(--soft, #fbf1df);
  --cart-line: var(--line, #dedbd2);
  --cart-free: #2c6a38;
}

.cart-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- header button ---- */
.index-cart, .specimen-cart {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px;
  padding: .4rem .9rem; border: 2px solid var(--cart-accent); border-radius: 99rem; background: transparent;
  color: var(--cart-accent); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.collection-index .index-cart { padding: .4rem .65rem; font-size: .85rem; margin-bottom: .5rem; }
.index-cart:hover, .specimen-cart:hover { background: var(--cart-accent); color: var(--cart-accent-ink); }
.cart-count {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: 99rem;
  background: var(--cart-accent); color: var(--cart-accent-ink); font-size: .8rem; font-weight: 700; line-height: 1;
}
.cart-count.is-empty { background: transparent; color: var(--cart-muted); box-shadow: inset 0 0 0 1px currentColor; }
.index-cart:hover .cart-count, .specimen-cart:hover .cart-count { background: var(--cart-accent-ink); color: var(--cart-accent); box-shadow: none; }
.index-cart:focus-visible, .specimen-cart:focus-visible, .cart-add:focus-visible, .cart-dialog button:focus-visible,
.cart-dialog a:focus-visible, .cart-dialog input:focus-visible, .cart-dialog textarea:focus-visible { outline: 3px solid var(--cart-accent); outline-offset: 3px; }

/* ---- add to cart buttons ---- */
.cart-add {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: .6rem 1rem;
  border: 2px solid var(--cart-accent); border-radius: .3rem; background: var(--cart-accent); color: var(--cart-accent-ink);
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.cart-add[aria-pressed="true"] { background: transparent; color: var(--cart-accent); }
.product-actions { align-self: stretch; margin-top: auto; display: grid; gap: .5rem; padding-top: 1rem; }
.product-actions .product-open { margin-top: 0; translate: none; }
.cart-add-wrap { margin: 1.25rem 0 .25rem; }
.cart-hint { margin: .5rem 0 0; font-size: .9rem; }
.cart-hint:empty { display: none; }
.specimen-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.specimen-actions .cart-add { width: auto; min-height: 50px; padding: 13px 21px; border-radius: 4px; }
.specimen-secondary {
  min-height: 50px; padding: 13px 21px; border: 2px solid var(--sage-dark, var(--cart-ink)); border-radius: 4px; background: transparent;
  color: var(--sage-dark, var(--cart-ink)); font-weight: 800; cursor: pointer;
}
.specimen-fineprint:empty { display: none; }
.specimen-header .specimen-cart { margin-left: auto; }

/* ---- the cart panel ---- */
.cart-dialog {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(28rem, 100vw); max-width: 100vw; height: 100dvh; max-height: none;
  padding: 0; border: 0; border-left: 1px solid var(--cart-line); background: var(--cart-paper); color: var(--cart-ink);
  overflow-y: auto; overscroll-behavior: contain; box-shadow: -1.5rem 0 4rem rgba(41, 40, 32, .22);
}
.cart-dialog::backdrop { background: rgba(41, 40, 32, .5); }
.cart-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; background: var(--cart-paper); border-bottom: 1px solid var(--cart-line); }
.cart-head h2 { margin: 0; font-family: var(--sc-font-display, Georgia, serif); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.cart-close { min-height: 44px; min-width: 44px; padding: .5rem .9rem; border: 1px solid var(--cart-line); border-radius: 99rem; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.cart-notice { margin: 1rem 1.25rem 0; padding: .8rem 1rem; border-left: 3px solid var(--cart-accent); background: var(--cart-soft); font-size: .95rem; }
.cart-lines { padding: 0 1.25rem; }
.cart-loading, .cart-empty, .cart-error { padding: 1.5rem 0; color: var(--cart-muted); }
.cart-empty p, .cart-error p { margin: 0 0 .75rem; }
.cart-browse, .cart-retry {
  display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.1rem; border: 2px solid var(--cart-accent); border-radius: 99rem;
  background: transparent; color: var(--cart-accent); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.cart-list, .cart-done-list { margin: 0; padding: 0; list-style: none; }
.cart-line { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .25rem .9rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--cart-line); }
.cart-thumb { width: 4rem; height: 4rem; border-radius: .3rem; object-fit: cover; background: var(--cart-soft); }
.cart-thumb-blank { display: grid; place-items: center; font-family: var(--sc-font-display, Georgia, serif); font-weight: 700; color: var(--cart-accent); }
.cart-line-copy { display: grid; gap: .1rem; min-width: 0; overflow-wrap: anywhere; }
.cart-line-copy small { color: var(--cart-muted); font-size: .8rem; }
.cart-line-price { font-weight: 700; }
.cart-remove { grid-column: 2 / -1; justify-self: start; min-height: 44px; padding: .4rem .2rem; border: 0; background: transparent; color: var(--cart-muted); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.cart-remove:hover { color: var(--cart-accent); }
.cart-totals { margin: 1rem 0; }
.cart-totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.cart-totals dt, .cart-totals dd { margin: 0; }
.cart-totals dd { font-weight: 700; }
.cart-grand { margin-top: .35rem; padding-top: .7rem !important; border-top: 1px solid var(--cart-line); font-size: 1.2rem; }
.cart-free { color: var(--cart-free); letter-spacing: .04em; }
.cart-nudge { margin: 0 0 1rem; padding: .7rem 1rem; border-left: 3px solid var(--cart-accent); background: var(--cart-soft); line-height: 1.45; }
.cart-nudge strong { display: block; }
.cart-nudge a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cart-accent); font-weight: 700; }

.cart-form { display: grid; gap: .9rem; padding: 1.25rem; border-top: 1px solid var(--cart-line); }
.cart-form[hidden], .cart-done[hidden], .cart-notice[hidden] { display: none; }
.cart-form h3 { margin: 0; font-family: var(--sc-font-display, Georgia, serif); font-size: 1.25rem; }
.cart-welcome { margin: 0; color: var(--cart-muted); font-size: .9rem; }
.cart-form label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 700; }
.cart-form input[type="text"], .cart-form input[type="email"], .cart-form textarea {
  width: 100%; min-height: 44px; padding: .6rem .75rem; border: 1px solid #8a8478; border-radius: .3rem; background: #fff; color: var(--cart-ink); font: inherit; font-weight: 400;
}
.cart-honeypot { position: absolute !important; left: -9999px !important; }
.cart-ship { display: grid; gap: .9rem; margin: 0; padding: 1rem 0 0; min-width: 0; border: 0; border-top: 1px solid var(--cart-line); }
.cart-ship[hidden] { display: none; }
.cart-ship legend { padding: 0 .5rem 0 0; font-family: var(--sc-font-display, Georgia, serif); font-size: 1.25rem; font-weight: 600; }
.cart-ship-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .75rem; }
.cart-form select, .cart-form input[type="tel"] { width: 100%; min-height: 44px; padding: .6rem .75rem; border: 1px solid #8a8478; border-radius: .3rem; background: #fff; color: var(--cart-ink); font: inherit; font-weight: 400; }
.cart-dialog select:focus-visible, .cart-dialog input[type="tel"]:focus-visible { outline: 3px solid var(--cart-accent); outline-offset: 3px; }
.cart-form .cart-subscribe { display: flex; align-items: flex-start; gap: .65rem; min-height: 44px; font-weight: 400; }
.cart-subscribe input { width: 1.3rem; height: 1.3rem; margin-top: .2rem; flex-shrink: 0; }
.cart-subscribe small { display: block; color: var(--cart-muted); }
.cart-submit {
  min-height: 52px; padding: .8rem 1.2rem; border: 2px solid var(--cart-accent); border-radius: .3rem; background: var(--cart-accent); color: var(--cart-accent-ink);
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.cart-submit:disabled { opacity: .6; cursor: not-allowed; }
.cart-message { min-height: 1.4em; margin: 0; color: var(--cart-accent); font-weight: 700; }
.cart-fine { margin: 0; color: var(--cart-muted); font-size: .85rem; }

.cart-done { padding: 1.25rem; }
.cart-pay { margin: 0 0 1.25rem; padding: 1rem; border: 2px solid var(--cart-accent); border-radius: .4rem; background: var(--cart-soft); }
.cart-pay h4 { margin: 0 0 .5rem; font-family: var(--sc-font-display, Georgia, serif); font-size: 1.2rem; }
.cart-pay p { margin: .35rem 0; }
.cart-pay-amount strong { font-size: 1.6rem; }
.cart-pay-code strong { font-size: 1.15rem; letter-spacing: .04em; }
.cart-copy { min-height: 44px; min-width: 44px; margin-left: .5rem; padding: .4rem .9rem; border: 2px solid var(--cart-accent); border-radius: 99rem; background: transparent; color: var(--cart-accent); font: inherit; font-weight: 700; cursor: pointer; }
.cart-pay-methods { margin: .5rem 0; padding: 0; list-style: none; display: grid; gap: .6rem; overflow-wrap: anywhere; }
.cart-pay-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: .25rem; padding: .5rem 1rem; border-radius: 99rem; background: var(--cart-accent); color: var(--cart-accent-ink); font-weight: 700; text-decoration: none; }
.cart-pay-link:focus-visible, .cart-copy:focus-visible { outline: 3px solid var(--cart-ink); outline-offset: 3px; }
.cart-success h3 { margin: .25rem 0 .75rem; font-family: var(--sc-font-display, Georgia, serif); font-size: 1.7rem; font-weight: 600; line-height: 1.15; }
.cart-success h3:focus { outline: none; }
.cart-success-kicker { margin: 0; color: var(--cart-muted); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cart-done-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cart-line); overflow-wrap: anywhere; }
.cart-success .cart-submit { width: 100%; }
.cart-warning { margin: 0 0 1rem; padding: .7rem 1rem; border-left: 3px solid var(--cart-accent); background: var(--cart-soft); line-height: 1.45; }

@media (max-width: 560px) {
  .cart-dialog { width: 100vw; border-left: 0; }
  .cart-head, .cart-lines, .cart-form, .cart-done { padding-inline: 1rem; }
  .cart-notice { margin-inline: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .index-cart, .specimen-cart, .cart-add, .cart-submit { transition: background-color 140ms ease-out, color 140ms ease-out; }
}

/* Cloudflare robot check: empty and hidden until the shop switches it on. */
.bot-check { margin: 12px 0; min-height: 65px; }
.bot-check[hidden] { display: none; }