/* ------------------------------------- */
/* All campaign page css */
/* ------------------------------------- */

/* theme color ------------------------- */
:root {
  /* Primary (orange) */
  --cmp-theme-primary-300:  #f7c265;    /* lighter */
  --cmp-theme-primary-500:  #f39800;    /* primary */
  --cmp-theme-primary-700:  #e57b03;    /* darker */

  /* Brand (blue) */
  --cmp-theme-brand-300:    #336899;    /* lighter */
  --cmp-theme-brand-500:    #004280;    /* primary */
  --cmp-theme-brand-700:    #003160;    /* darker */

  /* Text */
  --cmp-text-100: #FFFFFF;     /* lightest */
  --cmp-text-300: #cfd2d5;     /* lighter */
  --cmp-text-700: #434447;     /* darker */
  --cmp-text-900: #0c0c0c;     /* darkest */

  /* Background */
  --cmp-bg-100: #FFFFFF;
  --cmp-bg-300: #E8ECEF;
  --cmp-bg-700: #DFEBF7;
  --cmp-bg-900: #0C0C0C;

  --ds-icon-dropdown-circle: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="%23004280" d="M480-438.77 377.69-541.08q-8.21-8.3-20.53-8.3-12.31 0-21.24 8.3-9.3 8.93-9.11 21.39.19 12.46 9.11 21.38l118.77 118.77q10.85 10.85 25.31 10.85 14.46 0 25.31-10.85l119.38-119.38q8.92-8.93 8.81-21.08-.12-12.15-9.42-21.08-8.93-8.3-21.08-8.42-12.15-.11-21.08 8.81L480-438.77Zm.07 338.77q-78.84 0-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1 100-479.93q0-78.84 29.92-148.21t81.21-120.68q51.29-51.31 120.63-81.25Q401.1-860 479.93-860q78.84 0 148.21 29.92t120.68 81.21q51.31 51.29 81.25 120.63Q860-558.9 860-480.07q0 78.84-29.92 148.21t-81.21 120.68q-51.29 51.31-120.63 81.25Q558.9-100 480.07-100Zm-.07-60q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');

  --ds-icon-arrow-circle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="%23004280" d="m480.38-332.31 145.77-145.77-41.77-41.76-74 74v-182.24H450v182.24l-74-74-41.77 41.76 146.15 145.77ZM480.07-100q-78.84 0-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1 100-479.93q0-78.84 29.92-148.21t81.21-120.68q51.29-51.31 120.63-81.25Q401.1-860 479.93-860q78.84 0 148.21 29.92t120.68 81.21q51.31 51.29 81.25 120.63Q860-558.9 860-480.07q0 78.84-29.92 148.21t-81.21 120.68q-51.29 51.31-120.63 81.25Q558.9-100 480.07-100Zm-.07-60q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');

  --ds-icon-arrow-circle-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="%23004280" d="M480-334.23 625.77-480 480-625.77 438.23-584l74 74H330v60h182.23l-74 74L480-334.23Zm.07 234.23q-78.84 0-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1 100-479.93q0-78.84 29.92-148.21t81.21-120.68q51.29-51.31 120.63-81.25Q401.1-860 479.93-860q78.84 0 148.21 29.92t120.68 81.21q51.31 51.29 81.25 120.63Q860-558.9 860-480.07q0 78.84-29.92 148.21t-81.21 120.68q-51.29 51.31-120.63 81.25Q558.9-100 480.07-100Zm-.07-60q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');

  --ds-icon-chevron-left: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="%23004280" d="m418.15-480 162.93 162.92q8.3 8.31 8.5 20.89.19 12.57-8.5 21.27-8.7 8.69-21.08 8.69-12.38 0-21.08-8.69L359.15-454.69q-5.61-5.62-7.92-11.85-2.31-6.23-2.31-13.46t2.31-13.46q2.31-6.23 7.92-11.85l179.77-179.77q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L418.15-480Z"/></svg>');

  --ds-icon-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="%23004280" d="M517.85-480 354.92-642.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69l179.77 179.77q5.61 5.62 7.92 11.85 2.31 6.23 2.31 13.46t-2.31 13.46q-2.31 6.23-7.92 11.85L397.08-274.92q-8.31 8.3-20.89 8.5-12.57.19-21.27-8.5-8.69-8.7-8.69-21.08 0-12.38 8.69-21.08L517.85-480Z"/></svg>');
  
}
/* blue theme color ------------------------- */
.cmp-theme-blue {
  --cmp-theme-primary-300:  #66b3ff;    /* lighter */
  --cmp-theme-primary-500:  #006EFF;    /* primary */
  --cmp-theme-primary-700:  #0056cc;    /* darker */
  --cmp-theme-bg-dark: #000540;         /* very dark blue */
  --cmp-theme-bg-light: #e6f2ff;        /* light blue */
}
/* green theme color ------------------------- */
.cmp-theme-green {
  --cmp-theme-primary-300:  #7dd87f;    /* lighter */
  --cmp-theme-primary-500:  #28a745;    /* primary */
  --cmp-theme-primary-700:  #1e7e34;    /* darker */
  --cmp-theme-bg-dark: #1a4d1a;         /* dark green with saturation */
  --cmp-theme-bg-light: #e8f5e9;        /* light green */
}
/* purple theme color ------------------------- */
.cmp-theme-purple {
  --cmp-theme-primary-300:  #b794f6;    /* lighter */
  --cmp-theme-primary-500:  #8c52f0;    /* primary */
  --cmp-theme-primary-700:  #5b21b6;    /* darker */
  --cmp-theme-bg-dark: #2d1a4d;         /* dark purple with saturation */
  --cmp-theme-bg-light: #f3e5f5;        /* light purple */
}
/* teal theme color ------------------------- */
.cmp-theme-teal {
  --cmp-theme-primary-300:  #5eead4;    /* lighter */
  --cmp-theme-primary-500:  #14b8a6;    /* primary */
  --cmp-theme-primary-700:  #0f766e;    /* darker */
  --cmp-theme-bg-dark: #1a4d4d;         /* dark teal with saturation */
  --cmp-theme-bg-light: #e0f2f1;        /* light teal */
}
/* yellow theme color ------------------------- */
.cmp-theme-yellow {
  --cmp-theme-primary-300:  #fcd34d;    /* lighter */
  --cmp-theme-primary-500:  #f59e0b;    /* primary */
  --cmp-theme-primary-700:  #d97706;    /* darker */
  --cmp-theme-bg-dark: #4d2600;         /* dark brown with saturation */
  --cmp-theme-bg-light: #fff8e1;        /* light yellow */
}

/* cyan theme ------------------------- */
.cmp-theme-cyan {
  --cmp-theme-primary-300:  #00f5ff;    /* lighter */
  --cmp-theme-primary-500:  #00d9ff;    /* primary */
  --cmp-theme-primary-700:  #00a8cc;    /* darker */
  --cmp-theme-bg-dark: #004d5c;         /* dark cyan with saturation */
  --cmp-theme-bg-light: #e0f7fa;        /* light cyan */
}

/* indigo theme ------------------------- */
.cmp-theme-indigo {
  --cmp-theme-primary-300:  #4cc9f0;    /* lighter */
  --cmp-theme-primary-500:  #4361ee;    /* primary */
  --cmp-theme-primary-700:  #3a0ca3;    /* darker */
  --cmp-theme-bg-dark: #1a1a4d;         /* dark blue with saturation */
  --cmp-theme-bg-light: #e8eaf6;        /* light indigo */
}

