/* =============================================================================
   Single product — gallery, buy box, variations, tabs, reviews, sticky bar.
   ========================================================================== */

.ho-product { padding-block: var(--ho-6) var(--ho-12); }
/* On a phone the breadcrumb already brings its own bottom padding. */
@media (max-width: 767px) { .ho-product { padding-top: var(--ho-1); } }

.ho-product .ho-section { padding-block: 20px 24px; }
@media (max-width: 767px) { .ho-product .ho-section { padding-block: 16px 20px; } }
.ho-product .ho-section__title { margin-bottom: 10px !important; }

.ho-product__top {
  display: grid;
  gap: var(--ho-6);
}
@media (min-width: 900px) {
  .ho-product__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ho-10);
    align-items: start;
  }
}
@media (min-width: 1200px) {
  .ho-product__top { grid-template-columns: 1.05fr .95fr; }
}

/* --------------------------------------------------------------- gallery -- */

.ho-gallery {
  position: sticky;
  top: calc(var(--ho-header-h) + var(--ho-4));
  display: grid;
  gap: var(--ho-3);
}
@media (max-width: 899px) { .ho-gallery { position: static; } }

.ho-gallery__stage {
  position: relative;
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-lg);
  background: var(--ho-surface);
  overflow: hidden;
}

.ho-gallery__badge {
  position: absolute;
  top: var(--ho-3);
  inset-inline-start: var(--ho-3);
  z-index: 2;
}

/* The discount badge already holds that corner, so the flash badge takes the
   opposite one rather than stacking on top of it. */
.ho-gallery__badge--flash {
  inset-inline-start: auto;
  inset-inline-end: var(--ho-3);
}

.ho-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ho-gallery__track::-webkit-scrollbar { display: none; }

.ho-gallery__slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1;
}
.ho-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ho-surface);
}

.ho-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-top: -20px;
  border: 1px solid var(--ho-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ho-ink-700);
  cursor: pointer;
  box-shadow: var(--ho-shadow-sm);
  transition: background var(--ho-fast), color var(--ho-fast);
}
.ho-gallery__nav:hover { background: #fff; color: var(--ho-amber-600); }
/* The strip runs right to left, so «next» travels leftwards and belongs on
   the inline-end edge. Swapped, the two chevrons point at each other. */
.ho-gallery__nav--prev { inset-inline-start: var(--ho-3); }
.ho-gallery__nav--next { inset-inline-end: var(--ho-3); }
@media (min-width: 900px) { .ho-gallery__nav { display: flex; } }

.ho-gallery__dots {
  position: absolute;
  inset-inline: 0;
  bottom: var(--ho-3);
  display: flex;
  justify-content: center;
  gap: 5px;
}
.ho-gallery__dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ho-ink-200);
  transition: width var(--ho-fast), background var(--ho-fast);
}
.ho-gallery__dots span.is-active { width: 18px; border-radius: 3px; background: var(--ho-amber-500); }
@media (min-width: 900px) { .ho-gallery__dots { display: none; } }

.ho-gallery__thumbs {
  display: flex;
  gap: var(--ho-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.ho-gallery__thumbs::-webkit-scrollbar { display: none; }

.ho-gallery__thumb {
  width: 66px; height: 66px;
  padding: 3px;
  border: 2px solid var(--ho-line);
  border-radius: var(--ho-r-sm);
  background: var(--ho-surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--ho-fast);
}
.ho-gallery__thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: .62;
  transition: opacity var(--ho-fast);
}
.ho-gallery__thumb.is-active {
  border-color: var(--ho-amber-500);
  box-shadow: 0 0 0 3px var(--ho-amber-50);
}
.ho-gallery__thumb.is-active img,
.ho-gallery__thumb:hover img { opacity: 1; }

/* --------------------------------------------------------------- summary -- */

.ho-product__title {
  margin: 0 0 var(--ho-3);
  font-size: var(--ho-fs-xl);
  font-weight: 900;
  line-height: 1.6;
}
@media (min-width: 768px) { .ho-product__title { font-size: var(--ho-fs-2xl); } }

.ho-product__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ho-4);
  padding-bottom: var(--ho-4);
  border-bottom: 1px solid var(--ho-line-soft);
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-400);
}

.ho-product__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ho-ink-600);
}
.ho-product__rating .ho-icon { color: var(--ho-gold); fill: var(--ho-gold); }
.ho-product__rating b { font-weight: 800; }

.ho-product__stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.ho-product__stock.is-in { color: var(--ho-green-600); }
.ho-product__stock.is-out { color: var(--ho-danger); }

.ho-product__short {
  margin: var(--ho-4) 0;
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
  line-height: 2.1;
}

/* Buy box ----------------------------------------------------------------- */

.ho-product__buybox {
  margin-top: var(--ho-5);
  padding: var(--ho-5);
  border: 1px solid var(--ho-line);
  border-radius: var(--ho-r-lg);
  background: var(--ho-surface);
  box-shadow: var(--ho-shadow-sm);
}

.ho-product__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ho-3);
  flex-wrap: wrap;
}

.ho-product__price {
  display: flex;
  align-items: baseline;
  gap: var(--ho-2);
  font-size: var(--ho-fs-2xl);
  font-weight: 900;
  color: var(--ho-ink-900);
}
.ho-product__price del {
  font-size: var(--ho-fs-md);
  font-weight: 500;
  color: var(--ho-ink-300);
}
.ho-product__price ins { text-decoration: none; }
.ho-product__price .woocommerce-Price-currencySymbol { font-size: .6em; color: var(--ho-ink-500); }

