/* ==========================================================
   G_SHOP — styles.css v2.0
   Glassmorphism + 3D + Aurora
   ========================================================== */

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ============ Design Tokens ============ */
:root{
  --ink:#0a0a0a; --ink-1:#0f0f0f; --ink-2:#151515; --ink-3:#1c1c1c;
  --paper:#f4f1ea; --paper-2:#e8e3d6;

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --text:#f5f5f5; --dim:#8a8a8a; --faint:#4a4a4a;

  --lime:#d4ff3f; --red:#ff4b3e; --green:#4ade80; --gold:#fbbf24;
  --purple:#a89bff; --orange:#fb923c; --blue:#229ED9;

  /* Glass */
  --glass-bg:rgba(255,255,255,.045);
  --glass-bg-hi:rgba(255,255,255,.08);
  --glass-line:rgba(255,255,255,.12);
  --glass-blur:blur(24px) saturate(180%);

  /* Glow */
  --glow-lime:rgba(212,255,63,.35);
  --glow-purple:rgba(168,155,255,.28);
  --glow-blue:rgba(34,158,217,.22);

  /* Radius */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px;

  /* Easing */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* Shadows */
  --shadow-lg:0 25px 50px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03) inset;
  --shadow-md:0 15px 30px -10px rgba(0,0,0,.55);
  --shadow-glow:0 0 60px -20px rgba(212,255,63,.25);
}

[data-theme="light"]{
  --ink:#f4f1ea; --ink-1:#faf8f3; --ink-2:#ffffff; --ink-3:#ebe6da;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.15);
  --text:#0a0a0a; --dim:#5a5a5a; --faint:#9a9a9a;
  --lime:#1a1a1a; --paper:#0a0a0a; --paper-2:#1a1a1a;

  --glass-bg:rgba(255,255,255,.65);
  --glass-bg-hi:rgba(255,255,255,.85);
  --glass-line:rgba(0,0,0,.08);
  --glow-lime:rgba(212,255,63,.6);
  --glow-purple:rgba(168,155,255,.4);
  --shadow-lg:0 25px 50px -12px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.03) inset;
}

/* ============ Base ============ */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Vazirmatn',system-ui,sans-serif;
  background:var(--ink);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  font-feature-settings:"ss01","ss02","kern" 1;
  text-rendering:optimizeLegibility;
  transition:background .3s,color .3s;
  position:relative;
  min-height:100vh;
}

body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit}

/* ============ Aurora Background ============ */
.aurora{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.85;
}
.aurora__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  will-change:transform;
}
.aurora__blob--1{
  width:700px;height:700px;
  background:radial-gradient(circle,var(--glow-lime),transparent 65%);
  top:-200px;right:-150px;
  animation:auroraFloat1 22s ease-in-out infinite;
}
.aurora__blob--2{
  width:600px;height:600px;
  background:radial-gradient(circle,var(--glow-purple),transparent 65%);
  bottom:-200px;left:-150px;
  animation:auroraFloat2 26s ease-in-out infinite;
}
.aurora__blob--3{
  width:500px;height:500px;
  background:radial-gradient(circle,var(--glow-blue),transparent 65%);
  top:40%;left:35%;
  animation:auroraFloat3 30s ease-in-out infinite;
  opacity:.7;
}
@keyframes auroraFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-80px,80px) scale(1.15)}
}
@keyframes auroraFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(100px,-60px) scale(1.1)}
}
@keyframes auroraFloat3{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(60px,-40px) scale(1.2)}
  66%{transform:translate(-40px,60px) scale(.9)}
}

/* Grid overlay */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,black 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 80%);
  opacity:.6;
}

/* Noise */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.025;
  mix-blend-mode:overlay;
}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--lime)}

::selection{background:var(--lime);color:var(--ink)}

/* ============ Wrap ============ */
.wrap{max-width:1400px;margin:0 auto;padding:0 clamp(20px,4vw,60px);position:relative;z-index:3}

.mono{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em}

.tag{
  display:inline-block;
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:8px 16px;
  border:1px solid var(--glass-line);
  border-radius:100px;
  color:var(--dim);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  transition:all .3s var(--ease);
}
.tag:hover{
  border-color:var(--lime);
  color:var(--lime);
  box-shadow:0 0 24px -8px var(--glow-lime);
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ Scroll Progress ============ */
.scroll-progress{position:fixed;top:0;right:0;left:0;height:2px;z-index:9999;background:transparent;pointer-events:none}
.scroll-progress__bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--lime),var(--green),var(--lime));
  background-size:200% 100%;
  animation:scrollShimmer 3s linear infinite;
  box-shadow:0 0 16px var(--glow-lime);
  transition:width .1s linear;
}
@keyframes scrollShimmer{0%{background-position:0 0}100%{background-position:200% 0}}

/* ============ Ticker ============ */
.ticker{
  background:linear-gradient(90deg,var(--lime),color-mix(in srgb,var(--lime) 80%,var(--green)));
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.05em;
  padding:10px 0;
  overflow:hidden;
  position:relative;
  z-index:100;
  box-shadow:0 4px 24px -8px var(--glow-lime);
}
.ticker__track{display:flex;gap:60px;white-space:nowrap;animation:ticker 35s linear infinite}
.ticker__track span{display:inline-flex;align-items:center;gap:60px}
.ticker__track span::after{content:'✦';opacity:.5;margin-inline-start:60px}
@keyframes ticker{to{transform:translateX(50%)}}

/* ============ Nav ============ */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  padding:18px 0;
  transition:all .4s var(--ease);
  background:color-mix(in srgb,var(--ink) 70%,transparent);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid transparent;
}
.nav::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.nav.scrolled{padding:12px 0;border-bottom-color:var(--line)}
.nav.scrolled::after{opacity:.4}

.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:-.04em;
  position:relative;
  transition:transform .3s var(--spring);
}
.nav__brand:hover{transform:scale(1.03)}
.nav__brand .dot{
  color:var(--lime);
  text-shadow:0 0 12px var(--lime);
}

.nav__links{display:flex;gap:28px}
.nav__links a{
  font-size:14px;
  color:var(--dim);
  position:relative;
  transition:color .3s var(--ease);
  cursor:pointer;
  padding:4px 0;
}
.nav__links a::after{
  content:'';
  position:absolute;
  bottom:-2px;
  right:0;left:0;
  height:2px;
  background:linear-gradient(90deg,var(--lime),var(--green));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--spring);
  border-radius:2px;
  box-shadow:0 0 12px var(--glow-lime);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__actions{display:flex;align-items:center;gap:10px}

.icon-btn{
  width:44px;height:44px;
  border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--glass-line);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  position:relative;
  transition:all .35s var(--spring);
}
.icon-btn:hover{
  background:var(--lime);
  color:var(--ink);
  border-color:var(--lime);
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 12px 30px -8px var(--glow-lime);
}
.icon-btn svg{width:17px;height:17px;transition:transform .3s var(--spring)}
.icon-btn:hover svg{transform:scale(1.1)}

.icon-btn .badge{
  position:absolute;
  top:-4px;left:-4px;
  background:var(--lime);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:10px;
  min-width:20px;height:20px;
  border-radius:100px;
  display:grid;place-items:center;
  padding:0 5px;
  box-shadow:0 0 12px var(--glow-lime);
  border:2px solid var(--ink);
}
.icon-btn .badge.red{background:var(--red);color:#fff;box-shadow:0 0 12px rgba(255,75,62,.5)}

.hamburger{display:none}

/* ============ Mobile Menu ============ */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:210;
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  display:flex;
  flex-direction:column;
  padding:24px;
}
.mobile-menu.on{transform:translateX(0)}

.mobile-menu__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.mobile-menu__brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px}
.mobile-menu__brand .dot{color:var(--lime);text-shadow:0 0 12px var(--lime)}

.mobile-menu nav{display:flex;flex-direction:column;gap:4px}
.mobile-menu nav a{
  padding:20px 0;
  font-family:'Space Grotesk',sans-serif;
  font-size:32px;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--text);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:all .35s var(--ease);
  cursor:pointer;
}
.mobile-menu nav a:hover,.mobile-menu nav a:active{
  color:var(--lime);
  padding-right:16px;
  text-shadow:0 0 20px var(--glow-lime);
}
.mobile-menu nav a svg{width:20px;height:20px;color:var(--dim);transition:transform .3s var(--spring)}
.mobile-menu nav a:hover svg{transform:translateX(-4px);color:var(--lime)}

.mobile-menu__foot{margin-top:auto;padding-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.mobile-menu__foot a{
  padding:12px 20px;
  border-radius:100px;
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  backdrop-filter:var(--glass-blur);
  transition:all .3s var(--spring);
}
.mobile-menu__foot a:hover{background:var(--lime);color:var(--ink);transform:translateY(-2px)}

/* ============ Hero ============ */
.hero{
  min-height:calc(100vh - 130px);
  padding:60px 0 100px;
  position:relative;
  overflow:hidden;
}

.hero__glow{
  position:absolute;
  width:900px;height:900px;
  border-radius:50%;
  background:radial-gradient(circle,var(--glow-lime),transparent 60%);
  filter:blur(60px);
  top:-200px;right:-300px;
  pointer-events:none;
  animation:heroGlowFloat 12s ease-in-out infinite;
}
.hero__glow-2{
  position:absolute;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,var(--glow-purple),transparent 60%);
  filter:blur(80px);
  bottom:-200px;left:-200px;
  pointer-events:none;
  animation:heroGlowFloat 15s ease-in-out infinite reverse;
}
@keyframes heroGlowFloat{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-40px,40px)}
}

.hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:2;
}

