/* Toasts (study started 7 October 2026). In the shop since 7 October 2026 (Under the header on a phone and on a laptop): loaded by
   index-v2-enhanced.html. See toasts-studies.js.
   Every rule starts from html[data-toasts], which only a chosen phone design sets, so nothing here reaches the rest of the shop.
   The designs are made at 390px wide and checked at 320px. A laptop has none yet. */

/* The shop's own toast is still written and read out; it is only not shown. */
html[data-toasts] #toastHost>.toast{display:none!important}
html.cs-screen-on #tsHost{display:none}

/* ---- Shared by the new designs ---- */
html[data-toasts] .ts-host{position:fixed;z-index:50;left:0;right:0;display:flex;justify-content:center;pointer-events:none}
html[data-toasts] .ts-toast{pointer-events:auto;display:flex;align-items:center;font:500 15px/1.35 var(--sans);touch-action:pan-y;-webkit-user-select:none;user-select:none}
html[data-toasts] .ts-glyph{display:block;width:18px;height:18px}
html[data-toasts] .ts-icon{flex:none}
html[data-toasts] .ts-text{min-width:0}
html[data-toasts] .ts-text b{font-weight:700}
html[data-toasts] .ts-act{flex:none;border:0;background:none;font:inherit;font-weight:700;min-height:44px;white-space:nowrap;cursor:pointer}
@keyframes ts-up{from{opacity:0;transform:translateY(10px)}}
@keyframes ts-down{from{transform:translateY(-100%)}}
@keyframes ts-rise{from{transform:translateY(100%)}}
@keyframes ts-fade{from{opacity:0}}
html[data-toasts] .ts-toast{animation:ts-up .22s var(--ease)}
html[data-toasts] .ts-toast.is-leaving{opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease}

