/* Six new carts (study of 4 October 2026). Loaded only by the comparison host. See cart-studies.js for what each one is after.
   White surfaces, hairlines and the shop's own buttons; no tinted fills (the owner dislikes the mint ones). Text a parent decides on
   (name, what it is, price) is 14 to 18px. Every link has a 44px-tall hit area without making its row taller. */

/* ---------- Shared ---------- */
html[data-cart] #cartDialog .dialog-status{border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink)}
html[data-cart] #cartDialog .applied-code{border:1px solid var(--line-strong);background:#fff}
.cs{display:flex;flex-direction:column;flex:1;min-height:0;color:var(--ink)}
.cs h2:focus{outline:none}
.cs-list{list-style:none;margin:0;padding:0}
.cs-title{appearance:none;margin:0;padding:0;border:0;background:none;font:600 16px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink);text-align:left;cursor:pointer}
.cs-title:hover{color:var(--green-hover);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px}
.cs-title:focus-visible,.cs-link:focus-visible,.cs-back:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
.cs-meta,.cs-owned{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
/* The padding gives a thumb 44px to hit; the negative margin (and, inside a sentence, the fact that it is inline) keeps the row's height. */
.cs-link{appearance:none;margin:-12px 0;padding:12px 0;border:0;background:none;font:600 14px/1.45 var(--sans);color:var(--green-hover);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px;white-space:nowrap;cursor:pointer}
.cs-link:hover{text-decoration-color:currentColor}
.cs-remove{font-weight:500;color:var(--muted);text-decoration-color:var(--line-strong)}
.cs-remove:hover{color:var(--ink)}
.cs-price{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.cs-price strong{font-size:16px}
.cs-price del{font-size:14px;color:var(--muted)}
.cs-n{display:none}
.cs-sums{display:grid;gap:7px;margin:0;font-size:15px}
.cs-sums>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.cs-sums dt{color:var(--muted)}
.cs-sums dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-sums .cs-save,.cs-sums .cs-save dt{color:var(--green-hover)}
.cs-sums .cs-total{margin-top:5px;padding-top:11px;border-top:1px solid var(--line);font-size:21px}
.cs-sums .cs-total:first-child{margin-top:0;padding-top:0;border-top:0}
.cs-sums .cs-total dt{color:var(--ink);font-weight:600}
.cs-sums .cs-total dd{font-weight:650}
.cs-sums .cs-total small{display:block;margin-top:1px;font-size:13px;font-weight:400;line-height:1.4;color:var(--muted)}
.cs-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted);text-align:center}
.cs-note a{color:var(--green-hover);text-underline-offset:4px}
.cs-bucks{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.cs-bucks a{color:var(--green-hover);text-underline-offset:4px}
/* The total on the left and the button on the right: the live cart card's own arrangement. */
/* The total and the button share a line. With the phone's text size turned up they may not fit side by side on a small
   phone; the button then goes under the total, still at the right, instead of running off the screen (audit D-001). */
.cs-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.cs-pay p{display:grid;margin:0}
.cs-pay strong{font-size:20px}
.cs-pay span{font-size:13px;line-height:1.4;color:var(--muted)}
.cs-pay .button{flex:none;margin-left:auto;white-space:nowrap}
/* A cheaper way to buy what is in the cart. One green outline marks it as an offer; no fill. */
.cs-offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 16px;border:1px solid var(--green);border-radius:12px;background:#fff}
.cs-offer>div{flex:1 1 240px;min-width:0}
.cs-offer strong{display:block;font-size:15px;line-height:1.35;font-weight:600}
.cs-offer p{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.cs-offer .button{flex:none}
.cs-empty{display:grid;justify-items:center;gap:10px;max-width:420px;margin:0 auto;padding:56px 0;text-align:center}
.cs-empty>svg{width:32px;height:32px;color:var(--green)}
.cs-empty h2{font:600 24px/1.2 var(--serif);letter-spacing:-.03em}
.cs-empty p{font-size:15px;line-height:1.5;color:var(--muted)}
.cs-empty-actions{display:grid;justify-items:center;gap:6px;margin-top:10px}

/* ---------- Slim rows: two lines per item (side panel, corner card, centre window, the page with checkout) ---------- */
.cs-slim .cs-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.cs-slim .cs-meta,.cs-slim .cs-owned{margin:0}
.cs-slim .cs-owned{grid-column:1 / -1}
.cs-slim .cs-price,.cs-slim .cs-remove{justify-self:end}

/* ---------- Boxed carts: a head, a part that scrolls and a foot (side panel, corner card, centre window) ---------- */
.cs-box .cs-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:8px 12px 8px 24px;border-bottom:1px solid var(--line)}
.cs-box .cs-head h2{display:inline;font:600 20px/1.2 var(--sans);letter-spacing:-.02em}
.cs-box .cs-count{margin-left:10px;font-size:14px;color:var(--muted)}
.cs-box .dialog-status{margin:12px 24px 0}
.cs-box .cs-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 16px}
.cs-box .cs-offer{margin-top:16px}
.cs-box .cs-foot{flex:none;padding:14px 24px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff}
.cs-box .cs-sums{margin-bottom:12px}
/* In the two narrow ones the switch is a link under the two lines, so the offer stays short. */
:is(.cs-panel,.cs-corner) .cs-offer{gap:6px 20px}
:is(.cs-panel,.cs-corner) .cs-offer .button{min-height:0;padding:0;border:0;background:none;font-size:14px;color:var(--green-hover);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px}
:is(.cs-panel,.cs-corner) .cs-offer .button:hover{text-decoration-color:currentColor}

