/**
 * @author Telegram @okgeceo
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

html.dark { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface);
  color: var(--foreground);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  transition: background-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}

::selection {
  background: color-mix(in oklch, var(--primary) 18%, transparent);
  color: var(--foreground);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; }
p { margin: 0 0 var(--space-3); }

.ok-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
  box-sizing: border-box;
}

.ok-main:has(> .ok-rolling-notice) {
  padding-top: 0;
}

.ok-main:has(> .ok-rolling-notice) > .ok-container {
  padding-top: var(--space-6);
}

@media (max-width: 767px) {
  .ok-main:has(> .ok-rolling-notice) > .ok-container {
    padding-top: var(--space-4);
  }
}

.ok-main {
  padding: var(--space-6) 0 var(--space-10);
  width: 100%;
  min-width: 0;
}

.ok-page-header { margin-bottom: var(--space-8); }
.ok-page-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
  line-height: 1.15;
}

.ok-page-content {
  animation: ok-slide-in-from-bottom var(--duration-enter) var(--ease-snappy) both;
}

.ok-text-muted { color: var(--muted-foreground); }
.ok-text-sm { font-size: var(--text-sm); }
.ok-tabular { font-variant-numeric: tabular-nums; }

.ok-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.ok-grid { display: grid; gap: var(--space-4); }
.ok-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ok-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ok-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  .ok-grid--products { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .ok-hide-mobile { display: none !important; }
  .ok-page-title { font-size: var(--text-2xl); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ok-grid--products { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .ok-grid--products { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}

.ok-flex { display: flex; }
.ok-flex-between { display: flex; justify-content: space-between; align-items: center; }
.ok-flex-center { display: flex; align-items: center; justify-content: center; }
.ok-gap-2 { gap: var(--space-2); }
.ok-gap-4 { gap: var(--space-4); }

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

@keyframes ok-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ok-slide-in-from-bottom {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ok-slide-in-from-top {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ok-popover-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ok-popover-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

@keyframes ok-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.ok-animate-in {
  animation: ok-fade-in var(--duration-enter) var(--ease-out) both;
}

.ok-animate-in-up {
  animation: ok-slide-in-from-bottom var(--duration-enter) var(--ease-snappy) both;
}

.ok-animate-scale {
  animation: ok-scale-in var(--duration-slow) var(--ease-spring) both;
}

.ok-stagger-1 { animation-delay: calc(var(--stagger-step) * 1); }
.ok-stagger-2 { animation-delay: calc(var(--stagger-step) * 2); }
.ok-stagger-3 { animation-delay: calc(var(--stagger-step) * 3); }
.ok-stagger-4 { animation-delay: calc(var(--stagger-step) * 4); }
.ok-stagger-5 { animation-delay: calc(var(--stagger-step) * 5); }
.ok-stagger-6 { animation-delay: calc(var(--stagger-step) * 6); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}