/* ============================================================
   Vjerski Merch - krem/zlato/puder-plava + Bebas Neue naslovi
   Header layout repliciran po Katastor strukturi
   ============================================================ */
:root{
  --vj-ink:#1c1c1c;
  --vj-ink-2:#000;
  --vj-paper:#f7f5f1;      /* krem pozadina */
  --vj-card:#ffffff;        /* bijele kartice / header */
  --vj-soft:#efece4;        /* tamniji krem za alt sekcije */
  --vj-line:#e7e3db;        /* krem-tonirani border */
  --vj-muted:#6f6a61;
  --vj-gold:#b0965e;        /* zlato */
  --vj-gold-d:#977f4c;
  --vj-blue:#a4becf;        /* puder plava */
  --vj-blue-soft:#eef3f6;   /* svijetli plavi wash */
  --vj-blue-ink:#3a4a56;    /* tamno plavo-siva za tekst na plavoj */
}

/* --- Tipografija --- */
body{background:var(--vj-paper);color:#2b2620;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
h1,h2,h3,h4,h5,h6,
.entry-title,.product_title,.woocommerce-loop-product__title,
.section-title,.cart_totals h2,.cross-sells h2,.related h2,.widget-title,
.vj-hero h1,.vj-tiles h2,.vj-feat h2,.vj-occ h2,.vj-nfc h2,.vj-about h2,.vj-social h2,.vj-news h2{
  font-family:"Spectral SC",Georgia,"Times New Roman",serif !important;line-height:0.9;text-transform:uppercase;transform:scaleY(0.90);transform-origin:left center;
  color:var(--vj-ink);
  letter-spacing:-0.025em;
  font-weight:500;
}
.vj-nfc h2{color:var(--vj-blue-ink) !important}

/* --- Akcent: gumbi (crni) --- */
.button,button.button,a.button,input.button,.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,.woocommerce .button.alt,[type="submit"]{
  background:var(--vj-ink) !important;color:#fff !important;border:none !important;
  border-radius:6px !important;font-weight:600;letter-spacing:.02em;
}
.button:hover,button.button:hover,a.button:hover,.woocommerce a.button:hover,
.woocommerce button.button:hover,.woocommerce .single_add_to_cart_button:hover,
.woocommerce .button.alt:hover,[type="submit"]:hover{background:#333 !important;color:#fff !important}
/* call-back gumb na stranici proizvoda (default narancasti #dc9814 -> ink) */
.call-back-feature button,.site-content div.call-back-feature button{background-color:var(--vj-ink) !important;color:#fff !important;border-color:var(--vj-ink) !important}
.call-back-feature button:hover{background-color:#333 !important}

/* --- Linkovi i cijene --- */
a{color:var(--vj-ink)}
a:hover{color:var(--vj-gold)}
.price,.woocommerce-Price-amount,.amount,.woocommerce div.product p.price,
.woocommerce ul.products li.product .price{color:var(--vj-ink) !important;font-weight:700}

/* --- Trgovina kartice --- */
.woocommerce ul.products li.product,.product-grid-item{background:var(--vj-card);border-radius:10px;padding:10px;border:1px solid var(--vj-line)}
.woocommerce ul.products li.product:hover{box-shadow:0 10px 26px rgba(0,0,0,.08)}

/* ============================================================
   HEADER LAYOUT (po Katastoru)
   ============================================================ */
/* -- 1. Top traka: kontakt | slogan | uvjeti -- */
.vj-topbar{background:var(--vj-card);border-bottom:1px solid var(--vj-line);font-size:13px;color:var(--vj-muted)}
.vj-topbar .vj-wrap{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:20px}
.vj-tb-left{display:flex;gap:24px}
.vj-tb-left a{color:var(--vj-muted);display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.vj-tb-left svg{width:15px;height:15px;flex:0 0 auto}
.vj-tb-center{color:#3a3a3a;font-weight:500;text-align:center;flex:1 1 auto}
.vj-tb-right a{color:var(--vj-gold-d);font-weight:600;text-decoration:none}
.vj-topbar a:hover{color:var(--vj-gold)}

/* -- 2. Glavni header: logo | tražilica | ikone -- */
.main-header.col-full{display:flex !important;align-items:center;gap:28px;flex-wrap:nowrap}
.site-branding,.site-logo-anchor{flex:0 0 auto}
@media(min-width:769px){
  .site-branding{width:220px !important;max-width:220px !important}
  .site-branding .custom-logo,.site-branding img,.site-logo-anchor img{
    width:220px !important;max-width:220px !important;
    height:auto !important;max-height:none !important;display:block;
  }
}
/* Mobile: NE diramo width .site-branding (Shoptimizer slaze hamburger/logo/cart),
   samo ogranicimo sliku da ne udari u hamburger */
@media(max-width:768px){
  .site-branding .custom-logo,.site-branding img,.site-logo-anchor img{
    width:145px !important;max-width:145px !important;
    height:auto !important;max-height:none !important;display:block;
  }
}
.site-search,.shoptimizer-product-search,.header-search,form.woocommerce-product-search{flex:1 1 auto;max-width:560px;margin:0 !important}
.vj-hicons{flex:0 0 auto;margin-left:auto;display:flex;gap:26px}
.vj-hicons a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--vj-ink);font-size:12px;font-weight:500;line-height:1}
.vj-hic{width:44px;height:44px;border:1px solid #dcdcdc;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.18s}
.vj-hic svg{width:20px;height:20px}
.vj-hlbl{white-space:nowrap}
.vj-hicons a:hover .vj-hic{border-color:var(--vj-gold);background:var(--vj-gold);color:#fff}
.vj-hicons a:hover .vj-hlbl{color:var(--vj-gold-d)}

.site-header{background:var(--vj-card)}

/* kosarica na tamnom navu: ikona + cijena bijela, brojac plavi badge */
.col-full-nav .amount,.col-full-nav .woocommerce-Price-amount,
.col-full-nav .cart-contents,.col-full-nav .site-header-cart a,
.col-full-nav .site-header-cart,.shoptimizer-menu .amount{color:#fff !important}
.col-full-nav .site-header-cart svg,.col-full-nav .cart-contents svg,
.shoptimizer-cart-icon svg,.site-header-cart svg path,.cart-contents svg path{fill:#fff !important;stroke:#fff !important;color:#fff !important}
.shoptimizer-cart-icon .count,.cart-contents .count,.site-header-cart .count,
span.count,.widget_shopping_cart_content .count{background:var(--vj-blue) !important;color:#1c1c1c !important;border-color:var(--vj-blue) !important;font-weight:700}

/* -- 3. Promo traka ispod navigacije (crna) -- */
.vj-promo{background:var(--vj-blue);color:var(--vj-blue-ink)}
.vj-promo .vj-wrap{padding:11px 20px;text-align:center;font-size:13px;font-weight:600;letter-spacing:.02em}

/* -- responsive header -- */
@media(max-width:980px){
  .vj-tb-center{display:none}
  .vj-hicons{display:none}
}
@media(max-width:600px){
  .vj-tb-left a span{display:none}
  .vj-topbar .vj-wrap{justify-content:space-between;gap:12px}
}

/* ============================================================
   Naslovnica sekcije (B&W)
   ============================================================ */
.vj-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.vj-hero{padding:96px 0;text-align:center;background:linear-gradient(180deg,var(--vj-blue-soft) 0%,var(--vj-paper) 100%)}
.vj-hero h1{font-size:clamp(2.6rem,5vw,4rem);margin-bottom:16px}
.vj-hero p{font-size:1.15rem;color:#555;max-width:620px;margin:0 auto 26px}
.vj-hero .button{font-size:1rem;padding:14px 34px}

.vj-usp{background:var(--vj-card);border-top:1px solid var(--vj-line);border-bottom:1px solid var(--vj-line)}
.vj-usp .vj-wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;padding:18px 20px;color:#555;font-weight:600;font-size:.92rem;letter-spacing:.02em}
.vj-usp span{position:relative;padding-left:22px}
.vj-usp span::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;background:var(--vj-gold);transform:translateY(-50%)}
/* "Dizajnirano u Hrvatskoj" - sahovnica umjesto zlatnog buleta (desktop + mobile) */
.vj-usp span:first-child{padding-left:0;white-space:nowrap}
.vj-usp span:first-child::before{display:none}
.vj-usp span:first-child::after{
  content:"";display:inline-block;width:13px;height:13px;
  margin-left:9px;vertical-align:-1px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><rect width="1" height="1" fill="%23ed1c24"/><rect x="1" y="1" width="1" height="1" fill="%23ed1c24"/></svg>') no-repeat;
  background-size:contain;
}
/* Mobile: samo "Dizajnirano u Hrvatskoj", ostale USP stavke sakrivene */
@media(max-width:768px){
  .vj-usp .vj-wrap{padding:14px 20px}
  .vj-usp span{display:none}
  .vj-usp span:first-child{display:inline-block}
}

.vj-tiles,.vj-feat,.vj-occ,.vj-about,.vj-social,.vj-news{padding:70px 0}
.vj-tiles h2,.vj-feat h2,.vj-occ h2,.vj-nfc h2,.vj-about h2,.vj-social h2,.vj-news h2{text-align:center;margin-bottom:14px;font-size:clamp(1.7rem,3vw,2.3rem)}
.vj-tiles h2::after,.vj-feat h2::after,.vj-occ h2::after,.vj-about h2::after,.vj-social h2::after,.vj-news h2::after{content:"";display:block;width:54px;height:2px;background:var(--vj-gold);margin:14px auto 34px}

.vj-occ-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vj-occ-grid a{display:flex;align-items:center;justify-content:center;min-height:130px;background:var(--vj-blue-soft);border:1px solid #dce6ec;border-radius:10px;text-decoration:none;color:var(--vj-blue-ink);font-weight:600;text-align:center;padding:16px;font-family:"Spectral SC",serif;letter-spacing:.02em;transition:.2s}
.vj-occ-grid a:hover{background:var(--vj-card);border-color:var(--vj-gold);color:var(--vj-gold-d);transform:translateY(-3px)}

.vj-nfc{background:var(--vj-blue);color:var(--vj-blue-ink);text-align:center;padding:74px 0}
.vj-nfc p{color:#46555f;max-width:540px;margin:0 auto;font-size:1.08rem}
.vj-nfc .button{margin-top:20px;background:var(--vj-ink) !important;color:#fff !important}
.vj-nfc .button:hover{background:#000 !important;color:#fff !important}

.vj-about{background:var(--vj-card)}
.vj-about p,.vj-social p,.vj-news p{text-align:center;max-width:680px;margin:0 auto;color:#555}

@media(max-width:768px){.vj-occ-grid{grid-template-columns:1fr 1fr}.vj-hero{padding:64px 0}.vj-hero h1{font-size:1.9rem}.vj-hero p{font-size:1.02rem}}

/* ============================================================
   Trust feature boxovi (iznad footera)
   ============================================================ */
.vj-feats{background:var(--vj-soft);border-top:1px solid var(--vj-line)}
.vj-feats .vj-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:38px;padding-bottom:38px}
.vj-feat-box{display:flex;align-items:center;gap:14px}
.vj-feat-ic{flex:0 0 auto;width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:var(--vj-gold)}
.vj-feat-ic svg{width:30px;height:30px}
.vj-feat-tx{display:flex;flex-direction:column;line-height:1.35}
.vj-feat-tx strong{font-family:"Spectral SC",serif;color:var(--vj-ink);font-size:.98rem;letter-spacing:.01em}
.vj-feat-tx span{color:var(--vj-muted);font-size:.86rem}
@media(max-width:900px){.vj-feats .vj-wrap{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:480px){.vj-feats .vj-wrap{grid-template-columns:1fr}}

/* ============================================================
   Footer (crni)
   ============================================================ */
.vj-footer{background:var(--vj-ink);color:#cfcfcf;padding:56px 0 0}
.vj-footer .vj-wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.vj-footer h4{font-family:"Spectral SC",serif;color:var(--vj-gold);font-size:1rem;letter-spacing:.05em;margin:0 0 16px;text-transform:uppercase}
.vj-footer a{color:#cfcfcf;text-decoration:none;display:block;padding:5px 0;font-size:.93rem}
.vj-footer a:hover{color:var(--vj-gold)}
.vj-footer p{color:#9c9c9c;font-size:.92rem;line-height:1.7}
.vj-footer .vj-brand{font-family:"Spectral SC",serif;font-size:1.35rem;color:#fff;margin-bottom:12px;letter-spacing:.04em}
.vj-foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px}
.vj-foot-bottom .vj-wrap{display:flex;justify-content:space-between;align-items:center;padding:20px;font-size:.85rem;color:#9c9c9c}
.vj-foot-bottom a{display:inline;color:#cfcfcf}
.vj-pay{display:flex;gap:8px;align-items:center;color:#9c9c9c}
@media(max-width:768px){.vj-footer .vj-wrap{grid-template-columns:1fr 1fr}.vj-foot-bottom .vj-wrap{flex-direction:column;gap:10px;text-align:center}}