/* Reeled In Supply - headless additions. Everything else is reeled.css.
   Tokens come from reeled.css :root; nothing here introduces a new hue. */
:root {
  --ri-ease: cubic-bezier(.22, 1, .36, 1);
  --ri-cart-w: min(440px, 100%);
  --ri-pad: 24px;
  --ri-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- utilities the static build needs ---------- */
.pcard[hidden], #cartApp[hidden], #cartEmpty[hidden], .ri-cart[hidden], .ri-scrim[hidden] { display: none !important; }
.btn.is-off, .mbar-main.is-off { opacity: .45; pointer-events: none; }
.btn.is-busy { opacity: .7; cursor: progress; }

/* ---------- best-sellers rail ----------
   The live theme never had products in this rail, so its card styles were
   never exercised: the media wrapper is a span and stayed inline, which let
   the title and price fall outside the card and get clipped. */
.c-card { display: flex; flex-direction: column; }
.c-card-media { display: block; }
.c-card .pbadge { position: absolute; z-index: 2; top: 14px; left: 14px; }
.c-card h3 { margin-top: 4px; }
.c-rail { scroll-padding-inline: max(24px, calc((100vw - 1560px) / 2)); }

/* the closing home panel reused the number 01; numbers count the story panels only */
main > .shopify-section:last-child .c-panel .num { display: none; }

/* ---------- first screen is never gated behind a scroll fade ----------
   The hero headline, page title and first product view used to start at
   opacity 0 and wait for script plus an observer. Above the fold it now
   paints at once; the reveal still plays further down. */
main > :first-child .reveal,
.c-hero .reveal, .phero .reveal, .jr-head .reveal, .pdp .reveal {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ---------- headings never strand one word on the last line ---------- */
h1, h2, h3, h4, .disp { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ---------- the whole product card is the link, not just its title ---------- */
.pcard { position: relative; }
.pcard-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard .quick, .pcard .pbadge { z-index: 3; }

/* ---------- buttons: pressed and done states ---------- */
.btn:active { transform: translateY(1px) scale(.99); }
.product-form__submit[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.product-form__submit.is-done { background: var(--ink); color: #fff; }
.btn svg { flex: none; }

/* the progress track is a span; without a block box its height never applied */
.prog-bar { display: block; }
.sec-sand .prog-bar, .phero .prog-bar { background: color-mix(in srgb, var(--ink) 12%, transparent); }

/* ---------- form fields: visible focus, inline errors ---------- */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { box-shadow: var(--ri-ring); }
.field [aria-invalid="true"] { border-color: var(--coral); }
.ri-err { margin: 8px 0 0; font-size: 14px; color: var(--body); display: flex; gap: 8px; align-items: baseline; }
.ri-err::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); transform: translateY(-1px); }
.ri-ok { margin: 0 0 20px; }

/* mobile bar steps aside while the page's own button is in view */
.mbar.ri-hold { transform: translateY(110%) !important; }

/* contact pill outside opening hours: the dot stops pulsing */
.livepill.is-closed .dot { background: #ffffff8c; box-shadow: none; animation: none; }
.livepill.is-closed .dot::after { display: none; }

/* ---------- cart count bump ---------- */
.ri-n.bump { animation: ri-bump .42s var(--ri-ease); }
@keyframes ri-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- slide-in cart (ink ground, same as the cart summary) ---------- */
html.ri-locked { overflow: hidden; scrollbar-gutter: stable; }
.ri-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  opacity: 0; transition: opacity .28s var(--ri-ease);
}
.ri-scrim.on { opacity: 1; }
.ri-cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: var(--ri-cart-w);
  display: flex; flex-direction: column;
  background: var(--ink); color: #ffffffc7;
  transform: translateX(100%); transition: transform .32s var(--ri-ease);
  box-shadow: -30px 0 60px -30px #000;
}
.ri-cart.on { transform: none; }
.ri-cart-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px var(--ri-pad) 18px; border-bottom: 1px solid #ffffff1f;
}
.ri-cart-top h2 { color: #fff; font-size: 30px; margin: 0; }
.ri-x {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid #ffffff33; color: #fff; background: none; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.ri-x:hover { background: #ffffff14; border-color: #ffffff66; }
.ri-x:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ri-cart-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ri-cart-body > .prog { padding: 18px var(--ri-pad) 0; margin: 0 0 6px; }
.ri-cart-lines { flex: 1; overflow-y: auto; padding: 0 var(--ri-pad); overscroll-behavior: contain; }
.ri-cart .cline { grid-template-columns: 76px 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid #ffffff1a; }
.ri-cart .cline img { width: 76px; height: 76px; background: #fff; }
.ri-cart .cline h3, .ri-cart .cline h3 a { color: #fff; font-size: 16px; }
.ri-cart .cline .var { color: #ffffffb3; opacity: 1; margin-bottom: 10px; }
.ri-cart .cline-price { color: #fff; font-size: 15px; grid-column: auto; text-align: right; align-self: start; }
.ri-cart .qty { background: transparent; border-color: #ffffff33; }
.ri-cart .qty button { color: #fff; min-height: 40px; width: 38px; font-size: 18px; }
.ri-cart .qty button:hover { background: #ffffff14; }
.ri-cart .qty span { color: #fff; min-width: 30px; }
.ri-cart .cline .rm { color: #ffffffb3; border-bottom-color: #ffffff40; background: none; }
.ri-cart .cline .rm:hover { color: var(--accent-2); }
.ri-cart-foot { padding: 6px var(--ri-pad) calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #ffffff1f; }
.ri-cart-foot .sum-row.tot { border-top: 0; margin: 0 0 14px; padding-top: 12px; font-size: 26px; }
.ri-cart-meta { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: 14px; color: #ffffff99; }
.ri-cart-meta a { color: #fff; border-bottom: 1px solid #ffffff59; }
.ri-cart-meta a:hover { color: var(--accent-2); border-color: currentColor; }
.ri-cart-empty { padding: 40px var(--ri-pad); display: grid; gap: 22px; }
.ri-cart-empty p { font-family: Anton, 'Arial Narrow', sans-serif; text-transform: uppercase; font-size: 28px; line-height: 1; color: #fff; margin: 0; }
.ri-warn { color: var(--coral) !important; }
.cline .qty button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- search ---------- */
.ri-search-idle { padding: 28px 0 clamp(50px, 6vw, 90px); }
.ri-search-idle .eyebrow { margin-bottom: 4px; }
.ri-search-none { margin-bottom: clamp(40px, 5vw, 70px); }
.ri-sub { font-size: clamp(24px, 2.4vw, 32px); margin: 8px 0 18px; }
#searchApp .pgrid { margin-bottom: clamp(44px, 5vw, 72px); }
.ri-reads .post[hidden] { display: none; }
.ri-more { margin: -24px 0 clamp(44px, 5vw, 72px); }
.term:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ri-loading { font-family: Roboto Mono, monospace; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; padding: 32px 0 80px; }

@media (max-width: 640px) {
  /* 390 tap targets: chrome links get a full 44px row */
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .ftr-btm a, .ftr-btm nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; margin: 0; }
  .selct select { min-height: 44px; }
}
@media (max-width: 600px) {
  :root { --ri-pad: 18px; }
  .ri-cart-top h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ri-cart, .ri-scrim { transition: none; }
  .ri-n.bump { animation: none; }
  .btn:active { transform: none; }
}