/*
 * Общие части тёмного хиро: главная (index.blade.php) и внутренние страницы (shop.blade.php).
 * Оболочка и токены, стеклянная шапка, строка поиска #hh-search, летающие знаки (js/hero-marks.js).
 * Подключается до main.css — поэтому селекторы начинаются с .public-site.
 */
.public-site :is(.home-hero, .shop-hero) {
  --hh-bg: #17111a;
  --hh-fg: #fff;
  --hh-muted: rgb(255 255 255 / 64%);
  --hh-line: rgb(255 255 255 / 12%);
  --hh-chip: rgb(255 255 255 / 7%);
  --hh-chip-hover: rgb(255 255 255 / 14%);
  --hh-mark-o: .14;
  position: relative; isolation: isolate;
  padding-top: 24px; border-radius: 0 0 60px 60px;
  background: var(--hh-bg); color: var(--hh-fg);
}
:is(.home-hero__bg, .shop-hero__bg) { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }

.public-site :is(.home-hero__title, .shop-hero__title) {
  margin: 0; color: var(--hh-fg); font-weight: 800; line-height: .98;
  text-transform: uppercase; letter-spacing: var(--display-tracking);
}

/* ---------- стеклянная шапка хиро (header--hero) ---------- */
.public-site .header--hero {
  --header-account-height: 48px;
  --bell-badge-bg: #e4dce6;
  --bell-badge-fg: #17111a;
  --header-account-bg: rgb(255 255 255 / 6%);
  --header-account-border: 1px solid rgb(255 255 255 / 14%);
  --header-account-fg: #fff;
  --header-account-active-bg: rgb(255 255 255 / 12%);
}
.public-site .header--hero .header__inner {
  position: relative; z-index: 1;
  height: 68px; padding: 8px 10px 8px 20px; gap: 24px;
  background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 14%); box-shadow: none;
  color: #fff;
}
/* Blur the surface while keeping fixed menus anchored to the viewport. */
.header--hero .header__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.public-site .header--hero .header__logo img { height: 40px; max-width: none; }
.public-site .header--hero .header__nav { display: flex; gap: 4px; margin-left: auto; }
.public-site .header--hero .header__nav a { padding: 10px 14px; border-radius: 99px; color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; transition: background .2s; }
.public-site .header--hero .header__nav a:hover { background: rgb(255 255 255 / 10%); }
.public-site .header--hero .header__account-visible.header__account-pill--login { height: var(--header-account-height); padding: 0 24px; background: #fff; color: var(--text-main, #0d0e12); }
.public-site .header--hero .header__account-pill--login:hover { background: #e9e9ee; }
.public-site .header--hero .header__account-pill-label { font: 600 14px/1.4 var(--font-display); text-transform: none; }
.public-site .header--hero .header__account-pill-arrow { display: none; }
.public-site .header--hero #burger {
  --line: rgb(255 255 255 / 82%);
  width: 46px; height: 46px;
  transition: background .2s, border-color .2s, transform .2s;
}
.public-site .header--hero :is(#burger, .header__search-toggle) { background: var(--header-account-bg); border: var(--header-account-border); }
.public-site .header--hero :is(#burger, .header__search-toggle):hover { background: var(--header-account-active-bg); }
.public-site .header--hero :is(#burger, .header__search-toggle)[aria-expanded="true"] { --line: var(--text-main, #0d0e12); color: var(--line); background: #fff; border-color: #fff; }
/* средняя полоска — фоном самого .burger__inner, крайние — :before / :after из main.css */
.public-site .header--hero .burger__inner {
  width: 18px; height: 12px;
  background: linear-gradient(var(--line), var(--line)) left center / 18px 1.6px no-repeat;
  transition: background-size .2s ease;
}
.public-site .header--hero .burger__inner:before,
.public-site .header--hero .burger__inner:after {
  width: 18px; height: 1.6px; background: var(--line);
  transition: transform .28s ease-in-out, width .25s ease, background-color .2s;
}
.public-site .header--hero .burger__inner:after { width: 10px; }
.public-site .header--hero #burger:hover .burger__inner:after { width: 18px; }
/* открыто: средняя исчезает, крайние сходятся в крестик */
.public-site .header--hero #burger[aria-expanded="true"] .burger__inner { background-size: 0 1.6px; }
.public-site .header--hero #burger[aria-expanded="true"] .burger__inner:after { width: 18px; }
.public-site .header--hero #burger[aria-expanded="true"] .burger__inner:before { transform: translateY(5.2px) rotate(45deg); }
.public-site .header--hero #burger[aria-expanded="true"] .burger__inner:after { transform: translateY(-5.2px) rotate(-45deg); }

/* ---------- поиск ---------- */
.hh-search { position: relative; z-index: 5; max-width: 620px; margin-top: 32px; }
.hh-search__box {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 6px rgb(201 109 169 / 22%), 0 24px 60px -20px rgb(0 0 0 / 45%);
}
.hh-search__icon { flex: none; width: 22px; height: 22px; margin-left: 12px; color: #98a2b3; }
.public-site .hh-search input {
  flex: 1; min-width: 0; height: 56px; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent;
  font: 600 18px/1 var(--font-sans); color: var(--text-main, #0d0e12);
}
.hh-search input::placeholder { color: #98a2b3; }
.public-site .hh-search #search-reset { position: static; transform: none; flex: none; width: 32px; height: 32px; color: #98a2b3; }
.public-site .hh-search__btn {
  flex: none; height: 56px; padding: 0 28px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--brand, #c96da9); color: #fff;
  font: 600 15px/1 var(--font-display); letter-spacing: -.01em;
  transition: background .2s, transform .15s;
}
.public-site .hh-search__btn:hover { background: var(--brand-hover, #b55b95); }
.hh-search__btn:active { transform: scale(.97); }
.public-site .hh-search #search-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); width: auto; margin: 0; color: var(--text-main, #0d0e12);
}
.public-site .hh-search .search-list__inner { padding: 8px; border-radius: 20px; box-shadow: 0 24px 60px -12px rgb(0 0 0 / 35%); }
.public-site .hh-search .search-list__item > a { border-radius: 14px; }
.public-site .hh-search .search-list__item + .search-list__item > a { border-top: 0; }
.public-site .hh-search .search-list__item-name { color: var(--text-main, #0d0e12); font-weight: 600; }
.public-site .hh-search .search-list__empty { padding: 12px 14px; font-size: 14px; color: #667085; }
.public-site .hh-search .search-list__item-name strong { color: var(--brand-hover, #b55b95); }

/* ---------- летающие знаки ---------- */
.hh-marks { position: absolute; inset: 0; }
.hh-mark { position: absolute; left: 0; top: 0; opacity: calc(var(--hh-mark-o) * var(--k, 1)); will-change: transform; transition: opacity .5s; }
.hh-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hh-mark .eye { transform-box: fill-box; transform-origin: center; }
.hh-mark .pupil { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.hh-mark.is-wink, .hh-mark.is-spin { opacity: calc(var(--hh-mark-o) * 2.6); }
.hh-mark.is-wink .eye { animation: hh-blink 1.2s ease-in-out; }
.hh-mark.is-spin svg { animation: hh-turn 1.3s cubic-bezier(.6, 0, .2, 1); }
@keyframes hh-blink { 0%, 100% { transform: scaleY(1); } 18%, 28% { transform: scaleY(.06); } 44% { transform: scaleY(1); } 58%, 66% { transform: scaleY(.06); } 80% { transform: scaleY(1); } }
@keyframes hh-turn { to { transform: rotate(360deg); } }

@media (max-width: 1024px) {
  .public-site .header--hero .header__nav { display: none; }
}
@media (max-width: 767px) {
  .public-site :is(.home-hero, .shop-hero) { padding-top: 12px; border-radius: 0 0 36px 36px; }
  .public-site .header--hero .header__inner { height: 64px; gap: 8px; padding: 8px 8px 8px 16px; }
  /* на главной — полный светлый логотип и на телефоне */
  .public-site .header--hero .header__logo--desktop { display: block; min-width: 0; flex: 0 1 auto; margin-right: auto; }
  .public-site .header--hero .header__logo--mobile { display: none; }
  .public-site .header--hero .header__logo img { width: auto; height: 38px; max-width: 100%; object-fit: contain; object-position: left center; }
  .hh-search__box { flex-wrap: wrap; border-radius: 18px; }
  .public-site .hh-search input { height: 48px; font-size: 16px; }
  .public-site .hh-search__btn { width: 100%; height: 50px; }
}

/* ---------- кнопки-иконки шапки: лупа, колокольчик, кабинет — круги одного размера ---------- */
.public-site .header--hero .header__search-toggle {
  display: grid; place-items: center; flex: none; width: var(--header-account-height); height: var(--header-account-height); padding: 0;
  border-radius: 50%; color: var(--header-account-fg); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.header__search-toggle svg { width: 19px; height: 19px; }
.header__search-close, .header__search-toggle[aria-expanded="true"] .header__search-open { display: none; }
.header__search-toggle[aria-expanded="true"] .header__search-close { display: block; }
/* ---------- поиск по лупе: строка #hh-search выезжает под шапкой ---------- */
.hero-search-panel { position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 2; }
.hero-search-panel[hidden] { display: none; }
.hero-search-panel .hh-search { max-width: none; margin: 0; animation: hero-drop .28s cubic-bezier(.2, .7, .2, 1); }
.hero-search-scrim {
  position: fixed; inset: 0; z-index: 0; padding: 0; border: 0; cursor: default;
  background: rgb(10 7 12 / 55%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: hero-fade .25s ease;
}
.hero-search-scrim[hidden] { display: none; }
/* хиро поднимается над страницей, чтобы затемнение накрыло и контент ниже */
.is-hero-search-open :is(.home-hero, .shop-hero),
:is(.home-hero, .shop-hero):has(.notification-panel:not([hidden])) { z-index: 40; }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-drop { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1024px) {
  /* навигации нет — лупа и остальные кнопки прижимаются вправо */
  .public-site .header--hero .header__search-toggle { margin-left: auto; }
}
@media (max-width: 767px) {
  .public-site .header--hero { --header-account-height: 46px; }
  .hero-search-panel { top: calc(100% + 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-search-panel .hh-search, .hero-search-scrim { animation: none; }
}