/*
 * Header: top bar, main row, nav row, mega menu, mobile drawer.
 * Spec: style guide 2.8 and mockup 1 (desktop 1440, mobile 390).
 * Breakpoints: mobile <768 · tablet 768–1199 (mobile pattern, search inline) · desktop ≥1200.
 * Off-scale mockup values are rounded to the nearest token, as the style guide says
 * (6→4/8, 10→12, 14→16, 22→24).
 */

/* ── Shared ────────────────────────────────────────────────────────── */
.site-header {
  position: relative;
  z-index: 30;
  background: var(--color-bg);
}

.icon {
  display: block;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.icon-btn:hover {
  background: var(--color-ghost-hover);
}

.site-logo {
  display: block;
  line-height: 0;
}

.site-logo__img {
  display: block;
  width: 100%;
  height: auto;
}

.count-badge {
  position: absolute;
  min-width: var(--badge-h);
  height: var(--badge-h);
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-surface);
  font: var(--fw-extrabold) var(--badge-fs) / var(--badge-h) var(--font-heading);
  text-align: center;
}

.count-badge[hidden] {
  display: none;
}

.count-badge--cart {
  background: var(--color-cta);
  color: var(--color-on-cta);
}

/* ── Top bar ───────────────────────────────────────────────────────── */
.topbar {
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.topbar :focus-visible {
  box-shadow: var(--focus-ring-on-ink);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: var(--topbar-h);
}

.topbar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.topbar .icon {
  width: var(--icon-xxs);
  height: var(--icon-xxs);
}

.topbar a {
  color: inherit;
  text-decoration: none;
}

.topbar a:hover {
  text-decoration: underline;
}

.topbar__tile {
  width: var(--topbar-tile);
  height: var(--topbar-tile);
  border-radius: var(--topbar-tile-radius);
  background: var(--tile-lime);
  transform: rotate(var(--tile-rotate-marker));
}

.topbar__contact,
.topbar__stores {
  display: none;
}

/* ── Main row ──────────────────────────────────────────────────────── */
.header-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "burger logo actions"
    "search search search";
  align-items: center;
  column-gap: var(--space-1);
  row-gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4); /* icon buttons carry their own 44px hit area */
}

.header-burger {
  grid-area: burger;
}

.header-logo {
  grid-area: logo;
  justify-self: center;
  width: var(--logo-w-mobile);
}

.header-search {
  grid-area: search;
  padding-inline: var(--space-1); /* 12 + 4 = 16px page padding */
}

.header-actions {
  grid-area: actions;
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-action--compare,
.header-action--account {
  display: none;
}

.header-action__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-round);
  color: var(--color-ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.header-action__link:hover {
  background: var(--color-ghost-hover);
}

.header-action__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-icon-box);
  height: var(--header-icon-box);
}

/* Visually hidden on mobile (icon-only); shown under the icon on desktop. */
.header-action__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.header-action .count-badge {
  top: var(--space-1);
  right: calc(var(--space-1) / 2);
}

/* ── Search ────────────────────────────────────────────────────────── */
.search-form {
  display: flex;
  align-items: center;
  height: var(--header-search-h);
  padding-inline: var(--space-1) var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.search-form:focus-within {
  box-shadow: var(--focus-ring);
}

.search-form .icon {
  width: var(--search-icon);
  height: var(--search-icon);
}

.search-form__icon {
  display: none;
  color: var(--color-muted);
}

.search-form__icon-btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}

.search-form__icon-btn:focus-visible {
  box-shadow: none; /* the whole field shows the ring */
}

.search-form__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--fs-body-m);
  text-overflow: ellipsis;
}

.search-form__input:focus,
.search-form__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.search-form__input::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.search-form__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-form__submit {
  display: none;
}

