/* SC — Conversion Rail
 * z-index map (from the audit): mini-cart drawer wrapper 1000000, ACFS switchers 999999,
 * bug nudge 999999, coupon/promo nudges 999998, Breakdance back-to-top 300, age gate 2147483000.
 * Bar and toast sit at 999990: above nudges' content, below the open drawer and the age gate.
 */

:root {
  --sc-rail-green: #2e7d32;
  --sc-rail-green-dark: #1f5a23;
  --sc-rail-yellow: #f6e27a;
  --sc-rail-ink: #1b3a1f;
  --sc-rail-bar-h: 64px;
}

.sc-rail-hidden { display: none !important; }

/* ---------------------------------------------------------------- toast */
.sc-rail-toast {
  position: fixed;
  z-index: 999990;
  right: 20px;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  width: min(380px, calc(100vw - 32px));
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 36px 12px 12px;
  background: #fff;
  color: var(--sc-rail-ink);
  border: 1px solid #d9e7cf;
  border-left: 5px solid var(--sc-rail-green);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20, 40, 20, .18);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .22s ease, transform .22s ease;
  font: inherit; font-weight: 500; font-size: 14px; line-height: 1.4;
}
.sc-rail-toast.is-in { opacity: 1; transform: none; }
.sc-rail-toast.is-unlocked { border-left-color: #c9a227; background: #fffdf2; }
.sc-rail-toast__img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #f1f5ee; }
.sc-rail-toast__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-rail-toast__body { flex: 1 1 auto; min-width: 0; }
.sc-rail-toast__title { font-weight: 700; font-size: 15px; }
.sc-rail-toast__sub { font-size: 13px; opacity: .8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rail-toast__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sc-rail-toast__btn {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: 8px 14px;
  font: inherit; font-weight: 700; font-size: 13px; line-height: 1; color: var(--sc-rail-ink); background: #eef4ea;
}
.sc-rail-toast__btn.is-primary { background: var(--sc-rail-yellow); }
.sc-rail-toast__btn.is-primary:hover { background: #f0d85a; }
.sc-rail-toast__close {
  position: absolute; top: 6px; right: 8px; appearance: none; border: 0; background: transparent;
  font-size: 22px; line-height: 1; cursor: pointer; color: #6b7a6b; padding: 4px;
}
@media (max-width: 767px) {
  .sc-rail-toast {
    top: auto;
    right: 16px; left: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    width: auto;
    transform: translateY(12px);
  }
  html.sc-rail-bar-on .sc-rail-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sc-rail-bar-h) + 12px); }
}

