/* ==========================================================================
   Wolfmotion Global Design System
   ========================================================================== */

/* --- CSS Variables --- */
:root {
  --wm-bg-0: #04071a;
  --wm-bg-1: #0a0e27;
  --wm-bg-2: #0f1642;
  --wm-bg-3: #1a1f4d;
  --wm-bg-4: #051435;
  --wm-line: rgba(255,255,255,0.08);
  --wm-line-2: rgba(255,255,255,0.14);
  --wm-fg: #ffffff;
  --wm-fg-2: rgba(219,234,254,0.82);
  --wm-fg-3: rgba(187,203,239,0.65);
  --wm-fg-4: rgba(152,182,229,0.55);
  --wm-accent: #2b7fff;
  --wm-accent-2: #00b8db;
  --wm-accent-3: #8ec5ff;
  --wm-violet: #7c5cff;
  --wm-glow: rgba(43,127,255,0.35);
  --wm-radius: 16px;
  --wm-radius-lg: 24px;
  --wm-ease: cubic-bezier(.2,.7,.2,1);
  --wm-dur: 420ms;
}

/* --- Typography --- */
.wm-display { font-family: 'Oxanium', 'Oxanium', system-ui, sans-serif; letter-spacing: -0.025em; }
.wm-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* --- Global overflow guard ---
   Decorative pseudo-elements (radial halos, off-canvas glows) can briefly
   poke past the viewport on small screens before their parent's overflow:hidden
   clips them. Lock horizontal scroll at the root to kill that gap. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* --- Shared Utilities --- */
.wm-container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 840px) { .wm-container { padding: 0 24px; } }

.wm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(43,127,255,0.10);
  border: 1px solid rgba(81,162,255,0.28);
  color: var(--wm-accent-3);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500; font-family: 'Oxanium', sans-serif;
}
.wm-pill .wm-dot-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wm-accent-2); box-shadow: 0 0 10px var(--wm-accent-2);
  animation: wmPulse 1.8s ease-in-out infinite;
}
@keyframes wmPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.wm-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.005));
  border: 1px solid var(--wm-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- Buttons ---
   All solid CTAs (`--primary`, `--glow`, `--cart`) share the same blue→cyan
   gradient + soft cyan halo, modeled on the "Order Wolfmotion" button in the
   final-CTA section. Ghost stays translucent for secondary actions. */
.wm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 12px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  position: relative; z-index: 1; isolation: isolate;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  font-family: 'Oxanium', sans-serif;
  transition:
    transform 220ms var(--wm-ease),
    box-shadow 280ms var(--wm-ease),
    filter 220ms var(--wm-ease),
    background 280ms var(--wm-ease);
}
.wm-btn:hover { transform: translateY(-1px); text-decoration: none; }
.wm-btn:active { transform: translateY(0); }

/* Shared "glow" treatment: blue→cyan gradient + glossy top highlight + soft halo,
   pill-shaped corners across every solid CTA so they read as a consistent set. */
.wm-btn--primary,
.wm-btn--glow,
.wm-btn--cart {
  color: #fff;
  border-radius: 14px !important;
  background:
    linear-gradient(90deg, #00216A 0%, #151744 100%);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}
/* Halo + sheen pseudo-elements removed — clean flat gradient with centered glow */
.wm-btn--primary::before,
.wm-btn--glow::before,
.wm-btn--cart::before,
.wm-btn--primary::after,
.wm-btn--glow::after,
.wm-btn--cart::after { content: none !important; display: none !important; }

/* Hover */
.wm-btn--primary:hover,
.wm-btn--glow:hover,
.wm-btn--cart:hover {
  color: #fff;
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.5);
}
.wm-btn--primary:hover::before,
.wm-btn--glow:hover::before,
.wm-btn--cart:hover::before { opacity: 1; inset: -14px; }
.wm-btn--primary:hover::after,
.wm-btn--glow:hover::after,
.wm-btn--cart:hover::after  { opacity: 1; background-position: 150% 0; }

.wm-btn--primary:active,
.wm-btn--glow:active,
.wm-btn--cart:active { transform: translateY(0); filter: brightness(0.98); }

/* Cart-specific: only difference vs the Order button is full-width.
   Height, padding, radius, font all inherit from .wm-btn / .wm-btn--lg
   so the look matches the rest of the buttons on the page. */
.wm-btn--cart { width: 100%; }
.wm-btn--cart:disabled,
.wm-btn--cart[disabled] {
  opacity: 0.55; cursor: not-allowed; transform: none; filter: grayscale(0.4);
}
.wm-btn--cart:disabled::before,
.wm-btn--cart[disabled]::before { opacity: 0.3; }
.wm-cta-price { font-weight: 700; }

/* Ghost / secondary — soft all-around glow, slightly bottom-weighted, expands subtly on hover */
.wm-btn--ghost {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 14px 1px rgba(255,255,255,0.18),
    0 6px 18px 0 rgba(255,255,255,0.16) !important;
}
.wm-btn--ghost:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
  box-shadow:
    0 0 22px 2px rgba(255,255,255,0.3),
    0 10px 28px 0 rgba(255,255,255,0.26) !important;
}

/* Ghost-button widget wrapper (lets Elementor align the inline-flex pill) */
.wm-ghost-btn-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Sizes */
.wm-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.wm-btn--lg { height: 60px; padding: 0 32px; font-size: 17px; border-radius: 14px; }

/* ============================================================
   WooCommerce / WC Blocks button override — make every Woo
   primary button (cart page, checkout, mini-cart popup, single
   product, "View cart", account, blocks) match the homepage
   blue→cyan gradient pill CTA.
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input[type="submit"].button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page input[type="submit"].button,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart a.checkout-button,
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout button#place_order,
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce .added_to_cart,
.wc-block-components-button.contained,
.wc-block-components-button.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button,
.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer-cart,
.rey-miniCart a.button,
.rey-miniCart .button,
.rey-miniCart .checkout,
.rey-cartTable a.button,
.rey-checkout a.button,
.rey-checkout button.button {
  /* Match .wm-btn base */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  font-family: 'Oxanium', sans-serif;
  position: relative; z-index: 1; isolation: isolate;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.18);
  /* Match .wm-btn--primary gradient + glow */
  color: #fff !important;
  border-radius: 14px !important;
  background:
    linear-gradient(90deg, #00216A 0%, #151744 100%) !important;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
  transition:
    transform 220ms var(--wm-ease),
    box-shadow 280ms var(--wm-ease),
    filter 220ms var(--wm-ease),
    background 280ms var(--wm-ease);
  text-shadow: none;
}

/* Soft cyan halo behind every Woo button */
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before,
.woocommerce input[type="submit"].button::before,
.woocommerce a.button.alt::before,
.woocommerce button.button.alt::before,
.woocommerce input.button.alt::before,
.woocommerce-page a.button::before,
.woocommerce-page button.button::before,
.woocommerce-page input.button::before,
.woocommerce-page input[type="submit"].button::before,
.woocommerce-page a.button.alt::before,
.woocommerce-page button.button.alt::before,
.woocommerce-page input.button.alt::before,
.woocommerce #respond input#submit::before,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::before,
.woocommerce-cart a.checkout-button::before,
.woocommerce-checkout #payment #place_order::before,
.woocommerce-checkout button#place_order::before,
.woocommerce .single_add_to_cart_button::before,
.woocommerce button.single_add_to_cart_button::before,
.woocommerce .added_to_cart::before,
.wc-block-components-button.contained::before,
.wc-block-components-button.wc-block-components-button::before,
.wc-block-cart__submit-button::before,
.wc-block-components-checkout-place-order-button::before,
.wc-block-mini-cart__footer-checkout::before,
.wc-block-mini-cart__footer-cart::before,
.rey-miniCart a.button::before,
.rey-miniCart .button::before,
.rey-miniCart .checkout::before,
.rey-cartTable a.button::before,
.rey-checkout a.button::before,
.rey-checkout button.button::before {
  content: '';
  position: absolute; inset: -10px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 110% at 50% 60%, rgba(255,255,255,0.55), rgba(255,255,255,0.25) 45%, transparent 75%);
  filter: blur(14px);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 280ms var(--wm-ease), inset 280ms var(--wm-ease);
}

/* Light sweep on hover */
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce input.button::after,
.woocommerce input[type="submit"].button::after,
.woocommerce a.button.alt::after,
.woocommerce button.button.alt::after,
.woocommerce input.button.alt::after,
.woocommerce-page a.button::after,
.woocommerce-page button.button::after,
.woocommerce-page input.button::after,
.woocommerce-page input[type="submit"].button::after,
.woocommerce-page a.button.alt::after,
.woocommerce-page button.button.alt::after,
.woocommerce-page input.button.alt::after,
.woocommerce #respond input#submit::after,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after,
.woocommerce-cart a.checkout-button::after,
.woocommerce-checkout #payment #place_order::after,
.woocommerce-checkout button#place_order::after,
.woocommerce .single_add_to_cart_button::after,
.woocommerce button.single_add_to_cart_button::after,
.woocommerce .added_to_cart::after,
.wc-block-components-button.contained::after,
.wc-block-components-button.wc-block-components-button::after,
.wc-block-cart__submit-button::after,
.wc-block-components-checkout-place-order-button::after,
.wc-block-mini-cart__footer-checkout::after,
.wc-block-mini-cart__footer-cart::after,
.rey-miniCart a.button::after,
.rey-miniCart .button::after,
.rey-miniCart .checkout::after,
.rey-cartTable a.button::after,
.rey-checkout a.button::after,
.rey-checkout button.button::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,0.22) 50%, transparent 72%);
  background-size: 220% 100%;
  background-position: -50% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--wm-ease), background-position 900ms var(--wm-ease);
}

.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce input.button:hover::before,
.woocommerce a.button.alt:hover::before,
.woocommerce button.button.alt:hover::before,
.woocommerce input.button.alt:hover::before,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover::before,
.woocommerce-cart a.checkout-button:hover::before,
.woocommerce-checkout #payment #place_order:hover::before,
.woocommerce .single_add_to_cart_button:hover::before,
.wc-block-components-button.contained:hover::before,
.wc-block-cart__submit-button:hover::before,
.wc-block-components-checkout-place-order-button:hover::before,
.wc-block-mini-cart__footer-checkout:hover::before,
.rey-miniCart a.button:hover::before,
.rey-miniCart .checkout:hover::before { opacity: 1; inset: -14px; }

