/* ============================================================
   OPTIC — Photography & Camera Shop | "Darkroom Pro" Design
   Farby: Ink Black + Warm Amber + Steel Gray
   Fonty: Oswald (headings/nav) + DM Sans (body)
   ============================================================ */

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

/* ── DESIGN TOKENS ── */
:root {
  --ink:          #0F1117;   /* near-black */
  --graphite:     #1A1D26;   /* sidebar / dark surfaces */
  --steel:        #252A38;   /* card backgrounds */
  --steel-mid:    #30364A;   /* hover states */
  --amber:        #F0A500;   /* warm amber accent */
  --amber-dark:   #C07A00;   /* darker amber */
  --amber-light:  #FFD060;   /* lighter amber */
  --silver:       #8B9CB0;   /* muted silver text */
  --silver-light: #C0CCDA;   /* light silver */
  --white:        #FFFFFF;
  --off-white:    #EEF0F4;   /* soft background */
  --text:         #C8D0DC;   /* main body text on dark */
  --text-dark:    #1A1D26;   /* dark text on light */
}

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

/* ── TOP HEADER STRIP ── */
#container-top-header-strip {
  background: var(--ink) !important;
  border-bottom: 1px solid var(--steel-mid) !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(--silver) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
}
#container-top-header-strip a:hover {
  color: var(--amber) !important;
}

/* ── HEADER ── */
#container-header {
  background: var(--graphite) !important;
  border-bottom: 3px solid var(--amber) !important;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5) !important;
}
#container-header,
#container-header div,
#container-header span,
#container-header a {
  color: var(--white) !important;
}
#container-header a:hover {
  color: var(--amber) !important;
}

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

/* Icons left menu (login, search) */
#icons-left-menu {
  background: var(--steel) !important;
}
#icons-left-menu a,
#icons-left-menu .material-icons {
  color: var(--silver-light) !important;
  transition: color 0.2s !important;
}
#icons-left-menu a:hover,
#icons-left-menu a:hover .material-icons {
  color: var(--amber) !important;
}

/* Search in left menu */
#icons-left-menu #searchform input[type="text"],
#icons-left-menu input[type="text"] {
  background: var(--ink) !important;
  border: 1px solid var(--steel-mid) !important;
  color: var(--silver-light) !important;
  font-family: 'DM Sans', sans-serif !important;
  border-radius: 4px !important;
}
#icons-left-menu input[type="text"]::placeholder {
  color: var(--silver) !important;
}

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

/* ── LEFT SIDEBAR / CATEGORY MENU ── */
.span-6 {
  background: var(--graphite) !important;
}

/* Category tree container */
#category {
  background: var(--graphite) !important;
}

/* Category list items */
#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(255,255,255,0.05) !important;
}

/* Category links */
#category .category-tree li a,
#category ul li a,
#category a.menu-lines {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--silver-light) !important;
  display: block !important;
  padding: 12px 16px !important;
  transition: color 0.2s, background 0.2s, padding-left 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(--amber) !important;
  background: rgba(240, 165, 0, 0.07) !important;
  padding-left: 20px !important;
  border-left-color: var(--amber) !important;
}

/* Active/selected category */
#category li.selected > a,
#category li.active > a,
#category li.current > a {
  color: var(--amber-light) !important;
  border-left-color: var(--amber-light) !important;
  background: rgba(240, 165, 0, 0.12) !important;
}

/* Sub-categories */
#category .category-tree li li a,
#category ul li ul li a {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  padding-left: 28px !important;
  color: var(--silver) !important;
}
#category .category-tree li li a:hover,
#category ul li ul li a:hover {
  color: var(--amber) !important;
  padding-left: 34px !important;
}

/* ── NAVIGÁCIA (articles-menu — ak existuje) ── */
#container-articles-menu {
  background: var(--graphite) !important;
  border-bottom: 3px solid var(--amber) !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: 'Oswald', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--silver-light) !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(--amber) !important;
  background: rgba(240, 165, 0, 0.08) !important;
}
#articles-menu ul li.active > a,
#articles-menu ul li.selected > a {
  color: var(--amber-light) !important;
  border-bottom: 3px solid var(--amber) !important;
}

