/* =============================================================================
   Components — cards, badges, rails, sheets, toasts, skeletons, breadcrumbs.
   ========================================================================== */

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

.ho-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ho-4);
  margin-bottom: 10px;
}

.ho-section__title {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  margin: 0 0 10px;
  font-size: var(--ho-fs-xl);
  font-weight: 900;
}
@media (min-width: 768px) {
  .ho-section__title { font-size: var(--ho-fs-2xl); }
}

.ho-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--ho-r-sm);
  background: var(--ho-amber-50);
  color: var(--ho-amber-600);
}

.ho-section__subtitle {
  margin: 6px 0 0;
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
}

.ho-section__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: var(--ho-fs-xs);
  font-weight: 800;
  color: var(--ho-amber-700);
  background: var(--ho-amber-50);
  border: 1px solid var(--ho-amber-200);
  padding: 6px 14px;
  border-radius: var(--ho-r-pill);
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--ho-fast);
}
.ho-section__link:hover {
  background: var(--ho-amber-100);
  border-color: var(--ho-amber-300);
  color: var(--ho-amber-800);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(233, 134, 15, .15);
}

/* ---------------------------------------------------------- product card -- */

.ho-product-grid {
  display: grid;
  gap: var(--ho-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) { .ho-product-grid { gap: var(--ho-4); grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ho-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ho-product-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 46%;
  gap: var(--ho-3);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: auto !important;
  scroll-snap-type: x mandatory;
  /* Snapping lines cards up with the padding, not the screen edge. */
  scroll-padding-inline: var(--ho-gutter);
  /* Room above and below so a card lifted on hover, and its shadow, are not
     clipped by the scrolling box; the negative margins keep the layout. */
  padding-block: 6px var(--ho-4);
  margin-block: -6px calc(var(--ho-2) - var(--ho-4));
  margin-inline: calc(var(--ho-gutter) * -1);
  padding-inline: var(--ho-gutter);
}
.ho-product-rail > * { scroll-snap-align: start; }

@media (min-width: 600px) {
  .ho-product-rail { grid-auto-columns: 30%; }
}
@media (min-width: 992px) {
  .ho-product-rail {
    grid-auto-columns: 22.5%;
    margin-inline: -8px;
    padding-inline: 8px;
    scroll-padding-inline: 8px;
  }
}

.ho-product-rail-wrap {
  position: relative;
  width: 100%;
}
.ho-rail-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ho-line-soft);
  background: #ffffff;
  color: var(--ho-ink-800);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: opacity .25s ease, transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.ho-rail-btn:hover {
  background: #ffffff;
  color: var(--ho-amber-600);
  border-color: var(--ho-amber-400);
  box-shadow: 0 6px 18px rgba(233, 134, 15, .25);
  transform: translateY(-50%) scale(1.08);
}
.ho-rail-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.ho-rail-btn--prev {
  right: -44px;
}
.ho-rail-btn--next {
  left: -44px;
}
@media (min-width: 768px) {
  .ho-rail-btn {
    display: inline-flex;
  }
}
@media (min-width: 1200px) {
  .ho-rail-btn--prev {
    right: -52px;
  }
  .ho-rail-btn--next {
    left: -52px;
  }
}
@media (min-width: 1360px) {
  .ho-rail-btn--prev {
    right: -68px;
  }
  .ho-rail-btn--next {
    left: -68px;
  }
}

.ho-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
  transition: border-color var(--ho-base-t), box-shadow var(--ho-base-t), transform var(--ho-base-t);
}
.ho-card:hover {
  border-color: var(--ho-amber-200);
  box-shadow: var(--ho-shadow-md);
  transform: translateY(-3px);
}
.ho-card.is-out-of-stock { opacity: .78; }

.ho-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ho-cream-100);
  overflow: hidden;
}

.ho-card__link { display: block; height: 100%; }

/* Qualified by the card so Elementor's `.elementor img { height: auto }`
   cannot win on Elementor-built pages. */
.ho-card .ho-card__img,
.ho-card .ho-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ho-ease);
}
.ho-card:hover .ho-card__img { transform: scale(1.05); }

.ho-card__badges {
  position: absolute;
  top: var(--ho-2);
  inset-inline-start: var(--ho-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.ho-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--ho-r-pill);
  font-size: var(--ho-fs-xs);
  font-weight: 800;
  line-height: 1.7;
  white-space: nowrap;
}
.ho-badge--sale { background: var(--ho-danger); color: #fff; }

/* A sale with an end date. The badge reads as hot rather than merely cheap,
   and the shimmer marks it as the one thing on the card that expires. */
.ho-badge--flash {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(120deg, #c2410c, #ea580c 45%, var(--ho-gold));
  background-size: 220% 100%;
  color: #fff;
  animation: ho-flash-sheen 3.4s ease-in-out infinite;
}
.ho-badge--flash .ho-icon { fill: currentColor; }

@keyframes ho-flash-sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .ho-badge--flash { animation: none; }
}
.ho-badge--featured { background: var(--ho-gold); color: var(--ho-ink-900); }
.ho-badge--muted { background: var(--ho-ink-300); color: #fff; }
.ho-badge--green { background: var(--ho-green-50); color: var(--ho-green-600); }
.ho-badge--soft { background: var(--ho-amber-50); color: var(--ho-amber-600); }

.ho-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
  padding: var(--ho-3);
}

.ho-card__title {
  margin: 0;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  line-height: 1.7;
  min-height: 2.9em;
}
.ho-card__title a {
  color: var(--ho-ink-800);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ho-card__title a:hover { color: var(--ho-amber-600); }

.ho-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ho-fs-xs);
  color: var(--ho-ink-500);
}
.ho-card__rating .ho-icon { color: var(--ho-gold); fill: var(--ho-gold); }
.ho-card__rating b { color: var(--ho-ink-700); }

.ho-card__urgency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  color: var(--ho-danger);
}

.ho-card__stock-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--ho-cream-200);
  overflow: hidden;
}
.ho-card__stock-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ho-danger), var(--ho-amber-400));
}
.ho-card__stock-text { font-size: var(--ho-fs-xs); color: var(--ho-ink-400); }

