/* =========================================================
   WOLF & FIRE – CLEAN CSS (sjednocené + bez hacků)
   ========================================================= */

/* ---------- H1 STYLE + ANIMATION ---------- */
.homepage-texts-wrapper .welcome h1,
article.pageArticleDetail > header h1{
  text-align:center;
  font-weight:700;
  color:#fff;
  letter-spacing:.4px;
  animation:wfFadeUp .9s ease-out both;
}
@keyframes wfFadeUp{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------- LOGO HOVER (RED) ---------- */
#header .site-name a img{
  transition:filter .25s ease, opacity .25s ease;
}
#header .site-name a:hover img{
  filter: brightness(0) saturate(100%)
          invert(22%) sepia(98%) saturate(7421%)
          hue-rotate(356deg) brightness(95%) contrast(110%);
}

/* ---------- GLOBAL DARK (web) ---------- */
body, #content-wrapper, #content, #content-inner{
  background:#040607 !important;
  color:#fff !important;
  margin:0; padding:0;
}
main#content, #content-wrapper, #content,
.content-wrapper, .content, .index-content-wrapper{
  color:#fff !important;
}
main#content h1, main#content h2, main#content h3, main#content h4, main#content h5, main#content h6,
#content-wrapper h1, #content-wrapper h2, #content-wrapper h3, #content-wrapper h4, #content-wrapper h5, #content-wrapper h6,
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6{
  color:#fff !important;
}
main#content a, #content-wrapper a, #content a{
  color:#7dd3fc !important;
}
main#content a:hover, #content-wrapper a:hover, #content a:hover{
  opacity:.9;
}

hr{
  border:0; height:1px;
  background:rgba(255,255,255,.4);
  margin:34px 0;
}

/* ---------- FOOTER DARK ---------- */
#footer{
  background:#040607 !important;
  border-top-color:rgba(255,255,255,.25)!important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#footer p, #footer span, #footer li, #footer a{color:#fff!important;}
#footer a{opacity:.85;}
#footer a:hover{opacity:1;}

/* Newsletter input */
#footer .subscribe-form,
#footer .subscribe-form form,
#footer .subscribe-form .compact-form{color:#fff!important;}
#footer .subscribe-form input{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  color:#fff!important;
}
#footer .subscribe-form input::placeholder{color:rgba(255,255,255,.6)!important;}

/* CTA buttons (Shoptet system buttons) */
#footer .subscribe-form button.btn.btn-default,
input[type=submit].btn.btn-primary,
.content-window-in .btn,
.content-window-in input[type=submit]{
  background:#ff0033!important;
  border-color:#ff0033!important;
  color:#fff!important;
}
#footer .subscribe-form button.btn.btn-default:hover,
input[type=submit].btn.btn-primary:hover,
.content-window-in .btn:hover,
.content-window-in input[type=submit]:hover{
  background:#cc0028!important;
  border-color:#cc0028!important;
  color:#fff!important;
}

/* Hide empty consent label */
.form-group.consents label.whole-width{display:none!important;}

/* ---------- OVERLAYS (cart/login/search) DARK ---------- */
.content-window-in{
  background:#040607!important;
  color:#fff!important;
}
.content-window-in p,.content-window-in span,.content-window-in label,.content-window-in a,
.content-window-in h1,.content-window-in h2,.content-window-in h3,.content-window-in h4,.content-window-in h5{
  color:#fff!important;
}
.content-window-in input,.content-window-in textarea{
  background:#0a0a0a!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.3)!important;
}

