/* Compute Supply Co. storefront identity. Commerce and admin logic stay in the existing app. */
.csc-store { background:#fff; color:#222; }
.csc-store::before { display:none; }
.csc-store .wrap,.csc-header .wrap { width:min(1360px,calc(100% - 64px)); }
.csc-header { position:relative; background:#fff; border:0; backdrop-filter:none; box-shadow:none; color:#222; }
.csc-utility { background:#a71930; color:#fff; font-size:10px; letter-spacing:.1em; font-weight:600; }
.csc-utility .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:30px; }
.csc-utility a { letter-spacing:0; font-size:11px; }
.csc-masthead { display:grid; grid-template-columns:280px minmax(200px,1fr) auto; gap:48px; align-items:center; min-height:114px; }
.csc-wordmark { display:block; background:#080808; }
.csc-wordmark img { display:block; width:100%; height:auto; }
.csc-search { display:flex; align-items:center; border:1px solid #dedede; background:#f7f7f6; border-radius:3px; padding:0 8px 0 18px; }
.csc-search input { min-width:0; flex:1; width:100%; border:0; background:transparent; color:#222; padding:15px 0; font-size:13px; box-shadow:none; }
.csc-search button { display:grid; place-items:center; width:40px; height:40px; border:0; background:transparent; color:#a71930; cursor:pointer; }
.csc-search svg,.csc-cart svg { width:22px; height:22px; }
.csc-header svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.csc-header button,.csc-header button:hover { box-shadow:none; transform:none; }
.csc-cart { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }
.csc-cart b { display:inline-grid; place-items:center; background:#f6edef; color:#a71930; min-width:22px; height:22px; border-radius:50%; margin-left:5px; }
.csc-header .menu-toggle { display:none; }
.csc-navigation { border-top:1px solid #ececec; border-bottom:1px solid #dedede; }
.csc-header .nav-links { min-height:49px; display:flex; justify-content:flex-start; gap:32px; overflow:visible; }
.csc-header .nav-links a { color:#373737; font-size:12px; font-weight:600; padding:16px 0 14px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; box-shadow:none; }
.csc-header .nav-links a:hover,.csc-header .nav-links a.active { color:#a71930; border-bottom-color:#a71930; background:none; }
.csc-header .nav-links .csc-nav-contact { margin-left:auto; }
.csc-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.csc-store .button { font-weight:600; font-size:13px; border-radius:3px; padding:13px 19px; box-shadow:none; }
.csc-store .button.muted { background:#fff; color:#a71930; border:1px solid #dcdcdc; }
.csc-store .button.muted:hover { background:#f6edef; border-color:#a71930; }
.csc-intro { background:#f6f5f2; border-bottom:1px solid #e7e5e0; }
.csc-intro-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; padding-top:64px; padding-bottom:64px; }
.csc-kicker { font-size:10px; line-height:1.5; letter-spacing:.12em; font-weight:700; color:#8c182c; margin:0 0 18px; }
.csc-kicker>span { display:inline-block; width:6px; height:6px; background:#a71930; margin-right:8px; vertical-align:2px; }
.csc-intro h1 { font-size:clamp(36px,4.3vw,64px); line-height:1.05; letter-spacing:-.055em; font-weight:650; margin:0 0 24px; max-width:680px; }
.csc-intro h1 em { color:#a71930; font-style:normal; }
.csc-intro-lead { font-size:15px; line-height:1.85; max-width:475px; color:#585858; margin:0 0 26px; }
.csc-intro-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.csc-intro-actions .button { gap:25px; }
.csc-inline-link { font-size:12px; line-height:1.5; font-weight:600; text-decoration:underline; text-decoration-color:#c7c4c1; text-underline-offset:5px; }
.csc-inline-link:hover { color:#a71930; }
.csc-intro-note { margin-top:40px; padding-left:15px; border-left:2px solid #a71930; display:grid; gap:6px; font-size:11px; color:#676767; line-height:1.5; }
.csc-intro-note strong { color:#333; font-size:12px; font-weight:600; }
.csc-spotlight { border:1px solid #ddd9d4; background:#fff; min-width:0; }
.csc-spotlight-top { display:flex; justify-content:space-between; align-items:center; background:#222; color:#fff; padding:15px 20px; font-size:9px; letter-spacing:.14em; }
.csc-spotlight-top>span:last-child { font-size:22px; line-height:1; color:#e96b7e; }
.csc-spotlight-image { display:flex; align-items:center; justify-content:center; height:280px; padding:22px; background:#f0efed; overflow:hidden; }
.csc-spotlight-image img { width:100%; height:100%; object-fit:contain; }
.csc-spotlight-bottom { display:flex; justify-content:space-between; gap:20px; padding:22px; align-items:center; }
.csc-spotlight-bottom>div>span { font-size:8px; color:#777; letter-spacing:.12em; }
.csc-spotlight-bottom h2 { font-size:16px; line-height:1.4; letter-spacing:-.025em; font-weight:600; margin:6px 0 0; }
.csc-spotlight-bottom>a { flex:0 0 auto; text-align:right; font-size:10px; }
.csc-spotlight-bottom strong { display:block; font-size:23px; font-weight:650; letter-spacing:-.04em; }
.csc-spotlight-bottom>a>span { display:block; color:#a71930; font-weight:600; margin-top:5px; }
.csc-empty-spotlight { padding:40px; }
.csc-assurance { border-bottom:1px solid #e5e5e5; }
.csc-assurance>.wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:22px; padding-bottom:22px; }
.csc-assurance span { font-size:11px; color:#4a4a4a; }
.csc-assurance b { font-weight:500; color:#a71930; font-size:10px; margin-right:10px; }
.csc-section { padding:64px 0; }
.csc-section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:26px; }
.csc-section-heading .csc-kicker { margin-bottom:10px; }
.csc-section h2 { font-size:clamp(25px,2.5vw,36px); letter-spacing:-.04em; line-height:1.17; font-weight:600; margin:0; }
.csc-department-grid { display:grid; grid-template-columns:repeat(5,1fr); border-left:1px solid #ddd; }
.csc-department { display:block; padding:20px 20px 25px; border:1px solid #ddd; border-left:0; transition:background .15s; }
.csc-department:hover { background:#f8eff1; }
.csc-department-top { display:flex; justify-content:space-between; font-size:10px; color:#a71930; margin-bottom:34px; }
.csc-department-top>span:last-child { font-size:18px; line-height:1; }
.csc-department h3 { font-size:14px; font-weight:600; margin:0 0 8px; letter-spacing:-.02em; }
.csc-department p { font-size:11px; color:#777; margin:0; line-height:1.5; }
.csc-stock { background:#fafafa; border-top:1px solid #eee; border-bottom:1px solid #eee; }
.csc-store .product-card { border:1px solid #e1e1e1; border-radius:3px; box-shadow:none; background:#fff; overflow:hidden; }
.csc-store .product-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.05); border-color:#ba7b85; transform:none; }
.csc-store .product-media { height:215px; border-radius:0; background:#f1f0ee; border-bottom:1px solid #e5e5e5; }
.csc-store .product-media img { object-fit:contain; padding:14px; }
.csc-store .product-body { padding:20px; }
.csc-store .product-actions button { width:100%; background:#a71930; color:#fff; font-size:13px; font-weight:600; padding:12px; border-radius:3px; box-shadow:none; }
.csc-store .product-actions button:hover { background:#7b1425; transform:none; box-shadow:none; }
.csc-store .product-body h3 { font-size:16px; line-height:1.4; font-weight:600; letter-spacing:-.02em; }
.csc-store .price { font-size:24px; font-weight:650; letter-spacing:-.035em; }
.csc-store .badge { font-size:9px; font-weight:600; border-radius:3px; }
.csc-store .badge.blue { background:#f8eef0; color:#7b1425; }
.csc-store .specs { font-size:11px; line-height:1.7; }
.csc-store .section h1 { font-size:clamp(32px,4vw,48px); letter-spacing:-.04em; font-weight:650; }
.csc-store .filters { box-shadow:none; border:1px solid #e1e1e1; border-radius:3px; background:#fafafa; }
.csc-business { background:#222; color:#fff; }
.csc-business-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:100px; }
.csc-business .csc-kicker { color:#ed9ca9; }
.csc-business h2 { font-size:clamp(30px,3.3vw,44px); }
.csc-business-grid>div>p:not(.csc-kicker) { color:#c3c3c3; font-size:13px; line-height:1.85; max-width:510px; margin:24px 0; }
.csc-business-steps>div { position:relative; padding:0 0 20px 45px; border-bottom:1px solid #454545; margin-bottom:20px; }
.csc-business-steps>div:last-child { margin-bottom:0; }
.csc-business-steps span { position:absolute; left:0; top:3px; color:#ed9ca9; font-size:11px; }
.csc-business-steps h3 { margin:0 0 8px; font-size:15px; font-weight:600; }
.csc-business-steps p { color:#aaa; font-size:12px; line-height:1.6; margin:0; }
.csc-standard-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:100px; }
.csc-standard-grid>div>p:not(.csc-kicker) { font-size:13px; line-height:1.8; color:#666; max-width:350px; }
.csc-standard-points article { padding:0 0 20px; margin-bottom:20px; border-bottom:1px solid #ddd; }
.csc-standard-points article:last-child { margin-bottom:0; }
.csc-standard-points h3 { font-size:15px; font-weight:600; margin:0 0 8px; }
.csc-standard-points p { font-size:12px; color:#777; line-height:1.75; margin:0; }
.csc-standard-points a { font-size:12px; font-weight:600; color:#a71930; display:inline-block; margin-top:10px; }
.csc-store .site-footer { background:#f5f4f2; color:#333; border-top:1px solid #dedbd7; padding:44px 0; }
.csc-store .site-footer .brand { color:#222; min-width:0; }
.csc-store .site-footer .brand-copy small { color:#666; font-size:8px; }
.csc-store .site-footer .csc-footer-logo { width:76px; height:76px; flex:0 0 76px; display:block; overflow:hidden; }
.csc-store .site-footer .csc-footer-logo img { width:100%; height:100%; display:block; object-fit:contain; }
.csc-store .site-footer .footer-brand { align-items:center; gap:16px; }
.csc-store .site-footer .footer-brand .brand-copy { display:flex; flex-direction:column; gap:5px; }
.csc-store .site-footer .footer-brand .brand-copy strong { font-size:1.15rem; line-height:1.1; }
.csc-store .site-footer .footer-brand .brand-copy small { display:block; font-size:.68rem; line-height:1.3; letter-spacing:.15em; text-transform:uppercase; }
.csc-store .site-footer p,.csc-store .footer-note,.csc-store .footer-links a { color:#666; }
.csc-store .brand-mark { background:transparent; border:0; border-radius:0; box-shadow:none; }
@media(max-width:1100px) {
 .csc-masthead { grid-template-columns:240px minmax(150px,1fr) auto; gap:24px; }
 .csc-header .nav-links { gap:22px; }
 .csc-intro-grid { gap:35px; }
 .csc-intro h1 { font-size:46px; }
 .csc-business-grid,.csc-standard-grid { gap:50px; }
 .csc-department { padding:16px 12px; }
}
@media(max-width:760px) {
 .csc-store .wrap,.csc-header .wrap { width:calc(100% - 36px); }
 .csc-utility { font-size:8px; letter-spacing:.07em; }
 .csc-utility a { display:none; }
 .csc-utility .wrap { min-height:26px; justify-content:center; }
 .csc-masthead { grid-template-columns:minmax(0,1fr) auto auto; gap:12px; padding-top:12px; padding-bottom:14px; min-height:0; }
 .csc-wordmark { width:210px; max-width:100%; }
 .csc-search { grid-column:1/-1; grid-row:2; padding-left:12px; }
 .csc-search input { font-size:12px; padding:12px 0; }
 .csc-cart { gap:0; }
 .csc-cart>span { font-size:0; }
 .csc-store .site-footer .csc-footer-logo { width:62px; height:62px; flex-basis:62px; }
 .csc-store .site-footer .footer-brand { gap:12px; }
 .csc-store .site-footer .footer-brand .brand-copy strong { font-size:1rem; }
 .csc-store .site-footer .footer-brand .brand-copy small { font-size:.58rem; letter-spacing:.1em; }
 .csc-cart b { font-size:10px; min-width:18px; height:18px; margin-left:2px; }
 .csc-header .menu-toggle { display:grid; place-items:center; border:1px solid #ddd; background:#fff; color:#222; width:34px; height:34px; border-radius:3px; padding:7px; margin:0; }
 .csc-header .nav-links { display:none; position:static; padding:10px 0; min-height:0; background:#fff; box-shadow:none; border:0; border-radius:0; }
 .csc-header.menu-open .nav-links { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
 .csc-header .nav-links a { padding:12px 0; font-size:12px; }
 .csc-header .nav-links .csc-nav-contact { margin-left:0; }
 .csc-intro-grid { grid-template-columns:1fr; gap:30px; padding-top:36px; padding-bottom:32px; }
 .csc-intro h1 { font-size:clamp(37px,8.9vw,52px); }
 .csc-kicker { font-size:9px; letter-spacing:.07em; }
 .csc-intro-lead { font-size:14px; line-height:1.75; }
 .csc-intro-note { margin-top:25px; }
 .csc-intro-actions { gap:18px; }
 .csc-spotlight-image { height:240px; }
 .csc-spotlight-bottom { padding:18px; gap:14px; }
 .csc-spotlight-bottom h2 { font-size:14px; }
 .csc-assurance>.wrap { grid-template-columns:1fr 1fr; gap:14px 10px; padding-top:18px; padding-bottom:18px; }
 .csc-assurance span { font-size:9px; }
 .csc-assurance b { margin-right:5px; font-size:9px; }
 .csc-section { padding:38px 0; }
 .csc-section-heading { display:block; }
 .csc-section-heading>.csc-inline-link { display:inline-block; margin-top:16px; }
 .csc-department-grid { grid-template-columns:1fr 1fr; border-left:0; gap:10px; }
 .csc-department { border:1px solid #ddd; padding:15px; }
 .csc-department:last-child { grid-column:1/-1; }
 .csc-department-top { margin-bottom:20px; }
 .csc-department h3 { font-size:13px; }
 .csc-store .products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .csc-store .product-media { height:150px; }
 .csc-store .product-media img { padding:8px; }
 .csc-store .product-body { padding:12px; }
 .csc-store .product-body h3 { font-size:13px; }
 .csc-store .price { font-size:21px; }
 .csc-store .product-body .button { padding:10px 8px; font-size:10px; min-width:0; }
 .csc-store .product-actions button { font-size:11px; padding:11px 6px; }
 .csc-store .product-body .actions { gap:6px; }
 .csc-store .specs { font-size:10px; }
 .csc-store .badge { font-size:8px; padding:4px 5px; }
 .csc-business-grid,.csc-standard-grid { grid-template-columns:1fr; gap:32px; }
 .csc-store .site-footer .brand-copy strong { font-size:14px; }
}
@media(max-width:380px) {
 .csc-store .products { grid-template-columns:1fr; }
 .csc-store .product-media { height:230px; }
 .csc-store .product-body h3 { font-size:16px; }
 .csc-store .product-body .button { font-size:12px; }
 .csc-wordmark { width:182px; }
}
@media(prefers-reduced-motion:reduce) { .csc-department { transition:none; } }

/* Standalone supplied logo in the masthead. */
.csc-header .csc-masthead { grid-template-columns:88px minmax(200px,1fr) auto; gap:32px; }
.csc-header .csc-wordmark { width:88px; height:88px; background:transparent; }
.csc-header .csc-wordmark img { width:100%; height:100%; object-fit:contain; }
@media(max-width:760px) {
 .csc-header .csc-masthead { grid-template-columns:minmax(0,1fr) auto auto; gap:12px; }
 .csc-header .csc-wordmark { width:64px; height:64px; }
}

/* ---------------------------------------------------------------------
   Mobile menu contrast.

   Two stylesheets disagreed about this panel. styles.css paints it dark
   (.site-header.menu-open .nav-links, 3 classes) while storefront.css
   assumed it was white and coloured the links #373737 for a light header
   (2 classes) - so the dark text won on a dark panel and measured 1.56:1,
   against a 4.5:1 AA floor. The active red was 2.50:1.

   Rather than fight the background, the links are lightened to match the
   panel that actually renders. Scoped to .menu-open so the desktop header
   keeps its dark-on-white text.
   --------------------------------------------------------------------- */
@media(max-width:760px) {
 .csc-header.menu-open .nav-links a { color:#E8E8E8; }          /* 15.16:1 */
 .csc-header.menu-open .nav-links a:hover,
 .csc-header.menu-open .nav-links a.active { color:#ED9CA9; }   /*  8.79:1 */
}

/* --- About page --- */
.csc-about h1 { font-size:clamp(32px,3.6vw,48px); letter-spacing:-.04em; line-height:1.08; font-weight:600; margin:0 0 20px; }
.csc-about-contact .csc-business-steps a { color:#fff; text-decoration:underline; text-underline-offset:4px; }