/* PATCH 385 — BLOOD HOME CONCEPT
   Replaces only the existing mobile wordmark, mobile hero artwork and desktop
   header lockup with the supplied blood-red assets. The established navigation,
   clock, catalogue, account controls and responsive document structure remain intact. */

@media (max-width: 820px) {
  body.home-page .site-header {
    border-bottom-color: rgba(255, 38, 68, .18) !important;
    background: linear-gradient(180deg, rgba(18, 0, 4, .90), rgba(8, 0, 3, .34) 68%, transparent) !important;
  }

  body.home-page .mobile-showcase-profile-link {
    border-color: rgba(255, 63, 87, .76) !important;
    background: rgba(26, 0, 6, .82) !important;
    box-shadow:
      0 0 0 3px rgba(139, 0, 27, .18),
      0 0 16px rgba(255, 22, 58, .32) !important;
  }

  body.home-page .mobile-showcase-brand__wordmark {
    width: clamp(102px, 26vw, 184px) !important;
    max-width: 100% !important;
    max-height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter:
      contrast(1.04)
      saturate(1.08)
      drop-shadow(0 0 6px rgba(255, 24, 61, .44)) !important;
  }

  body.home-page .mobile-showcase-brand__title-line strong {
    color: #ff788a !important;
    text-shadow:
      0 0 7px rgba(255, 33, 66, .48),
      0 0 13px rgba(114, 0, 25, .44) !important;
  }

  body.home-page .mobile-showcase-brand__lockup > small {
    color: rgba(255, 211, 218, .78) !important;
  }

  body.home-page .mobile-showcase-header__actions--353 button {
    color: #fff1f3 !important;
    background: rgba(28, 0, 6, .16) !important;
  }

  body.home-page .mobile-showcase-header__actions--353 button:active {
    background: rgba(153, 8, 35, .28) !important;
  }

  body.home-page .mobile-showcase-header__actions--353 svg {
    filter: drop-shadow(0 0 5px rgba(255, 35, 69, .28)) !important;
  }

  body.home-page .mobile-cart-button__dot {
    border-color: #180006 !important;
    background: #ff244e !important;
    box-shadow: 0 0 8px rgba(255, 24, 65, .82) !important;
  }

  body.home-page .mobile-home-hero__link {
    height: auto !important;
    min-height: clamp(180px, 43vw, 352px) !important;
    aspect-ratio: 1913 / 822 !important;
    border-bottom: 1px solid rgba(255, 38, 67, .24) !important;
    background: #070002 !important;
    box-shadow:
      0 14px 32px rgba(0, 0, 0, .42),
      0 8px 24px rgba(113, 0, 23, .15) !important;
  }

  body.home-page .mobile-home-hero__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    filter: none !important;
  }

  body.home-page .mobile-home-hero__shade {
    background:
      linear-gradient(180deg, rgba(12, 0, 3, .30) 0%, transparent 44%, rgba(8, 0, 2, .22) 100%),
      linear-gradient(90deg, rgba(13, 0, 3, .28), transparent 40%) !important;
  }

  body.home-page .mobile-home-clock {
    top: clamp(86px, 21vw, 112px) !important;
    left: clamp(10px, 3.2vw, 20px) !important;
    width: clamp(126px, 33vw, 178px) !important;
    min-height: clamp(62px, 17vw, 82px) !important;
    gap: 3px !important;
    padding: clamp(7px, 1.8vw, 10px) clamp(8px, 2vw, 12px) !important;
    border-color: rgba(255, 54, 81, .58) !important;
    border-radius: clamp(10px, 2vw, 15px) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 37, 70, .13), transparent 48%),
      linear-gradient(145deg, rgba(30, 0, 7, .90), rgba(8, 0, 3, .93)) !important;
    box-shadow:
      inset 0 0 18px rgba(255, 34, 67, .08),
      0 0 14px rgba(151, 0, 28, .19) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.home-page .mobile-home-clock__label {
    color: #ff8d9d !important;
    font-size: clamp(.48rem, 1.45vw, .65rem) !important;
  }

  body.home-page .mobile-home-clock__label svg {
    width: clamp(11px, 2.4vw, 15px) !important;
    height: clamp(11px, 2.4vw, 15px) !important;
  }

  body.home-page .mobile-home-clock__value {
    color: #fff0f2 !important;
    font-size: clamp(1.17rem, 4.8vw, 1.72rem) !important;
    text-shadow:
      0 0 7px rgba(255, 52, 81, .70),
      0 0 15px rgba(121, 0, 25, .38) !important;
  }

  body.home-page .mobile-home-clock > small {
    color: rgba(255, 220, 225, .72) !important;
    font-size: clamp(.43rem, 1.24vw, .57rem) !important;
  }

  body.home-page .mobile-home-clock > small > span:first-child {
    color: #ff7388 !important;
  }

  body.home-page .mobile-catalog-drawer--359 .mobile-catalog-drawer__brand-copy h3 img {
    object-fit: contain !important;
    filter: drop-shadow(0 0 7px rgba(255, 31, 67, .34)) !important;
  }

  body.home-page .mobile-catalog-drawer--359 .mobile-catalog-drawer__brand-copy h3 em {
    color: #ff6e83 !important;
  }
}

