/* Principal Computers — built from Tim's mockups (13 Oct 2026). */

@font-face{font-family:Archivo;font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/atkinson-next-latin.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/opensans-latin.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Mono";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/atkinson-mono-latin.woff2) format("woff2")}

:root{
  --ink:#121820; --muted:#4E5966; --body-2:#2A3440;
  --bg:#fff; --card:#fff; --line:#D9DEE3; --line-soft:#E6E9EC; --input:#9AA4AE; --hover:#EEF1F3; --img-bg:#E9EDF0;
  --accent:#112761; --accent-soft:#EEF1F8; --logo:#112761; --navy:#112761; --navy-deep:#0C2157;
  --dark-text:#D5DBE1; --dark-muted:#9AA6B2; --dark-line:#2E3742; --dark-soft:#C5CDD5; --dot:#3DDC97;
  --ok-bg:#DDF2E7; --ok:#0B5A3D; --low-bg:#FCE8D5; --low:#8A4300; --order-bg:#E3E8EE; --order:#3A4654;
  --font:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
  --font-disp:Archivo,"Arial Narrow",sans-serif;
  --font-mono:"Atkinson Hyperlegible Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45}
h1,h2,h3,p,ol,ul,dl,fieldset,figure{margin:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
img{max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}

/* type helpers */
.disp{font-family:var(--font-disp);font-stretch:87.5%;font-weight:760;letter-spacing:-.01em;line-height:1.1}
.lbl{font-family:var(--font-disp);font-stretch:80%;font-weight:720;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.link{color:var(--accent);font-weight:700}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}

/* components */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border:2px solid transparent;white-space:nowrap;background:none;color:inherit}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-deep)}
.btn-outline{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--hover)}
.btn-white{background:#fff;color:var(--ink)}
.btn-sm{min-height:36px;padding:0 14px;border-radius:10px;font-size:.9rem}
.pc-invoices form{margin:0}
.pc-invoices{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pc-invoice{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px 24px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.pc-invoice-main,.pc-invoice-amount{display:flex;flex-direction:column;gap:2px}
.pc-invoice-amount{align-items:flex-end}
.pc-invoice-pdf{min-width:140px;min-height:36px;display:flex;align-items:center;justify-content:flex-end;white-space:nowrap}
.pc-invoice-pdf .link-wait{white-space:nowrap}
.pc-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.85rem;font-weight:700}
.pc-badge.is-paid{background:#E6F4EA;color:#14532D}
.pc-badge.is-owing{background:#FFF1D6;color:#7A4B00}
@media(max-width:600px){.pc-invoice{grid-template-columns:1fr auto}.pc-invoice-pdf{grid-column:1/-1;justify-content:flex-start}}
.pc-shop-orders-title{margin:28px 0 10px}
.pc-order-items{margin:6px 0 0;padding-left:18px}
.pc-shop-orders-card{margin-top:16px}
.pc-price-lists{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px}
.pc-price-lists li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.pc-price-lists form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:0}
.pc-price-lists label{display:grid;gap:4px;font-size:.85rem;font-weight:700}
.pc-price-list-buttons{display:flex;flex-wrap:wrap;gap:8px}
.pc-shop-order h3{margin:18px 0 6px}
.pc-shop-order + p{margin-top:12px}
a.chip{text-decoration:none}
a.chip:hover{text-decoration:underline}
.pc-invoice-badge{margin-left:4px;vertical-align:1px}
.btn-ghost-white{border-color:#fff;color:#fff}
.btn-block{width:100%}
.btn.loading{opacity:.6;pointer-events:none}
.btn.added::after{content:"✓";margin-left:2px}
.added_to_cart{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap}
.chip-ok{background:var(--ok-bg);color:var(--ok)}
.chip-low{background:var(--low-bg);color:var(--low)}
.chip-order{background:var(--order-bg);color:var(--order)}
.chip-out{background:var(--order-bg);color:var(--order)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.navlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:8px;text-decoration:none;font-weight:700;white-space:nowrap}
.navlink:hover{background:var(--hover)}
.navlink.is-current{background:var(--accent-soft);color:var(--accent)}
.navlink.is-accent{color:var(--accent)}
.navlink-dark{background:var(--navy);color:#fff;border-radius:12px}
.navlink-dark:hover{background:var(--navy-deep)}
.icon{flex:none}
.ibtn{width:44px;height:44px;border:0;border-radius:8px;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);position:relative;text-decoration:none}
.badge{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.badge:empty,.badge[data-count="0"]{display:none}
.input{width:100%;height:44px;border:1px solid var(--input);border-radius:12px;background:#fff;padding:0 12px;font:inherit;color:var(--ink)}
.select-wrap{position:relative;display:block}
.select-wrap select{appearance:none;height:44px;border:1px solid var(--input);border-radius:12px;background:#fff;padding:0 40px 0 14px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.select-wrap .icon{position:absolute;right:12px;top:13px;pointer-events:none}

/* top bar */
.topbar{background:var(--navy-deep);color:var(--dark-text);font-size:14.5px}
.topbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:9px;padding-bottom:9px}
.topbar strong{color:#fff}
.walkin-star{display:inline-block;padding:0 3px;font-weight:700;color:inherit;text-decoration:none;vertical-align:super;font-size:.75em;line-height:1}
.walkin-star:hover,.walkin-star:focus-visible{text-decoration:underline}
.disp .walkin-star{font-size:.6em;vertical-align:.45em}
.topbar-info{display:flex;flex-wrap:wrap;gap:6px 20px}
.topbar a{font-weight:700;color:#fff}
.openstate{display:inline-flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dot);flex:none}
.is-closed .dot{background:var(--dark-muted)}

/* header */
.site-header{background:#fff}
.header-main{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:14px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{flex:none;width:46px;height:auto;color:var(--logo)}
.brand-name{display:inline-flex;flex-direction:column;font-family:"Open Sans",var(--font);font-size:23px;line-height:.95;letter-spacing:-.01em;color:var(--logo)}
.brand-name .w1{font-weight:400;font-size:.95em}
.brand-name .w2{font-weight:700;font-size:1.05em}
.search{flex:1 1 360px;position:relative}
.search .icon{position:absolute;left:16px;top:15px;color:var(--muted)}
.search input{width:100%;height:50px;border:2px solid var(--ink);border-radius:12px;background:#fff;padding:0 16px 0 46px;font:inherit;font-size:17px}
.account-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.cat-nav-band{background:var(--navy)}
.cat-nav{display:flex;flex-wrap:wrap;gap:0;margin-left:-16px}
.cat-nav .navlink{color:#fff;padding:0 16px;min-height:58px;border-radius:0}
.cat-nav .navlink:hover,.cat-nav .navlink.is-current{background:var(--navy-deep);color:#fff}
.cat-nav .navlink.is-accent{color:#fff}
.cat-nav .sep{width:1px;background:rgba(255,255,255,.3);margin:12px 8px}
.header-icons{display:none}
.drawer{display:none}
.header-search{display:none}

/* layout */
.site-main{padding:28px 0 56px}
.stack{display:flex;flex-direction:column}
.home-main{display:flex;flex-direction:column;gap:40px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.h-section{font-size:30px}
.breadcrumb{font-size:14.5px;color:var(--muted)}
.breadcrumb .current{color:var(--ink)}

/* home: hero */
.hero-row{display:flex;flex-wrap:wrap;gap:20px}
.hero{flex:7 1 520px;background:var(--navy);color:#fff;border-radius:22px;padding:30px 36px 26px;display:flex;flex-direction:column;gap:14px}
.hero h1{font-size:40px;font-weight:820;max-width:20ch}
.hero-lead{font-size:17px;color:var(--dark-text);max-width:54ch}
.hero-lead a{color:#fff;text-decoration:underline}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.ticks{list-style:none;padding:14px 0 0;margin-top:2px;border-top:1px solid var(--dark-line);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;font-size:14.5px;color:var(--dark-text)}
.ticks li{display:flex;gap:10px}
.ticks .icon{color:var(--dot);margin-top:1px}
.hero-open,.hero-address,.hero-phone-actions{display:none}
.shop-panel{flex:5 1 380px;background:var(--accent-soft);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:12px}
.shop-panel h2{font-size:28px}
.shop-panel p{font-size:16px;color:var(--body-2)}
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cat-tile{text-decoration:none;padding:10px 12px;display:flex;align-items:center;gap:10px;font-weight:700}
.cat-tile:hover{border-color:var(--input)}
.cat-tile .icon{color:var(--accent)}
.phone-only{display:none}

/* product cards */
.pgrid{list-style:none;padding:0;display:grid;gap:16px}
.pgrid-home{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}
.pgrid-shop{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.pcard{display:flex;flex-direction:column;overflow:hidden}
.pcard:hover{border-color:var(--input)}
.pcard-link{text-decoration:none;display:flex;flex-direction:column;flex:1}
.pimg{height:150px;background:#fff;border-bottom:1px solid var(--line-soft);display:grid;place-items:center}
.pimg img{max-width:88%;max-height:132px;width:auto;object-fit:contain}
.pimg-none{background:var(--img-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--muted)}
.pimg-none .icon{color:#8A95A1}
.pbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pname{font-weight:700;line-height:1.3}
/* Long supplier names ("…/2*HDMI/2*TBT/2*LAN/Wifi6/Card…") break after a "/" (pc_breakable_name), else anywhere, rather
   than run out of their box. */
.pname,.prod-buy h1,.breadcrumb .current{overflow-wrap:anywhere}
.pspec{font-size:14px;color:var(--muted)}
/* Condition tag: outlined, so it never reads as a stock chip (those are filled). */
.cond{align-self:flex-start;display:inline-flex;align-items:center;padding:1px 8px;border:1.5px solid currentColor;border-radius:6px;background:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.cond-new{color:var(--accent)}
.cond-refurbished{color:#6A2FA8}
.cond-second-hand{color:#8A5A00}
.cond-pickup{color:var(--ink)}
.cond-link{cursor:pointer;text-decoration:none}
.cond-link:hover,.cond-link:focus-visible{text-decoration:underline}
.ptags{display:flex;flex-wrap:wrap;gap:6px}
.perk-pickup strong{color:var(--ink)}
.prod-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.price{font-family:var(--font-disp);font-stretch:87.5%;font-weight:800;font-size:19px;color:var(--navy)}
/* the box is only for the theme's own cards and product page; WooCommerce's cart and checkout blocks use .price too */
.pfoot .price,.prod-price .price{display:inline-block;border:2px solid var(--navy);border-radius:10px;background:#fff;padding:2px 10px}
.pfoot .price:has(.price-quote),.prod-price .price:has(.price-quote){border:0;padding:0;background:none}
.price del{font-size:.8em;color:var(--muted);font-weight:400}
.price ins{text-decoration:none}
.pcta{padding:0 16px 16px}
.pgrid-shop .pbody{padding-bottom:12px}

/* home: repair steps + business */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.step{padding:24px;display:flex;flex-direction:column;gap:10px}
.step-num{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:19px;flex:none}
.step h3{font-size:18px}
.biz{background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px;display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center}
.biz-text{flex:1 1 360px;display:flex;flex-direction:column;gap:12px}
.biz-text h2{font-size:32px}
.biz-text p{font-size:17px}
.biz-list{flex:1 1 320px;list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.biz-list li{display:flex;gap:12px;align-items:flex-start}
.biz-list .icon{color:var(--accent)}

/* shop archive */
.shop-main{display:flex;flex-direction:column;gap:18px;padding-top:22px}
.shop-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.shop-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.shop-title h1{font-size:40px}
.sort{display:flex;align-items:center;gap:10px}
.shop-body{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.filters{flex:1 1 230px;max-width:280px;display:flex;flex-direction:column;gap:22px}
.filters fieldset{display:flex;flex-direction:column;gap:2px}
.filters legend{margin-bottom:8px}
.facet{display:flex;align-items:center;gap:10px;min-height:36px;cursor:pointer}
.facet input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink)}
.facet .n{flex:none;margin-left:auto;padding-left:6px;color:var(--muted)}
.facet-hint{margin:0;font-size:15px}
.price-range{display:flex;align-items:center;gap:8px}
.price-range label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:14px}
.filters-apply{margin-top:-6px}
.js .filters-apply{display:none}
.results{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:14px}
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.price-quote{font-family:inherit;font-size:.8em;font-weight:700;color:var(--ink)}
.quote-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.quote-form label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14.5px}
.quote-form .quote-wide,.quote-form .quote-intro,.quote-form .quote-outcome{grid-column:1/-1}
.quote-form .quote-intro{margin:0}
.quote-form .quote-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.quote-outcome{margin:0;padding:10px 12px;border-radius:8px;font-weight:700}
.quote-outcome.is-ok{background:var(--ok-bg);color:var(--ok)}
.quote-outcome.is-warn{background:var(--low-bg);color:var(--low)}
@media (max-width:600px){.quote-form{grid-template-columns:1fr}}
.type-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.type-link{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14.5px;font-weight:700;text-decoration:none;color:var(--ink)}
.type-link:hover{border-color:var(--input)}
.type-link.is-current{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.fchip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px 0 12px;border:1px solid var(--ink);border-radius:999px;background:var(--accent-soft);font-size:14.5px;font-weight:700;text-decoration:none}
.helpbox{padding:16px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.more{display:flex;justify-content:center;padding-top:8px}
.more .btn{min-width:220px}
.legend-list{display:none}
.empty{padding:32px;text-align:center}

/* single product */
.prod-main{display:flex;flex-direction:column;gap:22px;padding-top:22px}
.prod-row{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.prod-photo{flex:7 1 480px;min-width:0;height:460px;background:#fff;display:grid;place-items:center}
.prod-photo img{max-width:86%;max-height:400px;width:auto;object-fit:contain}
.prod-photo.pimg-none{height:460px}
.prod-photo-main{width:100%;height:100%;display:grid;place-items:center}
.prod-photo.has-thumbs{grid-template-rows:1fr auto;height:auto;min-height:460px;padding:16px 0}
.prod-photo.has-thumbs .prod-photo-main{height:380px}
.prod-thumbs{list-style:none;margin:0;padding:0 16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.prod-thumb{display:grid;place-items:center;width:64px;height:64px;border:1.5px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.prod-thumb img{max-width:56px;max-height:56px;width:auto;object-fit:contain}
.prod-thumb.is-current,.prod-thumb:hover{border-color:var(--accent)}
.prod-buy{flex:5 1 360px;min-width:0;padding:28px;display:flex;flex-direction:column;gap:18px}
.prod-buy h1{font-size:34px}
.prod-price{display:flex;align-items:baseline;gap:10px}
.prod-price .price{font-size:38px;line-height:1;padding:4px 14px}
.prod-stock{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.buy-row{display:flex;gap:12px;align-items:center}
.buy-row .btn{flex:1;min-height:52px}
.qty{display:flex;align-items:center;border:1px solid var(--input);border-radius:12px;height:52px;background:#fff}
.qty button{width:44px;height:50px;border:0;background:transparent;font:inherit;font-size:22px;cursor:pointer;color:var(--ink)}
.qty input{width:36px;border:0;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:16px;-moz-appearance:textfield;background:transparent}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.perks{list-style:none;padding:16px 0 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:12px;font-size:15.5px}
.perks li{display:flex;gap:12px}
.perks .icon{color:var(--accent)}
.prod-card{flex:7 1 480px;min-width:0;padding:24px 28px;display:flex;flex-direction:column;gap:10px}
.prod-card.about{flex:5 1 360px}
.prod-card h2{font-size:24px}
.spec{display:grid;grid-template-columns:180px 1fr}
.spec dt,.spec dd{padding:11px 0;border-top:1px solid var(--line-soft);margin:0}
.spec dt{color:var(--muted)}
.about-text{line-height:1.6;overflow-wrap:anywhere}
.about-text p+p{margin-top:14px}
.about-lines{list-style:none;margin:0;padding:0}
.about-lines li{padding:9px 0;border-top:1px solid var(--line-soft)}
.about-lines li:first-child{border-top:0;padding-top:0}
.about-lines b{display:block;font-weight:700;color:var(--ink)}
.about-lines .about-head{padding-top:18px;border-top:0;color:var(--muted);font-size:14px;font-weight:700;letter-spacing:.06em}
.about-text.is-clamped{max-height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.about-more{align-self:flex-start;min-height:44px;padding:8px 0;background:none;border:0;color:var(--accent);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* plain pages + WooCommerce pages */
.page-main{padding-top:28px}
.page-card{padding:32px 36px;max-width:860px}
.page-card h1{font-size:40px;margin-bottom:16px}
.entry>*+*{margin-top:1em}
.entry h2{font-family:var(--font-disp);font-stretch:87.5%;font-weight:760;font-size:26px;margin-top:1.4em}
.entry ul,.entry ol{padding-left:1.3em}
.entry a{color:var(--accent);font-weight:700}
.entry a.btn-primary{color:#fff;text-decoration:none}
.woocommerce-MyAccount-navigation{margin:0 0 22px}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.entry .woocommerce-MyAccount-navigation a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:700;text-decoration:none}
.entry .woocommerce-MyAccount-navigation a:hover{background:var(--hover)}
.entry .woocommerce-MyAccount-navigation .is-active a{background:var(--navy);border-color:var(--navy);color:#fff}
.entry .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout{margin-left:auto}
.entry .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a{border-color:transparent;background:transparent;color:var(--muted);font-weight:600}
.wc-page .page-card{max-width:none}
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:0 0 16px;padding:14px 18px;border-radius:12px;border:1px solid var(--line);background:#fff;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.woocommerce-message{border-left:5px solid var(--accent)}
.woocommerce-error{border-left:5px solid var(--low)}
.woocommerce-message .button,.woocommerce-info .button{order:2;color:var(--accent);font-weight:700}
.wc-block-components-button:not(.is-link){border-radius:12px!important;font-weight:700!important;min-height:52px}
.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{background:var(--accent)!important;color:#fff!important}
.wc-block-components-formatted-money-amount,.wc-block-components-totals-item__value{font-family:var(--font-mono)}

/* sign in with Google or Facebook (inc/accounts.php) */
.pc-social{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.pc-social-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14.5px}
.pc-social-or::before,.pc-social-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* Link my repairs: waiting for the code text, or for the repairs */
.spinner{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid var(--line);border-top-color:var(--navy);border-radius:50%;animation:pc-spin .8s linear infinite}
@keyframes pc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.quote-form input:disabled,.quote-form button:disabled{opacity:.55;cursor:not-allowed}

/* product page: the note under a description Bench's AI wrote */
.ai-note{display:flex;gap:6px;align-items:flex-start;font-size:13.5px;margin-top:8px}
.ai-note .icon{flex:none;margin-top:2px}

/* footer */
.site-footer{background:#F4F5F7;color:var(--muted);font-size:15px}
.site-footer a{color:var(--navy)}
.footer-cols{padding-top:40px;padding-bottom:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.footer-cols>*{display:flex;flex-direction:column;gap:6px}
.footer-cols .lbl{color:var(--muted)}
.footer-name{font-size:20px;color:var(--navy)}
.footer-note{padding-top:16px;padding-bottom:24px;border-top:1px solid var(--line);display:flex;gap:10px;color:var(--muted)}

/* Big screens (Tim, 30 Oct 2026: "on my 3840 x 2160 screen there is just heaps of white space at the side"): the page
   widens to 1440px, 1600px and 1760px. A 4K screen at Windows' 150% reads as 2560px and is already scaled by Windows, so
   the site is not scaled again there (Tim: "on the larger side when compared to other pages"). Only a screen still wider
   than 3000px (a 4K screen left at 100%) scales the whole site up a little. Media queries read the real screen width. */
@media (min-width:1600px){ .wrap{max-width:1440px} }
@media (min-width:1900px){ .wrap{max-width:1600px} }
@media (min-width:2400px){ .wrap{max-width:1760px} }
@media (min-width:3000px){ html{zoom:1.3} }
@media (min-width:3600px){ html{zoom:1.5} }

/* Small laptops: the header stays one row with Book a repair beside Check a repair (Tim, 30 Oct 2026). */
@media (min-width:901px) and (max-width:1240px){
  .search{flex-basis:220px}
  .account-nav .navlink:not(.navlink-dark) svg{display:none}
  .account-nav .navlink{padding:0 9px}
  .header-main{column-gap:20px}
}

/* ---------- phone ---------- */
@media (max-width:900px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .topbar,.header-main .search,.header-main .account-nav,.cat-nav-wrap{display:none}
  .header-main{padding:8px 8px 8px 16px;flex-wrap:nowrap;justify-content:space-between}
  .brand{gap:9px}
  .brand-mark{width:36px}
  .brand-name{font-size:18px}
  .header-icons{display:flex}
  .header-search{display:none;padding:0 16px 12px}
  .header-search.open{display:block}
  .header-search .search input{border-width:1px;border-color:var(--input)}
  .drawer.open{display:block;border-top:1px solid var(--line);padding:8px 8px 14px}
  .drawer nav{display:flex;flex-direction:column}
  .drawer .sep{height:1px;background:var(--line);margin:8px 12px}
  .site-main{padding:0 0 28px}

  /* home */
  .home-main{gap:26px}
  .hero-row{gap:0;flex-direction:column;padding:0}
  .hero{border-radius:0;padding:22px 16px 24px;gap:16px;flex-basis:auto}
  .hero .lbl,.hero .ticks,.hero-desk-actions,.hero-lead-more{display:none}
  .hero h1{font-size:36px;font-weight:800}
  .hero-lead{font-size:16.5px}
  .hero-open{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#9FE3C0}
  .hero-open .dot{width:9px;height:9px}
  .hero-open.is-closed{color:var(--dark-soft)}
  .hero-phone-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero-phone-actions .btn{min-height:50px;padding:0 12px}
  .hero-phone-actions .hero-book{grid-column:1/-1}
  .hero-address{display:block;font-size:15px;color:var(--dark-soft)}
  .shop-panel{display:none}
  .phone-only{display:flex}
  .phone-shop{flex-direction:column;gap:18px;padding-top:18px}
  .phone-shop .search,.header-search .search{flex:none}
  .repair-link{text-decoration:none;padding:16px;display:flex;align-items:center;gap:14px}
  .repair-link .ic{flex:none;width:46px;height:46px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
  .repair-link .t{flex:1;display:flex;flex-direction:column}
  .phone-shop label.disp{font-size:22px}
  .phone-shop .search input{border-width:1px;border-color:var(--input);font-size:17px}
  .cat-grid{gap:8px}
  .cat-tile{min-height:58px;font-size:16px}
  .h-section{font-size:22px}
  .pgrid-home{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pgrid-home li:nth-child(n+5){display:none}
  .pgrid-home .pimg{height:110px}
  .pgrid-home .pimg img{max-height:96px;max-width:90%}
  .pgrid-home .pbody{padding:10px 12px 12px}
  .pgrid-home .pname{font-size:15px}
  .pgrid-home .pspec{display:none}
  .pgrid-home .pfoot{flex-direction:column;align-items:flex-start}
  .pgrid-home .price{font-size:17px}
  .steps{gap:10px}
  .step{padding:14px 16px;flex-direction:row;gap:14px}
  .step-num{width:32px;height:32px;font-size:17px}
  .step h3{font-size:17px}
  .step p{font-size:15.5px}
  .step-desk{display:none}
  .biz{background:var(--accent-soft);border:0;border-radius:22px;padding:20px 18px;gap:10px}
  .biz-text h2{font-size:22px}
  .biz-text p{font-size:16px;color:var(--ink)}
  .biz .lbl,.biz-list li:not(.biz-cta){display:none}
  .biz-cta .btn{background:none;color:var(--accent);padding:6px 0;min-height:0}

  /* shop */
  .shop-main{padding-top:14px;gap:12px}
  .shop-title h1{font-size:30px}
  .shop-head{align-items:center}
  .shop-body{flex-direction:column;gap:14px}
  .filters{max-width:none;flex-basis:auto;width:100%}
  .filters-toggle{display:inline-flex}
  .filters:not(.open) fieldset,.filters:not(.open) .helpbox{display:none}
  .results{flex-basis:auto;width:100%}
  .pgrid-shop{grid-template-columns:1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .pgrid-shop .pcard{border:0;border-radius:0;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:76px 1fr;gap:0 12px;padding:14px 12px}
  .pgrid-shop .pcard-link{display:contents}
  .pgrid-shop .pimg{height:64px;width:76px;border:1px solid var(--line-soft);border-radius:8px;grid-row:span 2}
  .pgrid-shop .pimg img{max-height:56px}
  .pgrid-shop .pimg-none span{display:none}
  .pgrid-shop .pbody{padding:0}
  .pgrid-shop .pname{font-size:15.5px}
  .pgrid-shop .pspec{font-size:13.5px}
  .pgrid-shop .pcta{display:none}
  .legend-list dd{margin:0}
  .pgrid-shop .pimg-none svg{width:48px;height:32px}
  .legend-list{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;font-size:14.5px;padding:8px 4px}

  /* product */
  .prod-main{padding-top:14px;gap:14px}
  .prod-row{gap:14px}
  .prod-photo,.prod-photo.pimg-none{height:280px;flex-basis:auto;width:100%}
  .prod-photo.has-thumbs{height:auto;min-height:280px}
  .prod-photo.has-thumbs .prod-photo-main{height:220px}
  .prod-photo img{max-height:240px}
  .prod-buy{padding:20px;flex-basis:auto;width:100%}
  .prod-buy h1{font-size:28px}
  .prod-price .price{font-size:30px}
  .prod-card,.prod-card.about{padding:18px 20px;flex-basis:auto;width:100%}
  .spec{grid-template-columns:120px 1fr}
  .page-card{padding:22px 18px}
  .page-card h1{font-size:30px}

  .footer-cols{padding-top:24px;padding-bottom:16px;gap:16px;grid-template-columns:1fr}
  .footer-shop{display:none}
  .footer-note{font-size:14.5px}
}
@media (min-width:901px){ .filters-toggle{display:none} }
/* Check a repair (inc/repairs.php) */
.repair{display:grid;gap:16px;max-width:720px}
.repair-card{padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.repair-card h3{margin:0 0 8px}
.repair-status{margin:4px 0 6px;font-size:26px}
.repair-status.is-finished{color:var(--ok)}
.repair-status.is-parts,.repair-status.is-waiting{color:var(--low)}
.repair-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:12px 0 0}
.repair-facts dt{font-weight:700}
.repair-facts dd{margin:0}
.repair-steps{margin:0;padding-left:20px;display:grid;gap:4px}
.repair-comment{padding:8px 0;border-bottom:1px solid var(--line)}
.repair-comment p{margin:0}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit}
.repair-fault-summary{margin:0 0 4px;font-weight:700}
.repair-fault{margin:0 0 6px;white-space:normal}
.repair-hidden-note{margin:0 0 8px;font-size:14px}
/* SMS history: one full-width row a text, newest first; the shop's white, the customer's tinted. */
.repair-sms{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.repair-sms li{padding:10px 14px;border-radius:10px;border:1px solid var(--line);overflow-wrap:anywhere}
.repair-sms li p{margin:0}
.repair-files{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.repair-files li{display:grid;gap:4px;font-size:.85rem}
.repair-files a{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:1;background:var(--bg)}
.repair-files img{width:100%;height:100%;object-fit:cover;display:block}
.repair-file-doc{display:flex;align-items:center;justify-content:center;height:100%;padding:10px;text-align:center;overflow-wrap:anywhere;font-weight:600}
.repair-file-doc::before{content:attr(data-ext);display:block;margin-right:6px;padding:2px 6px;border-radius:6px;background:var(--navy);color:#fff;font-size:.75rem}
.repair-sms-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:15px;margin-bottom:2px!important}
.repair-sms-shop{background:var(--card)}
.repair-sms-you{background:var(--accent-soft);border-color:transparent}
.repair-sms-note{margin:0 0 8px;font-size:14px}
.repair-sms-older{margin-top:10px}
.repair-other{margin-top:16px}
.repair-book{margin:16px 0 0}
.booking-verify-by{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.booking-verify-by legend{font-weight:700;margin-bottom:6px;padding:0}
.booking-verify-by .check{display:inline-flex;align-items:center;gap:8px;font-weight:400}
.booking-verify-other{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px}
.booking-note{margin:0;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy)}
.repair-other summary{cursor:pointer;color:var(--muted);text-decoration:underline;margin-bottom:12px}
.repair-sms-older summary{cursor:pointer;color:var(--muted);text-decoration:underline;margin-bottom:8px}
.repair-list{margin:0;padding-left:18px;display:grid;gap:6px}
/* Orders (inc/orders.php): what happens next, above the order's lines. */
.order-next{padding:14px 18px;margin:0 0 18px}
.order-next p{margin:0}