/* gradient purple-pink -------------------- */
.cmp-theme-gradient-purple {
  --cmp-theme-primary-300:  #a855ff;
  --cmp-theme-primary-500:  #7c3aed;
  --cmp-theme-primary-700:  #3d7cff;
  --cmp-theme-bg-dark: #51367f;         
  --cmp-theme-bg-light: #e3d8ff;        
  --cmp-theme-gradient: linear-gradient(135deg, #3d7cff 0%, #a855ff 50%, #915eff 70%, #3d7cff 100%);
}

/* gradient blue-cyan ---------------------- */
.cmp-theme-gradient-blue {
  --cmp-theme-primary-300:  #00d1da;
  --cmp-theme-primary-500:  #4facfe;
  --cmp-theme-primary-700:  #0469eb;
  --cmp-theme-bg-dark: #3e6b91;         
  --cmp-theme-bg-light: #e0f7fa;        
  --cmp-theme-gradient: linear-gradient(135deg, #0093e9 0%, #00f2fe 100%);
}

/* gradient sunset ----------------------- */
.cmp-theme-gradient-sunset {
  --cmp-theme-primary-300:  #f5576c;
  --cmp-theme-primary-500:  #e65996;
  --cmp-theme-primary-700:  #c471ed;
  --cmp-theme-bg-dark: #7b3758;         /* dark pink with saturation */
  --cmp-theme-bg-light: #fce4ec;        /* light pink */
  --cmp-theme-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* gradient neon cyan ---------------- */
.cmp-theme-gradient-neon {
  --cmp-theme-primary-300:  #00f5ff;
  --cmp-theme-primary-500:  #3ba8f4;
  --cmp-theme-primary-700:  #9d4edd;
  --cmp-theme-bg-dark: #1a1a4d;         
  --cmp-theme-bg-light: #e1f5fe;        
  --cmp-theme-gradient: linear-gradient(135deg, #00d9ff 0%, #9d4edd 100%);
}

/* gradient cyber ---------------- */
.cmp-theme-gradient-cyber {
  --cmp-theme-primary-300:  #4cc9f0;
  --cmp-theme-primary-500:  #365eff;
  --cmp-theme-primary-700:  #1449ec;
  --cmp-theme-bg-dark: #1a1a4d;         
  --cmp-theme-bg-light: #ede7f6;        
  --cmp-theme-gradient: linear-gradient(135deg, #1449ec 0%, #2f8df5 30%, #3fb7fc 60%, #7c71ff 100%);
}

/* Common classes ------------------------- */
.cmp-full-container{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}
.cmp-text-light {
  color: var(--cmp-text-100);
}
.cmp-text-dark {
  color: var(--cmp-text-900);
}
.cmp-container{
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 36px 64px;
}
.cmp-title-h2{
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 12px;
}
.cmp-title-h2-underline{
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 16px;
}
.cmp-title-h2-underline::after{
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background-color: var(--cmp-theme-primary-500);
  margin: 12px 0;
}
.cmp-subtitle-p{
  font-size: 24px;
  font-weight: 400;
  color: var(--cmp-theme-primary-500);
  margin-bottom: 8px;
  line-height: 1.1;
}
.cmp-description-p{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Theme color mask for icons */
.cmp-feature-icon.theme-color {
  background-color: var(--cmp-theme-primary-500);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ----------------------------------------- */
/* Gradient support */
/* ----------------------------------------- */

/* Apply gradient to backgrounds when gradient theme is active */
[class*="cmp-theme-gradient"] .cmp-title-h2-underline::after {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
}

/* Gradient buttons */
[class*="cmp-theme-gradient"] .cmp-hero-banner-btn,
[class*="cmp-theme-gradient"] .product-link-btn,
[class*="cmp-theme-gradient"] .cmp-product-item-link,
[class*="cmp-theme-gradient"] .cmp-series-product-content .cmp-series-product-cta {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
}

/* Gradient hover states */
[class*="cmp-theme-gradient"] .cmp-hero-banner-btn:hover,
[class*="cmp-theme-gradient"] .product-link-btn:hover,
[class*="cmp-theme-gradient"] .cmp-product-item-link:hover {
  background: var(--cmp-theme-primary-500);
}

/* Gradient for feature carousel hover */
[class*="cmp-theme-gradient"] .cmp-feature-item:hover {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-700));
}

/* Gradient for product anchors hover */
[class*="cmp-theme-gradient"] .cmp-product-item:hover .cmp-product-item-action {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
}

/* Gradient for series card background */
[class*="cmp-theme-gradient"] .cmp-series-card {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
  background-size: cover;
  background-position: center;
}

/* Gradient for FAQ icon */
[class*="cmp-theme-gradient"] .cmp-faq-icon {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
}

/* Gradient utility class - can be applied manually */
.cmp-gradient-bg {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
}

/* ----------------------------------------- */
/* Additional gradient applications -------- */
/* ----------------------------------------- */

/* Gradient for concept intro background (half theme) */
[class*="cmp-theme-gradient"].cmp-concept-intro-theme-half-background .cmp-concept-intro-title-col {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
}

/* Gradient for product grid featured items border */
[class*="cmp-theme-gradient"] .cmp-product-item.featured {
  border: 2px solid transparent;
  background-image: 
    linear-gradient(white, white),
    var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Apply gradient to hero banner titles */
[class*="cmp-theme-gradient"] .cmp-hero-banner-wrapper h2 {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Apply gradient to underlined titles */
[class*="cmp-theme-gradient"] .cmp-title-h2-underline {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Apply gradient to subtitles */
[class*="cmp-theme-gradient"] .cmp-subtitle-p {
  background: var(--cmp-theme-gradient, var(--cmp-theme-primary-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 992px) {
  .cmp-container{
    padding: 36px;
  }
  .cmp-title-h2,
  .cmp-title-h2-underline{
    font-size: 32px;
  }
  .cmp-title-h2-underline::after{
    margin: 12px auto;
  }
  .cmp-description-p{
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-container{
    padding: 24px;
  }
}

/* campaign hero banner ---------------- */
.cmp-hero-banner {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 64px;
  gap: 24px;
}
.hero-bn-full-bg {
  background-image: var(--desktop-bg, none);
}
.hero-bn-bg {
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  width: 100%;
  background-image: var(--desktop-bg, none);
}
.cmp-hero-banner-wrapper h2{
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 12px;
}
.cmp-hero-banner-wrapper h3{
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 12px;
}
.cmp-hero-banner-wrapper p,
.cmp-hero-banner-wrapper span,
.cmp-hero-banner-wrapper a{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.cmp-hero-banner-wrapper p{
  margin-bottom: 8px;
}
.cmp-hero-banner-wrapper span{
  margin-bottom: 8px;
  color: var(--cmp-theme-primary-500);
}
.cmp-hero-banner-wrapper a{
  margin: 8px 0;
  padding: 8px 16px;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}
.cmp-hero-banner-btn{
  background-color: var(--cmp-theme-primary-500);
  color: var(--cmp-text-100);
}
@media (hover:hover) {
  .cmp-hero-banner-btn:hover{
    background-color: var(--cmp-theme-primary-300);
  }
}
.cmp-hero-banner-image {
  width: 100%;
  max-width: 480px;
}
.cmp-hero-banner-image img{
  width: 100%;
  max-width: 480px;
}
@media (max-width: 1200px) and (min-width: 992px) {
  .cmp-hero-banner-image {
    width: 100%;
    max-width: 400px;
  }
}
@media screen and (max-width: 992px) {
  .hero-bn-full-bg {
    background-image: var(--mobile-bg, var(--desktop-bg, none));
  }
  .hero-bn-bg {
    background-image: var(--mobile-bg, var(--desktop-bg, none));
  }
  .cmp-hero-banner {
    flex-direction: column;
    padding: 36px;
    gap: 24px;
    height: auto;
  }

  .cmp-hero-banner-wrapper{
    text-align: center;
    width: 90%;
  }
  .cmp-hero-banner-wrapper h2{
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 8px;
  }
  .cmp-hero-banner-wrapper h3{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .cmp-hero-banner-wrapper p{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .cmp-hero-banner-image{
    order: -1;
  }
}
/* ------------------------------------- */
/* campaign feature card --------------- */
.cmp-feature-card{
  /* padding: 0 64px; */
}
.feature-card-full-bg,
.feature-card-bg {
  background-image: var(--feature-card-bg);
}
.cmp-feature-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.cmp-feature-card-title {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  color: var(--cmp-text-100);
}
.cmp-feature-card-item{
  color: var(--cmp-text-900);
}

/* Desktop layout: side by side */
@media screen and (min-width: 1200px) {
  .cmp-feature-card-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .cmp-feature-card-title {
    flex: 0 0 400px;
    text-align: left;
    margin: 0;
    max-width: none;
  }
  .cmp-feature-card-items {
    flex: 1;
    background-color: var(--cmp-bg-100);
    color: var(--cmp-text-900);
  }
}

/* Feature Items Grid Layout */
.cmp-feature-card-items {
  display: grid;
  background-color: var(--cmp-bg-100);
  backdrop-filter: blur(10px);
}

/* Grid layouts based on item count */
/* Desktop: 4 items = 2x2, 5 items = 3-2, 6 items = 3x2 */
.cmp-feature-grid-1 {
  grid-template-columns: 1fr;
}
.cmp-feature-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}
.cmp-feature-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}
.cmp-feature-grid-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.cmp-feature-grid-5 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.cmp-feature-grid-5 .cmp-feature-card-item:nth-child(1) {
  grid-column: 1 / 3;
  border-right: 1px solid var(--cmp-bg-300);
}
.cmp-feature-grid-5 .cmp-feature-card-item:nth-child(2) {
  grid-column: 3 / 5;
  border-right: 1px solid var(--cmp-bg-300);
}
.cmp-feature-grid-5 .cmp-feature-card-item:nth-child(3) {
  grid-column: 5 / 7;
  border: 1px solid var(--cmp-bg-300);
}
.cmp-feature-grid-5 .cmp-feature-card-item:nth-child(4) {
  grid-column: 1 / 4;
  background-color: var(--cmp-bg-300);
  border-right: 1px solid var(--cmp-bg-100);
}
.cmp-feature-grid-5 .cmp-feature-card-item:nth-child(5) {
  grid-column: 4 / 7;
  background-color: var(--cmp-bg-300);
}
.cmp-feature-grid-6 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* Feature Item Styling */
.cmp-feature-card-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  justify-content: flex-start;
  padding: 24px 36px;
  background-color: var(--cmp-bg-100);
}
.cmp-feature-grid-1 .cmp-feature-card-item:nth-child(1) {
  background-color: var(--cmp-bg-300);
}
.cmp-feature-grid-2 .cmp-feature-card-item:nth-child(1) {
  background-color: var(--cmp-bg-300);
}
.cmp-feature-grid-3 .cmp-feature-card-item:nth-child(1),
.cmp-feature-grid-3 .cmp-feature-card-item:nth-child(3) {
  background-color: var(--cmp-bg-300);
}
.cmp-feature-grid-4 .cmp-feature-card-item:nth-child(1),
.cmp-feature-grid-4 .cmp-feature-card-item:nth-child(4){
  background-color: var(--cmp-bg-300);
}
.cmp-feature-grid-6 .cmp-feature-card-item:nth-child(1),
.cmp-feature-grid-6 .cmp-feature-card-item:nth-child(3),
.cmp-feature-grid-6 .cmp-feature-card-item:nth-child(5){
  background-color: var(--cmp-bg-300);
}

.cmp-feature-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.cmp-feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cmp-feature-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cmp-text-900);
  text-align: left;
}
.cmp-feature-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--cmp-text-900);
  text-align: left;
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
  .cmp-feature-card {
    padding: 36px 64px;
  }
  .cmp-feature-card-title {
    text-align: left;
    margin: 0;
  }
}
@media screen and (max-width: 992px) {
  .cmp-feature-card {
    padding: 36px;
  }
  .cmp-feature-card-title {
    text-align: center;
    margin: auto;
  }
  .cmp-feature-card-wrapper {
    gap: 32px;
  }
  .cmp-feature-card-items {
    padding: 0;
    gap: 0;
  }
  
  /* Mobile: Always 2 columns */
  .cmp-feature-grid-4,
  .cmp-feature-grid-6 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  
  /* Mobile: 5 items layout 1-2-2 */
  .cmp-feature-grid-5 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .cmp-feature-grid-5 .cmp-feature-card-item:nth-child(1) {
    grid-column: 1 / 3;
    border-right: none;
    background-color: var(--cmp-bg-300);
  }
  .cmp-feature-grid-5 .cmp-feature-card-item:nth-child(2) {
    grid-column: auto;
    border-right: 1px solid var(--cmp-bg-300);
    background-color: var(--cmp-bg-100);
  }
  .cmp-feature-grid-5 .cmp-feature-card-item:nth-child(3) {
    grid-column: auto;
    border: none;
    background-color: var(--cmp-bg-100);
  }
  .cmp-feature-grid-5 .cmp-feature-card-item:nth-child(4) {
    grid-column: auto;
    background-color: var(--cmp-bg-300);
  }
  .cmp-feature-grid-5 .cmp-feature-card-item:nth-child(5) {
    grid-column: auto;
    border: none;
    background-color: var(--cmp-bg-300);
  }
  /* Mobile: 6 items alternating background */
  .cmp-feature-grid-6 .cmp-feature-card-item:nth-child(1),
  .cmp-feature-grid-6 .cmp-feature-card-item:nth-child(4),
  .cmp-feature-grid-6 .cmp-feature-card-item:nth-child(5){
    background-color: var(--cmp-bg-300);
  }
  .cmp-feature-grid-6 .cmp-feature-card-item:nth-child(2),
  .cmp-feature-grid-6 .cmp-feature-card-item:nth-child(3),
  .cmp-feature-grid-6 .cmp-feature-card-item:nth-child(6){
    background-color: var(--cmp-bg-100);
  }
}
@media screen and (max-width: 640px) {
  .cmp-feature-card {
    padding: 24px;
  } 
  .cmp-feature-card-item{
    padding: 24px;
  }
}

/* ------------------------------------- */
/* campaign feature gallery ------------ */
.feature-gallery-full-bg,
.feature-gallery-bg {
  background-image: var(--feature-gallery-bg);
}
.cmp-feature-gallery {
  padding: 36px 64px;
}
.cmp-feature-gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cmp-feature-gallery-title {
  text-align: left;
  max-width: 1000px;
  margin: 0;
}
.cmp-feature-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.cmp-gallery-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 375px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  transition-duration: 1s;
}
.gallery-item-content {
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  width: 100%;
  padding: 24px;
  color: var(--cmp-text-100);
}
.gallery-item-content h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  transition-duration: 0.5s;
}

/* hover animation that the p is below the h3 */
.gallery-item-content {
  display: grid;
  grid-template-rows: auto 0fr;       
  transition: grid-template-rows 0.45s cubic-bezier(.25,1,.5,1);
}
.gallery-item-content p {
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
.gallery-item-content p > span {
  display: block;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(.25,1,.5,1),
              opacity 0.45s cubic-bezier(.25,1,.5,1);
}
@media (hover: hover) {
  .cmp-gallery-item:hover .gallery-item-content {
    grid-template-rows: auto 1fr;       
  }
  .cmp-gallery-item:hover .gallery-item-content p > span {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Responsive Design for Feature Gallery */
/* 中尺寸：2x2 佈局 */
@media screen and (max-width: 1200px) {
  .cmp-feature-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 992px) {
  .cmp-feature-gallery-title {
    text-align: center;
  }
  .cmp-feature-gallery {
    padding: 36px;
  }
  .cmp-feature-gallery-wrapper {
    gap: 32px;
  }
  .cmp-feature-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cmp-gallery-item {
    height: 300px;
  }
}
@media screen and (max-width: 640px) {
  .cmp-feature-gallery {
    padding: 24px;
  }
  .cmp-feature-gallery-wrapper {
    gap: 24px;
  }
  .cmp-feature-gallery-grid {
    grid-template-columns: 1fr;
  }
  .cmp-gallery-item {
    height: 300px;
  }
  .gallery-item-content {
    padding: 48px 24px 24px;
    grid-template-rows: auto 1fr;
  }
  .gallery-item-content h3 {
    font-size: 24px;
  }
  .gallery-item-content p {
    font-size: 14px;
  }
  .gallery-item-content p > span {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ------------------------------------- */
/* campaign product grid --------------- */
.product-grid-full-bg,
.product-grid-bg {
  background-image: var(--product-grid-bg);
}
.cmp-product-grid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.cmp-product-grid-title {
  text-align: left;
  max-width: 1000px;
  margin: 0;
}

/* Product Grid Layout */
.cmp-product-grid-items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
}
.cmp-product-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.cmp-product-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.cmp-product-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Product Item Styling */
.cmp-product-item {
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
}
.cmp-product-item.featured {
  border: 2px solid var(--cmp-theme-primary-500);
}
.cmp-product-item-content img{
  width: 100%;
  margin-bottom: 16px;
}
/* Product Image */
.product-image {
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--cmp-bg-300);
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.product-image a:hover img {
  transform: scale(1.05);
}

/* Product Content */
.product-content {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
}
.product-content h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.product-content h3 a:hover {
  color: var(--cmp-theme-primary-500);
}
.product-code {
  font-size: 14px;
  color: var(--cmp-text-700);
  font-weight: 500;
}
.product-description {
  font-size: 14px;
  line-height: 1.4;
  color: var(--cmp-text-700);
  flex: 1;
}
.product-price {
  font-size: 20px;
  font-weight: 600;
  color: var(--cmp-theme-primary-500);
  margin: 8px 0;
}
.product-link-btn {
  background-color: var(--cmp-theme-primary-500);
  color: var(--cmp-text-100);
  padding: 10px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.3s ease;
  margin-top: auto;
}
.cmp-product-item-link{
  color: var(--cmp-text-100);
  text-decoration: none;
  transition: color 0.3s ease;
  background: var(--cmp-theme-primary-500);
  padding: 10px 16px;
  border-radius: 4px;
  display: inline-block;
  margin-top: auto;
  width: 100%;
  text-align: center;
}
@media (hover:hover) {
  .product-link-btn:hover {
    background-color: var(--cmp-theme-primary-300);
  }
  .cmp-product-item-link:hover {
    background-color: var(--cmp-theme-primary-300);
  }
}

/* Responsive Design for Product Grid */
@media screen and (max-width: 1200px) {
  .cmp-product-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 992px) {
  .cmp-product-grid {
    padding: 36px;
  }
  .cmp-product-grid-wrapper {
    gap: 32px;
  }
  .cmp-product-grid-title{
    text-align: center;
  }
  .cmp-product-grid-items {
    gap: 24px;
    grid-template-columns: 1fr 1fr;
  }
  
  .cmp-product-grid-3,
  .cmp-product-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 640px) {
  .cmp-product-grid {
    padding: 24px;
  }
  .cmp-product-grid-wrapper {
    gap: 24px;
  }
  .cmp-product-grid-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .cmp-product-grid-title{
    text-align: center;
  }
  .cmp-product-grid-2,
  .cmp-product-grid-3,
  .cmp-product-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cmp-product-item {
    padding: 8px;
  }
  .cmp-product-item-content h3{
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.3;
  }
  .cmp-product-item-content p{
    font-size: 14px;
    line-height: 1.3;
  } 
  .product-content {
    padding: 20px;
  }
}
/* ------------------------------------- */
/* campaign product anchors ------------ */
.product-anchors-full-bg,
.product-anchors-bg {
  background-image: var(--product-anchors-bg);
}
.cmp-product-anchors-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.cmp-product-anchors-title {
  text-align: left;
  max-width: 1000px;
  margin: 0;
}
/* Product Anchors Layout */
.cmp-product-anchors-items {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
  grid-template-rows: auto auto auto;
  gap: 24px;
}
.cmp-product-item-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
}
.cmp-product-anchors-items .cmp-product-item{
  padding: 0;
  cursor: pointer;
}
.cmp-product-item-image{
  z-index: 2;
}
.cmp-product-item-image img {
  width: 100%;
  height: auto;
  margin: 0;
  transition: transform 0.3s ease;
  max-width: 300px;
}
.cmp-product-item-action{
  background-color: var(--cmp-bg-300);
  transition: background-color 0.3s ease;
  position: relative;
  margin-top: -88px;
  padding: 100px 16px 16px 16px;
}
.cmp-product-item-action h3{
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
  color: var(--cmp-text-900);
}
.cmp-product-item-action p{
  font-size: 14px;
  line-height: 1.4;
  flex: 1;
  color: var(--cmp-text-900);
  margin-bottom: 8px;
}
.cmp-product-item-action a{
  color: var(--cmp-text-100);
  text-decoration: none;
  transition: background-color 0.3s ease;
  background: none;
  padding: 10px 16px;
  border-radius: 4px;
  display: inline-block;
  margin-top: auto;
  width: 100%;
  text-align: center;
  font-weight: 500;
}
.cmp-icon-arrow-circle-down{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--cmp-text-900);
  -webkit-mask-image: var(--ds-icon-arrow-circle-down);
  mask-image: var(--ds-icon-arrow-circle-down);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin: auto;
}

@media (hover:hover) {
  .cmp-product-anchors .cmp-product-item-link:hover {
    background-color:none;
  }
  .cmp-product-item:hover .cmp-product-item-action {
    background-color: var(--cmp-theme-primary-500);
  }
  .cmp-product-item:hover .cmp-product-item-action h3 {
    color: var(--cmp-text-100);
  }
  .cmp-product-item:hover .cmp-product-item-action p {
    color: var(--cmp-text-100);
  }
  .cmp-product-item:hover .cmp-icon-arrow-circle-down {
    background-color: var(--cmp-text-100);
  }
}

/* Responsive Design for Product Anchors */
@media screen and (max-width: 1200px) {
  /* On medium screens, cap at 3 columns for better balance */
  .cmp-product-anchors-items {
    grid-template-columns: repeat(min(var(--grid-cols, 4), 3), 1fr);
  }
}
@media screen and (max-width: 992px) {
  .cmp-product-anchors {
    padding: 36px;
  }
  .cmp-product-anchors-wrapper {
    gap: 32px;
  }
  .cmp-product-anchors-title {
    text-align: center;
  }
  /* On tablet, always use 2 columns */
  .cmp-product-anchors-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media screen and (max-width: 640px) {
  .cmp-product-anchors {
    padding: 24px;
  }
  .cmp-product-anchors-wrapper {
    gap: 24px;
  }
  /* On mobile, always use 2 columns */
  .cmp-product-anchors-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .cmp-product-anchors-title {
    text-align: center;
  }
  .cmp-product-anchors .cmp-product-item {
    padding: 0;
  }
  .cmp-product-anchors .cmp-product-item-content h3 {
    font-size: 16px;
  }
  .cmp-product-anchors .cmp-product-item-content p {
    font-size: 13px;
  }
}
/* ------------------------------------- */
/* campaign product series carousel ---- */
.cmp-product-series-carousel-wrapper {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}
.cmp-product-series-carousel-left {
  flex: 0 0 400px;
  text-align: left;
}
.cmp-product-series-carousel-right {
  flex: 1;
  position: relative;
  width: 0;
}
/* Product carousel container with relative positioning */
.cmp-product-carousel-container {
  position: relative;
  width: 100%;
}
/* Swiper navigation buttons - positioned on left and right sides */
.cmp-product-carousel-container .swiper-button-prev,
.cmp-product-carousel-container .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 24px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin: auto;
  border: none;
}
.cmp-product-carousel-container .swiper-button-prev.swiper-button-disabled,
.cmp-product-carousel-container .swiper-button-next.swiper-button-disabled {
  background-color: transparent;
  opacity: 0;
}
.cmp-product-carousel-container .swiper-button-prev {
  background-image: var(--ds-icon-chevron-left);
}
.cmp-product-carousel-container .swiper-button-next {
  background-image: var(--ds-icon-chevron-right);
}
.cmp-product-carousel-container .swiper-button-prev {
  left: 0;
}
.cmp-product-carousel-container .swiper-button-next {
  right: 0;
}
/* Legacy selector for backward compatibility */
.cmp-product-series-carousel-right .swiper-button-prev,
.cmp-product-series-carousel-right .swiper-button-next {
  color: var(--cmp-theme-primary-500);
}
.cmp-product-carousel-swiper {
  overflow: hidden;
}
.cmp-product-carousel-item {
  background: var(--cmp-bg-300);
  text-align: center;
  padding: 24px;
  height: auto;
  transition: background-color 0.3s ease;
}
a.cmp-product-carousel-item {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cmp-product-carousel-image {
  margin-bottom: 16px;
}
.cmp-product-carousel-image img {
  width: 100%;
  height: auto;
  max-width: 200px;
}
.cmp-product-carousel-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--cmp-text-900);
  text-decoration: none;
}
.cmp-product-carousel-content p {
  font-size: 14px;
  line-height: 1.4;
  color: var(--cmp-text-700);
  margin: 0;
}
.cmp-product-carousel-cta{
  margin: 16px 0 8px;
  color: var(--cmp-theme-primary-500);
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  display: flex;
  justify-content: center;
}
.cmp-icon-arrow-circle-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--cmp-theme-primary-500);
  -webkit-mask-image: var(--ds-icon-arrow-circle-right);
  mask-image: var(--ds-icon-arrow-circle-right);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Pagination dots styling */
.cmp-product-carousel-swiper .swiper-pagination {
  position: relative;
  margin-top: 24px;
  text-align: center;
  z-index: 2;
}

.cmp-product-carousel-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(--cmp-bg-300);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.cmp-product-carousel-swiper .swiper-pagination-bullet-active {
  background: var(--cmp-theme-primary-500);
  opacity: 1;
}
@media (hover:hover) {
  a.cmp-product-carousel-item:hover {
    background-color: var(--cmp-theme-bg-dark);
  }
  a.cmp-product-carousel-item:hover h3,
  a.cmp-product-carousel-item:hover p {
    color: var(--cmp-text-100);
  }
  a.cmp-product-carousel-item:hover .cmp-product-carousel-cta {
    color: var(--cmp-text-100);
  }
  a.cmp-product-carousel-item:hover .cmp-icon-arrow-circle-right {
    background-color: var(--cmp-text-100);
  }
}

/* Responsive Design for Product Series Carousel */
@media screen and (max-width: 992px) {
  .cmp-product-series-carousel-wrapper {
    flex-direction: column;
    gap: 48px;
  }
  .cmp-product-series-carousel-left {
    flex: 1;
    text-align: center;
  }
}
@media screen and (max-width: 640px) {
  .cmp-product-series-carousel-wrapper {
    gap: 32px;
  }
  .cmp-product-carousel-item {
    padding: 16px;
  }
  
  /* Mobile only: Change from carousel to grid */
  .cmp-product-carousel-container {
    padding: 0;
  }
  
  /* Hide navigation buttons on mobile */
  .cmp-product-carousel-container .swiper-button-prev,
  .cmp-product-carousel-container .swiper-button-next {
    display: none !important;
  }
  
  /* Convert swiper to grid layout */
  .cmp-product-carousel-swiper {
    overflow: visible;
  }
  
  .cmp-product-carousel-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    transform: none !important;
    flex-wrap: unset;
  }
  
  .cmp-product-carousel-swiper .swiper-slide {
    width: auto !important;
    margin: 0 !important;
  }
}
/* ------------------------------------- */
/* campaign FAQ list ------------------- */
.cmp-faq-list-wrapper {
  max-width: 900px;
  margin: 0 auto;
}
.cmp-faq-list-header {
  text-align: center;
  margin-bottom: 50px;
}
.cmp-faq-list-header .cmp-title-h2-underline::after{
  margin: 12px auto;
}
.cmp-faq-list-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cmp-faq-item {
  position: relative;
  border-bottom: 1px solid var(--cmp-theme-primary-500);
  padding: 24px 0;
  background: transparent;
}
.cmp-faq-item:last-child {
  border-bottom: none;
}
.cmp-faq-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cmp-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  width: 100%;
}
.cmp-faq-question h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  color: var(--cmp-theme-primary-500);
  padding-right: 20px;
}
.cmp-faq-question h3::before {
  content: 'Q: ';
  color: var(--cmp-theme-primary-500);
  font-weight: 700;
}
.cmp-faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--cmp-theme-primary-500);
  -webkit-mask-image: var(--ds-icon-dropdown-circle);
  mask-image: var(--ds-icon-dropdown-circle);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.cmp-faq-toggle:checked + .cmp-faq-question .cmp-faq-icon {
  transform: rotate(180deg);
}
.cmp-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.cmp-faq-toggle:checked ~ .cmp-faq-answer {
  grid-template-rows: 1fr;
}
.cmp-faq-answer-content {
  min-height: 0;
  padding: 0 64px 0 24px;
  line-height: 1.5;
  color: inherit;
  font-size: 15px;
  pointer-events: auto;
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cmp-faq-toggle:checked ~ .cmp-faq-answer .cmp-faq-answer-content {
  padding: 16px 64px 0 24px;
}

/* Responsive Design for FAQ */
@media screen and (max-width: 992px) {
  .cmp-faq-list-header .cmp-title-h2-underline {
    font-size: 28px;
  }
  .cmp-faq-question h3 {
    font-size: 16px;
  }
  .cmp-faq-icon {
    width: 32px;
    height: 32px;
  }
  .cmp-faq-answer-content {
    font-size: 14px;
    line-height: 1.2;
  }
  .cmp-faq-toggle:checked ~ .cmp-faq-answer .cmp-faq-answer-content {
    padding: 8px 0px 8px 8px;
  }
}

/* ------------------------------------- */
/* campaign feature list --------------- */
.feature-list-full-bg,
.feature-list-bg {
  background-image: var(--feature-list-bg);
}
.cmp-feature-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cmp-feature-list-title {
  text-align: left;
  max-width: 1000px;
  margin: 0;
  color: var(--cmp-text-100);
}

.feature-list-content h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 4px;
}
.feature-list-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* Feature List Items - Grid Layout */
.cmp-feature-list-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  color: var(--cmp-text-900);
}
/* Force 2 columns when items are divisible by 2 but not by 3 */
.cmp-even-not-triple {
  grid-template-columns: repeat(2, 1fr);
}

