/*
 * Kuzi Client — custom theme layer
 * Matches kuziclient.com: monochrome dark, Archivo display, Inter body,
 * white pill buttons, #0a0a0b / #151517 / #2a2a2e palette.
 * This file will not be overwritten by theme updates.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&display=swap');

:root {
  --kz-ink: #f4f4f5;
  --kz-off: #0a0a0b;
  --kz-card: #151517;
  --kz-line: #2a2a2e;
  --kz-line-hover: #3f3f46;
  --kz-gray: #a1a1aa;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: 'Archivo', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

button {
  font-family: 'Archivo', 'Inter', sans-serif;
}

/* Header stats numbers (Sales / Buyers / Rating) */
header .grid.grid-cols-3 p:first-child {
  font-family: 'Archivo', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* Product page price */
[x-data='productForm'] .text-3xl {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Customer dashboard stat numbers (Total Spent, Balance, ...) */
.bg-card p.text-2xl {
  font-family: 'Archivo', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* Section headings: drop the accent left bar, plain bold display type */
section.component h2.border-l-4 {
  border-left-width: 0;
  padding-left: 0;
  font-size: 1.625rem;
}

/* ---------- Background depth ---------- */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(60rem 40rem at 50% -10%, rgba(244, 244, 245, 0.05), transparent 60%);
}

::selection {
  background: var(--kz-ink);
  color: var(--kz-off);
}

html {
  scrollbar-color: var(--kz-line) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--kz-line);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--kz-line-hover);
}

/* ---------- Borders: hairlines -> visible #2a2a2e lines ---------- */

.border-white\/5,
.border-y-white\/5,
.border-t-white\/5,
.border-b-white\/5,
.border-white\/10 {
  border-color: var(--kz-line);
}

/* Tailwind !important variant on the active category filter link */
.\!border-white\/5 {
  border-color: var(--kz-line) !important;
}

.hover\:border-white\/10:hover {
  border-color: var(--kz-line-hover);
}

/* ---------- Radii: kuziclient rounding scale ---------- */

.rounded-lg { border-radius: 16px; }
.rounded-md { border-radius: 10px; }
.rounded-xl { border-radius: 20px; }

.rounded-l-md {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.rounded-r-md {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.rounded-t-lg {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.rounded-b-lg {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Images nested inside padded cards: tighter inner radius */
a.bg-card img,
header .bg-card img,
[x-data="cartPage"] .bg-card img.aspect-product-card-image {
  border-radius: 10px;
}

/* ---------- Buttons: white pills, Archivo, calm hovers ---------- */

button.bg-accent-500,
button.border-accent-500,
button.bg-red-500,
button.border-red-500,
button.border-white\/5,
form button[type="submit"],
[role="dialog"] button[type="submit"],
a.bg-accent-500,
a.bg-background.border-background,
.component a.border-accent-500,
.component a.bg-white\/\[0\.025\].border-white\/5.px-6,
.min-w-24 {
  border-radius: 9999px;
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 600;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

/* Kill the washed-out 50%-opacity hover; dim slightly and lift instead */
button.bg-accent-500:hover:enabled,
[role="dialog"] button[type="submit"]:hover:enabled {
  background-color: rgba(244, 244, 245, 0.85) !important;
  transform: translateY(-1px);
}

/* CMS buttons hover sets white text on a white button — keep ink text */
a.bg-accent-500:hover {
  color: var(--kz-card);
  background-color: rgba(244, 244, 245, 0.85);
}

/* ---------- Contrast fixes (white-on-white with a white accent) ---------- */

/* Pagination active page uses text-t-primary on accent bg */
nav[aria-label="Pagination Navigation"] [aria-current="page"] {
  color: var(--kz-card);
}

/* Cart count badge uses text-t-primary on accent bg */
header nav a[href$="/cart"] span.rounded-full {
  color: var(--kz-card);
}

/* Quantity +/- buttons hover to accent bg with inherited white glyphs */
div:has(> input[name='quantity']) > button:hover,
[x-data="cartPage"] .max-w-32 button:hover {
  color: var(--kz-card);
}

/* Choices.js highlighted option: accent bg + primary text = white on white */
.choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  color: var(--kz-card);
}

/* ---------- Header & nav ---------- */

header nav a.rounded-lg,
header nav button.rounded-lg {
  border-radius: 9999px;
}

header nav a,
header nav button,
header nav a.bg-card {
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

header nav a:hover,
header nav button:hover {
  border-color: var(--kz-line-hover);
}

/* Nav links carry bg-card — keep the product-card hover lift off them */
header nav a.bg-card:hover {
  transform: none;
  box-shadow: none;
}

/* ---------- Announcement bar: white pill ---------- */

.announcement > div {
  border-radius: 9999px;
}

.announcement p {
  font-weight: 600;
}

/* ---------- Cards: hover lift on interactive cards ---------- */

a.bg-card {
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

a.bg-card:hover {
  border-color: var(--kz-line-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
}

/* ---------- Badges: pills ---------- */

.badges > div,
.badges > a {
  border-radius: 9999px;
}

/* ---------- Inputs & modals ---------- */

[role="dialog"] input,
[role="dialog"] textarea {
  border-radius: 10px;
}

input[name^="filters"] {
  border-radius: 10px;
}

/* Choices.js selects have the old radius baked in via @apply — rescale */
.choices,
.choices .choices__inner {
  border-radius: 10px;
}

.choices.is-open,
.choices.is-open .choices__inner {
  border-radius: 10px 10px 0 0;
}

.choices .choices__list--dropdown {
  border-radius: 0 0 10px 10px;
}

/* Cart addon chips use plain rounded (4px) — match the pill badges */
[x-data="cartPage"] .rounded.border-white\/5 {
  border-radius: 9999px;
}