/* =========================================================
   Pozitivna Stvarnost — design system
   Ported from the static site (stil.css).
   All component classes are namespaced .ps-* to avoid
   collisions with Betheme / Elementor / WooCommerce.
   ========================================================= */

:root {
  --plum-deep: #5C4068;
  --plum-mid: #8B6E9C;
  --lilac: #C0A1CE;
  --lilac-soft: #DFCFE6;
  --lilac-veil: #EFE5F2;
  --cream: #FBF6F0;
  --cream-warm: #F5EDE2;
  --ivory: #FFFCF7;
  --sand: #E8DDD0;
  --blush: #E8C5C0;
  --peach: #F4D2C2;
  --honey: #E8C99A;
  --text-primary: #2A2026;
  --text-secondary: #6B5A66;
  --text-muted: #9B8C95;

  --font-display: 'League Spartan', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Allura', cursive;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 20px;
  --space-5: 28px; --space-6: 40px; --space-7: 56px; --space-8: 80px;

  --r-sm: 12px; --r-md: 18px; --r-lg: 26px;
  --shadow-sm: 0 6px 18px rgba(92, 64, 104, 0.07);
  --shadow-md: 0 12px 32px rgba(92, 64, 104, 0.12);
  --shadow-lg: 0 24px 60px rgba(92, 64, 104, 0.16);

  --dur-base: 240ms; --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --max-content: 1240px;
}

/* ============= Base ============= */
body {
  background: var(--cream);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body #Wrapper,
body #Content { background: transparent; }

body h1, body h2, body h3, body h4,
.ps-scope h1, .ps-scope h2, .ps-scope h3, .ps-scope h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--plum-deep);
  line-height: 1.15;
}
.ps-scope h2 em, .ps-scope h3 em { font-style: italic; color: var(--lilac); }

/* ============= Betheme header ============= */
#Top_bar {
  background: rgba(255, 252, 247, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand);
  box-shadow: none !important;
}
#Top_bar.is-sticky {
  background: rgba(255, 252, 247, 0.96) !important;
  box-shadow: 0 4px 20px rgba(92, 64, 104, 0.06) !important;
}
#Top_bar .container,
#Top_bar .top_bar_left,
#Top_bar .top_bar_right { background: transparent !important; box-shadow: none !important; }
#Top_bar .top_bar_left { width: auto !important; }

#Top_bar #menu > ul > li > a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary) !important;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base), border-color var(--dur-base);
}
#Top_bar #menu > ul > li > a span { border: 0 !important; line-height: 1.4; padding: 0; }
#Top_bar #menu > ul > li > a:hover,
#Top_bar #menu > ul > li.current-menu-item > a,
#Top_bar #menu > ul > li.current_page_item > a {
  color: var(--plum-deep) !important;
  border-bottom-color: var(--lilac);
}
#Top_bar #menu > ul > li.current-menu-item > a { font-weight: 500; }
#Top_bar #menu > ul > li { margin: 0 clamp(8px, 1.1vw, 16px); }
#Top_bar .menu_wrapper { margin-top: 0; }
#Top_bar a.responsive-menu-toggle { color: var(--plum-deep); }
#Top_bar a.responsive-menu-toggle i { color: var(--plum-deep); }

/* Nav CTA pill — add class ps-nav-cta to a menu item */
#Top_bar #menu > ul > li.ps-nav-cta > a {
  background: var(--lilac);
  color: var(--plum-deep) !important;
  border-radius: 999px;
  padding: 11px 22px !important;
  border-bottom: 0 !important;
  box-shadow: 0 8px 24px rgba(192, 161, 206, 0.32);
  font-weight: 500;
}
#Top_bar #menu > ul > li.ps-nav-cta > a:hover { background: var(--ivory); }

/* Side-slide mobile menu */
#Side_slide { background: var(--plum-deep) !important; }
#Side_slide #menu > ul > li > a,
#Side_slide .menu li a { color: var(--cream) !important; letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; }
#Side_slide .menu li a:hover { color: var(--lilac) !important; }

/* ============= Betheme footer ============= */
#Footer {
  background: var(--plum-deep) !important;
  color: var(--cream);
  border-top: 1px solid rgba(255, 252, 247, 0.1);
}
#Footer .footer_copy { border-top: 1px solid rgba(255, 252, 247, 0.1); }
#Footer .copyright {
  color: var(--lilac-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
}
#Footer a { color: var(--lilac-soft); }
#Footer a:hover { color: var(--cream); }
#Footer .social li a,
#Footer ul.social li a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream) !important;
  background: rgba(255, 252, 247, 0.08);
  border: 1px solid rgba(255, 252, 247, 0.16);
  transition: background var(--dur-base), transform var(--dur-base);
}
#Footer .social li a:hover { background: var(--lilac); transform: translateY(-2px); color: var(--plum-deep) !important; }
#Footer h1, #Footer h2, #Footer h3, #Footer h4 { color: var(--cream); font-family: var(--font-display); }

/* ============= Buttons ============= */
.ps-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.ps-btn-primary {
  background: var(--plum-deep);
  color: var(--cream) !important;
  box-shadow: 0 10px 26px rgba(92, 64, 104, 0.28);
}
.ps-btn-primary:hover { background: var(--plum-mid); transform: translateY(-2px); color: var(--cream) !important; }
.ps-btn-ghost {
  background: transparent;
  color: var(--plum-deep) !important;
  border: 1px solid var(--lilac);
}
.ps-btn-ghost:hover { background: var(--lilac-veil); color: var(--plum-deep) !important; }
.ps-btn-lilac {
  background: var(--lilac);
  color: var(--plum-deep) !important;
  box-shadow: 0 8px 24px rgba(192, 161, 206, 0.32);
}
.ps-btn-lilac:hover { background: var(--ivory); color: var(--plum-deep) !important; }

/* ============= Sections & layout ============= */
.ps-section { padding: clamp(60px, 9vw, 120px) clamp(20px, 5vw, 48px); }
.ps-container { max-width: var(--max-content); margin: 0 auto; width: 100%; }
.ps-section-head { text-align: center; max-width: 760px; margin: 0 auto var(--space-8); }
.ps-section-head .ps-caption { margin-bottom: var(--space-4); }
.ps-section-head h2 { margin: 0 0 var(--space-4); }
.ps-section-head p { font-size: 18px; color: var(--text-secondary); margin: 0 auto; }
.ps-bg-warm { background: var(--cream-warm); }
.ps-bg-veil { background: var(--lilac-veil); }
.ps-bg-cream { background: var(--cream); }
.ps-bg-gradient { background: linear-gradient(180deg, var(--cream) 0%, var(--lilac-veil) 100%); }

.ps-caption {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum-mid);
  font-family: var(--font-body);
}
.ps-signature {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--plum-deep);
  display: block;
}

