:root{
  --purple-dark:#3b1150;
  --purple:#5a1f7a;
  --purple-light:#8b3fae;
  --magenta:#e4007c;
  --magenta-dark:#b8005f;
  --navy:#101a33;
  --sidebar:#1c1c1c;
  --sidebar-hover:#2c2c2c;
  --gray-text:#4a4a4a;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Arial Black', Arial, Helvetica, sans-serif;
  background:#ffffff;
  color:var(--gray-text);
  overflow-x:hidden;
}
a{text-decoration:none; color:inherit;}

.page{display:flex; min-height:100vh;}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:230px; min-width:230px;
  background:var(--sidebar);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar-logo{display:flex; align-items:center; gap:10px; padding:28px 20px 20px;}
.bell-icon{width:46px; height:46px;}
.bell-icon svg{width:100%; height:100%;}
.logo-text{color:#fff; font-size:15px; letter-spacing:1px; font-weight:900; line-height:1.1;}
nav.sidebar-nav{display:flex; flex-direction:column; margin-top:10px;}
.nav-item{
  color:#e6e6e6; font-weight:800; font-size:15px; letter-spacing:.5px;
  padding:18px 22px; display:flex; align-items:center; justify-content:space-between;
  border-left:4px solid transparent; transition:background .15s ease; cursor:pointer;
}
.nav-item:hover{background:var(--sidebar-hover);}
.nav-item.active{
  background:linear-gradient(135deg, var(--magenta), var(--magenta-dark));
  color:#fff; border-left:4px solid #fff;
}
.nav-item .arrow{font-size:12px; opacity:.7; transition:transform .2s ease;}
.nav-item.open .arrow{transform:rotate(180deg);}
.nav-item-row{display:flex; align-items:center; justify-content:space-between;}
.nav-item-row a{flex:1; color:inherit;}
.nav-item-row .arrow-btn{padding:4px 8px; cursor:pointer;}
.submenu{max-height:0; overflow:hidden; background:#151515; transition:max-height .25s ease;}
.submenu.open{max-height:600px;}
.submenu a{
  display:block; color:#b8b8b8; font-size:13px; font-weight:700; letter-spacing:.3px;
  padding:12px 22px 12px 40px; border-left:4px solid transparent;
}
.submenu a:hover{color:#fff; background:var(--sidebar-hover); border-left:4px solid var(--magenta);}
.submenu a.current{color:#fff; border-left:4px solid var(--magenta); background:var(--sidebar-hover);}

.hamburger{
  display:none; flex-direction:column; gap:4px; width:34px; height:34px;
  align-items:center; justify-content:center; border-radius:50%; background:#f2f2f2;
  cursor:pointer; margin-right:auto;
}
.hamburger span{width:16px; height:2px; background:#333; display:block;}
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9;}
.sidebar-overlay.show{display:block;}

/* ---------- MAIN / TOPBAR ---------- */
.main{flex:1; min-width:0;}
.topbar{
  display:flex; justify-content:flex-end; align-items:center; gap:14px;
  padding:14px 30px; border-bottom:1px solid #eee;
}
.lang-pill{
  display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  color:#333; padding:6px 10px; border-radius:20px; background:#f2f2f2;
}
.lang-pill:hover{background:#e6e6e6;}
.icon-circle{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:#f2f2f2; color:#333; font-size:15px;
}
.icon-circle.pink{background:linear-gradient(135deg, var(--magenta), var(--purple-light)); color:#fff;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:linear-gradient(120deg, var(--purple-dark) 0%, var(--purple) 55%, var(--purple-light) 100%);
  color:#fff; padding:60px 50px; display:flex; align-items:center; justify-content:space-between;
  gap:30px; min-height:420px; overflow:hidden;
}
.hero-left{max-width:420px; z-index:2;}
.hero-title{font-size:56px; line-height:0.95; font-weight:900; letter-spacing:-1px; text-transform:uppercase; margin-bottom:24px;}
.price-tag{
  display:inline-flex; align-items:flex-end; gap:6px; background:rgba(255,255,255,0.08);
  border:2px solid rgba(255,255,255,0.25); border-radius:16px; padding:16px 22px; margin-bottom:14px;
}
.price-tag .currency{font-size:26px; font-weight:900;}
.price-tag .amount{font-size:64px; font-weight:900; line-height:1;}
.price-tag .old{font-size:24px; font-weight:800; text-decoration:line-through; opacity:.7; margin-left:8px;}
.limited{
  background:#fff; color:var(--purple-dark); display:inline-block; font-size:13px; font-weight:900;
  letter-spacing:.5px; padding:8px 16px; text-transform:uppercase;
}
.hero-right{text-align:right; z-index:2;}
.hero-right .product-name{font-size:40px; font-weight:900; line-height:1.05; text-transform:uppercase; margin-bottom:20px;}
.product-art{
  width:340px; height:220px; border-radius:14px;
  background-image:url('https://images.unsplash.com/photo-1574365361850-8e8aec561723?fm=jpg&q=70&w=900&auto=format&fit=crop');
  background-size:cover; background-position:center; position:relative; box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,.25); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; z-index:3;
}
.hero-arrow.left{left:20px;}
.hero-arrow.right{right:20px;}
.hero-fine-print{position:absolute; bottom:14px; left:50px; font-size:10px; color:rgba(255,255,255,.6); max-width:600px;}

/* ---------- SECTION HEADER ---------- */
.section-title{
  text-align:center; font-size:34px; font-weight:900; text-transform:uppercase; letter-spacing:1px;
  color:#1a1a1a; margin:60px 0 36px; position:relative; display:block;
}
.section-title span{border-bottom:4px solid #2ec4b6; padding-bottom:6px;}

/* ---------- HOMEPAGE MENU GRID ---------- */
.menu-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0; max-width:1100px; margin:0 auto 40px; padding:0 30px;
}
.menu-card{display:block; padding:18px; text-align:center; cursor:pointer; transition:transform .15s ease;}
.menu-card:hover{transform:translateY(-4px);}
.menu-thumb{
  width:100%; aspect-ratio:1/1; max-width:180px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:64px;
  background-color:#ffffff; background-size:contain; background-repeat:no-repeat; background-position:center;
  box-shadow:0 6px 18px rgba(0,0,0,.14), inset 0 0 0 1px #f0f0f0; border:6px solid #ffffff;
}
.menu-label{
  display:flex; align-items:center; justify-content:center; gap:10px; font-size:18px; font-weight:900;
  letter-spacing:.5px; color:#1a1a1a; text-transform:uppercase;
}
.menu-label .ic{font-size:20px;}

/* ---------- PROMOS BUTTON ---------- */
.promos-btn-wrap{text-align:center; margin:10px 0 50px;}
.promos-btn{
  background:linear-gradient(135deg, var(--purple), var(--purple-light)); color:#fff; border:none;
  padding:16px 44px; border-radius:30px; font-weight:900; font-size:15px; letter-spacing:1px;
  text-transform:uppercase; cursor:pointer; box-shadow:0 8px 20px rgba(90,31,122,.35);
}

/* ---------- SPECIAL OFFERS ---------- */
.offers{max-width:1100px; margin:0 auto 60px; padding:0 30px; display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.offer-card{
  border-radius:18px; padding:26px; min-height:260px; position:relative; display:flex; flex-direction:column;
  justify-content:flex-end; color:#fff; font-weight:900; font-size:26px; text-transform:uppercase;
  font-style:italic; overflow:hidden;
}
.offer-card.temporary{background:linear-gradient(135deg, #3b1150, #6a2a8f);}
.offer-card.ongoing{background:linear-gradient(135deg, #8b1f6b, #b8358a);}
.offer-card .arrows{position:absolute; top:20px; left:20px; font-size:20px; opacity:.8;}
.offer-card .art{
  position:absolute; top:20px; right:20px; width:130px; height:100px; border-radius:12px;
  background-size:cover; background-position:center; transform:rotate(4deg);
}

/* ---------- INSTAGRAM ---------- */
.insta{text-align:center; margin:0 0 60px;}
.insta-icon{
  width:54px; height:54px; margin:0 auto 12px; border:2px solid #333; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.insta-handle{font-size:22px; font-weight:800; font-style:italic; color:#1a1a1a;}

/* ---------- MENU PAGE (categories + products) ---------- */
.menu-page{display:flex; gap:50px; padding:40px 50px 70px; align-items:flex-start;}
.categories-panel{width:220px; min-width:220px;}
.categories-panel h2{font-size:24px; font-weight:900; color:#1a1a1a; margin-bottom:18px;}
.cat-list{display:flex; flex-direction:column;}
.cat-item{
  padding:14px 16px; font-size:14px; font-weight:800; letter-spacing:.3px; color:#333;
  text-transform:uppercase; border-bottom:1px solid #eee; transition:background .15s ease;
}
.cat-item:hover{background:#f5f5f5;}
.cat-item.active{background:#e9e9e9; color:#000;}
.products-panel{flex:1; min-width:0;}
.products-panel h1{font-size:34px; font-weight:900; text-transform:uppercase; color:#1a1a1a; margin-bottom:26px;}
.product-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.product-card{text-align:center; padding:10px; background:#fff;}
.product-desc{font-size:12px; color:#888; line-height:1.4; margin-bottom:6px; min-height:32px;}
.product-thumb{
  width:100%; aspect-ratio:1/1; border-radius:50%; background-color:#ffffff; background-size:contain;
  background-repeat:no-repeat; background-position:center; display:flex; align-items:center; justify-content:center;
  font-size:56px; margin-bottom:14px; box-shadow:0 6px 18px rgba(0,0,0,.14), inset 0 0 0 1px #f0f0f0; border:6px solid #ffffff;
}
.product-name{font-size:16px; font-weight:800; color:#1a1a1a; margin-bottom:4px;}
.product-price{font-size:14px; font-weight:700; color:#777;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy); color:#fff; padding:44px 40px 28px;}
.footer-top{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px;
  padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.12);
}
.follow{display:flex; align-items:center; gap:16px; font-weight:800; letter-spacing:.5px;}
.follow .icons{display:flex; gap:14px; font-size:18px;}
.download{display:flex; align-items:center; gap:16px; font-weight:800;}
.store-badge{
  display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.4); border-radius:8px;
  padding:8px 16px; font-size:13px; font-weight:700;
}
.footer-mid{display:flex; flex-wrap:wrap; gap:40px; padding:30px 0; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-action{display:flex; align-items:center; gap:12px;}
.footer-action .circle{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.4); display:flex;
  align-items:center; justify-content:center; font-size:16px;
}
.footer-action span.label{
  border:1px solid rgba(255,255,255,.4); border-radius:18px; padding:8px 18px; font-weight:800;
  font-size:13px; letter-spacing:.5px;
}
.footer-links{padding-top:20px; font-size:13px; font-weight:600; letter-spacing:.3px; line-height:2; color:#d8d8d8;}
.footer-links a{margin-right:6px;}
.footer-fine{font-size:11px; color:#8b93a7; margin-top:14px;}

@media (max-width: 900px){
  .sidebar{position:fixed; z-index:10; left:0; transform:translateX(-100%); transition:transform .25s ease;}
  .sidebar.mobile-open{transform:translateX(0);}
  .hamburger{display:flex;}
  .menu-grid{grid-template-columns:1fr 1fr;}
  .offers{grid-template-columns:1fr;}
  .hero{flex-direction:column; text-align:center; padding:40px 20px;}
  .hero-title{font-size:38px;}
  .menu-page{flex-direction:column; padding:24px;}
  .categories-panel{width:100%;}
  .product-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 520px){
  .product-grid{grid-template-columns:1fr;}
}