/* ============================================================
   LITTLE FOX — Pet Shop | "Wild Forest" Design
   Farby: Forest Green + Fox Coral + Warm Cream
   Fonty: Nunito (body) + Nunito Sans (nav/headings)
   ============================================================ */

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

/* ── DESIGN TOKENS ── */
:root {
  --fox:         #E8622A;   /* fox coral orange */
  --fox-dark:    #C44E1A;   /* deeper orange */
  --fox-light:   #FF8C5A;   /* lighter coral */
  --forest:      #2D5A27;   /* deep forest green */
  --forest-mid:  #3D7A36;   /* mid green */
  --forest-light:#5BA052;   /* light green accent */
  --sage:        #D4EBC1;   /* pale sage */
  --cream:       #FFF8F2;   /* warm cream background */
  --dark:        #1B2A18;   /* very dark forest */
  --white:       #FFFFFF;
  --gray-light:  #F5F0EB;
  --text:        #2C3E28;
}

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

/* ── TOP HEADER STRIP (horný pásik) ── */
#container-top-header-strip {
  background: var(--forest) !important;
  border-bottom: 2px solid var(--forest-mid) !important;
}
#container-top-header-strip a,
#container-top-header-strip span,
#container-top-header-strip div {
  color: var(--sage) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 12px !important;
}
#container-top-header-strip a:hover {
  color: var(--white) !important;
}

/* ── HEADER ── */
#container-header {
  background: var(--white) !important;
  border-bottom: 3px solid var(--sage) !important;
  box-shadow: 0 2px 12px rgba(45, 90, 39, 0.08) !important;
}

/* Košík v headeri */
#container-header .cart-header-container,
#container-header .small-cart {
  background: var(--fox) !important;
  border-radius: 24px !important;
  color: var(--white) !important;
}
#container-header .cart-header-container a,
#container-header .small-cart a {
  color: var(--white) !important;
}

/* ── NAVIGÁCIA ── */
#container-articles-menu {
  background: var(--forest) !important;
  border-bottom: 3px solid var(--fox) !important;
  box-shadow: 0 3px 10px rgba(27, 42, 24, 0.25) !important;
}

/* #articles-menu samotné — fix bieleho pozadia z base CSS */
#articles-menu {
  background: transparent !important;
}

/* nav položky — transparent li (fix bieleho pozadia) */
#articles-menu ul li,
.articles-menu-long ul li,
#articles-menu > ul > li {
  background: transparent !important;
}

#articles-menu ul li > a,
.articles-menu-long ul li > a {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 14px 18px !important;
  transition: color 0.2s, background 0.2s !important;
}

#articles-menu ul li > a:hover,
.articles-menu-long ul li > a:hover {
  color: var(--fox-light) !important;
  background: rgba(255,255,255,0.07) !important;
}

/* Aktívna nav položka */
#articles-menu ul li.active > a,
#articles-menu ul li.selected > a,
#articles-menu ul li > a.active {
  color: var(--fox-light) !important;
  border-bottom: 3px solid var(--fox-light) !important;
}

/* Dropdown */
#articles-menu ul li ul {
  background: var(--dark) !important;
  border-top: 2px solid var(--fox) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
#articles-menu ul li ul li {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
#articles-menu ul li ul li a {
  font-size: 12px !important;
  color: rgba(255,255,255,0.8) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
#articles-menu ul li ul li a:hover {
  color: var(--fox-light) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* Search box */
#articles-menu ~ div input[type="text"],
.search-box input[type="text"] {
  border-radius: 20px 0 0 20px !important;
  border: 2px solid var(--sage) !important;
  font-family: 'Nunito', sans-serif !important;
}
#articles-menu ~ div input[type="submit"],
.search-box input[type="submit"],
.search-box button {
  background: var(--fox) !important;
  border-radius: 0 20px 20px 0 !important;
  border: none !important;
}

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

/* ── NAVIGAČNÉ DROBČEKY (breadcrumb) ── */
.top-navigation,
#container-navigation-top {
  background: var(--gray-light) !important;
  border-bottom: 1px solid var(--sage) !important;
}
.top-navigation a,
.top-navigation span {
  color: var(--forest-mid) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ── OBSAH / CONTAINER ── */
.container.site-color,
.container {
  background: var(--cream) !important;
}

/* ── NADPISY SEKCIÍ ── */
.products-title,
.catalog-title,
h1, h2.section-title {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 800 !important;
  color: var(--forest) !important;
  letter-spacing: 0.04em !important;
}

/* Nadpis sekcie AKCIA / DOPORUČUJEME */
.span-25 > h2,
.span-25 > h3,
.products-index-title h2,
.products-index-title h3 {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 900 !important;
  color: var(--forest) !important;
  font-size: 22px !important;
  letter-spacing: 0.06em !important;
  border-left: 4px solid var(--fox) !important;
  padding-left: 14px !important;
  margin-bottom: 20px !important;
}

/* ── PRODUCT CARDS ── */
.product-third {
  border-radius: 12px !important;
  background: var(--white) !important;
  box-shadow: 0 2px 10px rgba(45, 90, 39, 0.07) !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 235, 193, 0.6) !important;
}
.product-third:hover {
  box-shadow: 0 8px 28px rgba(45, 90, 39, 0.16) !important;
  transform: translateY(-3px) !important;
}