/* ============= Hero ============= */
.ps-hero { padding: clamp(30px, 5vw, 60px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 100px); }
.ps-hero-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .ps-hero-grid { grid-template-columns: 1fr; } }
.ps-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--lilac-veil);
  color: var(--plum-deep);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.ps-hero-badge .ps-dot {
  width: 8px; height: 8px;
  background: var(--lilac);
  border-radius: 50%;
  animation: ps-pulse 1.6s ease-in-out infinite;
}
@keyframes ps-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 161, 206, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(192, 161, 206, 0); }
}
.ps-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 5.6vw, 76px);
  line-height: 1.02;
  margin: 0 0 var(--space-5);
  color: var(--plum-deep);
}
.ps-accent { color: var(--lilac); }
.ps-hero-sub {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 var(--space-6);
  max-width: 540px;
}
.ps-hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ps-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--sand);
}
.ps-hero-meta-item { display: flex; flex-direction: column; gap: 4px; }
.ps-hero-meta-item .ps-num {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 34px);
  color: var(--plum-deep);
  line-height: 1;
}
.ps-hero-meta-item .ps-lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-mid);
}
.ps-hero-photo { position: relative; max-width: 460px; margin-left: auto; padding: 0 20px 20px 0; }
@media (max-width: 900px) { .ps-hero-photo { margin: 0 auto; } }
.ps-hero-photo .ps-mask {
  position: relative;
  padding: 12px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--lilac) 0%, var(--lilac-soft) 55%, var(--plum-mid) 100%);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(192, 161, 206, 0.35);
}
.ps-hero-photo img {
  width: 100%; height: auto; display: block;
  border-radius: calc(var(--r-lg) - 8px);
  border: 3px solid var(--ivory);
}
.ps-float-badge {
  position: absolute;
  bottom: 24px;
  left: -24px;
  max-width: 250px;
  background: var(--ivory);
  padding: 16px 22px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.ps-float-badge .ps-lbl {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-mid);
  margin-bottom: 6px;
}
.ps-float-badge .ps-val {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.15;
  color: var(--plum-deep);
}

/* ============= Page hero (subpages) ============= */
.ps-page-hero {
  background: linear-gradient(180deg, var(--lilac-veil) 0%, var(--cream) 100%);
  padding: clamp(50px, 7vw, 90px) clamp(20px, 5vw, 48px);
  text-align: center;
}
.ps-page-hero .ps-caption { margin-bottom: var(--space-4); }
.ps-page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 64px);
  color: var(--plum-deep);
  margin: 0 auto var(--space-4);
  max-width: 820px;
  line-height: 1.05;
}
.ps-page-hero p {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
}

/* ============= Quote band ============= */
.ps-quote-band { text-align: center; max-width: 820px; margin: 0 auto; }
.ps-quote-band p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.5;
  color: var(--plum-deep);
  margin: 0 0 var(--space-4);
}

/* ============= Cards ============= */
.ps-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  max-width: 1080px;
  margin: 0 auto;
}
.ps-card-grid.ps-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ps-card-grid.ps-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ps-card-grid.ps-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ps-card-grid.ps-cols-2, .ps-card-grid.ps-cols-4 { grid-template-columns: 1fr; } }
.ps-card {
  background: var(--ivory);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ps-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ps-card .ps-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 40px;
  color: var(--lilac);
  line-height: 1;
}
.ps-card h3 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); }
.ps-card p { margin: 0; font-size: 16px; color: var(--text-secondary); line-height: 1.55; }
.ps-card-link {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--plum-deep) !important;
}
.ps-card-link:hover { color: var(--lilac) !important; }

/* ============= Problems grid ============= */
.ps-problems-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 700px) { .ps-problems-grid { grid-template-columns: 1fr; } }
.ps-problem {
  background: var(--ivory);
  border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  border: 1px solid var(--sand);
}
.ps-problem .ps-arrow {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lilac-veil);
  color: var(--plum-deep);
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 500;
}
.ps-problem p { margin: 0; font-size: 16px; line-height: 1.55; }

/* ============= Check list ============= */
.ps-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ps-check-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 16px; line-height: 1.55; }
.ps-check-list li::before {
  content: '';
  flex: 0 0 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--lilac);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ============= Split sections ============= */
.ps-split-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  max-width: var(--max-content);
  margin: 0 auto;
}
.ps-split-grid.ps-rev { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 860px) { .ps-split-grid, .ps-split-grid.ps-rev { grid-template-columns: 1fr; } }
.ps-split-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ps-split-photo.ps-wide { aspect-ratio: 3 / 2; }
.ps-split-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-split-body .ps-caption { margin-bottom: var(--space-4); }
.ps-split-body h2 { margin: 0 0 var(--space-5); }
.ps-split-body p { font-size: 17px; line-height: 1.7; margin: 0 0 var(--space-4); }

/* ============= Stats ============= */
.ps-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--sand);
}
.ps-stat .ps-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 5vw, 38px);
  color: var(--plum-deep);
  line-height: 1;
}
.ps-stat .ps-lbl {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum-mid);
  display: block;
}

/* ============= Testimonials ============= */
.ps-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  max-width: 1080px;
  margin: 0 auto;
}
.ps-testimonial {
  background: var(--ivory);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.ps-testimonial .ps-stars { color: var(--honey); font-size: 14px; letter-spacing: 2px; margin-bottom: var(--space-3); }
.ps-testimonial .ps-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--plum-deep);
  margin: 0 0 var(--space-4);
}
.ps-testimonial .ps-person {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--sand);
  display: flex; flex-direction: column; gap: 2px;
}
.ps-testimonial .ps-person .ps-name { font-weight: 500; font-size: 14px; }
.ps-testimonial .ps-person .ps-meta { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }

/* ============= Final CTA ============= */
.ps-final-cta {
  background: var(--plum-deep);
  color: var(--cream);
  text-align: center;
}
.ps-final-cta h2 {
  color: var(--cream) !important;
  font-size: clamp(36px, 5vw, 62px);
  margin: 0 auto var(--space-5);
  max-width: 780px;
}
.ps-final-cta h2 em { color: var(--lilac); font-style: italic; }
.ps-final-cta p {
  font-size: 18px;
  color: var(--lilac-soft);
  margin: 0 auto var(--space-7);
  max-width: 580px;
}

/* ============= Video frame ============= */
.ps-video-frame {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, #3a2c43 0%, #5C4068 50%, #8B6E9C 100%);
}
.ps-video-frame iframe,
.ps-video-frame video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 1;
}

/* Elementor video widget inside a ps section */
.ps-video-wrap .elementor-widget-video .elementor-wrapper {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Lesson card video thumb */
.ps-card .ps-video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.ps-card .ps-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ps-card .ps-video-thumb:hover img { transform: scale(1.03); }

/* ============= FAQ ============= */
.ps-faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.ps-faq-item {
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow var(--dur-base), border-color var(--dur-base);
}
.ps-faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--lilac); }
.ps-faq-item summary {
  list-style: none;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--plum-deep);
}
.ps-faq-item summary::-webkit-details-marker { display: none; }
.ps-faq-item summary::after {
  content: '+';
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lilac-veil);
  color: var(--plum-deep);
  display: grid; place-items: center;
  font-size: 20px;
  font-weight: 300;
  transition: transform var(--dur-base), background var(--dur-base);
}
.ps-faq-item[open] summary::after { background: var(--lilac); color: var(--ivory); transform: rotate(45deg); }
.ps-faq-answer { padding: 0 24px 22px; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }

