/** Shopify CDN: Minification failed

Line 238:9 Expected ":"
Line 239:20 Expected ":"
Line 358:9 Expected ":"
Line 359:16 Expected ":"
Line 423:4 Expected identifier but found "0"
Line 424:4 Expected identifier but found "0"
Line 801:16 Expected ":"
Line 802:20 Expected ":"

**/
/*
 * Beta search (Search Alpha/Beta A/B test). Self-contained: loaded by layout/theme.liquid only when
 * settings.search_variant is 'beta', and Beta loads no other search CSS. Alpha has its own file
 * (search-alpha.css) and never loads this one, so changes here can't affect Alpha.
 *
 * Part 1 - header search bar, mobile header, search results page (Products/Blogs tabs, blog filters and cards).
 *          The markup for these is shared with Alpha (.header__search--alpha, .search-alpha-* classes), so the
 *          rules mirror search-alpha.css; edit them here for Beta only.
 * Part 2 - Beta dropdown (.m-search-beta): snippets/search-beta-default.liquid, sections/predictive-search-beta.liquid,
 *          snippets/search-beta-blog-item.liquid.
 */

/* ======================================================================================================
   Part 1 - Header search bar, mobile header and search results page
   ====================================================================================================== */

.header__search--alpha {
  --search-alpha-font: 'DM Sans', var(--font-es-rebond);
  --search-alpha-muted: rgba(32, 37, 48, 0.5);
  --search-alpha-shadow: rgba(250, 89, 73, 0.04);
}

/* ---------- Search row ---------- */
.header__search--alpha {
  padding: 24px var(--gutter);
}

.header__search--alpha .header__search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  position: relative;
}

/* The original icons stay in the markup for the Original variant scripts, Beta shows its own */
.header__search--alpha .header__search-icon, .header__search--alpha .header__search-close-btn-icon, .header__search--alpha .search-close-btn-icon {
  display: none;
}

.header__search-icon-alpha {
  position: absolute;
  top: 18px;
  left: 24px;
  z-index: 1;
  width: 20px;
  height: 20px;
  color: var(--colour-red);
  pointer-events: none;
}

.header__search--alpha .header__search-input {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  padding: 0 24px 0 56px;
  font-family: var(--search-alpha-font);
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: var(--colour-midnight);
  background-color: var(--colour-white);
  border: 1px solid var(--colour-red);
  border-radius: 28px;
  -webkit-appearance: none;
  appearance: none;
}

.header__search--alpha .header__search-input::-webkit-search-cancel-button {
  display: none;
}

.header__search--alpha .header__search-input::placeholder {
  color: var(--search-alpha-muted);
}

.header__search--alpha .header__search-close-btn, .header__search--alpha .search-close-btn {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 11px;
  background-color: var(--colour-white);
  border: 1px solid var(--colour-nude);
  border-radius: 50%;
}

.header__search-close-btn-icon-alpha {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--colour-red);
}

/* The results sit inside the white search panel instead of hanging below it.
   min-width: 0 keeps nowrap text inside the dropdown from widening it past the screen. */
.header__search--alpha .predictive-search {
  flex: 0 0 100%;
  min-width: 0;
  position: static;
  background-color: transparent;
}

.header__search--alpha .predictive-search:empty {
  display: none;
}

/* ---------- Search results page: search bar (same look as the header search) ---------- */
.search-alpha-page-search .search-section__search-form {
  align-items: center;
  gap: 16px;
  position: relative;
}

.search-alpha-page-search__icon {
  position: absolute;
  top: 18px;
  left: 24px;
  z-index: 1;
  width: 20px;
  height: 20px;
  color: var(--colour-red);
  pointer-events: none;
}

.search-alpha-page-search .search-section__search-input {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  padding: 0 24px 0 56px;
  font-family: var(--search-alpha-font, 'DM Sans', var(--font-es-rebond));
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: var(--colour-midnight);
  background-color: var(--colour-white);
  border: 1px solid var(--colour-red);
  border-radius: 28px;
  -webkit-appearance: none;
  appearance: none;
}

.search-alpha-page-search .search-section__search-input::-webkit-search-cancel-button {
  display: none;
}

