/* Merch page: product builder */
.merch-page { background: #f3edcf; }
.merch-slogan { text-align: center; font-weight: bold; font-size: 20px; color: #1646ce; }
.step { color: #e22; margin: 22px 0 10px; font-size: 18px; }

/* The print design (logo + icon + key + name) - sized by its own width */
.mdesign { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 4 / 3; }
.mdesign img { position: absolute; display: block; }
.md-icon { left: 43%; top: 4%; width: 47%; }
.md-logo { left: 3.3%; top: 30%; width: 91.7%; z-index: 1; }
.md-key { left: 12.5%; top: 63%; width: 10%; transform: rotate(28deg); transform-origin: 50% 10%; z-index: 2; }
.md-label {
  position: absolute; z-index: 2; left: 34%; width: 63%; top: 77%; text-align: center; white-space: nowrap;
  font-family: "Inter", "Arial Black", Arial, sans-serif; font-weight: 900; color: #fff; letter-spacing: .3cqw; line-height: 1;
  text-shadow: .6cqw 0 0 #000, -.6cqw 0 0 #000, 0 .6cqw 0 #000, 0 -.6cqw 0 #000, .45cqw .45cqw 0 #000, -.45cqw -.45cqw 0 #000, .45cqw -.45cqw 0 #000, -.45cqw .45cqw 0 #000;
}
.md-original { aspect-ratio: 4 / 2.4; }
.md-original .md-logo { top: 4%; }
.md-original .md-key { top: 50%; }

/* Product tiles */
.prod-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.prod-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; background: linear-gradient(#efefef, #b9b9b9); font-size: 13px; }
.prod-tile .pt-ico { font-size: 30px; }
.prod-tile span:last-child { color: #c22; font-weight: 900; font-size: 15px; }
.prod-tile.on { background: #111; color: #ffdf2d; border-color: #ffdf2d; }

/* Builder */
.builder { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-top: 16px; align-items: start; }
.mb-left { position: sticky; top: 10px; }
.stage-wrap { background: radial-gradient(circle at 50% 40%, #fff, #e4e4ea); border: 4px ridge #6545ff; padding: 10px; }
.stage { position: relative; width: 100%; }
.prod-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-design { position: absolute; }
.pv-tagline { position: absolute; left: 25%; right: 25%; text-align: center; color: #fff; font: 800 clamp(7px, 1.05vw, 12px)/1.2 "Inter", Arial, sans-serif; letter-spacing: 1px; opacity: .92; }
/* die-cut look for keychain + sticker: white border with a thin black edge */
.pv-keychain .mdesign, .pv-sticker .mdesign {
  filter: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff)
          drop-shadow(2px 0 0 #222) drop-shadow(-2px 0 0 #222) drop-shadow(0 2px 0 #222) drop-shadow(0 -2px 0 #222)
          drop-shadow(5px 8px 6px rgba(0,0,0,.35));
}
.pv-sticker { transform: rotate(-4deg); }
.pv-hat .mdesign { transform: perspective(500px) rotateX(8deg); }
.mb-title { text-align: center; font: 900 20px "Arial Black", Arial, sans-serif; margin: 10px 0 0; color: #111; }

.mb-right { background: #fff; border: 4px outset #ccc; box-shadow: 4px 4px 0 #111; padding: 14px; color: #111; }
.mb-right h4 { margin: 0 0 8px; color: #e52d2d; border-bottom: 2px solid #111; padding-bottom: 6px; }
.design-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 330px; overflow-y: auto; padding: 4px; border: 2px inset #bbb; background: #f4f4f4; }
.design-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 3px; font: bold 10.5px/1.1 Arial, sans-serif; border-width: 3px; background: #fff; }
.design-btn img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.design-btn.on { background: #ffdf2d; border-style: inset; }
.opt { margin-top: 14px; }
.opt label { display: block; font-weight: bold; margin-bottom: 6px; }
.swatches, .sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { width: 38px; height: 38px; padding: 0; border: 3px solid #bbb; border-radius: 50%; }
.sw.on { border-color: #ffdf2d; box-shadow: 0 0 0 3px #111; }
.sz { min-width: 46px; padding: 7px 8px; }
.sz.on { background: #111; color: #ffdf2d; border-style: inset; }
.qty { display: flex; align-items: center; gap: 10px; }
.qty button { width: 40px; font-size: 18px; padding: 4px; }
.qty span { font: bold 22px "Courier New", monospace; min-width: 26px; text-align: center; }
.mb-price { margin-top: 16px; font: 40px Impact, "Arial Black", Arial, sans-serif; color: #e52d2d; }
.mb-price small { font: bold 12px "Courier New", monospace; color: #333; margin-left: 6px; }
.mb-reserve { display: block; width: 100%; margin-top: 10px; padding: 12px; font-size: 18px; background: #ffdf2d; }
.mb-msg { margin-top: 10px; padding: 10px; background: #111; color: #fff; border: 3px double #ffdf2d; font-size: 13px; }
.mb-notes p { font-size: 13px; margin: 8px 0 0; }
.mb-notes .incl { color: #1646ce; font-weight: bold; }

@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
  .mb-left { position: static; }
  .prod-tiles { grid-template-columns: repeat(3, 1fr); }
  .design-grid { grid-template-columns: repeat(3, 1fr); max-height: 260px; }
  .pv-tagline { font-size: 7px; letter-spacing: .5px; }
}