/* ============================================================
   Kaala Bazaar — main.css (public site)
   Dark red/black gradient theme · vanilla CSS · mobile-first
   ============================================================ */

/* ===== Theme tokens ===== */
:root {
  --bg:#050505;
  --bg-2:#0d0d0f;
  --surface:#121214;
  --border:rgba(255,255,255,.08);
  --red:#e11d2e;
  --red-2:#ff3b3b;
  --red-dark:#7a0a14;
  --text:#f5f5f7;
  --muted:#9a9aa3;
  --radius:16px;
  --radius-sm:10px;
  --header-h:120px;
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --glow:0 0 24px rgba(225,29,46,.35);
}

/* ===== Reset / base ===== */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Ubuntu,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 620px at 88% -8%, rgba(225,29,46,.20), transparent 62%),
    radial-gradient(760px 560px at -12% 26%, rgba(122,10,20,.42), transparent 60%),
    radial-gradient(600px 600px at 50% 120%, rgba(58,7,16,.65), transparent 65%),
    linear-gradient(135deg,#000 0%,#140206 50%,#3a0710 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{ margin:0 0 .5em; line-height:1.2; font-weight:700; }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; border-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
code,pre,kbd,samp{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
hr{ border:0; border-top:1px solid var(--border); margin:24px 0; }

::selection{ background:rgba(225,29,46,.55); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0a0a0c; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--red-dark),var(--red)); border-radius:8px; border:2px solid #0a0a0c; }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--red),var(--red-2)); }
*{ scrollbar-width:thin; scrollbar-color:var(--red-dark) #0a0a0c; }

:focus-visible{
  outline:2px solid var(--red-2);
  outline-offset:2px;
  border-radius:4px;
}

/* images: lazy-load friendly + broken/empty placeholder */
img{ object-fit:cover; }
.ph,
img.ph{
  background-image:linear-gradient(135deg,#1a0a0e 0%,#2a1016 50%,#160a0d 100%);
  background-size:cover;
  background-position:center;
  min-height:80px;
}

.no-scroll{ overflow:hidden; }

/* ===== Skip link ===== */
.skip-link{
  position:fixed;
  top:-60px;
  left:16px;
  z-index:12000;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
  font-weight:600;
  font-size:14px;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

/* ===== Icons ===== */
.fi{
  line-height:1;
  display:inline-block;
  font-style:normal;
}
.ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.4em;
  height:1.4em;
  font-size:inherit;
  line-height:1;
  flex:none;
}
.ico-sm{ font-size:14px; }
.ico-lg{ font-size:22px; }
.ico-xl{ font-size:34px; }

/* ===== Layout utilities ===== */
.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 20px;
}
.row{ display:flex; flex-wrap:wrap; align-items:center; }
.between{ justify-content:space-between; }
.center{ justify-content:center; align-items:center; }
.col{ display:flex; flex-direction:column; }
.gap-8{ gap:8px; }
.gap-12{ gap:12px; }
.gap-16{ gap:16px; }
.gap-24{ gap:24px; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.hidden{ display:none !important; }
.text-red{ color:var(--red-2); }
.nowrap{ white-space:nowrap; }
.mt-8{ margin-top:8px; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; }
.mb-16{ margin-bottom:16px; }
.mb-24{ margin-bottom:24px; }
.w-full{ width:100%; }

.glass,
.card{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.card-pad{ padding:20px; }

.divider{
  height:1px;
  width:100%;
  background:var(--border);
  border:0;
  margin:16px 0;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--surface);
  color:var(--text);
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  text-align:center;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
}
.btn .fi{ margin-right:8px; }
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
  box-shadow:0 6px 20px rgba(225,29,46,.28);
}
.btn-primary:hover{
  box-shadow:var(--glow), 0 8px 26px rgba(225,29,46,.4);
  transform:translateY(-2px);
}

.btn-outline{
  background:transparent;
  border-color:var(--red);
  color:var(--red-2);
}
.btn-outline:hover{
  background:rgba(225,29,46,.12);
  box-shadow:var(--glow);
  transform:translateY(-2px);
}

.btn-ghost{
  background:rgba(255,255,255,.05);
  border-color:var(--border);
  color:var(--text);
}
.btn-ghost:hover{ background:rgba(255,255,255,.1); }

.btn-danger{
  background:linear-gradient(135deg,#7a0a14,#e11d2e);
  color:#fff;
}
.btn-danger:hover{ box-shadow:var(--glow); transform:translateY(-2px); }

.btn-sm{ padding:8px 14px; font-size:13px; border-radius:10px; }
.btn-lg{ padding:15px 26px; font-size:16px; border-radius:14px; }
.btn-block{ width:100%; display:flex; }

.btn-icon{
  width:40px;
  height:40px;
  min-width:40px;
  padding:0;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-icon .fi{ margin-right:0; }

.btn:disabled,
.btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
  transform:none;
}

.btn.is-loading{
  pointer-events:none;
  opacity:.8;
  position:relative;
}
.btn.is-loading::after{
  content:"";
  width:15px;
  height:15px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
  margin-left:8px;
}

/* ===== Forms ===== */
.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:500;
}
.input,
.select,
.textarea{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  color:var(--text);
  font-size:14px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input::placeholder,
.textarea::placeholder{ color:#6d6d76; }
.input:hover,
.select:hover,
.textarea:hover{ border-color:rgba(255,255,255,.16); }
.input:focus,
.select:focus,
.textarea:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(225,29,46,.22);
}
.textarea{ min-height:110px; resize:vertical; line-height:1.5; }
.select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%239a9aa3' d='M6 8 0 0h12z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}

.input-icon{ position:relative; }
.input-icon .fi{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
}
.input-icon .input,
.input-icon .select{ padding-left:38px; }

.field .hint{ margin-top:6px; }
.hint{ font-size:12px; color:var(--muted); }
.field-err{ display:none; font-size:12px; color:var(--red-2); margin-top:6px; }
.field.error .input,
.field.error .select,
.field.error .textarea{ border-color:var(--red); }
.field.error .field-err{ display:block; }

.check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:var(--text);
  cursor:pointer;
  line-height:1.4;
}
.check input[type=checkbox],
.check input[type=radio]{
  accent-color:var(--red);
  width:16px;
  height:16px;
  margin-top:2px;
  flex:none;
  cursor:pointer;
}

.switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:14px;
}
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .track{
  width:42px;
  height:24px;
  border-radius:99px;
  background:rgba(255,255,255,.12);
  border:1px solid var(--border);
  position:relative;
  transition:background .25s ease;
  flex:none;
}
.switch .track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#c9c9d1;
  transition:transform .25s ease, background .25s ease;
}
.switch input:checked + .track{ background:linear-gradient(135deg,var(--red),var(--red-2)); }
.switch input:checked + .track::after{ transform:translateX(18px); background:#fff; }
.switch input:focus-visible + .track{ outline:2px solid var(--red-2); outline-offset:2px; }

.search-box{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:99px;
  padding:6px 14px;
  min-width:0;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.search-box:focus-within{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(225,29,46,.18);
}
.search-box .fi{ color:var(--muted); flex:none; }
.search-box input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  outline:none;
  padding:6px 0;
  font-size:14px;
  color:var(--text);
}
.search-box input::placeholder{ color:#75757e; }

/* ===== Badges / status ===== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:99px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.6;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
}
.badge-red{ background:rgba(225,29,46,.18); border-color:rgba(225,29,46,.45); color:#ff8b95; }
.badge-green{ background:rgba(28,190,110,.16); border-color:rgba(28,190,110,.4); color:#5fe3a4; }
.badge-amber{ background:rgba(245,166,35,.16); border-color:rgba(245,166,35,.4); color:#ffc76b; }
.badge-blue{ background:rgba(56,132,255,.16); border-color:rgba(56,132,255,.4); color:#8fbaff; }
.badge-dim{ background:rgba(255,255,255,.05); color:#82828c; }

.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red-2);
  display:inline-block;
  flex:none;
  animation:pulse 1.6s ease-in-out infinite;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:99px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.5;
  border:1px solid transparent;
  white-space:nowrap;
}
.status::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex:none;
}
[data-status]{ color:var(--muted); background:rgba(255,255,255,.06); border-color:var(--border); }
[data-status="pending_payment"],
[data-status="pending"]{ color:#ffc76b; background:rgba(245,166,35,.14); border-color:rgba(245,166,35,.35); }
[data-status="payment_submitted"]{ color:#8fbaff; background:rgba(56,132,255,.14); border-color:rgba(56,132,255,.35); }
[data-status="paid"]{ color:#5fe3a4; background:rgba(28,190,110,.16); border-color:rgba(28,190,110,.38); }
[data-status="processing"]{
  color:#8fbaff;
  background:rgba(56,132,255,.16);
  border-color:rgba(56,132,255,.4);
  animation:pulse 1.4s ease-in-out infinite;
}
[data-status="completed"],
[data-status="resolved"],
[data-status="active"],
[data-status="live"]{ color:#5fe3a4; background:rgba(28,190,110,.22); border-color:rgba(28,190,110,.5); }
[data-status="cancelled"],
[data-status="expired"],
[data-status="closed"],
[data-status="hidden"],
[data-status="draft"]{ color:#8a8a94; background:rgba(255,255,255,.05); border-color:var(--border); }
[data-status="refunded"]{ color:#a896ff; background:rgba(124,92,255,.16); border-color:rgba(124,92,255,.4); }
[data-status="failed"],
[data-status="banned"]{ color:#ff8b95; background:rgba(225,29,46,.18); border-color:rgba(225,29,46,.45); }
[data-status="open"]{ color:#8fbaff; background:rgba(56,132,255,.14); border-color:rgba(56,132,255,.35); }

/* ===== Skeletons ===== */
.skeleton{
  background:linear-gradient(90deg,#161014 25%,#241216 37%,#161014 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:10px;
  display:block;
}
.sk-card{ aspect-ratio:4/5; width:100%; }
.sk-row{ height:48px; width:100%; margin-bottom:8px; }
.sk-table{ display:flex; flex-direction:column; gap:10px; }
.sk-table .skeleton{ height:40px; }
.sk-stat{ height:96px; width:100%; }
.sk-text{ height:12px; width:100%; margin-bottom:8px; }
.sk-text.w-60{ width:60%; }
.sk-text.w-40{ width:40%; }
.sk-text.w-80{ width:80%; }
.sk-text.lg{ height:16px; }
.sk-circle{ width:44px; height:44px; border-radius:50%; flex:none; }
.sk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}

/* ===== Empty state ===== */
.empty{
  text-align:center;
  padding:48px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.empty .ico{
  width:64px;
  height:64px;
  font-size:26px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%, rgba(225,29,46,.35), rgba(225,29,46,.12));
  border:1px solid rgba(225,29,46,.4);
  color:var(--red-2);
  margin-bottom:16px;
}
.empty h3{ font-size:19px; margin-bottom:6px; }
.empty p{ color:var(--muted); max-width:420px; margin:0 auto; font-size:14px; }
.empty .btn{ margin-top:16px; }

/* ===== Toasts ===== */
.toasts{
  position:fixed;
  top:16px;
  right:16px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:360px;
  width:100%;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 14px;
  background:rgba(18,18,20,.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-left:3px solid var(--muted);
  border-radius:12px;
  box-shadow:var(--shadow);
  animation:toastIn .3s ease both;
}
.toast.ok{ border-left-color:#1cbe6e; }
.toast.err{ border-left-color:var(--red); }
.toast .t-ico{ flex:none; font-size:18px; line-height:1.4; color:var(--muted); }
.toast.ok .t-ico{ color:#3ddc97; }
.toast.err .t-ico{ color:var(--red-2); }
.toast .t-msg{ flex:1; font-size:14px; line-height:1.45; }
.toast .t-x{
  flex:none;
  color:var(--muted);
  font-size:15px;
  line-height:1;
  padding:2px;
  transition:color .2s ease;
}
.toast .t-x:hover{ color:var(--text); }
.toast.out{ animation:toastOut .3s ease forwards; }

/* ===== Modal ===== */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .25s ease;
}
.modal-backdrop.open{ display:flex; opacity:1; }
.modal{
  width:calc(100% - 32px);
  max-width:560px;
  max-height:86vh;
  overflow:auto;
  background:rgba(18,18,20,.82);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transform:scale(.94);
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
}
.modal-backdrop.open .modal{ transform:scale(1); opacity:1; }
.modal.wide{ max-width:900px; }
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}
.modal-title{ font-size:17px; font-weight:700; margin:0; }
.modal-x{
  width:32px;
  height:32px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:background .2s ease, color .2s ease;
}
.modal-x:hover{ background:rgba(225,29,46,.16); color:var(--red-2); }
.modal-body{ padding:20px; }
.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 20px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}

/* ===== Spinner ===== */
.spin{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:var(--red-2);
  display:inline-block;
  animation:spin .7s linear infinite;
  flex:none;
}
.spin-lg{ width:40px; height:40px; border-width:3px; }
.btn .spin{ margin-left:8px; }
.center-spin{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

/* ===== Splash ===== */
.splash{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  text-align:center;
  background:linear-gradient(160deg,#000 0%,#140206 55%,#3a0710 100%);
  opacity:1;
  transition:opacity .6s ease;
}
.splash.out{ opacity:0; pointer-events:none; }
.splash-logo{
  width:120px;
  height:120px;
  margin:0 auto 18px;
  object-fit:contain;
  border-radius:24px;
  animation:splashGlow 1.8s ease-in-out infinite;
}
.splash-name{
  font-size:26px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.32em;
  color:#fff;
  padding-left:.32em;
}
.splash-bar{
  width:220px;
  height:3px;
  margin:22px auto 0;
  background:rgba(255,255,255,.12);
  border-radius:99px;
  overflow:hidden;
}
.splash-bar-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--red),var(--red-2));
  border-radius:99px;
  animation:fillBar 1.6s ease forwards;
}

/* ===== Route progress ===== */
.route-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:100%;
  z-index:9800;
  background:linear-gradient(90deg,var(--red),var(--red-2));
  transform:scaleX(.25);
  transform-origin:left;
  transition:transform .35s ease, opacity .3s ease;
  box-shadow:0 0 12px rgba(225,29,46,.7);
}
.route-progress.done{ opacity:0; transform:scaleX(1); pointer-events:none; }

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:500;
  background:rgba(9,9,11,.78);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:12px 20px;
  min-height:64px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
