/*
 * Lucaffè Home Product Stories 1.0.0
 * Editorial product carousel, no external libraries.
 */

:root{
  --lhps-ink:#0c0c0e;
  --lhps-cream:#f5efe4;
  --lhps-gold:#e6c56d;
  --lhps-shell:1440px;
}

.lhps-shell{
  width:min(var(--lhps-shell),calc(100% - 36px));
  margin:clamp(70px,8vw,130px) auto;
  color:var(--lhps-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.lhps-shell *,
.lhps-shell *::before,
.lhps-shell *::after{
  box-sizing:border-box;
}

.lhps-intro{
  padding:0 clamp(4px,2vw,28px) 38px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  align-items:end;
  gap:50px;
}

.lhps-eyebrow,
.lhps-kicker{
  margin:0!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.2em!important;
  text-transform:uppercase!important;
}

.lhps-eyebrow{
  color:#9b181e!important;
}

.lhps-intro h2{
  max-width:930px;
  margin:16px 0 0!important;
  color:#111!important;
  font-size:clamp(44px,6vw,90px)!important;
  line-height:.91!important;
  font-weight:950!important;
  letter-spacing:-.07em!important;
}

.lhps-intro>p{
  max-width:540px;
  margin:0 0 6px auto!important;
  color:#737078!important;
  font-size:14px!important;
  line-height:1.8!important;
}

.lhps-frame{
  position:relative;
  overflow:hidden;
  border-radius:36px;
  background:#101012;
  box-shadow:0 50px 120px rgba(13,10,8,.18);
  isolation:isolate;
}

.lhps-track{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  outline:none;
}

.lhps-track::-webkit-scrollbar{
  display:none;
}

.lhps-slide{
  --slide-bg-a:#351013;
  --slide-bg-b:#09090b;
  --slide-accent:#e4bd68;
  --slide-glow:rgba(183,28,35,.32);
  position:relative;
  flex:0 0 100%;
  min-width:100%;
  min-height:720px;
  padding:clamp(38px,5vw,76px);
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
  align-items:center;
  gap:clamp(44px,6vw,100px);
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  color:#fff;
  background:
    radial-gradient(circle at 14% 20%,var(--slide-glow),transparent 31%),
    radial-gradient(circle at 93% 8%,rgba(230,197,109,.15),transparent 26%),
    linear-gradient(142deg,var(--slide-bg-a),var(--slide-bg-b) 61%);
}

.lhps-slide.is-theme-amber{
  --slide-bg-a:#3a2815;
  --slide-bg-b:#0d0b09;
  --slide-accent:#f0d28a;
  --slide-glow:rgba(190,127,42,.28);
}

.lhps-slide.is-theme-cream{
  --slide-bg-a:#32291f;
  --slide-bg-b:#0d0c0a;
  --slide-accent:#f2deb0;
  --slide-glow:rgba(218,187,119,.24);
}

.lhps-slide.is-theme-plum{
  --slide-bg-a:#351325;
  --slide-bg-b:#0b080c;
  --slide-accent:#e7bdcb;
  --slide-glow:rgba(148,30,91,.31);
}

.lhps-slide.is-theme-terracotta{
  --slide-bg-a:#4a2115;
  --slide-bg-b:#0e0b09;
  --slide-accent:#efc187;
  --slide-glow:rgba(189,70,33,.3);
}

.lhps-slide.is-theme-charcoal{
  --slide-bg-a:#242428;
  --slide-bg-b:#070708;
  --slide-accent:#e4cf9a;
  --slide-glow:rgba(119,112,110,.25);
}

.lhps-slide.is-theme-midnight{
  --slide-bg-a:#101b33;
  --slide-bg-b:#07080d;
  --slide-accent:#c8d5ef;
  --slide-glow:rgba(47,82,155,.3);
}

.lhps-slide.is-theme-volcano{
  --slide-bg-a:#55120d;
  --slide-bg-b:#0c0807;
  --slide-accent:#ffcf72;
  --slide-glow:rgba(231,54,26,.38);
}

.lhps-slide.is-theme-sun{
  --slide-bg-a:#5a3a12;
  --slide-bg-b:#100c07;
  --slide-accent:#f5d175;
  --slide-glow:rgba(225,143,35,.34);
}

.lhps-slide.is-theme-cacao{
  --slide-bg-a:#3d211b;
  --slide-bg-b:#0d0908;
  --slide-accent:#e6bd91;
  --slide-glow:rgba(120,60,39,.38);
}

.lhps-backdrop{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.lhps-backdrop>strong{
  position:absolute;
  left:-.04em;
  bottom:-.18em;
  color:rgba(255,255,255,.035);
  font-size:clamp(110px,17vw,260px);
  line-height:.8;
  font-weight:950;
  letter-spacing:-.095em;
  white-space:nowrap;
}

.lhps-orbit{
  position:absolute;
  display:block;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
}

.lhps-orbit-a{
  width:520px;
  height:520px;
  top:-250px;
  right:-80px;
}

.lhps-orbit-b{
  width:780px;
  height:780px;
  right:-370px;
  bottom:-440px;
}

.lhps-copy,
.lhps-product-stage{
  position:relative;
  z-index:3;
  min-width:0;
}

.lhps-count{
  margin-bottom:38px;
  display:flex;
  align-items:center;
  gap:13px;
  color:rgba(255,255,255,.42);
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}

.lhps-count i{
  width:65px;
  height:1px;
  background:linear-gradient(90deg,var(--slide-accent),rgba(255,255,255,.08));
}

.lhps-kicker{
  color:var(--slide-accent)!important;
}

.lhps-copy h3{
  max-width:810px;
  margin:19px 0 0!important;
  color:#fff!important;
  font-size:clamp(48px,5.6vw,88px)!important;
  line-height:.9!important;
  font-weight:950!important;
  letter-spacing:-.071em!important;
}

.lhps-description{
  max-width:720px;
  margin:31px 0 0!important;
  color:rgba(255,255,255,.65)!important;
  font-size:clamp(14px,1.15vw,17px)!important;
  line-height:1.82!important;
}

.lhps-specs{
  max-width:690px;
  margin-top:38px;
  padding-top:27px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(160px,.65fr);
  gap:38px;
  border-top:1px solid rgba(255,255,255,.11);
}

.lhps-specs span{
  display:block;
  color:rgba(255,255,255,.35);
  font-size:7px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.lhps-specs ul{
  margin:13px 0 0!important;
  padding:0!important;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none!important;
}

.lhps-specs li{
  margin:0!important;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.045);
  font-size:9px;
  font-weight:750;
}

.lhps-specs strong{
  margin-top:12px;
  display:block;
  color:#fff;
  font-size:20px;
  letter-spacing:-.025em;
}

.lhps-actions{
  margin-top:35px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}

.lhps-primary{
  min-height:52px;
  padding:0 27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#111!important;
  background:linear-gradient(180deg,#f4dfa6,var(--slide-accent));
  box-shadow:0 18px 45px rgba(0,0,0,.2);
  text-decoration:none!important;
  font-size:9px;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .25s ease,box-shadow .25s ease;
}

.lhps-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 55px rgba(0,0,0,.28);
}

.lhps-link{
  color:#fff!important;
  text-decoration:none!important;
  font-size:10px;
  font-weight:850;
}

.lhps-product-stage{
  min-height:590px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lhps-product-halo{
  position:absolute;
  width:min(36vw,520px);
  height:min(36vw,520px);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.13),rgba(255,255,255,.025) 53%,transparent 72%);
  filter:blur(.2px);
}

.lhps-product-image-link{
  position:relative;
  z-index:3;
  width:min(75%,520px);
  height:470px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none!important;
}

.lhps-product-image{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 42px 35px rgba(0,0,0,.35));
  transform:translateZ(0) rotate(-2deg);
  transition:transform .65s cubic-bezier(.2,.75,.2,1);
}

.lhps-slide:hover .lhps-product-image{
  transform:translateY(-8px) rotate(1deg) scale(1.02);
}

.lhps-product-meta{
  position:absolute;
  right:0;
  bottom:0;
  width:min(330px,78%);
  padding:21px 23px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:21px;
  background:rgba(12,12,14,.65);
  box-shadow:0 22px 70px rgba(0,0,0,.25);
  backdrop-filter:blur(18px);
}

.lhps-product-meta>p{
  margin:0!important;
  color:var(--slide-accent)!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}

.lhps-product-meta h4{
  margin:9px 0 0!important;
  color:#fff!important;
  font-size:18px!important;
  line-height:1.13!important;
  letter-spacing:-.025em!important;
}

.lhps-price{
  margin-top:13px;
  color:#fff;
  font-size:20px;
  font-weight:950;
}

.lhps-price del{
  margin-right:6px;
  color:rgba(255,255,255,.35);
  font-size:11px;
}

.lhps-price ins{
  color:var(--slide-accent);
  text-decoration:none;
}

.lhps-stock{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.55);
  font-size:8px;
  font-weight:750;
}

