/* Product routes use the same black and gold palette as the home page. */
:root {
  --grix-page-bg: #f5f5f3;
  --grix-surface: #fff;
  --grix-soft-bg: #efefec;
  --grix-text: #111;
  --grix-muted-text: #6b6b6b;
  --grix-border: rgba(17, 17, 17, .12);
  --grix-dark-bg: #060606;
  --grix-accent: #f1c84b;
  --grix-accent-deep: #ddb12d;
}

body {
  background: linear-gradient(180deg, #f7f7f5 0%, #f1f1ee 100%);
  color: var(--grix-text);
}

/* Keep every product card, image, button and navigation control square. */
body *,
body *::before,
body *::after {
  border-radius: 0 !important;
}

body > .bg-slate-50,
main .bg-slate-50,
main .bg-slate-100 {
  background: var(--grix-soft-bg);
}

header,
.site-header {
  background: #050505;
  border-color: rgba(241, 200, 75, .14);
}

footer,
.site-footer {
  background: linear-gradient(180deg, #080808 0%, #050505 100%);
  border-color: rgba(241, 200, 75, .12);
}

header a,
header p,
header nav,
header [class*="text-white"],
header .text-slate-200,
header .text-slate-400 {
  color: rgba(255, 255, 255, .82);
}

header a:hover,
footer a:hover,
.site-nav a:hover,
.site-footer a:hover {
  color: var(--grix-accent);
}

header a.bg-white,
.language-switch a[aria-current] {
  background: #111;
  color: var(--grix-accent);
}

header [class*="border-white/"] {
  border-color: rgba(241, 200, 75, .18);
}

header [class*="bg-white/"] {
  background: rgba(255, 255, 255, .04);
}

footer p,
footer a,
footer .text-slate-400,
footer .text-slate-500 {
  color: rgba(255, 255, 255, .72);
}

footer h3,
footer .text-white,
footer strong {
  color: #fff;
}

footer .text-cyan-300 {
  color: var(--grix-accent);
}

main h1,
main h2,
main h3,
main .text-slate-950 {
  color: var(--grix-text);
}

main p,
main .section-copy,
.lead,
.product-copy {
  color: var(--grix-muted-text);
}

main section.bg-slate-950 {
  background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
}

main section.bg-slate-950 h1,
main section.bg-slate-950 h2,
main section.bg-slate-950 h3 {
  color: var(--grix-accent);
}

main section.bg-slate-950 p,
.category-back-link {
  color: rgba(255, 255, 255, .74);
}

main .section-tag {
  background: #111;
  border: 1px solid #111;
  color: var(--grix-accent);
  box-shadow: none;
}

main section.bg-slate-950 .section-tag {
  background: var(--grix-accent);
  border-color: var(--grix-accent);
  color: #111;
}

main .panel,
main .bg-white,
main #grix-category-products article {
  background: var(--grix-surface);
  border-color: var(--grix-border);
}

main .panel {
  box-shadow: 0 18px 48px rgba(15, 23, 42, .06);
}

.product-category-tile img,
.product-hero,
.gallery img {
  background: var(--grix-surface);
  border-color: var(--grix-border);
}

.product-category-tile span,
.eyebrow,
main .text-cyan-700 {
  color: #876600;
}

main a.bg-slate-950,
main a.bg-slate-800 {
  background: #111;
  border: 1px solid #111;
  color: var(--grix-accent);
}

main a.bg-slate-950:hover,
main a.bg-slate-800:hover {
  background: #1a1a1a;
  color: #f6d876;
}

.category-switcher a {
  background: var(--grix-surface);
  border-color: var(--grix-border);
  color: var(--grix-text);
}

.category-switcher a:hover,
.category-switcher a:focus-visible,
.category-switcher a[aria-current="page"] {
  background: #111;
  border-color: #111;
  color: var(--grix-accent);
}

header a.bg-cyan-400,
header a.bg-cyan-500,
.quote-link {
  background: var(--grix-accent);
  border: 1px solid var(--grix-accent);
  color: #111;
}

header a.bg-cyan-400:hover,
header a.bg-cyan-500:hover,
.quote-link:hover {
  background: var(--grix-accent-deep);
  border-color: var(--grix-accent-deep);
  color: #111;
}

.breadcrumbs,
.breadcrumbs a,
.related-links a {
  color: var(--grix-muted-text);
}

.category-back-link:hover,
.product-category-tile:focus-visible span,
.product-category-tile:hover span {
  color: var(--grix-accent-deep);
}

.breadcrumbs a:hover,
.related-links a:hover {
  color: var(--grix-text);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--grix-accent-deep);
  outline-offset: 4px;
}