/** Shopify CDN: Minification failed

Line 36:0 All "@import" rules must come first

**/
/* ============================================
   EiEiO SHOP — Custom CSS
   enengineering.co
   Apply via: Shopify Admin → Online Store →
   Themes → Customize → Edit CSS (bottom of
   left panel), or paste into assets/base.css
   ============================================ */

/* ── 1. BRAND COLOR TOKENS ─────────────────── */
:root {
  --eieio-green:        #2C7A4B;
  --eieio-green-dark:   #1E5534;
  --eieio-green-light:  #EAF3DE;
  --eieio-green-mid:    #3B6D11;
  --eieio-cream:        #FAFAF7;
  --eieio-text:         #1A1A1A;
  --eieio-text-muted:   #5A5A5A;
  --eieio-border:       rgba(44, 122, 75, 0.15);
  --eieio-accent:       #97C459;
  --eieio-white:        #FFFFFF;

  /* Override theme color variables */
  --color-base-accent-1:           var(--eieio-green);
  --color-base-accent-2:           var(--eieio-green-dark);
  --color-base-background-1:       var(--eieio-white);
  --color-base-background-2:       var(--eieio-cream);
}

/* ── 2. TYPOGRAPHY ──────────────────────────── */
/* Import a clean Google Font pair */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;500;600&display=swap');

body,
.shopify-section,
p, li, a, span, div {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--eieio-text);
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--eieio-text);
}

h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

p {
  line-height: 1.7;
  font-weight: 400;
}

/* ── 3. ANNOUNCEMENT BAR ────────────────────── */
.announcement-bar,
.shopify-section-announcement-bar,
[class*="announcement"] {
  background-color: var(--eieio-green) !important;
  color: var(--eieio-white) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding: 10px 0 !important;
  border-bottom: none !important;
}

.announcement-bar a,
.announcement-bar p,
.announcement-bar span,
[class*="announcement"] a,
[class*="announcement"] p,
[class*="announcement"] span {
  color: var(--eieio-white) !important;
  text-decoration: none !important;
}

.announcement-bar a:hover,
[class*="announcement"] a:hover {
  opacity: 0.85;
  text-decoration: underline !important;
}

/* ── 4. HEADER & NAVIGATION ─────────────────── */
.header,
.site-header,
header[class*="header"] {
  background-color: var(--eieio-green-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  padding: 16px 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

/* Logo */
.header__heading-link,
.header__heading,
.header .h2 {
  color: var(--eieio-white) !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Nav links */
.header__menu-item,
.header__menu-item a,
.header__menu > li > a,
header nav a,
.nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  transition: background 0.2s, color 0.2s !important;
}

.header__menu-item:hover > a,
.header__menu-item a:hover,
header nav a:hover {
  color: var(--eieio-white) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* Header icons (cart, search, account) */
.header__icon,
.header__icon svg,
.header__icons .icon {
  color: var(--eieio-white) !important;
  stroke: var(--eieio-white) !important;
}

.header__icon:hover,
.header__icon:hover svg {
  opacity: 0.75 !important;
}

/* Cart count badge */
.cart-count-bubble {
  background: var(--eieio-accent) !important;
  color: var(--eieio-green-dark) !important;
  font-weight: 700 !important;
}

/* ── 5. HERO SLIDESHOW ───────────────────────── */
.slideshow,
[class*="slideshow"],
.hero {
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Hero text overlay */
.slideshow__text-wrapper,
.slide__content,
[class*="slideshow"] .slide__text,
[class*="hero"] .content {
  background: linear-gradient(
    90deg,
    rgba(14, 40, 22, 0.75) 0%,
    rgba(14, 40, 22, 0.4) 60%,
    transparent 100%
  ) !important;
}

/* Hero heading */
.slideshow__heading,
[class*="slideshow"] h2,
[class*="slideshow"] h1,
.hero__title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(32px, 5vw, 62px) !important;
  font-weight: 700 !important;
  color: var(--eieio-white) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  max-width: 560px !important;
}

/* Hero subtext */
.slideshow__subheading,
[class*="slideshow"] p,
.hero__subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(15px, 2vw, 18px) !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.9) !important;
  line-height: 1.6 !important;
  max-width: 480px !important;
  margin-top: 12px !important;
}

/* Slideshow dots */
.slideshow__controls button,
[class*="slideshow"] .slider-button {
  background: rgba(255,255,255,0.4) !important;
  border-radius: 50% !important;
}

.slideshow__controls .active,
[class*="slideshow"] .slider-button--active {
  background: var(--eieio-white) !important;
}

/* ── 6. BUTTONS ─────────────────────────────── */

/* Primary button */
.button,
.btn,
button[type="submit"],
.shopify-payment-button__button,
[class*="button--primary"],
.product-form__submit {
  background-color: var(--eieio-green) !important;
  color: var(--eieio-white) !important;
  border: 2px solid var(--eieio-green) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  box-shadow: 0 2px 8px rgba(44,122,75,0.25) !important;
}

.button:hover,
.btn:hover,
button[type="submit"]:hover,
[class*="button--primary"]:hover,
.product-form__submit:hover {
  background-color: var(--eieio-green-dark) !important;
  border-color: var(--eieio-green-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(44,122,75,0.35) !important;
}

.button:active,
.btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Secondary / outline button */
.button--secondary,
[class*="button--secondary"],
.btn-outline {
  background-color: transparent !important;
  color: var(--eieio-green) !important;
  border: 2px solid var(--eieio-green) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 12px 26px !important;
  transition: all 0.2s !important;
}

.button--secondary:hover,
[class*="button--secondary"]:hover {
  background-color: var(--eieio-green) !important;
  color: var(--eieio-white) !important;
}

/* Hero CTA button override (bigger) */
.slideshow .button,
[class*="slideshow"] .button,
.hero .button {
  font-size: 15px !important;
  padding: 16px 36px !important;
  border-radius: 8px !important;
  letter-spacing: 0.06em !important;
}

/* ── 7. SECTION HEADINGS ─────────────────────── */
.section-header,
[class*="section-header"],
.collection-header {
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.section-header h2,
[class*="section__heading"],
.collection-header h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(26px, 4vw, 42px) !important;
  color: var(--eieio-text) !important;
  margin-bottom: 0.5rem !important;
}

/* Subtle green underline accent on section headings */
.section-header h2::after,
[class*="section__heading"]::after {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  background: var(--eieio-green) !important;
  border-radius: 2px !important;
  margin: 12px auto 0 !important;
}

/* ── 8. PRODUCT CARDS ────────────────────────── */
.card,
.product-card,
[class*="card--product"] {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--eieio-border) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  background: var(--eieio-white) !important;
}

.card:hover,
.product-card:hover,
[class*="card--product"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(44,122,75,0.15) !important;
}

.card__heading,
.product-card__title,
[class*="card__heading"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--eieio-text) !important;
}

