:root{--bg:#07090d;--panel:#0d1118;--panel2:#121923;--line:#25303e;--text:#f5f7fa;--muted:#9ca7b5;--silver:#d9e0e8;--accent:#e6b75c;--accent2:#a97524;--danger:#ff5964;--max:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -20%,#1a2432 0,#07090d 42%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 32px));margin:auto}.topbar{background:#030405;border-bottom:1px solid #1d2530;color:#b8c2cf;text-align:center;padding:7px;font-size:12px;letter-spacing:.5px}
header{position:sticky;top:0;z-index:50;background:rgba(7,9,13,.92);backdrop-filter:blur(16px);border-bottom:1px solid #1e2732}.nav{height:78px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:4px;font-size:23px}.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover}.navlinks{display:flex;gap:22px;margin-left:auto}.navlinks a{color:#c8d0da;font-size:14px}.navlinks a:hover,.navlinks a.active{color:#fff}.actions{display:flex;gap:8px}.iconbtn{width:42px;height:42px;border:1px solid var(--line);background:#0d1118;color:#fff;border-radius:50%;display:grid;place-items:center;position:relative}.badge{position:absolute;right:-2px;top:-4px;background:var(--accent);color:#061006;border-radius:99px;font-size:10px;min-width:18px;height:18px;display:grid;place-items:center;font-weight:800}
.menu{display:none}.hero{padding:52px 0 30px}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}.eyebrow{font-size:12px;letter-spacing:4px;color:var(--accent);font-weight:800;text-transform:uppercase}.hero h1{font-size:clamp(46px,7vw,86px);line-height:.95;margin:16px 0}.hero p{font-size:18px;color:#aeb8c5;max-width:600px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#101721;color:#fff;padding:13px 20px;border-radius:10px;font-weight:800;transition:.2s}.btn:hover{transform:translateY(-2px);border-color:#596675}.btn.primary{background:var(--accent);color:#120d05;border-color:var(--accent)}.btn.secondary{background:transparent}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.small{padding:9px 13px;font-size:13px}.hero-visual{border:1px solid #2a3542;border-radius:28px;padding:16px;background:linear-gradient(145deg,#131a24,#06080b);box-shadow:0 30px 80px rgba(0,0,0,.45)}.hero-visual img{width:100%;display:block;border-radius:18px}
.section{padding:62px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section h2{font-size:32px;margin:0}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product{background:linear-gradient(160deg,#101720,#0b0e13);border:1px solid #202b38;border-radius:18px;overflow:hidden;position:relative}.product-img{background:radial-gradient(circle,#253247,#080a0e 68%);padding:16px}.product-img img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block}.product-body{padding:17px}.product h3{margin:0 0 5px;font-size:19px}.product .notes{font-size:12px;color:#94a0af}.price{font-size:18px;font-weight:900;margin-top:12px}.old{color:#6e7884;text-decoration:line-through;font-size:13px;margin-left:7px;font-weight:500}.product-actions{display:flex;gap:8px;margin-top:15px}.wish{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;background:#090c11d9;border:1px solid #3a4654;color:#fff}.wish.active{color:var(--accent);border-color:var(--accent)}
.banner{padding:22px;border:1px solid #2c3947;border-radius:18px;background:linear-gradient(90deg,#151d28,#0b1017);display:flex;align-items:center;justify-content:space-between;gap:20px}.banner strong{font-size:20px}
.page{padding:44px 0 80px}.page-title{margin-bottom:28px}.page-title h1{font-size:44px;margin:0 0 7px}.crumb{color:#8290a0;font-size:13px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:22px}.input,.select,.textarea{background:#0b1016;border:1px solid #26313f;color:#fff;border-radius:10px;padding:12px 13px;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:#6c7888}.searchbox{flex:1;min-width:220px}.filters{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid #283442;background:#0d131b;color:#cbd4df;padding:9px 12px;border-radius:99px;font-size:13px}.chip.active{background:#fff;color:#06080b;border-color:#fff}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:40px}.detail-img{background:#0c1118;border:1px solid #273342;border-radius:24px;padding:20px}.detail-img img{width:100%;display:block}.detail h1{font-size:52px;line-height:1;margin:8px 0 12px}.stars{color:#b9ff8b;letter-spacing:3px}.detail-price{font-size:30px;font-weight:900;margin:18px 0}.qty{display:flex;align-items:center;border:1px solid #2a3542;border-radius:10px;width:max-content;overflow:hidden}.qty button{width:40px;height:42px;background:#101721;border:0;color:#fff}.qty span{width:45px;text-align:center}.detail .buyrow{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}.feature{border:1px solid #26313f;border-radius:12px;padding:12px;background:#0d131a}.feature b{display:block;font-size:13px}.feature span{color:#8f9aa8;font-size:12px}
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.card{background:#0d131a;border:1px solid #24303d;border-radius:18px;padding:20px}.card h2,.card h3{margin-top:0}.cart-row{display:grid;grid-template-columns:90px 1fr auto auto;gap:15px;align-items:center;padding:15px 0;border-bottom:1px solid #202b37}.cart-row img{width:90px;border-radius:10px}.cart-row h3{margin:0}.summary-line{display:flex;justify-content:space-between;padding:8px 0;color:#aab4c1}.summary-line.total{border-top:1px solid #2b3744;margin-top:8px;padding-top:15px;color:#fff;font-size:19px;font-weight:900}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:13px;color:#b4beca}.textarea{min-height:120px;resize:vertical}.notice{padding:13px;border-radius:10px;background:#101822;border:1px solid #293645;color:#b8c2ce;font-size:13px}.success{border-color:#4c8f32;background:#0d190d;color:#c8ffb5}
footer{border-top:1px solid #1e2732;background:#05070a;padding:48px 0 25px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}.footer h3{font-size:13px;letter-spacing:2px;text-transform:uppercase}.footer a,.footer p{color:#8f9aa8;font-size:13px;display:block;margin:8px 0}.copy{border-top:1px solid #1c2530;margin-top:35px;padding-top:18px;color:#6f7a87;font-size:12px}
.empty{text-align:center;padding:70px 20px;border:1px dashed #2c3947;border-radius:18px;color:#909cab}.empty h2{color:#fff}.toast{position:fixed;right:18px;bottom:18px;background:#f4f7fa;color:#06080b;padding:13px 16px;border-radius:10px;font-weight:800;box-shadow:0 12px 40px #0008;z-index:100;transform:translateY(130px);opacity:0;transition:.25s}.toast.show{transform:none;opacity:1}
.modal{position:fixed;inset:0;background:#000b;display:none;place-items:center;z-index:90;padding:20px}.modal.open{display:grid}.modalbox{width:min(520px,100%);background:#0d131a;border:1px solid #2b3745;border-radius:18px;padding:22px}.close{float:right;background:none;border:0;color:#fff;font-size:24px}
@media(max-width:850px){.navlinks{display:none}.menu{display:grid}.hero-grid,.detail,.two{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.hero{padding-top:30px}.detail h1{font-size:42px}}
@media(max-width:560px){.nav{height:68px}.brand{font-size:18px;letter-spacing:2px}.brand img{width:36px;height:36px}.grid{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.field.full{grid-column:auto}.cart-row{grid-template-columns:70px 1fr}.cart-row>.price,.cart-row>.qty{grid-column:2}.cart-row img{width:70px}.footer-grid{grid-template-columns:1fr}.hero h1{font-size:52px}.banner{display:block}.banner .btn{margin-top:12px}}

/* ===== OWL Premium Mobile Sidebar ===== */
.menu{border-color:#344150!important;font-size:20px}
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);z-index:70;display:none}
.mobile-overlay.open{display:block}
.sidebar-close{display:none}
@media(max-width:850px){
  header .nav{position:relative}
  .navlinks{
    position:fixed!important;left:0;top:0;width:min(340px,88vw);height:100dvh;
    margin:0!important;padding:88px 24px 30px!important;
    background:linear-gradient(160deg,#121a24,#06080c 72%);
    border-right:1px solid #354250;box-shadow:20px 0 70px rgba(0,0,0,.55);
    display:flex!important;flex-direction:column!important;gap:5px!important;
    transform:translateX(-105%);transition:transform .28s ease;z-index:80;
    overflow:auto;
  }
  .navlinks.open{transform:translateX(0)!important}
  .navlinks:before{content:"OWL™";position:absolute;left:24px;top:28px;font-size:25px;font-weight:950;letter-spacing:5px;color:#fff}
  .navlinks:after{content:"SIGNATURE FRAGRANCES";position:absolute;left:26px;top:59px;font-size:9px;letter-spacing:3px;color:#e6b75c;font-weight:800}
  .navlinks a{
    display:flex!important;align-items:center;min-height:52px;padding:0 15px!important;
    border:1px solid transparent;border-radius:12px;color:#d9e0e8!important;font-size:16px!important;
  }
  .navlinks a:hover,.navlinks a.active{background:#17202b!important;border-color:#2e3b49!important;color:#e6b75c!important}
  .sidebar-close{
    display:block;position:absolute;right:18px;top:23px;background:#0c1117;
    border:1px solid #344150;color:#fff;border-radius:50%;width:38px;height:38px;font-size:20px;z-index:2
  }
  .navlinks a:nth-child(1):before{content:"⌂";margin-right:12px}
  .navlinks a:nth-child(2):before{content:"✦";margin-right:12px}
  .navlinks a:nth-child(3):before{content:"◉";margin-right:12px}
  .navlinks a:nth-child(4):before{content:"✉";margin-right:12px}
  .actions{margin-left:auto}
}
@media(max-width:560px){
  .hero-visual{border-radius:22px;padding:9px}
  .hero-visual img{border-radius:15px}
  .section{padding:45px 0}
  .section h2{font-size:27px}
  .product{border-radius:16px}
  .product-body{padding:14px}
  .btn{border-radius:11px}
  .page{padding-top:30px}
}

/* ===== OWL App-style Bottom Navigation ===== */
.mobile-bottom-nav{display:none}
@media(max-width:850px){
  body{padding-bottom:78px}
  .mobile-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;height:72px;z-index:95;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:rgba(8,11,15,.97);backdrop-filter:blur(18px);
    border-top:1px solid #283441;box-shadow:0 -12px 35px rgba(0,0,0,.35);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bottom-nav a{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;color:#8793a1;font-size:10px;font-weight:800;letter-spacing:.2px;
    transition:.18s;
  }
  .mobile-bottom-nav a .bn-icon{
    width:38px;height:30px;display:grid;place-items:center;border-radius:12px;
    font-size:20px;line-height:1;
  }
  .mobile-bottom-nav a.active{color:#e6b75c}
  .mobile-bottom-nav a.active .bn-icon{
    background:rgba(117,255,23,.12);color:#e6b75c;
    box-shadow:0 0 18px rgba(117,255,23,.10);
  }
  .mobile-bottom-nav .bn-badge{
    position:absolute;top:7px;right:20%;
    min-width:17px;height:17px;padding:0 4px;border-radius:99px;
    background:#e6b75c;color:#120d05;font-size:9px;display:grid;place-items:center;
    font-weight:950;border:2px solid #080b0f;
  }
}
@media(max-width:380px){
  .mobile-bottom-nav a{font-size:9px}
  .mobile-bottom-nav .bn-badge{right:15%}
}

/* Mobile: keep navigation actions only in the bottom app bar */
@media(max-width:850px){
  header .actions{display:none!important}
  header .brand{margin-left:auto;margin-right:auto}
  header .menu{position:absolute;left:0}
  header .nav{justify-content:center}
}

.poster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.poster-card{display:block;position:relative;overflow:hidden;border-radius:22px;border:1px solid #2b3846;background:#090d12;box-shadow:0 20px 55px rgba(0,0,0,.3);transition:.25s}
.poster-card:hover{transform:translateY(-5px);border-color:#526170;box-shadow:0 28px 70px rgba(0,0,0,.5)}
.poster-card img{width:100%;display:block}
.poster-label{position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:99px;background:#070a0dcc;border:1px solid #394654;color:#fff;font-size:11px;font-weight:900;letter-spacing:1px}
@media(max-width:850px){.poster-grid{grid-template-columns:1fr 1fr}.poster-card:first-child{grid-column:1/-1}}
@media(max-width:560px){.poster-grid{grid-template-columns:1fr}.poster-card:first-child{grid-column:auto}}

/* ===== OWL 3D LUXURY EXPERIENCE ===== */
body{
  background:
    radial-gradient(circle at 50% -12%,rgba(230,183,92,.14),transparent 35%),
    radial-gradient(circle at 100% 35%,rgba(82,49,130,.10),transparent 28%),
    #050608;
}
header{box-shadow:0 8px 35px rgba(0,0,0,.35)}
.hero-visual{
  position:relative;overflow:hidden;
  transform:perspective(1200px) rotateX(1deg);
  box-shadow:0 35px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08);
}
.hero-visual:after{
  content:"";position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.11) 46%,transparent 57%);
  transform:translateX(-35%) rotate(4deg);animation:owlShine 7s infinite;
  pointer-events:none;
}
@keyframes owlShine{0%,55%{transform:translateX(-65%) rotate(4deg)}75%,100%{transform:translateX(65%) rotate(4deg)}}
.product{
  transform:translateZ(0);
  box-shadow:0 18px 35px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.product:hover{
  transform:translateY(-7px) perspective(800px) rotateX(1deg);
  box-shadow:0 28px 55px rgba(0,0,0,.48),0 0 30px rgba(230,183,92,.08);
  border-color:#6b5330;
}
.product-img{
  position:relative;
  background:
    radial-gradient(circle at 50% 35%,rgba(230,183,92,.18),transparent 28%),
    radial-gradient(circle,#273344,#06080b 70%);
}
.product-img:after{
  content:"";position:absolute;left:17%;right:17%;bottom:10%;height:18%;
  background:rgba(0,0,0,.55);filter:blur(15px);border-radius:50%;
}
.banner{
  box-shadow:0 18px 45px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.05);
}
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.promo-card{display:block;border:1px solid #3a2c18;border-radius:20px;overflow:hidden;background:#090b0f;box-shadow:0 22px 55px rgba(0,0,0,.45);transition:.25s}
.promo-card:hover{transform:translateY(-6px) scale(1.01);border-color:#8a6730;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 35px rgba(230,183,92,.09)}
.promo-card img{width:100%;display:block}
.essence-promo{margin-top:20px;border-radius:20px;overflow:hidden;border:1px solid #3a2c18;box-shadow:0 25px 60px rgba(0,0,0,.45)}
.essence-promo img{width:100%;display:block}
.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.category-card{
  min-height:145px;border:1px solid #27303a;border-radius:17px;padding:18px;
  background:linear-gradient(145deg,#151a20,#080a0d);
  display:flex;flex-direction:column;justify-content:end;
  box-shadow:0 14px 30px rgba(0,0,0,.28);transition:.22s;position:relative;overflow:hidden
}
.category-card:before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-35px;top:-35px;background:rgba(230,183,92,.12);filter:blur(2px)}
.category-card:hover{transform:translateY(-5px);border-color:#69502b}
.category-card b{position:relative;font-size:15px}
.category-card span{position:relative;color:#d8a84e;font-size:12px;margin-top:8px}
.benefit-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:20px;border:1px solid #26303a;border-radius:17px;overflow:hidden;background:#26303a}
.benefit{padding:18px;background:#0c1015;display:flex;gap:12px;align-items:center}
.benefit .bi{font-size:25px;color:#e6b75c}.benefit b{font-size:13px;display:block}.benefit span{font-size:11px;color:#8994a1}
@media(max-width:850px){
  .promo-grid{grid-template-columns:1fr;gap:12px}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-row{grid-template-columns:repeat(2,1fr)}
  .promo-card,.essence-promo{border-radius:16px}
}
@media(max-width:560px){
  .category-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .category-card{min-height:115px;padding:13px}
  .benefit{padding:13px}
}