@charset "UTF-8";
/* =========================================================
   SHEZMU, halloween.css  (tajemná noc s úplňkem, jen titulní strana)
   Cesta: /user/documents/upload/CSS/halloween.css
   Zapnutí:  <link href="/user/documents/upload/CSS/halloween.css" rel="stylesheet">
   Vypnutí:  ten jeden řádek smazat. Nic jiného se nemění.
   ========================================================= */

body.type-index { --hw-violet: #7d6aa8; --hw-lav: #cfc3ec; --hw-glow: rgba(190, 170, 240, .55); }

/* 1. Pruh přilepený přímo pod hlavní menu, přes celou šířku */
body.type-index #header::after {
  content: 'Halloween  ·  noc, kdy vůně ožívají';
  display: block;
  clear: both;
  width: 100%;
  margin: 0;
  padding: 11px 16px;
  background: linear-gradient(90deg, #120e1a, #1a1a1a 50%, #120e1a);
  color: var(--hw-lav);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-align: center;
  white-space: pre;
  text-shadow: 0 0 12px var(--hw-glow);
  box-sizing: border-box;
}

/* 2. Úplněk v modravém měsíčním světle za logem */
body.type-index .sh-logo { position: relative; isolation: isolate; }
body.type-index .sh-logo::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -14px;
  width: 180px;
  height: 180px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #ffffff 0%, #e6edfb 45%, #c4d3f1 80%, #aabfe8 100%);
  box-shadow: 0 0 60px 22px rgba(170, 195, 240, .40), 0 0 150px 60px rgba(120, 150, 220, .14);
  opacity: .6;
  z-index: -1;
  pointer-events: none;
}

/* 3. Claim v měsíčním světle */
body.type-index .sh-claim-text {
  text-shadow: 0 0 20px rgba(160, 175, 230, .45);
}

/* 5. Ornamenty a pruh důvěry: místo kosočtverců svítící duše */
body.type-index .sh-orn2::before { background: linear-gradient(90deg, transparent, var(--hw-violet) 30%, var(--hw-violet) 38%, transparent 38% 62%, var(--hw-violet) 62% 70%, transparent) !important; opacity: .8 !important; }
body.type-index .sh-orn2::after,
body.type-index .sh-ornament .sh-diamond,
body.type-index .sh-home-trust b {
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #ffffff 0%, var(--hw-lav) 45%, var(--hw-violet) 100%) !important;
  box-shadow: 0 0 8px 2px var(--hw-glow), 0 0 22px 6px rgba(160, 140, 220, .25) !important;
}
body.type-index .sh-orn2::after { transform: translateX(-50%) !important; }
body.type-index .sh-home-trust b { transform: none !important; }
body.type-index .sh-ornament .sh-line { background: var(--hw-violet) !important; }
body.type-index .sh-ornament .sh-diamond { width: 7px !important; height: 7px !important; }

/* 6. Dlaždice Náš výběr: z tmavé části stoupá kouř */
body.type-index a.sh-occ-tile { transition: box-shadow .4s ease, border-color .4s ease; }
body.type-index a.sh-occ-tile::before {
  content: '';
  position: absolute;
  left: -20%; right: -20%; bottom: -10%;
  height: 70%;
  background:
    radial-gradient(ellipse 40% 30% at 30% 80%, rgba(200, 185, 245, .22), rgba(200, 185, 245, 0) 70%),
    radial-gradient(ellipse 35% 28% at 70% 70%, rgba(200, 185, 245, .16), rgba(200, 185, 245, 0) 70%);
  z-index: 1;
  pointer-events: none;
  opacity: .6;
  transition: opacity .4s ease;
}
body.type-index a.sh-occ-tile:hover::before { opacity: 1; animation: hw-smoke 6s ease-in-out infinite; }
body.type-index .sh-occ-text { z-index: 2; }
body.type-index a.sh-occ-tile:hover {
  border-color: rgba(160, 140, 220, .6) !important;
  box-shadow: 0 14px 44px rgba(125, 106, 168, .28);
}
body.type-index .sh-occ-line { background: var(--hw-lav) !important; box-shadow: 0 0 6px var(--hw-glow); }

/* 7. Bannery značek: noční mlha a ztmavené okraje */
body.type-index a.sh-tile { position: relative; }
body.type-index a.sh-tile::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8%;
  right: -8%;
  background:
    radial-gradient(ellipse 60% 25% at 30% 100%, rgba(210, 200, 245, .28), rgba(210, 200, 245, 0) 70%),
    radial-gradient(ellipse 55% 22% at 75% 96%, rgba(210, 200, 245, .22), rgba(210, 200, 245, 0) 70%),
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 50%, rgba(18, 10, 30, .5) 100%);
  pointer-events: none;
  z-index: 2;
  animation: hw-mist 12s ease-in-out infinite alternate;
}

body.type-index a.sh-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 90%, rgba(236, 240, 255, .9) 0, rgba(180, 200, 245, .45) 2px, rgba(160, 185, 240, 0) 10px),
    radial-gradient(circle at 34% 72%, rgba(236, 240, 255, .7) 0, rgba(180, 200, 245, .35) 2px, rgba(160, 185, 240, 0) 8px),
    radial-gradient(circle at 52% 95%, rgba(236, 240, 255, .9) 0, rgba(180, 200, 245, .45) 3px, rgba(160, 185, 240, 0) 12px),
    radial-gradient(circle at 70% 80%, rgba(236, 240, 255, .7) 0, rgba(180, 200, 245, .35) 2px, rgba(160, 185, 240, 0) 8px),
    radial-gradient(circle at 86% 92%, rgba(236, 240, 255, .85) 0, rgba(180, 200, 245, .45) 2px, rgba(160, 185, 240, 0) 10px);
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
  animation: hw-rise-banner 12s linear infinite;
}
body.type-index .sh-grid a.sh-tile:nth-child(2)::before { animation-delay: -6s; }