/* ============= Form card (wraps Elementor Pro form) ============= */
.ps-form-card {
  background: var(--ivory);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 24px 60px rgba(92, 64, 104, 0.14);
  border: 1px solid rgba(192, 161, 206, 0.25);
  max-width: 560px;
  margin: 0 auto;
}
.ps-form-card h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 28px;
  margin: 0 0 var(--space-5);
  color: var(--plum-deep);
}
.ps-form-card .elementor-field-group > label,
.ps-form-card .elementor-field-label {
  font-size: 10px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-mid) !important;
  font-weight: 500 !important;
  font-family: var(--font-body);
  margin-bottom: 6px;
}
.ps-form-card input[type="text"],
.ps-form-card input[type="email"],
.ps-form-card input[type="tel"],
.ps-form-card input[type="password"],
.ps-form-card textarea,
.ps-form-card .elementor-field-textual {
  padding: 14px 16px !important;
  background: var(--cream) !important;
  border: 1px solid var(--sand) !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.ps-form-card .elementor-field-textual:focus {
  border-color: var(--lilac) !important;
  box-shadow: 0 0 0 3px rgba(192, 161, 206, 0.25) !important;
}
.ps-form-card .elementor-button,
.ps-form-card button[type="submit"] {
  background: var(--plum-deep) !important;
  color: var(--cream) !important;
  border-radius: 999px !important;
  padding: 17px 30px !important;
  width: 100%;
  justify-content: center;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  border: 0 !important;
  box-shadow: 0 10px 26px rgba(92, 64, 104, 0.28);
  transition: background var(--dur-base), transform var(--dur-base);
}
.ps-form-card .elementor-button:hover { background: var(--plum-mid) !important; transform: translateY(-2px); }
.ps-form-fine { text-align: center; font-size: 12px; color: var(--text-muted); margin: var(--space-2) 0 0; }

/* ============= WooCommerce — Nalog / My Account ============= */
.woocommerce-account #Content {
  background: linear-gradient(180deg, var(--cream) 0%, var(--lilac-veil) 100%);
}
.woocommerce-account .woocommerce {
  max-width: 1020px;
  margin: 0 auto;
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  background: var(--ivory);
  border: 1px solid rgba(192, 161, 206, 0.25);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-lg);
}
.woocommerce-account form .form-row label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-mid);
  font-weight: 500;
  font-family: var(--font-body);
}
.woocommerce-account form .input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"] {
  padding: 14px 16px !important;
  background: var(--cream) !important;
  border: 1px solid var(--sand) !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
.woocommerce-account form .input-text:focus {
  border-color: var(--lilac) !important;
  box-shadow: 0 0 0 3px rgba(192, 161, 206, 0.25) !important;
  outline: none;
}
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account input.button {
  background: var(--plum-deep) !important;
  color: var(--cream) !important;
  border-radius: 999px !important;
  padding: 15px 30px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border: 0 !important;
  box-shadow: 0 10px 26px rgba(92, 64, 104, 0.28);
  transition: background var(--dur-base), transform var(--dur-base);
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account .woocommerce a.button:hover {
  background: var(--plum-mid) !important;
  transform: translateY(-2px);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  color: var(--plum-deep);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-base);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--lilac-veil);
}
/* Nextend social login buttons */
.woocommerce-account .nsl-container { margin-top: var(--space-4); }

/* ============= Elementor global tweaks ============= */
.elementor-widget-button .elementor-button {
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  color: var(--plum-deep);
}

/* ============= Reveal animations ============= */
.ps-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 700ms var(--ease-out) var(--ps-reveal-delay, 0ms),
    transform 700ms var(--ease-out) var(--ps-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.ps-reveal.ps-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ps-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============= Responsive ============= */
html, body { overflow-x: clip; }
@media (max-width: 900px) {
  .ps-hero { padding-top: 24px; }
  .ps-hero-photo { max-width: 420px; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .ps-hero-ctas { flex-direction: column; }
  .ps-hero-ctas .ps-btn { width: 100%; justify-content: center; }
  .ps-hero-meta { gap: var(--space-4); display: grid; grid-template-columns: 1fr 1fr; }
  .ps-float-badge { left: 10px; bottom: 10px; max-width: 210px; padding: 12px 16px; }
  .ps-float-badge .ps-val { font-size: 16px; }
  .ps-section { padding-left: 18px; padding-right: 18px; }
  .ps-problem { padding: var(--space-4) var(--space-5); }
  .ps-card { padding: var(--space-5); }
  .ps-form-card { border-radius: 20px; }
  .ps-final-cta .ps-btn { width: 100%; justify-content: center; }
  .ps-stats-grid { gap: var(--space-3); }
  .ps-quote-band p { font-size: 20px; }
  .ps-page-hero h1 { font-size: clamp(32px, 9vw, 42px); }
  .ps-hero h1 { font-size: clamp(36px, 11vw, 48px); }
}

/* =========================================================
   Elementor container compatibility
   Elementor gives every container `display:flex` via .e-con.
   When a ps-* layout class is applied directly to a container
   we need our own display mode to win.
   ========================================================= */
.e-con.ps-card-grid,
.e-con.ps-problems-grid,
.e-con.ps-testimonials-grid,
.e-con.ps-split-grid,
.e-con.ps-stats-grid { display: grid !important; }

.e-con.ps-section,
.e-con.ps-container,
.e-con.ps-video-wrap,
.e-con.ps-page-hero,
.e-con.ps-final-cta { display: block !important; }

.e-con.ps-card { display: flex !important; flex-direction: column; }

/* Containers carrying a ps class must not inherit Elementor's max-width juggling */
.e-con.ps-container { max-width: var(--max-content) !important; margin-left: auto; margin-right: auto; }
.e-con.ps-card-grid.ps-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 700px) {
  .e-con.ps-card-grid.ps-cols-2 { grid-template-columns: 1fr !important; }
}

/* Elementor widgets sitting inside a ps-card should not add their own gaps */
.e-con.ps-card > .elementor-widget { width: 100%; }
.e-con.ps-card .elementor-widget-video .elementor-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* =========================================================
   Redesigned pages: no Betheme subheader / breadcrumb strip.
   Each page supplies its own hero (and its own single H1).
   ========================================================= */
body.page-id-92 #Subheader,
body.page-id-1604 #Subheader,
body.page-id-1717 #Subheader,
body.page-id-22 #Subheader,
body.page-id-1791 #Subheader,
body.page-id-240 #Subheader { display: none !important; }

body.page-id-92 #Content,
body.page-id-1604 #Content,
body.page-id-1717 #Content,
body.page-id-22 #Content,
body.page-id-1791 #Content,
body.page-id-240 #Content { padding-top: 0 !important; }

/* Betheme wraps page content in a padded column; the ps sections own their padding */
body.page-id-92 #Content .sections_group > .section,
body.page-id-1604 #Content .sections_group > .section { padding: 0; }

body.page-id-92 .the_content_wrapper,
body.page-id-1604 .the_content_wrapper,
body.page-id-1717 .the_content_wrapper,
body.page-id-22 .the_content_wrapper,
body.page-id-1791 .the_content_wrapper { margin-bottom: 0; }

/* =========================================================
   Nalog (WooCommerce My Account) — hero + centred form card
   ========================================================= */
.ps-auth-hero .ps-auth-perks {
  max-width: 460px;
  margin: 28px auto 0;
  text-align: left;
}
.ps-auth-hero .ps-auth-perks li { justify-content: flex-start; }

.woocommerce-account #Content .woocommerce {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px clamp(60px, 9vw, 120px);
}
.woocommerce-account.logged-in #Content .woocommerce { max-width: 1020px; }

.woocommerce-account .woocommerce form.login h2,
.woocommerce-account .woocommerce h2 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--plum-deep);
}
.woocommerce-account .woocommerce-form-login__rememberme span { font-size: 14px; color: var(--text-secondary); }
.woocommerce-account .woocommerce-LostPassword a { color: var(--plum-mid); font-size: 13px; }

/* Nextend social login sits under the form */
.woocommerce-account .nsl-container-buttons { justify-content: center; }

