/*
Theme Name: Pod Hvězdami
Theme URI:  http://pod-hvezdami.local
Author:      Martine
Description: Moderní a přívětivá šablona pro web Pod Hvězdami
Version:     1.6
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pod-hvezdami
*/

/* style.css */
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: #0b0c10; /* fallback */
  color: #c5c6c7;
  line-height: 1.6;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* =========================================================
   PH – Globální kosmické pozadí (pro celý web)
   - Vrstva 1: jemná mlhovina (gradient)
   - Vrstva 2: hvězdy (radial dots)
   Pozn.: je to FIXED a NEKRYJE obsah (z-index < 0)
========================================================= */
body:not(.wp-admin)::before,
body:not(.wp-admin)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body:not(.wp-admin)::before {
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(120, 70, 255, .18), transparent 60%),
    radial-gradient(1000px 800px at 88% 28%, rgba(56, 189, 248, .12), transparent 55%),
    radial-gradient(900px 600px at 50% 85%, rgba(34, 211, 238, .08), transparent 60%),
    linear-gradient(135deg, rgba(10,12,22,1) 0%, rgba(5,7,14,1) 55%, rgba(7,11,22,1) 100%);
}

body:not(.wp-admin)::after {
  z-index: -1;
  opacity: .35;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.70) 0.5px, transparent 1px),
    radial-gradient(circle at 40% 30%, rgba(255,255,255,.60) 0.5px, transparent 1px),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,.55) 0.5px, transparent 1px),
    radial-gradient(circle at 90% 60%, rgba(255,255,255,.55) 0.5px, transparent 1px),
    radial-gradient(circle at 25% 75%, rgba(255,255,255,.55) 0.5px, transparent 1px),
    radial-gradient(circle at 55% 85%, rgba(255,255,255,.50) 0.5px, transparent 1px),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.45) 0.5px, transparent 1px);
  background-size: 260px 260px;
}

/* Jemná viněta (okraje) – aby pozadí nešlo „do bíla“ */
#page {
  position: relative;
}
#page::before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* nad hvězdami, pod obsahem */
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(0,0,0,.45), transparent 60%),
    radial-gradient(1200px 700px at 50% 100%, rgba(0,0,0,.55), transparent 65%);
  mix-blend-mode: multiply;
  opacity: .65;
}


/* =========================================================
   PH – Skleněné „bubliny“ a karty (použitelné napříč webem)
   Pokud některé stránky používají jiné wrappery, nevadí – 
   tyhle třídy se chytnou tam, kde existují.
========================================================= */
/* ================================
   ÚVOD – průhlednější bubliny/karty
   ================================ */
.home .ph-card,
.home .ph-bubble,
.home .ph-side-card,
.home .ph-home-card,
.home .ph-panel{
  background: rgba(16, 22, 36, .18) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.25) !important;
  color: rgba(235,242,255,.92) !important;
}


.ph-bubble {
  padding: 18px 18px;
}

.ph-card {
  padding: 16px 18px;
}

.ph-card h2, .ph-card h3, .ph-card h4,
.ph-bubble h2, .ph-bubble h3, .ph-bubble h4 {
  color: #e9eefc;
}

.ph-accent {
  color: #5ce1ff;
}

/* Form prvky (Kompatibilita) – sjednocení */
.ph-card select,
.ph-card input,
.ph-card textarea,
.ph-card button,
.entry-content select,
.entry-content input,
.entry-content textarea,
.entry-content button {
  font: inherit;
}

.entry-content select,
.entry-content input,
.entry-content textarea {
  background: rgba(10, 12, 24, 0.55);
  color: #e9eefc;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}

.entry-content select:focus,
.entry-content input:focus,
.entry-content textarea:focus {
  border-color: rgba(92, 225, 255, .6);
  box-shadow: 0 0 0 3px rgba(92, 225, 255, .15);
}

/* Tlačítka – klidný „neon“ */
.entry-content button,
.entry-content input[type="submit"],
.entry-content .button,
.entry-content a.button {
  background: rgba(18, 24, 48, .9);
  color: #e9eefc;
  border: 1px solid rgba(92, 225, 255, .35);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.entry-content button:hover,
.entry-content input[type="submit"]:hover,
.entry-content .button:hover,
.entry-content a.button:hover {
  transform: translateY(-1px);
  border-color: rgba(92, 225, 255, .65);
  background: rgba(18, 24, 48, 1);
}


a {
  color: #66fcf1;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

header, footer {
  background: #1f2833;
  padding: 1rem 2rem;
}

header h1 {
  margin: 0;
  font-size: 2rem;
  color: #66fcf1;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0;
}

.main-content {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.content-with-sidebar {
  display: flex;
  gap: 2rem;
}
.site-main {
  flex: 2;
}
.widget-area {
  flex: 1;
  background: #1b262c;
  padding: 1rem;
  border-radius: 8px;
}
.widget-title {
  color: #66fcf1;
  margin-bottom: 0.5rem;
}

.post {
  background: #16202a;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.post h2 {
  margin-top: 0;
  color: #66fcf1;
}

footer p {
  margin: 0;
  font-size: 0.9rem;
  text-align: center;
}

/* Responsive */
@media (max-width: 600px) {
  header, footer { padding: 1rem; }
  .main-content { padding: 0 0.5rem; }
  .content-with-sidebar { flex-direction: column; }
}
/* Horoskopové bubliny */
.horoscope-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}

/* === Pod Hvězdami: bubliny horoskopu (glass) === */
.horoscope-bubble{
  position: relative;
  padding: 1rem 1.5rem;
  border-radius: 18px;
  line-height: 1.55;
  max-width: none;          /* důležité pro grid */
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);

  background: rgba(10, 14, 26, .42);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(235,242,255,.92);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateZ(0);
}

.horoscope-bubble::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(900px 200px at 20% 0%, rgba(140,90,255,.12), transparent 60%);
  opacity:.55;
}

.horoscope-bubble::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:20px;
  border-width:10px 10px 0;
  border-style:solid;
  border-color: rgba(10,14,26,.42) transparent;
  opacity:.9;
}

/* hover jemně, ne “skok” */
.horoscope-bubble:hover{
  transform: translateY(-2px) scale(1.01);
  transition: transform .25s ease, box-shadow .25s ease;
}


/* Špička bubliny */
.horoscope-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #1f2833 transparent;
}

@media (max-width: 600px) {
  .horoscope-bubble {
    max-width: 90%;
    margin: 0 auto;
  }
}
/* =========================
   Radix v bublině
   ========================= */

.horoscope-bubble--radix {
  max-width: 720px;      /* radix je větší než běžná bublina */
  margin: 2rem auto;
  overflow: hidden;      /* důležité – ořízne SVG do radiusu */
}

/* samotný kontejner pro graf */
#radix {
  background: transparent;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG responzivně */
#radix svg {
  width: 100%;
  max-width: 650px;
  height: auto;
  display: block;
}

/* pokud SVG kreslí černé pozadí */
#radix svg rect {
  fill: transparent;
}
/* Fade-in pro radix */
#radix {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

#radix.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.radix-title{
  margin: 0 0 12px 0;
  font-size: 1.2rem;
  color: #66fcf1;        /* tvá tyrkys */
  letter-spacing: 0.3px;
}
@media (max-width: 600px){
  .horoscope-bubble--radix{
    max-width: 95%;
    padding: 14px;
  }
  #radix svg{
    max-width: 92vw;    /* aby se vešel na šířku displeje */
  }
  .radix-title{
    font-size: 1.05rem;
  }
}





/* =======================================================================
   Pod Hvězdami – COSMIC (stars + glassmorphism)
   Pouze pro stránku Osobní horoskop (page template page-osobni-horoskop.php)
   ======================================================================= */

/* Nebula/gradient layer */
/* Stars layer (pure CSS) */
/* Jemná viněta kolem okrajů */
/* ----------------- Glass cards (bubliny) ----------------- */
/* jemný lesk nahoře */
/* Text v bublinách – čitelnější */
/* hlavní nadpis stránky */
/* Radix box – aby se držel uprostřed a měl prostor */
/* Mobil: trochu menší blur a spacing */
@media (max-width: 980px){
}
/* === Jen osobní horoskop: zapneme přes JS class na <body> === */
body.ph-personal-page .ph-bubble{
  padding: 22px 26px;              /* víc prostoru od okraje */
}

body.ph-personal-page .ph-bubble h3{
  margin: 0 0 14px 0;              /* ať nadpis nedoléhá na horní hranu */
}

body.ph-personal-page .ph-bubble p{
  margin: 0;
  padding-top: 2px;
  line-height: 1.65;
}
body.ph-personal-page .ph-bubble h3{
  position: relative;
  padding-bottom: 10px;
}

body.ph-personal-page .ph-bubble h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 86px;                      /* délka linky */
  height: 2px;
  background: rgba(160, 90, 255, 0.85);
  box-shadow: 0 0 12px rgba(160, 90, 255, 0.45);
  border-radius: 999px;
}
/* Parallax vrstvy jen pro osobní horoskop */
body.ph-personal-page{
  --ph-bg-x: 0px;
  --ph-bg-y: 0px;
}

/* předpoklad: pozadí děláš přes ::before/::after nebo background vrstvy */
body.ph-personal-page::before,
body.ph-personal-page::after{
  transform: translate3d(var(--ph-bg-x), var(--ph-bg-y), 0);
  will-change: transform;
}
/* Osobní horoskop – zmenšit mezeru mezi radixem a výklady (desktop) */
@media (min-width: 980px) {
  .ph-layout{
    /* původně: auto minmax(320px, 560px) auto; */
    grid-template-rows: auto minmax(180px, 200px) auto !important;
  }

  /* původně min-height: 560px; */
  .ph-chartShell{
    min-height: 440px !important;
  }
}
#phInterpretationText{
  grid-column: 1 / -1;
}

.ph-bubble--main{
  max-width: 100%;
  margin: 0;
}

/* Výklad mimo grid – plná šířka jako obsah */
.ph-interpretation-wrap{
  width: min(1220px, calc(100% - 30px));
  margin: 26px auto 0;
}

/* Bubliny výkladu ve 2 sloupcích */
#ph-interpretation{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* První blok (typicky "Celkové naladění") přes oba sloupce */
#ph-interpretation > *:first-child{
  grid-column: 1 / -1;
}

/* Mobil */
@media (max-width: 980px){
  #ph-interpretation{ grid-template-columns: 1fr; }
}
/* === FULL WIDTH výklad === */
.ph-interpretation-wrap{
  width: 100%;
  max-width: 100%;
  padding: 40px 24px;
}

#ph-interpretation{
  max-width: 1200px;      /* šířka obsahu – můžeš změnit */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}

/* první blok přes celou šířku */
#ph-interpretation > *:first-child{
  grid-column: 1 / -1;
}

/* mobil */
@media (max-width: 900px){
  #ph-interpretation{
    grid-template-columns: 1fr;
  }
}
/* VARIANTA 4: plynulé napojení výkladu na horní část + minimální mezera */

/* horní layout bez zbytečné mezery */
.ph-layout{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* výklad přitáhnout nahoru */
.ph-interpretation-wrap{
  margin-top: -36px !important; /* zkus -22 až -36 podle chuti */
  padding-top: 0 !important;
  position: relative;
}

/* linka / přechod – jen když výklad následuje hned po layoutu */
.ph-layout + .ph-interpretation-wrap::before{
  content:"";
  position: absolute;
  top: -30px;               /* posuň výš/níž */
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(199,156,255,.9), transparent);
  opacity: .85;
}

/* mobil: bez záporného přitažení a bez linky */
@media (max-width: 1100px){
  .ph-interpretation-wrap{
    margin-top: 0 !important;
  }
  .ph-layout + .ph-interpretation-wrap::before{
    display: none;
  }
}

