.image-grayscale {
  filter: grayscale(80%);
}
.product-search {
  width: 100%;
  max-width: 100%;
  position: relative;
}
.product-search--small {
  max-width: 180px;
}
.product-search--small .product__body {
  padding-top: 15px;
}
.product-search--small .product__name {
  font-size: 16px;
}
.product-search__img {
  position: relative;
  background-color: var(--color-neutral-light);
  height: 43vw;
}
@media (min-width: 768px) {
  .product-search__img {
    height: 30vw;
  }
}
@media (min-width: 1024px) {
  .product-search__img {
    height: 280px;
  }
}
.product-search__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  transition: all 0.3s ease-in-out;
}
.product-search__img .product-search__img--hover {
  opacity: 0;
}
.product-search__link {
  width: 100%;
  height: 43vw;
  position: relative;
}
@media (min-width: 768px) {
  .product-search__link {
    height: 30vw;
  }
}
@media (min-width: 1024px) {
  .product-search__link {
    height: 280px;
  }
}
.product-search__link:hover .product-search__img--hover {
  opacity: 1;
}
.product-search__tag {
  position: absolute;
  z-index: 1;
  top: 11px;
  left: 11px;
}
.product-search__tag--back-in-stock {
  transition: opacity 0.3s ease-in-out;
}
.product-search__wrap:hover .product-search__tag--back-in-stock {
  opacity: 0;
}
@media (min-width: 768px) {
  .product-search__tag {
    top: 9px;
    left: 9px;
  }
}
.product-search__body {
  display: flex;
  flex-direction: column;
  padding: 12px 0 10px 0;
}
@media (min-width: 768px) {
  .product-search__body {
    padding: 30px 0 0 0;
  }
}
.product-search__name {
  font-size: 17px;
  color: var(--color-black);
  margin-bottom: 7px;
}
@media (min-width: 768px) {
  .product-search__name {
    font-size: 21px;
  }
}
.product-search__price {
  font-family: "Moderat Mono";
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-black);
}
.product-search__price--old {
  text-decoration: line-through;
  margin-right: 5px;
  color: #d1d1d3;
}
.product-search__price--sale {
  color: #de0033;
}
.tag-back-in-stock-search,
.tag-new-style-search,
.tag-sale-search,
.tag-soldout-search {
  font-family: "Moderat Condensed";
  display: block;
  font-size: 9px;
  line-height: 1;
  text-align: center;
  padding: 8px 10px;
  text-transform: uppercase;
  border-radius: 20px;
}
.tag-limited-edition-search {
  font-family: "Moderat Mono";
  display: block;
  font-size: 8px;
  line-height: 1;
  text-align: center;
  padding: 8px 10px;
  text-transform: uppercase;
  border-radius: 20px;
}
.tag-limited-edition-search {
  color: var(--color-white);
  background-color: #bd162c;
}
.tag-back-in-stock-search,
.tag-new-style-search,
.tag-sale-search {
  color: var(--color-white);
  background-color: var(--color-black);
}
.tag-soldout-search {
  color: var(--color-black);
  background-color: var(--color-white);
}
@media (min-width: 768px) {
  .tag-back-in-stock-search,
  .tag-sale-search,
  .tag-soldout-search {
    font-size: 14px;
    padding: 8px 5px;
  }
  .tag-new-style-search {
    font-size: 12px;
    padding: 10px 10px;
  }
  .tag-limited-edition-search {
    font-size: 9px;
    padding: 8px 5px;
  }
}
/* Card star rating (both grid variants).
   Markup: snippets/homepage-product-rating.liquid -> snippets/hp-rating-stars.liquid.
   Base component rules live in component-hp-rating.css, which the collection and search
   sections load; only the PLP-specific sizing lives here. */
