/* ===== Strait Hat Company v0.5c — Shop Hats consolidated styling ===== */

.shop-head{
  background:linear-gradient(105deg,#07182d,#12375f);
  color:#fff;
}
.shop-head h1{color:#fff}
.shop-head p{color:#dfe8f2}
.shop-eyebrow{color:#fff}

.shop-section{background:#f6f8fb}

.shop-grid{
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

.shop-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}

.shop-image{
  height:230px;
  background:#fff;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px 0;
  border-bottom:1px solid #eef1f5;
}

.shop-image img{
  display:block;
  width:auto;
  height:auto;
  max-width:70%;
  max-height:205px;
  object-fit:contain;
  margin:0 auto;
}

.shop-badge{
  position:absolute;
  top:14px;
  left:14px;
  background:var(--red);
  color:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
}

.shop-info{
  padding:18px 28px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.shop-title-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:start;
}

.shop-title-row h2{
  font-size:45px;
  color:var(--navy);
  margin:2px 0 0;
}

.shop-subtitle{
  margin:2px 0 0;
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
  font-size:13px;
}

.fit-pill{
  background:var(--navy);
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-size:11px;
  font-weight:800;
}

.shop-description{
  color:var(--muted);
  line-height:1.65;
}

.shop-info h3{
  font-size:15px;
  color:var(--navy);
  margin:22px 0 12px;
}

.swatch-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.swatch-wrap{text-align:center}

.swatch-wrap small{
  display:block;
  color:#58677a;
  font-size:11px;
  margin-top:6px;
}

.swatch{
  display:block;
  width:46px;
  height:46px;
  border-radius:50%;
  margin:auto;
  border:3px solid #fff;
  box-shadow:0 0 0 1px #cdd4dd;
  position:relative;
  overflow:hidden;
}

.swatch:after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:50%;
  height:100%;
}

.tan-navy{background:#c7aa7a}
.tan-navy:after{background:#102a4c}
.black-black{background:#151515}
.black-black:after{background:#151515}
.charcoal-black{background:#666b70}
.charcoal-black:after{background:#111}
.navy-white{background:#122b4d}
.navy-white:after{background:#f4f4f4}
.white-black{background:#f4f4f4}
.white-black:after{background:#111}

.inventory-note{
  font-size:12px;
  color:#7a8797;
  line-height:1.45;
  margin:14px 0 0;
}

.shop-spec-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:24px 0;
}

.shop-spec-grid div{
  background:#f7f9fb;
  border:1px solid #e6eaf0;
  border-radius:9px;
  padding:12px;
}

.shop-spec-grid strong{
  display:block;
  font-size:11px;
  color:#7b8796;
  text-transform:uppercase;
  margin-bottom:4px;
}

.shop-spec-grid span{
  font-size:13px;
  color:#27364c;
}

.shop-actions{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:10px;
  margin-top:auto;
}

.shop-actions .btn{
  padding-left:10px;
  padding-right:10px;
}

.shop-compare{
  max-width:1180px;
  margin:auto;
  background:var(--navy);
  color:#fff;
  border-radius:18px;
  padding:34px 38px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:center;
}

.shop-compare h2{
  font-size:31px;
  margin:6px 0 8px;
}

.shop-compare p{
  color:#dce5ef;
  line-height:1.6;
  margin:0;
  max-width:760px;
}

@media(max-width:1000px){
  .shop-grid{grid-template-columns:1fr}
  .shop-image{height:220px}
  .shop-image img{
    max-width:68%;
    max-height:195px;
  }
}

@media(max-width:680px){
  .shop-image{
    height:205px;
    padding:12px 18px 0;
  }
  .shop-image img{
    max-width:76%;
    max-height:180px;
  }
  .shop-info{padding:18px 21px 24px}
  .shop-title-row h2{font-size:37px}
  .swatch-row{grid-template-columns:repeat(2,1fr)}
  .shop-spec-grid{grid-template-columns:1fr}
  .shop-actions{grid-template-columns:1fr}
  .shop-compare{
    grid-template-columns:1fr;
    padding:28px 24px;
  }
}