* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html{
	max-height: 100%;
	max-width: 100%;
	overflow-x: clip;
	overflow-y: clip;
	font-size: 15px;
}
body {
  width: 100%;
  height: 100%;
  margin: 0%;
  padding: 0%;
	background: #ffffff;
	font-family: exo;
}

#header-logo {
  width: 40%;
  height: auto;
  display: block;
  position: relative;
  left: 30%;
  top: 10%;
}

header{
  width:100%;
  height: 12%;
  background: var(--primarysitecolor);
  position: relative;
  z-index: 1000; /* base header layer */
}


/* nav-wrap should be absolute inside header, spanning it */
.nav-wrap{
  position: absolute;   /* IMPORTANT */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* button placement (use a normal right value) */
.nav-toggle{
  position: absolute;
  top: 0%;
  right: 20%;
  height: 60%;
  aspect-ratio: 1/1;
  background: transparent;
  border: none;
  cursor: pointer;

  z-index: 10000; /* above menu */
}


.nav-toggle img{
  width: 100%;
  height: 100%;
  display: block;
}

/* show/hide icons */
.nav-toggle .icon-close{ display:none; }
.nav-toggle .icon-open{ display:block; }

.nav-wrap.menu-open .nav-toggle .icon-open{ display:none; }
.nav-wrap.menu-open .nav-toggle .icon-close{ display:block; }

/* menu positioning relative to header */
.menu{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--tertiarysitecolor);

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  z-index: 9999; /* THIS IS THE KEY */

  filter: drop-shadow(#000000 0px 10px 10px);
  transition: opacity 150ms ease;
}

.menu button{
	height: 0%;
	width: 23%;
	border: none;
	color: white;
	background: transparent;
	font-family: exo;
	font-size: 1.66rem;
	cursor: pointer;
}



.nav-wrap.menu-open .menu{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@font-face {
  font-family: college;
  src: url(images/fonts/college.bold.ttf);
}
@font-face {
  font-family: exo;
  src: url(images/fonts/exo.extra-bold.otf);
}
@font-face {
  font-family: cc ultimatum;
  src: url(images/fonts/CCUltimatumMass-Heavy.otf);
}
@font-face {
  font-family: garute;
  src: url(images/fonts/garute.black.ttf);
}
@font-face {
  font-family: yeasty flavors;
  src: url(images/fonts/yeasty-flavors.regular.ttf);
}
@font-face {
  font-family: playball;
  src: url(images/fonts/playball.regular.ttf);
}
@font-face {
  font-family: sf sports night;
  src: url(images/fonts/sf-sports-night.regular.ttf);
}
@font-face {
  font-family: pricedown;
  src: url(images/fonts/pricedown.bl-regular.otf);
}
@font-face {
  font-family: ethnocentric;
  src: url(images/fonts/ethnocentric.rg-regular.otf);
}
@font-face {
  font-family: serpentine;
  src: url(images/fonts/serpentineEF-Bolditalic.otf);
}
@font-face {
  font-family: aurach;
  src: url(images/fonts/aurach.heavy.ttf);
}
@font-face {
  font-family: fortuner;
  src: url(images/fonts/FortunerHeavy-jEMyR.otf);
}
@font-face {
  font-family: cowboy;
  src: url(images/fonts/cowboy.otf);
}
@font-face {
  font-family: streetwear;
  src: url(images/fonts/streetwear.regular.otf);
}

:root {
 	--primarycolor: #572A84;
 	--secondarycolor: black;
 	--tertiarycolor: #717073;

 	--primarysitecolor: #572A84;
 	--secondarysitecolor: black;
 	--tertiarysitecolor: #717073; 	

 	--topdim: 50%;
 	--topt: 10%;
 	--topl2: 25%;
 	--topt2: 26%;
 	--toprot2: -35deg;
 	--toprot3: 35deg;

 	--topspacingvar: 0px;

 	--bottomdim: 50%;
 	--bottomt: 40%;
 	--bottoml2: 28%;
 	--bottomt2: 63%;
 	--bottomrot2: 10deg;
 	--bottomrot3: -10deg;

 	--bottomspacingvar: 0px;

 	--leftdim: 66.6%;
 	--leftt: 37.5%;
 	--leftl: 0%;
 	--leftrot: 0%;

 	--rightdim: 62.5%;
 	--rightt: 37.5%;
 	--rightl: 0%;
 	--rightrot: 0%;

 	--backdim: 66.66%;
 	--backl: 40%;
 	--backt: 69%;

 	--tlogooptvis: hidden;
 	--ttextoptvis: hidden;

 	--toplogovis: hidden;
 	--toptextvis: hidden;

 	--topfontcolor: var(--primarysitecolor);

 	--topfont: exo;

 	--topfontsize: 15px;

 	--topfontvert: horizontal-lr;

 	--blogooptvis: hidden;
 	--btextoptvis: hidden;

 	--bottomlogovis: hidden;
 	--bottomtextvis: hidden;

 	--bottomfontcolor: var(--primarysitecolor);

 	--bottomfont: exo;

 	--bottomfontsize: 20px;

  --llogooptvis: hidden;
 	--ltextoptvis: hidden;

 	--leftlogovis: hidden;
 	--lefttextvis: hidden;

 	--leftfontcolor: var(--primarysitecolor);

 	--leftfont: exo;

 	--leftfontsize: 50px;

  --rlogooptvis: hidden;
 	--rtextoptvis: hidden;

 	--rightlogovis: hidden;
 	--righttextvis: hidden;

 	--rightfontcolor: var(--primarysitecolor);

 	--rightfont: exo;

 	--rightfontsize: 50px;

  --balogooptvis: hidden;
 	--batextoptvis: hidden;

 	--backlogovis: hidden;
 	--backtextvis: hidden;

 	--backfontcolor: var(--primarysitecolor);

 	--backfont: exo;

 	--backfontsize: 125%;

 	--completepopup: hidden;

 	--top1: 40%;
 	--top2: 20%;
 	--top3: 50%;
 	
 	--top4: -8%;
 	--top5: -8%;
 	--top6: 72%;

 	--left2: 5%;
 	--left3: 20%;
 	--left4: 38%;
 	--left6: 35%;

 	--rot1: 0deg;
 	--rot3: 30deg;
 	--rot4: -10deg;
 	--rot6: -10deg;
}
/*titles*/
.styletitle, .colortitle, .logotitle, .texturetitle, .addontitle, .completetitle, .detailtitle, .helmettitle, .cagetitle, .strapstitle{
	width: 100%;
	height: 10%;
	margin-top: 5px;
	text-align: center;
	font-weight: bold;
	font-size: 2rem;
	font-family: exo;
	color: var(--primarysitecolor);
}

/*customization areas*/
.styleopt, .coloropt, .logoopt, .textureopt, .addonopt, .completeopt{
	position: absolute;
	text-align: center;
	right: 0%;
	top: 14%;
	width: 23%;
	height:88%;
	background: white;
	color:black;
	font-weight: bold;
	overflow-y: scroll;
}

.details, .helmet, .cage, .straps{
	background: white;
	position: fixed;
	left: 0%;
	top: 14%;
	width:23%;
	height:88%;
	overflow-y: scroll;
}

/*goalie name and team inputs*/
.nameinput, .teaminput{
	position: absolute;
	width: 100%;
	height: 10%;
	top: 10%;
	left: 0%;
}

.teaminput{
	top: 23%;
}

.nameinput input, .teaminput input, .emailinput input{
	width: 90%;
	height:50%;
	position: absolute;
	top: 30%;
	left: 5%;
	border: none;
	background: #ededed;
	border-radius: 1.33rem;
	padding-left: 5%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	outline: none;
	font-size: 1rem;
}

.nameinput input:hover, .teaminput input:hover, .brandother input:hover, .modelselects:hover, .emailinput input:hover{
	opacity: 0.7;
}

.teaminput{
	top: 23%;
}

/*logo inputs*/
.logoinput {
	position: absolute;
	width: 100%;
	aspect-ratio: 2/1;
	top: 35%;
	left:0%;
	color: black;
}

.logoinputarea, .logoinputarea1, .logoinputarea2, .logoinputarea3{
  display: block;
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  background-color: #ffffff;
  transition: border-color 0.3s ease;
  height: 80%;
  top: 15%;
  left: 5%;
  aspect-ratio: 1/1;
  border-radius: 10%;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.toplogoinputarea, .bottomlogoinputarea, .leftlogoinputarea, .rightlogoinputarea, .backlogoinputarea{
  display: block;
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  background-color: #ffffff;
  transition: border-color 0.3s ease;
  width: 60%;
  top: 15%;
  left: 20%;
  aspect-ratio: 1/1;
  border-radius: 10%;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.logoinputarea1 {
	height: 65%;
}

.logoinputarea2 {
	height: 65%;
	left: 36%;
}

.logoinputarea3 {
	height: 65%;
	left: 67%;
}

.logoinputarea:hover, .logoinputarea1:hover, .logoinputarea2:hover, .logoinputarea3:hover,
.toplogoinputarea:hover, .bottomlogoinputarea:hover, .leftlogoinputarea:hover, .rightlogoinputarea:hover, .backlogoinputarea:hover{
  opacity: 0.7;
}

.logoinputarea img, .logoinputarea1 img, .logoinputarea2 img, .logoinputarea3 img,
.toplogoinputarea img, .bottomlogoinputarea img, .leftlogoinputarea img, .rightlogoinputarea img, .backlogoinputarea img{
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
	align-items: center;
	justify-content: center;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

#helmetView {
  position: relative; /* critical for absolute positioning */
}

#helmet-logo-box {
  position: absolute;
  top: 1.5%;
  right: 5.2%;

  /* show/hide controlled by JS */
  display: none;

  /* center logo inside box */
  align-items: center;
  justify-content: center;

  z-index: 50;         /* above helmet SVGs */
  pointer-events: none;/* doesn't block interactions */
}

#helmet-corner-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


/*backplate design control*/
.backplatecontrol{
	position: absolute;
	top: 65%;
	left: 0%;
	width: 100%;
	height: 12%;
}

/* Price + difficulty summary at bottom of details panel */
.details-summary {
	position: absolute;
	bottom: 3%;
	left: 0;
	width: 100%;
	padding: 0 6%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1.5px solid #e8e8e8;
	padding-top: 10px;
}
.details-summary-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.details-summary-label {
	font-family: exo;
	font-weight: bold;
	font-size: 0.58rem;
	color: #999;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.details-summary-value {
	font-family: exo;
	font-weight: bold;
	font-size: 1.15rem;
	color: var(--primarysitecolor);
}
.details-difficulty-right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.details-difficulty-score {
	font-family: exo;
	font-weight: bold;
	font-size: 1.15rem;
	color: var(--primarysitecolor);
	min-width: 36px;
	text-align: right;
}
.difficulty-bar-track {
	width: 64px;
	height: 5px;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
}
.difficulty-bar-fill {
	height: 100%;
	width: 0%;
	background: var(--secondarysitecolor);
	border-radius: 3px;
	transition: width 0.35s ease;
}

/* The switch container */
.switch {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 48px;
  filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

/* Hide default checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider:hover {
	opacity: 0.7;
	transition: 0s;
}

/* The slider background */
.slider {
  position: absolute;
  cursor: pointer;
  background-color: #d9d9d9;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .4s;
}

/* The toggle knob */
.slider:before {
  position: absolute;
  content: "";
  height: 36px;       /* 18 × 2 */
  width: 36px;        /* 18 × 2 */
  left: 6px;          /* 3 × 2 */
  bottom: 6px;        /* 3 × 2 */
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

/* Checked state */
input:checked + .slider {
  background-color: var(--primarysitecolor);
}

input:checked + .slider:before {
  transform: translateX(52px);  /* 26 × 2 */
}

/*helmet page*/

.helmetprofile{
	position: absolute;
	top: 8%;
	left: 5%;
	width: 90%;
	height: 5%;
	border: none;
	background: #e1e1e1;
	border-radius: 1.33rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
}

.helmetprofile p{
	position: absolute;
	left: 0%;
	top: 10%;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 1rem;
	text-transform: uppercase;
	padding-top: 2%;
	color: black;
}

.helmetcolorfield{
	position: absolute;
	left: -17%;
	top: 20%;
	height: 60%;
	width: 100%;
}

.helmetcolor button{
	width: 15%;
}

.helmetcolor, .brandopt, .modelopt, .helmetdivisionopt, .helmetsizeopt{
	position: absolute;
	width: 100%;
	height: 13%;
	left: 0%;
	top: 17%;
	padding-left: 5%;	
}

.brandopt{
	top: 33%;
	height: 20%;
}

.modelopt{
	top: 56%;
	height: 12%;
}

.helmetdivisionopt{
	top: 71%;
	height: 12%;
}

.helmetsizeopt{
	top: 86%;
	height: 12%;
}

.brandbuttons, .divisionbuttons, .sizebuttons{
	position: absolute;
	left: 5%;
	top: 20%;
	width: 90%;
	height: 50%;
}

.brandbuttons button, .helmetsizeopt button, .helmetdivisionopt button{
	border: none;
	background: var(--primarysitecolor);
	width: 25%;
	margin: 1.5%;
	aspect-ratio: 2/1;
	color: white;
	font-family: exo;
	font-size: 0.8rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 0.66rem;
}

.brandtitle, .helmetdivisiontitle, .helmetsizetitle, .modeltitle,
.nametitle, .teamtitle, .logodetailtitle, .backplatetitle, .strapscolortitle,
.bucklescolortitle, .cagestyletitle, .cagecolortitle, .strapscontroltitle,
.highlighttitle, .commenttitle, .emailtitle{
	position: absolute;
	width: 90%;
	height: 5%;
	left: 5%;
	top: 5%;
	font-size: 1rem;
	font-family: exo;
	float:left;
	color: var(--secondarysitecolor);	
}

.highlighttitle{
	left: -30%;
}

.commenttitle{
	left: -25%;
}

.emailtitle{
	left: -35%;
}

.brandother{
	position: absolute;
	width: 100%;
	height: 25%;
	top: 65%;
	left: 0%;
}

.brandother button{
	height: 100%;
	aspect-ratio: 1/1;
	position: absolute;
	top: -10%;
	left: 5%;
	border: none;
	background: var(--otherback);
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 0.66rem;
}

.brandother input{
	width: 75%;
	height:100%;
	position: absolute;
	top: 0%;
	left: 22%;
	border: none;
	background: #ededed;
	border-radius: 1.33rem;
	padding-left: 5%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	outline: none;
}

.modelselects{
	position: absolute;
	top: 30%;
	width: 90%;
	height: 50%;
}

.modelselects select, .modelselects input{
	width: 75%;
	height:100%;
	position: absolute;
	top: 0%;
	left: 0%;
	border: none;
	background: #ededed;
	border-radius: 2rem;
	padding-left: 5%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	outline: none;
}

/* Brand model selectors */
.helmet-models { display: none; }
.helmet-models.active { display: block; }

.helmetsizeopt button{
	width: 22%;
}

.navigation2{
	position: absolute;
	top: 12%;
	left: 23%;
	width: 4%;
	height: 88%;
	background: var(--secondarysitecolor);
}

.navigation{
	display: block;
	position: absolute;
	top: 12%;
	right: 23%;
	width: 4%;
	height: 88%;
	background: var(--secondarysitecolor);
}

/*center screen work space*/

.workspace-container {
  position: relative;
  position: absolute;
  width: 46%;
  height: 88%;
  left: 27%;
  top: 12%;
}

.workspace-header {
  position: absolute;
  top: 1%; /* slightly above workspace */
  right: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 10;
}

.view-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.view-label {
  font-family: 'Arial Black', sans-serif;
  color: black;
  font-size: 12px;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.toggle-btn {
  display: flex;
  background-color: #fff;
  border: 2px solid var(--primarysitecolor);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  font-size: 11px;
}

.toggle-btn .option {
  padding: 4px 10px;
  color: var(--primarysitecolor);
  transition: background 0.3s, color 0.3s;
  user-select: none;
}

.toggle-btn .option.active {
  background-color: var(--primarysitecolor);
  color: #fff;
}

.workspace {
  position: relative;
  background: white;
  height: 90%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 2px solid black;
  top: 5%;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  color: var(--primarysitecolor);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.arrow.left { left: -40px; }
.arrow.right { right: -40px; }

.view-content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

.view-content.active {
  display: block;
}

#helmetView{
  position: relative;
  width: 100%;
  height: 100%;
}

/* Base style for direct-child SVGs (cages, goalie-info, etc.) — NOT nested decal SVGs */
#helmetView > svg:not(#artboard) {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
}

#canvas-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  pointer-events: none;
}

#goalie-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none; /* so it doesn’t block clicks */
  z-index: 15; /* on top of helmet layers */
}

#goalie-info text {
  font-family: 'Exo', sans-serif;
  font-weight: bold;
  fill: black;
  text-transform: uppercase;
  text-anchor: middle;
  dominant-baseline: middle;
  transition: font-size 0.2s ease;
}



#helmetView .cage-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  display: none !important; /* <- force hide */
  pointer-events: none;
  z-index: 10;
}

#helmetView .cage-svg.active {
  display: block !important; /* <- force show */
}