.product-search__price-wrap .hp-rating {
  /* Slate, not the gold the homepage slider and reviews slider use. Set here rather than
     in component-hp-rating.css so the shared component keeps its own default. */
  --hp-star-color: #8d94a3;
  gap: 4px;
}
/* 18px stars are sized for the homepage slider; PLP cards are denser.
   The padding must stay symmetrical — the fill row is clipped by percentage across the
   whole strip, so uneven star boxes would land partial fills in the wrong place. */
.product-search__price-wrap .hp-rating__row svg {
  width: 16px;
  padding: 0 1px;
}
.product-search__price-wrap .hp-rating__count {
  font-size: 16px;
}
/* Variant B (rectangle grid) used to drop the rating row entirely — a
   `body.product-grid-rectangle … { display: none !important }` pair on .hp-rating and
   .review-price-divider lived here. Removed 2026-08-14: B now shows the rating too, but
   styled differently from A — no divider, and black stars rather than A's slate.
   Both of these are visible in production, where Visually.io serves variant B, not just
   on dev themes (which force B on via theme.role != 'main').

   No !important needed on either: at 4 selector components these beat both
   `.hp-rating + .review-price-divider` and `.product-search__price-wrap .hp-rating`
   above, whatever the source order. */
body.product-grid-rectangle .product-search__price-wrap .review-price-divider {
  display: none;
}
body.product-grid-rectangle .product-search__price-wrap .hp-rating {
  --hp-star-color: #000;
}
.product-search__price-wrap {
  margin-top: 0px;
  align-items: flex-start;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 6px;
  color: #000;
}
.review-price-divider {
  display: none;
  color: #e8e8e8;
}
.oke-sr-label-text,
.oke-sr-total-text {
  display: none;
}
[data-oke-star-rating] {
  margin-top: -5px;
}
.filter__options--colors {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 80%;
  left: 20px;
}
.filter__checkbox.filter__checkbox--color {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px 0 0;
  border-radius: 99px;
  margin-left: -10px;
  border: 2px solid var(--color-white);
  text-align: center;
  font-weight: 700;
  font-size: 10px;
  background-color: var(--color-white);
}
/* White-ish colourways (white #FFFFFF / snow-cone #FAF9F6 / marshmallow #F2EEEB) are
   invisible against the card, so ring them. The 2px border is kept white — it is the gap
   every swatch uses for spacing — and the outline is drawn as a 1px inset shadow just
   inside it, so the swatch keeps exactly the same footprint as its coloured neighbours.

   Matched on [data-colour] as well as .white-color because product-search-card.liquid only
   adds that class to the first 4 swatches: the else-branch that renders the 5th and
   beyond (class "filter__checkbox--color mobile__hidden", 11 sites) omits it, and those
   swatches ARE visible on desktop, where .mobile__hidden flips to display:block. Every one
   of the ~24 emit sites writes data-colour, so keying on it covers them all. */