.search-alpha-page-search .search-section__search-input::placeholder {
  color: rgba(32, 37, 48, 0.5);
}

.search-alpha-page-search__clear {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 11px;
  background-color: var(--colour-white);
  border: 1px solid var(--colour-nude);
  border-radius: 50%;
}

.search-alpha-page-search__clear-icon {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--colour-red);
}

/* Results page search box dropdown: the same panel as the header search on every other page. White, full width,
   no border or rounded corners, with its content lined up with the search box (the page gutter), and the page
   below dimmed with the header's backdrop colour. The dim is a spread shadow clipped to show below the panel
   only, so the search box above stays clear. */
.search-alpha-page-search .predictive-search {
  /* Out to both screen edges (past the search area's gutter), starting at its bottom padding so the panel covers
     the divider line and sits the same distance under the search box as the header's (16px) */
  top: calc(100% + 16px);
  right: calc(-1 * var(--gutter));
  left: calc(-1 * var(--gutter));
  z-index: 30;
  margin: 0 !important;
  background-color: var(--colour-white);
}

.search-alpha-page-search .predictive-search:not(:empty) {
  padding: 0 var(--gutter) 24px;
  box-shadow: 0 0 0 100vmax var(--colour-nude-60);
  clip-path: inset(0 0 -100vmax 0);
}

/* ---------- Search results page: Products / Blogs tabs ---------- */
/* search-alpha.js keeps the other tab's view in the page, hidden until its tab is chosen */
[search-alpha-view][hidden] {
  display: none !important;
}

/* Results fade while the other Products/Blogs tab loads (search-alpha.js sets the class on tap) */
.search-alpha-switching .search-section [collection-items-wrapper] {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.15s var(--ease);
}

.search-alpha-tabs {
  display: flex;
  flex: 0 1 700px;
  margin-inline: auto;
}

.search-alpha-tabs__tab {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  height: 48px;
  padding: 0 32px;
  font-family: var(--font-montserrat);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--colour-red);
  background-color: var(--colour-white);
  border: 1px solid var(--colour-red);
  transition:;
    color 0.2s var(--ease),;
    background-color 0.2s var(--ease);
}

.search-alpha-tabs__tab:first-child {
  border-radius: 99px 0 0 99px;
}

.search-alpha-tabs__tab:last-child {
  border-radius: 0 99px 99px 0;
}

.search-alpha-tabs__tab--active {
  color: var(--colour-white);
  background-color: var(--colour-red);
}

/* Hover only with a mouse: on phones a tapped tab keeps :hover, so both tabs looked active */
@media (hover: hover) and (pointer: fine) {
  .search-alpha-tabs__tab:hover {
    color: var(--colour-white);
    background-color: var(--colour-red);
  }
}

.search-alpha-tabs__count:empty {
  display: none;
}

/* Tabs alone (Blogs tab, or no results) are centred in the bar */
.search-alpha-tabs-bar {
  justify-content: center;
}

/* Tabs alone sit tight above the blogs band (Figma 1:1161: 12px above and below) */
.search-alpha-tabs-bar {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Desktop: the tabs stay put when switching Products <-> Blogs. Both bars use the same three columns (Filter by |
   tabs | Sort by), the side columns sized for the buttons whether or not they're there, so the tabs keep the same
   place and width; the Blogs bar has the same top padding as the Products one. */
@media (min-width: 901px) {
  .collection-listing__sortings--search-alpha,
  .search-alpha-tabs-bar {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 700px) minmax(200px, 1fr);
    column-gap: 24px;
    align-items: center;
  }

  .search-alpha-tabs-bar {
    padding-top: 20px;
  }

  .search-alpha-tabs {
    grid-column: 2;
    min-width: 0;
    margin-inline: 0;
  }

  .collection-listing__sortings--search-alpha .collection-listing__sortings-btn:first-child {
    justify-self: start;
  }

  .collection-listing__sortings--search-alpha .collection-listing__sortings-btn:last-child {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }

  /* One line, so the row is the tabs' height on every desktop width (it wrapped to two lines at 1024px) */
  .collection-listing__sortings--search-alpha .collection-listing__sortings-toggle {
    white-space: nowrap;
  }
}

