/*
Theme Name: Astra Child — Smart Home Shop
Template: astra
Version: 1.0.0
Description: Smart Home Shop — Velvet Dusk premium storefront (L3.5). Topla aspiraciona prodavnica za dom (teal + bordo + sampanj). Fork ecom-niche-blueprint.
*/

/* ===================================================================
   SITE-WIDE TOKENS (header/footer load everywhere; home sections add own)
   =================================================================== */
:root {
  /* === Canonical brand tokens (el-* = single source of truth) === */
  --el-accent:     #2196F3;
  --el-accent-2:   #38BDF8;
  --el-accent-rgb: 33,150,243;
  --el-bg-0:       #070D16;
  --el-bg-1:       #0D1626;
  --el-text:       #EAF2FF;
  --el-muted:      #9FB3CC;
  --el-maxw:       1320px;

  /* === Legacy / component aliases (map to el-*) === */
  --als-accent:        var(--el-accent);
  --als-accent-hover:  #1976D2;
  --bg-primary:        var(--el-bg-1);
  --bg-secondary:      #13202E;
  --text-primary:      var(--el-text);
  --text-secondary:    var(--el-muted);

  --elx-accent:        var(--el-accent);
  --elx-accent-2:      var(--el-accent-2);
  --elx-accent-hover:  #1976D2;
  --elx-ink-0:         var(--el-bg-0);
  --elx-ink-1:         var(--el-bg-1);
  --elx-ink-2:         #13202E;
  --elx-line:          rgba(56, 189, 248, 0.16);
  --elx-glass:         rgba(11, 22, 34, 0.72);
  --elx-text:          var(--el-text);
  --elx-text-soft:     var(--el-muted);
  --elx-text-dim:      #64748B;
  --elx-font:          'Inter', system-ui, -apple-system, sans-serif;
  --elx-font-display:  'Sora', 'Inter', system-ui, sans-serif;
  --elx-topbar-h:      38px;
  --elx-header-h:      66px;
}

body { font-family: 'Inter', system-ui, sans-serif; }

.elektronika-cta {
  background: var(--als-accent); color: #fff; padding: 16px 32px;
  border-radius: 6px; font-weight: 700; text-decoration: none;
  display: inline-block; transition: background 0.2s ease;
}
.elektronika-cta:hover { background: var(--als-accent-hover); color: #fff; }

/* Scarcity oznaka "još X komada" */
.als-scarcity {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px 0; padding: 6px 12px; border-radius: 6px;
  background: rgba(33, 150, 243, 0.12); color: var(--als-accent);
  font-weight: 700; font-size: 14px;
}
.als-scarcity svg { width: 16px; height: 16px; }

/* ===================================================================
   HIDE Astra default masthead — custom header zamenjuje (site-wide)
   =================================================================== */
#masthead,
.site-header,
.ast-above-header-wrap,
.ast-below-header-wrap,
.ast-main-header-wrap,
.main-header-bar-wrap { display: none !important; }

/* ===================================================================
   CUSTOM HEADER
   =================================================================== */
.elx-headwrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  font-family: var(--elx-font);
  transition: background .35s ease, box-shadow .35s ease;
}