.ho-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ho-2);
  margin-top: auto;
  padding-top: var(--ho-1);
}

.ho-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  font-size: var(--ho-fs-md);
  font-weight: 800;
  color: var(--ho-ink-900);
  min-width: 0;
}
.ho-card__price del {
  font-size: 13px;
  font-weight: 500;
  color: var(--ho-ink-400);
}
.ho-card__price ins { text-decoration: none; color: var(--ho-ink-900); }
.ho-card__price .woocommerce-Price-currencySymbol { font-size: .8em; font-weight: 600; color: var(--ho-ink-500); }
@media (max-width: 767px) {
  .ho-card__price { font-size: var(--ho-fs-sm); }
  .ho-card__price .woocommerce-Price-currencySymbol { display: inline; font-size: 11px; white-space: nowrap; margin-inline-start: 2px; }
}
.ho-card__unavailable { font-size: var(--ho-fs-sm); font-weight: 700; color: var(--ho-ink-400); }

.ho-card__add {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--ho-r-sm);
  background: var(--ho-amber-50);
  color: var(--ho-amber-600);
  cursor: pointer;
  transition: background var(--ho-fast), color var(--ho-fast), transform var(--ho-fast);
}
.ho-card__add:hover { background: var(--ho-amber-500); color: #fff; }
.ho-card__add:active { transform: scale(.94); }
.ho-card__add.is-loading { pointer-events: none; }
.ho-card__add.is-loading .ho-icon { display: none; }
.ho-card__add.is-done { background: var(--ho-green-500); color: #fff; }

.ho-card--compact .ho-card__title { font-size: var(--ho-fs-sm); min-height: 2.9em; }

/* ---------------------------------------------------------------- stars --- */

/* Shared by the home page rail, the product review list and the rating
   summary, so it belongs here rather than in a page stylesheet. */
.ho-review-card__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--ho-line);
  line-height: 1;
}
.ho-review-card__stars > span { display: inline-flex; }
.ho-review-card__stars .is-on { color: var(--ho-gold); }
.ho-review-card__stars .is-on .ho-icon { fill: var(--ho-gold); }

/* -------------------------------------------------------------- spinner --- */

.ho-spinner {
  display: inline-block;
  width: 17px; height: 17px;
  border: 2.2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ho-spin .7s linear infinite;
}
.ho-spinner[hidden] { display: none; }

@keyframes ho-spin { to { transform: rotate(360deg); } }

.ho-btn.is-loading .ho-btn__label { opacity: .6; }
.ho-btn.is-loading .ho-spinner { display: inline-block; }

/* ------------------------------------------------------------- skeleton --- */

.ho-skeleton-grid {
  display: grid;
  gap: var(--ho-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) { .ho-skeleton-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ho-skeleton-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ho-skeleton--card {
  padding: var(--ho-3);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
}

.ho-skeleton__img,
.ho-skeleton__line {
  border-radius: var(--ho-r-xs);
  background: linear-gradient(90deg, var(--ho-cream-100) 25%, var(--ho-cream-200) 37%, var(--ho-cream-100) 63%);
  background-size: 400% 100%;
  animation: ho-shimmer 1.4s ease-in-out infinite;
}
.ho-skeleton__img { aspect-ratio: 1 / 1; margin-bottom: var(--ho-3); }
.ho-skeleton__line { height: 12px; margin-bottom: 8px; }
.ho-skeleton__line--short { width: 55%; }

@keyframes ho-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------------------------------------------------------- breadcrumbs --- */

/* Sits on the page, not on a bar of its own: no fill, no rule under it. */
.ho-breadcrumb {
  padding-block: var(--ho-3);
  font-size: var(--ho-fs-sm);
}

/* One line that scrolls rather than wrapping: a long product name would
   otherwise push the page content down on a phone. */
.ho-breadcrumb__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ho-ink-400);
  font-size: 11px;
  font-weight: 500;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.ho-breadcrumb__list::-webkit-scrollbar { display: none; }
.ho-breadcrumb__item { flex: none; }

.ho-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; }
.ho-breadcrumb__item a,
.ho-breadcrumb__item span { font-weight: 500; }
.ho-breadcrumb__item + .ho-breadcrumb__item::before {
  content: '/';
  color: var(--ho-ink-200);
}
.ho-breadcrumb__item a { color: var(--ho-ink-500); font-weight: 500; }
.ho-breadcrumb__item a:hover { color: var(--ho-amber-600); }
.ho-breadcrumb__item [aria-current] { color: var(--ho-ink-700); font-weight: 500; }

/* ------------------------------------------------------------ page head --- */

.ho-page-head { padding-block: var(--ho-8) var(--ho-5); }
.ho-page-head__title { margin: 0; font-size: var(--ho-fs-2xl); font-weight: 900; }
@media (min-width: 768px) { .ho-page-head__title { font-size: var(--ho-fs-3xl); } }
.ho-page-head__count { margin: 6px 0 0; font-size: var(--ho-fs-sm); color: var(--ho-ink-400); }
.ho-page-head__subtitle {
  margin-top: var(--ho-3);
  max-width: 72ch;
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
  line-height: 2;
}

/* ---------------------------------------------------------------- chips --- */

.ho-chips { display: flex; flex-wrap: wrap; gap: var(--ho-2); }

.ho-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px var(--ho-4);
  border: 1.5px solid var(--ho-line);
  border-radius: var(--ho-r-pill);
  background: var(--ho-surface);
  color: var(--ho-ink-600);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--ho-fast);
}
.ho-chip:hover { border-color: var(--ho-amber-300); color: var(--ho-amber-600); }
.ho-chip.is-active {
  background: var(--ho-amber-500);
  border-color: var(--ho-amber-500);
  color: #fff;
}

/* ----------------------------------------------------------- pagination --- */

