/* The wishlist on a phone (study of 5 October 2026): the chosen wishlist (large covers, Add on each row, Add all under the
   tabs) and a refined version of it. Drawn by wishlist-studies.js inside the shop's own wishlist page, under the shop's
   My sheets / Wishlist / Orders / Rewards tabs. Loaded only by compare/my-wishlist-live.html. Designed at 390px, checked at 320px.
   A thing looks the same here as in the phone cart and in My sheets: a cover, a name, a grey second line, the price in green,
   Remove underlined, white surfaces with hairlines. No mint fills, no split-colour cards, no labels above headings.
   Everything down to the line "Refined" is the chosen wishlist and is not changed any more. */

/* The heading is the size of My sheets' heading, with the count under it. */
.page-shell[data-ws]{padding-top:23px;padding-bottom:40px}
.page-shell[data-ws] .page-heading{align-items:flex-start;gap:12px;margin-bottom:14px}
.page-shell[data-ws] .page-heading h1{font-size:34px;line-height:1.15;overflow-wrap:anywhere}
.page-shell[data-ws] .page-heading p{margin-top:5px;max-width:none;font-size:14px;line-height:1.4;color:#435b4d}
.page-shell[data-ws] .account-nav{margin:0 0 6px;padding:0;gap:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.page-shell[data-ws] .account-nav a{min-height:58px;gap:4px;padding:7px 2px;font-size:12px}
.page-shell[data-ws] .account-nav a svg{width:18px;height:18px}
.ws .icon{width:18px;height:18px}
.ws a,.ws button{-webkit-tap-highlight-color:transparent}

/* A cover, drawn by show-pages.js and sized from its own width. It keeps its title and drawing; the cover's own small print
   would only be specks. A bundle is a stack of pages; a Smart Bundle a deeper one. */
.ws-cover{display:block;flex:none;border:1px solid var(--line-strong);border-radius:3px;background:#fff}
.ws-cover .pg{display:block;border-radius:2px}
.ws .pg-cover .cv-title{font-size:var(--cv,5em)}
.ws .pg-cover .pg-top>span,.ws .pg-cover .cv-line,.ws .pg-cover .pg-foot span{visibility:hidden}
.ws-cover.is-stack{border-color:var(--forest);box-shadow:2px -2px 0 0 #fff,3px -3px 0 0 var(--forest)}
.ws-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)}

/* Buying everything, under the tabs: what the figure is for, the price, the single price struck and the saving; a green button. */
.ws-payrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0 16px;border-bottom:1px solid var(--line)}
.ws-payrow small{display:block;margin-bottom:2px;font-size:14px;line-height:1.3;color:var(--muted)}
.ws-payrow p{display:flex;align-items:baseline;gap:8px}
.ws-payrow strong{font:700 22px/1.15 var(--sans);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.ws-payrow s{font-size:15px;color:var(--quiet);font-variant-numeric:tabular-nums}
.ws-payrow span{display:block;margin-top:2px;font-size:14px;font-weight:600;line-height:1.3;color:var(--green-hover)}
.ws-payrow span.is-plain{font-weight:400;color:var(--muted)}
.ws-pay{display:inline-flex;align-items:center;justify-content:center;flex:none;height:50px;padding:0 20px;border:1px solid var(--green);border-radius:12px;background:var(--green);color:#fff;font:600 16px/1 var(--sans);white-space:nowrap}
.ws-pay:active{transform:scale(.97)}
/* Nothing left to add. */
.ws-done{display:flex;align-items:center;gap:6px;margin:14px 0;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;line-height:1.4;color:var(--green-hover)}

/* A row: a cover large enough to recognise; the name and what it is; under them the price, Remove and the thing's own Add. */
.ws-list{list-style:none;margin:0;padding:0}
.ws-row{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;align-items:stretch;padding:14px 0;border-bottom:1px solid var(--line)}
.ws-row .ws-cover{align-self:start;border-radius:4px}
.ws-row .ws-cover.is-stack{width:68px;margin-top:4px}
.ws-row .ws-cover.is-deep{width:65px;margin-top:7px}
.ws-copy{display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;gap:2px;min-width:0}
.ws-copy b{font:600 17px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.ws-copy small{font-size:14px;line-height:1.4;color:var(--muted)}
.ws-where{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;line-height:1.4;color:var(--green-hover)}
.ws-where .icon{width:15px;height:15px}
.ws-under{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;align-self:end;margin-top:6px}
.ws-under:has(.ws-addbtn){align-items:center}
.ws-price{display:flex;align-items:baseline;gap:7px;font-size:17px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.ws-price s{font-size:14px;color:var(--quiet)}
.ws-price strong{font-weight:700;color:var(--green-hover)}
.ws-acts{display:flex;align-items:center;gap:14px;margin-left:auto}
.ws-link{display:inline-flex;align-items:center;min-height:36px;padding:0;background:none;color:var(--ink);font:500 15px/1.2 var(--sans);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
.ws-addbtn{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 13px 0 10px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--forest);font:600 15px/1 var(--sans);white-space:nowrap}
.ws-addbtn .icon{width:16px;height:16px}
.ws-addbtn.is-added{border-color:var(--green);color:var(--green-hover)}
.ws-addbtn:active{transform:scale(.96)}
/* Taken off the list: its place is kept as one line, with the way back. */
.ws-gone{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4;color:var(--muted)}
.ws-gone span{min-width:0}
.ws-gone b{font-weight:600;color:var(--ink)}
.ws-gone .ws-link{flex:none;min-height:44px;font-weight:600;color:var(--green-hover)}
.ws-browse{display:flex;justify-content:flex-start;width:fit-content;margin-top:22px;font-size:15px}

@media(max-width:360px){
 .ws-pay{padding:0 14px;font-size:15px}
 .ws-payrow{gap:10px}
}

/* ---------- Refined: what a check of the chosen wishlist found (the list is in wishlist-studies.js) ---------- */
/* 1. What is pressed is 44px tall, and Remove stands a little further from Add. */
.ws--refined .ws-addbtn{height:44px;padding:0 14px 0 11px}
.ws--refined .ws-acts{gap:18px}
.ws--refined .ws-acts .ws-link{min-height:44px}
/* 3. The line that says everything is added can take focus after "Add all"; it is not a control, so it shows no ring. */
.ws--refined .ws-done:focus{outline:0}
/* 5. "Add the other 11" is a longer button than "Add these 11". On a small phone with text enlarged by a third it would
   push 13px past the list's edge, so there the struck price may drop under the price to make room. */
.ws--refined .ws-payrow p{flex-wrap:wrap}
.ws--refined .ws-payrow>div{min-width:0}
@media(max-width:360px){
 /* 4. A bundle's line fits on a small phone: a little less room beside the cover, the single price over the price, and Add
    without its mark. */
 .ws--refined .ws-row{column-gap:12px}
 .ws--refined .ws-under .ws-price{flex-direction:column;align-items:flex-start;gap:0;line-height:1.2}
 .ws--refined .ws-acts{gap:12px}
 .ws--refined .ws-addbtn{padding:0 12px}
 .ws--refined .ws-addbtn .icon{display:none}
}

/* ---------- Laptop (7 October 2026, round one): List, Offer card, Cards. In comparison previews only. ----------
   The page takes My sheets' frame (the laptop library the owner settled on the same day): the same heading size, the same
   1076px column, the tabs in the same place, so the four tabs read as one page. White surfaces with hairlines, one pale
   surface for a sum, green for the one thing to press. Measured at 1366 by 657. */
.page-shell[data-ws-pc]{max-width:1140px;padding-top:32px}
.page-shell[data-ws-pc] .page-heading{align-items:center;gap:18px;margin-bottom:12px}
.page-shell[data-ws-pc] .page-heading h1{font-size:40px;line-height:1.15;overflow-wrap:anywhere}
.page-shell[data-ws-pc] .page-heading p{margin-top:5px;max-width:none;font-size:14px;line-height:1.4;color:#435b4d}
.page-shell[data-ws-pc] .account-nav{margin-bottom:0}
.ws--pc{position:relative;margin-top:24px}
.ws--pc button{cursor:pointer}
/* Buying everything, as one line. On a wide window it sits on the line of the tabs, where My sheets has its menus. */
.ws-pcall{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 18px;font-size:15px;line-height:1.3;color:var(--muted)}
.ws-pcall strong{font:700 20px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.ws-pcall s{font-size:14px;color:var(--quiet);font-variant-numeric:tabular-nums}
.ws-pcall em{font-style:normal;font-size:14px;font-weight:600;color:var(--green-hover)}
.ws-pcall .ws-pay{height:44px;margin-left:8px;padding:0 18px;border-radius:10px;font-size:15px}
.ws-pcall.ws-done{padding:0;border:0;min-height:44px}
.ws--pc .ws-pay:hover{border-color:var(--green-hover);background:var(--green-hover)}
@media(min-width:1280px){
 .ws--pc>.ws-pcall{position:absolute;right:0;bottom:calc(100% + 29px);margin:0}
}
/* The list: one white box, a line per saved thing. */
.ws-pcbox{padding:2px 24px;border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.ws-pcbox>li:first-child{border-top:0}
.ws-pcrow{display:grid;grid-template-columns:48px minmax(0,1fr) 150px 64px 112px;column-gap:20px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.ws-pcrow .ws-cover.is-stack{width:45px;margin-top:3px}
.ws-pcrow .ws-cover.is-deep{width:42px;margin-top:6px}
.ws-pcrow .ws-copy{grid-template-rows:none}
.ws-pcrow .ws-copy b{font-size:16px}
.ws-pcrow .ws-price{justify-self:end}
.ws-pcrow .ws-link{justify-self:end;min-height:44px}
.ws-pcrow .ws-link:hover{text-decoration-color:var(--ink)}
.ws-pcrow .ws-addbtn{justify-self:end;justify-content:center;min-width:104px;height:42px}
.ws-pcrow .ws-addbtn:hover{border-color:var(--forest)}
.ws-pcbox .ws-gone{padding:6px 0;border-bottom:0;border-top:1px solid var(--line)}
/* Offer card: buying everything first, on the shop's pale surface for a sum, with the covers of what it buys. */
.ws-pccard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:40px;align-items:center;margin-bottom:16px;padding:18px 24px;border-radius:14px;background:var(--soft)}
.ws-pccopy small{display:block;margin-bottom:2px;font-size:14px;line-height:1.3;color:var(--muted)}
.ws-pccopy p{display:flex;align-items:baseline;gap:8px}
.ws-pccopy strong{font:700 26px/1.15 var(--sans);letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums}
.ws-pccopy s{font-size:15px;color:var(--quiet);font-variant-numeric:tabular-nums}
.ws-pccopy>span{display:block;margin-top:2px;font-size:14px;font-weight:600;line-height:1.3;color:var(--green-hover)}
.ws-pccopy>span.is-plain{font-weight:400;color:var(--muted)}
.ws-pccovers{display:flex;align-items:flex-end;gap:12px;min-width:0;overflow:hidden;padding-top:6px}
.ws-pccovers .ws-cover{display:block;width:52px;margin:0}
.ws-pccovers>b{align-self:center;font:600 15px/1 var(--sans);color:var(--muted)}
.ws-pccard .ws-pay{height:48px;padding:0 22px;border-radius:12px}
/* Round two: the card restyled three ways, in the same place with the same parts. Shared: the heading in the shop's serif,
   the saving on the price's line, covers of 60px standing beside the button so no gap is left in the middle.
   Tidied keeps the pale surface; Forest is the solid forest card of the free sheets and the rewards; Outlined is white with
   the list's own outline. */
.ws-pccard.is-tidy{column-gap:28px;padding:20px 24px 20px 28px}
.is-tidy .ws-pccopy h2{font:600 24px/1.2 var(--serif);letter-spacing:-.025em;color:var(--ink)}
.is-tidy .ws-pccopy p{margin-top:6px;gap:10px}
.is-tidy .ws-pccopy strong{font-size:22px}
.is-tidy .ws-pccopy em{font-style:normal;font-size:15px;font-weight:600;color:var(--green-hover)}
.is-tidy .ws-pccopy em.is-plain{font-weight:400;color:var(--muted)}
.is-tidy .ws-pccovers{justify-content:flex-end;gap:10px}
.is-tidy .ws-pccovers .ws-cover{width:60px}
.is-tidy .ws-pay{height:50px;padding:0 24px}
.ws-pccard.is-forest{background:var(--forest)}
.is-forest .ws-pccopy h2,.is-forest .ws-pccopy strong{color:#fff}
.is-forest .ws-pccopy s{color:#a9c4b3}
.is-forest .ws-pccopy em{color:#9fe0b8}
.is-forest .ws-pccovers>b{color:#cfe3d6}
.is-forest .ws-cover{border-color:var(--forest)}
.is-forest .ws-cover.is-stack{border-color:#fff;box-shadow:2px -2px 0 0 var(--forest),3px -3px 0 0 #fff}
.is-forest .ws-cover.is-deep{box-shadow:2px -2px 0 0 var(--forest),3px -3px 0 0 #fff,5px -5px 0 0 var(--forest),6px -6px 0 0 #fff}
.is-forest .ws-pay,.ws--pc .is-forest .ws-pay:hover{border-color:#fff;background:#fff;color:var(--forest)}
.ws-pccard.is-line{border:1px solid var(--line-strong);background:#fff;padding:19px 23px 19px 27px}
/* Cards: the shop's own cards stay; only the line beside the tabs is added. */
.ws--pc-cards{margin-top:18px}
.page-shell[data-ws-pc="pc-cards"] .wishlist-grid{margin-top:6px}
@media(min-width:1280px){
 .ws--pc-cards{margin-top:0}
 .ws--pc-cards>.ws-pcall{bottom:calc(100% + 5px)}
 .page-shell[data-ws-pc="pc-cards"] .wishlist-grid{margin-top:24px}
}
/* Narrower than a laptop (601 to 999px): not arranged yet; the line folds so nothing runs off the side. */
@media(max-width:999px){
 .ws-pcrow{grid-template-columns:48px minmax(0,1fr) auto auto}
 .ws-pcrow .ws-price{grid-column:2;justify-self:start}
 .ws-pcrow .ws-link{grid-row:1;grid-column:3}
 .ws-pcrow .ws-addbtn{grid-row:1;grid-column:4}
 .ws-pccard{grid-template-columns:minmax(0,1fr) auto}
 .ws-pccovers{display:none}
 .ws-pcall{flex-wrap:wrap}
}