/* ============================================================
   STAY CHIC — Beauty & Cosmetics | "Clean Sage" Design
   Farby: Sage Green + Warm Terracotta + Cream White
   Fonty: Poppins (nav/headings) + Open Sans (body)
   ============================================================ */

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

/* ── DESIGN TOKENS ── */
:root {
  --sage:         #6B9E73;   /* sage green — hlavný akcentná farba */
  --sage-dark:    #4A7352;   /* tmavá sage */
  --sage-light:   #A8C9A8;   /* svetlá sage */
  --sage-pale:    #EDF5EE;   /* veľmi bledá sage */
  --terra:        #C4785A;   /* warm terracotta — sekundárny akcentná */
  --terra-light:  #E0A88A;   /* svetlá terracotta */
  --terra-pale:   #FAF0EB;   /* very pale terracotta */
  --cream:        #FAFAF6;   /* cream background */
  --warm-white:   #F5F3F0;   /* warm white — sidebar */
  --dark:         #1E2420;   /* deep forest dark */
  --warm-gray:    #7A7570;   /* warm gray text */
  --warm-gray-lt: #BAB4AE;   /* light warm gray */
  --white:        #FFFFFF;
  --text:         #2C2A28;   /* warm dark text */
}

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

/* ── TOP HEADER STRIP ── */
#container-top-header-strip {
  background: var(--sage-pale) !important;
  border-bottom: 1px solid var(--sage-light) !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(--sage-dark) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}
#container-top-header-strip a:hover {
  color: var(--terra) !important;
}

/* ── HEADER ── */
#container-header {
  background: var(--white) !important;
  border-bottom: 2px solid var(--sage-pale) !important;
  box-shadow: 0 2px 14px rgba(107, 158, 115, 0.08) !important;
}

/* Header left menu (logo area) */
#header-left-menu {
  background: var(--warm-white) !important;
  border-bottom: 2px solid var(--sage-light) !important;
}

/* Icons area */
#icons-left-menu {
  background: var(--warm-white) !important;
  border-bottom: 1px solid rgba(107, 158, 115, 0.15) !important;
}
#icons-left-menu a,
#icons-left-menu .material-icons {
  color: var(--warm-gray) !important;
  transition: color 0.2s !important;
}
#icons-left-menu a:hover,
#icons-left-menu a:hover .material-icons {
  color: var(--sage) !important;
}
#icons-left-menu input[type="text"] {
  background: var(--cream) !important;
  border: 1px solid var(--sage-light) !important;
  color: var(--text) !important;
  font-family: 'Open Sans', sans-serif !important;
  border-radius: 20px !important;
}
#icons-left-menu input[type="text"]::placeholder {
  color: var(--warm-gray-lt) !important;
}

/* Mobile hamburger */
#mobile-hamburger-menu span {
  background: var(--sage) !important;
}

/* ── SIDEBAR / CATEGORY ── */
.span-6 {
  background: var(--warm-white) !important;
}

#category {
  background: var(--warm-white) !important;
}

#category .category-tree,
#category ul {
  background: transparent !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#category .category-tree li,
#category ul li {
  background: transparent !important;
  border-bottom: 1px solid rgba(107, 158, 115, 0.12) !important;
}

#category .category-tree li a,
#category ul li a,
#category a.menu-lines {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--warm-gray) !important;
  display: block !important;
  padding: 13px 18px !important;
  transition: color 0.2s, padding-left 0.2s, background 0.2s !important;
  border-left: 3px solid transparent !important;
}

#category .category-tree li a:hover,
#category ul li a:hover,
#category a.menu-lines:hover {
  color: var(--sage-dark) !important;
  background: var(--sage-pale) !important;
  padding-left: 24px !important;
  border-left-color: var(--sage) !important;
}

#category li.selected > a,
#category li.active > a,
#category li.current > a {
  color: var(--sage-dark) !important;
  border-left-color: var(--sage) !important;
  background: var(--sage-pale) !important;
}

