@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root{--bg:#020105;--purple:#a92cff;--bright:#d85cff;--deep:#260047;--line:#8d25c5;--text:#fff;--muted:#bcb1c4}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Nunito,Arial,sans-serif;overflow-x:hidden}

/* =========================================================
   ELI-FY CUSTOM BACKGROUND
   User-supplied background image.
   =========================================================
   Easy to replace later:
   1. Put your new image in assets/images/
   2. Change only the filename below.
   ========================================================= */
body{
  background-image:url("images/elify-background.png");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

.page-shell{width:min(1160px,92vw);margin-inline:auto}
.site-header{position:relative;z-index:20;padding-top:28px}
.navbar{min-height:66px;border:1px solid #9c32db;border-radius:40px;background:#07030de8;backdrop-filter:blur(16px);box-shadow:0 0 35px #9b2be833;display:flex;align-items:center;padding:0 24px}
.brand{width:125px;display:block;flex:none}.brand img{width:100%;display:block;filter:drop-shadow(0 0 8px #a52cff)}
.nav{display:flex;align-items:center;justify-content:center;gap:30px;flex:1}
.nav a{color:#fff;text-decoration:none;font-size:14px;font-weight:700;height:66px;display:flex;align-items:center;gap:7px;position:relative;white-space:nowrap}
.nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:9px;height:4px;border-radius:5px;background:#d14cff;box-shadow:0 0 12px #c33cff}
.nav a:hover{color:#d66aff}.nav-actions{display:flex;gap:15px;align-items:center}.icon-btn{color:#fff;text-decoration:none;font-size:25px;position:relative}.badge{position:absolute;right:-10px;top:-9px;width:20px;height:20px;border-radius:50%;background:#a62bff;font-size:10px;display:grid;place-items:center}.menu{display:none;background:none;border:0;color:#fff;font-size:25px}

.hero{text-align:center;padding-top:35px;min-height:680px;display:flex;flex-direction:column;align-items:center}
.hero-art{display:flex;flex-direction:column;align-items:center;gap:0}
.hero-mascot{width:min(310px,48vw);height:280px;object-fit:contain;filter:drop-shadow(0 0 25px #a52cff);margin-bottom:-10px}
.hero-logo{width:min(520px,82vw);height:190px;object-fit:contain;filter:drop-shadow(0 0 18px #a52cff);margin-top:-5px}
.tagline{margin-top:-3px;border:1px solid #9225c7;border-radius:32px;background:#07030de8;padding:10px 36px;font-size:21px;font-weight:800;box-shadow:0 0 18px #9b2be822}.tagline span{color:#d759ff}
.hero-buttons{margin-top:24px}.btn{display:inline-flex;align-items:center;justify-content:center;min-width:245px;padding:14px 30px;border-radius:32px;border:1px solid #bd40f0;text-decoration:none;color:#fff;font-weight:800;transition:transform .22s,box-shadow .22s,background .22s}.btn.secondary{background:#08030d}.btn:hover{transform:translateY(-4px);box-shadow:0 0 28px #a52cff66;background:#15051d}

.section{text-align:center;padding:10px 0 0}.section-title{font-size:30px;margin:0 0 20px;font-weight:900}.section-title i{font-style:normal;color:#d65cff;margin:0 10px}
.category-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:stretch}
.category-card{height:112px;border:1px solid #7920b2;border-radius:17px;background:#08030de8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#fff;box-shadow:0 0 20px #8f20ff18;transition:.25s}.category-card:hover{transform:translateY(-6px);border-color:#d253ff;box-shadow:0 0 25px #a52cff55}.cat-icon{font-size:32px;filter:drop-shadow(0 0 7px #bd38ff)}.category-card>span:last-child{font-size:13px;font-weight:800}
.motto{text-align:center;padding:34px 0 72px}.paw-line{display:flex;align-items:center;gap:16px;justify-content:center}.paw-line span{height:2px;width:210px;background:linear-gradient(90deg,transparent,#d64eff)}.paw-line span:last-child{background:linear-gradient(90deg,#d64eff,transparent)}.paw-line b{font-size:25px;color:#d65cff}.motto p{font-size:12px;letter-spacing:6px;font-weight:800;margin:18px 0;color:#eee}.motto em{color:#d65cff;font-style:normal}.scroll{display:none}.scroll strong{color:#d65cff;font-size:23px}
.site-footer{border-top:1px solid #30113d;text-align:center;padding:28px 20px;color:#9d91a6;background:#020104}.site-footer img{width:100px;filter:drop-shadow(0 0 7px #a52cff)}.site-footer p{margin:8px 0}.site-footer small{color:#665d6a}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:none}
body.leaving main,body.leaving footer{opacity:.3;transition:opacity .28s}

@media(max-width:900px){.nav{gap:15px}.category-grid{grid-template-columns:repeat(4,1fr)}.hero{min-height:700px}}
@media(max-width:650px){
.site-header{padding-top:14px}.navbar{padding:0 16px}.brand{width:105px}.menu{display:block;margin-left:auto}.nav{display:none;position:absolute;top:78px;left:4vw;right:4vw;padding:12px 18px;flex-direction:column;gap:0;background:#08030ef5;border:1px solid #8d25c5;border-radius:18px}.nav.open{display:flex}.nav a{height:48px;width:100%;justify-content:center}.nav a.active:after{bottom:3px}.nav-actions{margin-left:14px}.icon-btn:first-child{display:grid}
.hero{padding-top:25px;min-height:720px}.hero-mascot{width:270px;height:235px}.hero-logo{height:155px}.tagline{font-size:16px;padding:9px 20px}.category-grid{grid-template-columns:repeat(2,1fr);gap:10px}.category-card{height:105px}.section-title{font-size:24px}.paw-line span{width:70px}.motto p{letter-spacing:3px;font-size:9px}
}

/* Prompt/custom page polish */
.form-shell,.custom-form{max-width:900px;margin:0 auto}
.form-shell{padding:45px 0 80px}
.form-card{background:rgba(7,2,12,.88);border:1px solid #7d22b2;border-radius:24px;padding:34px;box-shadow:0 0 35px rgba(165,44,255,.16)}
.form-card h1{margin:0 0 8px;text-align:center;font-size:clamp(30px,5vw,48px)}
.form-card .form-intro{text-align:center;color:#bfb2c8;max-width:680px;margin:0 auto 30px;line-height:1.7}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group.full{grid-column:1/-1}
.form-group label{font-weight:800;font-size:14px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 15px;border:1px solid #5f1b86;border-radius:12px;background:#09030e;color:#fff;font:inherit;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#d252ff;box-shadow:0 0 0 3px rgba(210,82,255,.1)}
.form-group textarea{min-height:170px;resize:vertical}
.form-actions{text-align:center;margin-top:24px}
.form-note{text-align:center;color:#8f8197;font-size:12px;margin-top:14px;line-height:1.6}
.page-hero{text-align:center;padding:65px 0 35px}
.page-hero h1{font-size:clamp(34px,5vw,58px);margin:0 0 10px}
.page-hero p{color:#bdb1c5;max-width:650px;margin:auto;line-height:1.7}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:80px}
.product-card{background:rgba(7,2,12,.88);border:1px solid #65209a;border-radius:20px;overflow:hidden;transition:.25s}
.product-card:hover{transform:translateY(-5px);border-color:#c64cff;box-shadow:0 0 28px rgba(165,44,255,.22)}
.product-image{height:220px;background:linear-gradient(145deg,#13051c,#050107);display:grid;place-items:center;color:#755c80;font-size:12px;letter-spacing:2px}
.product-info{padding:18px}.product-info h3{margin:0 0 6px}.product-info p{color:#9f93a8;font-size:13px;line-height:1.5}.product-price{color:#d55cff;font-weight:900;font-size:18px;margin-top:12px}
@media(max-width:700px){
 .form-card{padding:22px 16px;border-radius:18px}
 .form-grid{grid-template-columns:1fr}
 .form-group.full{grid-column:auto}
 .product-grid{grid-template-columns:1fr}
 .form-shell{padding-top:30px}
}

/* V3 polished shared navigation and page UI */
.site-header{padding-bottom:12px}
.navbar{height:68px}
.nav a,.icon-btn,.brand{transition:color .2s ease,transform .2s ease,opacity .2s ease}
.nav a{border-radius:10px;padding:0 5px}
.nav a:hover{transform:translateY(-1px)}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.025)}
.icon-btn:hover{transform:translateY(-2px);background:rgba(178,45,255,.12);color:#e36aff}
.cart-badge .badge{right:-2px;top:-3px}
.page-content{padding:35px 0 85px}
.panel{background:rgba(7,2,12,.9);border:1px solid #64208d;border-radius:24px;box-shadow:0 0 30px rgba(165,44,255,.12)}
.page-title{text-align:center;padding:48px 0 28px}
.page-title h1{font-size:clamp(34px,5vw,54px);margin:0 0 10px}
.page-title p{color:#aaa0b2;max-width:650px;margin:auto;line-height:1.7}
.shop-shell{padding-bottom:80px}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 22px;padding:13px 16px;background:rgba(7,2,12,.8);border:1px solid #4e176b;border-radius:15px}
.shop-toolbar select{background:#09030e;color:#fff;border:1px solid #63218c;border-radius:9px;padding:9px 12px}
.empty-state{text-align:center;padding:75px 25px}.empty-state .empty-icon{font-size:52px;filter:drop-shadow(0 0 10px #b42cff)}.empty-state h2{margin:14px 0 7px}.empty-state p{color:#a99eaf;max-width:480px;margin:0 auto 22px;line-height:1.6}
.cart-shell{padding:20px 0 85px}
.cart-panel{padding:28px}
.cart-header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px}.cart-header h1{margin:0;font-size:34px}.cart-items{display:flex;flex-direction:column;gap:12px}
.cart-item{display:grid;grid-template-columns:82px 1fr auto auto;align-items:center;gap:16px;padding:14px;border:1px solid #401554;border-radius:15px;background:#08030d}
.cart-thumb{height:68px;border-radius:10px;background:#12051a;display:grid;place-items:center;color:#8f5ba5;font-size:11px}
.cart-item h3{margin:0 0 5px;font-size:15px}.cart-item p{margin:0;color:#918696;font-size:12px}
.qty-control{display:flex;align-items:center;border:1px solid #52206d;border-radius:9px;overflow:hidden}.qty-control button{width:30px;height:30px;border:0;background:#12051a;color:#fff;cursor:pointer}.qty-control span{width:30px;text-align:center;font-size:13px}
.cart-price{font-weight:900;color:#d35aff;min-width:95px;text-align:right}.remove-item{border:0;background:none;color:#8f7b97;cursor:pointer}.remove-item:hover{color:#ff79ff}
.cart-summary{margin-top:22px;margin-left:auto;max-width:360px;padding-top:18px;border-top:1px solid #431653}.summary-row{display:flex;justify-content:space-between;margin:8px 0;color:#bdb2c2}.summary-total{font-size:20px;font-weight:900;color:#fff}.summary-total span:last-child{color:#d45cff}
.action-row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.btn.primary{background:linear-gradient(135deg,#b72cff,#7d12d8);box-shadow:0 0 20px rgba(180,44,255,.25)}
.btn.ghost{background:transparent;border-color:#60217e}
.about-panel,.contact-panel{padding:34px;line-height:1.7;color:#c0b5c6}.about-panel h2,.contact-panel h2{color:#fff;margin-top:0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-card{padding:26px}.contact-card h3{margin-top:0}.contact-card a{color:#d35cff;text-decoration:none}
.category-page{padding-bottom:30px}
@media(max-width:700px){
 .site-header{padding-bottom:5px}.navbar{height:60px}
 .page-title{padding:30px 0 22px}
 .cart-panel{padding:18px}.cart-item{grid-template-columns:60px 1fr auto}.cart-price{grid-column:2;text-align:left}.remove-item{grid-column:3;grid-row:1}
 .contact-grid{grid-template-columns:1fr}.shop-toolbar{align-items:stretch;flex-direction:column}
}

/* ===== ELI-FY V4 CART REFINEMENT ===== */
.cart-page{min-height:100vh}
.cart-page .page-title{padding:42px 0 24px}
.cart-page .page-title h1{margin-bottom:7px}
.cart-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:22px;align-items:start;padding-bottom:65px}
.cart-products,.cart-order{background:rgba(5,2,10,.92);border:1px solid #7024a0;border-radius:22px;box-shadow:0 0 28px rgba(148,35,220,.13);backdrop-filter:blur(12px)}
.cart-products{padding:22px}
.cart-order{padding:25px;position:sticky;top:18px}
.cart-table-head{display:grid;grid-template-columns:minmax(180px,1fr) 100px 125px 105px 28px;gap:15px;padding:0 12px 12px;color:#8f8198;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #35103f}
.cart-line{display:grid;grid-template-columns:minmax(180px,1fr) 100px 125px 105px 28px;gap:15px;align-items:center;padding:18px 12px;border-bottom:1px solid #2b0d35}
.cart-line:last-child{border-bottom:0}
.cart-product{display:flex;align-items:center;gap:14px;min-width:0}
.cart-product-image{width:72px;height:72px;flex:0 0 72px;border:1px solid #7024a0;border-radius:14px;background:radial-gradient(circle at 50% 35%,#24033a,#08030d 70%);display:grid;place-items:center;overflow:hidden}
.cart-product-image img{width:60px;height:60px;object-fit:contain;display:block;filter:drop-shadow(0 0 8px #9d2dff)}
.cart-product-copy{min-width:0}.cart-product-copy h3{margin:0 0 5px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cart-product-copy p{margin:0;color:#95899c;font-size:12px}
.cart-unit{color:#c9bdcf;font-size:14px}.cart-total{font-weight:900;color:#d55cff;font-size:15px}
.cart-qty{display:inline-flex;align-items:center;height:34px;border:1px solid #7123a0;border-radius:10px;overflow:hidden;background:#09030e}
.cart-qty button{width:32px;height:34px;border:0;background:transparent;color:#fff;font-size:17px;cursor:pointer}.cart-qty button:hover{background:#1b0727;color:#dc65ff}.cart-qty span{width:32px;text-align:center;font-size:13px}
.cart-remove{border:0;background:transparent;color:#796b82;font-size:20px;cursor:pointer}.cart-remove:hover{color:#ff70ff}
.cart-continue{display:inline-flex;align-items:center;gap:7px;margin-top:17px;color:#cf54ff;text-decoration:none;font-size:13px;font-weight:800}.cart-continue:hover{color:#fff}
.order-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.order-title h2{margin:0;font-size:21px}.order-title span{color:#d55cff}
.order-row{display:flex;justify-content:space-between;gap:20px;padding:9px 0;color:#b9adbf;font-size:14px}.order-row.total{border-top:1px solid #41134f;margin-top:10px;padding-top:17px;color:#fff;font-size:21px;font-weight:900}.order-row.total span:last-child{color:#d55cff}
.checkout-btn{width:100%;margin-top:20px;min-width:0!important}
.checkout-note{text-align:center;color:#766a7d;font-size:11px;line-height:1.6;margin:12px 0 0}
.cart-benefits{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:0}
.cart-benefit{border:1px solid #4a175f;border-radius:15px;background:rgba(7,2,12,.72);padding:16px;text-align:center}.cart-benefit strong{display:block;margin-bottom:4px}.cart-benefit span{font-size:11px;color:#8e8295}
.cart-empty{padding:70px 20px;text-align:center}.cart-empty .empty-icon{font-size:45px;color:#d35cff;filter:drop-shadow(0 0 12px #a52cff)}.cart-empty h2{margin:12px 0 7px}.cart-empty p{color:#918696;margin:0 auto 20px;max-width:420px}
@media(max-width:900px){
 .cart-layout{grid-template-columns:1fr}.cart-order{position:static}.cart-benefits{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
 .cart-page .page-title{padding:28px 0 20px}
 .cart-products{padding:13px}.cart-table-head{display:none}
 .cart-line{grid-template-columns:1fr auto;gap:10px;padding:15px 7px}.cart-unit{display:none}.cart-qty{grid-column:2;grid-row:1}.cart-total{grid-column:1;grid-row:2}.cart-remove{grid-column:2;grid-row:2}.cart-product-image{width:58px;height:58px;flex-basis:58px}.cart-product-image img{width:48px;height:48px}
 .cart-benefits{grid-template-columns:1fr}.cart-order{padding:20px}
}

/* =========================================================
   FINAL KEY RING DESIGNER — IMAGE-ONLY LIVE PREVIEW
   ========================================================= */
.preview-stage{padding:22px!important;min-height:470px!important;background:#05020a!important}
.keyring-preview{width:100%!important;height:100%!important;min-height:410px!important;border:1px dashed #a52cff!important;border-radius:18px!important;background:rgba(3,1,7,.42)!important;box-shadow:none!important}
.keyring-preview:before{display:none!important}
.keyring-preview img{max-width:92%!important;max-height:92%!important;width:auto!important;height:auto!important;object-fit:contain!important;filter:none!important}
.preview-text{display:none!important}

/* =========================================================
   FINAL SHARED HEADER + CONTACT PAGE FIX
   ========================================================= */

/* Some older pages use .logo instead of .brand. Keep both consistent. */
.site-header .logo{width:125px;display:block;flex:0 0 125px;text-decoration:none}
.site-header .logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 8px #a52cff)}
@media(max-width:650px){
  .site-header .logo{width:105px;flex-basis:105px}
}

/* Contact page */
.contact-page{padding-bottom:75px}
.contact-page .page-title{padding-top:58px;padding-bottom:28px}
.contact-page .page-title h1{font-size:clamp(38px,5vw,56px)}
.contact-panel{max-width:900px;margin:0 auto;padding:32px}
.contact-form{width:100%}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-fields label{display:flex;flex-direction:column;gap:8px}
.contact-fields label.full{grid-column:1/-1}
.contact-fields label>span{font-size:13px;font-weight:900;color:#fff}
.contact-fields label b{color:#d35cff}
.contact-fields input,.contact-fields textarea{
  width:100%;border:1px solid #5e1b82;border-radius:13px;
  background:#08030d;color:#fff;padding:14px 15px;
  font:inherit;outline:none;transition:.2s
}
.contact-fields input::placeholder,.contact-fields textarea::placeholder{color:#706579}
.contact-fields input:focus,.contact-fields textarea:focus{
  border-color:#d252ff;box-shadow:0 0 0 3px rgba(210,82,255,.1),0 0 18px rgba(165,44,255,.08)
}
.contact-fields textarea{min-height:190px;resize:vertical}
.contact-actions{text-align:center;padding-top:23px}
.contact-actions .btn{min-width:220px}
.contact-actions p{margin:11px 0 0;color:#81758b;font-size:11px}
@media(max-width:700px){
  .contact-page .page-title{padding-top:34px}
  .contact-panel{padding:20px 16px}
  .contact-fields{grid-template-columns:1fr}
  .contact-fields label.full{grid-column:auto}
}


/* ===== LAUNCH POLISH ===== */
.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:10px}.footer-links a{color:#9f91a8;text-decoration:none;font-size:11px}.footer-links a:hover{color:#d45cff}
.policy-panel{max-width:850px;margin:0 auto 70px;padding:32px;background:rgba(7,2,12,.92);border:1px solid #64208d;border-radius:22px;line-height:1.75;color:#c3b8c8;box-shadow:0 0 30px rgba(165,44,255,.10)}.policy-panel h2{color:#fff;margin:24px 0 8px}.policy-panel h2:first-child{margin-top:0}.policy-panel p{margin:8px 0}.payment-methods{display:grid;gap:10px;margin:16px 0}.payment-method{padding:13px 15px;border:1px solid #4e1969;border-radius:12px;background:#09030e}.payment-method strong{color:#fff}.payment-method span{display:block;color:#9d91a3;font-size:12px;margin-top:3px}


/* =========================================================
   ELI-FY UNIVERSAL NEON FORM SYSTEM
   Applies the same branded UI to every existing form/control.
   ========================================================= */

:root{
  --form-bg:#08030e;
  --form-bg-2:#100519;
  --form-line:#632080;
  --form-line-bright:#c74fff;
  --form-purple:#d35cff;
  --form-muted:#8f8295;
  --form-glow:rgba(180,44,255,.18);
}

form,
.designer-card,
.preview-card,
.hero-card,
.form-card,
.contact-panel{
  color:#fff;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
form select,
form textarea,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select,
.field textarea,
.contact-fields input,
.contact-fields textarea{
  width:100%;
  min-height:48px;
  box-sizing:border-box;
  padding:13px 15px;
  border:1px solid var(--form-line);
  border-radius:13px;
  background:linear-gradient(145deg,var(--form-bg-2),var(--form-bg));
  color:#fff;
  font:inherit;
  font-size:13px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
  color-scheme:dark;
}

form input::placeholder,
form textarea::placeholder,
.contact-fields input::placeholder,
.contact-fields textarea::placeholder{
  color:#76697d;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
form select:hover,
form textarea:hover,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.field select:hover,
.field textarea:hover{
  border-color:#8e32b7;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
form select:focus,
form textarea:focus,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.field select:focus,
.field textarea:focus,
.contact-fields input:focus,
.contact-fields textarea:focus{
  border-color:var(--form-line-bright);
  box-shadow:0 0 0 3px rgba(199,79,255,.10),0 0 24px var(--form-glow);
  background:linear-gradient(145deg,#12061a,#09030e);
}

form select,
.field select{
  cursor:pointer;
  appearance:none;
  padding-right:44px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--form-purple) 50%),
    linear-gradient(135deg,var(--form-purple) 50%,transparent 50%),
    linear-gradient(145deg,var(--form-bg-2),var(--form-bg));
  background-position:
    calc(100% - 19px) 21px,
    calc(100% - 13px) 21px,
    0 0;
  background-size:6px 6px,6px 6px,100% 100%;
  background-repeat:no-repeat;
}

form select option,
.field select option{
  background:#0b0410;
  color:#fff;
}

form textarea,
.field textarea,
.contact-fields textarea{
  min-height:120px;
  resize:vertical;
  line-height:1.55;
}

form input[type="number"],
.field input[type="number"]{
  appearance:textfield;
}

form input[type="number"]::-webkit-inner-spin-button,
form input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button,
.field input[type="number"]::-webkit-outer-spin-button{
  appearance:none;
}

/* Labels */
form .field > label,
form .form-group > label,
#ornamentForm .field > label,
#promptForm .field > label,
.contact-fields label > span{
  color:#fff;
  font-weight:900;
  font-size:13px;
  letter-spacing:.1px;
}

form .field > label small,
#ornamentForm .field > label small{
  color:#a78cad;
  font-weight:600;
}

/* Upload controls */
form .upload,
.upload{
  position:relative;
  overflow:hidden;
  min-height:112px;
  padding:22px;
  box-sizing:border-box;
  border:1px dashed #9340b9;
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 0%,rgba(193,61,255,.10),transparent 55%),
    linear-gradient(145deg,#100518,#08030e);
  color:#d35cff;
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease;
}

form .upload:hover,
.upload:hover{
  border-color:#d253ff;
  box-shadow:0 0 22px rgba(165,44,255,.12),inset 0 0 24px rgba(165,44,255,.05);
  background:
    radial-gradient(circle at 50% 0%,rgba(193,61,255,.16),transparent 55%),
    linear-gradient(145deg,#14071d,#09030e);
  transform:translateY(-1px);
}

form .upload input[type="file"],
.upload input[type="file"]{
  display:none;
}

/* Radio + checkbox controls */
form input[type="radio"],
form input[type="checkbox"]{
  accent-color:#c74fff;
}

form .option,
form .type-option,
form .choice{
  border:1px solid #4e1969;
  border-radius:13px;
  padding:13px 14px;
  background:linear-gradient(145deg,#0d0612,#08030d);
  color:#eee;
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease;
}

form .option:hover,
form .type-option:hover,
form .choice:hover{
  border-color:#9635bc;
  transform:translateY(-1px);
}

form .option:has(input:checked),
form .type-option:has(input:checked),
form .choice:has(input:checked){
  border-color:#d253ff;
  background:linear-gradient(145deg,#170821,#0b0310);
  box-shadow:0 0 18px rgba(165,44,255,.12),inset 0 0 18px rgba(165,44,255,.04);
}

/* Universal colour dropdown */
.colour-dropdown{
  position:relative;
  width:100%;
}

.colour-dropdown-btn{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-sizing:border-box;
  padding:13px 15px;
  border:1px solid #632080;
  border-radius:13px;
  background:linear-gradient(145deg,#100518,#08030e);
  color:#fff;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}

.colour-dropdown-btn:hover,
.colour-dropdown.open .colour-dropdown-btn{
  border-color:#c74fff;
  box-shadow:0 0 20px rgba(165,44,255,.12);
  background:linear-gradient(145deg,#14071d,#09030e);
}

.colour-dropdown-btn span{
  color:#d35cff;
  font-size:18px;
  line-height:1;
  transition:transform .2s ease;
}

.colour-dropdown.open .colour-dropdown-btn span{
  transform:rotate(180deg);
}

.colour-menu{
  display:none;
  position:absolute;
  z-index:100;
  top:calc(100% + 7px);
  left:0;
  right:0;
  max-height:280px;
  overflow:auto;
  padding:8px;
  border:1px solid #7627a0;
  border-radius:15px;
  background:rgba(9,3,14,.98);
  box-shadow:0 18px 45px rgba(0,0,0,.65),0 0 25px rgba(165,44,255,.12);
  backdrop-filter:blur(16px);
}

.colour-dropdown.open .colour-menu{
  display:block;
}

.colour-option{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:8px 10px;
  border-radius:9px;
  color:#eee;
  font-size:13px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}

.colour-option:hover{
  background:#190823;
  color:#fff;
}

.colour-option input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 18px;
  accent-color:#c74fff;
}

.colour-option input[type="checkbox"]:checked + span{
  color:#e9baff;
  font-weight:900;
}

.colour-option input[type="checkbox"]:checked + span:after{
  content:"✓";
  margin-left:7px;
  color:#d35cff;
  text-shadow:0 0 8px #b52cff;
}

.colour-selected{
  min-height:22px;
  margin-top:8px;
  color:#9b8da2;
  font-size:11px;
}

.colour-selected .tag{
  display:inline-flex;
  align-items:center;
  margin:2px 4px 2px 0;
  padding:5px 9px;
  border:1px solid #7024a0;
  border-radius:999px;
  background:linear-gradient(145deg,#1b0925,#100518);
  color:#e3b5ff;
  box-shadow:0 0 10px rgba(165,44,255,.08);
}

/* Ornament's grid checkboxes get the same treatment */
#ornamentForm .colours{
  gap:9px;
}

#ornamentForm .colours .choice{
  min-height:44px;
  margin:0;
  box-sizing:border-box;
}

#ornamentForm .colours .choice input[type="checkbox"]{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

/* Quantity controls */
.qty{
  border:1px solid #632080 !important;
  border-radius:13px !important;
  background:#09030e !important;
  box-shadow:inset 0 0 16px rgba(165,44,255,.04);
}

.qty button{
  transition:background .2s,color .2s,box-shadow .2s;
}

.qty button:hover{
  background:#1c0827 !important;
  color:#e68cff !important;
  box-shadow:inset 0 0 15px rgba(165,44,255,.10);
}

/* Main action buttons inside forms */
form .btn.primary{
  min-height:48px;
  border-color:#c74fff;
  background:linear-gradient(135deg,#b72cff,#7d12d8);
  box-shadow:0 0 22px rgba(180,44,255,.24),inset 0 1px 0 rgba(255,255,255,.16);
}

form .btn.primary:hover{
  box-shadow:0 0 30px rgba(180,44,255,.38),inset 0 1px 0 rgba(255,255,255,.18);
}

/* Form panels */
.category-designer .designer-card,
.designer-card,
.form-card,
#ornamentForm .form-card,
.contact-panel{
  box-shadow:
    0 0 35px rgba(165,44,255,.12),
    inset 0 0 35px rgba(165,44,255,.025);
}

#promptForm,
#ornamentForm{
  position:relative;
}

/* Mobile polish */
@media(max-width:700px){
  form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  form select,
  form textarea,
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .field select,
  .field textarea,
  .contact-fields input,
  .contact-fields textarea{
    min-height:50px;
    font-size:14px;
  }

  .colour-menu{
    max-height:55vh;
  }

  .colour-option{
    min-height:44px;
  }

  form .option,
  form .type-option,
  form .choice{
    padding:13px;
  }
}

/* ===== ELI-FY FIDGET TOYS + BETA PROMOS ===== */
.promo-box{margin-top:20px;padding:16px;border:1px solid #552070;border-radius:15px;background:linear-gradient(145deg,#12051a,#08030d)}
.promo-heading{font-weight:900;font-size:14px;margin-bottom:10px;color:#fff}
.promo-row{display:flex;gap:9px;width:100%;align-items:stretch}
.promo-row input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:12px 13px;
  border:1px solid #632080;
  border-radius:11px;
  background:#09030e;
  color:#fff;
  font:inherit;
  outline:none;
}
.promo-row .btn{
  flex:0 0 110px;
  min-width:110px;
  width:110px;
  box-sizing:border-box;
}
.promo-row input:focus{border-color:#c74fff;box-shadow:0 0 0 3px rgba(199,79,255,.1)}
.promo-message{min-height:18px;margin-top:8px;font-size:12px}
.promo-success{color:#d86aff}.promo-error{color:#ff8fdc}
.quote-label{display:inline-block;margin-top:5px;color:#d35cff;font-size:10px;font-weight:900;letter-spacing:1px}
@media(max-width:520px){.promo-row{flex-direction:column}.promo-row input{width:100%;flex:0 0 auto}.promo-row .btn{width:100%;min-width:0;flex:0 0 auto}}


/* Beta tester promo UI */
.beta-promo,
.promo-success,
.promo-error {
  border: 1px solid rgba(190, 90, 255, .55);
  box-shadow: 0 0 18px rgba(150, 50, 255, .16);
}
.promo-success {
  color: #f3e8ff;
}

/* =========================================================
   BETA PROMO INPUT FIX
   Keeps the promo field above decorative layers and fully
   interactive on desktop and mobile.
   ========================================================= */
.promo-box,
.promo-row,
#promoCode,
#applyPromo{
  position:relative;
  z-index:20;
  pointer-events:auto !important;
}
#promoCode{
  display:block;
  cursor:text !important;
  user-select:text !important;
  -webkit-user-select:text !important;
  caret-color:#fff;
}


/* =========================================================
   ELI-FY COLOUR SWATCHES
   ========================================================= */
.colour-option,
.fidget-colour {
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  cursor:pointer;
}
.colour-option::before,
.fidget-colour::before,
.choice:has(input[name="colour"])::before {
  content:"";
  width:20px;
  height:20px;
  min-width:20px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 0 2px rgba(255,255,255,.03);
  background:#777;
  display:inline-block;
}
.colour-option:has(input[value="Gold"])::before,
.choice:has(input[name="colour"][value="Gold"])::before{background:#d4af37}
.colour-option:has(input[value="Black"])::before,
.fidget-colour:has(input[value="Black"])::before,
.choice:has(input[name="colour"][value="Black"])::before{background:#111}
.colour-option:has(input[value="Grey"])::before,
.fidget-colour:has(input[value="Grey"])::before,
.choice:has(input[name="colour"][value="Grey"])::before{background:#808080}
.colour-option:has(input[value="White"])::before,
.fidget-colour:has(input[value="White"])::before,
.choice:has(input[name="colour"][value="White"])::before{background:#fff}
.colour-option:has(input[value="Purple"])::before,
.fidget-colour:has(input[value="Purple"])::before,
.choice:has(input[name="colour"][value="Purple"])::before{background:#8e44ff}
.colour-option:has(input[value="Neon Green"])::before,
.fidget-colour:has(input[value="Neon Green"])::before,
.choice:has(input[name="colour"][value="Neon Green"])::before{background:#6cff00}
.colour-option:has(input[value="Aqua Blue"])::before,
.fidget-colour:has(input[value="Aqua Blue"])::before,
.choice:has(input[name="colour"][value="Aqua Blue"])::before{background:#16d9df}
.colour-option:has(input[value="Light Blue"])::before,
.choice:has(input[name="colour"][value="Light Blue"])::before{background:#68b9ff}
.colour-option:has(input[value="Pink"])::before,
.fidget-colour:has(input[value="Pink"])::before,
.choice:has(input[name="colour"][value="Pink"])::before{background:#ff69b4}
.colour-option:has(input[value="Orange"])::before,
.fidget-colour:has(input[value="Orange"])::before,
.choice:has(input[name="colour"][value="Orange"])::before{background:#ff8a1c}
.colour-option:has(input[value="Yellow"])::before,
.choice:has(input[name="colour"][value="Yellow"])::before{background:#ffd83d}
.colour-option:has(input[value="Red"])::before,
.choice:has(input[name="colour"][value="Red"])::before{background:#ef3340}
.colour-option:has(input[value="Pale Green"])::before,
.choice:has(input[name="colour"][value="Pale Green"])::before{background:#b7e4a8}
.colour-option:has(input[value="Dark Blue"])::before,
.choice:has(input[name="colour"][value="Dark Blue"])::before{background:#1647a6}

.colour-option:has(input:checked)::before,
.fidget-colour:has(input:checked)::before,
.choice:has(input[name="colour"]:checked)::before{
  box-shadow:0 0 0 2px #d253ff, 0 0 12px rgba(210,83,255,.45);
}
.business-email{margin:8px 0 !important}
.business-email a{color:#d35cff;text-decoration:none}
.bank-details{display:grid;gap:8px;margin-top:12px}
.bank-details div{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.bank-details span{color:#94879c;font-size:12px}
.bank-details strong{text-align:right;font-size:12px}
@media(max-width:600px){
  .bank-details div{flex-direction:column;gap:3px}
  .bank-details strong{text-align:left}
}

/* ========================================================= GALLERY + ORDER FLOW */
.gallery-intro{max-width:720px;margin:-8px auto 24px;text-align:center;color:#a99dae;line-height:1.7}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gallery-card,.editable-gallery-card{background:rgba(7,2,12,.88);border:1px solid #65209a;border-radius:20px;overflow:hidden;text-decoration:none;color:#fff;transition:.25s}.gallery-card:hover,.editable-gallery-card:hover{transform:translateY(-5px);border-color:#c64cff;box-shadow:0 0 28px rgba(165,44,255,.22)}.gallery-card>div:last-child,.editable-gallery-card>h3,.editable-gallery-card>p{padding-left:18px;padding-right:18px}.gallery-card h3,.editable-gallery-card h3{margin:16px 0 5px}.gallery-card p,.editable-gallery-card p{color:#9d91a3;font-size:13px;line-height:1.5;margin:0 0 18px}.gallery-placeholder{min-height:180px;display:grid;place-items:center;align-content:center;gap:8px;background:linear-gradient(145deg,#160820,#07020c);border-bottom:1px solid #4c1967;color:#d35cff;font-weight:900;font-size:44px}.gallery-placeholder span{font-size:10px;letter-spacing:2px;color:#8f8198}.gallery-placeholder.large{min-height:260px;font-size:18px;letter-spacing:1px}.gallery-actions{text-align:center;margin:28px 0}.gallery-page{padding-bottom:70px}.gallery-section{margin:0 0 50px}.gallery-section h2{margin-bottom:18px}.gallery-edit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.gallery-edit-grid.three{grid-template-columns:repeat(3,1fr)}.order-preview{background:#09030e;border:1px solid #51206b;border-radius:14px;padding:16px}.order-preview-line,.order-preview-total{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.order-preview-line small{display:block;color:#8f8198;font-size:11px;line-height:1.5;margin-top:4px}.order-preview-total{font-weight:800}.order-preview-total:last-of-type{border-bottom:0;font-size:18px}.success-card{text-align:center}.success-icon{width:70px;height:70px;border:1px solid #d253ff;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;font-size:34px;color:#d35cff;box-shadow:0 0 28px rgba(165,44,255,.25)}@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-edit-grid.three{grid-template-columns:1fr 1fr}}@media(max-width:600px){.gallery-grid,.gallery-edit-grid,.gallery-edit-grid.three{grid-template-columns:1fr}.gallery-placeholder.large{min-height:210px}.order-preview-line{flex-direction:column;gap:4px}}


/* ELI-FY Shipping & Payment redesign */
.payment-shipping-panel {
  position: relative;
  overflow: hidden;
  padding: 30px;
}

.payment-shipping-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 15% 0%, rgba(190, 70, 255, .10), transparent 38%),
              radial-gradient(circle at 85% 100%, rgba(110, 40, 180, .08), transparent 38%);
}

.payment-shipping-panel > * {
  position: relative;
  z-index: 1;
}

.payment-shipping-panel .section-heading {
  margin-bottom: 22px;
}

.payment-shipping-panel .section-heading h2 {
  margin: 4px 0 6px;
}

.payment-shipping-panel .section-heading p {
  margin: 0;
  color: #a99cad;
}

.payment-shipping-panel .eyebrow,
.sp-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #c45cff;
  text-transform: uppercase;
}

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

.shipping-payment-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  min-height: 128px;
  padding: 20px;
  border: 1px solid rgba(171, 62, 225, .42);
  border-radius: 18px;
  background: rgba(7, 2, 12, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 30px rgba(0,0,0,.14);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.shipping-payment-card:hover {
  transform: translateY(-2px);
  border-color: rgba(205, 84, 255, .72);
  box-shadow: 0 12px 32px rgba(130, 32, 180, .16);
}

.shipping-payment-card .sp-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(199, 78, 255, .48);
  background: rgba(133, 35, 170, .14);
  color: #e48aff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(185, 55, 255, .10);
}

.shipping-payment-card h3 {
  margin: 4px 0 7px;
  color: #fff;
  font-size: 17px;
}

.shipping-payment-card p {
  margin: 0;
  color: #bdb2c2;
  line-height: 1.55;
  font-size: 14px;
}

@media (max-width: 720px) {
  .payment-shipping-panel {
    padding: 22px;
  }

  .shipping-payment-cards {
    grid-template-columns: 1fr;
  }

  .shipping-payment-card {
    min-height: 0;
  }
}


/* =========================================================
   ELI-FY BETA UPDATE — FEEDBACK, MOBILE CART,
   AND MULTI-IMAGE UPLOADS
   ========================================================= */
.multi-upload{display:flex;flex-direction:column;gap:12px;width:100%}
.multi-upload-pick{width:100%;min-height:108px;border:1px dashed #a52cff;border-radius:14px;background:linear-gradient(145deg,#0d0612,#08030d);color:#d35cff;font:inherit;font-weight:800;cursor:pointer;padding:20px;transition:.2s}
.multi-upload-pick:hover{border-color:#e177ff;box-shadow:0 0 22px rgba(165,44,255,.14)}
.multi-upload-pick:disabled{opacity:.75;cursor:default}
.multi-upload-pick span{display:block;color:#8f8198;font-size:11px;font-weight:600;margin-top:5px}
.multi-upload-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.multi-upload-item{display:flex;align-items:center;gap:9px;min-width:0;border:1px solid #4e1969;border-radius:12px;background:#09030e;padding:8px}
.multi-upload-item img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid #7024a0;flex:0 0 48px}
.multi-upload-item span{font-size:11px;color:#c9bdcf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.multi-upload-remove{width:28px;height:28px;border:1px solid #5b216f;border-radius:8px;background:#12051a;color:#cda1d8;font-size:18px;line-height:1;cursor:pointer;flex:0 0 28px}
.multi-upload-remove:hover{border-color:#d253ff;color:#fff;background:#1a0624}
.multi-upload-note{margin:0;color:#81758b;font-size:11px;line-height:1.5}

.feedback-page{padding-bottom:80px}
.feedback-card{background:rgba(7,2,12,.92);border:1px solid #7024a0;border-radius:22px;padding:28px;box-shadow:0 0 28px rgba(148,35,220,.13);backdrop-filter:blur(12px)}
.success-text{color:#8ee6ad!important}.error-text{color:#ff9db5!important}
.feedback-card{max-width:900px;margin:0 auto}.feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.feedback-grid .field{margin-top:0}.feedback-grid .full{grid-column:1/-1}.feedback-grid textarea{min-height:180px}

/* Always keep the cart visible on phones. */
@media(max-width:650px){
  .navbar{gap:8px}.nav-actions{margin-left:auto;gap:10px}.cart-badge{display:inline-flex!important;font-size:23px!important}.cart-badge .badge{display:grid!important}
  .multi-upload-list{grid-template-columns:1fr}
  .feedback-grid{grid-template-columns:1fr}.feedback-grid .full{grid-column:auto}.feedback-card{padding:20px 16px}
}

/* Final mobile/category polish */
.colour-option input[type="checkbox"],
.fidget-colour input[type="checkbox"]{
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
  pointer-events:none!important;
}
.colour-option{padding-left:12px!important}
.colour-option::before{flex:0 0 20px}
.colour-option:has(input:checked){background:#160821;color:#fff}

@media(max-width:650px){
  .nav-actions .cart-badge{display:inline-flex!important;align-items:center;justify-content:center!important;min-width:30px}
  .navbar .menu{margin-left:4px}
}


/* ELI-FY 2.3: accessible visible selections and inspiration gallery */
.gallery-disclaimer{margin:20px auto 10px;padding:18px 21px;max-width:850px;text-align:left;border:1px solid #a65aff;border-radius:15px;background:linear-gradient(120deg,rgba(122,40,194,.22),rgba(27,8,45,.8));box-shadow:0 0 24px rgba(145,52,240,.12)}
.gallery-disclaimer strong{color:#e5b9ff;font-size:16px}.gallery-disclaimer p{margin:7px 0 0;line-height:1.65;color:#e5d9eb}
.editable-gallery-card{position:relative}.gallery-example-tag{display:inline-block;margin:8px 0;padding:6px 9px;border-radius:99px;background:#54218b;color:#fff;font-size:10px;font-weight:850;letter-spacing:.06em}
/* Selected radio/checkbox options use a solid fill, border and glow */
.type-option:has(input:checked),.option-button.selected,.option-button[aria-pressed="true"],label:has(> input[type="radio"]:checked){background:linear-gradient(135deg,#4e1b7d,#7627ae)!important;border:2px solid #d7a1ff!important;color:#fff!important;box-shadow:0 0 0 2px rgba(211,135,255,.2),0 0 22px rgba(172,69,255,.65)!important;font-weight:800}
.type-option:has(input:checked)::after{content:' ✓ Selected';color:#f4d8ff;font-size:11px;white-space:nowrap}
input[type="radio"],input[type="checkbox"]{accent-color:#c271ff}
@media(max-width:600px){.gallery-disclaimer{padding:15px}.type-option:has(input:checked)::after{display:block;margin-top:5px}}