/*
 * Marina Stores — Typography & Design System
 * Layered via custom.css — safe to update without touching theme core
 *
 * TYPE SCALE (1.25 ratio — Major Third):
 *   --text-xs:   0.6875rem  (11px)  — badges, fine print
 *   --text-sm:   0.8125rem  (13px)  — utility bar, captions, footer headings
 *   --text-base: 1rem       (16px)  — body text
 *   --text-md:   1.125rem   (18px)  — product prices, lead text
 *   --text-lg:   1.25rem    (20px)  — subheadings
 *   --text-xl:   fluid      — section headings (clamp)
 *
 * WEIGHTS: 400 body, 500 nav/utility, 600 buttons/product titles, 700 headings/badges
 * TRACKING: -0.02em headings, 0.06em uppercase UI, default (0) body
 */

/* ==========================================
   FALLBACK FONT METRICS
   Reduces layout shift when Space Grotesk loads
   ========================================== */
@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ==========================================
   DESIGN TOKENS
   ========================================== */
:root {
  /* Type scale */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;

  /* Font stack */
  --font-primary: 'Space Grotesk', 'Space Grotesk Fallback', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-ui: 0.06em;

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  /* Colors */
  --navy: #114591;
  --navy-dark: #0d3677;
  --cyan: #2fb5d2;
  --bg: #f8f7f4;
  --text: #1c1e2e;
}

/* ==========================================
   TYPOGRAPHY — Space Grotesk
   A technical, authoritative sans-serif that
   fits the marine equipment catalog context.
   ========================================== */

body {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-kerning: normal;
  background-color: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.elementor-heading-title,
.product-title,
.block-title span,
.btn, .nav-link, label, input, select, textarea,
p, a, li, td, th {
  font-family: var(--font-primary) !important;
}

/* ==========================================
   TOP UTILITY BAR — navy authority strip
   ========================================== */

.header-nav {
  background-color: var(--navy-dark) !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}

.header-nav a {
  color: rgba(255,255,255,0.85) !important;
}

.header-nav a:hover {
  color: #fff !important;
}

/* ==========================================
   MAIN HEADER — clean authority
   ========================================== */

#header {
  box-shadow: 0 2px 0 0 var(--navy), 0 4px 12px rgba(17,69,145,0.08);
}

/* ==========================================
   SECTION HEADINGS — command attention
   Kategorije / Novi proizvodi / Akcija titles
   ========================================== */

.elementor-heading-title {
  font-size: clamp(1.75rem, 3.5vw, 2.625rem) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: var(--leading-tight) !important;
  color: var(--navy) !important;
  position: relative;
  display: inline-block !important;
}

.elementor-heading-title::after {
  content: '';
  display: block;
  margin-top: 8px;
  height: 3px;
  width: 3rem;
  background-color: var(--cyan);
  border-radius: 2px;
}

/* Category page heading — match section heading style */
#js-product-list-header h1,
.page-category h1,
h1.h1 {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: var(--leading-tight) !important;
  color: var(--text) !important;
}

/* ==========================================
   BUTTONS — confident, uppercase, no-nonsense
   ========================================== */

.btn-primary {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
  letter-spacing: var(--tracking-ui) !important;
  text-transform: uppercase !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: 2px !important;
  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--navy-dark) !important;
  border-color: var(--navy-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(17,69,145,0.25) !important;
}

.btn-product-list {
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-ui) !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 2px !important;
  transition: transform 0.12s ease, box-shadow 0.18s ease !important;
}

.btn-product-list:hover {
  transform: translateY(-1px) !important;
}

/* ==========================================
   PRODUCT CARDS — elevated on hover
   ========================================== */

.js-product-miniature-wrapper {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  border-radius: 2px !important;
}

.js-product-miniature-wrapper:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 32px rgba(17, 69, 145, 0.13) !important;
}

.h3.product-title,
.product-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-tight) !important;
}

/* Price — navy, bold, authoritative */
.product-price-and-shipping .price,
.product-price .price {
  font-weight: 700 !important;
  font-size: var(--text-md) !important;
  color: var(--navy) !important;
  letter-spacing: var(--tracking-tight) !important;
  font-variant-numeric: tabular-nums;
}

.product-price-and-shipping .regular-price,
.product-price .regular-price {
  font-size: var(--text-sm) !important;
  opacity: 0.55 !important;
  font-variant-numeric: tabular-nums;
}

/* ==========================================
   PRODUCT BADGES
   ========================================== */

.badge, .badge-new-box span,
.badge-product-new, .badge-danger {
  font-family: var(--font-primary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-ui) !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 3px 6px !important;
}

/* ==========================================
   CATEGORY TILES — taller, more presence
   ========================================== */

.elementor-text-editor a[style*="flex-direction:column"][style*="background-image"] {
  min-height: 240px !important;
  border-radius: 2px !important;
  transition: filter 0.2s ease, transform 0.22s ease !important;
}

.elementor-text-editor a[style*="flex-direction:column"][style*="background-image"]:hover {
  filter: brightness(1.08) !important;
  transform: scale(1.015) !important;
}

.elementor-text-editor a[style*="flex-direction:column"] > div[style*="font-weight:700"] {
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-ui) !important;
  text-transform: uppercase !important;
}

/* ==========================================
   TRUST BAR — navy background flip
   ========================================== */

.elementor-element-2c4rtvz {
  background-color: var(--navy) !important;
}

.elementor-element-2c4rtvz .fa {
  color: var(--cyan) !important;
}

.elementor-element-2c4rtvz div[style*="color:#333333"],
.elementor-element-2c4rtvz div[style*="font-weight:700"] {
  color: #fff !important;
}

.elementor-element-2c4rtvz div[style*="color:#666666"] {
  color: rgba(255,255,255,0.72) !important;
}

/* ==========================================
   FOOTER — editorial headings
   ========================================== */

h5.block-title span {
  font-family: var(--font-primary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-ui) !important;
}

footer a,
.footer-container a {
  font-family: var(--font-primary) !important;
  font-size: 0.875rem !important;
  transition: opacity 0.15s ease !important;
}

/* ==========================================
   NAV — weight bump
   ========================================== */

.cbp-hrmenu-tab > a,
.cbp-tab-title {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
}

/* ==========================================
   HERO SLIDER — Space Grotesk override
   ========================================== */

.rs-layer,
.rs-layer *,
.tp-caption,
.tp-caption *,
.rev_slider *,
.rs-module * {
  font-family: var(--font-primary) !important;
}

/* ==========================================
   CAROUSEL ARROWS — more defined
   ========================================== */

.swiper-button-next,
.swiper-button-prev,
.iqit-carousel-btn {
  background-color: var(--navy) !important;
  color: #fff !important;
  border-radius: 2px !important;
  opacity: 0.85;
  transition: opacity 0.15s ease !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.iqit-carousel-btn:hover {
  opacity: 1 !important;
}

/* ==========================================
/* ===========================================
   CATEGORY MENU — hide dropdown arrows
   ========================================== */

.cbp-hrmenu .cbp-submenu-aindicator {
  display: none !important;
}

   SIDEBAR FILTERS — category pages
   ========================================== */

.block-categories .category-sub-menu a,
.facet-label {
  font-size: 0.875rem;
  line-height: var(--leading-normal);
}

.block-categories .category-top-tree a {
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-tight);
}