@media (max-width: 390px) {
  body.home-page .mobile-home-clock {
    top: 84px !important;
    width: 124px !important;
    min-height: 60px !important;
  }

  body.home-page .mobile-showcase-brand__wordmark {
    width: min(104px, 29vw) !important;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  body.home-page .site-logo--top-sign.pz-brand-lockup--top-sign {
    width: min(330px, 74vw) !important;
  }

  body.home-page .site-logo--top-sign .pz-brand-lockup__image {
    width: 100% !important;
    max-height: 104px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 0 10px rgba(255, 27, 61, .30)) !important;
  }
}

@media (min-width: 1181px) {
  html body.home-page .desktop-header-brand {
    width: min(100%, 230px) !important;
    height: 72px !important;
    overflow: visible !important;
  }

  html body.home-page .desktop-header-brand img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter:
      contrast(1.03)
      saturate(1.05)
      drop-shadow(0 0 7px rgba(255, 27, 61, .28)) !important;
    transform: none !important;
  }

  html body.home-page .desktop-header-brand:hover img {
    filter:
      contrast(1.05)
      saturate(1.08)
      drop-shadow(0 0 10px rgba(255, 36, 70, .42)) !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .mobile-showcase-brand__wordmark,
  html body.home-page .desktop-header-brand img {
    transition: none !important;
  }
}

/* PATCH 392 — one restrained neon light travelling around the main banner. */
body.home-page .pz-hero-carousel__viewport,
body.home-page .mobile-home-hero__link {
  --pz392-light-tail: rgba(139, 82, 255, .76);
  --pz392-light-core: rgba(210, 247, 255, .98);
  --pz392-light-edge: rgba(54, 211, 255, .88);
  --pz392-light-glow: rgba(126, 67, 255, .48);
  isolation: isolate;
}

body.home-page .pz-hero-carousel__slide video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #06020b !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  body.home-page .mobile-home-hero__image {
    position: absolute !important;
    inset: 0 !important;
  }

  body.home-page .mobile-home-hero__image.is-managed {
    opacity: 0;
    transition: opacity 720ms ease !important;
    pointer-events: none !important;
  }

  body.home-page .mobile-home-hero__image.is-managed.is-active {
    opacity: 1;
  }
}

body.home-page .mobile-home-hero__link {
  position: relative !important;
}