.ho-pagination { margin-top: var(--ho-8); }
.ho-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The buttons themselves — not the «قبلی / بعدی» label span inside them. */
.ho-pagination li > a,
.ho-pagination li > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--ho-3);
  justify-content: center;
  border: 1.5px solid var(--ho-line);
  border-radius: var(--ho-r-sm);
  background: var(--ho-surface);
  color: var(--ho-ink-600);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
}
.ho-pagination a:hover { border-color: var(--ho-amber-300); color: var(--ho-amber-600); }
.ho-pagination svg { flex: none; width: 16px; height: 16px; }
.ho-pagination .current {
  background: var(--ho-amber-500);
  border-color: var(--ho-amber-500);
  color: #fff;
}

.ho-load-more { margin-top: var(--ho-8); text-align: center; }

/* ---------------------------------------------------------- empty state --- */

.ho-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-16) var(--ho-5);
  border: 1px dashed var(--ho-line);
  border-radius: var(--ho-r-lg);
  background: var(--ho-surface);
  text-align: center;
}
.ho-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--ho-amber-50);
  color: var(--ho-amber-400);
}
.ho-empty__title { margin: 0; font-size: var(--ho-fs-xl); }
.ho-empty__text { margin: 0; max-width: 46ch; color: var(--ho-ink-500); }

/* ----------------------------------------------------------------- trust -- */

.ho-trust {
  display: grid;
  gap: var(--ho-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .ho-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ho-4); } }

.ho-trust__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-4) var(--ho-3);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
  overflow: hidden;
  transition: border-color var(--ho-base-t), box-shadow var(--ho-base-t), transform var(--ho-base-t);
}

/* A honey edge on the inline-start side turns four identical boxes into a set
   of labelled promises. */
.ho-trust__item::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ho-amber-400), var(--ho-gold));
}

.ho-trust__item:hover {
  border-color: var(--ho-amber-200);
  box-shadow: var(--ho-shadow-sm);
  transform: translateY(-2px);
}

.ho-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px; height: 48px;
  background: linear-gradient(150deg, var(--ho-amber-50), #fdf0d6);
  color: var(--ho-amber-600);
  /* Same hexagon as the category tiles, so the honey motif repeats. */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform var(--ho-base-t);
}
.ho-trust__item:hover .ho-trust__icon { transform: rotate(-6deg) scale(1.05); }

.ho-trust__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ho-trust__body strong { font-size: var(--ho-fs-sm); font-weight: 800; color: var(--ho-ink-900); }
.ho-trust__body small { font-size: var(--ho-fs-xs); color: var(--ho-ink-400); line-height: 1.8; }

/* ---------------------------------------------------------------- sheet --- */

.ho-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--ho-z-sheet);
}
.ho-sheet[hidden] { display: none; }

.ho-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 27, 22, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--ho-base-t);
}
.ho-sheet.is-open .ho-sheet__backdrop { opacity: 1; }

.ho-sheet__panel {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--ho-r-lg) var(--ho-r-lg) 0 0;
  background: var(--ho-surface);
  box-shadow: var(--ho-shadow-lg);
  transform: translateY(100%);
  transition: transform var(--ho-base-t);
  padding-bottom: env(safe-area-inset-bottom);
}
.ho-sheet.is-open .ho-sheet__panel { transform: translateY(0); }

.ho-sheet__panel--top {
  top: 0;
  bottom: auto;
  max-height: 100vh;
  height: 100%;
  border-radius: 0;
  transform: translateY(-100%);
}

.ho-sheet__panel--side {
  top: 0;
  bottom: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: min(86vw, 340px);
  max-height: none;
  border-radius: var(--ho-r-lg) 0 0 var(--ho-r-lg);
  transform: translateX(100%);
}
.ho-sheet.is-open .ho-sheet__panel--side { transform: translateX(0); }

/* On wider screens the bottom sheet becomes a centred dialog. Centring is done
   with flexbox rather than inset + translate so it behaves the same in RTL. */
@media (min-width: 768px) {
  .ho-sheet {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ho-sheet[hidden] { display: none; }

  .ho-sheet__panel:not(.ho-sheet__panel--side):not(.ho-sheet__panel--top):not(.ho-sheet__panel--bottom) {
    position: relative;
    inset: auto;
    width: min(580px, 92vw);
    max-height: 84vh;
    border-radius: var(--ho-r-lg);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: transform var(--ho-base-t), opacity var(--ho-base-t);
  }
  .ho-sheet.is-open .ho-sheet__panel:not(.ho-sheet__panel--side):not(.ho-sheet__panel--top):not(.ho-sheet__panel--bottom) {
    opacity: 1;
    transform: none;
  }
  .ho-sheet__panel:not(.ho-sheet__panel--bottom) .ho-sheet__grip { display: none; }

  /* `--bottom` stays docked to the bottom edge on every screen size, which is
     what the "added to cart" panel wants. */
  .ho-sheet__panel--bottom {
    inset-inline: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    max-height: 78vh;
    border-radius: var(--ho-r-lg) var(--ho-r-lg) 0 0;
  }
}

.ho-sheet__grip {
  width: 42px; height: 4px;
  margin: var(--ho-3) auto 0;
  border-radius: 3px;
  background: var(--ho-line);
}

.ho-sheet__head {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-4);
  border-bottom: 1px solid var(--ho-line-soft);
}

.ho-sheet__title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: var(--ho-fs-lg);
  font-weight: 800;
}
.ho-sheet__title--success { color: var(--ho-green-600); }

.ho-sheet__close {
  /* Always the far end of the row, whatever sits before it. */
  margin-inline-start: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px var(--ho-3);
  border: 0;
  border-radius: var(--ho-r-sm);
  background: transparent;
  color: var(--ho-ink-500);
  font-family: inherit;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.ho-sheet__close:hover { background: var(--ho-cream-100); }

.ho-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--ho-4);
}

.ho-sheet__foot {
  display: flex;
  gap: var(--ho-2);
  padding: var(--ho-4);
  border-top: 1px solid var(--ho-line-soft);
  background: var(--ho-cream-50);
}
.ho-sheet__foot > * { flex: 1 1 0; }

