/* Header v2 (stil Moonpig): desktop = logo | cautare mare | Remindere / Cont / Cos; randul 2 = categorii + modal de tara + Magazine; mobil = hamburger | logo | iconite,
   cautare full-width + sertar de meniu. LIVE din 2026-11-06 (incarcat din menu.php). Doc: docs/claude/header-v2.md */
/* comune: input + buton de cautare (desktop randul 1 / mobil randul 2) */
.sg-hsearch-input { width: 100%; height: 50px; border: 2px solid #1d2b33; border-radius: 999px; padding: 0 60px 0 22px; font-size: 15px; color: #1d2b33; background: #fff; box-shadow: none; outline: 0; transition: box-shadow .15s, border-color .15s; }
.sg-hsearch-input::placeholder { color: #6b7a84; }
.sg-hsearch-input:focus { border-color: #1f8f97; box-shadow: 0 0 0 3px #e3f5f6; }
.sg-hsearch-btn { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #e7505a; color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.sg-hsearch-btn:hover { background: #d33d47; }
.sg-hsearch .search-suggestions-dropdown, .sg-msearch .search-suggestions-dropdown { top: calc(100% + 8px) !important; border-radius: 14px !important; border-color: #dfe8ea !important; box-shadow: 0 14px 40px rgba(31, 80, 90, .16) !important; max-height: 420px !important; }
.sg-hbadge { position: absolute; top: -8px; left: calc(50% + 6px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #e7505a; color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid #fff; box-sizing: content-box; }

/* modalul de tara (desktop; pe mobil ramane lista veche #country-modal-sites din sertar) */
.sg-cmodal { z-index: 10090 !important; } /* peste header-ul fixat (9995) si peste sertarul de meniu de pe mobil (10070) */
.sg-cmodal .modal-dialog { max-width: 860px; width: calc(100% - 30px); }
.sg-cmodal .modal-content { border-radius: 16px !important; padding: 30px 34px 34px; position: relative; border: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.sg-cmodal .sg-cmodal-close { position: absolute; right: 14px; top: 10px; font-size: 34px; line-height: 1; opacity: .7; }
.sg-cmodal-title { text-align: center; font-size: 24px; font-weight: 700; color: #1d2b33; margin: 4px 0 6px; text-transform: none; letter-spacing: 0; }
.sg-cmodal-text { text-align: center; color: #54656f; font-size: 14px; margin: 0 0 22px; }
.sg-cmodal-sub { font-size: 15px; font-weight: 700; color: #54656f; margin: 22px 0 10px; text-transform: none; letter-spacing: 0; }
.sg-cmodal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sg-copt { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px; border: 2px solid #dfe8ea; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 700; color: #1d2b33; background: #fff; transition: border-color .15s; }
.sg-copt:hover { border-color: #9fc9cd; }
.sg-copt.on { border-color: #e7505a; }
.sg-copt input { position: absolute; opacity: 0; width: 0; height: 0; }
.sg-copt-radio { flex: 0 0 22px; width: 22px; height: 22px; border: 2px solid #8a9aa3; border-radius: 50%; position: relative; background: #fff; }
.sg-copt input:checked ~ .sg-copt-radio { border-color: #1f8f97; }
.sg-copt input:checked ~ .sg-copt-radio::after { content: ""; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #1f8f97; }
.sg-copt-flag { font-size: 20px; line-height: 1; }
.sg-copt-flag img { width: 22px; height: auto; vertical-align: middle; }
.sg-cmodal-done { display: block; width: 60%; margin: 26px auto 0; padding: 14px 20px; border: 0; border-radius: 10px; background: #7cb342; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.sg-cmodal-done:hover { background: #6ca236; }
@media (max-width: 767px) { .sg-cmodal-grid { grid-template-columns: minmax(0, 1fr); } .sg-cmodal .modal-content { padding: 24px 16px; } .sg-cmodal-done { width: 100%; } }

/* header fixat (tema: body.c-layout-header-fixed[.c-layout-header-mobile-fixed]): marginea paginii = inaltimea reala a header-ului, pusa in --sg-header-h
   de scriptul din menu.php imediat dupa header (sincron, fara flicker); valorile de rezerva = header cu topbar promo (desktop 179 / mobil 152) */
.c-layout-header-fixed.c-layout-header-topbar .c-layout-page, .c-layout-header-fixed.single-menu-line .c-layout-page { margin-top: var(--sg-header-h, 179px) !important; }
@media (max-width: 991px) { /* pe mobil inaltimea e cunoscuta: 69 (logo + iconite) + 46 (cautarea) = 115px, + 41px topbar-ul promo (masurat: 156) (body.c-layout-header-topbar); JS-ul doar confirma */
  .c-layout-header-fixed.c-layout-header-mobile-fixed .c-layout-page { margin-top: var(--sg-header-h, 115px) !important; }
  .c-layout-header-fixed.c-layout-header-mobile-fixed.c-layout-header-topbar .c-layout-page { margin-top: var(--sg-header-h, 156px) !important; }
}

/* mobil + tableta (< 992px), ca la Moonpig: randul 1 = hamburger | logo | iconite; randul 2 = cautarea pe toata latimea; lupa veche (overlay) nu mai e */
@media (max-width: 991px) {
  .c-layout-header .c-brand { height: auto !important; display: flex !important; align-items: center; margin: 14px 15px 10px !important; }
  .c-layout-header .c-brand > .c-logo { flex: 1 1 auto; line-height: 0; }
  .c-layout-header .c-brand > .c-hor-nav-toggler { float: none !important; margin: 0 12px 0 0 !important; }
  .sg-micons { display: flex; align-items: center; gap: 22px; margin-left: auto; padding-right: 12px; } /* loc pentru bulina cosului, sa nu fie taiata la margine */
  .sg-mico { position: relative; display: inline-block; color: #3a3f45 !important; font-size: 22px; line-height: 1; text-decoration: none !important; }
  .sg-mico.has-dot::after { content: ""; position: absolute; top: -3px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #e7505a; border: 2px solid #fff; }
  .sg-mico .sg-hbadge { left: auto; right: -11px; top: -11px; font-size: 10px; min-width: 14px; height: 15px; line-height: 15px; padding: 0 3px; border-width: 1.5px; } /* sus-dreapta, langa sacosa, nu peste ea */
  .c-layout-header .c-navbar.c-bg-black .sg-mico { color: #fff !important; }
  .c-layout-header .c-navbar { height: auto !important; min-height: 65px; } /* tema fixeaza 65px pe mobil: randul de cautare iesea sub header (umbra la mijloc) si ramanea gol sub el */
  .c-layout-header .c-topbar { height: auto !important; } /* tema: 45px pe mobil, mesajul promo are 41px -> 4px de fundal alb al header-ului (linie alba pe meniul dark) */
  .c-layout-header:has(.c-navbar.c-bg-black) { background: #000; } /* meniu dark: fundalul header-ului negru, nu alb */
  .sg-msearch { position: relative; clear: both; margin: 0 15px 10px; }
  .sg-msearch-field { position: relative; flex: 1 1 auto; }
  .sg-msearch .sg-hsearch-input { height: 44px; padding-left: 18px; font-size: 16px; } /* 16px: iOS nu face zoom la focus */
  .sg-msearch .sg-hsearch-btn { width: 34px; height: 34px; font-size: 14px; }
  .sg-msearch-back, .sg-msearch-clear { display: none; background: none; border: 0; color: #1d2b33; cursor: pointer; }
  .sg-msearch .search-suggestions-dropdown { display: none !important; } /* pe mobil sugestiile apar doar in ecranul intreg de mai jos */
  body:not(.sg-search-open) .c-layout-header .c-navbar.c-bg-black .sg-msearch .sg-hsearch-input { background: #111; border-color: #444; color: #fff; } /* meniu dark: cautarea inchisa, nu alba (ecranul intreg ramane alb) */
  body:not(.sg-search-open) .c-layout-header .c-navbar.c-bg-black .sg-msearch .sg-hsearch-input::placeholder { color: #9aa5ad; }
  /* pagina de produs (header.sg-search-collapsed): fara randul de cautare, in schimb lupa in randul de iconite deschide ecranul intreg */
  .sg-msearch-open { display: none; }
  .c-layout-header.sg-search-collapsed .sg-msearch { display: none; }
  .c-layout-header.sg-search-collapsed .sg-msearch-open { display: inline-block; }
  body.sg-search-open .c-layout-header.sg-search-collapsed .sg-msearch { display: flex; }
  /* meniul pe mobil: sertar din stanga (ca la Moonpig), construit din JS din mega-meniu; meniul inline al temei nu se mai afiseaza */
  .c-layout-header .c-navbar .c-mega-menu { display: none !important; }
  .sg-drawer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10070; display: none; }
  body.sg-drawer-open { overflow: hidden; }
  body.sg-drawer-open .sg-drawer { display: block; }
  .sg-drawer-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(29, 43, 51, .5); opacity: 0; transition: opacity .25s ease; }
  .sg-drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 86%; max-width: 400px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0, 0, 0, .25); transform: translateX(-100%); transition: transform .28s cubic-bezier(.2, .8, .3, 1); }
  body.sg-drawer-in .sg-drawer-bg { opacity: 1; }
  body.sg-drawer-in .sg-drawer-panel { transform: translateX(0); }
  /* panourile (nivelurile) gliseaza: noul intra din dreapta, vechiul iese spre stanga; la „inapoi” invers */
  .sg-drawer-body { position: relative; overflow: hidden; }
  .sg-dl-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .26s; }
  .sg-dl-panel.enter-right { transform: translateX(100%); }
  .sg-dl-panel.enter-left { transform: translateX(-30%); opacity: 0; }
  .sg-dl-panel.leave-left { transform: translateX(-30%); opacity: 0; }
  .sg-dl-panel.leave-right { transform: translateX(100%); }
  .sg-drawer-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e5e9ec; min-height: 56px; flex: 0 0 auto; }
  .sg-drawer-close { width: 40px; height: 40px; border: 0; background: none; font-size: 32px; line-height: 1; color: #1d2b33; cursor: pointer; }
  .sg-drawer-logo img { height: 28px; width: auto; display: block; }
  .sg-drawer-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sg-dl { list-style: none; margin: 0; padding: 0; }
  .sg-dl > li > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #eef1f3; color: #1d2b33; font-size: 16px; font-weight: 700; text-decoration: none; line-height: 1.3; }
  .sg-dl > li > a.leaf { font-weight: 400; font-size: 15px; }
  .sg-dl > li > a .fa-angle-right { font-size: 22px; color: #1d2b33; flex: 0 0 auto; }
  .sg-dl > li > a .label { margin-left: 6px; font-size: 10px; vertical-align: middle; }
  .sg-dl > li > a b { font-weight: 700; }
  .sg-dl-sub-head { display: flex; align-items: center; padding: 10px 8px; border-bottom: 1px solid #e5e9ec; font-weight: 700; font-size: 16px; color: #1d2b33; }
  .sg-dl-back { width: 40px; height: 40px; border: 0; background: none; font-size: 26px; color: #1d2b33; cursor: pointer; flex: 0 0 auto; }
  .sg-dl-sub-head span { flex: 1 1 auto; text-align: center; padding-right: 40px; }
  .sg-drawer-foot { flex: 0 0 auto; border-top: 1px solid #e5e9ec; padding: 8px 10px; display: block; background: #f6f9f9; }
  .sg-drawer-foot:empty { display: none; }
  .sg-drawer-foot a.sg-drawer-country { display: flex; align-items: center; gap: 8px; padding: 10px 8px; font-size: 15px; font-weight: 700; color: #1d2b33; text-decoration: none; }
  .sg-drawer-foot a.sg-drawer-country .country-flag { font-size: 20px; line-height: 1; }
  .sg-drawer-foot a.sg-drawer-country .fa-angle-down { margin-left: auto; font-size: 20px; }
  /* butoanele Filtre / Ordoneaza de pe listari (mobil), in acelasi stil cu header-ul nou: pastile albe cu contur, nu verzi */
  #sub-nav-button-bar .option-button { background: #fff !important; color: #1d2b33 !important; border: 2px solid #1d2b33 !important; border-radius: 999px !important; font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: 0; padding: 10px 16px; box-shadow: none !important; display: flex; align-items: center; justify-content: space-between; }
  #sub-nav-button-bar .option-button .dropdownicon { width: 10px; height: 10px; border-right: 2px solid #1d2b33; border-bottom: 2px solid #1d2b33; transform: rotate(45deg); margin: -4px 4px 0 8px; float: none !important; background: none !important; }
  #sub-nav-button-bar .option-button[aria-expanded="true"] .dropdownicon { transform: rotate(-135deg); margin-top: 4px; }
  #sub-nav-button-bar .option-button[aria-expanded="true"] { background: #f3f7f7 !important; }
  /* ecran intreg la focus (ca la Moonpig): body.sg-search-open */
  body.sg-search-open { overflow: hidden; }
  body.sg-search-open .sg-msearch { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10060; background: #fff; margin: 0; display: flex; flex-direction: column; }
  body.sg-search-open .sg-msearch-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 4px; border-bottom: 1px solid #e5e9ec; flex: 0 0 auto; }
  body.sg-search-open .sg-msearch-back { display: grid; place-items: center; width: 40px; height: 44px; font-size: 20px; }
  body.sg-search-open .sg-msearch-clear { display: grid; position: absolute; right: 44px; top: 0; height: 44px; width: 32px; place-items: center; font-size: 26px; line-height: 1; color: #6b7a84; }
  body.sg-search-open .sg-msearch .sg-hsearch-input { padding-right: 84px; }
  body.sg-search-open .sg-msearch .search-suggestions-dropdown { display: block !important; position: static !important; flex: 1 1 auto; overflow-y: auto; max-height: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  body.sg-search-open .sg-msearch .search-suggestions-dropdown a { font-size: 15px !important; padding: 9px 0 !important; }
  body.sg-search-open .sg-msearch .suggestions-current-search { background: #f3f5f7 !important; border-radius: 10px; margin: 10px 15px 0; }
  .c-layout-header .c-navbar .sg-nav-right { display: none; }
  .c-layout-header .c-mega-menu .c-search-toggler-wrapper { display: none; }
}

@media (min-width: 992px) {
  .sg-msearch, .sg-micons { display: none; } /* cautarea si iconitele de mobil nu apar pe desktop (altfel ieseau in stanga randului de categorii) */
  .c-layout-header .c-navbar .c-brand { display: none !important; } /* blocul de mobil (hamburger + logo mic) e gol pe desktop, dar marginile lui faceau randul 2 de 100px */
  .c-layout-header .c-topbar-brand.sg-hdr .sg-hdr-row { display: flex; align-items: center; gap: 36px; padding-top: 12px; padding-bottom: 12px; }
  .c-layout-header .c-topbar-brand.sg-hdr .sg-hdr-row::before, .c-layout-header .c-topbar-brand.sg-hdr .sg-hdr-row::after { content: none; }
  .c-layout-header .c-topbar-brand.sg-hdr .c-brand { float: none; flex: 0 0 auto; margin: 0; }

  /* cautarea */
  .sg-hsearch { position: relative; flex: 1 1 auto; max-width: 720px; margin: 0; }
  .sg-hsearch .search-suggestions-dropdown h4 { letter-spacing: .4px; }

  /* iconitele cu eticheta */
  .sg-hdr-icons { display: flex; align-items: flex-start; gap: 30px; flex: 0 0 auto; margin-left: auto; position: relative; }
  .sg-hdr-icons .c-cart-menu { top: calc(100% + 12px) !important; right: -6px !important; border-radius: 12px; box-shadow: 0 14px 40px rgba(31, 80, 90, .16); } /* mini-cosul mutat aici din JS (menu_test.php), sub iconita Cos */
  .sg-hicon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #1d2b33 !important; font-size: 12px; font-weight: 600; line-height: 1.1; text-decoration: none !important; text-transform: none; letter-spacing: 0; min-width: 52px; }
  .sg-hicon i { font-size: 24px; line-height: 1; }
  .sg-hicon:hover { color: #e7505a !important; }
  .sg-hicon.has-dot::after { content: ""; position: absolute; top: -3px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: #e7505a; border: 2px solid #fff; }
  .c-layout-header .c-topbar-brand.sg-hdr.c-bg-black .sg-hicon { color: #fff !important; }
  .c-layout-header .c-topbar-brand.sg-hdr.c-bg-black .sg-hicon.has-dot::after, .c-layout-header .c-topbar-brand.sg-hdr.c-bg-black .sg-hbadge { border-color: #000; }
  .c-layout-header .c-topbar-brand.sg-hdr.c-bg-black .sg-hsearch-input { border-color: #444; background: #111; color: #fff; }

  /* randul 2: lupa si cosul vechi doar pe mobil; dreapta = Magazine, tara, limba (flex, altfel meniul de categorii ocupa tot randul si dreapta cadea sub el) */
  .c-layout-header .c-navbar .sg-nav-togglers { display: none; }
  .c-layout-header .c-navbar .c-navbar-wrapper { display: flex; align-items: center; flex-wrap: wrap; }
  /* randul de categorii mai compact (cautarea nu mai e aici): litere fara spatiere, padding mic, inaltime ~60px */
  .c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-link { letter-spacing: .2px !important; padding: 20px 6px 22px 6px !important; min-height: 0 !important; font-size: 13px !important; }
  .c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-btn-icon { margin: 12px 0 10px !important; }
  /* la scroll (body.c-page-on-scroll, header fixat) tema/custom_bg pun alt padding cu !important si selector mai specific -> linkurile se lateau si dreapta cadea pe rand nou */
  .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-navbar .c-mega-menu .nav.navbar-nav > li > .c-link { letter-spacing: .2px !important; padding: 20px 6px 22px 6px !important; min-height: 0 !important; font-size: 13px !important; }
  .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-navbar .c-mega-menu .nav.navbar-nav > li > .c-btn-icon { margin: 12px 0 10px !important; }
  .c-layout-header .c-navbar .c-navbar-wrapper::before, .c-layout-header .c-navbar .c-navbar-wrapper::after { content: none; }
  .c-layout-header .c-navbar .c-navbar-wrapper > .c-mega-menu.c-pull-left { float: none; flex: 1 1 auto; min-width: 0; }
  .c-layout-header .c-navbar .sg-nav-right { float: none; flex: 0 0 auto; margin: 0 0 0 auto; } /* margin-left:auto = la dreapta si cand cade pe rand nou */
  .sg-nav-right-list > li.lang-selector { display: none; } /* limbile sunt in dropdown-ul de tara */
  .sg-nav-right-list .dropdown-menu .sg-dd-head { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #6b7a84; padding: 6px 16px 2px; }
  .sg-nav-right-list .dropdown-menu > li.active > a { background: #e3f5f6; color: #1f8f97; }
  .sg-nav-right-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .sg-nav-right-list > li { position: relative; }
  .sg-nav-right-list > li > a { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px !important; font-size: 12px !important; font-weight: 600; color: #3a3f45; border-radius: 999px; text-transform: none; letter-spacing: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; white-space: nowrap; }
  .sg-nav-right-list > li > a:hover, .sg-nav-right-list > li.open > a { color: #e7505a !important; background: #f6f9f9 !important; }
  .sg-nav-right-list .sg-deliver-label { display: none; } /* „Livrare in” nu incape langa meniul de categorii de pe .ro; steagul + codul sunt suficiente */
  .sg-nav-right-list .dropdown-menu { right: 0; left: auto; top: 100%; margin-top: 4px; border-radius: 12px; border: 1px solid #dfe8ea; box-shadow: 0 14px 40px rgba(31, 80, 90, .16); padding: 6px 0; min-width: 220px; }
  .sg-nav-right-list .dropdown-menu > li > a { padding: 8px 16px; font-size: 13px; }
  .c-layout-header .c-navbar.c-bg-black .sg-nav-right-list > li > a { color: #ddd; }
  .c-layout-header .c-navbar.c-bg-black .sg-nav-right-list > li > a:hover { background: #222 !important; }
}