:root{
  --bg1:#ffd6f5; --bg2:#ffb3e0; --bg3:#ff9ad1; --bg4:#ff85c5; --bg5:#ff6eb8;
  --text:#1b0a18; --muted:#5b2a4d; --line:#ffc7eb;
  --card:#ffe2f2; --card2:#ffc4e6; --brand:#ff7dc3; --brand2:#ff98d2;
  --heart:#ff4fa1;
}

*{box-sizing:border-box}
html,body{margin:0} html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  color:var(--text);
  background: radial-gradient(circle at 20% -10%, var(--bg1) 0%, var(--bg2) 40%, var(--bg3) 60%, var(--bg4) 75%, var(--bg5) 100%);
  overflow-x:hidden;
}
main{font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif}

/* background canvas */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none}

/* stacking */
header, main > section, footer, .site-header, .container{position:relative; z-index:1}
.container{width:100%;max-width:1120px;margin-inline:auto;padding-inline:16px}

/* notice */
.notice{
  background:#ffd9f1;color:#5a1741;border-bottom:1px solid var(--line);
  padding:.6rem .9rem;display:flex;gap:.8rem;align-items:center;
  will-change:opacity,transform,height,margin,padding,border;
  transition:opacity .3s ease, transform .3s ease, height .3s ease, margin .3s ease, padding .3s ease, border-width .3s ease;
  position:relative; z-index:1300;
}
.notice.closing{
  opacity:0; transform:translateY(-8px);
  height:0; margin:0; padding-top:0; padding-bottom:0; border-width:0; overflow:hidden;
}
.notice button{
  margin-left:auto;background:#ffb3e0;color:#5a1741;border:1px solid #ff98d2;
  padding:.25rem .6rem;border-radius:.4rem;cursor:pointer
}

