/*
 * Skeletal Hosting — PNX Duos custom theme styles
 * This file will not be overwritten by theme updates.
*/

/* ---------- Base ambience ---------- */
body {
  background-color: rgb(var(--cl-background));
  position: relative;
}

/* Dark vignette so content stays readable over any hero/background image
   set via Shop Settings -> Background Image */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,0,0,0) 0%, rgba(5,6,8,0.55) 55%, rgba(5,6,8,0.92) 100%),
    linear-gradient(to bottom, rgba(5,6,8,0.55) 0%, rgba(5,6,8,0.75) 100%);
}

/* ---------- Header / nav pills ---------- */
header nav a,
header nav button {
  transition: transform 0.2s ease, background-color 0.2s ease;
  background-color: rgba(255,255,255,0.12) !important;
  border-color: transparent !important;
  backdrop-filter: blur(6px);
  color: #ffffff !important;
}

header nav a:hover,
header nav button:hover {
  transform: scale(1.06);
  background-color: rgba(255,255,255,0.2) !important;
}

/* Home pill is red (except the snazzy blue variant on the 4man page) */
header nav a[data-nav-link="Home"]:not(.home-pill-snazzy-blue) {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
}
header nav a[data-nav-link="Home"]:not(.home-pill-snazzy-blue):hover {
  background-color: #dc2626 !important;
}

/* Logo glow — this is the only glow effect kept in the theme,
   reserved for the business icon */
header img[alt] {
  filter: drop-shadow(0 0 10px rgba(88,101,242,0.55));
  transition: filter 0.3s ease;
}
header a:hover img[alt] {
  filter: drop-shadow(0 0 18px rgba(88,101,242,0.85));
}

/* ---------- Product / group cards ---------- */
.bg-card {
  background-color: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(6px);
  border-radius: 0.75rem !important;
  border-color: transparent !important;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

a.bg-card:hover,
.bg-card:hover {
  transform: translateY(-4px);
  background-color: rgba(255,255,255,0.2) !important;
  border-color: transparent !important;
}

/* Product image reveal on hover */
.bg-card img {
  border-radius: 0.6rem !important;
  transition: transform 0.4s ease;
}
.bg-card:hover img {
  transform: scale(1.05);
}

/* Footer text area of each card (price / stock / name) — bright white
   text over the translucent, see-through card background */
.bg-card .px-5.pb-4 {
  background-color: rgba(0,0,0,0.2);
  padding-top: 0.75rem;
  border-radius: 0 0 0.75rem 0.75rem;
}

.bg-card .px-5.pb-4 h3,
.bg-card .px-5.pb-4 p,
.bg-card .px-5.pb-4 p span:not(.text-accent-500) {
  color: rgba(255,255,255,0.95) !important;
}

/* Diagonal white swoosh sweeping across product cards on hover
   (not the nav pills — they get a zoom effect instead, see above) */
.bg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -85%;
  width: 55%;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
  transition: left 0.65s ease;
}
.bg-card:hover::before {
  left: 135%;
}

/* Nav pills never get the swoosh, only the zoom above */
header nav a::before,
header nav button::before {
  content: none !important;
}

/* No swoosh on the product page's image/description or variant boxes */
.product-page-no-swoosh::before {
  content: none !important;
}

/* Dark grey background for the product page boxes specifically */
.product-page-no-swoosh {
  background-color: rgba(45,45,45,0.9) !important;
  --cl-t-primary: 255,255,255;
}
.product-page-no-swoosh:hover {
  background-color: rgba(50,50,50,0.95) !important;
}

/* "NEW" / promo badges */
.badges > div {
  background-color: #ff0d0d !important;
}

/* Section title bullet dot, like the one next to "PNX Duos Store" */
.components h2::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  margin-bottom: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
}

/* Strikethrough / sale price styling */
.line-through {
  color: #ff5050 !important;
  opacity: 0.85;
}

/* ---------- Ember / spark particles (uses the theme's built-in
   snow system — set Snow Color in theme settings to an ember tone) ---------- */
#snow {
  opacity: 0.55;
}

/* ---------- Section headings ---------- */
h1, h2, h3 {
  letter-spacing: -0.01em;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(88,101,242,0.4); border-radius: 999px; }

/* ---------- Cart page: remove-item button hover ---------- */
.cart-remove-btn:hover {
  color: #ffffff !important;
  background-color: #ef4444 !important;
}

/* ---------- No swoosh sweep on the cart page's item list and order summary boxes ---------- */
.cart-box-no-swoosh::before {
  content: none !important;
}

/* ---------- Cart item card: remove default bg-card hover lift/zoom, add a subtle glow instead ---------- */
.cart-item-card {
  transition: box-shadow 0.25s ease-in-out;
}
.cart-item-card:hover {
  box-shadow: 0 0 18px rgba(120,160,255,0.35);
}
.cart-item-card img {
  transition: none !important;
}
.cart-item-card:hover img {
  transform: none !important;
}

/* ---------- Checkout button hover animation ---------- */
.checkout-btn:hover:enabled {
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* ---------- Product card "View Details" hover overlay (Duos/4man product pages) ---------- */
a.group:hover .product-card-view-details {
  opacity: 1;
}

/* ---------- Snazzy blue Home pill (4man products page only) ---------- */
.home-pill-snazzy-blue {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
  border-color: transparent !important;
  box-shadow: 0 0 14px rgba(59,130,246,0.65), 0 4px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.home-pill-snazzy-blue:hover {
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(59,130,246,0.85), 0 6px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
  filter: brightness(1.08);
}

/* ---------- Legal pages: clause number badges + heading style ---------- */
.editor .e-text-code {
  background-color: #2a3a52;
  border: 1px solid #4a7ab0;
  border-radius: 0.4rem;
  color: #d5e6f7;
  padding: 0.15rem 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
}

.editor .e-heading-h3,
.editor .e-heading-h2 {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(var(--cl-t-primary), 1);
}

/* ---------- Legal page tab pills (Terms of Service / Refund Policy): hover + active states ---------- */
.legal-tab-pill {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  box-shadow: none;
}
.legal-tab-pill:hover {
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(56,189,248,0.55), 0 0 6px rgba(56,189,248,0.45);
}
.legal-tab-pill-active {
  box-shadow: 0 0 20px rgba(56,189,248,0.85), 0 0 8px rgba(56,189,248,0.7);
}
.legal-tab-pill-active:hover {
  box-shadow: 0 0 28px rgba(56,189,248,1), 0 0 12px rgba(56,189,248,0.9);
}