/* Orders on a phone (study of 5 October 2026): Order cards, with four ways to end an opened card. Drawn by orders-studies.js inside
   the shop's own Orders page, under the shop's tabs. Loaded only by compare/my-orders-live.html. Designed at 390px, checked at 320px.
   The look is My sheets' and the wishlist's: covers, 16 to 17px names, 14px grey second lines, white surfaces with hairlines,
   green only for what was saved. No mint fills, no split-colour cards, no labels above headings. */
.page-shell[data-os]{padding-top:23px;padding-bottom:40px}
.page-shell[data-os] .page-heading{align-items:flex-start;gap:12px;margin-bottom:14px}
.page-shell[data-os] .page-heading h1{font-size:34px;line-height:1.15;overflow-wrap:anywhere}
.page-shell[data-os] .page-heading p{margin-top:5px;max-width:none;font-size:14px;line-height:1.4;color:#435b4d}
.page-shell[data-os] .account-nav{margin:0 0 6px;padding:0;gap:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.page-shell[data-os] .account-nav a{min-height:58px;gap:4px;padding:7px 2px;font-size:12px}
.page-shell[data-os] .account-nav a svg{width:18px;height:18px}
.os .icon{width:18px;height:18px}
.os button{-webkit-tap-highlight-color:transparent}

.os-cover{display:block;flex:none;border:1px solid var(--line-strong);border-radius:3px;background:#fff}
.os-cover .pg{display:block;border-radius:2px}
.os .pg-cover .cv-title{font-size:var(--cv,5em)}
.os .pg-cover .pg-top>span,.os .pg-cover .cv-line,.os .pg-cover .pg-foot span{visibility:hidden}
.os-cover.is-stack{border-color:var(--forest);box-shadow:2px -2px 0 0 #fff,3px -3px 0 0 var(--forest)}
.os-cover.is-deep{box-shadow:2px -2px 0 0 #fff,3px -3px 0 0 var(--forest),5px -5px 0 0 #fff,6px -6px 0 0 var(--forest)}

/* A thing that was bought: its cover, its name and what it is, what was paid for it. */
.os-list{list-style:none;margin:0;padding:0}
.os-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:9px 0}
.os-row .os-cover.is-stack{width:31px;margin-top:3px}
.os-row .os-cover.is-deep{width:29px;margin-top:6px}
.os-copy{display:grid;gap:1px;min-width:0}
.os-copy b{font:600 15px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.os-copy small{font-size:13px;line-height:1.4;color:var(--muted)}
.os-price{font-size:15px;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* How the total came about, as the cart and the wishlist write their sums. */
.os-sums{display:grid;gap:7px;margin:6px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.os-sums div{display:flex;justify-content:space-between;gap:18px;font-size:15px;line-height:1.4;color:var(--muted)}
.os-sums dd{margin:0;font-variant-numeric:tabular-nums}
.os-sums .os-save dt{color:var(--ink)}
.os-sums .os-save dd{font-weight:700;color:var(--green-hover)}
.os-sums .os-total{margin-top:3px;padding-top:11px;border-top:1px solid var(--line);font-size:17px;font-weight:700;color:var(--ink)}
.os-foot{margin-top:12px;font-size:13px;line-height:1.4;color:var(--muted)}
.os-go{font-size:15px}
.os-browse{display:flex;justify-content:flex-start;width:fit-content;margin-top:22px;font-size:15px}
.os-paid{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.os em{font-style:normal;font-size:14px;font-weight:600;line-height:1.4;color:var(--green-hover)}

/* ---------- Order cards ---------- */
.os-cards{display:grid;gap:12px;margin-top:14px}
.os-card{border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.os-head{display:grid;grid-template-columns:54px minmax(0,1fr) 20px;column-gap:16px;align-items:center;width:100%;padding:16px 16px 16px 18px;border-radius:14px;background:none;color:inherit;text-align:left}
.os-stack{display:block;padding:7px 7px 0 0}
.os-stack.is-many .os-cover:not(.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)}
.os-head-copy{display:grid;justify-items:start;gap:2px;min-width:0}
.os-head-copy b{font:600 19px/1.2 var(--serif);letter-spacing:-.025em;color:var(--ink)}
.os-head-copy>span:not([class]){font-size:14px;line-height:1.4;color:var(--muted)}
.os-head-copy .os-paid{margin-top:3px;font-size:16px}
.os-head>.icon{width:20px;height:20px;color:var(--forest);transition:transform .16s}
.is-open>.os-head>.icon{transform:rotate(180deg)}
.os-card .os-body{padding:0 16px 8px 18px}
.os-card .os-body>.os-list{padding-top:6px;border-top:1px solid var(--line)}

/* ---------- The foot of an opened card, three neater ways ---------- */
/* The order number and the way to the sheets, on one line */
.os-tail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 14px;margin:12px 0 8px;font-size:14px;line-height:1.4;color:var(--muted)}
.os-tail a{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--green-hover);text-decoration:none;white-space:nowrap}
.os-tail a .icon{width:16px;height:16px}
/* Paid and saved: one line in place of the sums */
.os-pay{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px;margin:6px 0 0;padding-top:13px;border-top:1px solid var(--line);font-size:16px;line-height:1.4;color:var(--ink)}
.os-pay b{font-weight:700;font-variant-numeric:tabular-nums}
/* Toned receipt: the sums in one panel, the tone of the cart's Order summary */
.os-sums.is-toned{margin-top:8px;padding:13px 14px;border-top:0;border-radius:12px;background:#eef4ef}
.os-sums.is-toned .os-total{border-top-color:#d3dfd6;font-size:16px}
/* Paid alone in the panel (nothing was taken off): no rule above it */
.os-sums.is-toned .os-total:first-child{margin-top:0;padding-top:0;border-top:0}
/* Adds up: only what the rows above do not say; white, a rule before Paid; a bundle's saving as one sentence */
.os-sums.is-adds .os-save dd{font-weight:600}
.os-sums.is-adds .os-total{font-size:16px}
.os-sums.is-adds .os-total:first-child{margin-top:0;padding-top:0;border-top:0}
.os-note{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.os-list+.os-note{padding-top:12px;border-top:1px solid var(--line)}
.os-list+.os-tail{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
/* Adds up, with the rest: an open card's head says only the date and the count; the foot ends with the way to the sheets,
   how it was paid, and two small links */
.os--cards-full .is-open>.os-head .os-paid,.os--cards-full .is-open>.os-head em,.os--cards-full .is-open>.os-head [data-name]{display:none}
.os-close{display:grid;gap:6px;margin:14px 0 8px}
.os-list+.os-close{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.os-open{display:inline-flex;align-items:center;gap:6px;width:fit-content;min-height:32px;font-size:16px;font-weight:600;color:var(--green-hover);text-decoration:none}
.os-open .icon{width:16px;height:16px}
.os-close p{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.os-close p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
/* Sums and a button: no rule, nothing bold but Paid; the link is a button */
.os-sums.is-tidy .os-save dd{font-weight:400}
.os-sums.is-tidy .os-total{margin-top:0;padding-top:0;border-top:0;font-size:16px}
.os-find{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin-top:14px;border:1px solid var(--line-strong);border-radius:10px;font:600 15px/1 var(--sans);color:var(--forest);text-decoration:none}
.os-find .icon{width:16px;height:16px}
.os-foot.is-end{margin:9px 0 8px;text-align:center}

@media(max-width:360px){
 .os-head{grid-template-columns:46px minmax(0,1fr) 20px;column-gap:13px;padding:14px 12px 14px 14px}
 .os-card .os-body{padding:0 12px 8px 14px}
}

/* ---------- Laptop (7 October 2026): Table and Order cards. In comparison previews only. Receipts was deleted in round
   two ("receipts doesnt work"), and an opened order now ends inside its own list. ----------
   The page takes My sheets' frame, as the laptop wishlist does: the same heading size, 1076px column and tab position.
   White surfaces with hairlines; one pale surface for a sum. Measured at 1366 by 657. */
.page-shell[data-os-pc]{max-width:1140px;padding-top:32px}
.page-shell[data-os-pc] .page-heading{align-items:center;gap:18px;margin-bottom:12px}
.page-shell[data-os-pc] .page-heading h1{font-size:40px;line-height:1.15;overflow-wrap:anywhere}
.page-shell[data-os-pc] .page-heading p{margin-top:5px;max-width:none;font-size:14px;line-height:1.4;color:#435b4d}
.page-shell[data-os-pc] .account-nav{margin-bottom:0}
.os--pc{margin-top:24px}
.os--pc button{cursor:pointer}
.os--pc .os-copy b{font-size:16px}
.os--pc .os-copy small,.os--pc .os-foot{font-size:14px}
.os--pc .os-row{grid-template-columns:38px minmax(0,1fr) auto;column-gap:16px;padding:8px 0}
.os--pc .os-row+.os-row{border-top:1px solid var(--line)}
.os--pc .os-stack{padding:4px 4px 0 0}
.os--pc .os-stack.is-many .os-cover:not(.is-stack){box-shadow:2px -2px 0 -1px #fff,2px -2px 0 0 var(--line-strong),4px -4px 0 -1px #fff,4px -4px 0 0 var(--line-strong)}
.os-pchead{display:grid;column-gap:18px;align-items:center;width:100%;border:0;background:none;color:var(--ink);font:400 15px/1.35 var(--sans);text-align:left}
.os-pchead>.icon{justify-self:end;width:20px;height:20px;color:var(--muted);transition:transform .2s}
.is-open>.os-pchead>.icon{transform:rotate(180deg)}
.os-pchead>b,.os-pccopy b{font:600 18px/1.25 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.os-pchead:hover b{text-decoration:underline;text-underline-offset:3px}
.os--pc .os-paid{justify-self:end;font-size:16px}
/* How an opened order ends: lines of the same list, in its own columns (the name's edge, the price's edge). */
.os--pc .os-row.is-sum{padding:11px 0;font-size:15px;line-height:1.4;color:var(--ink)}
.os--pc .os-row.is-save .os-price{font-weight:600;color:var(--green-hover)}
.os--pc .os-row.is-paid,.os--pc .os-row.is-paid .os-price{font-size:16px;font-weight:700}
.os-pctail{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0 0 54px;border-top:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--muted)}
.os-pctail a{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:15px;font-weight:600;color:var(--green-hover);text-decoration:none;white-space:nowrap}
.os-pctail a:hover{text-decoration:underline;text-underline-offset:3px}
.os-pctail a .icon{width:16px;height:16px}
/* Table */
.os-pcbox{padding:0 24px 4px;border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.os-pcth,.os-pcline>.os-pchead{display:grid;grid-template-columns:40px 190px minmax(0,1fr) 150px 44px;column-gap:18px;align-items:center}
.os-pcth{padding:16px 0 12px;border-bottom:1px solid var(--line-strong);font:600 14px/1.3 var(--sans);color:var(--muted)}
.os-pcth>span:nth-child(4){text-align:right}
.os-pcline{border-top:1px solid var(--line)}
.os-pcth+.os-pcline{border-top:0}
.os-pcline.is-open+.os-pcline{border-top-color:var(--line-strong)}
.os-pcline>.os-pchead{padding:11px 0}
.os-pcwhat{display:grid;gap:1px;min-width:0}
.os-pcwhat small{font-size:14px;color:var(--muted)}
.os-pcline>.os-body{padding:0 0 14px 58px}
.os-pcline>.os-body>.os-list{border-top:1px solid var(--line)}
/* Order cards */
.os-pccards{display:grid;gap:12px}
.os-pccard{border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.os-pccard>.os-pchead{grid-template-columns:250px minmax(0,1fr) auto 44px;padding:16px 24px;border-radius:14px}
.os-pccopy{display:grid;gap:3px;min-width:0}
.os-pccopy>span{font-size:14px;line-height:1.4;color:var(--muted)}
.os-pccovers{display:flex;align-items:flex-end;gap:10px;min-width:0;overflow:hidden;padding-top:6px}
.os-pccovers .os-cover{width:44px}
.os-pccovers>i{align-self:center;font-style:normal;font-size:15px;font-weight:600;color:var(--muted)}
.os-pcmoney{display:grid;justify-items:end;gap:1px}
.os-pccard>.os-body{padding:0 24px 14px}
.os-pccard>.os-body>.os-list{border-top:1px solid var(--line)}
@media(max-width:999px){
 .os-pcth{display:none}
 .os-pcline>.os-pchead{grid-template-columns:40px minmax(0,1fr) auto 24px}
 .os-pcline>.os-pchead>.os-pcwhat{display:none}
 .os-pccard>.os-pchead{grid-template-columns:minmax(0,1fr) auto 24px}
 .os-pccovers{display:none}
 .os-pcline>.os-body{padding-left:0}
 .os-pctail{flex-wrap:wrap}
}

/* ---------- Laptop, round three (7 October 2026). Of an opened order: "reading the totals especially is hard", "it doesnt
   read well"; the page is for checking what was paid. Three ways to say the sum with every label right beside its figure.
   All three keep the Table's list. Comparison previews only. ---------- */
.os-strip,.os-inv{margin:0}
.os-strip dt,.os-inv dt{font-size:14px;line-height:1.4;color:var(--muted)}
.os-strip dd,.os-inv dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.os-strip .is-save dd,.os-inv .is-save dd{color:var(--green-hover)}
/* Totals first: one line of figures, read left to right, ending in what was paid. */
.os-strip{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 44px;padding:14px 0 16px;border-top:1px solid var(--line)}
.os-strip>div{display:grid;gap:2px}
.os-strip dd{font-size:20px;line-height:1.25;font-weight:600}
.os-strip .is-paid dt{color:var(--ink);font-weight:600}
.os-strip .is-paid dd{font:700 28px/1.1 var(--serif);letter-spacing:-.02em}
.os-strip>div+.is-paid{position:relative;padding-left:44px}
.os-strip>div+.is-paid::before{content:"=";position:absolute;left:0;bottom:1px;font-size:22px;line-height:1.25;color:var(--muted)}
.os--pc-first .os-pctail{border-top:1px solid var(--line)}
/* Invoice: the sum under the prices, label and figure side by side at the right edge. */
.os-inv{display:grid;justify-content:end;padding:12px 0 14px;border-top:1px solid var(--line-strong)}
.os-inv>div{display:grid;grid-template-columns:minmax(200px,auto) 110px;column-gap:24px;align-items:baseline;padding:4px 0}
.os-inv dt{text-align:right;font-size:15px}
.os-inv dd{text-align:right;font-size:16px}
.os-inv .is-save dd{font-weight:600}
.os-inv .is-paid{margin-top:6px;padding-top:10px;border-top:1px solid var(--line-strong)}
.os-inv .is-paid dt{color:var(--ink);font-size:16px;font-weight:700}
.os-inv .is-paid dd{font:700 24px/1.15 var(--serif);letter-spacing:-.02em}
/* Narrow receipt: the opened order is one column 600px wide; price beside name, figure beside label. */
.os-narrow{max-width:600px}
.os-inv.is-wide{display:block;padding:10px 0 12px;border-top:1px solid var(--line-strong)}
.os-inv.is-wide>div{grid-template-columns:minmax(0,1fr) auto}
.os-inv.is-wide dt{text-align:left}
.os-narrow .os-pctail{padding-left:0}
@media(max-width:999px){
 .os-inv:not(.is-wide)>div{grid-template-columns:minmax(0,auto) 96px}
}

/* ---------- Laptop: the side panel (7 October 2026). "as it is now was actually good, the view details should be a side
   panel." The shop's own Orders page; "View details" opens a panel at the right in the laptop cart's frame. ---------- */
.os-side{width:480px;border-radius:16px 0 0 16px}
.os-side[open]{display:flex;flex-direction:column}
.os-side .dialog-body{display:flex;flex-direction:column;padding:22px 24px 14px}
.os-sdate{display:grid;gap:3px;padding-bottom:16px}
.os-sdate b{font:600 26px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.os-sdate span{font-size:14px;line-height:1.4;color:var(--muted)}
.os-side .os-list{flex:none;border-top:1px solid var(--line)}
.os-side .os-row{grid-template-columns:38px minmax(0,1fr) auto;column-gap:14px;padding:11px 0}
.os-side .os-row+.os-row{border-top:1px solid var(--line)}
.os-side .os-copy b{font-size:16px}
.os-side .os-copy small{font-size:14px}
.os-side .os-price{font-size:16px}
.os-side .os-inv.is-wide{margin-top:auto;padding:12px 0 0;border-top:1px solid var(--line-strong)}
.os-side .os-list+.os-inv.is-wide{flex:none}
.os-side .dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px 20px}
.os-spaid{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;column-gap:10px;margin:0}
.os-spaid span{font:600 16px/1.2 var(--sans);color:var(--ink)}
.os-spaid strong{font:700 26px/1.15 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.os-spaid em,.os-sbig em{grid-column:1/-1;font-style:normal;font-size:14px;line-height:1.4;font-weight:600;color:var(--green-hover)}
.os-side .dialog-footer .button{min-height:52px;padding-inline:22px;font-size:16px;white-space:nowrap}
.os-side .dialog-footer .button.full{width:100%;font-size:17px}
/* Paid first */
.os-sbig{display:grid;gap:2px;margin:0;padding:16px 0 18px;border-top:1px solid var(--line)}
.os-sbig span{font:600 15px/1.3 var(--sans);color:var(--muted)}
.os-sbig b{font:700 44px/1.05 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.os-sbig em{font-size:15px}
.os-side--pc-side-first .os-inv.is-wide{margin-top:0;padding:12px 0 14px;border-top-color:var(--line)}
.os-side--pc-side-first .os-list{border-top-color:var(--line-strong)}
/* All three take My sheets' frame; the first two keep the shop's own rows under it. */
.page-shell[data-os-pc]>.orders-list{margin-top:24px;border-color:var(--line-strong);border-radius:14px}
.page-shell[data-os-pc]>.orders-list .order-row{padding:16px 22px}
.page-shell[data-os-pc]>.orders-list .order-row .small{font-size:14px}
.page-shell[data-os-pc]>.orders-list .order-row .order-paid span{font-size:14px;font-weight:600}
/* Rows tidied: the date written out and what was bought as the row's name. */
.os--pc-side-tidy .order-row{grid-template-columns:190px minmax(0,1fr) 130px auto;padding:16px 22px}
.os--pc-side-tidy .orders-list{border-color:var(--line-strong);border-radius:14px}
.os-sday{font:600 18px/1.25 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.os--pc-side-tidy .order-row h2{font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.os--pc-side-tidy .order-row p{margin-top:2px}
.os--pc-side-tidy .order-row .order-paid span{font-size:14px;font-weight:600}
@media(max-width:850px){
 .os--pc-side-tidy .order-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
 .os--pc-side-tidy .order-row>:nth-child(2){grid-column:1/-1;grid-row:2}
}