:root {
  /* Layout */
  --header-height: 72px;

  /* Solera Brand Colors */
  --solera-jacarta: #32245e;
  --solera-jacarta-800: #191230;
  --solera-blue: #194FA1;
  --solera-white: #ffffff;
  --solera-sun: #feb032;
  --solera-smoke: #f9f9f9; /* Backgrounds */
  --solera-shark: #1b1e24; /* Text */
  --solera-mako-base: #444854; /* Grey Text */
  --solera-cobalt-50: #EBF3FD; /* Annual Background */
  --solera-cobalt-500: #2169D9; /* Links */
  --solera-eminence: #68368B;
  --solera-gold: #F8BC04; /*gold subscription*/
  --solera-silver: #9AA0A6; /*silver subscription*/
  --solera-bronze: #CD7F32; /*bronze subscription*/


  


  /* UI tokens */
  --global-headtitle-color: #194fa1;

  h1 {
    font-size: 2.6rem;
    /* 41.6px */
  }

  h2 {
    font-size: 2.34rem;
    /* 37.44px */
  }

  h3 {
    font-size: 2.08rem;
    /* 33.28px */
  }

  h4 {
    font-size: 1.82rem;
    /* 29.12px */
  }

  h5 {
    font-size: 1.56rem;
    /* 24.96px */
  }

  h6 {
    font-size: 1.3rem;
    /* 20.8px */
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 500;
    margin: 0 0 1rem 0;
  }

  p,
  b {
    margin-bottom: 0.75rem;
    line-height: 1.3rem;
  }

  /* Button Styles */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
    width: 100%;
  }

  .btn:hover {
    opacity: 0.9;
  }

  .btn:active {
    opacity: 0.8;
  }

  /* Button Primary: Blue background, white text */
  .btn-primary {
    background: var(--solera-blue);
    color: var(--solera-white);
  }

  .btn-primary:hover {
    background: var(--solera-blue);
    color: var(--solera-white);
  }

  /* Button Secondary: Sun background, jacarta text */
  .btn-secondary {
    background: var(--solera-sun);
    color: var(--solera-jacarta);
  }

  .btn-secondary:hover {
    background: var(--solera-sun);
    color: var(--solera-jacarta);
  }

  a {
    font-weight: 400;
    color: #646cff;
    text-decoration: inherit;
  }

  a:hover {
    color: #535bf2;
  }
}

/* Button Loading State */
.btn.loading,
.solera-add-variation.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.btn.loading::after,
.solera-add-variation.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  right: 12px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: solera-spin 0.8s linear infinite;
}

@keyframes solera-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =============================
   Shared Gradient Text Utility
   Use .solera-gradient-text directly on elements across all stores.
   ============================= */
.solera-gradient-text {
  background: linear-gradient(to right, #32255E, #68368B, #194fA1, #1A99B0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700 !important;
}

/* =============================
   Shared Header & Footer Styles
   ============================= */

/* Page Header */
.solera-page-header {
  background-color: var(--solera-jacarta);
  height: 70px;
}

.solera-page-header .ast-container,
.solera-page-header .container {
  display: flex;
  align-items: center;
  height: 70px;
}

.solera-page-header img {
  padding-left: 10px;
  padding-top: 1px;
}

/* Home custom header (for MaxMegaMenu navigation) */
.home-custom-header {
  background-color: var(--solera-jacarta);
}

/* Hide default footer */
.site-footer {
  display: none !important;
}

/* Page Footer */
.solera-page-footer,
.home-custom-footer {
  background-color: var(--solera-jacarta);
  color: var(--solera-white);
}

.solera-footer-content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.solera-footer-content a {
  color: var(--solera-white);
  text-decoration: none;
  cursor: pointer;
}

.solera-footer-content a:hover {
  color: var(--solera-white);
  opacity: 0.8;
}

.solera-footer-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.solera-footer-left img {
  height: auto;
  max-width: 100%;
}

.solera-footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.solera-footer-social {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.solera-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--solera-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.solera-social-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.solera-social-icon:hover {
  color: var(--solera-white);
  opacity: 0.8;
}

/* Responsive: Tablets and Mobile */
@media (max-width: 768px) {
  .solera-page-header {
    margin-bottom: 1rem;
  }

  .solera-page-footer,
  .home-custom-footer {
    padding: 1.5rem 0;
    margin-top: 2rem;
  }

  .solera-footer-content {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: center;
  }

  .solera-footer-left,
  .solera-footer-right {
    align-items: center;
  }

  .solera-footer-social {
    justify-content: center;
  }
}