html.httx-scroll-lock,
html.httx-scroll-lock body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.httx-scroll-lock::-webkit-scrollbar,
html.httx-scroll-lock body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.httx-search[data-httx-search] {
  padding: clamp(16px, 4vh, 42px) 20px;
  overflow: hidden;
  align-items: start;
}

.httx-search[data-httx-search] .httx-search__panel {
  width: min(1160px, 100%);
  max-height: calc(100dvh - 2 * clamp(16px, 4vh, 42px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 28px;
}

.httx-search[data-httx-search] .httx-search__panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.httx-search[data-httx-search] .httx-search__head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-bottom: var(--httx-space-4);
  padding: var(--httx-space-1) 0 var(--httx-space-3);
  background: var(--httx-surface);
}

body.admin-bar .httx-search[data-httx-search] { padding-top: var(--httx-space-7); padding-bottom: var(--httx-space-4); }
body.admin-bar .httx-search[data-httx-search] .httx-search__panel { max-height: calc(100dvh - 64px); }

.wnot-modal-recs { margin-top: 30px; color: var(--httx-ink); }
.wnot-modal-recs__section + .wnot-modal-recs__section { margin-top: 30px; }
.wnot-modal-recs__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--httx-space-4); margin-bottom: var(--httx-space-4); }
.wnot-modal-recs__heading h3 { margin: 0; font-size: var(--httx-type-h3); line-height: var(--httx-line-h3); }
.wnot-modal-recs__heading > a { flex: none; color: var(--httx-accent); font-size: var(--httx-type-button); font-weight: 600; text-decoration: none;line-height:var(--httx-line-small);}
.wnot-modal-recs__heading > a:hover, .wnot-modal-recs__heading > a:focus-visible { text-decoration: underline; }
.wnot-modal-recs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--httx-space-4); }
.wnot-modal-recs__product, .wnot-modal-recs__news { min-width: 0; overflow: hidden; border: 1px solid var(--httx-border); border-radius: var(--httx-radius-lg); background: var(--httx-page); }
.wnot-modal-recs__product { display: flex; flex-direction: column; padding: 10px; color: var(--httx-ink); text-decoration: none; }
.wnot-modal-recs__product:hover, .wnot-modal-recs__product:focus-visible, .wnot-modal-recs__news:focus-within { border-color: var(--httx-accent); box-shadow: 0 8px 22px rgba(27, 54, 117, .09); }
.wnot-modal-recs__product-meta { display: flex; align-items: start; justify-content: space-between; gap: 5px; min-height: 28px; }
.wnot-modal-recs__chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.wnot-modal-recs__chip { display: inline-block; max-width: 100%; padding: var(--httx-space-1) var(--httx-space-2); overflow: hidden; border: 1px solid var(--httx-border); border-radius: var(--httx-radius-pill); background: var(--httx-surface); color: var(--httx-muted); font-size: var(--httx-type-meta); line-height: var(--httx-line-small); text-overflow: ellipsis; white-space: nowrap; }
.wnot-modal-recs__chip--category { border-color: var(--httx-border-strong); background: var(--httx-accent-soft); color: var(--httx-accent-dark); }
.wnot-modal-recs__chip--condition { flex: none; }
.wnot-modal-recs__product-image { position: relative; display: block; flex: none; height: 150px; margin-top: 5px; overflow: hidden; background: var(--httx-page); }
.wnot-modal-recs__product-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.wnot-modal-recs__product-title { display: block; padding: 9px 2px 3px; text-align: center; font-size: var(--httx-type-card-title); line-height: var(--httx-line-card-title); }
.wnot-modal-recs__news { position: relative; display: flex; flex-direction: column; background: var(--httx-surface); }
.wnot-modal-recs__news-image { display: block; height: 140px; background: var(--httx-page); }
.wnot-modal-recs__news-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wnot-modal-recs__news > .wnot-modal-recs__news-category { position: absolute; z-index: 2; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; max-width: calc(100% - 24px); min-height: 28px; padding: 5px 10px; overflow: hidden; border: 1px solid rgba(var(--httx-border-rgb),.9); border-radius: var(--httx-radius-pill); background: rgba(var(--httx-inverse-rgb),.96); box-shadow: 0 2px 10px rgba(12, 28, 58, .12); color: var(--httx-ink); font-size: var(--httx-type-meta); font-weight: 700; line-height: var(--httx-line-small); text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.wnot-modal-recs__news-body { display: flex; flex: 1; flex-direction: column; padding: 14px var(--httx-space-4) var(--httx-space-4); }
.wnot-modal-recs__news-body h4 { min-height: 3.1em; margin: 0 0 var(--httx-space-3); font-size: var(--httx-type-card-title); line-height: var(--httx-line-card-title); }
.wnot-modal-recs__news-body h4 a { color: var(--httx-ink-strong); text-decoration: none; }
.wnot-modal-recs__news-body h4 a:hover, .wnot-modal-recs__news-body h4 a:focus-visible { color: var(--httx-accent-dark); }
.wnot-modal-recs__news-body time { margin-top: auto; color: var(--httx-muted); font-size: var(--httx-type-meta); }
.wnot-modal-recs__news-read { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--httx-border); color: var(--httx-accent); font-size: var(--httx-type-button); text-decoration: none;font-weight:600;line-height:var(--httx-line-small);}
.wnot-modal-recs__news-read span { margin-left: var(--httx-space-2); }
.wnot-modal-recs__news-read:hover, .wnot-modal-recs__news-read:focus-visible { text-decoration: underline; }
.httx-search[data-httx-search] .wnot-modal-recs__news-read { color: var(--httx-accent); font-weight: 600;font-size:var(--httx-type-button);line-height:var(--httx-line-small);}
.wnot-modal-recs__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--httx-muted); font-size: var(--httx-type-helper); text-align: center; }
.wnot-modal-recs__empty, .wnot-modal-recs__loading { margin: 10px 0 0; color: var(--httx-muted); font-size: var(--httx-type-helper); }
.wnot-modal-recs__carousel-controls { display: none; }