html[data-theme="lite"] body.home-page .pz-hero-carousel__viewport,
html[data-theme="lite"] body.home-page .mobile-home-hero__link {
  --pz392-light-tail: rgba(111, 126, 238, .64);
  --pz392-light-core: rgba(213, 242, 255, .92);
  --pz392-light-edge: rgba(157, 105, 236, .76);
  --pz392-light-glow: rgba(103, 119, 224, .30);
}

html[data-theme="pink"] body.home-page .pz-hero-carousel__viewport,
html[data-theme="pink"] body.home-page .mobile-home-hero__link {
  --pz392-light-tail: rgba(255, 74, 190, .72);
  --pz392-light-core: rgba(255, 225, 249, .96);
  --pz392-light-edge: rgba(177, 108, 255, .84);
  --pz392-light-glow: rgba(255, 60, 183, .38);
}

@supports (offset-path: inset(1px round 12px)) {
  body.home-page .pz-hero-carousel__viewport::after,
  body.home-page .mobile-home-hero__link::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 30 !important;
    display: block !important;
    width: clamp(34px, 3.2vw, 58px) !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--pz392-light-tail) 38%,
      var(--pz392-light-core) 70%,
      var(--pz392-light-edge) 86%,
      transparent 100%
    ) !important;
    box-shadow:
      0 0 4px var(--pz392-light-core),
      0 0 10px var(--pz392-light-glow) !important;
    opacity: .92 !important;
    pointer-events: none !important;
    offset-path: inset(2px round 16px);
    offset-distance: 0%;
    offset-rotate: auto;
    offset-anchor: center;
    animation: pz392-banner-border-light 7.4s linear infinite !important;
    will-change: offset-distance;
  }

  @media (max-width: 820px) {
    body.home-page .mobile-home-hero__link::after {
      width: 34px !important;
      height: 1.5px !important;
      offset-path: inset(2px round 13px);
      animation-duration: 9.2s !important;
      opacity: .84 !important;
      box-shadow:
        0 0 3px var(--pz392-light-core),
        0 0 7px var(--pz392-light-glow) !important;
    }
  }
}

@property --pz395-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@supports not (offset-path: inset(1px round 12px)) {
  body.home-page .pz-hero-carousel__viewport::after,
  body.home-page .mobile-home-hero__link::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    z-index: 30 !important;
    display: block !important;
    padding: 1px !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: conic-gradient(
      from var(--pz395-border-angle),
      transparent 0deg 305deg,
      var(--pz392-light-tail) 322deg,
      var(--pz392-light-core) 338deg,
      var(--pz392-light-edge) 348deg,
      transparent 360deg
    ) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
    opacity: .92 !important;
    pointer-events: none !important;
    animation: pz395-banner-border-angle 7.4s linear infinite !important;
  }
}

@keyframes pz392-banner-border-light {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

@keyframes pz395-banner-border-angle {
  to {
    --pz395-border-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .mobile-home-hero__image.is-managed {
    transition: none !important;
  }

  body.home-page .pz-hero-carousel__viewport::after,
  body.home-page .mobile-home-hero__link::after {
    animation: none !important;
    offset-distance: 12%;
    opacity: .58 !important;
    will-change: auto;
  }
}

/* PATCH 396 — managed crop for Hero and the dedicated news banner. */
body.home-page .pz-hero-carousel__slide img,
body.home-page .pz-hero-carousel__slide video,
body.home-page .mobile-home-hero__image.is-managed,
body.home-page .mobile-market-news-card__image {
  object-fit: cover !important;
  object-position: var(--pz-managed-x, 50%) var(--pz-managed-y, 50%) !important;
  transform: scale(var(--pz-managed-zoom, 1)) !important;
  transform-origin: var(--pz-managed-x, 50%) var(--pz-managed-y, 50%) !important;
}

body.home-page video.mobile-market-news-card__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: #050108 !important;
  pointer-events: none !important;
}

html body.home-page main.site-main [data-pz-hero-carousel][hidden],
html body.home-page main.site-main .mobile-home-hero--352[hidden] {
  display: none !important;
}