/* Pills link to #search-blogs; the margin keeps the band clear of the fixed header (+ announcement bar) */
.search-alpha-blogs {
  padding: 0 calc(var(--gutter) * 2) 60px;
  background-color: var(--colour-nude);
  scroll-margin-top: calc(var(--total-header-height) + 72px);
}

.search-alpha-blog-tags__list {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 20px 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.search-alpha-blog-tags__list::-webkit-scrollbar {
  display: none;
}

.search-alpha-blog-tags__item {
  flex: 0 0 auto;
}

.search-alpha-blog-tags__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px 9px 9px;
  font-family: var(--font-montserrat);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--colour-midnight);
  background-color: var(--colour-white);
  border: 1px solid var(--colour-nude);
  border-radius: 32px;
  transition:;
    color 0.2s var(--ease),;
    border-color 0.2s var(--ease);
}

.search-alpha-blog-tags__link--active, .search-alpha-blog-tags__link:hover {
  color: var(--colour-red);
  border-color: var(--colour-red);
}

.search-alpha-blog-tags__icon {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  overflow: hidden;
  background-color: rgba(230, 212, 204, 0.38);
  border-radius: 14px;
}

.search-alpha-blog-tags__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fade while a pill or page swaps the blogs in place (search-alpha.js) */
.search-alpha-blogs__grid, .search-alpha-blogs__empty {
  transition: opacity 0.25s var(--ease);
}

.search-alpha-blogs--loading .search-alpha-blogs__grid, .search-alpha-blogs--loading .search-alpha-blogs__empty {
  opacity: 0.35;
  pointer-events: none;
}

.search-alpha-blogs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
}

.search-alpha-blogs__empty {
  padding: 40px 0 20px;
  font-size: 16px;
  text-align: center;
  color: var(--colour-midnight);
}

.search-alpha-blogs .collection-listing__pagination {
  margin-top: 40px;
}

.search-alpha-article-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 16px;
  background-color: var(--colour-white);
  border: 1px solid #e5e7eb;
  box-shadow:;
    0 12px 12px rgba(0, 0, 0, 0.07),;
    0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-alpha-article-card__media {
  display: block;
  height: 320px;
  overflow: hidden;
  background-color: rgba(230, 212, 204, 0.38);
  border-radius: 6px;
}

.search-alpha-article-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.search-alpha-article-card:hover .search-alpha-article-card__image {
  transform: scale(1.03);
}

.search-alpha-article-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.search-alpha-article-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: var(--font-montserrat);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--colour-midnight-70);
}