.ho-product__urgency {
  margin: var(--ho-2) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  color: var(--ho-danger);
}

form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ho-3);
  margin: var(--ho-5) 0 0;
}
form.cart .quantity { flex: none; }
form.cart .single_add_to_cart_button {
  flex: 1 1 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ho-2);
  min-height: 52px;
  padding: 0 var(--ho-8);
  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-lg);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--ho-shadow-amber);
  transition: filter var(--ho-fast), transform var(--ho-fast);
}
form.cart .single_add_to_cart_button:hover { filter: brightness(1.05); }
form.cart .single_add_to_cart_button:active { transform: translateY(1px); }
form.cart .single_add_to_cart_button.is-loading { opacity: .7; pointer-events: none; }
form.cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

/* Variations -------------------------------------------------------------- */

.variations {
  width: 100%;
  margin: 0 0 var(--ho-2);
  border: 0;
}
.variations tbody, .variations tr, .variations th, .variations td { display: block; width: 100%; }
.variations th {
  padding: 0 0 6px;
  text-align: start;
  font-size: var(--ho-fs-sm);
  font-weight: 800;
  color: var(--ho-ink-800);
}
.variations td { padding: 0 0 var(--ho-4); }

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

.ho-swatch {
  min-height: 42px;
  padding: 0 var(--ho-5);
  border: 1.5px solid var(--ho-line);
  border-radius: var(--ho-r-pill);
  background: var(--ho-surface);
  color: var(--ho-ink-700);
  font-family: inherit;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ho-fast);
}
.ho-swatch:hover:not([disabled]) { border-color: var(--ho-amber-300); color: var(--ho-amber-600); }
.ho-swatch.is-active {
  border-color: var(--ho-amber-500);
  background: var(--ho-amber-50);
  color: var(--ho-amber-700);
  box-shadow: 0 0 0 3px var(--ho-amber-50);
}
.ho-swatch[disabled] {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* The main price above already follows the chosen variation (and so does the
   buy bar), so WooCommerce's second copy under the dropdowns is not shown.
   Its quantity box and button give way to the theme's own stepper below. */
/* !important: WooCommerce's variation script shows the quantity box with an
   inline style each time a variation is picked. */
.single-product .variations_form .woocommerce-variation-price,
.single-product .variations_form .woocommerce-variation-add-to-cart .quantity,
.single-product .variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button { display: none !important; }
/* The space under the choices was for WooCommerce's button; the stepper
   below keeps the buy box's own gap. (Product and pack pages alike.) */
.single-product .variations_form td.value { padding-bottom: 0; }
.woocommerce-variation-price { margin-bottom: var(--ho-3); font-size: var(--ho-fs-xl); font-weight: 900; }
.woocommerce-variation-availability { margin-bottom: var(--ho-2); font-size: var(--ho-fs-sm); font-weight: 700; }
.reset_variations {
  display: inline-block;
  margin-bottom: var(--ho-3);
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  color: var(--ho-danger);
}

/* Assurances -------------------------------------------------------------- */

.ho-assurances {
  display: grid;
  gap: var(--ho-2);
  width: 100%;
  margin: var(--ho-5) 0 0;
  padding: var(--ho-4) 0 0;
  border-top: 1px dashed var(--ho-line);
  list-style: none;
}
.ho-assurances li {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
}
.ho-assurances .ho-icon { flex: none; color: var(--ho-green-500); }

/* Facts ------------------------------------------------------------------- */

.ho-product__facts {
  display: grid;
  gap: var(--ho-3);
  margin: var(--ho-5) 0 0;
  padding: var(--ho-4);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-cream-50);
  list-style: none;
}
.ho-product__facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--ho-2);
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-600);
  line-height: 2;
}
.ho-product__facts .ho-icon { flex: none; margin-top: 5px; color: var(--ho-amber-500); }
.ho-product__facts strong { color: var(--ho-ink-900); }

/* ------------------------------------------------------------------ tabs -- */

.ho-tabs { margin-top: var(--ho-10); }

.ho-tabs__nav {
  display: flex;
  gap: var(--ho-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ho-line);
}
.ho-tabs__nav::-webkit-scrollbar { display: none; }

.ho-tabs__tab {
  flex: none;
  padding: var(--ho-3) var(--ho-5);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ho-ink-500);
  font-family: inherit;
  font-size: var(--ho-fs-md);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ho-fast), border-color var(--ho-fast);
}
.ho-tabs__tab:hover { color: var(--ho-ink-800); }
.ho-tabs__tab.is-active { color: var(--ho-amber-600); border-bottom-color: var(--ho-amber-500); }

.ho-tabs__panel { padding-top: var(--ho-6); }
.ho-tabs__panel#ho-panel-description { max-width: 100%; }
.ho-specs {
  max-width: 640px;
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  overflow: hidden;
  font-size: var(--ho-fs-sm);
}
.ho-specs tr:nth-child(odd) { background: var(--ho-cream-50); }
.ho-specs th, .ho-specs td { padding: var(--ho-3) var(--ho-4); text-align: start; }
.ho-specs th { width: 180px; font-weight: 700; color: var(--ho-ink-700); }
.ho-specs td { color: var(--ho-ink-600); }

/* --------------------------------------------------------- related rows -- */

