/* ============================================================
   Cart (.lc) — a utility page, not a landing page.

   Two columns of self-contained cards: the bag on the left, what
   it comes to on the right. One surface treatment (white card,
   1px line, 16px radius), one spacing scale, one type scale — the
   discipline is the design. Colour is used only to say what an
   item *is*: sage bowls, butter school meals, lilac gift cards.

   The cross-sell shelf sits at the foot of the bag column rather
   than full-width under both, so a one-item bag can't leave the
   left half of the page empty.

   Keyframes namespaced lc*; style.css owns the reduced-motion kill.
   ============================================================ */

@keyframes lcIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes lcBump{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(1.1); } }
@keyframes lcPop{ 0%{ transform:scale(.92); } 55%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
@keyframes lcLand{ 0%{ background:var(--tint); } 100%{ background:transparent; } }
@keyframes lcBob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-7px) rotate(2deg); } }

.lc{
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --card-r:16px;
  padding:var(--s7) 0 72px;
  background:var(--bg);
}

/* ---- shared parts ---- */
.lc-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--card-r);
}

.lc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 var(--s6); border-radius:var(--card-r);
  font:700 14.5px var(--font-b); border:1.5px solid transparent;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.lc-btn-primary{ background:var(--sage); color:var(--cream); }
.lc-btn-primary:hover{ background:var(--sage-d); color:var(--cream); }
.lc-btn-ghost{ background:var(--white); border-color:var(--line2); color:var(--ink); }
.lc-btn-ghost:hover{ border-color:var(--sage); color:var(--sage-d); }
.lc-btn-school{ background:var(--butter); color:#3B2E10; }
.lc-btn-school:hover{ background:var(--butter-d); color:var(--cream); }

/* ---- page head ---- */
.lc-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap;
  padding-bottom:var(--s5); margin-bottom:var(--s6);
  border-bottom:1px solid var(--line);
}
.lc-head-l{ display:flex; align-items:baseline; gap:var(--s3); }
.lc-head h1{ font-size:clamp(28px,3.4vw,36px); letter-spacing:-.01em; }
.lc-head-count{
  font:700 11.5px var(--font-b); letter-spacing:.04em;
  color:var(--sage-d); background:var(--sage-c1);
  border-radius:var(--r-pill); padding:5px 11px;
}
.lc-head-back{
  font:600 14px var(--font-b); color:var(--ink2);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--line2);
}
.lc-head-back:hover{ color:var(--sage-d); text-decoration-color:var(--sage2); }

/* ---- notices ---- */
.lc-notices:empty{ display:none; }
.lc-notices{ margin-bottom:var(--s5); }
.lc-notices ul{ list-style:none; margin:0; padding:0; }
.lc-notices li,
.lc-notices .woocommerce-message,
.lc-notices .woocommerce-info,
.lc-notices .woocommerce-error{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  border:1px solid #CFE0C2; border-left-width:3px; border-radius:10px;
  background:var(--sage-c1); color:var(--sage-d);
  padding:var(--s3) var(--s4); margin:0 0 var(--s2);
  font:600 13.5px/1.5 var(--font-b);
}
.lc-notices .woocommerce-error,
.lc-notices ul.woocommerce-error li{ background:var(--peach-c); border-color:#EBC7B1; color:var(--peach-d); }
.lc-notices .button{
  margin-left:auto; background:none; border:none; padding:0;
  font:700 12.5px var(--font-b); color:inherit; text-decoration:underline;
}

/* ============================================================
   Layout
   ============================================================ */
.lc-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 360px;
  gap:var(--s6); align-items:start;
}
.lc-col{ display:flex; flex-direction:column; gap:var(--s4); min-width:0; }
.lc-col-side{ position:sticky; top:90px; }

/* ============================================================
   The bag — grouped by where each line is going
   ============================================================ */
.lc-bag{ overflow:hidden; }

/* A group heading is a rule with a label riding on it, not a bar: it gives the
   bag its structure without adding another box to the page. */
.lc-group-head{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s4) var(--s5) 0;
  font:700 11px var(--font-b); letter-spacing:.1em; text-transform:uppercase;
}
.lc-group + .lc-group .lc-group-head{ padding-top:var(--s5); }
.lc-group-ic{
  width:26px; height:26px; border-radius:8px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tint); color:var(--ink-ac);
}
.lc-group-label{ color:var(--ink-ac); }
.lc-group-rule{ flex:1; height:1px; background:var(--line); }
.lc-group-note{
  flex:none; font:400 11.5px var(--font-b); letter-spacing:0; text-transform:none;
  color:var(--ink3);
}
/* The first row under a heading loses its own top rule — the heading is it. */
.lc-group .lc-item:last-child{ border-bottom:0; }
.lc-group + .lc-group{ border-top:1px solid var(--line); }

/* One grid for every row, so thumbnail, quantity, price and the remove
   control line up down the whole bag whatever the item is. A gift card is
   not a bigger thing than a bowl and does not get a bigger box. */
.lc-item{
  --ac:var(--sage); --tint:var(--sage-c1); --ink-ac:var(--sage-d);
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 96px 92px 28px;
  gap:var(--s4);
  align-items:center;
  padding:var(--s5);
  border-bottom:1px solid var(--line);
  transition:opacity .2s ease, transform .2s ease;
}
/* Deliberately no entrance animation on the base rule: a row must be visible
   without one ever running. The arrival choreography is added by JS via
   .is-enter and removed again, so a throttled or paused renderer can never
   leave the bag blank. */
.lc-item:last-child{ border-bottom:0; }
.lc-item.is-going{ opacity:0; transform:translateX(-10px); }

