/* ============================================================
   SNAPFIRE — Multi-category Marketplace | "Urban Market" Design
   Farby: Deep Navy + Vivid Teal + Orange
   Fonty: Outfit (headings/brand) + Nunito Sans (body)
   ============================================================ */

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

/* ── DESIGN TOKENS ── */
:root {
  --navy:         #111827;   /* deep navy — primary dark */
  --navy-mid:     #1F2937;   /* nav bar bg */
  --navy-light:   #374151;   /* hover states */
  --teal:         #06B6D4;   /* vivid teal — main accent */
  --teal-dark:    #0891B2;   /* teal hover */
  --teal-pale:    #ECFEFF;   /* very pale teal */
  --orange:       #F97316;   /* orange — secondary accent */
  --orange-dark:  #EA6C0A;
  --white:        #FFFFFF;
  --off-white:    #F9FAFB;   /* content bg */
  --light-gray:   #F3F4F6;   /* card/section bg */
  --border:       #E5E7EB;   /* borders */
  --text:         #111827;   /* primary text */
  --text-muted:   #6B7280;   /* secondary text */
  --green:        #10B981;   /* sale/action green */
  --red:          #EF4444;   /* warning/danger */
}

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

/* ── TOP HEADER STRIP ── */
#container-top-header-strip {
  background: var(--navy) !important;
  border-bottom: none !important;
}
#container-top-header-strip,
#container-top-header-strip a,
#container-top-header-strip span,
#container-top-header-strip li,
#container-top-header-strip div {
  color: rgba(255,255,255,0.65) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
#container-top-header-strip a:hover {
  color: var(--teal) !important;
}

/* ── HEADER (logo + search + cart + login) ── */
#container-header {
  background: var(--white) !important;
  border-bottom: 3px solid var(--teal) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Cart and login links */
#header .head-links a,
#header #public-cart a,
#header .info-cart-small a,
#header .cout,
#header .info-cart-small .cout {
  font-family: 'Nunito Sans', sans-serif !important;
  color: var(--navy) !important;
  font-weight: 600 !important;
}
#header .head-links a:hover,
#header #public-cart a:hover {
  color: var(--teal) !important;
}
#header .login-register a,
#header [class*="login"] a {
  color: var(--navy) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
#header .login-register a:hover,
#header [class*="login"] a:hover {
  color: var(--teal) !important;
}

/* Cart count badge */
#header .cout,
#header .info-cart-small .cout {
  background: var(--teal) !important;
  color: var(--white) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  text-align: center !important;
  display: inline-block !important;
}

/* ── SEARCH BOX (in header) ── */
#search,
#search-form,
#searchform {
  background: transparent !important;
}
#search input[type="text"],
#search input[name="search"],
#searchform input[type="text"],
#searchform input[name="search"] {
  font-family: 'Nunito Sans', sans-serif !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px 0 0 8px !important;
  background: var(--light-gray) !important;
  color: var(--text) !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s, background 0.2s !important;
}
#search input[type="text"]:focus,
#search input[name="search"]:focus,
#searchform input[type="text"]:focus,
#searchform input[name="search"]:focus {
  border-color: var(--teal) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
}
#search button,
#search input[type="submit"],
#searchform button,
#searchform input[type="submit"] {
  background: var(--teal) !important;
  border: 2px solid var(--teal) !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--white) !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
#search button:hover,
#search input[type="submit"]:hover,
#searchform button:hover,
#searchform input[type="submit"]:hover {
  background: var(--teal-dark) !important;
  border-color: var(--teal-dark) !important;
}

/* ── NAVIGATION BAR (articles-menu) ── */
#container-articles-menu {
  display: block !important;
  background: var(--navy-mid) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
/* Also show top strip */
#container-top-header-strip {
  display: block !important;
}
#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: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 12px 16px !important;
  transition: color 0.2s, background 0.2s !important;
}
#articles-menu ul li > a:hover,
#submenu-with-width-of-content > li > a:hover {
  color: var(--teal) !important;
  background: rgba(255,255,255,0.06) !important;
}
#articles-menu ul li.active > a,
#articles-menu ul li.selected > a,
#submenu-with-width-of-content > li.active > a,
#submenu-with-width-of-content > li.selected > a {
  color: var(--teal) !important;
  border-bottom: 3px solid var(--teal) !important;
}

