/* Abacross store -- page-specific styles. Reuses the brand variables from main.css. Responsive grid uses auto-fill + min-width:0 so cards never overflow and collapse to a single column on narrow screens by construction (the mistake the tools section made was shrinkable flex with no single-column rule). No inline styles; CSP-safe. */ #store { padding: 60px 0 90px; background: radial-gradient(circle at top, #1c2128 0%, var(--bg-deep) 100%); } #store .inner { max-width: 1100px; } .store-head { text-align: center; margin-bottom: 3rem; } .store-head h1 { font-size: 2.6rem; line-height: 1.15; margin-bottom: 1rem; } .store-head h1 span { color: var(--brand-blue); } .store-head p { max-width: 680px; margin: 0 auto; color: var(--text-primary); } .store-trust { margin-top: 1rem !important; font-size: 0.8rem; color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: 0.05em; } /* --- Product grid --- */ /* auto-fit rather than auto-fill, with a capped track and a centred grid, so the store looks deliberate at any product count. auto-fill keeps the empty tracks, which left the single remaining product sitting at a third width with dead space beside it. The 420px cap stops one product stretching the full container instead. */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); justify-content: center; gap: 1.5rem; margin-bottom: 4rem; } .product-card { display: flex; flex-direction: column; min-width: 0; /* let content wrap, never overflow the card */ background: var(--bg-lift); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 2rem; } .product-card:hover { border-color: var(--brand-blue); } .product-badge { align-self: flex-start; color: var(--brand-blue); background: var(--brand-glow); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.3rem 0.6rem; border-radius: 3px; margin-bottom: 1rem; } .product-title { font-size: 1.3rem; line-height: 1.25; margin-bottom: 0.75rem; } .product-desc { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 1.25rem; } .product-features { list-style: none; padding: 0; margin: 0 0 1.5rem; } .product-features li { position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; font-size: 0.88rem; color: var(--text-primary); line-height: 1.5; } .product-features li::before { content: "\2713"; /* check mark */ position: absolute; left: 0; top: 0; color: var(--brand-blue); font-weight: 700; } .product-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; /* pin price + buy to the card bottom */ padding-top: 0.5rem; } .product-price { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .product-buy { padding: 0.7rem 1.6rem !important; font-size: 0.9rem; white-space: nowrap; } .product-meta { margin: 0.9rem 0 0; font-size: 0.72rem; color: var(--text-muted); } /* --- How it works --- */ .store-faq { border-top: 1px solid var(--border-subtle); padding-top: 3rem; } .store-faq > h2 { text-align: center; font-size: 1.4rem; margin-bottom: 2rem; } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; } .faq-item { text-align: center; min-width: 0; } .faq-item .icon-box { font-size: 2.5rem; margin-bottom: 1rem; } .faq-item h4 { margin-bottom: 0.5rem; } .faq-item p { color: var(--text-muted); font-size: 0.88rem; margin: 0; } .faq-item a { color: var(--brand-blue); font-weight: 600; } .faq-item a:hover { text-decoration: underline; } /* On touch devices :hover sticks after a tap; keep the border highlight subtle. */ @media (hover: none) { .product-card:hover { border-color: var(--border-subtle); } } @media screen and (max-width: 600px) { .store-head h1 { font-size: 2rem; } .product-card { padding: 1.75rem 1.5rem; } }