:root{
  --yellow:#FFD60A;
  --orange:#FF9D00;
  --white:#ffffff;
  --ink:#111111;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:10px;
  --speed: .35s;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100% display:flex; min-height:100vh; flex-direction:column; }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background: var(--white);
  line-height:1.6;
  overflow-x:hidden;
}

/* Preloader */
#preloader{
  position:fixed; inset:0; background:var(--white); z-index:9999;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:18px;
  transition:opacity .5s ease, visibility .5s ease;
}
body.loaded #preloader{opacity:0; visibility:hidden}
#preloader .logo{
  font-weight:900; font-size:clamp(24px, 5vw, 42px);
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: hue 4s linear infinite;
}
#preloader .bar{ width:220px; height:8px; background:#f6f6f6; border-radius:99px; overflow:hidden; box-shadow: var(--shadow); }
#preloader .bar span{ display:block; width:40%; height:100%; background:linear-gradient(90deg, var(--yellow), var(--orange)); border-radius:99px; animation:load 1.4s ease-in-out infinite; }
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
@keyframes hue {0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}

/* Layout */
.container{ width:min(1200px, 92%); margin-inline:auto; }

header.site{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: saturate(180%) blur(6px);
  background:rgba(255,255,255,.8);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ height:38px; width:auto; }
