/** Shopify CDN: Minification failed

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

**/
/* =========================================
   EMS_Nine Brand Identity
   ========================================= */

/* Brand Color Variables */
:root {
  /* Primary Colors */
  --brand-deep-blue: #1a365d;
  --brand-deep-blue-light: #2c5282;
  --brand-deep-blue-dark: #0f2442;
  
  /* Gray Scale */
  --brand-gray-900: #1a202c;
  --brand-gray-700: #4a5568;
  --brand-gray-500: #718096;
  --brand-gray-300: #cbd5e0;
  --brand-gray-100: #f7fafc;
  
  /* Accent Orange */
  --brand-orange: #f99015;
  --brand-orange-light: #ffa940;
  --brand-orange-dark: #d97706;
  
  /* Functional Colors */
  --brand-white: #ffffff;
  --brand-success: #38a169;
  --brand-error: #e53e3e;
}

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

/* Override Theme Typography */
:root {
  --font-heading--family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body--family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  font-family: var(--font-body--family) !important;
  color: var(--brand-gray-700);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
[class*="heading"],
.product-title {
  font-family: var(--font-heading--family) !important;
  color: var(--brand-gray-900);
  font-weight: 700;
}

/* =========================================
   Header Branding
   ========================================= */

/* Header Background */
.header,
#header-group,
.header-group,
[class*="header"] {
  background-color: var(--brand-deep-blue) !important;
}

/* Logo Styling */
.header .logo-text,
.header__logo-text,
.site-header__logo-text {
  font-family: var(--font-heading--family) !important;
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--brand-white) !important;
  letter-spacing: -0.5px;
}

/* Logo Icon Styling */
.header .logo-icon {
  color: var(--brand-orange) !important;
}