.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.woocommerce input.button:hover::after,
.woocommerce a.button.alt:hover::after,
.woocommerce button.button.alt:hover::after,
.woocommerce input.button.alt:hover::after,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover::after,
.woocommerce-cart a.checkout-button:hover::after,
.woocommerce-checkout #payment #place_order:hover::after,
.woocommerce .single_add_to_cart_button:hover::after,
.wc-block-components-button.contained:hover::after,
.wc-block-cart__submit-button:hover::after,
.wc-block-components-checkout-place-order-button:hover::after,
.wc-block-mini-cart__footer-checkout:hover::after,
.rey-miniCart a.button:hover::after,
.rey-miniCart .checkout:hover::after { opacity: 1; background-position: 150% 0; }

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce input[type="submit"].button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-page input[type="submit"].button:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart a.checkout-button:hover,
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-checkout button#place_order:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .added_to_cart:hover,
.wc-block-components-button.contained:hover,
.wc-block-components-button.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-totals-coupon__button:hover,
.wc-block-mini-cart__footer-checkout:hover,
.wc-block-mini-cart__footer-cart:hover,
.rey-miniCart a.button:hover,
.rey-miniCart .button:hover,
.rey-miniCart .checkout:hover,
.rey-cartTable a.button:hover,
.rey-checkout a.button:hover,
.rey-checkout button.button:hover {
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.5);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce input[type="submit"].button:active,
.woocommerce-checkout #payment #place_order:active,
.woocommerce-cart a.checkout-button:active,
.wc-block-components-button.contained:active,
.wc-block-components-checkout-place-order-button:active,
.wc-block-mini-cart__footer-checkout:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Disabled state for any of the above */
.woocommerce a.button[disabled],
.woocommerce button.button[disabled],
.woocommerce button.button:disabled,
.woocommerce input.button[disabled],
.wc-block-components-button:disabled,
.wc-block-cart__submit-button:disabled,
.wc-block-components-checkout-place-order-button:disabled {
  opacity: 0.55; cursor: not-allowed; transform: none; filter: grayscale(0.4);
}

/* "Continue shopping" stays ghost. Update cart now gets the gradient look
   like every other primary CTA. */
.woocommerce a.button.wc-backward {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  box-shadow: none;
  filter: none;
}
.woocommerce a.button.wc-backward:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.22) !important;
  filter: none;
  box-shadow: none;
}
.woocommerce a.button.wc-backward::before,
.woocommerce a.button.wc-backward::after { display: none; }

/* ============================================================
   WC Blocks Mini-cart popup — extra-strong overrides because
   the block stylesheet ships with high-specificity rules and
   the popup container clips its overflow (which would clip
   the cyan halo). We pull both buttons up to the homepage
   look with explicit body-scoped selectors.
   ============================================================ */
html body .wc-block-mini-cart__footer .wc-block-components-button,
html body .wc-block-mini-cart__footer a.wc-block-mini-cart__footer-cart,
html body .wc-block-mini-cart__footer a.wc-block-mini-cart__footer-checkout,
html body .wc-block-mini-cart__footer .wp-element-button,
html body .wc-block-mini-cart__footer-cart,
html body .wc-block-mini-cart__footer-checkout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 28px !important;
  border-radius: 14px !important;
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(90deg, #00216A 0%, #151744 100%) !important;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3) !important;
  position: relative !important;
  z-index: 1;
  isolation: isolate;
  overflow: visible !important;
  transition:
    transform 220ms var(--wm-ease),
    box-shadow 280ms var(--wm-ease),
    filter 220ms var(--wm-ease) !important;
}

html body .wc-block-mini-cart__footer .wc-block-components-button:hover,
html body .wc-block-mini-cart__footer a.wc-block-mini-cart__footer-cart:hover,
html body .wc-block-mini-cart__footer a.wc-block-mini-cart__footer-checkout:hover,
html body .wc-block-mini-cart__footer-cart:hover,
html body .wc-block-mini-cart__footer-checkout:hover {
  color: #fff !important;
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.5) !important;
}

/* Halo + sweep pseudo-elements for the mini-cart buttons */
html body .wc-block-mini-cart__footer-cart::before,
html body .wc-block-mini-cart__footer-checkout::before {
  content: '';
  position: absolute; inset: -10px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 110% at 50% 60%, rgba(255,255,255,0.55), rgba(255,255,255,0.25) 45%, transparent 75%);
  filter: blur(14px);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 280ms var(--wm-ease), inset 280ms var(--wm-ease);
}
html body .wc-block-mini-cart__footer-cart::after,
html body .wc-block-mini-cart__footer-checkout::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,0.22) 50%, transparent 72%);
  background-size: 220% 100%;
  background-position: -50% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--wm-ease), background-position 900ms var(--wm-ease);
}
html body .wc-block-mini-cart__footer-cart:hover::before,
html body .wc-block-mini-cart__footer-checkout:hover::before { opacity: 1; inset: -14px; }
html body .wc-block-mini-cart__footer-cart:hover::after,
html body .wc-block-mini-cart__footer-checkout:hover::after { opacity: 1; background-position: 150% 0; }

/* Make sure the popup itself doesn't clip the cyan halo around the buttons. */
html body .wc-block-mini-cart__footer,
html body .wc-block-mini-cart__products-table + *,
html body .wp-block-woocommerce-mini-cart-footer-block,
html body .wp-block-woocommerce-mini-cart-checkout-button-block,
html body .wp-block-woocommerce-mini-cart-cart-button-block {
  overflow: visible !important;
}

/* Boost specificity on the cart / checkout / single-product CTAs too,
   in case Rey's CSS overrides anything above. */
html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
html body.woocommerce-cart a.checkout-button.button.alt,
html body.woocommerce-checkout #payment #place_order,
html body.woocommerce button.single_add_to_cart_button,
html body.single-product .single_add_to_cart_button {
  border-radius: 14px !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 14px 32px !important;
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: none !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(90deg, #00216A 0%, #151744 100%) !important;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3) !important;
}

/* --- Headings --- */
.wm-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wm-accent-3); opacity: 0.85;
  display: block; margin-bottom: 16px;
}
.wm-h-display {
  font-family: 'Oxanium', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.02; color: #fff;
}
.wm-h1 { font-size: clamp(56px, 7vw, 104px); }
.wm-h2 { font-size: clamp(40px, 5vw, 68px); }
.wm-h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
.wm-gradient-text {
  color: #fff;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #fff;
  text-shadow:
    0 0 18px rgba(255,255,255,0.35),
    0 0 42px rgba(255,255,255,0.18);
}
.wm-accent-text {
  color: #fff;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #fff;
  text-shadow:
    0 0 22px rgba(255,255,255,0.45),
    0 0 56px rgba(255,255,255,0.22);
}

/* --- Section shell --- */
.wm-section {
  position: relative; z-index: 1; padding: 140px 0;
  font-family: 'Oxanium', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--wm-fg);
  background-color: var(--wm-bg-1);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.wm-section a { color: inherit; text-decoration: none; }
.wm-sect-head { text-align: center; max-width: 780px; margin: 0 auto 80px; }
.wm-sect-head h2 { margin: 0 0 18px; }
.wm-sect-head p { margin: 0; font-size: 18px; color: var(--wm-fg-2); line-height: 1.55; text-wrap: balance; }

/* --- Animated background --- */
/* In Elementor editor, show as a block element so it's visible */
.elementor-editor-active .wm-bg-shell {
  position: relative; min-height: 200px;
}
.wm-bg-shell {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(43,127,255,0.18), transparent 60%),
    radial-gradient(900px 900px at -10% 20%, rgba(0,184,219,0.10), transparent 55%),
    radial-gradient(1100px 800px at 50% 90%, rgba(124,92,255,0.12), transparent 65%),
    linear-gradient(180deg, #04071a 0%, #0a0e27 40%, #0b1144 100%);
}
.wm-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1200px 800px at 50% 20%, #000 30%, transparent 75%);
}
.wm-bg-noise {
  position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- Reveal animation --- */
.wm-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 900ms var(--wm-ease), transform 900ms var(--wm-ease);
}
.wm-reveal.wm-in { opacity: 1; transform: none; }
/* Elementor editor preview: never hide widgets behind the reveal animation */
body.elementor-editor-preview .wm-reveal,
body.elementor-editor-active .wm-reveal { opacity: 1 !important; transform: none !important; }

/* ============================
   HERO
   ============================ */
.wm-hero {
  position: relative; z-index: 1;
  min-height: 100vh;
  padding: 140px 0 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center;
  overflow: hidden;
  font-family: 'Oxanium', sans-serif;
  color: var(--wm-fg);
  background-color: var(--wm-bg-1);
}
.wm-hero__logo-wrap {
  width: 88px; height: 88px; margin: 32px 0 28px;
  position: relative;
  animation: wmFloatY 5s ease-in-out infinite;
}
.wm-hero__logo-wrap::before {
  content: ''; position: absolute; inset: -40%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43,127,255,0.45), transparent 70%);
  filter: blur(12px); z-index: -1;
}
.wm-hero__logo-wrap img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(43,127,255,0.55)); }
@keyframes wmFloatY {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.wm-hero h1 { margin: 0 0 24px; }
.wm-hero__sub {
  font-size: clamp(17px, 1.35vw, 21px);
  color: var(--wm-fg-2);
  max-width: 720px; margin: 0 auto 36px;
  line-height: 1.55; text-wrap: balance;
}
.wm-hero__cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.wm-hero__micro {
  margin-top: 28px; display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: center;
  font-size: 13px; color: var(--wm-fg-4); font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.wm-hero__micro span { display: inline-flex; align-items: center; gap: 6px; }
.wm-hero__micro svg { flex-shrink: 0; }
.wm-hero__micro-item { color: var(--wm-fg-3); }
.wm-hero__micro-dot {
  color: var(--wm-fg-4);
  opacity: 0.7;
  font-size: 16px;
  line-height: 1;
  user-select: none;
}
.wm-hero__video {
  margin-top: 72px;
  width: min(1120px, 100% - 64px);
  aspect-ratio: 16/9;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 40px 120px -40px rgba(43,127,255,0.45),
    0 20px 60px -20px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}
.wm-hero__video img,
.wm-hero__video .wm-hero__video-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-hero__video::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(4,7,26,0.8) 100%),
    radial-gradient(60% 60% at 50% 50%, transparent, rgba(4,7,26,0.3));
}
.wm-hero__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2;
}
.wm-hero__play-btn {
  width: 82px; height: 82px; border-radius: 50%;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 300ms var(--wm-ease), background 300ms;
}
.wm-hero__play-btn:hover { transform: scale(1.08); background: rgba(255,255,255,0.22); }
.wm-hero__play-btn::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  animation: wmRingPulse 2s ease-out infinite;
}
@keyframes wmRingPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
.wm-hero__video-caption {
  position: absolute; left: 24px; bottom: 20px; z-index: 3;
  font-size: 13px; font-family: 'JetBrains Mono', monospace;
  color: var(--wm-fg-3); display: flex; gap: 10px; align-items: center;
}
.wm-hero__video-caption .wm-dot-rec { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: wmPulse 1.5s infinite; }

/* ============================
   TICKER
   ============================ */
.wm-ticker {
  padding: 28px 0;
  border-top: 1px solid var(--wm-line); border-bottom: 1px solid var(--wm-line);
  overflow: hidden; position: relative;
  font-family: 'Oxanium', sans-serif;
  background-color: var(--wm-bg-1);
  /* Soft fade-in/fade-out at the edges so items don't pop on/off */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.wm-ticker__inner {
  display: flex; align-items: center; white-space: nowrap; width: max-content;
  animation: wmScroll 30s linear infinite;
  will-change: transform;
}
.wm-ticker__item {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Oxanium', sans-serif; font-weight: 600; font-size: 22px;
  color: rgba(219,234,254,0.5); letter-spacing: -0.01em;
  /* Spacing lives on each item (not as flex gap) so the gap after the last item
     of the first set equals every other gap → -50% translate is seamless. */
  padding-right: 80px;
}
.wm-ticker__item svg { opacity: 0.6; }
@keyframes wmScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .wm-ticker__inner { animation: none; } }

/* ============================
   FULL-BODY TRACKING
   ============================ */
