:root {
  color-scheme: light;
  --background: #fcfcfd;
  --foreground: #181920;
  --card: #ffffff;
  --card-foreground: #181920;
  --popover: #ffffff;
  --popover-foreground: #181920;
  --primary: #1e2538;
  --primary-foreground: #fcfcfd;
  --secondary: #f4f5f8;
  --secondary-foreground: #1f2330;
  --muted: #f3f4f7;
  --muted-foreground: #6c7287;
  --accent: #f4f5f8;
  --accent-foreground: #181920;
  --destructive: #ef4444;
  --border: #e6e8ec;
  --input: #e6e8ec;
  --ring: #94a3b8;
  --radius: 0.625rem;
}

html.dark, body.dark {
  color-scheme: dark;
  --background: #0f1117;
  --foreground: #f8fafc;
  --card: #181b24;
  --card-foreground: #f8fafc;
  --popover: #181b24;
  --popover-foreground: #f8fafc;
  --primary: #f1f5f9;
  --primary-foreground: #0f172a;
  --secondary: #1e2230;
  --secondary-foreground: #f8fafc;
  --muted: #1a1e2b;
  --muted-foreground: #94a3b8;
  --accent: #1e2230;
  --accent-foreground: #f8fafc;
  --destructive: #ef4444;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.15);
  --ring: #64748b;
}

@supports (color: oklch(0 0 0)) {
  :root {
    --background: oklch(0.99 0.004 260);
    --foreground: oklch(0.19 0.025 255);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.32 0.12 255);
    --primary-foreground: oklch(0.99 0.004 260);
    --secondary: oklch(0.97 0.008 255);
    --secondary-foreground: oklch(0.22 0.03 255);
    --muted: oklch(0.965 0.008 255);
    --muted-foreground: oklch(0.5 0.03 255);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
  }

  html.dark, body.dark {
    --background: oklch(0.145 0.015 255);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  transition: background-color 0.2s ease, color 0.2s ease;
  min-height: 100vh;
}

/* Base custom classes to match theme variables */
.bg-background { background-color: var(--background) !important; }
.text-foreground { color: var(--foreground) !important; }
.bg-card { background-color: var(--card) !important; }
.text-card-foreground { color: var(--card-foreground) !important; }
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.text-primary-foreground { color: var(--primary-foreground) !important; }
.bg-muted { background-color: var(--muted) !important; }
.text-muted-foreground { color: var(--muted-foreground) !important; }
.border-border { border-color: var(--border) !important; }
.border-input { border-color: var(--input) !important; }
.bg-muted\/50 { background-color: color-mix(in srgb, var(--muted) 50%, transparent) !important; }
.border-primary\/5 { border-color: color-mix(in srgb, var(--primary) 5%, transparent) !important; }

/* Product card hover effect */
.product-card-hover {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card-hover:hover {
  box-shadow: 0 12px 30px -15px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
html.dark .product-card-hover:hover {
  box-shadow: 0 12px 30px -15px rgba(255, 255, 255, 0.1);
}

/* Category filter animation */
.category-tab-btn {
  transition: all 0.2s ease;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* WooCommerce AJAX "View Cart" (Просмотр корзины) link positioning, wrapping & 5s auto-fadeout */
@keyframes fadeOutViewCart {
  0% {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(0);
    max-height: 40px;
  }
  80% {
    opacity: 1;
    transform: translateY(0);
    max-height: 40px;
  }
  100% {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
    margin-top: 0 !important;
    padding: 0 !important;
    visibility: hidden;
    pointer-events: none;
  }
}

a.added_to_cart.wc-forward,
.woocommerce a.added_to_cart,
a.added_to_cart {
  display: block !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  order: 99 !important;
  text-align: right !important;
  margin-top: 0.5rem !important;
  font-family: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  overflow: hidden !important;
  animation: fadeOutViewCart 5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  transition: color 0.15s ease !important;
}

a.added_to_cart.wc-forward:hover,
.woocommerce a.added_to_cart:hover,
a.added_to_cart:hover {
  color: var(--foreground) !important;
}

/* WooCommerce loading state for add to cart button */
.add_to_cart_button.loading {
  opacity: 0.75 !important;
  position: relative !important;
}

/* Custom Table Styles for Single Product Preview */
.data-preview-table {
  width: 100%;
  min-width: 2500px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}
.data-preview-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  font-family: monospace;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  background-color: var(--muted);
  white-space: nowrap;
}
.data-preview-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  vertical-align: middle;
  line-height: 1.45;
  white-space: nowrap;
}
.data-preview-table tr:hover td {
  background-color: rgba(0, 0, 0, 0.015);
}
.dark .data-preview-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.02);
}
.data-preview-table tr:last-child td {
  border-bottom: none;
}

/* Horizontal Scroll Container for 17 columns preview */
.preview-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 rgba(0, 0, 0, 0.05);
}
.preview-table-scroll::-webkit-scrollbar {
  height: 9px;
}
.preview-table-scroll::-webkit-scrollbar-track {
  background: var(--muted, #f3f4f7);
  border-radius: 4px;
}
.preview-table-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
  border: 2px solid var(--muted, #f3f4f7);
}
.preview-table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--primary, #1e2538);
}
.dark .preview-table-scroll::-webkit-scrollbar-track {
  background: #1a1e2b;
}
.dark .preview-table-scroll::-webkit-scrollbar-thumb {
  background: #334155;
  border-color: #1a1e2b;
}
.dark .preview-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Blurred tail for data preview protection */
.data-preview-blur {
  filter: blur(2.5px);
  -webkit-filter: blur(2.5px);
  opacity: 0.45;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  display: inline-block;
  letter-spacing: -0.02em;
}

/* WooCommerce Checkout & Form Styles */
.woocommerce form .form-row {
  margin-bottom: 1.125rem;
}
.woocommerce form .form-row label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.35rem;
}
.woocommerce form .form-row label .required {
  color: var(--destructive);
  text-decoration: none;
  margin-left: 0.2rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background-color: var(--background);
  color: var(--foreground);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

/* Payment Methods & Gateways in Checkout */
.woocommerce #payment {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.woocommerce #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce #payment div.payment_box {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin: 0.5rem 0 0 0;
  position: static !important;
}
.woocommerce #payment div.payment_box::before {
  display: none !important;
}
.woocommerce #payment #place_order {
  width: 100%;
  border-radius: var(--radius);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  transition: opacity 0.15s ease;
}
.woocommerce #payment #place_order:hover {
  opacity: 0.9;
}

/* WooCommerce Notices (Errors, Success, Info) */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  display: none !important; /* Remove ancient WooCommerce icon pseudo-elements */
}
.woocommerce-error {
  background-color: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
}
.woocommerce-message {
  background-color: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #16a34a;
}
.dark .woocommerce-message {
  color: #4ade80;
}
.woocommerce-info {
  background-color: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  list-style: none;
}
.woocommerce-message .button,
.woocommerce-info .button {
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Clean WooCommerce Table Styling */
table.woocommerce-table--order-details,
table.woocommerce-MyAccount-orders,
table.woocommerce-MyAccount-downloads,
table.shop_table {
  width: 100%;
  border-collapse: collapse;
}

/* Remove default ugly WooCommerce empty cart icon/notices when custom template is used */
.cart-empty.woocommerce-info {
  display: none !important;
}
p.return-to-shop {
  display: none !important;
}