.ho-sheet__contact {
  display: grid;
  gap: var(--ho-2);
  margin-top: var(--ho-6);
  padding-top: var(--ho-4);
  border-top: 1px solid var(--ho-line-soft);
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
}
.ho-sheet__contact a,
.ho-sheet__contact > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ho-sheet .ho-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: visible;
  margin-top: var(--ho-4);
}
.ho-sheet .ho-nav__list > li > a {
  padding: var(--ho-3) 0;
  border-bottom: 1px solid var(--ho-line-soft);
  font-size: var(--ho-fs-md);
  justify-content: space-between;
}
.ho-sheet .ho-nav__submenu,
.ho-sheet .ho-nav__list .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  background: var(--ho-cream-50);
  border-radius: var(--ho-r-sm);
  margin-bottom: var(--ho-2);
  padding: var(--ho-2);
}

/* Category list inside the sheet */
.ho-cat-list { margin: 0; padding: 0; list-style: none; }
.ho-cat-list a {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-3) 0;
  border-bottom: 1px solid var(--ho-line-soft);
  color: var(--ho-ink-800);
}
.ho-cat-list__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--ho-r-sm);
  background: var(--ho-cream-100);
  color: var(--ho-amber-500);
  overflow: hidden;
}
.ho-cat-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ho-cat-list__name { flex: 1 1 auto; font-size: var(--ho-fs-sm); font-weight: 700; }
.ho-cat-list__count {
  flex: none;
  padding: 2px 9px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-cream-100);
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  color: var(--ho-ink-400);
}

/* --------------------------------------------------------------- toasts --- */

.ho-toasts {
  position: fixed;
  z-index: var(--ho-z-toast);
  inset-inline: var(--ho-4);
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--ho-2);
  pointer-events: none;
}
@media (min-width: 992px) {
  .ho-toasts { inset-inline: auto var(--ho-6); bottom: var(--ho-6); width: 340px; }
}

.ho-toast {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-3) var(--ho-4);
  border-radius: var(--ho-r-md);
  background: var(--ho-ink-900);
  color: #fff;
  font-size: var(--ho-fs-sm);
  font-weight: 600;
  box-shadow: var(--ho-shadow-lg);
  pointer-events: auto;
  transform: translateY(14px);
  opacity: 0;
  transition: transform var(--ho-base-t), opacity var(--ho-base-t);
}
.ho-toast.is-visible { transform: translateY(0); opacity: 1; }
.ho-toast--success { background: var(--ho-green-600); }
.ho-toast--error { background: var(--ho-danger); }
.ho-toast__text { flex: 1 1 auto; }
.ho-toast__action {
  flex: none;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--ho-r-pill);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  cursor: pointer;
}

/* ---------------------------------------------------------- cross sell ---- */

.ho-crosssell__title {
  margin: 0 0 var(--ho-3);
  font-size: var(--ho-fs-sm);
  font-weight: 800;
  color: var(--ho-ink-700);
}

.ho-crosssell__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 42%;
  gap: var(--ho-3);
  overflow-x: auto;
  padding-bottom: var(--ho-2);
}
@media (min-width: 600px) { .ho-crosssell__rail { grid-auto-columns: 30%; } }

.ho-crosssell__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--ho-2);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-sm);
  background: var(--ho-surface);
  text-align: center;
}
.ho-crosssell__link { display: flex; flex-direction: column; gap: 6px; color: var(--ho-ink-800); }
.ho-crosssell__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ho-r-xs);
  background: var(--ho-cream-100);
}
.ho-crosssell__name {
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ho-crosssell__price { font-size: var(--ho-fs-sm); font-weight: 800; color: var(--ho-ink-900); }
.ho-crosssell__price del { display: none; }

/* ----------------------------------------------------- quantity stepper --- */

.ho-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ho-line);
  border-radius: var(--ho-r-pill);
  background: var(--ho-surface);
  overflow: hidden;
}

.ho-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 42px;
  border: 0;
  background: transparent;
  color: var(--ho-ink-600);
  cursor: pointer;
  transition: background var(--ho-fast), color var(--ho-fast);
}
.ho-qty__btn:hover { background: var(--ho-cream-100); color: var(--ho-amber-600); }
.ho-qty__btn[disabled] { opacity: .35; cursor: not-allowed; }

/* The type selector in base.css is more specific than a bare class, so the
   stepper input has to match it to keep its fixed width. */
input.ho-qty__input,
.ho-qty__input {
  width: 58px;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--ho-fs-md);
  font-weight: 800;
  color: var(--ho-ink-900);
  box-shadow: none !important;
}

/* ------------------------------------------------------------- notices ---- */

.woocommerce-notices-wrapper {
  width: 100%;
  max-width: var(--ho-container);
  margin-inline: auto;
  padding-inline: var(--ho-gutter);
  padding-top: var(--ho-6);
  box-sizing: border-box;
}
.woocommerce-notices-wrapper:empty {
  display: none;
  padding: 0;
  margin: 0;
}

.ho-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ho-3);
  margin: var(--ho-5) auto var(--ho-6);
  padding: 16px 22px;
  width: 100%;
  max-width: var(--ho-container);
  border: 1px solid var(--ho-line-soft);
  border-inline-start: 4px solid var(--ho-amber-500);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
  font-size: var(--ho-fs-sm);
  font-weight: 600;
  color: var(--ho-ink-800);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  list-style: none;
  box-sizing: border-box;
}
.woocommerce-message {
  border-color: #cde8b4;
  border-inline-start-color: var(--ho-green-500);
  background: var(--ho-green-50);
  color: #14532d;
}
.woocommerce-error {
  border-color: #f8c9c9;
  border-inline-start-color: var(--ho-danger);
  background: var(--ho-danger-50);
  color: #991b1b;
}
.woocommerce-info {
  border-color: var(--ho-amber-200);
  border-inline-start-color: var(--ho-amber-500);
  background: var(--ho-amber-50);
  color: var(--ho-amber-900);
}
.woocommerce-error li { list-style: none; margin: 0; }