.lc-t-sage  { --ac:var(--sage);   --tint:var(--sage-c1);  --ink-ac:var(--sage-d); }
.lc-t-butter{ --ac:var(--butter); --tint:var(--butter-c); --ink-ac:var(--butter-d); }
.lc-t-peach { --ac:var(--peach);  --tint:var(--peach-c);  --ink-ac:var(--peach-d); }
.lc-t-lav   { --ac:var(--lav);    --tint:var(--lav-c);    --ink-ac:var(--lav-d); }

.lc-item-thumb{
  width:64px; height:64px; border-radius:12px; overflow:hidden; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--tint); color:var(--ink-ac);
}
.lc-item-img{ width:100%; height:100%; object-fit:cover; }

.lc-item-main{ min-width:0; }
.lc-item-tag{
  display:inline-flex; align-items:center; gap:6px;
  font:700 10.5px var(--font-b); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-ac);
}
.lc-item-tag i{ width:6px; height:6px; border-radius:50%; background:var(--ac); }
.lc-item-name{ font-size:17px; line-height:1.3; margin-top:3px; }
.lc-item-meta{
  margin-top:var(--s1); font:400 13px/1.55 var(--font-b); color:var(--ink3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lc-item-meta span + span::before{ content:"·"; margin:0 6px; color:var(--line2); }
.lc-item-meta i{ font-style:normal; font-weight:600; color:var(--ink2); }

.lc-item-qty{ display:flex; justify-content:center; }
.lc-stepper{
  display:inline-flex; align-items:center;
  border:1px solid var(--line2); border-radius:10px; overflow:hidden;
}
.lc-stepper-btn{
  width:30px; height:34px; flex:none; border:none; background:var(--white);
  color:var(--ink2); font:400 17px/1 var(--font-b);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .14s ease, color .14s ease;
}
.lc-stepper-btn:hover{ background:var(--band); color:var(--sage-d); }
.lc-stepper-btn:disabled{ opacity:.35; cursor:not-allowed; background:var(--white); }
.lc-stepper-in{
  width:34px; height:34px; border:none; border-inline:1px solid var(--line);
  background:var(--white); text-align:center;
  font:600 14px var(--font-b); color:var(--ink);
  -moz-appearance:textfield; appearance:textfield;
}
.lc-stepper-in::-webkit-outer-spin-button,
.lc-stepper-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.lc-stepper-in:focus{ outline:none; }
.lc-stepper:focus-within{ border-color:var(--sage2); }
.lc-qty-one{ font:500 14px var(--font-b); color:var(--ink3); }

.lc-item-price{ text-align:right; }
.lc-price{ display:block; font:600 16px var(--font-b); color:var(--ink); font-variant-numeric:tabular-nums; }
.lc-price.is-bumped{ animation:lcBump .3s ease; }
.lc-price-free{
  display:inline-block; font:700 11.5px var(--font-b); color:var(--sage-d);
  background:var(--sage-c1); border-radius:var(--r-pill); padding:4px 10px;
}
.lc-price-each{
  display:block; margin-top:2px;
  font:400 12px var(--font-b); color:var(--ink3); font-variant-numeric:tabular-nums;
}

.lc-item-x{
  width:28px; height:28px; border-radius:8px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink3); background:none; border:none;
  transition:background .14s ease, color .14s ease;
}
.lc-item-x:hover{ background:var(--peach-c); color:var(--peach-d); }

.lc-item-warn{
  grid-column:2 / -1;
  border-left:3px solid var(--butter); border-radius:0 8px 8px 0;
  background:var(--butter-c); color:var(--butter-d);
  padding:var(--s2) var(--s3);
  font:600 12.5px/1.5 var(--font-b);
}

/* ---- extras, folded into the row ---- */
.lc-extras{ grid-column:2 / -1; }
.lc-dips{ grid-column:2 / -1; margin-top:var(--s2); }
.lc-dips-label{ display:block; font:600 12px var(--font-b); color:var(--ink2); margin-bottom:8px; }
.lc-dips-label span{ color:var(--ink3); font-weight:400; }
.lc-chip-ic{ font-size:15px; line-height:1; }
.lc-extras summary{
  display:inline-flex; align-items:center; gap:6px; list-style:none; cursor:pointer;
  font:600 12.5px var(--font-b); color:var(--ink-ac);
  padding:var(--s1) 0; user-select:none;
}
.lc-extras summary::-webkit-details-marker{ display:none; }
.lc-extras summary::before{
  content:"+"; width:16px; height:16px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tint); font:700 12px/1 var(--font-b);
}
.lc-extras[open] summary::before{ content:"−"; }
.lc-extras summary span{ font-weight:400; color:var(--ink3); }
.lc-extras-rail{
  display:flex; flex-wrap:nowrap; gap:6px; margin-top:var(--s2);
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:2px;
}
.lc-extras-rail::-webkit-scrollbar{ display:none; }
.lc-chip{
  flex:none; scroll-snap-align:start;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line2); border-radius:var(--r-pill);
  background:var(--white); padding:6px 12px;
  font:500 12.5px var(--font-b); color:var(--ink);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.lc-chip span{ font-weight:600; color:var(--ink3); font-variant-numeric:tabular-nums; }
