/*
File: letzshopy-home-seo-v2.css
Version: 2.0.0
Owner: LetzShopy Homepage SEO
Scope: final consolidated homepage SEO presentation
*/

/* =========================================================
   1. SECTION + CONTENT SHELL
========================================================= */

body.ls-home-seo-page .ls-home-seo{
  width:100%;
  clear:both;
  box-sizing:border-box;
  padding:18px 0 42px;
  background:
    linear-gradient(
      180deg,
      var(--ls-store-bg-soft,#F6EFE8),
      var(--ls-store-bg-inner,#FFFCF8)
    );
}

body.ls-home-seo-page .ls-home-seo__inner,
body.ls-home-seo-page .ls-home-seo__visual{
  width:calc(100% - 48px);
  max-width:1380px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

body.ls-home-seo-page .ls-home-seo__inner{
  padding:30px 0 8px;
}

body.ls-home-seo-page .ls-home-seo__kicker{
  display:block;
  margin:0 0 9px;
  color:var(--ls-store-primary,#7A2E3A);
  font-size:10px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}

body.ls-home-seo-page .ls-home-seo h2{
  max-width:850px;
  margin:0 0 15px;
  color:var(--ls-store-heading,#2C171A);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(29px,2.8vw,40px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.018em;
}

body.ls-home-seo-page .ls-home-seo p{
  max-width:1040px;
  margin:0 0 12px;
  color:var(--ls-store-text,#493438);
  font-size:14px;
  line-height:1.72;
  font-weight:500;
}

body.ls-home-seo-page .ls-home-seo__lead{
  color:var(--ls-store-heading,#2C171A);
  font-size:15px;
}


/* =========================================================
   2. EDITORIAL VISUAL STAGE
========================================================= */

body.ls-home-seo-page .ls-home-seo__visual{
  position:relative;
  height:clamp(520px,46vw,660px);
  overflow:hidden;
  isolation:isolate;
  background:#2C171A;
}

body.ls-home-seo-page .ls-home-seo__panels{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  z-index:1;
}

body.ls-home-seo-page .ls-home-seo__panel{
  position:relative;
  min-width:0;
  height:100%;
  margin:0;
  overflow:hidden;
  opacity:1;
  transform:translate3d(0,0,0);
  transition:
    opacity 1.05s ease,
    transform 1.30s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}

body.ls-home-seo-page .ls-home-seo__panel--1{z-index:1}
body.ls-home-seo-page .ls-home-seo__panel--2{z-index:2}
body.ls-home-seo-page .ls-home-seo__panel--3{z-index:3}
body.ls-home-seo-page .ls-home-seo__panel--4{z-index:4}

body.ls-home-seo-page .ls-home-seo__panel picture,
body.ls-home-seo-page .ls-home-seo__image{
  display:block;
  width:100%;
  height:100%;
}

body.ls-home-seo-page .ls-home-seo__image{
  object-fit:cover;
  object-position:center;
  transform:scale(1);
}


/* =========================================================
   3. DESKTOP IMAGE SEQUENCE
   rightmost -> leftmost
========================================================= */

body.ls-home-seo-page
.ls-home-seo__visual.ls-hm-pending
.ls-home-seo__panel{
  opacity:0;
  transform:translate3d(100%,0,0);
}

body.ls-home-seo-page
.ls-home-seo__visual.is-visible
.ls-home-seo__panel--4{
  transition-delay:.05s;
}

body.ls-home-seo-page
.ls-home-seo__visual.is-visible
.ls-home-seo__panel--3{
  transition-delay:.90s;
}

body.ls-home-seo-page
.ls-home-seo__visual.is-visible
.ls-home-seo__panel--2{
  transition-delay:1.75s;
}

body.ls-home-seo-page
.ls-home-seo__visual.is-visible
.ls-home-seo__panel--1{
  transition-delay:2.60s;
}


/* =========================================================
   4. OVERLAY + COPY
========================================================= */

body.ls-home-seo-page .ls-home-seo__shade{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:1;
  background:
    linear-gradient(
      180deg,
      rgba(34,12,18,.12) 0%,
      rgba(65,18,30,.38) 46%,
      rgba(46,13,21,.72) 100%
    );
  transition:opacity .95s ease;
}

body.ls-home-seo-page
.ls-home-seo__visual.ls-hm-pending
.ls-home-seo__shade{
  opacity:0;
}

body.ls-home-seo-page
.ls-home-seo__visual.is-visible
.ls-home-seo__shade{
  transition-delay:4.02s;
}

body.ls-home-seo-page .ls-home-seo__visual-copy{
  position:absolute;
  left:50%;
  top:50%;
  z-index:6;
  width:min(780px,calc(100% - 56px));
  text-align:center;
  opacity:1;
  transform:translate3d(-50%,-50%,0);
  transition:
    opacity .78s ease,
    transform .95s cubic-bezier(.22,1,.36,1);
}

body.ls-home-seo-page
.ls-home-seo__visual.ls-hm-pending
.ls-home-seo__visual-copy{
  opacity:0;
  transform:translate3d(-50%,calc(-50% + 52px),0);
}

body.ls-home-seo-page
.ls-home-seo__visual.is-visible
.ls-home-seo__visual-copy{
  transition-delay:4.42s;
}

body.ls-home-seo-page
.ls-home-seo__visual-copy
.ls-home-seo__kicker{
  margin-bottom:11px;
  color:#F0D59A;
  text-shadow:0 1px 18px rgba(0,0,0,.22);
}

body.ls-home-seo-page
.ls-home-seo__visual-copy h2{
  max-width:760px;
  margin:0 auto 22px;
  color:#FFFDF9;
  font-size:clamp(34px,4vw,58px);
  line-height:1.02;
  text-shadow:0 2px 22px rgba(0,0,0,.25);
}

body.ls-home-seo-page .ls-home-seo__visual-cta{
  min-height:45px;
  padding:12px 21px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.76);
  border-radius:3px;
  background:rgba(255,255,255,.06);
  color:#FFFFFF;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease;
}

body.ls-home-seo-page .ls-home-seo__visual-cta:hover,
body.ls-home-seo-page .ls-home-seo__visual-cta:focus{
  background:#FFFFFF;
  border-color:#FFFFFF;
  color:#652735;
  text-decoration:none;
}


/* =========================================================
   5. SETTLED SLOW ZOOM
========================================================= */

@keyframes ls-home-seo-v2-settled-zoom{
  from{transform:scale(1)}
  to{transform:scale(1.045)}
}

body.ls-home-seo-page
.ls-home-seo__visual.is-visible
.ls-home-seo__image{
  animation:
    ls-home-seo-v2-settled-zoom
    24s ease-in-out 5.55s infinite alternate;
}


/* =========================================================
   6. CATEGORY MARQUEE
========================================================= */

body.ls-home-seo-page
.ls-home-seo--visual
.ls-home-seo__categories{
  width:100%;
  max-width:none;
  margin:24px 0 0;
  overflow:hidden;
  border-top:1px solid rgba(122,46,58,.24);
  border-bottom:1px solid rgba(122,46,58,.24);
  opacity:1;
  transform:none;
  transition:
    opacity .72s ease,
    transform .86s cubic-bezier(.22,1,.36,1);
}

body.ls-home-seo-page
.ls-home-seo--visual
.ls-home-seo__categories.ls-hm-pending{
  opacity:0;
  transform:translate3d(0,18px,0);
}

body.ls-home-seo-page .ls-home-seo__categories-track{
  display:flex;
  align-items:center;
  width:200%;
  min-width:200%;
  animation:
    ls-home-seo-v2-marquee
    46s linear infinite;
  animation-play-state:paused;
  will-change:transform;
}

body.ls-home-seo-page
.ls-home-seo__categories.is-visible
.ls-home-seo__categories-track{
  animation-play-state:running;
}

body.ls-home-seo-page .ls-home-seo__categories-set{
  flex:0 0 50%;
  width:50%;
  min-width:50%;
  min-height:52px;
  padding:0 34px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:24px;
  box-sizing:border-box;
}

body.ls-home-seo-page
.ls-home-seo--visual
.ls-home-seo__categories a{
  flex:0 0 auto;
  padding:8px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ls-store-heading,#2C171A);
  font-size:11px;
  line-height:1.25;
  font-weight:750;
  letter-spacing:.055em;
  white-space:nowrap;
  text-decoration:none;
}

body.ls-home-seo-page
.ls-home-seo--visual
.ls-home-seo__categories a:hover,
body.ls-home-seo-page
.ls-home-seo--visual
.ls-home-seo__categories a:focus{
  color:var(--ls-store-primary,#7A2E3A);
  text-decoration:underline;
  text-underline-offset:4px;
}

@keyframes ls-home-seo-v2-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media (hover:hover) and (pointer:fine){
  body.ls-home-seo-page
  .ls-home-seo__categories:hover
  .ls-home-seo__categories-track,
  body.ls-home-seo-page
  .ls-home-seo__categories:focus-within
  .ls-home-seo__categories-track{
    animation-play-state:paused;
  }
}


/* =========================================================
   7. JOURNEY BARS
========================================================= */

body.ls-home-seo-page
.ls-home-seo--visual
.ls-home-seo__journey{
  width:100%;
  margin:22px 0 0;
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(145px,1fr));
  gap:8px;
}

body.ls-home-seo-page
.ls-home-seo--visual
.ls-home-seo__journey a{
  width:100%;
  min-height:44px;
  padding:11px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:1px solid rgba(122,46,58,.22);
  border-radius:3px;
  background:rgba(255,255,255,.34);
  color:var(--ls-store-heading,#2C171A);
  font-size:11px;
  line-height:1.25;
  font-weight:750;
  letter-spacing:.045em;
  text-align:center;
  text-decoration:none;
  opacity:1;
  transform:none;
  transition:
    opacity .64s ease,
    transform .78s cubic-bezier(.22,1,.36,1),
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
}

body.ls-home-seo-page
.ls-home-seo__journey.ls-hm-pending a{
  opacity:0;
  transform:translate3d(-34px,0,0);
}

body.ls-home-seo-page
.ls-home-seo__journey.is-visible a:nth-child(1){
  transition-delay:.05s;
}
body.ls-home-seo-page
.ls-home-seo__journey.is-visible a:nth-child(2){
  transition-delay:.20s;
}
body.ls-home-seo-page
.ls-home-seo__journey.is-visible a:nth-child(3){
  transition-delay:.35s;
}
body.ls-home-seo-page
.ls-home-seo__journey.is-visible a:nth-child(4){
  transition-delay:.50s;
}
body.ls-home-seo-page
.ls-home-seo__journey.is-visible a:nth-child(5){
  transition-delay:.65s;
}

body.ls-home-seo-page
.ls-home-seo--visual
.ls-home-seo__journey a:hover,
body.ls-home-seo-page
.ls-home-seo--visual
.ls-home-seo__journey a:focus{
  border-color:rgba(122,46,58,.48);
  background:#FFFFFF;
  color:var(--ls-store-primary,#7A2E3A);
  text-decoration:none;
}


/* =========================================================
   8. NON-VISUAL FALLBACK
========================================================= */

body.ls-home-seo-page
.ls-home-seo:not(.ls-home-seo--visual)
.ls-home-seo__categories{
  margin:20px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

body.ls-home-seo-page
.ls-home-seo:not(.ls-home-seo--visual)
.ls-home-seo__categories a{
  min-height:39px;
  padding:9px 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(122,46,58,.24);
  border-radius:3px;
  color:var(--ls-store-heading,#2C171A);
  text-decoration:none;
}

body.ls-home-seo-page
.ls-home-seo:not(.ls-home-seo--visual)
.ls-home-seo__journey{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}

body.ls-home-seo-page
.ls-home-seo:not(.ls-home-seo--visual)
.ls-home-seo__journey a{
  color:var(--ls-store-primary,#7A2E3A);
}


/* =========================================================
   9. TABLET
========================================================= */

@media (min-width:768px) and (max-width:1024px){

  body.ls-home-seo-page .ls-home-seo__inner,
  body.ls-home-seo-page .ls-home-seo__visual{
    width:calc(100% - 36px);
  }

  body.ls-home-seo-page .ls-home-seo__visual{
    height:520px;
  }

  body.ls-home-seo-page
  .ls-home-seo__visual-copy h2{
    font-size:clamp(34px,5vw,48px);
  }
}


/* =========================================================
   10. MOBILE — 2 × 2
   reveal order:
   TL(1) -> BR(4) -> TR(2) -> BL(3)
========================================================= */

@media (max-width:767px){

  body.ls-home-seo-page .ls-home-seo{
    padding:10px 0 32px;
  }

  body.ls-home-seo-page .ls-home-seo__inner,
  body.ls-home-seo-page .ls-home-seo__visual{
    width:calc(100% - 28px);
  }

  body.ls-home-seo-page .ls-home-seo__inner{
    padding-top:22px;
  }

  body.ls-home-seo-page .ls-home-seo__visual{
    height:auto;
    aspect-ratio:1/1;
  }

  body.ls-home-seo-page .ls-home-seo__panels{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
  }

  body.ls-home-seo-page
  .ls-home-seo__visual.ls-hm-pending
  .ls-home-seo__panel{
    opacity:0;
    transform:translate3d(62px,0,0);
  }

  body.ls-home-seo-page
  .ls-home-seo__visual.is-visible
  .ls-home-seo__panel--1{
    transition-delay:.05s;
  }

  body.ls-home-seo-page
  .ls-home-seo__visual.is-visible
  .ls-home-seo__panel--4{
    transition-delay:.90s;
  }

  body.ls-home-seo-page
  .ls-home-seo__visual.is-visible
  .ls-home-seo__panel--2{
    transition-delay:1.75s;
  }

  body.ls-home-seo-page
  .ls-home-seo__visual.is-visible
  .ls-home-seo__panel--3{
    transition-delay:2.60s;
  }

  body.ls-home-seo-page
  .ls-home-seo__visual-copy{
    width:calc(100% - 36px);
  }

  body.ls-home-seo-page
  .ls-home-seo__visual-copy h2{
    margin-bottom:18px;
    font-size:clamp(26px,8.2vw,38px);
    line-height:1.03;
  }

  body.ls-home-seo-page
  .ls-home-seo__visual-cta{
    min-height:42px;
    padding:11px 16px;
    font-size:10px;
  }

  body.ls-home-seo-page .ls-home-seo h2{
    font-size:25px;
    line-height:1.12;
  }

  body.ls-home-seo-page .ls-home-seo p{
    font-size:13.5px;
    line-height:1.66;
  }

  body.ls-home-seo-page .ls-home-seo__lead{
    font-size:14px;
  }

  body.ls-home-seo-page
  .ls-home-seo--visual
  .ls-home-seo__categories{
    margin-top:20px;
  }

  body.ls-home-seo-page
  .ls-home-seo__categories-track{
    width:max-content;
    min-width:max-content;
    animation-duration:42s;
  }

  body.ls-home-seo-page
  .ls-home-seo__categories-set{
    flex:0 0 auto;
    width:auto;
    min-width:auto;
    min-height:50px;
    padding:0 24px;
    justify-content:flex-start;
    gap:25px;
  }

  body.ls-home-seo-page
  .ls-home-seo--visual
  .ls-home-seo__journey{
    grid-template-columns:1fr;
    gap:7px;
  }

  body.ls-home-seo-page
  .ls-home-seo__journey.ls-hm-pending a:nth-child(odd){
    opacity:0;
    transform:translate3d(-34px,0,0);
  }

  body.ls-home-seo-page
  .ls-home-seo__journey.ls-hm-pending a:nth-child(even){
    opacity:0;
    transform:translate3d(34px,0,0);
  }
}


/* =========================================================
   11. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  body.ls-home-seo-page .ls-home-seo__visual-copy,
  body.ls-home-seo-page .ls-home-seo__panel,
  body.ls-home-seo-page .ls-home-seo__shade,
  body.ls-home-seo-page .ls-home-seo__categories,
  body.ls-home-seo-page .ls-home-seo__journey a{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  body.ls-home-seo-page .ls-home-seo__image{
    animation:none!important;
    transform:none!important;
  }

  body.ls-home-seo-page .ls-home-seo__categories-track{
    animation:none!important;
    transform:none!important;
  }

  body.ls-home-seo-page
  .ls-home-seo__categories-set--clone{
    display:none!important;
  }
}

/* END LETZSHOPPY HOME SEO V2 */