/* Split Block - Colors from theme (:root in dynamic-colors.css / main-style). Change theme colors in one place. */
.split-block {
  --wt-primary: var(--wt-shop-primary);
  --wt-primary-dark: var(--wt-shop-primary-dark);
  --wt-primary-hover: var(--wt-shop-primary-hover);
  --wt-secondary: var(--wt-shop-secondary);
  --wt-secondary-darker: var(--wt-shop-secondary-darker);
  --wt-black: var(--wt-shop-black);
  --wt-white: var(--wt-shop-white);
  --wt-gray: var(--wt-shop-gray);
  --wt-light-gray: var(--wt-shop-light-gray);
}

.split-block .container-fluid {
  padding: 0 !important;

}

.split-block-content-col,
.split-block-image-col {
  min-height: 1px;
}


.split-block-wrapper .img-fluid {
  height: 100%;
}

.split-block-content {
  padding: 3rem 2rem;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
}

.split-block-content-inner {
  width: 100%;
}

.split-block-subheadline {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.split-block-headline {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 1rem;
}

.split-block-description {
  margin-bottom: 1.5rem;
}

.split-block-description p {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
}

.split-block-description p:last-child {
  margin-bottom: 0;
}

.split-block-btn-wrapper {
  margin-top: 0;
}

.split-block-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Content column background colors (theme: primary, secondary, etc.) */
.split-block-content.bg-color-white {
  background-color: var(--wt-white);
}

.split-block-content.bg-color-transparent {
  background-color: transparent;
}

.split-block-content.bg-color-gray,
.split-block-content.bg-color-light-gray {
  background-color: var(--wt-light-gray);
}

.split-block-content.bg-color-dark-gray {
  background-color: var(--wt-gray);
}

.split-block-content.bg-color-primary,
.split-block-content.bg-color-primary-dark {
  background-color: var(--wt-primary);
}

.split-block-content.bg-color-yellow,
.split-block-content.bg-color-secondary {
  background-color: var(--wt-secondary);
}

.split-block-content.bg-color-black {
  background-color: var(--wt-black);
}

/* Content column text colors */
.split-block-content.text-color-white .split-block-subheadline,
.split-block-content.text-color-white .split-block-headline,
.split-block-content.text-color-white .split-block-description {
  color: var(--wt-white);
}

.split-block-content.text-color-black .split-block-subheadline,
.split-block-content.text-color-black .split-block-headline,
.split-block-content.text-color-black .split-block-description {
  color: var(--wt-black);
}

.split-block-content.text-color-primary .split-block-subheadline,
.split-block-content.text-color-primary .split-block-headline,
.split-block-content.text-color-primary .split-block-description {
  color: var(--wt-primary);
}

.split-block-content.text-color-gray .split-block-subheadline,
.split-block-content.text-color-gray .split-block-headline,
.split-block-content.text-color-gray .split-block-description {
  color: var(--wt-gray);
}

.split-block-content.text-color-dark-gray .split-block-subheadline,
.split-block-content.text-color-dark-gray .split-block-headline,
.split-block-content.text-color-dark-gray .split-block-description {
  color: var(--wt-gray);
}

.split-block-content.text-color-yellow .split-block-subheadline,
.split-block-content.text-color-yellow .split-block-headline,
.split-block-content.text-color-yellow .split-block-description,
.split-block-content.text-color-secondary .split-block-subheadline,
.split-block-content.text-color-secondary .split-block-headline,
.split-block-content.text-color-secondary .split-block-description {
  color: var(--wt-secondary);
}

/* Buttons */
.btn-split {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-split span {
  display: inline-block;
}

.btn-split-full {
  background-color: var(--wt-primary);
  color: var(--wt-white);
  border: 2px solid var(--wt-primary);
}

.btn-split-full:hover {
  background-color: var(--wt-primary-hover);
  color: var(--wt-white);
  border-color: var(--wt-primary-hover);
}

.btn-split-outline {
  background-color: transparent;
  color: var(--gn-white);
  border: 2px solid var(--gn-white);
}

.btn-split-outline:hover {
  background-color: var(--gn-white);
  color: var(--gn-primary);
  border-color: var(--gn-white);
}

.split-block-content.text-color-black .btn-split-outline,
.split-block-content.text-color-primary .btn-split-outline,
.split-block-content.text-color-secondary .btn-split-outline,
.split-block-content.text-color-gray .btn-split-outline {
  color: var(--gn-primary);
  border-color: var(--gn-primary);
}

.split-block-content.text-color-black .btn-split-outline:hover,
.split-block-content.text-color-primary .btn-split-outline:hover {
  background-color: var(--gn-primary);
  color: var(--gn-white);
  border-color: var(--gn-primary);
}

.split-block-content.text-color-secondary .btn-split-outline {
  color: var(--gn-secondary);
  border-color: var(--gn-secondary);
}

.split-block-content.text-color-secondary .btn-split-outline:hover {
  background-color: var(--gn-secondary);
  color: var(--gn-white);
  border-color: var(--gn-secondary);
}

.split-block-content.text-color-gray .btn-split-outline {
  color: var(--gn-gray);
  border-color: var(--gn-gray);
}

.split-block-content.text-color-gray .btn-split-outline:hover {
  background-color: var(--gn-gray);
  color: var(--gn-white);
  border-color: var(--gn-gray);
}

.btn-split-secondary {
  background-color: var(--gn-secondary);
  color: var(--gn-black);
  border: 2px solid var(--gn-secondary);
}

.btn-split-secondary:hover {
  background-color: var(--gn-secondary-darker);
  color: var(--gn-white);
  border-color: var(--gn-secondary-darker);
}

@media (max-width: 1199.98px) {
  .split-block-content {
    padding: 2rem 1.5rem;
    min-height: 280px;
  }
}

@media (max-width: 575.98px) {
  .split-block-content {
    padding: 1.5rem 1rem;
    min-height: auto;
  }
}

/* Split block style two: card look + visible gap */
.split-block.split-block-style-two .split-block-content-col,
.split-block.split-block-style-two .split-block-image-col {
  padding-inline: 1rem;
}

.split-block.split-block-style-two .split-block-wrapper > .row {
  margin-inline: -1rem;
  row-gap: 1.5rem;
}

.split-block.split-block-style-two.split-background-transparent {
  background-color: transparent;
}

.split-block.split-block-style-two.split-background-white {
  background-color: var(--wt-white);
}

.split-block.split-block-style-two.split-background-gray {
  background-color: var(--wt-light-gray);
}

.split-block.split-block-style-two.split-background-dark-gray {
  background-color: var(--wt-gray);
}

.split-block.split-block-style-two.split-background-black {
  background-color: var(--wt-black);
}

.split-block.split-block-style-two.split-background-primary {
  background-color: var(--wt-primary);
}

.split-block.split-block-style-two.split-background-yellow {
  background-color: var(--wt-secondary);
}

.split-block.split-block-style-two .split-block-content {
  background-color: transparent;
  border-radius: 24px;
  overflow: hidden;
  padding: 3rem 0;
}

.split-block.split-block-style-two .split-block-image-col {
  border-radius: 24px;
  background-color: transparent;
  line-height: 0;
}

.split-block.split-block-style-two .split-block-img-wrapper {
  width: 80%;
  height: 80%;
  border-radius: 80px;
  border: 20px solid var(--wt-white, #fff);
  overflow: hidden;
  box-shadow: 8px 10px 18px color-mix(in srgb, var(--wt-shop-black, #111) 16%, transparent);
  background: white;
}

.split-block.split-block-style-two .split-block-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 40px;
  clip-path: inset(0 round 20px);
}

@media (max-width: 991.98px) {
  .split-block.split-block-style-two .split-block-content-col,
  .split-block.split-block-style-two .split-block-image-col {
    padding-inline: 0.75rem;
  }

  .split-block.split-block-style-two .split-block-img-wrapper {
    width: 100%;
    height: 100%;
  }


  .split-block.split-block-style-two .split-block-wrapper > .row {
    margin-inline: -0.75rem;
    row-gap: 1rem;
  }
}