/* =============================================================================
   Layout — skip link, announcement, header, navigation, footer, mobile bar.
   ========================================================================== */

.ho-skip-link {
  position: absolute;
  top: -60px;
  inset-inline-start: var(--ho-4);
  z-index: 2000;
  padding: 10px var(--ho-5);
  border-radius: 0 0 var(--ho-r-sm) var(--ho-r-sm);
  background: var(--ho-ink-900);
  color: #fff;
  font-weight: 700;
  transition: top var(--ho-fast);
}
.ho-skip-link:focus { top: 0; color: #fff; }

/* A short page — an empty cart, the thank-you screen — used to leave the
   footer floating in the middle of the window. The body is a column and the
   main region takes the slack, so the footer always sits on the bottom edge. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.ho-main { display: flex; flex-direction: column; flex: 1 0 auto; }
.ho-main > * { flex: 1 0 auto; }
.ho-footer, .ho-footer--minimal { flex: none; margin-top: auto !important; }

/* -------------------------------------------------------- announcement --- */

.ho-announce {
  background: linear-gradient(90deg, var(--ho-amber-600), var(--ho-amber-500) 55%, var(--ho-gold));
  color: #fff;
  font-size: var(--ho-fs-sm);
}
.ho-announce[hidden] { display: none; }

.ho-announce__inner {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  min-height: 38px;
}

.ho-announce__text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}
.ho-announce__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ho-announce__text > span:last-child,
.ho-announce__text > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ho-announce__phone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-weight: 700;
}

.ho-announce__close {
  flex: none;
  display: inline-flex;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
}
.ho-announce__close:hover { background: rgba(255, 255, 255, .3); }

/* --------------------------------------------------------------- header -- */

.ho-header {
  position: sticky;
  top: 0;
  z-index: var(--ho-z-header);
  background: var(--ho-surface);
  border-bottom: 1px solid var(--ho-line);
  border-radius: 0 0 var(--ho-header-r) var(--ho-header-r);
}
/* Once the page is scrolled the header stops being a solid slab and becomes
   frosted, so the content passing underneath stays faintly visible — the same
   treatment as the dock, so the two edges of the screen match. */
.ho-header.is-stuck {
  box-shadow: var(--ho-shadow-md);
  background: color-mix(in srgb, var(--ho-surface) 74%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom-color: color-mix(in srgb, var(--ho-line) 70%, transparent);
}
.ho-header.is-stuck .ho-nav {
  background: transparent;
  border-top-color: color-mix(in srgb, var(--ho-line-soft) 60%, transparent);
}

/* Without backdrop-filter a translucent header is just hard to read. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ho-header.is-stuck { background: var(--ho-surface); }
  .ho-header.is-stuck .ho-nav { background: var(--ho-surface); }
}

.ho-header__inner {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  min-height: 68px;
}

@media (min-width: 992px) {
  .ho-header__inner { gap: var(--ho-6); min-height: 78px; }
}

.ho-header__burger { flex: none; }

@media (max-width: 767px) {
  .ho-header__actions { margin-inline-start: auto; }
}

/* Brand ------------------------------------------------------------------ */

.ho-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ho-2);
  flex: none;
  color: var(--ho-ink-900);
}
.ho-brand:hover { color: var(--ho-ink-900); }

.ho-brand__mark { display: inline-flex; flex: none; }
.ho-brand__logo { width: auto; max-height: 46px; }

.ho-brand__text { display: flex; flex-direction: column; line-height: 1.25; }

.ho-brand__name {
  font-size: var(--ho-fs-lg);
  font-weight: 900;
  letter-spacing: -.02em;
}
h1.ho-brand__name { margin: 0; font-size: var(--ho-fs-lg); }

.ho-brand__tag {
  font-size: var(--ho-fs-xs);
  font-weight: 500;
  color: var(--ho-ink-400);
}

@media (max-width: 480px) {
  .ho-brand__tag { display: none; }
  .ho-brand__name { font-size: var(--ho-fs-md); }
}

/* Search ------------------------------------------------------------------ */

.ho-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 560px;
  /* Sits in the middle of the header rather than next to the logo. */
  margin-inline: auto;
}