/* ── Tablet ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .header-main {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "burger logo search actions";
    column-gap: var(--space-4);
    padding: var(--space-4) var(--container-pad);
  }

  .header-logo {
    justify-self: start;
  }

  .header-search {
    padding-inline: 0;
  }

  .search-form {
    gap: var(--space-3);
    padding-inline: var(--space-6) var(--space-1);
  }

  .search-form__icon {
    display: flex;
  }

  .search-form__icon-btn {
    display: none;
  }

  .search-form__submit {
    display: flex;
    flex: none;
    align-items: center;
    height: var(--search-btn-h);
    padding-inline: var(--space-6);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-size: var(--fs-btn-s);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
  }

  .search-form__submit:hover {
    background: var(--color-ink-hover);
  }
}

/* ── Desktop ───────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .topbar__inner {
    justify-content: space-between;
  }

  .topbar__contact,
  .topbar__stores {
    display: flex;
  }

  .header-main {
    grid-template-columns: var(--logo-col) minmax(0, 1fr) auto;
    grid-template-areas: "logo search actions";
    column-gap: var(--space-10);
    padding-block: var(--space-6);
  }

  .header-burger {
    display: none;
  }

  .header-logo {
    width: var(--logo-w);
  }

  .header-action--compare,
  .header-action--account {
    display: block;
  }

  .header-action__link {
    flex-direction: column;
    gap: var(--space-1);
    width: var(--header-action-w);
    height: auto;
    padding-block: var(--space-1);
    border-radius: var(--radius-age);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
  }

  .header-action__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .header-action .count-badge {
    top: 0;
    right: var(--space-3);
  }
}

/* ── Nav row (desktop) ─────────────────────────────────────────────── */
.header-nav {
  display: none;
}

@media (min-width: 1200px) {
  .header-nav {
    position: relative;
    display: block;
    border-block: var(--border-hairline);
  }
}

.header-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--nav-h);
}

.mega-toggle {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  height: var(--nav-pill-h);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: var(--fs-btn-s);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.mega-toggle:hover {
  background: var(--color-ink-hover);
}

.mega-toggle .icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.mega-toggle__icon--close,
.mega-toggle[aria-expanded="true"] .mega-toggle__icon--open {
  display: none;
}

.mega-toggle[aria-expanded="true"] .mega-toggle__icon--close {
  display: block;
}

.primary-nav {
  flex: 1;
  min-width: 0;
}

/* overflow: hidden for the priority nav; padding keeps focus rings visible. */
.primary-menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: calc(var(--space-2) * -1);
  padding: var(--space-2);
  overflow: hidden;
  list-style: none;
}

.primary-menu__item {
  flex: none;
}

.primary-menu__item[hidden] {
  display: none;
}

.primary-menu__item--promo {
  margin-inline-start: auto;
}

.primary-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--nav-pill-h);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

.primary-menu__link:hover {
  background: var(--color-ghost-hover);
}

.primary-menu__link:active {
  background: var(--color-ghost-active);
}

.primary-menu__link.is-current {
  background: var(--tint-yellow);
}

.primary-menu__item--promo .primary-menu__link {
  font-family: var(--font-heading);
  font-size: var(--fs-btn-s);
  font-weight: var(--fw-bold);
}

.promo-tile {
  padding: var(--tile-pad-sm);
  border-radius: var(--radius-tile-sm);
  background: var(--tile-orange);
  font-family: var(--font-heading);
  font-size: var(--fs-badge);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  transform: rotate(var(--tile-rotate-badge));
}

/* ── Mega menu ─────────────────────────────────────────────────────── */
.mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--color-scrim);
}

.mega-scrim[hidden] {
  display: none;
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 31;
  padding-top: var(--space-3);
}

.mega[hidden] {
  display: none;
}

.mega__box {
  position: relative;
  display: grid;
  grid-template-columns: var(--mega-cats-w) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.mega__cats {
  display: flex;
  flex-direction: column;
  gap: var(--mega-row-gap);
  min-height: 0;
  overflow-y: auto; /* the box is capped at the screen height (header.js) */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
  margin: 0;
  padding: var(--space-5) var(--space-3);
  background: var(--color-bg);
  list-style: none;
}

.mega__cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--mega-row-h);
  padding: var(--space-2) var(--space-4); /* long names wrap to a second line */
  line-height: var(--lh-ui);
  border-radius: var(--radius-age);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.mega__cat.is-active > .mega__cat-link {
  background: var(--tint-yellow);
}

.mega__chevron {
  color: var(--color-subtle);
}

/* Panels sit in the right column of .mega__box; JS sets the box height to fit. */
.mega__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--mega-cats-w);
  display: none;
}

.mega__panel {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mega__cat.is-active > .mega__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.mega__cat.is-active > .mega__panel--promo {
  grid-template-columns: minmax(0, 1fr) var(--mega-promo-w);
}

.mega__main {
  padding: var(--space-7) var(--space-8) var(--space-8);
}

.mega__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.mega__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--mega-title-fs);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
}

.mega__count {
  color: var(--color-muted);
  font-size: var(--fs-body-s);
}

.mega__all {
  margin-inline-start: auto;
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
}

