.mknik_wrap{
  --mknik-bg:#f8efe3;
  --mknik-ink:#2b1810;
  --mknik-rust:#b4531f;
  --mknik-rust-dark:#8f3f14;
  --mknik-amber:#e3a63c;
  --mknik-cream:#fff3e2;
  --mknik-mist:#7a5a48;
  --mknik-sk1:#3a2216;
  --mknik-sk2:#4d2f1e;
  --mknik-fall:720px;
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:1920px;
  margin:0 auto;
  background:var(--mknik-ink);
  color:var(--mknik-cream);
}

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

.mknik_visual{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  max-height:620px;
}

.mknik_track{
  position:relative;
  display:flex;
  gap:8px;
  height:100%;
  padding:14px 14px 14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:14px;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.mknik_track::-webkit-scrollbar{
  display:none;
}

.mknik_slide{
  position:relative;
  flex:0 0 88%;
  scroll-snap-align:start;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(110deg, var(--mknik-sk1) 30%, var(--mknik-sk2) 50%, var(--mknik-sk1) 70%);
}

.mknik_slide img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  opacity:0;
  transition:opacity .6s ease, transform .8s cubic-bezier(.22,.61,.36,1), filter .45s ease;
  will-change:opacity;
}

.mknik_slide.is-loaded img{
  opacity:1;
}

.mknik_dots{
  position:absolute;
  left:0;
  right:0;
  bottom:30px;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:7px;
  pointer-events:none;
}

.mknik_dot{
  position:relative;
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:99px;
  background:rgba(255,243,226,.7);
  box-shadow:0 0 0 1px rgba(43,24,16,.25);
  cursor:pointer;
  pointer-events:auto;
  transition:width .3s ease, background .3s ease;
}

.mknik_dot::after{
  content:'';
  position:absolute;
  inset:-10px -3px;
}

.mknik_dot.is-on{
  width:24px;
  background:var(--mknik-amber);
}

.mknik_copy{
  position:relative;
  z-index:3;
  padding:6px 20px 24px;
}

.mknik_eyebrow{
  margin:0 0 8px;
  padding:0;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mknik-amber);
}

.mknik_title{
  margin:0 0 10px;
  padding:0;
  font-size:34px;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--mknik-cream);
}

.mknik_title-em{
  display:block;
  font-style:italic;
  font-weight:600;
  color:var(--mknik-amber);
}

.mknik_desc{
  margin:0 0 18px;
  font-size:16px;
  line-height:1.5;
  color:rgba(255,243,226,.82);
}

.mknik_desc-pc{
  display:none;
}

.mknik_meta{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 14px;
  margin:0 0 20px;
}

.mknik_price{
  font-size:28px;
  font-weight:800;
  line-height:1.1;
  color:var(--mknik-cream);
}

.mknik_tag{
  padding:0;
  border:0;
  font-size:14px;
  line-height:1.3;
  color:rgba(255,243,226,.7);
}

.mknik_cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px;
  padding:0 22px;
  border-radius:14px;
  background:var(--mknik-rust);
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .3s ease;
}

.mknik_cta:hover,
.mknik_cta:active{
  background:var(--mknik-rust-dark);
  color:#fff;
}

.mknik_cta-arrow svg{
  display:block;
  width:18px;
  height:18px;
  stroke:#fff;
  stroke-width:1.6;
  fill:none;
  transition:transform .3s ease;
}

.mknik_cta:hover .mknik_cta-arrow svg{
  transform:translateX(5px);
}

.mknik_leaves{
  position:absolute;
  top:0;
  left:0;
  right:0;
  aspect-ratio:4/5;
  max-height:620px;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}

.mknik_leaf{
  position:absolute;
  top:0;
  left:0;
  width:var(--s,20px);
  height:var(--s,20px);
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0;
  will-change:transform, opacity;
  animation:mknik_fall var(--d,12s) linear var(--delay,0s) infinite;
}

.mknik_leaf--a{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b4531f' d='M12 1C6 5 3.5 11 7.5 16.5c1.2 1.6 3 2.6 4.500 5.500 1-2.900 2.800-3.900 4-5.500C20.500 11 18 5 12 1z'/%3E%3Cpath stroke='%23fff3e2' stroke-opacity='.45' stroke-width='.8' fill='none' d='M12 4v18'/%3E%3C/svg%3E");
}

.mknik_leaf--b{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e3a63c' d='M12 1C6 5 3.5 11 7.5 16.5c1.2 1.6 3 2.6 4.500 5.500 1-2.900 2.800-3.900 4-5.500C20.500 11 18 5 12 1z'/%3E%3Cpath stroke='%23fff3e2' stroke-opacity='.5' stroke-width='.8' fill='none' d='M12 4v18'/%3E%3C/svg%3E");
}

.mknik_leaf--c{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238a3a14' d='M12 1C6 5 3.5 11 7.5 16.5c1.2 1.6 3 2.6 4.500 5.500 1-2.900 2.800-3.900 4-5.500C20.500 11 18 5 12 1z'/%3E%3Cpath stroke='%23fff3e2' stroke-opacity='.4' stroke-width='.8' fill='none' d='M12 4v18'/%3E%3C/svg%3E");
}

.mknik_wrap.is-offscreen .mknik_leaf{
  animation-play-state:paused;
}

.mknik_wrap.is-loading .mknik_copy-inner,
.mknik_wrap.is-loading .mknik_dots{
  opacity:0;
}