.price,
.product-card__price,
[class*="price"] {
  color: var(--eieio-green-mid) !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
}

/* Sale badge */
.badge--sale,
[class*="badge--sale"] {
  background: var(--eieio-green) !important;
  color: var(--eieio-white) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* ── 9. TRUST BADGES ─────────────────────────── */
[class*="trust"],
[class*="icon-with-text"] {
  padding: 2rem 0 !important;
  background: var(--eieio-green-light) !important;
  border-top: 1px solid var(--eieio-border) !important;
  border-bottom: 1px solid var(--eieio-border) !important;
}

[class*="icon-with-text"] .icon-with-text__heading,
[class*="trust"] h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--eieio-green-dark) !important;
}

[class*="icon-with-text"] p,
[class*="trust"] p {
  font-size: 13px !important;
  color: var(--eieio-green-mid) !important;
}

/* ── 10. NEWSLETTER SECTION ──────────────────── */
[class*="newsletter"],
.email-signup {
  background: var(--eieio-green-dark) !important;
  color: var(--eieio-white) !important;
  padding: 4rem 2rem !important;
  text-align: center !important;
}

[class*="newsletter"] h2,
[class*="newsletter"] .section__heading {
  font-family: 'Playfair Display', serif !important;
  color: var(--eieio-white) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
}

[class*="newsletter"] p,
.email-signup p {
  color: rgba(255,255,255,0.8) !important;
}

[class*="newsletter"] input[type="email"],
.email-signup input {
  border-radius: 8px 0 0 8px !important;
  border: none !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  width: 280px !important;
  max-width: 100% !important;
  background: var(--eieio-white) !important;
  color: var(--eieio-text) !important;
}

[class*="newsletter"] button,
.email-signup button {
  border-radius: 0 8px 8px 0 !important;
  background: var(--eieio-accent) !important;
  color: var(--eieio-green-dark) !important;
  border: none !important;
  padding: 14px 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* ── 11. FOOTER ──────────────────────────────── */
.footer,
[class*="footer"] {
  background-color: #111D14 !important;
  color: rgba(255,255,255,0.7) !important;
  padding-top: 3rem !important;
  border-top: 3px solid var(--eieio-green) !important;
}

.footer a,
[class*="footer"] a {
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: color 0.15s !important;
}

.footer a:hover,
[class*="footer"] a:hover {
  color: var(--eieio-accent) !important;
}

.footer__heading,
[class*="footer"] h3,
[class*="footer"] h4 {
  color: var(--eieio-white) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
}

.footer__copyright,
[class*="footer__copyright"] {
  color: rgba(255,255,255,0.35) !important;
  font-size: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 1.5rem 0 !important;
  margin-top: 2rem !important;
}

/* Social icons in footer */
.footer .social-icons a,
.footer [class*="social"] a {
  color: rgba(255,255,255,0.5) !important;
  font-size: 20px !important;
  margin-right: 12px !important;
  transition: color 0.15s !important;
}

.footer .social-icons a:hover,
.footer [class*="social"] a:hover {
  color: var(--eieio-accent) !important;
}

/* ── 12. MISC POLISH ─────────────────────────── */

/* Page background */
body {
  background-color: var(--eieio-white) !important;
}

/* Links */
a {
  color: var(--eieio-green) !important;
}

a:hover {
  color: var(--eieio-green-dark) !important;
}

/* Focus rings — accessibility */
*:focus-visible {
  outline: 2px solid var(--eieio-green) !important;
  outline-offset: 3px !important;
}

/* Scrollbar (Chrome/Edge) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--eieio-cream); }
::-webkit-scrollbar-thumb {
  background: var(--eieio-green);
  border-radius: 3px;
}

/* Remove Sell The Trend theme's purple/lavender tones */
[style*="background-color: #d4b0ff"],
[style*="background: #d4b0ff"],
[style*="background-color: #c9a0e8"],
[style*="background: rgb(196, 156, 233)"] {
  background-color: var(--eieio-green-light) !important;
}

/* ── END OF EIEIO SHOP CUSTOM CSS ────────────── */