.mega__all:hover {
  text-decoration: underline;
}

.mega__subs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega__sub {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--mega-card-inset);
  border: var(--border-chip);
  border-radius: var(--mega-card-radius);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out);
}

.mega__sub:hover {
  border-color: var(--color-ink);
}

.mega__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mega-thumb-h);
  overflow: hidden;
  border-radius: var(--mega-thumb-radius);
  background: var(--tint-blue);
}

.mega__subs li:nth-child(6n + 2) .mega__thumb { background: var(--tint-orange); }
.mega__subs li:nth-child(6n + 3) .mega__thumb { background: var(--tint-yellow); }
.mega__subs li:nth-child(6n + 4) .mega__thumb { background: var(--tint-teal); }
.mega__subs li:nth-child(6n + 5) .mega__thumb { background: var(--tint-green); }
.mega__subs li:nth-child(6n)     .mega__thumb { background: var(--tint-lime); }

/* Placeholder when a category has no image: its name on the tint, plus a small
   rotated tile in the matching logo colour (text stays ink for AA contrast). */
.mega__thumb-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  text-align: center;
  overflow-wrap: anywhere;
}

.mega__thumb-tile {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--topbar-tile);
  height: var(--topbar-tile);
  border-radius: var(--topbar-tile-radius);
  background: var(--tile-blue);
  transform: rotate(var(--tile-rotate-marker));
}

.mega__subs li:nth-child(6n + 2) .mega__thumb-tile { background: var(--tile-orange); }
.mega__subs li:nth-child(6n + 3) .mega__thumb-tile { background: var(--tile-yellow); }
.mega__subs li:nth-child(6n + 4) .mega__thumb-tile { background: var(--tile-teal); }
.mega__subs li:nth-child(6n + 5) .mega__thumb-tile { background: var(--tile-green); }
.mega__subs li:nth-child(6n)     .mega__thumb-tile { background: var(--tile-lime); }

.mega__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.mega__sub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-inline: var(--space-1);
}

.mega__sub-name {
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
}

.mega__sub-count {
  color: var(--color-muted);
  font-size: var(--fs-caption);
}

.mega__ages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.mega__ages-label {
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.mega__promo {
  padding: var(--space-5);
  border-inline-start: var(--border-hairline);
}

.mega__promo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  border-radius: var(--mega-promo-radius);
}

.mega__promo-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
}

.mega__promo-text {
  margin: 0;
  color: var(--color-text-2);
  font-size: var(--fs-small);
}

.mega__promo-media {
  flex: 1;
  min-height: var(--mega-promo-media-min);
  overflow: hidden;
  border-radius: var(--radius-age);
}

.mega__promo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega__promo-link {
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  text-underline-offset: var(--space-1);
}

/* ── Tiles shared by the mega menu and drawer ──────────────────────── */
.age-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.age-chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-tile);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-extrabold);
  text-decoration: none;
}

.age-chip:hover {
  text-decoration: underline;
}

.mega .age-chips li:nth-child(odd) .age-chip  { transform: rotate(calc(var(--tile-rotate-range) * -1)); }
.mega .age-chips li:nth-child(even) .age-chip { transform: rotate(var(--tile-rotate-range)); }

.age-chip--yellow { background: var(--tile-yellow); }
.age-chip--lime   { background: var(--tile-lime); }
.age-chip--orange { background: var(--tile-orange); }
.age-chip--teal   { background: var(--tile-teal); }
.age-chip--blue   { background: var(--tile-blue); }
.age-chip--green  { background: var(--tile-green); }

.badge-tile {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-tile);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-extrabold);
  transform: rotate(var(--tile-rotate-badge));
}

.badge-tile--sale { background: var(--color-sale); }
.badge-tile--new  { background: var(--color-new); }

.tint--yellow { background: var(--tint-yellow); }
.tint--orange { background: var(--tint-orange); }
.tint--lime   { background: var(--tint-lime); }
.tint--green  { background: var(--tint-green); }
.tint--teal   { background: var(--tint-teal); }
.tint--blue   { background: var(--tint-blue); }

/* ── Mobile drawer (native <dialog>) ───────────────────────────────── */
.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(var(--drawer-w), calc(100vw - var(--space-10)));
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--color-bg);
  color: var(--color-ink);
}

.drawer[open] {
  display: flex;
  flex-direction: column;
  animation: kz-drawer-in var(--dur-slow) var(--ease-out);
}