/* top utility bar */
.elx-topbar {
  height: var(--elx-topbar-h);
  background: linear-gradient(90deg, var(--elx-accent-hover), var(--elx-accent));
  color: #EAF5FF; display: flex; align-items: center;
  font-size: 12.5px; font-weight: 600;
}
.elx-topbar-inner {
  max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.elx-topbar-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.elx-topbar-item svg { width: 16px; height: 16px; opacity: .9; }

/* main header bar */
.elx-header {
  height: var(--elx-header-h); display: flex; align-items: center;
  background: var(--elx-glass);
  border-bottom: 1px solid var(--elx-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .35s ease, border-color .35s ease;
}
.elx-header-inner {
  max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
}

/* transparent over hero until scroll (front page only) */
.elx-headwrap.elx-on-hero:not(.is-scrolled) .elx-header {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.elx-headwrap.is-scrolled { box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.elx-headwrap.is-scrolled .elx-header { background: rgba(7, 13, 22, 0.92); }

/* brand */
.elx-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.elx-brand-mark {
  width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(140deg, var(--elx-accent) 0%, var(--elx-accent-2) 100%);
  box-shadow: 0 6px 20px rgba(33,150,243,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.elx-brand-mark svg { width: 22px; height: 22px; }
.elx-brand-text {
  font-family: var(--elx-font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -.02em; color: var(--elx-text); line-height: 1;
}
.elx-brand-text b { color: var(--elx-accent-2); font-weight: 800; }

/* primary nav */
.elx-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.elx-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.elx-menu li { position: relative; }
.elx-menu a {
  display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 9px;
  color: var(--elx-text-soft); text-decoration: none; font-size: 15px; font-weight: 600;
  transition: color .2s ease, background .2s ease;
}
.elx-menu a:hover,
.elx-menu .current-menu-item > a,
.elx-menu .current-product_cat-ancestor > a { color: #fff; background: rgba(56,189,248,.10); }
.elx-menu .sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px;
  padding: 8px; margin: 0; list-style: none;
  background: rgba(9, 17, 28, 0.97); border: 1px solid var(--elx-line);
  border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  backdrop-filter: blur(12px);
}
.elx-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.elx-menu .sub-menu a { display: block; padding: 10px 14px; border-radius: 9px; font-size: 14px; }

/* actions */
.elx-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.elx-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px; color: var(--elx-text-soft);
  text-decoration: none; border: 1px solid transparent;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
/* button.elx-icon-btn (search toggle) ne sme da nasledi Astra default plavu button-boju */
button.elx-icon-btn:not(.elx-cta-shop){ background: transparent; }
.elx-icon-btn:hover { color: #fff; background: rgba(56,189,248,.10); border-color: var(--elx-line); }
.elx-cta-shop {
  width: auto; padding: 0 20px; font-weight: 700; font-size: 15px;
  color: #fff; background: var(--elx-accent); box-shadow: 0 8px 22px rgba(33,150,243,.40);
}
.elx-cta-shop:hover { color: #fff; background: var(--elx-accent-hover); border-color: transparent; transform: translateY(-1px); }
.elx-cart { position: relative; }
.elx-cart-count {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--elx-accent); color: #fff; font-size: 11px; font-weight: 800;
  line-height: 18px; text-align: center; border-radius: 999px; box-shadow: 0 0 0 2px var(--elx-ink-0);
}
.elx-cart-count.is-empty { display: none; }
.elx-burger {
  display: none; background: none; border: 1px solid var(--elx-line); color: var(--elx-text);
  width: 42px; height: 42px; border-radius: 11px; cursor: pointer; align-items: center; justify-content: center;
}

/* mobile panel */
.elx-mobile-panel {
  position: fixed; top: calc(var(--elx-topbar-h) + var(--elx-header-h)); left: 0; right: 0; bottom: 0;
  background: rgba(7, 13, 22, 0.98); backdrop-filter: blur(16px);
  padding: 18px 22px 40px; overflow-y: auto; border-top: 1px solid var(--elx-line);
}
.elx-mobile-panel .elx-menu { flex-direction: column; align-items: stretch; gap: 2px; }
.elx-mobile-panel .elx-menu a { font-size: 18px; padding: 16px 14px; border-bottom: 1px solid rgba(255,255,255,.05); border-radius: 0; }
.elx-mobile-panel .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: none; box-shadow: none; padding: 0 0 0 14px; }
.elx-mobile-panel .sub-menu a { font-size: 15px; color: var(--elx-text-dim); padding: 12px 14px; }
.elx-mobile-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.elx-mobile-shop { text-align: center; padding: 16px; border-radius: 12px; background: var(--elx-accent); color: #fff; font-weight: 700; text-decoration: none; }
.elx-mobile-actions a:last-child { text-align: center; color: var(--elx-text-soft); text-decoration: none; }

/* spacer for non-home pages */
.elx-head-spacer { height: calc(var(--elx-topbar-h) + var(--elx-header-h)); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
  .elx-nav { display: none; }
  .elx-cta-shop { display: none; }
  .elx-burger { display: inline-flex; }
}
@media (max-width: 600px) {
  .elx-topbar-hide-sm { display: none; }
  .elx-topbar-inner { justify-content: center; }
  .elx-header-inner { padding: 0 16px; gap: 14px; }
  .elx-brand-text { font-size: 18px; }
}

/* ===================================================================
   FOOTER — dark, branded
   =================================================================== */
.site-footer,
.ast-small-footer,
footer.site-footer {
  background: var(--elx-ink-1) !important;
  border-top: 1px solid var(--elx-line) !important;
}
.site-footer, .site-footer p, .ast-small-footer { color: var(--elx-text-dim) !important; }
.site-footer a { color: var(--elx-text-soft); }
.site-footer a:hover { color: var(--elx-accent-2); }
.site-footer .footer-primary-navigation .menu,
.ast-footer-menu { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; list-style: none; }

/* legacy mobile-first */
@media (max-width: 768px) {
  .elektronika-cta { display: block; text-align: center; margin: 8px auto; max-width: 320px; }
}

/* ===================================================================
   VELVET DUSK RESKIN OVERRIDE (Smart Home Shop L3.5)
   Remap canonical tokens -> teal + bordo + sampanj on warm near-black.
   Approved hero mockup 2026-06-09. Last block wins (cascade).
   =================================================================== */
:root {
  /* canonical */
  --el-accent:     #15B8A6;          /* teal */
  --el-accent-2:   #E7C79B;          /* sampanj (warm secondary) */
  --el-accent-rgb: 21,184,166;
  --el-bg-0:       #14110F;          /* near-black topli */
  --el-bg-1:       #1C1815;
  --el-text:       #F4EEE7;
  --el-muted:      #B6A99C;

  /* hardcoded aliases re-pointed */
  --als-accent-hover:  #0F8C7E;      /* teal deep */
  --bg-secondary:      #221D19;
  --elx-ink-2:         #221D19;
  --elx-line:          rgba(231,199,155,0.16);   /* sampanj hairline */
  --elx-glass:         rgba(20,17,15,0.72);
  --elx-text-dim:      #8A7D70;

  /* Velvet Dusk additions */
  --vd-teal:       #15B8A6;
  --vd-teal-deep:  #0F8C7E;
  --vd-bordo:      #7B2A3B;
  --vd-bordo-2:    #9A3548;
  --vd-champ:      #E7C79B;
  --vd-surface:    #221D19;

  /* warm premium display serif */
  --elx-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Display headings -> warm serif */
h1, h2, h3, .elx-h, .section-title, .ast-single-post .entry-title { font-family: var(--elx-font-display); letter-spacing: -0.01em; }

/* WooCommerce sale badge -> bordo (toplo, ne plavo) */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.onsale {
  background: var(--vd-bordo) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
}

/* Price accent -> sampanj on dark surfaces */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--vd-champ); font-weight: 700; }
.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del { color: var(--el-muted); opacity:.75; font-weight:400; }

/* Add-to-cart buttons -> teal */
.woocommerce a.button, .woocommerce button.button, .woocommerce .button.alt,
.woocommerce #respond input#submit, .woocommerce input.button {
  background: linear-gradient(135deg, var(--vd-teal), var(--vd-teal-deep)) !important;
  color: #04201C !important; border: none !important; font-weight: 600 !important;
  border-radius: 999px !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover {
  filter: brightness(1.06); color:#04201C !important;
}

/* Scarcity badge -> bordo tint */
.als-scarcity { background: rgba(123,42,59,0.16) !important; color: var(--vd-champ) !important; }

/* Product card surface warm */
.woocommerce ul.products li.product {
  background: var(--vd-surface); border: 1px solid var(--elx-line);
  border-radius: 16px; overflow: hidden; padding-bottom: 8px;
}

/* Smart Node logo mark — transparent (mark has own badge) */
.elx-brand-mark--node{background:none!important;box-shadow:none!important;width:44px;height:44px;border-radius:12px}
.elx-brand-mark--node svg{width:42px;height:42px}
/* topbar custom icons align */
.elx-topbar-item svg{vertical-align:-3px;margin-right:5px}

/* ===================================================================
   READABILITY FIX — blog/page/legal su na tamnom #primary (#070D16);
   Astra default tamni naslovi -> nevidljivi. Forsiraj svetao citljiv tekst.
   (NE dira home, NE dira woocommerce koji su svetli/ivory.)
   =================================================================== */
body:not(.home):not(.woocommerce):not(.woocommerce-page) #primary{ color:#E4DACB; }
body:not(.home):not(.woocommerce):not(.woocommerce-page) #primary :is(h1,h2,h3,h4,h5,h6,.entry-title,.comment-reply-title,.widget-title){ color:#F4EEE7 !important; }
body:not(.home):not(.woocommerce):not(.woocommerce-page) #primary :is(p,li,td,small,blockquote,.post-meta,.entry-meta,.nav-links,label,legend){ color:#D8CFC2 !important; }
body:not(.home):not(.woocommerce):not(.woocommerce-page) #primary a{ color:#E7C79B; }
body:not(.home):not(.woocommerce):not(.woocommerce-page) #primary a:hover{ color:#F4E4C6; }
/* citljiva sirina + vazduh (da ne bude "okolo nista") */
body:not(.home):not(.woocommerce):not(.woocommerce-page) .entry-content,
body:not(.home):not(.woocommerce):not(.woocommerce-page) .entry-header{ max-width:840px; margin-left:auto; margin-right:auto; }
body:not(.home):not(.woocommerce):not(.woocommerce-page) .entry-content{ font-size:16.5px; line-height:1.8; }
body:not(.home):not(.woocommerce):not(.woocommerce-page) .entry-title{ font-family:var(--elx-font-display,'Fraunces',serif); font-size:38px; margin-bottom:18px; }
/* post nav previous/next citljivo */
body:not(.home):not(.woocommerce):not(.woocommerce-page) .post-navigation a{ color:#E7C79B !important; }
/* comment form polja na tamnom */
body:not(.home):not(.woocommerce):not(.woocommerce-page) #primary :is(input,textarea){ background:#1C1815; border:1px solid rgba(231,199,155,.25); color:#F4EEE7; }

/* ===================================================================
   EDITORIAL — blog single + stranice (da NE budu golo na crnom).
   Centriran clanak, tipografija, drop-cap, stilizovani h2/citati/liste.
   =================================================================== */
body.single-post #primary, body.page:not(.home) #primary{ padding:56px 20px 40px; }
body.single-post .entry-header, body.page:not(.home) .entry-header{ text-align:center; margin-bottom:34px; }
body.single-post .entry-title, body.page:not(.home) .entry-title{ font-size:44px !important; line-height:1.12; max-width:16ch; margin:0 auto 14px; }
body.single-post .entry-header::after, body.page:not(.home) .entry-header::after{ content:""; display:block; width:64px; height:3px; margin:20px auto 0; background:linear-gradient(90deg,#15B8A6,#E7C79B); border-radius:3px; }
body.single-post .entry-content, body.page:not(.home) .entry-content{ max-width:760px; margin:0 auto; font-size:17.5px; line-height:1.85; }
body.single-post .entry-content > p:first-of-type::first-letter{ font-family:var(--elx-font-display,'Fraunces',serif); font-size:3.4em; line-height:.82; float:left; margin:6px 12px 0 0; color:#E7C79B; }
body.single-post .entry-content h2, body.page:not(.home) .entry-content h2{ font-family:var(--elx-font-display,'Fraunces',serif); font-size:27px; margin:38px 0 14px; color:#F4EEE7 !important; }
body.single-post .entry-content h3, body.page:not(.home) .entry-content h3{ font-size:20px; margin:28px 0 10px; color:#E7C79B !important; }
body.single-post .entry-content ul li, body.page:not(.home) .entry-content ul li{ margin:8px 0; position:relative; list-style:none; padding-left:26px; }
body.single-post .entry-content ul li::before, body.page:not(.home) .entry-content ul li::before{ content:""; position:absolute; left:4px; top:11px; width:8px; height:8px; border-radius:50%; background:#15B8A6; }
body.single-post .entry-content blockquote, body.page:not(.home) .entry-content blockquote{ border-left:3px solid #7B2A3B; background:rgba(123,42,59,.12); margin:24px 0; padding:16px 22px; border-radius:0 10px 10px 0; font-style:italic; color:#EFE6D8; }
body.single-post .entry-content strong{ color:#F4EEE7; }
/* in-content CTA (ako tekst sadrzi [SHOP-CTA] placeholder -> rucno; ovde stilizujemo .shs-cta link) */
.shs-inline-cta{ display:inline-flex; align-items:center; gap:10px; margin:22px 0; padding:14px 26px; border-radius:999px; background:linear-gradient(135deg,#15B8A6,#0F8C7E); color:#04201C !important; font-weight:700; }

/* ===================================================================
   ZLATNA SLOVA — champagne naslovi u blogu/stranicama (Djordje wish).
   Uses #primary (ID) specificity + last-in-cascade to beat readability fix.
   =================================================================== */
body.single-post #primary .entry-title,
body.page:not(.home) #primary .entry-title,
body.single-post #primary .entry-content h2,
body.page:not(.home) #primary .entry-content h2,
body.single-post #primary .entry-content h3,
body.page:not(.home) #primary .entry-content h3,
body.single-post #primary .entry-content > p:first-of-type::first-letter{
  color: #E3A81C !important;      /* dublje, zasicenije zlato (2026-06-10) — vidljivije starijim ocima */
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
/* Naslov bloga (hero) — krupniji + jaci kontrast za starije oci */
body.single-post #primary .entry-title{
  font-size: 46px !important;
  letter-spacing: -.01em;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
body.single-post #primary .entry-content h2{ font-size: 29px !important; }
/* gold emphasis for bold words in posts */
body.single-post #primary .entry-content strong{ color: #E3A81C !important; font-weight: 800 !important; }
/* telo bloga — svetlije/citljivije (ne pale) */
body.single-post #primary .entry-content,
body.single-post #primary .entry-content p,
body.single-post #primary .entry-content li{ color:#ECE3D5 !important; }

/* ===================================================================
   KOMENTARI (blog) — TAMNIJA slova (Djordje 2026-06-10).
   Bio pale sampanj na svetlom = nevidljivo. Resenje: ivory card + tamni tekst,
   deep-gold naslov, bela polja sa tamnim tekstom (citljivo, "tamnija slova").
   =================================================================== */
body.single-post .comment-respond,
body.single-post #respond{
  max-width:760px; margin:44px auto 0;
  background:#FBF7F1 !important; border:1px solid #E7DDCF; border-radius:16px;
  padding:30px 30px 34px; box-shadow:0 14px 40px rgba(20,17,15,.10);
}
body.single-post .comment-respond .comment-reply-title,
body.single-post #respond .comment-reply-title{
  color:#7B2A3B !important; font-family:var(--elx-font-display,'Fraunces',serif);
  font-size:25px !important; margin:0 0 8px !important; font-weight:800 !important;
}
body.single-post .comment-respond .comment-reply-title small a{ color:#0F8C7E !important; }
body.single-post #respond .comment-notes,
body.single-post #respond label,
body.single-post #respond .comment-form-cookies-consent label,
body.single-post #respond p{ color:#3A332E !important; }
body.single-post #respond label{ font-weight:600 !important; }
body.single-post #respond input[type=text],
body.single-post #respond input[type=email],
body.single-post #respond input[type=url],
body.single-post #respond textarea{
  background:#fff !important; border:1px solid #D9CDBC !important; color:#241F1B !important;
  border-radius:10px !important;
}
body.single-post #respond input::placeholder,
body.single-post #respond textarea::placeholder{ color:#8A7D70 !important; opacity:1; }
body.single-post #respond .form-submit input[type=submit]{
  background:linear-gradient(135deg,#15B8A6,#0F8C7E) !important; color:#04201C !important;
  border:none !important; border-radius:999px !important; font-weight:700 !important;
  padding:13px 32px !important;
}
/* postojeci komentari (lista) — citljivi */
body.single-post .comment-list .comment-body{ color:#E8DFD2; }
body.single-post .comment-list .comment-author .fn,
body.single-post .comment-list .comment-author a{ color:#E3A81C !important; }
body.single-post .comment-list .comment-metadata a{ color:#B6A99C !important; }

/* ===================================================================
   SEARCH — header search dugme + drop overlay (Woo product search) 2026-06-10
   =================================================================== */
.elx-header{ position:relative; }
.elx-searchbar{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(7,13,22,.98); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--elx-line); box-shadow:0 24px 60px rgba(0,0,0,.5);
  padding:18px 24px; z-index:80;
}
.elx-search-form{
  max-width:760px; margin:0 auto; display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.06); border:1px solid var(--elx-line);
  border-radius:14px; padding:6px 6px 6px 16px;
}
.elx-search-form > svg{ color:var(--elx-text-soft); flex:0 0 auto; width:20px; height:20px; }
.elx-search-form input[type=search]{
  flex:1 1 auto; background:transparent; border:none; outline:none;
  color:var(--elx-text); font-size:16px; padding:12px 4px; min-width:0;
}
.elx-search-form input[type=search]::placeholder{ color:var(--elx-text-dim); }
.elx-search-submit{
  flex:0 0 auto; background:var(--elx-accent); color:#04201C; border:none;
  border-radius:10px; padding:12px 22px; font-weight:700; font-size:15px; cursor:pointer;
  transition:filter .15s ease;
}
.elx-search-submit:hover{ filter:brightness(1.07); }
.elx-search-close{
  flex:0 0 auto; background:none; border:none; color:var(--elx-text-soft);
  cursor:pointer; padding:8px; display:inline-flex; align-items:center;
}
.elx-search-close:hover{ color:#fff; }
@media (max-width:600px){
  .elx-searchbar{ padding:14px 16px; }
  .elx-search-submit{ padding:12px 16px; }
}

/* ===================================================================
   SEARCH DUGME VIDLJIVO 2026-06-10 (Đorđe „ne vidim gde je search").
   Bila bledo-tan lupa bez bordera = nevidljiva. Sad: bordirana pilula
   sa lupom + „Pretraži" tekstom (desktop), ikona+border (mobilni).
   =================================================================== */
.elx-search-toggle{
  width:auto !important; gap:8px; padding:0 16px !important;
  border:1px solid rgba(231,199,155,.45) !important;
  background:rgba(231,199,155,.10) !important; color:var(--elx-text) !important;
}
.elx-search-toggle:hover{
  background:var(--vd-champ) !important; color:#1A1410 !important; border-color:var(--vd-champ) !important;
}
.elx-search-toggle svg{ width:18px; height:18px; }
.elx-search-label{ font-weight:600; font-size:14px; white-space:nowrap; }
@media (max-width:980px){
  .elx-search-toggle{ width:42px !important; padding:0 !important; }
  .elx-search-label{ display:none; }
}

/* ===================================================================
   BLOG ČITLJIVOST — HARD FIX 2026-06-10 (Đorđe: „šampanjac na bež se ne vidi,
   ljudi teže gledaju"). UZROK: .ast-article-single je imao BELU pozadinu a
   tekst svetao -> nevidljivo; a moja zlatna slova nisu se primenila (readability
   :is() pravilo veće specifičnosti forsiralo cream). REŠENJE: tamna podloga
   članka + svetao telo-tekst + JAKO čitljivo zlato naslovi (bije readability).
   =================================================================== */
/* 1) ubij belu/svetlu podlogu članka -> tamno */
body.single-post .ast-article-single,
body.single-post .ast-article-inner,
body.single-post article.post{
  background:#14110F !important; box-shadow:none !important; border:none !important;
}
/* 2) telo bloga = svetlo, maks kontrast (bije readability #D8CFC2) */
body.single-post:not(.home):not(.woocommerce):not(.woocommerce-page) #primary :is(.entry-content,.entry-content p,.entry-content li,.entry-content td){
  color:#F3ECDE !important;
}
/* 3) naslovi/podnaslovi/bold/drop-cap = JAKO zlato (bije readability cream) */
body.single-post:not(.home):not(.woocommerce):not(.woocommerce-page) #primary :is(.entry-title,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content strong){
  color:#F2B12A !important; font-weight:800 !important;
}
body.single-post:not(.home):not(.woocommerce):not(.woocommerce-page) #primary .entry-content > p:first-of-type::first-letter{
  color:#F2B12A !important;
}
body.single-post #primary .entry-title{ text-shadow:0 2px 8px rgba(0,0,0,.6) !important; }

/* ===================================================================
   KATEGORIJA-CHIP „is-current" SMIREN 2026-06-10 (Đorđe: „gde piše kategorije
   menja boju"). Bio pun teal fill + plav tekst (Astra link-boja curi).
   Sad: meka tinta + tamni tekst + teal border (mirno, bez plavog).
   =================================================================== */
.shs-catchip,
.shs-catchip:link,
.shs-catchip:visited{ color:#241F1B !important; }
.shs-catchip.is-current{
  background:rgba(21,184,166,.12) !important; border-color:#15B8A6 !important;
}
.shs-catchip.is-current .shs-catchip-name{ color:#0F8C7E !important; }
.shs-catchip.is-current .shs-catchip-count{ background:rgba(21,184,166,.18) !important; color:#0F8C7E !important; }

/* ===================================================================
   BLOG ARHIVA (lista /vesti/) TAMNA 2026-06-10 (Đorđe: „bela boja mi se ne sviđa").
   Uzrok: Astra `ast-separate-container` daje svetlu pozadinu body/#content oko
   kartica (#primary je već taman). Forsiraj sve kontejnere na tamno + kartice.
   =================================================================== */
body.blog, body.blog #page, body.blog #content,
body.blog.ast-separate-container, body.blog .site-content,
body.archive:not(.post-type-archive-product):not(.tax-product_cat),
body.archive:not(.post-type-archive-product):not(.tax-product_cat) #page,
body.archive:not(.post-type-archive-product):not(.tax-product_cat) #content,
body.archive:not(.post-type-archive-product):not(.tax-product_cat) .site-content{
  background:#14110F !important;
}
/* blog kartice (lista) — tamne sa diskretnim šampanj okvirom */
body.blog .ast-article-post, body.blog article.ast-article-post,
body.archive:not(.post-type-archive-product):not(.tax-product_cat) .ast-article-post{
  background:#1C1815 !important; border:1px solid rgba(231,199,155,.14) !important;
  border-radius:16px !important; box-shadow:0 14px 40px rgba(0,0,0,.35) !important;
}
body.blog .ast-article-post .entry-title a,
body.blog .ast-article-post .ast-blog-single-element a,
body.archive:not(.post-type-archive-product):not(.tax-product_cat) .ast-article-post .entry-title a{
  color:#F2B12A !important;
}
body.blog .ast-article-post .entry-content,
body.blog .ast-article-post .entry-content p,
body.blog .ast-article-post .ast-excerpt-container,
body.blog .ast-article-post p{ color:#D8CFC2 !important; }
body.blog .ast-article-post .post-meta,
body.blog .ast-article-post .ast-blog-meta-container,
body.blog .ast-article-post time,
body.blog .ast-article-post .posted-on a{ color:#8A7D70 !important; }
/* "read more" / paginacija na blog arhivi citljivi */
body.blog .ast-pagination a, body.blog .page-numbers,
body.archive:not(.post-type-archive-product):not(.tax-product_cat) .page-numbers{
  color:#E7C79B !important; border-color:rgba(231,199,155,.25) !important;
}

/* ===================================================================
   POKRETNA TRAKA (ticker/marquee) u topbar-u 2026-06-10 (Đorđe: „tekst koji
   se pokrece — kupuješ pametno + cifre"). Beskonačan scroll, pauza na hover.
   =================================================================== */
.elx-topbar{ overflow:hidden; }
.elx-ticker{
  display:flex; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.elx-ticker-track{
  display:flex; align-items:center; flex-shrink:0; white-space:nowrap;
  will-change:transform; animation:elxTicker 38s linear infinite;
}
.elx-ticker:hover .elx-ticker-track{ animation-play-state:paused; }
.elx-ticker-item{ display:inline-flex; align-items:center; gap:7px; padding:0 22px; font-weight:600; }
.elx-ticker-item svg{ width:15px; height:15px; opacity:.92; }
.elx-ticker-item b{ color:#fff; font-weight:800; }
.elx-ticker-sep{ opacity:.45; padding:0 2px; }
@keyframes elxTicker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .elx-ticker-track{ animation:none; justify-content:center; width:100%; } }

/* ===================================================================
   EDITORIAL DUBINA 2026-06-14 (AUTOPILOT) — meta linija + in-content CTA +
   related "Procitaj jos". Uskladjeno sa postojecim blog editorial-om:
   tamna #14110F podloga, zlatni naslovi (#E3A81C/#F2B12A), teal akcenat.
   NE dira drop-cap/readability/komentare (samo dodaje 3 nove celine).
   =================================================================== */

/* --- META LINIJA (datum | vreme citanja | kategorija) ispod hero/naslova --- */
body.single-post #primary .shs-blogmeta{
  max-width:760px; margin:-6px auto 26px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:11px;
  font-family:var(--elx-font,'Inter',sans-serif); font-size:13.5px; letter-spacing:.02em;
  color:#B6A99C !important;
}
body.single-post #primary .shs-blogmeta-sep{ color:#6E5F52 !important; }
body.single-post #primary .shs-blogmeta-read{ color:#B6A99C !important; }
body.single-post #primary a.shs-blogmeta-cat{
  color:#E3A81C !important; font-weight:700; text-decoration:none;
  padding:3px 12px; border:1px solid rgba(227,168,28,.34); border-radius:999px;
  transition:background .18s ease, color .18s ease;
}
body.single-post #primary a.shs-blogmeta-cat:hover{ background:rgba(227,168,28,.14); color:#F2B12A !important; }

/* --- IN-CONTENT SHOP CTA (umetnut u sredinu clanka) --- */
body.single-post #primary .shs-incontent-cta{
  max-width:760px; margin:34px auto; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  background:linear-gradient(135deg,rgba(21,184,166,.12),rgba(123,42,59,.12));
  border:1px solid rgba(231,199,155,.22); border-radius:16px;
  padding:22px 26px; box-shadow:0 14px 38px rgba(0,0,0,.30);
}
body.single-post #primary .shs-incontent-cta-text{ display:flex; flex-direction:column; gap:4px; }
body.single-post #primary .shs-incontent-cta-text strong{
  color:#F2B12A !important; font-family:var(--elx-font-display,'Fraunces',serif);
  font-size:20px; font-weight:800;
}
body.single-post #primary .shs-incontent-cta-text span{ color:#D8CFC2 !important; font-size:14.5px; }
body.single-post #primary a.shs-incontent-cta-btn{
  flex:0 0 auto; background:linear-gradient(135deg,#15B8A6,#0F8C7E); color:#04201C !important;
  font-weight:800; text-decoration:none; padding:13px 26px; border-radius:999px;
  white-space:nowrap; transition:transform .18s ease, filter .18s ease;
}
body.single-post #primary a.shs-incontent-cta-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* --- RELATED "Procitaj jos" (3 kartice, iste tamne kao blog arhiva) --- */
body.single-post #primary .shs-related{
  max-width:860px; margin:54px auto 0; padding-top:36px;
  border-top:1px solid rgba(231,199,155,.16);
}
body.single-post #primary .shs-related > h2{
  font-family:var(--elx-font-display,'Fraunces',serif); font-size:26px !important;
  color:#E3A81C !important; text-align:center; margin:0 0 24px !important;
}
body.single-post #primary .shs-related-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
body.single-post #primary a.shs-related-card{
  display:flex; flex-direction:column; gap:10px; text-decoration:none;
  background:#1C1815; border:1px solid rgba(231,199,155,.14); border-radius:14px;
  padding:20px 18px; box-shadow:0 12px 34px rgba(0,0,0,.32);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.single-post #primary a.shs-related-card:hover{
  transform:translateY(-4px); border-color:rgba(231,199,155,.4);
  box-shadow:0 20px 46px rgba(0,0,0,.42);
}
body.single-post #primary .shs-related-cat{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:#15B8A6 !important;
}
body.single-post #primary a.shs-related-card h3{
  font-family:var(--elx-font-display,'Fraunces',serif); font-size:17px !important;
  line-height:1.34; color:#F3ECDE !important; margin:0 !important; font-weight:700 !important;
}
body.single-post #primary .shs-related-more{
  margin-top:auto; font-size:13.5px; font-weight:700; color:#E3A81C !important;
}
@media (max-width:780px){
  body.single-post #primary .shs-related-grid{ grid-template-columns:1fr; }
  body.single-post #primary .shs-incontent-cta{ flex-direction:column; align-items:flex-start; }
  body.single-post #primary a.shs-incontent-cta-btn{ width:100%; text-align:center; }
}


/* MOBILE-FIX-2026-07-03 */
/* Mobile-only fixes for smarthomeshop.rs homepage. Desktop (>782px) untouched. */
@media (max-width:782px){

  /* 1. Headings invisible (Astra global color-2 = dark slate on dark bg) -> solid brand colors */
  .vd-home .vd-hero h1{color:#F4EEE7 !important}
  .vd-home .vd-hero h1 em{color:#E7C79B !important}
  .vd-home .vd-sec-head h2{color:#F4EEE7 !important}
  .vd-home .vd-band h3{color:#fff !important}

  /* 2. Hero collage: zero-width absolute chaos -> clean 2-col grid, no rotation, 3rd card hidden */
  .vd-home .vd-collage{position:static;width:100%;max-width:100%;height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:4px 0}
  .vd-home .vd-collage .vd-pcard{position:relative;top:auto;right:auto;transform:none;width:100%}
  .vd-home .vd-collage .vd-c3{display:none}
  .vd-home .vd-glow{display:none}

  /* 3. Scrub accent words ("vracate", "ima svrhu") unreadable over bright video frames -> dark halo + warmer accent.
     !important required: colors/text-shadow are inline styles in front-page.php */
  .scrub .shs-block h2{text-shadow:0 2px 6px rgba(9,7,6,.95),0 0 22px rgba(9,7,6,.92),0 0 56px rgba(9,7,6,.8) !important}
  .scrub .shs-block h2 em{color:#F2D9A8 !important;text-shadow:0 2px 6px rgba(9,7,6,.98),0 0 22px rgba(9,7,6,.95),0 0 56px rgba(9,7,6,.85) !important}
  .scrub .shs-block > span{text-shadow:0 1px 8px rgba(9,7,6,.95),0 0 20px rgba(9,7,6,.9) !important}

  /* 4. Hero trust badges ragged 2-row wrap -> tidy vertical list; buttons full-width stack */
  .vd-home .vd-hero-trust{flex-direction:column;gap:10px;align-items:flex-start}
  .vd-home .vd-btns{flex-direction:column;align-items:stretch}
  .vd-home .vd-btn{justify-content:center}
}

/* MOBILE-FIX-2026-07-03 round 2 */
@media (max-width:782px){

  /* R2-1. Burger menu offscreen: .elx-actions overflowed the 390px viewport (right edge ~450px).
     Brand shrinks/ellipses, actions stay anchored right, compact icon buttons.
     !important where base rules also use !important (.elx-search-toggle) or inline sizes. */
  .elx-header-inner{justify-content:space-between;gap:8px}
  .elx-brand{flex:1 1 auto;min-width:0;gap:8px}
  .elx-brand-text{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .elx-brand-mark--node{width:36px !important;height:36px !important;flex:0 0 auto}
  .elx-brand-mark--node svg{width:34px !important;height:34px !important}
  .elx-actions{flex:0 0 auto;margin-left:auto;gap:4px}
  /* T4/P3.1 (20.07): 38 -> 44px. Apple HIG minimum; audit nalaz #8 (search,
     nalog, korpa, burger su bili 38x38 sa 4px razmakom). Prostor se uzima od
     brenda -- .elx-brand-text vec ima ellipsis, pa se skracuje bez lomljenja. */
  .elx-actions .elx-icon-btn{width:44px !important;height:44px !important;padding:0 !important}
  /* Astra global button styles leak into .elx-burger: padding 12px/24px crushes the svg to 0x0
     and focus paints it blue -> neutralize, give the icon an explicit size */
  /* T4/P3.1 (20.07): burger 38 -> 44px. Prvi prolaz je podigao samo
     .elx-icon-btn i propustio ovaj selektor -- gate ga je uhvatio kao jedinu
     preostalu meta malu u OBE dimenzije. Burger je JEDINI ulaz u meni na
     telefonu, pa je od svih ikona najskuplji za promasaj. */
  .elx-actions .elx-burger{width:44px !important;height:44px !important;padding:0 !important;background:none !important}
  .elx-actions .elx-burger svg{width:22px !important;height:22px !important;flex:0 0 auto}
  .elx-actions .elx-burger:hover,
  .elx-actions .elx-burger:focus,
  .elx-actions .elx-burger:active{background:rgba(56,189,248,.12) !important;color:#fff}

  /* R2-2. Scrub caption paragraphs (light gray over bright video frame) -> dense dark halo
     + soft central scrim behind the whole text block (readable over the white lamp frame).
     !important because color/text-shadow are inline in front-page.php */
  /* T4/P3.1 (20.07), drugi krug -- IZMERENO zasto je m-32 ostao slab i posle
     jaceg scrima: scrim je bio primenjen na sva tri caption-a jednako
     (radial rgba(9,7,6,.8) potvrdjen computed style-om), ali caption na m-32
     ima inline color #B6A99C (182,169,156 -- prigusena taupe), dok m-24 i m-64
     imaju #E8DFD4 (232,223,212). Uzrok NIJE bio scrim nego boja teksta, tacno
     kako auditov nalaz #5 i kaze. Ujednacavamo na svetliju krem varijantu.
     !important jer je boja inline u front-page.php. */
  .scrub .shs-block p{color:#E8DFD4 !important;text-shadow:0 1px 6px rgba(9,7,6,.95),0 0 20px rgba(9,7,6,.9),0 0 48px rgba(9,7,6,.75) !important}
  /* T4/P3.1 (20.07): scrim .55 -> .80. Audit nalaz #5: m-32 (`Tehnologija u koju
     imate poverenja`, #B6A99C preko svetlo-tirkiznog kadra) i m-64 (krem tekst
     preko skoro bele lampe) su ostali jedva citljivi i POSLE R2-2 runde.
     Da dugme odmah ispod caption-a jeste puno vidljivo dokazuje da uzrok nije
     nedovrsen reveal nego boja teksta + preslab scrim. Rub ostaje mek
     (transparent 82%) da se na tamnim kadrovima ne vidi kao kutija. */
  .scrub .shs-block{background:radial-gradient(closest-side,rgba(9,7,6,.80),rgba(9,7,6,.52) 58%,transparent 82%);padding:1.4rem 1.2rem;border-radius:18px}

  /* R2-3. Floating Viber/WhatsApp FABs covered footer copyright -> footer bottom space + smaller FABs.
     !important because FAB sizes/offsets are inline in functions.php */
  .als-footer{padding-bottom:140px}
  .elektronika-floating-cta{bottom:16px !important;right:16px !important;gap:10px !important}
  .elektronika-floating-cta a{width:48px !important;height:48px !important}
}

/* MOBILE-FIX-2026-07-03 round 3 */
/* Koren-fix za SVE ekrane (i desktop): Astra Customizer global color-2 (#1E293B) farba
   h1-h6 tamno na tamnoj Velvet Dusk pocetnoj. Paleta u Customizeru je ISPRAVNA za svetle
   shop/legal strane pa se NE menja - override je scoped na .vd-home (samo tamna pocetna). */
.vd-home .vd-hero h1{color:#F4EEE7 !important}
.vd-home .vd-hero h1 em{color:#E7C79B !important}
.vd-home .vd-sec-head h2{color:#F4EEE7 !important}
.vd-home .vd-band h3{color:#fff !important}

/* FIX 2026-07-14: blog "Kljucno ukratko" (.blog-takeaways) box had light background
   but text inherited the light-on-dark article body color (#F3ECDE) -> letters nearly
   invisible on the light box. Force dark text so it reads. Heading <strong> stays gold.
   Specificity (1,6,2) beats the readability rule at ~line 504 (1,5,2 !important). */
body.single-post:not(.home):not(.woocommerce):not(.woocommerce-page) #primary .entry-content .blog-takeaways :is(p,li){ color:#14110F !important; }

/* ================= F0 / P0.2 (2026-07-20) - cookie baner blocker =================
   Izmereno pre fixa: .cky-consent-container 390x342 = 51.5% vidljivog ekrana na
   iPhone 13 (664px), zajedno sa fiksnim headerom 67% ekrana; hero CTA nevidljiv,
   a Viber/WA FAB potpuno pokriven banerom (fabHiddenByBanner: true).
   Isti plugin i isti recept kao alatishop P0.1: tri dugmeta iz kolone u red.
   Plugin drzi flex-direction:column jacom specificnoscu -> prefiks + !important. */
@media (max-width: 600px) {
  .cky-consent-container { max-height: 45svh; overflow-y: auto; }

  /* T4/P3.1 (20.07) -- dva preostala nalaza gate-a:
     1) Footer kontakt linkovi ("WhatsApp . Viber", footer.php) mereni 36.5x18 --
        mali u OBE dimenzije, dakle prava promasiva meta, ne footer-link sum.
        Inline-flex + min-height ih podize na 44px bez menjanja izgleda reda.
     2) #page{min-height:100vh} dolazi iz Astra inline stila (parent, ne mozemo
        ga urediti na izvoru). Na iOS-u vh racuna viewport BEZ URL trake, pa
        stranica dobija visak visine. Override na svh; min-height ostaje
        min-height, pa se raspored ne menja. */
  .als-footer a[href^="viber:"], .als-footer a[href^="https://wa.me"]{
    display:inline-flex; align-items:center; min-height:44px;
  }
  #page{min-height:100svh}

  /* T4/P3.1 (20.07) -- gate nalaz: cookie baner 100% pokriva #ast-scroll-top.
     Ista klasa kao auditov #2 (Viber/WhatsApp FAB pod banerom, resen u P0.2),
     samo na elementu koji auditu nije bio u tabeli -- scroll-to-top se pojavljuje
     tek posle skrola, pa ga sonda na scroll 0 nije ni videla.
     Dok baner stoji, dugme je ionako nedodirljivo; sakrivamo ga da ne bude
     mrtva meta ispod banera. `.cky-hide` je klasa koju plugin dodaje na
     dismiss (verifikovano u P0.2 klikom na "Prihvati sve"), pa se pravilo samo
     gasi. Browser bez :has() se ponasa kao danas -- bez regresije. */
  body:has(.cky-consent-container:not(.cky-hide)) #ast-scroll-top{display:none !important}
  .cky-consent-container .cky-notice-btn-wrapper {
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .cky-consent-container .cky-btn {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 10px 0 0 !important;
    padding: 8px 4px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  /* FAB (Viber/WhatsApp) je fixed bottom-right i lezi UNUTAR banera (z 9999 < 9999999),
     pa je kontakt nedodirljiv do pristanka. Dok je baner gore -> podigni FAB iznad njega.
     Plugin na dismiss dodaje .cky-hide (provereno uzivo), pa se pravilo samo gasi. */
  body:has(.cky-consent-container:not(.cky-hide)) .elektronika-floating-cta {
    bottom: 250px !important;
  }
}