/**
 * Wellspring CBD — Mobile Off-Canvas Menu Stylesheet (v3.5.110).
 *
 * Scoped overrides for Blocksy #offcanvas drawer and ConversionWise
 * high-converting menu layout.
 *
 * FIX FOR MOBILE OVERFLOW & ALIGNMENT:
 * - Resets Blocksy's --horizontal-alignment: flex-end to stretch.
 * - Enforces width: 100% / max-width: 100vw with min-width: 0 on all flex children.
 * - Prevents the horizontal scroll track from expanding the parent container.
 * - Eliminates left-edge overhang on all mobile viewports (320px to 480px).
 */

/* ==========================================================================
   1. BLOCKSY #OFFCANVAS SHELL & PANEL OVERRIDES
   ========================================================================== */
[data-header*="type-1"] #offcanvas,
#offcanvas {
  --horizontal-alignment: stretch !important;
  --text-horizontal-alignment: left !important;
  --side-panel-width: 100vw !important;
  background-color: #ffffff !important;
  color: #192c27 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#offcanvas .ct-panel-inner {
  background-color: #ffffff !important;
  color: #192c27 !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

#offcanvas .ct-panel-actions {
  padding: 12px 16px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#offcanvas .ct-toggle-close {
  color: #ffffff !important;
  background: #192c27 !important;
  background-color: #192c27 !important;
  border: 1.5px solid #192c27 !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(25, 44, 39, 0.22) !important;
  flex-shrink: 0 !important;
}

#offcanvas .ct-toggle-close svg,
#offcanvas .ct-toggle-close svg path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

#offcanvas .ct-toggle-close:hover {
  background: #62b414 !important;
  border-color: #62b414 !important;
  transform: rotate(90deg) !important;
}

#offcanvas .ct-toggle-close:hover svg,
#offcanvas .ct-toggle-close:hover svg path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

#offcanvas .ct-panel-content {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#offcanvas .ct-panel-content-inner {
  padding: 6px 16px 36px !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100% !important;
  align-items: stretch !important;
  text-align: left !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   2. MASTER MENU CONTAINER & STRUCTURE
   ========================================================================== */
.wsc_oc_menu_wrap {
  display: block !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: #4a5550 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  padding: 0 0 24px !important;
  overflow: visible !important;
  text-align: left !important;
}

.wsc_oc_menu_wrap * {
  box-sizing: border-box !important;
}