.wm-fb-wrap {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--wm-line);
  background: linear-gradient(160deg, rgba(5,15,86,0.5), rgba(5,14,79,0.3));
  backdrop-filter: blur(10px);
  padding: 48px;
  display: grid; grid-template-columns: 1fr 420px;
  gap: 48px; align-items: center;
}
.wm-fb-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(43,127,255,0.14), transparent 60%);
  pointer-events: none;
}
.wm-fb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--wm-line); border-radius: 14px; overflow: hidden; position: relative; }
.wm-fb-stat { background: rgba(10,14,39,0.6); padding: 24px 20px; }
.wm-fb-stat__val { font-family: 'Oxanium', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.wm-fb-stat__val span { font-size: 18px; }
.wm-fb-stat__label { font-size: 12px; color: var(--wm-fg-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.wm-fb-features { margin-top: 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wm-fb-feature { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--wm-fg-2); }
.wm-fb-feature__icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(43,127,255,0.12); border: 1px solid rgba(43,127,255,0.25);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--wm-accent-3);
}
.wm-fb-figure {
  position: relative; aspect-ratio: 3/4; border-radius: 18px;
  overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
}
.wm-fb-figure img { width: 100%; height: 100%; object-fit: cover; }
.wm-fb-figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,22,66,0.7), transparent 50%);
}
.wm-fb-tracker {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--wm-accent-2);
  box-shadow: 0 0 0 2px rgba(0,184,219,0.3), 0 0 20px var(--wm-accent-2);
  animation: wmTrackerPulse 2.5s ease-in-out infinite;
  z-index: 2;
}
.wm-fb-tracker::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--wm-accent-2); opacity: 0.6;
  animation: wmTrackerRing 2.5s ease-out infinite;
}
@keyframes wmTrackerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes wmTrackerRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }

@media (max-width: 960px) {
  .wm-fb-wrap { grid-template-columns: 1fr; padding: 28px; }
}
@media (max-width: 640px) {
  .wm-fb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-fb-stat { padding: 18px 14px; }
  .wm-fb-stat__val { font-size: 26px; }
}

/* ============================
   SETUP STEPS
   ============================ */
.wm-steps {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  padding: 8px 0;
}
/* Connecting timeline line */
.wm-steps::before {
  content: '';
  position: absolute;
  left: 47px;
  top: 56px;
  bottom: 56px;
  width: 2px;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(81,162,255,0.35) 12%,
      rgba(43,127,255,0.55) 50%,
      rgba(124,92,255,0.35) 88%,
      transparent 100%);
  border-radius: 2px;
  opacity: 0.85;
}
.wm-step {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: stretch;
  margin: 0 0 18px;
  transition: opacity 500ms var(--wm-ease);
}
.wm-step:last-child { margin-bottom: 0; }

/* Number circle — solid base so the timeline line behind it doesn't show
   through, layered with a glass gradient + soft inner highlights. */
.wm-step__num {
  width: 96px; height: 96px;
  border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  align-self: center;
  isolation: isolate;
  background:
    radial-gradient(110% 110% at 30% 20%, rgba(81,162,255,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    var(--wm-bg-1);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -16px 32px rgba(8,12,40,0.6),
    0 8px 30px -16px rgba(0,0,0,0.7);
  transition:
    border-color 500ms var(--wm-ease),
    box-shadow 500ms var(--wm-ease),
    transform 500ms var(--wm-ease),
    background 500ms var(--wm-ease);
}
.wm-step__num::before {
  /* Soft halo behind the active circle */
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.55), transparent 75%);
  opacity: 0;
  filter: blur(8px);
  z-index: -1;
  transition: opacity 500ms var(--wm-ease);
}
.wm-step__num::after {
  /* Inner gradient ring that lights up when active */
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)) border-box,
    linear-gradient(140deg, rgba(81,162,255,0), rgba(81,162,255,0)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: background 500ms var(--wm-ease);
}
.wm-step__num-text {
  font-family: 'Oxanium', 'Oxanium', sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: filter 500ms var(--wm-ease);
}

/* Card */
.wm-step__card {
  position: relative;
  padding: 24px 28px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)),
    rgba(10, 14, 39, 0.55);
  border: 1px solid var(--wm-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  transition:
    border-color 450ms var(--wm-ease),
    background 450ms var(--wm-ease),
    transform 450ms var(--wm-ease),
    box-shadow 450ms var(--wm-ease);
}
/* Soft accent sheen that slides in on hover */
.wm-step__card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 0% 50%, rgba(255,255,255,0.14), transparent 55%),
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 500ms var(--wm-ease);
}

.wm-step__title {
  font-family: 'Oxanium', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: #fff;
}
.wm-step__desc { color: var(--wm-fg-2); font-size: 15px; line-height: 1.6; margin: 0; }

/* ---- HOVER (the whole row lights up) ---- */
.wm-step { cursor: default; }
.wm-step:hover .wm-step__card {
  border-color: rgba(255,255,255,0.45);
  transform: translateX(6px);
  box-shadow:
    0 0 24px rgba(255,255,255,0.18),
    0 18px 60px -22px rgba(255,255,255,0.55),
    0 4px 18px -8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.wm-step:hover .wm-step__card::before { opacity: 1; }

.wm-step:hover .wm-step__num {
  border-color: rgba(255,255,255,0.55);
  transform: scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -10px 28px rgba(8,12,40,0.5),
    0 0 22px rgba(255,255,255,0.32),
    0 14px 50px -10px rgba(255,255,255,0.55),
    0 0 0 4px rgba(255,255,255,0.12);
}
.wm-step:hover .wm-step__num::before { opacity: 1; }
.wm-step:hover .wm-step__num::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04)) border-box,
    linear-gradient(140deg, rgba(255,255,255,0.7), rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.7)) border-box;
}
.wm-step:hover .wm-step__num-text {
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.7));
}

.wm-aio-bar {
  margin: 0 auto; padding: 36px 48px; border-radius: 18px;
  background: linear-gradient(90deg, rgba(1,33,105,0.7) 0%, rgba(19,23,69,0.7) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  text-align: center; position: relative; overflow: hidden;
}
.wm-aio-bar::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(43,127,255,0.18), transparent 60%);
  pointer-events: none;
}
.wm-aio-bar__title { font-family: 'Oxanium', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; color: #fff; position: relative; }
.wm-aio-bar__eyebrow {
  font-family: 'Oxanium', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  margin: 0 0 8px; position: relative;
}
.wm-aio-bar__sub { font-size: 15px; color: var(--wm-fg-2); margin: 0; position: relative; max-width: 760px; margin-left: auto; margin-right: auto; }
.wm-aio-bar--is-eyebrow { padding: 26px 48px; }

@media (max-width: 960px) {
  .wm-steps::before { left: 33px; top: 40px; bottom: 40px; }
  .wm-step { grid-template-columns: 68px 1fr; gap: 18px; margin-bottom: 14px; }
  .wm-step__num { width: 68px; height: 68px; }
  .wm-step__num-text { font-size: 22px; }
  .wm-step__card { padding: 20px 22px; }
  .wm-step__title { font-size: 19px; }
}

/* ============================
   PRODUCT
   ============================ */
.wm-product {
  display: grid; grid-template-columns: 584px 1fr; gap: 48px; align-items: start;
}
.wm-product__visual { display: flex; flex-direction: column; gap: 24px; }
.wm-product__media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
  border: 0;
  padding: 0;
}
.wm-product__img-holder {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2 !important;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1535, #1a0e3a);
}
/* Fallback for any browser/parent that ignores aspect-ratio: explicit
   padding-top hack guarantees the 3:2 frame. */
.wm-product__img-holder::before {
  content: '';
  display: block;
  padding-top: 66.6667%;
}
.wm-product__img-holder img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  padding: 0 !important;
  transition: opacity 300ms var(--wm-ease);
}
.wm-product__img-holder img.is-swapping { opacity: 0; }