.lc-chip:hover{ border-color:var(--ac); }
.lc-chip.is-on{ background:var(--ac); border-color:var(--ac); color:#fff; }
.lc-chip.is-on span{ color:rgba(255,255,255,.82); }
.lc-chip:disabled{ opacity:.5; cursor:wait; }

/* ---- cutoff note ---- */
.lc-cutoff{
  font:400 13px/1.6 var(--font-b); color:var(--ink3);
  padding-left:var(--s3); border-left:2px solid var(--line2);
}
.lc-cutoff b{ color:var(--butter-d); font-weight:700; }

/* ============================================================
   Shelf — the kitchen's other bowls
   ============================================================ */
.lc-shelf{ padding:var(--s5); }
.lc-shelf-head{ margin-bottom:var(--s4); }
.lc-shelf-head h2{ font-size:19px; }
.lc-shelf-head p{ font:400 13px var(--font-b); color:var(--ink3); margin-top:2px; }
/* Group headings only appear when the shelf carries both lines at once. */
.lc-shelf-group{
  display:flex; align-items:baseline; gap:var(--s2);
  font:700 10.5px var(--font-b); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink2); margin-bottom:var(--s3);
}
.lc-shelf-group span{ font-weight:400; letter-spacing:0; text-transform:none; font-size:12px; color:var(--ink3); }
.lc-shelf-rail + .lc-shelf-group{ margin-top:var(--s5); }
.lc-shelf-note{
  margin-top:var(--s3); font:400 12.5px var(--font-b); color:var(--ink3);
}
.lc-shelf-note a{ color:var(--sage-d); text-decoration:underline; text-underline-offset:3px; }
.lc-shelf-note + .lc-shelf-group{ margin-top:var(--s5); }
.lc-sug-meal .lc-sug-img{ background:var(--butter-c); color:var(--butter-d); }
.lc-sug-meal:hover{ border-color:var(--butter); }
.lc-sug-meal .lc-sug-add{ color:var(--butter-d); }
.lc-sug-meal .lc-sug-add:hover{ background:var(--butter); border-color:var(--butter); color:#3B2E10; }
/* Wide enough that a name, a price and the Add button never fight for the
   same pixels — two up in the bag column, one up on a phone. */
/* Cross-sell: vertical product cards (image on top) in a horizontal swipe rail. */
.lc-shelf-rail{
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:var(--s3);
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:2px;
}
.lc-shelf-rail::-webkit-scrollbar{ display:none; }
.lc-shelf-rail .lc-sug{
  flex:0 0 clamp(148px,42vw,172px); scroll-snap-align:start;
  flex-direction:column; align-items:center; text-align:center; gap:8px; padding:var(--s3);
}
.lc-shelf-rail .lc-sug-img{ width:72px; height:72px; }
.lc-shelf-rail .lc-sug-text{ flex:none; align-items:center; width:100%; }
.lc-shelf-rail .lc-sug-text b{ white-space:normal; }
.lc-shelf-rail .lc-sug-add{ margin:0; }
.lc-sug{
  display:flex; align-items:center; gap:var(--s3);
  border:1px solid var(--line); border-radius:12px; padding:var(--s2);
  transition:border-color .16s ease, background .16s ease;
}
.lc-sug:hover{ border-color:var(--sage2); background:var(--band); }
.lc-sug-img{
  width:44px; height:44px; border-radius:9px; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--sage-c1); color:var(--sage-d);
}
.lc-sug-img img{ width:100%; height:100%; object-fit:cover; }
.lc-sug-text{ min-width:0; flex:1; display:flex; flex-direction:column; }
.lc-sug-text b{
  font:600 13.5px/1.25 var(--font-b); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lc-sug-text i{ font:400 12.5px var(--font-b); font-style:normal; color:var(--ink3); font-variant-numeric:tabular-nums; }
.lc-sug-add{
  flex:none; border:1px solid var(--line2); border-radius:var(--r-pill);
  background:var(--white); color:var(--sage-d);
  padding:6px 13px; font:700 12px var(--font-b);
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.lc-sug-add:hover{ background:var(--sage); border-color:var(--sage); color:var(--cream); }
.lc-sug-add:disabled{ opacity:.5; cursor:wait; }

/* ============================================================
   Summary
   ============================================================ */
.lc-sum{ padding:var(--s5); }
.lc-sum.is-busy{ opacity:.6; }
.lc-sum h2{ font-size:19px; margin-bottom:var(--s4); }
.lc-sum-rows{ margin:0; padding:0 0 var(--s4); border-bottom:1px solid var(--line); }
.lc-sum-rows > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  font:400 14px var(--font-b); color:var(--ink2); padding:var(--s1) 0;
}
.lc-sum-rows dt{ display:flex; align-items:baseline; gap:var(--s2); }
.lc-sum-rows dd{ margin:0; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.lc-sum-rows dd.is-nil{ font-weight:500; color:var(--ink3); }
.lc-sum-rows .is-off dt,
.lc-sum-rows .is-off dd{ color:var(--sage-d); }
.lc-sum-rows .is-off a{
  font:500 12px var(--font-b); color:var(--ink3);
  text-decoration:underline; text-underline-offset:2px;
}
.lc-sum-rows .is-off a:hover{ color:var(--peach-d); }

/* The total gets its own quiet band — emphasis by surface, not by shouting. */
.lc-sum-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  background:var(--band); border-radius:12px;
  padding:var(--s3) var(--s4); margin:var(--s4) 0;
}
.lc-sum-total span{ font:600 14px var(--font-b); color:var(--ink2); }
.lc-sum-total b{ font:700 32px/1 var(--font-d); color:var(--ink); font-variant-numeric:tabular-nums; }
.lc-sum-go{ width:100%; gap:var(--s2); }
.lc-sum-go svg{ transition:transform .2s cubic-bezier(.34,1.4,.5,1); }
.lc-sum-go:hover svg{ transform:translateX(4px); }

.lc-promo{ margin-top:var(--s3); }
.lc-promo summary{
  list-style:none; cursor:pointer; user-select:none;
  font:500 13px var(--font-b); color:var(--ink2);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line2);
}
.lc-promo summary::-webkit-details-marker{ display:none; }
.lc-promo summary:hover{ color:var(--sage-d); }
.lc-promo-row{ display:flex; gap:var(--s2); margin-top:var(--s3); }
.lc-promo-row input{
  flex:1; min-width:0; height:42px; padding:0 var(--s3);
  border:1px solid var(--line2); border-radius:10px; background:var(--bg);
  font:500 13.5px var(--font-b); color:var(--ink);
}
.lc-promo-row input:focus{ outline:none; border-color:var(--sage2); }
.lc-promo-row button{
  flex:none; height:42px; padding:0 var(--s4); border:none; border-radius:10px;
  background:var(--ink); color:var(--cream); font:700 12.5px var(--font-b);
}
.lc-promo-row button:hover{ background:var(--sage-d); }