/* Feature List Item Styling */
.cmp-feature-list-item {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 0;
  gap: 16px;
}


.feature-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feature-list-content{
  text-align: left;
}

/* Responsive Design for Feature List */
@media screen and (max-width: 1200px) {
  .cmp-product-series-carousel-wrapper{
    flex-direction: column;
    gap: 24px;
  }
  .cmp-product-series-carousel-left{
    flex: 1;
    width: 100%;
  }
  .cmp-product-series-carousel-right{
    width: 100%;
  }
  .cmp-product-carousel-container{
    padding: 0;
  }
  .cmp-feature-list {
    padding: 36px 64px;
  }
  .cmp-feature-list-item {
    padding: 16px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .feature-list-content{
    text-align: center;
  }
}

@media screen and (max-width: 992px) {
  .cmp-feature-list {
    padding: 36px;
  }
  .cmp-feature-list-wrapper {
    gap: 32px;
  }
  .cmp-feature-list-title{
    text-align: center;
  }
  /* Grid: always 2 columns on tablet */
  .cmp-feature-list-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 640px) {
  .cmp-feature-list {
    padding: 24px;
  }
  .cmp-feature-list-item {
    padding: 8px;
    flex-direction: column;
    gap: 12px;
  }
  .feature-list-content h3{
    font-size: 16px;
    line-height: 1.2;
  }
  .feature-list-content p{
    font-size: 14px;
  }
}
/* ------------------------------------- */
/* campaign feature section ------------ */
.feature-section-full-bg,
.feature-section-bg {
  background-image: var(--feature-section-bg);
}
.cmp-feature-section {
  padding: 36px 64px;
}
.cmp-feature-section-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* When items don't have background: increase gap between title and items */
.cmp-feature-section-wrapper:not(:has(.cmp-feature-section-item-bg)) {
  gap: 36px;
}

/* Horizontal Layout: Title and Items Side by Side */
.cmp-feature-section-wrapper.cmp-feature-section-horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: 64px;
}
.cmp-feature-section-wrapper.cmp-feature-section-horizontal .cmp-feature-section-title {
  flex: 0 0 400px;
  max-width: 400px;
}
.cmp-feature-section-wrapper.cmp-feature-section-horizontal .cmp-feature-section-items {
  flex: 1;
  width: 100%;
}
.cmp-feature-section-title {
  text-align: left;
  margin: 0;
}
/* When only one description exists, limit the width */
.cmp-feature-section-title.single-description {
  max-width: 1000px;
}
.cmp-descriptions-wrapper{
  display: flex;
  text-align: left;
  gap: 36px;
}
.cmp-feature-section-horizontal .cmp-descriptions-wrapper{
  flex-direction: column;
  gap: 24px;
}
/* Feature Section Items - Grid Layout */
.cmp-feature-section-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  color: var(--cmp-text-900);
}
/* When items have background: reduce gap */
.cmp-feature-section-items:has(.cmp-feature-section-item-bg) {
  gap: 24px;
}
/* Force 2 columns when items are divisible by 2 but not by 3 */
.cmp-feature-section-items.cmp-even-not-triple {
  grid-template-columns: repeat(2, 1fr);
}
.cmp-feature-section-items.cmp-four-multiple {
  grid-template-columns: repeat(4, 1fr);
}