/* Badges (sit on top of the main image, top-left) */
.wm-product__badges {
  position: absolute;
  top: 16px; left: 16px; right: 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.wm-product__badges .wm-badge-mini { pointer-events: auto; }
.wm-badge-mini {
  padding: 6px 12px; border-radius: 999px;
  font-family: 'Oxanium', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wm-badge-mini--muted   { background: rgba(10,14,39,0.7); color: var(--wm-fg-3); border: 1px solid rgba(255,255,255,0.12); }
.wm-badge-mini--accent  { background: linear-gradient(90deg, #2b7fff, #00b8db); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
.wm-badge-mini--success { background: rgba(16,185,129,0.18); color: #34d399; border: 1px solid rgba(16,185,129,0.45); }
.wm-badge-mini--warning { background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid rgba(245,158,11,0.45); }
.wm-badge-mini--danger  { background: rgba(239,68,68,0.18);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.45); }

/* Legacy badge classes kept as aliases so older saved data still renders */
.wm-badge-mini--stock { background: rgba(10,14,39,0.7); color: var(--wm-fg-3); border: 1px solid rgba(255,255,255,0.12); }
.wm-badge-mini--new   { background: linear-gradient(90deg, #2b7fff, #00b8db); color: #fff; border: 1px solid rgba(255,255,255,0.18); }

/* ===== Gallery strip (lives INSIDE the main media container) ===== */
.wm-product__gallery {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.wm-gallery__track {
  display: flex; gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.wm-gallery__track::-webkit-scrollbar { display: none; }
.wm-gallery__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none; /* keep drags 1:1 — let snap engage on release */
}
.wm-gallery__track.is-dragging .wm-gallery__thumb { pointer-events: none; }
.wm-gallery__thumb {
  flex: 0 0 84px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: linear-gradient(135deg, #0a1535, #1a0e3a);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  transition:
    border-color 250ms var(--wm-ease),
    transform 250ms var(--wm-ease),
    box-shadow 250ms var(--wm-ease);
}
.wm-gallery__thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 5px;
  display: block;
  pointer-events: none;
}
.wm-gallery__thumb:hover {
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}
.wm-gallery__thumb.wm-active {
  border-color: var(--wm-accent);
  box-shadow:
    0 0 0 2px rgba(43,127,255,0.18),
    0 8px 22px -10px rgba(43,127,255,0.55);
}
.wm-gallery__arrow {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  color: var(--wm-fg-2);
  cursor: pointer;
  transition: background 250ms var(--wm-ease), color 250ms var(--wm-ease), transform 200ms var(--wm-ease), border-color 250ms var(--wm-ease);
}
.wm-gallery__arrow:hover:not([disabled]) {
  background: rgba(43,127,255,0.18);
  color: #fff;
  border-color: rgba(81,162,255,0.5);
  transform: scale(1.05);
}
.wm-gallery__arrow[disabled] { opacity: 0.3; cursor: default; }

/* Old absolute-positioned bottom dot row — no longer used in markup, but kept as an
   in-case fallback so nothing layout-breaks if someone re-enables it. */
.wm-product__nav-dots { display: none; }
.wm-product__info h1, .wm-product__info .wm-product-title { margin: 12px 0 16px; line-height: 1; }
.wm-product__reviews { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--wm-fg-2); margin-bottom: 22px; }
.wm-stars { display: inline-flex; gap: 2px; color: #f5a623; }
.wm-stars--empty { color: rgba(255,255,255,0.18); }
.wm-product__reviews--empty { color: var(--wm-fg-3); font-size: 13px; }
.wm-product__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.wm-product__price .wm-big { font-family: 'Oxanium', sans-serif; font-weight: 700; font-size: 56px; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.wm-product__price .wm-old { font-size: 20px; color: var(--wm-fg-4); text-decoration: line-through; }
.wm-product__price .wm-save { font-size: 12px; color: #10b981; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); }
.wm-product__tagline { color: var(--wm-fg-2); font-size: 15px; margin: 0 0 26px; line-height: 1.55; }
.wm-product__label { font-size: 12px; color: var(--wm-fg-3); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; display: block; }
.wm-packs {
  display: grid; gap: 12px; margin: 0 0 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Extra top space so the corner badge can stick out without clipping */
  padding-top: 8px;
}
@media (max-width: 900px) { .wm-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wm-pack {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wm-line);
  cursor: pointer; transition: all 300ms var(--wm-ease);
  min-height: 92px;
}
.wm-pack:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.wm-pack.wm-selected { background: rgba(43,127,255,0.08); border-color: rgba(81,162,255,0.5); box-shadow: 0 0 0 3px rgba(43,127,255,0.08); }
.wm-pack--popular { border-color: rgba(81,162,255,0.45); }
.wm-pack__radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  position: relative; flex-shrink: 0;
}
.wm-pack.wm-selected .wm-pack__radio { border-color: var(--wm-accent); }
.wm-pack.wm-selected .wm-pack__radio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--wm-accent); box-shadow: 0 0 10px var(--wm-accent);
}
.wm-pack__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wm-pack__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wm-pack__info h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #fff; line-height: 1.2; }
.wm-pack__info p { margin: 0; font-size: 13px; color: var(--wm-fg-3); }
.wm-pack__price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.wm-pack__price { font-family: 'Oxanium', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.wm-pack__price-old { font-size: 14px; color: var(--wm-fg-4); text-decoration: line-through; }
/* Popular badge: corner sticker that overflows the card without consuming layout space */
.wm-pack__tag {
  position: absolute; top: -10px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4;
  background: linear-gradient(90deg, #2b7fff, #00b8db); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(43,127,255,0.65);
}
.wm-swatches { display: flex; gap: 12px; margin-bottom: 24px; }
.wm-swatch {
  width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; position: relative;
  transition: transform 300ms var(--wm-ease);
  border: 2px solid transparent;
}
.wm-swatch:hover { transform: scale(1.05); }
.wm-swatch__inner {
  position: absolute; inset: 4px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
}
.wm-swatch--black .wm-swatch__inner { background: #1a1a2e; }
.wm-swatch--white .wm-swatch__inner { background: #f0f4f8; }
.wm-swatch--blue .wm-swatch__inner { background: linear-gradient(135deg, #2b7fff, #00b8db); }
.wm-swatch.wm-selected { border-color: var(--wm-accent); }
.wm-swatch__check {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; color: #fff;
}
.wm-swatch.wm-selected .wm-swatch__check { display: flex; }
.wm-swatch--white.wm-selected .wm-swatch__check { color: #1a1a2e; }
.wm-quantity-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.wm-qty {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--wm-line);
  border-radius: 10px; padding: 2px;
}
.wm-qty button {
  width: 32px; height: 32px; border-radius: 8px; font-size: 16px;
  color: var(--wm-fg-2); transition: background 200ms;
  background: transparent; border: 0; cursor: pointer;
}
.wm-qty button:hover { background: rgba(255,255,255,0.08); color: #fff; }
.wm-qty span { width: 36px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; }
.wm-product__cta { width: 100%; }
.wm-product__trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding-top: 22px; border-top: 1px solid var(--wm-line);
}
.wm-trust-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.wm-trust-item__icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(43,127,255,0.1); border: 1px solid rgba(43,127,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--wm-accent-3);
}
.wm-trust-item__label { font-size: 12px; color: var(--wm-fg-3); font-weight: 500; }

@media (max-width: 960px) {
  .wm-product { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================
   COMPATIBILITY
   ============================ */
.wm-compat-groups { display: grid; gap: 48px; }
.wm-compat-group h3 {
  font-size: 14px; color: var(--wm-fg-3); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; margin: 0 0 24px;
}
.wm-compat-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; max-width: 1180px; margin: 0 auto;
}
.wm-compat-grid .wm-compat-card {
  flex: 0 1 calc((100% - (12px * 5)) / 6);
  min-width: 140px;
  max-width: 200px;
}
@media (max-width: 1024px) {
  .wm-compat-grid .wm-compat-card {
    flex: 0 1 calc((100% - (12px * 2)) / 3);
    max-width: none;
  }
}
@media (max-width: 640px) {
  .wm-compat-grid .wm-compat-card {
    flex: 0 1 calc((100% - 12px) / 2);
  }
}
.wm-compat-card {
  position: relative; padding: 22px 14px; border-radius: 14px; min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--wm-line);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: all 300ms var(--wm-ease); backdrop-filter: blur(8px);
}
.wm-compat-card:hover { border-color: rgba(81,162,255,0.4); transform: translateY(-3px); background: linear-gradient(180deg, rgba(43,127,255,0.08), rgba(255,255,255,0.01)); }
.wm-compat-card__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; color: var(--wm-accent-3); }
.wm-compat-card__icon img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.wm-compat-card__name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: #fff; }
.wm-compat-card__meta { font-size: 12px; color: var(--wm-fg-3); font-family: 'JetBrains Mono', monospace; }
.wm-compat-card__dot { position: absolute; top: 12px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; }
.wm-platform-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; margin: 0 auto; }
.wm-platform-card {
  padding: 28px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid var(--wm-line); backdrop-filter: blur(8px);
  display: flex; gap: 20px; align-items: center;
}
.wm-platform-card__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(43,127,255,0.2), rgba(0,184,219,0.1));
  border: 1px solid rgba(43,127,255,0.3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--wm-accent-3);
}
.wm-platform-card__name { font-family: 'Oxanium', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 2px; color: #fff; }
.wm-platform-card__sub { font-size: 14px; color: var(--wm-fg-3); margin: 0; }

@media (max-width: 768px) {
  .wm-platform-pair { grid-template-columns: 1fr; }
}

/* ============================
   FAQ
   ============================ */
.wm-faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.wm-faq {
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--wm-line); backdrop-filter: blur(8px);
  transition: border-color 300ms, background 300ms;
}
.wm-faq.wm-open { border-color: rgba(81,162,255,0.32); background: linear-gradient(180deg, rgba(43,127,255,0.06), rgba(255,255,255,0.01)); }
.wm-faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 28px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  text-align: left; background: transparent; border: 0; cursor: pointer;
  color: #fff; font-family: 'Oxanium', sans-serif;
}
.wm-faq__icon {
  width: 28px; height: 28px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center;
  transition: transform 300ms var(--wm-ease); color: var(--wm-accent);
}
.wm-faq.wm-open .wm-faq__icon { transform: rotate(45deg); }
.wm-faq__a { max-height: 0; overflow: hidden; transition: max-height 500ms var(--wm-ease); }
.wm-faq.wm-open .wm-faq__a { max-height: 240px; }
.wm-faq__a-inner { padding: 0 28px 24px; color: var(--wm-fg-2); font-size: 15px; line-height: 1.65; }
/* --- Discord callout (replaces old contact box) --- */
.wm-discord {
  margin: 36px auto 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  border-radius: 18px;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(88,101,242,0.18), transparent 55%),
    linear-gradient(180deg, rgba(88,101,242,0.06), rgba(255,255,255,0.015));
  border: 1px solid rgba(88,101,242,0.28);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -30px rgba(88,101,242,0.55);
  position: relative; overflow: hidden;
}
.wm-discord::after {
  content: ""; position: absolute; inset: -40% -10% auto auto;
  width: 360px; height: 360px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(88,101,242,0.18), transparent 70%);
  filter: blur(10px);
}
.wm-discord__icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #5865F2, #4752c4);
  box-shadow: 0 10px 24px -8px rgba(88,101,242,0.65);
  color: #fff;
}
.wm-discord__icon svg { width: 30px; height: auto; }
.wm-discord__body { min-width: 0; }
.wm-discord__body h4 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.wm-discord__body p { margin: 0 0 8px; color: var(--wm-fg-2); font-size: 14px; line-height: 1.5; }
.wm-discord__meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--wm-fg-3); letter-spacing: 0.02em;
}
.wm-discord__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #43b581; box-shadow: 0 0 0 0 rgba(67,181,129,0.6);
  animation: wmDiscordPulse 1.8s ease-out infinite;
}
@keyframes wmDiscordPulse {
  0%   { box-shadow: 0 0 0 0 rgba(67,181,129,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(67,181,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(67,181,129,0); }
}

.wm-btn--discord {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 12px;
  background: #5865F2; color: #fff; font-weight: 600; font-size: 15px;
  border: 0; transition: transform 200ms var(--wm-ease), background 200ms var(--wm-ease), box-shadow 200ms var(--wm-ease);
  box-shadow: 0 14px 32px -12px rgba(88,101,242,0.7);
  text-decoration: none;
}
.wm-btn--discord:hover { background: #4752c4; transform: translateY(-1px); box-shadow: 0 18px 40px -12px rgba(88,101,242,0.8); }
.wm-btn--discord svg.wm-discord__logo { width: 18px; height: auto; }

@media (max-width: 720px) {
  .wm-discord { grid-template-columns: 1fr; text-align: center; padding: 24px; }
  .wm-discord__icon { margin: 0 auto; }
  .wm-discord__meta { justify-content: center; display: inline-flex; }
  .wm-btn--discord { justify-self: center; }
}

/* ============================
   FINAL CTA
   ============================ */
.wm-final-cta {
  position: relative; z-index: 1;
  padding: 160px 0 180px;
  text-align: center; overflow: hidden;
  font-family: 'Oxanium', sans-serif; color: var(--wm-fg);
  background-color: var(--wm-bg-1);
}
.wm-final-cta::before {
  content: ''; position: absolute; left: 50%; top: 10%; transform: translateX(-50%);
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,184,219,0.15), transparent 70%);
  pointer-events: none;
}
.wm-final-cta__logo { width: 64px; height: 64px; margin: 0 auto 24px; filter: drop-shadow(0 0 18px rgba(43,127,255,0.5)); }
.wm-final-cta__logo img { width: 100%; height: 100%; }
.wm-final-cta h2 { margin: 0 0 18px; }
.wm-final-cta > .wm-container > p { font-size: 20px; color: var(--wm-fg-2); max-width: 640px; margin: 0 auto 40px; line-height: 1.5; }
.wm-final-cta__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.wm-final-cta__micro { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 14px; color: var(--wm-fg-3); }
.wm-final-cta__micro span { display: inline-flex; align-items: center; }
.wm-final-cta__sep { color: var(--wm-fg-4); font-weight: 700; opacity: 0.65; }

/* ============================
   FOOTER
   ============================ */
.wm-footer {
  position: relative; z-index: 1;
  background: #04071a;
  border-top: 1px solid var(--wm-line);
  padding: 72px 0 32px;
  font-family: 'Oxanium', sans-serif; color: var(--wm-fg);
}
.wm-footer a { color: inherit; text-decoration: none; }
.wm-footer__grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid var(--wm-line);
}
.wm-footer__brand { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; font-weight: 700; letter-spacing: -0.02em; font-size: 18px; }
.wm-footer__brand img { width: 24px; height: 24px; }
.wm-footer__desc { color: var(--wm-fg-3); font-size: 14px; line-height: 1.6; max-width: 320px; margin: 0 0 20px; }
.wm-footer__social { display: flex; gap: 10px; }
.wm-footer__social a {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--wm-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--wm-fg-3); transition: all 200ms;
}
.wm-footer__social a:hover { color: #fff; border-color: var(--wm-accent); background: rgba(43,127,255,0.08); }
.wm-footer h5 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wm-fg-3); margin: 0 0 18px; font-weight: 600; }
.wm-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.wm-footer ul a { font-size: 14px; color: var(--wm-fg-2); transition: color 200ms; }
.wm-footer ul a:hover { color: #fff; }
.wm-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-size: 13px; color: var(--wm-fg-4); }
.wm-footer__bottom-links { display: flex; gap: 24px; }
.wm-footer__bottom-links a:hover { color: #fff; }

@media (max-width: 960px) {
  .wm-footer__grid { grid-template-columns: 1fr 1fr; }
  .wm-section { padding: 96px 0; }
}

/* ============================
   REVIEWS
   ============================ */
.wm-reviews-section .wm-sect-head { text-align: center; }
.wm-reviews__summary {
  margin-top: 24px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wm-line);
}
.wm-reviews__summary-num {
  font-family: 'Oxanium', sans-serif; font-weight: 700;
  font-size: 22px; color: #fff; letter-spacing: -0.02em;
}
.wm-reviews__summary-count { color: var(--wm-fg-3); font-size: 13px; }
.wm-reviews__grid {
  margin-top: 56px;
  display: grid; gap: 18px;
  grid-template-columns: repeat(var(--wm-rev-cols, 3), minmax(0, 1fr));
}
@media (max-width: 1024px) { .wm-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .wm-reviews__grid { grid-template-columns: 1fr; } }
.wm-review {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--wm-line);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 240ms var(--wm-ease), transform 240ms var(--wm-ease);
}
.wm-review:hover { border-color: rgba(81,162,255,0.32); transform: translateY(-2px); }
.wm-review__head { display: flex; align-items: center; gap: 12px; }
.wm-review__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; color: #fff; font-size: 16px;
  font-family: 'Oxanium', sans-serif;
  flex-shrink: 0;
}
.wm-review__meta { min-width: 0; line-height: 1.25; }
.wm-review__name {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: #fff; font-size: 14.5px;
}
.wm-review__verified {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, #2b7fff, #00b8db);
  color: #fff;
}
.wm-review__date { font-size: 12px; color: var(--wm-fg-3); margin-top: 2px; }
.wm-review .wm-stars { font-size: 0; line-height: 1; }
.wm-review .wm-stars .wm-star { color: rgba(255,255,255,0.18); }
.wm-review .wm-stars .wm-star.is-on { color: #f5a623; }
.wm-review__body {
  margin: 2px 0 0; color: var(--wm-fg-2); font-size: 14.5px; line-height: 1.6;
}
.wm-review__product {
  margin-top: 4px; font-size: 12px; color: var(--wm-fg-3); letter-spacing: 0.02em;
}
.wm-review__product a { color: var(--wm-accent-3); text-decoration: none; }
.wm-review__product a:hover { color: var(--wm-accent); text-decoration: underline; }
.wm-reviews__cta {
  margin-top: 36px; display: flex; justify-content: center;
}
.wm-reviews__empty {
  margin-top: 40px; padding: 36px; border-radius: 16px;
  border: 1px dashed var(--wm-line-2);
  background: linear-gradient(180deg, rgba(43,127,255,0.04), rgba(255,255,255,0.01));
  text-align: center;
}
.wm-reviews__empty p { margin: 0 0 14px; color: var(--wm-fg-2); }

/* Make every <span class="wm-star"> behave like its enclosed SVG */
.wm-star { display: inline-flex; vertical-align: middle; line-height: 1; }
.wm-star svg { width: 14px; height: 14px; }

/* ============================
   INTRO (Logo + Brand splash)
   ============================ */
.wm-intro {
  --wm-intro-glow: #2b7fff;
  --wm-intro-glow-strength: 55px;
  position: relative;
  min-height: 100vh;
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  font-family: 'Oxanium', sans-serif;
  color: var(--wm-fg);
  background-color: var(--wm-bg-1);
  background-image:
    radial-gradient(60% 50% at 50% 40%, rgba(43,127,255,0.18), transparent 70%);
}
.wm-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  animation: wmIntroIn 1100ms var(--wm-ease) both;
}
.wm-intro__logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(43,127,255,0.55));
  animation: wmFloatY 6s ease-in-out infinite;
}
.wm-intro__name {
  position: relative;
  margin: 0;
  font-family: 'Oxanium', 'Oxanium', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 9vw, 128px);
  letter-spacing: -0.045em;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 calc(var(--wm-intro-glow-strength) * 0.35) var(--wm-intro-glow))
    drop-shadow(0 0 calc(var(--wm-intro-glow-strength) * 0.85) color-mix(in srgb, var(--wm-intro-glow) 70%, transparent));
  animation: wmIntroGlow 4.5s ease-in-out infinite;
}
.wm-intro__name::before {
  content: '';
  position: absolute;
  inset: -25% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 55%,
    color-mix(in srgb, var(--wm-intro-glow) 55%, transparent) 0%,
    color-mix(in srgb, var(--wm-intro-glow) 18%, transparent) 38%,
    transparent 75%);
  filter: blur(calc(var(--wm-intro-glow-strength) * 0.45));
  opacity: 0.9;
  animation: wmIntroGlowAura 6s ease-in-out infinite;
}
@keyframes wmIntroGlow {
  0%, 100% { filter:
    drop-shadow(0 0 calc(var(--wm-intro-glow-strength) * 0.30) var(--wm-intro-glow))
    drop-shadow(0 0 calc(var(--wm-intro-glow-strength) * 0.75) color-mix(in srgb, var(--wm-intro-glow) 65%, transparent)); }
  50%      { filter:
    drop-shadow(0 0 calc(var(--wm-intro-glow-strength) * 0.45) var(--wm-intro-glow))
    drop-shadow(0 0 calc(var(--wm-intro-glow-strength) * 1.10) color-mix(in srgb, var(--wm-intro-glow) 75%, transparent)); }
}
@keyframes wmIntroGlowAura {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.05); opacity: 1;    }
}
.wm-intro__hint {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--wm-fg-3);
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0;
  animation: wmHintFade 1200ms var(--wm-ease) 600ms forwards;
}
.wm-intro__hint-arrow {
  display: inline-flex;
  animation: wmBounceY 2.2s ease-in-out infinite;
}
@keyframes wmIntroIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes wmHintFade {
  to { opacity: 1; }
}
@keyframes wmBounceY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* Snap behavior: only when intro exists on the page */
body.wm-has-intro { scroll-behavior: smooth; }

