/* Electronics storefront: graphite, cool white, and a focused blue action color. */
:root{--accent:#175cd3;--accent-hover:#124baa;--purple:var(--accent);--graphite:#111c2d;--focus:#80aef9}
body{font-family:'Noto Sans TC',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,.brand{font-family:'Noto Sans TC',system-ui,sans-serif;font-weight:700;letter-spacing:.015em}
h1,h2{line-height:1.45}.brand{letter-spacing:.12em}.brand small{font-weight:500}
.announcement{background:var(--graphite);color:#e9eff8}
.head nav a.active{font-weight:600}.head nav a:hover,.more:hover{color:var(--accent)}
.btn{font-weight:600;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.light:hover:not(:disabled),.btn.soft:hover:not(:disabled){background:#edf3ff;border-color:#9bbbea;color:var(--accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hero{background:var(--graphite);color:#f8faff;border-bottom:1px solid #26374e}
.hero h1{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.45;letter-spacing:.01em}
.hero p,.hero .muted{color:#b8c5d9}.hero .eyebrow{color:#92b9ff}
.hero .btn.light{background:transparent;border-color:#8292aa;color:#f5f8ff}
.hero .btn.light:hover{background:#23334b;border-color:#a1b3ce}
.heroart{background:radial-gradient(ellipse at 60% 65%,#34475f 0,transparent 68%)}
.heroart:before,.herolabel{color:#b8c5d9}.herolabel{border-color:#7c91ac}
.heroart .placeholder{background:transparent;color:#c3d0e1}
.services .icon{color:var(--accent)}.service strong{font-weight:600}
.catart{border-radius:18%;border:1px solid var(--line)}
.purchase-card{border-color:#dfe5ed;border-radius:9px;transition:border-color .18s,box-shadow .18s}
.purchase-card:hover{border-color:#a6bddc;box-shadow:0 4px 18px #172b4d09}
.product h3{font-weight:600}.product .category{color:#5d697a}
.price{color:#172231;font-weight:700;font-variant-numeric:tabular-nums}
.tag{color:#344760;border:1px solid #dfe5ed;font-weight:500}
.purchase-card .product-purchase{display:flex;flex-wrap:wrap}
.purchase-card .product-quantity{flex:1 1 5.25rem}
.purchase-card .product-cart{flex:2 1 6.5rem}
.product-quantity button{background:#f0f4fa;color:#344760}
.btn.line-contact{background:#fff;border-color:#b5d8c4;color:#13733f}
.btn.line-contact:hover:not(:disabled){background:#eef8f1;border-color:#13733f;color:#105e34}
.btn.line-contact:disabled{background:#f4f6f9;border-color:#dfe5ed;color:#68768a;opacity:1}
.storybanner{border:1px solid var(--line)}.storycopy .muted{color:#526176}
.newsletter{background:#edf3fc;border-top:1px solid #dde7f5}
.footer{background:var(--graphite);color:#f0f4fa}
.footer .muted,.footer a:not(.brand),.footer .brand small,.footbottom{color:#b8c5d9}
.footer h4{font-weight:600}.footer a:hover{color:#fff}.footbottom{border-color:#34435b}
.bottomnav a{color:#5d697a}.bottomnav a.active{color:var(--accent);font-weight:600}
@media(prefers-reduced-motion:reduce){.btn,.purchase-card,.catart,.pic svg{transition:none}}

/* Category and tag management, product associations, and archive pages. */
.taxonomy-field{border:1px solid var(--line);border-radius:.5rem;padding:1rem;min-width:0}
.taxonomy-field legend{padding:0 .35rem;font-weight:600}.taxonomy-field .checkgrid{margin:.5rem 0 1rem;max-height:15rem;overflow:auto}
.taxonomy-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 1.5rem}.taxonomy-chips a{border:1px solid #c6d7f0;background:#f0f5ff;color:var(--accent);border-radius:1.5rem;padding:.45rem .85rem;font-size:.8rem;overflow-wrap:anywhere}
.taxonomy-intro{max-width:55rem;color:var(--muted);line-height:1.9;margin:0 0 2rem;overflow-wrap:anywhere}
.taxonomy-archive .toolbar{flex-wrap:wrap}.taxonomy-archive .toolbar input{min-width:0;flex:1 1 12rem}.taxonomy-archive h1{overflow-wrap:anywhere}
.pagination{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0}.recordinfo small,.seoexample{overflow-wrap:anywhere}
#taxonomy-editor .publishpanel>.btn{width:100%;margin-top:.8rem}.full{grid-column:1/-1}
@media(max-width:760px){.taxonomy-field .checkgrid{grid-template-columns:1fr}.taxonomy-archive .toolbar .btn{flex:1 1 auto}}