/* Feature Section Item Styling */
.cmp-feature-section-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0;
  background-color: transparent;
}

/* When itemsBackground is enabled: use theme color */
.cmp-feature-section-item.cmp-feature-section-item-bg {
  background-color: var(--cmp-theme-bg-dark);
  padding: 24px;
}

.cmp-feature-section-items.has-bg-image .cmp-feature-section-item.cmp-feature-section-item-bg {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 24px;
}

.feature-section-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.feature-section-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--cmp-theme-primary-500);
  text-align: left;
  line-height: 1.5;
}
/* When item has background: force white text */
.cmp-feature-section-item-bg .feature-section-content h3 {
  color: var(--cmp-text-100);
}
.feature-section-content p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: inherit; /* Inherit from parent (cmp-text-light or cmp-text-dark) */
  text-align: left;
  margin-bottom: 0;
}
/* When item has background: force white text for p as well */
.cmp-feature-section-item-bg .feature-section-content p {
  color: var(--cmp-text-100);
}

/* Responsive Design for Feature Section */
@media screen and (max-width: 1200px) {
  .cmp-feature-section {
    padding: 36px 64px;
  }
  /* Reset horizontal layout to vertical on smaller screens */
  .cmp-feature-section-wrapper.cmp-feature-section-horizontal {
    flex-direction: column;
    gap: 24px;
  }
  .cmp-feature-section-wrapper.cmp-feature-section-horizontal .cmp-feature-section-title {
    flex: none;
    max-width: 1000px;
  }
}