/* Dropdown */
#articles-menu ul li ul {
  background: var(--ink) !important;
  border-top: 2px solid var(--amber) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5) !important;
}
#articles-menu ul li ul li a {
  font-size: 12px !important;
  color: var(--silver) !important;
  text-transform: none !important;
}
#articles-menu ul li ul li a:hover {
  color: var(--amber) !important;
}

/* ── BREADCRUMB / NAVIGATION TOP ── */
.top-navigation,
#container-navigation-top {
  background: var(--steel) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.top-navigation a,
.top-navigation span {
  color: var(--silver) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.top-navigation a:hover {
  color: var(--amber) !important;
}

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

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

/* ── SECTION TITLES ── */
.products-title,
.catalog-title,
h1, h2.section-title {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Section headers (AKCIA / DOPORUČUJEME) */
.span-25 > h2,
.span-25 > h3,
.products-index-title h2,
.products-index-title h3 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-size: 20px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-left: 4px solid var(--amber) !important;
  padding-left: 14px !important;
  margin-bottom: 20px !important;
}

/* ── PRODUCT CARDS ── */
.product-third {
  border-radius: 6px !important;
  background: var(--white) !important;
  box-shadow: 0 2px 12px rgba(15, 17, 23, 0.10) !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 17, 23, 0.08) !important;
}
.product-third:hover {
  box-shadow: 0 8px 32px rgba(15, 17, 23, 0.18) !important;
  transform: translateY(-4px) !important;
  border-color: var(--amber) !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: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* Product price */
.product-third .price,
.product-third [class*="price"] {
  color: var(--amber-dark) !important;
  font-weight: 700 !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.03em !important;
}

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

/* ── BADGES ── */
.action {
  background: var(--amber) !important;
  color: var(--ink) !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
}

/* Percentuálna zľava */
.clear {
  background: var(--graphite) !important;
  color: var(--amber-light) !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
}

/* Startup / doporučujeme */
.startup {
  background: var(--amber) !important;
  color: var(--ink) !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* Top product badge */
.top_product {
  background: var(--steel-mid) !important;
  color: var(--silver-light) !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
}

/* Last items / posledné kusy */
.last_items,
div.last_items,
.container-product-actions .last_items,
.product-third .last_items {
  background: #C0441A !important;
  color: var(--white) !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

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

/* DO KOŠÍKA */
.button-add-cart-button,
.add-cart-catalog .button-type-1,
input.button-add-cart-button {
  background: var(--amber) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 5px !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: background 0.2s !important;
}
.button-add-cart-button:hover,
.add-cart-catalog .button-type-1:hover {
  background: var(--amber-dark) !important;
}

/* DETAIL tlačidlo */
.detail-button-catalog .button-type-1:not(.button-add-cart-button) {
  background: var(--white) !important;
  color: var(--graphite) !important;
  border: 2px solid var(--steel-mid) !important;
  border-radius: 5px !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.detail-button-catalog .button-type-1:not(.button-add-cart-button):hover {
  background: var(--graphite) !important;
  color: var(--white) !important;
  border-color: var(--graphite) !important;
}

/* Všeobecné tlačidlá */
.button-type-1,
a.button-type-1 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Cart button in header */
#container-header .cart-header-container,
#container-header .small-cart,
#top-header-cart {
  background: var(--amber) !important;
  border-radius: 20px !important;
  color: var(--ink) !important;
}
#container-header .cart-header-container a,
#container-header .small-cart a,
#top-header-cart a {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

/* ── SEARCH BOX ── */
#container-top-header-strip input[type="text"],
.search-box input[type="text"] {
  border-radius: 4px 0 0 4px !important;
  border: 1px solid var(--steel-mid) !important;
  background: var(--ink) !important;
  color: var(--silver-light) !important;
  font-family: 'DM Sans', sans-serif !important;
}
#container-top-header-strip input[type="submit"],
.search-box input[type="submit"],
.search-box button {
  background: var(--amber) !important;
  border-radius: 0 4px 4px 0 !important;
  border: none !important;
  color: var(--ink) !important;
}

/* ── KOŠÍK V HEADERI ── */
#public-cart-fixed {
  background: var(--graphite) !important;
  border: 1px solid var(--amber) !important;
  border-radius: 6px !important;
}
#public-cart-fixed a,
#public-cart-fixed span {
  color: var(--silver-light) !important;
}
#public-cart-fixed .button-type-1 {
  background: var(--amber) !important;
  color: var(--ink) !important;
}