/* ============================
   HEADER REVEAL ON SCROLL
   ============================ */
/* When an intro is on the page, take the Rey header out of flow so the intro
   can sit at the very top of the viewport, then animate it in/out. We override
   Rey's --hdr-* CSS vars (which control its built-in position) AND set
   position with !important to defeat any inline/sticky overrides. */
body.wm-has-intro .rey-siteHeader {
  --hdr-p: fixed;
  --hdr-t: 0;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 999;
  transition:
    transform 700ms var(--wm-ease),
    opacity   500ms var(--wm-ease),
    background-color 400ms var(--wm-ease),
    box-shadow 400ms var(--wm-ease);
  will-change: transform, opacity;
}
body.wm-has-intro.wm-intro-visible .rey-siteHeader {
  transform: translateY(-110%) !important;
  opacity: 0;
  pointer-events: none;
}
body.wm-has-intro:not(.wm-intro-visible) .rey-siteHeader {
  transform: translateY(0) !important;
  opacity: 1;
  background-color: rgba(10, 14, 39, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wm-line);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.6);
}

/* If Rey wraps the header in an outer wrapper that reserves layout space,
   collapse it so the intro can sit at the very top of the viewport. We must
   NOT target the header itself here (.header-pos--rel is ON .rey-siteHeader,
   so collapsing it would kill the sticky header). */
body.wm-has-intro .rey-headerWrap {
  position: static !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Rey injects a "header--separator-bar" inside the header — it's the thin
   horizontal line you saw between the header and the first section. Kill it. */
body.wm-has-intro .header--separator-bar {
  display: none !important;
  height: 0 !important;
}

/* Belt-and-suspenders: kill any borders/shadows on the header itself or the
   content wrapper that could read as a line right under the header. */
body.wm-has-intro.wm-intro-visible .rey-siteHeader,
body.wm-has-intro.wm-intro-visible #content,
body.wm-has-intro.wm-intro-visible .rey-siteContent {
  border: 0 !important;
  box-shadow: none !important;
}

/* Disable in Elementor editor — show everything as-is for editing */
body.elementor-editor-preview .wm-intro,
body.elementor-editor-active .wm-intro {
  min-height: 60vh;
  height: auto;
  padding: 80px 0;
}
body.elementor-editor-preview .rey-siteHeader,
body.elementor-editor-active .rey-siteHeader {
  transform: none !important;
  opacity: 1 !important;
  position: static !important;
}

/* ============================================================
   WooCommerce Cart / Checkout / Mini-cart polish
   - Hide every coupon UI (legacy + WC Blocks)
   - Widen product column so titles don't crammed-wrap
   - Restyle quantity inputs to match the homepage .wm-qty
   - Apply same look to mini-cart popup
   ============================================================ */

/* ---- Hide coupon UI ---- */
html body .woocommerce-cart .coupon,
html body .woocommerce-cart form.checkout_coupon,
html body .checkout_coupon,
html body .woocommerce-form-coupon-toggle,
html body .woocommerce-form-coupon,
html body .cart_totals .wc-block-components-totals-coupon,
html body .wc-block-components-totals-coupon,
html body .wp-block-woocommerce-cart-order-summary-coupon-form-block,
html body .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
html body .wp-block-woocommerce-cart-order-summary-discount-block,
html body .wp-block-woocommerce-checkout-order-summary-discount-block,
html body .wc-block-components-panel.wc-block-components-totals-coupon,
html body td.actions .coupon,
html body .woocommerce-cart-form td.actions > .coupon,
html body input#coupon_code,
html body button[name="apply_coupon"] { display: none !important; }

/* ---- Cart page table — widen product column, prevent cramped wrap ---- */
html body.woocommerce-cart .shop_table.cart {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
html body.woocommerce-cart .shop_table.cart thead {
  background: transparent !important;
}
html body.woocommerce-cart .shop_table.cart thead th {
  font-family: 'Oxanium', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wm-fg-3) !important;
  padding: 18px 16px !important;
  border-bottom: 1px solid var(--wm-line) !important;
}
html body.woocommerce-cart .shop_table.cart tbody td {
  padding: 22px 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--wm-line) !important;
  background: transparent !important;
  color: var(--wm-fg) !important;
}
html body.woocommerce-cart .shop_table.cart .product-thumbnail {
  width: 110px !important;
}
html body.woocommerce-cart .shop_table.cart .product-thumbnail img {
  width: 92px !important; height: 92px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid var(--wm-line) !important;
}
html body.woocommerce-cart .shop_table.cart .product-name {
  width: auto !important;
  min-width: 320px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
html body.woocommerce-cart .shop_table.cart .product-name a {
  font-family: 'Oxanium', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
}
html body.woocommerce-cart .shop_table.cart .product-name dl.variation {
  margin-top: 8px !important;
  font-size: 13px !important;
  color: var(--wm-fg-3) !important;
}
html body.woocommerce-cart .shop_table.cart .product-name dl.variation {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 8px !important;
  margin-top: 8px !important;
}
html body.woocommerce-cart .shop_table.cart .product-name dl.variation dt {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--wm-fg-3) !important;
  font-weight: 500 !important;
}
html body.woocommerce-cart .shop_table.cart .product-name dl.variation dd {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #fff !important;
}
html body.woocommerce-cart .shop_table.cart .product-name dl.variation dd p {
  display: inline !important;
  margin: 0 !important;
  color: #fff !important;
}
/* Rey inserts <span class="__break"> between attribute pairs — force it
   to be a full-width line break so each dt+dd row stacks properly. */