/* Produkt názov */
.product-third .catalog-delivery_name,
.product-third [class*="delivery_name"],
.product-third h3,
.product-third h4 {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
}

/* Produkt cena */
.product-third .price,
.product-third [class*="price"] {
  color: var(--fox-dark) !important;
  font-weight: 800 !important;
  font-family: 'Nunito Sans', sans-serif !important;
}

/* ── BADGES (akcia, zľava) ── */
.action {
  background: var(--fox) !important;
  color: var(--white) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

/* Percentuálna zľava (-17%, -20%...) */
.clear {
  background: var(--forest) !important;
  color: var(--white) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

/* startup / doporučujeme badge */
.startup {
  background: var(--forest-mid) !important;
  color: var(--white) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

/* ── TLAČIDLÁ ── */

/* DO KOŠÍKA */
.button-add-cart-button,
.add-cart-catalog .button-type-1,
input.button-add-cart-button {
  background: var(--fox) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  transition: background 0.2s !important;
}
.button-add-cart-button:hover,
.add-cart-catalog .button-type-1:hover {
  background: var(--fox-dark) !important;
}

/* DETAIL tlačidlo */
.detail-button-catalog .button-type-1:not(.button-add-cart-button) {
  background: var(--white) !important;
  color: var(--forest) !important;
  border: 2px solid var(--forest) !important;
  border-radius: 8px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  transition: background 0.2s, color 0.2s !important;
}
.detail-button-catalog .button-type-1:not(.button-add-cart-button):hover {
  background: var(--forest) !important;
  color: var(--white) !important;
}

/* Všeobecné tlačidlá */
.button-type-1,
a.button-type-1 {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  letter-spacing: 0.03em !important;
}

/* ── NEWSLETTER ── */
#container-newsletter {
  position: relative !important;
}
#container-newsletter::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(120deg, rgba(27,42,24,.85) 0%, rgba(45,90,39,.78) 50%, rgba(232,98,42,.70) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
#container-newsletter > * {
  position: relative !important;
  z-index: 2 !important;
}
#container-newsletter h2,
#container-newsletter h3,
#container-newsletter p,
#container-newsletter span {
  color: var(--white) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
#container-newsletter input[type="text"],
#container-newsletter input[type="email"] {
  border-radius: 8px 0 0 8px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.12) !important;
  color: var(--white) !important;
  font-family: 'Nunito', sans-serif !important;
}
#container-newsletter input[type="text"]::placeholder,
#container-newsletter input[type="email"]::placeholder {
  color: rgba(255,255,255,0.6) !important;
}
#container-newsletter input[type="submit"] {
  background: transparent !important;
  color: var(--white) !important;
  border: none !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}
/* Wrapper div okolo submit tlačidla */
#container-newsletter #button-addNewsletter,
#container-newsletter .button-type-1 {
  background: var(--fox) !important;
  border-radius: 0 8px 8px 0 !important;
  transition: background 0.2s !important;
}
#container-newsletter #button-addNewsletter:hover,
#container-newsletter .button-type-1:hover {
  background: var(--fox-dark) !important;
}

/* ── FOOTER ── */
#container-footer {
  background: var(--dark) !important;
  border-top: 4px solid var(--fox) !important;
  color: rgba(255,255,255,0.85) !important;
}
#container-footer,
#container-footer p,
#container-footer span,
#container-footer li,
#container-footer div {
  color: rgba(255,255,255,0.8) !important;
  font-family: 'Nunito', sans-serif !important;
}
#container-footer a {
  color: var(--sage) !important;
  transition: color 0.2s !important;
}
#container-footer a:hover {
  color: var(--fox-light) !important;
}
#container-footer h3,
#container-footer h4,
#container-footer .group-title,
#container-footer strong {
  color: var(--white) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

/* Fox logo v footeri — biele */
#container-footer .brand img,
#container-footer #top-home img {
  filter: brightness(0) invert(1) !important;
}

/* ── NOVINKY bočný pásik ── */
#news-slide {
  background: var(--forest) !important;
  border-radius: 0 !important;
}
#news-slide a,
#news-slide span {
  color: var(--white) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* ── STRÁNKOVANIE ── */
.pagination a,
.pagination span {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}
.pagination a.active,
.pagination .current {
  background: var(--fox) !important;
  color: var(--white) !important;
  border-color: var(--fox) !important;
}

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

/* ── FLASH SPRÁVY ── */
#messages .message-ok {
  background: var(--sage) !important;
  border-left: 4px solid var(--forest) !important;
  color: var(--dark) !important;
  border-radius: 8px !important;
}
#messages .message-error {
  border-left: 4px solid var(--fox) !important;
  border-radius: 8px !important;
}

/* ── SLICK slider — nesmie meniť width inline ── */
.slick-slide,
.slick-cloned {
  /* bez width !important */
}