/* ── NEWSLETTER ── */
#container-newsletter {
  background: var(--graphite) !important;
  border-top: 4px solid var(--amber) !important;
  position: relative !important;
}
#container-newsletter::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(15,17,23,0.9) 0%, rgba(26,29,38,0.85) 60%, rgba(192,122,0,0.55) 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: 'Oswald', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}
#container-newsletter input[type="text"],
#container-newsletter input[type="email"] {
  border-radius: 4px 0 0 4px !important;
  border: 1px solid rgba(240, 165, 0, 0.4) !important;
  background: rgba(15,17,23,0.6) !important;
  color: var(--white) !important;
  font-family: 'DM Sans', sans-serif !important;
}
#container-newsletter input[type="text"]::placeholder,
#container-newsletter input[type="email"]::placeholder {
  color: var(--silver) !important;
}
#container-newsletter input[type="submit"] {
  background: transparent !important;
  color: var(--ink) !important;
  border: none !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
#container-newsletter #button-addNewsletter,
#container-newsletter .button-type-1 {
  background: var(--amber) !important;
  border-radius: 0 4px 4px 0 !important;
  transition: background 0.2s !important;
}
#container-newsletter #button-addNewsletter:hover,
#container-newsletter .button-type-1:hover {
  background: var(--amber-dark) !important;
}

/* ── FOOTER ── */
#container-footer {
  background: var(--ink) !important;
  border-top: 4px solid var(--amber) !important;
  color: var(--text) !important;
}
#container-footer,
#container-footer p,
#container-footer span,
#container-footer li,
#container-footer div {
  color: var(--silver) !important;
  font-family: 'DM Sans', sans-serif !important;
}
#container-footer a {
  color: var(--silver-light) !important;
  transition: color 0.2s !important;
}
#container-footer a:hover {
  color: var(--amber) !important;
}
#container-footer h3,
#container-footer h4,
#container-footer .group-title,
#container-footer strong {
  color: var(--white) !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

/* ── NEWS SLIDE ── */
#news-slide {
  background: var(--graphite) !important;
  border-left: 3px solid var(--amber) !important;
}
#news-slide a,
#news-slide span {
  color: var(--white) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
}

/* ── STRÁNKOVANIE ── */
.pagination a,
.pagination span {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
}
.pagination a.active,
.pagination .current {
  background: var(--amber) !important;
  color: var(--ink) !important;
  border-color: var(--amber) !important;
}
.pagination a:hover {
  background: var(--amber) !important;
  color: var(--ink) !important;
}

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

/* ── FLASH SPRÁVY ── */
#messages .message-ok {
  background: rgba(240, 165, 0, 0.12) !important;
  border-left: 4px solid var(--amber) !important;
  color: var(--ink) !important;
  border-radius: 5px !important;
}
#messages .message-error {
  border-left: 4px solid #C0441A !important;
  border-radius: 5px !important;
}

/* ── PRODUCT DETAIL ── */
#container-product-detail h1,
#container-product-detail .product-title {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
#container-product-detail .price-detail,
#container-product-detail .price {
  color: var(--amber-dark) !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  letter-spacing: 0.02em !important;
}