/* =====================================================================
   Slikoplast Shop — moderni sloj (custom.css)
   Nadgradi temo classic: paleta, tipografija, gumbi, kartice, glava, noga.
   Vse prek CSS spremenljivk za enostavno nadaljnje prilagajanje.
   ===================================================================== */
:root{
  --sp-primary:#0EA5C4;          /* prečiščen znamčni cyan */
  --sp-primary-strong:#0B8398;   /* hover / poudarek */
  --sp-primary-soft:#E8F7FB;     /* svetel tint za ozadja */
  --sp-ink:#15212B;              /* naslovi, noga */
  --sp-ink-soft:#33414F;
  --sp-text:#2A333C;             /* osnovno besedilo */
  --sp-muted:#6B7785;            /* sekundarno besedilo */
  --sp-bg:#FFFFFF;
  --sp-bg-alt:#F5F8FA;           /* alternativna sekcija */
  --sp-border:#E6EBF0;
  --sp-border-2:#D6E2E8;
  --sp-radius:14px;
  --sp-radius-sm:9px;
  --sp-radius-pill:999px;
  --sp-shadow:0 1px 2px rgba(21,33,43,.04), 0 4px 16px rgba(21,33,43,.05);
  --sp-shadow-hover:0 10px 34px rgba(21,33,43,.13);
  --sp-transition:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------- Osnova & tipografija ---------- */
body{ color:var(--sp-text); font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ color:var(--sp-ink); font-weight:800; letter-spacing:-.015em; line-height:1.25; }
p{ color:var(--sp-text); }
a{ color:var(--sp-primary-strong); transition:color var(--sp-transition); }
a:hover,a:focus{ color:var(--sp-primary); text-decoration:none; }
hr{ border-color:var(--sp-border); }
::selection{ background:var(--sp-primary); color:#fff; }
#wrapper{ background:transparent; }
.container{ max-width:1240px; }

/* ---------- Gumbi ---------- */
.btn{ border-radius:var(--sp-radius-sm); font-weight:700; letter-spacing:.01em; padding:10px 22px; transition:transform var(--sp-transition), box-shadow var(--sp-transition), background var(--sp-transition), border-color var(--sp-transition); box-shadow:none; }
.btn:active{ transform:translateY(0); }
.btn-primary,.btn-primary:visited{ background:var(--sp-primary); border-color:var(--sp-primary); color:#fff; }
.btn-primary:hover,.btn-primary:focus{ background:var(--sp-primary-strong); border-color:var(--sp-primary-strong); color:#fff; transform:translateY(-2px); box-shadow:var(--sp-shadow-hover); }
.btn-secondary{ background:#fff; border:1px solid var(--sp-border-2); color:var(--sp-ink); }
.btn-secondary:hover{ background:var(--sp-primary-soft); border-color:var(--sp-primary); color:var(--sp-primary-strong); }
.btn-success{ background:var(--sp-primary); border-color:var(--sp-primary); }
.btn-success:hover{ background:var(--sp-primary-strong); border-color:var(--sp-primary-strong); }
.btn-outline-primary{ color:var(--sp-primary-strong); border-color:var(--sp-primary); }
.btn-outline-primary:hover{ background:var(--sp-primary); border-color:var(--sp-primary); }

/* ---------- Glava ---------- */
#header{ background:#fff; box-shadow:inset 0 -3px 0 0 var(--sp-primary), 0 4px 18px rgba(21,33,43,.05); position:sticky; top:0; z-index:1010; }
/* zgornja utility vrstica (telefon / jezik / prijava) — svetla, umirjena */
#header .header-top .header-nav,#header .header-nav{ color:var(--sp-muted); }
#_desktop_user_info a,#header .header-top a{ color:var(--sp-ink); }
#header .header-top{ padding-top:14px; padding-bottom:14px; }
#header a{ color:var(--sp-ink); }
#_desktop_logo img{ max-height:56px; width:auto; }
/* glavni meni */
#_desktop_top_menu .top-menu a.dropdown-item,
.header-top .menu .top-menu > li > a,
#top-menu > li > a{ color:var(--sp-ink); font-weight:700; position:relative; }
#top-menu > li > a:hover{ color:var(--sp-primary-strong); }
#top-menu .sub-menu{ border:0; border-radius:var(--sp-radius-sm); box-shadow:var(--sp-shadow-hover); padding:8px; }
#top-menu .sub-menu a:hover{ background:var(--sp-primary-soft); color:var(--sp-primary-strong); border-radius:6px; }
/* iskalnik */
#search_widget form input[type=text],
.ps-search-input, .header .search-widget input{ border:1px solid var(--sp-border-2); border-radius:var(--sp-radius-pill); padding-left:16px; height:44px; transition:border-color var(--sp-transition), box-shadow var(--sp-transition); }
#search_widget form input[type=text]:focus{ border-color:var(--sp-primary); box-shadow:0 0 0 3px var(--sp-primary-soft); outline:none; }
#search_widget form button[type=submit]{ color:var(--sp-primary-strong); }

/* ---------- Vsebinski okvir ---------- */
#main{ padding-top:6px; }
.page-header,.block-category{ background:#fff; border:1px solid var(--sp-border); border-radius:var(--sp-radius); padding:22px 26px; box-shadow:var(--sp-shadow); margin-bottom:22px; }
.page-header h1,.block-category h1{ margin:0; font-size:26px; }
.breadcrumb{ background:transparent; padding:12px 0; font-size:13px; }
.breadcrumb a{ color:var(--sp-muted); }
.breadcrumb li:last-child a,.breadcrumb .active{ color:var(--sp-ink); }

/* ---------- Kartice izdelkov ---------- */
.product-miniature{ margin-bottom:24px; }
.product-miniature .thumbnail-container{
  background:var(--sp-bg); border:1px solid var(--sp-border); border-radius:var(--sp-radius);
  padding:14px; height:100%; box-shadow:var(--sp-shadow);
  transition:box-shadow var(--sp-transition), transform var(--sp-transition), border-color var(--sp-transition);
}
.product-miniature .thumbnail-container:hover{ box-shadow:var(--sp-shadow-hover); transform:translateY(-4px); border-color:var(--sp-border-2); }
.product-miniature img{ border-radius:10px; }
.product-miniature .product-title{ margin-top:12px; }
.product-miniature .product-title a{ color:var(--sp-ink); font-weight:700; font-size:15px; }
.product-miniature .product-title a:hover{ color:var(--sp-primary-strong); }
.product-price-and-shipping .price{ color:var(--sp-ink); font-weight:800; }
/* quick view / highlight */
.highlighted-informations .quick-view{ color:var(--sp-primary-strong); font-weight:600; }
.product-flags .product-flag{ border-radius:var(--sp-radius-pill); background:var(--sp-primary); font-weight:700; letter-spacing:.02em; padding:4px 12px; }
.product-flag.new{ background:var(--sp-ink); }

/* vrstični (list) prikaz — kartica naj bo cel blok, brez podvojene črte */
#js-product-list .product-miniature{ border-bottom:0 !important; }
#js-product-list .product-miniature .thumbnail-container{ padding:16px 20px; }

/* ---------- Faceted filtri (levi stolpec) ---------- */
#search_filters,#_desktop_search_filters{ border:1px solid var(--sp-border); border-radius:var(--sp-radius); box-shadow:var(--sp-shadow); }
#search_filters .facet-title{ color:var(--sp-ink); }
.facet .facet-label a{ color:var(--sp-text); }
.facet .facet-label a:hover{ color:var(--sp-primary-strong); }

/* ---------- Domača stran ---------- */
.featured-products .h2,.featured-products h2,.products-section-title{ text-align:center; font-size:24px; margin:34px 0 24px; position:relative; }
.carousel,.carousel-inner,.carousel .carousel-item img{ border-radius:var(--sp-radius); overflow:hidden; }
.carousel-control-prev,.carousel-control-next{ opacity:.85; }
.custom-text{ background:var(--sp-bg-alt); border-radius:var(--sp-radius); padding:26px 30px; box-shadow:none; }

/* ---------- Noga (svetla — koncept A) ---------- */
.footer-container{ background:#EEF2F4; color:#54606A; margin-top:44px; padding-top:36px; border-top:1px solid #E2E8EC; }
.footer-container li a,.footer-container p,.footer-container .text-muted{ color:#5B666F !important; }
.footer-container li a:hover{ color:var(--sp-primary-strong) !important; }
.footer-container h3,.footer-container .h3,.footer-container p.h3,.footer-container .title{ color:var(--sp-primary-strong) !important; font-size:13px; letter-spacing:.09em; text-transform:uppercase; font-weight:800; }
.footer-container .links .h3,.footer-container .title{ color:var(--sp-primary-strong); }
#footer .block-contact,.footer-container hr{ border-color:#DDE4E8; }
.footer-container a{ color:#5B666F; }
/* obvestilo o piškotkih / reassurance ikone */
#block-reassurance li{ border:0; }
#block-reassurance img{ filter:none; }

/* ---------- Obrazci / vnosi ---------- */
.form-control,input[type=text],input[type=email],input[type=tel],textarea,select{ border:1px solid var(--sp-border-2); border-radius:var(--sp-radius-sm); transition:border-color var(--sp-transition), box-shadow var(--sp-transition); }
.form-control:focus,input:focus,textarea:focus,select:focus{ border-color:var(--sp-primary); box-shadow:0 0 0 3px var(--sp-primary-soft); outline:none; }

/* ---------- Modul: izbirnik izgleda + povpraševanje (harmonizacija) ---------- */
.slikzal-izgled{ border:1px solid var(--sp-border); border-radius:var(--sp-radius); padding:16px 18px; box-shadow:var(--sp-shadow); background:#fff; }
.slikzal-izgled .slikzal-title,.slikzal-izgled label{ color:var(--sp-ink); font-weight:700; }
.slikzal-izgled select{ border-radius:var(--sp-radius-sm); }
.slikzal-opt{ border:1px solid var(--sp-border); border-radius:10px; }
.slikzal-opt:hover{ border-color:var(--sp-primary); box-shadow:0 2px 10px rgba(14,165,196,.14); }
.slikzal-opt.sel{ border-color:var(--sp-primary); background:var(--sp-primary-soft); }
#slikzal-chosen{ background:var(--sp-primary-soft); border:1px solid var(--sp-primary); border-radius:var(--sp-radius-sm); color:var(--sp-ink); padding:10px 12px; }
#slikzal-fab{ background:var(--sp-primary); border-radius:var(--sp-radius-pill); box-shadow:0 6px 20px rgba(14,165,196,.4); }
#slikzal-fab:hover{ background:var(--sp-primary-strong); }
#slikzal-badge{ color:var(--sp-primary-strong); }
#slikzal-widget.has-items #slikzal-badge{ background:#FFD400; color:var(--sp-ink); }
#slikzal-panel{ border:1px solid var(--sp-border); border-radius:var(--sp-radius); box-shadow:var(--sp-shadow-hover); }

/* ---------- Drobne izboljšave ---------- */
.card,.js-product-detail .card{ border:1px solid var(--sp-border); border-radius:var(--sp-radius); box-shadow:var(--sp-shadow); }
.alert{ border-radius:var(--sp-radius-sm); }
.pagination .page-link{ border-radius:8px; margin:0 3px; border:1px solid var(--sp-border); color:var(--sp-ink); }
.pagination .active .page-link{ background:var(--sp-primary); border-color:var(--sp-primary); }
img{ max-width:100%; }

/* mobilno: manj agresivni robovi */
@media (max-width:575px){
  .page-header,.block-category{ padding:16px 18px; }
  #_desktop_logo img{ max-height:44px; }
}