/* ============================================================
   BRRRM! — Fashion & Lifestyle | "Electric Noir" Design
   Farby: Ink Black + Electric Yellow + Clean White
   Fonty: Space Grotesk (nav/headings) + Inter (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --black:        #0B0B0B;   /* ink black */
  --dark:         #161616;   /* dark surfaces */
  --charcoal:     #2A2A2A;   /* nav hover bg */
  --electric:     #F2C624;   /* electric yellow — hlavný akcentná farba */
  --electric-dark:#C49A0A;   /* tmavá žltá */
  --electric-pale:#FDF5D0;   /* very pale yellow */
  --white:        #FFFFFF;
  --off-white:    #FAFAFA;   /* content bg */
  --gray:         #666666;   /* secondary text */
  --gray-light:   #E0E0E0;   /* borders */
  --gray-pale:    #F5F5F5;   /* hover backgrounds */
  --text:         #1A1A1A;   /* main text */
}

/* ── BASE ── */
body {
  font-family: 'Inter', sans-serif !important;
  background: var(--off-white) !important;
  color: var(--text) !important;
}

/* ── TOP HEADER STRIP ── */
#container-top-header-strip {
  background: var(--black) !important;
  border-bottom: 1px solid var(--charcoal) !important;
}
#container-top-header-strip,
#container-top-header-strip a,
#container-top-header-strip span,
#container-top-header-strip div,
#container-top-header-strip li {
  color: var(--gray) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
#container-top-header-strip a:hover {
  color: var(--electric) !important;
}

/* ── HEADER ── */
#container-header {
  background: var(--white) !important;
  border-bottom: 2px solid var(--black) !important;
  box-shadow: none !important;
}

/* Brand / Logo */
#header .brand span,
#header #top-home .brand span,
#top-home .brand span {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: var(--black) !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
}

/* ── NAVIGÁCIA (inside #header, #articles-menu) ── */
#articles-menu,
#articles-menu ul,
#submenu-with-width-of-content {
  background: transparent !important;
}

#articles-menu ul li,
#submenu-with-width-of-content > li {
  background: transparent !important;
}

#articles-menu ul li > a,
#submenu-with-width-of-content > li > a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  color: var(--text) !important;
  padding: 8px 16px !important;
  transition: color 0.2s, background 0.2s !important;
  position: relative !important;
}

#articles-menu ul li > a:hover,
#submenu-with-width-of-content > li > a:hover {
  color: var(--black) !important;
  background: var(--electric-pale) !important;
}

/* Active/selected nav item */
#articles-menu ul li.active > a,
#articles-menu ul li.selected > a,
#submenu-with-width-of-content > li.active > a {
  color: var(--black) !important;
  border-bottom: 3px solid var(--electric) !important;
}

/* Dropdown submenu */
#articles-menu ul li .submenu,
#submenu-with-width-of-content li ul,
#articles-menu ul li ul {
  background: var(--black) !important;
  border-top: 3px solid var(--electric) !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}
#articles-menu ul li ul li {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: transparent !important;
}
#articles-menu ul li ul li a,
.submenu li a {
  color: rgba(255,255,255,0.75) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 10px 18px !important;
  transition: color 0.2s, background 0.2s !important;
}
#articles-menu ul li ul li a:hover,
.submenu li a:hover {
  color: var(--electric) !important;
  background: rgba(242, 198, 36, 0.06) !important;
}

/* Header icons — search, cart */
#header .head-links .search-open,
#header .head-links .fa-search,
#header .head-links i {
  color: var(--text) !important;
  transition: color 0.2s !important;
}
#header .head-links .search-open:hover i {
  color: var(--electric-dark) !important;
}
#header .head-links a,
#header #public-cart a,
#header .info-cart-small a {
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Cart count badge */
#header .cout,
#header .info-cart-small .cout {
  background: var(--electric) !important;
  color: var(--black) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

/* Login / register links */
#header .login-register a,
#header [class*="login"] a,
.head-links a {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--gray) !important;
}
#header .login-register a:hover,
.head-links a:hover {
  color: var(--black) !important;
}

/* ── BREADCRUMB ── */
.top-navigation,
#container-navigation-top {
  background: var(--black) !important;
  border-bottom: none !important;
}
.top-navigation a,
.top-navigation span {
  color: var(--gray) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}
.top-navigation a:hover {
  color: var(--electric) !important;
}

/* ── SLIDER / BANNER ── */
#container-banner {
  border-bottom: 3px solid var(--electric) !important;
}

/* ── CONTENT AREA ── */
.container.site-color,
.container {
  background: var(--off-white) !important;
}

/* ── SECTION TITLES ── */
h1, .products-title, .catalog-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: var(--black) !important;
  letter-spacing: -0.02em !important;
}

.span-25 > h2,
.span-25 > h3,
.products-index-title h2,
.products-index-title h3,
.navigationLine + div h2,
.navigationLine + div h3 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: var(--black) !important;
  font-size: 20px !important;
  letter-spacing: -0.01em !important;
  border-bottom: 3px solid var(--electric) !important;
  padding-bottom: 10px !important;
  margin-bottom: 24px !important;
  display: inline-block !important;
}

/* ── PRODUCT CARDS (.product-third) ── */
.product-third {
  border-radius: 4px !important;
  background: var(--white) !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
  overflow: hidden !important;
  border: 1px solid var(--gray-light) !important;
}
.product-third:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-3px) !important;
  border-color: var(--black) !important;
}

