/* ════════════════════════════════════════════════

   0. LOGO — înlocuiește textul cu imagine

   ════════════════════════════════════════════════ */

.site-title {

  background-image: none !important;

  background-size: contain !important;

  background-repeat: no-repeat !important;

  background-position: center center !important;

  color: transparent !important;

  font-size: 0 !important;

  display: block !important;

  width: auto !important;

  height: auto !important;

  line-height: 1 !important;

}

/* Desktop — logo stânga, nav dreapta */

@media (min-width: 768px) {

  .site-main-header-inner-wrap {

    position: relative !important;

    justify-content: space-between !important;

    align-items: center !important;

    min-height: 120px !important;

  }

  .site-header-main-section-left {

    position: static !important;

    transform: none !important;

    flex: 0 0 auto !important;

    pointer-events: auto !important;

  }

  .site-header-main-section-right {

    position: relative !important;

    z-index: 2 !important;

    flex: 0 0 auto !important;

  }

}

/* Mobil — 20% mai mic decât desktop */

@media (max-width: 767px) {

  .site-title {

    width: auto !important;

    height: auto !important;

  }

}



/* ════════════════════════════════════════════════

   1. HEADER MOBIL — hamburger stânga, logo centru

   ════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .site-main-header-inner-wrap.site-header-row-has-sides {

    justify-content: center !important;

    position: relative !important;

  }

  /* Secțiunea dreapta (hamburger) → absolut stânga */

  .site-header-main-section-right {

    position: absolute !important;

    left: 12px !important;

    right: auto !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    flex: 0 0 auto !important;

  }

  /* Ascunde desktop nav links pe mobil (rămâne doar toggle-ul) */

  .site-header-main-section-right .header-navigation,

  .site-header-main-section-right .site-header-item:not(.site-header-item-navgation-popup-toggle) {

    display: none !important;

  }

  /* Logo — absolut centrat în header, indiferent de hamburger */

  .site-header-main-section-left {

    position: absolute !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    flex: none !important;

  }

  /* Hamburger — normal flow stânga */

  .site-header-main-section-right {

    position: static !important;

    left: auto !important;

    top: auto !important;

    transform: none !important;

    flex: 0 0 44px !important;

  }

  /* Header row — space-between cu hamburger stânga */

  .site-main-header-inner-wrap.site-header-row-has-sides {

    justify-content: flex-start !important;

  }

}

