/* 1stBookstore — visual language from the Modernist design system. All colors, type and spacing reference its tokens; nothing hard-coded. Archivo is loaded via in each page's , not @import here (an @import blocks CSS parsing until it resolves). */ /* Override the design system's default red accent ramp with green, so every var(--color-accent*) reference — ours and the design system's own components — resolves green instead. */ :root{ --color-accent:#3c9647; --color-accent-2:#3c9647; --color-accent-100:#eef7ef; --color-accent-200:#d3ecd7; --color-accent-300:#aedcb6; --color-accent-400:#82c78e; --color-accent-500:#3c9647; --color-accent-600:#348039; --color-accent-700:#2d6930; --color-accent-800:#204d23; --color-accent-900:#153317; --color-accent-2-100:#eef7ef; --color-accent-2-200:#d3ecd7; --color-accent-2-300:#aedcb6; --color-accent-2-400:#82c78e; --color-accent-2-500:#3c9647; --color-accent-2-600:#348039; --color-accent-2-700:#2d6930; --color-accent-2-800:#204d23; --color-accent-2-900:#153317; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--color-bg);color:var(--color-text); font-family:var(--font-body,'Archivo',sans-serif); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility } h1,h2,h3,h4{font-family:var(--font-heading,'Archivo',sans-serif);font-weight:800;letter-spacing:-.01em;margin:0;text-wrap:pretty} p{margin:0 0 12px;text-wrap:pretty} a{color:var(--color-accent-700,#2d7536);text-decoration:none} a:hover{color:var(--color-accent,#3c9647)} img{max-width:100%;display:block} ul,ol{margin:0} button{font-family:inherit} .wrap{max-width:1240px;margin:0 auto;padding-inline:28px} .small{font-size:13px} .muted{opacity:.68} .rule{border:0;height:0;margin:0} .hr,.rule-h{border:0;border-top:2px solid var(--color-divider,#d5d4d4)} .section{padding-block:56px} .btn{ display:inline-flex;align-items:center;justify-content:flex-start;gap:8px; padding:12px 20px;font-weight:700;font-size:14px;letter-spacing:.01em; border:2px solid var(--color-text);background:var(--color-text);color:var(--color-bg); border-radius:0;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s } .btn:hover{background:var(--color-accent-700,#2d7536);border-color:var(--color-accent-700,#2d7536);color:#fff} .btn-2{background:transparent;color:var(--color-text);border:2px solid var(--color-text)} .btn-2:hover{background:var(--color-text);color:var(--color-bg)} .btn-accent{background:var(--color-accent,#3c9647);border-color:var(--color-accent,#3c9647);color:#fff} .btn-accent:hover{background:var(--color-accent-700,#2d7536);border-color:var(--color-accent-700,#2d7536)} .btn-block{width:100%;justify-content:center} .btn-icon{padding:10px} .tag{display:inline-flex;padding:4px 9px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:0} .tag-accent{background:var(--color-accent,#3c9647);color:#fff} .tag-outline{border:2px solid var(--color-text);color:var(--color-text)} .flash{background:var(--color-accent,#3c9647);color:#fff} .site-header{border-bottom:2px solid var(--color-divider,#d5d4d4);position:sticky;top:0;background:#ffffff;z-index:40} .site-header .wrap{display:flex;align-items:center;gap:24px;height:78px} .brand{font-family:var(--font-heading,'Archivo',sans-serif);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--color-text)} .brand span{color:var(--color-accent,#3c9647)} .nav{display:flex;gap:22px;flex:1;margin-left:12px;border-bottom:none} .nav a{font-weight:600;font-size:14.5px;color:var(--color-text);text-decoration:none;border-bottom:none} .nav a:hover,.nav a[aria-current]{color:var(--color-accent-700,#2d7536)} .utils{display:flex;align-items:center;gap:10px} .searchbox{display:flex;align-items:center;gap:6px;border:2px solid var(--color-divider,#d5d4d4);padding:8px 12px} .searchbox input{border:0;background:transparent;font-size:14px;width:150px;outline:0;color:var(--color-text)} .navtoggle{display:none} .salebar{background:var(--color-text);color:var(--color-bg);font-size:13px;font-weight:600} .salebar .wrap{display:flex;justify-content:center;gap:14px;padding-block:8px;flex-wrap:wrap;text-align:center} .salebar .note{opacity:.72;font-weight:500} .site-footer{background:#ffffff;border-top:2px solid var(--color-divider,#d5d4d4);margin-top:24px} .site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding-block:48px 28px} .site-footer h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px} .site-footer a{display:block;color:var(--color-text);opacity:.75;font-size:14px;margin-bottom:8px} .site-footer a:hover{opacity:1;color:var(--color-accent-700,#2d7536)} .site-footer input{border:2px solid var(--color-divider,#d5d4d4);padding:10px 12px;font-size:14px;flex:1;background:transparent;color:var(--color-text)} .site-footer .base{display:flex;justify-content:space-between;gap:14px;border-top:2px solid var(--color-divider,#d5d4d4);padding-block:16px;font-size:12px;opacity:.6;flex-wrap:wrap} .grid{display:grid;gap:24px} .card{display:block;color:inherit;position:relative} /* Ebook cover ratio: 1:1.6 (the same ratio Amazon/Kindle recommend — 1600x2560px — and what most EPUB/PDF covers ship at). Used everywhere a cover shows: shop grid, best sellers, hero, product page. */ .cshot{position:relative;aspect-ratio:1/1.6;background:var(--color-surface,#eae9e9);overflow:hidden} .cshot img{width:100%;height:100%;object-fit:cover} .cover-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:14px} .cover-fallback{font-size:12px;font-weight:600;opacity:.5;position:relative;z-index:0} .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-top:10px} .name{font-weight:700;font-size:15.5px} .cat{font-size:12px;opacity:.62} .price{font-weight:800;font-size:15px} .price .was{font-weight:600;opacity:.5;text-decoration:line-through;margin-right:6px;font-size:13px} .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px} .filters button{border:2px solid var(--color-divider,#d5d4d4);background:transparent;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--color-text)} .filters button[aria-pressed="true"]{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)} .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-block:52px 40px} .hero h1{font-size:52px;line-height:1.02} .hero p{font-size:17px;max-width:46ch;margin-top:14px} .hero .stats{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap} .hero .stats div{display:flex;flex-direction:column} .hero .stats b{font-size:20px} .hero .stats span{font-size:12px;opacity:.62} .hero .actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} .herolink{display:block;position:relative} .herostage{position:relative;aspect-ratio:1/1.6;background:var(--color-surface,#eae9e9);border:2px solid var(--color-divider,#d5d4d4);display:flex;align-items:center;justify-content:center} .herostage img{width:100%;height:100%;object-fit:cover} .herolink .cap{position:absolute;left:16px;bottom:16px;background:#fff;padding:10px 14px;border:2px solid var(--color-text)} .herolink .cap b{display:block;font-size:14px} .herolink .cap span{font-size:12px;opacity:.65} .pshot{aspect-ratio:1/1.6;background:var(--color-surface,#eae9e9);border:2px solid var(--color-divider,#d5d4d4);display:flex;align-items:center;justify-content:center} .pshot img{width:100%;height:100%;object-fit:cover} .pgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;padding-block:44px 24px;align-items:start} .pricebar{display:flex;align-items:baseline;gap:12px;margin:20px 0} .pricebar .big{font-size:32px;font-weight:800} .bwas{font-size:16px;opacity:.5;text-decoration:line-through} .incl-note{font-size:13.5px;opacity:.68;margin-top:-6px} .legend{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;margin:26px 0 10px;color:var(--color-accent-700,#2d7536)} .opt{display:flex;justify-content:space-between;gap:12px;align-items:center;border:2px solid var(--color-divider,#d5d4d4);padding:12px 14px;color:inherit} .opt:hover{border-color:var(--color-text)} .opt b{display:block;font-size:14.5px} .opt em{font-style:normal;font-size:12.5px;opacity:.62} .opt .p{font-weight:800;font-size:14px;white-space:nowrap} .table{width:100%;border-collapse:collapse;font-size:14px} .table th{text-align:left;border-bottom:2px solid var(--color-text);padding:8px 10px;font-weight:800;letter-spacing:.02em} .table td{border-bottom:2px solid var(--color-divider,#d5d4d4);padding:8px 10px} .jshot{aspect-ratio:16/9;background:var(--color-surface,#eae9e9);overflow:hidden} .crumbs{font-size:12.5px;opacity:.6;margin-bottom:14px} .crumbs a{color:inherit} @media (max-width:900px){ .hero{grid-template-columns:1fr} .pgrid{grid-template-columns:1fr} .site-footer .cols{grid-template-columns:1fr 1fr} .nav{display:none} .navtoggle{display:inline-flex} }