/*
 * The favourites page for guests and shared lists (/favoriler/, PageView, D-121): the
 * account's Favorilerim in the site's language. The way back, the band (the account's
 * band: R 28, the owner's picture on the right, the same picture blurred filling the
 * rest; slim), for a guest the invitation to sign in or up, then the list in a white
 * card (the list itself: wishlist.css). Laid out by the page's own width.
 */
.hs-favourites-page {
  display: grid;
  gap: 24px;
  padding-block: 24px 64px;
  color: var(--hs-ink, #1f2547);
  font-family: var(--hs-font, system-ui, sans-serif);
  container: hs-fav / inline-size;
}

.hs-favourites-page > * {
  min-width: 0;
}

/* ─── The way back ─────────────────────────────────────────────────────────── */

.hs-favourites-page .hs-crumbs {
  margin-bottom: -12px;
}

.hs-favourites-page .hs-crumbs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--hs-muted, #5b6180);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
}

.hs-favourites-page .hs-crumbs__list > li {
  display: flex;
  flex: none;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.hs-favourites-page .hs-crumbs__list > li + li::before {
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  content: '';
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.hs-favourites-page .hs-crumbs a {
  color: var(--hs-muted, #5b6180);
  text-decoration: none;
}

.hs-favourites-page .hs-crumbs a:hover {
  color: var(--hs-blue-600, #0070e0);
  text-decoration: underline;
}

.hs-favourites-page .hs-crumbs [aria-current] {
  color: var(--hs-ink, #1f2547);
  font-weight: 700;
}

/* ─── The band ─────────────────────────────────────────────────────────────── */

.hs-fav-hero {
  --hs-fav-hero-h: clamp(150px, 15cqi, 180px);

  position: relative;
  display: flex;
  align-items: center;
  height: var(--hs-fav-hero-h);
  overflow: hidden;
  border-radius: var(--hs-r-xl, 28px);
  corner-shape: var(--hs-corner-shape, round);
  background: linear-gradient(
    100deg,
    var(--hs-surface, #fff) 0%,
    color-mix(in srgb, var(--hs-orange-600, #e06c00) 5%, var(--hs-surface, #fff)) 45%,
    color-mix(in srgb, var(--hs-orange-600, #e06c00) 12%, var(--hs-surface, #fff)) 100%
  );
  box-shadow: var(--hs-shadow-sm);
}

.hs-fav-hero__art {
  position: absolute;
  inset: 0;
}

.hs-fav-hero__img {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 24%);
}

/* The fill: the picture's soft left third, stretched and blurred up to its own soft part. */
.hs-fav-hero__img--wash {
  top: -40px;
  right: auto;
  left: -40px;
  width: calc((100% - var(--hs-fav-hero-h) * 2.1) / 0.3 + 40px);
  height: calc(100% + 80px);
  object-fit: fill;
  filter: blur(28px) saturate(1.1);
  mask-image: none;
}

.hs-fav-hero__text {
  position: relative;
  z-index: 1;
  max-width: calc(100% - var(--hs-fav-hero-h) * 2.05 - 16px);
  padding: 24px 0 24px 48px;
}

.hs-fav-hero__title {
  margin: 0 0 8px;
  color: var(--hs-ink, #1f2547);
  font-size: clamp(28px, 3.4cqi, 40px);
  font-weight: var(--hs-fw-heading, 900);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hs-fav-hero__lead {
  max-width: 44ch;
  margin: 0;
  color: var(--hs-muted, #5b6180);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

.hs-fav-hero__stand-in {
  position: absolute;
  inset: 0 0 0 50%;
}

.hs-fav-hero__shape {
  position: absolute;
  display: flex;
}

.hs-fav-hero__shape--1 {
  top: 22%;
  left: 12%;
  color: var(--hs-red, #e11d48);
  transform: rotate(-14deg) scale(1.3);
}

.hs-fav-hero__shape--2 {
  right: 28%;
  bottom: 12%;
  color: var(--hs-blue-600, #0070e0);
  transform: rotate(8deg) scale(2.6);
}

.hs-fav-hero__shape--3 {
  top: 14%;
  right: 34%;
  color: #f5b400;
  transform: rotate(12deg);
}

.hs-fav-hero__shape--4 {
  right: 8%;
  bottom: 18%;
  color: var(--hs-pink, #d6336c);
  transform: rotate(16deg) scale(1.1);
}

.hs-fav-hero__shape--5 {
  bottom: 16%;
  left: 24%;
  color: var(--hs-orange, #f09820);
  transform: scale(0.9);
}

/* ─── For a guest: sign in or up to keep the list ──────────────────────────── */

.hs-fav-invite {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 16px 16px 20px;
  border: 1px solid color-mix(in srgb, var(--hs-blue-600, #0070e0) 18%, transparent);
  border-radius: var(--hs-r-xl, 28px);
  corner-shape: var(--hs-corner-shape, round);
  background: color-mix(in srgb, var(--hs-blue-600, #0070e0) 6%, var(--hs-surface, #fff));
}

.hs-fav-invite__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--hs-surface, #fff);
  box-shadow: var(--hs-shadow-sm);
  color: var(--hs-red, #e11d48);
}

.hs-fav-invite__text {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-fav-invite__title {
  margin: 0 0 4px;
  color: var(--hs-ink, #1f2547);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.hs-fav-invite__lead {
  margin: 0;
  color: var(--hs-muted, #5b6180);
  font-size: 15px;
  line-height: 1.45;
}

.hs-fav-invite__actions {
  display: flex;
  flex: none;
  gap: 8px;
}

/* Pills inside the card's 16 px: R 28 − 16 = 12. */
.hs-fav-invite__button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--hs-line, #e6e9f0);
  border-radius: max(calc((var(--hs-radius-xl, 28px) - 16px) * var(--hs-corner-scale, 1)), var(--hs-r-min, 4px));
  corner-shape: var(--hs-corner-shape, round);
  background: var(--hs-surface, #fff);
  color: #0059b3;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.hs-fav-invite__button:hover,
.hs-fav-invite__button:focus-visible {
  border-color: #0059b3;
  color: #0059b3;
}

.hs-fav-invite__button--primary {
  border-color: var(--hs-orange-700, #c2410c);
  background: var(--hs-orange-700, #c2410c);
  color: #fff;
}

.hs-fav-invite__button--primary:hover,
.hs-fav-invite__button--primary:focus-visible {
  border-color: #9a3412;
  background: #9a3412;
  color: #fff;
}

/* ─── The list in a white card ─────────────────────────────────────────────── */

.hs-favourites-page .hs-wishlist--page {
  gap: 18px;
  padding: 23px;
  border: 1px solid var(--hs-line, #e6e9f0);
  border-radius: var(--hs-r-xl, 28px);
  corner-shape: var(--hs-corner-shape, round);
  background: var(--hs-surface, #fff);
  box-shadow: var(--hs-shadow-sm);
}

.hs-favourites-page .hs-wishlist--page .hs-wishlist__title {
  font-weight: var(--hs-fw-heading, 900);
}

.hs-favourites-page .hs-wishlist--page .hs-wishlist__empty {
  padding: 40px 20px;
}

/* ─── Narrower ─────────────────────────────────────────────────────────────── */

/* The invitation: the words over the buttons. */
@container hs-fav (max-width: 799px) {
  .hs-fav-invite {
    flex-wrap: wrap;
  }

  .hs-fav-invite__text {
    flex-basis: calc(100% - 68px);
  }

  .hs-fav-invite__actions {
    flex-basis: 100%;
  }

  .hs-fav-invite__button {
    flex: 1 1 0;
  }
}

/* Phones: the slim band as the account's (the picture on the right 46 %), the card closer. */
@container hs-fav (max-width: 719px) {
  .hs-favourites-page {
    gap: 16px;
    padding-block: 16px 48px;
  }

  .hs-fav-hero {
    height: auto;
    min-height: 150px;
  }

  .hs-fav-hero__text {
    max-width: 62%;
    padding: 20px 0 20px 20px;
  }

  .hs-fav-hero__title {
    font-size: clamp(24px, 7cqi, 30px);
  }

  .hs-fav-hero__lead {
    font-size: 14px;
    line-height: 1.45;
  }

  .hs-fav-hero__img {
    width: 46%;
    object-fit: cover;
    object-position: 76% 60%;
    mask-image: linear-gradient(90deg, transparent, #000 30%);
  }

  .hs-fav-hero__img--wash {
    width: calc((100% + 80px) / 0.3);
    object-fit: fill;
    mask-image: none;
  }

  .hs-fav-hero__stand-in {
    inset: 0 0 0 54%;
  }

  .hs-fav-invite {
    padding: 16px;
  }

  .hs-favourites-page .hs-wishlist--page {
    padding: 16px;
  }
}