/* Homepage hero only: animated cutout cases from existing Sanel Mart product photos */
.hero.hero-split {
  width: min(1224px, calc(100% - 72px));
  max-width: 1224px;
  min-height: 665px;
  margin: 0 auto;
  padding: clamp(74px, 7vw, 104px) 0 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.09fr) minmax(0, .91fr);
  gap: clamp(12px, 3vw, 46px);
  align-items: center;
  overflow: visible;
  text-align: left;
}
.hero-split .hero-copy { min-width: 0; position: relative; z-index: 2; }
.hero-split .announcement { max-width: max-content; }
.hero-split h1 {
  font-size: clamp(48px, 4.3vw, 76px);
  line-height: 1.025;
  letter-spacing: -.042em;
  margin-top: 34px;
  max-width: 680px;
  text-wrap: initial;
}
.hero-split .headline-first,
.hero-split .headline-second { display:block; }
.hero-split .hero-description {
  max-width: 510px;
  margin-top: 30px;
  font-size: clamp(16px, 1.27vw, 18px);
  line-height: 1.62;
  letter-spacing: -.012em;
}
.hero-split .desktop-break { display: none; }
.hero-split .hero-actions { justify-content: flex-start; margin-top: 25px; }
.hero-split .hero-trust {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 11px 13px;
  margin-top: 27px;
  font-size: 12px;
}
.hero-split .hero-visual {
  position: relative;
  width: 100%;
  height: min(40vw, 580px);
  min-height: 500px;
  align-self: center;
  isolation: isolate;
  pointer-events: none;
}
.hero-split .hero-visual-aura {
  position:absolute; inset: 6% 0 2%;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(ellipse at 55% 52%, rgba(255,100,55,.17) 0, rgba(155,75,100,.075) 35%, rgba(74,83,113,.04) 58%, transparent 75%);
  filter: blur(35px);
}
.hero-split .hero-case {
  position:absolute;
  display:block;
  object-fit:contain;
  max-width: none;
  height:auto;
  -webkit-user-select:none;
  user-select:none;
  will-change: transform;
  filter: drop-shadow(0 28px 22px rgba(0,0,0,.42));
  transform-origin:center 55%;
}
.hero-split .hero-case-back {
  width: 52%; top: 14%; left: 0%; z-index: 1;
  animation: heroCaseLeft 7.8s ease-in-out infinite;
}
.hero-split .hero-case-side {
  width: 56%; top: 19%; right: 0%; z-index: 2;
  animation: heroCaseRight 8.8s ease-in-out infinite;
}
.hero-split .hero-case-front {
  width: 61%; top: 4%; left: 25%; z-index: 3;
  filter: drop-shadow(0 35px 25px rgba(0,0,0,.53));
  animation: heroCaseCenter 7.3s ease-in-out infinite;
}
@keyframes heroCaseLeft {
  0%,100% {transform: translate3d(0,0,0) rotate(-15deg)}
  50% {transform: translate3d(0,-16px,0) rotate(-12deg)}
}
@keyframes heroCaseRight {
  0%,100% {transform: translate3d(0,0,0) rotate(16deg)}
  50% {transform: translate3d(2px,-21px,0) rotate(13deg)}
}
@keyframes heroCaseCenter {
  0%,100% {transform: translate3d(0,0,0) rotate(0deg)}
  50% {transform: translate3d(0,-23px,0) rotate(2deg)}
}
@media (max-width: 1020px) {
  .hero.hero-split { width:calc(100% - 48px); grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr); gap: 10px; min-height: 580px; padding:78px 0 60px; }
  .hero-split h1 { font-size:clamp(43px,5.1vw,60px); }
  .hero-split .hero-visual {height:490px;min-height:0;}
  .hero-split .hero-case-back {width:58%;left:-5%;top:18%;}
  .hero-split .hero-case-side {width:61%;right:-4%;top:23%;}
  .hero-split .hero-case-front {width:68%;left:20%;top:8%;}
}
@media (max-width: 760px) {
  .hero.hero-split {
    width: calc(100% - 36px);
    min-height: 0;
    padding: 74px 0 38px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: left;
  }
  .hero-split h1 { font-size: clamp(43px, 8.8vw, 62px); line-height:1.04; margin-top: 27px; max-width: 630px; }
  .hero-split .hero-description {margin-top:20px; font-size:16px;max-width:600px;}
  .hero-split .hero-actions {justify-content:flex-start;margin-top:24px;}
  .hero-split .hero-trust {justify-content:flex-start; margin-top:22px;}
  .hero-split .hero-visual {
    width: min(100%, 520px);
    height: clamp(320px, 82vw, 470px);
    min-height: 0;
    margin: 16px auto 0;
  }
  .hero-split .hero-case-back {width:50%; top:13%; left:1%;}
  .hero-split .hero-case-side {width:51%; top:20%; right:1%;}
  .hero-split .hero-case-front {width:61%; top:1%; left:23%;}
}
@media (max-width: 420px) {
  .hero.hero-split {width:calc(100% - 30px); padding-top:60px;}
  .hero-split h1 {font-size:clamp(37px,9vw,46px);}
  .hero-split .hero-description {font-size:14px;}
  .hero-split .hero-actions {gap:10px;flex-wrap:wrap;}
  .hero-split .hero-visual {height:clamp(280px,87vw,352px);margin-top:10px;}
  .hero-split .hero-trust{font-size:11px;}
}
@media (prefers-reduced-motion:reduce) {
  .hero-split .hero-case {animation:none!important;}
}


