/* KS GLP-1 Carousel — Ro-style medication cards */

.elementor-widget-ks_glp1_carousel .ks-el-root.ks-el-glp1-carousel,
.ks-el-root.ks-el-glp1-carousel {
  --gc-page-bg: transparent;
  --gc-card-bg: #f4f4f4;
  --gc-ink: #1a1a1a;
  --gc-muted: #6b6b6b;
  --gc-line: rgba(26, 26, 26, 0.14);

  --gc-radius: 18px;
  --gc-card-w: 234px;
  --gc-card-h: 384px;
  --gc-card-pad: 1.125rem 1rem;
  --gc-gap: 16px;
  --gc-max: 78rem;
  --gc-shell-pad-y: 3rem;
  --gc-shell-pad-x: 2rem;

  --gc-media-fit: cover;
  --gc-media-pos-x: 72%;
  --gc-media-pos-y: 88%;
  --gc-media-scrim: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.72) 28%,
    rgba(255, 255, 255, 0.08) 58%,
    rgba(255, 255, 255, 0) 72%
  );

  --gc-chip-bg: #e9e9e9;
  --gc-chip-ink: #1a1a1a;
  --gc-chip-new-bg: #dff0e4;
  --gc-chip-new-ink: #14602f;
  --gc-chip-radius: 999px;
  --gc-dot: #1a7a42;

  --gc-btn-h: var(--ks-theme-btn-height, 34px);
  --gc-btn-radius: var(--ks-theme-btn-radius, 999px);
  --gc-btn-font: var(--ks-theme-btn-font, inherit);
  --gc-btn-size: var(--ks-theme-btn-font-size, 0.6875rem);
  --gc-btn-weight: var(--ks-theme-btn-font-weight, 600);
  --gc-btn-tracking: var(--ks-theme-btn-letter-spacing, 0);
  --gc-btn-transform: var(--ks-theme-btn-text-transform, none);

  --gc-btn1-bg: var(--ks-theme-btn-primary-bg, #1a1a1a);
  --gc-btn1-ink: var(--ks-theme-btn-primary-color, #ffffff);
  --gc-btn1-line: var(--ks-theme-btn-primary-border, var(--gc-btn1-bg));
  --gc-btn1-bg-hover: var(--ks-theme-btn-primary-bg-hover, #333333);
  --gc-btn1-line-hover: var(--ks-theme-btn-primary-border-hover, var(--gc-btn1-bg-hover));

  --gc-btn2-bg: var(--ks-theme-btn-secondary-bg, #ffffff);
  --gc-btn2-ink: var(--ks-theme-btn-secondary-color, #1a1a1a);
  --gc-btn2-line: var(--ks-theme-btn-secondary-border, rgba(26, 26, 26, 0.14));
  --gc-btn2-bg-hover: var(--ks-theme-btn-secondary-bg-hover, #ffffff);
  --gc-btn2-ink-hover: var(--ks-theme-btn-secondary-color-hover, #1a1a1a);
  --gc-btn2-line-hover: var(--ks-theme-btn-secondary-border-hover, #1a1a1a);

  --gc-arrow-size: var(--ks-theme-arrow-size, 40px);
  --gc-arrow-radius: var(--ks-theme-arrow-radius, 999px);
  --gc-arrow-bg: var(--ks-theme-arrow-bg, #ececec);
  --gc-arrow-next-bg: var(--ks-theme-arrow-next-bg, var(--gc-arrow-bg));
  --gc-arrow-ink: var(--ks-theme-arrow-color, #1a1a1a);
  --gc-arrow-line: var(--ks-theme-arrow-border, transparent);
  --gc-arrow-line-hover: var(--ks-theme-arrow-border-hover, transparent);
  --gc-arrow-hover-bg: var(--ks-theme-arrow-bg-hover, #e2e2e2);

  --gc-prog-shell-w: var(--ks-theme-prog-shell-w, 88px);
  --gc-prog-shell-h: var(--ks-theme-prog-shell-h, 32px);
  --gc-prog-shell-bg: var(--ks-theme-prog-shell-bg, #ececec);
  --gc-prog-shell-pad: var(--ks-theme-prog-shell-pad, 14px);
  --gc-prog-h: var(--ks-theme-prog-h, 3px);
  --gc-prog-track: var(--ks-theme-prog-track, rgba(26, 26, 26, 0.18));
  --gc-prog-fill: var(--ks-theme-prog-fill, #1a1a1a);
  --gc-prog-w: var(--gc-prog-shell-w);

  --gc-dur: 0.3s;
  --gc-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --gc-font-heading: var(
    --ks-theme-font-heading,
    "Fraunces",
    Georgia,
    "Times New Roman",
    serif
  );
  --gc-font-subheading: var(
    --ks-theme-font-subheading,
    "Sinar Grotesk",
    sans-serif
  );
  --gc-title-size: 1.5rem;
  --gc-title-weight: 500;
  --gc-title-leading: 1.25;
  --gc-title-tracking: -0.015em;
  --gc-name-size: 1.0625rem;
  --gc-name-weight: 500;
  --gc-name-leading: 1.2;
  --gc-name-tracking: -0.015em;

  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: var(--gc-font-subheading), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--gc-ink);
  background: var(--gc-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ks-el-root.ks-el-glp1-carousel *,
.ks-el-root.ks-el-glp1-carousel *::before,
.ks-el-root.ks-el-glp1-carousel *::after {
  box-sizing: border-box;
}

.ks-el-root.ks-el-glp1-carousel h2,
.ks-el-root.ks-el-glp1-carousel h3,
.ks-el-root.ks-el-glp1-carousel h4,
.ks-el-root.ks-el-glp1-carousel p {
  margin: 0;
  padding: 0;
  text-transform: none;
}

.ks-el-root.ks-el-glp1-carousel a {
  font-family: inherit;
  text-decoration: none;
  box-shadow: none;
}

.ks-el-root.ks-el-glp1-carousel button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------- Shell */

.ks-el-glp1-carousel .glp1-carousel {
  width: 100%;
  max-width: var(--gc-max);
  margin-inline: auto;
  padding: var(--gc-shell-pad-y) var(--gc-shell-pad-x);
}

.ks-el-glp1-carousel .glp1-carousel__header {
  margin-bottom: 2rem;
  text-align: center;
}

.ks-el-glp1-carousel .glp1-carousel__title {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-title-size);
  font-weight: var(--gc-title-weight);
  line-height: var(--gc-title-leading);
  letter-spacing: var(--gc-title-tracking);
  color: var(--gc-ink);
}

/* --------------------------------------------------------------- Track */

.ks-el-glp1-carousel .glp1-carousel__viewport {
  overflow: hidden;
  margin-inline: calc(var(--gc-shell-pad-x) * -0.5);
  padding-inline: calc(var(--gc-shell-pad-x) * 0.5);
}

.ks-el-glp1-carousel .glp1-carousel__track {
  display: flex;
  gap: var(--gc-gap);
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 2px 4px;
}

.ks-el-glp1-carousel .glp1-carousel__track::-webkit-scrollbar {
  display: none;
}

.ks-el-glp1-carousel.is-no-snap .glp1-carousel__track {
  scroll-snap-type: none;
}

.ks-el-glp1-carousel .glp1-carousel__slide {
  flex: 0 0 var(--gc-card-w);
  width: var(--gc-card-w);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* --------------------------------------------------------------- Card */

.ks-el-glp1-carousel .glp1-carousel__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}

.ks-el-glp1-carousel .glp1-carousel__inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: var(--gc-card-h);
  padding: var(--gc-card-pad);
  border-radius: var(--gc-radius);
  overflow: hidden;
  background-color: var(--gc-card-bg);
  background-image: var(--gc-media, none);
  background-repeat: no-repeat;
  background-position: var(--gc-media-pos-x) var(--gc-media-pos-y);
  background-size: var(--gc-media-fit, cover);
}

.ks-el-glp1-carousel .glp1-carousel__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gc-media-scrim, none);
  pointer-events: none;
  z-index: 0;
}

.ks-el-glp1-carousel .glp1-carousel__top,
.ks-el-glp1-carousel .glp1-carousel__actions {
  position: relative;
  z-index: 1;
}

.ks-el-glp1-carousel .glp1-carousel__top {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ks-el-glp1-carousel .glp1-carousel__name {
  font-family: var(--gc-font-subheading);
  font-size: var(--gc-name-size);
  font-weight: var(--gc-name-weight);
  line-height: var(--gc-name-leading);
  letter-spacing: var(--gc-name-tracking);
  color: var(--gc-ink);
}

/* --------------------------------------------------------------- Chips */

.ks-el-glp1-carousel .glp1-carousel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ks-el-glp1-carousel .glp1-carousel__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--gc-chip-radius);
  background: var(--gc-chip-bg);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--gc-chip-ink);
  white-space: nowrap;
}

.ks-el-glp1-carousel .glp1-carousel__chip.is-new,
.ks-el-glp1-carousel .glp1-carousel__chip.is-stock {
  background: var(--gc-chip-new-bg);
  color: var(--gc-chip-new-ink);
}

.ks-el-glp1-carousel .glp1-carousel__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gc-dot);
  flex-shrink: 0;
}

/* --------------------------------------------------------------- Actions */

.ks-el-glp1-carousel .glp1-carousel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 1.25rem;
}

.ks-el-glp1-carousel .glp1-carousel__actions.is-single {
  grid-template-columns: 1fr;
}

.ks-el-glp1-carousel .glp1-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gc-btn-h);
  padding: 0 8px;
  border-radius: var(--gc-btn-radius);
  border: 1px solid transparent;
  font-family: var(--gc-btn-font);
  font-size: var(--gc-btn-size);
  font-weight: var(--gc-btn-weight);
  letter-spacing: var(--gc-btn-tracking);
  text-transform: var(--gc-btn-transform);
  line-height: 1;
  text-align: center;
  transition:
    background var(--gc-dur) ease,
    border-color var(--gc-dur) ease,
    color var(--gc-dur) ease;
}

.ks-el-glp1-carousel .glp1-carousel__btn--primary {
  border-color: var(--gc-btn1-line);
  background: var(--gc-btn1-bg);
  color: var(--gc-btn1-ink);
}

.ks-el-glp1-carousel .glp1-carousel__btn--primary:hover,
.ks-el-glp1-carousel .glp1-carousel__btn--primary:focus-visible {
  border-color: var(--gc-btn1-line-hover);
  background: var(--gc-btn1-bg-hover);
  color: var(--gc-btn1-ink);
}

.ks-el-glp1-carousel .glp1-carousel__btn--secondary {
  border-color: var(--gc-btn2-line);
  background: var(--gc-btn2-bg);
  color: var(--gc-btn2-ink);
}

.ks-el-glp1-carousel .glp1-carousel__btn--secondary:hover,
.ks-el-glp1-carousel .glp1-carousel__btn--secondary:focus-visible {
  border-color: var(--gc-btn2-line-hover);
  background: var(--gc-btn2-bg-hover);
  color: var(--gc-btn2-ink-hover);
}

/* --------------------------------------------------------------- Card footer */

.ks-el-glp1-carousel .glp1-carousel__footer {
  padding: 0.75rem 0.5rem 0;
  text-align: center;
}

.ks-el-glp1-carousel .glp1-carousel__safety {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--gc-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ks-el-glp1-carousel .glp1-carousel__safety:hover {
  color: var(--gc-muted);
}

/* --------------------------------------------------------------- Controls */

.ks-el-glp1-carousel .glp1-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1.25rem;
}

.ks-el-glp1-carousel .glp1-carousel__progress {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gc-prog-shell-w);
  height: var(--gc-prog-shell-h);
  padding-inline: var(--gc-prog-shell-pad);
  border-radius: 999px;
  background: var(--gc-prog-shell-bg);
}

.ks-el-glp1-carousel .glp1-carousel__progress-track {
  position: relative;
  width: 100%;
  height: var(--gc-prog-h);
  border-radius: 999px;
  background: var(--gc-prog-track);
  overflow: hidden;
}

.ks-el-glp1-carousel .glp1-carousel__progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--gc-prog-fill);
  transition: left var(--gc-dur) var(--gc-ease), width var(--gc-dur) var(--gc-ease);
  will-change: left, width;
}

