/* ── POWERSHIPMENTS — Coastal Override CSS ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary:      #1A3C5E;
  --accent:       #E8A838;
  --bg:           #F8F5F0;
  --dark:         #0D2440;
  --surface:      #FFFFFF;
  --border:       #D5DDE5;
  --muted:        #7F8C9A;
}

/* ── FONTS ── */
h1,h2,h3,h4,h5,
.site-logo-text, .hero-title, .section-title,
.brand-story-title, .newsletter-title,
.category-card-name, .hero-stat-num {
  font-family: 'Barlow Semi Condensed', system-ui, sans-serif !important;
}
body, p, a, span, button, input, li, nav, footer {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ── HEADER ── */
.site-header {
  background: #fff !important;
  border-bottom: 2px solid var(--primary) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 12px rgba(26,60,94,0.08) !important;
}
.site-header-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  height: 68px !important;
  gap: 24px !important;
}
.site-logo-text {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.5px !important;
}
.site-logo-text span { color: var(--accent) !important; }
.site-nav a {
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: background 0.15s !important;
}
.site-nav a:hover { background: rgba(26,60,94,0.08) !important; }
.nav-dropdown { position: relative !important; display: inline-block !important; }
.nav-dropdown > span {
  padding: 8px 14px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
}
.nav-dropdown-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--accent) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 24px rgba(26,60,94,0.12) !important;
  min-width: 220px !important;
  padding: 8px 0 !important;
  z-index: 100 !important;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block !important; }
.nav-dropdown-menu a {
  display: block !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.nav-dropdown-menu a:hover { background: var(--bg) !important; color: var(--accent) !important; }
.site-cart-btn { color: var(--primary) !important; }
.mobile-only { display: none !important; }
@media (max-width: 768px) {
  .desktop-nav { display: none !important; }
  .mobile-only { display: flex !important; }
}

/* ── HERO: editorial 2-col, light sandy bg ── */
.hero {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
}
.hero-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 80px 20px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}
.hero-content { display: flex !important; flex-direction: column !important; }
.hero-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: 10px !important;
  margin-bottom: 20px !important;
}
.hero-title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem) !important;
  font-weight: 800 !important;
  color: var(--dark) !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;
  letter-spacing: -1px !important;
}
.hero-title em { color: var(--accent) !important; font-style: normal !important; }
.hero-sub {
  color: var(--muted) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  margin-bottom: 32px !important;
  max-width: 440px !important;
}
.hero-btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.hero-btn-primary:hover { background: var(--dark) !important; }
.hero-btn-outline {
  background: transparent !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
}
.hero-btn-outline:hover { background: var(--primary) !important; color: #fff !important; }
.hero-stats {
  display: flex !important;
  gap: 2rem !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--border) !important;
}
.hero-stat-num {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  line-height: 1 !important;
}
.hero-stat-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
}
.hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.hero-grid-item { border-radius: 10px !important; overflow: hidden !important; aspect-ratio: 1 !important; }
.hero-grid-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.4s !important; }
.hero-grid-item:hover img { transform: scale(1.04) !important; }
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr !important; padding: 48px 20px !important; }
  .hero-grid { display: none !important; }
}

/* ── FEATURES BAR ── */
.features-bar {
  background: var(--primary) !important;
  color: #fff !important;
  padding: 4px 0 !important;
}
.feature-text-label { font-weight: 700 !important; font-size: 13px !important; color: #fff !important; }
.feature-text-sub { font-size: 12px !important; color: rgba(255,255,255,0.65) !important; }

/* ── SECTION LABELS ── */
.section-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.5px !important;
}
.section-sub { color: var(--muted) !important; }

/* ── CATEGORY CARDS ── */
.category-card { transition: transform 0.2s !important; }
.category-card:hover { transform: translateY(-4px) !important; }
.category-card:hover img { transform: scale(1.06) !important; }
.category-card-name { font-weight: 700 !important; font-style: italic !important; }

/* ── PRODUCT CARDS ── */
.product-card {
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
.product-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px rgba(26,60,94,0.12) !important;
  transform: translateY(-3px) !important;
}
.product-card:hover .product-quick-add { opacity: 1 !important; }
.product-card:hover .product-img { transform: scale(1.05) !important; }
.product-badge { background: var(--accent) !important; color: var(--dark) !important; border-radius: 4px !important; }
.product-name { font-weight: 700 !important; color: var(--dark) !important; }
.product-price { color: var(--primary) !important; font-weight: 700 !important; }
.product-category { color: var(--accent) !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; }

/* ── BRAND STORY ── */
.brand-story { background: #fff !important; }
.brand-story-title { color: var(--dark) !important; }
.brand-stat-num { color: var(--primary) !important; font-weight: 800 !important; }

/* ── NEWSLETTER ── */
.newsletter {
  background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%) !important;
  color: #fff !important;
}
.newsletter-title {
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 12px !important;
}
.newsletter-form { display: flex !important; border-radius: 8px !important; overflow: hidden !important; }
.newsletter-form input {
  flex: 1 !important;
  padding: 13px 18px !important;
  border: none !important;
  font-size: 15px !important;
  outline: none !important;
  min-height: 48px !important;
  color: var(--dark) !important;
}
.newsletter-form button {
  background: var(--accent) !important;
  color: var(--dark) !important;
  border: none !important;
  padding: 13px 22px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.newsletter-form button:hover { background: #d4942a !important; }

/* ── FOOTER ── */
footer {
  background: var(--dark) !important;
  border-top: 3px solid var(--accent) !important;
}

/* ── MOBILE ── */
.mobile-menu {
  background: #fff !important;
  border-top: 1px solid var(--border) !important;
  padding: 16px 0 !important;
}