.search-alpha-article-card__category {
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-alpha-article-card__title {
  width: 100%;
  font-family: var(--font-montserrat);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 1.36px;
  text-transform: uppercase;
  color: var(--colour-red);
  /* Long words (e.g. REJUVENATING) break inside narrow mobile cards instead of running past the edge */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.search-alpha-article-card__excerpt {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-es-rebond);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-midnight);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.search-alpha-article-card__read-more {
  margin-top: auto;
  font-family: var(--font-es-rebond);
  font-size: 18px;
  line-height: 22px;
  text-decoration: underline;
  text-underline-position: from-font;
  color: var(--colour-red);
}

.search-alpha-filter-label--mobile {
  display: none;
}

/* ---------- Tablet ---------- */
@media (min-width: 901px) and (max-width: 1200px) {
  .search-alpha-blogs {
    padding-inline: var(--gutter);
  }

  .search-alpha-blogs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  /* nowrap: main.css lets the row wrap below 1480px, which drops the icons to a second line on 375px phones */
  .header__wrap {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .header__mob-menu-trigger {
    flex: 0 0 auto;
    order: 0;
  }

  .header__logo {
    display: flex;
    flex: 1 1 0;
    order: 1;
    justify-content: center;
    position: static;
    min-width: 0;
    width: auto;
    transform: none;
  }

  .header__logo-link {
    max-width: 13rem;
    width: 100%;
  }

  .header__logo-svg {
    width: 100%;
    margin-top: 0px;
  }

  .header__actions {
    flex: 0 0 auto;
    order: 2;
  }

  .search-alpha-blogs {
    scroll-margin-top: calc(var(--total-header-height) + 52px);
  }

  /* Mobile search area: 16px sides and no bottom padding or divider */
  .search-alpha-page-search .predictive-search {
    top: 100%;
    right: -16px;
    left: -16px;
  }

  .search-alpha-page-search .predictive-search:not(:empty) {
    padding: 0 16px 20px;
  }

  /* Search results page bar: mobile Figma 1:2074 (no divider between the bar and the tabs) */
  .search-alpha-page-search {
    padding: 12px 16px 0;
    border-bottom: 0;
  }

  /* Search row, mobile Figma 1:1943 / 1:4312 (same as the mobile header search): 41px box, 16px gap, 40px clear button */
  .search-alpha-page-search .search-section__search-form {
    gap: 16px;
  }

  .search-alpha-page-search__icon {
    top: 10.5px;
    left: 16px;
    color: var(--colour-midnight);
  }

  .search-alpha-page-search .search-section__search-input {
    height: 41px;
    padding: 0 16px 0 48px;
    font-size: 16px;
  }

  .search-alpha-page-search__clear {
    width: 40px;
    height: 40px;
    padding: 4px;
  }

  .search-alpha-page-search__clear-icon {
    color: var(--colour-nude);
  }

  /*
   * Search results page (mobile Figma 1:2074): full-width tabs under the search bar,
   * then an equal-width Filters / Sort by row with a nude divider.
   */
  .search-section__header:has(.search-section__header-heading) {
    display: none;
  }

  .collection-listing__sortings--search-alpha, .search-alpha-tabs-bar {
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 24px;
    padding: 12px 16px 13px;
    border-bottom: 1px solid var(--colour-nude);
  }

  .search-alpha-tabs {
    flex: 1 1 100%;
    order: -1;
  }

  .search-alpha-tabs__tab {
    height: 40px;
    padding: 0 12px;
    font-size: 12px;
  }

  .collection-listing__sortings--search-alpha .collection-listing__sortings-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin-left: 0;
  }

  .collection-listing__sortings--search-alpha .collection-listing__sortings-toggle {
    width: 100%;
    padding: 12px 13px;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.7px;
    text-align: center;
    color: var(--colour-midnight);
    border-radius: 32px;
  }

  /* Filters has no arrow on mobile; Sort by keeps it right after the label */
  .collection-listing__sortings--search-alpha .collection-listing__sortings-btn:first-child .collection-listing__sortings-toggle-icon {
    display: none;
  }

  .collection-listing__sortings--search-alpha .collection-listing__sortings-btn:last-child .collection-listing__sortings-toggle {
    padding-right: 35px;
  }

  .collection-listing__sortings--search-alpha .collection-listing__sortings-btn:last-child .collection-listing__sortings-toggle-icon {
    top: 50%;
    right: auto;
    left: calc(50% + 33px);
    width: 12px;
    margin-top: -4px;
  }

  .search-alpha-filter-label--desktop {
    display: none;
  }

  .search-alpha-filter-label--mobile {
    display: inline;
  }

  /* Blogs tab, mobile: the nude background runs behind the whole tab like desktop (client feedback, in place of
     Figma 1:1943's edge-to-edge cards on white): the pills scroll edge to edge, the cards sit on nude with gaps */
  .search-alpha-blogs {
    padding: 0 0 40px;
  }

  .search-alpha-blog-tags {
    background-color: var(--colour-nude);
  }

  .search-alpha-blog-tags__list {
    gap: 8px;
    padding: 12px;
  }

  /* 40px tall with the 1px border, as Figma */
  .search-alpha-blog-tags__link {
    padding: 7px 14px 7px 7px;
    font-size: 12px;
    line-height: 12px;
  }

  .search-alpha-blog-tags__icon {
    width: 24px;
    height: 24px;
    border-radius: 12px;
  }

  .search-alpha-blogs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px;
  }

  .search-alpha-blogs__empty {
    padding: 32px 16px 12px;
  }

  .search-alpha-blogs .collection-listing__pagination {
    margin-top: 24px;
  }

  .search-alpha-article-card {
    gap: 0;
    padding: 8px;
    background-color: #fefefe;
    border-width: 0.5px;
  }

  .search-alpha-article-card__media {
    height: 160px;
    margin: 4px;
    border-radius: 4px;
  }

  .search-alpha-article-card__body {
    padding: 8px;
  }

  .search-alpha-article-card__meta {
    gap: 8px;
    font-size: 11px;
    line-height: 14px;
  }

  .search-alpha-article-card__title {
    font-size: 14px;
  }

  .search-alpha-article-card__excerpt {
    line-height: 18px;
    -webkit-line-clamp: 8;
  }

  .search-alpha-article-card__read-more {
    font-size: 16px;
    line-height: 22.4px;
  }

  /* Same as desktop: the panel drops down under the header over the theme backdrop */
  .header__search--alpha {
    padding: 12px 16px 20px;
  }

  .header__search-icon-alpha {
    top: 10.5px;
    left: 16px;
    color: var(--colour-midnight);
  }

  /* Search row, mobile Figma Mob/Search/Input 1:1943: 41px box, 16px gap, 40px close button */
  .header__search--alpha .header__search-form {
    gap: 16px;
  }

  .header__search--alpha .header__search-input {
    height: 41px;
    padding: 0 16px 0 48px;
    font-size: 16px;
  }

  .header__search--alpha .header__search-close-btn, .header__search--alpha .search-close-btn {
    width: 40px;
    height: 40px;
    padding: 4px;
  }

  .header__search-close-btn-icon-alpha {
    color: var(--colour-nude);
  }

}