/* ---- for next time ---- */
.lc-next{
  margin-top:var(--s5); padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.lc-next-tag{
  font:700 10.5px var(--font-b); letter-spacing:.12em; text-transform:uppercase;
  color:var(--butter-d);
}
.lc-next p{ font:400 13px/1.6 var(--font-b); color:var(--ink2); margin:var(--s2) 0 var(--s3); }
.lc-next p b{ color:var(--butter-d); font-weight:700; }
.lc-next-add{
  width:100%; height:42px; border-radius:10px;
  border:1px solid var(--butter); background:var(--white); color:var(--butter-d);
  font:700 12.5px var(--font-b);
  transition:background .16s ease, color .16s ease;
}
.lc-next-add:hover{ background:var(--butter); color:#3B2E10; }
.lc-next-add:disabled{ opacity:.5; cursor:wait; }

/* ============================================================
   Empty
   ============================================================ */
.lc-blank{ text-align:center; padding:var(--s8) var(--s6) 44px; max-width:520px; margin:0 auto; }
.lc-blank-img{ width:150px; margin:0 auto var(--s5); }
.lc-blank h2{ font-size:25px; }
.lc-blank p{ font:400 14.5px/1.6 var(--font-b); color:var(--ink2); margin:var(--s3) auto var(--s6); max-width:340px; }
.lc-blank-btns{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; }
/* an empty bag = a wilted, desaturated Leafy logo with a slow tear */
.lc-blank-wilt{ position:relative; display:inline-block; line-height:0; margin:0 auto var(--s5); }
.lc-blank-img.lc-blank-sad{ margin:0; }
.lc-blank-tear{ position:absolute; left:32%; top:46%; font-size:16px; line-height:1; opacity:.85; pointer-events:none; animation:lcTear 3s ease-in-out infinite; }
@keyframes lcTear{ 0%,12%{ transform:translateY(0); opacity:0; } 32%{ opacity:.9; } 100%{ transform:translateY(18px); opacity:0; } }

/* ============================================================
   Character
   The page earns its personality from behaviour, not ornament:
   things you touch answer back, and something that just arrived
   says so. Nothing here moves on its own except the mascot on an
   empty bag, where there is nothing else to look at.
   ============================================================ */

/* food tilts toward you when you consider the row it's in */
.lc-item-thumb{ transition:transform .24s cubic-bezier(.34,1.4,.5,1); }
.lc-item:hover .lc-item-thumb{ transform:rotate(-3deg) scale(1.06); }

/* a line that just landed glows in its own colour, then settles */
.lc-item.is-new{ animation:lcLand .9s ease-out; }

/* tapping an extra should feel like dropping it in */
.lc-chip.is-popped{ animation:lcPop .3s cubic-bezier(.34,1.5,.5,1); }

/* the shelf leans in */
.lc-sug-img img{ transition:transform .28s cubic-bezier(.34,1.3,.5,1); }
.lc-sug:hover .lc-sug-img img{ transform:scale(1.09); }
.lc-sug-add{ transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.lc-sug:hover .lc-sug-add{ transform:translateX(2px); }

/* the one thing on the page allowed to fidget */
.lc-blank-img{ animation:lcBob 6s ease-in-out infinite; transform-origin:50% 90%; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .lc-grid{ grid-template-columns:minmax(0,1fr); }
  .lc-col-side{ position:static; }
}
@media (max-width:600px){
  .lc{ padding-top:var(--s5); }
  /* Quantity and price drop to a second line, still on the same two edges. */
  .lc-item{
    grid-template-columns:52px minmax(0,1fr) 28px;
    gap:var(--s2) var(--s3); padding:var(--s4); align-items:start;
  }
  .lc-item-thumb{ width:52px; height:52px; grid-row:1; }
  .lc-item-main{ grid-column:2; grid-row:1; }
  .lc-item-x{ grid-column:3; grid-row:1; }
  .lc-item-qty{ grid-column:2; grid-row:2; justify-content:flex-start; }
  .lc-item-price{ grid-column:3; grid-row:2; justify-self:end; white-space:nowrap; }
  .lc-item-warn, .lc-extras, .lc-dips{ grid-column:2 / -1; }
  .lc-item-name{ font-size:16px; }
  /* A label and three delivery dates won't share 390px — drop the rule and let
     the dates take their own line under the heading. */
  /* Let the note drop to its own line when it must, but keep it a pill sized
     to its text — a full-width bar is not a caption. */
  .lc-group-head{ flex-wrap:wrap; row-gap:6px; }
  .lc-group-rule{ display:none; }
  .lc-group-note{ margin-left:0; }
  /* Ten wrapped chips would make one row taller than the phone; scroll them. */
  .lc-extras-rail{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--s1); }
  .lc-chip{ flex:none; }
  .lc-shelf-rail{ grid-template-columns:1fr; }
  .lc-sum-total b{ font-size:27px; }
}
/* ============================================================
   Expression layer — sleek

   Refinement rather than decoration. Hairlines instead of outlines,
   light instead of edges, air instead of ornament. Colour is spent
   almost entirely on the food photography; the interface stays
   near-monochrome and gets out of its way.

   Three deliberate moments carry the page: the headline, the total,
   and the photographs. Everything else is quiet on purpose.

   Loaded after the structural rules — the column grid is untouched.
   ============================================================ */

@keyframes lcFanIn{ from{ opacity:0; transform:translateY(8px) scale(.94); } to{ opacity:1; transform:translateY(0) scale(1); } }

.lc{ --hair:#EDE8DC; padding-top:var(--s8); }

/* ---------- surfaces: light, not lines ---------- */
.lc-card{
  border:1px solid var(--hair);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(63,82,54,.03), 0 18px 40px -30px rgba(63,82,54,.55);
}

/* ---------- head ---------- */
.lc-head{
  align-items:baseline; border-bottom:1px solid var(--hair);
  padding-bottom:var(--s5); margin-bottom:var(--s7);
}
.lc-head h1{
  font-size:clamp(30px,3.8vw,42px); letter-spacing:-.028em; font-weight:600;
}
.lc-head-l{ align-items:baseline; gap:var(--s3); }
.lc-head-count{
  background:none; padding:0; border-radius:0;
  font:400 14px var(--font-b); color:var(--ink3); letter-spacing:0;
  transform:none; box-shadow:none;
}
.lc-head-count::before{ content:"·"; margin-right:var(--s3); color:var(--line2); }
.lc-head-back{
  background:none; border:0; padding:0; box-shadow:none;
  font:500 14px var(--font-b); color:var(--ink2);
  text-decoration:none; position:relative;
}
.lc-head-back::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--line2); transform:scaleX(1); transform-origin:right;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.lc-head-back:hover{ color:var(--ink); transform:none; }
.lc-head-back:hover::after{ background:var(--sage); }

/* ---------- the bag ---------- */
.lc-bag{ padding:var(--s2) 0; overflow:visible; }
.lc-bag::before{ display:none; }
.lc-group{ background:none; }
.lc-group + .lc-group{ border-top:0; }
.lc-group + .lc-group::before{ display:none; }

/* a whisper of a label, not a bar */
.lc-group-head{
  display:flex; align-items:center; gap:var(--s3);
  margin:0; padding:var(--s5) var(--s6) var(--s2);
  background:none;
  font:600 10.5px var(--font-b); letter-spacing:.18em; text-transform:uppercase;
}
.lc-group + .lc-group .lc-group-head{ padding-top:var(--s6); }
.lc-group-ic{
  position:static; margin:0; box-shadow:none; animation:none;
  width:7px; height:7px; border-radius:50%; background:var(--ac); flex:none;
}
.lc-group-ic svg{ display:none; }
.lc-group-label{ color:var(--ink2); }
.lc-group-note{
  margin-left:auto; background:none; padding:0; border-radius:0;
  font:400 12px var(--font-b); letter-spacing:0; text-transform:none; color:var(--ink3);
}
.lc-group-rule{ display:none; }

/* ---------- rows ---------- */
.lc-item{
  grid-template-columns:76px minmax(0,1fr) 108px 100px 32px;
  gap:var(--s5); padding:var(--s5) var(--s6);
  border-bottom:0; position:relative;
  transition:background .2s ease;
}
/* the divider starts where the content does — a small thing that reads as care */
.lc-item + .lc-item::before{
  content:""; position:absolute; left:var(--s6); right:var(--s6); top:0;
  height:1px; background:var(--hair);
}
.lc-item:hover{ background:#FBFAF6; }

.lc-item-thumb{
  position:relative;
  width:76px; height:76px; border-radius:16px;
  border:0; box-shadow:0 2px 6px -2px rgba(63,82,54,.18), inset 0 0 0 1px rgba(63,82,54,.06);
  background:linear-gradient(150deg, var(--tint), #fff 94%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
/* a soft off-centre glow lifts the flat tile behind the icon */
.lc-item-thumb::before{
  content:""; position:absolute; z-index:0; width:46px; height:46px; border-radius:50%;
  top:-14px; right:-14px; background:rgba(255,255,255,.5); filter:blur(9px); pointer-events:none;
}
.lc-item-thumb svg,
.lc-item-thumb .lc-art{ position:relative; z-index:1; display:block; }
.lc-item-thumb img.lc-art{ object-fit:contain; }
.lc-item:hover .lc-item-thumb{ transform:scale(1.03); }

.lc-item-tag{
  font:600 10px var(--font-b); letter-spacing:.16em; color:var(--ink3);
}
.lc-item-tag i{ width:5px; height:5px; }
.lc-item-name{
  font-size:19px; font-weight:600; letter-spacing:-.012em; margin-top:5px;
}
.lc-item-meta{ font-size:13px; margin-top:5px; color:var(--ink3); }
.lc-item-meta i{ color:var(--ink2); font-weight:500; }

.lc-stepper{
  border:1px solid var(--hair); border-radius:10px; background:var(--white);
  box-shadow:none; overflow:hidden;
}
.lc-stepper-btn{
  width:32px; height:36px; font:400 16px/1 var(--font-b); color:var(--ink3);
  background:none;
}
.lc-stepper-btn:hover{ background:#F7F5EF; color:var(--ink); }
.lc-stepper-in{
  width:32px; height:36px; font:600 14px var(--font-b);
  border-inline:1px solid var(--hair);
}
.lc-qty-one{ font:400 14px var(--font-b); color:var(--ink3); }

.lc-price{ font:600 16.5px var(--font-b); color:var(--ink); letter-spacing:-.01em; }
.lc-price-each{ font-size:12px; margin-top:3px; }
.lc-price-free{ border:0; background:var(--sage-c1); font-size:11.5px; }
.lc-item-x{
  width:32px; height:32px; border:0; border-radius:50%;
  background:none; color:#BEBCB2;
  transition:background .18s ease, color .18s ease;
}
.lc-item-x:hover{ background:#F5F2EA; color:var(--ink2); }

.lc-item-warn{
  border:0; border-left:2px solid var(--butter); border-radius:0;
  background:none; color:var(--butter-d);
  padding:2px 0 2px var(--s3); font:500 12.5px/1.55 var(--font-b);
}

/* extras: a quiet disclosure, chips as tokens */
.lc-extras summary{ font:500 12.5px var(--font-b); color:var(--ink2); }
.lc-extras summary::before{
  width:16px; height:16px; border:1px solid var(--line2); background:none;
  color:var(--ink3); font:400 12px/1 var(--font-b);
}
.lc-extras summary:hover{ color:var(--ink); }
.lc-extras summary span{ color:var(--ink3); }
.lc-chip{
  border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:7px 13px; font:500 12.5px var(--font-b); color:var(--ink2);
  box-shadow:none; background:var(--white);
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.lc-chip span{ color:var(--ink3); font-weight:500; }
.lc-chip:hover{ border-color:var(--ink3); color:var(--ink); transform:none; }
.lc-chip.is-on{
  background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:none;
}
.lc-chip.is-on span{ color:rgba(255,255,255,.6); }

/* ---------- summary ---------- */
.lc-sum{ background:var(--white); padding:0 var(--s6) var(--s6); overflow:hidden; }
.lc-sum h2{
  margin:0 0 var(--s4); font:600 10.5px var(--font-b);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink3);
}
/* the order, photographed — the one place colour is allowed to sing */
.lc-fan{ display:flex; justify-content:center; align-items:center; padding:var(--s7) 0 var(--s6); }
.lc-fan-i, .lc-fan-more{
  width:108px; height:108px; border-radius:50%; flex:none;
  margin-left:-22px; overflow:hidden;
  border:3px solid var(--white); box-shadow:0 2px 8px -3px rgba(63,82,54,.35);
  background:var(--tint,var(--sage-c1)); color:var(--ink-ac,var(--sage-d));
  display:flex; align-items:center; justify-content:center;
  transform:none;
  transition:margin-left .38s cubic-bezier(.2,.8,.2,1);
  animation:lcFanIn .5s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:calc(var(--i) * .05s);
  position:relative; z-index:calc(9 - var(--i));
}
.lc-fan-i:first-child{ margin-left:0; }
.lc-fan-i img{ width:100%; height:100%; object-fit:cover; }
.lc-fan-i .lc-art{ width:76%; height:76%; }
.lc-fan-i img.lc-art{ object-fit:contain; }
.lc-fan-more{ width:92px; height:92px; font:600 16px var(--font-b); color:var(--ink3); background:var(--band); }
.lc-sum:hover .lc-fan-i, .lc-sum:hover .lc-fan-more{ margin-left:-5px; transform:none; }
.lc-sum:hover .lc-fan-i:first-child{ margin-left:0; }

.lc-sum-rows{ border-bottom:1px solid var(--hair); padding-bottom:var(--s4); }
.lc-sum-rows > div{ font:400 14px var(--font-b); color:var(--ink2); padding:var(--s2) 0; }
.lc-sum-rows dd{ font-weight:500; color:var(--ink); }

.lc-sum-total{
  background:none; border:0; border-radius:0;
  padding:var(--s5) 0 var(--s6); margin:0;
  align-items:baseline;
}
.lc-sum-total span{
  font:600 10.5px var(--font-b); letter-spacing:.18em; text-transform:uppercase; color:var(--ink3);
}
.lc-sum-total b{ font-size:40px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }

.lc-btn{ border-radius:12px; }
.lc-sum-go{
  height:54px; font:600 15px var(--font-b); letter-spacing:.01em;
  border:0; box-shadow:0 10px 24px -14px rgba(92,122,80,.9);
  transition:background .2s ease, box-shadow .2s ease;
}
.lc-sum-go:hover{ transform:none; box-shadow:0 14px 28px -14px rgba(92,122,80,1); }
.lc-sum-go svg{ opacity:.7; }

.lc-promo{ margin-top:var(--s4); }
.lc-promo summary{ font:400 13px var(--font-b); color:var(--ink3); text-decoration-color:var(--hair); }
.lc-promo-row input{ border:1px solid var(--hair); border-radius:10px; height:44px; background:var(--white); }
.lc-promo-row button{ border-radius:10px; height:44px; box-shadow:none; font-weight:600; }

.lc-next{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--hair); }
.lc-next-tag{ font:600 10px var(--font-b); letter-spacing:.18em; color:var(--ink3); }
.lc-next p{ font-size:12.5px; color:var(--ink3); }
.lc-next p b{ color:var(--ink2); font-weight:600; }
.lc-next-add{
  border:1px solid var(--line2); border-radius:10px; height:44px;
  background:none; color:var(--ink2); font:600 12.5px var(--font-b); box-shadow:none;
}
.lc-next-add:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); transform:none; }

/* ---------- shelf ---------- */
.lc-shelf{ padding:var(--s6); }
.lc-shelf-head{ margin-bottom:var(--s5); }
.lc-shelf-head h2{ font-size:19px; font-weight:600; letter-spacing:-.012em; }
.lc-shelf-head p{ font-size:13px; color:var(--ink3); }
.lc-shelf-group{
  font:600 10px var(--font-b); letter-spacing:.18em; color:var(--ink3); margin-bottom:var(--s3);
}
.lc-shelf-group span{ font-size:11.5px; letter-spacing:0; }
.lc-sug{
  border:1px solid var(--hair); border-radius:14px; padding:var(--s2);
  box-shadow:none; background:var(--white);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.lc-sug:hover{ transform:none; border-color:var(--line2); box-shadow:0 8px 20px -16px rgba(63,82,54,.8); }
.lc-sug-img{ width:48px; height:48px; border-radius:50%; border:0; box-shadow:none; }
.lc-sug-text b{ font:600 13.5px var(--font-b); }
.lc-sug-text i{ font-size:12.5px; }
.lc-sug-add{
  border:1px solid var(--line2); background:none; color:var(--ink2);
  border-radius:var(--r-pill); padding:7px 14px; font:600 12px var(--font-b);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.lc-sug-add:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.lc-sug-meal .lc-sug-add{ color:var(--ink2); }
.lc-sug-meal .lc-sug-add:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.lc-shelf-note{ font-size:12px; color:var(--ink3); }

/* ---------- empty ---------- */
.lc-blank{ padding:var(--s8) var(--s6) 48px; }
.lc-blank h2{ font-size:26px; font-weight:600; letter-spacing:-.015em; }
.lc-blank-img{ animation:none; width:130px; }

/* ---------- phones ---------- */
@media (max-width:600px){
  .lc{ padding-top:var(--s6); }
  .lc-head h1{ font-size:28px; }
  .lc-item{ grid-template-columns:60px minmax(0,1fr) 32px; padding:var(--s4); gap:var(--s2) var(--s4); }
  .lc-item + .lc-item::before{ left:var(--s4); right:var(--s4); }
  .lc-item-thumb{ width:60px; height:60px; border-radius:14px; }
  .lc-item-name{ font-size:16.5px; }
  .lc-group-head{ padding:var(--s5) var(--s4) var(--s2); }
  .lc-group-note{ margin-left:0; }
  .lc-fan-i, .lc-fan-more{ width:92px; height:92px; }
  .lc-sum{ padding-inline:var(--s5); }
  .lc-sum-total b{ font-size:34px; }
  .lc-shelf{ padding:var(--s5); }
}

/* ============================================================
   Motion
   Sleek pages can still be alive. Nothing here loops forever and
   nothing moves without a reason: things arrive, numbers change,
   and what you add travels to where it lands. style.css turns the
   whole lot off under prefers-reduced-motion; the JS tweens check
   the same query themselves.
   ============================================================ */

@keyframes lcArrive{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes lcSheen{ from{ transform:translateX(-130%) skewX(-18deg); } to{ transform:translateX(340%) skewX(-18deg); } }
@keyframes lcShimmer{ from{ background-position:-180% 0; } to{ background-position:180% 0; } }
@keyframes lcTickIn{ from{ stroke-dashoffset:14; } to{ stroke-dashoffset:0; } }
@keyframes lcNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }

/* ---- arrival: the page assembles itself once, then settles ---- */
.lc.is-enter .lc-head{ animation:lcArrive .55s cubic-bezier(.2,.8,.2,1) backwards; }
.lc.is-enter .lc-col > *{ animation:lcArrive .6s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.06s; }
.lc.is-enter .lc-col-side > *{ animation-delay:.14s; }
.lc.is-enter .lc-item{
  animation:lcArrive .5s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:calc(var(--r,0) * .045s + .16s);
}
.lc.is-enter .lc-group-head{ animation:lcArrive .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.12s; }

/* ---- rows leave the way they came ---- */
.lc-item{ transition:background .2s ease, opacity .3s ease, transform .3s cubic-bezier(.4,0,1,1); }
.lc-item.is-going{ opacity:0; transform:translateX(-18px) scale(.985); }

/* ---- a line that just landed draws attention to itself, quietly ---- */
.lc-item.is-new{ animation:lcArrive .5s cubic-bezier(.2,.8,.2,1) backwards; }
.lc-item.is-new::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--ac); animation:lcFade 1.6s ease-out forwards;
}
@keyframes lcFade{ from{ opacity:1; } to{ opacity:0; } }

/* ---- numbers move rather than jump ---- */
.lc-price, .lc-sum-total b, .lc-sum-rows dd{ transition:color .2s ease; }
.lc-price.is-live, .lc-sum-total b.is-live{ color:var(--sage-d); }

/* ---- the quantity you just set ---- */
.lc-stepper.is-active{ border-color:var(--sage2); }
.lc-stepper-btn:active{ background:var(--sage-c1); }

/* ---- extras: the tick draws on ---- */
.lc-chip.is-on::after{
  content:""; width:9px; height:9px; margin-left:2px;
  background:no-repeat center/9px 9px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.5l2.6 2.6L10 3.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.lc-chip{ transition:border-color .18s ease, color .18s ease, background .18s ease, transform .18s cubic-bezier(.34,1.4,.5,1); }
.lc-chip:active{ transform:scale(.96); }

/* ---- the button catches the light ---- */
.lc-sum-go{ position:relative; overflow:hidden; }
.lc-sum-go::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transform:translateX(-130%) skewX(-18deg); pointer-events:none;
}
.lc-sum-go:hover::after{ animation:lcSheen .85s cubic-bezier(.3,0,.3,1); }
.lc-sum-go:hover svg{ animation:lcNudge .8s ease-in-out infinite; }

/* ---- recalculating: a pass of light, not a dimmer ---- */
.lc-sum{ position:relative; }
.lc-sum.is-busy{ opacity:1; }
.lc-sum.is-busy::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.7) 50%, transparent 62%);
  background-size:180% 100%;
  animation:lcShimmer 1.1s linear infinite;
}

/* ---- the shelf rises as it comes into view ---- */
.lc-shelf .lc-sug{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
  transition-delay:calc(var(--i,0) * .06s);
}
.lc-shelf.is-in .lc-sug{ opacity:1; transform:none; }
.lc-sug-img{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.lc-sug:hover .lc-sug-img{ transform:scale(1.08) rotate(-3deg); }

/* ---- the piece that flies from the shelf to the summary ---- */
.lc-flyer{
  position:fixed; z-index:9999; border-radius:50%; overflow:hidden;
  pointer-events:none; box-shadow:0 14px 30px -12px rgba(63,82,54,.65);
}
.lc-flyer img{ width:100%; height:100%; object-fit:cover; }

/* ---- the fan settles when its order changes ---- */
.lc-fan-i{ will-change:transform; }

/* ============================================================
   The delivery cart

   Parked bottom-left while the bag is being decided; on Checkout
   the order climbs in and it rolls off to the right, pulling the
   next page across behind it.

   Decoration only. Every rule here sits behind .lc-ride, which is
   aria-hidden and never takes a pointer event, and the whole thing
   is removed under reduced motion — the Checkout link works either
   way.
   ============================================================ */
/* Nudged off the left edge so the wheels hang past it: that keeps the crate
   clear of the content column on a 1440 screen, and reads as having driven in
   from off-page rather than as a sticker dropped on the corner. */
/* --lift is set by JS to whatever the footer has climbed into the viewport,
   so the crate rides up and parks on the green line instead of driving into
   it. Written to `bottom`, not `transform` — transform belongs to the arrival
   and the roll-out, and two owners would fight over it. */
.lc-ride{
  /* The artwork's viewBox starts at -60 to hold the push handle, so the left
     fifth of the frame is mostly air. Widened and pushed further left to
     compensate: the handle hangs off the edge and the cart body itself sits in
     the gutter at ~10–137px, clear of the content column. */
  position:fixed; left:-34px; bottom:calc(10px + var(--lift, 0px)); z-index:40;
  width:210px; pointer-events:none;
  transform:translate3d(0,0,0);
  filter:drop-shadow(0 12px 22px rgba(63,82,54,.14));
  transition:bottom .18s linear;
}
.lc-ride svg{ width:100%; height:auto; display:block; overflow:visible; }

/* ---- the client's artwork ----
   Keyframes lifted verbatim from `leafy-cart-element`; each element names its
   own animation inline, so these are the only definitions needed and nothing
   here selects into the drawing. Left alone deliberately: it is their design,
   and the only reason to touch it would be to break it. */
@keyframes cartSpin { to{ transform:rotate(360deg) } }
@keyframes cartBob  { 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-6px) rotate(-2deg) } }
@keyframes cartBob2 { 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-8px) rotate(1.5deg) } }
@keyframes cartBlink{ 0%,93%,100%{ transform:scaleY(1) } 96%{ transform:scaleY(.08) } }
@keyframes cartWink { 0%,68%,84%,100%{ transform:scaleY(1) } 74%,80%{ transform:scaleY(.08) } }
@keyframes cartWaveL{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(-18deg) } }
@keyframes cartWaveR{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(18deg) } }
@keyframes cartRoll { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }

/* it arrives once, on the first paint, rather than being simply present */
.lc-ride{ animation:lcRideArrive 1.2s cubic-bezier(.22,1,.36,1) both; }
@keyframes lcRideArrive{
  from{ transform:translate3d(-130%,0,0); }
  to  { transform:translate3d(0,0,0); }
}

/* ---- rolling out ----
   An unhurried departure: long enough to watch the cart go, and to read the
   name on its side on the way past. The wheels already turn on their own; the
   ride only makes them hurry. `!important` because the artwork sets its
   animation inline, which no stylesheet rule can otherwise outrank. */
.lc-ride.is-off .lc-ride-wheel{ animation-duration:.55s !important; }
.lc-ride.is-off{
  animation:lcRideOut 1.15s cubic-bezier(.4,.02,.24,1) forwards;
}
@keyframes lcRideOut{
  0%  { transform:translate3d(0,0,0) rotate(0deg); }
  15% { transform:translate3d(-24px,0,0) rotate(-2.5deg); }  /* wind-up */
  100%{ transform:translate3d(calc(100vw + 260px),0,0) rotate(0deg); }
}

/* ---- the new page, pulled across behind it ----
   Started late and run shorter than the roll, so the crate is always out in
   front: a wipe that overtakes the thing pulling it just reads as a curtain. */