.hero__title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(64px,10vw,160px);
  line-height:.88;
  font-weight:700;
  letter-spacing:-.05em;
  margin-bottom:24px;
}
.hero__title .row{display:block;overflow:hidden;padding:.1em 0}
.hero__title .row span{display:inline-block;animation:riseUp 1s var(--ease-out) both}
.hero__title .row:nth-child(2) span{animation-delay:.15s}
.hero__title em{
  font-style:normal;
  display:inline-block;
  animation:riseUp 1s var(--ease-out) .3s both;
  background:linear-gradient(135deg,var(--lime) 0%,#a3ff5c 40%,var(--lime) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 40px var(--glow-lime));
  animation:riseUp 1s var(--ease-out) .3s both,textShimmer 4s ease-in-out infinite 1s;
}
@keyframes textShimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes riseUp{
  from{transform:translateY(120%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.hero__lead{
  font-size:clamp(16px,1.4vw,19px);
  color:var(--dim);
  max-width:520px;
  margin-bottom:36px;
  letter-spacing:.01em;
  line-height:1.8;
}
.hero__lead strong{
  color:var(--text);
  font-weight:600;
  position:relative;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  border-radius:100px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  transition:all .4s var(--spring);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 60%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.btn:hover::before{opacity:1}

.btn--primary{
  background:linear-gradient(135deg,var(--lime),color-mix(in srgb,var(--lime) 70%,var(--green)));
  color:var(--ink);
  box-shadow:0 12px 40px -12px var(--glow-lime);
}
.btn--primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 20px 50px -12px var(--glow-lime),0 0 60px -20px var(--lime);
}

.btn--ghost{
  border:1px solid var(--glass-line);
  color:var(--text);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.btn--ghost:hover{
  background:var(--glass-bg-hi);
  border-color:var(--lime);
  color:var(--lime);
  transform:translateY(-3px);
}

.btn svg{width:16px;height:16px;transition:transform .4s var(--spring)}
.btn:hover svg{transform:translateX(-4px)}

/* ============ Countdown ============ */
.countdown{
  display:flex;
  gap:12px;
  margin-top:32px;
  padding:22px 26px;
  border-radius:var(--r-lg);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  max-width:520px;
  flex-wrap:wrap;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.countdown::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--glow-lime),transparent 50%);
  opacity:.08;
  pointer-events:none;
}
.countdown__label{font-size:12px;color:var(--dim);letter-spacing:.05em;margin-inline-end:auto;position:relative;z-index:1}
.countdown__label b{color:var(--lime);font-weight:700;text-shadow:0 0 12px var(--glow-lime)}
.countdown__box{display:flex;gap:10px;align-items:center;position:relative;z-index:1}
.countdown__item{
  text-align:center;
  min-width:56px;
  padding:10px 8px;
  background:rgba(0,0,0,.35);
  border-radius:12px;
  border:1px solid var(--glass-line);
  backdrop-filter:blur(12px);
  transition:all .3s var(--spring);
}
.countdown__item:hover{
  border-color:var(--lime);
  box-shadow:0 0 20px -8px var(--glow-lime);
  transform:translateY(-2px);
}
.countdown__item .n{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;
  font-weight:700;
  color:var(--text);
  line-height:1;
  text-shadow:0 0 12px var(--glow-lime);
}
.countdown__item .l{font-size:9px;color:var(--dim);margin-top:4px;letter-spacing:.05em}
.countdown__sep{color:var(--lime);font-family:'Space Grotesk',sans-serif;font-weight:700;opacity:.5}

/* ============ Hero Visual ============ */
.hero__visual{
  position:relative;
  aspect-ratio:4/5;
  max-width:520px;
  justify-self:center;
  width:100%;
  perspective:1000px;
}
.hero__card{
  position:absolute;
  inset:0;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--glass-line);
  transform:rotate(-3deg);
  transition:transform .9s var(--ease);
  animation:floatY 7s ease-in-out infinite;
  box-shadow:var(--shadow-lg),0 0 60px -20px var(--glow-lime);
}
.hero__card:nth-child(2){
  transform:rotate(4deg) translate(30px,20px);
  opacity:.5;
  z-index:-1;
  animation-delay:-2.5s;
  box-shadow:var(--shadow-lg),0 0 60px -20px var(--glow-purple);
}
.hero__card img{width:100%;height:100%;object-fit:cover}
.hero__card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75));
}
.hero__card__meta{
  position:absolute;
  bottom:22px;right:22px;left:22px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.hero__card__meta h3{font-size:15px;font-weight:600;color:#fff}
.hero__card__meta .price{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  color:var(--lime);
  font-weight:700;
  text-shadow:0 0 12px var(--glow-lime);
}
@keyframes floatY{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(-3deg) translateY(-16px)}
}

/* ============ Hero Stats ============ */
.hero__stats{
  display:flex;
  gap:36px;
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid var(--glass-line);
  flex-wrap:wrap;
}
.hero__stat .n{
  font-family:'Space Grotesk',sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--lime);
  text-shadow:0 0 20px var(--glow-lime);
}
.hero__stat .l{font-size:12px;color:var(--dim);margin-top:2px}

/* ============ Sections ============ */
.sec{padding:110px 0;position:relative;z-index:3}

.sec__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:56px;
  flex-wrap:wrap;
}
.sec__head h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(38px,5.5vw,72px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:700;
}
.sec__head h2 em{
  font-style:normal;
  background:linear-gradient(135deg,var(--lime),var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 30px var(--glow-lime));
}
.sec__head p{color:var(--dim);font-size:15px;max-width:400px}

/* ============ Editorial ============ */
.editorial{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:20px;
  grid-template-areas:"big small" "big small2";
  grid-auto-rows:1fr;
}
.ed{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--glass-line);
  min-height:280px;
  cursor:pointer;
  transition:all .6s var(--ease);
}
.ed:hover{
  transform:translateY(-8px);
  border-color:var(--lime);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 40px -10px var(--glow-lime);
}
.ed img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ed:hover img{transform:scale(1.08)}
.ed::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85));
}
.ed__meta{position:absolute;bottom:26px;right:26px;left:26px;z-index:2;transition:transform .5s var(--ease)}
.ed:hover .ed__meta{transform:translateY(-6px)}
.ed--big{grid-area:big;min-height:600px}
.ed__meta .tag{
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(12px);
  margin-bottom:12px;
  color:#fff;
  border-color:rgba(255,255,255,.2);
}
.ed__meta h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(24px,3vw,40px);
  font-weight:700;
  letter-spacing:-.03em;
  margin-bottom:6px;
  color:#fff;
}
.ed__meta p{color:rgba(255,255,255,.75);font-size:13px}

/* ============ Toolbar ============ */
.toolbar{
  display:flex;
  gap:12px;
  margin-bottom:32px;
  flex-wrap:wrap;
  align-items:center;
}
.toolbar__search{flex:1;min-width:220px;position:relative}
.toolbar__search svg{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  color:var(--dim);
  pointer-events:none;
  transition:color .3s;
}
.toolbar__search:focus-within svg{color:var(--lime)}

.toolbar input[type="text"]{
  width:100%;
  padding:15px 48px 15px 20px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:100px;
  color:var(--text);
  font-size:14px;
  transition:all .35s var(--ease);
  outline:none;
}
.toolbar input[type="text"]::placeholder{color:var(--faint)}
.toolbar input[type="text"]:focus{
  border-color:var(--lime);
  background:var(--glass-bg-hi);
  box-shadow:0 0 0 4px var(--glow-lime);
}

.chip{
  padding:12px 22px;
  border-radius:100px;
  font-size:13px;
  border:1px solid var(--glass-line);
  color:var(--dim);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  transition:all .35s var(--spring);
  white-space:nowrap;
}
.chip:hover{
  color:var(--text);
  border-color:var(--lime);
  transform:translateY(-2px);
}
.chip.active{
  background:linear-gradient(135deg,var(--lime),color-mix(in srgb,var(--lime) 70%,var(--green)));
  color:var(--ink);
  border-color:var(--lime);
  font-weight:700;
  box-shadow:0 8px 24px -8px var(--glow-lime);
}

.toolbar select,.category-select{
  padding:12px 18px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:100px;
  color:var(--text);
  font-size:13px;
  outline:none;
  cursor:pointer;
  transition:all .3s var(--ease);
}
.toolbar select:focus,.category-select:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 4px var(--glow-lime);
}
.toolbar select option,.category-select option{background:var(--ink-2);color:var(--text)}

/* ============ Grid ============ */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;z-index:3}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ============ Product Card ============ */
.pcard{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  cursor:pointer;
  transition:transform .5s var(--ease),border-color .3s,box-shadow .4s var(--ease);
  display:flex;
  flex-direction:column;
  will-change:transform;
  transform-style:preserve-3d;
  perspective:1000px;
}
.pcard:hover{
  transform:translateY(-10px) rotateX(2deg) rotateY(-2deg);
  border-color:var(--lime);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.7),
    0 0 40px -10px var(--glow-lime),
    inset 0 0 0 1px rgba(212,255,63,.15);
}

.pcard__img{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--ink-3);
}
.pcard__img::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(212,255,63,.15),transparent 60%);
  opacity:0;
  transition:opacity .4s;
  z-index:1;
  pointer-events:none;
}
.pcard:hover .pcard__img::before{opacity:1}

.pcard__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.pcard:hover .pcard__img img{transform:scale(1.1)}

