/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* ======================================================================
   WareStore brand — "Soft Depth" (dark + red).
   GPU-light: no backdrop-filter, no animated backgrounds. Pairs with the
   red/dark/Inter palette set in settings.json (global.properties).
   ====================================================================== */

/* Static red-tinted backdrop (replaces the particle dots, matches the site) */
#particles-js { display: none !important; }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 560px at 84% -10%, rgba(220, 38, 38, .16), transparent 60%),
    radial-gradient(760px 520px at 4% 2%,     rgba(220, 38, 38, .08), transparent 55%),
    radial-gradient(900px 520px at -8% 110%,  rgba(244, 63, 94, .08), transparent 58%);
}

/* ---- Surfaces: solid, rounded, soft static shadow (nav, cards, modals) ---- */
.bg-card\/75 {
  background-color: rgb(var(--cl-card)) !important;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.28);
}

/* ---- Content cards: red top edge + smooth hover lift ----
   (product cards are <a class="bg-card/75">; feature & review cards carry .ws-card) */
a.bg-card\/75,
.ws-card {
  border-top: 2px solid rgba(220, 38, 38, .40) !important;
  overflow: hidden;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1),
              box-shadow .32s cubic-bezier(.22, 1, .36, 1),
              border-color .25s ease;
  will-change: transform;
}
a.bg-card\/75:hover,
.ws-card:hover {
  transform: translateY(-4px);
  border-top-color: rgb(var(--cl-accent)) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 16px 38px rgba(0,0,0,.42),
              0 0 0 1px rgba(220, 38, 38, .25);
}

/* ---- Buttons: rounded, red glow, smooth ---- */
a.bg-accent-500,
button.bg-accent-500 {
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(220, 38, 38, .28);
  transition: background-color .2s ease,
              box-shadow .25s cubic-bezier(.22, 1, .36, 1),
              transform .25s cubic-bezier(.22, 1, .36, 1) !important;
}
a.bg-accent-500:hover,
button.bg-accent-500:hover {
  box-shadow: 0 4px 16px rgba(220, 38, 38, .42);
  transform: translateY(-1px);
}
/* outline / bordered controls share the rounding */
.border-accent-500 { border-radius: 7px; }

/* ---- Section heading underline → red gradient bar ---- */
hr.border-accent-500 {
  height: 3px; border: 0 !important; border-radius: 3px;
  background: linear-gradient(90deg, rgb(var(--cl-accent)), rgba(var(--cl-accent), 0));
}

/* ---- Inputs: red focus ring ---- */
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: rgba(220, 38, 38, .55) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  a.bg-card\/75, .ws-card, a.bg-accent-500, button.bg-accent-500 { transition: none; }
  a.bg-card\/75:hover, .ws-card:hover,
  a.bg-accent-500:hover, button.bg-accent-500:hover { transform: none; }
}

/* ---- Footer: rounded card to match the rest ---- */
footer {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.28);
}

/* ---- Product page: round the whole column wrapper, keep the inner
   stacked panels square so they stay seamless inside the rounded card ---- */
.ws-product-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.28);
}
.ws-product-card .bg-card\/75 {
  border-radius: 0 !important;
  box-shadow: none !important;
}