.lc-wipe{
  position:fixed; inset:0; z-index:39; pointer-events:none;
  background:var(--cream);
  border-right:2px solid var(--sage-c2);
  transform:translate3d(-101%,0,0);
  animation:lcWipeIn .85s cubic-bezier(.4,.02,.24,1) forwards;
}
@keyframes lcWipeIn{ to{ transform:translate3d(0,0,0); } }

/* An order climbing aboard. Same flyer plumbing as the shelf's add. */
.lc-rider-fly{
  position:fixed; z-index:41; pointer-events:none;
  border-radius:10px; overflow:hidden;
  box-shadow:0 8px 18px -8px rgba(63,82,54,.4);
}
.lc-rider-fly img{ width:100%; height:100%; object-fit:cover; }
.lc-rider-fly svg{ width:100%; height:100%; }

/* The button says it is going somewhere while the cart loads up. */
.lc-sum-go.is-going{ pointer-events:none; }
.lc-sum-go.is-going svg{ animation:lcGoArrow .5s ease-in-out infinite alternate; }
@keyframes lcGoArrow{ to{ transform:translateX(4px); } }

/* Two places it must get out of the way: a narrow screen, where the
   summary and its Checkout button own the bottom of the page, and any
   viewport too short for a 200px ornament. */
@media (max-width:1180px){ .lc-ride{ width:186px; left:-30px; } }
@media (max-width:900px), (max-height:620px){ .lc-ride{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .lc-ride{ display:none; }
  .lc-wipe{ display:none; }
}