/* ══════════════════════════════════════════════════════════════
   OPTIC — webuni.css  |  Fresh Modern Revitalizácia 2026
   Paleta: Ink #1A1A1A · Amber #E8A020 · Silver #F4F4F2
           Steel #6B7280 · Glass-Blue #2B7CB0
   Písma: Cormorant Garamond (serif nadpisy) + DM Sans (body)
   ══════════════════════════════════════════════════════════════ */

/* ── 0. GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* ── 1. CSS PREMENNÉ ─────────────────────────────────────────── */
:root {
  --ink:         #1A1A1A;
  --ink-light:   #2D2D2D;
  --amber:       #E8A020;
  --amber-dark:  #C88A10;
  --amber-light: #F5C050;
  --amber-pale:  #FEF3DC;
  --silver:      #F4F4F2;
  --silver-dark: #EBEBEA;
  --border:      #E0E0DE;
  --steel:       #6B7280;
  --steel-light: #9CA3AF;
  --white:       #FFFFFF;
  --bg:          #FAFAFA;
  --text:        #1A1A1A;
  --text-muted:  #6B7280;
  --success:     #2D8653;
  --glass:       #2B7CB0;
  --radius:      6px;
  --radius-sm:   4px;
  --radius-lg:   10px;
  --shadow:      0 2px 12px rgba(0,0,0,.07);
  --shadow-hover:0 6px 24px rgba(0,0,0,.13);
  --transition:  .22s ease;
}

/* ── 2. GLOBÁLNE ZÁKLADY ─────────────────────────────────────── */
html, body {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
}

a { color: var(--ink) !important; transition: color var(--transition) !important; }
a:hover { color: var(--amber-dark) !important; text-decoration: none !important; }

label { color: var(--text) !important; }

h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}

/* ── 3. TOP LIŠTA ────────────────────────────────────────────── */
#container-top-header-strip {
  background: var(--ink) !important;
  border-bottom: none !important;
}

#container-top-header-strip .container {
  background: var(--ink) !important;
}

/* Všetky texty/linky v top stripe */
#container-top-header-strip,
#container-top-header-strip .container,
#container-top-header-strip *:not(.material-icons) {
  color: rgba(255,255,255,.65) !important;
  font-size: 11.5px !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: .03em !important;
}

#container-top-header-strip a {
  color: rgba(255,255,255,.65) !important;
  text-decoration: none !important;
}

#container-top-header-strip a:hover {
  color: var(--amber-light) !important;
}

#container-top-header-strip .material-icons {
  font-family: 'Material Icons' !important;
  font-size: 15px !important;
  vertical-align: middle !important;
  margin-right: 3px !important;
  color: rgba(255,255,255,.5) !important;
}

/* Mobilný hamburger v top stripe */
#mobile-hamburger-menu span {
  background: rgba(255,255,255,.7) !important;
}

/* ── 4. HEADER ───────────────────────────────────────────────── */
#container-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.05) !important;
}

#container-header .container,
#container-header .span-25 {
  background: var(--white) !important;
}

#header {
  background: var(--white) !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 0 !important;
}

#top-home, #top-home:hover {
  color: var(--ink) !important;
}

/* ── 5. HLAVNÁ NAVIGÁCIA — OKULIARE KATEGÓRIE ───────────────── */
#articles-menu {
  background: transparent !important;
  border: none !important;
}

#articles-menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 4px !important;
}

#articles-menu ul li > a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  padding: 8px 18px !important;
  display: block !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--transition), border-color var(--transition) !important;
}

#articles-menu ul li > a:hover,
#articles-menu ul li.active > a,
#articles-menu ul li.current > a {
  color: var(--amber-dark) !important;
  border-bottom-color: var(--amber) !important;
}

/* Submenu */
#articles-menu .submenu {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--amber) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

#articles-menu .submenu li a {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--steel) !important;
  padding: 9px 18px !important;
  letter-spacing: .02em !important;
}

#articles-menu .submenu li a:hover {
  color: var(--amber-dark) !important;
  background: var(--amber-pale) !important;
}