.related, .up-sells {
  margin-top: var(--ho-12);
  padding-inline: var(--ho-gutter);
  max-width: var(--ho-container);
  margin-inline: auto;
}
.related > h2, .up-sells > h2 {
  margin-bottom: var(--ho-5);
  font-size: var(--ho-fs-xl);
  font-weight: 900;
}

/* ----------------------------------------------------------- sticky bar -- */

/* The purchase bar lives inside `.ho-dock`, so it is positioned by the dock
   rather than fixed on its own. */
.ho-buybar {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-3) var(--ho-4);
  background: transparent;
  border-bottom: 1px solid rgba(63, 48, 24, .09);
}
.ho-buybar[hidden] { display: none; }
.ho-buybar__price {
  flex: 1 1 auto;
  font-size: var(--ho-fs-md);
  font-weight: 900;
  color: var(--ho-ink-900);
}
.ho-buybar__price del { font-size: var(--ho-fs-xs); }
.ho-buybar .ho-btn { flex: none; }
.ho-buybar__buy { flex: none; display: flex; }
.ho-buybar__buy .ho-btn[hidden] { display: none; }
/* The page's stepper, a size down to fit the bar. */
.ho-buybar__stepper { padding: 3px; }
.ho-buybar__stepper .ho-buy__btn { width: 38px; height: 38px; }
.ho-buybar__stepper .ho-buy__count { min-width: 36px; font-size: var(--ho-fs-md); }

/* ---------------------------------------------------------------- reviews -- */

.ho-reviews__summary {
  display: none !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ho-6);
  padding: var(--ho-5);
  margin-bottom: var(--ho-6);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-cream-50);
}
.ho-reviews__score { text-align: center; }
.ho-reviews__score b { display: block; font-size: var(--ho-fs-4xl); font-weight: 900; color: var(--ho-amber-600); line-height: 1.2; }
.ho-reviews__score small { font-size: var(--ho-fs-sm); color: var(--ho-ink-400); }

.ho-review-list { display: grid; gap: var(--ho-4); margin: 0; padding: 0; list-style: none; }

.ho-review {
  padding: var(--ho-5);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  background: var(--ho-surface);
}
.ho-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ho-3);
  margin-bottom: var(--ho-3);
}
.ho-review__author { font-weight: 800; color: var(--ho-ink-900); }
.ho-review__date { font-size: var(--ho-fs-xs); color: var(--ho-ink-400); }
.ho-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-green-50);
  color: var(--ho-green-600);
  font-size: var(--ho-fs-xs);
  font-weight: 700;
}
.ho-review__text { font-size: var(--ho-fs-sm); color: var(--ho-ink-600); line-height: 2.1; }
.ho-review__photos { display: flex; gap: var(--ho-2); margin-top: var(--ho-3); flex-wrap: wrap; }

/* ------------------------------------------------------------ replies -- */

/* Answers sit inside the review they answer, set in from its inline-start
   edge with a rule down that side, so the thread reads as a conversation. The
   list itself carries no numbers — the browser's default «1.» beside a lone
   reply is what made it look broken. */
.ho-review__replies {
  display: grid;
  gap: var(--ho-2);
  margin: var(--ho-4) 0 0;
  padding: 0;
  list-style: none;
}

.ho-reply {
  position: relative;
  padding: var(--ho-3) var(--ho-4);
  padding-inline-start: calc(var(--ho-4) + 3px);
  border-radius: var(--ho-r-sm);
  background: var(--ho-cream-50);
}
.ho-reply::before {
  content: '';
  position: absolute;
  inset-block: var(--ho-2);
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--ho-line);
}

/* The shop's own answer is the one a shopper is looking for. */
.ho-reply--shop { background: var(--ho-amber-50); }
.ho-reply--shop::before { background: var(--ho-amber-400); }

.ho-reply__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--ho-2);
  margin-bottom: 4px;
}
.ho-reply__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ho-surface);
  color: var(--ho-ink-400);
}
.ho-reply--shop .ho-reply__icon { background: var(--ho-amber-500); color: #fff; }

.ho-reply__author { font-size: var(--ho-fs-sm); font-weight: 800; color: var(--ho-ink-900); }
.ho-reply__badge {
  padding: 1px 8px;
  border-radius: var(--ho-r-pill);
  background: var(--ho-surface);
  color: var(--ho-ink-500);
  font-size: 11px;
  font-weight: 700;
}
.ho-reply--shop .ho-reply__badge { background: #fff; color: var(--ho-amber-700); }
.ho-reply__date { margin-inline-start: auto; font-size: var(--ho-fs-xs); color: var(--ho-ink-400); }

.ho-reply__text { font-size: var(--ho-fs-sm); color: var(--ho-ink-600); line-height: 2; }
.ho-reply__text p { margin: 0; }

/* A reply to a reply steps in once more, then stays put. */
.ho-reply .ho-review__replies { margin-top: var(--ho-2); }
.ho-review__photos img {
  width: 76px; height: 76px;
  border-radius: var(--ho-r-sm);
  object-fit: cover;
  border: 1px solid var(--ho-line);
}

/* ------------------------------------------------------------ review form -- */

.ho-reviews__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-500);
}
.ho-reviews__note .ho-icon { color: var(--ho-green-600); }

.ho-reviews__empty,
.ho-reviews__locked {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  padding: var(--ho-5);
  border: 1px dashed var(--ho-line);
  border-radius: var(--ho-r-md);
  color: var(--ho-ink-500);
  font-size: var(--ho-fs-sm);
}
.ho-reviews__empty .ho-icon { color: var(--ho-gold); }