@media screen and (max-width: 992px) {
  .cmp-feature-section {
    padding: 36px;
  }
  .cmp-feature-section-wrapper {
    gap: 32px;
  }
  .cmp-feature-section-title {
    text-align: center;
  }
  /* Grid: always 2 columns on tablet */
  .cmp-feature-section-items {
    grid-template-columns: repeat(2, 1fr);
  }
  .cmp-feature-section-items.cmp-four-multiple {
  grid-template-columns: repeat(2, 1fr);
}
  .cmp-feature-section-item.cmp-feature-section-item-bg {
    padding: 20px;
  }
}

@media screen and (max-width: 640px) {
  .cmp-feature-section {
    padding: 24px;
  }
  .cmp-feature-section-wrapper {
    gap: 24px;
  }
  .cmp-descriptions-wrapper{
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  /* Grid: always 1 column on mobile */
  .cmp-feature-section-items {
    grid-template-columns: 1fr;
  }
  .cmp-feature-section-items.cmp-four-multiple {
    grid-template-columns: 1fr;
  }
  .cmp-feature-section-item.cmp-feature-section-item-bg {
    padding: 16px;
  }
  .feature-section-content h3 {
    font-size: 14px;
    line-height: 1.3;
  }
  .feature-section-content p {
    font-size: 13px;
  }
}

/* ------------------------------------- */
/* campaign product collection --------- */
.cmp-product-collection-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cmp-product-collection-title {
  max-width: 1000px;
}

.cmp-product-collection-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  column-gap: 24px;
  row-gap: 0;
}