/* ── 6. VYHĽADÁVANIE ─────────────────────────────────────────── */
#search, .search-form, #search-form {
  background: var(--silver) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  transition: border-color var(--transition) !important;
}

#search:focus-within, .search-form:focus-within {
  border-color: var(--amber) !important;
}

#search input[type="text"], #search-input, input[name="search"] {
  background: transparent !important;
  border: none !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
}

#search input[type="text"]::placeholder, input[name="search"]::placeholder {
  color: var(--steel-light) !important;
}

#search button, .search-button, button[type="submit"] {
  background: var(--amber) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  padding: 0 14px !important;
  transition: background var(--transition) !important;
}

#search button:hover, .search-button:hover {
  background: var(--amber-dark) !important;
}

/* ── 7. KOŠÍK V HEADERI ──────────────────────────────────────── */
#cart-count-info, .cart-head, #small-cart {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--ink) !important;
}

.cart-count, #cart-products-count {
  background: var(--amber) !important;
  color: var(--white) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ── 8. BANNER/HERO SLIDER ───────────────────────────────────── */
.banner-slider, .slick-slider.banner-slider {
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Slider text overlay */
.banner-slider .slider-text h2,
.banner-slider .slider-content h2,
.banner-slide-text {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
}

/* ── 9. PRODUKTOVÉ KARTY ─────────────────────────────────────── */
.product-first,
.product-second,
.product-third {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
}

.product-first:hover,
.product-second:hover,
.product-third:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--amber-light) !important;
}

/* Produkt — obrázok pozadie */
.product-images,
.product-third .product-images {
  background: var(--silver) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  overflow: hidden !important;
}

/* Produkt — meno */
.product-name a,
.product-third .product-name a,
a[id^="product-id-"] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: color var(--transition) !important;
}

.product-name a:hover, a[id^="product-id-"]:hover {
  color: var(--amber-dark) !important;
}

/* Produkt — SKLADOM */
.catalog-delivery_name, .in-stock-text, .product-on-stock {
  font-size: 11px !important;
  color: var(--success) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

/* Produkt — cena */
.product-price-value, .price-value, .price,
.product-third .price {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.product-old-price, .old-price, .price-before {
  color: var(--steel-light) !important;
  text-decoration: line-through !important;
  font-size: 12px !important;
}

/* Produkt — Do košíka tlačidlo */
.button-type-2, .do-kosika, .catalog-buy,
.product-third .button-type-2,
a.button-type-2, button.button-type-2 {
  background: var(--amber) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  padding: 8px 16px !important;
  transition: background var(--transition), transform var(--transition) !important;
  cursor: pointer !important;
}

.button-type-2:hover, .do-kosika:hover, .catalog-buy:hover,
a.button-type-2:hover {
  background: var(--amber-dark) !important;
  transform: translateY(-1px) !important;
}

/* ── 10. AKČNÉ ODZNAKY ───────────────────────────────────────── */
/* Skutočné triedy z DOM: .startup (Doporučujeme), .top_bestseller (TOP bestseller) */

/* Spoločné odznaky */
.startup, .top_bestseller, .container-product-actions div {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px 10px !important;
}

/* "Doporučujeme" — ink dark badge */
.startup {
  background: var(--ink) !important;
  color: var(--white) !important;
}

/* "TOP bestseller" — glass blue badge */
.top_bestseller {
  background: var(--glass) !important;
  color: var(--white) !important;
}

/* Zľava badge (napr. -35%) */
.discount-action-text, .discount-text,
[class*="discount-action"], [class*="sale-badge"],
.container-product-actions .sale {
  background: var(--amber) !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px 8px !important;
}

/* Všeobecné fallback */
.badge-text, .product-action-icon { color: var(--white) !important; }

/* ── 11. SEKČNÉ NADPISY (Doporučujeme, ...) ──────────────────── */
.products-title-with-line,
p.products-title-with-line {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  text-align: center !important;
  letter-spacing: .02em !important;
  position: relative !important;
  overflow: visible !important;
}

.products-title-with-line::before,
.products-title-with-line::after {
  background: var(--border) !important;
}

/* ── 12. KATALÓG — FILTER ────────────────────────────────────── */
#top-category-panel, .top-category-panel {
  background: var(--silver) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 12px 18px !important;
}

#top-category-panel label,
#top-category-panel-products-on-storage label {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Range slider */
.ui-slider-horizontal {
  background: var(--border) !important;
  height: 4px !important;
  border: none !important;
}

.ui-slider .ui-slider-handle {
  background: var(--amber) !important;
  border: 2px solid var(--amber-dark) !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  top: -7px !important;
  cursor: pointer !important;
}

.ui-slider .ui-slider-range {
  background: var(--amber) !important;
}

/* Select dropdowns */
select.select-sort, select[name*="sort"], select[name*="count"],
.catalog-filter select {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
}

/* ── 13. BREADCRUMB / NAVIGÁCIA ──────────────────────────────── */
#container-navigation-top {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}

#navigation, .top-navigation {
  font-size: 12px !important;
}