.brand span{ font-weight:900; letter-spacing:.5px; background: linear-gradient(90deg, var(--yellow), var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.navlinks{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.navlinks a{ text-decoration:none; color:var(--ink); font-weight:600; padding:10px 14px; border-radius:12px; transition:transform var(--speed), background var(--speed); }
.navlinks a:hover{ transform:translateY(-1px); background:rgba(0,0,0,.04); }
.navcta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.btn{
  --p:12px 16px;
  --bg: var(--ink);
  --fg: var(--white);
  position:relative; display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; user-select:none; border:none; border-radius:14px; padding:var(--p);
  font-weight:800; text-decoration:none; background:var(--bg); color:var(--fg);
  transition:transform var(--speed), box-shadow var(--speed), background var(--speed), color var(--speed);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  overflow:hidden;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.btn:active{ transform: translateY(0) scale(.98); }

.btn-ghost{ --bg:#f6f6f6; --fg:var(--ink); }
.btn-yellow{ --bg:linear-gradient(90deg, var(--yellow), var(--orange)); --fg:#111; }
.btn-outline{ background:transparent; color:var(--ink); border:2px solid rgba(0,0,0,.1) }

/* Ripple */
.btn .ripple { position:absolute; border-radius:50%; transform:scale(0); animation:ripple .6s linear; background:rgba(0,0,0,.15); }
@keyframes ripple{ to{ transform:scale(4); opacity:0 } }

/* Hero */
.hero{
  padding: clamp(40px, 9vw, 120px) 0 56px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center;
}
@media (max-width: 960px){ .hero{ grid-template-columns:1fr; } }
.gradient-title{
  font-size:clamp(36px, 8vw, 72px); line-height:1.05; margin:0 0 12px 0; font-weight:1000;
  background: linear-gradient(120deg, var(--yellow), var(--orange), var(--yellow));
  background-size:200% 200%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: gradshift 6s ease-in-out infinite;
}
@keyframes gradshift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero p{ font-size:clamp(16px, 2.6vw, 21px); color:rgba(0,0,0,.7); margin:0 0 20px; }
.hero .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-card{ background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.hero-card ul{ display:grid; gap:10px; padding-left:20px; margin:0; }

.section{ padding:64px 0; }
.section .title{ font-size:clamp(24px, 4.6vw, 40px); margin:0 0 16px; font-weight:900; background: linear-gradient(90deg, var(--yellow), var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section .subtitle{ color:rgba(0,0,0,.7); margin-top:4px; }

.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width: 960px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px){ .features{ grid-template-columns:1fr; } }
.feature{
  background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius-sm); padding:18px; box-shadow:var(--shadow);
  transform: translateY(12px); opacity:0; transition: transform .6s ease, opacity .6s ease;
}
.feature.reveal{ transform: translateY(0); opacity:1; }
.feature .icon{ width:38px; height:38px; border-radius:10px; background:linear-gradient(90deg, var(--yellow), var(--orange)); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.feature h3{ margin:12px 0 6px; font-size:18px; }
.feature p{ margin:0; color:rgba(0,0,0,.72) }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width: 960px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px){ .stats{ grid-template-columns:1fr; } }
.stat{ background:#fdf8e0; border:1px dashed rgba(0,0,0,.08); border-radius:var(--radius-sm); padding:24px; text-align:center; }
.stat .num{ font-size:clamp(24px, 4.6vw, 36px); font-weight:900; }
.stat .lbl{ color:rgba(0,0,0,.7) }

.socials{ display:flex; gap:10px; flex-wrap:wrap; }
.iconbtn{ --p:10px 12px; border:1px solid rgba(0,0,0,.06); background:#fff; }
.iconbtn img{ width:20px; height:20px; }

/* Footer */
footer.site{ margin-top:auto; padding:30px 0; border-top:1px solid rgba(0,0,0,.06); background:#fffef6; }
footer .grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; }
@media (max-width: 720px){ footer .grid{ grid-template-columns:1fr; } }
footer a{ color:inherit; text-decoration:none; opacity:.9 }
footer a:hover{ opacity:1; text-decoration:underline }

/* Products page */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 22px; }
.search{
  flex:1; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:10px 14px; box-shadow:var(--shadow);
}
.search input{ border:none; outline:none; flex:1; font-size:16px; background:transparent; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:10px 14px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff; cursor:pointer; font-weight:700; }
.chip.active{ background: linear-gradient(90deg, var(--yellow), var(--orange)); }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 980px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .grid{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  transform: translateY(10px) scale(.98); opacity:0; transition: transform .5s ease, opacity .5s ease;
}
.card.reveal{ transform: translateY(0) scale(1); opacity:1; }
.card .thumb{ aspect-ratio: 16/10; background:linear-gradient(90deg, rgba(255,214,10,.2), rgba(255,157,0,.2)); display:flex; align-items:center; justify-content:center; }
.card .thumb img{ width:60%; height:auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.1)); }
.card .body{ padding:16px; }
.badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:6px 10px; border-radius:999px;
  background:#fff9d8; border:1px solid rgba(0,0,0,.06); font-weight:800;
}
.badge.discount{ background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.card h4{ margin:6px 0 6px; font-size:18px; }
.price{ display:flex; align-items:baseline; gap:10px; font-weight:900; }
.price .now{ color:#111; }
.price .was{ opacity:.6; text-decoration: line-through; }
.stock{ font-size:13px; color:rgba(0,0,0,.7); margin-top:6px; }
.card .actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px; z-index:2000; }
.modal.active{ display:flex; }
.modal .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); animation: fadeIn .3s ease; }
.modal .dialog{
  position:relative; z-index:1; width:min(860px, 96%); background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.25);
  display:grid; grid-template-columns:1fr 1fr;
}
@media (max-width: 820px){ .modal .dialog{ grid-template-columns:1fr; } }
.modal .preview{ background:linear-gradient(90deg, rgba(255,214,10,.12), rgba(255,157,0,.12)); padding:24px; display:flex; align-items:center; justify-content:center; }
.modal .preview img{ width:80%; height:auto; }
.modal .content{ padding:20px 20px 24px; }
.modal .row{ display:grid; gap:8px; margin-bottom:12px; }
.modal .row label{ font-weight:800; }
.modal .variants{ display:flex; gap:8px; flex-wrap:wrap; }
.variant{ padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.08); cursor:pointer; }
.variant.active{ background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.qty{ display:flex; align-items:center; gap:10px; }
.qty button{ width:34px; height:34px; border-radius:10px; border:1px solid rgba(0,0,0,.08); background:#fff; font-weight:900; }
.total{ font-size:20px; font-weight:1000; }
.modal .footer{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* Floating cart (products page) */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:1600;
  width:56px; height:56px; border-radius:50%; background:linear-gradient(90deg, var(--yellow), var(--orange));
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 16px 40px rgba(0,0,0,.22);
  animation: pop .8s ease;
}
@keyframes pop { 0%{ transform:scale(.5); opacity:0 } 100%{ transform:scale(1); opacity:1 } }
.fab .count{
  position:absolute; top:-6px; right:-6px; background:#111; color:#fff; border-radius:999px; padding:4px 8px; font-size:12px; font-weight:900;
  border:2px solid #fff;
}
.cartpanel{
  position:fixed; right:0; top:0; height:100vh; width:min(420px, 92%);
  transform: translateX(100%); transition: transform .4s ease; z-index:1650;
  background:#fff; border-left:1px solid rgba(0,0,0,.06); box-shadow:-10px 0 40px rgba(0,0,0,.18);
  display:flex; flex-direction:column;
}
.cartpanel.active{ transform: translateX(0); }
.cartpanel header{ padding:18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0,0,0,.06); }
.cart-items{ flex:1; overflow:auto; padding:10px; display:grid; gap:10px; }
.cart-item{ display:grid; grid-template-columns:60px 1fr auto; gap:10px; align-items:center; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:8px; }
.cart-item img{ width:60px; height:60px; object-fit:cover; border-radius:10px; background:rgba(255,214,10,.1); }
.cart-item .name{ font-weight:800; }
.cart-item .meta{ font-size:12px; color:rgba(0,0,0,.7) }
.cart-item .qtyctrl{ display:flex; align-items:center; gap:8px; }
.cart-note{ padding:10px; }
.cartpanel footer{ border-top:1px solid rgba(0,0,0,.06); padding:14px; display:grid; gap:10px; }

/* Feedback */
.slider{
  position:relative; overflow:hidden; border-radius:18px; border:1px solid rgba(0,0,0,.06); background:#fff; box-shadow:var(--shadow);
}
.track{ display:flex; gap:16px; overflow:auto; scroll-behavior:smooth; padding:16px; }
.card-fb{
  min-width:280px; max-width:320px; background:#fffef6; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px;
}
.fb-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(90deg, var(--yellow), var(--orange)); color:#111; display:flex; align-items:center; justify-content:center; font-weight:1000; }
.stars{ display:flex; align-items:center; gap:2px; }
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; pointer-events:none;
}
.slider .nav button{ pointer-events:all; }

/* Utility reveal animation */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.in{ opacity:1; transform: translateY(0); transition: all .6s ease; }

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}
main{ flex:1 0 auto; }

/* Burger menu (mobile) */
.menu-toggle{ display:none; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; transition: transform var(--speed), opacity var(--speed); }
.site.open .menu-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.site.open .menu-toggle span:nth-child(2){ opacity:0; }
.site.open .menu-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px){
  .menu-toggle{ display:inline-flex; }
  .navcta{ display:none; }
  .navlinks{
    position:fixed; inset:0; z-index:2000;
    background:rgba(255,255,255,.98);
    display:flex; flex-direction:column; align-items:flex-start;
    padding:86px 22px 22px; gap:8px;
    transform: translateY(-100%); transition: transform .35s ease;
  }
  .site.open .navlinks{ transform: translateY(0); }
  .navlinks a{ width:100%; font-size:20px; padding:14px 12px; border-radius:12px; }
}