.pcard__badges{
  position:absolute;
  top:14px;right:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:2;
  align-items:flex-end;
}
.pbadge{
  padding:6px 12px;
  border-radius:100px;
  font-size:10px;
  font-weight:700;
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:.08em;
  background:linear-gradient(135deg,var(--lime),color-mix(in srgb,var(--lime) 70%,var(--green)));
  color:var(--ink);
  box-shadow:0 6px 16px -6px var(--glow-lime);
  backdrop-filter:blur(8px);
}
.pbadge--danger{background:var(--red);color:#fff;box-shadow:0 6px 16px -6px rgba(255,75,62,.6)}
.pbadge--warn{background:var(--gold);color:var(--ink);box-shadow:0 6px 16px -6px rgba(251,191,36,.6)}

.pcard__wish{
  position:absolute;
  top:14px;left:14px;
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:grid;place-items:center;
  z-index:3;
  transition:all .35s var(--spring);
  border:1px solid rgba(255,255,255,.1);
}
.pcard__wish:hover{background:var(--red);transform:scale(1.15);box-shadow:0 0 20px -4px rgba(255,75,62,.7)}
.pcard__wish.on{background:var(--red);box-shadow:0 0 20px -4px rgba(255,75,62,.7)}
.pcard__wish svg{width:16px;height:16px;color:#fff;transition:fill .2s}

.pcard__compare{
  position:absolute;
  bottom:14px;left:14px;
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:grid;place-items:center;
  z-index:3;
  transition:all .35s var(--spring);
  opacity:0;
  transform:translateY(8px);
  border:1px solid rgba(255,255,255,.1);
}
.pcard:hover .pcard__compare{opacity:1;transform:translateY(0)}
.pcard__compare:hover{background:var(--purple);transform:scale(1.15);box-shadow:0 0 20px -4px rgba(168,155,255,.7)}
.pcard__compare.on{background:var(--purple)}
.pcard__compare svg{width:16px;height:16px;color:#fff}

.pcard__quick{
  position:absolute;
  bottom:14px;right:14px;left:14px;
  padding:15px;
  border-radius:100px;
  background:linear-gradient(135deg,var(--lime),color-mix(in srgb,var(--lime) 70%,var(--green)));
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  text-align:center;
  transform:translateY(140%);
  opacity:0;
  transition:all .5s var(--spring);
  box-shadow:0 8px 24px -8px var(--glow-lime);
}
.pcard:hover .pcard__quick{transform:translateY(0);opacity:1}

.pcard__info{
  padding:20px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  z-index:1;
}
.pcard__name{
  font-size:15px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:-.01em;
  transition:color .3s;
}
.pcard:hover .pcard__name{color:var(--lime)}
.pcard__meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.pcard__price{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:-.01em;
  transition:text-shadow .3s;
}
.pcard:hover .pcard__price{text-shadow:0 0 20px var(--glow-lime)}
.pcard__price del{color:var(--faint);font-weight:400;font-size:12px;margin-right:6px}
.pcard__colors{display:flex;gap:6px}

.dot{
  width:14px;height:14px;
  border-radius:50%;
  border:1px solid var(--line-2);
  position:relative;
  transition:transform .3s var(--spring);
}
.pcard:hover .dot{transform:scale(1.15)}
.dot--black{background:#0a0a0a;border-color:#555}
.dot--blue{background:#1d6fc4}
.dot--white{background:#f5f5f5;border-color:#666}
.dot--قرمز{background:#c41d1d}
.dot--سبز{background:#1d8a3e}
.dot--خاکی{background:#8b7355}
.dot--طوسی{background:#7a7a7a}
.dot.off{opacity:.3}
.dot.off::after{
  content:'';
  position:absolute;
  inset:2px;
  background:linear-gradient(45deg,transparent 45%,var(--red) 45% 55%,transparent 55%);
}

/* ============ Compare Bar ============ */
.compare-bar{
  position:fixed;
  bottom:24px;left:50%;
  transform:translate(-50%,120%);
  z-index:180;
  background:var(--glass-bg-hi);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  padding:16px 22px;
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:var(--shadow-lg),0 0 60px -20px var(--glow-lime);
  transition:transform .5s var(--spring);
  max-width:calc(100vw - 40px);
}
.compare-bar.on{transform:translate(-50%,0)}
.compare-bar__items{display:flex;gap:10px}
.compare-bar__item{
  width:48px;height:60px;
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--glass-line);
  position:relative;
}
.compare-bar__item img{width:100%;height:100%;object-fit:cover}
.compare-bar__item button{
  position:absolute;
  top:-6px;left:-6px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:12px;
  line-height:1;
  display:grid;place-items:center;
  border:2px solid var(--ink-2);
  transition:transform .3s var(--spring);
}
.compare-bar__item button:hover{transform:scale(1.2)}
.compare-bar__info{font-size:12px;color:var(--dim);white-space:nowrap}
.compare-bar__info b{color:var(--text)}
.compare-bar__btn{
  padding:11px 20px;
  border-radius:100px;
  background:linear-gradient(135deg,var(--lime),color-mix(in srgb,var(--lime) 70%,var(--green)));
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  transition:all .35s var(--spring);
  box-shadow:0 8px 20px -6px var(--glow-lime);
}
.compare-bar__btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--glow-lime)}
.compare-bar__btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* ============ Testimonials ============ */
.testimonials{
  padding:110px 0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--lime) 3%,transparent),transparent);
  border-block:1px solid var(--glass-line);
  position:relative;
  overflow:hidden;
}
.testimonials__head{text-align:center;margin-bottom:60px}
.testimonials__head h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(32px,5vw,56px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
  margin-bottom:14px;
}
.testimonials__head h2 em{
  font-style:normal;
  background:linear-gradient(135deg,var(--lime),var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 30px var(--glow-lime));
}
.testimonials__head p{color:var(--dim);font-size:15px;max-width:480px;margin:0 auto}

.testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.testimonials__grid{grid-template-columns:1fr}}

.tcard{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  padding:30px;
  transition:all .5s var(--spring);
  position:relative;
  overflow:hidden;
}
.tcard::before{
  content:'"';
  position:absolute;
  top:-30px;right:20px;
  font-family:'Space Grotesk',sans-serif;
  font-size:120px;
  color:var(--lime);
  opacity:.06;
  pointer-events:none;
  line-height:1;
}
.tcard:hover{
  border-color:var(--lime);
  transform:translateY(-6px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5),0 0 40px -15px var(--glow-lime);
}
.tcard__stars{color:var(--gold);font-size:16px;letter-spacing:2px;margin-bottom:16px}
.tcard__text{
  font-size:14.5px;
  line-height:1.95;
  color:var(--text);
  margin-bottom:24px;
  min-height:80px;
  position:relative;
  z-index:1;
}
.tcard__user{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:20px;
  border-top:1px solid var(--glass-line);
}
.tcard__avatar{
  width:48px;height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--lime),var(--green));
  color:var(--ink);
  display:grid;place-items:center;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:16px;
  flex-shrink:0;
  box-shadow:0 0 20px -4px var(--glow-lime);
}
.tcard__user-info b{display:block;font-size:13.5px;font-weight:600}
.tcard__user-info span{font-size:11.5px;color:var(--dim)}

/* ============ FAQ ============ */
.faq{padding:110px 0}
.faq__head{text-align:center;margin-bottom:56px}
.faq__head h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(32px,5vw,56px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
  margin-bottom:14px;
}
.faq__head h2 em{
  font-style:normal;
  background:linear-gradient(135deg,var(--lime),var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 30px var(--glow-lime));
}
.faq__head p{color:var(--dim);font-size:15px;max-width:480px;margin:0 auto}

.faq__list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq__item{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:all .4s var(--ease);
}
.faq__item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.faq__item.on{
  border-color:var(--lime);
  box-shadow:0 0 40px -15px var(--glow-lime);
}
.faq__q{
  width:100%;
  padding:24px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  text-align:right;
  font-size:15px;
  font-weight:600;
  transition:color .3s;
}
.faq__q:hover{color:var(--lime)}
.faq__q .chev{
  width:30px;height:30px;
  border-radius:50%;
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  display:grid;place-items:center;
  flex-shrink:0;
  transition:all .4s var(--spring);
}
.faq__q .chev svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.faq__item.on .faq__q .chev{
  background:linear-gradient(135deg,var(--lime),var(--green));
  color:var(--ink);
  border-color:var(--lime);
  transform:rotate(180deg);
  box-shadow:0 0 20px -4px var(--glow-lime);
}
.faq__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);padding:0 28px}
.faq__item.on .faq__a{max-height:400px;padding-bottom:24px}
.faq__a p{font-size:14px;color:var(--dim);line-height:1.9}

/* ============ Instagram ============ */
.instagram{
  padding:110px 0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--purple) 3%,transparent),transparent);
  border-block:1px solid var(--glass-line);
}
.instagram__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.instagram__head h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(32px,5vw,56px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
}
.instagram__head h2 em{
  font-style:normal;
  background:linear-gradient(135deg,#f09433,#dc2743,#bc1888);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.instagram__head a{
  padding:15px 26px;
  border-radius:100px;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color:#fff;
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .4s var(--spring);
  box-shadow:0 12px 30px -10px rgba(220,39,67,.5);
}
.instagram__head a:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 20px 40px -10px rgba(220,39,67,.6);
}

.instagram__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1000px){.instagram__grid{grid-template-columns:repeat(3,1fr)}}

.ig-item{
  aspect-ratio:1;
  border-radius:var(--r-md);
  overflow:hidden;
  position:relative;
  background:var(--ink-3);
  cursor:pointer;
  transition:all .5s var(--spring);
  border:1px solid var(--glass-line);
}
.ig-item:hover{
  transform:scale(1.05) rotate(-1deg);
  border-color:var(--lime);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.5),0 0 30px -8px var(--glow-lime);
  z-index:2;
}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ig-item:hover img{transform:scale(1.1)}
.ig-item::after{
  content:'📷';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  display:grid;place-items:center;
  font-size:28px;
  opacity:0;
  transition:opacity .35s;
}
.ig-item:hover::after{opacity:1}

/* ============ Story ============ */
.story{
  background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--paper) 85%,var(--lime)));
  color:var(--ink);
  padding:130px 0;
  position:relative;
  overflow:hidden;
}
.story::before{
  content:'';
  position:absolute;
  top:-100px;right:-100px;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle,var(--glow-lime),transparent 70%);
  filter:blur(60px);
  opacity:.4;
  pointer-events:none;
}
.story .wrap{position:relative;z-index:2}

.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.story h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(40px,5.5vw,84px);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:700;
  margin-bottom:26px;
}
.story p{
  font-size:16px;
  color:color-mix(in srgb,var(--ink) 78%,transparent);
  max-width:520px;
  margin-bottom:34px;
  line-height:1.9;
}
.story__bullets{display:flex;flex-direction:column;gap:20px;margin-bottom:38px}
.story__bullet{display:flex;gap:14px;align-items:flex-start}
.story__bullet .n{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:12px;
  color:var(--ink);
  background:linear-gradient(135deg,var(--lime),var(--green));
  width:28px;height:28px;
  border-radius:50%;
  display:grid;place-items:center;
  flex-shrink:0;
  margin-top:2px;
  box-shadow:0 4px 12px -2px var(--glow-lime);
}
.story__bullet div{
  font-size:14px;
  color:color-mix(in srgb,var(--ink) 82%,transparent);
  line-height:1.7;
}
.story__bullet b{color:var(--ink);font-weight:700}