#navigation a, .top-navigation a {
  color: var(--steel) !important;
  font-size: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
}

#navigation a:hover, .top-navigation a:hover {
  color: var(--amber-dark) !important;
}

.navigationLine {
  border-top: 1px solid var(--border) !important;
}

/* ── 14. DETAIL PRODUKTU ─────────────────────────────────────── */
.catalog-detail .product-name h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* Pridaj do košíka — detail */
.button-type-1, #add-to-cart, .add-to-cart-button,
input[type="submit"].add-to-cart {
  background: var(--amber) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background var(--transition), transform var(--transition) !important;
}

.button-type-1:hover, #add-to-cart:hover {
  background: var(--amber-dark) !important;
  transform: translateY(-1px) !important;
}

/* Počet kusov input */
.product-count input, input[name="count"] {
  background: var(--silver) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* Tabuľka parametrov */
.product-params table, .detail-params table {
  border-collapse: collapse !important;
  width: 100% !important;
}

.product-params tr:nth-child(odd), .detail-params tr:nth-child(odd) {
  background: var(--silver) !important;
}

.product-params tr:nth-child(even), .detail-params tr:nth-child(even) {
  background: var(--white) !important;
}

.product-params td, .detail-params td {
  padding: 10px 16px !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--ink) !important;
}

.product-params td:first-child, .detail-params td:first-child {
  font-weight: 600 !important;
  color: var(--steel) !important;
}

/* ── 15. NEWSLETTER ──────────────────────────────────────────── */
#container-newsletter {
  background: var(--ink) !important;
  border-top: 3px solid var(--amber) !important;
}

#container-newsletter,
#container-newsletter * {
  color: var(--white) !important;
}

#container-newsletter p,
#container-newsletter .newsletter-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  letter-spacing: .02em !important;
}

#addNewsletter, #newsletter-email, input[name="newsletter_email"] {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
  color: var(--white) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
}

#addNewsletter::placeholder, input[name="newsletter_email"]::placeholder {
  color: rgba(255,255,255,.4) !important;
}

#button-addNewsletter, #button-addNewsletter.button-type-1 {
  background: var(--amber) !important;
  background-image: none !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  overflow: hidden !important;
}

#button-addNewsletter input, #button-addNewsletter .button-type-1 input {
  background: transparent !important;
  color: var(--white) !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  padding: 12px 22px !important;
  cursor: pointer !important;
}

#button-addNewsletter:hover {
  background: var(--amber-dark) !important;
}

/* ── 16. FOOTER ──────────────────────────────────────────────── */
#container-footer {
  background: #111111 !important;
  border-top: 2px solid var(--amber) !important;
  color: rgba(255,255,255,.7) !important;
}

#container-footer .container {
  background: #111111 !important;
}

#footer, #info-articles {
  background: transparent !important;
}

#container-footer h4, #container-footer h3,
#footer h4, #footer h3,
#info-articles h4, #info-articles h3 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--amber-light) !important;
  margin-bottom: 14px !important;
}

#container-footer a, #footer a, #info-articles a {
  color: rgba(255,255,255,.6) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color var(--transition) !important;
  display: block !important;
  line-height: 1.8 !important;
}

#container-footer a:hover, #footer a:hover, #info-articles a:hover {
  color: var(--amber-light) !important;
}