.ho-reviews__score small { display: block; margin-top: 4px; }
.ho-reviews__score .ho-review-card__stars { justify-content: center; margin-top: 4px; }

.ho-review-form {
  margin-top: var(--ho-8);
  padding-top: var(--ho-6);
  border-top: 1px solid var(--ho-line);
}

.ho-review-form__hint {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  margin-bottom: var(--ho-5);
  padding: var(--ho-3) var(--ho-4);
  border: 1px dashed var(--ho-green-500);
  border-radius: var(--ho-r-md);
  background: var(--ho-green-50);
  font-size: var(--ho-fs-sm);
  color: var(--ho-green-600);
}
.ho-review-form__hint .ho-icon { flex: none; }

.ho-review-form__title { margin: 0 0 var(--ho-4); font-size: var(--ho-fs-lg); }

.comment-form-rating select { max-width: 280px; }

/* Photo dropzone ---------------------------------------------------------- */

/* Shown instead of the photo field to reviewers who have not bought it. */
.ho-field-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--ho-3);
  font-size: var(--ho-fs-xs);
  color: var(--ho-ink-500);
}
.ho-field-note .ho-icon { flex: none; color: var(--ho-amber-500); }

.ho-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--ho-6) var(--ho-4);
  border: 2px dashed var(--ho-line);
  border-radius: var(--ho-r-md);
  background: var(--ho-cream-50);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ho-fast), background var(--ho-fast);
}
.ho-dropzone:hover,
.ho-dropzone.is-dragging {
  border-color: var(--ho-amber-400);
  background: var(--ho-amber-50);
}
.ho-dropzone__icon { color: var(--ho-amber-500); }
.ho-dropzone__text { font-size: var(--ho-fs-sm); font-weight: 700; color: var(--ho-ink-600); }
.ho-dropzone__hint { font-size: var(--ho-fs-xs); color: var(--ho-ink-400); }

.ho-dropzone__previews { display: flex; flex-wrap: wrap; gap: var(--ho-2); margin-top: var(--ho-3); }
.ho-dropzone__thumb { position: relative; }
.ho-dropzone__thumb img {
  width: 76px; height: 76px;
  border-radius: var(--ho-r-sm);
  object-fit: cover;
  border: 1px solid var(--ho-line);
}
.ho-dropzone__remove {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--ho-danger);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

/* Star rating input.
   WooCommerce swaps the rating <select> for a row of links that its own
   stylesheet renders with an icon font. That stylesheet is dequeued, so the
   stars are drawn here with a plain character instead. */

p.stars {
  display: flex;
  gap: 2px;
  margin: 0;
  font-size: 0;
}

/* Plain order, so the stars fill from the same side as every other star row
   in the theme. Which ones are lit is decided in JavaScript: the markup runs
   1→5 and CSS has no way to reach the siblings *before* an element. */
p.stars > span { display: flex; gap: 2px; }

p.stars a {
  position: relative;
  width: 30px;
  height: 30px;
  font-size: 0;
  text-indent: -9999px;
  color: var(--ho-line);
  transition: color var(--ho-fast), transform var(--ho-fast);
}
p.stars a::before {
  content: '★';
  position: absolute;
  inset: 0;
  font-size: 26px;
  line-height: 30px;
  text-align: center;
  text-indent: 0;
  color: inherit;
}
p.stars a.is-lit { color: var(--ho-gold); }
p.stars a:active { transform: scale(.92); }
p.stars a:focus-visible { outline: 3px solid var(--ho-amber-300); outline-offset: 2px; border-radius: var(--ho-r-xs); }

.comment-form-rating label { display: block; margin-bottom: 6px; }

/* =============================================================================
   Restored from the previous version: zoom hint, media thumbs, lightbox,
   quality panel, cashback, jump pills, video section.
   ========================================================================== */

/* ------------------------------------------------------------ zoom hint -- */

.ho-gallery__zoom-hint {
  position: absolute;
  inset-inline-start: var(--ho-3);
  bottom: var(--ho-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--ho-3);
  border: 0;
  border-radius: var(--ho-r-pill);
  background: rgba(31, 27, 22, .72);
  color: #fff;
  font-family: inherit;
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--ho-fast);
}
.ho-gallery__zoom-hint:hover { background: rgba(31, 27, 22, .88); }
@media (min-width: 900px) { .ho-gallery__zoom-hint { bottom: var(--ho-4); } }

.ho-gallery__img { cursor: zoom-in; }

.ho-gallery__counter {
  position: absolute;
  inset-inline-end: var(--ho-3);
  bottom: var(--ho-3);
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--ho-r-pill);
  background: rgba(31, 27, 22, .6);
  color: #fff;
  font-size: var(--ho-fs-xs);
  font-weight: 700;
}
@media (min-width: 900px) { .ho-gallery__counter { display: none; } }

/* Thumbnails carrying a video or certificate tag ------------------------- */

.ho-gallery__thumb { position: relative; }

.ho-gallery__thumb--video,
.ho-gallery__thumb--lab { border-color: var(--ho-amber-300); }

.ho-gallery__thumb--video img { filter: brightness(.6); }

.ho-gallery__thumb-tag {
  position: absolute;
  inset-inline: 2px;
  bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 1px 0;
  border-radius: 4px;
  background: rgba(31, 27, 22, .78);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
}
.ho-gallery__thumb-tag--lab { background: var(--ho-green-600); }
.ho-gallery__thumb--lab img { object-fit: cover; }

