/* TRIX × Zid Growth — production store 3169009
   Paste ALL of this into: Themes → Growth → ⋮ → Edit CSS */

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

:root {
  --trix-blue: #0fa3ee;
  --trix-marine: #0e2a47;
  --trix-marine-mid: #15406b;
  --trix-cyan: #19d3e6;
  --trix-cyan-light: #7fc9f2;
  --trix-dark: #15202e;
  --trix-steel: #6b7689;
  --trix-muted: #9aa6b8;
  --trix-border: #e6ecf3;
  --trix-surface: #f6f9fc;
  --trix-mist: #e9edf2;

  --primary: #0fa3ee !important;
  --primary-foreground: #ffffff !important;
  --secondary: #f6f9fc !important;
  --accent: #19d3e6 !important;
  --background: #ffffff !important;
  --foreground: #15202e !important;
  --muted: #6b7689 !important;
  --muted-foreground: #9aa6b8 !important;
  --border: #e6ecf3 !important;
  --radius: 12px !important;
  --theme-primary: #0fa3ee !important;
  --theme-primary-foreground: #ffffff !important;
  --theme-secondary: #f6f9fc !important;
  --theme-accent: #19d3e6 !important;
  --theme-background: #ffffff !important;
  --theme-foreground: #15202e !important;
  --theme-muted: #6b7689 !important;
  --theme-border: #e6ecf3 !important;
  --theme-radius: 12px !important;
}

html[lang="ar"],
html[dir="rtl"],
html[lang="ar"] body {
  font-family: "Cairo", system-ui, sans-serif !important;
}

html[lang="en"],
html[dir="ltr"],
html[lang="en"] body {
  font-family: "Inter", system-ui, sans-serif !important;
}

body {
  color: #15202e !important;
  background: #ffffff !important;
}

/* Announcement bar — Deep Marine */
[class*="announcement"],
.announcement-bar,
header + div[style*="background"] {
  background: #0e2a47 !important;
  color: #ffffff !important;
}

/* Header */
header,
[class*="site-header"],
[class*="header-wrapper"] {
  background: #ffffff !important;
  border-bottom: 1px solid #e6ecf3 !important;
}

header a,
[class*="nav"] a {
  color: #15202e !important;
}

header a:hover,
[class*="nav"] a:hover {
  color: #0fa3ee !important;
}

/* Primary buttons */
.btn-filled,
.btn-primary,
button[type="submit"],
a.btn-filled,
[class*="btn"][class*="primary"] {
  background: #0fa3ee !important;
  border-color: #0fa3ee !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}

.btn-filled:hover,
.btn-primary:hover,
button[type="submit"]:hover {
  background: #0d8fd4 !important;
  border-color: #0d8fd4 !important;
}

/* Text buttons / links */
.btn-text,
a.btn-text {
  color: #0fa3ee !important;
}

/* Hero / carousel sections */
.section-carousel,
.section-hero,
[class*="carousel"] {
  --section-overlay: #0e2a47;
}

.section-carousel h1,
.section-carousel h2,
.section-hero h1,
.section-hero h2 {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Category & product sections */
.section-categories,
.section-products,
.section-benefits {
  background: #f6f9fc !important;
}

.section-categories h2,
.section-products h2,
h2.text-xl,
h2.text-2xl {
  color: #15202e !important;
  font-weight: 700 !important;
}

/* Product cards */
.product-card,
[class*="product-card"],
[class*="ProductCard"] {
  background: #ffffff !important;
  border: 1px solid #e6ecf3 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.product-card:hover,
[class*="product-card"]:hover {
  box-shadow: 0 12px 32px rgba(20, 45, 90, 0.12) !important;
  border-color: #c4d2e0 !important;
}

/* Prices */
.price,
[class*="price"],
.product-price {
  color: #0fa3ee !important;
  font-weight: 700 !important;
}

/* Benefits row */
.section-benefits {
  background: #ffffff !important;
  border-top: 1px solid #e6ecf3 !important;
  border-bottom: 1px solid #e6ecf3 !important;
}

/* Footer */
footer,
[class*="footer"] {
  background: #0e2a47 !important;
  color: #b9cbdd !important;
}

footer a,
[class*="footer"] a {
  color: #7fc9f2 !important;
}

footer h3,
footer h4,
[class*="footer"] h3 {
  color: #ffffff !important;
}

/* Forms */
input,
select,
textarea,
.form-select,
[class*="form-input"] {
  border-radius: 12px !important;
  border-color: #e6ecf3 !important;
  color: #15202e !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #0fa3ee !important;
  box-shadow: 0 0 0 3px rgba(15, 163, 238, 0.18) !important;
  outline: none !important;
}

/* Carousel dots & arrows */
.embla__dots button[data-active="true"],
[class*="carousel"] [data-active="true"] {
  background: #0fa3ee !important;
}

.embla__progress-bar,
[class*="progress-bar"] {
  background: #0fa3ee !important;
}

/* Badges */
.badge,
[class*="badge"] {
  background: #19d3e6 !important;
  color: #0e2a47 !important;
}

/* Search dialog */
[class*="search"] input {
  border-color: #e6ecf3 !important;
}

/* Cart badge */
[class*="cart"] [class*="badge"],
.cart-count {
  background: #0fa3ee !important;
  color: #ffffff !important;
}

/* Section spacing polish */
section {
  scroll-margin-top: 80px;
}

/* TRIX fitment search (injected via Edit JS on Growth theme) */
.trix-fitment-section {
  background: linear-gradient(135deg, #0e2a47 0%, #15406b 100%) !important;
  padding: 48px 16px !important;
  scroll-margin-top: 80px;
}

.trix-fitment-inner {
  max-width: 960px;
  margin: 0 auto;
}

.trix-fitment-header {
  text-align: center;
  margin-bottom: 32px;
}

.trix-fitment-header h2 {
  color: #ffffff !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px !important;
}

.trix-fitment-header p {
  color: #7fc9f2 !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

.trix-fitment-form {
  background: #ffffff !important;
  border: 1px solid #e6ecf3 !important;
  border-radius: 20px !important;
  padding: 24px 32px !important;
  box-shadow: 0 18px 44px rgba(20, 45, 90, 0.14) !important;
}

.trix-fitment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .trix-fitment-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .trix-fitment-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trix-fitment-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trix-fitment-grid label span {
  font-size: 0.875rem;
  font-weight: 600;
  color: #15202e;
}

.trix-fitment-grid select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e6ecf3;
  color: #15202e;
  background: #fff;
}

.trix-fitment-grid select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.trix-fitment-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

@media (min-width: 640px) {
  .trix-fitment-actions {
    flex-direction: row;
    justify-content: space-between;
  }
}

.trix-fitment-btn {
  background: #0fa3ee !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  cursor: pointer;
  width: 100%;
}

@media (min-width: 640px) {
  .trix-fitment-btn {
    width: auto;
  }
}

.trix-fitment-btn:hover {
  background: #0d8fd4 !important;
}

.trix-fitment-link {
  color: #0fa3ee !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
}
/* Benefits row — Lucide icons (replaces uploaded PNG icons via custom JS) */
.section-benefits .trix-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: rgba(15, 163, 238, 0.12);
  color: #0fa3ee;
  flex-shrink: 0;
}

.section-benefits .trix-benefit-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}