@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

/* ── Home button ── */
.tsw-home-btn{
  position:fixed;top:16px;left:24px;
  color:#444;z-index:9999;
  transition:color 0.3s;
  display:flex;align-items:center;
  text-decoration:none;
}
.tsw-home-btn:hover{color:#ffffff;}

/* ── Main wrapper ── */
.tsw{
  width:100%;
  background:#111111;
  font-family:'Montserrat',sans-serif;
  color:#ffffff;
}

/* ── Progress bar ── */
.tsw-bar{position:fixed;top:0;left:0;width:100%;height:3px;background:#1a1a1a;z-index:9999;}
.tsw-bar-fill{height:100%;background:#ffffff;transition:width 0.4s ease;width:0%;}

/* ── Step dots ── */
.tsw-dots{position:fixed;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;z-index:9998;}
.tsw-dot{width:6px;height:6px;border-radius:50%;background:#333;transition:all 0.3s;}
.tsw-dot.active{width:20px;border-radius:3px;background:#fff;}
.tsw-dot.done{background:#555;}

/* ── Steps — full viewport, padded above and below for bars ── */
.tsw-step{
  display:none;
  width:100%;
  min-height:100vh;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 40px 100px;
  animation:fadeUp 0.4s ease forwards;
}
.tsw-step.active{display:flex;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

/* ── Step labels and titles ── */
.tsw-label{font-size:9px;letter-spacing:4px;color:#444;text-transform:uppercase;margin-bottom:8px;}
.tsw-title{font-size:clamp(18px,3vw,32px);font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:24px;text-align:center;color:#fff;}

/* ── Hat preview image ── */
.tsw-preview-wrap{position:relative;width:100%;max-width:320px;margin-bottom:20px;}
.tsw-preview-wrap img{width:100%;height:auto;display:block;transition:opacity 0.3s;}

/* ── Selection label ── */
.tsw-sel{font-size:9px;letter-spacing:3px;color:#444;text-transform:uppercase;margin-bottom:16px;min-height:14px;transition:all 0.3s;}
.tsw-sel span{color:#fff;}

/* ── Hat colour swatches ── */
.tsw-swatches{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:16px;}
.tsw-swatch-wrap{text-align:center;}
.tsw-swatch{width:38px;height:38px;border-radius:50%;cursor:pointer;border:2px solid #2a2a2a;transition:all 0.3s;margin:0 auto 6px;}
.tsw-swatch:hover{transform:scale(1.1);border-color:#444;}
.tsw-swatch.selected{border-color:#fff;box-shadow:0 0 0 3px #111,0 0 0 5px #fff;}
.tsw-swatch-name{font-size:8px;letter-spacing:2px;color:#444;text-transform:uppercase;}

/* ── Embroidery colour grid ── */
.tsw-emb{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:480px;margin-bottom:16px;}
.tsw-emb-item{text-align:center;cursor:pointer;}
.tsw-emb-dot{width:30px;height:30px;border-radius:50%;border:2px solid #2a2a2a;margin:0 auto 4px;transition:all 0.3s;}
.tsw-emb-item:hover .tsw-emb-dot{transform:scale(1.12);border-color:#444;}
.tsw-emb-item.selected .tsw-emb-dot{border-color:#fff;box-shadow:0 0 0 3px #111,0 0 0 5px #fff;}
.tsw-emb-name{font-size:8px;letter-spacing:1px;color:#444;text-transform:uppercase;}

/* ── Magnet option cards ── */
.tsw-magnets{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:16px;}
.tsw-magnet{width:180px;background:#161616;border:1px solid #222;padding:24px 16px;cursor:pointer;transition:all 0.3s;text-align:center;}
.tsw-magnet:hover{border-color:#555;}
.tsw-magnet.selected{border-color:#fff;}
.tsw-magnet-icon{font-size:24px;margin-bottom:12px;display:block;}
.tsw-magnet-name{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#fff;margin-bottom:6px;}
.tsw-magnet-desc{font-size:9px;color:#444;line-height:1.7;letter-spacing:1px;}
.tsw-disclaimer{font-size:9px;color:#333;text-align:center;letter-spacing:1px;line-height:1.8;max-width:340px;margin-top:12px;}

/* ── Summary step ── */
#tsw-step-4{
  justify-content:flex-start;
  padding-top:80px;
  padding-bottom:120px;
}

.tsw-summary-wrap{
  width:100%;
  max-width:860px;
  display:flex;
  gap:32px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:24px;
}
.tsw-summary-img{width:100%;max-width:320px;flex-shrink:0;}
.tsw-summary-img img{width:100%;height:auto;display:block;}
.tsw-summary-details{flex:1;min-width:260px;max-width:400px;}
.tsw-summary-heading{font-size:10px;letter-spacing:4px;color:#444;text-transform:uppercase;margin-bottom:20px;}
.tsw-summary-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #1a1a1a;font-size:10px;letter-spacing:2px;text-transform:uppercase;}
.tsw-summary-row:last-of-type{border-bottom:none;}
.tsw-summary-key{color:#444;}
.tsw-summary-val{color:#fff;display:flex;align-items:center;gap:8px;}
.tsw-summary-total{display:flex;justify-content:space-between;padding:16px 0 0;margin-top:8px;border-top:1px solid #2a2a2a;}
.tsw-total-key{font-size:10px;letter-spacing:3px;color:#555;text-transform:uppercase;}
.tsw-total-val{font-size:20px;font-weight:700;letter-spacing:2px;color:#fff;}
.tsw-summary-actions{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
.tsw-btn-cart{background:#fff;border:1px solid #fff;color:#111;padding:14px;font-size:10px;letter-spacing:4px;text-transform:uppercase;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:700;transition:all 0.3s;width:100%;text-align:center;}
.tsw-btn-cart:hover{background:transparent;color:#fff;}
.tsw-btn-another{background:transparent;border:1px solid #2a2a2a;color:#555;padding:12px;font-size:10px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;font-family:'Montserrat',sans-serif;transition:all 0.3s;width:100%;text-align:center;}
.tsw-btn-another:hover{border-color:#555;color:#fff;}
.tsw-summary-disc{font-size:9px;color:#2a2a2a;letter-spacing:1px;line-height:1.8;margin-top:16px;text-align:center;}

/* ── BOTTOM BAR — always fixed, buttons live here ── */
.tsw-bottom{
  position:fixed;bottom:0;left:0;width:100%;
  background:#0a0a0a;
  border-top:1px solid #1a1a1a;
  padding:14px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:9997;
}
.tsw-bottom-left{display:flex;gap:24px;align-items:center;flex:1;}
.tsw-bottom-item{display:flex;flex-direction:column;gap:3px;}
.tsw-bottom-key{font-size:8px;letter-spacing:2px;color:#444;text-transform:uppercase;}
.tsw-bottom-val{font-size:10px;letter-spacing:1px;color:#fff;text-transform:uppercase;}
.tsw-bottom-right{display:flex;align-items:center;gap:16px;}
.tsw-bottom-price{font-size:18px;font-weight:700;letter-spacing:2px;color:#fff;}
.tsw-bottom-nav{display:flex;gap:10px;align-items:center;}

/* ── Bottom bar buttons ── */
.tsw-bar-btn-back{
  background:transparent;
  border:1px solid #2a2a2a;
  color:#555;
  padding:10px 24px;
  font-size:9px;
  letter-spacing:3px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.3s;
  font-family:'Montserrat',sans-serif;
  white-space:nowrap;
}
.tsw-bar-btn-back:hover{border-color:#555;color:#fff;}

.tsw-bar-btn-next{
  background:#fff;
  border:1px solid #fff;
  color:#111;
  padding:10px 32px;
  font-size:9px;
  letter-spacing:3px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.3s;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  white-space:nowrap;
}
.tsw-bar-btn-next:hover{background:transparent;color:#fff;}
.tsw-bar-btn-next:disabled{opacity:0.25;cursor:not-allowed;}

/* ── Mobile ── */
@media(max-width:768px){
  .tsw-step{padding:60px 20px 100px;}
  .tsw-bottom{padding:12px 16px;}
  .tsw-bottom-item:nth-child(n+2){display:none;}
  .tsw-summary-wrap{flex-direction:column;align-items:center;}
  .tsw-summary-img{max-width:240px;}
  .tsw-summary-details{width:100%;min-width:unset;max-width:100%;}
  .tsw-preview-wrap{max-width:240px;}
  .tsw-magnet{width:140px;padding:16px 12px;}
  .tsw-bottom-price{font-size:14px;}
  .tsw-bar-btn-next{padding:10px 20px;}
  .tsw-bar-btn-back{padding:10px 16px;}
}
/* ── Ensure step 3 content never hides behind bottom bar ── */
#tsw-step-3 {
  justify-content: flex-start;
  padding-top: 60px;
  padding-bottom: 100px;
  overflow-y: auto;
  height: 100vh;
}