/* Nav dropdown submenu */
#articles-menu ul li .submenu,
#articles-menu ul li ul,
#submenu-with-width-of-content li ul {
  background: var(--navy) !important;
  border-top: 3px solid var(--teal) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
  min-width: 200px !important;
}
#articles-menu ul li ul li,
.submenu 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: 'Nunito Sans', sans-serif !important;
  font-size: 13px !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(--teal) !important;
  background: rgba(6,182,212,0.08) !important;
}

/* Cart in nav bar */
#articles-menu .cart-right a,
.cart-right a {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
  transition: background 0.2s !important;
}
#articles-menu .cart-right a:hover,
.cart-right a:hover {
  background: var(--orange-dark) !important;
}

/* ── BREADCRUMB / NAVIGATION TOP ── */
#container-navigation-top {
  background: var(--light-gray) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 0 !important;
}
.top-navigation,
.top-navigation a,
.navigationLine {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}
.top-navigation a:hover {
  color: var(--teal) !important;
}
.navigationLine {
  border-top: 1px solid var(--border) !important;
}

/* ── CONTENT AREA ── */
.content {
  background: var(--off-white) !important;
}

/* ── PRODUCT CARDS (.product-third) ── */
.product-third {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s !important;
  overflow: hidden !important;
}
.product-third:hover {
  box-shadow: 0 8px 24px rgba(6,182,212,0.18) !important;
  border-color: var(--teal) !important;
  transform: translateY(-3px) !important;
}
.product-third .product-name,
.product-third h2,
.product-third h3,
.product-third .name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--navy) !important;
}
.product-third .product-price,
.product-third .price,
.product-third .price-new {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--teal-dark) !important;
}
.product-third .price-old,
.product-third .product-price-old {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  text-decoration: line-through !important;
}

/* ── BADGES ── */
/* style.min.css uses `.startup` and `.container-product-actions>div.clear` (specificity 0,2,1)
   with background:linear-gradient !important + animation. We match/exceed that specificity here
   and kill the animation. webuni.css loads AFTER style.min.css so source order wins on ties. */

/* STARTUP — teal */
.container-product-actions > div.startup,
span.startup, div.startup {
  background: #06B6D4 !important;
  background-image: none !important;
  animation: none !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
  padding: 3px 8px !important;
}
/* ACTION — orange */
.container-product-actions > div.action,
span.action, div.action {
  background: #F97316 !important;
  background-image: none !important;
  animation: none !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}
/* CLEAR (discount %) — green; NOTE: style.min.css uses `.container-product-actions>div.clear`
   (specificity 0,2,1) — we match exactly so source order (webuni loaded after) wins */
.container-product-actions > div.clear,
span.clear, div.clear {
  background: #10B981 !important;
  background-image: none !important;
  animation: none !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}
/* TOP PRODUCT — dark navy */
.container-product-actions > div.top_product,
span.top_product, div.top_product {
  background: #111827 !important;
  background-image: none !important;
  animation: none !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}
/* LAST ITEMS — red */
.container-product-actions > div.last_items,
span.last_items, div.last_items {
  background: #EF4444 !important;
  background-image: none !important;
  animation: none !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}
/* HOT TIP / NEW / SALE / etc. — teal fallback */
.container-product-actions > div.hot_tip,
.container-product-actions > div.new,
.container-product-actions > div.sale,
.container-product-actions > div.sale_collection,
.container-product-actions > div.clearance_sale,
.container-product-actions > div.discount {
  background: #06B6D4 !important;
  background-image: none !important;
  animation: none !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}

/* ── BUTTONS (.button-type-1 wrapper — used for ALL buttons on this template) ── */
.button-type-1 {
  background: var(--navy) !important;
  background-image: none !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 0.2s !important;
  overflow: hidden !important;
}
.button-type-1:hover {
  background: var(--teal) !important;
}
/* Add to cart buttons → teal */
[id^="button-add-cart"],
[id*="button-add-cart"] {
  background: var(--teal) !important;
  background-image: none !important;
  border-radius: 8px !important;
}
[id^="button-add-cart"]:hover,
[id*="button-add-cart"]:hover {
  background: var(--teal-dark) !important;
}
/* Newsletter button → teal */
#button-addNewsletter {
  background: var(--teal) !important;
  background-image: none !important;
  border-radius: 0 8px 8px 0 !important;
}
#button-addNewsletter:hover {
  background: var(--teal-dark) !important;
}
/* Text/links inside buttons */
.button-type-1 a,
.button-type-1 input,
.button-type-1 button {
  color: var(--white) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
  border: none !important;
}