/* Brand Row */
.wsc_oc_brand_row {
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_brand {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  min-width: 0 !important;
}

.wsc_oc_logo_img {
  height: 40px !important;
  width: auto !important;
  max-width: 190px !important;
  object-fit: contain !important;
  display: block !important;
}

.wsc_oc_brand_name {
  font-family: Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #192c27 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.wsc_oc_brand_dot {
  color: #62b414 !important;
  font-size: 16px !important;
}

.wsc_oc_brand_sub {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #75837c !important;
  margin-top: 2px !important;
}

/* ==========================================================================
   3. SEARCHIQ SEARCH BAR — 100% IDENTICAL TO 404 & BLOG
   ========================================================================== */
.wsc_offcanvas_search {
  margin: 0 0 18px !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_offcanvas_search .siq-expandwdgt-cont,
.wsc_offcanvas_search .siq-searchwidget,
.wsc_offcanvas_search form.siq-searchwidget {
  width: 100% !important;
  margin: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.wsc_offcanvas_search .siq-expandwdgt-input,
.wsc_offcanvas_search .siq-searchwidget-input,
.wsc_offcanvas_search input[type="search"],
.wsc_offcanvas_search .search-field {
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  background: #ffffff !important;
  border: 1.5px solid #e3dcce !important;
  border-radius: 12px !important;
  padding: 0 16px 0 40px !important;
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #192c27 !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(25, 44, 39, 0.04) !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.wsc_offcanvas_search .siq-expandwdgt-input:focus,
.wsc_offcanvas_search .siq-searchwidget-input:focus,
.wsc_offcanvas_search input[type="search"]:focus,
.wsc_offcanvas_search .search-field:focus {
  border-color: #62b414 !important;
  box-shadow: 0 0 0 3px rgba(98, 180, 20, 0.2) !important;
}

.wsc_offcanvas_search .siq-expandwdgt-icon,
.wsc_offcanvas_search span.siq-expandwdgt-icon {
  position: absolute !important;
  left: 13px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 1 !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 15px !important;
  color: #728279 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.wsc_offcanvas_search span.siq-expandwdgt-icon:before {
  font-size: 15px !important;
  line-height: 1 !important;
  text-align: left !important;
  display: block !important;
}

/* ==========================================================================
   4. GROUP HEADINGS & CONTAINERS
   ========================================================================== */
.wsc_oc_group {
  margin-bottom: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_sec_hd {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  padding: 0 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_sec_title {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #192c27 !important;
}

.wsc_oc_sec_action {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #62b414 !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
  flex-shrink: 0 !important;
}

.wsc_oc_sec_action:hover {
  color: #529810 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   5. 1. TRENDING BESTSELLERS ROW (HORIZONTAL SCROLL TRACK)
   ========================================================================== */
.wsc_oc_trend_track {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 8px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_trend_track::-webkit-scrollbar {
  height: 4px !important;
}
.wsc_oc_trend_track::-webkit-scrollbar-thumb {
  background: rgba(25, 44, 39, 0.15) !important;
  border-radius: 4px !important;
}

.wsc_oc_trend_card {
  flex: 0 0 118px !important;
  width: 118px !important;
  scroll-snap-align: start !important;
  background: #ffffff !important;
  border: 1px solid #e6ede8 !important;
  border-radius: 12px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  box-shadow: 0 2px 6px rgba(25, 44, 39, 0.03) !important;
  box-sizing: border-box !important;
}

.wsc_oc_trend_card:hover {
  border-color: #cbd8cf !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(25, 44, 39, 0.08) !important;
}

.wsc_oc_trend_click {
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  color: inherit !important;
}

.wsc_oc_trend_click:hover .wsc_oc_trend_name {
  color: #62b414 !important;
}

.wsc_oc_trend_badge {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  background: #192c27 !important;
  color: #ffffff !important;
  z-index: 2 !important;
}

.wsc_oc_trend_badge.gold {
  background: #f0bc00 !important;
  color: #3b2800 !important;
}

.wsc_oc_trend_badge.green {
  background: #62b414 !important;
  color: #ffffff !important;
}

.wsc_oc_trend_imgbox {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  background: #f7f9f7 !important;
  overflow: hidden !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.wsc_oc_trend_img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  mix-blend-mode: multiply !important;
  display: block !important;
}

.wsc_oc_trend_name {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #192c27 !important;
  line-height: 1.25 !important;
  margin-bottom: 3px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 28px !important;
}

.wsc_oc_trend_sub {
  font-size: 8.5px !important;
  color: #75837c !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.wsc_oc_trend_bot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 5px !important;
  border-top: 1px dashed #e6ede8 !important;
}

.wsc_oc_trend_price {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #192c27 !important;
}

.wsc_oc_trend_add {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #62b414 !important;
  background: rgba(98, 180, 20, 0.12) !important;
  border: 1px solid rgba(98, 180, 20, 0.25) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.wsc_oc_trend_add:hover {
  background: #62b414 !important;
  color: #ffffff !important;
  border-color: #62b414 !important;
  transform: translateY(-1px) !important;
}

.wsc_oc_trend_add.is-loading {
  opacity: 0.7 !important;
  pointer-events: none !important;
}

.wsc_oc_trend_add.is-added {
  background: #2b5606 !important;
  color: #ffffff !important;
  border-color: #2b5606 !important;
}

/* ==========================================================================
   6. 2. SELF-DESCRIBING CATEGORIES
   ========================================================================== */
.wsc_oc_cat_list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_cat_card {
  background: #ffffff !important;
  border: 1px solid #e6ede8 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 5px rgba(25, 44, 39, 0.02) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_cat_card:hover {
  border-color: #cbd8cf !important;
  background: #fafcf9 !important;
  transform: translateX(2px) !important;
  box-shadow: 0 4px 12px rgba(25, 44, 39, 0.06) !important;
}

.wsc_oc_cat_icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #ece4d4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(25, 44, 39, 0.06) !important;
}

.wsc_oc_cat_info {
  flex: 1 !important;
  min-width: 0 !important;
}

.wsc_oc_cat_toprow {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
  min-width: 0 !important;
}

.wsc_oc_cat_title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #192c27 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.wsc_oc_cat_pill {
  font-size: 7.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  background: rgba(98, 180, 20, 0.12) !important;
  color: #3b7107 !important;
  flex-shrink: 0 !important;
}

.wsc_oc_cat_desc {
  font-size: 11px !important;
  color: #75837c !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.wsc_oc_cat_arrow {
  color: #9cb2a6 !important;
  font-size: 19px !important;
  font-weight: 300 !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s, color 0.15s !important;
}

.wsc_oc_cat_card:hover .wsc_oc_cat_arrow {
  color: #62b414 !important;
  transform: translateX(2px) !important;
}

/* Shop All Special Card */
.wsc_oc_cat_card.wsc_oc_shop_all_card {
  background: #f7faf7 !important;
  border: 1.5px solid #62b414 !important;
  box-shadow: 0 2px 8px rgba(98, 180, 20, 0.08) !important;
}

.wsc_oc_cat_card.wsc_oc_shop_all_card:hover {
  background: #eef6ec !important;
  border-color: #529810 !important;
  box-shadow: 0 4px 14px rgba(98, 180, 20, 0.16) !important;
}

.wsc_oc_cat_card.wsc_oc_shop_all_card .wsc_oc_cat_icon {
  background: #62b414 !important;
  border-color: #62b414 !important;
  color: #ffffff !important;
}

.wsc_oc_cat_card.wsc_oc_shop_all_card .wsc_oc_cat_pill {
  background: #62b414 !important;
  color: #ffffff !important;
}

.wsc_oc_cat_card.wsc_oc_shop_all_card .wsc_oc_cat_arrow {
  color: #62b414 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* Recreational Special Card */
.wsc_oc_cat_card.wsc_oc_rec_card .wsc_oc_cat_icon {
  background: #fef6e6 !important;
  border-color: rgba(224, 159, 36, 0.25) !important;
}

.wsc_oc_cat_card.wsc_oc_rec_card .wsc_oc_cat_pill {
  background: rgba(224, 159, 36, 0.18) !important;
  color: #9c6800 !important;
}

/* ==========================================================================
   7. 3. QUIZ BRIDGE CARD
   ========================================================================== */
.wsc_oc_quiz_box {
  margin: 12px 0 16px !important;
  background-color: #192c27 !important;
  background: linear-gradient(135deg, #1b302a 0%, #101c18 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 0 4px 15px rgba(16, 28, 24, 0.25) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 140px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_quiz_box::after {
  content: "" !important;
  position: absolute !important;
  right: -20px !important;
  bottom: -20px !important;
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(98, 180, 20, 0.25) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.wsc_oc_quiz_tag {
  display: inline-block !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #62b414 !important;
  position: relative !important;
  z-index: 2 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.wsc_oc_quiz_hd {
  display: block !important;
  font-family: Georgia, serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.wsc_oc_quiz_p {
  display: block !important;
  font-size: 11.5px !important;
  color: #c9d8d1 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.wsc_oc_quiz_btn {
  align-self: flex-start !important;
  background-color: #62b414 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 3px 10px rgba(98, 180, 20, 0.35) !important;
  margin-top: 4px !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.wsc_oc_quiz_btn:hover {
  background-color: #529810 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   8. 4. UTILITY GRID & TRUST FOOTER
   ========================================================================== */
.wsc_oc_util_grid {
  margin-top: 6px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_util_link {
  background: #ffffff !important;
  border: 1px solid #e6ede8 !important;
  border-radius: 10px !important;
  padding: 9px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #192c27 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all 0.15s !important;
  box-shadow: 0 2px 4px rgba(25, 44, 39, 0.02) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_util_link:hover {
  background: #ece4d4 !important;
  border-color: #cbd8cf !important;
}

.wsc_oc_util_icon {
  font-size: 13.5px !important;
  flex-shrink: 0 !important;
}

.wsc_oc_util_link span:last-child {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.wsc_oc_footer_trust {
  margin-top: 18px !important;
  padding: 12px 14px !important;
  background: rgba(25, 44, 39, 0.04) !important;
  border: 1px solid #e6ede8 !important;
  border-radius: 10px !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.wsc_oc_ft_stars {
  color: #f0bc00 !important;
  font-size: 12.5px !important;
  margin-bottom: 2px !important;
  letter-spacing: 2px !important;
}

.wsc_oc_ft_text {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #192c27 !important;
  margin: 0 !important;
}

.wsc_oc_ft_sub {
  font-size: 9px !important;
  color: #75837c !important;
  margin-top: 2px !important;
}