/* ============================= */
/* OSOBNÍ HOROSKOP – LAYOUT FIX */
/* ============================= */

/* Zvýraznění radixu */
/* Boční bubliny – kompaktnější */
/* Jemný oddělovač pod radixem */
/* Bez zvětšení na menších obrazovkách */
@media (max-width: 1100px){
}
/* Narození – výpis planet pod sebe */
.ph-birth-lines{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ph-birth-line{
  font-size: 14px;
  line-height: 1.25;
  opacity: .95;
}

.ph-birth-line--strong{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
}
/* =========================================================
   POD HVĚZDAMI – HEADER / MENU CLEAN OVERRIDE
   Vlož na KONEC style.css (úplně dolů), aby to přebilo staré styly.

   Cíl:
   1) Přihlásit/Registrace vpravo nahoře (bez posouvání obsahu)
   2) Nadpis „Pod Hvězdami“ nad menu, na střed
   3) Menu bez „fazolí“ (žádné kapsle na každé položce), moderní text + underline
   4) Bez horizontálního scrollu – menu se při nedostatku místa zlomí do 2 řad
   ========================================================= */

/* Header wrapper */
header.ph-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  padding: 12px 16px !important;
  background: rgba(7,10,18,.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.ph-header__wrap{
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* Top row: auth vpravo */
.ph-header__top{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

/* Brand centered */
.ph-header__brand{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 2px 0 10px !important;
}

.ph-brand__link{
  font-size: 38px !important;
  font-weight: 850 !important;
  letter-spacing: .3px !important;
  text-decoration: none !important;
  color: #7A5CFF !important;
  text-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  line-height: 1.05 !important;
}

/* Auth links */
.ph-auth{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  white-space: nowrap !important;
}
.ph-auth__hi{ color: rgba(255,255,255,.72) !important; font-weight: 600 !important; font-size: 14px !important; }
.ph-auth__link{
  color: #62F0E8 !important;
  text-decoration: none !important;
  font-weight: 650 !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
}
.ph-auth__link:hover{ background: rgba(255,255,255,.06) !important; }
.ph-auth__link--primary{
  background: rgba(122,92,255,.18) !important;
  border: 1px solid rgba(122,92,255,.25) !important;
  color: rgba(255,255,255,.92) !important;
}
.ph-auth__link--primary:hover{ background: rgba(122,92,255,.26) !important; }

/* ===== MENU: bez „fazolí“ ===== */
.ph-topnav{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* UL jako „lištička“, ale linky jsou čisté */
.ph-topnav__menu{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 18px !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 10px 14px !important;
  max-width: 980px !important;

  background: rgba(16, 22, 38, .32) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
}

.ph-topnav__menu > li{ margin: 0 !important; padding: 0 !important; }

.ph-topnav__menu a{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 6px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
  font-weight: 650 !important;
  font-size: 15px !important;
  color: rgba(255,255,255,.72) !important;
}

.ph-topnav__menu a:hover{ color: rgba(255,255,255,.92) !important; }

/* underline hover + active */
.ph-topnav__menu a::after{
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 3px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: rgba(98,240,232,0) !important;
  transition: background .15s ease !important;
}

.ph-topnav__menu a:hover::after{ background: rgba(98,240,232,.32) !important; }

.ph-topnav__menu .current-menu-item > a,
.ph-topnav__menu a[aria-current="page"]{
  color: rgba(255,255,255,.95) !important;
}

.ph-topnav__menu .current-menu-item > a::after,
.ph-topnav__menu a[aria-current="page"]::after{
  background: linear-gradient(90deg, #62F0E8, rgba(98,240,232,0)) !important;
}

/* Mobile: menší brand a menu bez velké kapsle */
@media (max-width: 740px){
  .ph-brand__link{ font-size: 30px !important; }
  .ph-topnav__menu{
    max-width: 100% !important;
    border-radius: 18px !important;
  }
}
/* ===== Mobil: menu/hlavička ať odscrolluje pryč (není fixed) ===== */
@media (max-width: 768px){

  /* zkusíme pokrýt nejběžnější selektory hlavičky */
  header, .site-header, .ph-header, .topbar, .navbar, nav {
    position: static !important;   /* nebo relative – obojí odscrolluje */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
  }

  /* pokud jsi dřív přidával padding-top kvůli fixnímu headeru, na mobilu ho zruš */
  body {
    padding-top: 0 !important;
  }
}
@media (max-width: 768px){
  header, .site-header, .ph-header, .topbar, .navbar, nav{
    position: static !important;
  }
  header * , .site-header * , .ph-header * , .topbar * , .navbar * , nav *{
    position: unset !important; /* pojistka, když je sticky na vnitřním prvku */
  }
}
/* ===== Mobil: hlavička/menu ať odscrolluje (není fixed ani sticky) ===== */
@media (max-width: 768px){
  header.ph-header{
    position: static !important;   /* odscrolluje pryč */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    z-index: auto !important;
  }

  /* Kdyby byl sticky/fixed na vnitřním wrapperu nebo nav */
  header.ph-header .ph-header__wrap,
  header.ph-header .ph-header__top,
  header.ph-header .ph-topnav{
    position: static !important;
    top: auto !important;
  }

  /* Pokud se dřív dával padding-top kvůli fixní hlavičce, na mobilu pryč */
  body{ padding-top: 0 !important; }

  /* Kdyby některá šablona posouvala obsah */
  .main-content{ margin-top: 0 !important; }
}
/* ===== HERO BG – pouze hlavní stránka (jistá varianta) ===== */
/* ===== HERO BACKGROUND – pouze hlavní stránka ===== */
body.home .ph-home-hero{
  background-image: url("/wp-content/themes/pod-hvezdami/assets/img/ph_hero_forest_1920x900.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
/* ===== HERO: obrázek jako spodní vrstva, kosmos nad ním ===== */
body.home .ph-home-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* jistota vrstvení */
}

/* 1) SPODNÍ VRSTVA: obrázek */
body.home .ph-home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: url("/wp-content/themes/pod-hvezdami/assets/img/ph_hero_forest_1920x900.jpg") center 35% / cover no-repeat;
  transform: scale(1.02); /* jemné zvětšení proti okrajům */
}

/* 2) HORNÍ VRSTVA: kosmický závoj (ať ladí se zbytkem webu) */
body.home .ph-home-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  /* zvolené tak, aby obrázek byl vidět, ale pořád "Pod Hvězdami" */
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(120,70,255,.22), transparent 60%),
    radial-gradient(1000px 800px at 90% 30%, rgba(0,180,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(6,10,22,.40) 0%, rgba(6,10,22,.65) 45%, rgba(6,10,22,.85) 100%);
}

/* 3) OBSAH hero musí být nad overlayem */
body.home .ph-home-hero > *{
  position: relative;
  z-index: 2;
}
body.home .ph-home-hero{
  background: none !important;
}
/* =========================================================
   HOME: hero obrázek jako součást globálního pozadí stránky
   (řeší problém "obrázek je pod překryvem")
   ========================================================= */

/* vypneme případné staré pokusy v hero */
body.home .ph-home-hero,
body.home .ph-home-hero::before,
body.home .ph-home-hero::after{
  background: none !important;
  content: none !important;
}

/* hlavní pozadí pro HOME dáme na tělo stránky */
body.home.ph-cosmos-bg{
  position: relative;
}

/* tato vrstva je pozadí celé stránky (za obsahem) */
body.home.ph-cosmos-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* 1) obrázek + 2) kosmické vrstvy nad ním */
  background:
    url("/wp-content/themes/pod-hvezdami/assets/img/ph_hero_forest_1920x900.jpg") center 35% / cover no-repeat,
    radial-gradient(1200px 700px at 20% 10%, rgba(120,70,255,.22), transparent 60%),
    radial-gradient(1000px 800px at 90% 30%, rgba(0,180,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(6,10,22,.35) 0%, rgba(6,10,22,.70) 55%, rgba(6,10,22,.90) 100%);
}

/* =========================================================
   PH – HERO obrázky (HOME + ostatní stránky)
   (dávej na úplný konec style.css)
========================================================= */

/* Základ: vytvoříme spodní vrstvu pozadí přes #page (ne přes body),
   aby se to nehádalo s body::before/after (hvězdy, animace atd.) */
#page, .site {
  position: relative;
  z-index: 0;
}

/* Spodní “fotka” přes celou stránku */
#page::before, .site::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--ph-bg-image, none);
  background-size: cover;
  background-position: var(--ph-bg-pos, center 35%);
  background-repeat: no-repeat;
  opacity: var(--ph-bg-opacity, .55);
  z-index: -3;
  pointer-events: none;
}

/* HOME – les */
body.home {
  --ph-bg-image: none;
  --ph-bg-pos: center 35%;
  --ph-bg-opacity: .65;
}

/* OSTATNÍ STRÁNKY – “band” (klidně upravíme později) */
body:not(.home) {
  --ph-bg-image: url("/wp-content/themes/pod-hvezdami/assets/img/ph_fire_band_1920x520.jpg");
  --ph-bg-pos: center top;
  --ph-bg-opacity: .35;
}
/* =========================================================
   GLOBAL PHOTO BACKGROUND (forest everywhere + fire band on home)
   - works without needing extra HTML elements
   - keeps your current layout on top
========================================================= */

body{
  position: relative; /* kvůli vrstvení pseudo-elementů */
}

/* 1) Fotka/obrázky úplně vzadu */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;

  /* default: forest background everywhere */
  background-image: none;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;

  /* jemné doladění pro “filmový” look */
  filter: saturate(0.95) contrast(1.05);
  opacity: 0.95;
}

/* 2) Na homepage přidáme i “fire band” jako druhou vrstvu */
body.home::before{
  background-image:
    url("/wp-content/themes/pod-hvezdami/assets/img/ph_hero_forest_1920x900.jpg"),
    url("/wp-content/themes/pod-hvezdami/assets/img/ph_fire_band_1920x520.jpg");
  background-size: cover, cover;
  background-position: center 35%, center bottom;
  background-repeat: no-repeat, no-repeat;
}

/* 3) Zatmavovací/gradient overlay nad fotkou (ale POD obsahem) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  /* tady je “kino” atmosféra – klidně později doladíme sílu */
  background:
    radial-gradient(1200px 700px at 18% 15%, rgba(120,70,255,.22), transparent 60%),
    radial-gradient(1000px 800px at 88% 25%, rgba(0,190,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.60));
}

/* 4) Kdyby se někde obsah “schoval” pod pozadí (pojistka) */
#page, .site, main{
  position: relative;
  z-index: 0;
}
/* ===== FORCE GLOBAL BACKGROUND IMAGE (works even if body is overridden) ===== */

html, body { height: 100%; }

html{
  position: relative;
  background: #050812; /* fallback */
}

/* obrázek úplně nejníž – pod body i pod všemi jeho pseudo-elementy */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -9999;
  pointer-events: none;

  background-image: none;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  opacity: 1;
}

/* pokud máš někde neprůhledný wrapper, tak ho zprůhledníme */
body, #page, .site, .site-content, main{
  background: transparent !important;
}
/* ===== CINEMATIC OVERLAY ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(120,90,255,0.15),
      rgba(5,10,25,0.75) 65%
    ),
    linear-gradient(
      to bottom,
      rgba(5,10,20,0.85),
      rgba(5,10,20,0.55),
      rgba(5,10,20,0.9)
    );
}

.ph-card,
.ph-box,
.horoscope-card {
  background: rgba(15,20,40,0.55);
  backdrop-filter: blur(18px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 25px 60px rgba(0,0,0,0.6);
}
body::after{
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/wp-content/themes/pod-hvezdami/assets/img/grain.png");
  background-repeat: repeat;
  opacity: 0.04; /* KLÍČOVÉ */
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9999;
}
.ph-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/wp-content/themes/pod-hvezdami/assets/img/grain.png");
  background-repeat: repeat;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}