/* Account dashboard (logged in) */
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--ivory);
  border: 1px solid rgba(192, 161, 206, 0.25);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   Nalog — corrected layout for the WooCommerce login/register
   two-column set (overrides the narrower rule above).
   ========================================================= */
.woocommerce-account #Content .woocommerce {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px clamp(60px, 9vw, 120px);
}

.woocommerce-account #customer_login.col2-set,
.woocommerce-account .woocommerce .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  float: none;
}
.woocommerce-account .woocommerce .col2-set .col-1,
.woocommerce-account .woocommerce .col2-set .col-2,
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
}
@media (max-width: 820px) {
  .woocommerce-account #customer_login.col2-set,
  .woocommerce-account .woocommerce .col2-set { grid-template-columns: 1fr; }
}

.woocommerce-account .woocommerce .col2-set h2,
.woocommerce-account #customer_login h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--plum-deep);
  margin: 0 0 16px;
  text-align: left;
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  height: 100%;
  margin: 0;
  text-align: left;
}
.woocommerce-account .woocommerce form.login p,
.woocommerce-account .woocommerce form.register p { text-align: left; }

.woocommerce-account .woocommerce form .form-row { width: 100%; float: none; margin: 0 0 18px; }
.woocommerce-account .woocommerce form .form-row label { display: block; margin-bottom: 6px; }
.woocommerce-account .woocommerce form .input-text { width: 100%; }

/* Buttons must be pills, never squashed ellipses */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 180px;
  white-space: nowrap;
  line-height: 1.2;
}

.woocommerce-account .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.woocommerce-account .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

/* Nextend Google button: match the design language */
.woocommerce-account .nsl-container-buttons a,
.woocommerce-account .nsl-container .nsl-button {
  border-radius: 999px !important;
  overflow: hidden;
}
.woocommerce-account .nsl-container-buttons { justify-content: flex-start; margin-top: 8px; }

/* WooCommerce/Betheme add clearfix ::before and ::after to .col2-set.
   On a grid container those pseudo-elements become grid items and steal
   cells (1,1) and (2,2), pushing the real columns out of place. */
.woocommerce-account #customer_login.col2-set::before,
.woocommerce-account #customer_login.col2-set::after,
.woocommerce-account .woocommerce .col2-set::before,
.woocommerce-account .woocommerce .col2-set::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   HEADER ALIGNMENT — match the static site
   Betheme floats .top_bar_left and lets it shrink-wrap, so the
   nav sits right next to the logo. The static header is a
   full-width flex row: brand left, nav + CTA hard right.
   ========================================================= */
#Top_bar > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 clamp(20px, 5vw, 48px) !important;
  margin: 0 !important;
}
#Top_bar > .container > .column,
#Top_bar > .container > .column.one {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#Top_bar .top_bar_left {
  width: 100% !important;
  float: none !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  background: none !important;
  box-shadow: none !important;
}

#Top_bar .logo {
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
}
#Top_bar .logo #logo { display: flex; align-items: center; padding: 14px 0 !important; }

#Top_bar .menu_wrapper {
  float: none !important;
  margin: 0 0 0 auto !important;
  display: flex !important;
  align-items: center;
  flex: 0 1 auto;
}
#Top_bar .secondary_menu_wrapper:empty { display: none; }

#Top_bar #menu { position: static !important; float: none !important; }
#Top_bar #menu > ul.menu-main {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(10px, 1.4vw, 26px);
}
#Top_bar #menu > ul > li { margin: 0 !important; float: none !important; }
#Top_bar #menu > ul > li.ps-nav-cta { margin-left: clamp(4px, 0.8vw, 14px) !important; }

/* =========================================================
   FOOTER — brand / nav / social row above the copyright bar
   (rendered through Betheme's footer_action area)
   ========================================================= */
#Footer .footer_action {
  padding: var(--space-7) 0 var(--space-5);
}
#Footer .footer_action .container {
  max-width: var(--max-content);
  width: 100%;
  padding: 0 clamp(20px, 5vw, 48px);
}
#Footer .footer_action .column,
#Footer .footer_action .mcb-column-inner { width: 100%; margin: 0; padding: 0; }

.ps-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.ps-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}
.ps-footer-brand img { height: 36px; width: auto; display: block; }
.ps-footer-brand span {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--cream) !important;
  line-height: 1;
}
.ps-footer-nav { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.ps-footer-nav a {
  color: var(--lilac-soft) !important;
  text-decoration: none !important;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--dur-base);
}
.ps-footer-nav a:hover { color: var(--cream) !important; }
.ps-footer-social { display: flex; gap: var(--space-2); }
.ps-footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream) !important;
  background: rgba(255, 252, 247, 0.08);
  border: 1px solid rgba(255, 252, 247, 0.16);
  text-decoration: none !important;
  font-size: 13px;
  font-family: var(--font-body);
  transition: background var(--dur-base), transform var(--dur-base), color var(--dur-base);
}
.ps-footer-social a:hover { background: var(--lilac); color: var(--plum-deep) !important; transform: translateY(-2px); }

/* Copyright bar: centred text only — social now lives in the row above */
#Footer .footer_copy { margin-top: 0; }
#Footer .footer_copy .container { max-width: var(--max-content); padding: 0 clamp(20px, 5vw, 48px); }
#Footer .footer_copy ul.social,
#Footer .footer_copy .social { display: none !important; }
#Footer .footer_copy .copyright { float: none !important; text-align: center; width: 100%; }

@media (max-width: 767px) {
  .ps-footer-inner { flex-direction: column; text-align: center; justify-content: center; }
  .ps-footer-nav { justify-content: center; }
}

/* =========================================================
   HEADER v2 — transparent bar, wider, logo untouched
   (overrides the header rules above)
   ========================================================= */

/* Fully transparent over the page — no fill, no blur, no divider */
#Top_bar,
#Top_bar:not(.is-sticky) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Wider: pull the bar closer to the viewport edges */
#Top_bar > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 clamp(16px, 2.6vw, 44px) !important;
}

/* Betheme's .clearfix ::before / ::after become flex items and eat a gap slot,
   pushing the logo inward. Remove them so the logo sits flush left. */
#Top_bar .top_bar_left::before,
#Top_bar .top_bar_left::after,
#Top_bar > .container::before,
#Top_bar > .container::after,
#Top_bar > .container > .column::before,
#Top_bar > .container > .column::after {
  content: none !important;
  display: none !important;
}

#Top_bar .top_bar_left { gap: 0 !important; }
#Top_bar .logo { margin: 0 !important; }

/* Nav sits hard right, CTA last */
#Top_bar .menu_wrapper { margin-left: auto !important; }

/* Menu items: transparent, no plate behind them */
#Top_bar #menu > ul.menu-main,
#Top_bar #menu > ul.menu-main > li,
#Top_bar #menu > ul.menu-main > li > a { background: transparent !important; }

/* Sticky state keeps a light fill so the nav stays readable over content */
#Top_bar.is-sticky {
  background: rgba(255, 252, 247, 0.94) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(92, 64, 104, 0.06) !important;
}

/* The transparent bar is absolutely positioned, so it takes no space in flow.
   Give the first section enough top padding to clear it. */
:root { --ps-header-h: 88px; }
@media (max-width: 767px) { :root { --ps-header-h: 74px; } }

.ps-hero { padding-top: calc(var(--ps-header-h) + clamp(20px, 3.5vw, 44px)) !important; }
.ps-page-hero { padding-top: calc(var(--ps-header-h) + clamp(34px, 5vw, 68px)) !important; }

