/*
 * Хиро страницы магазина (resources/views/shop.blade.php). Общая основа — css/hero.css.
 * Подключается до main.css — поэтому селекторы начинаются с .public-site.
 *
 * Размер H1 — ступень --display-l (главная — 62px), длинное название переносится, а не уменьшается.
 */
.public-site .shop-hero__content { padding-block: 32px 48px; }
.shop-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: start;
}
.shop-hero__grid:not(:has(.aeo-summary)) { grid-template-columns: minmax(0, 1fr); }

/* ---------- крошки ---------- */
.public-site .shop-hero .page-breadcrumbs {
  --breadcrumbs-color: var(--hh-muted);
  --breadcrumbs-current: var(--hh-fg);
  --breadcrumbs-hover: var(--hh-fg);
  --breadcrumbs-weight: 700;
  --breadcrumbs-leading: 1.4;
  margin: 0 0 24px;
}
.shop-hero .page-breadcrumbs__list { flex-wrap: nowrap; overflow: hidden; }

/* ---------- H1 ---------- */
.public-site .shop-hero__title {
  font-size: var(--display-l);
}
.shop-hero__line { display: block; }
.shop-hero__line--accent { text-wrap: balance; }
.shop-hero__name { color: var(--brand, #c96da9); }
/*
 * Срок — часть H1 (совпадает с <title>), без капсулы. Отдельной строкой под названием, вплотную (8px),
 * чтобы читался как подпись к заголовку, а не как отдельный блок.
 */
.shop-hero__period {
  display: block; margin-top: 8px; color: var(--hh-muted); font: 700 14px/1.2 var(--font-mono); letter-spacing: .06em; white-space: nowrap;
}

/* ---------- AI-советчик: стекло, только текст ---------- */
.public-site .aeo-summary--hero {
  min-width: 0; margin: 0; padding: 24px 20px 20px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 22px;
  background: rgb(255 255 255 / 6%); color: var(--hh-fg); box-shadow: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.public-site .aeo-summary--hero .aeo-summary__header { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
/* значок советчика — градиент бренда в фиолетовый, звезда ровно по центру */
.public-site .aeo-summary--hero .aeo-summary__icon {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(135deg, #c96da9 0%, #7c5cff 100%); color: #fff; font-size: 14px; line-height: 1;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 6px 16px -6px rgb(124 92 255 / 70%);
}
/* звезда — SVG, а не символ ✦: символ рисуется запасным шрифтом и выглядит по-разному */
.public-site .aeo-summary--hero .aeo-summary__icon svg { display: block; width: 16px; height: 16px; }
.public-site .aeo-summary--hero .aeo-summary__eyebrow { font: 800 12px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
/* вкладки: на всю ширину, по числу предложений; при одном предложении их нет */
.public-site .aeo-summary--hero .aeo-summary__dots { display: flex; gap: 6px; margin-top: 16px; padding: 0; overflow: visible; }
.public-site .aeo-summary--hero .aeo-summary__dot {
  flex: 1 1 0; min-width: 0; height: 34px; min-height: 0; padding: 0 10px; border: 0; border-radius: 99px;
  background: rgb(255 255 255 / 7%); color: rgb(255 255 255 / 72%);
  font: 700 12px/1 var(--font-mono); text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer;
  transition: background .2s, color .2s;
}
.public-site .aeo-summary--hero .aeo-summary__dot:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.public-site .aeo-summary--hero .aeo-summary__dot.is-active { background: #fff; color: var(--text-main, #0d0e12); }
.public-site .aeo-summary--hero .aeo-summary__dot:focus-visible { outline: 2px solid var(--brand, #c96da9); outline-offset: 2px; }
.public-site .aeo-summary--hero .aeo-summary__items { margin-top: 12px; }
.public-site .aeo-summary--hero .aeo-summary__text { margin: 0; min-height: 0; font: 400 14px/1.6 var(--font-sans); color: rgb(255 255 255 / 76%); }
/* код — часть текста; один тап выделяет его целиком, копировать удобно и без кнопки */
.public-site .aeo-summary--hero .aeo-summary__code {
  display: inline-block; padding: 1px 7px; border-radius: 6px; background: rgb(201 109 169 / 24%); color: #f3bde0;
  font: 700 13px/1.5 var(--font-mono); letter-spacing: .06em; -webkit-user-select: all; user-select: all; cursor: copy;
}
.public-site .aeo-summary--hero .aeo-summary__details { color: #f3bde0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- адаптив ---------- */
@media (max-width: 1024px) {
  .shop-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .public-site .aeo-summary--hero { max-width: 640px; }
}
@media (max-width: 767px) {
  .public-site .shop-hero__content { padding-block: 24px; }
  .shop-hero__grid { gap: 24px; }
  .public-site .shop-hero .page-breadcrumbs { margin-bottom: 16px; }
  .shop-hero__period { font-size: 12px; }
  .public-site .aeo-summary--hero { padding: 16px; border-radius: 20px; }
  .public-site .aeo-summary--hero .aeo-summary__dot { padding: 0 6px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-hero *, .shop-hero *::before, .shop-hero *::after { animation: none !important; transition: none !important; }
}