*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#000;color:#f7f8fc;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}a{color:inherit}header{height:72px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);background:rgba(0,0,0,.82);backdrop-filter:blur(18px);border-bottom:1px solid #171923}.brand{text-decoration:none;font-weight:850;letter-spacing:.04em}.brand span{background:linear-gradient(90deg,#e8d7ff,var(--theme-light));-webkit-background-clip:text;color:transparent}nav{display:flex;gap:28px}nav a{text-decoration:none;color:#aeb4c5;font-size:14px}.menu{display:none}.hero{min-height:620px;position:relative;overflow:hidden;text-align:center;display:flex;align-items:center;flex-direction:column;padding:34px 20px 40px}.heroGlow{position:absolute;width:700px;height:500px;top:40px;background:radial-gradient(circle,rgba(39,111,255,.18),color-mix(in srgb,var(--theme-light) 8%,transparent) 40%,transparent 70%);filter:blur(20px);pointer-events:none}.heroLogo{position:relative;width:min(480px,76vw);mix-blend-mode:screen;filter:drop-shadow(0 0 30px rgba(67,137,255,.25));margin:-12px 0 -24px}.eyebrow,small{font-weight:800;letter-spacing:.18em;color:var(--theme-light);font-size:12px}.hero h1{font-size:clamp(46px,7vw,88px);line-height:.98;letter-spacing:-.055em;margin:18px 0}.hero h1 span{background:linear-gradient(90deg,var(--theme-highlight),var(--theme-light));-webkit-background-clip:text;color:transparent}.hero>p{color:#9ca3b5;font-size:18px}.heroBtns{display:flex;gap:12px;margin:24px 0 42px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;text-decoration:none;font-weight:750;border:1px solid #2a3142}.primary{border:0;background:linear-gradient(100deg,var(--theme-light),var(--theme-main));box-shadow:0 10px 35px color-mix(in srgb,var(--theme-light) 25%,transparent)}.ghost{background:#0b0e15}.stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.stats div{display:flex;gap:10px;align-items:center;padding:13px 18px;border:1px solid #1c2741;background:#080b12;border-radius:999px;color:#cbd1dd;font-size:13px}.wrap{max-width:1180px;margin:auto;padding:90px 24px}.sectionHead{display:flex;align-items:end;justify-content:space-between;gap:30px}.sectionHead h2,.payment h2,.warranty h2{font-size:clamp(34px,5vw,56px);letter-spacing:-.04em;margin:8px 0}.sectionHead p,.payment p,.warranty p{color:#9199aa;max-width:480px;line-height:1.7}.tools{margin:36px 0 24px}.search{max-width:540px;border:1px solid #252a36;background:#090b10;padding:14px 17px;border-radius:16px}.search input{width:90%;border:0;outline:0;background:transparent;color:white;font-size:15px}.filters{display:flex;gap:8px;overflow:auto;margin-top:14px}.filters button{border:1px solid #232938;background:#080a0f;color:#aeb5c5;padding:9px 15px;border-radius:999px}.filters .active{background:var(--theme-highlight);color:#090a0c}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{min-height:245px;border:1px solid #1c2539;background:linear-gradient(145deg,#0d111b,#080a10);border-radius:24px;padding:24px;display:flex;flex-direction:column;transition:.25s}.card:hover{transform:translateY(-4px);border-color:var(--theme-light);box-shadow:0 18px 50px rgba(24,66,180,.13)}.cardTop{display:flex;justify-content:space-between}.category{font-size:12px;color:#7f8aa1}.badge{font-size:10px;background:#261b08;color:#ffc95b;padding:5px 8px;border-radius:999px}.card h3{font-size:21px;margin:30px 0 6px}.start{font-size:22px;font-weight:850;color:var(--theme-highlight);margin:auto 0 18px}.view{background:none;border:0;color:var(--theme-light);padding:0;text-align:left;font-weight:750;cursor:pointer}.payment{display:grid;grid-template-columns:1fr .72fr;gap:70px;align-items:center}.payCopy .btn{margin-top:18px}.qrisCard{background:#fff;border-radius:28px;padding:14px;box-shadow:0 0 70px rgba(74,105,255,.16)}.qrisCard img{display:block;width:100%;border-radius:17px}.warranty{margin-top:50px;margin-bottom:80px;border:1px solid #1f2634;border-radius:32px;background:radial-gradient(circle at 10% 10%,#111d3b,#080a0f 50%);display:flex;justify-content:space-between;align-items:center;padding:55px}.warranty p{margin-bottom:0}footer{max-width:1180px;margin:auto;border-top:1px solid #171a22;padding:42px 24px 60px;display:grid;grid-template-columns:1fr auto;gap:12px;color:#8c93a3}footer b{color:white}.footlinks{display:flex;gap:20px}.footlinks a{text-decoration:none}.floatWA{position:fixed;z-index:15;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#1fca65;display:grid;place-items:center;text-decoration:none;font-size:25px;box-shadow:0 10px 30px #000}.modal{display:none;position:fixed;inset:0;z-index:50}.modal.open{display:block}.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(8px)}.sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:84vh;overflow:auto;background:#0c1019;border:1px solid #26314b;border-radius:28px;padding:30px}.close{float:right;border:0;background:#171b25;color:white;width:36px;height:36px;border-radius:50%;font-size:22px}.sheet h2{font-size:30px;margin:20px 0 6px}.plan{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #202532}.plan b{color:var(--theme-highlight)}.orderBtn{width:100%;margin-top:22px;border:0;border-radius:999px;padding:15px;background:linear-gradient(90deg,#1478ff,var(--theme-main));color:white;font-weight:800;cursor:pointer}
@media(max-width:780px){header{height:64px}nav{display:none}.hero{min-height:720px;padding-top:32px}.heroLogo{width:min(390px,94vw);margin:0 0 -10px}.hero h1{font-size:48px}.hero>p{font-size:15px}.stats div{padding:11px 13px}.sectionHead{display:block}.grid{grid-template-columns:1fr 1fr}.payment{grid-template-columns:1fr;gap:35px}.qrisCard{max-width:430px;margin:auto}.warranty{display:block;padding:34px 24px}.warranty .btn{margin-top:20px}footer{grid-template-columns:1fr}.card{min-height:220px;padding:19px}.card h3{font-size:18px}.wrap{padding:68px 18px}}
@media(max-width:480px){.grid{grid-template-columns:1fr}.heroBtns{width:100%;justify-content:center}.hero h1{font-size:43px}.card{min-height:205px}.stats{max-width:380px}.sectionHead h2,.payment h2,.warranty h2{font-size:38px}}
.paySelect{cursor:pointer;transition:.2s}
.paySelect:hover{border-color:var(--theme-light)}
.modalQRIS{width:min(280px,80vw);background:white;padding:12px;border-radius:20px;display:block;margin:20px auto}
.paymentInfo{background:#080b12;border:1px solid #263b70;border-radius:18px;padding:15px;text-align:left}
.orderGuide{
max-width:1180px;
margin:auto;
padding:50px 24px;
text-align:center;
border-top:1px solid #1c2539;
}
.orderGuide p{
color:#929bad;
line-height:1.8;
}
.appIcon{
width:42px;
height:42px;
object-fit:contain;
border-radius:12px;
margin-bottom:10px;
}
.badge{
display:inline-block;
font-size:12px;
padding:5px 10px;
border-radius:20px;
background:rgba(80,130,255,.18);
color:#9ecbff;
margin:8px 0;
}
.orderStatus{
margin:40px auto;
max-width:900px;
padding:25px;
border:1px solid #263b70;
border-radius:24px;
background:#080d18;
text-align:center;
}
/* V12 visual layer without replacing V11 engine */
.v12-card{
border-radius:24px;
padding:22px;
transition:.25s ease;
}
.v12-card:hover{
transform:translateY(-5px);
}
button,.view{
background:linear-gradient(135deg,var(--theme-highlight),var(--theme-light),var(--theme-light))!important;
color:white!important;
border-radius:14px!important;
}
/* V12 mockup card rebuild layer */
.card, article.card {
border-radius: 26px;
padding: 22px;
background: linear-gradient(160deg,#111827,#0b1020);
}
.card img, article.card img {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 18px;
margin-bottom: 16px;
}
.view, .card button, article.card button {
display:block;
width:100%;
padding:13px 18px;
border-radius:16px;
background:linear-gradient(135deg,var(--theme-highlight),var(--theme-light),var(--theme-light));
color:white;
font-weight:700;
border:0;
}
/* FINAL LILAC METALLIC OVERRIDE */
button,
.view,
.card button,
.primary-btn,
.filter button.active {
background:linear-gradient(135deg,var(--theme-highlight) 0%,var(--theme-light) 50%,var(--theme-light) 100%) !important;
color:#ffffff !important;
border:none !important;
box-shadow:0 8px 25px color-mix(in srgb,var(--theme-light) 35%,transparent) !important;
}
.filter button {
color:#eee !important;
}
.filter button.active {
color:#1b1028 !important;
}
/* FINAL MOCKUP CARD */
.card, article.card {
background:linear-gradient(160deg,#12162a,#080b18);
border:1px solid rgba(255,255,255,.08);
border-radius:26px;
padding:22px;
}
.card img, article.card img {
width:72px;
height:72px;
object-fit:contain;
border-radius:18px;
background:rgba(255,255,255,.08);
padding:8px;
}
.card button, article.card button, .view {
width:100%;
margin-top:16px;
padding:14px;
border-radius:16px;
background:linear-gradient(135deg,var(--theme-highlight),var(--theme-light),var(--theme-light))!important;
color:white!important;
}
/* FINAL COLOR LOCK - LILAC METALLIC */
button,
.btn,
.cta,
.primary,
.explore,
.view,
.filter.active {
background: linear-gradient(135deg,var(--theme-highlight),var(--theme-light),var(--theme-light)) !important;
color:#fff !important;
border-color:transparent !important;
}
/* ===== FULL LILAC THEME SYSTEM ===== */
:root{
--bg-main:#070817;
--bg-card:#111126;
--bg-card-soft:#181638;
--lilac-1:var(--theme-highlight);
--lilac-2:var(--theme-light);
--lilac-3:#A78BFA;
--lilac-4:var(--theme-main);
--text-main:#FAF5FF;
--text-soft:#D8D4E8;
--text-muted:#A1A1B5;
}
/* Global */
body{
background:
radial-gradient(circle at top,var(--theme-deep) 0%,#070817 45%);
color:var(--text-main);
}
/* Headings */
h1,h2,h3,h4{
color:var(--text-main)!important;
text-shadow:0 3px 15px rgba(0,0,0,.45);
}
/* Paragraph */
p,span,label{
color:var(--text-soft);
}
/* Cards */
.card,article.card{
background:
linear-gradient(145deg,#191638,#0d0d1f)!important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 18%,transparent)!important;
box-shadow:0 20px 50px color-mix(in srgb,var(--theme-light) 18%,transparent);
}
/* Product title */
.card h3,.card h2{
color:#FFFFFF!important;
}
/* Price */
.price,.card .price{
color:var(--theme-highlight)!important;
text-shadow:0 0 15px color-mix(in srgb,var(--theme-highlight) 60%,transparent);
}
/* Category */
.category,.tag{
background:color-mix(in srgb,var(--theme-highlight) 15%,transparent)!important;
color:var(--theme-highlight)!important;
}
/* Buttons */
button,.btn,.view,.primary,.cta,.explore{
background:linear-gradient(135deg,var(--theme-highlight),var(--theme-light),var(--theme-main))!important;
color:#170B2B!important;
font-weight:800!important;
border:none!important;
box-shadow:0 10px 30px color-mix(in srgb,var(--theme-light) 35%,transparent)!important;
}
/* Search */
input{
background:#111126!important;
color:#fff!important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 35%,transparent)!important;
}
/* Footer */
footer{
background:#09091A!important;
}
/* ===== DARK CINEMATIC LILAC REWORK ===== */
/* Hero compact */
.hero,
.hero-section {
min-height: auto !important;
padding-top: 60px !important;
padding-bottom: 70px !important;
}
/* Premium dark background */
body {
background:
radial-gradient(circle at 50% 5%, color-mix(in srgb,var(--theme-light) 22%,transparent), transparent 32%),
radial-gradient(circle at 80% 40%, color-mix(in srgb,var(--theme-light) 12%,transparent), transparent 25%),
#050510 !important;
}
/* Reduce empty feeling */
section {
scroll-margin-top:80px;
}
/* Heading contrast */
h1,h2,h3,h4 {
color:#FAF5FF !important;
text-shadow:0 4px 18px rgba(0,0,0,.7);
}
p {
color:var(--theme-light) !important;
}
/* Premium buttons */
button,.btn,.cta,.primary,.explore,.view {
background:linear-gradient(135deg,var(--theme-main),var(--theme-light)) !important;
color:#FFFFFF !important;
box-shadow:0 10px 35px color-mix(in srgb,var(--theme-light) 35%,transparent) !important;
}
/* Product cards */
.card, article.card {
background:
linear-gradient(145deg,color-mix(in srgb,var(--theme-deep) 95%,transparent),rgba(7,8,23,.98)) !important;
border:1px solid color-mix(in srgb,var(--theme-light) 22%,transparent) !important;
backdrop-filter:blur(15px);
}
/* Category pill */
.category,.tag {
border-radius:999px !important;
background:color-mix(in srgb,var(--theme-light) 12%,transparent) !important;
border:1px solid color-mix(in srgb,var(--theme-light) 25%,transparent) !important;
}
/* Product price */
.price {
color:var(--theme-light) !important;
font-weight:800;
}
/* Search */
input {
background:#09091A !important;
color:#fff !important;
}
/* Remove harsh boxes */
.card span {
text-shadow:none;
}
/* ===== PRODUCT CARD MOCKUP REWORK ===== */
.card, article.card {
padding:18px !important;
border-radius:24px !important;
min-height:220px;
position:relative;
overflow:hidden;
}
/* app logo area */
.card img,
.product-icon,
.app-icon {
width:58px !important;
height:58px !important;
object-fit:contain;
border-radius:16px;
background:rgba(255,255,255,.08);
padding:8px;
margin-bottom:14px;
}
/* remove empty placeholder feeling */
.card .category,
.card .tag {
display:inline-flex;
margin-bottom:10px;
font-size:11px;
}
/* product title */
.card h3,
.card h4,
.product-title {
font-size:16px !important;
margin-bottom:10px !important;
color:#fff !important;
}
/* price */
.card .price,
.product-price {
font-size:16px !important;
color:var(--theme-light) !important;
font-weight:800;
}
/* premium badge */
.badge {
background:color-mix(in srgb,var(--theme-light) 16%,transparent)!important;
color:var(--theme-highlight)!important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 30%,transparent);
border-radius:999px!important;
}
/* view button */
.card button,
.card .view {
border-radius:14px!important;
height:42px;
font-size:13px;
}
/* search */
input {
border-radius:16px!important;
}
/* ===== BOY STORE ID - LILAC GLASS MOCKUP V2 ===== */
:root{
--bg:#050510;
--glass:rgba(255,255,255,.08);
--border:color-mix(in srgb,var(--theme-highlight) 28%,transparent);
--lilac:var(--theme-light);
--light:var(--theme-highlight);
}
body{
background:
radial-gradient(circle at 80% 15%,color-mix(in srgb,var(--theme-light) 22%,transparent),transparent 30%),
linear-gradient(180deg,#050510,#09051a);
}
.hero{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
}
.glass-card,
.card{
background:var(--glass);
border:1px solid var(--border);
backdrop-filter:blur(20px);
box-shadow:0 25px 60px rgba(0,0,0,.4);
border-radius:28px;
}
button,.btn,.cta,.view{
background:linear-gradient(135deg,var(--light),var(--lilac));
color:#160b24;
border-radius:18px;
box-shadow:0 12px 35px color-mix(in srgb,var(--theme-light) 35%,transparent);
}
/* ===== V3 FULL MOCKUP STRUCTURE ===== */
.mockupHero{
display:grid!important;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
min-height:80vh;
}
.heroVisual{
display:flex;
justify-content:center;
}
.heroLogo{
width:min(360px,80vw);
filter:drop-shadow(0 0 50px color-mix(in srgb,var(--theme-light) 45%,transparent));
}
.heroBenefits{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:30px;
}
.heroBenefits div{
background:rgba(255,255,255,.06);
border:1px solid color-mix(in srgb,var(--theme-highlight) 25%,transparent);
padding:12px 18px;
border-radius:999px;
backdrop-filter:blur(12px);
}
.productTop{
display:flex;
justify-content:space-between;
align-items:start;
}
.productLogo{
width:60px;
height:60px;
object-fit:contain;
border-radius:18px;
background:rgba(255,255,255,.08);
padding:8px;
}
@media(max-width:768px){
.mockupHero{
grid-template-columns:1fr!important;
text-align:center;
}
.heroVisual{order:-1}
.heroBenefits{justify-content:center}
}
/* ===== APP LOGO PRODUCT CARD ===== */
.productTop{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.productLogo{
width:64px;
height:64px;
object-fit:contain;
border-radius:18px;
background:rgba(255,255,255,.08);
padding:8px;
border:1px solid color-mix(in srgb,var(--theme-highlight) 20%,transparent);
}
.badge{
border-radius:999px;
padding:6px 10px;
background:color-mix(in srgb,var(--theme-light) 16%,transparent);
color:var(--theme-highlight);
}
/* ===== V6 PRODUCT CARD MOCKUP ===== */
.product-card-v6{
background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
border:1px solid color-mix(in srgb,var(--theme-highlight) 28%,transparent);
backdrop-filter:blur(18px);
border-radius:28px;
padding:18px;
box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.product-head{
display:flex;
justify-content:space-between;
align-items:center;
}
.product-logo-v6{
width:64px;
height:64px;
object-fit:contain;
border-radius:18px;
padding:8px;
background:rgba(255,255,255,.08);
}
.product-badge-v6{
font-size:11px;
border-radius:999px;
padding:6px 10px;
background:color-mix(in srgb,var(--theme-light) 18%,transparent);
}
.view-plan-v6{
width:100%;
margin-top:15px;
border-radius:16px;
}
/* ===== V7 WIRED PRODUCT CARDS ===== */
.product-card-v7{
background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
border:1px solid color-mix(in srgb,var(--theme-highlight) 30%,transparent);
backdrop-filter:blur(18px);
border-radius:26px;
padding:18px;
min-height:240px;
box-shadow:0 20px 55px rgba(0,0,0,.35);
}
.product-head-v7{
display:flex;
align-items:center;
justify-content:space-between;
}
.product-logo-v7{
width:58px;
height:58px;
object-fit:contain;
border-radius:16px;
padding:8px;
background:rgba(255,255,255,.08);
}
.badge-v7{
padding:5px 10px;
border-radius:999px;
background:color-mix(in srgb,var(--theme-light) 20%,transparent);
color:var(--theme-highlight);
font-size:11px;
}
.view-plan-v7{
width:100%;
margin-top:14px;
}
/* ===== FINAL GLASS LILAC MOCKUP PASS ===== */
.mockup-layout{
max-width:1200px;
margin:auto;
}
.heroContent h1{
font-size:clamp(38px,5vw,72px);
line-height:1.05;
}
.heroContent span{
background:linear-gradient(90deg,var(--theme-highlight),var(--theme-light),var(--theme-light));
-webkit-background-clip:text;
color:transparent;
}
.product-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
@media(max-width:768px){
.product-grid{
grid-template-columns:1fr;
}
}
/* ===== BOY PROJECT V1 - CLEANUP & UX FIXES ===== */
.product-card{min-height:270px!important}.productTop{min-height:72px;margin-bottom:12px}.productLogo{margin:0!important}.productFallback{display:grid;place-items:center;font-size:24px;font-weight:900;color:var(--theme-highlight)}.product-card .category{width:max-content;padding:5px 9px}.product-card h3{margin:14px 0 8px!important;font-size:19px!important}.product-card .start{margin:auto 0 4px;color:var(--theme-highlight);font-size:18px}.product-card .view{text-align:center!important;cursor:pointer}.emptyState{grid-column:1/-1;text-align:center;padding:48px 20px;border:1px dashed color-mix(in srgb,var(--theme-highlight) 28%,transparent);border-radius:22px}.muted{color:#aaa1bd!important}.plan.paySelect{width:100%;background:transparent!important;box-shadow:none!important;color:#f7f8fc!important;border:0!important;border-bottom:1px solid #202532!important;border-radius:0!important;text-align:left;cursor:pointer}.plan.paySelect:hover,.plan.paySelect:focus-visible{background:color-mix(in srgb,var(--theme-light) 8%,transparent)!important}.plan.paySelect b{color:var(--theme-light)}.orderStatus{max-width:1000px;padding:48px 28px;background:linear-gradient(145deg,color-mix(in srgb,var(--theme-deep) 95%,transparent),rgba(7,8,23,.98));border-color:color-mix(in srgb,var(--theme-light) 22%,transparent)}.orderStatus h2{font-size:clamp(30px,4vw,44px);margin:10px 0 28px}.orderSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.orderSteps div{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 12px;border:1px solid color-mix(in srgb,var(--theme-highlight) 16%,transparent);border-radius:18px;background:rgba(255,255,255,.03)}.orderSteps b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--theme-main),var(--theme-light))}.orderSteps span{font-size:13px;line-height:1.5}.orderNote{margin:22px auto 0;max-width:720px;font-size:13px;line-height:1.6}.sheet:focus{outline:none}.close{cursor:pointer;position:sticky;top:0;z-index:2}.menu{cursor:pointer}.secondary{background:rgba(255,255,255,.05)!important;border:1px solid color-mix(in srgb,var(--theme-highlight) 30%,transparent)!important;box-shadow:none!important}.filters button{cursor:pointer}.filters button.active{background:linear-gradient(135deg,var(--theme-highlight),var(--theme-light),var(--theme-main))!important;color:#170b2b!important}
@media(max-width:780px){.menu{display:grid!important;place-items:center;width:42px;height:42px;padding:0!important;font-size:21px}header{position:sticky}nav#mainNav{display:none;position:absolute;top:64px;left:16px;right:16px;flex-direction:column;gap:4px;padding:12px;background:color-mix(in srgb,var(--theme-deep) 98%,transparent);border:1px solid color-mix(in srgb,var(--theme-highlight) 24%,transparent);border-radius:18px;box-shadow:0 20px 45px rgba(0,0,0,.4)}nav#mainNav.open{display:flex}nav#mainNav a{padding:12px;border-radius:10px}nav#mainNav a:hover{background:color-mix(in srgb,var(--theme-light) 10%,transparent)}.orderSteps{grid-template-columns:1fr 1fr}.product-card{min-height:245px!important}}
@media(max-width:480px){.orderSteps{grid-template-columns:1fr}.heroBtns{flex-direction:column}.heroBtns .btn{width:100%}}
/* ===== BOY PROJECT V2 ===== */
.faqGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faqGrid details{border:1px solid color-mix(in srgb,var(--theme-highlight) 18%,transparent);background:rgba(255,255,255,.035);border-radius:18px;padding:18px 20px}.faqGrid summary{cursor:pointer;font-weight:800;color:var(--theme-highlight)}.faqGrid p{color:#aaa1bd;line-height:1.65;margin:12px 0 0}.terms{padding-top:70px;padding-bottom:70px}.musicToggle{position:fixed;right:24px;bottom:88px;z-index:30;width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb,var(--theme-highlight) 35%,transparent);background:color-mix(in srgb,var(--theme-deep) 92%,transparent);color:var(--theme-highlight);font-size:22px;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.35)}.musicToggle.playing{animation:musicPulse 1.6s ease-in-out infinite}.musicToggle.missing{opacity:.55}.totalBox{margin:16px 0;padding:16px;border:1px solid color-mix(in srgb,var(--theme-highlight) 22%,transparent);border-radius:16px;background:color-mix(in srgb,var(--theme-light) 8%,transparent)}.totalBox small{display:block;color:#aaa1bd}.totalBox strong{display:block;margin-top:4px;font-size:26px;color:var(--theme-highlight)}.orderId{font-family:monospace;color:var(--theme-light)}.copyPrice{width:100%;margin:0 0 12px;padding:11px;border-radius:12px;border:1px solid color-mix(in srgb,var(--theme-highlight) 20%,transparent);background:rgba(255,255,255,.04);color:#eee;cursor:pointer}@keyframes musicPulse{50%{transform:scale(1.08)}}
@media(max-width:680px){.faqGrid{grid-template-columns:1fr}.musicToggle{right:18px;bottom:82px}}
/* ===== BOY PROJECT V3 — CHECKOUT & TRUST UX ===== */
.stockBadge{font-size:10px;font-weight:900;letter-spacing:.08em;padding:5px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme-highlight) 20%,transparent)}.inStock{color:var(--theme-highlight);background:color-mix(in srgb,var(--theme-light) 12%,transparent)}.outStock{color:#aaa1bd;background:rgba(255,255,255,.04)}.soldOut{opacity:.62}.soldOut .view{cursor:not-allowed}.planHelp{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid color-mix(in srgb,var(--theme-highlight) 14%,transparent);font-size:13px;color:#aaa1bd}.planHelp a{color:var(--theme-light);font-weight:800}.orderSummary{margin:14px 0;border:1px solid color-mix(in srgb,var(--theme-highlight) 18%,transparent);border-radius:16px;overflow:hidden}.orderSummary p{display:flex;justify-content:space-between;gap:16px;margin:0;padding:12px 14px;border-bottom:1px solid color-mix(in srgb,var(--theme-highlight) 10%,transparent)}.orderSummary p:last-child{border:0}.orderSummary span{color:#aaa1bd}.orderSummary b{text-align:right}.paidCheck{display:flex;gap:10px;align-items:flex-start;margin:16px 0;padding:13px;border:1px solid color-mix(in srgb,var(--theme-highlight) 18%,transparent);border-radius:14px;color:#d8d3e6;font-size:13px;line-height:1.5}.paidCheck input{margin-top:3px;accent-color:var(--theme-main)}.orderBtn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.4)}.qrisZoom{display:block;width:100%;padding:0;border:0;background:transparent;color:#aaa1bd;cursor:zoom-in}.qrisZoom span{display:block;margin:7px 0 0;font-size:11px}.qrisOverlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:12px;padding:24px;background:color-mix(in srgb,var(--theme-deep) 94%,transparent);backdrop-filter:blur(12px)}.qrisOverlay img{width:min(88vw,520px);max-height:75vh;object-fit:contain;border-radius:22px;background:white}.qrisOverlay button{position:fixed;right:22px;top:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#151126;color:white;font-size:28px;cursor:pointer}.qrisOverlay p{color:var(--theme-highlight)}.toast{position:fixed;left:50%;bottom:28px;z-index:10000;transform:translate(-50%,20px);padding:11px 16px;border:1px solid color-mix(in srgb,var(--theme-highlight) 25%,transparent);border-radius:999px;background:color-mix(in srgb,var(--theme-deep) 96%,transparent);color:var(--theme-highlight);font-size:13px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.qrisCard small{display:block;text-align:center;margin-top:8px;color:#aaa1bd}.musicToggle[hidden]{display:none!important}
/* V3.1 — minimal checkout polish */
.checkoutHead{text-align:center;margin:2px 0 14px}.checkoutHead h2{margin:7px 0 4px;font-size:25px}.checkoutHead p{margin:0;color:#aaa1bd;font-size:14px}.checkoutTotal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin:12px 0 8px;border:1px solid color-mix(in srgb,var(--theme-highlight) 16%,transparent);border-radius:16px;background:rgba(255,255,255,.035)}.checkoutTotal strong{font-size:27px;letter-spacing:-.02em}.checkoutTotal button,.checkoutOrder button,.qrisActions button,.backPlan{border:1px solid color-mix(in srgb,var(--theme-highlight) 22%,transparent);background:rgba(255,255,255,.045);color:#eee7ff;border-radius:10px;padding:8px 11px;cursor:pointer}.checkoutOrder{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:8px 4px 12px;color:#91899f;font-size:12px}.checkoutOrder b{color:#f4efff;text-align:right;font-size:13px;letter-spacing:.04em}.minimalQris{margin:4px auto 0;padding:10px;max-width:230px}.minimalQris .modalQRIS{max-width:190px}.qrisActions{display:flex;justify-content:center;margin:7px 0 4px}.checkoutHint{text-align:center;color:#8e8799;font-size:12px;line-height:1.5;margin:10px auto;max-width:330px}.backPlan{display:block;width:100%;margin-top:9px;background:transparent}.productNotice{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;margin:8px 0 12px;border:1px solid rgba(139,185,255,.18);border-radius:12px;background:rgba(91,117,255,.06);font-size:12px;line-height:1.45}.productNotice b{white-space:nowrap;color:#a8c9ff}.productNotice span{color:#b9b2c6}@media(max-width:520px){.checkoutTotal strong{font-size:24px}.minimalQris{max-width:210px}.minimalQris .modalQRIS{max-width:170px}}
/* V3.1.1 Conversion polish */
.trustBar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-30px;margin-bottom:50px}
.trustBar div{padding:18px 14px;text-align:center;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);backdrop-filter:blur(14px);border-radius:18px;color:#dfe5f5;font-size:14px}
.heroContent p{line-height:1.7}
@media(max-width:700px){
.trustBar{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:0}
.trustBar div{font-size:12px;padding:14px 8px}
}
/* V3.1.2 Premium Clean UI */
.heroLogo{display:none!important}
.hero{min-height:620px!important;padding-bottom:35px!important}
.heroProducts{margin-top:20px;color:#cfc7e8;font-size:15px;letter-spacing:.03em}
.heroBenefits{display:none!important}
.trustBar{margin-top:0!important;margin-bottom:24px!important}
.trustBar div{font-size:13px!important;line-height:1.3}
.trustBar small{display:block;letter-spacing:.05em;color:#a9b0c5}
@media(max-width:780px){.hero{min-height:560px!important;padding-top:28px!important}.hero h1{margin-top:12px!important}.heroBtns{margin-bottom:25px!important}.wrap{padding-top:55px!important;padding-bottom:55px!important}}
.reviewBox{display:grid;gap:12px;margin:22px 0}.reviewBox div{display:flex;justify-content:space-between;gap:20px;padding:15px;border:1px solid #26314b;border-radius:16px;background:rgba(255,255,255,.04)}.reviewBox span{color:#9ca6ba}.reviewBox b{color:#fff;text-align:right}
/* V3.1.4 polish: compact hero, premium trust glass */
.hero{min-height:430px!important;padding-top:28px!important;padding-bottom:20px!important}
.heroContent{max-width:680px}
.heroProducts{margin-top:12px!important}
.heroBtns{margin-bottom:18px!important}
.trustBar{margin-top:-5px!important;margin-bottom:20px!important}
.trustBar div{
background:linear-gradient(145deg,color-mix(in srgb,var(--theme-light) 16%,transparent),rgba(255,255,255,.045));
border:1px solid color-mix(in srgb,var(--theme-light) 35%,transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px color-mix(in srgb,var(--theme-light) 12%,transparent);
backdrop-filter:blur(18px);
}
.trustBar div::before{
content:"";
display:block;
height:2px;
width:36px;
margin:0 auto 8px;
background:linear-gradient(90deg,var(--theme-light),var(--theme-highlight));
border-radius:99px;
}
.wrap{padding-top:45px!important}
.reviewBox div{
background:linear-gradient(145deg,color-mix(in srgb,var(--theme-light) 12%,transparent),rgba(255,255,255,.035));
border-color:color-mix(in srgb,var(--theme-light) 25%,transparent);
}
.reviewBox button{
border-radius:18px!important;
}
@media(max-width:700px){
.hero{min-height:400px!important;padding-bottom:10px!important}
.trustBar{margin-bottom:15px!important}
.wrap{padding-top:35px!important}
}
/* V3.1.5 Premium conversion polish */
.popularGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.popularCard{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid color-mix(in srgb,var(--theme-light) 22%,transparent);background:rgba(255,255,255,.04);border-radius:24px;backdrop-filter:blur(14px)}
.popularCard img{width:48px;height:48px;object-fit:contain;border-radius:14px}
.popularCard div{flex:1;display:flex;flex-direction:column;gap:4px}
.popularCard b{font-size:16px}
.popularCard small{color:#aeb4c5}
.popularCard strong{font-size:14px;color:var(--theme-light)}
@media(max-width:700px){
.popularGrid{grid-template-columns:1fr}
.popularCard{padding:15px}
.hero{min-height:520px;padding-bottom:20px}
.trustBar{margin-top:10px}
}
/* V3.1.6 Final Polish */
.heroContent,.heroBtns,.heroProducts,.trustBar,.wrap{
animation:boyFadeUp .55s ease both;
}
.heroBtns{animation-delay:.12s}
.trustBar{animation-delay:.18s}
.wrap{animation-delay:.25s}
@keyframes boyFadeUp{
from{opacity:0;transform:translateY(18px)}
to{opacity:1;transform:translateY(0)}
}
/* premium product interaction */
.productCard,.card{
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.productCard:hover,.card:hover{
transform:translateY(-4px);
border-color:color-mix(in srgb,var(--theme-light) 55%,transparent);
box-shadow:0 18px 45px color-mix(in srgb,var(--theme-light) 18%,transparent);
}
/* trust glass metallic polish */
.trustBar div{
position:relative;
overflow:hidden;
border-color:color-mix(in srgb,var(--theme-light) 28%,transparent)!important;
background:linear-gradient(145deg,rgba(255,255,255,.08),color-mix(in srgb,var(--theme-light) 8%,transparent))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 30px color-mix(in srgb,var(--theme-main) 12%,transparent);
}
.trustBar div:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,color-mix(in srgb,var(--theme-highlight) 14%,transparent),transparent);
transform:translateX(-120%);
transition:.6s;
}
.trustBar div:hover:before{transform:translateX(120%)}
/* unified buttons */
.primary,.orderBtn{
background:linear-gradient(100deg,var(--theme-main),var(--theme-light))!important;
box-shadow:0 12px 35px color-mix(in srgb,var(--theme-light) 25%,transparent)!important;
}
.ghost,.backPlan{
border:1px solid color-mix(in srgb,var(--theme-light) 28%,transparent)!important;
background:rgba(255,255,255,.05)!important;
}
/* checkout step indicator */
.checkoutSteps{
display:flex;
justify-content:center;
gap:8px;
margin:12px 0 20px;
font-size:11px;
color:#aeb4c5;
}
.checkoutSteps span{
padding:6px 10px;
border-radius:999px;
border:1px solid color-mix(in srgb,var(--theme-light) 20%,transparent);
}
.checkoutSteps .active{
color:white;
background:color-mix(in srgb,var(--theme-light) 18%,transparent);
}
/* Stage 1 Design Upgrade */
.heroFloating{display:flex;gap:14px;justify-content:center;margin-top:25px;position:relative;z-index:2;flex-wrap:wrap}
.floatCard{padding:14px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);backdrop-filter:blur(15px);font-weight:800;animation:floatUp 4s ease-in-out infinite;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.floatCard.spotify{animation-delay:.8s}.floatCard.ai{animation-delay:1.6s}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.btn{transition:.25s transform,.25s box-shadow}.btn:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(90,100,255,.3)}
.popularCard{position:relative;flex-wrap:wrap;transition:.3s;overflow:hidden}
.popularCard:hover{transform:translateY(-6px);border-color:var(--theme-main);box-shadow:0 18px 45px color-mix(in srgb,var(--theme-light) 18%,transparent)}
.popularCard em{width:100%;font-style:normal;color:var(--theme-accent);font-size:12px;font-weight:700}
.popBadge{position:absolute;top:10px;right:12px;font-size:10px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--theme-light) 16%,transparent);color:var(--theme-highlight);font-weight:800}
@media(max-width:780px){.heroFloating{margin-top:15px}.floatCard{font-size:13px;padding:11px 14px}}
/* Stage 1.3.1 bug fix: scope How To Order layout */
#cara-order{position:relative;overflow:hidden}
#cara-order .orderSteps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;margin-top:18px}
#cara-order .orderSteps div{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid color-mix(in srgb,var(--theme-highlight) 16%,transparent);border-radius:22px;background:rgba(255,255,255,.03);min-width:0}
#cara-order .orderSteps b{flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--theme-main),var(--theme-light));font-size:14px}
#cara-order .orderSteps span{font-size:14px;line-height:1.55;min-width:0}
#cara-order .orderSteps strong{display:block;margin-bottom:4px}
@media(max-width:780px){#cara-order .orderSteps{grid-template-columns:1fr}}
/* Stage 1.4 Payment cleanup */
.paymentFeatures{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0;}
.paymentFeatures span{padding:12px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme-highlight) 18%,transparent);background:rgba(255,255,255,.04);color:#d8d4e8;font-size:14px;}
/* Stage 1.5 Popular Product upgrade */
.popularCard p{margin:5px 0 0;color:#b6bdd0;font-size:13px;line-height:1.4}
.popularAction{width:100%;margin-top:10px;padding:10px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme-highlight) 30%,transparent);background:color-mix(in srgb,var(--theme-light) 12%,transparent);color:#eee;font-weight:800;cursor:pointer;transition:.25s}
.popularAction:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--theme-light) 22%,transparent)}
/* Stage 1.5.1 Popular interaction */
.popularAction{width:100%;margin-top:12px;border:0;border-radius:999px;padding:14px;background:linear-gradient(100deg,var(--theme-light),var(--theme-main));color:white;font-weight:800;cursor:pointer;font-size:15px;}
/* Stage 1.6 Popular Product Visual Polish */
.popularCard{
min-height:230px;
padding:22px;
gap:16px;
background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
}
.popularCard img{
width:62px;
height:62px;
padding:8px;
background:rgba(255,255,255,.05);
}
.popularCard b{
font-size:18px;
}
.popularCard small{
letter-spacing:.02em;
}
.popularCard strong{
font-size:16px;
margin-top:4px;
}
.popularCard em{
padding-top:8px;
}
.popularAction{
margin-top:8px;
width:100%;
border:1px solid color-mix(in srgb,var(--theme-light) 35%,transparent);
background:linear-gradient(90deg,color-mix(in srgb,var(--theme-light) 25%,transparent),color-mix(in srgb,var(--theme-light) 20%,transparent));
color:var(--theme-highlight);
padding:11px 16px;
border-radius:999px;
font-weight:800;
cursor:pointer;
transition:.25s ease;
}
.popularAction:hover{
transform:translateY(-2px);
box-shadow:0 12px 30px color-mix(in srgb,var(--theme-light) 25%,transparent);
}
@media(max-width:780px){
.popularCard img{width:58px;height:58px}
.popularCard{min-height:215px}
}
/* Stage 1.7 Catalog Experience Upgrade */
.catalogMeta{display:flex;justify-content:space-between;align-items:center;max-width:540px;margin-bottom:18px;color:#f7f8fc;font-weight:800}
.catalogMeta small{color:#9199aa;letter-spacing:0;font-weight:600}
.search{transition:.25s ease}
.search:focus-within{border-color:var(--theme-light);box-shadow:0 0 30px color-mix(in srgb,var(--theme-light) 16%,transparent)}
.filters button{transition:.2s ease}
.filters button:hover{transform:translateY(-2px);border-color:#a78bfa}
.product-card,.card{position:relative}
.product-card:hover,.card:hover{box-shadow:0 20px 50px color-mix(in srgb,var(--theme-light) 14%,transparent)}
@media(max-width:780px){.catalogMeta{display:block}.catalogMeta small{display:block;margin-top:6px}}
/* Stage 1.8 catalog polish */
.catalogMeta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#d8d4e8}
.catalogMeta span{font-weight:800;font-size:16px;color:var(--theme-highlight)}
.catalogMeta small{letter-spacing:0;color:#a6afc1;font-size:13px}
.search{display:flex;align-items:center;gap:10px}
.search::before{content:'🔍';font-size:14px;opacity:.85}
.search input{width:100%}
.filters button{font-weight:700}
.product-card{min-height:320px!important;padding:22px!important;justify-content:flex-start;gap:0}
.productTop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;min-height:auto!important;margin-bottom:16px}
.productBrand{display:flex;align-items:center;gap:14px;min-width:0}
.productHeadText{display:flex;flex-direction:column;gap:6px;min-width:0}
.productLogo{width:58px!important;height:58px!important;border-radius:16px;background:rgba(255,255,255,.06);padding:8px;object-fit:contain;border:1px solid color-mix(in srgb,var(--theme-highlight) 16%,transparent);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.productMini{letter-spacing:0!important;font-size:12px!important;color:#a8b1c4!important;font-weight:600!important}
.categoryPill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--theme-light) 12%,transparent);border:1px solid color-mix(in srgb,var(--theme-highlight) 16%,transparent);color:var(--theme-highlight)!important;font-size:11px!important;font-weight:800;letter-spacing:.02em}
.product-card h3{margin:4px 0 6px!important;font-size:24px!important;line-height:1.12;letter-spacing:-.02em}
.productSubtitle{margin:0;color:#b7bfd0;font-size:14px;line-height:1.55;min-height:42px}
.productPerks{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.productPerks span{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--theme-highlight) 12%,transparent);color:#dce7ff;font-size:12px;font-weight:700}
.productBottom{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.productPriceBlock small{display:block;font-size:11px;letter-spacing:.1em;color:#9ca3b5;text-transform:uppercase;margin-bottom:5px}
.product-card .start{margin:0!important;font-size:28px!important;font-weight:900;color:var(--theme-highlight)!important;letter-spacing:-.03em}
.productFeatureBadge{background:color-mix(in srgb,var(--theme-light) 16%,transparent)!important;border:1px solid color-mix(in srgb,var(--theme-highlight) 18%,transparent)!important;color:var(--theme-highlight)!important;font-size:10px!important;padding:6px 9px!important;box-shadow:0 8px 20px color-mix(in srgb,var(--theme-light) 18%,transparent)}
.product-card .view{display:flex;align-items:center;justify-content:center;width:100%;padding:14px 18px;border-radius:16px;background:linear-gradient(90deg,var(--theme-light),var(--theme-main));color:#fff!important;font-weight:800;box-shadow:0 12px 26px color-mix(in srgb,var(--theme-light) 22%,transparent);transition:.22s ease;border:0}
.product-card .view:hover{transform:translateY(-2px);box-shadow:0 16px 34px color-mix(in srgb,var(--theme-light) 28%,transparent)}
.product-card.soldOut .view{background:rgba(255,255,255,.08)!important;color:#c8c4d7!important;box-shadow:none}
@media(max-width:780px){
.catalogMeta{flex-direction:column;align-items:flex-start}
.product-card{min-height:300px!important}
.product-card h3{font-size:22px!important}
.product-card .start{font-size:25px!important}
}
@media(max-width:480px){
.productLogo{width:54px!important;height:54px!important}
.product-card{min-height:unset!important;padding:20px!important}
.productSubtitle{min-height:auto}
.filters{padding-bottom:4px}
}
/* Stage 1.8.1 final polish */
#catalog{scroll-margin-top:96px}
.search{padding:12px 16px}
.search input{min-width:0}
.productHeadText{gap:0}
.productMini{display:none}
.productSubtitle{margin:2px 0 0;color:#b7bfd0;font-size:14px;line-height:1.5;min-height:auto}
.productPerks{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.productBottom{margin-top:auto;display:flex;flex-direction:column;gap:18px;padding-top:18px}
.productPriceBlock{padding-top:2px}
.productPriceBlock small{margin-bottom:8px}
.musicToggle{bottom:108px!important}
.floatWA{bottom:36px!important}
@media(max-width:780px){
#catalog{scroll-margin-top:88px}
.filters{gap:10px;padding-bottom:6px}
.filters button{padding:8px 14px;font-size:13px;white-space:nowrap;line-height:1.15;min-width:auto}
.productPerks span{font-size:11px;padding:8px 10px}
.productBottom{gap:20px;padding-top:20px}
.musicToggle{bottom:112px!important}
.floatWA{bottom:34px!important}
}
@media(max-width:480px){
.filters button{padding:8px 12px;font-size:12px}
.search::before{font-size:15px}
.product-card{padding:18px!important}
.product-card h3{font-size:20px!important}
.productSubtitle{font-size:13px}
.productPerks{gap:8px}
.productBottom{gap:22px}
}
/* Stage 1.8.2 mobile polish */
.musicToggle,.floatWA{width:58px!important;height:58px!important;border-radius:20px!important;backdrop-filter:blur(14px);transition:.25s ease}
.musicToggle:hover,.floatWA:hover{transform:translateY(-4px) scale(1.03)}
.productBottom{padding-top:14px!important;gap:16px!important}
.product-card .view{min-height:48px}
.catalogHero p{max-width:620px}
@media(max-width:780px){
.musicToggle{bottom:128px!important;right:18px!important}
.floatWA{bottom:42px!important;right:18px!important}
.productBottom{padding-top:12px!important;gap:16px!important}
}
@media(max-width:480px){
.musicToggle,.floatWA{width:54px!important;height:54px!important}
}
/* Stage 1.9 Premium Motion */
body{animation:pageEnter .55s ease both}
@keyframes pageEnter{from{opacity:0}to{opacity:1}}
.heroContent,.heroFloating,.trustBar,.popularCard,.product-card,.payment,.warranty,.terms{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
.motion-show{opacity:1!important;transform:translateY(0)!important}
.heroContent.motion-show{transition-delay:.05s}
.heroFloating.motion-show{transition-delay:.18s}
.trustBar.motion-show{transition-delay:.12s}
.popularCard:hover,.product-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--theme-highlight) 38%,transparent);box-shadow:0 22px 55px color-mix(in srgb,var(--theme-light) 18%,transparent)}
.productLogo,.popularCard img{transition:transform .35s ease}
.product-card:hover .productLogo,.popularCard:hover img{transform:scale(1.06)}
.btn,.view,.popularAction,.orderBtn{transition:transform .2s ease,box-shadow .25s ease,filter .25s ease}
.btn:hover,.view:hover,.popularAction:hover,.orderBtn:hover{filter:brightness(1.08);transform:translateY(-2px)}
body:before{content:"";position:fixed;inset:-30%;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--theme-light) 12%,transparent),transparent 35%);animation:ambientMove 18s ease-in-out infinite;z-index:-1}
@keyframes ambientMove{0%,100%{transform:translate(-3%,-2%) scale(1)}50%{transform:translate(4%,3%) scale(1.08)}}
@media(prefers-reduced-motion:reduce){*,body:before{animation:none!important;transition:none!important}}
/* Stage 1.9.1 Motion refinement */
.heroContent,.heroFloating,.trustBar,.popularCard,.product-card,.payment,.warranty,.terms{
transform:translateY(18px);
transition-duration:.55s;
}
.heroContent.motion-show{transition-delay:.02s}
.heroFloating.motion-show{transition-delay:.10s}
.trustBar.motion-show{transition-delay:.18s}
.popularCard.motion-show,.product-card.motion-show{transition-delay:.04s}
/* cleaner floating controls */
.musicToggle,.floatWA{
width:54px!important;
height:54px!important;
border-radius:18px!important;
backdrop-filter:blur(16px);
}
.musicToggle{
bottom:132px!important;
right:18px!important;
}
.floatWA{
bottom:54px!important;
right:18px!important;
}
@media(max-width:680px){
.musicToggle{bottom:126px!important;right:18px!important}
.floatWA{bottom:42px!important;right:18px!important}
}
/* softer card motion */
.popularCard:hover,.product-card:hover{
transform:translateY(-4px);
}
/* Stage 1.9.3 dynamic filter safety */
.product-card{opacity:1;}
.product-card:not(.motion-show){transform:none;}
/* Stage 1.9.4 Product Motion Premium */
.product-card{
will-change:transform,opacity;
overflow:hidden;
}
.product-card.motion-show{
animation:productReveal .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes productReveal{
from{
opacity:0;
transform:translateY(18px) scale(.985);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
.product-card.motion-show .productLogo{
animation:logoPop .45s cubic-bezier(.2,.8,.2,1) .12s both;
}
@keyframes logoPop{
from{transform:scale(.88);opacity:.4}
to{transform:scale(1);opacity:1}
}
.product-card .view{
position:relative;
overflow:hidden;
}
.product-card .view:after{
content:"";
position:absolute;
inset:0;
transform:translateX(-120%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.product-card .view:hover:after{
transform:translateX(120%);
transition:transform .55s ease;
}
/* Stage 2.1 QRIS Payment Experience */
.premiumPaymentHead{text-align:center}
.premiumPaymentHead h2{margin-bottom:6px}
.paymentTrustRow{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0}
.paymentTrustRow span{font-size:11px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--theme-highlight) 18%,transparent);color:#ddd6fe}
.checkoutTotal{background:linear-gradient(145deg,color-mix(in srgb,var(--theme-light) 12%,transparent),rgba(255,255,255,.035))!important;}
.checkoutTotal small{display:block;letter-spacing:.12em;color:#aaa1bd;margin-bottom:4px}
.qrisFrame{padding:12px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid color-mix(in srgb,var(--theme-highlight) 16%,transparent);animation:qrisIn .5s ease}
.qrisFrame .minimalQris{margin:0 auto}
.qrisFrame .modalQRIS{box-shadow:0 12px 40px rgba(0,0,0,.2)}
.premiumOrderBox{background:rgba(255,255,255,.025);border-radius:14px;padding:10px 12px}
@keyframes qrisIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media(max-width:520px){.paymentTrustRow span{font-size:10px}.qrisFrame{padding:10px}}
/* Stage 2.1.1 QRIS mobile layout refinement */
.premiumOrderBox{padding:12px 14px;border:1px solid color-mix(in srgb,var(--theme-highlight) 14%,transparent);border-radius:16px;background:rgba(255,255,255,.03);margin:12px 0 10px}
.premiumOrderBox button{width:42px;height:42px;border-radius:14px;padding:0;display:grid;place-items:center;font-size:18px;background:linear-gradient(145deg,var(--theme-main),var(--theme-light));border:0;color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--theme-light) 22%,transparent)}
.checkoutTotal{border-radius:18px!important;padding:16px 18px!important}
.checkoutTotal strong{line-height:1}
.qrisFrame{padding:14px 14px 10px;border-radius:22px}
.qrisFrame .minimalQris{display:block;width:100%;max-width:260px;padding:0;border:0;background:transparent;margin:0 auto;text-align:center}
.qrisFrame .modalQRIS{display:block;width:min(100%,250px);max-width:100%;margin:0 auto;border-radius:18px}
.qrisFrame span{display:block;margin-top:8px;color:#9f96b3;font-size:12px}
.qrisActions{margin:10px 0 4px}
.qrisActions button{min-width:150px;border-radius:999px;padding:10px 16px;background:linear-gradient(90deg,var(--theme-main),var(--theme-light));border:0;color:#fff;font-weight:800;box-shadow:0 10px 24px color-mix(in srgb,var(--theme-light) 22%,transparent)}
.paidCheck{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--theme-highlight) 14%,transparent);border-radius:14px;background:rgba(255,255,255,.02);margin:14px 0}
.paidCheck input{margin-top:3px;accent-color:var(--theme-main)}
.paidCheck span{color:#e8defe;font-size:13px;line-height:1.45}
.orderBtn{border-radius:16px!important}
.backPlan{border-radius:14px!important;padding:12px 14px!important}
@media(max-width:640px){
.sheet{width:min(calc(100vw - 18px),560px);max-height:88vh;padding:22px 14px 16px;border-radius:24px}
.close{width:44px;height:44px;font-size:24px;background:linear-gradient(145deg,var(--theme-light),var(--theme-light));border:0;box-shadow:0 12px 30px color-mix(in srgb,var(--theme-light) 28%,transparent)}
.premiumPaymentHead h2{font-size:28px!important;line-height:1.08;margin-top:8px}
.premiumPaymentHead p{font-size:13px!important;margin-top:4px}
.paymentTrustRow{gap:8px;margin:14px 0 16px}
.paymentTrustRow span{font-size:10px;padding:8px 10px}
.checkoutTotal{padding:14px 14px!important;align-items:center;gap:10px}
.checkoutTotal small{font-size:11px;margin-bottom:6px}
.checkoutTotal strong{font-size:24px!important}
.checkoutTotal button{padding:10px 12px!important;font-size:12px;white-space:nowrap;border-radius:14px}
.premiumOrderBox{grid-template-columns:auto 1fr auto;gap:8px;padding:10px 12px;margin:10px 0}
.premiumOrderBox span{font-size:11px}
.premiumOrderBox b{font-size:12px;letter-spacing:.02em;word-break:break-all}
.premiumOrderBox button{width:38px;height:38px;border-radius:12px;font-size:16px}
.qrisFrame{padding:12px 10px 8px;border-radius:20px}
.qrisFrame .minimalQris{max-width:236px}
.qrisFrame .modalQRIS{width:min(100%,228px);border-radius:16px}
.qrisActions button{width:100%;max-width:220px}
.checkoutHint{font-size:11.5px;max-width:290px;margin:10px auto 12px}
.paidCheck{padding:12px 12px;margin:12px 0}
.paidCheck span{font-size:12.5px}
}
@media(max-width:420px){
.sheet{padding:20px 12px 14px}
.premiumPaymentHead h2{font-size:24px!important}
.paymentTrustRow{gap:6px}
.paymentTrustRow span{font-size:9.5px;padding:7px 9px}
.checkoutTotal{padding:12px 12px!important}
.checkoutTotal strong{font-size:22px!important}
.checkoutTotal button{font-size:11px;padding:9px 11px!important}
.qrisFrame .minimalQris{max-width:220px}
.qrisFrame .modalQRIS{width:min(100%,214px)}
}
/* Stage 2.1.3 focused QR crop */
.qrisFrame .modalQRIS{background:#fff;object-fit:contain;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.qrisOverlay img{background:#fff;padding:10px}
/* Stage 2.2 Checkout polish */
.sheet.checkout-pop{animation:checkoutPop .32s cubic-bezier(.2,.8,.2,1)}
@keyframes checkoutPop{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.orderBtn.ready{animation:buttonReady .45s ease;box-shadow:0 12px 35px color-mix(in srgb,var(--theme-light) 45%,transparent)}
@keyframes buttonReady{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
.promoRow{display:flex;gap:10px;align-items:center}
.promoRow input{flex:1}
.promoRow button{border:0;border-radius:12px;padding:12px 16px;background:var(--theme-main);color:#fff;font-weight:700;cursor:pointer}
#promoResult{margin:14px 0;font-weight:700;color:var(--theme-highlight)}
.promoBanner{max-width:820px;margin:12px auto;padding:16px 20px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--theme-accent) 12%,transparent),color-mix(in srgb,var(--theme-light) 18%,transparent));border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;backdrop-filter:blur(14px)}
.promoBanner strong{font-size:17px}
.promoBanner span{color:#d7d9e8;font-size:14px}
.promoButtons{display:flex;gap:10px}
.promoButtons button{border:0;border-radius:12px;padding:10px 14px;background:var(--theme-main);color:white;font-weight:700;cursor:pointer}
@media(max-width:700px){.promoBanner{flex-direction:column;align-items:stretch}.promoButtons button{width:100%}.promoButtons{display:grid}}
/* 2.7.5 promo polish */
.promoBadge{display:inline-flex;align-items:center;gap:8px;margin:0 auto 14px;padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--theme-light) 18%,transparent);border:1px solid color-mix(in srgb,var(--theme-light) 35%,transparent);color:var(--theme-highlight);font-weight:800;font-size:13px;letter-spacing:.04em}
.promoBanner{box-shadow:0 18px 60px color-mix(in srgb,var(--theme-light) 22%,transparent);backdrop-filter:blur(18px)}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:9999;background:#111827;border:1px solid var(--theme-main);color:#fff;padding:13px 20px;border-radius:999px;font-weight:700;transition:.25s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.promoProductBadge{background:color-mix(in srgb,var(--theme-light) 14%,transparent);border:1px solid color-mix(in srgb,var(--theme-highlight) 24%,transparent);color:var(--theme-highlight);box-shadow:0 0 10px color-mix(in srgb,var(--theme-light) 15%,transparent);font-size:10px;padding:5px 9px;border-radius:999px;white-space:nowrap;align-self:flex-start;}
/* BOY STORE 2.8.0 premium checkout polish */
.promoResultPremium{margin-top:12px;padding:14px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--theme-light) 18%,transparent),rgba(59,130,246,.12));border:1px solid color-mix(in srgb,var(--theme-light) 35%,transparent);font-weight:700}
/* BOY STORE 2.8.1 FIX - subtle premium polish */
.hero,
.heroContent{position:relative}
.hero:before{
content:"";
position:absolute;
width:220px;height:220px;
right:5%;top:10%;
border-radius:40px;
background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.08);
filter:blur(.2px);
z-index:-1;
animation:boyFloat 12s ease-in-out infinite;
}
@keyframes boyFloat{50%{transform:translateY(-18px) rotate(8deg)}}
/* only primary action buttons */
.heroBtns .btn,
.orderBtn,
#applyPromoBtn,
#midtransBtn,
#paidBtn,
#wa{
overflow:hidden;
position:relative;
}
.heroBtns .btn:after,
.orderBtn:after,
#applyPromoBtn:after,
#midtransBtn:after,
#paidBtn:after,
#wa:after{
content:"";
position:absolute;
top:-20%;left:-45%;
width:35%;height:140%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-22deg);
animation:boyShine 6s ease-in-out infinite;
}
@keyframes boyShine{
0%,65%{left:-45%;opacity:0}
70%{opacity:.8}
100%{left:130%;opacity:0}
}
/* keep modal and checkout clean */
.sheet,.modal .sheet,.reviewBox,.payment{animation:none!important}
/* ===== 2.8.1.1 FULL GLASS BACKGROUND + ALL BUTTON SHINE ===== */
body{
background:
radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--theme-accent) 12%,transparent),transparent 24%),
radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--theme-light) 18%,transparent),transparent 28%),
linear-gradient(180deg,#050611,#080b18 55%,#050611) !important;
}
body:before,body:after{
content:"";
position:fixed;
pointer-events:none;
z-index:-1;
filter:blur(1px);
border:1px solid rgba(255,255,255,.08);
background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.01));
backdrop-filter:blur(14px);
}
body:before{
width:240px;height:240px;left:-80px;top:180px;
border-radius:42px;
animation:glassFloatA 16s ease-in-out infinite;
}
body:after{
width:180px;height:180px;right:-50px;bottom:160px;
border-radius:50%;
animation:glassFloatB 18s ease-in-out infinite;
}
@keyframes glassFloatA{50%{transform:translate(30px,-20px) rotate(15deg)}}
@keyframes glassFloatB{50%{transform:translate(-25px,25px) rotate(-20deg)}}
/* all interactive buttons only */
button,.btn,a.button,.view,.orderBtn,.backPlan,
#applyPromoBtn,#midtransBtn,#saveQrisBtn,#paidBtn,
#copyPriceBtn,#copyOrderBtn,#continuePayment,#backPlanBtn,#wa{
position:relative!important;
overflow:hidden!important;
}
button::after,.btn::after,a.button::after,.view::after,
.orderBtn::after,.backPlan::after,#applyPromoBtn::after,
#midtransBtn::after,#saveQrisBtn::after,#paidBtn::after,
#copyPriceBtn::after,#copyOrderBtn::after,#continuePayment::after,
#backPlanBtn::after,#wa::after{
content:"";
position:absolute;
top:-40%;
left:-35%;
width:30%;
height:180%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
transform:translateX(-180%) skewX(-25deg);
animation:softGlassShine 6s ease-in-out infinite;
pointer-events:none;
}
@keyframes softGlassShine{
0%,65%{transform:translateX(-180%) skewX(-25deg);opacity:0}
72%{opacity:.7}
100%{transform:translateX(360%) skewX(-25deg);opacity:0}
}
/* ===== 2.8.1.3 FINAL MOBILE STABILITY PATCH ===== */
/* QRIS rebuild */
.qrisOverlay{
position:fixed!important;
inset:0!important;
z-index:99999!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:24px!important;
background:rgba(2,3,12,.82)!important;
backdrop-filter:blur(14px)!important;
}
.qrisCard{
position:relative;
width:min(420px,100%);
background:#ffffff;
border-radius:30px;
padding:26px 20px 22px;
text-align:center;
box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.qrisCard button{
position:absolute!important;
right:14px!important;
top:14px!important;
width:48px!important;
height:48px!important;
border-radius:16px!important;
border:0!important;
background:linear-gradient(135deg,var(--theme-main),var(--theme-light))!important;
color:white!important;
font-size:28px!important;
z-index:2;
}
.qrisCard .qrisTitle{
color:#777;
font-size:12px;
letter-spacing:3px;
margin-bottom:14px;
}
.qrisCard img{
display:block;
width:100%;
max-width:330px;
margin:20px auto 16px;
border-radius:18px;
}
.qrisCard p{
margin:0;
color:var(--theme-deep);
font-weight:800;
font-size:18px;
}
/* floating controls */
#musicToggle{
right:20px!important;
left:auto!important;
bottom:100px!important;
z-index:9000!important;
}
#wa{
right:20px!important;
bottom:28px!important;
z-index:9001!important;
}
/* filter chips */
.categoryBar,.categories,.filterTabs{
display:flex!important;
gap:10px!important;
overflow-x:auto!important;
white-space:nowrap!important;
scrollbar-width:none;
}
.categoryBar::-webkit-scrollbar,.categories::-webkit-scrollbar,.filterTabs::-webkit-scrollbar{
display:none;
}
.categoryBar button,.categories button,.filterTabs button{
flex:0 0 auto!important;
min-width:max-content!important;
white-space:nowrap!important;
}
/* sticky header spacing */
main,section{
scroll-margin-top:90px;
}
/* mobile search */
@media(max-width:600px){
.searchBox,input[type="search"],#search{
width:100%!important;
min-height:48px!important;
font-size:15px!important;
}
.productCard{
overflow:hidden;
}
}
/* === 2.8.1.4 FINAL MOBILE LAYOUT PATCH === */
/* prevent mobile category clipping */
.categoryBar,
.categories,
.filterTabs,
.category-tabs {
display:flex !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
overflow-y:hidden !important;
width:100%;
padding-right:12px;
-webkit-overflow-scrolling:touch;
}
.categoryBar > *,
.categories > *,
.filterTabs > *,
.category-tabs > * {
flex:0 0 auto !important;
white-space:nowrap !important;
}
/* faq anchor safety under sticky header */
.faq,
.faqSection,
#faq {
scroll-margin-top:110px !important;
padding-top:20px;
}
/* floating music safe area */
#musicToggle {
position:fixed !important;
right:20px !important;
left:auto !important;
bottom:96px !important;
transform:none !important;
}
/* mobile floating whatsapp safe area */
#wa {
position:fixed !important;
right:20px !important;
bottom:28px !important;
transform:none !important;
}
/* avoid fixed header covering content */
@media(max-width:768px){
main {
padding-top:18px;
}
.searchBox,
.searchWrap,
input[type="search"] {
max-width:100% !important;
}
}
/* FINAL TOUCHUP 2.8.1.5 */
#musicToggle{
right:28px!important;
bottom:150px!important;
}
@media(max-width:680px){
#musicToggle{
right:22px!important;
bottom:138px!important;
}
.floatWA{
right:22px!important;
bottom:55px!important;
}
}
/* Buyer form cleanup */
.buyerBox{display:flex;flex-direction:column;gap:10px}
.buyerBox>span{margin-bottom:8px;font-weight:700}
.buyerBox label{font-size:13px;color:#9ca3b5;margin-top:6px}
.buyerInput{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1px solid #30384d;background:#090b12;color:#fff;font-size:16px;outline:none}
.buyerInput::placeholder{color:#777f92}
.buyerInput:focus{border-color:var(--theme-main)}
.qrisLoadingBox{
width:min(280px,80vw);
min-height:280px;
aspect-ratio:1/1;
background:linear-gradient(145deg,#ffffff,#faf7ff);
border-radius:20px;
margin:20px auto;
padding:22px 18px;
box-sizing:border-box;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
text-align:center;
color:var(--theme-main);
overflow:hidden;
box-shadow:0 10px 35px color-mix(in srgb,var(--theme-light) 15%,transparent);
}
.qrisLoadingBox strong{
display:block;
width:100%;
margin:0;
font-size:clamp(15px,4.2vw,17px);
line-height:1.25;
color:var(--theme-main);
letter-spacing:.01em;
white-space:normal;
word-break:break-word;
overflow-wrap:anywhere;
}
.qrisLoadingBox small{
display:block;
width:100%;
max-width:220px;
margin:0 auto;
font-size:clamp(12px,3.6vw,13px);
line-height:1.45;
color:#6b6478;
letter-spacing:.02em;
white-space:normal;
word-break:break-word;
overflow-wrap:anywhere;
}
.qrisSpinner{
width:38px;height:38px;
border:4px solid var(--theme-highlight);
border-top-color:var(--theme-main);
border-radius:50%;
animation:qrisSpin 1s linear infinite;
}
@keyframes qrisSpin{to{transform:rotate(360deg)}}
.qrisActions button:disabled{opacity:.45;cursor:not-allowed}
/* QRIS loading mobile fix v3 */
.qrisLoadingBox{
width:100% !important;
max-width:280px;
padding:28px 20px !important;
overflow:hidden !important;
text-align:center !important;
}
.qrisLoadingBox strong,.qrisLoadingBox small{
width:100% !important;
max-width:100% !important;
display:block !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
text-align:center !important;
}
.qrisLoadingBox strong{font-size:16px !important;line-height:1.35 !important;}
.qrisLoadingBox small{font-size:12px !important;line-height:1.5 !important;}
.paymentMethodBadge{margin:12px 0;padding:12px 16px;border:1px solid color-mix(in srgb,var(--theme-light) 35%,transparent);border-radius:16px;background:rgba(255,255,255,.04);font-weight:700;line-height:1.3}.paymentMethodBadge small{opacity:.7;font-weight:500}
/* V2.2.0 Snow + Ice Glass Visual Layer */
#snowLayer{
position:fixed;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:999;
}
.snowflake{
position:absolute;
top:-20px;
color:rgba(255,255,255,.75);
font-size:10px;
filter:blur(.2px);
animation:snowFall linear infinite;
text-shadow:0 0 10px rgba(255,255,255,.5);
}
@keyframes snowFall{
0%{transform:translateY(-30px) translateX(0) rotate(0deg);opacity:0}
15%{opacity:.9}
100%{transform:translateY(110vh) translateX(80px) rotate(360deg);opacity:0}
}
/* Frost glass upgrade */
.paymentCard,
.qrisBox,
.sheet,
.card{
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
border-color:color-mix(in srgb,var(--theme-highlight) 18%,transparent);
box-shadow:0 0 35px color-mix(in srgb,var(--theme-light) 12%,transparent);
}
/* Lilac theme override inspired by BOY STORE reference */
.heroGlow{background:radial-gradient(circle,color-mix(in srgb,var(--theme-highlight) 28%,transparent),color-mix(in srgb,var(--theme-light) 12%,transparent) 40%,transparent 70%);}
.primary,.orderBtn{background:linear-gradient(100deg,var(--theme-light),var(--theme-light),var(--theme-main))!important;}
/* ===== BOY STORE NEON LILAC RESKIN ===== */
:root{
--lilac-1:var(--theme-main);
--lilac-2:var(--theme-light);
--lilac-3:var(--theme-highlight);
--lilac-4:#A885D8;
--lilac-dark:var(--theme-deep);
--neon-glow:color-mix(in srgb,var(--theme-highlight) 85%,transparent);
}
body{
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--theme-light) 18%,transparent), transparent 35%),
linear-gradient(180deg,#07050f 0%,#0d0818 45%,#05030b 100%);
}
header{
background:color-mix(in srgb,var(--theme-deep) 82%,transparent);
border-bottom:1px solid color-mix(in srgb,var(--theme-highlight) 22%,transparent);
box-shadow:inset 0 -10px 25px color-mix(in srgb,var(--theme-deep) 25%,transparent);
}
.brand span,
.hero h1 span{
background:linear-gradient(135deg,var(--theme-main) 0%,var(--theme-light) 35%,var(--theme-highlight) 50%,#A885D8 65%,var(--theme-deep) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
filter:drop-shadow(0 0 12px color-mix(in srgb,var(--theme-highlight) 65%,transparent));
}
.heroGlow{
background:
radial-gradient(circle,
rgba(241,228,255,.55) 0%,
color-mix(in srgb,var(--theme-light) 35%,transparent) 25%,
color-mix(in srgb,var(--theme-main) 18%,transparent) 45%,
transparent 72%);
filter:blur(35px);
}
.btn,
.primary,
.stats div,
.promo,
.card{
border-color:color-mix(in srgb,var(--theme-highlight) 35%,transparent);
box-shadow:
inset 0 0 25px color-mix(in srgb,var(--theme-deep) 55%,transparent),
0 0 25px color-mix(in srgb,var(--theme-highlight) 25%,transparent);
}
.primary,
.btn.primary{
background:
linear-gradient(135deg,var(--theme-main) 0%,var(--theme-light) 35%,var(--theme-highlight) 50%,#A885D8 65%,var(--theme-deep) 100%);
color:#160b28;
box-shadow:
inset 0 -10px 25px color-mix(in srgb,var(--theme-deep) 45%,transparent),
0 0 35px color-mix(in srgb,var(--theme-highlight) 70%,transparent);
}
.ghost{
background:linear-gradient(135deg,color-mix(in srgb,var(--theme-highlight) 18%,transparent),color-mix(in srgb,var(--theme-deep) 45%,transparent));
backdrop-filter:blur(18px);
}
.card,.promo{
background:
linear-gradient(135deg,color-mix(in srgb,var(--theme-highlight) 16%,transparent),color-mix(in srgb,var(--theme-deep) 45%,transparent));
backdrop-filter:blur(18px);
}
button:hover,.btn:hover{
filter:brightness(1.12);
transform:translateY(-2px);
box-shadow:
inset 0 0 30px color-mix(in srgb,var(--theme-deep) 70%,transparent),
0 0 45px color-mix(in srgb,var(--theme-highlight) 75%,transparent);
}
/* === NEON LILAC CRYSTAL UI PATCH === */
/* UI only - no logic changes */
:root{
--lilac-main:var(--theme-light);
--lilac-light:var(--theme-highlight);
--lilac-mid:#A885D8;
--lilac-deep:var(--theme-deep);
--lilac-shadow:color-mix(in srgb,var(--theme-deep) 85%,transparent);
}
body{
background:
radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--theme-highlight) 18%,transparent),transparent 38%),
linear-gradient(135deg,#05030b 0%,#120a20 45%,#07050d 100%);
}
.brand span,
.hero h1 span,
.gradient-text{
background:linear-gradient(135deg,var(--theme-main) 0%,var(--theme-light) 35%,var(--theme-highlight) 50%,#A885D8 65%,var(--theme-deep) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
filter:drop-shadow(0 0 12px color-mix(in srgb,var(--theme-highlight) 65%,transparent));
}
button,
.btn,
.primary-btn,
.copy-btn{
background:linear-gradient(135deg,var(--theme-main) 0%,var(--theme-light) 35%,var(--theme-highlight) 50%,#A885D8 65%,var(--theme-deep) 100%) !important;
color:#fff !important;
border:1px solid rgba(241,228,255,.65) !important;
box-shadow:
inset 0 -10px 25px color-mix(in srgb,var(--theme-deep) 70%,transparent),
0 0 18px color-mix(in srgb,var(--theme-highlight) 75%,transparent),
0 0 45px color-mix(in srgb,var(--theme-light) 35%,transparent) !important;
}
button:hover,
.btn:hover,
.primary-btn:hover,
.copy-btn:hover{
transform:translateY(-2px);
filter:brightness(1.12);
box-shadow:
inset 0 -12px 30px color-mix(in srgb,var(--theme-deep) 80%,transparent),
0 0 30px rgba(241,228,255,.9) !important;
}
.card,
.product-card,
.promo-card,
.payment-card,
.glass-card{
background:
linear-gradient(135deg,
color-mix(in srgb,var(--theme-highlight) 16%,transparent),
color-mix(in srgb,var(--theme-deep) 45%,transparent)) !important;
border-color:rgba(241,228,255,.35) !important;
box-shadow:
inset 0 0 35px color-mix(in srgb,var(--theme-deep) 75%,transparent),
0 0 25px color-mix(in srgb,var(--theme-highlight) 18%,transparent) !important;
}
input,
select,
textarea{
background:color-mix(in srgb,var(--theme-deep) 65%,transparent) !important;
border-color:color-mix(in srgb,var(--theme-highlight) 35%,transparent) !important;
color:var(--theme-highlight) !important;
}
.music-btn,
.chat-btn,
.floating-btn{
box-shadow:
0 0 20px color-mix(in srgb,var(--theme-highlight) 80%,transparent),
inset 0 -8px 20px color-mix(in srgb,var(--theme-deep) 60%,transparent) !important;
}
/* soft neon reflection */
.neon-glow{
text-shadow:
0 0 8px var(--theme-light),
0 0 22px color-mix(in srgb,var(--theme-highlight) 80%,transparent);
}
/* ===== DARK LUXURY NEON LILAC FINAL PATCH ===== */
body{
background:#05030b !important;
}
.heroGlow{
background:radial-gradient(circle,color-mix(in srgb,var(--theme-light) 18%,transparent),color-mix(in srgb,var(--theme-deep) 20%,transparent) 38%,transparent 72%) !important;
}
header{
background:color-mix(in srgb,var(--theme-deep) 88%,transparent) !important;
border-bottom:1px solid color-mix(in srgb,var(--theme-light) 22%,transparent) !important;
}
.brand span,.hero h1 span{
background:linear-gradient(90deg,#A885D8,var(--theme-light),var(--theme-main))!important;
-webkit-background-clip:text!important;
}
.hero>p, .sectionHead p, .payment p{
color:var(--theme-light) !important;
}
.primary,.orderBtn,.payBtn{
background:linear-gradient(135deg,var(--theme-main) 0%,var(--theme-light) 45%,var(--theme-deep) 100%) !important;
box-shadow:0 0 25px color-mix(in srgb,var(--theme-light) 35%,transparent), inset 0 -8px 18px color-mix(in srgb,var(--theme-deep) 55%,transparent) !important;
}
.btn,.card,.sheet,.paymentInfo,.qrisCard{
border-color:color-mix(in srgb,var(--theme-light) 35%,transparent) !important;
}
.card,.sheet{
background:linear-gradient(145deg,color-mix(in srgb,var(--theme-deep) 70%,transparent),color-mix(in srgb,var(--theme-deep) 94%,transparent)) !important;
box-shadow:inset 0 0 30px color-mix(in srgb,var(--theme-deep) 45%,transparent),0 20px 55px rgba(0,0,0,.45) !important;
}
.stats div,.ghost{
background:color-mix(in srgb,var(--theme-deep) 72%,transparent) !important;
border-color:color-mix(in srgb,var(--theme-light) 25%,transparent)!important;
}
.hero h1 span{
text-shadow:0 0 22px color-mix(in srgb,var(--theme-light) 35%,transparent);
}
.floatMusic,.musicBtn{
box-shadow:0 0 25px color-mix(in srgb,var(--theme-light) 50%,transparent)!important;
}
/* ===== V2.3.0 LUXURY COMPONENT POLISH ===== */
/* premium crystal buttons */
.primary,.orderBtn,.payBtn,.popularAction,.promoButtons button{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,var(--theme-deep) 0%,var(--theme-main) 42%,var(--theme-light) 58%,var(--theme-deep) 100%) !important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 45%,transparent)!important;
box-shadow:
inset 0 3px 12px rgba(255,255,255,.18),
inset 0 -10px 22px color-mix(in srgb,var(--theme-deep) 85%,transparent),
0 0 24px color-mix(in srgb,var(--theme-light) 55%,transparent)!important;
}
.primary::before,.orderBtn::before,.payBtn::before,.popularAction::before,.promoButtons button::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-20deg);
animation:lilacShine 4s infinite;
}
@keyframes lilacShine{
0%,60%{left:-120%}
100%{left:140%}
}
/* floating buttons - remove green/flat feel */
.floatWA{
background:linear-gradient(145deg,#20102f,var(--theme-main))!important;
color:#fff!important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 50%,transparent)!important;
box-shadow:
inset 0 0 18px color-mix(in srgb,var(--theme-highlight) 25%,transparent),
0 0 25px color-mix(in srgb,var(--theme-light) 65%,transparent)!important;
filter:none!important;
}
.musicToggle{
background:linear-gradient(145deg,#20102f,var(--theme-main))!important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 55%,transparent)!important;
color:var(--theme-highlight)!important;
box-shadow:
inset 0 0 18px color-mix(in srgb,var(--theme-highlight) 25%,transparent),
0 0 25px color-mix(in srgb,var(--theme-light) 65%,transparent)!important;
}
/* premium badges */
.popBadge{
background:color-mix(in srgb,var(--theme-deep) 75%,transparent)!important;
border:1px solid color-mix(in srgb,var(--theme-light) 45%,transparent)!important;
box-shadow:0 0 12px color-mix(in srgb,var(--theme-light) 35%,transparent);
color:var(--theme-light)!important;
}
/* card depth */
.popularCard,.product-card{
box-shadow:
inset 0 0 35px color-mix(in srgb,var(--theme-deep) 85%,transparent),
0 18px 45px rgba(0,0,0,.55),
0 0 20px color-mix(in srgb,var(--theme-light) 12%,transparent)!important;
}
/* reduce white glare */
*{
scrollbar-color:var(--theme-main) #05030b;
}
/* V2.3.1 QR Loading Dark Luxury Neon Lilac */
.qrisLoadingBox{
background:linear-gradient(135deg,color-mix(in srgb,var(--theme-deep) 96%,transparent),color-mix(in srgb,var(--theme-deep) 62%,transparent)) !important;
border:1px solid color-mix(in srgb,var(--theme-light) 45%,transparent) !important;
box-shadow:inset 0 0 35px color-mix(in srgb,var(--theme-deep) 85%,transparent),0 0 30px color-mix(in srgb,var(--theme-light) 35%,transparent) !important;
color:var(--theme-highlight) !important;
}
.qrisLoadingBox strong{
color:var(--theme-highlight) !important;
text-shadow:0 0 12px color-mix(in srgb,var(--theme-highlight) 45%,transparent);
}
.qrisLoadingBox small{
color:var(--theme-light) !important;
}
.qrisSpinner{
border:4px solid color-mix(in srgb,var(--theme-highlight) 20%,transparent) !important;
border-top-color:var(--theme-light) !important;
box-shadow:0 0 18px color-mix(in srgb,var(--theme-light) 65%,transparent);
}
/* ===== V2.3.2 DARK LUXURY NEON LILAC CONSISTENCY PATCH ===== */
/* unified crystal buttons */
.btn.primary,
.btn.secondary,
.popularAction,
.promoButtons button,
button {
position: relative;
overflow: hidden;
}
.btn.secondary {
background: linear-gradient(135deg,var(--theme-deep) 0%,var(--theme-main) 45%,var(--theme-deep) 100%) !important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 45%,transparent) !important;
box-shadow:
inset 0 3px 12px rgba(255,255,255,.12),
inset 0 -12px 25px color-mix(in srgb,var(--theme-deep) 80%,transparent),
0 0 24px color-mix(in srgb,var(--theme-light) 55%,transparent) !important;
}
.btn.primary,
.popularAction {
background:linear-gradient(135deg,var(--theme-main),var(--theme-light),var(--theme-main)) !important;
border:1px solid rgba(241,228,255,.35) !important;
box-shadow:
inset 0 3px 12px rgba(255,255,255,.25),
inset 0 -10px 20px color-mix(in srgb,var(--theme-deep) 75%,transparent),
0 0 28px color-mix(in srgb,var(--theme-light) 70%,transparent) !important;
}
.btn.primary::after,
.btn.secondary::after,
.popularAction::after {
content:"";
position:absolute;
top:0;
left:-120%;
width:45%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-25deg);
animation:neonSweep 4s infinite;
}
@keyframes neonSweep {
0%,55% {left:-120%}
100% {left:140%}
}
/* How To Order numbers crystal badge */
.orderSteps > div b {
background:linear-gradient(135deg,var(--theme-deep),var(--theme-light),var(--theme-main)) !important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 55%,transparent);
box-shadow:
inset 0 4px 10px rgba(255,255,255,.2),
0 0 20px color-mix(in srgb,var(--theme-light) 60%,transparent);
}
/* product buttons */
.popularAction {
color:#fff !important;
}
/* keep luxury dark cards */
.orderSteps > div,
.popularCard {
border-color:color-mix(in srgb,var(--theme-light) 28%,transparent);
}
/* ===== END V2.3.2 ===== */
/* ===== V2.3.3 CATALOG UI SYNC ONLY ===== */
.product-card,
.product-card-v6,
.product-card-v7{
background:
linear-gradient(145deg,color-mix(in srgb,var(--theme-light) 16%,transparent),color-mix(in srgb,var(--theme-deep) 78%,transparent));
border:1px solid color-mix(in srgb,var(--theme-light) 35%,transparent);
box-shadow:
inset 0 0 35px color-mix(in srgb,var(--theme-deep) 45%,transparent),
0 20px 55px rgba(0,0,0,.55);
}
.productLogo,
.product-logo-v6,
.product-logo-v7{
background:
linear-gradient(145deg,color-mix(in srgb,var(--theme-highlight) 18%,transparent),color-mix(in srgb,var(--theme-deep) 55%,transparent));
border:1px solid color-mix(in srgb,var(--theme-light) 45%,transparent);
box-shadow:
inset 0 0 15px rgba(255,255,255,.08),
0 0 18px color-mix(in srgb,var(--theme-light) 35%,transparent);
}
.badge,
.badge-v7,
.product-badge-v6{
background:linear-gradient(135deg,color-mix(in srgb,var(--theme-light) 35%,transparent),color-mix(in srgb,var(--theme-deep) 55%,transparent));
border:1px solid color-mix(in srgb,var(--theme-light) 35%,transparent);
box-shadow:0 0 12px color-mix(in srgb,var(--theme-light) 25%,transparent);
color:#f5ecff;
}
.view,
.view-plan-v6,
.view-plan-v7{
background:
linear-gradient(135deg,var(--theme-deep) 0%,var(--theme-main) 45%,var(--theme-light) 75%,var(--theme-deep) 100%) !important;
border:1px solid rgba(241,228,255,.35);
color:#fff !important;
box-shadow:
inset 0 3px 10px rgba(255,255,255,.16),
inset 0 -10px 20px color-mix(in srgb,var(--theme-deep) 75%,transparent),
0 0 24px color-mix(in srgb,var(--theme-light) 45%,transparent);
overflow:hidden;
position:relative;
}
.view::before,
.view-plan-v6::before,
.view-plan-v7::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:55%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
animation:boyButtonShine 4s infinite;
}
@keyframes boyButtonShine{
0%,65%{left:-120%}
100%{left:160%}
}
.product-card:hover,
.product-card-v6:hover,
.product-card-v7:hover{
transform:translateY(-4px);
box-shadow:
inset 0 0 35px color-mix(in srgb,var(--theme-deep) 55%,transparent),
0 25px 70px color-mix(in srgb,var(--theme-light) 22%,transparent);
}
/* ===== V2.3.4 CATALOG VIEW PLANS FORCE SYNC ===== */
/* Popular catalog cards */
.popularAction,
.product-card button,
.product-card-v6 button,
.product-card-v7 button,
.view-plan-v6,
.view-plan-v7 {
background: linear-gradient(135deg,var(--theme-deep) 0%,var(--theme-main) 45%,var(--theme-light) 70%,var(--theme-deep) 100%) !important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 45%,transparent) !important;
color:#fff !important;
box-shadow:
inset 0 3px 10px rgba(255,255,255,.16),
inset 0 -10px 22px color-mix(in srgb,var(--theme-deep) 75%,transparent),
0 0 22px color-mix(in srgb,var(--theme-light) 55%,transparent) !important;
position:relative;
overflow:hidden;
}
/* crystal shine */
.popularAction::before,
.product-card button::before,
.product-card-v6 button::before,
.product-card-v7 button::before,
.view-plan-v6::before,
.view-plan-v7::before {
content:"";
position:absolute;
top:0;
left:-120%;
width:45%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
transition:.5s;
}
.popularAction:hover::before,
.product-card button:hover::before,
.product-card-v6 button:hover::before,
.product-card-v7 button:hover::before,
.view-plan-v6:hover::before,
.view-plan-v7:hover::before {
left:140%;
}
.popularAction:hover,
.product-card button:hover,
.product-card-v6 button:hover,
.product-card-v7 button:hover,
.view-plan-v6:hover,
.view-plan-v7:hover {
transform:translateY(-3px);
box-shadow:
inset 0 3px 10px rgba(255,255,255,.2),
0 0 35px color-mix(in srgb,var(--theme-light) 75%,transparent) !important;
}
/* ===== V15 POPULAR PRODUCT MOBILE LAYOUT FIX ===== */
@media(max-width:680px){
.popularCard{
display:grid !important;
grid-template-columns:68px minmax(0,1fr) !important;
align-items:start !important;
gap:12px 14px !important;
min-height:0 !important;
padding:20px 18px !important;
}
.popularCard>.popBadge{position:absolute;top:16px;right:16px;max-width:46%;font-size:11px;white-space:nowrap}
.popularCard>img{grid-column:1;grid-row:1 / span 2;width:64px !important;height:64px !important;margin-top:28px}
.popularCard>div{grid-column:2;min-width:0;padding-top:28px}
.popularCard>div b{font-size:20px;line-height:1.18}
.popularCard>div small{font-size:13px;line-height:1.35}
.popularCard>div p{font-size:14px;margin-top:8px}
.popularCard>strong{grid-column:2;display:inline-flex;width:max-content;max-width:100%;font-size:16px !important;color:var(--theme-light);background:color-mix(in srgb,var(--theme-light) 13%,transparent);border:1px solid color-mix(in srgb,var(--theme-light) 25%,transparent);padding:7px 10px;border-radius:10px;margin:0 !important}
.popularCard>em{grid-column:1/-1;width:100%;padding-top:4px !important;font-size:12px;line-height:1.45}
.popularCard>.popularAction{grid-column:1/-1;margin-top:2px !important;padding:14px 16px !important}
}
/* V15.3.7 scheduled operations */
.promoCountdownList{display:grid;gap:9px;margin-top:10px}
.promoCountdownItem{display:grid;gap:3px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.promoCountdownItem.upcoming{border-color:rgba(250,204,21,.28);background:rgba(250,204,21,.06)}
.promoTimer{font-size:12px!important;color:#9ff0bd!important;font-weight:800;letter-spacing:.01em}
.promoTimer.upcoming{color:#ffd17d!important}.promoTimer.noend{color:var(--theme-light)!important}
.maintenanceNotice{max-width:820px;margin:10px auto;padding:11px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(239,68,68,.13),rgba(245,158,11,.10));border:1px solid rgba(248,113,113,.35);color:#ffe2e7;text-align:center;box-shadow:0 12px 35px rgba(127,29,29,.18)}
.maintenanceNotice span{font-weight:900;color:#ffd17d}
.promoExactTime{font-size:10px!important;color:#b9aeca!important;line-height:1.35;letter-spacing:.01em}
.maintenanceNotice small{font-size:11px;color:#dccfe7}
/* === V15.4 Dynamic storefront theme === */
:root{--store-primary:var(--theme-main);--store-accent:var(--theme-accent)}
.productLogoWrap{display:inline-grid;place-items:center}
.hero .btn.primary,.view,.popularAction,.orderBtn,.promoButtons button:not(.promoNav){background:linear-gradient(135deg,var(--store-primary),color-mix(in srgb,var(--store-primary) 70%,var(--store-accent)))!important}
.hero h1 span,.start,.categoryPill{color:var(--store-primary)!important}
[data-button-style="pill"] .btn,[data-button-style="pill"] .view,[data-button-style="pill"] .popularAction,[data-button-style="pill"] .orderBtn{border-radius:999px!important}
[data-button-style="square"] .btn,[data-button-style="square"] .view,[data-button-style="square"] .popularAction,[data-button-style="square"] .orderBtn{border-radius:6px!important}
[data-store-tone="black"] body{background:#020204!important}
[data-store-tone="midnight"] body{background:#05081b!important}
[data-hero-style="gradient"] .hero{background:linear-gradient(145deg,color-mix(in srgb,var(--store-primary) 18%,#090511),#090511 55%,color-mix(in srgb,var(--store-accent) 12%,#090511))!important}
[data-hero-style="glow"] .hero{box-shadow:inset 0 0 120px color-mix(in srgb,var(--store-primary) 24%,transparent)!important}
[data-hero-style="glass"] .heroContent{background:#ffffff08;border:1px solid #ffffff1c;border-radius:26px;padding:24px;backdrop-filter:blur(14px)}
[data-promo-style="gold"] .promoBanner{background:linear-gradient(135deg,#3a2b0fdd,#1c1609dd)!important;border-color:#a87d2f!important;box-shadow:0 18px 60px #d49b2b2c!important}
[data-promo-style="red"] .promoBanner{background:linear-gradient(135deg,#3a1018dd,#19090ddd)!important;border-color:#a53b50!important;box-shadow:0 18px 60px #df3b5d25!important}
[data-promo-style="green"] .promoBanner{background:linear-gradient(135deg,#0e3324dd,#081b14dd)!important;border-color:#327d5d!important;box-shadow:0 18px 60px #2fbe7e22!important}
.storeEffectLayer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}.storeParticle{position:absolute;top:-40px;opacity:.72;animation:storeParticleFall linear infinite;filter:drop-shadow(0 0 6px currentColor)}.storeParticle.snow{color:#fff}.storeParticle.fire{color:#ff7a1a;text-shadow:0 0 10px #ff3d00}.storeParticle.sparkle{color:var(--store-accent);animation-name:storeParticleFall,storeSparkle}.storeParticle.confetti{color:var(--particle-color);transform:rotate(20deg)}
@keyframes storeParticleFall{to{transform:translateY(115vh) rotate(220deg)}}@keyframes storeSparkle{50%{opacity:.25;filter:drop-shadow(0 0 2px currentColor)}}
#snowLayer.storeEffectLayer{display:block!important}
.promoCarouselTop{display:flex;align-items:center;justify-content:space-between;gap:10px}.promoCounter{font-size:11px!important;color:#aeb2c5!important;border:1px solid #ffffff24;border-radius:999px;padding:4px 7px}.promoCarouselSlide{display:grid;gap:4px;margin-top:7px;min-height:54px}.promoCarouselSlide>span{font-size:14px}.promoCarouselDots{display:flex;gap:5px;margin-top:9px}.promoCarouselDots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#ffffff38}.promoCarouselDots button.active{background:var(--store-primary);box-shadow:0 0 8px var(--store-primary)}.promoButtons{display:flex;gap:7px;align-items:center}.promoButtons .promoNav{width:36px;height:36px;padding:0!important;border-radius:50%!important;background:#ffffff12!important;border:1px solid #ffffff25!important;color:#fff;font-size:23px;line-height:1}.promoButtons button{cursor:pointer}
@media(max-width:700px){.promoButtons{display:flex!important;justify-content:center}.promoButtons button:not(.promoNav){flex:1}.promoCarouselSlide{min-height:72px}}
/* === V15.5 Theme Engine V2 + Smart Announcement === */
:root{--store-primary:var(--theme-main);--store-accent:var(--theme-accent)}
/* Semantic palette: selaras, bukan semua tombol identik. */
.brand span,.hero h1 span{
background:linear-gradient(135deg,var(--theme-main) 0%,var(--theme-light) 35%,var(--theme-highlight) 50%,var(--theme-accent) 68%,var(--theme-deep) 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--theme-glow) 55%,transparent))!important;
}
.hero .btn.primary,.primary,.orderBtn,.payBtn{
background:linear-gradient(135deg,var(--theme-deep) 0%,var(--theme-main) 22%,var(--theme-light) 48%,var(--theme-highlight) 58%,var(--theme-accent) 75%,var(--theme-deep) 100%)!important;
color:#160b28!important;box-shadow:inset 0 -10px 25px color-mix(in srgb,var(--theme-deep) 45%,transparent),0 0 35px color-mix(in srgb,var(--theme-glow) 62%,transparent)!important;
}
.product-card .view,.popularAction,.promoButtons button:not(.promoNav){
background:linear-gradient(135deg,var(--theme-deep),var(--theme-main) 34%,var(--theme-light) 68%,var(--theme-accent))!important;
color:#fff!important;box-shadow:0 12px 30px color-mix(in srgb,var(--theme-glow) 28%,transparent)!important;
}
.hero .btn.ghost,.ghost,.secondary{background:linear-gradient(135deg,color-mix(in srgb,var(--theme-light) 13%,transparent),color-mix(in srgb,var(--theme-deep) 68%,transparent))!important;border-color:color-mix(in srgb,var(--theme-light) 32%,transparent)!important;color:#fff!important}
.menu,.musicToggle,.floatWA{border-color:color-mix(in srgb,var(--theme-light) 42%,transparent)!important;box-shadow:0 0 25px color-mix(in srgb,var(--theme-glow) 34%,transparent)!important}
.menu{background:linear-gradient(135deg,color-mix(in srgb,var(--theme-deep) 88%,#0b0711),var(--theme-main),var(--theme-light))!important}
.start,.categoryPill,.plan.paySelect b{color:var(--theme-light)!important}.filters button.active{background:linear-gradient(135deg,var(--theme-highlight),var(--theme-light),var(--theme-main))!important}
.heroGlow{background:radial-gradient(circle,color-mix(in srgb,var(--theme-highlight) 50%,transparent) 0%,color-mix(in srgb,var(--theme-accent) 32%,transparent) 28%,color-mix(in srgb,var(--theme-main) 18%,transparent) 48%,transparent 72%)!important}
[data-store-tone="warm"] body{background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--theme-accent) 15%,transparent),transparent 35%),#100706!important}
[data-store-tone="cool"] body{background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--theme-accent) 15%,transparent),transparent 35%),#030b12!important}
[data-promo-style="theme"] .promoBanner{background:linear-gradient(135deg,color-mix(in srgb,var(--theme-deep) 80%,#080611),color-mix(in srgb,var(--theme-main) 26%,#080611))!important;border-color:color-mix(in srgb,var(--theme-light) 34%,transparent)!important;box-shadow:0 18px 60px color-mix(in srgb,var(--theme-glow) 20%,transparent)!important}
[data-promo-style="glass"] .promoBanner{background:color-mix(in srgb,#0b0813 80%,transparent)!important;backdrop-filter:blur(18px);border-color:color-mix(in srgb,var(--theme-light) 26%,transparent)!important}
.storeParticle{color:var(--particle-color,var(--theme-light))}.storeParticle.petals,.storeParticle.stars,.storeParticle.bubbles{color:var(--theme-accent)}.storeParticle.embers,.storeParticle.fire{color:var(--particle-color,#ff7a1a)}
@media (prefers-reduced-motion:reduce){.storeParticle,.smartAnnouncement{animation:none!important}.annTicker{transform:none!important;animation:none!important}}
.smartAnnouncement{position:relative;z-index:14;max-width:1180px;margin:10px auto;padding:11px 42px 11px 14px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--theme-deep) 78%,#090611),color-mix(in srgb,var(--theme-main) 22%,#090611));border:1px solid color-mix(in srgb,var(--theme-light) 32%,transparent);box-shadow:0 12px 40px color-mix(in srgb,var(--theme-glow) 16%,transparent);color:#fff;overflow:hidden}.annInner{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;text-align:center}.annIcon{font-size:18px}.annText{font-weight:750}.annCountdown{font-size:11px;font-weight:900;color:var(--theme-highlight);border:1px solid color-mix(in srgb,var(--theme-light) 28%,transparent);border-radius:999px;padding:4px 7px}.annClose{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:#ffffff12;color:#fff;font-size:20px;cursor:pointer}.ann-warning{border-color:#d59c39}.ann-maintenance{border-color:#d95863}.ann-promo,.ann-event{border-color:color-mix(in srgb,var(--theme-light) 52%,transparent)}
.anim-glow{animation:annGlow 2.8s ease-in-out infinite}.anim-slide{animation:annSlide .55s ease-out both}.anim-pulse .annIcon{animation:annPulse 1.2s ease-in-out infinite}.anim-shimmer:before{content:"";position:absolute;inset:-60% auto -60% -30%;width:18%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#ffffff50,transparent);animation:annShimmer 3.2s linear infinite}.annTicker{display:flex;width:max-content;gap:60px;animation:annTicker 18s linear infinite}.annTicker>span{display:inline-flex;gap:10px;align-items:center;white-space:nowrap}.intensity-soft.anim-glow{animation-duration:4s}.intensity-energetic.anim-glow{animation-duration:1.6s}.intensity-soft .annTicker{animation-duration:26s}.intensity-energetic .annTicker{animation-duration:12s}
@keyframes annGlow{50%{box-shadow:0 12px 48px color-mix(in srgb,var(--theme-glow) 38%,transparent)}}@keyframes annSlide{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}@keyframes annPulse{50%{transform:scale(1.18);filter:drop-shadow(0 0 8px var(--theme-glow))}}@keyframes annShimmer{to{left:125%}}@keyframes annTicker{to{transform:translateX(calc(-50% - 30px))}}
.plan.paySelect:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.35)}
/* === V15.5.1 BOY Original 2.0 Visual Consistency Patch === */
:root{--store-primary:var(--theme-main);--store-accent:var(--theme-accent)}
/* Signature family: purple → lilac → cyan. Selaras, bukan identik. */
.brand span,.hero h1 span{
background:linear-gradient(100deg,var(--theme-main) 0%,var(--theme-light) 42%,var(--theme-accent) 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
filter:drop-shadow(0 0 12px color-mix(in srgb,var(--theme-glow) 42%,transparent))!important;
}
.hero .btn.primary,.primary,.orderBtn,.payBtn,
.product-card .view,.popularAction,.promoButtons button:not(.promoNav){
background:linear-gradient(110deg,var(--theme-deep) 0%,var(--theme-main) 30%,var(--theme-light) 58%,var(--theme-accent) 100%)!important;
color:#fff!important;
text-shadow:0 1px 3px rgba(0,0,0,.32)!important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 26%,transparent)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 34px color-mix(in srgb,var(--theme-glow) 30%,transparent),0 0 24px color-mix(in srgb,var(--theme-accent) 18%,transparent)!important;
}
.hero .btn.primary:hover,.primary:hover,.orderBtn:hover,.payBtn:hover,
.product-card .view:hover,.popularAction:hover,.promoButtons button:not(.promoNav):hover{
filter:brightness(1.06) saturate(1.05);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 40px color-mix(in srgb,var(--theme-glow) 38%,transparent),0 0 30px color-mix(in srgb,var(--theme-accent) 24%,transparent)!important;
}
.hero .btn.ghost,.ghost,.secondary{
background:linear-gradient(120deg,color-mix(in srgb,var(--theme-deep) 72%,#090611),color-mix(in srgb,var(--theme-main) 34%,#090611),color-mix(in srgb,var(--theme-accent) 12%,#090611))!important;
border:1px solid color-mix(in srgb,var(--theme-light) 34%,transparent)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px color-mix(in srgb,var(--theme-main) 18%,transparent)!important;
}
.menu,.musicToggle,.floatWA{
background:linear-gradient(135deg,color-mix(in srgb,var(--theme-deep) 88%,#090611),var(--theme-main) 48%,color-mix(in srgb,var(--theme-accent) 78%,var(--theme-light)))!important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 38%,transparent)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 28px color-mix(in srgb,var(--theme-glow) 32%,transparent),0 0 18px color-mix(in srgb,var(--theme-accent) 16%,transparent)!important;
}
.start,.categoryPill,.plan.paySelect b{color:var(--theme-light)!important}
.productFeatureBadge,.popBadge{
border-color:color-mix(in srgb,var(--theme-accent) 28%,var(--theme-light))!important;
box-shadow:0 8px 22px color-mix(in srgb,var(--theme-main) 18%,transparent)!important;
}
.filters button.active{
background:linear-gradient(105deg,var(--theme-highlight),var(--theme-light) 46%,var(--theme-accent))!important;
color:#160b28!important;
}
.promoCarouselDots button.active{
background:var(--theme-accent)!important;
box-shadow:0 0 10px var(--theme-accent)!important;
}
[data-promo-style="theme"] .promoBanner{
background:linear-gradient(135deg,color-mix(in srgb,var(--theme-deep) 82%,#080611),color-mix(in srgb,var(--theme-main) 34%,#080611),color-mix(in srgb,var(--theme-accent) 12%,#080611))!important;
}
.heroGlow{
background:radial-gradient(circle,color-mix(in srgb,var(--theme-accent) 28%,transparent) 0%,color-mix(in srgb,var(--theme-light) 25%,transparent) 24%,color-mix(in srgb,var(--theme-main) 18%,transparent) 48%,transparent 72%)!important;
}
/* Anchor/sticky-header safety */
#catalog,#payment,#cara-order,#warranty,#faq,.wrap[id],section[id]{scroll-margin-top:104px!important}
@media(max-width:780px){#catalog,#payment,#cara-order,#warranty,#faq,.wrap[id],section[id]{scroll-margin-top:84px!important}}
/* Floating controls: keep out of content edge on mobile while remaining reachable. */
@media(max-width:680px){
.musicToggle,.floatWA{right:12px!important;width:50px!important;height:50px!important;border-radius:17px!important}
.musicToggle{bottom:122px!important}
.floatWA{bottom:54px!important}
}
@media(max-width:420px){
.musicToggle,.floatWA{right:10px!important;width:48px!important;height:48px!important}
.musicToggle{bottom:116px!important}
.floatWA{bottom:56px!important}
}
/* === V15.5.2 Floating Action Dock — symmetric SVG controls === */
.floatingDock{
position:fixed;
z-index:9000;
right:max(18px,env(safe-area-inset-right));
bottom:calc(36px + env(safe-area-inset-bottom));
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
pointer-events:none;
}
.floatingDock .musicToggle,
.floatingDock .floatWA{
position:relative!important;
inset:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
top:auto!important;
width:58px!important;
height:58px!important;
min-width:58px!important;
min-height:58px!important;
padding:0!important;
margin:0!important;
border-radius:20px!important;
display:grid!important;
place-items:center!important;
line-height:1!important;
font-size:0!important;
overflow:hidden;
isolation:isolate;
pointer-events:auto;
appearance:none;
-webkit-appearance:none;
text-decoration:none;
background:linear-gradient(135deg,color-mix(in srgb,var(--theme-deep) 88%,#090611),var(--theme-main) 48%,color-mix(in srgb,var(--theme-accent) 78%,var(--theme-light)))!important;
border:1px solid color-mix(in srgb,var(--theme-highlight) 42%,transparent)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 28px color-mix(in srgb,var(--theme-glow) 34%,transparent),0 0 18px color-mix(in srgb,var(--theme-accent) 18%,transparent)!important;
transform:none!important;
transition:transform .2s ease,filter .2s ease,box-shadow .25s ease!important;
}
.floatingDock .musicToggle::before,
.floatingDock .floatWA::before{
content:"";
position:absolute;
inset:1px;
border-radius:18px;
background:linear-gradient(155deg,rgba(255,255,255,.18),transparent 34%,transparent 68%,rgba(255,255,255,.06));
pointer-events:none;
z-index:-1;
}
.floatingDock .musicToggle:hover,
.floatingDock .floatWA:hover,
.floatingDock .musicToggle:focus-visible,
.floatingDock .floatWA:focus-visible{
transform:translateY(-2px) scale(1.025)!important;
filter:brightness(1.07);
box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 34px color-mix(in srgb,var(--theme-glow) 42%,transparent),0 0 24px color-mix(in srgb,var(--theme-accent) 24%,transparent)!important;
outline:none;
}
.floatingDock .fabIcon{
width:27px;
height:27px;
display:grid;
place-items:center;
position:relative;
z-index:2;
transform:none;
transform-origin:center;
transition:opacity .18s ease,transform .2s ease;
}
.floatingDock .fabIcon svg{
display:block;
width:100%;
height:100%;
overflow:visible;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
.floatingDock .musicGlyph svg circle{fill:currentColor;stroke:none}
.floatingDock .chatGlyph svg circle{fill:currentColor;stroke:none}
.floatingDock .musicEqualizer{
position:absolute;
inset:0;
z-index:3;
display:flex;
align-items:center;
justify-content:center;
gap:3px;
opacity:0;
transform:scale(.9);
pointer-events:none;
transition:opacity .18s ease,transform .18s ease;
}
.floatingDock .musicEqualizer i{
display:block;
width:3px;
height:13px;
border-radius:99px;
background:currentColor;
box-shadow:0 0 8px color-mix(in srgb,var(--theme-highlight) 75%,transparent);
transform-origin:center;
}
.floatingDock .musicEqualizer i:nth-child(2){height:20px}
.floatingDock .musicEqualizer i:nth-child(3){height:9px}
.floatingDock .musicToggle.playing{animation:none!important}
.floatingDock .musicToggle.playing .musicGlyph{opacity:.14;transform:scale(.82)}
.floatingDock .musicToggle.playing .musicEqualizer{opacity:1;transform:scale(1)}
.floatingDock .musicToggle.playing .musicEqualizer i:nth-child(1){animation:boyEq1 .8s ease-in-out infinite alternate}
.floatingDock .musicToggle.playing .musicEqualizer i:nth-child(2){animation:boyEq2 .65s ease-in-out infinite alternate}
.floatingDock .musicToggle.playing .musicEqualizer i:nth-child(3){animation:boyEq3 .9s ease-in-out infinite alternate}
@keyframes boyEq1{to{height:22px}}
@keyframes boyEq2{to{height:10px}}
@keyframes boyEq3{to{height:19px}}
.floatingDock .musicToggle[hidden]{display:none!important}
/* Keep the three public controls in one visual family without changing header layout. */
.menu{
border-radius:20px!important;
line-height:1!important;
text-align:center!important;
}
@media(max-width:680px){
.floatingDock{
right:max(12px,env(safe-area-inset-right));
bottom:calc(42px + env(safe-area-inset-bottom));
gap:11px;
}
.floatingDock .musicToggle,
.floatingDock .floatWA{
width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;border-radius:18px!important;
}
.floatingDock .musicToggle::before,.floatingDock .floatWA::before{border-radius:16px}
.floatingDock .fabIcon{width:25px;height:25px}
}
@media(max-width:420px){
.floatingDock{right:max(10px,env(safe-area-inset-right));bottom:calc(52px + env(safe-area-inset-bottom));gap:10px}
.floatingDock .musicToggle,
.floatingDock .floatWA{
width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;border-radius:17px!important;
}
.floatingDock .fabIcon{width:23px;height:23px}
}
@media(prefers-reduced-motion:reduce){
.floatingDock .musicEqualizer i{animation:none!important}
.floatingDock .musicToggle,.floatingDock .floatWA{transition:none!important}
}
/* === V15.5.3 Music Icon Optical Symmetry ===
The old V15.5.2 double-note SVG was mathematically centered but visually
asymmetric. Use a five-bar waveform with mirrored geometry instead. */
.floatingDock .musicGlyph .symmetricWaveIcon{
width:24px!important;
height:24px!important;
overflow:visible;
}
.floatingDock .musicGlyph .symmetricWaveIcon path{
fill:none!important;
stroke:currentColor!important;
stroke-width:2.15!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.floatingDock .musicEqualizer{
gap:2.5px!important;
}
.floatingDock .musicEqualizer i{
width:2.5px!important;
height:8px!important;
}
.floatingDock .musicEqualizer i:nth-child(2),
.floatingDock .musicEqualizer i:nth-child(4){height:14px!important}
.floatingDock .musicEqualizer i:nth-child(3){height:20px!important}
.floatingDock .musicEqualizer i:nth-child(1),
.floatingDock .musicEqualizer i:nth-child(5){height:8px!important}
/* mirrored animation: left/right pairs always move together */
.floatingDock .musicToggle.playing .musicEqualizer i:nth-child(1),
.floatingDock .musicToggle.playing .musicEqualizer i:nth-child(5){animation:boyEqOuter .72s ease-in-out infinite alternate!important}
.floatingDock .musicToggle.playing .musicEqualizer i:nth-child(2),
.floatingDock .musicToggle.playing .musicEqualizer i:nth-child(4){animation:boyEqInner .62s ease-in-out infinite alternate!important}
.floatingDock .musicToggle.playing .musicEqualizer i:nth-child(3){animation:boyEqCenter .82s ease-in-out infinite alternate!important}
@keyframes boyEqOuter{from{height:7px}to{height:13px}}
@keyframes boyEqInner{from{height:12px}to{height:20px}}
@keyframes boyEqCenter{from{height:18px}to{height:23px}}
/* === V15.5.4 THEME TOKEN CLEANUP — single source of truth ===
Component styles must never own BOY brand hex values. Presets/config own colors;
components consume semantic tokens only. */
:root{
--theme-deep:#4b1f7a;
--theme-main:#8b5cf6;
--theme-light:#caa7ff;
--theme-highlight:#f5efff;
--theme-accent:#63d7ff;
--theme-glow:#9d8cff;
--store-primary:var(--theme-main);
--store-accent:var(--theme-accent);
--boy-cta:linear-gradient(110deg,var(--theme-deep) 0%,var(--theme-main) 30%,var(--theme-light) 58%,var(--theme-accent) 100%);
--boy-cta-soft:linear-gradient(120deg,color-mix(in srgb,var(--theme-deep) 72%,#090611),color-mix(in srgb,var(--theme-main) 34%,#090611),color-mix(in srgb,var(--theme-accent) 12%,#090611));
--boy-icon:linear-gradient(135deg,color-mix(in srgb,var(--theme-deep) 88%,#090611),var(--theme-main) 48%,color-mix(in srgb,var(--theme-accent) 78%,var(--theme-light)));
--boy-border:color-mix(in srgb,var(--theme-light) 34%,transparent);
--boy-border-strong:color-mix(in srgb,var(--theme-highlight) 42%,transparent);
--boy-glow:color-mix(in srgb,var(--theme-glow) 32%,transparent);
--boy-accent-glow:color-mix(in srgb,var(--theme-accent) 20%,transparent);
--boy-surface-tint:color-mix(in srgb,var(--theme-deep) 18%,transparent);
}
/* Primary actions */
.hero .btn.primary,.primary,.orderBtn,.payBtn,
.product-card .view,.popularAction,.promoButtons button:not(.promoNav),
.premiumOrderBox button,.qrisActions button,.close{
background:var(--boy-cta)!important;
border-color:var(--boy-border-strong)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 12px 34px var(--boy-glow),0 0 24px var(--boy-accent-glow)!important;
}
.hero .btn.primary:hover,.primary:hover,.orderBtn:hover,.payBtn:hover,
.product-card .view:hover,.popularAction:hover,.promoButtons button:not(.promoNav):hover,
.premiumOrderBox button:hover,.qrisActions button:hover,.close:hover{
filter:brightness(1.06) saturate(1.05);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 40px color-mix(in srgb,var(--theme-glow) 38%,transparent),0 0 30px color-mix(in srgb,var(--theme-accent) 24%,transparent)!important;
}
/* Secondary actions */
.hero .btn.ghost,.ghost,.secondary,.promoButtons .promoNav{
background:var(--boy-cta-soft)!important;
border-color:var(--boy-border)!important;
color:#fff!important;
}
/* Public icon controls */
.menu,.musicToggle,.floatWA,.floatingDock .musicToggle,.floatingDock .floatWA{
background:var(--boy-icon)!important;
border-color:var(--boy-border-strong)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 28px var(--boy-glow),0 0 18px var(--boy-accent-glow)!important;
}
/* Theme-sensitive copy, badges and focus states */
.hero h1 span,.brand span{background:linear-gradient(100deg,var(--theme-main),var(--theme-light) 46%,var(--theme-accent))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.start,.categoryPill,.plan.paySelect b,.catalogMeta span,.product-card .start,.productFallback{color:var(--theme-light)!important}
.search:focus-within,.paySelect:hover{border-color:var(--theme-light)!important;box-shadow:0 0 30px color-mix(in srgb,var(--theme-main) 16%,transparent)!important}
.categoryPill,.productFeatureBadge,.popBadge,.promoProductBadge,.stockBadge{
border-color:color-mix(in srgb,var(--theme-light) 24%,transparent)!important;
background:color-mix(in srgb,var(--theme-main) 12%,transparent)!important;
color:var(--theme-highlight)!important;
}
.popularCard>strong{
color:var(--theme-light)!important;
background:color-mix(in srgb,var(--theme-main) 13%,transparent)!important;
border-color:color-mix(in srgb,var(--theme-light) 25%,transparent)!important;
}
.filters button.active,#cara-order .orderSteps b{
background:linear-gradient(105deg,var(--theme-highlight),var(--theme-light) 46%,var(--theme-accent))!important;
color:#160b28!important;
}
.promoCarouselDots button.active{background:var(--theme-accent)!important;box-shadow:0 0 10px var(--theme-accent)!important}
/* Cards keep dark glass but their brand edge/glow follows the selected preset. */
.product-card,.popularCard,.promoBanner,.featureItem,.orderSteps>div,.faqGrid details{
border-color:color-mix(in srgb,var(--theme-light) 18%,rgba(255,255,255,.08))!important;
}
.product-card:hover,.popularCard:hover{
border-color:color-mix(in srgb,var(--theme-light) 32%,transparent)!important;
box-shadow:0 20px 58px color-mix(in srgb,var(--theme-glow) 12%,transparent)!important;
}
/* Dock glass overlay also tokenized; no independent accent. */
.floatingDock .musicToggle::before,.floatingDock .floatWA::before{
background:linear-gradient(155deg,color-mix(in srgb,var(--theme-highlight) 18%,transparent),transparent 34%,transparent 68%,color-mix(in srgb,var(--theme-light) 6%,transparent))!important;
}
/* === V15.5.5 Music Control — optical symmetry final ===
Keep one mirror-symmetric headphone glyph in both states. Playing state is
communicated by a centered glow pulse instead of swapping to an equalizer. */
.floatingDock .musicToggle .musicEqualizer{display:none!important}
.floatingDock .musicToggle .musicGlyph{
opacity:1!important;
transform:none!important;
}
.floatingDock .musicGlyph .symmetricHeadphoneIcon{
width:25px!important;
height:25px!important;
display:block!important;
overflow:visible!important;
}
.floatingDock .musicGlyph .symmetricHeadphoneIcon path,
.floatingDock .musicGlyph .symmetricHeadphoneIcon rect{
fill:none!important;
stroke:currentColor!important;
stroke-width:1.9!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
vector-effect:non-scaling-stroke;
}
.floatingDock .musicToggle.playing{
animation:boyMusicCenteredPulse 1.8s ease-in-out infinite!important;
}
@keyframes boyMusicCenteredPulse{
0%,100%{
filter:brightness(1);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 24px color-mix(in srgb,var(--theme-glow) 28%,transparent),0 0 14px color-mix(in srgb,var(--theme-accent) 16%,transparent)!important;
}
50%{
filter:brightness(1.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 38px color-mix(in srgb,var(--theme-glow) 48%,transparent),0 0 24px color-mix(in srgb,var(--theme-accent) 28%,transparent)!important;
}
}
@media(prefers-reduced-motion:reduce){
.floatingDock .musicToggle.playing{animation:none!important}
}
/* === V15.5.6 MUSIC ICON RESTORE ===
Deliberately restores the original V15 music glyph instead of inventing a
new SVG. The modern dock shell/theme tokens remain unchanged. */
.floatingDock .musicToggle .fabIcon,
.floatingDock .musicToggle .musicGlyph,
.floatingDock .musicToggle .musicEqualizer{display:none!important}
.floatingDock .musicToggle{
font-size:0!important;
display:grid!important;
place-items:center!important;
}
.floatingDock .musicToggle .legacyMusicNote{
display:block!important;
width:1em!important;
height:1em!important;
line-height:1!important;
font-family:Arial,"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif!important;
font-size:26px!important;
font-weight:400!important;
text-align:center!important;
color:currentColor!important;
transform:translateY(-.5px)!important;
pointer-events:none!important;
}
@media(max-width:680px){
.floatingDock .musicToggle .legacyMusicNote{font-size:25px!important}
}
@media(max-width:420px){
.floatingDock .musicToggle .legacyMusicNote{font-size:23px!important}
}
/* === V15.5.7 FLOATING DOCK AXIS LOCK ===
Root cause: legacy #musicToggle fixed/right/bottom !important rules have ID
specificity and can beat class-only dock overrides. WhatsApp does not have the
same ID rule, so the two controls can render on different horizontal axes.
Lock both controls to ONE parent grid axis with an ID-specific override. */
.floatingDock{
--boy-dock-size:58px;
--boy-dock-gap:12px;
position:fixed!important;
right:max(18px,env(safe-area-inset-right))!important;
bottom:calc(36px + env(safe-area-inset-bottom))!important;
display:grid!important;
grid-template-columns:var(--boy-dock-size)!important;
grid-auto-rows:var(--boy-dock-size)!important;
justify-items:center!important;
align-items:center!important;
gap:var(--boy-dock-gap)!important;
}
.floatingDock #musicToggle,
.floatingDock .floatWA{
position:relative!important;
inset:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
width:var(--boy-dock-size)!important;
height:var(--boy-dock-size)!important;
min-width:var(--boy-dock-size)!important;
min-height:var(--boy-dock-size)!important;
max-width:var(--boy-dock-size)!important;
max-height:var(--boy-dock-size)!important;
margin:0!important;
padding:0!important;
align-self:center!important;
justify-self:center!important;
transform:none!important;
}
@media(max-width:680px){
.floatingDock{
--boy-dock-size:54px;
--boy-dock-gap:11px;
right:max(12px,env(safe-area-inset-right))!important;
bottom:calc(42px + env(safe-area-inset-bottom))!important;
}
}
@media(max-width:420px){
.floatingDock{
--boy-dock-size:50px;
--boy-dock-gap:10px;
right:max(10px,env(safe-area-inset-right))!important;
bottom:calc(52px + env(safe-area-inset-bottom))!important;
}
}
/* === V15.5.8 ANIMATED MUSIC CONTROL ===
IMPORTANT: visual-only patch. V15.5.7 floatingDock positioning/axis lock above
is intentionally untouched. The icon animates inside the existing centered shell. */
.floatingDock #musicToggle .legacyMusicNote,
.floatingDock #musicToggle .fabIcon,
.floatingDock #musicToggle .musicGlyph,
.floatingDock #musicToggle .musicEqualizer{
display:none!important;
}
.floatingDock #musicToggle{
font-size:0!important;
display:grid!important;
place-items:center!important;
}
.floatingDock #musicToggle .animatedMusicBars{
width:26px!important;
height:24px!important;
display:grid!important;
grid-template-columns:repeat(5,3px)!important;
justify-content:center!important;
align-items:center!important;
gap:2px!important;
margin:0!important;
padding:0!important;
pointer-events:none!important;
color:var(--theme-highlight)!important;
filter:drop-shadow(0 0 6px color-mix(in srgb,var(--theme-glow) 54%,transparent))!important;
}
.floatingDock #musicToggle .animatedMusicBars i{
display:block!important;
width:3px!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:999px!important;
background:linear-gradient(180deg,var(--theme-highlight),var(--theme-light) 55%,var(--theme-accent))!important;
transform-origin:center!important;
}
/* Mirror-symmetric idle waveform. */
.floatingDock #musicToggle .animatedMusicBars i:nth-child(1),
.floatingDock #musicToggle .animatedMusicBars i:nth-child(5){height:8px!important}
.floatingDock #musicToggle .animatedMusicBars i:nth-child(2),
.floatingDock #musicToggle .animatedMusicBars i:nth-child(4){height:14px!important}
.floatingDock #musicToggle .animatedMusicBars i:nth-child(3){height:20px!important}
/* Paired bars share the exact same animation so every frame remains symmetric. */
.floatingDock #musicToggle.playing .animatedMusicBars i:nth-child(1),
.floatingDock #musicToggle.playing .animatedMusicBars i:nth-child(5){
animation:boyDockEqOuter .72s ease-in-out infinite alternate!important;
}
.floatingDock #musicToggle.playing .animatedMusicBars i:nth-child(2),
.floatingDock #musicToggle.playing .animatedMusicBars i:nth-child(4){
animation:boyDockEqInner .58s ease-in-out infinite alternate!important;
}
.floatingDock #musicToggle.playing .animatedMusicBars i:nth-child(3){
animation:boyDockEqCenter .82s ease-in-out infinite alternate!important;
}
@keyframes boyDockEqOuter{from{height:7px}to{height:17px}}
@keyframes boyDockEqInner{from{height:11px}to{height:22px}}
@keyframes boyDockEqCenter{from{height:15px}to{height:24px}}
/* Keep the shell fixed on its V15.5.7 axis; only the contents/glow move. */
.floatingDock #musicToggle.playing{
transform:none!important;
animation:boyDockMusicGlow 1.7s ease-in-out infinite!important;
}
@keyframes boyDockMusicGlow{
0%,100%{filter:brightness(1)}
50%{filter:brightness(1.10)}
}
@media(max-width:420px){
.floatingDock #musicToggle .animatedMusicBars{width:24px!important;height:22px!important;grid-template-columns:repeat(5,3px)!important;gap:2px!important}
}
@media(prefers-reduced-motion:reduce){
.floatingDock #musicToggle.playing,
.floatingDock #musicToggle.playing .animatedMusicBars i{animation:none!important}
}
/* === V15.5.9 PLAY -> EQUALIZER STATE ANIMATION ===
V15.5.7 axis lock stays untouched. Only the icon state is refined:
paused = animated Play glyph; playing = animated equalizer. */
.floatingDock #musicToggle{
position:relative!important;
overflow:hidden!important;
}
.floatingDock #musicToggle .musicPlayGlyph,
.floatingDock #musicToggle .animatedMusicBars{
grid-area:1/1!important;
align-self:center!important;
justify-self:center!important;
transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1)!important;
}
.floatingDock #musicToggle .musicPlayGlyph{
width:25px!important;
height:25px!important;
display:grid!important;
place-items:center!important;
opacity:1!important;
transform:translateX(1px) scale(1)!important;
color:var(--theme-highlight)!important;
filter:drop-shadow(0 0 7px color-mix(in srgb,var(--theme-glow) 52%,transparent))!important;
animation:boyPlayBreathe 1.75s ease-in-out infinite!important;
pointer-events:none!important;
}
.floatingDock #musicToggle .musicPlayGlyph svg{
width:100%!important;
height:100%!important;
display:block!important;
overflow:visible!important;
}
.floatingDock #musicToggle .musicPlayGlyph path{
fill:currentColor!important;
}
/* Hide the equalizer while paused, but keep it centered and ready to transition. */
.floatingDock #musicToggle:not(.playing) .animatedMusicBars{
opacity:0!important;
transform:scale(.64)!important;
}
/* Playing: Play fades away and the equalizer takes its exact center slot. */
.floatingDock #musicToggle.playing .musicPlayGlyph{
opacity:0!important;
transform:translateX(1px) scale(.58)!important;
animation:none!important;
}
.floatingDock #musicToggle.playing .animatedMusicBars{
opacity:1!important;
transform:scale(1)!important;
}
@keyframes boyPlayBreathe{
0%,100%{transform:translateX(1px) scale(.94);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--theme-glow) 38%,transparent))}
50%{transform:translateX(1px) scale(1.06);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--theme-accent) 58%,transparent))}
}
@media(max-width:420px){
.floatingDock #musicToggle .musicPlayGlyph{width:23px!important;height:23px!important}
}
@media(prefers-reduced-motion:reduce){
.floatingDock #musicToggle .musicPlayGlyph{animation:none!important}
.floatingDock #musicToggle .musicPlayGlyph,
.floatingDock #musicToggle .animatedMusicBars{transition:none!important}
}
/* V15.5.12 final publish: prevent default-theme flash while public config resolves */
html.theme-loading body{opacity:0}
body{transition:opacity .16s ease}
.themePreviewBadge{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:100000;padding:9px 14px;border-radius:999px;background:#111827eF;border:1px solid rgba(255,255,255,.24);box-shadow:0 12px 34px rgba(0,0,0,.36);color:#fff;font-size:12px;font-weight:900;letter-spacing:.02em;pointer-events:none;backdrop-filter:blur(10px)}
@media(prefers-reduced-motion:reduce){body{transition:none!important}}
/* V15.6.4 payment method chooser */
.paymentChooser{margin:14px 0;padding:14px;border:1px solid color-mix(in srgb,var(--theme-highlight) 18%,transparent);border-radius:18px;background:rgba(255,255,255,.035)}.paymentChooser>strong{display:block;font-size:17px;margin-bottom:4px}.paymentChooser>p{margin:0 0 10px;color:#9b93a8;font-size:12px}.paymentChoice{display:block;width:100%;text-align:left;margin:8px 0;padding:13px 14px;border:1px solid color-mix(in srgb,var(--theme-light) 24%,transparent);border-radius:14px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer}.paymentChoice b{display:block;font-size:15px}.paymentChoice span{display:block;margin-top:4px;color:#9f96b3;font-size:12px}.paymentChoice:hover{border-color:var(--theme-light);background:color-mix(in srgb,var(--theme-main) 10%,transparent)}
/* V15.6.5 — product short/detail description */
.productDetailDescription{margin:10px 0 15px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--theme-highlight) 22%,transparent);border-radius:14px;background:color-mix(in srgb,var(--theme-light) 7%,transparent);color:#d8d0e4;font-size:13px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
@media(max-width:520px){.productDetailDescription{padding:11px 12px;font-size:12.5px;margin:9px 0 13px}}
/* V15.7.3 Customer Center + catalog loading */
.customerCenterCopy{max-width:430px}.customerCenterActions{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px;min-width:min(520px,50vw)}.centerAction{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'icon title' 'icon sub';column-gap:10px;align-items:center;text-decoration:none;padding:14px 15px;border:1px solid color-mix(in srgb,var(--theme-light) 24%,#1f2634);border-radius:16px;background:rgba(255,255,255,.035);transition:.2s}.centerAction:hover{transform:translateY(-2px);border-color:var(--theme-light);background:color-mix(in srgb,var(--theme-light) 8%,transparent)}.centerAction>span{grid-area:icon;font-size:22px}.centerAction>b{grid-area:title;font-size:14px}.centerAction>small{grid-area:sub;font-size:10px;letter-spacing:.03em;color:#9ca3b5}.catalogRetry{margin-top:14px;border:0;border-radius:999px;padding:10px 15px;background:linear-gradient(90deg,var(--theme-main),var(--theme-accent));color:#fff;font-weight:800;cursor:pointer}.catalogLoading{animation:catalogPulse 1.3s ease-in-out infinite alternate}@keyframes catalogPulse{from{opacity:.58}to{opacity:1}}@media(max-width:780px){.customerCenterActions{margin-top:20px;min-width:0;width:100%;grid-template-columns:1fr 1fr}.customerCenterCopy{max-width:none}}@media(max-width:480px){.customerCenterActions{grid-template-columns:1fr}.centerAction{padding:13px 14px}}
/* V15.9.0 Store Builder layout presets */
.builderPreviewBadge{position:fixed;z-index:99998;left:50%;bottom:14px;transform:translateX(-50%);padding:9px 13px;border-radius:999px;background:#160d22e8;border:1px solid color-mix(in srgb,var(--theme-light) 45%,transparent);color:#fff;font:800 11px/1.2 Arial,sans-serif;box-shadow:0 10px 35px #0009;backdrop-filter:blur(12px);white-space:nowrap}
html[data-layout-preset="promo-heavy"] .hero{min-height:min(820px,92vh)}
html[data-layout-preset="promo-heavy"] .promoBanner{transform:scale(1.02);box-shadow:0 22px 70px color-mix(in srgb,var(--theme-glow) 24%,transparent)}
html[data-layout-preset="promo-heavy"] .popular{padding-top:34px}
html[data-layout-preset="premium-dark"] body{background:radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--theme-main) 14%,transparent),transparent 30%),#030205}
html[data-layout-preset="premium-dark"] .heroContent,html[data-layout-preset="premium-dark"] .product-card,html[data-layout-preset="premium-dark"] .popularCard{backdrop-filter:blur(14px)}
html[data-layout-preset="compact-mobile"] main>.wrap,html[data-layout-preset="compact-mobile"] main>.payment{margin-top:28px;margin-bottom:28px}
html[data-layout-preset="compact-mobile"] .popularGrid,html[data-layout-preset="compact-mobile"] #grid{gap:12px}
html[data-layout-preset="compact-mobile"] .product-card,html[data-layout-preset="compact-mobile"] .popularCard{border-radius:16px}
html[data-layout-preset="catalog-first"] #catalog{padding-top:24px}
@media(max-width:700px){
html[data-layout-preset="compact-mobile"] .hero{min-height:auto;padding-top:34px;padding-bottom:26px}
html[data-layout-preset="compact-mobile"] .heroContent h1{font-size:clamp(36px,11vw,58px)}
html[data-layout-preset="compact-mobile"] .trustBar{grid-template-columns:1fr 1fr}
html[data-layout-preset="compact-mobile"] .sectionHead{margin-bottom:14px}
}
/* V15.10 Store Builder media */
.builderBrandLogo{width:30px;height:30px;object-fit:cover;border-radius:9px;border:1px solid color-mix(in srgb,var(--theme-light) 35%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--theme-glow) 30%,transparent);flex:0 0 auto}.brand.hasBuilderLogo{gap:8px}.builderHeroBanner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.20;filter:saturate(.92) contrast(1.05);pointer-events:none;z-index:0}.heroContent,.heroFloating,.promoBanner,#storeAnnouncement{position:relative;z-index:1}