.ho-notice .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: var(--ho-fs-xs);
  font-weight: 800;
  color: #ffffff;
  background: var(--ho-amber-600);
  border: 0;
  border-radius: var(--ho-r-pill);
  text-decoration: none;
  transition: all var(--ho-fast);
}
.woocommerce-message .button {
  background: var(--ho-green-600);
}
.woocommerce-message .button:hover {
  background: var(--ho-green-700);
  transform: translateY(-1px);
}
.woocommerce-info .button:hover,
.ho-notice .button:hover {
  background: var(--ho-amber-700);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------ post card --- */

.ho-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
  transition: border-color var(--ho-base-t), box-shadow var(--ho-base-t), transform var(--ho-base-t);
}
.ho-post-card:hover {
  border-color: var(--ho-amber-200);
  box-shadow: var(--ho-shadow-md);
  transform: translateY(-3px);
}

.ho-post-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--ho-cream-100);
  overflow: hidden;
}
/* Pinned to the box, and specific enough to beat Elementor's
   `.elementor img { height: auto }`, which on Elementor pages (the home blog
   section) let the photo keep its own height and left a band of background
   between the image and the title. */
.ho-post-card .ho-post-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ho-ease);
}
.ho-post-card:hover .ho-post-card__media img { transform: scale(1.04); }

.ho-post-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ho-post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ho-2);
  flex: 1 1 auto;
  padding: var(--ho-4);
}

.ho-post-card__cat {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-amber-50);
  color: var(--ho-amber-600);
  font-size: var(--ho-fs-xs);
  font-weight: 700;
}

.ho-post-card__title { margin: 0; font-size: var(--ho-fs-md); line-height: 1.7; }
.ho-post-card__title a {
  color: var(--ho-ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ho-post-card__title a:hover { color: var(--ho-amber-600); }

.ho-post-card__excerpt {
  margin: 0;
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
  line-height: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ho-post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-2);
  margin-top: auto;
  padding-top: var(--ho-3);
  border-top: 1px solid var(--ho-line-soft);
  font-size: var(--ho-fs-xs);
  color: var(--ho-ink-400);
}
.ho-post-card__meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ------------------------------------------------------------- share ------ */

.ho-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-4);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
}
.ho-share__label { font-size: var(--ho-fs-sm); font-weight: 700; color: var(--ho-ink-700); }
.ho-share__buttons { display: flex; flex-wrap: wrap; gap: var(--ho-2); }
.ho-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px var(--ho-4);
  border: 1.5px 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: all var(--ho-fast);
}
.ho-share__btn:hover { border-color: var(--ho-amber-300); color: var(--ho-amber-600); }
.ho-share__btn--wa:hover { border-color: #25d366; color: #1da851; }
.ho-share__btn--tg:hover { border-color: #2aabee; color: #1d8bc2; }

/* ------------------------------------------------------------------ FAQ -- */

.ho-faq { display: grid; gap: var(--ho-2); }

.ho-faq__item {
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
  overflow: hidden;
}

.ho-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-3);
  width: 100%;
  padding: var(--ho-4) var(--ho-5);
  border: 0;
  background: transparent;
  color: var(--ho-ink-800);
  font-family: inherit;
  font-size: var(--ho-fs-md);
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.ho-faq__q:hover { background: var(--ho-cream-50); }
.ho-faq__q .ho-icon { flex: none; color: var(--ho-amber-500); transition: transform var(--ho-fast); }
.ho-faq__q[aria-expanded="true"] .ho-icon { transform: rotate(180deg); }

.ho-faq__a { padding: 0 var(--ho-5) var(--ho-5); }
.ho-faq__a[hidden] { display: none; }
.ho-faq__a p { margin: 0; font-size: var(--ho-fs-sm); color: var(--ho-ink-500); line-height: 2.1; }

/* -------------------------------------------------- category drawer extras -- */

.ho-drawer-search {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  margin-bottom: var(--ho-4);
  padding: 4px var(--ho-4);
  border: 1.5px solid var(--ho-line);
  border-radius: var(--ho-r-pill);
  background: var(--ho-cream-50);
}
.ho-drawer-search .ho-icon { color: var(--ho-ink-400); }
.ho-drawer-search input {
  flex: 1 1 auto;
  min-height: 40px;
  border: 0;
  padding: 0;
  background: transparent;
  font-size: var(--ho-fs-sm);
  box-shadow: none !important;
}

.ho-sheet__section-title {
  margin: var(--ho-5) 0 var(--ho-2);
  font-size: var(--ho-fs-sm);
  font-weight: 800;
  color: var(--ho-ink-900);
}

.ho-drawer-products { display: grid; gap: var(--ho-2); margin: 0; padding: 0; list-style: none; }
.ho-drawer-products a {
  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-drawer-products a:hover { background: var(--ho-cream-100); }
.ho-drawer-products img {
  flex: none;
  width: 46px; height: 46px;
  border-radius: var(--ho-r-xs);
  object-fit: cover;
  background: var(--ho-cream-100);
}
.ho-drawer-products span { display: flex; flex-direction: column; min-width: 0; }
.ho-drawer-products strong { font-size: var(--ho-fs-sm); font-weight: 700; }
.ho-drawer-products small { font-size: var(--ho-fs-xs); font-weight: 800; color: var(--ho-amber-600); }
.ho-drawer-products small del { display: none; }

/* --------------------------------------------------------- page loader --- */

.ho-loader {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ho-z-toast) + 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ho-4);
  background: rgba(253, 251, 247, .88);
  backdrop-filter: blur(6px);
}
.ho-loader[hidden] { display: none; }

/* The mark sits still inside a ring that spins around it, so the loader reads
   as a spinner without losing the brand. */
.ho-loader__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
}
.ho-loader__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--ho-amber-200, rgba(214, 158, 46, .25));
  border-top-color: var(--ho-amber-500);
  border-radius: 50%;
  animation: ho-spin .8s linear infinite;
}

.ho-loader__mark {
  display: inline-flex;
  animation: ho-pulse 1.4s ease-in-out infinite;
}

.ho-loader__text {
  font-size: var(--ho-fs-md);
  font-weight: 800;
  color: var(--ho-amber-600);
}

@keyframes ho-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
  .ho-loader__mark,
  .ho-loader__ring::before { animation: none; }
}

/* ------------------------------------------------- bottom sheet variants -- */

/* `--bottom` docks to the bottom edge at every width; `--tall` gives the
   search and support sheets most of the screen. */