/* -------------------------------------------------------------- lightbox -- */

.ho-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--ho-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ho-lightbox[hidden] { display: none; }

.ho-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 7, .94);
  opacity: 0;
  transition: opacity var(--ho-base-t);
}
.ho-lightbox.is-open .ho-lightbox__backdrop { opacity: 1; }

.ho-lightbox__shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  opacity: 0;
  transform: scale(.98);
  transition: opacity var(--ho-base-t), transform var(--ho-base-t);
}
.ho-lightbox.is-open .ho-lightbox__shell { opacity: 1; transform: none; }

.ho-lightbox__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  padding: var(--ho-4);
  color: #fff;
}
.ho-lightbox__title {
  flex: 1 1 auto;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ho-lightbox__counter { font-size: var(--ho-fs-sm); color: rgba(255, 255, 255, .65); }
.ho-lightbox__counter b { color: #fff; }

.ho-lightbox__close {
  display: inline-flex;
  padding: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.ho-lightbox__close:hover { background: rgba(255, 255, 255, .26); }

.ho-lightbox__filters {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ho-2);
  padding: 0 var(--ho-4) var(--ho-3);
}
.ho-lightbox__filter {
  padding: 6px var(--ho-4);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--ho-r-pill);
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font-family: inherit;
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ho-fast);
}
.ho-lightbox__filter:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.ho-lightbox__filter.is-active {
  background: var(--ho-amber-500);
  border-color: var(--ho-amber-500);
  color: #fff;
}

.ho-lightbox__viewport {
  /* `min-height: 0` lets this flex child shrink instead of being pushed out of
     the shell by a tall video. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.ho-lightbox__viewport::-webkit-scrollbar { display: none; }
.ho-lightbox__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.ho-lightbox__slide {
  position: relative;      /* The customer caption is placed against this. */
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ho-4);
  scroll-snap-align: center;
}
.ho-lightbox__slide img,
.ho-lightbox__slide video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--ho-r-md);
}
.ho-lightbox__slide video {
  width: min(100%, 1000px);
  background: #000;
}

.ho-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-top: -23px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background var(--ho-fast);
}
.ho-lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.ho-lightbox__nav--prev { inset-inline-start: var(--ho-4); }
.ho-lightbox__nav--next { inset-inline-end: var(--ho-4); }
@media (min-width: 768px) { .ho-lightbox__nav { display: flex; } }

.ho-lightbox__thumbs {
  flex: none;
  display: flex;
  justify-content: center;
  gap: var(--ho-2);
  padding: var(--ho-3) var(--ho-4) calc(var(--ho-4) + env(safe-area-inset-bottom));
  overflow-x: auto;
  scrollbar-width: none;
}
.ho-lightbox__thumbs::-webkit-scrollbar { display: none; }

.ho-lightbox__thumb {
  flex: none;
  width: 56px; height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--ho-r-sm);
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
  cursor: pointer;
  opacity: .6;
  transition: opacity var(--ho-fast), border-color var(--ho-fast);
}
.ho-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ho-lightbox__thumb.is-active { opacity: 1; border-color: var(--ho-amber-500); }
.ho-lightbox__thumb--video,
.ho-lightbox__thumb--lab { border-color: rgba(255, 255, 255, .35); }

/* --------------------------------------------------------- quality panel -- */

.ho-quality {
  margin: var(--ho-4) 0;
  border: 1px solid var(--ho-line);
  border-radius: var(--ho-r-md);
  background: var(--ho-cream-50);
  overflow: hidden;
}
.ho-quality--cosmetic { background: var(--ho-green-50); border-color: #dcedc8; }

.ho-quality__head {
  display: flex;
  align-items: center;
  gap: var(--ho-2);
  padding: var(--ho-3) var(--ho-4);
  border-bottom: 1px solid var(--ho-line-soft);
  background: rgba(255, 255, 255, .6);
}
.ho-quality__icon { display: inline-flex; color: var(--ho-amber-600); }
.ho-quality--cosmetic .ho-quality__icon { color: var(--ho-green-600); }
.ho-quality__title { flex: 1 1 auto; margin: 0; font-size: var(--ho-fs-sm); font-weight: 800; }

.ho-quality__cert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid var(--ho-amber-300);
  border-radius: var(--ho-r-pill);
  background: var(--ho-surface);
  color: var(--ho-amber-700);
  font-family: inherit;
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.ho-quality__cert:hover { background: var(--ho-amber-50); color: var(--ho-amber-700); }

.ho-quality__rows { display: grid; gap: 0; margin: 0; }
.ho-quality__rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ho-3);
  padding: 10px var(--ho-4);
  font-size: var(--ho-fs-sm);
}
.ho-quality__rows > div + div { border-top: 1px dashed var(--ho-line); }
.ho-quality__rows dt { color: var(--ho-ink-500); }
.ho-quality__rows dd { margin: 0; font-weight: 700; color: var(--ho-ink-800); text-align: end; }
.ho-quality__rows dd.is-good { color: var(--ho-green-600); }

/* --------------------------------------------------------------- purity -- */

.ho-product__purity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--ho-green-600);
}

/* ------------------------------------------------------------ swatch tag -- */

.ho-swatch { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.ho-swatch.is-cheapest { border-color: var(--ho-green-500); }
.ho-swatch__tag {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ho-green-600);
}

/* ------------------------------------------------------------ jump pills -- */