/* button + counter feedback */
.single_add_to_cart_button.sc-rail-added { background: var(--sc-rail-green) !important; color: #fff !important; transition: background .2s; }
.sc-rail-pulse { animation: sc-rail-pulse .9s ease; }
@keyframes sc-rail-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------- sticky bar */
.sc-rail-bar {
  position: fixed;
  z-index: 999990;
  left: 0; right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff; /* solid: a backdrop blur on a full-width fixed bar repaints every scroll frame on low-end phones */
  border-top: 1px solid #d9e7cf;
  box-shadow: 0 -8px 24px rgba(20, 40, 20, .12);
  color: var(--sc-rail-ink);
  transform: translateY(100%);
  transition: transform .24s ease;
  font: inherit; font-weight: 500; font-size: 14px; line-height: 1.3;
}
.sc-rail-bar.is-in { transform: none; }
.sc-rail-bar__summary {
  appearance: none; border: 0; background: transparent; cursor: pointer; color: inherit;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; font: inherit; font-weight: 700; font-size: 14px; line-height: 1; min-width: 0;
}
.sc-rail-bar__icon { display: inline-flex; color: var(--sc-rail-green); }
.sc-rail-bar__total { font-weight: 800; }
.sc-rail-bar__free {
  appearance: none; cursor: pointer; border: 1px solid #e3d48a; background: #fff8d6; color: #5a4a00;
  border-radius: 999px; padding: 8px 12px; font: inherit; font-weight: 700; font-size: 13px; line-height: 1; white-space: nowrap; margin-left: auto;
}
.sc-rail-bar__free[hidden] { display: none; }
.sc-rail-bar__checkout {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important;
  background: var(--sc-rail-yellow); color: var(--sc-rail-ink) !important; border-radius: 999px;
  padding: 11px 18px; font: inherit; font-weight: 800; font-size: 14px; line-height: 1; white-space: nowrap;
}
.sc-rail-bar__checkout:hover { background: #f0d85a; }
.sc-rail-bar:not(.has-free) .sc-rail-bar__checkout { margin-left: auto; }

@media (min-width: 768px) {
  .sc-rail-bar { left: auto; right: 24px; bottom: 24px; border-radius: 999px; border: 1px solid #d9e7cf; padding: 8px 10px 8px 16px; max-width: 560px; }
  .sc-rail-bar.is-collapsed { /* no collapse on desktop */ }
}
@media (max-width: 767px) {
  .sc-rail-bar.is-collapsed { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .sc-rail-bar.is-collapsed .sc-rail-bar__free { display: none; }
  .sc-rail-bar.is-collapsed .sc-rail-bar__checkout { padding: 8px 14px; }
  .sc-rail-bar__free { font-size: 12px; padding: 8px 10px; }
  .sc-rail-bar__summary { font-size: 13px; }
}

/* While a toast is up on a phone, the bottom-sheet nudges (which are taller and sit
 * at a higher z-index) would cover it. Hide them for the toast's few seconds. */
@media (max-width: 767px) {
  html.sc-rail-toast-on .sc-bug-nudge,
  html.sc-rail-toast-on #sc-bug-nudge,
  html.sc-rail-toast-on .scscn,
  html.sc-rail-toast-on .scpn { visibility: hidden !important; pointer-events: none !important; }
}

/* Make room: things that already live at the bottom edge move up while the bar shows. */
@media (max-width: 767px) {
  html.sc-rail-bar-on #acfs-wrap { bottom: calc(20px + var(--sc-rail-bar-h)) !important; }
  html.sc-rail-bar-on .sc-bug-nudge,
  html.sc-rail-bar-on #sc-bug-nudge,
  html.sc-rail-bar-on .scscn,
  html.sc-rail-bar-on .scpn { bottom: var(--sc-rail-bar-h) !important; }
  html.sc-rail-bar-on .bde-back-to-top.is-sticky { margin-bottom: calc(20px + var(--sc-rail-bar-h)) !important; }
  html.sc-rail-bar-on body { padding-bottom: var(--sc-rail-bar-h); }
}
@media (min-width: 768px) {
  html.sc-rail-bar-on .bde-back-to-top.is-sticky { margin-bottom: calc(20px + var(--sc-rail-bar-h) + 12px) !important; }
  html.sc-rail-bar-on .sc-bug-nudge,
  html.sc-rail-bar-on #sc-bug-nudge,
  html.sc-rail-bar-on .scscn,
  html.sc-rail-bar-on .scpn { bottom: calc(24px + var(--sc-rail-bar-h) + 12px) !important; }
}

/* ---------------------------------------------------------------- picker */
.sc-rail-picker {
  margin: 10px 12px 14px;
  border: 1px solid #e3d48a;
  background: #fffdf2;
  border-radius: 14px;
  color: var(--sc-rail-ink);
  transition: box-shadow .3s;
  overflow: hidden;
}
.sc-rail-picker.is-highlight { box-shadow: 0 0 0 4px rgba(201, 162, 39, .35); }
.sc-rail-picker--checkout { margin: 0 0 18px; }
.sc-rail-picker.is-done { background: #f3f9ee; border-color: #cfe3c0; }
.sc-rail-picker__head {
  appearance: none; border: 0; background: transparent; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; align-items: center;
  padding: 12px 12px 10px; text-align: left; color: inherit; font: inherit;
}
.sc-rail-picker__icon { font-size: 18px; }
.sc-rail-picker__titles { display: flex; flex-direction: column; min-width: 0; }
.sc-rail-picker__title { font-size: 14px; font-weight: 800; }
.sc-rail-picker__sub { font-size: 12px; opacity: .75; }
.sc-rail-picker__chev { font-size: 18px; line-height: 1; opacity: .6; transition: transform .2s; }
.sc-rail-picker__head[aria-expanded="true"] .sc-rail-picker__chev { transform: rotate(180deg); }
/* Collapsed + picks outstanding: a yellow "Choose" pill makes the one-line header obviously tappable. */
.sc-rail-picker__cta { display: none; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 800; background: var(--sc-rail-yellow); color: var(--sc-rail-ink); white-space: nowrap; }
.sc-rail-picker:not(.is-done) .sc-rail-picker__head[aria-expanded="false"] .sc-rail-picker__cta { display: inline-block; }
.sc-rail-picker:not(.is-done) .sc-rail-picker__head[aria-expanded="false"] .sc-rail-picker__chev { display: none; }
.sc-rail-picker__head { grid-template-columns: auto 1fr auto auto; }
.sc-rail-picker__body { padding: 0 10px 10px; }
.sc-rail-picker__tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.sc-rail-picker__tab {
  appearance: none; cursor: pointer; border: 1px solid #e3d48a; background: #fff; color: var(--sc-rail-ink);
  border-radius: 999px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700; line-height: 1;
}
.sc-rail-picker__tab.is-active { background: var(--sc-rail-ink); color: #fff; border-color: var(--sc-rail-ink); }
.sc-rail-picker__tabn { opacity: .65; font-weight: 600; margin-left: 2px; }
.sc-rail-picker__list {
  list-style: none; margin: 0; padding: 2px; display: grid; gap: 6px;
  max-height: min(42vh, 360px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.sc-rail-picker__list[hidden], .sc-rail-picker [data-sc-rail-panel][hidden], .sc-rail-picker[hidden] { display: none; }
.sc-rail-picker__item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  background: #fff; border: 1px solid #ebe5c6; border-radius: 10px; padding: 5px 6px 5px 5px;
}
.sc-rail-picker__item.is-picked { border-color: #9fcf8a; background: #f6fbf2; }
.sc-rail-picker__img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; display: block; background: #f1f5ee; }
.sc-rail-picker__name { min-width: 0; display: flex; flex-direction: column; }
.sc-rail-picker__pname { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
a.sc-rail-picker__pname:hover { text-decoration: underline; }
.sc-rail-picker__brand { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .02em; }
.sc-rail-picker__ctl { display: inline-flex; align-items: center; gap: 4px; }
.sc-rail-picker__add, .sc-rail-picker__rm {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px; min-width: 34px; height: 30px; padding: 0 10px;
  font: inherit; font-weight: 800; font-size: 12px; line-height: 1; white-space: nowrap;
}
.sc-rail-picker__add { background: var(--sc-rail-yellow); color: var(--sc-rail-ink); }
.sc-rail-picker__add:disabled { opacity: .45; cursor: default; }
.sc-rail-picker__add.is-busy, .sc-rail-picker__rm.is-busy { opacity: .6; }
.sc-rail-picker__rm { background: #eef4ea; color: var(--sc-rail-ink); min-width: 30px; padding: 0 8px; }
.sc-rail-picker__rm[hidden], .sc-rail-picker__qty[hidden], .sc-rail-picker__fill[hidden] { display: none; }
/* Attached to <html>, so `font: inherit` would give the browser default, not the theme's. */
.sc-rail-toast, .sc-rail-bar { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
/* Checkout-polish's sticky Place-order bar (72px, bottom:0) must stay reachable under a toast. */
html.sc-mobile-bar-on .sc-rail-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* "Same again": the fill button is the loud one; once anything is picked the other
 * rows' Add buttons go quiet so multiples of one strain are the obvious path. */
.sc-rail-picker__fill {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px; height: 30px; padding: 0 12px;
  font: inherit; font-weight: 800; font-size: 12px; line-height: 1; white-space: nowrap;
  background: var(--sc-rail-yellow); color: var(--sc-rail-ink);
}
.sc-rail-picker__fill:hover { background: #f0d85a; }
.sc-rail-picker__fill:disabled, .sc-rail-picker__fill.is-busy { opacity: .6; cursor: default; }
.sc-rail-picker.has-pick .sc-rail-picker__item:not(.is-picked) .sc-rail-picker__add { background: transparent; border: 1px solid rgba(27,58,31,.35); opacity: .8; }
.sc-rail-picker.has-pick .sc-rail-picker__item:not(.is-picked) .sc-rail-picker__add:hover:not(:disabled) { opacity: 1; background: #fff8d6; }
.sc-rail-picker.has-pick .sc-rail-picker__item.is-picked .sc-rail-picker__add { background: var(--sc-rail-yellow); }
.sc-rail-picker__qty { font-weight: 800; font-size: 13px; min-width: 14px; text-align: center; }
.sc-rail-picker__msg:empty { display: none; }
.sc-rail-picker__msg { margin-top: 8px; font-size: 12px; color: #9b2c2c; }

/* The drawer's own "visit your cart" CTA is hidden by JS when the picker is present
 * (class added in rail.js); this is the belt-and-braces for browsers with :has(). */
.bde-mini-cart-offcanvas-body:has(.sc-rail-picker) .sc-mc-free-seeds-cta { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sc-rail-toast, .sc-rail-bar { transition: none; }
  .sc-rail-pulse { animation: none; }
}