/* PC Alley storefront ------------------------------------------------------------------ Straight off the shop sign: royal blue, pure red, white. Two decisions carry the whole look: 1. Text is deep blue, never black. Every neutral is a blue tint and every border is a blue line, so the page reads as one material. 2. Red is rationed - the announce bar, one word in the headline, and the buttons you want pressed. Nothing else. Type is set heavy and tight with a shallow extrusion, echoing the moulded 3D lettering on the sign itself. */ :root{ /* ink */ --ink:#073b8f; --ink-2:#3869ae; --muted:#3a659f; --faint:#6f93c6; /* ground */ --bg:#ffffff; --tint:#f7faff; --tint-2:#f2f7ff; --tint-3:#eaf2ff; --line:#d5e5ff; --line-2:#b8d2ff; --line-3:#c9dcff; /* brand */ --blue:#086bf1; --blue-deep:#075fd8; --blue-ink:#0a4fae; --navy:#052871; --red:#e1262e; --red-bright:#ed1c24; --red-deep:#a90f19; --red-soft:#fdecec; /* semantic */ --ok:#0f7a48; --ok-soft:#e4f4ec; --warn:#8a5a12; --warn-soft:#fbf2e0; --f-d:"Archivo","Helvetica Neue",Arial,sans-serif; --f-b:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; --lift:0 18px 35px rgba(8,107,241,.16); --float:0 18px 40px rgba(8,107,241,.17); } *{box-sizing:border-box} /* Ground colour lives on so the blob below can sit at z-index:-1 and still be visible - painted above the root background, behind all content. */ html{-webkit-text-size-adjust:100%;background:var(--bg)} body{ margin:0;background:transparent;color:var(--ink); font-family:var(--f-b);font-size:15px;line-height:1.6; -webkit-font-smoothing:antialiased; } /* The blob: one soft blue-to-red bloom behind everything. position:fixed on purpose - an absolutely positioned bloom hanging off the right edge widened the document by 180px and let every page drag sideways on a phone. Fixed elements contribute nothing to scroll width, so this cannot come back, and it needs no overflow-x:hidden (which would have broken the sticky header by turning into a scroll container). */ body::before{ content:"";position:fixed;top:-220px;right:-180px; width:520px;height:520px;border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--red-bright)); filter:blur(150px);opacity:.13;pointer-events:none;z-index:-1; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{font-family:var(--f-d);letter-spacing:-.035em;text-wrap:balance;margin:0} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:9px 14px;border:2px solid var(--red);border-radius:6px} :focus-visible{outline:2px solid var(--red);outline-offset:2px} /* ================= chrome ================= */ .announce{ background:linear-gradient(90deg,var(--red-deep),var(--red)); color:#fff;padding:9px 20px;text-align:center; font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; } header.site{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30} .hdr{display:flex;align-items:center;gap:22px;padding:16px 0;border-bottom:1px solid var(--line)} .logo{flex:none;display:block;line-height:0;filter:drop-shadow(0 6px 12px rgba(8,107,241,.16))} .logo img,img.logo{height:46px;width:auto;display:block} .search{flex:1;display:flex;align-items:center;min-width:0; background:var(--tint-2);border:1px solid var(--line-3);border-radius:11px;padding:0 4px 0 14px;transition:.2s} .search:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(225,38,46,.14)} .search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);padding:12px 8px;font-size:14px} .search input::placeholder{color:var(--faint)} .search button{background:var(--red);border:0;color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer} .search button:hover{background:var(--red-deep)} .tools{display:flex;gap:8px;align-items:center;flex:none} .tool{border:1px solid var(--line-2);background:#fff;color:var(--blue); border-radius:9px;padding:11px 14px;font-weight:700;font-size:12.5px} .tool:hover{border-color:var(--blue);background:var(--tint-2)} .tool.cart{background:var(--red);border-color:var(--red);color:#fff} .tool.cart:hover{background:var(--red-deep);border-color:var(--red-deep)} .badge{background:rgba(255,255,255,.28);border-radius:20px;font-size:11px;font-weight:800;padding:1px 7px;margin-left:6px} .catbar{background:var(--tint);border-bottom:1px solid var(--line)} .cats{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;padding:13px 20px} .cats::-webkit-scrollbar{display:none} .cats a{white-space:nowrap;font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em} .cats a:hover{color:var(--blue)} .cats a:first-child{color:var(--red-bright);font-weight:800} footer.site{background:var(--navy);color:#c2d7ff;margin-top:80px;padding:48px 0 24px;font-size:14px} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px} .fgrid .logo{margin-bottom:14px;filter:none} .fgrid img.logo{height:42px} .fgrid h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:12px} .fgrid a{display:block;padding:3px 0} .fgrid a:hover{color:#fff} .fgrid p{margin:0 0 8px;max-width:34ch} .tiny{font-size:12.5px;color:#8fb0e8} .fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:20px;font-size:12.5px} /* ================= buttons ================= */ .btn{display:inline-block;background:var(--red);color:#fff;border:1px solid var(--red); border-radius:9px;padding:13px 20px;font-weight:800;cursor:pointer;text-align:center;font-size:14.5px; box-shadow:0 10px 30px rgba(225,38,46,.25);transition:.18s} .btn:hover{background:var(--red-deep);border-color:var(--red-deep)} .btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none} .btn.add{width:100%;margin-top:10px} .btn.big{padding:15px 26px;font-size:16px;width:100%} .btn.ghost{background:#fff;color:var(--blue);border-color:var(--blue);box-shadow:none} .btn.ghost:hover{background:var(--tint-2);color:var(--blue-ink)} /* ================= hero ================= */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .hero .in{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;min-height:440px} .kicker{color:var(--red-bright);font-size:11px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;margin-bottom:16px} .hero h1{ font-size:clamp(2.3rem,5.2vw,4rem);line-height:.96;font-weight:800; letter-spacing:-.05em;margin:0 0 20px;max-width:14ch; /* shallow extrusion, the way the sign letters are moulded */ text-shadow:0 2px 0 rgba(7,59,143,.16),0 5px 18px rgba(7,59,143,.10); } .hero h1 em{font-style:normal;color:var(--red);text-shadow:0 2px 0 rgba(169,15,25,.22)} .hero .lead{color:var(--ink-2);font-size:1rem;line-height:1.65;max-width:48ch;margin:0 0 26px} .hero .cta{display:flex;gap:11px;flex-wrap:wrap} .trustrow{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)} .trustrow div{font-size:12.5px;color:var(--ink-2)} .trustrow b{display:block;font-family:var(--f-d);font-size:1.3rem;font-weight:800;color:var(--ink);letter-spacing:-.03em} /* The stage: a monitor standing on a radial glow, screen playing the branch clip. The screen is locked to 16/9 because the source file is exactly 1920x1080, so the video fills it with no crop and no stretch at any width. */ .stage{position:relative;display:grid;place-items:center;padding:34px 10px 44px; background:radial-gradient(circle at 50% 44%,var(--tint-3) 0,var(--tint) 46%,#fff 72%)} .monitor{width:100%;max-width:560px;margin-inline:auto; background:linear-gradient(165deg,#16214a,#0b1330); border-radius:22px;padding:13px 13px 4px; box-shadow:0 30px 60px rgba(7,40,113,.34),0 2px 0 rgba(255,255,255,.14) inset} .screen{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#05080f; box-shadow:0 0 0 1px rgba(255,255,255,.09) inset} .screen video{display:block;width:100%;height:100%;object-fit:cover;background:#05080f} .nameplate{text-align:center;color:#8fb0e8;font-size:9.5px;font-weight:700; letter-spacing:.42em;text-transform:uppercase;padding:9px 0 7px;text-indent:.42em} /* neck and base, so the monitor reads as standing rather than floating */ .stand{display:grid;justify-items:center;margin-top:-2px} .stand i{display:block;width:74px;height:20px;background:linear-gradient(#16214a,#0e1738); clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)} .stand b{display:block;width:172px;height:9px;border-radius:0 0 7px 7px; background:linear-gradient(#101a3c,#0a1230);box-shadow:0 12px 22px rgba(7,40,113,.22)} .pricefloat{position:absolute;right:2%;top:5%;background:#fff;border:1px solid var(--line-2); border-radius:12px;padding:11px 14px;box-shadow:var(--float);z-index:2} .pricefloat small{display:block;color:var(--ink-2);font-size:9.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px} .pricefloat strong{font-family:var(--f-d);font-size:1.2rem;font-weight:800;color:var(--red-bright);letter-spacing:-.03em} @media(prefers-reduced-motion:reduce){.screen video{display:none} .screen{background:linear-gradient(165deg,#16214a,#0b1330)}} /* ================= sections ================= */ section{padding:52px 0} section.tinted{background:var(--tint);border-block:1px solid var(--line)} .shead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:24px;flex-wrap:wrap} .shead h2{font-size:1.7rem;font-weight:800;letter-spacing:-.04em} .shead p{color:var(--ink-2);margin:5px 0 0;font-size:13px} .shead a{color:var(--red-bright);font-weight:800;font-size:13px} .shead a:hover{text-decoration:underline} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} /* ================= product card ================= */ .card{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden; display:flex;flex-direction:column;transition:.25s;min-width:0} .card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:var(--lift)} .card .cover{display:block;position:relative;aspect-ratio:1;padding:16px; background:linear-gradient(145deg,#fff,var(--tint-3))} .card .cover img{width:100%;height:100%;object-fit:contain} .card .save{position:absolute;top:10px;left:10px;background:var(--red);color:#fff; font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px} .card .body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1} .card .brand{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);margin-bottom:5px} .card h3{font-size:13.5px;font-weight:700;line-height:1.35;letter-spacing:-.015em;overflow-wrap:anywhere} .card h3 a:hover{color:var(--blue)} .card .price{margin:10px 0 7px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .card .price strong{font-family:var(--f-d);font-size:1.25rem;font-weight:800;letter-spacing:-.035em} .card .price s{color:var(--faint);font-size:12.5px} .card .stock{font-size:11.5px;font-weight:700;margin-bottom:auto} .stock.ok{color:var(--ok)} .stock.low{color:var(--red)} .stock.out{color:var(--faint);font-weight:600} /* ================= benefits strip ================= */ .benefits{padding:0;background:#fff;border-block:1px solid var(--line-2)} .bgrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)} .bgrid>div{padding:22px 20px;border-left:1px solid var(--line-2)} .bgrid>div:first-child{border-left:0} .bgrid b{display:block;font-family:var(--f-d);font-size:12.5px;font-weight:800; color:var(--red-bright);margin-bottom:5px;letter-spacing:-.01em} .bgrid span{font-size:11.5px;color:var(--ink-2);line-height:1.55} /* ================= listing ================= */ .listing{display:grid;grid-template-columns:235px 1fr;gap:32px;padding-top:28px} .filters{position:sticky;top:128px;align-self:start} .fgroup{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px} .fgroup h4{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-2);margin-bottom:10px;font-weight:800} .fgroup a,.fgroup label{display:block;padding:4px 0;font-size:13.5px;color:var(--ink-2)} .fgroup a:hover{color:var(--blue)} .fgroup a.on{color:var(--red-bright);font-weight:800} .fgroup input[type=number]{width:84px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--tint-2)} .toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px} .toolbar .n{color:var(--ink-2);font-size:13.5px} .toolbar select{padding:9px 12px;border:1px solid var(--line-2);border-radius:8px;background:#fff} .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px} .chip{background:var(--tint-3);border:1px solid var(--line-2);border-radius:999px; padding:5px 12px;font-size:12.5px;color:var(--ink-2);font-weight:600} .chip a{color:var(--faint);margin-left:7px;font-weight:800} .chip a:hover{color:var(--red)} .pager{display:flex;gap:7px;justify-content:center;margin-top:36px;flex-wrap:wrap} .pager a,.pager span{padding:9px 14px;border:1px solid var(--line-2);border-radius:8px;font-size:13.5px;font-weight:600} .pager a:hover{border-color:var(--blue);color:var(--blue)} .pager span.on{background:var(--blue);color:#fff;border-color:var(--blue)} .noresults{text-align:center;padding:64px 24px;border:1px dashed var(--line-2);border-radius:14px;background:var(--tint)} .noresults h3{font-size:1.3rem;font-weight:800;margin-bottom:7px} .noresults p{color:var(--ink-2);margin:0 0 20px} /* ================= product page ================= */ .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;padding-top:28px} .gallery .main{border:1px solid var(--line);border-radius:14px;aspect-ratio:1;padding:26px; display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,var(--tint-3) 0,#fff 70%)} .gallery .main img{max-height:100%;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(8,107,241,.18))} .thumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap} .thumbs button{border:1px solid var(--line-2);border-radius:9px;background:var(--tint-2);padding:7px;width:68px;height:68px;cursor:pointer} .thumbs button.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(8,107,241,.16)} .thumbs img{width:100%;height:100%;object-fit:contain} .buy .eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);font-weight:800} .buy h1{font-size:1.9rem;line-height:1.14;margin:8px 0 14px;font-weight:800;letter-spacing:-.04em;overflow-wrap:anywhere} .pricebox{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px} .pricebox strong{font-family:var(--f-d);font-size:2.3rem;font-weight:800;letter-spacing:-.045em; text-shadow:0 2px 0 rgba(7,59,143,.10)} .pricebox s{color:var(--faint)} .pricebox .savepill{background:var(--red-soft);color:var(--red-deep);font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px} .availability{margin:16px 0;padding:13px 15px;border-radius:10px;font-size:13.5px} .availability.ok{background:var(--ok-soft);color:var(--ok)} .availability.out{background:var(--warn-soft);color:var(--warn)} .qtyrow{display:flex;gap:11px;align-items:center;margin:20px 0 12px} .qty{display:flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;background:#fff} .qty button{background:var(--tint-2);border:0;width:40px;font-size:18px;cursor:pointer;color:var(--blue);font-weight:700} .qty button:hover{background:var(--tint-3)} .qty input{width:54px;text-align:center;border:0;border-inline:1px solid var(--line);padding:11px 0} .assure{display:grid;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} .assure div{font-size:13px;color:var(--ink-2)} .assure b{color:var(--ink)} .specs{width:100%;border-collapse:collapse;margin-top:14px} .specs th,.specs td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top} .specs th{color:var(--ink-2);font-weight:700;width:190px} .specs td,.specs th{overflow-wrap:anywhere} .desc{white-space:pre-line;color:var(--ink-2);font-size:14px;overflow-wrap:anywhere} .tabs{margin-top:48px;border-top:1px solid var(--line);padding-top:30px} .tabs h2{font-size:1.35rem;font-weight:800;margin-bottom:12px} .buybar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line-2); padding:11px 16px;display:none;gap:12px;align-items:center;z-index:35;box-shadow:0 -6px 22px rgba(8,107,241,.14)} .buybar .p{font-family:var(--f-d);font-size:1.25rem;font-weight:800;flex:none;letter-spacing:-.035em} .buybar form{flex:1} /* ================= cart / checkout ================= */ .narrow{max-width:920px} .page-h{padding:34px 0 22px} .page-h h1{font-size:2rem;font-weight:800;letter-spacing:-.04em} .page-h p{color:var(--ink-2);margin:6px 0 0} .cartgrid{display:grid;grid-template-columns:1fr 350px;gap:30px;align-items:start} .lines{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff} .line{display:grid;grid-template-columns:88px 1fr auto;gap:15px;padding:16px;border-bottom:1px solid var(--line);align-items:center} .line:last-child{border-bottom:0} .line .th{background:linear-gradient(145deg,#fff,var(--tint-3));border-radius:9px;padding:8px;aspect-ratio:1;display:grid;place-items:center} .line .th img{max-height:100%;object-fit:contain} .line h3{font-size:14px;font-weight:700;line-height:1.35;overflow-wrap:anywhere} .line .sub{color:var(--ink-2);font-size:12.5px;margin-top:4px} .line .right{text-align:right} .line .lt{font-family:var(--f-d);font-weight:800;font-size:1.05rem;letter-spacing:-.03em} .line .rm{color:var(--faint);font-size:12.5px;margin-top:6px;display:inline-block} .line .rm:hover{color:var(--red)} .summary{border:1px solid var(--line);border-radius:14px;padding:20px;position:sticky;top:128px;background:#fff;box-shadow:var(--lift)} .summary h3{font-size:1.1rem;font-weight:800;margin-bottom:16px} .summary .row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--ink-2)} .summary .row.total{border-top:1px solid var(--line);margin-top:11px;padding-top:14px; font-size:1.2rem;font-family:var(--f-d);font-weight:800;color:var(--ink);letter-spacing:-.03em} .freebar{background:var(--tint-3);border-radius:9px;padding:11px 13px;font-size:12.5px;color:var(--ink-2);margin-bottom:15px} .freebar .track{height:5px;background:#fff;border-radius:4px;margin-top:9px;overflow:hidden} .freebar .track i{display:block;height:100%;background:var(--ok)} .trustlist{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:8px;font-size:12.5px;color:var(--ink-2)} fieldset{border:1px solid var(--line);border-radius:14px;padding:20px;margin:0 0 18px;background:#fff} legend{font-family:var(--f-d);font-weight:800;font-size:1rem;padding:0 9px;letter-spacing:-.02em} .field{margin-bottom:14px} .field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px} .field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line-2); border-radius:9px;background:var(--tint-2)} .field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:var(--blue)} .field .hint{font-size:12px;color:var(--muted);margin-top:5px} .two{display:grid;grid-template-columns:1fr 1fr;gap:14px} .opts{display:grid;gap:10px} .opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-2);border-radius:10px;padding:13px 15px;cursor:pointer;background:#fff} .opt:hover{border-color:var(--blue)} .opt input{margin-top:3px;flex:none;accent-color:var(--red)} .opt b{display:block;font-size:14px} .opt span{font-size:12.5px;color:var(--ink-2)} .opt:has(input:checked){border-color:var(--red);background:var(--red-soft)} .alert{background:var(--red-soft);border:1px solid var(--red);color:var(--red-deep);padding:13px 16px; border-radius:10px;margin-bottom:18px;font-size:14px} /* ================= confirmation / tracking ================= */ .confirm{text-align:center;padding:50px 0 12px} .confirm .tick{width:58px;height:58px;border-radius:50%;background:var(--ok-soft);color:var(--ok); display:grid;place-items:center;margin:0 auto 18px;font-size:28px} .confirm h1{font-size:2rem;font-weight:800;margin-bottom:9px;letter-spacing:-.04em} .confirm .no{font-family:var(--f-d);font-size:1.3rem;font-weight:800;background:var(--tint-3); display:inline-block;padding:9px 18px;border-radius:10px;margin:12px 0 7px;letter-spacing:.01em} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:14px;margin:32px 0} .steps div{border:1px solid var(--line);border-radius:12px;padding:17px;background:#fff} .steps b{display:block;font-family:var(--f-d);font-weight:800;margin-bottom:5px;color:var(--red-bright);font-size:12.5px} .steps p{margin:0;font-size:13px;color:var(--ink-2)} .timeline{list-style:none;padding:0;margin:16px 0 0} .timeline li{position:relative;padding:0 0 18px 26px;border-left:2px solid var(--line-2);margin-left:5px} .timeline li:last-child{border-left-color:transparent;padding-bottom:0} .timeline li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px; border-radius:50%;background:#fff;border:2px solid var(--line-2)} .timeline li.done::before{background:var(--ok);border-color:var(--ok)} .timeline b{display:block} .timeline span{font-size:12.5px;color:var(--ink-2)} /* ================= branches ================= */ .blist{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:15px;padding-top:14px} .bcard{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff;transition:.2s} .bcard:hover{border-color:var(--blue);box-shadow:var(--lift)} .bcard h3{font-size:1.05rem;font-weight:800;margin-bottom:6px} .bcard p{margin:0;color:var(--ink-2);font-size:13.5px} .pending{background:var(--warn-soft);color:var(--warn);font-size:12px;padding:4px 9px; border-radius:999px;display:inline-block;margin-top:10px;font-weight:700} /* ================= responsive ================= */ @media(max-width:960px){ .hero .in{grid-template-columns:1fr;gap:0;min-height:0} .hero .copy{padding-bottom:8px} .stage{padding:26px 10px 36px} .pdp{grid-template-columns:1fr;gap:28px} .listing{grid-template-columns:1fr} .filters{position:static} .cartgrid{grid-template-columns:1fr} .summary{position:static} .fgrid{grid-template-columns:1fr 1fr;gap:26px} .bgrid{grid-template-columns:repeat(2,1fr)} .bgrid>div:nth-child(odd){border-left:0} .bgrid>div:nth-child(n+3){border-top:1px solid var(--line-2)} } @media(max-width:720px){ .hdr{flex-wrap:wrap;gap:12px} .logo img,img.logo{height:36px} .search{order:3;width:100%;flex-basis:100%} .buybar{display:flex} body:has(.buybar){padding-bottom:74px} .pdp .buy .btn.big{display:none} .two{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr} .line{grid-template-columns:66px 1fr;gap:12px} .line .right{grid-column:2;text-align:left;display:flex;gap:16px;align-items:center} section{padding:38px 0} .stage{padding:20px 6px 30px} .monitor{border-radius:16px;padding:9px 9px 3px} .screen{border-radius:9px} .nameplate{font-size:8.5px;letter-spacing:.34em;text-indent:.34em;padding:7px 0 5px} .stand i{width:58px;height:16px} .stand b{width:132px} .pricefloat{right:0;top:0;padding:9px 11px} .pricefloat strong{font-size:1.05rem} } @media(max-width:430px){ .bgrid{grid-template-columns:1fr} .bgrid>div{border-left:0} .bgrid>div+div{border-top:1px solid var(--line-2)} .grid{grid-template-columns:1fr 1fr;gap:11px} .card .body{padding:11px 12px 13px} .card .price strong{font-size:1.1rem} .specs th{width:40%} .page-h h1,.confirm h1{font-size:1.6rem} } @media print{header.site,footer.site,.announce,.buybar,.catbar{display:none}}