/* Feature layer: nav tools, promo slider, quick links, rows, reviews, help, contact, chat, light theme */
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-start,.nav-end{display:flex;align-items:center;gap:10px}
.nav-end{gap:8px}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.25s;font:800 13px Nunito,'Baloo Bhaijaan 2',sans-serif;padding:0}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn i{position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;border-radius:99px;background:var(--accent);color:#000;font:800 10px Nunito;display:grid;place-items:center;font-style:normal}
.nav nav{gap:28px}
.nav .logo{margin-inline-start:2px}

.sec.tight{padding-top:70px}
.row-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.row-head .title{font-size:clamp(34px,4.6vw,64px)}
.sec-head .title em{color:var(--accent)}
.link-btn{background:none;border:1px solid var(--line);color:var(--ink);padding:10px 22px;border-radius:99px;font-weight:800;cursor:pointer;transition:.25s}
.link-btn:hover{border-color:var(--accent);color:var(--accent)}

/* promo slider */
.promo-sec{padding-top:70px;padding-bottom:0}
.promo{position:relative;height:clamp(280px,38vw,400px);border-radius:32px;overflow:hidden;border:1px solid var(--line);background:#0e0e13;touch-action:pan-y;user-select:none}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 6%;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s;background:radial-gradient(520px 360px at 85% 50%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%),linear-gradient(120deg,#101016,#0b0b0f)}
.slide.on{opacity:1;visibility:visible}
.slide-copy{max-width:520px;color:#f3eee7;transform:translateY(24px);opacity:0;transition:.8s .2s}
.slide.on .slide-copy{transform:none;opacity:1}
.slide h3{font-size:clamp(28px,4.2vw,56px);margin:14px 0 12px;line-height:1.15}
.slide p{color:#bdb7ae;margin-bottom:26px;font-size:17px}
.slide .btn{background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#fff));box-shadow:0 12px 34px -10px var(--c)}
.slide .eyebrow{color:var(--c)}
.slide img{height:88%;max-width:42%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));transform:scale(.9) rotate(-4deg);transition:transform 1.2s}
.slide.on img{transform:scale(1) rotate(-2deg)}
.dots{position:absolute;bottom:18px;inset-inline:0;display:flex;justify-content:center;gap:8px}
.dots button{width:8px;height:8px;border-radius:99px;border:0;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:.3s}
.dots button.on{width:30px;background:#fff}

/* quick links + categories */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.q-tile{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:20px;border:1px solid var(--line);background:var(--glass);color:var(--ink);font:800 15px 'Baloo Bhaijaan 2',sans-serif;cursor:pointer;transition:.3s;text-align:start}
.q-tile .i{width:24px;height:24px;color:var(--accent);flex:none}
.q-tile:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px -22px var(--accent)}
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.cat-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;text-align:start;padding:34px 24px;border-radius:24px;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:radial-gradient(260px 160px at 80% 0%,color-mix(in srgb,var(--c) 28%,transparent),transparent 70%),var(--glass);transition:.35s}
.cat-tile b{font-size:24px;font-weight:900}
.cat-tile small{color:var(--mute);font-weight:500}
.cat-tile:hover{transform:translateY(-6px);border-color:var(--c);box-shadow:0 24px 50px -28px var(--c)}

/* horizontal product rows */
.hrow{display:flex;gap:20px;overflow-x:auto;padding:6px 4px 24px;scroll-snap-type:x proximity;perspective:1400px;scrollbar-width:thin}
.hrow .card{flex:0 0 auto;width:min(270px,72vw);min-width:0;scroll-snap-align:start}
.hrow .pimg{max-width:100%}
.hrow:empty::after{content:'—';color:var(--mute)}

/* card additions */
.badges{position:absolute;top:16px;inset-inline-start:16px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start;transform:translateZ(60px)}
.badges .badge{position:static;transform:none}
.badge.off{background:#f43f5e;color:#fff}
.badge.best{background:var(--ink);color:#000}
.heart{position:absolute;top:14px;inset-inline-end:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.25s;transform:translateZ(60px);padding:0}
.heart svg{width:18px;height:18px}
.heart:hover{transform:translateZ(60px) scale(1.12)}
.heart.on{background:#f43f5e;border-color:#f43f5e}
.heart.on svg{fill:#fff}
.sw-row{display:flex;gap:8px;margin:-6px 0 14px}
.sw{width:20px;height:20px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.25);cursor:pointer;padding:0;transition:.2s}
.sw:hover{transform:scale(1.2)}
.sw.on{box-shadow:0 0 0 2px var(--ink)}
.qv-price s{font:700 20px Nunito;color:var(--mute);margin-inline-start:14px}

/* side menu + generic modal */
.drawer.side{inset-inline-start:auto;inset-inline-end:0;border-inline-end:0;border-inline-start:1px solid var(--line);transform:translateX(-105%)}
[dir=rtl] .drawer.side{transform:translateX(-105%)}
.drawer.side.open{transform:none}
.menu-body{flex:1;overflow:auto;padding:14px 18px 30px;display:flex;flex-direction:column;gap:4px}
.menu-body h4{font:800 11px Nunito;letter-spacing:.3em;color:var(--mute);margin:18px 6px 6px;text-transform:uppercase}
.m-user{display:flex;gap:14px;align-items:center;padding:16px;border-radius:18px;background:var(--glass);border:1px solid var(--line);margin-bottom:10px}
.m-user .i{width:30px;height:30px;color:var(--accent)}
.m-user small{display:block;color:var(--mute);font-weight:500;margin-top:2px}
.m-i{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;border:0;background:none;color:var(--ink);font:700 15px 'Baloo Bhaijaan 2',sans-serif;cursor:pointer;text-align:start;transition:.2s}
.m-i:hover{background:rgba(255,255,255,.06)}
.m-i .i{width:20px;height:20px;color:var(--accent)}
.m-i .dot{width:10px;height:10px;border-radius:50%}
.mdl{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.3s}
.mdl.open{opacity:1;visibility:visible}
.mdl.top{place-items:start center;padding-top:12vh}
.mdl-box{position:relative;width:min(520px,100%);max-height:80vh;overflow:auto;background:#0f0f14;border:1px solid var(--line);border-radius:28px;padding:34px 28px 28px;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.mdl-x{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer}
.mdl h3{font-size:26px;margin-bottom:10px}
.muted{color:var(--mute);line-height:1.8;font-size:14px}
.mform{display:grid;gap:10px;margin-top:16px}
input,textarea{font-family:inherit}
.mform input,.rev-form input,.rev-form textarea,.sq,.chat-in input{width:100%;padding:14px 16px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;color:var(--ink);font-size:15px;outline:none;transition:.25s}
.mform input:focus,.rev-form input:focus,.rev-form textarea:focus,.sq:focus,.chat-in input:focus{border-color:var(--accent)}
.sq{font-size:18px;margin-bottom:14px}
.sr{display:grid;gap:8px}
.sr-i{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:16px;border:1px solid var(--line);background:none;color:var(--ink);font:700 15px 'Baloo Bhaijaan 2',sans-serif;cursor:pointer;text-align:start}
.sr-i:hover{border-color:var(--accent)}
.sr-i img{width:48px;height:48px;object-fit:contain}
.sr-i span{flex:1}
.sr-i b{font:800 15px Nunito}
.ord{border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:14px}
.ord-h{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:14px}
.ord-h span{color:var(--mute);font-size:13px}
.ord-h strong{font:800 15px Nunito}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.steps i{font-style:normal;font-size:11px;color:var(--mute);text-align:center;font-weight:700}
.steps em{display:block;height:4px;border-radius:9px;background:var(--line);margin-bottom:6px}
.steps i.on{color:var(--ink)}
.steps i.on em{background:var(--accent)}

/* reviews */
.avg{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.avg b{font:800 44px Nunito}
.avg small{color:var(--mute)}
.stars i,.stars-in button{font-style:normal;color:rgba(255,255,255,.18);font-size:18px}
.stars i.on,.stars-in button.on{color:#fbbf24}
.stars-in{display:flex;gap:2px}
.stars-in button{background:none;border:0;cursor:pointer;font-size:28px;padding:0 2px}
.rev-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
.rev-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.rev{border:1px solid var(--line);border-radius:22px;padding:24px;background:var(--glass);display:flex;flex-direction:column;gap:12px}
.rev p{line-height:1.8;color:#cfc9c1;flex:1}
.rev footer{display:flex;justify-content:space-between;align-items:center;border:0;padding:0;justify-items:initial;color:inherit;font-size:13px}
.rev small{color:var(--mute)}
.rev-form{display:grid;gap:12px;border:1px solid var(--line);border-radius:24px;padding:26px;background:var(--glass)}
.rev-form h3{font-size:22px}
.rev-form textarea{resize:vertical}

/* help + contact */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:18px;background:var(--glass);padding:0 22px;transition:.3s}
.faq details[open]{border-color:var(--accent)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:800;font-size:17px;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:800 22px Nunito;color:var(--accent);transition:.3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 20px;color:var(--mute);line-height:1.9}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start}
.contact-info{display:grid;gap:16px;justify-items:start;padding:10px 6px}
.contact-info p{color:var(--mute);font-size:17px}
footer .social{display:flex;gap:10px}
footer .social a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:.25s}
footer .social a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
footer .social svg{width:19px;height:19px}

/* chat */
.chat-fab{position:fixed;bottom:24px;inset-inline-end:24px;z-index:80;width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff));color:#0a0a0a;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 34px -8px var(--accent);transition:.3s,background .6s}
.chat-fab svg{width:24px;height:24px}
.chat-fab:hover{transform:scale(1.08)}
.chat{position:fixed;bottom:94px;inset-inline-end:24px;z-index:81;width:min(360px,calc(100vw - 32px));height:460px;max-height:70vh;display:flex;flex-direction:column;background:#0f0f14;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transition:.3s}
.chat.open{opacity:1;visibility:visible;transform:none}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.chat-head button{background:none;border:0;color:var(--ink);cursor:pointer;font-size:16px}
.chat-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.7}
.msg.bot{background:rgba(255,255,255,.07);align-self:flex-start;border-end-start-radius:4px}
.msg.me{background:var(--accent);color:#000;align-self:flex-end;border-end-end-radius:4px;font-weight:700}
.chat-quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px}
.chat-quick button{border:1px solid var(--line);background:none;color:var(--ink);padding:6px 14px;border-radius:99px;font:700 12.5px 'Baloo Bhaijaan 2',sans-serif;cursor:pointer}
.chat-quick button:hover{border-color:var(--accent)}
.chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-in button{width:46px;border:0;border-radius:14px;background:var(--accent);color:#000;font-weight:900;cursor:pointer}
[dir=ltr] .chat-in button{transform:scaleX(-1)}

/* Warm white theme */
[data-theme=light]{
  --bg:#faf8f3;
  --ink:#38291f;
  --mute:#786a5e;
  --line:rgba(91,62,43,.16);
  --panel:#fff;
  --glass:rgba(255,255,255,.82);
  --accent:#8b5e3c!important;
  color-scheme:light;
}
[data-theme=light] body{background:radial-gradient(1200px 700px at 85% -10%,rgba(139,94,60,.08),transparent 60%),var(--bg);color:var(--ink)}
[data-theme=light] .vignette{background:radial-gradient(ellipse at 30% 50%,transparent 55%,rgba(91,62,43,.08) 100%)}
[data-theme=light] .nav.scrolled{background:rgba(255,255,255,.82);box-shadow:0 10px 40px rgba(91,62,43,.12)}
[data-theme=light] .solid,[data-theme=light] .drawer,[data-theme=light] .mdl-box,[data-theme=light] .chat{background:var(--bg);color:var(--ink)}
[data-theme=light] .solid{box-shadow:0 -60px 80px 20px var(--bg)}
[data-theme=light] .card{background:#fff;box-shadow:0 18px 44px -26px rgba(91,62,43,.25)}
[data-theme=light] .card .halo{opacity:.12}
[data-theme=light] .pimg{filter:drop-shadow(0 22px 22px rgba(91,62,43,.2))}
[data-theme=light] .chip{background:rgba(91,62,43,.05)}
[data-theme=light] .chip.on,[data-theme=light] .add,[data-theme=light] .badge.best{color:#fff;background:var(--ink)}
[data-theme=light] .badge.off{color:#fff}
[data-theme=light] .hero p,[data-theme=light] .step p,[data-theme=light] .why p,[data-theme=light] .rev p{color:var(--mute)}
[data-theme=light] .toolbar,[data-theme=light] .why,[data-theme=light] .rev,[data-theme=light] .rev-form,[data-theme=light] .faq details,[data-theme=light] .q-tile,[data-theme=light] .cat-tile,[data-theme=light] .finale{background-color:var(--glass)}
[data-theme=light] .mform input,[data-theme=light] .rev-form input,[data-theme=light] .rev-form textarea,[data-theme=light] .sq,[data-theme=light] .chat-in input,[data-theme=light] #search,[data-theme=light] .drawer-foot input{background:rgba(91,62,43,.04);color:var(--ink)}
[data-theme=light] .ci img{background:#f1ece5}
[data-theme=light] .msg.bot{background:rgba(91,62,43,.07)}
[data-theme=light] .stars i,[data-theme=light] .stars-in button{color:rgba(91,62,43,.25)}
[data-theme=light] .btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(91,62,43,.25)}
[data-theme=light] .btn.ghost:hover{background:rgba(91,62,43,.08)}
[data-theme=light] .m-i:hover{background:rgba(91,62,43,.06)}
[data-theme=light] .promo{background:#f2ece4}
[data-theme=light] .slide{background:radial-gradient(520px 360px at 85% 50%,color-mix(in srgb,var(--c) 20%,transparent),transparent 70%),linear-gradient(120deg,#fff,#f4eee6)}
[data-theme=light] .slide-copy{color:var(--ink)}
[data-theme=light] .slide p{color:var(--mute)}
[data-theme=light] .mdl-box,[data-theme=light] .drawer{border-color:var(--line)}
[data-theme=light] .qv-box{background:#fff}
[data-theme=light] .qv-view{background:radial-gradient(circle at 50% 45%,var(--c,#e9d8c8),transparent 65%),#f4eee6}
[data-theme=light] .hero::before,[data-theme=light] .step::before{background:linear-gradient(transparent,rgba(250,248,243,.94) 58%)}
[data-theme=light] .num{-webkit-text-stroke-color:rgba(91,62,43,.2)}

@media(max-width:860px){
  .nav nav{display:none}
  .nav{padding:14px 4vw}
  .nav-end{gap:6px}
  .icon-btn{width:36px;height:36px}
  .cart-btn span{display:none}
  .cart-btn{padding:4px}
  #favBtn{display:none}
  .nav-end #themeBtn{display:grid}
  .logo{font-size:15px}
  .promo-sec{padding-top:40px}
  .slide{padding:0 7%;align-items:flex-end;padding-bottom:50px}
  .slide img{position:absolute;inset-inline-end:2%;top:8%;height:46%;max-width:44%;opacity:.9}
  .slide-copy{max-width:100%;position:relative}
  .slide p{font-size:14px;margin-bottom:16px}
  .rev-wrap,.contact-grid{grid-template-columns:1fr}
  .quick{grid-template-columns:repeat(2,1fr)}
  .q-tile{padding:14px}
  .hrow .card{width:62vw}
  .chat-fab{bottom:16px;inset-inline-end:16px}
  .chat{bottom:84px;inset-inline-end:16px}
  .sec.tight{padding-top:50px}
}

/* drawers slide from the correct edge in LTR */
[dir=ltr] .drawer{transform:translateX(-105%)}
[dir=ltr] .drawer.side{transform:translateX(105%)}
[dir=ltr] .drawer.open,[dir=ltr] .drawer.side.open{transform:none}