* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #000;
}

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.site-shell {
  width: 100%;
  background: #000;
}

.design-wrap {
  position: relative;
  width: min(100%, 1536px);
  margin: 0 auto;
  background: #000;
}

.site-design {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* All positions are percentages of the 1536 x 1404 approved design */
.hotspot {
  position: absolute;
  z-index: 10;
  display: block;
  border-radius: 8px;
  background: transparent;
  -webkit-tap-highlight-color: rgba(0, 98, 255, .18);
}

.hotspot:focus-visible {
  outline: 3px solid #0c62ff;
  outline-offset: 2px;
}

/* Top navigation */
.home { left: 25.2%; top: .2%; width: 5.8%; height: 5.0%; }
.shop-nav { left: 31.0%; top: .2%; width: 5.4%; height: 5.0%; }
.breaks-nav { left: 36.4%; top: .2%; width: 9.4%; height: 5.0%; }
.prints-nav { left: 45.8%; top: .2%; width: 8.1%; height: 5.0%; }
.about-nav { left: 53.9%; top: .2%; width: 6.5%; height: 5.0%; }
.gallery-nav { left: 60.4%; top: .2%; width: 7.0%; height: 5.0%; }
.contact-nav { left: 67.4%; top: .2%; width: 7.3%; height: 5.0%; }

/* Main CTA buttons */




/* Category tiles */





/* Upcoming show + socials */
.reminder          { left: 3.0%;  top: 67.4%; width: 33.6%; height: 10.7%; }
.whatnot-social    { left: 38.1%; top: 78.4%; width: 9.4%; height: 14.2%; }
.tiktok-social     { left: 47.5%; top: 78.4%; width: 9.4%; height: 14.2%; }
.instagram-social  { left: 56.9%; top: 78.4%; width: 9.4%; height: 14.2%; }

/* Invisible scroll anchors */
.anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.top-anchor     { top: 0; }
.shop-anchor    { top: 40%; }
.breaks-anchor  { top: 40%; }
.prints-anchor  { top: 40%; }
.about-anchor   { top: 80%; }
.gallery-anchor { top: 80%; }
.contact-anchor { top: 96%; }

.mobile-bar {
  display: none;
}

@media (max-width: 760px) {
  body {
    padding-bottom: 0;
  }

  .design-wrap {
    width: 100%;
    margin: 0;
  }

  .site-design {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Keep the approved homepage artwork intact.
     Mobile navigation now follows the artwork naturally,
     eliminating the large empty black gap. */
  .mobile-bar {
    position: relative;
    z-index: 1000;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: 58px;
    width: 100%;
    background: #000;
    border-top: 1px solid rgba(255, 122, 0, .55);
    border-bottom: 1px solid rgba(255, 122, 0, .25);
    box-shadow: none;
  }

  .mobile-bar a {
    display: grid;
    place-items: center;
    min-height: 58px;
    padding: 10px 6px;
    color: #fff;
    text-decoration: none;
    font-size: .83rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
  }

  .mobile-bar a:nth-child(1) {
    color: #ff7a00;
  }

  .mobile-bar a:nth-child(2) {
    color: #1d7cff;
  }

  .mobile-bar a + a {
    border-left: 1px solid rgba(255,255,255,.11);
  }
}

/* v5.1 Cards For Sale */
.cards-sale-section {
  display: block !important;
  width: 100%;
  background:
    radial-gradient(circle at 8% 0%, rgba(12,98,255,.16), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(255,122,0,.12), transparent 28%),
    #050505;
  border-top: 1px solid rgba(255,122,0,.5);
  padding: 44px clamp(14px, 4vw, 54px) 62px;
}

.cards-sale-inner {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.cards-sale-heading {
  margin-bottom: 24px;
}

.cards-sale-kicker {
  color: #ff7a00;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.cards-sale-heading h2 {
  margin: 6px 0 8px;
  color: white;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1;
}

.cards-sale-heading p {
  margin: 0;
  color: #aaa;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.sale-card {
  overflow: hidden;
  background: #0d0d11;
  border: 1px solid #2a2a32;
  border-radius: 16px;
}

.sale-card-image {
  position: relative;
  background: #111;
}

.sale-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.availability-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #0c62ff;
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.sale-card-body {
  padding: 17px;
}

.sale-card-meta {
  color: #ff7a00;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.sale-card-body h3 {
  color: #fff;
  margin: 9px 0 13px;
  font-size: 1.02rem;
  line-height: 1.4;
}

.sale-price {
  color: white;
  font-size: 1.9rem;
  font-weight: 900;
  margin-bottom: 13px;
}

.sale-buy-btn {
  display: block;
  text-align: center;
  padding: 12px 8px;
  border-radius: 9px;
  color: white;
  background: linear-gradient(135deg, #075dff, #1680ff);
  font-size: .76rem;
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 760px) {
  .cards-sale-section {
    padding: 32px 12px 46px;
  }

  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sale-card-body {
    padding: 11px;
  }

  .sale-card-meta {
    font-size: .55rem;
  }

  .sale-card-body h3 {
    font-size: .76rem;
    min-height: 5.5em;
  }

  .sale-price {
    font-size: 1.45rem;
  }

  .sale-buy-btn {
    padding: 10px 5px;
    font-size: .6rem;
  }

  .availability-badge {
    font-size: .53rem;
    padding: 5px 7px;
  }
}

/* v8 PayPal Shopping Cart */
.paypal-add-wrap {
  margin-top: 8px;
  min-height: 44px;
}
.paypal-shipping-note {
  margin-top: 9px;
  color: #8f8f98;
  font-size: .67rem;
  line-height: 1.35;
  text-align: center;
}
.paypal-cart-float {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 95;
  width: min(190px, 46vw);
  padding: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(5,5,7,.94);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
@media (max-width: 760px) {
  .paypal-cart-float {
    right: 10px;
    bottom: 10px;
    width: 150px;
    padding: 6px;
  }
  .paypal-shipping-note {
    font-size: .58rem;
  }
}

.combined-shipping-banner{margin:0 auto 18px;max-width:980px;padding:13px 16px;border:1px solid rgba(255,139,31,.55);border-radius:14px;background:linear-gradient(135deg,rgba(255,139,31,.12),rgba(18,100,255,.10));text-align:center}
.combined-shipping-banner strong{display:block;letter-spacing:.08em;font-size:.82rem}
.combined-shipping-banner span{display:block;margin-top:4px;color:#c8c8d0;font-size:.72rem}

/* v9.2 link fixes */
.hotspot {
  pointer-events: auto;
  touch-action: manipulation;
}
.whatnot-icon-top   { left: 78.0%; top: .7%; width: 3.2%; height: 3.4%; }
.tiktok-icon-top    { left: 81.7%; top: .7%; width: 2.6%; height: 3.4%; }
.instagram-icon-top { left: 84.8%; top: .7%; width: 2.8%; height: 3.4%; }

/* v9.3 bottom social fix */
.whatnot-social,
.tiktok-social,
.instagram-social {
  z-index: 30;
}

/* v9.4 navigation fix */
.home,
.shop-nav,
.breaks-nav,
.prints-nav,
.about-nav,
.gallery-nav,
.contact-nav {
  z-index: 100;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}

/* v10 footer navigation + real About/Contact sections */
.footer-home    { left: 17.3%; top: 95.9%; width: 3.5%; height: 3.3%; z-index: 100; }
.footer-shop    { left: 21.0%; top: 95.9%; width: 3.5%; height: 3.3%; z-index: 100; }
.footer-breaks  { left: 24.8%; top: 95.9%; width: 6.1%; height: 3.3%; z-index: 100; }
.footer-prints  { left: 31.0%; top: 95.9%; width: 5.4%; height: 3.3%; z-index: 100; }
.footer-about   { left: 36.5%; top: 95.9%; width: 4.5%; height: 3.3%; z-index: 100; }
.footer-gallery { left: 41.2%; top: 95.9%; width: 4.8%; height: 3.3%; z-index: 100; }
.footer-contact { left: 46.2%; top: 95.9%; width: 5.1%; height: 3.3%; z-index: 100; }

.about-section,
.contact-section {
  background: #07080b;
  color: #fff;
  padding: 54px 20px;
  border-top: 1px solid rgba(28, 126, 255, .28);
}
.about-inner,
.contact-inner {
  max-width: 940px;
  margin: 0 auto;
}
.about-kicker {
  color: #ff861c;
  font-weight: 900;
  letter-spacing: .14em;
  font-size: .76rem;
  margin-bottom: 8px;
}
.about-section h2,
.contact-section h2 {
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.05;
}
.about-section p {
  margin: 0 0 14px;
  color: #c9cbd1;
  line-height: 1.7;
  font-size: 1rem;
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.contact-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 13px 18px;
  border-radius: 10px;
  border: 1px solid rgba(39, 132, 255, .65);
  background: #11151d;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

/* v10.1 real gallery */
.gallery-section {
  background: #090b10;
  color: #fff;
  padding: 54px 20px;
  border-top: 1px solid rgba(255, 125, 23, .28);
}
.gallery-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.gallery-section h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.05;
}
.gallery-intro {
  color: #c9cbd1;
  line-height: 1.6;
  margin: 0 0 24px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.gallery-item {
  display: block;
  background: #10131a;
  border: 1px solid rgba(45, 132, 255, .35);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform .18s ease, border-color .18s ease;
}
.gallery-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 130, 24, .8);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: #050608;
}
.gallery-item span {
  display: block;
  padding: 12px 14px 14px;
  font-weight: 800;
  font-size: .92rem;
}
.gallery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.gallery-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 13px 18px;
  border-radius: 10px;
  background: #0c5cff;
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}
@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* v10.6 dedicated cards page */
.cards-page-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  background: rgba(5,7,11,.97);
  border-bottom: 1px solid rgba(0,104,255,.45);
  color: #fff;
}
.cards-page-header div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cards-page-header strong {
  font-size: 1rem;
  letter-spacing: .05em;
}
.cards-page-header span {
  color: #b8bbc3;
  font-size: .75rem;
}
.cards-page-back {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}

.build-marker {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 5000;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,.78);
  color: #8f96a3;
  font: 600 10px/1.2 Arial, sans-serif;
  pointer-events: none;
}

/* v11 exact button-only hotspots, measured from the approved artwork */
.sports-button {
  position: absolute;
  left: 8.33333%;
  top: 69.87179%;
  width: 11.84896%;
  height: 3.56125%;
  z-index: 20000 !important;
  display: block !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.breaks-button {
  position: absolute;
  left: 32.03125%;
  top: 69.94302%;
  width: 12.43490%;
  height: 3.49003%;
  z-index: 20000 !important;
  display: block !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.prints-button {
  position: absolute;
  left: 55.92448%;
  top: 69.30199%;
  width: 12.50000%;
  height: 4.13105%;
  z-index: 20000 !important;
  display: block !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.custom-button {
  position: absolute;
  left: 78.58073%;
  top: 69.94302%;
  width: 15.10417%;
  height: 3.41880%;
  z-index: 20000 !important;
  display: block !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* v11.2 exact hero-button hotspots measured from the actual artwork */

.whatnot-top {
  position: absolute;
  left: 42.968750%;
  top: 35.185185%;
  width: 18.554688%;
  height: 4.415954%;
  z-index: 30000 !important;
  display: block !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.shop-top {
  position: absolute;
  left: 62.695312%;
  top: 35.256410%;
  width: 13.216146%;
  height: 4.415954%;
  z-index: 30000 !important;
  display: block !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.breaks-top {
  position: absolute;
  left: 77.083333%;
  top: 35.185185%;
  width: 18.098958%;
  height: 4.487179%;
  z-index: 30000 !important;
  display: block !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}