/* =========================================================================
   I ♥ CAPITALISM — a 1999 dot-com superstore for defunct corporate swag.
   Web-safe colors, beveled borders, marquees. Best viewed at 800×600.
   ========================================================================= */

:root{
  --navy:#000080; --teal:#008080; --silver:#c0c0c0; --gold:#ffcc00;
  --link:#0000cc; --vlink:#660099; --ink:#1a1a1a; --cream:#fffdf5; --red:#cc0000;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:14px/1.5 Arial, Helvetica, sans-serif; color:var(--ink);
  background:var(--teal);
  background-image:repeating-linear-gradient(45deg,#0a8a8a 0 2px,#008080 2px 8px);
}
a{color:var(--link); text-decoration:underline; cursor:pointer}
a:visited{color:var(--vlink)}
a:hover{color:var(--red)}
img{border:0}

.wrap{max-width:880px; margin:0 auto; background:var(--cream);
      border:2px outset var(--silver); box-shadow:0 0 0 4px rgba(0,0,0,.25)}

/* ---- masthead ---- */
header{background:var(--navy); color:#fff; padding:10px 14px;
       display:flex; align-items:center; gap:14px; flex-wrap:wrap;
       border-bottom:3px ridge var(--gold)}
.brand{font:bold 26px "Times New Roman", Georgia, serif; white-space:nowrap; cursor:pointer}
.brand .h{color:#ff3344}
.brand small{display:block; font:italic 11px Arial; color:#cfe}
.search{margin-left:auto; display:flex; gap:4px; align-items:center}
.search input{border:2px inset var(--silver); padding:3px 5px; font:13px Arial; width:150px}
.btn{font:bold 12px Arial; padding:3px 9px; border:2px outset var(--silver);
     background:var(--silver); color:#000; cursor:pointer; text-decoration:none; display:inline-block}
.btn:visited{color:#000}
.btn:active{border-style:inset}
.btn.primary{background:var(--gold); color:#7a0000}
.btn.big{font-size:14px; padding:7px 14px}
.cart{color:var(--gold); font-weight:bold; white-space:nowrap; text-decoration:none}
.cart:visited{color:var(--gold)}

/* ---- top nav ---- */
nav.top{background:#003; padding:6px 10px; border-bottom:2px groove var(--silver)}
nav.top a{color:#9cf; font-weight:bold; margin-right:2px; padding:2px 9px;
          text-decoration:none; border-radius:2px}
nav.top a.on,nav.top a:hover{background:var(--gold); color:#003}

/* ---- layout ---- */
.cols{display:flex; gap:0}
aside{width:180px; flex:none; background:#eef3ee; border-right:2px groove var(--silver); padding:12px 10px}
main{flex:1; padding:14px 16px; min-width:0}
.box{border:2px ridge var(--silver); background:#fff; margin-bottom:14px}
.box h3{margin:0; background:var(--navy); color:#fff; font:bold 12px Arial;
        padding:5px 8px; text-transform:uppercase; letter-spacing:.5px}
.box ul{list-style:none; margin:0; padding:6px 8px}
.box li{padding:2px 0; border-bottom:1px dotted #bbb}
.box li:last-child{border-bottom:0}
.box li a{text-decoration:none; font-size:13px}
.box li a.on{color:var(--red); font-weight:bold}
.counter{font:bold 16px "Courier New", monospace; background:#000; color:#0f0;
         padding:4px 6px; letter-spacing:3px; text-align:center; border:2px inset #444}
.badge{width:88px; height:31px; margin:4px 2px 0; font:bold 10px Arial;
       color:#fff; text-align:center; line-height:1.1; border:1px solid #000;
       display:inline-flex; align-items:center; justify-content:center; text-decoration:none}
.badge:visited{color:#fff}

/* ---- page heads ---- */
h1.pagetitle{font:bold 20px "Times New Roman", serif; color:var(--navy); margin:0 0 2px}
.crumbs{font-size:12px; color:#555; margin-bottom:12px}
.crumbs b{color:#000}
.count{font-size:12px; color:#777; margin:0 0 10px}
.count.notice{color:#7a4a00; background:#fff7e0; border:1px solid #e8c97a; padding:6px 8px}
.count.notice b{color:#7a0000}

/* ---- product grid ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.card{border:2px outset var(--silver); background:#fff; padding:8px; text-align:center; position:relative}
.card .thumb{height:96px; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer}
.card .thumb img,.card .thumb svg{max-width:100%; max-height:96px}
.card .pname{font:bold 12px Arial; margin:6px 0 2px; min-height:30px}
.card .pname a{text-decoration:none; color:var(--navy)}
.card .price{color:var(--red); font:bold 15px Arial}
.card .add{margin-top:6px; width:100%; font:bold 11px Arial; padding:4px; text-align:center;
           border:2px outset var(--silver); background:#ffe9a8; cursor:pointer; text-decoration:none;
           color:#000; display:block}
.card .add:visited{color:#000}
.card .add:active{border-style:inset}
/* third-party search links look cooler/quieter than the gold "buy" button */
.card .add.search{background:#dbe7f3; font-weight:bold}
.new{position:absolute; top:4px; right:4px; background:var(--red); color:#fff;
     font:bold 9px Arial; padding:1px 4px; transform:rotate(8deg)}

/* ---- companies directory ---- */
.companygrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:12px}
.companycard{border:2px outset var(--silver); background:#fff; padding:10px 6px; text-align:center; cursor:pointer}
.companycard:hover{background:#fffceb}
.companycard .logo{height:60px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.companycard .logo img,.companycard .logo svg{max-width:84px; max-height:60px}
.co-logo-img{object-fit:contain}
.companycard .nm{font:bold 12px Arial; margin-top:7px; color:var(--navy)}

/* ---- single company ---- */
.cohead{display:flex; gap:14px; align-items:flex-start; border:2px ridge var(--silver);
        background:#fff; padding:12px; margin-bottom:14px}
.cohead .logo{width:84px; height:84px; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden}
.cohead .logo img,.cohead .logo svg{max-width:84px; max-height:84px}
.cohead h2{margin:0 0 2px; font:bold 20px "Times New Roman",serif; color:var(--navy)}
.cohead .sector{font-size:12px; color:#777; margin-bottom:6px}
.cohead .blurb{font-size:13px; margin:0 0 10px}
.coactions{display:flex; gap:8px; flex-wrap:wrap}

/* ---- item detail ---- */
.detail{display:flex; gap:16px; flex-wrap:wrap; border:2px ridge var(--silver); background:#fff; padding:14px}
.detail .img{width:220px; height:220px; flex:none; display:flex; align-items:center; justify-content:center;
             border:2px inset var(--silver); background:#fff; overflow:hidden}
.detail .img img,.detail .img svg{max-width:100%; max-height:216px}
.detail .info{flex:1; min-width:200px}
.detail .info h2{margin:0 0 4px; font:bold 19px "Times New Roman",serif; color:var(--navy)}
.detail .info .price{color:var(--red); font:bold 22px Arial; margin-bottom:10px}
.detail dl{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:13px; margin:0 0 10px}
.detail dt{color:#777; font-weight:bold}
.detail dd{margin:0}
.detail .blurb{font-size:13px; font-style:italic; color:#333; margin-bottom:12px}

/* ---- prose (about) ---- */
.prose{border:2px ridge var(--silver); background:#fff; padding:14px 18px; font-size:14px}
.prose h2{margin:0 0 8px; font:bold 20px "Times New Roman",serif; color:var(--navy)}
.prose p{margin:0 0 10px}

/* ---- footer ---- */
footer{background:var(--navy); color:#cdd; text-align:center; padding:14px; font-size:11px;
       border-top:3px ridge var(--gold)}
footer a{color:#9cf}
.ring{margin:6px 0; font-size:11px}

@media(max-width:560px){
  .cols{flex-direction:column}
  aside{width:auto; border-right:0; border-bottom:2px groove var(--silver)}
  .search{margin-left:0; order:3; width:100%}
  .search input{flex:1; width:auto}
}