/* Navigation Links */
.header a,
.header nav a,
.header__nav a,
[class*="header"] nav a {
  color: var(--brand-white) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.header a:hover,
.header nav a:hover {
  color: var(--brand-orange) !important;
}

/* Header Icons */
.header svg,
.header [class*="icon"] {
  color: var(--brand-white) !important;
}

.header svg:hover,
.header [class*="icon"]:hover {
  color: var(--brand-orange) !important;
}

/* Cart Count Badge */
.header .cart-count,
.header [class*="cart-count"],
.header [class*="badge"] {
  background-color: var(--brand-orange) !important;
  color: var(--brand-white) !important;
  font-weight: 600;
}

/* =========================================
   Buttons
   ========================================= */

/* Primary Buttons */
.button-primary,
.btn-primary,
[class*="button--primary"],
button[type="submit"],
.add-to-cart,
[class*="add-to-cart"] {
  background-color: var(--brand-orange) !important;
  color: var(--brand-white) !important;
  border: 2px solid var(--brand-orange) !important;
  font-family: var(--font-body--family) !important;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0.3px;
}

.button-primary:hover,
.btn-primary:hover,
[class*="button--primary"]:hover,
button[type="submit"]:hover {
  background-color: var(--brand-orange-dark) !important;
  border-color: var(--brand-orange-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(249, 144, 21, 0.35);
}

/* Secondary Buttons */
.button-secondary,
.btn-secondary,
[class*="button--secondary"] {
  background-color: transparent !important;
  color: var(--brand-deep-blue) !important;
  border: 2px solid var(--brand-deep-blue) !important;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

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

/* =========================================
   Product Cards
   ========================================= */

.product-card,
[class*="product-card"] {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.product-card:hover,
[class*="product-card"]:hover {
  box-shadow: 0 10px 30px rgba(26, 54, 93, 0.1);
  transform: translateY(-4px);
}

.product-card .product-title,
[class*="product-card"] [class*="title"] {
  font-weight: 600;
  color: var(--brand-gray-900);
}

.product-card .price,
[class*="product-card"] [class*="price"] {
  color: var(--brand-deep-blue);
  font-weight: 700;
}

/* Sale Price */
.price--sale,
[class*="price--sale"],
.sale-price {
  color: var(--brand-orange) !important;
}

/* =========================================
   Links
   ========================================= */

a {
  color: var(--brand-deep-blue);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--brand-orange);
}

/* =========================================
   Footer
   ========================================= */

footer,
.footer,
[class*="footer"] {
  background-color: var(--brand-gray-900) !important;
  color: var(--brand-gray-300) !important;
}

footer a,
.footer a {
  color: var(--brand-gray-300) !important;
}

footer a:hover,
.footer a:hover {
  color: var(--brand-orange) !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
  color: var(--brand-white) !important;
}

/* =========================================
   Hero Section
   ========================================= */

.hero-section h1,
[class*="hero"] h1 {
  font-size: clamp(2.5rem, 6vw, 4rem) !important;
  font-weight: 800;
  color: var(--brand-white);
  text-shadow: 2px 2px 10px rgba(0,0,0,0.4);
}

.hero-section p,
[class*="hero"] p {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(255,255,255,0.9);
}

/* =========================================
   Forms
   ========================================= */

input, textarea, select {
  border: 1px solid var(--brand-gray-300) !important;
  border-radius: 6px;
  font-family: var(--font-body--family);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--brand-deep-blue) !important;
  box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
  outline: none;
}

/* =========================================
   Badges & Tags
   ========================================= */

.badge,
.tag,
[class*="badge"],
[class*="tag"] {
  background-color: var(--brand-deep-blue);
  color: var(--brand-white);
  font-weight: 600;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
}

.badge--sale,
[class*="sale-badge"] {
  background-color: var(--brand-orange) !important;
}

/* =========================================
   Announcement Bar
   ========================================= */

.announcement-bar,
[class*="announcement"] {
  background-color: var(--brand-orange) !important;
  color: var(--brand-white) !important;
  font-weight: 500;
}

/* =========================================
   Collection Pages
   ========================================= */

.collection-header h1,
[class*="collection"] h1 {
  color: var(--brand-gray-900);
}

/* Filter/Sidebar */
.filter-heading,
[class*="filter"] h3,
[class*="filter"] h4 {
  color: var(--brand-deep-blue);
  font-weight: 600;
}

/* =========================================
   Responsive Adjustments
   ========================================= */

@media (max-width: 768px) {
  .header .logo-text,
  .header__logo-text {
    font-size: 1.4rem;
  }
  
  .button-primary,
  .btn-primary {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

/* =========================================
   Utility Classes
   ========================================= */

.text-brand-blue { color: var(--brand-deep-blue) !important; }
.text-brand-orange { color: var(--brand-orange) !important; }
.text-brand-gray { color: var(--brand-gray-700) !important; }

.bg-brand-blue { background-color: var(--brand-deep-blue) !important; }
.bg-brand-orange { background-color: var(--brand-orange) !important; }
.bg-brand-gray { background-color: var(--brand-gray-100) !important; }
/* =========================================
   Header Specific Overrides
   ========================================= */

/* Force header background */
#header-group,
.header,
header,
[class*="header-component"],
[id*="header"] {
  background: #1a365d !important;
}

/* Navigation text */
.header nav a,
.header-menu a,
[class*="header-menu"] a,
.header__menu a {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

.header nav a:hover,
.header-menu a:hover {
  color: #f99015 !important;
}

/* Search and cart icons */
.header button,
.header [class*="icon"],
.header svg {
  color: #ffffff !important;
}

.header button:hover,
.header [class*="icon"]:hover {
  color: #f99015 !important;
}

/* Announcement bar */
[class*="announcement"] {
  background: #f99015 !important;
  color: #ffffff !important;
}
/* =========================================
   Sticky Header
   ========================================= */

#header-group {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}

#header-group.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* =========================================
   Enhanced Search Bar in Header
   ========================================= */

.header [class*="search"] input,
.header-search input,
.search-modal input {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 25px !important;
  padding: 12px 20px !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  min-width: 280px;
  transition: all 0.3s ease !important;
}

.header [class*="search"] input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

.header [class*="search"] input:focus {
  background: #ffffff !important;
  color: #1a365d !important;
  border-color: #f99015 !important;
  outline: none !important;
}

.header [class*="search"] input:focus::placeholder {
  color: #a0aec0 !important;
}

.header [class*="search"] button,
.search-modal button[type="submit"] {
  background: #f99015 !important;
  border-radius: 50% !important;
  padding: 8px !important;
}

.header [class*="search"] button:hover {
  background: #d97706 !important;
}

/* Search modal styles */
.search-modal,
[class*="search-modal"],
[class*="predictive-search"] {
  background: #ffffff !important;
}

/* =========================================
   Mobile Menu Improvements
   ========================================= */

@media (max-width: 768px) {
  .ems-mega-nav__container {
    justify-content: space-between;
  }
  
  .ems-mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 8px;
    cursor: pointer;
  }
  
  .ems-mega-nav__list {
    display: none !important;
  }
  
  .ems-mega-nav.mobile-open .ems-mega-nav__list {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a365d;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }
}

/* =========================================
   Override Default Product Cards
   ========================================= */

/* Apply EMS card styling to default product cards */
.product-card,
[class*="product-card"],
.product-list [class*="card"] {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.product-card:hover,
[class*="product-card"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(26, 54, 93, 0.12);
}

/* Product images */
.product-card img,
[class*="product-card"] img,
[class*="product-card-gallery"] img {
  transition: transform 0.4s ease;
}

.product-card:hover img,
[class*="product-card"]:hover img {
  transform: scale(1.05);
}

/* Product titles */
.product-card [class*="title"],
[class*="product-card"] [class*="title"],
[class*="product-title"] {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #1a202c;
  transition: color 0.2s ease;
}

.product-card:hover [class*="title"],
[class*="product-card"]:hover [class*="title"] {
  color: #f99015;
}

/* Product prices */
.product-card [class*="price"],
[class*="product-card"] [class*="price"] {
  font-weight: 700;
  color: #1a365d;
}

/* Sale prices */
[class*="price--sale"],
[class*="sale-price"],
.price .sale {
  color: #e53e3e !important;
}

/* Compare at price */
[class*="price--compare"],
[class*="compare-price"],
.price del {
  color: #a0aec0 !important;
  text-decoration: line-through;
}

/* Add to cart buttons on product cards */
.product-card button[type="submit"],
[class*="product-card"] button[type="submit"],
.product-form__submit {
  background: #f99015 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.product-card button[type="submit"]:hover,
[class*="product-card"] button[type="submit"]:hover {
  background: #d97706 !important;
  transform: translateY(-2px);
}

/* Collection Grid */
.collection-grid,
[class*="product-list"],
[class*="product-grid"] {
  gap: 24px !important;
}

@media (max-width: 768px) {
  .collection-grid,
  [class*="product-list"],
  [class*="product-grid"] {
    gap: 16px !important;
  }
}

/* Badges for existing theme */
.product-card .badge,
[class*="product-card"] [class*="badge"] {
  padding: 5px 10px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}

[class*="badge--sale"],
[class*="sale-badge"] {
  background: #e53e3e !important;
  color: #ffffff !important;
}

/* Product card hover overlay for quick view */
.product-card__quick-view-trigger,
[data-quick-view-trigger] {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  padding: 10px 20px;
  background: #1a365d;
  color: #ffffff;
  border: none;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.product-card:hover .product-card__quick-view-trigger,
[class*="product-card"]:hover [data-quick-view-trigger] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}