/* Generic fallback */
.btn,
.do-basket,
.add-to-basket,
.add-to-cart {
  background: var(--teal) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  cursor: pointer !important;
}

/* ── PRODUCT DETAIL ── */
.product-detail h1,
.product-detail .product-name,
#product-name,
.show-product h1 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  font-size: 26px !important;
}
.price-main,
.price-detail,
.product-detail .price {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  color: var(--teal-dark) !important;
}

/* ── SECTION HEADINGS (product group titles) ── */
h1, h2, h3 {
  font-family: 'Outfit', sans-serif !important;
}
.product-group-title,
.products-heading,
.content h2,
.content h3 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  border-left: 4px solid var(--teal) !important;
  padding-left: 12px !important;
}

/* ── CATEGORY PILL LABELS (on homepage category images) ── */
.category-image-title,
.category-title,
[class*="category"] span,
[class*="category"] p {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
}

/* ── SPECIAL OFFER BOX (big-startup-products) ── */
#big-startup-products,
.product-of-day,
.specialna-ponuka,
[class*="product-of-day"],
[class*="special-offer"] {
  border: 2px solid var(--teal) !important;
  border-image: none !important;
  border-radius: 12px !important;
  background: var(--white) !important;
  box-shadow: 0 4px 16px rgba(6,182,212,0.12) !important;
}
/* Wrapper that holds the rainbow border */
#big-startup-products::before,
#big-startup-products::after {
  display: none !important;
}
.product-of-day-slide,
[id*="startup-product"],
[class*="startup-product"] {
  border-image: none !important;
  border: 2px solid var(--teal) !important;
  border-radius: 12px !important;
  background: var(--white) !important;
}

/* ── FILTER / SORT BAR ── */
.products-filter,
.sort-bar,
.filter-bar,
.products-order {
  background: var(--light-gray) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
select {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  background: var(--white) !important;
  color: var(--text) !important;
  padding: 6px 10px !important;
}
select:focus {
  border-color: var(--teal) !important;
  outline: none !important;
}

/* ── MESSAGES / FLASH ── */
#messages .success,
.message-success {
  background: rgba(16,185,129,0.1) !important;
  border-left: 4px solid var(--green) !important;
  border-radius: 8px !important;
  color: #065f46 !important;
}
#messages .error,
.message-error {
  background: rgba(239,68,68,0.1) !important;
  border-left: 4px solid var(--red) !important;
  border-radius: 8px !important;
}

/* ── NEWSLETTER ── */
#container-newsletter,
.newsletter,
[class*="newsletter"] {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #0F4C6E 100%) !important;
  border-top: 4px solid var(--teal) !important;
}
#container-newsletter *,
.newsletter *,
[class*="newsletter"] * {
  color: var(--white) !important;
}
#container-newsletter h2,
#container-newsletter h3,
[class*="newsletter"] h2,
[class*="newsletter"] h3 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: 0.04em !important;
  color: var(--white) !important;
}
#container-newsletter input[type="text"],
#container-newsletter input[type="email"],
[class*="newsletter"] input[type="text"],
[class*="newsletter"] input[type="email"] {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px 0 0 8px !important;
  color: var(--white) !important;
  padding: 12px 18px !important;
}
#container-newsletter input::placeholder,
[class*="newsletter"] input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}
#container-newsletter button,
#container-newsletter input[type="submit"],
[class*="newsletter"] button,
[class*="newsletter"] input[type="submit"] {
  background: var(--teal) !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--white) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 12px 28px !important;
  transition: background 0.2s !important;
}
#container-newsletter button:hover,
#container-newsletter input[type="submit"]:hover,
[class*="newsletter"] button:hover,
[class*="newsletter"] input[type="submit"]:hover {
  background: var(--teal-dark) !important;
}