/* Series Section - use display:contents to flatten hierarchy */
.cmp-product-series-section {
  display: contents;
}

/* Product grids also use display:contents to flatten */
.cmp-series-products-grid {
  display: contents;
}

/* Grid row assignments */
.cmp-series-card {
  grid-row: 1;
}

.cmp-series-product-item:nth-child(1) { grid-row: 2; }
.cmp-series-product-item:nth-child(2) { grid-row: 3; }
.cmp-series-product-item:nth-child(3) { grid-row: 4; }

/* Series Card */
.cmp-series-card {
  background: var(--cmp-theme-primary-500);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  align-items: center;
  text-align: center;
}

.cmp-series-card-image,
.cmp-series-card-content {
  position: relative;
  z-index: 1;
}

.cmp-series-card-image {
  width: 100%;
  max-width: 350px;
  aspect-ratio: 16 / 10;
  padding: 20px;
}

.cmp-series-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cmp-series-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.cmp-series-card-content h3 {
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  color: var(--cmp-text-100);
  line-height: 1.2;
}

.cmp-series-card-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cmp-text-100);
  margin: 0;
}

.cmp-series-card-descriptions {
  list-style: disc;
  list-style-position: outside;
  margin: 12px 0 0;
  padding: 24px 0 0 24px;
  border-top: solid 1px;
  text-align: left;
  color: var(--cmp-text-100);
}

.cmp-series-card-descriptions li {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Product Item */
.cmp-series-product-item {
  display: flex;
  align-items: flex-start;
  height: 100%;
  padding: 24px 0;
  border-bottom: solid 1px var(--cmp-theme-primary-500);
  text-decoration: none;
  color: inherit;
}

.cmp-series-product-image {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 4 / 3;
  padding: 8px;
}

.cmp-series-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cmp-series-product-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  text-align: left;
}

