/* ═══════════════════════════════════════════════════════════════════ Saanjhi Books — design system components · RECONCILED This file used to be authored against the assumption that only a product page had been designed. That is no longer true: the design project now also contains checkout, category, homepage and mobile directions. Where those overlap this file, THEY WIN and this file adopts their spec. ── ADOPTED FROM THE DESIGN PROJECT ─────────────────────────────────── .f-fld ← books-checkout.css .fld (bordered box, micro label inside) .f-check ← books-checkout.css .chk/.cb (checkmark geometry) .f-option ← books-checkout.css .opt/.rad .f-step ← books-checkout.css .step/.sh2 (numbered circle, not a pill) .f-paytabs ← books-checkout.css .paytabs/.pt .f-sumline ← books-checkout.css .li (qty badge over the cover) .f-totals ← books-checkout.css .tot/.tr/.grand .f-applied ← books-checkout.css .applied .f-pager ← books-category.css .pager (bordered pills) .f-chip ← books-category.css .chip .f-tag ← books-home.css .tag (+.hot/.gold) .f-drawer ← books-mobile.css .drawer/.scrim (+ sticky footer, safe area) .f-tabbar ← books-mobile.css .tabbar (I had no bottom nav at all) ── STILL ORIGINAL HERE (nothing in the design project covers these) ── focus rings · validation + error states · tables · alerts + toasts · status badges · skeletons · dialog · empty states · definition lists · sub-navigation · avatars · file upload · the whole email system. ── WHY THE `f-` PREFIX SURVIVES ────────────────────────────────────── The comps are standalone pages, so unprefixed names are safe there. In the storefront they are not: the legacy Bootstrap 5.3 bundle stays loaded during a page-by-page rollout, and the comps use `.card`, `.bar`, `.chip`, `.pill`, `.flag`, `.tab`, `.row`, `.close` — all of which Bootstrap also defines. Same visual spec, collision-proof selector. Drop the prefix only after Bootstrap leaves the . ── ONE INCONSISTENCY TO RESOLVE ────────────────────────────────────── The design files disagree on where tokens live: books-pdp/checkout/category declare them on `.f`, while books-home/mobile declare them on `body` and add two more (--acc-lt, --gold) that the others lack. This file takes the union and puts it on `.f`, which is what the OFBiz decorator can actually stamp. ═══════════════════════════════════════════════════════════════════ */ /* ─── 0. CANONICAL TOKENS — union of all five design files ─────────── */ .f{ --ink:#14161a; --mut:#6b7076; --line:#e7e5e1; --surf:#f7f5f2; --acc:#1d5c4f; --acc-lt:#8fbdae; --sale:#a8352a; --gold:#c8871f; /* additions this file needs and the comps do not define */ --focus:#1d5c4f; --focus-invert:#ffffff; --warn:#8a5d10; /* --gold is 2.9:1 on white: fine as a dot, not as text */ --err:#a8352a; --err-surf:#fdf3f2; --ok-surf:#e9f1ee; --warn-surf:#fbf1e0; --disabled-ink:#9b978f; --disabled-surf:#f2f0ed; --field-line:#c8c4bd; /* the comps' control border, distinct from --line */ color:var(--ink); } /* ─── 1. FOCUS + A11Y ────────────────────────────────────────────────── The comps' `.fld.focus` is `border-color:ink` + a 3px ring at 7% opacity. That reads as a nice active-fill but it is roughly 1.1:1 against white — it cannot serve as the focus indicator on its own (WCAG 2.4.11 needs 3:1). So: keep their fill, and layer a real ring on top of it. ──────────────────────────────────────────────────────────────────── */ .f a:focus-visible,.f button:focus-visible,.f [tabindex]:focus-visible, .f-input:focus-visible,.f-select:focus-visible,.f-textarea:focus-visible, .f-check input:focus-visible + .f-check-box, .f-radio input:focus-visible + .f-radio-dot, .f-option input:focus-visible + .f-radio-dot{ outline:2px solid var(--focus);outline-offset:2px;border-radius:3px; } .f-btn-primary:focus-visible,.f-btn-dark:focus-visible,.f .abar a:focus-visible, .f-tabbar a:focus-visible{outline-color:var(--focus-invert);outline-offset:-3px} @media (forced-colors:active){ .f a:focus-visible,.f button:focus-visible,.f-input:focus-visible{outline:2px solid CanvasText} } .f-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .f-skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 4px 4px;font-size:13.5px;font-weight:800;transition:top .12s} .f-skip:focus{top:0} @media (prefers-reduced-motion:reduce){ .f *,.f *::before,.f *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ─── 2. BUTTONS ─────────────────────────────────────────────────────── Sizes aligned to the comps: checkout's `.place` is a 17px-padded accent pill at 16px/800; `.add` is an ink pill at 13.5px/800. ──────────────────────────────────────────────────────────────────── */ .f-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:"Manrope",system-ui,sans-serif;font-size:13.5px;font-weight:800;line-height:1; padding:14px 24px;border-radius:100px;border:1.5px solid transparent; cursor:pointer;text-align:center;white-space:nowrap; transition:background-color .13s,border-color .13s,color .13s; } .f-btn svg{width:17px;height:17px;flex:none} .f-btn:hover{opacity:1} .f-btn-primary{background:var(--acc);color:#fff} .f-btn-primary:hover{background:#17493e} .f-btn-dark{background:var(--ink);color:#fff} .f-btn-dark:hover{background:#000} .f-btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)} .f-btn-secondary:hover{border-color:var(--ink);background:var(--surf)} .f-btn-ghost{background:none;color:var(--ink);border-color:transparent;padding-inline:12px} .f-btn-ghost:hover{background:var(--surf)} .f-btn-danger{background:#fff;color:var(--err);border-color:#e6cbc7} .f-btn-danger:hover{background:var(--err);color:#fff;border-color:var(--err)} /* `.place` — the one-per-page order CTA */ .f-btn-place{font-size:16px;padding:17px 28px} .f-btn-sm{font-size:12px;padding:9px 16px;gap:6px} .f-btn-sm svg{width:14px;height:14px} .f-btn-block{display:flex;width:100%} .f-btn:disabled,.f-btn[aria-disabled="true"]{background:var(--disabled-surf);color:var(--disabled-ink);border-color:transparent;cursor:not-allowed} .f-btn:disabled:hover{background:var(--disabled-surf)} .f-btn.is-loading{position:relative;color:transparent!important;pointer-events:none} .f-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid currentColor;border-top-color:transparent;border-radius:100px;color:#fff;animation:f-spin .6s linear infinite} .f-btn-secondary.is-loading::after,.f-btn-ghost.is-loading::after{color:var(--ink)} @keyframes f-spin{to{transform:rotate(360deg)}} .f-link{font-size:13px;font-weight:700;color:var(--ink);border-bottom:1.5px solid currentColor;padding-bottom:2px} .f-link-acc{color:var(--acc)} .f-link-quiet{color:var(--mut);border-bottom-color:var(--line);font-weight:600} /* ─── 3. FIELDS — adopted from books-checkout.css `.fld` ─────────────── The comp fakes the value with a `
`, which cannot submit or be typed into. This is the working version of the same visual: the label sits inside the box, the real replaces `.v`. ──────────────────────────────────────────────────────────────────── */ .f-fld{position:relative;border:1.5px solid var(--line);border-radius:5px;padding:9px 14px 8px;background:#fff;margin-bottom:12px;transition:border-color .13s,box-shadow .13s} .f-fld:hover{border-color:#cfcbc4} .f-fld:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,22,26,.07)} .f-fld > label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#a29d95;margin-bottom:2px} .f-fld .f-req{color:var(--err);margin-left:3px} .f-fld .f-opt{color:#b3aea6;margin-left:5px;text-transform:none;letter-spacing:0;font-weight:600} .f-input,.f-select,.f-textarea{ display:block;width:100%;border:0;padding:0;background:none;outline:none; font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4; } .f-input::placeholder,.f-textarea::placeholder{color:#b3aea6;font-weight:500} .f-textarea{min-height:62px;resize:vertical;padding-top:2px} .f-select{appearance:none;cursor:pointer;padding-right:24px} .f-fld-select::after{ content:"";position:absolute;right:14px;top:calc(50% + 4px);width:9px;height:9px;pointer-events:none; border-right:1.6px solid var(--mut);border-bottom:1.6px solid var(--mut);transform:translateY(-50%) rotate(45deg); } .f-fld .f-tick{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--acc)} /* rows — the comp's .r2 / .r3 / .r21 */ .f-r2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} .f-r3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0 12px} .f-r21{display:grid;grid-template-columns:2fr 1fr;gap:0 12px} /* states */ .f-fld.is-disabled{background:var(--disabled-surf);border-color:var(--disabled-surf)} .f-fld.is-disabled .f-input{color:var(--disabled-ink)} .f-fld:has([aria-invalid="true"]){border-color:var(--err);background:var(--err-surf)} .f-fld:has([aria-invalid="true"]):focus-within{box-shadow:0 0 0 3px rgba(168,53,42,.1)} .f-help{font-size:12.5px;color:var(--mut);line-height:1.5;margin:-6px 0 12px 2px} .f-error{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;font-weight:700;color:var(--err);line-height:1.45;margin:-6px 0 12px 2px} .f-error svg{width:14px;height:14px;flex:none;margin-top:1px} .f-ok{font-size:12.5px;font-weight:700;color:var(--acc);margin:-6px 0 12px 2px} /* field + adjacent action, e.g. promo code */ .f-fld-group{display:flex;gap:9px;margin-bottom:12px} .f-fld-group .f-fld{flex:1;margin-bottom:0} .f-fld-group .f-btn{border-radius:5px;padding-inline:22px} /* ─── 4. CHOICE CONTROLS — geometry from `.chk`/`.cb` and `.opt`/`.rad` ─ */ .f-check,.f-radio{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;line-height:1.45;margin-bottom:11px;cursor:pointer} .f-check input,.f-radio input{position:absolute;opacity:0;width:17px;height:17px;margin:0;cursor:pointer} .f-check-box{width:17px;height:17px;border:1.5px solid var(--field-line);border-radius:3px;flex:none;position:relative;background:#fff;margin-top:1px;transition:background-color .12s,border-color .12s} .f-check input:checked + .f-check-box{background:var(--acc);border-color:var(--acc)} .f-check input:checked + .f-check-box::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)} .f-check input:disabled + .f-check-box{background:var(--disabled-surf);border-color:var(--disabled-surf)} .f-radio-dot{width:17px;height:17px;border-radius:100px;border:1.5px solid var(--field-line);flex:none;margin-top:1px;background:#fff} .f-radio input:checked + .f-radio-dot, .f-option input:checked + .f-radio-dot{border:5px solid var(--ink)} .f-radio input:disabled + .f-radio-dot{border-color:var(--disabled-surf);background:var(--disabled-surf)} .f-check span.sub,.f-radio span.sub{display:block;color:var(--mut);font-weight:500;font-size:12.5px;margin-top:3px} /* option card — `.opt` */ .f-options{display:flex;flex-direction:column;gap:10px} .f-option{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--line);border-radius:5px;padding:14px 16px;background:#fff;cursor:pointer;position:relative;transition:border-color .13s,box-shadow .13s} .f-option:hover{border-color:#cfcbc4} .f-option:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,22,26,.06)} .f-option input{position:absolute;opacity:0;width:17px;height:17px;margin:0} .f-option b{display:block;font-size:14px;font-weight:700;margin-bottom:3px} .f-option span{display:block;font-size:12.5px;color:var(--mut);line-height:1.45} .f-option .f-price{margin-left:auto;font-size:14px;font-weight:800;white-space:nowrap;padding-left:14px} .f-option .f-price.free{color:var(--acc)} .f-option.is-disabled{opacity:.5;cursor:not-allowed} .f-fieldset{border:0;margin:0 0 20px;padding:0} .f-legend{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--acc);margin-bottom:13px;padding:0} /* ─── 5. STEP PANEL — `.step` + `.sh2` numbered circle ─────────────── */ .f-step{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line)} .f-step:last-of-type{border-bottom:0;margin-bottom:0} .f-step-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:16px} .f-step-head h3{font-size:17px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:11px} .f-step-n{font-family:"JetBrains Mono",monospace;font-size:11px;font-style:normal;font-weight:500;color:#fff;background:var(--ink);width:21px;height:21px;border-radius:100px;display:grid;place-items:center;flex:none} .f-step.is-done .f-step-n{background:var(--acc)} .f-step-head .f-aux{font-size:13px;font-weight:700;color:var(--acc);border-bottom:1.5px solid currentColor;padding-bottom:2px} .f-step-head .f-aux.plain{color:var(--mut);border:0;font-weight:600} /* ─── 6. PAYMENT TABS — `.paytabs`/`.pt` ──────────────────────────── */ .f-paytabs{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:5px;overflow:hidden} .f-pt{display:flex;gap:13px;align-items:center;padding:14px 16px;border-bottom:1.5px solid var(--line);font-size:14px;font-weight:700;background:#fff;cursor:pointer;position:relative} .f-pt:last-child{border-bottom:0} .f-pt:has(input:checked){background:var(--surf)} .f-pt input{position:absolute;opacity:0;width:17px;height:17px;margin:0} .f-pt .f-mini{font-size:12px;color:var(--mut);font-weight:600;margin-left:auto} .f-pt-body{padding:16px;background:var(--surf);border-bottom:1.5px solid var(--line);display:grid;gap:12px} .f-pt-body:last-child{border-bottom:0} .f-cards{display:flex;gap:6px;align-items:center;margin-left:auto} .f-cards span{border:1px solid var(--line);border-radius:3px;padding:3px 7px;font-size:9px;font-weight:800;letter-spacing:.04em;background:#fff;color:var(--mut)} /* Stripe mounts a cross-origin iframe here — no CSS reaches inside it. */ .f-stripe-mount{border:1.5px dashed #cfcabf;border-radius:5px;padding:22px;text-align:center;font-size:12.5px;color:var(--mut);background:#fff} /* ─── 7. SUMMARY LINE + TOTALS — `.li`, `.tot`/`.tr`/`.grand` ─────── */ .f-sumline{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:start;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)} .f-sumline:last-of-type{border-bottom:0} .f-sumline .f-qb{position:relative} .f-sumline .f-qbadge{position:absolute;top:-7px;right:-7px;background:var(--ink);color:#fff;width:20px;height:20px;border-radius:100px;display:grid;place-items:center;font-size:11px;font-weight:800;z-index:2} .f-sumline .t{font-size:13.5px;font-weight:700;line-height:1.3;margin-bottom:3px} .f-sumline .a{font-size:12px;color:var(--mut);margin-bottom:5px} .f-sumline .m{font-size:11.5px;color:#8d8880;font-weight:600} .f-sumline .p{font-size:13.5px;font-weight:800;white-space:nowrap;text-align:right} .f-sumline .p s{display:block;font-size:11.5px;color:var(--mut);font-weight:600;margin-top:2px} .f-totals{display:flex;flex-direction:column;gap:11px;padding-top:20px;border-top:1px solid var(--line)} .f-tr{display:flex;justify-content:space-between;gap:20px;font-size:13.5px;font-weight:600;color:var(--mut)} .f-tr b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} .f-tr.disc b{color:var(--acc)} .f-grand{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:16px;margin-top:5px;border-top:1px solid var(--line);font-size:15px;font-weight:800} .f-grand .cur{font-size:12px;color:var(--mut);font-weight:700;margin-right:6px} .f-grand .amt{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} /* applied promo chip — `.applied` */ .f-applied{display:flex;align-items:center;gap:9px;background:var(--ok-surf);border:1px solid #c9ded7;border-radius:5px;padding:10px 13px;font-size:12.5px;font-weight:700;color:var(--acc);margin-bottom:20px} .f-applied svg{width:15px;height:15px;flex:none} .f-applied button{margin-left:auto;color:var(--mut);font-size:15px;line-height:1} /* ─── 8. EDITABLE CART LINE ──────────────────────────────────────────── The summary line above is read-only. The cart needs qty + remove. The live cart is a card stack, not a table — do not build it as one. ──────────────────────────────────────────────────────────────────── */ .f-lineitem{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;gap:20px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)} .f-lineitem:last-child{border-bottom:0} .f-lineitem .bk{margin:0} .f-lineitem-t{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:3px} .f-lineitem-a{font-size:13px;color:var(--mut);margin-bottom:8px} .f-lineitem-m{font-size:12.5px;color:var(--mut);line-height:1.55} .f-lineitem-price{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .f-lineitem-price s{display:block;font-size:12.5px;color:var(--mut);font-weight:600;margin-bottom:2px} .f-lineitem-price b{display:block;font-size:16px;font-weight:800} /* Only render when there IS a saving — the live template prints "You save $0.00" on every full-price line because it sits outside its conditional. */ .f-lineitem-save{display:block;font-size:12px;color:var(--acc);font-weight:700;margin-top:3px} .f-lineitem-act{display:flex;flex-direction:column;gap:8px;align-items:flex-end} .f-qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:100px;overflow:hidden} .f-qty button{width:34px;height:36px;font-size:16px;color:var(--mut);display:grid;place-items:center} .f-qty button:hover:not(:disabled){background:var(--surf);color:var(--ink)} .f-qty button:disabled{color:#cfcbc4;cursor:not-allowed} .f-qty input{width:40px;height:36px;border:0;text-align:center;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);-moz-appearance:textfield} .f-qty input::-webkit-outer-spin-button,.f-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} @media(max-width:720px){ .f-lineitem{grid-template-columns:64px minmax(0,1fr);gap:14px} .f-lineitem-price{grid-column:2;text-align:left} .f-lineitem-price b,.f-lineitem-price s{display:inline;margin-right:8px} .f-lineitem-act{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between} .f-r2,.f-r3,.f-r21{grid-template-columns:1fr} } /* ─── 9. MESSAGES — original; nothing in the comps covers alerts ───── */ .f-alert{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-left-width:4px;border-radius:5px;padding:14px 18px;margin-bottom:16px;font-size:13.5px;line-height:1.55} .f-alert svg{width:18px;height:18px;flex:none;margin-top:1px} .f-alert b{display:block;font-weight:800;margin-bottom:3px} .f-alert p{margin:0;color:#3f4348} .f-alert-close{margin-left:auto;flex:none;color:var(--mut);font-size:18px;line-height:1;padding:0 2px} .f-alert-error{border-color:#e6cbc7;border-left-color:var(--err);background:var(--err-surf)} .f-alert-error svg{color:var(--err)} .f-alert-ok{border-color:#c9ded7;border-left-color:var(--acc);background:var(--ok-surf)} .f-alert-ok svg{color:var(--acc)} .f-alert-warn{border-color:#ecdcbc;border-left-color:var(--gold);background:var(--warn-surf)} .f-alert-warn svg{color:var(--warn)} .f-alert-info{border-color:var(--line);border-left-color:var(--mut);background:var(--surf)} .f-alert-info svg{color:var(--mut)} .f-toasts{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:10px;max-width:340px} .f-toast{display:flex;gap:11px;align-items:flex-start;background:var(--ink);color:#fff;border-radius:5px;padding:14px 16px;font-size:13.5px;line-height:1.5;box-shadow:0 12px 34px rgba(0,0,0,.24)} .f-toast svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--acc-lt)} .f-toast b{font-weight:800} /* Section overlay — checkout fills 3 of its 4 panels by AJAX. */ .f-loading{position:relative;min-height:110px} .f-loading-veil{position:absolute;inset:0;z-index:3;border-radius:inherit;background:rgba(255,255,255,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:13px;font-weight:700;color:var(--mut)} .f-loading-veil::before{content:"";width:24px;height:24px;border-radius:100px;border:2.5px solid var(--line);border-top-color:var(--acc);animation:f-spin .7s linear infinite} .f-loading-veil[hidden]{display:none} /* ─── 10. BADGES, TAGS, CHIPS ──────────────────────────────────────── */ .f-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:100px;background:var(--surf);color:var(--mut);white-space:nowrap} .f-badge::before{content:"";width:6px;height:6px;border-radius:100px;background:currentColor;flex:none} .f-badge-ok{background:var(--ok-surf);color:var(--acc)} .f-badge-warn{background:var(--warn-surf);color:var(--warn)} .f-badge-err{background:var(--err-surf);color:var(--err)} .f-badge-flat::before{display:none} /* `.tag` — section kicker from books-home.css */ .f-tag{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:5px 9px;border-radius:3px;background:var(--surf);color:var(--acc)} .f-tag.hot{background:#fbecea;color:var(--sale)} .f-tag.gold{background:#fbf1e0;color:#8a5a12} /* `.chip` — active filters */ .f-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .f-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surf);border:1px solid var(--line);border-radius:100px;padding:7px 13px;font-size:12.5px;font-weight:700} .f-chip button{color:var(--mut);font-size:14px;line-height:1} .f-chip.clear{background:none;border:0;color:var(--acc);font-weight:800;text-decoration:underline;text-underline-offset:3px} /* ─── 11. TABLES — original; only order history and saved cards are genuinely tabular. Cart and order detail are card rows. ─────────── */ .f-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .f-table{width:100%;border-collapse:collapse;font-size:13.5px} .f-table caption{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--acc);padding-bottom:12px} .f-table th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:0 16px 11px 0;border-bottom:1.5px solid var(--line);white-space:nowrap} .f-table td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top} .f-table tr:last-child td{border-bottom:0} .f-table th:last-child,.f-table td:last-child{padding-right:0} .f-table .f-num{text-align:right;font-variant-numeric:tabular-nums} .f-table-zebra tbody tr:nth-child(odd){background:#fbfaf9} /* ─── 12. PAGINATION — `.pager`, bordered pills ───────────────────── */ .f-pager{display:flex;align-items:center;justify-content:center;gap:8px;padding:44px 0 6px} .f-pager a,.f-pager span{min-width:38px;height:38px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:100px;font-size:13.5px;font-weight:700;padding:0 12px} .f-pager a:hover{border-color:var(--ink);opacity:1} .f-pager .is-current{background:var(--ink);border-color:var(--ink);color:#fff} .f-pager .is-gap{border:0;color:var(--mut)} .f-pager-meta{font-size:13px;color:var(--mut);font-weight:600;text-align:center} /* ─── 13. PANELS, EMPTY, SKELETON — original ──────────────────────── */ .f-panel{border:1.5px solid var(--line);border-radius:5px;padding:24px} .f-panel-quiet{background:var(--surf);border-color:transparent} .f-empty{text-align:center;padding:56px 24px;max-width:440px;margin:0 auto} .f-empty svg{width:40px;height:40px;color:#c9c5be;margin-bottom:18px} .f-empty h3{font-family:"Newsreader",serif;font-size:26px;font-weight:500;letter-spacing:-.02em;margin-bottom:8px} .f-empty p{font-size:14.5px;color:var(--mut);line-height:1.6;margin-bottom:22px} .f-skel{background:linear-gradient(90deg,#f0eeea 25%,#f7f5f2 37%,#f0eeea 63%);background-size:400% 100%;animation:f-shimmer 1.4s ease infinite;border-radius:3px} @keyframes f-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}} .f-skel-bk{aspect-ratio:2/3;border-radius:2px;margin-bottom:12px} .f-skel-line{height:11px;margin-bottom:7px} .f-skel-line.w60{width:60%} .f-skel-line.w40{width:40%} /* ─── 14. MOBILE NAV — drawer + tab bar, from books-mobile.css ────── */ .f-navtoggle{display:none;width:44px;height:44px;place-items:center;margin:-6px} .f-navtoggle svg{width:22px;height:22px} .f-scrim{position:fixed;inset:0;background:rgba(20,22,26,.45);z-index:80;opacity:0;pointer-events:none;transition:opacity .22s} .f-scrim.is-open{opacity:1;pointer-events:auto} .f-drawer{position:fixed;top:0;bottom:0;left:0;width:86%;max-width:340px;background:#fff;z-index:90;transform:translateX(-100%);transition:transform .26s cubic-bezier(.3,.7,.4,1);display:flex;flex-direction:column;overflow-y:auto} .f-drawer.is-open{transform:none} .f-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 16px;border-bottom:1px solid var(--line)} .f-dsec{padding:16px 18px;border-bottom:1px solid var(--line)} .f-dsec h5{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);margin-bottom:13px} .f-dsec ul{list-style:none;display:flex;flex-direction:column;gap:2px} .f-dsec li a{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:15px;font-weight:600;min-height:44px} .f-dsec li a b{color:#a9a49c;font-weight:700;font-size:11.5px} .f-dsec li a.hot{color:var(--sale);font-weight:800} /* sticky drawer footer — the comp's `.dfoot`, which my first pass lacked */ .f-dfoot{padding:14px 18px calc(14px + env(safe-area-inset-bottom));margin-top:auto;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 18px rgba(20,22,26,.07)} /* bottom tab bar — the comp's `.tabbar`; I had no bottom nav at all */ .f-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:8px 0 max(10px,env(safe-area-inset-bottom))} .f-tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--mut);min-height:48px;justify-content:center;position:relative} .f-tab svg{width:22px;height:22px} .f-tab.is-current{color:var(--ink)} .f-tab b{position:absolute;top:-2px;right:calc(50% - 20px);background:var(--sale);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:100px;display:grid;place-items:center;padding:0 4px} /* footer accordion — the comp's `.acc` */ .f-acc{border-bottom:1px solid var(--line)} .f-acc-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;font-size:13.5px;font-weight:800;text-align:left} .f-acc-btn svg{width:16px;height:16px;color:var(--mut);transition:transform .18s;flex:none} .f-acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)} .f-acc-body{padding:0 0 18px;font-size:13.5px;line-height:1.65;color:#3f4348} .f-acc-btn[aria-expanded="false"] + .f-acc-body{display:none} @media(max-width:900px){.f-navtoggle{display:grid}} /* ─── 14b. MEGA-MENU — adopted from books-category.css `.mega` ──────── The comp shows the panel permanently open on a static page. This is the same spec as a real dropdown: hover + click + keyboard, one panel at a time, Escape to close. ──────────────────────────────────────────────────────────────────── */ .f-meganav{position:relative} .f-mega{ position:absolute;left:0;right:0;top:100%;z-index:50; background:#fff;border-bottom:1px solid var(--line); box-shadow:0 24px 44px rgba(0,0,0,.09); } .f-mega[hidden]{display:none} .f-mega-in{padding:30px 0 34px} .f-mega h5{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);margin-bottom:15px} .f-mega-grid{display:grid;gap:26px 34px} .f-mega-grid ul{list-style:none;margin:0;padding:0} .f-mega-grid li{margin-bottom:10px;font-size:13.5px;font-weight:600;line-height:1.35} .f-mega-grid li a:hover{color:var(--acc);opacity:1} .f-mega-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px} /* column counts per tab — set inline per panel via a modifier */ .f-mega-c1{grid-template-columns:minmax(0,1fr)} .f-mega-c2{grid-template-columns:repeat(2,minmax(0,1fr))} .f-mega-c4{grid-template-columns:repeat(4,minmax(0,1fr))} .f .gv a[aria-expanded="true"]{color:var(--acc)} @media(max-width:900px){ .f-mega{display:none!important} } /* ─── 15. DIALOG — original ───────────────────────────────────────── */ .f-dialog{border:0;border-radius:7px;padding:0;max-width:min(92vw,520px);width:100%;box-shadow:0 30px 80px rgba(0,0,0,.3);color:var(--ink)} .f-dialog::backdrop{background:rgba(20,22,26,.45)} .f-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 0} .f-dialog-head h3{font-family:"Newsreader",serif;font-size:24px;font-weight:500;letter-spacing:-.02em} .f-dialog-body{padding:18px 26px;font-size:14px;line-height:1.6;color:#3f4348} .f-dialog-foot{display:flex;gap:10px;justify-content:flex-end;padding:0 26px 24px} @media(max-width:520px){.f-dialog-foot{flex-direction:column-reverse}.f-dialog-foot .f-btn{width:100%}} /* ─── 16. ACCOUNT ODDS AND ENDS — original ────────────────────────── */ .f-subnav{display:flex;flex-direction:column;gap:2px} .f-subnav a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:5px;font-size:13.5px;font-weight:600;color:var(--mut)} .f-subnav a:hover{background:var(--surf);color:var(--ink);opacity:1} .f-subnav a.is-current{background:var(--surf);color:var(--ink);font-weight:800} .f-subnav svg{width:16px;height:16px;flex:none} .f-dl{margin:0} .f-dl div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px} .f-dl div:last-child{border-bottom:0} .f-dl dt{color:var(--mut);font-weight:600;margin:0} .f-dl dd{margin:0;font-weight:700;text-align:right} .f-addr{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:5px;padding:16px 18px;margin-bottom:10px} .f-addr:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,22,26,.06)} .f-addr-body{min-width:0;flex:1} .f-addr-body b{display:block;font-weight:700;font-size:14px;margin-bottom:4px} .f-addr-body address{font-style:normal;font-size:13px;line-height:1.6;color:var(--mut)} .f-avatar{width:38px;height:38px;border-radius:100px;background:var(--surf);display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--acc);flex:none} .f-avatar-lg{width:56px;height:56px;font-size:19px} .f-chipid{display:flex;align-items:center;gap:11px} .f-chipid b{display:block;font-size:14px;font-weight:700} .f-chipid span{display:block;font-size:12.5px;color:var(--mut)} .f-menu{min-width:240px;background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:0 14px 40px rgba(0,0,0,.14);padding:8px} .f-menu a,.f-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:4px;font-size:13.5px;font-weight:600;text-align:left} .f-menu a:hover,.f-menu button:hover{background:var(--surf);opacity:1} .f-menu svg{width:16px;height:16px;color:var(--mut);flex:none} .f-menu hr{border:0;border-top:1px solid var(--line);margin:8px 4px} .f-menu-head{padding:10px 12px 12px;font-size:12px;color:var(--mut);font-weight:600} .f-menu-foot{border-top:1px solid var(--line);margin-top:8px;padding:12px} .f-suggest a{gap:12px;padding:9px 12px;align-items:flex-start} .f-suggest .bk{width:34px;flex:none;box-shadow:none;border:1px solid var(--line)} .f-suggest .s-t{font-size:13.5px;font-weight:700;line-height:1.3} .f-suggest .s-a{font-size:12px;color:var(--mut);line-height:1.4;margin-top:2px} /* Keyboard highlight, deliberately distinct from :hover so arrowing through the list is visible even while the pointer sits over a different row. */ .f-suggest a.is-active,.f-suggest a.is-active:hover{background:var(--surf);opacity:1;box-shadow:inset 2px 0 0 var(--acc)} .f-suggest-msg{padding:14px 12px;font-size:13px;color:var(--mut);font-weight:600} .f-suggest-msg.err{color:var(--err)} /* The search box owns the dropdown, so it needs a positioning context. */ .f .srch{position:relative} .f-suggest-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;max-height:min(70vh,520px);overflow-y:auto} .f-suggest-panel[hidden]{display:none} @media(max-width:720px){.f-suggest-panel{left:-8px;right:-8px}} .f-file input[type=file]{font-size:13px;color:var(--mut);border:1.5px dashed var(--line);border-radius:5px;padding:12px 14px;width:100%} .f-file input[type=file]::file-selector-button{font:inherit;font-weight:800;font-size:12.5px;background:var(--surf);color:var(--ink);border:0;border-radius:100px;padding:8px 16px;margin-right:12px;cursor:pointer}