.ho-sheet__panel--tall { max-height: 92vh; height: 92vh; }
@media (min-width: 768px) {
  .ho-sheet__panel--tall { height: auto; max-height: 86vh; }
}

/* ------------------------------------------------------- search idle state -- */

.ho-search__idle { display: grid; gap: var(--ho-4); }

.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: transparent;
  color: var(--ho-danger);
  font-family: inherit;
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.ho-chip--recent { padding-inline-end: 6px; }
.ho-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-inline-start: 2px;
  border: 0;
  border-radius: 50%;
  background: var(--ho-cream-200);
  color: var(--ho-ink-500);
  cursor: pointer;
  line-height: 1;
}
.ho-chip__remove:hover { background: var(--ho-danger-50); color: var(--ho-danger); }

.ho-search__banners { display: grid; gap: var(--ho-3); }
.ho-search__banner {
  display: block;
  border-radius: var(--ho-r-md);
  overflow: hidden;
  background: var(--ho-cream-100);
}
.ho-search__banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  transition: transform .4s var(--ho-ease);
}
.ho-search__banner:hover img { transform: scale(1.03); }

/* ------------------------------------------------------------- support --- */

.ho-support { display: grid; gap: var(--ho-2); align-content: start; }

.ho-support__row {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-3) var(--ho-4);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
  color: var(--ho-ink-800);
  transition: border-color var(--ho-fast), background var(--ho-fast);
}
.ho-support__row:not(.ho-support__row--static):hover {
  border-color: var(--ho-amber-300);
  background: var(--ho-amber-50);
  color: var(--ho-ink-900);
}
.ho-support__row--eitaa { border-color: var(--ho-amber-300); background: var(--ho-amber-50); }

.ho-support__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ho-cream-100);
  color: var(--ho-amber-600);
}
.ho-support__row--eitaa .ho-support__icon { background: var(--ho-amber-500); color: #fff; }

.ho-support__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ho-support__body strong { font-size: var(--ho-fs-sm); font-weight: 800; }
.ho-support__body small { font-size: var(--ho-fs-xs); color: var(--ho-ink-400); line-height: 1.8; }

.ho-support__map {
  min-height: 150px;
  margin-top: var(--ho-2);
  border-radius: var(--ho-r-md);
  overflow: hidden;
}
/* An explicit height: the iframe has no intrinsic size, so `height: 100%`
   inside an auto-height box collapsed it to a sliver. */
.ho-support__map iframe { width: 100%; height: 200px; border: 0; display: block; }
@media (min-height: 720px) {
  .ho-support__map iframe { height: 240px; }
}

.ho-support__map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ho-2);
  min-height: 160px;
  background: var(--ho-cream-50);
  color: var(--ho-ink-400);
  font-size: var(--ho-fs-xs);
}

.ho-support__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ho-4);
  padding: var(--ho-4);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-cream-50);
}
.ho-support__badge img {
  width: auto;
  max-width: 110px;
  max-height: 86px;
  object-fit: contain;
}

/* -------------------------------------------------- draggable rails ------- */

/* Every horizontal rail can be dragged with a mouse on desktop; touch uses
   native scrolling. `is-dragging` suppresses snapping and link clicks. */
[data-ho-drag] { cursor: grab; }
[data-ho-drag].is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
[data-ho-drag].is-dragging a,
[data-ho-drag].is-dragging button { pointer-events: none; }

/* ---------------------------------------------- free shipping component --- */

.ho-ship {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  margin-bottom: var(--ho-4);
  padding: var(--ho-4);
  border: 1px solid var(--ho-amber-200);
  border-radius: var(--ho-r-md);
  background: linear-gradient(135deg, var(--ho-amber-50), var(--ho-gold-soft));
}
.ho-ship.is-reached {
  border-color: #cde8b4;
  background: linear-gradient(135deg, var(--ho-green-50), #eef7e2);
}

.ho-ship__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ho-surface);
  color: var(--ho-amber-600);
  box-shadow: var(--ho-shadow-xs);
}
.ho-ship.is-reached .ho-ship__icon { color: var(--ho-green-600); }

.ho-ship__body { flex: 1 1 auto; min-width: 0; }

.ho-ship__label { display: flex; flex-direction: column; margin: 0 0 8px; }
.ho-ship__label strong { font-size: var(--ho-fs-sm); font-weight: 800; color: var(--ho-ink-900); }
.ho-ship__label small { font-size: var(--ho-fs-xs); color: var(--ho-ink-500); }
.ho-ship.is-reached .ho-ship__label strong { color: var(--ho-green-600); }

.ho-ship__progress-wrap {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  margin-top: 4px;
}

.ho-ship__track {
  position: relative;
  flex: 1 1 auto;
  display: block;
  height: 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .07);
  border: 1px solid rgba(0, 0, 0, .04);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}
.ho-ship__track i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  border-radius: 99px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  box-shadow: 0 1px 3px rgba(217, 119, 6, .4);
  transition: width .45s var(--ho-ease);
}
.ho-ship.is-reached .ho-ship__track i {
  background: linear-gradient(90deg, #10b981, #059669);
  box-shadow: 0 1px 3px rgba(16, 185, 129, .4);
}

.ho-ship__percent {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ho-amber-700);
}
.ho-ship.is-reached .ho-ship__percent { color: var(--ho-green-600); }

.ho-ship--compact { padding: var(--ho-3); margin-bottom: var(--ho-3); }
.ho-ship--compact .ho-ship__icon { width: 36px; height: 36px; }

/* Bulleted assurance lists that should read as icon rows. */
.ho-assurances--plain { list-style: none; padding: 0; margin: 0; }

/* ------------------------------------------------- horizontal scrolling --- */

/*
 * Every rail in the theme scrolls sideways by drag, swipe or arrow key, so the
 * scrollbar itself is never the affordance — the peeking next card is. Hiding
 * it in one place keeps new rails from having to remember the three properties
 * it takes, and stops the bar from stealing height at the bottom of a card.
 */
