/** Shopify CDN: Minification failed

Line 282:0 Unexpected "}"

**/
/* === Kickdopa Section Transitions B+ Silky Mixed Direction (2026-04-26) === */

[id^="shopify-section-"]:not([id*="annoucement"]):not([id*="header"]):not([id*="footer"]):not([id*="hero"]) {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* Keyframes with same easing language */
@keyframes kd-m1 {
  0%   { opacity: 0; transform: translateY(56px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes kd-m3 {
  0%   { opacity: 0; transform: scale(0.86); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes kd-m4-child {
  0%   { opacity: 0; transform: translateY(60px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes kd-slide-left {
  0%   { opacity: 0; transform: translateX(-80px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes kd-slide-right {
  0%   { opacity: 0; transform: translateX(80px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.kd-fx-active * { animation: none !important; transition: none !important; }
}

/* === MODERN scroll-timeline (silky easing) === */
@supports (animation-timeline: view()) {

  /* Default M1 with longer range = silkier */
  html.kd-fx-active [id^="shopify-section-"]:not(.kd-fx-skip) {
    animation: kd-m1 cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 32%;
    animation-duration: auto;
  }

  /* M3 · Flavors scale */
  html.kd-fx-active [id*="custom_content_hKEKcD"] {
    animation-name: kd-m3 !important;
  }

  /* M4 · Why Choose: section silent, cards stagger */
  html.kd-fx-active [id*="ss_feature_13"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html.kd-fx-active [id*="ss_feature_13"] [class*="feature-item-template"] {
    animation: kd-m4-child cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    animation-duration: auto;
  }
  html.kd-fx-active [id*="ss_feature_13"] [class*="feature-item-template"]:nth-child(2) { animation-range: entry 5% cover 40%; }
  html.kd-fx-active [id*="ss_feature_13"] [class*="feature-item-template"]:nth-child(3) { animation-range: entry 10% cover 45%; }
  html.kd-fx-active [id*="ss_feature_13"] [class*="feature-item-template"]:nth-child(4) { animation-range: entry 15% cover 50%; }

  /* === NEW: Side slides for variety === */
  /* Comparison table: slide from right */
  html.kd-fx-active [id*="ss_comparison_table"] {
    animation-name: kd-slide-right !important;
  }
  /* Testimonials: slide from left */
  html.kd-fx-active [id*="testimonials"] {
    animation-name: kd-slide-left !important;
  }
  /* Anywhere Anytime image_with_text: slide from left */
  html.kd-fx-active [id*="image_with_text"] {
    animation-name: kd-slide-left !important;
  }
  /* Custom content 2 (How To Use Kickdopa): slide from right */
  html.kd-fx-active [id*="custom_content_GncxfY"] {
    animation-name: kd-slide-right !important;
  }

  /* === Mobile: 简化为全 bottom-up，避免横向滑动晕眩 === */
  @media (max-width: 768px), (hover: none) {
    html.kd-fx-active [id*="custom_content_hKEKcD"],
    html.kd-fx-active [id*="ss_comparison_table"],
    html.kd-fx-active [id*="testimonials"],
    html.kd-fx-active [id*="image_with_text"],
    html.kd-fx-active [id*="custom_content_GncxfY"] {
      animation-name: kd-m1 !important;
    }
    html.kd-fx-active [id*="ss_feature_13"] {
      animation: kd-m1 cubic-bezier(0.16, 1, 0.3, 1) both !important;
      animation-timeline: view() !important;
      animation-range: entry 0% cover 32% !important;
      animation-duration: auto !important;
      opacity: initial !important;
      transform: initial !important;
    }
    html.kd-fx-active [id*="ss_feature_13"] [class*="feature-item-template"] {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

/* === FALLBACK: 老浏览器走 IntersectionObserver === */
@supports not (animation-timeline: view()) {
  html.kd-fx-active [id^="shopify-section-"]:not(.kd-fx-skip):not(.kd-fx-revealed) {
    opacity: 0;
    transform: translateY(56px);
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.kd-fx-active [id^="shopify-section-"].kd-fx-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  html.kd-fx-active [id*="custom_content_hKEKcD"]:not(.kd-fx-revealed) {
    transform: scale(0.86);
  }
  html.kd-fx-active [id*="custom_content_hKEKcD"].kd-fx-revealed {
    transform: scale(1);
  }
}

/* === Why Choose 入场 (IntersectionObserver 方案, 跨浏览器稳定) === */

/* 列 wrapper 默认: 隐藏 + 偏移 */
html.kd-fx-active [id*="ss_feature_13"] [class*="feature-left-template"] {
  opacity: 0;
  transform: translateX(-90px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
html.kd-fx-active [id*="ss_feature_13"] [class*="feature-right-template"] {
  opacity: 0;
  transform: translateX(90px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* 进入视口后, JS 加 .kd-wc-in 触发 transition */
html.kd-fx-active [id*="ss_feature_13"].kd-wc-in [class*="feature-left-template"],
html.kd-fx-active [id*="ss_feature_13"].kd-wc-in [class*="feature-right-template"] {
  opacity: 1;
  transform: translateX(0);
}

/* L2 中央 puck 浮动 */
@keyframes kd-float-product {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
html.kd-fx-active [id*="ss_feature_13"] [class*="feature-image-template"] img,
html.kd-fx-active [id*="ss_feature_13"] [class*="feature-image-template"] {
  animation: kd-float-product 4s ease-in-out infinite;
  will-change: transform;
}

/* Why Choose section 自身: 关 content-visibility */
html.kd-fx-active [id*="ss_feature_13"] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* 移动端: 不侧滑, 改 bottom-up */
@media (max-width: 768px), (hover: none) {
  html.kd-fx-active [id*="ss_feature_13"] [class*="feature-left-template"],
  html.kd-fx-active [id*="ss_feature_13"] [class*="feature-right-template"] {
    transform: translateY(40px);
  }
  html.kd-fx-active [id*="ss_feature_13"].kd-wc-in [class*="feature-left-template"],
  html.kd-fx-active [id*="ss_feature_13"].kd-wc-in [class*="feature-right-template"] {
    transform: translateY(0);
  }
}
/* === End Why Choose 入场 === */

/* === Who Can Benefit 入场 (IO 方案, slow & silky 1.5s) === */

/* Row 1 (前 3 张): 从上往下降入 */
html.kd-fx-active [id*="ss_product_ingredients_5"] [class*="product-grid-template"] > [class*="product-item-template"]:nth-child(-n+3) {
  opacity: 0;
  transform: translateY(-80px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Row 2 (后 3 张): 从下往上升入 */
html.kd-fx-active [id*="ss_product_ingredients_5"] [class*="product-grid-template"] > [class*="product-item-template"]:nth-child(n+4) {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* 进入视口时, JS 加 kd-wb-in 类触发同时落位 */
html.kd-fx-active [id*="ss_product_ingredients_5"].kd-wb-in [class*="product-grid-template"] > [class*="product-item-template"] {
  opacity: 1;
  transform: translateY(0);
}

/* 同行内卡片错峰 100ms 一张, 节奏感 */
html.kd-fx-active [id*="ss_product_ingredients_5"].kd-wb-in [class*="product-grid-template"] > [class*="product-item-template"]:nth-child(2),
html.kd-fx-active [id*="ss_product_ingredients_5"].kd-wb-in [class*="product-grid-template"] > [class*="product-item-template"]:nth-child(5) { transition-delay: 0.10s; }
html.kd-fx-active [id*="ss_product_ingredients_5"].kd-wb-in [class*="product-grid-template"] > [class*="product-item-template"]:nth-child(3),
html.kd-fx-active [id*="ss_product_ingredients_5"].kd-wb-in [class*="product-grid-template"] > [class*="product-item-template"]:nth-child(6) { transition-delay: 0.20s; }

/* Section 自身静止, 关 content-visibility */
html.kd-fx-active [id*="ss_product_ingredients_5"] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* 移动端: 卡片用 swiper, 不做特殊动画 (避免和 swiper 冲突) */
@media (max-width: 768px), (hover: none) {
  html.kd-fx-active [id*="ss_product_ingredients_5"] [class*="product-grid-template"] > [class*="product-item-template"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* === End Who Can Benefit === */


/* === KD Flavor Lineup (replaces Discover Our Flavors) === */
.kd-lineup { padding: 96px 0; background: #fff; }
.kd-lineup-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.kd-lineup-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; gap: 40px; }
.kd-eyebrow { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #888; font-weight: 600; margin-bottom: 16px; }
.kd-eyebrow::before { content: ""; width: 24px; height: 1px; background: #888; margin-right: 12px; display: inline-block; }
.kd-lineup-h2 { font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 800; margin: 0; color: #111; }
.kd-lede { font-size: 15px; line-height: 1.55; color: #555; max-width: 380px; margin: 0; padding-bottom: 8px; }
.kd-flavors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.kd-flavor { padding: 22px 18px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; text-align: center; cursor: pointer; transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; font: inherit; color: inherit; text-decoration: none; display: block; }
.kd-flavor:hover { transform: translateY(-4px); border-color: #ccc; }







/* Mobile responsive */
@media (max-width: 900px) {
  .kd-lineup { padding: 64px 0; }
  .kd-lineup-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; }
  .kd-lineup-h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .kd-flavors { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kd-flavor { padding: 16px 14px; }
  
}

/* Reveal animation (uses existing kd-fx-active) */
html.kd-fx-active .kd-lineup [class*="kd-reveal"] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
html.kd-fx-active .kd-lineup.kd-lineup-in [class*="kd-reveal"] { opacity: 1; transform: translateY(0); }
html.kd-fx-active .kd-lineup.kd-lineup-in .kd-lede { transition-delay: .1s; }
html.kd-fx-active .kd-lineup.kd-lineup-in .kd-flavors { transition-delay: .2s; }
/* === End KD Flavor Lineup === */
/* Desktop: hover swap (name → "Shop X →") */
@media (hover: hover) and (pointer: fine) {
  .kd-flavor:hover .kd-flavor-name { display: none; }
  .kd-flavor:hover 
}

/* Mobile: show "View product →" under name */
@media (hover: none), (max-width: 768px) {
  
  
}
/* End Kickdopa lineup overrides */










/* === Hero typography v5 (slogan only, BIG) === */

.m-hero__title,
.m-hero__title.h1,
.m-hero__title.h2 {
  font-style: normal !important;
  font-size: clamp(56px, 8.5vw, 132px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.025em !important;
  font-weight: 900 !important;
  margin-bottom: 28px !important;
}

.m-hero__subtitle {
  font-size: 16px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 0.85 !important;
  font-weight: 600 !important;
  margin-bottom: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.m-hero__subtitle::before {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  margin-right: 14px;
  opacity: 0.7;
}

.m-hero { position: relative !important; }
.m-hero__inner {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.m-hero__buttons { margin-top: 20px !important; }

@media (max-width: 768px) {
  .m-hero__title,
  .m-hero__title.h1,
  .m-hero__title.h2 {
    font-size: clamp(44px, 12vw, 72px) !important;
  }
  .m-hero__subtitle { font-size: 13px !important; }
  .m-hero__subtitle::before { width: 22px; margin-right: 10px; }
}
/* === End hero overrides === */

/* Image wrapper + hover open-package swap */
.kd-flavor-imgs {
  position: relative;
  width: 100%;
  height: 220px;
  margin-bottom: 18px;
}
.kd-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.kd-img--open { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .kd-flavor:hover .kd-img--closed { opacity: 0; transform: scale(1.02); }
  .kd-flavor:hover .kd-img--open { opacity: 1; transform: scale(1.02); }
}
@media (max-width: 768px) {
  .kd-flavor-imgs { height: 180px; }
}





/* === Lineup v8: demo format (bilingual + glow + single badge) === */

/* Flavor color tokens (from demo) */
:root {
  --kd-c-lemon: #FFE600;
  --kd-c-watermelon: #FF2E5C;
  --kd-c-coffee: #FF7F2A;
  --kd-c-mint: #3BB8E6;
  --kd-c-energy: #0070F3;
}

/* Bilingual heading (CN smaller, secondary) */
.kd-lineup-h2-cn {
  font-size: clamp(1.2rem, 2.6vw, 2.4rem) !important;
  font-weight: 800 !important;
  color: #444 !important;
  margin-top: 8px !important;
  letter-spacing: -0.005em !important;
}

/* Bilingual lede (CN smaller) */
.kd-lede-block { display: flex; flex-direction: column; gap: 6px; }
.kd-lede-cn { font-size: 13px !important; color: #777 !important; }

/* Card layout */
.kd-flavor {
  position: relative;
  padding: 22px 18px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  font: inherit; color: inherit;
  text-decoration: none;
  display: block;
  overflow: hidden;
}

/* Glow halo (per-flavor radial gradient via CSS variable) */
.kd-flavor[data-flavor="lemon"] { --kd-fc: var(--kd-c-lemon); }
.kd-flavor[data-flavor="watermelon"] { --kd-fc: var(--kd-c-watermelon); }
.kd-flavor[data-flavor="coffee"] { --kd-fc: var(--kd-c-coffee); }
.kd-flavor[data-flavor="mint"] { --kd-fc: var(--kd-c-mint); }
.kd-flavor[data-flavor="energy"] { --kd-fc: var(--kd-c-energy); }

.kd-flavor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(65% 55% at 50% 48%, var(--kd-fc, #e5e5e5) 0%, transparent 68%);
  opacity: 0.10;
  transition: opacity 0.35s;
}
@media (hover: hover) and (pointer: fine) {
  .kd-flavor:hover::after { opacity: 0.22; }
}
.kd-flavor--active::after { opacity: 0.20; }

/* Active state border */
.kd-flavor--active {
  border-color: #dfe6eb !important;
  box-shadow: 0 18px 42px -22px rgba(15,32,44,.16) !important;
}

/* Ensure content above glow */
.kd-flavor-row, .kd-flavor-imgwrap, .kd-flavor-name, .kd-flavor-name-hover, .kd-flavor-cta-mobile {
  position: relative;
  z-index: 1;
}

/* Top row: tag + bilingual badge */
.kd-flavor-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-bottom: 16px; font-size: 11px; color: #999; font-weight: 500;
}
.kd-flavor-tag { font-weight: 500; letter-spacing: 0.05em; }
.kd-flavor-mg {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid #ddd; border-radius: 4px;
  font-size: 11px; font-weight: 600; color: #444; letter-spacing: 0.04em;
}
.kd-mg-cn { color: #888; font-weight: 500; letter-spacing: 0; }

/* Image wrap (kept from v7) */
.kd-flavor-imgwrap {
  position: relative;
  width: 100%;
  height: 280px;
  margin-bottom: 18px;
  overflow: hidden;
}
.kd-img-closed,
.kd-img-open {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transition: opacity .45s cubic-bezier(.16,1,.3,1);
  transform-origin: center;
}
.kd-img-open { opacity: 0; }
.kd-img-closed { transform: scale(1.20); }
.kd-flavor[data-flavor="lemon"] .kd-img-open { transform: scale(1.0); }
.kd-flavor[data-flavor="watermelon"] .kd-img-open,
.kd-flavor[data-flavor="coffee"] .kd-img-open,
.kd-flavor[data-flavor="mint"] .kd-img-open,
.kd-flavor[data-flavor="energy"] .kd-img-open { transform: scale(1.39); }

@media (hover: hover) and (pointer: fine) {
  .kd-flavor:hover .kd-img-closed { opacity: 0; }
  .kd-flavor:hover .kd-img-open { opacity: 1; }
  .kd-flavor:hover { transform: translateY(-4px); border-color: #ccc; }
}

/* Bilingual flavor name */
.kd-flavor-name {
  font-size: 17px;
  font-weight: 600;
  color: #111;
  letter-spacing: -0.005em;
}
.kd-name-cn {
  font-weight: 500;
  color: #666;
  margin-left: 2px;
}

/* Hover/Mobile CTA */
.kd-flavor-name-hover {
  display: none;
  font-size: 17px;
  font-weight: 600;
  color: #00BC4F;
  letter-spacing: -0.005em;
}
.kd-flavor-cta-mobile {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #00BC4F;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  .kd-flavor:hover .kd-flavor-name { display: none; }
  .kd-flavor:hover .kd-flavor-name-hover { display: block; }
}
@media (hover: none), (max-width: 768px) {
  .kd-flavor-name-hover { display: none !important; }
  .kd-flavor-cta-mobile { display: block; }
}
@media (max-width: 900px) {
  .kd-flavor-imgwrap { height: 200px; margin-bottom: 14px; }
  .kd-lineup-h2-cn { font-size: clamp(1rem, 4.5vw, 1.4rem) !important; }
}
/* === End Lineup v8 === */

/* Mobile flavor lineup density tune · 2026-04-29
   Target: Shopify mobile preview felt too tall and poster-like.
   Keep 2-column grid, reduce vertical whitespace, enlarge product presence.
*/
@media (max-width: 768px) {
  .kd-lineup { padding: 48px 0 !important; }
  .kd-lineup-wrap { padding: 0 20px !important; }
  .kd-lineup-head { gap: 14px !important; margin-bottom: 28px !important; }
  .kd-flavors { gap: 12px !important; }

  .kd-flavor {
    padding: 14px 12px 18px !important;
    min-height: 286px;
    display: flex !important;
    flex-direction: column;
  }

  .kd-flavor-row {
    margin-bottom: 6px !important;
    font-size: 10px !important;
  }

  .kd-flavor-mg {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }

  .kd-flavor-imgwrap {
    height: 148px !important;
    margin: 4px 0 10px !important;
    flex: 1 0 auto;
  }

  .kd-img-closed { transform: scale(1.32) !important; }

  .kd-flavor-name {
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .kd-flavor-cta-mobile {
    margin-top: 5px !important;
    font-size: 11px !important;
  }
}