.elementor-kit-35{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-35 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ---------- 1. LOAD BRAND FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ---------- 2. BRAND VARIABLES ---------- */
:root{
  --void:#08080C;
  --obsidian:#111118;
  --surface:#16161F;
  --surface2:#1C1C28;
  --rim:#23232F;
  --text-dim:#6B6B88;
  --text-body:#B8B8CC;
  --text-bright:#EEEEF5;
  --plasma:#7B5CFA;
  --plasma-light:#A48FFF;
  --plasma-glow:rgba(123,92,250,0.14);
  --acid:#C4F135;
  --acid-dim:rgba(196,241,53,0.09);
  --ice:#35D4FF;
  --signal:#FF6B35;
}

/* ---------- 3. GLOBAL DARK BACKGROUND + FONTS ---------- */
body,
.elementor-page,
.site,
#content,
.ast-separate-container {
  background-color: var(--void) !important;
  color: var(--text-body);
  font-family: 'Space Grotesk', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}

/* Force full width — kills Astra sidebar squeeze (your earlier issue) */
#primary, .content-area, #content, .site-content,
.ast-container > .ast-row > [class*="span"] {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
#secondary, .widget-area, .sidebar-main { display: none !important; }
.ast-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- 4. HERO SECTION GRID BACKGROUND ---------- */
/* FIXED: single flat dark-purple base (no gradient banding), and a
   full-section glow centered behind the headline so the "Reach Your
   Pryme" text blends smoothly into the purple instead of sitting on
   a darker band. */
.pryme-hero-section {
  position: relative;
  overflow: hidden;
  background: #0A0814 !important;
}
.pryme-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(123,92,250,0.16) 0%, transparent 75%);
  pointer-events: none;
}
.pryme-hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(123,92,250,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,92,250,0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.pryme-hero-section .elementor-container { position: relative; z-index: 1; }

/* Make sure the hero heading + all hero widgets have NO background
   of their own (prevents any dark box behind the text) */
.pryme-hero-section .elementor-widget,
.pryme-hero-section .elementor-column,
.pryme-hero-section .elementor-widget-container,
.pryme-hero-section .elementor-heading-title {
  background: transparent !important;
}

/* ---------- 5. TRUST ROW ---------- */
.pryme-trust-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pryme-trust-row span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
}

/* ---------- 6. FILTER CHIPS ---------- */
.pryme-filter-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pryme-chip {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  color: var(--text-dim) !important;
  background: transparent;
  text-decoration: none !important;
  transition: all 0.2s;
}
.pryme-chip:hover {
  border-color: var(--plasma-light);
  color: var(--text-bright) !important;
}
.pryme-chip.active {
  background: var(--plasma);
  color: #fff !important;
  border-color: var(--plasma);
}

/* ---------- 7. WOOCOMMERCE PRODUCT GRID (match mockup cards) ---------- */
.pryme-products ul.products li.product,
.woocommerce ul.products li.product {
  background-color: var(--surface) !important;
  border: 1px solid var(--rim) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  overflow: hidden !important;
  transition: transform 0.25s, border-color 0.25s !important;
  text-align: left !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(123,92,250,0.4) !important;
}
.woocommerce ul.products li.product a img {
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  background: linear-gradient(135deg, #1A0B3B, #0D0D1A);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text-bright) !important;
  font-size: 18px !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product .price {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--acid) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
.woocommerce ul.products li.product .price del { color: var(--text-dim) !important; }

/* product category subtitle (if shown) */
.woocommerce ul.products li.product .pryme-cat,
.woocommerce ul.products li.product .posted_in {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  color: var(--text-dim) !important;
  letter-spacing: 0.1em !important;
}

/* ---------- 8. ADD TO CART BUTTONS ---------- */
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.elementor-button {
  background-color: var(--plasma) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 9px 16px !important;
  transition: background-color 0.2s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: #8F73FF !important;
}

/* ---------- 9. SALE / FEATURED BADGES ---------- */
.woocommerce span.onsale {
  background-color: var(--acid) !important;
  color: #0A0A14 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
}

/* ---------- 10. NAV / HEADER ---------- */
.ast-primary-header, .site-header, #masthead {
  background-color: rgba(8,8,12,0.85) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rim);
}
.main-header-menu .menu-item a {
  color: var(--text-dim) !important;
  font-size: 13px;
  font-family: 'Space Grotesk', sans-serif;
}
.main-header-menu .menu-item a:hover { color: var(--text-bright) !important; }
.site-title a {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text-bright) !important;
}

/* ---------- 11. FOOTER ---------- */
.site-footer, #colophon {
  background-color: var(--obsidian) !important;
  border-top: 1px solid var(--rim) !important;
}
.site-footer a, #colophon a { color: var(--text-dim) !important; }
.site-footer a:hover { color: var(--text-bright) !important; }

/* ---------- 12. LINKS ---------- */
a { color: var(--plasma-light); }
a:hover { color: var(--acid); }

/* ---------- 13. MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
  .pryme-trust-row { gap: 14px; }
  .woocommerce ul.products li.product { width: 100% !important; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .woocommerce ul.products[class*="columns-4"] li.product { width: 48% !important; }
}

/* ============================================================
   FORCE-KILL the black box over the hero
   ============================================================ */
.pryme-hero-section,
.pryme-hero-section > .elementor-container,
.pryme-hero-section .elementor-column,
.pryme-hero-section .elementor-column-wrap,
.pryme-hero-section .elementor-widget-wrap,
.pryme-hero-section .e-con-inner,
.pryme-hero-section .e-con {
  background-color: transparent !important;
  background-image: none !important;
}

/* keep ONLY the section itself dark-purple, glow on top */
.pryme-hero-section {
  background-color: #0A0814 !important;
  position: relative !important;
  overflow: hidden !important;
}
.pryme-hero-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: radial-gradient(ellipse 120% 120% at 50% 50%, rgba(123,92,250,0.20) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.pryme-hero-section > * { position: relative !important; z-index: 1 !important; }/* End custom CSS */