.ks-el-glp1-carousel .glp1-carousel__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ks-el-glp1-carousel .glp1-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gc-arrow-size);
  height: var(--gc-arrow-size);
  padding: 0;
  border: 1px solid var(--gc-arrow-line);
  border-radius: var(--gc-arrow-radius);
  background: var(--gc-arrow-bg);
  color: var(--gc-arrow-ink);
  box-shadow: none;
  transition:
    border-color var(--gc-dur) ease,
    background var(--gc-dur) ease,
    opacity var(--gc-dur) ease;
}

.ks-el-glp1-carousel .glp1-carousel__arrow[data-ks-gc-dir="next"] {
  background: var(--gc-arrow-next-bg);
}

.ks-el-glp1-carousel .glp1-carousel__arrow:hover:not(:disabled) {
  border-color: var(--gc-arrow-line-hover);
  background: var(--gc-arrow-hover-bg);
}

.ks-el-glp1-carousel .glp1-carousel__arrow[data-ks-gc-dir="next"]:hover:not(:disabled) {
  background: var(--gc-arrow-hover-bg);
}

.ks-el-glp1-carousel .glp1-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ks-el-glp1-carousel .glp1-carousel__arrow svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* --------------------------------------------------------------- Note */

.ks-el-glp1-carousel .glp1-carousel__note {
  margin: 1.5rem auto 0;
  max-width: 44rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--gc-muted);
  text-align: center;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 767px) {
  .ks-el-root.ks-el-glp1-carousel {
    --gc-shell-pad-x: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-el-glp1-carousel .glp1-carousel__track {
    scroll-behavior: auto;
  }

  .ks-el-glp1-carousel .glp1-carousel__progress-inner {
    transition: none;
  }
}