/* ---- Small pill: only as wide as its words, above the cart bar. A removal is the one word and Undo. ---- */
html[data-toasts="pill"] .ts-host{bottom:calc(var(--ts-foot,0px) + 12px);padding:0 20px}
html[data-toasts="pill"] .ts-toast{max-width:100%;min-height:40px;padding:0 16px 0 13px;gap:9px;border-radius:22px;background:var(--forest);color:#fff;box-shadow:0 6px 18px #003a1c2e}
html[data-toasts="pill"] .ts-toast[data-act]{min-height:44px;padding-right:4px}
html[data-toasts="pill"] .ts-icon{color:var(--mint-deep)}
html[data-toasts="pill"] .ts-text{padding:9px 0}
html[data-toasts="pill"] .ts-name{display:none}
html[data-toasts="pill"] .ts-act{margin-left:5px;padding:0 14px;border-left:1px solid #ffffff38;color:#fff}

/* ---- White card: across the foot, a green tick, the sheet's name under the word. Also the other messages of Inside the card. ---- */
html:is([data-toasts="card"],[data-toasts="incart"]) .ts-host{bottom:calc(var(--ts-foot,0px) + 10px);padding:0 12px}
html:is([data-toasts="card"],[data-toasts="incart"]) .ts-toast{width:100%;min-height:54px;padding:5px 6px 5px 11px;gap:11px;border:1px solid var(--line-strong);border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 6px 20px #003a1c1f}
html:is([data-toasts="card"],[data-toasts="incart"]) .ts-toast:not([data-act]){padding-right:14px}
html:is([data-toasts="card"],[data-toasts="incart"]) .ts-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--green-hover)}
html:is([data-toasts="card"],[data-toasts="incart"]) .ts-toast[data-tone="removed"] .ts-icon{background:var(--soft);color:var(--muted)}
html:is([data-toasts="card"],[data-toasts="incart"]) .ts-glyph{width:16px;height:16px}
html:is([data-toasts="card"],[data-toasts="incart"]) .ts-text{flex:1;padding:4px 0}
html:is([data-toasts="card"],[data-toasts="incart"]) .ts-name{display:block;overflow:hidden;font-size:14px;font-weight:400;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
html:is([data-toasts="card"],[data-toasts="incart"]) .ts-act{padding:0 12px;color:var(--green-hover)}

/* ---- Under the header: a pale green strip that slides out from under the header. Nothing at the foot is covered. ---- */
html[data-toasts="top"] .ts-host{top:var(--ts-top,0px);z-index:39;display:block;overflow:hidden}
html[data-toasts="top"] .ts-toast{width:100%;min-height:44px;padding:0 20px;gap:10px;border-bottom:1px solid var(--mint-deep);background:var(--mint);color:var(--forest);font-weight:600;animation-name:ts-down}
html[data-toasts="top"] .ts-toast[data-act]{padding-right:8px}
html[data-toasts="top"] .ts-toast.is-leaving{opacity:1;transform:translateY(-100%)}
html[data-toasts="top"] .ts-icon{color:var(--green)}
html[data-toasts="top"] .ts-text{flex:1;padding:10px 0}
html[data-toasts="top"] .ts-act{padding:0 12px;color:var(--forest);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px}

/* ---- On the cart bar: the bar grows one line taller, as one white surface. With no bar it is a white strip at the foot. ---- */
/* The strip sits behind the bar and tucks 6px under its top edge, so no hairline of the page shows between the two. */
html[data-toasts="dock"] .ts-host{bottom:calc(var(--ts-bar,0px) - 6px);z-index:34;display:block}
html[data-toasts="dock"].ts-nobar .ts-host{bottom:0}
html[data-toasts="dock"] .ts-toast{width:100%;min-height:50px;padding:4px 20px 6px;gap:10px;border-top:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;box-shadow:0 -8px 18px #003a1c14;animation-name:ts-rise}
html[data-toasts="dock"] .ts-toast[data-act]{padding-right:8px}
html[data-toasts="dock"] .ts-toast.is-leaving{opacity:1;transform:translateY(100%)}
html[data-toasts="dock"].ts-nobar .ts-toast{padding-top:0;padding-bottom:env(safe-area-inset-bottom,0px);min-height:52px}
html[data-toasts="dock"].ts-on .mobile-cart{border-top-color:transparent;box-shadow:none}
html[data-toasts="dock"] .ts-icon{color:var(--green)}
html[data-toasts="dock"] .ts-toast[data-tone="removed"] .ts-icon{color:var(--muted)}
html[data-toasts="dock"] .ts-text{flex:1;padding:8px 0}
html[data-toasts="dock"] .ts-act{padding:0 12px;color:var(--green-hover);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px}

/* Under the header and On the cart bar: a removal is one line, the word then the name, cut short with dots if it is long. */
html:is([data-toasts="top"],[data-toasts="dock"]) .ts-toast[data-named] .ts-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html:is([data-toasts="top"],[data-toasts="dock"]) .ts-name{font-weight:400}
html:is([data-toasts="top"],[data-toasts="dock"]) .ts-name::before{content:" · "}

/* ---- Inside the card: "Removed" and Undo take the place of the total for as long as the message stays. View cart stays. ---- */
html[data-toasts="incart"] .mobile-cart.ts-flashing[hidden]{display:flex!important;padding-right:18px}
html[data-toasts="incart"] .mobile-cart.ts-flashing>div:not(.ts-flash){display:none}
html[data-toasts="incart"] .ts-flash{display:flex;align-items:center;gap:14px;min-height:46px;font-size:16px;color:var(--ink);animation:ts-fade .2s ease}
html[data-toasts="incart"] .ts-flash span{font-weight:700}
html[data-toasts="incart"] .ts-flash .ts-act{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:16px;font-weight:600;color:var(--green-hover);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:5px}
html[data-toasts="incart"] .ts-flash .ts-glyph{width:17px;height:17px}
html[data-toasts="incart"] .mobile-cart.ts-flashing .button{flex:none;white-space:nowrap}
@media(max-width:350px){html[data-toasts="incart"] .mobile-cart.ts-flashing{gap:10px}html[data-toasts="incart"] .ts-flash{gap:10px}html[data-toasts="incart"] .ts-flash,html[data-toasts="incart"] .ts-flash .ts-act{font-size:15px}}

/* ================= Laptop (wider than 600px), 7 October 2026. Under the header (pc-strip) is in the shop. =================
   The phone pick's pale green and wording, with the room used for larger words and the whole name. */
html[data-toasts^="pc-"] .ts-toast{color:var(--forest);font-size:16px;background:var(--mint);cursor:default}
html[data-toasts^="pc-"] .ts-icon{color:var(--green)}
html[data-toasts^="pc-"] .ts-glyph{width:20px;height:20px}
html[data-toasts^="pc-"] .ts-name{font-weight:400}
html[data-toasts^="pc-"] .ts-act{padding:0 12px;color:var(--forest);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px}
html[data-toasts^="pc-"] .ts-act:hover{text-decoration-color:var(--forest)}
@keyframes ts-drop{from{opacity:0;transform:translateY(-8px)}}

/* ---- Under the header: the phone's strip across the whole width, its words together in the middle ---- */
html[data-toasts="pc-strip"] .ts-host{top:var(--ts-top,0px);z-index:39;display:block;overflow:hidden}
html[data-toasts="pc-strip"] .ts-toast{width:100%;min-height:48px;justify-content:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--mint-deep);font-weight:600;animation-name:ts-down}
html[data-toasts="pc-strip"] .ts-toast.is-leaving{opacity:1;transform:translateY(-100%)}
html[data-toasts="pc-strip"] .ts-text{padding:12px 0}
html[data-toasts="pc-strip"] .ts-name::before{content:" · "}
html[data-toasts="pc-strip"] .ts-act{margin-left:6px}

/* Words by the cart (round three): the same strip, its words at the right, ending under the header's cart button. */
html[data-toasts="pc-strip"][data-toasts-tone="cart"] .ts-toast{justify-content:flex-end;padding-right:calc(100% - var(--ts-cart-edge,100%))}
html[data-toasts="pc-strip"][data-toasts-tone="cart"] .ts-toast:not([data-act]){padding-right:calc(100% - var(--ts-cart-edge,100%) + 12px)}

/* ---- From the cart icon: a small pale card under the header's cart button, with a point towards it ---- */
/* Placed from the left by the button's right edge (measured), so the window's scrollbar cannot shift it. */
html[data-toasts="pc-cart"] .ts-host{top:calc(var(--ts-top,0px) + 12px);left:var(--ts-cart-edge,100%);right:auto;transform:translateX(-100%);display:block;width:max-content;max-width:400px}
html[data-toasts="pc-cart"] .ts-toast{position:relative;min-height:56px;padding:6px 6px 6px 16px;gap:12px;border:1px solid var(--mint-deep);border-radius:12px;box-shadow:0 8px 24px #003a1c1a;animation-name:ts-drop}
html[data-toasts="pc-cart"] .ts-toast:not([data-act]){padding-right:18px}
html[data-toasts="pc-cart"] .ts-toast::before{content:"";position:absolute;top:-7px;right:calc(var(--ts-cart-half,22px) - 6px);width:12px;height:12px;border:solid;border-color:inherit;border-width:1px 0 0 1px;background:inherit;transform:rotate(45deg)}
html[data-toasts="pc-cart"] .ts-toast.is-leaving{transform:translateY(-6px)}
html[data-toasts="pc-cart"] .ts-text{padding:6px 0}
html[data-toasts="pc-cart"] .ts-name{display:block;font-size:15px}

/* ---- Above the cart card: a pale card at the bottom right, sitting on the floating cart card and at least as wide ---- */
html[data-toasts="pc-corner"] .ts-host{left:auto;right:24px;bottom:calc(34px + var(--ts-bar,0px));display:block;width:max-content;min-width:var(--ts-cardw,0px);max-width:420px}
html[data-toasts="pc-corner"].ts-nobar .ts-host{bottom:24px}
html[data-toasts="pc-corner"] .ts-toast{min-height:60px;padding:6px 6px 6px 16px;gap:12px;border:1px solid var(--mint-deep);border-radius:14px;box-shadow:0 2px 6px #1e4c2b1f}
html[data-toasts="pc-corner"] .ts-toast:not([data-act]){padding-right:18px}
html[data-toasts="pc-corner"] .ts-text{flex:1;padding:6px 0}
html[data-toasts="pc-corner"] .ts-name{display:block;font-size:15px}

/* ---- Round two: the surface of From the cart icon and Above the cart card (data-toasts-tone). Nothing else changes. ---- */
/* White: the shop's own line and shadow, as its menus and its cart card. */
html[data-toasts-tone="white"] .ts-toast,html[data-toasts-tone="join"] .ts-toast{border-color:var(--line-strong);background:#fff;color:var(--ink)}
html[data-toasts-tone="white"] .ts-toast{box-shadow:0 10px 28px #003a1c24}
html[data-toasts-tone="white"] .ts-act,html[data-toasts-tone="join"] .ts-act{color:var(--green-hover)}
html[data-toasts-tone="white"] .ts-name,html[data-toasts-tone="join"] .ts-name{color:var(--muted)}
/* Deeper green: the darker of the shop's two pale greens. */
html[data-toasts-tone="deep"] .ts-toast{border-color:#8cba9f;background:var(--mint-deep)}
html[data-toasts-tone="deep"] .ts-icon{color:var(--green-hover)}
html[data-toasts-tone="deep"] .ts-act{text-decoration-color:#5f9a78}
/* Dark green: white words on the colour of today's bar. */
html[data-toasts-tone="dark"] .ts-toast{border-color:var(--forest);background:var(--forest);color:#fff;box-shadow:0 10px 28px #003a1c38}
html[data-toasts-tone="dark"] .ts-icon{color:var(--mint-deep)}
html[data-toasts-tone="dark"] .ts-act{color:#fff;text-decoration-color:#74a98b}
html[data-toasts-tone="dark"] .ts-act:hover{text-decoration-color:#fff}
/* One card with the cart: the message is the top of the floating cart card, the same width, with one thin line between. */
html[data-toasts="pc-corner"][data-toasts-tone="join"]:not(.ts-nobar) .ts-host{bottom:calc(23px + var(--ts-bar,0px));width:var(--ts-cardw);min-width:0;max-width:none}
html[data-toasts="pc-corner"][data-toasts-tone="join"]:not(.ts-nobar) .ts-toast{align-items:flex-start;padding:8px 4px 8px 16px;border-bottom-color:var(--line);border-radius:14px 14px 0 0;box-shadow:0 -1px 6px #1e4c2b14}
html[data-toasts="pc-corner"][data-toasts-tone="join"]:not(.ts-nobar) .ts-icon{margin-top:8px}
html[data-toasts="pc-corner"][data-toasts-tone="join"].ts-on:not(.ts-nobar) .mobile-cart{border-top-left-radius:0;border-top-right-radius:0}

/* ---- Foot, centred: a pale pill in the middle of the foot of the window ---- */
html[data-toasts="pc-centre"] .ts-host{bottom:28px;padding:0 24px}
html[data-toasts="pc-centre"] .ts-toast{max-width:680px;min-height:50px;padding:0 6px 0 18px;gap:12px;border:1px solid var(--mint-deep);border-radius:25px;box-shadow:0 8px 24px #003a1c1f;font-weight:600}
html[data-toasts="pc-centre"] .ts-toast:not([data-act]){padding-right:20px}
html[data-toasts="pc-centre"] .ts-text{padding:12px 0}
html[data-toasts="pc-centre"] .ts-name::before{content:" · "}

@media(prefers-reduced-motion:reduce){
 html[data-toasts] .ts-toast{animation-name:ts-fade!important}
 html[data-toasts] .ts-toast.is-leaving{transform:none!important;opacity:0!important}
}

/* ================= Inside the cart, 21 October 2026 =================
   The owner, on the laptop cart: "why doesnt this have the updated toasts?" A message raised while the cart is open (a code
   applied, a sheet removed with Undo, a cart restored) used to keep the older look there: a dark pill at the foot on a
   phone, a white box in the laptop's panel. It now has the picked look, Under the header: the pale green strip with
   bold forest words, straight under the cart's own header, across it. Only the look and the place change; the words and
   how long they stay are the shop's. */
html[data-toasts][data-cart] #cartDialog .cs-screen>.dialog-status{top:var(--cs-appbar,56px);bottom:auto;left:0;right:0;width:auto;transform:none;
 min-height:44px;margin:0;padding:0 8px 0 20px;border:0;border-bottom:1px solid var(--mint-deep);border-radius:0;
 background:var(--mint);color:var(--forest);font:600 15px/1.35 var(--sans);box-shadow:none;animation:ts-down .22s var(--ease)}
html[data-toasts][data-cart] #cartDialog .cs-pcpanel>.dialog-status{position:absolute;top:61px;bottom:auto;left:0;right:0;z-index:5;width:auto;max-width:none;transform:none;min-height:48px;margin:0;padding:0 12px 0 24px;border:0;border-bottom:1px solid var(--mint-deep);
 border-radius:0;background:var(--mint);color:var(--forest);font:600 16px/1.35 var(--sans);box-shadow:none;animation:ts-down .22s var(--ease)}
html[data-toasts][data-cart] #cartDialog :is(.cs-screen,.cs-pcpanel)>.dialog-status span{padding:10px 0}
html[data-toasts][data-cart] #cartDialog :is(.cs-screen,.cs-pcpanel)>.dialog-status .text-button{min-height:44px;padding:0 12px;color:var(--forest);font-weight:600;
 text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px}