body.home::after{
  opacity: 0.045;
}

body:not(.home)::after{
  opacity: 0.03;
}
@media (prefers-reduced-motion: reduce){
  body::after{
    display: none;
  }
}
.ph-header::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 60% at 50% 0%,
      rgba(180,200,255,0.08),
      transparent 70%);
  pointer-events:none;
}
/* ==============================
   GLOBAL BG (všechny stránky)
   ============================== */

/* 1) Fotka + mlha jako pevné pozadí celé stránky */
body{
  position: relative;
  background: none !important;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;

  /* Fotka + tmavé závoje (mlha/film) v jedné vrstvě */
  background-image:
    radial-gradient(1200px 700px at 20% 15%, rgba(120,70,255,.22), transparent 60%),
    radial-gradient(1100px 800px at 85% 25%, rgba(0,160,200,.18), transparent 60%),
    linear-gradient(180deg, rgba(7,10,18,.78) 0%, rgba(7,10,18,.62) 35%, rgba(7,10,18,.78) 100%),
    none;

  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;

  /* lehce „filmové“ */
  filter: saturate(0.95) contrast(1.05);
  opacity: .55; /* pro vnitřní stránky */
}

/* 2) Grain (šum) přes všechno */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image: url("/wp-content/themes/pod-hvezdami/assets/img/grain.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: .10;                 /* hodně jemně */
  mix-blend-mode: overlay;      /* filmový efekt */
}

/* Homepage může být výraznější */
body.home::before{ opacity: .78; }
body.home::after{  opacity: .14; }


/* ==============================
   "GLASS" BUBBLES (karty/bubliny)
   ============================== */

/* Zacílení na typické blocky (případně doplníme podle třídy) */
.ph-card,
.ph-panel,
.ph-box,
.ph-home-hero .ph-card,
.ph-home-hero .ph-panel,
.ph-home-hero .ph-box,
main .ph-card,
main .ph-panel,
main .ph-box,
.section-card,
.card,
.glass{
  background: rgba(10, 14, 26, .55) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* jemně „světelný“ okraj */
.ph-card::before,
.ph-panel::before,
.ph-box::before,
.section-card::before,
.card::before,
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%);
  opacity: .35;
}
body::after{
  /* ...to co už tam máš... */
  background-image:
    radial-gradient(1200px 800px at 50% 30%, transparent 45%, rgba(0,0,0,.55) 100%),
    none;
}
/* === PH: glass bubliny (override) === */
body.ph-cosmos-bg .horoscope-bubble{
  position: relative !important;
  border-radius: 18px !important;

  background: rgba(10, 14, 26, .42) !important;
  border: 1px solid rgba(255,255,255,.09) !important;

  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  color: rgba(235,242,255,.92) !important;
  transform: translateZ(0) !important;
}

body.ph-cosmos-bg .horoscope-bubble::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius: inherit !important;
  pointer-events:none !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(900px 200px at 20% 0%, rgba(140,90,255,.12), transparent 60%) !important;
  opacity:.55 !important;
}

body.ph-cosmos-bg .horoscope-bubble::after{
  content:"" !important;
  position:absolute !important;
  bottom:-10px !important;
  left:20px !important;

  border-width:10px 10px 0 !important;
  border-style:solid !important;
  border-color: rgba(10,14,26,.42) transparent !important;

  filter: blur(.2px) !important;
  opacity: .9 !important;
}
body.ph-cosmos-bg::after{
  background-image:
    radial-gradient(900px 700px at 18% 35%, rgba(147,85,255,.26), transparent 60%),
    radial-gradient(900px 700px at 78% 20%, rgba(0,210,255,.18), transparent 55%),
    radial-gradient(800px 600px at 65% 80%, rgba(255,120,200,.10), transparent 60%),
    url("/wp-content/themes/pod-hvezdami/assets/img/grain.png") !important;

  background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
  background-size: auto, auto, auto, 380px 380px !important;
  background-position: center, center, center, 0 0 !important;
}
/* =========================================================
   PH – OVERRIDE plugin bublin (denní/týdenní horoskop)
   Cíl: filmové "glass" jako ve vzoru + jemnější hover
========================================================= */

body.ph-cosmos-bg .horoscope-grid{
  gap: 18px !important;
  margin: 2.2rem 0 !important;
}

body.ph-cosmos-bg .horoscope-bubble{
  position: relative !important;
  border-radius: 18px !important;
  padding: 18px 18px !important;
  min-height: 180px !important;

  /* GLASS */
  background: rgba(10, 14, 26, .42) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: rgba(235,242,255,.92) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05) !important;

  transform: translateZ(0) !important;
}

/* světelný film přes bublinu = ten "wow" detail */
body.ph-cosmos-bg .horoscope-bubble::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius: inherit !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(900px 220px at 20% 0%, rgba(140,90,255,.12), transparent 60%) !important;
  opacity:.55 !important;
}

/* špička bubliny do stejné barvy jako glass */
body.ph-cosmos-bg .horoscope-bubble::after{
  border-color: rgba(10,14,26,.42) transparent !important;
  filter: blur(.2px) !important;
  opacity: .9 !important;
}

/* hover: místo 1.05 (agresivní) jen jemné nadzvednutí */
body.ph-cosmos-bg .horoscope-bubble:hover{
  transform: translateY(-2px) scale(1.01) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.ph-cosmos-bg .horoscope-bubble h3{
  margin: 0 0 10px !important;
  font-size: 1.05rem !important;
  letter-spacing: .01em;
  color: rgba(255,255,255,.95) !important;
}

body.ph-cosmos-bg .horoscope-bubble .horoscope-text{
  color: rgba(235,242,255,.86) !important;
  line-height: 1.65 !important;
}
/* aby bubliny neležely na plné tmavé desce */
body.ph-cosmos-bg .content-with-sidebar,
body.ph-cosmos-bg .site-main,
body.ph-cosmos-bg article.post,
body.ph-cosmos-bg .ph-page{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* aby bubliny neležely na plné tmavé desce */
body.ph-cosmos-bg .content-with-sidebar,
body.ph-cosmos-bg .site-main,
body.ph-cosmos-bg article.post,
body.ph-cosmos-bg .ph-page{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* =========================================================
   FRONT PAGE – mockup look (hero + glass card + fire band)
========================================================= */

.ph-home { padding: 0; }

.ph-mock-hero{
  position: relative;
  min-height: 82vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(28px, 5vw, 64px) 16px;
  overflow: hidden;
}

.ph-mock-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--ph-hero-url);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  z-index: 0;
}

.ph-mock-hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(1200px 700px at 50% 100%, rgba(0,0,0,.55), transparent 65%),
    linear-gradient(180deg, rgba(8,10,16,.25), rgba(8,10,16,.55));
  z-index: 1;
}

