/* The Brands Overstock — dense off-price outlet marketplace */
:root{
  --navy:#12284c; --navy-dk:#0c1c36; --red:#e01f2d; --red-dk:#b8121e;
  --ink:#1c2430; --muted:#6b7280; --line:#e2e6ea; --bg:#f4f6f8; --card:#fff;
  --green:#0a7d3c; --yellow:#ffcf33;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,"Helvetica Neue",sans-serif;color:var(--ink);background:var(--bg);line-height:1.45;font-size:14px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:1300px;margin:0 auto;padding:0 16px}

/* utility top strip */
.util{background:var(--navy-dk);color:#cdd6e4;font-size:12px}
.util .container{display:flex;justify-content:space-between;padding:6px 16px}
.util a{color:#cdd6e4}

/* header */
header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:60}
.hbar{display:flex;align-items:center;gap:22px;padding:14px 16px;max-width:1300px;margin:0 auto}
.logo{font-size:24px;font-weight:800;letter-spacing:-.5px;color:#fff;white-space:nowrap}
.logo b{color:var(--yellow)}
.search{flex:1;display:flex;max-width:640px}
.search input{flex:1;border:none;padding:11px 14px;font-size:14px;border-radius:4px 0 0 4px}
.search button{background:var(--red);color:#fff;border:none;padding:0 20px;font-weight:700;border-radius:0 4px 4px 0;cursor:pointer}
.hicons{display:flex;gap:20px;align-items:center;font-size:12px}
.hicons a{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.hicons .big{font-size:18px}
.cart-pill{background:var(--red);color:#fff;border-radius:50%;font-size:11px;font-weight:700;padding:1px 6px;position:relative;top:-6px;left:-4px}

/* category nav */
.catnav{background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
.catnav .row{display:flex;gap:0;max-width:1300px;margin:0 auto;padding:0 8px}
.catnav a{padding:12px 16px;font-size:13px;font-weight:700;white-space:nowrap;color:var(--ink);border-bottom:3px solid transparent}
.catnav a:hover{color:var(--red);border-bottom-color:var(--red)}
.catnav a.sale{color:var(--red)}

/* hero deal banners */
.deals{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;padding:18px 0}
.deal{border-radius:8px;overflow:hidden;position:relative;min-height:180px;display:flex;align-items:flex-end;color:#fff}
.deal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.deal .lbl{position:relative;padding:20px;z-index:2}
.deal .lbl h3{font-size:22px;font-weight:800;margin-bottom:4px}
.deal .lbl span{background:var(--yellow);color:#1c2430;font-weight:800;font-size:12px;padding:3px 8px;border-radius:3px}
.deal.big{grid-row:span 1}

/* strip */
.brandstrip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.brandstrip .row{display:flex;justify-content:space-around;flex-wrap:wrap;gap:14px;font-weight:800;color:var(--muted);letter-spacing:1px;font-size:15px}

/* layout with sidebar */
.shop{display:grid;grid-template-columns:210px 1fr;gap:22px;padding:22px 0}
.side h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;color:var(--navy)}
.side a{display:block;padding:6px 0;color:var(--ink);font-size:13px;border-bottom:1px solid var(--line)}
.side a:hover{color:var(--red)}
.side .pillbox{display:flex;flex-wrap:wrap;gap:6px}
.side .pillbox span{border:1px solid var(--line);border-radius:3px;padding:4px 8px;font-size:12px;cursor:pointer}

/* toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.toolbar h1{font-size:20px}
.toolbar .count{color:var(--muted);font-size:13px}

/* dense product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.card:hover{box-shadow:0 6px 18px rgba(18,40,76,.12)}
.card .thumb{aspect-ratio:1;background:#eef1f4;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.off-badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-weight:800;font-size:11px;padding:3px 7px;border-radius:3px;z-index:2}
.card-body{padding:10px;display:flex;flex-direction:column;flex:1}
.brand{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--navy)}
.card h3{font-size:13px;font-weight:400;margin:3px 0 6px;line-height:1.3;color:var(--ink);min-height:34px}
.card h3 a:hover{color:var(--red)}
.pricing{margin-top:auto}
.pricing .now{font-size:17px;font-weight:800;color:var(--red)}
.pricing .msrp{font-size:12px;color:var(--muted);text-decoration:line-through;margin-left:6px}
.pricing .comp{font-size:11px;color:var(--muted)}
.pricing .save{color:var(--green);font-weight:700;font-size:12px}
.rate{font-size:11px;color:#f5a623;margin-top:3px}
.rate span{color:var(--muted)}
.add{margin-top:8px;background:var(--navy);color:#fff;border:none;padding:9px;border-radius:4px;cursor:pointer;font-weight:700;font-size:12px}
.add:hover{background:var(--red)}

/* product detail */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:24px 0}
.pd-img{border:1px solid var(--line);border-radius:8px;overflow:hidden;aspect-ratio:1;background:#fff}
.pd-img img{width:100%;height:100%;object-fit:cover}
.pd .brand{font-size:14px}
.pd h1{font-size:24px;font-weight:700;margin:4px 0 10px}
.pd .price-row{display:flex;align-items:baseline;gap:10px;margin:10px 0}
.pd .price-row .now{font-size:30px;font-weight:800;color:var(--red)}
.pd .price-row .msrp{font-size:16px;color:var(--muted);text-decoration:line-through}
.pd .save-pill{display:inline-block;background:#e7f6ec;color:var(--green);font-weight:800;padding:4px 10px;border-radius:4px;font-size:13px}
.pd .spec{border-top:1px solid var(--line);padding:9px 0;display:flex;justify-content:space-between;font-size:13px}
.pd .spec span:first-child{color:var(--muted)}
.qty{display:flex;gap:10px;align-items:center;margin:14px 0}
.qty button{width:34px;height:34px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:16px;border-radius:4px}
.btn{display:inline-block;background:var(--red);color:#fff;padding:13px 26px;border:none;border-radius:4px;font-weight:800;cursor:pointer;font-size:14px}
.btn:hover{background:var(--red-dk)}
.btn-navy{background:var(--navy)}.btn-navy:hover{background:var(--navy-dk)}

/* cart / checkout */
.checkout{max-width:820px;margin:0 auto;padding:26px 0}
.checkout h1{font-size:24px;margin-bottom:16px}
.line-item{display:flex;gap:14px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:6px;padding:12px;margin-bottom:10px}
.line-item img{width:66px;height:66px;object-fit:cover;border-radius:4px}
.summary{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px;margin-top:12px}
.summary .row{display:flex;justify-content:space-between;padding:5px 0}
.summary .total{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-weight:800;font-size:18px}
.oos{background:#fff;border:2px solid var(--red);border-radius:8px;padding:32px;text-align:center;margin-top:14px}
.oos h2{color:var(--red);font-size:24px}
.oos p{color:var(--muted);margin:10px auto 18px;max-width:460px}
.oos input{width:100%;max-width:360px;padding:13px 14px;border:1px solid var(--line);border-radius:4px;font-size:14px;margin-bottom:12px}
.oos-success{color:var(--green)}
.empty{text-align:center;padding:50px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:6px}

/* footer */
footer{background:var(--navy);color:#c3cdde;margin-top:26px;padding:40px 0 22px}
.foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
footer a{display:block;color:#a9b6cc;font-size:13px;padding:3px 0}
footer a:hover{color:#fff}
.foot-logo{font-size:22px;font-weight:800;color:#fff}
.foot-logo b{color:var(--yellow)}
.foot-bottom{border-top:1px solid #26406a;margin-top:26px;padding-top:16px;text-align:center;font-size:12px;color:#8296b5}

@media(max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .deals{grid-template-columns:1fr 1fr}
  .shop{grid-template-columns:1fr}
  .side{display:none}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .pd{grid-template-columns:1fr}
  .deals{grid-template-columns:1fr}
  .hicons a span:not(.big){display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}