.ho-product-rail,
.ho-crosssell__rail,
.ho-reviews-rail,
.ho-cat-rail__list,
.ho-stories__rail,
.ho-chips--scroll,
.ho-tabs__nav,
.ho-nav__list,
.ho-breadcrumb__list,
.ho-gallery__track,
.ho-gallery__thumbs,
.ho-lightbox__thumbs,
.ho-jump__inner,
.ho-account__nav ul {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ho-product-rail::-webkit-scrollbar,
.ho-crosssell__rail::-webkit-scrollbar,
.ho-reviews-rail::-webkit-scrollbar,
.ho-cat-rail__list::-webkit-scrollbar,
.ho-stories__rail::-webkit-scrollbar,
.ho-chips--scroll::-webkit-scrollbar,
.ho-tabs__nav::-webkit-scrollbar,
.ho-nav__list::-webkit-scrollbar,
.ho-breadcrumb__list::-webkit-scrollbar,
.ho-gallery__track::-webkit-scrollbar,
.ho-gallery__thumbs::-webkit-scrollbar,
.ho-lightbox__thumbs::-webkit-scrollbar,
.ho-jump__inner::-webkit-scrollbar,
.ho-account__nav ul::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ------------------------------------------------------------ blog grid --- */

/*
 * Shared by the home page's magazine strip and the full article archive. It
 * lives here, not in home.css, because the archive loads blog.css only — which
 * is why the archive used to fall back to a single column.
 */
.ho-blog-grid {
  display: grid;
  gap: var(--ho-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .ho-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ho-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/*
 * On the archive the first article is the lead: it spans the full width and
 * lays its image beside the text, so the page opens with something to read
 * rather than a wall of equal tiles.
 */
@media (min-width: 640px) {
  .ho-blog-grid--lead > .ho-post-card:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .ho-blog-grid--lead > .ho-post-card:first-child .ho-post-card__media {
    flex: 0 0 46%;
    aspect-ratio: auto;
  }
  .ho-blog-grid--lead > .ho-post-card:first-child .ho-post-card__body {
    justify-content: center;
    gap: var(--ho-3);
    padding: var(--ho-6);
  }
  .ho-blog-grid--lead > .ho-post-card:first-child .ho-post-card__title {
    font-size: var(--ho-fs-xl);
    font-weight: 900;
  }
  .ho-blog-grid--lead > .ho-post-card:first-child .ho-post-card__title a {
    -webkit-line-clamp: 3;
  }
  .ho-blog-grid--lead > .ho-post-card:first-child .ho-post-card__excerpt {
    -webkit-line-clamp: 4;
    font-size: var(--ho-fs-md);
  }
}

/* -------------------------------------------------------- menu sheet ----- */

/*
 * The hamburger sheet is the phone's whole navigation, so it reads as a shop
 * front rather than a list of links: two shortcuts, then the categories as
 * pictures, then the remaining pages in a quiet list.
 */
.ho-menu { display: grid; gap: var(--ho-4); }

.ho-menu__quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ho-2); }

.ho-menu__quick-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 var(--ho-3);
  border: 1px solid var(--ho-line);
  border-radius: var(--ho-r-md);
  background: var(--ho-cream-50);
  color: var(--ho-ink-700);
  font-size: var(--ho-fs-sm);
  font-weight: 800;
}
.ho-menu__quick-item:hover { border-color: var(--ho-amber-300); color: var(--ho-amber-600); }
.ho-menu__quick-item--deal {
  border-color: rgba(220, 38, 38, .2);
  background: rgba(220, 38, 38, .06);
  color: var(--ho-danger);
}

.ho-menu__label {
  margin: 0;
  font-size: var(--ho-fs-xs);
  font-weight: 800;
  color: var(--ho-ink-400);
}

.ho-menu__cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ho-3) var(--ho-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ho-menu__cats a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ho-ink-700);
  text-align: center;
}
.ho-menu__cats a:hover .ho-menu__cat-thumb { border-color: var(--ho-amber-400); }

.ho-menu__cat-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border: 1.5px solid var(--ho-line-soft);
  border-radius: 50%;
  background: var(--ho-cream-100);
  color: var(--ho-amber-600);
  overflow: hidden;
  transition: border-color var(--ho-fast);
}
.ho-menu__cat-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ho-menu__cat-name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The remaining pages: compact rows, no heavy dividers. */
.ho-menu .ho-nav__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}
.ho-menu .ho-nav__list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 var(--ho-3);
  border-radius: var(--ho-r-sm);
  color: var(--ho-ink-700);
  font-size: var(--ho-fs-sm);
  font-weight: 600;
}
.ho-menu .ho-nav__list > li > a:hover { background: var(--ho-cream-100); color: var(--ho-amber-600); }
.ho-menu .ho-nav__list > li.current-menu-item > a { background: var(--ho-amber-50); color: var(--ho-amber-700); font-weight: 800; }

/* ---------------------------------------------------------------- prose --- */

/* Anything written in an editor: a post body, a page, a product description,
   a category blurb. It is not a product-page detail, so it lives here where
   every page can reach it. */
.ho-prose { max-width: 80ch; font-size: var(--ho-fs-md); color: var(--ho-ink-600); line-height: 2.2; }
.ho-prose h2, .ho-prose h3, .ho-prose h4 { margin-top: var(--ho-6); }
.ho-prose img { border-radius: var(--ho-r-md); margin-block: var(--ho-4); }
.ho-prose ul, .ho-prose ol { padding-inline-start: 1.5em; }
.ho-prose li { margin-bottom: 6px; }
.ho-prose blockquote {
  margin: var(--ho-5) 0;
  padding: var(--ho-4) var(--ho-5);
  border-inline-start: 4px solid var(--ho-amber-400);
  border-radius: var(--ho-r-sm);
  background: var(--ho-amber-50);
}
.ho-prose table { margin-block: var(--ho-4); font-size: var(--ho-fs-sm); }
.ho-prose th, .ho-prose td { padding: var(--ho-2) var(--ho-3); border: 1px solid var(--ho-line); }

/* ------------------------------------------------------- category tiles --- */

/* The home page, the about page and the «دسته‌بندی‌ها» Elementor widget all
   draw this grid, so it cannot live in a single page's stylesheet. */
.ho-cat-grid {
  display: grid;
  gap: var(--ho-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) { .ho-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ho-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ho-4); } }