.cmp-series-product-content h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.cmp-series-product-content .cmp-series-product-desc {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.cmp-text-dark .cmp-series-product-content .cmp-series-product-desc {
  color: rgba(0, 0, 0, 0.7);
}

.cmp-series-product-content .cmp-series-product-cta {
  display: inline-block;
  width: 100%;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: var(--cmp-text-100);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  align-self: flex-start;
}

.cmp-text-dark .cmp-series-product-content .cmp-series-product-cta {
  background: var(--cmp-theme-primary-700);
}

@media (hover:hover) {
  .cmp-series-product-item:hover .cmp-series-product-cta {
    background: var(--cmp-theme-primary-700);
  }
  .cmp-text-dark .cmp-series-product-item:hover .cmp-series-product-cta {
    background: var(--cmp-theme-primary-300);
  }
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
  .cmp-series-card {
    padding: 24px;
  }
  .cmp-series-product-item {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .cmp-series-product-content {
    width: 100%;
  }
  .cmp-series-product-content h4,
  .cmp-series-product-content .cmp-series-product-desc {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media screen and (max-width: 992px) {
  .cmp-product-collection-title {
    text-align: center;
  }
  .cmp-product-collection-wrapper {
    gap: 24px;
  }
  .cmp-series-card {
    padding: 16px;
  }
  .cmp-series-card-content h3 {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .cmp-product-collection-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .cmp-product-series-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .cmp-series-products-grid {
    display: flex;
    flex-direction: column;
  }
  .cmp-series-card {
    padding: 24px;
  }
  .cmp-series-product-item {
    flex-direction: row;
  }
  .cmp-series-product-item:nth-child(1),
  .cmp-series-product-item:nth-child(2),
  .cmp-series-product-item:nth-child(3) {
    grid-row: auto;
  }
}

@media screen and (max-width: 640px) {
  .cmp-product-collection-wrapper {
    gap: 32px;
  }
  .cmp-product-series-section {
    gap: 20px;
  }
  .cmp-series-product-content {
    padding: 20px;
  }
}

/* ------------------------------------- */
/* campaign feature carousel ----------- */
.cmp-feature-carousel-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cmp-feature-carousel-title {
  max-width: 1000px;
}

/* Feature carousel container */
.cmp-feature-carousel-container {
  position: relative;
  width: 100%;
}

.cmp-feature-carousel-container.has-pagination {
  margin-bottom: 40px;
}

/* Navigation buttons */
.cmp-feature-carousel-container .swiper-button-prev,
.cmp-feature-carousel-container .swiper-button-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 24px;
  height: auto;
  background-repeat: no-repeat;
  background-position: center;
  margin: auto;
  border: none;
  background-color: var(--cmp-bg-300);
}

.cmp-feature-carousel-container .swiper-button-prev.swiper-button-disabled,
.cmp-feature-carousel-container .swiper-button-next.swiper-button-disabled {
  background-color: transparent;
  opacity: 0;
}

.cmp-feature-carousel-container .swiper-button-prev {
  background-image: var(--ds-icon-chevron-left);
  left: 0;
}

.cmp-feature-carousel-container .swiper-button-next {
  background-image: var(--ds-icon-chevron-right);
  right: 0;
}

.cmp-feature-carousel-swiper {
  overflow: hidden;
}

.cmp-feature-carousel-swiper .swiper-slide {
  height: auto;
  display: flex;
}

/* Carousel disabled state - grid layout on all screens */
.cmp-feature-carousel-container.carousel-disabled .swiper-wrapper {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}

.cmp-feature-carousel-container.carousel-disabled .swiper-slide {
  width: auto !important;
  margin-right: 0 !important;
}

.cmp-feature-carousel-container.carousel-disabled .swiper-button-prev,
.cmp-feature-carousel-container.carousel-disabled .swiper-button-next,
.cmp-feature-carousel-container.carousel-disabled .swiper-pagination {
  display: none;
}

/* Feature item card */
.cmp-feature-item {
  text-align: center;
  padding: 32px 24px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  transition: background-color 0.3s ease;
  border: 1px solid var(--cmp-bg-300);
}

.cmp-feature-item:hover {
  background-color: var(--cmp-theme-primary-700);
}

.cmp-feature-item:hover .cmp-feature-title {
  color: var(--cmp-text-100);
}

.cmp-feature-item:hover .cmp-feature-description {
  color: rgba(255, 255, 255, 0.75);
}

.cmp-feature-item:hover .cmp-feature-icon.theme-color {
  background-color: var(--cmp-text-100);
}

/* Feature icon */
.cmp-feature-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.cmp-feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Feature title */
.cmp-feature-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--cmp-text-900);
  line-height: 1.3;
}

.cmp-text-light .cmp-feature-title {
  color: var(--cmp-text-100);
}

.cmp-text-dark .cmp-feature-title {
  color: var(--cmp-text-900);
}

/* Feature description */
.cmp-feature-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cmp-text-700);
  margin: 0;
  flex: 1;
}

.cmp-text-light .cmp-feature-description {
  color: rgba(255, 255, 255, 0.75);
}

.cmp-text-dark .cmp-feature-description {
  color: rgba(0, 0, 0, 0.7);
}

/* Pagination */
.cmp-feature-carousel-swiper .swiper-pagination {
  position: absolute;
  bottom: -32px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2;
}

.cmp-feature-carousel-swiper .swiper-pagination-bullet {
  background: var(--cmp-theme-primary-500);
  opacity: 0.3;
}

.cmp-feature-carousel-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
  .cmp-feature-carousel-container.carousel-disabled .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 991px) {
  .cmp-feature-carousel-title {
    text-align: center;
  }

  /* Grid layout when carousel is disabled on mobile/tablet */
  .cmp-feature-carousel-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  .cmp-feature-carousel-swiper .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
  }
  
  /* Hide navigation on mobile/tablet (carousel disabled) */
  .cmp-feature-carousel-container .swiper-button-prev,
  .cmp-feature-carousel-container .swiper-button-next,
  .cmp-feature-carousel-swiper .swiper-pagination {
    display: none;
  }

  /* Carousel disabled state gap adjustment */
  .cmp-feature-carousel-container.carousel-disabled .swiper-wrapper {
    gap: 16px;
  }
}

@media screen and (max-width: 768px) {
  .cmp-feature-carousel-wrapper {
    gap: 32px;
  }
  
  .cmp-feature-item {
    padding: 24px 16px;
  }
  
  .cmp-feature-icon {
    width: 48px;
    height: 48px;
  }
  
  .cmp-feature-title {
    font-size: 16px;
  }
  
  .cmp-feature-description {
    font-size: 13px;
  }
}