/* Nalog: the WooCommerce panel follows its own hero, same clearance applies */
.woocommerce-account .ps-auth-hero { padding-top: calc(var(--ps-header-h) + clamp(34px, 5vw, 68px)) !important; }

/* Betheme paints the nav container itself with the old header colour (#f7f0ed).
   Clear it so the bar is genuinely see-through. */
#Top_bar #menu,
#Top_bar nav#menu,
#Top_bar .menu_wrapper,
#Top_bar .top_bar_left,
#Top_bar > .container,
#Top_bar > .container > .column,
#Header_wrapper,
#Header { background: transparent !important; background-image: none !important; }

/* =========================================================
   1) HEADER CTA — lilac pill like the static site, with hover
   (must beat the blanket `background: transparent` rule above)
   ========================================================= */
#Top_bar #menu > ul.menu-main > li.ps-nav-cta > a,
#Top_bar #menu > ul > li.ps-nav-cta > a {
  background: var(--lilac) !important;
  color: var(--plum-deep) !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  border-bottom: 0 !important;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(192, 161, 206, 0.32);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
#Top_bar #menu > ul.menu-main > li.ps-nav-cta > a:hover,
#Top_bar #menu > ul > li.ps-nav-cta > a:hover {
  background: var(--plum-deep) !important;
  color: var(--cream) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(92, 64, 104, 0.34);
}
#Top_bar #menu > ul > li.ps-nav-cta > a:active { transform: translateY(0); }
#Top_bar #menu > ul > li.ps-nav-cta > a span { color: inherit !important; }

/* =========================================================
   2) STICKY HEADER — vertically centre the shrunken bar
   Betheme animates the bar down to 60px but the logo keeps its
   padding, so logo + nav sat ~9px below the true centre.
   ========================================================= */
#Top_bar.is-sticky > .container,
#Top_bar.is-sticky > .container > .column { height: 100% !important; }
#Top_bar.is-sticky .top_bar_left {
  height: 100% !important;
  align-items: center !important;
}
#Top_bar.is-sticky .logo { height: auto !important; align-items: center !important; }
#Top_bar.is-sticky #logo {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 0 !important;
}
#Top_bar.is-sticky .menu_wrapper { margin-top: 0 !important; align-items: center !important; }
#Top_bar.is-sticky #menu > ul.menu-main { align-items: center !important; }

/* =========================================================
   3) FOOTER — Betheme tints .footer_action with rgba(0,0,0,.1),
   which made that row darker than the static plum. Clear it.
   ========================================================= */
#Footer .footer_action,
#Footer .footer_copy,
#Footer .widgets_wrapper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
}
#Footer { background-color: var(--plum-deep) !important; }

/* Restore the thin divider above the copyright (cleared by the reset above) */
#Footer .footer_copy { border-top: 1px solid rgba(255, 252, 247, 0.1) !important; }

/* =========================================================
   5) MOJ NALOG (logged in) — nav left, content beside it, top aligned
   WooCommerce floats these two; the floats were collapsing so the
   content card dropped below the tab list. Grid makes it deterministic.
   ========================================================= */
.woocommerce-account.logged-in #Content .woocommerce {
  display: grid !important;
  grid-template-columns: minmax(200px, 250px) 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
/* clearfix pseudo-elements would otherwise occupy grid cells */
.woocommerce-account.logged-in #Content .woocommerce::before,
.woocommerce-account.logged-in #Content .woocommerce::after {
  content: none !important;
  display: none !important;
}
.woocommerce-account.logged-in #Content .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce-MyAccount-content {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
  background: var(--ivory);
  border: 1px solid rgba(192, 161, 206, 0.25);
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: var(--shadow-sm);
  align-self: start;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul { margin: 0; }

.woocommerce-account.logged-in .woocommerce-MyAccount-content > :first-child { margin-top: 0 !important; }

@media (max-width: 820px) {
  .woocommerce-account.logged-in #Content .woocommerce { grid-template-columns: 1fr; }
}

/* Logged-in hero needs no benefit list, so it can breathe less */
.ps-auth-hero--in { padding-bottom: clamp(28px, 4vw, 48px) !important; }

/* Account page links were falling back to Betheme/WooCommerce defaults
   (blue in the content, orange in the tabs). Bring them into the palette. */
.woocommerce-account .woocommerce-MyAccount-content a,
.woocommerce-account .woocommerce-MyAccount-content a:visited {
  color: var(--plum-deep) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(192, 161, 206, 0.6);
}
.woocommerce-account .woocommerce-MyAccount-content a:hover { color: var(--plum-mid) !important; }

.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:visited {
  color: var(--plum-deep) !important;
  text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a { font-weight: 500; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--plum-mid) !important; }

/* YITH memberships group label inside the tab list */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.yith-wcmbs-my-account-navigation-title,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 18px 6px;
}

.woocommerce-account .woocommerce-MyAccount-content p { color: var(--text-secondary); }
.woocommerce-account .woocommerce-MyAccount-content strong { color: var(--text-primary); }

/* =========================================================
   ROUND 3 FIXES
   ========================================================= */

/* --- 1) Nalog (logged in): no hero background, symmetric spacing --- */
.ps-auth-hero--in {
  background: none !important;
  background-image: none !important;
  padding-bottom: clamp(8px, 1.5vw, 18px) !important;
}
.woocommerce-account.logged-in #Content .woocommerce {
  padding-top: clamp(48px, 7vw, 96px) !important;
  padding-bottom: clamp(48px, 7vw, 96px) !important;
}

/* --- 2) Mobile: kill Betheme's 33px side gutters on the redesigned pages.
   The ps-* sections carry their own padding, so the coloured bands must
   run edge to edge. --- */
@media (max-width: 767px) {
  body.page-id-92 .section_wrapper,
  body.page-id-1604 .section_wrapper,
  body.page-id-1717 .section_wrapper,
  body.page-id-22 .section_wrapper,
  body.page-id-1791 .section_wrapper,
  body.page-id-240 .section_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* the account panel still needs a little breathing room from the edges */
  body.page-id-240 #Content .woocommerce { padding-left: 18px !important; padding-right: 18px !important; }
}

/* --- 3) Footer on mobile: proper centring --- */
@media (max-width: 767px) {
  #Footer .footer_action { padding: var(--space-6) 0 var(--space-4); }
  #Footer .footer_action .container { padding: 0 18px; }
  .ps-footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
  }
  .ps-footer-brand { justify-content: center; }
  .ps-footer-nav {
    justify-content: center;
    gap: 14px 18px;
    max-width: 320px;
    margin: 0 auto;
  }
  .ps-footer-social { justify-content: center; }
  #Footer .footer_copy .container { padding: 0 18px; }
  #Footer .footer_copy .copyright { text-align: center; line-height: 1.6; }
}

/* --- 4) Mobile logo: Betheme sets max-height:0 on the mobile sticky logo
   (no dedicated sticky logo is configured), so it vanished after scroll. --- */
@media (max-width: 767px) {
  #Top_bar .logo img.logo-main,
  #Top_bar .logo img.logo-sticky,
  #Top_bar .logo img.logo-mobile,
  #Top_bar .logo img.logo-mobile-sticky {
    max-height: 40px !important;
    height: auto !important;
    width: auto !important;
  }
}