.ho-cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ho-2);
  padding: var(--ho-5) var(--ho-3) var(--ho-4);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  /* A pool of honey light under the hexagon, fading into plain card white. */
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, var(--ho-amber-50), transparent 68%),
    var(--ho-surface);
  text-align: center;
  overflow: hidden;
  transition: border-color var(--ho-base-t), box-shadow var(--ho-base-t), transform var(--ho-base-t);
}

/* The comb motif only appears on hover, so the grid stays calm at rest. */
.ho-cat-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='39' viewBox='0 0 34 39'%3E%3Cpath d='M17 0l15 8.7v17.4L17 35 2 26.1V8.7z' fill='none' stroke='%23e9860f' stroke-opacity='.16' stroke-width='1.3'/%3E%3C/svg%3E");
  background-size: 34px 39px;
  opacity: 0;
  transition: opacity var(--ho-base-t);
  pointer-events: none;
}

.ho-cat-tile:hover {
  border-color: var(--ho-amber-300);
  box-shadow: var(--ho-shadow-md);
  transform: translateY(-3px);
}
.ho-cat-tile:hover::before { opacity: 1; }

.ho-cat-tile > * { position: relative; }

.ho-cat-tile__media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px; height: 94px;
  background: linear-gradient(160deg, #fff, var(--ho-cream-100));
  color: var(--ho-amber-500);
  overflow: hidden;
  /* Hexagon mask ties the tiles to the honeycomb theme. */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform var(--ho-base-t);
}
.ho-cat-tile:hover .ho-cat-tile__media { transform: scale(1.06); }
.ho-cat-tile .ho-cat-tile__media img { width: 100%; height: 100%; object-fit: cover; }

.ho-cat-tile__name {
  font-size: var(--ho-fs-sm);
  font-weight: 800;
  color: var(--ho-ink-800);
  line-height: 1.6;
}

/* The product count reads as a tag rather than a caption, which gives the
   bottom of the tile something to sit on. */
.ho-cat-tile__count {
  padding: 2px 10px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-amber-50);
  color: var(--ho-amber-700);
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  transition: background var(--ho-fast), color var(--ho-fast);
}
.ho-cat-tile:hover .ho-cat-tile__count {
  background: var(--ho-amber-500);
  color: #fff;
}

/* --------------------------------------------------------- search field --- */

/* Shared by the blog header and the 404 page, which load different page
   stylesheets — so it belongs to neither of them. */

.ho-blog__search {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  max-width: 520px;
  margin-top: var(--ho-4);
  padding: 4px 4px 4px var(--ho-4);
  border: 1.5px solid var(--ho-line);
  border-radius: var(--ho-r-pill);
  background: var(--ho-surface);
}
.ho-blog__search:focus-within { border-color: var(--ho-amber-400); box-shadow: 0 0 0 4px var(--ho-amber-50); }
.ho-blog__search .ho-icon { flex: none; color: var(--ho-ink-400); }
.ho-blog__search input {
  flex: 1 1 auto;
  min-height: 38px;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none !important;
}
.ho-blog__search .ho-btn { flex: none; }

/* The buy box, the checkout sidebar and the Elementor widget all draw this
   card, and they load different page stylesheets. */
/* ------------------------------------------------------------- cashback -- */

.ho-cashback {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ho-3);
  width: 100%;
  margin-top: var(--ho-4);
  padding: var(--ho-4);
  border: 1px solid var(--ho-amber-200);
  border-radius: var(--ho-r-md);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, .85), transparent 60%),
    linear-gradient(135deg, var(--ho-amber-50), #fff8ea);
  box-shadow: var(--ho-shadow-xs);
  overflow: hidden;
}

/* A faint comb pattern behind the text, the same motif the rest of the theme
   uses for its honey surfaces. */
.ho-cashback::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M14 0l12 7v14l-12 7-12-7V7z' fill='none' stroke='%23e9860f' stroke-opacity='.11' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: 28px 32px;
  pointer-events: none;
}

.ho-cashback > * { position: relative; }

.ho-cashback__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ho-amber-400), var(--ho-amber-500));
  color: #fff;
  box-shadow: var(--ho-shadow-amber);
}

.ho-cashback__body { flex: 1 1 190px; min-width: 0; }

.ho-cashback__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--ho-fs-sm);
  font-weight: 800;
  color: var(--ho-ink-900);
}

.ho-cashback__rate {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-amber-500);
  color: #fff;
  font-size: var(--ho-fs-xs);
  font-weight: 800;
}

.ho-cashback__text {
  margin: 5px 0 0;
  font-size: var(--ho-fs-xs);
  color: var(--ho-ink-600);
  line-height: 2;
}
.ho-cashback__text b { color: var(--ho-amber-700); font-weight: 800; }

/* The exact sum, when the caller knows it — the one number worth reading. */
.ho-cashback__amount {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: var(--ho-2) var(--ho-4);
  border: 1px dashed var(--ho-amber-300);
  border-radius: var(--ho-r-sm);
  background: rgba(255, 255, 255, .78);
  text-align: center;
}
.ho-cashback__amount small { font-size: 10.5px; color: var(--ho-ink-400); }
.ho-cashback__amount b { font-size: var(--ho-fs-md); font-weight: 900; color: var(--ho-amber-700); }

/* ------------------------------------------------------------ ripples --- */

/* Shared by the product video and the home page hero video. It used to live in
   the product stylesheet, which the home page never loads — so the hero's
   waves had nothing to animate and never moved for anyone. */
@keyframes ho-ripple {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* A wave that leaves the button, coloured, and fades as it travels. */
@keyframes ho-wave {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* The button itself breathes, very slightly. */
@keyframes ho-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* With reduced motion nothing travels or grows; the halo only glows. */
@keyframes ho-glow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(245, 194, 66, .35), 0 0 0 14px rgba(245, 194, 66, .15), 0 12px 34px rgba(233, 134, 15, .5); }
  50%      { box-shadow: 0 0 0 8px rgba(245, 194, 66, .55), 0 0 0 20px rgba(245, 194, 66, .22), 0 12px 40px rgba(233, 134, 15, .65); }
}