@media screen and (max-width: 640px) {
  .cmp-feature-carousel-swiper .swiper-wrapper,
  .cmp-feature-carousel-container.carousel-disabled .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ------------------------------------- */
/* Concept Intro Component ------------- */

.cmp-concept-intro-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.cmp-full-container.cmp-concept-intro-theme-full-background,
.cmp-full-container.cmp-concept-intro-theme-half-background {
  padding: 0;
}

/* --- Columns --- */
.cmp-concept-intro-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cmp-concept-intro-inner {
  width: 100%;
}

/* Alignment & Gaps */
.cmp-concept-intro-title-col .cmp-concept-intro-inner {
  margin-left: auto;
  margin-right: 0;
  padding-right: 36px;
}

.cmp-concept-intro-desc-col .cmp-concept-intro-inner {
  margin-left: 0;
  margin-right: auto;
  padding-left: 36px;
}

/* --- Typography --- */
.cmp-concept-intro-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.cmp-concept-intro-description {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* --- Colors & Theme Overrides --- */

/* Light Text - Half Bg Color */

.cmp-full-container.cmp-text-light.cmp-concept-intro-theme-half-background,
.cmp-container.cmp-text-light.cmp-concept-intro-theme-half-background {
  background: var(--cmp-theme-bg-dark);
}

/* Light Text - Title */
.cmp-full-container.cmp-text-light .cmp-concept-intro-title,
.cmp-container.cmp-text-light .cmp-concept-intro-title {
  color: var(--cmp-text-100);
}

/* Light Text - Description */
.cmp-full-container.cmp-text-light .cmp-concept-intro-description,
.cmp-container.cmp-text-light .cmp-concept-intro-description {
  color: var(--cmp-text-100);
}

/* Light Text Special Case - No Bg Image -> Primary Title */
.cmp-full-container.cmp-text-light:not(.cmp-has-bg-image) .cmp-concept-intro-title,
.cmp-container.cmp-text-light:not(.cmp-has-bg-image) .cmp-concept-intro-title {
  color: var(--cmp-theme-primary-500);
}

/* Light Text Special Case - Desktop No Bg -> Primary Title */
@media screen and (min-width: 993px) {
  .cmp-full-container.cmp-text-light.cmp-no-desktop-bg .cmp-concept-intro-title,
  .cmp-container.cmp-text-light.cmp-no-desktop-bg .cmp-concept-intro-title {
    color: var(--cmp-theme-primary-500);
  }
}

/* Dark Text - Half Bg Color */
.cmp-full-container.cmp-text-dark.cmp-concept-intro-theme-half-background,
.cmp-container.cmp-text-dark.cmp-concept-intro-theme-half-background {
  background: var(--cmp-theme-bg-light);
}

/* Dark Text - Title */
.cmp-full-container.cmp-text-dark .cmp-concept-intro-title,
.cmp-container.cmp-text-dark .cmp-concept-intro-title {
  color: var(--cmp-theme-primary-500);
}

/* Dark Text - Description */
.cmp-full-container.cmp-text-dark .cmp-concept-intro-description,
.cmp-container.cmp-text-dark .cmp-concept-intro-description {
  color: var(--cmp-text-900);
}


/* --- Theme: Full Background --- */
.cmp-concept-intro-theme-full-background {
  background-image: var(--desktop-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cmp-concept-intro-theme-full-background .cmp-concept-intro-col {
  background-color: transparent;
}


/* --- Theme: Half Background --- */
.cmp-concept-intro-theme-half-background {
  /* Background color set via text-theme overrides above */
  position: relative;
  overflow: hidden;
}

/* Half Theme Image */
.cmp-concept-intro-theme-half-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: var(--desktop-bg);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Content Layering */
.cmp-concept-intro-theme-half-background .cmp-concept-intro-col {
  position: relative;
  z-index: 1;
}

/* Background overrides for inner cols */
.cmp-concept-intro-theme-half-background .cmp-concept-intro-title-col,
.cmp-concept-intro-theme-half-background .cmp-concept-intro-desc-col {
  background: transparent;
}


/* --- Mobile Adjustments --- */
@media screen and (max-width: 992px) {
  .cmp-concept-intro-wrapper {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  
  .cmp-concept-intro-col {
    padding: 24px;
    align-items: center;
    text-align: center;
  }
  
  .cmp-concept-intro-title-col .cmp-concept-intro-inner,
  .cmp-concept-intro-desc-col .cmp-concept-intro-inner {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
  }

  .cmp-concept-intro-theme-half-background {
      display: flex;
      flex-direction: column;
  }

  /* Mobile: Hide the split background pseudo-element */
  .cmp-concept-intro-theme-half-background::before {
      display: none;
  }

  /* Mobile: If image exists, apply directly to container (like Full Background theme) */
  .cmp-concept-intro-theme-half-background.cmp-has-bg-image {
      background-image: var(--mobile-bg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }
  .cmp-concept-intro-title{
    font-size: 32px;
  }
  .cmp-concept-intro-description{
    font-size: 14px;
  }
}
/* ------------------------------------- */
/* Campaign Button Section (cmpButton) */
.cmp-button-section {
  /* Default spacing */
}
.cmp-button-section.pt-default {
  padding-top: 96px;
}
.cmp-button-section.pb-default {
  padding-bottom: 96px;
}
.cmp-button-section.pt-compact {
  padding-top: 48px;
}
.cmp-button-section.pb-compact {
  padding-bottom: 48px;
}
.cmp-button-section.pt-none {
  padding-top: 24px;
}
.cmp-button-section.pb-none {
  padding-bottom: 24px;
}

/* Button wrapper grid */
.cmp-button-section .btn-section-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 16px;
  max-width: 100%;
}
.cmp-button-section .btn-section-wrapper .ds-button {
  text-align: center;
  max-width: 500px;
  justify-self: center;
  width: 100%;
}
.cmp-button-section .btn-section-wrapper .ds-btn-cta {
  border: none;
}

/* Tablet: 4 buttons -> 2x2, 3 or fewer -> single row */
@media screen and (max-width: 1024px) {
  .cmp-button-section .btn-section-wrapper:has(.ds-button:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 4 buttons -> 2x2, 3 or fewer -> stack */
@media screen and (max-width: 768px) {
  .cmp-button-section .btn-section-wrapper {
    grid-template-columns: 1fr;
  }
  .cmp-button-section .btn-section-wrapper:has(.ds-button:nth-child(2)):not(:has(.ds-button:nth-child(3))) {
    grid-template-columns: repeat(2, 1fr);
  }
  .cmp-button-section .btn-section-wrapper:has(.ds-button:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small mobile: always stack */
@media screen and (max-width: 480px) {
  .cmp-button-section .btn-section-wrapper {
    grid-template-columns: 1fr;
  }
  .cmp-button-section .btn-section-wrapper:has(.ds-button:nth-child(2)):not(:has(.ds-button:nth-child(3))) {
    grid-template-columns: 1fr;
  }
  .cmp-button-section .btn-section-wrapper:has(.ds-button:nth-child(4)) {
    grid-template-columns: 1fr;
  }
}

.cmp-button-section .btn-label {
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp-button-section .btn-arrow-icon {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  mask-image: var(--ds-icon-arrow-forward);
  -webkit-mask-image: var(--ds-icon-arrow-forward);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: currentColor;
}
/* --- Primary: solid theme color ---------------------------------- */
.cmp-btn-theme {
  background-color: var(--cmp-theme-primary-500);
  color: var(--cmp-text-100);
  border-color: var(--cmp-theme-primary-500);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
  .cmp-btn-theme:hover:not(:disabled) {
    background-color: var(--cmp-theme-primary-700);
    border-color: var(--cmp-theme-primary-700);
  }
}

/* --- Primary + gradient theme ------------------------------------ */
[class*="cmp-theme-gradient"] .ds-btn-cta.cmp-btn-theme {
  background-image: var(--cmp-theme-gradient);
  border-color: transparent;
}

@media (hover: hover) {
  [class*="cmp-theme-gradient"] .ds-btn-cta.cmp-btn-theme:hover:not(:disabled) {
    background-image: none;
    border-color: var(--cmp-theme-primary-500);
  }
}

/* --- Outline: theme-colored border and text ---------------------- */
.ds-btn-cta-ol.cmp-btn-theme {
  background-color: transparent;
  color: var(--cmp-theme-primary-500);
  border-color: var(--cmp-theme-primary-500);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
  .ds-btn-cta-ol.cmp-btn-theme:hover:not(:disabled) {
    background-color: var(--cmp-theme-primary-500);
    color: var(--cmp-text-100);
    border-color: var(--cmp-theme-primary-500);
  }
}
/* ------------------------------------- */
/* campaign stripe banner -------------- */
.cmp-stripe-banner {
  max-width: 1600px;
  margin: 0 auto;
}

.cmp-stripe-banner-full {
  max-width: 100%;
}

/* 8:1 aspect ratio wrapper */
.cmp-stripe-banner-link,
.cmp-stripe-banner > picture,
.cmp-stripe-banner > img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 1;
  overflow: hidden;
}

.cmp-stripe-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .cmp-stripe-banner-link:hover .cmp-stripe-banner-img {
    opacity: 0.92;
  }
}

@media screen and (max-width: 768px) {
  .cmp-stripe-banner-link,
  .cmp-stripe-banner > picture,
  .cmp-stripe-banner > img {
    aspect-ratio: auto;
  }
}