/* Sub-kategórie */
#category .category-tree li li a,
#category ul li ul li a {
  font-size: 11px !important;
  font-weight: 400 !important;
  padding-left: 28px !important;
  color: var(--warm-gray-lt) !important;
  text-transform: none !important;
}
#category .category-tree li li a:hover,
#category ul li ul li a:hover {
  color: var(--sage) !important;
  padding-left: 34px !important;
}

/* ── NAVIGÁCIA (articles-menu) ── */
#container-articles-menu {
  background: var(--white) !important;
  border-bottom: 2px solid var(--sage-pale) !important;
}
#articles-menu {
  background: transparent !important;
}
#articles-menu ul li,
.articles-menu-long ul li {
  background: transparent !important;
}
#articles-menu ul li > a,
.articles-menu-long ul li > a {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--warm-gray) !important;
  padding: 14px 18px !important;
  transition: color 0.2s !important;
}
#articles-menu ul li > a:hover {
  color: var(--sage-dark) !important;
}
#articles-menu ul li.active > a,
#articles-menu ul li.selected > a {
  color: var(--sage-dark) !important;
  border-bottom: 2px solid var(--sage) !important;
}
#articles-menu ul li ul {
  background: var(--white) !important;
  border-top: 2px solid var(--sage-light) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 6px 24px rgba(107, 158, 115, 0.12) !important;
}
#articles-menu ul li ul li a {
  color: var(--warm-gray) !important;
  font-size: 11px !important;
}
#articles-menu ul li ul li a:hover {
  color: var(--sage-dark) !important;
}

/* ── BREADCRUMB ── */
.top-navigation,
#container-navigation-top {
  background: var(--sage-pale) !important;
  border-bottom: 1px solid var(--sage-light) !important;
}
.top-navigation a,
.top-navigation span {
  color: var(--sage-dark) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.top-navigation a:hover {
  color: var(--terra) !important;
}

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

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

/* ── SECTION TITLES ── */
h1, .products-title, .catalog-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
  letter-spacing: 0.04em !important;
}

.span-25 > h2,
.span-25 > h3,
.products-index-title h2,
.products-index-title h3 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
  font-size: 16px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-left: 4px solid var(--sage) !important;
  padding-left: 14px !important;
  margin-bottom: 22px !important;
}

/* ── PRODUCT CARDS (.product-second) ── */
.product-second {
  border-radius: 10px !important;
  background: var(--white) !important;
  box-shadow: 0 2px 14px rgba(107, 158, 115, 0.07) !important;
  transition: box-shadow 0.3s, transform 0.3s !important;
  overflow: hidden !important;
  border: 1px solid rgba(107, 158, 115, 0.1) !important;
}
.product-second:hover {
  box-shadow: 0 10px 36px rgba(107, 158, 115, 0.18) !important;
  transform: translateY(-4px) !important;
  border-color: var(--sage-light) !important;
}

/* Product name */
.product-second .catalog-delivery_name,
.product-second [class*="delivery_name"],
.product-second h3,
.product-second h4,
.product-content-title,
.product-content-title a {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  color: var(--dark) !important;
}

/* Product price */
.product-second .price,
.product-second [class*="price"] {
  color: var(--terra) !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
}

.product-second .old-price,
.product-second [class*="old-price"] {
  color: var(--warm-gray-lt) !important;
  font-family: 'Open Sans', sans-serif !important;
}