.lhps-stock i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7d7d7d;
  box-shadow:0 0 0 5px rgba(125,125,125,.08);
}

.lhps-stock.is-in-stock i{
  background:#58b777;
  box-shadow:0 0 0 5px rgba(88,183,119,.1);
}

.lhps-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:8;
  min-height:72px;
  padding:0 25px;
  display:grid;
  grid-template-columns:minmax(100px,1fr) auto auto;
  align-items:center;
  gap:25px;
  border-top:1px solid rgba(255,255,255,.09);
  background:rgba(8,8,9,.77);
  backdrop-filter:blur(16px);
}

.lhps-progress{
  height:2px;
  overflow:hidden;
  background:rgba(255,255,255,.12);
}

.lhps-progress span{
  width:0;
  height:100%;
  display:block;
  background:linear-gradient(90deg,#9b181e,#f1d184);
  transition:width .15s linear;
}

.lhps-dots{
  display:flex;
  align-items:center;
  gap:6px;
}

.lhps-dots button{
  width:22px;
  height:22px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  color:inherit;
  background:transparent;
  cursor:pointer;
}

.lhps-dots button span{
  width:5px;
  height:5px;
  display:block;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  transition:transform .25s ease,background .25s ease;
}

.lhps-dots button.is-active span{
  background:#f1d184;
  transform:scale(1.6);
}

.lhps-buttons{
  display:flex;
  gap:7px;
}

.lhps-buttons button{
  width:38px;
  height:38px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.045);
  cursor:pointer;
  font-size:12px;
  font-weight:900;
}

