/* JASCO Japan coupon + free-shipping sticky promotion */
:root { --jasco-red:#e1272d; --jasco-red-dark:#c71f25; --jasco-ink:#151922; }

@keyframes jasco-pulse {
  0%,100% { transform:scale(1); box-shadow:0 10px 28px rgba(225,39,45,.22); }
  50% { transform:scale(1.025); box-shadow:0 12px 34px rgba(225,39,45,.34); }
}

.jasco-sticky {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:10000;
  transform:translateY(110%);
  transition:transform .65s cubic-bezier(.22,.7,.2,1);
  font-family:inherit;
}
.jasco-sticky.is-visible { transform:translateY(0); }
.jasco-sticky-shell {
  position:relative;
  background:rgba(255,255,255,.985);
  border-top:1px solid #eceef2;
  box-shadow:0 -16px 44px rgba(19,28,45,.14);
  backdrop-filter:blur(14px);
}
.jasco-sticky-toggle {
  position:absolute; top:-25px; left:50%; transform:translateX(-50%);
  width:64px; height:26px; border:1px solid #eceef2; border-bottom:0;
  border-radius:16px 16px 0 0; background:#fff; color:var(--jasco-red);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 -6px 16px rgba(19,28,45,.06);
}
.jasco-sticky-toggle svg { width:15px; height:15px; transition:transform .4s ease; }
.jasco-sticky.is-collapsed .jasco-sticky-toggle svg { transform:rotate(180deg); }
.jasco-sticky-close {
  position:absolute; top:10px; right:16px; z-index:3; border:0; background:transparent;
  color:#a5a9b1; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:50%;
}
.jasco-sticky-close:hover { background:#f5f6f7; color:#444; }
.jasco-sticky-content {
  max-width:1240px; margin:0 auto; padding:31px 56px;
  display:grid; grid-template-columns:180px minmax(430px,540px) 255px;
  column-gap:30px; align-items:center; justify-content:center;
  max-height:290px; overflow:hidden;
  transition:max-height .45s ease, padding .45s ease, opacity .3s ease;
}
.jasco-sticky.is-collapsed .jasco-sticky-content {
  max-height:0; padding-top:0; padding-bottom:0; opacity:0;
}
.jasco-sticky-visual {
  width:180px; height:154px; border-radius:12px; overflow:hidden; flex:none;
  background:#eef6fd; box-shadow:0 7px 22px rgba(19,28,45,.12);
}
.jasco-sticky-visual img { width:100%; height:100%; object-fit:cover; object-position:center 62%; display:block; }
.jasco-sticky-copy { min-width:0; }
.jasco-sticky-badge {
  display:inline-flex; align-items:center; gap:6px; margin-bottom:6px;
  padding:5px 10px; border-radius:999px; background:#fff2f2; border:1px solid #ffd6d8;
  color:var(--jasco-red); font-size:12px; line-height:1; font-weight:800;
}
.jasco-sticky-title {
  margin:0; color:var(--jasco-ink); font-size:clamp(20px,2vw,28px); line-height:1.25; font-weight:900; letter-spacing:-.045em;
}
.jasco-sticky-title strong { color:var(--jasco-red); font-weight:900; }
.jasco-sticky-sub { margin:5px 0 0; color:#6f7681; font-size:14px; font-weight:600; }
.jasco-sticky-cta {
  min-width:255px; min-height:64px; padding:0 28px; border-radius:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--jasco-red); color:#fff !important; text-decoration:none !important;
  font-size:17px; font-weight:900; letter-spacing:-.02em;
  animation:jasco-pulse 2.2s infinite;
}
.jasco-sticky-cta:hover { background:var(--jasco-red-dark); }
.jasco-sticky-cta svg { width:18px; height:18px; }

/* The old mobile-only CTA is superseded by this promotion. */
.sticky-cta { display:none !important; }

/* Mobile: vertical composition matching the supplied reference. */
@media (max-width:820px) {
  .jasco-sticky-shell { padding-top:0; }
  .jasco-sticky-content {
    width:100%; max-width:430px;
    margin:0 auto;
    padding:17px 14px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    max-height:560px;
    text-align:center;
  }
  .jasco-sticky-visual {
    width:120px; height:120px;
    margin:0 auto 11px;
    border-radius:0;
    box-shadow:none;
    background:transparent;
  }
  .jasco-sticky-visual img {
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 62%;
    border-radius:0;
  }
  .jasco-sticky-copy {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .jasco-sticky-badge {
    margin:0 0 7px;
    padding:5px 10px;
    font-size:11px;
  }
  .jasco-sticky-title {
    width:100%;
    margin:0;
    font-size:21px;
    line-height:1.28;
    letter-spacing:-.04em;
  }
  .jasco-sticky-sub {
    display:block;
    margin:5px 0 14px;
    font-size:12px;
    line-height:1.45;
    color:#717783;
  }
  .jasco-sticky-cta {
    width:100%;
    min-width:0;
    min-height:49px;
    padding:0 16px;
    border-radius:12px;
    font-size:16px;
    animation:none;
  }
  .jasco-sticky-close { right:8px; top:7px; }
  .jasco-sticky-toggle { top:-25px; }
}

@media (max-width:480px) {
  .jasco-sticky-content {
    max-width:none;
    padding:16px 12px 17px;
  }
  .jasco-sticky-visual { width:112px; height:112px; margin-bottom:10px; }
  .jasco-sticky-title { font-size:20px; }
  .jasco-sticky-sub { margin-bottom:13px; font-size:11.5px; }
  .jasco-sticky-cta { min-height:49px; font-size:16px; }
}