/* v4: burger clickability & nav pointer-events */
.menu-toggle{ z-index:1300; touch-action:manipulation; }
@media (max-width: 960px){
  .navlinks{ pointer-events:none; }
  body.nav-open .navlinks{ pointer-events:auto; }
}


/* === v6 override: disable old mobile panel on .navlinks, we use .navpanel now === */
@media (max-width: 860px){
  header.site .navlinks{ display:none !important; transform:none !important; position:static !important; }
  header.site .navcta{ display:none !important; }
}


/* === Mobile navpanel (v6) === */
.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.38);
  opacity:0; pointer-events:none; transition: opacity var(--speed) ease;
  z-index: 1900;
}
.nav-overlay.active{ opacity:1; pointer-events:auto; }

.navpanel{
  position: fixed; inset: 0;
  display: none;
  z-index: 2001;
}
.navpanel.active{ display:block; }

.navpanel-inner{
  position: absolute; inset: 0;
  background: rgba(255,255,255,.98);
  transform: translateY(-100%);
  transition: transform var(--speed) ease;
  display: flex; flex-direction: column;
  padding: 86px 22px 22px;
}
.navpanel.active .navpanel-inner{
  transform: translateY(0);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.navpanel-group{ display:flex; flex-direction:column; gap:10px; height:100%; }
.navpanel-links{ display:flex; flex-direction:column; gap:8px; }
.navpanel-links a{ width:100%; font-size:20px; padding:14px 12px; border-radius:12px; opacity:0; transform:translateY(10px); }
.navpanel-cta{ margin-top:auto; display:flex; gap:10px; }
.navpanel-cta .btn{ width:100%; justify-content:center; }

/* Stagger */
.navpanel.active .navpanel-links a{
  opacity:1; transform:translateY(0);
  transition: transform .45s ease, opacity .45s ease, background var(--speed);
}
.navpanel.active .navpanel-links a:nth-child(1){ transition-delay:.03s; }
.navpanel.active .navpanel-links a:nth-child(2){ transition-delay:.06s; }
.navpanel.active .navpanel-links a:nth-child(3){ transition-delay:.09s; }
.navpanel.active .navpanel-links a:nth-child(4){ transition-delay:.12s; }
.navpanel.active .navpanel-links a:nth-child(5){ transition-delay:.15s; }
.navpanel.active .navpanel-links a:nth-child(6){ transition-delay:.18s; }
.navpanel.active .navpanel-links a:nth-child(7){ transition-delay:.21s; }
.navpanel.active .navpanel-links a:nth-child(8){ transition-delay:.24s; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .nav-overlay, .navpanel-inner, .navpanel-links a{ transition:none !important; }
}