:root{--ink:#0B1B1E;--glass:#123039;--glass2:#17414B;--line:#2A5A64;--bone:#F1E8D6;--mute:#9DB8B5;--muted:#9DB8B5;--amber:#E3A84B;--amber2:#F3C778;--rose:#E88396;--sage:#86C99C;--f-display:'Reem Kufi','Cairo',sans-serif;--f-body:'Cairo','Segoe UI',Tahoma,sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--f-body);font-size:15px;line-height:1.75}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;font-weight:700;line-height:1.15}
button,select,input,textarea{font-family:inherit;color:inherit;font-size:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
p{margin:0}
.num{font-variant-numeric:tabular-nums}.muted{color:var(--mute)}
#site{max-width:1120px;margin:0 auto;padding:0 18px 70px}
#hdr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0 6px}
#brand{font-family:var(--f-display);font-size:26px;color:var(--amber);letter-spacing:-.3px}
#brand small{display:block;font-family:var(--f-body);font-size:12px;color:var(--mute);letter-spacing:.4px;margin-top:-2px}
.tool{background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;color:var(--bone)}
.tool:hover{border-color:var(--amber);color:var(--amber)}
.hero{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding:40px 0 18px;min-height:min(78vh,720px);align-content:center}
.heroTxt{max-width:820px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:8px 18px;border-radius:999px;background:rgba(227,168,75,.1);border:1px solid rgba(243,199,120,.3);backdrop-filter:blur(10px);font-size:13px;color:#f7e6c7;margin-bottom:22px;animation:fadeDown .8s ease-out both;text-wrap:balance}
.hero h1 .g1,.hero h1 .g2{background:linear-gradient(90deg,#F3C778,#FFE9A8 45%,#E3A84B);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%;animation:fadeUp .8s ease-out both,shift 6s ease infinite}
.hero h1 .g1{animation-delay:.15s,0s}.hero h1 .g2{background-image:linear-gradient(90deg,#FFE0A3,#E88396 55%,#E3A84B);animation-delay:.3s,0s}
.hero .lead{animation:fadeUp .8s ease-out .5s both}.hero .prices{animation:fadeUp .8s ease-out .7s both;justify-content:center;align-items:center}
.hero .prices .cta{width:auto;flex:0 0 100%;max-width:320px;display:inline-block;margin-bottom:6px;padding:13px 28px;border-radius:999px;background:linear-gradient(90deg,#E3A84B,#F3C778);box-shadow:0 10px 40px -10px rgba(227,168,75,.6);transition:transform .25s,box-shadow .25s}.hero .prices .cta:hover{transform:scale(1.04);box-shadow:0 14px 50px -10px rgba(227,168,75,.8)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}@keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero h1{font-size:clamp(38px,7vw,80px);line-height:1.12}
.hero .lead{font-size:clamp(16px,1.9vw,20px);max-width:62ch;margin:16px auto 0;color:#f3e3c6cc;font-weight:300}
.hero .prices{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.hero .prices span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--mute)}
.hero .prices b{color:var(--bone)}
#bottleWrap[hidden]{display:none}
.lvl{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
#heroShot{margin:22px auto 0;max-width:820px;width:100%;border-radius:28px;overflow:hidden;position:relative;animation:fadeUp 1s ease-out .9s both;box-shadow:0 40px 90px -40px rgba(227,168,75,.45),0 0 0 1px rgba(243,199,120,.18)}
#heroShot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:saturate(1.05) contrast(1.05);transition:transform 1.2s ease}
#heroShot:hover img{transform:scale(1.02)}
#heroShot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,27,30,.85));pointer-events:none}
#heroShot figcaption{position:absolute;inset-inline:0;bottom:0;padding:14px 18px;font-size:13px;color:#f3e3c6;z-index:1}
.counter{background:linear-gradient(180deg,var(--glass) 0%,#0f2a31 100%);border:1px solid var(--line);border-radius:26px;padding:18px;margin-top:10px;box-shadow:0 30px 80px -40px #000}
.counter .who{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.counter .av{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffd9c4,#e88396);display:grid;place-items:center;color:#2a1216;font-weight:800;font-size:18px;flex:none;box-shadow:inset 0 -6px 12px rgba(0,0,0,.15)}
.counter .who b{font-size:17px}
.counter .who .role{font-size:12px;color:var(--mute)}
#shopMsgs{height:min(44vh,360px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:6px 2px;scroll-behavior:smooth}
.msg{max-width:86%;border-radius:18px;padding:9px 14px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.msg.them{align-self:flex-start;background:#0b1b1e;border:1px solid var(--line);border-start-start-radius:6px}
.msg.me{align-self:flex-end;background:var(--amber);color:#1b1305;border-start-end-radius:6px;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:13px;color:var(--bone);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--amber);color:var(--amber)}
#shopForm{display:flex;gap:8px;margin-top:12px}
.field{background:#0b1b1e;border:1px solid var(--line);border-radius:14px;padding:11px 14px;font-size:15px;min-width:0;width:100%}
.field::placeholder{color:#6f8a88}
.btn{background:var(--amber);color:#1b1305;border:0;border-radius:14px;padding:11px 18px;font-weight:800;cursor:pointer;white-space:nowrap;transition:transform .12s ease,background .2s}
.btn:hover{background:var(--amber2)}.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber);background:transparent}
.btn.big{display:block;width:100%;text-align:center;padding:15px 18px;font-size:17px;border-radius:16px;text-decoration:none}
.ticket{background:var(--bone);color:#1c2a2a;border-radius:22px;padding:20px;margin-top:16px;position:relative;overflow:hidden}
.ticket::before{content:'';position:absolute;inset-inline:0;top:0;height:6px;background:linear-gradient(90deg,var(--amber),var(--rose),var(--glass2))}
.ticket h3{font-size:20px;color:#14323A;margin-bottom:8px}
.ticket .row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #cdbfa3;padding:6px 0;font-size:14px}
.ticket .row.total{font-weight:800;font-size:16px;border-bottom:0}
.ticket label{display:block;font-size:13px;color:#52605f;margin-top:10px}
.ticket .field{background:#fff;border-color:#d9cdb3;color:#1c2a2a}
.ticket .field::placeholder{color:#9aa39f}
.ticket .muted,.ticket .note{color:#5c6b68;font-size:12px}
.ticket .warn{color:#b3343f}.ticket .ok{color:#2f7a4f}
.ticket .btn{background:#14323A;color:var(--bone)}.ticket .btn:hover{background:#1b4650}
.ticket .btn.ghost{background:transparent;color:#14323A;border:1px solid #14323A}
.ticket.done{background:#eaf4ec}
.ticket .wait{display:flex;align-items:center;gap:8px;color:#52605f;font-size:13px;margin-top:10px}
.ticket .wait i{width:10px;height:10px;border-radius:50%;background:var(--amber);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.shelf{margin-top:34px}
.shelf h2{font-size:28px;margin-bottom:4px}
.shelf .sub{color:var(--mute);margin-bottom:14px}
.shelfRow{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.label{background:var(--bone);color:#1c2a2a;border-radius:18px;padding:0 16px 14px;position:relative;display:flex;flex-direction:column;gap:8px;overflow:hidden;border-top:6px solid var(--glass)}
.label::before{content:"";display:block;aspect-ratio:16/10;margin:0 -16px 10px;background:#123039 center/cover no-repeat;filter:saturate(1.05)}
.shelfRow .label:nth-child(3n+1)::before{background-image:url("https://images.unsplash.com/photo-1709662217659-c7966220219f?w=700&q=70&auto=format")}
.shelfRow .label:nth-child(3n+2)::before{background-image:url("https://images.unsplash.com/photo-1709666414117-e5c49abb85f8?w=700&q=70&auto=format")}
.shelfRow .label:nth-child(3n)::before{background-image:url("https://images.unsplash.com/photo-1709661878954-17dbe48004a0?w=700&q=70&auto=format")}
.label.oud{border-top-color:#5a3a1e}.label.sleep{border-top-color:#6a5aa8}.label.focus{border-top-color:#b58a1e}.label.warm{border-top-color:#a0522d}.label.fresh{border-top-color:#2e8b8b}.label.sig{border-top-color:#14323A}
.label h3{font-size:22px;color:#14323A}
.label .story{font-size:14px;color:#3d4b49;min-height:3.4em}
.label .notes{font-size:12px;color:#6b7673}
.label .sizes{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.label .sizes button{background:#fff;border:1px solid #cdbfa3;border-radius:10px;padding:7px 10px;font-weight:700;cursor:pointer;color:#14323A;flex:1}
.label .sizes button:hover{border-color:#14323A}
.label .sizes button.main{background:#14323A;color:var(--bone);border-color:#14323A}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start}
.steps{display:flex;gap:4px;flex-wrap:wrap}.steps span{border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:11px;color:var(--mute)}.steps span.ok{background:var(--sage);color:#10221a;border-color:var(--sage);font-weight:700}.steps span.now{border-color:var(--amber);color:var(--amber);font-weight:700}
.card{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:14px}
.warn{color:var(--rose)}.ok{color:var(--sage)}
#modal{position:fixed;inset:0;background:#000a;z-index:50;display:none;align-items:center;justify-content:center;padding:12px}
#modal.on{display:flex}
#modalBox{background:#0B1B1E;border:1px solid var(--line);border-radius:20px;max-width:680px;width:100%;max-height:90%;overflow:auto;padding:18px}
#toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--bone);color:#16211f;border-radius:14px;padding:9px 16px;font-weight:700;z-index:60;display:none;max-width:90vw;text-align:center;box-shadow:0 10px 30px #0008}
#toast.on{display:block}
footer{margin-top:50px;color:var(--mute);font-size:12px;text-align:center;line-height:1.9;border-top:1px solid var(--line);padding-top:16px}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.text-sm{font-size:13px}.w-full{width:100%}.block{display:block}
#liquid{position:fixed;inset:0;z-index:-1;pointer-events:none}#liquid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,rgba(11,27,30,.35) 55%,rgba(11,27,30,.85) 100%)}#liquid canvas{width:100%;height:100%;display:block}
@media (max-width:760px){.hero{gap:6px;padding-top:10px;min-height:0}.hero h1{font-size:clamp(30px,8.5vw,42px)}.badge{font-size:12px;padding:7px 14px}.grid2{grid-template-columns:1fr}#site{padding:0 12px 60px}#shopMsgs{height:min(50vh,380px)}#heroShot{border-radius:18px}#heroShot img{aspect-ratio:4/5}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#liquid{display:none}}