/*
 * Eagle Pharma template customizer layer.
 * This file consumes Joomla template option variables generated in index.php.
 * Keep structural/base styles in template.css and commerce.css; keep typography in typography.css.
 */

.ep-site {
  --ep-blue: var(--ep-color-primary);
  --ep-navy: var(--ep-color-ink);
  --ep-line: var(--ep-color-border);
  color: var(--ep-color-ink);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--ep-color-primary) 13%, transparent), transparent 32rem),
    linear-gradient(180deg, var(--ep-body-bg-color, var(--ep-color-surface-soft)), var(--ep-color-surface) 22rem);
  font-size: var(--ep-body-font-size, 16px);
  line-height: var(--ep-body-line-height, 1.6);
}

.ep-site h1,
.ep-site h2,
.ep-site h3,
.ep-site h4,
.ep-site h5,
.ep-site h6 {
  font-weight: var(--ep-heading-font-weight, 700);
  letter-spacing: var(--ep-heading-letter-spacing, -0.035em);
}

.ep-site h1 {
  font-size: clamp(2.4rem, 5vw, var(--ep-h1-max-size, 5rem));
  font-weight: var(--ep-h1-font-weight, var(--ep-heading-font-weight, 700));
}
.ep-site h2 {
  font-size: clamp(1.9rem, 3vw, var(--ep-h2-max-size, 3.25rem));
  font-weight: var(--ep-h2-font-weight, var(--ep-heading-font-weight, 700));
}
.ep-site h3 {
  font-size: clamp(1.35rem, 2vw, var(--ep-h3-max-size, 2rem));
  font-weight: var(--ep-h3-font-weight, var(--ep-heading-font-weight, 700));
}

.ep-topbar {
  color: var(--ep-topbar-text-color, var(--ep-color-surface));
  background: linear-gradient(90deg, var(--ep-topbar-bg, var(--ep-color-primary-dark)), var(--ep-color-primary));
}

.ep-no-topbar .ep-topbar { display: none; }

