/* TT Electro Store — Custom Styles */

/* ── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Line clamp ──────────────────────────────────────────── */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Product card ────────────────────────────────────────── */
.product-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.product-card:hover { transform: translateY(-3px); }

/* ── Section label ───────────────────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: .5rem;
}
.dark .section-label { color: #60a5fa; }

/* ── Flash sale countdown ────────────────────────────────── */
.countdown-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  color: #ef4444;
}

/* ── Skeleton loading ────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 0.375rem;
}
.dark .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Image gallery ───────────────────────────────────────── */
.gallery-img { transition: transform 0.3s ease; cursor: zoom-in; }
.gallery-img:hover { transform: scale(1.04); }

/* ── Gradient text ───────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Focus rings ─────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* ── Button press ────────────────────────────────────────── */
button:active:not(:disabled) { transform: scale(0.97); }
a[role="button"]:active { transform: scale(0.97); }

/* ── Stars ───────────────────────────────────────────────── */
.star-filled { color: #f59e0b; }
.star-empty  { color: #e2e8f0; }
.dark .star-empty { color: #1e293b; }

/* ── Progress bar ────────────────────────────────────────── */
.progress-bar {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2563EB, #06B6D4);
  transition: width 0.4s ease;
}

/* ── Aspect ratios ───────────────────────────────────────── */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }

/* ── Responsive table ────────────────────────────────────── */
@media (max-width: 640px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Transitions ─────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Section card (light/dark) ───────────────────────────── */
.section-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
}
.dark .section-card {
  background: hsl(222,47%,10%);
  border-color: rgba(255,255,255,.06);
}

/* ── Chip / badge ────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .65rem; border-radius: 9999px;
  font-size: .72rem; font-weight: 600;
}
.chip-blue   { background: rgba(37,99,235,.1); color: #2563eb; border: 1px solid rgba(37,99,235,.15); }
.chip-green  { background: rgba(34,197,94,.1); color: #16a34a; border: 1px solid rgba(34,197,94,.15); }
.chip-red    { background: rgba(239,68,68,.1); color: #dc2626; border: 1px solid rgba(239,68,68,.15); }
.chip-amber  { background: rgba(245,158,11,.1); color: #d97706; border: 1px solid rgba(245,158,11,.15); }
.dark .chip-blue   { color: #60a5fa; }
.dark .chip-green  { color: #4ade80; }
.dark .chip-red    { color: #f87171; }
.dark .chip-amber  { color: #fbbf24; }

/* ── Trust badge strip ───────────────────────────────────── */
.trust-strip {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.dark .trust-strip {
  background: hsl(222,47%,7%);
  border-color: rgba(255,255,255,.07);
}

/* ── Page transitions ────────────────────────────────────── */
.page-enter { animation: fadeUp .4s cubic-bezier(.16,1,.3,1); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Hero gradient overlay ───────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg,
    hsl(222,60%,8%) 0%,
    hsl(222,50%,12%) 50%,
    hsl(200,60%,10%) 100%);
}