/* Exact supplier product contours, clean cutouts with no hands/background. */
.hero-split .hero-case-back {width: 47%; left: 0%; top: 11%;}
.hero-split .hero-case-side {width: 39%; right: 0%; top: 12%;}
.hero-split .hero-case-front {width: 61%; left: 23%; top: 4%;}
@media(max-width:760px){
  .hero-split .hero-case-back {width:40%;left:1%;top:6%;}
  .hero-split .hero-case-side {width:34%;right:1%;top:3%;}
  .hero-split .hero-case-front {width:52%;left:25%;top:1%;}
}

/* Standalone case images from online product photos, without hands or backgrounds.
   Local transparent real-image references are always available offline. */
.hero-split .hero-online-slot {
  aspect-ratio: .515 / 1;
  min-height:0;
  max-height:none;
  filter:none;
  z-index:1;
  pointer-events:none;
}
.hero-split .hero-online-slot.hero-case-side {z-index:2}
.hero-split .hero-online-slot.hero-case-front {z-index:3}
.hero-split .hero-online-slot > img {
  position:absolute;
  display:block;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  object-fit:contain;
  max-width:none;
}
.hero-split .hero-case-fallback {
  width:100%;height:100%;left:0;top:0;
  filter:drop-shadow(0 25px 15px rgba(0,0,0,.30));
  opacity:1;
  transition:opacity .36s ease;
}
.hero-split .hero-case-online {
  width:255%;height:auto;
  top:-21%;left:-77.5%;
  opacity:0;
  visibility:hidden;
  filter:url(#hero-white-knockout) drop-shadow(0 30px 19px rgba(0,0,0,.32));
  transition:opacity .36s ease, visibility .36s ease;
}
.hero-split .hero-online-slot.hero-source-ready .hero-case-online {opacity:1;visibility:visible}
.hero-split .hero-online-slot.hero-source-ready .hero-case-fallback {opacity:0}
/* Local/online pictures stay aligned inside the exact same floating case slot. */
.hero-split .hero-case-back {width:43%;left:-1%;top:14%}
.hero-split .hero-case-side {width:43%;right:-1%;top:17%}
.hero-split .hero-case-front {width:47%;left:28%;top:6%}
@media(max-width:760px){
 .hero-split .hero-case-back {width:40%;left:1%;top:10%}
 .hero-split .hero-case-side {width:40%;right:0%;top:15%}
 .hero-split .hero-case-front {width:49%;left:27%;top:2%}
}
@media(prefers-reduced-motion:reduce){
 .hero-split .hero-case-fallback,.hero-split .hero-case-online {transition:none!important}
}

/* Edited product-photography hero: real supplied images, no background-cutout filters. */
.hero-split .hero-gallery-edited {
  isolation:isolate;
  overflow:visible;
}
.hero-split .hero-gallery-edited .hero-case {
  position:absolute;
  height:clamp(245px,28vw,382px)!important;
  width:clamp(175px,17.8vw,248px)!important;
  border-radius:24px;
  overflow:hidden;
  background:#292a30;
  box-shadow:0 28px 60px rgba(0,0,0,.38);
  filter:none!important;
  z-index:1;
  transform-origin:center;
  border:1px solid rgba(255,255,255,.13);
  animation:editedHeroFloat 7s ease-in-out infinite!important;
}
.hero-split .hero-gallery-edited .hero-case-back {left:0!important;right:auto!important;top:18%!important;transform:rotate(-11deg);animation-delay:-1.2s!important}
.hero-split .hero-gallery-edited .hero-case-front {left:30%!important;right:auto!important;top:8%!important;z-index:3;transform:rotate(0deg);animation-delay:-3s!important}
.hero-split .hero-gallery-edited .hero-case-side {right:0!important;left:auto!important;top:23%!important;z-index:2;transform:rotate(9deg);animation-delay:-4.5s!important}
.hero-split .hero-gallery-edited .hero-photo {
  display:block;
  width:100%!important;
  height:100%!important;
  position:static!important;
  object-fit:cover!important;
  object-position:center center;
  filter:none!important;
}
@keyframes editedHeroFloat {0%,100%{translate:0 0}50%{translate:0 -13px}}
@media(max-width:760px){
 .hero-split .hero-gallery-edited .hero-case {
   height:clamp(205px,58vw,285px)!important;
   width:clamp(140px,39vw,205px)!important;
   border-radius:16px;
 }
 .hero-split .hero-gallery-edited .hero-case-back{left:0!important;top:13%!important}
 .hero-split .hero-gallery-edited .hero-case-front{left:28%!important;top:2%!important}
 .hero-split .hero-gallery-edited .hero-case-side{right:0!important;top:15%!important}
}
@media(prefers-reduced-motion:reduce){
 .hero-split .hero-gallery-edited .hero-case{animation:none!important}
}

/* Supplied complete offer banner in the right side of the homepage hero. */
.hero-split .hero-gallery-edited .hero-offer-banner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
  user-select: none;
}

/* Mobile offer banner: size the hero to the image instead of a tall fixed box. */
@media (max-width: 768px) {
  .hero.hero-split {
    min-height: 0;
    padding-bottom: 0;
  }
  .hero-split .hero-visual {
    height: auto;
    min-height: 0;
    margin: 16px auto 0;
  }
  #homepage .shop-section {
    padding-top: 24px;
  }
}
@media(max-width:760px){
  .hero-split .hero-gallery-edited .hero-offer-banner {
    position: static;
    width: 100%;
    height: auto;
    max-height: 100%;
    transform: none;
  }
}