/* ════════════════════════════════════════════════

   2. REDESIGN KADENCE MOBILE DRAWER

   ════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Overlay mai închis */

  #mobile-drawer .drawer-overlay {

    background: rgba(0,0,0,.5) !important;

  }

  /* Panel drawer — mai îngust, clean */

  #mobile-drawer .drawer-inner {

    background: #fff !important;

    width: min(82vw, 300px) !important;

    max-width: 300px !important;

    box-shadow: -4px 0 24px rgba(0,0,0,.12) !important;

  }

  /* Header drawer — verde PureOrganics */

  #mobile-drawer .drawer-header {

    background: #007A5E !important;

    padding: 0 16px !important;

    min-height: 60px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    border-bottom: none !important;

    flex-shrink: 0 !important;

  }

  /* logo injectat via ::before din secțiunea 0 — fără duplicat text aici */

  /* Buton close — cerc alb transparent */

  #mobile-drawer .menu-toggle-close.drawer-toggle {

    background: rgba(255,255,255,.18) !important;

    color: #fff !important;

    border: none !important;

    border-radius: 50% !important;

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    padding: 0 !important;

    flex-shrink: 0 !important;

    transition: background 150ms !important;

  }

  #mobile-drawer .menu-toggle-close.drawer-toggle:hover {

    background: rgba(255,255,255,.3) !important;

  }

  /* Conținut drawer */

  #mobile-drawer .drawer-content { padding: 0 !important; }

  #mobile-drawer .mobile-menu-container,

  #mobile-drawer .drawer-menu-container { padding: 6px 0 32px !important; }

  /* ── Toate link-urile din nav (selector larg — prinde orice structură Kadence) ── */

  #mobile-drawer .mobile-navigation a {

    color: #2E3531 !important;

    text-decoration: none !important;

    font-family: 'Manrope', sans-serif !important;

    transition: background 120ms, color 120ms !important;

  }

  /* ── Top level: wrapper drawer-nav-drop-wrap ── */

  #mobile-drawer .mobile-navigation .drawer-nav-drop-wrap {

    display: flex !important;

    align-items: stretch !important;

    border-bottom: 1px solid #F0F5F3 !important;

  }

  #mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > a {

    flex: 1 !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    color: #2E3531 !important;

    padding: 14px 6px 14px 18px !important;

    min-height: 50px !important;

    display: flex !important;

    align-items: center !important;

  }

  #mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > a:hover {

    background: #E8F4F0 !important; color: #007A5E !important;

  }

  /* Top-level fără children (link simplu direct în li) */

  #mobile-drawer .mobile-navigation > ul > .menu-item:not(.menu-item-has-children) > a {

    font-size: 15px !important;

    font-weight: 700 !important;

    color: #2E3531 !important;

    padding: 14px 18px !important;

    min-height: 50px !important;

    display: flex !important;

    align-items: center !important;

    border-bottom: 1px solid #F0F5F3 !important;

  }

  /* ── Sub-items ── */

  #mobile-drawer .mobile-navigation .sub-menu { background: #FAFCFB !important; }

  #mobile-drawer .mobile-navigation .sub-menu .menu-item > a {

    font-size: 13px !important;

    font-weight: 500 !important;

    color: #6B7280 !important;

    padding: 11px 18px 11px 30px !important;

    min-height: 44px !important;

    display: flex !important;

    align-items: center !important;

    border-bottom: 1px solid #F0F5F3 !important;

  }

  #mobile-drawer .mobile-navigation .sub-menu .menu-item > a:hover {

    background: #E8F4F0 !important; color: #007A5E !important;

  }

  /* ── Item activ ── */

  #mobile-drawer .mobile-navigation .current-menu-item > a,

  #mobile-drawer .mobile-navigation .current-menu-ancestor .drawer-nav-drop-wrap > a {

    color: #007A5E !important;

  }

  /* ── Ordine meniu: Produse, Sănătate, Știința, Despre noi, Ghiduri ── */

  /* Flex DOAR pe top-level ul — sub-meniurile rămân cu comportamentul Kadence */

  #mobile-drawer .mobile-menu-container > ul {

    display: flex !important;

    flex-direction: column !important;

  }

  #mobile-drawer .mobile-navigation .menu-item-139 { order: 1 !important; }  /* Produse */

  #mobile-drawer .mobile-navigation .menu-item-436 { order: 2 !important; }  /* Formule */

  #mobile-drawer .mobile-navigation .menu-item-141 { order: 3 !important; }  /* Sănătate */

  #mobile-drawer .mobile-navigation .menu-item-336 { order: 4 !important; }  /* BioCORE® */

  #mobile-drawer .mobile-navigation .menu-item-142 { order: 5 !important; }  /* Știința */

  #mobile-drawer .mobile-navigation .menu-item-143 { order: 6 !important; }  /* Ghiduri */

  #mobile-drawer .mobile-navigation .menu-item-144 { order: 7 !important; }  /* Despre */

  /* ── Ghiduri — aliniat identic cu top-level items (no .drawer-nav-drop-wrap) ── */

  #mobile-drawer .mobile-navigation .menu-item-143 > a {

    display: flex !important;

    align-items: center !important;

    padding: 14px 18px !important;

    min-height: 50px !important;

    font-family: 'Manrope', sans-serif !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    color: #2E3531 !important;

    text-decoration: none !important;

    border-bottom: 1px solid #F0F5F3 !important;

    box-sizing: border-box !important;

    width: 100% !important;

  }

  #mobile-drawer .mobile-navigation .menu-item-143 > a:hover {

    background: #E8F4F0 !important;

    color: #007A5E !important;

  }

  /* ── Toggle buton chevron ── */

  #mobile-drawer .drawer-sub-toggle {

    background: none !important;

    border: none !important; border-left: 1px solid #F0F5F3 !important;

    color: #9CA3AF !important;

    cursor: pointer !important;

    padding: 0 14px !important;

    display: flex !important;

    align-items: center !important;

    transition: color 150ms !important;

    flex-shrink: 0 !important;

  }

  #mobile-drawer .drawer-sub-toggle:hover { color: #007A5E !important; }

}