html body.woocommerce-cart .shop_table.cart .product-name dl.variation .__break {
  display: block !important;
  flex-basis: 100% !important;
  width: 100% !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Keep Rey's default remove styling; only kill the hover/focus glow + animation */

/* ---- WooCommerce quantity input → match homepage .wm-qty look ---- */
/* When Rey wraps the input in its own .rey-qtyField pill, the outer
   .quantity must stay bare — otherwise it produces a double-bordered shell. */
html body .woocommerce .quantity,
html body.woocommerce-cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: auto !important;
}
/* Apply the pill ONLY when there's no inner Rey pill */
html body .woocommerce .quantity:not(:has(.rey-qtyField)),
html body .wc-block-components-quantity-selector {
  gap: 2px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--wm-line) !important;
  border-radius: 12px !important;
  padding: 4px !important;
}
html body .woocommerce .quantity input.qty,
html body.woocommerce-cart .quantity input.qty,
html body .wc-block-components-quantity-selector input {
  width: 44px !important;
  height: 36px !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: #fff !important;
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 15px !important;
  -moz-appearance: textfield !important;
  box-shadow: none !important;
}
html body .woocommerce .quantity input.qty::-webkit-inner-spin-button,
html body .woocommerce .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none !important; margin: 0 !important;
}
/* Plus / minus buttons (Rey + WC Blocks both add ± buttons) */
html body .woocommerce .quantity .minus,
html body .woocommerce .quantity .plus,
html body .quantity-button.minus,
html body .quantity-button.plus,
html body .wc-block-components-quantity-selector__button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--wm-fg-2) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 200ms, color 200ms !important;
}
html body .woocommerce .quantity .minus:hover,
html body .woocommerce .quantity .plus:hover,
html body .quantity-button.minus:hover,
html body .quantity-button.plus:hover,
html body .wc-block-components-quantity-selector__button:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

/* ---- Cart totals card on the right ---- */
html body.woocommerce-cart .cart-collaterals .cart_totals {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--wm-line) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}
html body.woocommerce-cart .cart-collaterals .cart_totals h2 {
  font-family: 'Oxanium', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wm-fg-3) !important;
  margin: 0 0 16px !important;
}
html body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
html body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wm-line) !important;
  padding: 14px 0 !important;
  color: #fff !important;
}
html body.woocommerce-cart .cart-collaterals .cart_totals .order-total .amount {
  font-size: 22px !important;
  font-weight: 700 !important;
}
/* Right-align the Proceed to Checkout button inside the totals card */
html body.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 18px 0 0 !important;
  margin: 0 !important;
}
html body.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
  margin: 0 !important;
}

/* Cart-page Rey qty pill — give it real breathing room so it isn't squished.
   The squeeze comes from .rey-qtyField using too little padding/min-width. */
html body.woocommerce-cart .product-quantity .rey-qtyField,
html body.woocommerce-cart .product-quantity .quantity .rey-qtyField,
html body .rey-qtyField {
  min-width: 110px !important;
  padding: 3px 4px !important;
  gap: 2px !important;
  justify-content: space-between !important;
}
html body.woocommerce-cart .product-quantity .rey-qtyField input,
html body .rey-qtyField input.qty,
html body .rey-qtyField input.input-text {
  width: 44px !important;
  min-width: 44px !important;
  height: 32px !important;
  font-size: 15px !important;
  text-align: center !important;
  padding: 0 !important;
}
html body.woocommerce-cart .product-quantity .cartBtnQty-control,
html body .cartBtnQty-control {
  width: 30px !important;
  height: 30px !important;
}

/* ============================================================
   Mini-cart popup — items, quantities and footer buttons
   ============================================================ */
html body .wc-block-mini-cart__contents,
html body .wp-block-woocommerce-mini-cart-contents {
  background: var(--wm-bg-1) !important;
  color: var(--wm-fg) !important;
}
html body .wc-block-mini-cart__title {
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}
html body .wc-block-cart-items__row,
html body .wc-block-mini-cart-items__row,
html body .wc-block-cart-item__product,
html body .wc-block-cart-item__wrap {
  border-bottom: 1px solid var(--wm-line) !important;
}
html body .wc-block-components-product-name,
html body .wc-block-components-product-metadata__description,
html body .wc-block-mini-cart-items .wc-block-components-product-name,
html body .wc-block-mini-cart-items a.wc-block-components-product-name,
html body .wc-block-cart-item__product .wc-block-components-product-name,
html body .wc-block-mini-cart .wc-block-components-product-name,
html body .wc-block-mini-cart .wc-block-components-product-name a,
html body .wc-block-cart-items .wc-block-components-product-name,
html body .wc-block-cart-items .wc-block-components-product-name a {
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #fff !important;
  text-decoration: none !important;
}
html body .wc-block-components-product-price,
html body .wc-block-components-product-metadata__description {
  color: var(--wm-fg-2) !important;
}

/* ==== Rey theme native mini-cart buttons (.btn / .btn-primary / .btn-secondary) ==== */
/* Shared pill geometry for both buttons */
html body .woocommerce-mini-cart__buttons .btn,
html body .woocommerce-mini-cart__buttons a.btn,
html body .woocommerce-mini-cart__buttons a.checkout,
html body .woocommerce-mini-cart__buttons a.button--cart,
html body .woocommerce-mini-cart__buttons a.wc-forward,
html body .widget_shopping_cart .buttons .btn,
html body .widget_shopping_cart_content .buttons .btn,
html body .rey-miniCart .buttons .btn,
html body .rey-miniCart__buttons .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 26px !important;
  border-radius: 14px !important;
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(90deg, #00216A 0%, #151744 100%) !important;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3) !important;
  position: relative !important;
  z-index: 1;
  isolation: isolate;
  overflow: visible !important;
  transition:
    transform 220ms var(--wm-ease),
    box-shadow 280ms var(--wm-ease),
    filter 220ms var(--wm-ease) !important;
}
html body .woocommerce-mini-cart__buttons .btn:hover,
html body .woocommerce-mini-cart__buttons a.btn:hover,
html body .woocommerce-mini-cart__buttons .btn-primary:hover,
html body .woocommerce-mini-cart__buttons .btn-secondary:hover,
html body .woocommerce-mini-cart__buttons a.checkout:hover,
html body .woocommerce-mini-cart__buttons a.button--cart:hover,
html body .woocommerce-mini-cart__buttons a.wc-forward:hover,
html body .widget_shopping_cart .buttons .btn:hover,
html body .rey-miniCart .buttons .btn:hover,
html body .rey-miniCart__buttons .btn:hover {
  color: #fff !important;
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.5) !important;
}
/* Halo + sweep pseudo-elements */
html body .woocommerce-mini-cart__buttons .btn::before,
html body .widget_shopping_cart .buttons .btn::before,
html body .rey-miniCart__buttons .btn::before {
  content: '';
  position: absolute; inset: -10px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 110% at 50% 60%, rgba(255,255,255,0.55), rgba(255,255,255,0.25) 45%, transparent 75%);
  filter: blur(14px);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 280ms var(--wm-ease), inset 280ms var(--wm-ease);
}
html body .woocommerce-mini-cart__buttons .btn::after,
html body .widget_shopping_cart .buttons .btn::after,
html body .rey-miniCart__buttons .btn::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,0.22) 50%, transparent 72%);
  background-size: 220% 100%;
  background-position: -50% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--wm-ease), background-position 900ms var(--wm-ease);
}
html body .woocommerce-mini-cart__buttons .btn:hover::before,
html body .widget_shopping_cart .buttons .btn:hover::before,
html body .rey-miniCart__buttons .btn:hover::before { opacity: 1; inset: -14px; }
html body .woocommerce-mini-cart__buttons .btn:hover::after,
html body .widget_shopping_cart .buttons .btn:hover::after,
html body .rey-miniCart__buttons .btn:hover::after { opacity: 1; background-position: 150% 0; }
/* Lay both buttons out in a single row, equal width, halo not clipped */
html body .woocommerce-mini-cart__buttons,
html body .woocommerce-mini-cart__buttons.buttons,
html body .widget_shopping_cart .buttons,
html body .rey-miniCart .buttons,
html body .rey-miniCart__buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 16px 0 4px !important;
  overflow: visible !important;
}
html body .woocommerce-mini-cart__buttons > .btn,
html body .widget_shopping_cart .buttons > .btn,
html body .rey-miniCart__buttons > .btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 18px !important;
  font-size: 14px !important;
}
/* The arrow inside the Checkout link */
html body .woocommerce-mini-cart__buttons .rey-arrowSvg svg,
html body .woocommerce-mini-cart__buttons .rey-arrowSvg { color: #fff !important; }

/* ==== Rey multi-step checkout footer ==== */
html body .__step-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding-top: 16px !important;
  overflow: visible !important;
}
/* Forward button — gradient pill */
html body .__step-footer .btn.__step-fwd,
html body .__step-footer a.btn-primary,
html body .__step-footer .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 26px !important;
  border-radius: 14px !important;
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(90deg, #00216A 0%, #151744 100%) !important;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3) !important;
  position: relative !important;
  z-index: 1;
  isolation: isolate;
  overflow: visible !important;
  transition:
    transform 220ms var(--wm-ease),
    box-shadow 280ms var(--wm-ease),
    filter 220ms var(--wm-ease) !important;
}
html body .__step-footer .btn.__step-fwd:hover,
html body .__step-footer a.btn-primary:hover {
  color: #fff !important;
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.5) !important;
}
html body .__step-footer .btn.__step-fwd::before,
html body .__step-footer .btn-primary::before {
  content: '';
  position: absolute; inset: -10px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 110% at 50% 60%, rgba(255,255,255,0.55), rgba(255,255,255,0.25) 45%, transparent 75%);
  filter: blur(14px);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 280ms var(--wm-ease), inset 280ms var(--wm-ease);
}
html body .__step-footer .btn.__step-fwd::after,
html body .__step-footer .btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,0.22) 50%, transparent 72%);
  background-size: 220% 100%;
  background-position: -50% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--wm-ease), background-position 900ms var(--wm-ease);
}
html body .__step-footer .btn.__step-fwd:hover::before,
html body .__step-footer .btn-primary:hover::before { opacity: 1; inset: -14px; }
html body .__step-footer .btn.__step-fwd:hover::after,
html body .__step-footer .btn-primary:hover::after { opacity: 1; background-position: 150% 0; }