/* --- 5) Hamburger: centre it in both the normal and sticky bar --- */
#Top_bar .menu_wrapper { display: flex !important; align-items: center !important; }
#Top_bar a.responsive-menu-toggle {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  line-height: 1 !important;
}
#Top_bar a.responsive-menu-toggle i { line-height: 1 !important; margin: 0 !important; display: block; }

/* --- 6) Stop the logo flashing at the wrong size before Betheme's JS runs.
   Only the variant for the current breakpoint may ever paint. --- */
@media (min-width: 768px) {
  #Top_bar .logo img.logo-mobile,
  #Top_bar .logo img.logo-mobile-sticky { display: none !important; }
}
@media (max-width: 767px) {
  #Top_bar .logo img.logo-main,
  #Top_bar .logo img.logo-sticky { display: none !important; }
}
#Top_bar .logo img { max-width: 100%; }

/* --- 7) Remove the cart (and its total) from the slide-out menu --- */
#Side_slide #header_cart,
#Side_slide .top-bar-right-icon-cart,
#Side_slide .header-cart-total,
#Side_slide .header-cart-count { display: none !important; }
#Side_slide .extras-wrapper { justify-content: center; }

/* Removing the clearfix pseudo-elements above also removed the float
   clearing for #Top_bar > .container, collapsing the bar to 0 height.
   The column no longer needs to float now that it is a flex parent. */
#Top_bar > .container > .column,
#Top_bar > .container > .column.one {
  float: none !important;
  display: flex !important;
  align-items: center;
}
#Top_bar > .container { min-height: inherit; }

/* Mobile header proportions: keep the bar compact and the logo legible */
@media (max-width: 767px) {
  #Top_bar #logo { padding: 10px 0 !important; }
  #Top_bar .logo img.logo-mobile,
  #Top_bar .logo img.logo-mobile-sticky { max-height: 36px !important; }
}

/* .column is now a flex parent, so .top_bar_left must grow to fill it,
   otherwise `margin-left:auto` on the nav/hamburger has no free space
   and it ends up glued to the logo. */
#Top_bar > .container > .column > .top_bar_left {
  flex: 1 1 auto !important;
  width: 100% !important;
}
#Top_bar > .container > .column > .search_wrapper { flex: 0 0 auto; }

/* Betheme stretches .menu_wrapper to fill the bar, so the hamburger sat at
   its left edge (right next to the logo). Pin its contents to the right. */
#Top_bar .menu_wrapper { justify-content: flex-end !important; }
@media (max-width: 767px) {
  #Top_bar .menu_wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }
}

/* The centring rule above forced the hamburger visible at every width.
   Betheme switches to the mobile menu below 1240px (mobile-menu-initial),
   so restrict it to that range. */
@media (min-width: 1241px) {
  #Top_bar a.responsive-menu-toggle { display: none !important; }
}
@media (max-width: 1240px) {
  #Top_bar a.responsive-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* The grid rule above zeroed padding-top on both account cards to align their
   tops, which glued the first line of text to the card's top edge.
   Restore proper inner padding — the cards still align because the grid
   uses align-items:start, not the padding. */
.woocommerce-account.logged-in .woocommerce-MyAccount-content {
  padding: clamp(28px, 3.5vw, 44px) !important;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
  padding: 14px 10px !important;
}

/* Keep the rhythm inside the content card readable */
.woocommerce-account.logged-in .woocommerce-MyAccount-content > :first-child { margin-top: 0 !important; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content > :last-child { margin-bottom: 0 !important; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content p { margin-bottom: 1em; line-height: 1.7; }

/* =========================================================
   FOOTER CENTRING FIX
   Betheme gives .footer_action .container a negative right margin
   (grid gutter compensation), so on phones it measured 451px inside a
   415px viewport and pushed its contents ~18px to the right. The
   copyright row sits in a different container and stayed centred,
   which is why only the brand/nav/social row looked off.
   ========================================================= */
#Footer .footer_action .container,
#Footer .footer_copy .container {
  width: 100% !important;
  max-width: var(--max-content) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#Footer .footer_action .column,
#Footer .footer_action .mcb-column-inner,
#Footer .footer_copy .column,
#Footer .footer_copy .mcb-column-inner {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 767px) {
  /* let the nav use the full width and centre each wrapped row on its own */
  .ps-footer-nav {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: center;
    row-gap: 12px;
    column-gap: 18px;
  }
  .ps-footer-inner { width: 100%; }
  #Footer .footer_action .container,
  #Footer .footer_copy .container { padding-left: 18px !important; padding-right: 18px !important; }
}

/* Betheme's .container is box-sizing: content-box, so `width:100%` plus the
   horizontal padding overflowed the parent by exactly the padding amount
   (415 + 36 = 451). The browser then resolved margin-right to -36px, which
   is what shifted the whole footer row to the right. Switch to border-box
   so the padding is included in the 100%. */
#Footer .footer_action .container,
#Footer .footer_copy .container,
#Footer .footer_action .column,
#Footer .footer_copy .column,
#Footer .footer_action .mcb-column-inner,
#Footer .footer_copy .mcb-column-inner {
  box-sizing: border-box !important;
}

/* =========================================================
   NALOG (logged out) — centre the form content
   The two cards were already symmetric as a pair, but inside them the
   submit button and the lost-password link were left aligned while the
   Nextend Google button was centred, which made the whole block read as
   leaning left. Centre everything so the left/right breathing room matches.
   ========================================================= */
.woocommerce-account:not(.logged-in) #customer_login.col2-set {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Section headings above each card */
.woocommerce-account:not(.logged-in) #customer_login h2 {
  text-align: center !important;
  margin-bottom: 18px;
}