/* ── SOCIAL NETWORKS STRIP ── */
[class*="social-networks"],
#container-social-networks {
  background: var(--navy-light) !important;
}

/* ── FOOTER ── */
#container-footer {
  background: var(--navy) !important;
  border-top: 4px solid var(--teal) !important;
}
#footer {
  background: var(--navy) !important;
}
#footer,
#footer a,
#footer span,
#footer p,
#footer li {
  color: rgba(255,255,255,0.65) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 13px !important;
}
#footer a:hover {
  color: var(--teal) !important;
}
#footer h3,
#footer h4,
#footer .footer-heading,
#footer strong {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--white) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 12px !important;
}
.footerLine {
  border-color: rgba(255,255,255,0.1) !important;
}

/* Footer logo */
#footer .brand,
#footer .logo,
#footer img[alt] {
  opacity: 0.9 !important;
  filter: brightness(1.2) !important;
}

/* ── NOVINKY / NEWS SLIDE-IN ── */
#show-in-slide,
[id*="news-slide"],
[id*="slide-news"] {
  background: var(--teal) !important;
  color: var(--white) !important;
}
#show-in-slide span,
#show-in-slide a {
  color: var(--white) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  writing-mode: vertical-rl !important;
  letter-spacing: 0.06em !important;
}

/* ── SCROLL-TO-TOP BUTTON ── */
#scroll-to-top-button {
  background: var(--teal) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(6,182,212,0.4) !important;
}
#scroll-to-top-button:hover {
  background: var(--teal-dark) !important;
}

/* ── PAGINATION ── */
.pagination a,
.pager a {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--navy) !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}
.pagination a:hover,
.pager a:hover,
.pagination .active a,
.pager .current {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: var(--white) !important;
}

/* ── FORMS (cart, user, contact) ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  color: var(--text) !important;
  background: var(--white) !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.15) !important;
}

/* ── TABS (product filtering tabs) ── */
.tabs a,
.tab-link,
[class*="-tab"] a {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 8px 18px !important;
  transition: all 0.2s !important;
}
.tabs a:hover,
.tab-link:hover {
  color: var(--teal) !important;
}
.tabs a.active,
.tab-link.active,
[class*="-tab"] a.selected {
  color: var(--teal) !important;
  border-bottom: 3px solid var(--teal) !important;
}

/* ── FACEBOOK & SOCIAL BUTTONS ── */
#fb-right-side a,
.fb-button {
  background: #1877F2 !important;
  border-radius: 8px !important;
}

/* ── CATEGORY IMAGE BLOCKS (show-images-category.phtml) ── */
#img-catalog {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.img-catalog-block {
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}
.img-catalog-block:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(6,182,212,0.25) !important;
}
/* The pill label overlay */
.img-catalog-image-link > span {
  background: var(--teal) !important;
  border-radius: 30px !important;
  padding: 8px 22px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transition: background 0.2s !important;
}
.img-catalog-image-link:hover > span {
  background: var(--navy) !important;
}
.img-catalog-image-link > span > span {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  color: var(--white) !important;
}
/* "Prezrieť" button under category image */
.img-catalog-block .button-type-1 a,
.img-catalog-block .btn-type-1 a,
.img-catalog-block [class*="button"] a {
  background: var(--teal) !important;
  border: 2px solid var(--teal) !important;
  color: var(--white) !important;
  border-radius: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  transition: background 0.2s !important;
}
.img-catalog-block .button-type-1 a:hover,
.img-catalog-block [class*="button"] a:hover {
  background: var(--teal-dark) !important;
  border-color: var(--teal-dark) !important;
}

/* ── PRODUCT-OF-DAY COUNTDOWN ── */
.product-of-day-timer,
[class*="countdown"],
[class*="timer"] {
  color: var(--orange) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
}

/* ── RATING STARS ── */
.star-rating .filled,
.rating .star,
[class*="star"][class*="fill"] {
  color: var(--orange) !important;
}

/* ── FACEBOOK RIGHT SIDE ── */
#fb-right-side {
  background: var(--navy) !important;
  border-radius: 0 8px 8px 0 !important;
}
#fb-right-side span {
  color: var(--white) !important;
}