/* ---------- Close / clear buttons: hover (header search + search results page) ---------- */
.header__search--alpha .header__search-close-btn, .header__search--alpha .search-close-btn, .search-alpha-page-search__clear {
  cursor: pointer;
  transition:;
    border-color 0.2s var(--ease),;
    background-color 0.2s var(--ease);
}

.header__search-close-btn-icon-alpha, .search-alpha-page-search__clear-icon {
  transition: color 0.2s var(--ease);
}

/* Mouse devices only, so the hover state doesn't stick after a tap on phones */
@media (hover: hover) and (pointer: fine) {
  .header__search--alpha .header__search-close-btn:hover, .header__search--alpha .search-close-btn:hover, .search-alpha-page-search__clear:hover {
    background-color: rgba(250, 89, 73, 0.06);
    border-color: var(--colour-red);
  }

  .header__search--alpha .header__search-close-btn:hover .header__search-close-btn-icon-alpha, .header__search--alpha .search-close-btn:hover .header__search-close-btn-icon-alpha, .search-alpha-page-search__clear:hover .search-alpha-page-search__clear-icon {
    color: var(--colour-red);
  }
}

/* ---------- Search results page: header offset ---------- */

/* search-alpha.js measures the real header (a two-line announcement bar is taller than the fixed value) */
.search-section:has(.search-alpha-page-search) {
  margin-top: var(--search-alpha-header-offset, var(--total-header-height));
}

/* ======================================================================================================
   Part 2 - Beta dropdown
   ====================================================================================================== */

.m-search-beta {
  --search-beta-font: 'DM Sans', var(--font-es-rebond);
  --search-beta-muted: rgba(32, 37, 48, 0.5);

  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - var(--header-height) - 180px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  border: 0;
  box-shadow: none;
}

.m-search-beta::after {
  display: none;
}

.m-search-beta ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The Beta panel brings its own top spacing, as in the header, so no extra here */
.search-alpha-page-search .m-search-beta {
  padding-top: 0;
  /* The bar sits in the panel's right gutter, not over the cards: the list reaches 16px into the gutter and
     gives back 12px, which plus the 4px bar keeps the content edge where it was */
  margin-right: -16px;
  padding-right: 12px;
}

.search-alpha-page-search .m-search-beta::-webkit-scrollbar {
  width: 4px;
}

.search-alpha-page-search .m-search-beta::-webkit-scrollbar-track {
  background: transparent;
}

.search-alpha-page-search .m-search-beta::-webkit-scrollbar-thumb {
  background-color: var(--colour-red);
  border-radius: 4px;
}

/* Firefox only: Chrome drops the ::-webkit-scrollbar styles above whenever these standard properties are set */
@supports not selector(::-webkit-scrollbar) {
  .search-alpha-page-search .m-search-beta {
    scrollbar-width: thin;
    scrollbar-color: var(--colour-red) transparent;
  }
}