/* Slim side panel */
@media(min-width:601px){html[data-cart="panel"] #cartDialog{width:440px;border-radius:16px 0 0 16px}}

/* Corner card: where the live cart card sits, as tall as its contents, under a lighter dim so the shop stays readable. */
@media(min-width:601px){
 html[data-cart="corner"] #cartDialog{width:420px;height:fit-content;max-height:calc(100dvh - 48px);margin:auto 24px 24px auto;border:1px solid var(--line-strong);border-radius:16px;animation:dialog-in .2s var(--ease)}
 html[data-cart="corner"] #cartDialog::backdrop{background:rgba(10,28,17,.16)}
}
.cs-corner .cs-sums{margin-bottom:10px}

/* Centre window: the items as a table with its columns named, the friend code beside the sums. */
.cs-cols{display:none}
@media(min-width:601px){
 html[data-cart="window"] #cartDialog{width:min(860px,calc(100vw - 48px));height:fit-content;max-height:calc(100dvh - 48px);margin:auto;border:1px solid var(--line);border-radius:16px;animation:dialog-in .2s var(--ease)}
 .cs-window .cs-cols,.cs-window .cs-table .cs-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 132px 64px;column-gap:16px}
 .cs-window .cs-cols{position:sticky;top:0;z-index:1;padding:12px 0 8px;border-bottom:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--muted)}
 .cs-window .cs-cols span:nth-child(2){text-align:center}
 .cs-window .cs-cols span:nth-child(3){text-align:right}
 .cs-window .cs-table .cs-row{grid-template-areas:"title n price remove" "meta n price remove" "owned owned owned owned";row-gap:2px;align-items:center;padding:11px 0}
 .cs-window .cs-table .cs-title{grid-area:title;justify-self:start}
 .cs-window .cs-table .cs-meta{grid-area:meta}
 .cs-window .cs-table .cs-n{grid-area:n;display:block;justify-self:center;font-size:15px;font-variant-numeric:tabular-nums}
 .cs-window .cs-table .cs-price{grid-area:price}
 .cs-window .cs-table .cs-remove{grid-area:remove}
 .cs-window .cs-table .cs-owned{grid-area:owned}
 .cs-window .cs-table .cs-row:last-child{border-bottom:0}
 .cs-window .cs-scroll{padding-bottom:4px}
 .cs-window .cs-foot{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px 40px;align-items:start}
 .cs-window .cs-foot-side .discount-details{padding:0;border:0}
 .cs-window .cs-foot-side .cs-bucks{margin-top:8px}
}