.ho-search__form {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  /* Logical, so the button hugs the far edge in RTL as well as LTR: the text
     side gets the breathing room, the button side only the 4px frame. */
  padding-block: 4px;
  padding-inline-start: var(--ho-4);
  padding-inline-end: 4px;
  border: 1.5px solid var(--ho-line);
  border-radius: var(--ho-r-pill);
  background: var(--ho-cream-50);
  transition: border-color var(--ho-fast), box-shadow var(--ho-fast), background var(--ho-fast);
}
.ho-search__form:focus-within {
  border-color: var(--ho-amber-400);
  background: var(--ho-surface);
  box-shadow: 0 0 0 4px var(--ho-amber-50);
}

.ho-search__icon { flex: none; color: var(--ho-ink-400); }

/* Inside the sheet the form is the row, not a fixed-width box beside the
   cancel button, so the field gets the whole width it is given. */
.ho-search__form--sheet {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.ho-search__form--sheet .ho-search__input { min-width: 0; }

input.ho-search__input,
.ho-search__input {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 0;
  border: 0 !important;
  background: transparent;
  font-size: var(--ho-fs-md);
  box-shadow: none !important;
}
input.ho-search__input:focus { border: 0 !important; box-shadow: none !important; }
.ho-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ho-search__submit {
  flex: none;
  min-height: 38px;
  padding: 0 var(--ho-5);
  border: 0;
  border-radius: var(--ho-r-pill);
  background: linear-gradient(135deg, var(--ho-amber-400), var(--ho-amber-500));
  color: #fff;
  font-family: inherit;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--ho-fast);
}
.ho-search__submit:hover { filter: brightness(1.06); }

.ho-search__results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 8px);
  z-index: 40;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--ho-2);
  border: 1px solid var(--ho-line);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
  box-shadow: var(--ho-shadow-lg);
}
.ho-search__results[hidden] { display: none; }

/*
 * In the bottom sheet the same element is not a dropdown but the sheet's whole
 * body. Left absolute it resolved `top: calc(100% + 8px)` against the sheet
 * panel and dropped every suggestion, chip and banner below the fold, which is
 * why the search sheet looked empty.
 */
.ho-sheet .ho-search__results {
  position: static;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.ho-search__hint {
  margin: var(--ho-2) var(--ho-2) var(--ho-1);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  color: var(--ho-ink-500);
}

.ho-search__row {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-2);
  border-radius: var(--ho-r-sm);
  color: var(--ho-ink-800);
  transition: background var(--ho-fast);
}
.ho-search__row:hover,
.ho-search__row.is-active { background: var(--ho-cream-100); color: var(--ho-ink-900); }

.ho-search__row img {
  flex: none;
  width: 46px; height: 46px;
  border-radius: var(--ho-r-xs);
  object-fit: cover;
  background: var(--ho-cream-100);
}

.ho-search__row-body { flex: 1 1 auto; min-width: 0; }
.ho-search__row-title {
  display: block;
  font-size: var(--ho-fs-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ho-search__row-price { font-size: var(--ho-fs-sm); font-weight: 800; color: var(--ho-amber-600); }
.ho-search__row-price del { color: var(--ho-ink-300); font-weight: 500; }

.ho-search__all {
  display: block;
  margin-top: var(--ho-1);
  padding: var(--ho-3);
  border-radius: var(--ho-r-sm);
  background: var(--ho-cream-100);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  text-align: center;
}

.ho-search__empty {
  padding: var(--ho-6) var(--ho-4);
  text-align: center;
  color: var(--ho-ink-500);
  font-size: var(--ho-fs-sm);
}

.ho-header__mobile-search { padding-bottom: var(--ho-3); }

.ho-search__trigger {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  width: 100%;
  min-height: 42px;
  padding: 0 var(--ho-4);
  border: 1.5px solid var(--ho-line);
  border-radius: var(--ho-r-pill);
  background: var(--ho-cream-50);
  color: var(--ho-ink-400);
  font-family: inherit;
  font-size: var(--ho-fs-sm);
  text-align: start;
  cursor: pointer;
}

/* Header actions ---------------------------------------------------------- */

.ho-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  flex: none;
}

.ho-header__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 var(--ho-3);
  border-radius: var(--ho-r-pill);
  color: var(--ho-ink-700);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  transition: background var(--ho-fast), color var(--ho-fast);
}
.ho-header__action:hover { background: var(--ho-cream-100); color: var(--ho-ink-900); }

