/* ==========================================================================
   WellspringCBD — CBD For The People Terpene Flavor Guide Slider
   ========================================================================== */

.wfg_section {
  background:
    radial-gradient(120% 120% at 95% 10%, rgba(98, 180, 20, 0.24) 0%, rgba(98, 180, 20, 0) 55%),
    radial-gradient(90% 90% at 5% 90%, rgba(20, 83, 45, 0.38) 0%, rgba(20, 83, 45, 0) 65%),
    linear-gradient(135deg, #0f1f1a 0%, #15261f 50%, #1c352a 100%) !important;
  color: #e8f1ec !important;
  border: 1.5px solid rgba(164, 240, 86, 0.38) !important;
  border-radius: 18px !important;
  padding: 30px 28px !important;
  max-width: min(1320px, calc(100% - 36px)) !important;
  margin: 28px auto 32px !important;
  box-shadow: 0 12px 32px rgba(14, 30, 25, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.wfg_section > .ct-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.wfg_hd_row {
  margin-bottom: 18px;
}

.wfg_kicker {
  display: inline-block !important;
  background: #a4f056 !important;
  color: #10221d !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 8px !important;
}

.wfg_title {
  font-family: var(--theme-heading-font-family, var(--theme-font-family, serif));
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2.1rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.wfg_sub {
  margin: 0;
  font-size: 14px !important;
  color: #b9cdc2 !important;
  line-height: 1.5 !important;
  max-width: 680px;
}

/* Filter Controls */
.wfg_filter_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.wfg_filter_pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wfg_pill {
  background: #15261f !important;
  border: 1px solid #2e4d3f !important;
  color: #a2bbb0 !important;
  border-radius: 999px !important;
  padding: 7px 15px !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}

.wfg_pill:hover {
  background: #1c352a !important;
  color: #ffffff !important;
  border-color: #3d6653 !important;
}

.wfg_pill.active {
  background: #a4f056 !important;
  color: #10221d !important;
  border-color: #a4f056 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(164, 240, 86, 0.28) !important;
}

/* Slider Wrap with Natural Floating Overlay Arrows */
.wfg_slider_wrap {
  position: relative;
  width: 100%;
  margin-block: 8px 12px;
}

.wfg_viewport {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #a4f056 rgba(25, 44, 39, 0.3);
  padding: 10px 4px 18px;
  box-sizing: border-box;
}

.wfg_viewport::-webkit-scrollbar {
  height: 6px;
}
.wfg_viewport::-webkit-scrollbar-track {
  background: rgba(25, 44, 39, 0.4);
  border-radius: 999px;
}
.wfg_viewport::-webkit-scrollbar-thumb {
  background: #a4f056;
  border-radius: 999px;
}

.wfg_track {
  display: flex;
  gap: 14px;
  width: max-content;
}

/* Natural Floating Overlay Arrows */
.wfg_arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #10221d !important;
  border: 1.5px solid rgba(164, 240, 86, 0.5) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(10, 22, 19, 0.45) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease !important;
  user-select: none !important;
  z-index: 10 !important;
  padding: 0 0 2px 0 !important;
}

.wfg_arrow.prev {
  left: -20px !important;
}
.wfg_arrow.next {
  right: -20px !important;
}

.wfg_arrow:hover {
  background: #62b414 !important;
  border-color: #62b414 !important;
  color: #ffffff !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.wfg_arrow.is-disabled {
  opacity: 0.25 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Strain Card */
.wfg_card {
  flex: 0 0 280px !important;
  max-width: 280px !important;
  scroll-snap-align: start !important;
  background: #12201b !important;
  border: 1px solid #244034 !important;
  border-radius: 12px !important;
  padding: 18px 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-shadow: 0 4px 14px rgba(10, 22, 19, 0.25) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.wfg_card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(164, 240, 86, 0.5) !important;
  box-shadow: 0 8px 20px rgba(10, 22, 19, 0.4) !important;
}

.wfg_card_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wfg_badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

.wfg_badge.sativa {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #fde047 !important;
  border: 1px solid rgba(234, 179, 8, 0.35) !important;
}
.wfg_badge.indica {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #d8b4fe !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}
.wfg_badge.hybrid {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}
.wfg_badge.raw {
  background: rgba(164, 240, 86, 0.15) !important;
  color: #a4f056 !important;
  border: 1px solid rgba(164, 240, 86, 0.35) !important;
}

.wfg_moon {
  color: #ffffff !important;
  font-style: normal !important;
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: -0.05em !important;
  font-size: 1.15em !important;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)) !important;
}

.wfg_sun {
  color: #fef08a !important;
  font-style: normal !important;
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: -0.05em !important;
  font-size: 1.15em !important;
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.85)) drop-shadow(0 0 1px #ffffff) !important;
}

.wfg_canna_tag {
  font-size: 9.5px;
  font-weight: 800;
  color: #94a89d;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wfg_card_title {
  margin: 4px 0 2px !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
}

.wfg_card_desc {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #a5bbb1 !important;
  line-height: 1.45 !important;
}

/* Tags & Effects */
.wfg_sec_lbl {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #7c9388 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.wfg_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.wfg_tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #1a2f26 !important;
  color: #d2e4db !important;
  padding: 2.5px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #284438 !important;
}

.wfg_feels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wfg_feel {
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(164, 240, 86, 0.10) !important;
  color: #a4f056 !important;
  padding: 2.5px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(164, 240, 86, 0.25) !important;
}

@media (max-width: 860px) {
  .wfg_section {
    max-width: calc(100% - 24px) !important;
    margin: 20px auto 24px !important;
    padding: 22px 16px !important;
    border-radius: 14px !important;
  }
  .wfg_arrow.prev { left: 4px !important; }
  .wfg_arrow.next { right: 4px !important; }
}