.story__img{
  aspect-ratio:4/5;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 50px 100px -30px rgba(0,0,0,.4),0 0 60px -20px var(--glow-lime);
  transition:transform .6s var(--ease);
  border:1px solid rgba(255,255,255,.1);
}
.story__img:hover{transform:scale(1.02) rotate(-1deg)}
.story__img img{width:100%;height:100%;object-fit:cover}

.story .btn--dark{
  background:var(--ink);
  color:var(--paper);
  box-shadow:0 20px 40px -15px rgba(0,0,0,.4);
}
.story .btn--dark:hover{
  transform:translateY(-3px);
  box-shadow:0 30px 50px -15px rgba(0,0,0,.5);
}

/* ============ Footer ============ */
footer{
  padding:90px 0 40px;
  border-top:1px solid var(--glass-line);
  position:relative;
  z-index:3;
}
.foot__top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:44px;
  margin-bottom:60px;
}
.foot__brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:34px;
  letter-spacing:-.04em;
  margin-bottom:16px;
}
.foot__brand .dot{color:var(--lime);text-shadow:0 0 16px var(--lime)}
.foot__desc{color:var(--dim);font-size:14px;max-width:340px;line-height:1.85;margin-bottom:18px}

.foot__contact{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.foot__contact a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-size:13.5px;
  transition:all .3s var(--ease);
  width:fit-content;
}
.foot__contact a:hover{color:var(--lime);transform:translateX(-4px)}
.foot__contact a svg{width:16px;height:16px;color:var(--dim);transition:color .3s}
.foot__contact a:hover svg{color:var(--lime)}
.foot__contact a .mono{font-family:'Space Grotesk',sans-serif}

.foot h4{
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:20px;
  font-weight:600;
  font-family:'Space Grotesk',sans-serif;
}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot ul a{
  font-size:14px;
  color:color-mix(in srgb,var(--text) 72%,transparent);
  transition:all .3s var(--ease);
  cursor:pointer;
  display:inline-block;
}
.foot ul a:hover{color:var(--lime);transform:translateX(-4px)}

.foot__sub{display:flex;gap:8px;margin-top:16px}
.foot__sub input{
  flex:1;
  padding:12px 18px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:100px;
  color:var(--text);
  font-size:13px;
  outline:none;
  transition:all .3s var(--ease);
}
.foot__sub input:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 4px var(--glow-lime);
}
.foot__sub button{
  padding:12px 22px;
  border-radius:100px;
  background:linear-gradient(135deg,var(--lime),color-mix(in srgb,var(--lime) 70%,var(--green)));
  color:var(--ink);
  font-weight:700;
  font-size:12px;
  transition:all .35s var(--spring);
  box-shadow:0 8px 20px -6px var(--glow-lime);
}
.foot__sub button:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--glow-lime)}

.foot__bottom{
  padding-top:34px;
  border-top:1px solid var(--glass-line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  color:var(--faint);
  font-size:12px;
  font-family:'Space Grotesk',sans-serif;
}
.foot__creator{color:var(--dim)}
.foot__creator a{
  color:var(--lime);
  font-weight:600;
  transition:text-shadow .3s;
}
.foot__creator a:hover{text-shadow:0 0 12px var(--glow-lime)}

/* ============ Enamad ============ */
.foot__enamad{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:36px 0 24px;
  margin-top:24px;
  border-top:1px solid var(--glass-line);
}
.foot__enamad a{
  display:inline-block;
  transition:all .4s var(--spring);
  filter:grayscale(20%);
}
.foot__enamad a:hover{
  transform:scale(1.1) translateY(-4px);
  filter:grayscale(0%) drop-shadow(0 0 20px var(--glow-lime));
}
.foot__enamad img{display:block;width:100px;height:100px;object-fit:contain}

/* ============ FABs ============ */
.fab{
  position:fixed;
  bottom:24px;
  z-index:150;
  width:54px;height:54px;
  border-radius:50%;
  display:grid;place-items:center;
  box-shadow:var(--shadow-md);
  transition:all .4s var(--spring);
  cursor:pointer;
}
.fab:hover{
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.6),0 0 30px -8px var(--glow-lime);
}
.fab svg{width:22px;height:22px}

.back-top{
  right:24px;
  background:var(--glass-bg-hi);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  color:var(--text);
  opacity:0;
  pointer-events:none;
}
.back-top.on{opacity:1;pointer-events:auto}
.back-top.shifted{bottom:90px}

.live-chat{
  left:24px;
  background:linear-gradient(135deg,#229ED9,#168AC1);
  color:#fff;
  box-shadow:0 12px 30px -8px rgba(34,158,217,.6);
}
.live-chat__pulse{
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:#229ED9;
  opacity:.4;
  animation:pulse 2s infinite;
  z-index:-1;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.4}
  100%{transform:scale(1.7);opacity:0}
}
.live-chat__label{
  position:absolute;
  left:64px;
  background:var(--glass-bg-hi);
  backdrop-filter:var(--glass-blur);
  color:var(--text);
  font-size:12px;
  padding:9px 16px;
  border-radius:100px;
  border:1px solid var(--glass-line);
  white-space:nowrap;
  opacity:0;
  transform:translateX(-10px);
  transition:all .4s var(--spring);
  pointer-events:none;
}
.live-chat:hover .live-chat__label{opacity:1;transform:translateX(0)}

/* ============ Scrim ============ */
.scrim{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.scrim.on{opacity:1;pointer-events:auto}

/* ============ Drawers ============ */
.drawer{
  position:fixed;
  top:0;bottom:0;right:0;
  z-index:210;
  width:min(480px,100%);
  background:color-mix(in srgb,var(--ink-1) 94%,transparent);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-right:1px solid var(--glass-line);
  transform:translateX(100%);
  transition:transform .55s var(--ease);
  display:flex;
  flex-direction:column;
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.5);
}
.drawer.on{transform:translateX(0)}
.drawer--left{right:auto;left:0;border-right:0;border-left:1px solid var(--glass-line);transform:translateX(-100%)}
.drawer--left.on{transform:translateX(0)}

.drawer__head{
  padding:26px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--glass-line);
  flex-shrink:0;
}
.drawer__head h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;
  letter-spacing:-.03em;
  font-weight:700;
}
.drawer__body{flex:1;overflow-y:auto;padding:22px 30px}
.drawer__foot{
  padding:24px 30px;
  border-top:1px solid var(--glass-line);
  background:color-mix(in srgb,var(--ink) 40%,transparent);
  flex-shrink:0;
}

.close-x{
  width:38px;height:38px;
  border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--glass-line);
  background:var(--glass-bg);
  transition:all .35s var(--spring);
}
.close-x:hover{
  background:var(--text);
  color:var(--ink);
  border-color:var(--text);
  transform:rotate(90deg);
}
.close-x svg{width:16px;height:16px}

/* ============ Cart Item ============ */
.citem{
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--glass-line);
}
.citem__img{
  width:80px;height:100px;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--glass-line);
}
.citem__img img{width:100%;height:100%;object-fit:cover}
.citem__info{display:flex;flex-direction:column;gap:4px;min-width:0}
.citem__name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem__meta{font-size:11.5px;color:var(--dim)}
.citem__row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:8px}

.qty-ctrl{
  display:inline-flex;
  align-items:center;
  gap:2px;
  border:1px solid var(--glass-line);
  border-radius:100px;
  padding:3px;
  background:var(--glass-bg);
}
.qty-ctrl button{
  width:28px;height:28px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:14px;
  color:var(--dim);
  transition:all .3s var(--spring);
}
.qty-ctrl button:hover:not(:disabled){background:var(--lime);color:var(--ink);transform:scale(1.1)}
.qty-ctrl button:disabled{opacity:.25;cursor:not-allowed}
.qty-ctrl span{
  min-width:24px;
  text-align:center;
  font-size:12px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
}

.citem__price{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700}
.citem__rm{
  font-size:11px;
  color:var(--red);
  padding:5px 10px;
  border-radius:100px;
  transition:background .25s;
}
.citem__rm:hover{background:color-mix(in srgb,var(--red) 18%,transparent)}

/* ============ Coupon ============ */
.coupon{display:flex;gap:8px;margin-bottom:16px}
.coupon input{
  flex:1;
  padding:13px 18px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:100px;
  color:var(--text);
  font-size:13px;
  outline:none;
  transition:all .3s;
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.coupon input:focus{border-color:var(--lime);box-shadow:0 0 0 4px var(--glow-lime)}
.coupon button{
  padding:0 22px;
  border-radius:100px;
  background:var(--glass-bg-hi);
  color:var(--text);
  font-size:12px;
  font-weight:600;
  transition:all .35s var(--spring);
  border:1px solid var(--glass-line);
}
.coupon button:hover{
  background:var(--lime);
  color:var(--ink);
  border-color:var(--lime);
  transform:translateY(-2px);
}

/* ============ Totals ============ */
.ctotals{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.ctotals__row{display:flex;justify-content:space-between;font-size:13px;color:var(--dim)}
.ctotals__row.green{color:var(--green)}
.ctotals__row.big{
  color:var(--text);
  font-size:17px;
  font-weight:700;
  padding-top:14px;
  border-top:1px solid var(--glass-line);
  margin-top:6px;
}
.ctotals__row.big span:last-child{font-family:'Space Grotesk',sans-serif}

.checkout-btn{
  width:100%;
  padding:18px;
  border-radius:100px;
  background:linear-gradient(135deg,var(--lime),color-mix(in srgb,var(--lime) 70%,var(--green)));
  color:var(--ink);
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  transition:all .4s var(--spring);
  box-shadow:0 12px 30px -10px var(--glow-lime);
}
.checkout-btn:hover:not(:disabled){
  transform:translateY(-3px);
  box-shadow:0 20px 50px -12px var(--glow-lime),0 0 60px -20px var(--lime);
}
.checkout-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* ============ Modal ============ */
.modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease);
  overflow-y:auto;
}
.modal.on{opacity:1;pointer-events:auto}
.modal__box{
  width:min(520px,100%);
  background:color-mix(in srgb,var(--ink-1) 94%,transparent);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-line);
  border-radius:var(--r-xl);
  padding:40px 36px;
  position:relative;
  transform:translateY(20px) scale(.96);
  transition:transform .4s var(--spring);
  margin:auto;
  box-shadow:var(--shadow-lg),0 0 80px -20px var(--glow-lime);
}
.modal.on .modal__box{transform:translateY(0) scale(1)}
.modal__box.modal__box--wide{width:min(960px,100%);padding:0}
.modal__box h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:26px;
  letter-spacing:-.03em;
  margin-bottom:8px;
  font-weight:700;
}
.modal__box .sub{color:var(--dim);font-size:13.5px;margin-bottom:26px}