.mknik_wrap.is-loading .mknik_visual{
  background:linear-gradient(110deg, var(--mknik-sk1) 30%, var(--mknik-sk2) 50%, var(--mknik-sk1) 70%);
  background-size:200% 100%;
  animation:mknik_shim 1.6s linear infinite;
}

.mknik_wrap.is-ready .mknik_copy-inner{
  animation:mknik_up .6s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes mknik_up{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes mknik_shim{
  from{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}

@keyframes mknik_fall{
  0%{
    transform:translate3d(0,-40px,0) rotate(0deg);
    opacity:0;
  }
  8%{
    opacity:.85;
  }
  50%{
    transform:translate3d(calc(var(--dx,60px) * -.6), calc(var(--mknik-fall) * .5), 0) rotate(calc(var(--rot,360deg) * .5));
  }
  92%{
    opacity:.85;
  }
  100%{
    transform:translate3d(var(--dx,60px), var(--mknik-fall), 0) rotate(var(--rot,360deg));
    opacity:0;
  }
}

@media (min-width:400px){
  .mknik_title{ font-size:38px; }
  .mknik_price{ font-size:30px; }
  .mknik_copy{ padding:8px 22px 26px; }
}

@media (min-width:480px){
  .mknik_title{ font-size:44px; }
  .mknik_desc{ font-size:18px; }
}

@media (min-width:768px){
  .mknik_wrap{
    --mknik-sk1:#eadbc6;
    --mknik-sk2:#f5e9d6;
    display:grid;
    grid-template-columns:minmax(300px,.9fr) minmax(320px,1.1fr);
    height:520px;
    background:var(--mknik-bg);
    color:var(--mknik-ink);
  }

  .mknik_visual{
    grid-column:2;
    grid-row:1;
    aspect-ratio:auto;
    max-height:none;
    height:100%;
    overflow:hidden;
  }

  .mknik_leaves{
    inset:0;
    aspect-ratio:auto;
    max-height:none;
  }

  .mknik_dots{
    display:none;
  }

  .mknik_track{
    gap:0;
    padding:0;
    overflow:hidden;
    scroll-snap-type:none;
  }

  .mknik_slide{
    flex:1 1 0;
    min-width:0;
    border-radius:0;
    scroll-snap-align:none;
    transition:flex-grow .7s cubic-bezier(.22,.61,.36,1);
  }

  .mknik_slide + .mknik_slide{
    border-left:1px solid rgba(255,243,226,.7);
  }

  .mknik_slide:first-child{
    flex-grow:1.5;
  }

  .mknik_copy{
    grid-column:1;
    grid-row:1;
    display:flex;
    align-items:center;
    padding:40px 44px;
    background:linear-gradient(160deg, #fbf3e8 0%, #f1e0c8 100%);
  }

  .mknik_copy::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg, var(--mknik-rust), var(--mknik-amber));
  }

  .mknik_copy-inner{
    width:100%;
    max-width:520px;
  }

  .mknik_eyebrow{
    margin-bottom:18px;
    padding:7px 12px;
    display:inline-block;
    border-radius:99px;
    background:var(--mknik-amber);
    color:var(--mknik-ink);
    font-size:12px;
  }

  .mknik_title{
    margin-bottom:18px;
    font-size:56px;
    color:var(--mknik-ink);
  }

  .mknik_title-em{
    color:var(--mknik-rust);
  }

  .mknik_desc{
    margin-bottom:24px;
    font-size:18px;
    color:var(--mknik-mist);
  }

  .mknik_desc-pc{ display:inline; }
  .mknik_desc-mob{ display:none; }

  .mknik_meta{
    align-items:center;
    gap:10px 16px;
    margin-bottom:28px;
  }

  .mknik_price{
    font-size:40px;
    color:var(--mknik-ink);
  }

  .mknik_tag{
    padding:6px 11px;
    border:1px solid var(--mknik-rust);
    border-radius:99px;
    color:var(--mknik-rust);
    font-size:14px;
  }

  .mknik_cta{
    display:inline-flex;
    gap:18px;
    min-height:52px;
    padding:0 26px;
    border-radius:10px;
    font-size:14px;
    letter-spacing:.14em;
  }

  .mknik_cta:hover{
    background:var(--mknik-ink);
  }
}

@media (min-width:768px) and (hover:hover){
  .mknik_track:hover .mknik_slide{ flex-grow:1; }
  .mknik_track:hover .mknik_slide:hover{ flex-grow:3; }
  .mknik_slide:hover img{ transform:scale(1.07); }
  .mknik_track:hover .mknik_slide:not(:hover) img{ filter:brightness(.8) saturate(.9); }
}

@media (min-width:1100px){
  .mknik_wrap{ height:580px; }
  .mknik_copy{ padding:48px 64px; }
  .mknik_title{ font-size:68px; }
  .mknik_desc{ font-size:20px; }
  .mknik_price{ font-size:46px; }
}

@media (min-width:1500px){
  .mknik_wrap{ height:660px; }
  .mknik_title{ font-size:84px; }
  .mknik_price{ font-size:52px; }
}

@media (prefers-reduced-motion:reduce){
  .mknik_leaves{ display:none; }

  .mknik_slide,
  .mknik_slide img,
  .mknik_cta,
  .mknik_cta-arrow svg,
  .mknik_dot,
  .mknik_wrap.is-ready .mknik_copy-inner,
  .mknik_wrap.is-loading .mknik_visual{
    transition:none !important;
    animation:none !important;
  }
}