/* ════════════════════════════════════════════════

   2B. DESKTOP NAV — stilizat ca drawer mobil

   ════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* Header background — alb pur */

  #masthead,

  .site-main-header-wrap .site-header-row-container-inner {

    background: #ffffff !important;

  }

  /* Top-level links */

  .main-navigation .primary-menu-container > ul > li.menu-item > a,

  .main-navigation .primary-menu-container > ul > li.menu-item > .nav-drop-title-wrap {

    font-family: 'Manrope', sans-serif !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    color: #2E3531 !important;

    padding: 7px 12px !important;

    border-radius: 6px !important;

    transition: background 120ms, color 120ms !important;

    text-decoration: none !important;

  }

  .main-navigation .primary-menu-container > ul > li.menu-item > a:hover {

    color: #007A5E !important;

    background: #E8F4F0 !important;

  }

  .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,

  .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a {

    color: #007A5E !important;

  }

  /* Dropdown submenu — stil ca sub-meniu mobil */

  .header-navigation .header-menu-container ul ul.sub-menu {

    background: #fff !important;

    border: 1px solid #F0F5F3 !important;

    border-radius: 10px !important;

    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;

    padding: 6px 0 !important;

    min-width: 220px !important;

  }

  .header-navigation .header-menu-container ul ul li.menu-item {

    border-bottom: 1px solid #F0F5F3 !important;

    border-radius: 0 !important;

  }

  .header-navigation .header-menu-container ul ul li.menu-item:last-child {

    border-bottom: none !important;

  }

  .header-navigation .header-menu-container ul ul li.menu-item > a {

    font-family: 'Manrope', sans-serif !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    color: #6B7280 !important;

    padding: 10px 18px !important;

    width: auto !important;

    transition: background 120ms, color 120ms !important;

  }

  .header-navigation .header-menu-container ul ul li.menu-item > a:hover {

    background: #E8F4F0 !important;

    color: #007A5E !important;

    border-radius: 0 !important;

  }

  .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {

    color: #007A5E !important;

    background: #E8F4F0 !important;

    border-radius: 0 !important;

  }

  /* Ordine identică cu mobilul: Produse, Sănătate, Știința, Despre noi, Ghiduri */

  #primary-menu { display: flex !important; }

  /* Ordine: Produse / Formule / Sănătate / BioCORE / Știința / Ghiduri / Despre */
  #primary-menu > .menu-item-139 { order: 1 !important; }  /* Produse */

  #primary-menu > .menu-item-436 { order: 2 !important; }  /* Formule */

  #primary-menu > .menu-item-141 { order: 3 !important; }  /* Sănătate */

  #primary-menu > .menu-item-336 { order: 4 !important; }  /* BioCORE® */

  #primary-menu > .menu-item-142 { order: 5 !important; }  /* Știința */

  #primary-menu > .menu-item-143 { order: 6 !important; }  /* Ghiduri */

  #primary-menu > .menu-item-144 { order: 7 !important; }  /* Despre */

}

/* ════════════════════════════════════════════════

   3. BOTTOM NAV

   ════════════════════════════════════════════════ */

.po-bottom-nav {

  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;

  height: 60px;

  background: #fff; border-top: 1px solid #E5EDE9;

  display: flex; align-items: stretch;

  padding-bottom: env(safe-area-inset-bottom, 0px);

  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);

}

@media (min-width: 768px) { .po-bottom-nav { display: none; } }

body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 768px) { body { padding-bottom: 0; } }

.po-bottom-nav.is-hidden {

  transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));

}

.po-nav-item {

  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;

  gap: 3px; font-size: 10px; font-weight: 600;

  font-family: 'Manrope', sans-serif;

  color: #6B7280; text-decoration: none;

  padding: 6px 2px;

  -webkit-tap-highlight-color: transparent;

  min-height: 48px; touch-action: manipulation;

  border: none; background: none; cursor: pointer;

  transition: color 150ms;

}

.po-nav-item svg { flex-shrink: 0; }