/* ============ Fields ============ */
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;color:var(--dim);margin-bottom:8px;letter-spacing:.03em}
.field input,.field select,.field textarea{
  width:100%;
  padding:15px 20px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);
  color:var(--text);
  font-size:14px;
  outline:none;
  transition:all .35s var(--ease);
  resize:vertical;
}
.field textarea{min-height:90px;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--lime);
  background:var(--glass-bg-hi);
  box-shadow:0 0 0 4px var(--glow-lime);
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field select option{background:var(--ink-2);color:var(--text)}

.err{color:var(--red);font-size:12.5px;margin-bottom:14px;display:none}
.err.on{display:block}

/* ============ Success ============ */
.success{text-align:center;padding:14px 0}
.success__icon{
  width:86px;height:86px;
  border-radius:50%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--green) 20%,transparent),color-mix(in srgb,var(--lime) 20%,transparent));
  border:2px solid var(--green);
  display:grid;place-items:center;
  margin:0 auto 24px;
  font-size:40px;
  color:var(--green);
  animation:popIn .6s var(--spring);
  box-shadow:0 0 40px -8px rgba(74,222,128,.6);
}
@keyframes popIn{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}
.success h2{color:var(--green);margin-bottom:8px}
.success__num{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:.05em;
  background:var(--glass-bg);
  padding:12px 22px;
  border-radius:100px;
  display:inline-block;
  margin:12px 0 24px;
  border:1px dashed var(--glass-line);
}
.success__details{
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);
  padding:18px;
  text-align:right;
  margin-bottom:22px;
  font-size:13px;
}
.success__details .row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid var(--glass-line);
}
.success__details .row:last-child{border-bottom:0}
.success__details .row b{font-family:'Space Grotesk',sans-serif;font-weight:700}
.success__details .row.total b{color:var(--lime);font-size:15px}

/* ============ Saved Address ============ */
.saved-address{
  background:color-mix(in srgb,var(--lime) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--lime) 22%,transparent);
  border-radius:14px;
  padding:16px;
  margin-bottom:20px;
  backdrop-filter:var(--glass-blur);
}
.save-info-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:var(--glass-bg);
  border-radius:12px;
  font-size:13px;
  color:var(--dim);
  cursor:pointer;
  border:1px solid var(--glass-line);
  transition:all .3s var(--ease);
}
.save-info-toggle:hover{border-color:var(--lime)}
.save-info-toggle input{width:18px;height:18px;accent-color:var(--lime);cursor:pointer}

/* ============ Gallery ============ */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:0}
.gallery__main{
  aspect-ratio:4/5;
  background:var(--ink-3);
  overflow:hidden;
  position:relative;
  cursor:zoom-in;
}
.gallery__main img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery__main.zoom img{transform:scale(1.8);cursor:zoom-out}
.gallery__thumbs{
  position:absolute;
  bottom:18px;right:18px;left:18px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:6px;
  z-index:2;
}
.gallery__thumb{
  width:58px;height:72px;
  border-radius:10px;
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  flex-shrink:0;
  transition:all .3s var(--spring);
  background:var(--ink-3);
}
.gallery__thumb.on{
  border-color:var(--lime);
  box-shadow:0 0 16px -4px var(--glow-lime);
  transform:scale(1.05);
}
.gallery__thumb img{width:100%;height:100%;object-fit:cover}
.gallery__zoom-hint{
  position:absolute;
  top:16px;right:16px;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:11px;
  padding:7px 14px;
  border-radius:100px;
  z-index:2;
  pointer-events:none;
  transition:opacity .3s;
}
.gallery__main.zoom .gallery__zoom-hint{opacity:0}

.gallery__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  display:grid;place-items:center;
  cursor:pointer;
  z-index:3;
  transition:all .3s var(--spring);
  opacity:0;
}
.gallery__main:hover .gallery__nav{opacity:1}
.gallery__nav:hover{
  background:var(--lime);
  color:var(--ink);
  border-color:var(--lime);
  transform:translateY(-50%) scale(1.12);
}
.gallery__nav svg{width:18px;height:18px}
.gallery__nav--prev{right:14px}
.gallery__nav--next{left:14px}
.gallery__counter{
  position:absolute;
  top:16px;left:16px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(12px);
  color:#fff;
  font-family:'Space Grotesk',sans-serif;
  font-size:11.5px;
  padding:7px 14px;
  border-radius:100px;
  z-index:3;
  pointer-events:none;
}

/* ============ Detail (Modal) ============ */
.detail{
  padding:36px 32px;
  display:flex;
  flex-direction:column;
  position:relative;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}
.detail h2{font-size:24px;margin-bottom:8px}
.detail__price{
  color:var(--lime);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:20px;
  margin-bottom:14px;
  text-shadow:0 0 20px var(--glow-lime);
}
.detail__desc{color:var(--dim);font-size:13px;margin-bottom:24px;line-height:1.9}
.detail__row{font-size:12px;color:var(--dim);margin-bottom:8px;letter-spacing:.05em}
.detail__row + div{margin-bottom:18px}

/* ============ Sizes ============ */
.size-grid{display:flex;gap:8px;flex-wrap:wrap}
.size-btn{
  min-width:58px;
  padding:13px 18px;
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);
  background:var(--glass-bg);
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:13px;
  transition:all .35s var(--spring);
  position:relative;
  backdrop-filter:var(--glass-blur);
}
.size-btn:hover:not(:disabled){
  border-color:var(--lime);
  transform:translateY(-2px);
}
.size-btn.on{
  background:linear-gradient(135deg,var(--lime),var(--green));
  color:var(--ink);
  border-color:var(--lime);
  box-shadow:0 8px 20px -8px var(--glow-lime);
}
.size-btn:disabled{
  opacity:.25;
  cursor:not-allowed;
  text-decoration:line-through;
}
.size-btn small{display:block;font-size:9px;color:var(--dim);margin-top:3px;font-weight:400}
.size-btn.on small{color:var(--ink);opacity:.7}

/* ============ Reviews ============ */
.reviews{margin-top:28px;padding-top:24px;border-top:1px solid var(--glass-line)}
.reviews__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.reviews__head h4{font-size:14px;font-weight:700}
.rstar{color:var(--gold);font-size:16px;letter-spacing:1px}
.rstar .off{color:var(--faint)}
.rlist{display:flex;flex-direction:column;gap:12px;max-height:260px;overflow-y:auto;padding-right:4px}
.ritem{
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  border-radius:var(--r-sm);
  padding:14px 16px;
  backdrop-filter:var(--glass-blur);
}
.rhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px}
.rhead b{font-weight:600}
.rhead span{color:var(--dim);font-family:'Space Grotesk',sans-serif}
.rbody{font-size:12.5px;color:var(--dim);line-height:1.75}

/* ============ Compare Table ============ */
.compare-table{padding:32px}
.compare-table h2{margin-bottom:22px}
.compare-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.compare-table th,.compare-table td{
  padding:16px;
  border-bottom:1px solid var(--glass-line);
  text-align:right;
  vertical-align:top;
}
.compare-table th{
  color:var(--dim);
  font-weight:600;
  font-size:12px;
  letter-spacing:.03em;
  width:140px;
}
.compare-table img{
  width:120px;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r-md);
  margin-bottom:10px;
  border:1px solid var(--glass-line);
}
.compare-table .cmp-name{font-weight:700;margin-bottom:6px}
.compare-table .cmp-price{
  color:var(--lime);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:14px;
  text-shadow:0 0 16px var(--glow-lime);
}

