/*
Theme Name: SPOMEXA Teamwear Hero V2 Active Buttons
Theme URI: https://teamwear.spomexa.com
Author: SPOMEXA
Description: A lightweight WordPress theme that uses the provided SPOMEXA Teamwear hero image exactly as the homepage, using the approved SPOMEXA hero image with the lower CTA sentence removed and transparent active buttons. Transparent hotspots are placed over the visible design buttons for navigation.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: spomexa-teamwear-image-hero
*/

:root{
  --spx-bg:#030008;
  --spx-gold:#d7a331;
  --spx-purple:#4b0b76;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--spx-bg);min-height:100%;}
body{font-family:Arial,Tahoma,sans-serif;color:#fff;overflow-x:hidden;}
a{color:inherit;}

.spx-page{
  width:100%;
  min-height:100vh;
  background:var(--spx-bg);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.spx-hero-wrap{
  position:relative;
  width:100%;
  max-width:1672px;
  margin:0 auto;
  background:var(--spx-bg);
  line-height:0;
}

.spx-hero-img{
  display:block;
  width:100%;
  height:auto;
  max-width:1672px;
  margin:0 auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* Transparent clickable areas: no visual change to the uploaded image */
.spx-hotspot{
  position:absolute;
  display:block;
  z-index:5;
  text-decoration:none;
  background:transparent;
  border:0;
  outline:0;
  cursor:pointer;
  line-height:1;
}
.spx-hotspot:focus-visible{
  outline:2px solid rgba(215,163,49,.8);
  outline-offset:4px;
  border-radius:14px;
}

/* Desktop hotspot positions based on the original 1672x941 image */
.spx-home{left:64.1%; top:4.15%; width:5.2%; height:5.4%;}
.spx-studio-nav{left:53.9%; top:4.15%; width:9.8%; height:5.4%;}
.spx-shop-nav{left:44.8%; top:4.15%; width:8.1%; height:5.4%;}
.spx-kits-nav{left:36.3%; top:4.15%; width:7.7%; height:5.4%;}
.spx-support-nav{left:27.7%; top:4.15%; width:8.0%; height:5.4%;}
.spx-logo{left:81.8%; top:2.5%; width:14.5%; height:7.6%;}
.spx-cart{left:1.8%; top:2.4%; width:3.8%; height:5.9%;}
.spx-account{left:6.4%; top:2.4%; width:3.6%; height:5.9%;}
.spx-lang{left:10.9%; top:2.4%; width:5.0%; height:5.9%;}
.spx-shop-btn{left:51.6%; top:56.7%; width:21.3%; height:10.8%;}
.spx-studio-btn{left:74.0%; top:56.7%; width:21.3%; height:10.8%;}
.spx-customize-panel{left:35.3%; top:29.4%; width:15.1%; height:31.3%;}

.spx-skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.spx-skip:focus{
  left:16px;
  top:16px;
  z-index:9999;
  width:auto;
  height:auto;
  padding:10px 14px;
  background:#111;
  color:#fff;
  border:1px solid var(--spx-gold);
  border-radius:10px;
}

/* Optional sections are intentionally hidden to preserve the exact uploaded homepage image */
.spx-hidden-content{
  position:absolute;
  left:-99999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width: 900px){
  .spx-page{align-items:flex-start;}
  .spx-hero-wrap{width:100%;}
  .spx-hero-img{width:100%; height:auto;}
}

@media (max-width: 520px){
  /* Keep the exact image unchanged, simply scale it to the phone width. */
  .spx-hero-wrap{min-width:100%;}
}