/*
 * mercy.pub — black + purple presentation layer
 * Keep the storefront calm and readable: no glow, gradients, blur, or shadows.
 */

:root {
  color-scheme: dark;
}

html,
body {
  min-width: 320px;
  background-color: rgb(var(--cl-background)) !important;
  background-image: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

body::before,
body::after {
  display: none !important;
  content: none !important;
}

#app {
  isolation: isolate;
}

[x-cloak] {
  display: none !important;
}

/* ScrollReveal is optional. Never hide the shop if its CDN is unavailable. */
[data-dsr] {
  visibility: visible !important;
}

::selection {
  color: rgb(var(--cl-t-primary));
  background-color: rgba(var(--cl-accent), 0.35);
}

/* Remove every decorative effect from the previous version. */
*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[class*="bg-gradient"] {
  background-image: none !important;
}

[aria-hidden="true"][class*="blur-"] {
  display: none !important;
}

.pulsating,
.heart-particle,
#snow,
[class*="animate-pulse"] {
  display: none !important;
  animation: none !important;
}

/* Accent text and SVGs must stay solid purple instead of becoming transparent. */
.text-accent-100,
.text-accent-200,
.text-accent-300,
.text-accent-400,
.text-accent-500,
.text-accent-600,
.text-accent-700,
h1 span.text-accent-500,
h2 span.text-accent-500,
.text-accent-500 svg,
.text-accent-400 svg,
svg.text-accent-500,
svg.text-accent-400 {
  color: rgb(var(--cl-accent)) !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}

svg {
  flex-shrink: 0;
}

/* Use the same purple accent for status and validation badges rather than
   introducing unrelated green, red, blue, yellow, or orange colors. */
[class*="text-green-"],
[class*="text-red-"],
[class*="text-blue-"],
[class*="text-yellow-"],
[class*="text-orange-"],
[class*="text-pink-"],
[class*="text-indigo-"],
[class*="text-gray-"] {
  color: rgb(var(--cl-accent)) !important;
}

[class*="bg-green-"],
[class*="bg-red-"],
[class*="bg-blue-"],
[class*="bg-yellow-"],
[class*="bg-orange-"],
[class*="bg-pink-"],
[class*="bg-indigo-"] {
  background-color: rgba(var(--cl-accent), 0.12) !important;
  background-image: none !important;
}

[class*="border-green-"],
[class*="border-red-"],
[class*="border-blue-"],
[class*="border-yellow-"],
[class*="border-orange-"],
[class*="border-pink-"],
[class*="border-indigo-"] {
  border-color: rgba(var(--cl-accent), 0.35) !important;
}

/* Replace translucent white surfaces with subtle purple-on-black surfaces. */
[class*="bg-white/"] {
  background-color: rgba(var(--cl-accent), 0.07) !important;
  background-image: none !important;
}

[class*="border-white/"] {
  border-color: rgba(var(--cl-accent), 0.22) !important;
}

.badges [style*="background-color"] {
  background-color: rgb(var(--cl-accent)) !important;
  color: rgb(var(--cl-t-accent)) !important;
}

/* Solid, quiet layout surfaces. */
nav[data-component-id="navbar"] > div > div,
footer > div {
  background-color: rgb(var(--cl-background)) !important;
  background-image: none !important;
  border-color: rgba(var(--cl-accent), 0.22) !important;
}

nav[data-component-id="navbar"] img {
  height: 2.5rem;
  max-height: 2.5rem;
  max-width: 12rem;
  width: auto;
  object-fit: contain;
  opacity: 1 !important;
  visibility: visible !important;
}

.component {
  scroll-margin-top: 6rem;
}

.component:not(#hero)::before {
  display: none !important;
}

.component > .container > [class*="rounded"],
.component > .container > div[class*="border"] {
  border-color: rgba(var(--cl-accent), 0.22) !important;
  background-color: rgba(var(--cl-accent), 0.035) !important;
  background-image: none !important;
}

/* Calm product cards with a plain black surface and purple interaction state. */
section[data-component-id="products"] [x-init*="auto-animate"] > div > a.group,
.product,
.product-page .product {
  border-color: rgba(var(--cl-accent), 0.22) !important;
  background-color: #000 !important;
  background-image: none !important;
  transform: none !important;
}

section[data-component-id="products"] [x-init*="auto-animate"] > div > a.group:hover,
.product:hover,
.product-page .product:hover {
  border-color: rgb(var(--cl-accent)) !important;
  background-color: rgba(var(--cl-accent), 0.08) !important;
  transform: none !important;
}

section[data-component-id="products"] [x-init*="auto-animate"] > div > a.group::before,
section[data-component-id="products"] [x-init*="auto-animate"] > div > a.group::after {
  display: none !important;
}

section[data-component-id="products"] a.group > div:first-child {
  background-color: #000 !important;
  background-image: none !important;
}

section[data-component-id="products"] a.group > div:first-child::after {
  display: none !important;
}

section[data-component-id="products"] a.group:hover h3 {
  color: rgb(var(--cl-accent)) !important;
  transform: none !important;
}

/* Keep controls purple/black without animated hover shine. */
button:not(:disabled):hover,
a[class*="bg-accent"]:hover,
a[class*="border-2"]:hover {
  transform: none !important;
}

button,
a,
input,
select,
textarea {
  transition-property: color, background-color, border-color, opacity !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgb(var(--cl-accent));
  outline-offset: 2px;
}

input,
select,
textarea {
  border-color: rgba(var(--cl-accent), 0.22) !important;
  background-color: #000 !important;
  color: rgb(var(--cl-t-primary)) !important;
  -webkit-text-fill-color: rgb(var(--cl-t-primary)) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgb(var(--cl-accent)) !important;
  background-color: rgba(var(--cl-accent), 0.07) !important;
}

section[data-component-id="product-page"] form button[type="submit"],
button[class~="bg-accent-500"],
a[class~="bg-accent-500"] {
  background-color: rgb(var(--cl-accent)) !important;
  background-image: none !important;
  border-color: rgb(var(--cl-accent)) !important;
  color: rgb(var(--cl-t-accent)) !important;
}

section[data-component-id="product-page"] form button[type="submit"]::after {
  display: none !important;
}

/* Product and section icons stay visible at their template-defined sizes. */
section[data-component-id="products"] svg,
section[data-component-id="product-page"] svg,
section[data-component-id="about-us"] svg,
section[data-component-id="socials"] svg,
nav svg,
footer svg {
  color: rgb(var(--cl-accent));
}

@media (max-width: 640px) {
  section[data-component-id="products"] [x-init*="auto-animate"] > div > a.group:hover {
    transform: none !important;
  }
}