/* header + nav */
.site-header{position:sticky;top:0;z-index:1000;overflow:visible;background:rgba(255,210,235,.65);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;gap:1rem;padding:.6rem 0;position:relative}
.brand{font-weight:800;background:linear-gradient(90deg,var(--brand),var(--brand2)); border-radius:70px; padding:12px 18px; border:1px solid #fff;letter-spacing:.5px;text-decoration:none;color:#5a1741; font-size:24px}
.menu-btn{display:none;background:transparent;color:#5a1741;border:1px solid #ff98d2;border-radius:.5rem;padding:.45rem .8rem;cursor:pointer}
.menu{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.menu a{
  align-items:center;height:auto;display:inline-flex;font-size:16px;font-weight:800;text-transform:uppercase;color:#5a1741;
  letter-spacing:.18rem;border-radius:7px;border:1px solid #fff;padding:.55rem .9rem;
  background:transparent;transition:all .3s ease;justify-content:center;text-decoration:none;
}
.menu a:hover{color:#aa1f77}
.header-cta{margin-left:auto;display:flex;gap:.6rem;align-items:center}
.btn{padding:.5rem .8rem;border-radius:.6rem;border:1px solid #ff98d2;background:#ffd3ec;color:#5a1741;cursor:pointer}
.btn.primary{background:transparent;color:#3a0f2a;border:1px solid #ff98d2}
.cart-btn{display:flex;align-items:center;gap:.4rem}
.header-cart{background:#aa1f77;color:#fff;border-radius:1rem;padding:.15rem .45rem;font-size:.8rem}

/* hero */
.hero .hero-wrap{min-height:400px;display:grid;place-items:center;gap:12px;text-align:center}
h1{
  font-weight:700;font-size:72px;text-transform:uppercase;
  background-image:url(folder-img/wom1.jpg);color:transparent;
  transform:translateY(-.2rem);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #000;
  animation:text-background 8s linear infinite;
}
@keyframes text-background{from{background-position:0 0}to{background-position:100% 100%}}
.lead{margin:0;color:#6a2d54;font-size:clamp(15px,2.4vw,19px)}

/* collection */
.collection h2,.info h2,.reviews h2{text-align:center;margin:2rem 0 1rem;color:#3a0f2a}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:1rem;padding:1rem;box-shadow:0 10px 28px rgba(170,31,119,.12)}
.card h3{margin:.25rem 0 .5rem;color:#3a0f2a}
.tiny{font-size:.85rem}.muted{color:#6a2d54}

/* product */
.product{position:relative}
.badge{position:absolute;top:.75rem;left:.75rem;background:#ff4fa1;color:#fff;font-size:.75rem;padding:.2rem .45rem;border-radius:.4rem}
.rating{margin:.1rem 0 .6rem;color:#aa1f77;font-weight:700}
model-viewer{
  width:100%;height:420px;display:block;border-radius:.9rem;
  background:linear-gradient(135deg,#ffe9f6,#ffd1ee);
  box-shadow:0 10px 28px rgba(255,105,180,.25);
}
.buyrow{display:flex;align-items:center;justify-content:space-between;margin:.6rem 0}
.price{font-weight:800;font-size:1.25rem;color:#3a0f2a}
.price .ccy{opacity:.7;margin-right:2px}
.opt{border:1px solid var(--line);background:#ffe7f5;color:#3a0f2a;border-radius:.5rem;padding:.35rem .5rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}
.btn.wish{background:#ffe0f2;border-color:#ff98d2;transition:all .2s ease}
.btn.wish.hearted{background:var(--heart);border-color:var(--heart);color:#fff}
.swatches{display:flex;gap:.4rem;margin-top:.6rem}
.swatch{width:18px;height:18px;border-radius:50%;border:2px solid #fff;cursor:pointer;box-shadow:0 0 0 1px #ff98d2}
.s-rose{background:#ff7dc3}.s-sky{background:#8fd8ff}.s-onyx{background:#222}
.tint-rose model-viewer{filter:hue-rotate(315deg) saturate(1.25) brightness(1.05)}
.tint-sky  model-viewer{filter:hue-rotate(210deg) saturate(1.15) brightness(1.05)}
.tint-onyx model-viewer{filter:saturate(0) brightness(.8) contrast(1.1)}

/* info + cube */
.info-wrap.single{display:grid;grid-template-columns:1fr;justify-items:center}
.cube-scene{position:relative;width:100%;max-width:720px;height:420px;display:grid;place-items:center;perspective:1000px;margin-inline:auto;touch-action:none}
.cube{position:relative;width:260px;height:260px;transform-style:preserve-3d;cursor:grab}
.cube.dragging{cursor:grabbing}
.face{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:linear-gradient(135deg,#ffd0ec,#ffb3e0);
  border:3px solid #ff4fa1;border-radius:.75rem;
  box-shadow:0 14px 30px rgba(255,105,180,.25);
  color:#2a0f24;font-weight:800;letter-spacing:.2px;
  padding:1rem;user-select:none;text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.f1{transform:translateZ(130px)}
.f2{transform:rotateY(90deg) translateZ(130px)}
.f3{transform:rotateY(180deg) translateZ(130px)}
.f4{transform:rotateY(-90deg) translateZ(130px)}
.f5{transform:rotateX(90deg) translateZ(130px)}
.f6{transform:rotateX(-90deg) translateZ(130px)}
.hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%)}

/* reviews */
.reviews .review{margin:.75rem 0}

/* modal for cube (styles used by JS when opening) */
.cube-modal{position:fixed;inset:0;display:none;z-index:30}
.cube-modal.open{display:block}
.cube-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.cube-dialog{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(580px,92vw);background:#fff;color:#3a0f2a;
  border:3px solid #ff8ccf;border-radius:14px;
  box-shadow:0 22px 70px rgba(255,105,180,.35), 0 10px 28px rgba(0,0,0,.12);
  padding:1.1rem 1.25rem;text-align:center;
}
.cube-dialog h4{margin:.2rem 0 .6rem;font-size:1.2rem}
.cube-modal-close{
  position:absolute;top:8px;right:10px;border:none;background:transparent;
  color:#a01468;font-size:1.5rem;cursor:pointer;line-height:1;
}

/* footer */
.site-footer{border-top:1px solid var(--line);margin-top:2rem;background:transparent}
.site-footer .container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center;padding:1.5rem 1rem}
.site-footer a{color:#aa1f77}.site-footer a:hover{text-decoration:underline}

/* responsive */
@media (max-width:980px){ .grid{grid-template-columns:1fr} }
@media (max-width:860px){
  .menu-btn{ display:inline-block; position:relative; z-index:1200; }
  #menu.menu{
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; align-items:center;
    background:#ffe0f2; border-bottom:1px solid var(--line);
    gap:1rem; padding:1rem 0; text-align:center; z-index:1190;
  }
  #menu.menu.open{ display:flex; }
  #menu.menu a{
    height:auto; padding:.7rem 1rem;
    width:clamp(220px,90vw,560px);
    letter-spacing:.12rem; background:transparent; color:#5a1741;
  }
  h1{ font-size:40px; -webkit-text-stroke:1px #000; }
}
@media (max-width:560px){
  .cube{width:220px;height:220px}
  .f1{transform:translateZ(110px)} .f2{transform:rotateY(90deg) translateZ(110px)}
  .f3{transform:rotateY(180deg) translateZ(110px)} .f4{transform:rotateY(-90deg) translateZ(110px)}
  .f5{transform:rotateX(90deg) translateZ(110px)} .f6{transform:rotateX(-90deg) translateZ(110px)}
}