.ho-jump {
  position: sticky;
  top: 62px;
  z-index: 6;
  margin-top: var(--ho-10);
  padding-block: var(--ho-2);
  background: rgba(253, 251, 247, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ho-line-soft);
}
@media (min-width: 992px) { .ho-jump { top: 132px; } }

.ho-jump__inner {
  display: flex;
  gap: var(--ho-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.ho-jump__inner::-webkit-scrollbar { display: none; }

.ho-jump__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  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-size: var(--ho-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--ho-fast);
}
.ho-jump__pill:hover { border-color: var(--ho-amber-300); color: var(--ho-amber-600); }
.ho-jump__pill.is-active {
  background: var(--ho-amber-500);
  border-color: var(--ho-amber-500);
  color: #fff;
}

/* --------------------------------------------------------------- video --- */

.ho-video__poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--ho-r-lg);
  overflow: hidden;
  background: var(--ho-ink-900);
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.ho-video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  transition: transform .5s var(--ho-ease), opacity var(--ho-fast);
}
.ho-video__poster:hover img { transform: scale(1.03); opacity: .5; }

.ho-video__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ho-2);
  padding: var(--ho-5);
  color: #fff;
  text-align: center;
}
.ho-video__overlay strong { font-size: var(--ho-fs-md); font-weight: 800; }
.ho-video__overlay small { font-size: var(--ho-fs-xs); color: rgba(255, 255, 255, .75); }

.ho-video__play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  margin-bottom: var(--ho-2);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ho-amber-400), var(--ho-amber-500));
  color: #fff;
  box-shadow: 0 6px 22px rgba(233, 134, 15, .5);
  transition: transform var(--ho-fast);
}

/* Two rings leaving the button on a stagger, so the eye is pulled to it
   without anything moving on the page. */
.ho-video__play::before,
.ho-video__play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  animation: ho-ripple 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
  pointer-events: none;
}
.ho-video__play::after { animation-delay: 1.2s; }


.ho-video__poster:hover .ho-video__play { transform: scale(1.08); }

/* A pulse that only draws attention is decoration, so it does stop. */
@media (prefers-reduced-motion: reduce) {
  .ho-video__play::before,
  .ho-video__play::after { display: none; }
}

/* ------------------------------------------------- richer sticky buy bar -- */

.ho-buybar__product { flex: 1 1 auto; display: flex; align-items: center; gap: var(--ho-2); min-width: 0; }
.ho-buybar__thumb {
  flex: none;
  width: 42px; height: 42px;
  border-radius: var(--ho-r-sm);
  object-fit: cover;
  background: var(--ho-cream-100);
}
.ho-buybar__meta { display: flex; flex-direction: column; min-width: 0; justify-content: center; }
.ho-buybar__label {
  font-size: var(--ho-fs-xs);
  font-weight: 600;
  color: var(--ho-ink-400);
  line-height: 1.4;
}

/* ------------------------------------------------------ review incentive -- */

.ho-review-incentive {
  display: flex;
  align-items: center;
  gap: var(--ho-3);
  margin-bottom: var(--ho-5);
  padding: var(--ho-4) var(--ho-5);
  border: 1.5px dashed var(--ho-amber-400);
  border-radius: var(--ho-r-md);
  background: linear-gradient(135deg, var(--ho-amber-50), var(--ho-gold-soft));
}
.ho-review-incentive__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);
}
.ho-review-incentive strong { display: block; font-size: var(--ho-fs-md); color: var(--ho-ink-900); }
.ho-review-incentive p { margin: 4px 0 0; font-size: var(--ho-fs-sm); color: var(--ho-ink-600); line-height: 2; }

/* ------------------------------------------------- information boxes ----- */

.ho-info-grid {
  display: block;
}
@media (min-width: 640px) {
  .ho-info-grid {
    columns: 2;
    column-gap: var(--ho-3);
  }
}
@media (min-width: 1024px) {
  .ho-info-grid {
    columns: 3;
    column-gap: var(--ho-3);
  }
}

.ho-info-card {
  /* Each kind of box has its own tone; the rest of the card follows it. */
  --tone: var(--ho-amber-600);
  --tone-soft: var(--ho-amber-50);
  --tone-line: var(--ho-amber-200);
  position: relative;
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: var(--ho-3);
  overflow: hidden;
  padding: var(--ho-5);
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-lg);
  background:
    radial-gradient(120% 70% at 100% 0%, var(--tone-soft), transparent 60%),
    var(--ho-surface);
  box-shadow: var(--ho-shadow-xs);
  transition: transform var(--ho-base-t), box-shadow var(--ho-base-t), border-color var(--ho-base-t);
}
/* A band of the tone along the top edge. */
.ho-info-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--tone) 30%, var(--tone) 70%, transparent);
  opacity: .75;
}
/* A faint honeycomb in the bottom corner fading smoothly into background. */
.ho-info-card::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 130px;
  height: 130px;
  background: var(--tone);
  opacity: .10;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v32L28 62 4 48V16z' fill='none' stroke='%23000' stroke-width='5'/%3E%3C/svg%3E"), radial-gradient(circle at bottom left, #000 25%, transparent 80%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v32L28 62 4 48V16z' fill='none' stroke='%23000' stroke-width='5'/%3E%3C/svg%3E"), radial-gradient(circle at bottom left, #000 25%, transparent 80%);
  -webkit-mask-size: 38px 44px, 100% 100%;
  mask-size: 38px 44px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
.ho-info-card:hover {
  border-color: var(--tone-line);
  box-shadow: var(--ho-shadow-md);
  transform: translateY(-2px);
}