.ho-header__action--cart {
  background: linear-gradient(135deg, var(--ho-amber-400), var(--ho-amber-500));
  color: #fff;
  box-shadow: var(--ho-shadow-amber);
  padding-inline: var(--ho-4);
}
.ho-header__action--cart:hover { color: #fff; filter: brightness(1.05); background: linear-gradient(135deg, var(--ho-amber-400), var(--ho-amber-500)); }

.ho-header__cart-icon { position: relative; display: inline-flex; }

.ho-cart-count {
  position: absolute;
  top: -7px;
  /* The «سبد خرید» label sits on the inline-end side of the icon, so the badge
     goes to the free outer corner instead of landing on top of the text. */
  inset-inline-start: -9px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-ink-900);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
}
.ho-cart-count.is-empty { display: none; }

/* Without the «سبد خرید» label the action collapses to a round icon button, so
   the badge moves to the pill's own outer corner and overhangs it. Anchored to
   the link rather than the icon, it can no longer land on the glyph. */
@media (max-width: 767px) {
  .ho-header__action--cart {
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .ho-header__cart-icon { position: static; }
  .ho-cart-count {
    top: -4px;
    inset-inline-start: auto;
    inset-inline-end: -4px;
    box-shadow: 0 0 0 2px var(--ho-surface);
  }
}

/* Navigation -------------------------------------------------------------- */

/* The header is rounded at the bottom; its last opaque child has to carry the
   same radius or it paints square corners straight over it. */
.ho-nav {
  border-top: 1px solid var(--ho-line-soft);
  background: var(--ho-surface);
  border-end-start-radius: var(--ho-header-r);
  border-end-end-radius: var(--ho-header-r);
}

.ho-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--ho-4);
}

.ho-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.ho-nav__list::-webkit-scrollbar { display: none; }

.ho-nav__list > li { position: relative; flex: none; }

.ho-nav__list > li > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--ho-3) var(--ho-3);
  color: var(--ho-ink-700);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: color var(--ho-fast), border-color var(--ho-fast);
}
.ho-nav__list > li > a:hover,
.ho-nav__list > li.current-menu-item > a,
.ho-nav__list > li.current-menu-parent > a {
  color: var(--ho-amber-600);
  border-bottom-color: var(--ho-amber-500);
}

.ho-nav__submenu,
.ho-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 30;
  min-width: 220px;
  margin: 0;
  padding: var(--ho-2);
  list-style: none;
  border: 1px solid var(--ho-line);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
  box-shadow: var(--ho-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--ho-fast), transform var(--ho-fast), visibility var(--ho-fast);
}
.ho-nav__list > li:hover > .ho-nav__submenu,
.ho-nav__list > li:focus-within > .ho-nav__submenu,
.ho-nav__list > li:hover > .sub-menu,
.ho-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ho-nav__submenu a,
.ho-nav__list .sub-menu a {
  display: block;
  padding: 9px var(--ho-3);
  border-radius: var(--ho-r-xs);
  color: var(--ho-ink-700);
  font-size: var(--ho-fs-sm);
  font-weight: 600;
}
.ho-nav__submenu a:hover,
.ho-nav__list .sub-menu a:hover { background: var(--ho-cream-100); color: var(--ho-amber-600); }

.ho-nav__deal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px var(--ho-4);
  border-radius: var(--ho-r-pill);
  background: var(--ho-danger-50);
  color: var(--ho-danger);
  font-size: var(--ho-fs-sm);
  font-weight: 800;
}
.ho-nav__deal:hover { background: #fce2e2; color: var(--ho-danger); }

/* Minimal header ---------------------------------------------------------- */

.ho-header--minimal { position: static; }

.ho-header--minimal__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-3);
  min-height: 62px;
}

.ho-header--minimal__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ho-ink-500);
  font-size: var(--ho-fs-sm);
  font-weight: 600;
}

.ho-header--minimal__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ho-2);
  color: var(--ho-ink-900);
  font-size: var(--ho-fs-lg);
  font-weight: 900;
}

.ho-header--minimal__help {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px var(--ho-3);
  border: 1px solid var(--ho-line);
  border-radius: var(--ho-r-pill);
  background: var(--ho-surface);
  color: var(--ho-ink-600);
  font-family: inherit;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--ho-fast), color var(--ho-fast);
}
.ho-header--minimal__help:hover { border-color: var(--ho-amber-400); color: var(--ho-amber-600); }
@media (max-width: 600px) {
  /* Icon only, but still a real button with an accessible name. */
  .ho-header--minimal__help { padding: 7px; }
  .ho-header--minimal__help span:last-child { display: none; }
}