.lhps-buttons button:hover,
.lhps-buttons button:focus-visible{
  border-color:rgba(241,209,132,.7);
  outline:none;
}

@media(max-width:1050px){
  .lhps-slide{
    grid-template-columns:minmax(0,1fr) minmax(350px,.8fr);
    min-height:700px;
    gap:35px;
  }

  .lhps-product-stage{
    min-height:520px;
  }

  .lhps-product-image-link{
    height:410px;
  }
}

@media(max-width:820px){
  .lhps-shell{
    width:calc(100% - 20px);
  }

  .lhps-intro{
    grid-template-columns:1fr;
    gap:20px;
    padding-bottom:28px;
  }

  .lhps-intro>p{
    margin-left:0!important;
  }

  .lhps-frame{
    border-radius:28px;
  }

  .lhps-slide{
    min-height:auto;
    padding:56px 25px 112px;
    grid-template-columns:1fr;
    gap:30px;
  }

  .lhps-copy h3{
    font-size:clamp(46px,11vw,70px)!important;
  }

  .lhps-product-stage{
    min-height:450px;
    order:-1;
  }

  .lhps-product-image-link{
    width:min(75%,430px);
    height:355px;
  }

  .lhps-product-halo{
    width:390px;
    height:390px;
  }

  .lhps-product-meta{
    width:min(330px,82%);
  }

  .lhps-controls{
    min-height:74px;
    grid-template-columns:1fr auto;
  }

  .lhps-progress{
    grid-column:1 / -1;
    align-self:end;
  }

  .lhps-dots{
    overflow:hidden;
  }
}

@media(max-width:560px){
  .lhps-shell{
    margin:65px auto;
  }

  .lhps-intro h2{
    font-size:clamp(41px,12vw,58px)!important;
  }

  .lhps-slide{
    padding:45px 18px 118px;
  }

  .lhps-product-stage{
    min-height:360px;
  }

  .lhps-product-image-link{
    height:290px;
  }

  .lhps-product-meta{
    right:0;
    bottom:-5px;
    width:82%;
    padding:17px;
  }

  .lhps-copy h3{
    font-size:clamp(43px,13vw,62px)!important;
  }

  .lhps-description{
    font-size:14px!important;
  }

  .lhps-specs{
    grid-template-columns:1fr;
    gap:21px;
  }

  .lhps-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .lhps-primary{
    width:100%;
  }

  .lhps-controls{
    padding:0 12px;
    gap:10px;
  }

  .lhps-dots{
    gap:1px;
  }

  .lhps-dots button{
    width:18px;
  }

  .lhps-buttons button{
    width:34px;
    height:34px;
  }
}

@media(prefers-reduced-motion:reduce){
  .lhps-track{
    scroll-behavior:auto!important;
  }

  .lhps-product-image,
  .lhps-primary,
  .lhps-dots button span{
    transition:none!important;
  }
}