.ho-info-card--benefits,
.ho-info-card--harvest  { --tone: var(--ho-green-600); --tone-soft: var(--ho-green-50); --tone-line: #cde8b4; }
.ho-info-card--warnings { --tone: var(--ho-danger); --tone-soft: #fdecec; --tone-line: #f4c4c4; }
.ho-info-card--storage  { --tone: #3a7bd5; --tone-soft: #ebf2fd; --tone-line: #c6d8f5; }
.ho-info-card--sensory,
.ho-info-card--usage    { --tone: #c27a0a; --tone-soft: var(--ho-gold-soft); --tone-line: var(--ho-amber-200); }

.ho-info-card__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--ho-4);
  font-size: var(--ho-fs-md);
  font-weight: 900;
  color: var(--ho-ink-900);
}

.ho-info-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 14px;
  background: var(--tone-soft);
  color: var(--tone);
  box-shadow: inset 0 0 0 1px var(--tone-line), 0 4px 10px -6px var(--tone);
}

.ho-info-card__body {
  position: relative;
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-600);
  line-height: 2.1;
}
.ho-info-card__body p { margin: 0; }

/* Points, not a paragraph: the shop's copy is written as a list separated by
   slashes, and reading it back as one sentence loses that. */
.ho-info-card__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ho-info-card__list li {
  position: relative;
  padding-inline-start: 26px;
  line-height: 1.9;
}
/* A small tick in the box's tone. */
.ho-info-card__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .3em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--tone-soft);
  box-shadow: inset 0 0 0 1px var(--tone-line);
}
.ho-info-card__list li::after {
  content: '';
  position: absolute;
  inset-inline-start: 6px;
  top: calc(.3em + 4px);
  width: 5px; height: 9px;
  border: solid var(--tone);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ho-gallery__thumb-tag--customer { background: var(--ho-info); }

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

.ho-reviews-sheet__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ho-2);
  padding: var(--ho-5);
  color: var(--ho-ink-400);
  font-size: var(--ho-fs-sm);
}
.ho-reviews-sheet__loader[hidden] { display: none; }

#ho-reviews-sheet .ho-review-list { gap: var(--ho-3); }

/* ------------------------------------------------------------- buy control -- */

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

.ho-buy__add { flex: 1 1 220px; }
.ho-buy__add[hidden] { display: none; }

.ho-buy__stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1.5px solid var(--ho-amber-300);
  border-radius: var(--ho-r-pill);
  background: var(--ho-amber-50);
}
.ho-buy__stepper[hidden] { display: none; }

.ho-buy__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--ho-surface);
  color: var(--ho-amber-600);
  cursor: pointer;
  transition: background var(--ho-fast), color var(--ho-fast), transform var(--ho-fast);
}
.ho-buy__btn:hover { background: var(--ho-amber-500); color: #fff; }
.ho-buy__btn:active { transform: scale(.93); }
.ho-buy__btn--minus { color: var(--ho-danger); }
.ho-buy__btn--minus:hover { background: var(--ho-danger); color: #fff; }
.ho-buy__btn[disabled] { opacity: .45; pointer-events: none; }

.ho-buy__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  font-size: var(--ho-fs-lg);
  font-weight: 900;
  color: var(--ho-ink-900);
}
.ho-buy__count.is-busy b { display: none; }
.ho-buy__count .ho-spinner { color: var(--ho-amber-600); }

.ho-buy__view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ho-fs-sm);
  font-weight: 700;
  color: var(--ho-amber-600);
}
.ho-buy__view[hidden] { display: none; }

/* ----------------------------------------------------------- sale timer --- */

/*
 * Sits in the buy box, between the price and the add-to-cart control. Its
 * deadline is the product's own WooCommerce sale schedule, so it disappears by
 * itself the moment the discount would stop applying.
 */
.ho-sale-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ho-2);
  margin-block: var(--ho-3);
  padding: var(--ho-2) var(--ho-3);
  border: 1px solid rgba(220, 38, 38, .18);
  border-radius: var(--ho-r-sm);
  background: linear-gradient(135deg, rgba(220, 38, 38, .07), rgba(214, 158, 46, .07));
}

.ho-sale-timer__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ho-fs-sm);
  font-weight: 800;
  color: var(--ho-danger);
}

.ho-sale-timer .ho-countdown__clock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ho-sale-timer .ho-countdown__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  padding: 3px 5px;
  border-radius: 7px;
  background: var(--ho-surface);
  box-shadow: 0 1px 3px rgba(63, 48, 24, .1);
}
.ho-sale-timer .ho-countdown__unit b {
  font-size: var(--ho-fs-md);
  font-weight: 900;
  line-height: 1.2;
  color: var(--ho-ink-900);
}
.ho-sale-timer .ho-countdown__unit small {
  font-size: 9.5px;
  color: var(--ho-ink-400);
}
.ho-sale-timer .ho-countdown__sep { color: var(--ho-ink-300); font-weight: 800; }

/* --------------------------------------------------- lightbox captions --- */

/* Only customer photos carry one: their name, the date and what they wrote,
   so the picture is attributed rather than anonymous. */