/* ---------- The full pages: the same dialog, opened to the whole window ---------- */
html:is([data-cart="columns"],[data-cart="receipt"],[data-cart="onepage"]) #cartDialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;animation:none}
.cs-pagebox{position:relative}
.cs-page{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background:#fff}
.cs-bar{position:sticky;top:0;z-index:2;flex:none;border-bottom:1px solid var(--line);background:#fff}
/* The logo is drawn from its vector mark at every width: the PNG the PC header uses carries a faint box on a white page. */
.cs-bar .brand img{display:none}
.cs-bar .brand .v2-mobile-mark{display:block;flex:none;width:32px;height:32px}
.cs-bar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1200px;height:var(--header,76px);margin:0 auto;padding:0 32px}
.cs-back{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;font:600 15px/1.2 var(--sans);color:var(--green-hover);white-space:nowrap;cursor:pointer}
.cs-back .icon{width:18px;height:18px}
.cs-back:hover{text-decoration:underline;text-underline-offset:5px}
.cs-wrap{flex:1 0 auto;width:100%;max-width:1200px;margin:0 auto;padding:36px 32px 64px}
.cs-heading h2{font:600 34px/1.15 var(--serif);letter-spacing:-.035em}
.cs-heading p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.cs-actions{display:flex;gap:20px;margin-top:6px}
:is(.cs-columns,.cs-receipt) .cs-price{display:grid;justify-items:end;gap:2px}
:is(.cs-columns,.cs-receipt) .cs-price strong{order:-1}
/* Messages ("removed, Undo") float over the page as a quiet white card, so they are seen wherever the page is scrolled to. */
.cs-pagebox>.dialog-status{position:absolute;left:50%;bottom:24px;z-index:3;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;padding:12px 16px;box-shadow:0 2px 6px #1e4c2b1f;font-size:15px}
/* The card beside the list (order summary, or the checkout form). */
.cs-summary{position:sticky;top:calc(var(--header,76px) + 24px);padding:22px 24px 20px;border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.cs-summary h3{margin:0 0 14px;font:600 18px/1.3 var(--sans);letter-spacing:-.01em}
.cs-summary .discount-details{margin-top:10px;padding:0;border:0}
.cs-summary .reward-check{padding:10px 0 0}
.cs-summary .button{margin-top:16px}
.cs-sticky{display:none}

/* Two columns */
.cs-columns .cs-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
.cs-columns .cs-list{margin-top:22px;border-top:1px solid var(--line)}
.cs-columns .cs-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:0 18px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.cs-columns .cs-title{font-size:18px}
.cs-columns .cs-meta,.cs-columns .cs-owned{font-size:15px}
.cs-columns .cs-price strong{font-size:18px}
.cs-columns .cs-offer{margin-top:20px}
.cs-columns .cs-offer+.cs-list{margin-top:20px}
/* How many PDFs the line adds. More than one is drawn as a small stack: two outlines set back, no blur. */
.cs-tile{display:grid;place-content:center;justify-items:center;width:46px;height:58px;margin-top:4px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;color:var(--forest)}
.cs-tile b{font:650 18px/1 var(--sans);font-variant-numeric:tabular-nums}
.cs-tile i{margin-top:4px;font:600 10px/1 var(--sans);font-style:normal;color:var(--muted)}
.cs-tile.is-stack{box-shadow:3px -3px 0 -1px #fff,3px -3px 0 0 var(--line-strong),6px -6px 0 -1px #fff,6px -6px 0 0 var(--line-strong)}

/* Receipt */
.cs-receipt .cs-wrap{max-width:744px;padding-top:44px}
.cs-receipt .cs-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 24px;align-items:center}
.cs-receipt .cs-heading h2,.cs-receipt .cs-heading p{grid-column:1}
.cs-receipt .cs-heading .button{grid-column:2;grid-row:1 / span 2}
.cs-slip{margin-top:28px;padding:4px 24px 20px;border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.cs-receipt .cs-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 20px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.cs-receipt .cs-title{font-size:17px}
.cs-receipt .cs-price strong{font-size:17px}
.cs-receipt .cs-offer{margin-top:24px}
.cs-receipt .cs-offer+.cs-slip{margin-top:16px}
.cs-receipt .cs-sums{margin-top:16px}
.cs-receipt .discount-details{margin-top:8px}
.cs-end{margin-top:20px}

/* With checkout: slim rows on the left, the sums and the shop's own checkout form in one card on the right. */
.cs-onepage .cs-wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start}
.cs-onepage .cs-list{margin-top:22px;border-top:1px solid var(--line)}
.cs-onepage .cs-offer{margin-top:20px}
.cs-onepage .cs-offer+.cs-list{margin-top:20px}
.cs-onepage .cs-slim .cs-row{padding:16px 0}
.cs-onepage .cs-title{font-size:17px}
.cs-onepage .cs-price strong{font-size:17px}
/* The two details sit under the list, side by side on a PC; the card on the right keeps the sums and the button in view. */
.cs-form{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px 16px;margin-top:28px}
.cs-form h3{grid-column:1 / -1;font:600 18px/1.3 var(--sans);letter-spacing:-.01em}
.cs-form .field{margin:0}
.cs-optional{font-weight:400;color:var(--muted)}
.cs-hint{grid-column:1 / -1;margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.cs-preview{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;font-size:14px;line-height:1.45;color:var(--ink)}

/* ---------- Narrower windows ---------- */
@media(max-width:960px){
 :is(.cs-columns,.cs-onepage) .cs-wrap{grid-template-columns:minmax(0,1fr);gap:28px}
 .cs-summary,.cs-finish{position:static}
}
@media(max-width:600px){
 /* The details link takes its own line under the facts, so no line ends on a loose dot. */
 .cs-slim .cs-sep{display:none}
 .cs-slim .cs-meta .cs-link{display:block;width:fit-content;margin:-4px 0 -10px;padding:12px 0}
 .cs-box .cs-head{padding-left:20px}
 .cs-box .dialog-status{margin-inline:20px}
 .cs-box .cs-scroll{padding-inline:20px}
 .cs-box .cs-foot{padding-inline:20px}
 :is(.cs-panel,.cs-corner) .cs-offer .button{min-height:44px}
 /* The corner card is a sheet that rises from the foot of the screen and is only as tall as it needs to be. */
 html[data-cart="corner"] #cartDialog{width:100%;height:fit-content;max-height:calc(100dvh - 56px);margin:auto 0 0;border:0;border-radius:18px 18px 0 0;animation:dialog-in .2s var(--ease)}
 .cs-corner .cs-pay .button{padding-inline:16px}
 .cs-bar-in{height:60px;padding:0 20px}
 .cs-wrap{padding:24px 20px 36px}
 .cs-heading h2{font-size:28px}
 .cs-heading p{font-size:15px}
 .cs-columns .cs-row{grid-template-columns:38px minmax(0,1fr) auto;gap:0 12px;padding:18px 0}
 .cs-columns .cs-title{font-size:17px}
 .cs-columns .cs-price strong{font-size:17px}
 .cs-tile{width:38px;height:48px}
 .cs-tile b{font-size:16px}
 .cs-tile i{font-size:9px}
 /* On a phone the total and the button stay at the foot of the screen, so the card's own button is not repeated. */
 .cs-columns .cs-summary .button{display:none}
 .cs-columns .cs-wrap{padding-bottom:24px}
 .cs-sticky{position:sticky;bottom:0;z-index:2;flex:none;display:flex;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff}
 .cs-sticky strong{font-size:19px}
 .cs-columns>.dialog-status{bottom:88px}
 .cs-receipt .cs-wrap{padding-top:24px}
 .cs-receipt .cs-heading{grid-template-columns:minmax(0,1fr)}
 .cs-receipt .cs-heading .button{grid-column:1;grid-row:auto;width:100%;margin-top:16px}
 .cs-slip{margin-top:20px;padding:2px 16px 16px}
 .cs-onepage .cs-slim .cs-row{padding:14px 0}
 .cs-form{grid-template-columns:minmax(0,1fr);margin-top:24px}
 .cs-summary{padding:18px 18px 18px}
}

/* ====================================================================================================================
   Phone first: three proper screens (Pay bar, Checklist, Express). Drawn at 390px and checked at 320px.
   The cart is part of the page, not a window over it: the shop's header, page and footer step aside while it shows, the
   page itself scrolls, a bar with Back stays at the top and the bar with the button stays at the foot, under the thumb.
   Text is 15 to 17px (16px in fields, so an iPhone does not zoom in), every control is at least 44px to hit, and nothing
   opens over the screen: what an item covers opens in place under its name.
   ==================================================================================================================== */
html.cs-screen-on body.modal-open{overflow:visible}
html.cs-screen-on :is(.site-header,#main,#siteFooter,#mobileCart,#toastHost,.preview-dev-trigger,#enhancedDevPanel,.skip){display:none!important}
html[data-cart] #cartDialog:has(>.cs-screen){position:static;width:100%;max-width:none;height:auto;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#fff;box-shadow:none;overflow:visible;animation:none}
html[data-cart] #cartDialog:has(>.cs-screen)[open]{display:block}
.cs-screen{min-height:100dvh;animation:cs-push .2s var(--ease)}
.cs-screen button,.cs-screen a,.cs-screen summary,.cs-screen input{touch-action:manipulation}
@keyframes cs-push{from{opacity:.5;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cs-screen{animation:none}}

/* The bar at the top: Back, the heading, how much is in the cart. */
.cs-appbar{position:sticky;top:0;z-index:5;flex:none;display:flex;align-items:center;gap:2px;min-height:56px;padding:0 20px 0 6px;border-bottom:1px solid var(--line);background:#fff}
.cs-appbar h2{font:600 18px/1.2 var(--sans);letter-spacing:-.01em}
.cs-appbar .cs-count{margin-left:auto;font-size:14px;color:var(--muted);white-space:nowrap}
.cs-screen>.cs-body{flex:1 0 auto;padding:0 20px 24px}
/* The bar at the foot: always in reach, and clear of a phone's home indicator. */
.cs-bottom{position:sticky;bottom:0;z-index:5;flex:none;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff}
.cs-bottom .button{min-height:52px;font-size:17px}
.cs-bottom .cs-sums{margin-bottom:10px}
.cs-bottom .cs-pay strong{font-size:22px}
.cs-bottom .cs-pay span{font-size:14px}
.cs-bottom .cs-pay .button{padding-inline:24px}
.cs-yousave{font-weight:600;color:var(--green-hover)}
.cs-bottom .button:disabled{border-color:var(--line);background:var(--soft);color:var(--muted)}
/* Messages ("removed, Undo") float just above the bar at the foot and never move the list. */
.cs-screen>.dialog-status{position:fixed;left:16px;right:16px;bottom:calc(var(--cs-bar,0px) + 12px);z-index:6;margin:0;padding:6px 8px 6px 16px;box-shadow:0 2px 6px #1e4c2b1f;font-size:15px}
.cs-screen>.dialog-status .text-button{min-height:44px;padding-inline:8px;font-size:15px}
.cs-quiet{display:none!important}

/* Items: two lines each. Pay bar and Express: name | Remove, then what it is | price. */
.cs-mrows .cs-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.cs-screen .cs-meta,.cs-screen .cs-owned{margin:0;font-size:15px}
.cs-screen .cs-link{font-size:15px}
.cs-screen .cs-price strong{font-size:17px}
.cs-mrows .cs-owned,.cs-mrows .cs-inside{grid-column:1 / -1}
.cs-mrows .cs-price,.cs-mrows .cs-remove{justify-self:end}
/* The name opens what the item covers, in place. Its hit area is 44px tall without making the row taller. */
.cs-toggle{margin:-11px 0;padding:11px 0;justify-self:start}
.cs-toggle:hover{text-decoration:none;color:var(--ink)}
.cs-chev{width:16px;height:16px;margin-left:6px;vertical-align:-2px;color:var(--muted);transition:transform .16s}
.cs-toggle[aria-expanded="true"] .cs-chev{transform:rotate(180deg)}
.cs-inside{margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;line-height:1.5;color:var(--ink)}
.cs-in-title{margin:0;font-weight:600}
.cs-inside ul{margin:6px 0 0;padding-left:20px;list-style:disc}
.cs-inside li+li{margin-top:2px}
.cs-screen .cs-offer{margin-top:16px;gap:8px 20px}
.cs-screen .cs-offer strong{font-size:16px}
.cs-screen .cs-offer p{font-size:15px}
.cs-screen .cs-offer .button{flex:1 1 100%;min-height:46px}
.cs-after{margin-top:2px}
.cs-screen .discount-details{padding:6px 0 10px;font-size:16px}
.cs-screen .discount-details summary{min-height:48px}
.cs-screen .code-form input{font-size:16px}
.cs-screen .code-help,.cs-screen .reward-check{font-size:15px}
.cs-screen .cs-bucks{margin-top:14px;font-size:15px}
.cs-fine{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.cs-fine a{color:var(--green-hover);text-underline-offset:4px}
.cs-screen .cs-empty{padding:72px 0}
.cs-empty h3{font:600 24px/1.2 var(--serif);letter-spacing:-.03em}

/* Checklist: the box is 24px with a 44px hit area; a ticked box is solid green, a left-out row is grey. */
.cs-tip{margin:14px 0 2px;font-size:15px;line-height:1.45;color:var(--muted)}
.cs-ticks .cs-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.cs-tick{position:relative;grid-row:1 / span 2;align-self:start;appearance:none;width:24px;height:24px;margin:0;padding:0;border:1.5px solid var(--line-strong);border-radius:6px;background:#fff;cursor:pointer}
.cs-tick::after{content:'';position:absolute;inset:-10px}
.cs-tick[aria-checked="true"]{border-color:var(--green);background:var(--green)}
.cs-tick[aria-checked="true"]::before{content:'';position:absolute;left:7px;top:2.5px;width:6px;height:11px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.cs-tick:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.cs-ticks .cs-title{grid-column:2 / -1}
.cs-ticks .cs-meta{grid-column:2}
.cs-ticks .cs-price{grid-column:3;justify-self:end}
.cs-ticks .cs-owned,.cs-ticks .cs-inside{grid-column:2 / -1}
.cs-ticks .is-out .cs-title{color:var(--muted);font-weight:500;cursor:default}
.cs-ticks .is-out .cs-title:hover{text-decoration:none;color:var(--muted)}
.cs-ticks .is-out .cs-price strong{font-weight:500;color:var(--muted)}

/* Express: the details follow the list in the same scroll; the button that finishes the order is the bar at the foot. */
.cs-express .cs-form{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:22px}
.cs-express .cs-form h3{font-size:18px}
.cs-express .field{font-size:16px}
.cs-express .field input{min-height:50px;font-size:16px}
.cs-express .cs-hint{font-size:15px}
.cs-express .cs-preview{margin-top:14px;font-size:15px}

/* A 320px phone: a little less at the sides; the small line in the bar may wrap under the total. */
@media(max-width:340px){
 .cs-appbar{padding-right:16px}
 .cs-screen>.cs-body,.cs-bottom{padding-inline:16px}
 .cs-bottom .cs-pay .button{padding-inline:18px}
}
/* On a PC the screen is one centred column. It is not designed for a PC. */
@media(min-width:601px){
 .cs-screen>:is(.cs-appbar,.cs-body,.cs-bottom){width:100%;max-width:640px;margin-inline:auto}
 .cs-screen>.dialog-status{left:50%;right:auto;width:min(608px,calc(100% - 32px));transform:translateX(-50%)}
}

/* Two columns on a phone (owner, 5 October 2026: no "What's covered" link, and the summary card was bulky).
   The item's name still opens its details. The summary loses its card, heading and Total (the bar at the foot has the total)
   and becomes a few plain lines under the list. */
@media(max-width:600px){
 .cs-columns .cs-actions .cs-link:not(.cs-remove){display:none}
 .cs-columns .cs-wrap{gap:6px}
 .cs-columns .cs-summary{padding:0;border:0;border-radius:0}
 .cs-columns .cs-summary h3,.cs-columns .cs-summary .cs-total{display:none}
 .cs-columns .cs-summary .cs-sums{margin-top:12px}
 .cs-columns .cs-summary .discount-details{margin-top:4px}
 .cs-columns .cs-note{margin-top:6px;text-align:left}
 .cs-columns .cs-bucks{margin-top:6px}
}

/* ---------- The owner's page (their screenshot of 5 October 2026) and its second version ----------
   A serif heading with a back chevron; white rows on a pale page; a forest foot with rounded top corners holding the total,
   one white button and one line. Sizes are the screenshot's, scaled to a 390px phone, with nothing under 15px. */
.cs-forest{background:var(--soft)}
.cs-forest .cs-appbar h2{font:600 20px/1.2 var(--serif);letter-spacing:-.02em}
.cs-forest>.cs-body{padding:0}
.cs-flist .cs-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:start;padding:16px 8px 16px 20px;border-bottom:1px solid var(--line);background:#fff}
.cs-fname,.cs-forest .cs-title{font:600 18px/1.25 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.cs-forest .cs-meta{margin-top:3px;font-size:15px}
.cs-fprice{display:block;margin-top:9px;font:700 16px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--green)}
.cs-fprice del{margin-left:8px;font-weight:400;font-size:14px;color:var(--muted)}
.cs-x{margin-top:-8px;color:var(--ink)}
.cs-x .icon{width:18px;height:18px}
.cs-forest .cs-bottom{padding:20px 20px calc(16px + env(safe-area-inset-bottom,0px));border:0;border-radius:18px 18px 0 0;background:var(--forest);color:#fff}
.cs-ftotal{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.cs-ftotal span{font-size:16px;font-weight:600}
.cs-ftotal small{display:block;margin-top:2px;font-size:14px;font-weight:400;color:#d4e8da}
.cs-ftotal strong{font-size:24px}
.cs-forest .cs-fbutton{border-color:#fff;background:#fff;color:var(--forest);font-weight:700}
.cs-forest .cs-fbutton:hover{background:#edf5ef}
.cs-forest .cs-bottom :is(button,a):focus-visible{outline-color:#fff}
.cs-fnote{margin:12px 0 0;font-size:14px;line-height:1.45;text-align:center;color:#d4e8da}
/* Version two */
.cs-forest2 .cs-offer{margin:16px 20px}
.cs-forest2 .cs-after{padding:0 20px 18px;border-bottom:1px solid var(--line);background:#fff}
.cs-forest2 .cs-owned{margin-top:6px}
.cs-forest2 .cs-inside{margin-top:12px;background:#fff}
.cs-forest .cs-bottom .cs-sums{margin-bottom:12px}
.cs-forest .cs-bottom .cs-sums :is(dt,dd),.cs-forest .cs-bottom .cs-save,.cs-forest .cs-bottom .cs-save dt{color:#d4e8da}

.cs-keep{white-space:nowrap}

/* ---------- The owner's second and third pages (screenshots of 5 October 2026) and their second versions ----------
   A large serif heading with the count under it, a ruled list, and a white foot with Total, a green button and one line. */
.cs-backbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;min-height:48px;padding:0 20px 0 12px;background:#fff}
.cs-backbar .cs-back{gap:2px;font-size:16px}
.cs-big>.cs-body{padding:0 0 24px}
.cs-bighead{padding:2px 20px 18px;border-bottom:1px solid var(--line)}
.cs-bighead h2{font:600 34px/1.1 var(--serif);letter-spacing:-.035em}
.cs-bighead p{margin:6px 0 0;font-size:15px;color:var(--muted)}
.cs-blist .cs-row{display:grid;gap:3px 12px;align-items:baseline;padding:16px 20px;border-bottom:1px solid var(--line)}
.cs-big .cs-meta{margin:0;font-size:15px}
.cs-big .cs-fprice{display:block;margin:0;justify-self:end;white-space:nowrap}
.cs-big .cs-fprice del{margin:0 8px 0 0}
.cs-big :is(.cs-owned,.cs-inside){grid-column:1 / -1}
/* Serif names; the price over Remove. */
.cs-serif .cs-row{grid-template-columns:minmax(0,1fr) auto}
.cs-serif :is(.cs-bname,.cs-title){font:600 18px/1.25 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.cs-serif .cs-remove{justify-self:end;font-size:15px;color:var(--ink)}
/* Plain names; the price beside a cross; the band with the tick box. */
.cs-p3>.cs-body .cs-row{grid-template-columns:minmax(0,1fr) auto 44px;column-gap:6px;padding-right:8px}
.cs-big.cs-p3 :is(.cs-bname,.cs-title){font:600 16px/1.3 var(--sans);color:var(--ink)}
.cs-big.cs-p3 .cs-fprice{grid-row:1 / span 2;grid-column:2;align-self:center}
.cs-big.cs-p3 .cs-x{grid-row:1 / span 2;grid-column:3;align-self:center;margin:0}
.cs-big.cs-p3 .cs-meta{grid-column:1}
.cs-band{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 14px;align-items:start;margin-top:20px;padding:16px 20px;background:var(--mint)}
.cs-band .cs-tick{grid-row:auto;margin-top:1px}
.cs-band strong{display:block;font-size:16px;line-height:1.3}
.cs-band p{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.cs-big .cs-bottom{padding-top:16px}
.cs-big .cs-ftotal span{font:600 18px/1.2 var(--serif)}
.cs-big .cs-ftotal small{font-family:var(--sans);color:var(--muted)}
.cs-big.cs-p3 .cs-ftotal span{font-family:var(--sans);font-size:16px}
.cs-big .cs-fnote{color:var(--muted)}
.cs-big .cs-offer{margin:16px 20px 0}
.cs-big .cs-after{padding:0 20px}

/* ---------- "In bundle" on a phone's sheet rows: three fixes (study of 5 October 2026; ?inBundle=tag | struck | clean) ----------
   Today a sheet covered by a bundle in the cart shows its price, a tick and a small "In bundle" stacked in three lines.
   The rows are the shop's own; only the right-hand side changes. */
@media(max-width:600px){
 /* One tag: no price (the bundle already pays for it), just "In bundle" with its tick on one line, at reading size. */
 html[data-in-bundle="tag"] #shopResults :is(.product-row,.product-card) .product-bottom:has(.included-label) .price{display:none}
 html[data-in-bundle="tag"] #shopResults .included-label,html[data-in-bundle="struck"] #shopResults .included-label{flex-direction:row;align-items:center;gap:6px;max-width:none;min-height:44px;font-size:15px;font-weight:600;white-space:nowrap;color:var(--green-hover)}
 html[data-in-bundle="tag"] #shopResults .product-row{grid-template-columns:minmax(0,1fr) auto}
 /* Struck price: the single price crossed out over "In bundle", so it reads as "you are not paying this". */
 html[data-in-bundle="struck"] #shopResults :is(.product-row,.product-card) .product-bottom:has(.included-label) .price{font-size:15px;font-weight:400;color:var(--muted);text-decoration:line-through}
 html[data-in-bundle="struck"] #shopResults .product-row .product-bottom:has(.included-label){gap:0}
 html[data-in-bundle="struck"] #shopResults .product-row{grid-template-columns:minmax(0,1fr) auto}
 /* Clean rows: say it once above the list, and leave the rows as a plain list of what the bundle holds. */
 html[data-in-bundle="clean"] #shopResults :is(.product-row,.product-card) .product-bottom:has(.included-label){display:none}
 html[data-in-bundle="clean"] #shopResults .product-row:has(.included-label){grid-template-columns:minmax(0,1fr)}
 html[data-in-bundle="clean"] #shopResults :is(.product-list,.product-grid):has(.included-label)::before{content:"\2713\00a0\00a0 All of these are in the bundle in your cart.";display:block;grid-column:1 / -1;padding:14px 14px;border-bottom:1px solid var(--line);background:#fff;font-size:15px;font-weight:600;color:var(--green-hover)}
}

/* The space between the last row and the total bar is white, like the rows, on Your page 1 and its v2 (the only carts that had a tinted page). */
.cs-screen.cs-forest{background:#fff}

/* ---------- Hybrid: one part from each phone-first cart (5 October 2026) ----------
   The bar of the owner's first page, the rows of their second, the band of their third and the Pay bar's foot. */
.cs-hybrid .cs-appbar h2{font:600 20px/1.2 var(--serif);letter-spacing:-.02em}
.cs-hybrid .cs-blist .cs-row:last-child{border-bottom:0}
.cs-hybrid .cs-band{margin-top:0}
.cs-hybrid .cs-after{margin-top:8px;border-top:1px solid var(--line)}
.cs-hybrid .cs-band+.cs-after{margin-top:0;border-top:0}
.cs-hybrid .cs-bottom{padding-top:12px}
.cs-hybrid .cs-pay span{font-size:15px}
.cs-hybrid .cs-pay .button{padding-inline:20px}
@media(max-width:350px){.cs-hybrid .cs-pay{gap:10px}.cs-hybrid .cs-pay .button{padding-inline:14px;font-size:16px}}
/* Hybrid v2: product names in the Pay bar's type (the shop's sans, 16px) instead of the 18px serif. */
.cs-hybrid2 .cs-bname{font:600 16px/1.3 var(--sans);letter-spacing:-.01em}
/* ---------- Two carts that read as a cart and stay minimal (5 October 2026), both on Hybrid v2 ---------- */
/* With pictures: a small SmartNote page beside every item; a bundle is a stack of pages. */
.cs-hpics .cs-blist .cs-row{grid-template-columns:44px minmax(0,1fr) auto;column-gap:14px}
.cs-cover{position:relative;grid-row:1 / span 2;align-self:start;display:block;width:44px;height:58px;margin-top:2px;border:1px solid var(--line-strong);border-radius:4px;
 background:linear-gradient(var(--line-strong) 0 0) 7px 29px/22px 2px no-repeat,linear-gradient(var(--line) 0 0) 7px 36px/28px 2px no-repeat,linear-gradient(var(--line) 0 0) 7px 43px/28px 2px no-repeat,linear-gradient(var(--line) 0 0) 7px 50px/16px 2px no-repeat,#fff}
.cs-cover :is(img,svg){position:absolute;top:7px;left:7px;width:14px;height:14px}
.cs-cover.is-stack{margin-top:5px;box-shadow:3px -3px 0 -1px #fff,3px -3px 0 0 var(--line-strong)}
.cs-cover.is-deep{margin-top:8px;box-shadow:3px -3px 0 -1px #fff,3px -3px 0 0 var(--line-strong),6px -6px 0 -1px #fff,6px -6px 0 0 var(--line-strong)}
.cs-hpics .cs-blist .cs-owned{grid-column:2 / -1}
/* Adds up: the shop's bag with the number of items, the working at the end of the page, and Total over a full-width button. */
.cs-bag{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-left:auto;margin-right:-8px;color:var(--ink)}
.cs-bag .icon{width:24px;height:24px}
.cs-bag b{position:absolute;top:3px;right:1px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--green);color:#fff;font:700 12px/19px var(--sans);text-align:center}
.cs-working{margin:18px 20px 0;padding-top:16px;border-top:1px solid var(--line)}
.cs-hsum .cs-bottom{padding-top:14px}
.cs-hsum .cs-ftotal{margin-bottom:12px}
.cs-hsum .cs-ftotal span{font:600 16px/1.2 var(--sans)}
.cs-hsum .cs-ftotal small{font-size:15px}
/* Pictures + adds up: the page ends on an "Order summary" block in a second tone that runs down to the foot (the owner's mock-up of 5 October 2026). */
.cs-htone>.cs-body{display:flex;flex-direction:column;padding-bottom:0}
.cs-htone .cs-band{border-top:1px solid var(--line);background:#fff}
.cs-osum{flex:1 0 auto;padding:22px 20px 24px;border-top:1px solid var(--line);background:#eef4ef}
.cs-osum h3{margin:0 0 14px;font:600 20px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.cs-osum .cs-sums{gap:10px;font-size:15px}
.cs-osum .cs-sums dd{font-weight:400;color:var(--muted)}
.cs-osum .cs-sums .cs-save dt{color:var(--ink)}
.cs-osum .cs-sums .cs-save dd{font-weight:700;color:var(--green-hover)}
.cs-osum .cs-sums .cs-total{margin-top:4px;padding-top:14px;border-top:1px solid #cfdcd3;font-size:17px}
.cs-osum .cs-sums .cs-total dt{font-weight:700}
.cs-osum .cs-sums .cs-total dd{font-weight:700;font-size:19px;color:var(--ink)}
/* The friend's code is a link here, not a row with a plus. */
.cs-osum .discount-details{margin-top:14px;padding:0;border:0;font-size:15px}
.cs-osum .discount-details summary{display:inline-flex;justify-content:flex-start;min-height:44px;font-weight:700;color:var(--green-hover);text-decoration:underline;text-underline-offset:4px}
.cs-osum .discount-details summary:after{content:none}
.cs-osum .code-form{margin-top:2px}
.cs-osum .code-form input{background:#fff}
.cs-osum .applied-code{margin-top:2px;border:1px solid var(--line-strong);background:#fff}
.cs-osum .cs-bucks{margin-top:6px}
/* Remove all, on a cart of ten items or more: a quiet link at the top of the list, in line with the Remove links. */
.cs-clear{display:flex;justify-content:flex-end;margin:0;padding:0 20px;border-bottom:1px solid var(--line)}
.cs-clear .cs-link{margin:0;padding:0;min-height:48px;font-size:15px;color:var(--ink)}
/* Remove all asks first, in place: the row opens into a question with the two answers side by side. */
.cs-clear.is-asking{display:block;padding:16px 20px 18px;background:#fff}
.cs-clear.is-asking p{margin:0 0 12px;font:600 16px/1.35 var(--sans);color:var(--ink)}
.cs-clear-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-clear-actions .button{min-height:48px;padding-inline:10px;font-size:16px}
.cs-clear-actions .cs-danger{border-color:var(--danger);color:var(--danger)}
/* Messages in a phone cart (removed, Undo, code applied) are a dark bar, so they are seen against the white page. */
html[data-cart] #cartDialog .cs-screen>.dialog-status{border:0;background:var(--forest);color:#fff;padding:8px 8px 8px 18px;font-size:16px;box-shadow:0 8px 24px #0a1c1147}
html[data-cart] #cartDialog .cs-screen>.dialog-status .text-button{color:#fff;font-size:16px;font-weight:700;text-decoration-color:#ffffffa6;padding-inline:12px}
html[data-cart] #cartDialog .cs-screen>.dialog-status :is(button,a):focus-visible{outline-color:#fff}
/* One item removed: its row becomes one line where it was, with Put back on the right. The height eases (cart-studies.js). */
.cs-hybrid .cs-blist .cs-row.is-gone{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;padding-block:4px}
.cs-gone{font-size:15px;line-height:1.4;color:var(--muted)}
.cs-gone b{margin-right:6px;font-weight:600;color:var(--ink)}
.cs-back-in{margin:0;padding:0;min-height:48px;font-size:15px}
/* A phone cart slides in once, when it opens. A redraw (an item removed, a code applied) replaces the screen without moving it. */
.cs-screen.cs-still{animation:none}

/* ---------- The phone cart's checkout screen ("What you're getting", the owner's pick of 5 October 2026) ----------
   Worded and styled as the real shop: a fan of the pages on the cart's second tone, a serif question over the fields, and the
   payment line under the button. */
.cs-payscreen>.cs-body{padding:0 0 28px}
.cs-payhead{margin:0;padding:26px 20px 0;font:600 23px/1.2 var(--serif);letter-spacing:-.025em;color:var(--ink)}
.cs-payform{display:grid;gap:16px;padding:18px 20px 0}
.cs-payform .field{margin:0;gap:8px;font-size:16px}
.cs-payform .field input{min-height:56px;padding:12px 16px;border-radius:12px;font-size:17px;color:var(--ink)}
.cs-payform .field input::placeholder{color:#8a968f;font-weight:400}
.cs-payform .field input:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.cs-payform .field input[aria-invalid="true"]{border-color:var(--danger)}
.cs-payform .field input[aria-invalid="true"]:focus{outline-color:var(--danger)}
.cs-error{margin:-8px 0 0;font-size:15px;line-height:1.4;font-weight:600;color:var(--danger)}
.cs-optional{font-weight:400;color:var(--muted)}
.cs-payscreen .cs-bottom{padding-top:16px}
.cs-payscreen .cs-ftotal{margin-bottom:14px}
.cs-payscreen .cs-ftotal small{color:var(--muted)}
.cs-payscreen .cs-bottom .button{min-height:56px}
.cs-secure{display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 0 0;font-size:15px;color:var(--muted)}
.cs-secure .icon{width:16px;height:16px;flex:none}
/* A fan of the pages over the number of sheets, on the cart's second tone. */
.cs-fanbox{padding:28px 20px 24px;border-bottom:1px solid var(--line);background:#eef4ef;text-align:center}
.cs-fan{position:relative;height:92px;width:calc(52px + (var(--n) - 1)*30px);margin:0 auto}
.cs-fan .cs-cover{position:absolute;top:calc(10px + (var(--i) - (var(--n) - 1)/2)*(var(--i) - (var(--n) - 1)/2)*3.5px);left:calc(4px + var(--i)*30px);margin:0;transform:rotate(calc((var(--i) - (var(--n) - 1)/2)*8deg)) scale(1.18);box-shadow:0 2px 8px #1e4c2b24}
.cs-fanline{display:grid;gap:3px;margin:14px 0 0}
.cs-fanline strong{font:600 26px/1.15 var(--serif);letter-spacing:-.03em;color:var(--ink)}
.cs-fanline span{font-size:15px;line-height:1.4;color:var(--muted)}

/* ---------- The laptop versions of the phone cart and its checkout (5 October 2026; ?cart=pcpanel, and the shop's own cart on a laptop) ----------
   The rows, the removing, the toned Order summary and the checkout step are the phone cart's own. Only the frame changes. */
.cs-pc .button.full{min-height:56px;font-size:17px}
.cs-pc .cs-foot .cs-pay strong,.cs-pc .cs-pcgo .cs-ftotal strong{font-size:24px}
.cs-pcgo{padding:14px 24px 24px}
.cs-pcback{margin-bottom:18px}
.cs-pc .cs-ftotal span{font:600 16px/1.2 var(--sans)}
.cs-pc .cs-ftotal small{font-size:15px;color:var(--muted)}

/* Side panel: beside the shop, which stays in view. The list scrolls between the head and the foot. */
@media(min-width:601px){html[data-cart="pcpanel"] #cartDialog{width:480px;border-radius:16px 0 0 16px}}
.cs-pcpanel .cs-scroll{display:flex;flex-direction:column;padding:0}
.cs-pcpanel .cs-blist .cs-row{padding-inline:24px}
.cs-pcpanel :is(.cs-clear,.cs-band,.cs-osum,.cs-payhead,.cs-payform,.cs-fanbox){padding-inline:24px}
.cs-pcpanel .cs-osum{flex:1 0 auto;padding-top:18px;padding-bottom:14px}
/* Packed for a small laptop: tighter rows, and no Total in the summary, since the foot under it is the total. */
.cs-pcpanel .cs-blist .cs-row{padding-block:11px}
.cs-pcpanel .cs-osum h3{margin-bottom:10px}
.cs-pcpanel .cs-osum .cs-sums .cs-total{display:none}
.cs-pcpanel .cs-osum .discount-details{margin-top:6px}
.cs-pcpanel .cs-band{padding-block:12px}
.cs-pcpanel .cs-empty{padding:72px 24px}
.cs-pcpanel .cs-foot .cs-pay{gap:20px}
.cs-pcpanel .cs-foot .cs-pay span{font-size:15px}
.cs-pcpanel .cs-foot .cs-pay .button{min-height:52px;padding-inline:24px;font-size:17px}
.cs-pcpanel.cs-payscreen .cs-foot{padding-top:16px}
.cs-headback{display:flex;align-items:center;gap:2px;margin-left:-12px}

/* A banked 50%-off reward: a line of the summary with a tick box, there whether it is used or not, so ticking moves nothing. */
.cs-reward dt{min-width:0}
.cs-rewardpick{display:flex;align-items:flex-start;gap:10px;cursor:pointer;color:var(--ink)}
.cs-rewardpick input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--green);cursor:pointer}
.cs-osum .cs-sums .cs-reward:not(.is-on) dd{font-weight:400;color:var(--muted)}
/* Messages in the side panel (a code applied, a reward used) float over the list just above the foot, as a dark bar, as they
   do in the phone cart. They used to sit between the head and the list and push everything down while they showed. */
.cs-pcpanel{position:relative}
html[data-cart] #cartDialog .cs-pcpanel>.dialog-status{position:absolute;left:16px;right:16px;bottom:calc(var(--cs-bar,84px) + 12px);z-index:6;margin:0;padding:8px 8px 8px 18px;border:0;border-radius:10px;background:var(--forest);color:#fff;font-size:16px;box-shadow:0 8px 24px #0a1c1147}
html[data-cart] #cartDialog .cs-pcpanel>.dialog-status:empty{display:none}
html[data-cart] #cartDialog .cs-pcpanel>.dialog-status .text-button{color:#fff;font-size:16px;font-weight:700;text-decoration-color:#ffffffa6;min-height:44px;padding-inline:12px}
html[data-cart] #cartDialog .cs-pcpanel>.dialog-status span{padding-block:8px}
/* The checkout step in the side panel, on a short laptop window: the fan and the spacing give way so the email and the name
   are both in view without scrolling. Found on 5 October 2026: at 1366 by 650 the name field was cut off, at 1280 by 600 the
   email field too. */
@media(max-height:760px){
 .cs-pcpanel.cs-payscreen .cs-fanbox{padding-top:16px;padding-bottom:12px}
 .cs-pcpanel.cs-payscreen .cs-fan{zoom:.78}
 .cs-pcpanel.cs-payscreen .cs-fanline{margin-top:6px}
 .cs-pcpanel.cs-payscreen .cs-fanline strong{font-size:22px}
 .cs-pcpanel.cs-payscreen .cs-payhead{padding-top:16px;font-size:21px}
 .cs-pcpanel.cs-payscreen .cs-payform{gap:12px;padding-top:12px}
 .cs-pcpanel.cs-payscreen .cs-payform .field{gap:6px}
 .cs-pcpanel.cs-payscreen .cs-payform .field input{min-height:48px}
 .cs-pcpanel.cs-payscreen .cs-scroll{padding-bottom:0}
 .cs-pcpanel.cs-payscreen .cs-foot{padding-top:12px;padding-bottom:12px}
 .cs-pcpanel.cs-payscreen .cs-ftotal{margin-bottom:10px}
 .cs-pcpanel.cs-payscreen .cs-foot .button.full{min-height:52px}
 .cs-pcpanel.cs-payscreen .cs-secure{margin-top:8px}
}
@media(max-height:630px){
 .cs-pcpanel.cs-payscreen .cs-fan{display:none}
 .cs-pcpanel.cs-payscreen .cs-fanbox{padding-top:12px}
 .cs-pcpanel.cs-payscreen .cs-fanline{margin-top:0}
}

/* The phone's checkout screen on a short phone (found 5 October 2026: at 320 by 640 the email field was below the fold, and
   it is the shop's own screen). The fan and the spacing give way, as they do in the laptop panel. */
@media(max-width:600px) and (max-height:700px){
 .cs-screen.cs-payscreen .cs-fanbox{padding-top:16px;padding-bottom:12px}
 .cs-screen.cs-payscreen .cs-fan{zoom:.78}
 .cs-screen.cs-payscreen .cs-fanline{margin-top:6px}
 .cs-screen.cs-payscreen .cs-fanline strong{font-size:22px}
 .cs-screen.cs-payscreen .cs-payhead{padding-top:16px;font-size:21px}
 .cs-screen.cs-payscreen .cs-payform{gap:12px;padding-top:12px}
 .cs-screen.cs-payscreen .cs-payform .field{gap:6px}
 .cs-screen.cs-payscreen .cs-payform .field input{min-height:50px}
 .cs-screen.cs-payscreen>.cs-body{padding-bottom:12px}
 .cs-screen.cs-payscreen .cs-bottom{padding-top:12px}
 .cs-screen.cs-payscreen .cs-ftotal{margin-bottom:10px}
 .cs-screen.cs-payscreen .cs-secure{margin-top:8px}
}
@media(max-width:600px) and (max-height:610px){
 .cs-screen.cs-payscreen .cs-fan{display:none}
 .cs-screen.cs-payscreen .cs-fanbox{padding-top:12px}
 .cs-screen.cs-payscreen .cs-fanline{margin-top:0}
}