/* PatCh.BaGs — seamless edge-to-edge responsive editorial hero.
   Uses the customer's approved photo for desktop/tablet and retains the
   existing mobile image, fonts, buttons and animation behavior. */
@media (min-width:681px) {
  html.patch-photo-ready .editorial-hero {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:630px;
    height:calc(100svh - 123px);
    max-height:970px;
    color:#fff;
    background:#747579;
  }

  /* A soft extension of the actual photograph fills ultrawide monitors
     without stretching the bag or exposing vertical image seams. */
  html.patch-photo-ready .editorial-hero::before {
    content:"";
    position:absolute;
    inset:-48px;
    z-index:0;
    pointer-events:none;
    background-image:var(--patch-hero-image);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 49%;
    filter:blur(31px) brightness(.68) saturate(.83);
    opacity:1;
    transform:scale(1.035);
  }
  html.patch-photo-ready .editorial-hero::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(35,37,37,.29),transparent 50%);
  }

  /* Move the portrait to the right while preserving its natural proportions.
     Gradually blend its left edge into the background; no grey sidebars. */
  html.patch-photo-ready .editorial-hero-image {
    position:absolute;
    top:0;bottom:0;
    left:auto;right:-12%;
    display:block;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    filter:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 10%,#000 23%,#000 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 10%,#000 23%,#000 100%);
    animation:photoHeroEnter .95s cubic-bezier(.25,.8,.25,1) both;
  }

  /* Text stays in the safe left column, separated from the product. */
  html.patch-photo-ready .editorial-hero-vignette {
    z-index:2;
    pointer-events:none;
    background:
      linear-gradient(90deg,rgba(23,26,25,.63) 0%,rgba(25,28,27,.49) 28%,rgba(30,31,31,.08) 55%,transparent 78%),
      linear-gradient(0deg,rgba(14,18,17,.42),transparent 23%);
  }
  html.patch-photo-ready .editorial-hero-content.container {
    box-sizing:border-box;
    position:relative;
    z-index:3;
    width:min(calc(100% - 9%),1500px);
    height:100%;
    max-width:1500px;
    margin:0 auto;
    padding:45px 0 78px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
  }
  html.patch-photo-ready .hero-kicker {
    color:#fff;
    font-size:9px;
    letter-spacing:.15em;
    max-width:47%;
  }
  html.patch-photo-ready .editorial-hero h1 {
    color:#fff;
    max-width:47%;
    font-size:clamp(64px,6.25vw,111px);
    line-height:1.025;
    letter-spacing:-.085em;
    margin-bottom:33px;
    white-space:normal;
    text-wrap:balance;
  }
  html.patch-photo-ready .editorial-hero h1 em {color:#f3ece1}
  html.patch-photo-ready .editorial-hero-bottom {z-index:4}
  @keyframes photoHeroEnter {
    from {opacity:.52;transform:translateX(18px)}
    to {opacity:1;transform:translateX(0)}
  }
}

@media (min-width:681px) and (max-width:1199px) {
  html.patch-photo-ready .editorial-hero {
    height:calc(100svh - 108px);
    min-height:570px;
  }
  html.patch-photo-ready .editorial-hero-image {
    width:80%;
    right:-7%;
    object-position:center center;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 23%,#000 100%);
    mask-image:linear-gradient(to right,transparent,#000 23%,#000 100%);
  }
  html.patch-photo-ready .editorial-hero-content.container {
    width:calc(100% - 9%);
    padding:36px 0 65px;
  }
  html.patch-photo-ready .hero-kicker {
    max-width:49%;
    font-size:8px;
    letter-spacing:.08em;
  }
  html.patch-photo-ready .editorial-hero h1 {
    max-width:48%;
    font-size:clamp(52px,6.1vw,75px);
    margin-bottom:25px;
  }
  html.patch-photo-ready .hero-cta {gap:17px}
}

@media (min-width:681px) and (max-height:680px) {
  html.patch-photo-ready .editorial-hero {min-height:515px}
  html.patch-photo-ready .editorial-hero-content.container {padding-top:23px;padding-bottom:45px}
  html.patch-photo-ready .editorial-hero h1 {
    font-size:clamp(51px,5.6vw,95px);
    margin-bottom:20px;
  }
  html.patch-photo-ready .hero-kicker {margin-bottom:16px}
}

@media (min-width:681px) and (prefers-reduced-motion:reduce) {
  html.patch-photo-ready .editorial-hero-image {animation:none}
}
/* At 680px and below nothing is changed: the already approved mobile hero remains. */