.brand-logo{
  width:36px;
  height:36px;
  border-radius:10px;
  object-fit:contain;
  box-shadow:0 0 18px rgba(225,29,46,.4);
}
.brand-name{
  font-size:18px;
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(135deg,#fff 20%,var(--red-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.header-search{
  position:relative;
  flex:1;
  max-width:420px;
}
.header-search > .fi{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:15px;
  color:var(--muted);
  pointer-events:none;
  z-index:1;
}
.header-search > .input{ padding-left:36px; }
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex:none;
}
.icon-btn{
  position:relative;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(18,18,20,.72);
  border:1px solid var(--border);
  color:var(--text);
  font-size:17px;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.icon-btn:hover{
  border-color:rgba(225,29,46,.5);
  box-shadow:var(--glow);
  transform:translateY(-2px);
}
.count-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:99px;
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
  border:1px solid rgba(0,0,0,.4);
}
.count-badge.notif-badge{
  background:linear-gradient(135deg,var(--red-2),#ff8c3b);
}
.user-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 12px 5px 5px;
  border-radius:99px;
  background:rgba(18,18,20,.72);
  border:1px solid var(--border);
  font-size:14px;
  font-weight:600;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.user-chip:hover{ border-color:rgba(225,29,46,.5); box-shadow:var(--glow); }
.user-chip img{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
}
.user-chip .fi{ font-size:12px; color:var(--muted); }
.user-chip-wrap{ position:relative; }
.user-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:220px;
  background:rgba(18,18,20,.92);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;
  display:none;
  z-index:600;
}
.user-menu.open{ display:block; animation:fadeIn .18s ease both; }
.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  color:var(--muted);
  text-align:left;
  transition:background .18s ease, color .18s ease;
}
.menu-item .fi{ font-size:15px; width:18px; text-align:center; }
.menu-item:hover{ background:rgba(225,29,46,.14); color:#fff; }
.menu-item.danger:hover{ background:rgba(225,29,46,.24); }
.menu-sep{ height:1px; background:var(--border); margin:6px 4px; }

.hamburger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(18,18,20,.72);
  border:1px solid var(--border);
  color:var(--text);
  flex:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hamburger:hover{ border-color:rgba(225,29,46,.5); box-shadow:var(--glow); }
.hamburger .bars{ display:flex; flex-direction:column; gap:4px; }
.hamburger .bars i{ display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }

/* ===== Nav ===== */
.main-nav{
  background:rgba(5,5,5,.6);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;
  align-items:center;
  gap:4px;
  max-width:1240px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
}
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  white-space:nowrap;
  transition:color .2s ease;
}
.nav-link:hover{ color:#fff; }
.nav-link.active{ color:#fff; font-weight:600; }
.nav-link.active::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-1px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--red-2));
}
.nav-drop{ position:relative; }
.nav-drop-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:230px;
  background:rgba(18,18,20,.94);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:700;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-drop-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  color:var(--muted);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.nav-drop-item .fi{ font-size:15px; color:var(--red-2); width:18px; text-align:center; }