.filter__checkbox.filter__checkbox--color.white-color,
.filter__checkbox--color[data-colour="white"],
.filter__checkbox--color[data-colour="snow-cone"],
.filter__checkbox--color[data-colour="marshmallow"] {
  border: 2px solid var(--color-white);
  box-shadow: inset 0 0 0 1px #3d3d3d;
}
.filter__checkbox--color input[type="radio"] + label {
  padding: 14px;
}
.mobile__hidden {
  display: none !important;
}
.desktop__hidden {
  display: block !important;
}
@media (min-width: 1024px) {
  /* Only shown when a rating actually rendered — homepage-product-rating.liquid emits
     nothing for a product with no reviews, so the adjacency fails and the divider stays
     hidden rather than dangling in front of the price. */
  .hp-rating + .review-price-divider {
    display: inline;
  }
  /* Variant A packs price + rating together. The row is row-reverse, so flex-end is
     the left edge — price first, rating right after it, no gap stretched between. */
  .product-search__price-wrap {
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 12px;
  }
  /* Variant B keeps the spread row: price left, rating pushed to the right edge. */
  body.product-grid-rectangle .product-search__price-wrap {
    justify-content: space-between;
  }
  .filter__options--colors {
    position: relative;
    left: 10px;
  }
  .mobile__hidden {
    display: block !important;
  }
  .desktop__hidden {
    display: none !important;
  }
  .color__count {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .color-swatch-variant-b
    .product-search__img
    .product-detail__size.desktop__hidden {
    display: none !important;
  }
  .color-swatch-variant-b .product-detail__size.mobile__hidden {
    display: block !important;
    opacity: 1;
  }
  .color-swatch-variant-b .filter__checkbox--color.mobile__hidden {
    display: flex !important;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .filter__options--colors {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 0;
    gap: 4px;
  }
  .color-swatch-variant-b .color__count {
    display: none !important;
  }
}
.filter__checkbox--color {
  position: relative;
}
/* z-index needed because the swatch row sits earlier in the card markup than
   .product-search__price-wrap — without it, the tooltip (z-index auto) paints under the
   star rating that follows it in DOM order. 3 also clears the card's absolutely
   positioned tag/badge, which sit at z-index 1. */
.tooltip {
  visibility: hidden;
  font-size: 16px;
  font-weight: 400;
  position: absolute;
  z-index: 3;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: grey;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  white-space: nowrap;
}
.filter__checkbox--color:hover .tooltip {
  visibility: visible;
}
.product-detail__size {
  opacity: 0;
}
.product-search__wrap:hover .product-detail__size {
  opacity: 1;
}
.color-swatch-variant-b .product-detail__size {
  opacity: 1;
}
.color-swatch-variant-b .product-search__wrap:hover .product-detail__size {
  opacity: 1;
}
.color-swatch-variant-b .filter__options--colors {
  gap: 6px;
  margin-left: -7px;
}
/* Bigger, easier-to-tap swatches in Variant B (applies on desktop too;
   the mobile rule inside @media(max-width:1023px) sets the same size). */
.color-swatch-variant-b
  .product-detail__size.mobile__hidden
  .filter__checkbox--color {
  width: 20px;
  height: 20px;
}
.btn-view__text {
  color: #fff;
  font-family: Monda;
  font-size: 14px;
  font-weight: 700;
  margin-right: 14px;
  bottom: 20px;
  position: absolute;
  left: 20px;
}
.btn-view--hover .btn-view__icon {
  bottom: 20px;
  position: absolute;
  right: 30px;
}
.btn-view--hover {
  opacity: 0;
}
@media (min-width: 1024px) {
  .product-search__img:hover .btn-view--hover {
    opacity: 1;
  }
}
.product-search__img:hover .product-search-card__badge {
  opacity: 0;
}
.product-search__img:hover .product-search-card__badge--new-style {
  opacity: 0;
}
.product-search-card__badge {
  position: absolute;
  bottom: 8px;
  left: 11px;
  z-index: 1;
  transition: opacity 0.3s ease-in-out;
}
.product-search-card__badge--new-style
  + .product-search-card__badge--new-style {
  display: none;
}
@media (min-width: 768px) {
  .product-search-card__badge {
    bottom: 15px;
  }
  .product-search-card__badge--new-style
    + .product-search-card__badge--new-style {
    display: block;
    bottom: 51px;
  }
}
.selling-fast-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  border: 1px solid #e5e5e5;
}
.new-style-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  border: 1px solid #e5e5e5;
}
@media (min-width: 768px) {
  .new-style-badge {
    justify-content: center;
    min-width: 110px;
  }
}
.swatch-scroll-btn {
  display: none;
}
.color-swatch-variant-b .filter__checkbox--color {
  margin-left: 0;
}
@media (max-width: 1023px) {
  .color-swatch-variant-b .products-item {
    min-width: 0;
    overflow: hidden;
  }
  .color-swatch-variant-b .products-item .product-search,
  .color-swatch-variant-b .products-item .product-search__wrap {
    min-width: 0;
    overflow: hidden;
  }
  .color-swatch-variant-b .product-detail__size.mobile__hidden .color-swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 0;
    margin-left: 10px;
    min-width: 0;
    max-width: 100%;
  }
  .color-swatch-variant-b .product-detail__size.mobile__hidden {
    min-width: 0;
    overflow: hidden;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .filter__options--colors {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    left: 0;
    top: 0;
    margin-top: 0;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .filter__options--colors::-webkit-scrollbar {
    display: none;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .filter__checkbox--color {
    flex-shrink: 0;
    width: 24px !important;
    height: 24px !important;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .color-swatches:has(.filter__checkbox--color:nth-child(5))
    .swatch-scroll-btn--next {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 14px;
    color: #000;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .color-swatches:has(.filter__checkbox--color:nth-child(5))
    .swatch-scroll-btn--prev {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 14px;
    color: #000;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding-right: 25px;
  }
  .swatch-scroll-btn--prev.is-visible {
    display: flex !important;
  }
  .swatch-scroll-btn--next.is-hidden {
    display: none !important;
  }
  .color-swatch-variant-b .swatch-scroll-btn:hover {
    color: #666;
  }
}
@media (min-width: 1024px) {
  /* Variant B desktop: when a product has 5+ colours, lay the swatches out
     in a horizontal scroll track with prev/next arrows, mirroring the mobile
     behaviour in @media(max-width:1023px). The scroll + arrow JS in
     main-collection-product-grid.liquid is viewport-agnostic, so only CSS is
     needed to enable this on desktop. Gated on :has(...:nth-child(5)) so
     products with <=4 colours keep their existing wrapped layout untouched. */

  /* Keep the 4 grid columns equal. Without this, the nowrap swatch <fieldset>
     (which has a hardcoded min-content and ignores min-width:0) inflates its
     column under grid's minmax(auto,1fr), making one card big + the rest small. */
  .color-swatch-variant-b .products-item {
    min-width: 0;
  }
  /* Contain the scroll track on the swatch wrapper so it scrolls instead of
     dictating the card's min-content width (gated to 5+ so <=4-colour cards,
     and their hover tooltips, are untouched). */
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden:has(.filter__checkbox--color:nth-child(5)) {
    min-width: 0;
    overflow: hidden;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .color-swatches:has(.filter__checkbox--color:nth-child(5)) {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .color-swatches:has(.filter__checkbox--color:nth-child(5))
    .filter__options--colors {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .color-swatches:has(.filter__checkbox--color:nth-child(5))
    .filter__options--colors::-webkit-scrollbar {
    display: none;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .color-swatches:has(.filter__checkbox--color:nth-child(5))
    .filter__checkbox--color {
    flex-shrink: 0;
  }
  /* keep the 5th+ swatches (tagged mobile__hidden) visible inside the track */
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .color-swatches:has(.filter__checkbox--color:nth-child(5))
    .filter__checkbox--color.mobile__hidden {
    display: flex !important;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .color-swatches:has(.filter__checkbox--color:nth-child(5))
    .swatch-scroll-btn--next {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 14px;
    color: #000;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .color-swatch-variant-b
    .product-detail__size.mobile__hidden
    .color-swatches:has(.filter__checkbox--color:nth-child(5))
    .swatch-scroll-btn--prev {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 14px;
    color: #000;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .color-swatch-variant-b .swatch-scroll-btn--prev.is-visible {
    display: flex !important;
  }
  .color-swatch-variant-b .swatch-scroll-btn--next.is-hidden {
    display: none !important;
  }
  .color-swatch-variant-b .swatch-scroll-btn:hover {
    color: #666;
  }
}
.btn-view--hover,
.btn-view--hover * {
  pointer-events: none;
}
.product-search__tag,
.product-search-card__badge {
  pointer-events: none;
}

/* ── Card layout: swatches above the title, small description below it ──
   The .product-detail__size.mobile__hidden block now sits between the image
   and .product-search__body in the DOM, so the body's old top padding would
   double up as a gap. Tighten it and give the swatch row its own spacing. */
.product-search__wrap > .product-detail__size.mobile__hidden {
  margin-top: 10px;
}
.product-search__wrap
  > .product-detail__size.mobile__hidden
  + .product-search__body {
  padding-top: 6px;
}
@media (min-width: 768px) {
  .product-search__wrap
    > .product-detail__size.mobile__hidden
    + .product-search__body {
    padding-top: 10px;
  }
}

/* ── Desktop swatch row position: last in variant A, above the title in variant B ──
   Both variants ship the same DOM (image → swatches → body), so the split is done with
   flex `order` rather than two markup paths — variant B is switched on client-side and
   can't reorder server-rendered markup.

   Desktop only. Below 1024px variant A uses the *other* swatch block, the
   .desktop__hidden one absolutely positioned inside .product-search__img, so there is
   nothing to reorder there.

   Keyed on .color-swatch-variant-b rather than .product-grid-rectangle: this is the
   swatch test, and it is the class every other swatch rule in this file already uses. */
@media (min-width: 1024px) {
  .product-search__wrap {
    display: flex;
    flex-direction: column;
  }
  /* The image carries a fixed 280px height; keep flex from touching it. */
  .product-search__wrap > .product-search__img {
    flex: none;
  }
  /* Variant A: title + price/rating, then swatches as the third row. */
  .product-search__wrap > .product-search__body {
    order: 2;
    /* Tighter than the 30px the ≥768 rule sets: the swatch row now hangs off the bottom
       of the card, so pulling the title up keeps the block from drifting down the tile.
       Set on every card, not just cards with swatches, so neighbours in the same grid row
       line up — a product with no colour options has no swatch block to key off. */
    padding-top: 16px;
  }
  .product-search__wrap > .product-detail__size.mobile__hidden {
    order: 3;
  }
  /* Same value again: the adjacency selector below carries more specificity than the rule
     above and would otherwise win with its ≥768 value. */
  .product-search__wrap
    > .product-detail__size.mobile__hidden
    + .product-search__body {
    padding-top: 16px;
  }
  /* Variant B: unchanged — swatches stay above the title. */
  .color-swatch-variant-b .product-search__wrap > .product-detail__size.mobile__hidden {
    order: 2;
  }
  .color-swatch-variant-b .product-search__wrap > .product-search__body {
    order: 3;
  }
  .color-swatch-variant-b
    .product-search__wrap
    > .product-detail__size.mobile__hidden
    + .product-search__body {
    padding-top: 0;
  }
}
.product-search__description {
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-black);
  opacity: 0.7;
  margin: -2px 0 7px 0;
}
@media (min-width: 768px) {
  .product-search__description {
    font-size: 14px;
  }
}

/* Variant-B-only hover tile (snippets/product-card-hover-b.liquid).
   Rendered for products that have second_image_hover_b but no Variant A hover image, so
   the B swap JS has an element to point at. Held transparent in the square grid — these
   ghosts are composed 3:4 and a 480x480 A tile would centre-crop into the garment — and
   only revealed once the rectangle grid is active. Must come after the generic
   .product-search__link:hover rule above; same specificity, later wins. */
.product-search__link:hover .product-search__img--hover-b-only {
  opacity: 0;
}
body.product-grid-rectangle .product-search__link:hover .product-search__img--hover-b-only {
  opacity: 1;
}
/* Swatch colour allowlist (Sweet Escape collections): a product carrying none of
   the allowlisted colourways renders an empty swatch row, so hide the whole
   fieldset rather than leave the two scroll arrows sitting on their own. */
.color-swatches:not(:has(.filter__checkbox--color)) {
  display: none;
}