/* Card contents */
.woocommerce-account:not(.logged-in) .woocommerce form.login,
.woocommerce-account:not(.logged-in) .woocommerce form.register {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Labels + fields keep their own full width, left-read but evenly inset */
.woocommerce-account:not(.logged-in) .woocommerce form .form-row { text-align: left; }

/* Buttons and links centred */
.woocommerce-account:not(.logged-in) .woocommerce form.login button.button,
.woocommerce-account:not(.logged-in) .woocommerce form.register button.button,
.woocommerce-account:not(.logged-in) .woocommerce form .button {
  align-self: center;
  margin-left: auto !important;
  margin-right: auto !important;
}
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword,
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a { text-align: center; display: block; }
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme { justify-content: center; }
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text { text-align: center; }
.woocommerce-account:not(.logged-in) .woocommerce form.register .woocommerce-privacy-policy-text p { text-align: center; }

/* Nextend social button block */
.woocommerce-account:not(.logged-in) .nsl-container-buttons { justify-content: center !important; }
.woocommerce-account:not(.logged-in) .nsl-container { text-align: center; }

/* WooCommerce wraps the submit button in <p class="form-row">, so align-self
   on the form never reached it. Make the button a block-level flex box and
   centre it with auto margins instead. */
.woocommerce-account:not(.logged-in) .woocommerce form.login button.button,
.woocommerce-account:not(.logged-in) .woocommerce form.register button.button {
  display: flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.woocommerce-account:not(.logged-in) .woocommerce form .form-row.form-row-wide:has(button.button) { text-align: center; }
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

/* The Nalog page was boxed to Betheme's 1060px wrapper while every other
   redesigned page runs edge to edge. Make it full-bleed for consistency and
   keep the panel itself centred at a comfortable width. */
body.page-id-240 .section_wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.page-id-240 .the_content_wrapper { margin-left: 0 !important; margin-right: 0 !important; }

/* On the Nalog page Betheme gives .the_content_wrapper ~98% width, left
   aligned, which left ~31px of slack on the right and pulled the whole
   login panel visibly off-centre. Make it fill its parent. */
body.page-id-240 .the_content_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* auto margins on the submit button did not take effect, so centre it from
   its parent row instead. WooCommerce puts the submit (and the remember-me
   label) in a bare <p class="form-row">, while the field rows carry
   .form-row-wide — so this targets only the button row. */
.woocommerce-account:not(.logged-in) .woocommerce form.login p.form-row:not(.form-row-wide),
.woocommerce-account:not(.logged-in) .woocommerce form.register p.form-row:not(.form-row-wide),
.woocommerce-account:not(.logged-in) .woocommerce form p.form-row:has(button.button) {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  text-align: center !important;
  gap: 14px;
}
.woocommerce-account:not(.logged-in) .woocommerce form p.form-row:not(.form-row-wide) .woocommerce-form-login__rememberme {
  width: auto !important;
  margin: 0 !important;
}

/* =========================================================
   Lesson grid (Život bez idiota — mentorski)
   The grid container carries BOTH .ps-container and .ps-card-grid.
   Earlier rules give those the same specificity (0,2,0) with !important,
   so `display:block` from .ps-container won on source order and the 12
   lesson cards stacked in a single column. These combined selectors are
   (0,3,0) and settle it in favour of the grid.
   ========================================================= */
.e-con.ps-card-grid.ps-cols-2,
.e-con.ps-container.ps-card-grid,
.e-con.ps-container.ps-card-grid.ps-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-5) !important;
  align-items: start;
}
.e-con.ps-container.ps-card-grid.ps-cols-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 900px) {
  .e-con.ps-container.ps-card-grid.ps-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
  .e-con.ps-card-grid.ps-cols-2,
  .e-con.ps-container.ps-card-grid,
  .e-con.ps-container.ps-card-grid.ps-cols-2,
  .e-con.ps-container.ps-card-grid.ps-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Lock placeholder standing in for a lesson video that is not published yet.
   Matches the video frame's shape so the cards stay visually consistent. */
.ps-card .ps-lock-thumb,
.e-con.ps-card .ps-lock-thumb {
  width: 100%;
  margin: 12px 0 18px;
}
.ps-card .ps-lock-thumb img,
.e-con.ps-card .ps-lock-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.ps-card .ps-lock-thumb .elementor-widget-container { line-height: 0; }

/* =========================================================
   NALOG — login/register cards must not overflow their column
   `height:100%` on the form resolved against the FULL column height,
   but the form starts below the <h2> (30px + 18px margin), so each card
   spilled exactly 48px past the column and collided with the next
   heading — very visible once the columns stack on mobile.
   Make the column a flex column and let the form take the remaining
   space instead: still equal-height cards, no overflow.
   ========================================================= */
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  height: auto !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* =========================================================
   YITH Membership Plans inside the account card
   The plan details (Starting date / Expiration / Status) and the
   History/Contents tables are wider than the card on phones, so they
   spilled past its right edge and cut off the rounded corner.
   Make every child fit, and clip as a final guarantee.
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-content {
  overflow: hidden;              /* the rounded corner always wins */
  border-radius: var(--r-lg);
}

.woocommerce-account .woocommerce-MyAccount-content .yith-wcmbs-my-account-accordion,
.woocommerce-account .woocommerce-MyAccount-content .yith-wcmbs-my-account-membership-container,
.woocommerce-account .woocommerce-MyAccount-content .yith-wcmbs-tabs,
.woocommerce-account .woocommerce-MyAccount-content .yith-wcmbs-tabs > div {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* Three detail boxes: wrap instead of overflowing, stack on small screens */
.woocommerce-account .yith-wcmbs-membership-details {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px;
  max-width: 100%;
  margin: 0 0 20px;
}
.woocommerce-account .yith-wcmbs-membership-detail {
  flex: 1 1 150px;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 !important;
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .woocommerce-account .yith-wcmbs-membership-detail { flex: 1 1 100%; }
}

/* History / Contents panels: scroll inside the card, never past it */
.woocommerce-account .yith-wcmbs-membership-history-table-container,
.woocommerce-account .yith-wcmbs-my-account-list-plan-items-container {
  max-width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.woocommerce-account .woocommerce-MyAccount-content table {
  max-width: 100%;
  width: 100%;
  table-layout: auto;
}

/* Tab strip and plan title stay inside too */
.woocommerce-account .yith-wcmbs-tabs ul {
  max-width: 100%;
  flex-wrap: wrap;
  padding-left: 0;
  margin-left: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .yith-wcmbs-my-account-accordion h3 {
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  color: var(--plum-deep);
}

/* Included-pages links were default blue; bring them into the palette */
.woocommerce-account .yith-wcmbs-my-account-list-plan-items-container a,
.woocommerce-account .yith-wcmbs-my-account-list-plan-items-container a:visited {
  color: var(--plum-deep) !important;
}

/* =========================================================
   Život bez idiota (Mentorski nastavak) — page 2281
   Same treatment the other redesigned pages get: no Betheme
   subheader (the page has its own hero and its own single H1),
   no stray top padding, and full-bleed sections on phones.
   ========================================================= */
body.page-id-2281 #Subheader { display: none !important; }
body.page-id-2281 #Content { padding-top: 0 !important; }
body.page-id-2281 .the_content_wrapper { margin-bottom: 0; }

@media (max-width: 767px) {
  body.page-id-2281 .section_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* =========================================================
   NALOG — make the two action buttons in each card identical
   The WooCommerce submit was 180x48 at 15px, while Nextend's Google
   button rendered 238x40 at 17px with its own radius. Same geometry,
   same type, same lift for both; Google keeps its brand colour.
   ========================================================= */
:root { --ps-auth-btn-w: 260px; --ps-auth-btn-h: 48px; }

.woocommerce-account:not(.logged-in) .woocommerce form.login button.button,
.woocommerce-account:not(.logged-in) .woocommerce form.register button.button {
  width: var(--ps-auth-btn-w) !important;
  min-width: var(--ps-auth-btn-w) !important;
  max-width: var(--ps-auth-btn-w) !important;
  height: var(--ps-auth-btn-h) !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}

/* Nextend social button */
.woocommerce-account:not(.logged-in) .nsl-container { text-align: center; margin-top: 4px; }
.woocommerce-account:not(.logged-in) .nsl-container-buttons {
  display: flex !important;
  justify-content: center !important;
}
.woocommerce-account:not(.logged-in) .nsl-container-buttons > a {
  display: block !important;
  width: var(--ps-auth-btn-w) !important;
  max-width: var(--ps-auth-btn-w) !important;
  margin: 0 auto !important;
}
.woocommerce-account:not(.logged-in) .nsl-container .nsl-button {
  width: 100% !important;
  max-width: var(--ps-auth-btn-w) !important;
  height: var(--ps-auth-btn-h) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 26px rgba(19, 19, 20, 0.20);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.woocommerce-account:not(.logged-in) .nsl-container .nsl-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(19, 19, 20, 0.26);
}
.woocommerce-account:not(.logged-in) .nsl-container .nsl-button-label-container {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* =========================================================
   NALOG — line the two Google buttons up across both cards
   The login card stacked: submit -> "Zaboravili ste lozinku?" -> Google,
   which pushed its Google button 34px lower than the register card's.
   The form is a flex column, so moving the lost-password link after the
   social block (order) lifts the button into line without touching the
   surrounding spacing.
   ========================================================= */
.woocommerce-account:not(.logged-in) .woocommerce form.login > .woocommerce-LostPassword {
  order: 2;
  margin: 18px 0 0 !important;
}

/* =========================================================
   Warm sections → pure white (site-wide)
   .ps-bg-warm was #F5EDE2 and is used on 9 sections across
   Početna, Život bez idiota, 1-na-1 and O meni.
   ========================================================= */
.ps-bg-warm { background: #FFFFFF !important; }

/* =========================================================
   Headings: the lilac accent inside a heading was italic
   ("Upoznaj <em>Pozitivnu Stvarnost</em>"). Make it upright and bold
   everywhere, keeping the lilac colour.
   ========================================================= */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.ps-scope h1 em, .ps-scope h2 em, .ps-scope h3 em, .ps-scope h4 em,
.ps-section-head h2 em,
.ps-split-body h2 em,
.ps-page-hero h1 em,
.ps-hero h1 em,
.ps-final-cta h2 em,
.elementor-heading-title em {
  font-style: normal !important;
  font-weight: 700 !important;
}

/* =========================================================
   All headings bold (the plum Fraunces text was weight 400,
   and a few were explicitly 300). Applies site-wide.
   ========================================================= */
body h1, body h2, body h3, body h4,
.ps-scope h1, .ps-scope h2, .ps-scope h3, .ps-scope h4,
.ps-section-head h2,
.ps-split-body h2,
.ps-card h3,
.ps-final-cta h2,
.elementor-widget-heading .elementor-heading-title {
  font-weight: 700 !important;
}

/* these were deliberately light earlier — bring them in line */
.ps-form-card h3,
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce form.login h2,
.woocommerce-account .woocommerce form.register h2,
.woocommerce-account #customer_login h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.ps-faq-item summary {
  font-weight: 700 !important;
}

/* =========================================================
   Final CTA heading — all white, including the accent part
   (was cream + lilac). Applies to every page using .ps-final-cta:
   Početna, O meni, Život bez idiota.
   ========================================================= */
.ps-final-cta h2,
.ps-final-cta h2 em,
.ps-final-cta h2 span {
  color: #FFFFFF !important;
}

/* =========================================================
   Prva sekcija (hero) — bela pozadina umesto krem #FBF6F0.
   Hero je bio providan, pa se video body; sada ima svoju boju.
   ========================================================= */
.ps-hero { background: #FFFFFF !important; }

/* =========================================================
   FUTER — gornja traka (brend / meni / mreže) postaje bela,
   a sav sadržaj u njoj dobija boju #5C4068.
   Donja traka sa copyrightom ostaje šljiva.
   ========================================================= */
#Footer .footer_action {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Naziv brenda */
.ps-footer-brand span { color: #5C4068 !important; }

/* Logo je jednobojna silueta (#C0A1CE) na providnoj podlozi,
   pa ga maskom prebojavamo u #5C4068 — bez nove slike.
   Ako pregledač ne podržava mask, slika ostaje vidljiva kao i pre. */
.ps-footer-brand img {
  background-color: #5C4068;
  -webkit-mask-image: url('https://pozitivna-stvarnost.com/webinar/assets/divna-logo.png');
  mask-image: url('https://pozitivna-stvarnost.com/webinar/assets/divna-logo.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Linkovi u meniju futera */
.ps-footer-nav a,
.ps-footer-nav a:visited { color: #5C4068 !important; }
.ps-footer-nav a:hover { color: #8B6E9C !important; }

/* Ikonice mreža — iz svetle u tamnu varijantu, jer je podloga sada bela */
.ps-footer-social a {
  color: #5C4068 !important;
  background: rgba(92, 64, 104, 0.06) !important;
  border: 1px solid rgba(92, 64, 104, 0.22) !important;
}
.ps-footer-social a:hover {
  background: #5C4068 !important;
  border-color: #5C4068 !important;
  color: #FFFFFF !important;
}

/* Ispravka: kod <img> maska samo isecca oblik, a sama slika (lila silueta)
   se i dalje iscrtava preko background-color. Zamenjujemo sadržaj slike
   providnim pikselom, pa ostaje samo pozadina isecena maskom — dakle
   silueta u tačnoj boji #5C4068. */
.ps-footer-brand img {
  content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") !important;
  width: 36px;
  height: 36px;
  background-color: #5C4068 !important;
  -webkit-mask-image: url('https://pozitivna-stvarnost.com/webinar/assets/divna-logo.png') !important;
  mask-image: url('https://pozitivna-stvarnost.com/webinar/assets/divna-logo.png') !important;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* =========================================================
   FUTER — i donja traka (copyright) postaje bela.
   Ceo futer je sada beo, sav tekst i linkovi u #5C4068.
   Važi na celom sajtu (futer je jedinstven).
   ========================================================= */
#Footer {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-top: 1px solid rgba(92, 64, 104, 0.12) !important;
}

#Footer .footer_copy {
  border-top: 1px solid rgba(92, 64, 104, 0.12) !important;
}

#Footer .copyright,
#Footer .copyright * {
  color: #5C4068 !important;
}

#Footer a,
#Footer a:visited { color: #5C4068 !important; }
#Footer a:hover { color: #8B6E9C !important; }

#Footer h1, #Footer h2, #Footer h3, #Footer h4 { color: #5C4068 !important; }

/* dugme "nazad na vrh", ako je ukljuceno */
#Footer #back_to_top,
#Footer .footer_button {
  color: #5C4068 !important;
  background: rgba(92, 64, 104, 0.06) !important;
  border: 1px solid rgba(92, 64, 104, 0.22) !important;
}

/* Ikonice mreža u futeru — SVG umesto slova, isti izgled kao na
   webinar strani. Boja se nasleđuje od sidra (currentColor), pa
   prati i hover stanje. */
.ps-footer-social a { line-height: 0; }
.ps-footer-social svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  display: block;
}

/* =========================================================
   Uvećanje slika
   1) Široke položene fotografije (.ps-wide) bile su najniže na sajtu
      — kolona sa slikom je bila uža od kolone sa tekstom. Izjednačujemo ih.
   2) Hero fotografija na početnoj popunjava svoju kolonu.
   Pogođene su samo te dve grupe; uspravne fotografije ostaju iste.
   ========================================================= */

/* 1) sekcije u kojima stoji široka slika — dve jednake kolone */
.ps-split-grid:has(.ps-split-photo.ps-wide),
.ps-split-grid.ps-rev:has(.ps-split-photo.ps-wide) {
  grid-template-columns: 1fr 1fr !important;
}

/* 2) hero fotografija */
.ps-hero-grid { grid-template-columns: 1fr 1fr; }
.ps-hero-photo { max-width: 100%; }

@media (max-width: 900px) {
  .ps-hero-grid { grid-template-columns: 1fr; }
  .ps-hero-photo { max-width: 420px; }
  .ps-split-grid:has(.ps-split-photo.ps-wide),
  .ps-split-grid.ps-rev:has(.ps-split-photo.ps-wide) {
    grid-template-columns: 1fr !important;
  }
}


/* ============= Problems grid u split koloni (Zamisli sebe) ============= */
.ps-problems-grid.ps-problems-1col {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 24px 0 0;
}
.ps-problems-grid.ps-problems-1col .ps-problem { padding: 18px 22px; }
.ps-problems-grid.ps-problems-1col .ps-problem p { font-size: 16px; }