button[data-color="#ffffff"] { background: #fff; border: 2px solid #999; }
button[data-color="#1d1d1d"] { background: #1d1d1d; }
button[data-color="#C1C6C8"] { background: #C1C6C8; }
button[data-color="#B4975A"] { background: #B4975A; }



/* Single artboard SVG — fills helmetView exactly, overrides the generic svg rule */
#artboard {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

#extra-stuff {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* optional so clicks pass through to UI */
}

#helmetView { position: relative; }

.helmet-holes {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  z-index: 6;
}

.helmet-holes.active { display: block; }

.helmet-holes svg {
  width: 100%;
  height: 100%;
  display: block;
}
#backplate-straps {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

.overlay-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  z-index: 7; /* put above holes/helmet if needed */
}

.overlay-layer.active {
  display: block;
}

.overlay-layer svg {
  width: 100%;
  height: 100%;
  display: block;
}

.navigation input, .navigation2 input{
	text-align: center;
	font-family: exo;
	float: left;
	font-size: 1rem;
	width: 60%;
	height: 14%;
	font-weight: bold;
	margin-left: 20%;
	margin-top: 20%;
	background: var(--primarysitecolor);
	text-align: center;
	color: white;
	cursor: pointer;
	padding-left: 15%;
	writing-mode: vertical-lr;
	border: none;
	filter: drop-shadow(#000 3px 3px 2px);
}
.navigation2 input{
	height: 22.5%;
}

.navigation input:hover ,.navigation2 input:hover{
	background: var(--tertiarysitecolor);
	transition-duration: 0.4s;
}

.cageopt{
	position: absolute;
	width: 100%;
	height: 20%;
	left: 0%;
	top: 10%;
}

.cagecolor{
	position: absolute;
	width: 100%;
	height: 35%;
	left: 0%;
	top: 25%;
}

.strapscolor{
	position: absolute;
	width: 100%;
	height: 35%;
	left: 0%;
	top: 10%;
}

.bucklescolor{
	position: absolute;
	width: 100%;
	height: 35%;
	left: 0%;
	top: 45%;
}

.strapscontrol{
	position: absolute;
	top: 85%;
	left: 0%;
	width: 100%;
	height: 20%;
}

.cagebuttons, .cagecolorbuttons, .strapscolorbuttons, .bucklescolorbuttons{
	position: absolute;
	width: 90%;
	height: 45%;
	top: 15%;
	left: 5%;
}

.cagebuttons button{
	border: none;
	background: var(--primarysitecolor);
	width: 25%;
	margin: 1.5%;
	aspect-ratio: 2/1;
	color: white;
	font-family: exo;
	font-size: 1rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 1rem;
}

.cageopt button:hover, .brandopt button:hover, .brandother button:hover, .helmetsizeopt button:hover, .helmetdivisionopt button:hover,
.cagecolorbuttons button:hover, .strapscolorbuttons button:hover, .bucklescolorbuttons button:hover{
	opacity: 0.7;
}

.cagecolorbuttons button, .strapscolorbuttons button, .bucklescolorbuttons button{
	border: none;
	width: 23%;
	margin: 1.5%;
	aspect-ratio: 1/1;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 1.33rem;
}

button img{
	width: 100%;
  	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* right side navigation control */

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.navigation input.active {
  background: var(--tertiarysitecolor);
  color: white;
}

/* left side navigation control */

.panel2 {
  display: none;
}

.panel2.active {
  display: block;
}

.navigation2 input.active {
  background: var(--tertiarysitecolor);
  color: white;
}


/* styles difficulty select */

.difficulty-section {
  display: none;
}

.difficulty-section.active {
  display: flex; /* or grid / block depending on your layout */
}
.difficulty-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: #444;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}

.difficulty-btn.active {
  background: var(--primarysitecolor);
}

.texturefield{
	width: 90%;
	height: 56%;
	position: absolute;
	top: 11%;
	left: 5%;
}

.texturefield ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 5px;
	align-content: flex-start;
	overflow-y: auto;
	height: 100%;
}

.texturefield li{
	cursor: pointer;
	border: none;
	background: var(--primarysitecolor);
	margin: 0;
	width: calc(25% - 4px);
	aspect-ratio: 1/1;
	border-radius: 1.33rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	position: relative;
	overflow: hidden;
}

.texture-image{
    width: 100%;
    height: 100%;
    opacity: .7;
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.topaddonbuttons ul, .bottomaddonbuttons ul, .leftaddonbuttons ul,
.rightaddonbuttons ul, .backaddonbuttons ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 5px;
	align-content: flex-start;
	overflow-y: auto;
	height: 100%;
}

.topaddonbuttons li, .bottomaddonbuttons li, .leftaddonbuttons li, .rightaddonbuttons li, .backaddonbuttons li{
	cursor: pointer;
	border: none;
	background: none;
	margin: 0;
	width: calc(20% - 4px);
	aspect-ratio: 1/1;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rightaddonbuttons li{
	transform: scaleX(-1);
}
.rightaddonbuttons li.no-mirror {
	transform: none;
}

.addon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.designselect, .addonselect{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 8%;
	left: 0%;
	top: 7%;
	background: var(--secondarysitecolor);
	padding-top: 5px;
}
.designselect input, .addonselect input{
	width: 18%;
	height: 66%;
	font-family: exo;
	color: white;
	cursor: pointer;
	border: none;
	text-align: center;
	float: left;
	margin-left: 1.5%;
	margin-top: 1%;
	border-radius: 1rem;
	outline: none;
}
.designselect button:hover, .addonselect button:hover{
	background: var(--primarysitecolor);
	transition-duration: 0.4s;
}

.topdesignselect, .bottomdesignselect, .leftdesignselect,
.rightdesignselect, .backdesignselect, .difficultyselect{
	width: 100%;
	height: 10%;
	position: absolute;
	left: 0%;
	top: 2%;
}

.topdesignselect button, .bottomdesignselect button, .leftdesignselect button,
.rightdesignselect button, .backdesignselect button, .difficultyselect button{
	width: 30%;
	margin-left: 2%;
	height: 90%;
	font-family: exo;
	color: white;
	background: var(--secondarysitecolor);
	border: none;
	font-size: 1.33rem;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	border-radius: 1.33rem;
}
.difficultytitle{
	position: absolute;
	width: 100%;
	height: 5%;
	font-size: 1.25rem;
	top: 7%;
	color: var(--secondarysitecolor);
}
.difficultyselect{
	top: 10%;
	height: 8%;
}

.style-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    cursor: pointer;
}

/* Difficulty buttons */
.difficultyselect {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.difficulty-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background: #444;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.difficulty-btn.active {
  background: var(--primarysitecolor);
}

/* Panel container */
.styles-panel {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 5%;
}

/* Each difficulty section (list of styles) */
.difficulty-section {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  column-gap: 20px;
  row-gap: -100px;
  justify-items: center;
  align-items: start;
}

.difficulty-section.active {
  display: grid;
}

/* Each grid item */
.difficulty-section li {
  list-style: none;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* Image itself */
.difficulty-section .style-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.difficulty-section .style-image:hover {
  transform: scale(1.05);
}

button {
	border: none;
	cursor: pointer;
}

/* Buttons that live in grid/flex layouts within panels — keep square float behaviour */
.brandbuttons button, .helmetdivisionopt button, .helmetsizeopt button,
.cagestylelabel button, .helmetcolor button {
	float: left;
	aspect-ratio: 1/1;
	margin: 1%;
}

.topaddon, .bottomaddon, .leftaddon, .rightaddon, .backaddon{
	position: absolute;
	width: 100%;
	height: 80%;
	left: 0%;
	top:20%;
}

.comments{
	position: absolute;
	width: 100%;
	height: 40%;
	top: 5%;
	left: 0%;
}

.commentbox{
	width: 90%;
	height:80%;
	position: absolute;
	top: 15%;
	left: 5%;
}

.commentbox textarea{
	width: 100%;
	height: 100%;
	border: none;
	background: #ededed;
	border-radius: 1.33rem;
	padding-left: 5%;
	filter: drop-shadow(#8f8f8f 3px 3px 2px);
	padding: 5%;
	outline: none;
	font-size: 1rem;
}

.commentbox textarea:hover, .commentimagebutton1:hover{
	opacity: 0.7;
}

.commentimages{
	position: absolute;
	width: 100%;
	height: 20%;
	top: 45%;
	left: 0%;
}

.email{
	width: 100%;
	height: 10%;
	position: absolute;
	top: 65%;
	left: 0%;
}

.id{
	width: 100%;
	position: absolute;
	bottom: 11.5%;
	left: 0%;
}
.id p{
	font-size: 2rem;
}

.submitbutton{
	position: absolute;
	width: 95%;
	height: 10%;
	color: white;
	background: var(--primarysitecolor);
	border: none;
	font-size: 1.66rem;
	font-family: exo;
	bottom: 5%;
	left: 1.5%;
	filter: drop-shadow(10px 10px);
	border-radius: 1.33rem;
}

.submitbutton:hover{
	opacity: .9;
}

/* ── Complete / buy popup ─────────────────────────────────────────────────── */
.cp-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.72);
	align-items: center;
	justify-content: center;
	z-index: 9000;
}
.cp-overlay.active { display: flex; }

.cp-modal {
	position: relative;
	background: #fff;
	border-radius: 1.2rem;
	box-shadow: 0 10px 40px rgba(0,0,0,0.55);
	display: flex;
	flex-direction: row;
	width: min(820px, 92vw);
	max-height: 90vh;
	overflow: hidden;
}

/* Close button */
.cp-close-btn {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 1.1rem;
	color: #999;
	cursor: pointer;
	line-height: 1;
	z-index: 1;
}
.cp-close-btn:hover { color: #333; }

/* Left column */
.cp-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 20px 24px;
	background: #f7f7f7;
	border-right: 1px solid #e5e5e5;
	width: 240px;
	flex-shrink: 0;
}

.cp-preview-box {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 2px solid #ddd;
	border-radius: 0.6rem;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cp-preview-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cp-id {
	font-family: exo;
	font-size: 0.85rem;
	color: var(--primarysitecolor);
	letter-spacing: 0.05em;
	text-align: center;
	word-break: break-all;
}

.cp-download-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--primarysitecolor);
	color: #fff;
	font-family: exo;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	padding: 8px 0;
	border-radius: 0.5rem;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s;
}
.cp-download-btn:hover:not(.cp-download-disabled) { opacity: 0.8; }
.cp-download-disabled {
	background: #bbb;
	cursor: default;
	pointer-events: none;
}

/* Right column */
.cp-right {
	display: flex;
	flex-direction: column;
	padding: 32px 28px 28px;
	flex: 1;
	min-width: 0;
	gap: 16px;
}

.cp-title {
	font-family: exo;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	color: var(--primarysitecolor);
	text-transform: uppercase;
	border-bottom: 2px solid var(--primarysitecolor);
	padding-bottom: 8px;
}

.cp-steps {
	flex: 1;
	padding-left: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: exo;
	font-size: 0.82rem;
	line-height: 1.55;
	color: #222;
}
.cp-steps strong { color: var(--primarysitecolor); }

.cp-buy-btn {
	align-self: flex-start;
	background: var(--primarysitecolor);
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	font-family: exo;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	padding: 9px 22px;
	cursor: pointer;
	transition: opacity 0.15s;
}
.cp-buy-btn:hover { opacity: 0.85; }

/* Add-on sub-panel visibility */
.topaddon, .bottomaddon, .leftaddon, .rightaddon, .backaddon { display: none; }
.topaddon.active, .bottomaddon.active, .leftaddon.active, .rightaddon.active, .backaddon.active { display: block; }

/* Add-on zone color picker button */
.addon-color-picker {
	display: inline-block;
	aspect-ratio: 1/1;
	background-image: url('images/picker.png');
	background-size: cover;
	position: relative;
	cursor: pointer;
	border-radius: 5px;
}
.addon-color-picker input[type="color"] {
	opacity: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* ── Texture panel: tile hover ── */
.texturefield li:hover {
	filter: drop-shadow(var(--primarysitecolor) 0px 0px 6px);
	opacity: 0.85;
	transition: filter 0.2s, opacity 0.2s;
}

/* ── Addon nav bar: hover ── */
.addonselect input:hover {
	background: var(--primarysitecolor) !important;
	transition: background 0.2s;
}

/* ── Addon selection tiles: hover ── */
.topaddonbuttons li:hover, .bottomaddonbuttons li:hover,
.leftaddonbuttons li:hover, .rightaddonbuttons li:hover,
.backaddonbuttons li:hover {
	filter: drop-shadow(var(--primarysitecolor) 0px 0px 6px);
	transition: filter 0.2s;
}

/* ── Zone color buttons: hover ── */
.topcolor1buttons button:hover, .topcolor2buttons button:hover, .topcolor3buttons button:hover,
.bottomcolor1buttons button:hover, .bottomcolor2buttons button:hover, .bottomcolor3buttons button:hover,
.leftcolor1buttons button:hover, .leftcolor2buttons button:hover, .leftcolor3buttons button:hover,
.rightcolor1buttons button:hover, .rightcolor2buttons button:hover, .rightcolor3buttons button:hover,
.backcolor1buttons button:hover, .backcolor2buttons button:hover, .backcolor3buttons button:hover {
	opacity: 0.72;
	transition: opacity 0.2s;
}


/* ================================================================
   LAYOUT REWRITE — Texture panel & Addon panel
   Replaces absolute-positioned inner elements with flex / grid so
   nothing overlaps.
================================================================ */

/* ── Texture panel: flex column ── */
.panel.textureopt.active {
  display: flex !important;
  flex-direction: column !important;
  height: 88% !important;
  box-sizing: border-box !important;
  padding-bottom: 6px;
}
.textureopt .texturetitle {
  flex-shrink: 0;
  height: auto;
  padding: 6px 0 4px;
  margin: 0;
  font-size: 1.7rem;
}
.textureopt .texturefield {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  position: static !important;
  top: auto !important; left: auto !important; width: 90% !important;
  height: auto !important;
  margin: 0 5% !important;
}
.textureopt #texture-color-controls {
  flex-shrink: 0;
  width: 90%;
  margin: 0 5% 4px;
}
.textureopt .highlightcontrol {
  flex-shrink: 0;
  position: static;
  top: auto; left: auto; width: auto; height: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 5%;
}

/* ── Addon panel: flex column ── */
.panel.addonopt.active {
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: 6px;
}
.addonopt .addontitle {
  flex-shrink: 0;
  height: auto;
  padding: 6px 0 4px;
  margin: 0;
  font-size: 1.7rem;
}
.addonopt .addonselect {
  flex-shrink: 0;
  position: static;
  top: auto; left: auto; width: 100%; height: auto;
  display: flex;
  padding: 4px 2%;
  box-sizing: border-box;
  background: var(--secondarysitecolor);
}
.addonopt .addonselect div {
  flex: 1;
}
.addonopt .addonselect input[type="button"] {
  width: 100%;
  height: 28px;
  margin: 0;
  font-size: 0.65rem;
  border-radius: 0.5rem;
}
.addonopt .addonselect input[type="button"]:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Position sub-panels: CSS grid (tiles / toggles / colors) ── */
.topaddon.active, .bottomaddon.active, .leftaddon.active,
.rightaddon.active, .backaddon.active {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto;
  position: static;
  top: auto; left: auto; width: 100%; height: auto;
  flex: 1 1 0;
  min-height: 0;
}

/* Grid row 1: addon selection tiles */
.topaddonbuttons, .bottomaddonbuttons, .leftaddonbuttons,
.rightaddonbuttons, .backaddonbuttons {
  grid-column: 1 / -1;
  grid-row: 1;
  position: static;
  float: none;
  height: auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  padding: 4px 3%;
  box-sizing: border-box;
}

/* Grid row 2: texture toggle (full width) */
.addontex-control {
  grid-column: 1 / -1;
  grid-row: 2;
  position: static;
  top: auto; left: auto; width: auto;
  padding: 5px 5% 5px 3%;
  border-top: 1px solid #eee;
}
.addontex-control.active { display: flex; align-items: center; gap: 8px; }
.addontex-control .switch { position: relative !important; width: 60px !important; height: 30px !important; flex-shrink: 0 !important; filter: none !important; }
.addontex-control .switch .slider:before { height: 22px !important; width: 22px !important; bottom: 4px !important; left: 4px !important; }
.addontex-control .switch input:checked + .slider:before { transform: translateX(28px) !important; }

/* Grid row 3: color zones */
.topaddoncolorbuttons, .bottomaddoncolorbuttons, .leftaddoncolorbuttons,
.rightaddoncolorbuttons, .backaddoncolorbuttons {
  grid-column: 1 / -1;
  grid-row: 3;
  position: static;
  bottom: auto; left: auto; width: 100%; height: auto;
  display: flex;
  flex-direction: column;
  padding: 4px 4%;
  box-sizing: border-box;
  gap: 3px;
  min-height: 0;
  border-top: 1px solid #eee;
}

/* Color zone wrappers: equal-height flex children */
.topcolor1, .topcolor2, .topcolor3,
.bottomcolor1, .bottomcolor2, .bottomcolor3,
.leftcolor1, .leftcolor2, .leftcolor3,
.rightcolor1, .rightcolor2, .rightcolor3,
.backcolor1, .backcolor2, .backcolor3 {
  position: static;
  top: auto; left: auto; height: auto; width: 100%;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Zone labels */
.topcolor1title, .bottomcolor1title, .leftcolor1title, .rightcolor1title, .backcolor1title,
.topcolor2title, .bottomcolor2title, .leftcolor2title, .rightcolor2title, .backcolor2title,
.topcolor3title, .bottomcolor3title, .leftcolor3title, .rightcolor3title, .backcolor3title {
  position: static;
  top: auto; left: auto;
  font-size: 0.68rem;
  font-family: exo;
  font-weight: bold;
  color: var(--secondarysitecolor);
  flex-shrink: 0;
  padding: 1px 2px 0;
  letter-spacing: 0.05em;
}

/* Zone button rows */
.topcolor1buttons, .topcolor2buttons, .topcolor3buttons,
.bottomcolor1buttons, .bottomcolor2buttons, .bottomcolor3buttons,
.leftcolor1buttons, .leftcolor2buttons, .leftcolor3buttons,
.rightcolor1buttons, .rightcolor2buttons, .rightcolor3buttons,
.backcolor1buttons, .backcolor2buttons, .backcolor3buttons {
  position: static;
  bottom: auto; left: auto; width: 100%; height: auto;
  flex: 1 1 0;
  min-height: 0;
  min-height: 22px;
  display: flex;
  align-items: stretch;
  gap: 2%;
}


/* ================================================================
   COLOR PANEL REVAMP — Panel buttons + Popup + Eyedropper
================================================================ */

/* ── Color panel layout ── */
.coloropt {
  padding: 10px 8%;
  box-sizing: border-box;
  overflow-y: hidden;
}
.panel.coloropt.active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}
.color-panel-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin-top: 8px;
}

/* ── Color panel SVG buttons ── */
.color-panel-btn {
  position: relative;
  cursor: pointer;
  width: 100%;
  transition: transform 0.15s, filter 0.15s;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.color-panel-btn:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.cpb-shape { width: 100%; height: auto; display: block; }
.cpb-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 14%;
  pointer-events: none;
  color: #ffffff;
}
.cpb-label { font-family: exo; font-weight: bold; font-size: 0.6rem; letter-spacing: 0.09em; opacity: 0.85; }
.cpb-hex   { font-family: exo; font-weight: bold; font-size: 1rem;   letter-spacing: 0.05em; }

/* ── Color popup overlay ── */
#color-popup-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.5);
  align-items: center; justify-content: center;
}
#color-popup-overlay.active { display: flex; }

