@import url('../tokens.css');

@media (max-width: 760px) {
  .cards-grid,
  .search-page__group-grid,
  .search-page__group-loader-grid,
  .gr-ideas-grid,
  .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
    align-items: start;
    gap: 14px 10px;
    width: calc(100vw - 20px);
    margin-left: calc(50% - 50vw + 10px);
    margin-right: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .cards-grid > .cat-card[data-product-card],
  .search-page__group-grid > .cat-card[data-product-card],
  .gr-ideas-grid > .cat-card[data-product-card],
  .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid] > .cat-card[data-product-card] {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    scroll-snap-align: none;
  }

  .cat-card[data-product-card].cat-card--media-square {
    --cat-card-height: 560px;
    aspect-ratio: 325 / 560;
  }

  .cat-card[data-product-card].cat-card--media-tall {
    --cat-card-height: 630px;
    aspect-ratio: 325 / 630;
  }

  .cat-card[data-product-card].cat-card--media-wide {
    --cat-card-height: 490px;
    aspect-ratio: 325 / 490;
  }

  .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-square,
  .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-square,
  .page--search .cards-grid .cat-card[data-product-card].cat-card--media-square {
    --cat-card-height: 580px;
    aspect-ratio: 325 / 580;
  }

  .cat-card[data-product-card] {
    --cat-card-title-lift: calc(1.5px * var(--cat-card-mobile-readable, 1));
    --cat-card-title-stack-offset: calc(4px * var(--cat-card-mobile-readable, 1));
    --cat-card-corner-badge-size: calc(28px * var(--cat-card-mobile-readable, 1));
    --cat-card-corner-badge-top: calc(8px * var(--cat-card-mobile-readable, 1));
    --cat-card-corner-badge-left: calc(8px * var(--cat-card-mobile-readable, 1));
    --cat-card-corner-badge-gap: calc(5px * var(--cat-card-mobile-readable, 1));
    --cat-card-corner-badge-pad-x: calc(9px * var(--cat-card-mobile-readable, 1));
    --cat-card-corner-badge-font-size: calc(10px * var(--cat-card-mobile-readable, 1));
    --cat-card-corner-badge-ad-font-size: calc(12px * var(--cat-card-mobile-readable, 1));
    --cat-card-corner-badge-icon-size: calc(11px * var(--cat-card-mobile-readable, 1));
  }

  .cat-card[data-product-card].cat-card--title-one-line {
    --cat-card-title-lift: calc(14px * var(--cat-card-mobile-readable, 1));
    --cat-card-title-stack-offset: 0px;
  }

  .featured-hub-root--gift-finder .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid]:not(.gf-prod-grid) .cat-card[data-product-card].cat-card--title-one-line {
    --cat-card-title-lift: calc(6.5px * var(--cat-card-mobile-readable, 1));
  }

  .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall,
  .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall,
  .page--search .cards-grid .cat-card[data-product-card].cat-card--media-tall {
    --cat-card-height: 630px;
    aspect-ratio: 325 / 630;
  }

  .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide,
  .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide,
  .page--search .cards-grid .cat-card[data-product-card].cat-card--media-wide {
    --cat-card-height: 490px;
    aspect-ratio: 325 / 490;
  }

  .cat-card[data-product-card] .cat-card__title {
    top: calc((327 * var(--cat-card-unit-y)) + var(--cat-card-content-shift));
    min-height: calc(30px * var(--cat-card-mobile-readable, 1));
    font-size: calc(12.4px * var(--cat-card-mobile-readable, 1));
    font-weight: 700;
    line-height: 1.08;
  }

  .cat-card[data-product-card].cat-card--title-one-line .cat-card__title {
    min-height: calc(15px * var(--cat-card-mobile-readable, 1));
    -webkit-line-clamp: 1;
  }

  .cat-card[data-product-card] .cat-card__price {
    top: calc(
      (327 * var(--cat-card-unit-y)) +
      var(--cat-card-content-shift) +
      clamp(
        calc(32px * var(--cat-card-mobile-readable, 1)),
        calc((81 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))),
        calc(36px * var(--cat-card-mobile-readable, 1))
      ) +
      calc(0px * var(--cat-card-mobile-readable, 1)) -
      var(--cat-card-title-lift, 0px) +
      var(--cat-card-title-stack-offset, 0px)
    );
    gap: calc(3.5px * var(--cat-card-mobile-readable, 1));
  }

  .cat-card[data-product-card] .cat-card__currency,
  .cat-card[data-product-card] .cat-card__value-new {
    font-size: calc(16.2px * var(--cat-card-mobile-readable, 1));
    line-height: 1;
  }

  .cat-card[data-product-card] .cat-card__value-old {
    font-size: calc(13px * var(--cat-card-mobile-readable, 1));
  }

  .cat-card[data-product-card] .cat-card__service-badge {
    top: calc(
      (327 * var(--cat-card-unit-y)) +
      var(--cat-card-content-shift) +
      clamp(
        calc(53px * var(--cat-card-mobile-readable, 1)),
        calc((115 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))),
        calc(58px * var(--cat-card-mobile-readable, 1))
      ) +
      calc(0px * var(--cat-card-mobile-readable, 1)) -
      var(--cat-card-title-lift, 0px) +
      var(--cat-card-title-stack-offset, 0px)
    );
    height: calc(22px * var(--cat-card-mobile-readable, 1));
    max-width: calc(305 * var(--cat-card-unit-x));
  }

  .cat-card[data-product-card] .cat-card__service-badge-img {
    width: auto;
    max-width: min(calc(142px * var(--cat-card-mobile-readable, 1)), calc(305 * var(--cat-card-unit-x)));
    height: 100%;
  }

  .cat-card[data-product-card] .cat-card__service-badge--signal {
    height: calc(22px * var(--cat-card-mobile-readable, 1));
    max-width: min(calc(190px * var(--cat-card-mobile-readable, 1)), calc(305 * var(--cat-card-unit-x)));
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--intent-feedback-alert-strong);
    font-size: calc(12.4px * var(--cat-card-mobile-readable, 1));
    line-height: 1.15;
  }

  body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] {
    height: calc(22px * var(--cat-card-mobile-readable, 1));
    max-width: calc(86px * var(--cat-card-mobile-readable, 1));
    padding: 0 calc(7px * var(--cat-card-mobile-readable, 1));
    border-radius: calc(999 * var(--cat-card-unit-x));
    background: var(--color-forest);
    color: var(--color-cream);
    font-family: "Inter", Arial, sans-serif;
    font-size: calc(8.8px * var(--cat-card-mobile-readable, 1));
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label]::before {
    content: attr(data-jp-visible-label);
  }

  body[data-jp-language="ru"]:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge[data-jp-visible-label] .cat-card__service-badge-img {
    display: none;
  }

  .cat-card[data-product-card] .cat-card__store-row {
    top: calc(
      (327 * var(--cat-card-unit-y)) +
      var(--cat-card-content-shift) +
      clamp(
        calc(78px * var(--cat-card-mobile-readable, 1)),
        calc((161 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))),
        calc(83px * var(--cat-card-mobile-readable, 1))
      ) +
      calc(-3px * var(--cat-card-mobile-readable, 1)) -
      var(--cat-card-title-lift, 0px) +
      var(--cat-card-title-stack-offset, 0px)
    );
    min-width: calc(40px * var(--cat-card-mobile-readable, 1));
    min-height: calc(40px * var(--cat-card-mobile-readable, 1));
    height: calc(40px * var(--cat-card-mobile-readable, 1));
    align-items: flex-start;
    font-size: calc(9.4px * var(--cat-card-mobile-readable, 1));
    max-width: min(calc(148px * var(--cat-card-mobile-readable, 1)), calc(305 * var(--cat-card-unit-x)));
  }

  .cat-card[data-product-card].cat-card--no-service .cat-card__store-row {
    top: calc(
      (327 * var(--cat-card-unit-y)) +
      var(--cat-card-content-shift) +
      clamp(
        calc(61px * var(--cat-card-mobile-readable, 1)),
        calc((139 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))),
        calc(66px * var(--cat-card-mobile-readable, 1))
      ) +
      calc(-9px * var(--cat-card-mobile-readable, 1)) -
      var(--cat-card-title-lift, 0px) +
      var(--cat-card-title-stack-offset, 0px)
    );
  }

  .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--no-service .cat-card__store-row,
  .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--no-service .cat-card__store-row,
  .page--search .cards-grid .cat-card[data-product-card].cat-card--no-service .cat-card__store-row {
    top: calc(
      (327 * var(--cat-card-unit-y)) +
      var(--cat-card-content-shift) +
      clamp(
        calc(61px * var(--cat-card-mobile-readable, 1)),
        calc((139 * var(--cat-card-unit-y)) - (10px * var(--cat-card-mobile-readable, 1))),
        calc(66px * var(--cat-card-mobile-readable, 1))
      ) +
      calc(-9px * var(--cat-card-mobile-readable, 1)) -
      var(--cat-card-title-lift, 0px) +
      var(--cat-card-title-stack-offset, 0px)
    );
  }

  .cat-card[data-product-card] .cat-card__store {
    min-width: calc(40px * var(--cat-card-mobile-readable, 1));
    height: calc(22px * var(--cat-card-mobile-readable, 1));
    padding-inline: calc(5.5px * var(--cat-card-mobile-readable, 1));
    font-size: calc(9.4px * var(--cat-card-mobile-readable, 1));
    justify-content: center;
    max-width: min(calc(112px * var(--cat-card-mobile-readable, 1)), calc(230 * var(--cat-card-unit-x)));
  }

  .cat-card[data-product-card] .cat-card__store-row > svg,
  .cat-card[data-product-card] .cat-card__store-row > img.cat-card__store-icon {
    width: calc(22px * var(--cat-card-mobile-readable, 1));
    height: calc(22px * var(--cat-card-mobile-readable, 1));
    display: block;
    flex: 0 0 calc(22px * var(--cat-card-mobile-readable, 1));
    object-fit: contain;
  }

  .cat-card[data-product-card] .cat-card__store-notch {
    width: calc(8px * var(--cat-card-mobile-readable, 1));
    height: calc(13px * var(--cat-card-mobile-readable, 1));
    display: block;
    flex: 0 0 calc(8px * var(--cat-card-mobile-readable, 1));
  }

  body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-wide,
  body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide,
  body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide,
  body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-wide {
    --cat-card-media-height: 355px;
    --cat-card-height: 576px;
    --cat-card-content-shift: 30px;
    aspect-ratio: 325 / 576;
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__media-stats {
    right: calc(7px * var(--cat-card-mobile-readable, 1));
    bottom: calc(6px * var(--cat-card-mobile-readable, 1));
    gap: calc(4px * var(--cat-card-mobile-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-pill {
    height: calc(24px * var(--cat-card-mobile-readable, 1));
    padding-inline: calc(7px * var(--cat-card-mobile-readable, 1));
    gap: calc(3px * var(--cat-card-mobile-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-pill svg,
  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-star,
  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-icon {
    width: calc(12px * var(--cat-card-mobile-readable, 1));
    height: calc(12px * var(--cat-card-mobile-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-pill svg:nth-of-type(2),
  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__review-icon--comment {
    width: calc(14px * var(--cat-card-mobile-readable, 1));
    height: calc(14px * var(--cat-card-mobile-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__rating-value {
    font-size: calc(12px * var(--cat-card-mobile-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__dot {
    width: calc(3px * var(--cat-card-mobile-readable, 1));
    height: calc(3px * var(--cat-card-mobile-readable, 1));
    margin-left: 0;
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__reaction {
    display: none;
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__cart,
  body:not(.page--homepage).page--search.has-mobile-quick-nav .search-page__results .cat-card[data-product-source="jedipic"] .cat-card__cart {
    display: none;
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-notch {
    width: calc(8px * var(--cat-card-mobile-readable, 1));
    height: calc(13px * var(--cat-card-mobile-readable, 1));
    flex-basis: calc(8px * var(--cat-card-mobile-readable, 1));
    margin-top: calc(4.5px * var(--cat-card-mobile-readable, 1));
    margin-left: calc(-2px * var(--cat-card-mobile-readable, 1));
    margin-right: calc(-3.5px * var(--cat-card-mobile-readable, 1));
    border-radius: 0;
    clip-path: polygon(0 7.14%, 33.7% 33.95%, 61.8% 36.05%, 100% 0, 86.6% 58.6%, 100% 100%, 62.45% 64%, 31.7% 56.7%, 0 92.86%, 20.45% 44.12%);
  }
}

@media (min-width: 421px) and (max-width: 520px) {
  .page--search .cat-card[data-product-card].cat-card--title-one-line {
    --cat-card-title-lift: calc(6px * var(--cat-card-mobile-readable, 1));
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body:not(.page--homepage) .cat-card[data-product-card] {
    --cat-card-tablet-readable: var(--cat-card-scale-inverse, 1);
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__title {
    font-size: calc(13px * var(--cat-card-tablet-readable, 1));
    line-height: 1.16;
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__currency,
  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__value-new {
    font-size: calc(16px * var(--cat-card-tablet-readable, 1));
    line-height: 1;
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__value-old,
  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__discount {
    font-size: calc(13px * var(--cat-card-tablet-readable, 1));
    line-height: 1;
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge {
    height: calc(18px * var(--cat-card-tablet-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge-img--digital,
  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge-img--free-download {
    width: calc(116px * var(--cat-card-tablet-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge-img--shipping {
    width: calc(110px * var(--cat-card-tablet-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__service-badge--signal {
    height: calc(18px * var(--cat-card-tablet-readable, 1));
    font-size: calc(13px * var(--cat-card-tablet-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-row {
    min-height: calc(21px * var(--cat-card-tablet-readable, 1));
    height: calc(21px * var(--cat-card-tablet-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-row > svg,
  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-row > img.cat-card__store-icon {
    width: calc(21px * var(--cat-card-tablet-readable, 1));
    height: calc(21px * var(--cat-card-tablet-readable, 1));
    flex-basis: calc(21px * var(--cat-card-tablet-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store-notch {
    width: calc(8px * var(--cat-card-tablet-readable, 1));
    height: calc(12px * var(--cat-card-tablet-readable, 1));
    flex-basis: calc(8px * var(--cat-card-tablet-readable, 1));
  }

  body:not(.page--homepage) .cat-card[data-product-card] .cat-card__store {
    height: calc(21px * var(--cat-card-tablet-readable, 1));
    padding: calc(3px * var(--cat-card-tablet-readable, 1)) calc(7px * var(--cat-card-tablet-readable, 1)) calc(4px * var(--cat-card-tablet-readable, 1));
    font-size: calc(11px * var(--cat-card-tablet-readable, 1));
    line-height: 1;
  }
}

@media (max-width: 360px) {
  .cards-grid,
  .search-page__group-grid,
  .search-page__group-loader-grid,
  .gr-ideas-grid,
  .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid] {
    gap: 12px 8px;
  }

  body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-wide,
  body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide,
  body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide,
  body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-wide,
  .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-square,
  .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-square,
  .page--search .cards-grid .cat-card[data-product-card].cat-card--media-square {
    --cat-card-height: 610px;
    aspect-ratio: 325 / 610;
  }
}

@media (min-width: 560px) and (max-width: 760px) {
  body:not(.page--homepage) .cards-grid,
  body:not(.page--homepage) .search-page__group-grid,
  body:not(.page--homepage) .search-page__group-loader-grid,
  body:not(.page--homepage) .gr-ideas-grid,
  body:not(.page--homepage) .featured-hub-marketplace__grid.cards-grid[data-featured-hub-product-grid] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
  }
}

@media (min-width: 700px) and (max-width: 760px) {
  body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) .cards-grid .cat-card[data-product-card].cat-card--media-wide,
  body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) .search-page__group-grid .cat-card[data-product-card].cat-card--media-wide,
  body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) .gr-ideas-grid .cat-card[data-product-card].cat-card--media-wide,
  body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-square,
  body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-tall,
  body:not(.page--homepage) [data-featured-hub-product-grid] .cat-card[data-product-card].cat-card--media-wide,
  .page--search.is-group-mode .search-page__group-grid .cat-card[data-product-card].cat-card--media-square,
  .page--search .search-page__group-grid .cat-card[data-product-card].cat-card--media-square,
  .page--search .cards-grid .cat-card[data-product-card].cat-card--media-square {
    --cat-card-height: 530px;
    aspect-ratio: 325 / 530;
  }
}