:root{
  --bg:#070707;--panel:#121212;--panel2:#181818;--gold:#e9bd58;--gold2:#ffe398;
  --text:#fff9ee;--muted:#b8afa4;--line:#e9bd5840;--pink:#ff4fa3;--purple:#9b63ff;
  --blue:#459dff;--cyan:#3bd6cf;--green:#72db75;--yellow:#ffd85b;--orange:#ff914d
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:radial-gradient(circle at 15% 0,#ff4fa31c,transparent 26rem),
  radial-gradient(circle at 90% 8%,#459dff18,transparent 28rem),var(--bg);
  color:var(--text);font-family:Inter,system-ui,sans-serif;padding-bottom:82px
}
button,input{font:inherit}button{cursor:pointer}
.wrap{width:min(1160px,calc(100% - 28px));margin:auto}
.rain{height:4px;background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue),var(--cyan),var(--green),var(--yellow),var(--orange));box-shadow:0 0 16px #62bdff88}
.notice{background:linear-gradient(90deg,#ffdc83,#fff0c3);color:#160f04;text-align:center;padding:7px 12px;font-size:11px;font-weight:800}
.notice i{margin-right:5px}
header{position:sticky;top:0;z-index:30;background:#070707eb;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff10}
.top{display:grid;grid-template-columns:220px 1fr auto;gap:16px;align-items:center;padding:8px 0}
.logo{width:210px;height:82px;object-fit:contain}
.searchBox{position:relative;max-width:590px;justify-self:center;width:100%}
.searchBox>i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--gold2);pointer-events:none}
#search{width:100%;border:1px solid var(--line);background:#151515;color:white;border-radius:999px;padding:13px 16px 13px 43px;outline:0}
#search:focus{border-color:var(--gold);box-shadow:0 0 0 4px #e9bd521a}
.actions{display:flex;gap:9px}
.round{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#151515;color:var(--gold2);display:flex;align-items:center;justify-content:center;font-size:17px;padding:0}
.round .bagIcon{width:27px;height:27px;object-fit:contain;border-radius:7px}
.badge{position:absolute;top:-5px;right:-4px;min-width:20px;height:20px;border-radius:99px;background:var(--gold2);color:#160f04;font-size:10px;font-weight:900;display:grid;place-items:center;border:2px solid #070707}
.cats{display:flex;gap:8px;overflow:auto;padding:9px 0 12px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid #ffffff20;background:#131313;color:white;border-radius:999px;padding:8px 12px;white-space:nowrap;font-size:13px;font-weight:700}
.chip i{margin-right:6px;color:var(--gold2)}
.chip.active{border-color:transparent;color:#171006;background:linear-gradient(90deg,#ff78b6,#a78cff,#74a8ff,#74ddcc,#f5dc73)}
.chip.active i{color:#171006}
main{padding-top:18px}
.hero{min-height:410px;border-radius:28px;border:1px solid var(--line);overflow:hidden;display:grid;grid-template-columns:1.12fr .88fr;background:radial-gradient(circle at 78% 43%,#ff4fa34a,transparent 18rem),radial-gradient(circle at 72% 64%,#7049ff40,transparent 22rem),linear-gradient(135deg,#160d20,#0a0a0a 67%);box-shadow:0 24px 70px #0009}
.heroCopy{align-self:center;padding:52px clamp(25px,5vw,62px)}
.eyebrow{color:var(--gold2);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.16em}
h1,h2,h3{margin:0}
h1{font:700 clamp(48px,7vw,84px)/.9 "Cormorant Garamond",serif;margin:12px 0 18px}
.gradient{background:linear-gradient(90deg,#ff6bb5,#b97dff,#6caaff,#58d9cd,#f4dc67,#ff9b50);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#d4cbc0;line-height:1.65;max-width:540px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn{border-radius:99px;padding:12px 17px;font-weight:800}
.primary{border:0;background:linear-gradient(90deg,var(--gold),var(--gold2));color:#160f04}
.secondary{border:1px solid #ffffff22;background:#161616;color:white}
.btn i{margin-left:6px}.secondary i{margin-left:0;margin-right:6px}
.art{display:grid;place-items:center;position:relative;min-height:330px}
.orbit{position:absolute;width:min(360px,92%);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 17%,var(--pink) 18%,var(--purple) 28%,var(--blue) 38%,var(--cyan) 48%,var(--green) 58%,var(--yellow) 66%,var(--orange) 73%,transparent 75%);mask:radial-gradient(farthest-side,transparent calc(100% - 17px),#000 0);filter:drop-shadow(0 0 11px #50b8ff99);rotate:-18deg}
.bottle{width:160px;height:210px;border-radius:54px 54px 34px 34px;background:radial-gradient(circle at 33% 23%,#fff,transparent 8%),linear-gradient(145deg,#ff78bb,#7958ff 45%,#38cdd9 68%,#ffbd45);border:2px solid #ffe49b;box-shadow:inset 20px 0 32px #ffffff44,inset -16px 0 28px #0004,0 25px 60px #0009;position:relative;z-index:2}
.bottle:before{content:"";position:absolute;left:43px;top:-65px;width:72px;height:70px;clip-path:polygon(50% 0,90% 36%,75% 100%,25% 100%,10% 36%);background:linear-gradient(135deg,#fff1ad,#b87515 50%,#ffe18b);border:2px solid #f6cb61}
.bottle:after{content:"ÍRIS";position:absolute;left:22px;right:22px;top:84px;text-align:center;font:700 25px "Cormorant Garamond";letter-spacing:.12em;color:#fff1ae;padding:8px 0;border-block:1px solid #fff2b888}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:18px 0 40px}
.fact{display:flex;gap:11px;align-items:center;padding:14px;border:1px solid #ffffff12;border-radius:17px;background:#111}
.factIcon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:var(--gold2);color:#150e03;flex:none}
.fact b{display:block;font-size:14px}
.fact small{display:block;color:var(--muted);font-size:11px;line-height:1.35;margin-top:3px}
section{margin:36px 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:16px}
h2{font:700 clamp(32px,4vw,46px)/1 "Cormorant Garamond"}
h2 i{font-size:.62em;color:var(--gold);margin-right:8px}
.head small{color:var(--muted)}
.all{border:0;background:transparent;color:var(--gold2);font-weight:800}
.all i{margin-left:5px;font-size:11px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.product{position:relative;background:linear-gradient(#171717,#0e0e0e);border:1px solid #ffffff13;border-radius:21px;overflow:hidden;transition:.22s}
.product:hover{translate:0 -4px;border-color:var(--line)}
.pic{height:210px;display:grid;place-items:center;background:radial-gradient(circle,var(--glow),transparent 63%)}
.mini{width:88px;height:120px;border-radius:27px 27px 17px 17px;background:radial-gradient(circle at 32% 23%,#fff,transparent 8%),linear-gradient(145deg,var(--c1),var(--c2));border:1px solid #ffffff99;box-shadow:inset 12px 0 19px #ffffff38,inset -10px 0 18px #0004,0 16px 28px #0008;position:relative}
.mini:before{content:"";position:absolute;left:24px;top:-33px;width:39px;height:35px;border-radius:8px 8px 3px 3px;background:linear-gradient(135deg,#fff0a8,#a96913,#ffe594);border:1px solid #efc552}
.mini:after{content:"ÍRIS";position:absolute;left:9px;right:9px;top:49px;text-align:center;font:700 15px "Cormorant Garamond";color:#fff0b2;border-block:1px solid #ffffff55;padding:4px 0}
.discount{position:absolute;left:11px;top:11px;z-index:2;background:var(--badge);padding:6px 9px;border-radius:99px;font-size:11px;font-weight:900}
.fav{position:absolute;right:10px;top:10px;z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid #ffffff28;background:#080808aa;color:white}
.fav.on{color:#ff69ae;border-color:#ff69ae}
.body{padding:13px}
.cat{color:var(--gold2);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.name{font-weight:800;margin:5px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desc{color:var(--muted);font-size:12px}
.prices{display:flex;gap:8px;align-items:baseline;margin:11px 0}
.price{color:#79e6ef;font-size:18px;font-weight:900}
.old{color:#777;font-size:11px;text-decoration:line-through}
.add{width:100%;border:1px solid var(--line);background:#111;color:var(--gold2);border-radius:99px;padding:9px;font-weight:800}
.add i{margin-left:4px}
.empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:18px;text-align:center;color:var(--muted);padding:45px 20px}
footer{border-top:1px solid #ffffff12;padding:28px 0;color:var(--muted);font-size:12px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
footer button,footer a{border:1px solid #ffffff18;background:#111;color:white;border-radius:99px;padding:9px 12px;text-decoration:none}
footer i{margin-right:5px}
.mobileNav{display:none;position:fixed;left:9px;right:9px;bottom:9px;z-index:40;height:66px;grid-template-columns:repeat(5,1fr);padding:5px;background:#0c0c0cf2;border:1px solid var(--line);border-radius:23px;backdrop-filter:blur(18px)}
.mobileNav button{border:0;background:transparent;color:#c8c0b5;border-radius:17px;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.mobileNav button i{font-size:16px}
.mobileNav button .bagIcon{width:20px;height:20px;border-radius:5px;object-fit:contain}
.mobileNav .active{background:linear-gradient(135deg,#ffe191,#ffb8db);color:#150e03}
.overlay{position:fixed;inset:0;background:#000b;backdrop-filter:blur(5px);z-index:50;opacity:0;pointer-events:none;transition:.2s}
.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(460px,100%);z-index:60;background:#0d0d0d;border-left:1px solid var(--line);translate:100% 0;transition:.25s;display:flex;flex-direction:column}
.drawer.open{translate:0}
.drawerHead{padding:18px;border-bottom:1px solid #ffffff12;display:flex;justify-content:space-between;align-items:center}
.drawerHead h3{font:700 34px "Cormorant Garamond"}
.close{width:40px;height:40px;border-radius:50%;border:1px solid #ffffff1f;background:#171717;color:white}
.drawerBody{padding:15px 18px;overflow:auto;flex:1}
.cartEmpty{text-align:center;color:var(--muted);padding:55px 15px}
.cartEmpty .emptyBag{width:78px;height:78px;object-fit:contain;border-radius:18px;margin:0 auto 12px}
.cartItem{display:grid;grid-template-columns:58px 1fr auto;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid #ffffff10}
.thumb{width:58px;height:66px;border-radius:14px;background:linear-gradient(145deg,var(--c1),var(--c2));border:1px solid #ffffff44}
.cartItem small{display:block;color:var(--muted);margin-top:2px}
.qty{display:flex;gap:7px;align-items:center;margin-top:7px}
.qty button{width:27px;height:27px;border-radius:50%;border:1px solid var(--line);background:#171717;color:white}
.remove{border:0;background:transparent;color:#ff9292;padding:4px 0;font-size:11px}
.label{display:block;color:var(--gold2);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin:17px 0 8px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{display:flex;gap:8px;align-items:center;border:1px solid #ffffff18;border-radius:14px;background:#141414;padding:11px;font-size:12px}
.opt:has(input:checked){border-color:var(--gold);background:#e8bb5212}
.opt input{accent-color:var(--gold)}
.drawerFoot{padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #ffffff12}
.total{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.total strong{color:var(--gold2);font-size:20px}
.whats{width:100%;border:0;border-radius:99px;padding:13px;background:#25d366;color:#07140c;font-weight:900}
.whats i{margin-right:5px}
.whats:disabled{filter:grayscale(1);opacity:.5}
.toast{position:fixed;left:50%;bottom:92px;z-index:80;translate:-50% 16px;opacity:0;transition:.2s;background:white;color:#111;padding:10px 15px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap}
.toast.show{opacity:1;translate:-50% 0}

@media(max-width:950px){
  .top{grid-template-columns:1fr auto;gap:6px 12px}
  .logo{width:185px}
  .searchBox{grid-column:1/-1;grid-row:2;max-width:none;padding-bottom:10px}
  .searchBox>i{top:calc(50% - 5px)}
  .hero{grid-template-columns:1fr .72fr}
  .grid{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  body{padding-bottom:92px}
  .wrap{width:calc(100% - 20px)}
  .logo{width:160px;height:64px}
  .top{grid-template-columns:1fr auto}
  .hero{grid-template-columns:1fr;min-height:510px;border-radius:23px}
  .heroCopy{padding:32px 23px 5px}
  h1{font-size:55px}
  .hero p{font-size:14px}
  .art{min-height:235px;overflow:hidden}
  .orbit{width:280px}
  .bottle{width:112px;height:150px;border-radius:38px 38px 24px 24px}
  .bottle:before{left:30px;top:-49px;width:50px;height:52px}
  .bottle:after{left:16px;right:16px;top:59px;font-size:17px}
  .facts{gap:8px;margin-bottom:30px}
  .fact{padding:11px;align-items:flex-start}
  .factIcon{width:34px;height:34px}
  .fact b{font-size:12px}
  .fact small{font-size:10px}
  .head small{display:none}
  h2{font-size:33px}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .pic{height:174px}
  .mini{width:70px;height:98px}
  .mini:before{left:19px;top:-27px;width:31px;height:29px}
  .mini:after{top:40px;font-size:12px}
  .body{padding:10px}
  .name{font-size:13px}
  .desc{font-size:10px}
  .price{font-size:15px}
  .old{display:none}
  footer .wrap{display:block;text-align:center}
  footer .links{margin-top:14px}
  .mobileNav{display:grid}
}
@media(max-width:380px){
  h1{font-size:49px}
  .facts{grid-template-columns:1fr}
  .btn{width:100%}
  .pic{height:155px}
}