/* Empty screens on a phone (5 October 2026). Loaded by the shop for the empty cart (final), and by
   compare/empty-screens-live.html for the My sheets study. Every rule starts from .es-on, the class empty-studies.js puts on
   the shop's own empty box once it has redrawn it, so nothing here touches a screen the study has not drawn. */

/* The words: one line, one button, one link */
.es-on :is(.es-h,h3){font:600 26px/1.2 var(--serif);letter-spacing:-.03em;color:var(--ink);margin:0}
.es-on>p,.es-frame>p{max-width:none;margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.es-on :is(.es-actions,.cs-empty-actions){display:grid;justify-items:center;gap:6px;width:100%;max-width:342px;margin:22px auto 0}
.es-on .button.primary{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:52px;padding:10px 16px;font-size:16px}
.es-on .button.primary svg{flex:none;width:18px;height:18px;margin:0}
.es-on :is(.es-link,.text-button){display:inline-flex;align-items:center;min-height:44px;font:600 16px/1.3 var(--sans);color:var(--green-hover);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:5px}

/* The picture: one thing in ink, with a green 0 */
.es-pic{position:relative;flex:none;margin:0 auto 22px}
.es-ink{width:124px}
.es-ink.is-book{width:136px}
.es-ink.is-folder{width:130px}
.es-ink:is(.is-heart,.is-receipt){width:118px}
.es-ink svg{display:block;width:100%;height:auto;overflow:visible}

/* The empty cart: one centred column, set a little above the middle of the screen */
.cs-empty.es-on{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-items:normal;gap:0;max-width:none;margin:0;padding:28px 24px 22vh;text-align:center}

/* The dashed box round the cart (final); the comparison can still show the cart without it */
.cs-empty.es-on.es-framed{padding-inline:20px}
.es-frame{align-self:stretch;border:1px dashed var(--line-strong);border-radius:16px;padding:36px 19px 24px}

/* My sheets, the wishlist and the orders page: the same column under the tabs (the box is added below) */
.es-page .page-heading>a.text-button{display:none}
.empty.library-empty.es-on{display:block;justify-items:normal;border:0;border-radius:0;padding:40px 4px 56px;text-align:center}
/* Pages, in the dashed box the shop's own screen has */
.empty.library-empty.es-on.es-boxed{border:1px dashed var(--line-strong);border-radius:16px;padding:36px 19px 30px}
.es-on .es-actions:has(.es-link){margin-bottom:-6px}
/* An empty wishlist or orders page now sits in its own page's frame (wishlist-studies.js, orders-studies.js), whose tabs have
   no room under them: the box keeps the 24px it has under My sheets' tabs. */
.page-shell:is([data-ws],[data-os],[data-ws-pc],[data-os-pc])>.empty.library-empty.es-on{margin-top:24px}

/* A small phone: the arrow gives its room to the words, so the button stays on one line with enlarged text too */
@media(max-width:340px){.cs-empty.es-on{padding-inline:20px}.es-on :is(.es-h,h3){font-size:24px}.es-on .button.primary{padding-inline:12px}.es-on .button.primary svg{display:none}}

/* ---------- The laptop: My sheets, the wishlist and orders as one slim row across the page (final) ---------- */
.es-pc .es-words>p{max-width:none;margin:4px 0 0;font-size:17px;line-height:1.5;color:var(--muted)}
.es-pc.es-on .button.primary{font-size:17px}
/* Narrower than 820px there is no room for a row, so the box stays the phone's centred column. */
@media(min-width:820px){
.empty.library-empty.es-on.es-pc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:30px;align-items:center;max-width:none;padding:26px 34px;text-align:left}
.es-pc-row .es-pic{width:88px;margin:0}
.es-pc-row .es-actions{width:300px;margin:0}
}

/* The empty cart in the shop's cart window on a laptop (a study, in the comparison host only) */
.empty.cart-empty.es-on{border:0;padding:8px 0 0;text-align:center}
.empty.cart-empty.es-on .es-frame{padding:40px 24px 28px}
/* The same in the laptop cart the shop has had since 5 October 2026 (the cart study's side panel) */
.cs-pc .cs-empty.es-on{display:block;padding:24px 24px 0}