/* ============ Admin ============ */
.admin{
  position:fixed;
  inset:0;
  z-index:250;
  background:color-mix(in srgb,var(--ink) 96%,transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transform:translateY(100%);
  transition:transform .6s var(--ease);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.admin.on{transform:translateY(0)}
.admin__bar{
  position:sticky;
  top:0;
  z-index:5;
  padding:22px clamp(20px,4vw,60px);
  background:color-mix(in srgb,var(--ink) 85%,transparent);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--glass-line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.admin__bar h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;
  letter-spacing:-.03em;
  font-weight:700;
}
.admin__bar h2 .dot{color:var(--lime);text-shadow:0 0 12px var(--lime)}
.admin__body{padding:36px clamp(20px,4vw,60px) 60px;flex:1}

/* ============ Stats ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:36px}
.stat{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  padding:24px;
  transition:all .35s var(--spring);
}
.stat:hover{
  border-color:var(--lime);
  transform:translateY(-4px);
  box-shadow:0 20px 40px -15px rgba(0,0,0,.5),0 0 30px -10px var(--glow-lime);
}
.stat__l{font-size:12px;color:var(--dim);letter-spacing:.03em;margin-bottom:10px}
.stat__v{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;letter-spacing:-.03em}
.stat__v.lime{color:var(--lime);text-shadow:0 0 20px var(--glow-lime)}
.stat__v.green{color:var(--green)}
.stat__v.gold{color:var(--gold)}
.stat__v.purple{color:var(--purple)}

/* ============ Chart ============ */
.chart{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  padding:24px;
  margin-bottom:26px;
}
.chart h3{font-size:14px;margin-bottom:18px;color:var(--dim);font-weight:600;letter-spacing:.03em}
.chart__bars{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:150px;
  padding-bottom:26px;
  position:relative;
}
.chart__bar{
  flex:1;
  background:linear-gradient(180deg,var(--lime),color-mix(in srgb,var(--lime) 25%,transparent));
  border-radius:8px 8px 0 0;
  position:relative;
  min-height:4px;
  transition:all .4s var(--ease);
  box-shadow:0 0 20px -6px var(--glow-lime);
}
.chart__bar:hover{filter:brightness(1.2);transform:scaleY(1.05);transform-origin:bottom}
.chart__bar span{
  position:absolute;
  bottom:-24px;left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:var(--dim);
  white-space:nowrap;
  font-family:'Space Grotesk',sans-serif;
}
.chart__bar::before{
  content:attr(data-val);
  position:absolute;
  top:-20px;left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  opacity:0;
  transition:opacity .25s;
}
.chart__bar:hover::before{opacity:1}

/* ============ Tabs ============ */
.tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.tab{
  padding:11px 22px;
  border-radius:100px;
  font-size:13px;
  border:1px solid var(--glass-line);
  color:var(--dim);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  transition:all .35s var(--spring);
  cursor:pointer;
}
.tab:hover{color:var(--text);border-color:var(--lime);transform:translateY(-2px)}
.tab.active{
  background:linear-gradient(135deg,var(--lime),color-mix(in srgb,var(--lime) 70%,var(--green)));
  color:var(--ink);
  border-color:var(--lime);
  font-weight:700;
  box-shadow:0 8px 24px -8px var(--glow-lime);
}

.panel{display:none}
.panel.on{display:block;animation:fadeIn .4s var(--ease)}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============ Filters ============ */
.filter-bar{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.filter-bar input,.filter-bar select{
  padding:11px 18px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:100px;
  color:var(--text);
  font-size:13px;
  outline:none;
  transition:all .3s var(--ease);
}
.filter-bar input:focus,.filter-bar select:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 4px var(--glow-lime);
}
.filter-bar select option{background:var(--ink-2);color:var(--text)}

/* ============ Admin Product/Order Cards ============ */
.prod-admin{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  padding:24px;
  margin-bottom:18px;
  transition:all .35s var(--ease);
}
.prod-admin:hover{border-color:var(--line-2)}
.prod-admin__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:10px;
}
.prod-admin__head strong{font-size:15px}
.prod-admin__head .price{font-family:'Space Grotesk',sans-serif;color:var(--dim);font-size:13px}
.prod-admin__head .actions{display:flex;gap:8px}
.prod-admin__head .actions button{
  padding:7px 16px;
  border-radius:100px;
  font-size:11.5px;
  border:1px solid var(--glass-line);
  background:var(--glass-bg);
  color:var(--dim);
  transition:all .25s var(--ease);
  cursor:pointer;
}
.prod-admin__head .actions button:hover{
  color:var(--lime);
  border-color:var(--lime);
  transform:translateY(-2px);
}
.prod-admin__head .actions button.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.prod-admin__head .actions button.danger:hover{background:color-mix(in srgb,var(--red) 15%,transparent);border-color:var(--red)}

.vrow{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:12px;
  align-items:center;
  padding:12px 16px;
  background:color-mix(in srgb,var(--ink) 40%,transparent);
  border:1px solid var(--glass-line);
  border-radius:var(--r-sm);
  margin-bottom:8px;
  transition:all .3s var(--ease);
}
.vrow.low{border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.vrow.out{opacity:.5}
.vrow__label{font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vrow__label b{color:var(--text);font-weight:600}
.vrow__label small{color:var(--dim);font-size:11px}
.vrow input{
  width:64px;
  padding:7px;
  text-align:center;
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  border-radius:10px;
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:13px;
  outline:none;
}
.vrow input:focus{border-color:var(--lime)}
.vrow__btns{display:flex;gap:6px}
.vrow__btns button{
  width:34px;height:34px;
  border-radius:10px;
  display:grid;place-items:center;
  font-size:14px;
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  transition:all .3s var(--spring);
}
.vrow__btns button.plus:hover{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:scale(1.1)}
.vrow__btns button.minus:hover{background:var(--red);color:#fff;border-color:var(--red);transform:scale(1.1)}

/* ============ Order Card ============ */
.ocard{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  padding:22px;
  margin-bottom:16px;
  transition:all .35s var(--ease);
}
.ocard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.ocard__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.ocard__no{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  color:var(--lime);
  letter-spacing:.04em;
  text-shadow:0 0 12px var(--glow-lime);
}
.ocard__date{font-size:11.5px;color:var(--dim);font-family:'Space Grotesk',sans-serif}
.ocard__cust{
  background:color-mix(in srgb,var(--ink) 40%,transparent);
  border-radius:var(--r-sm);
  padding:14px 16px;
  font-size:13px;
  margin-bottom:12px;
}
.ocard__cust b{color:var(--text);font-weight:600}
.ocard__items{font-size:12.5px;color:var(--dim);line-height:2;margin-bottom:14px}
.ocard__items b{color:var(--text)}
.ocard__notes{
  background:color-mix(in srgb,var(--ink) 40%,transparent);
  border-radius:var(--r-sm);
  padding:12px 16px;
  margin-bottom:14px;
  font-size:12.5px;
}
.ocard__notes .nt{
  color:var(--dim);
  padding:5px 0;
  border-bottom:1px dashed var(--glass-line);
}
.ocard__notes .nt:last-child{border-bottom:0}
.ocard__foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid var(--glass-line);
}
.ocard__total{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px}
.ocard__total span{color:var(--lime);text-shadow:0 0 12px var(--glow-lime)}
.ocard__actions{display:flex;gap:8px;flex-wrap:wrap}

.status-sel{
  padding:9px 16px;
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  border-radius:100px;
  color:var(--text);
  font-size:12px;
  cursor:pointer;
  outline:none;
}
.status-sel:focus{border-color:var(--lime)}

.del-btn{
  padding:9px 16px;
  background:transparent;
  border:1px solid color-mix(in srgb,var(--red) 40%,transparent);
  color:var(--red);
  border-radius:100px;
  font-size:12px;
  transition:all .3s var(--spring);
  cursor:pointer;
}
.del-btn:hover{
  background:color-mix(in srgb,var(--red) 15%,transparent);
  border-color:var(--red);
  transform:translateY(-2px);
}

.nt-btn{
  padding:9px 16px;
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  color:var(--text);
  border-radius:100px;
  font-size:12px;
  transition:all .3s var(--spring);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.nt-btn:hover{
  background:var(--glass-bg-hi);
  border-color:var(--lime);
  transform:translateY(-2px);
}

/* ============ Pills ============ */
.pill{
  display:inline-block;
  padding:5px 14px;
  border-radius:100px;
  font-size:11px;
  font-weight:600;
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:.03em;
}
.pill.pending{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}
.pill.confirmed{background:color-mix(in srgb,var(--purple) 18%,transparent);color:var(--purple)}
.pill.shipped{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.pill.delivered{background:color-mix(in srgb,var(--lime) 22%,transparent);color:var(--lime)}
.pill.cancelled{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}

/* ============ Login ============ */
.login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}

/* ============ New Product Panel ============ */
.np-field{margin-bottom:18px}
.np-field label{display:block;font-size:12px;color:var(--dim);margin-bottom:8px}
.np-field input,.np-field select,.np-field textarea{
  width:100%;
  padding:13px 18px;
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  border-radius:12px;
  color:var(--text);
  font-size:14px;
  outline:none;
  font-family:inherit;
  transition:all .3s var(--ease);
}
.np-field input:focus,.np-field select:focus,.np-field textarea:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 4px var(--glow-lime);
}
.np-field textarea{min-height:90px;resize:vertical;line-height:1.7}
.np-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.np-section{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--glass-line)}
.np-label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:14px}

/* ============ Toasts ============ */
.toasts{
  position:fixed;
  bottom:90px;right:24px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:calc(100vw - 40px);
}
.toast{
  padding:16px 22px;
  border-radius:var(--r-md);
  background:var(--glass-bg-hi);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  font-size:13.5px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  min-width:260px;
  max-width:380px;
  display:flex;
  align-items:center;
  gap:12px;
  animation:toastSlideIn .4s var(--spring);
}
.toast.ok{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.toast.err{border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.toast.ok::before{
  content:'✓';
  color:var(--green);
  font-weight:700;
  font-size:17px;
  text-shadow:0 0 12px rgba(74,222,128,.6);
}
.toast.err::before{
  content:'✕';
  color:var(--red);
  font-weight:700;
  font-size:17px;
  text-shadow:0 0 12px rgba(255,75,62,.6);
}
@keyframes toastSlideIn{
  from{transform:translateX(120%);opacity:0}
  to{transform:translateX(0);opacity:1}
}

/* ============ Confirm Overlay ============ */
.confirm-overlay{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.confirm-overlay.on{opacity:1;pointer-events:auto}
.confirm-box{
  width:min(420px,100%);
  background:color-mix(in srgb,var(--ink-1) 94%,transparent);
  backdrop-filter:blur(30px);
  border:1px solid var(--glass-line);
  border-radius:var(--r-xl);
  padding:32px;
  text-align:center;
  transform:scale(.95);
  transition:transform .35s var(--spring);
  box-shadow:var(--shadow-lg);
}
.confirm-overlay.on .confirm-box{transform:scale(1)}
.confirm-box h3{font-size:18px;margin-bottom:10px}
.confirm-box p{color:var(--dim);font-size:13.5px;margin-bottom:24px}
.confirm-box .btns{display:flex;gap:12px}
.confirm-box button{
  flex:1;
  padding:14px;
  border-radius:100px;
  font-size:13px;
  font-weight:600;
  transition:all .3s var(--spring);
}
.confirm-box .no{
  background:var(--glass-bg);
  color:var(--text);
  border:1px solid var(--glass-line);
}
.confirm-box .no:hover{background:var(--glass-bg-hi);transform:translateY(-2px)}
.confirm-box .yes{
  background:linear-gradient(135deg,var(--red),color-mix(in srgb,var(--red) 70%,#c41d1d));
  color:#fff;
  box-shadow:0 12px 30px -10px rgba(255,75,62,.5);
}
.confirm-box .yes:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(255,75,62,.7)}

/* ============ Fly Dot ============ */
.fly-dot{
  position:fixed;
  z-index:9999;
  width:22px;height:22px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,var(--lime));
  box-shadow:0 0 30px var(--lime),0 0 60px var(--glow-lime);
  pointer-events:none;
  transition:all .8s cubic-bezier(.5,-0.5,.5,1);
}

/* ============ Skeleton ============ */
.skeleton{
  background:linear-gradient(90deg,var(--ink-2) 25%,var(--ink-3) 50%,var(--ink-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r-sm);
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skel-card{aspect-ratio:4/5;border-radius:var(--r-lg);margin-bottom:16px}

/* ============ Offline ============ */
.offline-banner{
  position:fixed;
  top:0;left:0;right:0;
  z-index:9999;
  padding:12px;
  background:var(--red);
  color:#fff;
  text-align:center;
  font-size:13px;
  font-weight:600;
  transform:translateY(-100%);
  transition:transform .4s var(--ease);
  box-shadow:0 8px 24px rgba(255,75,62,.4);
}
.offline-banner.on{transform:translateY(0)}

/* ============ Reveal ============ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============ Track Form ============ */
.track-form{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.track-form input{
  padding:15px 20px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);
  color:var(--text);
  font-size:14px;
  outline:none;
  transition:all .3s;
}
.track-form input:focus{border-color:var(--lime);box-shadow:0 0 0 4px var(--glow-lime)}

/* ============ Order History ============ */
.oh-item{
  background:color-mix(in srgb,var(--ink) 40%,transparent);
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);
  padding:16px;
  margin-bottom:12px;
  transition:all .3s var(--ease);
}
.oh-item:hover{border-color:var(--line-2)}
.oh-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  gap:8px;
  flex-wrap:wrap;
}
.oh-no{
  font-family:'Space Grotesk',sans-serif;
  color:var(--lime);
  font-weight:700;
  font-size:13px;
  text-shadow:0 0 12px var(--glow-lime);
}
.oh-date{font-size:11px;color:var(--dim);font-family:'Space Grotesk',sans-serif}
.oh-body{font-size:12.5px;color:var(--dim);line-height:1.75;margin-bottom:10px}
.oh-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  padding-top:10px;
  border-top:1px solid var(--glass-line);
}
.oh-total{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--lime)}

/* ============ Toast / Empty State ============ */
.empty-state{
  grid-column:1/-1;
  padding:80px 30px;
  text-align:center;
  color:var(--dim);
  border:1px dashed var(--glass-line);
  border-radius:var(--r-lg);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
}

/* ============ Notes ============ */
.citem__note-btn{
  font-size:11px;
  color:var(--dim);
  padding:5px 10px;
  border-radius:100px;
  margin-top:6px;
  transition:all .25s var(--ease);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.citem__note-btn:hover{background:var(--glass-bg-hi);color:var(--text)}
.citem__note-btn.on{color:var(--gold)}
.citem__later-btn{
  font-size:11px;
  color:var(--dim);
  padding:5px 10px;
  border-radius:100px;
  transition:all .25s var(--ease);
}
.citem__later-btn:hover{background:var(--glass-bg-hi);color:var(--purple)}
.citem__note-show{
  font-size:11px;
  color:var(--gold);
  margin-top:4px;
  padding:5px 10px;
  background:color-mix(in srgb,var(--gold) 10%,transparent);
  border-radius:8px;
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ============ QR / Reorder ============ */
.quick-reorder-btn{
  padding:10px 16px;
  border-radius:100px;
  background:linear-gradient(135deg,var(--lime),var(--green));
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  transition:all .35s var(--spring);
  box-shadow:0 8px 20px -8px var(--glow-lime);
}
.quick-reorder-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--glow-lime)}
.quick-reorder-btn:disabled{opacity:.5;cursor:not-allowed}
.quick-reorder-btn svg{width:14px;height:14px}

/* ============ Share Sheet ============ */
.share-sheet{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:320;
  background:color-mix(in srgb,var(--ink-1) 96%,transparent);
  backdrop-filter:blur(30px) saturate(180%);
  border-top:1px solid var(--glass-line);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:28px 22px 36px;
  transform:translateY(100%);
  transition:transform .5s var(--spring);
  max-width:500px;
  margin:0 auto;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.5);
}
.share-sheet.on{transform:translateY(0)}
.share-sheet__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.share-sheet__head h3{font-size:17px}
.share-sheet__options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.share-opt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 10px;
  border-radius:var(--r-md);
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  transition:all .35s var(--spring);
  cursor:pointer;
  font-family:inherit;
}
.share-opt:hover{border-color:var(--lime);transform:translateY(-4px)}
.share-opt .emoji{font-size:26px}
.share-opt span{font-size:11px;color:var(--text)}
.share-opt.tg{color:#229ED9}
.share-opt.copy{color:var(--lime)}

/* ============ Social Proof / Viewers ============ */
.pcard__viewers{
  position:absolute;
  bottom:14px;left:14px;
  padding:6px 12px;
  border-radius:100px;
  background:rgba(255,75,62,.9);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:10px;
  font-weight:700;
  z-index:3;
  display:flex;
  align-items:center;
  gap:5px;
  animation:pulseViewers 2.5s ease-in-out infinite;
}
.pcard__viewers::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:#fff;
  animation:blink 1.5s infinite;
}
@keyframes pulseViewers{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:.3}
}