.ho-checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ho-2);
  margin: 0;
  padding: 0 var(--ho-gutter) var(--ho-3);
  list-style: none;
  background: var(--ho-surface);
  border-top: 1px solid var(--ho-line-soft);
  padding-top: var(--ho-3);
}

.ho-checkout-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ho-ink-300);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
}
.ho-checkout-steps__item + .ho-checkout-steps__item::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--ho-line);
  margin-inline-end: var(--ho-2);
}
.ho-checkout-steps__item.is-active { color: var(--ho-amber-600); }

.ho-checkout-steps__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ho-cream-100);
  color: inherit;
}
.ho-checkout-steps__item.is-active .ho-checkout-steps__dot {
  background: var(--ho-amber-500);
  color: #fff;
}
@media (max-width: 520px) {
  .ho-checkout-steps__label { font-size: var(--ho-fs-xs); }
}

/* --------------------------------------------------------------- footer -- */

.ho-footer {
  margin-top: var(--ho-12);
  background: var(--ho-surface);
  border-top: 1px solid var(--ho-line);
}
/* With the Eitaa strip in front, the gap goes above the strip and the strip
   sits on the footer — no loose band of page background between the two. */
.ho-eitaa { margin-top: var(--ho-12); }
.ho-eitaa + .ho-footer { margin-top: 0; border-top: 0; }

.ho-footer__top { padding-block: var(--ho-6); border-bottom: 1px solid var(--ho-line); }

.ho-footer__main { padding-block: var(--ho-10); }

.ho-footer__grid {
  display: grid;
  gap: var(--ho-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .ho-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ho-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; }
}

.ho-footer__about {
  margin-top: var(--ho-4);
  max-width: 44ch;
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
  line-height: 2;
}

.ho-brand--footer .ho-brand__name { font-size: var(--ho-fs-xl); }
.ho-brand--footer .ho-brand__mark { flex: none; }

.ho-footer__title {
  margin-bottom: var(--ho-4);
  font-size: var(--ho-fs-md);
  font-weight: 800;
  color: var(--ho-ink-900);
}

.ho-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.ho-footer__links a {
  color: var(--ho-ink-500);
  font-size: var(--ho-fs-sm);
  font-weight: 600;
}
.ho-footer__links a:hover { color: var(--ho-amber-600); }

.ho-footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--ho-3);
}
.ho-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--ho-2);
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
}
.ho-footer__contact .ho-icon { flex: none; margin-top: 4px; color: var(--ho-amber-500); }
.ho-footer__contact a { color: var(--ho-ink-700); font-weight: 700; }

.ho-footer__socials {
  display: flex;
  gap: var(--ho-2);
  margin: var(--ho-5) 0 0;
  padding: 0;
  list-style: none;
}
.ho-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ho-cream-100);
  color: var(--ho-ink-600);
  transition: background var(--ho-fast), color var(--ho-fast), transform var(--ho-fast);
}
.ho-footer__socials a:hover {
  background: var(--ho-amber-500);
  color: #fff;
  transform: translateY(-2px);
}

.ho-footer__bottom {
  border-top: 1px solid var(--ho-line);
  background: var(--ho-cream-50);
}
.ho-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-2);
  padding-block: var(--ho-4);
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-400);
}
.ho-footer__made { display: inline-flex; align-items: center; gap: 5px; }
.ho-footer__made .ho-icon { color: var(--ho-gold); }

.ho-footer--minimal { margin-top: auto !important; }
.ho-footer--minimal__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-3);
  padding-block: var(--ho-5);
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-400);
}
.ho-footer--minimal__inner a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ho-ink-700);
  font-weight: 700;
}

/* ------------------------------------------------------------ eitaa bar --- */

/* A single strip above the footer. It had no styling at all, so it rendered as
   a loose sentence with a link trailing off the end of it. */
.ho-eitaa {
  background: linear-gradient(135deg, var(--ho-amber-50), #fff6e6);
  border-block: 1px solid var(--ho-amber-200);
}

.ho-eitaa__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ho-3);
  padding-block: var(--ho-4);
  text-align: center;
}

.ho-eitaa__text {
  display: inline-flex;
  align-items: center;
  gap: var(--ho-2);
  font-size: var(--ho-fs-sm);
  font-weight: 600;
  color: var(--ho-ink-700);
  line-height: 1.9;
}
.ho-eitaa__text .ho-icon { flex: none; color: var(--ho-amber-600); }