/* Back button — ghost pill */
html body .__step-footer .btn.__step-back,
html body .__step-footer a.btn-line,
html body .__step-footer .btn-line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--wm-fg) !important;
  box-shadow: none !important;
  filter: none !important;
  transition: background 220ms var(--wm-ease), border-color 220ms var(--wm-ease) !important;
}
html body .__step-footer .btn.__step-back:hover,
html body .__step-footer a.btn-line:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
html body .__step-footer .btn .rey-icon-arrow,
html body .__step-footer .btn svg { color: currentColor !important; }

/* "View cart" stays a ghost/gray pill — strip the gradient + halo */
html body .woocommerce-mini-cart__buttons .btn-secondary,
html body .woocommerce-mini-cart__buttons a.button--cart,
html body .widget_shopping_cart .buttons .btn-secondary,
html body .rey-miniCart__buttons .btn-secondary {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
  color: var(--wm-fg) !important;
  filter: none !important;
}
html body .woocommerce-mini-cart__buttons .btn-secondary::before,
html body .woocommerce-mini-cart__buttons .btn-secondary::after,
html body .woocommerce-mini-cart__buttons a.button--cart::before,
html body .woocommerce-mini-cart__buttons a.button--cart::after,
html body .widget_shopping_cart .buttons .btn-secondary::before,
html body .widget_shopping_cart .buttons .btn-secondary::after,
html body .rey-miniCart__buttons .btn-secondary::before,
html body .rey-miniCart__buttons .btn-secondary::after { display: none !important; }
html body .woocommerce-mini-cart__buttons .btn-secondary:hover,
html body .woocommerce-mini-cart__buttons a.button--cart:hover,
html body .widget_shopping_cart .buttons .btn-secondary:hover,
html body .rey-miniCart__buttons .btn-secondary:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ==== Rey theme native mini-cart (rey-qtyField / cartBtnQty) ==== */
/* Wrapper pill */
html body .rey-qtyField,
html body .rey-qtyField.cartBtnQty-controls,
html body .quantity .rey-qtyField {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--wm-line) !important;
  border-radius: 12px !important;
  padding: 3px !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  position: relative !important;
}
/* Strip the input border/outline/background */
html body .rey-qtyField input.qty,
html body .rey-qtyField input.input-text,
html body .rey-qtyField input[type="text"],
html body .rey-qtyField input[type="number"],
html body .quantity .rey-qtyField input {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  color: #fff !important;
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums !important;
}
html body .rey-qtyField input:focus { outline: 0 !important; box-shadow: none !important; border: 0 !important; }
/* +/- buttons */
html body .cartBtnQty-control,
html body .rey-qtyField .cartBtnQty-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--wm-fg-2) !important;
  cursor: pointer !important;
  transition: background 200ms, color 200ms !important;
}
html body .cartBtnQty-control:hover,
html body .rey-qtyField .cartBtnQty-control:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
html body .cartBtnQty-control svg { width: 14px !important; height: 14px !important; }

/* Hide the screen-reader label so it doesn't steal layout space */
html body .rey-qtyField .screen-reader-text {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Rey mini-cart container — force white text on product names */
html body .rey-miniCart,
html body .rey-miniCart *,
html body .rey-sideCart,
html body .rey-sideCart *,
html body [class*="rey-miniCart"] [class*="product"] a,
html body [class*="rey-miniCart"] .product-name,
html body [class*="rey-miniCart"] .product-name a,
html body [class*="rey-miniCart"] li.mini_cart_item a,
html body [class*="rey-miniCart"] .cart_item a,
html body .widget_shopping_cart .cart_list a,
html body .widget_shopping_cart_content .cart_list a,
html body .woocommerce-mini-cart a {
  color: #fff !important;
  text-decoration: none !important;
}
/* Variation / meta lines under the title */
html body .rey-miniCart .variation,
html body .rey-miniCart .variation *,
html body .rey-miniCart small,
html body .widget_shopping_cart .variation,
html body .woocommerce-mini-cart .variation {
  color: var(--wm-fg-3) !important;
}

/* ==== Catch-all mini-cart targeting (any WC Blocks version) ==== */
/* Strip every internal border on inputs/buttons inside any mini-cart-ish drawer */
html body [class*="mini-cart"] input,
html body [class*="mini-cart"] button,
html body [class*="mini-cart"] [class*="quantity-selector"],
html body [class*="mini-cart"] [class*="quantity-selector"] *,
html body [class*="mini-cart"] [class*="QuantitySelector"] *,
html body [class*="cart-item"] [class*="quantity-selector"] *,
html body [class*="MiniCart"] input,
html body [class*="MiniCart"] button,
html body .wc-block-components-drawer [class*="quantity-selector"] * {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
/* Re-apply our pill wrapper to the qty-selector container only */
html body [class*="mini-cart"] [class*="quantity-selector"]:not([class*="__button"]):not([class*="__input"]),
html body [class*="cart-item"] [class*="quantity-selector"]:not([class*="__button"]):not([class*="__input"]),
html body .wc-block-components-drawer [class*="quantity-selector"]:not([class*="__button"]):not([class*="__input"]) {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--wm-line) !important;
  border-radius: 12px !important;
  padding: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}
/* Force every product-name link in any mini-cart variant to white */
html body [class*="mini-cart"] [class*="product-name"],
html body [class*="mini-cart"] [class*="product-name"] *,
html body [class*="mini-cart"] [class*="ProductName"],
html body [class*="mini-cart"] [class*="ProductName"] *,
html body [class*="cart-item"] [class*="product-name"],
html body [class*="cart-item"] [class*="product-name"] *,
html body .wc-block-components-drawer [class*="product-name"],
html body .wc-block-components-drawer [class*="product-name"] *,
html body .wc-block-components-drawer a {
  color: #fff !important;
  text-decoration: none !important;
}

/* ==== Mini-cart fundamental reset ==== */
/* Strip every internal border/outline/box-shadow on every element inside the
   WC Blocks mini-cart, then re-apply our look on the wrapper only. This is
   the "fundamental" override the rest of the file relies on. */
html body .wc-block-mini-cart__contents *,
html body .wp-block-woocommerce-mini-cart-contents *,
html body .wc-block-mini-cart-items *,
html body .wc-block-mini-cart__footer * {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Force every text node in the mini-cart to white unless re-coloured below */
html body .wc-block-mini-cart__contents,
html body .wc-block-mini-cart__contents *,
html body .wp-block-woocommerce-mini-cart-contents,
html body .wp-block-woocommerce-mini-cart-contents *,
html body .wc-block-mini-cart-items,
html body .wc-block-mini-cart-items * {
  color: #fff !important;
}
/* Subtler colour for secondary text (variation, price strikethrough, totals subtitle) */
html body .wc-block-mini-cart__contents .wc-block-components-product-metadata__description,
html body .wc-block-mini-cart__contents .wc-block-components-product-details,
html body .wc-block-mini-cart__contents del,
html body .wc-block-mini-cart__contents .wc-block-components-product-price del,
html body .wc-block-mini-cart__contents small {
  color: var(--wm-fg-3) !important;
}

/* Mini-cart qty selector — single soft pill, no inner border on input */
html body .wc-block-mini-cart .wc-block-components-quantity-selector,
html body .wc-block-mini-cart-items .wc-block-components-quantity-selector,
html body .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--wm-line) !important;
  border-radius: 12px !important;
  padding: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Kill the inner border / outline that WC Blocks paints around the input */
html body .wc-block-mini-cart .wc-block-components-quantity-selector input,
html body .wc-block-mini-cart-items .wc-block-components-quantity-selector input,
html body .wc-block-cart-item__quantity .wc-block-components-quantity-selector input,
html body .wc-block-mini-cart .wc-block-components-quantity-selector__input,
html body .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 30px !important;
  padding: 0 !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}
html body .wc-block-mini-cart .wc-block-components-quantity-selector input:focus,
html body .wc-block-mini-cart-items .wc-block-components-quantity-selector input:focus,
html body .wc-block-cart-item__quantity .wc-block-components-quantity-selector input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
html body .wc-block-mini-cart .wc-block-components-quantity-selector__button,
html body .wc-block-mini-cart-items .wc-block-components-quantity-selector__button,
html body .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--wm-fg-2) !important;
  cursor: pointer !important;
}
html body .wc-block-mini-cart .wc-block-components-quantity-selector__button:hover,
html body .wc-block-mini-cart-items .wc-block-components-quantity-selector__button:hover,
html body .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
/* Some block themes wrap each button in a divider — flatten it */
html body .wc-block-components-quantity-selector::before,
html body .wc-block-components-quantity-selector::after { display: none !important; }
html body .wc-block-components-quantity-selector > * + * { border-left: 0 !important; }

/* Mini-cart footer — give the buttons breathing room and remove any
   overflow-hidden that would clip the gradient halo. */