/* 8. Tlačítko vzorků */
body.type-index a.sh-samples-btn:hover { background: #1a1a1a !important; box-shadow: 0 0 0 1px var(--hw-violet), 0 0 24px var(--hw-glow); }

/* Animace */
@keyframes hw-rise-banner {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: .7; }
  100% { transform: translateY(-75%); opacity: 0; }
}
@keyframes hw-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .78; }
}
@keyframes hw-smoke {
  0%   { transform: translateY(10%) scale(1); opacity: .4; }
  50%  { transform: translateY(-8%) scale(1.08); opacity: 1; }
  100% { transform: translateY(10%) scale(1); opacity: .4; }
}
@keyframes hw-mist { 0% { transform: translateX(-4%); } 100% { transform: translateX(4%); } }

/* =========================================================
   SPODNÍ ČÁST TITULKY (uvítací text): produkty, články, SEO text
   Zlaté akcenty se na pár dní mění na měsíční fialovou.
   ========================================================= */
body.type-index { --hw-ink: #6a5796; }

/* Záložky s produkty */
body.type-index .homepage-tabs-wrapper a.shp-tab-link:hover { border-color: var(--hw-violet) !important; color: var(--hw-ink) !important; }
body.type-index .homepage-tabs-wrapper .shp-tab.active a.shp-tab-link,
body.type-index .homepage-tabs-wrapper a.shp-tab-link[aria-selected="true"] { box-shadow: 0 0 0 1px var(--hw-violet), 0 0 18px rgba(160, 140, 220, .35); }
body.type-index .homepage-tabs-wrapper .products-inline .product .p:hover {
  border-color: rgba(125, 106, 168, .5) !important;
  box-shadow: 0 10px 30px rgba(125, 106, 168, .16);
}
body.type-index .homepage-tabs-wrapper .products-inline .p a.name:hover span { color: var(--hw-ink) !important; }
body.type-index .homepage-tabs-wrapper .products-inline .product-appendix { color: var(--hw-ink) !important; }
body.type-index .homepage-tabs-wrapper .products-inline .p-tools .btn-cart:hover { background: var(--hw-ink) !important; }
body.type-index .homepage-tabs-wrapper .products-inline .p-tools .quantity button:hover { color: var(--hw-ink) !important; }

/* Články: ornament se světélkem a fialové linky */
body.type-index .sh-bl-orn::before { background: linear-gradient(90deg, var(--hw-violet) 0 44px, transparent 44px 72px, var(--hw-violet) 72px 116px) !important; }
body.type-index .sh-bl-orn::after {
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--hw-lav) 45%, var(--hw-violet) 100%) !important;
  box-shadow: 0 0 8px 2px var(--hw-glow), 0 0 22px 6px rgba(160, 140, 220, .25);
  transform: translateX(-50%) !important;
}
body.type-index a.sh-bl-title { text-shadow: 0 0 22px rgba(160, 175, 230, .35); }
body.type-index .homepage-blog-wrapper .news-item:hover .title { text-decoration-color: var(--hw-violet) !important; }
body.type-index .homepage-blog-wrapper .news-item .read-article { border-bottom-color: var(--hw-violet) !important; }
body.type-index .homepage-blog-wrapper .news-item:hover .image { box-shadow: 0 12px 34px rgba(125, 106, 168, .22); }

/* SEO text a FAQ */
body.type-index .sh-seo a { color: var(--hw-ink) !important; }
body.type-index .sh-seo-col { border-top-color: rgba(125, 106, 168, .35) !important; }
body.type-index .sh-seo-col span.sh-seo-label { color: var(--hw-ink) !important; }
body.type-index .sh-seo h2::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--hw-lav) 45%, var(--hw-violet) 100%);
  box-shadow: 0 0 8px 2px var(--hw-glow), 0 0 20px 6px rgba(160, 140, 220, .22);
}
body.type-index .sh-faq summary::after { border-color: var(--hw-violet) !important; }
body.type-index .sh-faq details[open] summary { color: var(--hw-ink); }

/* Ornament na pozadí stránky (ornament.css): ze zlaté do měsíční fialové */
body.type-index::before,
body.type-index::after {
  filter: hue-rotate(215deg) saturate(.75) brightness(.95);
}

/* Newsletter v patičce */
body.type-index #footer .footer-newsletter .newsletter-header::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--hw-lav) 45%, var(--hw-violet) 100%);
  box-shadow: 0 0 8px 2px var(--hw-glow), 0 0 20px 6px rgba(160, 140, 220, .22);
}
body.type-index #footer .footer-newsletter input[type="text"]:not(.no-display):focus,
body.type-index #footer .footer-newsletter input[type="email"]:focus {
  border-color: var(--hw-violet) !important;
  box-shadow: 0 0 0 3px rgba(125, 106, 168, .18) !important;
}
body.type-index #footer .footer-newsletter .consents a { color: var(--hw-ink) !important; }
body.type-index #footer .footer-newsletter .btn-primary:hover,
body.type-index #footer .footer-newsletter button[type="submit"]:hover {
  background: var(--hw-ink) !important;
  border-color: var(--hw-ink) !important;
  box-shadow: 0 8px 24px rgba(125, 106, 168, .35) !important;
}

@media (max-width: 520px) {
  body.type-index #header::after { font-size: 10px; letter-spacing: .14em; padding: 9px 12px; }
  body.type-index .sh-logo::before { width: 150px; height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  body.type-index a.sh-tile::before, body.type-index a.sh-tile::after,
  body.type-index a.sh-occ-tile:hover::before { animation: none !important; }
}