#color-popup {
  background: #fff;
  border-radius: 12px;
  width: min(700px, 92vw);
  max-height: 90vh;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  font-family: exo;
}

/* Popup header */
#popup-header { padding: 14px 20px 8px; border-bottom: 1px solid #eee; }
#popup-title-wrap { display: flex; flex-direction: column; gap: 3px; }
#popup-title-text {
  font-family: exo; font-weight: bold; font-size: 1.1rem;
  color: var(--primarysitecolor); letter-spacing: 0.08em;
}
#popup-title-svg { width: 130px; height: auto; }

/* Popup body layout */
#popup-body { display: flex; flex: 1; }
#popup-main {
  flex: 1; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
}
.popup-section { display: flex; flex-direction: column; }
.popup-section-label {
  font-family: exo; font-weight: bold; font-size: 0.68rem;
  color: var(--secondarysitecolor); letter-spacing: 0.1em;
  margin-bottom: 6px;
}

/* Pro colors — flat rainbow grid */
#pro-colors-grid { display: flex; flex-wrap: wrap; gap: 5px; }

/* Swatches */
#recent-colors-row { display: flex; flex-wrap: wrap; gap: 6px; }
.popup-swatch {
  width: 24px; height: 24px; border-radius: 5px; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.popup-swatch:hover { transform: scale(1.25); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.popup-empty { font-size: 0.7rem; color: #aaa; font-family: exo; }

/* Logo strip */
#logo-strip-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.logo-strip-thumb {
  width: 40px; height: 40px; object-fit: contain; border-radius: 6px;
  border: 1px solid #ddd; cursor: pointer; background: #f8f8f8;
  transition: transform 0.12s, box-shadow 0.12s;
}
.logo-strip-thumb:hover { transform: scale(1.1); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.logo-strip-plus {
  width: 40px; height: 40px; border-radius: 6px; border: 2px dashed #ccc;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #aaa; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  user-select: none; flex-shrink: 0;
}
.logo-strip-plus:hover { border-color: var(--secondarysitecolor); color: var(--secondarysitecolor); }

/* Popup sidebar */
#popup-sidebar {
  width: 130px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 12px;
  border-left: 1px solid #eee;
  background: #fafafa;
  border-radius: 0 12px 12px 0;
}
#popup-preview-swatch {
  width: 64px; height: 64px; border-radius: 10px;
  border: 2px solid #ddd; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
#popup-hex-wrap {
  display: flex; align-items: center;
  border: 1.5px solid #ccc; border-radius: 6px; overflow: hidden; width: 100%;
}
.popup-hex-hash {
  padding: 5px 4px 5px 7px; font-family: exo; font-weight: bold;
  font-size: 0.85rem; color: #555;
  background: #f0f0f0; border-right: 1px solid #ccc; flex-shrink: 0;
}
#popup-hex-input {
  border: none; outline: none; width: 100%;
  padding: 5px 5px; font-family: exo; font-weight: bold;
  font-size: 0.85rem; background: #fff; text-transform: uppercase;
}
#popup-confirm, #popup-cancel {
  width: 100%; padding: 8px 0; border: none; border-radius: 6px;
  font-family: exo; font-weight: bold; font-size: 0.72rem;
  letter-spacing: 0.07em; cursor: pointer; transition: opacity 0.15s;
}
#popup-confirm { background: var(--secondarysitecolor); color: #fff; }
#popup-cancel  { background: #e0e0e0; color: #555; }
#popup-confirm:hover, #popup-cancel:hover { opacity: 0.8; }