/* ── BADGES ── */
.action {
  background: var(--terra) !important;
  color: var(--white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
}

.clear {
  background: var(--sage-dark) !important;
  color: var(--white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
}

.startup {
  background: var(--sage) !important;
  color: var(--white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
}

.top_product {
  background: var(--terra-pale) !important;
  color: var(--terra) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
}

.last_items,
div.last_items,
.container-product-actions .last_items,
.product-second .last_items {
  background: var(--terra) !important;
  color: var(--white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 20px !important;
}

/* ── TLAČIDLÁ ── */
.button-add-cart-button,
.add-cart-catalog .button-type-1,
input.button-add-cart-button {
  background: var(--sage) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 24px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  font-size: 12px !important;
  transition: background 0.25s !important;
}
.button-add-cart-button:hover,
.add-cart-catalog .button-type-1:hover {
  background: var(--sage-dark) !important;
}

.detail-button-catalog .button-type-1:not(.button-add-cart-button) {
  background: transparent !important;
  color: var(--sage-dark) !important;
  border: 1.5px solid var(--sage-light) !important;
  border-radius: 24px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  transition: border-color 0.25s, background 0.25s !important;
}
.detail-button-catalog .button-type-1:not(.button-add-cart-button):hover {
  border-color: var(--sage) !important;
  background: var(--sage-pale) !important;
}

.button-type-1,
a.button-type-1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 24px !important;
  font-size: 12px !important;
}

/* Cart in header */
#container-header .cart-header-container,
#container-header .small-cart,
#top-header-cart {
  background: var(--sage-pale) !important;
  border-radius: 24px !important;
  color: var(--sage-dark) !important;
}
#container-header .cart-header-container a,
#container-header .small-cart a,
#top-header-cart a {
  color: var(--sage-dark) !important;
  font-weight: 600 !important;
}

/* ── NEWSLETTER ── */
#container-newsletter {
  background: var(--sage-pale) !important;
  border-top: 3px solid var(--sage-light) !important;
  position: relative !important;
}
#container-newsletter::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(107,158,115,0.12) 0%, rgba(196,120,90,0.08) 100%) !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(--dark) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
#container-newsletter input[type="text"],
#container-newsletter input[type="email"] {
  border-radius: 24px 0 0 24px !important;
  border: 1.5px solid var(--sage-light) !important;
  background: var(--white) !important;
  color: var(--text) !important;
  font-family: 'Open Sans', sans-serif !important;
}
#container-newsletter input[type="text"]::placeholder,
#container-newsletter input[type="email"]::placeholder {
  color: var(--warm-gray-lt) !important;
}
#container-newsletter input[type="submit"] {
  background: transparent !important;
  color: var(--white) !important;
  border: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
#container-newsletter #button-addNewsletter,
#container-newsletter .button-type-1 {
  background: var(--sage) !important;
  border-radius: 0 24px 24px 0 !important;
  transition: background 0.25s !important;
}
#container-newsletter #button-addNewsletter:hover,
#container-newsletter .button-type-1:hover {
  background: var(--sage-dark) !important;
}

/* ── FOOTER ── */
#container-footer {
  background: var(--dark) !important;
  border-top: 3px solid var(--sage) !important;
  color: var(--warm-gray-lt) !important;
}
#container-footer,
#container-footer p,
#container-footer span,
#container-footer li,
#container-footer div {
  color: var(--warm-gray-lt) !important;
  font-family: 'Open Sans', sans-serif !important;
}
#container-footer a {
  color: var(--warm-gray-lt) !important;
  transition: color 0.2s !important;
}
#container-footer a:hover {
  color: var(--sage-light) !important;
}
#container-footer h3,
#container-footer h4,
#container-footer .group-title,
#container-footer strong {
  color: var(--white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* ── NEWS SLIDE ── */
#news-slide {
  background: var(--sage) !important;
}
#news-slide a,
#news-slide span {
  color: var(--white) !important;
  font-family: 'Poppins', sans-serif !important;
}

/* ── STRÁNKOVANIE ── */
.pagination a,
.pagination span {
  font-family: 'Poppins', sans-serif !important;
  border-radius: 24px !important;
  font-size: 12px !important;
}
.pagination a.active,
.pagination .current {
  background: var(--sage) !important;
  color: var(--white) !important;
  border-color: var(--sage) !important;
}
.pagination a:hover {
  border-color: var(--sage) !important;
  color: var(--sage-dark) !important;
}

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

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

/* ── DETAIL PRODUKTU ── */
#container-product-detail h1,
#container-product-detail .product-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
  letter-spacing: 0.03em !important;
}
#container-product-detail .price-detail,
#container-product-detail .price {
  color: var(--terra) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
}