{"title":"BT21","description":null,"products":[{"product_id":"ttracing-ora-sofa-chair","title":"TTRacing ORA Sofa Chair Draft","description":"\u003cstyle\u003e\n\/* ── BT21 PDP ── *\/\n.bt21-pdp, .bt21-pdp * { box-sizing: border-box; }\n\n\/* ── Section 1: Pick Your Character ── *\/\n.bt21-pyc {\n  background: #ffefe7;\n  padding: 22px 0;\n  overflow: hidden;\n}\n\n\/* Corner rows — in-flow, space-between *\/\n.bt21-pyc-corners {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 0;\n}\n\n\n\/* Character grid *\/\n.bt21-char-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 14px;\n  padding: 0 60px;\n}\n\n\/* Character card *\/\n.bt21-char-card {\n  overflow: hidden;\n  aspect-ratio: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.bt21-char-card-name {\n  position: absolute;\n  top: 14px;\n  left: 0;\n  right: 0;\n  text-align: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 11px;\n  letter-spacing: 2.5px;\n  color: rgba(255,255,255,0.85);\n  text-transform: uppercase;\n}\n.bt21-char-card-img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n\n\n\/* Pick Your Character row *\/\n.bt21-pick-row {\n  padding: 30px 60px;\n  text-align: center;\n}\n.bt21-pick-row img {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n.bt21-pick-row__img--mobile { display: none !important; }\n\n\/* ── Section 2: Brand logos + hero image ── *\/\n.bt21-s2 {\n  background: #fff;\n  padding-top: 85px;\n}\n.bt21-s2-logos {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-bottom: 32px;\n}\n.bt21-s2-logos img {\n  width: auto;\n  object-fit: contain;\n}\n.bt21-s2-logos img:first-child { height: 60px; }\n.bt21-s2-logos img:last-child  { height: 40px; }\n.bt21-s2-logo-ph {\n  background: rgba(0,0,0,0.07);\n  border-radius: 6px;\n  padding: 10px 20px;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 12px;\n  color: rgba(0,0,0,0.35);\n}\n.bt21-s2-hero {\n  width: 100%;\n  aspect-ratio: 1919 \/ 1088;\n  line-height: 0;\n  position: relative;\n}\n.bt21-s2-hero img {\n  width: 100%;\n  display: block;\n}\n.bt21-s2-hero__bg--mobile { display: none !important; }\n.bt21-s2-hero__word--mobile { display: none !important; }\n.bt21-s2-hero__word {\n  position: absolute;\n  top: 11%;\n  left: 14%;\n  width: 32% !important;\n}\n@media (max-width: 768px) {\n  .bt21-s2-hero { aspect-ratio: unset; }\n  .bt21-s2-hero__bg--desktop { display: none !important; }\n  .bt21-s2-hero__bg--mobile { display: block !important; }\n  .bt21-s2-hero__word--desktop { display: none !important; }\n  .bt21-s2-hero__word--mobile { display: block !important; top: 12% !important; width: 45% !important; left: 3% !important; }\n}\n.bt21-s2-hero-ph {\n  width: 100%;\n  aspect-ratio: 16 \/ 7;\n  background: rgba(0,0,0,0.07);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 13px;\n  color: rgba(0,0,0,0.3);\n}\n\n\/* ── Section 3: Character Carousel ── *\/\n.bt21-s3 {\n  background: #fff;\n  padding-top: 60px;\n  padding-bottom: 40px;\n}\n.bt21-s3-desc {\n  font-family: 'Fredoka', sans-serif !important;\n  font-size: 15px !important;\n  color: #9e5f50;\n  line-height: 1.65;\n  margin: 0 0 80px !important;\n  text-align: left !important;\n}\n\n\/* Track — scrollable, starts at page-width left *\/\n.bt21-s3-track {\n  display: flex;\n  gap: 20px;\n  overflow-x: scroll;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  padding-right: 40px;\n  padding-bottom: 4px;\n  cursor: grab;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.bt21-s3-track::-webkit-scrollbar { display: none; }\n.bt21-s3-track--drag { cursor: grabbing; }\n\n\/* Card *\/\n.bt21-s3-card {\n  flex: 0 0 480px;\n  min-width: 0;\n}\n.bt21-s3-card-img img { transition: transform 0.35s ease; }\n.bt21-s3-card:hover .bt21-s3-card-img img { transform: scale(1.05); }\n.bt21-s3-card-img {\n  width: 100%;\n  aspect-ratio: 1 \/ 1;\n  border-radius: 14px;\n  overflow: hidden;\n  background: #efefef;\n  margin-bottom: 14px;\n}\n.bt21-s3-card-img img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.bt21-s3-card-img-ph {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 13px;\n  color: rgba(0,0,0,0.25);\n}\n.bt21-s3-card-name {\n  font-family: 'Fredoka-SemiBold', sans-serif;\n  font-size: 16px;\n  font-weight: bold;\n  line-height: 1;\n  color: #9e5f50;\n  display: block;\n  padding-left: 20px;\n  margin-bottom: 3px;\n}\n.bt21-s3-card-tagline {\n  font-family: 'Fredoka', sans-serif;\n  font-size: 15px;\n  color: #9e5f50;\n  display: block;\n  padding-left: 20px;\n}\n\n\/* Controls *\/\n.bt21-s3-controls {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding-top: 20px;\n}\n.bt21-s3-btn {\n  width: 35px;\n  height: 35px;\n  border: none;\n  border-radius: 50%;\n  background: #ac6e59;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: opacity 0.2s;\n}\n.bt21-s3-btn:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n.bt21-s3-btn--prev svg { transform: rotate(180deg); }\n\n\/* Responsive *\/\n@media (min-width: 769px) {\n  .bt21-s3 .page-width { padding-left: 160px; }\n  .bt21-s3-track { padding-left: 160px; }\n}\n@media (min-width: 1280px) {\n  .bt21-s3 .page-width { padding-left: 220px; }\n}\n@media (max-width: 768px) {\n  .bt21-s3 { padding-top: 40px; }\n  .bt21-s3 .page-width { padding-left: 17px; padding-right: 17px; }\n  .bt21-s3-card { flex: 0 0 220px; }\n  .bt21-s3-desc { font-size: 14px !important; max-width: none; }\n  .bt21-s3-card-name { font-size: 15px; }\n  .bt21-s3-card-tagline { font-size: 14px; }\n}\n\n\/* ── Section 4: Little Moments Wall ── *\/\n.bt21w {\n  background: #c2e8ff;\n  position: relative;\n  padding: 120px 0 60px;\n  margin-top: 60px;\n}\n\/* Scalloped top edge *\/\n.bt21w::before {\n  content: '';\n  position: absolute;\n  top: -60px;\n  left: 0;\n  width: 100%;\n  height: 61px;\n  background-color: #fff;\n  background-image: url(\"data:image\/svg+xml,\u003csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='60' viewBox='0 0 100 60'\u003e\u003cpath d='M0,60 Q50,0 100,60 Z' fill='%23c2e8ff'\/\u003e\u003c\/svg\u003e\");\n  background-repeat: repeat-x;\n  background-position: bottom;\n}\n\n.bt21w__inner {\n  display: flex;\n  align-items: center;\n  gap: 40px;\n}\n\n\/* Left: image *\/\n.bt21w__left {\n  flex: 0 0 38%;\n  max-width: 38%;\n}\n.bt21w__left-img {\n  width: 100%;\n  display: block;\n  border-radius: 16px;\n}\n.bt21w__left-ph {\n  width: 100%;\n  aspect-ratio: 4 \/ 3;\n  background: rgba(255,255,255,0.3);\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 13px;\n  color: rgba(0,0,0,0.3);\n}\n\n\/* Right: strip *\/\n.bt21w__right {\n  flex: none;\n  width: calc(17vw * 2 + 20px);\n  margin-left: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  overflow: hidden;\n}\n.bt21w__strip {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  align-items: stretch;\n  transition: transform 1.7s cubic-bezier(.16, 1, .3, 1);\n}\n.bt21w__item {\n  flex: 0 0 17vw;\n  min-width: 0;\n}\n.bt21w__card {\n  position: relative;\n  border-radius: 14px;\n  overflow: hidden;\n  aspect-ratio: 9 \/ 16;\n  background: #ddefff;\n  border: 2px solid #fff;\n  max-height: 460px;\n}\n.bt21w__card img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.bt21w__card-ph {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 12px;\n  color: rgba(0,0,0,0.3);\n}\n\n.bt21w__card { cursor: pointer; }\n.bt21w__poster { transition: transform 0.3s cubic-bezier(.16, 1, .3, 1), opacity 0.4s ease; }\n.bt21w__card:hover .bt21w__poster { transform: scale(1.03); }\n.bt21w__play-btn {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 56px;\n  height: 56px;\n  margin: -28px 0 0 -28px;\n  padding: 0 0 0 4px;\n  border: none;\n  border-radius: 50%;\n  background: #ffffffd9;\n  color: #40a0e4;\n  font-size: 16px;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity 0.4s ease;\n}\n.bt21w__card:hover .bt21w__play-btn { transform: scale(1.03); }\n.bt21w__inline-video {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: none;\n}\n.bt21w__inline-video::-webkit-media-controls,\n.bt21w__inline-video::-webkit-media-controls-start-playback-button,\n.bt21w__inline-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }\n@keyframes bt21w-fadein { from { opacity: 0; } to { opacity: 1; } }\n.bt21w__item--playing .bt21w__inline-video { display: block; animation: bt21w-fadein 0.4s ease forwards; }\n.bt21w__item--playing .bt21w__poster { opacity: 0; }\n.bt21w__item--playing .bt21w__play-btn { opacity: 0; pointer-events: none; }\n\n\/* Video popup *\/\n.bt21w__modal {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.65);\n  z-index: 999999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  opacity: 0;\n  transition: opacity .25s ease;\n}\n.bt21w__modal[hidden] { display: none; }\n.bt21w__modal.is-open { opacity: 1; }\n.bt21w__modal-card {\n  position: relative;\n  width: 100%;\n  max-width: 360px;\n  background: #111;\n  border-radius: 16px;\n  overflow: hidden;\n}\n.bt21w__modal-nav {\n  position: absolute;\n  top: 12px;\n  left: 12px;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.bt21w__modal-paddle {\n  width: 35px;\n  height: 35px;\n  background: #00000080;\n  border: none;\n  border-radius: 50%;\n  color: #fff;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  transition: background 0.2s;\n}\n.bt21w__modal-paddle--prev svg { transform: rotate(180deg); }\n.bt21w__modal-paddle:hover:not(:disabled) { background: rgba(0,0,0,0.6); }\n.bt21w__modal-paddle:disabled { opacity: 0.4; cursor: default; }\n.bt21w__modal-counter { font-family: 'Fredoka', sans-serif; font-size: 12px; font-weight: 500; color: #fff; }\n.bt21w__modal-close {\n  position: absolute;\n  top: 15px;\n  right: 15px;\n  z-index: 2;\n  width: 36px;\n  height: 36px;\n  background: #00000080;\n  border: none;\n  border-radius: 50%;\n  color: #fff;\n  font-size: 16px;\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  padding: 0;\n}\n.bt21w__modal-video {\n  width: 100%;\n  height: auto;\n  min-height: 85vh;\n  display: block;\n}\n@media (max-width: 1000px) {\n  .bt21w__modal-video { min-height: 80vh; }\n}\n@supports (-webkit-touch-callout: none) {\n  @media (max-width: 1000px) {\n    .bt21w__modal-nav,\n    .bt21w__modal-close { top: 25px; }\n  }\n}\n\n\/* Nav *\/\n.bt21w__nav {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n.bt21w__paddle {\n  width: 35px;\n  height: 35px;\n  background: #40a0e4;\n  border: none;\n  border-radius: 50%;\n  color: #fff;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  transition: background 0.2s;\n}\n.bt21w__paddle--prev svg { transform: rotate(180deg); }\n.bt21w__paddle:hover:not(:disabled) { background: #2288cc; }\n.bt21w__paddle:disabled { opacity: 0.4; cursor: default; }\n\n\/* Large screens: fixed card size *\/\n@media (min-width: 1540px) {\n  .bt21w__item { flex: 0 0 259px; }\n  .bt21w__right { width: calc(259px * 2 + 20px); }\n}\n\n\/* Mobile *\/\n@media (max-width: 1000px) {\n  .bt21w { padding: 40px 0; }\n  .bt21w__inner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 0; margin: 0;}\n  .bt21w__left-img{max-width: 380px;}\n  .bt21w__left { flex: none; max-width: none; width: 80%; padding: 0 17px; box-sizing: border-box; }\n  .bt21w__right { flex: none; width: 100%; margin-left: 0; gap: 0; overflow: visible; }\n  .bt21w__strip {\n    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 17px;\n    -webkit-overflow-scrolling: touch; padding-bottom: 12px; padding-right: 20px;\n    width: 100%; transition: none; transform: none !important;\n    scrollbar-width: none; -ms-overflow-style: none;\n  }\n  .bt21w__strip::-webkit-scrollbar { display: none; }\n  .bt21w__item { flex: 0 0 min(220px, 55vw); scroll-snap-align: start; }\n  .bt21w__item:first-child { margin-left: 17px; }\n  .bt21w__nav { padding-right: 17px; padding-top: 8px; }\n}\n\n\/* ── Section 5: Little Extras ── *\/\n.bt21-s5 {\n  background: #f9d6e9;\n  position: relative;\n  padding: 60px 0;\n  margin-top: 60px;\n}\n.bt21-s5::before {\n  content: '';\n  position: absolute;\n  top: -60px;\n  left: 0;\n  width: 100%;\n  height: 61px;\n  background-color: #c2e8ff;\n  background-image: url(\"data:image\/svg+xml,\u003csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='60' viewBox='0 0 100 60'\u003e\u003cpath d='M0,60 Q50,0 100,60 Z' fill='%23f9d6e9'\/\u003e\u003c\/svg\u003e\");\n  background-repeat: repeat-x;\n  background-position: bottom;\n}\n.bt21-s5__inner {\n  display: flex;\n  gap: 24px;\n  align-items: center;\n  justify-content: space-between;\n}\n.bt21-s5__left {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.bt21-s5__left .bt21-s5__img {\n  max-width: 450px;\n  width: 100%;\n  display: block;\n  margin: 0 auto;\n  margin-bottom: 5px;\n}\n.bt21-s5__right {\n  max-width: 55%;\n  min-width: 0;\n  overflow: hidden;\n}\n.bt21-s5__img {\n  width: 100%;\n  display: block;\n}\n.bt21-s5__text {\n}\n.bt21-s5__desc {\n  font-family: 'Fredoka', sans-serif !important;\n  font-size: 15px !important;\n  color: #fb7797;\n  line-height: 1.65;\n  margin: 0;\n  font-weight: 400 !important;\n}\n.bt21-s5__img-ph {\n  width: 100%;\n  aspect-ratio: 4 \/ 3;\n  background: rgba(255,255,255,0.35);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 13px;\n  color: rgba(0,0,0,0.3);\n}\n@media (max-width: 768px) {\n  .bt21-s5 { padding: 40px 0; margin-top: 40px; }\n  .bt21-s5__inner { flex-direction: column; gap: 16px; }\n  .bt21-s5__right { max-width: unset; }\n}\n@media (min-width: 769px) and (max-width: 921px) {\n  .bt21-s5__desc br { display: none; }\n}\n\n\/* ── Section 6: Your Comforts ── *\/\n.bt21-s6 {\n  background: #9ECBF2;\n  position: relative;\n  padding: 60px 0;\n  margin-top: 60px;\n}\n.bt21-s6::before {\n  content: '';\n  position: absolute;\n  top: -60px;\n  left: 0;\n  width: 100%;\n  height: 61px;\n  background-color: #f9d6e9;\n  background-image: url(\"data:image\/svg+xml,\u003csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='60' viewBox='0 0 100 60'\u003e\u003cpath d='M0,60 Q50,0 100,60 Z' fill='%239ECBF2'\/\u003e\u003c\/svg\u003e\");\n  background-repeat: repeat-x;\n  background-position: bottom;\n}\n.bt21-s6__inner {\n  display: flex;\n  gap: 32px;\n  align-items: center;\n  justify-content: space-between;\n}\n.bt21-s6__left {\n  flex: 0 0 55%;\n  max-width: 55%;\n}\n.bt21-s6__video {\n  transform: scale(1.12);\n  width: 100%;\n  display: block;\n}\n.bt21-s6__video-ph {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  background: rgba(255,255,255,0.2);\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 13px;\n  color: rgba(0,0,0,0.3);\n}\n.bt21-s6__right {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.bt21-s6__img-ph {\n  width: 100%;\n  aspect-ratio: 4 \/ 3;\n  background: rgba(255,255,255,0.2);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 13px;\n  color: rgba(0,0,0,0.3);\n  margin-bottom: 20px;\n}\n.bt21-s6__img {\n  max-width: 450px;\n  width: 100%;\n  display: block;\n  border-radius: 12px;\n  margin: 0 auto;\n  margin-bottom: 5px;\n}\n.bt21-s6__heading {\n  font-family: 'Fredoka', sans-serif;\n  font-size: clamp(1.8rem, 2.4vw, 2.8rem);\n  color: #fff;\n  font-weight: 400;\n  line-height: 1.1;\n  letter-spacing: 1px;\n  margin: 0 0 14px;\n}\n.bt21-s6__desc {\n  font-family: 'Fredoka', sans-serif !important;\n  font-size: 15px !important;\n  color: rgba(255,255,255,0.9);\n  line-height: 1.65;\n  margin: 0;\n  font-weight: 400 !important;\n}\n@media (max-width: 768px) {\n  .bt21-s6 { padding: 70px 0 40px; margin-top: 40px; }\n  .bt21-s6__inner { flex-direction: column; gap: 20px; }\n  .bt21-s6__left { flex: none; max-width: none; width: 100%; order: 2;}\n}\n\n\/* ── Section 7: Turn, Rock, Settle ── *\/\n.bt21-s7 {\n  background: #F7E5B1;\n  position: relative;\n  padding: 60px 0;\n  margin-top: 60px;\n}\n.bt21-s7::before {\n  content: '';\n  position: absolute;\n  top: -60px;\n  left: 0;\n  width: 100%;\n  height: 61px;\n  background-color: #9ECBF2;\n  background-image: url(\"data:image\/svg+xml,\u003csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='60' viewBox='0 0 100 60'\u003e\u003cpath d='M0,60 Q50,0 100,60 Z' fill='%23F7E5B1'\/\u003e\u003c\/svg\u003e\");\n  background-repeat: repeat-x;\n  background-position: bottom;\n}\n.bt21-s7__inner {\n  display: flex;\n  gap: 32px;\n  align-items: center;\n  justify-content: space-between;\n}\n.bt21-s7__left {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.bt21-s7__right {\n  flex: 0 0 55%;\n  max-width: 55%;\n  position: relative;\n  overflow: hidden;\n}\n.bt21-s7__video {\n  width: 100%;\n  display: block;\n}\n.bt21-video-overlay {\n  position: absolute;\n  top: 0; left: 0;\n  width: 100%; height: 100%;\n  object-fit: cover;\n  pointer-events: none;\n  transition: opacity 0.25s ease;\n}\n.bt21-s6__video,\n.bt21-s7__video,\n.bt21-s8__video,\n.bt21-video-overlay {\n  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),\n    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);\n  -webkit-mask-composite: source-in;\n  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),\n    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);\n  mask-composite: intersect;\n}\n.bt21-s7__video-ph {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  background: rgba(255,255,255,0.35);\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 13px;\n  color: rgba(0,0,0,0.25);\n}\n.bt21-s7__img-ph {\n  width: 100%;\n  aspect-ratio: 4 \/ 3;\n  background: rgba(255,255,255,0.35);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 13px;\n  color: rgba(0,0,0,0.25);\n  margin-bottom: 20px;\n}\n.bt21-s7__img {\n  max-width: 450px;\n  width: 100%;\n  display: block;\n  border-radius: 12px;\n  margin: 0 auto;\n  margin-bottom: 5px;\n}\n.bt21-s7__heading {\n  font-family: 'Fredoka', sans-serif;\n  font-size: clamp(1.8rem, 2.4vw, 2.8rem);\n  color: #5a8fc4;\n  font-weight: 400;\n  line-height: 1.1;\n  letter-spacing: 1px;\n  margin: 0 0 14px;\n}\n.bt21-s7__desc {\n  font-family: 'Fredoka', sans-serif !important;\n  font-size: 15px !important;\n  color: #628ab1;\n  line-height: 1.65;\n  margin: 0;\n  font-weight: 400 !important;\n}\n@media (max-width: 768px) {\n  .bt21-s7 { padding: 70px 0 40px; margin-top: 40px; }\n  .bt21-s7__inner { flex-direction: column; gap: 20px; }\n  .bt21-s7__right { flex: none; max-width: none; width: 100%; }\n}\n\n\/* ── Section 8: One Press to Nap ── *\/\n.bt21-s8 {\n  background: #F4E3D8;\n  position: relative;\n  padding: 60px 0;\n  margin-top: 60px;\n}\n.bt21-s8::before {\n  content: '';\n  position: absolute;\n  top: -60px;\n  left: 0;\n  width: 100%;\n  height: 61px;\n  background-color: #f7e5b1;\n  background-image: url(\"data:image\/svg+xml,\u003csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='60' viewBox='0 0 100 60'\u003e\u003cpath d='M0,60 Q50,0 100,60 Z' fill='%23F4E3D8'\/\u003e\u003c\/svg\u003e\");\n  background-repeat: repeat-x;\n  background-position: bottom;\n}\n.bt21-s8__inner {\n  display: flex;\n  gap: 32px;\n  align-items: center;\n  justify-content: space-between;\n}\n.bt21-s8__left {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.bt21-s8__right {\n  flex: 0 0 55%;\n  max-width: 55%;\n  position: relative;\n  overflow: hidden;\n}\n.bt21-s8__video {\n  width: 100%;\n  display: block;\n}\n.bt21-s8__img-ph {\n  width: 100%;\n  aspect-ratio: 4 \/ 3;\n  background: rgba(255,255,255,0.35);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Fredoka', sans-serif;\n  font-size: 13px;\n  color: rgba(0,0,0,0.25);\n  margin-bottom: 20px;\n}\n.bt21-s8__img {\n  max-width: 450px;\n  width: 100%;\n  display: block;\n  border-radius: 12px;\n  margin: 0 auto;\n  margin-bottom: 5px;\n}\n.bt21-s8__heading {\n  font-family: 'Fredoka', sans-serif;\n  font-size: clamp(1.8rem, 2.4vw, 2.8rem);\n  color: #5a8fc4;\n  font-weight: 400;\n  line-height: 1.1;\n  letter-spacing: 1px;\n  margin: 0 0 14px;\n}\n.bt21-s8__desc {\n  font-family: 'Fredoka', sans-serif !important;\n  font-size: 15px !important;\n  color: #e86789;\n  line-height: 1.65;\n  margin: 0;\n  font-weight: 400 !important;\n}\n@media (max-width: 768px) {\n  .bt21-s8 { padding: 70px 0 40px; margin-top: 40px; }\n  .bt21-s8__inner { flex-direction: column; gap: 20px; }\n  .bt21-s8__right { flex: none; max-width: none; width: 100%; }\n}\n\n\n\/* ── Section 9: Comfort That Lasts ── *\/\n.bt21-s9 {\n  background: #bfdacc;\n  position: relative;\n  margin-top: 60px;\n  padding-top: 40px;\n}\n.bt21-s9::before {\n  content: '';\n  position: absolute;\n  top: -60px;\n  left: 0;\n  width: 100%;\n  height: 61px;\n  background-color: #F4E3D8;\n  background-image: url(\"data:image\/svg+xml,\u003csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='60' viewBox='0 0 100 60'\u003e\u003cpath d='M0,60 Q50,0 100,60 Z' fill='%23bfdacc'\/\u003e\u003c\/svg\u003e\");\n  background-repeat: repeat-x;\n  background-position: bottom;\n}\n.bt21-s9__wrap {\n  position: relative;\n  line-height: 0;\n}\n.bt21-s9__bg {\n  width: 100%;\n  display: block;\n}\n.bt21-s9__bg--mobile { display: none; }\n@media (max-width: 768px) {\n  .bt21-s9__bg--desktop { display: none; }\n  .bt21-s9__bg--mobile { display: block; }\n}\n.bt21-s9__item {\n  position: absolute;\n}\n.bt21-s9__item--1 { top: 24%;    left: 11%;    width: 11%; }\n.bt21-s9__item--2 { top: 38%;    left: 10%;   width: 13%; }\n.bt21-s9__item--3 { top: 52%;    left: 9%;    width: 15%; }\n.bt21-s9__item--4 { top: 18%;    right: 11%;  width: 18%; }\n.bt21-s9__item--6 { top: 32%;    right: 12%;  width: 10%; }\n.bt21-s9__item--5 { bottom: 9%;  right: 7.5%; width: 19%; }\n\n@media (max-width: 768px) {\n  .bt21-s9 { background: #cfe3d8; padding-top: 0; }\n  .bt21-s9::before { background-image: url(\"data:image\/svg+xml,\u003csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='60' viewBox='0 0 100 60'\u003e\u003cpath d='M0,60 Q50,0 100,60 Z' fill='%23cfe3d8'\/\u003e\u003c\/svg\u003e\"); }\n  .bt21-s9__item--1 { top: 20%;     left: 1%; width: 15%;}\n  .bt21-s9__item--2 { bottom: 10%;  left: 13%;    width: 18%; top: unset; }\n  .bt21-s9__item--3 { bottom: 12%;  left: 30%;    width: 18%; top: unset; scale: -1 1; }\n  .bt21-s9__item--4 { top: 19%;     right: 4%;    width: 25%; }\n  .bt21-s9__item--5 { bottom: 10%;  right: 12.5%; width: 28%; }\n  .bt21-s9__item--6 { top: 29%;     right: 3%;    width: 16%; }\n}\n\n\/* Responsive *\/\n@media (max-width: 768px) {\n  .bt21-pyc { padding: 12px 0; }\n  .bt21-pick-row { gap: 8px; padding: 0 0 22px; }\n  .bt21-pick-row img{width: 85%; margin: 0 auto;}\n  .bt21-pick-row__img--desktop { display: none !important; }\n  .bt21-pick-row__img--mobile { display: block !important; }\n  .bt21-pick-text { white-space: normal; text-align: center; }\n  .bt21-char-grid { padding: 0 0 10px; }\n  .bt21-pyc .page-width { display: flex; flex-direction: column; }\n  .bt21-pyc .page-width \u003e .bt21-pick-row { order: 1; }\n  .bt21-pyc .page-width \u003e .bt21-char-grid:nth-child(2) { order: 2; }\n  .bt21-pyc .page-width \u003e .bt21-char-grid:nth-child(4) { order: 3; }\n  .bt21-pyc .page-width \u003e .bt21-pyc-corners:last-child { order: 4; }\n}\n@media (max-width: 480px) {\n  .bt21-char-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }\n  .bt21-s5__left .bt21-s5__img,\n  .bt21-s6__img,\n  .bt21-s7__img,\n  .bt21-s8__img { width: 75%; }\n  .bt21-s5__right .bt21-s5__img{transform: scale(1.2);}\n  .bt21-s2-logos img:first-child { height: 40px; }\n  .bt21-s2-logos img:last-child  { height: 20px; }\n  .bt21-pyc-corners:first-child img:first-child { display: none; }\n  .bt21-pyc-corners:first-child img:last-child  { width: 60px; margin: 0 auto;}\n  .bt21-pyc-corners:last-child img:first-child  { width: 70px; }\n  .bt21-pyc-corners:last-child img:last-child   { width: 40px; }\n  .bt21-s2 { padding-top: 60px; }\n  .bt21-s3-desc,\n  .bt21-s5__desc,\n  .bt21-s6__desc,\n  .bt21-s7__desc,\n  .bt21-s8__desc { font-size: 14px !important; }\n  .bt21-s3-desc{margin-bottom: 55px !important;}\n}\n\n@media (max-width: 1050px) { .bt21-br { display: none; } }\n@media (max-width: 769px) { .bt21-s6__left { overflow: hidden; } }\n@media (min-width: 480px) and (max-width: 768px) { .bt21-br { display: inline; } }\n@media (max-width: 480px) { .bt21-br { display: block; } }\n.bt21-br-xs { display: none; }\n@media (max-width: 480px) { .bt21-br-xs { display: inline; } }\n.image-animate-top{opacity:0;}\n.image-animate-top.animate{animation: fadeInTop 1s forwards;}\n@keyframes fadeInTop {\n    from {\n      opacity: 0;\n      transform: translateY(30px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\/* Stagger delays — must come after the animation shorthand above to win the cascade *\/\n.bt21-char--koya.animate   { animation-delay: 0s; }\n.bt21-char--rj.animate     { animation-delay: 0.15s; }\n.bt21-char--shooky.animate { animation-delay: 0.30s; }\n.bt21-char--mang.animate   { animation-delay: 0.45s; }\n.bt21-char--chimmy.animate { animation-delay: 0.60s; }\n.bt21-char--tata.animate   { animation-delay: 0.75s; }\n.bt21-char--cooky.animate  { animation-delay: 0.90s; }\n.bt21-char--van.animate    { animation-delay: 1.05s; }\n@media (max-width: 480px) {\n  .bt21-char--koya.animate,\n  .bt21-char--rj.animate     { animation-delay: 0s; }\n  .bt21-char--shooky.animate,\n  .bt21-char--mang.animate   { animation-delay: 0.15s; }\n  .bt21-char--chimmy.animate,\n  .bt21-char--tata.animate   { animation-delay: 0.30s; }\n  .bt21-char--cooky.animate,\n  .bt21-char--van.animate    { animation-delay: 0.45s; }\n}\n\u003c\/style\u003e\n\u003cdiv\u003e\u003cscript\u003e\nwindow.bt21MatchVideoBg = function (vid, cls, nextCls) {\n  function svg(c) {\n    return \"url(\\\"data:image\/svg+xml,\u003csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='60' viewBox='0 0 100 60'\u003e\u003cpath d='M0,60 Q50,0 100,60 Z' fill='\" + c.replace('#', '%23') + \"'\/\u003e\u003c\/svg\u003e\\\")\";\n  }\n  function sample() {\n    try {\n      var w = vid.videoWidth, h = vid.videoHeight;\n      if (!w || !h) return;\n      var cv = document.createElement('canvas');\n      cv.width = cv.height = 1;\n      var ctx = cv.getContext('2d');\n      ctx.drawImage(vid, 0, 0, Math.round(w * 0.03), Math.round(h * 0.03), 0, 0, 1, 1);\n      var d = ctx.getImageData(0, 0, 1, 1).data;\n      var c = '#' + [d[0], d[1], d[2]].map(function (v) { return ('0' + v.toString(16)).slice(-2); }).join('');\n      var s = document.createElement('style');\n      s.textContent =\n        '.' + cls + '{background:' + c + '!important}' +\n        '.' + cls + '::before{background-image:' + svg(c) + '!important}' +\n        '.' + nextCls + '::before{background-color:' + c + '!important}';\n      document.head.appendChild(s);\n    } catch (e) {}\n  }\n  vid.addEventListener('playing', function () {\n    if (vid.requestVideoFrameCallback) vid.requestVideoFrameCallback(sample);\n    else setTimeout(sample, 150);\n  }, { once: true });\n};\n\u003c\/script\u003e\u003c\/div\u003e\n\n\u003csection class=\"bt21-pdp\"\u003e\n\u003cdiv class=\"bt21-pyc\"\u003e\n  \u003cdiv class=\"page-width\"\u003e\n\n    \u003c!-- Top corners --\u003e\n    \u003cdiv class=\"bt21-pyc-corners image-animate-top\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect1-tt.png?v=1792983983\" alt=\"TTRacing\" width=\"36\" height=\"36\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21-Logo-resized.png?v=1793159550\" alt=\"BT21\" width=\"62\" height=\"26\"\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Row 1: KOYA · RJ · SHOOKY · CHIMMY --\u003e\n    \u003cdiv class=\"bt21-char-grid\"\u003e\n      \u003cdiv class=\"bt21-char-card bt21-char--koya image-animate-top\"\u003e\n        \u003cimg class=\"bt21-char-card-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_PDP_Internal_Koya.jpg?v=1793006336\" alt=\"KOYA\" width=\"400\" height=\"400\"\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"bt21-char-card bt21-char--rj image-animate-top\"\u003e\n        \u003cimg class=\"bt21-char-card-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_PDP_Internal_Rj.jpg?v=1793006332\" alt=\"RJ\" width=\"400\" height=\"400\"\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"bt21-char-card bt21-char--shooky image-animate-top\"\u003e\n        \u003cimg class=\"bt21-char-card-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_PDP_Internal_Shooky.jpg?v=1793006333\" alt=\"SHOOKY\" width=\"400\" height=\"400\"\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"bt21-char-card bt21-char--mang image-animate-top\"\u003e\n        \u003cimg class=\"bt21-char-card-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_PDP_Internal_Mang.jpg?v=1793006332\" alt=\"MANG\" width=\"400\" height=\"400\"\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Pick Your Character --\u003e\n    \u003cdiv class=\"bt21-pick-row image-animate-top\"\u003e\n      \u003cimg class=\"bt21-pick-row__img--desktop\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21-Header-Banner-Title-new.png?v=1793004515\" alt=\"Pick Your Character\" width=\"800\" height=\"80\"\u003e\n      \u003cimg class=\"bt21-pick-row__img--mobile\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/meetyourbt21-resized.png?v=1793159638\" alt=\"Pick Your Character\" width=\"800\" height=\"80\"\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Row 2: MANG · TATA · COOKY · VAN --\u003e\n    \u003cdiv class=\"bt21-char-grid\"\u003e\n      \u003cdiv class=\"bt21-char-card bt21-char--chimmy image-animate-top\"\u003e\n        \u003cimg class=\"bt21-char-card-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_PDP_Internal_Chimmy.jpg?v=1793006333\" alt=\"CHIMMY\" width=\"400\" height=\"400\"\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"bt21-char-card bt21-char--tata image-animate-top\"\u003e\n        \u003cimg class=\"bt21-char-card-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_PDP_Internal_Tata.jpg?v=1793006332\" alt=\"TATA\" width=\"400\" height=\"400\"\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"bt21-char-card bt21-char--cooky image-animate-top\"\u003e\n        \u003cimg class=\"bt21-char-card-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_PDP_Internal_Cooky.jpg?v=1793006333\" alt=\"COOKY\" width=\"400\" height=\"400\"\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"bt21-char-card bt21-char--van image-animate-top\"\u003e\n        \u003cimg class=\"bt21-char-card-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_PDP_Internal_Van.jpg?v=1793006332\" alt=\"VAN\" width=\"400\" height=\"400\"\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Bottom corners --\u003e\n    \u003cdiv class=\"bt21-pyc-corners image-animate-top\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/bt21sect1-linefriend.png?v=1792982598\" alt=\"Line Friends\" width=\"96\" height=\"20\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect1-bt21-copyright.png?v=1792983985\" alt=\"©BT21\" width=\"52\" height=\"18\"\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c!-- ── Section 2: Brand logos + hero image ── --\u003e\n\u003cdiv class=\"bt21-s2\"\u003e\n\n  \u003c!-- Brand logos row — within page-width --\u003e\n  \u003cdiv class=\"page-width\"\u003e\n    \u003cdiv class=\"bt21-s2-logos image-animate-top\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect2-ora-logo.png?v=1792985923\" alt=\"Ora Sofa\" width=\"120\" height=\"40\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect2-bt21-logo.png?v=1792985924\" alt=\"BT21\" width=\"80\" height=\"40\"\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Full-width hero image with overlaid word image --\u003e\n  \u003cdiv class=\"bt21-s2-hero\"\u003e\n    \u003cimg class=\"bt21-s2-hero__bg--desktop\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect2-pic1-new.png?v=1793076958\" alt=\"\" width=\"1920\" height=\"1088\"\u003e\n    \u003cimg class=\"bt21-s2-hero__bg--mobile\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect2-pic1-mobile.jpg?v=1793076956\" alt=\"\" width=\"1080\" height=\"1080\"\u003e\n    \u003cimg class=\"bt21-s2-hero__word bt21-s2-hero__word--desktop image-animate-top\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect2-word1.png?v=1792985925\" alt=\"\" width=\"400\" height=\"200\"\u003e\n    \u003cimg class=\"bt21-s2-hero__word bt21-s2-hero__word--mobile image-animate-top\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect2-word1-mobile.png?v=1793077392\" alt=\"\" width=\"400\" height=\"200\"\u003e\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- ── Section 3: Character Carousel ── --\u003e\n\u003cdiv class=\"bt21-s3\"\u003e\n\n  \u003c!-- Description text --\u003e\n  \u003cdiv class=\"page-width\"\u003e\n    \u003cp class=\"bt21-s3-desc image-animate-top\"\u003eMeet the TTRacing ORA Sofa Chair BT21 Edition.\u003cbr class=\"bt21-br-xs\"\u003e Your new chair built\u003cbr class=\"d-none d-md-block\"\u003e to rest your body and\u003cbr class=\"bt21-br-xs\"\u003e quietly take over your safe space.\u003cbr\u003e\u003cbr\u003eMovie marathons? Absolutely. Lazy Sundays?\u003cbr class=\"bt21-br-xs\"\u003e Encouraged.\u003cbr class=\"d-none d-md-block\"\u003e Getting up? Well,\u003cbr class=\"bt21-br-xs\"\u003e that's entirely up to you.\u003c\/p\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Carousel track — starts aligned to page-width left, overflows right --\u003e\n  \u003cdiv class=\"bt21-s3-track\" data-bt21s3-track\u003e\n\n    \u003cdiv class=\"bt21-s3-card\" data-char=\"KOYA\"\u003e\n      \u003cdiv class=\"bt21-s3-card-img\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect3-koya.png?v=1792988869\" alt=\"KOYA\" width=\"350\" height=\"350\"\u003e\u003c\/div\u003e\n      \u003cspan class=\"bt21-s3-card-name\"\u003eKOYA\u003c\/span\u003e\n      \u003cspan class=\"bt21-s3-card-tagline\"\u003eGifted Sleepyhead\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"bt21-s3-card\" data-char=\"RJ\"\u003e\n      \u003cdiv class=\"bt21-s3-card-img\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect3-rj.png?v=1792988869\" alt=\"RJ\" width=\"350\" height=\"350\"\u003e\u003c\/div\u003e\n      \u003cspan class=\"bt21-s3-card-name\"\u003eRJ\u003c\/span\u003e\n      \u003cspan class=\"bt21-s3-card-tagline\"\u003eKind, Loving, Foodie\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"bt21-s3-card\" data-char=\"SHOOKY\"\u003e\n      \u003cdiv class=\"bt21-s3-card-img\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect3-shooky.png?v=1792988869\" alt=\"SHOOKY\" width=\"350\" height=\"350\"\u003e\u003c\/div\u003e\n      \u003cspan class=\"bt21-s3-card-name\"\u003eSHOOKY\u003c\/span\u003e\n      \u003cspan class=\"bt21-s3-card-tagline\"\u003eMini Prankster\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"bt21-s3-card\" data-char=\"MANG\"\u003e\n      \u003cdiv class=\"bt21-s3-card-img\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect3-mang.png?v=1792988869\" alt=\"MANG\" width=\"350\" height=\"350\"\u003e\u003c\/div\u003e\n      \u003cspan class=\"bt21-s3-card-name\"\u003eMANG\u003c\/span\u003e\n      \u003cspan class=\"bt21-s3-card-tagline\"\u003eExpressive faced dancing machine\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"bt21-s3-card\" data-char=\"CHIMMY\"\u003e\n      \u003cdiv class=\"bt21-s3-card-img\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect3-chimmy.png?v=1792988869\" alt=\"CHIMMY\" width=\"350\" height=\"350\"\u003e\u003c\/div\u003e\n      \u003cspan class=\"bt21-s3-card-name\"\u003eCHIMMY\u003c\/span\u003e\n      \u003cspan class=\"bt21-s3-card-tagline\"\u003eThe Pure-At-Heart\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"bt21-s3-card\" data-char=\"TATA\"\u003e\n      \u003cdiv class=\"bt21-s3-card-img\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect3-tata.png?v=1792988869\" alt=\"TATA\" width=\"350\" height=\"350\"\u003e\u003c\/div\u003e\n      \u003cspan class=\"bt21-s3-card-name\"\u003eTATA\u003c\/span\u003e\n      \u003cspan class=\"bt21-s3-card-tagline\"\u003eAn Off-The-Wall, Curious Soul, Prince\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"bt21-s3-card\" data-char=\"COOKY\"\u003e\n      \u003cdiv class=\"bt21-s3-card-img\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect3-cooky.png?v=1792988869\" alt=\"COOKY\" width=\"350\" height=\"350\"\u003e\u003c\/div\u003e\n      \u003cspan class=\"bt21-s3-card-name\"\u003eCOOKY\u003c\/span\u003e\n      \u003cspan class=\"bt21-s3-card-tagline\"\u003eBrawny, Hearty Rumps\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"bt21-s3-card\" data-char=\"VAN\"\u003e\n      \u003cdiv class=\"bt21-s3-card-img\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect3-van.png?v=1792988869\" alt=\"VAN\" width=\"350\" height=\"350\"\u003e\u003c\/div\u003e\n      \u003cspan class=\"bt21-s3-card-name\"\u003eVAN\u003c\/span\u003e\n      \u003cspan class=\"bt21-s3-card-tagline\"\u003eGuardian Space Robot\u003c\/span\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n  \u003c!-- Prev\/Next — within page-width, right-aligned --\u003e\n  \u003cdiv class=\"page-width\"\u003e\n    \u003cdiv class=\"bt21-s3-controls\"\u003e\n      \u003cbutton class=\"bt21-s3-btn bt21-s3-btn--prev\" data-bt21s3-prev aria-label=\"Previous\" disabled\u003e\n        \u003csvg viewbox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\"\u003e\u003cpath d=\"M9 4l7 8-7 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      \u003c\/button\u003e\n      \u003cbutton class=\"bt21-s3-btn bt21-s3-btn--next\" data-bt21s3-next aria-label=\"Next\"\u003e\n        \u003csvg viewbox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\"\u003e\u003cpath d=\"M9 4l7 8-7 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      \u003c\/button\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\u003cdiv\u003e\u003cscript\u003e\n(function () {\n  var track   = document.querySelector('[data-bt21s3-track]');\n  var btnPrev = document.querySelector('[data-bt21s3-prev]');\n  var btnNext = document.querySelector('[data-bt21s3-next]');\n  if (!track || !btnPrev || !btnNext) return;\n\n  \/* Align track left edge with page-width *\/\n  var section = track.closest('.bt21-s3');\n  function setTrackOffset() {\n    if (window.innerWidth \u003c= 768) {\n      track.style.paddingLeft = '17px';\n      return;\n    }\n    var pw = section ? section.querySelector('.page-width') : document.querySelector('.page-width');\n    if (!pw) return;\n    var pwLeft = pw.getBoundingClientRect().left;\n    var pwPad  = parseFloat(getComputedStyle(pw).paddingLeft) || 0;\n    track.style.paddingLeft = (pwLeft + pwPad) + 'px';\n  }\n  setTrackOffset();\n  window.addEventListener('resize', setTrackOffset);\n\n  function getCardStep() {\n    var card = track.querySelector('.bt21-s3-card');\n    if (!card) return 280;\n    var gap = parseFloat(getComputedStyle(track).gap) || 20;\n    return card.offsetWidth + gap;\n  }\n\n  function updateButtons() {\n    btnPrev.disabled = track.scrollLeft \u003c= 1;\n    btnNext.disabled = track.scrollLeft + track.clientWidth \u003e= track.scrollWidth - 1;\n  }\n\n  btnPrev.addEventListener('click', function () {\n    track.scrollBy({ left: -getCardStep(), behavior: 'smooth' });\n  });\n  btnNext.addEventListener('click', function () {\n    track.scrollBy({ left: getCardStep(), behavior: 'smooth' });\n  });\n\n  track.addEventListener('scroll', updateButtons, { passive: true });\n  updateButtons();\n\n  \/* Mouse drag *\/\n  var dragging = false, startX = 0, scrollStart = 0;\n\n  track.addEventListener('mousedown', function (e) {\n    dragging = true;\n    startX = e.pageX;\n    scrollStart = track.scrollLeft;\n    track.classList.add('bt21-s3-track--drag');\n    e.preventDefault();\n  });\n  window.addEventListener('mousemove', function (e) {\n    if (!dragging) return;\n    track.scrollLeft = scrollStart - (e.pageX - startX);\n  });\n  window.addEventListener('mouseup', function () {\n    if (!dragging) return;\n    dragging = false;\n    track.classList.remove('bt21-s3-track--drag');\n    updateButtons();\n  });\n})();\n\u003c\/script\u003e\u003c\/div\u003e\n\n\n\u003c!-- ── Section 4: Little Moments Wall ── --\u003e\n\u003cdiv class=\"bt21w\" id=\"bt21w\"\u003e\n  \u003cdiv class=\"bt21w__inner page-width\"\u003e\n\n    \u003c!-- Left: image --\u003e\n    \u003cdiv class=\"bt21w__left image-animate-top\"\u003e\n      \u003cimg class=\"bt21w__left-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect4-word1.png?v=1792990169\" alt=\"\" width=\"800\" height=\"600\"\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Right: image strip + nav --\u003e\n    \u003cdiv class=\"bt21w__right\"\u003e\n      \u003cdiv class=\"bt21w__strip\" data-bt21w-strip data-bt21w-count=\"4\"\u003e\n\n        \u003cdiv class=\"bt21w__item bt21w__item--video\" data-src=\"https:\/\/cdn.shopify.com\/videos\/c\/vp\/c75aafa80bee489097f1d0f6dfd38625\/c75aafa80bee489097f1d0f6dfd38625.SD-480p-1.5Mbps-99267797.mp4\"\u003e\n          \u003cdiv class=\"bt21w__card\"\u003e\n            \u003cimg class=\"bt21w__poster\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/preview_images\/bt21reel1-thumbnail.png?v=1793243803\u0026amp;width=600\" alt=\"\" width=\"1080\" height=\"1920\" loading=\"lazy\"\u003e\n            \u003cbutton type=\"button\" class=\"bt21w__play-btn\" aria-label=\"Play video\"\u003e▶︎\u003c\/button\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"bt21w__item bt21w__item--video\" data-src=\"https:\/\/cdn.shopify.com\/videos\/c\/vp\/376ff59e7ecc4b3d90d27e9ad6808f83\/376ff59e7ecc4b3d90d27e9ad6808f83.SD-480p-1.5Mbps-99267796.mp4\"\u003e\n          \u003cdiv class=\"bt21w__card\"\u003e\n            \u003cimg class=\"bt21w__poster\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/preview_images\/bt21reel2-thumbnail_71dc707e-8341-433d-8fc3-d34228e3ed80.png?v=1793243790\u0026amp;width=600\" alt=\"\" width=\"1080\" height=\"1920\" loading=\"lazy\"\u003e\n            \u003cbutton type=\"button\" class=\"bt21w__play-btn\" aria-label=\"Play video\"\u003e▶︎\u003c\/button\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"bt21w__item bt21w__item--video\" data-src=\"https:\/\/cdn.shopify.com\/videos\/c\/vp\/76ac597b3fd845b49ef1625eebc93f27\/76ac597b3fd845b49ef1625eebc93f27.SD-480p-1.5Mbps-99267795.mp4\"\u003e\n          \u003cdiv class=\"bt21w__card\"\u003e\n            \u003cimg class=\"bt21w__poster\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/preview_images\/bt21reel3-thumbnail.png?v=1793243815\u0026amp;width=600\" alt=\"\" width=\"1080\" height=\"1920\" loading=\"lazy\"\u003e\n            \u003cbutton type=\"button\" class=\"bt21w__play-btn\" aria-label=\"Play video\"\u003e▶︎\u003c\/button\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"bt21w__item bt21w__item--video\" data-src=\"https:\/\/cdn.shopify.com\/videos\/c\/vp\/56bb78cd69e14b79870d361250f24652\/56bb78cd69e14b79870d361250f24652.SD-480p-1.5Mbps-99267794.mp4\"\u003e\n          \u003cdiv class=\"bt21w__card\"\u003e\n            \u003cimg class=\"bt21w__poster\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/preview_images\/bt21reel4-thumbnail.png?v=1793243776\u0026amp;width=600\" alt=\"\" width=\"1080\" height=\"1920\" loading=\"lazy\"\u003e\n            \u003cbutton type=\"button\" class=\"bt21w__play-btn\" aria-label=\"Play video\"\u003e▶︎\u003c\/button\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n      \u003cdiv class=\"bt21w__nav\" data-bt21w-nav\u003e\n        \u003cbutton type=\"button\" class=\"bt21w__paddle bt21w__paddle--prev\" data-bt21w-prev aria-label=\"Previous\" disabled\u003e\n          \u003csvg viewbox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\"\u003e\u003cpath d=\"M9 4l7 8-7 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n        \u003c\/button\u003e\n        \u003cbutton type=\"button\" class=\"bt21w__paddle\" data-bt21w-next aria-label=\"Next\"\u003e\n          \u003csvg viewbox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\"\u003e\u003cpath d=\"M9 4l7 8-7 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n        \u003c\/button\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"bt21w__modal\" id=\"bt21w-modal\" hidden\u003e\n  \u003cdiv class=\"bt21w__modal-card\"\u003e\n    \u003cdiv class=\"bt21w__modal-nav\"\u003e\n      \u003cbutton type=\"button\" class=\"bt21w__modal-paddle bt21w__modal-paddle--prev\" data-bt21w-modal-prev aria-label=\"Previous video\" disabled\u003e\n        \u003csvg viewbox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\"\u003e\u003cpath d=\"M9 4l7 8-7 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      \u003c\/button\u003e\n      \u003cspan class=\"bt21w__modal-counter\" data-bt21w-counter\u003e1 \/ 4\u003c\/span\u003e\n      \u003cbutton type=\"button\" class=\"bt21w__modal-paddle\" data-bt21w-modal-next aria-label=\"Next video\"\u003e\n        \u003csvg viewbox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\"\u003e\u003cpath d=\"M9 4l7 8-7 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      \u003c\/button\u003e\n    \u003c\/div\u003e\n    \u003cbutton type=\"button\" class=\"bt21w__modal-close\" data-bt21w-close aria-label=\"Close video\"\u003e✕\u003c\/button\u003e\n    \u003cvideo class=\"bt21w__modal-video\" data-bt21w-modal-video controls playsinline preload=\"none\"\u003e\u003c\/video\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c!-- ── Section 5: Little Extras ── --\u003e\n\u003cdiv class=\"bt21-s5\"\u003e\n  \u003cdiv class=\"page-width\"\u003e\n    \u003cdiv class=\"bt21-s5__inner\"\u003e\n\n      \u003c!-- Left: image + text --\u003e\n      \u003cdiv class=\"bt21-s5__left image-animate-top\"\u003e\n        \u003cimg class=\"bt21-s5__img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect5-word1.png?v=1792990315\" alt=\"\" width=\"700\" height=\"525\"\u003e\n        \u003cdiv class=\"bt21-s5__text\"\u003e\n          \u003cp class=\"bt21-s5__desc\"\u003eYour Ora Sofa Chair comes with a free\u003cbr\u003e booklet, character card, ticket, sticker\u003cbr\u003e sheet, and NFC disc.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- Right: image only --\u003e\n      \u003cdiv class=\"bt21-s5__right\"\u003e\n        \u003cimg class=\"bt21-s5__img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect5-pic1-new2.jpg?v=1793002235\" alt=\"\" width=\"700\" height=\"525\"\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c!-- ── Section 6: Your Comforts ── --\u003e\n\u003cdiv class=\"bt21-s6\" id=\"bt21-s6\"\u003e\n  \u003cdiv class=\"page-width\"\u003e\n    \u003cdiv class=\"bt21-s6__inner\"\u003e\n\n      \u003c!-- Left: video --\u003e\n      \u003cdiv class=\"bt21-s6__left\"\u003e\n        \u003cvideo style=\"aspect-ratio: 1 \/ 1;\" class=\"bt21-s6__video\" crossorigin=\"anonymous\" muted loop playsinline preload=\"none\" poster=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_Chimmy_first_scene.png?v=1793245316\"\u003e\n          \u003csource data-src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/77a488be7dc14f6fbb0c02c2d76b8165.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- Right: image + text --\u003e\n      \u003cdiv class=\"bt21-s6__right image-animate-top\"\u003e\n        \u003cimg class=\"bt21-s6__img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect6-word1.png?v=1792990591\" alt=\"\" width=\"700\" height=\"525\"\u003e\n\u003cp class=\"bt21-s6__desc\"\u003eIt comes with benefits! And we mean a matching\u003cbr class=\"bt21-br\"\u003e BT21 blanket and a phone holder. Stay tucked in,\u003cbr class=\"bt21-br\"\u003e keep your hands free, and let your favorite\u003cbr class=\"bt21-br\"\u003e character handle the cozy business.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\u003cscript\u003e\n(function () {\n  var section = document.getElementById('bt21-s6');\n  if (!section) return;\n  var vid = section.querySelector('video');\n  if (!vid) return;\n  if (window.bt21MatchVideoBg) window.bt21MatchVideoBg(vid, 'bt21-s6', 'bt21-s7');\n  var src = vid.querySelector('source');\n  if (src \u0026\u0026 src.dataset.src) {\n    src.src = src.dataset.src;\n    vid.load();\n  }\n  new IntersectionObserver(function (entries) {\n    if (entries[0].isIntersecting) {\n      vid.play().catch(function () {});\n    } else {\n      vid.pause();\n    }\n  }, { threshold: 0.15 }).observe(section);\n})();\n\u003c\/script\u003e\u003c\/div\u003e\n\n\u003c!-- ── Section 7: Turn, Rock, Settle ── --\u003e\n\u003cdiv class=\"bt21-s7\" id=\"bt21-s7\"\u003e\n  \u003cdiv class=\"page-width\"\u003e\n    \u003cdiv class=\"bt21-s7__inner\"\u003e\n\n      \u003c!-- Left: image + text --\u003e\n      \u003cdiv class=\"bt21-s7__left image-animate-top\"\u003e\n        \u003cimg class=\"bt21-s7__img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect7-word1.png?v=1792990643\" alt=\"\" width=\"700\" height=\"525\"\u003e\n\u003cp class=\"bt21-s7__desc\"\u003eA little spin to catch your favorite show. A gentle\u003cbr class=\"bt21-br\"\u003e rock when it's time to unwind. With a 240°\u003cbr class=\"bt21-br\"\u003e swivel and soothing rocking motion, who\u003cbr class=\"bt21-br\"\u003e says staying put has to be boring?\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- Right: video --\u003e\n      \u003cdiv class=\"bt21-s7__right\"\u003e\n        \u003cvideo style=\"aspect-ratio: 1 \/ 1;\" class=\"bt21-s7__video\" crossorigin=\"anonymous\" muted loop playsinline preload=\"none\" poster=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_Koya_Latest_first_scene.png?v=1793008428\"\u003e\n          \u003csource data-src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/61a8fe95f1914f1e9ac9b1b9d40e532d.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n        \u003cimg class=\"bt21-video-overlay\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_Koya_Latest_first_scene.png?v=1793008428\" alt=\"\" width=\"1080\" height=\"1080\"\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\u003cscript\u003e\n(function () {\n  var section = document.getElementById('bt21-s7');\n  if (!section) return;\n  var vid = section.querySelector('video');\n  if (!vid) return;\n  if (window.bt21MatchVideoBg) window.bt21MatchVideoBg(vid, 'bt21-s7', 'bt21-s8');\n  var overlay = section.querySelector('.bt21-video-overlay');\n  var loaded = false;\n  if (overlay) {\n    vid.addEventListener('playing', function () {\n      overlay.style.opacity = '0';\n      setTimeout(function () { overlay.style.display = 'none'; }, 300);\n    }, { once: true });\n  }\n  new IntersectionObserver(function (entries) {\n    if (entries[0].isIntersecting) {\n      if (!loaded) {\n        var src = vid.querySelector('source');\n        if (src \u0026\u0026 src.dataset.src) { src.src = src.dataset.src; vid.load(); }\n        loaded = true;\n      }\n      vid.play().catch(function () {});\n    } else {\n      vid.pause();\n    }\n  }, { threshold: 0.15 }).observe(section);\n})();\n\u003c\/script\u003e\u003c\/div\u003e\n\n\u003c!-- ── Section 8: One Press to Nap ── --\u003e\n\u003cdiv class=\"bt21-s8\" id=\"bt21-s8\"\u003e\n  \u003cdiv class=\"page-width\"\u003e\n    \u003cdiv class=\"bt21-s8__inner\"\u003e\n\n      \u003c!-- Left: image + text --\u003e\n      \u003cdiv class=\"bt21-s8__left image-animate-top\"\u003e\n        \u003cimg class=\"bt21-s8__img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect8-word1.png?v=1792990649\" alt=\"\" width=\"700\" height=\"525\"\u003e\n\u003cp class=\"bt21-s8__desc\"\u003eOne press. Backrest down. Legrest up. No levers.\u003cbr class=\"bt21-br\"\u003e No awkward reaching. No unnecessary effort.\u003cbr class=\"bt21-br\"\u003e Because honestly, getting comfortable\u003cbr class=\"bt21-br\"\u003e shouldn't be a workout.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- Right: video --\u003e\n      \u003cdiv class=\"bt21-s8__right\"\u003e\n        \u003cvideo style=\"aspect-ratio: 1 \/ 1;\" class=\"bt21-s8__video\" crossorigin=\"anonymous\" muted loop playsinline preload=\"none\" poster=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_Cooky_first_scene.png?v=1793007681\"\u003e\n          \u003csource data-src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/703a543de22149769a31277e4443127d.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n        \u003cimg class=\"bt21-video-overlay\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/BT21_Cooky_first_scene.png?v=1793007681\" alt=\"\" width=\"1080\" height=\"1080\"\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\u003cscript\u003e\n(function () {\n  var section = document.getElementById('bt21-s8');\n  if (!section) return;\n  var vid = section.querySelector('video');\n  if (!vid) return;\n  if (window.bt21MatchVideoBg) window.bt21MatchVideoBg(vid, 'bt21-s8', 'bt21-s9');\n  var overlay = section.querySelector('.bt21-video-overlay');\n  var loaded = false;\n  if (overlay) {\n    vid.addEventListener('playing', function () {\n      overlay.style.opacity = '0';\n      setTimeout(function () { overlay.style.display = 'none'; }, 300);\n    }, { once: true });\n  }\n  new IntersectionObserver(function (entries) {\n    if (entries[0].isIntersecting) {\n      if (!loaded) {\n        var src = vid.querySelector('source');\n        if (src \u0026\u0026 src.dataset.src) { src.src = src.dataset.src; vid.load(); }\n        loaded = true;\n      }\n      vid.play().catch(function () {});\n    } else {\n      vid.pause();\n    }\n  }, { threshold: 0.15 }).observe(section);\n})();\n\u003c\/script\u003e\u003c\/div\u003e\n\n\u003c!-- ── Section 9: Comfort That Lasts ── --\u003e\n\u003cdiv class=\"bt21-s9\"\u003e\n  \u003cdiv class=\"bt21-s9__wrap\"\u003e\n\n    \u003c!-- Background images: desktop \/ mobile --\u003e\n    \u003cimg class=\"bt21-s9__bg bt21-s9__bg--desktop\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect9-pic1.png?v=1792998615\" alt=\"\" width=\"1920\" height=\"1080\"\u003e\n    \u003cimg class=\"bt21-s9__bg bt21-s9__bg--mobile\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect9-pic1-mobile.jpg?v=1793068982\" alt=\"\" width=\"750\" height=\"1334\"\u003e\n\n    \u003c!-- Left column overlays --\u003e\n    \u003cimg class=\"bt21-s9__item bt21-s9__item--1 image-animate-top\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect9-word1-new.png?v=1793076598\" alt=\"\" width=\"400\" height=\"200\"\u003e\n    \u003cimg class=\"bt21-s9__item bt21-s9__item--2 image-animate-top\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect9-word3a.png?v=1792998883\" alt=\"\" width=\"400\" height=\"200\"\u003e\n    \u003cimg class=\"bt21-s9__item bt21-s9__item--3 image-animate-top\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect9-word3b.png?v=1792998883\" alt=\"\" width=\"400\" height=\"200\"\u003e\n    \u003c!-- Right column overlays --\u003e\n    \u003cimg class=\"bt21-s9__item bt21-s9__item--4 image-animate-top\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect9-word4a.png?v=1792998883\" alt=\"\" width=\"400\" height=\"200\"\u003e\n    \u003cimg class=\"bt21-s9__item bt21-s9__item--6 image-animate-top\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect9-word4b.png?v=1792998883\" alt=\"\" width=\"400\" height=\"200\"\u003e\n    \u003cimg class=\"bt21-s9__item bt21-s9__item--5 image-animate-top\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/sect9-word2.png?v=1792998884\" alt=\"\" width=\"400\" height=\"200\"\u003e\n\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cdiv\u003e\u003cscript\u003e\n(function () {\n  function init() {\n    var section = document.getElementById('bt21w');\n    var modal   = document.getElementById('bt21w-modal');\n    if (!section || !modal) return;\n\n    var strip      = section.querySelector('[data-bt21w-strip]');\n    var items      = Array.from(section.querySelectorAll('.bt21w__item'));\n    var videoItems = Array.from(section.querySelectorAll('.bt21w__item--video'));\n    var videoSrcs  = videoItems.map(function (el) { return el.dataset.src || ''; });\n    var videoTotal = videoSrcs.length;\n    var scrollPrev = section.querySelector('[data-bt21w-prev]');\n    var scrollNext = section.querySelector('[data-bt21w-next]');\n    if (!strip || !scrollPrev || !scrollNext) return;\n\n    var modalVideo = modal.querySelector('[data-bt21w-modal-video]');\n    var counter    = modal.querySelector('[data-bt21w-counter]');\n    var btnPrev    = modal.querySelector('[data-bt21w-modal-prev]');\n    var btnNext    = modal.querySelector('[data-bt21w-modal-next]');\n    var current = 0;\n    var page = 0;\n\n    var autoIndex = 0;\n    var autoActive = false;\n    var popupOpen = false;\n    var autoTimer = null;\n    var currentInlineVideo = null;\n\n    function isDesktop() { return window.innerWidth \u003e= 1001; }\n    function getItemW() {\n      var el = items[0];\n      if (!el) return 0;\n      var gap = parseFloat(getComputedStyle(strip).gap) || 20;\n      return el.offsetWidth + gap;\n    }\n\n    \/* ---- Desktop carousel ---- *\/\n    function goToPage(n) {\n      var maxPage = Math.max(0, items.length - 2);\n      page = Math.max(0, Math.min(n, maxPage));\n      strip.style.transform = 'translateX(' + -(page * getItemW()) + 'px)';\n      scrollPrev.disabled = page === 0;\n    }\n\n    \/* ---- Mobile scroll nav ---- *\/\n    function updateMobileNav() {\n      scrollPrev.disabled = strip.scrollLeft \u003c= 0;\n    }\n\n    function restartAutoAt(index) {\n      if (!autoActive) return;\n      stopCurrentAuto();\n      autoIndex = index;\n      autoTimer = setTimeout(function () {\n        if (autoActive \u0026\u0026 !popupOpen) playAutoItem(autoIndex);\n      }, 2000);\n    }\n\n    scrollPrev.addEventListener('click', function () {\n      var desktop = isDesktop();\n      if (desktop) { goToPage(page - 1); }\n      else { strip.scrollBy({ left: -getItemW(), behavior: 'smooth' }); }\n      restartAutoAt(desktop ? page : Math.max(0, autoIndex - 1));\n    });\n    scrollNext.addEventListener('click', function () {\n      var desktop = isDesktop();\n      var maxPage = Math.max(0, items.length - 2);\n      var atEnd = desktop ? page \u003e= maxPage : strip.scrollLeft + strip.clientWidth \u003e= strip.scrollWidth - 1;\n      if (desktop) { goToPage(atEnd ? 0 : page + 1); }\n      else if (atEnd) { strip.scrollTo({ left: 0, behavior: 'smooth' }); }\n      else { strip.scrollBy({ left: getItemW(), behavior: 'smooth' }); }\n      restartAutoAt(atEnd ? 0 : (desktop ? page : Math.min(items.length - 1, autoIndex + 1)));\n    });\n\n    var scrollSettleTimer = null;\n    strip.addEventListener('scroll', function () {\n      if (isDesktop()) return;\n      updateMobileNav();\n      if (!autoActive || popupOpen) return;\n      clearTimeout(scrollSettleTimer);\n      scrollSettleTimer = setTimeout(function () {\n        var closestIdx = 0, closestDist = Infinity;\n        items.forEach(function (item, i) {\n          var dist = Math.abs(item.offsetLeft - 17 - strip.scrollLeft);\n          if (dist \u003c closestDist) { closestDist = dist; closestIdx = i; }\n        });\n        if (closestIdx !== autoIndex) restartAutoAt(closestIdx);\n      }, 200);\n    }, { passive: true });\n\n    if (isDesktop()) { goToPage(0); }\n    else { strip.style.transform = ''; updateMobileNav(); }\n\n    window.addEventListener('resize', function () {\n      if (isDesktop()) {\n        strip.style.transform = 'translateX(' + -(page * getItemW()) + 'px)';\n        scrollPrev.disabled = page === 0;\n      } else {\n        strip.style.transform = '';\n        updateMobileNav();\n      }\n    });\n\n    \/* ---- Video popup ---- *\/\n    function openModal(index) {\n      current = index;\n      updateModal();\n      modal.hidden = false;\n      modal.offsetHeight;\n      modal.classList.add('is-open');\n      document.body.style.overflow = 'hidden';\n      onPopupOpen();\n    }\n    function closeModal() {\n      modal.classList.remove('is-open');\n      document.body.style.overflow = '';\n      if (modalVideo) modalVideo.pause();\n      setTimeout(function () {\n        modal.hidden = true;\n        if (modalVideo) modalVideo.removeAttribute('src');\n      }, 260);\n      onPopupClose();\n    }\n    function updateModal() {\n      if (modalVideo) {\n        var posterEl = videoItems[current] \u0026\u0026 videoItems[current].querySelector('.bt21w__poster');\n        modalVideo.poster = posterEl ? posterEl.src : '';\n        modalVideo.src = videoSrcs[current];\n        var p = modalVideo.play();\n        if (p !== undefined) p.catch(function () {});\n      }\n      if (counter) counter.textContent = (current + 1) + ' \/ ' + videoTotal;\n      if (btnPrev) btnPrev.disabled = current === 0;\n      if (btnNext) btnNext.disabled = current === videoTotal - 1;\n    }\n    function modalPrev() { if (current \u003e 0) { current--; updateModal(); } }\n    function modalNext() { if (current \u003c videoTotal - 1) { current++; updateModal(); } }\n\n    videoItems.forEach(function (item, i) {\n      item.querySelector('.bt21w__card').addEventListener('click', function () { openModal(i); });\n    });\n    modal.querySelector('[data-bt21w-close]').addEventListener('click', closeModal);\n    if (btnPrev) btnPrev.addEventListener('click', modalPrev);\n    if (btnNext) btnNext.addEventListener('click', modalNext);\n    modal.addEventListener('click', function (e) { if (e.target === modal) closeModal(); });\n\n    document.addEventListener('keydown', function (e) {\n      if (modal.hidden) return;\n      if (e.key === 'Escape') closeModal();\n      if (e.key === 'ArrowLeft') modalPrev();\n      if (e.key === 'ArrowRight') modalNext();\n    });\n\n    \/* ---- Auto-play one by one ---- *\/\n    function stopCurrentAuto() {\n      if (autoTimer) { clearTimeout(autoTimer); autoTimer = null; }\n      if (currentInlineVideo) {\n        currentInlineVideo.pause();\n        currentInlineVideo.onended = null;\n        currentInlineVideo = null;\n      }\n      items.forEach(function (item) { item.classList.remove('bt21w__item--playing'); });\n    }\n\n    function scrollToItem(index) {\n      if (isDesktop()) {\n        goToPage(index);\n      } else {\n        var itemEl = items[index];\n        if (itemEl) strip.scrollTo({ left: itemEl.offsetLeft - 17, behavior: 'smooth' });\n      }\n    }\n\n    function playAutoItem(index) {\n      if (!autoActive || popupOpen) return;\n      autoIndex = ((index % items.length) + items.length) % items.length;\n      var item = items[autoIndex];\n      if (!item) return;\n\n      scrollToItem(autoIndex);\n\n      var vid = item.querySelector('.bt21w__inline-video');\n      if (!vid) {\n        vid = document.createElement('video');\n        vid.className = 'bt21w__inline-video';\n        vid.muted = true;\n        vid.setAttribute('playsinline', '');\n        vid.setAttribute('preload', 'none');\n        vid.src = item.dataset.src || '';\n        item.querySelector('.bt21w__card').appendChild(vid);\n      }\n      vid.currentTime = 0;\n      currentInlineVideo = vid;\n      \/\/ show the video only once it is really playing (avoids black frame \/ iOS blocked icon)\n      vid.onplaying = function () {\n        if (currentInlineVideo === vid) item.classList.add('bt21w__item--playing');\n      };\n      vid.onended = function () {\n        item.classList.remove('bt21w__item--playing');\n        currentInlineVideo = null;\n        if (autoActive \u0026\u0026 !popupOpen) playAutoItem(autoIndex + 1);\n      };\n      var playPromise = vid.play();\n      if (playPromise !== undefined) {\n        playPromise.catch(function () {\n          if (currentInlineVideo !== vid) return;\n          item.classList.remove('bt21w__item--playing');\n          currentInlineVideo = null;\n          autoTimer = setTimeout(function () {\n            if (autoActive \u0026\u0026 !popupOpen) playAutoItem(autoIndex + 1);\n          }, 3000);\n        });\n      }\n    }\n\n    function onPopupOpen() {\n      popupOpen = true;\n      stopCurrentAuto();\n    }\n    function onPopupClose() {\n      popupOpen = false;\n      if (autoActive) {\n        autoTimer = setTimeout(function () { playAutoItem(autoIndex); }, 500);\n      }\n    }\n\n    if ('IntersectionObserver' in window) {\n      new IntersectionObserver(function (entries) {\n        if (entries[0].isIntersecting \u0026\u0026 !autoActive) {\n          autoActive = true;\n          playAutoItem(0);\n        }\n      }, { threshold: 0.3 }).observe(section);\n    }\n  }\n\n  if (typeof requestIdleCallback === 'function') {\n    requestIdleCallback(init, { timeout: 2000 });\n  } else {\n    setTimeout(init, 1);\n  }\n})();\n\u003c\/script\u003e\u003c\/div\u003e\n\n\n\u003c\/section\u003e\n","brand":"TTRacing","offers":[{"title":"BT21 Koya","offer_id":67811235102782,"sku":"TTRORABT21KOYA-001-G","price":1999.0,"currency_code":"MYR","in_stock":true},{"title":"BT21 RJ","offer_id":67833068159038,"sku":"TTRORABT21RJ-001-G","price":1999.0,"currency_code":"MYR","in_stock":true},{"title":"BT21 Shooky","offer_id":67833273352254,"sku":"TTRORABT21SHKY-001-G","price":1999.0,"currency_code":"MYR","in_stock":true},{"title":"BT21 Mang","offer_id":67833273385022,"sku":"TTRORABT21MANG-001-G","price":1999.0,"currency_code":"MYR","in_stock":true},{"title":"BT21 Chimmy","offer_id":67833273450558,"sku":"TTRORABT21CHMY-001-G","price":1999.0,"currency_code":"MYR","in_stock":true},{"title":"BT21 Tata","offer_id":67833273417790,"sku":"TTRORABT21TATA-001-G","price":1999.0,"currency_code":"MYR","in_stock":true},{"title":"BT21 Cooky","offer_id":67833273483326,"sku":"TTRORABT21CKY-001-G","price":1999.0,"currency_code":"MYR","in_stock":true},{"title":"BT21 Van","offer_id":67833273516094,"sku":"TTRORABT21VAN-001-G","price":1999.0,"currency_code":"MYR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/2021\/9723\/files\/KOYA-360-1-new.png?v=1793420973"}],"url":"https:\/\/ttracing.my\/collections\/bt21.oembed","provider":"TTRacing","version":"1.0","type":"link"}