.ho-lightbox__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 3px;
  padding: var(--ho-6) var(--ho-4) var(--ho-4);
  background: linear-gradient(to top, rgba(12, 8, 3, .88), transparent);
  color: #fff;
  text-align: start;
  pointer-events: none;
}
.ho-lightbox__caption-who { font-size: var(--ho-fs-sm); font-weight: 800; }
.ho-lightbox__caption-date { font-size: var(--ho-fs-xs); color: rgba(255, 255, 255, .7); }
.ho-lightbox__caption-text {
  margin: 4px 0 0;
  max-width: 62ch;
  font-size: var(--ho-fs-xs);
  line-height: 2;
  color: rgba(255, 255, 255, .92);
}

.ho-review__photo { cursor: zoom-in; }

/* ------------------------------------------------ product trust section --- */

.ho-product-trust {
  width: 100%;
  margin-top: var(--ho-10);
  margin-bottom: var(--ho-6);
  padding: var(--ho-8) var(--ho-6);
  background: linear-gradient(180deg, #fffdf8 0%, #faf5ec 100%);
  border: 1px solid rgba(235, 131, 23, 0.18);
  border-radius: var(--ho-r-lg);
  box-shadow: 0 4px 20px rgba(16, 55, 92, 0.03);
  position: relative;
  overflow: hidden;
}

.ho-product-trust__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--ho-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ho-2);
}

.ho-product-trust__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--ho-r-full);
  background: var(--ho-amber-100);
  color: var(--ho-amber-800);
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}

.ho-product-trust__title {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 800;
  color: var(--ho-ink-900);
  margin: 0;
  line-height: 1.4;
}

.ho-product-trust__subtitle {
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-600);
  margin: 0;
  line-height: 1.7;
}

.ho-product-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ho-4);
  margin-bottom: var(--ho-6);
}

@media (min-width: 768px) {
  .ho-product-trust__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ho-5);
  }
}

.ho-product-trust__card {
  background: #ffffff;
  border: 1px solid var(--ho-line-soft);
  border-radius: var(--ho-r-md);
  padding: var(--ho-5);
  display: flex;
  align-items: flex-start;
  gap: var(--ho-4);
  transition: transform var(--ho-fast), box-shadow var(--ho-fast), border-color var(--ho-fast);
}

.ho-product-trust__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 55, 92, 0.06);
  border-color: var(--ho-amber-300);
}

.ho-product-trust__card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ho-amber-50);
  color: var(--ho-amber-600);
  border: 1px solid var(--ho-amber-200);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ho-fast), color var(--ho-fast), border-color var(--ho-fast);
}

.ho-product-trust__card:hover .ho-product-trust__card-icon {
  background: var(--ho-amber-500);
  color: #ffffff;
  border-color: var(--ho-amber-500);
}

.ho-product-trust__card-body {
  flex: 1;
  min-width: 0;
}

.ho-product-trust__card-title {
  font-size: var(--ho-fs-base);
  font-weight: 800;
  color: var(--ho-ink-900);
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.ho-product-trust__card-text {
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-600);
  margin: 0;
  line-height: 1.85;
}

.ho-product-trust__cta {
  background: #ffffff;
  border: 1.5px dashed var(--ho-amber-400);
  border-radius: var(--ho-r-md);
  padding: var(--ho-5) var(--ho-6);
  display: flex;
  flex-direction: column;
  gap: var(--ho-4);
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .ho-product-trust__cta {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
    align-items: center;
  }
}

.ho-product-trust__cta-info {
  flex: 1;
}

.ho-product-trust__cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  color: var(--ho-amber-700);
  margin-bottom: 4px;
}

.ho-product-trust__cta-title {
  font-size: var(--ho-fs-md);
  font-weight: 800;
  color: var(--ho-ink-900);
  margin: 0 0 4px 0;
}

.ho-product-trust__cta-text {
  font-size: var(--ho-fs-sm);
  color: var(--ho-ink-600);
  margin: 0;
  line-height: 1.7;
}

.ho-product-trust__cta-action {
  flex-shrink: 0;
}

.ho-product-trust__call-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--ho-amber-500) 0%, var(--ho-amber-600) 100%);
  color: #ffffff !important;
  padding: 10px 20px;
  border-radius: var(--ho-r-md);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(235, 131, 23, 0.35);
  transition: transform var(--ho-fast), box-shadow var(--ho-fast);
  text-decoration: none;
}

.ho-product-trust__call-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(235, 131, 23, 0.45);
  background: linear-gradient(135deg, var(--ho-amber-600) 0%, var(--ho-amber-700) 100%);
}

.ho-product-trust__call-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ho-product-trust__call-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.ho-product-trust__call-hint {
  font-size: 11px;
  opacity: 0.9;
  font-weight: 500;
}

.ho-product-trust__call-number {
  font-size: 15px;
  letter-spacing: 0.05em;
  font-family: inherit;
  direction: ltr;
}

/* Fallback cleanup for legacy elementor-12808 if rendered anywhere */
.elementor-12808 {
  width: 100%;
}
.elementor-12808 .elementor-hidden-mobile,
.elementor-12808 .elementor-hidden-desktop {
  display: none !important;
}

@media (max-width: 767px) {
  .ho-product-trust {
    padding: var(--ho-6) var(--ho-4);
    margin-top: var(--ho-6);
  }
  .ho-product-trust__head {
    margin-bottom: var(--ho-5);
  }
  .ho-product-trust__card {
    padding: var(--ho-4);
    gap: var(--ho-3);
  }
  .ho-product-trust__card-icon {
    width: 40px;
    height: 40px;
  }
  .ho-product-trust__cta {
    padding: var(--ho-4);
  }
  .ho-product-trust__call-btn {
    width: 100%;
    justify-content: center;
  }
}