:root{
--black:#050505;--ink:#0d0d0d;--panel:#111;--panel2:#171717;--gold:#c69a43;--gold2:#f1cc77;--cream:#f5efe2;--muted:#a9a39a;--line:#30291f;--shadow:0 25px 80px rgba(0,0,0,.55)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--cream);font-family:Inter,Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
.announcement{height:30px;display:flex;justify-content:center;align-items:center;gap:10px;background:#000;color:#c9c0b0;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:2.5px}.announcement span{color:var(--gold2)}
.header{height:78px;padding:8px 4.5%;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(5,5,5,.95);backdrop-filter:blur(15px);z-index:50}.logo-link{width:122px;height:62px;display:block}.logo-link img{width:100%;height:100%;object-fit:contain}.header nav{display:flex;gap:26px;margin-left:auto}.header nav a,.icon-btn{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#d4cec1}.header nav a:hover,.icon-btn:hover{color:var(--gold2)}.header-actions{display:flex;gap:10px}.icon-btn{background:transparent;border:0}.cart-btn{background:var(--gold);border:0;border-radius:999px;padding:10px 16px;font-weight:900}.cart-btn b{background:#0a0908;color:var(--gold2);border-radius:50%;padding:2px 7px;margin-left:5px}
.hero{min-height:720px;padding:90px 7%;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:70px;background:radial-gradient(circle at 75% 50%,#2c2111 0,#0b0b0b 33%,#050505 68%)}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:900;color:var(--gold2);margin:0 0 13px}.hero h1{font:900 clamp(54px,7.2vw,100px)/.88 Georgia,serif;letter-spacing:-5px;margin:0 0 28px}.hero h1 em,h2 em{font-style:normal;color:var(--gold2)}.hero-lead{font-size:18px;line-height:1.7;color:var(--muted);max-width:680px}.hero-actions{display:flex;gap:12px;margin-top:28px}.gold-btn,.line-btn{display:inline-flex;justify-content:center;align-items:center;border-radius:10px;padding:13px 20px;font-weight:900;border:1px solid var(--gold);transition:.2s}.gold-btn{background:var(--gold);color:#080706}.gold-btn:hover{background:var(--gold2);transform:translateY(-1px)}.line-btn{color:var(--gold2);background:transparent}.line-btn:hover{background:#21190d}.trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:25px;color:#8e897f;font-size:11px;letter-spacing:.5px}.hero-art{height:490px;border:1px solid #5a431f;border-radius:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(145deg,#1d1810,#080808);box-shadow:var(--shadow)}.crest-ring{position:absolute;width:370px;height:370px;border:1px solid #6a4c1f;border-radius:50%;box-shadow:0 0 0 30px rgba(177,129,43,.04),0 0 0 60px rgba(177,129,43,.025)}.hero-hg{font:900 190px/.8 Georgia,serif;color:var(--gold);text-shadow:0 15px 45px #000;z-index:1}.hero-caption{letter-spacing:4px;font-size:10px;color:#9d907a;z-index:1;margin-top:28px}
.section{padding:95px 7%}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}.section-head.centered{display:block;text-align:center;max-width:800px;margin:0 auto 42px}.section-head h2{font:900 52px/1 Georgia,serif;margin:0}.section-head>p:last-child{max-width:500px;color:var(--muted);line-height:1.7}.filter-bar{display:flex;gap:8px;margin-bottom:20px}.filter{border:1px solid var(--line);background:#0c0c0c;color:#aaa;padding:9px 14px;border-radius:999px;font-size:11px}.filter.active,.filter:hover{background:#231b0d;color:var(--gold2);border-color:#6a4c1f}.catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.product-card{background:linear-gradient(145deg,#151515,#0b0b0b);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.2s}.product-card:hover{border-color:#6c5024;transform:translateY(-3px)}.product-image{height:205px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#29241b,#0b0b0b 70%);position:relative}.product-icon{font-size:66px;filter:drop-shadow(0 15px 20px #000)}.product-tag{position:absolute;top:10px;left:10px;color:var(--gold2);font-size:9px;letter-spacing:2px}.product-info{padding:17px}.product-info h3{margin:0 0 4px;font:700 20px Georgia,serif}.product-info p{margin:0;color:#8f8b83;font-size:12px}.product-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.product-bottom b{color:var(--gold2)}.quick-add{border:1px solid var(--gold);background:transparent;color:var(--gold2);padding:7px 10px;border-radius:8px;font-size:10px;font-weight:900}
.designer-section{padding:95px 4.5%;background:#090909;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.designer-shell{max-width:1450px;margin:auto;display:grid;grid-template-columns:270px 1fr 300px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0e0e0e;box-shadow:var(--shadow)}.left-panel,.right-panel{padding:18px;background:#111}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}.panel-title{font-size:9px;letter-spacing:2px;color:var(--gold2);font-weight:900;margin:10px 0 9px}.left-panel select{width:100%;background:#080808;border:1px solid #393126;color:#eee;padding:10px;border-radius:8px}.mini-products{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0 16px}.mini-products button{background:#171717;border:1px solid #28231c;color:#aaa;border-radius:7px;padding:8px 5px;font-size:9px}.mini-products button.active{border-color:var(--gold);color:var(--gold2)}.area-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px}.area{border:1px solid #29241d;background:#0b0b0b;color:#aaa;padding:8px;border-radius:6px;font-size:9px}.area.active{color:var(--gold2);border-color:var(--gold)}.swatches{display:flex;gap:7px;flex-wrap:wrap}.swatch{width:25px;height:25px;border-radius:50%;border:2px solid #444}.swatch.active{border-color:var(--gold2);box-shadow:0 0 0 2px #33250e}.add-tools{display:grid;gap:7px}.add-tools button,.upload-btn{border:1px solid #332b20;background:#0a0a0a;color:#d5cec1;padding:9px;border-radius:7px;font-size:10px;text-align:center}.upload-btn input{display:none}.upload-help{font-size:9px;color:#777;margin-top:10px;line-height:1.5}
.stage-panel{min-width:0;background:#0a0a0a;display:flex;flex-direction:column}.stage-toolbar{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 15px}.stage-toolbar b{display:block;font-size:12px}.stage-toolbar span{color:var(--gold2);font-size:9px;letter-spacing:1px}.toolbar-actions{display:flex;gap:5px}.toolbar-actions button{background:#161616;border:1px solid #302a21;color:#aaa;border-radius:6px;padding:7px 9px;font-size:9px}.toolbar-actions button:hover{color:var(--gold2);border-color:#665022}.canvas-wrap{min-height:570px;display:flex;align-items:center;justify-content:center;padding:30px;background:radial-gradient(circle at center,#1d1b17,#080808 65%);overflow:hidden}.mock-product{width:350px;height:395px;background:#181818;border-radius:55px 55px 28px 28px;position:relative;box-shadow:0 25px 50px #000;transition:.2s}.mock-product:before,.mock-product:after{content:"";position:absolute;top:25px;width:110px;height:230px;background:inherit;z-index:0}.mock-product:before{left:-75px;transform:rotate(18deg);border-radius:50px}.mock-product:after{right:-75px;transform:rotate(-18deg);border-radius:50px}.print-zone{position:absolute;z-index:2;left:85px;top:75px;width:180px;height:250px;border:1px dashed rgba(241,204,119,.42);overflow:hidden}.back-label{position:absolute;top:3px;left:0;right:0;text-align:center;color:rgba(241,204,119,.45);font-size:7px;letter-spacing:1px;pointer-events:none}.design-element{position:absolute;min-width:45px;min-height:30px;transform-origin:center center;cursor:move;user-select:none;border:1px solid transparent}.design-element.selected{border:1px dashed var(--gold2)}.design-element img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.design-text{font-weight:900;white-space:nowrap;color:#f1cc77;font-size:25px;padding:4px}.handle{position:absolute;width:8px;height:8px;background:var(--gold2);border:1px solid #000}.handle.br{right:-5px;bottom:-5px;cursor:nwse-resize}.handle.tr{right:-5px;top:-5px;cursor:nesw-resize}.rotate-handle{width:9px;height:9px;border-radius:50%;background:var(--gold2);position:absolute;left:50%;top:-18px;transform:translateX(-50%);cursor:grab}.zoom-row{height:48px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:8px}.zoom-row button{background:#171717;color:#ddd;border:1px solid #302a21;width:28px;height:28px;border-radius:6px}.zoom-row input{width:190px}.zoom-row span{font-size:10px;color:#777;width:40px}
.layers{display:grid;gap:6px;max-height:230px;overflow:auto}.layer{display:flex;gap:7px;align-items:center;border:1px solid #29241d;background:#0b0b0b;padding:8px;border-radius:7px;font-size:9px;color:#aaa}.layer.active{border-color:var(--gold);color:var(--gold2)}.layer button{margin-left:auto;border:0;background:none;color:#777}.inspector{margin-top:15px;border-top:1px solid var(--line);padding-top:15px}.inspector-empty{color:#666;font-size:10px;line-height:1.5}.inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.inspector-grid label{font-size:8px;color:#777}.inspector-grid input,.inspector-grid select{width:100%;margin-top:4px;background:#080808;color:#eee;border:1px solid #332d24;padding:7px;border-radius:5px;font-size:10px}.price-card{margin-top:18px;border-top:1px solid var(--line);padding-top:15px;display:grid;gap:8px;font-size:10px}.price-card>div{display:flex;justify-content:space-between;color:#8e8981}.price-card b{color:#ddd}.price-card .total{font-size:14px;color:#eee;border-top:1px solid var(--line);padding-top:10px}.price-card .total b{color:var(--gold2)}.price-card label{display:flex;justify-content:space-between;align-items:center;color:#888}.price-card input{width:65px;background:#090909;color:#fff;border:1px solid #332d24;border-radius:5px;padding:6px}.full{width:100%}
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:#0e0e0e}.feature-strip>div{padding:28px;border-right:1px solid var(--line)}.feature-strip b{color:var(--gold2);display:block;font-size:10px}.feature-strip strong{display:block;font:700 20px Georgia,serif;margin:8px 0}.feature-strip span{color:#777;font-size:11px}
.services{display:grid;grid-template-columns:1fr 1fr;gap:70px;background:linear-gradient(120deg,#0f0d09,#060606)}.services h2{font:900 56px/1 Georgia,serif;margin:0 0 20px}.services>div>p:not(.eyebrow){color:var(--muted);max-width:600px;line-height:1.7}.service-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:30px}.service-cards div{border:1px solid #3b2d19;padding:15px;color:var(--gold2);font-size:9px;letter-spacing:2px}.design-form{background:#111;border:1px solid var(--line);padding:25px;border-radius:17px;display:grid;gap:11px}.design-form h3{font:700 28px Georgia,serif;margin:0 0 5px}.design-form input,.design-form select,.design-form textarea,.checkout-modal input{width:100%;background:#080808;color:#eee;border:1px solid #352f27;padding:12px;border-radius:8px;outline:0}.design-form input:focus,.design-form textarea:focus{border-color:var(--gold)}.file-label{font-size:9px;color:#888}.file-label input{margin-top:6px}.message{color:var(--gold2);font-size:11px;min-height:17px}
.order-help{background:#080808}.help-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.help-grid>div{border-top:1px solid #57411f;padding:18px 4px}.help-grid span{color:var(--gold2);font-size:10px}.help-grid h3{font:700 24px Georgia,serif;margin:8px 0}.help-grid p{font-size:11px;line-height:1.6;color:#777}
footer{border-top:1px solid var(--line);padding:35px 7%;display:flex;align-items:center;gap:20px;color:#777}.footer-links{margin-left:auto;display:flex;gap:18px;font-size:10px}.footer-links a:hover{color:var(--gold2)}footer img{width:110px;height:65px;object-fit:contain}footer span{display:block;margin-top:3px}
.drawer-overlay,.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:100;display:flex}.drawer-overlay[hidden],.modal-overlay[hidden]{display:none}.cart-drawer{margin-left:auto;width:min(500px,100%);height:100%;background:#101010;border-left:1px solid #5a431f;padding:22px;display:flex;flex-direction:column}.drawer-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}.drawer-head h2,.checkout-modal h2,.account-modal h2{font:700 38px Georgia,serif;margin:0}.drawer-head button,.modal-close{background:none;border:0;color:#ddd;font-size:32px}.cart-item{display:grid;grid-template-columns:1fr auto;gap:15px;border-bottom:1px solid var(--line);padding:14px 0}.cart-item strong{font-size:13px}.cart-item small{display:block;color:#777;font-size:9px;margin-top:3px}.cart-item .remove{color:#b86b6b;background:none;border:0;font-size:9px;margin-top:8px}.coupon{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:15px}.coupon input{background:#080808;color:#eee;border:1px solid #352f27;padding:9px;border-radius:7px}.coupon button{background:#171717;color:var(--gold2);border:1px solid #58421f;border-radius:7px}.coupon span{grid-column:1/-1;color:var(--gold2);font-size:9px}.summary{margin-top:auto;border-top:1px solid var(--line);padding-top:15px}.summary>div{display:flex;justify-content:space-between;color:#888;padding:4px 0}.summary .grand{color:#eee;font-size:17px;border-top:1px solid var(--line);margin-top:6px;padding-top:10px}.summary .grand b{color:var(--gold2)}.summary .gold-btn{margin-top:14px}
.modal-overlay{align-items:center;justify-content:center;padding:20px}.checkout-modal,.account-modal{width:min(650px,100%);background:#111;border:1px solid #5a431f;border-radius:18px;padding:30px;position:relative;box-shadow:var(--shadow)}.checkout-modal h2,.account-modal h2{margin:0 0 20px}.checkout-modal form{display:grid;gap:10px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.checkout-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:15px 0;font-size:18px}.checkout-total b{color:var(--gold2)}.secure{color:#777;font-size:9px}.account-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:25px 0}.account-demo div{border:1px solid var(--line);padding:20px;text-align:center;color:#777}.account-demo b{display:block;color:var(--gold2);font-size:24px;margin-top:5px}
@media(max-width:1100px){.catalog{grid-template-columns:repeat(3,1fr)}.designer-shell{grid-template-columns:240px 1fr}.right-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:20px}.price-card{margin-top:0}.layers{max-height:180px}.help-grid{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.header nav{display:none}.hero{grid-template-columns:1fr;padding:60px 5%}.hero-art{height:350px}.section{padding:70px 5%}.catalog{grid-template-columns:1fr 1fr}.designer-shell{grid-template-columns:1fr}.left-panel{border-right:0;border-bottom:1px solid var(--line)}.right-panel{grid-column:auto;display:block;border-top:0}.canvas-wrap{min-height:480px}.services{grid-template-columns:1fr}.feature-strip{grid-template-columns:1fr 1fr}.help-grid{grid-template-columns:1fr 1fr}.section-head{display:block}.section-head>p:last-child{margin-top:15px}}
@media(max-width:560px){.header{padding:7px 4%;height:68px}.logo-link{width:95px}.header-actions{margin-left:auto}.icon-btn{display:none}.hero h1{font-size:52px;letter-spacing:-3px}.hero-actions{flex-direction:column}.catalog{grid-template-columns:1fr}.filter-bar{overflow:auto}.section-head h2{font-size:40px}.designer-section{padding:60px 2.5%}.toolbar-actions button{font-size:8px;padding:6px}.mock-product{transform:scale(.8)}.feature-strip,.help-grid,.service-cards,.two{grid-template-columns:1fr}.footer-links{margin-left:0;flex-wrap:wrap}footer{flex-wrap:wrap}}

/* V3 product-template and saved-design UI */
.mock-product{background:var(--product-color,#171717);--product-color:#171717;transition:transform .2s,background .2s}
.mock-product[data-template="hoodie"]{border-radius:42px 42px 25px 25px;width:370px}
.mock-product[data-template="pants"]{width:300px;height:430px;border-radius:30px 30px 18px 18px}
.mock-product[data-template="hat"]{width:370px;height:250px;border-radius:170px 170px 25px 25px}
.mock-product[data-template="football"]{width:420px;height:255px;border-radius:50%;transform:rotate(-12deg)}
.mock-product[data-template="basketball"],.mock-product[data-template="baseball"]{width:310px;height:310px;border-radius:50%}
.mock-product[data-template="phone"]{width:245px;height:445px;border-radius:28px}
.mock-product[data-template="tumbler"]{width:245px;height:400px;border-radius:45px 45px 25px 25px}
.mock-product[data-template="slate"],.mock-product[data-template="rectangle"],.mock-product[data-template="mousepad"],.mock-product[data-template="acrylic"]{width:410px;height:290px;border-radius:10px}
.mock-product[data-template="socks"]{width:220px;height:400px;border-radius:35px 35px 18px 18px}
.mock-product[data-template="tee"]:before,.mock-product[data-template="tee"]:after,
.mock-product[data-template="hoodie"]:before,.mock-product[data-template="hoodie"]:after{background:inherit}
.design-name{width:110px;background:#090909;border:1px solid #332d24;color:#eee;padding:7px;border-radius:6px;font-size:9px}
.saved-modal{width:min(700px,100%);max-height:80vh;overflow:auto;background:#111;border:1px solid #5a431f;border-radius:18px;padding:30px;position:relative}
.saved-modal h2{font:700 38px Georgia,serif;margin:0 0 20px}
.saved-item{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border-top:1px solid var(--line);padding:13px 0}
.saved-item b{display:block;font-size:12px}.saved-item small{display:block;color:#777;font-size:9px;margin-top:4px}
.saved-item button{background:#171717;border:1px solid #352d23;color:#aaa;border-radius:6px;padding:7px 10px;font-size:9px}.saved-item button:hover{color:var(--gold2)}
.muted,.empty-cart{color:#777;text-align:center;padding:30px}


/* Admin-calibrated product mockups */
.mock-product.has-real-image{
  width:min(500px,82vw) !important;
  height:auto !important;
  aspect-ratio:1 / 1;
  border-radius:18px !important;
  background-color:transparent !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}
.mock-product.has-real-image::before,
.mock-product.has-real-image::after{
  display:none !important;
}
.mock-product.has-real-image .print-zone{
  box-sizing:border-box;
}


/* Fast artwork dragging/resizing inside calibrated print zones */
#printZone{
  touch-action:none;
}
#designCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.design-element{
  will-change:left,top,width,height,transform;
  transform-origin:center center;
}
.design-element img{
  user-select:none;
  -webkit-user-drag:none;
}

.library-link{text-decoration:none;display:inline-flex;align-items:center}
.quality-panel{margin-top:12px;border:1px solid #30291f;border-radius:10px;padding:11px;background:#090909}.quality-status p{font-size:9px;color:#888}.quality-badge{display:inline-block;border:1px solid #555;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:900}.quality-badge.good{border-color:#315d3c;color:#9de0ac;background:#0e2014}.quality-badge.warning{border-color:#7c622b;color:#f1cc77;background:#211b0c}.quality-badge.poor{border-color:#713b3b;color:#ff9f9f;background:#2a1111}


/* Live customization-price breakdown */
.designer-pricing-breakdown{
  margin:4px 0 8px 14px;
  padding-left:9px;
  border-left:2px solid #3c2f1a;
}
.designer-pricing-breakdown>div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:3px 0;
  color:#8f887c;
  font-size:8px;
}
.designer-pricing-breakdown b{
  color:#c8b277;
  font-size:8px;
}


/* Review Design modal - contained window, never replaces/overruns Designer page */
.design-approval-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.82);
  overflow:auto;
}
.design-approval-overlay[hidden]{
  display:none !important;
}
.design-approval-modal{
  position:relative;
  width:min(1050px,96vw);
  max-height:90vh;
  overflow:auto;
  padding:24px;
  border:1px solid #6a4c1f;
  border-radius:16px;
  background:#080808;
  box-shadow:0 25px 80px rgba(0,0,0,.65);
}
.design-approval-modal .modal-close{
  position:sticky;
  float:right;
  top:0;
  z-index:4;
}
.approval-item{
  margin:16px 0;
  padding:14px;
  border:1px solid #30291f;
  border-radius:12px;
  background:#0b0b0b;
}
.approval-area-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  align-items:start;
}
.approval-area-card{
  min-width:0;
}
.approval-mockup{
  position:relative;
  width:100%;
  max-width:360px;
  aspect-ratio:1/1;
  margin:10px auto 0;
  background-color:#050505;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  overflow:hidden;
  border:1px solid #29231a;
  border-radius:10px;
}
.approval-zone{
  position:absolute;
  overflow:hidden;
}
.approval-art{
  position:absolute;
  transform-origin:center center;
}
.approval-art img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.approval-text{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:pre-wrap;
  overflow:hidden;
}
.approval-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  display:flex;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
  padding-top:14px;
  margin-top:16px;
  background:linear-gradient(to bottom,rgba(8,8,8,0),#080808 25%);
}
.text-color-control{
  margin-top:4px;
}
.text-color-row{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:8px;
  align-items:center;
}
.text-color-row input[type="color"]{
  width:54px;
  height:40px;
  padding:2px;
  cursor:pointer;
}
#iff{
  width:100%;
}
@media(max-width:650px){
  .design-approval-overlay{
    padding:8px;
  }
  .design-approval-modal{
    width:98vw;
    max-height:94vh;
    padding:16px;
  }
  .approval-area-grid{
    grid-template-columns:1fr;
  }
  .approval-mockup{
    max-width:300px;
  }
}


/* ================================================================
   HOUSE OF GRAPHIQZ 7.0 — LUXURY STREETWEAR / CREATIVE HOUSE SYSTEM
   Presentation-only overrides. Functional IDs and calibrated designer
   geometry remain intact.
   ================================================================ */
:root{
  --black:#030303;
  --ink:#080808;
  --panel:#0d0d0d;
  --panel2:#131313;
  --graphite:#1a1a18;
  --gold:#b98a38;
  --gold2:#e1bd72;
  --gold3:#7f5a22;
  --cream:#f1eee7;
  --paper:#d9d4ca;
  --muted:#918b81;
  --muted2:#625e57;
  --line:rgba(218,184,112,.16);
  --line-strong:rgba(218,184,112,.34);
  --danger:#d18484;
  --success:#99c8a5;
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:24px;
  --shadow:0 34px 100px rgba(0,0,0,.62);
  --display:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
}
html{background:var(--black)}
body{
  min-width:320px;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 6%,rgba(185,138,56,.07),transparent 25rem),
    linear-gradient(180deg,#050505 0,#030303 100%);
  color:var(--cream);
  font-family:var(--sans);
  font-size:15px;
  letter-spacing:.01em;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,#000,transparent 88%);
}
::selection{background:var(--gold);color:#060606}
a,button{transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease,opacity .2s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

.announcement{
  height:32px;
  gap:12px;
  padding:0 18px;
  overflow:hidden;
  white-space:nowrap;
  background:#020202;
  border-color:rgba(225,189,114,.15);
  color:#837b6e;
  font-size:8px;
  font-weight:800;
  letter-spacing:.22em;
}
.announcement span{color:var(--gold2)}
.announcement i{width:22px;height:1px;background:var(--gold3);display:inline-block}
.v7-header{
  height:88px;
  padding:8px clamp(20px,4.5vw,78px);
  gap:26px;
  background:rgba(3,3,3,.86);
  border-bottom:1px solid rgba(225,189,114,.14);
  backdrop-filter:blur(22px) saturate(125%);
}
.logo-link{width:156px;height:70px;flex:0 0 auto}
.logo-link img{filter:drop-shadow(0 8px 24px rgba(0,0,0,.65))}
.header nav{gap:clamp(15px,2.1vw,34px)}
.header nav a,.icon-btn{
  position:relative;
  padding:10px 0;
  color:#aaa397;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}
.header nav a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:3px;height:1px;
  background:var(--gold2);
  transition:right .22s ease;
}
.header nav a:hover::after{right:0}
.cart-btn{
  min-width:88px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#d4ab5c,#a8752a);
  color:#080706;
  border:1px solid #d8b46d;
  border-radius:999px;
  padding:10px 15px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 10px 35px rgba(168,117,42,.14);
}
.cart-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.cart-btn b{margin:0;padding:2px 7px;background:#090807;color:#e6c57e}

.v7-hero{
  position:relative;
  min-height:min(790px,calc(100vh - 120px));
  padding:clamp(70px,9vw,136px) clamp(24px,7vw,116px);
  grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
  gap:clamp(44px,6vw,100px);
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 48%,rgba(179,128,45,.16),transparent 31%),
    radial-gradient(circle at 68% 30%,rgba(255,226,160,.055),transparent 24%),
    linear-gradient(115deg,#040404 0%,#090806 54%,#030303 100%);
}
.v7-hero::before{
  content:"HOUSE";
  position:absolute;
  right:-.03em;
  bottom:-.24em;
  z-index:-1;
  color:transparent;
  -webkit-text-stroke:1px rgba(225,189,114,.07);
  font:900 clamp(180px,26vw,480px)/.8 var(--display);
  letter-spacing:-.08em;
  pointer-events:none;
}
.hero-copy{position:relative;z-index:2;max-width:850px}
.eyebrow{
  margin-bottom:18px;
  color:var(--gold2);
  font-size:9px;
  font-weight:900;
  letter-spacing:.28em;
}
.v7-hero h1{
  max-width:920px;
  margin:0;
  font:900 clamp(58px,6.8vw,112px)/.84 var(--display);
  letter-spacing:-.058em;
  text-transform:uppercase;
}
.v7-hero h1 em{
  color:transparent;
  -webkit-text-stroke:1.3px var(--gold2);
  text-shadow:0 0 36px rgba(185,138,56,.11);
}
.hero-lead{
  max-width:690px;
  margin-top:30px;
  color:#a49e94;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.85;
}
.hero-actions{gap:10px;margin-top:34px}
.gold-btn,.line-btn{
  min-height:48px;
  border-radius:4px;
  padding:14px 22px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.gold-btn{
  background:linear-gradient(135deg,#d6ae61 0,#ac782c 100%);
  border-color:#d7b265;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 16px 35px rgba(177,124,44,.11);
}
.gold-btn:hover{background:linear-gradient(135deg,#e6c579,#ba8532);transform:translateY(-2px)}
.line-btn{border-color:rgba(225,189,114,.32);background:rgba(255,255,255,.015);color:#d5c7aa}
.line-btn:hover{background:rgba(225,189,114,.075);border-color:var(--gold2);transform:translateY(-2px)}
.hero-proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:660px;
  margin-top:52px;
  padding-top:20px;
  border-top:1px solid rgba(225,189,114,.16);
}
.hero-proof div{display:flex;gap:10px;align-items:center;padding-right:14px}
.hero-proof b{color:var(--gold2);font:700 16px var(--display)}
.hero-proof span{color:#777168;font-size:9px;line-height:1.4;text-transform:uppercase;letter-spacing:.12em}
.v7-crest-stage{
  height:auto;
  min-height:570px;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}
.crest-aura{
  position:absolute;
  width:min(38vw,590px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(195,143,49,.19),rgba(142,92,18,.05) 44%,transparent 69%);
  filter:blur(10px);
}
.hero-crest{
  position:relative;
  z-index:2;
  width:min(100%,720px);
  max-height:620px;
  object-fit:contain;
  filter:drop-shadow(0 36px 42px rgba(0,0,0,.72));
  transform:translateY(-2%);
}
.hero-art-label{
  position:absolute;
  left:50%;bottom:6%;z-index:3;
  transform:translateX(-50%);
  white-space:nowrap;
  color:#82745f;
  font-size:8px;
  font-weight:900;
  letter-spacing:.32em;
}
.house-standard{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#070706;
}
.house-standard>div{min-height:124px;padding:28px clamp(18px,3vw,48px);border-right:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-content:center}
.house-standard>div:last-child{border-right:0}
.house-standard span{grid-row:1/3;color:#55462d;font:700 26px var(--display)}
.house-standard b{font:700 15px var(--display);letter-spacing:.02em}
.house-standard small{margin-top:5px;color:#777067;font-size:9px;line-height:1.5}

.section{padding:clamp(78px,8vw,125px) clamp(24px,7vw,116px)}
.section-head{margin-bottom:48px}
.section-head h2{font:900 clamp(42px,4.5vw,68px)/.94 var(--display);letter-spacing:-.045em}
.section-head>p:last-child{color:#8b857b;font-size:13px;line-height:1.85}
.section-head.centered{max-width:900px;margin-bottom:54px}
.section-head.centered>p:last-child{max-width:690px;margin:18px auto 0}
.filter-bar{gap:9px;margin-bottom:27px}
.filter{
  border-color:rgba(225,189,114,.14);
  background:#080808;
  color:#767169;
  padding:10px 17px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.filter.active,.filter:hover{background:#161109;color:#e0bd76;border-color:#765522}
.catalog{gap:18px}
.product-card{
  border-color:rgba(225,189,114,.12);
  border-radius:4px;
  background:#090909;
  box-shadow:none;
}
.product-card:hover{border-color:rgba(225,189,114,.48);transform:translateY(-5px);box-shadow:0 26px 60px rgba(0,0,0,.42)}
.product-image{height:clamp(230px,22vw,330px);background:radial-gradient(circle at 50% 45%,#23201a 0,#0e0e0d 52%,#070707 100%);overflow:hidden}
.product-thumb{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .35s ease,filter .35s ease;filter:drop-shadow(0 22px 24px rgba(0,0,0,.35))}
.product-card:hover .product-thumb{transform:scale(1.035)}
.product-tag{top:16px;left:16px;color:#9a7b45;font-size:7px;font-weight:900;letter-spacing:.24em}
.product-info{padding:20px 18px 18px}
.product-info h3{font:700 21px var(--display);letter-spacing:-.02em}
.product-info p{min-height:30px;margin-top:6px;color:#706b63;font-size:10px;line-height:1.5}
.product-bottom{margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.045)}
.product-bottom b{color:#e0bd76;font:700 17px var(--display)}
.quick-add{border-radius:3px;border-color:rgba(225,189,114,.28);padding:9px 12px;color:#c8b078;font-size:8px;letter-spacing:.13em;text-transform:uppercase}
.quick-add:hover{background:#d0a958;color:#080706;border-color:#d0a958}

.designer-section{padding:clamp(85px,8vw,128px) clamp(14px,3.7vw,64px);background:linear-gradient(180deg,#060606,#090806 50%,#050505);border-color:var(--line)}
.designer-shell{max-width:1540px;grid-template-columns:280px minmax(0,1fr) 310px;border-radius:7px;border-color:rgba(225,189,114,.18);background:#0a0a09;box-shadow:0 42px 120px rgba(0,0,0,.62)}
.left-panel,.right-panel{background:#0b0b0b;padding:20px}.left-panel{border-color:var(--line)}.right-panel{border-color:var(--line)}
.panel-title{margin:14px 0 10px;color:#ad8d52;font-size:7px;letter-spacing:.24em}
.left-panel select,.design-name,.inspector-grid input,.inspector-grid select,#iff{background:#060606;border-color:rgba(225,189,114,.14);border-radius:3px}
.mini-products button,.area,.add-tools button,.upload-btn,.toolbar-actions button,.zoom-row button{border-radius:3px;background:#0e0e0e;border-color:rgba(225,189,114,.11);color:#858078}
.mini-products button.active,.area.active{background:#181208;border-color:#8c6529;color:#e0bd76}
.swatch{width:27px;height:27px;border:2px solid #282828}.swatch.active{border-color:#e0bd76;box-shadow:0 0 0 3px rgba(191,143,53,.17)}
.stage-panel{background-color:#070707}
.stage-toolbar{height:auto;min-height:66px;padding:10px 16px;border-color:var(--line);gap:12px;flex-wrap:wrap}
.stage-toolbar b{font:700 14px var(--display)}
.canvas-wrap{min-height:610px;background:radial-gradient(circle at 50% 45%,#211d15 0,#0e0e0d 35%,#060606 74%)}
.mock-product.has-real-image{border-radius:5px !important;filter:drop-shadow(0 26px 34px rgba(0,0,0,.5))}
.print-zone{border-color:rgba(225,189,114,.34)}
.back-label{color:rgba(225,189,114,.42)}
.price-card{border-top-color:var(--line)}
.price-card .total b{color:#e0bd76}
.quality-panel{background:#070707;border-color:rgba(225,189,114,.14);border-radius:4px}

.v7-process{background:#080808;border-color:var(--line)}
.feature-strip>div{position:relative;min-height:170px;padding:34px 30px;border-color:var(--line);background:linear-gradient(145deg,rgba(255,255,255,.012),transparent)}
.feature-strip b{font:700 33px var(--display);color:#4b3920}
.feature-strip strong{margin-top:25px;font:700 17px var(--display)}
.feature-strip span{color:#777168;line-height:1.6}
.services{position:relative;background:radial-gradient(circle at 16% 50%,rgba(163,113,31,.08),transparent 30%)}
.service-copy h2{font:900 clamp(46px,5vw,76px)/.94 var(--display);letter-spacing:-.04em}
.service-copy>p:not(.eyebrow){color:#8a847b;font-size:14px;line-height:1.85;max-width:660px}
.service-cards div{border-radius:3px;border-color:rgba(225,189,114,.14);background:#090909;color:#b8a37a;letter-spacing:.14em;font-size:8px}
.design-form{border-radius:5px;background:#090909;border-color:rgba(225,189,114,.22);box-shadow:0 32px 80px rgba(0,0,0,.35)}
.design-form h3{font:700 30px var(--display)}
.design-form input,.design-form select,.design-form textarea,.checkout-modal input,.checkout-modal select,.checkout-modal textarea{border-radius:3px;background:#050505;border-color:rgba(225,189,114,.16);color:#eee}
.order-help{border-top:1px solid var(--line);background:#050505}
.help-grid>div{border-radius:4px;border-color:rgba(225,189,114,.13);background:#080808;padding:30px}
.help-grid>div span{color:#4e3b21;font:700 28px var(--display)}
.help-grid h3{font:700 20px var(--display)}
.help-grid p{color:#777168;line-height:1.7}

footer{min-height:180px;padding:35px clamp(24px,7vw,116px);border-color:var(--line);background:#020202;gap:22px}
footer img{width:130px;height:100px;object-fit:contain;filter:drop-shadow(0 12px 30px #000)}
footer>div:nth-child(2) b{font:700 18px var(--display);letter-spacing:.05em}
footer>div:nth-child(2) span{color:#655f56;font-size:9px;letter-spacing:.09em}
.footer-links{gap:24px}.footer-links a{color:#827c72;font-size:8px;letter-spacing:.14em;text-transform:uppercase}.footer-links a:hover{color:#dec07b}

.drawer-overlay,.modal-overlay{background:rgba(0,0,0,.82);backdrop-filter:blur(8px)}
.cart-drawer{background:#080808;border-color:rgba(225,189,114,.28);padding:26px}
.drawer-head h2,.checkout-modal h2,.account-modal h2,.saved-modal h2{font:700 40px var(--display)}
.checkout-modal,.account-modal,.saved-modal,.design-approval-modal{border-radius:6px;background:#090909;border-color:rgba(225,189,114,.28);box-shadow:0 35px 100px rgba(0,0,0,.7)}
.cart-item{border-color:var(--line)}
.coupon input{border-radius:3px;background:#050505;border-color:rgba(225,189,114,.16)}
.coupon button{border-radius:3px;background:#0d0d0d;border-color:rgba(225,189,114,.22)}
.approval-item,.approval-mockup{border-radius:4px;border-color:rgba(225,189,114,.14);background-color:#070707}
.approval-actions{background:linear-gradient(to bottom,rgba(9,9,9,0),#090909 25%)}

@media(max-width:1180px){
  .v7-hero{grid-template-columns:1fr .8fr;gap:35px}
  .house-standard{grid-template-columns:1fr 1fr}
  .house-standard>div:nth-child(2){border-right:0}
  .house-standard>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .designer-shell{grid-template-columns:250px minmax(0,1fr)}
  .right-panel{grid-column:1/-1}
}
@media(max-width:860px){
  .v7-header{height:76px;padding:6px 18px}.logo-link{width:125px;height:60px}
  .v7-hero{grid-template-columns:1fr;min-height:auto;padding-top:78px}.v7-crest-stage{min-height:430px;order:-1}.hero-crest{max-height:430px;width:min(92%,610px)}
  .v7-hero h1{text-align:center}.hero-copy{text-align:center;margin:auto}.hero-lead{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.hero-proof{margin-left:auto;margin-right:auto;text-align:left}
  .catalog{grid-template-columns:1fr 1fr}
  .designer-shell{grid-template-columns:1fr}.left-panel{border-right:0}.right-panel{grid-column:auto}
}
@media(max-width:600px){
  .announcement{font-size:7px;letter-spacing:.14em}.announcement i{display:none}
  .v7-header{height:68px}.logo-link{width:105px;height:54px}.header-actions{gap:4px}.cart-btn{min-width:70px;padding:9px 11px}.cart-btn span{display:none}
  .v7-hero{padding:54px 18px 64px}.v7-crest-stage{min-height:320px}.hero-art-label{bottom:2%}.v7-hero h1{font-size:clamp(46px,15vw,68px);letter-spacing:-.05em}.hero-lead{font-size:14px}.hero-actions{flex-direction:column}.hero-proof{grid-template-columns:1fr;gap:12px;margin-top:34px}.hero-proof div{justify-content:center}
  .house-standard{grid-template-columns:1fr}.house-standard>div{border-right:0;border-bottom:1px solid var(--line)}.house-standard>div:last-child{border-bottom:0}
  .section{padding-left:18px;padding-right:18px}.catalog{grid-template-columns:1fr}.product-image{height:330px}
  .section-head h2{font-size:44px}.designer-section{padding-left:8px;padding-right:8px}.canvas-wrap{min-height:470px;padding:14px}.stage-toolbar{align-items:flex-start}.toolbar-actions{width:100%;overflow-x:auto;padding-bottom:4px}.design-name{min-width:118px}
  .feature-strip{grid-template-columns:1fr}.feature-strip>div{min-height:140px}
  footer{padding-left:20px;padding-right:20px}.footer-links{width:100%;gap:12px 18px}
}


/* ================================================================
   V7.1 GRAPHIC LAB — professional creative-workstation treatment
   Presentation only. Functional IDs, calibrated print geometry,
   artwork coordinates, quality calculations and checkout hooks remain
   unchanged.
   ================================================================ */
.graphic-lab-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 18%,rgba(188,139,53,.10),transparent 24%),
    linear-gradient(180deg,#040404 0,#080706 42%,#030303 100%);
}
.graphic-lab-section:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.2;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 19%,#000 82%,transparent 100%);
}
.graphic-lab-intro{max-width:980px;margin-left:auto;margin-right:auto}
.graphic-lab-intro h2{max-width:900px;margin-left:auto;margin-right:auto}
.graphic-lab-intro>p:last-child{max-width:760px;margin-left:auto;margin-right:auto;color:#888177}
.graphic-lab-status{
  max-width:1540px;
  margin:28px auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  overflow:hidden;
  border:1px solid rgba(225,189,114,.13);
  border-bottom:0;
  border-radius:7px 7px 0 0;
  background:rgba(7,7,7,.92);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.graphic-lab-status span{
  min-height:38px;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  border-right:1px solid rgba(225,189,114,.10);
  color:#746d63;
  font-size:7px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.graphic-lab-status span:first-child{color:#d7b36a}
.graphic-lab-status span:last-child{border-right:0}
.graphic-lab-status i{width:6px;height:6px;border-radius:50%;background:#8dbf6a;box-shadow:0 0 12px rgba(141,191,106,.55)}
.graphic-lab-shell{
  position:relative;
  margin-top:0;
  border-radius:0 0 7px 7px;
  box-shadow:0 48px 130px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.015) inset;
}
.lab-rail-label{
  position:absolute;
  top:0;
  z-index:5;
  height:27px;
  display:flex;
  align-items:center;
  padding:0 11px;
  background:#0c0b09;
  color:#5f584f;
  font-size:6px;
  font-weight:900;
  letter-spacing:.23em;
  pointer-events:none;
}
.lab-rail-tools{left:0;width:280px;border-right:1px solid var(--line)}
.lab-rail-canvas{left:280px;right:310px;border-right:1px solid var(--line)}
.lab-rail-inspector{right:0;width:310px}
.left-panel,.right-panel,.stage-panel{padding-top:42px}
.stage-panel{position:relative;padding-left:0;padding-right:0;padding-bottom:0;overflow:hidden}
.lab-panel-kicker{
  margin:0 0 16px;
  color:#dfbd78;
  font:700 13px var(--display);
  letter-spacing:.03em;
}
.left-panel .panel-title,.right-panel .panel-title{
  position:relative;
  padding-top:12px;
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.045);
}
.left-panel .panel-title:first-of-type,.right-panel .panel-title:first-of-type{margin-top:0}
.left-panel select{
  min-height:42px;
  padding:0 12px;
  color:#ddd6ca;
  font-size:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
.mini-products{gap:7px;margin-top:10px}
.mini-products button,.area,.add-tools button,.upload-btn{
  min-height:36px;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.mini-products button:hover,.area:hover,.add-tools button:hover,.upload-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(225,189,114,.35);
  color:#d7c49c;
  background:#12100d;
}
.area-tabs{gap:7px}
.swatches{gap:9px;padding:4px 1px 3px}
.swatch{width:30px;height:30px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.swatch:hover{transform:scale(1.08)}
.add-tools{gap:8px}
.upload-help{padding:10px 11px;margin-top:12px;border-left:2px solid #5a4020;background:#080706;color:#716b62}
.lab-stage-watermark{
  position:absolute;
  z-index:0;
  bottom:74px;
  left:50%;
  transform:translateX(-50%);
  color:rgba(225,189,114,.035);
  font:900 clamp(38px,5vw,82px) var(--display);
  letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
.stage-toolbar{
  position:relative;
  z-index:3;
  min-height:76px;
  padding:12px 18px;
  background:linear-gradient(180deg,#0c0c0b,#080808);
}
.stage-toolbar>div:first-child{display:grid;gap:3px}
.stage-toolbar b{font-size:16px;color:#eee9df}
.stage-toolbar span{font-size:7px;letter-spacing:.22em;text-transform:uppercase}
.toolbar-actions{align-items:center;gap:6px}
.design-name{height:34px;min-width:150px;padding:0 10px;color:#d6d0c6;font-size:9px}
.toolbar-actions button{height:34px;padding:0 10px;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.toolbar-actions button:hover{background:#19140d;color:#e7c47a}
.canvas-wrap{
  position:relative;
  z-index:1;
  min-height:650px;
  padding:44px;
  background:
    radial-gradient(circle at 50% 44%,rgba(211,168,82,.11),transparent 20%),
    radial-gradient(circle at 50% 50%,#1c1913 0,#0d0d0c 42%,#050505 75%);
}
.canvas-wrap:before{
  content:"";
  position:absolute;
  inset:20px;
  border:1px solid rgba(225,189,114,.055);
  pointer-events:none;
}
.canvas-wrap:after{
  content:"PREVIEW / POSITION / APPROVE";
  position:absolute;
  left:34px;
  bottom:30px;
  color:#4f4a42;
  font-size:6px;
  font-weight:900;
  letter-spacing:.26em;
  pointer-events:none;
}
.mock-product.has-real-image{
  position:relative;
  z-index:2;
  filter:drop-shadow(0 34px 50px rgba(0,0,0,.72));
}
.print-zone{box-shadow:0 0 0 1px rgba(0,0,0,.18) inset}
.design-element.selected{border-color:#e5c16f;box-shadow:0 0 0 1px rgba(229,193,111,.14)}
.zoom-row{
  position:relative;
  z-index:3;
  min-height:54px;
  background:#080808;
  border-color:var(--line);
}
.zoom-row:before{content:"ZOOM";color:#5b554c;font-size:6px;font-weight:900;letter-spacing:.2em;margin-right:4px}
.zoom-row input{accent-color:#bc8f3d}
.right-panel{display:flex;flex-direction:column}
.layers{padding:2px 0 12px}
.layer{
  border:1px solid rgba(255,255,255,.045);
  background:#080808;
  border-radius:3px;
  margin-bottom:6px;
  padding:9px;
}
.layer.active{border-color:rgba(225,189,114,.35);background:#151008}
.inspector{margin-top:4px}
.inspector-empty{padding:16px 12px;border:1px dashed rgba(225,189,114,.13);background:#070707;color:#6f6960;line-height:1.6}
.inspector-grid{gap:8px}
.inspector-grid label{color:#756f66;font-size:7px;letter-spacing:.10em;text-transform:uppercase}
.inspector-grid input,.inspector-grid select,#iff{min-height:34px;color:#d8d2c8}
.quality-panel{margin-top:15px;padding:14px}
.price-card{
  margin-top:auto;
  padding-top:18px;
  background:linear-gradient(180deg,transparent,#0d0b08 22%);
}
.price-card-kicker{margin-bottom:12px;color:#8b6b36;font-size:6px;font-weight:900;letter-spacing:.23em;text-transform:uppercase}
.price-card>div:not(.price-card-kicker){padding:5px 0}
.price-card .total{margin-top:8px;padding-top:12px;border-top:1px solid rgba(225,189,114,.14)}
.price-card .total span{color:#cfc6b7}
.price-card .total b{font:700 24px var(--display)}
.price-card label{display:grid;grid-template-columns:1fr 76px;align-items:center;gap:10px;margin:14px 0;color:#817a70;font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.price-card input{width:100%;height:36px;background:#050505;border:1px solid rgba(225,189,114,.18);color:#eee;text-align:center;border-radius:3px}
.price-card .gold-btn{min-height:46px;margin-top:5px;letter-spacing:.13em;text-transform:uppercase}

@media(max-width:1180px){
  .graphic-lab-status{display:grid;grid-template-columns:1fr 1fr}
  .graphic-lab-status span{border-bottom:1px solid rgba(225,189,114,.08)}
  .lab-rail-tools{width:250px}.lab-rail-canvas{left:250px;right:0}.lab-rail-inspector{display:none}
  .right-panel{padding-top:22px}
}
@media(max-width:860px){
  .graphic-lab-status{margin-left:0;margin-right:0}
  .lab-rail-label{display:none}
  .left-panel,.right-panel,.stage-panel{padding-top:20px}
  .stage-panel{padding-top:0}
  .canvas-wrap{min-height:560px;padding:24px 16px}
  .right-panel{display:block}
}
@media(max-width:600px){
  .graphic-lab-status{grid-template-columns:1fr}.graphic-lab-status span{min-height:34px;border-right:0}
  .graphic-lab-status span:nth-child(n+3){display:none}
  .graphic-lab-intro>p:last-child{font-size:12px}
  .stage-toolbar{padding:10px 12px}.stage-toolbar b{font-size:14px}
  .toolbar-actions{display:flex;flex-wrap:nowrap}.toolbar-actions button{flex:0 0 auto}
  .canvas-wrap{min-height:500px;padding:16px 4px}.canvas-wrap:before{inset:8px}.canvas-wrap:after{display:none}
  .lab-stage-watermark{display:none}
}


/* ================================================================
   HOUSE OF GRAPHIQZ 7.2 — COMMERCE / APPROVAL / CHECKOUT EXPERIENCE
   Visual and content hierarchy upgrade only. Existing functional IDs,
   cart state, design approval logic and Stripe handoff remain intact.
   ================================================================ */
.commerce-overlay{background:rgba(0,0,0,.86);backdrop-filter:blur(12px)}
.commerce-kicker{margin:0 0 7px;color:#a9874f;font-size:6px;font-weight:900;letter-spacing:.28em;text-transform:uppercase}
.commerce-progress{display:flex;align-items:center;gap:9px;color:#514c44;font-size:6px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.commerce-progress span{display:flex;align-items:center;gap:6px;white-space:nowrap}.commerce-progress span b{display:grid;place-items:center;width:23px;height:23px;border:1px solid rgba(225,189,114,.13);border-radius:50%;font-size:6px;color:#6e675d}.commerce-progress i{display:block;flex:1;height:1px;min-width:16px;background:rgba(225,189,114,.10)}
.commerce-progress span.active{color:#e4c47f}.commerce-progress span.active b{border-color:#ba8e3e;color:#e4c47f;background:#171107;box-shadow:0 0 0 3px rgba(186,142,62,.06)}.commerce-progress span.complete{color:#9d8a65}.commerce-progress span.complete b{border-color:#65502d;background:#0f0c08;color:#c9a962}
.commerce-drawer{width:min(570px,100%);padding:0;background:linear-gradient(180deg,#0b0a09,#060606 48%,#050505);border-left:1px solid rgba(225,189,114,.24);box-shadow:-30px 0 90px rgba(0,0,0,.6)}
.commerce-drawer>.commerce-progress{padding:18px 26px;border-bottom:1px solid rgba(225,189,114,.09);background:#080706}
.commerce-drawer .drawer-head{padding:25px 26px 19px;align-items:flex-start;border-bottom:1px solid rgba(225,189,114,.09)}
.commerce-drawer .drawer-head h2{font:700 44px/.95 var(--display);letter-spacing:-.03em}.commerce-drawer .drawer-head small{display:block;margin-top:8px;color:#6f6960;font-size:9px;line-height:1.5}.commerce-drawer .drawer-head button{line-height:1;color:#827b70;transition:.2s ease}.commerce-drawer .drawer-head button:hover{color:#e3c47c;transform:rotate(90deg)}
.commerce-items{padding:4px 26px;overflow:auto}.commerce-items .cart-item{position:relative;grid-template-columns:1fr auto;padding:19px 0;border-color:rgba(225,189,114,.09)}.commerce-items .cart-item strong{display:block;color:#e7e1d7;font:700 17px var(--display);letter-spacing:-.01em}.commerce-items .cart-item small{margin-top:6px;color:#736d64;font-size:8px;line-height:1.5;letter-spacing:.035em}.commerce-items .cart-item>b{color:#e5c477;font:700 17px var(--display)}
.cart-proof-btn{margin-top:12px!important;padding:8px 11px!important;border:1px solid rgba(225,189,114,.22)!important;background:#0d0b08!important;color:#c8a75f!important;border-radius:3px!important;font-size:7px!important;font-weight:900!important;letter-spacing:.13em!important;text-transform:uppercase!important}.cart-proof-btn:hover{border-color:#b88b3d!important;color:#edcd83!important;background:#171107!important}.commerce-items .remove{display:inline-block;margin-left:7px!important;color:#655f57!important;text-transform:uppercase;letter-spacing:.12em}.commerce-items .remove:hover{color:#bb756f!important}.empty-cart{margin:30px 0;padding:50px 20px;border:1px dashed rgba(225,189,114,.12);text-align:center;color:#716a60;font:700 18px var(--display);background-color:#070707}
.commerce-coupon{margin:14px 26px 0;padding:16px 0;border-top:1px solid rgba(225,189,114,.09)}.commerce-coupon input{height:39px;border-radius:3px!important}.commerce-coupon button{min-width:82px;border-radius:3px!important;text-transform:uppercase;font-size:7px;font-weight:900;letter-spacing:.13em}.commerce-coupon span{font-size:7px;letter-spacing:.05em}
.commerce-summary{margin-top:auto;padding:20px 26px 25px;border-top:1px solid rgba(225,189,114,.14);background:linear-gradient(180deg,#090807,#050505)}.commerce-summary>div{padding:6px 0;color:#827b71;font-size:9px}.commerce-summary>div b{color:#c6beb2}.commerce-summary .grand{margin-top:8px;padding-top:14px}.commerce-summary .grand span{color:#ddd5c8;font-weight:700}.commerce-summary .grand b{font:700 26px var(--display);color:#e5c477}.commerce-summary .gold-btn{min-height:48px;margin-top:17px;text-transform:uppercase;letter-spacing:.14em}.commerce-assurance{display:block;margin-top:10px;text-align:center;color:#625d55;font-size:7px;letter-spacing:.05em}
.commerce-checkout{width:min(760px,96vw);max-height:92vh;overflow:auto;padding:28px 32px 30px;background:linear-gradient(145deg,#0b0a08,#070707 55%,#0a0805);border-color:rgba(225,189,114,.26);box-shadow:0 45px 140px rgba(0,0,0,.8)}
.modal-progress{margin:0 42px 26px 0;padding-bottom:18px;border-bottom:1px solid rgba(225,189,114,.09)}.commerce-checkout h2{margin:3px 0 7px;font:700 48px/.95 var(--display);letter-spacing:-.035em}.checkout-intro{max-width:560px;margin:0 0 22px;color:#7b746a;font-size:10px;line-height:1.65}
.checkout-section{margin:0 0 16px;padding:15px;border:1px solid rgba(225,189,114,.11);background:rgba(255,255,255,.012)}.checkout-section legend{padding:0 8px;color:#9f7e45;font-size:6px;font-weight:900;letter-spacing:.24em;text-transform:uppercase}.checkout-section input{height:44px;margin-top:8px;background:#050505!important;border-color:rgba(225,189,114,.15)!important}.checkout-section input:focus{border-color:#a77c35!important;box-shadow:0 0 0 3px rgba(167,124,53,.06)}
.commerce-checkout .checkout-total{margin:6px 0 0;padding:17px 2px;border-color:rgba(225,189,114,.13);align-items:end}.commerce-checkout .checkout-total span{color:#91897e;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.commerce-checkout .checkout-total b{font:700 29px var(--display);color:#e6c77f}.checkout-pay{min-height:50px;text-transform:uppercase;letter-spacing:.14em}.checkout-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:15px 0 7px;border:1px solid rgba(225,189,114,.08);background:rgba(225,189,114,.08)}.checkout-trust span{padding:9px 8px;background:#070707;color:#6e685f;text-align:center;font-size:5.5px;font-weight:900;letter-spacing:.14em}.commerce-checkout .secure{text-align:center;color:#5e5952;font-size:7px;letter-spacing:.04em}
.design-approval-overlay{backdrop-filter:blur(12px)}.design-approval-modal{width:min(1120px,96vw);padding:28px;background:linear-gradient(145deg,#0b0a08,#070707 52%,#090704);border-color:rgba(225,189,114,.27);box-shadow:0 45px 140px rgba(0,0,0,.82)}.approval-progress{margin:0 45px 24px 0;padding-bottom:18px;border-bottom:1px solid rgba(225,189,114,.09)}.design-approval-modal>.eyebrow{margin-top:4px}.design-approval-modal>h2{margin:3px 0 8px;font:700 49px/.96 var(--display);letter-spacing:-.035em}.approval-intro{max-width:760px;color:#827b70;font-size:10px;line-height:1.65}.approval-lock-note{display:flex;gap:14px;align-items:center;margin:17px 0 19px;padding:11px 13px;border:1px solid rgba(225,189,114,.12);background:#090704}.approval-lock-note b{flex:0 0 auto;color:#b7914d;font-size:6px;letter-spacing:.19em}.approval-lock-note span{color:#746d63;font-size:8px;line-height:1.45}
.approval-item{margin:12px 0 18px;padding:17px;border-color:rgba(225,189,114,.12);background-color:#070707}.approval-item-head{padding-bottom:12px;border-bottom:1px solid rgba(225,189,114,.07)}.approval-item-head h3{margin:0;color:#e5dfd4;font:700 22px var(--display)}.approval-item-head p{margin:6px 0 0;color:#777066;font-size:8px;letter-spacing:.05em}.approval-area-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px}.approval-area-head b{color:#d7cbb9;font-size:8px;letter-spacing:.09em;text-transform:uppercase}.approval-area-head span{color:#615b53;font-size:6px;letter-spacing:.1em}.approval-mockup{background-color:#050505;border-color:rgba(225,189,114,.10);box-shadow:0 25px 60px rgba(0,0,0,.38)}.approval-check{display:flex;gap:12px;align-items:flex-start;margin:18px 0 8px;padding:14px;border:1px solid rgba(225,189,114,.15);background:#0b0906;color:#aaa197;font-size:9px;line-height:1.55}.approval-check input{margin-top:2px;accent-color:#b88a3a;transform:scale(1.1)}.approval-actions{padding:18px 0 2px;background:linear-gradient(to bottom,rgba(8,8,8,0),#080706 30%);border-top:1px solid rgba(225,189,114,.07)}.approval-actions .gold-btn,.approval-actions .line-btn{min-height:42px;padding:0 17px;text-transform:uppercase;letter-spacing:.11em;font-size:7px}
@media(max-width:720px){.commerce-progress{gap:5px}.commerce-progress span{font-size:5px}.commerce-progress span b{width:20px;height:20px}.commerce-drawer .drawer-head h2{font-size:38px}.commerce-checkout{padding:22px 16px}.commerce-checkout h2,.design-approval-modal>h2{font-size:38px}.checkout-trust{grid-template-columns:1fr}.checkout-section{padding:11px}.checkout-section .two{grid-template-columns:1fr}.approval-lock-note{align-items:flex-start;flex-direction:column;gap:5px}.approval-actions{justify-content:stretch}.approval-actions button{flex:1 1 100%}}


/* =========================================================
   V7.6 — RESPONSIVE + ACCESSIBILITY + CONSISTENCY AUDIT
   ========================================================= */
:root{--hg-focus:#f1cc77;--hg-touch:44px}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea,a{font:inherit}
button,.gold-btn,.line-btn,input[type="button"],input[type="submit"],select{min-height:var(--hg-touch)}
button,.gold-btn,.line-btn,a{touch-action:manipulation}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--hg-focus);outline-offset:3px;box-shadow:0 0 0 1px #090909}
:where(input,select,textarea)::placeholder{opacity:.72}
.skip-link{position:fixed;left:16px;top:12px;z-index:100000;transform:translateY(-160%);padding:11px 16px;background:#f1cc77;color:#080808;border-radius:8px;font-weight:900;text-decoration:none;transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}
[hidden]{display:none!important}
@media (max-width:900px){
  .nav,.topbar,.site-header,.admin-topbar{max-width:100%}
  .hero,.designer-shell,.catalog,.account-shell,.admin-shell{min-width:0}
  .modal,.checkout-modal,.design-approval-modal{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:640px){
  body{font-size:15px}
  h1{font-size:clamp(2.25rem,13vw,4.25rem)}
  h2{font-size:clamp(1.65rem,8vw,2.5rem)}
  .gold-btn,.line-btn,button{max-width:100%}
  input,select,textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (prefers-contrast:more){
  :where(.muted,.subtle,.eyebrow){opacity:1}
  :where(.panel,.card,.product-card,.modal,.checkout-modal){border-width:2px}
}




/* V8 multi-page storefront — additive to V7.8 production styles */
body.multipage main{min-height:60vh}
.header nav a.active,.footer-links a.active{color:var(--gold2)}
.page-intro{padding:76px 6% 24px;max-width:1180px;margin:0 auto}
.page-intro h1{margin:5px 0 14px;font-size:clamp(48px,7vw,92px);line-height:.93;letter-spacing:-4px}
.page-intro h1 em{color:var(--gold2);font-style:italic}
.page-intro>p:last-child{max-width:760px;color:#8d877f;line-height:1.75}
.home-paths{padding-top:45px}
.home-path-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.home-path-card{display:block;padding:28px;min-height:245px;border:1px solid var(--line);background:linear-gradient(145deg,#111,#090909);text-decoration:none;color:#ddd;transition:.2s transform,.2s border-color}
.home-path-card:hover{transform:translateY(-3px);border-color:#6d5427}
.home-path-card span{font-size:10px;color:var(--gold2);letter-spacing:.16em}.home-path-card h3{font-size:24px;margin:34px 0 10px}.home-path-card p{color:#79736b;line-height:1.6}.home-path-card b{display:block;margin-top:26px;color:var(--gold2);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.page-shop #shop{padding-top:35px}.page-designer #designer{padding-top:35px}.page-services #services{padding-top:35px}.page-orders .order-help{padding-top:30px}.page-orders .help-grid>div{display:flex;flex-direction:column}.page-orders .help-grid .line-btn{margin-top:auto;align-self:flex-start;text-decoration:none}
@media(max-width:1000px){.home-path-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.page-intro{padding:50px 5% 10px}.page-intro h1{letter-spacing:-2px}.home-path-grid{grid-template-columns:1fr}}

/* V8.1 shipping transparency */
.checkout-price-breakdown{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}
.checkout-price-breakdown>div{display:flex;justify-content:space-between;gap:20px;padding:6px 0;color:#8f887d;font-size:11px}
.checkout-price-breakdown>div b{color:#e7dfd1}
.checkout-price-breakdown .checkout-total{margin-top:8px;padding-top:16px;border-top:1px solid var(--line);font-size:18px;color:#e7dfd1}
.checkout-price-breakdown .checkout-total b{color:var(--gold2)}
.shop-catalog-section{padding-top:18px}


/* V8.1.2 mobile-safe color-specific product image layer */
.mock-product.has-real-image{
  overflow:visible;
}
.product-mockup-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  z-index:0;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.product-mockup-image[hidden]{display:none !important;}
.mock-product.has-real-image .print-zone{position:absolute;z-index:2;}

/* V8.2 print-size options */
.print-size-options{display:grid;gap:7px;margin:8px 0 16px}.print-size-option{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 11px;background:#0d0d0d;border:1px solid #2e2922;border-radius:8px;color:#b9b0a3;text-align:left}.print-size-option b{color:#eee5d5;font-size:10px}.print-size-option small{font-size:8px;color:#847a6d}.print-size-option.active{border-color:#b88a3a;background:#17130d}.print-size-option.active b{color:#f1cc77}@media(max-width:800px){.print-size-option{min-height:44px}.print-size-option small{font-size:9px}}

/* V8.2.1 button-style consistency: garment size selectors */
.size-options{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:8px 0 16px;
}
.size-option{
  min-width:44px;
  min-height:40px;
  padding:8px 11px;
  background:#0d0d0d;
  border:1px solid #2e2922;
  border-radius:6px;
  color:#b9b0a3;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-align:center;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}
.size-option:hover{
  border-color:#715629;
  color:#e3c47c;
  background:#12100c;
}
.size-option.active{
  border-color:#b88a3a;
  background:#181208;
  color:#f1cc77;
  box-shadow:inset 0 0 0 1px rgba(241,204,119,.08);
}
.size-option:disabled{
  opacity:.42;
  cursor:not-allowed;
}
@media(max-width:800px){
  .size-option{min-width:46px;min-height:44px;padding:9px 12px;}
}

/* V8.3 Inventory & Variant Management */
.inventory-status{margin:9px 0 4px;padding:8px 10px;border:1px solid #332c22;border-radius:7px;background:#0b0b0b;font-size:9px;letter-spacing:.4px;color:#a99f90}
.inventory-status.low{border-color:#8b672f;color:#e2bb6a;background:#151109}
.inventory-status.out{border-color:#67302d;color:#d58f86;background:#160b0a}
.inventory-status.in{color:#9cb49a}
.swatch:disabled,.swatch.out-of-stock{opacity:.28;cursor:not-allowed;filter:grayscale(.7);position:relative}
.swatch:disabled:hover{transform:none}
.product-card.sold-out{opacity:.62}
.product-card.sold-out .product-image{filter:grayscale(.4)}
.quick-add:disabled{opacity:.55;cursor:not-allowed;border-color:#3a3022!important;color:#8d806c!important}
@media(max-width:800px){.inventory-status{font-size:10px;line-height:1.45}}

/* V8.4.3.1 — dedicated customer access actions */
.customer-access-actions{align-items:center}
.customer-login-btn,.customer-create-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 13px;border-radius:999px;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;white-space:nowrap;transition:.2s}
.customer-login-btn{border:1px solid #5b4a31;color:#e5d9c1;background:#0a0908}
.customer-login-btn:hover{border-color:var(--gold);color:var(--gold2)}
.customer-create-btn{border:1px solid var(--gold);background:var(--gold);color:#090704}
.customer-create-btn:hover{filter:brightness(1.08)}
@media(max-width:1100px){.customer-create-btn{padding-left:10px;padding-right:10px}.customer-login-btn,.customer-create-btn{font-size:8px;letter-spacing:.8px}}
@media(max-width:700px){.customer-login-btn,.customer-create-btn{min-height:34px;padding:8px 9px;font-size:7px}.customer-create-btn{display:none}}
@media(max-width:430px){.customer-login-btn{padding:8px}.cart-btn{min-width:64px}}
/* V8.8 simplified House-designed sports ball workflow */
.sports-ball-builder{max-width:1180px;margin:0 auto 80px;display:grid;grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);gap:32px;padding:0 24px}.sports-ball-visual,.sports-ball-form{background:#0c0c0c;border:1px solid #2c2518;padding:28px}.sports-ball-visual{align-self:start;position:sticky;top:24px}.sports-ball-visual>img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}.sports-ball-proof-note{margin-top:20px;padding:18px;border-left:3px solid #b58a38;background:#15120d}.sports-ball-proof-note b{color:#d8b461;letter-spacing:.08em}.sports-ball-step{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid #292929}.sports-ball-step>span{width:38px;height:38px;border:1px solid #b58a38;color:#d8b461;display:grid;place-items:center;font-weight:800}.sports-ball-step h2,.sports-ball-step h3{margin:0 0 8px}.sports-ball-step label{display:block;margin-top:14px;font-weight:700}.sports-ball-step input,.sports-ball-step select,.sports-ball-step textarea{width:100%;margin-top:7px}.sports-ball-upload-previews>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #292929}.sports-ball-total{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:26px}.sports-ball-total strong{display:block;color:#d8b461;font-size:1.6rem}.sports-ball-total small{display:block}.sports-ball-admin-brief{padding:18px;border:1px solid #3a3120;margin:14px 0}.sports-ball-upload-list{display:grid;gap:8px;margin:16px 0}.sports-ball-upload-list a{color:#d8b461}@media(max-width:800px){.sports-ball-builder{grid-template-columns:1fr}.sports-ball-visual{position:static}.sports-ball-total{align-items:stretch;flex-direction:column}.sports-ball-total button{width:100%}}

/* V8.8.1 Sports Ball design-request approval */
.sports-approval-section{padding-top:4px}.sports-approval-heading{display:flex;justify-content:space-between;align-items:center;margin:12px 0 9px}.sports-approval-heading b,.sports-approval-copy h4{color:#d7cbb9;font-size:8px;letter-spacing:.11em;text-transform:uppercase}.sports-approval-heading span{color:#6f675d;font-size:7px}.sports-approval-uploads{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.sports-approval-uploads figure{margin:0;padding:8px;border:1px solid rgba(225,189,114,.12);background:#050505}.sports-approval-uploads img{display:block;width:100%;height:180px;object-fit:contain;background:#020202}.sports-approval-uploads figcaption{padding-top:7px;color:#81796f;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sports-approval-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0}.sports-approval-details>div{padding:11px;border:1px solid rgba(225,189,114,.11);background:#090704}.sports-approval-details span{display:block;margin-bottom:5px;color:#6f675d;font-size:6px;letter-spacing:.12em}.sports-approval-details b{color:#d8c7a3;font-size:9px}.sports-approval-copy{margin-top:10px;padding:13px;border:1px solid rgba(225,189,114,.11);background:#070707}.sports-approval-copy h4{margin:0 0 10px}.sports-approval-copy p{margin:0;color:#aaa197;font-size:9px;line-height:1.65;white-space:pre-wrap}.sports-wording-row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-top:1px solid rgba(225,189,114,.07)}.sports-wording-row:first-of-type{border-top:0}.sports-wording-row span{color:#716a61;font-size:7px;text-transform:uppercase;letter-spacing:.08em}.sports-wording-row strong{color:#e1d8ca;font-size:11px;white-space:pre-wrap}.approval-check span b{color:#d6bc82}.approval-check:has(input:checked){border-color:rgba(225,189,114,.35);background:#0d0a06}@media(max-width:650px){.sports-approval-uploads{grid-template-columns:repeat(2,minmax(0,1fr))}.sports-approval-uploads img{height:135px}.sports-wording-row{grid-template-columns:1fr;gap:4px}}

/* V8.8.1.2 sports-ball cumulative multi-upload queue */
.sports-ball-upload-previews{margin-top:12px;border-top:1px solid #292929}
.sports-ball-upload-count{display:flex;justify-content:space-between;gap:12px;padding:12px 0;color:#d8b461;letter-spacing:.03em}
.sports-ball-upload-file{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #292929}
.sports-ball-upload-file span{min-width:0;overflow-wrap:anywhere}
.sports-ball-upload-file button{flex:0 0 auto}
.sports-ball-upload-empty{margin:10px 0;color:#8f8f8f}


/* V8.8.2.3 — customer selection reference (phone/device model).
   Use an in-app listbox instead of the OS-native select popup so Windows /
   Chromium cannot collapse the choices into a blank strip. */
.selection-reference-control{margin-top:14px;position:relative}
.selection-reference-control[hidden]{display:none!important}
.selection-reference-picker{position:relative;z-index:60}
.selection-reference-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
.selection-reference-button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 12px;border:1px solid rgba(225,189,114,.34);border-radius:7px;background:#0b0b0b;color:#8f887e;font:inherit;font-size:10px;text-align:left;cursor:pointer}
.selection-reference-button:hover,.selection-reference-button:focus{border-color:#c99a3d;outline:none;box-shadow:0 0 0 2px rgba(201,154,61,.18)}
.selection-reference-button.has-value{color:#eee5d5}
.selection-reference-chevron{flex:0 0 auto;color:#eee5d5;font-size:17px;line-height:1;transform:translateY(-1px)}
.selection-reference-menu{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:9999;max-height:300px;overflow-y:auto;padding:5px;background:#090909;border:1px solid #a97c2c;border-radius:7px;box-shadow:0 18px 50px rgba(0,0,0,.78)}
.selection-reference-menu[hidden]{display:none!important}
.selection-reference-option{display:block;width:100%;min-height:34px;padding:8px 10px;border:0;border-radius:4px;background:transparent;color:#e7dfd2;font:inherit;font-size:10px;text-align:left;cursor:pointer}
.selection-reference-option:hover,.selection-reference-option:focus{outline:none;background:#20170b;color:#f1cc77}
.selection-reference-option.selected{background:#2a1d09;color:#f1cc77;font-weight:800}

/* V8.8.2.4 — reliable phone picker + House-styled precision controls */
.selection-reference-button{position:relative;z-index:72;pointer-events:auto!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.selection-reference-menu{z-index:10050;pointer-events:auto!important}
.selection-reference-option{pointer-events:auto!important}

.precision-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}
.precision-tools button{
  min-height:38px;padding:8px 10px;border:1px solid rgba(201,154,61,.58);border-radius:5px;
  background:linear-gradient(180deg,#17120b 0%,#0b0b0b 100%);color:#e7dfd2;
  font:inherit;font-size:10px;font-weight:700;letter-spacing:.03em;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);transition:border-color .15s ease,background .15s ease,color .15s ease,transform .08s ease;
}
.precision-tools button:hover,.precision-tools button:focus-visible{outline:none;border-color:#e0ad47;background:#211707;color:#f1cc77}
.precision-tools button:active{transform:translateY(1px)}
.aspect-lock,.safe-toggle{display:flex;align-items:center;gap:7px;color:#d8d0c3;font-size:10px;line-height:1.3;margin-top:7px}
.aspect-lock input,.safe-toggle input{width:15px;height:15px;accent-color:#c99a3d}
.precision-help{margin-top:7px;color:#8f887e;font-size:9px;line-height:1.45}


/* V8.8.2.5 — browser-native phone-model disclosure.
   Opening the picker no longer depends on JavaScript event handlers. */
.selection-reference-picker{position:relative;z-index:80;overflow:visible}
.selection-reference-details{position:relative;width:100%;overflow:visible}
.selection-reference-details>summary{list-style:none}
.selection-reference-details>summary::-webkit-details-marker{display:none}
.selection-reference-summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;
  padding:0 12px;border:1px solid rgba(225,189,114,.52);border-radius:7px;background:#0b0b0b;
  color:#8f887e;font:inherit;font-size:10px;text-align:left;cursor:pointer;user-select:none;
  box-sizing:border-box;position:relative;z-index:82;
}
.selection-reference-summary:hover,.selection-reference-summary:focus-visible{
  border-color:#d7a841;outline:none;box-shadow:0 0 0 2px rgba(201,154,61,.18)
}
.selection-reference-details[open]>.selection-reference-summary{border-color:#d7a841;border-radius:7px 7px 0 0}
#selectionReferenceValue.has-value{color:#eee5d5}
.selection-reference-chevron::before{content:"⌄";display:block;color:#eee5d5;font-size:17px;line-height:1;transition:transform .15s ease}
.selection-reference-details[open] .selection-reference-chevron::before{transform:rotate(180deg)}
.selection-reference-details>.selection-reference-menu{
  display:none!important;position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:10080;
  max-height:310px;overflow-y:auto;padding:5px;background:#090909;border:1px solid #a97c2c;
  border-radius:0 0 7px 7px;box-shadow:0 18px 50px rgba(0,0,0,.78)
}
.selection-reference-details[open]>.selection-reference-menu{display:block!important}
.selection-reference-radio-option{
  display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:8px 10px;border-radius:4px;
  color:#e7dfd2;font:inherit;font-size:10px;cursor:pointer;box-sizing:border-box
}
.selection-reference-radio-option:hover,.selection-reference-radio-option:focus-within{background:#20170b;color:#f1cc77}
.selection-reference-radio-option.selected{background:#2a1d09;color:#f1cc77;font-weight:800}
.selection-reference-radio-option input{width:14px;height:14px;margin:0;accent-color:#c99a3d;flex:0 0 auto}
.selection-reference-radio-option span{min-width:0;overflow-wrap:anywhere}
/* Keep precision controls on-brand across desktop and mobile. */
.precision-tools button{appearance:none;-webkit-appearance:none;background:linear-gradient(180deg,#17120b,#0b0b0b)!important;color:#e7dfd2!important;border:1px solid rgba(201,154,61,.62)!important;border-radius:5px!important}

/* V8.8.3 — employee-finished product customer UI + device previews */
.customer-message-wrap{margin:0 0 10px}.customer-message-wrap label{display:block}.customer-message-wrap strong{display:block;margin:0 0 7px;color:#e6c77f;font-size:10px;letter-spacing:.06em}.customer-message-wrap textarea{width:100%;min-height:104px;resize:vertical;background:#090909;border:1px solid #9a6d18;border-radius:5px;color:#eee5d5;padding:11px;font:inherit;line-height:1.45;box-sizing:border-box}.customer-message-wrap textarea:focus{outline:none;border-color:#e0ad38;box-shadow:0 0 0 2px rgba(224,173,56,.14)}.customer-message-wrap label>span{display:block;text-align:right;margin-top:4px;color:#8f877c;font-size:9px}
.device-preview-panel{padding:0 0 20px;margin:0 0 18px;border-bottom:1px solid rgba(214,169,67,.18)}.device-preview-heading{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.device-preview-heading span{font-size:10px;font-weight:900;letter-spacing:.18em;color:#d9aa3d}.device-preview-heading strong{font-size:13px;color:#eee5d5}.device-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.device-preview-card{min-height:108px;padding:8px;background:#090909;border:1px solid rgba(214,169,67,.22);border-radius:5px;text-align:center;overflow:hidden}.device-preview-card.primary{border-color:#d9aa3d;box-shadow:0 0 0 1px rgba(217,170,61,.2)}.device-preview-card img{display:block;width:100%;height:92px;object-fit:contain;margin:0 auto 5px}.device-preview-card span{display:block;color:#b9b0a2;font-size:9px}.device-preview-empty{height:92px;display:grid;place-items:center;color:#655f55;font-size:9px;border:1px dashed rgba(255,255,255,.06);margin-bottom:5px}
@media(max-width:980px){.device-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.device-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ================================================================
   V8.8.4 — TRUE PHONE TEMPLATE MASKS
   ================================================================ */
.print-zone.phone-template-zone{
  border-color:transparent;
  background:transparent;
  overflow:hidden;
  box-shadow:none;
}
.print-zone.phone-template-zone .back-label{display:none;}
.print-zone.phone-template-zone::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:rgba(241,204,119,.08);
  -webkit-mask-image:var(--phone-template-mask);
  mask-image:var(--phone-template-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
.print-zone.phone-template-zone #designCanvas{
  z-index:1;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

/* ================================================================
   V8.8.4.2 — TRUE PHONE TEMPLATE SURFACE HOTFIX
   The commercial device template becomes the actual Graphic Lab canvas.
   ================================================================ */
.mock-product.true-phone-template{
  /* V8.8.4.6: preserve the exact commercial template aspect ratio.
     Previously max-height compressed only the image layer while the design
     zone/guide stayed wider, making the white guide appear outside the case. */
  height:min(560px,70vh) !important;
  width:auto !important;
  max-width:none !important;
  max-height:none !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:hidden !important;
  box-shadow:none !important;
  filter:drop-shadow(0 22px 32px rgba(0,0,0,.55)) !important;
}
@media(max-width:680px){
  .mock-product.true-phone-template{
    width:72vw !important;
    height:auto !important;
  }
}
.mock-product.true-phone-template .product-mockup-image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.mock-product.true-phone-template .print-zone{
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  box-shadow:none !important;
}
.mock-product.true-phone-template .print-zone::before{
  background:rgba(241,204,119,.06);
}

/* V8.8.4.3 — customer-facing artwork crop/resize controls */
.artwork-transform-tools{border:1px solid #3a3020;border-radius:8px;padding:10px;background:#0b0a08;margin-top:4px}.artwork-transform-title{font-size:8px;font-weight:900;letter-spacing:1.5px;color:var(--gold2);margin-bottom:8px}.artwork-transform-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.artwork-transform-buttons button{background:#15130f;border:1px solid #4c3c20;color:#ddd;border-radius:5px;padding:7px 4px;font-size:8px;font-weight:800;text-transform:uppercase}.artwork-transform-buttons button:hover{border-color:var(--gold2);color:var(--gold2)}.inspector-aspect-lock{display:flex!important;align-items:center;gap:7px;margin-top:9px;color:#bbb!important;font-size:9px!important}.inspector-aspect-lock input{width:auto!important}.artwork-transform-tools small{display:block;margin-top:7px;line-height:1.45;color:#777}.true-phone-template .design-element.selected{border:1px solid var(--gold2)}.true-phone-template .design-element.selected .handle{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--gold2)}.true-phone-template .design-element.selected .handle.br{right:-7px;bottom:-7px}.true-phone-template .design-element.selected .handle.tr{right:-7px;top:-7px}

/* ================================================================
   V8.8.4.4 — MASK PERIMETER / ZERO-OVERHANG EDITOR GUIDE
   White perimeter is editor-only. It is NOT part of artwork, proof, or print.
   ================================================================ */
.print-zone.phone-template-zone::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  background-image:var(--phone-template-guide);
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  opacity:.88;
}
.print-zone.phone-template-zone #designCanvas{
  overflow:hidden;
  isolation:isolate;
}

/* ================================================================
   V8.8.4.6 — EXACT TEMPLATE SILHOUETTE ALIGNMENT
   The master template, mask, design canvas, and editor guide share the
   exact same coordinate box and aspect ratio. Free movement remains.
   ================================================================ */
.mock-product.true-phone-template .product-mockup-image,
.mock-product.true-phone-template .print-zone,
.mock-product.true-phone-template .print-zone::after,
.mock-product.true-phone-template #designCanvas{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
.mock-product.true-phone-template .product-mockup-image{object-fit:fill !important;}


/* ================================================================
   V8.8.5 — LIVE REALISTIC PHONE / CASE PREVIEW
   Uses the exact V8.8.4.6 template silhouette and live design transforms.
   Editor guides are intentionally excluded from this preview.
   ================================================================ */
.device-preview-panel{padding-bottom:18px}
.device-preview-heading span::after{content:" / REALISTIC";color:#7f735f}
#devicePreviewGrid{display:block}
.realistic-preview-wrap{display:block}
.realistic-preview-copy{font-size:9px;line-height:1.55;color:#8e877b;margin:-4px 0 11px}
.realistic-preview-pair{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:10px;align-items:start}
.realistic-device-card{min-width:0}
.realistic-device-label{display:flex;align-items:center;justify-content:space-between;margin:0 0 7px;color:#9e9588;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.realistic-device-label b{font-size:8px;color:#e0b957;letter-spacing:.14em}
.realistic-phone-back{position:relative;width:100%;aspect-ratio:983/1442;margin:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.48));isolation:isolate}
.realistic-device-shell{position:absolute;inset:-1.8%;border-radius:14%/9%;background:linear-gradient(110deg,#111,#383838 16%,#0b0b0b 41%,#292929 72%,#080808);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 12px rgba(255,255,255,.08);z-index:0}
.realistic-case-surface{position:absolute;inset:0;overflow:hidden;background-position:center;background-repeat:no-repeat;background-size:100% 100%;-webkit-mask-image:var(--realistic-mask);mask-image:var(--realistic-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;z-index:1}
.realistic-art-layer{position:absolute;inset:0;overflow:visible;z-index:2;pointer-events:none}
.realistic-art{position:absolute;transform-origin:center center;overflow:visible;z-index:2}
.realistic-art img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.realistic-text{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;overflow:visible;font-weight:700}
.realistic-case-highlight{position:absolute;inset:0;pointer-events:none;z-index:4;-webkit-mask-image:var(--realistic-mask);mask-image:var(--realistic-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;background:linear-gradient(100deg,rgba(255,255,255,.2),transparent 11%,transparent 78%,rgba(255,255,255,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.realistic-camera-island{position:absolute;left:8%;top:6.3%;width:49%;aspect-ratio:1.02;border-radius:25%;background:linear-gradient(145deg,#dad4ca,#8f8b86 34%,#c7c2b9 65%,#777);box-shadow:0 4px 11px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.55);z-index:6}
.realistic-camera-island i{position:absolute;width:35%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 46% 45%,#1f3850 0 8%,#05090d 10% 33%,#303030 35% 48%,#050505 50% 62%,#8c8c8c 64% 69%,#161616 71%);box-shadow:0 1px 4px rgba(0,0,0,.7)}
.realistic-camera-island i:nth-child(1){left:8%;top:8%}.realistic-camera-island i:nth-child(2){right:8%;top:29%}.realistic-camera-island i:nth-child(3){left:10%;bottom:8%}
.realistic-camera-island em{position:absolute;right:14%;top:10%;width:12%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,#eadab4 25% 58%,#b8a276 65%);box-shadow:0 0 4px rgba(255,247,216,.8)}
.realistic-camera-island b{position:absolute;right:12%;bottom:13%;width:10%;aspect-ratio:1;border-radius:50%;background:#171717;box-shadow:inset 0 0 0 2px #444}
.realistic-phone-front{position:relative;width:91%;aspect-ratio:9/19.5;margin:4% auto 0;border-radius:14%/7%;background:linear-gradient(120deg,#333,#060606 18%,#1e1e1e 58%,#050505);padding:3%;box-sizing:border-box;box-shadow:0 12px 20px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.2)}
.realistic-front-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:11%/5.5%;background:radial-gradient(circle at 74% 21%,#7a583f 0 5%,#25190f 18%,#050505 48%),linear-gradient(145deg,#4e2414,#060606 62%);box-shadow:inset 0 0 26px rgba(255,145,78,.16)}
.realistic-front-screen i{position:absolute;left:36%;top:2%;width:28%;height:4.3%;border-radius:999px;background:#020202;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.realistic-front-glow{position:absolute;inset:0;background:linear-gradient(125deg,transparent 15%,rgba(218,133,74,.32) 16% 17%,transparent 18% 45%,rgba(255,174,95,.21) 46% 47%,transparent 48%);transform:scale(1.2) rotate(-4deg)}
.realistic-preview-wait{padding:18px 10px;border:1px dashed rgba(214,169,67,.2);color:#756e63;font-size:9px;text-align:center}
.device-preview-subheading{margin:14px 0 8px;color:#c79a3d;font-size:8px;font-weight:900;letter-spacing:.16em}
.device-preview-static-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.device-preview-static-grid .device-preview-card{min-height:94px;padding:6px}
.device-preview-static-grid .device-preview-card img,.device-preview-static-grid .device-preview-empty{height:76px}
@media(max-width:1100px){.realistic-preview-pair{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.realistic-preview-pair{grid-template-columns:1.15fr .85fr}.device-preview-static-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* V8.8.5.1 — admin-managed realistic phone preview */
.realistic-admin-back-base,.realistic-hardware-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.realistic-admin-back-base{z-index:1}
.realistic-phone-back.admin-device-image .realistic-case-surface{z-index:2;background:transparent}
.realistic-hardware-overlay{z-index:6}
.realistic-phone-back.admin-device-image .realistic-case-highlight{z-index:7}
.realistic-admin-front{position:relative;width:91%;aspect-ratio:983/1442;margin:4% auto 0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 12px 20px rgba(0,0,0,.5))}
.realistic-admin-front img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}

/* ================================================================
   V8.8.5.5 — TEMPORARY iPHONE 17 PRO LIVE PREVIEW CERTIFICATION
   User-supplied 1024x2048 device render is hard-coded for this model.
   The white printable panel has been opened to transparency; artwork
   sits below the physical phone shell and is clipped to that opening.
   ================================================================ */
.realistic-phone-back.x17-hardcoded-preview{
  aspect-ratio:1/2;
  width:100%;
}
.realistic-phone-back.x17-hardcoded-preview .realistic-device-shell{
  display:none;
}
.realistic-phone-back.x17-hardcoded-preview .realistic-admin-back-base{
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:4;
}
.realistic-phone-back.x17-hardcoded-preview .realistic-case-surface{
  left:var(--preview-x);
  top:var(--preview-y);
  width:var(--preview-w);
  height:var(--preview-h);
  right:auto;
  bottom:auto;
  z-index:2;
  background:transparent !important;
  -webkit-mask-image:var(--realistic-mask);
  mask-image:var(--realistic-mask);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.realistic-phone-back.x17-hardcoded-preview .realistic-case-highlight{
  display:none;
}


/* V9.0.0 — explicit non-proportional artwork stretch controls. */
.design-element .stretch-handle{display:none;position:absolute;z-index:8;background:#fff;border:2px solid var(--gold2);box-sizing:border-box;touch-action:none}
.design-element.selected .stretch-handle{display:block}
.design-element .stretch-left,.design-element .stretch-right{width:9px;height:28px;top:50%;transform:translateY(-50%);cursor:ew-resize;border-radius:5px}
.design-element .stretch-left{left:-7px}.design-element .stretch-right{right:-7px}
.design-element .stretch-top,.design-element .stretch-bottom{width:28px;height:9px;left:50%;transform:translateX(-50%);cursor:ns-resize;border-radius:5px}
.design-element .stretch-top{top:-7px}.design-element .stretch-bottom{bottom:-7px}
.artwork-resize-mode{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.artwork-resize-mode .inspector-aspect-lock{margin-top:0}
.stretch-mode-btn{background:#15130f;border:1px solid #4c3c20;color:#ddd;border-radius:5px;padding:7px 9px;font-size:8px;font-weight:900;text-transform:uppercase}
.stretch-mode-btn:hover,.stretch-mode-btn.active{border-color:var(--gold2);color:var(--gold2);box-shadow:0 0 0 1px rgba(229,193,111,.12)}


/* ================================================================
   V9.0.1 — SAMSUNG GALAXY S25 ULTRA CALIBRATED LIVE PREVIEW
   Uses the user-supplied 998x2048 straight-on phone shell. The exact
   supplied case mask is mapped to the white printable opening at
   x=32, y=24, w=943, h=1999. The V8.8.6.8/V9.0.0 engine is unchanged.
   ================================================================ */
.realistic-phone-back.s25-ultra-hardcoded-preview{
  aspect-ratio:998/2048;
  width:100%;
}
.realistic-phone-back.s25-ultra-hardcoded-preview .realistic-device-shell{display:none;}
.realistic-phone-back.s25-ultra-hardcoded-preview .realistic-admin-back-base{
  inset:0;width:100%;height:100%;object-fit:contain;z-index:4;
}
.realistic-phone-back.s25-ultra-hardcoded-preview .realistic-case-surface{
  left:var(--preview-x);top:var(--preview-y);width:var(--preview-w);height:var(--preview-h);
  right:auto;bottom:auto;z-index:2;background:transparent !important;
  -webkit-mask-image:var(--realistic-mask);mask-image:var(--realistic-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.realistic-phone-back.s25-ultra-hardcoded-preview .realistic-case-highlight{display:none;}


/* ================================================================
   V9.0.3 — HOG-0002 / GALAXY S25 ULTRA LIVE PREVIEW REFINEMENT
   Preserve the supplied case shell at its native 998x2048 ratio,
   enlarge the back-case card, and place realistic phone camera
   hardware behind the transparent camera opening in the supplied PNG.
   The production mask/editor geometry is unchanged.
   ================================================================ */
@supports selector(:has(*)){
  .realistic-preview-pair:has(.s25-ultra-hardcoded-preview){
    grid-template-columns:minmax(0,1.55fr) minmax(0,.45fr);
    gap:7px;
  }
}
.realistic-phone-back.s25-ultra-hardcoded-preview{
  width:100%;
  max-width:190px;
  margin:0 auto;
  aspect-ratio:998/2048;
}
.realistic-phone-back.s25-ultra-hardcoded-preview .realistic-admin-back-base{
  object-fit:contain;
  z-index:5;
}
.realistic-phone-back.s25-ultra-hardcoded-preview .realistic-case-surface{z-index:3;}
.realistic-phone-back.s25-ultra-hardcoded-preview .s25-camera-hardware{
  display:block;
  position:absolute;
  left:6.8%;
  top:4.0%;
  width:42.5%;
  height:33.8%;
  z-index:2;
  pointer-events:none;
  border-radius:24% 24% 31% 31% / 18% 18% 20% 20%;
  background:linear-gradient(145deg,#181818,#050505 52%,#151515);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 3px 9px rgba(0,0,0,.55);
}
.realistic-phone-back.s25-ultra-hardcoded-preview .s25-camera-hardware i{
  position:absolute;
  width:31%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 43% 40%,#304b65 0 8%,#071018 10% 28%,#020304 31% 48%,#343434 50% 59%,#090909 61% 72%,#777 74% 78%,#171717 80%);
  box-shadow:0 2px 5px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.16);
}
.realistic-phone-back.s25-ultra-hardcoded-preview .s25-camera-hardware i:nth-child(1){left:10%;top:7%;}
.realistic-phone-back.s25-ultra-hardcoded-preview .s25-camera-hardware i:nth-child(2){left:10%;top:35%;}
.realistic-phone-back.s25-ultra-hardcoded-preview .s25-camera-hardware i:nth-child(3){left:10%;top:63%;}
.realistic-phone-back.s25-ultra-hardcoded-preview .s25-camera-hardware em{
  position:absolute;right:18%;top:23%;width:12%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff7cf 0 24%,#e9d49a 27% 55%,#776b4e 60%);
  box-shadow:0 0 4px rgba(255,244,190,.5);
}
.realistic-phone-back.s25-ultra-hardcoded-preview .s25-camera-hardware b{
  position:absolute;right:18%;top:48%;width:10%;aspect-ratio:1;border-radius:50%;
  background:#111;box-shadow:inset 0 0 0 1px #555;
}
@media(max-width:680px){
  .realistic-phone-back.s25-ultra-hardcoded-preview{max-width:170px;}
}

/* ================================================================
   V9.0.4 — HOG-0002 / S25 ULTRA PREVIEW SCALE + CAMERA RESTORE
   Match the visual footprint of the certified iPhone preview while
   preserving the Samsung source shell at its exact 998x2048 ratio.
   Camera hardware is rendered behind the transparent camera opening.
   ================================================================ */
.realistic-preview-pair.s25-preview-pair{
  grid-template-columns:126px 92px !important;
  gap:9px !important;
  justify-content:center;
  align-items:start;
}
.realistic-preview-pair.s25-preview-pair .realistic-back-card,
.realistic-preview-pair.s25-preview-pair .realistic-front-card{
  width:100%;
  min-width:0;
}
.realistic-preview-pair.s25-preview-pair .realistic-phone-back.s25-ultra-hardcoded-preview{
  width:126px !important;
  max-width:none !important;
  aspect-ratio:998/2048 !important;
  margin:0 auto;
}
.realistic-phone-back.s25-ultra-hardcoded-preview .s25-camera-hardware{display:none !important;}
.realistic-phone-back.s25-ultra-hardcoded-preview .s25-camera-hardware-img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
}
.realistic-phone-back.s25-ultra-hardcoded-preview .realistic-case-surface{z-index:3;}
.realistic-phone-back.s25-ultra-hardcoded-preview .realistic-admin-back-base{z-index:5;}
.realistic-preview-pair.s25-preview-pair .realistic-admin-front,
.realistic-preview-pair.s25-preview-pair .realistic-phone-front{
  width:88%;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:680px){
  .realistic-preview-pair.s25-preview-pair{
    grid-template-columns:116px 84px !important;
    gap:7px !important;
  }
  .realistic-preview-pair.s25-preview-pair .realistic-phone-back.s25-ultra-hardcoded-preview{
    width:116px !important;
  }
}

/* V9.0.8 — brand-separated phone model selectors. */
.selection-reference-brand-pickers{display:grid;gap:10px}
.phone-brand-picker{display:grid;gap:5px}
.phone-brand-label{font-size:9px;line-height:1.2;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#c99a3d}
.phone-brand-picker .selection-reference-details{width:100%}
.phone-brand-picker .selection-reference-summary{min-height:44px}
.phone-brand-picker .selection-reference-summary.has-value{color:#eee5d5;border-color:rgba(225,189,114,.52)}
.phone-brand-picker.is-empty .selection-reference-summary{color:#676158;border-color:rgba(225,189,114,.15);cursor:default}
.phone-brand-picker.is-empty .selection-reference-menu{min-height:44px}
.selection-reference-empty{padding:12px 10px;color:#777067;font-size:10px;line-height:1.4}

/* V9.0.13 — metadata-driven Graphic Lab modules */
.generic-selection-picker{display:grid;gap:8px}.sports-ball-module-wrap{margin-top:16px}.sports-ball-module-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sports-ball-module-fields label{display:grid;gap:4px;font-size:10px;color:#a89f91}.sports-ball-module-fields input,.sports-ball-module-fields select,.sports-ball-module-fields textarea{width:100%;box-sizing:border-box}.sports-ball-module-fields .wide{grid-column:1/-1}.sports-ball-module-fields textarea{min-height:74px;resize:vertical}
@media(max-width:700px){.sports-ball-module-fields{grid-template-columns:1fr}.sports-ball-module-fields .wide{grid-column:auto}}

/* V9.0.15 policy acknowledgement */
.policy-check{display:flex;gap:10px;align-items:flex-start;line-height:1.45;text-transform:none;letter-spacing:0}.policy-check input{width:18px;height:18px;min-width:18px;margin-top:2px;accent-color:#d7b562}.policy-check a{color:#d7b562;text-decoration:underline}.policy-acknowledgement{border-color:rgba(215,181,98,.32)!important}