/* ==========================================================================
   SPROUT THEME — cart page: lines, care summary, order summary, phone checkout bar
   Loads after theme.css. Sections: cart-main · cart-upsell. v1
   ========================================================================== */

@keyframes cfade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.cart { padding-block: 1rem clamp(3rem, 6vw, 6rem); }
.cart__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cart__title { font: 400 clamp(3.25rem, 1.8rem + 5.6vw, 6.5rem)/.92 var(--display); letter-spacing: -.026em; }
.cart__title em { font-style: italic; color: var(--moss); }
.cart__count { font-size: 1rem; color: var(--text-2); padding-bottom: .5rem; }
.cart__count b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* reserve the box before JS fills it so nothing visible shifts */
.cart [data-cart-body] { min-height: 26rem; }
.js .cart:not(.is-ready) [data-cart-body] { visibility: hidden; }

.cart__in { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1000px) { .cart__in { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); } }
.cart__lines { display: grid; gap: 1.5rem; min-width: 0; }

/* lines */
.cl-list { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--line); }
.cl { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem 1.1rem; padding-block: 1.4rem; border-bottom: 1px solid var(--line); position: relative; animation: cfade .5s var(--ease) both; }
@media (min-width: 640px) { .cl { grid-template-columns: 8rem minmax(0, 1fr) auto; gap: .5rem 1.5rem; } }
.cl__img { grid-row: span 2; display: block; aspect-ratio: 4 / 5; border-radius: 999px 999px 14px 14px; overflow: hidden; background: var(--stone); align-self: start; }
@media (min-width: 640px) { .cl__img { grid-row: auto; } }
.cl__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cl:hover .cl__img img { transform: scale(1.05); }
.cl__b { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.cl__name { font: 400 clamp(1.5rem, 1.25rem + 1vw, 2.125rem)/1.02 var(--display); letter-spacing: -.01em; }
.cl__name a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .4s var(--ease); }
.cl__name a:hover { background-size: 100% 1.5px; }
.cl__latin { font-size: 1.0625rem; color: var(--text-3); line-height: 1.1; }
.cl__opt { font-size: .875rem; color: var(--text-2); }
.cl__b .care { margin-block: .25rem; }
@media (max-width: 699px) { .cl__b .care .pips { display: none; } }
.cl__row { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; margin-top: .5rem; }
.cl .qty { min-height: 2.75rem; }
.cl .qty button { width: 2.5rem; height: 2.5rem; }
.cl .qty output { min-width: 1.75rem; font-size: 1rem; }
.cl__rm { font-size: .875rem; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; padding: .6rem 0; transition: color .2s; }
.cl__rm:hover { color: var(--clay-d); }
.cl__price { font: 400 1.75rem/1 var(--display); font-variant-numeric: tabular-nums; grid-column: 2; }
.cl__price small { display: block; font: 400 .8125rem/1.3 var(--sans); color: var(--text-3); margin-top: .35rem; }
@media (min-width: 640px) { .cl__price { grid-column: auto; text-align: right; padding-top: .15rem; } }
.cl.is-gone { animation: cgone .35s var(--ease) both; }
@keyframes cgone { to { opacity: 0; transform: translateX(-12px); } }

/* free delivery */
.cart .ship { margin-bottom: 0; }