html body .wc-block-mini-cart__footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 20px 24px 24px !important;
  background: var(--wm-bg-1) !important;
  border-top: 1px solid var(--wm-line) !important;
  overflow: visible !important;
}
html body .wc-block-mini-cart__footer-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
}
html body .wc-block-mini-cart__footer-totals {
  display: flex !important; justify-content: space-between !important;
  font-family: 'Oxanium', sans-serif !important;
  color: var(--wm-fg-2) !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
html body .wc-block-mini-cart__footer-totals .wc-block-components-totals-item__value {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* ============================================================
   Final overrides for Rey cart page (.rey-cartPage-inner /
   .woocommerce-cart-form). Loaded last so they win on equal
   specificity against any earlier rule.
   ============================================================ */

/* Center-align the quantity input no matter what — Rey's input
   has classes input-text qty text --select-text. */
html body .rey-cartPage-inner .rey-qtyField input,
html body .woocommerce-cart-form .rey-qtyField input,
html body .rey-qtyField > input,
html body .rey-qtyField input[name*="qty"],
html body .product-quantity .rey-qtyField input,
html body .quantity .rey-qtyField input {
  text-align: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: inline-block !important;
}

/* "Remove" link — small, dim, no hover state. Hide the "Remove" word
   (the inline span) so only a tiny × icon shows. */
html body a.remove,
html body a.remove *,
html body a.remove:hover,
html body a.remove:hover *,
html body a.remove:focus,
html body a.remove:focus *,
html body a.remove:active,
html body a.remove:active *,
html body tr:hover a.remove,
html body tr:hover a.remove * {
  color: var(--wm-fg-4) !important;
  fill: var(--wm-fg-4) !important;
  stroke: var(--wm-fg-4) !important;
  opacity: 1 !important;
  background: transparent !important;
  text-decoration: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
}
html body a.remove {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
  font-size: 0 !important;            /* hides any inline whitespace */
  line-height: 1 !important;
}
html body a.remove svg,
html body a.remove .rey-icon-close {
  width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
}
html body a.remove span { display: none !important; }

/* ============================
   SINGLE PRODUCT PAGE LAYOUT
   - constrain width to 1280px
   - 80px top padding
   ============================ */
html body.single-product .rey-siteContainer {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 80px !important;
}
html body.single-product main#main.rey-siteMain {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================
   ARCHIVE PAGES LAYOUT
   - shop, product categories/tags, blog archives
   - constrain width to 1280px
   - 80px top padding
   ============================ */
html body.archive .rey-siteContainer,
html body.post-type-archive-product .rey-siteContainer,
html body.woocommerce-shop .rey-siteContainer {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 80px !important;
}
html body.archive main#main.rey-siteMain,
html body.post-type-archive-product main#main.rey-siteMain,
html body.woocommerce-shop main#main.rey-siteMain {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Hide reviews + additional info (specs) panels on single product pages */
html body.single-product .rey-wcPanel--reviews,
html body.single-product .rey-wcPanel--additional_information,
html body.single-product #toggle-reviews-button,
html body.single-product .rey-reviewsBtn,
html body.single-product #reviews,
html body.single-product .woocommerce-Tabs-panel--additional_information,
html body.single-product .woocommerce-Tabs-panel--reviews {
  display: none !important;
}

/* Replace WC default variation form / quantity / atc with our picker */
html body.single-product form.cart.variations_form,
html body.single-product .summary > form.cart {
  display: none !important;
}

/* Single-product picker — one column layout, reuses .wm-pack/.wm-swatch/.wm-qty */
html body.single-product .wm-product--single {
  display: block;
  margin: 24px 0 0;
}
html body.single-product .wm-product--single .wm-product__info {
  display: block;
  max-width: 100%;
}
html body.single-product .wm-product--single .wm-quantity-row {
  margin: 22px 0 24px;
}

/* Override Rey's fullscreen product skin so the page sits inside 1280px,
   centered, instead of spanning the full viewport (which makes the layout
   look "shifted" on large screens). */
html body.single-product.single-skin--fullscreen .rey-siteContent,
html body.single-product .pdp--fullscreen,
html body.single-product .rey-productSummary {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  float: none !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}
html body.single-product .pdp--fullscreen .woocommerce-product-gallery,
html body.single-product .pdp--fullscreen .summary,
html body.single-product .pdp--fullscreen .entry-summary {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
}
html body.single-product .pdp--fullscreen .rey-productSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding: 0 24px;
}
@media (max-width: 840px) {
  html body.single-product .pdp--fullscreen .rey-productSummary {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================
   ARCHIVE PRODUCT CARDS
   - white titles
   - low-key quickview (no gradient)
   - footer items (price, atc, quickview, wishlist) on one row
   ============================ */
html body.archive .woocommerce-loop-product__title,
html body.archive .woocommerce-loop-product__title a,
html body.post-type-archive-product .woocommerce-loop-product__title,
html body.post-type-archive-product .woocommerce-loop-product__title a,
html body.woocommerce-shop .woocommerce-loop-product__title,
html body.woocommerce-shop .woocommerce-loop-product__title a,
html body.tax-product_cat .woocommerce-loop-product__title,
html body.tax-product_cat .woocommerce-loop-product__title a,
html body.tax-product_tag .woocommerce-loop-product__title,
html body.tax-product_tag .woocommerce-loop-product__title a {
  color: #fff !important;
}

html body .rey-productLoop-footer {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
html body .rey-productLoop-footer .__break { display: none !important; }
html body .rey-productLoop-footer .rey-loopPrice { margin-right: auto; }
html body .rey-productLoop-footer .rey-productFooter-item { flex: 0 0 auto; }

/* Quickview button — strip gradient, match ghost/low-key style */
html body .rey-productFooter-item--quickview button.rey-quickviewBtn,
html body .rey-productFooter-item--quickview .rey-quickviewBtn.button,
html body.woocommerce .rey-productFooter-item--quickview button.button.rey-quickviewBtn,
html body.woocommerce-page .rey-productFooter-item--quickview button.button.rey-quickviewBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transition: background 200ms var(--wm-ease), color 200ms var(--wm-ease), border-color 200ms var(--wm-ease) !important;
}
html body .rey-productFooter-item--quickview button.rey-quickviewBtn::before,
html body .rey-productFooter-item--quickview button.rey-quickviewBtn::after,
html body .rey-productFooter-item--quickview .rey-quickviewBtn.button::before,
html body .rey-productFooter-item--quickview .rey-quickviewBtn.button::after {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
html body .rey-productFooter-item--quickview button.rey-quickviewBtn:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}

/* Remove Rey's underline (rey-btn--under) on the archive "Select options"
   add-to-cart link — the global gradient pill already provides enough emphasis. */
html body .rey-productFooter-item--addtocart a.add_to_cart_button.rey-btn--under,
html body .rey-productFooter-item--addtocart a.button.rey-btn--under,
html body.woocommerce .rey-productFooter-item--addtocart a.button.rey-btn--under {
  text-decoration: none !important;
}
html body .rey-productFooter-item--addtocart a.rey-btn--under::before,
html body .rey-productFooter-item--addtocart a.rey-btn--under::after,
html body .rey-productFooter-item--addtocart a.rey-btn--under .__text::before,
html body .rey-productFooter-item--addtocart a.rey-btn--under .__text::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border-bottom: 0 !important;
}
html body .rey-productFooter-item--addtocart a.rey-btn--under .__text {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ============================================================
   FLAT BUTTON OVERRIDE — kill every halo / sheen / bevel
   pseudo-element on gradient buttons so they render as a clean
   flat pill with a centered blue glow only. Background and
   box-shadow values are already simplified in the rules above.
   ============================================================ */
html body .wm-btn--primary::before, html body .wm-btn--primary::after,
html body .wm-btn--glow::before,    html body .wm-btn--glow::after,
html body .wm-btn--cart::before,    html body .wm-btn--cart::after,
html body .woocommerce a.button::before,           html body .woocommerce a.button::after,
html body .woocommerce button.button::before,      html body .woocommerce button.button::after,
html body .woocommerce input.button::before,       html body .woocommerce input.button::after,
html body .woocommerce input[type="submit"].button::before, html body .woocommerce input[type="submit"].button::after,
html body .woocommerce a.button.alt::before,       html body .woocommerce a.button.alt::after,
html body .woocommerce button.button.alt::before,  html body .woocommerce button.button.alt::after,
html body .woocommerce input.button.alt::before,   html body .woocommerce input.button.alt::after,
html body .woocommerce-page a.button::before,      html body .woocommerce-page a.button::after,
html body .woocommerce-page button.button::before, html body .woocommerce-page button.button::after,
html body .woocommerce-page input.button::before,  html body .woocommerce-page input.button::after,
html body .woocommerce-page input[type="submit"].button::before, html body .woocommerce-page input[type="submit"].button::after,
html body .woocommerce-page a.button.alt::before,  html body .woocommerce-page a.button.alt::after,
html body .woocommerce-page button.button.alt::before, html body .woocommerce-page button.button.alt::after,
html body .woocommerce-page input.button.alt::before,  html body .woocommerce-page input.button.alt::after,
html body .woocommerce #respond input#submit::before,  html body .woocommerce #respond input#submit::after,
html body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button::before,
html body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after,
html body .woocommerce-cart a.checkout-button::before, html body .woocommerce-cart a.checkout-button::after,
html body .woocommerce-checkout #payment #place_order::before, html body .woocommerce-checkout #payment #place_order::after,
html body .woocommerce-checkout button#place_order::before, html body .woocommerce-checkout button#place_order::after,
html body .woocommerce .single_add_to_cart_button::before, html body .woocommerce .single_add_to_cart_button::after,
html body .woocommerce button.single_add_to_cart_button::before, html body .woocommerce button.single_add_to_cart_button::after,
html body .woocommerce .added_to_cart::before, html body .woocommerce .added_to_cart::after,
html body .wc-block-components-button.contained::before, html body .wc-block-components-button.contained::after,
html body .wc-block-components-button.wc-block-components-button::before, html body .wc-block-components-button.wc-block-components-button::after,
html body .wc-block-cart__submit-button::before, html body .wc-block-cart__submit-button::after,
html body .wc-block-components-checkout-place-order-button::before, html body .wc-block-components-checkout-place-order-button::after,
html body .wc-block-mini-cart__footer-checkout::before, html body .wc-block-mini-cart__footer-checkout::after,
html body .wc-block-mini-cart__footer-cart::before, html body .wc-block-mini-cart__footer-cart::after,
html body .rey-miniCart a.button::before, html body .rey-miniCart a.button::after,
html body .rey-miniCart .button::before,  html body .rey-miniCart .button::after,
html body .rey-miniCart .checkout::before, html body .rey-miniCart .checkout::after,
html body .rey-cartTable a.button::before, html body .rey-cartTable a.button::after,
html body .rey-checkout a.button::before, html body .rey-checkout a.button::after,
html body .rey-checkout button.button::before, html body .rey-checkout button.button::after,
html body .woocommerce-mini-cart__buttons .btn::before, html body .woocommerce-mini-cart__buttons .btn::after,
html body .widget_shopping_cart .buttons .btn::before, html body .widget_shopping_cart .buttons .btn::after,
html body .rey-miniCart__buttons .btn::before, html body .rey-miniCart__buttons .btn::after,
html body .__step-footer .btn.__step-fwd::before, html body .__step-footer .btn.__step-fwd::after,
html body .__step-footer .btn-primary::before, html body .__step-footer .btn-primary::after,
html body .__step-footer a.btn-primary::before, html body .__step-footer a.btn-primary::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* ============================================================
   CHECKOUT — Recolor only Rey's collapsed "Show order summary"
   toggle bar to a deep near-black blue. The expanded inner panel
   keeps its original theme styling.
   ============================================================ */
html body .rey-checkoutPage-review-toggle {
  background: #05091c !important;
  background-color: #05091c !important;
  color: #fff !important;
}
html body .rey-checkoutPage-review-toggle .__title,
html body .rey-checkoutPage-review-toggle .__title-text,
html body .rey-checkoutPage-review-toggle .__title-cart-icon,
html body .rey-checkoutPage-review-toggle .__title-arrow-icon,
html body .rey-checkoutPage-review-toggle .__total,
html body .rey-checkoutPage-review-toggle .__total *,
html body #rey-checkoutPage-review-toggle__total,
html body #rey-checkoutPage-review-toggle__total * {
  color: #fff !important;
  fill: #fff !important;
}

/* ============================================================
   CHECKOUT — Keep Return-to-cart + Continue-to-shipping buttons
   on the same horizontal row instead of stacking. The back button
   collapses to just a left-arrow icon, the forward button takes
   the remaining width.
   ============================================================ */
html body .__step-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
}
/* Forward button stretches to fill the remaining row */
html body .__step-footer .btn.__step-fwd,
html body .__step-footer a.btn-primary,
html body .__step-footer .btn-primary {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
/* Back button shrinks to an icon-only pill */
html body .__step-footer .btn.__step-back,
html body .__step-footer a.btn-line,
html body .__step-footer .btn-line {
  flex: 0 0 auto !important;
  width: 52px !important;
  min-width: 52px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}
/* Hide every text node inside the back button — only the arrow icon stays */
html body .__step-footer .btn.__step-back > *:not(svg):not(.rey-icon-arrow):not(i),
html body .__step-footer a.btn-line > *:not(svg):not(.rey-icon-arrow):not(i),
html body .__step-footer .btn-line > *:not(svg):not(.rey-icon-arrow):not(i) {
  display: none !important;
}
html body .__step-footer .btn.__step-back {
  font-size: 0 !important;
  line-height: 0 !important;
}
html body .__step-footer .btn.__step-back svg,
html body .__step-footer .btn.__step-back .rey-icon-arrow,
html body .__step-footer a.btn-line svg,
html body .__step-footer a.btn-line .rey-icon-arrow {
  font-size: 16px !important;
  line-height: 1 !important;
  width: 16px !important;
  height: 16px !important;
}