/* GARHY TECH / GT Marketplace — canonical visual identity override.
   Loaded after the application stylesheet so the full storefront shares the
   approved silver-white / electric-blue system with restrained Hana AI pink. */

:root {
  --background: oklch(0.985 0.007 250);
  --foreground: oklch(0.22 0.035 258);
  --card: oklch(0.997 0.002 250);
  --card-foreground: oklch(0.22 0.035 258);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.035 258);
  --primary: oklch(0.55 0.205 257);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.965 0.016 250);
  --secondary-foreground: oklch(0.25 0.04 258);
  --muted: oklch(0.962 0.012 250);
  --muted-foreground: oklch(0.5 0.03 258);
  --accent: oklch(0.95 0.035 248);
  --accent-foreground: oklch(0.26 0.06 258);
  --destructive: oklch(0.58 0.22 25);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.91 0.018 250);
  --input: oklch(0.91 0.018 250);
  --ring: oklch(0.55 0.205 257);

  --brand: #0b57b7;
  --brand-foreground: oklch(0.99 0 0);
  --brand-soft: oklch(0.955 0.035 250);
  --luxury-purple: oklch(0.56 0.19 292);
  --luxury-purple-foreground: oklch(0.99 0 0);
  --luxury-purple-soft: oklch(0.96 0.03 292);
  --cyan-accent: oklch(0.66 0.145 226);
  --conversion: #b51f74;
  --conversion-foreground: oklch(0.99 0 0);
  --conversion-soft: oklch(0.965 0.035 350);
  /* Existing components historically call this token “gold”. Keep the API but
     map it to GARHY electric blue so legacy surfaces no longer reintroduce gold. */
  --gold: oklch(0.55 0.205 257);
  --gold-foreground: oklch(0.99 0 0);
  --hairline: oklch(0.91 0.018 250);
  --surface: oklch(0.972 0.014 250);
  --surface-elevated: oklch(1 0 0);
}

.dark {
  --background: oklch(0.17 0.035 260);
  --foreground: oklch(0.97 0.008 250);
  --card: oklch(0.205 0.038 260);
  --card-foreground: oklch(0.97 0.008 250);
  --popover: oklch(0.205 0.038 260);
  --popover-foreground: oklch(0.97 0.008 250);
  --primary: oklch(0.7 0.17 252);
  --primary-foreground: oklch(0.16 0.04 260);
  --secondary: oklch(0.25 0.04 260);
  --secondary-foreground: oklch(0.97 0.008 250);
  --muted: oklch(0.25 0.035 260);
  --muted-foreground: oklch(0.73 0.025 252);
  --accent: oklch(0.29 0.07 270);
  --accent-foreground: oklch(0.97 0.008 250);
  --destructive: oklch(0.58 0.2 25);
  --destructive-foreground: oklch(0.98 0.006 250);
  --border: oklch(1 0 0 / 11%);
  --input: oklch(1 0 0 / 13%);
  --ring: oklch(0.7 0.17 252);

  --brand: oklch(0.7 0.17 252);
  --brand-foreground: oklch(0.16 0.04 260);
  --brand-soft: oklch(0.29 0.075 264);
  --luxury-purple: oklch(0.7 0.16 292);
  --luxury-purple-foreground: oklch(0.16 0.04 260);
  --luxury-purple-soft: oklch(0.3 0.08 292);
  --cyan-accent: oklch(0.74 0.14 226);
  --conversion: oklch(0.73 0.18 350);
  --conversion-foreground: oklch(0.16 0.035 350);
  --conversion-soft: oklch(0.3 0.075 350);
  --gold: oklch(0.7 0.17 252);
  --gold-foreground: oklch(0.16 0.04 260);
  --hairline: oklch(1 0 0 / 9%);
  --surface: oklch(0.19 0.035 260);
  --surface-elevated: oklch(0.225 0.04 260);
}

::selection {
  background: color-mix(in oklab, var(--brand) 28%, transparent);
  color: var(--foreground);
}