/* Mobile: the header's 12px gap between the search box and the first row */
@media (max-width: 900px) {
  .search-alpha-page-search .m-search-beta {
    padding-top: 12px;
  }
}

/* ---------- Panel (history + trending, or product rows) ---------- */

.m-search-beta__panel {
  padding: 16px;
  background-color: var(--colour-white);
  border: 1px solid var(--colour-nude);
  border-radius: 16px;
}

.m-search-beta__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--search-beta-font);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--search-beta-muted);
}

.m-search-beta__heading--results {
  display: none;
}

.m-search-beta__trending-icon {
  width: 18px;
  height: 18px;
  color: var(--colour-red);
}

.m-search-beta__divider {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--colour-nude);
}

.m-search-beta__history {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-search-beta__trending .m-search-beta__history {
  margin-top: 12px;
}

.m-search-beta__history-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  font-family: var(--search-beta-font);
  font-size: 14px;
  line-height: 17px;
  color: var(--colour-midnight);
  border-radius: 8px;
  transition: background-color 0.2s var(--ease);
}

.m-search-beta__history-link:hover {
  background-color: rgba(230, 212, 204, 0.3);
}

.m-search-beta__history-link--trending {
  color: var(--search-beta-muted);
}

.m-search-beta__history-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--colour-midnight);
}

.m-search-beta__history-term {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Product rows ---------- */

/* Long product names are nowrap; min-width: 0 stops them stretching the dropdown wider than the screen */
.m-search-beta__panel,
.m-search-beta__group,
.m-search-beta__product,
.m-search-beta__article {
  min-width: 0;
}

/* Resets the grid span and borders main.css gives the shared tracking class in the original dropdown */
/* Rows also carry product-card for the discount app (tdf); undo that class's card layout */
.m-search-beta .predictive-search__results-item {
  display: block;
  grid-column: auto;
  height: auto;
  padding-bottom: 0;
  border: 0;
}

.m-search-beta__products {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-search-beta__product-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-radius: 8px;
}

.m-search-beta__product-media {
  display: block;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}

.m-search-beta__product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.m-search-beta__product-details {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.m-search-beta__product-vendor {
  font-family: var(--font-montserrat);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--colour-red);
}

.m-search-beta .m-search-beta__product-title {
  margin: 0;
  overflow: hidden;
  font-family: var(--search-beta-font);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #010101;
}

/* Also carries product-card__price for the discount app (tdf); reset that class's type */
.m-search-beta .m-search-beta__product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--search-beta-font);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--colour-midnight);
}

/* Sale price from the discount app: "$41.65 $49.00", the original struck through */
.m-search-beta__product-price .tdf_price_original {
  font-size: 12px;
  font-weight: 400;
  text-decoration: line-through;
  color: var(--colour-midnight-40);
}

.m-search-beta__product-price-compare {
  font-size: 12px;
  font-weight: 400;
  color: var(--colour-midnight-40);
}

.m-search-beta__product-chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--colour-nude);
  transition: color 0.2s var(--ease);
}

.m-search-beta__product-link:hover .m-search-beta__product-chevron {
  color: var(--colour-red);
}

/* ---------- From the blog ---------- */

.m-search-beta__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-search-beta__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.m-search-beta__view-all {
  font-family: var(--search-beta-font);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  color: var(--search-beta-muted);
  transition: color 0.2s var(--ease);
}

.m-search-beta__view-all:hover {
  color: var(--colour-midnight);
}

.m-search-beta__articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.m-search-beta__article-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  /* 11px + 1px border = the Figma's 12px inset, 96px tall */
  padding: 11px;
  background-color: var(--colour-white);
  border: 1px solid var(--colour-nude);
  border-radius: 16px;
  filter: drop-shadow(0 4px 10px rgba(250, 89, 73, 0.04));
  transition: border-color 0.2s var(--ease);
}

.m-search-beta__article-link:hover {
  border-color: var(--colour-red);
}

.m-search-beta__article-image {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
}

.m-search-beta__article-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-family: var(--search-beta-font);
  font-weight: 600;
  line-height: normal;
}

.m-search-beta__article-category {
  font-size: 12px;
  color: var(--colour-red);
}