/* cart heading white */
.content-window-in .cart-heading,
.content-window-in .cart-heading.h1,
.content-window-in .cart-heading h1,
.content-window-in .h1,
.content-window-in h1{color:#fff!important;}
.content-window-in .cart-heading:before,
.content-window-in .cart-heading.h1:before,
.content-window-in .cart-heading h1:before{color:#fff!important;}

/* ---------- MOBILE MENU DARK ---------- */
.navigation-in{background:#040607!important;}
.navigation-in a,.navigation-in span,.navigation-in li{color:#fff!important;}
.navigation-in a:hover,.navigation-in .active>a{color:#ff0033!important;}
.navigation-close:before,.navigation-close:after{background:#fff!important;}

/* Header icons white */
.header-icons a,.header-icons span,.user-action a{color:#fff!important;}
.user-action{background:#040607!important;}

/* =========================================================
   WOLF & FIRE – PAGE LAYOUT (wf-*)
   ========================================================= */
.wf-page, .wf-section, .wf-hero, .wf-grid, .wf-card, .wf-banner, .wf-img-wrap{box-sizing:border-box;}

.wf-page{
  max-width:980px;
  margin:0 auto;
  padding:10px 16px;
  font-family:inherit;
  line-height:1.65;
}

/* keep wf-page centered even when Shoptet pushes */
#content .wf-page,
#content-wrapper .wf-page,
#content-inner .wf-page{
  margin-left:auto!important;
  margin-right:auto!important;
  width:100%;
}

/* HERO */
.wf-hero{margin:10px 0 28px 0;}
.wf-hero p{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  opacity:.9;
  font-size:16px;
}

/* Images */
.wf-img, .wf-banner img{
  width:100%!important;
  height:auto!important;
  display:block;
  border-radius:10px;
}
.wf-img-wrap{margin:18px 0 8px 0;}
.wf-banner{margin:18px 0;}

/* Sections */
.wf-section{margin:34px 0 40px 0;}
.wf-section h2{
  font-size:26px;
  margin:14px 0 8px 0;
  text-align:center;
}
.wf-section p{
  max-width:820px;
  margin:0 auto 10px auto;
  text-align:center;
  opacity:.95;
}
.wf-divider{
  height:1px;
  background:rgba(255,255,255,.4);
  margin:34px 0;
}

/* Grid + cards */
.wf-grid{
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
}
.wf-card{
  border:1px solid rgba(255,255,255,.4);
  border-radius:10px;
  background:rgba(0,0,0,.15);
  overflow:hidden;
}
.wf-card img{width:100%; height:auto; display:block;}
.wf-card-body{padding:12px 12px 10px;}
.wf-card h3{margin:0 0 6px; font-size:16px; font-weight:400; color:#fff;}
.wf-card p{margin:0; font-size:14px; font-weight:400; color:#fff; opacity:.92;}

/* Mobile */
@media (max-width:680px){
  .wf-grid{grid-template-columns:1fr!important;}
  .wf-section h2{font-size:22px;}
}

/* =========================================================
   WOLF & FIRE – CTA BUTTON (jedna definice)
   používá se v kartách i v social sekci
   ========================================================= */
.wf-btn{
  display:flex;
  align-items:center;
  gap:12px;

  width:100%;
  padding:14px 16px;
  margin:14px 0 0 0;

  border-radius:16px;
  background:#ff0033;
  color:#fff;
  text-decoration:none;

  border:1px solid rgba(255,255,255,.14);
  transition: background .2s ease, transform .15s ease;
}
.wf-btn:hover{
  background:#cc0028;
  transform: translateY(-1px);
}
.wf-btn:active{transform:none;}
.wf-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}

.wf-ic{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#000;
  flex:0 0 auto;
}
.wf-ic svg{display:block; fill:#fff;}

.wf-txt{display:flex; flex-direction:column; line-height:1.15; gap:3px; min-width:0;}
.wf-txt strong{font-size:15px; font-weight:600; letter-spacing:.2px;}
.wf-txt small{
  font-size:12px;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wf-arrow{margin-left:auto; opacity:.9; font-size:16px;}

/* Cards: tlačítko je součást obsahu */
.wf-card .wf-btn{margin-top:14px;}

/* =========================================================
   SOCIAL CTA LAYOUT + ICON COLORS
   ========================================================= */
.wf-center{display:flex; justify-content:center; width:100%;}

.wf-social{
  width:100%;
  max-width:920px;
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:14px;
}
@media (max-width:640px){
  .wf-social{grid-template-columns:1fr;}
}

/* YouTube: bílé kolečko + černá ikonka */
.wf-yt .wf-ic{background:#fff;}
.wf-yt .wf-ic svg{fill:#000;}

/* Instagram: černé kolečko + bílá ikonka */
.wf-ig .wf-ic{background:#000;}
.wf-ig .wf-ic svg{fill:#fff;}

/* YouTube: play trojúhelník bílý, ať je vidět na černém tvaru */
.wf-yt .wf-ic .wf-yt-play{
  fill:#fff !important;
}
/* WF CTA buttons – text vždy bílý (ignoruje globální <a> barvy) */
.wf-btn,
.wf-btn:hover,
.wf-btn:focus,
.wf-btn:active{
  color:#ffffff !important;
}
.wf-btn .wf-txt small{
  color: rgba(255,255,255,.75);
}
/* WF CTA – text vždy bílý (Shoptet-safe) */
.wf-btn *,
.wf-btn:hover *,
.wf-btn:focus *,
.wf-btn:active *{
  color:#ffffff !important;
}
/* === YouTube icon – inverted style === */

/* černé pozadí badge */
.wf-yt .wf-ic{
  background:#000 !important;
}

/* bílý TV tvar */
.wf-yt .wf-ic svg path{
  fill:#fff !important;
}

/* černý play trojúhelník */
.wf-yt .wf-ic .wf-yt-play{
  fill:#000 !important;
}

/* Back button v overlay oknech – sjednocení pozice */
.content-window-in .toggle-window-arr.btn{
  position: static !important;      /* zruší divné absolute posuny */
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  margin: 12px 0 0 12px !important; /* konzistentní odsazení */
  padding: 10px 14px !important;
  line-height: 1.1 !important;
}

/* když šablona posouvá šipku přes ::before, vycentruj ji */
.content-window-in .toggle-window-arr.btn::before{
  position: static !important;
  display: inline-block !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}
/* Back shopping -> Back */
.content-window-in .toggle-window-arr.btn span{
  display: none !important;
}

/* =========================================================
   Back button v overlay oknech – sjednocení pozice + text
   ========================================================= */

/* =========================================================
   OVERLAY "Back" button (search/cart/login) – CLEAN & SAFE
   ========================================================= */

/* Schovej "shopping" (nech jen Back) */
.content-window-in .toggle-window-arr.btn > span{
  display:none !important;
}

/* Ukotvení v overlay (ne fixed – nikdy nebude "po celém webu") */
.content-window-in{
  position: relative !important;
}

/* Pozice + vzhled tlačítka */
.content-window-in .toggle-window-arr.btn{
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 50 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 10px 14px !important;
  line-height: 1 !important;
}

/* Srovnat šipku z ::before */
.content-window-in .toggle-window-arr.btn::before{
  position: static !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
}