@media (max-width: 900px) {
  .wnot-modal-recs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .httx-search[data-httx-search] { padding: var(--httx-space-3); }
  .httx-search[data-httx-search] .httx-search__panel { max-height: calc(100dvh - 24px); padding: 20px var(--httx-space-4) var(--httx-space-10); }
  body.admin-bar .httx-search[data-httx-search] { padding-top: 54px; }
  body.admin-bar .httx-search[data-httx-search] .httx-search__panel { max-height: calc(100dvh - 66px); }
  .wnot-modal-recs { margin-top: var(--httx-space-5); }
  .wnot-modal-recs__section + .wnot-modal-recs__section { margin-top: var(--httx-space-5); }
  .wnot-modal-recs__heading { align-items: center; }
  .wnot-modal-recs__heading h3 { font-size: var(--httx-type-h3); }
  .wnot-modal-recs__heading > a { font-size: var(--httx-type-button);font-weight:600;line-height:var(--httx-line-small);}
  .wnot-modal-recs__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--httx-space-3);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .wnot-modal-recs__grid::-webkit-scrollbar { display: none; }
  .wnot-modal-recs__grid > * { scroll-snap-align: start; scroll-snap-stop: always; }
  .wnot-modal-recs__carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--httx-space-4); margin-top: var(--httx-space-3); }
  .wnot-modal-recs__carousel-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--httx-border); border-radius: 50%; background: var(--httx-surface); color: var(--httx-accent); font-size: 20px; line-height: 1; cursor: pointer; }
  .wnot-modal-recs__carousel-button:hover, .wnot-modal-recs__carousel-button:focus-visible { border-color: var(--httx-accent-dark); outline-offset: 2px; }
  .wnot-modal-recs__carousel-button:disabled { color: var(--httx-muted); cursor: not-allowed; }
  .wnot-modal-recs__carousel-position { min-width: 40px; color: var(--httx-muted); font-size: var(--httx-type-meta); font-weight: 700; text-align: center; }
  .wnot-modal-recs__product-image { height: 180px; }
  .wnot-modal-recs__news-image { height: 170px; }
}