/* ============ Purchase Popup ============ */
.purchase-popup{
  position:fixed;
  bottom:90px;right:24px;
  z-index:140;
  background:var(--glass-bg-hi);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:var(--shadow-lg);
  max-width:calc(100vw - 40px);
  transform:translateX(120%);
  transition:transform .55s var(--spring);
  font-size:12.5px;
}
.purchase-popup.on{transform:translateX(0)}
.purchase-popup img{
  width:44px;height:55px;
  border-radius:10px;
  object-fit:cover;
  flex-shrink:0;
  border:1px solid var(--glass-line);
}
.purchase-popup__text{flex:1;min-width:0}
.purchase-popup__text b{color:var(--lime);font-weight:700;text-shadow:0 0 12px var(--glow-lime)}
.purchase-popup__text small{display:block;color:var(--dim);font-size:10.5px;margin-top:3px}

/* ============ Search Suggest ============ */
.search-suggest{
  position:absolute;
  top:calc(100% + 10px);
  right:0;left:0;
  background:color-mix(in srgb,var(--ink-1) 96%,transparent);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);
  z-index:30;
  max-height:400px;
  overflow-y:auto;
  box-shadow:var(--shadow-lg);
  display:none;
}
.search-suggest.on{display:block}
.search-suggest__item{
  padding:14px 20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid var(--glass-line);
  transition:background .2s;
  text-align:right;
  font-family:inherit;
  width:100%;
}
.search-suggest__item:last-child{border-bottom:0}
.search-suggest__item:hover{background:var(--glass-bg-hi)}
.search-suggest__item img{width:42px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0}
.search-suggest__info{flex:1;min-width:0}
.search-suggest__name{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-suggest__price{font-size:11.5px;color:var(--lime);font-family:'Space Grotesk',sans-serif;margin-top:3px}
.search-suggest__head{padding:12px 20px 8px;font-size:11px;color:var(--dim);letter-spacing:.05em}
.search-suggest__history{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  cursor:pointer;
  font-size:13px;
  color:var(--dim);
  transition:all .2s;
}
.search-suggest__history:hover{background:var(--glass-bg-hi);color:var(--text)}
.search-suggest__history svg{width:14px;height:14px}
.search-suggest__clear{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  border-top:1px solid var(--glass-line);
  font-size:11.5px;
  color:var(--dim);
}
.search-suggest__clear button{color:var(--red);font-weight:600}

/* ============ Shipping Progress ============ */
.ship-progress{
  padding:16px 20px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border-radius:var(--r-md);
  margin-bottom:16px;
  border:1px solid var(--glass-line);
}
.ship-progress.done{
  background:color-mix(in srgb,var(--green) 10%,transparent);
  border-color:color-mix(in srgb,var(--green) 40%,transparent);
  box-shadow:0 0 30px -10px rgba(74,222,128,.5);
}
.ship-progress__text{
  font-size:12.5px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.ship-progress__text b{color:var(--lime);font-weight:700;text-shadow:0 0 12px var(--glow-lime)}
.ship-progress.done .ship-progress__text{color:var(--green);font-weight:600}
.ship-progress__bar{
  height:6px;
  background:rgba(0,0,0,.4);
  border-radius:100px;
  overflow:hidden;
  position:relative;
}
.ship-progress__fill{
  height:100%;
  background:linear-gradient(90deg,var(--lime),var(--green));
  border-radius:100px;
  transition:width .7s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 16px var(--glow-lime);
}

/* ============ Trust Badges ============ */
.trust-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0 0}
@media(max-width:700px){.trust-badges{grid-template-columns:repeat(2,1fr);gap:12px}}
.trust-badge{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);
  transition:all .4s var(--spring);
}
.trust-badge:hover{
  border-color:var(--lime);
  transform:translateY(-4px);
  box-shadow:0 20px 40px -15px rgba(0,0,0,.5),0 0 30px -10px var(--glow-lime);
}
.trust-badge__icon{
  width:42px;height:42px;
  border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--lime) 15%,transparent),color-mix(in srgb,var(--green) 10%,transparent));
  display:grid;place-items:center;
  font-size:20px;
  flex-shrink:0;
}
.trust-badge__text b{display:block;font-size:12.5px;color:var(--text);font-weight:600;margin-bottom:3px}
.trust-badge__text span{font-size:10.5px;color:var(--dim)}