.drawer::backdrop {
  background: var(--color-scrim-mobile);
  animation: kz-fade-in var(--dur-slow) var(--ease-out);
}

html:has(.drawer[open]) {
  overflow: hidden;
}

@keyframes kz-drawer-in {
  from { transform: translateX(-100%); }
}

@keyframes kz-fade-in {
  from { opacity: 0; }
}

@keyframes kz-sub-in {
  from { transform: translateX(100%); }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hairline);
}

.site-logo--drawer {
  width: var(--logo-w-drawer);
}

.drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}

.drawer__close .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.drawer__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-2) var(--space-4) var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--drawer-row-h);
  padding: 0;
  border: 0;
  border-bottom: var(--border-hairline);
  background: none;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--drawer-row-fs);
  font-weight: var(--fw-bold);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.drawer__chev {
  color: var(--color-subtle);
}

.drawer__count {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}

.drawer__sub {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: var(--space-2) var(--space-4) var(--space-5);
  overflow-y: auto;
  background: var(--color-bg);
  animation: kz-sub-in var(--dur-base) var(--ease-out);
}

.drawer__sub[hidden] {
  display: none;
}

/* Only the open level scrolls. */
.drawer__body:has(> nav .drawer__sub:not([hidden])) {
  overflow: hidden;
}

.drawer__back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--drawer-row-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.age-chips--drawer {
  gap: var(--space-2);
  padding-block: var(--space-4);
}

.age-chips--drawer .age-chip {
  padding: var(--space-2) var(--space-3);
}

.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-bold);
}

.drawer__foot p {
  margin: 0;
}

.drawer__foot a {
  color: inherit;
  text-decoration: none;
}

.drawer__foot a:hover {
  text-decoration: underline;
}

.drawer__contact {
  color: var(--color-text-2);
}

@media (min-width: 1200px) {
  .drawer {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer[open],
  .drawer::backdrop,
  .drawer__sub {
    animation: none;
  }
}

/* ── Search suggestions (guide 2.2 search bar, proposed) ───────────── */
.search-form {
  position: relative;
}

.search-form__clear {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: none;
  color: var(--color-subtle);
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.search-form__clear[hidden] {
  display: none;
}

.search-form.is-suggesting {
  border-bottom-color: transparent;
  border-radius: var(--radius-band) var(--radius-band) 0 0;
}

.search-suggest {
  position: absolute;
  top: 100%;
  right: calc(var(--border-w-strong) * -1);
  left: calc(var(--border-w-strong) * -1);
  z-index: 35;
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  border: var(--border-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  background: var(--color-surface);
}

.search-suggest[hidden] {
  display: none;
}

.search-suggest__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-suggest__item {
  display: grid;
  grid-template-columns: var(--tap-min) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-age);
  color: var(--color-ink);
  text-decoration: none;
}

.search-suggest__item:hover,
.search-suggest__item.is-active,
.search-suggest__all.is-active {
  background: var(--tint-yellow);
}

.search-suggest__thumb {
  display: block;
  width: var(--tap-min);
  height: var(--tap-min);
  overflow: hidden;
  border-radius: var(--radius-tile-lg);
  background: var(--color-image-bg);
}

.search-suggest__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.search-suggest__name {
  overflow: hidden;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest__price {
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-extrabold);
  white-space: nowrap;
}

.search-suggest__all {
  padding: var(--space-3);
  border-radius: var(--radius-age);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

/* ── Product page header on phones (mockup 2 mobile): ‹ · logo · search · cart ─ */
.header-back,
.header-search-toggle {
  display: none;
}

@media (max-width: 767px) {
  .header-main--product {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "back logo stoggle actions"
      "search search search search";
  }

  .header-main--product .header-burger,
  .header-main--product .header-action--wishlist {
    display: none;
  }

  .header-main--product .header-back {
    display: inline-flex;
    grid-area: back;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    text-decoration: none;
  }

  .js .header-main--product .header-search-toggle {
    display: inline-flex;
    grid-area: stoggle;
  }

  .header-main--product .header-search-toggle .icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }

  /* The search row opens from the icon (without JS it stays visible) */
  .js .header-main--product:not(.is-search-open) .header-search {
    display: none;
  }
}

/* Header: the name tile instead of "Профил" when logged in (mockup 3) */
.header-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-icon-box);
  height: var(--header-icon-box);
  border-radius: var(--radius-tile-lg);
  background: var(--tile-teal);
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  transform: rotate(var(--tile-rotate-badge));
}