/* Keep the global search contract stable regardless of the shared radius token. */
[data-global-smart-search-trigger] {
  border-radius: 16px !important;
}

.gt-metallic-ring {
  position: relative;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand) 24%, white);
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.98), rgba(241, 246, 252, 0.88) 48%, rgba(219, 229, 241, 0.84) 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.66),
    0 8px 24px -16px color-mix(in oklab, var(--brand) 60%, transparent),
    0 0 0 1px color-mix(in oklab, var(--brand) 8%, transparent);
}

.gt-metallic-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid color-mix(in oklab, var(--brand) 15%, transparent);
}

/* Mobile guest account text must keep WCAG AA contrast on the light cards. */
[data-reference-account-guest] .text-neutral-500 {
  color: #404040;
}

[data-reference-account-guest] .text-neutral-400 {
  color: #525252;
}

/* Small GARHY labels on the mobile home must remain WCAG AA compliant. */
[data-reference-mobile-home] .text-neutral-400 {
  color: #525252;
}

@keyframes gt-product-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.gt-product-ticker-track {
  animation: gt-product-ticker 18s linear infinite;
  will-change: transform;
}

html[dir="rtl"] .gt-product-ticker-track {
  animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
  .gt-product-ticker-track {
    animation: none;
    transform: none;
  }
}

#gt-bot-storefront-dialog header > div > span:first-child {
  border-color: rgba(23, 105, 224, 0.18);
  background: radial-gradient(circle at 36% 28%, #ffffff 0%, #fff7fb 58%, #eef5ff 100%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.96),
    0 0 0 3px rgba(23, 105, 224, 0.09);
}

/* Hana AI — integrated mobile navigation focal action. */
@keyframes gt-hana-nav-glow {
  0%, 100% {
    filter: drop-shadow(0 5px 10px rgba(74, 37, 126, 0.18));
  }
  50% {
    filter: drop-shadow(0 7px 14px rgba(209, 63, 133, 0.32));
  }
}

[data-hana-nav-trigger] {
  -webkit-tap-highlight-color: transparent;
}

[data-hana-nav-portrait] {
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgba(23, 105, 224, 0.18);
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.98), rgba(245, 240, 255, 0.96) 62%, rgba(226, 235, 249, 0.95));
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.98),
    0 0 0 5px rgba(23, 105, 224, 0.10),
    0 0 0 7px rgba(209, 63, 133, 0.055),
    0 12px 22px -13px rgba(91, 44, 131, 0.72);
  animation: gt-hana-nav-glow 3.4s ease-in-out infinite;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

[data-hana-nav-portrait]::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from 205deg,
    rgba(23, 105, 224, 0.42),
    rgba(209, 63, 133, 0.56),
    rgba(122, 72, 183, 0.46),
    rgba(23, 105, 224, 0.42)
  );
  opacity: 0.22;
  filter: blur(5px);
}

[data-hana-nav-trigger]:active [data-hana-nav-portrait] {
  transform: translateY(1px) scale(0.95);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.98),
    0 0 0 5px rgba(23, 105, 224, 0.14),
    0 8px 18px -12px rgba(91, 44, 131, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  [data-hana-nav-portrait] {
    animation: none;
    transition: none;
  }
}

/* Storefront gesture contract: a vertical page scroll must start from literally
   any horizontal rail/card surface. Horizontal swiping remains available. */
.touch-pan-x,
.gt-continuous-viewport,
[data-reference-commerce-rail-track],
[data-product-scroll-rail],
[data-page-scroll-safe] {
  touch-action: pan-x pan-y pinch-zoom !important;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

[data-gt-premium-discovery],
[data-merchandising-rails],
[data-reference-mobile-home] {
  min-width: 0;
}

[data-gt-premium-discovery] h2,
[data-merchandising-rails] h2,
[data-reference-mobile-home] h2 {
  text-wrap: balance;
}

@media (max-width: 359px) {
  [data-gt-premium-discovery] h2,
  [data-merchandising-rails] h2 {
    font-size: 0.9375rem;
  }
}