.ep-header {
  background: color-mix(in srgb, var(--ep-header-bg, #fff) 88%, transparent);
  border-bottom-color: var(--ep-header-border-color, var(--ep-color-border));
}

.ep-header-compact .ep-header__inner {
  min-height: calc(var(--ep-header-height) * 0.82);
}

.ep-header-centered .ep-header__inner {
  grid-template-columns: 1fr auto 1fr;
}

.ep-header-centered .ep-brand { justify-self: center; }
.ep-header-centered .ep-navigation { justify-self: start; }
.ep-header-centered .ep-header-actions { justify-self: end; }

.ep-logo-hide-name .ep-brand__name { display: none; }

.ep-menu-left .ep-navigation { justify-self: start; }
.ep-menu-center .ep-navigation { justify-self: center; }
.ep-menu-right .ep-navigation { justify-self: end; }

.ep-navigation a,
.ep-footer a {
  color: var(--ep-menu-text-color, var(--ep-color-ink-soft));
  border-radius: var(--ep-menu-radius, 999px);
  font-size: var(--ep-menu-font-size, 0.94rem);
  font-weight: var(--ep-menu-font-weight, 750);
}

.ep-navigation a:hover,
.ep-navigation a:focus-visible,
.ep-navigation .active > a,
.ep-navigation .current > a {
  color: var(--ep-menu-active-color, var(--ep-color-primary-dark));
  background: var(--ep-menu-hover-bg, var(--ep-color-surface-blue));
}

.ep-main {
  padding-block-start: var(--ep-main-padding-top, clamp(1.4rem, 3vw, 3rem));
}

.ep-shop-section,
.ep-product-grid,
.ep-module-row {
  margin-block-end: var(--ep-section-spacing, 3rem);
}

.ep-card,
.card,
.well,
.ep-product-card,
.ep-shop-hero,
.ep-product-media__main,
.ep-cart-drawer__panel {
  border-color: var(--ep-color-border);
}

.ep-card,
.card,
.well,
.ep-product-card,
.ep-shop-hero {
  border-radius: var(--ep-card-radius, var(--ep-radius-lg));
}

.ep-shadow-none .ep-card,
.ep-shadow-none .card,
.ep-shadow-none .well,
.ep-shadow-none .ep-product-card,
.ep-shadow-none .ep-shop-hero,
.ep-shadow-none .ep-cart-drawer__panel {
  box-shadow: none;
}

.ep-shadow-strong {
  --ep-shadow-soft: 0 22px 70px rgba(6, 43, 59, 0.16);
  --ep-shadow-card: 0 22px 54px rgba(6, 43, 59, 0.18);
}

.ep-button,
.ep-cart-button,
.ep-icon-button,
.ep-choice-list button,
.ep-quantity-control {
  border-radius: var(--ep-button-radius, 999px);
}

.ep-button {
  font-weight: var(--ep-button-weight, 850);
}

.ep-button--primary {
  color: var(--ep-button-primary-text, var(--ep-color-surface));
  background: linear-gradient(135deg, var(--ep-color-primary), var(--ep-color-accent));
}

.ep-button--ghost {
  background: var(--ep-button-ghost-bg, var(--ep-color-surface-blue));
}

.ep-footer {
  background: linear-gradient(145deg, var(--ep-footer-bg-start, #062b3b), var(--ep-footer-bg-end, #058cc3));
}

.ep-preset-eagle {
  --ep-color-primary: #06b1ee;
  --ep-color-primary-dark: #047fb5;
  --ep-color-accent: #32a2c3;
}

.ep-preset-medical-green {
  --ep-color-primary: #0f9d58;
  --ep-color-primary-dark: #057444;
  --ep-color-accent: #19b998;
}

.ep-preset-deep-navy {
  --ep-color-primary: #0f6da8;
  --ep-color-primary-dark: #062b3b;
  --ep-color-accent: #06b1ee;
}

.ep-preset-premium-teal {
  --ep-color-primary: #0fa3b1;
  --ep-color-primary-dark: #05606a;
  --ep-color-accent: #1cc7a8;
}

.ep-preset-warm-orange {
  --ep-color-primary: #ff9f1c;
  --ep-color-primary-dark: #c96900;
  --ep-color-accent: #06b1ee;
}

.ep-preset-soft-gray {
  --ep-color-primary: #929497;
  --ep-color-primary-dark: #4b5563;
  --ep-color-accent: #06b1ee;
}

.ep-preset-indigo-care {
  --ep-color-primary: #6c72e7;
  --ep-color-primary-dark: #3e3f9c;
  --ep-color-accent: #06b1ee;
}

.ep-preset-bronze-pharma {
  --ep-color-primary: #c9874f;
  --ep-color-primary-dark: #875326;
  --ep-color-accent: #0fa3b1;
}

@media (max-width: 940px) {
  .ep-header-centered .ep-header__inner {
    grid-template-columns: auto auto 1fr;
  }
}

/* Typography integration for EagleCart component and Eagle Hero module.
   These selectors intentionally use template CSS variables so typography can be controlled from template options. */
body.ep-site,
body.ep-site .eaglecart-store,
body.ep-site .mod-eaglehero {
  font-family: var(--ep-font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}

body.ep-site h1,
body.ep-site h2,
body.ep-site h3,
body.ep-site h4,
body.ep-site h5,
body.ep-site h6,
body.ep-site .ep-brand__name,
body.ep-site .ec-hero h1,
body.ep-site .ec-section__head h2,
body.ep-site .ec-page-head h1,
body.ep-site .ec-card h3,
body.ep-site .ec-pdp h1,
body.ep-site .mod-eaglehero__title {
  font-family: var(--ep-font-display, var(--ep-font-body, system-ui, sans-serif));
  font-weight: var(--ep-h1-font-weight, var(--ep-heading-font-weight, 700));
}

body.ep-site .ec-hero h1,
body.ep-site .ec-page-head h1,
body.ep-site .ec-pdp h1 {
  font-weight: var(--ep-h1-font-weight, var(--ep-heading-font-weight, 700));
}

body.ep-site .ec-section__head h2 {
  font-weight: var(--ep-h2-font-weight, var(--ep-heading-font-weight, 700));
}

body.ep-site .ec-card h3 {
  font-weight: var(--ep-h3-font-weight, var(--ep-heading-font-weight, 700));
}

html[lang^="ar"] body.ep-site,
html[lang^="ar"] body.ep-site .eaglecart-store,
html[lang^="ar"] body.ep-site .mod-eaglehero,
body.ep-site.ep-rtl,
body.ep-site.ep-rtl .eaglecart-store,
body.ep-site.ep-rtl .mod-eaglehero {
  font-family: var(--ep-font-arabic, var(--ep-font-body, Tahoma, Arial, sans-serif));
}

html[lang^="ar"] body.ep-site h1,
html[lang^="ar"] body.ep-site h2,
html[lang^="ar"] body.ep-site h3,
html[lang^="ar"] body.ep-site h4,
html[lang^="ar"] body.ep-site h5,
html[lang^="ar"] body.ep-site h6,
body.ep-site.ep-rtl h1,
body.ep-site.ep-rtl h2,
body.ep-site.ep-rtl h3,
body.ep-site.ep-rtl h4,
body.ep-site.ep-rtl h5,
body.ep-site.ep-rtl h6 {
  font-family: var(--ep-font-arabic, var(--ep-font-body, Tahoma, Arial, sans-serif));
}