/* ==========================================================================
   SHORTLIST
   A review screen, not a checkout. Quantities are indications for the sales
   team, so nothing here says "total to pay".
   ========================================================================== */

.sl { padding-bottom: var(--sp-8); }

/* --------------------------------------------------------------------------
   A built gift on the shortlist.
   It has no catalog page to link to, so the name is plain text and the tag
   plus the contents line are what tell the customer which one this is.
   -------------------------------------------------------------------------- */

.sl-line__tag {
  display: inline-block;
  margin-left: var(--sp-2);
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tbs-green);
  background: var(--tbs-green-soft);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

.sl-line__contents {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: var(--sp-2) 0 0;
}

/* Chargeable packaging is already inside the line price, so this explains the
   figure rather than adding to it. */
.sl-line__pack {
  display: block;
  font-size: .72rem;
  color: var(--ink-mute);
  margin-top: 2px;
}

.sl__head { margin-bottom: var(--sp-5); }

.sl__head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--sp-2);
}

.sl__head p { color: var(--ink-mute); margin: 0; }

.sl__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}

@media (min-width: 1024px) {
  .sl__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); }
}

/* ---- Lines ----------------------------------------------------------- */

.sl-line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .sl-line { grid-template-columns: 104px minmax(0, 1fr) auto; align-items: start; }
}

.sl-line:first-child { padding-top: 0; }

.sl-line__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-input);
  background: var(--cream-deep);
}

.sl-line__body { min-width: 0; }

.sl-line__name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--sp-1);
  line-height: 1.35;
}

.sl-line__name a { color: inherit; text-decoration: none; }
.sl-line__name a:hover { color: var(--tbs-green); }

.sl-line__box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6B5320;
  background: var(--gold-soft);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-2);
}

.sl-line__price {
  font-size: 0.9rem;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.sl-line__price strong { color: var(--tbs-green); }

.sl-line__ctl {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

@media (min-width: 640px) {
  .sl-line__ctl {
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0;
  }
}

/* ---- Quantity stepper ------------------------------------------------ */

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  overflow: hidden;
}

.qty button {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 1.125rem;
  color: var(--tbs-green);
  cursor: pointer;
  line-height: 1;
}

.qty button:hover { background: var(--tbs-green-soft); }
.qty button:disabled { color: var(--line); cursor: default; background: none; }

.qty input {
  width: 62px;
  height: 40px;
  border: 0;
  border-inline: 1px solid var(--line);
  text-align: center;
  font: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  background: var(--white);
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty input:focus { outline: 2px solid var(--tbs-green); outline-offset: -2px; }

.sl-line__remove {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink-mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.sl-line__remove:hover { color: var(--danger); }

/* A removed line collapses rather than vanishing, so the eye can follow it */
.sl-line.is-going {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity var(--dur-component) var(--ease-brand),
              transform var(--dur-component) var(--ease-brand);
}

/* ---- Summary --------------------------------------------------------- */

.sl-sum {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
}

@media (min-width: 1024px) {
  .sl-sum { position: sticky; top: 100px; }
}

.sl-sum h2 {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tbs-green);
  margin: 0 0 var(--sp-4);
}

.sl-sum__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.sl-sum__row--total {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  font-weight: 700;
  color: var(--tbs-green);
  font-size: 1.0625rem;
}

.sl-sum__note {
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.5;
  margin: var(--sp-3) 0 var(--sp-4);
}

.sl-sum .b { margin-bottom: var(--sp-2); }

.sl-share {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.sl-share__url {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.sl-share__url input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--cream);
}

/* ---- Header badge ---------------------------------------------------- */

.cart-btn { position: relative; }

.cart-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: #241B08;
  font-size: 0.66rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(120, 84, 20, .4);
}

.cart-badge[hidden] { display: none; }

/* Spring overshoot on increment - the one moment of celebration in the flow */
.cart-badge.is-bumped { animation: bump 620ms var(--ease-brand); }

@keyframes bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.55); }
  55%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-badge.is-bumped { animation: none; }
}

/* ---- Toast ----------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  transform: translate(-50%, 140%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: min(440px, calc(100vw - 32px));
  background: var(--tbs-green);
  color: var(--white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  font-size: 0.9rem;
  transition: transform var(--dur-component) var(--ease-brand);
}

.toast.is-up { transform: translate(-50%, 0); }
.toast--warn { background: var(--warning); color: #2B1D02; }

.toast a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  white-space: nowrap;
}

/* ---- Empty ----------------------------------------------------------- */

.sl-empty { text-align: center; padding: var(--sp-9) var(--sp-4); }

.sl-empty svg { color: var(--line); margin-bottom: var(--sp-4); }

.sl-empty h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: var(--sp-2);
}

.sl-empty p { color: var(--ink-mute); max-width: 42ch; margin-inline: auto; }