.ho-eitaa__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--ho-5);
  border-radius: var(--ho-r-pill);
  background: linear-gradient(135deg, var(--ho-amber-400), var(--ho-amber-500));
  color: #fff;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  transition: filter var(--ho-fast);
}
.ho-eitaa__cta:hover { color: #fff; filter: brightness(1.06); }

@media (max-width: 560px) {
  .ho-eitaa__inner { flex-direction: column; gap: var(--ho-2); }
  .ho-eitaa__text { font-size: var(--ho-fs-xs); }
}

/* --------------------------------------------------------- bottom dock ---- */

/* The purchase bar and the navigation share one floating shell so they read as
   a single control. Translucency plus a saturating blur is what gives the
   "liquid glass" look; the solid fallback keeps it readable where
   backdrop-filter is unsupported. */

.ho-dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: calc(var(--ho-z-header) + 1);
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100% - 20px));
  margin-inline: auto;
  margin-bottom: calc(10px + env(safe-area-inset-bottom));
  /* A fixed radius, not a pill. `999px` is resolved against half the *height*,
     so the moment the purchase bar stacks on top of the navigation the corners
     start eating into the content instead of just rounding it. */
  border-radius: 30px;
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    0 10px 34px rgba(63, 48, 24, .16),
    0 2px 8px rgba(63, 48, 24, .08),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

@supports not (backdrop-filter: blur(1px)) {
  .ho-dock { background: rgba(255, 255, 255, .97); }
}

/* Only the purchase bar is docked on desktop; the navigation is hidden. */
@media (min-width: 992px) {
  .ho-dock { width: min(680px, calc(100% - 40px)); }
  .ho-dock:not(.ho-dock--with-bar) { display: none; }
  /* Nothing but a hidden bar left: hide the shell too. */
  .ho-dock.is-empty { display: none; }
}

.ho-mobile-bar {
  display: flex;
  align-items: stretch;
  background: transparent;
  border: 0;
}

.ho-mobile-bar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 2px;
  color: var(--ho-ink-500);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 18px;
  transition: color var(--ho-fast), background var(--ho-fast);
}
.ho-mobile-bar__item:active { background: rgba(233, 134, 15, .1); }
.ho-mobile-bar__item.is-active { color: var(--ho-amber-600); }

@media (min-width: 992px) {
  .ho-mobile-bar { display: none; }
}

/* The page needs room for the floating dock. */
@media (max-width: 991px) {
  body { padding-bottom: 86px; }
}
body.ho-has-buybar { padding-bottom: 156px; }
@media (min-width: 992px) {
  body.ho-has-buybar { padding-bottom: 108px; }
}

/* --------------------------------------------------------------- brand --- */

.ho-brand__logo {
  width: auto;
  height: var(--ho-logo-h, 54px);
  max-height: var(--ho-logo-h, 54px);
  /* A wide lockup needs the width to follow the height rather than being
     capped by the column it sits in. */
  max-width: none;
  object-fit: contain;
}

/* A logo that already carries the brand name needs no text beside it. */
.ho-brand--logotype { gap: 0; }
@media (max-width: 480px) {
  .ho-brand__logo { height: calc(var(--ho-logo-h, 54px) * .82); }
  /* The header needs the room on a phone; the footer does not. */
  .ho-brand--footer .ho-brand__logo { height: var(--ho-logo-h, 54px); }
}

/* Idle state of the search sheet: chips, best sellers, then promo banners.
   The sheet body already supplies the side gutter, so this only adds vertical
   rhythm; `min-width: 0` all the way down lets long product names ellipsise
   instead of stretching the grid past the screen. */
.ho-search__idle {
  display: grid;
  gap: var(--ho-3);
  padding-block: var(--ho-2) var(--ho-6);
  min-width: 0;
}
.ho-search__idle > * { min-width: 0; }

.ho-search__picks {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.ho-search__picks > li { min-width: 0; }
.ho-search__picks .ho-search__row { min-width: 0; }

.ho-search__banners { display: grid; gap: var(--ho-2); margin-top: var(--ho-1); }
.ho-search__banner { display: block; border-radius: var(--ho-r-md); overflow: hidden; }
.ho-search__banner img { width: 100%; height: auto; display: block; }

.ho-search__recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-2);
}
.ho-search__recent-head .ho-search__hint { margin: 0; }
.ho-search__clear {
  border: 0;
  background: none;
  color: var(--ho-danger);
  font-family: inherit;
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  cursor: pointer;
}