/* Buildner Books, live additions (27 Sep 2026): the checkout page, its two required boxes, its messages and the password page before launch. Uses the shop's own tokens. */
.secure-label{font-size:13px;letter-spacing:.02em;color:var(--muted)}
.checkout-next{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line)}
.checkout-next li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.checkout-next li::before{content:'';position:absolute;left:4px;top:22px;width:10px;height:10px;background:var(--yellow);border:1px solid var(--ink)}
.checkout-next a{text-decoration:underline;text-underline-offset:3px}
.checkout-notice{margin:0 0 28px;padding:18px 20px;background:var(--surface);border-left:4px solid var(--yellow)}
.checkout-notice strong{display:block;margin-bottom:4px}
.checkout-notice p{margin:0}
.checkout-consents{margin:0 0 20px;padding:0;border:0;min-width:0;display:grid;gap:16px}
.consent{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;font-size:15px;line-height:1.5;cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;margin:0;width:24px;height:24px;border:1px solid var(--ink);border-radius:0;background:var(--paper);display:grid;place-items:center;cursor:pointer}
.consent input::after{content:'';width:12px;height:6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-2px) rotate(-45deg);opacity:0}
.consent input:checked{background:var(--yellow)}
.consent input:checked::after{opacity:1}
.consent input[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.consent a{text-decoration:underline;text-underline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.checkout-error{margin:0 0 16px;padding:14px 16px;border:1px solid #b3261e;color:#8c1d18;background:#fdf1f0;font-size:15px;line-height:1.45}
.checkout-error[hidden]{display:none}
[data-action="checkout"][aria-busy="true"],[data-action="pay"][aria-busy="true"]{opacity:.75;cursor:progress}
.thankyou-state{max-width:640px;margin:0 auto;padding:clamp(56px,9vw,120px) var(--pad);text-align:center}
.thankyou-state h1{font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0 0 16px}
.thankyou-state p{font-size:18px;line-height:1.55;color:var(--muted);margin:0 0 28px}
.thankyou-state .pending-dot{display:inline-block;width:12px;height:12px;margin:0 0 24px;background:var(--yellow);border:1px solid var(--ink);animation:bbPulse 1.2s ease-in-out infinite}
@keyframes bbPulse{50%{transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.thankyou-state .pending-dot{animation:none}}
.download-book{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;max-width:960px;margin:0 auto;padding:clamp(56px,9vw,120px) var(--pad)}
.download-book img{width:100%;height:auto;display:block;box-shadow:0 18px 40px rgba(20,20,20,.14)}
.download-book h1{font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.03em;margin:14px 0 12px}
.download-book form{margin:28px 0 16px}
.download-meta{margin:0;color:var(--muted);font-size:17px}
.download-note{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.download-ref{display:inline-block;margin-top:12px;font-size:15px}
@media (max-width:640px){.download-book{grid-template-columns:1fr}.download-book img{max-width:180px}.download-book .button{width:100%}}
.preview-gate .eyebrow{font-size:12px;line-height:1.4;color:var(--ink);margin:0 0 18px}
.preview-form{display:grid;gap:14px;width:100%;max-width:420px;margin:0 auto;text-align:left}
.preview-form .field{font-size:13px}
.preview-form .field input[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.preview-form .checkout-error{margin:0;color:#8c1d18;font-size:15px;line-height:1.45}
.preview-form .button{margin-top:6px}
.preview-gate .preview-note{font-size:14px;line-height:1.5;margin:24px 0 0}
.preview-gate .preview-note a{text-decoration:underline;text-underline-offset:3px}
/* Phones: no text under 12 px (30 Sep 2026, Lauris: "check EVERY page in mobile"). On phones the Codex book page drew its small labels at 9 to 11 px (the breadcrumb, the eyebrow, the page count row, the picture's label, the bundle saving, the price note, the yellow strip, the related books' publisher); they take 12 px, the size of the shop's other eyebrows, labels and captions on a phone. An eyebrow that needs two lines never leaves one word alone on the second. */
@media (max-width:700px){.ad-breadcrumb,.ad-breadcrumb>span:last-child,.ad-proof-strip,.ad-related-book>span,.ad-tax-note,.edition-intro .ad-book-meta,.edition-intro>.eyebrow,.edition-image-label,.ad-format-picker .format-option em{font-size:12px}.eyebrow{text-wrap:pretty}}
/* The bag's note (item 19, 30 Sep 2026): why a PDF was not added, or came out, beside its own Print + PDF. */
.bag-note{margin:20px 30px 0;padding:12px 14px;background:var(--surface);border-left:4px solid var(--yellow);font-size:13px;line-height:1.45}
@media (max-width:700px){.bag-note{margin:16px 23px 0}}
/* Bundles (item 23, 1 Oct 2026): what a whole bundle saves, above the subtotal, and the rest of a bundle offered in the bag. */
.summary-line.saving{font-size:14px}
.summary-line.saving strong{font-weight:700}
.bag-offer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px;padding:12px 12px 12px 14px;background:var(--surface);border-left:4px solid var(--yellow);font-size:13px;line-height:1.45}
.bag-offer p{margin:0}
.bag-offer p strong{font-weight:700}
.bag-offer p span{color:var(--muted);white-space:nowrap}
.cart-summary .bag-offer .button{flex:0 0 auto;min-height:44px;margin:0;padding:0 14px;gap:12px;font-size:13px;white-space:nowrap}
/* The language switch (i18n.py, 5 Oct 2026; Lauris: "add language choice somewhere in the top of page"; 6 Oct: "make sure
   the language chouice is obvious in the phone"): a framed button before the bag with a globe and the page's language
   (EN, IT); pressed, a small menu of the languages, each in its own name, the current one ticked. The page template's
   details/summary look (the FAQ's lines and +) is undone here. */
.header-end{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.header-end .bag-button{padding-left:0}
.lang-switch{position:relative;border:0}
.lang-switch>summary{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 12px 0 10px;border:1px solid var(--ink);font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1;list-style:none;cursor:pointer;transition:background .18s}
.lang-switch>summary:hover,.lang-switch[open]>summary{background:var(--surface)}
.lang-switch>summary::-webkit-details-marker{display:none}
.lang-globe{flex:0 0 auto;width:17px;height:17px}
.lang-switch>summary:after,.lang-switch[open]>summary:after{content:'';position:static;top:auto;right:auto;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;font-size:0;transform:translateY(-2px) rotate(45deg)}
.lang-switch[open]>summary:after{transform:translateY(2px) rotate(-135deg)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:168px;padding:6px 0;background:#fff;border:1px solid var(--line);box-shadow:0 16px 36px rgba(20,20,20,.14)}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 16px;font-size:14px;letter-spacing:normal;white-space:nowrap}
.lang-menu a:hover{background:var(--surface)}
.lang-menu a[aria-current]{font-weight:700}
.lang-menu a[aria-current]:after{content:'✓';font-weight:400}
/* Phones: the globe and the code without the arrow, and the bag as its yellow count (its aria-label names it); the
   smallest phones (320 px) the globe alone and a smaller lockup, so nothing touches */
@media (max-width:700px){.header-end{gap:12px}.lang-switch>summary{gap:6px;padding:0 10px 0 9px}.lang-switch>summary:after{display:none}}
@media (max-width:480px){.header-end .bag-button>span:first-child{display:none}}
@media (max-width:350px){.header .brand-logo{width:116px}.header .brand-books{font-size:21px}.lang-switch>summary{padding:0 10px}.lang-switch>summary>span{display:none}}
/* Spanish (6 Oct 2026): the hero's "Para quienes" and "construyen." are wider than the 62 px floor allows on phones under
   390 px, so there the headline scales with the screen and keeps its two lines */
@media (max-width:389px){html[lang="es"] .hero h1{font-size:calc((100vw - 44px) / 5.3)}}
/* The suggestion of the visitor's own language (i18n.hint, 6 Oct 2026): a yellow bar at the very top, in that language,
   for a browser whose first language the Shop has on a page in another one; shown by the head script before the page is
   drawn (it adds the display), until the visitor picks a language or closes it. */
.lang-hint{align-items:center;gap:12px;min-height:52px;padding:6px 6px 6px var(--pad);background:var(--yellow);color:var(--ink);font-size:13px;line-height:1.35}
.lang-hint p{flex:1 1 auto;margin:0}
.lang-hint a{display:inline-flex;align-items:center;flex:0 0 auto;min-height:40px;padding:0 14px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap;transition:background .18s}
.lang-hint a:hover{background:#3a3a37}
.lang-hint-close{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.lang-hint-close svg{width:14px;height:14px}
@media (min-width:701px){.lang-hint{justify-content:center;padding-right:var(--pad)}.lang-hint p{flex:0 1 auto}}