/* ============ Float Cart ============ */
.float-cart{
  position:fixed;
  bottom:24px;right:24px;
  z-index:145;
  display:none;
  padding:15px 24px;
  border-radius:100px;
  background:linear-gradient(135deg,var(--lime),color-mix(in srgb,var(--lime) 70%,var(--green)));
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:13px;
  box-shadow:0 15px 40px -8px rgba(0,0,0,.6),0 0 40px -10px var(--glow-lime);
  align-items:center;
  gap:12px;
  transform:translateY(140%);
  opacity:0;
  transition:all .5s var(--spring);
}
.float-cart.on{transform:translateY(0);opacity:1}
.float-cart svg{width:18px;height:18px}
.float-cart__count{
  background:var(--ink);
  color:var(--lime);
  min-width:24px;height:24px;
  border-radius:100px;
  display:grid;place-items:center;
  font-size:11px;
  padding:0 7px;
}

/* ============ Quick Reorder ============ */
.quick-reorder-btn{font-family:inherit}

/* ============ Media Queries ============ */
@media(max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:50px}
  .hero__visual{max-width:420px}
  .editorial{grid-template-columns:1fr;grid-template-areas:"big" "small" "small2"}
  .story__grid{grid-template-columns:1fr;gap:40px}
  .foot__top{grid-template-columns:1fr 1fr;gap:34px}
  .gallery{grid-template-columns:1fr}
  .gallery__main{aspect-ratio:1}
  .detail{max-height:none}
}

@media(max-width:700px){
  .nav__links{display:none}
  .hamburger{display:grid}
  .nav{padding:14px 0}
  .nav__brand{font-size:18px}
  .icon-btn{width:40px;height:40px}
  .sec{padding:80px 0}
  .story{padding:90px 0}
  .hero{min-height:auto;padding:40px 0 70px}
  .hero__stats{gap:22px}
  .hero__stat .n{font-size:22px}
  .sec__head{margin-bottom:40px}
  .drawer{width:100%}
  .foot__top{grid-template-columns:1fr}
  .stat__v{font-size:20px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .vrow{grid-template-columns:1fr auto;gap:10px}
  .vrow__btns{grid-column:1/-1;justify-content:flex-end}
  .toasts{left:15px;right:15px;bottom:80px}
  .toast{min-width:auto}
  .countdown{padding:18px 20px}
  .countdown__item{min-width:46px;padding:8px 5px}
  .countdown__item .n{font-size:17px}
  .testimonials,.faq,.instagram{padding:80px 0}
  .compare-bar{padding:12px 16px;gap:10px}
  .compare-bar__item{width:38px;height:48px}
  .back-top{right:16px;bottom:16px;width:48px;height:48px}
  .back-top.shifted{bottom:84px}
  .live-chat{left:16px;bottom:16px;width:48px;height:48px}
  .live-chat__label{display:none}
  .np-grid{grid-template-columns:1fr}
  .compare-table{padding:22px}
  .compare-table th{width:100px;font-size:11px;padding:10px 8px}
  .compare-table td{padding:10px 8px;font-size:12px}
  .compare-table img{width:80px}
  .float-cart{display:flex}
  .toolbar{position:sticky;top:60px;z-index:40;background:color-mix(in srgb,var(--ink) 92%,transparent);backdrop-filter:blur(20px);padding:12px 0;margin:0 -20px;padding-inline:20px}
  .gallery__nav{opacity:1;width:36px;height:36px}
  .gallery__nav svg{width:16px;height:16px}
  .gallery__nav--prev{right:10px}
  .gallery__nav--next{left:10px}
  .purchase-popup{bottom:130px;right:16px;left:16px;max-width:none}
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .aurora__blob{animation:none}
  .hero__title em{animation:none!important}
}


/* ==========================================================
   G_SHOP — UX/UI refinement
   Clearer catalogue hierarchy, accessible controls and touch UX
   ========================================================== */
.skip-link{position:fixed;top:12px;right:12px;z-index:1000;padding:12px 18px;border-radius:12px;background:var(--lime);color:var(--ink);font-weight:800;transform:translateY(-160%);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--text);outline-offset:3px}
.sec .toolbar{align-items:stretch;gap:10px;padding:14px;border:1px solid var(--glass-line);border-radius:22px;background:var(--glass-bg);box-shadow:0 14px 38px -30px rgba(0,0,0,.65)}
.sec .toolbar__search{min-width:min(260px,100%)}
.sec .toolbar input[type="text"],.sec .toolbar select,.sec .toolbar .category-select{min-height:48px;border-radius:13px}
.sec .toolbar .chip{min-height:44px;padding:0 16px;border-radius:12px;white-space:nowrap}
.catalog-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:2px 0 16px;color:var(--dim);font-size:12.5px}
.catalog-meta p{margin:0}
.catalog-reset{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border-radius:11px;border:1px solid var(--glass-line);color:var(--text);background:var(--glass-bg);font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.catalog-reset:hover{border-color:var(--lime);color:var(--lime);background:var(--glass-bg-hi)}
.catalog-reset span{font-size:18px;line-height:1}
.catalog-reset[hidden]{display:none}
.pcard{border:1px solid color-mix(in srgb,var(--glass-line) 80%,transparent);border-radius:20px;overflow:hidden;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.pcard__img{background:var(--ink-3)}
.pcard__info{gap:7px}
.pcard__name{min-height:2.8em}
.pcard__quick{min-height:46px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--lime)!important;outline-offset:3px!important}
button:disabled{cursor:not-allowed}
@media(hover:hover) and (pointer:fine){.pcard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--lime) 48%,var(--glass-line));box-shadow:0 22px 48px -34px var(--glow-lime)}}
@media(max-width:700px){
  .sec .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;margin:0 -10px;border-radius:0 0 16px 16px;border-inline:0;border-top:0}
  .sec .toolbar__search{grid-column:1/-1;min-width:0}
  .sec .toolbar__search input{width:100%;min-width:0}
  .sec .toolbar select,.sec .toolbar .category-select{width:100%;min-width:0}
  .sec .toolbar .chip{width:100%;padding-inline:8px}
  .catalog-meta{margin:10px 0 12px;font-size:11.5px}
  .catalog-reset{min-height:36px;padding-inline:10px}
  .grid{gap:10px}
  .pcard{border-radius:15px}
  .pcard__info{padding:12px 12px 15px}
  .pcard__name{font-size:13px;min-height:2.8em}
  .pcard__price{font-size:14px}
  .pcard__quick{min-height:42px;padding:11px}
  .icon-btn,.close-x{min-width:42px;min-height:42px}
}
@media(max-width:380px){.nav__actions{gap:3px}.nav__actions .icon-btn{width:36px;height:40px}.grid{gap:8px}.pcard__info{padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.skip-link,.catalog-reset,.pcard{transition:none!important}}

/* G_SHOP UX phase 2 — detail, checkout and admin workflows */
.gallery__thumb{appearance:none;padding:0;font:inherit;display:block}
.gallery__thumb:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.checkout-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0 0 22px}
.checkout-steps li{text-align:center;padding:10px 6px;border:1px solid var(--glass-line);border-radius:12px;color:var(--dim);font-size:11px;background:var(--glass-bg)}
.checkout-steps li[aria-current="step"]{border-color:var(--lime);color:var(--lime);background:color-mix(in srgb,var(--lime) 9%,transparent);font-weight:800}
.field [aria-invalid="true"]{border-color:var(--red)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent)!important}
.err[role="alert"]{padding:10px 12px;border:1px solid color-mix(in srgb,var(--red) 35%,transparent);border-radius:10px;background:color-mix(in srgb,var(--red) 8%,transparent);line-height:1.8}
.prod-admin__layout{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;align-items:start}
.prod-admin__layout>div{min-width:0}
.prod-admin__layout .actions button,.ocard__actions button,.ocard__actions a,.status-sel{min-height:40px}
.ocard__actions{align-items:center}
.filter-bar input{flex:1;min-width:min(240px,100%)}
#adminTabs{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
@media(max-width:700px){
 .admin__bar{padding:12px 14px;gap:8px}.admin__bar h2{font-size:17px}.admin__bar>div{gap:6px!important}.admin__bar .btn{padding:9px 12px!important}.admin__body{padding:16px 12px 36px}
 #adminTabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;gap:7px;padding:4px 2px 12px;margin:0 -2px 18px;scroll-snap-type:x proximity}
 #adminTabs .tab{flex:0 0 auto;scroll-snap-align:start;padding:10px 14px;min-height:42px}
 .filter-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}.filter-bar input,.filter-bar select{width:100%;min-height:44px;border-radius:12px}
 .prod-admin{padding:14px;border-radius:14px}.prod-admin__layout{grid-template-columns:76px minmax(0,1fr);gap:12px}.prod-admin__head{align-items:flex-start}
 .prod-admin__layout .actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.prod-admin__layout .actions button{padding:9px 7px;min-height:42px;white-space:normal}
 .ocard{padding:14px;border-radius:14px}.ocard__head{align-items:flex-start}.ocard__foot{display:grid;grid-template-columns:1fr;gap:12px}.ocard__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ocard__actions>*{width:100%;justify-content:center;min-width:0}.ocard__actions .status-sel{grid-column:1/-1}
 .stats{gap:10px}.stat{padding:14px}.stat__v{font-size:20px}.chart{overflow-x:auto}.np-grid{grid-template-columns:1fr!important}
 .modal{padding:10px}.modal__box{max-height:calc(100dvh - 20px);overflow-y:auto;padding:26px 18px}.checkout-steps li{font-size:10px;padding:9px 3px}
}
@media(max-width:380px){.prod-admin__layout{grid-template-columns:1fr}.prod-admin__layout>div:first-child{width:100%;max-width:150px}.ocard__actions{grid-template-columns:1fr}.checkout-steps{gap:5px}}
@media(prefers-reduced-motion:reduce){.admin .tab,.prod-admin,.ocard,.gallery__thumb,.checkout-steps li{transition:none!important;animation:none!important}}

.admin-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 20px}
.admin-section-head h3{font-size:20px;margin:0 0 5px;color:var(--text)}
.admin-section-head p{font-size:12px;color:var(--dim);margin:0}
.admin-section-head>span{font-size:11px;color:var(--lime);border:1px solid var(--glass-line);border-radius:100px;padding:7px 11px}
@media(max-width:700px){.admin-section-head{align-items:flex-start;flex-direction:column}.admin-section-head h3{font-size:17px}}