.ph-mock-hero__overlay{
  position:absolute; inset:0;
  background-image: var(--ph-grain-url);
  background-repeat: repeat;
  opacity: .20;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

.ph-mock-hero__content{
  position: relative;
  z-index: 3;
  max-width: 860px;
}

.ph-mock-hero__sigil{
  width: 44px; height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,14,26,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
}

.ph-mock-hero__sigil-dot{
  opacity: .95;
  transform: translateY(-1px);
}

.ph-mock-hero__title{
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: .02em;
  margin: 0;
  color: rgba(236,242,255,.96);
  text-shadow: 0 12px 40px rgba(0,0,0,.55);
}

.ph-mock-hero__subtitle{
  margin: 10px 0 26px;
  font-size: clamp(14px, 1.7vw, 18px);
  color: rgba(220,230,255,.78);
}

/* Glass card like in mockup */
.ph-mock-card{
  text-align: left;
  margin: 0 auto;
  max-width: 680px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(12, 16, 28, .55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ph-mock-card__title{
  margin: 0 0 10px;
  font-size: 18px;
  color: rgba(240,246,255,.95);
}

.ph-mock-card__text p{
  margin: 8px 0;
  color: rgba(225,235,255,.80);
  line-height: 1.55;
}

/* Fire band */
.ph-mock-fire{
  position: relative;
  min-height: 320px;
  background-image: var(--ph-fire-url);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ph-mock-fire__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 500px at 50% 0%, rgba(0,0,0,.35), transparent 65%),
    linear-gradient(180deg, rgba(8,10,16,.35), rgba(8,10,16,.65));
  pointer-events: none;
}

.ph-mock-fire__inner{
  position: relative;
  z-index: 1;
  padding: 26px 16px;
}

.ph-mock-fire__line{
  margin: 0;
  font-size: 18px;
  color: rgba(235,242,255,.80);
  text-shadow: 0 12px 40px rgba(0,0,0,.65);
}

/* Links (optional) */
.ph-mock-links{
  padding: 26px 16px 40px;
}

.ph-mock-links__grid{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ph-mock-link{
  display: block;
  padding: 14px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(236,242,255,.92);
  background: rgba(15, 20, 40, .55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 60px rgba(0,0,0,.40);
}

.ph-mock-link:hover{
  transform: translateY(-2px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 22px 80px rgba(0,0,0,.50);
}

@media (max-width: 900px){
  .ph-mock-links__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .ph-mock-links__grid{ grid-template-columns: 1fr; }
  .ph-mock-card{ padding: 16px 16px; }
}
/* Home: hero obrázek jen v hero sekci, ne jako pozadí celé stránky */
body.home.ph-cosmic,
body.home.ph-cosmos-bg{
  background-image: none !important;
}

/* samotná home stránka a sekce – pozadí transparentní, jede jen “kosmos” z ::before/::after */
.ph-home{
  background: transparent !important;
}

/* Hero sekce – používá proměnnou z front-page.php */
.ph-home-hero{
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 55%, rgba(0,0,0,.55)),
              var(--ph-hero) center/cover no-repeat;
}

/* Oheň – také jen v sekci */
.ph-home-fire{
  background: var(--ph-fire) center/cover no-repeat;
}
/* =========================================================
   STOP: les jako globální pozadí webu
   (nechceme ho na body/#page/site – jen v hero sekci)
========================================================= */

/* 1) Zruš jakýkoli globální background obrázek */
html, body,
#page, .site, .site-content,
.main-content, .content-with-sidebar,
.ph-page, .ph-cosmic, .ph-cosmos-bg {
  background-image: none !important;
  background-attachment: scroll !important;
}

/* 2) Ujisti se, že základ webu je jen “kosmos” (tvoje gradienty) */
body.ph-cosmos-bg{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(120,70,255,.18), transparent 60%),
    radial-gradient(1000px 800px at 90% 30%, rgba(0,200,255,.12), transparent 55%),
    linear-gradient(180deg, #0a1022, #070a12) !important;
}

/* 3) Hero: tady je les správně (jen pro home hero) */
body.home .ph-home-hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 55%, rgba(0,0,0,.55)),
    var(--ph-hero) center/cover no-repeat !important;
}

/* 4) Oheň: jen v jeho sekci */
body.home .ph-home-fire{
  background: var(--ph-fire) center/cover no-repeat !important;
}
/* default: ph-stars vypnuto */
#ph-stars {
  display: none;
}

/* povoleno jen na homepage */
body.home #ph-stars {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}
#ph-stars {
  display: none !important;
}
body.home{
  background-image:none !important;
}
body.home .main-content{
  background-image:none !important;
}
/* HOME: vypni les jako "celoplošné" pozadí (zůstane jen hero sekce) */
body.home::before,
body.home.ph-cosmos-bg::before{
  background-image: none !important;
}
.home .ph-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(5,7,14,.85)
  );
  pointer-events: none;
}
.ph-hero::before,
.ph-bubble::before {
  content:"";
  position:absolute;
  inset:0;
  background: url("/wp-content/themes/pod-hvezdami/assets/img/grain.png");
  opacity:.06;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.ph-hero h1 {
  text-shadow:
    0 10px 40px rgba(0,0,0,.6),
    0 0 30px rgba(120,70,255,.25);
}
/* === Kompatibilita: moderní formulář (select + button) === */
.ph-compat-form{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
  margin: .9rem 0 1.25rem;
}

/* Selecty */
.ph-compat-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(235,242,255,.92);
  padding: .55rem 2.1rem .55rem .75rem; /* místo pro šipku */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.1;
  outline: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.ph-compat-select:hover{
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}

.ph-compat-select:focus{
  border-color: rgba(120,70,255,.55);
  box-shadow: 0 0 0 3px rgba(120,70,255,.25), 0 12px 40px rgba(0,0,0,.25);
}

/* Šipka v selectu (čistě CSS, žádný obrázek) */
.ph-compat-select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(235,242,255,.75) 50%),
    linear-gradient(135deg, rgba(235,242,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* „❤“ mezi selecty bez úprav HTML */
.ph-compat-form .ph-compat-select:first-of-type{
  position: relative;
}
.ph-compat-form .ph-compat-select:first-of-type::after{
  content:"❤";
  color: rgba(235,242,255,.55);
  margin-left: .65rem;
}

/* Tlačítko */
.ph-compat-btn{
  border: 0;
  cursor: pointer;
  border-radius: 16px;
  padding: .6rem 1rem;
  font-weight: 800;
  letter-spacing: .2px;

  color: #061020;
  background: linear-gradient(135deg, rgba(123,92,255,1), rgba(61,220,255,1));
  box-shadow:
    0 14px 40px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.08) inset;

  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.ph-compat-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow:
    0 18px 55px rgba(0,0,0,.32),
    0 0 18px rgba(61,220,255,.18);
}

.ph-compat-btn:active{
  transform: translateY(0px);
  filter: brightness(0.98);
}

/* Mobil: ať se to hezky srovná */
@media (max-width: 520px){
  .ph-compat-form{
    gap:.5rem;
  }
  .ph-compat-select, .ph-compat-btn{
    width: 100%;
  }
  .ph-compat-select{
    padding-right: 2.2rem;
  }
}
/* === Fix čitelnosti option položek (dropdown) === */
.ph-compat-select{
  color-scheme: dark; /* prohlížeči naznačí "dark UI" */
}

/* Položky v rozbaleném seznamu (většinou funguje v Chrome/Edge/Firefox) */
.ph-compat-select option{
  background: #0b1020 !important;
  color: rgba(235,242,255,.95) !important;
}

/* Vybraná/hoverovaná položka */
.ph-compat-select option:checked{
  background: #21305a !important;
  color: #fff !important;
}
/* === WOW kapsle pro kompatibilitu === */
.ph-compat-form{
  display:flex;
  align-items:stretch;
  gap:0;                 /* kapsle = bez mezer */
  flex-wrap:wrap;
  margin: .9rem 0 1.25rem;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: .35rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  width: fit-content;
}

/* Selecty uvnitř kapsle */
.ph-compat-form .ph-compat-select{
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 14px;
  padding: .62rem 2.2rem .62rem .85rem;
  font-weight: 800;
  min-width: 140px;
}

/* Oddělovače mezi prvky */
.ph-compat-form .ph-compat-select + .ph-compat-select{
  border-left: 1px solid rgba(255,255,255,.14);
}

/* Srdce mezi selecty jako "chip" */
.ph-compat-form .ph-compat-select:first-of-type{
  position: relative;
}
.ph-compat-form .ph-compat-select:first-of-type::after{
  content:"❤";
  position:absolute;
  right:-.9rem;
  top:50%;
  transform: translateY(-50%);
  width: 1.55rem;
  height: 1.55rem;
  display:grid;
  place-items:center;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: rgba(235,242,255,.8);
  pointer-events:none;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* Tlačítko v kapsli */
.ph-compat-form .ph-compat-btn{
  margin-left: .35rem;
  border-radius: 14px;
  padding: .62rem 1.05rem;
  font-weight: 900;
  white-space: nowrap;
}

/* Hover/focus jemně zvýraznit celý blok */
.ph-compat-form:focus-within{
  border-color: rgba(120,70,255,.40);
  box-shadow:
    0 0 0 3px rgba(120,70,255,.18),
    0 18px 55px rgba(0,0,0,.32);
}

/* Mobil: kapsle na 2 řádky, tlačítko pod */
@media (max-width: 520px){
  .ph-compat-form{
    width: 100%;
  }
  .ph-compat-form .ph-compat-select{
    flex: 1 1 50%;
    min-width: 0;
  }
  .ph-compat-form .ph-compat-btn{
    width: 100%;
    margin: .35rem 0 0 0;
  }
  .ph-compat-form .ph-compat-select + .ph-compat-select{
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .ph-compat-form .ph-compat-select:first-of-type::after{
    display:none; /* na mobilu radši bez srdce uprostřed */
  }
}
/* =========================================================
   PH – Kompatibilita znamení: schovej horní NADPIS v obsahu na mobilu
   (cíleno na více možných body class + jen první prvek v entry-content)
   ========================================================= */
@media (max-width: 768px){

  /* pro jistotu více variant body class (WP umí různé) */
  body.page-id-798,
  body.postid-798,
  body.page-kompatibilita-znameni{

    /* 1) klasika: header/title */
    .entry-header,
    header.entry-header,
    .entry-title,
    h1.entry-title,
    .wp-block-post-title{
      display: none !important;
    }

    /* 2) KDYŽ je to „nadpis v obsahu“ jako první blok (často h2 / wp-block-heading) */
    .entry-content > :is(h1, h2, .wp-block-heading, .wp-block-post-title):first-child{
      display: none !important;
    }

    /* 3) KDYŽ je to ještě zabalené do wrapperu a nadpis je uvnitř */
    .entry-content > :first-child :is(h1, h2, .wp-block-heading, .wp-block-post-title):first-child{
      display: none !important;
    }
  }

  /* kdyby po skrytí zůstala mezera nahoře */
  body.page-id-798 .entry-content,
  body.postid-798 .entry-content,
  body.page-kompatibilita-znameni .entry-content{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* =========================================================
   MENU – VRAŤ BUBLINY (pills) na každou položku
   Vložit ÚPLNĚ NA KONEC style.css
   ========================================================= */

/* zrušíme underline pseudo-element z "bez fazolí" varianty */
.ph-topnav__menu a::after{
  display: none !important;
}

/* položky jako jemné bubliny */
.ph-topnav__menu a{
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(10, 14, 28, .34) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
  color: rgba(255,255,255,.78) !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease !important;
}

.ph-topnav__menu a:hover{
  transform: translateY(-1px) !important;
  background: rgba(10, 14, 28, .48) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}

/* aktivní stránka */
.ph-topnav__menu .current-menu-item > a,
.ph-topnav__menu a[aria-current="page"]{
  background: rgba(122,92,255,.20) !important;
  border-color: rgba(122,92,255,.30) !important;
  color: rgba(255,255,255,.95) !important;
}

/* UL kapsle (lišta) může zůstat, ale ať nepůsobí těžce */
.ph-topnav__menu{
  background: rgba(16, 22, 38, .26) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

/* mobil: ať se to hezky vejde */
@media (max-width: 740px){
  .ph-topnav__menu{
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }
  .ph-topnav__menu a{
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
}
/* ===== Floating "↑ Menu" (mobil) ===== */
.ph-floatbar{
  position: fixed;
  right: 14px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.ph-floatbar.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ph-floatbtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 999px;
  background: rgba(10,14,28,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  font-weight: 700;
  font-size: 13px;
}
.ph-floatbtn:active{ transform: translateY(1px); }

@media (min-width: 981px){
  .ph-floatbar{ display:none; }
}
/* ===== Sticky bar pro výběr znamení (mobil) ===== */
@media (max-width: 980px){
  .ph-signbar{
    position: sticky;
    top: 92px;         /* když překrývá, sniž/zvyš o pár px */
    z-index: 40;
    padding-top: 10px;
    margin-top: 6px;
  }
  .ph-signbar > *{
    scroll-margin-top: 120px; /* ať kotvy neskáčou pod header */
  }
}
/* ===== Floating ↑ Menu (mobil + desktop) ===== */
.ph-floatbar{
  position: fixed;
  right: 14px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.ph-floatbar.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ph-floatbtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 999px;
  background: rgba(10,14,28,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.ph-floatbtn:hover{
  background: rgba(10,14,28,.75);
}

.ph-floatbtn:active{
  transform: translateY(1px);
}
.ph-floatbtn{
  border-color: rgba(122,92,255,.18);
}
.ph-floatbtn:hover{
  border-color: rgba(122,92,255,.32);
}
.ph-floatbtn{
  box-shadow:
    0 12px 28px rgba(0,0,0,.25),
    0 0 0 1px rgba(122,92,255,.08) inset;
}
@media (max-width: 420px) {
  .ph-sign-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ph-sign-button {
    min-height: 44px;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px 6px;
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .ph-sign-button {
    font-size: 13px;
  }
}
/* MOBILE: CZ/DE přepínač nesmí překrývat login/odhlášení */
@media (max-width: 520px){
  .ph-lang-switch{
    top: 56px !important;      /* posuň níž – uprav o pár px dle potřeby */
    right: 14px !important;
    z-index: 30;               /* ať zůstane nad hero, ale ne nad loginem */
  }

  /* prostor pro horní řádek (welcome + login/odhlášení) */
  .ph-topbar{
    padding-top: 10px;
  }
}
/* MOBILE: jazykový přepínač CZ/DE nesmí překrývat login/odhlášení */
@media (max-width: 520px){

  /* pokryjeme víc možných selektorů (podle toho, jak to máš v theme) */
  .ph-lang-switch,
  .ph-lang,
  .lang-switch,
  .language-switcher,
  .ph-language,
  #ph-lang-switch,
  #lang-switch{
    top: 56px !important;
    right: 14px !important;
    z-index: 30 !important;
  }

  /* kdyby to bylo uvnitř headeru jako poslední prvek vpravo */
  header .ph-lang-switch,
  header .ph-lang,
  header .lang-switch,
  header .language-switcher,
  header .ph-language{
    top: 56px !important;
    right: 14px !important;
  }
}
/* === FIX: MOBILE jazykový přepínač CZ/DE nepřekrývá login/odhlášení === */
@media (max-width: 520px){

  /* udělej z něj pevný prvek vpravo nahoře, ale o řádek níž */
  .ph-lang-switch{
    position: fixed !important;
    top: 52px !important;      /* když překrývá, zvedni na 58–64 */
    right: 12px !important;
    z-index: 9999 !important;

    /* jistota proti starým hodnotám */
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* aby se vešel horní řádek s "Vítej/odhlásit" */
  body{
    padding-top: 0 !important;
  }

  /* pokud máš v headeru horní řádek (welcome/login), přidej mu prostor */
  header,
  .site-header,
  .ph-header,
  .ph-topbar{
    padding-top: 44px !important;
  }
}
/* ===========================
   Mobilní hamburger + overlay menu
   =========================== */

.ph-mnav__btn{
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(16,22,38,.40);
  color: rgba(255,255,255,.92);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Zamknutí scrollu při otevřeném menu */
html.ph-no-scroll,
body.ph-no-scroll{
  overflow: hidden !important;
  touch-action: none;
}

/* Overlay wrapper */
.ph-mnav{
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
}
.ph-mnav.is-open{ display: block; }

.ph-mnav__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Panel */
.ph-mnav__panel{
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  max-width: 560px;
  margin: 0 auto;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(16,22,38,.92);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  padding: 14px;

  transform: translateY(-8px);
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
  outline: none;
}
.ph-mnav.is-open .ph-mnav__panel{
  transform: translateY(0);
  opacity: 1;
}

.ph-mnav__close{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Menu seznam */
.ph-mnav__menu{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ph-mnav__menu a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 650;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.ph-mnav__menu a:hover{
  background: rgba(255,255,255,.08);
}

/* Mobil: schovej “velké” menu a ukaž kostičku */
@media (max-width: 900px){
  .ph-topnav{ display: none !important; }

  .ph-header__brand{
    position: relative !important;
  }
  .ph-mnav__btn{
    display: inline-flex !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (max-width: 900px){
  /* hamburger: posun doleva, ať nekoliduje s CZ/DE */
  .ph-mnav__btn{
    right: 78px !important; /* uprav 70–92 podle pocitu */
    z-index: 6001;
  }
}
@media (max-width: 900px){
  /* hamburger: posuň doleva, ať nekoliduje s CZ/DE */
  .ph-mnav__btn{
    right: 92px !important; /* když bude pořád blízko, dej 104px */
    z-index: 6001;
  }
}
@media (max-width: 900px){
  .ph-mnav__btn{
    top: calc(50% + 14px) !important; /* posun níž */
  }
}
@media (max-width: 900px){
  #phMobileMenuBtn{
    position: absolute !important;
    right: 92px !important; /* zkus 92–120 podle místa */
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 6001 !important;
  }
}
/* ===== HERO STRENGTH BOOST ===== */

.ph-mock-hero__content {
    max-width: 1100px !important;
    padding: 0 40px !important;
}

.ph-mock-hero__title {
    font-size: clamp(42px, 6vw, 72px) !important;
    letter-spacing: 1px;
}

.ph-mock-hero__subtitle {
    font-size: clamp(18px, 2vw, 22px) !important;
    opacity: 0.9;
}

.ph-mock-card {
    max-width: 720px;
    margin: 40px auto 0 auto;
}

@media (min-width: 1400px) {
    .ph-mock-hero__content {
        max-width: 1300px !important;
    }
}
/* ===== HOMEPAGE MAGAZÍN ===== */

.ph-home-magazine{
  padding: 70px 20px 90px;
  text-align: center;
}

.ph-home-magazine__inner{
  max-width: 900px;
  margin: 0 auto;
}

.ph-home-magazine__title{
  font-size: 26px;
  margin-bottom: 12px;
}

.ph-home-magazine__intro{
  opacity: 0.75;
  margin-bottom: 40px;
}

.ph-home-magazine__grid{
  display: grid;
  gap: 18px;
  margin-bottom: 30px;
}

.ph-home-magazine__item{
  display: block;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  font-weight: 500;
  color: #6fe3ff; /* jemná akcentová barva */
  transition: all 0.25s ease;
  cursor: pointer;
}

.ph-home-magazine__item:hover{
  background: rgba(255,255,255,0.08);
  transform: translateY(-3px);
  color: #9ff0ff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}
.ph-home-magazine__item::after{
  content: " →";
  opacity: 0.6;
}
.ph-home-magazine__more a{
  opacity: 0.7;
  text-decoration: none;
}

.ph-home-magazine__more a:hover{
  opacity: 1;
}
.ph-scroll-hint {
    text-align: center;
    font-size: 14px;
    opacity: 0.6;
    margin-top: 10px;
}
/* =========================================================
   PH – Osobní astrologický rozbor / objednávková stránka
========================================================= */

.ph-order-page{
  width: min(1080px, calc(100% - 32px));
  margin: 36px auto 24px;
}

.ph-order-hero{
  text-align: center;
  padding: clamp(28px, 5vw, 52px) clamp(18px, 4vw, 46px) !important;
  margin-bottom: 24px;
}

.ph-order-kicker{
  margin: 0 0 10px;
  color: rgba(98,240,232,.88);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
}

.ph-order-hero h1{
  max-width: 820px;
  margin: 0 auto 18px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.08;
  color: rgba(245,248,255,.96);
  text-shadow: 0 16px 44px rgba(0,0,0,.45);
}

.ph-order-hero p{
  max-width: 760px;
  margin: 10px auto 0;
  color: rgba(235,242,255,.82);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.7;
}

.ph-order-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.ph-order-box{
  padding: 24px !important;
}

.ph-order-box h2,
.ph-order-price h2,
.ph-order-before-form h2{
  margin-top: 0;
  color: rgba(245,248,255,.94);
}

.ph-order-box ul,
.ph-order-box ol{
  margin: 12px 0 0;
  padding-left: 1.25rem;
}

.ph-order-box li{
  margin: 8px 0;
  color: rgba(235,242,255,.82);
  line-height: 1.55;
}

.ph-order-price{
  padding: 26px !important;
  margin: 24px 0;
  text-align: center;
}

.ph-order-price__value{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 16px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(122,92,255,.20);
  border: 1px solid rgba(122,92,255,.32);
  color: rgba(255,255,255,.96);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 850;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.ph-order-price p,
.ph-order-before-form p{
  max-width: 760px;
  margin: 10px auto 0;
  color: rgba(235,242,255,.82);
  line-height: 1.7;
}

.ph-order-note{
  font-size: 14px;
  opacity: .82;
}

.ph-order-before-form{
  padding: 24px !important;
  margin: 24px 0 18px;
  text-align: center;
}

/* Formulář objednávky */
.ph-astro-order-form{
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 48px !important;
  padding: 26px !important;
}

.ph-astro-order-form h3{
  margin-top: 0;
  font-size: clamp(22px, 3vw, 30px);
  color: rgba(245,248,255,.96);
}

.ph-astro-order-form p{
  color: rgba(235,242,255,.84);
}

.ph-astro-order-form label{
  color: rgba(245,248,255,.90);
}

.ph-astro-order-form input[type="text"],
.ph-astro-order-form input[type="email"],
.ph-astro-order-form input[type="date"],
.ph-astro-order-form input[type="time"],
.ph-astro-order-form select,
.ph-astro-order-form textarea{
  margin-top: 6px;
  background: rgba(8, 12, 24, .62) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(245,248,255,.94) !important;
  border-radius: 14px !important;
  padding: 11px 13px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.ph-astro-order-form input:focus,
.ph-astro-order-form select:focus,
.ph-astro-order-form textarea:focus{
  border-color: rgba(98,240,232,.55) !important;
  box-shadow:
    0 0 0 3px rgba(98,240,232,.14),
    0 12px 34px rgba(0,0,0,.25) !important;
  outline: none !important;
}

.ph-astro-order-form button[type="submit"]{
  margin-top: 8px;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, rgba(122,92,255,1), rgba(61,220,255,1)) !important;
  border: 0 !important;
  color: #061020 !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
}

.ph-astro-order-form button[type="submit"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.ph-astro-order-success,
.ph-astro-order-errors{
  width: min(900px, calc(100% - 32px));
  margin: 24px auto !important;
}

@media (max-width: 820px){
  .ph-order-grid{
    grid-template-columns: 1fr;
  }

  .ph-order-page{
    margin-top: 24px;
  }

  .ph-astro-order-form{
    padding: 20px !important;
  }
}






/* =========================================================
   PH Anti-WP Polish Pack v1.0
   Cíl: potlačit výchozí WordPress dojem bez zásahu do pluginů
   Bezpečné: vizuální úpravy + vlastní obsahová karta
========================================================= */

/* Celkový layout: víc produktový web, méně blogová šablona */
body:not(.home) .main-content{
  width: min(1180px, calc(100% - 28px)) !important;
  max-width: 1180px !important;
  margin: clamp(18px, 3vw, 34px) auto 0 !important;
  padding: 0 !important;
}

.ph-content-shell,
.content-with-sidebar{
  width: 100% !important;
  display: block !important;
  gap: 0 !important;
}

.ph-main-content,
.site-main{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Skrytí typických WP/blog meta prvků */
.entry-meta,
.post-meta,
.cat-links,
.tags-links,
.comments-link,
.nav-links,
.post-navigation,
.comment-navigation,
.comments-area,
.edit-link,
.byline,
.author,
.updated:not(.published),
.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-terms,
.wp-block-comments,
.wp-block-comment-template,
.wp-block-query-pagination,
#comments,
.comment-respond{
  display: none !important;
}

/* Vlastní karta obsahu místo defaultní WP post karty */
.ph-content-card,
body:not(.home) .site-main article,
body:not(.home) .site-main .page,
body:not(.home) .site-main .post,
body:not(.home) .entry-content > .wp-block-group:not(.alignfull),
body:not(.home) .entry-content > .wp-block-columns:not(.alignfull){
  position: relative !important;
  background: rgba(14, 18, 34, .42) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.ph-content-card,
body:not(.home) .site-main article{
  padding: clamp(20px, 3vw, 38px) !important;
  margin: 0 auto 28px !important;
  overflow: hidden;
}

.ph-content-card::before,
body:not(.home) .site-main article::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%),
    radial-gradient(700px 180px at 18% 0%, rgba(122,92,255,.14), transparent 62%),
    radial-gradient(520px 160px at 84% 4%, rgba(98,240,232,.08), transparent 60%);
  opacity: .72;
}

.ph-content-card > *,
body:not(.home) .site-main article > *{
  position: relative;
  z-index: 1;
}

/* Nadpisy: vlastní brand, ne WP theme */
.entry-title,
.page-title,
.ph-content-title,
body:not(.home) .site-main h1{
  color: rgba(246,248,255,.96) !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

.ph-content-title{
  margin: 0 0 20px !important;
  font-size: clamp(30px, 4.3vw, 54px) !important;
}

body:not(.home) .site-main h2,
body:not(.home) .site-main h3{
  color: rgba(235,242,255,.94) !important;
  letter-spacing: -0.018em !important;
}

/* Text: klidnější, redakční, méně defaultní WP */
.entry-content,
.ph-content-body{
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.76;
  color: rgba(235,242,255,.88);
}

.entry-content p,
.ph-content-body p{
  margin: 0 0 1.05em;
}

.entry-content ul,
.entry-content ol{
  padding-left: 1.25rem;
}

.entry-content li{
  margin: .42em 0;
}

/* Odkazy jako značka, ne defaultní WP link */
.entry-content a:not(.button):not(.ph-btn):not(.wp-block-button__link),
.ph-content-body a:not(.button):not(.ph-btn):not(.wp-block-button__link){
  color: #8eefff !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(142,239,255,.32);
  transition: border-color .15s ease, color .15s ease;
}

.entry-content a:not(.button):not(.ph-btn):not(.wp-block-button__link):hover,
.ph-content-body a:not(.button):not(.ph-btn):not(.wp-block-button__link):hover{
  color: #b8f7ff !important;
  border-bottom-color: rgba(142,239,255,.78);
}

/* CTA/tlačítka jako produktové prvky */
.entry-content a.wp-block-button__link,
.entry-content .button,
.entry-content a.button,
.entry-content input[type="submit"],
.entry-content button,
.ph-content-body a.wp-block-button__link,
.ph-content-body .button,
.ph-content-body a.button,
.ph-content-body input[type="submit"],
.ph-content-body button{
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(122,92,255,.96), rgba(35,213,232,.76)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.30) !important;
  font-weight: 780 !important;
  text-decoration: none !important;
}

/* Obrázky, citace, tabulky: odstranění defaultního WP dojmu */
.entry-content img,
.wp-block-image img{
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
}

.wp-block-quote,
.entry-content blockquote{
  border-left: 2px solid rgba(142,239,255,.55) !important;
  background: rgba(255,255,255,.045);
  border-radius: 16px;
  padding: 18px 20px;
  margin-left: 0;
  margin-right: 0;
}

.entry-content table,
.wp-block-table table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.entry-content th,
.entry-content td,
.wp-block-table th,
.wp-block-table td{
  border: 1px solid rgba(255,255,255,.08) !important;
  padding: 10px 12px;
}

/* Výpisy článků jako magazín, ne blog */
body.blog .site-main,
body.archive .site-main,
body.search .site-main{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

body.blog .site-main article,
body.archive .site-main article,
body.search .site-main article{
  margin: 0 !important;
}

body.blog .ph-content-title,
body.archive .ph-content-title,
body.search .ph-content-title{
  font-size: clamp(22px, 2.2vw, 30px) !important;
}

@media (max-width: 800px){
  body.blog .site-main,
  body.archive .site-main,
  body.search .site-main{
    grid-template-columns: 1fr;
  }
}

/* Header polish: brand jako značka, ne textový WP název */
.ph-brand__link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.ph-brand__mark{
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98,240,232,.22), rgba(122,92,255,.16) 58%, rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 18px;
  box-shadow: 0 0 30px rgba(98,240,232,.16);
}

.ph-brand__name{
  display: inline-block;
}

.ph-header::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: min(720px, 80vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(98,240,232,.32), rgba(122,92,255,.25), transparent);
  pointer-events: none;
}

/* Footer: vlastní značka místo prázdné WP patičky */
.ph-site-footer{
  margin-top: 60px;
  padding: 34px 18px calc(34px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 8, 18, .62) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(235,242,255,.72) !important;
}

.ph-site-footer__inner{
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  display: grid;
  gap: 10px;
  text-align: center;
}

.ph-site-footer__brand{
  font-size: 22px;
  font-weight: 850;
  color: rgba(246,248,255,.95);
}

.ph-site-footer__text{
  color: rgba(235,242,255,.68);
}

.ph-site-footer__nav{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 14px;
}

.ph-site-footer a,
.ph-site-footer__nav a{
  color: rgba(142,239,255,.88) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(142,239,255,.22);
}

.ph-site-footer a:hover,
.ph-site-footer__nav a:hover{
  border-bottom-color: rgba(142,239,255,.72);
}

@media (max-width: 640px){
  .ph-brand__mark{
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .ph-content-card,
  body:not(.home) .site-main article{
    border-radius: 20px !important;
  }

  .ph-site-footer__nav{
    gap: 10px 12px;
  }
}

/* =========================================================
   PH App Shell v1.4
   Cíl: potlačit WordPress dojem přes produktový header,
   app-like navigaci a kartový výpis horoskopů.
========================================================= */

body.ph-app-shell{
  --ph-shell-max: 1320px;
  --ph-shell-pad: clamp(12px, 2vw, 22px);
  --ph-shell-bg: rgba(7, 10, 20, .58);
  --ph-shell-line: rgba(255,255,255,.10);
  --ph-shell-glow: rgba(98,240,232,.16);
}

body.ph-app-shell .ph-lang-switch{
  display: none !important;
}

header.ph-app-header{
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 3000 !important;
  width: 100% !important;
  padding: max(10px, env(safe-area-inset-top, 0px)) 14px 10px !important;
  background: linear-gradient(180deg, rgba(5,8,18,.86), rgba(5,8,18,.56)) !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

header.ph-app-header::before,
header.ph-app-header::after{
  content: none !important;
}

.ph-appbar{
  width: min(var(--ph-shell-max), calc(100% - 8px));
  min-height: 58px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 310px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 24px;
  background:
    radial-gradient(580px 180px at 12% 0%, rgba(122,92,255,.18), transparent 60%),
    radial-gradient(500px 160px at 86% 0%, rgba(98,240,232,.10), transparent 62%),
    rgba(8, 12, 24, .48);
  box-shadow:
    0 16px 42px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.ph-app-brand,
.ph-app-brand:hover{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(247,249,255,.96) !important;
  text-decoration: none !important;
  min-width: 0;
}

.ph-app-brand__mark{
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 45% 38%, rgba(255,255,255,.30), transparent 18%),
    radial-gradient(circle, rgba(98,240,232,.24), rgba(122,92,255,.18) 62%, rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 0 32px rgba(98,240,232,.13);
  font-size: 18px;
  line-height: 1;
}

.ph-app-brand__text{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ph-app-brand__name{
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.05;
  font-weight: 880;
  letter-spacing: -.035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-app-brand__tagline{
  font-size: 11px;
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(235,242,255,.54);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-appnav,
.ph-topnav.ph-appnav{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: static !important;
}

.ph-appnav__menu,
.ph-topnav__menu.ph-appnav__menu{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 4px !important;
  list-style: none !important;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

.ph-appnav__menu::-webkit-scrollbar{ display: none; }
.ph-appnav__menu > li{ flex: 0 0 auto; margin: 0 !important; padding: 0 !important; }

.ph-appnav__menu a,
.ph-topnav__menu.ph-appnav__menu a{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px;
  padding: 8px 11px !important;
  border-radius: 14px !important;
  color: rgba(235,242,255,.72) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
}

.ph-appnav__menu a::after,
.ph-topnav__menu.ph-appnav__menu a::after{
  content: none !important;
}

.ph-appnav__menu a:hover,
.ph-appnav__menu .current-menu-item > a,
.ph-appnav__menu a[aria-current="page"]{
  color: rgba(255,255,255,.96) !important;
  background: rgba(255,255,255,.075) !important;
  text-decoration: none !important;
}

.ph-appbar__actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.ph-app-lang{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}

.ph-app-lang__link,
.ph-app-lang__link:hover{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  border-radius: 999px;
  color: rgba(235,242,255,.68) !important;
  font-size: 12px;
  font-weight: 840;
  text-decoration: none !important;
  border: 0 !important;
}

.ph-app-lang__link.is-active{
  color: #061018 !important;
  background: linear-gradient(135deg, rgba(142,239,255,.96), rgba(199,167,95,.82));
}

.ph-app-auth,
.ph-auth.ph-app-auth{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ph-app-auth .ph-auth__link{
  min-height: 34px;
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  color: rgba(235,242,255,.76) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
}

.ph-app-auth .ph-auth__link:hover{
  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.07) !important;
}

.ph-app-auth .ph-auth__link--primary,
.ph-app-auth .ph-auth__link--account{
  color: rgba(255,255,255,.94) !important;
  background: rgba(122,92,255,.18) !important;
  border-color: rgba(122,92,255,.28) !important;
}

.ph-app-menu-btn,
#phMobileMenuBtn.ph-app-menu-btn{
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: none !important;
  flex: 0 0 auto;
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.065) !important;
  color: rgba(255,255,255,.92) !important;
  cursor: pointer;
  box-shadow: none !important;
}

.ph-app-menu-btn span,
.ph-app-menu-btn::before,
.ph-app-menu-btn::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
}

.ph-app-menu-btn span{ top: 20px; }
.ph-app-menu-btn::before{ top: 14px; }
.ph-app-menu-btn::after{ top: 26px; }

/* Drawer */
.ph-app-drawer.ph-mnav{
  position: fixed !important;
  inset: 0 !important;
  z-index: 6000 !important;
  display: none;
}

.ph-app-drawer.ph-mnav.is-open{
  display: block !important;
}

.ph-app-drawer .ph-mnav__backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.60) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.ph-app-drawer .ph-mnav__panel{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: none !important;
  padding: 16px !important;
  overflow: auto;
  border-radius: 26px !important;
  background:
    radial-gradient(520px 180px at 15% 0%, rgba(122,92,255,.20), transparent 62%),
    rgba(8, 12, 24, .92) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.52) !important;
  transform: translateX(18px) scale(.985) !important;
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.ph-app-drawer.is-open .ph-mnav__panel{
  transform: translateX(0) scale(1) !important;
  opacity: 1;
}

.ph-mnav__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ph-app-brand--drawer .ph-app-brand__name{
  font-size: 21px;
}

.ph-app-drawer .ph-mnav__close{
  position: relative !important;
  inset: auto !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

.ph-mnav__tools{
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}

.ph-app-lang--drawer{
  justify-self: start;
}

.ph-app-auth--drawer{
  display: flex !important;
  flex-wrap: wrap;
}

.ph-app-drawer .ph-mnav__menu{
  display: grid !important;
  gap: 8px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.ph-app-drawer .ph-mnav__menu a{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  min-height: 46px;
  padding: 12px 13px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(245,248,255,.88) !important;
  font-weight: 760 !important;
  text-decoration: none !important;
}

.ph-app-drawer .ph-mnav__menu a::after{
  content: "→";
  color: rgba(142,239,255,.65);
}

.ph-app-drawer .ph-mnav__menu a:hover{
  background: rgba(255,255,255,.085) !important;
}

/* Obsah: po app shellu méně blogový rytmus */
body.ph-app-shell:not(.home) .main-content{
  width: min(1240px, calc(100% - 28px)) !important;
  margin-top: clamp(20px, 3vw, 38px) !important;
}

/* Denní/týdenní horoskopy jako nástroj, ne článek */
body.ph-horoscope-page .ph-content-card,
body.ph-horoscope-page:not(.home) .site-main article{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

body.ph-horoscope-page .ph-content-card::before,
body.ph-horoscope-page:not(.home) .site-main article::before{
  content: none !important;
}

body.ph-horoscope-page .ph-content-title,
body.ph-horoscope-page .entry-title{
  position: relative;
  z-index: 1;
  margin: 0 0 22px !important;
  padding: clamp(24px, 4vw, 44px) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(760px 260px at 14% 0%, rgba(122,92,255,.22), transparent 62%),
    radial-gradient(600px 220px at 86% 0%, rgba(98,240,232,.14), transparent 62%),
    rgba(14,18,34,.48) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  font-size: clamp(34px, 5vw, 62px) !important;
}

body.ph-horoscope-page .entry-content,
body.ph-horoscope-page .ph-content-body{
  font-size: 16px;
}

body.ph-horoscope-page .horoscope-container,
body.ph-horoscope-page .horoscope-grid,
body.ph-horoscope-page .ph-horoscope-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  align-items: stretch !important;
}

body.ph-horoscope-page .horoscope-bubble{
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 20px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(480px 160px at 20% 0%, rgba(122,92,255,.16), transparent 62%),
    rgba(12, 17, 32, .54) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.ph-horoscope-page .horoscope-bubble::after{
  content: none !important;
}

body.ph-horoscope-page .horoscope-bubble h2,
body.ph-horoscope-page .horoscope-bubble h3,
body.ph-horoscope-page .horoscope-bubble h4{
  margin: 0 0 12px !important;
  font-size: clamp(19px, 2vw, 24px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

body.ph-horoscope-page .horoscope-bubble p,
body.ph-horoscope-page .horoscope-bubble .horoscope-text{
  color: rgba(235,242,255,.84) !important;
  line-height: 1.68 !important;
}

body.ph-horoscope-page .horoscope-bubble:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 62px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Produktové / prodejní bloky: víc landing page, méně editorový text */
body.ph-app-shell .entry-content .wp-block-columns,
body.ph-app-shell .ph-content-body .wp-block-columns{
  gap: 18px !important;
}

body.ph-app-shell .entry-content .wp-block-column,
body.ph-app-shell .ph-content-body .wp-block-column{
  border-radius: 22px;
}

@media (max-width: 1180px){
  .ph-appbar{
    grid-template-columns: minmax(210px, 270px) minmax(0, 1fr) auto;
    gap: 10px;
  }

  .ph-app-auth .ph-auth__link{
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

@media (max-width: 1020px){
  .ph-appbar{
    grid-template-columns: minmax(210px, 1fr) auto;
  }

  .ph-appnav{
    display: none !important;
  }

  .ph-app-menu-btn,
  #phMobileMenuBtn.ph-app-menu-btn{
    display: inline-flex !important;
  }
}

@media (max-width: 760px){
  header.ph-app-header{
    position: static !important;
    padding: 10px 10px 8px !important;
  }

  .ph-appbar{
    width: 100%;
    min-height: 56px;
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: 20px;
    padding: 8px;
  }

  .ph-app-brand__mark{
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .ph-app-brand__name{
    font-size: 20px;
  }

  .ph-app-brand__tagline{
    display: none;
  }

  .ph-app-auth{
    display: none !important;
  }

  .ph-app-lang{
    display: none;
  }

  .ph-app-drawer .ph-app-lang,
  .ph-app-drawer .ph-app-auth{
    display: inline-flex !important;
  }

  .ph-app-menu-btn,
  #phMobileMenuBtn.ph-app-menu-btn{
    display: inline-flex !important;
  }

  body.ph-horoscope-page .horoscope-container,
  body.ph-horoscope-page .horoscope-grid,
  body.ph-horoscope-page .ph-horoscope-grid{
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 761px) and (max-width: 1080px){
  body.ph-horoscope-page .horoscope-container,
  body.ph-horoscope-page .horoscope-grid,
  body.ph-horoscope-page .ph-horoscope-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px){
  .ph-appbar{
    gap: 8px;
  }

  .ph-app-brand__name{
    font-size: 19px;
  }

  .ph-app-drawer .ph-mnav__panel{
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: calc(100vw - 16px) !important;
    border-radius: 22px !important;
  }

  body.ph-horoscope-page .ph-content-title,
  body.ph-horoscope-page .entry-title{
    border-radius: 22px !important;
    padding: 24px 20px !important;
  }
}


/* =========================================================
   PH App Shell v1.5 – Clean Menu Fix
   Cíl: odstranit přeplněné desktopové menu a udělat jeden
   stabilní drawer pro desktop i mobil.
========================================================= */

body.ph-app-shell{
  --ph-shell-max: 1180px;
}

/* V 1.5 neschováváme navigaci do horizontálního proužku.
   Plné menu je pouze v draweru. Tím mizí přeplněný WP dojem. */
body.ph-app-shell .ph-appnav,
body.ph-app-shell .ph-topnav.ph-appnav,
body.ph-app-shell #ph-primary-menu{
  display: none !important;
}

body.ph-app-shell .ph-appbar{
  grid-template-columns: minmax(220px, 1fr) auto !important;
  min-height: 58px !important;
  gap: 12px !important;
  padding: 8px 10px !important;
}

body.ph-app-shell .ph-appbar__actions{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0;
}

/* Menu tlačítko je vždy viditelné – i na desktopu. */
body.ph-app-shell .ph-app-menu-btn,
body.ph-app-shell #phMobileMenuBtn.ph-app-menu-btn{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 88px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: rgba(245,248,255,.92) !important;
  font-weight: 820 !important;
  font-size: 13px !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body.ph-app-shell .ph-app-menu-btn::before,
body.ph-app-shell .ph-app-menu-btn::after,
body.ph-app-shell #phMobileMenuBtn.ph-app-menu-btn::before,
body.ph-app-shell #phMobileMenuBtn.ph-app-menu-btn::after{
  content: none !important;
  display: none !important;
}

body.ph-app-shell .ph-app-menu-btn span,
body.ph-app-shell #phMobileMenuBtn.ph-app-menu-btn span,
body.ph-app-shell .ph-app-menu-btn__icon,
body.ph-app-shell .ph-app-menu-btn__text{
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}

body.ph-app-shell .ph-app-menu-btn__icon{
  font-size: 17px !important;
  line-height: 1 !important;
  color: rgba(142,239,255,.90) !important;
}

body.ph-app-shell .ph-app-menu-btn:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(142,239,255,.25) !important;
}

/* Drawer: přehlednější, produktovější, bez mobilního chaosu. */
body.ph-app-shell .ph-app-drawer.ph-mnav{
  position: fixed !important;
  inset: 0 !important;
  z-index: 6000 !important;
  display: none !important;
}

body.ph-app-shell .ph-app-drawer.ph-mnav.is-open{
  display: block !important;
}

body.ph-app-shell .ph-app-drawer .ph-mnav__backdrop{
  background: rgba(0,0,0,.62) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body.ph-app-shell .ph-app-drawer .ph-mnav__panel{
  top: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  left: auto !important;
  width: min(390px, calc(100vw - 20px)) !important;
  max-width: none !important;
  padding: 14px !important;
  border-radius: 24px !important;
  overflow-y: auto !important;
  background:
    radial-gradient(560px 190px at 16% 0%, rgba(122,92,255,.23), transparent 62%),
    radial-gradient(420px 170px at 90% 4%, rgba(98,240,232,.12), transparent 62%),
    rgba(7, 11, 23, .96) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.58) !important;
}

body.ph-app-shell .ph-mnav__head{
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.ph-app-shell .ph-mnav__tools{
  margin: 10px 0 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.ph-app-shell .ph-app-drawer .ph-mnav__menu,
body.ph-app-shell .ph-app-drawer .ph-mnav__menu ul{
  list-style: none !important;
}

body.ph-app-shell .ph-app-drawer .ph-mnav__menu{
  display: grid !important;
  gap: 7px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

body.ph-app-shell .ph-app-drawer .ph-mnav__menu li{
  margin: 0 !important;
  padding: 0 !important;
}

body.ph-app-shell .ph-app-drawer .ph-mnav__menu a{
  min-height: 44px !important;
  padding: 11px 12px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.052) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  color: rgba(245,248,255,.88) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  text-decoration: none !important;
}

body.ph-app-shell .ph-app-drawer .ph-mnav__menu a::after{
  content: "›" !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: rgba(142,239,255,.55) !important;
}

body.ph-app-shell .ph-app-drawer .ph-mnav__menu .sub-menu{
  display: grid !important;
  gap: 6px !important;
  margin: 7px 0 2px 14px !important;
  padding: 0 0 0 10px !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
}

body.ph-app-shell .ph-app-drawer .ph-mnav__menu .sub-menu a{
  min-height: 38px !important;
  padding: 9px 11px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,.035) !important;
}

/* V horní liště už domovskou položku nepotřebujeme; v draweru může zůstat.
   Odstraníme jen možné zdvojené/technické obtisky z horizontálního menu. */
body.ph-app-shell .ph-appnav__menu > li.menu-item-home{
  display: none !important;
}

@media (max-width: 760px){
  body.ph-app-shell header.ph-app-header{
    position: static !important;
    padding: 8px 8px 7px !important;
  }

  body.ph-app-shell .ph-appbar{
    width: 100% !important;
    min-height: 54px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 7px !important;
    border-radius: 18px !important;
  }

  body.ph-app-shell .ph-app-brand{
    gap: 8px !important;
  }

  body.ph-app-shell .ph-app-brand__mark{
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
  }

  body.ph-app-shell .ph-app-brand__name{
    font-size: 19px !important;
    max-width: calc(100vw - 146px) !important;
  }

  body.ph-app-shell .ph-app-brand__tagline{
    display: none !important;
  }

  body.ph-app-shell .ph-appbar > .ph-appbar__actions > .ph-app-lang,
  body.ph-app-shell .ph-appbar > .ph-appbar__actions > .ph-app-auth{
    display: none !important;
  }

  body.ph-app-shell .ph-app-menu-btn,
  body.ph-app-shell #phMobileMenuBtn.ph-app-menu-btn{
    min-width: 76px !important;
    height: 40px !important;
    padding: 0 12px !important;
  }

  body.ph-app-shell .ph-app-drawer .ph-mnav__panel{
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.ph-app-shell .ph-app-drawer .ph-mnav__menu{
    gap: 8px !important;
  }

  body.ph-app-shell .ph-app-drawer .ph-mnav__menu a{
    min-height: 46px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 420px){
  body.ph-app-shell .ph-app-menu-btn__text{
    display: inline-flex !important;
  }

  body.ph-app-shell .ph-app-menu-btn,
  body.ph-app-shell #phMobileMenuBtn.ph-app-menu-btn{
    min-width: 72px !important;
    padding: 0 10px !important;
  }

  body.ph-app-shell .ph-app-brand__name{
    font-size: 18px !important;
    max-width: calc(100vw - 132px) !important;
  }
}


/* =========================================================
   PH App Shell v1.6 – Mobile Overflow Fix
   Cíl: odstranit horizontální přesah na telefonech bez změny desktopu.
   Problém byl hlavně content-box šířka + padding u appbar/hero prvků.
========================================================= */

html,
body{
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.ph-app-shell,
body.ph-app-shell * ,
body.ph-app-shell *::before,
body.ph-app-shell *::after{
  box-sizing: border-box;
}

body.ph-app-shell img,
body.ph-app-shell svg,
body.ph-app-shell video,
body.ph-app-shell canvas{
  max-width: 100%;
  height: auto;
}

/* Homepage nemá být uvnitř starého WP content sloupce. */
body.home.ph-app-shell .main-content{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: clip !important;
}

body.home.ph-app-shell .site-main,
body.home.ph-app-shell .ph-home,
body.home.ph-app-shell .ph-mock-hero,
body.home.ph-app-shell .ph-mock-fire,
body.home.ph-app-shell .ph-mock-links,
body.home.ph-app-shell .ph-home-magazine{
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: clip !important;
}

body.home.ph-app-shell .ph-mock-hero__content,
body.home.ph-app-shell .ph-mock-card,
body.home.ph-app-shell .ph-mock-links__grid,
body.home.ph-app-shell .ph-home-magazine__inner{
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px){
  body.ph-app-shell header.ph-app-header{
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 8px 7px !important;
    overflow-x: clip !important;
  }

  body.ph-app-shell .ph-appbar{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 7px !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  body.ph-app-shell .ph-app-brand,
  body.ph-app-shell .ph-app-brand__text{
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.ph-app-shell .ph-app-brand__name{
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.ph-app-shell .ph-appbar__actions{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    gap: 0 !important;
  }

  body.ph-app-shell .ph-app-menu-btn,
  body.ph-app-shell #phMobileMenuBtn.ph-app-menu-btn{
    flex: 0 0 auto !important;
    min-width: 64px !important;
    max-width: 72px !important;
    height: 40px !important;
    padding: 0 9px !important;
  }

  body.home.ph-app-shell .ph-mock-hero{
    min-height: auto !important;
    padding: 34px 12px 46px !important;
  }

  body.home.ph-app-shell .ph-mock-hero__content{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 2px !important;
  }

  body.home.ph-app-shell .ph-mock-hero__title{
    font-size: clamp(38px, 14vw, 54px) !important;
    line-height: .98 !important;
    letter-spacing: .01em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body.home.ph-app-shell .ph-mock-hero__subtitle{
    font-size: 16px !important;
    line-height: 1.55 !important;
    max-width: 31ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home.ph-app-shell .ph-mock-card{
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 28px !important;
    padding: 18px 16px !important;
    border-radius: 20px !important;
  }

  body.home.ph-app-shell .ph-mock-card__text,
  body.home.ph-app-shell .ph-mock-card__text p{
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body.home.ph-app-shell .ph-mock-links__grid,
  body.home.ph-app-shell .ph-home-magazine__grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px){
  body.ph-app-shell .ph-app-brand__mark{
    width: 34px !important;
    height: 34px !important;
  }

  body.ph-app-shell .ph-app-brand__name{
    font-size: 17px !important;
  }

  body.ph-app-shell .ph-app-menu-btn,
  body.ph-app-shell #phMobileMenuBtn.ph-app-menu-btn{
    min-width: 46px !important;
    max-width: 46px !important;
    width: 46px !important;
    padding: 0 !important;
  }

  body.ph-app-shell .ph-app-menu-btn__text{
    display: none !important;
  }

  body.home.ph-app-shell .ph-mock-hero__title{
    font-size: clamp(34px, 13vw, 46px) !important;
  }
}

/* =========================================================
   HOMEPAGE V2 – jasná cesta návštěvníka
   FB → homepage → denní horoskop → návrat
========================================================= */

.ph-home-v2{
  background: transparent !important;
}

.ph-section-inner{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.ph-home-hero-v2{
  position: relative;
  min-height: 620px;
  display: grid;
  align-items: center;
  padding: clamp(72px, 8vw, 120px) 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
}

.ph-home-hero-v2::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ph-hero-url);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.04);
  z-index: 0;
}

.ph-home-hero-v2::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ph-grain-url);
  background-repeat: repeat;
  opacity: .16;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

.ph-home-hero-v2__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 22% 35%, rgba(98, 83, 190, .28), transparent 62%),
    radial-gradient(850px 520px at 82% 28%, rgba(45, 200, 210, .12), transparent 60%),
    linear-gradient(180deg, rgba(4, 7, 16, .62), rgba(4, 7, 16, .82));
  z-index: 1;
}

.ph-home-hero-v2__inner{
  position: relative;
  z-index: 3;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

.ph-home-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgba(113, 230, 244, .92);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ph-home-hero-v2__title{
  margin: 0;
  color: rgba(245, 247, 255, .98);
  font-size: clamp(42px, 7vw, 82px);
  line-height: .96;
  letter-spacing: .01em;
  text-shadow: 0 20px 70px rgba(0,0,0,.62);
}

.ph-home-hero-v2__lead{
  max-width: 720px;
  margin: 22px 0 0;
  color: rgba(231, 237, 255, .82);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;
}

.ph-home-hero-v2__actions,
.ph-section-cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 28px;
}

.ph-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 18px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1.1;
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.ph-btn:hover{
  transform: translateY(-2px);
}

.ph-btn--primary{
  color: #061019 !important;
  background: linear-gradient(135deg, #75f0ff, #c7b7ff);
  box-shadow: 0 18px 45px rgba(73, 210, 236, .22);
}

.ph-btn--secondary{
  color: rgba(241, 246, 255, .94) !important;
  background: rgba(15, 22, 40, .68);
  box-shadow: 0 16px 55px rgba(0,0,0,.32);
}

.ph-home-hero-v2__card{
  padding: 24px;
  border-radius: 26px;
  background: rgba(9, 14, 28, .62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.44);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ph-home-hero-v2__card h2{
  margin: 0 0 16px;
  color: rgba(246,248,255,.96);
  font-size: 22px;
}

.ph-home-hero-v2__card ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.ph-home-hero-v2__card a{
  display: block;
  padding: 14px 15px;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(126, 236, 247, .96);
  text-decoration: none;
  font-weight: 760;
}

.ph-home-hero-v2__card a::after{
  content: " →";
  opacity: .72;
}

.ph-daily-entry,
.ph-home-paths,
.ph-home-about{
  padding: clamp(54px, 7vw, 86px) 0;
}

.ph-section-head--center{
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}

.ph-section-head h2,
.ph-home-about h2{
  margin: 0;
  color: rgba(244, 247, 255, .96);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
}

.ph-section-head p,
.ph-home-about p{
  margin: 14px auto 0;
  color: rgba(224, 232, 255, .72);
  font-size: 17px;
  line-height: 1.65;
}

.ph-sign-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.ph-sign-card{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 74px;
  padding: 14px 12px;
  border-radius: 18px;
  background: rgba(13, 18, 33, .74);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 16px 55px rgba(0,0,0,.24);
  color: rgba(239, 244, 255, .94) !important;
  text-decoration: none !important;
  font-weight: 820;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.ph-sign-card:hover{
  transform: translateY(-3px);
  background: rgba(20, 29, 52, .86);
  border-color: rgba(116, 235, 247, .34);
}

.ph-sign-card__icon{
  color: rgba(122, 238, 249, .95);
}

.ph-section-cta{
  justify-content: center;
  text-align: center;
  margin-top: 28px;
}

.ph-section-cta p{
  width: 100%;
  margin: 2px 0 0;
  color: rgba(224,232,255,.62);
}

.ph-path-grid{
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 16px;
}

.ph-path-card{
  display: block;
  min-height: 230px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(12, 17, 32, .70);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(238,244,255,.92) !important;
  text-decoration: none !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.24);
  transition: transform .18s ease, border-color .18s ease;
}

.ph-path-card:hover{
  transform: translateY(-3px);
  border-color: rgba(116, 235, 247, .30);
}

.ph-path-card--strong{
  background:
    radial-gradient(500px 220px at 20% 0%, rgba(124, 96, 230, .24), transparent 65%),
    rgba(12, 17, 32, .78);
}

.ph-path-card span,
.ph-home-magazine__item-kicker{
  display: block;
  margin-bottom: 10px;
  color: rgba(116, 235, 247, .86);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ph-path-card h2{
  margin: 0;
  color: rgba(246,248,255,.96);
  font-size: 24px;
  line-height: 1.16;
}

.ph-path-card p{
  margin: 14px 0 0;
  color: rgba(224,232,255,.70);
  line-height: 1.62;
}

.ph-path-card strong{
  display: inline-block;
  margin-top: 18px;
  color: rgba(126,236,247,.95);
}

.ph-home-magazine-v2{
  padding-top: clamp(54px, 7vw, 86px) !important;
}

.ph-home-magazine-v2 .ph-home-magazine__inner{
  width: min(980px, calc(100% - 32px));
  max-width: 980px !important;
}

.ph-home-magazine-v2 .ph-home-magazine__grid{
  gap: 14px;
}

.ph-home-magazine-v2 .ph-home-magazine__item{
  text-align: left;
  padding: 20px 22px;
  border-radius: 20px;
}

.ph-home-magazine-v2 .ph-home-magazine__item::after{
  content: "";
}

.ph-home-magazine-v2 .ph-home-magazine__item strong::after{
  content: " →";
  opacity: .64;
}

.ph-home-about__box{
  max-width: 900px;
  padding: 34px;
  border-radius: 28px;
  background: rgba(12, 17, 32, .62);
  border: 1px solid rgba(255,255,255,.09);
  text-align: center;
  box-shadow: 0 20px 70px rgba(0,0,0,.24);
}

.ph-home-about__box a{
  display: inline-block;
  margin-top: 22px;
  color: rgba(126,236,247,.96);
  text-decoration: none;
  font-weight: 820;
}

@media (max-width: 980px){
  .ph-home-hero-v2__inner,
  .ph-path-grid{
    grid-template-columns: 1fr;
  }

  .ph-sign-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .ph-home-hero-v2{
    min-height: auto;
    padding: 48px 0 42px;
  }

  .ph-home-hero-v2__inner,
  .ph-section-inner,
  .ph-home-magazine-v2 .ph-home-magazine__inner{
    width: min(100% - 24px, 1120px);
  }

  .ph-home-hero-v2__lead,
  .ph-section-head p,
  .ph-home-about p{
    font-size: 15.5px;
  }

  .ph-home-hero-v2__actions,
  .ph-section-cta{
    align-items: stretch;
  }

  .ph-btn{
    width: 100%;
  }

  .ph-sign-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ph-sign-card{
    min-height: 62px;
    border-radius: 16px;
  }

  .ph-home-hero-v2__card,
  .ph-path-card,
  .ph-home-about__box{
    padding: 20px;
    border-radius: 22px;
  }
}

/* PH fix: kotvy denního horoskopu a plovoucí návrat k menu */
html {
  scroll-behavior: smooth;
}

.ph-daily-anchor-target,
[id="beran"], [id="byk"], [id="blizenci"], [id="rak"], [id="lev"], [id="panna"],
[id="vahy"], [id="stir"], [id="strelec"], [id="kozoroh"], [id="vodnar"], [id="ryby"],
[id="widder"], [id="stier"], [id="zwillinge"], [id="krebs"], [id="loewe"], [id="jungfrau"],
[id="waage"], [id="skorpion"], [id="schuetze"], [id="steinbock"], [id="wassermann"], [id="fische"] {
  scroll-margin-top: 110px;
}

.ph-floatbar {
  position: fixed !important;
  right: 16px !important;
  bottom: 18px !important;
  z-index: 99999 !important;
  display: flex !important;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.ph-floatbar.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.ph-floatbtn {
  cursor: pointer;
  min-height: 42px;
}

@media (max-width: 640px) {
  .ph-floatbar {
    right: 12px !important;
    bottom: 14px !important;
  }
}

/* PH FIX 2026-05-20: viditelné plovoucí tlačítko návratu k menu */
.ph-floatbar {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.ph-floatbar.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.ph-floatbtn {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(126,236,247,.45) !important;
  background: rgba(12,18,34,.92) !important;
  color: rgba(235,250,255,.98) !important;
  font: 800 14px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.ph-floatbtn:hover,
.ph-floatbtn:focus-visible {
  border-color: rgba(126,236,247,.78) !important;
  background: rgba(18,28,52,.96) !important;
  outline: none !important;
}

@media (max-width: 640px) {
  .ph-floatbar {
    right: 12px !important;
    bottom: 14px !important;
  }

  .ph-floatbtn {
    min-height: 40px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
  }
}

/* PH 2026-05-21: konverzní blok osobního astrologického profilu na homepage */
.ph-profile-conversion{
  padding: clamp(42px, 6vw, 78px) 0;
}

.ph-profile-conversion__box{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
  padding: clamp(26px, 4vw, 46px);
  border-radius: 32px;
  background:
    radial-gradient(720px 300px at 10% 0%, rgba(116,235,247,.16), transparent 62%),
    radial-gradient(620px 280px at 100% 20%, rgba(154,126,255,.20), transparent 64%),
    rgba(11, 16, 31, .78);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 26px 90px rgba(0,0,0,.30);
}

.ph-profile-conversion h2{
  margin: 0;
  max-width: 780px;
  color: rgba(246,248,255,.98);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.03em;
}

.ph-profile-conversion__lead{
  max-width: 760px;
  margin: 16px 0 0;
  color: rgba(224,232,255,.76);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.65;
}

.ph-profile-benefits{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.ph-profile-benefits li{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(238,244,255,.90);
  font-weight: 760;
  font-size: 14px;
}

.ph-profile-benefits li::before{
  content: "✓";
  color: rgba(126,236,247,.98);
  font-weight: 900;
}

.ph-profile-conversion__actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 26px;
}

.ph-profile-conversion__actions p{
  max-width: 420px;
  margin: 0;
  color: rgba(224,232,255,.58);
  font-size: 14px;
  line-height: 1.45;
}

.ph-profile-preview{
  border-radius: 26px;
  padding: 22px;
  background: rgba(7, 12, 24, .56);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 60px rgba(0,0,0,.25);
}

.ph-profile-preview__title{
  margin-bottom: 14px;
  color: rgba(126,236,247,.95);
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 13px;
}

.ph-profile-preview__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(230,236,255,.82);
}

.ph-profile-preview__row strong{
  color: rgba(246,248,255,.98);
  font-weight: 900;
}

.ph-profile-preview__note{
  margin-top: 16px;
  color: rgba(224,232,255,.56);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 860px){
  .ph-profile-conversion__box{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .ph-profile-conversion{
    padding: 34px 0 54px;
  }

  .ph-profile-conversion__box{
    padding: 22px;
    border-radius: 24px;
  }

  .ph-profile-conversion__actions{
    align-items: stretch;
  }

  .ph-profile-conversion__actions p{
    max-width: none;
    text-align: center;
  }
}