/* Two lines at most; longer titles end in "…" on the second line (header and search page dropdowns) */
.m-search-beta__article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  overflow-wrap: anywhere;
  color: var(--colour-midnight);
}

/* ---------- Footer ---------- */

.m-search-beta__footer {
  display: flex;
  justify-content: center;
}

/* margin: 0 undoes the top margin main.css gives the shared predictive-search__view-all-btn class */
.m-search-beta__view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 350px;
  max-width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 32px;
  font-family: var(--font-montserrat);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--colour-white);
  background-color: var(--colour-red);
  border-radius: 8px;
  transition: opacity 0.2s var(--ease);
}

.m-search-beta__view-all-btn:hover {
  opacity: 0.9;
}

/* The shared core fills [search-alpha-count]; flex drops its leading space, so the gap comes from CSS */
.m-search-beta__view-all-btn [search-alpha-count]:not(:empty) {
  margin-left: 0.35em;
}

.m-search-beta__no-results {
  margin: 0;
  padding: 16px 0;
  font-family: var(--search-beta-font);
  font-size: 16px;
  color: var(--colour-midnight);
}

/* ---------- Tablet ---------- */

@media (min-width: 901px) and (max-width: 1200px) {
  .m-search-beta__articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .m-search-beta__articles > :nth-child(3) {
    display: none;
  }
}

/* ---------- Mobile (Figma 1:3803 before typing, 1:4052 typing) ---------- */

@media (max-width: 900px) {
  /* Figma 1:4052 / 1:3803: sections sit 12px apart */
  .m-search-beta {
    gap: 12px;
    max-height: calc(100vh - 220px);
    max-height: calc(100dvh - 220px);
    /* The search row's 16px gap plus -4px gives the Figma's 12px between the box and the dropdown */
    margin-top: -4px;
    margin-right: -16px;
    padding: 0 16px 0 4px;
    overscroll-behavior: contain;
  }


  /* Scrollbar sits at the screen edge, not over the content: the list reaches into the search panel's 16px
     right padding and gives it back as its own padding, so the content stays put and the 4px red bar is drawn
     in that gutter. iOS Safari ignores these styles but shows its own indicator in the same edge position. */
  .m-search-beta::-webkit-scrollbar {
    width: 4px;
  }

  .m-search-beta::-webkit-scrollbar-track {
    background: transparent;
  }

  .m-search-beta::-webkit-scrollbar-thumb {
    background-color: var(--colour-red);
    border-radius: 4px;
  }

  /* Firefox only: Chrome drops the ::-webkit-scrollbar styles above whenever these standard properties are set */
  @supports not selector(::-webkit-scrollbar) {
    .m-search-beta {
      scrollbar-width: thin;
      scrollbar-color: var(--colour-red) transparent;
    }
  }

  /* Product rows sit straight on the page on mobile, under a "Top results" heading */
  .m-search-beta__panel--results {
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .m-search-beta__heading--results {
    display: flex;
    margin-bottom: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #888888;
  }

  .m-search-beta__articles {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* Mobile shows two posts */
  .m-search-beta__articles > :nth-child(3) {
    display: none;
  }

  .m-search-beta__article-link {
    align-items: center;
    border-radius: 14px;
    filter: none;
  }

  .m-search-beta__article-category {
    font-weight: 700;
    text-transform: uppercase;
  }

  .m-search-beta__article-title {
    font-weight: 500;
  }

  .m-search-beta__footer {
    margin-top: 0;
  }

  .m-search-beta__view-all-btn {
    width: 100%;
  }
}

/* ---------- Search results page: Blogs tab, small phones ---------- */
/* Figma's 14px title is sized for a 390px phone; narrower phones step it down so long words (PIGMENTATION?) fit whole */
@media (max-width: 389px) {
  .search-alpha-article-card__title {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 1px;
  }
}

@media (max-width: 359px) {
  .search-alpha-article-card__title {
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.3px;
  }
}

/* ---------- Search results page: Blogs tab, tablet ---------- */
/* Three columns like desktop between phone and desktop widths, so cards don't stretch to two wide, short-image rows */
@media (min-width: 600px) and (max-width: 900px) {
  .search-alpha-blogs__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}