.nav-drop-item:hover{ background:rgba(225,29,46,.14); color:#fff; transform:translateX(3px); }
.nav-tools{ margin-left:auto; display:flex; align-items:center; gap:8px; }

/* ===== Drawer ===== */
.overlay-backdrop,
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:940;
}
.overlay-backdrop.show,
.drawer-overlay.show{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(340px,88vw);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  background:rgba(14,14,16,.94);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-left:1px solid var(--border);
  z-index:950;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
}
.drawer-user{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 18px 4px;
  padding:14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:14px;
}
.drawer-user img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.drawer-user .du-name{ font-size:15px; font-weight:700; }
.drawer-user .du-links{ display:flex; gap:12px; margin-top:4px; font-size:12px; color:var(--red-2); }
.drawer-sect{ margin:16px 12px 6px; }
.drawer-sect-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  margin:14px 10px 6px;
}
.drawer-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  color:var(--muted);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.drawer-link .fi{ font-size:16px; width:20px; text-align:center; color:var(--red-2); }
.drawer-link:hover,
.drawer-link.active{
  background:rgba(225,29,46,.14);
  color:#fff;
  transform:translateX(4px);
}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:72px 0 64px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  opacity:.5;
  pointer-events:none;
}
.hero-bg canvas,
.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--red-2);
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:linear-gradient(90deg,var(--red),var(--red-2));
  display:block;
}
.hero h1{
  font-size:clamp(2.4rem,6vw,4rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  margin-bottom:18px;
}
.hero h1 .grad{
  background:linear-gradient(135deg,var(--red) 0%,var(--red-2) 60%,#ff8c8c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  color:var(--muted);
  font-size:17px;
  max-width:560px;
  margin-bottom:26px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  margin-top:32px;
}
.hero-stat .v{ font-size:24px; font-weight:700; display:block; }
.hero-stat .l{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.hero-card{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  transition:box-shadow .3s ease, transform .3s ease;
}
.hero-card:hover{ box-shadow:var(--glow); transform:translateY(-4px); }
.hero-card .hc-media{
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:16px;
}
.hero-card .hc-media img{ width:100%; height:100%; object-fit:cover; }
.hero-card .hc-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.hero-card .hc-row:last-child{ border-bottom:0; }

/* ===== Sections ===== */
.section{ padding:56px 0; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.section-title{
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 6px;
}
.section-sub{ color:var(--muted); font-size:15px; margin:0; max-width:640px; }
.link-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--red-2);
  font-size:13px;
  font-weight:600;
  transition:color .2s ease;
}
.link-more:hover{ color:#ff8b95; text-decoration:underline; }

/* ===== Stats ===== */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.stat-card{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  transition:box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.stat-card:hover{
  box-shadow:var(--glow);
  transform:translateY(-3px);
  border-color:rgba(225,29,46,.45);
}
.st-ico{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
  font-size:20px;
  margin-bottom:14px;
  box-shadow:0 6px 18px rgba(225,29,46,.32);
}
.st-val{ font-size:26px; font-weight:700; line-height:1.2; }
.st-lbl{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:4px; }
.st-sub{ font-size:12px; color:var(--muted); margin-top:8px; }

/* ===== Category grid ===== */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
}
.cat-card{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.cat-card:hover{
  border-color:rgba(225,29,46,.55);
  box-shadow:var(--glow);
  transform:translateY(-3px);
}
.cat-ico{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:var(--red-2);
  margin-bottom:4px;
}
.cat-name{ font-size:15px; font-weight:600; }
.cat-count{ font-size:12px; color:var(--muted); }

/* ===== Products ===== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}
.product-card{
  display:flex;
  flex-direction:column;
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  min-width:0;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--glow);
  border-color:rgba(225,29,46,.45);
}
.p-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:linear-gradient(135deg,#16090d,#2a1016);
}
.p-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.product-card:hover .p-media img{ transform:scale(1.06); }
.p-badges{
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:2;
}
.p-badge{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:3px 8px;
  border-radius:99px;
  background:rgba(5,5,5,.75);
  border:1px solid var(--border);
  color:var(--muted);
  line-height:1.5;
}
.p-badge.sale{
  background:linear-gradient(135deg,var(--red),var(--red-2));
  border-color:transparent;
  color:#fff;
}
.p-badge.stock{ background:rgba(5,5,5,.75); color:var(--muted); }
.p-badge.out{ background:rgba(225,29,46,.9); color:#fff; border-color:transparent; }
.wish-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,5,5,.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid var(--border);
  color:#fff;
  font-size:15px;
  z-index:2;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.wish-btn:hover{ transform:scale(1.1); color:var(--red-2); }
.wish-btn.active{
  background:linear-gradient(135deg,var(--red),var(--red-2));
  border-color:transparent;
  color:#fff;
}
.p-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  flex:1;
}
.p-cat{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--red-2);
  font-weight:700;
}
.p-title{
  font-size:16px;
  font-weight:600;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.p-title a:hover{ color:var(--red-2); }
.p-rating{ display:flex; align-items:center; gap:8px; font-size:12px; }
.p-rating .stars{ color:#ffb020; letter-spacing:1px; font-size:12px; display:inline-flex; gap:1px; }
.p-rating .rcnt{ color:var(--muted); font-size:12px; }
.p-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:6px;
}
.price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.price .now{ font-size:18px; font-weight:700; }
.price .was{ font-size:13px; color:var(--muted); text-decoration:line-through; }
.price .off{ font-size:11px; color:#3ddc97; font-weight:700; }
.p-actions{ display:flex; gap:8px; }

/* list view */
.product-grid.list{ grid-template-columns:1fr; }
.product-grid.list .product-card{
  display:grid;
  grid-template-columns:200px 1fr auto;
  align-items:stretch;
}
.product-grid.list .p-media{ aspect-ratio:auto; height:100%; min-height:150px; }
.product-grid.list .p-body{ padding:18px; }
.product-grid.list .p-foot{
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:12px;
  margin-top:0;
  padding:18px;
  border-left:1px solid var(--border);
}

/* ===== Reviews ===== */
.review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.review-card{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}
.rv-head{ display:flex; align-items:center; gap:12px; }
.rv-av{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.rv-name{ font-size:14px; font-weight:600; }
.rv-stars{ color:#ffb020; font-size:12px; letter-spacing:1px; }
.rv-body{ font-size:14px; color:var(--muted); margin-top:12px; line-height:1.6; }
.rv-date{ font-size:11px; color:#75757e; margin-top:10px; }

/* ===== Features ===== */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.feat-card{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  transition:box-shadow .28s ease, transform .28s ease;
}
.feat-card:hover{ box-shadow:var(--glow); transform:translateY(-3px); }
.feat-ico{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(225,29,46,.28),rgba(255,59,59,.12));
  border:1px solid rgba(225,29,46,.4);
  color:var(--red-2);
  margin-bottom:16px;
}
.feat-card h3{ font-size:17px; margin-bottom:8px; }
.feat-card p{ font-size:14px; color:var(--muted); margin:0; }

/* ===== FAQ ===== */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-group{ margin-bottom:6px; }
.faq-item{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:10px;
  overflow:hidden;
}
.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:16px 20px;
  font-size:15px;
  font-weight:600;
  text-align:left;
  color:var(--text);
  transition:color .2s ease;
}
.faq-q:hover{ color:var(--red-2); }
.faq-q .fi{ color:var(--red-2); font-size:14px; transition:transform .3s ease; flex:none; }
.faq-item.open .faq-q .fi{ transform:rotate(180deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  font-size:14px;
  color:var(--muted);
  padding:0 20px;
}
.faq-item.open .faq-a{ max-height:600px; padding:0 20px 18px; }

/* ===== Announcement ===== */
.announce-wrap{ position:sticky; top:var(--header-h); z-index:400; }
.announce{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px;
  background:linear-gradient(135deg,var(--red-dark),var(--red) 55%,var(--red-2));
  color:#fff;
  font-size:14px;
  text-align:center;
  position:relative;
}
.announce.link{ cursor:pointer; }
.announce.link:hover{ filter:brightness(1.08); }
.announce-x{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  opacity:.8;
  font-size:15px;
  padding:2px 6px;
  border-radius:6px;
}
.announce-x:hover{ opacity:1; background:rgba(0,0,0,.2); }
.flash-timer{ display:flex; gap:8px; }
.t-box{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  padding:4px 8px;
  text-align:center;
  min-width:44px;
}
.t-box b{ display:block; font-size:22px; font-weight:700; line-height:1.2; }
.t-box span{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.85; }

/* ===== Footer ===== */
.footer{
  margin-top:64px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.6);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px;
  padding:48px 0;
}
.footer-brand .row{ margin-bottom:14px; }
.footer-brand p{ font-size:14px; color:var(--muted); max-width:320px; }
.socials{ display:flex; gap:10px; margin-top:16px; }
.social-link{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(18,18,20,.72);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:16px;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.social-link:hover{
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--glow);
  transform:translateY(-3px);
}
.footer-col h4{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  margin-bottom:16px;
}
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{
  font-size:14px;
  color:var(--muted);
  transition:color .2s ease, transform .2s ease;
  display:inline-block;
}
.footer-links a:hover{ color:#fff; transform:translateX(4px); }
.footer-bottom{
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:20px;
  font-size:13px;
  color:var(--muted);
}
.footer-bottom .powered{ color:var(--red-2); font-weight:600; }
.footer-bottom .fb-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-bottom .fb-links a:hover{ color:#fff; }

/* ===== Tabs ===== */
.tabs{
  position:relative;
  display:flex;
  gap:4px;
  overflow-x:auto;
  border-bottom:1px solid var(--border);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  display:inline-flex;
  align-items:center;
  padding:12px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .2s ease;
}
.tab .fi{ margin-right:8px; font-size:15px; }
.tab:hover{ color:#fff; }
.tab.active{ color:#fff; }
.tab-ink{
  position:absolute;
  bottom:-1px;
  left:0;
  height:2px;
  width:0;
  background:linear-gradient(90deg,var(--red),var(--red-2));
  transition:left .3s ease, width .3s ease;
}
.tab-panel{ display:none; padding-top:20px; }
.tab-panel.active{ display:block; animation:fadeIn .25s ease both; }

/* ===== Breadcrumbs ===== */
.crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
  margin-bottom:20px;
}
.crumbs a{ color:var(--muted); transition:color .2s ease; }
.crumbs a:hover{ color:#fff; }
.crumbs .sep{ font-size:11px; color:#5f5f68; }
.crumbs .current{ color:var(--text); }

/* ===== Product page ===== */
.product-page{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:start;
}
.gallery{ min-width:0; }
.g-main{
  position:relative;
  aspect-ratio:4/3;
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.g-main img{ width:100%; height:100%; object-fit:contain; }
.g-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.g-thumb{
  width:70px;
  height:70px;
  border-radius:10px;
  overflow:hidden;
  background:rgba(18,18,20,.72);
  border:1px solid var(--border);
  padding:0;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.g-thumb img{ width:100%; height:100%; object-fit:cover; }
.g-thumb:hover{ transform:translateY(-2px); }
.g-thumb.active{ border-color:var(--red); box-shadow:var(--glow); }
.p-info{ min-width:0; }
.p-info h1{ font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:800; margin-bottom:10px; }
.p-short{ font-size:16px; color:var(--muted); margin-bottom:18px; }
.variant-list{ display:flex; flex-direction:column; gap:10px; }
.variant{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid transparent;
  border-radius:12px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.variant:hover{ border-color:rgba(225,29,46,.4); transform:translateX(2px); }
.variant.active{
  border-color:var(--red);
  background:rgba(225,29,46,.12);
  box-shadow:var(--glow);
}
.variant .v-name{ font-size:15px; font-weight:600; }
.variant .v-meta{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.variant .v-price{ font-size:16px; font-weight:700; }
.variant .v-old{ font-size:13px; color:var(--muted); text-decoration:line-through; }
.variant .v-stock{ display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.variant.v-sold{ opacity:.55; cursor:not-allowed; }
.variant.v-sold:hover{ border-color:transparent; transform:none; }

.buy-box{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin-top:16px;
}
.qty{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(5,5,5,.5);
  border:1px solid var(--border);
  border-radius:99px;
  padding:4px;
}
.qty-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-size:15px;
  transition:background .2s ease, color .2s ease;
}
.qty-btn:hover{ background:linear-gradient(135deg,var(--red),var(--red-2)); color:#fff; }
.qty input{
  width:48px;
  text-align:center;
  background:transparent;
  border:0;
  outline:none;
  font-size:15px;
  font-weight:600;
  color:var(--text);
}
.info-tabs{ margin-top:28px; }
.info-tabs .tab-panel{ padding-top:18px; }
.stars{ color:#ffb020; letter-spacing:1px; font-size:13px; display:inline-flex; gap:1px; align-items:center; }
.stars .off{ color:#4b4b54; }

.feature-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.feature-list li{
  position:relative;
  padding-left:26px;
  font-size:14px;
  color:var(--muted);
}
.feature-list li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(225,29,46,.2);
  color:var(--red-2);
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.rating-summary{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin:16px 0; }
.rating-big{ font-size:48px; font-weight:800; line-height:1; }
.rating-bars{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:220px; }
.rating-bar{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.rating-bar .lbl{ width:36px; }
.rating-bar .bar{
  flex:1;
  height:6px;
  background:rgba(255,255,255,.08);
  border-radius:99px;
  overflow:hidden;
}
.rating-bar .bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--red),var(--red-2));
  border-radius:99px;
}
.review-form{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}
.star-pick{ display:flex; gap:4px; font-size:28px; margin-bottom:14px; }
.star-pick button{
  color:#4b4b54;
  line-height:1;
  transition:color .15s ease, transform .15s ease;
}
.star-pick button:hover{ transform:scale(1.15); }
.star-pick button.on{ color:#ffb020; }

/* ===== Cart / checkout ===== */
.cart-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
.cart-line{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:12px;
  flex-wrap:wrap;
}
.cl-img{ width:72px; height:72px; border-radius:12px; object-fit:cover; flex:none; }
.cl-main{ flex:1; min-width:140px; }
.cl-title{ font-size:15px; font-weight:600; }
.cl-sub{ font-size:12px; color:var(--muted); margin-top:3px; }
.cl-qty{ display:flex; align-items:center; gap:12px; }
.cl-price{ font-size:16px; font-weight:700; min-width:80px; text-align:right; }
.cl-x{
  width:32px;
  height:32px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:background .2s ease, color .2s ease;
}
.cl-x:hover{ background:rgba(225,29,46,.18); color:var(--red-2); }

.summary{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  position:sticky;
  top:90px;
}
.sum-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0 14px;
  color:var(--muted);
  font-size:14px;
}
.sum-row .val{ color:var(--text); }
.sum-row .val.bold{ font-weight:700; }
.sum-row.total{
  border-top:1px solid var(--border);
  margin-top:6px;
  padding-top:16px;
  font-size:18px;
  font-weight:700;
  color:#fff;
}
.coupon-line{ display:flex; gap:8px; margin:6px 0 16px; }
.coupon-line .input{ flex:1; min-width:0; }

.steps{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  max-width:640px;
  margin:0 auto 24px;
  position:relative;
  gap:8px;
}
.step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  flex:1;
  position:relative;
  z-index:1;
}
.step .n{
  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(18,18,20,.9);
  border:1px solid var(--border);
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.step.active{ color:#fff; }
.step.active .n{
  background:linear-gradient(135deg,var(--red),var(--red-2));
  border-color:transparent;
  color:#fff;
  box-shadow:var(--glow);
}
.step.done .n{
  background:rgba(28,190,110,.25);
  border-color:rgba(28,190,110,.6);
  color:#5fe3a4;
}
.step.done{ color:#5fe3a4; }

.pay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}
.pay-card{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pay-card:hover{ transform:translateY(-3px); border-color:rgba(225,29,46,.45); }
.pay-card.chosen{ border-color:var(--red); box-shadow:var(--glow); background:rgba(225,29,46,.08); }
.pay-card a{ color:var(--red-2); font-size:13px; font-weight:600; }
.pay-ico{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--red-2);
  margin-bottom:6px;
}
.pay-name{ font-size:15px; font-weight:600; }
.pay-desc{ font-size:12px; color:var(--muted); }
.pay-cta{ margin-top:16px; }

.proof-box{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px dashed rgba(225,29,46,.55);
  border-radius:var(--radius);
  padding:20px;
}
.drop{
  border:2px dashed rgba(225,29,46,.4);
  border-radius:12px;
  padding:28px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.drop .fi{ display:block; font-size:26px; color:var(--red-2); margin-bottom:10px; }
.drop:hover{ border-color:var(--red); color:var(--text); }
.drop.over{ background:rgba(225,29,46,.14); border-color:var(--red-2); color:var(--text); }

.note-box{
  background:rgba(245,166,35,.08);
  border:1px solid rgba(245,166,35,.35);
  border-radius:12px;
  padding:14px 16px;
  font-size:13px;
  color:#ffd692;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.note-box .fi{ color:#ffb020; flex:none; margin-top:2px; }

.countdown{ display:flex; gap:8px; flex-wrap:wrap; }
.cd-box{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:10px;
  min-width:60px;
  text-align:center;
  padding:8px;
}
.cd-v{ font-size:20px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.cd-l{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* ===== Dashboard ===== */
.dash{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
.dash-side{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  position:sticky;
  top:90px;
  align-self:start;
}
.dash-link{
  display:flex;
  align-items:center;
  padding:11px 14px;
  border-radius:10px;
  font-size:14px;
  color:var(--muted);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dash-link .fi{ margin-right:10px; font-size:16px; width:18px; text-align:center; }
.dash-link:hover{ color:#fff; background:rgba(255,255,255,.05); }
.dash-link.active{
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
  box-shadow:var(--glow);
  font-weight:600;
}
.dash-sect-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  margin:14px 10px 6px;
}
.dash-main{ min-width:0; }
.dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.dh-title{ font-size:24px; font-weight:700; margin:0; }
.dh-sub{ font-size:14px; color:var(--muted); margin:2px 0 0; }
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.tile{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transition:box-shadow .25s ease, transform .25s ease;
}
.tile:hover{ box-shadow:var(--glow); transform:translateY(-3px); }
.t-ico{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(225,29,46,.3),rgba(255,59,59,.12));
  border:1px solid rgba(225,29,46,.35);
  color:var(--red-2);
  font-size:17px;
  flex:none;
}
.t-val{ font-size:22px; font-weight:700; line-height:1.2; }
.t-lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }

.panel{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:20px;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.panel-title{
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.panel-title .fi{ color:var(--red-2); }
.panel-body{ padding:20px; }

/* ===== Tables ===== */
.tbl-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
table.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:560px;
}
.tbl th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  position:sticky;
  top:0;
  white-space:nowrap;
}
.tbl td{
  padding:13px 14px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.tbl tbody tr{ transition:background .2s ease; }
.tbl tbody tr:hover{ background:rgba(225,29,46,.06); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr.row-in{ animation:rowIn 1.6s ease both; }
.tbl .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; }
.tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl td .btn{ margin:2px; }
.tbl .empty-cell{
  text-align:center;
  color:var(--muted);
  padding:32px;
}

/* ===== Timeline ===== */
.tl{ position:relative; padding-left:26px; }
.tl::before{
  content:"";
  position:absolute;
  left:5px;
  top:6px;
  bottom:6px;
  width:1px;
  background:linear-gradient(180deg,var(--red),rgba(225,29,46,.1));
}
.tl-item{ position:relative; padding:0 0 20px; }
.tl-dot{
  position:absolute;
  left:-26px;
  top:4px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-2));
  box-shadow:0 0 0 3px rgba(225,29,46,.2);
}
.tl-body{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 16px;
}
.tl-status{ font-size:14px; font-weight:600; }
.tl-note{ font-size:13px; color:var(--muted); margin-top:4px; }
.tl-time{ font-size:11px; color:#75757e; margin-top:6px; }

/* ===== Key / delivery card ===== */
.key-card{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-left:3px solid var(--red);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:12px;
}
.key-val{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
  word-break:break-all;
  user-select:all;
  background:rgba(0,0,0,.35);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  margin-top:8px;
}
.key-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.key-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}
.license{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:99px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  color:var(--muted);
}
.license.active{ background:rgba(28,190,110,.18); border-color:rgba(28,190,110,.45); color:#5fe3a4; }
.license.expired{ background:rgba(255,255,255,.05); color:#8a8a94; }
.license.revoked{ background:rgba(225,29,46,.2); border-color:rgba(225,29,46,.45); color:#ff8b95; }

/* ===== Chips / pager ===== */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  background:rgba(18,18,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:99px;
  padding:6px 12px;
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover{ border-color:rgba(225,29,46,.5); color:#fff; }
.chip.active{ background:linear-gradient(135deg,var(--red),var(--red-2)); color:#fff; border-color:transparent; }

.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:24px;
  flex-wrap:wrap;
}
.pg-btn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(18,18,20,.72);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.pg-btn:hover{ color:#fff; border-color:rgba(225,29,46,.5); }
.pg-btn.active{
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--glow);
}
.pg-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ===== Notifications ===== */
.notif-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  transition:background .2s ease;
}
.notif-item:last-child{ border-bottom:0; }
.notif-item.unread{
  border-left:3px solid var(--red);
  background:rgba(225,29,46,.07);
}
.n-ico{
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(225,29,46,.3),rgba(255,59,59,.12));
  border:1px solid rgba(225,29,46,.35);
  color:var(--red-2);
  font-size:16px;
  flex:none;
}
.n-body{ flex:1; min-width:0; }
.n-title{ font-size:14px; font-weight:600; }
.n-text{ font-size:13px; color:var(--muted); margin-top:2px; }
.n-time{ font-size:11px; color:#75757e; margin-top:5px; }

/* ===== Wallet ledger ===== */
.ledger{ display:flex; flex-direction:column; }
.ledger-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.ledger-row:last-child{ border-bottom:0; }
.l-delta{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;
  font-weight:600;
}
.l-delta.pos{ color:#3ddc97; }
.l-delta.neg{ color:var(--red-2); }
.l-reason{ font-size:13px; color:var(--muted); margin-top:2px; }
.l-date{ font-size:11px; color:#75757e; white-space:nowrap; }

/* ===== Referral ===== */
.ref-box{ display:flex; gap:8px; flex-wrap:wrap; }
.ref-box .input{
  flex:1;
  min-width:200px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.ref-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px;
  color:var(--red-2);
  font-weight:700;
  letter-spacing:.08em;
}

/* ===== Invoice / print ===== */
.invoice{
  max-width:800px;
  margin:0 auto;
  background:#fff;
  color:#111;
  padding:40px;
  border-radius:12px;
  font-size:14px;
}
.invoice h1,.invoice h2,.invoice h3{ color:#111; }
.invoice .inv-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-bottom:2px solid #e11d2e;
  padding-bottom:16px;
  margin-bottom:20px;
}
.invoice .inv-total{ font-size:20px; font-weight:800; color:#111; }
.invoice table{ width:100%; border-collapse:collapse; font-size:13px; margin:16px 0; }
.invoice th{
  text-align:left;
  padding:10px 8px;
  border-bottom:2px solid #ccc;
  font-size:11px;
  text-transform:uppercase;
  color:#555;
}
.invoice td{ padding:10px 8px; border-bottom:1px solid #eee; color:#111; }
.invoice .num{ text-align:right; font-variant-numeric:tabular-nums; }
.invoice .muted{ color:#555; }

/* ===== Page transitions ===== */
.page{ animation:pageIn .35s ease both; }
.fade-in{ animation:fadeIn .35s ease both; }
.rise-in{ animation:riseIn .45s ease both; }

/* ===== Keyframes ===== */
@keyframes spin{ to{ transform:rotate(360deg); } }

@keyframes shimmer{
  0%{ background-position:100% 50%; }
  100%{ background-position:0 50%; }
}

@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.45; transform:scale(.85); }
}

@keyframes pageIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

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

@keyframes riseIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes splashGlow{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(225,29,46,.45)); transform:scale(1); }
  50%{ filter:drop-shadow(0 0 26px rgba(255,59,59,.85)); transform:scale(1.04); }
}

@keyframes fillBar{
  from{ width:0; }
  to{ width:100%; }
}

@keyframes toastIn{
  from{ opacity:0; transform:translateX(40px); }
  to{ opacity:1; transform:translateX(0); }
}

@keyframes toastOut{
  from{ opacity:1; transform:translateX(0); }
  to{ opacity:0; transform:translateX(40px); }
}

@keyframes rowIn{
  0%{ background:rgba(225,29,46,.22); transform:translateY(-4px); }
  100%{ background:transparent; transform:translateY(0); }
}

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .product-page{ gap:24px; }
  .hero-card{ max-width:520px; }
}

@media (max-width:1000px){
  .product-page{ grid-template-columns:1fr; }
  .summary{ position:static; }
}

@media (max-width:900px){
  .main-nav{ display:none; }
  .cart-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .section{ padding:44px 0; }
}

@media (max-width:860px){
  /* Header-only: content search forms (e.g. /shop) keep the same class but
     must stay visible on mobile. */
  .site-header .header-search{ display:none; }
  .site-header .header-search.mobile-open{
    display:flex;
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 8px);
    max-width:none;
    z-index:520;
  }
  .site-header{ position:sticky; }
  .header-inner{ position:relative; flex-wrap:nowrap; }
  .user-chip .uc-name{ display:none; }
}

@media (max-width:640px){
  .container{ padding:0 16px; }
  .hero{ padding:48px 0 44px; }
  .hero-stats{ gap:18px; }
  .product-grid.list .product-card{ grid-template-columns:1fr; }
  .product-grid.list .p-media{ aspect-ratio:16/9; min-height:0; }
  .product-grid.list .p-foot{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    border-left:0;
    border-top:1px solid var(--border);
    padding:14px 18px;
  }
  .cart-line{ gap:12px; }
  .cl-price{ min-width:0; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; padding:36px 0; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .steps{ gap:4px; }
  .step{ font-size:11px; }
  .dash-side{
    position:static;
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:8px;
    scrollbar-width:none;
  }
  .dash-side::-webkit-scrollbar{ display:none; }
  .dash-sect-title{ display:none; }
  .dash-link{ white-space:nowrap; flex:none; }
  .rating-summary{ gap:16px; }
  .modal-foot{ flex-direction:column-reverse; }
  .modal-foot .btn{ width:100%; }
}

@media (max-width:460px){
  .brand-name{ font-size:16px; }
  .hero h1{ font-size:clamp(2rem,9vw,2.6rem); }
  .btn{ padding:11px 16px; font-size:13px; }
  .btn-lg{ padding:13px 20px; font-size:15px; }
  .stat-card{ padding:16px; }
  .st-val{ font-size:22px; }
  .cl-img{ width:56px; height:56px; }
  .qty input{ width:40px; }
  .invoice{ padding:22px; }
  .rating-big{ font-size:38px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .splash{ transition:none; }
  .skeleton{ animation:none; background-size:100% 100%; }
}

/* ===== Print / invoice ===== */
@media print{
  body{ background:#fff !important; color:#000; }
  body *{ visibility:hidden; }
  .invoice,
  .invoice *{ visibility:visible; }
  .invoice{
    position:absolute;
    inset:0;
    margin:0;
    width:100%;
    max-width:none;
    border-radius:0;
    background:#fff;
    color:#111;
  }
  .no-print{ display:none !important; }
}