#container-footer p, #footer p, .footer-copyright {
  color: rgba(255,255,255,.4) !important;
  font-size: 11px !important;
}

/* DPD, Slovenská Pošta logosy */
#container-footer img {
  opacity: .75 !important;
  filter: brightness(0) invert(1) !important;
  transition: opacity var(--transition) !important;
}

#container-footer img:hover {
  opacity: 1 !important;
}

/* ── 17. FORMULÁRE (KOŠÍK, REGISTRÁCIA) ──────────────────────── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  transition: border-color var(--transition) !important;
  padding: 8px 12px !important;
}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: var(--amber) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(232,160,32,.12) !important;
}

input[type="submit"], button[type="submit"] {
  background: var(--amber) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background var(--transition) !important;
}

input[type="submit"]:hover, button[type="submit"]:hover {
  background: var(--amber-dark) !important;
}

/* ── 18. SLICK SLIDER OCHRANA ────────────────────────────────── */
/* Nesmie prepisovať inline width od Slick JS */
.slick-dots li button:before {
  color: var(--amber) !important;
  opacity: .35 !important;
}

.slick-dots li.slick-active button:before {
  color: var(--amber) !important;
  opacity: 1 !important;
}

.slick-prev:before, .slick-next:before {
  color: var(--ink) !important;
  opacity: .7 !important;
}

/* Šírka slider kariet — zachovaj slick inline šírku */
.product-third.slick-slide {
  margin: 0 4px !important;
}

/* ── 19. SEO BOX ─────────────────────────────────────────────── */
.info-articles, .seo-box, .info-articles-not-shorten-except-mobile {
  background: var(--silver) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px 24px !important;
  color: var(--steel) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

.info-articles h1, .info-articles h2, .info-articles h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--ink) !important;
  font-size: 22px !important;
  margin-bottom: 12px !important;
}

/* ── 20. FLASH SPRÁVY ────────────────────────────────────────── */
#messages, .message {
  border-radius: var(--radius) !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 12px 18px !important;
}

.message-success {
  background: #EDF7F1 !important;
  border-left: 3px solid var(--success) !important;
  color: #1B5E38 !important;
}

.message-error {
  background: #FEF0EE !important;
  border-left: 3px solid #D9534F !important;
  color: #7A1F1D !important;
}

/* ── 21. STRÁNKA 404 ─────────────────────────────────────────── */
.default-error .content h1, .not-found-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--ink) !important;
}

.button-back, a.button-back {
  background: var(--amber) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* ── 22. ARTICLES (HORNÉ ČLÁNKY) ─────────────────────────────── */
.articles-show-modules .content h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 30px !important;
}

/* ── 23. OPRAVY A PATCHWORK ──────────────────────────────────── */

/* Linky cez produktové obrázky — nemajú mať modrú browser farbu */
.product-images a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Kategória na uvodnej stránke — textové boxy */
.index-block-text, .index-block {
  background: var(--silver) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}

.index-block-text h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  color: var(--ink) !important;
}

/* Paginatia */
.pagination a, .pagination span {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
}

.pagination .active, .pagination a:hover {
  background: var(--amber) !important;
  color: var(--white) !important;
  border-color: var(--amber) !important;
}

/* Hviezdy hodnotenia */
.star-rating, .rating-stars {
  color: var(--amber) !important;
}

/* Checkbox a radio */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--amber) !important;
}

/* Košík — množstvo */
.cart-quantity, .quantity-input {
  background: var(--silver) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

/* Riadky v košíku */
.cart-row:nth-child(odd), .order-table tr:nth-child(odd) {
  background: var(--silver) !important;
}

/* ── 24. MOBILNÁ RESPONZIVITA ────────────────────────────────── */
@media (max-width: 768px) {
  #container-top-header-strip {
    padding: 6px 0 !important;
  }

  #articles-menu ul {
    flex-direction: column !important;
    gap: 0 !important;
  }

  #articles-menu ul li > a {
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 16px !important;
  }

  .product-first, .product-second, .product-third {
    border-radius: var(--radius) !important;
  }
}