/* care summary: "your plants at a glance" */
.glance { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.glance[hidden] { display: none; }
.glance__h { display: grid; gap: .5rem; }
.glance__h h2 { font: 400 clamp(1.75rem, 1.4rem + 1vw, 2.375rem)/1.04 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.glance__h h2 em { font-style: italic; color: var(--moss); }
.glance__h p { color: var(--text-2); font-size: .9375rem; max-width: 52ch; }
.glance__t { list-style: none; padding: 0; margin: 0; display: grid; }
.glance__r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem 1.25rem; align-items: center; padding-block: .7rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.glance__r:first-child { border-top: 0; }
@media (max-width: 479px) { .glance__r { grid-template-columns: minmax(0, 1fr) auto; } .glance__r .gw { display: none; } }
.glance__n { font-weight: 600; min-width: 0; }
.glance__n small { display: block; font-weight: 400; color: var(--text-3); font-size: .8125rem; }
.gl, .gw { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-2); white-space: nowrap; }
.gl i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(36, 90, 55, .16); }
.gl i.on { background: var(--moss); }
.gl i.shared { box-shadow: 0 0 0 2px var(--lime); }
.gw .i { width: 1rem; height: 1rem; color: var(--moss); }
.gw .i.off { opacity: .22; }
.glance__flags { display: flex; flex-wrap: wrap; gap: .4rem; }
.flag { display: inline-flex; align-items: center; gap: .4rem; min-height: 1.9rem; padding: 0 .8rem; border-radius: 999px; font: 600 .8125rem/1 var(--sans); background: var(--sage-tint); color: var(--moss); }
.flag .i { width: .95rem; height: .95rem; }
.flag--warn { background: var(--clay-tint); color: #7d3a1e; }

/* order summary */
.cs { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 2.6vw, 2rem); border-radius: var(--r-lg); background: var(--sage-tint); min-width: 0; }
@media (min-width: 1000px) { .cs { position: sticky; top: calc(var(--header-h) + 1.25rem); } }
.cs__t { font: 400 1.875rem/1 var(--display); letter-spacing: -.01em; }
.cs__rows { margin: 0; display: grid; gap: .6rem; font-size: .9375rem; }
.cs__rows > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.cs__rows dt { color: var(--text-2); }
.cs__rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs__rows .tot { padding-top: .9rem; margin-top: .3rem; border-top: 1px solid rgba(20, 36, 27, .2); align-items: end; }
.cs__rows .tot dt { color: var(--text); font-weight: 600; }
.cs__rows .tot dd { font: 400 clamp(2.25rem, 2rem + 1vw, 3rem)/1 var(--display); }
.cs__fine { font-size: .8125rem; color: var(--ink-2); line-height: 1.45; }

.cs__eta { display: grid; gap: .6rem; padding-top: .3rem; }
.cs__eta label { font: 600 .75rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.cs__form { display: flex; gap: .5rem; }
.cs__eta input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); }
.cs__eta input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cs__out { font-size: .9375rem; line-height: 1.45; color: var(--text-2); min-height: 1.4rem; }
.cs__out b { display: block; font: 400 1.5rem/1.1 var(--display); color: var(--text); margin-bottom: .15rem; }
.cs__note { display: grid; gap: .5rem; }
.cs__note label { font: 600 .75rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.cs__note textarea { width: 100%; min-height: 4.5rem; resize: vertical; padding: .8rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--paper); font: inherit; line-height: 1.45; }
.cs__note textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cs .pay { justify-content: center; }
.cs .pay span { border-color: rgba(20, 36, 27, .22); color: var(--ink-2); }
.cs__keep { text-align: center; }
.cs__keep a { font-size: .9375rem; }
.cs .fine { justify-content: center; text-align: center; }

/* empty */
.cmt { display: grid; justify-items: center; gap: 1.1rem; text-align: center; padding: clamp(2.5rem, 7vw, 5rem) 1rem; border-radius: var(--r-lg); background: var(--stone); }
.cmt svg { width: 6.5rem; height: 6.5rem; color: var(--sage-2); }
.cmt h2 { font: 400 var(--fs-h3)/1.05 var(--display); }
.cmt p { color: var(--text-2); max-width: 40ch; }
.cmt__acts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* upsell */
.cup { padding-block: clamp(1rem, 3vw, 2rem) var(--sec); }
.cup__grid { min-height: 22rem; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem .9rem; }
@media (min-width: 900px) { .cup__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem 1.25rem; } }
.cup__grid > li { animation: cfade .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.cup[hidden] { display: none; }

/* phone checkout bar */
.cstick { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .9rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: rgba(251, 249, 242, .97); border-top: 1px solid var(--line); box-shadow: 0 -14px 30px -22px rgba(20, 36, 27, .4); transform: translateY(105%); transition: transform .45s var(--ease); visibility: hidden; }
.cstick.is-on { transform: none; visibility: visible; }
.cstick__t { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.cstick__t span { font-size: .8125rem; color: var(--text-2); }
.cstick__t b { font: 400 1.75rem/1 var(--display); font-variant-numeric: tabular-nums; }
.cstick .btn { min-height: 2.9rem; flex: none; }
@media (min-width: 1000px) { .cstick { display: none; } }
@media (max-width: 999px) { .toasts { bottom: 5.5rem; } }

@media (prefers-reduced-motion: reduce) {
  .cl, .cup__grid > li { animation: none; }
  .cl.is-gone { animation: none; opacity: 0; }
  .cstick, .cl__img img { transition: none; }
}