/* Start custom CSS *//* ============================================================
   GENEXT CART — Additional CSS
   Paste this whole file into WordPress > Customize > Additional CSS
   Everything below is layered ON TOP of native Elementor widget
   settings — it only covers effects Elementor's own controls can't do.
   ============================================================ */

:root{
  --gc-navy:#0d1e3d;
  --gc-blue:#1a6bf5;
  --gc-blue-700:#1352d8;
  --gc-sky:#5cc2ff;
  --gc-bg:#f3f8fd;
  --gc-surface-muted:#eaf3fe;
  --gc-text-600:#54637c;
  --gc-border:#dfeafb;
  --gc-star:#ffb43a;
}

/* ============================================================
   GLOBAL AUTO-OVERRIDE
   Forces brand fonts/colors/sizes across the whole theme + every
   Elementor widget automatically — no need to touch Site Settings,
   Global Colors, Global Fonts, or Theme Style manually.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

body{ background:var(--gc-bg) !important; }

body, p, a, li, span, input, textarea, button, .elementor-text-editor{
  font-family:'Inter', sans-serif !important;
  color:var(--gc-text-600);
  font-size:15px;
  line-height:1.6;
}

h1, h2, h3, h4, h5, h6, .elementor-heading-title{
  font-family:'Poppins', sans-serif !important;
  font-weight:700 !important;
  color:var(--gc-navy) !important;
}
h1, .elementor-heading-title.elementor-size-default{ font-size:40px !important; line-height:1.15 !important; }
h2{ font-size:30px !important; line-height:1.2 !important; }
h3{ font-size:22px !important; line-height:1.3 !important; }
h4{ font-size:18px !important; line-height:1.3 !important; }
h5{ font-size:16px !important; }
h6{ font-size:14px !important; }
@media (max-width:767px){
  h1, .elementor-heading-title.elementor-size-default{ font-size:30px !important; }
  h2{ font-size:24px !important; }
}

a{ color:var(--gc-blue); }
a:hover{ color:var(--gc-blue-700); }

/* Force every icon (Icon / Icon Box / Icon List widgets) to brand blue,
   overriding whatever accent color the theme ships with by default. */
.elementor-icon,
.elementor-icon i,
.elementor-icon svg,
.elementor-icon-box-icon,
.elementor-icon-box-icon i,
.elementor-icon-list-icon,
.elementor-icon-list-icon i{
  color:var(--gc-blue) !important;
  fill:var(--gc-blue) !important;
}

/* Force every button to the brand gradient pill, so buttons look right
   even before .gc-btn-primary is manually added. */
.elementor-button,
a.elementor-button{
  background:linear-gradient(135deg,var(--gc-navy) 0%,var(--gc-blue) 55%,var(--gc-sky) 100%) !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:600 !important;
  padding:14px 28px !important;
  transition:transform .15s ease !important;
}
.elementor-button:hover, a.elementor-button:hover{
  transform:translateY(-2px);
  color:#ffffff !important;
}

input, textarea, select{
  font-family:'Inter', sans-serif !important;
  border-radius:12px !important;
  border:1px solid var(--gc-border) !important;
}

/* Gradient wordmark / gradient headline accents.
   Apply via the "CSS Classes" field on a Heading or Text Editor widget. */
.gc-gradient-text{
  background:linear-gradient(90deg,var(--gc-blue-700),var(--gc-sky));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Product / category card hover lift.
   Apply to the Column or Image Box widget wrapping a card. */
.gc-card{
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(13,30,61,0.06);
  overflow:hidden;
}
.gc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(13,30,61,0.10);
}

/* Category pill / chip. Apply to Icon List item or a Button widget
   styled as a pill. Add .active on the selected one. */
.gc-chip{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gc-surface-muted);
  color:var(--gc-navy);
  font-weight:600;
  border-radius:12px;
  padding:14px 20px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.gc-chip:hover{ transform:translateY(-2px); box-shadow:0 2px 10px rgba(13,30,61,0.06); }
.gc-chip.active{
  background:linear-gradient(135deg,var(--gc-navy) 0%,var(--gc-blue) 55%,var(--gc-sky) 100%);
  color:#fff;
}

/* Primary CTA button gradient (native Elementor Button widget can do
   flat colors + hover, not a gradient — use this class instead). */
.gc-btn-primary{
  background:linear-gradient(135deg,var(--gc-navy) 0%,var(--gc-blue) 55%,var(--gc-sky) 100%) !important;
  border:none !important;
  transition:transform .15s ease !important;
}
.gc-btn-primary:hover{ transform:translateY(-2px); }

/* Hero decorative blobs — add as a Shape Divider substitute or on a
   custom HTML/Text Editor widget positioned absolutely inside the hero Section. */
.gc-blob{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}

/* Hero-card background — apply to the outer Section wrapping a page hero. */
.gc-hero-bg{
  background:linear-gradient(135deg,var(--gc-surface-muted) 0%,#dcecff 60%,#cfe6ff 100%);
  border-radius:24px;
}

/* Dark gradient banner — promo banner / stats strip Sections. */
.gc-promo-bg{
  background:linear-gradient(135deg,var(--gc-navy) 0%,var(--gc-blue) 55%,var(--gc-sky) 100%);
  border-radius:24px;
  color:#fff;
}
.gc-promo-bg h1, .gc-promo-bg h2, .gc-promo-bg h3, .gc-promo-bg p{ color:#fff; }

/* Small uppercase kicker text above a heading. Apply to a Text Editor widget. */
.gc-eyebrow{
  font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gc-blue-700); margin-bottom:6px;
}

/* Star rating text. Apply to the Text Editor widget holding the star string. */
.gc-stars{ color:var(--gc-star); font-size:13px; letter-spacing:2px; }
.gc-stars-off{ color:#e2e8f0; }

/* Wishlist icon pinned to the top-right of a product card.
   Requires .gc-card to have position:relative (already set above). */
.gc-wishlist-btn{
  position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px; border-radius:999px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(13,30,61,0.06); color:#93a1b8;
}
.gc-wishlist-btn .elementor-icon,
.gc-wishlist-btn .elementor-icon i{
  color:#93a1b8 !important;
}

/* Reset the inner-Section column padding used to lay out chip/category buttons. */
.gc-chip-col{ padding:0 6px 0 0 !important; }

/* Footer dark background + light text, applied to both footer Sections. */
.gc-footer{ background:var(--gc-navy); color:#c9d6ea; }
.gc-footer h4{ color:#fff; }
.gc-footer a{ color:#a9b8d4; }

/* Accessibility floor — keep site-wide regardless of builder. */
:focus-visible{
  outline:2px solid var(--gc-blue);
  outline-offset:3px;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}/* End custom CSS */