/* product-third-border variant */
.product-third-border {
  border: 1px solid var(--gray-light) !important;
}

/* Product name */
.product-third .catalog-delivery_name,
.product-third [class*="delivery_name"],
.product-third h3,
.product-third h4,
.product-content-title,
.product-content-title a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
  color: var(--black) !important;
  letter-spacing: -0.01em !important;
}

/* Product price */
.product-third .price,
.product-third [class*="price"] {
  color: var(--black) !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 17px !important;
}

/* Old price */
.product-third .old-price,
.product-third [class*="old-price"] {
  color: var(--gray) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── BADGES ── */
.action {
  background: var(--electric) !important;
  color: var(--black) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
}

.clear {
  background: var(--black) !important;
  color: var(--electric) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  font-size: 11px !important;
}

.startup {
  background: var(--electric) !important;
  color: var(--black) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.top_product {
  background: var(--charcoal) !important;
  color: var(--white) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
}

.last_items,
div.last_items,
.container-product-actions .last_items,
.product-third .last_items {
  background: var(--electric-dark) !important;
  color: var(--black) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ── TLAČIDLÁ ── */
.button-add-cart-button,
.add-cart-catalog .button-type-1,
input.button-add-cart-button {
  background: var(--black) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  transition: background 0.2s !important;
}
.button-add-cart-button:hover,
.add-cart-catalog .button-type-1:hover {
  background: var(--electric) !important;
  color: var(--black) !important;
}

.detail-button-catalog .button-type-1:not(.button-add-cart-button) {
  background: transparent !important;
  color: var(--black) !important;
  border: 2px solid var(--black) !important;
  border-radius: 3px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  transition: background 0.2s, color 0.2s !important;
}
.detail-button-catalog .button-type-1:not(.button-add-cart-button):hover {
  background: var(--electric) !important;
  border-color: var(--electric) !important;
  color: var(--black) !important;
}

.button-type-1,
a.button-type-1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* ── NEWSLETTER ── */
#container-newsletter {
  background: var(--black) !important;
  border-top: none !important;
  position: relative !important;
}
#container-newsletter::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(242,198,36,0.12) 0%, rgba(0,0,0,0) 60%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
#container-newsletter > * {
  position: relative !important;
  z-index: 1 !important;
}
#container-newsletter h2,
#container-newsletter h3,
#container-newsletter p,
#container-newsletter span {
  color: var(--white) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}
#container-newsletter input[type="text"],
#container-newsletter input[type="email"] {
  border-radius: 3px 0 0 3px !important;
  border: 1px solid var(--charcoal) !important;
  background: var(--dark) !important;
  color: var(--white) !important;
  font-family: 'Inter', sans-serif !important;
}
#container-newsletter input[type="text"]::placeholder,
#container-newsletter input[type="email"]::placeholder {
  color: var(--gray) !important;
}
#container-newsletter input[type="submit"] {
  background: transparent !important;
  color: var(--black) !important;
  border: none !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}
#container-newsletter #button-addNewsletter,
#container-newsletter .button-type-1 {
  background: var(--electric) !important;
  border-radius: 0 3px 3px 0 !important;
  transition: background 0.2s !important;
}
#container-newsletter #button-addNewsletter:hover,
#container-newsletter .button-type-1:hover {
  background: var(--electric-dark) !important;
}

/* ── FOOTER ── */
#container-footer {
  background: var(--black) !important;
  border-top: 3px solid var(--electric) !important;
  color: var(--gray) !important;
}
#container-footer,
#container-footer p,
#container-footer span,
#container-footer li,
#container-footer div {
  color: var(--gray) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}
#container-footer a {
  color: var(--gray) !important;
  transition: color 0.2s !important;
}
#container-footer a:hover {
  color: var(--electric) !important;
}
#container-footer h3,
#container-footer h4,
#container-footer .group-title,
#container-footer strong {
  color: var(--white) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* ── NEWS SLIDE ── */
#news-slide {
  background: var(--electric) !important;
}
#news-slide a,
#news-slide span {
  color: var(--black) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}
#news-slide-icon {
  background: var(--electric-dark) !important;
}

/* ── STRÁNKOVANIE ── */
.pagination a,
.pagination span {
  font-family: 'Inter', sans-serif !important;
  border-radius: 3px !important;
  font-size: 13px !important;
}
.pagination a.active,
.pagination .current {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
}
.pagination a:hover {
  background: var(--electric) !important;
  border-color: var(--electric) !important;
  color: var(--black) !important;
}

/* ── FORMULÁRE ── */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  font-family: 'Inter', sans-serif !important;
  border-radius: 3px !important;
}

/* ── FLASH SPRÁVY ── */
#messages .message-ok {
  background: var(--electric-pale) !important;
  border-left: 4px solid var(--electric) !important;
  color: var(--black) !important;
  border-radius: 3px !important;
}
#messages .message-error {
  border-left: 4px solid var(--black) !important;
  border-radius: 3px !important;
}

/* ── SOCIAL NETWORKS ── */
#container-social-networks {
  background: var(--dark) !important;
  border-top: 1px solid var(--charcoal) !important;
}
#container-social-networks h2,
#container-social-networks span {
  color: var(--white) !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* ── PRODUCT DETAIL ── */
#container-product-detail h1,
#container-product-detail .product-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: var(--black) !important;
  letter-spacing: -0.02em !important;
}
#container-product-detail .price-detail,
#container-product-detail .price {
  color: var(--black) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
}