/* ── Eyedropper overlay ── */
#eyedropper-overlay {
  display: none; position: fixed; inset: 0; z-index: 9600;
  background: rgba(0,0,0,0.88);
}
#eyedropper-overlay.active { display: block; }
#eyedropper-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
#eyedropper-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  color: #fff; font-family: exo; font-size: 0.85rem;
  background: rgba(0,0,0,0.55); padding: 6px 16px; border-radius: 20px;
  pointer-events: none; white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   LOGO PANEL + POPUP STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Logo panel (the sidebar panel itself) ── */
/* Note: position: absolute; right: 0; top: 14%; width: 23%; height: 78% comes from the grouped panel rule */
.panel.logoopt.active {
  display: flex !important; flex-direction: column; align-items: center;
  padding: 12px 1%; box-sizing: border-box; overflow-y: auto;
}
#logo-cards-container { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.add-logo-btn {
  width: 96%; padding: 14px 0; border: 2px dashed var(--secondarysitecolor);
  background: none; color: var(--secondarysitecolor); font-family: exo; font-weight: bold;
  font-size: 0.88rem; letter-spacing: 0.08em; cursor: pointer; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.add-logo-btn:hover { background: var(--secondarysitecolor); color: #fff; }

/* Logo card */
.logo-card {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: #f4f4f4; border-radius: 8px; padding: 8px 10px; box-sizing: border-box;
  border: 1px solid #e0e0e0;
}
.logo-card-preview {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
  background: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;
}
.logo-card-thumb { width: 100%; height: 100%; object-fit: contain; }
.logo-card-text-preview {
  font-family: exo; font-weight: bold; font-size: 0.58rem;
  color: var(--primarysitecolor); text-align: center; padding: 2px; word-break: break-word;
}
.logo-card-info { flex: 1; font-family: exo; font-size: 0.62rem; color: #555; font-weight: bold; min-width: 0; }
.logo-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.logo-card-btn { width: 32px; height: 32px; border: none; background: none; cursor: pointer; padding: 4px; border-radius: 5px; transition: background 0.12s; }
.logo-card-btn:hover { background: #e0e0e0; }
.logo-card-btn img { width: 100%; height: 100%; object-fit: contain; }

/* Ensure hidden attribute works inside popup even when display: flex is set on parent */
#logo-popup-wrap [hidden] { display: none !important; }

/* ── Logo popup wrap (absolute, covers the panel) ── */
#logo-popup-wrap {
  position: absolute; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: #fff; border-radius: inherit; overflow: hidden;
}
#logo-popup-wrap[hidden] { display: none !important; }

/* Header bar */
.lp-header {
  background: #1a1a1a; color: #fff; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; position: relative; overflow: hidden;
}
.lp-header-title {
  font-family: exo; font-weight: 900; font-size: 1.3rem;
  letter-spacing: 0.1em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  position: relative; z-index: 1;
}
.lp-header-svg {
  position: absolute; right: 0; top: 0; height: 100%; width: auto;
  pointer-events: none;
}

/* Position selection phase */
#logo-phase-pos { display: flex; flex-direction: column; flex: 1; overflow: hidden; padding-bottom: 5%; }
#logo-phase-pos .lp-footer { flex-shrink: 0; margin-top: auto; }
.lp-pos-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 14px; }
.lp-pos-buttons { display: grid; grid-template-columns: 1fr 1fr; max-width: 300px; width: 100%; gap: 12px; }
.lp-pos-btn {
  font-family: exo; font-weight: bold; font-size: 1rem; letter-spacing: 0.1em;
  padding: 18px 10px; border: 2px solid var(--secondarysitecolor); border-radius: 10px;
  background: none; color: var(--secondarysitecolor); cursor: pointer; width: 100%;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.lp-pos-btn:hover:not(:disabled) { background: var(--secondarysitecolor); color: #fff; }
.lp-pos-btn:disabled, .lp-pos-btn--used {
  opacity: 0.35; cursor: not-allowed; border-color: #aaa; color: #aaa;
}
.lp-pos-btn:nth-child(5) { grid-column: 1 / -1; }

/* Controls phase */
#logo-phase-controls { display: flex; flex-direction: column; flex: 1; overflow: hidden; padding-bottom: 5%; }
.lp-body {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; justify-content: flex-start;
}

/* Top row: preview + right col */
.lp-top-row { display: flex; gap: 10px; align-items: flex-start; }
.lp-preview-box {
  width: 200px; height: 200px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  background: #f0f0f0; border: 2px dashed #ccc; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: border-color 0.15s; position: relative;
}
.lp-preview-box:hover { border-color: var(--secondarysitecolor); }
.lp-preview-box img { width: 100%; height: 100%; object-fit: contain; }
.lp-text-preview {
  cursor: default; border-style: solid; border-color: #ddd;
  font-family: exo; font-weight: bold; font-size: 1rem; color: #333;
  word-break: break-word; padding: 6px; text-align: center;
}

/* Right column: mode select + flip/rotate */
.lp-right-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.lp-mode-select {
  width: 100%; font-family: exo; font-weight: bold; font-size: 0.8rem;
  letter-spacing: 0.08em; padding: 8px 10px;
  border: 2px solid var(--secondarysitecolor); border-radius: 8px;
  background: #fff; color: var(--secondarysitecolor); cursor: pointer; appearance: auto;
}
.lp-flip-btn {
  width: 100%; padding: 8px 14px; border: 2px solid var(--secondarysitecolor);
  border-radius: 8px; background: var(--secondarysitecolor); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity 0.15s; align-self: flex-start;
}
.lp-flip-btn:hover { opacity: 0.85; }
.lp-flip-btn img { height: 30px; object-fit: contain; filter: brightness(0) invert(1); }
.lp-rotate-pair { display: flex; gap: 10%; margin-top: 5%; margin-left: 5%; }
.lp-rotate-btn {
  flex: 1; border: 1.5px solid #000; border-radius: 50%;
  background: #000; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: background 0.12s;
}
/* Rotate buttons — fixed square size */
#lp-logo-rotate .lp-rotate-btn,
#lp-text-rotate .lp-rotate-btn {
  width: 40%; aspect-ratio: 1/1; flex: none;
}
.lp-rotate-btn:hover { background: #333; }
.lp-rotate-btn img { height: 70%; object-fit: contain; filter: brightness(0) invert(1); }
.lp-rotate-btn span { display: none; }

/* Text input */
.lp-text-input {
  width: 100%; padding: 8px 10px; font-family: exo; font-weight: bold; font-size: 0.9rem;
  border: 1.5px solid #ccc; border-radius: 7px; box-sizing: border-box; outline: none;
}
.lp-text-input:focus { border-color: var(--secondarysitecolor); }

/* Font select */
.lp-font-select {
  width: 100%; font-family: exo; font-weight: bold; font-size: 0.75rem;
  border: 1.5px solid #ccc; border-radius: 7px; padding: 6px 8px;
}

/* Toggle rows */
.lp-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-row-label { font-family: exo; font-weight: bold; font-size: 0.65rem; color: #666; letter-spacing: 0.04em; white-space: nowrap; }

/* Arrow section */
.lp-arrows-section { display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0; padding-top: 0%}
.lp-arrows-pad { flex-shrink: 0; width: fit-content; }
.lp-arrows-grid { display: grid; grid-template-columns: 48px 48px 48px; grid-template-rows: 48px 48px 48px; gap: 4px; width: calc(3 * 48px + 2 * 4px); }
.lp-arrow-btn {
  width: 100%; aspect-ratio: 1/1; border: none; border-radius: 6px;
  background: var(--secondarysitecolor); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.12s;
}
.lp-arrow-btn:hover { opacity: 0.8; }
.lp-arrow-btn img { height: 20px; object-fit: contain; filter: brightness(0) invert(1); }

/* Vertical-only grid (top/bottom positions): collapse to 1 column, up + down only */
.lp-arrows-grid.lp-vertical-only {
  grid-template-columns: 48px;
  grid-template-rows: 48px 48px;
  width: 48px;
}
.lp-arrows-grid.lp-vertical-only > :not(:nth-child(2)):not(:nth-child(8)) { display: none; }

/* Arrow layout wrapper */
.lp-arrows-and-border { display: flex; align-items: center; gap: 10px; }
.lp-body--text-mode .lp-arrows-and-border { margin-top: auto; padding-top: 8px; }
#lp-white-border-row, #lp-removebg-row { display: flex; flex-direction: column; gap: 6px; align-items: center; flex-shrink: 0; }
#lp-white-border-row .switch, #lp-removebg-row .switch { position: relative !important; width: 60px !important; height: 30px !important; flex-shrink: 0 !important; filter: none !important; }
#lp-white-border-row .switch .slider:before, #lp-removebg-row .switch .slider:before { height: 22px !important; width: 22px !important; bottom: 4px !important; left: 4px !important; }
#lp-white-border-row .switch input:checked + .slider:before, #lp-removebg-row .switch input:checked + .slider:before { transform: translateX(28px) !important; }

/* Styled size sliders */
#logo-popup-size,
#logo-popup-textsize,
#logo-popup-bordersize {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 12px; border-radius: 0.5rem;
  background: var(--primarysitecolor);
  filter: drop-shadow(#8f8f8f 2px 2px 1px);
  cursor: pointer; outline: none; border: none;
}
#logo-popup-size::-webkit-slider-thumb,
#logo-popup-textsize::-webkit-slider-thumb,
#logo-popup-bordersize::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10%; aspect-ratio: 1/1;
  background: white; border: 5px solid var(--primarysitecolor);
  border-radius: 50%; cursor: pointer;
}

/* Slider rows */
.lp-slider-row { display: flex; align-items: center; gap: 8px; padding-top: 10%;}
.lp-slider-row input[type=range] { flex: 1; }

/* Color swatch buttons */
.lp-color-swatch {
  height: 30px; min-width: 60px; border: 1.5px solid rgba(0,0,0,0.2); border-radius: 6px;
  cursor: pointer; padding: 0 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lp-color-swatch span {
  font-family: exo; font-weight: bold; font-size: 0.6rem; letter-spacing: 0.04em;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); mix-blend-mode: normal;
}

/* Footer bar */
.lp-footer {
  background: #1a1a1a; padding: 10px 14px;
  display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}
.lp-cancel-btn, .lp-confirm-btn {
  padding: 12px 24px; border: none; border-radius: 7px;
  font-family: exo; font-weight: bold; font-size: 0.92rem; letter-spacing: 0.08em;
  cursor: pointer; transition: opacity 0.15s;
}
.lp-cancel-btn  { background: #555; color: #fff; }
.lp-confirm-btn { background: var(--secondarysitecolor); color: #fff; }
.lp-cancel-btn:hover, .lp-confirm-btn:hover { opacity: 0.8; }

/* ── Delete confirmation overlay ── */
#logo-delete-overlay { display: none; position: fixed; inset: 0; z-index: 9200; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
#logo-delete-overlay.active { display: flex; }
#logo-delete-modal { background: #fff; border-radius: 12px; padding: 24px 28px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 16px; max-width: 340px; font-family: exo; }
.logo-delete-msg { font-weight: bold; font-size: 0.9rem; color: var(--primarysitecolor); text-align: center; }
.logo-delete-actions { display: flex; gap: 10px; }
.logo-delete-actions button { flex: 1; padding: 8px 0; border: none; border-radius: 6px; font-family: exo; font-weight: bold; font-size: 0.75rem; cursor: pointer; transition: opacity 0.15s; }
.logo-delete-actions button:first-child { background: var(--secondarysitecolor); color: #fff; }
.logo-delete-actions button:last-child  { background: #e0e0e0; color: #555; }
.logo-delete-actions button:hover { opacity: 0.8; }

/* ── Helmet logo display elements ── */
#helmet-logo-display { position: absolute; inset: 0; pointer-events: none; }
.helmet-logo-img { position: absolute; pointer-events: none; }
.helmet-text-el  { position: absolute; pointer-events: none; font-weight: bold; }


/* ── Warning / info popup ─────────────────────────────────────────────────── */
.warn-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}
.warn-overlay[hidden] { display: none; }

.warn-modal {
	background: #fff;
	border-radius: 1.2rem;
	padding: 2rem 2.2rem 1.6rem;
	max-width: 380px;
	width: 90vw;
	box-shadow: 0 8px 32px rgba(0,0,0,0.55);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.warn-header {
	border-bottom: 2px solid var(--primarysitecolor);
	padding-bottom: 0.6rem;
}

.warn-title {
	font-family: exo;
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	color: var(--primarysitecolor);
	text-transform: uppercase;
}

.warn-message {
	font-family: exo;
	font-size: 0.88rem;
	line-height: 1.6;
	color: #222;
}

.warn-check-row[hidden] { display: none; }
.warn-check-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: exo;
	font-size: 0.82rem;
	color: #444;
	cursor: pointer;
}
.warn-check-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--primarysitecolor);
	cursor: pointer;
}

.warn-confirm-btn {
	align-self: flex-end;
	background: var(--primarysitecolor);
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	font-family: exo;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	padding: 0.55rem 1.6rem;
	cursor: pointer;
	transition: opacity 0.15s;
}
.warn-confirm-btn:hover:not(:disabled) { opacity: 0.8; }
.warn-confirm-btn:disabled {
	background: #bbb;
	cursor: not-allowed;
}

/* ================================================================
   PANEL SWEEP FIXES
================================================================ */

/* --- Remove scroll from ALL panels --- */
.styleopt, .coloropt, .logoopt, .textureopt, .addonopt, .completeopt {
  overflow: hidden !important;
}
.details, .helmet, .cage, .straps {
  overflow: hidden !important;
}

/* --- Details: larger price / difficulty text --- */
.details-summary-label  { font-size: 0.82rem; }
.details-summary-value  { font-size: 1.45rem; }
.details-difficulty-score { font-size: 1.45rem; }

/* --- Details: fix backplate toggle overlap --- */
.backplatecontrol {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 8px 5% !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 10% !important;
  top: 66% !important;
  left: 0 !important;
  width: 100% !important;
  position: absolute !important;
}
.backplatetitle {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  flex: 1 !important;
  font-size: 0.78rem !important;
}
.backplatecontrol .switch {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 80px !important;
  height: 38px !important;
}
.backplatecontrol .switch .slider:before {
  height: 28px !important;
  width: 28px !important;
  bottom: 5px !important;
  left: 5px !important;
}
input:checked + .backplatecontrol .switch .slider:before,
.backplatecontrol .switch input:checked + .slider:before {
  transform: translateX(42px) !important;
}

/* --- Straps: fix backplate straps toggle overlap --- */
.strapscontrol {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 8px 5% !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 14% !important;
  top: 83% !important;
  left: 0 !important;
  width: 100% !important;
  position: absolute !important;
}
.strapscontroltitle {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  flex: 1 !important;
  font-size: 0.78rem !important;
}
.strapscontrol .switch {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 80px !important;
  height: 38px !important;
}
.strapscontrol .switch .slider:before {
  height: 28px !important;
  width: 28px !important;
  bottom: 5px !important;
  left: 5px !important;
}
.strapscontrol .switch input:checked + .slider:before {
  transform: translateX(42px) !important;
}

/* --- Helmet: shrunk rectangular brand / division / size buttons --- */
.brandbuttons button,
.helmetdivisionopt button,
.helmetsizeopt button {
  float: none !important;
  aspect-ratio: 3 / 1 !important;
  font-size: 0.75rem !important;
  width: 28% !important;
}
.helmetsizeopt button { width: 22% !important; }

/* --- Helmet: reduce color button width --- */
.helmetcolor .color-panel-buttons {
  width: 82% !important;
  margin: 0 auto !important;
}

/* --- Helmet color section: title above button --- */
.helmetcolor {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 5% 4px !important;
}
.helmetcolortitle {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  flex-shrink: 0 !important;
  margin-bottom: 6px !important;
}

/* --- Cage: title above button, smaller button --- */
.cagecolor {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 5% 4px !important;
}
.cagecolortitle {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  flex-shrink: 0 !important;
  margin-bottom: 6px !important;
}
.cagecolor .color-panel-buttons {
  width: 82% !important;
  margin: 0 auto !important;
}

/* --- Straps: title above buttons, smaller buttons --- */
.strapscolor,
.bucklescolor {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 5% 4px !important;
}
.strapscolortitle,
.bucklescolortitle {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  flex-shrink: 0 !important;
  margin-bottom: 6px !important;
}
.strapscolor .color-panel-buttons,
.bucklescolor .color-panel-buttons {
  width: 82% !important;
  margin: 0 auto !important;
}

/* --- Style panel: flex layout, difficulty at top, image grid scrolls below --- */
.styleopt {
  display: flex !important;
  flex-direction: column !important;
}
.styleopt .styletitle {
  order: 1 !important;
  flex-shrink: 0 !important;
  height: auto !important;
  padding: 6px 0 2px !important;
}
.difficultytitle {
  order: 2 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  flex-shrink: 0 !important;
  font-size: 1rem !important;
  padding: 6px 0 4px !important;
  margin-top: 4px !important;
}
.difficultyselect {
  order: 3 !important;
  position: static !important;
  height: auto !important;
  top: auto !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  padding: 4px 0 4px !important;
}
.styles-panel {
  order: 4 !important;
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 10px !important;
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.difficulty-section {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  padding: 4px 3% !important;
  box-sizing: border-box !important;
}
.difficulty-btn {
  padding: 0.75rem 1rem !important;
  font-size: 0.88rem !important;
}

/* --- Colors panel: 4th/5th buttons respect hidden attribute (flex overrides UA display:none) --- */
.cpb-group[hidden] { display: none !important; }

/* --- Colors panel: external labels, larger buttons --- */
.coloropt { padding: 10px 4% !important; }

.cpb-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.cpb-external-label {
  font-family: exo;
  font-weight: bold;
  font-size: 0.75rem;
  color: var(--secondarysitecolor);
  letter-spacing: 0.1em;
  padding-left: 4%;
  margin-bottom: 3px;
  display: block;
}
/* Hide the internal label in the Colors panel; keep it in other panels */
.coloropt .cpb-label { display: none !important; }
.coloropt .cpb-hex   { font-size: 1.1rem !important; }


/* --- Texture: highlighttitle positioning fix --- */
.texture-bottom .highlighttitle {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  font-size: 0.85rem !important;
  margin-bottom: 4px !important;
}

/* --- Texture panel: bottom section side by side, kept inside panel --- */
.texture-bottom {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 90% !important;
  margin: 0 5% 4px !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}
.texture-bottom .highlightcontrol {
  flex-shrink: 0;
  padding: 0 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.texture-bottom .highlightcontrol .switch {
  position: relative !important;
  width: 80px !important;
  height: 38px !important;
  flex-shrink: 0 !important;
}
.texture-bottom .highlightcontrol .switch .slider:before {
  height: 28px !important;
  width: 28px !important;
  bottom: 5px !important;
  left: 5px !important;
}
.texture-bottom .highlightcontrol .switch input:checked + .slider:before {
  transform: translateX(42px) !important;
}
/* Shrink + align texture color button flush with its title */
.texture-bottom #texture-color-controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 !important;
}
/* Title inside controls: left-align to match button */
.texture-bottom .texturetitle {
  text-align: left !important;
  width: auto !important;
  font-size: 0.72rem !important;
  margin-bottom: 4px !important;
}
.texture-bottom .color-panel-buttons {
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 140px !important;
}
.texture-bottom .color-panel-btn {
  width: 100% !important;
  max-width: 140px !important;
}

/* Texturefield must clip/scroll so texture-bottom stays inside the panel */
.textureopt .texturefield {
  overflow-y: auto !important;
}

/* Ensure texture-bottom is never pushed out — reinforce flex-shrink:0 */
.panel.textureopt.active .texture-bottom {
  flex-shrink: 0 !important;
  order: 10 !important;
}

/* --- Addon: fix nav button colors (white text was invisible) --- */
.addonopt .addonselect input[type="button"] {
  background: var(--primarysitecolor) !important;
  color: white !important;
}
.addonopt .addonselect input[type="button"].active,
.addonopt .addonselect input[type="button"]:hover {
  background: var(--tertiarysitecolor) !important;
}

/* --- Addon: texture toggle hidden when not active (no overlap) --- */
.addontex-control:not(.active) { display: none !important; }

/* --- Addon: raise content 5% from bottom via panel padding --- */
.panel.addonopt.active {
  padding-bottom: 5% !important;
}

/* --- Addon: zone color buttons — force grid placement, row layout --- */
.topaddoncolorbuttons, .bottomaddoncolorbuttons, .leftaddoncolorbuttons,
.rightaddoncolorbuttons, .backaddoncolorbuttons {
  position: static !important;
  bottom: auto !important;
  grid-row: 3 !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 8px 4% !important;
}
.topcolor1, .topcolor2, .topcolor3,
.bottomcolor1, .bottomcolor2, .bottomcolor3,
.leftcolor1, .leftcolor2, .leftcolor3,
.rightcolor1, .rightcolor2, .rightcolor3,
.backcolor1, .backcolor2, .backcolor3 {
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* --- Header: hamburger button centered vertically --- */
.nav-toggle {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* --- Header dropdown menu: buttons centered vertically --- */
.menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.menu button {
  height: auto !important;
  padding: 8px 0 !important;
}


/* ============================================================
   RESPONSIVE LAYOUT
   Detection strategy:
     Phone landscape : max-height: 450px  (landscape phones ~375-430px tall)
     Tablet landscape: max-width: 1100px  (tablets/small laptops)
     Laptop          : max-width: 1280px  (minor tweaks only)
   Phones + tablets should be used in landscape orientation.
   Portrait notice shown on phones/tablets in portrait mode.
============================================================ */

/* ── Rotate notice (portrait on small devices) ─────────────── */
#rotate-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--primarysitecolor);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: white;
  font-family: exo, sans-serif;
  text-align: center;
  padding: 20px;
}
#rotate-notice .rotate-icon { font-size: 56px; line-height: 1; }
#rotate-notice p { font-size: 1.1rem; font-weight: bold; letter-spacing: 0.05em; margin: 0; }

@media (max-width: 1100px) and (orientation: portrait) {
  #rotate-notice { display: flex; }
}

/* ── iPad / Laptop (≤ 1280px, landscape) ─────────────────── */
@media (max-width: 1280px) {
  /* Nav buttons */
  .navigation input, .navigation2 input { font-size: 0.85rem; }
}

/* ── iPad / laptop layout fixes (not phone landscape) ──────── */
@media (max-width: 1280px) and (min-height: 451px) {
  /* ── Header: center logo + hamburger vertically, extend height 3% ── */
  header { display: flex !important; align-items: center !important; height: 15% !important; }
  #header-logo { top: 0 !important; }
  .nav-toggle { top: 50% !important; transform: translateY(-50%) !important; }

  /* ── Shift entire layout down ~3% and pin to bottom (iPad Safari gap fix) ── */
  .navigation2 { top: 15% !important; bottom: 0 !important; height: auto !important; }
  .navigation  { top: 15% !important; bottom: 0 !important; height: auto !important; }
  .workspace-container { top: 15% !important; height: 85% !important; }
  .styleopt, .coloropt, .logoopt, .textureopt, .addonopt, .completeopt {
    top: 17% !important; bottom: 0 !important; height: auto !important;
  }
  .details, .helmet, .cage, .straps {
    top: 17% !important; bottom: 0 !important; height: auto !important;
  }
  .panel.textureopt.active, .panel.addonopt.active {
    top: 17% !important; bottom: 0 !important; height: auto !important;
  }

  /* ── Workspace: constrain width, ~10% smaller ── */
  .workspace { max-width: 100% !important; height: 78% !important; }

  /* ── Panel titles ── */
  .styletitle, .colortitle, .logotitle, .texturetitle, .addontitle,
  .completetitle, .detailtitle, .helmettitle, .cagetitle, .strapstitle {
    font-size: 1.5rem !important;
  }

  /* ── Style panel: 3 columns, difficulty buttons centered ── */
  .difficulty-section {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .difficulty-btn {
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    padding: 0.45rem 0.6rem !important; font-size: 0.78rem !important;
  }

  /* ── Details panel: inputs + logo upload down to clear their titles ── */
  .nameinput input, .teaminput input {
    top: 45% !important; border-radius: 8px !important;
  }
  .logoinputarea, .logoinputarea1, .logoinputarea2, .logoinputarea3 {
    top: 30% !important;
  }

  /* ── Cage style buttons: smaller text, moved down to clear cage style title ── */
  .cagebuttons { top: 28% !important; }
  .cagebuttons button { font-size: 0.72rem !important; }

  /* ── Helmet: division + size sections — keep block layout, push buttons below titles ── */
  .helmetdivisionopt, .helmetsizeopt {
    display: block !important;
    overflow: visible !important; height: 15% !important;
  }
  .divisionbuttons { top: 38% !important; }
  .sizebuttons {
    display: flex !important; flex-wrap: wrap !important;
    gap: 4px !important; align-items: center !important;
    top: 38% !important; position: absolute !important;
    left: 5% !important; width: 90% !important;
  }
  .helmetdivisionopt button, .helmetsizeopt button {
    width: auto !important; flex: 0 0 auto !important;
    padding: 3px 8px !important; font-size: 0.65rem !important;
    border-radius: 5px !important; aspect-ratio: unset !important;
    min-width: 32px !important; float: none !important;
  }

  /* ── Logo popup: shrink preview box so right-col has room ── */
  .lp-preview-box { width: 140px !important; height: 140px !important; }
  /* Flip + rotate buttons gain space from smaller preview box */
  #lp-logo-rotate .lp-rotate-btn,
  #lp-text-rotate .lp-rotate-btn { width: 44px !important; height: 44px !important; flex: none !important; }
  .lp-flip-btn img { height: 26px !important; }

  /* ── Helmet panel: color button 20% smaller, model select moved down 5% ── */
  .helmetcolor .color-panel-buttons { width: 66% !important; margin: 0 auto !important; }
  .modelopt { top: 61% !important; }

  /* ── Complete panel: section titles smaller, email input down to clear title ── */
  .commenttitle, .emailtitle { font-size: 0.75rem !important; }
  .emailinput input { top: 42% !important; }
}

/* ── Tablet landscape (≤ 1100px, height > 450px) ───────────── */
@media (max-width: 1100px) and (min-height: 451px) {
  header { height: 8%; }

  .navigation2 { top: 8%; left: 0; width: 44px; height: 92%; }
  .navigation  { top: 8%; right: 0; width: 44px; height: 92%; }

  .workspace-container { left: 44px; top: 8%; width: calc(100% - 88px); height: 92%; }

  .styleopt, .coloropt, .logoopt, .textureopt, .addonopt, .completeopt {
    position: fixed; right: 44px; top: 8%;
    width: 220px; height: 92%; z-index: 400;
    box-shadow: -4px 0 16px rgba(0,0,0,0.25);
  }
  .details, .helmet, .cage, .straps {
    position: fixed; left: 44px; top: 8%;
    width: 220px; height: 92%; z-index: 400;
    box-shadow: 4px 0 16px rgba(0,0,0,0.25);
  }

  .panel.textureopt.active { height: 92% !important; }
  .panel.addonopt.active   { height: 92% !important; }

  .navigation input, .navigation2 input {
    width: 38px; height: 14%; margin-left: 3px; padding-left: 0; font-size: 0.6rem;
  }
  .navigation2 input { height: 22%; }

  #color-popup-overlay { z-index: 10000 !important; }
  #warn-overlay        { z-index: 10000 !important; }
  #eyedropper-overlay  { z-index: 10000 !important; }
  .workspace { height: 96%; }
}

/* ── Phone landscape (height ≤ 450px) ──────────────────────── */
@media (max-height: 450px) {
  header { display: none !important; }

  /* Nav bars: skinnier */
  .navigation2 { top: 0; height: 100%; left: 0; width: 24px; }
  .navigation  { top: 0; height: 100%; right: 0; width: 24px; }

  .workspace-container { left: 24px; top: 0; width: calc(100% - 48px); height: 100%; }

  /* Panels: full-height side drawers over the workspace */
  .styleopt, .coloropt, .logoopt, .textureopt, .addonopt, .completeopt {
    position: fixed; right: 24px; top: 0;
    width: 175px; height: 100%; z-index: 400;
    box-shadow: -4px 0 12px rgba(0,0,0,0.3);
  }
  .details, .helmet, .cage, .straps {
    position: fixed; left: 24px; top: 0;
    width: 175px; height: 100%; z-index: 400;
    box-shadow: 4px 0 12px rgba(0,0,0,0.3);
  }
  /* Complete popup modal: proportional to desktop (62/90 scale) */
  .cp-modal { max-height: 62vh !important; width: min(565px, 63vw) !important; }
  .cp-left { width: 165px !important; padding: 16px 14px !important; gap: 7px !important; }
  .cp-right { padding: 20px 18px 18px !important; gap: 10px !important; }
  .cp-title { font-size: 0.72rem !important; padding-bottom: 5px !important; }
  .cp-steps { font-size: 0.56rem !important; gap: 5px !important; line-height: 1.4 !important; }
  .cp-id { font-size: 0.58rem !important; }
  .cp-download-btn { font-size: 0.54rem !important; padding: 5px 0 !important; }
  .cp-buy-btn { font-size: 0.56rem !important; padding: 6px 14px !important; }

  .panel.textureopt.active { height: 100% !important; }
  .panel.addonopt.active   { height: 100% !important; }

  /* Compact nav buttons */
  .navigation input, .navigation2 input {
    width: 20px; height: 14%; margin-left: 2px; padding-left: 0; font-size: 0.44rem;
  }
  .navigation2 input { height: 22%; }

  /* Color panel: scrollable so 5th button is reachable */
  .coloropt { overflow-y: auto !important; }

  #color-popup-overlay { z-index: 10000 !important; }
  #warn-overlay        { z-index: 10000 !important; }
  #eyedropper-overlay  { z-index: 10000 !important; }
  /* Artboard ~10% smaller */
  .workspace { height: 86% !important; }

  /* Color picker popup: proportional to desktop (same 62/90 scale as complete popup) */
  #color-popup          { width: min(565px, 63vw) !important; max-height: 62vh !important; }
  #popup-header         { padding: 9px 14px 5px !important; }
  #popup-title-text     { font-size: 0.72rem !important; }
  #popup-title-svg      { width: 85px !important; }
  #popup-main           { padding: 9px 10px !important; gap: 9px !important; }
  .popup-section-label  { font-size: 0.47rem !important; margin-bottom: 3px !important; }
  #pro-colors-grid      { gap: 3px !important; }
  #recent-colors-row    { gap: 4px !important; }
  .popup-swatch         { width: 16px !important; height: 16px !important; border-radius: 3px !important; }
  .popup-empty          { font-size: 0.5rem !important; }
  .logo-strip-thumb     { width: 26px !important; height: 26px !important; }
  .logo-strip-plus      { width: 26px !important; height: 26px !important; font-size: 0.9rem !important; }
  #popup-sidebar        { width: 85px !important; padding: 12px 8px !important; gap: 6px !important; }
  #popup-preview-swatch { width: 42px !important; height: 42px !important; }
  .popup-hex-hash       { font-size: 0.56rem !important; padding: 3px 3px 3px 5px !important; }
  #popup-hex-input      { font-size: 0.56rem !important; padding: 3px 4px !important; }
  #popup-confirm, #popup-cancel { padding: 5px 0 !important; font-size: 0.47rem !important; }
}

/* ── Submit loading overlay ── */
#submit-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.submit-spinner {
  width: 52px; height: 52px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.25);
  border-top-color: #ffffff;
  animation: submit-spin 0.75s linear infinite;
}
@keyframes submit-spin {
  to { transform: rotate(360deg); }
}

/* ── Prevent pinch-zoom on iOS (user-scalable=no ignored since iOS 10) ── */
html, body { touch-action: pan-x pan-y; }

/* ── Hide redundant color button labels ── */
#cpb-texture .cpb-label { display: none !important; }
#cpb-helmet .cpb-label  { display: none !important; }

/* ── Addon zone color buttons: hide redundant zone label (title row already says "ZONE X") ── */
.topaddoncolorbuttons .cpb-label,
.bottomaddoncolorbuttons .cpb-label,
.leftaddoncolorbuttons .cpb-label,
.rightaddoncolorbuttons .cpb-label,
.backaddoncolorbuttons .cpb-label { display: none !important; }
/* Bump hex text slightly since it's the only text left */
.topaddoncolorbuttons .cpb-hex,
.bottomaddoncolorbuttons .cpb-hex,
.leftaddoncolorbuttons .cpb-hex,
.rightaddoncolorbuttons .cpb-hex,
.backaddoncolorbuttons .cpb-hex { font-size: 0.78rem !important; }

/* ── Panel content scaling: Tablet ─────────────────────────── */
@media (max-width: 1100px) and (min-height: 451px) {
  /* Panel titles */
  .styletitle, .colortitle, .logotitle, .texturetitle, .addontitle,
  .completetitle, .detailtitle, .helmettitle, .cagetitle, .strapstitle {
    font-size: 1.4rem !important;
  }
  .addonopt .addontitle { font-size: 1.4rem !important; }

  /* Style grid: smaller min cell so 3 cols fit in 220px panel */
  .difficulty-section {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)) !important;
  }
  /* Difficulty filter buttons */
  .difficulty-btn {
    padding: 0.4rem 0.55rem !important;
    font-size: 0.72rem !important;
  }

  /* Color panel: hex label */
  .coloropt .cpb-hex { font-size: 0.88rem !important; }
  .cpb-external-label { font-size: 0.65rem !important; }

  /* Addon nav buttons */
  .addonopt .addonselect input[type="button"] {
    height: 22px !important;
    font-size: 0.6rem !important;
  }

  /* Detail / helmet / cage / straps panel section labels */
  .brandtitle, .helmetdivisiontitle, .helmetsizetitle, .modeltitle,
  .nametitle, .teamtitle, .logodetailtitle, .backplatetitle,
  .strapscolortitle, .bucklescolortitle, .cagestyletitle, .cagecolortitle,
  .strapscontroltitle, .highlighttitle, .commenttitle, .emailtitle {
    font-size: 0.85rem !important;
  }

  /* Inputs in detail panels */
  .nameinput input, .teaminput input, .emailinput input { font-size: 0.85rem !important; }

  /* Addon zone color title labels */
  .topcolor1title, .topcolor2title, .topcolor3title,
  .bottomcolor1title, .bottomcolor2title, .bottomcolor3title,
  .leftcolor1title, .leftcolor2title, .leftcolor3title,
  .rightcolor1title, .rightcolor2title, .rightcolor3title,
  .backcolor1title, .backcolor2title, .backcolor3title {
    font-size: 0.6rem !important;
  }
  .topaddoncolorbuttons, .bottomaddoncolorbuttons, .leftaddoncolorbuttons,
  .rightaddoncolorbuttons, .backaddoncolorbuttons { gap: 2px !important; }

  /* Texture toggle */
  .addontex-control .switch {
    width: 50px !important; height: 26px !important;
  }
  .addontex-control .switch .slider:before {
    height: 18px !important; width: 18px !important;
    bottom: 4px !important; left: 4px !important;
  }
  .addontex-control .switch input:checked + .slider:before {
    transform: translateX(22px) !important;
  }

  /* Texture panel label */
  .texture-bottom .highlighttitle { font-size: 0.75rem !important; }
}

/* ── Panel content scaling: Phone ──────────────────────────── */
@media (max-height: 450px) {
  /* Panel titles */
  .styletitle, .colortitle, .logotitle, .texturetitle, .addontitle,
  .completetitle, .detailtitle, .helmettitle, .cagetitle, .strapstitle {
    font-size: 1.05rem !important;
  }
  .addonopt .addontitle { font-size: 1.05rem !important; }

  /* Style grid: fixed 3 columns */
  .difficulty-section { grid-template-columns: repeat(3, 1fr) !important; }
  /* Difficulty filter buttons */
  .difficulty-btn { padding: 0.28rem 0.4rem !important; font-size: 0.62rem !important; }

  /* Color panel: hex label + padding */
  .coloropt .cpb-hex { font-size: 0.72rem !important; }
  .cpb-external-label { font-size: 0.57rem !important; }
  .coloropt { padding: 6px 4% !important; }
  .color-panel-buttons { gap: 8px !important; }

  /* Addon nav buttons */
  .addonopt .addonselect input[type="button"] { height: 18px !important; font-size: 0.5rem !important; }

  /* ── Details panel section labels ──────────────── */
  .brandtitle, .helmetdivisiontitle, .helmetsizetitle, .modeltitle,
  .nametitle, .teamtitle, .logodetailtitle, .backplatetitle,
  .strapscolortitle, .bucklescolortitle, .cagestyletitle, .cagecolortitle,
  .strapscontroltitle, .highlighttitle, .commenttitle, .emailtitle {
    font-size: 0.5rem !important;
  }
  .difficultytitle { font-size: 0.5rem !important; position: static !important; height: auto !important; }

  /* Logo upload button: move down 5% to clear its title */
  .logoinputarea, .logoinputarea1, .logoinputarea2, .logoinputarea3 { top: 20% !important; }

  /* Name / team inputs: move down + fix border-radius, font 10% smaller */
  .nameinput input, .teaminput input {
    top: 50% !important; height: 36% !important; border-radius: 8px !important;
    font-size: 0.58rem !important;
  }

  /* Backplate design toggle: 30% smaller */
  .backplatecontrol .switch { width: 35px !important; height: 20px !important; }
  .backplatecontrol .switch .slider:before {
    height: 13px !important; width: 13px !important;
    bottom: 3px !important; left: 3px !important;
  }
  .backplatecontrol .switch input:checked + .slider:before { transform: translateX(15px) !important; }
  .backplatetitle { font-size: 0.48rem !important; }

  /* Price / difficulty summary: push to actual bottom, reduce font ~10% */
  .details-summary { bottom: 0 !important; padding-top: 4px !important; gap: 4px !important; }
  .details-summary-label  { font-size: 0.46rem !important; }
  .details-summary-value  { font-size: 0.7rem !important; }
  .details-difficulty-score { font-size: 0.7rem !important; }
  .difficulty-bar-track { width: 56px !important; }

  /* ── Style panel ──────────────────────────────── */
  .brandbuttons button, .helmetdivisionopt button {
    font-size: 0.52rem !important; border-radius: 0.4rem !important;
  }

  /* ── Cage panel buttons ───────────────────────── */
  .cagebuttons button { font-size: 0.52rem !important; border-radius: 0.4rem !important; }

  /* ── Straps toggle ────────────────────────────── */
  .strapscontrol { top: 75% !important; }

  /* ── Texture panel ────────────────────────────── */
  /* Push highlights + color section down 20% to give texture buttons more room */
  .texture-bottom { margin-top: 20% !important; }
  .texturefield li { border-radius: 6px !important; }
  .addontex-control .switch { width: 42px !important; height: 22px !important; }
  .addontex-control .switch .slider:before {
    height: 14px !important; width: 14px !important; bottom: 4px !important; left: 4px !important;
  }
  .addontex-control .switch input:checked + .slider:before { transform: translateX(18px) !important; }
  /* Highlight toggle smaller */
  .texture-bottom .highlightcontrol .switch { width: 42px !important; height: 22px !important; }
  .texture-bottom .highlightcontrol .switch .slider:before {
    height: 14px !important; width: 14px !important; bottom: 4px !important; left: 4px !important;
  }
  .texture-bottom .highlightcontrol .switch input:checked + .slider:before { transform: translateX(22px) !important; }
  .texture-bottom .texturetitle { font-size: 0.48rem !important; }
  .texture-bottom .highlighttitle { font-size: 0.48rem !important; }
  /* Highlight color button fills its side */
  .texture-bottom .color-panel-btn { max-width: none !important; }
  .texture-bottom .color-panel-buttons { max-width: none !important; width: 100% !important; }

  /* ── Addon zone color buttons ─────────────────── */
  .topcolor1title, .topcolor2title, .topcolor3title,
  .bottomcolor1title, .bottomcolor2title, .bottomcolor3title,
  .leftcolor1title, .leftcolor2title, .leftcolor3title,
  .rightcolor1title, .rightcolor2title, .rightcolor3title,
  .backcolor1title, .backcolor2title, .backcolor3title { font-size: 0.44rem !important; }
  .topaddoncolorbuttons .cpb-hex, .bottomaddoncolorbuttons .cpb-hex,
  .leftaddoncolorbuttons .cpb-hex, .rightaddoncolorbuttons .cpb-hex,
  .backaddoncolorbuttons .cpb-hex { font-size: 0.5rem !important; }
  .topaddoncolorbuttons, .bottomaddoncolorbuttons, .leftaddoncolorbuttons,
  .rightaddoncolorbuttons, .backaddoncolorbuttons { gap: 1px !important; }

  /* ── Helmet panel ─────────────────────────────── */
  /* Profile text: centered vertically */
  .helmetprofile p {
    display: flex !important; align-items: center !important; justify-content: center !important;
    height: 100% !important; top: 0 !important; padding-top: 0 !important; font-size: 0.52rem !important;
  }
  .helmetcolortitle { font-size: 0.45rem !important; }
  /* Helmet color button: smaller, no "HELMET" label (hidden globally), smaller hex */
  .helmetcolor .color-panel-buttons { width: 45% !important; max-width: 75px !important; }
  #cpb-helmet .cpb-hex { font-size: 0.55rem !important; }
  /* Brand other: move further down, fix border-radius */
  .brandother { top: 75% !important; }
  .brandother button { border-radius: 4px !important; }
  .brandother input { border-radius: 8px !important; }
  /* Model select: move down to clear its title */
  .modelopt { top: 60% !important; }
  .modelselects select, .modelselects input { border-radius: 8px !important; }
  /* Division section: move up slightly to give size section more room */
  .helmetdivisionopt { top: 70% !important; }
  /* Size section: flow title above buttons using static positioning */
  .helmetsizeopt {
    top: 83% !important;
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; padding: 2px 3% !important;
    overflow: visible !important; height: auto !important;
  }
  .helmetsizetitle {
    position: static !important; width: auto !important;
    height: auto !important; top: auto !important; left: auto !important;
    margin-bottom: 2px !important;
  }
  .sizebuttons {
    position: static !important;
    display: flex !important; flex-wrap: wrap !important;
    gap: 3px !important; align-items: center !important;
    width: 100% !important; left: auto !important; top: auto !important; height: auto !important;
  }
  /* Size buttons: 5% smaller */
  .helmetsizeopt button {
    width: auto !important; flex: 0 0 auto !important;
    padding: 1px 4px !important; font-size: 0.44rem !important;
    border-radius: 4px !important; aspect-ratio: unset !important; min-width: 22px !important;
    float: none !important;
  }

  /* ── Logo popup content: scaled for phone panel ──────────── */
  .lp-header { padding: 6px 8px !important; }
  .lp-header-title { font-size: 0.78rem !important; }
  /* Upload button: 30% smaller */
  .lp-preview-box { width: 80px !important; height: 80px !important; }
  .lp-pos-btn { padding: 8px 4px !important; font-size: 0.65rem !important; }
  .lp-body { padding: 6px 8px !important; gap: 5px !important; overflow-x: hidden !important; }
  .lp-top-row { gap: 6px !important; }
  /* Mode select + flip btn: ~half height */
  .lp-mode-select { padding: 3px 6px !important; font-size: 0.6rem !important; }
  .lp-flip-btn { padding: 3px 8px !important; }
  .lp-flip-btn img { height: 13px !important; }
  /* Arrows: 20% smaller (48px → 38px) */
  .lp-arrows-grid {
    grid-template-columns: repeat(3, 38px) !important;
    grid-template-rows: repeat(3, 38px) !important;
    width: calc(3 * 38px + 2 * 4px) !important;
  }
  .lp-arrows-grid.lp-vertical-only {
    grid-template-columns: 38px !important;
    grid-template-rows: repeat(2, 38px) !important;
    width: 38px !important;
  }
  .lp-arrow-btn img { height: 15px !important; }
  /* Slider row: tighter padding */
  .lp-slider-row { padding-top: 4% !important; gap: 5px !important; }
  /* Size slider: 10% smaller track, constrain width to 85% */
  #logo-popup-size { height: 10px !important; max-width: 65% !important; }
  #logo-popup-textsize, #logo-popup-bordersize { max-width: 85% !important; }
  /* Slider thumb: fixed pixel size so iOS renders the handle */
  #logo-popup-size::-webkit-slider-thumb,
  #logo-popup-textsize::-webkit-slider-thumb,
  #logo-popup-bordersize::-webkit-slider-thumb {
    width: 18px !important; height: 18px !important; aspect-ratio: unset !important;
  }
  /* Text mode: font/border rows — label on its own line, swatch+slider below */
  #lp-text-size-row, #lp-border-color-row {
    flex-wrap: wrap !important; padding-top: 2% !important;
  }
  #lp-text-size-row .lp-row-label, #lp-border-color-row .lp-row-label {
    width: 100% !important; margin-bottom: 2px !important;
  }
  /* Color swatch smaller */
  .lp-color-swatch { height: 20px !important; min-width: 44px !important; padding: 0 4px !important; }
  .lp-color-swatch span { font-size: 0.48rem !important; }
  /* White border + remove-bg toggles: stack below arrows on phones */
  .lp-arrows-and-border { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  #lp-removebg-row { flex-direction: row !important; align-items: center !important; gap: 8px !important; width: 100% !important; }
  /* Cancel/confirm: half size */
  .lp-cancel-btn, .lp-confirm-btn {
    padding: 5px 10px !important; font-size: 0.6rem !important;
  }
  .lp-footer { padding: 6px 8px !important; gap: 6px !important; }

  /* ── Logo panel cards: less tall ─────────────── */
  .logo-card-preview { width: 38px !important; height: 38px !important; }
  .logo-card { padding: 4px 6px !important; }
  .logo-card-btn { width: 22px !important; height: 22px !important; }

  /* ── Complete panel: elements down ~5% from base ─────────── */
  .comments { top: 10% !important; }
  .commentimages { top: 50% !important; }
  .email { top: 70% !important; }
  /* Email input: move down within section */
  .emailinput input {
    top: 50% !important; height: 36% !important; border-radius: 8px !important;
    font-size: 0.58rem !important;
  }
  /* Comments + email titles: smaller, comment shifted left 3% */
  .commenttitle { font-size: 0.42rem !important; left: -26% !important; }
  .emailtitle   { font-size: 0.42rem !important; }
  /* Comments textarea: smaller text */
  .commentbox textarea { font-size: 0.5rem !important; }
  /* Next button: taller */
  .submitbutton { height: 13% !important; font-size: 1rem !important; border-radius: 8px !important; }
}