.po-nav-item:hover, .po-nav-item.is-active { color: #007A5E; }

.po-nav-item.po-nav-quiz { color: #007A5E; font-weight: 800; }

/* Cart badge */

.po-nav-cart-wrap { position: relative; display: flex; align-items: center; justify-content: center; }

.po-nav-cart-badge {

  position: absolute; top: -5px; right: -9px;

  background: #e53935; color: #fff;

  font-size: 9px; font-weight: 800; font-family: 'Manrope', sans-serif;

  min-width: 16px; height: 16px; border-radius: 8px;

  padding: 0 3px;

  display: flex; align-items: center; justify-content: center;

  line-height: 1; pointer-events: none;

  border: 1.5px solid #fff;

}

.po-nav-cart-badge:empty { display: none; }

/* ════════════════════════════════════════════════

   4. SĂNĂTATE BOTTOM SHEET

   ════════════════════════════════════════════════ */

.po-sanatate-sheet {

  position: fixed; inset: 0; z-index: 150;

}

.po-sanatate-sheet__backdrop {

  position: absolute; inset: 0;

  background: rgba(0,0,0,.45); opacity: 0;

  transition: opacity 280ms ease;

}

.po-sanatate-sheet.is-open .po-sanatate-sheet__backdrop { opacity: 1; }

.po-sanatate-sheet.is-closing .po-sanatate-sheet__backdrop { opacity: 0; }

.po-sanatate-sheet__panel {

  position: absolute; bottom: 0; left: 0; right: 0;

  background: #fff; border-radius: 16px 16px 0 0;

  max-height: 78vh; overflow-y: auto; overscroll-behavior: contain;

  transform: translateY(100%);

  transition: transform 300ms cubic-bezier(.25,.8,.25,1);

}

.po-sanatate-sheet.is-open .po-sanatate-sheet__panel { transform: translateY(0); }

.po-sanatate-sheet.is-closing .po-sanatate-sheet__panel { transform: translateY(100%); }

.po-sanatate-sheet__handle {

  display: flex; justify-content: center; padding: 12px 0 6px;

}

.po-sanatate-sheet__handle-bar { width: 36px; height: 4px; border-radius: 2px; background: #E5EDE9; }

.po-sanatate-sheet__header {

  display: flex; align-items: center; justify-content: space-between;

  padding: 0 16px 12px;

  border-bottom: 1px solid #F0F5F3;

}

.po-sanatate-sheet__title {

  font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 800;

  color: #2E3531; margin: 0;

}

.po-sanatate-sheet__close {

  display: flex; align-items: center; justify-content: center;

  width: 44px; height: 44px; border-radius: 50%; /* touch target min 44px */

  border: none; background: none; cursor: pointer;

  color: #9CA3AF; -webkit-tap-highlight-color: transparent;

  transition: background 120ms;

}

.po-sanatate-sheet__close:focus-visible { outline: 2px solid #007A5E; outline-offset: 2px; }

.po-sanatate-sheet__close:hover { background: #F0F5F3; }

.po-sanatate-cats {

  display: grid; grid-template-columns: 1fr 1fr;

  gap: 8px; padding: 12px 16px 8px;

}

.po-sanatate-cat {

  display: flex; align-items: center; justify-content: center;

  padding: 11px 10px; border-radius: 10px; text-align: center;

  background: #F8FBFA; border: 1.5px solid #E5EDE9;

  text-decoration: none; color: #2E3531;

  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;

  line-height: 1.35; min-height: 48px;

  -webkit-tap-highlight-color: transparent; touch-action: manipulation;

  transition: background 150ms, border-color 150ms, color 150ms;

}

.po-sanatate-cat:hover, .po-sanatate-cat:active {

  background: #E8F4F0; border-color: #007A5E; color: #00624B;

}

.po-sanatate-sheet__footer {

  padding: 8px 16px;

  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));

}

.po-sanatate-sheet__all {

  display: block; padding: 13px; border-radius: 8px;

  background: #007A5E; color: #fff;

  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700;

  text-align: center; text-decoration: none;

  -webkit-tap-highlight-color: transparent; touch-action: manipulation;

  transition: background 150ms;

}

.po-sanatate-sheet__all:hover, .po-sanatate-sheet__all:active { background: #00624B; color: #fff; }

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  .po-bottom-nav, .po-sanatate-sheet__backdrop,

  .po-sanatate-sheet__panel { transition: none !important; }

}

/* ── Quiz Overlay ── */
.po-quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.po-quiz-overlay[hidden] { display: none !important; }
.po-quiz-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10001;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #e53e3e;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  -webkit-tap-highlight-color: transparent;
}
.po-quiz-frame {
  width: 100%;
  height: 100%;
  border: none;
  flex: 1;
}
.po-quiz-loader {
  position: absolute;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.po-quiz-loader.is-hidden { display: none; }
.po-quiz-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: poQuizSpin .8s linear infinite;
}
@keyframes poQuizSpin { to { transform: rotate(360deg); } }
/* Confirm sheet */
.po-quiz-confirm {
  position: absolute;
  inset: 0;
  z-index: 10002;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: flex-end;
}
.po-quiz-confirm[hidden] { display: none !important; }
.po-quiz-confirm__sheet {
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 24px 20px 32px;
  width: 100%;
  text-align: center;
}
.po-quiz-confirm__title {
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #2E3531;
  margin: 0 0 6px;
}
.po-quiz-confirm__sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 20px;
}
.po-quiz-confirm__btn {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
}
.po-quiz-confirm__btn--keep { background: #007A5E; color: #fff; }
.po-quiz-confirm__btn--leave { background: #F3F4F6; color: #374151; }